814 lines
20 KiB
Vue
814 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view class="selectSyr">
|
|||
|
|
<custom-navbar title="选择手艺人" :leftImg="'/static/images/whiteBack.png'" :showUser="true"
|
|||
|
|
backgroundColor="linear-gradient( 134deg, #F52540 0%, #E8101E 100%)" titleColor="#fff"
|
|||
|
|
borderBottom="none"></custom-navbar>
|
|||
|
|
<searchBox placeholder="搜索手艺人名称" v-model="queryData.name" @confirm="searchConfrim" @search="searchConfrim">
|
|||
|
|
</searchBox>
|
|||
|
|
<view class="selectSyr-tip" v-if="queryData.servers_region.length == 0">
|
|||
|
|
<text>抱歉呀，您所选择的地址暂时没有合适的手艺人～试试调整换个地址，马上为您匹配新的人选哦。</text>
|
|||
|
|
</view>
|
|||
|
|
<CommonList ref="groupRef" :apiUrl="url" :listScrollHeight="`calc(100vh - ${
|
|||
|
|
statusBarHeight + 200 + tipHeight
|
|||
|
|
}rpx)`" @load-success-all="loadSuccess">
|
|||
|
|
<template #listData="{ list }">
|
|||
|
|
<view class="selectSyr-list-tip" v-if="queryData.servers_region.length == 0">
|
|||
|
|
<view class="flex-row-center">
|
|||
|
|
<image class="selectSyr-list-tip-icon" src="/static/images/icons/tip.png">
|
|||
|
|
</image>
|
|||
|
|
<text>暂不满足此地址和时间的手艺人</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="selectSyr-list" :class="{ noSyr: queryData.servers_region.length == 0 }">
|
|||
|
|
<view class="selectSyr-item" v-for="(item, index) in syrList" :key="index" @click="selectSyr(item)">
|
|||
|
|
<image :src="item.head_photo" mode="aspectFill" class="selectSyr-item-photo"></image>
|
|||
|
|
<view class="selectSyr-item-right">
|
|||
|
|
<view class="selectSyr-item-right-name flex-row-center-between">
|
|||
|
|
<text class="right-name-left">{{ item.name }}</text>
|
|||
|
|
<view class="right-name-right flex-row-center" @click.stop="openPopup(item)">
|
|||
|
|
<text>更多信息</text>
|
|||
|
|
<image class="right-name-right-img" src="/static/images/icons/right_gray4.png">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="selectSyr-item-right-time flex-row-center">
|
|||
|
|
<text>到家时间：{{ item.default_times }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 所属门店区域 -->
|
|||
|
|
<view class="detail-info-user__company__name"
|
|||
|
|
v-if="item.for_shop && item.for_shop.length > 0">
|
|||
|
|
<view class="detail-info-user__company__name__text1">
|
|||
|
|
所属门店
|
|||
|
|
</view>
|
|||
|
|
<span class="detail-info-user__company__name__line"> | </span>
|
|||
|
|
<view class="detail-info-user__company__name__text2">
|
|||
|
|
{{ item.for_shop }}
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="detail-info-user__company__name" v-if="item.sj_list && item.sj_list.length > 0"
|
|||
|
|
@click.stop="showShopList(item)">
|
|||
|
|
<view class="detail-info-user__company__name__text1">
|
|||
|
|
所属门店
|
|||
|
|
</view>
|
|||
|
|
<span class="detail-info-user__company__name__line"> | </span>
|
|||
|
|
<view class="detail-info-user__company__name__text2">
|
|||
|
|
{{ item.selectSjItem.name }}
|
|||
|
|
<!-- 多个门店时显示下拉图标 -->
|
|||
|
|
<image v-if="item.sj_list && item.sj_list.length >= 1"
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4c5f282e-bad3-4c27-b653-9bd5100ae639.png"
|
|||
|
|
mode="aspectFill" class="detail-info-user__company__name__text2__img"
|
|||
|
|
referrer="no-referrer">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
<view class="sj-pop" v-if="item.showSj">
|
|||
|
|
<view class="sj-pop-item" v-for="(item2,index2) in item.sj_list" :class="{active:item2.id == item.selectSjItem.id}"
|
|||
|
|
:key="index2" @click="selectShop(item,item2)">
|
|||
|
|
{{ item2.name }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="selectSyr-item-bottom">
|
|||
|
|
<view class="selectSyr-item-right-adress flex-row-center">
|
|||
|
|
<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
|
|||
|
|
</image>
|
|||
|
|
<text
|
|||
|
|
class="selectSyr-item-right-adress-text">服务区域：{{ item.servers_region.join("、") }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 空数据状态 -->
|
|||
|
|
<template #empty>
|
|||
|
|
<noData></noData>
|
|||
|
|
</template>
|
|||
|
|
</CommonList>
|
|||
|
|
|
|||
|
|
<!-- 手艺人详情弹窗 -->
|
|||
|
|
<uv-popup ref="popup" mode="bottom" bgColor="" :closeable="false">
|
|||
|
|
<view class="popup-container">
|
|||
|
|
<!-- 头部：头像+姓名+经验+取消按钮 -->
|
|||
|
|
<view class="header-bar">
|
|||
|
|
<view class="avatar-name-wrap">
|
|||
|
|
<image class="avatar" :src="openTiem.head_photo" mode="aspectFill"></image>
|
|||
|
|
<view class="name-exp">
|
|||
|
|
<text class="name">{{ openTiem.name }}</text>
|
|||
|
|
<view class="exp-tag flex-row-center">
|
|||
|
|
<image class="exp-tag-icon" src="/static/images/icons/experience.png">
|
|||
|
|
</image>
|
|||
|
|
<text>专业经验：{{workExpText(openTiem.major)}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text class="cancel-btn" @click="closePopup">取消</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务信息：到家时间+服务区域 -->
|
|||
|
|
<view class="service-info">
|
|||
|
|
<view class="info-item flex-row-center">
|
|||
|
|
<image class="right-time-icon" src="/static/images/icons/time_icon.png">
|
|||
|
|
</image>
|
|||
|
|
<text class="info-text">到家时间：
|
|||
|
|
<text style="color: #333333">{{
|
|||
|
|
openTiem.default_times
|
|||
|
|
}}</text>
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-item flex-row-center" v-if="openTiem.servers_region">
|
|||
|
|
<image class="right-adress-icon" src="/static/images/icons/address_icon3.png">
|
|||
|
|
</image>
|
|||
|
|
<text class="info-text">服务区域：<text style="color: #333333">{{
|
|||
|
|
openTiem.servers_region.join("、")
|
|||
|
|
}}</text></text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 新的门店显示样式 -->
|
|||
|
|
<view class="popup-shop-info" v-if="openTiem.for_shop && openTiem.for_shop.length > 0">
|
|||
|
|
<text class="popup-shop-label">所属门店：</text>
|
|||
|
|
<view class="popup-shop-tags">
|
|||
|
|
<view class="popup-shop-tag">
|
|||
|
|
{{ openTiem.for_shop}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 介绍文本 -->
|
|||
|
|
<view class="intro-text">
|
|||
|
|
<image class="intro-text-icon" src="/static/images/icons/Introduction.png" />
|
|||
|
|
<text>{{ openTiem.detail }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 确定按钮 -->
|
|||
|
|
<view class="confirm-btn" @click="handleConfirm">确定</view>
|
|||
|
|
</view>
|
|||
|
|
</uv-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import searchBox from "@/pages/service/components/search-box.vue";
|
|||
|
|
import CommonList from "@/components/common/CommonList.vue";
|
|||
|
|
export default {
|
|||
|
|
name: "list",
|
|||
|
|
components: {
|
|||
|
|
searchBox,
|
|||
|
|
CommonList,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
syrList: [],
|
|||
|
|
url: '/user/serversSelf/syrList',
|
|||
|
|
openTiem: {},
|
|||
|
|
queryData: {
|
|||
|
|
name: "",
|
|||
|
|
id: 1,
|
|||
|
|
servers_region: "河北省-沧州市-黄骅市",
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
tipHeight() {
|
|||
|
|
return this.queryData.servers_region.length == 0 ? 108 : 0;
|
|||
|
|
},
|
|||
|
|
reservationAddress() {
|
|||
|
|
return this.$store.state.reservationAddress;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
async onLoad(options) {
|
|||
|
|
this.statusBarHeight = this.getRpxStatusBarHeight();
|
|||
|
|
if (options.url) {
|
|||
|
|
this.url = options.url;
|
|||
|
|
}
|
|||
|
|
if (options.id) {
|
|||
|
|
this.queryData.id = options.id;
|
|||
|
|
}
|
|||
|
|
if (Object.keys(this.reservationAddress).length != 0) {
|
|||
|
|
this.queryData.servers_region = this.reservationAddress.dependency;
|
|||
|
|
this.queryData.city = this.reservationAddress.dependency_city;
|
|||
|
|
}
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.search();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
// 显示门店列表选择弹窗
|
|||
|
|
showShopList(currentItem) {
|
|||
|
|
// 先关闭所有已展开的弹窗
|
|||
|
|
this.syrList.forEach(item => {
|
|||
|
|
if (item !== currentItem && item.showSj) {
|
|||
|
|
this.$set(item, 'showSj', false);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 展开当前弹窗
|
|||
|
|
this.$set(currentItem, 'showSj', !currentItem.showSj);
|
|||
|
|
},
|
|||
|
|
// 选择门店
|
|||
|
|
selectShop(item,item2) {
|
|||
|
|
this.$set(item, 'selectSjItem', item2);
|
|||
|
|
},
|
|||
|
|
// 关闭门店选择弹窗
|
|||
|
|
closeShopPopup() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
workExpText(workExpNum) {
|
|||
|
|
// 定义映射表（复用性更高）
|
|||
|
|
const expMap = {
|
|||
|
|
1: '实习',
|
|||
|
|
2: '1-3年',
|
|||
|
|
3: '3-5年',
|
|||
|
|
4: '5-10年',
|
|||
|
|
5: '10年以上'
|
|||
|
|
};
|
|||
|
|
// 取值并处理默认情况
|
|||
|
|
return expMap[workExpNum] || '未知工作经验';
|
|||
|
|
},
|
|||
|
|
loadSuccess(e) {
|
|||
|
|
// 处理返回的数据，假设接口返回的数据中，所属门店是数组格式
|
|||
|
|
// 这里您需要根据实际接口返回的数据结构调整
|
|||
|
|
const list = e.data.list || [];
|
|||
|
|
list.forEach(item => {
|
|||
|
|
// 如果接口返回的是字符串，转换为数组
|
|||
|
|
if (item.sj_list && item.sj_list.length > 0) {
|
|||
|
|
// 如果接口直接返回shop_list数组
|
|||
|
|
this.$set(item, 'selectSjItem', item.sj_list[0])
|
|||
|
|
this.$set(item, 'showSj', false)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.syrList = list
|
|||
|
|
console.log(11111, this.syrList)
|
|||
|
|
|
|||
|
|
// 如果没有手艺人清空地区
|
|||
|
|
if (e.data.count == 0 && this.queryData.servers_region.length != 0) {
|
|||
|
|
this.queryData.servers_region = "";
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.search();
|
|||
|
|
}, 200);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
openPopup(item) {
|
|||
|
|
this.openTiem = item;
|
|||
|
|
this.$refs.popup.open();
|
|||
|
|
},
|
|||
|
|
closePopup() {
|
|||
|
|
this.$refs.popup.close();
|
|||
|
|
},
|
|||
|
|
handleConfirm() {
|
|||
|
|
// 确定按钮逻辑
|
|||
|
|
this.closePopup();
|
|||
|
|
},
|
|||
|
|
searchConfrim(e) {
|
|||
|
|
this.search();
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
this.$refs.groupRef.manualRefresh(this.queryData);
|
|||
|
|
},
|
|||
|
|
selectSyr(item) {
|
|||
|
|
if (this.queryData.servers_region.length == 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const pages = getCurrentPages();
|
|||
|
|
const prevPage = pages[pages.length - 2];
|
|||
|
|
|
|||
|
|
if (prevPage) {
|
|||
|
|
// 如果有选中的门店，添加到手艺人信息中
|
|||
|
|
// const selectedShop = this.selectedShops[item.id];
|
|||
|
|
// if (selectedShop) {
|
|||
|
|
// item.selectedShop = selectedShop;
|
|||
|
|
// }
|
|||
|
|
this.$store.commit("setreservationSyr", item);
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.selectSyr {
|
|||
|
|
.selectSyr-tip {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 14rpx 20rpx;
|
|||
|
|
background: #fae7ec;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #d5131f;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-list-tip {
|
|||
|
|
height: 130rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
margin: 39rpx 20rpx 0 20rpx;
|
|||
|
|
background: #fff1df;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #ab6a21;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
|
|||
|
|
.selectSyr-list-tip-icon {
|
|||
|
|
width: 30rpx;
|
|||
|
|
height: 26rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-list {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.selectSyr-item {
|
|||
|
|
margin: 0rpx 20rpx 20rpx 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
column-gap: 20rpx;
|
|||
|
|
row-gap: 15rpx;
|
|||
|
|
|
|||
|
|
.selectSyr-item-photo {
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
width: 126rpx;
|
|||
|
|
height: 126rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-item-right {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
.selectSyr-item-right-name {
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.right-name-left {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-name-right {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #E5616A;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
padding: 6rpx 10rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
border: 1rpx solid #E3C0C2;
|
|||
|
|
|
|||
|
|
.right-name-right-img {
|
|||
|
|
width: 10rpx;
|
|||
|
|
height: 19rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-item-right-time {
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-item-bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
border-top: 1rpx solid #f1f1f1;
|
|||
|
|
|
|||
|
|
.selectSyr-item-right-adress {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
|
|||
|
|
.right-adress-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectSyr-item-right-adress-text {
|
|||
|
|
flex: 1;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: left;
|
|||
|
|
min-height: 33rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noSyr {
|
|||
|
|
margin-top: 0;
|
|||
|
|
transform: translateY(-53rpx);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-time-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-adress-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 28rpx;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 弹窗样式
|
|||
|
|
.popup-container {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
width: 100%;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|||
|
|
|
|||
|
|
// 头部区域
|
|||
|
|
.header-bar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #f1f1f1;
|
|||
|
|
|
|||
|
|
.avatar-name-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 124rpx;
|
|||
|
|
height: 124rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name-exp {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.exp-tag {
|
|||
|
|
padding: 0 22rpx 0 15rpx;
|
|||
|
|
height: 45rpx;
|
|||
|
|
background: #fff0f5;
|
|||
|
|
border-radius: 23rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #dc424c;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
width: fit-content;
|
|||
|
|
gap: 10rpx;
|
|||
|
|
|
|||
|
|
.exp-tag-icon {
|
|||
|
|
width: 27rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30rpx;
|
|||
|
|
top: 30rpx;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 服务信息区域
|
|||
|
|
.service-info {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-text {
|
|||
|
|
flex: 1;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 35rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 介绍文本
|
|||
|
|
.intro-text {
|
|||
|
|
padding-top: 25rpx;
|
|||
|
|
margin-bottom: 100rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.intro-text-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确定按钮
|
|||
|
|
.confirm-btn {
|
|||
|
|
margin: 0 21rpx;
|
|||
|
|
width: 648rpx;
|
|||
|
|
height: 94rpx;
|
|||
|
|
background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.9;
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 新的门店显示样式
|
|||
|
|
.popup-shop-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.popup-shop-label {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-shop-tags {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
|
|||
|
|
.popup-shop-tag {
|
|||
|
|
padding: 4rpx 12rpx;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 所属门店样式
|
|||
|
|
.detail-info-user__company__name {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #FFF5F6;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
border: 1rpx solid #FFD0DC;
|
|||
|
|
padding-right: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 21rpx;
|
|||
|
|
width: fit-content;
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
margin-bottom: 5rpx;
|
|||
|
|
padding: 2rpx 10rpx;
|
|||
|
|
max-width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #a7abae;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__line {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #D2C7C7;
|
|||
|
|
border-radius: 1rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__text1 {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__text2 {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #855151;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
max-width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__text2__img {
|
|||
|
|
width: 15rpx;
|
|||
|
|
height: 8rpx;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__card {
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
width: 39rpx;
|
|||
|
|
height: 34rpx;
|
|||
|
|
background: rgba(212, 215, 223, 0.2);
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
border: 1rpx solid rgba(169, 172, 179, 0.2);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
.detail-info-user__company__name__card__img {
|
|||
|
|
width: 22rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sj-pop {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 60rpx;
|
|||
|
|
right: -34rpx;
|
|||
|
|
width: 358rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0rpx 1rpx 8rpx 2rpx #E6E6E6;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
/* 新增圆角，更美观 */
|
|||
|
|
z-index: 9999;
|
|||
|
|
/* 新增层级，避免被遮挡 */
|
|||
|
|
max-height: 400rpx;
|
|||
|
|
overflow: visible;
|
|||
|
|
|
|||
|
|
/* 新增：三角形箭头样式 */
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
/* 比主体层向下偏移1rpx（对应阴影vertical:1rpx） */
|
|||
|
|
right: 58rpx;
|
|||
|
|
/* 向左微调，让阴影向两侧扩散 */
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
/* 尺寸比主体大2rpx（对应阴影spread:2rpx），模拟扩散效果 */
|
|||
|
|
border-width: 0 20rpx 18rpx 18rpx;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: transparent transparent #E6E6E6 transparent;
|
|||
|
|
/* 阴影颜色 */
|
|||
|
|
z-index: 1;
|
|||
|
|
/* 层级低于主体 */
|
|||
|
|
/* 核心：模拟box-shadow的blur:8rpx模糊效果 */
|
|||
|
|
filter: blur(2rpx);
|
|||
|
|
/* 适配rpx的模糊值，视觉匹配8rpx的box-shadow模糊 */
|
|||
|
|
opacity: 0.8;
|
|||
|
|
/* 弱化阴影，更贴近原风格 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 第二步：三角形主体层（白色，覆盖阴影层中间，只露边缘阴影） */
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -16rpx;
|
|||
|
|
right: 60rpx;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-width: 0 18rpx 16rpx 16rpx;
|
|||
|
|
border-style: solid;
|
|||
|
|
border-color: transparent transparent #FFFFFF transparent;
|
|||
|
|
/* 主体白色 */
|
|||
|
|
z-index: 2;
|
|||
|
|
/* 层级高于阴影层 */
|
|||
|
|
/* 可选：给主体加极轻微阴影，增强层次感 */
|
|||
|
|
filter: drop-shadow(0rpx 1rpx 1rpx rgba(230, 230, 230, 0.3));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.sj-pop-item {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #F1F1F1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sj-pop-item:last-child {
|
|||
|
|
margin-bottom: 0rpx;
|
|||
|
|
padding-bottom: 0rpx;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 选中状态样式 */
|
|||
|
|
.sj-pop-item.active {
|
|||
|
|
color: #E8101E ;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//list样式
|
|||
|
|
.common-list {
|
|||
|
|
background-color: #fafafa !important;
|
|||
|
|
padding-bottom: 0rpx;
|
|||
|
|
|
|||
|
|
::v-deep .list-scroll {
|
|||
|
|
margin-top: 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .list-container {
|
|||
|
|
padding: 0rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|