update: 订单列表静态页面
This commit is contained in:
mixtan
parent
3ac04df21a
commit
66b2c737c5
301
java-mall-app-shop-admin/pages/order/components/OrderItem.vue
Normal file
301
java-mall-app-shop-admin/pages/order/components/OrderItem.vue
Normal file
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="order_item">
|
||||
<view class="expresser">
|
||||
<view class="header">#<text>38</text></view>
|
||||
<view class="body">
|
||||
<view class="item info">
|
||||
<view class="name"> 谭金宇 </view>
|
||||
<view class="btn_call"> 催快递 </view>
|
||||
</view>
|
||||
<view class="item time">立即送达/07-29 20:21前送达</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="status">已接单</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="user">
|
||||
<view class="header">
|
||||
<view class="info">
|
||||
<view class="name">谢能坤</view>
|
||||
<view class="mobile">13128997057</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="btn_call">联系顾客</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="info">
|
||||
广西壮族自治区贵港市桂平市中山南路中山医院斜对面烧鹅大厦 8楼801
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="btn_map"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="info"><text>备注:</text>不需要筷子，小哥请送到驿站</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods">
|
||||
<view class="body">
|
||||
<view class="info">
|
||||
<image src="111" mode="aspectFit" class="img" />
|
||||
<image src="111" mode="aspectFit" class="img" />
|
||||
<image src="111" mode="aspectFit" class="img" />
|
||||
<view class="total">共10件商品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer">
|
||||
<view class="text">合计</view>
|
||||
<view class="prize_type">¥</view>
|
||||
<view class="prize_num">289.45</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tool">
|
||||
<view class="header"> 更多订单信息<u-icon name="arrow-down" color="#666" class="icon"></u-icon> </view>
|
||||
<view class="body">
|
||||
<view class="btn btn_cancel">取消订单</view>
|
||||
<view class="btn btn_refund">退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/variables.scss";
|
||||
|
||||
.order_item {
|
||||
padding: 24rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
color: #222;
|
||||
|
||||
.expresser {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.header {
|
||||
text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
flex: 1;
|
||||
padding-left: 24rpx;
|
||||
position: relative;
|
||||
|
||||
&::after{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 1px;
|
||||
background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
|
||||
background-size: 100% 16rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.info{
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.time {
|
||||
color: rgba(34, 34, 34, 0.9);
|
||||
}
|
||||
.name {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6rpx;
|
||||
margin-right: 12rpx;
|
||||
background: url("@/static/icon_mt.png") no-repeat 50% 50%;
|
||||
background-size: 28rpx 28rpx;
|
||||
}
|
||||
}
|
||||
.btn_call {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24rpx;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: url("@/static/icon_phone.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
width: 228rpx;
|
||||
.status{
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-bottom: 24rpx;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.btn_call {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: url("@/static/icon_phone.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.btn_map {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6rpx;
|
||||
background: url("@/static/icon_map.png") no-repeat 50% 50%;
|
||||
background-size: 28rpx 28rpx;
|
||||
}
|
||||
.box{
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.footer{
|
||||
.info{
|
||||
margin: 16rpx 0 24rpx;
|
||||
background: rgba(254, 247, 234, 0.5);
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
text{
|
||||
color: #FF801F;
|
||||
display: inline-block;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&::after{
|
||||
display: block;
|
||||
content: " ";
|
||||
height: 1px;
|
||||
background-image: linear-gradient(to right, #000 50%, transparent 20%);
|
||||
background-size: 16rpx 100%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
.body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin-right: 12rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
line-height: 36rpx;
|
||||
.text{
|
||||
color: #666;
|
||||
}
|
||||
.prize_type{
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
.prize_num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.header{
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.btn{
|
||||
width: 132rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
border: 1px solid #666;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.btn_refund{
|
||||
border-color: $base-color;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -1179,6 +1179,8 @@
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
|
||||
<OrderItem></OrderItem>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -1204,6 +1206,8 @@ import tuiGallery from "@/components/tui-gallery/tui-gallery.vue";
|
||||
import tuiRadio from "@/components/tui-radio/tui-radio.vue";
|
||||
import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
|
||||
import tuiSelect from "@/components/tui-select/tui-select.vue";
|
||||
|
||||
import OrderItem from "./components/OrderItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
tuiTabs,
|
||||
@ -1215,6 +1219,7 @@ export default {
|
||||
tuiRadio,
|
||||
tuiRadioGroup,
|
||||
tuiSelect,
|
||||
OrderItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
BIN
java-mall-app-shop-admin/static/icon_map.png
Normal file
BIN
java-mall-app-shop-admin/static/icon_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
java-mall-app-shop-admin/static/icon_mt.png
Normal file
BIN
java-mall-app-shop-admin/static/icon_mt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
java-mall-app-shop-admin/static/icon_phone.png
Normal file
BIN
java-mall-app-shop-admin/static/icon_phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue
Block a user