Skip to content

U
user
Commit 7c5d6d65 by weijiguang
Options

优化订单UI

parent 5e7d1237
Showing with 32 additions and 33 deletions
pages/order/order.vue
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)"> <view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
<view class="order_header"> <view class="order_header">
<view> <view>
<h3 class="order_adrass">{{ item.shop.name }}</h3> <view class="order_adrass">{{ item.shop.name }}</view>
<text class="order_time">{{ item.createdAt }}</text> <view class="order_time">{{ item.createdAt }}</view>
</view> </view>
<view class="order_status"> <view class="order_status">
<text>{{ getStateText(item.state) }}</text> <text>{{ getStateText(item.state) }}</text>
...@@ -29,9 +29,8 @@ ...@@ -29,9 +29,8 @@
</view> </view>
<div class="order_content"> <div class="order_content">
<view class="order_content_box1"> <view class="order_content_box1">
<view class="goods_item" v-for="good in item.orderDetails" :key="good.id"> <view class="goods_item" v-for="(good,index) in item.orderDetails" :key="good.id">
<image class="goods_img" v-if="jsonParse(good.goods.pics).thumbnailApplet" <image class="goods_img" v-if="jsonParse(good.goods.pics).thumbnailApplet" :src="jsonParse(good.goods.pics).thumbnailApplet"></image>
:src="jsonParse(good.goods.pics).thumbnailApplet"></image>
<image v-else class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image> <image v-else class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image>
<view class="goods_text"> <view class="goods_text">
...@@ -48,16 +47,16 @@ ...@@ -48,16 +47,16 @@
</view> </view>
</view> </view>
</view> </view>
</view> <view v-if="index==item.orderDetails.length-1 && (item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5)" class="qr_code">
</view>
<view v-if="item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5" class="qr_code">
<image class="qr_code_img" src="/static/imgs/icon-barcode.png"></image> <image class="qr_code_img" src="/static/imgs/icon-barcode.png"></image>
<view class="qr_text">点击二维码取单</view> <view class="qr_text">点击二维码取单</view>
</view> </view>
</view>
</view>
</div> </div>
<view class="order_footer"> <view class="order_footer">
<view class="total"> <view class="total">
共{{ orderDetailsSize(item.orderDetails) }}件商品 合计<text class="price">￥{{ Utils.isInteger(item.amount) }}</text> 共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.amount) }}</text>
</view> </view>
<a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立刻支付</a> <a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立刻支付</a>
<a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a> <a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a>
...@@ -251,7 +250,7 @@ export default { ...@@ -251,7 +250,7 @@ export default {
.empty_text { .empty_text {
width: 500rpx; width: 500rpx;
margin-top: 35rpx; margin-top: 32rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
...@@ -283,14 +282,13 @@ export default { ...@@ -283,14 +282,13 @@ export default {
/* 兼容老版本的方法 */ /* 兼容老版本的方法 */
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translate(-50%); transform: translate(-50%);
margin-top: 311rpx; margin-top: 352rpx;
.empty_icon { .empty_icon {
width: 324rpx; width: 324rpx;
height: 236rpx; height: 236rpx;
} }
.empty_text { .empty_text {
margin-top: 35rpx; margin-top: 32rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
...@@ -299,7 +297,7 @@ export default { ...@@ -299,7 +297,7 @@ export default {
color: #999999; color: #999999;
} }
.empty_button { .empty_button {
margin-top: 35rpx; margin-top: 36rpx;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
border-radius: 2rpx; border-radius: 2rpx;
...@@ -322,9 +320,9 @@ export default { ...@@ -322,9 +320,9 @@ export default {
.order_item { .order_item {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #FFFFFF;
margin: 30rpx auto 0; margin: 32rpx auto 0;
box-sizing: border-box; box-sizing: border-box;
padding: 25rpx 22rpx 32rpx 32rpx; padding: 25rpx 30rpx 30rpx 30rpx;
.order_header { .order_header {
display: flex; display: flex;
...@@ -335,11 +333,14 @@ export default { ...@@ -335,11 +333,14 @@ export default {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx;
} }
.order_time { .order_time {
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
margin-top: 4rpx;
line-height: 28rpx;
color: #999999; color: #999999;
} }
...@@ -351,6 +352,7 @@ export default { ...@@ -351,6 +352,7 @@ export default {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: flex-start; justify-content: flex-start;
line-height: 34rpx;
.xiaojiantou { .xiaojiantou {
width: 12rpx; width: 12rpx;
height: 16rpx; height: 16rpx;
...@@ -361,7 +363,6 @@ export default { ...@@ -361,7 +363,6 @@ export default {
} }
.order_content { .order_content {
margin-top: 42rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -370,23 +371,25 @@ export default { ...@@ -370,23 +371,25 @@ export default {
flex: 1; flex: 1;
} }
.goods_item {
margin-top: 42rpx;
display: flex;
// align-items: center;
.qr_code { .qr_code {
font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
line-height: 22rpx;
text-align: center; text-align: center;
margin-right: 10rpx; margin-right: 10rpx;
margin-left: 39rpx; margin-left: 38rpx;
.qr_code_img { .qr_code_img {
vertical-align: bottom;
width: 76rpx; width: 76rpx;
height: 76rpx; height: 76rpx;
} }
.qr_text { .qr_text {
margin-top:10rpx; line-height: 28rpx;
margin-top: 10rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
...@@ -394,11 +397,6 @@ export default { ...@@ -394,11 +397,6 @@ export default {
} }
} }
.goods_item {
display: flex;
align-items: center;
.goods_img { .goods_img {
height: 96rpx; height: 96rpx;
width: 96rpx; width: 96rpx;
...@@ -414,21 +412,22 @@ export default { ...@@ -414,21 +412,22 @@ export default {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-top: 10rpx;
line-height: 40rpx;
} }
.goods_spce { .goods_spce {
margin-top: 2.6rpx; margin-top: 2rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
line-height: 34rpx;
color: #999999; color: #999999;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
} }
} }
} }
...@@ -436,7 +435,7 @@ export default { ...@@ -436,7 +435,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 41rpx; margin-top: 40rpx;
.total { .total {
font-size: 28rpx; font-size: 28rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment