Skip to content

U
user
Commit c4470f45 by songbingqi
Options

完成优惠券页面部分开发

parent 24e96d74
Showing with 208 additions and 53 deletions
components/Ticket/index.vue
<template> <template>
<view class="all"> <view class="all">
<view class="partOne"> <view class="part">
<view class="partOne"> <view class="partOne">
<view class="one_left"> <view class="one_left">
<view class="type">最大字数最大字</view> <view class="type">{{info.typeDesc}}</view>
<view class="price"> <view class="price">
30<span>元</span> <view v-if="info.couponType===0">{{info.mjPrice}}<span>元</span></view>
<view v-else-if="info.couponType===1">{{info.zkPrice}}<span>折</span></view>
<view v-else :style="{'font-size':'48rpx'}">{{info.dkPrice}}<span></span></view>
</view> </view>
<view class="price_desc">满130可用</view> <view class="price_desc">{{info.priceDesc}}</view>
</view> </view>
<view class="one_right"> <view class="one_right">
<view class="right_top"> <view class="right_top">
<view class="info"> <view class="info">
<view class="title">最大字数最大字数最大</view> <view class="title">{{info.title}}</view>
<view class="time">有效期至2022.07.24.17:20</view> <view class="time">有效期至{{info.time[0]}}</view>
</view> </view>
<view class="action"> <view class="action">
<view v-if="type==='use'">
<view class="check" @click="selected" :class="checkFlag?'checked':'nochecked'"></view>
</view>
<view v-else>
<view v-if="info.status===0">
<button class="gouse">去使用</button> <button class="gouse">去使用</button>
</view> </view>
</view>
</view>
</view> </view>
<view class="right_bottom"> <view class="right_bottom">
<view class="more_info" @click="openDetail"> <view class="more_info" @click="openDetail">
<view class="desc">最大字数最大字数最大字数最</view> <view class="desc" v-if="info.couponType===0||info.couponType===1">抵扣订单金额</view>
<view class="desc" v-else>下单可抵扣商品，指定分类商品可用</view>
<image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" /> <image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" />
</view> </view>
</view> </view>
</view> </view>
<view v-if="info.status===2||info.status===3" class="tap">
<view class="tap_innew">
<view class="text" v-if="info.status===2">已使用</view>
<view class="text" v-else>已失效</view>
</view> </view>
<view class="partTwo" v-if="detailFlag" :key="twokey">
</view> </view>
<view class="partThree" v-if="!status"> </view>
<view class="partTwo" v-if="detailFlag">
<view class="part_top">
<view>可用门店：{{info.shopList[0]}}</view>
<view>可用饮品范围：{{info.goodList[0]}}</view>
<view>可用场景：{{info.useScence[0]}}</view>
</view>
<view class="part_bottom">
<view>使用说明：</view>
<view v-for="(item,index) in info.useDesc" :key="index">{{item}}</view>
<view>折扣规则：{{info.zkRule}}</view>
</view>
</view>
<view class="partThree" v-if="info.status === 1">
<view class="reson">{{reson}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -40,19 +65,51 @@ ...@@ -40,19 +65,51 @@
<script> <script>
export default { export default {
props:{
type:{
type:String,
default(){
return ''
}
},
info:{
type:Object,
default(){
return {
status:0, // 0可使用 1不可使用 2已使用 3已失效
couponType:2, // 0满减 1折扣 2抵扣
typeDesc:'最大字数最大字', // 左上角文案描述
mjPrice:'30', // 满减金额
zkPrice:'7', // 折扣金额
dkPrice:'免单', // 抵扣金额
priceDesc:'满130可用', // 条件描述
checkStatus:false, // 优惠券选中状态
title:'最大字数最大字数最大', // 优惠券标题
time:['2022.07.24.17:20'], // 过期时间
shopList:['全门店可用'], // 可用门店
goodList:['全品类可用'], // 可用品类
useScence:['小程序下单可用'], // 使用场景
useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
zkRule:'整单最高抵扣50元', // 折扣规则
reson:'不可与已勾选券叠加使用' // 不可使用原因
}
}
}
},
data(){ data(){
return { return {
detailFlag:false, detailFlag:false,
status:true, status:true,
twokey:0 checkFlag:false,
reson:''
} }
}, },
methods:{ methods:{
openDetail(){ openDetail(){
this.detailFlag = !this.detailFlag this.detailFlag = !this.detailFlag
this.$nextTick(()=>{ },
this.twokey++ selected() {
}) this.checkFlag = !this.checkFlag
} }
} }
...@@ -61,21 +118,20 @@ export default { ...@@ -61,21 +118,20 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.all { .all {
.partOne { .part {
width: 100%; width: 100%;
height: 241rpx; margin-top: 32rpx;
.partOne { .partOne {
width: 100%; width: 100%;
height: 100%; height: 241rpx;
display: flex; display: flex;
position: relative;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative; background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 180rpx 51% no-repeat,
background: radial-gradient(circle at right top, transparent 9px, #FFFFFF 0) top left / 178rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 9px, #FFFFFF 0) bottom left / 178rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 9px, #FFFFFF 0) top right / 510rpx 51% no-repeat, radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
radial-gradient(circle at left bottom, transparent 9px, #FFFFFF 0) bottom right / 510rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
.one_left { .one_left {
height: 100%; height: 100%;
...@@ -85,12 +141,14 @@ export default { ...@@ -85,12 +141,14 @@ export default {
max-width: 154rpx; max-width: 154rpx;
text-align: center; text-align: center;
height: 28rpx; height: 28rpx;
overflow: hidden;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%); background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%);
color: #FFFFFF; color: #FFFFFF;
line-height: 28rpx; line-height: 28rpx;
white-space: nowrap;
} }
.price{ .price{
width: 178rpx; width: 178rpx;
...@@ -136,13 +194,15 @@ export default { ...@@ -136,13 +194,15 @@ export default {
border-bottom: 1rpx solid #ECECEC; border-bottom: 1rpx solid #ECECEC;
.info { .info {
.title { .title {
max-width: 332rpx; max-width: 280rpx;
overflow: hidden;
height: 40rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
white-space: nowrap;
} }
.time { .time {
height: 28rpx; height: 28rpx;
...@@ -166,6 +226,18 @@ export default { ...@@ -166,6 +226,18 @@ export default {
color: #FFFFFF; color: #FFFFFF;
line-height: 52rpx; line-height: 52rpx;
} }
.check{
width: 40rpx;
height: 40rpx;
}
.checked{
background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
.nochecked{
background: url('../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
} }
} }
.right_bottom { .right_bottom {
...@@ -176,7 +248,6 @@ export default { ...@@ -176,7 +248,6 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.desc { .desc {
max-width: 261rpx;
height: 28rpx; height: 28rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -192,6 +263,35 @@ export default { ...@@ -192,6 +263,35 @@ export default {
} }
} }
} }
.tap {
border: 1px solid #DFDFDF;
width: 102rpx;
height: 102rpx;
border-radius: 50%;
top: 15rpx;
right: 15rpx;
position: absolute;
.tap_innew {
position: relative;
border: 1px solid #DFDFDF;
width: 88rpx;
height: 88rpx;
border-radius: 50%;
top: 7rpx;
left: 7rpx;
transform: rotate(25deg);
.text {
width: 100%;
height: 100%;
line-height: 88rpx;
text-align: center;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
}
} }
.partOne::before { .partOne::before {
content: ''; content: '';
...@@ -204,47 +304,75 @@ export default { ...@@ -204,47 +304,75 @@ export default {
margin: auto; margin: auto;
} }
.partTwo { .partTwo {
overflow:hidden;
transform: translateZ(0); transform: translateZ(0);
width: 100%; width: 100%;
height: 300rpx; margin-right: 30rpx;
position: relative; position: relative;
background: radial-gradient(circle at right top, transparent 10px, #FFFFFF 0) top left / 180rpx 51% no-repeat, background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 180rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #FFFFFF 0) bottom left / 180rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 10px, #FFFFFF 0) top right / 512rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #FFFFFF 0) bottom right / 512rpx 51% no-repeat; radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
.part_top {
margin-top: 39.6rpx;
margin-left: 31.11rpx;
margin-right: 30rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.part_bottom {
margin-top: 16rpx;
margin-left: 31.11rpx;
margin-right: 30rpx;
margin-bottom: 40rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
} }
.partTwo::before { .partTwo::before {
content: ''; content: '';
height: 1rpx; height: 1rpx;
width: 122rpx; width: 122rpx;
border: 1rpx dashed #F4F4F4; border: 1rpx dashed #FFFFFF;
position: absolute; position: absolute;
left: 33.75rpx; left: 33.75rpx;
top: -296rpx;
bottom: 0;
margin: auto;
} }
.partTwo::after { .partTwo::after {
content: ''; content: '';
height: 1rpx; height: 1rpx;
width: 460rpx; width: 460rpx;
border: 1rpx dashed #F4F4F4; border: 1rpx dashed #FFFFFF;
position: absolute; position: absolute;
left: 196.75rpx; left: 196.75rpx;
top: -296rpx; top: 0rpx;
bottom: 0;
margin: auto;
} }
.partThree { .partThree {
width: 100%; width: 100%;
height: 72rpx;
position: relative; position: relative;
background: radial-gradient(circle at right top, transparent 9px, #E9E9E9 0) top left / 180rpx 51% no-repeat, overflow: hidden;
background: radial-gradient(circle at right top, transparent 17rpx, #E9E9E9 0) top left / 180rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 0px, #E9E9E9 0) bottom left / 180rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 0px, #E9E9E9 0) bottom left / 180rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 9px, #E9E9E9 0) top right / 512rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #E9E9E9 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 512rpx 51% no-repeat; radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
.reson {
margin: 18rpx 30rpx 20rpx 32rpx;
height: 34rpx;
width: 622rpx;
overflow: hidden;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
white-space: nowrap;
}
} }
} }
} }
......
mineSubPackage/pages/coupon/index.vue
...@@ -26,11 +26,15 @@ ...@@ -26,11 +26,15 @@
<view> <view>
<swiper :current="current" class="swiper"> <swiper :current="current" class="swiper">
<swiper-item> <swiper-item>
<view class="nouser"> <view class="list">
<Ticket /> <Ticket />
</view> </view>
</swiper-item> </swiper-item>
<swiper-item>2</swiper-item> <swiper-item>
<view class="list">
<Ticket v-for="(item,index) in nouserList" :key="index" :info="item"/>
</view>
</swiper-item>
</swiper> </swiper>
</view> </view>
</view> </view>
...@@ -44,15 +48,38 @@ export default { ...@@ -44,15 +48,38 @@ export default {
return { return {
list1: [ list1: [
{ {
name: "HOOLOO卷", name: "HOOLOO券",
}, },
{ {
name: "已使用/已失效", name: "已使用/已失效",
}, },
], ],
nouserList:[],
current: 0, current: 0,
}; };
}, },
mounted(){
for(let i=0;i<2;i++){
this.nouserList.push({
status:2, // 0可使用 1不可使用/已过期/已失效
couponType:2, // 0满减 1折扣 2抵扣
typeDesc:'最大字数最大字', // 左上角文案描述
mjPrice:'30', // 满减金额
zkPrice:'7', // 折扣金额
dkPrice:'免单', // 抵扣金额
priceDesc:'满130可用', // 条件描述
checkStatus:false, // 优惠券选中状态
title:'最大字数最大字数最大', // 优惠券标题
time:['2022.07.24.17:20'], // 过期时间
shopList:['全门店可用'], // 可用门店
goodList:['全品类可用'], // 可用品类
useScence:['小程序下单可用'], // 使用场景
useDesc:['*不可与其他优惠券同时使用','*不可与门店优惠共享','*订单完成后选择退款，只退回实际支付金额，优惠券不予退回'], // 使用说明
zkRule:'整单最高抵扣50元', // 折扣规则
reson:'不可与已勾选券叠加使用' // 不可使用原因
})
}
},
methods: { methods: {
changeTab(current) { changeTab(current) {
this.current = current.index; this.current = current.index;
...@@ -66,9 +93,9 @@ export default { ...@@ -66,9 +93,9 @@ export default {
.swiper { .swiper {
background: #F8F8F8; background: #F8F8F8;
height: calc(100vh - 64rpx); height: calc(100vh - 64rpx);
.nouser{ .list{
height: 100%; height: 100%;
padding: 32rpx; padding: 0rpx 32rpx;
overflow-y: scroll; overflow-y: scroll;
} }
} }
......
orderSubPackage/pages/coupon/index.vue
<template> <template>
<view>结算页面优惠卷</view> <view>结算页面优惠券</view>
</template> </template>
<script> <script>
......
orderSubPackage/pages/settlement/index.vue
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</div> </div>
<div class="coupon" @click="goCouponSelect"> <div class="coupon" @click="goCouponSelect">
<div class="title">HOOLOO卷</div> <div class="title">HOOLOO券</div>
<div class="num"> <div class="num">
<span>暂未可用优惠</span> <span>暂未可用优惠</span>
<image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" /> <image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
......
pages.json
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
{ {
"path": "pages/coupon/index", "path": "pages/coupon/index",
"style": { "style": {
"navigationBarTitleText": "我的HOOLOO卷", "navigationBarTitleText": "我的HOOLOO券",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
{ {
"path": "pages/coupon/index", "path": "pages/coupon/index",
"style": { "style": {
"navigationBarTitleText": "我的HOOLOO卷", "navigationBarTitleText": "我的HOOLOO券",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment