businessCard/xiaochengxu/pages/mySet/mySet.vue

<template>
	<view class="content">
		<view class="content1 flex-between relative flex">
			<view class="user flex">
				<image :src="userInfo.head" mode="widthFix" class="img"></image>
				<view class="name">
					{{userInfo.nickname}}
				</view>
			</view>
			<view class="position">
				<image v-if='list.length>1||list.length==0' @click='selectCard' src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img">
				<button v-if='list.length==1' class="shareBtn" type="default" data-name="shareBtn" open-type="share">
					<image src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img">
					</image>
				</button>
				<image @click='selectCard1' src="../../static/imgs/mySet/ewm.png" mode="widthFix" class="right-img">
				</image>
			</view>
		</view>
		<view class="content2">
			<view class="row flex flex-between" v-for="(item,index) in menuList" :key='index'
				@click="menuClick(item.type)">
				<view class="flex">
					<image :src="item.src" mode="widthFix" class="nav-img"></image>
					<button class="left-btn" v-if='item.type=="contactCustomer"'
						open-type='contact'>{{item.name}}</button>
					<span class="left" v-else>{{item.name}}</span>
				</view>

				<span class="right">
					<image src="../../static/imgs/mySet/yjt.png" mode="widthFix" class="row-right-img"></image>
				</span>
			</view>
		</view>
		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
			<image :src="selectCode" mode="widthFix"></image>
		</u-popup>
		<u-picker keyName="cardBusiness" :confirmType='"share"' :confirmText='"分享"' title="选择名片" @cancel="show=false"
			closeOnClickOverlay @change="cardChange" :show="show" :columns="cardList"></u-picker>
		<u-picker keyName="cardBusiness" confirmText='确定' title="选择名片" @cancel="show1=false" closeOnClickOverlay
			@confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
		<poster :data="canvasData" background-color="#FFF" :width='750' :height='420' @on-success="posterSuccess"
			ref="poster" @on-error="posterError"></poster>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
	export default {
		components: {
			Poster
		},
		data() {
			return {
				userInfo: {},
				cardList: [],
				canvasData: {},
				currectData: {},
				list:[],
				selectCode: '',
				show: false,
				clicknum: 0,
				popupshow: false,
				show1: false,
				isShowCode: false,
				menuList: [{
						name: "我的名片",
						type: 'myInfo',
						src: '../../static/imgs/mySet/card.png'
					},
					{
						name: "我的主页",
						type: 'myHome',
						src: '../../static/imgs/mySet/home.png'
					},
					{
						name: "名片分类",
						type: "cardType",
						src: '../../static/imgs/mySet/type.png'
					},
					{
						name: "我的证件",
						type: "myCard",
						src: '../../static/imgs/mySet/card1.png'
					},
					{
						name: "帮助说明",
						type: "help",
						src: '../../static/imgs/mySet/help.png'
					},
					{
						name: "联系客服",
						type: "contactCustomer",
						src: '../../static/imgs/mySet/kf.png'
					},
					{
						name: "设置",
						type: 'set',
						src: '../../static/imgs/mySet/set.png'
					},
				]
			};
		},
		onShow() {
			if (uni.getStorageSync("userInfo").phone) {
				this.userInfo = uni.getStorageSync("userInfo")
				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.list=res.data.items
					this.cardList = [res.data.items]
					this.cardChange({
						value: this.cardList[[0]]
					})
				})
			} else {
				uni.switchTab({
					url: "/pages/cardHolder/cardHolder"
				})
			}

		},
		onShareAppMessage(res) {
			this.popupshow = false
			console.log(res, this.popupshow)
			let that = this;
			//生成名片图片
			let imageUrl = this.poster
			console.log("imageUrl", imageUrl)
			if (res.from === 'button') {
				let path = `/pages/mySet/lookCard?id=${that.currectData.id}`
				return {
					title: `${that.currectData.name}分享的名片~`,
					path: path,
					imageUrl: imageUrl,
				};
			}
			if (res.from === 'menu') {
				return {
					title: '商通线上商城',
					path: '/pages/tabBarPro/index/index',
					imageUrl: this.popupshow ? imageUrl : ''
				};
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '商通线上商城',
				path: '/pages/index/index',
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			};
		},
		methods: {
			handleHiddenShare() {
				this.popupshow = false
			},
			selectCard() {
				if(this.cardList[0].length>0){
					this.show = true
				}else if(this.cardList[0].length==0){
					this.$refs.uToast.show({
						type: 'error',
						message: '您还未创建名片',
					})
				}
				
			},
			selectCard1() {
				console.log(this.cardList[0])
				if(this.cardList[0].length>1){
					this.show1 = true
				}else if(this.cardList[0].length>0){
					this.cardConfirm({value:this.cardList[[0]]})
				}
				
			},
			cardConfirm(e) {
				console.log(e)
				this.currectData = e.value[0]
				this.selectCode = e.value[0].qrCodeMyself
				this.show1 = false
				this.isShowCode = true
			},
			cardChange(e) {

				this.currectData = e.value[0]
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var data = [{
						type: 'image',
						path: this.currectData.currentBackground,
						use: 'bg',
						x: -10,
						y: 0,
						width: 530,
						height: 325
					},
					{
						type: 'image',
						path: this.currectData.headSculpture,
						shape: 'circle',
						use: 'head',
						x: 30,
						y: 30,
						width: 100,
						height: 100
					},
					{
						type: 'text',
						text: this.currectData.name,
						use: 'name',
						x: 150,
						y: 50,
						size: 24,
						color: '#000'

					},
					{
						type: 'text',
						text: this.currectData.post,
						use: 'post',
						x: 240,
						y: 55,
						size: 18,
						color: '#666666'

					},
					{
						type: 'text',
						text: this.currectData.companyName,
						use: 'companyName',
						x: 150,
						y: 95,
						size: 18,
						color: '#000'

					},
					{
						type: 'image',
						path: '../../static/imgs/card/address1.png',
						use: 'address-icon',
						x: 145,
						y: 130,
						width: 15,
						height: 20
					},
					{
						type: 'textarea',
						text: this.currectData.province + this.currectData.city + this.currectData.area + this
							.currectData.detailedAddress,
						lineSpace: 1,
						width: 320,
						use: 'address',
						x: 175,
						y: 135,
						size: 14,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/phone1.png',
						use: 'phone-icon',
						x: 145,
						y: 163,
						width: 16,
						height: 16
					},
					{
						type: 'text',
						text: this.currectData.phone,
						use: 'phone',
						x: 175,
						y: 167,
						size: 14,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/remark1.png',
						use: 'remark-icon',
						x: 145,
						y: 197,
						width: 13,
						height: 16
					},
					{
						type: 'textarea',
						text: this.currectData.remark ? this.currectData.remark : '单击添加备注',
						use: 'remark',
						lineSpace: 2,
						width: 200,
						x: 175,
						y: 200,
						size: 13,
						color: '#000'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg3.png',
						use: 'bg1',
						x: 0,
						y: 243,
						width: 370,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bg4.png',
						use: 'bg2',
						x: 355,
						y: 243,
						width: 150,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/home.png',
						use: 'home',
						x: 65,
						y: 260,
						width: 33,
						height: 33
					},
					{
						type: 'text',
						text: this.currectData.classifyName ? this.currectData.classifyName : '默',
						use: 'classify',
						x: 145,
						y: 263,
						size: 34,
						color: '#fff'
					},
					{
						type: 'image',
						path: '../../static/imgs/card/share.png',
						use: 'share',
						x: 235,
						y: 263,
						width: 33,
						height: 28
					},
				]
				console.log(this.currectData.cuttentTemplate, 111111)
				for (var i = 0; i < data.length; i++) {
					switch (this.currectData.cuttentTemplate) {
						case '2':
							if (data[i].use === 'name' ||
								data[i].use === 'companyName' ||
								data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 30
							}
							if (data[i].use === 'post') {
								data[i].x = 100
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 60
							}
							if (data[i].use == 'head') {
								data[i].x = 370
							}
							break;
						case '3':
							if (data[i].use === 'name') {
								data[i].x = 30
								data[i].y = 150
							}
							if (data[i].use === 'companyName') {
								data[i].x = 30
								data[i].y = 180
							}
							if (data[i].use === 'post') {
								data[i].x = 100
								data[i].y = 153
							}
							if (data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 170
							}
							if (data[i].use === 'address-icon') {
								data[i].y = 150
							}
							if (data[i].use === 'address') {
								data[i].y = 155;
								data[i].width = 300
							}
							if (data[i].use === 'phone-icon') {
								data[i].y = 180
							}
							if (data[i].use === 'phone') {
								data[i].y = 183
							}
							if (data[i].use === 'remark-icon') {
								data[i].y = 210
							}
							if (data[i].use === 'remark') {
								data[i].y = 212
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 190
							}
							break;
						case '4':
							if (data[i].use === 'name' ||
								data[i].use === 'companyName') {
								data[i].x = 30
							}
							if (data[i].use === 'companyName') {
								data[i].y = 90
							}
							if (data[i].use === 'post') {
								data[i].x = 100
							}
							if (data[i].use == 'head') {
								data[i].x = 25
								data[i].y = 120
							}
							if (data[i].use === 'address-icon' ||
								data[i].use === 'phone-icon' ||
								data[i].use === 'remark-icon') {
								data[i].x = 170
							}
							if (data[i].use === 'address') {
								data[i].width = 300
							}
							if (data[i].use === 'address' ||
								data[i].use === 'phone' ||
								data[i].use === 'remark') {
								data[i].x = 190
							}
							break;
						default:
					}
				}
				this.canvasData = {
					clicknum: this.clicknum++,
					list: data
				}
			},
			posterError(err) {
				console.log(err)
				uni.hideLoading()
			},
			posterSuccess(url) {
				console.log("hahahah", url)
				// 生成成功，会把临时路径在这里返回
				this.poster = url;
				console.log(url)
				// this.show=false
				uni.hideLoading()
			},
			menuClick(typeName) {
				if (typeName == "contactCustomer") return
				let _url = '/pages/mySet/' + typeName
				uni.navigateTo({
					url: _url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		background: #112253;
		padding: 0rpx 20rpx 160rpx 20rpx;
		box-sizing: border-box;
		border-radius: 0px 0px 20rpx 20rpx;

		.user {
			color: #fff;

			.name {
				font-weight: 700;
			}
		}

		.img {
			width: 124rpx;
			border-radius: 50%;
			margin-right: 32rpx;
		}

		.position {
			display:flex;
			.right-img {
				width: 44rpx;
				margin-left: 40rpx;
			}
		}
	}

	.content2 {
		background: #fff;
		margin: 20rpx;
		padding: 0 40rpx;
		position: relative;
		top: -100rpx;
		border-radius: 20rpx;

		.nav-img {
			width: 32rpx;
			margin-right: 20rpx;
		}

		.row {
			border-bottom: 1px solid #E6E6E6;
			padding: 35rpx 0;

			.row-right-img {
				width: 12rpx;
			}
		}

		.row:last-child {
			border: none;
		}

		.left-btn {
			background: #fff;
			padding: 0;
			margin: 0;
			font-size: 32rpx;
			height: 42rpx;
			display: flex;
			align-items: center;
		}

		.left-btn:after {
			border: none !important;
		}
	}
	.shareBtn{
		background:transparent;
		line-height: 1;
		padding:0;
	}
	.shareBtn::after{
		border:none;
		
	}
</style>