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 class="item">
                <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
                    id="img"
                    v-if="idCardImg"
                    :src="idCardImg"
                    mode="aspectFill"
                    @tap.stop="previewImage(idCardImg)"
                  ></image>
                  <view v-else class="addimg">
                    <image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
                  </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>
          </view>
          <!-- ----------------------------------------------------------------- -->
          <view class="mokuaikapian">
            <view class="mokuaineirongquyu">
              <h3>高空证信息</h3>
              <view class="item" v-for="(item, index) in imgList" :key="index">
                <view class="imgs" @tap="toChooseImg1(index)">
                  <image
                    class="del"
                    @tap.stop="item.imgUrl = ''"
                    v-show="item.imgUrl"
                    src="/static/mine/workerEnter/del.png"
                    mode="aspectFill"
                  ></image>
                  <image
                    id="img"
                    v-if="item.imgUrl"
                    :src="item.imgUrl"
                    mode="aspectFill"
                    @tap.stop="previewImage(item.imgUrl)"
                  ></image>
                  <view v-else class="addimg">
                    <image src="/static/mine/workerEnter/camera.png" mode="aspectFit"></image>
                  </view>
                  <view class="text required">{{ item.dictValue }}</view>
                </view>
              </view>
              <view class="zhu">注意：支持PNG、JPG、JPEG，每张大小不可超过1M</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">
                  <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 class="item flex">
                <view class="">保险单号</view>
                <view class="flex" style="flex: 1">
                  <input v-model="bankAccount" maxlength="18" type="text" placeholder="请输入银行卡号" />
                </view>
              </view>
              <view class="mt30 image-container">
                <view class="common-title">上传图片(最多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>
            </view>
          </view>
          <!-- ----------------------------------------------------------------- -->
        </view>
      </view>
      <zjDialogPicker
        ref="websitDialog"
        :isShow="isShowWebsitDialog"
        :multiple="false"
        :styleType="2"
        :title="'入驻网点'"
        :list="websitList"
        :keyName="'name'"
        @cancel="isShowWebsitDialog = false"
        @confirm="confirmWebsitDialog"
      >
      </zjDialogPicker>
    </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>
  </zj-page-layout>
</template>

<script>
import { uploadImgFull } from '@/common/utils/util.js'
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
import verify from '@/common/utils/verify.js'
export default {
  components: {
    zjDialogPicker
  },
  data() {
    return {
      isShowWebsitDialog: false,
      isChecked: false,
      websitList: [],
      websitName: '',
      websitId: '',
      name: '',
      bankAccount: '',
      idcard: '',
      idCardImg: '',
      imageUrl: this.$imageUrl,
      imgList: [],
      imageList: [] //上传的文件数据
    }
  },

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

  methods: {
    // 添加图片
    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
        })
      })
    },

    getWebsit() {
      this.$api
        .get('/user/apply/websit', {
          pageNum: 1,
          pageSize: -1,
          status: 'ON'
        })
        .then(res => {
          this.websitList = res.data
        })
    },

    getImageList() {
      this.$api
        .post('/pay/sysDict', {
          dictType: 'WORKER_IMG'
        })
        .then(res => {
          res.data.filter(item => {
            return (item.imgUrl = '')
          })
          this.imgList = res.data
        })
    },

    getUser() {
      this.$api
        .get('/user/user/detail', {
          userId: this.$store.state.user.userId
        })
        .then(res => {
          this.idcard = res.data.idCard
          this.idCardImg = res.data.idCardImg
          // this.name = res.data.nickName
        })
    },

    openWebsit() {
      this.isShowWebsitDialog = true
    },

    confirmWebsitDialog(e) {
      this.websitId = this.websitList[e[0]].websitId
      this.websitName = this.websitList[e[0]].name
      this.isShowWebsitDialog = false
    },

    // 选择图片
    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
    },

    async toChooseImg1(index) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        success: res => {
          this.uploadImage1(res.tempFilePaths[0], index)
        },
        fail: err => {
          console.log(err)
        }
      })
    },

    async uploadImage1(file, index) {
      let data = await uploadImgFull(file)
      uni.hideLoading()
      this.imgList[index].imgUrl = data.url
    },

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

    async checkForm() {
      if (!this.websitId) {
        this.$tips('请选择入驻网点！')
        return true
      }
      if (!this.name) {
        this.$tips('请输入姓名！')
        return true
      } else if (!this.idcard) {
        this.$tips('请输入身份证号码！')
        return true
      } else if (!verify.isIdCard(this.idcard)) {
        this.$tips('身份证号码格式不正确，请输入正确身份证号码！')
        return true
      } else if (!this.idCardImg) {
        this.$tips('请上传身份证正面照！')
        return true
      }
    },

    async submit() {
      const that = this
      let is_save = await this.checkForm()
      let workerImgs = []
      for (var i = 0; i < this.imgList.length; i++) {
        if (!this.imgList[i].imgUrl) {
          return this.$tips('请上传' + this.imgList[i].dictValue + '!')
          break
        } else {
          workerImgs.push({
            imgName: this.imgList[i].dictValue,
            imgUrl: this.imgList[i].imgUrl
          })
        }
      }
      if (!is_save) {
        if (!this.isChecked) {
          this.$tips('请先阅读并同意服务协议！')
          return false
        }
        this.$api
          .postJson(
            '/user/apply',
            {
              idCard: this.idcard,
              idCardImg: this.idCardImg,
              name: this.name,
              bankAccount: this.bankAccount,
              type: 'WORKER',
              websitId: this.websitId,
              workerImgs
            },
            true,
            true,
            true
          )
          .then(res => {
            if (res.code == 200) {
              this.$toast('提交审核成功！')
              setTimeout(() => {
                this.$navToPage(
                  {
                    delta: 1
                  },
                  'navigateBack'
                )
              }, 1500)
            } else {
              this.$tips(res.msg)
            }
          })
      }
    },
    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;
    }
  }
}
.imgs {
  text-align: center;
  position: relative;
  #img {
    width: 100%;
    height: 320rpx;
    padding: 30rpx 0;
  }
  .addimg {
    width: 100%;
    height: 320rpx;
    border: 1rpx solid #eeeeee;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }
  .text {
    color: #999999;
  }
  .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>