Skip to content

U
user
Commit 4966b295 by songbingqi
Options

完成结算页面优惠卷接口联调

parent 51e585ca
Showing with 256 additions and 20 deletions
components/Ticket/index.vue
......@@ -5,9 +5,9 @@
<view class="one_left">
<view class="type" :style="[typeBackground]">{{info.typeDesc}}</view>
<view class="price">
<view :style="[priceColor]" v-if="info.couponType===0">{{info.mjPrice}}<span>元</span></view>
<view :style="[priceColor]" v-else-if="info.couponType===1">{{info.zkPrice}}<span>折</span></view>
<view :style="[priceColor]" class="dkStyle" v-else>{{info.dkPrice}}<span></span></view>
<view :style="[priceColor]" v-if="info.couponType===1">{{info.price}}<span>元</span></view>
<view :style="[priceColor]" v-else-if="info.couponType===2">{{info.price}}<span>折</span></view>
<view :style="[priceColor]" class="dkStyle" v-else>{{info.price}}<span></span></view>
</view>
<view :style="[priceDescColor]" class="price_desc">{{info.priceDesc}}</view>
</view>
......@@ -19,7 +19,7 @@
</view>
<view class="action">
<view v-if="type==='use'">
<view class="check" @click="selected" :class="checkFlag?'checked':'nochecked'"></view>
<view class="check" @click="selected(info)" :class="info.checkStatus?'checked':'nochecked'"></view>
</view>
<view v-else>
<view v-if="info.status===0">
......@@ -157,8 +157,9 @@ export default {
this.detailFlag = !this.detailFlag
this.arrowFlag = !this.arrowFlag
},
selected() {
this.checkFlag = !this.checkFlag
selected(info) {
if(info.status!==0)return
this.$emit("updata",info.id)
}
}
......@@ -191,6 +192,7 @@ export default {
text-align: center;
height: 28rpx;
overflow: hidden;
display: inline-block;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
......
orderSubPackage/pages/coupon/index.vue
......@@ -5,21 +5,21 @@
<swiper :current="current" class="swiper" @change="swiperChange">
<swiper-item>
<view class="list">
<Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
<Ticket v-for="(item,index) in canuse" :key="index" :info="item" type="use" @updata="updata"/>
</view>
</swiper-item>
<swiper-item>
<view class="list">
<Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
<Ticket v-for="(item,index) in cantuse" :key="index" :info="item" type="use"/>
</view>
</swiper-item>
</swiper>
</view>
<view class="usebtn">
<view class="usebtn" v-if="price!=0">
<view class="content">
<view class="text">已选择1张HOOLOO卷，可优惠<span class="money">￥5</span></view>
<view class="text">已选择1张HOOLOO卷，可优惠<span class="money">￥{{price}}</span></view>
<view>
<view class="btnView">确认</view>
<view class="btnView" @click="setTickcet">确认</view>
</view>
</view>
</view>
......@@ -31,6 +31,31 @@ import Ticket from '@/components/Ticket/index.vue'
import Tabs from '@/components/Tabs/index.vue'
export default {
components: {Ticket,Tabs},
computed:{
// canuse(){
// const list = this.$store.state.order.tickListSettle.canuse
// list.sort((a,b)=>{
// return a.couponAmount - b.couponAmount
// })
// console.log('收拾寿司')
// return [...list]
// },
// price() {
// const val = this.canuse.filter((item)=>{return item.checkStatus})||[]
// return val[0]?.couponAmount||0
// },
cantuse(){
const listObject = this.$store.state.order.tickListSettle
return listObject.cantuse
}
},
watch:{
canuse(val){
console.log(val,123)
const vals = val.filter((item)=>{return item.checkStatus})||[]
this.price = vals[0]?.couponAmount||0
}
},
data() {
return {
list1: [
......@@ -43,7 +68,9 @@ export default {
],
nouserList:[],
current: 0,
actionIndx:0
actionIndx:0,
canuse:[],
price:0
};
},
mounted(){
......@@ -67,8 +94,25 @@ export default {
reson:'不可与已勾选券叠加使用' // 不可使用原因
})
}
this.canuse = this.$store.state.order.tickListSettle.canuse
},
methods: {
updata(id){
this.canuse.map(item=>{
if(item.id===id){
item.checkStatus = !item.checkStatus
}else{
item.checkStatus = false
}
})
this.canuse = [...this.canuse]
// console.log( this.canuse)
},
setTickcet(){
const vals = this.canuse.filter((item)=>{return item.checkStatus})||[]
this.$store.commit('setSelectTicket',vals[0])
uni.navigateBack();
},
changeTab(current) {
this.current = current;
},
......@@ -86,7 +130,7 @@ export default {
// margin-bottom: 176rpx;
.swiper {
background: #F8F8F8;
height: calc(100vh - 64rpx - 176rpx);
height: calc(100vh - 64rpx);
.list{
height: 100%;
padding: 0rpx 32rpx;
......
orderSubPackage/pages/settlement/index.vue
......@@ -40,9 +40,10 @@
<div class="coupon" @click="goCouponSelect">
<div class="title">HOOLOO券</div>
<div class="num">
<span>暂未可用优惠</span>
<image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
<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'" /> -->
</div>
</div>
......@@ -158,6 +159,10 @@ export default {
}).then(({ data }) => {
this.duration = data.data
})
// 获取优惠卷信息
this.$store.commit("cleanInfo")
this.saveGetTicket()
},
data() {
return {
......@@ -171,10 +176,19 @@ export default {
BottomSafeHeight:0,
Utils,
agreeTerms:true,
TermsStatus:true
TermsStatus:true,
ticketNum:0
}
},
computed: {
selectPrice() {
const data = this.$store.state.order.selectTicket.couponAmount
return data
},
selectCouponId() {
const data = this.$store.state.order.selectTicket.id
return data
},
userms() {
return this.$store.getters.Authorization;
},
......@@ -208,6 +222,8 @@ export default {
item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0)
})
totalPrice-=this.selectPrice||0
return totalPrice.toFixed(2)
}
},
......@@ -261,6 +277,36 @@ export default {
}
})
},
// 组装数据
AssemblyOrder(){
let list = [];
if (this.payType == '1') {
list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true);
} else {
list = uni.getStorageSync('goodsList').filter((v) => v.flag == true);
}
return Utils.AssemblyOrder(this.shopData, this.totalPrice, this.totalNum, this.buyType, list);
},
// 结算组装数据获取优惠卷列表
async saveGetTicket() {
// 组装购物车数据或者立即支付数据
const res = this.AssemblyOrder()
if(res){
const {data:list} = await Menu.requestTicketList(res);
const {data:num} = await Menu.requestTicketNum(res);
if(list.code==200){
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')
}
}
},
//结算组装数据发起订单
async saveReserve() {
// 组装购物车数据或者立即支付数据
......@@ -272,9 +318,7 @@ export default {
}
let res = await Utils.AssemblyOrder(this.shopData, this.totalPrice, this.totalNum, this.buyType, list);
if (res) {
// 发起订单
// if(this.agreeTerms)uni.setStorageSync('TermsStatus',true)
let orderInfo = await Menu.saveReserve(res);
let orderInfo = await Menu.saveReserve({...res,couponId:this.selectCouponId||''});
if (orderInfo && orderInfo.data.code == 200) {
await Menu.requestPayment(orderInfo.data.data, res, this.buyType);
}
......@@ -501,6 +545,28 @@ export default {
color: #999999;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
.num-action {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #FF63BA;
height: 40rpx;
line-height: 40rpx;
.price{
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 19.68rpx;
......
request/menu/index.js
......@@ -89,4 +89,34 @@ export default {
},
});
},
// 优惠卷信息接口
requestTicketList(data){
return uni.$u.http
.post('/app/order/coupon/info', data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
});
return err;
});
},
// 下单页面优惠卷可用数量
requestTicketNum(data){
return uni.$u.http
.post('/app/order/coupon/fitable-count', data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
});
return err;
});
}
};
store/index.js
......@@ -2,12 +2,14 @@ import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import menu from './modules/menu';
import order from './modules/order'
import getters from './getters';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user,
menu,
order
},
state: {
list: [],
......
store/modules/order.js 0 → 100644
const order = {
state: {
tickListSettle: {}, //菜单信息
selectTicket:{}
},
mutations: {
// 清除优惠卷信息
cleanInfo(state) {
state.tickListSettle = {}
state.selectTicket = JSON.parse(JSON.stringify({}))
},
// 设置结算页面优惠卷信息
setTickerList(state, data) {
console.log(data)
const canuse = data.fitable.map(item=>{
return {
id: item.id,
status: 0,
couponType: item.type,
typeDesc: item.categoryName,
price: item.priceDiscount,
priceDesc: item.ruleDesc,
checkStatus: false,
title: item.name,
time: [item.useStartTime,item.useEndTime],
shopList: [item.areaLimitDesc],
goodList: [item.goodLimitDesc],
useScence: ['小程序下单可用'],
useDesc: ['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'],
zkRule: '整单最高抵扣50元',
reson: item.notFitableDesc,
couponAmount:item.couponAmount,
fitItem:item
}
}).sort((a,b)=>{
return b.couponAmount - a.couponAmount
})
if(canuse.length!=0)canuse[0].checkStatus = true
const cantUse = data.notfitable.map(item=>{
return {
id: item.id,
status: 1,
couponType: item.type,
typeDesc: item.categoryName,
price: item.priceDiscount,
priceDesc: item.ruleDesc,
checkStatus: false,
title: item.name,
time: [item.useStartTime,item.useEndTime],
shopList: [item.areaLimitDesc],
goodList: [item.goodLimitDesc],
useScence: ['小程序下单可用'],
useDesc: ['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'],
zkRule: '整单最高抵扣50元',
reson: item.notFitableDesc,
couponAmount:item.couponAmount,
fitItem:item
}
})
state.tickListSettle.canuse = [...canuse]
state.tickListSettle.cantuse = [...cantUse]
// status:1, // 0可使用 1不可使用/已过期/已失效
// couponType:0, // 0满减 1折扣 2抵扣
// typeDesc:'最大字数最大字', // 左上角文案描述
// mjPrice:'30', // 满减金额
// zkPrice:'7', // 折扣金额
// dkPrice:'免单', // 抵扣金额
// priceDesc:'满130可用', // 条件描述
// checkStatus:false, // 优惠券选中状态
// title:'最大字数最大字数最大', // 优惠券标题
// time:['2022.07.24.17:20'], // 过期时间
// shopList:['全门店可用'], // 可用门店
// goodList:['全品类可用'], // 可用品类
// useScence:['小程序下单可用'], // 使用场景
// useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
// zkRule:'整单最高抵扣50元', // 折扣规则
// reson:'不可与已勾选券叠加使用' // 不可使用原因
// state.menuAllInfo = menuAllInfo;
},
// 设置已选择的优惠卷信息
setSelectTicket(state, data) {
state.selectTicket = {...data}
}
},
actions: {
}
}
export default order
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