feat(首页)：首页按第一步UI稿实现

app.json

@@ -1,12 +1,12 @@
 {
   "pages": [
     
+    "pages/scan/scan",
+    "pages/login/login",
     "pages/moreOrder/moreOrder",
     "pages/orderConfirm/orderConfirm",
     "pages/historyOrder/historyOrder",
-    "pages/scan/scan",
     "pages/index/index",
-    "pages/login/login",
     "pages/login/load",
     "pages/logs/logs",
     "components/orderItem/orderItem",

js/api.js

@@ -3,7 +3,7 @@ const SM4Exten = require('../js/SM4Exten');
 const miniprogramsm4 = require("../miniprogram_npm/miniprogram-sm-crypto/index").sm4;
 const secretId = "D2BCF8DE-AA24-4BF6-9C34-C8DD325E412B";//小程序应用ID
 const Secret = "6C680A47B87740138DFB299FC69A64E1";//小程序应用密钥
-const api_root = 'http://192.168.0.202:5006/'
+const api_root = 'http://10.153.148.110:5006/'
 const CurrentBuId = '12345678-9abc-def0-1234-56789abcdef0';
 
 function request(path, method = 'GET', data = null) {
@@ -147,18 +147,18 @@ function generateRandomString(minLength = 6, maxLength = 10) {
   return result;
 }
 
-//获取站点信息
-function request_getSite(data) {
-  return request('api/Nozzle/GetNozzleInfo?Nozzleid='+ data, "GET",data);
-}
+// //获取站点信息
+// function request_getSite(data) {
+//   return request('api/Nozzle/GetNozzleInfo?Nozzleid='+ data, "GET",data);
+// }
 //支付
 function request_wechatPay(data) {
   return request('api/Transactions/UnifiedOrder?trxid='+ data, "GET",data);
 }
 
 //获取站点信息与用户信息
-function request_GetSiteInfo(data) {
-  return request('api/Site/GetSiteInfo', "GET",data);
+function request_GetSiteInfo() {
+  return request('api/Site/GetSiteInfo', "GET");
 }
 
 //小程序用户查询未支付订单
@@ -175,7 +175,8 @@ function request_Wechatlogin(data) {
   return request('api/Auth/Wechatlogin?code='+ data, "GET",data);
 }
 export default {
-  request_getSite,
+  // request_getSite,
   request_wechatPay,
-  request_Wechatlogin
+  request_Wechatlogin,
+  request_GetSiteInfo
 }

pages/login/login.js

@@ -81,8 +81,8 @@ Page({
            title: '支付成功！',
          })
          setTimeout(function () {
-           wx.switchTab({
-             url: '../index/index',
+           wx.redirectTo({
+             url: '../scan/scan',
            })
          }, 2000)
 
@@ -116,6 +116,9 @@ Page({
           .then(res => {
             debugger
             wx.setStorageSync('WachatID', res.data.data)
+            wx.redirectTo({
+              url: '../scan/scan',
+            })
           });
         } else {
           console.log('登录失败:', res.errMsg);

pages/scan/scan.js

@@ -1,26 +1,35 @@
+const { default: api } = require("../../js/api");
+
 Page({
   data: {
-    isLoggedIn: false,
+    isLoggedIn: true,
     userInfo: null,
     scanTitle:'扫码加油',
-    scanTip:'请扫码加油机键盘上的二维码'
+    scanTip:'请扫描加油机键盘上的二维码'
   },
 
-  handleGetUserInfo: function(e) {
-    if (e.detail.userInfo) {
-      this.setData({
-        isLoggedIn: true,
-        userInfo: e.detail.userInfo
-      });
-      wx.showToast({
-        title: '登录成功',
-        icon: 'success'
-      });
-    } else {
-      wx.showToast({
-        title: '用户拒绝授权',
-        icon: 'none'
-      });
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    var wxChatID = wx.getStorageSync("WachatID")
+    console.log("wxchatid",wxChatID);
+    if(wxChatID) {
+      api.request_GetSiteInfo().then(res => {
+        console.log(res)
+      })
+      // this.setData({
+      //   isLoggedIn: true,
+      //   userInfo: null,
+      //   scanTitle:'扫码加油',
+      //   scanTip:'请扫码加油机键盘上的二维码'
+      // })
     }
+  },
+
+  handleGetUserInfo: function(e) {
+    wx.redirectTo({
+      url: '../login/login'
+    })
   }
 });

pages/scan/scan.wxml

@@ -1,32 +1,48 @@
 <view class="scanContainer">
   <view class="header">
+    <image src="../../images/orientation.png" />
     <text>淮河路加油站</text>
   </view>
-  <image class="background"  src="../../images/stationBackground.png"></image>
-  <view class="login-container" wx:if="{{!isLoggedIn}}">
-    <view class="user-icon">
-      <image src="../../images/user.png" mode="aspectFit"></image>
-      <view class="user-tip">
-          <text style="font-weight: 600;">未登录</text>
-          <text style="font-size: 24rpx;color: #81838f;">请授权登录</text>
-      </view> 
-    </view>
-    <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权登录</button>
-  </view>
-  <view class="login-container" wx:else="{{!isLoggedIn}}">
-    <view class="user-icon">
-      <image src="../../images/user.png" mode="aspectFit"></image>
-      <text>135******05</text>
-    </view>
-    <view class="order-tip">
-      <image src="../../images/order.svg" mode="aspectFit"/>
-      <text>历史订单</text>
+  <image class="background" src="../../images/stationBackground.png"></image>
+
+  <view class="scan-box">
+    <!-- 登录条 -->
+    <view class="login-container">
+      <view class="user-icon">
+        <view class="user-border-unlogin" wx:if="{{!isLoggedIn}}">
+          <image src="../../images/user.png" mode="aspectFit"></image>
+        </view>
+        <image wx:if="{{isLoggedIn}}" src="../../images/user.png" mode="aspectFit"></image>
+      </view>
+      
+      <view class="user-tip" wx:if="{{!isLoggedIn}}">
+        <text style="font-weight: 530;">未登录</text>
+        <text style="font-size: 24rpx;color: #81838f;">请授权登录</text>
+      </view>
+      <text class="user-tip" wx:if="{{isLoggedIn}}">135******05</text>
+
+      <text class="toOtherPage">></text>
     </view>
     
+    <!-- 分割线 -->
+    <view class="line"></view>
+
+    <!-- 扫码区 -->
+    <view class="scan-container">
+      <view class="scan-image-box">
+        <view class="scan-bg-1" />
+        <view class="scan-bg-2" />
+        <view class="scan-bg-3" />
+        <image src="../../images/scan.png" mode="aspectFit"></image>
+      </view>
+      
+      <view class="scan-tip-title">
+        <view class="title-line" />
+        <text class="scan-tip-title-text">{{scanTitle}}</text>
+      </view>
+      
+      <text class="scan-tip-text">{{scanTip}}</text>
+    </view>
   </view>
-  <view class="scan-container">
-    <image src="../../images/scan.png" mode="aspectFit"></image>
-    <text style="font-weight: 600;">{{scanTitle}}</text>
-    <text>{{scanTip}}</text>
-  </view>
-</view> 
+
+</view>

pages/scan/scan.wxss

@@ -2,21 +2,28 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  background-color: #ededed;
 }
 
 .header {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  justify-content: space-between;
   position: fixed;
-  top: 0;
+  top: 5%;
   left: 0;
-  right: 0;
-  height: 44px;
-  line-height: 44px;
-  text-align: left;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 35px;
   z-index: 999;
-  padding-left: 20px;
+  padding-left: 10px;
+  padding-right: 20px ;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 0 40rpx 40rpx 0;
+}
+
+.header image{
+  width: 25px;
+  height: 25px;
 }
 
 .background {
@@ -24,70 +31,78 @@
   height: 50vh;
 }
 
-.login-container {
+.scan-box{
+  background-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 90%;
+  border-radius: 5%;
+  position: absolute;
+  top: 45%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.login-container{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  position: absolute;
-  top: 50%; /* 定位在父容器中间 */
-  left: 50%; /* 水平居中 */
-  transform: translate(-50%, -50%); /* 平移以实现居中 */
-  width: 90%; /* 适当宽度，避免溢出 */
+  align-items: center;
+  width: 100%;
   max-width: 400px; /* 最大宽度 */
   padding: 3%;
-  background-color: #fff;
-  border-radius: 8px;
-  z-index: 1;
+  margin: 5% 0% 3%;
   box-sizing: border-box; /* 确保宽度包含 padding */
 }
-
 .user-icon {
-  display: flex;
+  flex-grow: 1;
+  /* display: flex;
   flex-direction: row;
   align-items: center;
-  flex-grow: 10;
+  flex-grow: 10; */
 }
-
-.user-tip {
+.user-border-unlogin{
   display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 100rpx;
+  height: 100rpx;
+  border: #d81e07 solid 1rpx;
+  background-color: #ebebeb;
+  margin-right: 5%;
 }
-
-.user-icon image {
-  width: 40px;
-  height: 40px;
+.user-border-unlogin image {
+  width: 80rpx;
+  height: 80rpx;
   border-radius: 50%;
   margin-right: 3%;
 }
-
-.login-container button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 33%;
-  height: 33%;
-  color: #fff;
-  font-size: 28rpx;
-  background-color: #15803d;
-  font-weight: 549;
+.user-icon image {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
 }
-
-.order-tip {
+.user-tip {
   display: flex;
+  height: 100%;
   flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 5;
+}
+.toOtherPage{
+  flex-grow: 2;
+  display: flex;
   align-items: center;
+  justify-content: center;
 }
 
-.order-tip image {
+.line{
   width: 100%;
-  height: 100%;
-}
-
-.order-tip text {
-  font-size: small;
-  font-weight: 600;
+  height: 6rpx;
+  background-color: #d81e07;
+  padding: 0;
+  margin: 0;
 }
 
 .scan-container {
@@ -95,30 +110,66 @@
   width: 100%;
   flex-direction: column;
   align-items: center;
-  margin-top: 100rpx;
+  margin: 5% 0% 5%;
   text-align: center;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 8px;
 }
 
-.scan-container image {
-  width: 120px;
-  height: 120px;
+.scan-image-box{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 230rpx;
+  height: 230rpx;
+}
+.scan-bg-1{
+  position: absolute;
+  width: 230rpx;
+  height: 230rpx;
   border-radius: 50%;
+  background: #fed3d4;
+}
+.scan-bg-2{
+  position: absolute;
+  width: 210rpx;
+  height: 210rpx;
+  border-radius: 50%;
+  background: #f2635d;
+}
+.scan-bg-3{
+  position: absolute;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: #d81e07;
+}
+.scan-container image {
+  position: absolute;
+  width: 120rpx;
+  height: 120rpx;
 }
 
-.scan-container text {
-  margin-top: 10px;
-  font-size: 16px;
-  color: #333;
+.scan-tip-title{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin: 8% 0%;
 }
 
-/* 背景图 */
-gas-station-background {
-  width: 100%;
-  height: 50vh; /* 占据屏幕高度的一半 */
-  object-fit: cover;
-  position: relative;
-  z-index: 0;
+.title-line{
+  position: absolute;
+  width: 80%;
+  height: 3rpx;
+  background-color: #e5e5e5;
+}
+.scan-tip-title-text{
+  position: absolute;
+  width: 30%;
+  font-weight: 600;
+  background-color: #FFFFFF;
+  font-size: larger;
+}
+.scan-tip-text{
+  font-size: small;
+  color: #808080;
 }

project.config.json

@@ -24,5 +24,5 @@
     "tabIndent": "auto",
     "tabSize": 2
   },
-  "appid": "wx32dbc8c959199561"
+  "appid": "wxb198dafff060e651"
 }