337 lines
9.2 KiB
Vue
337 lines
9.2 KiB
Vue
<template>
|
|
<view class="headlth">
|
|
<view class="swiper">
|
|
<swiper>
|
|
<swiper-item>
|
|
<image src="https://static.hshuishang.com/doorToDoor/door_img.png" mode="" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<view class="tabList">
|
|
<view class="tabItem" v-for="(item, index ) in cateList" :key="index" @click="jump(item.cate_id)">
|
|
<view class="tabImg">
|
|
<image :src="item.photo" mode="heightFix" />
|
|
</view>
|
|
<view class="tabName">
|
|
{{item.cate_name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="gray"></view>
|
|
|
|
<view class="tit">
|
|
热门服务
|
|
</view>
|
|
|
|
<view class="serviceTag">
|
|
<view class="serviceTagItem" @click="jump">
|
|
<view class="serviceTagItem_name">家政保洁</view>
|
|
<view class="serviceTagItem_img1">
|
|
<image src="https://static.hshuishang.com/doorToDoor/hot1.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
<view class="serviceTagItem item2" @click="jump">
|
|
<view class="serviceTagItem_name">专业保姆</view>
|
|
<view class="serviceTagItem_img2">
|
|
<image src="https://static.hshuishang.com/doorToDoor/hot2.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
<view class="serviceTagItem item3" @click="jump">
|
|
<view class="serviceTagItem_name">家电维修</view>
|
|
<view class="serviceTagItem_img3">
|
|
<image src="https://static.hshuishang.com/doorToDoor/hot3.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
<view class="serviceTagItem item4" @click="jump">
|
|
<view class="serviceTagItem_name">搬家拉货</view>
|
|
<view class="serviceTagItem_img4">
|
|
<image src="https://static.hshuishang.com/doorToDoor/hot4.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="gray"></view>
|
|
|
|
<view class="tabs">
|
|
<view :class="['tab', tabIndex == '0' ? 'active' : '']" @click="changeTab" data-tab="0">服务列表</view>
|
|
<view :class="['tab', tabIndex == '1' ? 'active' : '']" @click="changeTab" data-tab="1">商户列表</view>
|
|
</view>
|
|
|
|
<view class="list" v-if="tabIndex == 0">
|
|
<view :class="['list_item', index === serverList.length - 1 && 'no_border']" v-for="(item, index) in serverList" :key="index">
|
|
<view class="item_tit">
|
|
<view class="item_tit_left">{{item.cate_name}}</view>
|
|
<view class="item_tit_right" @click="jump(item.cate_id)">
|
|
更多
|
|
<image src="https://static.hshuishang.com/water_filter/filter_more.png" mode="" />
|
|
</view>
|
|
</view>
|
|
<view class="item_goodsList">
|
|
<scroll-view scroll-x="true" class="scrollView">
|
|
<view class="item_goodsItem" v-for="(items, index) in item.appoints" :key="index" @click.stop="headerItemClick" :data-id="items.appoint_id">
|
|
<view class="item_goodsItem_tit">
|
|
<image :src="items.photo" mode="aspectFill" />
|
|
</view>
|
|
<view class="item_goodsItem_name">{{items.title}}</view>
|
|
<view class="item_goodsItem_msg">
|
|
￥
|
|
<view>{{items.price}}</view>
|
|
<text>/{{items.unit}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="merchantList" v-if="tabIndex == 1">
|
|
<view class="merchantItem" v-for="(item, index) in goodsList" :key="index" @click="headerShopClick(item.shop_id)">
|
|
<view class="merchantItem_left">
|
|
<view class="merchantItem_left_img">
|
|
<image :src="item.photo" mode="widthFix" />
|
|
</view>
|
|
<view class="merchantItem_left_msg">
|
|
<view class="merchantItem_left_msg_tit">{{item.shop_name}}</view>
|
|
<view class="merchantItem_left_msg_add">{{item.addr}}</view>
|
|
<view class="merchantItem_left_msg_msg">中国领先的高科技医疗设备研...</view>
|
|
<view class="merchantItem_left_msg_tag">{{item.tags}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="merchantItem_right" @click.stop="call(item.tel)">
|
|
电话询价
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<nav-footer />
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { NavgateTo, picUrl, request } from '../../../utils/index';
|
|
import { apiArr } from '../../../api/communityService';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList:[{
|
|
name:"服务中心",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon1.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"家政保洁",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon2.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"衣物洗护",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon3.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
|
|
},
|
|
{
|
|
name:"家电维修",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon4.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
|
|
},
|
|
{
|
|
name:"跑腿服务",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon5.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"养车用车",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon6.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"保姆月嫂",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon7.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"家电清洗",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon8.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
|
|
},
|
|
{
|
|
name:"搬家拉货",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon9.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
{
|
|
name:"家装维修",
|
|
img:'https://static.hshuishang.com/doorToDoor/door_icon10.png',
|
|
url:"../ServiceMore/ServiceMore",
|
|
},
|
|
],
|
|
tabIndex:"0",
|
|
page_num:1,
|
|
page_size:10,
|
|
flag:false,
|
|
flag2:false,
|
|
serverList:[],//服务列表
|
|
cateList:[],
|
|
flag:false,
|
|
HotCate:'',
|
|
|
|
goodsList:[],//商家列表
|
|
}
|
|
},
|
|
methods: {
|
|
async getCateList() {
|
|
const res = await request(apiArr.getCateList, 'POST', {
|
|
page_num: this.page_num,
|
|
page_size: this.page_size,
|
|
area: uni.getStorageSync('city')
|
|
})
|
|
let flag = false
|
|
console.log(res, 'res');
|
|
if (res.rows && res.rows.length == this.page_size) {
|
|
flag = true
|
|
} else {
|
|
flag = false
|
|
}
|
|
res.rows && res.rows.forEach(item => {
|
|
item.photo = item.photo ? picUrl + item.photo : '';
|
|
item.appoints.forEach(items => {
|
|
items.photo = picUrl + items.photo
|
|
})
|
|
})
|
|
console.log(res, 'reresss');
|
|
this.serverList = this.serverList.concat(res.rows || []);
|
|
this.cateList = res.rows || [];
|
|
this.flag = flag;
|
|
this.page_num = this.page_num + 1;
|
|
},
|
|
|
|
// 热门服务模块， 目前改接口并未使用，热门模块写死展示
|
|
async getHotCate(){
|
|
const res = await request(apiArr.getHotCate, 'POST', {});
|
|
console.log('getHotCategetHotCate', res);
|
|
this.HotCate = res;
|
|
},
|
|
|
|
// 获取同城服务列表
|
|
async getAllList(){
|
|
const res = await request(apiArr.getAllList, 'POST', {
|
|
cate_id: 0,
|
|
page_num: 1,
|
|
page_size: 50,
|
|
area: uni.getStorageSync('city')
|
|
})
|
|
|
|
let flag = false
|
|
if(res.rows && res.rows.length == this.page_size){
|
|
flag = true
|
|
}else{
|
|
flag = false
|
|
}
|
|
if(res.rows){
|
|
res.rows.forEach(item=>{
|
|
item.photo = picUrl + item.photo
|
|
})
|
|
}
|
|
this.tabList = res.rows;
|
|
this.flag = flag;
|
|
this.page_num = this.page_num + 1;
|
|
},
|
|
|
|
// 获取商家列表
|
|
async getShopList(){
|
|
const res = await request(apiArr.getShopList, 'POST', {
|
|
page_num: this.page_num,
|
|
page_size: this.page_size
|
|
});
|
|
if(res?.list){
|
|
let flag2 = false
|
|
if(res.list.length == this.page_size){
|
|
flag2 = true
|
|
}else{
|
|
flag2 = false
|
|
}
|
|
res.list.forEach(item=>{
|
|
item.photo = picUrl + item.photo
|
|
});
|
|
this.goodsList = this.goodsList.concat(res.list || []);
|
|
this.flag2 = flag2;
|
|
this.page_num = this.page_num + 1;
|
|
}
|
|
},
|
|
|
|
jump(id){
|
|
NavgateTo(`/packages/communityService/serviceMore/index?id=${id}`);
|
|
},
|
|
|
|
|
|
// tab 切换
|
|
changeTab(e){
|
|
const { tab } = e.currentTarget.dataset;
|
|
this.tabIndex = tab;
|
|
this.page_num = 1;
|
|
this.flag = false;
|
|
this.flag2 = false;
|
|
this.serverList = [];
|
|
this.goodsList = [];
|
|
|
|
if(tab == 0){
|
|
this.getCateList()
|
|
}else{
|
|
this.getShopList()
|
|
}
|
|
},
|
|
|
|
headerItemClick(e) {
|
|
const { id } = e.currentTarget.dataset;
|
|
NavgateTo(`/packages/communityService/reservation/index?id=${id}`);
|
|
},
|
|
|
|
headerShopClick(id){
|
|
NavgateTo(`/packages/communityService/shopDetail/index?id=${id}`);
|
|
},
|
|
|
|
|
|
call(e){
|
|
console.log('11111', e);
|
|
uni.makePhoneCall({
|
|
phoneNumber: e,
|
|
fail(err) {
|
|
console.log('取消拨打', err)
|
|
}
|
|
})
|
|
},
|
|
|
|
},
|
|
onLoad() {
|
|
this.getCateList(); // 获取同城服务分类列表
|
|
this.getAllList(); // 获取同城服务列表
|
|
this.getHotCate(); // 热门服务模块
|
|
this.getShopList(); // 获取商家列表
|
|
},
|
|
onReachBottom() {
|
|
if(this.tabIndex == 0){
|
|
if(this.flag){
|
|
this.getCateList()
|
|
}
|
|
}else{
|
|
if(this.flag2){
|
|
this.getShopList()
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |