452 lines
12 KiB
Vue
452 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="lable">优惠券名称</view>
|
||
<view class="value">
|
||
<up-input v-model="formData.title" placeholder="填写名称" border="none" clearable ></up-input>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">使用门槛</view>
|
||
<view class="value">
|
||
<view>满</view>
|
||
<input v-model="formData.fullAmount" @change="formData.fullAmount = $utils.isMoney(formData.fullAmount)" type="digit" placeholder="填写金额" border="none"></input>
|
||
<view>元</view>
|
||
<view v-if="formData.type == 1" style="display: flex;align-items: center;justify-content: flex-start;"> ，<view>减</view> <input v-model="formData.discountAmount" @change="formData.discountAmount = $utils.isMoney(formData.discountAmount)" type="digit" placeholder="填写金额" border="none"></input> <view>元</view> </view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="lable">有效期类型</view>
|
||
<view class="value" style="display: flex;flex-direction: column;align-items: flex-start;">
|
||
<view>
|
||
<up-radio-group placement="column" v-model="formData.validityType" @change="typeChange('validityType')">
|
||
<up-radio name="fixed" label="领券后有效期内可用"></up-radio>
|
||
<up-radio name="custom" label="固定有效期范围内可用"></up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
<view class="date" v-if="formData.validityType=='custom'">
|
||
<!-- {{formData.useStartTime +'—'+ formData.useEndTime}} -->
|
||
<view @click="typeChange('validityType')">{{ formData.validStartTime || '开始时间'}}</view>--
|
||
<view @click="typeChange('validityType')">{{ formData.validEndTime || '结束时间'}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">有效期（天）</view>
|
||
<view class="value">
|
||
<input style="width: 100%;text-align: left;padding-left: 20rpx;" v-model="formData.validDays" @input="formData.validDays = $utils.isNumber(formData.validDays)" type="number" placeholder="填写天数" border="none"></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 v-model="formData.daysToTakeEffect" @change="formData.daysToTakeEffect = $utils.isNumber(formData.daysToTakeEffect)" type="number" placeholder="填写天数" border="none" ></input><view>天生效</view>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="lable">可用日期</view>
|
||
<view class="value">
|
||
<up-checkbox-group v-model="formData.userDays" placement="row">
|
||
<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" style="display: flex;flex-direction: column;align-items: flex-start;">
|
||
<view>
|
||
<up-radio-group v-model="formData.useTimeType" placement="column">
|
||
<up-radio name="all" label="全时段可用" style="margin-right: 30rpx;"></up-radio>
|
||
<up-radio name="custom" label="指定时段可用"></up-radio>
|
||
</up-radio-group>
|
||
</view>
|
||
<view class="time" v-if="formData.useTimeType=='custom'">
|
||
<view @click="useTimeChange('useStartTime')">{{ formData.useStartTime || '开始时间'}}</view>--
|
||
<view @click="useTimeChange('useEndTime')">{{ formData.useEndTime || '结束时间'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="lable">总发放数量
|
||
</view>
|
||
<view class="value">
|
||
<input style="width: 100%;text-align: left;padding-left: 20rpx;" v-model="formData.number" @change="formData.number = $utils.isNumber(formData.number)" placeholder="填写数量" border="none" clearable ></input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card product" v-if="formData.type == 2">
|
||
|
||
<view class="item">
|
||
<view class="lable">指定抵扣商品</view>
|
||
<view class="value">
|
||
<view class="selectGoods" @tap="selectGoodsOpen">
|
||
<view>
|
||
<view class="title">选择商品</view>
|
||
<view class="goodsName" v-if='!formData.proId'>选择指定商品</view>
|
||
<view class="goodsName" v-else>
|
||
<view class="goodsItem" >
|
||
<view class="productName">{{formData.proName}}</view>
|
||
<!-- <up-input @tap.stop="stop" style="border-bottom: 1rpx solid #666;" v-model="item.num" placeholder="填写数量" border="none" ></up-input> -->
|
||
</view>
|
||
</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>
|
||
<up-datetime-picker
|
||
:show="pageData.useTimeShow"
|
||
v-model="pageData.useTime"
|
||
mode="time"
|
||
@cancel="timeCancel"
|
||
@confirm="timeConfirm"
|
||
></up-datetime-picker>
|
||
<my-date-pickerview @confirm="datePickerConfirm" :mode="pageData.mode" ref="datePicker"></my-date-pickerview>
|
||
<up-modal :show="pageData.show" :title="pageData.title" @confirm="pageData.show = false" ></up-modal>
|
||
|
||
<select-goods ref="goods" @affirm="affirm"></select-goods>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { reactive, ref } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import go from '@/commons/utils/go.js'
|
||
|
||
import selectGoods from './components/select-goods';
|
||
|
||
import { addCoupon, updateCoupon } from '@/http/api/coupon.js'
|
||
const pageData = reactive({
|
||
value: [
|
||
{ name: "周一", },
|
||
{ name: "周二", },
|
||
{ name: "周三", },
|
||
{ name: "周四", },
|
||
{ name: "周五", },
|
||
{ name: "周六", },
|
||
{ name: "周日", },
|
||
],
|
||
mode: "",
|
||
title: "",
|
||
show: false,
|
||
useTimeShow: false,
|
||
useTime: "",
|
||
dateType: "",
|
||
sueDateType: "",
|
||
})
|
||
const formData = reactive({
|
||
type: '1',
|
||
title: '',
|
||
fullAmount: null,
|
||
discountAmount: null,
|
||
validityType: 'fixed',
|
||
validStartTime: '',
|
||
validEndTime: '',
|
||
userDays: [],
|
||
useTimeType: 'all',
|
||
useStartTime: '',
|
||
useEndTime: '',
|
||
validDays: '',
|
||
daysToTakeEffect: null,
|
||
number: null,
|
||
|
||
proId: null,
|
||
proName: null,
|
||
})
|
||
|
||
let datePicker = ref(null)
|
||
let refTime = ref(null)
|
||
let goods = ref(null)
|
||
|
||
|
||
onLoad((options) => {
|
||
if ( options.isType ) {
|
||
formData.type = options.isType;
|
||
}
|
||
if ( options.type == 'info' ) {
|
||
let itemData = JSON.parse(options.item);
|
||
for (let item in itemData) {
|
||
formData[item] = itemData[item]
|
||
}
|
||
formData.userDays = formData.userDays.split(",");
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 选择商品
|
||
*/
|
||
let selectGoodsOpen = () => {
|
||
goods.value.open();
|
||
}
|
||
|
||
let affirm = (item) => {
|
||
formData.proId = item.id
|
||
formData.proName = item.name
|
||
}
|
||
|
||
/**
|
||
* 查看生效时间/发放数量提示
|
||
*/
|
||
let modalShow = ( type ) => {
|
||
if ( type == 1) {
|
||
pageData.title = "领取后0天后的0点0分生效";
|
||
} else {
|
||
pageData.title = "限用户自行领取，（当库存为 0时，集草等活动仍会赠送）";
|
||
}
|
||
pageData.show = true;
|
||
}
|
||
|
||
let typeChange = ( type ) =>{
|
||
pageData.dateType = type;
|
||
pageData.mode = 'date'
|
||
if ( formData.validityType == "custom") {
|
||
datePicker.value.open()
|
||
}
|
||
|
||
}
|
||
/**
|
||
* 指定时间段选择
|
||
*/
|
||
let useTimeChange = ( type ) => {
|
||
console.log(type)
|
||
pageData.sueDateType = type;
|
||
pageData.mode = 'time';
|
||
pageData.useTimeShow = true;
|
||
|
||
}
|
||
|
||
/**
|
||
* 关闭时间段弹窗
|
||
*/
|
||
let timeCancel = () => {
|
||
pageData.useTimeShow = false;
|
||
}
|
||
|
||
/**
|
||
* 确认时间端选择
|
||
*/
|
||
let timeConfirm = () => {
|
||
pageData.useTimeShow = false;
|
||
if ( pageData.sueDateType == 'useStartTime') { formData.useStartTime = pageData.useTime}
|
||
if ( pageData.sueDateType == 'useEndTime') { formData.useEndTime = pageData.useTime}
|
||
}
|
||
|
||
/**
|
||
* 有效期选择
|
||
*/
|
||
let datePickerConfirm = (data) => {
|
||
if ( pageData.dateType == 'validityType') {
|
||
formData.validStartTime = data.start;
|
||
formData.validEndTime = data.end;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
let save = () => {
|
||
if( !formData.title ){
|
||
uni.$utils.showToast("请输入优惠券名称")
|
||
return false;
|
||
}
|
||
if( !formData.fullAmount || (formData.type == 1&&!formData.discountAmount) ){
|
||
uni.$utils.showToast("请输入使用门槛")
|
||
return false;
|
||
}
|
||
if( !formData.daysToTakeEffect ){
|
||
uni.$utils.showToast("请输入生效天数")
|
||
return false;
|
||
}
|
||
if( !formData.number ){
|
||
uni.$utils.showToast("请输入发放数量")
|
||
return false;
|
||
}
|
||
let userDays = formData.userDays.toString();
|
||
let params = {
|
||
...formData,
|
||
userDays
|
||
}
|
||
if(formData.id){
|
||
updateCoupon(params).then((res) => {
|
||
uni.$utils.showToast("操作成功",1000)
|
||
setTimeout(()=>{
|
||
go.back(1)
|
||
},1000)
|
||
})
|
||
} else{
|
||
addCoupon(params).then((res) => {
|
||
uni.$utils.showToast("操作成功",1000)
|
||
setTimeout(()=>{
|
||
go.back(1)
|
||
},1000)
|
||
})
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
</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;
|
||
}
|
||
.date,.time{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
view{
|
||
border: 1rpx solid #999;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 10rpx
|
||
}
|
||
view:nth-child(1){
|
||
margin-right: 10rpx;
|
||
}
|
||
view:nth-child(2){
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.time{
|
||
view{
|
||
padding: 10rpx 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item:last-child{
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.card.product{
|
||
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;
|
||
}
|
||
.goodsItem{
|
||
display: flex;
|
||
align-items: center;
|
||
.productName{
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item:last-child{
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.bottomPop{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 150rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
z-index: 9;
|
||
>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> |