jsm-mall-h5-front/src/packageMine/pages/workerEnter.vue

<template>
  <zj-page-layout :hasFooter="true">
    <template slot="header">
      <view class="mode">
        <view class="content">
          <!-- ----------------------------------------------------------------- -->
          <view class="mokuaikapian">
            <view class="mokuaineirongquyu">
              <h3>联系信息</h3>
              <view class="item flex">
                <view class="required">入驻网点</view>
                <view class="flex" style="flex: 1">
                  <input
                    type="text"
                    style="pointer-events: none"
                    readonly="readonly"
                    :value="websitName"
                    placeholder="请选择入驻网点"
                  />
                  <image src="/static/mine/workerEnter/right.png" mode="aspectFill"></image>
                </view>
              </view>
              <view class="item flex">
                <view class="required">姓名</view>
                <view class="flex" style="flex: 1">
                  <input v-model="name" type="text" placeholder="请输入姓名" />
                </view>
              </view>
              <view class="item flex">
                <view class="">银行卡号</view>
                <view class="flex" style="flex: 1">
                  <input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号" />
                </view>
              </view>
            </view>
          </view>
          <!-- ----------------------------------------------------------------- -->
          <view class="mokuaikapian">
            <view class="mokuaineirongquyu">
              <h3>身份证信息</h3>
              <view style="display: flex; justify-content: space-between; align-items: center">
                <view class="item" style="border-bottom: none">
                  <view class="imgs" @tap="toChooseImg('idCardImg')">
                    <image
                      class="del"
                      @tap.stop="idCardImg = ''"
                      v-show="idCardImg"
                      src="/static/mine/workerEnter/del.png"
                      mode="aspectFill"
                    ></image>
                    <image
                      class="img_neirong"
                      v-if="idCardImg"
                      :src="idCardImg"
                      mode="aspectFill"
                      @tap.stop="previewImage(idCardImg)"
                    ></image>
                    <view v-else class="addimg">
                      <view class="img_neirong">
                        <text class="iconfont icon-xiangji"></text>
                        <text class="text">添加图片</text>
                      </view>
                    </view>
                  </view>
                  <view class="text required">身份证正面</view>
                </view>
                <view class="item" style="border-bottom: none">
                  <view class="imgs" @tap="toChooseImg('idCardBackImg')">
                    <image
                      class="del"
                      @tap.stop="idCardBackImg = ''"
                      v-show="idCardBackImg"
                      src="/static/mine/workerEnter/del.png"
                      mode="aspectFill"
                    ></image>
                    <image
                      class="img_neirong"
                      v-if="idCardBackImg"
                      :src="idCardBackImg"
                      mode="aspectFill"
                      @tap.stop="previewImage(idCardBackImg)"
                    ></image>
                    <view v-else class="addimg">
                      <view class="img_neirong">
                        <text class="iconfont icon-xiangji"></text>
                        <text class="text">添加图片</text>
                      </view>
                    </view>
                  </view>
                  <view class="text required">身份证反面</view>
                </view>
              </view>
              <view class="item flex">
                <view class="required">身份证号</view>
                <view class="flex" style="flex: 1">
                  <input v-model="idcard" maxlength="18" type="text" placeholder="请输入身份证号" />
                </view>
              </view>
              <view class="item flex" @click="$refs.idCardStateTime.showWin">
                <view class="required">证件有效期开始日期</view>
                <view class="flex" style="flex: 1; pointer-events: none">
                  <input v-model="idCardStateTime" disabled type="text" placeholder="请选择日期" />
                </view>
              </view>
              <view class="item flex" @click="$refs.idCardEndTime.showWin">
                <view class="required">证件有效期结束日期</view>
                <view class="flex" style="flex: 1; pointer-events: none">
                  <input v-model="idCardEndTime" disabled type="text" placeholder="请选择日期" />
                </view>
              </view>
            </view>
          </view>
          <!-- ----------------------------------------------------------------- -->
          <view class="mokuaikapian">
            <view class="mokuaineirongquyu">
              <h3>高空证信息</h3>
              <view style="display: flex; justify-content: space-between; align-items: center">
                <view class="item" style="border-bottom: none">
                  <view class="imgs" @tap="toChooseImg('altitudeDocumentImg')">
                    <image
                      class="del"
                      @tap.stop="altitudeDocumentImg = ''"
                      v-show="altitudeDocumentImg"
                      src="/static/mine/workerEnter/del.png"
                      mode="aspectFill"
                    ></image>
                    <image
                      class="img_neirong"
                      v-if="altitudeDocumentImg"
                      :src="altitudeDocumentImg"
                      mode="aspectFill"
                      @tap.stop="previewImage(altitudeDocumentImg)"
                    ></image>
                    <view v-else class="addimg">
                      <view class="img_neirong">
                        <text class="iconfont icon-xiangji"></text>
                        <text class="text">添加图片</text>
                      </view>
                    </view>
                  </view>
                  <view class="text">高空证正面</view>
                </view>
                <view class="item" style="border-bottom: none">
                  <view class="imgs" @tap="toChooseImg('altitudeDocumentBackImg')">
                    <image
                      class="del"
                      @tap.stop="altitudeDocumentBackImg = ''"
                      v-show="altitudeDocumentBackImg"
                      src="/static/mine/workerEnter/del.png"
                      mode="aspectFill"
                    ></image>
                    <image
                      class="img_neirong"
                      v-if="altitudeDocumentBackImg"
                      :src="altitudeDocumentBackImg"
                      mode="aspectFill"
                      @tap.stop="previewImage(altitudeDocumentBackImg)"
                    ></image>
                    <view v-else class="addimg">
                      <view class="img_neirong">
                        <text class="iconfont icon-xiangji"></text>
                        <text class="text">添加图片</text>
                      </view>
                    </view>
                  </view>
                  <view class="text">高空证反面</view>
                </view>
              </view>
              <view class="item flex">
                <view class="">证件号</view>
                <view class="flex" style="flex: 1">
                  <input v-model="altitudeDocumentNumber" maxlength="18" type="text" placeholder="请输入高空证号" />
                </view>
              </view>
              <view class="item flex" @click="$refs.altitudeDocumentStateTime.showWin">
                <view class="">证件有效期开始日期</view>
                <view class="flex" style="flex: 1; pointer-events: none">
                  <input v-model="altitudeDocumentStateTime" disabled type="text" placeholder="请选择日期" />
                </view>
              </view>
              <view class="item flex" @click="$refs.altitudeDocumentEndTime.showWin">
                <view class="">证件有效期结束日期</view>
                <view class="flex" style="flex: 1; pointer-events: none">
                  <input v-model="altitudeDocumentEndTime" disabled type="text" placeholder="请选择日期" />
                </view>
              </view>
              <view class="item flex" @click="$refs.reexamineTime.showWin">
                <view class="">复审日期</view>
                <view class="flex" style="flex: 1; pointer-events: none">
                  <input v-model="reexamineTime" disabled type="text" placeholder="请选择日期" />
                </view>
              </view>
            </view>
          </view>
          <!-- ----------------------------------------------------------------- -->
          <view class="mokuaikapian">
            <view class="mokuaineirongquyu">
              <h3>意外险信息</h3>
              <view class="item flex">
                <view class="required">是否已购买意外险</view>
                <view class="flex" style="flex: 1">
                  <radio-group
                    @change="
                      d => {
                        isBuy = d.detail.value
                      }
                    "
                  >
                    <label style="margin-left: 20upx; margin-right: 20upx">
                      <radio value="YES" :checked="isBuy === 'YES'" />是
                    </label>
                    <label> <radio value="NO" :checked="isBuy === 'NO'" />否 </label>
                  </radio-group>
                </view>
              </view>
              <template v-if="isBuy === 'YES'">
                <view class="item flex">
                  <view class="required">保险公司名称</view>
                  <view class="flex" style="flex: 1">
                    <input v-model="insurancePolicyName" type="text" placeholder="请输入" />
                  </view>
                </view>
                <view class="item flex">
                  <view class="required">保单名称</view>
                  <view class="flex" style="flex: 1">
                    <input v-model="insuranceName" maxlength="18" type="text" placeholder="请输入" />
                  </view>
                </view>
                <view class="item flex">
                  <view class="required">保险单号</view>
                  <view class="flex" style="flex: 1">
                    <input v-model="insuranceNumber" maxlength="18" type="text" placeholder="请输入" />
                  </view>
                </view>
                <view class="item flex" @click="$refs.insuranceStateTime.showWin">
                  <view class="required">保险有效期开始日期</view>
                  <view class="flex" style="flex: 1; pointer-events: none">
                    <input v-model="insuranceStateTime" disabled type="text" placeholder="请选择日期" />
                  </view>
                </view>
                <view class="item flex" @click="$refs.insuranceEndTime.showWin">
                  <view class="required">保险有效期结束日期</view>
                  <view class="flex" style="flex: 1; pointer-events: none">
                    <input v-model="insuranceEndTime" disabled type="text" placeholder="请选择日期" />
                  </view>
                </view>
                <view class="mt30 image-container">
                  <view class="common-title required">附件图片(最多3张)</view>
                  <view class="images">
                    <block v-for="(item, index) in imageList" :key="index">
                      <view class="img">
                        <image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
                        <text class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
                      </view>
                    </block>
                    <view class="add" @tap="addImage" v-if="imageList.length < 3">
                      <text class="iconfont icon-xiangji"></text>
                      <text class="text">添加图片</text>
                    </view>
                  </view>
                </view>
              </template>
            </view>
          </view>
          <!-- ----------------------------------------------------------------- -->
        </view>
      </view>
    </template>

    <template slot="footer">
      <view class="flex xieyi">
        <image
          :src="isChecked ? '/static/mine/workerEnter/them_check.png' : '/static/mine/workerEnter/gray_uncheck.png'"
          mode=""
          @tap.stop="isChecked = !isChecked"
        ></image>
        <view class="">我已阅读并同意</view>
        <view class="notification" @tap="navToPage('/packageMine/pages/agreement?type=3')">《服务协议》</view>
      </view>
      <view class="btn" @click="submit()">提交审核</view>
    </template>
    <dateTimeBind v-model="idCardStateTime" ref="idCardStateTime" type="date" :maxDate="7258089600000" />
    <dateTimeBind
      v-model="idCardEndTime"
      ref="idCardEndTime"
      :minDate="idCardEndTimeMin"
      type="date"
      :maxDate="7258089600000"
    />
    <dateTimeBind
      v-model="reexamineTime"
      ref="reexamineTime"
      type="date"
      :minDate="altitudeDocumentEndTimeMin"
      :maxDate="altitudeDocumentEndTimeMAX"
    />
    <dateTimeBind
      v-model="altitudeDocumentStateTime"
      ref="altitudeDocumentStateTime"
      type="date"
      :maxDate="7258089600000"
    />
    <dateTimeBind
      v-model="altitudeDocumentEndTime"
      ref="altitudeDocumentEndTime"
      type="date"
      :minDate="altitudeDocumentEndTimeMin"
      :maxDate="7258089600000"
    />
    <dateTimeBind v-model="insuranceStateTime" ref="insuranceStateTime" type="date" :maxDate="7258089600000" />
    <dateTimeBind
      v-model="insuranceEndTime"
      ref="insuranceEndTime"
      type="date"
      :minDate="insuranceEndTimeMin"
      :maxDate="7258089600000"
    />
  </zj-page-layout>
</template>

<script>
import { uploadImgFull } from '@/common/utils/util.js'
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
import dateTimeBind from '@/components/dateTimeBind.vue'
import verify from '@/common/utils/verify.js'
export default {
  components: {
    zjDialogPicker,
    dateTimeBind
  },
  data() {
    return {
      // 协议统一
      isChecked: false,
      // 网点
      websitName: '',
      websitId: '',
      // 名称
      name: '',
      // 银行卡号
      bankAccount: '',
      // ------------------------
      // 身份证号
      idcard: '',
      // 身份证有效期开始日期
      idCardStateTime: '',
      // 身份证有效期结束日期
      idCardEndTime: '',
      // 身份证正面
      idCardImg: '',
      // 身份证反面
      idCardBackImg: '',
      // --------------------------
      // 高空证号
      altitudeDocumentNumber: '',
      // 复审日期
      reexamineTime: '',
      // 高空证有效期开始日期
      altitudeDocumentStateTime: '',
      // 高空证有效期结束日期
      altitudeDocumentEndTime: '',
      // 高空证正面
      altitudeDocumentImg: '',
      // 高空证反面
      altitudeDocumentBackImg: '',
      // --------------------------
      // 是否购买意外险
      isBuy: 'YES',
      // 保险公司名称
      insurancePolicyName: '',
      // 保单名称
      insuranceName: '',
      // 保险单号
      insuranceNumber: '',
      // 保险开始日期
      insuranceStateTime: '',
      // 保险结束日期
      insuranceEndTime: '',
      // 保险图片集合
      imageList: [], //上传的文件数据
      boolsss: false
    }
  },

  onLoad({ websitId, websitName }) {
    if (websitId) {
      this.websitId = websitId
      this.websitName = websitName
    }
    this.getUser()
  },

  watch: {
    idCardStateTime() {
      if (this.boolsss) {
        this.idCardEndTime = ''
      }
    },
    altitudeDocumentStateTime() {
      if (this.boolsss) {
        this.altitudeDocumentEndTime = ''
      }
    },
    altitudeDocumentEndTime() {
      if (this.boolsss) {
        this.reexamineTime = ''
      }
    },
    insuranceStateTime() {
      if (this.boolsss) {
        this.insuranceEndTime = ''
      }
    }
  },

  computed: {
    idCardEndTimeMin() {
      return this.idCardStateTime ? new Date(this.idCardStateTime + 'T23:59:59').getTime() : ''
    },
    altitudeDocumentEndTimeMin() {
      return this.altitudeDocumentStateTime ? new Date(this.altitudeDocumentStateTime + 'T23:59:59').getTime() : ''
    },
    insuranceEndTimeMin() {
      return this.insuranceStateTime ? new Date(this.insuranceStateTime + 'T23:59:59').getTime() : ''
    },
    altitudeDocumentEndTimeMAX() {
      return this.altitudeDocumentEndTime ? new Date(this.altitudeDocumentEndTime + 'T23:59:59').getTime() : ''
    }
  },
  methods: {
    getUser() {
      this.$api
        .get('/user/user/detail', {
          userId: this.$store.state.user.userId
        })
        .then(res => {
          if (res.data.applyType === 'WORKER') {
            this.name = res.data.nickName || ''
            this.bankAccount = res.data.bankAccount || ''
            this.idcard = res.data.idCard || ''
            this.idCardImg =
              (res.data?.workerImgs || []).filter(item => item.type == 'ID').map(item => item.imgUrl || '')?.[0] || ''
            this.idCardBackImg =
              (res.data?.workerImgs || []).filter(item => item.type == 'ID').map(item => item.imgUrl || '')?.[1] || ''
            this.idCardStateTime = res.data.idCardStartTime ? res.data.idCardStartTime?.split(' ')?.[0] : ''
            this.idCardEndTime = res.data.idCardEndTime ? res.data.idCardEndTime?.split(' ')?.[0] : ''
            this.altitudeDocumentNumber = res.data.number || ''
            this.reexamineTime = res.data.hightExamineTime ? res.data.hightExamineTime?.split(' ')?.[0] : ''
            this.altitudeDocumentStateTime = res.data.startTime ? res.data.startTime?.split(' ')?.[0] : ''
            this.altitudeDocumentEndTime = res.data.endTime ? res.data.endTime?.split(' ')?.[0] : ''
            this.altitudeDocumentImg =
              (res.data?.workerImgs || []).filter(item => item.type == 'HIGHT').map(item => item.imgUrl || '')?.[0] ||
              ''
            this.altitudeDocumentBackImg =
              (res.data?.workerImgs || []).filter(item => item.type == 'HIGHT').map(item => item.imgUrl || '')?.[1] ||
              ''
          }
          this.$nextTick(() => {
            this.boolsss = true
          })
        })
        .catch(() => {
          this.$nextTick(() => {
            this.boolsss = true
          })
        })
    },

    checkForm() {
      if (!this.websitId) {
        this.$tips('请选择入驻网点！')
        return false
      }
      if (!this.name) {
        this.$tips('请输入姓名！')
        return false
      }
      if (!this.idcard) {
        this.$tips('请输入身份证号码！')
        return false
      }
      if (!verify.isIdCard(this.idcard)) {
        this.$tips('身份证号码格式不正确，请输入正确身份证号码！')
        return false
      }
      if (!this.idCardImg) {
        this.$tips('请上传身份证正面照！')
        return false
      }
      if (!this.idCardBackImg) {
        this.$tips('请上传身份证反面照！')
        return false
      }
      if (!this.idCardStateTime) {
        this.$tips('请选择身份证有效期时间！')
        return false
      }
      if (!this.idCardEndTime) {
        this.$tips('请选择身份证有效期时间！')
        return false
      }
      if (
        this.altitudeDocumentNumber ||
        this.reexamineTime ||
        this.altitudeDocumentStateTime ||
        this.altitudeDocumentEndTime ||
        this.altitudeDocumentImg ||
        this.altitudeDocumentBackImg
      ) {
        if (
          !this.altitudeDocumentNumber ||
          !this.reexamineTime ||
          !this.altitudeDocumentStateTime ||
          !this.altitudeDocumentEndTime ||
          !this.altitudeDocumentImg ||
          !this.altitudeDocumentBackImg
        ) {
          this.$tips('高空证信息需要完整！')
          return false
        } else if (this.reexamineTime && this.altitudeDocumentStateTime && this.altitudeDocumentEndTime) {
          const reexamineEndTime = new Date(this.reexamineTime + 'T23:59:59').getTime()
          const altitudeDocumentStartTime = new Date(this.altitudeDocumentStateTime + 'T00:00:00').getTime()
          const altitudeDocumentEndTime = new Date(this.altitudeDocumentEndTime + 'T23:59:59').getTime()
          if (reexamineEndTime < altitudeDocumentStartTime || reexamineEndTime > altitudeDocumentEndTime) {
            this.$tips('复审日期必须包含在有效期内！')
            return false
          }
        }
      } else {
        this.altitudeDocumentNumber = ''
        this.reexamineTime = ''
        this.altitudeDocumentStateTime = ''
        this.altitudeDocumentEndTime = ''
        this.altitudeDocumentImg = ''
        this.altitudeDocumentBackImg = ''
      }
      if (this.isBuy == 'YES') {
        if (
          !this.insurancePolicyName ||
          !this.insuranceName ||
          !this.insuranceNumber ||
          !this.insuranceStateTime ||
          !this.insuranceEndTime ||
          !this.imageList.length
        ) {
          this.$tips('保险信息需要完整！')
          return false
        }
      } else {
        this.insurancePolicyName = ''
        this.insuranceName = ''
        this.insuranceNumber = ''
        this.insuranceStateTime = ''
        this.insuranceEndTime = ''
        this.imageList = []
      }
      return true
    },

    dataAssembly() {
      return {
        name: this.name,
        bankAccount: this.bankAccount,
        idCard: this.idcard,
        idCardStartTime: this.idCardStateTime ? this.idCardStateTime + ' 00:00:00' : '',
        idCardEndTime: this.idCardEndTime ? this.idCardEndTime + ' 23:59:59' : '',
        number: this.altitudeDocumentNumber,
        hightExamineTime: this.reexamineTime ? this.reexamineTime + ' 23:59:59' : '',
        startTime: this.altitudeDocumentStateTime ? this.altitudeDocumentStateTime + ' 00:00:00' : '',
        endTime: this.altitudeDocumentEndTime ? this.altitudeDocumentEndTime + ' 23:59:59' : '',
        type: 'WORKER',
        websitId: this.websitId,
        isBuy: this.isBuy,
        workerImgs: [
          ...(() => {
            if (this.idCardImg) {
              return [
                {
                  imgName: '身份证正面',
                  imgUrl: this.idCardImg,
                  type: 'ID'
                }
              ]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.idCardBackImg) {
              return [
                {
                  imgName: '身份证反面',
                  imgUrl: this.idCardBackImg,
                  type: 'ID'
                }
              ]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.altitudeDocumentImg) {
              return [
                {
                  imgName: '高空证正面',
                  imgUrl: this.altitudeDocumentImg,
                  type: 'HIGHT'
                }
              ]
            } else {
              return []
            }
          })(),
          ...(() => {
            if (this.altitudeDocumentBackImg) {
              return [
                {
                  imgName: '高空证反面',
                  imgUrl: this.altitudeDocumentBackImg,
                  type: 'HIGHT'
                }
              ]
            } else {
              return []
            }
          })()
        ],
        workerPolicy: {
          isBuy: this.isBuy,
          company: this.insurancePolicyName,
          policyName: this.insuranceName,
          policyOrder: this.insuranceNumber,
          startTime: this.insuranceStateTime ? this.insuranceStateTime + ' 00:00:00' : '',
          endTime: this.insuranceEndTime ? this.insuranceEndTime + ' 23:59:59' : '',
          policyType: 'AC',
          policyPrice: 0,
          policyUrl: this.imageList.map(item => item.url).join(',')
        }
      }
    },

    async submit() {
      if (this.checkForm()) {
        if (!this.isChecked) {
          this.$tips('请先阅读并同意服务协议！')
          return false
        }
        this.$api.postJson('/user/apply', this.dataAssembly(), true, true, true).then(res => {
          if (res.code == 200) {
            this.$toast('提交审核成功！')
            setTimeout(() => {
              this.$navToPage(
                {
                  delta: 1
                },
                'navigateBack'
              )
            }, 1500)
          } else {
            this.$tips(res.msg)
          }
        })
      }
    },

    // 选择图片
    async toChooseImg(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: res => {
          this.uploadImage(res.tempFilePaths[0], type)
        },
        fail: err => {
          console.log(err)
        }
      })
    },

    // 上传文件
    async uploadImage(file, type) {
      let data = await uploadImgFull(file)
      uni.hideLoading()
      this[type] = data.url
    },

    // 预览图片
    previewImage(url) {
      uni.previewImage({
        current: url,
        urls: [url]
      })
    },

    // 添加图片
    async addImage() {
      uni.chooseImage({
        count: 6 - this.imageList.length,
        success: res => {
          uni.showLoading()
          res.tempFilePaths.forEach(async item => {
            let data = await uploadImgFull(item)
            this.imageList.push(data)
          })
          uni.hideLoading()
        },
        fail: err => {}
      })
    },

    // 删除图片
    delImage(index) {
      this.imageList.splice(index, 1)
    },

    //预览图片
    prevImg(current) {
      uni.previewImage({
        current,
        urls: this.imageList.map(item => {
          return item.url
        })
      })
    },

    navToPage(url) {
      this.$navToPage({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.image-container {
  background: #ffffff;

  .images {
    display: flex;
    flex-wrap: wrap;

    .add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 146rpx;
      height: 146rpx;
      border: 2rpx dashed #dadada;
      border-radius: 10rpx;
      margin-top: 20rpx;

      .iconfont {
        font-size: 48rpx;
        color: #999999;
      }

      .text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 10rpx;
      }
    }

    .img {
      position: relative;
      margin-right: 40rpx;
      margin-top: 20rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: block;
      }

      text {
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #ff3f42;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 40rpx;
        display: block;
      }
    }
  }
}
.app-container {
  height: auto !important;
}
.mokuaikapian {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-bottom: 40rpx;
  .mokuaineirongquyu {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_asb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mode {
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  h3 {
    margin-bottom: 60rpx;
  }
  .required:before {
    content: '*';
    color: #ff0000;
  }
  .item {
    width: 100%;
    padding: 20rpx 0;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    border-bottom: 1rpx solid #eeeeee;
    box-sizing: border-box;
    input {
      flex: 1;
      text-align: right;
      padding: 0 20rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
  .text {
    margin-top: 10rpx;
    color: #999999;
    text-align: center;
  }
}
.imgs {
  text-align: center;
  position: relative;
  width: 100%;
  height: 180rpx;
  box-sizing: border-box;
  padding: 10rpx;
  ::v-deep .img_neirong {
    width: 100% !important;
    height: 100% !important;
    border: 1rpx solid #eeeeee;
    border-radius: 10rpx;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    flex-direction: column;
  }
  .addimg {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .del {
    width: 38rpx !important;
    height: 38rpx !important;
    position: absolute;
    right: -14rpx;
    top: 8rpx;
    z-index: 9;
  }
}
.zhu {
  margin-top: 30rpx;
  color: #ffa700;
}
.btn {
  width: 690rpx;
  height: 80rpx;
  background-color: #0379ff;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.notification {
  color: #0379ff;
}
.xieyi {
  padding: 30rpx;
  font-size: 28rpx;
  image {
    border: 2rpx #00bfff;
    border-radius: 50%;
    height: 40rpx;
    width: 40rpx;
    vertical-align: sub;
    margin-right: 30rpx;
  }
}
</style>