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 @click='remarkEdit(cardInfo)' 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 @click='remarkEdit(cardInfo)' 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 @click='remarkEdit(cardInfo)' 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 @click='remarkEdit(cardInfo)' 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-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import Card from '../../components/Card/Card.vue'
	export default {
		components: {
			Card
		},
		data() {
			return {
				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: [],
				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) {
			this.id = options.id.indexOf(",") ? options.id.split(",")[0] : options.id
			this.commonId = options.id.indexOf(",") ? options.id.split(",")[1] : ''
			this.getList()
		},
		onShow() {

		},
		methods: {
			save() {
				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.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
			},
			getList() {
				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(res, "this.cardInfo")
					this.cardInfo = res.data
					this.cardInfo.cardBusiness = ''
					// this.cardInfo.cardCommonId = res.data.commonId
					console.log(res)
				})
				console.log(uni.getStorageSync("userInfo").id, 111111)
				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.cardInfos]
				})
				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;
	}
</style>