|
|
@@ -1,11 +1,10 @@
|
|
|
<template>
|
|
|
- <div class="app-delivery-module">
|
|
|
- <!-- 配送公共组件 -->
|
|
|
- <!-- 收花人 -->
|
|
|
- <div class="module-com">
|
|
|
+ <view class="app-delivery-module">
|
|
|
+
|
|
|
+ <view class="module-com">
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">收花人姓名</div>
|
|
|
+ <view class="tui-title">收花人姓名</view>
|
|
|
<input
|
|
|
v-model="form.receiveUserName"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -17,7 +16,7 @@
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">收花人手机号</div>
|
|
|
+ <view class="tui-title">收花人手机号</view>
|
|
|
<input
|
|
|
v-model="form.receiveMobile"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -29,22 +28,19 @@
|
|
|
/>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
|
|
|
- <div class="tui-title">所在城市</div>
|
|
|
- <div
|
|
|
- class="tui-input"
|
|
|
- v-if="form.province || form.city"
|
|
|
- >{{ form.province + '-' + form.city }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请选择</div>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selectCityFn">
|
|
|
+ <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>
|
|
|
</tui-list-cell>
|
|
|
+
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
|
|
|
- <div class="tui-title">详细地址</div>
|
|
|
- <div class="tui-input" v-if="form.address">{{ form.address }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请填写地址</div>
|
|
|
+ <view class="tui-title">详细地址</view>
|
|
|
+ <view class="tui-input" v-if="form.address">{{ form.address }}</view>
|
|
|
+ <view class="tui-placeholder" v-else>请填写地址</view>
|
|
|
</tui-list-cell>
|
|
|
+
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">门牌号</div>
|
|
|
+ <view class="tui-title">门牌号</view>
|
|
|
<input
|
|
|
v-model="form.floor"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -54,35 +50,23 @@
|
|
|
placeholder="楼号门牌号（选填）"
|
|
|
/>
|
|
|
</tui-list-cell>
|
|
|
+
|
|
|
<tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <div class="tui-title">配送时间</div>
|
|
|
+ <view class="tui-title">配送时间</view>
|
|
|
<picker mode="date" :value="form.reachTime" @change="selTimeFn" class="tui-input">
|
|
|
- <div v-if="form.reachTime">{{ form.reachTime }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请选择送达时间</div>
|
|
|
+ <view v-if="form.reachTime">{{ form.reachTime }}</view>
|
|
|
+ <view class="tui-placeholder" v-else>请选择送达时间</view>
|
|
|
</picker>
|
|
|
</tui-list-cell>
|
|
|
- <div class="delivery-time">
|
|
|
- <button
|
|
|
- class="button-com"
|
|
|
- :class="[form.reachPeriod == 0 ? 'red' : 'default']"
|
|
|
- @click="timeTodaySelFn(0)"
|
|
|
- >上午</button>
|
|
|
- <button
|
|
|
- class="button-com"
|
|
|
- :class="[form.reachPeriod == 1 ? 'red' : 'default']"
|
|
|
- @click="timeTodaySelFn(1)"
|
|
|
- >下午</button>
|
|
|
- <button
|
|
|
- class="button-com"
|
|
|
- :class="[form.reachPeriod == 2 ? 'red' : 'default']"
|
|
|
- @click="timeTodaySelFn(2)"
|
|
|
- >晚上</button>
|
|
|
- </div>
|
|
|
-
|
|
|
|
|
|
+ <view class="delivery-time">
|
|
|
+ <button class="button-com" :class="[form.reachPeriod == 0 ? 'red' : 'default']" @click="timeTodaySelFn(0)" >上午</button>
|
|
|
+ <button class="button-com" :class="[form.reachPeriod == 1 ? 'red' : 'default']" @click="timeTodaySelFn(1)" >下午</button>
|
|
|
+ <button class="button-com" :class="[form.reachPeriod == 2 ? 'red' : 'default']" @click="timeTodaySelFn(2)" >晚上</button>
|
|
|
+ </view>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">订花人姓名</div>
|
|
|
+ <view class="tui-title">订花人姓名</view>
|
|
|
<input
|
|
|
v-model="form.bookName"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -94,7 +78,7 @@
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">订花人手机号</div>
|
|
|
+ <view class="tui-title">订花人手机号</view>
|
|
|
<input
|
|
|
v-model="form.bookMobile"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -107,20 +91,20 @@
|
|
|
</tui-list-cell>
|
|
|
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="none-name-delivery flex-center" style="padding-left:0upx;">
|
|
|
- <div class="tui-title">派送方式</div>
|
|
|
+ <view class="none-name-delivery flex-center" style="padding-left:0upx;">
|
|
|
+ <view class="tui-title">派送方式</view>
|
|
|
<checkbox-group @change="anonymityChange" style="padding-left:70upx;">
|
|
|
<checkbox class="ljd-checkbox" value="1" id="noneNameText" ></checkbox>
|
|
|
<label for="noneNameText" class="none-name-text">匿名派送</label>
|
|
|
</checkbox-group>
|
|
|
- </div>
|
|
|
+ </view>
|
|
|
</tui-list-cell>
|
|
|
|
|
|
- </div>
|
|
|
- <!-- 备注 -->
|
|
|
- <div class="module-com remark-wrap">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="module-com remark-wrap">
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">备注</div>
|
|
|
+ <view class="tui-title">备注</view>
|
|
|
<input
|
|
|
v-model="form.remark"
|
|
|
placeholder-class="phcolor"
|
|
|
@@ -130,17 +114,15 @@
|
|
|
placeholder="选填"
|
|
|
/>
|
|
|
</tui-list-cell>
|
|
|
- </div>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 省市联动 -->
|
|
|
- <simple-address
|
|
|
- ref="simpleAddress"
|
|
|
- :region="orderShop.region"
|
|
|
- :pickerValueDefault="cityPickerValueDefault"
|
|
|
- @onConfirm="onCityConfirm"
|
|
|
- ></simple-address>
|
|
|
- <!-- 选择地区 -->
|
|
|
+ <simple-address ref="simpleAddress" :region="orderShop.region" :pickerValueDefault="cityPickerValueDefault" @onConfirm="getCityConfirm" ></simple-address>
|
|
|
+
|
|
|
+ <!-- 选择详细地址 -->
|
|
|
<app-area-sel :show.sync="showRegion" :city="form.city" @change="changeAreaFn" />
|
|
|
- </div>
|
|
|
+
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -150,6 +132,7 @@ import AppDatePicker from "@/components/app-date-picker";
|
|
|
import SimpleAddress from "@/components/plugin/simple-address";
|
|
|
import AppAreaSel from "@/components/app-area-sel";
|
|
|
import AppBindInfo from "@/components/app-bind-info";
|
|
|
+import {getShop} from "@/api/common"
|
|
|
export default {
|
|
|
name: "app-delivery-module",
|
|
|
components: {
|
|
|
@@ -170,6 +153,7 @@ export default {
|
|
|
province: "", // 收花人省份
|
|
|
city: "", // 收花人城市
|
|
|
address: "", // 收花人城市
|
|
|
+ showAddress:"",
|
|
|
floor: "", // 收花人门楼号和牌号
|
|
|
fullAddress: "", // 收花人完整地址，从腾讯地图接口获取
|
|
|
bookName: '', // 订花人姓名
|
|
|
@@ -189,25 +173,15 @@ export default {
|
|
|
cityPickerValueDefault: [0, 0]
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters({ orderShop: "getOrderShop" })
|
|
|
- },
|
|
|
- watch: {
|
|
|
- orderShop(val) {
|
|
|
- console.log("val", val);
|
|
|
- this.form.province = val.shop.province ? val.shop.province : "";
|
|
|
- this.form.city = val.shop.city ? val.shop.city : "";
|
|
|
- }
|
|
|
- },
|
|
|
mounted() {
|
|
|
- if (!this.$util.isEmpty(this.orderShop)) {
|
|
|
- this.form.province = this.orderShop.shop.province
|
|
|
- ? this.orderShop.shop.province
|
|
|
- : "";
|
|
|
- this.form.city = this.orderShop.shop.city
|
|
|
- ? this.orderShop.shop.city
|
|
|
- : "";
|
|
|
- }
|
|
|
+ getShop().then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ if(res.data.info){
|
|
|
+ this.form.province = res.data.info.province
|
|
|
+ this.form.city = res.data.info.city
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
selTimeFn(e) {
|
|
|
@@ -222,9 +196,8 @@ export default {
|
|
|
this.showRegion = true;
|
|
|
},
|
|
|
changeAreaFn(e) {
|
|
|
- console.log("changeAreaFn", e);
|
|
|
this.form.address = e.title;
|
|
|
- this.form.fullAddress = e.address;
|
|
|
+ this.form.showAddress = e.address;
|
|
|
this.region.latitude = e.location.lat;
|
|
|
this.region.longitude = e.location.lng;
|
|
|
this.$emit("changeAddress", e);
|
|
|
@@ -238,19 +211,16 @@ export default {
|
|
|
anonymityChange() {
|
|
|
this.form.anonymity = this.form.anonymity == 1 ? 0 : 1;
|
|
|
},
|
|
|
- // 省市联动
|
|
|
- openAddres() {
|
|
|
+ selectCityFn() {
|
|
|
this.$refs.simpleAddress.open();
|
|
|
},
|
|
|
- onCityConfirm(e) {
|
|
|
- this.form.address = e.label;
|
|
|
+ getCityConfirm(e) {
|
|
|
this.form.province = e.provinceName;
|
|
|
this.form.city = e.cityName;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.app-delivery-module {
|
|
|
.module-com {
|
|
|
@@ -288,7 +258,6 @@ export default {
|
|
|
@include disFlex(center, center);
|
|
|
background-color: #fff;
|
|
|
padding: 20upx 0;
|
|
|
- // border-top: 1px solid $borderColor;
|
|
|
.button-com {
|
|
|
padding-top: 14upx;
|
|
|
padding-bottom: 10upx;
|
|
|
@@ -311,9 +280,6 @@ export default {
|
|
|
|
|
|
// 匿名派送
|
|
|
.none-name-delivery {
|
|
|
- // padding-left: 30upx;
|
|
|
- // padding: 26upx 30upx;
|
|
|
- // margin-top: 40upx;
|
|
|
margin-bottom: 20upx;
|
|
|
background-color: #fff;
|
|
|
.none-name-text {
|
|
|
@@ -322,4 +288,4 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
shish