saas_miniprogram/pages2/verify/input2.vue

<template>
  <view style="padding: 30rpx">
    <nav-bar title="填写审核资料"></nav-bar>
    <view class="topBox">
      <view>
        <u-icon name="error-circle-fill" color="#FF3B30" size="28"></u-icon>
        <text style="color: #ff3b30; margin-left: 10rpx"
          >学习前请提交完整审核资料</text
        >
      </view>
      <view style="color: #007aff" @click="backPage">稍后再填</view>
    </view>
    <u-collapse v-if="remarkStatus" :item-style="itemStyle" event-type="close">
      <u-collapse-item title="审核结果反馈">
        <view style="padding-bottom: 30rpx">
          <text class="collapse-item">{{ remark }}</text>
        </view>
      </u-collapse-item>
    </u-collapse>
    <view class="bodyBox" style="margin-top: 30rpx; padding: 0 20rpx">
      <u-form :model="form" ref="uForm">
        <template v-for="(item, index) in listData">
          <u-form-item
            v-if="item.inputType == 4"
            :key="index"
            :label="item.fieldName"
            :required="item.required"
            :label-width="auto"
            :prop="item.required ? item.fieldKey : ''"
            label-position="top"
          >
            <text
              style="
                color: #007aff;
                position: absolute;
                top: 20rpx;
                left: 180rpx;
                text-decoration: underline;
              "
              @click="downDocx(item.url)"
              >点击下载</text
            >
            <div>
              <view class="dis_stys">
                <text style="color: #999999">
                  下载承诺书进行填写并签名盖章后上传（≤2M）
                </text>
              </view>
              <image
                v-if="!form[item.fieldKey]"
                style="width: 169rpx; height: 169rpx"
                @click="getChast"
                src="@/static/info_4.png"
              ></image>
              <view class="quzw" v-if="form[item.fieldKey]">
                <view
                  v-if="
                    form[item.fieldKey].split('.').splice(-1)[0] == 'docx' ||
                    form[item.fieldKey].split('.').splice(-1)[0] == 'doc'
                  "
                  class="borsrs"
                >
                  <image
                    src="@/static/icon/jy_icon.png"
                    style="width: 168rpx; height: 168rpx"
                  ></image>
                  <text>{{ titleName }}</text>
                </view>
                <image
                  v-else
                  :src="form[item.fieldKey]"
                  style="width: 100%; height: 100%"
                  mode="aspectFit"
                  @click="seePhotos(form[item.fieldKey])"
                ></image>
                <u-icon
                  name="close-circle-fill"
                  color="red"
                  size="44"
                  class="optionsAbs"
                  @click="clearWord"
                ></u-icon>
              </view>
            </div>
          </u-form-item>
        </template>
      </u-form>
    </view>
    <view @click="submits" class="submit_btn">提交资料</view>
    <u-action-sheet
      :list="list"
      v-model="showTableDown"
      @click="clickIndex"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showTableDown: false,
      list: [
        {
          text: "上传图片",
        },
        // {
        // 	text: '上传文件'
        // }
      ],
      isUploading: false,
      itemStyle: {
        marginTop: "20px",
        backgroundColor: "#fff",
        borderRadius: "24rpx",
        padding: "0rpx 20rpx",
      },
      form: {
        commitment_seal: "",
      },
      goodsId: null,
      fileList1: [],
      id: null, //id有值的话就是修改页面
      listData: {}, //页面数据
      openVerify: false, // 控制是否手动验证
      nextStatus: false, //是否有下一步
      titleName: "文件名称居中对齐过长换行", //word名称
      remark: "", //反馈文本
      remarkStatus: false, //是否存在审核结果反馈
      rules: {
        commitment_seal: [
          {
            required: true,
            message: "请上传承诺书盖章",
            trigger: ["change", "blur"],
          },
        ],
      },
      orderGoodsId: 0,
      auto: "180rpx",
    };
  },
  created() {},
  onLoad(option) {
    this.orderGoodsId = Number(option.orderGoodsId);
    this.goodsId = Number(option.id);
    this.getInfo();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    backPage() {
      uni.navigateBack();
    },
    seePhotos(url) {
      uni.previewImage({
        urls: [url],
      });
    },
    downDocx(url) {
      this.$api
        .addWordbaseprofileStamp({ goodsId: this.goodsId })
        .then((res) => {
          // #ifdef H5
          window.location.href = this.$method.splitImgHost(res.data.msg);
          // #endif
          // #ifdef MP-WEIXIN
          uni.downloadFile({
            url: this.$method.splitImgHost(res.data.msg),
            success: (result) => {
              if (result.statusCode === 200) {
                const filePath = result.tempFilePath;
                console.log(this.$method.splitImgHost(res.data.msg), 111);
                this.$method.showToast("下载成功");
                uni.saveImageToPhotosAlbum({
                  filePath: filePath,
                  success: function (errMsg) {
                    uni.showToast({
                      mask: true,
                      title: "保存成功",
                    });
                  },
                  fail: (errMsg) => {
                    uni.showToast({
                      mask: true,
                      title: "保存失败",
                    });
                  },
                  complete: (errMsg) => {},
                });
              }
            },
          });
          // #endif
        });
    },
    clearWord() {
      this.$set(this.form, "commitment_seal", "");
      this.titleName = "";
    },
    clickIndex(inds) {
      console.log(inds, 789);
      if (inds === 0) {
        this.uploadImgs();
      }
      if (inds === 1) {
        this.uploadFieds();
      }
    },
    getChast() {
      this.showTableDown = true;
    },
    uploadImgs() {
      var self = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        success: function (res) {
          if (res.tempFiles[0].size > 2097152) {
            self.$method.showToast("上传图片不得大于2M");
            return;
          } else {
            // #ifdef MP-WEIXIN
            var type = res.tempFiles[0].path.split(".").splice(-1);
            // #endif
            // #ifdef H5
            var type = res.tempFiles[0].type.split("/").splice(-1);
            // #endif
            if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
              self.$method.showToast("请上传图片格式");
              return;
            }
            console.log(res.tempFiles[0].path, "res.tempFiles[0].path");
            self.$set(self.form, "commitment_seal", res.tempFiles[0].path);
            self.$nextTick(function () {
              this.resultForm();
            });
          }
        },
      });
    },
    uploadFieds() {
      var self = this;
      wx.chooseMessageFile({
        count: 1,
        size: 2097152,
        type: "file",
        success(res) {
          if (res.tempFiles[0].size > 2097152) {
            self.$method.showToast("上传文件不得大于2M");
            return;
          } else {
            var type = res.tempFiles[0].path.split(".").splice(-1);
            if (
              type[0] != "jpg" &&
              type[0] != "png" &&
              type[0] != "jpeg" &&
              type[0] != "docx" &&
              type[0] != "doc"
            ) {
              self.$method.showToast("请上传word文档或图片");
              return;
            }
            self.titleName = res.tempFiles[0].name;
            self.$set(self.form, "commitment_seal", res.tempFiles[0].path);
            self.$nextTick(function () {
              this.resultForm();
            });
          }
        },
      });
    },
    //提交表单
    async submitApi() {
      var data = JSON.parse(JSON.stringify(this.form));
      if (data["commitment_seal"]) {
        data.commitment_seal = await this.$method.uploadFile(
          data.commitment_seal,
          0
        );
      }
      this.optionChanges(data);
    },
    optionChanges(data) {
      var self = this;
      var objs = {};
      for (let k in data) {
        objs[k] = {
          fieldKey: k,
          value: data[k],
          fieldName: (function () {
            for (let i = 0; i < self.listData.length; i++) {
              if (self.listData[i].fieldKey == k) {
                return self.listData[i].fieldName;
              }
            }
          })(),
          status: self.remarkStatus ? 1 : 0,
        };
      }
      var datas = {
        orderGoodsId: this.orderGoodsId,
        goodsId: self.goodsId,
        keyValue: JSON.stringify(objs),
      };
      if (self.remarkStatus) {
        datas.id = self.id;
        self.$api.editbaseprofileStamp(datas).then((res) => {
          this.isUploading = false;
          if (res.data.code === 200) {
            self.$method.showToast("提交成功");
            setTimeout(() => {
              console.log("延迟");
              uni.navigateBack();
            }, 1500);
          }
        });
      } else {
        self.$api.addbaseprofileStamp(datas).then((res) => {
          this.isUploading = false;
          if (res.data.code === 200) {
            self.$method.showToast("提交成功");
            setTimeout(() => {
              console.log("延迟");
              uni.navigateBack();
            }, 1500);
          }
        });
      }
    },
    //验证表单
    resultForm(int) {
      if (this.openVerify) {
        for (let i = 0; i < this.listData.length; i++) {
          if (
            this.listData[i].fieldKey === "commitment_seal" &&
            !this.listData[i].required
          ) {
            this.submitApi();
            return;
          }
        }
        this.$refs.uForm.validate((valid) => {
          if (valid) {
            if (int === 1) {
              this.submitApi();
            }
          } else {
            this.isUploading = false;
            console.log("验证失败");
          }
        });
      }
    },
    submits() {
      if (this.isUploading) {
        return;
      }
      this.isUploading = true;
      this.openVerify = true;
      this.resultForm(1);
    },
    async changePhotoListHeader1(lists, name) {
      if (lists.length) {
        this.fileList1 = lists;
        this.form.commitment_seal = await this.$method.imageInfos(lists[0].url);
      } else {
        this.fileList1 = [];
        this.$set(this.form, "commitment_seal", "");
      }
      this.$nextTick(function () {
        this.resultForm();
      });
    },

    getInfo() {
      var self = this;
      this.$api.getbaseprofiletpId(this.goodsId).then((res) => {
        var ast = JSON.parse(res.data.data.keyValue2);
        self.listData = ast;
        self.$api
          .getbaseprofileStampgetInfo({
            goodsId: self.goodsId,
            orderGoodsId: self.orderGoodsId,
          })
          .then((result) => {
            if (result.data.code === 200) {
              if (result.data.data && result.data.data.status === 3) {
                self.remark = result.data.data.text;
                self.remarkStatus = true;
                self.id = result.data.data.id;
              } else if (
                result.data.data &&
                (result.data.data.status === 1 || result.data.data.status === 2)
              ) {
                uni.showModal({
                  showCancel: false,
                  content:
                    result.data.data.status === 1
                      ? "该商品审核资料已通过，不可重复提交资料"
                      : result.data.data.status === 2
                      ? "该商品审核资料处于待审核状态，不可重复提交资料"
                      : "请联系管理员",
                  success: function (k) {
                    if (k.confirm) {
                      uni.navigateBack();
                    }
                  },
                });
              }
            }
          });
      });
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scopelang="scss">
/deep/ .u-collapse-title {
  color: #ff3b30;
  font-size: 24rpx;
}
.collapse-item {
  color: #666;
  font-size: 24rpx;
  padding-bottom: 30rpx;
}
.quzw {
  width: 638rpx;
  height: 638rpx;
  position: relative;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
}
.borsrs {
  width: 640rpx;
  height: 640rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.optionsAbs {
  position: absolute;
  z-index: 99;
  top: 10rpx;
  right: 10rpx;
}
.dis_stys {
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
}
.handCenter {
  background: #f7f7f7;
  border: 2rpx solid #eeeeee;
  border-radius: 24rpx;
}
.headerSDels {
  height: 58rpx;
  padding: 0rpx 24rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.listBox {
  margin: 24rpx 32rpx 0rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx;
  background-color: #fff;
  overflow: hidden;
}
.imgBoxs {
  width: 156rpx;
  height: 203rpx;
}
.imgBoxs2 {
  width: 171rpx;
  height: 108rpx;
}
.submit_btn {
  width: 526rpx;
  height: 80rpx;
  background: #007aff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  margin: 30rpx auto;
}
.picker {
  text-align: right;
}
input {
  text-align: right;
}
.bodyBox {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
}
.topBox {
  height: 80rpx;
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
}
</style>