dl_uniapp/pages/mine/card/my-card.vue

<template>
	<view :class="['my-card-box',ifChoose?'has-footer':'']">
		<navigation-bar-vue title="我的名片" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="opt-box" v-if="!ifChoose">
			<view v-if="!ifEdit" class="item-dom" @click="manager(true)"><uni-icons type="bars" color="#FC1F3E"
					size="16"></uni-icons><text>管理</text></view>
			<view v-if="!ifEdit" class="item-dom" @click="addCard()">
				<uni-icons type="plusempty" color="#FC1F3E" size="16"></uni-icons>
				<text>新增名片</text>
			</view>
			<view v-if="ifEdit" class="item-dom" @click="manager(false)"><uni-icons type="closeempty" color="#FC1F3E"
					size="16"></uni-icons><text>退出管理</text></view>
		</view>
		<view class="addr-list-box">
			<view style="text-align: center" v-if="busiCardList.length==0">
				<image class="" src="@/static/images/nothing.png"></image>
			</view>
			<view class="card-dom " v-for="item in busiCardList">
				<!-- 多选框--管理状态或者选择名片时使用 -->
				<view class="choose-dom" v-if="ifChoose">
					<uni-data-checkbox v-model="item.choosed" :disabled="1!=item.approvalStatus" multiple
						:localdata="checkboxArray" />
				</view>
				<view :class="['right-content',item.choosed.length>0?'click':'']">
					<view class="card-title">
						<!-- 需要根据平台code取对应的图片 TODO -->
						<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
						<text>{{item.platformName}}博主</text>
						<view class="edit-text" @click="edit()">
							<text v-if="1==item.approvalStatus" style="color:#5986F2;">已审核</text>
							<text v-else-if="0==item.approvalStatus" style="color:#FC1F3E ;">审核中</text>
							<text v-else>未通过</text>
						</view>
					</view>
					<view class="card-content">
						<view class="card-person-info">
							<view class="card-name">
								<view>{{ item.accountName }}</view>
							</view>
							<view class="detail-text">
								<view class="fans-dom">
									粉丝：{{ formatNumberWithUnits(item.fansNum) }}
								</view>
								<!--								<view class="nickname-dom">-->
								<!--									昵称：{{ item.accountName }}-->
								<!--								</view>-->
							</view>
						</view>
					</view>
					<view v-if="ifEdit" @click="remove(item.id)"
						:class="['edit-dom',item.choosed.length>0?'':'no-choose']">删除
					</view>
					<view v-else :class="['edit-dom',item.choosed.length>0?'':'no-choose']" @click="edit(item.id)">编辑
					</view>
				</view>
			</view>
			<view class="card-dom " v-for="item in busiCardList">
				<!-- 多选框--管理状态或者选择名片时使用 -->
				<view class="choose-dom" v-if="ifChoose">
					<uni-data-checkbox v-model="item.choosed" :disabled="1!=item.approvalStatus" multiple
						:localdata="checkboxArray" />
				</view>
				<view :class="['right-content',item.choosed.length>0?'click':'']">
					<view class="card-title">
						<!-- 需要根据平台code取对应的图片 TODO -->
						<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
						<text>{{item.platformName}}博主</text>
						<view class="edit-text" @click="edit()">
							<text v-if="1==item.approvalStatus" style="color:#5986F2;">已审核</text>
							<text v-else-if="0==item.approvalStatus" style="color:#FC1F3E ;">审核中</text>
							<text v-else>未通过</text>
						</view>
					</view>
					<view class="card-content">
						<view class="card-person-info">
							<view class="card-name">
								<view>{{ item.accountName }}</view>
							</view>
							<view class="detail-text">
								<view class="fans-dom">
									粉丝：{{ formatNumberWithUnits(item.fansNum) }}
								</view>
								<!--								<view class="nickname-dom">-->
								<!--									昵称：{{ item.accountName }}-->
								<!--								</view>-->
							</view>
						</view>
					</view>
					<view v-if="ifEdit" @click="remove(item.id)"
						:class="['edit-dom',item.choosed.length>0?'':'no-choose']">删除
					</view>
					<view v-else :class="['edit-dom',item.choosed.length>0?'':'no-choose']" @click="edit(item.id)">编辑
					</view>
				</view>
			</view>
			<view class="card-dom " v-for="item in busiCardList">
				<!-- 多选框--管理状态或者选择名片时使用 -->
				<view class="choose-dom" v-if="ifChoose">
					<uni-data-checkbox v-model="item.choosed" :disabled="1!=item.approvalStatus" multiple
						:localdata="checkboxArray" />
				</view>
				<view :class="['right-content',item.choosed.length>0?'click':'']">
					<view class="card-title">
						<!-- 需要根据平台code取对应的图片 TODO -->
						<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
						<text>{{item.platformName}}博主</text>
						<view class="edit-text" @click="edit()">
							<text v-if="1==item.approvalStatus" style="color:#5986F2;">已审核</text>
							<text v-else-if="0==item.approvalStatus" style="color:#FC1F3E ;">审核中</text>
							<text v-else>未通过</text>
						</view>
					</view>
					<view class="card-content">
						<view class="card-person-info">
							<view class="card-name">
								<view>{{ item.accountName }}</view>
							</view>
							<view class="detail-text">
								<view class="fans-dom">
									粉丝：{{ formatNumberWithUnits(item.fansNum) }}
								</view>
								<!--								<view class="nickname-dom">-->
								<!--									昵称：{{ item.accountName }}-->
								<!--								</view>-->
							</view>
						</view>
					</view>
					<view v-if="ifEdit" @click="remove(item.id)"
						:class="['edit-dom',item.choosed.length>0?'':'no-choose']">删除
					</view>
					<view v-else :class="['edit-dom',item.choosed.length>0?'':'no-choose']" @click="edit(item.id)">编辑
					</view>
				</view>
			</view>
			<view class="card-dom " v-for="item in busiCardList">
				<!-- 多选框--管理状态或者选择名片时使用 -->
				<view class="choose-dom" v-if="ifChoose">
					<uni-data-checkbox v-model="item.choosed" :disabled="1!=item.approvalStatus" multiple
						:localdata="checkboxArray" />
				</view>
				<view :class="['right-content',item.choosed.length>0?'click':'']">
					<view class="card-title">
						<!-- 需要根据平台code取对应的图片 TODO -->
						<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
						<text>{{item.platformName}}博主</text>
						<view class="edit-text" @click="edit()">
							<text v-if="1==item.approvalStatus" style="color:#5986F2;">已审核</text>
							<text v-else-if="0==item.approvalStatus" style="color:#FC1F3E ;">审核中</text>
							<text v-else>未通过</text>
						</view>
					</view>
					<view class="card-content">
						<view class="card-person-info">
							<view class="card-name">
								<view>{{ item.accountName }}</view>
							</view>
							<view class="detail-text">
								<view class="fans-dom">
									粉丝：{{ formatNumberWithUnits(item.fansNum) }}
								</view>
								<!--								<view class="nickname-dom">-->
								<!--									昵称：{{ item.accountName }}-->
								<!--								</view>-->
							</view>
						</view>
					</view>
					<view v-if="ifEdit" @click="remove(item.id)"
						:class="['edit-dom',item.choosed.length>0?'':'no-choose']">删除
					</view>
					<view v-else :class="['edit-dom',item.choosed.length>0?'':'no-choose']" @click="edit(item.id)">编辑
					</view>
				</view>
			</view>
		</view>
		<view v-if="ifChoose" class="footer-box">
			<view class="left-radio">
				<uni-data-checkbox @change="chooseAllFun()" multiple :localdata="chooseAll" />
			</view>
			<view class="right-button">
				<text>已选择{{getChooseNum}}张</text>
				<view class="button-dom">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		formatNumberWithUnits
	} from '@/utils/common.js'
	import {
		getUserBusiCard,
		removeBusiCard
	} from '@/api/business/member.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				//是否是管理模式
				ifEdit: false,
				//是否是选择模式(默认值为false，管理页面)
				ifChoose: false,
				checkboxArray: [{
					text: '',
					value: true
				}],
				chooseAll: [{
					text: '全选',
					value: true
				}],
				busiCardList: [],
			}
		},
		computed: {
			getChooseNum() {
				return this.busiCardList.filter((item) => item.choosed.length > 0).length
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			/**
			 * 数值单位转换
			 * @param {Object} number
			 */
			formatNumberWithUnits(number) {
				return formatNumberWithUnits(number)
			},
			//查询名片列表
			initData() {
				this.busiCardList = []
				getUserBusiCard().then(res => {
					if (res.data.length > 0) {
						res.data.map((item) => {
							item.choosed = []
							this.busiCardList.push(item)
						})
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**删除名片*/
			remove(id) {
				removeBusiCard({
					id: id
				}).then(res => {
					uni.showToast({
						icon: 'success',
						duration: 2000,
						title: '删除成功'
					});
					this.ifEdit = false
					this.initData()
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 全选
			 * @param {Object} e
			 */
			chooseAllFun(e) {
				if (e.detail.value.length > 0) {
					this.busiCardList.map((item) => {
						if ("1" == item.approvalStatus) {
							item.choosed = [true]
						}
					})
				} else {
					this.busiCardList.map((item) => {
						if ("1" == item.approvalStatus) {
							item.choosed = []
						}
					})
				}
			},
			/**
			 * 删除名片
			 * @param {Object} item
			 */
			del(item) {},
			//名片编辑
			edit(id) {
				this.$tab.navigateTo('/pages/mine/card/card-detail?id=' + id)
			},
			addCard() {
				this.$tab.navigateTo('/pages/mine/card/card-detail')
			},
			/**
			 * 进入管理
			 */
			manager(flag) {
				this.ifEdit = flag
			},

		}
	}
</script>

<style lang="scss">
	.has-footer {
		padding-bottom: calc(var(--window-bottom) + 85rpx);
	}

	.my-card-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.opt-box {
			width: 100%;
			display: flex;
			color: #FC1F3E;
			padding: 25rpx;
			align-items: center;
			justify-content: center;
			border-top: 1rpx solid #F2F2F2;
			border-bottom: 1rpx solid #F2F2F2;

			.item-dom {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin-left: 10rpx;
				}
			}
		}

		.addr-list-box {
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 191rpx);
			overflow-y: scroll;
			padding: 20rpx 30rpx;
			background-color: #F2F2F2;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: start;

			.card-dom {
				width: 100%;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: start;
				position: relative;

				.choose-dom {
					width: 60rpx;
					display: flex;
					align-items: center;
					justify-content: start;
				}

				.edit-dom {
					right: 0;
					bottom: 0;
					position: absolute;
					padding: 10rpx 30rpx;
					font-size: 25rpx;
					color: white;
					background-color: #FC1F3E;
					border-radius: 15rpx 0 15rpx 0;
				}

				.no-choose {
					right: -3rpx !important;
					bottom: -3rpx !important;
					padding: 10rpx 33rpx 13rpx 30rpx !important;
					border-radius: 15rpx 0 20rpx 0 !important;
				}

				.right-content {
					flex: 1;
					width: 100%;
					border: 3rpx solid white;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: white;
					position: relative;
					z-index: 10;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 20rpx;

					.card-title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						text {
							padding-left: 10rpx;
							flex: 1;
						}

						.edit-text {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							text-align: right;
							width: 150rpx;
						}
					}

					.card-content {
						margin-top: 20rpx;
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-start;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 15rpx;
						}

						.card-person-info {
							padding-left: 20rpx;
							flex: 1;
							display: flex;
							align-items: self-start;
							justify-content: center;
							flex-direction: column;

							.card-name {
								font-weight: bold;
								font-size: 32rpx;
							}

							image {
								margin-left: 10rpx;
								width: 20rpx;
								height: 20rpx;
							}

							.detail-text {
								width: 100%;
								display: flex;
								color: #363636;
								align-items: center;
								justify-content: start;
								font-size: 24rpx;
								padding: 5rpx 0;

								.fans-dom {
									width: 30%;
								}

								.nickname-dom {
									flex: 1;
								}
							}
						}
					}
				}

			}
		}

		.click {
			border: 3rpx solid #FC1F3E !important;
			position: relative;

			.choosed {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				right: 0;
				bottom: -4rpx;
			}
		}

		.footer-box {
			z-index: 999;
			padding: 20rpx 30rpx;
			background-color: white;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: start;
			position: fixed;
			bottom: var(--window-bottom);

			.left-radio {
				text-align: left;
				width: 30%;
			}

			.right-button {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				text {
					margin-right: 15rpx;
					font-size: 24rpx;
				}

				.button-dom {
					padding: 10rpx 40rpx;
					background-color: #FC1F3E;
					border-radius: 15rpx;
					color: white;
				}

			}
		}
	}
</style>