Skip to content

U
user
Commit 793441f5 by songbingqi
Options

完成我的页面优惠券开发

parent 937143d1
Showing with 146 additions and 28 deletions
components/Tabs/index.vue
......@@ -49,7 +49,7 @@ export default {
<style lang="scss" scoped>
.big {
height: 68rpx;
height: 82rpx;
display: flex;
align-items: center;
padding-top: 3rpx;
......@@ -64,8 +64,8 @@ export default {
.textAction{
width: 100%;
text-align: center;
margin-bottom: 12rpx;
font-size: 24rpx;
margin-bottom: 18rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
......@@ -74,8 +74,8 @@ export default {
.textDefault{
width: 100%;
text-align: center;
margin-bottom: 12rpx;
font-size: 24rpx;
margin-bottom: 18rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
......
components/Ticket/index.vue
......@@ -15,7 +15,7 @@
<view class="right_top">
<view class="info">
<view :style="[titleColor]" class="title">{{info.title}}</view>
<view :style="[timeColor]" class="time">有效期至{{info.time[0]}}</view>
<view :style="[timeColor]" class="time">{{info.time[0]?info.time[0]+'-'+info.time[1]:'有效期至'+info.time[1]}}</view>
</view>
<view class="action">
<view v-if="type==='use'">
......@@ -23,7 +23,7 @@
</view>
<view v-else>
<view v-if="info.status===0">
<button class="gouse">去使用</button>
<button class="gouse" @click="goMenu">去使用</button>
</view>
</view>
</view>
......@@ -160,6 +160,9 @@ export default {
selected(info) {
if(info.status!==0)return
this.$emit("updata",info.id)
},
goMenu() {
uni.switchTab({ url: '/pages/menu/menu' });
}
}
......
components/menuAssembly/index.vue
......@@ -3,7 +3,7 @@
<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag||shopState===0?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
:class="item.id == categoryId ? 'active' : ''">
<view class="imgbox" v-if="item.src"><image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.src"/></view>
<view class="imgbox" v-if="item.src&&sizeList[index].width"><image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.src"/></view>
<view :style="{'margin-top':'10rpx'}"><span>{{ item.name }}</span></view>
<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
</view>
......@@ -115,9 +115,9 @@ export default {
this.categoryPostion = data
}).exec();
})
categorys[0]?categorys[0].src = 'http://fakeimg.pl/43x42/':''
categorys[1]?categorys[1].src = 'http://fakeimg.pl/54x34/':''
categorys[2]?categorys[2].src = 'http://fakeimg.pl/32x30/':''
// categorys[0]?categorys[0].src = 'http://fakeimg.pl/43x42/':''
// categorys[1]?categorys[1].src = 'http://fakeimg.pl/54x34/':''
// categorys[2]?categorys[2].src = 'http://fakeimg.pl/32x30/':''
categorys.map(item=>{
this.imagesHeight(item.src)
})
......@@ -142,11 +142,13 @@ export default {
const val = await uni.getImageInfo({
src
})
console.log(val[1].width)
console.log(val)
if(val.length==2){
this.sizeList.push({
width:val[1].width,
height:val[1].height
})
}
},
getSku(data) {
const { skus } = data;
......
menuSubPackage/pages/areaSelect/areaSelect.vue
......@@ -105,7 +105,7 @@ export default {
padding: 12rpx 32rpx;
align-items: center;
.text{
font-size: 26rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
......
mineSubPackage/pages/coupon/index.vue
......@@ -4,13 +4,19 @@
<view>
<swiper :current="current" class="swiper" @change="swiperChange">
<swiper-item>
<view class="list">
<Ticket/>
<view class="list" v-if="canuse.length!=0">
<Ticket v-for="(item,index) in canuse" :key="index" :info="item"/>
</view>
<view class="emty" v-else>
<view class="text">暂无可用优惠券</view>
</view>
</swiper-item>
<swiper-item>
<view class="list">
<Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
<view class="list" v-if="cantuse.length!=0">
<Ticket v-for="(item,index) in cantuse" :key="index" :info="item" />
</view>
<view class="emty" v-else>
<view class="text">暂无可用优惠券</view>
</view>
</swiper-item>
</swiper>
......@@ -21,6 +27,7 @@
<script>
import Ticket from '@/components/Ticket/index.vue'
import Tabs from '@/components/Tabs/index.vue'
import Mine from '@/request/mine'
export default {
components: {Ticket,Tabs},
data() {
......@@ -35,9 +42,19 @@ export default {
],
nouserList:[],
current: 0,
actionIndx:0
actionIndx:0,
canuse:[],
cantuse:[]
};
},
watch:{
current(val) {
console.log(val,'val')
if(val===1&&this.cantuse.length===0){
this.getTickList(false)
}
}
},
mounted(){
for(let i=0;i<2;i++){
this.nouserList.push({
......@@ -59,8 +76,48 @@ export default {
reson:'不可与已勾选券叠加使用' // 不可使用原因
})
}
this.getTickList(true)
},
methods: {
async getTickList(val) {
const {data} = await Mine.getUserList(val)
const {rows} = data
console.log(data)
const canuse = rows.map(item=>{
let timeStart = ''
let timeEnd = ''
if(item.useStartTime){
timeStart = item.useStartTime.slice(0,11).replace('-', '.')
}
if(item.useEndTime){
timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
}
return {
id: item.id,
status: item.state===0?0:item.state===1?2:3,
couponType: item.type,
typeDesc: item.categoryName,
price: item.priceDiscount,
priceDesc: item.ruleDesc,
checkStatus: false,
title: item.name,
time: [timeStart,timeEnd],
shopList: [item.areaLimitDesc],
goodList: [item.goodLimitDesc],
useScence: ['小程序下单可用'],
useDesc: ['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'],
zkRule: item.type===1?'抵扣后实付金额无法小于0':item.type===2?'整单最高抵扣50元':'可享受规定范围内饮品免单',
reson: item.notFitableDesc,
couponAmount:item.couponAmount,
fitItem:item
}
})
if(val){
this.canuse = canuse
}else{
this.cantuse = canuse
}
},
changeTab(current) {
this.current = current;
},
......@@ -81,6 +138,18 @@ export default {
padding: 0rpx 32rpx;
overflow-y: scroll;
}
.emty{
.text{
text-align: center;
margin-top: 322rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
letter-spacing: 1rpx;
}
}
}
}
</style>
orderSubPackage/pages/coupon/index.vue
......@@ -4,20 +4,27 @@
<view class="ticketList">
<swiper :current="current" class="swiper" @change="swiperChange">
<swiper-item>
<view class="list">
<view class="list" v-if="canuse.length!=0">
<Ticket v-for="(item,index) in canuse" :key="index" :info="item" type="use" @updata="updata"/>
</view>
<view class="emty" v-else>
<view class="text">暂无可用优惠券</view>
</view>
</swiper-item>
<swiper-item>
<view class="list">
<view class="list" v-if="cantuse.length!=0">
<Ticket v-for="(item,index) in cantuse" :key="index" :info="item" type="use"/>
</view>
<view class="emty" v-else>
<view class="text">暂无不可用优惠券</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="usebtn" v-if="price!=0">
<view class="usebtn" v-if="canuse.length!=0&&current===0">
<view class="content">
<view class="text">已选1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
<view class="text" v-if="price!=0">已选1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
<view class="text" v-else>暂未选择HOOLOO优惠卷</view>
<view>
<view class="btnView" @click="setTickcet">确认</view>
</view>
......@@ -51,7 +58,6 @@ export default {
},
watch:{
canuse(val){
console.log(val,123)
const vals = val.filter((item)=>{return item.checkStatus})||[]
this.price = vals[0]?.couponAmount||0
}
......@@ -136,6 +142,18 @@ export default {
padding: 0rpx 32rpx;
overflow-y: scroll;
}
.emty{
.text{
text-align: center;
margin-top: 322rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 40rpx;
letter-spacing: 1rpx;
}
}
}
}
......
orderSubPackage/pages/settlement/index.vue
......@@ -43,7 +43,8 @@
<div :class="[ticketNum>0?'num-action':'num']">
<span v-if="selectPrice" class="price">-￥{{selectPrice}}</span>
<span v-else>{{ticketNum>0?ticketNum+'张可用':'暂无可用优惠'}}</span>
<!-- <image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" /> -->
<image v-if="!ticketNum>0" class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
<image v-else class="arrow-right-select" :src="'../../../static/imgs/jiantoufen.jpg'" />
</div>
</div>
......@@ -300,12 +301,10 @@ export default {
const {data} = list
this.ticketList = data
this.$store.commit('setTickerList',this.ticketList)
console.log(this.ticketList,'list')
}
if(num.code==200){
const {data} = num
this.ticketNum = data
console.log(this.ticketNum,'num')
}
}
},
......
request/mine/index.js
......@@ -30,5 +30,16 @@ export default {
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
},
// 获取用户优惠卷列表
getUserList(data) {
return uni.$u.http
.get(`/app/coupon/list/${data}`, {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
}
};
store/modules/order.js
......@@ -14,6 +14,14 @@ const order = {
setTickerList(state, data) {
console.log(data)
const canuse = data.fitable.map(item=>{
let timeStart = ''
let timeEnd = ''
if(item.useStartTime){
timeStart = item.useStartTime.slice(0,11).replace('-', '.')
}
if(item.useEndTime){
timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
}
return {
id: item.id,
status: 0,
......@@ -23,7 +31,7 @@ const order = {
priceDesc: item.ruleDesc,
checkStatus: false,
title: item.name,
time: [item.useStartTime,item.useEndTime],
time: [timeStart,timeEnd],
shopList: [item.areaLimitDesc],
goodList: [item.goodLimitDesc],
useScence: ['小程序下单可用'],
......@@ -38,6 +46,14 @@ const order = {
})
if(canuse.length!=0)canuse[0].checkStatus = true
const cantUse = data.notfitable.map(item=>{
let timeStart = ''
let timeEnd = ''
if(item.useStartTime){
timeStart = item.useStartTime.slice(0,11).replace('-', '.')
}
if(item.useEndTime){
timeEnd = item.useEndTime.slice(0,11).replace('-', '.')
}
return {
id: item.id,
status: 1,
......@@ -47,7 +63,7 @@ const order = {
priceDesc: item.ruleDesc,
checkStatus: false,
title: item.name,
time: [item.useStartTime,item.useEndTime],
time: [timeStart,timeEnd],
shopList: [item.areaLimitDesc],
goodList: [item.goodLimitDesc],
useScence: ['小程序下单可用'],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment