<template>
|
<view class="luggage-page">
|
<view class="top-gradient-bg"></view>
|
<view class="mode-tabs">
|
<view
|
v-for="item in modeTabs"
|
:key="item.value"
|
class="mode-tab"
|
:class="{ active: activeMode === item.value }"
|
@tap="switchMode(item.value)"
|
>
|
<text>{{ item.label }}</text>
|
<view v-if="activeMode === item.value" class="mode-line"></view>
|
</view>
|
</view>
|
|
<scroll-view scroll-y class="page-scroll">
|
<view class="page-content">
|
<view v-if="activeMode === 'local'" class="service-point-card cell-card" @click="openStorePopup">
|
<view class="cell-left with-icon">
|
<image class="cell-icon" src="/static/icon/ic_store@2x.png" mode="widthFix"></image>
|
<view class="store-cell-copy">
|
<text class="cell-title">{{ selectedStore ? selectedStore.name : servicePointPlaceholder }}</text>
|
<view class="store-cell-copy-addr">
|
<image src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
|
<text v-if="selectedStore" class="store-cell-subtitle">{{ selectedStore.address }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="cell-right">
|
<u-icon name="arrow-right" size="22" color="#222222"></u-icon>
|
</view>
|
</view>
|
|
<view v-else class="address-card section-card">
|
<view class="address-row" @tap="openStorePopup">
|
<view class="address-left">
|
<view class="address-badge send">寄</view>
|
<view class="address-copy">
|
<text class="address-title">寄件地址</text>
|
<text class="address-desc">请选择寄件服务点</text>
|
</view>
|
</view>
|
<u-icon name="arrow-right" size="20" color="#222222"></u-icon>
|
</view>
|
<view class="address-row no-border" @tap="openReceiveAddress">
|
<view class="address-left">
|
<view class="address-badge receive">收</view>
|
<view class="address-copy">
|
<text class="address-title">取件地址</text>
|
<text class="address-desc">请选择取件服务点或者其他地址</text>
|
</view>
|
</view>
|
<u-icon name="arrow-right" size="20" color="#222222"></u-icon>
|
</view>
|
</view>
|
|
<view class="section-card info-card">
|
<view class="section-head">
|
<text class="section-title">收件信息</text>
|
<text class="section-desc">（必填，可委托他人代取）</text>
|
</view>
|
<view class="form-row">
|
<text class="form-label">收件人</text>
|
<input v-model="form.receiver" class="form-input" :class="{ 'filled-input': form.receiver }" type="text" placeholder="请输入收件人姓名" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
|
</view>
|
<view class="form-row no-border">
|
<text class="form-label">收件电话</text>
|
<input v-model="form.mobile" class="form-input" :class="{ 'filled-input': form.mobile }" type="number" placeholder="请输入收件人电话" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
|
</view>
|
<view class="form-row dashed-row">
|
<text class="form-label">预计到店时间</text>
|
<view class="row-picker">
|
<text :class="form.arriveTime ? 'picker-value-text' : 'placeholder-text'">{{ form.arriveTime || '请选择' }}</text>
|
<u-icon name="arrow-right" size="18" color="#222222"></u-icon>
|
</view>
|
</view>
|
<view class="form-row no-border">
|
<text class="form-label">预计取件时间</text>
|
<view class="row-picker">
|
<text :class="form.pickupTime ? 'picker-value-text' : 'placeholder-text'">{{ form.pickupTime || '请选择' }}</text>
|
<u-icon name="arrow-right" size="18" color="#222222"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
<view class="section-card luggage-card">
|
<view class="section-head between">
|
<view>
|
<text class="section-title">寄存行李类型</text>
|
<text class="section-desc">（多选，必填）</text>
|
</view>
|
<view class="price-note">
|
<image class="price-note-icon" src="/static/icon/ic_tips@2x.png" mode="widthFix"></image>
|
<text>价格说明</text>
|
</view>
|
</view>
|
<view
|
v-for="item in luggageTypes"
|
:key="item.id"
|
class="luggage-item"
|
:class="{ active: luggageCountMap[item.id] > 0 }"
|
@tap="selectLuggage(item.id)"
|
>
|
<view class="luggage-info">
|
<image class="luggage-image" src="" mode="aspectFit"></image>
|
<view class="luggage-copy">
|
<text class="luggage-name">{{ item.name }}</text>
|
<text class="luggage-size">{{ item.size }}</text>
|
</view>
|
</view>
|
<view v-if="luggageCountMap[item.id] > 0" class="luggage-stepper" @tap.stop>
|
<view class="step-btn" @tap="decreaseCount(item.id)">
|
<u-icon name="minus" size="18" color="#B9C0C9"></u-icon>
|
</view>
|
<text class="step-count">{{ luggageCountMap[item.id] }}</text>
|
<view class="step-btn active" @tap="increaseCount(item.id)">
|
<u-icon name="plus" size="18" color="#FFFFFF"></u-icon>
|
</view>
|
</view>
|
<view v-else class="luggage-stepper add-only" @tap.stop>
|
<view class="step-btn active" @tap="increaseCount(item.id)">
|
<u-icon name="plus" size="18" color="#FFFFFF"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="section-card goods-card" @tap="openGoodsPopup">
|
<view class="section-head between arrow-head">
|
<view>
|
<text class="section-title">物品信息</text>
|
</view>
|
<view class="required-wrap">
|
<text class="section-required goods-required-text">{{ selectedGoodsText }}</text>
|
<u-icon name="arrow-right" size="18" color="#A8AFBA"></u-icon>
|
</view>
|
</view>
|
<view class="goods-upload-row">
|
<view class="upload-box">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedImages" :key="index" class="uploaded-box">
|
<image class="uploaded-image" :src="item.url" mode="aspectFill"></image>
|
<text class="uploaded-delete">删除</text>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="activeMode === 'city'" class="section-card service-time-card">
|
<view class="section-head">
|
<text class="section-title">服务时效</text>
|
<text class="section-desc">（必选）</text>
|
</view>
|
<view
|
v-for="item in serviceTimes"
|
:key="item.id"
|
class="service-time-item"
|
:class="{ active: selectedServiceTime === item.id }"
|
@tap="selectedServiceTime = item.id"
|
>
|
<text class="service-time-name">
|
<text>标速达</text>
|
<text>(预计6小时内送达)</text>
|
</text>
|
<text class="service-time-price">{{ item.price }}</text>
|
</view>
|
</view>
|
|
<view class="section-card simple-card">
|
<view class="form-row no-border currency-row">
|
<text class="form-label">行李保价</text>
|
<view class="input-wrap end-wrap insurance-wrap">
|
<input v-model="form.insurance" class="form-input money-input" :class="{ 'filled-input': form.insurance }" type="digit" placeholder="必填，请输入金额" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
|
<text class="unit-text">元</text>
|
</view>
|
</view>
|
<view v-if="insuranceFeeText" class="insurance-tip-row">
|
<text class="insurance-tip-label">物品保费:</text>
|
<text class="insurance-tip-value">{{ insuranceFeeText }}</text>
|
</view>
|
</view>
|
|
<view class="section-card simple-card">
|
<view class="form-row no-border">
|
<text class="form-label">备注</text>
|
<input v-model="form.remark" class="form-input" :class="{ 'filled-input': form.remark }" type="text" placeholder="请输入" placeholder-style="color: #B2B2B2;" placeholder-class="input-placeholder" />
|
</view>
|
</view>
|
|
</view>
|
</scroll-view>
|
|
<u-popup :show="showStorePopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showStorePopup = false">
|
<view class="store-popup-wrap">
|
<view class="store-popup-head">
|
<text class="store-popup-title">选择服务点</text>
|
<view class="store-popup-close" @tap="showStorePopup = false">
|
<u-icon name="close" size="28" color="#999999"></u-icon>
|
</view>
|
</view>
|
<view class="store-search-bar">
|
<image class="store-search-icon" src="/static/icon/ic_search2@2x.png" mode="widthFix"></image>
|
<input v-model="storeKeyword" class="store-search-input" type="text" placeholder="搜索服务点名称" placeholder-class="store-search-placeholder" />
|
</view>
|
<scroll-view scroll-y class="store-list-scroll">
|
<view
|
v-for="item in filteredStores"
|
:key="item.id"
|
class="store-option"
|
:class="{ active: tempSelectedStoreId === item.id }"
|
@tap="tempSelectedStoreId = item.id"
|
>
|
<view class="store-option-main">
|
<image class="store-thumb" src="" mode="aspectFill"></image>
|
<view class="store-option-copy">
|
<view class="store-option-head">
|
<text class="store-option-name">{{ item.name }}</text>
|
<text class="store-option-distance">{{ item.distance }}</text>
|
</view>
|
<view class="store-option-address-row">
|
<image class="store-option-address-icon" src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
|
<text class="store-option-address">{{ item.address }}</text>
|
</view>
|
<text class="store-option-time">{{ item.time }}</text>
|
</view>
|
</view>
|
<view v-if="tempSelectedStoreId === item.id" class="store-check">
|
<image src="/static/icon/ic_accept_sel@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="store-confirm-btn" @tap="confirmStore">确定选择</view>
|
</view>
|
</u-popup>
|
|
<u-popup :show="showGoodsPopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showGoodsPopup = false">
|
<view class="goods-popup-wrap">
|
<view class="goods-popup-head">
|
<text class="goods-popup-title">物品信息</text>
|
<view class="goods-popup-close" @tap="showGoodsPopup = false">
|
<u-icon name="close" size="28" color="#999999"></u-icon>
|
</view>
|
</view>
|
<view class="goods-popup-top">
|
<view class="goods-popup-title-row">
|
<text class="goods-main-title">物品名称</text>
|
<text class="goods-main-required">（必选）</text>
|
</view>
|
<view class="goods-danger-tip">
|
<image class="goods-danger-icon" src="/static/icon/ic_tips@2x.png" mode="widthFix"></image>
|
<text>禁寄物品</text>
|
</view>
|
</view>
|
<text class="goods-popup-desc">为确保物品寄递安全，请检查是否不夹带易燃易爆物品</text>
|
<view class="goods-tag-grid">
|
<view
|
v-for="item in goodsOptions"
|
:key="item.id"
|
class="goods-tag"
|
:class="{ active: tempSelectedGoodsIds.includes(item.id) }"
|
@tap="toggleGoods(item.id)"
|
>
|
<text>{{ item.name }}</text>
|
</view>
|
</view>
|
<view class="goods-save-btn" @tap="confirmGoods">保存</view>
|
</view>
|
</u-popup>
|
|
<u-popup :show="showAmountPopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showAmountPopup = false">
|
<view class="amount-popup-wrap">
|
<view class="amount-popup-head">
|
<text class="amount-popup-title">金额明细</text>
|
<view class="amount-popup-close" @tap="showAmountPopup = false">
|
<u-icon name="close" size="30" color="#999999"></u-icon>
|
</view>
|
</view>
|
<view class="amount-popup-content">
|
<view v-for="item in amountDetails" :key="item.label" class="amount-row">
|
<view class="amount-row-left">
|
<text class="amount-row-label">{{ item.label }}</text>
|
<text v-if="item.count" class="amount-row-count">x{{ item.count }}</text>
|
</view>
|
<text class="amount-row-value">{{ item.value }}</text>
|
</view>
|
</view>
|
<view class="agreement-bar popup-agreement-bar">
|
<image class="agreement-icon" src="/static/icon/ic_accept_sel@2x.png" mode="widthFix"></image>
|
<text class="agreement-text">我已阅读并同意</text>
|
<text class="agreement-link">《用户服务协议》</text>
|
<text class="agreement-text">及</text>
|
<text class="agreement-link">《隐私政策》</text>
|
</view>
|
<view class="bottom-action-row popup-action-row">
|
<view class="total-wrap">
|
<text class="total-label">总费用</text>
|
<text class="total-price">￥150.00</text>
|
<text class="detail-text">明细</text>
|
<u-icon name="arrow-up" size="18" color="#7B7F86"></u-icon>
|
</view>
|
<view class="submit-btn active-submit-btn">立即下单</view>
|
</view>
|
</view>
|
</u-popup>
|
|
<view class="bottom-bar">
|
<view class="agreement-bar">
|
<image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix"></image>
|
<text class="agreement-text">我已阅读并同意</text>
|
<text class="agreement-link">《用户服务协议》</text>
|
<text class="agreement-text">及</text>
|
<text class="agreement-link">《隐私政策》</text>
|
</view>
|
<view class="bottom-action-row">
|
<view class="total-wrap">
|
<text class="total-label">总费用</text>
|
<text class="total-price">{{ totalPriceText }}</text>
|
<text class="detail-text detail-click" @tap.stop="openAmountPopup">明细</text>
|
<u-icon name="arrow-down" size="18" color="#999999"></u-icon>
|
</view>
|
<view class="submit-btn active-submit-btn">立即下单</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
showStorePopup: false,
|
showGoodsPopup: false,
|
showAmountPopup: false,
|
activeMode: 'local',
|
modeTabs: [
|
{ label: '就地寄存', value: 'local' },
|
{ label: '同城寄送', value: 'city' }
|
],
|
agreementChecked: true,
|
storeKeyword: '',
|
tempSelectedStoreId: 2,
|
selectedStoreId: 2,
|
tempSelectedGoodsIds: [1],
|
selectedGoodsIds: [1],
|
selectedLuggageId: 1,
|
selectedServiceTime: 1,
|
luggageCountMap: {
|
1: 1,
|
2: 1,
|
3: 0
|
},
|
form: {
|
receiver: '蔡子瑄',
|
mobile: '18166525368',
|
arriveTime: '2026-04-15 16:30',
|
pickupTime: '2026-04-17 16:30',
|
insurance: '200',
|
remark: ''
|
},
|
luggageTypes: [
|
{ id: 1, name: '大件行李箱', size: '24-28寸' },
|
{ id: 2, name: '中件行李箱', size: '24-28寸' },
|
{ id: 3, name: '小件行李箱', size: '24-28寸' }
|
],
|
serviceTimes: [
|
{ id: 1, name: '标准达(预计6小时内送达)', price: '￥50' },
|
{ id: 2, name: '急速达(预计4小时内送达)', price: '￥70' }
|
],
|
storeList: [
|
{ id: 1, name: '中铁快运南站旗舰店', address: '合肥南站负一层100号', time: '周一至周日 7:00~23:00', distance: '239m' },
|
{ id: 2, name: '中铁快运合肥火车站', address: '合肥火车站一层12号', time: '周一至周日 7:00~23:00', distance: '12.8km' },
|
{ id: 3, name: '合肥火车站北广场', address: '合肥火车站一层12号', time: '周一至周日 7:00~23:00', distance: '13.1km' },
|
{ id: 4, name: '小铁无忧存', address: '合肥火车站一层12号', time: '周一至周日 7:00~23:00', distance: '16.3km' },
|
{ id: 5, name: '中铁快运合肥火车站', address: '合肥火车站一层12号', time: '周一至周日 7:00~23:00', distance: '20.8km' }
|
],
|
goodsOptions: [
|
{ id: 1, name: '文件' },
|
{ id: 2, name: '衣服' },
|
{ id: 3, name: '滑雪板' },
|
{ id: 4, name: '发票' },
|
{ id: 5, name: '手机' },
|
{ id: 6, name: '电脑' },
|
{ id: 7, name: '鞋子' },
|
{ id: 8, name: '护肤品' },
|
{ id: 9, name: '白酒' },
|
{ id: 10, name: '鞋子' },
|
{ id: 11, name: '护肤品' },
|
{ id: 12, name: '白酒' },
|
{ id: 13, name: '鞋子' },
|
{ id: 14, name: '护肤品' },
|
{ id: 15, name: '白酒' }
|
],
|
amountDetails: [
|
{ label: '大件行李箱', count: 1, value: '￥35' },
|
{ label: '中件行李箱', count: 1, value: '￥35' },
|
{ label: '寄存天数', count: '', value: '2天' },
|
{ label: '行李保价', count: '', value: '￥10' }
|
],
|
uploadedImages: [
|
{ url: '/static/icon/nav_home_sel@2x.png' },
|
{ url: '/static/icon/nav_xingcheng_sel@2x.png' }
|
]
|
}
|
},
|
computed: {
|
selectedStore() {
|
return this.storeList.find(item => item.id === this.selectedStoreId) || null
|
},
|
servicePointPlaceholder() {
|
return this.activeMode === 'city' ? '选择寄送服务点' : '选择寄存服务点'
|
},
|
filteredStores() {
|
const keyword = (this.storeKeyword || '').trim()
|
if (!keyword) {
|
return this.storeList
|
}
|
return this.storeList.filter(item => item.name.includes(keyword) || item.address.includes(keyword))
|
},
|
selectedGoodsText() {
|
if (!this.selectedGoodsIds.length) {
|
return '必选，请选择'
|
}
|
const labels = this.goodsOptions
|
.filter(item => this.selectedGoodsIds.includes(item.id))
|
.map(item => item.name)
|
return labels.join('、')
|
},
|
insuranceFeeText() {
|
if (!this.form.insurance) {
|
return ''
|
}
|
return '+10'
|
},
|
totalPriceText() {
|
return '￥150.00'
|
}
|
},
|
methods: {
|
switchMode(mode) {
|
this.activeMode = mode
|
},
|
openReceiveAddress() {
|
uni.showToast({
|
title: '取件地址待接入',
|
icon: 'none'
|
})
|
},
|
openAmountPopup() {
|
this.showAmountPopup = true
|
},
|
openStorePopup() {
|
this.tempSelectedStoreId = this.selectedStoreId
|
this.showStorePopup = true
|
},
|
confirmStore() {
|
this.selectedStoreId = this.tempSelectedStoreId
|
this.showStorePopup = false
|
},
|
openGoodsPopup() {
|
this.tempSelectedGoodsIds = [...this.selectedGoodsIds]
|
this.showGoodsPopup = true
|
},
|
toggleGoods(id) {
|
if (this.tempSelectedGoodsIds.includes(id)) {
|
this.tempSelectedGoodsIds = this.tempSelectedGoodsIds.filter(item => item !== id)
|
return
|
}
|
this.tempSelectedGoodsIds = [...this.tempSelectedGoodsIds, id]
|
},
|
confirmGoods() {
|
this.selectedGoodsIds = [...this.tempSelectedGoodsIds]
|
this.showGoodsPopup = false
|
},
|
selectLuggage(id) {
|
this.selectedLuggageId = id
|
},
|
increaseCount(id) {
|
const current = this.luggageCountMap[id] || 0
|
this.$set(this.luggageCountMap, id, current + 1)
|
},
|
decreaseCount(id) {
|
const current = this.luggageCountMap[id] || 0
|
if (current <= 0) {
|
return
|
}
|
this.$set(this.luggageCountMap, id, current - 1)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.luggage-page {
|
position: relative;
|
min-height: 100vh;
|
background: #f5f6f8;
|
}
|
|
.top-gradient-bg {
|
position: absolute;
|
left: 0;
|
top: 88rpx;
|
width: 100%;
|
height: 480rpx;
|
background: linear-gradient(180deg, #15b9f7 0%, #f7f7f7 100%);
|
z-index: 0;
|
}
|
|
.mode-tabs {
|
height: 88rpx;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
z-index: 1;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.mode-tab {
|
position: relative;
|
width: 50%;
|
text-align: center;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #9097a3;
|
}
|
|
.mode-tab.active {
|
color: #222222;
|
}
|
|
.mode-line {
|
position: absolute;
|
left: 50%;
|
bottom: -28rpx;
|
width: 40rpx;
|
height: 6rpx;
|
border-radius: 6rpx;
|
background: #18b5ff;
|
transform: translateX(-50%);
|
}
|
|
.page-scroll {
|
position: relative;
|
z-index: 1;
|
height: calc(100vh - 88rpx - 186rpx - env(safe-area-inset-bottom));
|
}
|
|
.page-content {
|
padding: 22rpx 30rpx;
|
box-sizing: border-box;
|
}
|
|
.store-popup-wrap {
|
background: #ffffff;
|
border-radius: 24rpx 24rpx 0 0;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
box-sizing: border-box;
|
}
|
|
.store-popup-head {
|
position: relative;
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.store-popup-title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
|
.store-popup-close {
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 56rpx;
|
height: 56rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.store-search-bar {
|
height: 74rpx;
|
padding: 0 20rpx;
|
background: #f6f8fc;
|
border-radius: 14rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.store-search-icon {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 16rpx;
|
}
|
|
.store-search-input {
|
flex: 1;
|
height: 74rpx;
|
font-size: 26rpx;
|
color: #333333;
|
background: transparent;
|
}
|
|
.store-search-placeholder {
|
font-size: 26rpx;
|
color: #c1c6d0;
|
}
|
|
.store-list-scroll {
|
max-height: 70vh;
|
margin-top: 30rpx;
|
}
|
|
.store-option {
|
position: relative;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 20rpx;
|
border-radius: 16rpx;
|
background: #F6F9FF;
|
border: 2rpx solid transparent;
|
box-sizing: border-box;
|
}
|
|
.store-option.active {
|
background: #eef9ff;
|
border-color: #10B2FA;
|
}
|
|
.store-option-main {
|
display: flex;
|
align-items: center;
|
}
|
|
.store-thumb {
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
background: #e8edf5;
|
margin-right: 30rpx;
|
flex-shrink: 0;
|
overflow: hidden;
|
}
|
|
.store-option-copy {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.store-option-head {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 12rpx;
|
}
|
|
.store-option-name {
|
flex: 1;
|
font-size: 34rpx;
|
font-weight: 600;
|
line-height: 1.35;
|
color: #222222;
|
}
|
|
.store-option-distance {
|
font-size: 26rpx;
|
color: #9ea4af;
|
flex-shrink: 0;
|
}
|
|
.store-option-address-row {
|
margin-top: 8rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.store-option-address-icon {
|
width: 24rpx;
|
height: 24rpx;
|
margin-right: 4rpx;
|
}
|
|
.store-option-address {
|
font-size: 26rpx;
|
color: #9ea4af;
|
}
|
|
.store-option-time {
|
display: block;
|
margin-top: 8rpx;
|
font-size: 26rpx;
|
color: #9ea4af;
|
}
|
|
.store-check {
|
position: absolute;
|
right: 18rpx;
|
bottom: 18rpx;
|
width: 40rpx;
|
height: 40rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 100%;
|
}
|
}
|
|
.store-confirm-btn {
|
height: 74rpx;
|
margin-top: 20rpx;
|
border-radius: 37rpx;
|
background: linear-gradient(90deg, #1db6ff 0%, #16a9fa 100%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
|
.cell-card,
|
.section-card {
|
background: #ffffff;
|
border-radius: 16rpx;
|
}
|
|
.service-point-card {
|
padding: 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
border-radius: 16rpx;
|
}
|
|
.cell-left {
|
display: flex;
|
align-items: flex-start;
|
min-width: 0;
|
}
|
|
.store-cell-copy {
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.store-cell-copy-addr {
|
display: flex;
|
align-items: baseline;
|
image {
|
width: 24rpx;
|
height: 24rpx;
|
margin-right: 4rpx;
|
}
|
}
|
|
.with-icon .cell-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 16rpx;
|
}
|
|
.cell-title {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
line-height: 1.3;
|
}
|
|
.store-cell-subtitle {
|
margin-top: 8rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.address-card {
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
margin-top: 0 !important;
|
}
|
|
.address-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 42rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
}
|
|
.address-left {
|
display: flex;
|
align-items: flex-start;
|
min-width: 0;
|
}
|
|
.address-badge {
|
width: 38rpx;
|
height: 38rpx;
|
border-radius: 19rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 22rpx;
|
font-weight: 600;
|
color: #ffffff;
|
margin-right: 18rpx;
|
flex-shrink: 0;
|
}
|
|
.address-badge.send {
|
background: #2ab6ff;
|
}
|
|
.address-badge.receive {
|
background: #ff9528;
|
}
|
|
.address-copy {
|
min-width: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.address-title {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.address-desc {
|
margin-top: 10rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.section-card {
|
margin-top: 16rpx;
|
overflow: hidden;
|
}
|
|
.info-card,
|
.time-card,
|
.simple-card {
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
}
|
|
.section-head {
|
display: flex;
|
align-items: center;
|
padding: 24rpx 0 12rpx;
|
}
|
|
.section-head.between {
|
justify-content: space-between;
|
}
|
|
.arrow-head {
|
align-items: center;
|
}
|
|
.section-title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
|
.section-desc,
|
.section-required {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
|
.price-note {
|
display: flex;
|
align-items: center;
|
font-size: 22rpx;
|
color: #ff8a32;
|
}
|
|
.price-note-icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 10rpx;
|
}
|
|
.required-wrap {
|
display: flex;
|
align-items: center;
|
gap: 8rpx;
|
}
|
|
.form-row {
|
height: 104rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
}
|
|
.form-row.no-border {
|
border-bottom: none;
|
}
|
|
.form-row.dashed-row {
|
border-bottom: 1rpx dashed #d8d8d8;
|
}
|
|
.form-label {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.form-input {
|
flex: 1;
|
height: 88rpx;
|
text-align: right;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
background: transparent;
|
}
|
|
.filled-input {
|
color: #333333;
|
}
|
|
.input-placeholder,
|
.placeholder-text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #B2B2B2;
|
}
|
|
.picker-value-text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
|
.row-picker,
|
.end-wrap {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
gap: 8rpx;
|
flex: 1;
|
}
|
|
.luggage-card {
|
padding: 0 16rpx 16rpx;
|
}
|
|
.luggage-item {
|
display: flex;
|
align-items: baseline;
|
justify-content: space-between;
|
padding: 24rpx;
|
box-sizing: border-box;
|
margin-top: 20rpx;
|
border-radius: 16rpx;
|
background: #fafafa;
|
border: 2rpx solid transparent;
|
}
|
|
.luggage-item.active {
|
background: #f5fbff;
|
border-color: #28aef8;
|
}
|
|
.luggage-info {
|
display: flex;
|
align-items: center;
|
min-width: 0;
|
}
|
|
.luggage-image {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 8rpx;
|
margin-right: 18rpx;
|
background: #f0f1f4;
|
overflow: hidden;
|
margin-right: 24rpx;
|
}
|
|
.luggage-copy {
|
height: 100rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.luggage-name {
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.luggage-size {
|
margin-top: 8rpx;
|
font-size: 22rpx;
|
color: #b7bcc5;
|
}
|
|
.luggage-stepper {
|
display: flex;
|
align-items: center;
|
gap: 18rpx;
|
}
|
|
.step-btn {
|
width: 36rpx;
|
height: 36rpx;
|
border-radius: 18rpx;
|
background: #eef1f5;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.step-btn.active {
|
background: #27aef8;
|
}
|
|
.step-count {
|
font-size: 28rpx;
|
color: #555555;
|
}
|
|
.goods-card {
|
padding: 0 24rpx 24rpx;
|
}
|
|
.upload-box {
|
width: 144rpx;
|
height: 144rpx;
|
}
|
|
.goods-upload-row {
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
margin-top: 8rpx;
|
}
|
|
.uploaded-box {
|
width: 144rpx;
|
height: 144rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
position: relative;
|
background: #f2f4f8;
|
}
|
|
.uploaded-image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.uploaded-delete {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 28rpx;
|
line-height: 28rpx;
|
text-align: center;
|
font-size: 18rpx;
|
color: #ffffff;
|
background: rgba(0, 0, 0, 0.48);
|
}
|
|
.service-time-card {
|
padding: 0 24rpx 24rpx;
|
box-sizing: border-box;
|
}
|
|
.service-time-item {
|
height: 88rpx;
|
margin-top: 20rpx;
|
padding: 0 30rpx;
|
border-radius: 14rpx;
|
background: #f6f6f6;
|
border: 2rpx solid transparent;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.service-time-item.active {
|
background: #eef9ff;
|
border-color: #10B2FA;
|
}
|
|
.service-time-name {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #222222;
|
}
|
}
|
}
|
|
.service-time-price {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #FF0000;
|
}
|
|
.upload-icon {
|
width: 100%;
|
height: 100%;
|
}
|
|
.upload-text {
|
font-size: 22rpx;
|
color: #b0b5be;
|
}
|
|
.goods-required-text {
|
max-width: 300rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.goods-popup-wrap {
|
background: #ffffff;
|
border-radius: 24rpx 24rpx 0 0;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
}
|
|
.goods-popup-head {
|
position: relative;
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.goods-popup-title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
|
.goods-popup-close {
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 56rpx;
|
height: 56rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.goods-popup-top {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.goods-popup-title-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.goods-main-title {
|
font-weight: bold;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.goods-main-required {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FF0000;
|
}
|
|
.goods-danger-tip {
|
display: flex;
|
align-items: center;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #FA8010;
|
}
|
|
.goods-danger-icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 10rpx;
|
}
|
|
.goods-popup-desc {
|
display: block;
|
margin-top: 18rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
|
.goods-tag-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 18rpx 16rpx;
|
margin-top: 28rpx;
|
}
|
|
.goods-tag {
|
height: 72rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
border: 2rpx solid transparent;
|
box-sizing: border-box;
|
}
|
|
.goods-tag.active {
|
background: #ecf8ff;
|
border-color: #10B2FA;
|
color: #10B2FA;
|
}
|
|
.goods-save-btn {
|
height: 88rpx;
|
background: #10B2FA;
|
border-radius: 44rpx;
|
margin: 46rpx 0 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
|
.amount-popup-wrap {
|
background: #ffffff;
|
border-radius: 24rpx 24rpx 0 0;
|
overflow: hidden;
|
}
|
|
.amount-popup-head {
|
position: relative;
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.amount-popup-title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
|
.amount-popup-close {
|
position: absolute;
|
right: 24rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 56rpx;
|
height: 56rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.amount-popup-content {
|
padding: 8rpx 0 12rpx;
|
}
|
|
.amount-row {
|
height: 80rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.amount-row-left {
|
display: flex;
|
align-items: center;
|
}
|
|
.amount-row-label {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.amount-row-count {
|
margin-left: 18rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.amount-row-value {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.popup-agreement-bar {
|
margin-top: 12rpx;
|
}
|
|
.popup-action-row {
|
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
}
|
|
.money-input {
|
max-width: 260rpx;
|
}
|
|
.insurance-wrap {
|
gap: 10rpx;
|
}
|
|
.unit-text {
|
font-size: 28rpx;
|
color: #666666;
|
}
|
|
.insurance-tip-row {
|
height: 48rpx;
|
padding-bottom: 14rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
font-size: 22rpx;
|
}
|
|
.insurance-tip-label {
|
color: #999999;
|
}
|
|
.insurance-tip-value {
|
margin-left: 8rpx;
|
color: #ff4d4f;
|
}
|
|
.agreement-bar {
|
height: 80rpx;
|
padding: 0 16rpx;
|
background: #d9f3ff;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
font-size: 22rpx;
|
box-sizing: border-box;
|
}
|
|
.agreement-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 16rpx;
|
}
|
|
.agreement-text {
|
color: #7c8e97;
|
}
|
|
.agreement-link {
|
color: #10b2fa;
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 0 0 env(safe-area-inset-bottom);
|
background: #ffffff;
|
box-sizing: border-box;
|
box-shadow: 0 -6rpx 18rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.bottom-action-row {
|
height: 112rpx;
|
padding: 16rpx 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.total-wrap {
|
display: flex;
|
align-items: baseline;
|
gap: 8rpx;
|
}
|
|
.total-label,
|
.detail-text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
|
.detail-click {
|
padding: 6rpx 0;
|
}
|
|
.total-price {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FF0000;
|
}
|
|
.submit-btn {
|
width: 240rpx;
|
height: 88rpx;
|
border-radius: 44rpx;
|
background: #d9d9d9;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
|
.active-submit-btn {
|
background: #10B2FA;
|
}
|
</style>
|
