zc_saas_h5/pages2/order/index.vue

<template>
  <view>
    <nav-bar title="我的订单"></nav-bar>
    <view
      style="
        width: 100%;
        text-align: center;
        position: fixed;
        height: 96rpx;
        z-index: 999;
      "
    >
      <u-tabs
        :list="list"
        sticky
        :current="current"
        @change="change"
        active-color="#007AFF"
        :offset="[-1, 0]"
      ></u-tabs>
    </view>
    <view style="padding: 96rpx 8rpx 130rpx">
      <view v-if="!order.length" class="noData">您暂无相关订单哦~</view>
      <template v-else>
        <view v-for="(item, index) in order" :key="index" class="lisChild">
          <view class="item">
            <view class="header" @click="openPopup(index)">
              <view>订单编号：{{ item.orderSn }}</view>
              <view>{{ $method.timestampToTime(item.createTime) }}</view>
            </view>
            <u-line color="#D6D6DB" />
            <view v-if="current == 3">
              <view class="body">
                <view class="body__content">
                  <image
                    class="goods-img"
                    :src="$method.splitImgHost(item.coverUrl)"
                  ></image>
                  <view class="goods-text">
                    <view class="goods-name">{{ item.goodsName }}</view>
                    <!-- <view class="goods-price">¥ {{ items.goodsRealPrice }}</view> -->
                  </view>
                </view>
              </view>
            </view>
            <view v-else>
              <view
                class="body"
                v-for="(items, indexs) in item.orderGoodsList"
                :key="indexs"
                @click="goCourse(items, item.orderStatus)"
              >
                <view class="body__content">
                  <image
                    class="goods-img"
                    :src="$method.splitImgHost(items.coverUrl)"
                  ></image>
                  <view class="goods-text">
                    <view class="goods-name">{{ items.goodsName }}</view>
                    <view v-if="item.orderFrom !== 6" class="goods-price"
                      >¥ {{ items.goodsRealPrice }}</view
                    >
                  </view>
                </view>
                <view
                  style="
                    display: flex;
                    flex-direction: row-reverse;
                    padding: 10rpx 0;
                  "
                >
                  <view
                    v-if="
                      items.refundStatus === 0 &&
                      (item.orderFrom === 2 || item.orderFrom === 3) &&
                      (item.orderStatus === 1 ||
                        item.orderStatus === 2 ||
                        item.orderStatus === 3) &&
                      (items.goodsType == '1' ||
                        items.goodsType == '2' ||
                        items.goodsType == '6') &&
                      items.goodsPrice > 0
                    "
                    class="btn2"
                    @click.stop="handelRefund(item.orderSn, items.goodsId)"
                    >申请退款</view
                  >
                  <!-- <view v-if="items.refundStatus == 2"> 已退款</view> -->
                  <view v-if="items.periodStatus !== null">{{
                    [
                      "复审不通过",
                      "初审不通过",
                      "待审核",
                      "初审通过",
                      "复审通过待退款",
                      "已退款",
                    ][items.periodStatus + 2]
                  }}</view>
                </view>
              </view>
            </view>

            <u-line color="#D6D6DB" />
            <view class="footer" v-if="current == 3">
              <view>
                <text style="color: #999; font-size: 24rpx; margin-right: 8rpx"
                  >退款金额</text
                >
                <text
                  style="color: #ff2d55; font-size: 30rpx; font-weight: bold"
                  >￥{{ item.refundFee }}</text
                >
              </view>
            </view>
            <view class="footer" v-else>
              <view>
                <text style="color: #999; font-size: 24rpx; margin-right: 8rpx"
                  >共{{ item.orderGoodsList.length }}项</text
                >
                <!-- 业务系统下单的需要隐藏价格 -->
                <!-- 订单来源：1业务员普通单，2祥粤云学堂小程序，3祥粤云学堂网站，4祥粤e管证小程序，5业务员录单，6业务系统下单 -->
                <text v-if="item.orderFrom !== 6">
                  <text style="color: #333; font-size: 30rpx; font-weight: bold"
                    >合计</text
                  >
                  <text
                    style="color: #ff2d55; font-size: 30rpx; font-weight: bold"
                    >￥{{ item.payPrice }}</text
                  >
                </text>
              </view>
              <view style="display: flex; align-items: center">
                <view
                  class="btn2"
                  v-if="
                    item.orderStatus === 0 &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  "
                  @click="resumeOrder(item)"
                  >继续支付</view
                >
                <!-- <view class="btn2" v-if="item.orderStatus === -1 || item.orderStatus === -2" @click="againBuy(item)">重新购买</view> -->
                <view
                  class="btn1"
                  v-if="
                    (item.orderStatus === -1 || item.orderStatus === -2) &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  "
                  @click="delOrder(item)"
                  >删除订单</view
                >
                <view
                  class="btn1"
                  @click="closeOrder(item)"
                  v-if="
                    item.orderStatus === 0 &&
                    (item.orderFrom === 2 || item.orderFrom === 3)
                  "
                  >取消订单</view
                >
              </view>
            </view>
          </view>
        </view>
      </template>

      <template v-if="current == 1 && order.length">
        <view class="apply_btn">
          <view class="apply-invoice" @click="goInvoice">发票申请</view>
        </view>
      </template>
    </view>
    <!-- 退款弹窗 -->
    <u-popup
      v-model="show"
      :mask-close-able="false"
      closeable
      mode="center"
      width="80%"
      border-radius="24"
    >
      <view class="rf-popup-main">
        <view class="title">提示</view>
        <view class="tip">确认要退款吗</view>
        <u-input
          v-model="refundForm.applyReason"
          placeholder-style="color:#999999"
          type="textarea"
          placeholder="请输入退款原因"
        />
        <u-button type="primary" style="border-radius: 60rpx" @click="refund"
          >确定</u-button
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      list: [
        {
          name: "待支付",
          count: 0,
        },
        {
          name: "已支付",
          count: 0,
        },
        {
          name: "已取消",
          count: 0,
        },
        {
          name: "已退款",
          count: 0,
        },
      ],
      current: 0,
      order: [],
      formData: {
        status: "0,1",
        pageNum: 1,
        pageSize: 10,
      },
      pageNum1: 0,
      pageNum2: 0,
      pageNum3: 0,
      pageNum4: 0,
      refundForm: {},
      show: false,
      value: "",
    };
  },
  // onPullDownRefresh() {},
  onLoad(option) {
    this.current = +option.current || 0;
    this.getOrderList();
    this.getOrderNum();
  },
  onShow() {
    /* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
  },
  //分享功能
  onShareAppMessage(res) {
    var self = this;
    return {
      title: "中正",
      path:
        `/pages/index/index?inviteCode=` + userInfo == null
          ? ""
          : userInfo.userAccount,
    };
  },
  onReachBottom() {
    this.formData.pageNum++;
    this.getFY();
  },
  methods: {
    getOrderNum() {
      this.$api
        .getorderlists({
          status: "0,1",
          pageNum: 1,
          pageSize: 1,
          orderStatus: "0",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.list[0].count = res.data.total;
          }
        });

      this.$api
        .getorderlists({
          status: "0,1",
          pageNum: 1,
          pageSize: 1,
          orderStatus: "1,2,3,4",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.list[1].count = res.data.total;
          }
        });

      this.$api
        .getorderlists({
          status: "0,1",
          pageNum: 1,
          pageSize: 1,
          orderStatus: "-1,-2",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.list[2].count = res.data.total;
          }
        });
    },
    /**
     * 跳转发票申请页面
     */
    goInvoice() {
      uni.navigateTo({
        url: `/pages2/invoice/index`,
      });
    },
    confirm() {},
    handelRefund(orderSn, goodsId) {
      this.refundForm = { orderSn: orderSn, goodsId: goodsId, applyReason: "" };
      this.show = true;
    },
    refund() {
      this.$api.refundSmallOrder(this.refundForm).then((res) => {
        this.show = false;
        if (res.data.code == 200) {
          this.$method.showToast(res.data.msg);
          this.getOrderList();
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.msg,
          });
        }
      });
    },
    /**
     * 跳转课程
     */
    goCourse(item, orderStatus) {
      // if(orderStatus == 1 || orderStatus == 2) {
      // 	console.log(item)
      // 	if(item.goodsType == 1) { //网课
      // 		uni.navigateTo({
      // 			url:'/pages2/wd/course?gid='+item.gradeId+'&id='+item.goodsId
      // 		})
      // 	} else if(item.goodsType == 2) { //题库
      // 		uni.navigateTo({
      // 			url:'/pages2/bank/question_detail?id='+item.goodsId
      // 		})
      // 	}
      // }
    },
    resumeOrder(item) {
      let self = this;
      // #ifdef MP-WEIXIN
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          console.log(loginRes, 69);
          self.getOpenid(loginRes.code, item);
        },
      });
      // #endif

      // #ifdef H5
      // 在首页已经请求过接口/gzh_login 提交code了
      this.resumeOrderPay(item);
      // #endif
    },
    getOpenid(code, item) {
      let self = this;
      this.$api.wxOpenid({ code: code }).then((res) => {
        if (res.data.code == 200) {
          self.resumeOrderPay(item);
        }
      });
    },
    resumeOrderPay(item) {
      let data = { orderSn: item.orderSn };
      // #ifdef MP-WEIXIN
      this.$api.resumeSmallOrder(data).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          uni.requestPayment({
            provider: data.provider,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.sign,
            timeStamp: String(data.timeStamp),
            success: function (res) {
              uni.redirectTo({
                url: "/pages2/order/confirm_success?sn=" + data.orderSn,
              });
              console.log("success:" + JSON.stringify(res));
            },
            fail: function (err) {
              console.log("fail:" + JSON.stringify(err));
            },
          });
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
          });
        }
      });
      // #endif

      // #ifdef H5
      data["url"] = location.href;
      this.$api.resumePlaceGzhOrder(data).then((res) => {
        console.log(res, "继续支付res");
        if (res.data.code == 200) {
          this.h5_wxpay(res.data.data);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
          });
        }
      });
      // #endif
    },
    h5_wxpay(data) {
      console.log("调起支付状态1", data);
      let self = this;
      function onBridgeReady() {
        // 加载框
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.package,
            signType: data.signType, // 微信签名方式：
            paySign: data.paySign, // 微信签名
          },
          function (res) {
            // 判断支付状态
            console.log("支付状态", res, "this:", this, self);
            if (res.err_msg === "get_brand_wcpay_request:ok") {
              self.$u.toast("支付成功");
              uni.redirectTo({
                url: "/pages2/order/confirm_success?sn=" + data.orderSn,
              });
            } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
              self.$u.toast("取消支付");
            } else {
              self.$u.toast("支付失败");
            }
          }
        );
      }
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    openPopup() {},
    //删除订单
    delOrder(item) {
      var self = this;
      uni.showModal({
        content: "确定要删除该订单吗",
        success: function (res) {
          if (res.confirm) {
            self.$api
              .eddOrder({
                orderId: item.orderId,
                status: -1,
              })
              .then((res) => {
                if (res.data.code === 200) {
                  self.$method.showToast("订单删除成功");
                  self.getOrderList();
                }
              });
          }
        },
      });
    },
    //取消订单
    closeOrder(item) {
      var self = this;
      uni.showModal({
        content: "确定要取消该订单吗",
        success: function (res) {
          if (res.confirm) {
            self.$api
              .eddOrder({
                orderId: item.orderId,
                orderStatus: -1,
              })
              .then((res) => {
                if (res.data.code === 200) {
                  self.$method.showToast("订单取消成功", "success");
                  self.getOrderList();
                }
              });
          }
        },
      });
    },
    getFY() {
      if (this.current === 0) {
        this.formData.orderStatus = "0";
        if (this.order.length >= this.pageNum1) {
          return;
        }
      }
      if (this.current === 1) {
        this.formData.orderStatus = "1,2,3,4";
        if (this.order.length >= this.pageNum2) {
          return;
        }
      }
      if (this.current === 2) {
        this.formData.orderStatus = "-1,-2";
        if (this.order.length >= this.pageNum3) {
          return;
        }
      }

      if (this.current == 3) {
        if (this.order.length >= this.pageNum4) {
          return;
        }

        this.formData.orderStatus = "";
        this.$api.orderRefundList(this.formData).then((res) => {
          if (res.data.code == 200) {
            this.order = this.order.concat(res.data.rows);
          }
        });
        return;
      }
      this.$api.getorderlists(this.formData).then((res) => {
        if (res.data.code === 200) {
          if (res.data.rows.length) {
            this.order = this.order.concat(res.data.rows);
          }
        }
      });
    },
    //获取订单
    getOrderList() {
      this.formData.pageNum = 1;
      if (this.current === 0) {
        this.formData.orderStatus = "0";
      }
      if (this.current === 1) {
        this.formData.orderStatus = "1,2,3,4";
      }
      if (this.current === 2) {
        this.formData.orderStatus = "-1,-2";
      }

      this.order = [];
      this.$api.getorderlists(this.formData).then((res) => {
        if (res.data.code === 200) {
          if (this.current === 0) {
            this.list[0].count = res.data.total;
            this.pageNum1 = res.data.total;
          }
          if (this.current === 1) {
            this.list[1].count = res.data.total;
            this.pageNum2 = res.data.total;
          }
          if (this.current === 2) {
            this.list[2].count = res.data.total;
            this.pageNum3 = res.data.total;
          }
          this.order = res.data.rows;
          console.log("订单列表this.order", this.order);
        }
      });
    },
    orderRefundList() {
      this.order = [];
      this.formData.pageNum = 1;
      this.formData.orderStatus = "";
      this.$api.orderRefundList(this.formData).then((res) => {
        if (res.data.code == 200) {
          this.order = res.data.rows;
        }
      });
    },
    change(index) {
      if (this.current === index) {
        return;
      }
      this.current = index;
      console.log("this.current", this.current);
      if (this.current == 3) {
        //退款订单
        this.formData.status = "";
        this.orderRefundList();
      } else {
        //其他订单

        this.formData.status = "0,1";
        this.getOrderList();
      }

      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
  },
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.lisChild {
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  background: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding: 0 15rpx;
    color: #666666;
    font-size: 24rpx;
  }

  .body {
    padding: 16rpx;

    &__content {
      display: flex;
      justify-content: space-between;

      .goods-img {
        height: 156rpx;
        width: 278rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }

      .goods-text {
        margin-left: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;

        .goods-name {
          color: #333333;
          font-size: 30rpx;
          font-weight: bold;
          flex: 1;
        }

        .goods-price {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ff2d55;
          display: flex;
          flex-direction: row-reverse;
        }
      }
    }

    .btn2 {
      width: 144rpx;
      height: 46rpx;
      background: #ffffff;
      border: 2rpx solid #007aff;
      border-radius: 16rpx;
      text-align: center;
      line-height: 48rpx;
      color: #007aff;
      margin: 0 8rpx;
    }
  }

  .footer {
    padding: 0 24rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .btn2 {
      width: 144rpx;
      height: 46rpx;
      background: #ffffff;
      border: 2rpx solid #007aff;
      border-radius: 16rpx;
      text-align: center;
      line-height: 48rpx;
      color: #007aff;
      margin: 0 8rpx;
    }
    .btn1 {
      width: 144rpx;
      height: 48rpx;
      background: #ffffff;
      border: 2rpx solid #999999;
      border-radius: 16rpx;
      text-align: center;
      line-height: 48rpx;
      color: #999999;
      margin: 0 8rpx;
    }
  }
}
.lisChild:last-child {
  margin-bottom: 34rpx;
}
.noData {
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin: 160rpx 0;
}
.apply_btn {
  width: 100%;
  height: 124rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0rpx;
}
.apply-invoice {
  margin: 0 auto;
  width: 686rpx;
  height: 84rpx;
  line-height: 84rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  background: #0080ff;
  margin-top: 20rpx;
  border-radius: 120rpx;
}

.bottomBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 98rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
}
.rf-popup-main {
  text-align: center;
  padding: 40rpx;
  .title {
    font-size: 40rpx;
    font-weight: 600;
  }
  .tip {
    margin: 30rpx 0 40rpx;
    font-size: 32rpx;
  }
  .u-input {
    border-radius: 20rpx;
    background: #eee;
    padding-left: 20rpx !important;
    margin-bottom: 40rpx;
  }
  .u-button {
    border-radius: 60rpx !important;
  }
}
</style>