maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
uniapp-ZHSQ/packages/communityService/index/index.vue

337 lines
9.6 KiB
Vue
Raw Blame History

<template>
<view class="headlth">
<view class="swiper">
<swiper>
<swiper-item>
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon1.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"家政保洁",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon2.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"衣物洗护",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon3.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"家电维修",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon4.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"跑腿服务",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon5.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"养车用车",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon6.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"保姆月嫂",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon7.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"家电清洗",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon8.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"搬家拉货",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/doorToDoor/door_icon9.png',
url:"../ServiceMore/ServiceMore",
},
{
name:"家装维修",
img:'https://wechat-img-file.oss-cn-beijing.aliyuncs.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>
Reference in New Issue View Git Blame Copy Permalink