weixiari-124
/
queued-payment
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

历史订单列表页面内容布局调整优化

master
W夏日 2 years ago
parent
3bfd95c97e
commit
53c04f1457
6 changed files with 259 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      app.json
  2. 9
      pages/home-page/home-page.wxss
  3. 3
      pages/merchant-login/merchant-login.wxss
  4. 6
      pages/user-orders/user-orders.json
  5. 86
      pages/user-orders/user-orders.wxml
  6. 226
      pages/user-orders/user-orders.wxss

4
app.json
View File

@ -1,7 +1,9 @@
{
"pages": [
"pages/merchant-login/merchant-login",
"pages/home-page/home-page"
"pages/home-page/home-page",
"pages/user-orders/user-orders"
],
"requiredPrivateInfos": [
"chooseAddress"

9
pages/home-page/home-page.wxss
View File

@ -58,7 +58,7 @@ image.default-avatar{
color: #454545;
}
.character-price{
font-family: "Microsoft YaHei";
font-family: "Din";
font-size: 50rpx;
color: #454545;
font-weight: bold;
@ -143,7 +143,6 @@ image.order-chart{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #454545;
font-weight: bold;
}
.amount-of-money{
font-family: "Microsoft YaHei";
@ -180,6 +179,7 @@ button.refund-button{
border-radius: 100rpx;
margin: 0;
margin-left: 500rpx;
border: 1rpx solid #E5E5E5;
}
button.refunded-button-style{
width: 130rpx;
@ -188,14 +188,17 @@ button.refunded-button-style{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999 !important;
border-color: #E5E5E5;
background: #fff;
border-radius: 100rpx;
margin: 0;
margin-left: 500rpx;
border: 1rpx solid #E5E5E5;
}
.divider-style{
width: 690rpx;
height: 10rpx;
background: #f7f7f7;
}
button::atter{
border:none;
}

3
pages/merchant-login/merchant-login.wxss
View File

@ -85,4 +85,7 @@ button.login-button{
color: #999;
margin-left: 10rpx;
}
button::after{
border: none;
}

6
pages/user-orders/user-orders.json
View File

@ -1,6 +1,6 @@
{
"navigationBarTitleText": "商户登录",
"navigationBarTitleText": "预计到账收益",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F52F3E",
"navigationBarTextStyle": "white"
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}

86
pages/user-orders/user-orders.wxml
View File

@ -1,23 +1,77 @@
<view class="page-bg">
<view class="login-copy-content">
<image class="login-copy-style" mode="aspectFill" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/login-copy.png"></image>
<view class="withdrawal-management">
<button class="withdrawal-button">提现管理</button>
</view>
<view class="withdrawal-limit">
<view class="limit-symbol">￥</view>
<view class="withdrawal-volume">458.00</view>
</view>
<view class="Withdrawable-text">可提现</view>
<view class="withdrawal-content">
<image class="withdrawal-line" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/withdrawal-line.png" />
</view>
<view class="to-be-credited">待入账：￥200.00</view>
<view class="queuing-information-content">
<view class="recent-orders-title">
<image class="title-stlye" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/title-stlye.png" />
<view class="title-text">最近排队信息</view>
</view>
<view class="information-item">
<view class="item-content">
<view class="item-content-titie">李姐烧烤（普罗旺斯店）：</view>
<view class="item-content-text">购买时排队<span class="style-text">10</span>，当前<span class="style-text">2</span></view>
</view>
<view class="item-content">
<view class="item-content-titie">李姐烧烤（青秀万达店）：</view>
<view class="item-content-text">购买时排队<span class="style-text">200</span>，当前<span class="style-text">48</span></view>
</view>
<view class="see-more-content">
<view class="see-more-text">查看更多</view>
<view class="see-more-icon"></view>
</view>
</view>
</view>
<view class="ordering-information">
<view class="ordering-information-item">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-item-content">
<view class="ordering-pic">
<image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
</view>
<view class="input-mobile-phone">
<input class="phone-input" bindinput= "" name="phone" placeholder="请输入手机号" value="" />
<view class="ordering-text">
<view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
<view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
<view class="order-time">订单时间：2023-10-24 20:39:56</view>
</view>
<view class="input-validation">
<input class="mobile-verification" bindinput= "" name="phone" placeholder="请输入短信验证码" value="" />
<button class="verification-button">获取验证码</button>
</view>
<navigator hover-class="none" url="/pages/home-page/home-page">
<button class="login-button">登 录</button>
</navigator>
<view class="consent-agreement">
<view class="radio-style" bindtap='checkedTap'>
<radio checked="{{checked1}}"></radio>
</view>
<span class="agree-style">我同意</span>
<span class="orangeColor" catchtap="readFile" data-url="" data-txt="使用条款">《排队支付用户服务协议》</span>
<span class="orangeColor" catchtap="readFile" data-url="" data-txt="隐私政策">《隐私保护协议》</span>
<view class="ordering-information-item">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-item-content">
<view class="ordering-pic">
<image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
</view>
<view class="ordering-text">
<view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
<view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
<view class="order-time">订单时间：2023-10-24 20:39:56</view>
</view>
</view>
</view>
<view class="ordering-information-item">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-item-content">
<view class="ordering-pic">
<image class="order-chart" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/order-chart.png" />
</view>
<view class="ordering-text">
<view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
<view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
<view class="order-time">订单时间：2023-10-24 20:39:56</view>
</view>
</view>
</view>
</view>
</view>

226
pages/user-orders/user-orders.wxss
View File

@ -1,88 +1,206 @@
page{
background: #fff;
background: #F7F7F7;
}
.page-bg{
width: 750rpx;
height: 1492rpx;
background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/Login-bg.png") no-repeat center center;
height: 525rpx;
background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/withdrawal-bg.png") no-repeat center center;
background-size:cover;
padding: 0 30rpx;
}
image.login-copy-style{
width: 364rpx;
height: 200rpx;
background-size:cover;
margin: 90rpx 0;
.withdrawal-management{
position: absolute;
top: 0;
right: 0;
}
.input-mobile-phone{
button.withdrawal-button{
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #fff;
background: #FCC565;
margin: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 40rpx;
}
button::after{
border: none;
}
.withdrawal-limit{
display: flex;
justify-content: left;
align-items: center;
width: 690rpx;
height: 88rpx;
background: #fff;
border-radius: 100rpx;
padding: 0 40rpx;
margin-bottom: 40rpx;
justify-content: center;
align-items: baseline;
padding-top: 66rpx;
text-align: center;
}
input.phone-input{
width: 690rpx;
.limit-symbol{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
font-size: 30rpx;
color: #fff;
}
.input-validation{
.withdrawal-volume{
font-family: "Din";
font-size: 60rpx;
color: #fff;
font-weight: bold;
margin-left: 10rpx;
}
.Withdrawable-text{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #fff;
text-align: center;
margin-top: 30rpx;
}
.withdrawal-content{
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
width: 690rpx;
height: 88rpx;
padding: 30rpx 0;
}
image.withdrawal-line{
text-align: center;
width: 200rpx;
height: 1rpx;
background-size: cover;
}
.to-be-credited{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #fff;
text-align: center;
}
.queuing-information-content{
background: #fff;
border-radius: 100rpx;
padding: 0 40rpx;
margin-bottom: 40rpx;
border-radius: 20rpx;
padding: 30rpx 0;
margin-top: 30rpx;
}
input.mobile-verification{
width: 400rpx;
.recent-orders-title {
display: flex;
justify-content: left;
align-items: center;
padding: 0 30rpx;
border-bottom: 1rpx solid #eeeeee;
padding-bottom: 30rpx;
}
image.title-stlye {
width: 15rpx;
height: 19rpx;
background-size: cover;
margin-right: 20rpx;
}
.title-text {
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
font-size: 30rpx;
color: #454545;
font-weight: bold;
}
button.verification-button{
.information-item{
padding: 0 30rpx;
}
.item-content{
display: flex;
justify-content: left;
align-items: center;
margin-top: 30rpx;
}
.item-content-titie{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #454545;
background: none;
border-radius: 100rpx;
border: 1rpx solid #fff;
margin: 0;
font-weight: bold;
}
button{
border: none;
.item-content-text{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #666;
}
button.login-button{
width: 690rpx;
height: 88rpx;
line-height: 88rpx;
span.style-text{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #fff;
font-size: 24rpx;
color: #F52F3E;
font-weight: bold;
background: #F52F3E;
border-radius: 100rpx;
margin-top: 90rpx;
border: none;
padding: 0 15rpx;
}
.consent-agreement{
.see-more-content{
display: flex;
justify-content: center;
align-items: center;
margin-top: 36rpx;
margin-top: 30rpx;
}
.agree-style{
.see-more-text{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
color: #F52F3E;
}
.see-more-icon{
width: 0;
height: 0;
border-left: 14rpx solid #FDD5D8;
border-top: 14rpx solid transparent;
border-bottom: 14rpx solid transparent;
margin-left: 10rpx;
border-radius: 10rpx;
}
.ordering-information{
padding: 30rpx;
background: #fff;
margin-top: 20rpx;
border-radius: 20rpx;
padding-top: 0;
}
.order-number {
font-family: "Microsoft YaHei";
font-size: 26rpx;
color: #454545;
padding: 30rpx 0;
}
.ordering-pic {
width: 120rpx;
height: 120rpx;
background-size: cover;
border-radius: 15rpx;
}
image.order-chart {
width: 120rpx;
height: 120rpx;
background-size: cover;
border-radius: 15rpx;
}
.ordering-text {
margin-left: 30rpx;
}
.ordering-text-title {
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #454545;
}
.amount-of-money {
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
padding: 10rpx 0;
}
span.price-style {
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #F52F3E;
}
.order-time {
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #999;
}
.ordering-item-content{
display: flex;
justify-content: left;
align-items: center;
border-bottom: 1rpx solid #eee;
padding-bottom: 30rpx;
}
Write Preview
Loading…
Cancel
Save