|
@@ -1,19 +1,210 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="">
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <view class="my-ticket flex-common-css">
|
|
|
|
|
+ <Nav title="我的优惠券" titleColor="#333" bgckgroundBox='#fff'></Nav>
|
|
|
|
|
+ <view class="tab-box flex-justify-around bgc-f ">
|
|
|
|
|
+ <view class="tab-but flex-1 flex-direction align-items-center" @click="tabStitle(index)"
|
|
|
|
|
+ v-for="(item, index) in tabList" :key="index">
|
|
|
|
|
+ <view class="fs-32 mb-18" :class="tabNum==index?'fc-41ABF5':'fc-3'">
|
|
|
|
|
+ {{item}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-show="tabNum==index" class="tab-hr bgc-41ABF5"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
|
|
|
|
|
+ <view class="list-box">
|
|
|
|
|
+ <view class="item-box display-flex mb-20" v-for="(item,index) in itemData" :key="index">
|
|
|
|
|
+ <view class="item-left flex-direction align-items-center flex-justify-center"
|
|
|
|
|
+ :class="item.type == 0?'bgc-FCE7E2':'bgc-E6E6E6'">
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <view class="fs-30 fw-600" :class="item.type == 0?'fc-FB3D03':'fc-9'">¥</view>
|
|
|
|
|
+ <view class="fs-48 fw-600" :class="item.type == 0?'fc-FB3D03':'fc-9'">10</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24" :class="item.type == 0?'fc-6':'fc-9'">
|
|
|
|
|
+ 满90元可用
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="ball"></view>
|
|
|
|
|
+ <view class="ball-two"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="item-hr" :class="item.type == 0?'':'item-hr-two'"></view>
|
|
|
|
|
+ <view class="item-right flex-1 bgc-f">
|
|
|
|
|
+ <view class="fs-28 mb-12 ticket-name text-overflow-ellipsis"
|
|
|
|
|
+ :class="item.type == 0?'fc-3':'fc-9'">
|
|
|
|
|
+ {{item.name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fc-FB3D03 mb-12" v-if="item.type == 0">
|
|
|
|
|
+ 仅剩时间:01:59:32
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fc-9 mb-12" v-else>
|
|
|
|
|
+ 2024.05.08-2024.05.24
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="flex-justify-space">
|
|
|
|
|
+ <view class="fs-24" :class="item.type == 0?'fc-3':'fc-9'">
|
|
|
|
|
+ 券类型:外卖券
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <view class="fs-24 fc-9">
|
|
|
|
|
+ 规则
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="toRight" src="@/static/img/toRight.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="item-but fc-FB3D03" v-if="item.type == 0">
|
|
|
|
|
+ 去使用
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="item-img" src="@/static/img/my/ysy.png" mode="" v-else-if="item.type == 1">
|
|
|
|
|
+ </image>
|
|
|
|
|
+ <image class="item-img" src="@/static/img/my/ysx.png" mode="" v-else></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ <view class="bot-but flex-justify-center align-items-center bgc-f" @click="goToUrl(2)">
|
|
|
|
|
+ <view class="fc-41ABF5 fs-32 fw-600 mr-8">
|
|
|
|
|
+ 去领券中心
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="toRight" src="@/static/img/my/to-right.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- export default {
|
|
|
|
|
- components: {},
|
|
|
|
|
- data() {
|
|
|
|
|
- return {};
|
|
|
|
|
- },
|
|
|
|
|
- mounted() {},
|
|
|
|
|
- methods: {},
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ export default {
|
|
|
|
|
+ components: {},
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ tabList: ['待使用', '已使用', '已失效'],
|
|
|
|
|
+ tabNum: 0,
|
|
|
|
|
+ itemData: [{
|
|
|
|
|
+ type: 0,
|
|
|
|
|
+ name: '优惠券名称优惠券名称惠券名'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 0,
|
|
|
|
|
+ name: '优惠券名称'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 1,
|
|
|
|
|
+ name: '优惠券名称'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ name: '优惠券名称优惠券名称惠券名'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ name: '优惠券名称优惠券名称惠券名'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ name: '优惠券名称优惠券名称惠券名'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {},
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ tabStitle(index) {
|
|
|
|
|
+ this.tabNum = index
|
|
|
|
|
+ },
|
|
|
|
|
+ scrolltolower() {}
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
|
+ .tab-box {
|
|
|
|
|
+ padding: 22rpx 0 4rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab-hr {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 4rpx;
|
|
|
|
|
+ border-radius: 2rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-box {
|
|
|
|
|
+ padding: 24rpx 20rpx 4rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-hr {
|
|
|
|
|
+ width: 0px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ border-right: 1rpx dashed #FB7850;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-hr-two {
|
|
|
|
|
+ width: 0px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ border-right: 1rpx dashed #999;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-left {
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ padding: 34rpx 36rpx 44rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ border-radius: 20rpx 0 0 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ball {
|
|
|
|
|
+ width: 24rpx;
|
|
|
|
|
+ height: 24rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: -12rpx;
|
|
|
|
|
+ right: -12rpx;
|
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ball-two {
|
|
|
|
|
+ width: 24rpx;
|
|
|
|
|
+ height: 24rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ bottom: -12rpx;
|
|
|
|
|
+ right: -12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-right {
|
|
|
|
|
+ padding: 24rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ border-radius: 0 20rpx 20rpx 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ticket-name {
|
|
|
|
|
+ max-width: 280rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .toRight {
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-but {
|
|
|
|
|
+ width: 124rpx;
|
|
|
|
|
+ height: 52rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 52rpx;
|
|
|
|
|
+ border: 1rpx solid #FB3D03;
|
|
|
|
|
+ border-radius: 200rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 55%;
|
|
|
|
|
+ right: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item-img {
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 40%;
|
|
|
|
|
+ right: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .bot-but {
|
|
|
|
|
+ padding: 22rpx 0;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|