...
This commit is contained in:
@@ -1,104 +1,120 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='countdown c-flex-row'>
|
||||
<image :src='assetsUrl("ic_order.png")' />
|
||||
<view class='c-flex-column'>
|
||||
<text>
|
||||
待支付
|
||||
</text>
|
||||
<view class='c-flex-row'>
|
||||
<image :src='assetsUrl("ic_time.png")' />
|
||||
<text>支付剩余时间
|
||||
<text style='color: #F32B2B'>05:23</text>
|
||||
<scroll-view scroll-y>
|
||||
<view class='content'>
|
||||
<view class='countdown c-flex-row'>
|
||||
<image :src='assetsUrl("ic_order.png")' />
|
||||
<view class='c-flex-column'>
|
||||
<text>
|
||||
待支付
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='address-view c-flex-column'>
|
||||
<view class='user-info c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>黄先生</text>
|
||||
<text>155****6532</text>
|
||||
<view style='flex: 1' />
|
||||
<text style='color: #5B96FB'>复制</text>
|
||||
</view>
|
||||
|
||||
<view class='addr c-flex-row'>
|
||||
<image :src='assetsUrl("ic_location.png")' />
|
||||
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
|
||||
</view>
|
||||
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
|
||||
</view>
|
||||
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
|
||||
</view>
|
||||
<text style='color: #999999;margin-top: 30rpx'>
|
||||
2356235654
|
||||
</text>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
紫色,120cm x1
|
||||
<image :src='assetsUrl("ic_time.png")' />
|
||||
<text>支付剩余时间
|
||||
<text style='color: #F32B2B'>05:23</text>
|
||||
</text>
|
||||
<text>23.20</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='address-view c-flex-column'>
|
||||
<view class='user-info c-flex-row'>
|
||||
<text>默认</text>
|
||||
<text>黄先生</text>
|
||||
<text>155****6532</text>
|
||||
<view style='flex: 1' />
|
||||
<text style='color: #5B96FB'>复制</text>
|
||||
</view>
|
||||
|
||||
<view class='remark-view c-flex-row'>
|
||||
<text style='flex: 1'>备注</text>
|
||||
<text>无备注</text>
|
||||
<view class='addr c-flex-row'>
|
||||
<image :src='assetsUrl("ic_location.png")' />
|
||||
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
|
||||
</view>
|
||||
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='card-view'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>商品总价</text>
|
||||
<text class='card-view-value'>¥29.90</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>运费</text>
|
||||
<text class='card-view-value'>¥8</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>优惠券
|
||||
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
|
||||
</text>
|
||||
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-¥20
|
||||
</text>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<view style='flex: 1' />
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-value'>共1件商品 合计:
|
||||
<text style='font-size: 34rpx;color:#F32B2B'>¥29.90</text>
|
||||
</text>
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row' style='margin-bottom: 20rpx' v-for='(item,index) in orderBean?.order.orderGoods'
|
||||
:key='index'>
|
||||
<image class='goods-image' :src='item.stockStock.images' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>{{ item.goodsName }}</text>
|
||||
</view>
|
||||
<text style='color: #999999;margin-top: 30rpx'>
|
||||
{{ item.goodsCode }}
|
||||
</text>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
{{ item.stockStock.colorName }},{{ item.stockStock.sizeName }} x{{ item.goodsNum }}
|
||||
</text>
|
||||
<text>{{ item.consumePrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='divider' />
|
||||
|
||||
<view class='remark-view c-flex-row'>
|
||||
<text style='flex: 1'>备注</text>
|
||||
<text>{{ orderBean?.order?.remark || '无备注' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='order-no c-flex-column'>
|
||||
<text>订单编号:1524625555555
|
||||
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
|
||||
</text>
|
||||
<text>下单时间:2022-02-22 12:22:55</text>
|
||||
</view>
|
||||
<view class='card-view'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>商品总价</text>
|
||||
<text class='card-view-value'>¥{{ orderBean?.order?.totalPrice }}</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>运费</text>
|
||||
<text class='card-view-value'>¥8</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-title'>优惠券
|
||||
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
|
||||
</text>
|
||||
<text class='card-view-value' style='color: #F32B2B;margin: 0'>-¥{{orderBean?.order?.reducePrice}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
<view class='c-flex-row'>
|
||||
<view style='flex: 1' />
|
||||
<view class='c-flex-row'>
|
||||
<text class='card-view-value'>共{{ orderBean?.order?.itemNum }}件商品 合计:
|
||||
<text style='font-size: 34rpx;color:#F32B2B'>¥{{ orderBean?.order?.totalPrice }}</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bottom-action-view c-flex-row'>
|
||||
<text @click.stop='cancel'>取消订单</text>
|
||||
<text @click.stop='payment'>立即支付</text>
|
||||
<view class='order-no c-flex-column'>
|
||||
<text>订单编号:{{ orderBean?.order?.id }}
|
||||
<text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
|
||||
</text>
|
||||
<text>下单时间:{{ orderBean?.order?.createTime }}</text>
|
||||
</view>
|
||||
|
||||
<view class='bottom-action-view c-flex-row'>
|
||||
<text @click.stop='cancel'>取消订单</text>
|
||||
<text @click.stop='payment'>立即支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import { getOrderDetail } from '@/api/order';
|
||||
import { OrderBean } from '@/api/order/types';
|
||||
|
||||
const orderBean = ref<{
|
||||
order: OrderBean,
|
||||
stock: any[],
|
||||
paymentList: []
|
||||
}>();
|
||||
|
||||
onLoad(async (e: any) => {
|
||||
orderBean.value = await getOrderDetail(e.orderId);
|
||||
});
|
||||
|
||||
const cancel = () => {
|
||||
};
|
||||
@@ -148,7 +164,7 @@ const payment = () => {
|
||||
}
|
||||
|
||||
.address-view {
|
||||
padding-top: 38rpx;
|
||||
padding-top: 30rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.user-info {
|
||||
@@ -328,7 +344,7 @@ const payment = () => {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
border-radius: 34rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 17rpx 45rpx;
|
||||
border: 1rpx solid #707070;
|
||||
margin-right: 20rpx;
|
||||
@@ -336,7 +352,7 @@ const payment = () => {
|
||||
|
||||
text:nth-of-type(2) {
|
||||
padding: 17rpx 45rpx;
|
||||
border-radius: 43rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
|
Reference in New Issue
Block a user