|
|
@@ -1,214 +1,124 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 顶部导航栏 -->
|
|
|
- <view class="top-tab">
|
|
|
- <u-tabs class="tab" :list="list" @click="handlerChangeTab1" :activeStyle="{
|
|
|
- color: '#fff',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- }" :inactiveStyle="{
|
|
|
- color: '#fff',
|
|
|
- transform: 'scale(1)',
|
|
|
- }" itemStyle="height: 34px; width:27%;" lineColor="#D89A4C"></u-tabs>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 优惠券的可用和失效 -->
|
|
|
- <view class="use">
|
|
|
- <u-tabs :list="list2" lineWidth="60" lineColor="#347caf" :scrollable="false" :activeStyle="{
|
|
|
- color: '#347caf',
|
|
|
- fontWeight: 'bold',
|
|
|
- transform: 'scale(1.05)',
|
|
|
- }" :inactiveStyle="{
|
|
|
- color: '#b7b6b8',
|
|
|
- transform: 'scale(1)',
|
|
|
- }" itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;" @change="handlerSelectTab" />
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 优惠券可用 -->
|
|
|
- <view class="couponUse" v-show="lable_type == 0" :key="index" v-for="(item, index) of init_list">
|
|
|
- <view class="useLeft">
|
|
|
- <view>{{ item.couponVO.name }}</view>
|
|
|
- <text>到期时间 : {{ item.couponVO.dueTime }}</text>
|
|
|
- </view>
|
|
|
- <view class="useRight">
|
|
|
- <view class="text">{{ 10 - item.couponVO.reduce }}<text>折</text></view>
|
|
|
- <view>折扣</view>
|
|
|
- <view class="gouUse" @click='handlerToUsed(item)'>去使用</view>
|
|
|
+ <view class='container'>
|
|
|
+ <view class='coupon-box'>
|
|
|
+ <view class='coupon-item'>
|
|
|
+ <view class='item-left'>
|
|
|
+ <view class='left-price'>满500减100元</view>
|
|
|
+ <view class='left-time'>2023-03-01~2024-05-30</view>
|
|
|
+ </view>
|
|
|
+ <view class='item-right'>
|
|
|
+ <view class='rebates'>
|
|
|
+ <span class='rebates-numb'>2</span>折
|
|
|
+ </view>
|
|
|
+ <view class='rebates-text'>折扣</view>
|
|
|
+ <button class='btn' @click='handlerToUse'>去使用</button>
|
|
|
+ <view class='circle-box'>
|
|
|
+ <view class='circle' v-for="item of 6"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <u-empty v-if="total == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
|
|
|
- </u-empty>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getUserAcceptCouponsList
|
|
|
- } from '@/api/client/mine.js';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- list: [{
|
|
|
- id: 1,
|
|
|
- name: '满减',
|
|
|
- type: 'REDUCE',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '折扣',
|
|
|
- type: 'DISCOUNT',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: '赠送',
|
|
|
- type: 'GIVE',
|
|
|
- },
|
|
|
- ],
|
|
|
- list2: [{
|
|
|
- name: '可用',
|
|
|
- type: 'UNUSED',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '失效',
|
|
|
- type: 'CLOSED',
|
|
|
- },
|
|
|
- ],
|
|
|
- lable_type: 0, // 是否可用
|
|
|
- queryParams: {
|
|
|
- size: '10', //分页信息 取值范围: 页码,分页大小
|
|
|
- type: 'REDUCE', //优惠券类型 允许值: GIVE(赠送), REDUCE(满减), DISCOUNT(折扣)
|
|
|
- status: 'UNUSED', // 用户优惠券状态 UNUSED(未使用), USED(已使用), EXPIRED(已过期), CLOSED(作废)
|
|
|
- },
|
|
|
- init_list: [], //初始化列表
|
|
|
- total: 0,
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.handlerInitCouponList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 初始化优惠卷列表
|
|
|
- handlerInitCouponList() {
|
|
|
- getUserAcceptCouponsList(this.queryParams).then(res => {
|
|
|
- this.init_list = res.data;
|
|
|
- this.init_list.map(rs=>{
|
|
|
- rs.couponVO.dueTime = this.handlerGetTime(rs.couponVO.expiration)
|
|
|
- })
|
|
|
- this.total = res.data.total;
|
|
|
- });
|
|
|
- },
|
|
|
- handlerGetTime(e){
|
|
|
- // 1707148800000
|
|
|
- let time = new Date(e)
|
|
|
- let year = time.getFullYear()
|
|
|
- let month = time.getMonth() + 1
|
|
|
- let date = time.getDate()
|
|
|
- if (month < 10) {
|
|
|
- month = '0' + month
|
|
|
- }
|
|
|
- if (date < 10) {
|
|
|
- date = '0' + date
|
|
|
- }
|
|
|
- return year + '-' + month + '-' + date
|
|
|
-
|
|
|
- },
|
|
|
- // 选择顶部导航栏
|
|
|
- handlerChangeTab1(e) {
|
|
|
- this.queryParams.type = e.type;
|
|
|
- this.handlerInitCouponList();
|
|
|
- },
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
|
|
|
- // 点击选择下层tab栏 选择是否可用
|
|
|
- handlerSelectTab(e) {
|
|
|
- this.lable_type = e.index;
|
|
|
- this.queryParams.status = e.type;
|
|
|
- this.handlerInitCouponList();
|
|
|
- },
|
|
|
- // 点击去使用
|
|
|
- handlerToUsed(item){
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pagesHome/marketer/index?id=${item.couponVO.merchantId}`
|
|
|
- })
|
|
|
}
|
|
|
},
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- height: 100vh;
|
|
|
- background-color: #efefef;
|
|
|
-
|
|
|
- .top-tab {
|
|
|
- width: 100%;
|
|
|
- background-color: #347caf;
|
|
|
- padding: 20rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .use {
|
|
|
- padding: 0 140rpx;
|
|
|
+ methods:{
|
|
|
+ handlerToUse(){
|
|
|
+ uni.showToast({
|
|
|
+ title:'使用',
|
|
|
+ icon:"none"
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+</script>
|
|
|
|
|
|
- /* 优惠券可用 */
|
|
|
- .couponUse {
|
|
|
- margin: 20rpx 30rpx;
|
|
|
- height: 200rpx;
|
|
|
- display: flex;
|
|
|
- background-color: #fff;
|
|
|
+<style lang='scss' scope>
|
|
|
+ page{
|
|
|
+ background-color:#F9F9F9;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ min-height:100vh;
|
|
|
+ .coupon-box{
|
|
|
+ padding:24rpx 32rpx;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
- .useLeft {
|
|
|
- width: 380rpx;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- >view {
|
|
|
- font-size: 40rpx;
|
|
|
- margin: 20rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- >text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #5f5f5f;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .useRight {
|
|
|
- height: 100%;
|
|
|
- padding: 10rpx;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- width: calc(100% - 380rpx);
|
|
|
- background-color: #347caf;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 50rpx;
|
|
|
-
|
|
|
- >text {
|
|
|
- margin-left: 5rpx;
|
|
|
+ width: 100%;
|
|
|
+ .coupon-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 263rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.08);
|
|
|
+ .item-left{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ width: 64%;
|
|
|
+ text-align: center;
|
|
|
+ .left-price{
|
|
|
+ color:#0C1223;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .left-time{
|
|
|
+ color:#999999;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .item-right{
|
|
|
+ position: relative;
|
|
|
+ width: 35.27%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ED4444;
|
|
|
+ border-radius: 0 16rpx 16rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ .rebates{
|
|
|
+ font-size: 32rpx;
|
|
|
+ .rebates-numb{
|
|
|
+ font-size: 68rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rebates-text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ height:54rpx;
|
|
|
+ border-radius:30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 54rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color:#E2433F;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
|
|
|
- .gouUse {
|
|
|
- width: 180rpx;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- color: #347caf;
|
|
|
- margin: 16rpx 0 0 60rpx;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .couponDisUse {
|
|
|
- .useRight {
|
|
|
- background-color: #cecece;
|
|
|
-
|
|
|
- .gouUse {
|
|
|
- color: #cecece;
|
|
|
+ .circle-box{
|
|
|
+ position: absolute;
|
|
|
+ left: -7%;
|
|
|
+ height: 263rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ .circle{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border-radius:50%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
忆雪
zxl