201 lines
5.8 KiB
Vue
201 lines
5.8 KiB
Vue
<template>
|
|
<view class="coupon">
|
|
<view>
|
|
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
|
|
</view>
|
|
|
|
<view class="u-relative" v-if="current === 0">
|
|
<view class="package u-text-center u-p-t-22 u-p-b-28">
|
|
<view class="bold-500">超级省钱券包</view>
|
|
<view>超值权益一单回本</view>
|
|
</view>
|
|
|
|
<view class="list u-absolute left-0 right-0">
|
|
<view class="block br20">
|
|
<view class="row-between">
|
|
<view>
|
|
<view class="row">
|
|
<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
|
|
<view class="text-333 u-m-l-10 nr">券包</view>
|
|
</view>
|
|
<view class="text-755023 xs u-m-t-10">
|
|
<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
|
|
</view>
|
|
</view>
|
|
<view class="u-relative">
|
|
<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
|
|
<view class="text-755023 u-absolute price xs">￥2.00</view>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-bg u-m-t-32">
|
|
<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
|
|
<view class="bold-600 u-text-center u-p-t-26">
|
|
<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
|
|
</view>
|
|
<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coupon-list u-m-t-12" v-if="current === 1">
|
|
<view class="coupon-list-bg row-between">
|
|
<view class="row-start row-column u-row-center u-text-center">
|
|
<view>
|
|
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
|
|
</view>
|
|
<view class="full">满20元可用</view>
|
|
</view>
|
|
<view class="flex1 u-m-l-80 row-between">
|
|
<view>
|
|
<view class="coupon-text bold-600">优惠券</view>
|
|
<view class="xs u-m-t-20 date">有效期3天</view>
|
|
</view>
|
|
<view>
|
|
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coupon-list-bg row-between">
|
|
<view class="row-start row-column u-row-center u-text-center">
|
|
<view>
|
|
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
|
|
</view>
|
|
<view class="full">满20元可用</view>
|
|
</view>
|
|
<view class="flex1 u-m-l-80 row-between">
|
|
<view>
|
|
<view class="coupon-text bold-600">优惠券</view>
|
|
<view class="xs u-m-t-20 date">有效期3天</view>
|
|
</view>
|
|
<view>
|
|
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coupon-list-bg row-between">
|
|
<view class="row-start row-column u-row-center u-text-center">
|
|
<view>
|
|
<price-format :color="themeColor" :price="121" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
|
|
</view>
|
|
<view class="full">满20元可用</view>
|
|
</view>
|
|
<view class="flex1 u-m-l-80 row-between">
|
|
<view>
|
|
<view class="coupon-text bold-600">优惠券</view>
|
|
<view class="xs u-m-t-20 date">有效期3天</view>
|
|
</view>
|
|
<view>
|
|
<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [
|
|
{
|
|
name: '购买'
|
|
},
|
|
{
|
|
name: '兑换'
|
|
}
|
|
],
|
|
current: 1
|
|
}
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-755023 {color: #755023;}
|
|
.text-845F2E {color: #845F2E;}
|
|
.text-D8A658 {color: #D8A658;}
|
|
|
|
.coupon {
|
|
.package {
|
|
background-color: #2D2622;
|
|
height: 180rpx;
|
|
|
|
& > view:first-child {
|
|
font-size: 64rpx;
|
|
background: linear-gradient(90deg, #FDE0B4 0%, #FFC07F 100%);
|
|
letter-spacing: 1px;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
& > view:last-child {
|
|
font-size: 30rpx;
|
|
background: linear-gradient(270deg, #FDE0B4 0%, #FFC07F 100%);
|
|
letter-spacing: 1px;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
background-color: #F6F6F6;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
top: 160rpx;
|
|
padding: 30rpx 24rpx;
|
|
|
|
.block {
|
|
height: 386rpx;
|
|
background: #FBE9CC;
|
|
border: 2rpx solid #E0B66C;
|
|
padding: 24rpx 36rpx 24rpx;
|
|
|
|
.price {
|
|
left: 22rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.coupon-bg {
|
|
width: 207rpx;
|
|
height: 196rpx;
|
|
background: url(#{$cloudPath}img/icon_package3.png) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-list {
|
|
.coupon-list-bg {
|
|
height: 176rpx;
|
|
background: url(#{$cloudPath}img/icon_coupon2.png) no-repeat;
|
|
background-size: cover;
|
|
margin: 0 32rpx 32rpx;
|
|
padding: 0 32rpx;
|
|
|
|
.full {
|
|
font-size: 20rpx;
|
|
color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
.coupon-text {
|
|
color: #1D2129;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.date {
|
|
color: rgba(0, 0, 0, .4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |