web-store-retail-h5/pages/selfService/updateAdress/addAdress.vue

<template>
  <view class="main">
    <view class="contents">
      <!-- <view class="top_text">
        {{'注：修改地址后，若涉及运费问题，系统将自动扣除请在原订单基础上填写新的收货人信息'}}
      </view> -->
      <u-form :model="addressForm" labelWidth="auto" ref="uForm">
        <view class="view-class">
          <u-form-item
            :label="'订单编号'"
            label-width="150rpx"
            prop="orderCode"
          >
            <u--input
              v-model="addressForm.orderCode"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择"
              border="none"
            ></u--input>
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'收货人'" label-width="150rpx" prop="newRecName">
            <u-input
              v-model="addressForm.newRecName"
              placeholder-class="place-class"
              class="border-color"
              :placeholder="'请输入'"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            :label="'联系方式'"
            label-width="150rpx"
            prop="newRecPhone"
          >
            <u-input
              v-model="addressForm.newRecPhone"
              placeholder-class="place-class"
              :maxlength="userInfo.pkSettleCountry == 1 ? 11 : 20"
              class="border-color"
              :placeholder="'请输入'"
            />
          </u-form-item>
        </view>
        <view class="view-class" @click="getDiqu">
          <u-form-item :label="'收货地址'" label-width="150rpx" 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="150rpx"
            prop="newRecAddress"
          >
            <u-textarea
              v-model="addressForm.newRecAddress"
              placeholder-class="place-class"
              maxlength="200"
              class="border-color"
              :placeholder="'请输入详细地址'"
            />
          </u-form-item>
          <view class="lis_address" v-if="addressList.length > 0">
            <view class="lis_title">{{ '历史地址' }}</view>
            <view class="">
              <u-radio-group
                @change="groupChange"
                placement="column"
                v-model="choiceValue"
                iconPlacement="left"
              >
                <div
                  v-for="(item, index) in addressList"
                  :key="index"
                  class="custom-radio-label"
                >
                  <u-radio :name="item.pkId" activeColor="#005BAC"></u-radio>
                  <div class="custom-label-content">
                    <view class="label_name">{{ item.recName }}</view>
                    <view class="label_phone">{{ item.recPhone }}</view>
                    <view class="label_address">{{ item.recArea }}</view>
                  </div>
                </div>
              </u-radio-group>
            </view>
          </view>
        </view>
        <view class="view-class">
          <u-form-item
            :label="'邮费扣除'"
            label-width="150rpx"
            prop="newPostage"
          >
            <u--input
              v-model="addressForm.newPostage"
              disabled
              disabledColor="#ffffff"
              placeholder=""
              border="none"
            ></u--input>
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'备注'" label-width="150rpx" prop="selfRemark">
            <u-input
              v-model="addressForm.selfRemark"
              placeholder-class="place-class"
              class="border-color"
              :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>
</template>

<script>
import * as api from '@/config/login.js'
import * as sel from '@/config/selfService.js'
import { setToken } from '@/config/auth.js'
import address from '@/components/address.vue'
export default {
  data() {
    return {
      userInfo: '',
      check: false,
      address: '',
      defaultCode: [],
      urls: '/member/api/maker-space/update-file',
      addressForm: {
        orderCode: '',
        newRecName: '',
        newRecPhone: '',
        newRecProvince: '',
        newRecCity: '',
        newRecCounty: '',
        newRecAddress: '',
        newPostage: '',
        selfRemark: '',
      },
      choiceValue: '',
      successShow: false,
      addressList: [],
      rules: {
        newRecName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入',
          },
        ],
        newRecAddress: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入',
          },
        ],
        newRecProvince: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入',

            trigger: ['change'],
          },
        ],
        newRecPhone: [
          {
            required: true,
            message: '请输入',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '请先输入手机号',
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  onLoad(options) {
    let query = JSON.parse(options.obj)
    // console.log(12, JSON.parse(query)) // 输出携带的参数对象
    this.addressForm = query

    if (query.recCountyVal) {
      this.address =
        query.recProvinceVal + query.recCityVal + query.recCountyVal
    } else {
      this.address = query.recProvinceVal + query.recCityVal
    }
    this.addressForm.newRecName = query.recName
    this.$set(this.addressForm, 'newRecPhone', query.recPhone)
    this.addressForm.newRecAddress = query.recAddress
    this.addressForm.newRecProvince = query.recProvince
    this.addressForm.newRecCity = query.recCity
    this.addressForm.newRecCounty = query.recCounty
    this.addressForm.newPostage = query.postage
    this.addressForm.specialArea = query.specialArea
    this.getAddressList()
    this.userInfo = uni.getStorageSync('User')
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  components: {
    'v-address': address,
  },
  methods: {
    groupChange(value) {
      this.addressList.forEach(ele => {
        if (value == ele.pkId) {
          this.$set(this.addressForm, 'newRecName', ele.recName)
          this.$set(this.addressForm, 'newRecPhone', ele.recPhone)
          this.$set(this.addressForm, 'newRecAddress', ele.recAddress)
          this.$set(this.addressForm, 'newRecProvince', ele.recProvince)
          this.$set(this.addressForm, 'newRecCity', ele.recCity)
          this.$set(this.addressForm, 'newRecCounty', ele.recCounty)
          if (ele.recCountyVal) {
            this.address =
              ele.recProvinceVal + ele.recCityVal + ele.recCountyVal
          } else {
            this.address = ele.recProvinceVal + ele.recCityVal
          }
          this.getPostAge()
        }
      })
    },
    //邮费
    getPostAge() {
      let postageData = {
        recProvince: this.addressForm.newRecProvince,
        recCity: this.addressForm.newRecCity,
        orderCode: this.addressForm.orderCode,
        specialArea: this.addressForm.specialArea,
        deliveryWay: this.addressForm.deliveryWay,
        tranType: this.addressForm.tranType,
        orderItemsParams: this.addressForm.orderItemsParams,
      }
      sel.queryAdressPostage(postageData).then(res => {
        this.$set(this.addressForm, 'newPostage', res.data.postage)
        this.$forceUpdate()
      })
    },
    getAddressList() {
      sel.addressList({}).then(res => {
        this.addressList = res.data
      })
    },
    AddressData(name) {
      this.address = name
    },
    submit() {
      this.$refs.uForm.validate().then(res => {
        sel.saveSelfAddress(this.addressForm).then(res => {
          if (res.code == '200') {
            uni.showToast({
              title: '修改成功',
              icon: 'none',
              success() {
                setTimeout(() => {
                  uni.navigateBack()
                }, 600)
              },
            })

            // this.successShow = true
          }
        })
      })
    },
    sureBtn() {
      uni.navigateBack()
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.address = diqu
      this.addressForm.newRecProvince = obj.province
      this.addressForm.newRecCity = obj.city
      this.addressForm.newRecCounty = obj.county
      this.getPostAge()
      this.$forceUpdate()
    },
    getAddressData(e) {
      console.error(e)
    },
    // getAddress(id) {
    // 	api.getAddress(id).then(res => {
    // 		if (res) {
    // 			this.addressForm = {
    // 				recName: res.data.recName,
    // 				recPhone: res.data.recPhone,
    // 				recProvince: res.data.recProvince,
    // 				recCity: res.data.recCity,
    // 				recCounty: res.data.recCounty || '',
    // 				pkId: res.data.pkId,
    // 				recAddress: res.data.recAddress,
    // 			}
    // 			this.defaultCode = [
    // 				res.data.recProvince,
    // 				res.data.recCity,
    // 				res.data.recCounty || '',
    // 			]
    // 		}
    // 	}).catch(error => {
    // 		reject(error)
    // 	})
    // },
  },
}
</script>

<style lang="scss" scoped>
.custom-radio-label {
  display: flex;
  margin-top: 30rpx;
}

.custom-label-content {
  margin-left: 20rpx;

  .label_name {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
  }

  .label_phone {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }

  .label_address {
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
  }
}

: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: 30rpx;
  }
}

.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;
  }
}

.lis_address {
  background: rgba(231, 20, 26, 0.08);
  border-radius: 15rpx;
  padding: 20rpx 26rpx;

  .lis_title {
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #005bac;
  }
}

.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;

  .top_text {
    padding: 30rpx 40rpx;
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
  }
}

.btn {
  background-color: #005bac;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}

.successPopup {
  width: 560rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 26rpx 60rpx;

  .poupTop {
    display: flex;
    align-items: center;

    .theiconbox {
      background-color: #029b00;
      border-radius: 50%;
      display: flex;
      align-content: center;
      justify-content: center;
    }

    .theicontitle {
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      margin-left: 13rpx;
      color: #333333;
    }
  }

  .poupContent {
    margin-top: 50rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 42rpx;
    color: #666666;
  }

  .poupBtn {
    background: #005bac;
    border-radius: 39rpx;
    padding: 26rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-top: 70rpx;
    margin-bottom: 40rpx;
  }
}

::v-deep .thePopup .u-popup__content {
  background-color: rgba(0, 0, 0, 0);
}
</style>