475 lines
9.3 KiB
Vue
475 lines
9.3 KiB
Vue
<template>
|
|
<view class="service-page">
|
|
<custom-navbar title="工位管理" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>
|
|
<view class="flexed">
|
|
<!-- 搜索框 -->
|
|
<view class="headerBox">
|
|
<view class="search-box">
|
|
<input type="text" class="search-inp" placeholder="工时名称" placeholder-class="placeholder"
|
|
@confirm="getServicesList" v-model="title" />
|
|
<image src="/static/home/search.png" class="search-icon" mode="aspectFit" @click="getServicesList">
|
|
</image>
|
|
</view>
|
|
<view class="addBox" @click="showTip = true">
|
|
<image class="addIcon" src="@/static/images/icons/add_work.png" />
|
|
<text class="addText">添加工位</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态标签 -->
|
|
<view class="tab-container">
|
|
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
|
|
@click="switchTab(index, tab.id)">
|
|
{{ tab.text }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 服务列表 -->
|
|
|
|
<view class="service-list" v-if="services.length != 0 || !services">
|
|
<work-space-card :index="index" :info="item" @viewEdit="viewEdit" @viewList="viewList"
|
|
@viewRemove="viewRemove" @changeSlide="changeSlide" @deletemanHour="deletemanHour"
|
|
v-for="(item, index) in services" :key="index"></work-space-card>
|
|
</view>
|
|
|
|
<!-- 暂无数据 -->
|
|
<noData v-else></noData>
|
|
|
|
|
|
<!-- 加载更多 -->
|
|
<view v-if="hasMore" class="load-more">
|
|
<text>已加载全部</text>
|
|
</view>
|
|
<tipsPopup @okBtn="addService" :show="showTip" @closePopup="showTip = false"></tipsPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "@/utils/request";
|
|
import tipsPopup from "./components/tips-popup.vue";
|
|
import workSpaceCard from "./components/workSpaceCard.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "",
|
|
state: 2,
|
|
currentTab: 0,
|
|
showTip: false,
|
|
tabs: [
|
|
// {
|
|
// id: undefined,
|
|
// text: "全部",
|
|
// },
|
|
{
|
|
id: 2,
|
|
text: "已上架",
|
|
},
|
|
{
|
|
id: 1,
|
|
text: "审核中",
|
|
},
|
|
{
|
|
id: 3,
|
|
text: "下架",
|
|
},
|
|
{
|
|
id: 0,
|
|
text: "草稿",
|
|
},
|
|
{
|
|
id: 4,
|
|
text: "驳回",
|
|
},
|
|
],
|
|
page: 1,
|
|
limit: 10,
|
|
services: [],
|
|
hasMore: false,
|
|
startX: 0,
|
|
moveX: 0,
|
|
currentIndex: -1,
|
|
count: 0,
|
|
isLoad: true, //加载完成
|
|
};
|
|
},
|
|
components: {
|
|
workSpaceCard,
|
|
tipsPopup
|
|
},
|
|
onLoad() {
|
|
console.log("工时管理页面加载");
|
|
this.getServicesList();
|
|
this.getClass();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getServicesList();
|
|
},
|
|
async onReachBottom() {
|
|
console.log("onReachBottom");
|
|
if (this.count <= this.page * this.limit || !this.isLoad) {
|
|
return
|
|
}
|
|
this.page++;
|
|
this.getServicesList(false);
|
|
},
|
|
methods: {
|
|
getServicesList(isRefresh = true) {
|
|
this.isLoad = false
|
|
if (isRefresh) {
|
|
this.page = 1;
|
|
this.limit = 10;
|
|
}
|
|
let url = "/sj/workSeat/list";
|
|
request
|
|
.post(url, {
|
|
state: this.state,
|
|
title: this.title,
|
|
page: this.page,
|
|
limit: this.limit,
|
|
})
|
|
.then((res) => {
|
|
if (isRefresh) {
|
|
this.services = res.data.list;
|
|
this.count = res.data.count;
|
|
} else {
|
|
this.services = [...this.services, ...res.data.list];
|
|
this.count = res.data.count;
|
|
}
|
|
|
|
}).finally(() => {
|
|
this.isLoad = true
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
getClass() {
|
|
request.post("/sj/workSeat/classList").then((res) => {
|
|
// 存储分类列表到全局状态管理
|
|
this.$store.commit("setWorkSpaceSJClassList", res.data);
|
|
});
|
|
},
|
|
switchTab(index, id) {
|
|
this.currentTab = index;
|
|
this.state = id;
|
|
this.getServicesList();
|
|
},
|
|
viewEdit(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/shop/workSpace/addWorkSpace?id=${item.id}&state=${item.state}`,
|
|
});
|
|
},
|
|
viewList(item) {
|
|
request
|
|
.post("/sj/workSeat/switch", {
|
|
id: item.id,
|
|
state: 2
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "上架成功",
|
|
icon: "none",
|
|
});
|
|
this.getServicesList(); // 刷新列表
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
viewRemove(item) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定要下架该服务吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
request
|
|
.post("/sj/workSeat/switch", {
|
|
id: item.id,
|
|
state: 3
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "下架成功",
|
|
icon: "none",
|
|
});
|
|
this.getServicesList(); // 刷新列表
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
addService() {
|
|
uni.navigateTo({
|
|
url: `/pages/shop/workSpace/addWorkSpace`,
|
|
});
|
|
},
|
|
deletemanHour(item) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定要删除该服务吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
request.post("/sj/workSeat/del", {
|
|
id: item.id
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "删除成功",
|
|
icon: "none",
|
|
});
|
|
this.getServicesList(); // 刷新列表
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
resetSlide() {
|
|
this.services.forEach((item, index) => {
|
|
if (index !== this.currentIndex) {
|
|
this.$set(item, "slideX", 0);
|
|
}
|
|
});
|
|
},
|
|
changeSlide(slideInfo) {
|
|
const {
|
|
index,
|
|
type = "slideX",
|
|
slide = 0
|
|
} = slideInfo;
|
|
console.log(index, type, slide, 9999);
|
|
if (this.services[index]) {
|
|
this.$set(this.services[index], type, slide);
|
|
}
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.service-page {
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
/* 搜索框样式 */
|
|
.search-box {
|
|
// width: 750rpx;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 8rpx;
|
|
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.flexed {
|
|
position: sticky;
|
|
top: 88rpx;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.search-inp {
|
|
// width: 700rpx;
|
|
width: 100%;
|
|
height: 68rpx;
|
|
background-color: #f4f5f7;
|
|
border-radius: 34rpx;
|
|
padding: 0 70rpx 0 82rpx;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.placeholder {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #CCCCCC;
|
|
line-height: 34rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.search-icon {
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
/* 标签栏样式 */
|
|
.tab-container {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// column-gap: 48rpx;
|
|
background-color: #FAFAFA;
|
|
padding: 30rpx 30rpx 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tab-item {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
padding: 16rpx 0;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #000000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 32rpx;
|
|
height: 6rpx;
|
|
background-color: #E8101E;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
/* 服务列表样式 */
|
|
.service-list {
|
|
margin: 24rpx 24rpx 0;
|
|
}
|
|
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.service-item {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.service-nothings {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 280rpx 0 0;
|
|
}
|
|
|
|
.nothings-text {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #999999;
|
|
text-align: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
.add-btn {
|
|
height: 140rpx;
|
|
}
|
|
|
|
/* 平台特定样式 */
|
|
/* #ifdef H5 */
|
|
.service-container {
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
/* #ifdef APP-PLUS */
|
|
.service-image {
|
|
border: 1rpx solid #eeeeee;
|
|
}
|
|
|
|
.flexed {
|
|
top: calc(var(--status-bar-height) + 88rpx);
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
.search-box input {
|
|
/* 小程序搜索框样式调整 */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.flexed {
|
|
top: calc(var(--status-bar-height) + 88rpx);
|
|
}
|
|
|
|
.service-item {
|
|
/* 小程序阴影效果 */
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* #endif */
|
|
.headerBox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
background-color: #fff;
|
|
padding: 24rpx 30rpx;
|
|
|
|
.search-box {
|
|
// flex: 1;
|
|
}
|
|
|
|
.addBox {
|
|
// width: 100rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
align-items: center;
|
|
padding-right: 17rpx;
|
|
|
|
.addIcon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
|
|
.addText {
|
|
color: #666666;
|
|
font-size: 20rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("/static/images/icons/triangle_down.png");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: -17rpx;
|
|
width: 12rpx;
|
|
height: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |