【新增】自提门店选择

pages.json

@@ -307,6 +307,18 @@
 						"title": "编辑地址"
 					}
 				},
+                {
+                  "path": "goods_details_store/index",
+                  "style": {
+                    "navigationBarTitleText": "自提门店"
+                  },
+                  "meta": {
+                    "auth": true,
+                    "sync": true,
+                    "title": "地址管理",
+                    "group": "用户中心"
+                  }
+                },
 				{
 					"path": "wallet/money",
 					"style": {

pages/order/addressSelection.vue

@@ -0,0 +1,241 @@
+<template>
+  <view class="allAddress" :style="state.isPickUp ? '':'padding-top:10rpx;'">
+    <view class="nav flex flex-wrap">
+      <view class="item font-color" :class="state.deliveryType === 1 ? 'on' : 'on2'"
+            @tap="switchDeliveryType(1)" v-if='state.isPickUp' />
+      <view class="item font-color" :class="state.deliveryType === 2 ? 'on' : 'on2'"
+            @tap="switchDeliveryType(2)" v-if='state.isPickUp' />
+    </view>
+    <!-- 收货地址的选择 -->
+    <view class='address flex flex-wrap flex-center ss-row-between' @tap='onSelectAddress' v-if='state.deliveryType === 1'
+          :style="state.isPickUp ? '':'border-top-left-radius: 14rpx;border-top-right-radius: 14rpx;'">
+      <view class='addressCon' v-if="state.addressInfo.name">
+        <view class='name'>{{ state.addressInfo.name }}
+          <text class='phone'>{{ state.addressInfo.mobile }}</text>
+        </view>
+        <view class="flex flex-wrap">
+          <text class='default font-color' v-if="state.addressInfo.defaultStatus">[默认]</text>
+          <text class="line2">{{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}</text>
+        </view>
+      </view>
+      <view class='addressCon' v-else>
+        <view class='setaddress'>设置收货地址</view>
+      </view>
+      <view class='iconfont'>
+        <view class="ss-rest-button">
+          <text class="_icon-forward" />
+        </view>
+      </view>
+    </view>
+    <!-- 门店的选择 -->
+    <view class='address flex flex-wrap flex-center ss-row-between' v-else @tap="onSelectAddress">
+        <view class='addressCon' v-if="state.pickUpInfo.name">
+          <view class='name'>{{ state.pickUpInfo.name }}
+            <text class='phone'>{{ state.pickUpInfo.phone }}</text>
+          </view>
+          <view class="line1"> {{ state.pickUpInfo.areaName }}{{ ', ' + state.pickUpInfo.detailAddress }}
+          </view>
+        </view>
+        <view class='addressCon' v-else>
+          <view class='setaddress'>选择自提门店</view>
+        </view>
+        <view class='iconfont'>
+          <view class="ss-rest-button">
+            <text class="_icon-forward" />
+          </view>
+        </view>
+    </view>
+    <view class='line'>
+      <image :src="sheep.$url.static('/static/images/line.png', 'local')"></image>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import sheep from '@/sheep';
+  import { isEmpty } from 'lodash';
+
+  const state = reactive({
+    addressInfo: {}, // 选择的收货地址
+    deliveryType: 1, // 收货方式 1 - 快递配送；2 - 门店自提
+    isPickUp: true, // 门店自提是否开启 TODO puhui999: 默认开启，看看后端有开关的话接入
+    pickUpInfo: {}, // 选择的自提门店信息
+  });
+
+  // 选择地址
+  function onSelectAddress() {
+    let emitName = 'SELECT_ADDRESS'
+    let addressPage = '/pages/user/address/list'
+    if (state.deliveryType === 2){
+      emitName = 'SELECT_PICK_UP_INFO'
+      addressPage = '/pages/user/goods_details_store/index'
+    }
+    uni.$once(emitName, (e) => {
+      changeConsignee(e.addressInfo);
+    });
+    sheep.$router.go(addressPage);
+  }
+
+  // 更改收货人地址&计算订单信息
+  async function changeConsignee(addressInfo = {}) {
+    if (!isEmpty(addressInfo)) {
+      if (state.deliveryType === 1){
+        state.addressInfo = addressInfo;
+      }
+      if (state.deliveryType === 2){
+        state.pickUpInfo = addressInfo;
+      }
+    }
+  }
+
+  // 收货方式切换
+  const switchDeliveryType = (type) =>{
+    state.deliveryType = type;
+  }
+</script>
+
+<style scoped lang="scss">
+  .allAddress .font-color{
+    color: #E93323!important
+  }
+  .line2{
+    width: 504rpx;
+  }
+  .textR {
+    text-align: right;
+  }
+
+  .line {
+    width: 100%;
+    height: 3rpx;
+  }
+
+  .line image {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .address {
+    padding: 28rpx;
+    background-color: #fff;
+    box-sizing: border-box;
+  }
+
+  .address .addressCon {
+    width: 596rpx;
+    font-size: 26rpx;
+    color: #666;
+  }
+
+  .address .addressCon .name {
+    font-size: 30rpx;
+    color: #282828;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+  }
+
+  .address .addressCon .name .phone {
+    margin-left: 50rpx;
+  }
+
+  .address .addressCon .default {
+    margin-right: 12rpx;
+  }
+
+  .address .addressCon .setaddress {
+    color: #333;
+    font-size: 28rpx;
+  }
+
+  .address .iconfont {
+    font-size: 35rpx;
+    color: #707070;
+  }
+
+  .allAddress {
+    width: 100%;
+    background: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: -webkit-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    // background-image: -moz-linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
+    //padding: 100rpx 30rpx 0 30rpx;
+    padding-top: 100rpx;
+    padding-bottom: 10rpx;
+  }
+
+  .allAddress .nav {
+    width: 690rpx;
+    margin: 0 auto;
+  }
+
+  .allAddress .nav .item {
+    width: 334rpx;
+  }
+
+  .allAddress .nav .item.on {
+    position: relative;
+    width: 230rpx;
+  }
+
+  .allAddress .nav .item.on::before {
+    position: absolute;
+    bottom: 0;
+    content: "快递配送";
+    font-size: 28rpx;
+    display: block;
+    height: 0;
+    width: 336rpx;
+    border-width: 0 20rpx 80rpx 0;
+    border-style: none solid solid;
+    border-color: transparent transparent #fff;
+    z-index: 2;
+    border-radius: 14rpx 36rpx 0 0;
+    text-align: center;
+    line-height: 80rpx;
+  }
+
+  .allAddress .nav .item:nth-of-type(2).on::before {
+    content: "到店自提";
+    border-width: 0 0 80rpx 20rpx;
+    border-radius: 36rpx 14rpx 0 0;
+  }
+
+  .allAddress .nav .item.on2 {
+    position: relative;
+  }
+
+  .allAddress .nav .item.on2::before {
+    position: absolute;
+    bottom: 0;
+    content: "到店自提";
+    font-size: 28rpx;
+    display: block;
+    height: 0;
+    width: 401rpx;
+    border-width: 0 0 60rpx 60rpx;
+    border-style: none solid solid;
+    border-color: transparent transparent #f7c1bd;
+    border-radius: 36rpx 14rpx 0 0;
+    text-align: center;
+    line-height: 60rpx;
+  }
+
+  .allAddress .nav .item:nth-of-type(1).on2::before {
+    content: "快递配送";
+    border-width: 0 60rpx 60rpx 0;
+    border-radius: 14rpx 36rpx 0 0;
+  }
+
+  .allAddress .address {
+    width: 690rpx;
+    max-height: 180rpx;
+    margin: 0 auto;
+  }
+
+  .allAddress .line {
+    width: 100%;
+    margin: 0 auto;
+  }
+</style>

pages/order/confirm.vue

@@ -1,13 +1,7 @@
 <template>
   <s-layout title="确认订单">
-    <!-- TODO：这个判断先删除 v-if="state.orderInfo.need_address === 1" -->
-    <view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
-      <s-address-item :item="state.addressInfo" :hasBorderBottom="false">
-        <view class="ss-rest-button">
-          <text class="_icon-forward" />
-        </view>
-      </s-address-item>
-    </view>
+    <!-- 头部地址选择【配送地址】【自提地址】 -->
+    <AddressSelection></AddressSelection>
 
     <!-- 商品信息 -->
     <view class="order-card-box ss-m-b-14">
@@ -161,6 +155,7 @@
 <script setup>
   import { reactive } from 'vue';
   import { onLoad } from '@dcloudio/uni-app';
+  import AddressSelection from '@/pages/order/addressSelection.vue';
   import sheep from '@/sheep';
   import { isEmpty } from 'lodash';
   import OrderApi from '@/sheep/api/trade/order';

pages/user/goods_details_store/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <view class="storeBox" ref="container">
+    <view class="storeBox-box" v-for="(item, index) in state.storeList" :key="index" @tap="checked(item)">
+      <view class="store-img">
+        <image :src="item.logo" class="img"/>
+      </view>
+      <view class="store-cent-left">
+        <view class="store-name">{{ item.name }}</view>
+        <view class="store-address line1">
+          {{ item.areaName }}{{ ', ' + item.detailAddress }}
+        </view>
+      </view>
+      <view class="row-right ss-flex-col ss-col-center">
+        <view>
+          <!-- #ifdef H5 -->
+          <a class="store-phone" :href="'tel:' + item.phone">
+            <view class="iconfont">
+              <view class="ss-rest-button">
+                <text class="_icon-forward" />
+              </view>
+            </view>
+          </a>
+          <!-- #endif -->
+          <!-- #ifdef MP -->
+          <view class="store-phone" @click="call(item.phone)">
+            <view class="iconfont">
+              <view class="ss-rest-button">
+                <text class="_icon-forward" />
+              </view>
+            </view>
+          </view>
+          <!-- #endif -->
+        </view>
+        <view class="store-distance ss-flex ss-row-center" @tap="showMaoLocation(item)">
+          <text class="addressTxt" v-if="item.distance">距离{{ item.distance.toFixed(2) }}千米</text>
+          <text class="addressTxt" v-else>查看地图</text>
+          <view class="iconfont">
+            <view class="ss-rest-button">
+              <text class="_icon-forward" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import DeliveryApi from '@/sheep/api/trade/delivery';
+  import { onMounted, reactive } from 'vue';
+  import { onLoad } from '@dcloudio/uni-app';
+  import sheep from '@/sheep';
+
+  const LONGITUDE = 'user_longitude';
+  const LATITUDE = 'user_latitude';
+  const MAPKEY = 'mapKey';
+  const state = reactive({
+    loaded: false,
+    loading: false,
+    storeList: [],
+    system_store: {},
+    // mapKey: cookie.get(MAPKEY),
+    locationShow: false,
+    user_latitude: 0,
+    user_longitude: 0,
+  });
+
+  const call = (phone) => {
+    uni.makePhoneCall({
+      phoneNumber: phone,
+    });
+  };
+  const selfLocation = () => {
+    // TODO h5 地图
+    // #ifdef H5
+    // if (state.$wechat.isWeixin()) {
+    //   state.$wechat.location().then(res => {
+    //     state.user_latitude = res.latitude;
+    //     state.user_longitude = res.longitude;
+    //     uni.setStorageSync(LATITUDE, res.latitude);
+    //     uni.setStorageSync(LONGITUDE, res.longitude);
+    //     getList();
+    //   });
+    // } else {
+      // #endif
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          try {
+            state.user_latitude = res.latitude;
+            state.user_longitude = res.longitude;
+            uni.setStorageSync(LATITUDE, res.latitude);
+            uni.setStorageSync(LONGITUDE, res.longitude);
+          } catch {
+          }
+          getList();
+        },
+        complete: () => {
+          getList();
+        },
+      });
+      // #ifdef H5
+    // }
+    // #endif
+  };
+  const showMaoLocation = (e) => {
+    // TODO h5 地图
+    // #ifdef H5
+    // if (state.$wechat.isWeixin()) {
+    //   state.$wechat.seeLocation({
+    //     latitude: Number(e.latitude),
+    //     longitude: Number(e.longitude),
+    //   }).then(res => {
+    //     console.log('success');
+    //   });
+    // } else {
+      // #endif
+      uni.openLocation({
+        latitude: Number(e.latitude),
+        longitude: Number(e.longitude),
+        name: e.name,
+        address: `${e.areaName}-${e.detailAddress}`,
+        success: function() {
+          console.log('success');
+        },
+      });
+      // #ifdef H5
+    // }
+    // #endif
+  };
+
+  /**
+   * 选中门店
+   */
+  const checked = (addressInfo) => {
+    uni.$emit('SELECT_PICK_UP_INFO', {
+      addressInfo
+    });
+    sheep.$router.back();
+  };
+
+  /**
+   * 获取门店列表数据
+   */
+  const getList = async () => {
+    if (state.loading || state.loaded) {
+      return;
+    }
+    state.loading = true;
+    const { data, code } = await DeliveryApi.getDeliveryPickUpStoreList({
+      latitude: state.user_latitude,
+      longitude: state.user_longitude,
+    });
+    if (code !== 0) {
+      return;
+    }
+    state.loading = false;
+    state.storeList = data;
+  };
+
+  onMounted(() => {
+    if (state.user_latitude && state.user_longitude) {
+      getList();
+    } else {
+      selfLocation();
+      getList();
+    }
+  });
+  onLoad(() => {
+    try {
+      state.user_latitude = uni.getStorageSync(LATITUDE);
+      state.user_longitude = uni.getStorageSync(LONGITUDE);
+    } catch (e) {
+      // error
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .line1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
+
+  .geoPage {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: 10000;
+  }
+
+  .storeBox {
+    width: 100%;
+    background-color: #fff;
+    padding: 0 30rpx;
+  }
+
+  .storeBox-box {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    padding: 23rpx 0;
+    justify-content: space-between;
+    border-bottom: 1px solid #eee;
+  }
+
+  .store-cent {
+    display: flex;
+    align-items: center;
+    width: 80%;
+  }
+
+  .store-cent-left {
+    //width: 45%;
+    flex: 2;
+  }
+
+  .store-img {
+    flex: 1;
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 6rpx;
+    margin-right: 22rpx;
+  }
+
+  .store-img .img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .store-name {
+    color: #282828;
+    font-size: 30rpx;
+    margin-bottom: 22rpx;
+    font-weight: 800;
+  }
+
+  .store-address {
+    color: #666666;
+    font-size: 24rpx;
+  }
+
+  .store-phone {
+    width: 50rpx;
+    height: 50rpx;
+    color: #fff;
+    border-radius: 50%;
+    display: block;
+    text-align: center;
+    line-height: 48rpx;
+    background-color: #e83323;
+    margin-bottom: 22rpx;
+    text-decoration: none;
+  }
+
+  .store-distance {
+    font-size: 22rpx;
+    color: #e83323;
+  }
+
+  .iconfont {
+    font-size: 20rpx;
+  }
+
+  .row-right {
+    flex: 2;
+    //display: flex;
+    //flex-direction: column;
+    //align-items: flex-end;
+    //width: 33.5%;
+  }
+</style>

sheep/api/trade/delivery.js

@@ -7,6 +7,14 @@ const DeliveryApi = {
       url: `/trade/delivery/express/list`,
       method: 'get',
     });
+  },
+  // 获得自提门店列表
+  getDeliveryPickUpStoreList: (params) => {
+    return request({
+      url: `/trade/delivery/pick-up-store/list`,
+      method: 'GET',
+      params
+    });
   }
 };