增加优惠券相关

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

View File

@@ -0,0 +1,183 @@
<template>
<up-popup :show="show" @close="close" round="20" mode="bottom">
<view class="head">
<text></text>
<text class="title">请选择</text>
<up-icon name="close-circle-fill" color="#333" size="20"></up-icon>
</view>
<view class="content">
<view class="category">
<view class="category_item" @tap="itemClick(item,index)" :class="{active:index===category.active}" v-for="(item,index) in category.list" :key="index">{{item.name}}</view>
</view>
<up-radio-group v-model="goodsValue" @change="groupChange" style="width: 100%;display: initial;">
<view class="goodsList">
<view class="goodsItem" @tap="goodsClick(item,index)" v-for="(item,index) in category.goodsList" :key="index">
<view>{{item.name}}</view>
<up-radio
:key="item.id"
:name="item.id"
@change="groupChange"
>
</up-radio>
</view>
</view>
</up-radio-group>
</view>
<view class="bomBtn">
<view class="affirm" @tap="affirm">确定</view>
</view>
</up-popup>
</template>
<script setup>
import { reactive,ref,onMounted } from 'vue';
import {
$tbShopCategory,
$tbProductV2
} from "@/http/yskApi/goods.js"
const props=defineProps({
show:{
type:Boolean,
default:false
}
})
const emits=defineEmits(['itemClick','close', "affirm"])
const category=reactive({
list:[],
goodsList:[],
active: 0,
query: {
page: 0,
size: 999,
categoryId: '',
sort: "createdAt,desc",
}
})
let goodsValue = ref('');
let show=ref(false)
function itemClick(item,index){
category.active = index;
category.query.categoryId = item.id;
getGoodsList()
}
function goodsClick (item,index) {
goodsValue.value = item.id;
}
function groupChange ( n ) {
console.log(n)
}
function getCategoryList () {
$tbShopCategory({
page:0,size:200
}).then(res=>{
category.list = res.content;
category.query.categoryId = res.content[0].id
getGoodsList()
})
}
function getGoodsList () {
$tbProductV2(category.query).then(res => {
console.log(res);
category.goodsList = res.content.map(v => {
return {
...v,
isSellNone: false,
checked: false,
showDetail: false
}
})
})
}
function open(){
show.value = true;
getCategoryList();
}
function close(){
show.value = false;
category.active = 0;
goodsValue.value = "";
emits('close')
}
/**
* 确认
*/
function affirm() {
console.log(goodsValue.value)
// let params = {
// coverImg: vdata.imgUrlList,
// consId: itemData.value.consId,
// amount: vdata.stockNumber,
// shopId: uni.getStorageSync("shopId"),
// }
// tbConsInfoFlowfrmLoss(params).then((res) => {
// show.value = false;
// vdata.imgUrlList = [];
// vdata.stockNumber = 1;
// })
}
defineExpose({
open,close,affirm
})
</script>
<style lang="scss">
.head{
display: flex;
padding: 32rpx 28rpx;
align-items: center;
justify-content: space-between;
.title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
}
.content{
display: flex;
height: 672rpx;
.category{
min-width: 316rpx;
height: 100%;
overflow-y: auto;
background: #F9F9F9;
.category_item{
padding: 22rpx 24rpx;
border-left: 8rpx solid transparent;
}
.active{
border-left: 8rpx solid #318AFE;
background-color: #fff;
}
}
.goodsList{
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
.goodsItem{
width: 100%;
padding: 22rpx 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.bomBtn{
padding: 16rpx 38rpx 32rpx 38rpx;
background-color: #fff;
.affirm{
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #318AFE;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
}
}
</style>

View File

@@ -1,150 +1,81 @@
<template>
<!-- 基础赠送设置切换 -->
<view class="foundation">
<view :class="[switchTop==1?'active':'']" @click="switchTop =1">
基础设置
</view>
<view :class="[switchTop==2?'active':'']" @click="switchTop=2">
赠送设置
</view>
</view>
<view class="content">
<view class="content1">
<view>
折扣名称
<view class="card">
<view class="item">
<view class="lable">优惠券名称</view>
<view class="value">
<up-input placeholder="填写名称" border="none" clearable ></up-input>
</view>
</view>
<input type="text" placeholder="填写名称" />
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
折扣%
</view>
<input type="text" placeholder="填写名称" />
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
使用门槛
</view>
<input type="text" placeholder="隔多少元,可用 " />
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
优惠券类型
</view>
<radio-group @change="radioChange" style="margin-top: 16rpx;">
<radio style="transform:scale(0.7)">单次折扣券</radio>
<radio style="transform:scale(0.7)">储值折扣券</radio>
</radio-group>
<view class="siwtichStyle">
<span>最大抵扣金额</span>
<switch color="#FFCC33" style="transform:scale(0.7)" />
</view>
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
抵扣规则
</view>
从最高价开始抵扣
<view class="siwtichStyle">
<span>可抵扣件数</span>
<switch color="#FFCC33" style="transform:scale(0.7)" />
</view>
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
有效期类型
</view>
领券后有效期内可用
<view class="siwtichStyle">
<span>有效期</span>
<input type="text" placeholder="填写天数 " />
</view>
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
隔天生效
</view>
<input type="text" placeholder="隔多少天,生效 " />
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content1">
<view>
总发放数量
</view>
<input type="text" placeholder="填写数量" />
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
</view>
<view class="content2">
<view class="">
可用门店
</view>
<view class="">
<span>进本店可用</span>
<span>></span>
<view class="item">
<view class="lable">使用门槛</view>
<view class="value">
<view></view><input placeholder="填写金额" border="none"></input><view></view><view></view><input placeholder="填写金额" border="none"></input><view></view>
</view>
</view>
</view>
<view class="content2">
<view class="">
可用商品
<view class="card">
<view class="item">
<view class="lable">有效期类型</view>
<view class="value">
<up-radio-group v-model="saveData.type">
<up-radio name="1" label="领券后有效期内可用" style="margin-right: 30rpx;"></up-radio>
<up-radio name="0" label="固定有效期范围内可用"></up-radio>
</up-radio-group>
</view>
</view>
<view class="">
<span>指定商品可用</span>
<span>></span>
<view class="item">
<view class="lable">有效期</view>
<view class="value">
<up-input placeholder="填写天数" border="none"></up-input>
</view>
</view>
<view class="siwtichStyle">
<!-- <span>选择商品</span> -->
<!-- <view class=""> -->
<span>选择商品</span>
<input type="text" placeholder="选择指定商品 " />
<span>></span>
<!-- </view> -->
<view class="item">
<view class="lable">隔天生效<up-icon @click="modalShow(1)" name="question-circle" color="#999" size="20" style="margin-left: 10rpx;"></up-icon></view>
<view class="value">
<view></view><input placeholder="填写天数" border="none" ></input><view>天生效</view>
</view>
</view>
<view class="item">
<view class="lable">可用日期</view>
<view class="value">
<up-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange" >
<up-checkbox
:customStyle="{marginBottom: '8px',marginRight: '15px'}"
v-for="(item, index) in pageData.value"
:key="index"
:label="item.name"
:name="item.name"
>
</up-checkbox>
</up-checkbox-group>
</view>
</view>
<view class="item">
<view class="lable">指定时间段可用</view>
<view class="value">
<up-radio-group v-model="saveData.timeType">
<up-radio name="1" label="全时段可用" style="margin-right: 30rpx;"></up-radio>
<up-radio name="0" label="指定时段可用"></up-radio>
</up-radio-group>
</view>
</view>
</view>
<view class="content2">
<view class="">
</view>
<view class="">
<span>更多设置</span>
<span>></span>
<view class="card">
<view class="item">
<view class="lable">总发放数量
<up-icon @click="modalShow(2)" name="question-circle" color="#999" size="20" style="margin-left: 10rpx;"></up-icon>
</view>
<view class="value">
<up-input v-model="saveData.num" placeholder="填写数量" border="none" clearable ></up-input>
</view>
</view>
</view>
<view class="content2">
<view>
指定时间段可用
</view>
<radio-group @change="radioChange" style="margin-top: 16rpx;">
<radio style="transform:scale(0.7)">全时段可用</radio>
<radio style="transform:scale(0.7)">指定时段可用</radio>
</radio-group>
</view>
<view class="content2">
<view class="">
发放方式
</view>
<view class="">
<span>用户不可自行领取</span>
<span>></span>
</view>
</view>
<view class="content1">
<view>
每人领取限量
</view>
不限量
<hr style="margin-top: 24rpx;color: #E5E5E5;" />
<view class="siwtichStyle2">
<span>不限量</span>
<switch color="#FFCC33" style="transform:scale(0.7)" />
</view>
<view class="bottomPop">
<button @click="save">保存</button>
</view>
<up-modal :show="pageData.show" :title="pageData.title" @confirm="pageData.show = false" ></up-modal>
</view>
</template>
<script setup>
@@ -154,126 +85,95 @@
toRef,
watch
} from 'vue';
let switchTop = ref(1)
const pageData = reactive({
value: [
{ name: "周一", },
{ name: "周二", },
{ name: "周三", },
{ name: "周四", },
{ name: "周五", },
{ name: "周六", },
{ name: "周日", },
],
title: "",
show: false,
})
const saveData = reactive({
type: '1',
timeType: '1',
num: '',
})
let modalShow = ( type ) => {
if ( type == 1) {
pageData.title = "领取后0天后的0点0分生效";
} else {
pageData.title = "限用户自行领取,(当库存为 0时集草等活动仍会赠送";
}
pageData.show = true;
}
let save = () => {
console.log(saveData.type)
console.log(saveData.timeType)
}
</script>
<style lang="scss">
.foundation {
width: 694rpx;
height: 70rpx;
background: #E6F0FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
margin: 36rpx auto;
>view {
text-align: center;
width: 344rpx;
height: 56rpx;
line-height: 56rpx;
color: #318AFE;
}
.active {
margin: auto;
width: 344rpx;
height: 56rpx;
background: #318AFE;
color: #fff;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
}
.content {
width: 750rpx;
background: #F9F9F9;
padding: 32rpx;
padding: 32rpx 28rpx 150rpx 28rpx;
.content1 {
background-color: #fff;
.card{
padding: 32rpx 24rpx;
>input {
margin-top: 16rpx;
background-color: #fff;
margin-bottom: 32rpx;
.item{
padding-bottom: 24rpx;
border-bottom: 2rpx solid #E5E5E5;
margin-bottom: 24rpx;
.lable{
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
display: flex;
align-items: center;
}
.value{
display: flex;
justify-content: flex-start;
align-items: center;
input{
width: 150rpx;
text-align: center;
}
}
}
>view {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.siwtichStyle {
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
width: 646rpx;
height: 104rpx;
background: #F9F9F9;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.siwtichStyle2 {
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
width: 646rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.item:last-child{
border-bottom: none;
margin-bottom: 0;
}
}
.content2 {
padding: 32rpx 24rpx;
margin: 32rpx 0;
box-sizing: border-box;
width: 694rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
>view:first-child {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
>view:nth-child(2) {
display: flex;
justify-content: space-between;
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
>view:nth-child(3) {
display: flex;
justify-content: space-between;
margin-top: 16rpx;
background: #FFFFFF;
width: 646rpx;
height: 154rpx;
background: #F9F9F9;
border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.siwtichStyle {
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
width: 646rpx;
height: 104rpx;
background: #F9F9F9;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.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;
}
}
}

View File

@@ -0,0 +1,160 @@
<template>
<view class="content">
<view class="card">
<view class="item">
<view class="lable">商品兑换券名称</view>
<view class="value">
<up-input placeholder="填写名称" border="none" clearable ></up-input>
</view>
</view>
<view class="item">
<view class="lable">使用门槛</view>
<view class="value">
<view></view><input placeholder="填写金额" border="none"></input><view>可用</view>
</view>
</view>
<view class="item">
<view class="lable">总发放数量</view>
<view class="value">
<up-input v-model="saveData.num" placeholder="填写数量" border="none" clearable ></up-input>
</view>
</view>
</view>
<view class="card">
<view class="item">
<view class="lable">指定抵扣商品</view>
<view class="value">
<view class="selectGoods" @tap="selectGoodsOpen">
<view>
<view class="title">选择商品</view>
<view class="goodsName">选择指定商品</view>
</view>
<up-icon name="arrow-right" color="#9F9F9F" size="22"></up-icon>
</view>
</view>
</view>
</view>
<view class="bottomPop">
<button @click="save">保存</button>
</view>
<select-goods ref="goods" @affirm="affirm"></select-goods>
</view>
</template>
<script setup>
import myActionSheet from '@/components/my-components/my-action-sheet';
import selectGoods from './components/select-goods';
import {
reactive,
ref,
toRef,
watch
} from 'vue';
const pageData = reactive({
title: "",
show: false,
})
const saveData = reactive({
type: '1',
timeType: '1',
num: '',
})
let goods = ref(null)
let selectGoodsOpen = () => {
goods.value.open();
}
/**
* 保存
*/
let save = () => {
console.log(saveData.type)
console.log(saveData.timeType)
}
</script>
<style lang="scss">
.content {
background: #F9F9F9;
padding: 32rpx 28rpx 150rpx 28rpx;
.card{
padding: 32rpx 24rpx;
background-color: #fff;
margin-bottom: 32rpx;
.item{
padding-bottom: 24rpx;
border-bottom: 2rpx solid #E5E5E5;
margin-bottom: 24rpx;
.lable{
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
display: flex;
align-items: center;
}
.value{
display: flex;
justify-content: flex-start;
align-items: center;
input{
width: 150rpx;
text-align: center;
}
.selectGoods{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 16rpx;
background: #F9F9F9;
border-radius: 12rpx 12rpx 12rpx 12rpx;
.title{
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-bottom: 16rpx;
}
.goodsName{
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
}
}
}
.item:last-child{
border-bottom: none;
margin-bottom: 0;
}
}
.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>

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;

View File

@@ -1261,7 +1261,13 @@
"pageId": "PAGES_COUPON_DISCOUNTCOUPONS",
"path": "discountCoupons",
"style": {
"navigationBarTitleText": "添加折扣券"
"navigationBarTitleText": "优惠券"
}
}, {
"pageId": "PAGES_COUPON_CERTIFICATE",
"path": "editCertificate",
"style": {
"navigationBarTitleText": "商品兑换券"
}
}]
},
@@ -1451,6 +1457,7 @@
}
]
}
],
"globalStyle": {
"navigationBarTextStyle": "black",

View File

@@ -139,6 +139,11 @@
icon: '/static/indexImg/icon-cashier.svg',
pageUrl: 'PAGES_SHOP_SETUP',
},
{
title: '优惠券',
icon: '/static/coupon/icon_coupon.svg',
pageUrl: 'PAGES_COUPON_INDEX',
},
// // // {
// // // title: '进销存',
// // // icon: '/static/indexImg/icon-invoicing.svg',

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#80bcff;}.b{clip-path:url(#a);}.c{clip-path:url(#b);}.d{fill:#197dff;}.e{fill:#4c99fe;}</style><clipPath id="a"><rect class="a" width="32" height="32" transform="translate(41 962)"/></clipPath><clipPath id="b"><rect class="a" width="32" height="32" transform="translate(338 862)"/></clipPath></defs><g class="b" transform="translate(-41 -962)"><g class="c" transform="translate(-297 100)"><path class="d" d="M27.706,22.243h0V19.407a1.449,1.449,0,0,0-.824-1.483c-1.848-.857-2.472-1.605-2.472-2.965s.577-2.054,2.472-2.966l.038-.023c.341.822,1.073,1.335,2.613,1.832a1.449,1.449,0,0,1,1,1.371l.542,4.415A2.362,2.362,0,0,1,28.89,22.1l-1.183.145Zm0-13.526V6.061a2.36,2.36,0,0,0-2.472-2.224H.521A2.756,2.756,0,0,0,0,3.886a2.6,2.6,0,0,1,1.649-.854L26.18.021A2.775,2.775,0,0,1,26.518,0,2.323,2.323,0,0,1,28.9,1.927l.542,4.416a1.374,1.374,0,0,1-.636,1.572,9.66,9.66,0,0,0-1.1.8Z" transform="translate(338.913 865.612)"/><path class="e" d="M93.989,182.151a1.367,1.367,0,0,0,.824-1.483V176.22A2.358,2.358,0,0,0,92.341,174H67.627a2.357,2.357,0,0,0-2.471,2.224v4.448a1.326,1.326,0,0,0,.824,1.483c1.125.472,2.471,1.425,2.471,2.966a2.936,2.936,0,0,1-2.422,2.962,1.668,1.668,0,0,0-.872,1.486v4.448a2.358,2.358,0,0,0,2.471,2.225H92.341a2.358,2.358,0,0,0,2.471-2.225v-4.448a1.45,1.45,0,0,0-.824-1.483c-1.8-.835-2.471-1.578-2.471-2.965s.629-2.079,2.471-2.966Zm-9.062,2.6a.393.393,0,0,1-.412.371H80.808V186.6h3.707a.393.393,0,0,1,.412.371v.741a.393.393,0,0,1-.412.371H80.808v2.6a.393.393,0,0,1-.412.371h-.824a.393.393,0,0,1-.412-.371v-2.6H75.453a.393.393,0,0,1-.412-.371v-.741a.393.393,0,0,1,.412-.371H79.16v-1.483H75.453a.393.393,0,0,1-.412-.371V184a.393.393,0,0,1,.412-.371h3.119l-3.386-3.274a.361.361,0,0,1,0-.516l.524-.516a.375.375,0,0,1,.524,0l3.745,3.622,3.744-3.62a.378.378,0,0,1,.528,0l.528.52a.364.364,0,0,1,0,.52L81.4,183.634h3.11a.393.393,0,0,1,.412.371v.742Zm0,0" transform="translate(273.002 694.855)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

1
static/coupon/qrcode.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24.1" height="24.1" viewBox="0 0 24.1 24.1"><defs><style>.a{fill:#333;}</style></defs><path class="a" d="M179.826,184.148v-2.183h-2.231v2.185Zm3.33,0a1,1,0,0,0,.993-.993v-1.192h-2.139v2.183m-13.222-21.914v6.555h-6.555v-6.555h6.555m1.192-2.185h-8.938a1,1,0,0,0-.993.993v8.938a1,1,0,0,0,.993.993h8.938a1,1,0,0,0,.993-.993v-8.938a1,1,0,0,0-.993-.993Zm-4.469,5.462-1.092,0a1.092,1.092,0,1,0,1.092-1.092A1.092,1.092,0,0,0,164.419,165.512Zm17.545-3.277v6.555H175.41v-6.555h6.555m1.192-2.185h-8.938a1,1,0,0,0-.993.993v8.938a1,1,0,0,0,.993.993h8.938a1,1,0,0,0,.993-.993v-8.938a1,1,0,0,0-.993-.993Zm-4.469,5.462-1.092,0a1.092,1.092,0,1,0,1.092-1.092A1.092,1.092,0,0,0,177.595,165.512Zm-8.806,9.9v6.555h-6.555V175.41h6.555m1.192-2.185h-8.938a1,1,0,0,0-.993.993v8.938a1,1,0,0,0,.993.993h8.938a1,1,0,0,0,.993-.993v-8.938a1,1,0,0,0-.993-.993Zm-4.469,5.462-1.092,0a1.092,1.092,0,1,0,1.092-1.092A1.092,1.092,0,0,0,164.419,178.688Zm18.737-5.462h-1.218v4.37h-2.185v-4.37h-5.535a1,1,0,0,0-.993.993v8.938a1,1,0,0,0,.993.993h1.192V177.6h2.185v2.185h6.555v-5.562A1,1,0,0,0,183.156,173.225Z" transform="translate(-160.049 -160.05)"/></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB