提交 bb125d64 编写于 作者: guangjun.yang's avatar guangjun.yang

新改动,UI调整等

上级 031f889b
......@@ -11,8 +11,8 @@
</p>
<p v-else class="time-end" :class="{'status': !item.disabled}">{{parseTime(item.startTime)}}{{parseTime(item.expireTime)}}</p>
<p v-show="!item.isAll" class="rules">
<span :class="{'status': !item.disabled}" @click="toggleRules(item)">使用规则</span>
<img v-if="item.showRules" src="../../images/coupon/arrow-down.png" alt="">
<span :class="{'status': !item.disabled}" @click.prevent.stop="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.disabled" class="status-wrapper">
......@@ -29,12 +29,12 @@
</article>
</div>
</div>
<div class="right" :class="{'around': !item.disabled}">
<div class="right" :class="{'around': !item.disabled}" @click="revieveOrUse(item)">
<div class="top">
<p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': !item.disabled}">{{yuan(item.discountAmount)}}</span></p>
<p class="desc" :class="{'opacity': !item.disabled}">满{{yuan(item.requiredTotalFee)}}元可用</p>
</div>
<span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc" @click="revieveOrUse(item)">{{getBtnText(item)}}</span>
<span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc">{{getBtnText(item)}}</span>
<span v-show="item.disabled && item.couponStatus == 4" class="btn-no">未开始</span>
</div>
</section>
......@@ -143,7 +143,7 @@ export default {
.status-wrapper {
position: absolute;
top: 10px;
left: 140px;
left: 150px;
img {
width: 75px;
height: 75px;
......@@ -171,6 +171,7 @@ export default {
.price {
height: 30px;
line-height: 30px;
font-weight: 700;
font-size: 30px;
}
.desc {
......@@ -180,14 +181,17 @@ export default {
}
.btn {
display: flex;
width: 70px;
height: 25px;
width: 76px;
height: 28px;
line-height: 28px;
justify-content: center;
align-items: center;
line-height: 25px;
border: 1px solid #FB5B52;
// border: 1px solid #FB5B52;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #FB5B52;
}
.btn-no {
display: flex;
......
......@@ -10,7 +10,12 @@
:isInMergeDetail="isInMergeDetail"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList v-if="dataList.length" :dataList="dataList" @revieveOrUse="revieveOrUse" :fromPage="fromPage"></CouponList>
<CouponList
v-if="dataList.length"
:dataList="dataList"
@revieveOrUse="revieveOrUse"
:fromPage="fromPage"
></CouponList>
<no-coupon v-else></no-coupon>
</section>
</template>
......@@ -21,7 +26,7 @@ import NoCoupon from "@/components/coupon/no-coupon";
import { getWebPageUrl, getHactiveUrl } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
import { setCookie, getCookie, delCookie } from '@/utils/index';
import { setCookie, getCookie, delCookie } from "@/utils/index";
export default {
components: {
......@@ -41,7 +46,7 @@ export default {
dataList: [],
provinceId: "",
fromPage: "",
isInMergeDetail: false,
isInMergeDetail: false
};
},
computed: {
......@@ -65,7 +70,7 @@ export default {
let href = location.href;
this.couponId = this.$route.query.couponId || "";
this.fromPage = this.$route.query.fromPage || "";
this.couponToken = this.$route.query.couponToken || ""
this.couponToken = this.$route.query.couponToken || "";
this.navTitle = this.fromPage ? "我的优惠券" : "优惠券";
this.shareUrl = getWebPageUrl(
......@@ -76,7 +81,7 @@ export default {
}
localStorage.setItem("returnUrl", this.shareUrl);
if(this.fromPage) {
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50601`
});
......@@ -98,12 +103,16 @@ export default {
// 如果在浏览器或微信里
if (this.isWeb) {
const { token, info } = this.$store.state.user;
this.token = token || this.couponToken || localStorage.getItem("couponToken") || getCookie("couponToken");
this.token =
token ||
this.couponToken ||
localStorage.getItem("couponToken") ||
getCookie("couponToken");
if (this.token && !info.id) {
console.log('4444 this.token', this.token);
console.log("4444 this.token", this.token);
// this.$store.dispatch('setToken', this.token);
this.commonCheckToken(() => {
this.$store.dispatch('setToken', this.token);
this.$store.dispatch("setToken", this.token);
// this.$store.dispatch("getUserInfo");
});
return;
......@@ -129,8 +138,9 @@ export default {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [], false
);
res.data.baseCouponModelList || [],
false
);
}
});
});
......@@ -156,14 +166,18 @@ export default {
// couponStatus 优惠券状态:0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
handlerAllCouponList(couponList, isAll) {
if (!couponList.length) return [];
let newList = [], obj = {};
let newList = [],
obj = {};
couponList.forEach(item => {
// 是否是列表页面,否则是我的优惠券页面
item.isAll = isAll;
// 是否显示对应的规则
item.showRules = false;
// 是否可用
item.disabled = item.couponStatus == 0 || item.couponStatus == 1 || item.couponStatus == 4;
item.disabled =
item.couponStatus == 0 ||
item.couponStatus == 1 ||
item.couponStatus == 4;
newList.push(item);
});
console.log(newList);
......@@ -172,14 +186,16 @@ export default {
// 获取所有优惠券列表
getAllCoupons() {
console.log('getAllCoupons');
console.log("getAllCoupons");
this.commonCheckToken(() => {
let couponId = this.couponId;
if (couponId) {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
data.description && Toast(data.description);
if (data.description) {
this.$toast({ message: data.description, duration: 5000 });
}
}
this.searchCoupons();
}
......@@ -203,8 +219,8 @@ export default {
() => {
console.log("share success...");
}
);
if(this.fromPage) {
);
if (this.fromPage) {
this.getMyCoupons();
} else {
this.searchCouponsAction();
......@@ -223,7 +239,8 @@ export default {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [], true
res.data.baseCouponModelList || [],
true
);
}
});
......@@ -234,7 +251,8 @@ export default {
// 跳转到使用页面(如果只适用一个商品,则直接跳转到商品页面;否则跳转到商品列表页面)
// 要根据用户信息,获取定位信息等,从而获取对应的商品
// TODO
if(this.fromPage) {
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50602#${item.couponId}#${item.couponName}`
});
......@@ -243,14 +261,17 @@ export default {
if (item.couponStatus == 1) {
let pageUrl = "";
// 如果适用的商品(卡)个数多于一个,则跳转到商品列表
if(item.couponMappingModelList.length > 1) {
pageUrl = getHactiveUrl(`/message_push/#/study-card?origin=1&couponArea=${this.provinceId}&couponToken=${this.token}`);
if (item.couponMappingModelList.length > 1) {
pageUrl = getHactiveUrl(
`/message_push/#/study-card?origin=1&couponArea=${this.provinceId}&couponToken=${this.token}`
);
this.jumpForCoupon(pageUrl);
} else {
item.couponMappingModelList.length && this.getCardInfoByProvinceId(item);
item.couponMappingModelList.length &&
this.getCardInfoByProvinceId(item);
}
// 立即领取
} else {
// 立即领取
} else if (item.couponStatus == 0) {
this.receiveCouponByid(item.couponId);
}
},
......@@ -261,14 +282,17 @@ export default {
let param = {
area: this.provinceId + "",
cardType: coupon.cardType || 3,
cardTypeList: [ coupon.cardType || 3],
goodsType: coupon.goodsType,
cardTypeList: [coupon.cardType || 3],
goodsType: coupon.goodsType
};
param.setEntry = true;
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
let good = (res.data && res.data[0]) || { id: '', name: "职称考精讲课程卡" };
if(good.id) {
let good = (res.data && res.data[0]) || {
id: "",
name: "职称考精讲课程卡"
};
if (good.id) {
let pageUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${good.id}`
);
......@@ -282,7 +306,7 @@ export default {
// 根据环境跳转
jumpForCoupon(pageUrl) {
if(this.isWeb) {
if (this.isWeb) {
location.href = pageUrl;
} else {
let paramList = [
......@@ -293,13 +317,13 @@ export default {
seqNo: 1
}
];
rocNative && rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
rocNative &&
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
};
</script>
......
......@@ -35,7 +35,7 @@
<div class="bought">{{ goods.saledNum }}购买</div>
</div>
</div>
<!-- 购买数量、支付方式 -->
<!-- 购买数量、优惠券、支付方式 -->
<div class="buy-box border-line">
<div class="flex">
<div class="name">购买数量</div>
......@@ -48,7 +48,7 @@
<div class="flex buy-way">
<div class="name">优惠券</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc">{{getCPText()}}</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc" :class="{'no-coupon' : getCPText() == '无优惠券'}">{{getCPText()}}</div>
</div>
<div class="flex buy-way">
......@@ -1123,5 +1123,8 @@ export default {
&.no-pt {
padding-top: 0px;
}
.no-coupon {
color: #979899;
}
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册