780 lines
16 KiB
Vue
780 lines
16 KiB
Vue
|
<template>
|
||
|
|
<view class="service-page">
|
||
|
|
<custom-navbar title="服务列表" :showBack="true" backgroundColor="#FFFFFF" :show-headle="true"
|
||
|
|
headleSrc="/static/images/add_icon.png" @onHeadleClick="addService"></custom-navbar>
|
||
|
|
<view class="flexed">
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<view class="search-box">
|
||
|
|
<input type="text" class="search-inp" placeholder="请输入你的服务名称" placeholder-class="placeholder"
|
||
|
|
v-model="title" @confirm="getServicesList" />
|
||
|
|
<image src="/static/home/search.png" class="search-icon" mode="aspectFit" @click="getServicesList">
|
||
|
|
</image>
|
||
|
|
</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">
|
||
|
|
<view v-for="(item, index) in services" :key="index" class="service-item"
|
||
|
|
@touchstart="touchStart($event, index)" @touchmove="touchMove" @touchend="touchEnd"
|
||
|
|
@mousedown="mouseDown($event, index)" @mousemove="mouseMove" @mouseup="mouseUp" @mouseleave="mouseUp">
|
||
|
|
<!-- 左滑删除按钮 -->
|
||
|
|
<view class="delete-btn" :style="{ transform: `translateX(${item.slideX || 0}rpx)` }"
|
||
|
|
@click="deleteService(item)" v-if="item.state == 0">
|
||
|
|
<text>删除</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 服务内容 -->
|
||
|
|
<view class="service-content" :style="{ transform: `translateX(${item.slideX || 0}rpx)` }">
|
||
|
|
<!-- 服务图片 -->
|
||
|
|
<image :src="item.photo[0]" mode="aspectFill" class="service-image" />
|
||
|
|
|
||
|
|
<!-- 服务信息 -->
|
||
|
|
<view class="service-info">
|
||
|
|
<view class="service-title text-overflow">{{ item.title }}</view>
|
||
|
|
<view class="service-price">
|
||
|
|
<text class="price-symbol">¥</text>
|
||
|
|
<text class="price-value">{{ item.server_price }}</text>
|
||
|
|
<text class="price-unit">元</text>
|
||
|
|
<text class="price-line">{{ item.line_price }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 状态标签 -->
|
||
|
|
<view :class="['status-tag', 'state' + item.state]">
|
||
|
|
<text class="status-text">{{
|
||
|
|
item.state == 0
|
||
|
|
? "草稿"
|
||
|
|
: item.state == 1
|
||
|
|
? "审核中"
|
||
|
|
: item.state == 2
|
||
|
|
? "已上架"
|
||
|
|
: item.state == 3
|
||
|
|
? "下架"
|
||
|
|
: item.state == 4
|
||
|
|
? "驳回"
|
||
|
|
: ""
|
||
|
|
}}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 编辑按钮 -->
|
||
|
|
<view class="btns">
|
||
|
|
<view class="view-btn" @click="viewRemove(item)" v-if="item.state == 2">
|
||
|
|
<image src="/static/images/remove_icon.png" class="view-icon" mode="aspectFit"></image>
|
||
|
|
<text class="view-text">下架</text>
|
||
|
|
</view>
|
||
|
|
<view class="view-btn" @click="viewList(item)" v-if="item.state == 3">
|
||
|
|
<image src="/static/images/list_icon.png" class="view-icon" mode="aspectFit"></image>
|
||
|
|
<text class="view-text">上架</text>
|
||
|
|
</view>
|
||
|
|
<view class="view-btn" @click="viewEdit(item)">
|
||
|
|
<image src="/static/images/edit_active.png" class="view-icon" mode="aspectFit"></image>
|
||
|
|
<text class="view-text">编辑</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 暂无数据 -->
|
||
|
|
<view class="service-nothings" v-else>
|
||
|
|
<text class="nothings-text">暂无数据...</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 加载更多 -->
|
||
|
|
<view v-if="hasMore" class="load-more">
|
||
|
|
<text>已加载全部</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 添加服务 -->
|
||
|
|
<view class="serviceBtn-box" @click="addService">
|
||
|
|
<view class="serviceBtn-card">
|
||
|
|
<text class="serviceBtn-text">添加服务</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<!-- <view class="add-btn"></view> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import request from "../../utils/request";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "",
|
||
|
|
state: 2,
|
||
|
|
currentTab: 0,
|
||
|
|
tabs: [{
|
||
|
|
id: 2,
|
||
|
|
text: "已上架",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
text: "审核中",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
text: "下架",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 0,
|
||
|
|
text: "草稿",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
text: "驳回",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
services: [],
|
||
|
|
hasMore: false,
|
||
|
|
startX: 0,
|
||
|
|
moveX: 0,
|
||
|
|
currentIndex: -1,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// computed: {
|
||
|
|
// filteredServices() {
|
||
|
|
// return this.services.filter(service => {
|
||
|
|
// // 根据搜索文本过滤
|
||
|
|
// if (this.title && !service.title.includes(this.title)) {
|
||
|
|
// return false
|
||
|
|
// }
|
||
|
|
// // 根据当前标签过滤
|
||
|
|
// switch (this.currentTab) {
|
||
|
|
// case 0: // 草稿
|
||
|
|
// return service.state === 2
|
||
|
|
// case 1: // 审核中
|
||
|
|
// return service.state === 1
|
||
|
|
// case 2: // 已上架
|
||
|
|
// return service.state === 2
|
||
|
|
// case 3: // 下架
|
||
|
|
// return service.state === 3
|
||
|
|
// case 4: // 驳回
|
||
|
|
// return service.state === 4
|
||
|
|
// default:
|
||
|
|
// return true
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
onLoad() {
|
||
|
|
this.getServicesList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getServicesList() {
|
||
|
|
let url = null;
|
||
|
|
if (getApp().globalData.artisanType == 1) {
|
||
|
|
url = "/user/syrserverlist";
|
||
|
|
} else if (getApp().globalData.artisanType == 2) {
|
||
|
|
url = "/user/sjserverlist";
|
||
|
|
}
|
||
|
|
request
|
||
|
|
.post(url, {
|
||
|
|
state: this.state,
|
||
|
|
title: this.title
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
if (res.state == 1) {
|
||
|
|
this.services = res.data;
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
switchTab(index, id) {
|
||
|
|
this.currentTab = index;
|
||
|
|
this.state = id;
|
||
|
|
this.getServicesList();
|
||
|
|
},
|
||
|
|
viewRemove(item) {
|
||
|
|
uni.showModal({
|
||
|
|
title: "提示",
|
||
|
|
content: "确定要下架该服务吗？",
|
||
|
|
success: (res) => {
|
||
|
|
if (res.confirm) {
|
||
|
|
request
|
||
|
|
.post("/user/serveronoff", {
|
||
|
|
id: item.id,
|
||
|
|
state: 3
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
if (res.state == 1) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "下架成功",
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
this.getServicesList(0); // 刷新列表
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
viewList(item) {
|
||
|
|
request
|
||
|
|
.post("/user/serveronoff", {
|
||
|
|
id: item.id,
|
||
|
|
state: 2
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
if (res.state == 1) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "上架成功",
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
this.getServicesList(0); // 刷新列表
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
viewEdit(item) {
|
||
|
|
if (getApp().globalData.artisanType == 1) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/artisan/add-service?id=${item.id}&state=${item.state}`,
|
||
|
|
});
|
||
|
|
} else if (getApp().globalData.artisanType == 2) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/shop/add-service?id=${item.id}&state=${item.state}`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
addService() {
|
||
|
|
if (getApp().globalData.artisanType == 1) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/artisan/add-service`,
|
||
|
|
});
|
||
|
|
} else if (getApp().globalData.artisanType == 2) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/shop/add-service`,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deleteService(item) {
|
||
|
|
uni.showModal({
|
||
|
|
title: "提示",
|
||
|
|
content: "确定要删除该服务吗？",
|
||
|
|
success: (res) => {
|
||
|
|
if (res.confirm) {
|
||
|
|
request.post("/user/serverdel", {
|
||
|
|
id: item.id
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.state == 1) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "删除成功",
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
this.getServicesList(0); // 刷新列表
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
touchStart(e, index) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
// 获取触摸事件的坐标
|
||
|
|
if (e.touches && e.touches[0]) {
|
||
|
|
this.startX = e.touches[0].clientX;
|
||
|
|
this.currentIndex = index;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchMove(e) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
if (this.currentIndex === -1) return;
|
||
|
|
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
// 获取触摸事件的坐标
|
||
|
|
if (e.touches && e.touches[0]) {
|
||
|
|
this.moveX = e.touches[0].clientX - this.startX;
|
||
|
|
|
||
|
|
// 限制只能向左滑动
|
||
|
|
if (this.moveX > 0) {
|
||
|
|
this.moveX = 0;
|
||
|
|
}
|
||
|
|
// 限制最大滑动距离
|
||
|
|
if (this.moveX < -160) {
|
||
|
|
this.moveX = -160;
|
||
|
|
}
|
||
|
|
// 更新当前项的滑动状态
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", this.moveX);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchEnd(e) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
if (this.currentIndex === -1) return;
|
||
|
|
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
// 如果滑动距离超过一半，则完全展开
|
||
|
|
if (this.moveX < -80) {
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", -160);
|
||
|
|
} else {
|
||
|
|
// 否则恢复原位
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", 0);
|
||
|
|
}
|
||
|
|
this.currentIndex = -1;
|
||
|
|
},
|
||
|
|
mouseDown(e, index) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
this.startX = e.clientX;
|
||
|
|
this.currentIndex = index;
|
||
|
|
},
|
||
|
|
mouseMove(e) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
if (this.currentIndex === -1) return;
|
||
|
|
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
this.moveX = e.clientX - this.startX;
|
||
|
|
|
||
|
|
// 限制只能向左滑动
|
||
|
|
if (this.moveX > 0) {
|
||
|
|
this.moveX = 0;
|
||
|
|
}
|
||
|
|
// 限制最大滑动距离
|
||
|
|
if (this.moveX < -160) {
|
||
|
|
this.moveX = -160;
|
||
|
|
}
|
||
|
|
// 更新当前项的滑动状态
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", this.moveX);
|
||
|
|
},
|
||
|
|
mouseUp(e) {
|
||
|
|
if (this.currentTab != 3) return;
|
||
|
|
if (this.currentIndex === -1) return;
|
||
|
|
|
||
|
|
// 阻止默认事件和冒泡
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
// 如果滑动距离超过一半，则完全展开
|
||
|
|
if (this.moveX < -80) {
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", -160);
|
||
|
|
} else {
|
||
|
|
// 否则恢复原位
|
||
|
|
this.$set(this.services[this.currentIndex], "slideX", 0);
|
||
|
|
}
|
||
|
|
this.currentIndex = -1;
|
||
|
|
},
|
||
|
|
resetSlide() {
|
||
|
|
this.services.forEach((item, index) => {
|
||
|
|
if (index !== this.currentIndex) {
|
||
|
|
this.$set(item, "slideX", 0);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.service-page {
|
||
|
|
padding-bottom: 120rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 搜索框样式 */
|
||
|
|
.search-box {
|
||
|
|
width: 750rpx;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
padding: 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flexed {
|
||
|
|
position: sticky;
|
||
|
|
top: 88rpx;
|
||
|
|
left: 0;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-inp {
|
||
|
|
width: 700rpx;
|
||
|
|
height: 68rpx;
|
||
|
|
background-color: #eef4fa;
|
||
|
|
border-radius: 34rpx;
|
||
|
|
padding: 0 70rpx 0 48rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
position: absolute;
|
||
|
|
right: 56rpx;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标签栏样式 */
|
||
|
|
.tab-container {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 24rpx 24rpx 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-item {
|
||
|
|
flex: 1;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-item {
|
||
|
|
height: 248rpx;
|
||
|
|
position: relative;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
overflow: hidden;
|
||
|
|
touch-action: pan-y pinch-zoom;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-item:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: #ffffff;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.delete-btn {
|
||
|
|
position: absolute;
|
||
|
|
right: -160rpx;
|
||
|
|
top: 0;
|
||
|
|
width: 160rpx;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #E8101E;
|
||
|
|
color: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-item:active .service-content,
|
||
|
|
.service-item:active .delete-btn {
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-image {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-info {
|
||
|
|
height: 200rpx;
|
||
|
|
width: 350rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column nowrap;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #000000;
|
||
|
|
margin-bottom: 60rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.service-price {
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-symbol {
|
||
|
|
font-family: DINPro, DINPro;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #E8101E;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-value {
|
||
|
|
font-family: DINPro, DINPro;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #E8101E;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-unit {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #E8101E;
|
||
|
|
line-height: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-line {
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
line-height: 34rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-tag {
|
||
|
|
position: absolute;
|
||
|
|
top: 0rpx;
|
||
|
|
right: 0rpx;
|
||
|
|
border-radius: 0 0 0 20rpx;
|
||
|
|
width: 90rpx;
|
||
|
|
height: 38rpx;
|
||
|
|
line-height: 38rpx;
|
||
|
|
text-align: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 已上架 */
|
||
|
|
.status-tag.state2 {
|
||
|
|
background-color: rgba(232, 16, 30, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-tag.state2 .status-text {
|
||
|
|
color: #E8101E;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 审核中 */
|
||
|
|
.status-tag.state1 {
|
||
|
|
background-color: rgba(40, 209, 137, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-tag.state1 .status-text {
|
||
|
|
color: #28d189;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 草稿/撤回 */
|
||
|
|
.status-tag.state0,
|
||
|
|
.status-tag.state3,
|
||
|
|
.status-tag.state4 {
|
||
|
|
background-color: rgba(209, 15, 19, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-tag.state0 .status-text,
|
||
|
|
.status-tag.state3 .status-text,
|
||
|
|
.status-tag.state4 .status-text {
|
||
|
|
color: #d10f13;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btns {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 26rpx;
|
||
|
|
right: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-icon {
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-text {
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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-content,
|
||
|
|
.delete-btn {
|
||
|
|
will-change: transform;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 */
|
||
|
|
|
||
|
|
|
||
|
|
.serviceBtn-box {
|
||
|
|
position: fixed;
|
||
|
|
left: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
right: 0px;
|
||
|
|
padding: 20rpx 12rpx 34rpx 12rpx;
|
||
|
|
z-index: 999;
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
.serviceBtn-card {
|
||
|
|
width: 100%;
|
||
|
|
height: 88rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 88rpx;
|
||
|
|
background-color: #E8101E;
|
||
|
|
border-radius: 16px;
|
||
|
|
|
||
|
|
.serviceBtn-text {
|
||
|
|
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|