确认订单
This commit is contained in:
@@ -1,11 +1,356 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
<view class='c-flex-row'>
|
||||
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 0}' @click.stop='tabIndex=0'>
|
||||
<image :src='assetsUrl("ic_order_dd.png")' />
|
||||
<text>到店</text>
|
||||
</view>
|
||||
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 1}' @click.stop='tabIndex=1'>
|
||||
<image :src='assetsUrl("ic_order_yj.png")' />
|
||||
<text>邮寄</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show='tabIndex==1' 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' />
|
||||
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
||||
</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>备注</text>
|
||||
<input placeholder='请填写订单备注' />
|
||||
</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>
|
||||
<view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥20
|
||||
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
||||
</view>
|
||||
</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='payment-way c-flex-row'>
|
||||
<text>支付方式</text>
|
||||
<view>微信支付
|
||||
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>合计</text>
|
||||
<text>￥29.90</text>
|
||||
<text>确认订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const tabIndex = ref(0);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.tab {
|
||||
height: 63rpx;
|
||||
background: #E8E8E8;
|
||||
border-radius: 10rpx 0 10rpx 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 17rpx;
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx 0 10rpx 0;
|
||||
}
|
||||
|
||||
.tab:nth-of-type(1) image {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
|
||||
.tab:nth-of-type(2) image {
|
||||
width: 38rpx;
|
||||
height: 29rpx;
|
||||
}
|
||||
|
||||
.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-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
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;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 200rpx;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-way {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 22rpx 23rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
view:nth-of-type(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
image {
|
||||
width: 8rpx;
|
||||
height: 16rpx;
|
||||
margin-left: 13rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
background: #FFFFFF;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12rpx 30rpx 78rpx 30rpx;
|
||||
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #F32B2B;
|
||||
margin-left: 14rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
text:nth-of-type(3) {
|
||||
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