|
|
@@ -0,0 +1,781 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <u-navbar title="订单明细" :autoBack="true" :placeholder="true" :border-bottom="true"></u-navbar>
|
|
|
+
|
|
|
+ <view class="search-bar">
|
|
|
+ <u-search
|
|
|
+ v-model="keyword"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ bg-color="#f7f8fc"
|
|
|
+ search-icon-color="#c9cdd4"
|
|
|
+ placeholder-color="#c9cdd4"
|
|
|
+ :show-action="true"
|
|
|
+ action-text="搜索"
|
|
|
+ :action-style="actionStyle"
|
|
|
+ @search="onSearch"
|
|
|
+ @custom="onSearch"
|
|
|
+ ></u-search>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="status-tabs">
|
|
|
+ <view
|
|
|
+ v-for="(tab, index) in statusTabs"
|
|
|
+ :key="tab.value"
|
|
|
+ :class="['status-tab', { active: currentTab === index }]"
|
|
|
+ @click="onTabChange(index)"
|
|
|
+ >
|
|
|
+ <text>{{ tab.name }}</text>
|
|
|
+ <image
|
|
|
+ v-if="currentTab === index"
|
|
|
+ class="arrow-down"
|
|
|
+ src="/static/merchantDish/select-tab.png"
|
|
|
+ mode="aspectFit"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="date-filter">
|
|
|
+ <view class="date-trigger" @click="openDatePicker">
|
|
|
+ <text>{{ dateLabel }}</text>
|
|
|
+ <u-icon name="arrow-down" size="20" color="#86909c"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view v-if="startDate && endDate" class="date-clear" @click.stop="clearDate">
|
|
|
+ <u-icon name="close-circle" size="24" color="#86909c"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list-wrap">
|
|
|
+ <ListScrollView
|
|
|
+ ref="listScroll"
|
|
|
+ :api="api"
|
|
|
+ :init="initParams"
|
|
|
+ :page-size="10"
|
|
|
+ :down-enabled="false"
|
|
|
+ :up-text-visible="false"
|
|
|
+ empty-text="暂无订单明细"
|
|
|
+ >
|
|
|
+ <template v-slot:list="{ data }">
|
|
|
+ <view class="detail-list">
|
|
|
+ <view v-if="currentTab === 2" class="after-sale-list">
|
|
|
+ <view
|
|
|
+ v-for="entry in getAfterSaleEntries(data)"
|
|
|
+ :key="entry.key"
|
|
|
+ class="detail-card after-sale-card"
|
|
|
+ @click="openAfterSaleOrder(entry.group, entry.item)"
|
|
|
+ >
|
|
|
+ <view class="after-sale-header">
|
|
|
+ <view class="address-title">
|
|
|
+ <u-icon name="map" color="#86909c" size="30"></u-icon>
|
|
|
+ <text>{{ entry.group.deliveryAddress || entry.group.address || entry.item.deliveryAddress || entry.item.address || '暂无地址' }}</text>
|
|
|
+ </view>
|
|
|
+ <text :class="['after-sale-status', getAfterSaleStatusClass(entry)]">
|
|
|
+ {{ getAfterSaleStatusText(entry) }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="region">{{ entry.group.region || entry.item.region || '' }}</text>
|
|
|
+ <view class="order-separator"></view>
|
|
|
+
|
|
|
+ <view class="pickup-row after-sale-pickup">
|
|
|
+ <text class="pickup-number">取餐号:{{ getMealNumber(entry.item) }}</text>
|
|
|
+ <view class="customer-info">
|
|
|
+ <text>{{ getCustomerName(entry.item, entry.group) }}</text>
|
|
|
+ <text>{{ getCustomerPhone(entry.item, entry.group) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="product-row after-sale-product">
|
|
|
+ <u-image
|
|
|
+ width="120rpx"
|
|
|
+ height="120rpx"
|
|
|
+ border-radius="8rpx"
|
|
|
+ :src="getProductImage(entry.item.productImage)"
|
|
|
+ mode="aspectFill"
|
|
|
+ ></u-image>
|
|
|
+ <view class="product-info">
|
|
|
+ <text class="product-name">{{ entry.item.packageName || entry.item.dishName || '团餐套餐' }}</text>
|
|
|
+ <text class="product-desc">{{ getDishDescription(entry.item) }}</text>
|
|
|
+ <view class="product-bottom">
|
|
|
+ <text class="quantity">{{ getItemCopies(entry.item) }}份</text>
|
|
|
+ <view class="price-wrap after-sale-price">
|
|
|
+ <text class="price-label">成团价:</text>
|
|
|
+ <text class="price-unit">¥</text>
|
|
|
+ <text class="price">{{ formatMoney(getItemPrice(entry.item)) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ v-for="(group, groupIndex) in data"
|
|
|
+ :key="group.hostOrderId || group.id || groupIndex"
|
|
|
+ class="detail-card"
|
|
|
+ >
|
|
|
+ <view :class="['group-header', { 'completed-group-header': currentTab === 1 }]">
|
|
|
+ <view v-if="currentTab === 0" class="group-time">
|
|
|
+ <u-icon name="clock" color="#4e5969" size="28"></u-icon>
|
|
|
+ <text>成团时间:{{ getGroupTime(group) }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="copies">合计:<text>{{ getGroupCopies(group) }}</text>份</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="address-row">
|
|
|
+ <view class="address-title">
|
|
|
+ <u-icon name="map" color="#4e5969" size="30"></u-icon>
|
|
|
+ <text>{{ group.deliveryAddress || group.address || '暂无地址' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="region">{{ group.region || '' }}</text>
|
|
|
+
|
|
|
+ <view class="order-separator"></view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ v-for="(item, itemIndex) in getGroupItems(group)"
|
|
|
+ :key="getItemKey(group, item, itemIndex, groupIndex)"
|
|
|
+ class="detail-item"
|
|
|
+ @click="openOrder(group, item)"
|
|
|
+ >
|
|
|
+ <view class="pickup-row">
|
|
|
+ <text class="pickup-number">取餐号:{{ getMealNumber(item) }}</text>
|
|
|
+ <text class="item-status">{{ getItemStatusText(item) }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="product-row">
|
|
|
+ <u-image
|
|
|
+ width="120rpx"
|
|
|
+ height="120rpx"
|
|
|
+ border-radius="8rpx"
|
|
|
+ :src="getProductImage(item.productImage)"
|
|
|
+ mode="aspectFill"
|
|
|
+ ></u-image>
|
|
|
+ <view class="product-info">
|
|
|
+ <text class="product-name">{{ item.packageName || item.dishName || '团餐套餐' }}</text>
|
|
|
+ <text class="box-fee">餐盒费:{{ formatMoney(getItemContainerFee(item)) }}元</text>
|
|
|
+ <view class="product-bottom">
|
|
|
+ <text class="quantity">{{ getItemCopies(item) }}份</text>
|
|
|
+ <view class="price-wrap">
|
|
|
+ <text class="price-label">成团价:</text>
|
|
|
+ <text class="price-unit">¥</text>
|
|
|
+ <text class="price">{{ formatMoney(getItemPrice(item)) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-footer">
|
|
|
+ <view class="footer-amount">
|
|
|
+ <text>合计餐盒费:</text>
|
|
|
+ <text class="amount-unit">¥</text>
|
|
|
+ <text class="amount-value box-total">{{ formatMoney(getGroupContainerFee(group)) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="footer-amount">
|
|
|
+ <text>合计金额:</text>
|
|
|
+ <text class="amount-unit">¥</text>
|
|
|
+ <text class="amount-value total-amount">{{ formatMoney(getGroupAmount(group)) }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </ListScrollView>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <rangTime
|
|
|
+ ref="rangeTime"
|
|
|
+ :mode="1"
|
|
|
+ title="选择日期"
|
|
|
+ :default-start-date="startDate"
|
|
|
+ :default-end-date="endDate"
|
|
|
+ @onSubmit="onDateRangeConfirm"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ListScrollView from '@/components/list-scroll-view/index.vue'
|
|
|
+import rangTime from '@/components/dengrq-datetime-picker/dateSelector/index.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ListScrollView,
|
|
|
+ rangTime
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ api: {
|
|
|
+ url: '/groupmeal/merchantPackageOrder/getOrderDteails',
|
|
|
+ method: 'POST'
|
|
|
+ },
|
|
|
+ keyword: '',
|
|
|
+ currentTab: 0,
|
|
|
+ statusTabs: [
|
|
|
+ { name: '待出餐', value: 1 },
|
|
|
+ { name: '已出餐', value: 2 },
|
|
|
+ { name: '售后', value: 3 }
|
|
|
+ ],
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ listReady: false,
|
|
|
+ actionStyle: {
|
|
|
+ width: 'auto',
|
|
|
+ color: '#333',
|
|
|
+ fontSize: '26rpx',
|
|
|
+ padding: '0 20rpx',
|
|
|
+ borderLeft: '1rpx solid #e5e7eb'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ initParams() {
|
|
|
+ const params = {
|
|
|
+ orderStatus: this.statusTabs[this.currentTab].value
|
|
|
+ }
|
|
|
+ if (this.keyword) params.queryName = this.keyword
|
|
|
+ if (this.startDate && this.endDate) {
|
|
|
+ params.completeStartDate = this.startDate
|
|
|
+ params.completeEndDate = this.endDate
|
|
|
+ }
|
|
|
+ return params
|
|
|
+ },
|
|
|
+ dateLabel() {
|
|
|
+ if (!this.startDate || !this.endDate) return '选择日期'
|
|
|
+ return `${this.formatDateLabel(this.startDate)}-${this.formatDateLabel(this.endDate)}`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.listReady) {
|
|
|
+ this.reloadList()
|
|
|
+ } else {
|
|
|
+ this.listReady = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSearch(value) {
|
|
|
+ this.keyword = typeof value === 'string' ? value.trim() : this.keyword.trim()
|
|
|
+ this.reloadList()
|
|
|
+ },
|
|
|
+ onTabChange(index) {
|
|
|
+ if (this.currentTab === index) return
|
|
|
+ this.currentTab = index
|
|
|
+ this.reloadList()
|
|
|
+ },
|
|
|
+ openDatePicker() {
|
|
|
+ const picker = this.$refs.rangeTime
|
|
|
+ if (!picker) return
|
|
|
+ picker.startDate = this.startDate
|
|
|
+ picker.endDate = this.endDate
|
|
|
+ picker.open()
|
|
|
+ },
|
|
|
+ onDateRangeConfirm(value) {
|
|
|
+ this.startDate = value.startDate
|
|
|
+ this.endDate = value.endDate
|
|
|
+ this.reloadList()
|
|
|
+ },
|
|
|
+ clearDate() {
|
|
|
+ this.startDate = ''
|
|
|
+ this.endDate = ''
|
|
|
+ this.reloadList()
|
|
|
+ },
|
|
|
+ reloadList() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const list = this.$refs.listScroll
|
|
|
+ if (list) list.reloadList(this.initParams)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGroupItems(group) {
|
|
|
+ return group.orderChildren || group.merchantPackageOrderDTOS || group.items || []
|
|
|
+ },
|
|
|
+ getAfterSaleEntries(data) {
|
|
|
+ return (data || []).reduce((entries, group, groupIndex) => {
|
|
|
+ const items = this.getGroupItems(group)
|
|
|
+ if (!items.length) {
|
|
|
+ entries.push({
|
|
|
+ group,
|
|
|
+ item: group,
|
|
|
+ key: this.getItemKey(group, group, 0, groupIndex)
|
|
|
+ })
|
|
|
+ return entries
|
|
|
+ }
|
|
|
+ items.forEach((item, itemIndex) => {
|
|
|
+ entries.push({
|
|
|
+ group,
|
|
|
+ item,
|
|
|
+ key: this.getItemKey(group, item, itemIndex, groupIndex)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return entries
|
|
|
+ }, [])
|
|
|
+ },
|
|
|
+ getGroupKey(group, groupIndex) {
|
|
|
+ return group.hostOrderId || group.id || `group-${groupIndex}`
|
|
|
+ },
|
|
|
+ getItemKey(group, item, itemIndex, groupIndex) {
|
|
|
+ return `${this.getGroupKey(group, groupIndex)}-${item.userOrderId || item.merchantOrderPackageId || item.id || itemIndex}`
|
|
|
+ },
|
|
|
+ getGroupTime(group) {
|
|
|
+ const value = group.groupTime || group.groupMealTime || group.groupSuccessTime || group.groupingTime || group.clusterTime || group.createTime || group.orderTime || group.payTime || ''
|
|
|
+ if (!value) return '--'
|
|
|
+ const text = String(value).trim()
|
|
|
+ const match = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})(?:[ T](\d{1,2}):(\d{2}))?/)
|
|
|
+ if (!match) return text.length > 16 ? text.slice(0, 16) : text
|
|
|
+ const date = `${match[1]}.${Number(match[2])}.${Number(match[3])}`
|
|
|
+ return match[4] ? `${date} ${String(match[4]).padStart(2, '0')}:${match[5]}` : date
|
|
|
+ },
|
|
|
+ getMealNumber(item) {
|
|
|
+ return item.mealNumber || item.pickupNumber || item.takeMealNumber || item.mealCode || '--'
|
|
|
+ },
|
|
|
+ getCustomerName(item, group = {}) {
|
|
|
+ return item.linkName || item.userName || item.customerName || item.consignee || group.linkName || group.userName || '--'
|
|
|
+ },
|
|
|
+ getCustomerPhone(item, group = {}) {
|
|
|
+ return item.userPhone || group.userPhone || '--'
|
|
|
+ },
|
|
|
+ getDishDescription(item) {
|
|
|
+ return item.dishName || item.packageContent || item.dishNames || item.boxName || '暂无菜品信息'
|
|
|
+ },
|
|
|
+ getGroupCopies(group) {
|
|
|
+ return group.totalCopies || group.copies || group.buyNumber || this.getGroupItems(group).reduce((sum, item) => sum + this.getItemCopies(item), 0)
|
|
|
+ },
|
|
|
+ getItemCopies(item) {
|
|
|
+ return Number(item.packageNumber || item.numberUserCount || item.copies || 0)
|
|
|
+ },
|
|
|
+ getItemPrice(item) {
|
|
|
+ if (item.groupPrice != null) return item.groupPrice
|
|
|
+ if (item.price != null) return item.price
|
|
|
+ return item.packagePrice || 0
|
|
|
+ },
|
|
|
+ getItemContainerFee(item) {
|
|
|
+ if (item.containerFee != null) return item.containerFee
|
|
|
+ if (item.boxFee != null) return item.boxFee
|
|
|
+ return Number(item.boxPrice || 0) * this.getItemCopies(item)
|
|
|
+ },
|
|
|
+ getGroupContainerFee(group) {
|
|
|
+ if (group.containerFeeTotal != null) return group.containerFeeTotal
|
|
|
+ if (group.boxFeeTotal != null) return group.boxFeeTotal
|
|
|
+ return this.getGroupItems(group).reduce((sum, item) => sum + Number(this.getItemContainerFee(item) || 0), 0)
|
|
|
+ },
|
|
|
+ getGroupAmount(group) {
|
|
|
+ if (group.amountTotal != null) return group.amountTotal
|
|
|
+ if (group.copiesAmount != null) return group.copiesAmount
|
|
|
+ return group.totalAmount != null ? group.totalAmount : 0
|
|
|
+ },
|
|
|
+ getItemStatusText(item) {
|
|
|
+ const text = item.orderStatusName || item.statusName || ''
|
|
|
+ if (text.includes('已出餐')) return '已出餐'
|
|
|
+ if (text.includes('未出餐') || text.includes('待出餐') || text.includes('成团')) return '未出餐'
|
|
|
+ const status = Number(item.orderStatus)
|
|
|
+ if (Number.isFinite(status)) return status >= 3 && status !== 6 ? '已出餐' : '未出餐'
|
|
|
+ return this.currentTab === 1 ? '已出餐' : '未出餐'
|
|
|
+ },
|
|
|
+ getAfterSaleStatusText(entry) {
|
|
|
+ const item = entry.item || {}
|
|
|
+ const group = entry.group || {}
|
|
|
+ const text = item.refundStatusName || item.refundTypeName || item.afterSaleStatusName || group.refundStatusName || group.refundTypeName || group.afterSaleStatusName
|
|
|
+ if (text) {
|
|
|
+ if (text.includes('成功')) return '退款成功'
|
|
|
+ if (text.includes('拒绝')) return '拒绝退款'
|
|
|
+ if (text.includes('失败')) return '退款失败'
|
|
|
+ if (text.includes('申请') || text.includes('处理中') || text.includes('退款中')) return '售后申请中'
|
|
|
+ return text
|
|
|
+ }
|
|
|
+ const type = item.refundType != null
|
|
|
+ ? item.refundType
|
|
|
+ : (item.refundStatus != null ? item.refundStatus : (group.refundType != null ? group.refundType : group.refundStatus))
|
|
|
+ return ({ 0: '售后申请中', 1: '退款成功', 2: '售后申请中', 3: '退款失败', 4: '拒绝退款' })[type] || '售后申请中'
|
|
|
+ },
|
|
|
+ getAfterSaleStatusClass(entry) {
|
|
|
+ const text = this.getAfterSaleStatusText(entry)
|
|
|
+ if (text.includes('成功')) return 'success'
|
|
|
+ if (text.includes('拒绝') || text.includes('失败')) return 'danger'
|
|
|
+ return 'pending'
|
|
|
+ },
|
|
|
+ formatDateLabel(value) {
|
|
|
+ const parts = String(value || '').slice(0, 10).split('-')
|
|
|
+ if (parts.length !== 3) return value
|
|
|
+ return `${Number(parts[1])}.${Number(parts[2])}`
|
|
|
+ },
|
|
|
+ formatMoney(value) {
|
|
|
+ const number = Number(value)
|
|
|
+ if (!Number.isFinite(number)) return '0'
|
|
|
+ return number.toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
|
|
|
+ },
|
|
|
+ getProductImage(value) {
|
|
|
+ const image = String(value || '').split(',').filter(Boolean)[0] || ''
|
|
|
+ if (!image || /^https?:\/\//.test(image)) return image
|
|
|
+ return this.$config && this.$config.apiUrl ? `${this.$config.apiUrl}/${image}` : image
|
|
|
+ },
|
|
|
+ openOrder(group, item) {
|
|
|
+ const hostOrderId = group.hostOrderId || item.hostOrderId
|
|
|
+ if (!hostOrderId) return
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/merchantDish/orders/order-details?hostOrderId=${encodeURIComponent(hostOrderId)}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openAfterSaleOrder(group, item) {
|
|
|
+ const params = {
|
|
|
+ packageId: item.packageId || group.packageId,
|
|
|
+ userOrderId: item.userOrderId || group.userOrderId,
|
|
|
+ hostOrderId: item.hostOrderId || group.hostOrderId
|
|
|
+ }
|
|
|
+ if (!params.hostOrderId) {
|
|
|
+ uni.showToast({ title: '缺少订单信息', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const query = this.$u.queryParams(params)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/merchantDish/orders/refund-details${query}`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7f8fc;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.search-bar {
|
|
|
+ height: 88rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10rpx 32rpx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tabs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tab {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 100%;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tab.active {
|
|
|
+ color: #1c7cf9;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow-down {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 8rpx;
|
|
|
+ left: 50%;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+.date-filter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 80rpx;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.date-trigger {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.date-clear {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12rpx 4rpx 12rpx 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.list-wrap {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-list {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 32rpx 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-card {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.group-header,
|
|
|
+.after-sale-header,
|
|
|
+.address-row,
|
|
|
+.pickup-row,
|
|
|
+.product-row,
|
|
|
+.product-bottom,
|
|
|
+.card-footer,
|
|
|
+.footer-amount {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.group-header {
|
|
|
+ justify-content: space-between;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.completed-group-header {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-header {
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 16rpx;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-header .address-title {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-status {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-status.pending {
|
|
|
+ color: #f8b328;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-status.success {
|
|
|
+ color: #39cf34;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-status.danger {
|
|
|
+ color: #f53f3f;
|
|
|
+}
|
|
|
+
|
|
|
+.group-time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ min-width: 0;
|
|
|
+ color: #4e5969;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.group-time text {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.copies {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ color: #999;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.copies text {
|
|
|
+ color: #388bf9;
|
|
|
+}
|
|
|
+
|
|
|
+.address-row {
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.address-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
+ min-width: 0;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.address-title text {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.region {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ color: #666;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-separator {
|
|
|
+ height: 1rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-item {
|
|
|
+ padding: 16rpx 0 24rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.pickup-row {
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #eff6ff;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-pickup {
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.pickup-number {
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.item-status {
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+ min-width: 0;
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-info text {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.product-row {
|
|
|
+ align-items: stretch;
|
|
|
+ gap: 12rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.product-info {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.product-name {
|
|
|
+ overflow: hidden;
|
|
|
+ color: #1d2129;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.box-fee,
|
|
|
+.product-desc,
|
|
|
+.quantity {
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.product-desc {
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.product-bottom {
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.price-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ color: #1d2129;
|
|
|
+}
|
|
|
+
|
|
|
+.price-label {
|
|
|
+ margin-right: 4rpx;
|
|
|
+ color: #4e5969;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.price-unit {
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.after-sale-price .price-unit,
|
|
|
+.after-sale-price .price {
|
|
|
+ color: #ff004e;
|
|
|
+}
|
|
|
+
|
|
|
+.card-footer {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.footer-amount {
|
|
|
+ align-items: baseline;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-unit,
|
|
|
+.amount-value {
|
|
|
+ color: #ff004e;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-unit {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.amount-value {
|
|
|
+ font-size: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.total-amount {
|
|
|
+ font-size: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-search {
|
|
|
+ height: 64rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+</style>
|