Skip to content

P
pica-professional-exam
提交 4f95358e 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

已选择1张优惠券，共抵扣

上级 e75c96e8
隐藏空白字符变更
内嵌 并排
正在显示 包含 160 行增加 和 58 行删除
src/components/coupon/coupon-select-list.vue
浏览文件 @ 4f95358e
<template>
<van-popup v-model="isShowCoupon" @click-overlay="cancle" position="bottom" class="coupon-select">
<van-popup v-model="isShow" @click-overlay="cancle" position="bottom" class="coupon-select">
<section class="coupon-select-wrapper">
<article class="title">
<span>优惠券</span>
......@@ -8,31 +8,34 @@
<article v-if="true" class="list-wrapper">
<p>
已选择1张优惠券，共抵扣
<span class="sc thin">¥{{couponPrice}}</span>
<span class="sc thin">¥{{yuan(currentCoupon.discountAmount)}}</span>
</p>
<div
class="item"
@click="toggleChecked(item)"
:class="{'disabled': disabled}"
v-for="(item, index) in dataList"
:class="{'disabled': item.disabled}"
v-for="(item, index) in selectCouponList"
:key="index"
>
<div class="left opacity">
<p class="price">
<span class="symbol sc">¥</span>
<span class="num sc">{{item.discountAmount}}</span>
<span class="num sc">{{yuan(item.discountAmount)}}</span>
</p>
<p class="desc">满{{item.requiredTotalFee}}元可用</p>
<p class="desc">满{{yuan(item.requiredTotalFee)}}元可用</p>
</div>
<div class="center">
<p class="name status">{{item.couponName}}</p>
<div>
<p v-if="item.validTimeType == 2" class="date">
距离到期仅剩
<span class="sc"> {{item.validLeftDays}} </span>天
<span class="sc">{{item.validLeftDays}}</span>天
</p>
<p v-else class="date status">{{item.startTime}} 至 {{item.expireTime}}</p>
<p v-if="disabled" class="tips">
<p
v-else
class="date status"
>{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
<p v-if="item.disabled" class="tips">
<img @click="cancle" src="../../images/coupon/tips.png" />
<span>当前商品不可用</span>
</p>
......@@ -54,46 +57,65 @@
</template>
<script>
import NoCoupon from "@/components/coupon/no-coupon";
import { convertToYuan, parseTime } from "@/utils";
import { mapGetters, mapActions } from "vuex";
export default {
components: {
NoCoupon
},
props: {
isShowCoupon: {
showSelectCoupon: {
type: Boolean,
default: true
},
dataList: {
type: Array,
default: () => []
},
goodsInfo: {
type: Object,
default: () => {
return {
price: 0,
goodsType: 0,
cardType: 0
};
}
}
// currentCoupon: {
// type: Object,
// default: () => {
// return {};
// }
// }
// goodsInfo4Coupon: {
// type: Object,
// default: () => {
// return {};
// }
// }
},
data() {
return {
couponPrice: 100,
disabled: false,
isChecked: true,
currentCoupon: { couponId: "", canUseNum: 0, couponPrice: 0 }
currentCouponInfo: {}
};
},
//
watch: {
// isShowCoupon: {
// // 处理是否可用
// handler(newVal) {}
// }
isShowCoupon: {
// 处理是否可用
handler(newVal) {
// 如果打开了选择弹框，则重新选中已经选中的项目
if (newVal) {
this.currentCouponInfo = this.currentCoupon;
}
}
},
// 监听当前商品信息，如果价格改变，则要重新计算选择列表是否可用
goodsInfo4Coupon: {
handler(goodsInfo) {},
deep: true
}
},
computed: {
...mapGetters(['currentCoupon', 'goodsInfo4Coupon', 'selectCouponList']),
isShow: {
get() {
return this.showSelectCoupon;
},
set() {}
}
},
mounted() {
......@@ -107,19 +129,32 @@ export default {
// 查找已经选择的
confirm() {
this.$emit("confirm", this.currentCoupon);
this.$emit("confirm", this.currentCouponInfo);
},
// 切换当前选中优惠券
toggleChecked(item) {
if(item.disabled) return;
if (!item.isChecked) {
this.dataList.forEach((cItem, index) => {
this.selectCouponList.forEach((cItem, index) => {
cItem.isChecked = false;
});
this.currentCouponInfo = JSON.parse(JSON.stringify(item));
item.isChecked = true;
} else {
this.currentCouponInfo = {};
item.isChecked = false;
}
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
},
// parseTime
parseTime(time) {
return parseTime(time, "{yyyy}-{mm}-{dd}");
}
}
};
......
src/store/getters.js
浏览文件 @ 4f95358e
......@@ -17,5 +17,10 @@ const getters = {
totalCount: state => state.question.titleConfig.totalCount,
canRunNext: state => state.question.canRunNext,
webUserInfo: state => state.user.info,
// 优惠券相关
currentCoupon: state => state.coupon.currentCoupon,
goodsInfo4Coupon: state => state.coupon.goodsInfo4Coupon,
selectCouponList: state => state.coupon.selectCouponList,
}
export default getters
src/store/index.js
浏览文件 @ 4f95358e
......@@ -3,6 +3,7 @@ import Vuex from 'vuex'
import coop from './modules/coop'
import user from './modules/user'
import question from './modules/question'
import coupon from './modules/coupon';
import getters from './getters'
Vue.use(Vuex)
......@@ -11,7 +12,8 @@ const store = new Vuex.Store({
modules: {
coop,
user,
question
question,
coupon
},
getters
})
......
src/store/modules/coupon.js 0 → 100644
浏览文件 @ 4f95358e
const coupon = {
state: {
currentCoupon: {},
goodsInfo4Coupon: {},
selectCouponList: [],
},
mutations: {
SET_CURRENT_COUPON: (state, payload) => {
state.currentCoupon = payload;
},
SET_GOODS_INFO_COUPON: (state, payload) => {
state.goodsInfo4Coupon = payload;
},
SET_SELECT_COUPON_LIST: (state, payload) => {
state.selectCouponList = payload;
},
},
actions: {
// 设置当前选中的优惠券
setCurrentCoupon({ commit }, currentCoupon) {
commit("SET_CURRENT_COUPON", currentCoupon);
},
// 设置当前商品的信息(包括：总价格, goodsType, cardType)
setGoodsInfo4Coupon({ commit }, goodsInfo4Coupon) {
commit("SET_GOODS_INFO_COUPON", goodsInfo4Coupon);
},
// 这里只处理disabled的状态
setSelectCouponList({ commit, state }, selectCouponList) {
let goodsInfo4Coupon = state.goodsInfo4Coupon;
let price = goodsInfo4Coupon.price;
let flag = false;
selectCouponList.forEach( item => {
if( price > item.requiredTotalFee) {
}
})
commit("SET_SELECT_COUPON_LIST", selectCouponList);
},
},
}
export default coupon;
src/views/goods-detail.vue
浏览文件 @ 4f95358e
......@@ -38,7 +38,7 @@
<div class="name ">
优惠券
</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc">-¥100</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc">-¥{{yuan(currentCoupon.discountAmount)}}</div>
</div>
<div class="flex buy-way">
......@@ -79,12 +79,10 @@
<Loading v-show="showLoading" />
<!-- 优惠券弹框 -->
<CouponSelectList
:dataList="couponDataList"
:goodsInfo="goodsInfo4Conpon"
:isShowCoupon="isShowCoupon"
<CouponSelectList v-if="isShowCoupon"
:showSelectCoupon="isShowCoupon"
@cancle="closeCouponPopup"
@confirm="showCouponPopup">
@confirm="setCurrentPopup">
</CouponSelectList>
<CourseDialog
......@@ -109,6 +107,7 @@ import CouponSelectList from "@/components/coupon/coupon-select-list";
import { wxConfig, chooseWXPay } from '@/utils/wxShare';
import { getAPPID, getTradeType, getWebPageUrl, isWeiXin, wxOauth, debounce, getHactiveUrl } from '@/utils';
import { mapGetters, mapActions } from "vuex";
import { convertToYuan } from "@/utils";
const isWechat = isWeiXin();
// wxConfig(location.href);
......@@ -138,13 +137,10 @@ export default {
isShowDialog: false,
isShowCoupon: false, //是否展示激活弹框,
courseUrl: "",
couponDataList: [],
currentCoupon: {couponId: '', canUseNum: 0, couponPrice: ''},
goodsInfo4Conpon: {}
}
},
computed: {
...mapGetters(["userInfo", "webUserInfo"]),
...mapGetters(["userInfo", "webUserInfo", "currentCoupon", "goodsInfo4Coupon", "selectCouponList"]),
wxInfo() {
return this.$store.state.user.wxInfo;
},
......@@ -169,9 +165,9 @@ export default {
},
// 监听当前商品信息
goodsInfo4Conpon: {
goodsInfo4Coupon: {
handler(goodsInfo) {
this.setSelectCouponList(this.selectCouponList);
},
deep: true
}
......@@ -234,31 +230,40 @@ export default {
sessionStorage.setItem('goodsDetailParams', JSON.stringify(this.$route.query))
},
methods: {
...mapActions(["setUserInfo"]),
...mapActions(["setUserInfo", "setCurrentCoupon", "setGoodsInfo4Coupon", "setSelectCouponList"]),
// 获取我的优惠券列表
// 查询我的可用优惠券
getCanUseCoupons() {
// this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
this.GET(`trade/coupon/app/goodsCoupons`, {}).then(res => {
if (res.code == "000000") {
this.couponDataList = this.handlerCouponList(res.data || []);
this.handlerCouponList(res.data || []);
}
})
},
// 处理数据
handlerCouponList(couponList) {
if(!couponList.length) return []
let newList = [], obj = {};
this.setCurrentCoupon(JSON.parse(JSON.stringify(couponList[0])));
couponList.forEach( item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = false;
// 是否可用
// TODO 要根据商品价格及券适用类型来计算
item.disabled = this.isCanSelect();
// item.disabled = !(item.couponStatus == 0 || item.couponStatus == 1);
// 是否已经选择
item.isChecked = false;
newList.push(item);
});
couponList[0].isChecked = true;
this.setSelectCouponList(newList);
return newList;
},
// 判断是否可用
isCanSelect(){
return false;
},
//获取用户信息
getUserInfo() {
......@@ -306,6 +311,13 @@ export default {
this.isShowCoupon = true;
},
// 设置当前选中的优惠券
setCurrentPopup(currentCoupon) {
console.log('setCurrentPopup', currentCoupon);
this.setCurrentCoupon(currentCoupon);
this.isShowCoupon = false;
},
// tab切换
tabToggle(index) {
this.curtTabIdx = index;
......@@ -319,11 +331,11 @@ export default {
const goods = res.data;
const tabs = [];
let price = goods.couponPrice || goods.preferentialPrice || goods.costPrice;
this.goodsInfo4Conpon = {
this.setGoodsInfo4Coupon({
price: price,
goodsType: goods.goodsType,
cardType: goods.cardType,
}
});
// 获取到商品后，再获取优惠券
this.getCanUseCoupons();
goods.salePrice = this.formatPrice(price);
......@@ -397,7 +409,7 @@ export default {
costPriceText: (costPrice / 100).toFixed(2),
savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0,
}
this.goodsInfo4Conpon.price = price;
this.goodsInfo4Coupon.price = price;
this.goodsNum = num;
} else if (res.code === "200006") {
this.$store.dispatch('logout')
......@@ -627,7 +639,12 @@ export default {
this.$toast(res.message);
}
})
}
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
},
},
}
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或