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

商户主页页面内容的添加及布局调整优化

master
W夏日 2 years ago
parent
2fb5f0ed88
commit
b1a9279924
6 changed files with 433 additions and 2 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. 3
      app.json
  2. 127
      pages/home-page/home-page.js
  3. 6
      pages/home-page/home-page.json
  4. 94
      pages/home-page/home-page.wxml
  5. 201
      pages/home-page/home-page.wxss
  6. 2
      pages/merchant-login/merchant-login.wxml

3
app.json
View File

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

127
pages/home-page/home-page.js
View File

@ -0,0 +1,127 @@
// pages/pregnant-mother/pregnant-mother.js
Page({
/**
* 页面的初始数据
*/
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
nvabarData: {
title: '', //导航栏 中间的标题
keyWord: '',
search: true
},
height: ''
},
changeIndicatorDots() {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay() {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
this.setData({
interval: e.detail.value
})
},
durationChange(e) {
this.setData({
duration: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 清除搜索框 调用子组件的清空函数
this.selectComponent('#bar').clearInput();
// 每个机型的尺寸不一致
// 在app.js中获取到的 statusBarHeight 用于控制头部的高度
this.setData({
// height: app.globalData.height,
})
this.setData({
'nvabarData.inputValue': ''
})
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
},
search: function(e) {
this.getTask(e.detail);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

6
pages/home-page/home-page.json
View File

@ -0,0 +1,6 @@
{
"navigationBarTitleText": "商户主页",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#F52F3E",
"navigationBarTextStyle": "white"
}

94
pages/home-page/home-page.wxml
View File

@ -0,0 +1,94 @@
<view class="page-bg">
<view class="merchant-information">
<image class="default-avatar" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/default-avatar.png" />
<view class="information-content">
<view class="information-name">李姐烧烤</view>
<view class="address-text">地址：广西南宁市江南区波尔多庄园2-109号商铺</view>
</view>
</view>
<view class="revenue-information">
<view class="projected-revenue-content">
<view class="projected-revenue-item">
<view class="character-style">￥</view>
<view class="character-price">394.00</view>
</view>
<view class="revenue-item-text">
<view class="character-text">预计到账收益</view>
<image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
</view>
</view>
<view class="segmentation"></view>
<view class="projected-revenue-content">
<view class="projected-revenue-item">
<view class="character-style">￥</view>
<view class="character-price">5000.00</view>
</view>
<view class="revenue-item-text">
<view class="character-text">总到账收益</view>
<image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
</view>
</view>
</view>
<view class="recent-orders-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="ordering-information">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-information-item">
<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 class="order-status">
<button class="refund-button">退款</button>
</view>
<view class="divider-style"></view>
</view>
<view class="ordering-information">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-information-item">
<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 class="order-status">
<button class="refunded-button-style">已退款</button>
</view>
<view class="divider-style"></view>
</view>
<view class="ordering-information">
<view class="order-number">订单编号 22398983498</view>
<view class="ordering-information-item">
<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 class="order-status">
<button class="refund-button">退款</button>
</view>
<view class="divider-style"></view>
</view>
</view>
</view>

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

@ -0,0 +1,201 @@
page{
background: #fff;
}
.page-bg{
width: 750rpx;
height: 1492rpx;
background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/homepage-bg.png") no-repeat center center;
background-size:cover;
padding: 0 30rpx;
}
.merchant-information{
display: flex;
justify-content: left;
align-items: center;
padding: 50rpx 0;
}
image.default-avatar{
width: 110rpx;
height: 110rpx;
background-size: cover;
}
.information-content{
margin-left: 30rpx;
}
.information-name{
font-family: "Microsoft YaHei";
font-size: 32rpx;
color: #fff;
font-weight: bold;
}
.address-text{
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #fff;
margin-top: 15rpx;
}
.revenue-information{
display: flex;
justify-content: space-between;
align-items: center;
width: 691rpx;
height: 200rpx;
background: url("https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/income-bg.png") no-repeat center center;
background-size:cover;
padding: 0 60rpx;
}
.projected-revenue-content{
text-align: center;
}
.projected-revenue-item{
display: flex;
justify-content: left;
align-items: baseline;
}
.character-style{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #454545;
}
.character-price{
font-family: "Microsoft YaHei";
font-size: 50rpx;
color: #454545;
font-weight: bold;
margin-left: 10rpx;
}
.character-text{
font-family: "Microsoft YaHei";
font-size: 28rpx;
color: #454545;
font-weight: bold;
}
image.help-icon{
width: 30rpx;
height: 30rpx;
background-size: cover;
margin-left: 10rpx;
}
.revenue-item-text{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.segmentation{
width: 1rpx;
height: 90rpx;
background: #E6E3E3;
}
.recent-orders-content{
background: #fff;
margin-top: -1rpx;
}
.recent-orders-title{
display: flex;
justify-content: left;
align-items: center;
padding: 30rpx;
}
image.title-stlye{
width: 15rpx;
height: 19rpx;
background-size: cover;
margin-right: 20rpx;
}
.title-text{
font-family: "Microsoft YaHei";
font-size: 30rpx;
color: #454545;
font-weight: bold;
}
.ordering-information{
padding-bottom: 30rpx;
}
.order-number{
font-family: "Microsoft YaHei";
font-size: 26rpx;
color: #454545;
padding: 0 30rpx;
}
.ordering-information-item{
display: flex;
justify-content: left;
align-items: center;
padding: 30rpx;
}
.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;
font-weight: bold;
}
.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;
}
.order-status{
display: flex;
justify-content: space-around;
align-items: center;
padding: 30rpx 0;
border-top: 1rpx solid #eeeeee;
}
button.refund-button{
width: 120rpx;
height: 48rpx;
line-height: 48rpx;
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #454545;
border-color: #E5E5E5;
background: #fff;
border-radius: 100rpx;
margin: 0;
margin-left: 500rpx;
}
button.refunded-button-style{
width: 130rpx;
height: 48rpx;
line-height: 48rpx;
font-family: "Microsoft YaHei";
font-size: 24rpx;
color: #454545;
border-color: #E5E5E5;
background: #fff;
border-radius: 100rpx;
margin: 0;
margin-left: 500rpx;
}
.divider-style{
width: 690rpx;
height: 10rpx;
background: #f7f7f7;
}

2
pages/merchant-login/merchant-login.wxml
View File

@ -9,7 +9,9 @@
<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>

Write Preview
Loading…
Cancel
Save