...
This commit is contained in:
346
src/pages/mine/subs/order/detail.vue
Normal file
346
src/pages/mine/subs/order/detail.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<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>
|
||||
</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
|
||||
</text>
|
||||
<text>23.20</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='divider' />
|
||||
|
||||
<view class='remark-view c-flex-row'>
|
||||
<text style='flex: 1'>备注</text>
|
||||
<text>无备注</text>
|
||||
</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>
|
||||
</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='bottom-action-view c-flex-row'>
|
||||
<text @click.stop='cancel'>取消订单</text>
|
||||
<text @click.stop='payment'>立即支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const cancel = () => {
|
||||
};
|
||||
const payment = () => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
padding: 10rpx 30rpx 30rpx 30rpx;
|
||||
|
||||
image:nth-of-type(1) {
|
||||
width: 60rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
|
||||
view:not(.c-flex-row):nth-of-type(1) {
|
||||
margin-left: 23rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
view:nth-of-type(1) {
|
||||
margin-top: 5rpx;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-view {
|
||||
padding-top: 38rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.user-info {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #F32B2B;
|
||||
border-radius: 5rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(n+2) {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.addr {
|
||||
margin-top: 15rpx;
|
||||
margin-left: 20rpx;
|
||||
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 37rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dashed-line {
|
||||
width: 100%;
|
||||
height: 8rpx;
|
||||
margin-top: 37rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info-view {
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx 20rpx;
|
||||
|
||||
.goods-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-of-type(2):before {
|
||||
content: '￥';
|
||||
}
|
||||
|
||||
text:nth-of-type(3) {
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.remark-view {
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-view {
|
||||
margin-top: 20rpx;
|
||||
padding: 0 25rpx 0 23rpx;
|
||||
|
||||
view:not(.divider):nth-of-type(n+1) {
|
||||
margin: 20rpx 0;
|
||||
|
||||
.card-view-title {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-view-value {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-no {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 22rpx 23rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 200rpx;
|
||||
|
||||
text:nth-of-type(n+1) {
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-action-view {
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
justify-content: flex-end;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12rpx 30rpx 78rpx 30rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
border-radius: 34rpx;
|
||||
padding: 17rpx 45rpx;
|
||||
border: 1rpx solid #707070;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
padding: 17rpx 45rpx;
|
||||
border-radius: 43rpx;
|
||||
border: 1rpx solid #F32B2B;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #F32B2B;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user