Skip to content

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

优惠券列表页面

上级 78fb8911
隐藏空白字符变更
内嵌 并排
正在显示 包含 158 行增加 和 73 行删除
src/components/coupon/coupon-list.vue
浏览文件 @ e75c96e8
......@@ -3,30 +3,35 @@
<li class="list" v-for="(item, index) in dataList" :key="index">
<section class="item">
<div class="left">
<p class="name" :class="{'status': item.showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
<p class="name" :class="{'status': !item.showStatus}">商品名不超过二十字，字数不超，字数不超过两行</p>
<div class="other">
<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': item.showStatus}" @click="toggleRules(item)">使用规则</span>
<p v-if="item.validTimeType == 2" class="time-end" :class="{'status': !item.showStatus}">距离到期仅剩<span class="coupon-pc"> {{item.validTimeSpan}} </span>天</p>
<p v-else class="time-end" :class="{'status': !item.showStatus}">{{parseTime(item.startTime)}} 至 {{parseTime(item.expireTime)}}</p>
<p v-show="!item.isAll" class="rules">
<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="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 v-show="!item.showStatus" class="status-wrapper">
<img v-if="item.isAll && item.couponStatus == 3" src="../../images/coupon/status-lw.png" alt="">
<img v-if="item.isAll && item.couponStatus in [4, 5, 6]" src="../../images/coupon/status-sx.png" alt="">
<img v-if="!item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
<img v-if="!item.isAll && item.couponStatus in [3, 4, 5]" src="../../images/coupon/status-gq.png" alt="">
<!-- <img v-else-if="item.couponStatus == 4" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.couponStatus == 5" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.couponStatus == 6" src="../../images/coupon/status-gq.png" alt=""> -->
</article>
</div>
</div>
<div class="right" :class="{'around': item.showStatus}">
<div class="right" :class="{'around': !item.showStatus}">
<div class="top">
<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>
<p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': !item.showStatus}">{{yuan(item.discountAmount)}}</span></p>
<p class="desc" :class="{'opacity': !item.showStatus}">满{{yuan(item.requiredTotalFee)}}元可用</p>
</div>
<span v-show="!item.showStatus && showBtn" class="btn coupon-pc">去使用</span>
<span v-show="!item.showStatus && !showBtn" class="btn-no">未开始</span>
<span v-show="item.showStatus" class="btn coupon-pc" @click="revieveOrUse(item)">{{getBtnText(item)}}</span>
<!-- <span v-show="item.showStatus && !showBtn" class="btn-no">未开始</span> -->
</div>
</section>
<section v-show="item.showRules" class="rule-list">
......@@ -36,6 +41,7 @@
</ul>
</template>
<script>
import { convertToYuan, parseTime } from "@/utils"
export default {
props: {
dataList: {
......@@ -49,9 +55,34 @@ export default {
}
},
methods: {
// 点击切换规则
toggleRules(item) {
console.log(item);
item.showRules = !item.showRules;
},
// 转换按钮的文案
getBtnText(item) {
if( item.couponStatus == 0 || item.couponStatus == 1) {
return item.couponStatus == 0 ? "立即领取" : "去使用";
} else {
return ""
}
},
// 领取或使用
revieveOrUse(item) {
this.$emit("revieveOrUse", item);
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
},
// parseTime
parseTime(time) {
return parseTime(time, '{yyyy}-{mm}-{dd}');
}
},
}
......
src/utils/index.js
浏览文件 @ e75c96e8
......@@ -344,4 +344,9 @@ export function concatArray(firstArr = [], secondArr = [], key) {
return all;
}
// 将分转换成元
export function convertToYuan(price) {
return (price / 100).toFixed(0);
}
src/views/coupon/coupon-list.vue
浏览文件 @ e75c96e8
......@@ -9,7 +9,7 @@
:isFixNavbar="isFixNavbar"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList v-if="dataList.length" :dataList="dataList"></CouponList>
<CouponList v-if="dataList.length" :dataList="dataList" @revieveOrUse="revieveOrUse"></CouponList>
<no-coupon v-else></no-coupon>
</section>
</template>
......@@ -17,8 +17,9 @@
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';
import { getWebPageUrl } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
export default {
components: {
......@@ -32,28 +33,45 @@ export default {
isWeb: window.__isWeb,
bgColor: "#fff",
isShowNavbar: true,
navTitle: '优惠券',
navTitle: "优惠券",
isFixNavbar: true,
shareUrl: '',
dataList: [],
shareUrl: "",
dataList: []
};
},
computed: {
...mapGetters(["webUserInfo"])
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log("userInfo", userInfo);
if (userInfo.id) {
this.getAllCoupons();
}
},
deep: true
}
},
created() {
let _this = this;
let href = location.href;
this.couponId = this.$route.query.couponId || '';
this.shareUrl = getWebPageUrl(`profexam/#/coupon-list?couponId=${this.couponId}`);
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);
}
localStorage.setItem("returnUrl", this.shareUrl);
window.__getUserInfo4CouponList = function(param) {
console.log("__getUserInfo4CouponList", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getMyCoupons();
_this.getAllCoupons();
};
window.__refresh = function() {
......@@ -61,34 +79,17 @@ export default {
};
},
computed: {
...mapGetters(['webUserInfo'])
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log('userInfo', userInfo);
if(userInfo.id) {
// this.getMyCoupons();
this.getAllCoupons();
}
},
deep: true
}
},
mounted() {
// 如果在浏览器或微信里
if(this.isWeb) {
if (this.isWeb) {
const { token, info } = this.$store.state.user;
console.log('token && !info.id', !info.id, 'wef', token);
if(!token) {
console.log("token && !info.id", !info.id, "wef", token);
if (!token) {
this.goLogin();
return;
}
if (token && !info.id) {
this.$store.dispatch('getUserInfo');
this.$store.dispatch("getUserInfo");
return;
}
// 从登陆页面过来的
......@@ -96,7 +97,6 @@ export default {
} else {
this.getUserInfo();
}
},
methods: {
//获取用户信息
......@@ -108,55 +108,103 @@ export default {
// 获取我的优惠券列表
getMyCoupons() {
this.commonCheckToken( () => {
this.commonCheckToken(() => {
this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
if (res.code == "000000") {
this.dataList = this.handlerCouponList(res.data || []);
this.dataList = this.handlerMyCouponList(
res.data.searchCouponModelList || []
);
}
})
})
});
});
},
// 主动领取优惠券
// 状态码：1已下架，请领取其他优惠券 2优惠券已失效 3已领取，快去使用优惠券 4优惠券已领完 5成功领取
receiveCouponByid(couponId) {
this.commonCheckToken(() => {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
Toast(data.description);
this.searchCoupons();
}
}
);
});
},
handlerCouponList(couponList) {
if(!couponList.length) return []
// 处理(所有)列表数据
// couponStatus 优惠券状态：0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
handlerAllCouponList(couponList) {
if (!couponList.length) return [];
let newList = [], obj = {};
couponList.forEach( item => {
couponList.forEach(item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = true;
item.isAll = true;
// 是否显示对应的规则
item.showRules = false;
item.showRules = false;
// 是否可用
item.showStatus = true;
item.showStatus = item.couponStatus == 0 || item.couponStatus == 1;
newList.push(item);
});
console.log(newList);
return newList;
},
// 获取所有优惠券列表
getAllCoupons() {
this.commonCheckToken( () => {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
this.commonCheckToken(() => {
let couponId = this.couponId;
if (couponId) {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
Toast(data.description);
}
this.searchCoupons();
}
);
} else {
this.searchCoupons();
}
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.dataList = this.handlerCouponList(res.data || []);
}
})
})
});
},
// 查询所有优惠券列表
searchCoupons() {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
};
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.dataList = this.handlerAllCouponList(
res.data.searchCouponModelList || []
);
}
});
},
},
}
// 领取或使用 couponStatus 0: 立即领取; 1: 去使用;
revieveOrUse(item) {
// 跳转到使用页面（如果只适用一个商品，则直接跳转到商品页面；否则跳转到商品列表页面）
// 要根据用户信息，获取定位信息等，从而获取对应的商品
// TODO
if (item.couponStatus == 1) {
} else {
this.receiveCouponByid(item.couponId);
}
}
}
};
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #F8F9FA;
background: #f8f9fa;
}
</style>
\ No newline at end of file
src/views/index.vue
浏览文件 @ e75c96e8
......@@ -73,6 +73,7 @@ import Loading from "@/components/common/common-loading";
import CommonTitle from "@/components/common/common-title";
import { mapGetters, mapActions } from "vuex";
import { getWebPageUrl, parseTime } from "@/utils/index";
import { Toast } from "vant";
export default {
data() {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或