czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加优惠券相关

Browse Source
This commit is contained in:
GaoHao
2024-10-24 15:46:44 +08:00
parent ae11d40951
commit a67035e2ef
8 changed files with 706 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

580
pageCoupon/index.vue
View File

@@ -1,311 +1,82 @@
<template>
<!-- 顶部菜单 -->
<view class="tagClass">
<view class="tag-item" @tap="pageData.status.active=index" :class="{active:index===pageData.status.active}"
<view class="tag-item" @tap="tagClick(item,index)" :class="{active:index===pageData.status.active}"
v-for="(item,index) in pageData.status.list" :key="index">
{{item}}
{{item}}(0)
</view>
</view>
<!-- 搜搜 -->
<view class="search">
<view class="inputsearch">
<!-- <view class="inputsearch">
搜索优惠券名称
</view>
</view> -->
<up-input
placeholder="搜索优惠券名称"
prefixIcon="search"
shape="circle"
border="none"
fontSize="14px"
prefixIconStyle="font-size: 28px;color: #999;"
:customStyle="{backgroundColor:'#F9F9F9',padding: '10rpx 18rpx'}"
></up-input>
<view class="searchBtn">
搜索
</view>
</view>
<!-- 内容 -->
<view class="couponContent">
<view class="couponContentList">
<view class="couponContentList">
<view class="couponContent" v-for="(item,index) in 4" :key="index">
<view class="couponContentListTop">
<view>
充值20元优惠券
</view>
<view>
ID:258792
</view>
<view class="title"> 充值20元优惠券 </view>
<view> ID:258792 </view>
</view>
<view class="couponContentListcontent">
<view>
<view>
使用门槛
</view>
<view>
满200.00元减20.00元
</view>
<view> 使用门槛 </view>
<view> 满200.00元减20.00元 </view>
</view>
<view>
<view>
券类型
</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>
<view> 满200.00元减20.00元 </view>
</view>
<view class="JQclass">
<image :src="'/static/coupon/qrcode.svg'" mode="scaleToFill" />
</view>
</view>
<view class="couponContentListcontent2">
<view class="">
<view class="">
1000
</view>
<view class="">
发放数量
</view>
<view class="num"> 1000 </view>
<view class="lable"> 发放数量 </view>
</view>
<view class="">
<view class="">
1000
</view>
<view class="">
发放数量
</view>
<view class="num"> 0 </view>
<view class="lable"> 发放数量 </view>
</view>
<view class="">
<view class="">
1000
</view>
<view class="">
发放数量
</view>
<view class="num"> 1000 </view>
<view class="lable"> 发放数量 </view>
</view>
<view class="">
<view class="">
1000
</view>
<view class="">
发放数量
</view>
<view class="num"> 0 </view>
<view class="lable"> 发放数量 </view>
</view>
</view>
<view class="couponContentListbottom">
<button>编辑</button>
<button @tap="editCoupon(item)">编辑</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>
<button @click="addCoupon">+添加{{pageData.status.tagName}}</button>
</view>
</template>
@@ -317,37 +88,72 @@
toRef,
watch
} from 'vue';
const pageData = reactive({
status: {
list: ['全部', '储存中储存中', '已取完', '已过期', '储存中', '已取完', '已过期', ],
list: ['优惠券', '商品兑换券', ],
tagName: "优惠券",
active: 0,
}
})
const adddiscount = ()=>{
go.to('PAGES_COUPON_DISCOUNTCOUPONS')
/**
* tag切换
*/
let tagClick = ( name,index ) => {
pageData.status.active = index;
pageData.status.tagName = name;
}
/**
* 添加
*/
let addCoupon = ()=>{
if ( pageData.status.active == 0 ) {
go.to('PAGES_COUPON_DISCOUNTCOUPONS')
} else {
go.to('PAGES_COUPON_CERTIFICATE')
}
}
/**
* 添加
*/
let editCoupon = ()=>{
if ( pageData.status.active == 0 ) {
go.to('PAGES_COUPON_DISCOUNTCOUPONS')
} else {
go.to('PAGES_COUPON_CERTIFICATE')
}
}
</script>
<style lang='scss'>
body{
background-color: #f9f9f9;
}
.tagClass {
width: 100%;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 44rpx;
padding-top: 44rpx;
padding: 0 28rpx;
background-color: #fff;
.tag-item {
display: inline-block;
padding: 8rpx 22rpx;
margin-left: 16rpx;
padding: 10rpx 24rpx;
margin-right: 32rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
text-align: center;
color: #666;
font-weight: 400;
font-size: 28rpx;
color: #666666;
background: #F7F7FA;
&.active {
background: #E6F0FF;
color: $my-main-color;
color: #318AFE;
}
}
}
@@ -361,7 +167,8 @@
justify-content: center;
align-items: center;
padding: 32rpx;
background-color: #fff;
margin-bottom: 32rpx;
.inputsearch {
color: #999999;
width: 542rpx;
@@ -382,116 +189,135 @@
border-radius: 32rpx 32rpx 32rpx 32rpx;
}
}
.couponContentList {
/* width: 694rpx; */
/* height: 544rpx; */
margin: 0 auto;
margin-bottom: 32rpx;
padding: 0 28rpx 32rpx 28rpx;
}
.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;
}
/* background-color: #f9f9f9; */
border-radius: 18rpx 18rpx 18rpx 18rpx;
background: #FFFFFF;
padding: 32rpx 24rpx;
margin-bottom: 32rpx;
.couponContentListTop {
display: flex;
justify-content: space-between;
align-items: center;
.title{
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.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;
>view:last-child {
width: 98rpx;
height: 36rpx;
line-height: 36rpx;
text-align: center;
padding-top: 24rpx;
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;
}
.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;
}
.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;
}
>button:first-child {
background-color: #318afe;
color: #fff;
>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;
.num{
font-weight: bold;
font-size: 24rpx;
color: #333333;
margin-bottom: 16rpx;
}
.lable{
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
}
.couponContentListbottom {
margin-top: 24rpx;
overflow: hidden;
>button {
float: right;
width: 140rpx;
height: 56rpx;
margin-left: 22rpx;
line-height: 56rpx;
text-align: center;
color: #999;
background: #F7F7FA;
border-radius: 28rpx 28rpx 28rpx 28rpx;
font-size: 28rpx;
}
>button:first-child {
background-color: #318afe;
color: #fff;
}
}
}
.couponContent:last-of-type{
margin-bottom: 150rpx;
}
.bottomPop {
position: fixed;
bottom: 0;