@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/myOrder/myOrder.vue

@@ -0,0 +1,779 @@
+<template>
+  <view class="orderContent">
+    <u-sticky bgColor="#f6f6f6">
+      <Header title="中奖记录"></Header>
+      <view style="padding: 6px">
+        <u-tabs
+          :list="tabsList"
+          :activeStyle="{
+            color: '#000000',
+            fontWeight: 'bold',
+            fontSize: '32rpx',
+          }"
+          :inactiveStyle="{
+            color: '#505050',
+            fontWeight: 'bold',
+            fontSize: '28rpx',
+          }"
+          @change="changeType"
+          lineColor="linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);"
+          :current="type"
+        ></u-tabs>
+      </view>
+        <view  v-if="type == 1" class="subTabs">
+        <view
+          @click="changeStatus(value)"
+          v-for="value in orderTypes"
+          :key="value.status"
+          :class="['item', value.status == orderState ? 'active' : '']"
+        >
+          {{ value.name }}
+        </view>
+      </view>
+      <!-- :current="current" -->
+    </u-sticky>
+    <!-- <scroll-view
+      style="height: calc(100vh - 68px);"
+      scroll-y="true"
+      :scroll-top="scrollTop"
+      refresher-enabled="true"
+      :refresher-triggered="triggered"
+      @scrolltolower="scrollToLower"
+      @refresherrefresh="refresherrefresh"
+    > -->
+
+    <view v-if="type == 0" class="orderList">
+      <view
+        v-if="orderList.length > 0 && !isFirstLoading"
+        v-for="(value, index) in orderList"
+        :key="value.id"
+        hover-class="hoverActive"
+  
+        class="item"
+      >
+        <view>
+          <view class="top">
+            <text>{{ value.createdAt }}</text>
+          </view>
+          <scroll-view
+            scroll-x="true"
+            scroll-with-animation
+            style="
+              width: 100%;
+              white-space: nowrap;
+              height: 264rpx;
+              border-bottom: 1rpx dashed #f6f6f6;
+            "
+          >
+            <view v-for="(item,index) in value.item" :key="index" class="info">
+              <view
+                :style="{
+                  backgroundSize:item.item.itemType == 'ItemType_Goods_GreetingCard' ? 'contain' : 'cover',
+                  backgroundImage:
+                    'url(' + formateUrl(item.item.itemCoverThumb) + ')',
+                }"
+                class="bgcCenter image"
+              >
+                <view class="count">x{{ item.item.itemNum }}</view>
+              </view>
+              <view class="over name">{{ item.item.name }}</view>
+            </view>
+          </scroll-view>
+        <!-- <view class="actionBtn">
+            <view class="realPay">
+              <text>合计: </text>
+              <text
+                style="
+                  font-size: 28rpx;
+                  color: #000000;
+
+                  margin-left: 10rpx;
+                "
+                >¥{{ value.amount }}</text
+              >
+            </view>
+          </view>  -->
+        </view>
+      </view>
+    </view>
+
+    <u-sticky bgColor="transparent">
+    
+      <!-- :current="current" -->
+    </u-sticky>
+
+    <view v-if="type == 1" class="myOrderList">
+      <view
+        v-if="orderList.length > 0  && !isFirstLoading"
+        v-for="(value, index) in orderList"
+        :key="value.id"
+        hover-class="hoverActive"
+        @click="toDetail(value)"
+        class="item"
+      >
+        <view>
+          <view class="top">
+            <text>{{ value.createdAt }}</text>
+            <text style="color: #EB6E2A; font-weight: bold">{{
+              formateOrderStatus(value.state)
+            }}</text>
+          </view>
+          <view v-for="item in value.orderItem" :key="item.id" class="info">
+            <view
+              class="bgcCenter image"
+              :style="{
+                backgroundImage: 'url(' + formateUrl(item.itemCoverThumb) + ')',
+              }"
+            >
+            </view>
+<!-- @click.stop.prevent="" -->
+            <view class="centerInfo">
+              <view class="title">{{ item.name }}</view>
+              <!-- <view class="type">
+                <view class="over">{{ item.itemName }}</view>
+              </view> -->
+              <view class="money">
+                <text style="color: #505050; font-size: 24rpx; font-weight: 200"
+                  >x{{ item.num }}</text
+                >
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="actionBtn">
+          <view  class="btn">
+            <!-- <view @click.stop.prevent="copy(value.id)" style="display: flex;
+            align-items: center;">
+               订单号:<text style="text-decoration: underline;">{{ value.id}}</text>
+            </view> -->
+            <view class="seeDetail">查看详情</view>
+            <!-- <view>
+              <button open-type="contact">
+              <view class="see"> 联系客服 </view>
+            </button>
+           </view> -->
+
+            <!-- <view
+              v-if="value.state == 'OrderState_UnDeliver' && value.type == 'OrderType_Shop'"
+              hover-stop-propagation="true"
+              @click.stop.prevent="cancelOrder(value)"
+              class="see"
+              >
+              取消订单
+              
+              </view
+            >
+            <view
+              v-if="value.state == 'OrderState_UnReceive'"
+              hover-stop-propagation="true"
+              @click.stop.prevent="confirmRecieveOrder(value)"
+              class="confirm"
+              >确认收货</view
+            > -->
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- </scroll-view> -->
+
+    <view v-if="!isFirstLoading && orderList.length == 0" class="noData">
+      <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+      <view>没有相关记录</view>
+
+      <!-- <view @click="toShop" class="toShop">去逛逛</view> -->
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  fetchMyOrderList,
+  fetchCancelOrder,
+  fetchConfirmOrder,
+  fetchSopRefund,
+  fetchWinningRecord,
+} from "@/utils/fetch";
+import { formateServerUrl, reportMessage } from "@/utils";
+import { computed } from "uview-ui/libs/mixin/mixin";
+import icon from "uview-ui/libs/config/props/icon";
+import Header from "@/components/header/header.vue";
+export default {
+  data() {
+    return {
+      type: 0,
+      tabsList: [
+        {
+          name: "中奖记录",
+          status: "OrderState_Nil",
+        },
+        {
+          name: "发货记录",
+          status: "OrderState_UnDeliver",
+        },
+        // {
+        //   name: "待收货",
+        //   status: "OrderState_UnReceive",
+        // },
+        // {
+        //   name: "已完成",
+        //   status: "OrderState_Finished",
+        // },
+      ],
+      scrollTop: 0,
+      triggered: false,
+
+      orderState: "OrderState_Nil",
+      pageNo: 1,
+      pageSize: 10,
+      orderList: [],
+      isFirstLoading: true,
+      current: 0,
+      hasMore: true,
+      firstShowNum: 5,
+      orderTypes: [
+        {
+          name: "全部",
+          status: "OrderState_Nil",
+        },
+        {
+          name: "待发货",
+          status: "OrderState_UnDeliver",
+        },
+        {
+          name: "待收货",
+          status: "OrderState_UnReceive",
+        },
+        {
+          name: "已完成",
+          status: "OrderState_Finished",
+        },
+      ],
+    };
+  },
+  components: {
+    Header
+    // login,
+  },
+  onLoad(options) {
+    if (options.type) {
+      this.type = Number(options.type);
+    }
+
+    if (this.type == 0) {
+      this.getPayList();
+    } else {
+      if (options.state) {
+        this.orderState = options.state;
+        this.current = this.tabsList.findIndex(
+          (item) => item.status == this.orderState
+        );
+      }
+      this.getOrderList();
+    }
+  },
+  computed: {},
+  methods: {
+    copy(id){
+        uni.setClipboardData({
+	data: id,
+	success: function () {
+  uni.showToast({
+    title: '复制成功',
+    icon: 'none'
+  })
+	}
+});
+    },
+    getPayList() {
+      fetchWinningRecord({
+        page: this.pageNo,
+        page_size: this.pageSize,
+      }).then((res) => {
+        this.orderList =
+          this.pageNo == 1 ? res.list : this.orderList.concat(res.list);
+        if (res.list && res.list.length < this.pageSize) {
+          this.hasMore = false;
+        } else {
+          this.hasMore = true;
+        }
+        this.isFirstLoading = false;
+      });
+    },
+    changeType(e) {
+      console.log(e);
+        this.isFirstLoading = true
+      this.hasMore = true;
+      this.type = e.index;
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.pageNo = 1;
+      this.list = [];
+    
+      if (this.type == 0) {
+        this.getPayList();
+      } else {
+        this.getOrderList();
+      }
+    },
+    getShowItems(value) {
+      if (value.showAll) return value.orderItem;
+      return value.orderItem.length > this.firstShowNum
+        ? value.orderItem.slice(0, this.firstShowNum)
+        : value.orderItem;
+    },
+    showAll(value, index) {
+      value.showAll = !value.showAll;
+      this.orderList = [...this.orderList];
+    },
+    toShop() {
+      uni.switchTab({
+        url: "/pages/vip/vip",
+      });
+    },
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+
+    formateOrderStatus(status) {
+      if (status == "OrderState_UnPay") {
+        return "待付款";
+      } else if (status == "OrderState_UnPayTail") {
+        return "待支付尾款";
+      } else if (status == "OrderState_UnDeliver") {
+        return "待发货";
+      } else if (status == "OrderState_UnReceive") {
+        return "待收货";
+      } else if (status == "OrderState_Finished") {
+        return "已完成";
+      } else if (status == "OrderState_AdminClose") {
+        // 管理员关闭
+        return "已关闭";
+      } else if (status == "OrderState_UserClose") {
+        // 用户关闭
+        return "已关闭";
+      }
+    },
+
+    cancelOrder(value) {
+      if (value.type == "OrderType_Shop") {
+        fetchSopRefund({
+          id: value.shopOrderId,
+        }).then((res) => {
+          uni.showToast({
+            title: "取消成功",
+            icon: "none",
+          });
+          this.pageNo = 1;
+          this.getOrderList();
+        });
+      } else {
+        fetchCancelOrder({
+          id: value.id,
+        }).then((res) => {
+          uni.showToast({
+            title: "取消成功",
+            icon: "none",
+          });
+          this.pageNo = 1;
+          this.getOrderList();
+        });
+      }
+    },
+    confirmRecieveOrder(value) {
+      fetchConfirmOrder({
+        id: value.id,
+      }).then((res) => {
+        this.pageNo = 1;
+        this.getOrderList();
+      });
+    },
+
+    getOrderList() {
+      fetchMyOrderList({
+        page: this.pageNo,
+        pageSize: this.pageSize,
+        type: "OrderType_Nil",
+        state: this.orderState,
+      }).then((res) => {
+        this.orderList =
+          this.pageNo == 1 ? res.list : this.orderList.concat(res.list);
+
+        if (res.list && res.list.length < this.pageSize) {
+          this.hasMore = false;
+        } else {
+          this.hasMore = true;
+        }
+        this.isFirstLoading = false;
+      });
+    },
+    refresherrefresh({ done }) {
+      if (!this.triggered) {
+        this.triggered = true;
+        setTimeout(() => {
+          this.triggered = false;
+        }, 5000);
+      }
+    },
+    scrollToLower() {
+      console.log("scrollToLower");
+    },
+    toLogistics() {},
+    toDetail(value) {
+      reportMessage("集好运-点击中奖记录界面-订单详情");
+      uni.navigateTo({
+        url: "/subpackages/myOrderDetail/myOrderDetail?id=" + value.id,
+      });
+    },
+    changeStatus(value) {
+      if (value.status == this.orderState) return;
+      this.orderState = value.status;
+      this.pageNo = 1;
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 0,
+      });
+      this.getOrderList();
+
+      // console.log(e,"sdjfsjflsjdfljsdf");
+      // this.triggered = false;
+    },
+  },
+  onShow() {
+    // const refreshOrder = uni.getStorageSync("refreshOrder");
+    // if (refreshOrder && refreshOrder == 1) {
+    //   this.pageNo = 1;
+    //   this.getOrderList();
+    //   uni.removeStorageSync("refreshOrder");
+    // }
+  },
+  onShareAppMessage() {},
+  onShareTimeline() {},
+
+  onReachBottom() {
+    if (this.hasMore) {
+      this.pageNo++;
+      if (this.type == 0) {
+        this.getPayList();
+      } else {
+        this.getOrderList();
+      }
+    }
+    console.log("onReachBottom");
+  },
+};
+</script>
+
+<style lang="less" scoped>
+page {
+ min-height: 100vh;
+  background-color: #f6f6f6 !important;
+}
+.orderContent {
+  /deep/ .u-sticky__content {
+    background-color: #f6f6f6 !important;
+  }
+  .noData {
+    text-align: center;
+    margin-top: 48rpx;
+    color: #999999;
+    font-size: 28rpx;
+    image {
+      width: 370rpx;
+      height: 368rpx;
+    }
+    view {
+      margin-top: -10rpx;
+    }
+
+    .toShop {
+      width: 322rpx;
+      height: 80rpx;
+      background: #7c66ff;
+      border-radius: 864rpx 864rpx 864rpx 864rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+      line-height: 80rpx;
+    }
+  }
+
+  .listContent {
+    height: calc(100% - 56px);
+    width: 100%;
+    overflow-y: scroll;
+    position: absolute;
+  }
+  .myOrderListContent {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - 56px - 68rpx);
+    overflow-y: scroll;
+  }
+  .orderList {
+    padding: 24rpx 32rpx;
+    padding-top: 16rpx;
+
+    overflow-y: scroll;
+
+    // padding-bottom: 0;
+    .item {
+      width: 100%;
+      height: 345rpx;
+      background: #fff;
+      padding: 0rpx 24rpx;
+      margin-bottom: 16rpx;
+
+      border-bottom: 1rpx dashed #f6f6f6;
+
+      &:last-child {
+        margin-bottom: 32rpx;
+      }
+
+      border-radius: 24rpx;
+      .top {
+        height: 80rpx;
+        color: #505050;
+        display: flex;
+        width: 100%;
+        line-height: 80rpx;
+
+        align-items: center;
+        border-bottom: 1rpx dashed #f6f6f6;
+      }
+
+      .info {
+        padding-top: 24rpx;
+        width: 176rpx;
+        display: inline-block;
+        margin-right: 8rpx;
+        &:last-child {
+          margin-right: 0;
+        }
+        // gap: 28rpx;
+        > .image {
+          width: 176rpx;
+          height: 176rpx;
+          border-radius: 16rpx;
+          position: relative;
+          .count {
+            position: absolute;
+            right: 8rpx;
+            bottom: 8rpx;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 16rpx;
+            // padding: 0 14rpx;
+            width: 48rpx;
+            height: 32rpx;
+            color: #fff;
+            font-size: 24rpx;
+            line-height: 32rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .name {
+          font-size: 24rpx;
+          color: 24rpx;
+          font-weight: 600;
+          margin-top: 8rpx;
+          text-align: center;
+        }
+      }
+
+      .actionBtn {
+        margin-top: 17rpx;
+        font-size: 24rpx;
+        font-weight: bold;
+        .realPay {
+          text-align: right;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+
+  .subTabs {
+    display: flex;
+    padding-left: 32rpx;
+    padding-top: 10rpx;
+    padding-bottom: 10rpx;
+    .item {
+      width: 120rpx;
+      height: 48rpx;
+      background: rgba(80, 80, 80, 0.1);
+      border-radius: 28rpx 28rpx 28rpx 28rpx;
+      color: #505050;
+      font-size: 24rpx;
+      display: flex;
+      line-height: 48rpx;
+
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+      &.active {
+        background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+        color: #fff;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .myOrderList {
+    padding: 0 32rpx;
+    padding-top: 16rpx;
+    padding-bottom: 24rpx;
+
+    // padding-bottom: 0;
+    .item {
+      width:100%;
+      // height: 432rpx;
+      padding: 0rpx 24rpx;
+      margin-bottom: 16rpx;
+
+      &:last-child {
+        margin-bottom: 32rpx;
+      }
+
+      background: #fff;
+      border-radius: 24rpx;
+      .top {
+        height: 80rpx;
+        color: #505050;
+        font-size: 24rpx;
+        display: flex;
+        width: 100%;
+        line-height: 80rpx;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1rpx dashed #f6f6f6;
+      }
+      .info {
+        padding-top: 24rpx;
+        display: flex;
+        border-bottom: 1rpx dashed #f6f6f6;
+        padding-bottom: 24rpx;
+        align-items: center;
+        // gap: 28rpx;
+        > .image {
+          width: 128rpx;
+          height: 128rpx;
+          border-radius: 16rpx;
+          margin-right: 24rpx;
+        }
+        .centerInfo {
+          width: 485rpx;
+          .title {
+            font-weight: bold;
+
+            font-size: 28rpx;
+            /* color: #333333; */
+            line-height: 36rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            // margin-top: 20rpx;
+            margin-bottom: 16rpx;
+          }
+
+          .money {
+            font-weight: bold;
+
+            font-size: 24rpx;
+            margin-top: 16rpx;
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+
+      .actionBtn {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        .btn {
+          // margin-top: 20rpx;
+          // height: 96rpx;
+          padding: 24rpx 0;
+          display: flex;
+          align-items: center;
+          justify-content:  flex-end;
+          width: 100%;
+          // gap: 10rpx;
+          > view {
+            margin-right: 10rpx;
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .seeDetail {
+            width: 160rpx;
+            height: 48rpx;
+            border-radius: 28rpx 28rpx 28rpx 28rpx;
+            border: 2rpx solid #13B77F;
+            color: #13B77F;
+            font-size: 24rpx;
+            display: flex;
+            align-items: center;
+            font-weight: bold;
+            justify-content: center;
+            line-height: 48rpx;
+          }
+          button {
+            border-radius: 864rpx 864rpx 864rpx 864rpx;
+            width: 160rpx;
+            height: 48rpx;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28rpx;
+            margin: 0;
+            line-height: 48rpx;
+            padding: 0;
+            background-color: transparent;
+          }
+          .see {
+            border-radius: 864rpx 864rpx 864rpx 864rpx;
+            width: 168rpx;
+            height: 62rpx;
+            border: 2rpx solid #d6d6d6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28rpx;
+            line-height: 62rpx;
+          }
+          .confirm {
+            border-radius: 864rpx 864rpx 864rpx 864rpx;
+            width: 168rpx;
+            height: 62rpx;
+            background: #7c66ff;
+            display: flex;
+            align-items: center;
+            color: #fff;
+            justify-content: center;
+            font-size: 28rpx;
+            line-height: 62rpx;
+          }
+        }
+      }
+    }
+  }
+}
+</style>