Просмотр исходного кода

1.添加满减界面模块 2.页面对齐调整

shizhongqi 3 месяцев назад
Родитель
Сommit
f06783caa1
2 измененных файлов с 122 добавлено и 50 удалено
  1. 28 28
      ghsApp/src/admin/shop/add.vue
  2. 94 22
      hdApp/src/admin/shop/add.vue

+ 28 - 28
ghsApp/src/admin/shop/add.vue

@@ -138,35 +138,35 @@
 				</tui-list-cell>
 
 				<view style="border:1upx solid #CCCCCC;margin:0 8upx 0 8upx;">
-				<view style="background-color: white;font-size:28upx;padding-left:26upx;color:#3385FF;padding-top:10upx;">客户自己下单,并且下面二个要同时满足,才有优惠</view>
-				<tui-list-cell class="line-cell" :hover="false">
-					<view class="tui-title " style="color:#3385FF;">整单满扎数</view>
-					<input v-model="form.meetNum" style="color:#3385FF;" @focus="form.meetNum=''" placeholder-class="phcolor" class="tui-input" name="meetNum" placeholder="填写数量" type="digit" />
-				</tui-list-cell>
-				<tui-list-cell class="line-cell" :hover="false">
-					<view class="tui-title " style="color:#3385FF;">整单满金额</view>
-					<input v-model="form.meetAmount" style="color:#3385FF;" @focus="form.meetAmount=''" placeholder-class="phcolor" class="tui-input" name="meetAmount" placeholder="填写金额" type="digit" />
-				</tui-list-cell>
-				<tui-list-cell class="line-cell" :hover="false">
-					<view class="tui-title" style="color:#3385FF;">优惠方式</view>
-					<radio-group class="tui-input" @change="cutStyleChange" style="color:#3385FF;">
-						<label class="list" for="amountLink">
-							<radio id="amountLink" value="0" :checked="form.cutStyle == 0" style="transform:scale(0.7,0.7)" />
-							<span class="checkbox-text">按金额</span>
-						</label>
-						<label class="list" for="discountLink">
-							<radio id="discountLink" value="1" :checked="form.cutStyle == 1" style="transform:scale(0.7,0.7)" />
-							<span class="checkbox-text">按折扣</span>
-						</label>
-						<input v-model="form.cutStyle" name="cutStyle" hidden />
-					</radio-group>
-				</tui-list-cell>
+					<view style="background-color: white;font-size:28upx;padding-left:26upx;color:#3385FF;padding-top:10upx;">客户自己下单,并且下面二个要同时满足,才有优惠</view>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">整单满扎数</view>
+						<input v-model="form.meetNum" style="color:#3385FF;" @focus="form.meetNum=''" placeholder-class="phcolor" class="tui-input" name="meetNum" placeholder="填写数量" type="digit" />
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">整单满金额</view>
+						<input v-model="form.meetAmount" style="color:#3385FF;" @focus="form.meetAmount=''" placeholder-class="phcolor" class="tui-input" name="meetAmount" placeholder="填写金额" type="digit" />
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title" style="color:#3385FF;">优惠方式</view>
+						<radio-group class="tui-input" @change="cutStyleChange" style="color:#3385FF;">
+							<label class="list" for="amountLink">
+								<radio id="amountLink" value="0" :checked="form.cutStyle == 0" style="transform:scale(0.7,0.7)" />
+								<span class="checkbox-text">按金额</span>
+							</label>
+							<label class="list" for="discountLink">
+								<radio id="discountLink" value="1" :checked="form.cutStyle == 1" style="transform:scale(0.7,0.7)" />
+								<span class="checkbox-text">按折扣</span>
+							</label>
+							<input v-model="form.cutStyle" name="cutStyle" hidden />
+						</radio-group>
+					</tui-list-cell>
 
-				<tui-list-cell class="line-cell" :hover="false">
-					<view class="tui-title " style="color:#3385FF;">优惠{{ form.cutStyle == 0?'金额':'折扣' }}</view>
-					<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-if="form.cutStyle == 0" placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写金额" type="digit" />
-					<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-else placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写折扣,95折填0.95" type="digit" />
-				</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">优惠{{ form.cutStyle == 0?'金额':'折扣' }}</view>
+						<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-if="form.cutStyle == 0" placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写金额" type="digit" />
+						<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-else placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写折扣,95折填0.95" type="digit" />
+					</tui-list-cell>
 				</view>
 
 				<tui-list-cell class="line-cell" :hover="false">

+ 94 - 22
hdApp/src/admin/shop/add.vue

@@ -93,22 +93,54 @@
 					<input v-model="form.floor" placeholder-class="phcolor" class="tui-input" name="floor" placeholder="楼号门牌号" />
 				</tui-list-cell>
 
-			<tui-list-cell class="line-cell remark-wrap" :hover="false">
-				<view class="tui-title">简介</view>
-				<view class="tui-input">
-					<textarea v-model="form.introduction" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入简介" />
-				</view>
-			</tui-list-cell>
+				<tui-list-cell class="line-cell remark-wrap" :hover="false">
+					<view class="tui-title">简介</view>
+					<view class="tui-input">
+						<textarea v-model="form.introduction" class="tui-textarea remark" placeholder-class="phcolor" placeholder="请输入简介" />
+					</view>
+				</tui-list-cell>
+
+				<tui-list-cell class="line-cell" :hover="false">
+					<view class="tui-title">充值赠送</view>
+					<view class="recharge-buttons">
+						<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 0}" @click="updateRechargeWeal(0)">没有</button>
+						<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 1}" @click="updateRechargeWeal(1)">送钱</button>
+						<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 2}" @click="updateRechargeWeal(2)">送红包</button>
+					</view>
+				</tui-list-cell>
 
-			<tui-list-cell class="line-cell" :hover="false">
-				<view class="tui-title">充值赠送</view>
-				<view class="recharge-buttons">
-					<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 0}" @click="updateRechargeWeal(0)">没有</button>
-					<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 1}" @click="updateRechargeWeal(1)">送钱</button>
-					<button class="admin-button-com big" :class="{blue: form.rechargeWeal == 2}" @click="updateRechargeWeal(2)">送红包</button>
+				<view style="border:1upx solid #CCCCCC;margin:0 8upx 0 8upx;">
+					<view style="background-color: white;font-size:28upx;padding-left:26upx;color:#3385FF;padding-top:10upx;">客户自己下单,并且下面二个要同时满足,才有优惠</view>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">整单满扎数</view>
+						<input v-model="form.meetNum" style="color:#3385FF;" @focus="form.meetNum=''" placeholder-class="phcolor" class="tui-input" name="meetNum" placeholder="填写数量" type="digit" />
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">整单满金额</view>
+						<input v-model="form.meetAmount" style="color:#3385FF;" @focus="form.meetAmount=''" placeholder-class="phcolor" class="tui-input" name="meetAmount" placeholder="填写金额" type="digit" />
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title" style="color:#3385FF;">优惠方式</view>
+						<radio-group class="tui-input" @change="cutStyleChange" style="color:#3385FF;">
+							<label class="list" for="amountLink">
+								<radio id="amountLink" value="0" :checked="form.cutStyle == 0" style="transform:scale(0.7,0.7)" />
+								<span class="checkbox-text">按金额</span>
+							</label>
+							<label class="list" for="discountLink">
+								<radio id="discountLink" value="1" :checked="form.cutStyle == 1" style="transform:scale(0.7,0.7)" />
+								<span class="checkbox-text">按折扣</span>
+							</label>
+							<input v-model="form.cutStyle" name="cutStyle" hidden />
+						</radio-group>
+					</tui-list-cell>
+
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title " style="color:#3385FF;">优惠{{ form.cutStyle == 0?'金额':'折扣' }}</view>
+						<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-if="form.cutStyle == 0" placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写金额" type="digit" />
+						<input v-model="form.cutAmount" style="color:#3385FF;" @focus="form.cutAmount=''" v-else placeholder-class="phcolor" class="tui-input" name="cutAmount" placeholder="请填写折扣,95折填0.95" type="digit" />
+					</tui-list-cell>
 				</view>
-			</tui-list-cell>
-		</view>
+			</view>
 
 			<view class="module-com input-line-wrap goods-wrap">
 				<view class="module-tit">
@@ -139,8 +171,7 @@ import TuiListCell from '@/components/plugin/list-cell'
 import SimpleAddress from '@/components/plugin/simple-address'
 import AppAreaSel from '@/components/app-area-sel'
 const form = require('@/utils/formValidation.js')
-import {getDetail} from "@/api/shop"
-import { updateShop as update, addShop as add } from '@/api/shop'
+import { getDetail, updateShop as update, addShop as add } from '@/api/shop'
 //已改造,不能再升级 shish 20211228
 import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
 
@@ -179,7 +210,12 @@ export default {
 				default:0,
 				superWx:[],
 				rechargeWeal: 0,
-				openLocation:0 // 是否开启定位 0不开启 1开启
+				openLocation:0, // 是否开启定位 0不开启 1开启
+				// 满减优惠
+				meetNum:0,
+				meetAmount:0,
+				cutAmount:0,
+				cutStyle:0,
 			},
 			hasMap:0, // 是否具备地址功能 0不具备 1具备
 			showRegion: false,
@@ -189,7 +225,8 @@ export default {
 			},
 			cityPickerValueDefault: [0, 0],
       		headers:{token:''},
-			currentImgData:[]
+			currentImgData:[],
+			cutAmountCache: { amount: '', discount: '' } // 优惠值缓存
 		}
 	},
 	onLoad() {
@@ -268,6 +305,12 @@ export default {
 				this.hasMap = data.hasMap || 0
 				this.merchantName = data.merchantName||''
 				this.form.rechargeWeal = data.rechargeWeal || 0
+				// 初始化优惠值缓存,便于切换优惠方式后再切回时恢复
+				if (this.form.cutStyle == 0) {
+					this.cutAmountCache.amount = this.form.cutAmount
+				} else {
+					this.cutAmountCache.discount = this.form.cutAmount
+				}
 			})
 			}
 		},
@@ -282,6 +325,20 @@ export default {
 		joinChange(e){
 			this.form.join = e.detail.value
 		},
+		cutStyleChange(e){
+			const newStyle = Number(e.detail.value)
+			if (newStyle === this.form.cutStyle) return
+			// 先缓存当前输入框的值到对应方式的缓存位
+			if (this.form.cutStyle == 0) {
+				this.cutAmountCache.amount = this.form.cutAmount
+			} else {
+				this.cutAmountCache.discount = this.form.cutAmount
+			}
+			this.form.cutStyle = newStyle
+			// 切换到新方式时,若有缓存则恢复,否则置空
+			const cached = newStyle == 0 ? this.cutAmountCache.amount : this.cutAmountCache.discount
+			this.form.cutAmount = cached !== undefined && cached !== '' ? cached : ''
+		},
 		endTimeChange: function(e) {
 			this.end_time = e.detail.value
 			this.form.openEndTime = e.detail.value
@@ -335,6 +392,10 @@ export default {
 				superWx = this.form.superWx[0]
 			}
 			this.form.openLocation = this.option.openLocation ? 1 : 0
+			this.form.meetNum = Number(this.form.meetNum) || 0
+			this.form.meetAmount = Number(this.form.meetAmount) || 0
+			this.form.cutAmount = Number(this.form.cutAmount) || 0
+			this.form.cutStyle = Number(this.form.cutStyle) || 0
 			this.form = {...this.form,...this.region,superWx:superWx}
 			uni.showLoading({mask:true})
 			hostFn(this.form).then(res => {
@@ -380,12 +441,23 @@ export default {
 			// 进行表单检查
 			let formData = e.detail.value
 			let checkRes = form.validation(formData, rules)
-			// 验证通过!
-			if (!checkRes) {
-				this.confirmFn()
-			} else {
+			if (checkRes) {
 				this.$msg(checkRes)
+				return
+			}
+			// 满减优惠额外校验
+			const meetNum = Number(this.form.meetNum) || 0
+			const meetAmount = Number(this.form.meetAmount) || 0
+			const cutAmount = Number(this.form.cutAmount) || 0
+			if (meetNum < 0 || meetAmount < 0 || cutAmount < 0) {
+				this.$msg('满减优惠数值不能为负数')
+				return
+			}
+			if (this.form.cutStyle == 1 && cutAmount > 0 && (cutAmount <= 0 || cutAmount >= 1)) {
+				this.$msg('折扣请填写 0 到 1 之间的数字,如 95 折填 0.95')
+				return
 			}
+			this.confirmFn()
 		}
 	}
 }