web-base-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>
    <u-popup class="thePopup"
             :show="successShow"
             mode="center"
             @close="successShow = false">
      <view class="successPopup">

        <view class="poupTop">
          <view class="theiconbox">
            <u-icon name="checkbox-mark"
                    color="#ffffff"
                    size="26"></u-icon>
          </view>
          <view class="theicontitle">
            {{'提交成功'}}
          </view>
        </view>
        <view class="poupContent">
          {{'我们将在24小时内完成业务受理！具体进度将会以通知形式发送给您，请注意查收！'}}
          <!-- <view>
            {{'售后电话'}}：400-111-2818
          </view> -->
        </view>
        <!-- <view class="poupContent">
					{{'我们将在24小时内完成业务受理！具体进度将会以通知形式发送给您，请注意查收！'}}</br>
					{{'售后电话'}}：400-111-2818
				</view> -->
        <view class="poupBtn"
              @click="sureBtn">
          {{'确定'}}
        </view>
      </view>
    </u-popup>
  </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.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: res.msg,
            // 	icon: 'none',
            // 	success() {

            // 	}
            // })
            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>