280 lines
6.1 KiB
Vue
280 lines
6.1 KiB
Vue
<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>
|
||
<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>
|
||
</view>
|
||
<view class="content2">
|
||
<view class="">
|
||
可用商品
|
||
</view>
|
||
<view class="">
|
||
<span>指定商品可用</span>
|
||
<span>></span>
|
||
</view>
|
||
|
||
<view class="siwtichStyle">
|
||
<!-- <span>选择商品</span> -->
|
||
<!-- <view class=""> -->
|
||
<span>选择商品</span>
|
||
<input type="text" placeholder="选择指定商品 " />
|
||
<span>></span>
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
<view class="content2">
|
||
<view class="">
|
||
|
||
</view>
|
||
<view class="">
|
||
<span>更多设置</span>
|
||
<span>></span>
|
||
</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>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref,
|
||
toRef,
|
||
watch
|
||
} from 'vue';
|
||
let switchTop = ref(1)
|
||
</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;
|
||
|
||
.content1 {
|
||
background-color: #fff;
|
||
padding: 32rpx 24rpx;
|
||
|
||
>input {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
>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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
</style> |