This commit is contained in:
2024-04-10 14:46:29 +08:00
parent c94ddeed1a
commit 222bae69d9
14 changed files with 304 additions and 213 deletions

View File

@@ -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 122255</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;