recycapp/pages/index/index.vue

1290 lines
32 KiB
Vue
Raw Normal View History

2025-10-22 20:28:50 +08:00
<template>
<view class="content">
2025-10-25 19:46:23 +08:00
<view class="topStatus"></view>
2025-10-22 20:28:50 +08:00
<view class="topBox">
2025-10-25 09:54:24 +08:00
<view class="flex-between headBox" style="height: 117rpx;padding-right: 35rpx;">
2025-10-22 20:28:50 +08:00
<view class="menuBox">
2025-10-25 09:54:24 +08:00
<view class="menuView flex-center" :class="{checkMenu: menuNum == 1}" @click="menuClick(1)">
2025-10-22 20:28:50 +08:00
抢单大厅
<view class="menuLine" v-show="menuNum == 1"></view>
</view>
2025-10-25 09:54:24 +08:00
<view class="menuView flex-center" :class="{checkMenu: menuNum == 2}" @click="menuClick(2)">
2025-10-22 20:28:50 +08:00
回收大堂
<view class="menuLine" v-show="menuNum == 2"></view>
</view>
</view>
<view class="cityBox flex-center">
南京市
</view>
</view>
</view>
<view class="contentBox">
2025-10-25 19:46:23 +08:00
<view class="menuBox1" v-show="menuNum == 1">
<view class="twoMenuBox">
<view class="notice flex-center" >
<view class="notice-icon">
<image class="icon " src="/static/img/news.png" mode=""></image>
</view>
<view class="notice-row flex1" >
<text class=" ">{{notice}}</text>
</view>
2025-10-25 09:54:24 +08:00
</view>
2025-10-25 19:46:23 +08:00
<view class="flex-between" style="margin-top: 30rpx;">
<view>
<view class="orderLabel flex-center">
<view class="leftLine"></view>
订单列表
</view>
</view>
<view class="flex-center">
<view class="flex-center selectBox">
<view>全部需求</view>
<u-icon name="arrow-down" color="#333333" size="12" style="margin-left: 13rpx;"></u-icon>
</view>
<view class="flex-center selectBox">
<view>距离最近</view>
<u-icon name="arrow-down" color="#333333" size="12" style="margin-left: 13rpx;"></u-icon>
</view>
</view>
</view>
</view>
<view class="blockBox1"></view>
2025-10-26 16:36:59 +08:00
<view class="orderBox" v-for="item in qiangdanArr" @click="goDetail(item.id)">
2025-10-25 19:46:23 +08:00
<view class="flex-between">
<view class="flex-center">
<image :src="path+'/assets/img/icon/yu.png'" style="width: 79rpx;height: 71rpx;margin-top: -25rpx;margin-left: -33rpx;margin-right: 21rpx;"></image>
<view class="timeLabel">{{countTime(item.order_time)}}分钟内</view>
2025-10-25 09:54:24 +08:00
<view class="timeLabel2">(10:17)上门</view>
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 19:46:23 +08:00
<view class="distant">{{item.distance}}公里</view>
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 09:54:24 +08:00
<view class="flex-between addressBox">
2025-10-25 19:46:23 +08:00
<view class="addressText">{{item.full_address}}</view>
2025-10-25 09:54:24 +08:00
<view class="addressBtn">导航</view>
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 09:54:24 +08:00
<view class="flex-between goodsWrap">
<view class="goodsBox1 flex-center" style="width: 40%;">
2025-10-25 19:46:23 +08:00
<image :src="item.type_image" class="goodsImg"></image>
2025-10-25 09:54:24 +08:00
<view>
<view class="goodsText1">回收品类</view>
2025-10-25 19:46:23 +08:00
<view class="goodsText2">{{item.type_name}}</view>
2025-10-25 09:54:24 +08:00
</view>
</view>
<view class="goodsBox2 flex-column-center" style="width: 20%;">
<view class="goodsText1">数量</view>
2025-10-25 19:46:23 +08:00
<view class="goodsText2">X{{item.quantity}}</view>
2025-10-25 09:54:24 +08:00
</view>
<view class="goodsBox3 flex-column-center" style="width: 40%;">
<view class="goodsText1">预估价</view>
<view class="flex-center">
<view class="priceIcon"></view>
2025-10-25 19:46:23 +08:00
<view class="priceNum">{{item.price}}</view>
2025-10-25 09:54:24 +08:00
</view>
</view>
</view>
2025-10-25 19:46:23 +08:00
<view class="remarkBox">备注{{item.remark}}</view>
2025-10-25 09:54:24 +08:00
<view class="flex-between userBox">
<view class="flex-center">
<image src="/static/img/39.png" class="userImg"></image>
2025-10-25 19:46:23 +08:00
<view>{{item.accept_name}}</view>
2025-10-25 09:54:24 +08:00
</view>
<view class="userBtn flex-center">
抢单
</view>
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 09:54:24 +08:00
</view>
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 19:46:23 +08:00
<view class="menuBox2" v-show="menuNum == 2">
2025-10-25 09:54:24 +08:00
<view class="navbar">
<view v-for="item in tabAll" class="item" :class="[tabCur==item.id?'on':'']" @click="selectTab(item.id)">
{{item.name}}
</view>
<view class="orderText">改派订单</view>
</view>
<view class="navbar2 flex-around">
<view v-for="item in tabs" class="navItem" :class="[tabCur==item.id?'navItemCheck':'']" @click="selectTab(item.id)">
{{item.name}}
</view>
</view>
<view style="height: 195rpx;"></view>
2025-10-25 19:46:23 +08:00
<!-- {{recycleList}} -->
2025-10-26 16:36:59 +08:00
<view class="orderBox" v-for="item in recycleList" @click="goDetail(item.id)">
2025-10-25 09:54:24 +08:00
<view class="flex-between">
<view class="flex-center">
<view class="timeLabel">36分钟内</view>
<view class="timeLabel2">(10:17)上门</view>
</view>
<view class="distant">1.5公里</view>
</view>
<view class="flex-between addressBox">
2025-10-25 19:46:23 +08:00
<view class="addressText">{{item.accept_address}}</view>
2025-10-25 09:54:24 +08:00
<view class="addressBtn">导航</view>
</view>
<view class="flex-between goodsWrap">
<view class="goodsBox1 flex-center" style="width: 40%;">
<image src="/static/img/41.png" class="goodsImg"></image>
<view>
<view class="goodsText1">回收品类</view>
2025-10-25 19:46:23 +08:00
<view class="goodsText2">{{item.type_name}}</view>
2025-10-25 09:54:24 +08:00
</view>
</view>
<view class="goodsBox2 flex-column-center" style="width: 20%;">
<view class="goodsText1">数量</view>
2025-10-25 19:46:23 +08:00
<view class="goodsText2">X{{item.quantity}}</view>
2025-10-25 09:54:24 +08:00
</view>
<view class="goodsBox3 flex-column-center" style="width: 40%;">
<view class="goodsText1">预估价</view>
<view class="flex-center">
<view class="priceIcon"></view>
2025-10-25 19:46:23 +08:00
<view class="priceNum">{{item.price}}</view>
2025-10-25 09:54:24 +08:00
</view>
</view>
</view>
2025-10-25 19:46:23 +08:00
<view class="remarkBox">备注{{item.remark}}</view>
2025-10-25 09:54:24 +08:00
<view class="flex-between userBox">
<view class="flex-center">
<image src="/static/img/39.png" class="userImg"></image>
2025-10-25 19:46:23 +08:00
<view>{{item.accept_name}}</view>
2025-10-25 09:54:24 +08:00
</view>
2025-10-25 19:46:23 +08:00
<view class="flex-center contactText" @click="tellPhone(item.accept_mobile)">
2025-10-25 09:54:24 +08:00
<u-icon name="phone" color="#333333" size="16" style="margin-right: 7rpx;"></u-icon>
联系TA
</view>
</view>
<view class="lineEle"></view>
<view class="flex-between userBox">
<!-- <view class="flex-center statusText1">
期望时间(10:17)
</view> -->
<view class="flex-center statusText1">
2025-10-25 19:46:23 +08:00
<view @click="moreShow=!moreShow">更多操作</view>
<view class="floatBtnBox" v-show="moreShow">
<view class="floatBtnEle" @click="cancleClickOrder">取消订单</view>
2025-10-25 09:54:24 +08:00
<view class="btnLine"></view>
2025-10-25 19:46:23 +08:00
<view class="floatBtnEle" @click="changeClickOrder">改派订单</view>
2025-10-25 09:54:24 +08:00
</view>
</view>
<view class="flex-center">
<view class="userBtn2 flex-center">
修改预约
</view>
<view class="userBtn flex-center">
抢单
</view>
</view>
</view>
</view>
</view>
<!-- <view class='pinlei' >
2025-10-22 20:28:50 +08:00
<view class='pinlei-title' >请选择回收品类</view>
</view>
<view class="imgnavbar">
<view class="imgnavbar-list" v-if="limit == '3' || limit == '4' || limit == '5'"
v-bind:class="'row'+limit">
<view class="imgnavbar-item" ref="imgwitem" v-for="(item, index2) in typelist" :key="index2" @click="gotype(item.id)">
<image class="imgnavbar-item-img" :src="item.image" mode="aspectFill" ></image>
<view class="imgnavbar-item-text">{{item.name}}</view>
</view>
</view>
</view>
2025-10-25 09:54:24 +08:00
<view class="lc" v-if="index_img"><image class="imgnavbar-item-img" mode="aspectFill" :src="index_img" ></image></view> -->
2025-10-22 20:28:50 +08:00
<!-- 常见问题 -->
2025-10-25 09:54:24 +08:00
<!-- <view class='problem_header' >
2025-10-22 20:28:50 +08:00
<view class='left' >常见问题</view>
<view class="right" @click="gopage()">更多</view>
</view>
<view class="problem " v-if="question_list.length>0">
<view class="problem_main">
<view class="li" v-for="(item,index) in question_list" :key="index" @click="show(index)">
<view class="left">
<view class="left_2">{{item.name}}</view>
<view class="left_1" >
<image v-if="item.is_show==1" class="icon" src="/static/img/up.png" mode=""></image>
<image v-if="item.is_show==0" class="icon" src="/static/img/down.png" mode=""></image>
</view>
</view>
<view class="left " v-if="item.is_show==1">
<view class="left_3"><text style="white-space: pre-wrap;line-height: 20px;">{{item.content}}</text></view>
</view>
</view>
</view>
2025-10-25 09:54:24 +08:00
</view> -->
<!-- <view style="margin-bottom: 100px;
padding-bottom: 30px;"></view> -->
2025-10-22 20:28:50 +08:00
</view>
2025-10-25 09:54:24 +08:00
<!-- <u-popup :show="cancleShow" @close="close" @open="open" :round="30">
<view class="cancleBox">
<view class="flex-between">
<text class="cancleTitle">取消原因</text>
<u-icon name="close" color="#333333" size="16" bold></u-icon>
</view>
<view class="" v-for="item in cancleList">
<view class="checkBox">
<image v-if="cancleType==item.id" @click="selecCancle(0)" :src="path+'/assets/img/icon/selected.png'" class="checkIcon"></image>
<image v-else @click="selecCancle(item.id)" :src="path+'/assets/img/icon/noSelected.png'" class="checkIcon"></image>
<view class="checkText" :class="{checkEle:cancleType==item.id}">
{{item.name}}
</view>
</view>
<view>
<text>上传现场照片或备注已电联确认</text>
</view>
</view>
</view>
</u-popup> -->
<u-popup :show="signInShow" @open="open" mode="center" :round="30">
<view class="popBoxOne">
<image :src="path+'/assets/img/icon/star1.png'" class="popOneImg"></image>
<text class="popOneText1">上门签到成功</text>
<text class="popOneText2">上门服务请仔细核对回收货物</text>
<text class="popOneText3">祝您与用户合作愉快~</text>
<view class="popOneBtn flex-center">好的</view>
</view>
</u-popup>
<u-popup :show="pop2Show" @open="open" mode="center" :round="30">
<view class="popBoxTwo">
<image :src="path+'/assets/img/icon/bg4.png'" class="popTwoImg"></image>
<view class="popContent">
<text class="popTwoText1">工作证</text>
<text class="popTwoText2">张天辰</text>
<text class="popTwoText3">工号GH02301~</text>
<image :src="path+'/assets/img/icon/bg4.png'" class="popTowHeadImg"></image>
<view class="flex-center" style="margin-top: 40rpx;">
<view class="flex-center">
<text class="text1">人身保险</text>
<view class="status">已上传</view>
</view>
<view class="flex-center" style="margin-left: 37rpx;">
<text class="text1">健康证</text>
<view class="status">已上传</view>
</view>
</view>
<view class="popTwoText4">高空作业证</view>
</view>
</view>
</u-popup>
<u-popup :show="pop3Show" @open="open" mode="center" :round="30">
<view class="popBoxThree">
<view class="popThreeText1">上门服务条款</view>
<view class="popThreeLine"></view>
<view class="popThreeText2">
预约方式
通过小程序提交家电信息品牌/型号/使用年限/现状描述
选择上门时间建议工作日9:00-17:00
上门评估
工作人员将现场验机并确认最终回收价
线上估价仅供参考实际价格可能因市场波动调整
完成回收
确认价格后立即完成搬运
结算方式小程序账户余额/微信支付
用户注意事项
家电要求
基本完整且具备回收价值
严重损坏需提前告知可能影响回收价
保证来源合法且具有完整处置权
配合事项
提供必要身份证明大件家电建议准备购买凭证
确保作业面安全空调外机需提供安全作业条件
隐私保护声明
收集信息仅用于服务履约地址/联系方式/家电型号
设备数据将按国家标准彻底清除覆盖写入3次以上
个人信息存储不超过2年
特别提示
高空作业空调外机回收需额外签署安全协议
价格差异市场价波动超过15%时可能调整回收价
环保处理所有回收家电将交由资质企业环保拆解
服务承诺
工作人员持证上岗规范操作
专业工具搬运造成损失按市价赔偿
服务投诉24小时内响应客服电话400-xxx-xxxx
</view>
<view class="flex-center" style="margin-top: 17rpx;">
<view class="popThreeBtn1">不同意</view>
<view class="popThreeBtn2">同意</view>
</view>
</view>
</u-popup>
2025-10-25 19:46:23 +08:00
<u-popup :show="pop4Show" @close="pop4Show = false" @open="open" mode="center" :round="30">
2025-10-25 09:54:24 +08:00
<view class="pop4Box">
<view class="flex-between" style="padding: 51rpx 55rpx 0;">
<text class="pop4Title">改派原因</text>
2025-10-25 19:46:23 +08:00
<u-icon @click="pop4Show = false" name="close" color="#333333" size="16" bold></u-icon>
2025-10-25 09:54:24 +08:00
</view>
<u--textarea v-model="notesText" placeholder="请填写改派原因" class="pop4Input" style="background: #EFEFEF;border: none"></u--textarea>
<view class="flex-center" style="margin-top: 55rpx;">
2025-10-25 19:46:23 +08:00
<view class="pop4Btn1" @click="pop4Show = false">取消改派</view>
2025-10-25 09:54:24 +08:00
<view class="pop4Btn2">确认改派</view>
</view>
</view>
</u-popup>
<cancleOrder :cancleShow="cancleShow" @closeCancle="cancleShow=false"></cancleOrder>
<custom-tab-bar :current-page="0" />
2025-10-22 20:28:50 +08:00
</view>
</template>
<script>
2025-10-25 09:54:24 +08:00
import CustomTabBar from '@/components/CustomTabBar.vue';
import cancleOrder from './cancleOrder.vue';
2025-10-22 20:28:50 +08:00
export default {
data() {
return {
jscode:'',
limit:3,
typelist: [],
banner:[],
notice:'',
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
current:0,
index_img:'',
question_list:'',
2025-10-25 09:54:24 +08:00
menuNum: 1,
tabAll: [
{
id: 0,
name: '全部'
}
],
tabs: [
// {
// id: 0,
// name: '全部'
// },
{
id: 1,
name: '待接单'
},
{
id: 2,
name: '已预约'
},
{
id: 3,
name: '待服务'
},
{
id: 4,
name: '已完成'
},
{
id: 5,
name: '已评价'
},
{
id: 6,
name: '已取消'
}
],
tabCur: 0,
recycleList: [],
2025-10-25 19:46:23 +08:00
qiangdanArr: [],
2025-10-25 09:54:24 +08:00
page: 1,
orderList: [],
cancleShow:false,
signInShow: false,
pop2Show: false,
pop3Show: false,
2025-10-25 19:46:23 +08:00
pop4Show: false,
notesText: '',
moreShow: false
2025-10-22 20:28:50 +08:00
}
},
2025-10-25 09:54:24 +08:00
components: {
CustomTabBar,
cancleOrder
},
2025-10-25 19:46:23 +08:00
computed: {
countTime: function(){
return function(val){
console.log(val,'ddd')
// let nowTime = new Date().getTime()
// let valTime = new Date(val).getTime()
// console.log(valTime - nowTime)
// if(valTime>nowTime){
// return (valTime - nowTime)/1000/60
// }else{
// }
// return (nowTime - valTime)/1000
const date1 = new Date();
const date2 = new Date(val);
const diffInMs = Math.abs(date2 - date1); // 计算两个日期之间的差异(毫秒)
const diffInMinutes = Math.round(diffInMs / (1000 * 60)); // 将毫秒转换为分钟
return diffInMinutes;
}
}
},
2025-10-22 20:28:50 +08:00
onShow() {
2025-10-25 09:54:24 +08:00
uni.hideTabBar({
fail: () => {},
});
2025-10-25 10:55:02 +08:00
// this.getdata()
// this.config()
2025-10-22 20:28:50 +08:00
},
onHide() {
},
onLoad() {
2025-10-25 10:55:02 +08:00
// this.getdata()
// this.getquestion()
2025-10-25 09:54:24 +08:00
this.recycleOrderList()
this.qiangdanlist()
2025-10-22 20:28:50 +08:00
},
onShareAppMessage(res) {
if (res.from === 'button') {
}
return {
title: '',
imageUrl: ''
}
},
onReachBottom (){
},
2025-10-25 09:54:24 +08:00
methods: {
2025-10-26 16:36:59 +08:00
goDetail(id){
uni.navigateTo({
url:'../order/detail?id=' + id
})
},
2025-10-25 19:46:23 +08:00
cancleClickOrder(){
this.cancleShow = true
this.moreShow = false
},
changeClickOrder(){
this.pop4Show = true
this.moreShow = false
},
2025-10-25 09:54:24 +08:00
selectTab(id){
this.page=1
this.tabCur = id
this.recycleList = []
},
recycleOrderList(){
console.log('fffffffff')
let data = {
status: '',
page: 1
}
this.$api.recycleOrderList(data,res=>{
if(res.code == '1'){
2025-10-25 19:46:23 +08:00
console.log(res.data.list,res.data.list.data,'dddd')
this.recycleList = res.data.list.data
2025-10-25 09:54:24 +08:00
}
})
},
qiangdanlist(){
console.log('fffffffff')
let data = {
type_id: this.tabCur,
page: 1,
limit: 10
}
this.$api.qiangdanlist(data,res=>{
if(res.code == '1'){
2025-10-25 19:46:23 +08:00
this.qiangdanArr = res.data.list.data
// this.recycleList = res.data.type
2025-10-25 09:54:24 +08:00
}
})
},
2025-10-22 20:28:50 +08:00
menuClick(val){
this.menuNum = val
},
gotype(id){
uni.navigateTo({
url:'../type/type?id='+id
})
},
getdata(){
let data = {
}
this.$api.indexpage(data,res=>{
if(res.code == '1'){
this.typelist = res.data.type
this.banner = res.data.banner
this.notice = res.data.notice
this.limit = res.data.nav_num
}
})
},
config(){
this.$api.config({}, res => {
if (res.code == "1") {
this.index_img = res.data.index_img;
if(res.data.sitename){
uni.setNavigationBarTitle({
title: res.data.sitename
});
}
}else{
}
})
},show(index){
var question_list = this.question_list;
question_list.forEach((item,index2) => {
if(index == index2){
question_list[index2].is_show = item.is_show==1 ? 0: 1;
}
})
this.question_list = question_list;
},
getquestion(){
let data={page:1,limit:10}
this.$api.question_list(data,res=>{
if(res.code == '1'){
this.question_list= res.data.list.data
}
})
},
gopage(){
uni.navigateTo({
url:'/pages/question/index'
})
},
}
}
</script>
<style lang="scss">
page {
background: rgba(251, 249, 256, 1)
}
.topBox{
background: linear-gradient(0deg, #FFF8F2 0%, #FFFBED 100%);
overflow: hidden;
2025-10-25 19:46:23 +08:00
// padding-bottom: 6rpx;
height: calc(118rpx + var(--status-bar-height));
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
2025-10-22 20:28:50 +08:00
}
.topStatus{
2025-10-25 19:46:23 +08:00
// height: var(--status-bar-height); //这里是状态栏css变量
height: calc(118rpx + var(--status-bar-height));
2025-10-22 20:28:50 +08:00
}
.menuBox{
display: flex;
2025-10-25 09:54:24 +08:00
padding: 20rpx 0 0;
padding-left: 15rpx;
2025-10-22 20:28:50 +08:00
.menuView{
font-weight: 500;
font-size: 28rpx;
color: #AE8F71;
2025-10-25 09:54:24 +08:00
padding: 0 21rpx;
position: relative;
2025-10-22 20:28:50 +08:00
.menuLine{
width: 80rpx;
height: 10rpx;
border-radius: 2rpx;
background: linear-gradient(to right, #FFF8EF, #ED7B29);
2025-10-25 09:54:24 +08:00
margin-top: -12rpx;
position: absolute;
bottom: 0;
left: 21rpx;
2025-10-22 20:28:50 +08:00
}
}
.checkMenu{
font-weight: bold;
font-size: 34rpx;
color: #221B16;
}
}
.cityBox{
padding: 0 25rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 30rpx;
font-weight: 500;
font-size: 26rpx;
color: #333333;
}
.contentBox{
padding: 0 35rpx;
}
.selectBox{
background: #F2F2F2;
border-radius: 25rpx;
font-weight: 500;
font-size: 24rpx;
color: #333333;
2025-10-25 19:46:23 +08:00
padding: 0rpx 22rpx;
height: 50rpx;
line-height: 50rpx;
2025-10-22 20:28:50 +08:00
}
.selectBox:first-child{
margin-right: 14rpx;
}
.goodsImg{
width: 80rpx;
height: 80rpx;
background: #FFC90E;
border-radius: 20rpx;
margin-right: 22rpx;
}
.goodsWrap{
background: #FFF9F5;
border-radius: 20rpx;
2025-10-25 09:54:24 +08:00
padding: 14rpx 16rpx;
margin-top: 22rpx;
2025-10-22 20:28:50 +08:00
}
.goodsBox1{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.goodsBox3{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding-right: 30rpx;
}
.goodsText1{
font-weight: 500;
font-size: 22rpx;
color: #333333;
margin-bottom: 10rpx;
}
.goodsText2{
font-weight: 500;
font-size: 30rpx;
color: #333333;
}
.priceIcon{
font-weight: 500;
font-size: 24rpx;
color: #ED6343;
}
.priceNum{
font-weight: 500;
font-size: 36rpx;
color: #ED6343;
}
.userBox{
font-weight: bold;
font-size: 28rpx;
2025-10-25 09:54:24 +08:00
color: #333333;
margin-top: 25rpx;
padding-left: 6rpx;
2025-10-22 20:28:50 +08:00
}
.userImg{
width: 42rpx;
height: 42rpx;
margin-right: 14rpx;
}
.userBtn{
width: 184rpx;
height: 60rpx;
background: #FB8F0C;
border-radius: 30rpx;
2025-10-25 09:54:24 +08:00
font-size: 24rpx;
color: #FFFFFF;
margin-left: 10rpx;
}
.userBtn2{
width: 184rpx;
height: 60rpx;
border: 1px solid #FB8F0C;
border-radius: 30rpx;
font-size: 24rpx;
color: #FB8F0C;
margin-left: 10rpx;
2025-10-22 20:28:50 +08:00
}
.addressBox{
margin-top: 20rpx;
.addressText{
font-weight: 400;
font-size: 24rpx;
color: #333333;
width: 405rpx;
overflow: hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
}
}
.orderBox{
background: #FFFFFF;
box-shadow: 0px 8rpx 27rpx 0px rgba(255,141,75,0.08);
border-radius: 30rpx;
margin-top: 20rpx;
padding: 25rpx 33rpx;
}
.pinlei{background-color: #fff; padding: 15px 0px 1px 5px;
}
.pinlei-title { border-left: solid 3px #46b45d;padding-left: 4px;font-size: 30rpx;
color: #333; font-weight: bold;}
.imgnavbar {
width: 100%;
background-color: #fff; margin-bottom: 8px;
}
.imgnavbar-list {
overflow: hidden;
padding: 24upx 0 0;
width: 96%;
margin: 0 auto;
}
.imgnavbar-list .imgnavbar-item {
height: auto;
float: left;
padding: 0upx 10upx;
margin-bottom: 30upx;
margin-top: 12upx;
text-align: center;
}
.imgnavbar-list .imgnavbar-item image {
width: 86upx;
height: 86upx;
margin-bottom: 6upx;
}
.imgnavbar-item-text {
font-size: 26upx;
color: #666;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgnavbar-list.row3 .imgnavbar-item {
width: 33.3%;
}
.imgnavbar-list.row4 .imgnavbar-item {
width: 25%;
}
.imgnavbar-list.row5 .imgnavbar-item {
width: 20%;
}
.imgnavbar-list.row5 .imgnavbar-item .imgnavbar-item-text {
font-size: 30upx;
}
.notice {
2025-10-25 19:46:23 +08:00
// padding: 15rpx 26rpx 15rpx 60rpx;
height: 70rpx;
2025-10-22 20:28:50 +08:00
margin-top: 10rpx;
position: relative;
overflow: hidden;
background-color: #fff;
color: #333;
2025-10-25 19:46:23 +08:00
// margin-bottom: 16rpx;
2025-10-22 20:28:50 +08:00
background: #FFECEB;
2025-10-25 19:46:23 +08:00
border-radius: 16rpx;
width: 100%;
2025-10-25 09:54:24 +08:00
// border: 1px solid #FFFFFF;
2025-10-22 20:28:50 +08:00
}
.notice-icon {
display: inline-block;
height: 40rpx;
position: absolute;
top: 59%;
left: 26rpx;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
overflow: hidden;
}
.notice-icon image {
width: 30rpx;
height: 30rpx;
float: left;
}
.notice-row {
margin-left: 10rpx;
height: 50rpx;
line-height: 50rpx;
width: 672rpx;
display: inline-block;
font-size: 28rpx;
float: left;
}
.nav{
height: 300rpx;
width: 100%;
.swiper{
height: 300rpx;
width: 100%;
overflow: hidden;
image{
height: 300rpx;
width: 100%;
}
}
}
.lc{
margin-bottom: 6px; }
.lc image{height: 248rpx;width:100%}
.problem_header{
background-color: #fff;
padding: -2px 0px 1px 5px;
justify-content: space-between;
display: flex;
.left{ border-left: solid 3px #46b45d;
padding-left: 4px;
font-size: 30rpx;
color: #333;
font-weight: bold;margin-left: 4px;
margin-top: 15px;
}
.right{ float: right;
margin-right: 25px;
font-size: 12px;
margin-top: 15px;
}
}
.problem{
background-color: #fff;
.problem_main{
width: 92%;
margin: 0 auto;padding-bottom: 10px;
.li{
padding-top: 20rpx;
border-bottom: 1px solid #eee;
.left{
overflow: hidden;
margin-bottom: 20rpx;
.left_1{
float: left;
height: 4vh;
width: 4vh;
}
.left_2{
font-size: 30rpx;
float:left;
width: 90%;
}
.left_3{
font-size: 24rpx;
float:left;
width: 92%;color: #676767;padding-left: 12px;
}
}
}
.li:last-child{
border: none;
}
}
}
2025-10-25 09:54:24 +08:00
.orderLabel{
font-weight: bold;
font-size: 28rpx;
color: #333333;
.leftLine{
height: 25rpx;
border-left: 9rpx solid #FB8F0C;
margin-right: 10rpx;
}
}
.addressBtn{
background: #FFF4E6;
border-radius: 22rpx;
padding: 10rpx 23rpx;
font-weight: 500;
font-size: 24rpx;
color: #FB8F0C;
}
.remarkBox{
background: #F2F2F2;
border-radius: 20rpx;
padding: 23rpx 28rpx;
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-top: 10rpx;
}
.timeLabel{
font-weight: bold;
font-size: 28rpx;
color: #FB8F0C;
}
.timeLabel2{
font-weight: bold;
font-size: 28rpx;
color: #333333;
margin-left: 21rpx;
}
.distant{
font-weight: 500;
font-size: 22rpx;
color: #333333;
}
.navbar {
/* #ifdef H5 */
// margin-top:44px;
/* #endif */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding-left: 66rpx;
height: 90rpx!important;
2025-10-25 19:46:23 +08:00
top: calc(118rpx + var(--status-bar-height));
z-index: 99;
2025-10-25 09:54:24 +08:00
// height: 55rpx;
}
.navbar .item {
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333333;
// line-height: 66rpx;
border-bottom-color: #FB8F0C;
border-bottom: 9rpx solid #FB8F0C;
color: #282828;
box-sizing: border-box;
// margin-top: 40rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-bottom: 22rpx;
}
.navbar2{
position: fixed;
// top: 95px!important;
left: 0;
width: 100%;
top: 101px;
background: #F5F5FA;
z-index: 999;
padding: 10rpx 10rpx;
top: calc(207rpx + var(--status-bar-height));
}
.navItem{
background: #FFF;
border-radius: 10rpx;
border: 1px solid #FFF;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding: 23rpx 15rpx;
}
.navItemCheck{
border: 1px solid #FFD39E;
background: #FFFDFB;
color: #FB8F0C;
}
.headBox{
margin-top: var(--status-bar-height);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 16rpx;
}
.orderText{
font-weight: 500;
font-size: 24rpx;
color: #333333;
padding-right: 39rpx;
}
.contactText{
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
.lineEle{
border-bottom:1rpx solid #DEDEDE;
margin-top: 29rpx;
}
.statusText1{
font-weight: 400;
font-size: 28rpx;
color: #333333;
position: relative;
}
.floatBtnBox{
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 46rpx 0rpx rgba(112,78,38,0.15);
border-radius: 10rpx;
width: 147rpx;
padding: 18rpx 0rpx;
text-align: center;
bottom: 60rpx;
left: 0;
}
.floatBtnEle{
padding: 20rpx 0;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
.floatBtnEle:first-child{
// border-bottom: 1rpx solid #DEDEDE;
}
.btnLine{
width: 99rpx;
border-bottom: 1rpx solid #DEDEDE;
}
.popBoxOne{
width: 520rpx;
height: 620rpx;
background: linear-gradient(0deg, #FFFFFF 0%, #FFF3EA 100%);
border-radius: 30rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.popOneImg{
width: 429rpx;
height: 429rpx;
position: absolute;
top: -182rpx;
left: 0;
right: 0;
margin: 0 auto;
}
.popOneText1{
font-weight: bold;
font-size: 36rpx;
color: #181622;
margin-top: 205rpx;
}
.popOneText2{
font-weight: 500;
font-size: 26rpx;
color: #181622;
margin-top: 26rpx;
}
.popOneText3{
font-weight: 500;
font-size: 26rpx;
color: #181622;
}
.popOneBtn{
width: 260rpx;
height: 90rpx;
background: #FB8F0C;
border-radius: 45rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
margin-top: 72rpx;
}
}
.popBoxTwo{
width: 520rpx;
height: 800rpx;
.popTwoImg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.popContent{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.popTwoText1{
font-weight: bold;
font-size: 48rpx;
color: #7F5C2A;
line-height: 60rpx;
margin-top: 106rpx;
}
.popTwoText2{
font-weight: bold;
font-size: 36rpx;
color: #4F3D24;
margin-top: 29rpx;
}
.popTwoText3{
font-weight: 400;
font-size: 24rpx;
color: #B8A58B;
}
.popTwoText4{
width: 420rpx;
height: 60rpx;
line-height: 60rpx;
padding-left: 27rpx;
background: rgba(255,141,96,0.1);
border-radius: 10rpx;
// opacity: 0.1;
font-weight: 400;
font-size: 24rpx;
color: #C56742;
margin-top: 15rpx;
}
.popTowHeadImg{
width: 300rpx;
height: 300rpx;
background: #FCA30D;
border-radius: 30rpx;
margin-top: 23rpx;
}
.text1{
font-weight: 500;
font-size: 24rpx;
color: #000000;
}
.status{
width: 80rpx;
height: 36rpx;
line-height: 36rpx;
background: #FF8D60;
border-radius: 10rpx;
font-weight: 500;
font-size: 20rpx;
color: #FFFFFF;
margin-left: 9rpx;
text-align: center;
}
}
}
.popBoxThree{
width: 620rpx;
height: 900rpx;
background: linear-gradient(0deg, #FFFFFF 0%, #FFF6F1 100%);
border-radius: 30rpx;
border: 2px solid #FFFFFF;
.popThreeText1{
font-weight: bold;
font-size: 36rpx;
color: #000000;
text-align: center;
margin-top: 46rpx;
}
.popThreeLine{
width: 40rpx;
height: 9rpx;
background: #FF907A;
margin: 17rpx auto;
}
.popThreeText2{
width: 530rpx;
height: 616rpx;
font-weight: 400;
font-size: 28rpx;
color: #000000;
overflow: auto;
margin: 22rpx auto
}
.popThreeBtn1{
width: 260rpx;
height: 80rpx;
line-height: 80rpx;
background: #F6F6F6;
border-radius: 40rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
text-align: center;
}
.popThreeBtn2{
width: 260rpx;
height: 80rpx;
line-height: 80rpx;
background: #FB7D06;
border-radius: 40rpx;
font-weight: 500;
font-size: 28rpx;
color: #fff;
text-align: center;
margin-left: 20rpx;
}
}
.pop4Box{
width: 640rpx;
height: 480rpx;
background: #FFFFFF;
border-radius: 30rpx;
.pop4Title{
font-weight: bold;
font-size: 36rpx;
color: #000000;
}
.pop4Input{
width: 560rpx;
height: 173rpx;
background: #EFEFEF;
border-radius: 7rpx;
margin: 29rpx auto 0;
}
.pop4Btn1{
width: 260rpx;
height: 80rpx;
line-height: 80rpx;
background: #F6F6F6;
border-radius: 40rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
text-align: center;
}
.pop4Btn2{
width: 260rpx;
height: 80rpx;
line-height: 80rpx;
background: #FB7D06;
border-radius: 40rpx;
font-weight: 500;
font-size: 28rpx;
color: #fff;
text-align: center;
margin-left: 20rpx;
}
}
2025-10-25 19:46:23 +08:00
.twoMenuBox{
position: fixed;
top: calc(118rpx + var(--status-bar-height));
left: 0;
padding: 0 35rpx 16rpx;
box-sizing: border-box;
width: 100%;
background: #FBF9F7;
z-index: 99;
}
.blockBox1{
height: 165rpx;
}
2025-10-22 20:28:50 +08:00
</style>