root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 4 weeks ago
parent
c3959e2960
commit
250723f641
1 changed files with 209 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 248
      package1/order/orderList.vue

248
package1/order/orderList.vue
View File

@ -12,6 +12,17 @@
confirm-type="search" /> confirm-type="search" />
</view> </view>
</view> </view>
<view class="order-hero">
<view>
<view class="hero-eyebrow">ORDER CENTER</view>
<view class="hero-title">我的校园订单</view>
<view class="hero-sub">饭团、跑腿、售后进度都在这里一眼看清</view>
</view>
<view class="hero-badge">
<view class="hero-num">{{orderList.length}}</view>
<view class="hero-label">当前订单</view>
</view>
</view>
</view> </view>
<view class="nav-tab"> <view class="nav-tab">
<view class="tab1"> <view class="tab1">
@ -86,7 +97,12 @@
已售后</view> 已售后</view>
</view> </view>
</view> </view>
<view class="content" :style="{top:tab1Checked =='quanbu'?'360rpx':'440rpx'}"> <view class="content" :style="{top:tab1Checked =='quanbu'?'430rpx':'535rpx'}">
<view class="empty-order" v-if="orderList.length <= 0 && loadStatus != 'loading'">
<view class="empty-icon">单</view>
<view class="empty-title">暂时没有相关订单</view>
<view class="empty-sub">换个分类看看，或搜索你记得的商家名称</view>
</view>
<view class="box1" v-for="(item,index) in orderList" :key="index"> <view class="box1" v-for="(item,index) in orderList" :key="index">
<view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red;color:#fff;"> <view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red;color:#fff;">
待支付 待支付
@ -568,7 +584,7 @@
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
font-size: 24rpx; font-size: 24rpx;
background: #F5F8F5; background: linear-gradient(180deg, #ecfff7 0%, #f7fbf6 42%, #fbfaf5 100%);
color: #00231C; color: #00231C;
} }
@ -579,52 +595,136 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background:
radial-gradient(circle at 12% 8%, rgba(166, 255, 234, 0.48) 0, rgba(166, 255, 234, 0) 260rpx),
radial-gradient(circle at 92% 20%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 320rpx);
} }
.title { .title {
flex-shrink: 0; flex-shrink: 0;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; background:
background-size: 100%; linear-gradient(135deg, rgba(166, 255, 234, 0.9) 0%, rgba(245, 255, 249, 0.96) 52%, rgba(255, 246, 225, 0.94) 100%);
width: 100%; width: 100%;
height: 400rpx; height: 400rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-bottom-left-radius: 48rpx;
border-bottom-right-radius: 48rpx;
box-shadow: 0 18rpx 44rpx rgba(0, 35, 28, 0.06);
position: relative;
overflow: hidden;
}
.title::after {
content: '';
width: 360rpx;
height: 360rpx;
border-radius: 50%;
background: rgba(255, 221, 176, 0.26);
position: absolute;
right: -150rpx;
top: -120rpx;
} }
.title-sreach { .title-sreach {
width: 75%; width: 75%;
display: flex; display: flex;
height: 200rpx; height: 200rpx;
position: relative;
z-index: 1;
} }
.back-btn { .back-btn {
padding-top: 110rpx; padding-top: 110rpx;
width: 72rpx;
text-align: center;
} }
.title-search { .title-search {
margin-top: 110rpx; margin-top: 110rpx;
display: flex; display: flex;
background: #fff; background: rgba(255, 255, 255, 0.78);
height: 54rpx; height: 64rpx;
margin-left: 20rpx; margin-left: 20rpx;
border-radius: 54rpx; border-radius: 999rpx;
width: 380rpx; width: 380rpx;
flex: 1; flex: 1;
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.08);
border: 1px solid rgba(255, 255, 255, 0.88);
input { input {
height: 54rpx; height: 64rpx;
line-height: 54rpx; line-height: 64rpx;
font-size: 26rpx;
}
} }
.order-hero {
width: 90%;
margin: -6rpx auto 0;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.hero-eyebrow {
color: #0d8d76;
font-size: 20rpx;
font-weight: 900;
letter-spacing: 2rpx;
}
.hero-title {
margin-top: 8rpx;
color: #173f36;
font-size: 44rpx;
font-weight: 900;
}
.hero-sub {
margin-top: 8rpx;
color: #60706c;
font-size: 23rpx;
}
.hero-badge {
width: 132rpx;
height: 132rpx;
border-radius: 42rpx;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 18rpx 34rpx rgba(0, 35, 28, 0.08);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-num {
color: #0d4d42;
font-size: 42rpx;
font-weight: 900;
}
.hero-label {
color: #7b8883;
font-size: 20rpx;
font-weight: 800;
} }
.nav-tab { .nav-tab {
flex-shrink: 0; flex-shrink: 0;
position: absolute; position: absolute;
top: 200rpx; top: 285rpx;
left: 2.5%; left: 2.5%;
background: #fff; background: rgba(255, 255, 255, 0.92);
width: 95%; width: 95%;
border-radius: 20rpx; border-radius: 34rpx;
padding: 20rpx; padding: 18rpx;
box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.86);
z-index: 3;
} }
.content { .content {
@ -635,20 +735,25 @@
position: absolute; position: absolute;
top: 450rpx; top: 450rpx;
left: 2.5%; left: 2.5%;
padding-bottom: 50rpx;
z-index: 1;
} }
.tab1 { .tab1 {
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
display: flex; display: flex;
overflow-x: scroll;
white-space: nowrap;
} }
.tabs1 { .tabs1 {
position: relative; position: relative;
font-size: 30rpx; font-size: 30rpx;
font-weight: 700; font-weight: 900;
color: #777; color: #777;
padding: 0 30rpx; padding: 0 24rpx;
flex-shrink: 0;
} }
.tab2 { .tab2 {
@ -656,7 +761,7 @@
width: 100%; width: 100%;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
margin-top: 20rpx; margin-top: 16rpx;
white-space: nowrap; white-space: nowrap;
} }
@ -665,36 +770,54 @@
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
text-align: center; text-align: center;
background: rgba(247, 248, 248, 0.6); background: rgba(248, 255, 250, 0.88);
border-radius: 20rpx; border: 1px solid rgba(166, 255, 234, 0.4);
font-weight: 700; border-radius: 999rpx;
font-weight: 900;
margin-right: 20rpx; margin-right: 20rpx;
display: inline-block; display: inline-block;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
} }
.ziqu-xuanfu { .ziqu-xuanfu {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
background: rgba(247, 248, 248, 0.6); background: linear-gradient(135deg, #fff7d7, #a6ffea) !important;
border-top-right-radius: 20rpx; border-top-right-radius: 28rpx;
border-bottom-left-radius: 20rpx; border-bottom-left-radius: 28rpx;
font-weight: 700; font-weight: 900;
height: 56rpx; height: 56rpx;
width: 120rpx; width: 142rpx;
text-align: center; text-align: center;
line-height: 56rpx; line-height: 56rpx;
color: #777; color: #0d4d42 !important;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
} }
.box1 { .box1 {
width: 100%; width: 100%;
margin: 0 auto 20rpx; margin: 0 auto 24rpx;
background: #fff; background: rgba(255, 255, 255, 0.94);
border-radius: 20rpx; border: 1px solid rgba(255, 255, 255, 0.88);
padding: 20rpx; border-radius: 34rpx;
padding: 24rpx;
position: relative; position: relative;
box-sizing: border-box;
box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
overflow: hidden;
}
.box1::before {
content: '';
width: 180rpx;
height: 180rpx;
border-radius: 50%;
background: rgba(166, 255, 234, 0.08);
position: absolute;
right: -120rpx;
top: -130rpx;
} }
.goods-img { .goods-img {
@ -702,14 +825,16 @@
height: 160rpx; height: 160rpx;
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 20rpx; border-radius: 24rpx;
margin-right: 10px; margin-right: 10px;
overflow: hidden;
box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.08);
img { img {
width: 160rpx; width: 160rpx;
background-size: 100%; background-size: 100%;
height: 100%; height: 100%;
border-radius: 10px; border-radius: 24rpx;
} }
} }
@ -720,25 +845,26 @@
.goods-name { .goods-name {
font-weight: 900; font-weight: 900;
color: #243f38;
} }
.goods-content-center { .goods-content-center {
display: flex; display: flex;
margin: 16rpx 0; margin: 16rpx 0;
color: #777; color: #7b8883;
} }
.pintuan-left-price { .pintuan-left-price {
width: 55%; width: 55%;
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
color: #000; color: #00231C;
} }
.goods-content-bottom { .goods-content-bottom {
display: flex; display: flex;
line-height: 56rpx; line-height: 56rpx;
color: #777; color: #6b7773;
} }
.btn1 { .btn1 {
@ -747,12 +873,14 @@
line-height: 60rpx; line-height: 60rpx;
text-align: center; text-align: center;
margin-top: 20rpx; margin-top: 20rpx;
background: rgba(247, 248, 248, 0.6); background: rgba(248, 255, 250, 0.9) !important;
border-radius: 60rpx; border: 1px solid rgba(166, 255, 234, 0.42);
color: #777; border-radius: 999rpx;
font-weight: 700; color: #0d4d42 !important;
font-weight: 900;
float: right; float: right;
margin-left: 20rpx; margin-left: 20rpx;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.05);
} }
.bottom-btn { .bottom-btn {
@ -778,8 +906,48 @@
width: 600rpx; width: 600rpx;
padding: 20rpx; padding: 20rpx;
overflow: scroll; overflow: scroll;
background: #fff; background: linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
border-radius: 20rpx; border-radius: 36rpx 36rpx 0 0;
max-height: 1000rpx; max-height: 1000rpx;
box-shadow: 0 -18rpx 44rpx rgba(0, 35, 28, 0.12);
}
.empty-order {
width: 100%;
min-height: 360rpx;
padding: 58rpx 36rpx;
box-sizing: border-box;
border-radius: 36rpx;
background:
radial-gradient(circle at 78% 8%, rgba(255, 221, 176, 0.28) 0, rgba(255, 221, 176, 0) 150rpx),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 251, 0.96) 100%);
box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.06);
text-align: center;
}
.empty-icon {
width: 104rpx;
height: 104rpx;
margin: 0 auto 22rpx;
border-radius: 36rpx;
background: linear-gradient(135deg, #fff7d7 0%, #a6ffea 100%);
color: #125e50;
font-size: 34rpx;
font-weight: 900;
line-height: 104rpx;
box-shadow: 0 14rpx 26rpx rgba(0, 35, 28, 0.08);
}
.empty-title {
color: #243f38;
font-size: 30rpx;
font-weight: 900;
}
.empty-sub {
margin-top: 14rpx;
color: #74817d;
font-size: 24rpx;
line-height: 38rpx;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save