331 lines
7.0 KiB
Vue
331 lines
7.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="bg-white u-p-b-36 rounded-20">
|
|
<view class="title row-between" @click="toCouponList">
|
|
<view>优惠券</view>
|
|
<view>
|
|
可用 <text class="num">13</text> 张
|
|
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-m-l-32">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
|
|
<view class="scroll-view-item_H coupon" v-for="(item, index) in couponList" :key="index">
|
|
<view class="coupon-top">
|
|
<text>满减券x{{item.num}}</text>
|
|
</view>
|
|
<view class="u-m-t-50 u-text-center primary">
|
|
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="item.price" :weight="500"></price-format>
|
|
</view>
|
|
<view class="dashed"></view>
|
|
<view class="coupon-tips">
|
|
满{{item.full_price}}元可用
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="coupon-btn">领取优惠券</view>
|
|
</view>
|
|
|
|
<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
|
|
<view class="title row-between" @click="toCouponPackage">
|
|
<view>优惠券包</view>
|
|
<view>
|
|
可用 <text class="num">13</text> 张
|
|
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-m-l-32">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
|
|
<view class="scroll-view-item_H coupon2" v-for="(item, index) in couponPackageList" :key="index">
|
|
<view class="coupon-top2">
|
|
<text>优惠券专享</text>
|
|
</view>
|
|
<view class="unit">
|
|
<view>{{item.price}}</view>
|
|
<view>元</view>
|
|
<view class="u-m-l-10 u-m-r-10">x</view>
|
|
<view>{{item.num}}</view>
|
|
<view>张</view>
|
|
</view>
|
|
<view class="coupon-tips2">
|
|
{{item.full_price == 0 ? '无门槛' : '满' + item.full_price + '元可用'}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
|
|
<view class="title row-between" @click="toCouponExchange">
|
|
<view>兑换券</view>
|
|
<view>
|
|
可用 <text class="num">13</text> 张
|
|
<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-m-l-32">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
|
|
<view class="scroll-view-item_H coupon" v-for="(item, index) in 10" :key="index">
|
|
<view class="coupon-top">
|
|
<text>满减券x1</text>
|
|
</view>
|
|
<view class="u-m-t-50 u-text-center primary">
|
|
<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="18" :weight="500"></price-format>
|
|
</view>
|
|
<view class="dashed"></view>
|
|
<view class="coupon-tips">
|
|
满11元可用
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="coupon-btn">立即兑换</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
|
|
import { getCoupon } from "@/api/user"
|
|
import { getCouponList } from '@/api/activity'
|
|
|
|
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data() {
|
|
return {
|
|
tab: [
|
|
{
|
|
name: '购买'
|
|
},
|
|
{
|
|
name: '兑换'
|
|
}
|
|
],
|
|
current: 0,
|
|
upOption: {
|
|
noMoreSize: 4,
|
|
empty: {
|
|
tip: '~ 空空如也 ~', // 提示
|
|
btnText: '',
|
|
},
|
|
textNoMore: '没有更多了'
|
|
},
|
|
list: [],
|
|
couponList: [
|
|
{price: 2, full_price: 9, num: 1},
|
|
{price: 3, full_price: 15, num: 3},
|
|
{price: 4, full_price: 18, num: 4},
|
|
{price: 2, full_price: 0, num: 4},
|
|
],
|
|
couponPackageList: [
|
|
{price: 2, full_price: 9, num: 1},
|
|
{price: 3, full_price: 15, num: 3},
|
|
{price: 4, full_price: 18, num: 4},
|
|
{price: 2, full_price: 0, num: 4},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index
|
|
},
|
|
|
|
// 初始化数据
|
|
upCallback(page) {
|
|
getCouponList({
|
|
page: page.num,
|
|
current: this.current,
|
|
}).then(res => {
|
|
const { data } = res
|
|
this.mescroll.endSuccess(data.length, data.totalPages);
|
|
//设置列表数据
|
|
if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
|
|
this.list = this.list.concat(data); //追加新数据
|
|
}).catch(() => {
|
|
this.mescroll.endErr();
|
|
})
|
|
},
|
|
|
|
// 优惠券列表
|
|
toCouponList() {
|
|
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_list' })
|
|
},
|
|
|
|
// 优惠券包列表
|
|
toCouponPackage() {
|
|
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_package' })
|
|
},
|
|
|
|
// 兑换券列表
|
|
toCouponExchange() {
|
|
uni.navigateTo({ url: '/bundle/pages/coupon/coupon_exchange' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.rounded-20 {
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.content {
|
|
margin: 26rpx;
|
|
}
|
|
|
|
.title {
|
|
padding: 26rpx 32rpx;
|
|
}
|
|
|
|
.num {
|
|
color: #E80E0F;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.scroll-view-item_H {
|
|
display: inline-block;
|
|
width: 206rpx;
|
|
height: 196rpx;
|
|
}
|
|
|
|
.coupon {
|
|
position: relative;
|
|
background: #FFF5F3;
|
|
border-radius: 8px;
|
|
margin-right: 22rpx;
|
|
height: 100px;
|
|
}
|
|
|
|
.coupon::before,
|
|
.coupon::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 70%;
|
|
width: 32rpx;
|
|
/* 控制凹口大小 */
|
|
height: 32rpx;
|
|
background: #fff;
|
|
/* 与页面背景色一致 */
|
|
border-radius: 50%;
|
|
transform: translateY(-70%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.coupon::before {
|
|
left: -16rpx;
|
|
}
|
|
|
|
.coupon::after {
|
|
right: -16rpx;
|
|
}
|
|
|
|
.coupon-top {
|
|
width: 165rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient( 180deg, #FC7001 0%, #FE00B0 100%);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
border-bottom-left-radius: 24rpx;
|
|
border-bottom-right-radius: 24rpx;
|
|
color: #fff;
|
|
font-size: 22rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.dashed {
|
|
position: absolute;
|
|
top: 66%;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-66%);
|
|
border: 2rpx dashed #E0B66C;
|
|
}
|
|
|
|
.coupon-tips {
|
|
color: #E0B66C;
|
|
position: absolute;
|
|
top: 90%;
|
|
left: 50%;
|
|
transform: translate(-50%, -90%);
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.coupon-btn {
|
|
width: 554rpx;
|
|
height: 68rpx;
|
|
font-size: 28rpx;
|
|
line-height: 68rpx;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin: 44rpx auto 0;
|
|
background: linear-gradient( 90deg, #FC680E 0%, #FE02AC 100%);
|
|
border-radius: 116rpx 116rpx 116rpx 116rpx;
|
|
}
|
|
|
|
.coupon2 {
|
|
margin-right: 20rpx;
|
|
position: relative;
|
|
width: 258rpx;
|
|
height: 161rpx;
|
|
background: #FFF5F3;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
}
|
|
|
|
.curved-rect {
|
|
width: 258rpx;
|
|
height: 64rpx;
|
|
}
|
|
|
|
.coupon-top2 {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
width: 136rpx;
|
|
height: 30rpx;
|
|
background: #FFEBE3;
|
|
text-align: center;
|
|
border-bottom-left-radius: 24rpx;
|
|
border-bottom-right-radius: 24rpx;
|
|
color: #F1BFB6;
|
|
font-size: 22rpx;
|
|
line-height: 27rpx;
|
|
}
|
|
|
|
.unit {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 40rpx;
|
|
color: #F90004;
|
|
font-weight: 600;
|
|
margin-top: 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.coupon-tips2 {
|
|
background-image: url('/static/coupon_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 66rpx;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
color: #fff;
|
|
}
|
|
</style> |