Skip to content

P
pica-professional-exam
提交 ea8c272f 编写于 作者: jingqi.liu's avatar jingqi.liu
浏览文件
操作

优惠券

上级 1bd225cf
隐藏空白字符变更
内嵌 并排
正在显示 包含 5362 行增加 和 4514 行删除
package-lock.json
浏览文件 @ ea8c272f
因为 它太大了无法显示 源差异 。您可以改为 查看blob。
src/components/common/common-navbar.vue
浏览文件 @ ea8c272f
<template>
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<div
class="nav-part"
:style="'background:' + bgColor + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
+ 'padding-top:' + paddingTop+ ';padding-bottom:' + paddingbtm + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<span class="nav-back" @click="goBack">
......@@ -18,6 +18,7 @@
<img v-show="!isBlack" src="../../images/cme/share-icon-white.png"/>
</span>
</div>
<slot name="tabs" />
</div>
</section>
</template>
......@@ -97,6 +98,10 @@ export default {
type: String | Number,
default: ""
},
paddingbtm: {
type: String | Number,
default: "0px"
},
isInMergeDetail: {
type: Boolean,
default: true
......
src/router/router.js
浏览文件 @ ea8c272f
......@@ -14,6 +14,7 @@ const questionBank = r => require.ensure([], () => r(require('../views/question-
const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
const couponCenter= r => require.ensure([], () => r(require('../views/coupon-center/index')), 'coupon-center')
export default [{
path: '/',
......@@ -80,6 +81,13 @@ export default [{
meta: {
title: '优惠券'
}
},
{
path: '/coupon-center',
component: couponCenter,
meta: {
title: '领券中心'
}
}
]
}]
src/utils/env-config.js
浏览文件 @ ea8c272f
......@@ -4,11 +4,11 @@
export const envConfig = {
development: {
// baseUrl: 'http://sosoapi.yunqueyi.com/sosoapi-web/pass/mock/72/',
// baseUrl: 'https://dev-sc.yunqueyi.com/',
baseUrl: 'https://dev-sc.yunqueyi.com/',
// baseUrl: 'http://10.177.15.180:10202/',
// baseUrl: 'http://192.168.140.14:10201/',
baseUrl: 'https://test1-sc.yunqueyi.com/',
// baseUrl: 'https://test1-sc.yunqueyi.com/',
apiUrl: 'https://dev-api.yunqueyi.com/',
webPageUrl: 'https://dev-phome.yunqueyi.com/',
hactiveUrl: 'https://dev-hactive.yunqueyi.com',
......
src/utils/index.js
浏览文件 @ ea8c272f
......@@ -70,6 +70,7 @@ export function getTradeType() {
// 根据不同环境，生成URL
function getConfigByEnvType(urlType) {
console.log(process.env.BUILD_ENV,'process.env.BUILD_ENV')
return envConfig[process.env.BUILD_ENV][urlType]
}
......
src/utils/mixins.js
浏览文件 @ ea8c272f
......@@ -231,7 +231,6 @@ module.exports = {
// 校验token，有效则调用回调函数，否则调起原生登陆页面
commonCheckToken(cb) {
console.log('5555 this.token', this.token);
let param = {
token: this.token || this.$store.state.user.token || this.$store.state.coop.userInfo.userToken || localStorage.getItem("couponToken") || getCookie("couponToken"),
// token: this.token || this.$store.state.user.token || this.$store.state.coop.userInfo.userToken,
......
src/views/coupon-center/index.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<section class="coupon-list-wrapper" :class="{ 'no-pt': isWeb }">
<div class="page-wrapper">
<!-- <common-header
:bg-color="bgColor"
title="领券中心"
:is-black="true"
:is-fixheader="true"
:is-hundred-height="true"
/> -->
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
:paddingbtm="paddingbtm"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:isInMergeDetail="isInMergeDetail"
>
</CommonNavbar>
<div class="page-content">
<van-list v-if="couponList.length" class="list" enable-flex scroll-y>
<coupo-item
v-for="(item, index) in couponList"
:key="index"
class="item"
:coupon-detail="item"
:has-tips="hasTips"
:has-stock="false"
@goUse="chooseCoupon"
/>
</van-list>
<div v-else>
<empty />
</div>
</div>
<coupon-tips :visible.sync="show" @close="close" />
</div>
</section>
</template>
<script>
import CoupoItem from "../coupon/components/coupon-item.vue";
import empty from "../coupon/components/empty.vue";
// import CommonHeader from '@/components/common/header';
import CommonNavbar from "@/components/common/common-navbar";
import CouponTips from "../coupon/components/coupon-tips.vue";
// import { getSearchCoupons, receiveCoupon } from "@/api/coupon.js";
import { getWebPageUrl, getHactiveUrl } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { setCookie, getCookie, delCookie } from "@/utils/index";
export default {
components: {
CoupoItem,
empty,
// CommonHeader,
CommonNavbar,
CouponTips,
},
data() {
return {
couponList: [],
hasTips: false,
show: false,
token: "",
couponToken: "",
shareUrl: "",
isWeb: window.__isWeb,
bgColor: "#fff",
paddingbtm: 0,
isShowNavbar: true,
navTitle: "领券中心",
isFixNavbar: true,
isInMergeDetail: false,
};
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log("userInfo", userInfo);
if (userInfo.id) {
this.getSearchCoupons();
}
},
deep: true,
},
},
computed: {
...mapGetters(["webUserInfo"]),
},
created() {
let _this = this;
let href = location.href;
this.couponToken = this.$route.query.couponToken || "";
this.shareUrl = getWebPageUrl(`profexam/#/coupon-center`);
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.getSearchCoupons();
};
window.__refresh = function () {
console.log(1);
_this.getUserInfo();
};
},
mounted() {
// 如果在浏览器或微信里
if (this.isWeb) {
const { token, info } = this.$store.state.user;
this.token =
token ||
this.couponToken ||
localStorage.getItem("couponToken") ||
getCookie("couponToken");
if (this.token && !info.id) {
console.log("4444 this.token", this.token);
// this.$store.dispatch('setToken', this.token);
this.commonCheckToken(() => {
this.$store.dispatch("setToken", this.token);
// this.$store.dispatch("getUserInfo");
});
}
// 从登陆页面过来的
this.getSearchCoupons();
} else {
this.getUserInfo();
}
},
methods: {
...mapActions(["setUserInfo"]),
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4CouponList",
});
},
getSearchCoupons() {
this.POST(`trade/coupon/app/searchCoupons`, {}).then((res) => {
console.log(res);
this.couponList = res.data.baseCouponModelList;
});
},
chooseCoupon(item) {
switch (item.couponStatus) {
case 0:
receiveCoupon(item.couponId, item.grantConfigId).then((res) => {
console.log(res, "receiveCoupon");
// couponType 1 满减 2 立减 todo 现金红包
// if (item.couponType === 2) {
// this.show = true;
// } else {
this.$toast("领取成功");
this.getSearchCoupons();
// }
});
break;
case 1:
// uni.switchTab({
// url: "/pages/home/index",
// });
this.$router.push({
path: "/consultation/",
query: { backMethod: "web" },
});
break;
default:
break;
}
console.log(this.show, item);
},
close() {},
},
};
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #f8f9fa;
&.no-pt {
padding-top: 10px;
}
}
.page-wrapper {
height: auto;
display: flex;
flex-direction: column;
/deep/ .nav-title {
border-bottom: 1px solid transparent !important;
position: relative !important;
}
.ios_safe_height {
background-color: #fff;
}
.page-content {
padding: 10px 12px 24px;
}
.list {
padding-bottom: 50px;
}
}
</style>
src/views/coupon-old/coupon-list.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<section class="coupon-list-wrapper" :class="{'no-pt': isWeb}">
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:isInMergeDetail="isInMergeDetail"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList
v-if="dataList.length"
:dataList="dataList"
@revieveOrUse="revieveOrUse"
:fromPage="fromPage"
></CouponList>
<no-coupon v-else></no-coupon>
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CouponList from "@/components/coupon/component-list";
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";
export default {
components: {
CommonNavbar,
CouponList,
NoCoupon
},
data() {
return {
token: "",
isWeb: window.__isWeb,
bgColor: "#fff",
isShowNavbar: true,
navTitle: "优惠券",
isFixNavbar: true,
shareUrl: "",
dataList: [],
provinceId: "",
fromPage: "",
isInMergeDetail: false
};
},
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.fromPage = this.$route.query.fromPage || "";
this.couponToken = this.$route.query.couponToken || "";
this.navTitle = this.fromPage ? "我的优惠券" : "优惠券";
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);
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50601`
});
}
window.__getUserInfo4CouponList = function(param) {
console.log("__getUserInfo4CouponList", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getAllCoupons();
};
window.__refresh = function() {
_this.getUserInfo();
};
},
mounted() {
// 如果在浏览器或微信里
if (this.isWeb) {
const { token, info } = this.$store.state.user;
this.token =
token ||
this.couponToken ||
localStorage.getItem("couponToken") ||
getCookie("couponToken");
if (this.token && !info.id) {
console.log("4444 this.token", this.token);
// this.$store.dispatch('setToken', this.token);
this.commonCheckToken(() => {
this.$store.dispatch("setToken", this.token);
// 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.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
false
);
}
});
});
},
// 主动领取优惠券
// 状态码：1已下架，请领取其他优惠券 2优惠券已失效 3已领取，快去使用优惠券 4优惠券已领完 5成功领取
receiveCouponByid(couponId) {
this.commonCheckToken(() => {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
console.log("data.description", data.description);
data.description && Toast(data.description);
this.searchCoupons();
}
}
);
});
},
// 处理(所有)列表数据
// couponStatus 优惠券状态：0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
handlerAllCouponList(couponList, isAll) {
if (!couponList.length) return [];
let newList = [],
obj = {};
couponList.forEach(item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = isAll;
// 是否显示对应的规则
item.showRules = false;
// 是否可用
item.disabled =
item.couponStatus == 0 ||
item.couponStatus == 1 ||
item.couponStatus == 4;
newList.push(item);
});
console.log(newList);
return newList;
},
// 获取所有优惠券列表
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") {
if (data.description) {
this.$toast({ message: data.description, duration: 5000 });
}
}
this.searchCoupons();
}
);
} else {
this.searchCoupons();
}
});
},
// 区分是否是我的优惠券
searchCoupons() {
this.wechatShare(
{
link: this.shareUrl,
title: "我在抢优惠券，你也快来吧！",
friendtitle: "限时优惠，机不可失！",
desc: "限时优惠，机不可失！",
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
if (this.fromPage) {
this.getMyCoupons();
} else {
this.searchCouponsAction();
}
},
// 查询所有优惠券列表
searchCouponsAction() {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
};
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
true
);
}
});
},
// 领取或使用 couponStatus 0: 立即领取; 1: 去使用;
revieveOrUse(item) {
// 跳转到使用页面（如果只适用一个商品，则直接跳转到商品页面；否则跳转到商品列表页面）
// 要根据用户信息，获取定位信息等，从而获取对应的商品
// TODO
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50602#${item.couponId}#${item.couponName}`
});
}
// 去使用
if (item.couponStatus == 1) {
let couponList = item.couponMappingModelList, index = -1;
index = couponList.findIndex( i => {
return i.goodsType == 3;
});
// 在站内，如果是职称考卡，则直接跳转到职称考首页
if(!this.isWeb && index >= 0) {
let pageUrl = getWebPageUrl(`profexam/#/index`);
this.jumpForCoupon(pageUrl);
return;
}
let pageUrl = "";
// 如果适用的商品（卡）个数多于一个，则跳转到商品列表
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);
}
// 立即领取
} else if (item.couponStatus == 0) {
this.receiveCouponByid(item.couponId);
}
},
// 根据省ID，获取学习卡信息
getCardInfoByProvinceId(item) {
let coupon = item.couponMappingModelList[0];
let param = {
area: this.provinceId + "",
cardType: coupon.cardType || 3,
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 pageUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${good.id}`
);
this.jumpForCoupon(pageUrl);
} else {
Toast("相关商品已下架");
}
}
});
},
// 根据环境跳转
jumpForCoupon(pageUrl) {
if (this.isWeb) {
location.href = pageUrl;
} else {
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative &&
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
};
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #f8f9fa;
&.no-pt {
padding-top: 10px;
}
}
</style>
\ No newline at end of file
src/views/coupon/components/coupon-bottom.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<div class="coupon-bottom">
<div class="coupon-main flex">
<div class="flex coupon-bottom-left">
<img
class="image"
src="https://files.yunqueyi.com/image/png/common/20240425190946978.png"
>
<span class="more">领更多好券</span>
</div>
<div class="flex coupon-bottom-right">
<div
class="center"
@click="goCenter"
>
去领券中心
</div>
<van-icon
name="arrow"
color="#999999"
size="12px"
/>
</div>
</div>
<div class="bottom" />
</div>
</template>
<script>
export default {
components: {},
props: {},
emits: [],
data() {
return {};
},
mounted() {},
methods: {
goCenter() {
console.log(111,'111')
this.$router.push({
path: '/coupon-center',
// query: { backMethod: 'web' },
});
},
},
};
</script>
<style lang="less" scoped>
.coupon-bottom {
position: fixed;
width: 100%;
background: #fff;
z-index: 2;
bottom: 0;
z-index: 111;
// padding-bottom: calc(25rpx + constant(safe-area-inset-bottom));
// padding-bottom: calc(25rpx + env(safe-area-inset-bottom));
.coupon-main {
padding: 12px 20px;
box-shadow: inset 0 -1px 0 0 #e7e8e7;
justify-content: space-between;
.image {
height: 23px;
width: 22px;
margin-right: 8px;
}
.more {
font-weight: 500;
font-size: 15px;
color: #5f3c15;
line-height: 24px;
}
.center {
font-weight: 400;
font-size: 14px;
color: #999999;
line-height: 14px;
margin-right: 3px;
}
}
&-right {
align-items: center;
}
.bottom {
height: 26px;
width: 100%;
background-color: #fff;
}
.flex {
display: flex;
}
}
</style>
src/views/coupon/components/coupon-item.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<div class="card-main">
<div v-if="couponDetail" class="card-item shadow">
<div class="flex stretch">
<div :class="['card-item-left ', 'shadow', hasUsed ? 'bg-fbfcfb' : '']">
<div v-if="couponDetail.storageStatus && hasStock" class="surplus">
剩{{ couponDetail.stock }}张
</div>
<div class="position-center">
<div
v-if="
couponDetail.couponType == 1 || couponDetail.couponType == 2
"
class="card-item-left-top"
>
<span :class="{ unit: true, opacity5: hasUsed }">¥</span>
<span :class="{ amount: true, opacity5: hasUsed }">{{
couponDetail.discountAmount / 100
}}</span>
</div>
<div
v-if="couponDetail.couponType == 1"
:class="['card-item-left-bottom', hasUsed ? 'cr-c1c1c1 ' : '']"
>
满{{ couponDetail.requiredTotalFee }}可用
</div>
</div>
<div
v-if="couponDetail.couponType == 3"
class="card-item-left-top position-center"
>
<span :class="{ amount: true, opacity5: hasUsed }"
>{{ couponDetail.discountPercent }}折</span
>
</div>
</div>
<div class="bar">
<div class="bar-top" />
<div class="bar-center" />
<div class="bar-bottom" />
</div>
<div class="card-item-right flex shadow">
<div class="card-item-right-center">
<div class="pos-center">
<div :class="['right-coupon', hasUsed ? 'cr-c1c1c1' : '']">
{{ couponDetail.couponName }}
</div>
<div
v-if="
couponDetail.validLeftDays && couponDetail.validTimeType == 2
"
:class="['right-time', hasUsed ? 'cr-c1c1c1' : '']"
>
距离到期仅剩<span :class="['red', hasUsed ? 'opacity5' : '']">{{
couponDetail.validLeftDays
}}</span
>天
</div>
<div
v-if="couponDetail.validTimeType == 1"
:class="['right-validity', hasUsed ? 'cr-c1c1c1' : '']"
>
{{
createdDay(couponDetail.startTime) +
"至" +
createdDay(couponDetail.expireTime)
}}
</div>
<div
v-if="couponDetail.couponExplain && hasTips"
class="right-rule flex"
@click="changeShowTips"
>
<span :class="['rule-icon', hasUsed ? 'cr-c1c1c1' : '']"
>使用规则</span
>
<div>
<van-icon
v-if="showTips"
name="arrow-up"
:color="hasUsed ? '#c1c1c1' : '#999999'"
size="24rpx"
/>
<van-icon
v-else
name="arrow-down"
:color="hasUsed ? '#c1c1c1' : '#999999'"
size="24rpx"
/>
</div>
</div>
</div>
</div>
<div
v-if="[0, 1, 4].includes(couponDetail.couponStatus)"
:class="['use-coupon', btnList[couponDetail.couponStatus].class]"
@click="goUse"
>
<span>{{ btnList[couponDetail.couponStatus].label }}</span>
<div v-if="couponDetail.couponStatus == 1" class="arrow" />
</div>
<img
v-if="imgList[couponDetail.couponStatus]"
class="use-image"
:src="
imgList[couponDetail.couponStatus] &&
imgList[couponDetail.couponStatus].url
"
/>
</div>
</div>
<div v-if="showTips && hasTips" class="coupon-desc">
{{ couponDetail.couponExplain }}
</div>
</div>
</div>
</template>
<script>
export default {
options: {},
props: {
couponDetail: {
type: Object,
default() {
return {};
},
},
showTips: {
type: Boolean,
default() {
return false;
},
},
hasTips: {
type: Boolean,
default() {
return true;
},
},
hasStock: {
type: Boolean,
default() {
return true;
},
},
},
data() {
return {
btnList: {
0: {
label: "立即领取",
class: "bg-ff720c",
},
1: {
label: "去使用",
class: "bg-ff720c",
},
4: {
label: "未开始",
class: "bg-d9d9d9",
},
},
imgList: {
6: {
url: "https://files.yunqueyi.com/image/png/common/20240425190937198.png",
label: "已使用",
},
1: {
url: "https://files.yunqueyi.com/image/png/common/20240425190912170.png",
label: "已领取",
},
3: {
url: "https://files.yunqueyi.com/image/png/common/2024042519090037.png",
label: "已领完",
},
2: {
url: "https://files.yunqueyi.com/image/png/common/20240425190912170.png",
label: "已领取",
},
5: {
url: "https://files.yunqueyi.com/image/png/common/20240425190926718.png",
label: "已过期",
},
8: {
url: "https://files.yunqueyi.com/image/png/common/20240523183549261.png",
label: "已占用",
},
7: {
url: "https://files.yunqueyi.com/image/png/common/2024052318355816.png",
label: "已失效",
},
},
};
},
computed: {
hasUsed() {
return [3, 5, 6, 7, 8].includes(this.couponDetail.couponStatus);
},
},
methods: {
// 获取日期
createdDay(date) {
const now = new Date(date);
const year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
return `${year}.${month}.${day}`;
},
changeShowTips() {
this.$emit("update:showTips", !this.showTips);
},
goUse() {
this.$emit("goUse", this.couponDetail);
},
},
};
</script>
<style lang="less" scoped>
.card-main {
.card-item {
margin-bottom: 10px;
position: relative;
&-left {
position: relative;
background: #fff4ed;
border-radius: 11px 0 0 11px;
width: 100px;
// min-height: 200rpx;
.surplus {
background: #ff4b33;
border-radius: 11px 0 11px 0;
font-weight: 500;
font-size: 10px;
color: #ffffff;
line-height: 14px;
display: table;
padding: 3px 7px 2px;
}
.position-center {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
margin-top: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&-top {
font-weight: 600;
font-size: 33px;
color: #ff4b33;
line-height: 33px;
text-align: center;
display: flex;
align-items: baseline;
justify-content: center;
// margin-top: 18rpx;
.unit {
font-weight: 500;
font-size: 15px;
color: #ff4b33;
line-height: 15px;
}
.amount {
font-weight: 600;
font-size: 33px;
color: #ff4b33;
line-height: 33px;
}
}
&-bottom {
font-weight: 400;
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
margin-top: 8px;
}
}
.bar {
position: relative;
&-top {
width: 11px;
height: 6px;
background: #f5f6f8;
border-radius: 0 0 50% 50%;
line-height: 11px;
left: -6px;
position: absolute;
z-index: 11;
}
&-center {
width: 1px;
// min-height: 200rpx;
background-image: linear-gradient(
to bottom,
#fe624a 0%,
#fe624a 80%,
transparent 50%
);
background-size: 2px 9px;
background-repeat: y-repeat;
opacity: 0.1;
height: 100%;
}
&-bottom {
width: 11px;
height: 6px;
border-radius: 50% 50% 0 0;
background: #f5f6f8;
line-height: 11px;
left: -6px;
bottom: 0;
position: absolute;
z-index: 11;
}
}
&-right {
position: relative;
background: #ffffff;
border-radius: 0 11px 1px 0;
flex: 1;
// min-height: 200rpx;
justify-content: space-between;
&-center {
padding-top: 18px;
padding-left: 10px;
padding-bottom: 18px;
height: 100px;
flex: 1;
position: relative;
.pos-center {
position: absolute;
top: 50%;
margin-top: 0;
transform: translate(0, -50%);
}
.right-coupon {
font-weight: 500;
font-size: 15px;
color: #212121;
line-height: 15px;
margin-bottom: 10px;
}
.right-time {
font-weight: 400;
font-size: 12px;
color: #666666;
line-height: 12px;
margin-bottom: 11px;
.red {
color: #ff4b33;
}
}
.right-validity {
font-weight: 400;
font-size: 12px;
color: #999999;
line-height: 12px;
text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.04);
}
.right-rule {
margin-top: 10px;
font-weight: 400;
font-size: 12px;
color: #999999;
line-height: 16px;
.rule-icon {
margin-right: 6px;
}
}
}
.use-coupon {
border-radius: 16px;
font-weight: 400;
font-size: 13px;
z-index: 10;
color: #ffffff;
line-height: 13px;
padding: 7px 10px;
margin-right: 11px;
display: flex;
align-items: baseline;
position: absolute;
-ms-flex-align: baseline;
right: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
.use-image {
height: 59px;
position: absolute;
bottom: 0;
right: 0;
width: 59px;
}
.coupon-desc {
background: #fefefe;
border-radius: 0 0 11px 11px;
font-weight: 400;
font-size: 12px;
color: #929292;
line-height: 16px;
padding: 10px;
}
}
.shadow {
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.04);
}
.arrow {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid #ffffff;
margin-left: 4px;
}
.stretch {
align-items: stretch;
}
.opacity5 {
opacity: 0.5;
}
.bg-ff720c {
background: #ff720c;
}
.bg-d9d9d9 {
background: #d9d9d9;
}
.cr-c1c1c1 {
color: #c1c1c1 !important;
}
.cr-ff4b33 {
color: #ff4b33;
}
.bg-fbfcfb {
background: #fbfcfb !important;
}
.flex {
display: flex;
}
}
</style>
src/views/coupon/components/coupon-tips.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<div>
<van-dialog
v-model="visible"
class="coupon-dialog"
:show-confirm-button="false"
>
<div class="body">
<div class="title">
<div class="title-text">
领取成功!
</div>
<div
class="title-close"
@click="close"
>
<van-icon
name="cross"
size="22"
color="#aaaaaa"
/>
</div>
</div>
<div class="card-item">
<div class="flex stretch">
<div class="card-item-left shadow">
<div class="card-item-left-top">
<span class="unit">¥</span> <span class="amount">
20
</span>
</div>
<div class="card-item-left-bottom">
现金红包
</div>
</div>
<div class="card-item-right flex shadow">
<div class="card-item-right-center">
<div class="right-coupon">
可至「云鹊医App-个人中心-账户余额」中提现
</div>
</div>
</div>
</div>
</div>
<div class="card-bottom">
<span class="card-text"> 去提现 </span>
</div>
</div>
</van-dialog>
</div>
</template>
<script>
export default {
components: {},
props: {
tabsDetail: {
type: Array,
default() {
return [];
},
},
visible: {
type: Boolean,
},
},
data() {
return {
currentIndex: 0,
};
},
mounted() {},
methods: {
changeTab(index) {
if (this.currentIndex === index) return;
this.currentIndex = index;
this.$emit('changeTab', this.currentIndex);
},
close() {
this.$emit('update:visible', false);
this.$emit('close', false);
},
},
};
</script>
<style scoped lang="less">
.coupon-dialog{
/deep/ .van-dialog__content{
height: 273px;
}
.body {
height: 215px;
width: 295px;
background: url("https://files.yunqueyi.com/image/png/common/20240510112413239.png")
no-repeat;
background-size: 100% 100%;
border-radius: 12px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
padding: 28px 24px 30px;
.title {
position: relative;
margin-bottom: 25px;
&-text {
font-weight: 500;
font-size: 28px;
color: #812603;
line-height: 28px;
text-align: center;
font-style: normal;
}
&-close {
position: absolute;
top: -4px;
right: 0;
}
}
.card-item {
margin-bottom: 10px;
&-left {
width: 119px;
&-top {
font-weight: 600;
font-size: 33px;
color: #fff;
line-height: 33px;
text-align: center;
margin-top: 20px;
display: flex;
align-items: baseline;
justify-content: center;
.unit {
font-weight: 500;
font-size: 15px;
color: #fff;
line-height: 15px;
}
.amount {
font-weight: 600;
font-size: 33px;
color: #fff;
line-height: 33px;
}
}
&-bottom {
font-weight: 400;
font-size: 12px;
color: #fff;
line-height: 12px;
text-align: center;
margin-top: 6px;
}
}
// .bar {
// position: relative;
// &-top {
// width: 22rpx;
// height: 12rpx;
// background: #f5f6f8;
// border-radius: 0 0 50% 50%;
// line-height: 22rpx;
// left: -11rpx;
// position: absolute;
// }
// &-center {
// width: 2rpx;
// // min-height: 200rpx;
// background-image: linear-gradient(to bottom, #fe624a 0%, #fe624a 80%, transparent 50%);
// background-size: 3rpx 18rpx;
// background-repeat: y-repeat;
// opacity: 0.1;
// }
// &-bottom {
// width: 22rpx;
// height: 12rpx;
// border-radius: 50% 50% 0 0;
// background: #f5f6f8;
// line-height: 22rpx;
// left: -11rpx;
// bottom: 0rpx;
// position: absolute;
// }
// }
&-right {
flex: 1;
// min-height: 200rpx;
justify-content: space-between;
&-center {
padding: 0 14px;
height: 100px;
.right-coupon {
font-weight: 500;
font-size: 13px;
color: #fff;
line-height: 15px;
padding-top: 31px;
}
}
}
}
// .shadow {
// box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
// }
.flex{
display: flex;
}
.stretch {
align-items: stretch;
}
.card-bottom {
padding: 15px 0;
margin: 0 5px;
text-align: center;
background: url("https://files.yunqueyi.com/image/png/common/20240510135801168.png")
no-repeat;
background-size: 100% 100%;
.card-text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 19px;
letter-spacing: 1px;
text-shadow: 0px 0px 10px #ff0009;
text-align: center;
font-style: normal;
}
}
}
}
</style>
src/views/coupon/components/empty.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<div>
<div class="empty">
<img
class="empty-image"
src="../../../images/empty.png"
>
<div class="empty-text">
您还没有优惠券
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {},
emits: [],
data() {
return {
};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
.empty {
text-align: center;
margin-top: 300px;
height: 100%;
&-image {
width: 218px;
height: 102px;
margin: 0 auto;
}
&-text {
font-weight: 400;
font-size: 13px;
color: #999999;
line-height: 21px;
}
}
</style>
src/views/coupon/components/tabs.vue 0 → 100644
浏览文件 @ ea8c272f
<template>
<div>
<div class="tabs">
<div class="tab-holder" />
<div
v-for="(item, index) in tabsDetail"
:key="index"
class="tab-item"
:class="{ active: index === currentIndex }"
@click="changeTab(index)"
>
<span>{{ item.title }}</span>
</div>
<div class="tab-holder" />
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
defaultIndex: {
type: Number,
default() {
return 0;
},
},
tabsDetail: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
currentIndex: this.defaultIndex,
};
},
mounted() {
},
methods: {
changeTab(index) {
if (this.currentIndex === index) return;
this.currentIndex = index;
this.$emit('changeTab', this.currentIndex);
},
},
};
</script>
<style lang="less" scoped>
.tabs {
// position: fixed;
top: 84px;
left: 0;
right: 0;
width: 100vw;
height: 50px;
display: flex;
white-space: nowrap;
background-color: #fff;
border-bottom: 1px solid #e7e8e7;
z-index: 111;
.tab-item {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: 0 14px;
font-weight: 600;
font-size: 15px;
color: #979899;
&.active {
color: #373839;
&::after {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: block;
content: "";
width: 22px;
height: 3px;
background: #fe6d0e;
border-radius: 2px;
z-index: 1;
}
}
}
.tab-holder {
flex: 0 0 6px;
}
}
</style>
src/views/coupon/coupon-list.vue
浏览文件 @ ea8c272f
<template>
<section class="coupon-list-wrapper" :class="{'no-pt': isWeb}">
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:isInMergeDetail="isInMergeDetail"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList
v-if="dataList.length"
:dataList="dataList"
@revieveOrUse="revieveOrUse"
:fromPage="fromPage"
></CouponList>
<no-coupon v-else></no-coupon>
<section class="coupon-list-wrapper" :class="{ 'no-pt': isWeb }">
<div class="page-wrapper">
<!-- <common-header
:bg-color="bgColor"
title="我的优惠券"
:is-black="true"
:is-fixheader="true"
:is-hundred-height="true"
>
<div slot="tabs" class="tabs">
<tabs-comp
:tabs-detail="tabs"
:default-index="activeIndex"
@changeTab="changeTab"
/>
</div>
</common-header> -->
<div class="page-content">
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
:paddingbtm="paddingbtm"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:isInMergeDetail="isInMergeDetail"
>
<div slot="tabs" class="tabs">
<tabs-comp
:tabs-detail="tabs"
:default-index="activeIndex"
@changeTab="changeTab"
/>
</div>
</CommonNavbar>
<van-list v-if="couponList.length" class="list">
<coupo-item
v-for="(item, index) in couponList"
:key="index"
class="item"
:coupon-detail="item"
:show-tips.sync="item.showTips"
@goUse="chooseCoupon"
/>
</van-list>
<div v-else>
<empty />
</div>
</div>
<coupon-bottom />
</div>
</section>
</template>
<script>
// https://dev-sc.yunqueyi.com/trade/coupon/swagger-ui.html#/app-coupon-controller/receiveCouponsUsingPOST
// https://bq2ptvur1gb.feishu.cn/wiki/DpUfwKfhxiVYE4kbK8Pcj0F6nvf
import CoupoItem from "./components/coupon-item.vue";
import TabsComp from "./components/tabs.vue";
import CommonNavbar from "@/components/common/common-navbar";
import CouponList from "@/components/coupon/component-list";
import NoCoupon from "@/components/coupon/no-coupon";
// import CommonHeader from "@/components/common/header";
import CouponBottom from "./components/coupon-bottom.vue";
import empty from "./components/empty.vue";
import { getWebPageUrl, getHactiveUrl } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
import { setCookie, getCookie, delCookie } from "@/utils/index";
// import { getMyCouponsList } from '@/api/coupon.js';
export default {
components: {
CoupoItem,
TabsComp,
empty,
CouponBottom,
CommonNavbar,
CouponList,
NoCoupon
// CommonHeader,
},
data() {
return {
bgColor: "#fff",
token: "",
couponToken: "",
shareUrl: "",
isWeb: window.__isWeb,
bgColor: "#fff",
isShowNavbar: true,
navTitle: "优惠券",
navTitle: "我的优惠券",
isFixNavbar: true,
shareUrl: "",
dataList: [],
provinceId: "",
fromPage: "",
isInMergeDetail: false
paddingbtm: 0,
isInMergeDetail: false,
tabs: [
{
title: "已领取",
status: 2,
},
{
title: "已使用",
status: 6,
},
{
title: "已过期",
status: 5,
},
],
pageTitle: "我的优惠券",
currentIndex: 0,
couponList: [],
activeIndex: 0,
};
},
computed: {
...mapGetters(["webUserInfo"])
...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.fromPage = this.$route.query.fromPage || "";
this.couponToken = this.$route.query.couponToken || "";
this.navTitle = this.fromPage ? "我的优惠券" : "优惠券";
this.shareUrl = getWebPageUrl(
`profexam/#/coupon-list?couponId=${this.couponId}`
);
this.shareUrl = getWebPageUrl(`profexam/#/coupon-list`);
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
location.replace(this.shareUrl);
}
......@@ -83,22 +125,23 @@ export default {
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50601`
component_tag: `506#50601`,
});
}
window.__getUserInfo4CouponList = function(param) {
window.__getUserInfo4CouponList = function (param) {
console.log(44444444);
console.log("__getUserInfo4CouponList", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getAllCoupons();
_this.getMyCouponsList();
};
window.__refresh = function() {
window.__refresh = function () {
console.log(1111111);
_this.getUserInfo();
};
},
mounted() {
// 如果在浏览器或微信里
if (this.isWeb) {
......@@ -115,227 +158,57 @@ export default {
this.$store.dispatch("setToken", this.token);
// this.$store.dispatch("getUserInfo");
});
return;
}
console.log(222222);
// 从登陆页面过来的
this.getAllCoupons();
this.getMyCouponsList();
} else {
console.log(3333333);
this.getUserInfo();
}
},
methods: {
...mapActions(["setUserInfo"]),
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4CouponList"
__funcName: "__getUserInfo4CouponList",
});
},
// 获取我的优惠券列表
getMyCoupons() {
getMyCouponsList() {
this.commonCheckToken(() => {
this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
false
);
this.GET(
`trade/coupon/app/myCoupons?couponStatus=${
this.tabs[this.activeIndex].status
}`,
{}
).then(({ code, data }) => {
if (code == "000000") {
this.$nextTick((res) => {
data.baseCouponModelList.forEach((item) => {
item.showTips = false;
});
this.couponList = JSON.parse(
JSON.stringify(data.baseCouponModelList)
);
});
}
});
});
},
// 主动领取优惠券
// 状态码：1已下架，请领取其他优惠券 2优惠券已失效 3已领取，快去使用优惠券 4优惠券已领完 5成功领取
receiveCouponByid(couponId) {
this.commonCheckToken(() => {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
console.log("data.description", data.description);
data.description && Toast(data.description);
this.searchCoupons();
}
}
);
});
},
// 处理(所有)列表数据
// couponStatus 优惠券状态：0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
handlerAllCouponList(couponList, isAll) {
if (!couponList.length) return [];
let newList = [],
obj = {};
couponList.forEach(item => {
// 是否是列表页面，否则是我的优惠券页面
item.isAll = isAll;
// 是否显示对应的规则
item.showRules = false;
// 是否可用
item.disabled =
item.couponStatus == 0 ||
item.couponStatus == 1 ||
item.couponStatus == 4;
newList.push(item);
});
console.log(newList);
return newList;
},
// 获取所有优惠券列表
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") {
if (data.description) {
this.$toast({ message: data.description, duration: 5000 });
}
}
this.searchCoupons();
}
);
} else {
this.searchCoupons();
}
});
},
// 区分是否是我的优惠券
searchCoupons() {
this.wechatShare(
{
link: this.shareUrl,
title: "我在抢优惠券，你也快来吧！",
friendtitle: "限时优惠，机不可失！",
desc: "限时优惠，机不可失！",
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
if (this.fromPage) {
this.getMyCoupons();
} else {
this.searchCouponsAction();
}
changeTab(index) {
console.log(index);
this.activeIndex = index;
this.getMyCouponsList();
},
// 查询所有优惠券列表
searchCouponsAction() {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
};
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
true
);
}
});
},
// 领取或使用 couponStatus 0: 立即领取; 1: 去使用;
revieveOrUse(item) {
// 跳转到使用页面（如果只适用一个商品，则直接跳转到商品页面；否则跳转到商品列表页面）
// 要根据用户信息，获取定位信息等，从而获取对应的商品
// TODO
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50602#${item.couponId}#${item.couponName}`
});
}
// 去使用
if (item.couponStatus == 1) {
let couponList = item.couponMappingModelList, index = -1;
index = couponList.findIndex( i => {
return i.goodsType == 3;
});
// 在站内，如果是职称考卡，则直接跳转到职称考首页
if(!this.isWeb && index >= 0) {
let pageUrl = getWebPageUrl(`profexam/#/index`);
this.jumpForCoupon(pageUrl);
return;
}
let pageUrl = "";
// 如果适用的商品（卡）个数多于一个，则跳转到商品列表
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);
}
// 立即领取
} else if (item.couponStatus == 0) {
this.receiveCouponByid(item.couponId);
chooseCoupon(item) {
if (item.couponStatus === 1) {
// uni.switchTab({
// url: '/pages/home/index',
// });
}
},
// 根据省ID，获取学习卡信息
getCardInfoByProvinceId(item) {
let coupon = item.couponMappingModelList[0];
let param = {
area: this.provinceId + "",
cardType: coupon.cardType || 3,
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 pageUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${good.id}`
);
this.jumpForCoupon(pageUrl);
} else {
Toast("相关商品已下架");
}
}
});
},
// 根据环境跳转
jumpForCoupon(pageUrl) {
if (this.isWeb) {
location.href = pageUrl;
} else {
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative &&
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
},
};
</script>
<style lang="less" scoped>
......@@ -347,4 +220,27 @@ export default {
padding-top: 10px;
}
}
</style>
\ No newline at end of file
.page-wrapper {
height: 100vh;
background-color: #f5f6f8;
display: flex;
flex-direction: column;
.tabs {
margin-top: -1px;
}
/deep/ .nav-title {
border-bottom: 1px solid transparent !important;
position: relative !important;
}
.ios_safe_height {
background-color: #fff;
height: auto !important;
}
.page-content {
padding: 10px 12px 24px;
}
.list {
padding-bottom: 50px;
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或