Skip to content

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

新增优惠券页面

上级 3d236015
隐藏空白字符变更
内嵌 并排
正在显示 包含 535 行增加 和 11 行删除
src/components/common/common-navbar.vue
浏览文件 @ 5187521e
......@@ -28,7 +28,8 @@ export default {
name: "common-navbar",
data() {
return {
isWeb: window.__isWeb,
// isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
......@@ -39,6 +40,10 @@ export default {
};
},
props: {
isWeb: {
type: Boolean,
default: window.__isWeb
},
bgColor: {
type: String,
default: ""
......
src/components/coupon/coupon-list.vue 0 → 100644
浏览文件 @ 5187521e
<template>
<ul class="comp-list-wrapper">
<li class="list" v-for="item in [1, 2, 3]" :key="item">
<section class="item">
<div class="left">
<p class="name" :class="{'status': 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 class="rules">
<span :class="{'status': showStatus}" @click="toggleRules(item)">使用规则</span>
<img v-if="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>
</div>
</div>
<div class="right" :class="{'around': 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>
</div>
<span v-show="!showStatus && showBtn" class="btn coupon-pc">去使用</span>
<span v-show="!showStatus && !showBtn" class="btn-no">未开始</span>
</div>
</section>
<section v-show="showRules" class="rule-list">
<p v-html="descContent"></p>
</section>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
showStatus: false,
showBtn: true,
showRules: true,
descContent: "1. 的量据特原今参商队把养因然据准加感子新亲2. 和必局方候多相人着山关议型现酸存性合外将界计3. 火电容收万般青起内别且越百商几该半写计机天队效儿六必群小"
}
},
methods: {
toggleRules(item) {
console.log(item);
this.showRules = !this.showRules;
}
},
}
</script>
<style lang="less" scoped>
.comp-list-wrapper {
font-size: 14px;
padding: 0 15px 30px;
.list {
display: flex;
flex-direction: column;
width: 100%;
// height: 115px;
justify-content: space-between;
padding: 15px;
margin: 12px 0;
border-radius: 4px;
background: #FFFFFF;
box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.05);
.item {
display: flex;
flex-direction: row;
width: 100%;
// height: 115px;
justify-content: space-between;
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 210px;
height: 88px;
.name {
font-weight: 700;
color: #373839;
}
.other {
position: relative;
top: 0;
left: 0;
font-size: 12px;
color: #676869;
p {
line-height: 1.6;
}
.rules {
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 2px;
width: 12px;
}
}
.status-wrapper {
position: absolute;
top: -40px;
left: 140px;
img {
width: 75px;
height: 75px;
}
}
}
}
.right {
height: 88px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
&.around {
justify-content: space-around;
}
.top {
display: flex;
flex-direction: column;
.symbol {
margin-right: 2px;
font-size: 12px;
}
.price {
height: 30px;
line-height: 30px;
font-size: 30px;
}
.desc {
font-size: 11px;
color: #676869;
}
}
.btn {
display: flex;
width: 70px;
height: 25px;
justify-content: center;
align-items: center;
line-height: 25px;
border: 1px solid #FB5B52;
border-radius: 12px;
font-size: 12px;
}
.btn-no {
display: flex;
width: 70px;
height: 25px;
justify-content: center;
align-items: center;
line-height: 25px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
color: #979899;;
background: #F0F1F2;
}
}
}
.rule-list {
margin-top: 15px;
padding-top: 15px;
padding-bottom: 5px;
border-top: 1px solid #F0F1F2;
color: #979899;
font-size: 12px;
}
}
.coupon-pc {
font-weight: 700;
color: #FB5B52;
}
.opacity {
opacity: 0.6;
}
.status {
color: #979899 !important;
}
}
</style>
\ No newline at end of file
src/components/coupon/coupon-select-list.vue 0 → 100644
浏览文件 @ 5187521e
<template>
<van-popup
v-model="isShow"
@click-overlay="cancle"
position="bottom"
class="coupon-select"
>
<section class="coupon-select-wrapper">
<article class="title">
<span>优惠券</span>
<img @click="cancle" src="../../images/cme/close.png" />
</article>
<article 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="left opacity">
<p class="price"><span class="symbol sc">¥</span><span class="num sc">100</span></p>
<p class="desc">满100元可用</p>
</div>
<div class="center">
<p class="name status">商品名不超过二十字，字数不超过两行</p>
<div>
<p v-if="true" class="date">距离到期仅剩<span class="sc"> 8 </span>天</p>
<p v-else class="date status">2020-10-15 至 2020-12-01</p>
<p v-if="disabled" class="tips">
<img @click="cancle" src="../../images/coupon/tips.png" />
<span>当前商品不可用</span>
</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>
</div>
</article>
<article class="bottom">
<van-button @click="confirm" size="large" round color="#449284">确定使用</van-button>
</article>
</section>
</van-popup>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: true
}
},
data() {
return {
couponPrice: 100,
disabled: false,
isChecked: true
};
},
//
watch: {
},
mounted() {
this.$forceUpdate()
},
methods: {
cancle() {
this.$emit("cancle");
},
confirm() {
this.$emit("confirm", aCode);
},
toggleChecked() {
this.isChecked = !this.isChecked;
}
}
};
</script>
<style lang="less" scoped>
.coupon-select-wrapper {
position: relative;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 500px;
display: flex;
line-height: 1;
// padding: 10px 15px;
display: flex;
flex-direction: column;
background: #F8F9FA;
// padding: 0 0 80px;
// box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.title {
position: fixed;
display: flex;
flex-direction: row;
font-size: 18px;
font-weight: 700;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px 0 10px;
background: #F8F9FA;
img {
position: relative;
top: 0;
right: -120px;
width: 12px;
height: 12px;
}
}
.list-wrapper {
font-size: 13px;
padding: 60px 15px 80px;
color: #979899;
background: #F8F9FA;
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 110px;
padding: 16px 0;
margin-top: 12px;
background: #fff;
border-radius: 4px;
.left {
width: 93px;
text-align: center;
.price {
.symbol {
font-size: 12px;
}
.num {
font-size: 30px;
}
}
.desc {
margin: 5px;
font-size: 11px;
color: #676869;
}
}
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 194px;
text-align: left;
// margin: 15px 0;
height: 100%;
.name {
font-size: 14px;
font-weight: 700;
color: #373839;
line-height: 1.3;
}
.date {
font-size: 12px;
color: #676869;
}
.tips {
display: flex;
flex-direction: row;
align-items: center;
line-height: 1;
font-size: 12px;
color: #373839;
margin-top: 6px;
img {
width: 12px;
height: 12px;
margin-right: 2px;
}
}
}
.right {
width: 44px;
text-align: center;
img {
width: 20px;
height: 20px;
}
}
}
}
.bottom {
position: fixed;
left: 0;
bottom: 0;
z-index: 12;
width: 100%;
display: flex;
padding: 10px 15px;
background: #FFFFFF;
box-shadow: 0px -1px 0px 0px #F0F0F0;
}
.sc {
font-weight: 700;
color: #FB5B52;
}
.thin {
font-weight: 400;
}
.disabled {
.opacity {
opacity: 0.6;
}
.status {
color: #979899 !important;
}
}
}
</style>
src/components/coupon/no-coupon.vue 0 → 100644
浏览文件 @ 5187521e
<template>
<div class="no-coupon-wrapper">
<img src="../../images/coupon/no-coupon-page.png" alt="">
<span class="desc">您还没有优惠券</span>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.no-coupon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
img {
width: 120px;
height: 120px;
}
.desc {
font-size: 15px;
color: #999999;
}
}
</style>
\ No newline at end of file
src/router/router.js
浏览文件 @ 5187521e
......@@ -12,6 +12,8 @@ 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')
export default [{
path: '/',
component: App,
......@@ -64,5 +66,9 @@ export default [{
path: '/question-detail',
component: questionDetail
},
{
path: '/coupon-list',
component: couponList
}
]
}]
src/views/coupon/list.vue 0 → 100644
浏览文件 @ 5187521e
<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
浏览文件 @ 5187521e
......@@ -33,6 +33,14 @@
<div class="plus" @click="onPlus"></div>
</div>
</div>
<div class="flex buy-way">
<div class="name ">
优惠券
</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc">-¥100</div>
</div>
<div class="flex buy-way">
<div class="name">
支付方式
......@@ -59,7 +67,7 @@
<div class="btn-box">
<div class="money">
<p>合计：<span class="yuan">￥{{ totalPrice.yuan }}</span><span class="fen">.{{ totalPrice.fen }}</span><span v-if="goods.hasDiscount" class="del">原价: ¥{{ totalPrice.costPriceText }}</span></p>
<p v-if="totalPrice.savePrice" class="coupon">已使用优惠券，为您再优惠{{ totalPrice.savePrice }}元</p>
<!-- <p v-if="totalPrice.savePrice" class="coupon">已使用优惠券，为您再优惠{{ totalPrice.savePrice }}元</p> -->
</div>
<div
class="btn"
......@@ -69,6 +77,13 @@
</div>
</div>
<Loading v-show="showLoading" />
<!--去激活-->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="changeCardAction">
</ChangeCard>
<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>'
......@@ -78,6 +93,7 @@
:isShowDialog="isShowDialog"
@handlerAction="handlerAction"
></CourseDialog>
</div>
</template>
......@@ -85,6 +101,8 @@
import { Swipe, SwipeItem } from 'vant';
import Loading from "@/components/common/common-loading";
import CourseDialog from "@/components/course/course-dialog";
import ChangeCard from "@/components/coupon/coupon-select-list";
import { wxConfig, chooseWXPay } from '@/utils/wxShare';
import { getAPPID, getTradeType, getWebPageUrl, isWeiXin, wxOauth, debounce } from '@/utils';
import { mapGetters } from "vuex";
......@@ -97,6 +115,7 @@ export default {
SwipeItem,
Loading,
CourseDialog,
ChangeCard
},
data() {
return {
......@@ -112,6 +131,8 @@ export default {
tabW: 0, // tab的宽度
showLoading: false,
isShowDialog: false,
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
}
},
computed: {
......@@ -170,6 +191,17 @@ export default {
sessionStorage.setItem('goodsDetailParams', JSON.stringify(this.$route.query))
},
methods: {
cancleChangeCard() {
this.showChangeCard = false;
},
changeCardAction(cardKey, isInTips) {
},
showCouponPopup() {
this.showChangeCard = true;
},
// tab切换
tabToggle(index) {
this.curtTabIdx = index;
......@@ -217,18 +249,9 @@ export default {
this.swiperList = res.data && res.data.imgList || [];
this.tabs = tabs;
this.getTabW();
// goodsType=2 学习卡
// goodsType= 3 and cardType = 3 职称考课程卡
let sharePrice = goods.preferentialPrice || goods.costPrice;
let shareDesc = "¥" + (sharePrice / 100).toFixed(2);
shareDesc += "\n" + (goods.shareContent || "");
// if(goods.goodsType == 2) {
// shareDesc += "\n可申请5学分，自学资料性质，由医院录入！";
// } else if(goods.goodsType == 3 && goods.cardType == 3) {
// shareDesc += "\n卫健委正规授权，在职医师专业解读，大量实用病例分析！";
// } else if(goods.goodsType == 3 && goods.cardType == 4) {
// shareDesc += "\n仿真模拟，刷题助考更安心！";
// }
let shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goods.id}`
);
......@@ -590,6 +613,12 @@ export default {
background: url('~@/images/wxpay.png') no-repeat left center;
background-size: 18px auto;
}
.coupon-select {
// line-height: 12px;
padding-right: 15px;
background: url('~@/images/coupon/arrow-right.png') no-repeat right center;
background-size: 12px auto;
}
}
.tab-box{
display: flex;
......@@ -689,5 +718,10 @@ export default {
background-color: #C7C8C9;
}
}
.coupon-pc {
font-weight: 400;
color: #FB5B52;
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或