yiliangyiyun-app/pages/erpbusiness/sm/sm.vue

<template>
	<view class="content">
		<u-toast ref="uToast" />
		<u-popup v-model="show" class="popup" @close="close" mode="bottom" border-radius="30" :closeable="true">
			<view class="top">
				<view class="top-center-1">收到</view>
			</view>
			<view class="top-content-2">
				<view>来自</view>
				<view class="top-content-green">{{title}}</view>
				<view>的邀请。</view>
			</view>
			<view class="top-content-3">
				接受邀请后对方将可以查看您的个人粮商信息(姓名、手机号、账户信息和身份证附件等)。
			</view>
			<div class="content-bottom">
				<view v-if="grainMerchantList.length>0" class="title">请选择粮商身份</view>
				<view v-if="grainMerchantList.length>0">
					<view v-for="(item,index) in grainMerchantList" :key="index">
						<view v-if="item.cover!=1" :class="item.check?'item-select':'item'" @click="selectItem(item)">
							<img v-if="item.check" class="img" src="../../../static/img/select.png" alt="">
							<view class="name">{{item.customerName}}</view>
							<view class="phone">
								<view class="number">{{item.customerPhone}}</view>
								<view>（{{item.authenticationStatus}}）</view>
							</view>
						</view>
					</view>
				</view>

				<view class="nolist" v-if="grainMerchantList.length==0">
					<img class="img" src="../../../static/img/nolist.png" alt="">
					<view class="text">您还未认证个人粮商身份</view>
				</view>
				<button v-if="grainMerchantList.length>0" class="custom-style" @click="submit">接受邀请</button>
				<button v-if="grainMerchantList.length==0" class="custom-style" @click="attestation">接受并去认证</button>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				show: true,
				identityAuthenticationInfo: {},
				title: "黑龙江中天昊元贸易有限公司",
				grainMerchantList: []
				// grainMerchantList: [{
				// 		name: "张三",
				// 		phone: "189****9999",
				// 		state: "已认证",
				// 		check: false
				// 	},
				// 	{
				// 		name: "李四",
				// 		phone: "189****9999",
				// 		state: "审核中",
				// 		check: false
				// 	}
				// ]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			selectItem(item) {
				console.log("item", item)
				item.check = !item.check
			},
			//查询粮商身份
			selectGrainMerchantList() {
				//
			},
			onLoad(e) {
				this.title = e.name
			},
			onShow() {
				this.getList()
			},
			getList() {
				console.log(this.userInfo)
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.$api.doRequest('get', '/identityAuthenticationInfo/selectIdentityAuthenticationInfo', {
						pageSize: 100,
						currentPage: 1,
						commonId: this.userInfo.id,
						flag: 0
					}, 'application/json;charset=UTF-8').then(res => {
						for (var i = 0; i < res.data.data.records.length; i++) {
							res.data.data.records[i].basis = "false"
							if (res.data.data.records[i].defaultFlag == 1) {
								res.data.data.records[i].basis = "true"
							}
						}
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							if (data[i].customerTypeFlag == 2) {
								if (data[i].compName && data[i].compName.length > 10) {
									data[i].compName = data[i].compName.substring(0, 10) + "..."
								}
							}
						}
						this.grainMerchantList = res.data.data.records
						console.log(this.grainMerchantList)

					})
					.catch(res => {
						if (res.message) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			submit() {
				let _isAllCheck = false
				for (let i = 0; i < this.grainMerchantList.length; i++) {
					if (this.grainMerchantList[i].check) {
						_isAllCheck = true
					}
				}
				if (!_isAllCheck) {
					this.$refs.uToast.show({
						title: '至少选择一个身份',
						type: "error",
						icon: false
					})
				}
			},
			//接受并认证
			attestation() {},
			close() {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: white;
	}

	.top {
		background: url(../../../static/img/bg@2x.png);
		background-size: 100% 100%;
		padding: 0 80rpx 0 80rpx;
		text-align: center;
		height: 310rpx;
	}

	.content-bottom {
		padding: 50rpx 50rpx 0 50rpx;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.active {}

		.item-select {
			border-radius: 1px;
			border: 1px solid #C5CAD5;
			padding: 15rpx 40rpx;
			background: #F4FAF4;
			border: 1px solid #22C572;
			margin-bottom: 20rpx;
			position: relative;

			.img {
				position: absolute;
				width: 42rpx;
				height: 40rpx;
				top: 0;
				right: 0;
			}

			.name {
				font-size: 32rpx;
				font-weight: 600;
				color: #22C572;
			}

			.phone {
				display: flex;
				align-items: center;
				color: #8E93A3;

				.number {
					margin-right: 20rpx;
				}
			}
		}

		.item {
			border-radius: 1px;
			border: 1px solid #C5CAD5;
			padding: 15rpx 40rpx;
			margin-bottom: 20rpx;
			position: relative;

			.img {
				position: absolute;
				width: 42rpx;
				height: 40rpx;
				top: 0;
				right: 0;
			}

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

			.phone {
				display: flex;
				align-items: center;
				color: #8E93A3;

				.number {
					margin-right: 20rpx;
				}
			}
		}
	}

	.top-center-1 {
		font-size: 42rpx;
		font-weight: 600;
		color: #333333;
		position: relative;
		top: 88rpx;
	}

	.top-content-2 {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: relative;
		top: -50px;
	}

	.top-content-3 {
		position: relative;
		top: -25px;
		padding: 0 81rpx;
	}

	.top-content-green {
		color: #22C572;
		font-size: 32rpx;
	}

	.custom-style {
		background: #22C572;
		border-radius: 46px;
		margin: 50rpx;
		color: white;
	}

	.nolist {
		text-align: center;
		margin: 50rpx 50rpx 100rpx 50rpx;

		.img {
			width: 240rpx;
			height: 240rpx;
		}

		.text {
			margin: 20rpx;
			color: #8E93A3;
		}
	}
</style>