655 lines
14 KiB
Vue
655 lines
14 KiB
Vue
<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;
|
||
background-color: #FF4767;
|
||
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 {
|
||
color: #FF4767; // 红色文字（匹配设计）
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 28rpx;
|
||
height: 6rpx;
|
||
background: #FF4767;
|
||
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 {
|
||
color: #FF4767;
|
||
background-color: #fee5e7; // 深粉色（更贴近设计的选中色）
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container-buttons{
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0rpx;
|
||
right: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.container-button {
|
||
|
||
margin: 20rpx auto;
|
||
width: 710rpx;
|
||
height: 98rpx;
|
||
background: #FF4767;
|
||
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> |