orchestra-app/src/student/music-group/shop-address/address-operation.tsx

import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Field, Picker, Popup, Switch } from 'vant'
import { defineComponent, reactive } from 'vue'
import request from '../request-music'
import styles from './index.module.less'
import { areas } from '@/helpers/area'

export default defineComponent({
  name: 'address-operation',
  setup() {
    const state = reactive({
      showPicker: false,
      defaultStatus: false,
      phoneNumber: null,
      province: null,
      city: null,
      region: null,
      pcrStr: '',
      name: null,
      detailAddress: null
    })

    const onSubmit = async () => {
      try {
        await request.post('/api-student/userReceiveAddress/save', {
          data: {}
        })
      } catch {}
    }
    return () => (
      <div class={styles.operation}>
        <CellGroup inset class={styles.form}>
          <Field label="收货人" placeholder="请输入收货人姓名" v-model={state.name} />
          <Field label="手机号" placeholder="请输入收货人人手机号" v-model={state.phoneNumber} />
          <Field
            label="所在地区"
            placeholder="省、市、区、街道"
            readonly
            isLink
            modelValue={state.pcrStr}
            onClick={() => {
              state.showPicker = true
            }}
          />
          <Field
            label="详细地址"
            placeholder="小区楼栋/乡村名称"
            type="textarea"
            rows={3}
            v-model={state.detailAddress}
          />
        </CellGroup>

        <CellGroup inset style={{ marginTop: '12px' }}>
          <Cell title="设置为默认地址" center class={styles.default}>
            {{ value: () => <Switch v-model={state.defaultStatus} size="23px" /> }}
          </Cell>
        </CellGroup>

        <OSticky position="bottom">
          <div class="btnGroup">
            <Button type="primary" block round>
              确认
            </Button>
          </div>
        </OSticky>

        <Popup v-model:show={state.showPicker} position="bottom" round>
          <Picker
            showToolbar
            columns={areas}
            columnsFieldNames={{ text: 'name', value: 'code', children: 'areas' }}
            onCancel={() => (state.showPicker = false)}
            onConfirm={(val: any) => {
              console.log(val, 'val')
              const selectedOptions = val.selectedOptions || []
              // 因为有的只
              if (selectedOptions.length === 2) {
                selectedOptions.forEach((item: any, index: number) => {
                  state.pcrStr += item.name
                  if (index === 0) {
                    state.province = item.id
                  } else if (index === 1) {
                    state.city = item.id
                  }
                })
              } else {
                selectedOptions.forEach((item: any, index: number) => {
                  state.pcrStr += item.name
                  if (index === 0) {
                    state.province = item.id
                  } else if (index === 1) {
                    state.city = item.id
                  } else if (index === 2) {
                    state.region = item.id
                  }
                })
              }

              state.showPicker = false
            }}
          />
        </Popup>

        {/* 
        <van-popup v-model:show="showPicker" position="bottom" round>
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"
        :columns-field-names="{ text: 'name', value: 'code', children: 'areas' }" />
    </van-popup> */}
      </div>
    )
  }
})