TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

员工管理添加员工列表优惠券完善

Browse Source
This commit is contained in:
唐明明
2021-09-14 17:22:04 +08:00
parent f5e99ca292
commit 291ce57704
22 changed files with 7141 additions and 3586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
pages/coupons/add.vue
View File

@@ -1,14 +1,24 @@
<template>
<view>
<view class="coupons-preview">
<view class="item cover" @click="updCover">
<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 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>
<view class="time nowrap">{{datePickerValue.length == 0 ? '优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
<view class="goods nowrap">全店通用</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">
@@ -19,18 +29,21 @@
</picker>
</view>
<view class="inputs">
<label class="input-label">券名称</label>
<input type="text" v-model="couponsTitle" placeholder="输入优惠券名称" />
<label class="input-label">券标题</label>
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
</view>
<view class="inputs">
<label class="input-label">发券数量</label>
<input type="number" v-model="quantity" placeholder="输入优惠券发放量" />
<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>
<input type="number" v-model="personQuantity" placeholder="输入每人限领数, 0为不限制" />
<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>
@@ -40,46 +53,55 @@
<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="#e93340" value="1" checked/>
<text>线上优惠</text>
</label>
<label class="input-checkbox-item">
<radio color="#e93340" value="2"/>
<text>线下活动</text>
</label>
</radio-group>
</view>
</view>
</block>
<view class="inputs">
<label class="input-label">使用渠道</label>
<view class="input-checkbox">
<radio-group @change="radioChange">
<label class="input-checkbox-item">
<radio color="#c82626" value="1" checked/>
<text>线上</text>
</label>
<label class="input-checkbox-item">
<radio color="#c82626" value="2"/>
<text>线下</text>
</label>
</radio-group>
<label class="input-label">时间类型</label>
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
<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>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :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 class="inputs">
<label class="input-label">券有效期</label>
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#c82626" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
</view>
<view class="inputs">
<label class="input-label">设为推荐</label>
<picker :range="recommend" range-key="text" :value="recommendIndex" data-type="recommendIndex" @change="changePicker">
<view class="input-text">{{recommend[recommendIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
<view class="inputs">
<label class="input-label">产品限制</label>
<picker :range="product" range-key="text" :value="productIndex" data-type="productIndex" @change="changePicker">
<view class="input-text">{{product[productIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
</view>
<view class="add-textarea">
<label>使用规则</label>
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
</view>
<view class="add-btn ios-bottom">
<button type="default" @click="updComponent">{{product[productIndex].type === 'all' ? '发布优惠券': '选择关联商品'}}</button>
<button type="default" @click="updComponent">发布优惠券</button>
</view>
</view>
</template>
@@ -100,29 +122,41 @@
{ id: 2, text: '代金券' },
{ id: 3, text: '提货券' },
],
recommendIndex : 0,
recommend : [
{ type: '0', text: '不推荐' },
{ type: '1', text: '推荐' }
timeIndex : 0,
times : [
{ type: 2, text: '固定时间（区间范围）' },
{ type: 1, text: '延期券（用户领取后有效天数）' }
],
productIndex : 0,
product : [
{ type: 'all', text: '全部商品通用' },
{ type: 'part', text: '部分商品可用' }
],
showDatePicker : false,
datePickerValue : [],
cover : '',
useWay : 1,
couponsTitle : '',
quantity : '',
personQuantity : '',
full : '',
price : '',
description : ''
showDatePicker : false, // 活动弹出层时间
datePickerValue : [], // 活动时间
cover : '', // 优惠券图标
useWay : 1, // 使用途径
couponsTitle : '', // 优惠券标题
quantity : 1, // 发券数量
personQuantity : 1, // 每人限领
full : '', // 满足金额
price : '', // 减少金额
description : '', // 使用规则
coupongoods : [], // 关联商品
timeNumber : 1 // 延期券时间
};
},
onShow(){
this.coupongoods = this.$store.getters.getCoupongoods
},
methods:{
// 发券数量
quantityChange(value){
this.quantity = value
},
// 每人限领
personQuantityChange(value){
this.personQuantity = value
},
// 延期券时间
timeNumberChange(value){
this.timeNumber = value
},
// 使用渠道
radioChange(e){
this.useWay = e.detail.value
@@ -154,9 +188,12 @@
}
})
},
// 选择关联商品
onSelectGoods(){
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
},
// 发布优惠券
updComponent(){
let recommendVlue = this.recommend[this.recommendIndex].type === 1 ? 2 : ''
let valuss = {
title : this.couponsTitle,
cover : this.cover,
@@ -168,24 +205,21 @@
person_quantity : this.personQuantity,
start_at : this.datePickerValue[0],
end_at : this.datePickerValue[1],
channel : this.product[this.productIndex].type,
description : this.description,
position : [1, recommendVlue]
time_type : this.times[this.typeIndex].type,
days : this.timeNumber,
goodsable_ids : this.coupongoods
}
pushCoupons(valuss).then(res => {
uni.showModal({
title : '提示',
content : res.message,
confirmText : res.linkGoods ? '关联商品' : '确定',
confirmColor: '#c82626',
cancelText : '稍后',
cancelColor : '#555555',
showCancel : res.linkGoods,
content : res,
showCancel : false,
confirmText : '确定',
confirmColor: '#e93340',
success : modalRes => {
if(modalRes.confirm && res.linkGoods){
this.$Router.replace({name: 'selectGoods', params:{couponId: res.coupon_id}})
return
}
this.$store.commit('setCoupongoods', [])
this.$Router.back()
}
})
@@ -274,6 +308,11 @@
right: 0;
}
}
.input-number{
display: flex;
align-items: center;
height: 90rpx;
}
.input-checkbox{
min-height: 90rpx;
display: flex;
@@ -292,6 +331,7 @@
}
}
}
.inputs{}
}
}
// 发布预览
@@ -321,6 +361,23 @@
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;