180 lines
4.6 KiB
Vue
180 lines
4.6 KiB
Vue
<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><input placeholder="填写金额" border="none"></input><view>元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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="item">
|
||
<view class="lable">有效期（天）</view>
|
||
<view class="value">
|
||
<up-input placeholder="填写天数" border="none"></up-input>
|
||
</view>
|
||
</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="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="bottomPop">
|
||
<button @click="save">保存</button>
|
||
</view>
|
||
|
||
<up-modal :show="pageData.show" :title="pageData.title" @confirm="pageData.show = false" ></up-modal>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref,
|
||
toRef,
|
||
watch
|
||
} from 'vue';
|
||
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">
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.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> |