<template>
|
<view class="order-detail-page">
|
<view v-if="!showMapStatus" class="order-detail-page__simple-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
<view class="order-detail-page__simple-nav-inner">
|
<text class="order-detail-page__simple-nav-title">{{ detailStatus === 'rated' ? '订单已评价' : '订单已完成' }}</text>
|
</view>
|
</view>
|
|
<view v-if="showMapStatus" class="order-detail-page__fixed-top">
|
<view class="order-detail-page__map-wrap">
|
<map
|
class="order-detail-page__map"
|
:latitude="mapData.center.latitude"
|
:longitude="mapData.center.longitude"
|
:markers="mapData.markers"
|
:polyline="mapData.polyline"
|
:include-points="mapData.includePoints"
|
:scale="mapData.scale"
|
:enable-zoom="true"
|
:enable-scroll="true"
|
></map>
|
<view class="order-detail-page__map-bubble">
|
<text class="order-detail-page__map-bubble-text">剩余3.2km，约4分钟</text>
|
</view>
|
</view>
|
|
<view class="order-detail-page__status-bar">
|
<view class="order-detail-page__status-left">
|
<view class="order-detail-page__status-dot"></view>
|
<text class="order-detail-page__status-title">{{ statusTextMap[detailStatus] || '待取货' }}</text>
|
</view>
|
<view class="order-detail-page__status-right">
|
<text v-if="detailStatus === 'pickup'" class="order-detail-page__status-cancel">取消订单</text>
|
<text class="order-detail-page__status-no">#1</text>
|
</view>
|
</view>
|
</view>
|
|
<scroll-view class="order-detail-page__body" scroll-y :style="bodyStyle">
|
<view class="order-detail-page__content">
|
<view class="order-detail-page__section order-detail-page__section--main">
|
<view v-if="showMapStatus" class="order-detail-page__summary">
|
<view class="order-detail-page__summary-left">
|
<view class="order-detail-page__head-left">
|
<text class="order-detail-page__time">35分钟内</text>
|
<text class="order-detail-page__time-sub">送达</text>
|
</view>
|
|
<view class="order-detail-page__tags">
|
<image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
|
<text class="order-detail-page__tag-text">贵重物品</text>
|
</view>
|
</view>
|
|
<view class="order-detail-page__summary-right">
|
<text class="order-detail-page__price">¥20.5</text>
|
<text class="order-detail-page__extra">含加急¥3.0</text>
|
</view>
|
</view>
|
|
<view v-else class="order-detail-page__done-summary">
|
<view class="order-detail-page__done-summary-left">
|
<text class="order-detail-page__done-title">{{ detailStatus === 'rated' ? '订单已评价' : '订单已完成' }}</text>
|
<view class="order-detail-page__tags order-detail-page__tags--done">
|
<image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
|
<text class="order-detail-page__tag-text">贵重物品</text>
|
</view>
|
</view>
|
<view class="order-detail-page__done-summary-right">
|
<view class="order-detail-page__done-price-row">
|
<text v-if="detailStatus === 'rated'" class="order-detail-page__settled-tag">已结算</text>
|
<text class="order-detail-page__price">¥20.5</text>
|
</view>
|
<text class="order-detail-page__extra">含加急¥3.0</text>
|
</view>
|
</view>
|
|
<view class="order-detail-page__route-list">
|
<view class="order-detail-page__route-item">
|
<view class="order-detail-page__route-left">
|
<text class="order-detail-page__distance-top">349</text>
|
<text class="order-detail-page__distance-unit">m</text>
|
<view class="order-detail-page__route-divider"></view>
|
</view>
|
<view class="order-detail-page__route-main">
|
<view class="order-detail-page__route-texts">
|
<text class="order-detail-page__route-title">中铁快运南站旗舰店</text>
|
<text class="order-detail-page__route-desc">莲花路200号莲花产业园F栋401</text>
|
</view>
|
<view class="order-detail-page__route-actions">
|
<image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
|
<image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
|
<view class="order-detail-page__route-item order-detail-page__route-item--end">
|
<view class="order-detail-page__route-left">
|
<view class="order-detail-page__route-pin"></view>
|
<view class="order-detail-page__route-divider order-detail-page__route-divider--light"></view>
|
<text class="order-detail-page__distance-top">12.5</text>
|
<text class="order-detail-page__distance-unit">km</text>
|
</view>
|
<view class="order-detail-page__route-main">
|
<view class="order-detail-page__route-texts">
|
<text class="order-detail-page__route-title">佳苑巴黎都市3期10栋301室</text>
|
<text class="order-detail-page__route-desc">洞庭湖路与湖北路交叉口西150米</text>
|
</view>
|
<view class="order-detail-page__route-actions">
|
<image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
|
<image class="order-detail-page__route-icon" src="/static/image/ic_daohang@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="showMapStatus" class="order-detail-page__qrcode-wrap">
|
<view class="order-detail-page__qrcode-box">
|
<image class="order-detail-page__qrcode-image" src="/static/logo.png" mode="aspectFit"></image>
|
</view>
|
<text class="order-detail-page__qrcode-value">767889</text>
|
<text class="order-detail-page__qrcode-label">取货码</text>
|
</view>
|
</view>
|
|
<view class="order-detail-page__section">
|
<text class="order-detail-page__section-title">客户信息</text>
|
<view class="order-detail-page__row-info">
|
<text class="order-detail-page__row-text">刘先生（手机号2878）</text>
|
<image class="order-detail-page__row-icon" src="/static/image/ic_call@2x.png" mode="aspectFit"></image>
|
</view>
|
<view v-if="detailStatus === 'rated'" class="order-detail-page__comment-card">
|
<text class="order-detail-page__comment-title">客户已评价：</text>
|
<view class="order-detail-page__comment-score">
|
<text class="order-detail-page__comment-star">★</text>
|
<text class="order-detail-page__comment-score-text">4.5</text>
|
</view>
|
<text class="order-detail-page__comment-content">送的很快，东西完好无损</text>
|
<image class="order-detail-page__comment-image" src="/static/logo.png" mode="aspectFill"></image>
|
</view>
|
</view>
|
|
<view class="order-detail-page__section">
|
<text class="order-detail-page__section-title">物品清单（共8件）</text>
|
<view class="order-detail-page__goods-list">
|
<view v-for="item in goodsList" :key="item.name" class="order-detail-page__goods-item">
|
<text class="order-detail-page__goods-name">{{ item.name }}</text>
|
<text class="order-detail-page__goods-count">x{{ item.count }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="order-detail-page__section">
|
<text class="order-detail-page__section-title">物品信息</text>
|
<text class="order-detail-page__goods-category">文件</text>
|
<view class="order-detail-page__photos">
|
<image v-for="(item, index) in photos" :key="index" class="order-detail-page__photo" :src="item" mode="aspectFill"></image>
|
</view>
|
</view>
|
|
<view class="order-detail-page__section order-detail-page__section--last">
|
<text class="order-detail-page__section-title">订单信息</text>
|
<view class="order-detail-page__detail-list">
|
<view class="order-detail-page__detail-item">
|
<text class="order-detail-page__detail-label">订单编号：</text>
|
<text class="order-detail-page__detail-value">202107131749250001</text>
|
</view>
|
<view class="order-detail-page__detail-item">
|
<text class="order-detail-page__detail-label">下单时间：</text>
|
<text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
|
</view>
|
<view class="order-detail-page__detail-item">
|
<text class="order-detail-page__detail-label">接单时间：</text>
|
<text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
|
</view>
|
<view class="order-detail-page__detail-item">
|
<text class="order-detail-page__detail-label">订单备注：</text>
|
<text class="order-detail-page__detail-value">-</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
|
<view v-if="footerButtons.length" class="order-detail-page__footer">
|
<button
|
v-for="button in footerButtons"
|
:key="button.text"
|
class="order-detail-page__footer-btn"
|
:class="button.primary ? 'order-detail-page__footer-btn--primary' : 'order-detail-page__footer-btn--ghost'"
|
hover-class="order-detail-page__footer-btn--hover"
|
@click="handleFooterAction(button)"
|
>
|
{{ button.text }}
|
</button>
|
</view>
|
|
<u-popup :show="showPhotoPopup" round="20" mode="bottom" @close="closePhotoPopup">
|
<view class="photo-popup">
|
<view class="photo-popup__header">
|
<view class="photo-popup__placeholder"></view>
|
<text class="photo-popup__title">{{ photoPopupTitle }}</text>
|
<image class="photo-popup__close" src="/static/image/ic_close2@2x.png" mode="aspectFit" @click="closePhotoPopup"></image>
|
</view>
|
|
<view class="photo-popup__section">
|
<view class="photo-popup__label-row">
|
<text class="photo-popup__label">{{ photoPopupLabel }}</text>
|
<text class="photo-popup__required">*</text>
|
<text class="photo-popup__hint">最多3张照片</text>
|
</view>
|
|
<view class="photo-popup__photos">
|
<view class="photo-popup__upload-card">
|
<image class="photo-popup__upload-icon" src="/static/image/ic_photo@2x.png" mode="aspectFit"></image>
|
<text class="photo-popup__upload-text">点击拍照</text>
|
</view>
|
|
<view class="photo-popup__preview-card">
|
<image class="photo-popup__preview-image" src="/static/logo.png" mode="aspectFill"></image>
|
<view class="photo-popup__preview-mask">
|
<text class="photo-popup__preview-delete">删除</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="photo-popup__section photo-popup__section--remark">
|
<text class="photo-popup__remark-title">备注信息</text>
|
<textarea v-model="photoRemark" class="photo-popup__textarea" maxlength="200" placeholder="请输入" placeholder-style="color: #c7cbd3;" />
|
</view>
|
|
<button class="photo-popup__submit" hover-class="photo-popup__submit--hover" @click="submitPhotoPopup">{{ photoPopupSubmitText }}</button>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
detailStatus: 'pickup',
|
statusBarHeight: 0,
|
topFixedHeight: 0,
|
showPhotoPopup: false,
|
photoPopupMode: '',
|
photoRemark: '',
|
statusTextMap: {
|
pickup: '待取货',
|
delivering: '配送中',
|
finished: '已完成',
|
rated: '已评价',
|
cancelled: '已取消'
|
},
|
goodsList: [
|
{ name: '大件行李', count: 1 },
|
{ name: '中件行李', count: 2 },
|
{ name: '小件行李', count: 3 },
|
{ name: '背包', count: 2 }
|
],
|
photos: ['/static/logo.png', '/static/logo.png', '/static/logo.png']
|
}
|
},
|
computed: {
|
showMapStatus() {
|
return this.detailStatus === 'pickup' || this.detailStatus === 'delivering'
|
},
|
mapData() {
|
const startPoint = { latitude: 31.829512, longitude: 117.239211 }
|
const endPoint = { latitude: 31.841268, longitude: 117.278695 }
|
const routePoints = [
|
startPoint,
|
{ latitude: 31.831624, longitude: 117.247836 },
|
{ latitude: 31.834918, longitude: 117.255467 },
|
{ latitude: 31.838214, longitude: 117.265358 },
|
{ latitude: 31.840126, longitude: 117.272481 },
|
endPoint
|
]
|
|
return {
|
center: { latitude: 31.83539, longitude: 117.258953 },
|
markers: [
|
{ id: 1, latitude: startPoint.latitude, longitude: startPoint.longitude, iconPath: '/static/image/map_marker_start.svg', width: 32, height: 38, anchor: { x: 0.5, y: 1 } },
|
{ id: 2, latitude: endPoint.latitude, longitude: endPoint.longitude, iconPath: '/static/image/map_marker_end.svg', width: 32, height: 38, anchor: { x: 0.5, y: 1 } }
|
],
|
polyline: [
|
{ points: routePoints, color: '#00c67a', width: 20, arrowLine: true, dottedLine: true, borderColor: '#469972', borderWidth: 10 }
|
],
|
includePoints: routePoints,
|
scale: 12
|
}
|
},
|
bodyStyle() {
|
const footerHeight = uni.upx2px(116)
|
const simpleNavHeight = this.statusBarHeight + uni.upx2px(88)
|
return {
|
paddingTop: (this.showMapStatus ? this.topFixedHeight : simpleNavHeight) + 'px',
|
height: `calc(100vh - ${this.footerButtons.length ? footerHeight : 0}px)`
|
}
|
},
|
footerButtons() {
|
const buttonMap = {
|
pickup: [
|
{ text: '取消订单', primary: false },
|
{ text: '拍照取货', primary: true }
|
],
|
delivering: [
|
{ text: '拍照送达', primary: true }
|
],
|
finished: [],
|
rated: [],
|
cancelled: []
|
}
|
|
return buttonMap[this.detailStatus] || []
|
},
|
photoPopupTitle() {
|
return this.photoPopupMode === 'delivering' ? '拍照送达' : '拍照取货'
|
},
|
photoPopupLabel() {
|
return this.photoPopupMode === 'delivering' ? '拍摄送达照片' : '拍摄取货照片'
|
},
|
photoPopupSubmitText() {
|
return this.photoPopupMode === 'delivering' ? '确认送达' : '确认取货'
|
}
|
},
|
onLoad() {
|
const pages = getCurrentPages()
|
const currentPage = pages[pages.length - 1]
|
const options = currentPage && currentPage.options ? currentPage.options : {}
|
const systemInfo = uni.getSystemInfoSync()
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
this.detailStatus = options.status || 'pickup'
|
this.topFixedHeight = uni.upx2px(500 + 92)
|
},
|
methods: {
|
handleFooterAction(button) {
|
if (!button.primary) {
|
return
|
}
|
|
this.photoPopupMode = this.detailStatus === 'delivering' ? 'delivering' : 'pickup'
|
this.showPhotoPopup = true
|
},
|
closePhotoPopup() {
|
this.showPhotoPopup = false
|
},
|
submitPhotoPopup() {
|
this.showPhotoPopup = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.order-detail-page {
|
height: 100vh;
|
background: #f6f8fc;
|
overflow: hidden;
|
|
&__simple-nav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
z-index: 11;
|
background: #106EFA;
|
}
|
|
&__simple-nav-inner {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 24rpx;
|
}
|
|
&__simple-nav-title {
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
&__fixed-top {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
z-index: 10;
|
background: #ffffff;
|
}
|
|
&__map-wrap {
|
position: relative;
|
margin: 0;
|
height: 500rpx;
|
border-radius: 0;
|
overflow: hidden;
|
background: #dbe8ff;
|
}
|
|
&__map {
|
width: 100%;
|
height: 100%;
|
}
|
|
&__map-bubble {
|
position: absolute;
|
left: 34rpx;
|
bottom: 32rpx;
|
padding: 12rpx 18rpx;
|
border-radius: 14rpx;
|
background: rgba(255, 255, 255, 0.96);
|
box-shadow: 0 8rpx 18rpx rgba(23, 74, 163, 0.12);
|
}
|
|
&__map-bubble-text {
|
font-size: 24rpx;
|
font-weight: 600;
|
color: #2f6ff2;
|
}
|
|
&__status-bar {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 92rpx;
|
padding: 0 24rpx;
|
background: #d9e8ff;
|
}
|
|
&__status-left,
|
&__status-right {
|
display: flex;
|
align-items: center;
|
}
|
|
&__status-dot {
|
width: 18rpx;
|
height: 18rpx;
|
border-radius: 6rpx;
|
background: #2b7cff;
|
margin-right: 12rpx;
|
}
|
|
&__status-title,
|
&__status-no {
|
font-size: 34rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__status-cancel {
|
padding: 8rpx 18rpx;
|
margin-right: 18rpx;
|
border: 2rpx solid #72a8ff;
|
border-radius: 999rpx;
|
font-size: 24rpx;
|
color: #2b7cff;
|
background: rgba(255, 255, 255, 0.7);
|
}
|
|
&__body {
|
box-sizing: border-box;
|
}
|
|
&__content {
|
padding: 16rpx 0 calc(env(safe-area-inset-bottom) + 26rpx);
|
}
|
|
&__section {
|
margin: 16rpx 20rpx 0;
|
padding: 26rpx 22rpx;
|
border-radius: 20rpx;
|
background: #ffffff;
|
|
&--main {
|
margin-top: 0;
|
}
|
|
&--last {
|
margin-bottom: calc(env(safe-area-inset-bottom) + 26rpx);
|
}
|
}
|
|
&__summary {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
}
|
|
&__done-summary {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
gap: 20rpx;
|
}
|
|
&__done-summary-left {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__done-summary-right {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
flex-shrink: 0;
|
}
|
|
&__done-title {
|
font-size: 38rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__done-price-row {
|
display: flex;
|
align-items: center;
|
gap: 10rpx;
|
}
|
|
&__settled-tag {
|
padding: 4rpx 10rpx;
|
border-radius: 8rpx;
|
border: 1rpx solid #ff8f8f;
|
font-size: 22rpx;
|
font-weight: 600;
|
color: #ff6a6a;
|
background: #fff4f4;
|
}
|
|
&__summary-left {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__summary-right {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
margin-left: 20rpx;
|
flex-shrink: 0;
|
}
|
|
&__head-left {
|
display: flex;
|
align-items: baseline;
|
}
|
|
&__time {
|
font-size: 42rpx;
|
font-weight: 700;
|
color: #ff972c;
|
}
|
|
&__time-sub,
|
&__extra,
|
&__route-desc,
|
&__qrcode-label,
|
&__detail-label,
|
&__detail-value,
|
&__goods-count,
|
&__row-text,
|
&__goods-category {
|
font-size: 24rpx;
|
color: #adb3bd;
|
}
|
|
&__time-sub {
|
margin-left: 8rpx;
|
}
|
|
&__price {
|
font-size: 44rpx;
|
font-weight: 700;
|
color: #ff4132;
|
}
|
|
&__extra {
|
margin-top: 6rpx;
|
}
|
|
&__tags {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 12rpx;
|
margin-top: 14rpx;
|
|
&--done {
|
margin-top: 12rpx;
|
}
|
}
|
|
&__tag-icon {
|
width: 108rpx;
|
height: 40rpx;
|
}
|
|
&__tag-text {
|
padding: 5rpx 12rpx;
|
border-radius: 8rpx;
|
background: #ff9c45;
|
font-size: 22rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
|
&__route-list {
|
margin-top: 22rpx;
|
}
|
|
&__route-item {
|
display: flex;
|
align-items: flex-start;
|
|
&--end {
|
margin-top: 24rpx;
|
}
|
}
|
|
&__route-left {
|
width: 60rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
flex-shrink: 0;
|
}
|
|
&__distance-top {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #515866;
|
}
|
|
&__distance-unit {
|
font-size: 22rpx;
|
color: #939aa6;
|
}
|
|
&__route-divider {
|
width: 4rpx;
|
height: 42rpx;
|
margin-top: 8rpx;
|
border-radius: 999rpx;
|
background: #d7dbe2;
|
|
&--light {
|
height: 18rpx;
|
margin: 8rpx 0;
|
}
|
}
|
|
&__route-pin {
|
width: 18rpx;
|
height: 18rpx;
|
margin-top: 4rpx;
|
border-radius: 50%;
|
background: #888f9b;
|
}
|
|
&__route-main {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
gap: 18rpx;
|
}
|
|
&__route-texts {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__route-title {
|
display: block;
|
font-size: 38rpx;
|
font-weight: 700;
|
line-height: 1.3;
|
color: #2b3139;
|
}
|
|
&__route-desc {
|
display: block;
|
margin-top: 8rpx;
|
line-height: 1.5;
|
}
|
|
&__route-actions {
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
flex-shrink: 0;
|
}
|
|
&__route-icon,
|
&__row-icon {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
&__qrcode-wrap {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding-top: 30rpx;
|
}
|
|
&__qrcode-box {
|
width: 360rpx;
|
height: 360rpx;
|
padding: 16rpx;
|
border-radius: 8rpx;
|
border: 2rpx solid #EEEEEE;
|
box-sizing: border-box;
|
}
|
|
&__qrcode-image {
|
width: 100%;
|
height: 100%;
|
}
|
|
&__qrcode-value {
|
margin-top: 16rpx;
|
font-size: 40rpx;
|
font-weight: 700;
|
color: #303640;
|
}
|
|
&__qrcode-label {
|
margin-top: 6rpx;
|
}
|
|
&__section-title {
|
display: block;
|
font-size: 32rpx;
|
font-weight: 700;
|
color: #2b3139;
|
}
|
|
&__row-info {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
gap: 16rpx;
|
margin-top: 26rpx;
|
}
|
|
&__row-text {
|
flex: 1;
|
font-size: 28rpx;
|
color: #4d5562;
|
}
|
|
&__comment-card {
|
margin-top: 20rpx;
|
padding: 22rpx 20rpx;
|
border-radius: 16rpx;
|
background: #f7f8fa;
|
}
|
|
&__comment-title,
|
&__comment-content,
|
&__comment-score-text {
|
font-size: 28rpx;
|
color: #4d5562;
|
}
|
|
&__comment-score {
|
display: flex;
|
align-items: center;
|
margin-top: 10rpx;
|
}
|
|
&__comment-star {
|
font-size: 28rpx;
|
color: #ffb323;
|
margin-right: 8rpx;
|
}
|
|
&__comment-content {
|
display: block;
|
margin-top: 12rpx;
|
line-height: 1.5;
|
}
|
|
&__comment-image {
|
width: 92rpx;
|
height: 92rpx;
|
border-radius: 10rpx;
|
margin-top: 14rpx;
|
}
|
|
&__goods-list,
|
&__detail-list {
|
margin-top: 22rpx;
|
}
|
|
&__goods-item,
|
&__detail-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 8rpx 0;
|
}
|
|
&__goods-name {
|
font-size: 28rpx;
|
color: #4d5562;
|
}
|
|
&__goods-category {
|
display: block;
|
margin-top: 24rpx;
|
font-size: 28rpx;
|
color: #4d5562;
|
}
|
|
&__photos {
|
display: flex;
|
gap: 16rpx;
|
margin-top: 18rpx;
|
}
|
|
&__photo {
|
width: 92rpx;
|
height: 92rpx;
|
border-radius: 10rpx;
|
}
|
|
&__detail-label {
|
color: #aeb4be;
|
}
|
|
&__detail-value {
|
color: #666d79;
|
}
|
|
&__footer {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
justify-content: flex-end;
|
gap: 20rpx;
|
padding: 14rpx 20rpx calc(env(safe-area-inset-bottom) + 14rpx);
|
background: #ffffff;
|
box-shadow: 0 -8rpx 20rpx rgba(30, 46, 80, 0.06);
|
}
|
|
&__footer-btn {
|
width: 182rpx;
|
height: 68rpx;
|
line-height: 68rpx;
|
padding: 0;
|
border-radius: 999rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
border: 1rpx solid transparent;
|
|
&::after {
|
border: 0;
|
}
|
|
&--ghost {
|
background: #ffffff;
|
border-color: #d8dde5;
|
color: #959daa;
|
}
|
|
&--primary {
|
background: #2d7cff;
|
color: #ffffff;
|
}
|
|
&--hover {
|
opacity: 0.92;
|
}
|
}
|
}
|
|
.photo-popup {
|
padding: 30rpx 28rpx calc(env(safe-area-inset-bottom) + 28rpx);
|
background: #ffffff;
|
border-top-left-radius: 20rpx;
|
border-top-right-radius: 20rpx;
|
overflow: hidden;
|
|
&__header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
&__placeholder,
|
&__close {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
}
|
|
&__placeholder {
|
opacity: 0;
|
}
|
|
&__title {
|
font-size: 34rpx;
|
font-weight: 700;
|
color: #111111;
|
}
|
|
&__section {
|
margin-top: 54rpx;
|
|
&--remark {
|
margin-top: 48rpx;
|
}
|
}
|
|
&__label-row {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
&__label,
|
&__remark-title {
|
font-size: 28rpx;
|
font-weight: 700;
|
color: #23262d;
|
}
|
|
&__required {
|
margin-left: 4rpx;
|
font-size: 28rpx;
|
font-weight: 700;
|
color: #ff3b30;
|
}
|
|
&__hint {
|
margin-left: 12rpx;
|
font-size: 24rpx;
|
color: #a8adb7;
|
}
|
|
&__photos {
|
display: flex;
|
gap: 18rpx;
|
margin-top: 28rpx;
|
}
|
|
&__upload-card,
|
&__preview-card {
|
position: relative;
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
}
|
|
&__upload-card {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
border: 2rpx solid #ebedf2;
|
background: #f8f9fb;
|
}
|
|
&__upload-icon {
|
width: 48rpx;
|
height: 48rpx;
|
opacity: 0.55;
|
}
|
|
&__upload-text {
|
margin-top: 12rpx;
|
font-size: 26rpx;
|
color: #a0a6b0;
|
}
|
|
&__preview-card {
|
background: #eef1f5;
|
}
|
|
&__preview-image {
|
width: 100%;
|
height: 100%;
|
}
|
|
&__preview-mask {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(0, 0, 0, 0.42);
|
}
|
|
&__preview-delete {
|
font-size: 26rpx;
|
color: #ffffff;
|
}
|
|
&__textarea {
|
width: 100%;
|
height: 110rpx;
|
margin-top: 24rpx;
|
padding: 28rpx 24rpx;
|
border-radius: 12rpx;
|
background: #f7f8fa;
|
font-size: 30rpx;
|
color: #2c3139;
|
}
|
|
&__submit {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
margin-top: 86rpx;
|
border-radius: 50rpx;
|
background: #106efa;
|
font-size: 32rpx;
|
font-weight: 700;
|
color: #ffffff;
|
border: 0;
|
padding: 0;
|
|
&::after {
|
border: 0;
|
}
|
|
&--hover {
|
opacity: 0.92;
|
}
|
}
|
}
|
</style>
|
