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==0">
						<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">
								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
							</view>
							<view class="row4 flex">
								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
							</view>
							<!-- <view class="">
								备注
							</view> -->
						</view>
					</view>
					<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==1">
						<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">
								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
							</view>
							<view class="row4 flex">
								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
							</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==2">
							<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="row1 flex">
										<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
									</view>
									<view class="row2 flex">
										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
									</view>
								</view>
							</view>
					</view>
					<view class="card-content style2" v-if="item.cuttentTemplate==3">
							<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="row1 flex">
										<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
									</view>
									<view class="row2 flex">
										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
									</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 :src="selectCode" mode="widthFix"></image>
				</u-popup>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				isShowCode:false,
				selectCode:'',
				id: '',
				radiovalue: '仅从自己名片列表删除',
				radiolist: [{
						name: '仅从自己名片列表删除',
						disabled: false
					},
					{
						name: '从所有拥有此名片用户列表删除',
						disabled: false
					}
				],
				isShowDel: false,
				cardList: []
			};
		},
		onLoad() {
			that = this
			this.userInfo = uni.getStorageSync("userInfo")
		},
		onShow() {
			this.init()
		},
		methods: {
			
			showCode(val){
				this.selectCode = val.qrCodeMyself
				this.isShowCode = true
			},
			share(){
				
			},
			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;
			}
		}
		
	}
</style>