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