yiliangyiyun-app/pageA/freightTransport/addpaygoods.vue

<template>
	<view class="container">
		<view class="information">
			<u-form :model="user" ref="uForm" class="uForm">
				<u-form-item label="收货人姓名" prop="receiveName" label-width="160" required>
					<u-input v-model="user.receiveName" :disabled="recipientsNumber?true:false" input-align="right"
						placeholder="请输入收货人姓名" />
				</u-form-item>
				<u-form-item label="收货人手机号" prop="receivePhone" label-width="180" required>
					<u-input v-model="user.receivePhone" :disabled="recipientsNumber?true:false" input-align="right"
						placeholder="请输入收货人注册易粮易运的手机号" />
				</u-form-item>

			</u-form>
		</view>
		<button class="submit-btn" @click="submit" v-if="!recipientsNumber">提交</button>
		<button class="submit-btn btn-bgccolor" v-if="recipientsNumber">人数已达上限</button>
		<view class="c-row">
			<view class="">全部收货人（{{dataList.receivingUsers.length+1}}）</view>
		</view>
		<view class="c-row">
			<view class="title">{{dataList.consignee}}</view>
			<view class="phone">
				{{dataList.accountNumber}}
			</view>
		</view>
		<view class="information" v-for="(item,index) in dataList.receivingUsers">
			<view class="c-row">
				<view class="title">{{item.receiveName}}</view>
				<view class="con-list">
					<view class="phone">

						{{item.receivePhone}}
					</view>
					<image src="../../static/img/jiaoyi/shanchu.png" class="del" @click="del(item)"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: "trust",
		data() {
			return {
				id:"",
				user: {
					compId: "",
					infoId: "",
					receiveName: "",
					receivePhone: "",
				},
				dataList: {
					receivingUsers: []
				},
				rules: {
					receiveName: [{
							validator: (rule, value, callback) => {
								return this.$u.test.chinese(value)
							},
							message: '收货人姓名为汉字',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								if (value.length > 10 || value.length < 2) return false
								return true
							},
							message: '请输入2-10个汉字',
							trigger: ['change', 'blur'],
						},
					],
					receivePhone: [{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value)
							},
							message: '手机号格式不正确',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return !this.checkMobile(value)
							},
							message: '手机号不能与其他收货人重复',
							trigger: ['blur']
						}

					]
				},
				recipientsNumber: false
			}
		},
		computed: {

		},
		onShow() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			this.user.infoId = option.id;
			this.getDetail(option.id);
			this.id = option.id

		},
		methods: {
			// 手机号重复校验
			checkMobile(val) {
				let _data = this.dataList.receivingUsers;
				if (_data == null || _data.length == 0) return false
				for (let i = 0; i < _data.length; i++) {
					if (val == _data[i].receivePhone) return true
				}
				return false
			},
			getDetail(id) {
				this.$api.doRequest('get', 'freightReceivingDispatching/getFreightReceivingDispatching', {
					"id": id
				}).then(res => {

					if (res.data.code == 200) {
						this.dataList = res.data.data
						this.dataList.receivingUsers = this.dataList.receivingUsers ? this.dataList
							.receivingUsers : []
						if (this.dataList.receivingUsers.length > 20) this.recipientsNumber = true


						console.log("this.dataList----------------------")
						console.log(this.dataList)
					} else {

					}


				}).catch(res => {
					// uni.showToast({
					// 	title: res.data.message,
					// 	icon: 'none',
					// 	duration: 2000
					// })
				})
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$api.doRequest('post', '/freightReceivingDispatching/api/insertReceivingUser', this
							.user).then(res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '提交成功',
									icon: 'none',
									duration: 2000,
									success: function() {
										this.getDetail(that.id);
									}
								})

							} else {
								uni.showToast({
									title: '提交失败',
									icon: 'none',
									duration: 2000,
									success: function() {}
								})
							}

						}).catch(res => {
							// uni.showToast({
							// 	title: res.data.message,
							// 	icon: 'none',
							// 	duration: 2000
							// })
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
						return
					}
				});

			},
			del(val) {
				let that = this
				uni.showModal({
					content: '确定删除该收货人？',
					cancelText: "取消",
					confirmText: "删除",
					success: function(res) {
						if (res.confirm) {
							that.$api.doRequest('post', '/receivingUser/deleteInfo', {
								"id": val.id
							}).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										duration: 2000,
										success: function() {
											that.getDetail(that.user.infoId)
										}
									})

								} else {
									uni.showToast({
										title: '删除失败',
										icon: 'none',
										duration: 2000,
										success: function() {}
									})
								}


							}).catch(res => {
								// uni.showToast({
								// 	title: res.data.message,
								// 	icon: 'none',
								// 	duration: 2000
								// })
							})
						} else if (res.cancel) {}
					}
				});

			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 10px 10px;
		background-color: #F5F6FA;
	}

	.cu-form-group textarea {
		text-align: right;
	}

	.commit {
		background: linear-gradient(45deg, #DF331C, #DA611A);
		color: #fff;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;

		.title {
			width: 30%;
			// background: green;
		}
	}

	.con-list {
		display: flex;
		// background: red;
		width: 100%;
		justify-content: space-between;
		align-items: center;

		.del {
			display: block;
			width: 29rpx;
			height: 31rpx;
		}
	}

	.information {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}

	.btn {
		margin-top: 10px;
		border-radius: 25px;
		background-color: #22C572;
		border: none;
		color: #FFFFFF;
	}

	.uForm {
		padding: 0 40rpx;
	}

	.custom-style {
		color: #606266;
		width: 400rpx;
	}

	.submit-btn {
		margin-top: 20rpx;
		width: 100%;
		background: #22C572;
		border-radius: 92rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.btn-bgccolor {
		background: #D8DAE0;
	}
</style>