web-zk-h5/pages/selfService/updateDomicile/addDomicile.vue

<template>
  <view class="main">
    <view class="contents">
      <u-form :model="dataForm" labelWidth="auto" ref="uForm">
        <view class="view-class">
          <u-form-item
            :label="'会员姓名'"
            label-width="200rpx"
            prop="memberName"
          >
            <u-input
              v-model="dataForm.memberName"
              disabled
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入收货人姓名"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'联系方式'" label-width="200rpx" prop="phone">
            <u-input
              v-model="dataForm.phone"
              disabled
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入联系方式"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            label="新会员姓名"
            label-width="200rpx"
            prop="changeMemberName"
          >
            <u-input
              v-model="dataForm.changeMemberName"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入收货人姓名"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            label="新联系方式"
            label-width="200rpx"
            prop="changePhone"
          >
            <u-input
              v-model="dataForm.changePhone"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入联系方式"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            label-width="200rpx"
            :label="'验证码'"
            prop="verificationCode"
            borderBottom
            ref="item1"
          >
            <u--input
              v-model="dataForm.verificationCode"
              placeholder="请输入"
              border="none"
            ></u--input>
            <u-button
              @tap="getCode"
              class="getcodes"
              type="primary"
              shape="circle"
              :text="tips"
              color="#2FBC42"
            ></u-button>
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            label="情况说明"
            class="label-style"
            label-width="200rpx"
            prop="description"
          >
            <u-textarea
              v-model="dataForm.description"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入情况说明"
            />
          </u-form-item>
        </view>
        <view
          class="view-class"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <u-form-item
            labelPosition="top"
            required
            label-width="200rpx"
            label="原证件(正面)"
          >
            <uploadImg
              :ifsfz="true"
              @imageUploaded="imageUploaded3"
              prop="idFront"
              style="margin-right: 30rpx"
              :bgimg="`../../../static/images/idCard1.png`"
              v-model="dataForm.idFront"
            ></uploadImg>
          </u-form-item>
          <u-form-item
            labelPosition="top"
            required
            label-width="200rpx"
            label="原证件(反面)"
          >
            <uploadImg
              :ifsfz="true"
              @imageUploaded="imageUploaded4"
              prop="idBack"
              style="margin-right: 30rpx"
              :bgimg="`../../../static/images/idCard2.png`"
              v-model="dataForm.idBack"
            ></uploadImg>
          </u-form-item>
          <!-- <u-form-item labelPosition='top' label="原会员证件照片" prop="remark">
						<image class="idImages" style="margin-right: 20rpx;" :src="dataForm.idFront" mode=""></image>
						<image class="idImages" :src="dataForm.idBack" mode=""></image>
					</u-form-item> -->
        </view>
        <view
          class="view-class"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <!-- <u-form-item labelPosition='top' label="新会员证件照片" prop="changeIdFront">
						<uploadImg style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
							v-model="dataForm.changeIdFront"></uploadImg>
						<uploadImg :bgimg="`../../../static/images/idCard2.png`" v-model="dataForm.changeIdBack">
						</uploadImg>
					</u-form-item> -->
          <u-form-item
            labelPosition="top"
            required
            label-width="180rpx"
            label="证件(正面)"
          >
            <uploadImg
              :ifsfz="true"
              @imageUploaded="imageUploaded1"
              prop="changeIdFront"
              style="margin-right: 30rpx"
              :bgimg="`../../../static/images/idCard1.png`"
              v-model="dataForm.changeIdFront"
            ></uploadImg>
          </u-form-item>
          <u-form-item
            labelPosition="top"
            required
            label-width="180rpx"
            label="证件(反面)"
          >
            <uploadImg
              :ifsfz="true"
              @imageUploaded="imageUploaded2"
              prop="changeIdBack"
              style="margin-right: 30rpx"
              :bgimg="`../../../static/images/idCard2.png`"
              v-model="dataForm.changeIdBack"
            ></uploadImg>
          </u-form-item>
        </view>
        <!-- <view class="view-class">
					<u-form-item label="业务扣费(￥)" label-width="200rpx" prop="amount">
						<u-input v-model="dataForm.amount" disabled placeholder-class="place-class" class="border-color"
							placeholder="请输入" />
					</u-form-item>
				</view> -->
        <view class="view-class">
          <u-form-item :label="'备注'" label-width="200rpx" prop="remark">
            <u-input
              v-model="dataForm.remark"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入"
            />
          </u-form-item>
        </view>
        <u-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"
        ></u-code>
      </u-form>
    </view>

    <u-button type="success" shape="circle" class="btn" @click="submit">{{
      '确定'
    }}</u-button>
  </view>
</template>

<script>
import * as sel from '@/config/selfService.js'
import * as ban from '@/config/balance.js'
import uploadImg from '@/components/uploadImg.vue'
import { setToken } from '@/config/auth.js'
export default {
  components: {
    uploadImg,
  },
  data() {
    return {
      userInfo: '',
      check: false,
      address: '',
      defaultCode: [],
      urls: '/member/api/maker-space/update-file',
      dataForm: {
        memberName: '',
        phone: '',
        changeMemberName: '',
        changePhone: '',
        description: '',
        amount: '',
        remark: '',
        idFront: '',
        idBack: '',
        changeIdFront: '',
        changeIdBack: '',
      },
      choiceValue: '',
      successShow: false,
      addressList: [],
      rules: {
        changeMemberName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '姓名不能为空',
          },
        ],

        changeIdFront: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '证件照片不能为空',
          },
        ],
        changeIdBack: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '证件照片不能为空',
          },
        ],
        // description: [{
        // 	// 必填项
        // 	required: true,
        // 	// 提示内容（会出现在u-form-item内的底部）
        // 	message: "情况说明不能为空",

        // 	trigger: ["change"],
        // }],
        changePhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号格式不正确',
            trigger: ['blur'],
          },
        ],
        idFront: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '原证件照片不能为空',
          },
        ],
        idBack: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '原证件照片不能为空',
          },
        ],
      },
      tips: '',
      seconds: 60,
    }
  },
  onLoad() {
    this.applyChange()
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },

  methods: {
    imageUploaded1(url) {
      this.dataForm.changeIdFront = url
    },
    imageUploaded2(url) {
      this.dataForm.changeIdBack = url
    },
    imageUploaded3(url) {
      this.dataForm.idFront = url
    },
    imageUploaded4(url) {
      this.dataForm.idBack = url
    },
    applyChange() {
      sel.showChangeDomicile().then(res => {
        this.dataForm = res.data
      })
    },
    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.dataForm.changePhone) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码',
          })
          ban
            .getVerification({
              phone: this.dataForm.changePhone,
            })
            .then(res => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            })
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      } else {
        uni.$u.toast('请先输入手机号')
        return
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
    },
    start() {
      // uni.$u.toast('倒计时开始');
    },

    submit() {
      this.$refs.uForm.validate().then(res => {
        sel.saveChangeDomicile(this.dataForm).then(res => {
          if (res.code == '200') {
            uni.showToast({
              title: '修改成功',
              icon: 'none',
              success() {
                setTimeout(() => {
                  uni.navigateBack()
                }, 600)
              },
            })
            // this.successShow = true
          }
        })
      })
    },
    sureBtn() {
      uni.navigateBack()
    },
  },
}
</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;

  .idImages {
    width: 316rpx;
    height: 192rpx;
  }
}

.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 .u-popup__content {
  background-color: rgba(0, 0, 0, 0);
}

.getcodes {
  width: 197rpx;
  // height: 76rpx;
  background: #2fbc42;
  border-radius: 38rpx;
  color: #fff;
}
</style>