businessCard/xiaochengxu/pages/cardHolder/scanCodeAddCard.vue

<template>
	<view>
		<view class="card-wrap">
			<!-- <card :obj="cardInfo" :styleList="bottomStyle" page="scanCodeAddCard"></card> -->
			<view class="card-list-cardInfo relative"
				:style="cardInfo.currentBackground?'background: url('+cardInfo.currentBackground+');background-size:100% 100%':''">
				<view class="card-content style1" v-if="cardInfo.cuttentTemplate==1">
					<view class="left">
						<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px"
							shape="circle"></u--image>
					</view>
					<view class="right">
						<view class="row1">
							<text class="name">{{cardInfo.name}}</text>
							<text class="post">{{cardInfo.post}}</text>
						</view>
						<view class="row2">
							{{cardInfo.companyName}}
						</view>
						<view class="row3 flex" @click="toMap(cardInfo)">
							<u--image :showLoading="true" :src="'/static/imgs/card/address'+cardInfo.icon+'.png'"
								width="13px" height="16px"></u--image>
							<view class='icon-text'>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
						</view>
						<view @click="freeTell(cardInfo)" class="row4 flex">
							<u--image :showLoading="true" :src="'/static/imgs/card/phone'+cardInfo.icon+'.png'"
								width="12px" height="13px"></u--image>
							<view class='icon-text'>{{ cardInfo.phone }}</view>
						</view>
						<view class="row2 flex" style="color: #808080">
							<u--image :showLoading="true" :src="'/static/imgs/card/remark'+cardInfo.icon+'.png'"
								width="10px" height="12px"></u--image>
							<view class='icon-text' style="color: #808080;">{{cardInfo.remark?cardInfo.remark:''}}
							</view>
						</view>
					</view>
					<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
						<u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='cardInfo.checked'
							:customStyle="{marginBottom: '8px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="card-content style1 flex-between" v-if="cardInfo.cuttentTemplate==2">
					<view class="right">
						<view class="row1">
							<text class="name">{{cardInfo.name}}</text>
							<text class="post">{{cardInfo.post}}</text>
						</view>
						<view class="row2">
							{{cardInfo.companyName}}
						</view>
						<view @click="toMap(cardInfo)" class="row3 flex">
							<u--image :showLoading="true" :src="'/static/imgs/card/address'+cardInfo.icon+'.png'"
								width="13px" height="16px"></u--image>
							<view class='icon-text'>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
						</view>
						<view @click="freeTell(cardInfo)" class="row4 flex">
							<u--image :showLoading="true" :src="'/static/imgs/card/phone'+cardInfo.icon+'.png'"
								width="12px" height="13px"></u--image>
							<view class='icon-text'>{{ cardInfo.phone }}</view>
						</view>
						<view  class="row2 flex" style="color: #808080">
							<u--image :showLoading="true" :src="'/static/imgs/card/remark'+cardInfo.icon+'.png'"
								width="10px" height="12px"></u--image>
							<view class='icon-text' style="color: #808080;">{{cardInfo.remark?cardInfo.remark:''}}
							</view>
						</view>
					</view>
					<view class="left">
						<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px"
							shape="circle" v-if="cardInfo.headSculpture"></u--image>
						<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px" height="66px"
							shape="circle" v-else></u--image>
					</view>
					<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
						<u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='cardInfo.checked'
							:customStyle="{marginBottom: '8px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="card-content style2" v-if="cardInfo.cuttentTemplate==3">
					<view class="top">
						<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px"
							shape="circle" v-if="cardInfo.headSculpture"></u--image>
						<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px" height="66px"
							shape="circle" v-else></u--image>
					</view>
					<view class="bottom flex">
						<view class="left">
							<view class="row1">
								<text class="name">{{cardInfo.name}}</text>
								<text class="post">{{cardInfo.post}}</text>
							</view>
							<view class="row2">
								{{cardInfo.companyName}}
							</view>
						</view>
						<view class="right">
							<view @click="toMap(cardInfo)" class="row1 flex">
								<u--image :showLoading="true" :src="'/static/imgs/card/address'+cardInfo.icon+'.png'"
									width="13px" height="16px"></u--image>
								<view class='icon-text'>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
								</view>
							</view>
							<view @click="freeTell(cardInfo)" class="row2 flex">
								<u--image :showLoading="true" :src="'/static/imgs/card/phone'+cardInfo.icon+'.png'"
									width="12px" height="13px"></u--image>
								<view class='icon-text'>{{ cardInfo.phone }}</view>
							</view>
							<view class="row2 flex" style="color: #808080">
								<u--image :showLoading="true" :src="'/static/imgs/card/remark'+cardInfo.icon+'.png'"
									width="10px" height="12px"></u--image>
								<view class='icon-text' style="color: #808080;">
									{{cardInfo.remark?cardInfo.remark:''}}
								</view>
							</view>
						</view>
					</view>
					<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
						<u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='cardInfo.checked'
							:customStyle="{marginBottom: '8px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="card-content style2" v-if="cardInfo.cuttentTemplate==4">
					<view class="top">
						<view class="row1">
							<text class="name">{{cardInfo.name}}</text>
							<text class="post">{{cardInfo.post}}</text>
						</view>
						<view class="row2">
							{{cardInfo.companyName}}
						</view>

					</view>
					<view class="bottom flex">
						<view class="left">
							<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px"
								shape="circle" v-if="cardInfo.headSculpture"></u--image>
							<u--image :showLoading="true" src="/static/imgs/card/defaulthead.png" width="66px"
								height="66px" shape="circle" v-else></u--image>
						</view>
						<view class="right">
							<view @click="toMap(cardInfo)" class="row1 flex">
								<u--image :showLoading="true" :src="'/static/imgs/card/address'+cardInfo.icon+'.png'"
									width="13px" height="16px"></u--image>
								<view class='icon-text'>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
								</view>
							</view>
							<view @click="freeTell(cardInfo)" class="row2 flex">
								<u--image :showLoading="true" :src="'/static/imgs/card/phone'+cardInfo.icon+'.png'"
									width="12px" height="13px"></u--image>
								<view class='icon-text'>{{ cardInfo.phone }}</view>
							</view>
							<view class="row2 flex" style="color: #808080">
								<u--image :showLoading="true" :src="'/static/imgs/card/remark'+cardInfo.icon+'.png'"
									width="10px" height="12px"></u--image>
								<view :style='cardInfo.remark?"color:#000;":"color:#808080;"' class='icon-text'>
									{{cardInfo.remark?cardInfo.remark:''}}
								</view>
							</view>
						</view>
					</view>
					<u-checkbox-group v-if='islongPress' placement="column" @change="checkboxChange($event,index)">
						<u-checkbox iconColor='#4977FC' activeColor="#fff" :name='index+1' :checked='cardInfo.checked'
							:customStyle="{marginBottom: '8px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="car-bottom flex">
						<text style="color: #fff;font-size: 36rpx;font-weight: 700;margin-left: 40rpx;">{{value?value:'默'}}</text>
				</view>
			</view>
		</view>
		<view class="title">
			名片信息
		</view>
		<view class="form-style">
			<view class="row" style="border-bottom: 1px solid #E6E5E5;padding-bottom: 20rpx;">
				<view class="left">
					名片分类
				</view>
				<view class="right" @click="show = true">
					{{cardInfo.classify?cardInfo.classify:'默认分类'}}
				</view>
			</view>
			<view class="" style="padding: 20rpx 0;">
				<view class="left" style="margin-bottom: 20rpx;">
					备注（选填）
				</view>
				<view class="right">
					<u--textarea v-model="cardInfo.remark" placeholder="输入备注，不超过150个字 "></u--textarea>
				</view>
			</view>
			<view v-if='commonId' class="flex flex-between" style="border-bottom: 1px solid #E6E5E5;padding: 20rpx 0;">
				<view class="left">
					我的名片
				</view>
				<view class="right" @click="show1 = true">
					{{cardInfo.cardBusiness?cardInfo.cardBusiness:'无名片'}}
				</view>
			</view>
		</view>
		<u-picker :immediateChange="true" keyName="cardBusiness" title="选择名片" @close="show1=false" @cancel="show1=false"
			closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
		<u-picker :immediateChange="true" keyName="circleName" title="选择分类" @close="show=false" @cancel="show=false"
			closeOnClickOverlay @confirm="typeConfirm" :show="show" :columns="columns"></u-picker>
		<view class="bottom-btn">
			<u-button @click='cancel' text="取消" type="primary" :plain="true" color="#18254C"
				:customStyle="btnStyle"></u-button>
			<u-button @click='$u.debounce(save, 500)' text="保存" type="primary" color="#18254C"
				:customStyle="btnStyle"></u-button>
		</view>
	<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>
					<!-- <div class="title">手机登录后才能查看名片哦~</div> -->
					<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="showAuthorizeUser=false">
							拒绝</u-button></view>
					<view class="btn-ok"><u-button :customStyle="customStyleOk" @click="authUser"> 允许</u-button></view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import Card from '../../components/Card/Card.vue'
	export default {
		components: {
			Card
		},
		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"
				},
				value: '',
				btnStyle: {
					width:'calc(50% - 80rpx)'
				},
				bottomStyle: [
					"position:absolute;left: 0;width:24vw;height:0;border-bottom:80rpx solid red;border-right:80rpx solid transparent;border-radius:0 0 0 20rpx",
					"position: absolute;right: -40rpx;width: 58vw;height: 0;border-top: 80rpx solid green;border-left: 80rpx solid transparent;border-radius: 0 0 10px 0"
				],
				id: '',
				commonId: '',
				cardInfo: {},
				show: false,
				show1: false,
				columns: [],
				cardList: [],
				userInfo:{},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(options) {
			that = this
			console.log(options)
			this.id = options.id.indexOf(",") ? options.id.split(",")[0] : options.id
			if (uni.getStorageSync("userInfo").phone) {
				this.userInfo = uni.getStorageSync("userInfo")
				// this.commonId = options.id.indexOf(",") ? options.id.split(",")[1] : ''
				
				this.getList()
				
			} else {
				this.showAuthorizePhone = true
			}
		},
		onShow() {
			
		},
		methods: {
			//获取昵称输入内容
			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
					// that.mescroll.resetUpScroll()
					this.getList()
				}
			},
			async getPhoneNumber(e) {
				console.log("开始登录")
				that.userInfo = await this.$request.wxlogin()
				console.log("结束登录",that.userInfo)
				console.log("开始获取手机号码")
				this.$nextTick(function() {
					that.userInfo.phone = that.$request.getPhone(e, that.userInfo)
					that.showAuthorizePhone = false
					that.showAuthorizeUser = true
					console.log("结束获取手机号码",that.userInfo.phone)
				});
				
			
			},
			save() {
				if(this.cardInfo.length==0){
					uni.showToast({
						icon: "none",
						title: "您还未创建名片，请前往我的先创建名片！",
						duration: 3000
					});
					return
				}
				this.$request.baseRequest('admin.unimall.cardHolderInfo', 'getAdded', {
					commonId: uni.getStorageSync("userInfo").id,
					cardId: this.cardInfo.id,
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res1 => {
					uni.showLoading({
						title: '数据加载中',
						mask: true
					})
					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'add', {
						cardHolderInfo: JSON.stringify({
							cardId: this.cardInfo.id,
							remark: this.cardInfo.remark,
							cardCommonId: this.commonId,
							myCardId: this.cardInfo.myCardId,
							commonId: uni.getStorageSync("userInfo").id,
							classify: this.cardInfo.classify
						})
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(res => {
						uni.showToast({
							icon: "success",
							title: '保存成功！',
							duration: 2000
						});
						 uni.setStorageSync("scanAddCardToIndex",1)
						uni.switchTab({
							url: "/pages/cardHolder/cardHolder"
					
						})
					})
				})
				
			},
			cancel() {
				uni.switchTab({
					url: "/pages/cardHolder/cardHolder"

				})
			},
			cardConfirm(e) {
				console.log(e)
				this.cardInfo.cardBusiness = e.value[0].cardBusiness
				this.cardInfo.myCardId = e.value[0].id
				this.show1 = false
			},
			typeConfirm(e) {
				console.log(e)
				this.cardInfo.classify = e.value[0].circleName
				this.value = e.value[0].circleName.substring(0,1)
				this.show = false
			},
			async getList() {
				await this.$request.baseRequest('admin.unimall.cardManagementInfo', 'get', {
					id: this.id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					console.log("this.cardInfo",res)
					this.cardInfo = res.data
					// if(this.cardInfo.length==0){
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: "您还未创建名片，请前往我的先创建名片！",
					// 		duration: 3000
					// 	});
					// }
					// this.cardInfo.cardBusiness = ''
					// this.cardInfo.cardCommonId = res.data.commonId
					console.log(res)
				})
				await this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.cardList = [res.data.items]
					this.cardInfo.cardBusiness = res.data.items[0].cardBusiness
					this.cardInfo.myCardId = res.data.items[0].id
					
				})
				await this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list', {
					page: 1,
					limit: 9999,
					commonId: uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				}).then(res => {
					this.columns = [res.data.items]
					console.log(this.columns)
				})


			}
		}
	}
</script>

<style scoped lang="scss">
	.card-wrap {
		margin: 0 20rpx;
		background: #f5f5f5;
		// height: 1000px;
		border-radius: 30rpx;

		.style1 {
			display: flex;
			padding: 20rpx 30rpx;
			width: 85%;
			margin-bottom: 90rpx;

			.left {
				width: 132rpx;
				height: 132rpx;
				border-radius: 50%;
			}

			.right {
				margin-left: 40rpx;

				.row1 {
					.name {
						font-size: 38rpx;
						font-weight: bold;
						color: #040000;
						margin-right: 20rpx;
					}

					.post {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}

				.row2 {
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}

				.row3 {
					margin-top: 30rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #323333;

				}

				.row2,
				.row4 {
					margin-top: 10rpx;
				}
			}
		}

		.style2 {
			padding: 15rpx;
			margin-bottom: 80rpx;

			.top {
				.row1 {
					.name {
						font-size: 38rpx;
						font-weight: bold;
						color: #040000;
						margin-right: 20rpx;
					}

					.post {
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
				}

				.row2 {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}
			}

			.bottom {
				margin-top: 20rpx;

				.left {
					margin-right: 40rpx;

					.row1 {
						.name {
							font-size: 38rpx;
							font-weight: bold;
							color: #040000;
							margin-right: 20rpx;
						}

						.post {
							font-size: 26rpx;
							font-weight: 500;
							color: #666666;
						}
					}

					.row2 {
						margin-top: 10rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #323333;
					}

				}

				.right {

					.row1,
					.row2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #323333;
					}

					.row2,
					.row4 {
						margin-top: 10rpx;
					}
				}
			}

		}


	}
	.car-bottom {
			position: absolute;
			bottom: 63rpx;
			left: 20rpx;
			bottom: 24rpx;
			width: 94.9%;
			background: url("../../static/imgs/card/bgc4.png") no-repeat center;
			background-size: cover;
			height: 80rpx;

			// width: calc(100% - 40rpx);
			.left {
				// top: -40rpx;
				position: absolute;
				padding: 20rpx 0;
				width: 70vw;
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				left: 0px;

				// background-size: 100% 100%;
				overflow-y: hidden;
			}
		}
	.card-list-item {
		width: calc(100%);
		// left:-20rpx;
		position: relative;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

	

		.left {
			width: 30%;

			.top {

				margin-bottom: 20rpx;
			}

			.img {
				width: 80%;
			}

			.bottom {}
		}

		.right {
			.row1 {
				.line {
					width: 1px;
					height: 20px;
					margin: 0 20rpx;
					background: black;
				}
			}
		}
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #19191A;
		margin-left: 20rpx;
	}

	.form-style {
		background: #fff;
		padding: 20rpx;
		margin: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.row {
			display: flex;
			justify-content: space-between;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		// padding: 20rpx;
		width: 100vw;
		height: auto;
	}

	.card-list-cardInfo {
		padding: 40rpx;
	}
	.icon-text{
		margin-left: 20rpx;
	}
	.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%;
	}
</style>