16 changed files with 5084 additions and 4645 deletions
@ -0,0 +1,17 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// api地址
|
||||
|
const api = { |
||||
|
list: 'shop.navCategory/list', |
||||
|
detail: 'shop.navCategory/detail', |
||||
|
} |
||||
|
|
||||
|
// 页面数据
|
||||
|
export function list() { |
||||
|
return request.get(api.list) |
||||
|
} |
||||
|
|
||||
|
// 页面数据
|
||||
|
export function detail(categoryId) { |
||||
|
return request.get(api.detail, {categoryId}) |
||||
|
} |
||||
@ -0,0 +1,244 @@ |
|||||
|
<template> |
||||
|
<view class="container" :style="appThemeStyle"> |
||||
|
<mescroll-body ref="mescrollRef" :sticky="true" :down="{ native: true }" :up="upOption"> |
||||
|
<!-- 页面头部 --> |
||||
|
<view class="header"> |
||||
|
<u-search class="search" v-model="keyword" :placeholder="options.search ? options.search : '搜索店铺'" |
||||
|
@search="getShopList" @custom="getShopList" @clear="getShopList"/> |
||||
|
</view> |
||||
|
<scroll-view scroll-x v-if="cateList.length > 1"> |
||||
|
<view class="cate-filter"> |
||||
|
<u-tag text="全部分类" shape="circle" |
||||
|
@click="changeCategory('all')" |
||||
|
:bgColor="selectedCategoryList.length === cateList.length ? '#9e1a91' : 'transparent'" |
||||
|
:color="selectedCategoryList.length === cateList.length ? 'white' : '#9e1a91'" |
||||
|
borderColor="#9e1a91"/> |
||||
|
<u-tag :text="item.name" shape="circle" plain v-for="(item, index) in cateList" |
||||
|
:key="index" |
||||
|
@click="changeCategory(item.category_id)" |
||||
|
:bgColor="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? '#9e1a91' : 'transparent'" |
||||
|
:color="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? 'white' : '#9e1a91'" |
||||
|
borderColor="#9e1a91"/> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<view class="shop-item" v-for="(item, index) in list.data" :key="index" @click="toDetail(item.shop_id)"> |
||||
|
<image :src="item.logo_url" mode="aspectFill"/> |
||||
|
<view class="content"> |
||||
|
<text class="title">{{ item.shop_name }}</text> |
||||
|
<view class="cate"> |
||||
|
<text class="tips">{{ item.category.name }}</text> |
||||
|
<text class="tips">营业时间:{{ item.shop_hours }}</text> |
||||
|
</view> |
||||
|
<view class="score"> |
||||
|
<u-rate size="25" active-color="#f4a213" :current="item.score" :disabled="true"/> |
||||
|
<view style="font-size: 25rpx;">{{ item.comment_count }}人评价</view> |
||||
|
</view> |
||||
|
<view class="address"> |
||||
|
<text class="tips">{{ item.full_address }}</text> |
||||
|
<view class="sales-wrap"> |
||||
|
<text>销量: {{ item.goods_sales }}</text> |
||||
|
<text>距离: {{ item.distance }}km</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</mescroll-body> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as CategoryApi from '@/api/shop/navCategory/index' |
||||
|
import * as ShopApi from '@/api/shop' |
||||
|
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue' |
||||
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins' |
||||
|
import Search from '@/components/search' |
||||
|
import { |
||||
|
getEmptyPaginateObj, |
||||
|
getMoreListData |
||||
|
} from '@/core/app' |
||||
|
|
||||
|
const pageSize = 15 |
||||
|
export default { |
||||
|
name: "list", |
||||
|
components: { |
||||
|
MescrollBody, |
||||
|
Search, |
||||
|
}, |
||||
|
mixins: [MescrollMixin], |
||||
|
data() { |
||||
|
return { |
||||
|
cateList: [], |
||||
|
selectedCategoryList: [], |
||||
|
upOption: { |
||||
|
// 首次自动执行 |
||||
|
auto: true, |
||||
|
// 每页数据的数量; 默认10 |
||||
|
page: { |
||||
|
size: pageSize |
||||
|
}, |
||||
|
// 数量要大于4条才显示无更多数据 |
||||
|
noMoreSize: 4, |
||||
|
}, |
||||
|
list: getEmptyPaginateObj(), |
||||
|
keyword: '', |
||||
|
latitude: '', |
||||
|
longitude: '', |
||||
|
} |
||||
|
}, |
||||
|
async onLoad(options) { |
||||
|
this.options = options |
||||
|
// await this.getLocation() |
||||
|
await this.getChildCategory(options.shopId) |
||||
|
await this.getShopList(1) |
||||
|
}, |
||||
|
methods: { |
||||
|
async getChildCategory(categoryId) { |
||||
|
const {data: {detail}} = await CategoryApi.detail(categoryId) |
||||
|
this.cateList = JSON.parse(detail.shop_category_list) |
||||
|
this.selectedCategoryList = this.cateList.map(item => parseInt(item.category_id)) |
||||
|
}, |
||||
|
getShopList() { |
||||
|
const app = this |
||||
|
ShopApi.list({ |
||||
|
category_list: this.selectedCategoryList.join(), |
||||
|
keyword: this.keyword, |
||||
|
latitude: this.latitude, |
||||
|
longitude: this.longitude, |
||||
|
}).then(result => { |
||||
|
app.list.data = result.data.list |
||||
|
console.log(app.list.data) |
||||
|
app.mescroll.endBySize(app.list.data.length, app.list.data.length) |
||||
|
}) |
||||
|
.catch(() => this.mescroll.endErr()) |
||||
|
}, |
||||
|
upCallback(page) { |
||||
|
const app = this |
||||
|
// 设置列表数据 |
||||
|
ShopApi.list({ |
||||
|
category_list: this.selectedCategoryList.join() |
||||
|
}).then(list => { |
||||
|
app.mescroll.endBySize(app.list.data.length, app.list.data.length) |
||||
|
}) |
||||
|
.catch(() => this.mescroll.endErr()) |
||||
|
}, |
||||
|
handleSearch() { |
||||
|
}, |
||||
|
changeCategory(cateId) { |
||||
|
if (cateId === 'all') this.selectedCategoryList = this.cateList.map(item => parseInt(item.category_id)) |
||||
|
else this.selectedCategoryList = [parseInt(cateId)] |
||||
|
this.getShopList() |
||||
|
}, |
||||
|
toDetail(shopId) { |
||||
|
this.$navTo('pages/shop/detail', { |
||||
|
shopId |
||||
|
}) |
||||
|
}, |
||||
|
getLocation() { |
||||
|
const _this = this |
||||
|
return new Promise((resolve, reject) => { |
||||
|
uni.getLocation({ |
||||
|
type: 'wgs84', |
||||
|
success: (res) => { |
||||
|
resolve(res) |
||||
|
}, |
||||
|
fail() { |
||||
|
reject() |
||||
|
_this.$toast('获取定位失败，请点击右下角按钮重新尝试定位') |
||||
|
}, |
||||
|
complete: res => { |
||||
|
console.log(res) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.header { |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.cate-filter { |
||||
|
padding: 20rpx 8rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
* { |
||||
|
margin-right: 10rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.shop-item { |
||||
|
background-color: white; |
||||
|
border-radius: 30rpx; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
margin: 20rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
border-radius: 20rpx; |
||||
|
margin-right: 15rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
justify-content: flex-start; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
font-size: 25rpx; |
||||
|
color: gray; |
||||
|
margin: 5rpx 0; |
||||
|
} |
||||
|
|
||||
|
.score { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.cate { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
:first-child { |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.address { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.sales-wrap { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
justify-content: flex-end; |
||||
|
flex-direction: column; |
||||
|
margin-left: 15rpx; |
||||
|
font-size: 25rpx; |
||||
|
flex-shrink: 0; |
||||
|
color: #ef0021; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue