834 lines
24 KiB
Vue
834 lines
24 KiB
Vue
|
<template>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="header bg-base" :style="{'padding-top': statusBarHeight+'px'}">
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<view :style="{height: wxBtnHeight + 'px'}"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="positionShow" v-if="!isOpenPosition" @click="goSet">
|
|||
|
|
<view class="flex flex-align-center item">
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
<text class="txt">您未开启位置服务，距离计算不准确，请点击前往开启位置服务</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between">
|
|||
|
|
<text class="iconfont font48 color-w" @tap="openMap"></text>
|
|||
|
|
<view class="search flex flex-align-center bg-w flex-grow">
|
|||
|
|
<view style="position: relative;">
|
|||
|
|
<view class="flex flex-align-center left" @click="showSearchList = !showSearchList">
|
|||
|
|
<text class="font30">{{searchList[searchIndex]}}</text>
|
|||
|
|
<text class="iconfont down"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="searchList" v-if="showSearchList">
|
|||
|
|
<text class="iconfont icon"></text>
|
|||
|
|
<view class="cell">
|
|||
|
|
<text
|
|||
|
|
class="cell-item"
|
|||
|
|
:class="{'color-purple': i === searchIndex}"
|
|||
|
|
v-for="(item, i) in searchList"
|
|||
|
|
:key="i"
|
|||
|
|
@click="selectSearchType(i)">
|
|||
|
|
{{item}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<input type="text" class="font30 color-b6 input flex-grow" confirm-type="search" @confirm="onSearch" v-model="keyWord" placeholder="输入您要搜索的内容" />
|
|||
|
|
<text class="iconfont color-purple font44" @click="onSearch"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="notice">
|
|||
|
|
<text class="iconfont font48 color-w" @tap="jumpToNotice(1, '系统公告')"></text>
|
|||
|
|
<text class="tips" v-if="noticeTotal">{{noticeTotal>99?'99+':noticeTotal}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between font26 color-w">
|
|||
|
|
<text>{{addressName}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 轮播图 -->
|
|||
|
|
<view class="swiper">
|
|||
|
|
<swiper :autoplay="true" indicator-dots class="swiper-wrap">
|
|||
|
|
<swiper-item v-for="(item, i) in swiperList" :key="i">
|
|||
|
|
<view class="swiper-box" @click="advertJump(item.operationCode, item.operationValue)">
|
|||
|
|
<image :src="item.ossUrl" mode="" class="swiper-item" style="border-radius: 20rpx;"></image>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 品质好酒 -->
|
|||
|
|
<view class="flex flex-between color-b6">
|
|||
|
|
<view class="flex flex-align-center font24">
|
|||
|
|
<text class="iconfont font24" style="margin-right: 6rpx;"></text>
|
|||
|
|
<text>品质保证</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-align-center font24">
|
|||
|
|
<text class="iconfont font24" style="margin-right: 6rpx;"></text>
|
|||
|
|
<text>独特送酒服务</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-align-center font24">
|
|||
|
|
<text class="iconfont font24" style="margin-right: 6rpx;"></text>
|
|||
|
|
<text>新社交天堂</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-align-center font24">
|
|||
|
|
<text class="iconfont font24" style="margin-right: 6rpx;"></text>
|
|||
|
|
<text>模式领先</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分类 -->
|
|||
|
|
<view class="clas">
|
|||
|
|
<!-- <image :src="staticUrl + 'home/class/notice.jpg'" mode="widthFix" class="img" @tap="jumpToNotice(2, '公告')"></image> -->
|
|||
|
|
<!-- <image :src="staticUrl + 'home/class/gift.jpg'" mode="widthFix" class="img" @tap="jumpToNew(1, '新人大礼')"></image> -->
|
|||
|
|
<!-- <image :src="staticUrl + 'home/class/alarm.jpg'" mode="widthFix" class="img" @tap="jumpToNew(2, '限时秒杀')"></image> -->
|
|||
|
|
<image :src="staticUrl + 'home/class/settled.jpg'" mode="widthFix" class="img" @tap="jumpToNew(5, '积分大送')"></image>
|
|||
|
|
<image :src="staticUrl + 'home/class/special.jpg'" mode="widthFix" class="img" @tap="jumpToNew(3, '特价商品')"></image>
|
|||
|
|
<image :src="staticUrl + 'home/class/team.jpg'" mode="widthFix" class="img" @tap="jumpToNew(4, '拼团')"></image>
|
|||
|
|
<!-- <image :src="staticUrl + 'home/class/dispatcher.jpg'" mode="widthFix" class="max-img" @tap="$navigateTo('/pages/agent/apply')"></image>
|
|||
|
|
<image :src="staticUrl + 'home/class/business.jpg'" mode="widthFix" class="max-img" @tap="$navigateTo('/pages/merchants/settleIn/step')"></image> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- tabs -->
|
|||
|
|
<view
|
|||
|
|
class="tabs"
|
|||
|
|
:class="{'tabsFixed': tabsFixed}"
|
|||
|
|
:style="{'padding-top': tabsFixed ? (statusBarHeight + wxBtnHeight +'px') : 0}"
|
|||
|
|
id="tabs">
|
|||
|
|
<view class="tab flex flex-center" :class="[current === i ? 'active':'']" v-for="(item, i) in tabs" :key="i" @click="changeTab(i)">
|
|||
|
|
<!-- <image mode="widthFix" v-if="current === i" :src="staticUrl + 'home/tabs/' + item.img + '_use.png'"></image>
|
|||
|
|
<image mode="widthFix" v-else :src="staticUrl + 'home/tabs/' + item.img + '.png'"></image> -->
|
|||
|
|
{{ item.name }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<swiper :current="current" @change="swiperChange" :style="{'height': swiperHeight+statusBarHeight+'px'}">
|
|||
|
|
<!-- 新品推荐 -->
|
|||
|
|
<swiper-item style="height: 100%;">
|
|||
|
|
<scroll-view :show-scrollbar="false" :scroll-y="tabsFixed" class="new" @scrolltolower="currentLoadData()">
|
|||
|
|
<view class="flex flex-center mark">
|
|||
|
|
<text class="iconfont color-w font34"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between bg-w title color-purple" @click="jumpToProduct('新品推荐', 1)">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<!-- <image :src="staticUrl + 'home/tabs/news_icon.png'" mode="" class="icon"></image> -->
|
|||
|
|
<view class="tag bg-base">新</view>
|
|||
|
|
<text class="font32">更多推荐</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="iconfont font48"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="new-item">
|
|||
|
|
<product :list="newProductList" :type="1"></product>
|
|||
|
|
</view>
|
|||
|
|
<uni-load-more :status="loadingType"></uni-load-more>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<!-- 精品推荐 -->
|
|||
|
|
<swiper-item style="height: 100%;">
|
|||
|
|
<scroll-view :show-scrollbar="false" :scroll-y="tabsFixed" class="new" @scrolltolower="currentLoadData()">
|
|||
|
|
<view class="flex flex-center mark" style="margin-left: 118px;">
|
|||
|
|
<text class="iconfont color-w font34"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between bg-w title color-purple" @click="jumpToProduct('精品推荐', 2)">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<!-- <image :src="staticUrl + 'home/tabs/boutique_icon.png'" mode="" class="icon"></image> --> <view class="tag bg-base">精</view>
|
|||
|
|
<text class="font32">金牌推荐</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="iconfont font48"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="new-item">
|
|||
|
|
<product :list="recommendList" :type="2"></product>
|
|||
|
|
</view>
|
|||
|
|
<uni-load-more :status="recommendLoading"></uni-load-more>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
<!-- 附近店铺 -->
|
|||
|
|
<swiper-item style="height: 100%;">
|
|||
|
|
<scroll-view :show-scrollbar="false" :scroll-y="tabsFixed" class="shop" @scrolltolower="currentLoadData()">
|
|||
|
|
<view class="flex flex-center mark" style="margin-left: 236px;">
|
|||
|
|
<text class="iconfont color-w font34"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex flex-between bg-w title color-purple" @click="jumpToStore(null)">
|
|||
|
|
<view class="flex flex-align-center">
|
|||
|
|
<!-- <image :src="staticUrl + 'home/tabs/nearby_icon.png'" mode="" class="icon"></image> -->
|
|||
|
|
<view class="tag bg-base">店</view>
|
|||
|
|
<text class="font32">附近店铺</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="iconfont font48"></text>
|
|||
|
|
</view>
|
|||
|
|
<shop :list="storeEnclosureList"></shop>
|
|||
|
|
<uni-load-more :status="nearbyLoading"></uni-load-more>
|
|||
|
|
</scroll-view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 弹框 -->
|
|||
|
|
<modal v-if="showModal">
|
|||
|
|
<image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
|
|||
|
|
<text class="iconfont color-w font60" style="margin-top: 20rpx;" @click="showModal = false"></text>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<!-- 福利红包 -->
|
|||
|
|
<red-envelopes v-for="(item, i) in redList" :key="i" :data="item" :type="1" :bottom="i === 0 ? 100 : i*80+100"></red-envelopes>
|
|||
|
|
|
|||
|
|
<tabbar></tabbar>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import url from "@/common/http/url.js"
|
|||
|
|
import publics from "@/common/utils/public.js"
|
|||
|
|
import { checkOpenGPSService } from "@/common/utils/index.js"
|
|||
|
|
import product from "./modules/product.vue"
|
|||
|
|
import shop from "./modules/shop.vue"
|
|||
|
|
import modal from "@/components/modal.vue"
|
|||
|
|
import redEnvelopes from "@/components/red-envelopes.vue"
|
|||
|
|
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
|||
|
|
import tabbar from '@/components/tabbar.vue';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: { uniLoadMore, product, shop, modal, redEnvelopes, tabbar },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
staticUrl: this.$staticUrl,
|
|||
|
|
statusBarHeight: getApp().statusBarHeight,
|
|||
|
|
swiperHeight: 0,
|
|||
|
|
swiperList: [
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner1.png')
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner2.png')
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner3.png')
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner4.png')
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner5.png')
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// ossUrl: require('../../static/images/banner1.png')
|
|||
|
|
// }
|
|||
|
|
],
|
|||
|
|
swiperCenterList: [],
|
|||
|
|
searchList: ["商品", "店铺"],
|
|||
|
|
searchIndex: 0,
|
|||
|
|
showSearchList: false,
|
|||
|
|
keyWord: "",
|
|||
|
|
centreSwiperList: [],
|
|||
|
|
current: 0,
|
|||
|
|
tabs: [
|
|||
|
|
{name: '新品推荐', img: 'news'},
|
|||
|
|
{name: '精品推荐', img: 'boutique'},
|
|||
|
|
{name: '附近店铺', img: 'nearby'}
|
|||
|
|
],
|
|||
|
|
tabsTop: 0,
|
|||
|
|
tabsFixed: false,
|
|||
|
|
myAddressData: { // 默认北京
|
|||
|
|
longitude:0,
|
|||
|
|
latitude:0
|
|||
|
|
},
|
|||
|
|
storeEnclosureList: [],
|
|||
|
|
nearbyLoading: "more",
|
|||
|
|
// 精品推荐
|
|||
|
|
recommendList: [],
|
|||
|
|
recommendPageSize: 1,
|
|||
|
|
recommendLoading: 'more',
|
|||
|
|
// 新品推荐
|
|||
|
|
newProductList: [],
|
|||
|
|
pageNum: 1,
|
|||
|
|
loadingType: 'more',
|
|||
|
|
addressName: "",
|
|||
|
|
showModal: false,
|
|||
|
|
advertData: {},
|
|||
|
|
redList: [],
|
|||
|
|
noticeTotal: 0,
|
|||
|
|
isOpenPosition: true,
|
|||
|
|
wxBtnHeight: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
|
|||
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|||
|
|
// #endif
|
|||
|
|
this.swiperHeight = uni.getSystemInfoSync().screenHeight
|
|||
|
|
// 获取新品商品
|
|||
|
|
this.getNewProductList('add')
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
this.getAdvertising()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
let _this = this
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
//是否开启位置权限
|
|||
|
|
checkOpenGPSService(result=>{
|
|||
|
|
_this.isOpenPosition = result
|
|||
|
|
if (result) {
|
|||
|
|
//设置地址
|
|||
|
|
_this.getMyLocation();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
this.getMyLocation()
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// 获取红包信息
|
|||
|
|
this.getRedBagList()
|
|||
|
|
// 获取公告未读数量
|
|||
|
|
this.getNoticeTotal()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.$getRect("#tabs").then(res =>{
|
|||
|
|
this.tabsTop = res.top - 50
|
|||
|
|
})
|
|||
|
|
}, 500)
|
|||
|
|
},
|
|||
|
|
onBackPress(){
|
|||
|
|
//隐藏到后台，不退出app
|
|||
|
|
let main = plus.android.runtimeMainActivity();
|
|||
|
|
main.moveTaskToBack(false);
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
onPageScroll(e){
|
|||
|
|
// 滑动到tabs是固定在顶部
|
|||
|
|
if (e.scrollTop > this.tabsTop) {
|
|||
|
|
this.tabsFixed = true
|
|||
|
|
} else {
|
|||
|
|
this.tabsFixed = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//加载更多
|
|||
|
|
onReachBottom() {
|
|||
|
|
this.currentLoadData()
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh(){
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
this.getAdvertising()
|
|||
|
|
if (this.current === 0) {
|
|||
|
|
this.getNewProductList('refresh');
|
|||
|
|
} else if (this.current === 1) {
|
|||
|
|
this.getBoutiqueList('refresh');
|
|||
|
|
} else {
|
|||
|
|
// 附近的店铺
|
|||
|
|
this.storeEnclosureList = []
|
|||
|
|
this.getStoreEnclosureList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goSet(){
|
|||
|
|
let system = uni.getSystemInfoSync();// 获取系统信息
|
|||
|
|
if (system.platform === 'android') { // 判断平台
|
|||
|
|
var Intent = plus.android.importClass('android.content.Intent');
|
|||
|
|
var Settings = plus.android.importClass('android.provider.Settings');
|
|||
|
|
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
|
|||
|
|
main.startActivity(intent); // 打开系统设置GPS服务页面
|
|||
|
|
|
|||
|
|
} else if (system.platform === 'ios') {
|
|||
|
|
var UIApplication = plus.ios.importClass("UIApplication");
|
|||
|
|
var application2 = UIApplication.sharedApplication();
|
|||
|
|
var NSURL2 = plus.ios.importClass("NSURL");
|
|||
|
|
var setting2 = NSURL2.URLWithString("app-settings:"); // 打开应用权限
|
|||
|
|
application2.openURL(setting2);
|
|||
|
|
plus.ios.deleteObject(setting2);
|
|||
|
|
plus.ios.deleteObject(NSURL2);
|
|||
|
|
plus.ios.deleteObject(application2);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 红包福利
|
|||
|
|
getRedBagList(){
|
|||
|
|
this.$http("GET", url.cms.redEnvelopesList).then(res =>{
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
let data = res.data
|
|||
|
|
data.map(v =>{
|
|||
|
|
v.show = true
|
|||
|
|
})
|
|||
|
|
this.redList = data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取轮播图、弹框
|
|||
|
|
getAdvertising(){
|
|||
|
|
// 首页顶部轮播图
|
|||
|
|
this.$http("GET", url.cms.advertisingMap, {position: 1}).then(res =>{
|
|||
|
|
this.swiperList = res.data
|
|||
|
|
})
|
|||
|
|
// 首页中间轮播图
|
|||
|
|
this.$http("GET", url.cms.advertisingMap, {position: 2}).then(res =>{
|
|||
|
|
this.swiperCenterList = res.data
|
|||
|
|
})
|
|||
|
|
// 首页弹框广告
|
|||
|
|
this.$http("GET", url.cms.advertisingMap, {position: 3}).then(res =>{
|
|||
|
|
if (res.data.length > 0) {
|
|||
|
|
this.advertData = res.data[0]
|
|||
|
|
if (this.advertData.popupMode === 2) {
|
|||
|
|
if (!publics.advertShowToStorage(this.advertData.id)) {
|
|||
|
|
this.showModal = true
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.showModal = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取平台公告未读数量
|
|||
|
|
getNoticeTotal(){
|
|||
|
|
this.$http("GET", url.cms.noticeCount, {type:1, read: 2}).then(res =>{
|
|||
|
|
this.noticeTotal = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
filterImg(img){
|
|||
|
|
return publics.filterImgUrl(img, 3)
|
|||
|
|
},
|
|||
|
|
async getBoutiqueList(type) {
|
|||
|
|
if (type === 'add') {
|
|||
|
|
if (this.recommendLoading === 'nomore') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.recommendLoading = 'loading';
|
|||
|
|
} else {
|
|||
|
|
this.recommendLoading = 'more';
|
|||
|
|
this.recommendList = []
|
|||
|
|
this.recommendPageSize = 1
|
|||
|
|
}
|
|||
|
|
let params = {
|
|||
|
|
pageSize: this.recommendPageSize,
|
|||
|
|
sortComprehensive: 1,
|
|||
|
|
goodsType: 2
|
|||
|
|
};
|
|||
|
|
let res = await this.$http('GET', url.goods.getGoodsList, params);
|
|||
|
|
let list = res.data
|
|||
|
|
let goodsList = list.records;
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
this.recommendList = [];
|
|||
|
|
this.recommendPageSize = 1;
|
|||
|
|
}
|
|||
|
|
this.recommendList = this.recommendList.concat(goodsList);
|
|||
|
|
if(this.recommendList.length < list.total){
|
|||
|
|
this.recommendPageSize++
|
|||
|
|
this.recommendLoading = "more"
|
|||
|
|
} else{
|
|||
|
|
this.recommendLoading = "nomore"
|
|||
|
|
}
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
// 获取新品上市商品
|
|||
|
|
async getNewProductList(type) {
|
|||
|
|
if (type === 'add') {
|
|||
|
|
if (this.loadingType === 'nomore') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.loadingType = 'loading';
|
|||
|
|
} else {
|
|||
|
|
this.loadingType = 'more';
|
|||
|
|
this.newProductList = []
|
|||
|
|
this.pageNum = 1
|
|||
|
|
}
|
|||
|
|
//没有更多直接返回
|
|||
|
|
let params = {
|
|||
|
|
pageSize: this.pageNum,
|
|||
|
|
sortComprehensive: 1,
|
|||
|
|
goodsType: 1,
|
|||
|
|
storeId: 0
|
|||
|
|
};
|
|||
|
|
let res = await this.$http('GET', url.goods.getGoodsList, params);
|
|||
|
|
let list = res.data
|
|||
|
|
this.newProductList = this.newProductList.concat(list.records);
|
|||
|
|
if(this.newProductList.length < list.total){
|
|||
|
|
this.pageNum++;
|
|||
|
|
this.loadingType = "more"
|
|||
|
|
} else{
|
|||
|
|
this.loadingType = "nomore"
|
|||
|
|
}
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
// 获取附近的店铺
|
|||
|
|
async getStoreEnclosureList() {
|
|||
|
|
let params = {
|
|||
|
|
pageNum: this.storeEnclosureList.length,
|
|||
|
|
lng: this.myAddressData.longitude, //经度
|
|||
|
|
lat: this.myAddressData.latitude //纬度
|
|||
|
|
};
|
|||
|
|
let res = await this.$http('GET', url.store.getNearbyStores, params);
|
|||
|
|
this.storeEnclosureList = this.storeEnclosureList.concat(res.data);
|
|||
|
|
this.nearbyLoading = res.data.length < 12 ? 'nomore' : 'more'
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
selectSearchType(i){
|
|||
|
|
this.searchIndex = i
|
|||
|
|
this.showSearchList = false
|
|||
|
|
},
|
|||
|
|
onSearch(){
|
|||
|
|
this.showSearchList = false
|
|||
|
|
let keyWord = this.keyWord
|
|||
|
|
if (this.searchIndex === 0) {// 搜索商品
|
|||
|
|
this.jumpToProduct("商品列表", -1, keyWord)
|
|||
|
|
} else { // 搜索店铺
|
|||
|
|
this.jumpToStore(keyWord)
|
|||
|
|
}
|
|||
|
|
this.keyWord = ""
|
|||
|
|
},
|
|||
|
|
getMyLocation(){
|
|||
|
|
let _this = this;
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'wgs84',
|
|||
|
|
geocode: true,
|
|||
|
|
success: function (res) {
|
|||
|
|
console.log("获取当前位置成功。。。。", res)
|
|||
|
|
//设置地址
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res));
|
|||
|
|
_this.myAddressData = res;
|
|||
|
|
//设置当前位置名称
|
|||
|
|
if (res.address){
|
|||
|
|
_this.addressName = res.address.district+(res.address.poiName||res.address.street);
|
|||
|
|
}
|
|||
|
|
}, fail: function (err) { // 定位权限没开启
|
|||
|
|
console.log('getLocation.error.', err)
|
|||
|
|
// _this.openMap()
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
currentLoadData(){
|
|||
|
|
if (this.current === 0) {
|
|||
|
|
this.getNewProductList('add');
|
|||
|
|
} else if (this.current === 1) {
|
|||
|
|
this.getBoutiqueList('add');
|
|||
|
|
} else {
|
|||
|
|
this.getStoreEnclosureList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
changeTab(index) {
|
|||
|
|
this.current = index
|
|||
|
|
},
|
|||
|
|
swiperChange(e){
|
|||
|
|
this.changeTab(e.detail.current)
|
|||
|
|
this.currentLoadData()
|
|||
|
|
},
|
|||
|
|
openMap(){
|
|||
|
|
let _this = this;
|
|||
|
|
uni.chooseLocation({
|
|||
|
|
latitude: _this.myAddressData.latitude || 39.904989,
|
|||
|
|
longitude: _this.myAddressData.longitude || 116.405285,
|
|||
|
|
success: function(res) {
|
|||
|
|
//设置地址
|
|||
|
|
publics.setMyaddressLngLat(JSON.stringify(res));
|
|||
|
|
_this.myAddressData = res;
|
|||
|
|
//重新加载附近店铺
|
|||
|
|
// _this.getStoreEnclosureList();
|
|||
|
|
if (res.address.indexOf("省") > -1) {
|
|||
|
|
//解析地址，去除省份和市
|
|||
|
|
let reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|||
|
|
let addressMatch = res.address.match(reg);
|
|||
|
|
//设置当前位置名称
|
|||
|
|
let replaseName = "";
|
|||
|
|
for(let i=0;i<addressMatch.length;i++){
|
|||
|
|
replaseName += addressMatch[i];
|
|||
|
|
}
|
|||
|
|
_this.addressName = res.address.replace(replaseName,"");
|
|||
|
|
} else {
|
|||
|
|
_this.addressName = res.address
|
|||
|
|
}
|
|||
|
|
}, fail() {
|
|||
|
|
// _this.$msg("获取位置失败,请检查定位服务是否开启，或持设备到相对开阔的露天场所再次尝试", 8000);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
jumpToNotice(key, title){
|
|||
|
|
this.$navigateTo(`/pages/notice/index?type=${key}&title=${title}`)
|
|||
|
|
},
|
|||
|
|
jumpToProduct(title, goodsType, goodsName) {
|
|||
|
|
this.$navigateTo(`/pages/home/productList?title=${title}&goodsType=${goodsType}&goodsName=${goodsName}`)
|
|||
|
|
},
|
|||
|
|
jumpToNew(type, title){
|
|||
|
|
this.$navigateTo(`/pages/home/newPeopleOrSpecial?type=${type}&title=${title}`)
|
|||
|
|
},
|
|||
|
|
jumpToStore(keyWord){
|
|||
|
|
let path = "/pages/home/storeList"
|
|||
|
|
if (keyWord) {
|
|||
|
|
path = path + "?storeName=" + keyWord
|
|||
|
|
}
|
|||
|
|
this.$navigateTo(path)
|
|||
|
|
},
|
|||
|
|
showToast(){
|
|||
|
|
this.$msg("暂未开放，敬请期待～")
|
|||
|
|
},
|
|||
|
|
imgJump(){
|
|||
|
|
this.showModal = false
|
|||
|
|
this.$http("POST", url.cms.clickAdvertisingMap, {id: this.advertData.id})
|
|||
|
|
this.advertJump(this.advertData.operationCode, this.advertData.operationValue)
|
|||
|
|
},
|
|||
|
|
advertJump(code, value){
|
|||
|
|
publics.advertOption(code, value)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.tag {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
padding: 0 6rpx;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
.main{
|
|||
|
|
background-color: #f4f5f6;
|
|||
|
|
}
|
|||
|
|
.positionShow{
|
|||
|
|
height: 100rpx;
|
|||
|
|
width: 750rpx;
|
|||
|
|
// position: fixed;
|
|||
|
|
// top: 80rpx;
|
|||
|
|
// left: 0;
|
|||
|
|
// right: 0;
|
|||
|
|
margin-left: -30rpx;
|
|||
|
|
background-color: #fceeed;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.item{
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
}
|
|||
|
|
.txt{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
.icon{
|
|||
|
|
color: #f55556;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.header{
|
|||
|
|
border-radius: 0 0 40% 40%;
|
|||
|
|
padding: 0 30rpx 200rpx;
|
|||
|
|
|
|||
|
|
.search{
|
|||
|
|
margin: 20rpx 30rpx 10rpx;
|
|||
|
|
padding: 16rpx 20rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
.left{
|
|||
|
|
border-right: 2rpx solid #EEEEEE;
|
|||
|
|
color: #333;
|
|||
|
|
padding-right: 10rpx;
|
|||
|
|
.down{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-top: 6rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.searchList{
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 9999;
|
|||
|
|
left: -50rpx;
|
|||
|
|
.icon{
|
|||
|
|
transform: scaleY(-1);
|
|||
|
|
color: white;
|
|||
|
|
margin-bottom: -10rpx;
|
|||
|
|
}
|
|||
|
|
.cell{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-shadow: 0rpx 0rpx 4rpx #FFFFFF;
|
|||
|
|
&-item{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
border-bottom: 2rpx solid #fbf9fc;
|
|||
|
|
}
|
|||
|
|
&-item:last-child{
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.input{
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
width: 300rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.notice{
|
|||
|
|
position: relative;
|
|||
|
|
.tips{
|
|||
|
|
position: absolute;
|
|||
|
|
right: -20rpx;
|
|||
|
|
top: -20rpx;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 0 14rpx;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
z-index: 9;
|
|||
|
|
background-color: #CA0400;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.swiper{
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 280rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
margin-top: -180rpx;
|
|||
|
|
&-wrap{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
&-box{
|
|||
|
|
width: 710rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
&-item{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
.grid{
|
|||
|
|
margin: 10rpx 0 10rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 20rpx 0 30rpx;
|
|||
|
|
&-item{
|
|||
|
|
width: 33.33%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
.icon{
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.clas{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
.img{
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
width: 230rpx;
|
|||
|
|
}
|
|||
|
|
.max-img{
|
|||
|
|
width: 350rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.centreSwiper{
|
|||
|
|
margin-bottom: 26rpx;
|
|||
|
|
.wrap{
|
|||
|
|
height: 180rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
&-item{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tabs{
|
|||
|
|
margin-bottom: 6rpx;
|
|||
|
|
transform: 0.5s;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.tab{
|
|||
|
|
width: 27%;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background-color: #F8D247;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
&.active {
|
|||
|
|
opacity: 1;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
.txt{
|
|||
|
|
padding-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
color: #F8D247;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
}
|
|||
|
|
.active.txt{
|
|||
|
|
border-bottom: 8rpx solid #b90000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tabsFixed{
|
|||
|
|
background-color: white;
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 99;
|
|||
|
|
}
|
|||
|
|
.list{
|
|||
|
|
.mark{
|
|||
|
|
width: 236rpx;
|
|||
|
|
margin-bottom: -6rpx;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
box-shadow: 0 0px 10px rgba(0,0,0,0.1);
|
|||
|
|
.icon{
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.new{
|
|||
|
|
height: 100%;
|
|||
|
|
// overflow-y: scroll;
|
|||
|
|
&-item{
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.recommend{
|
|||
|
|
background-color: #6b5aac;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-top: 0;
|
|||
|
|
.pad{
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.shop{
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.custom-view{
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 999;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
</style>
|