更改

zxl

2025-09-12 f63550630680825605ed0db1b5b63094ffa8e3c9

更改

 api/couponVirtual.js

New file
@@ -0,0 +1,15 @@
/**
 * 活动相关API
 */
import { http, Method } from "@/utils/request.js";

import api from "@/config/api.js";

 export function getPage(param) {
  return http.request({
    url: "/lmk/couponVirtual",
    method: Method.GET,
    needToken: true,
    params: param,
  });
}

 pages.json

@@ -1782,7 +1782,35 @@
            "path" : "editOrderAddress/editOrderAddress",
            "style" : 
            {
                "navigationBarTitleText" : "修改订单"
                "navigationBarTitleText" : "修改订单",
                "componentPlaceholder": {
                  "u-image": "view",
                  "u-row": "view",
                  "u-col": "view",
                  "u-input": "view",
                  "u-icon": "view",
                  "u-select": "view",
                  "u-notice-bar": "view"
                }
            }
        },
        {
            "path" : "cardPack",
            "style" : 
            {
                "navigationBarTitleText" : "优惠劵卡包",
                "componentPlaceholder": {
                  "u-navbar": "view",
                  "u-checkbox-group": "view",
                  "u-checkbox": "view",
                  "u-swipe-action": "view",
                  "u-image": "view",
                  "u-icon": "view",
                  "u-count-down": "view",
                  "u-modal": "view",
                  "u-popup": "view",
                  "u-empty": "view"
                }
            }
        }
      ]

 pages/order/cardPack.vue

New file
@@ -0,0 +1,505 @@
<template>
    <view class="coupon-center">
        <div class="swiper-box">
            <div class="swiper-item">
                <div class="scroll-v" enableBackToTop="true" scroll-y>
                    <!-- 空状态优化 -->
                    <u-empty 
                        mode="coupon" 
                        icon="http://cdn.uviewui.com/uview/empty/coupon.png"
                        style='margin-top: 30%;' 
                        text="暂无优惠券" 
                        v-if="whetherEmpty"
                    >
                        <view class="empty-tip">快去领取更多优惠吧~</view>
                    </u-empty>
					
                    <!-- 优惠券列表 -->
                    <view class="coupon-list" v-else>
                        <view 
                            class="coupon-item" 
                            v-for="(item, index) in couponList" 
                            :key="index"
                            :class="{ 
                                'coupon-used': item.claimStatus === 'CLAIMED',
                                'coupon-expired': item.status === 'EXPIRED'
                            }"
                            @click="handleCouponClick(item)"
                        >
                            <!-- 左侧优惠券主体 -->
                            <view class="left">
                                <!-- 波浪分隔线 -->
                                <view class="wave-line">
                                    <view class="wave" v-for="(w, i) in 12" :key="i"></view>
                                </view>
								
                                <!-- 优惠券信息 -->
                                <view class="message">
                                    <view class="coupon-name">{{ item.skuName }}</view>
                                    <view class="coupon-no">券号: {{ item.couponNo }}</view>
                                    <view class="order-id" v-if="item.orderId">订单: {{ item.orderId }}</view>
								
                                </view>
								
                                <!-- 圆形装饰 -->
                                <view class="circle circle-top"></view>
                                <view class="circle circle-bottom"></view>
                            </view>
							
                            <!-- 右侧状态区域 -->
                            <view class="right">
                                <view class="status-group">
                                    <view class="status-tag" 
                                      :class="{
                                        'unclaimed': item.claimStatus === 'NOT_CLAIM',
                                        'claimed': item.claimStatus === 'CLAIMED'
                                      }">
                                      {{ item.claimStatus === 'NOT_CLAIM' ? '未领取' : '已领取' }}
                                    </view>
									
                                    <view class="status-tag" 
                                      :class="{
                                        'unshared': item.shareStatus === 'NOT_SHARE',
                                        'shared': item.shareStatus === 'SHARED'
                                      }">
                                      {{ item.shareStatus === 'NOT_SHARE' ? '未分享' : '已分享' }}
                                    </view>
									
                                    <!-- 操作按钮 -->
                                    <view class="action-btn" v-if="item.claimStatus === 'NOT_CLAIM'">
                                        立即领取
                                    </view>
                                    <view class="action-btn shared" v-else-if="item.shareStatus === 'NOT_SHARE'">
                                        分享好友
                                    </view>
                                    <view class="action-btn disabled" v-else>
                                        已使用
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </div>
            </div>
        </div>
		
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="couponList.length > 0">
            <text v-if="loadStatus === 'more'">上拉加载更多</text>
            <text v-else-if="loadStatus === 'loading'">加载中...</text>
            <text v-else>没有更多了</text>
        </view>
    </view>
</template>

<script>
    import {getPage} from '@/api/couponVirtual.js'
    export default {
        data() {
            return {
               loadStatus: "more", //下拉状态
               whetherEmpty: false, //是否为空
               couponList: [], // 优惠券列表
               params: {
                   pageNumber: 1,
                   pageSize: 10,
                orderId:'',
               },
               storeId: "", //店铺 id,
               couponData: "",
		
            };
        },
         onLoad(options) {
            // options 中包含 URL 传递的所有参数
            console.log("接收的 id 值：", options.sn); // 打印参数，用于调试
		    
            // 将获取到的 id 存储到 data 中，方便页面使用
            this.params.orderId = options.sn;
            this.getPage()
          },
          onReachBottom() {
              this.loadMore()
          },
        methods: {
            getPage(){
                uni.showLoading({
                    title: "加载中",
                    mask: true
                });
                let submitData = {
                    ...this.params
                };
                getPage(submitData).then(res =>{
                    uni.hideLoading()
                    if(res.statusCode === 200){
                        this.couponData = res.data
                        if (this.couponData.total == 0) {
                            // 当本次请求数据为空展示空信息
                            this.whetherEmpty = true;
                        } else {
                            this.couponList.push(...this.couponData.data);
                            this.loadStatus = this.couponData.total > this.params.pageNumber * this.params.pageSize ? "more" : "noMore";
                        }
                    }
					
                }).catch(err => {
                    uni.hideLoading()
                    uni.showToast({
                        title: '加载失败',
                        icon: 'none'
                    })
                })
				
            },
            loadMore() {
                if (this.couponData.total > this.params.pageNumber * this.params.pageSize) {
                    this.params.pageNumber++;
                    this.loadStatus = "loading";
                    this.getPage();
                } else {
                    this.loadStatus = "noMore";
                }
            },
            handleCouponClick(item) {
                // 处理优惠券点击事件
                if (item.claimStatus === 'NOT_CLAIM') {
                    // 领取优惠券逻辑
                    uni.showToast({
                        title: '领取成功',
                        icon: 'success'
                    })
                } else if (item.shareStatus === 'NOT_SHARE') {
                    // 分享优惠券逻辑
                    uni.showToast({
                        title: '已生成分享图',
                        icon: 'success'
                    })
                }
            }
        }
    }
</script>
<style>
    page {
        height: 100%;
        background-color: #f7f8fa;
    }
</style>

<style lang="scss" scoped>
    // 颜色变量
    $primary: #FF6B3B; // 主色调-橙色
    $primary-light: #FF8A65; // 主色调-浅橙
    $success: #4CAF50; // 成功色-绿色
    $warning: #FF9800; // 警告色-橙色
    $info: #2196F3; // 信息色-蓝色
    $gray: #9E9E9E; // 灰色
    $light-gray: #E0E0E0; // 浅灰色
    $white: #FFFFFF; // 白色
    $bg-color: #f7f8fa; // 背景色
    $text-dark: #333333; // 深色文字
    $text-light: #666666; // 浅色文字
	
    // 页面头部
    .page-header {
        padding: 30rpx 36rpx;
        background: linear-gradient(135deg, $primary, $primary-light);
        color: $white;
        box-shadow: 0 4rpx 16rpx rgba(255, 107, 59, 0.3);
        position: relative;
        z-index: 10;
		
        .title {
            font-size: 36rpx;
            font-weight: 600;
            text-align: center;
            letter-spacing: 1rpx;
        }
    }
	
    .coupon-center {
        height: 100%;
        position: relative;
        background: linear-gradient(to bottom, $primary 160rpx, $bg-color 160rpx);
		
        .swiper-box {
            position: relative;
            z-index: 5;
			
            .swiper-item {
                .scroll-v {
                    height: calc(100vh - 100rpx);
                    padding: 30rpx 24rpx 100rpx;
                }
            }
        }
		
        // 空状态提示
        .empty-tip {
            color: $gray;
            font-size: 28rpx;
            margin-top: 20rpx;
            text-align: center;
        }
		
        // 优惠券列表容器
        .coupon-list {
            display: flex;
            flex-direction: column;
            gap: 30rpx;
        }
		
        // 优惠券项
        .coupon-item {
            display: flex;
            height: 240rpx;
            border-radius: 20rpx;
            overflow: hidden;
            box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);
            background-color: $white;
            transition: all 0.3s ease;
            position: relative;
			
            &:active {
                transform: translateY(4rpx);
                box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
            }
			
            // 已使用样式
            &.coupon-used {
                .left {
                    background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
					
                    .wave-line {
                        background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
                    }
					
                    .message {
                        color: #757575;
						
                        .coupon-desc {
                            color: #9E9E9E;
                        }
                    }
                }
				
                &::after {
                    content: "已使用";
                    position: absolute;
                    top: 30rpx;
                    right: 30rpx;
                    font-size: 24rpx;
                    color: #9E9E9E;
                    background: rgba(255, 255, 255, 0.8);
                    padding: 6rpx 16rpx;
                    border-radius: 20rpx;
                    font-weight: 500;
                }
            }
			
            // 已过期样式
            &.coupon-expired {
                .left {
                    background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
					
                    .wave-line {
                        background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
                    }
					
                    .message {
                        color: #616161;
						
                        .coupon-desc {
                            color: #757575;
                        }
                    }
                }
				
                &::after {
                    content: "已过期";
                    position: absolute;
                    top: 30rpx;
                    right: 30rpx;
                    font-size: 24rpx;
                    color: #F5F5F5;
                    background: rgba(97, 97, 97, 0.8);
                    padding: 6rpx 16rpx;
                    border-radius: 20rpx;
                    font-weight: 500;
                }
            }
        }
		
        // 左侧区域
        .left {
            width: 440rpx;
            background: linear-gradient(135deg, $primary, $primary-light);
            position: relative;
            padding: 30rpx;
            display: flex;
            align-items: center;
			
            // 波浪分隔线
            .wave-line {
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                width: 16rpx;
                background: linear-gradient(135deg, $primary, $primary-light);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-end;
                padding: 12rpx 0;
				
                .wave {
                    width: 16rpx;
                    height: 20rpx;
                    background-color: $white;
                    border-radius: 0 12rpx 12rpx 0;
                }
            }
			
            // 信息区域
            .message {
                color: $white;
                width: 100%;
				
                .coupon-name {
                    font-size: 32rpx;
                    font-weight: 600;
                    margin-bottom: 16rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
				
                .coupon-no, .order-id, .valid-date {
                    font-size: 24rpx;
                    margin-bottom: 8rpx;
                    opacity: 0.9;
                }
				
                .valid-date {
                    margin-top: 16rpx;
                    font-size: 22rpx;
                    opacity: 0.8;
                }
            }
			
            // 圆形装饰
            .circle {
                width: 32rpx;
                height: 32rpx;
                background-color: $bg-color;
                border-radius: 50%;
                position: absolute;
                right: -16rpx;
                z-index: 2;
            }
			
            .circle-top {
                top: -16rpx;
            }
			
            .circle-bottom {
                bottom: -16rpx;
            }
        }
		
        // 右侧区域
        .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20rpx;
            background: $white;
			
            // 状态标签组
            .status-group {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20rpx;
                width: 100%;
				
                .status-tag {
                    font-size: 24rpx;
                    padding: 8rpx 16rpx;
                    border-radius: 20rpx;
                    text-align: center;
                    white-space: nowrap;
                    width: fit-content;
                    font-weight: 500;
                }
				
                // 状态样式
                .unclaimed {
                    background-color: rgba(255, 107, 59, 0.1);
                    color: $primary;
                    border: 1rpx solid rgba(255, 107, 59, 0.3);
                }
				
                .claimed {
                    background-color: rgba(76, 175, 80, 0.1);
                    color: $success;
                    border: 1rpx solid rgba(76, 175, 80, 0.3);
                }
				
                .unshared {
                    background-color: rgba(33, 150, 243, 0.1);
                    color: $info;
                    border: 1rpx solid rgba(33, 150, 243, 0.3);
                }
				
                .shared {
                    background-color: rgba(158, 158, 158, 0.1);
                    color: $gray;
                    border: 1rpx solid rgba(158, 158, 158, 0.3);
                }
				
                // 操作按钮
                .action-btn {
                    background: linear-gradient(135deg, $primary, $primary-light);
                    color: $white;
                    padding: 14rpx 28rpx;
                    border-radius: 40rpx;
                    font-size: 26rpx;
                    text-align: center;
                    margin-top: 10rpx;
                    font-weight: 500;
                    box-shadow: 0 4rpx 12rpx rgba(255, 107, 59, 0.3);
					
                    &.shared {
                        background: linear-gradient(135deg, $info, #42A5F5);
                        box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
                    }
					
                    &.disabled {
                        background: linear-gradient(135deg, #BDBDBD, #9E9E9E);
                        box-shadow: 0 4rpx 12rpx rgba(158, 158, 158, 0.3);
                    }
                }
            }
        }
		
        // 加载更多提示
        .load-more {
            text-align: center;
            padding: 30rpx;
            color: $gray;
            font-size: 26rpx;
            background-color: $bg-color;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }
    }
</style>

 pages/order/myOrder.vue

@@ -101,6 +101,17 @@
                    @click="waitPay(order)"
                    >立即付款</view
                  >
                  <!-- 新增：优惠券卡包按钮 -->
                  <view
                    ripple
                    shape="circle"
                    class="cancel-btn"
                    size="mini"
                    v-if="order.couponFlag === 'COUPON'"
                    @click="openCouponPackage(order)"
                  >
                    优惠券卡包
                  </view>
                  <!-- 取消订单 -->
<!--                  <view
                    ripple
@@ -375,6 +386,12 @@
    },
  },
  methods: {
      openCouponPackage(order){
          console.log(order)
        uni.navigateTo({
            url:"/pages/order/cardPack?sn=" + order.sn
        })  
      },
      //再来一单
      buyBack(order){
      console.log(JSON.stringify(order))