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?userInfo.head:'../../static/imgs/mySet/head.png'" mode="widthFix" class="img"
					@click="editHead"></image>
				<view @click="editNickName" class="name">
					{{userInfo.nickname?userInfo.nickname:''}}
				</view>
			</view>
			<view class="position">
				<image @click='selectCard' src="../../static/imgs/mySet/share.png" mode="widthFix" class="right-img">

					<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>
		<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>
		<!-- #ifdef MP-WEIXIN -->
		<u-modal :show="showAuthorizePhone" :showConfirmButton="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<img class="avatar-img" src="@/static/imgs/logo.png" mode="widthFix">
					</view>
					<view class="content">手机登录后才能查看名片哦~</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok">
						<u-button :customStyle="customStyleUnOk" @click="showAuthorizePhone=false" :plain="true">
							拒绝</u-button>
					</view>
					<view class="btn-ok">
						<u-button :customStyle="customStyleOk" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber"> 立即登录</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="showAuthorizeUser" :showConfirmButton="false">
			<view class="slot-content">
				<view class="auth-card">
					<view class="img">
						<img class="avatar-img" src="/static/imgs/logo.png" mode="widthFix">
					</view>
					<view class="content">邀请您补全个人信息<br></br>（昵称、头像）</view>
					<view style="margin-left: 100rpx;margin-right: 100rpx">
						<u-form :model="userInfo" ref="uForm">
							<u-form-item label="头像">
								<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
									slot="right">
									<image class="avatar"
										:src="userInfo.head?userInfo.head:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
									</image>
								</button>
							</u-form-item>
							<u-form-item label="昵称">
								<u-input inputAlign='right' v-model="userInfo.nickname" class="weui-input"
									@blur="userNameInput" placeholder="请输入昵称" border="false" />
								<!-- <input type="nickname" :value="userInfo.nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/> -->
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view class="auth-btncard">
					<view class="btn-unok"><u-button :customStyle="customStyleUnOk" @click="authUser(0)">
							拒绝</u-button>
					</view>
					<view class="btn-ok">
						<u-button :customStyle="customStyleOk" @click="authUser(1)"> 允许</u-button>
					</view>
				</view>
			</view>
		</u-modal>

		<!-- #endif -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import Poster from '../../components/zhangyuhao-poster/Poster.vue'
	export default {
		components: {
			Poster
		},
		data() {
			return {
				// 是否弹出登录注册授权弹窗
				showAuthorizeUser: false,
				showAuthorizePhone: false,
				customStyleUnOk: {
					marginTop: '20rpx',
					color: '#18254C',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx"
				},
				customStyleOk: {
					marginTop: '20rpx',
					color: '#fff',
					border: '2px solid #18254C',
					"border-radius": "10px",
					fontSize: "32rpx",
					background: "#18254C"
				},
				userInfo: {},
				cardList: [],
				canvasData: {},
				currectData: {},
				list: [],
				index: 0,
				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: "poster",
						src: '../../static/imgs/mySet/hb.png'
					},
					{
						name: "设置",
						type: 'set',
						src: '../../static/imgs/mySet/set.png'
					},
				]
			};
		},
		beforeDestroy() {
			this.show = false
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo")
			if (this.userInfo.phone) {
				this.getData()

			} else {
				this.showAuthorizePhone = true
			}
		},
		onLoad() {
			that = this
		},
		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: {
			getData() {
				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]
				})
			},
			//获取昵称输入内容
			userNameInput(e) {
				this.userInfo.nickname = e.detail.value
			},
			async onChooseAvatar(e) {
				this.$set(this.userInfo, "head", await this.toBase64(e.detail.avatarUrl))
			},
			toBase64(url) {
				return new Promise(resolve => {
					pathToBase64(url).then(path => {
						resolve(path);
					}).catch(error => {
						console.log(error)
					})
				})
			},
			async authUser(type) {
				//同步信息，没有头像和昵称自动生成
				this.userInfo = await this.$request.syncInfo(this.userInfo)
				if (this.userInfo.openId) {
					uni.setStorageSync("userInfo", that.userInfo)
					that.showAuthorizeUser = false
					this.getData()
				}
			},
			async getPhoneNumber(e) {
				that.userInfo = await this.$request.wxlogin()
				this.$nextTick(function() {
					that.userInfo.phone = that.$request.getPhone(e, that.userInfo)
					that.showAuthorizePhone = false
					that.showAuthorizeUser = true
				});

			},
			editNickName() {
				if (this.userInfo.phone) {
					let _url = '/pages/mySet/editNickName'
					uni.navigateTo({
						url: _url
					})
				} else {
					this.showAuthorizePhone = true
				}
			},
			editHead() {
				if (this.userInfo.phone) {
					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"
												})
											}
										})
									})
								}
							)
						}
					});
				} else {
					this.showAuthorizePhone = true
				}
			},
			handleHiddenShare() {
				this.popupshow = false
			},
			selectCard() {
				if (this.userInfo.phone) {
					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
						})
					}
				} else {
					this.showAuthorizePhone = true
				}
			},
			selectCard1() {
				if (this.userInfo.phone) {
					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]]
						})
					} else if (this.cardList[0].length == 0) {
						uni.showToast({
							icon: "none",
							title: '您还未创建名片',
							duration: 3000
						})
					}
				} else {
					this.showAuthorizePhone = 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) {
				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 (this.userInfo.phone) {
					if (typeName == "contactCustomer") return
					let _url = '/pages/mySet/' + typeName
					uni.navigateTo({
						url: _url
					})
				} else {
					this.showAuthorizePhone = true
				}


			}

		}
	}
</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;

	}

	.slot-content {
		width: 100%;
	}

	.auth-btncard {
		display: flex !important;
		justify-content: space-between !important;

		.btn-unok {
			width: 40%;
		}

		.btn-ok {
			width: 40%;
		}
	}

	.auth-card {
		text-align: center;

		.avatar-img {
			width: 250rpx;
		}

		.title {
			font-size: 20rpx;
		}

		.content {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
			margin-bottom: 30rpx;
		}
	}

	.avatar-wrapper {
		color: #333 !important;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
		padding: 0;
	}

	.avatar-wrapper::after {
		border: none !important;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		border-radius: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 20rpx !important;
	}
</style>