Skip to content

U
user
Commit c4470f45 by songbingqi
Options

完成优惠券页面部分开发

parent 24e96d74
Showing with 212 additions and 57 deletions
components/Ticket/index.vue
<template>
<view class="all">
<view class="partOne">
<view class="part">
<view class="partOne">
<view class="one_left">
<view class="type">最大字数最大字</view>
<view class="type">{{info.typeDesc}}</view>
<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 class="price_desc">满130可用</view>
<view class="price_desc">{{info.priceDesc}}</view>
</view>
<view class="one_right">
<view class="right_top">
<view class="info">
<view class="title">最大字数最大字数最大</view>
<view class="time">有效期至2022.07.24.17:20</view>
<view class="title">{{info.title}}</view>
<view class="time">有效期至{{info.time[0]}}</view>
</view>
<view class="action">
<button class="gouse">去使用</button>
<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>
</view>
</view>
</view>
</view>
<view class="right_bottom">
<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'" />
</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>
<view class="partTwo" v-if="detailFlag" :key="twokey">
<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="!status">
<view class="partThree" v-if="info.status === 1">
<view class="reson">{{reson}}</view>
</view>
</view>
</view>
......@@ -40,19 +65,51 @@
<script>
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(){
return {
detailFlag:false,
status:true,
twokey:0
checkFlag:false,
reson:''
}
},
methods:{
openDetail(){
this.detailFlag = !this.detailFlag
this.$nextTick(()=>{
this.twokey++
})
},
selected() {
this.checkFlag = !this.checkFlag
}
}
......@@ -61,21 +118,20 @@ export default {
<style lang="scss" scoped>
.all {
.partOne {
.part {
width: 100%;
height: 241rpx;
margin-top: 32rpx;
.partOne {
width: 100%;
height: 100%;
height: 241rpx;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
position: relative;
background: radial-gradient(circle at right top, transparent 9px, #FFFFFF 0) top left / 178rpx 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 9px, #FFFFFF 0) top right / 510rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 9px, #FFFFFF 0) bottom right / 510rpx 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 17rpx, #FFFFFF 0) bottom left / 180rpx 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 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
.one_left {
height: 100%;
......@@ -85,12 +141,14 @@ export default {
max-width: 154rpx;
text-align: center;
height: 28rpx;
overflow: hidden;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%);
color: #FFFFFF;
line-height: 28rpx;
white-space: nowrap;
}
.price{
width: 178rpx;
......@@ -123,7 +181,7 @@ export default {
text-align: center;
}
}
.one_right {
.one_right {
height: 198rpx;
width: calc(510rpx - 38rpx);
.right_top {
......@@ -136,13 +194,15 @@ export default {
border-bottom: 1rpx solid #ECECEC;
.info {
.title {
max-width: 332rpx;
max-width: 280rpx;
overflow: hidden;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
white-space: nowrap;
}
.time {
height: 28rpx;
......@@ -166,6 +226,18 @@ export default {
color: #FFFFFF;
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 {
......@@ -176,7 +248,6 @@ export default {
justify-content: flex-start;
align-items: center;
.desc {
max-width: 261rpx;
height: 28rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -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 {
content: '';
......@@ -204,47 +304,75 @@ export default {
margin: auto;
}
.partTwo {
transform: translateZ(0);
overflow:hidden;
transform: translateZ(0);
width: 100%;
height: 300rpx;
margin-right: 30rpx;
position: relative;
background: radial-gradient(circle at right top, transparent 10px, #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 left top, transparent 10px, #FFFFFF 0) top right / 512rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #FFFFFF 0) bottom right / 512rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top 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 17rpx, #FFFFFF 0) top right / 511rpx 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));
.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 {
content: '';
height: 1rpx;
width: 122rpx;
border: 1rpx dashed #F4F4F4;
border: 1rpx dashed #FFFFFF;
position: absolute;
left: 33.75rpx;
top: -296rpx;
bottom: 0;
margin: auto;
}
.partTwo::after {
content: '';
height: 1rpx;
width: 460rpx;
border: 1rpx dashed #F4F4F4;
border: 1rpx dashed #FFFFFF;
position: absolute;
left: 196.75rpx;
top: -296rpx;
bottom: 0;
margin: auto;
top: 0rpx;
}
.partThree {
width: 100%;
height: 72rpx;
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 left top, transparent 9px, #E9E9E9 0) top right / 512rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom 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 / 511rpx 51% no-repeat;
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 @@
<view>
<swiper :current="current" class="swiper">
<swiper-item>
<view class="nouser">
<view class="list">
<Ticket />
</view>
</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>
</view>
</view>
......@@ -44,15 +48,38 @@ export default {
return {
list1: [
{
name: "HOOLOO卷",
name: "HOOLOO券",
},
{
name: "已使用/已失效",
},
],
nouserList:[],
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: {
changeTab(current) {
this.current = current.index;
......@@ -66,9 +93,9 @@ export default {
.swiper {
background: #F8F8F8;
height: calc(100vh - 64rpx);
.nouser{
.list{
height: 100%;
padding: 32rpx;
padding: 0rpx 32rpx;
overflow-y: scroll;
}
}
......
orderSubPackage/pages/coupon/index.vue
<template>
<view>结算页面优惠卷</view>
<view>结算页面优惠券</view>
</template>
<script>
......
orderSubPackage/pages/settlement/index.vue
......@@ -39,7 +39,7 @@
</div>
<div class="coupon" @click="goCouponSelect">
<div class="title">HOOLOO卷</div>
<div class="title">HOOLOO券</div>
<div class="num">
<span>暂未可用优惠</span>
<image class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
......
pages.json
......@@ -69,7 +69,7 @@
{
"path": "pages/coupon/index",
"style": {
"navigationBarTitleText": "我的HOOLOO卷",
"navigationBarTitleText": "我的HOOLOO券",
"enablePullDownRefresh": false
}
}
......@@ -95,7 +95,7 @@
{
"path": "pages/coupon/index",
"style": {
"navigationBarTitleText": "我的HOOLOO卷",
"navigationBarTitleText": "我的HOOLOO券",
"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