fanxing-shop/pages/order/index.vue

<!-- 我的订单 -->
<template>
  <view class="order">
    <view class="tabs">
      <u-tabs :list="tabLists" lineWidth="40" 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="100%" class="custom-height" ref="mescrollRef" @init="mescrollInit" @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">
            <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*100}}%</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="cancelOrder(item.orderId)">取消</view>
                <view class="btn btn2 p1" @click="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="cancelOrder(item.orderId)">
                  取消
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_SEND'" @click="cancelOrder(item.orderId)">
                  取消
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_ORDER'" @click="cancelOrder(item.orderId)">
                  取消
                </view>
                <view v-if="item.paymentStatus==='WAIT_SEND'" class="btn btn1 p2 ml-6">寄样</view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='SHOOTING'" @click="cancelOrder(item.orderId)">申请售后
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='DELIVERED'"
                      @click="aftermarketOrder(item.orderId)">申请售后
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='WAIT_CHECK'"
                      @click="aftermarketOrder(item.orderId)">申请售后
                </view>
                <view class="btn btn1 p2" v-if="item.paymentStatus==='AFTER_SALE'"
                      @click="cancelAftermarketOrder(item.orderId)">撤回申请
                </view>
                <view class="btn btn1 p2 ml-6" v-if="item.paymentStatus==='WAIT_CHECK'"
                      @click="checkOrder(item.orderId)">确认验收
                </view>
              </view>
            </view>
          </view>
        </view>
        <no-data :statusType="2" tipsText="暂无记录" v-if="!isInit && !arrList.length"></no-data>
      </mescroll-body>
    </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 {

      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: false,
      paymentStatus: 'WAIT_PAYMENT',
      tabLists: [{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: {},
  onLoad() {
    this.getOrderListPage()
  },
  filters: {
    orderStatus(value) {
      const orderStatusList =
          [{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'}
          ]

      const orderItem = orderStatusList.find(item => item.value === value)
      return orderItem ? orderItem.name : ''
    }
  },
  methods: {
    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: '用户取消了支付'
              })
            } else {
              console.error('支付失败', res.err_msg);
              // 处理支付失败的逻辑
            }
          }
      );
    },
    tabsChange(item) {
      this.paymentStatus = item.value
      this.page = 1
      setTimeout(() => {
        this.getOrderListPage()
      }, 200)
    },
    getOrderListPage() {
      getOrderListPage({
        paymentStatus: this.paymentStatus,
        page: 1,
        limit: 10,
      }).then(res => {
        this.arrList = res.list
      })
    },
    cancelOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要取消订单吗？',
        success: function (res) {
          if (res.confirm) {
            cancelOrder({
              orderId: Number(orderId)
            }).then(() => {
              that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
            })
          } 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.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
            })
          } 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.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    aftermarketOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要申请售后吗？',
        success: function (res) {
          if (res.confirm) {
            aftermarketOrder({
              orderId: Number(orderId)
            }).then(() => {
              that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    cancelAftermarketOrder(orderId) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '你确定要撤销售后吗？',
        success: function (res) {
          if (res.confirm) {
            cancelAftermarketOrder({
              orderId: Number(orderId)
            }).then(() => {
              that.arrList.splice(that.arrList.findIndex(item => item.orderId === orderId), 1)
            })
          } 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;
  }

  .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;
          }

          .btn {
            font-weight: 500;
            font-size: 28rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 36rpx;
          }

          .btn1 {
            color: #0D121A;
            border: 3rpx solid #E2E4EB;
          }

          .btn2 {
            margin-left: 16rpx;
            background: #FF7441;
            color: #FFF;
          }
        }
      }
    }
  }
}

.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: 30rrpx;
  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; /* 文字加粗 */
}
.cancel {
  color: #9EA3B1 !important;
}
</style>