recycapp/pages/index/index.vue
2025-11-03 19:57:37 +08:00

1558 lines
39 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="topStatus"></view>
<view class="topBox">
<view class="flex-between headBox" style="height: 117rpx;padding-right: 35rpx;">
<view class="menuBox">
<view class="menuView flex-center" :class="{checkMenu: menuNum == 1}" @click="menuClick(1)">
抢单大厅
<view class="menuLine" v-show="menuNum == 1"></view>
</view>
<view class="menuView flex-center" :class="{checkMenu: menuNum == 2}" @click="menuClick(2)">
回收大堂
<view class="menuLine" v-show="menuNum == 2"></view>
</view>
</view>
<view class="cityBox flex-center">
{{cityText||'选择城市'}}
</view>
</view>
</view>
<view class="contentBox">
<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>
</view>
<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>
<view class="orderBox" v-for="item in qiangdanArr" @click="goDetail(item.id)">
<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> -->
<view class="timeLabel2">{{item.order_time_text}}</view>
</view>
<view class="distant">{{item.distance}}公里</view>
</view>
<view class="flex-between addressBox">
<view class="addressText">{{item.full_address}}</view>
<view class="addressBtn">导航</view>
</view>
<view class="flex-between goodsWrap">
<view class="goodsBox1 flex-center" style="width: 40%;">
<image :src="item.type_image" class="goodsImg"></image>
<view>
<view class="goodsText1">回收品类</view>
<view class="goodsText2">{{item.type_name}}</view>
</view>
</view>
<view class="goodsBox2 flex-column-center" style="width: 20%;">
<view class="goodsText1">数量</view>
<view class="goodsText2">X{{item.quantity}}</view>
</view>
<view class="goodsBox3 flex-column-center" style="width: 40%;">
<view class="goodsText1">预估价</view>
<view class="flex-center">
<view class="priceIcon">¥</view>
<view class="priceNum">{{item.price}}</view>
</view>
</view>
</view>
<view class="remarkBox">备注:{{item.remark}}</view>
<view class="flex-between userBox">
<view class="flex-center">
<image src="/static/img/39.png" class="userImg"></image>
<view>{{item.accept_name}}</view>
</view>
<view class="userBtn flex-center" @click.stop="setorder(item.id)">
抢单
</view>
</view>
</view>
<view class="flex-center noMore" v-show="page1==lastPage1">没有更多了</view>
</view>
<view class="menuBox2" v-show="menuNum == 2">
<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>
<view class="orderBox" v-show="item.status==tabCur || tabCur=='0'" v-for="item in recycleList" @click="goDetail(item.id)">
<view class="flex-between">
<view class="flex-center">
<!-- <view class="timeLabel">36分钟内</view> -->
<view class="timeLabel2">{{item.order_time_text}}</view>
</view>
<view class="distant">1.5公里</view>
</view>
<view class="flex-between addressBox">
<view class="addressText">{{item.accept_address}}</view>
<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>
<view class="goodsText2">{{item.type_name}}</view>
</view>
</view>
<view class="goodsBox2 flex-column-center" style="width: 20%;">
<view class="goodsText1">数量</view>
<view class="goodsText2">X{{item.quantity}}</view>
</view>
<view class="goodsBox3 flex-column-center" style="width: 40%;">
<view class="goodsText1">预估价</view>
<view class="flex-center">
<view class="priceIcon">¥</view>
<view class="priceNum">{{item.price}}</view>
</view>
</view>
</view>
<view class="remarkBox">备注:{{item.remark}}</view>
<view class="flex-between userBox">
<view class="flex-center">
<image src="/static/img/39.png" class="userImg"></image>
<view>{{item.accept_name}}</view>
</view>
<view class="flex-center contactText" @click="tellPhone(item.accept_mobile)">
<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" v-show="item.status==7">
期望时间:{{item.order_time_text}}
</view>
<view class="flex-center statusText1" v-show="item.status==2">
<view @click.stop="moreShow=!moreShow">更多操作</view>
<view class="floatBtnBox" v-show="moreShow">
<view class="floatBtnEle" @click.stop="cancleClickOrder(item.id)">取消订单</view>
<view class="btnLine"></view>
<view class="floatBtnEle" @click.stop="changeClickOrder">改派订单</view>
</view>
</view>
<view class="flex-center">
<view @click.stop="updateTime(item.id)" v-show="item.status==2" class="userBtn2 flex-center">
修改预约
</view>
<view @click.stop="signIn(item.id)" v-show="item.status==2" class="userBtn flex-center">
上门签到
</view>
<view v-show="item.status==7" class="userBtn flex-center" @click.stop="selectTime(item.id)">
预约上门
</view>
</view>
</view>
</view>
<view class="flex-center noMore" v-show="page2==lastPage2">没有更多了</view>
</view>
<view style="height: 100rpx;"></view>
<appointTime ref="timeRef" @checkTime="checkTime"></appointTime>
<!-- <view class='pinlei' >
<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>
<view class="lc" v-if="index_img"><image class="imgnavbar-item-img" mode="aspectFill" :src="index_img" ></image></view> -->
<!-- 常见问题 -->
<!-- <view class='problem_header' >
<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>
</view> -->
<!-- <view style="margin-bottom: 100px;
padding-bottom: 30px;"></view> -->
</view>
<!-- <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" @click="pop2Show=false" mode="center" :round="30">
<view class="popBoxTwo" @click="pop2Show=false">
<image :src="path+'/assets/img/icon/bg4.png'" class="popTwoImg"></image>
<view class="popContent">
<text class="popTwoText1">工作证</text>
<text class="popTwoText2">{{personInfo.realname}}</text>
<!-- <text class="popTwoText3">工号GH02301~</text> -->
<image :src="userinfo.avatar" class="popTowHeadImg"></image>
<view class="flex-center" style="margin-top: 40rpx;">
<view class="flex-center">
<text class="text1">人身保险</text>
<view class="status" v-if="personInfo.personal_insurance">已上传</view>
<view class="status">待上传</view>
</view>
<view class="flex-center" style="margin-left: 37rpx;">
<text class="text1">健康证</text>
<view class="status" v-if="personInfo.health_certificate">已上传</view>
<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>
<u-popup :show="pop4Show" @close="pop4Show = false" @open="open" mode="center" :round="30">
<view class="pop4Box">
<view class="flex-between" style="padding: 51rpx 55rpx 0;">
<text class="pop4Title">改派原因</text>
<u-icon @click="pop4Show = false" name="close" color="#333333" size="16" bold></u-icon>
</view>
<u--textarea v-model="notesText" placeholder="请填写改派原因" class="pop4Input" style="background: #EFEFEF;border: none"></u--textarea>
<view class="flex-center" style="margin-top: 55rpx;">
<view class="pop4Btn1" @click="pop4Show = false">取消改派</view>
<view class="pop4Btn2">确认改派</view>
</view>
</view>
</u-popup>
<cancleOrder @cancleReason="cancleReason" :cancleShow="cancleShow" @closeCancle="cancleShow=false"></cancleOrder>
<custom-tab-bar :current-page="0" @centerClick="centerClick" />
<!-- <u-popup :show="showCity"> -->
<view v-show="showCity" style="width:750upx;height: 100%;position: fixed;left: 0;top:0;z-index: 999;">
<citySelect @back_city="back_city"></citySelect>
</view>
<!-- </u-popup> -->
<!-- <popup-layer ref="popupRef" :direction="'right'">
<view style="width:750upx;height: 100%;">
<citySelect @back_city="back_city"></citySelect>
</view>
</popup-layer> -->
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue';
import cancleOrder from './cancleOrder.vue';
import appointTime from '@/components/appointTime.vue';
import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
import util from '../../common/util.js'
export default {
data() {
return {
userinfo: {},
personInfo: {},
jscode:'',
// limit:3,
typelist: [],
banner:[],
notice:'',
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
current:0,
index_img:'',
question_list:'',
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: '已取消'
},
{
id: 7,
name: '已接单'
}
],
tabCur: 0,
recycleList: [],
qiangdanArr: [],
page: 1,
orderList: [],
cancleShow:false,
signInShow: false,
pop2Show: false,
pop3Show: false,
pop4Show: false,
notesText: '',
moreShow: false,
orderId: '',
statusToast: '',
showCity: false,
cityText: '',
longitude: '',
latitude: '',
page1: 1,
page2: 1,
lastPage1: '',
lastPage2: '',
limit: 10
}
},
components: {
CustomTabBar,
cancleOrder,
appointTime,
citySelect
},
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;
}
}
},
onShow() {
uni.hideTabBar({
fail: () => {},
});
// this.getdata()
// this.config()
this.recycleOrderList()
this.qiangdanlist()
},
onHide() {
},
onLoad() {
this.getauth()
let _this = this;
util.getAddress(function(res){
_this.cityText = res.city;
_this.longitude = res.longitude;
_this.latitude = res.latitude;
console.log(res,'kkkkkkkkk+++')
// uni.setStorageSync('city_name',res.city)
})
// this.getdata()
// this.getquestion()
// this.recycleOrderList()
// this.qiangdanlist()
},
onShareAppMessage(res) {
if (res.from === 'button') {
}
return {
title: '',
imageUrl: ''
}
},
onPullDownRefresh(){
if(this.menuNum==1){
console.log('抢单')
this.page1 = 1;
this.qiangdanArr = []
this.qiangdanlist()
}else{
console.log('回收')
this.page2 = 1
this.recycleList = []
this.recycleOrderList()
}
},
onReachBottom (){
console.log('触底')
if(this.menuNum==1){
console.log('抢单')
if(this.page1<this.lastPage1){
this.page1++
this.qiangdanlist()
}
}else{
console.log('回收')
if(this.page2<this.lastPage2){
this.page2++
this.recycleOrderList()
}
}
},
methods: {
open(){
},
centerClick(val){
console.log(val,'fff')
this.pop2Show = true;
},
getauth(){
var _this = this;
_this.$api.userInfo({},res=>{
if(res.code == '1'){
_this.userinfo = res.data.user
_this.personInfo = res.data.person
// _this.cityText = res.data.person.city_ids_show
}else{
}
})
},
back_city(res){
if(res){
this.cityText = res.cityName;
}
this.showCity = false
},
showCityClick() {
// this.$refs.popupRef.show();
this.showCity = true
},
cancleReason(obj){
console.log('ddd')
let data = {
status: 6,
order_id: this.orderId,
cancel_reason: obj.name
}
if(obj.id == 4){
data.cancel_image = obj.list
}
console.log(data,'jjjjjjjjj')
this.$api.cancelorder(data,res=>{
if(res.code == '1'){
uni.showToast({ title: this.statusToast , icon: 'success' })
this.recycleOrderList()
this.cancleShow = false
setTimeout(()=>{
this.menuNum = 2
this.tabCur = 6;
},2000)
}else{
uni.showToast({ title: res.msg , icon: 'none' })
}
})
},
signIn(id){
let _this = this;
let data = {
status: 3,
order_id: id
}
uni.getLocation({
type: 'wgs84',
geocode: true,
success: function (res) {
console.log('当前位置的经度:' + JSON.stringify(res));
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
data.checkin_latitude = res.latitude
data.checkin_longitude = res.longitude
_this.$api.setorder(data,res=>{
if(res.code == '1'){
_this.tabCur = 3;
uni.showToast({ title: '签到成功' , icon: 'success' })
_this.recycleOrderList()
setTimeout(()=>{
_this.menuNum = 2
},2000)
}else{
uni.showToast({ title: res.msg , icon: 'none' })
}
})
}
});
// this.$api.setorder(data,res=>{
// if(res.code == '1'){
// this.tabCur = 2;
// uni.showToast({ title: this.statusToast , icon: 'success' })
// this.recycleOrderList()
// setTimeout(()=>{
// this.menuNum = 2
// },2000)
// }else{
// uni.showToast({ title: res.msg , icon: 'none' })
// }
// })
},
getAddress(id){
let _this = this;
uni.getLocation({
type: 'wgs84',
geocode: true,
success: function (res) {
console.log('当前位置的经度:' + JSON.stringify(res));
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
_this.latitude = res.latitude
_this.longitude = res.longitude
}
});
},
updateTime(id){
this.statusToast = '修改预约成功'
this.orderId = id
this.$refs.timeRef.open()
},
selectTime(id){
this.statusToast = '预约成功'
this.orderId = id
this.$refs.timeRef.open()
},
checkTime(val){
console.log(val,'kkkkkkk')
let data = {
status: 2,
order_id: this.orderId,
order_person_time: val
}
this.$api.setorder(data,res=>{
if(res.code == '1'){
this.tabCur = 2;
uni.showToast({ title: this.statusToast , icon: 'success' })
this.recycleOrderList()
setTimeout(()=>{
this.menuNum = 2
},2000)
}else{
uni.showToast({ title: res.msg , icon: 'none' })
}
})
},
setorder(id){
let data = {
status: 7,
order_id: id
}
this.$api.setorder(data,res=>{
if(res.code == '1'){
this.tabCur = 7;
uni.showToast({ title: '抢单成功' , icon: 'success' })
this.recycleOrderList()
setTimeout(()=>{
this.menuNum = 2
},2000)
}else{
uni.showToast({ title: res.msg , icon: 'none' })
}
})
},
goDetail(id){
uni.navigateTo({
url:'../order/detail?id=' + id
})
},
cancleClickOrder(id){
this.orderId = id
this.cancleShow = true
this.moreShow = false
},
changeClickOrder(){
this.pop4Show = true
this.moreShow = false
},
selectTab(id){
this.page=1
this.tabCur = id
// this.recycleList = []
},
qiangdanlist(){
console.log('fffffffff')
let data = {
type_id: this.tabCur,
page: this.page1,
limit: this.limit,
longitude: this.longitude,
latitude: this.latitude
}
console.log(data,'mmmmmmmmmm---')
this.$api.qiangdanlist(data,res=>{
if(res.code == '1'){
this.qiangdanArr = this.qiangdanArr.concat(res.data.list.data)
// this.recycleList = res.data.type
this.lastPage1 = Math.ceil(res.data.total/this.limit)
uni.stopPullDownRefresh();
}
})
},
recycleOrderList(){
console.log('fffffffff')
let data = {
status: '',
page: this.page2,
limit: this.limit
}
this.$api.recycleOrderList(data,res=>{
if(res.code == '1'){
console.log(res.data.list,res.data.list.data,res.data.total,'dddd')
this.recycleList = this.recycleList.concat(res.data.list)
this.lastPage2 = Math.ceil(res.data.total/this.limit)
uni.stopPullDownRefresh();
}
})
},
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;
// padding-bottom: 6rpx;
height: calc(118rpx + var(--status-bar-height));
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
}
.topStatus{
// height: var(--status-bar-height); //这里是状态栏css变量
height: calc(118rpx + var(--status-bar-height));
}
.menuBox{
display: flex;
padding: 20rpx 0 0;
padding-left: 15rpx;
.menuView{
font-weight: 500;
font-size: 28rpx;
color: #AE8F71;
padding: 0 21rpx;
position: relative;
.menuLine{
width: 80rpx;
height: 10rpx;
border-radius: 2rpx;
background: linear-gradient(to right, #FFF8EF, #ED7B29);
margin-top: -12rpx;
position: absolute;
bottom: 0;
left: 21rpx;
}
}
.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;
padding: 0rpx 22rpx;
height: 50rpx;
line-height: 50rpx;
}
.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;
padding: 14rpx 16rpx;
margin-top: 22rpx;
}
.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;
color: #333333;
margin-top: 25rpx;
padding-left: 6rpx;
}
.userImg{
width: 42rpx;
height: 42rpx;
margin-right: 14rpx;
}
.userBtn{
width: 184rpx;
height: 60rpx;
background: #FB8F0C;
border-radius: 30rpx;
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;
}
.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 {
// padding: 15rpx 26rpx 15rpx 60rpx;
height: 70rpx;
margin-top: 10rpx;
position: relative;
overflow: hidden;
background-color: #fff;
color: #333;
// margin-bottom: 16rpx;
background: #FFECEB;
border-radius: 16rpx;
width: 100%;
// border: 1px solid #FFFFFF;
}
.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;
}
}
}
.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;
top: calc(118rpx + var(--status-bar-height));
z-index: 99;
// 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));
overflow: auto;
}
.navItem{
width: 116rpx;
flex-shrink:0;
background: #FFF;
border-radius: 10rpx;
border: 1px solid #FFF;
font-weight: 500;
font-size: 28rpx;
color: #333333;
padding: 23rpx 15rpx;
margin: 0 10rpx;
}
.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;
}
}
.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;
}
.noMore{
margin-top: 50rpx;
// font-weight: bold;
font-size: 28rpx;
color: #333333;
line-height: 36rpx;
}
.rightText2{
width: 115rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
background: rgba(251,143,12,0.1);
border-radius: 10rpx;
font-weight: 400;
font-size: 30rpx;
color: #FB8F0C;
}
</style>