jewelry-front/pages_order/mine/recruit.vue

<!-- 合伙人页面 -->
<template>
	<view class="recruit">
		<!-- 导航栏 -->
		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

		<!-- 背景图 -->
		<view class="bg">
			<image :src="bg" mode="aspectFill" style="width: 100%;" class="bg-img"></image>
		</view>

		<!-- 表单 -->
		<view class="item-card">
			<view class="item-line">
				<view class="before"></view>
				<view class="label">合伙人</view>
			</view>
			<view class="item-line">
				<view class="label">您的姓名</view>
				<input placeholder="请输入姓名" v-model="partnership.name" />
			</view>
			<view class="item-line">
				<view class="label">联系方式</view>
				<input placeholder="请输入联系方式" v-model="partnership.phone" />
			</view>
			<view class="item-line">
				<view class="label">所在地区</view>
				<!-- <input placeholder="请输入所在地区" v-model="partnership.address" /> -->
				<view @click="openAreaSelector" class="area-info">
					<view class="area-detail">{{ partnership.address ?  partnership.address : '请选择省市区' }}</view>
					<view class="arraw">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
			<view class="item-line">
				<view class="label">详细地址</view>
				<textarea v-model="partnership.addressdetail" placeholder="请输入详细地址"></textarea>
			</view>
		</view>

		<view class="b-fiexd">
			<view @click="submit" class="button-submit">{{ partnership.id ? '修改' : '新增' }}</view>
		</view>

		<AreaSelector ref="AreaSelector" @select="selectArea"></AreaSelector>
	</view>
</template>

<script>
	import AreaSelector from '../components/areaSelector/areaSelector.vue';

	export default {
		name: "Recruit",
		components: {
			AreaSelector
		},
		data() {
			return {
				partnership: {
					name: "",
					phone: "",
					address: "",
					addressdetail: ""
				}
			}
		},
		onShow() {
			this.getCommonUser();
		},
		methods: {
			//新增修改合伙人申请信息
			submit() {
				if (this.$utils.verificationAll(this.partnership, {
						name: '请输入你的姓名', //姓名
						phone: '请输入联系方式', //联系方式
						address: '请输入所在地区', //所在地区
						addressdetail: '请输入详细地址', //详细地址
					})) {
					return
				}
				this.$api('addOrUpdateCommonUser', this.partnership, res => {
					if (res.code == 200) {
						uni.showToast({
							title: this.partnership.id ? '修改成功' : '新增成功',
							icon: "none"
						})
						setTimeout(uni.navigateBack, 800, -1)
					}
				})
			},

			//获取合伙人申请
			getCommonUser() {
				this.$api('getCommonUser', res => {
					if (res.code == 200 && res.result) {
						const {
							id,
							name,
							phone,
							address,
							addressdetail
						} = res.result;
						this.partnership = {
							id,
							name,
							phone,
							address,
							addressdetail
						}
					}
				})
			},

			//打开省市区选择
			openAreaSelector() {
				this.$refs.AreaSelector.open();
			},

			//用户选择了省市区信息
			selectArea(area) {
				this.partnership.address = area;
			}
		},
		computed: {
			bg() {
				let arr = [];
				if (this.configList?.shop_get_image) {
					arr = this.configList?.shop_get_image?.split(',')
				}
				return arr[0] || ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruit {

		// 背景图
		.bg {
			width: 710rpx;
			margin: 20rpx auto 0rpx auto;

			.bg-img {
				width: 100%;
				height: 250rpx;
				border-radius: 10rpx;
			}
		}

		// 表单
		.item-card {
			width: calc(710rpx - 40rpx);
			height: auto;
			background: #ffffff;
			border-radius: 16rpx;
			margin: 40rpx auto 20rpx;
			padding: 40rpx 20rpx;
		}

		.item-line {
			display: flex;
			flex-wrap: wrap;
			height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			margin-bottom: 40rpx;

			&:nth-child(1) {
				margin-bottom: 20rpx;

				.label {
					font-size: 36rpx;
				}
			}

			&:last-child {
				margin-bottom: 0rpx;
				height: auto;
			}
		}

		.item-line .before {
			content: "";
			width: 8rpx;
			height: 30rpx;
			background: $uni-color;
			border-radius: 4rpx;
			margin-right: 10rpx;
			margin-top: 15rpx;
		}

		.item-line .label {
			display: flex;
			align-items: center;
			width: 152rpx;
			height: 60rpx;
		}

		.item-line .area-info {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 152rpx);
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.area-detail {
				width: 95%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #939393;
				font-weight: normal;
			}

			.arraw {
				width: 5%;
			}
		}

		.item-line input,
		.item-line textarea {
			width: calc(100% - 152rpx);
			height: 60rpx;
			background: #f5f5f5;
			border-radius: 12rpx;

			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #939393;

			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.item-line textarea {
			height: 120rpx;
			padding: 20rpx;
		}

		.b-fiexd {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;

			.button-submit {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 596rpx;
				height: 90rpx;
				background: #E3441A;
				border-radius: 46rpx;

				margin: 20rpx auto;

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>