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 @click='selectCard' src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img"></image>
				<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>
	</view>
</template>

<script>
	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
	export default {
		components: {
			Poster
		},
		data() {
			return {
				userInfo: {},
				cardList:[],
				canvasData:{},
				currectData:{},
				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() {
			this.userInfo = uni.getStorageSync("userInfo")
			console.log(this.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.cardList = [res.data.items]
				this.cardChange({value:this.cardList[[0]]})
			})
		},
		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(){
				this.show=true
			},
			selectCard1(){
				this.show1=true
			},
			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) {
				let _url = '/pages/mySet/' + typeName
				console.log(_url)
				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 {
			.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;
		}
	}

	
</style>