pet-front/otherPages/authentication/connectAddress/detail.vue

<template>
  <view class="page">
	  <up-form 
      ref="formRef"
      :model="form" 
      :rules="rules"
      labelPosition="left" 
      labelWidth="150rpx"
    >
      <view class="info">
        <view class="info-header">地址信息</view>
        <view class="info-content">
			    <up-form-item label="接单地址" prop="area">
            <view plain class="flex-rowr" @click="selectAddr">
              <text v-if="form.area"></text>
              <text v-else class="placeholder">请定位选择小区或商城等</text>
              <up-icon style="margin-left: 22rpx;" name="arrow-down" color="#7F7F7F" size="21rpx"></up-icon>
            </view>
          </up-form-item>
			    <up-form-item label="接单地址" prop="address" labelPosition="top">
            <view class="textarea">
              <textarea
                v-model="form.address"
                placeholder="如街道、门牌号、小区、乡镇、村等"
                :row="3"
              ></textarea>
            </view>
          </up-form-item>
        </view>
      </view>
      
      <view class="info">
        <view class="info-header">接单信息</view>
        <view class="info-content">
			    <up-form-item label="接单状态" prop="status">
            <view class="flex-rowr">
              <switch :checked="!!form.status" @change="onSwitch" color="#FFBF60" style="transform: scale(0.6);"/>
              <text>{{ !!form.status ? '开启' : '关闭' }}</text>
            </view>
          </up-form-item>
			    <up-form-item label="接单范围" prop="distance">
            <up-input
              v-model="form.distance"
              placeholder="请输入内容"
              inputAlign="right"
              border="none"
            >
              <template #suffix>
                <text>Km</text>
              </template>
            </up-input>
          </up-form-item>
			    <up-form-item label="不接单日期(选填)" prop="disabledDate" labelWidth="300rpx">
            <!-- todo -->
          </up-form-item>
        </view>
      </view>

    </up-form>

    <view>
      <up-parse class="size-28" 
        :content="configList.pet_km_text.paramValueArea" 
        :containerStyle="{
          color: '#707070',
          fontSize: '22rpx',
          lineHeight: '35rpx',
        }"
      ></up-parse>
    </view>

		<view class="footer-btn">
			<view class="btn" @click="onSave">
				保存
			</view>
		</view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
	import { store } from '@/store'

	const configList = store.state.system.configList

  const formRef = ref()
  const form = ref({
    area: null,
    latitude: null,
    longitude: null,
    address: null,
    status: true,
    distance: null,
    disabledDate: [],
  })
  // todo: set rules
  const rules = ref({})
  
	const setAddress = (res) => {
		//经纬度信息
		form.value.latitude = res.latitude
		form.value.longitude = res.longitude

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

	const selectAddr = () => {
		uni.chooseLocation({
			success: function(res) {
				setAddress(res)
			}
		})
	}

  const onSwitch = (e) => {
    form.value.status = e.detail.value
  }

  const onSave = () => {
    // todo: fetch save data

    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
.page {
  padding: 35rpx 37rpx 144rpx 37rpx;
}

.info {
  color: #707070;
  font-size: 30rpx;
  line-height: 40rpx;

  &-header {
    color: #000000;
  }

  .placeholder {
    color: #707070;
  }

  .textarea {
    margin-top: 16rpx;
    background-color: #F3F3F3;
    padding: 26rpx 8rpx;
    border-radius: 15rpx;
  }

  :deep(.u-form-item__body__left__content__label) {
    color: #707070;
  }
}
</style>