czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

积分商城功能完善

Browse Source
This commit is contained in:
YeMingfei666
2025-12-10 19:33:29 +08:00
parent 6b53d30f69
commit 87f2ee8c3d
12 changed files with 1268 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
common/api/order/pointGoods.js
View File

@@ -13,7 +13,6 @@ platformType = 'alipay'
payType='aliPay'
// #endif
//订单列表
export const pointGoodsPage = (data) => {
return request({
url: url + '/user/pointGoods/page',
@@ -22,3 +21,38 @@ export const pointGoodsPage = (data) => {
})
}
export const exchange = (data) => {
return request({
url: url + '/user/pointGoods/exchange',
method: 'post',
data: {...data,payType}
})
}
export const applyRefund = (data) => {
return request({
url: url + '/user/pointGoods/applyRefund',
method: 'post',
data: data
})
}
export const cancelRefund = (data) => {
return request({
url: url + '/user/pointGoods/cancelRefund',
method: 'post',
data: data
})
}
export const recordPage = (data) => {
return request({
url: url + '/user/pointGoods/record/page',
method: 'get',
data: data
})
}

142
components/coupon-icon/index.vue Normal file
View File

@@ -0,0 +1,142 @@
<!-- 优惠券图标 -->
<template>
<view class="container">
<view class="icon icon1" v-if="props.item[props.typeKey] == 1">
<view class="top">
<text class="i">￥</text>
<text class="num">{{ props.item.discountAmount }}</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon2" v-if="props.item[props.typeKey] == 2">
<view class="top">
<text class="i">{{ props.item.discountNum }}件</text>
<text class="num">商品兑换</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon3" v-if="props.item[props.typeKey] == 3">
<view class="top">
<text class="num">{{ props.item.discountRate/10 }}折</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon2" v-if="props.item[props.typeKey] == 4">
<view class="top">
<text class="i">第二件</text>
<text class="num">半价券</text>
</view>
</view>
<view class="icon icon2" v-if="props.item[props.typeKey] == 6">
<view class="top">
<text class="i">买一送</text>
<text class="num">一券</text>
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
item: {
type: Object,
default: {}
},
typeKey: {
type: String,
default: 'type'
}
});
</script>
<style scoped lang="scss">
$color: #ff1c1c;
.container {
width: 100%;
height: 100%;
.icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.icon1 {
.top {
.i {
color: $color;
font-size: 24upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 72upx;
font-weight: bold;
}
}
}
&.icon2 {
.top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.i {
color: $color;
font-size: 34upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 34upx;
font-weight: bold;
}
}
}
&.icon3 {
.top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.i {
color: $color;
font-size: 34upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 52upx;
font-weight: bold;
}
}
}
.intro {
display: flex;
justify-content: center;
.t {
font-size: 22upx;
color: #999;
}
}
}
}
</style>

2
pages/order/coupon.vue
View File

@@ -204,7 +204,7 @@ import {
getCouponShops,
} from "@/common/api/member.js";
import { findCoupon } from "@/common/api/market/coupon.js";
import couponIcon from "@/pages/user/components/coupon-icon.vue";
import couponIcon from "@/components/coupon-icon/index";
// import * as UTILS from '@/utils/goods-utils.js';
import yskUtils from "ysk-utils";
const UTILS = yskUtils.couponUtils;

643
scoreShop/detail/index.vue
View File

@@ -1,267 +1,406 @@
<template>
<view class="color-333 u-font-28">
<view class="top" :style="{ backgroundImage: 'url(' + imgs.bg + ')' }">
<view class="name"> 这里是优惠券名称啊啊啊啊 </view>
<view class="info"> 15元代金券（满200可用） </view>
</view>
<view class="sku">
<view>
<view>
<text class="price">800</text>
<text class="text">积分</text>
<text class="price">+</text>
<text class="price">9.99</text>
<text class="text">元</text>
</view>
<view class="u-m-t-16 text"> 限购2份 </view>
</view>
<text class="text">剩余：99999</text>
</view>
<view class="goods-name">这里是商品名称啊啊啊啊啊</view>
<view class="bg-f7" style="height: 24rpx"></view>
<view class="desc">
<view class="u-flex">
<view class="color-666 no-wrap">领取方式</view>
<view class="u-m-l-16">系统发放</view>
</view>
<view class="u-flex u-m-t-16 u-col-baseline">
<view class="color-666 no-wrap">特别说明</view>
<view class="u-m-l-16"
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
>
</view>
</view>
<view class="bg-f7" style="height: 24rpx"></view>
<view class="color-333 u-font-28" v-if="item.id">
<template v-if="item.goodsCategory=='优惠券'">
<view class="top" :style="{ backgroundImage: 'url(' + imgs.bg + ')' }">
<view class="name u-line-1"> {{item.couponInfo.title}} </view>
<view class="info"> {{returnCouponTypeName}} </view>
</view>
</template>
<template v-else>
<image class="top-img" :src="item.goodsImageUrl" mode="aspectFit"></image>
<view class="goods-detail">
<view class="u-flex u-row-center">
<view class="title">商品详情</view>
</view>
</view>
</template>
<view class="sku">
<view>
<view>
<text class="price">{{item.requiredPoints}}</text>
<text class="text">积分</text>
<template v-if="item.extraPrice">
<text class="price">+</text>
<text class="price">{{item.extraPrice}}</text>
<text class="text">元</text>
</template>
<view style="height: 72px"></view>
<view class="fixed-bottom u-flex u-row-center">
<view class="btn" @click="exchangeClick">立即兑换</view>
</view>
</view>
<view class="u-m-t-16 text" v-if="item.limitQuota"> 限购{{item.limitQuota}}份 </view>
</view>
<text class="text">剩余：{{item.quantity}}</text>
</view>
<view class="goods-name">{{item.goodsName}}</view>
<view class="bg-f7" style="height: 24rpx"></view>
<view class="desc">
<view class="u-flex">
<view class="color-666 no-wrap">领取方式</view>
<view class="u-m-l-16" v-if="item.goodsCategory=='优惠券'">系统发放</view>
<view class="u-m-l-16" v-else>店内自取</view>
</view>
<view class="u-flex u-m-t-16 u-col-baseline" v-if="item.goodsCategory=='优惠券'">
<view class="color-666 no-wrap">特别说明</view>
<view class="u-m-l-16">优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view>
</view>
</view>
<view class="bg-f7" style="height: 24rpx"></view>
<!-- 兑换确认弹窗start -->
<modal
v-model="modalData.show"
title="立即兑换确认"
@confirm="confirmExchange"
>
<view style="padding: 32rpx 50rpx">
<view class="u-font-32"
>您将消耗{800}积分，兑换商品{这里是商品名称}，是否确认兑换</view
>
<view class="u-m-t-20 waring u-flex u-font-32 u-col-center">
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
<view class="u-m-l-24"
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
>
</view>
</view>
</modal>
<view class="goods-detail" v-if="item.goodsCategory!='优惠券'">
<view class="u-flex u-row-center">
<view class="title">商品详情</view>
</view>
<view class="u-m-t-32">
<image class="w-full" v-for="(item,index) in item.goodsDescription" :key="index" mode="widthFix" :src="item">
</image>
</view>
</view>
<!-- 需要支付的弹窗 -->
<up-popup
:show="popupData.show"
mode="bottom"
closeOnClickOverlay
@close="popupData.show = false"
>
<view class="popup-content">
<view class="popup-content-top">
<text class="color-666">领取方式</text>
<text class="u-m-l-16">需前往店铺自行兑换领取</text>
</view>
<view class="goods-info">
<view class="u-flex">
<image class="cover"></image>
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
<view>
<view class="u-font-32 font-bold">这里是商品名称</view>
<view class="u-m-t-54 color-666">8000积分+9.99元</view>
</view>
<text class="color-666">X1</text>
</view>
</view>
<view class="u-m-t-20 waring u-flex u-col-center">
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
<view class="u-m-l-16"
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
>
</view>
</view>
<view style="height: 100px"></view>
<view class="fixed-bottom u-flex u-row-center">
<view class="btn" @click="exchangeClick" :class="isCanExchange">立即兑换</view>
</view>
<view class="bottom font-bold text-right">
<text>合计 8000积分 + ¥9.99</text>
</view>
<!-- 兑换确认弹窗start -->
<modal v-model="modalData.show" title="立即兑换确认" @confirm="confirmExchange">
<view style="padding: 32rpx 50rpx">
<view class="u-font-32">您将消耗{{item.requiredPoints}}积分，兑换商品{{item.goodsName}}，是否确认兑换</view>
<view class="u-m-t-20 waring u-flex u-font-32 u-col-center">
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
<view class="u-m-l-24">优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view>
</view>
</view>
</modal>
<view class="u-m-t-42 u-flex u-row-center">
<view class="btn">确认兑换</view>
</view>
</view>
</up-popup>
<!-- 兑换确认弹窗end -->
</view>
<!-- 需要支付的弹窗 -->
<up-popup :show="popupData.show" mode="bottom" closeOnClickOverlay @close="popupData.show = false">
<view class="popup-content">
<view class="popup-content-top">
<text class="color-666">领取方式</text>
<text class="u-m-l-16">需前往店铺自行兑换领取</text>
</view>
<view class="goods-info">
<view class="u-flex">
<image class="cover"></image>
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
<view>
<view class="u-font-32 font-bold">这里是商品名称</view>
<view class="u-m-t-54 color-666">8000积分+9.99元</view>
</view>
<text class="color-666">X1</text>
</view>
</view>
<view class="u-m-t-20 waring u-flex u-col-center">
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
<view class="u-m-l-16">优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view>
</view>
</view>
<view class="bottom font-bold text-right">
<text>合计 8000积分 + ¥9.99</text>
</view>
<view class="u-m-t-42 u-flex u-row-center">
<view class="btn">确认兑换</view>
</view>
</view>
</up-popup>
<!-- 兑换确认弹窗end -->
</view>
</template>
<script setup>
import modal from "@/scoreShop/components/modal.vue";
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
};
const modalData = reactive({
show: false,
});
import {
computed,
reactive
} from "vue";
import {
getOpenId
} from '@/utils/uniapp.js'
import modal from "@/scoreShop/components/modal.vue";
import * as pointGoodsApi from "@/common/api/order/pointGoods.js";
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
};
const modalData = reactive({
show: false,
});
const popupData = reactive({
show: false,
});
function exchangeClick() {
modalData.show = true;
}
function confirmExchange() {
modalData.show = false;
}
const popupData = reactive({
show: false,
});
function exchangeClick() {
modalData.show = true;
}
function confirmExchange() {
// modalData.show = false;
exchange()
}
async function exchange() {
uni.showLoading({
title: '兑换中……'
})
const openId = await getOpenId()
uni.hideLoading()
if (openId) {
pointGoodsApi.exchange({
pointsGoodsId: item.id,
shopId: item.shopId,
number: 1,
price: item.extraPrice,
openId
}).then(res => {
modalData.show = false;
if(res){
uni.setStorageSync('exchange_goods_success',res)
uni.redirectTo({
url:'/scoreShop/success/index'
})
}else{
uni.showToast({
title: '兑换失败',
icon: 'none'
})
}
})
} else {
uni.showToast({
title: '鉴权失败，兑换失败',
icon: 'none'
})
}
}
const item = reactive({
goodsDescription: []
})
const couponTypes = {
1: "满减券",
2: "商品券",
3: "折扣券",
4: "第二件半价券",
5: "消费送券",
6: "买一送一券",
7: "固定价格券",
8: "免配送费券",
};
const returnCouponTypeName = computed(() => {
if (!item.id) {
return ' '
}
const type = item.couponInfo.couponType
if (type == 1) {
return item.couponInfo.discountAmount + '元代金券' + ' ' + `(满${item.fullAmount}可用)`
}
if (type == 2) {
return item.couponInfo.discountNum + '件商品兑换' + ' ' + `(满${item.fullAmount}可用)`
}
if (type == 3) {
return item.couponInfo.discountRate / 10 + '折' + ' ' + `(满${item.fullAmount}可用)`
}
if (type == 4) {
return '第二件半价券'
}
if (type == 6) {
return '买一送一券'
}
})
const pointsUser = reactive({
pointBalance: 0,
})
const isCanExchange = computed(() => {
if (pointsUser.pointBalance <= 0) {
return false
}
if (pointsUser.pointBalance < item.requiredPoints) {
return false
}
if (item.quantity <= 0) {
return false
}
if(item.limitQuota&&item.boughtCount>=item.limitQuota){
return false
}
return true
})
onLoad((opt) => {
const exchange_goods = uni.getStorageSync('exchange_goods')
if (exchange_goods.goodsDescription) {
exchange_goods.goodsDescription = JSON.parse(exchange_goods.goodsDescription)
} else {
exchange_goods.goodsDescription = []
}
const pointsUserData = uni.getStorageSync('pointsUser')
Object.assign(item, exchange_goods)
Object.assign(pointsUser, pointsUserData)
})
</script>
<style lang="scss" scoped>
.top {
margin: 14rpx 18rpx;
background-size: cover;
height: 350rpx;
box-sizing: border-box;
padding-left: 70rpx;
padding-top: 95rpx;
$topHeight: 350rpx;
.name {
color: #000000;
font-size: 36rpx;
font-weight: 700;
}
.info {
color: #333333;
font-size: 48rpx;
font-weight: 700;
margin-top: 62rpx;
}
}
.sku {
display: flex;
justify-content: space-between;
padding: 20rpx 36rpx;
align-items: center;
background: linear-gradient(90deg, #ff4a63 0%, #fd1f48 100%);
.price {
color: #fff;
font-weight: 700;
font-size: 36rpx;
}
.text {
color: #fff;
font-size: 28rpx;
}
}
.goods-name {
padding: 20rpx 28rpx;
background: #fff;
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.desc {
padding: 32rpx 28rpx;
background-color: #fff;
}
.goods-detail {
padding: 32rpx;
.title {
position: relative;
padding: 0 22rpx;
&::before {
content: "";
display: block;
position: absolute;
right: 100%;
width: 70rpx;
height: 2rpx;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #f7f8f9 0%, #c9cbcc 100%);
}
&::after {
left: 100%;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 70rpx;
height: 2rpx;
background: linear-gradient(90deg, #c9cbcc 0%, #f7f8f9 100%);
}
}
}
.top-img {
width: 750rpx;
height: $topHeight;
}
.fixed-bottom {
position: fixed;
background-color: #fff;
left: 0;
right: 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
background-color: #fff;
bottom: 0;
z-index: 10;
.btn {
padding: 16rpx 62rpx;
border-radius: 16rpx;
font-size: 32rpx;
font-weight: 700;
color: #9c571f;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
&.gray {
background: #9999992b;
color: #999999;
}
}
}
.waring {
background-color: rgba(255, 204, 0, 0.09);
padding: 32rpx 24rpx;
color: #ff8d28;
}
.popup-content {
font-size: 28rpx;
min-height: 300px;
.popup-content-top {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
}
.goods-info {
padding: 44rpx 28rpx;
border-bottom: 1px solid #ededed;
.cover {
width: 184rpx;
height: 184rpx;
border-radius: 16rpx;
background: #d9d9d9;
}
}
.bottom {
padding: 20rpx 28rpx 20rpx 20rpx;
border-bottom: 1px solid #ededed;
}
.btn {
display: flex;
padding: 22rpx 214rpx;
align-items: flex-start;
gap: 20rpx;
border-radius: 66rpx;
background: #e8ad7b;
font-size: 32rpx;
color: #fff;
font-size: 700;
}
}
</style>
.top {
margin: 14rpx 18rpx;
background-size: cover;
height: $topHeight;
box-sizing: border-box;
padding-left: 70rpx;
padding-top: 95rpx;
.name {
color: #000000;
font-size: 36rpx;
font-weight: 700;
}
.info {
color: #333333;
font-size: 48rpx;
font-weight: 700;
margin-top: 62rpx;
}
}
.sku {
display: flex;
justify-content: space-between;
padding: 20rpx 36rpx;
align-items: center;
background: linear-gradient(90deg, #ff4a63 0%, #fd1f48 100%);
.price {
color: #fff;
font-weight: 700;
font-size: 36rpx;
}
.text {
color: #fff;
font-size: 28rpx;
}
}
.goods-name {
padding: 20rpx 28rpx;
background: #fff;
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.desc {
padding: 32rpx 28rpx;
background-color: #fff;
}
.goods-detail {
padding: 32rpx;
.title {
position: relative;
padding: 0 22rpx;
&::before {
content: "";
display: block;
position: absolute;
right: 100%;
width: 70rpx;
height: 2rpx;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #f7f8f9 0%, #c9cbcc 100%);
}
&::after {
left: 100%;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 70rpx;
height: 2rpx;
background: linear-gradient(90deg, #c9cbcc 0%, #f7f8f9 100%);
}
}
}
.fixed-bottom {
position: fixed;
background-color: #fff;
left: 0;
right: 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
padding-top: 32rpx;
background-color: #fff;
bottom: 0;
z-index: 10;
.btn {
padding: 16rpx 62rpx;
border-radius: 16rpx;
font-size: 32rpx;
font-weight: 700;
color: #9c571f;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
&.gray {
background: #9999992b;
color: #999999;
}
}
}
.waring {
background-color: rgba(255, 204, 0, 0.09);
padding: 32rpx 24rpx;
color: #ff8d28;
}
.popup-content {
font-size: 28rpx;
min-height: 300px;
.popup-content-top {
padding: 32rpx 28rpx;
border-bottom: 1px solid #ededed;
}
.goods-info {
padding: 44rpx 28rpx;
border-bottom: 1px solid #ededed;
.cover {
width: 184rpx;
height: 184rpx;
border-radius: 16rpx;
background: #d9d9d9;
}
}
.bottom {
padding: 20rpx 28rpx 20rpx 20rpx;
border-bottom: 1px solid #ededed;
}
.btn {
display: flex;
padding: 22rpx 214rpx;
align-items: flex-start;
gap: 20rpx;
border-radius: 66rpx;
background: #e8ad7b;
font-size: 32rpx;
color: #fff;
font-size: 700;
}
}
</style>

381
scoreShop/index/components/goods-list.vue
View File

@@ -1,155 +1,242 @@
<template>
<view class="goodslist" :class="[layout]">
<view v-for="(item, index) in 10" :key="index" @click="toDetail(item)">
<template v-if="layout === 'list'">
<view class="item">
<image class="img" lazy-load></image>
<view class="info">
<view>
<view class="name u-line-1">这里是商品名称</view>
<view class="price">8000积分</view>
</view>
<view class="u-flex u-row-center u-col-center u-flex-col">
<view class="btn">兑换</view>
<view class="limit">限购2份</view>
</view>
</view>
</view>
</template>
<template v-if="layout === 'block'">
<view class="item">
<image class="img" lazy-load></image>
<view class="info">
<view class="name u-line-1">这里是商品名称</view>
<view class="price">8000积分</view>
<view class="u-flex u-col-center u-m-t-16 u-row-between">
<view class="limit">限购2份</view>
<view class="btn">兑换</view>
</view>
</view>
</view>
</template>
</view>
</view>
<view class="goodslist" :class="[layout]">
<view v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<template v-if="layout === 'list'">
<view class="item">
<view class="img coupon" v-if="item.goodsCategory=='优惠劵'&&item.couponInfo">
<couponIcon :item="item.couponInfo" typeKey="couponType" />
</view>
<image class="img" v-else lazy-load :src="item.goodsImageUrl"></image>
<view class="info">
<view>
<view class="name u-line-1">{{item.goodsName}}</view>
<view class="price">
<text>{{item.requiredPoints}}积分 </text>
<text v-if="item.extraPrice">+{{item.extraPrice}}元</text>
</view>
</view>
<view class="u-flex u-row-center u-col-center u-flex-col">
<view class="btn" v-if="canExchange(item)">兑换</view>
<view class="btn end" v-else>已兑完</view>
<view class="limit" v-if="item.limitQuota">限购{{item.limitQuota}}份</view>
</view>
</view>
</view>
</template>
<template v-if="layout === 'block'">
<view class="item">
<view class="img coupon" v-if="item.goodsCategory=='优惠劵'&&item.couponInfo">
<couponIcon :item="item.couponInfo" typeKey="couponType" />
</view>
<image class="img" v-else lazy-load :src="item.goodsImageUrl"></image>
<view class="info">
<view class="name u-line-1">{{item.goodsName}}</view>
<view class="price">
<text>{{item.requiredPoints}}积分 </text>
<text v-if="item.extraPrice">+{{item.extraPrice}}元</text>
</view>
<view class="u-flex u-col-center u-m-t-16 u-row-between">
<view class="limit" v-if="item.limitQuota">限购{{item.limitQuota}}份</view>
<view class="btn" v-if="canExchange(item)">兑换</view>
<view class="btn end" v-else>已兑完</view>
</view>
</view>
</view>
</template>
</view>
</view>
</template>
<script setup>
const props = defineProps({
list: {
type: Object,
default: () => [],
},
layout: {
type: String,
default: "block",
},
});
import couponIcon from "@/components/coupon-icon/index";
const props = defineProps({
list: {
type: Object,
default: () => [],
},
layout: {
type: String,
default: "block",
},
pointsUser: {
type: Object,
default: () => {},
}
});
function toDetail(item) {
uni.navigateTo({
url: '/scoreShop/detail/index?id=' + item.id,
})
}
function toDetail(item) {
if (!canExchange(item)) {
return
}
uni.setStorageSync('exchange_goods', item)
uni.navigateTo({
url: '/scoreShop/detail/index?id=' + item.id,
})
}
function canExchange(item) {
if (item.goodsCategory == '优惠券' && !item.couponInfo) {
return false
}
if (props.pointsUser.pointBalance <= 0) {
return false
}
if (props.pointsUser.pointBalance < item.requiredPoints) {
return false
}
if (item.quantity <= 0) {
return false
}
if (item.limitQuota && item.boughtCount >= item.limitQuota) {
return false
}
return true
}
const emits = defineEmits('exchange')
function exchange(item) {
// uni.showModal({
// title: '提示',
// content: `是否确认兑换` + item.goodsName + '？',
// cancelText: '取消',
// showCancel: true,
// success(res) {
// if (res.confirm) {
// emits('exchange', item)
// }
// }
// })
}
</script>
<style lang="scss">
.goodslist {
padding: 28rpx;
&.list {
.item {
background-color: #fff;
padding: 32rpx 24rpx;
border-radius: 16rpx;
display: flex;
margin-bottom: 18rpx;
.img {
width: 112rpx;
height: 112rpx;
border-radius: 16rpx;
background: #d9d9d9;
}
.info {
flex: 1;
padding-left: 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 28rpx;
color: #333;
font-weight: 700;
}
.price {
font-size: 28rpx;
margin-top: 14rpx;
color: #666;
}
.btn {
padding: 14rpx 48rpx;
border-radius: 16rpx;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
color: #9c571f;
font-size: 28rpx;
font-weight: 700;
&.end {
color: #999999;
background-color: rgba(153, 153, 153, 0.3);
}
}
.limit {
color: #666;
font-size: 24rpx;
margin-top: 8rpx;
}
}
}
}
&.block {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 30rpx;
column-gap: 52rpx;
.item {
padding: 32rpx 28rpx;
border-radius: 16rpx;
background-color: #fff;
.img {
width: 266rpx;
height: 266rpx;
border-radius: 16rpx;
background: #d9d9d9;
}
.info {
margin-top: 28rpx;
.name {
font-size: 28rpx;
color: #333;
font-weight: 700;
}
.price {
font-size: 28rpx;
margin-top: 16rpx;
font-weight: 700;
color: #9C571F;
}
.btn {
padding: 14rpx 48rpx;
border-radius: 16rpx;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
color: #9c571f;
font-size: 28rpx;
font-weight: 700;
&.end {
color: #999999;
background-color: rgba(153, 153, 153, 0.3);
}
}
.limit {
color: #666;
font-size: 24rpx;
}
}
}
}
}
</style>
.goodslist {
padding: 28rpx;
&.list {
.item {
background-color: #fff;
padding: 32rpx 24rpx;
border-radius: 16rpx;
display: flex;
margin-bottom: 18rpx;
.img {
width: 112rpx;
height: 112rpx;
border-radius: 16rpx;
background: #d9d9d9;
&.coupon {
// background-color: transparent;
}
}
.info {
flex: 1;
padding-left: 16rpx;
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 28rpx;
color: #333;
font-weight: 700;
}
.price {
font-size: 28rpx;
margin-top: 14rpx;
color: #666;
}
.btn {
padding: 14rpx 48rpx;
border-radius: 16rpx;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
color: #9c571f;
font-size: 28rpx;
font-weight: 700;
white-space: nowrap;
&.end {
color: #999999;
background: rgba(153, 153, 153, 0.3);
}
}
.limit {
color: #666;
font-size: 24rpx;
margin-top: 8rpx;
white-space: nowrap;
}
}
}
}
&.block {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 30rpx;
column-gap: 52rpx;
.item {
padding: 32rpx 28rpx;
border-radius: 16rpx;
background-color: #fff;
.img {
width: 266rpx;
height: 266rpx;
border-radius: 16rpx;
background: #d9d9d9;
&.coupon {
// background-color: transparent;
}
}
.info {
margin-top: 28rpx;
.name {
font-size: 28rpx;
color: #333;
font-weight: 700;
}
.price {
font-size: 28rpx;
margin-top: 16rpx;
font-weight: 700;
color: #9C571F;
}
.btn {
padding: 14rpx 48rpx;
border-radius: 16rpx;
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
color: #9c571f;
font-size: 28rpx;
font-weight: 700;
white-space: nowrap;
&.end {
color: #999999;
background: rgba(153, 153, 153, 0.3);
}
}
.limit {
color: #666;
font-size: 24rpx;
white-space: nowrap;
}
}
}
}
}
</style>

73
scoreShop/index/index.vue
View File

@@ -7,13 +7,16 @@
<view>
<view class="u-flex">
<image :src="imgs.wujiaoxing" class="wujiaoxing"></image>
<view class="number u-m-l-20 u-m-r-12">{{pointsUser?pointsUser.pointBalance:''}}</view>
<view class="u-flex">
<up-icon name="arrow-right" size="18" bold color="#9C571F"></up-icon>
<view class="u-flex" @click="toDetail">
<view class="number u-m-l-20 u-m-r-12">{{pointsUser?pointsUser.pointBalance:0}}</view>
<view class="u-flex">
<up-icon name="arrow-right" size="18" bold color="#9C571F"></up-icon>
</view>
</view>
</view>
<view class="u-m-t-10 u-flex color1" style="margin-left: 66rpx">
<text @click="toPage('/scoreShop/order/index')">积分订单</text>
<text @click="toPage('/scoreShop/order/index?shopId='+query.shopId)">积分订单</text>
<text class="u-m-l-44" @click="toDetail">积分明细</text>
</view>
</view>
@@ -26,13 +29,17 @@
<view class="tab-box u-flex">
<view class="tabs u-flex-1 u-flex">
<view class="tab-item" :class="tabActive === 0 ? 'active' : ''" @click="tabActive = 0">优惠券</view>
<view class="tab-item" :class="tabActive === 1 ? 'active' : ''" @click="tabActive = 1">其他商品</view>
<view class="tab-item" :class="tabActive === 1 ? 'active' : ''" @click="tabActive = 1">其它商品</view>
</view>
<view class="u-flex" @click="toggleLayout">
<image :src="layout === 'block' ? imgs.layout_block : imgs.layout" class="layout" />
</view>
</view>
<goodsList :layout="layout"></goodsList>
<goodsList :pointsUser="pointsUser" :layout="layout" :list="list" @exchange="exchange"></goodsList>
<view class="">
<up-loadmore :status="isEnd?'nomore':'loadmore'"></up-loadmore>
</view>
</view>
</view>
</template>
@@ -42,6 +49,13 @@
import {
onLoad
} from "@dcloudio/uni-app";
import {
reactive,
watch
} from "vue";
import {
onReachBottom
} from "@dcloudio/uni-app";
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3716211a58d84fda9ee596a1882c0704.png", //背景图
huizhang: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/5d07600cc494490aa3adacfe51d8845d.png", //徽章
@@ -61,6 +75,17 @@
});
}
// function exchange(item) {
// pointGoodsApi.exchange({
// pointsGoodsId: item.id,
// shopId: item.shopId,
// number: 1,
// price: item.extraPrice
// }).then(res => {
// refresh()
// })
// }
function toDetail() {
uni.navigateTo({
url: '/pages/user/member/billDetails?type=2&shopId=' + query.shopId + '&id=' + (pointsUser.value.id ||
@@ -78,22 +103,52 @@
page: 1,
size: 10,
shopId: '',
goodsCategory: ''
});
const isEnd = ref(false);
const pointsUser = ref(null)
const list = ref([])
function getList() {
pointGoodsApi.pointGoodsPage(query).then(res => {
const goodsCategory = tabActive.value === 1 ? '其它商品' : '优惠券'
pointGoodsApi.pointGoodsPage({
...query,
goodsCategory,
}).then(res => {
pointsUser.value = res.pointsUser
uni.setStorageSync('pointsUser', res.pointsUser)
const newList = res.pointsGoods.records
if (query.page == 1) {
list.value = newList
} else {
list.value.push(...newList)
}
if (query.page >= res.pointsGoods.totalPage * 1) {
isEnd.value = true
}
})
}
onLoad((opt) => {
query.shopId = opt.id || ''
query.shopId = opt.shopId || ''
})
onShow(() => {
watch(() => tabActive.value, (newval, oldval) => {
refresh()
})
function refresh() {
query.page = 1;
isEnd.value = false;
getList();
}
onReachBottom(() => {
if (isEnd.value) {
return
}
query.page++
getList();
})
onShow(() => {
refresh()
});
</script>
<style scoped lang="scss">

194
scoreShop/order/components/order-list.vue
View File

@@ -1,78 +1,128 @@
<template>
<view class="list">
<view v-for="(item, index) in 10" :key="index" class="item">
<view class="u-flex u-row-between">
<text class="color-999">2025/08/20 02:37:58</text>
<text class="status success">待核销</text>
</view>
<view class="u-m-t-22 u-flex u-col-center">
<up-image width="132rpx" height="132rpx" :src="item.img"></up-image>
<view class="u-p-l-36">
<view>这里是商品名称</view>
<view class="u-m-t-28 color-666">800积分</view>
</view>
</view>
<view class="u-m-t-28 u-flex u-row-right btns">
<view class="btn look" @click="lookCode">查看券码</view>
<view class="btn black">申请退款</view>
</view>
</view>
</view>
<view class="list">
<view v-for="(item, index) in list" :key="index" class="item">
<view class="u-flex u-row-between">
<text class="color-999">{{item.createTime}}</text>
<text class="status " :class="[returnStatusClass(item)]">{{item.status}}</text>
</view>
<view class="u-m-t-22 u-flex u-col-center">
<up-image width="132rpx" height="132rpx" :src="item.goodsImageUrl" v-if="item.goodsCategory!='优惠券'"></up-image>
<view class="img" v-else>
<couponIcon :item="item.couponInfo" typeKey="couponType" />
</view>
<view class="u-p-l-36">
<view>{{item.pointsGoodsName}}</view>
<view class="u-m-t-28 color-666">{{item.spendPoints}}积分</view>
</view>
</view>
<view class="u-m-t-28 u-flex u-row-right btns">
<view class="btn look" @click="lookCode(item)" v-if="item.goodsCategory!='优惠券'">查看券码</view>
<view class="btn black" @click="tuikuan(item)" v-if="canRefund(item)">申请退款</view>
<view class="btn black" @click="cancelRefund(item)" v-if="item.status=='退款中'" >取消退款</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import couponIcon from "@/components/coupon-icon/index";
import {
ref
} from "vue";
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
const emits = defineEmits(["lookCode", "refund","cancelRefund"]);
const lookCode = (item) => {
emits("lookCode", item);
};
const emits = defineEmits(["lookCode"]);
const lookCode = () => {
emits("lookCode");
};
function tuikuan(item) {
emits("refund", item);
}
function cancelRefund(item) {
emits("cancelRefund", item);
}
function returnStatusClass(item) {
if (item.status == '已完成' || item.status == '已退款') {
return 'gray'
}
if (item.status == '待核销') {
return 'success'
}
if (item.status == '退款中') {
return 'error'
}
}
function canRefund(item) {
if(item.status=='已退款'|| item.status=='退款中'||item.goodsCategory!='其它商品' ){
return false
}
return true
}
</script>
<style lang="scss">
.list {
padding: 28rpx;
.item {
padding: 14rpx 46rpx;
border-radius: 24rpx;
background: #fff;
margin-bottom: 48rpx;
.status {
padding: 8rpx 18rpx;
border-radius: 8rpx;
border: 2rpx solid transparent;
&.success {
background: rgba(123, 209, 54, 0.12);
border-color: #7bd136;
color: #7bd136;
}
&.gray {
background: #9999991f;
border-color: #999;
color: #999;
}
&.error {
background: #ff1c1c2e;
border-color: #ff1c1c;
color: #ff1c1c;
}
}
.btns {
display: flex;
gap: 34rpx;
.btn {
padding: 8rpx 14rpx;
border-radius: 10rpx;
border: 2rpx solid transparent;
&.look {
border-color: #ededed;
color: #333;
}
&.black {
border-color: #343030;
background: #343030;
color: #fff;
}
}
}
}
}
</style>
.list {
padding: 28rpx;
.item {
padding: 14rpx 46rpx;
border-radius: 24rpx;
background: #fff;
margin-bottom: 48rpx;
.img{
width: 132rpx;
height: 132rpx;
}
.status {
padding: 8rpx 18rpx;
border-radius: 8rpx;
border: 2rpx solid transparent;
&.success {
background: rgba(123, 209, 54, 0.12);
border-color: #7bd136;
color: #7bd136;
}
&.gray {
background: #9999991f;
border-color: #999;
color: #999;
}
&.error {
background: #ff1c1c2e;
border-color: #ff1c1c;
color: #ff1c1c;
}
}
.btns {
display: flex;
gap: 34rpx;
.btn {
padding: 8rpx 14rpx;
border-radius: 10rpx;
border: 2rpx solid transparent;
&.look {
border-color: #ededed;
color: #333;
}
&.black {
border-color: #343030;
background: #343030;
color: #fff;
}
}
}
}
}
</style>

301
scoreShop/order/index.vue
View File

@@ -1,105 +1,220 @@
<template>
<view class="min-page bg-f7 u-font-28">
<up-sticky>
<view class="top">
<view
v-for="(item, index) in tabs.list"
:key="index"
class="tab-item"
:class="{ active: item.value == tabs.sel }"
@click="tabs.sel = item.value"
>{{ item.name }}</view
>
</view>
</up-sticky>
<view class="min-page bg-f7 u-font-28">
<up-sticky>
<view class="top">
<view v-for="(item, index) in tabs.list" :key="index" class="tab-item"
:class="{ active: item.value == tabs.sel }" @click="tabs.sel = item.value">{{ item.name }}</view>
</view>
</up-sticky>
<orderList :list="list" @lookCode="lookCode" />
<orderList :list="list" @lookCode="lookCode" @refund="refund" @cancelRefund="cancelRefund" />
<modal v-model="modalData.show" title="立即兑换确认" :showBottom="false">
<view class="u-p-28">
<view class="u-flex u-row-center">
<up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
</view>
<view class="u-m-t-22 u-flex u-row-center">
<text>{{ qrcode }}</text>
<view @click="copyCode">
<image
src="/scoreShop/static/image/copy.png"
class="u-m-l-24 copy"
></image>
</view>
</view>
</view>
</modal>
</view>
<view class="safe-bottom">
<up-loadmore :status="isEnd?'nomore':'loadmore'"></up-loadmore>
</view>
<modal v-model="modalData.show" title="立即兑换确认" :showBottom="false">
<view class="u-p-28">
<view class="u-flex u-row-center">
<up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
</view>
<view class="u-m-t-22 u-flex u-row-center">
<text>{{ qrcode }}</text>
<view @click="copyCode">
<image src="/scoreShop/static/image/copy.png" class="u-m-l-24 copy"></image>
</view>
</view>
</view>
</modal>
</view>
</template>
<script setup>
import modal from "@/scoreShop/components/modal.vue";
import orderList from "./components/order-list.vue";
const modalData = reactive({
show: false,
});
const qrcode = ref("daddadaddad");
import modal from "@/scoreShop/components/modal.vue";
import orderList from "./components/order-list.vue";
import * as pointGoodsApi from "@/common/api/order/pointGoods.js";
import {
onLoad
} from "@dcloudio/uni-app";
import {
watch
} from "vue";
function copyCode() {
uni.setClipboardData({
data: qrcode.value,
success: function () {
uni.showToast({
title: "复制成功",
icon: "none",
});
},
});
}
const modalData = reactive({
show: false,
});
const qrcode = ref("");
function copyCode() {
uni.setClipboardData({
data: qrcode.value,
success: function() {
uni.showToast({
title: "复制成功",
icon: "none",
});
},
});
}
function lookCode() {
modalData.show = true;
}
const tabs = reactive({
list: [
{
name: "全部订单",
value: "",
},
{
name: "待核销",
value: "unevaluated",
},
{
name: "已核销",
value: "evaluated",
},
{
name: "售后",
value: "after_sale",
},
],
sel: "",
});
const list = ref([]);
function refresh() {
query.page = 1;
isEnd.value = false;
getList();
}
function refund(item) {
uni.showModal({
title: '提示',
content: '是否申请退款',
showCancel: true,
success(res) {
if (res.confirm) {
pointGoodsApi.applyRefund({
orderNo: item.orderNo,
recordId: item.id
}).then(res => {
if (res) {
uni.showToast({
title: '申请退款成功',
icon: 'none'
})
} else {
uni.showToast({
title: '申请退款失败',
icon: 'none'
})
}
setTimeout(() => {
refresh()
}, 1000)
})
}
}
})
}
function cancelRefund(item) {
uni.showModal({
title: '提示',
content: '是否取消退款',
showCancel: true,
success(res) {
if (res.confirm) {
pointGoodsApi.cancelRefund({
orderNo: item.orderNo,
recordId: item.id
}).then(res => {
if (res) {
uni.showToast({
title: '取消退款成功',
icon: 'none'
})
} else {
uni.showToast({
title: '取消退款失败',
icon: 'none'
})
}
setTimeout(() => {
refresh()
}, 1000)
})
}
}
})
}
function lookCode(item) {
qrcode.value = item.couponCode
modalData.show = true;
}
const tabs = reactive({
list: [{
name: "全部订单",
value: "",
},
{
name: "待核销",
value: "unevaluated",
},
{
name: "已核销",
value: "evaluated",
},
{
name: "售后",
value: "after_sale",
},
],
sel: "",
});
const list = ref([]);
const query = reactive({
page: 1,
size: 10,
shopId: '',
});
const isEnd = ref(false);
watch(() => tabs.sel, (newval) => {
refresh()
})
function getList() {
const status = tabs.list.find(v => v.value == tabs.sel)
pointGoodsApi.recordPage({
...query,
}).then(res => {
const newList = res.records
if (query.page == 1) {
list.value = newList
} else {
list.value.push(...newList)
}
if (query.page >= res.totalPage * 1) {
isEnd.value = true
}
})
}
onLoad((opt) => {
query.shopId = opt.shopId || ''
getList()
})
</script>
<style scoped lang="scss">
.top {
background-color: #fff;
padding: 32rpx 28rpx;
display: flex;
justify-content: space-between;
}
.tab-item {
color: #999;
transition: all 0.3s ease-in-out;
&.active {
color: #000;
font-size: 32rpx;
font-weight: 700;
}
}
.copy {
width: 28rpx;
height: 28rpx;
}
</style>
.top {
background-color: #fff;
padding: 32rpx 28rpx;
display: flex;
justify-content: space-between;
}
.tab-item {
color: #999;
transition: all 0.3s ease-in-out;
&.active {
color: #000;
font-size: 32rpx;
font-weight: 700;
}
}
.copy {
width: 28rpx;
height: 28rpx;
}
.safe-bottom {
padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
}
</style>

29
scoreShop/success/index.vue
View File

@@ -10,29 +10,30 @@
<view class="bg" :style="{ backgroundImage: `url(${imgs.bg})` }">
<image :src="imgs.success" class="success"></image>
<view class="u-font-40 font-700">兑换成功</view>
<view class="u-font-32 font-700">这里是商品名称</view>
<view class="u-m-t-14">需前往店铺自行兑换领取</view>
<view class="u-font-32 font-700">{{item.pointsGoodsName}}</view>
<view class="u-m-t-14" v-if="item.goodsCategory!='优惠券'">需前往店铺自行兑换领取</view>
<view class="u-m-t-14" v-else>优惠券直接到账您的账户中</view>
</view>
<view class="info u-flex u-flex-col">
<view class="u-p-22">
<text class="color-666">兑换商品：</text>
<text>这里是商品名称</text>
<text>{{item.pointsGoodsName}}</text>
</view>
<view class="u-p-22">
<text class="color-666">兑换数量：</text>
<text>1份</text>
<text>{{item.number}}份</text>
</view>
<view class="u-p-22">
<text class="color-666">消耗积分：</text>
<text>800</text>
<text>{{item.spendPoints}}</text>
</view>
<view class="u-p-22">
<text class="color-666">下单时间：</text>
<text>2025-12-3 17:19：32</text>
<text>{{item.checkoutTime}}</text>
</view>
<view class="u-p-22">
<text class="color-666">订单号：</text>
<text>：DH202511300001</text>
<text>：{{item.orderNo}}</text>
</view>
</view>
<view class="u-flex bottom u-row-center">
@@ -44,6 +45,8 @@
</template>
<script setup>
const imgs = {
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/b625560a5b75418c9e643841f8674a0c.png",
success:
@@ -53,8 +56,18 @@ function back() {
uni.navigateBack();
}
function lookOrder() {
uni.redirectTo({
url:'/scoreShop/order/index?shopId='+item.shopId
})
}
const item=reactive({
})
onLoad(opt=>{
const exchange_goods_success_data=uni.getStorageSync('exchange_goods_success')
Object.assign(item,exchange_goods_success_data)
})
</script>
<style lang="scss" scoped>

1
src/auto-imports.d.ts vendored
View File

@@ -32,6 +32,7 @@ declare global {
const onLoad: typeof import('@dcloudio/uni-app')['onLoad']
const onMounted: typeof import('vue')['onMounted']
const onPageScroll: typeof import('@dcloudio/uni-app')['onPageScroll']
const onReachBottom: typeof import('@dcloudio/uni-app')['onReachBottom']
const onReady: typeof import('@dcloudio/uni-app')['onReady']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']

54
utils/uniapp.js
View File

@@ -1,16 +1,58 @@
export const back=()=>{
export const back = () => {
console.log('调用返回方法back');
try {
const arr= getCurrentPages()
if(arr.length>=2){
const arr = getCurrentPages()
if (arr.length >= 2) {
return uni.navigateBack()
}else{
} else {
uni.reLaunch({
url:'/pages/index/index'
url: '/pages/index/index'
})
}
} catch (error) {
console.error('页面返回出错',error)
console.error('页面返回出错', error)
//TODO handle the exception
}
}
import {
APIuserlogin,
APIuser
} from "@/common/api/api.js";
export const getOpenId = () => {
// #ifdef MP-WEIXIN
return new Promise((resolve, reject) => {
uni.login({
provider: "weixin",
success: (data) => {
// 微信小程序环境
uni.getUserInfo({
provider: "weixin",
success: async (infoRes) => {
let res = await APIuserlogin({
code: data.code, //临时登录凭证
rawData: infoRes.rawData,
source: "wechat",
});
if (res) {
resolve(res.userInfo
.wechatOpenId);
} else {
reject(false);
}
},
fail: (err) => {
reject(false);
},
});
},
});
})
// #endif
// #ifdef MP-ALIPAY
// #endif
}

1
vite.config.js
View File

@@ -17,6 +17,7 @@ module.exports = defineConfig({
"onHide",
"onUnload",
"onReady",
"onReachBottom",
"onPageScroll",
"uni.request",
"uni.navigateTo",