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}) |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -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> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue