<template>
|
<view class="good-list-container">
|
<view class="top-bg img100 relative" :style="{'padding-top':(StatusBar)+'px','line-height':CustomBar+'rpx' }">
|
<!-- ../../../static/images/customer/coupon/good-top-bg.png -->
|
<image class="component-bg"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a9/a9731b0037924324a3d3318dfa7d10c5LZk6JsSC33ua754767bf8c714154f06bbd5b4d905174.png"
|
mode="scaleToFill" />
|
|
<view class="title">
|
<uni-icons class="icon" type="left" size="24" @click="backpage()"></uni-icons>
|
积分兑换
|
</view>
|
<view class="flex point-info">
|
<view class="point-record m-r-a">
|
<view class="text-center title">我的积分</view>
|
<view class="flex" @click="goto('/sub_pages/customer/coupon/point-history',true)">
|
<image src="../../../static/images/customer/coupon/icon-point.png" class="point-icon">
|
</image>
|
{{self_point}}
|
<uni-icons class="icon" type="right" size="32"></uni-icons>
|
</view>
|
</view>
|
<view class="m-l-a m-r-0 rule" @click="goto('/pages/help/content?id=积分规则',false)">
|
<view class="flex w-fit m-l-a m-r-15">
|
<view class="m-r-10">规则</view>
|
<image src="../../../static/images/customer/coupon/icon-rule.png" class="rule-icon">
|
</image>
|
</view>
|
<image class="good-point-icon" src="../../../static/images/customer/coupon/good-point-icon.png"
|
mode="scaleToFill" />
|
</view>
|
</view>
|
</view>
|
<view class="p10">
|
<top-tabs :tabs="tabs" :flg="flg" @change="changeTab" type="coupon">
|
|
</top-tabs>
|
</view>
|
<!-- 商品 -->
|
<view v-if="flg==0">
|
<view class="query-scores flex flex-wrap-normal p15">
|
<view class="item" v-for="(item,index) of scores" :key="index" @click="changeScore(item)"
|
:class="[(!item.min||query.pointLower==item.min)&&(!item.max || query.pointUpper==item.max)?'active':'']">
|
{{item.max?(item.min?`${item.min}~${item.max}`:`${item.max}以下`):`${item.min}以上`}}
|
</view>
|
</view>
|
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
|
|
<view class="good-container p15 flex">
|
<view v-for="(item,index) of list" :key="index" class="good-item" @click="toDetail(item)">
|
<image class="cover" :src="item.cover" :lazy-load="true" mode="scaleToFill"
|
:class="[item.stock===0?'component-stock-zero':'']">
|
|
</image>
|
<view class="title">
|
{{item.name}}
|
</view>
|
<view class="flex score-info">
|
<view>
|
<view><span class="score">{{item.point||'-'}}</span> 积分</view>
|
<view class="desc-gray">库存：<span class="">{{item.stock||'0'}}</span></view>
|
</view>
|
<view class="button m-l-a m-r-0 m-t-20" @click.stop="exchange('good',item)">兑换</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- 优惠券 -->
|
<view v-if="flg==1" class="coupon-container">
|
<no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
|
<view v-for="(item,index) of list" :key="index" class="coupont-item all exchange">
|
<view class="flex container img100">
|
<view class="info-price">
|
<!-- 优惠券类型（COUPON_TYPE）满减和无门槛 -->
|
<view class="price1">
|
{{item.maxDiscountAmount?(`${item.maxDiscountAmount}折`):(`￥${item.couponDiscountValue}`)}}
|
</view>
|
<view class="price2">{{item.minOrderAmount?(`满￥${item.minOrderAmount}可用`):'无门槛'}}</view>
|
</view>
|
<view class="info flex1">
|
<view class="title">
|
{{item.couponName||'-'}}
|
</view>
|
<view class="time">
|
{{item.getStartDate||'领取后'}}{{item.getEndDate&&(' 至 ' + item.getEndDate )||''}}有效
|
</view>
|
<view class="flex">
|
<view class="t-red">
|
{{item.point||'0'}}积分
|
</view>
|
<view class="m-l-10 desc-gray">
|
库存：{{item.couponAmount||'0'}}
|
</view>
|
<view class="button m-l-a m-r-15" :class="[item.couponAmount===0?'over':'']"
|
@click="exchange('coupon',item)">
|
{{item.couponAmount===0?'已售磬':'兑换'}}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
computed: {
|
|
self_point() {
|
if (this.currentInfo.currentPoint) {
|
if (this.currentInfo.currentPoint >= 10000) {
|
return (this.currentInfo.currentPoint / 10000 + '万')
|
} else {
|
return this.currentInfo.currentPoint
|
}
|
}
|
|
return 0
|
}
|
},
|
methods: {
|
changeTab(flg) {
|
this.flg = '' + flg
|
this.listApi = this.tabs[flg].api
|
this.list = []
|
this.refreshList()
|
},
|
async exchange(type, item) {
|
if (item.stock === 0 || item.couponAmount === 0) {
|
this.$message.showToast('库存为0，无法兑换')
|
return
|
}
|
var api = ''
|
if (type == 'good') {
|
api = '/api/customer/point/goods/exchange'
|
}
|
if (type == 'coupon') {
|
api = '/api/v2/coupon/point/exchange'
|
}
|
await this.$message.confirm('确定兑换吗')
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('post', api, {
|
data: {
|
couponId: item.id,
|
goodsId: item.id, //兼容2个
|
num: 1
|
}
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
//刷新积分
|
this.$store.dispatch('getCurrentInfo');
|
await this.$message.showToast('兑换成功')
|
|
}
|
},
|
toDetail(item) {
|
uni.navigateTo({
|
url: '/sub_pages/customer/coupon/good-detail?id=' + item.id
|
})
|
},
|
changeScore(item) {
|
this.query.pointLower = item.min || 0
|
this.query.pointUpper = item.max || 990000
|
this.refreshList()
|
}
|
},
|
data() {
|
return {
|
CustomBar: uni.getStorageSync('CustomBar'),
|
StatusBar: uni.getStorageSync('StatusBar'),
|
flg: 0,
|
|
tabs: [{
|
name: '商品',
|
api: '/api/customer/point/goods/list',
|
|
},
|
{
|
name: '优惠券',
|
// api: '/api/v2/coupon/app/activy/list',
|
api: '/api/v2/coupon/point/active/list',
|
|
},
|
],
|
query: {
|
pointLower: 0,
|
pointUpper: 1000
|
},
|
scores: [{
|
min: 0,
|
max: 1000
|
},
|
{
|
min: 1001,
|
max: 3000
|
},
|
{
|
min: 3001,
|
max: 5000
|
},
|
{
|
min: 5001,
|
max: 10000
|
},
|
{
|
min: 10001,
|
max: 0
|
},
|
]
|
}
|
},
|
onLoad() {
|
this.listApi = '/api/customer/point/goods/list'
|
this.getList()
|
},
|
async onPullDownRefresh() {
|
//刷新积分和刷新商品
|
this.$store.dispatch('getCurrentInfo');
|
// this.list = []
|
await this.refreshList()
|
uni.stopPullDownRefresh()
|
},
|
|
onReachBottom() {
|
this.getMore()
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import './coupon.scss';
|
|
.good-list-container {
|
.good-container {
|
.good-item {
|
background: #FFFFFF;
|
border-radius: 12rpx;
|
width: 330rpx;
|
margin-bottom: 30rpx;
|
|
.cover {
|
width: 330rpx;
|
height: 330rpx;
|
background-size: 100% 100%;
|
}
|
|
.title {
|
padding: 18rpx 18rpx 0rpx 18rpx;
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
text-align: left;
|
}
|
|
.score-info {
|
|
line-height: 50rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #44775A;
|
padding: 18rpx;
|
padding-bottom: 28rpx;
|
|
.score {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #44775A;
|
}
|
}
|
|
.button {
|
width: 106rpx;
|
height: 46rpx;
|
border-radius: 24rpx;
|
border: 2rpx solid #44775A;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #44775A;
|
text-align: center;
|
line-height: 46rpx;
|
}
|
|
.button.over {
|
color: #747374;
|
border: 2rpx solid #747374;
|
}
|
}
|
|
.good-item:nth-child(2n+1) {
|
margin-left: 0rpx;
|
margin-right: auto;
|
}
|
|
.good-item:nth-child(2n) {
|
margin-right: 0rpx;
|
margin-left: auto;
|
}
|
}
|
|
.query-scores {
|
overflow-x: scroll;
|
|
// width: max-content;
|
.item {
|
min-width: fit-content;
|
padding-left: 16rpx;
|
padding-right: 16rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
line-height: 50rpx;
|
height: 50rpx;
|
border-radius: 26rpx;
|
// width: fit-content;
|
|
}
|
|
.item.active {
|
background: #E1F0E7;
|
font-weight: 600;
|
color: #1A8B4C;
|
}
|
}
|
|
.top-bg {
|
padding: 32rpx;
|
padding-top: 40rpx;
|
height: 320rpx;
|
max-height: 320rpx;
|
|
.point-info {
|
|
.point-record {
|
// margin-left: 40rpx;
|
font-weight: 600;
|
font-size: 60rpx;
|
color: #44775A;
|
line-height: 84rpx;
|
|
.title {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 44rpx;
|
margin-top: 40rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.point-icon {
|
width: 42rpx;
|
height: 42rpx;
|
margin-top: 20rpx;
|
margin-right: 10rpx;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
}
|
|
.rule {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #44775A;
|
line-height: 30rpx;
|
|
.good-point-icon {
|
width: 192rpx;
|
height: 162rpx;
|
margin-right: 120rpx;
|
margin-top: 10rpx;
|
}
|
|
.rule-icon {
|
width: 30rpx;
|
height: 30rpx;
|
|
display: inline-block;
|
vertical-align: middle;
|
}
|
}
|
|
|
}
|
|
.title {
|
text-align: center;
|
font-weight: 600;
|
font-size: 32rpx;
|
position: relative;
|
|
.icon {
|
position: absolute;
|
left: 0rpx;
|
z-index: 1;
|
}
|
}
|
|
}
|
}
|
</style>
|
