czg_team
/
new-cashier
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
new-cashier/jeepay-ui-uapp-merchant/pageCoupon/index.vue

515 lines
9.0 KiB
Vue
Raw Blame History

<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 View Git Blame Copy Permalink