From f63550630680825605ed0db1b5b63094ffa8e3c9 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 12 九月 2025 14:58:05 +0800
Subject: [PATCH] 更改
---
pages/order/myOrder.vue | 17 +
pages/order/cardPack.vue | 505 ++++++++++++++++++++++++++++++++++++++++++++++++++
pages.json | 30 ++
api/couponVirtual.js | 15 +
4 files changed, 566 insertions(+), 1 deletions(-)
diff --git a/api/couponVirtual.js b/api/couponVirtual.js
new file mode 100644
index 0000000..59f4f47
--- /dev/null
+++ b/api/couponVirtual.js
@@ -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,
+ });
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 5441924..861b104 100644
--- a/pages.json
+++ b/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"
+ }
}
}
]
diff --git a/pages/order/cardPack.vue b/pages/order/cardPack.vue
new file mode 100644
index 0000000..d2a402d
--- /dev/null
+++ b/pages/order/cardPack.vue
@@ -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>
\ No newline at end of file
diff --git a/pages/order/myOrder.vue b/pages/order/myOrder.vue
index 2d917c9..31ac614 100644
--- a/pages/order/myOrder.vue
+++ b/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))
--
Gitblit v1.8.0