horzi_rai_wxa/pageMy/applyTrial/applyTrial.vue

<template>
  <view class="applyTrial-container container">
    <view class="applyTrial-content">
      <view class="tip">请上传您的名片信息，以便工作人员更好地为您服务</view>
      <view class="apply-top">
        <view class="add_icon upload-ico" v-if="!fileList.length" @click="ChooseFile">
          <u-icon name="plus" color="#9C9C9C" size="48"></u-icon>
          <text class="add-tip">上传图片</text>
        </view>
        <view class="add_icon" v-for="(item, index) in fileList" :key="item" v-else>
          <image class="img" :src="item" @click="viewImage(item, fileList)"> </image>
          <icon type="clear" size="16" class="del-ico" color="#f00" @click.stop="delImg(index)" />
        </view>
        <view class="card_default_cont">
          <image :src="img" mode="" class="card_default" @click="viewImage(img, img.split())"></image>
          <text class="tip">名片示例</text>
        </view>
      </view>
      <view class="apply-info-cont">
        <view class="ipt-item">
          <label class="item-label">姓名</label>
          <input type="text" v-model="name" class="ipt" placeholder="请输入姓名" />
        </view>
        <view class="ipt-item">
          <label class="item-label">公司名</label>
          <input type="text" v-model="company" class="ipt" placeholder="请输入公司名" />
        </view>
        <view class="ipt-item">
          <label class="item-label">手机号</label>
          <input type="number" v-model="mobile" class="ipt" maxlength="11" disabled />
        </view>
        <view class="btn-cont" @click="applyHandle"> 提交 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadurl, Mine, User } from "@/config/api.js";
export default {
  data() {
    return {
      action: "",
      name: "",
      mobile: "",
      company: "",
      img: "https://hongze.oss-accelerate.aliyuncs.com/static/images/202102/20210219/gYD8azAtSeVzL8ZMbAu9mCyCxcTF.png",
      fileList: [], //名片列表
      tryType: "",
      detailId: 0,
    };
  },
  onLoad(op) {
    if (this.$db.get("mobile")) {
      this.mobile = this.$db.get("mobile");
    } else {
      this.getPhone();
    }
    this.tryType = op.tryType || "";
    this.detailId = op.detailId || 0;
  },
  methods: {
    /* 获取手机号 */
    getPhone() {
      Mine.getInfo().then((res) => {
        if (res.Ret === 200) {
          this.mobile = res.Data.Mobile;
          res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
        }
      });
    },
    /* 上传图片 */
    ChooseFile() {
      this.$util.upload.Single(uploadurl, (res) => {
        let data = JSON.parse(res.data);
        if (data.Ret === 200) {
          this.fileList = data.Data.ResourceUrl.split();
        }
      });
    },
    /* 提交 */
    applyHandle() {
      if (this.name && this.company && this.fileList.length) {
        User.applyTry({
          ApplyMethod: 2,
          BusinessCardUrl: this.fileList.join(","),
          CompanyName: this.company,
          RealName: this.name,
          TryType: this.tryType,
          DetailId: this.detailId > 0 ? Number(this.detailId) : 0,
        }).then((res) => {
          if (res.Ret === 200) {
            uni.redirectTo({
              url: "/pageMy/applyResult/applyResult",
            });
          }
        });
      } else {
        this.$util.toast(`请${!this.fileList.length ? "上传名片" : !this.name ? "输入姓名" : !this.company ? "输入公司名" : ""}`);
      }
    },
    // 预览图片
    viewImage(path, imgList) {
      uni.previewImage({
        current: path, // 当前显示图片的http链接
        urls: imgList, // 需要预览的图片http链接列表
      });
    },
    // 删除图片
    delImg(index) {
      uni.showModal({
        title: "",
        content: "确定要删除图片吗 ?",
        success: (res) => {
          if (res.confirm) {
            this.fileList.splice(index, 1);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.applyTrial-container {
  background-color: $uni-color-new;
  padding: 35rpx 30rpx;
  .applyTrial-content {
    background-color: #fff;
    padding: 50rpx 30rpx;
    border-radius: 8rpx;
  }
  .tip {
    padding: 11rpx 32rpx;
    color: #b2b2b2;
    font-size: 24rpx;
  }
  .apply-top {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .add_icon {
      width: 330rpx;
      height: 200rpx;
      position: relative;
      .del-ico {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }
      .img {
        width: 330rpx;
        height: 200rpx;
      }
      &.upload-ico {
        padding-top: 50rpx;
        text-align: center;
        background-color: $uni-bg-color;
        color: #4a4a4a;
        margin-right: 20rpx;
        .add-tip {
          margin-top: 10rpx;
        }
      }
    }
    .card_default_cont {
      position: relative;
      .card_default {
        width: 330rpx;
        height: 200rpx;
        display: block;
      }
      .tip {
        background-color: rgba($color: #000000, $alpha: 0.5);
        border-radius: 8rpx;
        padding: 12rpx 22rpx;
        color: #fff;
        font-size: 24rpx;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
    }
  }
  .apply-info-cont {
    .ipt-item {
      padding: 33rpx 0;
      border-bottom: 1rpx solid #e5e5e5;
      display: flex;
      align-items: center;
      font-size: 34rpx;
      .item-label {
        text-align: justify;
        text-align-last: justify;
        display: inline-block;
        width: 106rpx;
        margin-right: 40rpx;
      }
      .ipt {
        width: 500rpx;
        font-size: 32rpx;
        color: #666;
      }
    }
    .btn-cont {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 504rpx;
      height: 60rpx;
      color: #fff;
      border-radius: 8rpx;
      margin: 100rpx auto 0;
      background-color: #376cbb;
    }
  }
}
</style>