massage-front/pages_order/mine/cooperation.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view v-if="['0', '2'].includes(status) && statusDesc" class="flex tips">
			<uv-icon name="info-circle" color="#86A941" size="28rpx"></uv-icon>
			<text style="margin-left: 3rpx;">{{ statusDesc }}</text>
		</view>

		<view class="content">
			<view class="form">
				<view class="form-title">门头照片</view>
				<view class="card upload">
					<formUpload v-model="form.image">
						<view class="flex">
							<image v-if="form.image" class="upload-img" :src="form.image" mode="aspectFill" />
							<image v-else class="upload-img" src="/pages_order/static/cooperation/icon-upload.png" mode="aspectFill" />
						</view>
					</formUpload>
				</view>
			</view>
			<view class="form">
				<view class="form-title">店铺信息</view>
				<view class="card info">
					<uv-form ref="form" :model="form" :rules="rules" labelPosition="left" labelWidth="150rpx"
						:labelStyle="{
              color: '#000000',
              fontSize: '28rpx',
            }"
            errorType="toast"
					>
						<view class="form-item">
							<uv-form-item label="店铺名称" prop="shop">
								<view class="form-item-content">
									<formInput v-model="form.shop" placeholder="请输入店铺名称"></formInput>
								</view>
							</uv-form-item>
						</view>
						<view class="form-item">
							<uv-form-item label="您的姓名" prop="name">
								<view class="form-item-content">
									<formInput v-model="form.name" placeholder="请输入您的姓名"></formInput>
								</view>
							</uv-form-item>
						</view>
						<view class="form-item">
							<uv-form-item label="联系手机号" prop="phone">
								<view class="form-item-content">
									<formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput>
								</view>
							</uv-form-item>
						</view>
						<view class="form-item">
							<uv-form-item label="所在地区" prop="area">
								<view class="form-item-content flex area">
									<view style="width: 450rpx;">{{ form.area ? form.area : '请选择' }}</view>
									<button plain class="btn area-btn" @click="selectAddr">
										<image class="area-btn-icon" src="../static/cooperation/icon-arrow.png"
											mode="widthFix"></image>
									</button>
								</view>
							</uv-form-item>
						</view>
						<view class="form-item address">
							<uv-form-item label="详细地址" prop="address" labelPosition="top">
								<view style="margin-top: 22rpx;width: 100%;">
									<formTextarea v-model="form.address" placeholder="请输入详细地址"></formTextarea>
								</view>
							</uv-form-item>
						</view>
					</uv-form>
				</view>
			</view>
			<view class="tools" v-if="status != '1'">
				<button plain class="btn btn-submit" @click="onSubmit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import util from '@/utils/utils.js'
	import Position from '@/utils/position.js'

	import formInput from '../components/formInput.vue'
	import formUpload from '../components/formUpload.vue'
	import formTextarea from '../components/formTextarea.vue'

	export default {
		components: {
			formInput,
			formUpload,
			formTextarea,
		},
		data() {
			return {
				id: null,
				status: null,
				statusDesc: null,
				form: {
					image: null,
					shop: null,
					name: null,
					phone: null,
					area: null,
					latitude: null,
					longitude: null,
					address: null,
				},
				rules: {
					'image': {
						type: 'string',
						required: true,
						message: '请选择门头照片',
					},
					'shop': {
						type: 'string',
						required: true,
						message: '请输入店铺名称',
					},
					'name': {
						type: 'string',
						required: true,
						message: '请输入您的姓名',
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请输入正确的手机号',
						validator: (rule, value, callback) => {
							// 此处业务逻辑省略
							// 返回true表校验通过，返回false表示不通过
							return util.validatePhone(value)
						},
					},
					'area': {
						type: 'string',
						required: true,
						message: '请选择所在地区',
					},
					'address': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
					},
				},
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			this.initData()
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onPullDownRefresh() {
			this.updateStatus()
		},
		methods: {
			//地图上选择地址
			selectAddr() {
				// Position.getLocation(res => {
				Position.selectAddress(0, 0, success => {
					this.setAddress(success)
				})
				// })
			},
			//提取用户选择的地址信息复制给表单数据
			setAddress(res) {
				//经纬度信息
				this.form.latitude = res.latitude
				this.form.longitude = res.longitude

				if (!res.address && res.name) { //用户直接选择城市的逻辑
					return this.form.area = res.name
				}
				if (res.address || res.name) {
					return this.form.area = res.address + res.name
				}
				this.form.area = '' //用户啥都没选就点击勾选
			},
			async initData() {

				try {
					const shopDetails = (await this.$fetch('queryShopById'))

					console.log("shopDetails======")
					console.log(shopDetails)

					if (!shopDetails) {
						return
					}



					const {
						id,
						status,
						status_dictText,
						remark,
						image,
						shop,
						name,
						phone,
						area,
						latitude,
						longitude,
						address,
					} = shopDetails

					this.form = {
						image,
						shop,
						name,
						phone,
						area,
						latitude,
						longitude,
						address,
					}
					this.id = id
					this.status = status
					this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText

				} catch (err) {

				}
			},
			async updateStatus() {
				if (!this.id) {
					uni.stopPullDownRefresh();
					return
				}

				try {
					const shopDetails = (await this.$fetch('queryShopById'))

					const {
						status,
						status_dictText,
						remark
					} = shopDetails

					this.status = status
					this.statusDesc = status == '2' ? `${status_dictText}：${remark}` : status_dictText
				} catch (err) {
					if (this.id) {
						this.form = {
							image: null,
							shop: null,
							name: null,
							phone: null,
							area: null,
							latitude: null,
							longitude: null,
							address: null,
						}
						this.id = null
						this.status = null
						this.statusDesc = null
					}
					console.log('err', err)
				}

				uni.stopPullDownRefresh();
			},
			async onSubmit() {
				try {

					await this.$refs.form.validate()

					const {
						image,
						shop,
						name,
						phone,
						area,
						latitude,
						longitude,
						address,
					} = this.form

					const params = {
						image,
						shop,
						name,
						phone,
						area,
						latitude,
						longitude,
						address,
					}

					let api = 'addShop'

					if (this.id) {
						api = 'updateShop'
						params.id = this.id
					}

					await this.$fetch(api, params)

					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})

					setTimeout(uni.navigateBack, 1000, -1)

				} catch (err) {
					console.log('err', err)
				}

			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: $uni-bg-color;
		min-height: 100vh;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

	.tips {
		padding: 5rpx 0;
		font-weight: bold;
		font-size: 28rpx;
		color: $uni-color;
		background-color: rgba($color: #D8FF8F, $alpha: 0.3);
	}

	.content {
		padding: 28rpx 30rpx;
	}


	.form {
		&+& {
			margin-top: 44rpx;
		}

		&-title {
			color: #000000;
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}

		&-item {
			padding-left: 8rpx;

			&+& {
				// margin-top: 20rpx;
				border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69);
			}

			&-content {
				min-height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 28rpx;
				;
				color: #999999;
			}
		}
	}

	.upload {
		padding: 37rpx 22rpx;

		&-img {
			width: 131rpx;
			height: 131rpx;
		}
	}

	.area {
		color: #000000;
		font-size: 28rpx;
		line-height: 40rpx;
		justify-content: flex-end;

		&-btn {
			border: none;
			padding: 7rpx 20rpx 7rpx 7rpx;

			&-icon {
				width: 30rpx;
				height: auto;
			}
		}
	}

	.address {
		padding: 0;

		/deep/ .uv-form-item__body__left__content {
			margin-top: 10rpx;
			padding-left: 8rpx;
		}
	}

	.tools {
		padding: 0 56rpx;
		margin-top: 126rpx;
	}

	.btn-submit {
		padding: 29rpx 0;
		border: none;
		font-size: 36rpx;
		border-radius: 45rpx;
		color: $uni-text-color-inverse;
		background-image: linear-gradient(to right, #84A73F, #D8FF8F);
	}
</style>