Преглед изворни кода

feat(首页):首页静态页面

Zhenghanjv пре 3 месеци
родитељ
комит
be1196de56
11 измењених фајлова са 244 додато и 51 уклоњено
  1. 19 18
      app.json
  2. 6 0
      images/order.svg
  3. BIN
      images/scan.png
  4. BIN
      images/stationBackground.png
  5. BIN
      images/user.png
  6. 26 0
      pages/scan/scan.js
  7. 3 0
      pages/scan/scan.json
  8. 32 0
      pages/scan/scan.wxml
  9. 124 0
      pages/scan/scan.wxss
  10. 27 27
      project.config.json
  11. 7 6
      project.private.config.json

+ 19 - 18
app.json

@@ -1,18 +1,19 @@
-{
-  "pages": [
-    "pages/login/login",
-    "pages/login/load",
-    "pages/index/index",
-    "pages/logs/logs"
-   
-  ],
-  "window": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarBackgroundColor": "#ffffff"
-  },
-  "style": "v2",
-  "componentFramework": "glass-easel",
-  "sitemapLocation": "sitemap.json",
-  "lazyCodeLoading": "requiredComponents"
-}
+{
+  "pages": [
+    
+    "pages/scan/scan",
+    "pages/index/index",
+    "pages/login/login",
+    "pages/login/load",
+    "pages/logs/logs"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "style": "v2",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

+ 6 - 0
images/order.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="32" height="32" style="" filter="none">
+    
+    <g>
+    <path d="M10 6C10 4.89543 10.8954 4 12 4H36C37.1046 4 38 4.89543 38 6V44L31 39L24 44L17 39L10 44V6Z" fill="none" stroke="rgba(129,179,55,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 22L30 22" stroke="rgba(129,179,55,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 30L30 30" stroke="rgba(129,179,55,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18 14L30 14" stroke="rgba(129,179,55,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
+    </g>
+  </svg>


BIN
images/stationBackground.png



+ 26 - 0
pages/scan/scan.js

@@ -0,0 +1,26 @@
+Page({
+  data: {
+    isLoggedIn: false,
+    userInfo: null,
+    scanTitle:'扫码加油',
+    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'
+      });
+    }
+  }
+});

+ 3 - 0
pages/scan/scan.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

+ 32 - 0
pages/scan/scan.wxml

@@ -0,0 +1,32 @@
+<view class="scanContainer">
+  <view class="header">
+    <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>
+    </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> 

+ 124 - 0
pages/scan/scan.wxss

@@ -0,0 +1,124 @@
+.scanContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  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);
+  z-index: 999;
+  padding-left: 20px;
+}
+
+.background {
+  width: 100%;
+  height: 50vh;
+}
+
+.login-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%; /* 定位在父容器中间 */
+  left: 50%; /* 水平居中 */
+  transform: translate(-50%, -50%); /* 平移以实现居中 */
+  width: 90%; /* 适当宽度,避免溢出 */
+  max-width: 400px; /* 最大宽度 */
+  padding: 3%;
+  background-color: #fff;
+  border-radius: 8px;
+  z-index: 1;
+  box-sizing: border-box; /* 确保宽度包含 padding */
+}
+
+.user-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-grow: 10;
+}
+
+.user-tip {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.user-icon image {
+  width: 40px;
+  height: 40px;
+  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;
+}
+
+.order-tip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.order-tip image {
+  width: 100%;
+  height: 100%;
+}
+
+.order-tip text {
+  font-size: small;
+  font-weight: 600;
+}
+
+.scan-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 100rpx;
+  text-align: center;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.scan-container image {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+
+.scan-container text {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #333;
+}
+
+/* 背景图 */
+gas-station-background {
+  width: 100%;
+  height: 50vh; /* 占据屏幕高度的一半 */
+  object-fit: cover;
+  position: relative;
+  z-index: 0;
+}

+ 27 - 27
project.config.json

@@ -1,28 +1,28 @@
-{
-  "compileType": "miniprogram",
-  "libVersion": "trial",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
-  "setting": {
-    "coverView": true,
-    "es6": true,
-    "postcss": true,
-    "minified": true,
-    "enhance": true,
-    "showShadowRootInWxmlPanel": true,
-    "packNpmRelationList": [],
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    }
-  },
-  "condition": {},
-  "editorSetting": {
-    "tabIndent": "auto",
-    "tabSize": 2
-  },
-  "appid": "wxb198dafff060e651"
+{
+  "compileType": "miniprogram",
+  "libVersion": "trial",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "auto",
+    "tabSize": 2
+  },
+  "appid": "wxb198dafff060e651"
 }

+ 7 - 6
project.private.config.json

@@ -1,7 +1,8 @@
-{
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "fuelwx",
-  "setting": {
-    "compileHotReLoad": true
-  }
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "fuelwx",
+  "setting": {
+    "compileHotReLoad": true
+  },
+  "libVersion": "2.31.1"
 }