Skip to content

P
pica-annual-summary
提交 a0543152 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

优惠券弹框

上级 27da4616
隐藏空白字符变更
内嵌 并排
正在显示 包含 337 行增加 和 119 行删除
src/components/coupon/coupon-list.vue
浏览文件 @ a0543152
<template>
<ul class="comp-list-wrapper">
<li class="list" v-for="item in [1, 2, 3]" :key="item">
<li class="list" v-for="(item, index) in dataList" :key="index">
<section class="item">
<div class="left">
<p class="name" :class="{'status': showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
<p class="name" :class="{'status': item.showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
<div class="other">
<p v-if="true" class="time-end" :class="{'status': showStatus}">距离到期仅剩 <span class="coupon-pc">8</span> 天</p>
<p v-else class="time-end" :class="{'status': showStatus}">2020-10-15 至 2020-12-01</p>
<p v-if="item.validTimeType == 2" class="time-end" :class="{'status': item.showStatus}">距离到期仅剩 <span class="coupon-pc">8</span> 天</p>
<p v-else class="time-end" :class="{'status': item.showStatus}">2020-10-15 至 2020-12-01</p>
<p class="rules">
<span :class="{'status': showStatus}" @click="toggleRules(item)">使用规则</span>
<img v-if="showRules" src="../../images/coupon/arrow-down.png" alt="">
<span :class="{'status': item.showStatus}" @click="toggleRules(item)">使用规则</span>
<img v-if="item.showRules" src="../../images/coupon/arrow-down.png" alt="">
<img v-else src="../../images/coupon/arrow-up.png" alt="">
</p>
<article v-show="showStatus" class="status-wrapper">
<img v-if="showStatus == 1" src="../../images/coupon/status-sx.png" alt="">
<img v-else-if="showStatus == 2" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="showStatus == 3" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="showStatus == 4" src="../../images/coupon/status-gq.png" alt="">
<article v-show="item.showStatus" class="status-wrapper">
<img v-if="item.showStatus == 1" src="../../images/coupon/status-sx.png" alt="">
<img v-else-if="item.showStatus == 2" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.showStatus == 3" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.showStatus == 4" src="../../images/coupon/status-gq.png" alt="">
</article>
</div>
</div>
<div class="right" :class="{'around': showStatus}">
<div class="right" :class="{'around': item.showStatus}">
<div class="top">
<p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': showStatus}">50</span></p>
<p class="desc" :class="{'opacity': showStatus}">满100元可用</p>
<p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': item.showStatus}">50</span></p>
<p class="desc" :class="{'opacity': item.showStatus}">满100元可用</p>
</div>
<span v-show="!showStatus && showBtn" class="btn coupon-pc">去使用</span>
<span v-show="!showStatus && !showBtn" class="btn-no">未开始</span>
<span v-show="!item.showStatus && showBtn" class="btn coupon-pc">去使用</span>
<span v-show="!item.showStatus && !showBtn" class="btn-no">未开始</span>
</div>
</section>
<section v-show="showRules" class="rule-list">
<p v-html="descContent"></p>
<section v-show="item.showRules" class="rule-list">
<p v-html="item.couponExplain"></p>
</section>
</li>
</ul>
</template>
<script>
export default {
props: {
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
showStatus: false,
showBtn: true,
showRules: true,
descContent: "1. 的量据特原今参商队把养因然据准加感子新亲2. 和必局方候多相人着山关议型现酸存性合外将界计3. 火电容收万般青起内别且越百商几该半写计机天队效儿六必群小"
}
},
methods: {
toggleRules(item) {
console.log(item);
this.showRules = !this.showRules;
item.showRules = !item.showRules;
}
},
}
......
src/components/coupon/coupon-select-list.vue
浏览文件 @ a0543152
......@@ -10,9 +10,9 @@
<span>优惠券</span>
<img @click="cancle" src="../../images/cme/close.png" />
</article>
<article class="list-wrapper">
<article v-if="true" class="list-wrapper">
<p>已选择1张优惠券，共抵扣<span class="sc thin"> ¥{{couponPrice}}</span></p>
<div class="item" :class="{'disabled': disabled}" v-for="item in [1, 2, 3, 4]" :key="item">
<div class="item" :class="{'disabled': disabled}" v-for="(item, index) in dataList" :key="index">
<div class="left opacity">
<p class="price"><span class="symbol sc">¥</span><span class="num sc">100</span></p>
<p class="desc">满100元可用</p>
......@@ -28,12 +28,14 @@
</p>
</div>
</div>
<div class="right" @click="toggleChecked">
<img v-show="isChecked" src="../../images/coupon/radio-checked.png" />
<img v-show="!isChecked" src="../../images/coupon/radio-no.png" />
<div class="right" @click="toggleChecked(item)">
<img v-show="item.isChecked" src="../../images/coupon/radio-checked.png" />
<img v-show="!item.isChecked" src="../../images/coupon/radio-no.png" />
</div>
</div>
</article>
<no-coupon v-else></no-coupon>
<article class="bottom">
<van-button @click="confirm" size="large" round color="#449284">确定使用</van-button>
</article>
......@@ -41,11 +43,29 @@
</van-popup>
</template>
<script>
import NoCoupon from "@/components/coupon/no-coupon";
export default {
components: {
NoCoupon
},
props: {
isShow: {
type: Boolean,
default: true
},
dataList: {
type: Array,
default: () => []
},
goodsInfo: {
type: Object,
default: () => {
return {
price: 0,
goodsType: 0,
cardType: 0,
}
}
}
},
......@@ -53,27 +73,45 @@ export default {
return {
couponPrice: 100,
disabled: false,
isChecked: true
isChecked: true,
currentCoupon: {couponId: '', canUseNum: 0, couponPrice: 0}
};
},
//
watch: {
isShow: {
// 处理是否可用
handler(newVal) {
}
}
},
mounted() {
this.$forceUpdate()
// this.$forceUpdate()
},
methods: {
// 取消操作
cancle() {
this.$emit("cancle");
},
// 查找已经选择的
confirm() {
this.$emit("confirm", aCode);
this.$emit("confirm", this.currentCoupon);
},
toggleChecked() {
this.isChecked = !this.isChecked;
// 切换当前选中优惠券
toggleChecked(item) {
if(!item.isChecked) {
this.dataList.forEach( (cItem, index) => {
cItem.isChecked = false;
})
item.isChecked = true;
} else {
item.isChecked = false;
}
}
}
};
......
src/router/router.js
浏览文件 @ a0543152
......@@ -12,7 +12,7 @@ const purchaseRezult = r => require.ensure([], () => r(require('../views/purchas
const questionBank = r => require.ensure([], () => r(require('../views/question-bank')), 'question-bank')
const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
const couponList = r => require.ensure([], () => r(require('../views/coupon/list')), 'coupon-list')
const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
export default [{
path: '/',
......
src/store/getters.js
浏览文件 @ a0543152
......@@ -16,5 +16,6 @@ const getters = {
freeFlag: state => state.question.titleConfig.freeFlag,
totalCount: state => state.question.titleConfig.totalCount,
canRunNext: state => state.question.canRunNext,
webUserInfo: state => state.user.info,
}
export default getters
src/store/modules/user.js
浏览文件 @ a0543152
......@@ -41,7 +41,7 @@ const user = {
try {
const errCallBack = () => {
dispatch('logout');
Toast('登录失效，请重新登录~')
// Toast('登录失效，请重新登录~')
}
const res = await fetch({
url: getBaseUrl('account/login/web'),
......
src/utils/mixins.js
浏览文件 @ a0543152
......@@ -19,14 +19,14 @@ module.exports = {
this.token = this.getUrlKey('token') || (query && query.token)
},
computed: {
...mapGetters(['canRunNext'])
...mapGetters(["userInfo", "canRunNext"])
},
mounted() {
},
methods: {
...mapActions(["goLogin"]),
...mapActions(["setUserInfo", "goLogin"]),
getUrlPara(obj) {
let dataStr = ''
......
src/views/coupon/coupon-list.vue 0 → 100644
浏览文件 @ a0543152
<template>
<section class="coupon-list-wrapper">
<CommonNavbar
:isWeb="false"
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList v-if="dataList.length" :dataList="dataList"></CouponList>
<no-coupon v-else></no-coupon>
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CouponList from "@/components/coupon/coupon-list";
import NoCoupon from "@/components/coupon/no-coupon";
import { getWebPageUrl } from '@/utils';
import { mapGetters, mapActions } from 'vuex';
export default {
components: {
CommonNavbar,
CouponList,
NoCoupon
},
data() {
return {
token: "",
isWeb: window.__isWeb,
bgColor: "#fff",
isShowNavbar: true,
navTitle: '优惠券',
isFixNavbar: true,
shareUrl: '',
dataList: [],
}
},
created() {
let _this = this;
let href = location.href;
this.couponId = this.$route.query.couponId || '';
this.shareUrl = getWebPageUrl(`profexam/#/coupon-list?couponId=${this.couponId}`);
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
location.replace(this.shareUrl);
}
localStorage.setItem('returnUrl', this.shareUrl);
window.__getUserInfo4CouponList = function(param) {
console.log("__getUserInfo4CouponList", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getMyCoupons();
};
window.__refresh = function() {
_this.getUserInfo();
};
},
computed: {
...mapGetters(['webUserInfo'])
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log('userInfo', userInfo);
if(userInfo.id) {
// this.getMyCoupons();
this.getAllCoupons();
}
},
deep: true
}
},
mounted() {
// 如果在浏览器或微信里
if(this.isWeb) {
const { token, info } = this.$store.state.user;
console.log('token && !info.id', !info.id, 'wef', token);
if(!token) {
this.goLogin();
return;
}
if (token && !info.id) {
this.$store.dispatch('getUserInfo');
return;
}
// 从登陆页面过来的
this.getAllCoupons();
} else {
this.getUserInfo();
}
},
methods: {
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4CouponList"
});
},
// 获取我的优惠券列表
getMyCoupons() {
this.commonCheckToken( () => {
this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
if (res.code == "000000") {
this.dataList = this.handlerCouponList(res.data || []);
}
})
})
},
handlerCouponList(couponList) {
if(!couponList.length) return []
let newList = [], obj = {};
couponList.forEach( item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = true;
// 是否显示对应的规则
item.showRules = false;
// 是否可用
item.showStatus = true;
newList.push(item);
});
return newList;
},
// 获取所有优惠券列表
getAllCoupons() {
this.commonCheckToken( () => {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
}
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.dataList = this.handlerCouponList(res.data || []);
}
})
})
},
},
}
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #F8F9FA;
}
</style>
\ No newline at end of file
src/views/coupon/list.vue 已删除 100644 → 0
浏览文件 @ 27da4616
<template>
<section class="coupon-list-wrapper">
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList></CouponList>
<!-- <no-coupon></no-coupon> -->
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CouponList from "@/components/coupon/coupon-list";
import NoCoupon from "@/components/coupon/no-coupon";
export default {
components: {
CommonNavbar,
CouponList,
NoCoupon
},
data() {
return {
isWeb: false,
bgColor: "#fff",
isShowNavbar: true,
navTitle: '优惠券',
isFixNavbar: true,
}
},
}
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #F8F9FA;
}
</style>
\ No newline at end of file
src/views/goods-detail.vue
浏览文件 @ a0543152
......@@ -77,13 +77,16 @@
</div>
</div>
<Loading v-show="showLoading" />
<!--去激活-->
<!-- 优惠券弹框 -->
<CouponSelectList
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="changeCardAction">
:dataList="couponDataList"
:goodsInfo="goodsInfo4Conpon"
:isShow="isShowCoupon"
@cancle="closeCouponPopup"
@confirm="showCouponPopup">
</CouponSelectList>
<CourseDialog
content="微信授权"
subContent='<p style="font-size: 16px; font-weight: bold; text-align: center;">云鹊医申请以下权限：</p><p style="font-size: 14px; color: #999; text-align: center; padding-bottom: 10px;">获得你的公开信息（头像，昵称等）</p>'
......@@ -133,13 +136,15 @@ export default {
tabW: 0, // tab的宽度
showLoading: false,
isShowDialog: false,
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
isShowCoupon: false, //是否展示激活弹框,
courseUrl: "",
couponDataList: [],
currentCoupon: {couponId: '', canUseNum: 0, couponPrice: ''},
goodsInfo4Conpon: {}
}
},
computed: {
...mapGetters(["userInfo"]),
...mapGetters(["userInfo", "webUserInfo"]),
wxInfo() {
return this.$store.state.user.wxInfo;
},
......@@ -151,6 +156,27 @@ export default {
return this.tabW * num;
},
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log('userInfo', userInfo);
if(userInfo.id) {
this.getGoodsInfo();
}
},
deep: true
},
// 监听当前商品信息
goodsInfo4Conpon: {
handler(goodsInfo) {
},
deep: true
}
},
created() {
let _this = this;
console.log('in goods detail new', 111111111);
......@@ -174,10 +200,11 @@ export default {
console.log("__getUserInfo4GD", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getCanUseCoupons();
};
window.__refresh = function() {
_this.getAppUserInfo();
_this.getUserInfo();
};
window.__WXpay = function(params){
......@@ -185,7 +212,6 @@ export default {
};
},
mounted() {
this.getGoodsInfo();
this.getTabW();
console.log('this.isWeb ... isWechat - 1', this.isWeb, isWechat);
......@@ -193,9 +219,12 @@ export default {
const { token, info } = this.$store.state.user;
if (token && !info.id) {
this.$store.dispatch('getUserInfo');
return;
}
// 从登陆页面过来时
this.getGoodsInfo();
} else {
this.getAppUserInfo();
this.getUserInfo();
}
// 数量加减
......@@ -207,8 +236,32 @@ export default {
methods: {
...mapActions(["setUserInfo"]),
// 获取我的优惠券列表
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 || []);
}
})
},
handlerCouponList(couponList) {
if(!couponList.length) return []
let newList = [], obj = {};
couponList.forEach( item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = false;
// 是否可用
item.isChecked = false;
newList.push(item);
});
return newList;
},
//获取用户信息
getAppUserInfo() {
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4GD"
});
......@@ -245,16 +298,12 @@ export default {
});
},
cancleChangeCard() {
this.showChangeCard = false;
},
changeCardAction(cardKey, isInTips) {
closeCouponPopup() {
this.isShowCoupon = false;
},
showCouponPopup() {
this.showChangeCard = true;
this.isShowCoupon = true;
},
// tab切换
......@@ -270,6 +319,13 @@ export default {
const goods = res.data;
const tabs = [];
let price = goods.couponPrice || goods.preferentialPrice || goods.costPrice;
this.goodsInfo4Conpon = {
price: price,
goodsType: goods.goodsType,
cardType: goods.cardType,
}
// 获取到商品后，再获取优惠券
this.getCanUseCoupons();
goods.salePrice = this.formatPrice(price);
goods.costPriceText = (goods.costPrice / 100).toFixed(2);
goods.hasDiscount = !!(goods.couponPrice || goods.preferentialPrice);
......@@ -341,6 +397,7 @@ export default {
costPriceText: (costPrice / 100).toFixed(2),
savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0,
}
this.goodsInfo4Conpon.price = price;
this.goodsNum = num;
} else if (res.code === "200006") {
this.$store.dispatch('logout')
......@@ -377,19 +434,20 @@ export default {
component_tag: `888#88801`
});
this.commonCheckToken(() => {
let num = this.curtGoodsNum;
if (this.goods.limitPurchase && this.goods.limitPurchaseNum && num >= this.goods.limitPurchaseNum) {
this.$toast('已达最大限购数量')
return;
}
if (this.goods.goodsStocks && num >= this.goods.goodsStocks) {
this.$toast('库存不足')
return;
}
this.curtGoodsNum = num + 1;
this.countTotalPrice();
});
let num = this.curtGoodsNum;
if (this.goods.limitPurchase && this.goods.limitPurchaseNum && num >= this.goods.limitPurchaseNum) {
this.$toast('已达最大限购数量')
return;
}
if (this.goods.goodsStocks && num >= this.goods.goodsStocks) {
this.$toast('库存不足')
return;
}
this.curtGoodsNum = num + 1;
this.countTotalPrice();
},
// 数量减
......@@ -398,14 +456,14 @@ export default {
component_tag: `888#88802`
});
this.commonCheckToken(() => {
let num = this.curtGoodsNum;
if (num <= 1) {
this.$toast('最少购买一张哦')
return;
}
this.curtGoodsNum = num - 1;
this.countTotalPrice();
});
let num = this.curtGoodsNum;
if (num <= 1) {
this.$toast('最少购买一张哦')
return;
}
this.curtGoodsNum = num - 1;
this.countTotalPrice();
},
// goLogin() {
// this.$store.dispatch('goLogin');
......
src/views/merge-detail.vue
浏览文件 @ a0543152
......@@ -314,7 +314,7 @@ export default {
},
computed: {
...mapGetters(["userInfo"])
// ...mapGetters(["userInfo"])
},
created() {
......@@ -369,7 +369,7 @@ export default {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo"]),
// ...mapActions(["setUserInfo"]),
cancleChangeCard() {
this.showChangeCard = false;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或