下单手机自动填写优化

mall/src/components/app-delivery.vue

@@ -28,10 +28,6 @@
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
         <div class="tui-title">收花人城市</div>
-        <!-- <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>
-        </picker>-->
         <div
           class="tui-input"
           v-if="form.receiveProvince || form.receiveCity"
@@ -41,8 +37,7 @@
       <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
         <div class="tui-title">详细地址</div>
         <div class="tui-input" v-if="form.receiveAddress">{{ form.receiveAddress }}</div>
-        <div class="tui-placeholder" v-else>请选择详细地址</div>
-        <!-- <input v-model="form.receiveFullAddress" placeholder-class="phcolor" class="tui-input" name="receiveFullAddress" placeholder="小区、大厦或街道名称" /> -->
+        <div class="tui-placeholder" v-else>请选择地址</div>
       </tui-list-cell>
       <tui-list-cell class="line-cell" :hover="false">
         <div class="tui-title">门牌号</div>
@@ -58,10 +53,6 @@
     </div>
     <!-- 订花人 -->
     <div class="module-com">
-      <!-- <tui-list-cell class="line-cell" :hover="false">
-				<div class="tui-title">订花人姓名</div>
-				<input v-model="form.bookName" placeholder-class="phcolor" class="tui-input" name="bookName" placeholder="请输入姓名（选填）" />
-      </tui-list-cell>-->
       <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">
@@ -87,10 +78,8 @@
           @click="timeTodaySelFn(2)"
         >晚上</button>
       </div>
-
       <tui-list-cell class="line-cell" :hover="false">
         <div class="tui-title">我的电话</div>
-
         <!-- #ifdef MP-WEIXIN -->
         <input
           v-model="form.bookMobile"
@@ -108,10 +97,10 @@
           @click="showPopup"
           open-type="getPhoneNumber"
           @getphonenumber="getWxMobile"
+          v-if="shopUser.mobile == ''"
           style="padding:12rpx 25rpx;font-size:22rpx;"
         >帮我填</button>
         <!-- #endif -->
-
         <!-- #ifndef MP-WEIXIN -->
         <input
           v-model="form.bookMobile"
@@ -191,7 +180,6 @@
 import { mapGetters } from "vuex";
 import TuiListCell from "@/components/plugin/list-cell";
 import AppDatePicker from "@/components/app-date-picker";
-// import AppTextarea from '@/components/app-textarea'
 import SimpleAddress from "@/components/plugin/simple-address";
 import { getUser, wxLoginFn } from "@/utils/auth";
 import AppAreaSel from "@/components/app-area-sel";
@@ -202,7 +190,6 @@ export default {
     AppAreaSel,
     TuiListCell,
     AppDatePicker,
-    // AppTextarea,
     SimpleAddress
   },
   props: {
@@ -223,7 +210,6 @@ export default {
         receiveAddress: "", // 收花人城市
         receiveFloor: "", // 收花人门楼号和牌号
         receiveFullAddress: "", // 收花人完整地址，从腾讯地图接口获取
-        // bookName: '', // 订花人姓名
         bookMobile: "", // 订花人手机号
         reachTime: 0, // 配送时间
         reachPeriod: "0", // 配送时段，0上午1下午2晚上
@@ -237,14 +223,11 @@ export default {
       },
       // 省市联动
       cityPickerValueDefault: [0, 0]
-      // pickerText: ''
     };
   },
   computed: {
-    ...mapGetters({ orderShop: "getOrderShop" })
-    // regionArr() {
-    // 	return this.$util.isEmpty(this.orderShop) ? [] : this.orderShop.region
-    // }
+    ...mapGetters({ orderShop: "getOrderShop" }),
+    ...mapGetters({ shopUser: "getShopUser" })
   },
   watch: {
     orderShop(val) {
@@ -262,9 +245,9 @@ export default {
         ? this.orderShop.shop.city
         : "";
     }
-    // if (this.anonymous) {
-    this.form.anonymous = "0";
-    // }
+    this.form.anonymous = "0"
+    //自动填写已有手机号
+    this.$set(this.form, "bookMobile", this.shopUser.mobile);
   },
   methods: {
     selTimeFn(e) {
@@ -277,14 +260,6 @@ export default {
         return false;
       }
       this.showRegion = true;
-      // let that = this
-      // uni.chooseLocation({
-      // 	success: res => {
-      // 		this.form.receiveFullAddress = res.address
-      // 		this.region.latitude = res.latitude
-      // 		this.region.longitude = res.longitude
-      // 	}
-      // })
     },
     changeAreaFn(e) {
       console.log("changeAreaFn", e);
@@ -294,7 +269,6 @@ export default {
       this.region.longitude = e.location.lng;
       this.$emit("changeAddress", e);
     },
-    // -----
     timeTodaySelFn(index) {
       this.form.reachPeriod = index;
     },
@@ -314,7 +288,6 @@ export default {
       this.form.receiveAddress = e.label;
       this.form.receiveProvince = e.provinceName;
       this.form.receiveCity = e.cityName;
-      // this.pickerText = JSON.stringify(e)
     },
     // 获取微信手机号
     getWxMobile(e) {
@@ -329,7 +302,6 @@ export default {
             icon: "success"
           });
           this.form.bookMobile = res.data.mobile;
-          //wxLoginFn(true)
         });
       } else {
         this.$msg("获取信息失败！");

mall/src/pages/order/buy.vue

@@ -38,9 +38,9 @@
         <div class="module-det">
           <app-list-module v-if="!$util.isEmpty(goodsInfo)" :info="goodsInfo" />
 
-          <div class="shop-prompt" v-if="!$util.isEmpty(this.orderShop)" @click="showAlert = true">
+          <div class="shop-prompt" v-if="!$util.isEmpty(orderShop)" @click="showAlert = true">
             <div>
-              <span>{{ `运费(${this.orderShop.freight.first}公里)` }}</span>
+              <span>{{ `运费(${showDistance}公里)` }}</span>
               <i class="iconfont iconchangjianwentixiangguanwenti2"></i>
             </div>
             <div>￥{{ freightPrice }}</div>
@@ -48,7 +48,7 @@
 
           <div class="shop-prompt">
             <div>总计</div>
-            <div>￥{{ goodsInfo.price * option.goodsNum }}</div>
+            <div>￥{{ totalPrice() }}</div>
           </div>
         </div>
       </div>
@@ -70,7 +70,7 @@
           <span>应付款</span>
           <span class="app-price">
             <span>￥</span>
-            <span class="app-size-40">{{ totalPrice(123) }}</span>
+            <span class="app-size-40">{{ mayPayAmount() }}</span>
           </span>
         </div>
         <button class="button-com red" formType="submit">确认</button>
@@ -79,11 +79,9 @@
     <!-- 弹窗 -->
     <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
       <div class="alt-content" v-if="!$util.isEmpty(orderShop)">
-        <div>{{ `${orderShop.freight.first}公里内免运费` }}</div>
+        <div><span class="app-price">{{ `${orderShop.freight.first}公里`}}</span>内免运费</div>
         <div>
-          <span>超过</span>
-          <span class="app-price">{{ `${orderShop.freight.first}公里` }}</span>
-          <span>每增加1公里运费加</span>
+          <span>超过每增加1公里运费加</span>
           <span class="app-price">{{ `${orderShop.freight.add}元` }}</span>
         </div>
       </div>
@@ -144,43 +142,54 @@ export default {
       },
       // 自提form
       mentionForm: {
-        bookMobile: ""
+        bookMobile: ''
       },
       discountArr: false,
       // 运费
       freightPrice: 0,
-      goodsNum: 1
+      goodsNum: 1,
+      //显示的距离
+      showDistance:0
     };
   },
   mounted() {},
   computed: {
     ...mapGetters({ orderShop: "getOrderShop" }),
     ...mapGetters({ shopUser: "getShopUser" }),
-    // 计算总金额
+    //计算总金额
     totalPrice() {
       return function() {
         let totalPrice =
-          this.goodsInfo.price * this.goodsNum - this.freightPrice;
+          this.goodsInfo.price * this.goodsNum + this.freightPrice;
+        return totalPrice.toFixed(2);
+      };
+    },
+    //计算应付款
+    mayPayAmount(){
+      return function() {
+        let totalPrice =
+          this.goodsInfo.price * this.goodsNum + this.freightPrice;
         return totalPrice.toFixed(2);
       };
     }
   },
   onLoad(option) {
-    this.goodsNum = option.goodsNum;
-    // this.init()
+    this.goodsNum = option.goodsNum
+    this.$set(this.mentionForm, "bookMobile", this.shopUser.mobile);
   },
   created() {},
   methods: {
     init() {
       let goodsInfo = uni.getStorageSync("buyGoodsDetil");
+
       goodsInfo.price = this.option.goodsStyleId
         ? goodsInfo.goodsStyleList[this.option.selIndex].price
         : goodsInfo.price;
+
       getOrderShop().then(() => {
         this.$refs.couponSel._getUserDiscount().then(status => {
           this.discountArr = status;
         });
-
         if (
           !this.$util.isEmpty(this.$refs.appDelivery.region) &&
           this.$refs.appDelivery.region.latitude
@@ -193,13 +202,17 @@ export default {
           );
         }
       });
+
       getShopUser();
+
       goodsInfo.buyNum = this.option.goodsNum;
       this.goodsInfo = goodsInfo;
+
       // 初始化上个页面带入的值
       Object.keys(this.form).forEach((i, index) => {
         this.form[i] = this.option[i];
       });
+
     },
     // 生成订单
     createOrderFn() {
@@ -243,8 +256,12 @@ export default {
     // 选择地址
     changeAddress(e) {
       // 计算客户距离和运费
-      //this.$refs.appDelivery.region.location
-      getUserDistance({lat:1,lng:20}).then(res => {});
+      let lat = this.$refs.appDelivery.region.latitude
+      let long = this.$refs.appDelivery.region.longitude
+      getUserDistance({lat:lat,lng:long}).then(res => {
+        this.freightPrice = res.data.fee
+        this.showDistance = res.data.showDistance
+      });
     },
     // 表单验证
     formSubmit(e) {