TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

['设置中心']

Browse Source
This commit is contained in:
张冬雪
2021-09-24 15:11:14 +08:00
parent 08c56ea921
commit 3dc185139c
172 changed files with 13194 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
pages/coupons/add.vue Normal file
View File

@@ -0,0 +1,413 @@
<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" data-type="typeIndex" @change="changePicker">
<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="#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>
<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>
<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">发布优惠券</button>
</view>
</view>
</template>
<script>
import TnDatePicker from "@/components/tn-datepicker/tn-datepicker";
import { uploads } from '@/apis/interfaces/uploading'
import { pushCoupons } from '@/apis/interfaces/coupons'
export default {
components:{
TnDatePicker
},
data() {
return {
typeIndex : 0,
types : [
{ id: 1, text: '服务券' },
{ id: 2, text: '代金券' },
{ id: 3, text: '提货券' },
],
timeIndex : 0,
times : [
{ type: 2, text: '固定时间（区间范围）' },
{ type: 1, text: '延期券（用户领取后有效天数）' }
],
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
},
// 选择
changePicker(e){
this[e.target.dataset.type] = e.detail.value
},
// 日期
confirmDatePicker(e){
this.datePickerValue = e.value
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: 'selectGoods', 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.typeIndex].type,
days : this.timeNumber,
goodsable_ids : this.coupongoods
}
pushCoupons(valuss).then(res => {
uni.showModal({
title : '提示',
content : res,
showCancel : false,
confirmText : '确定',
confirmColor: '#e93340',
success : modalRes => {
this.$store.commit('setCoupongoods', [])
this.$Router.back()
}
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
.add-btn{
padding: $padding;
button{
height: 90rpx;
line-height: 90rpx;
background: $text-price;
color: white;
font-size: $title-size;
font-weight: bold;
border-radius: 0;
&::after{
border: none;
}
}
}
// 优惠券详情
.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: 148rpx;
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% - 148rpx - #{$padding*2});
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>