diancan_uni/pages/store/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="wrap_nr">
                <view class="store_list">
                    <view :class="item.is_selected ? 'store_item selected' : 'store_item'" @tap="onSelectStore" :data-item="item" v-for="(item, index) in storeList" :key="index">
                        <view class="item_l">
                            <view class="item_name">{{ item.title }}</view>
                            <view class="item_info">
                                <van-icon name="location-o" color="#666666" size="22px" />
                                <view class="wenzi">{{ item.address }}</view>
                            </view>
                            <view class="item_info">
                                <van-icon name="clock-o" color="#666666" size="20px" />
                                <view class="wenzi">{{ item.begin_at + '~' + item.end_at }}</view>
                            </view>
                            <view class="item_info">
                                <van-icon name="phone-o" color="#666666" size="22px" />
                                <view class="wenzi">{{ item.phone }}</view>
                            </view>
                        </view>

                        <view class="item_r">
                            <view class="juli">距您{{ item.distance }}km</view>
                            <image class="store_logo" :src="imgUrl + item.thumb"></image>
                            <view class="desc">去下单</view>
                        </view>

                        <!-- 推荐(距离最近的店) -->

                        <image class="tuijian_icon" src="/static/statics/img/icon_tuijian.png" v-if="item.is_tuijian"></image>

                        <!-- 选中 -->

                        <image class="selected_icon" src="/static/statics/img/icon_selected.png" v-if="item.is_selected"></image>
                    </view>
                </view>
            </view>
        </view>
        <!-- 开启定位提示 -->
        <van-dialog
            class="custom_dialog"
            title="地理位置未授权"
            message="开启羊汤馆小程序定位授权后，可为您推荐就近门店"
            :show="showOpenLocation"
            confirm-button-text="授权定位"
            confirm-button-color="#D54C43"
            show-cancel-button
            @close="onCloseLocation"
            @confirm="onConfirmLocation"
        ></van-dialog>
        <!-- 所选门店不支持的提醒 -->
        <van-dialog
            :title="tipsTitle"
            :message="tipsMessage"
            :show="showTips"
            class="single_btn"
            confirm-button-color="#000000"
            confirmButtonText="我知道了"
            @confirm="closeShowTips"
        ></van-dialog>
        <!-- loading -->
        <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
    </view>
</template>

<script>
// index.js
let myPro = require('../../utils/wxRequest.js');

let util = require('../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            loading: false,

            // 全局loading
            page: 1,

            size: 10,
            finished: false,
            storeList: [],

            // 店列表
            fare_type: 1,

            // 0外卖 1自提   默认自提
            showOpenLocation: false,

            // 开启定位提醒
            showTips: false,

            checkedAddress: null,
            lat: null,
            lng: null,
            store: '',
            tipsTitle: '',
            tipsMessage: '',
            selectStore: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this; // 拒绝定位时,先提醒去开启

        if (getApp().globalData.location_auth == -1) {
            that.setData({
                showOpenLocation: true
            });
        }
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 已选的店

        if (uni.getStorageSync('store')) {
            that.setData({
                store: JSON.parse(uni.getStorageSync('store'))
            });
        } // 获取配送流程

        if (uni.getStorageSync('fare_type')) {
            that.setData({
                fare_type: uni.getStorageSync('fare_type')
            });
        } // 获取配送地址

        if (uni.getStorageSync('checkedAddress')) {
            that.setData({
                checkedAddress: JSON.parse(uni.getStorageSync('checkedAddress'))
            });
        } // 经纬度

        if (that.fare_type == 0 && that.checkedAddress) {
            // 外卖 按收货地址的经纬度
            that.setData({
                lat: that.checkedAddress.lat,
                lng: that.checkedAddress.lnt
            });
        } else {
            // 自取 按定位的经纬度
            that.setData({
                lat: getApp().globalData.lat,
                lng: getApp().globalData.lng
            });
        } // 已定位

        if (getApp().globalData.location_auth == 1) {
            // 已定位
            that.setData({
                page: 1,
                storeList: [],
                finished: false
            });
            that.getStoreList();
        }
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {},
    onReachBottom: function () {
        // Do something when page reach bottom.
        let that = this;

        if (!that.finished) {
            that.getStoreList();
        }
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取店列表
        getStoreList() {
            let that = this;
            let data = {
                lat: that.lat,
                lng: that.lng,
                page: that.page,
                size: that.size
            }; // console.log('参数的经纬度',that.data.lat,that.data.lng);

            myPro
                .wxRequest('user/store/list', 'GET', data)
                .then((res) => {
                    let list = res.result; // 无数据

                    if (that.fare_type == 0 && that.page == 1 && list.length == 0) {
                        that.setData({
                            finished: true,
                            showTips: true,
                            tipsTitle: '抱歉,您的配送地址内暂无可用门店',
                            tipsMessage: '可前往自取或更换地址,不便之处敬请见谅'
                        }); // 清掉所选地址

                        uni.removeStorageSync('checkedAddress');
                    } else if (list.length == 0) {
                        that.setData({
                            finished: true
                        });
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                    } else {
                        // 有数据
                        for (let i in list) {
                            if (i == 0 && that.page == 1) {
                                list[i].is_tuijian = 1; // 推荐距离最近的店
                            }

                            if (that.store) {
                                if (that.store.id == list[i].id) {
                                    list[i].is_selected = 1;
                                }
                            } else {
                                // if(i == 0){
                                // 	list[i].is_selected = 1;
                                // }else{
                                // 	list[i].is_selected = 0;
                                // }
                                list[i].is_selected = 0;
                            }
                        }

                        that.setData({
                            storeList: that.storeList.concat(list),
                            page: that.page + 1
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 主动切换门店
        onSelectStore(event) {
            let that = this;
            let item = event.currentTarget.dataset.item;
            let list = that.storeList;
            let currentObj = null; // 判断点选店铺是否支持所选配送方式

            if (that.fare_type == 0) {
                if (!item.is_delivery) {
                    that.setData({
                        showTips: true,
                        tipsTitle: '抱歉,此门店暂不支持外卖',
                        tipsMessage: '可前往自取或更换地址,不便之处敬请见谅'
                    });
                    return;
                }
            } else {
                if (!item.is_ziti) {
                    that.setData({
                        showTips: true,
                        tipsTitle: '抱歉,此门店暂不支持自取',
                        tipsMessage: '可更换门店,不便之处敬请见谅'
                    });
                    return;
                }
            }

            for (let i in list) {
                if (list[i].id == item.id) {
                    list[i].is_selected = 1;
                    currentObj = list[i];
                } else {
                    list[i].is_selected = 0;
                }
            }

            that.setData({
                storeList: list,
                selectStore: currentObj
            }); // 更新选中门店

            uni.setStorage({
                key: 'store',
                data: JSON.stringify(that.selectStore)
            }); // 判断是否切换门店,如有需清空购物车

            if (that.store && that.store.id != that.selectStore.id) {
                uni.removeStorage({
                    key: 'localCart'
                });
            } // 进入商品选购

            uni.navigateTo({
                url: '/pages/goods/index'
            });
        },

        // 取消授权提醒
        onCloseLocation() {
            let that = this;
            that.setData({
                showOpenLocation: false
            }); // 当是外卖是,进首页

            if (that.fare_type == 0) {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            } else {
                // 这时只能调取到默认的
                getApp().globalData.lat = 0;
                getApp().globalData.lng = 0;
                that.setData({
                    page: 1,
                    storeList: [],
                    finished: false,
                    lat: getApp().globalData.lat,
                    lng: getApp().globalData.lng
                });
                that.getStoreList();
            }
        },

        // 同意去打开地理位置
        onConfirmLocation() {
            let that = this;
            uni.openSetting({
                success: function (res) {
                    console.log(res);
                    let authSetting = res.authSetting;

                    if (authSetting['scope.userLocation']) {
                        // 开启
                        getApp().globalData.getLocal(function () {
                            that.setData({
                                page: 1,
                                storeList: [],
                                finished: false
                            });
                            that.setData({
                                lat: getApp().globalData.lat,
                                lng: getApp().globalData.lng
                            });
                            that.getStoreList();
                        });
                    } else {
                        // 未开启
                        that.setData({
                            showOpenLocation: true
                        });
                    }
                }
            });
        },

        // 关闭提醒
        closeShowTips() {
            let that = this;
            that.setData({
                showTips: false
            });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap_nr {
    padding: 30rpx;
}
.store_item {
    width: 690rpx;
    padding: 40rpx 0;
    margin-top: 30rpx;
    background: #f9f9f9;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    position: relative;
}
.store_item .item_l {
    width: 460rpx;
    padding-left: 30rpx;
    font-size: 26rpx;
    color: #666666;
    border-right: 1rpx solid rgba(216, 169, 115, 0.2);
}
.store_item .item_name {
    font-size: 32rpx;
    color: #0c0c0c;
}
.store_item .item_info {
    display: flex;
    align-items: center;
    margin-top: 26rpx;
}
.store_item .item_info .icon {
    width: 24rpx;
    height: 24rpx;
}
.store_item .item_info .wenzi {
    padding-left: 10rpx;
    width: 340rpx;
}
.store_item .item_r {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.store_item .item_r .juli {
    font-size: 24rpx;
    color: #666666;
    padding: 4rpx 10rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 14rpx;
    position: relative;
}
.store_item .item_r .juli::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -22rpx;
    left: 50%;
    width: 0rpx;
    height: 0rpx;
    border: 12rpx solid transparent;
    border-top: 12rpx solid #ffffff;
}
.store_item .item_r .store_logo {
    width: 60rpx;
    height: 69rpx;
    margin-top: 20rpx;
}
.store_item .item_r .desc {
    font-size: 30rpx;
    color: #0c0c0c;
    padding-top: 12rpx;
}
.store_item .tuijian_icon {
    width: 77rpx;
    height: 74rpx;
    position: absolute;
    top: -5rpx;
    right: -5rpx;
}
.store_item .selected_icon {
    width: 61rpx;
    height: 61rpx;
    position: absolute;
    bottom: -1px;
    right: -1px;
}
/* 选中状态 */
.store_item.selected {
    background: #ffffff;
    border: 1px solid #d54c43;
}
</style>