kailin_mp/pages/orders/receipt.vue

<template>
  <view>
    <view class="order_info">
      <view class="order_title">
        <view class="business_name">{{ orderInfo.business_name }}</view>
      </view>
      <view class="product_list">
        <view class="product_item" v-for="(product_info, k) in orderInfo.product_list" :key="k">
          <image class="product_img" :src="product_info.product_thumb" mode=""></image>
          <view class="product_info">
            <view class="product_name"> <text v-if="product_info.is_rebate">【赠】</text> {{ product_info.product_name }} </view>
            <view class="product_spec">
              {{ product_info.product_spec }}
            </view>
          </view>
          <view class="buy_num"> x{{ product_info.buy_num }} </view>
        </view>
      </view>
    </view>
    <view class="upload_box">
      <view class="image_box" @click="chooseImage()">
        <image class="upload_image" :src="localImage" v-if="localImage"></image>
        <text class="upload_text" v-if="!localImage">请点此处上传图片</text>
      </view>
    </view>
    <view class="info_alter">
      <view class=""> 请谨慎上传回执，上传后无法修改 </view>
      <view class=""> 上传后有机会获得积分 </view>
    </view>
    <view class="btn_box">
      <button class="upload_btn" v-if="localImage" @click="toApply()">提交</button>
      <button class="upload_btn disable" v-if="!localImage">提交</button>
    </view>
    <uni-popup ref="sharePopup" type="center" :mask-click="false">
      <view class="share_info">
        <view class="state_icon">
          <uni-icons type="checkbox" color="#07C160"></uni-icons>
        </view>
        <view class="state_text">图片上传成功</view>
        <button class="share_btn" open-type="share">
          <uni-icons type="weixin" color="#FFFFFF"></uni-icons>
          <text>立即分享到微信群</text>
        </button>
        <view class="info_text">工作人员审核通过后将发放积分</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order_id: 0,
      localImage: "",
      orderInfo: {},
      shareInfo: {
        title: "我已经完成一笔订单，你也快来吧",
        path: "/pages/index/index",
        imageUrl: "",
      },
    };
  },
  onLoad(param) {
    this.order_id = param.order_id;
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 判断订单ID
    if (this.order_id <= 0) {
      uni.showModal({
        content: "未知的活动ID",
        showCancel: false,
      });
      return;
    }
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request("api/orders/get_item", { id: this.order_id }).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == "success") {
        this.orderInfo = re.data;
      } else {
        if (re.code != "no_login") {
          uni.showModal({
            content: re.msg,
            showCancel: false,
          });
        }
      }
    });
  },
  onShareAppMessage(obj) {
    return this.shareInfo;
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: (chooseImageRes) => {
          let tempFilePaths = chooseImageRes.tempFilePaths;
          this.localImage = tempFilePaths[0];
        },
      });
    },
    toApply() {
      // 判断订单ID
      if (this.order_id <= 0) {
        uni.showModal({
          content: "未知的活动ID",
          showCancel: false,
        });
        return;
      }
      // 判断订单ID
      if (!this.localImage) {
        uni.showModal({
          content: "请上传图片",
          showCancel: false,
        });
        return;
      }
      // 没有数据的话，或者请求中，不允许刷新
      if (this.isReqing) return;
      // 请求中
      uni.showLoading();
      // 设置请求中
      this.isReqing = true;
      // 请求列表
      this.$http.fileupload("api/orders_receipt/apply", this.localImage, { order_id: this.order_id }).then((re) => {
        // 设置非请求中
        uni.hideLoading();
        // 成功结果
        if (re.code == "success") {
          // 赋值
          this.shareInfo = re.data.share_info;
          // 弹出提示
          this.$refs.sharePopup.open("center");
        } else {
          if (re.code != "no_login") {
            // 设置请求中
            this.isReqing = false;
            // 允许请求
            uni.showModal({
              content: re.msg,
              showCancel: false,
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.order_info {
  display: block;
  background: #ffffff;
  margin: 0rpx auto;
  padding: 0rpx 35rpx;
  margin-bottom: 10rpx;
  .order_title {
    width: 100%;
    height: 60rpx;
    display: block;
    overflow: hidden;
    line-height: 60rpx;
    .business_name {
      float: left;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      .business_icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 10rpx;
      }
    }
    .order_status {
      float: right;
      color: #999999;
      font-size: 24rpx;
    }
  }
  .product_list {
    display: block;
    overflow: hidden;
    margin: 15rpx auto;
    .product_item {
      display: block;
      height: 100rpx;
      overflow: hidden;
      .product_img {
        float: left;
        width: 80rpx;
        height: 80rpx;
        display: block;
        margin-top: 10rpx;
        margin-right: 30rpx;
      }
      .product_info {
        float: left;
        width: 480rpx;
        height: 100rpx;
        display: block;
        overflow: hidden;
        .product_name {
          display: block;
          height: 60rpx;
          display: block;
          font-size: 28rpx;
          line-height: 60rpx;
          overflow: hidden;
        }
        .product_spec {
          color: #999999;
          height: 40rpx;
          display: block;
          font-size: 24rpx;
          line-height: 40rpx;
          overflow: hidden;
        }
      }
      .buy_num {
        float: right;
        height: 100rpx;
        color: #999999;
        font-size: 26rpx;
        text-align: right;
        position: relative;
        line-height: 100rpx;
      }
    }
  }
  .product_list.active {
    height: auto !important;
  }
}
.upload_box {
  display: block;
  width: 750rpx;
  height: 410rpx;
  margin-top: 20rpx;
  text-align: center;
  padding: 20rpx 0rpx;
  background-color: #ffffff;
  .image_box {
    width: 400rpx;
    height: 400rpx;
    display: block;
    color: #999999;
    font-size: 28rpx;
    margin: 0rpx auto;
    line-height: 400rpx;
    border: 2rpx solid #999999;
    .upload_image {
      width: 400rpx;
      height: 400rpx;
    }
  }
}
.info_alter {
  // color: #E03519;
  display: block;
  font-size: 26rpx;
  overflow: hidden;
  line-height: 60rpx;
  text-align: center;
  margin: 0rpx auto;
  background-color: #ffffff;
}
.btn_box {
  display: block;
  overflow: hidden;
  margin: 20rpx auto;
  .upload_btn {
    color: #ffffff;
    display: block;
    width: 680rpx;
    height: 80rpx;
    margin: 0 auto;
    font-size: 28rpx;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    border-radius: 10rpx;
    background-color: #07c160;
  }
  .upload_btn.disable {
    background-color: #999999;
  }
  .upload_btn::after {
    border: none;
  }
}
.share_info {
  width: 600rpx;
  height: 600rpx;
  background-color: #ffffff;
  .state_icon {
    width: 240rpx;
    height: 240rpx;
    display: block;
    margin: 20rpx auto;
    text-align: center;
    font-size: 240rpx !important;
    .uni-icons {
      font-size: 240rpx !important;
    }
  }
  .state_text {
    height: 80rpx;
    display: block;
    font-size: 32rpx;
    margin: 20rpx auto;
    line-height: 80rpx;
    text-align: center;
  }
  .share_btn {
    color: #ffffff;
    display: block;
    width: 560rpx;
    height: 80rpx;
    font-size: 30rpx;
    margin: 20rpx auto;
    line-height: 80rpx;
    padding: 0rpx 0rpx;
    border-radius: 10rpx;
    background-color: #07c160;
    .uni-icons {
      margin-right: 20rpx;
      font-size: 36rpx !important;
    }
  }
  .info_text {
    height: 60rpx;
    display: block;
    font-size: 26rpx;
    margin-top: 20rpx;
    line-height: 60rpx;
    text-align: center;
  }
}
</style>