artwork-repair-h5/pages/repair/index.vue

<template>
  <view class="container">
    <u-notify ref="uNotify" message="Hi uView"></u-notify>
    <!-- <view class="sk" v-if="loading">
      <u-skeleton
        rows="1"
        :title="false"
        loading
        :rowsHeight="120"
      ></u-skeleton>
      <u-skeleton
        style="margin-top: 20rpx"
        rows="1"
        :title="false"
        loading
        :rowsHeight="720"
      ></u-skeleton>
    </view> -->
    <view class="detail">
      <view class="artwork">
        <view class="info">
          <view class="left">
            <view class="title">画作名称</view>
            <view class="name">{{ detailData.ArtworkName }}</view>
          </view>
          <view class="artwork-image">
            <u-album
            
            :urls="[detailData.PreviewImg]"
            singleSize="100"
          ></u-album>
          </view>
          
        </view>
        <u-collapse>
          <u-collapse-item title="" name="Docs guide">
            <view class="list">
              <view class="item">
                <view class="sub1">商城编号</view>
                <view class="sub2">{{ detailData.Tfnum }}</view>
              </view>
              <view class="item">
                <view class="sub1">画家姓名</view>
                <view class="sub2">{{ detailData.ArtistName }}</view>
              </view>
              <view class="item">
                <view class="sub1">画作类型</view>
                <view class="sub2">{{
                  artworkTyoeDict[detailData.ArtworkType]
                }}</view>
              </view>
            </view>
            <view class="list">
              <view class="item">
                <view class="sub1">长度</view>
                <view class="sub2">{{ detailData.Length }}</view>
              </view>
              <view class="item">
                <view class="sub1">宽度</view>
                <view class="sub2">{{ detailData.Width }}</view>
              </view>
              <view class="item">
                <view class="sub1">平尺数</view>
                <view class="sub2">{{ detailData.Ruler }}</view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>
      <view class="repair">
        <u-tabs
          @change="changeTab"
          :list="tabList"
          :lineColor="'#46645F'"
          :inactiveStyle="{
            color: '#666666',
          }"
          :activeStyle="{
            color: '#000000',
            fontSize: '32rpx',
            fontWeight: 'bold',
          }"
        ></u-tabs>
        <view v-if="actName === '破损'">
          <view style="margin-top: 30rpx; text-align: center">
            <u-upload
              :fileList="fileList"
              @delete="deletePic"
              @afterRead="afterRead"
              accept="image"
              name="3"
              width="100"
              height="100"
              multiple
              :previewFullImage="true"
            ></u-upload>
          </view>
          <view class="tips">
            备注:
            <u--textarea
              v-model="DamagedRemark"
              placeholder="请输入内容"
            ></u--textarea>
          </view>
        </view>
        <view v-else>
          <view style="margin-top: 30rpx; text-align: center">
            <u-upload
              :fileList="repFileList"
              @delete="repDeletePic"
              accept="image"
              @afterRead="repAfterRead"
              name="3"
              width="100"
              height="100"
              multiple
              :previewFullImage="true"
            ></u-upload>
          </view>
          <view class="tips">
            备注:
            <u--textarea
              v-model="RepairedRemark"
              placeholder="请输入内容"
            ></u--textarea>
          </view>
        </view>
   <view style="display: flex;align-items: center;margin-top: 120rpx;">
    <u-button  style="width: 130rpx;margin: 0;color: #fff;  height: 90rpx;background: #CDCDCD;" @click="goback"
          >返回</u-button
        >
        <u-button
          v-if="actName === '破损' && !hasSubmit"
          type="primary"
          :loading="loading"
          class="search"
          @click="goSubmit(1)"
          >提交</u-button
        >
        <u-button
          v-if="actName === '修复' && !hasSubmitrepair"
          type="primary"
          :loading="loading"
          class="search"
          @click="goSubmit(2)"
          >提交</u-button
        >
        <u-button
          v-if="actName === '破损' && hasSubmit"
          type="primary"
          style="background: #cecece"
          class="search"
          >已提交</u-button
        >
        <u-button
          v-if="actName === '修复' && hasSubmitrepair"
          type="primary"
          style="background: #cecece"
          class="search"
          >已提交</u-button
        >
   </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasSubmit: false,
      hasSubmitrepair: false,
      detailData: {},
      tabList: [
        {
          name: "破损",
        },
        {
          name: "修复",
        },
      ],
      fileList: [],
      DamagedRemark: "",
      RepairedRemark: "",
      repFileList: [],
      actName: "破损",
      loading: false,
      artworkTyoeDict: {
        1: "优秀画作",
        2: "赠画",
        3: "卷轴",
        4: "普通画作",
      },
    };
  },

  methods: {
    changeTab(e) {
      this.actName = e.name;
    },
    goback() {
      this.$router.push({
          path: "/",
        });
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        const Authorization = uni.getStorageSync("repari-token");
        const userId = uni.getStorageSync("repari-refresh-token").ID;
        let a = uni.uploadFile({
          url: this.$baseUrl + "/upload/img",
          filePath: url,
          name: "file",
          formData: {
            type: "image",
            source: "user",
            mask: userId,
          },
          header: {
            Authorization,
          },
          success: (res) => {
            console.log(res, "res");
            res.data = JSON.parse(res.data);
            resolve(res.data.data.ori_url);
            this.uploadFlag = true;
          },
        });
      });
    },
    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1);
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        console.log(result, "result");
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    // 删除图片
    repDeletePic(event) {
      this[`repFileList`].splice(event.index, 1);
    },
    async repAfterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`repFileList`].length;
      lists.map((item) => {
        this[`repFileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        console.log(result, "result");
        let item = this[`repFileList`][fileListLen];
        this[`repFileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    // 提交
    async goSubmit(val) {
      // 如果图片和备注都为空，不允许提交
      if (
        this.fileList < 1 &&
        this.DamagedRemark == "" &&
        this.repFileList < 1 &&
        this.RepairedRemark == ""
      ) {
        this.$refs.uNotify.show({
          top: 10,
          type: "error",
          message: "请填写破损或修复信息",
          duration: 1000 * 3,
          fontSize: 20,
          safeAreaInsetTop: true,
        });
        return;
      }
      this.loading = true;
      let data = {
        RepairID: this.detailData.RepairID,
        DamagedImgs: this.fileList.map((item) => item.url),
        DamagedRemark: this.DamagedRemark,
        RepairedImgs: this.repFileList.map((item) => item.url),
        RepairedRemark: this.RepairedRemark,
        ArtworkUuid: this.detailData.ArtworkUuid,
        CreateSource: 2,
        RepairType: val,
      };
      let res = await this.$api.management.update(data);
      if (res.status == 0) {
        this.$refs.uNotify.show({
          top: 10,
          type: "success",
          message: "提交成功",
          duration: 1000 * 3,
          fontSize: 20,
          safeAreaInsetTop: true,
        });
        this.loading = false;
        if (val == 1) {
          this.hasSubmit = true;
        } else {
          this.hasSubmitrepair = true;
        }
      } else {
        this.loading = false;
        this.$refs.uNotify.show({
          top: 10,
          type: "error",
          message: res.msg,
          duration: 1000 * 3,
          fontSize: 20,
          safeAreaInsetTop: true,
        });
      }
    },
  },

  onLoad(item) {
    this.detailData = JSON.parse(item.detailData);
    this.fileList = this.detailData.DamagedImgs
      ? this.detailData.DamagedImgs.map((item) => {
          return {
            url: item,
            status: "success",
            message: "",
          };
        })
      : [];
    this.repFileList = this.detailData.RepairedImgs
      ? this.detailData.RepairedImgs.map((item) => {
          return {
            url: item,
            status: "success",
            message: "",
          };
        })
      : [];
    this.DamagedRemark = this.detailData.DamagedRemark;
    this.RepairedRemark = this.detailData.RepairedRemark;
  },
};
</script>

<style lang="scss">
page {
  background-size: auto 100%;
  background-attachment: fixed;
  height: 100vh;
  background-image: url("../../static/backg.png");
}
/deep/ .u-skeleton {
  flex: none;
  width: 100%;
}
/deep/ .u-skeleton__wrapper__content__rows {
  width: 100% !important;
}
/deep/ .u-cell__body {
  justify-content: center;
  border: none;
}
/deep/ .u-cell__body__content {
  display: none;
}
/deep/ .u-line {
  display: none;
}
.container {
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
  padding: 0rpx 40rpx 0 40rpx;
  .sk {
    padding-top: 60rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .detail {
    padding-top: 60rpx;
    display: flex;
    flex-direction: column;
  }
  .artwork {
    min-height: 240rpx;
    border-radius: 8rpx;
    background-color: #ffffff;
  }
  .info {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .title {
    font-size: 32rpx;
    color: #000000;
    font-weight: bold;
  }
  .name {
    font-size: 32rpx;
    color: #666666;
    font-weight: bold;
    text-align: center;
  }
  .list {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    .sub2 {
      font-size: 32rpx;
      color: #666666;
      margin-top: 10rpx;
      // 文字超出部分换行
      white-space: normal;
      word-wrap: break-word;
      width: 200rpx;
    }
    .sub1 {
      font-size: 32rpx;
      color: #000000;
    }
  }

  .artwork-image {
    width: 380rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180rpx;
    border-radius: 8rpx;
    uni-img {
      width: 380rpx;
      height: 180rpx;
      border-radius: 8rpx;
    }
  }
  .repair {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #ffffff;
    min-height: 1200rpx;
  }
  .tips {
    // 文字在左边，输入框在右边
    display: flex;
    justify-content: space-between;

    margin-top: 30rpx;
    .u-textarea {
      margin-left: 30rpx;
      font-size: 32rpx;
      color: #000000;
      padding: 20rpx;
    }
  }
  .search {
    margin-left: 20rpx;
    width: 60%;
    border: 0;
    font-size: 34rpx;
    border-radius: 10rpx;
    height: 90rpx;
    background-image: linear-gradient(to right, #698883, #45645f);
  }
}
</style>