2026-03-24 11:45:13 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="container">
|
|
|
|
|
|
<custom-navbar title="详情" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="transparent"
|
|
|
|
|
|
titleColor="#000" borderBottom="none"></custom-navbar>
|
|
|
|
|
|
<view class="user-card">
|
|
|
|
|
|
<view class="flex-row-center">
|
|
|
|
|
|
<!-- 头像区域 -->
|
|
|
|
|
|
<view class="user-avatar flex-row-center-center">
|
|
|
|
|
|
<image class="user-avatar-img" :src="syrInfo.head_photo" mode="aspectFill"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 信息区域 -->
|
|
|
|
|
|
<view class="user-info">
|
|
|
|
|
|
<view class="user-name">{{ syrInfo.name }}</view>
|
|
|
|
|
|
<view class="user-action" @click="goServiceList">
|
|
|
|
|
|
<text>分配项目</text>
|
|
|
|
|
|
<image src="/static/images/icons/right_20_36.png" class="user-action-icon"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 更多详情 -->
|
|
|
|
|
|
<view class="more-detail" @click="goDetail">
|
|
|
|
|
|
更多详情
|
|
|
|
|
|
<image src="/static//images//icons/right_20_40.png" class="more-detail-icon"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="switch-section flex-row-center-between">
|
|
|
|
|
|
<view class="switch-section-right flex-row-center">
|
|
|
|
|
|
<image src="/static//images//icons/setting.png" class="switch-section-right-icon"></image>
|
|
|
|
|
|
<text>是否允许手艺人接单</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="switch-box" @click="handleSwitchChange" :class="{ disswitch: bindsyr.sj_state != 1 }">
|
|
|
|
|
|
<text class="switch-text" v-if="bindsyr.sj_state == 1">接单</text>
|
|
|
|
|
|
<view class="switch-yuan"></view>
|
|
|
|
|
|
<text class="switch-text" v-if="bindsyr.sj_state != 1">不接单</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="tab-container">
|
|
|
|
|
|
<!-- 顶部主Tab栏（动态循环） -->
|
|
|
|
|
|
<view class="tab-main">
|
|
|
|
|
|
<view class="tab-main-item" :class="{ active: currentMainTab === item.id }" v-for="item in mainTabs"
|
|
|
|
|
|
:key="item.id" @click="switchMainTab(item.id)">
|
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 下方子Tab栏（根据当前主Tab动态循环） -->
|
|
|
|
|
|
<scroll-view scroll-x="true" scroll-with-animation>
|
|
|
|
|
|
<view class="tab-sub">
|
|
|
|
|
|
<view class="tab-sub-item" :class="{ active: queryData.state === item.id }"
|
|
|
|
|
|
v-for="item in currentSubTabs" :key="item.id" @click="switchSubTab(item.id)">
|
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<CommonList ref="groupRef" :apiUrl="getListUrl" :listScrollHeight="`calc(100vh - ${statusBarHeight + 550}rpx)`">
|
|
|
|
|
|
<template #listData="{ list }">
|
|
|
|
|
|
<view class="order-list">
|
|
|
|
|
|
<view class="order_item" v-for="(item, i) in list" :key="item.id">
|
|
|
|
|
|
<OrderCard :showState="true" :dataItem="item" :noTime="true" />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 空数据状态 -->
|
|
|
|
|
|
<template #empty>
|
|
|
|
|
|
<noData></noData>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</CommonList>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="container-buttons">
|
|
|
|
|
|
<view class="container-button flex-row-center-center" @click="syrunbind" v-if="bindsyr.state == 1">解除绑定</view>
|
|
|
|
|
|
<view class="container-button flex-row-center-center" @click="goAddStaff" v-if="bindsyr.state == 2">重新邀请绑定
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import OrderCard from "./components/orderCard.vue";
|
|
|
|
|
|
import request from "@/utils/request";
|
|
|
|
|
|
import CommonList from "@/components/common/CommonList.vue";
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
CommonList,
|
|
|
|
|
|
OrderCard,
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
queryData: {
|
|
|
|
|
|
state: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
statusBarHeight: 0,
|
|
|
|
|
|
syrid: "",
|
|
|
|
|
|
userInfo: {},
|
|
|
|
|
|
bindsyr: {},
|
|
|
|
|
|
syrInfo: {},
|
|
|
|
|
|
// 当前选中的主Tab ID
|
|
|
|
|
|
currentMainTab: 1,
|
|
|
|
|
|
// 主Tab数据源
|
|
|
|
|
|
mainTabs: [{
|
|
|
|
|
|
id: 1,
|
|
|
|
|
|
name: "用户订单",
|
|
|
|
|
|
url: "/sj/searchsyrorders",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2,
|
|
|
|
|
|
name: "自营订单",
|
|
|
|
|
|
url: "/sj/searchsyrordersself",
|
|
|
|
|
|
},
|
|
|
|
|
|
// 可扩展更多主Tab
|
|
|
|
|
|
],
|
|
|
|
|
|
// 主Tab与子Tab的映射关系（不同主Tab对应不同子Tab）
|
|
|
|
|
|
subTabsMap: {
|
|
|
|
|
|
1: [{
|
|
|
|
|
|
id: "",
|
|
|
|
|
|
name: "全部",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2,
|
|
|
|
|
|
name: "待接单",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 3,
|
|
|
|
|
|
name: "待服务",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 4,
|
|
|
|
|
|
name: "服务中",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 5,
|
|
|
|
|
|
name: "已完成",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 7,
|
|
|
|
|
|
name: "已取消",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
2: [{
|
|
|
|
|
|
id: "",
|
|
|
|
|
|
name: "全部",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2,
|
|
|
|
|
|
name: "待接单",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 3,
|
|
|
|
|
|
name: "待服务",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 4,
|
|
|
|
|
|
name: "服务中",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 5,
|
|
|
|
|
|
name: "已完成",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 7,
|
|
|
|
|
|
name: "已取消",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
|
|
|
|
getListUrl() {
|
|
|
|
|
|
let currentMainTabObj = this.mainTabs.find(
|
|
|
|
|
|
(tab) => tab.id === this.currentMainTab
|
|
|
|
|
|
);
|
|
|
|
|
|
return currentMainTabObj ? currentMainTabObj.url : "";
|
|
|
|
|
|
},
|
|
|
|
|
|
// 根据当前主Tab获取对应的子Tab列表
|
|
|
|
|
|
currentSubTabs() {
|
|
|
|
|
|
return this.subTabsMap[this.currentMainTab] || [];
|
|
|
|
|
|
},
|
|
|
|
|
|
mergeServiceList() {
|
|
|
|
|
|
// 1. 提取原始对象的所有子数组
|
|
|
|
|
|
let allSubArrays = Object.values(this.$store.state.sjServiceList);
|
|
|
|
|
|
// 2. 遍历每个子数组，过滤掉server_time>100的元素，再合并
|
|
|
|
|
|
return allSubArrays
|
|
|
|
|
|
.map((subArr) => {
|
|
|
|
|
|
// 过滤
|
|
|
|
|
|
return subArr.filter((item) => {
|
|
|
|
|
|
// 只保留is_choice为true的项目
|
|
|
|
|
|
return item.is_choice;
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.flat(); // 扁平化合并所有过滤后的子数组
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
async onLoad(options) {
|
|
|
|
|
|
if (options.syrid) {
|
|
|
|
|
|
this.syrid = Number(options.syrid);
|
|
|
|
|
|
this.queryData.syrid = this.syrid;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.statusBarHeight = this.getRpxStatusBarHeight();
|
|
|
|
|
|
let type = 3;
|
|
|
|
|
|
let result = await request.post("/user/getuser", {
|
|
|
|
|
|
type,
|
|
|
|
|
|
});
|
|
|
|
|
|
this.userInfo = result.data;
|
|
|
|
|
|
this.queryData.sjid = this.userInfo.id;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
this.search();
|
|
|
|
|
|
});
|
|
|
|
|
|
this.getbindsyr();
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
goAddStaff() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/shop/staff/addStaff?phone=${this.syrInfo.account}`,
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
makeservers() {
|
|
|
|
|
|
let form = {
|
|
|
|
|
|
sjid: this.userInfo.id,
|
|
|
|
|
|
syrid: this.syrid,
|
|
|
|
|
|
server_arr: this.mergeServiceList.map((item) => item.id),
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
request
|
|
|
|
|
|
.post("/sj/makeservers", form)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "分配成功",
|
|
|
|
|
|
icon: "success",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.msg,
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "请求失败，请稍后重试",
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
search() {
|
|
|
|
|
|
this.$refs.groupRef.manualRefresh(this.queryData);
|
|
|
|
|
|
},
|
|
|
|
|
|
goServiceList() {
|
|
|
|
|
|
if(this.bindsyr.state == 2){
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "手艺人已解绑，请重新邀请后再分配",
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/shop/staff/serviceList?syrid=${this.syrid}`,
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
getbindsyr() {
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
sjid: this.userInfo.id,
|
|
|
|
|
|
syrid: this.syrid,
|
|
|
|
|
|
};
|
|
|
|
|
|
// 获取绑定的服务员信息
|
|
|
|
|
|
request.post("/sj/getbindsyr", obj).then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
this.bindsyr = res.data;
|
|
|
|
|
|
this.syrInfo = res.data.syr;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
goDetail() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/shop/staff/staffDetail?syrid=${this.syrid}`,
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
syrunbind(item) {
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
sjid: this.userInfo.id,
|
|
|
|
|
|
syrid: this.syrid,
|
|
|
|
|
|
};
|
|
|
|
|
|
request.post("/sj/syrordernum", obj).then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
content: '是否确认解绑',
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
|
request.post("/sj/syrunbind", obj).then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "解绑成功",
|
|
|
|
|
|
icon: "success",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
this.$set(this.bindsyr, "state", 2)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.msg,
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
} else if (res.cancel) {
|
|
|
|
|
|
console.log('用户点击取消');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.msg,
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
handleSwitchChange(item) {
|
|
|
|
|
|
let obj = {
|
|
|
|
|
|
sjid: this.userInfo.id,
|
|
|
|
|
|
syrid: this.syrid,
|
|
|
|
|
|
};
|
|
|
|
|
|
request
|
|
|
|
|
|
.post("/sj/isaccept", obj)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
this.bindsyr.sj_state = this.bindsyr.sj_state == 1 ? 2 : 1;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.msg,
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: "请求失败，请稍后重试",
|
|
|
|
|
|
icon: "none",
|
|
|
|
|
|
duration: 2000,
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
// 切换主Tab
|
|
|
|
|
|
switchMainTab(tabId) {
|
|
|
|
|
|
this.currentMainTab = tabId;
|
|
|
|
|
|
// 切换主Tab时，重置子Tab为第一个选项
|
|
|
|
|
|
const firstSubTab = this.currentSubTabs[0];
|
|
|
|
|
|
if (firstSubTab) {
|
|
|
|
|
|
this.queryData.state = firstSubTab.id;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 可在这里添加主Tab切换后的业务逻辑（比如请求数据）
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
this.search();
|
|
|
|
|
|
});
|
|
|
|
|
|
console.log("切换到主Tab：", tabId);
|
|
|
|
|
|
},
|
|
|
|
|
|
// 切换子Tab
|
|
|
|
|
|
switchSubTab(tabId) {
|
|
|
|
|
|
this.queryData.state = tabId;
|
|
|
|
|
|
// 可在这里添加子Tab切换后的业务逻辑（比如筛选数据）
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
this.search();
|
|
|
|
|
|
});
|
|
|
|
|
|
console.log("切换到子Tab：", tabId);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less">
|
|
|
|
|
|
.container {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
background-image: url("/static/images/background/bj3.png");
|
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
|
background-position: center top;
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
|
|
.user-card {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 40rpx 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
// 头像样式
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
|
width: 116rpx;
|
|
|
|
|
|
height: 116rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
margin-right: 21rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.user-avatar-img {
|
|
|
|
|
|
width: 108rpx;
|
|
|
|
|
|
height: 108rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 信息区域
|
|
|
|
|
|
.user-info {
|
|
|
|
|
|
.user-name {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 50rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
margin-bottom: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-action {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
|
|
&-icon {
|
|
|
|
|
|
width: 10rpx;
|
|
|
|
|
|
height: 18rpx;
|
|
|
|
|
|
margin-left: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 更多详情
|
|
|
|
|
|
.more-detail {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
line-height: 32rpx;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
|
|
&-icon {
|
|
|
|
|
|
width: 10rpx;
|
|
|
|
|
|
height: 20rpx;
|
|
|
|
|
|
margin-left: 9rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.switch-section {
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
width: 710rpx;
|
|
|
|
|
|
height: 80rpx;
|
|
|
|
|
|
padding: 15rpx 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.switch-section-right {
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
|
|
&-icon {
|
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.switch-box {
|
|
|
|
|
|
/* width: 126rpx; */
|
|
|
|
|
|
height: 52rpx;
|
|
|
|
|
|
line-height: 52rpx;
|
|
|
|
|
|
border-radius: 26rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
background-color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-flow: row nowrap;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 0 8rpx 0 15rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.switch-yuan {
|
|
|
|
|
|
width: 38rpx;
|
|
|
|
|
|
height: 38rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
margin-left: 9rpx;
|
|
|
|
|
|
margin-right: 0rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.switch-text {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
line-height: 33rpx;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.disswitch {
|
|
|
|
|
|
padding: 0 12rpx 0 8rpx;
|
|
|
|
|
|
background-color: #cecfd5;
|
|
|
|
|
|
|
|
|
|
|
|
.switch-yuan {
|
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
margin-right: 9rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tab-container {
|
|
|
|
|
|
margin-top: 16rpx;
|
|
|
|
|
|
padding: 20rpx 30rpx;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
// 顶部主Tab栏
|
|
|
|
|
|
.tab-main {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 70rpx;
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.tab-main-item {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
padding-bottom: 6rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
transition: color 0.2s ease;
|
|
|
|
|
|
|
|
|
|
|
|
// 点击态优化（uniapp多端适配）
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 选中态样式
|
|
|
|
|
|
&.active {
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767; // 红色文字（匹配设计）
|
2026-03-24 11:45:13 +08:00
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
width: 28rpx;
|
|
|
|
|
|
height: 6rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
background: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
border-radius: 3rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 下方子Tab栏
|
|
|
|
|
|
.tab-sub {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 18rpx;
|
|
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.tab-sub-item {
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
padding: 8rpx 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
background-color: #f3f5f6;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
|
|
|
|
|
|
// 点击态优化
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 选中态样式
|
|
|
|
|
|
&.active {
|
2026-06-02 11:39:23 +08:00
|
|
|
|
color: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
background-color: #fee5e7; // 深粉色（更贴近设计的选中色）
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.container-buttons{
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
bottom: 0rpx;
|
|
|
|
|
|
left: 0rpx;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.container-button {
|
|
|
|
|
|
|
|
|
|
|
|
margin: 20rpx auto;
|
|
|
|
|
|
width: 710rpx;
|
|
|
|
|
|
height: 98rpx;
|
2026-06-02 11:39:23 +08:00
|
|
|
|
background: #FF4767;
|
2026-03-24 11:45:13 +08:00
|
|
|
|
border-radius: 49rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-size: 38rpx;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.order-list {}
|
|
|
|
|
|
|
|
|
|
|
|
.common-list {
|
|
|
|
|
|
background: #f5f5f5 !important;
|
|
|
|
|
|
border-radius: 30rpx !important;
|
|
|
|
|
|
padding-bottom: 0rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .list-container {
|
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .load-tips {
|
|
|
|
|
|
padding-bottom: 200rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .list-scroll {
|
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.user-action-icon,
|
|
|
|
|
|
.more-detail-icon {
|
|
|
|
|
|
margin-left: 4rpx !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
