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">{{user.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)">
							<image v-if="item.check" class="img" :src="img1" alt=""></image>
							<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">
					<image class="img" :src="img2" alt=""></image>
					<view class="text">您还未认证个人粮商身份</view>
				</view>
				<button v-if="grainMerchantList.length>0" :class="flag?'':'custom-style'" @click="submit">{{btnVal}}</button>
				<button v-if="grainMerchantList.length==0" class="custom-style" @click="toGrainMerchantCertification()">接受并去认证</button>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				img1:require("../../../static/img/select.png"),
				img2:require("../../../static/img/nolist.png"),
				show: true,
				identityAuthenticationInfo: {},
				grainMerchantList: [],
				selectID: "",
				btnVal: "接受邀请",
				user: {
					title: '',
					companyId: ''
				},
				isAllselect:false,
				flag : true
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			  //#ifdef APP-PLUS
			  this.user.title = options.data.split(',')[2]
			  this.user.companyId = options.data.split(',')[1]
			  //#endif
			  console.log("options:",options,this.user.title,this.user.companyId)
		},
		onShow() {
			this.getList()
		},
		methods: {
			selectItem(item) {
				console.log("item", item)
				if(item.authenticationStatus=="已接受") return
				for (let i = 0; i < this.grainMerchantList.length; i++) {
					if (this.grainMerchantList[i].id == item.id) {
						this.grainMerchantList[i].check = !this.grainMerchantList[i].check
						if (this.grainMerchantList[i].check) {
							this.selectID = this.grainMerchantList[i].id
						}
					} 
				}
			},
			//查询粮商身份
			selectGrainMerchantList() {
				//
			},
			//粮商认证
			toGrainMerchantCertification(){
				uni.navigateTo({
					url:'/pageD/identity/companyIdentity?status=1'
				})
			},
			
			getList() {
				console.log(this.userInfo)
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.grainMerchantList = []
				this.$api.doRequest('get', '/identityAuthenticationInfo/selectIdentityAuthenticationInfo', {
						pageSize: 100,
						currentPage: 1,
						commonId: this.userInfo.id,
						compId:this.user.companyId,
						flag: 3
					}, '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].authenticationStatus == "未通过")
							{
								continue
							}
							if (data[i].customerTypeFlag == 2) {
								if (data[i].compName && data[i].compName.length > 10) {
									data[i].compName = data[i].compName.substring(0, 10) + "..."
								}
							}
							if (data[i].authenticationStatus == "已接受") {
								data[i].check = true
								this.isAllselect = true
							} else {
								data[i].check = false
								this.isAllselect = false								
								this.flag = false
							}
							this.grainMerchantList.push(data[i])
						}
						if(this.flag){
							this.btnVal = "已接受"
						}
						console.log("grainMerchantList",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() {
				if(this.flag) return
				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
					})
				}
				console.log("this.user.compId",this.user.companyId,this.selectID)
				this.$api.doRequest('get', '/identityAuthenticationInfo/saveCompanyIdentity', {
						id: this.selectID,
						compId:this.user.companyId,
					}, 'application/json;charset=UTF-8').then(res => {
						console.log(res);
						if (res.data.code == 200) {
							// this.getList()
							uni.navigateBack(-1)
							
						}


					})
					.catch(res => {
						if (res.message) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "接受邀请失败，请稍后再试。",
								icon: 'none',
								duration: 2000
							})
						}
					});

			},
			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 50rpx 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>