You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
801 lines
23 KiB
801 lines
23 KiB
7 months ago
|
<template>
|
||
|
|
<div class="main">
|
||
|
|
<div class="banner">
|
||
|
|
<div class="order-information">
|
||
|
|
<div class="header">接单中心</div>
|
||
|
|
<div class="condition-scarch">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<div class="label">收货地址：</div>
|
||
|
|
<el-cascader placeholder="请输入收获区域" size="large" :options="addressData" v-model="form.address">
|
||
|
|
</el-cascader>
|
||
|
|
<el-input style="width: 1.4583rem; margin-left: 0.0521rem" size="large" v-model="form.addressInfo"
|
||
|
|
placeholder="详细地址街道..." />
|
||
|
|
<div class="search-btn" @click="searchOrder">搜索</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="label">成交价：</div>
|
||
|
|
<div class="price-whel">
|
||
|
|
<div v-for="(item, index) in priceWhel" :key="index" @click="priceWhelChange(index)"
|
||
|
|
:class="priceWhelIndex === index ? 'active' : ''">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="label">收货时间：</div>
|
||
|
|
<div class="price-whel">
|
||
|
|
<div v-for="(item, index) in addressTime" :key="index" @click="addressTimeChange(index)"
|
||
|
|
:class="addressTimeIndex === index ? 'active' : ''">
|
||
|
|
{{ item }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li id="tp-con"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tabs">
|
||
|
|
<div :class="activeNoT === 0 ? 'standard active' : 'standard'" @click="() => { activeNoT = 0 }">鲜花订单</div>
|
||
|
|
<div :class="activeNoT === 1 ? 'standard active' : 'standard'" @click="() => { activeNoT = 1 }"
|
||
|
|
style="margin-left: .0781rem;">蛋糕订单</div>
|
||
|
|
|
||
|
|
<Teleport v-if="isTp" to="#tp-con">
|
||
|
|
<div :class="active === 1 ? 'standard active' : 'standard'" @click="tabSort(1)">按配送时间</div>
|
||
|
|
<div :class="active === 2 ? 'standard active' : 'standard'" @click="tabSort(2)">按下单时间</div>
|
||
|
|
<div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="tabSort(3)">
|
||
|
|
按订单金额
|
||
|
|
<div v-if="active == 3" class="sort-box">
|
||
|
|
<div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="priceSort(0)">
|
||
|
|
<el-icon>
|
||
|
|
<CaretTop />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
<div @click="priceSort(1)" :class="activeSort == 1 ? 'descending active-sort' : 'descending'">
|
||
|
|
<el-icon>
|
||
|
|
<CaretBottom />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="sort-box">
|
||
|
|
<div class="ascending-orde">
|
||
|
|
<el-icon>
|
||
|
|
<CaretTop />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
<div class="descending">
|
||
|
|
<el-icon>
|
||
|
|
<CaretBottom />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Teleport>
|
||
|
|
</div>
|
||
|
|
<div class="line-items" v-loading="loading">
|
||
|
|
<div class="item" v-for="(item, index) in orderList" :key="item.id" @click.stop="goToOrderInfo(item.orderNo)">
|
||
|
|
<div class="header">
|
||
|
|
<div class="address">
|
||
|
|
【{{ item.province }} {{ item.city }} {{ item.district }}】{{ item.street }}{{ item.detail }}
|
||
|
|
</div>
|
||
|
|
<div class="map-box" @click.stop="showMap(item)">
|
||
|
|
<div class="icon">
|
||
|
|
<el-icon>
|
||
|
|
<MapLocation />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
<div class="map">查看地图</div>
|
||
|
|
</div>
|
||
|
|
<div class="time">下单时间：{{ item.createTime }}</div>
|
||
|
|
<div class="time" v-if="true"
|
||
|
|
style="margin-left: .0521rem;font-size: .0938rem;font-weight: 900;display: flex;align-items: center;"><img
|
||
|
|
src="/images/诚信.png" alt="" style="height: .0885rem; vertical-align: middle;">诚信保证金用户</div>
|
||
|
|
<img v-if="item.orderMode == 2" style="height: .2813rem;position: absolute;right: 0;top: -0.0313rem;"
|
||
|
|
src="/images/报价单_.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="order-info">
|
||
|
|
<div class="image">
|
||
|
|
<img :src="item.image" style="width: 100%; height: 100%" />
|
||
|
|
<div class="tag" v-if="false">普通订单</div>
|
||
|
|
</div>
|
||
|
|
<div class="iine-info">
|
||
|
|
<div class="receipt-time">
|
||
|
|
<div class="label">
|
||
|
|
收货时间：<span class="time">{{ item.deliveryDate }} {{ item.deliveryTime }}</span>
|
||
|
|
<span class="timeout">离接单结束还剩：{{ setTimeOutEvent(item.deliveryDate, item.deliveryTime) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="goods-type">
|
||
|
|
<div class="label">
|
||
|
|
商品类型：<span class="type">{{ item.productType }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<div class="label">
|
||
|
|
商品总数：<span class="number">{{ item.totalNum }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="audit-information">
|
||
|
|
<div class="label">
|
||
|
|
商品描述：<span class="information">
|
||
|
|
<!-- {{item.audit == 1 ? '需要完成下单方审核鲜花实拍图' : '审核'}} -->
|
||
|
|
{{ item.remark || '无备注' }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-description">
|
||
|
|
<div class="label">
|
||
|
|
备注：<span class="description">{{ item.orderRemark || '无备注' }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-description">
|
||
|
|
<div class="label">
|
||
|
|
贺卡：<span class="description">{{ item.cardInfo || '无贺卡' }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<template v-if="true">
|
||
|
|
<div style="position: absolute;right: .1755rem; color: #8a8e99;width: .9375rem;text-align: center;">
|
||
|
|
<div style="color: #ff4e8d;font-size: .1563rem;">
|
||
|
|
￥{{ item.otPrice }}
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 10px;font-size: .0729rem;font-weight: 400;color: #575d6c;">已付款</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<div class="submit-box">
|
||
|
|
<placerBtn v-if="true" :goodsinfo="item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<el-empty v-if="!orderList.length" description="无数据" style="background-color: #fff" />
|
||
|
|
<div class="page">
|
||
|
|
<div style="display: flex; justify-content: center">
|
||
|
|
<el-pagination @current-change="currentChange" background layout="prev, pager, next" :total="total"
|
||
|
|
:page-size="pages.pageSize" />
|
||
|
|
</div>
|
||
|
|
<div class="txt">为了提高查询效率，仅显示近期订单</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<delivery-map v-if="isMapFlog" @closeChange="closeChangeEvent" :goodsinfo="goodsInfo"></delivery-map>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||
|
|
import { CaretTop, CaretBottom, MapLocation } from '@element-plus/icons-vue'
|
||
|
|
import { useCounterStore } from '@/stores/nav'
|
||
|
|
//@ts-ignore
|
||
|
|
import { regionData, CodeToText } from 'element-china-area-data' // 地址数据
|
||
|
|
import { getReceiveOrderList } from '@/server/orderApi'
|
||
|
|
import { linkNavigateTo } from '~/utils/util'
|
||
|
|
|
||
|
|
const userIndex = useCounterStore()
|
||
|
|
onMounted(() => {
|
||
|
|
userIndex.increment(4)
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
})
|
||
|
|
// ===============================
|
||
|
|
const isTp = ref(false)
|
||
|
|
onMounted(() => isTp.value = true)
|
||
|
|
// ===============================
|
||
|
|
const addressData: any = regionData // 解决地址数据报错的问题
|
||
|
|
const loading = <any>ref(false)
|
||
|
|
const priceWhel = <any>ref(['不限', '100元以下', '100-200元', '200-300元', '300-400元', '400元以上'])
|
||
|
|
const addressTime = <any>ref(['不限', '今天', '1-3天', '4-7天', '1周以上'])
|
||
|
|
const active = ref(0)
|
||
|
|
const activeSort = ref(0)
|
||
|
|
const form = <any>ref({
|
||
|
|
address: [],
|
||
|
|
addressInfo: '',
|
||
|
|
max: '', // 最高价
|
||
|
|
min: '', //最低价
|
||
|
|
maxTime: '', // 最晚收货时间
|
||
|
|
minTime: '', // 最早收货时间
|
||
|
|
deliveryTimeSort: false, // 收货时间排序
|
||
|
|
createTimeSort: false, // 下单时间排序
|
||
|
|
priceOrder: null, // 订单金额排序
|
||
|
|
})
|
||
|
|
|
||
|
|
const pages = <any>ref({
|
||
|
|
page: 1, // 页码
|
||
|
|
pageSize: 3, //每条页数
|
||
|
|
})
|
||
|
|
const orderList = <any>ref([])
|
||
|
|
const currentChange = (page: any) => {
|
||
|
|
console.log(page)
|
||
|
|
pages.value.page = page
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
}
|
||
|
|
// 成交价变化
|
||
|
|
const priceWhelIndex = <any>ref(0)
|
||
|
|
const priceWhelChange = (index: number) => {
|
||
|
|
if (priceWhelIndex.value === index) return
|
||
|
|
priceWhelIndex.value = index
|
||
|
|
console.log(index)
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
form.value.max = ''
|
||
|
|
form.value.min = ''
|
||
|
|
break
|
||
|
|
case 1:
|
||
|
|
form.value.max = 100
|
||
|
|
form.value.min = 0
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
form.value.max = 200
|
||
|
|
form.value.min = 100
|
||
|
|
break
|
||
|
|
case 3:
|
||
|
|
form.value.max = 300
|
||
|
|
form.value.min = 200
|
||
|
|
break
|
||
|
|
case 4:
|
||
|
|
form.value.max = 400
|
||
|
|
form.value.min = 300
|
||
|
|
break
|
||
|
|
case 5:
|
||
|
|
form.value.max = ''
|
||
|
|
form.value.min = 400
|
||
|
|
break
|
||
|
|
}
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
}
|
||
|
|
const addressTimeIndex = <any>ref(0)
|
||
|
|
// 收货时间变化
|
||
|
|
const addressTimeChange = (index: number) => {
|
||
|
|
if (addressTimeIndex.value === index) return
|
||
|
|
addressTimeIndex.value = index
|
||
|
|
console.log(index)
|
||
|
|
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
form.value.maxTime = ''
|
||
|
|
form.value.minTime = ''
|
||
|
|
break
|
||
|
|
case 1:
|
||
|
|
form.value.maxTime = '今天'
|
||
|
|
form.value.minTime = '今天'
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
form.value.maxTime = formatTime(3)
|
||
|
|
form.value.minTime = formatTime()
|
||
|
|
break
|
||
|
|
case 3:
|
||
|
|
form.value.maxTime = formatTime(7)
|
||
|
|
form.value.minTime = formatTime(4)
|
||
|
|
break
|
||
|
|
case 4:
|
||
|
|
form.value.maxTime = ''
|
||
|
|
form.value.minTime = formatTime(7)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
}
|
||
|
|
const total = <any>ref(null)
|
||
|
|
const getReceiveOrderListEvent = async () => {
|
||
|
|
// console.log(CodeToText);
|
||
|
|
|
||
|
|
loading.value = true
|
||
|
|
const data: any = {
|
||
|
|
limit: pages.value.pageSize, // 每页条数
|
||
|
|
page: pages.value.page, // 页码
|
||
|
|
maxPrice: form.value.max, // 最大金额
|
||
|
|
minPrice: form.value.min, // 最小金额
|
||
|
|
minReceiveDate: form.value.minTime, // 最早收货时间
|
||
|
|
maxReceiveDate: form.value.maxTime, // 最晚收货时间
|
||
|
|
deliveryTimeSort: form.value.deliveryTimeSort, // 收货时间排序
|
||
|
|
createTimeSort: form.value.createTimeSort, // 下单时间排序
|
||
|
|
receiveAddressProvince: form.value.address.length ? CodeToText[form.value.address[0]] : '',
|
||
|
|
receiveAddressCity: form.value.address.length ? CodeToText[form.value.address[1]] : '',
|
||
|
|
receiveAddressDistrict: form.value.address.length ? CodeToText[form.value.address[2]] : '',
|
||
|
|
receiveAddressDetail: form.value.addressInfo,
|
||
|
|
}
|
||
|
|
console.log(data, 'data')
|
||
|
|
|
||
|
|
// 删除多余字段
|
||
|
|
for (const key in data) {
|
||
|
|
if (!data[key]) {
|
||
|
|
delete data[key]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (active.value === 3) {
|
||
|
|
data.priceOrder = activeSort.value ? 'desc' : 'asc' // priceOrder:form.value.priceOrder,
|
||
|
|
}
|
||
|
|
const res = await getReceiveOrderList(data)
|
||
|
|
orderList.value = res.list
|
||
|
|
total.value = res.total
|
||
|
|
loading.value = false
|
||
|
|
console.log(res)
|
||
|
|
}
|
||
|
|
// 格式化时间
|
||
|
|
const formatTime = (DAY: any = 0) => {
|
||
|
|
const date = new Date()
|
||
|
|
const year = date.getFullYear()
|
||
|
|
const month = date.getMonth() + 1
|
||
|
|
const day = date.getDate()
|
||
|
|
date.setDate(day + DAY) // 设置日期对象的天数，会自动处理超出当月天数的情况
|
||
|
|
const updatedYear = date.getFullYear()
|
||
|
|
const updatedMonth = date.getMonth() + 1
|
||
|
|
const updatedDay = date.getDate()
|
||
|
|
return `${updatedYear}-${updatedMonth}-${updatedDay}`
|
||
|
|
}
|
||
|
|
|
||
|
|
const activeNoT = ref(0)
|
||
|
|
// 排序
|
||
|
|
const tabSort = (index: any) => {
|
||
|
|
if (active.value === index) return
|
||
|
|
active.value = index
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
form.value.deliveryTimeSort = false
|
||
|
|
form.value.createTimeSort = false
|
||
|
|
break
|
||
|
|
case 1:
|
||
|
|
form.value.deliveryTimeSort = true
|
||
|
|
form.value.createTimeSort = false
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
form.value.deliveryTimeSort = false
|
||
|
|
form.value.createTimeSort = true
|
||
|
|
break
|
||
|
|
case 3:
|
||
|
|
form.value.deliveryTimeSort = false
|
||
|
|
form.value.createTimeSort = false
|
||
|
|
break
|
||
|
|
}
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
}
|
||
|
|
const priceSort = (index: any) => {
|
||
|
|
// form.value.priceOrder = 'asc' : form.value.priceOrder = 'desc'
|
||
|
|
activeSort.value = index
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
}
|
||
|
|
// 搜索订单
|
||
|
|
const searchOrder = () => {
|
||
|
|
getReceiveOrderListEvent()
|
||
|
|
console.log(form.value)
|
||
|
|
}
|
||
|
|
// 前往详情页
|
||
|
|
const goToOrderInfo = (id: any) => {
|
||
|
|
console.log(id)
|
||
|
|
linkNavigateTo('/homeIndex/orderdetails', { GoodsId: id })
|
||
|
|
}
|
||
|
|
// 接单
|
||
|
|
import { merchantOffers } from '@/server/orderApi'
|
||
|
|
import { useUserStore } from '@/stores/user'
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const submitEvent = async (monry: any, orderNo: any) => {
|
||
|
|
const data: any = {
|
||
|
|
merId: userStore.$state.userInfos.id,
|
||
|
|
offerAmount: monry,
|
||
|
|
orderNo: orderNo,
|
||
|
|
}
|
||
|
|
console.log(data)
|
||
|
|
const res = await merchantOffers(data)
|
||
|
|
}
|
||
|
|
// 报价
|
||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
|
|
const instantlyQuote = async (monry: any, orderNo: any) => {
|
||
|
|
ElMessageBox.prompt('请输入金额', 'Tip', {
|
||
|
|
confirmButtonText: '确认',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
inputPattern: /^(?!$)(?=^[0-9]{1,6}$)(?!^0+$)^[1-9][0-9]{0,4}$|100000$/,
|
||
|
|
inputErrorMessage: '请输入正确的金额',
|
||
|
|
})
|
||
|
|
.then(({ value }) => {
|
||
|
|
if (value <= monry) {
|
||
|
|
return ElMessage({
|
||
|
|
type: 'error',
|
||
|
|
message: `涨价金额不能小于当前金额`,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const data: any = {
|
||
|
|
merId: userStore.$state.userInfos.id,
|
||
|
|
offerAmount: value,
|
||
|
|
orderNo: orderNo,
|
||
|
|
}
|
||
|
|
console.log(data)
|
||
|
|
merchantOffers(data)
|
||
|
|
ElMessage({
|
||
|
|
type: 'success',
|
||
|
|
message: `请求成功`,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
// ElMessage({
|
||
|
|
// type: 'info',
|
||
|
|
// message: 'Input canceled',
|
||
|
|
// })
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const isMapFlog = <any>ref(false)
|
||
|
|
const goodsInfo = <any>ref({})
|
||
|
|
const showMap = (item: any) => {
|
||
|
|
goodsInfo.value = item
|
||
|
|
isMapFlog.value = true
|
||
|
|
}
|
||
|
|
const closeChangeEvent = (e: boolean) => {
|
||
|
|
isMapFlog.value = e
|
||
|
|
}
|
||
|
|
// 计算时间
|
||
|
|
const setTimeOutEvent = (date: any, time: any) => {
|
||
|
|
// console.log(date,time,'deliveryTime');
|
||
|
|
if (time == '不限时段') {
|
||
|
|
time = '23:00'
|
||
|
|
}
|
||
|
|
const strTime = `${date} ${time}`
|
||
|
|
// console.log(strTime)
|
||
|
|
|
||
|
|
var currentTime = new Date()
|
||
|
|
var deliveryDate = new Date(strTime)
|
||
|
|
|
||
|
|
var difference = deliveryDate.getTime() - currentTime.getTime()
|
||
|
|
// console.log(difference, deliveryDate)
|
||
|
|
|
||
|
|
if (difference <= 0) {
|
||
|
|
return '已过期'
|
||
|
|
}
|
||
|
|
|
||
|
|
var days = Math.floor(difference / (1000 * 60 * 60 * 24))
|
||
|
|
difference -= days * (1000 * 60 * 60 * 24)
|
||
|
|
|
||
|
|
var hours = Math.floor(difference / (1000 * 60 * 60))
|
||
|
|
difference -= hours * (1000 * 60 * 60)
|
||
|
|
|
||
|
|
var minutes = Math.floor(difference / (1000 * 60))
|
||
|
|
difference -= minutes * (1000 * 60)
|
||
|
|
|
||
|
|
// console.log(days, hours, minutes, seconds)
|
||
|
|
if (days) {
|
||
|
|
return `${days}天`
|
||
|
|
} else if (hours) {
|
||
|
|
return `${hours}小时`
|
||
|
|
} else {
|
||
|
|
; `${minutes}分钟`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
#tp-con {
|
||
|
|
&>* {
|
||
|
|
margin-left: .1563rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&>*:first-of-type {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sort {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.sort-box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 0.0365rem;
|
||
|
|
color: #b1b6c1;
|
||
|
|
|
||
|
|
div {
|
||
|
|
line-height: 0;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-sort {
|
||
|
|
color: #4d4949;
|
||
|
|
}
|
||
|
|
|
||
|
|
.descending {
|
||
|
|
margin-top: -0.026rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.banner {
|
||
|
|
width: 6.25rem;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
.order-information {
|
||
|
|
width: 100%;
|
||
|
|
// height: 3.4896rem;
|
||
|
|
margin-top: 0.026rem;
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
.header {
|
||
|
|
// background-color: #f3f4f8;
|
||
|
|
height: 0.2083rem;
|
||
|
|
color: #252b3a;
|
||
|
|
font-size: 0.0833rem;
|
||
|
|
line-height: 0.2083rem;
|
||
|
|
padding: 0 0.2604rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-weight: 700;
|
||
|
|
border-bottom: 1px solid #e1e1e3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header::before {
|
||
|
|
content: ' ';
|
||
|
|
display: block;
|
||
|
|
background-color: #ff4e8d;
|
||
|
|
width: 0.0156rem;
|
||
|
|
height: 0.0833rem;
|
||
|
|
margin-right: 0.026rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.condition-scarch {
|
||
|
|
padding: 0.1042rem 0.3542rem;
|
||
|
|
|
||
|
|
ul {
|
||
|
|
li {
|
||
|
|
list-style: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #252b3a;
|
||
|
|
font-size: 0.0729rem;
|
||
|
|
margin: 0.1042rem 0;
|
||
|
|
|
||
|
|
.label {
|
||
|
|
width: 0.3646rem;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-btn {
|
||
|
|
width: 0.4167rem;
|
||
|
|
height: 0.1771rem;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 0.0729rem;
|
||
|
|
line-height: 0.1771rem;
|
||
|
|
border-radius: 0.1042rem;
|
||
|
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
|
||
|
|
margin-left: 0.0521rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-whel {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
div {
|
||
|
|
margin-right: 0.2135rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
color: #ff4e8d;
|
||
|
|
}
|
||
|
|
|
||
|
|
// div:focus,
|
||
|
|
// div:hover {
|
||
|
|
// color: #ff4e8d;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
width: 100%;
|
||
|
|
height: 0.2083rem;
|
||
|
|
background-color: #fff;
|
||
|
|
display: flex;
|
||
|
|
margin-top: 0.2344rem;
|
||
|
|
margin-bottom: 0.1302rem;
|
||
|
|
|
||
|
|
.standard {
|
||
|
|
width: 0.7292rem;
|
||
|
|
height: 100%;
|
||
|
|
color: #252b3a;
|
||
|
|
font-size: 0.0729rem;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.2083rem;
|
||
|
|
border-radius: 0.0313rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
color: #fff;
|
||
|
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sort {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.sort-box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 0.0365rem;
|
||
|
|
color: #b1b6c1;
|
||
|
|
|
||
|
|
div {
|
||
|
|
line-height: 0;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-sort {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.descending {
|
||
|
|
margin-top: -5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.line-items {
|
||
|
|
margin-top: 0.1719rem;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
position: relative;
|
||
|
|
padding: 0.1198rem 0.1771rem;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0.0521rem 0;
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.address {
|
||
|
|
width: 2.8125rem;
|
||
|
|
color: #252b3a;
|
||
|
|
font-size: 0.0833rem;
|
||
|
|
font-weight: 600;
|
||
|
|
overflow: hidden;
|
||
|
|
/* 隐藏溢出的部分 */
|
||
|
|
white-space: nowrap;
|
||
|
|
/* 将文本折叠成单行 */
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
/* 添加省略号 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.time {
|
||
|
|
color: #8a8e99;
|
||
|
|
font-size: 0.0625rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-box {
|
||
|
|
display: flex;
|
||
|
|
color: #ff4e8d;
|
||
|
|
margin-right: 0.0521rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-info {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.0781rem 0 0 0.0521rem;
|
||
|
|
|
||
|
|
.image {
|
||
|
|
width: 0.7292rem;
|
||
|
|
height: 0.7292rem;
|
||
|
|
background-color: #d9d9d9;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 0.125rem;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.125rem;
|
||
|
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.iine-info {
|
||
|
|
// width: 4.1667rem;
|
||
|
|
margin-left: 0.0521rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.label {
|
||
|
|
color: #8a8e99;
|
||
|
|
font-size: 0.0625rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.receipt-time {
|
||
|
|
.time {
|
||
|
|
color: #ff4e8d;
|
||
|
|
font-size: 0.0729rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-right: 0.1042rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.goods-type {
|
||
|
|
.type {
|
||
|
|
color: #252b3a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
.number {
|
||
|
|
color: #ff4e8d;
|
||
|
|
font-size: 0.0729rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.audit-information {
|
||
|
|
.information {
|
||
|
|
color: #252b3a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-description {
|
||
|
|
.description {
|
||
|
|
color: #252b3a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit-box {
|
||
|
|
position: absolute;
|
||
|
|
right: .1563rem;
|
||
|
|
bottom: .1563rem;
|
||
|
|
// height: 100%;
|
||
|
|
display: flex;
|
||
|
|
// flex-direction: column;
|
||
|
|
align-items: end;
|
||
|
|
margin-left: 0.2604rem;
|
||
|
|
|
||
|
|
.submit {
|
||
|
|
width: 0.5833rem;
|
||
|
|
height: 0.1667rem;
|
||
|
|
color: #fff;
|
||
|
|
margin: 0 10px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.1667rem;
|
||
|
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.submit-tow {
|
||
|
|
width: 0.5833rem;
|
||
|
|
height: 0.1667rem;
|
||
|
|
color: #ff94d4;
|
||
|
|
margin: 0 10px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 0.1667rem;
|
||
|
|
border: 1px solid #ff94d4;
|
||
|
|
// background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
height: 1.0417rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-content: center;
|
||
|
|
|
||
|
|
.txt {
|
||
|
|
text-align: center;
|
||
|
|
color: #252b3a;
|
||
|
|
margin-top: 0.1563rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|