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

app.json

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

pages/home-page/home-page.js

@@ -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() {
+
+  }
+})

pages/home-page/home-page.json

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

pages/home-page/home-page.wxml

@@ -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>

pages/home-page/home-page.wxss

@@ -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;
+}

pages/merchant-login/merchant-login.wxml

@@ -9,7 +9,9 @@
     <input class="mobile-verification" bindinput= ""  name="phone" placeholder="请输入短信验证码" value="" />
     <button class="verification-button">获取验证码</button>
   </view>
-  <button class="login-button">登 录</button>
+  <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>