新增分包支付汇总
This commit is contained in:
515
pageCoupon/index.vue
Normal file
515
pageCoupon/index.vue
Normal file
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<!-- 顶部菜单 -->
|
||||
<view class="tagClass">
|
||||
<view class="tag-item" @tap="pageData.status.active=index" :class="{active:index===pageData.status.active}"
|
||||
v-for="(item,index) in pageData.status.list" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜搜 -->
|
||||
<view class="search">
|
||||
<view class="inputsearch">
|
||||
搜索优惠券名称
|
||||
</view>
|
||||
<view class="searchBtn">
|
||||
搜索
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="couponContent">
|
||||
<view class="couponContentList">
|
||||
<view class="couponContentListTop">
|
||||
<view>
|
||||
充值20元优惠券
|
||||
</view>
|
||||
<view>
|
||||
ID:258792
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent">
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
券类型
|
||||
</view>
|
||||
<view>
|
||||
店铺领取可用
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view class="JQclass">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent2">
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListbottom">
|
||||
<button>编辑</button>
|
||||
<button>删除</button>
|
||||
<button>同步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContent">
|
||||
<view class="couponContentList">
|
||||
<view class="couponContentListTop">
|
||||
<view>
|
||||
充值20元优惠券
|
||||
</view>
|
||||
<view>
|
||||
ID:258792
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent">
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
券类型
|
||||
</view>
|
||||
<view>
|
||||
店铺领取可用
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view class="JQclass">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent2">
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListbottom">
|
||||
<button>编辑</button>
|
||||
<button>删除</button>
|
||||
<button>同步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContent">
|
||||
<view class="couponContentList">
|
||||
<view class="couponContentListTop">
|
||||
<view>
|
||||
充值20元优惠券
|
||||
</view>
|
||||
<view>
|
||||
ID:258792
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent">
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
券类型
|
||||
</view>
|
||||
<view>
|
||||
店铺领取可用
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
使用门槛门槛
|
||||
</view>
|
||||
<view>
|
||||
满200.00元减20.00元
|
||||
</view>
|
||||
</view>
|
||||
<view class="JQclass">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListcontent2">
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="">
|
||||
1000
|
||||
</view>
|
||||
<view class="">
|
||||
发放数量
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponContentListbottom">
|
||||
<button>编辑</button>
|
||||
<button>删除</button>
|
||||
<button>同步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottomPop">
|
||||
<button @click="adddiscount">+添加满减优惠券</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
toRef,
|
||||
watch
|
||||
} from 'vue';
|
||||
const pageData = reactive({
|
||||
status: {
|
||||
list: ['全部', '储存中储存中', '已取完', '已过期', '储存中', '已取完', '已过期', ],
|
||||
active: 0,
|
||||
}
|
||||
})
|
||||
const adddiscount = ()=>{
|
||||
go.to('PAGES_COUPON_DISCOUNTCOUPONS')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.tagClass {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-top: 44rpx;
|
||||
|
||||
.tag-item {
|
||||
display: inline-block;
|
||||
padding: 8rpx 22rpx;
|
||||
margin-left: 16rpx;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
background: #F7F7FA;
|
||||
|
||||
&.active {
|
||||
background: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagClass::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
|
||||
.inputsearch {
|
||||
color: #999999;
|
||||
width: 542rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.searchBtn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
margin-left: 32rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background: #318AFE;
|
||||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.couponContent {
|
||||
background-color: #f9f9f9;
|
||||
padding: 32rpx 0;
|
||||
|
||||
.couponContentList {
|
||||
width: 694rpx;
|
||||
height: 544rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
margin: 0 auto;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.couponContentListTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
>view:last-child {
|
||||
width: 98rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
background: #F7F7FA;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.couponContentListcontent {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 1rpx;
|
||||
width: 646rpx;
|
||||
height: 228rpx;
|
||||
background: #F9F9F9;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
position: relative;
|
||||
|
||||
>view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12rpx;
|
||||
|
||||
>view:first-child {
|
||||
width: 180rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-left: 48rpx;
|
||||
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 0rpx;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.JQclass {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background-color: #318AFE;
|
||||
position: absolute;
|
||||
right: 48rpx;
|
||||
top: 90rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.couponContentListcontent2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.couponContentListbottom {
|
||||
margin-top: 24rpx;
|
||||
|
||||
>button {
|
||||
float: right;
|
||||
width: 140rpx;
|
||||
height: 56rpx;
|
||||
margin-right: 22rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
>button:first-child {
|
||||
background-color: #318afe;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottomPop {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 150rpx;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
>button {
|
||||
width: 530rpx;
|
||||
margin: 30rpx 0;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
background: #318AFE;
|
||||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user