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

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">