businessCard/xiaochengxu/pages/mySet/mySet.vue

<template>
	<view class="content">
		<u-loading-page loading-mode='spinner' image="/static/imgs/logo.png" iconSize='60' :loading='loading'></u-loading-page>
		<view v-if='!loading'>
			<view class="content1 flex-between relative flex">
				<view class="user flex">
					<image :src="userInfo.head?userInfo.head:'../../static/imgs/mySet/head.png'" mode="widthFix" class="img"
						@click="editHead"></image>
					<view @click="editNickName" 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" style="width: 100%;">
						<image :src="item.src" mode="widthFix" class="nav-img"></image>
						<button class="left-btn" v-if='item.type=="contactCustomer"'
							open-type='contact' style="width: 90%;">{{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>
		</view>
		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
			<image :src="selectCode" mode="widthFix" style="height: auto;"></image>
		</u-popup>
		<u-picker :immediateChange ="true" keyName="cardBusiness" :confirmType='"share"' :confirmText='"分享"' title="选择名片" @cancel="show=false"
			closeOnClickOverlay @change="cardChange" :show="show" :columns="cardList"></u-picker>
		<u-picker :immediateChange ="true" 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>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
	export default {
		components: {
			Poster
		},
		data() {
			return {
				userInfo: {},
				cardList: [],
				canvasData: {},
				currectData: {},
				list: [],
				index: 0,
				loading:true,
				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'
					},
				]
			};
		},
		beforeDestroy() {
			this.show = false
		},
		onShow() {
			var that = this
			this.userInfo = uni.getStorageSync("userInfo")
			setTimeout(()=>{
				that.loading=false
			},2000)
		},
		onLoad() {
			that = this
			this.userInfo = uni.getStorageSync("userInfo")
			if (!this.userInfo.nickname) {
				let code = ""
				for (var i = 0; i < 6; i++) {
					code += parseInt(Math.random() * 10);
				}
				this.userInfo.nickname = 'user' + code
				this.$request.baseRequest('commonUserApp', 'edit', {
					commonUserInfo: JSON.stringify(this.userInfo)
				}, failres => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res => {
					this.userInfo = res.data
					uni.setStorageSync("userInfo", this.userInfo)
				})
			}
			if (this.userInfo.phone) {
				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: this.userInfo.id
				}, failres => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});

				}).then(res => {
					this.list = res.data.items
					this.cardList = [res.data.items]
				})
			} 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/cardHolder/scanCodeAddCard?id=${that.currectData.id}`
				return {
					title: `${that.currectData.name}分享的名片~`,
					path: path,
					imageUrl: imageUrl,
				};
			}
			if (res.from === 'menu') {
				return {
					title: '名片Box',
					path: '/pages/cardHolder/cardHolder',
					imageUrl: ''
				};
			}
		},
		methods: {
			editNickName(){
				let _url = '/pages/mySet/editNickName'
				uni.navigateTo({
					url: _url
				})
			},
			editHead() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function(res) {
						uploadImage(res.tempFilePaths[0], 'cardImages/',
							result => {
								that.userInfo.head = result
								that.$request.baseRequest('commonUserApp', 'edit', {
									commonUserInfo: JSON.stringify(that.userInfo)
								}, failres => {
									uni.hideLoading()
									uni.showToast({
									  icon:"none",
									  title: failres.errmsg,
									  duration: 3000
									});
								}).then(res => {
									uni.setStorageSync("userInfo", that.userInfo)
									uni.showToast({
									  icon:"success",
									  title: '修改成功！',
									  duration: 2000,
									  complete:function(){
										  uni.switchTab({
										  	url: "/pages/mySet/mySet"
										  })
									  }
									})
								})
							}
						)
					}
				});
			},
			handleHiddenShare() {
				this.popupshow = false
			},
			selectCard() {

				if (this.cardList[0].length > 0) {
					this.index = 0
					this.cardChange({
						value: this.cardList[[0]]
					})
				} else if (this.cardList[0].length == 0) {
					uni.showToast({
					  icon:"none",
					  title: '您还未创建名片',
					  duration: 3000
					})
				}
			},
			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) {
				console.log(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 ? this.currectData.headSculpture :
							'../../static/imgs/card/defaulthead.png',
						shape: 'circle',
						use: 'head',
						imageType: this.currectData.headSculpture ? 'wl' : 'bd',
						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)
				if (this.index == 0) {
					this.show = true
				}
				// 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;
			height: auto;
		}

		.position {
			display: flex;

			.right-img {
				width: 44rpx;
				margin-left: 40rpx;
				height: auto;
			}
		}
	}

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

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

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

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

		.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>