|
|
@@ -2,24 +2,27 @@
|
|
|
<view class="order-detail-page">
|
|
|
<!-- 顶部状态栏 -->
|
|
|
<view class="status-header">
|
|
|
- <view class="status-text">{{ statusText }}</view>
|
|
|
- <view class="status-desc" v-if="orderInfo.status === 2">
|
|
|
- 订单编号：{{ orderInfo.orderNo }}
|
|
|
+ <view class="status-text" v-if="orderInfo.cancelStatus == 1">已取消</view>
|
|
|
+ <view class="status-text" v-else-if="orderInfo.refundStatus == 3">交易关闭</view>
|
|
|
+ <view class="status-text" v-else-if="orderInfo.refundStatus == 2">退款中</view>
|
|
|
+ <view class="status-text" v-else>{{ statusText }}</view>
|
|
|
+ <view class="status-desc" v-if="orderInfo.status == '2'">
|
|
|
+ 订单编号：{{ orderInfo.orderId }}
|
|
|
<u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
</view>
|
|
|
- <view class="status-desc" v-else-if="orderInfo.status === 3">
|
|
|
- 订单编号：{{ orderInfo.orderNo }}
|
|
|
+ <view class="status-desc" v-else-if="orderInfo.status == '3'">
|
|
|
+ 订单编号：{{ orderInfo.orderId }}
|
|
|
<u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
</view>
|
|
|
- <view class="status-desc-block" v-else-if="orderInfo.status === 8">
|
|
|
+ <view class="status-desc-block" v-else-if="orderInfo.status == '8'">
|
|
|
<view class="status-tip">还剩9天22时18分自动确认收货</view>
|
|
|
<view class="status-desc-row">
|
|
|
- 订单编号：{{ orderInfo.orderNo }}
|
|
|
+ 订单编号：{{ orderInfo.orderId }}
|
|
|
<u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="status-desc" v-else>
|
|
|
- 订单编号：{{ orderInfo.orderNo }}
|
|
|
+ 订单编号：{{ orderInfo.orderId }}
|
|
|
<u-icon name="copy" size="28" @click="copyOrderNo" style="margin-left: 10rpx;"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -31,45 +34,45 @@
|
|
|
</view>
|
|
|
<view class="address-content">
|
|
|
<view class="user-info">
|
|
|
- <text class="name">{{ orderInfo.address && orderInfo.address.name }}</text>
|
|
|
- <text class="mobile">{{ orderInfo.address && orderInfo.address.mobile }}</text>
|
|
|
+ <text class="name">{{ orderInfo.receiverName }}</text>
|
|
|
+ <text class="mobile">{{ orderInfo.receiverMobile }}</text>
|
|
|
</view>
|
|
|
- <view class="address-detail">{{ orderInfo.address && orderInfo.address.detail }}</view>
|
|
|
+ <view class="address-detail">{{ orderInfo.receiverAddress }}</view>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
<!-- 物流信息 (已发货/已完成/退款) -->
|
|
|
- <view class="info-card logistics-card" v-if="[8, 12, 10].includes(orderInfo.status) && orderInfo.logistics">
|
|
|
+ <view class="info-card logistics-card"
|
|
|
+ v-if="['8', '12', '10'].includes(String(orderInfo.status)) && orderInfo.waybillCode">
|
|
|
<view class="icon-box">
|
|
|
<u-icon name="car-fill" color="#38C148" size="40"></u-icon>
|
|
|
</view>
|
|
|
<view class="logistics-content" @click="viewLogistics">
|
|
|
- <view class="company-name">{{ orderInfo.logistics.company }} ({{ orderInfo.logistics.no }})</view>
|
|
|
- <view class="latest-trace">{{ orderInfo.logistics.trace }}</view>
|
|
|
- <view class="update-time">{{ orderInfo.logistics.updateTime }}</view>
|
|
|
+ <view class="company-name">物流单号: {{ orderInfo.waybillCode }}</view>
|
|
|
+ <view class="latest-trace">点击查看物流详情</view>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
<!-- 商品列表 -->
|
|
|
<view class="info-card goods-card">
|
|
|
- <view class="goods-item" v-for="(goods, index) in orderInfo.goodsList" :key="index">
|
|
|
+ <view class="goods-item" v-for="(goods, index) in orderInfo.detailVoList" :key="index">
|
|
|
<image :src="goods.cover" mode="aspectFill" class="goods-cover"></image>
|
|
|
<view class="goods-info">
|
|
|
- <view class="goods-title">{{ goods.title }}</view>
|
|
|
- <view class="goods-quality">品相：{{ goods.quality }}</view>
|
|
|
+ <view class="goods-title">{{ goods.bookName }}</view>
|
|
|
+ <view class="goods-quality" v-if="goods.isbn">ISBN：{{ goods.isbn }}</view>
|
|
|
<view class="price-box">
|
|
|
<text class="price">¥{{ goods.price }}</text>
|
|
|
<text class="num">x{{ goods.num }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 商品级按钮，如退款 -->
|
|
|
- <view class="goods-action" v-if="[3, 8].includes(orderInfo.status)">
|
|
|
+ <view class="goods-action" v-if="['3', '8'].includes(String(orderInfo.status))">
|
|
|
<u-button size="mini" shape="circle" plain
|
|
|
custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx;">退款</u-button>
|
|
|
</view>
|
|
|
- <view class="goods-action" v-if="[10].includes(orderInfo.status)">
|
|
|
+ <view class="goods-action" v-if="['10'].includes(String(orderInfo.status))">
|
|
|
<u-button size="mini" shape="circle" plain disabled
|
|
|
custom-style="margin-left: 20rpx; height: 50rpx; line-height: 50rpx; background: #f5f5f5; color: #999; border: none;">退款成功</u-button>
|
|
|
</view>
|
|
|
@@ -79,19 +82,19 @@
|
|
|
<view class="price-detail">
|
|
|
<view class="row">
|
|
|
<text>邮费</text>
|
|
|
- <text>¥ {{ orderInfo.postage || '0.00' }}</text>
|
|
|
+ <text>¥ {{ orderInfo.expressMoney || '0.00' }}</text>
|
|
|
</view>
|
|
|
<view class="row">
|
|
|
<text>商品金额</text>
|
|
|
- <text class="goods-total">¥{{ orderInfo.goodsTotalPrice }}</text>
|
|
|
+ <text class="goods-total">¥{{ orderInfo.totalMoney }}</text>
|
|
|
</view>
|
|
|
<view class="row">
|
|
|
<text>优惠金额</text>
|
|
|
- <text class="discount">-¥{{ orderInfo.discountPrice || '0.00' }}</text>
|
|
|
+ <text class="discount">-¥{{ orderInfo.discountMoney || '0.00' }}</text>
|
|
|
</view>
|
|
|
<view class="real-pay-row">
|
|
|
- <text>实付款 (微信支付)</text>
|
|
|
- <text class="real-price">¥ {{ orderInfo.realPayPrice }}</text>
|
|
|
+ <text>实付款 ({{ orderInfo.payType == 1 ? '余额支付' : '微信支付' }})</text>
|
|
|
+ <text class="real-price">¥ {{ orderInfo.payMoney }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -114,16 +117,12 @@
|
|
|
<text class="label">完成时间</text>
|
|
|
<text class="value">{{ orderInfo.finishTime }}</text>
|
|
|
</view>
|
|
|
- <view class="row" v-if="orderInfo.closeTime">
|
|
|
- <text class="label">关闭时间</text>
|
|
|
- <text class="value">{{ orderInfo.closeTime }}</text>
|
|
|
- </view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部操作栏 -->
|
|
|
<view class="bottom-bar">
|
|
|
<!-- 待付款 -->
|
|
|
- <template v-if="orderInfo.status === 2">
|
|
|
+ <template v-if="orderInfo.status == '2'">
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@click="handleAction('addToCart')">加入购物车</u-button>
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@@ -134,7 +133,7 @@
|
|
|
@click="handleAction('pay')">继续付款</u-button>
|
|
|
</template>
|
|
|
<!-- 待发货 -->
|
|
|
- <template v-else-if="orderInfo.status === 3">
|
|
|
+ <template v-else-if="orderInfo.status == '3'">
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@click="handleAction('addToCart')">加入购物</u-button>
|
|
|
<u-button size="mini" shape="circle" type="warning" :custom-style="btnStyle"
|
|
|
@@ -143,7 +142,7 @@
|
|
|
@click="handleAction('remind')">催发货</u-button>
|
|
|
</template>
|
|
|
<!-- 已发货 -->
|
|
|
- <template v-else-if="orderInfo.status === 8">
|
|
|
+ <template v-else-if="orderInfo.status == '8'">
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@click="handleAction('addToCart')">加入购物</u-button>
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@@ -154,7 +153,7 @@
|
|
|
@click="handleAction('confirm')">确认收货</u-button>
|
|
|
</template>
|
|
|
<!-- 交易关闭/已退款 -->
|
|
|
- <template v-else-if="orderInfo.status === -1 || orderInfo.status === 10">
|
|
|
+ <template v-else-if="orderInfo.status == '-1' || orderInfo.status == '10'">
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@click="handleAction('addToCart')">加入购物</u-button>
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@@ -163,7 +162,7 @@
|
|
|
@click="handleAction('moneyWhere')">钱款去向</u-button>
|
|
|
</template>
|
|
|
<!-- 交易完成 -->
|
|
|
- <template v-else-if="orderInfo.status === 12">
|
|
|
+ <template v-else-if="orderInfo.status == '12'">
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@click="handleAction('addToCart')">加入购物</u-button>
|
|
|
<u-button size="mini" shape="circle" plain :custom-style="btnStyle"
|
|
|
@@ -177,353 +176,326 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderInfo: {
|
|
|
- status: 2,
|
|
|
- orderNo: '',
|
|
|
- goodsList: [],
|
|
|
- address: {}
|
|
|
- },
|
|
|
- btnStyle: {
|
|
|
- marginLeft: '20rpx',
|
|
|
- width: '160rpx',
|
|
|
- height: '60rpx',
|
|
|
- lineHeight: '60rpx',
|
|
|
- padding: '0'
|
|
|
- },
|
|
|
- themeBtnStyle: {
|
|
|
- marginLeft: '20rpx',
|
|
|
- width: '160rpx',
|
|
|
- height: '60rpx',
|
|
|
- lineHeight: '60rpx',
|
|
|
- padding: '0',
|
|
|
- backgroundColor: '#38C148',
|
|
|
- color: '#fff',
|
|
|
- border: 'none'
|
|
|
- },
|
|
|
- themeLightBtnStyle: {
|
|
|
- marginLeft: '20rpx',
|
|
|
- width: '160rpx',
|
|
|
- height: '60rpx',
|
|
|
- lineHeight: '60rpx',
|
|
|
- padding: '0',
|
|
|
- backgroundColor: '#5bc0de', // Light blue/green for price match? Or keep simple
|
|
|
- color: '#fff',
|
|
|
- border: 'none'
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- statusText() {
|
|
|
- const map = {
|
|
|
- 2: '等待买家付款',
|
|
|
- 3: '等待卖家发货',
|
|
|
- 8: '已发货',
|
|
|
- 12: '交易完成',
|
|
|
- 10: '交易关闭', // 退款
|
|
|
- '-1': '交易关闭'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderInfo: {
|
|
|
+ status: '2',
|
|
|
+ orderId: '',
|
|
|
+ detailVoList: [],
|
|
|
+ receiverName: '',
|
|
|
+ receiverMobile: '',
|
|
|
+ receiverAddress: '',
|
|
|
+ expressMoney: 0,
|
|
|
+ totalMoney: 0,
|
|
|
+ discountMoney: 0,
|
|
|
+ payMoney: 0,
|
|
|
+ createTime: ''
|
|
|
+ },
|
|
|
+ btnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0'
|
|
|
+ },
|
|
|
+ themeBtnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0',
|
|
|
+ backgroundColor: '#38C148',
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none'
|
|
|
+ },
|
|
|
+ themeLightBtnStyle: {
|
|
|
+ marginLeft: '20rpx',
|
|
|
+ width: '160rpx',
|
|
|
+ height: '60rpx',
|
|
|
+ lineHeight: '60rpx',
|
|
|
+ padding: '0',
|
|
|
+ backgroundColor: '#5bc0de',
|
|
|
+ color: '#fff',
|
|
|
+ border: 'none'
|
|
|
+ }
|
|
|
};
|
|
|
- return map[this.orderInfo.status] || '未知状态';
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- if (options.orderNo) {
|
|
|
- this.loadOrderDetail(options.orderNo);
|
|
|
- } else {
|
|
|
- // For testing/preview if no orderNo passed, use a mock default
|
|
|
- this.loadOrderDetail('SN_MOCK_DEFAULT');
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- loadOrderDetail(orderNo) {
|
|
|
- // Mock data loading
|
|
|
- this.orderInfo = this.getMockData(orderNo);
|
|
|
},
|
|
|
- copyOrderNo() {
|
|
|
- uni.setClipboardData({
|
|
|
- data: this.orderInfo.orderNo,
|
|
|
- success: () => {
|
|
|
- uni.showToast({ title: '复制成功', icon: 'none' });
|
|
|
- }
|
|
|
- });
|
|
|
+ computed: {
|
|
|
+ statusText() {
|
|
|
+ const map = {
|
|
|
+ '1': '等待买家付款',
|
|
|
+ '2': '等待卖家发货',
|
|
|
+ '3': '已发货',
|
|
|
+ '4': '交易完成',
|
|
|
+ };
|
|
|
+ return map[String(this.orderInfo.status)] || '未知状态';
|
|
|
+ }
|
|
|
},
|
|
|
- viewLogistics() {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages-car/pages/logistics-detail?orderNo=${this.orderInfo.orderNo}`
|
|
|
- });
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.orderId) {
|
|
|
+ this.loadOrderDetail(options.orderId);
|
|
|
+ }
|
|
|
},
|
|
|
- handleAction(type) {
|
|
|
- if (type === 'complaint') {
|
|
|
- uni.setStorageSync('tempComplaintOrder', this.orderInfo);
|
|
|
+ methods: {
|
|
|
+ loadOrderDetail(orderId) {
|
|
|
+ uni.$u.http.get('/token/shop/order/getOrderDetail', {
|
|
|
+ orderId: orderId
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.orderInfo = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ copyOrderNo() {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: String(this.orderInfo.orderId),
|
|
|
+ success: () => {
|
|
|
+ uni.showToast({ title: '复制成功', icon: 'none' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ viewLogistics() {
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages-car/pages/complaint?orderId=${this.orderInfo.orderId || this.orderInfo.orderNo}` // Fallback to orderNo if orderId missing in mock
|
|
|
+ url: `/pages-car/pages/logistics-detail?orderId=${this.orderInfo.orderId}`
|
|
|
});
|
|
|
- return;
|
|
|
+ },
|
|
|
+ handleAction(type) {
|
|
|
+ if (type === 'complaint') {
|
|
|
+ uni.setStorageSync('tempComplaintOrder', this.orderInfo);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages-car/pages/complaint?orderId=${this.orderInfo.orderId}`
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showToast({ title: `点击了${type}`, icon: 'none' });
|
|
|
}
|
|
|
- uni.showToast({ title: `点击了${type}`, icon: 'none' });
|
|
|
- // Implement specific logic here similar to my-order.vue
|
|
|
- },
|
|
|
- getMockData(orderNo) {
|
|
|
- // Basic mock structure
|
|
|
- return {
|
|
|
- status: 2, // Default to pending payment for dev
|
|
|
- orderNo: orderNo || '32656+56+5655',
|
|
|
- createTime: '2021-07-23 14:50:05',
|
|
|
- goodsTotalPrice: '6565',
|
|
|
- postage: '0.00',
|
|
|
- discountPrice: '55',
|
|
|
- realPayPrice: '918.00',
|
|
|
- address: {
|
|
|
- name: '张三',
|
|
|
- mobile: '155****5855',
|
|
|
- detail: '四川省成都市高新区XXX街XXX路XXX号XXX小区XXX栋XXXX单元XXX楼XXX'
|
|
|
- },
|
|
|
- goodsList: [
|
|
|
- {
|
|
|
- title: '马克思主义基本原理',
|
|
|
- quality: '中等',
|
|
|
- price: '9.60',
|
|
|
- num: 2,
|
|
|
- cover: 'https://uviewui.com/album/1.jpg'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '马克思主义基本原理',
|
|
|
- quality: '中等',
|
|
|
- price: '9.60',
|
|
|
- num: 2,
|
|
|
- cover: 'https://uviewui.com/album/1.jpg'
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.order-detail-page {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #F5F5F5;
|
|
|
- padding-bottom: 20rpx;
|
|
|
-
|
|
|
- .status-header {
|
|
|
- background-color: #d1f2d8; // Light green bg
|
|
|
- padding: 40rpx 30rpx;
|
|
|
- color: #333;
|
|
|
-
|
|
|
- .status-text {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .status-desc {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .status-desc-block {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- .status-tip {
|
|
|
+ .order-detail-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .status-header {
|
|
|
+ background-color: #d1f2d8; // Light green bg
|
|
|
+ padding: 40rpx 30rpx;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
- .status-desc-row {
|
|
|
+ .status-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info-card {
|
|
|
- background-color: #fff;
|
|
|
- margin: 20rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- &.address-card {
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon-box {
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
|
|
|
- .address-content {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20rpx;
|
|
|
+ .status-desc-block {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
|
|
|
- .user-info {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
+ .status-tip {
|
|
|
margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .mobile {
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .address-detail {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 1.4;
|
|
|
+ .status-desc-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &.logistics-card {
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon-box {
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
+ .info-card {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ display: flex;
|
|
|
|
|
|
- .logistics-content {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20rpx;
|
|
|
+ &.address-card {
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .company-name {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #38C148;
|
|
|
- margin-bottom: 6rpx;
|
|
|
+ .icon-box {
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
- .latest-trace {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ .address-content {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .update-time {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
+ .user-info {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .mobile {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- &.goods-card {
|
|
|
- display: block;
|
|
|
|
|
|
- .goods-item {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 30rpx;
|
|
|
+ &.logistics-card {
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .goods-cover {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
+ .icon-box {
|
|
|
margin-right: 20rpx;
|
|
|
- background-color: #eee;
|
|
|
}
|
|
|
|
|
|
- .goods-info {
|
|
|
+ .logistics-content {
|
|
|
flex: 1;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .goods-title {
|
|
|
+ .company-name {
|
|
|
font-size: 28rpx;
|
|
|
+ color: #38C148;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .latest-trace {
|
|
|
+ font-size: 26rpx;
|
|
|
color: #333;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .goods-quality {
|
|
|
+ .update-time {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .price-box {
|
|
|
- margin-top: 10rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ &.goods-card {
|
|
|
+ display: block;
|
|
|
|
|
|
- .price {
|
|
|
- font-weight: 500;
|
|
|
+ .goods-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .goods-cover {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .goods-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
- .num {
|
|
|
+ .goods-quality {
|
|
|
+ font-size: 24rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .goods-action {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .goods-action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .price-detail {
|
|
|
- border-top: 1rpx solid #eee;
|
|
|
- padding-top: 20rpx;
|
|
|
+ .price-detail {
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ padding-top: 20rpx;
|
|
|
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
|
- .goods-total {
|
|
|
- color: #38C148;
|
|
|
- }
|
|
|
+ .goods-total {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
|
|
|
- .discount {
|
|
|
- color: #38C148;
|
|
|
+ .discount {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .real-pay-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- margin-top: 20rpx;
|
|
|
+ .real-pay-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
|
- .real-price {
|
|
|
- color: #38C148;
|
|
|
+ .real-price {
|
|
|
+ color: #38C148;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &.time-card {
|
|
|
- display: block;
|
|
|
+ &.time-card {
|
|
|
+ display: block;
|
|
|
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .bottom-bar {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ .bottom-bar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
