花材确认下单

ghs/src/admin/billing/affirm.vue

@@ -1,19 +1,371 @@
 <template>
 	<view class="affirm-page">
-		<view class="affirm-view"> </view>
+		<view class="affirm-view overscroll">
+			<!-- 门店信息 -->
+			<form>
+				<view class="module-com">
+					<view class="commodity-view">
+						<view class="commodity-list">
+							<view class="commodity-item">
+								<image
+									class="item-icon"
+									src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+									alt="商品图"
+								/>
+
+								<view class="item-info">
+									<view class="info-line">
+										<text class="item-name">天使面孔</text>
+										<text class="item-price">
+											<text class="unit">¥</text>
+
+											<text class="price">60.00</text>
+										</text>
+									</view>
+									<view class="info-line">
+										<text class="item-type">c级</text>
+										<text class="item-count">25/4</text>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="summary-bar">
+							<view class="operate-view">
+								<text class="iconfont icongouwuche"></text>
+								重选花材
+							</view>
+							<view class="describe-view">
+								共3种, 共16扎9支，合计 ¥<text class="price">114.00</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<!-- <view class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登录</view> -->
+				<!-- 登录信息 -->
+				<view class="module-com input-line-wrap">
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">客户</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>请选择客户</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">仓库</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>请选择仓库</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">发货日期</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>请选择</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="false"
+						@click="openAddres"
+					>
+						<view class="tui-title ">配送方式</view>
+					</tui-list-cell>
+					<!-- <tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title ">联系电话</view>
+						<input
+							v-model="form.telephone"
+							placeholder-class="phcolor"
+							class="tui-input"
+							name="telephone"
+							placeholder="请输入联系电话"
+							maxlength="50"
+							type="text"
+						/>
+					</tui-list-cell> -->
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">配送方</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>请选择仓库</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">配送城市</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>请选择</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="selRegionFn"
+					>
+						<view class="tui-title ">地址</view>
+						<view class="tui-input" v-if="form.address">{{ form.address }}</view>
+						<view class="tui-placeholder" v-else>请填写详细地址</view>
+						<input v-model="form.address" name="address" hidden />
+					</tui-list-cell>
+					<tui-list-cell class="line-cell" :hover="false">
+						<view class="tui-title ">门牌号</view>
+						<input
+							v-model="form.floor"
+							placeholder-class="phcolor"
+							class="tui-input"
+							name="floor"
+							placeholder="楼号门牌号（选填）"
+						/>
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="true"
+						@click="openAddres"
+					>
+						<view class="tui-title ">配送时间</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else>留空默认20分钟后配送</view>
+						<input v-model="form.province" name="province" hidden />
+					</tui-list-cell>
+					<tui-list-cell
+						class="line-cell"
+						:hover="false"
+						:arrow="false"
+						@click="openAddres"
+					>
+						<view class="tui-title ">运费</view>
+						<view class="tui-input" v-if="form.province || form.city">
+							{{ form.province + "-" + form.city }}
+						</view>
+						<view class="tui-placeholder" v-else></view>
+						<input v-model="form.province" name="province" hidden />
+					</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> -->
+				</view>
+			</form>
+		</view>
 		<view class="under-bar">
 			<view class="price-view">
 				<text class="price-title">收款</text>
 				<text class="price-number">¥ <text class="large">114</text>.00</text>
 			</view>
-			<button class="admin-button-com blue middle">下单</button>
+			<button class="admin-button-com blue middle" @click="formSubmit">
+				下单
+			</button>
 		</view>
+		<!-- 选择地区 -->
+		<app-area-sel
+			:show.sync="showRegion"
+			@change="changeAreaFn"
+			:city="form.city"
+		/>
+		<!-- 省市联动 -->
+		<simple-address
+			ref="simpleAddress"
+			:pickerValueDefault="cityPickerValueDefault"
+			@onConfirm="onCityConfirm"
+		></simple-address>
+		<!-- 选择地区 -->
+		<AppCustomerSel
+			:show.sync="showCustomer"
+			@change="changeCustomerFn"
+			:city="form.customer"
+		/>
 	</view>
 </template>
 
 <script>
+import TuiListCell from "@/components/plugin/list-cell";
+import AppAvatarModule from "@/components/module/app-avatar";
+import SimpleAddress from "@/components/plugin/simple-address";
+import AppAreaSel from "@/components/app-area-sel";
+import AppCustomerSel from "@/components/app-customer-sel";
+const form = require("@/utils/formValidation.js");
 export default {
-	name: "BillingAffirm" // 开单确认
+	name: "BillingAffirm", // 开单确认
+	components: {
+		TuiListCell,
+		AppAvatarModule,
+		SimpleAddress,
+		AppAreaSel,
+		AppCustomerSel
+	},
+	data() {
+		return {
+			form: {
+				shopName: "",
+				province: "",
+				city: "",
+				address: "",
+				floor: "",
+				openTime: "8:00 - 22:00",
+				introduction: "",
+				telephone: "",
+				customer: ""
+			},
+			// 详细地址
+			showRegion: false,
+			showCustomer: true,
+			region: {
+				lat: 0,
+				long: 0
+			},
+			// 省市联动
+			regionData: [],
+			cityPickerValueDefault: [0, 0]
+		};
+	},
+	methods: {
+		init() {
+			this._getDet();
+		},
+		// api
+		_getDet() {
+			let data = uni.getStorageSync("modifyShopB");
+			if (this.$util.isEmpty(data)) return;
+			Object.keys(this.form).forEach((i, index) => {
+				// if (i != 'password') {
+				this.form[i] = data[i];
+				// }
+			});
+		},
+		// option
+		// 选择地址
+		selRegionFn() {
+			if (!this.form.city) {
+				this.$msg("请先选择城市！");
+				return false;
+			}
+			this.showRegion = true;
+		},
+		changeAreaFn(e) {
+			console.log("changeAreaFn", e);
+			this.form.address = e.address;
+			this.region.lat = e.location.lat;
+			this.region.long = e.location.lng;
+		},
+		changeCustomerFn(e) {
+			console.log("changeCustomerFn", e);
+			this.form.address = e.address;
+			this.form.lat = e.location.lat;
+			this.form.long = e.location.lng;
+		},
+		// 省市联动
+		openAddres() {
+			this.$refs.simpleAddress.open();
+		},
+		onCityConfirm(e) {
+			// this.form.receiveAddress = e.label
+			this.form.province = e.provinceName;
+			this.form.city = e.cityName;
+			// this.pickerText = JSON.stringify(e)
+		},
+		confirmFn() {
+			let hostFn = this.option.id ? update : add;
+			if (this.option.id) {
+				this.form.id = this.option.id;
+			}
+			hostFn(this.form).then(res => {
+				let promptText = this.option.id ? "修改成功！" : "添加成功！";
+				this.$msg(promptText);
+				// uni.removeStorageSync("modifyShopB");
+				// setTimeout(() => {
+				// 	this.$util.pageTo("/admin/shop/list");
+				// }, 1000);
+			});
+		},
+		// 表单验证
+		formSubmit(e) {
+			// 表单规则
+			let rules = [
+				{
+					name: "shopName",
+					rule: [""],
+					msg: ["请输入名称"]
+				},
+				{
+					name: "openTime",
+					rule: [""],
+					msg: ["请输入营业时间"]
+				},
+				{
+					name: "telephone",
+					rule: [""],
+					msg: ["请输入联系电话"]
+				},
+				{
+					name: "province",
+					rule: [""],
+					msg: ["请选择地址"]
+				},
+				{
+					name: "address",
+					rule: [""],
+					msg: ["请填写详细地址"]
+				},
+				{
+					name: "floor",
+					rule: [""],
+					msg: ["请输入门牌号"]
+				}
+			];
+			// 进行表单检查
+			let formData = this.form;
+			let checkRes = form.validation(formData, rules);
+			// 验证通过!
+			if (!checkRes) {
+				this.confirmFn();
+			} else {
+				this.$msg(checkRes);
+			}
+		}
+	}
 };
 </script>
 
@@ -23,9 +375,118 @@ export default {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+
 	.affirm-view {
 		flex: 1;
 		padding: 20px;
+		background-color: #f0f2f6;
+
+		.commodity-view {
+			display: flex;
+			flex-direction: column;
+			.commodity-list {
+				padding: 20px;
+				.commodity-item {
+					display: flex;
+					margin-bottom: 20px;
+					.item-icon {
+						flex-shrink: 0;
+						width: 140px;
+						height: 140px;
+					}
+					.item-info {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						flex: 1;
+						margin-left: 20px;
+						.info-line {
+							margin-bottom: 20px;
+							display: flex;
+							justify-content: space-between;
+							align-items: flex-end;
+							.item-name {
+								color: #666;
+								font-size: 28px;
+							}
+							.item-price {
+								color: #333;
+								font-size: 22px;
+								.price {
+									font-size: 32px;
+									font-weight: bold;
+								}
+							}
+							.item-type {
+								color: #999;
+								font-size: 24px;
+							}
+							.item-count {
+								color: #666;
+								font-size: 24px;
+							}
+						}
+					}
+				}
+			}
+			.summary-bar {
+				padding: 0 20px;
+				height: 90px;
+				display: flex;
+
+				align-items: center;
+				justify-content: space-between;
+				border-top: 1px solid #eeeeee;
+				.operate-view {
+					display: flex;
+
+					align-items: center;
+					color: #3385ff;
+					font-size: 26px;
+					.iconfont {
+						margin-right: 20px;
+						font-size: 40px;
+					}
+				}
+				.describe-view {
+					display: flex;
+
+					align-items: center;
+					color: #333;
+					font-size: 24px;
+					.price {
+						font-weight: bold;
+						font-size: 36px;
+					}
+				}
+			}
+		}
+
+		.module-com {
+			background-color: #fff;
+			margin-bottom: 20px;
+
+			border-radius: 10px;
+			overflow: hidden;
+			.member-wrap {
+				.member-det {
+					font-size: 24px;
+					margin-left: 20px;
+				}
+			}
+			.remark-wrap {
+				align-items: flex-start;
+				.remark {
+					height: 240px;
+				}
+			}
+			// .tui-placeholder,
+			// .tui-input {
+			// 	padding-right: 30px;
+			// 	width: 100%;
+			// 	text-align: right;
+			// }
+		}
 	}
 	.under-bar {
 		display: flex;
@@ -34,6 +495,9 @@ export default {
 		padding: 0 20px;
 		width: 100%;
 		height: 100px;
+		background-color: #fff;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
 		.price-view {
 			display: flex;
 			align-items: center;

ghs/src/admin/billing/confirm.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="confirm-page">
+		<view class="top-view">
+			<view class="top-line">
+				<view class="line-label"> 订单号</view>
+				<view class="line-value"> 201923121</view>
+			</view>
+			<view class="top-line">
+				<view class="line-label"> 金额</view>
+				<view class="line-value"> ￥201923121</view>
+			</view>
+			<view class="top-line">
+				<view class="line-label"> 配送方式</view>
+				<view class="line-value"> 201923121</view>
+			</view>
+			<view class="top-line">
+				<view class="line-label"> 配送时间</view>
+				<view class="line-value"> 201923121</view>
+			</view>
+		</view>
+		<view class="code-view">
+			<view class="code-title"> 扫码付款</view>
+			<view class="code-image">
+				<image
+					src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+					alt="商品图"
+				/>
+			</view>
+			<button class="admin-button-com big" @click="formSubmit">
+				延期付
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "BillingConfirm", // 开单结果
+	components: {
+		AppCustomerSel
+	},
+	data() {
+		return {
+			showRegion: false
+		};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.confirm-page {
+	position: relative;
+	background-color: #f0f2f6;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	.top-view {
+		padding: 40px 30px;
+		background-color: #fff;
+		.top-line {
+			margin-bottom: 20px;
+			display: flex;
+			align-items: center;
+			.line-label {
+				width: 150px;
+				color: #666;
+				font-size: 28px;
+			}
+			.line-value {
+				color: #333;
+				font-size: 28px;
+			}
+		}
+	}
+	.code-view {
+		padding: 60px 100px;
+		margin-top: 20px;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		background-color: #fff;
+		.code-title {
+			color: #333;
+			font-size: 32px;
+		}
+		.code-image {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 60px 0 80px;
+			width: 460px;
+			height: 460px;
+
+			border: 1px solid rgba(3, 0, 0, 0.1);
+			image {
+				width: 406px;
+				height: 406px;
+			}
+		}
+		.admin-button-com {
+			width: 100%;
+		}
+	}
+}
+</style>

ghs/src/components/app-customer-sel.vue

@@ -0,0 +1,273 @@
+<template>
+	<div class="app-area-sel">
+		<bottom-popup class="popup-wrap" :show="showPopup" @close="hidePopup">
+			<div class="map-wrap">
+				<div class="map-top-tit-wrap">
+					<div class="map-top-tit">请选择客户</div>
+					<app-close icon="iconguanbi" @close="hidePopup" />
+				</div>
+				<!-- 搜索 -->
+				<div class="map-search">
+					<app-search-module
+						ref="aaaaa"
+						placeholder="请输入关键字"
+						:focus="false"
+						@input="searchFn"
+					/>
+				</div>
+				<!-- 地图 -->
+				<!-- <div class="map-box">
+					<map id="myMap" style="width: 100%; height: 140px;" :latitude="latitude" :longitude="longitude" @regionchange="mapChange">
+						<cover-image class="current-site-icon" src="../../static/images/common/localposition.png"></cover-image>
+						<cover-view class="reload" @click="reload">
+							<cover-view class="center1">
+								<cover-view class="center2"></cover-view>
+							</cover-view>
+						</cover-view>
+					</map>
+				</div>-->
+				<!-- 列表 -->
+				<scroll-view class="customer-list" scroll-y>
+					<view
+						v-for="(item, index) in customerListData"
+						:key="index"
+						@click="switchAddress(item, index)"
+						class="customer-item"
+					>
+						<view class="item-avatar">
+							<image
+								src="https://img.huaml.com/uploads/12358/202005/29/de74c55596d304b85e79154958e8bf57_small.jpeg"
+								alt="商品图"
+							/>
+						</view>
+						<view class="item-name"> 阿里爸爸</view>
+						<view class="item-level">普通客户</view>
+						<view class="item-tag">NEW</view>
+					</view>
+				</scroll-view>
+				<view class="add-customer-bar">
+					没有找到客户？新增
+				</view>
+			</div>
+		</bottom-popup>
+	</div>
+</template>
+
+<script>
+import BottomPopup from "@/components/plugin/bottom-popup";
+import AppClose from "@/components/module/app-close";
+import AppSearchModule from "@/components/module/app-search";
+// api
+import { suggestion } from "@/api/common";
+export default {
+	name: "app-customer-sel",
+	components: {
+		BottomPopup,
+		AppClose,
+		AppSearchModule
+	},
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		city: {
+			type: String,
+			default: ""
+		}
+	},
+	data() {
+		return {
+			showPopup: false,
+			keyword: "",
+			customerListData: [{}, {}, {}]
+		};
+	},
+	mounted() {
+		this.showPopup = this.show;
+	},
+	// onLoad(val) {
+	// 	this.mapCtx = uni.createMapContext('myMap')
+	// 	this.query = val
+	// 	this.reload()
+	// },
+
+	watch: {
+		show(val) {
+			this.showPopup = val;
+
+			// #ifdef H5
+			this.$nextTick(function() {
+				setTimeout(() => {
+					this.$refs.aaaaa.$refs.searchInput._focusInput();
+				}, 1000);
+			});
+			// #endif
+
+			// if (val) {
+			// 	this.getAreaList()
+			// }
+		}
+	},
+	methods: {
+		getAreaList() {
+			if (!this.keyword) {
+				return false;
+			}
+			suggestion({ region: this.city, keyword: this.keyword }).then(res => {
+				this.customerListData = res.data.data;
+			});
+		},
+		// 搜索
+		searchFn(e) {
+			this.keyword = e;
+			this.getAreaList();
+			// this.$emit('search', e)
+		},
+		hidePopup() {
+			this.$emit("update:show", false);
+			this.$emit("hide");
+		},
+		switchAddress(item, index) {
+			this.$emit("change", item);
+			this.hidePopup();
+		}
+		// 地图操作
+		// reload() {
+		// 	uni.getLocation({
+		// 		type: 'wgs84',
+		// 		success: res => {
+		// 			this.latitude = res.latitude
+		// 			this.longitude = res.longitude
+		// 			// this.customerList()
+		// 		},
+		// 		// eslint-disable-next-line handle-callback-err
+		// 		fail: err => {
+		// 			this.$msg('定位失败')
+		// 			// setTimeout(function() {
+		// 			// 	uni.navigateBack({
+		// 			// 		delta: 1
+		// 			// 	})
+		// 			// }, 1500)
+		// 		}
+		// 	})
+		// },
+		// mapChange(e) {
+		// 	if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
+		// 		this.mapCtx.getCenterLocation({
+		// 			success: res => {
+		// 				this.longitude = res.longitude
+		// 				this.latitude = res.latitude
+		// 				// this.customerList()
+		// 			}
+		// 		})
+		// 	}
+		// },
+		// 获取列表
+		// customerList() {
+		// 	geocoder({
+		// 		latitude: this.latitude,
+		// 		longitude: this.longitude
+		// 	}).then(res => {
+		// 		console.log(res)
+		// 		let data = res.result
+		// 		this.currentSelectAddress = 0
+		// 		this.customerListData = data.pois
+		// 		// this.currentRegion = [data.address_component.province, data.address_component.city, data.address_component.district]
+		// 	})
+		// },
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+// 弹窗
+/deep/.popup-wrap {
+	.tui-popup-class {
+		border-top-left-radius: 20px;
+		border-top-right-radius: 20px;
+	}
+}
+.map-wrap {
+	.map-top-tit-wrap {
+		padding: 30px 0;
+		text-align: center;
+		font-size: 34px;
+	}
+	.map-search {
+		padding: 0 30px;
+		margin-bottom: 20px;
+	}
+	.map-box {
+		.current-site-icon {
+			width: 63px;
+			height: 90px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	// 列表
+	.customer-list {
+		min-height: 500rpx;
+		max-height: 820rpx;
+		// padding-bottom: 110rpx;
+		box-sizing: border-box;
+		.customer-item {
+			display: flex;
+			width: 100%;
+			align-items: center;
+			line-height: 40rpx;
+			padding: 18rpx 30px;
+			text-align: left;
+			border-bottom: 1px solid #eee;
+			position: relative;
+			.item-avatar {
+				flex-shrink: 0;
+				width: 66px;
+				height: 66px;
+				border-radius: 50%;
+				overflow: hidden;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.item-name {
+				flex-shrink: 0;
+				margin: 0 20upx;
+				width: 200upx;
+			}
+			.item-level {
+				margin: 0 20upx;
+				flex: 1;
+			}
+			.item-tag {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 78px;
+				height: 34px;
+				flex-shrink: 0;
+				background-color: #3385ff;
+				border-radius: 17px 17px 17px 0;
+				font-size: 20px;
+				color: #fff;
+			}
+		}
+	}
+	.add-customer-bar {
+		width: 100%;
+		height: 100px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #3385ff;
+		font-size: 26px;
+
+		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
+	}
+}
+</style>

ghs/src/pages.json

@@ -392,6 +392,12 @@
 					"style": {
 						"navigationBarTitleText": "确认下单"
 					}
+				},
+				{
+					"path": "confirm",
+					"style": {
+						"navigationBarTitleText": "待确认"
+					}
 				}
 			]
 		}
@@ -402,7 +408,8 @@
 		// #endif
 		"navigationBarBackgroundColor": "#fff",
 		"navigationBarTitleText": "花卉宝",
-		"navigationBarTextStyle": "black"
+		"navigationBarTextStyle": "black",
+		"backgroundColor": "#F9FBFC"
 	},
 	"tabBar": {
 		"color": "#C0C4CC",