|
|
@@ -0,0 +1,342 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="topNav flex">
|
|
|
+ <image @click="backIndex" class="back" src="../../static/icon/back.png" mode="widthFix"></image>
|
|
|
+ <view class="inputbox flex">
|
|
|
+ <image class="search" src="../../static/icon/search.png" mode="widthFix"></image>
|
|
|
+ <input class="input" confirm-type='搜索' @confirm='searchData' placeholder="请输入城市或者门店" type="text"
|
|
|
+ v-model="search" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <pickerAddress class="" @change="onCityClick">
|
|
|
+ <view class="address flex">
|
|
|
+ <view class="flex">
|
|
|
+ <text class="text">{{province}}</text>
|
|
|
+ <image class="tipButtom" src="../../static/icon/dom.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <text class="text">{{city}}</text>
|
|
|
+ <image class="tipButtom" src="../../static/icon/dom.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <text class="text">{{district}}</text>
|
|
|
+ <image class="tipButtom" src="../../static/icon/dom.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </pickerAddress> -->
|
|
|
+ <scroll-view class="list-scroll-content" scroll-y @scrolltolower="storeList">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <!-- <empty v-if="loaded === true && orderList.length === 0"></empty> -->
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <view class="itemList">
|
|
|
+ <view class="item flex" v-for="(item,index) in orderList" :key='index' @click="onChecked(item)">
|
|
|
+ <view class="imgBox">
|
|
|
+ <image class="logo" :src="item.image" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="padding-l-20 flex-grow-true">
|
|
|
+ <view class="title clamp flex">
|
|
|
+ <view class="name">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="km">
|
|
|
+ {{item.range<1?item.distance+'m':item.range+'km'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex addressBox margin-t-20">
|
|
|
+ <image class="iconA margin-r-10" src="../../static/icon/shop.png" mode="">
|
|
|
+ </image>
|
|
|
+ <text class="clamp">
|
|
|
+ {{item.address}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="addressBox flex">
|
|
|
+ <image class="iconA margin-r-10" src="../../static/icon/shopphone.png" mode="">
|
|
|
+
|
|
|
+ <text class="clamp">
|
|
|
+ {{item.phone}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="yysj">
|
|
|
+ 营业时间：{{item.day_time}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <uni-load-more :status="loadingType"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import {
|
|
|
+ // storeList,
|
|
|
+ // } from '@/api/shop.js';
|
|
|
+ import {
|
|
|
+ mapMutations,
|
|
|
+ mapState
|
|
|
+ } from 'vuex';
|
|
|
+ export default {
|
|
|
+ computed: {
|
|
|
+ ...mapState('user', ['address'])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ search: '', //查询内容
|
|
|
+ loadingType: 'more',
|
|
|
+ orderList: [{
|
|
|
+ name: '强而',
|
|
|
+ range: 5,
|
|
|
+ address: '浙江,台州,椒江区浙江,台州,椒江区',
|
|
|
+ phone: '45845454'
|
|
|
+ }],
|
|
|
+ page: 1, //当前页数
|
|
|
+ limit: 10, //每次信息条数
|
|
|
+ province: '请选择', //省
|
|
|
+ city: '请选择', //市
|
|
|
+ district: '请选择', //区
|
|
|
+ loaded: false,
|
|
|
+ type: 0 //默认为切换商店，1为不切换
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function(option) {
|
|
|
+ console.log(option.type);
|
|
|
+ if (option.type) {
|
|
|
+ this.type = option.type;
|
|
|
+ }
|
|
|
+ // this.storeList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('shop', ['setShopInfo']),
|
|
|
+ toJSON() {
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+ backIndex() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查询方法
|
|
|
+ searchData() {
|
|
|
+ // 初始化数据重新搜索
|
|
|
+ this.loaded = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.orderList = [];
|
|
|
+ this.loadingType = 'more';
|
|
|
+ this.storeList()
|
|
|
+ },
|
|
|
+ // 存储当前的门店
|
|
|
+ onChecked(item) {
|
|
|
+ if (this.type == 0) {
|
|
|
+ this.setShopInfo(item);
|
|
|
+ uni.showToast({
|
|
|
+ title: '切换成功',
|
|
|
+ mask: true,
|
|
|
+ duration: 1500
|
|
|
+ });
|
|
|
+ setTimeout((e) => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ }, 1500)
|
|
|
+ }
|
|
|
+ console.log();
|
|
|
+ if (+this.type == 1) {
|
|
|
+ this.setShopInfo(item);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/shop/shopIndex?id=' + item.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ storeList(source) {
|
|
|
+ //这里是将订单挂载到tab列表下
|
|
|
+ let navItem = this;
|
|
|
+ if (source === 'tabChange' && navItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'loading') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (navItem.loadingType === 'noMore') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 修改当前对象状态为加载中
|
|
|
+ navItem.loadingType = 'loading';
|
|
|
+ let city = `${this.province},${this.city},${this.district}`;
|
|
|
+ if (this.province == '请选择') {
|
|
|
+ city = '';
|
|
|
+ }
|
|
|
+ storeList({
|
|
|
+ city,
|
|
|
+ page: navItem.page,
|
|
|
+ limit: navItem.limit,
|
|
|
+ key: this.search,
|
|
|
+ latitude: this.address.latitude,
|
|
|
+ longitude: this.address.longitude,
|
|
|
+ })
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ let arr = data.list.map(e => {
|
|
|
+ return e;
|
|
|
+ });
|
|
|
+ navItem.orderList = navItem.orderList.concat(arr);
|
|
|
+ // console.log(navItem.orderList);
|
|
|
+ navItem.page++;
|
|
|
+ if (navItem.limit == arr.length) {
|
|
|
+ //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ navItem.loadingType = 'more';
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ //判断是否还有数据， 有改为 more， 没有改为noMore
|
|
|
+ navItem.loadingType = 'noMore';
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ this.$set(navItem, 'loaded', true);
|
|
|
+ console.log(this, '结果');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 内容改变事件
|
|
|
+ onCityClick(item) {
|
|
|
+ const arr = item.data;
|
|
|
+ this.province = arr[0];
|
|
|
+ this.city = arr[1];
|
|
|
+ this.district = arr[2];
|
|
|
+ // 开始查询
|
|
|
+ console.log(this.province, this.city, this.district);
|
|
|
+ console.log(arr);
|
|
|
+ this.searchData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page,
|
|
|
+ .container {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ /* #ifdef APP */
|
|
|
+ .container {
|
|
|
+ padding-top: var(--status-bar-height);
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+
|
|
|
+ .list-scroll-content {
|
|
|
+ height: calc(100% - 44px);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemList {
|
|
|
+ padding: 30rpx $page-row-spacing;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .list,.km{
|
|
|
+ color: $font-color-light;
|
|
|
+ font-size: $font-sm;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ height: 200rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconR {
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconA {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addressBox {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .yysj {
|
|
|
+ width: 239rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipButtom {
|
|
|
+ width: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topNav {
|
|
|
+ height: 44px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 0 15px;
|
|
|
+ /* #ifdef MP */
|
|
|
+ height:calc(44px + var(--status-bar-height)) ;
|
|
|
+ padding-top: calc(var(--status-bar-height) - 15px);
|
|
|
+ /* #endif */
|
|
|
+ .back {
|
|
|
+ width: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inputbox {
|
|
|
+ background-color: $page-color-base;
|
|
|
+ height: 15px;
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 15px;
|
|
|
+ border-radius: 50px;
|
|
|
+ height: 30px;
|
|
|
+ padding-left: 20px;
|
|
|
+ /* #ifdef MP */
|
|
|
+ margin-right: 200rpx;
|
|
|
+ /* #endif */
|
|
|
+ font-size: $font-base;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
