demo-library/library-activity/src/views/myAddress/addAddress.vue

<template>
	<div class="main">
		<div class="top-header">
			<span class="back" @click="toBack"></span>
			<p>添加收货地址</p>
		</div>
		<div class="address-form">
			<van-form ref="form" @submit="onSubmit">
				<van-cell-group inset>
					<div class="form01">
            <van-field
              v-model="username"
              name="收货人"
              label="收货人"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="phone"
              type="number"
              name="手机号码"
              label="手机号码"
              placeholder="手机号码"
              :rules="[{ required: true, message: '请填写手机号码' }]"
            />
            <van-field
              v-model="area"
              is-link
              readonly
              name="area"
              label="所在地区"
              placeholder="省市区县、乡镇"
              :rules="[{ required: true, message: '请选择所在地区' }]"
              @click="showArea = true"
            >
            <template v-slot:right-icon>
              <img style="width: 0.32rem; height: 0.32rem"
              src="@assets/images/address-icon6.png" alt="">
              <span style="color: #1C202D;">定位</span>
            </template>
            </van-field>
            <van-popup v-model:show="showArea" position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
              />
            </van-popup>
            <van-field
              v-model="place"
              rows="2"
              autosize
              type="textarea"
              name="详细地址"
              label="详细地址"
              maxlength="50"
              placeholder="楼道、街牌号等"
              :rules="[{ required: true, message: '请填写详细地址' }]"
            />
          </div>
          <div class="form02">
            <van-field name="place" label="设为默认收货地址">
              <template #input>
                <van-checkbox v-model="isChecked" shape="square" />
              </template>
            </van-field>
          </div>
				</van-cell-group>
        <div style="position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
			</van-form>
		</div>
	</div>
</template>

<script>
import { reactive, getCurrentInstance, toRefs, ref } from 'vue'
import { areaList } from '@vant/area-data'
export default {
	name: 'AddAddress',
	setup() {
		const { proxy } = getCurrentInstance()
		let data = reactive({
			isSetting: false,
			username: '',
			phone: '',
			area: '',
			place: '',
      isChecked: false,
			showArea: false,
		})
		let toBack = () => {
			proxy.$router.go(-1)
		}
		let onConfirm = (value) => {
			data.showArea = false
			data.area = value.map((item) => item.name).join(' ')
		}
		let onSubmit = (values) => {
      console.log('submit',values)
		}
		return {
			...toRefs(data),
			areaList,
			toBack,
			onConfirm,
			onSubmit
		}
	},
}
</script>

<style scoped lang="scss">
.address-form {
	height: calc(100vh - 1rem);
	padding: 1.3rem 0.32rem 0 0.32rem;
	background-color: #fff;
  .form01{
    padding: 0 .3rem;
    background-color: #fff;
    box-shadow: 0px .03rem .6rem 1px rgba(0,0,0,0.08);
    border-radius: .08rem;
    :deep(.van-icon){
      &::before{
        display: none;
      }
    }
    :deep(.van-field__right-icon){
      display: flex;
      align-items: center;
      font-size: .28rem;
    }
  }
  .form02{
    margin-top: .2rem;
    padding: 0 .3rem;
    background-color: #fff;
    box-shadow: 0px .03rem .6rem 1px rgba(0,0,0,0.08);
    border-radius: .08rem;
    :deep(.van-field__label){
      width: auto;
    }
    :deep(.van-field__control--custom){
      justify-content: flex-end;
    }
    :deep(.van-checkbox__icon .van-icon){
      border-radius: 50%;
    }
  }
}

:deep(.van-cell-group--inset){
  background: transparent;
  border-radius: 0;
  margin: 0;
  overflow: visible;
}
:deep(.van-cell){
  padding: .32rem 0;
  font-size: .28rem;
  background: transparent;
  &::after{
    right: 0;
    left: 0;
    border-color:#C6C6E2;
  }
  
  .van-field__label{
    color: #1C202D;
  }
}

:deep(.van-button--block){
  width: 4.4rem;
  height: .98rem;
  font-size: .36rem;
  background: #5A86F4;
}
</style>