归整表单

ghs/src/admin/billing/affirm.vue

@@ -47,14 +47,12 @@
 						</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">
@@ -63,28 +61,10 @@
 						<view class="tui-placeholder" v-else>请选择客户</view>
 						<input v-model="form.province" name="province" hidden />
 					</tui-list-cell>
-					 <tui-list-cell 
-						class="line-cell code-wrap" :hover="false">
-						<view class="tui-title">配送方式</view>
-						<view>
-							<button 
-								@click="changeWay(0)"
-								:class="['admin-button-com','mini-btn',waySele==0?'blue':'default']">
-								自取
-							</button>
-							<button 
-								@click="changeWay(1)"
-								style="margin-left:10px;"
-								:class="['admin-button-com','mini-btn',waySele==1?'blue':'default']">
-								本店送
-							</button>
-							<button
-								@click="changeWay(2)"
-								style="margin-left:10px;" :class="['admin-button-com','mini-btn',waySele==2?'blue':'default']">
-								快递送
-							</button>
-						</view>
-					</tui-list-cell>
+					<appFormRadioBtn
+					title="配送方式"
+					:currenSelect.sync="currenSelect"
+					:selectOptions="selectOptionsWay" />
 					<tui-list-cell
 						class="line-cell"
 						:hover="false"
@@ -102,40 +82,7 @@
 								<view class="tui-placeholder" v-else>请选择</view>
 							</picker>
 					</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>
+					<appAddressGroup cityTitle="配送城市" @selectAdress="selectAdress"></appAddressGroup>
 					<tui-list-cell class="line-cell" :hover="false" :arrow="true">
 						<div class="tui-title">配送日期</div>
 							<picker mode="date" :value="form.reachTime" @change="selTimeFn" class="tui-input">
@@ -176,18 +123,6 @@
 				下单
 			</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"
@@ -204,7 +139,8 @@ import SimpleAddress from "@/components/plugin/simple-address";
 import AppAreaSel from "@/components/app-area-sel";
 import AppCustomerSel from "@/components/app-customer-sel";
 import productMins from "@/mixins/product";
-
+import appFormRadioBtn from '@/components/app-formRadio-btn'
+import appAddressGroup from  '@/components/app-address-group'
 const form = require("@/utils/formValidation.js");
 export default {
 	name: "BillingAffirm", // 开单确认
@@ -213,7 +149,9 @@ export default {
 		AppAvatarModule,
 		SimpleAddress,
 		AppAreaSel,
-		AppCustomerSel
+		AppCustomerSel,
+		appFormRadioBtn,
+		appAddressGroup
 	},
 	mixins: [productMins],
 	data() {
@@ -230,18 +168,18 @@ export default {
 				telephone: "",
 				customer: "",
 				reachTime:'',
-				sendCost:''
+				sendCost:'',
+				longitude: "",
+                latitude: "",
 			},
+			currenSelect:2,
 			// 详细地址
-			showRegion: false,
+			// showRegion: false,
 			showCustomer: false,
 			region: {
 				lat: 0,
 				long: 0
 			},
-			// 省市联动
-			regionData: [],
-			cityPickerValueDefault: [0, 0],
 			waySele: 2,   // 0 自取  1 本店送 2快递送
 			sendSideText:'达达配送',
             deliveryList: [
@@ -262,9 +200,21 @@ export default {
                     key: 5
                     }
 				],
+		    selectOptionsWay: [
+				{name:'自取',id:0},
+				{name:'本店送',id:1},
+				{name:'快递送',id:2}
+            ]
 		};
 	},
 	methods: {
+		selectAdress(info) {
+			this.form.province = info.province;
+			this.form.city = info.city;
+			this.form.floor = info.floor;
+			this.form.longitude = info.longitude;
+			this.form.latitude = info.latitude
+		},
 		selTimeFn(e){
 			this.form.reachTime = e.detail.value;
 		},
@@ -287,15 +237,6 @@ export default {
 				// }
 			});
 		},
-		// option
-		// 选择地址
-		selRegionFn() {
-			if (!this.form.city) {
-				this.$msg("请先选择城市！");
-				return false;
-			}
-			this.showRegion = true;
-		},
 		changeAreaFn(e) {
 			console.log("changeAreaFn", e);
 			this.form.address = e.address;
@@ -308,16 +249,6 @@ export default {
 			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) {

ghs/src/components/app-address-group.vue

@@ -0,0 +1,144 @@
+<template>
+    <view>
+            <tui-list-cell
+                class="line-cell"
+                :hover="false"
+                :arrow="true"
+                @click="openAddres"
+            >
+                <view class="tui-title ">{{ cityTitle }}</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 ">{{detailTitle}}</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 
+                v-if="isFloor"
+                class="line-cell" :hover="false">
+                <view class="tui-title ">门牌号</view>
+                <input
+                    v-model="form.floor"
+                    placeholder-class="phcolor"
+                    class="tui-input"
+                    name="floor"
+                    @input="changeFloor"
+                    placeholder="楼号门牌号（选填）"
+                />
+            </tui-list-cell>
+            <!-- 选择地区 -->
+            <app-area-sel
+                :show.sync="showRegion"
+                @change="changeAreaFn"
+                :city="form.city"
+            />
+            <!-- 省市联动 -->
+            <simple-address
+                ref="simpleAddress"
+                :pickerValueDefault="cityPickerValueDefault"
+                @onConfirm="onCityConfirm"
+            ></simple-address>
+    </view>
+</template>
+
+<script>
+    import SimpleAddress from "@/components/plugin/simple-address";
+    import AppAreaSel from "@/components/app-area-sel";
+    import TuiListCell from "@/components/plugin/list-cell";
+    export default {
+        name:'AppAddressGroup',
+        components:{
+            AppAreaSel,
+            SimpleAddress,
+            TuiListCell
+        },
+        props:{
+            cityTitle:{
+                type:String,
+                default: '所在城市' 
+            },
+            detailTitle:{
+                type:String,
+                default: '地址'   
+            },
+            isFloor:{
+                type: Boolean,
+			    default: true
+            },
+            getFormObj:{
+                type: Object,
+			    default: ()=>{}
+            }
+        },
+        data(){
+            return {
+                // 省市联动
+                regionData: [],
+                cityPickerValueDefault: [0, 0],
+                form:{
+                    province:'',
+                    city:'',
+                    address:'',
+                    floor:'',
+                    longitude: "",
+                    latitude: "",
+                },
+                showRegion:false
+            }
+        },
+        methods:{
+            formatForm(){
+                Object.keys(this.form).forEach(i=>{
+                    this.form[i] = this.getFormObj[i]
+                })
+            },
+            selRegionFn() {
+			if (!this.form.city) {
+				this.$msg("请先选择城市！");
+				return false;
+			}
+			this.showRegion = true;
+		    },
+            onCityConfirm(e) {
+                this.form.province = e.provinceName;
+                this.form.city = e.cityName;
+                this.$emit('selectAdress',this.form)
+            },
+            // 省市联动
+            openAddres() {
+                this.$refs.simpleAddress.open();
+            },
+            changeAreaFn(e) {
+                this.form.address = e.address;
+                this.form.latitude = e.location.lat;
+                this.form.longitude = e.location.lng;
+                this.$emit('selectAdress',this.form)
+            },
+            changeFloor(e) {
+                this.$emit('selectAdress',this.form)
+            }
+        },
+        watch:{
+           getFormObj(){
+               if(this.$util.isEmpty(this.getFormObj)){
+                   this.formatForm()
+               }
+           } 
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

ghs/src/components/app-formRadio-btn.vue

@@ -0,0 +1,55 @@
+<template>
+    <tui-list-cell 
+        class="line-cell code-wrap" :hover="false">
+        <view class="tui-title">{{title}}</view>
+        <view>
+            <button 
+                v-for="(item,index) in selectOptions"
+                :key="index"
+                @click="changeWay(index)"
+                :class="['admin-button-com','mini-btn',selectOptions==index?'blue':'default']">
+                {{item.name}}
+            </button>
+        </view>
+    </tui-list-cell>
+</template>
+
+<script>
+    import TuiListCell from "@/components/plugin/list-cell";
+    export default {
+        name:'AppFormRadioBtn',
+        components:{
+            TuiListCell
+        },
+        props:{
+            title:{
+                type:String,
+                default:''
+            },
+            currenSelect:{
+                style:Number,
+                default:0
+            },
+            selectOptions:{
+                type:Array,
+                default:()=>[
+                    {name:'自取',id:0},
+                    {name:'本店送',id:1},
+                    {name:'快递送',id:2}
+                ]
+            }
+        },
+        methods:{
+            changeWay(index){
+                this.$emit("update:currenSelect", index)
+                this.$emit('selectBack',{index,item:this.selectOptions[index]})
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .admin-button-com {
+        margin-right: 20upx;
+    }
+</style>