fanxing-shop/pages/order/index.vue

<!-- 我的订单 -->
<template>
  <view class="order">
    <view class="tabs">
      <u-tabs :list="tabLists" lineWidth="40" :current="current" lineHeight="8" :lineColor="`url(${lineBg}) 100% 100%`"
        :activeStyle="{
          color: '#0D121A',
          fontSize: '32rpx',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }" :inactiveStyle="{
          color: '#9EA3B1',
          fontSize: '28rpx',
          transform: 'scale(1)'
        }" itemStyle="padding-left: 18px; padding-right: 18px; height: 56px;" @click="tabsChange">
      </u-tabs>
    </view>
    <view class="content">
      <mescroll-body :height="`calc(100% - 24rpx)`" class="custom-height" ref="mescrollRef" @down="downCallback"
        :up="upOption" @up="upCallback">
        <view class="order-list" v-if="arrList && arrList.length">
          <view class="tab-content" v-for="(item, index) in arrList" :key="index" @click="goOrderDetail(item)">
            <view class="order-top flex-start">
              <text class="name">{{ item.packageName }}({{ item.quantity }}条视频)</text>
              <text v-if="item.paymentStatus === 'CANCELLED'" class="status cancel">{{
                item.paymentStatus | orderStatus
              }}
              </text>
              <text v-else-if="item.paymentStatus === 'REFUNDED'" class="status cancel">
                {{ item.paymentStatus | orderStatus }}
              </text>
              <text v-else class="status color">{{ item.paymentStatus | orderStatus }}</text>
            </view>
            <view class="order-middle flex-between-no-center">
              <view class="order-middle-left">
                <view class="fs28 mt-4 fw400" v-for="(content, contentIndex) in item.packageContents"
                  :key="contentIndex">{{ content }}
                </view>
              </view>
              <view class="order-middle-right flex-start" v-if="item.paymentStatus === 'WAIT_PAYMENT'">
                <view class="right-label fs24">应付款：</view>
                <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
              </view>
              <view class="order-middle-right" v-if="item.paymentStatus === 'SHOOTING'">
                <view class="progress-bar">
                  <view class="progress" :style="{ width: (item.completedQuantity / item.quantity) * 100 + '%' }">
                    {{ item.completedQuantity }}/{{ item.quantity }}
                  </view>
                </view>
                <!--                <view class="progress-container">{{item.completedQuantity}}/{{item.quantity}}</view>-->
              </view>
              <view class="order-middle-right cancel flex-start" v-if="item.paymentStatus === 'REFUNDED'">
                <view class="right-label fs24 ">已退款</view>
                <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
              </view>
            </view>
            <view v-if="item.paymentStatus === 'WAIT_PAYMENT'" class="order-bottom flex-between">
              <view class="order-bottom-left">
              </view>
              <view class="order-bottom-right flex">
                <view class="btn btn1 p2" @click.stop="cancelOrder(item.orderId)">取消</view>
                <view class="btn btn2 p1" @click.stop="submitOrder(item)">支付</view>
                <!-- <view class="btn3">寄样</view> -->
              </view>
            </view>
            <view v-else class="order-bottom flex-between">
              <view class="flex-start">
                <view class="fs24">实付款</view>
                <view class="fs28 fw ml-6"> ¥{{ item.totalAmount }}</view>
              </view>
              <view class="order-bottom-right flex">
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_PAYMENT'"
                  @click.stop="cancelOrder(item.orderId)">
                  取消
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_SEND'"
                  @click.stop="cancelOrder(item.orderId)">
                  取消
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_ORDER'"
                  @click.stop="cancelOrder(item.orderId)">
                  取消
                </view>
                <!-- <view v-if="item.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6 btn-theme">寄样</view> -->
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'SHOOTING'"
                  @click.stop="applyAfterSales(item.orderId)">申请售后
                </view>
                <!-- <view class="btn btn1 p2" v-if="item.paymentStatus==='DELIVERED'"
                      @click.stop="aftermarketOrder(item.orderId)">申请售后
                </view> -->
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'WAIT_CHECK'"
                  @click.stop="applyAfterSales(item.orderId)">申请售后
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus === 'AFTER_SALE'"
                  @click.stopk="cancelAftermarketOrder(item.orderId)">撤回申请
                </view>
                <view class="btn btn1 p2 ml-6 btn-theme" v-if="item.paymentStatus === 'WAIT_CHECK'"
                  @click.stop="checkOrder(item.orderId)">确认验收
                </view>
              </view>
            </view>
          </view>
        </view>
        <no-data :top="230" :statusType="1" @buttonHandle="buttonHandle" tipsText="暂无记录"
          v-if="!isInit && !arrList.length"></no-data>
      </mescroll-body>
      <u-modal :show="serviceVisible" title="申请售后" :closeOnClickOverlay="false" :showCancelButton="true"
        @cancel="cancelAfterSales" @confirm="confirmAfterSales">
        <view class="service-box">
          <u--textarea v-model="aftermarketReason" placeholder="售后原因" :focus="true" count maxlength="200"></u--textarea>
        </view>
      </u-modal>
    </view>

  </view>
</template>

<script>
import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js";
import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue';
import {
  aftermarketOrder,
  cancelAftermarketOrder,
  checkOrder,
  cancelOrder,
  getOrderListPage,
  updateOrder
} from "../../apis/order";
import { submitOrder } from "../../apis";

export default {
  mixins: [MescrollMixin],
  components: {
    MescrollBody
  },
  data() {
    return {
      aftermarketReason: "",
      orderId:"",
      serviceVisible: false,
      current: 0,
      page: 1,
      limit: 10,
      lineBg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_line.png',
      timeImg: 'https://ovp-shop.oss-cn-hangzhou.aliyuncs.com/static/9dshop/ic_time.png',
      arrList: [],
      isInit: true,
      downOption: {
        auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
      },
      upOption: {
        page: {
          num: 0,
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        textNoMore: '- 没有更多了 -'
      },
      paymentStatus: '',
      tabLists: [
        { name: '全部', value: '' },
        { name: '待付款', value: 'WAIT_PAYMENT' },
        { name: '待接单', value: 'WAIT_ORDER' },
        // {name: '待寄样', value: 'WAIT_SEND'},
        { name: '拍摄中', value: 'SHOOTING' },
        { name: '待验收', value: 'WAIT_CHECK' },
        { name: '已交付', value: 'DELIVERED' },
        { name: '售后中', value: 'AFTER_SALE' },
        { name: '已取消', value: 'CANCELLED' },
        { name: '已退款', value: 'REFUNDED' }]

    };
  },
  computed: {},
  watch: {},
  onShow() {
    // this.mescroll.upOption.page.num = 1;
    this.arrList = [];
    if (this.mescroll) {
      this.mescroll.resetUpScroll(); // 触发上拉加载
    }
  },
  onLoad(options) {
    if (options.status) this.paymentStatus = options.status
    if (options.current) this.current = options.current
    // this.getOrderListPage()
  },
  methods: {
    goOrderDetail(item) {
      uni.navigateTo({
        url: '/pages/order/orderDetail?orderId=' + item.orderId
      })
    },
    submitOrder(params) {
      submitOrder({
        ...params
      }).then((res) => {
        // 检查是否在微信浏览器中
        if (typeof WeixinJSBridge === 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', () => {
              this.invokePayment(res);
            }, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', () => {
              this.invokePayment(res);
            });
            document.attachEvent('onWeixinJSBridgeReady', () => {
              this.invokePayment(res);
            });
          }
        } else {
          this.invokePayment(res);
        }
      })
    },
    invokePayment(rePayInfo) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: rePayInfo.appid,
          timeStamp: rePayInfo.timeStamp,
          nonceStr: rePayInfo.nonceStr,
          package: rePayInfo.packages,
          signType: rePayInfo.signType,
          paySign: rePayInfo.sign
        },
        (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            uni.navigateTo({
              url: '/pages/order/success?orderId=' + rePayInfo.orderId
            })
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            uni.showToast({
              title: '用户取消了支付',
              icon: 'none'
            })
          } else {
            console.error('支付失败', res.errMsg);
            // 处理支付失败的逻辑
          }
        }
      );
    },
    tabsChange(item) {
      if (this.paymentStatus == item.value) return
      this.paymentStatus = item.value
      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 300)
    },
    // upCallback(){
    //     console.log('123456');
    // },

    buttonHandle() {
      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 300)
    },
    upCallback(page) {
      getOrderListPage({
        paymentStatus: this.paymentStatus,
        page: page.num,
        limit: page.size,
      }).then(res => {
        // this.arrList = res.list
        if (res) {
          if (page.num == 1) { //如果是第一页需手动制空列表
            this.arrList = res.list
          } else {
            this.arrList = this.arrList.concat(res.list) //追加新数据
          }
          this.mescroll.endSuccess(res.list.length, res.total > this.arrList.length) // 参考https://www.mescroll.com/uni.html#mescrolluni

        } else {
          this.mescroll.endErr()
        }
        this.isInit = false
      })
    },
    // downCallback() {
    //   this.page = 1
    // //   this.upCallback()
    //   this.mescroll.endSuccess(); // 结束下拉刷新状态
    // },

    cancelOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要取消订单吗？',
        success: function (res) {
          if (res.confirm) {
            cancelOrder({
              orderId: Number(orderId)
            }).then(() => {
              that.mescroll.resetUpScroll()
              that.mescroll.scrollTo(0, 300)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    updateOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要取消订单吗？',
        success: function (res) {
          if (res.confirm) {
            updateOrder({
              orderId: Number(orderId),
            }).then(() => {
              that.mescroll.resetUpScroll()
              that.mescroll.scrollTo(0, 300)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    checkOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要验收该订单吗？',
        success: function (res) {
          if (res.confirm) {
            checkOrder({
              orderId: Number(orderId),
            }).then(() => {
              that.mescroll.resetUpScroll()
              that.mescroll.scrollTo(0, 300)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    applyAfterSales(orderId) {
      this.serviceVisible = true
      this.orderId = Number(orderId)
    },
    cancelAfterSales() {
      this.serviceVisible = false
      this.aftermarketReason = ""
    },
    confirmAfterSales(orderId) {
      const that = this
      aftermarketOrder({
        orderId: this.orderId,
        aftermarketReason: this.aftermarketReason
      }).then(() => {
        this.serviceVisible = false
        that.mescroll.resetUpScroll()
        that.mescroll.scrollTo(0, 300)
      })
    },
    cancelAftermarketOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要撤销售后吗？',
        success: function (res) {
          if (res.confirm) {
            cancelAftermarketOrder({
              orderId: Number(orderId)
            }).then(() => {
              that.mescroll.resetUpScroll()
              that.mescroll.scrollTo(0, 300)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
  },
  created() {

  },

}
</script>
<style lang='scss' scoped>
.order {
  height: 100vh;
  background-color: #EDEFF5;
  display: flex;
  flex-direction: column;

  .tabs {
    background-color: #FFF;
    padding: 0 28rpx 12rpx;
  }

  .content {
    flex: 1;
    overflow: hidden;
    padding: 24rpx;

  }

  .order-list {
    // padding: 24rpx;


    .tab-content {
      padding: 40rpx 36rpx;
      width: 100%;
      // height: 296rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      margin-bottom: 18rpx;

      .order-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          font-weight: bold;
          font-size: 32rpx;
          color: #0D121A;
        }

        .status {
          font-size: 28rpx;
          color: #FF7441;
        }

        .status2 {
          font-size: 28rpx;
          color: #0D121A;
        }

        .status3 {
          font-size: 28rpx;
          color: #9EA3B1;
        }
      }

      .order-middle {
        margin-top: 32rpx;
        color: #0D121A;

        .order-middle-left {
          font-weight: 400;
          font-size: 28rpx;
          color: #9EA3B1;
        }

        .order-middle-right {}
      }

      .order-bottom {
        margin-top: 16rpx;

        .order-bottom-left {
          .time-img {
            margin-right: 8rpx;
            width: 48rpx;
            height: 48rpx;
          }

          .time {
            color: #FF7441;
            font-size: 24rpx;
          }
        }

        .order-bottom-right {
          .p1 {
            padding: 18rpx 44rpx;
          }

          .p2 {
            padding: 16rpx 42rpx;
          }


        }
      }
    }
  }
}

.progress-bar {
  width: 260rpx;
  background-color: #e0e0e0;
  border-radius: 9999px;
  overflow: hidden;
}

.progress {
  height: 30rpx;
  background-color: #FF7441;
  width: 0%;
  text-align: center;
  line-height: 30 rrpx;
  color: white;
  font-size: 20rpx;
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.progress-container {
  width: 40rpx;
  /* 可按需调整宽度 */
  height: 20rpx;
  /* 可按需调整高度 */
  background-color: #f26522;
  /* 橙色，类似图中颜色，可按需调整 */
  border-radius: 20px;
  /* 圆角，让边角变圆润 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  /* 文字大小，可按需调整 */
  color: white;
  /* 文字颜色 */
  font-weight: bold;
  /* 文字加粗 */
}

.btn {
  border-radius: 36rpx;
}

.service-box {
  width: 100%;
  display: flex;
}
</style>