413 lines
11 KiB
Vue
413 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<view class="coupons-preview">
|
|
<view class="item cover">
|
|
<view v-if="types[typeIndex].id == 2">
|
|
<view class="cover-price">{{price || 0}}<text>元</text></view>
|
|
<view class="cover-subtitle">代金券</view>
|
|
</view>
|
|
<view @click="updCover" v-else>
|
|
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
|
|
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
|
</view>
|
|
</view>
|
|
<view class="item mian">
|
|
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
|
|
<block v-if="timeIndex == 0">
|
|
<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="add-info">
|
|
<view class="inputs">
|
|
<label class="input-label">券类型</label>
|
|
<picker :range="types" range-key="text" :value="typeIndex" @change="changePicker($event, 'typeIndex')">
|
|
<view class="input-text">{{types[typeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
|
</picker>
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">券标题</label>
|
|
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">发券数量</label>
|
|
<view class="input-number">
|
|
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
|
|
</view>
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">每人限领</label>
|
|
<view class="input-number">
|
|
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
|
|
</view>
|
|
</view>
|
|
<block v-if="types[typeIndex].id == 2">
|
|
<view class="inputs">
|
|
<label class="input-label">满</label>
|
|
<input type="digit" v-model="full" placeholder="输入券最低消费金额" />
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">减</label>
|
|
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">使用渠道</label>
|
|
<view class="input-checkbox">
|
|
<radio-group @change="radioChange">
|
|
<label class="input-checkbox-item">
|
|
<radio color="#8b64fd" value="1" checked/>
|
|
<text>线上优惠</text>
|
|
</label>
|
|
<label class="input-checkbox-item">
|
|
<radio color="#8b64fd" value="2"/>
|
|
<text>线下活动</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view class="inputs">
|
|
<label class="input-label">时间类型</label>
|
|
<picker :range="times" range-key="text" :value="timeIndex" @change="changePicker($event, 'timeIndex')">
|
|
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
|
</picker>
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
|
|
<block v-if="timeIndex === 0">
|
|
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
|
<u-calendar
|
|
:safe-area-inset-bottom="true"
|
|
v-model="showDatePicker"
|
|
mode="range"
|
|
active-bg-color="#8b64fd"
|
|
range-bg-color="rgba(139,100,253, .2)"
|
|
range-color="#8b64fd"
|
|
btn-type="default"
|
|
max-date="2099-12-12"
|
|
:min-date="minDate"
|
|
@change="confirmDatePicker"
|
|
>
|
|
</u-calendar>
|
|
<!-- <tn-date-picker :show="showDatePicker" :monthNum="12" color="" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/> -->
|
|
</block>
|
|
<block v-if="timeIndex === 1">
|
|
<view class="input-number">
|
|
<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="inputs">
|
|
<label class="input-label">关联商品</label>
|
|
<view class="input-text" @click="onSelectGoods">
|
|
<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
|
|
<block v-else>选择关联商品</block>
|
|
<uni-icons class="picker-icon" type="arrowdown" size="14" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="add-textarea">
|
|
<label>使用规则</label>
|
|
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import date from '@/public/date'
|
|
import { uploads } from '@/apis/interfaces/uploading'
|
|
import { pushCoupons } from '@/apis/interfaces/coupons'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loding : true,
|
|
typeIndex : 0,
|
|
types : [
|
|
{ id: 1, text: '服务券' },
|
|
{ id: 2, text: '代金券' },
|
|
{ id: 3, text: '提货券' },
|
|
],
|
|
timeIndex : 0,
|
|
times : [
|
|
{ type: 1, text: '固定时间（区间范围）' },
|
|
{ type: 2, text: '延期券（用户领取后有效天数）' }
|
|
],
|
|
showDatePicker : false, // 活动弹出层时间
|
|
datePickerValue : [], // 活动时间
|
|
cover : '', // 优惠券图标
|
|
useWay : 1, // 使用途径
|
|
couponsTitle : '', // 优惠券标题
|
|
quantity : 1, // 发券数量
|
|
personQuantity : 1, // 每人限领
|
|
full : '', // 满足金额
|
|
price : '', // 减少金额
|
|
description : '', // 使用规则
|
|
coupongoods : [], // 关联商品
|
|
timeNumber : 1 ,// 延期券时间
|
|
minDate : ''
|
|
};
|
|
},
|
|
onShow(){
|
|
new date().then(res => {
|
|
this.minDate = res
|
|
})
|
|
this.coupongoods = this.$store.getters.getCoupongoods
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.updComponent()
|
|
},
|
|
methods:{
|
|
// 发券数量
|
|
quantityChange(value){
|
|
this.quantity = value
|
|
},
|
|
// 每人限领
|
|
personQuantityChange(value){
|
|
this.personQuantity = value
|
|
},
|
|
// 延期券时间
|
|
timeNumberChange(value){
|
|
this.timeNumber = value
|
|
},
|
|
// 使用渠道
|
|
radioChange(e){
|
|
this.useWay = e.detail.value
|
|
},
|
|
// 选择
|
|
changePicker(e, key){
|
|
this[key] = e.detail.value
|
|
},
|
|
// 日期
|
|
confirmDatePicker(e){
|
|
this.datePickerValue = [e.startDate , e.endDate]
|
|
this.showDatePicker = false
|
|
},
|
|
// 上传优惠券封面
|
|
updCover(){
|
|
uni.chooseImage({
|
|
crop: {width: 300, height: 300},
|
|
success: path=> {
|
|
uploads([{
|
|
uri : path.tempFilePaths[0]
|
|
}]).then(res => {
|
|
this.cover = res.url[0]
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择关联商品
|
|
onSelectGoods(){
|
|
this.$Router.push({name: 'couponsSelectGoods', params: {type: this.types[this.typeIndex].id}})
|
|
},
|
|
// 发布优惠券
|
|
updComponent(){
|
|
let valuss = {
|
|
title : this.couponsTitle,
|
|
cover : this.cover,
|
|
type : this.types[this.typeIndex].id,
|
|
full : this.full || 0,
|
|
price : this.price || 0,
|
|
quantity : this.quantity,
|
|
use_way : this.useWay,
|
|
person_quantity : this.personQuantity,
|
|
start_at : this.datePickerValue[0],
|
|
end_at : this.datePickerValue[1],
|
|
description : this.description,
|
|
time_type : this.times[this.timeIndex].type,
|
|
days : this.timeNumber,
|
|
goodsable_ids : this.coupongoods
|
|
}
|
|
pushCoupons(valuss).then(res => {
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : res,
|
|
showCancel : false,
|
|
confirmText : '确定',
|
|
confirmColor: '#8b64fd',
|
|
success : modalRes => {
|
|
this.$store.commit('setCoupongoods', [])
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 优惠券详情
|
|
.add-textarea{
|
|
background: white;
|
|
margin-top: $margin;
|
|
padding: $padding $padding $padding ($padding + 180rpx);
|
|
label{
|
|
position: absolute;
|
|
left: $padding;
|
|
line-height: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
textarea{
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 40rpx;
|
|
height: 200rpx;
|
|
}
|
|
}
|
|
// 优惠券配置
|
|
.add-info{
|
|
background-color: white;
|
|
padding: 0 $padding;
|
|
.inputs{
|
|
position: relative;
|
|
padding-left: 180rpx;
|
|
&::after{
|
|
position: absolute;
|
|
height: 1rpx;
|
|
content: " ";
|
|
background: $border-color;
|
|
left: 0;
|
|
right: -$padding;
|
|
bottom: 0;
|
|
}
|
|
&:last-child::after{
|
|
display: none;
|
|
}
|
|
.input-label{
|
|
position: absolute;
|
|
left: 0;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
}
|
|
.input-text,
|
|
input{
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: $title-size-lg;
|
|
}
|
|
.input-text{
|
|
position: relative;
|
|
padding-right: 90rpx;
|
|
.picker-icon{
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
.input-number{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
}
|
|
.input-checkbox{
|
|
min-height: 90rpx;
|
|
display: flex;
|
|
.input-checkbox-item{
|
|
line-height: 90rpx;
|
|
margin-right: $margin;
|
|
radio{
|
|
transform:scale(0.8);
|
|
margin-right: -15rpx;
|
|
}
|
|
text{
|
|
padding: 0 ($padding/2);
|
|
line-height: 50rpx;
|
|
display: inline-block;
|
|
font-size: $title-size-lg;
|
|
}
|
|
}
|
|
}
|
|
.inputs{}
|
|
}
|
|
}
|
|
// 发布预览
|
|
.coupons-preview{
|
|
background: white;
|
|
margin: $margin;
|
|
border-radius: $radius/2;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: $padding 0;
|
|
.item{
|
|
position: relative;
|
|
padding: 0 $padding;
|
|
}
|
|
.cover{
|
|
position: relative;
|
|
border-right: dashed 3rpx $border-color;
|
|
width: 218rpx;
|
|
text-align: center;
|
|
.cover-img{
|
|
width: 148rpx;
|
|
height: 148rpx;
|
|
border-radius: $radius/2;
|
|
vertical-align: top;
|
|
background: $border-color-lg;
|
|
border:solid 1rpx $border-color;
|
|
box-sizing: border-box;
|
|
}
|
|
.cover-price{
|
|
padding-top: 24rpx;
|
|
font-weight: bold;
|
|
line-height: 58rpx;
|
|
font-size: $title-size + 10;
|
|
color: $text-price;
|
|
text{
|
|
font-size: 70%;
|
|
padding-left: 5rpx;
|
|
}
|
|
}
|
|
.cover-subtitle{
|
|
padding-bottom: 24rpx;
|
|
line-height: 40rpx;
|
|
color: $text-gray;
|
|
font-size: $title-size-sm;
|
|
}
|
|
&::after,&::before{
|
|
position: absolute;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: #f8f8f8;
|
|
content: " ";
|
|
right: -16rpx;
|
|
border-radius: 50%;
|
|
}
|
|
&::after{
|
|
top: -($padding + 15);
|
|
}
|
|
&::before{
|
|
bottom: -($padding + 15);
|
|
}
|
|
}
|
|
.mian{
|
|
justify-content: center;
|
|
width: calc(100% - 218rpx);
|
|
box-sizing: border-box;
|
|
@extend .vertical;
|
|
.title{
|
|
font-size: $title-size-lg;
|
|
line-height: 50rpx;
|
|
}
|
|
.time, .goods{
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|