回滚 hdApp/src/admin/goods/result.vue

hdApp/src/admin/goods/result.vue

@@ -1,27 +1,308 @@
-<!--
-  花店后台新增商品成功页
-  谁用：hdApp 管理端创建花束后跳转
-  解决问题：提示添加成功，并提供返回入口
--->
 <template>
 	<view class="app-content">
 		<view class="billing_box_bg">
-			<view class="top-view"></view>
+			<view class="top-view"> </view>
 			<view class="result-view">
-				<view class="iconfont iconchenggong"></view>
-				<view class="result-title">添加成功</view>
-				<button class="admin-button-com middle blue" style="width:20vw;" @click="goBack">返回</button>
+			<view class="iconfont iconchenggong"></view>
+			<view class="result-title">添加成功</view>
+			<button class="admin-button-com middle blue" style="width:20vw;" @click="goBack">返回</button>
+			<view class="form-container">
+				<form>
+					<view class="module-com input-line-wrap">
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">名称</view>
+							<view>{{ goodsName }}</view>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">数量</view>
+							<input v-model="form.num" placeholder-class="phcolor" class="tui-input" name="num" @focus="form.num=''" placeholder="填写数量" maxlength="50" type="number" />
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false" :arrow="false" >
+							<view class="tui-title">单价</view>
+							<input type="digit" @focus="goodsPrice=''" style="width:260upx;" v-model="goodsPrice" placeholder-class="tui-placeholder" placeholder="填写金额" />
+							<text style="color:#3385FF;font-weight:bold;">合计 ¥<text>{{orderTotalPrice}}</text></text>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false" :arrow="false">
+							<view class="tui-title">收款方式</view>
+                			<button @click="form.hasPay = 4" class="admin-button-com middle" :class="form.hasPay == 4 ? 'blue' : 'default'">余额</button>
+                			<button @click="form.hasPay = 0" class="admin-button-com middle" :class="form.hasPay == 0 ? 'blue' : 'default'" style="margin-left:6upx;">扫码</button>
+							<button @tap="form.hasPay = 1" class="admin-button-com middle" :class="form.hasPay == 1 ? 'blue' : 'default'" style="margin-left:6upx;">线下</button>
+							<button @tap="form.hasPay = 2" class="admin-button-com middle" :class="form.hasPay == 2 ? 'blue' : 'default'" style="margin-left:6upx;">挂账</button>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :arrow="true" v-if="form.hasPay == 1">
+							<view class="tui-title">线下渠道</view>
+							<picker mode="selector" :value="form.payWay" :range="payWayList" range-key="name" @change="payWayChange" class="tui-input" >
+								<input v-model="form.payWay" name="payWay" type="text" hidden />
+								<view style="padding:6upx 0 6upx 0;">{{payWayList[payWayindex].name}}</view>
+							</picker>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">配送方式</view>
+							<button @tap="setSendType(0)" class="admin-button-com middle" :class="form.sendType == 0 ? 'blue' : 'default'">送货</button>
+							<button @tap="setSendType(1)" class="admin-button-com middle" :class="form.sendType == 1 ? 'blue' : 'default'" style="margin-left:6upx;">自取</button>
+							<button @click="setSendType(2)" class="admin-button-com middle" :class="form.sendType == 2 ? 'blue' : 'default'" style="margin-left:6upx;">跑腿</button>
+							<button @click="setSendType(3)" class="admin-button-com middle" :class="form.sendType == 3 ? 'blue' : 'default'" style="margin-left:6upx;">物流</button>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false" :arrow="true">
+							<view class="tui-title" v-if="form.sendType == 1">取花日期</view>
+							<view class="tui-title" v-else>配送日期</view>
+							<view class="uni-input" v-if="form.reachDate==''" @click="bindReachDateChange">
+								<view style="width:410upx;font-size:32upx;color:#CCCCCC;">今天</view>
+							</view>
+							<view class="uni-input" @click="bindReachDateChange">
+								<view style="width:410upx;font-size:32upx;">{{form.reachDate}}</view>
+							</view>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false" :arrow="true">
+							<view class="tui-title" v-if="form.sendType == 1">取花时间</view>
+							<view class="tui-title" v-else>配送时间</view>
+							<view class="uni-input" style="width:450upx;font-size:32upx;" @click="openTimePopup">{{form.reachPeriod}}</view>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">备注内容</view>
+							<input v-model="form.remark" placeholder-class="phcolor" class="tui-input" placeholder-style="color:#ccc" name="remark" placeholder="选填" />
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">客户</view>
+							<view>快捷开单</view>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false">
+							<view class="tui-title">制作</view>
+							<button @tap="form.needWork = 1" class="admin-button-com middle" :class="form.needWork == 1 ? 'blue' : 'default'">需要</button>
+							<button @tap="form.needWork = 0" class="admin-button-com middle" :class="form.needWork == 0 ? 'blue' : 'default'" style="margin-left:30upx;">不要</button>
+						</tui-list-cell>
+
+						<tui-list-cell class="line-cell" :hover="false" :arrow="false">
+							<view class="tui-title">打印小票</view>
+							<button @tap="form.needPrint = 2" class="admin-button-com middle" :class="form.needPrint == 2? 'blue' : 'default'">不打</button>
+							<button @click="form.needPrint = 1" class="admin-button-com middle" :class="form.needPrint == 1 ? 'blue' : 'default'" style="margin-left:30upx;">打印</button>
+						</tui-list-cell>
+
+				</view>
+			</form>
+			<view class="button-group">
+				<button class="admin-button-com big default" @click="goBack" style="width:200upx;">取消</button>
+				<button class="admin-button-com big blue" @click="confirmOrder" style="width:200upx;margin-left:50upx;">确认</button>
 			</view>
 		</view>
+		</view>
+	</view>
+
+	<!-- 配送时间选择弹框 -->
+	<uni-popup ref="timePopup" type="bottom" background-color="#fff">
+		<view class="time-picker-popup">
+			<view class="popup-header">
+				<text class="popup-title">选择配送时间</text>
+				<text class="popup-close" @click="closeTimePopup">×</text>
+			</view>
+			
+			<view class="time-sections">
+				<!-- 小时选择 -->
+				<view class="time-section">
+					<view class="section-title">小时</view>
+					<view class="hours-wrapper">
+						<scroll-view 
+							scroll-y="true" 
+							class="hours-scroll"
+							enhanced="true"
+							show-scrollbar="true"
+						>
+							<view class="hours-buttons">
+								<button 
+									v-for="(hour, index) in timeOptions[0]" 
+									:key="index"
+									class="time-button" 
+									:class="{ active: selectedHour == hour }"
+									@click="selectedHour = hour"
+								>{{ hour }}</button>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+				
+				<!-- 分钟选择 -->
+				<view class="time-section">
+					<view class="section-title">分钟</view>
+					<view class="minutes-wrapper">
+						<scroll-view 
+							scroll-y="true" 
+							class="minutes-scroll"
+							enhanced="true"
+							show-scrollbar="true"
+						>
+							<view class="minutes-buttons">
+								<button 
+									v-for="(minute, index) in timeOptions[1]" 
+									:key="index"
+									class="time-button" 
+									:class="{ active: selectedMinute == minute }"
+									@click="selectedMinute = minute"
+								>{{ minute }}</button>
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 操作按钮 -->
+			<view class="popup-footer">
+				<button class="footer-button default" @click="closeTimePopup">取消</button>
+				<button class="footer-button blue" @click="confirmTime">确认</button>
+			</view>
+		</view>
+	</uni-popup>
+
+	<!-- 配送日期选择器蒙板 -->
+	<view v-if="reachDatePickerShow" class="date-picker-mask" @click="reachDatePickerShow = false"></view>
+
+	<mx-date-picker :show="reachDatePickerShow" format="yyyy-mm-dd" type="date" :value="reachDatePickerValue" :show-tips="true" @confirm="confirmReachDatePicker" @cancel="reachDatePickerShow = false" />
 	</view>
 </template>
 <script>
+import TuiListCell from "@/components/plugin/list-cell";
+import { createOrder } from "@/api/order";
+import { mapGetters } from "vuex";
+import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
+
 export default {
 	name: "result",
+	components: {
+		TuiListCell,
+		MxDatePicker
+	},
+		data() {
+			return {
+				form: {
+					hasPay: 4,
+					payWay: 0,
+					num: 1,
+					sendType: 0,
+					reachDate: '',
+					reachPeriod: "12:00",
+					remark: '',
+					needWork:1,
+					needPrint:2
+				},
+				goodsPrice: '',
+				payWayindex: 0,
+				payWayList: [
+					{name: "线下微信", id: 0},
+					{name: "线下支付宝", id: 1},
+					{name: "现金", id: 4},
+					{name: "银行卡", id: 5}
+				],
+				timeOptions: [
+					['00', '01', '02','03','04','05','06','07','08','09','10','11','12','13', '14','15','16','17','18','19','20','21','22','23'],
+					['00', '05', '10','15','20','25','30','35','40','45','50','55']
+				],
+				goodsName:'',
+				goodsId:0,
+				selectedHour: '12', // 选中的小时
+				selectedMinute: '00', // 选中的分钟
+				reachDatePickerShow: false,
+				reachDatePickerValue: ''
+			};
+		},
+	computed: {
+		...mapGetters(["getLoginInfo", "getMyShopInfo"]),
+		orderTotalPrice() {
+			let price = 0;
+			if (Number(this.goodsPrice) > 0 && Number(this.form.num) > 0) {
+				price = Number(this.goodsPrice) * Number(this.form.num);
+				price = parseFloat(price.toFixed(2));
+			}
+			return price;
+		}
+	},
+	onLoad(options) {
+		this.goodsName = options.name?options.name:''
+		this.goodsId = options.id?options.id:0
+	},
 	methods: {
-		// 返回上一页，关闭当前成功提示
+		init() {
+
+		},
+		setSendType (type) {
+			this.form.sendType = type
+		},
 		goBack() {
 			uni.navigateBack({})
+		},
+		confirmOrder() {
+			let product = [{productId:this.goodsId,bigNum:this.form.num,smallNum:null,property:0,num:this.form.num,unitType:0,unitPrice:this.goodsPrice}]
+			let json = JSON.stringify(product)
+			let customId = this.getMyShopInfo && Number(this.getMyShopInfo.defaultCustomId)>0 ? this.getMyShopInfo.defaultCustomId : 0
+			if(Number(customId)<=0){
+				this.$msg('请设置快捷开单的客户')
+				return false
+			}
+			//dealPrice=1 表示花束卖的价跟原价不一致，也要强制提交
+      		let params = {...this.form,modifyPrice: this.orderTotalPrice,version:3,orderType:1,product:json,customId:customId,dealPrice:1};
+
+			this.$util.confirmModal({content:'确认提交'},() => {        
+				uni.showLoading({mask:true})
+				createOrder(params).then((res) => {
+					uni.hideLoading()
+					if(res.code == 1){
+						const {data: { id, orderSn,actPrice }} = res;
+						if(this.form.hasPay == 0){
+							this.$util.pageTo({ url: '/admin/billing/toPay',type:2,query: {orderId:id,orderSn:orderSn,actPrice:actPrice}})
+						}else{
+							this.$util.pageTo({ url: '/admin/billing/result?orderId='+id,type:2})					
+						}
+					}
+				})
+			})
+		},
+		payWayChange(e) {
+			let index = e.detail.value;
+			this.payWayindex = index;
+			this.form.payWay = this.payWayList[index].id;
+		},
+		selTimeFn(e) {
+			this.form.reachDate = e.detail.value;
+		},
+		bindReachDateChange(){
+			this.reachDatePickerShow = true
+			this.reachDatePickerValue = this.form.reachDate
+		},
+		confirmReachDatePicker(e) {
+			this.form.reachDate = e.value
+			this.reachDatePickerShow = false
+		},
+		bindTimeChange(event) {
+			let val = event.detail.value;
+			let before = Number(val[0]);
+			let after = Number(val[1]);
+			let timeOptions = this.timeOptions;
+			this.form.reachPeriod = timeOptions[0][before]+':'+timeOptions[1][after];
+		},
+		openTimePopup() {
+			// 初始化为当前选中的时间
+			const [hour, minute] = this.form.reachPeriod.split(':')
+			this.selectedHour = hour
+			this.selectedMinute = minute
+			this.$refs.timePopup.open()
+		},
+		// 关闭时间选择弹框
+		closeTimePopup() {
+			this.$refs.timePopup.close()
+		},
+		// 确认时间选择
+		confirmTime() {
+			this.form.reachPeriod = `${this.selectedHour}:${this.selectedMinute}`
+			this.closeTimePopup()
 		}
 	}
 };
@@ -40,7 +321,7 @@ export default {
 		left: 0;
 		width: 100%;
 		height: 299upx;
-		background: #09C567;
+		background: #3385ff;
 		border-radius: 0upx 0upx 83upx 83upx;
 	}
 	.result-view {
@@ -61,6 +342,213 @@ export default {
 			margin: 10upx 0 10upx;
 			font-size: 32upx;
 		}
+		.form-container {
+			width: 100%;
+			.line-cell {
+				.tui-title {
+					width: 210upx;
+					color: $fontColor2;
+				}
+				.tui-input {
+					width: calc(100% - 210upx);
+					font-size: 28upx;
+				}
+				.phcolor {
+					color: #ccc;
+				}
+			}
+			.button-group {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-top: 40upx;
+				padding: 0 30upx;
+			}
+		}
+	}
+}
+
+/* 时间选择弹窗样式 */
+.time-picker-popup {
+	width: 100%;
+	background: #fff;
+	border-radius: 20upx 20upx 0 0;
+	display: flex;
+	flex-direction: column;
+	max-height: 94vh;
+	padding: 0 0 120upx 0;
+}
+
+.popup-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: 30upx 20upx 20upx 20upx;
+	border-bottom: 2upx solid #f0f2f6;
+	flex-shrink: 0;
+}
+
+.popup-title {
+	font-size: 36upx;
+	color: #333;
+	font-weight: bold;
+}
+
+.popup-close {
+	font-size: 48upx;
+	color: #999;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.time-sections {
+	display: flex;
+	flex-direction: column;
+	gap: 20upx;
+	margin-bottom: 0;
+	flex: 1;
+	padding: 20upx 20upx 0 20upx;
+	overflow: hidden;
+}
+
+.time-section {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 200upx;
+	
+	.section-title {
+		font-size: 28upx;
+		color: #333;
+		font-weight: 600;
+		margin-bottom: 12upx;
+		text-align: left;
+	}
+}
+
+.hours-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	min-height: 150upx;
+}
+
+.minutes-wrapper {
+	width: 100%;
+	flex: 1;
+	background: #f8f9fa;
+	border: 2upx solid #e9ecef;
+	border-radius: 8upx;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	min-height: 150upx;
+}
+
+.hours-scroll,
+.minutes-scroll {
+	width: 100%;
+	height: 100%;
+	padding: 8upx;
+	box-sizing: border-box;
+}
+
+.hours-buttons,
+.minutes-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8upx;
+	justify-content: flex-start;
+}
+
+.time-button {
+	width: calc(25% - 6upx);
+	height: 73upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #ffffff;
+	border: 2upx solid #e9ecef;
+	border-radius: 6upx;
+	font-size: 26upx;
+	color: #666;
+	box-sizing: border-box;
+	transition: all 0.2s;
+	flex-shrink: 0;
+	
+	&.active {
+		background: #3385FF;
+		border-color: #3385FF;
+		color: #fff;
+		font-weight: 500;
+	}
+	
+	&:active {
+		background: #e8f5ff;
+	}
+}
+
+.popup-footer {
+	display: flex;
+	gap: 12upx;
+	padding: 15upx 20upx 20upx 20upx;
+	border-top: 2upx solid #f0f2f6;
+	flex-shrink: 0;
+	
+	.footer-button {
+		flex: 1;
+		height: 93upx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		border-radius: 8upx;
+		font-size: 28upx;
+		font-weight: 500;
+		transition: all 0.2s;
+		
+		&.default {
+			background: #f5f5f5;
+			color: #666;
+		}
+		
+		&.blue {
+			background: #3385FF;
+			color: #fff;
+		}
+		
+		&:active {
+			opacity: 0.8;
+		}
+	}
+}
+
+/* 日期选择器蒙板 */
+.date-picker-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 98;
+	animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
 	}
 }
-</style>
+</style>