<template>
<view class="">
<view class="tabSelect">
<!-- 左边标签栏 -->
<view class="leftCategory">
<!-- 横向滑动 -->
<scroll-view scroll-x="true" style="width: 100%; ">
<view class="tab">
<view class="tabItem" @click="tabCli(item,index)" :class="activeIndex==index?'activeCss':''"
v-for="(item,index) in serverCategoryList" :key="index">{
{
item.name}}
</view>
</view>
</scroll-view>
</view>
<!-- 右边搜索 -->
<view class="rightSearch">
<view class="search" @click="searchCli">
<image class="searchImg" src="../../../static/images/search_my.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="dataNull" v-if="serverList.length==0">
<u-empty mode="data">
</u-empty>
</view>
<!-- 列表部分 start -->
<view class="serverList">
<view @click="shopingItem(item)" class="serverItem" v-for="(item,index) in serverList" :key="index">
<!-- 引入Layout布局 -->
<u-row customStyle="margin-bottom: 10px">
<!-- 图片部分 -->
<u-col span="3">
<view class="sevrviceImg">
<image @click.stop="previewImageCli(item.service_img)"
:src="item.service_img ||'../../../static/inviteFriends/kongImg.png'"></image>
</view>
</u-col>
<!-- 内容部分 -->
<u-col span="6">
<view class="content">
<view class="title">{
{
item.name}}</view>
<view class="time_money">
<view class="time">{
{
item.duration}}分钟</view>
<view class="money">¥{
{
item.price}}</view>
</view>
</view>
</u-col>
<!-- 按钮 -->
<u-col span="3">
<view class="btn_person">
<view class="btn" @click.stop="appointmentCli(item.id)">
预约
</view>
<view class="person">{
{
item.server_total}}人预约过</view>
</view>
</u-col>
</u-row>
<!-- 线条 -->
<view class="uline">
<u-line></u-line>
</view>
</view>
</view>
<!-- 列表部分 end -->
<!-- 加载动态 -->
<view v-if="serverList.length>=data.limit">
<uni-load-more :status="status" />
</view>
<!-- 预约方式弹窗 -->
<uni-popup ref="appointmentPopup" type="center">
<!-- 选择方式组件 -->
<selectMode @cancle="selectModeClose"
@appointment_store="appointment_store"
@appointment_door="appointment_door"></selectMode>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
//加载动态
status: 'more',
//默认选中的标签为第一项
activeIndex: 0,
//标签列表
serverCategoryList: [{
name: "全部"
}],
//传入的参数
data: {
name: "",
category_id: 0,
page: 1,
limit: 10
},
//服务id
serverId:0,
//服务列表
serverList: []
};
},
onLoad() {
this.$forceUpdate();
// 调用服务列表
this.getServerList(this.data);
//调用服务分类
this.getServerCategory();
},
//挂载之前把数据传入
beforeMount() {
},
//下拉刷新
onPullDownRefresh() {
this.data.page=1;
let that=this;
setTimeout(function(){
that.getServerList(that.data);
wx.stopPullDownRefresh();
},200)
},
// 上拉加载
onReachBottom() {
this.data.page++;
let that=this;
//加载中
that.status="loading";
setTimeout(function(){
that.getServerList(that.data);
},200)
},
methods: {
appointmentCli(id){
//打开预约弹窗
this.$refs.appointmentPopup.open();
this.serverId=id;
},
//预约上门
appointment_door(){
//跳转关闭弹窗
this.selectModeClose();
setTimeout(()=>{
uni.navigateTo({
url:"../appointment_to_door/appointment_to_door?id="+this.serverId
})
},200)
},
//预约到店
appointment_store(){
//跳转关闭弹窗
this.selectModeClose();
setTimeout(()=>{
uni.navigateTo({
url:"../appointment_to_store/appointment_to_store?id="+this.serverId
})
},200)
},
//关闭窗口
selectModeClose(){
//关闭预约弹窗
this.$refs.appointmentPopup.close();
},
//预览图片
previewImageCli(img) {
this.$helpApi.previewImage(img);
},
//得到服务分类
getServerCategory() {
let that = this;
getApp().globalData.sendRequest({
url: "/Xdd/getServerCategory",
type: "post",
success: res => {
console.log(res, "服务分类");
if (res.status == 1) {
//数组组合
that.serverCategoryList = that.serverCategoryList.concat(res.data);
}
}
})
},
// 得到服务列表
getServerList(data) {
let that = this;
getApp().globalData.sendRequest({
url: "/Xdd/getServerList",
data: data,
type: "post",
success: res => {
console.log(res, "服务列表");
//初始加载更多
that.status="more";
if (res.status == 1) {
const sumPage=Math.ceil(res.data.data.count/data.limit);
console.log(Math.ceil(res.data.data.count/data.limit),"获得总页数");
if(data.page==1){
that.serverList = res.data.data.list;
}else if(data.page<=sumPage){
that.serverList = that.serverList.concat(res.data.data.list);
}else{
//页数停止加1
that.data.page=sumPage;
//修改状态没有更多了
that.status="noMore";
}
}
}
})
},
//标签的点击事件
tabCli(item, index) {
this.activeIndex = index;
this.data.page=1;
this.data.category_id = item.id;
this.getServerList(this.data);
},
//搜索商品
searchCli() {
uni.navigateTo({
url: "../searchShoping/searchShoping"
})
},
//查看商品详情
shopingItem(item) {
uni.navigateTo({
url: "../shopingDetails/shopingDetails?id="+item.id
})
}
}
}
</script>
<style lang="scss">
@import "./service.scss";
</style>
完整的unapp分页
猜你喜欢
转载自blog.csdn.net/weixin_45932157/article/details/124278605
今日推荐
周排行