businessCard/xiaochengxu/pages/mySet/myInfo.vue

<template>
	<view class="content">
		<view class="card-list content1">
			<view class="row" v-for="(item,index) in cardList" :key="index">
				<view class="title-name">
					{{item.cardBusiness}}
				</view>
				<view class="card-list-item"
					:style="item.currentBackground?'background:url('+item.currentBackground+');background-size:100% 100%':''">
					<view class="card-content style1" v-if="item.cuttentTemplate==1">
						<view class="left">
							<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
								shape="circle"></u--image>
						</view>
						<view class="right">
							<view class="row1">
								<text class="name">{{item.name}}</text>
								<text class="post">{{item.post}}</text>
							</view>
							<view class="row2">
								{{item.companyName}}
							</view>
							<view class="row3 flex">
								<u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
									height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
							</view>
							<view class="row4 flex">
								<u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
									height="13px"></u--image>{{ item.phone }}
							</view>
							<view class="row4 flex">
								<u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
									height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
							</view>
							<!-- <view class="">
								备注
							</view> -->
						</view>
					</view>
					<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==2">
						<view class="right">
							<view class="row1">
								<text class="name">{{item.name}}</text>
								<text class="post">{{item.post}}</text>
							</view>
							<view class="row2">
								{{item.companyName}}
							</view>
							<view class="row3 flex">
								<u--image :showLoading="true" src="/static/imgs/card/address3.png" width="13px"
									height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
							</view>
							<view class="row4 flex">
								<u--image :showLoading="true" src="/static/imgs/card/phone3.png" width="12px"
									height="13px"></u--image>{{ item.phone }}
							</view>
							<view class="row4 flex">
								<u--image :showLoading="true" src="/static/imgs/card/remark3.png" width="10px"
									height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
							</view>
							<!-- <view class="">
								备注
							</view> -->
						</view>
						<view class="left">
							<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
								shape="circle" v-if="item.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>
					<view class="card-content style2" v-if="item.cuttentTemplate==3">
						<view class="top">
							<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
								shape="circle" v-if="item.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">{{item.name}}</text>
									<text class="post">{{item.post}}</text>
								</view>
								<view class="row2">
									{{item.companyName}}
								</view>
							</view>
							<view class="right">
								<view class="row3 flex">
									<u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
										height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
								</view>
								<view class="row4 flex">
									<u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
										height="13px"></u--image>{{ item.phone }}
								</view>
								<view class="row4 flex">
									<u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
										height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
								</view>
							</view>
						</view>
					</view>
					<view class="card-content style2" v-if="item.cuttentTemplate==4">
						<view class="top">
							<view class="row1">
								<text class="name">{{item.name}}</text>
								<text class="post">{{item.post}}</text>
							</view>
							<view class="row2">
								{{item.companyName}}
							</view>

						</view>
						<view class="bottom flex">
							<view class="left">
								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px"
									shape="circle" v-if="item.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 class="row3 flex">
									<u--image :showLoading="true" src="/static/imgs/card/address2.png" width="13px"
										height="16px"></u--image>{{ item.province }}{{ item.city }}{{ item.area }}
								</view>
								<view class="row4 flex">
									<u--image :showLoading="true" src="/static/imgs/card/phone2.png" width="12px"
										height="13px"></u--image>{{ item.phone }}
								</view>
								<view class="row4 flex">
									<u--image :showLoading="true" src="/static/imgs/card/remark2.png" width="10px"
										height="12px"></u--image>{{item.remark?item.remark:'单击添加备注'}}
								</view>
							</view>
						</view>
					</view>
					<view class="car-bottom flex">
						<view class="left">
							<image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;"
								@click="toHome(item)"></image>
							<image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;"
								@click="share(item)"></image>
							<image src="../../static/imgs/card/ewm.png" mode="widthFix" style="width: 32rpx;"
								@click="showCode(item)"></image>
						</view>
						<view class="right">
							<text class="text" @click="topMarking(item)">置顶</text>
							<text class="text" @click="del(item.id)">删除</text>
							<text class="text" @click="toEditCard(item)">编辑</text>
						</view>
						<!-- <u-button text="置顶" @click="topMarking(item)" throttle-time='1000'></u-button> -->
						<!-- <button @click="$u.debounce(topMarking, 500)">置顶</button> -->
						<!-- <button @click="$u.debounce(topMarking(item), 500)">置顶</button> -->
						<!-- <u-button text="删除" @click="del(item.id)" throttle-time='1000'></u-button> -->
						<!-- <button @click="toEditCard(item)">编辑</button> -->
					</view>
				</view>

			</view>
		</view>
		<view class="upload flex flex-all-center" @click="addCard">
			<view class="solids flex flex-all-center">
				<image src="../../static/imgs/card/add.png" mode="widthFix" style="width: 148rpx;"></image>
				<text class='text'>添加新名片</text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="isShowDel" @close="isShowDel=false" mode="center">
			<view class="del-style">
				<text class="title">删除名片自动退出关联得圈子，确定删除？</text>
				<u-radio-group v-model="radiovalue" placement="column">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
				<view class="flex">
					<view class="" @click="isShowDel=false">
						取消
					</view>
					<view class="" @click="delCard">
						删除
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowCode" @close="isShowCode=false" mode="center" :round='10'>
			<image style='margin:10px;' :src="selectCode" mode="widthFix"></image>
		</u-popup>
		<u-popup :show="popupshow" :closeOnClickOverlay='true' :overlayOpacity='0.4' @close='handleHiddenShare'
			:round="10" mode="bottom">
			<view>
				<view class="share-content">
					<view class="block" @click="toUrl()">
						<button class="moment">
							<view class="iconfont icon-pengyouquan"></view>
							<view>分享朋友圈</view>
						</button>
					</view>
					<view class="block">
						<button class="shareBtn" type="default" data-name="shareBtn" open-type="share">
							<view class="iconfont icon-weixin"></view>
							<view>分享微信好友</view>
						</button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 生成图片 -->
		<poster :data="canvasData" background-color="#FFF" :width='750' :height='420' @on-success="posterSuccess"
			ref="poster" @on-error="posterError"></poster>
			<point-share @close='showShare=false' :show='showShare'></point-share>
	</view>
</template>

<script>
	import Poster from '../../components/zhangyuhao-poster/Poster.vue';
	import PointShare from '../../components/point-share/index.vue';
	var that;
	export default {
		components: {
			Poster,
			PointShare
		},
		data() {
			return {
				isShowCode: false,
				selectCode: '',
				id: '',
				showShare:false,
				popupshow:false,
				radiovalue: '仅从自己名片列表删除',
				radiolist: [{
						name: '仅从自己名片列表删除',
						disabled: false
					},
					{
						name: '从所有拥有此名片用户列表删除',
						disabled: false
					}
				],
				isShowDel: false,
				cardList: [],
				canvasData:{},
				clicknum:0,
				poster:''
			};
		},
		onLoad() {
			that = this
			this.userInfo = uni.getStorageSync("userInfo")
		},
		onShow() {
			this.init()
		},
		onShareAppMessage(res) {
		
			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: this.popupshow ? `${that.currectData.name}分享的名片~` : '电子名片',
					path: path,
					imageUrl: this.popupshow ? imageUrl : '',
				};
			}
			if (res.from === 'menu') {
				return {
					title: '我的名片',
					path: '/pages/tabBarPro/index/index',
					imageUrl: this.popupshow ? imageUrl : ''
				};
			}
		},
		methods: {
			toUrl(){
				this.popupshow=false
				this.showShare=true
			},
			handleHiddenShare() {
				this.popupshow = false
			},
			posterError(err) {
				console.log(err)
				uni.hideLoading()
			},
			posterSuccess(url) {
				console.log("hahahah", url)
				// 生成成功，会把临时路径在这里返回
				this.poster = url;
				uni.hideLoading()
				this.popupshow = true
				console.log(url)
				
			},
			showCode(val) {
				this.selectCode = val.qrCodeMyself
				this.isShowCode = true
			},
			share(item) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.currectData = item
				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/bgc1.png',
						use: 'bg1',
						x: 3,
						y: 243,
						width: 240,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/bgc2.png',
						use: 'bg2',
						x: 225,
						y: 243,
						width: 278,
						height: 67
					},
					{
						type: 'image',
						path: '../../static/imgs/card/home.png',
						use: 'home',
						x: 30,
						y: 260,
						width: 33,
						height: 33
					},
					{
						type: 'image',
						path: '../../static/imgs/card/share.png',
						use: 'share',
						x: 90,
						y: 263,
						width: 33,
						height: 28
					},
					{
						type: 'image',
						path: '../../static/imgs/card/ewm.png',
						use: 'code',
						x: 150,
						y: 263,
						width: 32,
						height: 32
					},
					{
						type: 'text',
						text: '置顶',
						use: 'top',
						x: 280,
						y: 265,
						size: 24,
						color: '#fff'
					},
					{
						type: 'text',
						text: '删除',
						use: 'del',
						x: 350,
						y: 265,
						size: 24,
						color: '#fff'
					},
					{
						type: 'text',
						text: '编辑',
						use: 'edit',
						x: 420,
						y: 265,
						size: 24,
						color: '#fff'
					},
				]
				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 === 'address-icon') {
								data[i].path = '../../static/imgs/card/address3.png'
							}
							if (data[i].use === 'phone-icon') {
								data[i].path = '../../static/imgs/card/phone3.png'
							}
							if (data[i].use === 'remark-icon') {
								data[i].path = '../../static/imgs/card/remark3.png'
							}
							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].path = '../../static/imgs/card/address2.png'
							}
							if (data[i].use === 'phone-icon') {
								data[i].path = '../../static/imgs/card/phone2.png'
							}
							if (data[i].use === 'remark-icon') {
								data[i].path = '../../static/imgs/card/remark2.png'
							}
							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,
					page:'myInfo'
				}
				console.log(1111111)
			},
			toHome(item) {
				uni.navigateTo({
					url: "/pages/mySet/myHome?id=" + item.personalHomeId
				})
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			init() {
				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
					commonId: this.userInfo.id
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.cardList = res.data.items
				})
			},
			toEditCard(val) {
				uni.navigateTo({
					url: "/pages/mySet/editCard?itemVal=" + JSON.stringify(val)
				})
			},
			delCard() {
				let _data = {}
				if (this.radiovalue == '仅从自己名片列表删除') {
					_data = {
						id: this.id
					}
				} else {
					_data = {
						id: this.id,
						deleteCondition: 1
					}
				}
				that.$request.baseRequest('admin.unimall.cardManagementInfo', 'delete', _data, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.isShowDel = false
					this.$refs.uToast.show({
						type: 'success',
						message: '删除成功！',
					})
					this.init()
				})
			},
			del(val) {
				this.id = val
				this.isShowDel = true

			},
			addCard() {
				uni.navigateTo({
					url: "/pages/mySet/newCard"
				})
			},
			topMarking(val) {
				that.$request.baseRequest('admin.unimall.cardManagementInfo', 'top', {
					cardManagementInfo: JSON.stringify({
						id: val.id
					})
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: '置顶成功！',
					})
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 40rpx;
	}

	.card-content {
		width: 100%;
	}

	.content1 {
		.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 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}

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

				}
			}
		}

		.style2 {
			padding: 30rpx;
			margin-bottom: 100rpx;

			.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: 20rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #323333;
				}
			}

			.bottom {
				margin-top: 48rpx;

				.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: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #323333;
					}
				}

				.right {

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

					.row2 {
						margin-top: 20rpx;
					}
				}
			}

		}
	}

	.card-list {
		padding: 0 20rpx;

		.title-name {
			font-weight: bold;
			color: #19191A;
			margin: 20rpx 0;
		}
	}

	.card-list-item {
		width: calc(100% + 40rpx);
		left: -20rpx;
		position: relative;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.car-bottom {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			width: calc(100% - 40rpx);

			.left {
				position: absolute;
				padding: 20rpx 0;
				width: 310rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-evenly;
				background: url("../../static/imgs/card/bgc1.png") no-repeat center;
				background-size: 100% 100%;
			}

			.right {
				font-size: 26rpx;
				padding: 20rpx 0;
				position: relative;
				right: -280rpx;
				width: calc(100vw - 320rpx);
				box-sizing: border-box;
				display: flex;
				justify-content: space-evenly;
				background: url("../../static/imgs/card/bgc2.png") no-repeat center;
				background-size: 100% 100%;

				.text {
					color: #fff;
				}
			}
		}

		.left {
			width: 30%;

			.top {

				margin-bottom: 20rpx;
			}

			.img {
				width: 80%;
			}

			.bottom {}
		}

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

	.upload {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 76rpx;

		.solids {
			flex-direction: column;

			.text {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}

	}
	.share-content {
		display: flex;
		padding: 20rpx;
		justify-content: center;
		font-size: 24rpx;
	
		button {
			background: transparent;
			line-height: 1.5;
		}
	
		button:after {
			border: none;
		}
	}
	.icon-pengyouquan,.icon-weixin{
		font-size:50px;
		color:#33CC00;
	}
</style>