XiaoLingHou_web/pages/agentBusiness/agentBusiness.vue

<template>
	<view class="uni-page">
		<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="代收信件" />
		<view class="content-main">
			<view class="info-box">
				<view class="explain">
					我们对不方便收信的家属提供信件免费代收服务：
				</view>
				<view class="address-info content">
					<view class="address-info-left">
						<view class="address-title">
							<text>{{addressInfo.name}} 收</text> <text>{{addressInfo.phone}}</text>
						</view>
						<view class="address-content">
							{{addressInfo.address}}
						</view>
					</view>
					<view class="copy-button">
						<u-button type="primary" @click="copy" shape="circle" text="复制" color="#e39b46"></u-button>
					</view>
				</view>
				<view class="upload-explain">
					<view class="upload-explain-item" v-for="(item,index) in explainList" :key="index">
						<view class="dot"> </view>
						<text class="explain-text">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="explain">
					请填写您的联系方式：
				</view>
				<view class="content">
					<view style="margin-bottom: 20rpx;" v-for="(item,index) in phoneNumbers" :key="index">
						<u--input placeholder="请输入您的手机号码" type="number" border="surround" v-model="item.number">
							<template slot="suffix">
								<view class="" style="display: flex;">
									<u-button v-if="index" @tap="deleteNumber(index)" color="red"
										size="mini">删除</u-button>
								</view>
							</template>
						</u--input>
					</view>
					<view class="" style="display: flex;">
						<u-button type="primary" text="添加手机号" @click="addPhoneNumber"></u-button>
						<u-button :customStyle="{
							'margin-left':'20rpx',
							width:'200rpx'
						}" type="success" @click="submitNumber()">保存</u-button>
					</view>
					<!-- <u-button type="primary" text="添加手机号" @click="addPhoneNumber"></u-button> -->
				</view>
				<view class="upload-explain">
					<view class="upload-explain-item">
						<view class="dot"> </view>
						<text class="explain-text">填写的电话务必能联系到您本人，以免信件丢失</text>
					</view>
				</view>
			</view>
		</view>
		<view class="floor-bottom">

		</view>
	</view>
</template>

<script>
	import {
		getAgentBusinessInfoApi,
		setAgentBusinessInfoApi
	} from '@/request/wm.js'
	export default {
		data() {
			return {
				explainList: ['请复制上方地址，并把我们的地址附在信件里面',
					'信件由我们收到后，第一时间会电话通知您',
					'信件可以拍照或邮寄，邮费需自己承担',
					'代收服务完全免费，不收取任何费用]',
				],
				phoneNumbers: [{
					number: ''
				}],
				addressInfo: '',
			};
		},
		onLoad() {
			this.getAgentBusinessInfo()
		},
		methods: {
			addPhoneNumber() {
				this.phoneNumbers.push({
					number: null
				})
			},
			deleteNumber(index) {
				this.phoneNumbers.splice(index, 1)
			},
			async getAgentBusinessInfo() {
				let {
					data
				} = await getAgentBusinessInfoApi()
				this.addressInfo = data.data

				if (data.data.links.length) {
					this.phoneNumbers = data.data.links.map((item) => {
						return {
							number: item
						}
					})
				}

				console.log(this.phoneNumbers);
			},
			async submitNumber(phoneNumber, index) {
				let canSub = null
				this.phoneNumbers.forEach(item => {
					if (!/^1[3456789]\d{9}$/.test(item.number)) {
						canSub = item.number
					}
				})
				if (canSub) {
					uni.showModal({
						title: '提示',
						content: `手机号 ${canSub} 不合法，请重新输入！`,
						showCancel: false,
					})
				} else {
					let phone = this.phoneNumbers.map(item => item.number)
					phone = {
						phone: phone.join(',')
					}
					console.log(phone);
					let {
						data
					} = await setAgentBusinessInfoApi(phone)
					console.log(data);
				}
			},
			copy() {
				uni.setClipboardData({
					data: `${this.addressInfo.name} ${this.addressInfo.phone} ${this.addressInfo.address}`,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-main {
		flex: 1;
		overflow: auto;
		// height: 100%;
	}



	.info-box {
		margin-top: 30rpx;
		background-color: white;
		min-height: 100rpx;
		border-radius: 40rpx;
		height: fit-content;
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: column;

		.info-title {
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.explain {
		font-size: 30rpx;
	}

	.content {
		margin: 34rpx 0;
	}

	.address-info {
		border-radius: 40rpx;
		height: 174rpx;
		background: #FFF7F2;

		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;

		.address-info-left {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 30rpx;
		}

		.address-title {
			width: 100%;
			font-weight: bold;
			overflow: hidden;
			font-size: 34rpx;
			white-space: nowrap;
			text-overflow: ellipsis;

			text {
				text-overflow: ellipsis;
			}

			// font-size: 34rpx;
		}

		.address-content {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 26rpx;
		}
	}

	.upload-explain {
		padding-left: 30rpx;

		.upload-explain-item {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				background-color: #999796;
				margin-right: 14rpx;
				border-radius: 50%;
			}

			.explain-text {
				flex: 1;
				font-size: 26rpx;
				opacity: 0.5;
			}
		}
	}
</style>