536 lines
12 KiB
Vue
536 lines
12 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<view class="my-header">
|
|
<view class="my-icons" @click="goback"> <uni-icons type="left" color="#ffffff" size="16"></uni-icons>
|
|
</view>
|
|
<view class="my-text">积分商城</view>
|
|
<view class="my-icons"></view>
|
|
</view>
|
|
<!-- 顶部区域 -->
|
|
<view class="top-lanmu">
|
|
<view class="hby">
|
|
<view class="">
|
|
<view class="title-bai">{{myPoints}} <text style="font-size: 16px;">积分</text> </view>
|
|
<view class="size-bai">
|
|
<uni-icons type="location" color="#ffffff" size="16"></uni-icons>
|
|
<text>{{storeName}}</text>
|
|
<!-- <uni-icons type="right" color="#ffffff" size="16"></uni-icons> -->
|
|
</view>
|
|
</view>
|
|
<view class="tp">
|
|
<image src="../../static/imgs/hby.png" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="box-bai">
|
|
<view class="box-box" @click="gojg(1)">
|
|
<view class="img-jg">
|
|
<uni-icons type="calendar-filled" color="#ffffff" size="40"></uni-icons>
|
|
</view>
|
|
<view class="">积分签到</view>
|
|
</view>
|
|
<view class="box-box" @click="gojg(2)">
|
|
<view class="img-jg" style="background: #fa801c;">
|
|
<u-icon name="coupon-fill" color="#ffffff" size="40"></u-icon>
|
|
</view>
|
|
<view class="">积分明细</view>
|
|
</view>
|
|
<view class="box-box" @click="gojg(3)">
|
|
<view class="img-jg" style="background: #1fcabc;">
|
|
<u-icon name="info-circle-fill" color="#ffffff" size="40"></u-icon>
|
|
</view>
|
|
<view class="">积分规则</view>
|
|
</view>
|
|
<view class="box-box" @click="gojg(4)">
|
|
<view class="img-jg" style="background: #f76b17;">
|
|
<u-icon name="file-text-fill" color="#ffffff" size="40"></u-icon>
|
|
</view>
|
|
<view class="">我的订单</view>
|
|
</view>
|
|
</view>
|
|
<view class="bai-center">
|
|
<scroll-view scroll-x="true" class="tap-top">
|
|
<view class="sz" @click="transferIndex(-1)">
|
|
<view class="box" :class="{'xztap': qhindex === -1}">全部</view>
|
|
<view class="gang" v-if="qhindex === -1"></view>
|
|
</view>
|
|
<view class="sz" v-for="(item, index) in categoryList" :key="index"
|
|
@click="transferIndex(index,item.id)">
|
|
<view class="box" :class="{'xztap': qhindex === index}">{{item.categoryName}}</view>
|
|
<view class="gang" v-if="qhindex === index"></view>
|
|
</view>
|
|
</scroll-view>
|
|
<u-empty v-if="integralGiftList.length == 0" style="margin: 5px auto;" mode="data"
|
|
icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
</u-empty>
|
|
<view class="wrap-box">
|
|
|
|
<view class="box-goods" v-for="(item,index) in integralGiftList" :key="index"
|
|
@click="godetails(item)">
|
|
<view class="goods-img">
|
|
<image :src="baseUrl+item.coverImage" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="goods-title">
|
|
{{item.giftName}}
|
|
</view>
|
|
<view class="hui-time">
|
|
库存:{{item.remainingInventory === -1?"不限":item.remainingInventory}}
|
|
</view>
|
|
<view class="good-red">
|
|
<view style="display: flex;align-items: center;">
|
|
<view class="bi" v-if="item.exchangeMethod != '金额'">
|
|
<image src="../../static/imgs/jb.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view style="color: #FC1708;font-weight: bold;">
|
|
<span
|
|
v-if="item.exchangeMethod == '积分' || item.exchangeMethod == '积分+金额' || item.exchangeMethod == '积分+加钱购'">{{item.exchangePoints}}</span>
|
|
<span v-if="item.exchangeMethod == '积分+金额'">+</span>
|
|
<span
|
|
v-if="item.exchangeMethod == '金额' || item.exchangeMethod == '积分+金额'">￥{{item.exchangeAmount}}</span>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="anniux">
|
|
<text v-if="!item.remainingInventory || item.remainingInventory==0"
|
|
style="color: darkgray;">库存不足</text>
|
|
<text v-else-if="(
|
|
item.exchangeMethod == '积分' ||
|
|
item.exchangeMethod == '积分+金额' ) &&
|
|
item.exchangePoints>myPoints" style="color: darkgray;">积分不足</text>
|
|
<text v-else-if="item.ifRedemptionIsOnline" style="color: darkgray;">达到兑换上限</text>
|
|
<text v-else>立即兑换</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import config from '@/config'
|
|
import request from '../../utils/request'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
myPoints: 0,
|
|
storeName: '',
|
|
categoryList: {},
|
|
integralGiftList: {},
|
|
title: '',
|
|
qhindex: -1,
|
|
baseUrl: config.baseUrl,
|
|
storeId: uni.getStorageSync('storeId'),
|
|
query: {
|
|
storeId: uni.getStorageSync('storeId'),
|
|
status: '启用',
|
|
categoryId: '',
|
|
giftName: '',
|
|
deliveryMethod: '',
|
|
page: 1,
|
|
pageSize: 10000
|
|
}
|
|
}
|
|
},
|
|
|
|
components: {
|
|
|
|
},
|
|
onLoad() {
|
|
this.getCategoryList();
|
|
this.getIntegralGiftList();
|
|
},
|
|
onShow() {
|
|
this.getUserInfoList()
|
|
// 获取店铺信息
|
|
this.getInfoByStoreId()
|
|
},
|
|
methods: {
|
|
transferIndex(index, categoryId) {
|
|
this.qhindex = index
|
|
if (categoryId == undefined || categoryId == null) {
|
|
this.query.categoryId = ''
|
|
} else {
|
|
this.query.categoryId = categoryId
|
|
}
|
|
this.getIntegralGiftList()
|
|
},
|
|
// 获取积分商城分类
|
|
getCategoryList() {
|
|
request({
|
|
url: 'business/integral/integralGiftCategory/queryListByStoreId',
|
|
method: 'get',
|
|
params: {
|
|
storeId: this.storeId
|
|
}
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.categoryList = res.data
|
|
}
|
|
})
|
|
},
|
|
// 获取积分商城列表
|
|
async getIntegralGiftList() {
|
|
await request({
|
|
url: 'business/integral/integralGift/queryByPageByStoreId',
|
|
method: 'get',
|
|
params: this.query
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.integralGiftList = res.data.records
|
|
}
|
|
})
|
|
},
|
|
|
|
gojg(nmb) {
|
|
if (nmb == 1) {
|
|
uni.navigateTo({
|
|
url: '/pagesMy/integral/integral'
|
|
})
|
|
}
|
|
if (nmb == 2) {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/PointsMing/PointsMing'
|
|
})
|
|
}
|
|
if (nmb == 3) {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/Pointsdetail/Pointsdetail'
|
|
})
|
|
}
|
|
if (nmb == 4) {
|
|
uni.navigateTo({
|
|
url: '/pagesHome/myPointsOrder/myPointsOrder'
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
async godetails(data) {
|
|
|
|
let flag = await this.checkTheRedemptionLimit(data.giftId)
|
|
console.log("data.remainingInventory", data.exchangePoints)
|
|
console.log("this.myPoints", this.myPoints)
|
|
|
|
if (data.remainingInventory == 0) {
|
|
uni.showToast({
|
|
title: "该商品库存不足!",
|
|
icon: "none"
|
|
})
|
|
} else if (data.exchangePoints > this.myPoints && (
|
|
data.exchangeMethod == '积分' ||
|
|
data.exchangeMethod == '积分+金额')) {
|
|
uni.showToast({
|
|
title: "您的账户积分不足!",
|
|
icon: "none"
|
|
})
|
|
} else if (data.ifRedemptionIsOnline) {
|
|
uni.showToast({
|
|
title: "已达到兑换上限!",
|
|
icon: "none"
|
|
})
|
|
} else {
|
|
uni.$on('un', function() {
|
|
uni.$emit('goodsInfo', data)
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pagesHome/goodsDetails/goodsDetails',
|
|
})
|
|
}
|
|
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
// 查询我的积分
|
|
getUserInfoList() {
|
|
request({
|
|
url: '/business/userManager/user/getByUniApp',
|
|
method: 'get',
|
|
params: {
|
|
chainStoreId: uni.getStorageSync('chainStoreId')
|
|
}
|
|
}).then((res) => {
|
|
if (res.code == 200 && res.data) {
|
|
this.myPoints = res.data.points
|
|
}
|
|
})
|
|
},
|
|
// 根据storeId查询店铺信息
|
|
getInfoByStoreId() {
|
|
|
|
request({
|
|
url: '/business/storeInformation/store/storeInfoUni',
|
|
method: 'get',
|
|
params: {
|
|
storeId: uni.getStorageSync('storeId')
|
|
}
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.storeName = res.data.name
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
// 查询该商品是否达到个人的兑换上限
|
|
checkTheRedemptionLimit(giftId) {
|
|
console.log("giftId", giftId)
|
|
request({
|
|
url: 'business/integral/integralOrders/checkTheRedemptionLimit',
|
|
method: 'get',
|
|
params: {
|
|
giftId: giftId
|
|
}
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
return res.data
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onUnload() {
|
|
uni.$off('goodsInfo')
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background-color: #ffd8d8;
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
|
|
background: linear-gradient(180deg, #ff5c28 0%, #ff5c28 20%, #ffd8d8 37%, #ffd8d8 100%);
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.my-header {
|
|
width: 100%;
|
|
height: 88px;
|
|
background: #ff5c28;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
padding-top: 40px;
|
|
z-index: 9999;
|
|
|
|
.my-icons {
|
|
width: 20px;
|
|
|
|
}
|
|
|
|
position: fixed;
|
|
top: 0px;
|
|
}
|
|
|
|
.top-lanmu {
|
|
width: 100%;
|
|
|
|
|
|
// background: linear-gradient(180deg, #ff5c28 0%, #ff5c28 57%, #ffd8d8 100%);
|
|
box-sizing: border-box;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
.box-bai {
|
|
width: 90%;
|
|
|
|
margin: 10px auto;
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
font-size: 14px;
|
|
margin-top: 0px;
|
|
|
|
}
|
|
|
|
.size-bai {
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.title-bai {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.box-box {
|
|
width: 25%;
|
|
text-align: center;
|
|
}
|
|
|
|
.img-jg {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #1678ff;
|
|
border-radius: 12px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bai-center {
|
|
width: 90%;
|
|
border-radius: 8px;
|
|
background-color: #ffffff;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.tap-top {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
// padding-bottom: 22rpx;
|
|
box-sizing: border-box;
|
|
// border-bottom: 1px solid #EEEEEE;
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
.sz {
|
|
width: 25%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.box {
|
|
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
margin-right: 50rpx;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
// font-weight: bold;
|
|
color: #666666;
|
|
margin: 0 auto;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
}
|
|
|
|
.xztap {
|
|
color: #333333 !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.gang {
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
height: 8rpx;
|
|
background: #ff5c28;
|
|
border-radius: 14rpx;
|
|
|
|
}
|
|
|
|
.wrap-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin: 10px auto;
|
|
|
|
}
|
|
|
|
.box-goods {
|
|
width: 49%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 100%;
|
|
height: 150px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.anniux {
|
|
background-color: #ecf5ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
width: 100%;
|
|
margin: 10px auto;
|
|
color: #1678ff;
|
|
// color: #a2a2a2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.goods-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
margin: 5px 0px;
|
|
}
|
|
|
|
.good-red {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hui-time {
|
|
font-size: 14px;
|
|
color: #8895AB;
|
|
}
|
|
|
|
.bi {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 2px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.hby {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tp {
|
|
width: 200px;
|
|
height: 120px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |