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

390
pageCoupon/discountCoupons.vue
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;
}
}
}