web-base-h5/pages/mine/giftAddress/details.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<template>
  <view class="main">
    <view class="contents">
      <u-form :model="addressForm"
              labelWidth="auto"
              ref="uForm">
        <view class="view-class">
          <u-form-item :label="'收货人'"
                       label-width="100px"
                       prop="accountName">
            <u-input v-model.trim="addressForm.accountName"
                     placeholder-class="place-class"
                     class="border-color"
                     placeholder="请输入收货人姓名" />

          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'联系方式'"
                       label-width="100px"
                       prop="phone">
            <u-input v-model.trim="addressForm.phone"
                     placeholder-class="place-class"
                     maxlength="20"
                     type="number"
                     class="border-color"
                     placeholder="请输入联系方式" />

          </u-form-item>
        </view>
        <view class="view-class"
              @click="getDiqu">
          <u-form-item :label="'收货地址'"
                       label-width="100px"
                       prop="address">
            <view v-if="address"
                  style="font-size: 28rpx;color: #333;margin-left: 20rpx;">{{address}}</view>
            <view style="margin-left: 20rpx;font-size: 28rpx;color: rgb(192, 196, 204);"
                  v-else>请选择收货地址</view>
          </u-form-item>
          <view class="drop">
            <image src="@/static/images/drop.png"></image>
          </view>
        </view>
        <view class="view-class">
          <u-form-item :label="'详细地址'"
                       class="label-style"
                       label-width="100px"
                       prop="address">
            <u-textarea v-model.trim="addressForm.address"
                        placeholder-class="place-class"
                        class="border-color"
                        maxlength="200"
                        :placeholder="'请输入详细地址'" />

          </u-form-item>
        </view>
      </u-form>
    </view>
    <v-address ref="address"
               @getAddressData="AddressData"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>
    <u-button type="success"
              shape="circle"
              class="btn"
              @click="submit">{{'确定'}}</u-button>
    <view style="height: 20rpx;"></view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import address from '@/components/address.vue'
import store from '@/store'
export default {
  data() {
    return {
      userInfo: '',
      check: false,
      address: '',
      defaultCode: [],
      urls: '/member/api/maker-space/update-file',
      addressForm: {
        accountName: '',
        phone: '',
        pkProvince: '',
        pkCity: '',
        pkCounty: '',
        address: '',
        pkId: '',
      },
      rules: {
        accountName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '姓名不能为空',
          },
        ],
        address: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '详细地址不能为空',
          },
        ],
        pkProvince: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '地址不能为空',

            trigger: ['change'],
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          // {
          // validator: (rule, value, callback) => {
          // 	return this.$u.test.mobile(value);
          // },
          // message: "手机号格式不正确",
          // trigger: ["blur"],
          // },
        ],
      },
    }
  },
  onLoad(option) {
    this.addressForm = JSON.parse(option.obj)
    let that =this
   setTimeout(()=>{
    that.defaultCode = [
    that.addressForm.pkProvince,
      that.addressForm.pkCity,
      that.addressForm.pkCounty || '',
    ]
   },200)
   this.userInfo = uni.getStorageSync('User')
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  components: {
    'v-address': address,
  },
  methods: {
    AddressData(name) {
      this.address = name
    },
    submit() {
      this.$refs.uForm.validate().then((res) => {
        api.saveGiftAddress(this.addressForm).then((res) => {
          if (res.code == '200') {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              success() {
                setTimeout(() => {
                  uni.navigateBack(1)
                }, 2000)
              },
            })
          }
        })
      })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.address = diqu
      this.addressForm.pkProvince = obj.province
      this.addressForm.pkCity = obj.city
      this.addressForm.pkCounty = obj.county
      this.$forceUpdate()
      // this.getPostAge()
      // this.queryAdressPostage()
    },
    getAddressData(e) {
      console.error(e)
    },
    // getAddress(id){
    //  api.getAddress(id).then(res => {
    //         if (res) {
    //          this.addressForm={
    //           accountName: res.data.accountName,
    // 						 phone: res.data.phone,
    // 						 pkProvince: res.data.pkProvince,
    // 						 pkCity: res.data.pkCity,
    // 						 pkCounty: res.data.pkCounty || '',
    // 							pkId: res.data.pkId,
    // 						 address: res.data.address,
    // 		 }
    // 			 this.defaultCode = [
    // 					 res.data.pkProvince,
    // 					 res.data.pkCity,
    // 					 res.data.pkCounty || '',
    // 				 ]
    // 			}
    //       }).catch(error => {
    //         reject(error)
    //       })
    // },
  },
}
</script>

<style lang="scss" scoped>
:v-deep .u-form-item__body__right__message {
  margin-left: 215rpx !important;
  padding-bottom: 20rpx;
}
.drop {
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0;
    top: 20rpx;
  }
}
.check {
  position: relative;
  view {
    width: 36rpx;
    height: 36rpx;
    border: 1rpx solid #dddddd;
    border-radius: 50%;
    margin-top: 25rpx;
  }
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0rpx;
    top: 25rpx;
    // margin-top: 20rpx;
  }
}
.flex-s {
  justify-content: space-between;
  display: flex;
  height: 90rpx;
  line-height: 90rpx;
}
.label-style {
  display: block !important;
}
:v-deep .label-style .u-form-item__body__left {
  display: block !important;
  margin-top: 20rpx;
}
.uni-textarea {
  height: 100rpx;
}
.view-class {
  border-bottom: 1rpx solid #eee;
  margin: 0 30rpx;
  position: relative;
}
.border-color {
  border: none;
}
page {
  background-color: #f2f2f2;
}
.contents {
  background-color: #fff;
}
.btn {
  background-color: #fb3024;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>