小程序：首页按钮功能完成；个人中心、生活物资页框架；体温上报定位权限获取失败提示信息；删除部分无用代码；

TODOs.md

@@ -10,14 +10,28 @@ http://106.75.217.14:8488/nacos/index.html
 nacos
 socan
 
+
+
 # 启动本地 Nacos
+
 E:
 cd E:\nacos\bin
 startup.cmd -m standalone
 
+
+
 # 内网穿透
+
 cd E:\Project\毕业设计\epp\intranet-penetration\bin
 rathole.exe ../conf/client.toml
+
+
+
+# 微信小程序后台设置 小程序最低基础库 2.21.3
+
+https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
+
+
 -----
 
 Nacos CPU 跑满问题 我提的 GitHub issue

weixin-miniprogram/app.json

@@ -1,14 +1,13 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/index2/index",
+    "pages/index/login",
-    "pages/logs/logs",
     "pages/residents/code",
     "pages/residents/report",
-    "pages/index/login",
+    "pages/residents/reportHistory",
+    "pages/shop/shop",
     "pages/scan/entrance",
-    "pages/person/person",
+    "pages/person/person"
-    "pages/residents/reportHistory"
   ],
   "window": {
     "backgroundTextStyle": "dark",
@@ -40,6 +39,12 @@
         "iconPath": "image/icon/_report.png",
         "selectedIconPath": "image/icon/report.png"
       },
+      {
+        "pagePath": "pages/shop/shop",
+        "text": "生活物资",
+        "iconPath": "image/icon/_shopping.png",
+        "selectedIconPath": "image/icon/shopping.png"
+      },
       {
         "pagePath": "pages/person/person",
         "text": "我",

weixin-miniprogram/app.wxss

@@ -1 +1,16 @@
 /**app.wxss**/
+/* 右上角小红点 */
+.add-dot {
+  position: relative;
+}
+
+.add-dot::after {
+  content: " ";
+  position: absolute;
+  right: -8rpx;
+  top: -3rpx;
+  width: 12rpx;
+  height: 12rpx;
+  background-color: red;
+  border-radius: 50%;
+}

weixin-miniprogram/image/icon/shopping.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679121653312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2861" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M268.190476 243.809524v73.142857H238.567619L200.655238 828.952381h622.689524l-37.936762-512h-29.622857v-73.142857h29.622857a73.142857 73.142857 0 0 1 72.94781 67.730286l37.91238 512A73.142857 73.142857 0 0 1 823.344762 902.095238H200.655238a73.142857 73.142857 0 0 1-72.923428-78.555428l37.91238-512A73.142857 73.142857 0 0 1 238.592 243.809524h29.574095z m378.831238 268.190476l68.924953 24.478476C643.608381 740.10819 370.639238 740.10819 316.952381 533.455238l70.802286-18.383238c34.986667 134.680381 210.358857 134.680381 259.267047-3.047619z m-134.095238-426.666667a194.998857 194.998857 0 0 1 194.998857 194.998857v98.816h-73.142857V316.952381h-243.736381l0.024381 62.171429h-73.142857v-98.79162A194.998857 194.998857 0 0 1 512.926476 85.333333z m0 73.142857a121.904762 121.904762 0 0 0-116.297143 85.333334h232.594286a121.904762 121.904762 0 0 0-116.297143-85.333334z" p-id="2862" fill="#FF6031"></path></svg>

weixin-miniprogram/pages/index/index.js

@@ -11,6 +11,9 @@ Page({
    */
   data: {
     debugText: "调试",
+    displayUsername: "",
+    userGroup: "unknown",
+    filterMenuItems: [],
   },
 
   /**
@@ -19,15 +22,9 @@ Page({
   onLoad(options) {
     console.log("index/index onLoad", options)
     // console.log("wx.getLaunchOptionsSync()", wx.getLaunchOptionsSync())
-    this.setData({
-      debugText: JSON.stringify(options, null, 4),
-    })
 
-
+    let userInfo = wx.getStorageSync("userInfo")
-    console.log("menuItemDict", menuItemDict)
+    if (!userInfo) {
-    this.userInfo = wx.getStorageSync("userInfo")
-    this.displayUsername = this.userInfo?.username ?? "请登录"
-    if (!this.userInfo) {
       console.log("用户未登录")
       wx.redirectTo({
         url: '/pages/index/login'
@@ -35,13 +32,19 @@ Page({
       return
     } else {
       // 用户已登录
-      this.userGroup = getUserGroupByRole(this.userInfo.role)
+      let userGroup = getUserGroupByRole(userInfo.role)
-      this.debugObject = {
+      this.setData({
-        userGroup: this.userGroup
+        debugText: JSON.stringify(options, null, 4),
-      }
+        userInfo: userInfo,
+        userGroup: userGroup,
+        displayUsername: userInfo?.username ?? "请登录",
+        filterMenuItems: this.getFilterMenuItems(menuItemDict, userGroup)
+      })
+      console.log("menuItemDict", menuItemDict)
+      console.log("filterMenuItems", this.data.filterMenuItems)
 
       //判断用户是否是通过扫小程序码进来的
-      if (options.scene) {
+      if (options && options.scene) {
         // 扫门禁的小程序码
         if (options.scene.split('%')[0] == "guard") {
           options.scene = null
@@ -52,14 +55,16 @@ Page({
         }
       }
 
-      // // 开发模式下自动跳转到指定页面，节省开发时间
+      // 开发模式下自动跳转到指定页面，节省开发时间
-      // console.log("app.globalData", app.globalData)
+      console.log("app.globalData", app.globalData)
-      // if (app.globalData.debugMode) {
+      if (app.globalData.debugMode) {
-      //   wx.switchTab({
+        wx.switchTab({
           // url: '/pages/residents/report'
-      //   })
+          // url: '/pages/person/person'
-      //   return
+          url: '/pages/shop/shop'
-      // }
+        })
+        return
+      }
     }
   },
 
@@ -110,5 +115,62 @@ Page({
    */
   onShareAppMessage() {
     console.log("index/index onShareAppMessage")
+  },
+
+
+  getFilterMenuItems(menuItemDict, userGroup) {
+    return Object.values(menuItemDict)
+      .filter((item) => item.for.indexOf(userGroup) != -1)
+  },
+
+
+  switchTo(event) {
+    let dataset = event.target.dataset
+    console.log("dataset", dataset)
+    switch (dataset.switchfunc) {
+      case 'switchTab':
+        wx.switchTab({
+          url: dataset.pageurl
+        })
+        break;
+      case 'navigateTo':
+        wx.navigateTo({
+          url: dataset.pageurl
+        })
+        break;
+      case 'redirectTo':
+        wx.redirectTo({
+          url: dataset.pageurl
+        })
+        break;
+      default:
+        console.log("切换页面失败", dataset)
+        break;
+    }
+  },
+
+  goCode() {
+    wx.switchTab({
+      url: '/pages/residents/code'
+    })
+  },
+
+  toggleDot(event, ownerInstance, iconName = 'code', status = undefined) {
+    console.log("menuItemDict[iconName]", menuItemDict[iconName])
+    console.log("this.data.userGroup", this.data.userGroup)
+    if (typeof (status) === 'undefined') {
+      menuItemDict[iconName].addDot = !menuItemDict[iconName].addDot;
+    } else {
+      menuItemDict[iconName].addDot = !!status;
+    }
+    this.setData({
+      filterMenuItems: this.getFilterMenuItems(menuItemDict, this.data.userGroup)
+    })
+  },
+
+  magicButton() {
+    wx.navigateTo({
+      url: "/pages/scan/entrance"
+    })
   }
 })

weixin-miniprogram/pages/index/index.wxml

@@ -1,21 +1,20 @@
 <!--pages/index/index.wxml-->
 <view>
   <image src="../../image/home.jpg" style="width: 100vw; height: 41.5vw;"></image>
-  <view style="display: block; padding-left: 30px; padding-top: 12px;">
+  <view class="welcome-text">
     <text>欢迎你，{{ displayUsername }}！</text>
   </view>
   <view>
-  <text>调试信息：{{ debugText }}</text>
   </view>
   <view id="menu-view">
-    <view class="menu-item" v-for="menuItem in filterMenuItems" :key="menuItem.id">
+    <view class="menu-item" wx:for="{{ filterMenuItems }}" wx:for-item="menuItem" wx:key="id">
-      <view :class="{ 'add-dot': menuItem.addDot }" style="display: inline-block;">
+      <view class="{{ menuItem.addDot ? 'add-dot' : '' }}" style="display: inline-block;">
-        <image :src="'../../image/icon/' + menuItem.image" class="item-image" bindtap='switchTo(menuItem.switchFunc, menuItem.url)'></image>
+        <image src="../../image/icon/{{ menuItem.image }}" class="item-image" bindtap='switchTo' data-switchfunc="{{menuItem.switchFunc}}" data-pageurl="{{menuItem.url}}"></image>
       </view>
       <view>{{ menuItem.title }}</view>
     </view>
   </view>
-  <button type="primary" size="mini" bindtap="toggleDot('code', true)">显示小红点</button>
+  <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button>
-  <button type="primary" size="mini" bindtap="toggleDot('code', false)">隐藏小红点</button>
+  <button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
-  <button type="warn" size="mini" bindtap="magicButton">魔法按钮</button>
+  <text>调试信息：{{ debugText }}</text>
 </view>

weixin-miniprogram/pages/index/index.wxss

@@ -1 +1,24 @@
 /* pages/index/index.wxss */
+#menu-view {
+  display: flex;
+  text-align: center;
+  flex-wrap: wrap;
+  padding: 20px 10px;
+}
+
+.welcome-text {
+  display: block;
+  padding-left: 30px;
+  padding-top: 18px;
+  font-size: 20px;
+}
+
+.menu-item {
+  width: 25%;
+  margin: 10px 0;
+}
+
+.item-image {
+  width: 50px;
+  height: 50px;
+}

weixin-miniprogram/pages/index2/index.js

@@ -1,48 +0,0 @@
-// index.js
-// 获取应用实例
-const app = getApp()
-
-Page({
-  data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    canIUseGetUserProfile: false,
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
-  },
-  // 事件处理函数
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad() {
-    if (wx.getUserProfile) {
-      this.setData({
-        canIUseGetUserProfile: true
-      })
-    }
-  },
-  getUserProfile(e) {
-    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-    wx.getUserProfile({
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-      success: (res) => {
-        console.log(res)
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    })
-  },
-  getUserInfo(e) {
-    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
-    console.log(e)
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
-})

weixin-miniprogram/pages/index2/index.wxml

@@ -1,23 +0,0 @@
-<!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
-      <view class="userinfo-avatar" bindtap="bindViewTap">
-        <open-data type="userAvatarUrl"></open-data>
-      </view>
-      <open-data type="userNickName"></open-data>
-    </block>
-    <block wx:elif="{{!hasUserInfo}}">
-      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
-    </block>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
-</view>

weixin-miniprogram/pages/index2/index.wxss

@@ -1,19 +0,0 @@
-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
-}
-
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
-}
-
-.usermotto {
-  margin-top: 200px;
-}

weixin-miniprogram/pages/logs/logs.js

@@ -1,18 +0,0 @@
-// logs.js
-const util = require('../../utils/util.js')
-
-Page({
-  data: {
-    logs: []
-  },
-  onLoad() {
-    this.setData({
-      logs: (wx.getStorageSync('logs') || []).map(log => {
-        return {
-          date: util.formatTime(new Date(log)),
-          timeStamp: log
-        }
-      })
-    })
-  }
-})

weixin-miniprogram/pages/logs/logs.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "查看启动日志",
-  "usingComponents": {}
-}

weixin-miniprogram/pages/logs/logs.wxml

@@ -1,6 +0,0 @@
-<!--logs.wxml-->
-<view class="container log-list">
-  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
-    <text class="log-item">{{index + 1}}. {{log.date}}</text>
-  </block>
-</view>

weixin-miniprogram/pages/logs/logs.wxss

@@ -1,8 +0,0 @@
-.log-list {
-  display: flex;
-  flex-direction: column;
-  padding: 40rpx;
-}
-.log-item {
-  margin: 10rpx;
-}

weixin-miniprogram/pages/person/person.js

@@ -1,11 +1,26 @@
 // pages/person/person.js
+
+const {
+  user
+} = require("../../utils/const")
+
+const app = getApp()
+const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    avatarUrl: defaultAvatarUrl,
+    nickName: "请登录",
+    displayUserId: "",
+    menuList: [{
+      id: "logout",
+      color: 'red',
+      title: "退出登录",
+    }]
   },
 
   /**
@@ -26,7 +41,20 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow() {
-
+    let userInfo = wx.getStorageSync("userInfo")
+    if (!userInfo) {
+      console.log("用户未登录")
+      wx.redirectTo({
+        url: '/pages/index/login'
+      })
+      return
+    } else {
+      console.log("userInfo", userInfo)
+      this.setData({
+        nickName: userInfo.realname,
+        displayUserId: "用户名: " + userInfo.username,
+      })
+    }
   },
 
   /**
@@ -62,5 +90,37 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+
+  onChooseAvatar(e) {
+    this.setData({
+      avatarUrl: e.detail.avatarUrl,
+    })
+  },
+
+  onGetUserInfo(e) {
+    let userInfo = JSON.parse(e.detail.rawData)
+    console.log("e", userInfo)
+    this.setData({
+      avatarUrl: userInfo.avatarUrl,
+
+    })
+  },
+
+  menuTap: function (event) {
+    console.log("event.target", event.target)
+    let menuId = event.target.id
+    switch (menuId) {
+      case "logout":
+        wx.clearStorageSync()
+        app.globalData.userInfo = null
+        console.log("userInfo", wx.getStorageSync("userInfo"))
+        wx.redirectTo({
+          url: '/pages/index/login'
+        })
+        break
+      default:
+        break
+    }
   }
 })

weixin-miniprogram/pages/person/person.json

@@ -1,4 +1,6 @@
 {
   "usingComponents": {},
-  "navigationBarTitleText": "我"
+  "navigationBarTitleText": "个人中心",
+  "backgroundColor": "#000000",
+  "navigationStyle": "custom"
 }

weixin-miniprogram/pages/person/person.wxml

@@ -1,2 +1,27 @@
 <!--pages/person/person.wxml-->
-<text>pages/person/person.wxml</text>
+<view id="container">
+  <image class="top-image" src="../../image/user-center-bg-v1.png"></image>
+
+  <view class="content-wrapper">
+    <view class="cell-group user-profile">
+      <button class="avatar-selector" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <image class="avatar" src="{{avatarUrl}}"></image>
+      </button>
+      <view style="width: 100%;">
+        <text class="nickname">{{nickName}}</text>
+        <text style="font-size: 11px; color: grey;">
+          点击头像使用微信头像；{{displayUserId}}
+        </text>
+      </view>
+    </view>
+
+    <view class="cell-group">
+      <view class="cell" wx:for="{{ menuList }}" wx:for-item="menu" wx:key="id">
+        <view class="cell-item" id="{{ menu.id }}" bindtap="menuTap" style="{{ menu.color ? 'color:'+menu.color : '' }}">
+          {{ menu.title }}
+        </view>
+        <view class="cell-sept"></view>
+      </view>
+    </view>
+  </view>
+</view>

weixin-miniprogram/pages/person/person.wxss

@@ -1 +1,66 @@
 /* pages/person/person.wxss */
+#container {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #F5F5F5;
+  margin: 0;
+  padding: 0;
+  /* padding-top: 20px; */
+}
+
+.top-image {
+  width: 100vw;
+  height: 250px;
+  margin-bottom: -102px;
+  z-index: -100;
+  /* position: absolute; */
+}
+
+.cell-group {
+  background-color: #FFFFFF;
+  margin: 0 10px;
+  padding: 0;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  z-index: 100;
+  position: relative;
+}
+
+.user-profile {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  padding: 12px 20px;
+  place-items: center;
+  gap: 25px;
+}
+
+.user-profile .avatar-selector {
+  width: 64px;
+  height: 64px;
+  margin: 0;
+  padding: 0;
+}
+
+.user-profile .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.user-profile .nickname {
+  font-size: 18px;
+}
+
+.cell-item {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 20px;
+  font-size: 18px;
+}
+
+.cell-sept {
+  border-bottom: 1px rgb(170, 170, 170) solid;
+}
+
+.cell:nth-last-child(1) .cell-sept {
+  display: none;
+}

weixin-miniprogram/pages/residents/report.js

@@ -29,20 +29,21 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    console.log("residents/report onLoad")
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
-
+    console.log("residents/report onReady")
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
   onShow() {
+    console.log("residents/report onShow")
     if (this.data.isSkipOnShowFunc) {
       this.setData({
         isSkipOnShowFunc: false,
@@ -50,7 +51,6 @@ Page({
       return
     }
 
-    console.log('onShow')
     let userInfo = wx.getStorageSync("userInfo")
     console.log("userInfo", userInfo)
     this.setData({
@@ -121,14 +121,16 @@ Page({
    * 生命周期函数--监听页面隐藏
    */
   onHide() {
-
+    console.log("residents/report onHide")
+    clearInterval(this.data.timeInterval)
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
-
+    console.log("residents/report onUnload")
+    clearInterval(this.data.timeInterval)
   },
 
   /**
@@ -157,7 +159,6 @@ Page({
     this.setData({
       "formData.temperature": e.detail.value
     })
-
   },
 
   updateTime() {
@@ -171,15 +172,26 @@ Page({
     wx.showLoading({
       title: '正在获取权限'
     })
-    await new Promise((resolve) => {
+    await new Promise((resolve, reject) => {
       wx.getSetting({
         success(res) {
           wx.hideLoading()
           if (!res.authSetting['scope.userLocation']) {
             wx.authorize({
-              scope: 'scope.userLocationBackground',
+              scope: 'scope.userLocation',
+              // scope: 'scope.userLocationBackground',
               success() {
                 resolve();
+              },
+              fail(err) {
+                wx.showModal({
+                  title: '定位失败',
+                  content: '您已拒绝定位授权，小程序无法获取您的位置，请在微信首页长按删除小程序，重新打开再试',
+                  showCancel: false,
+                  complete: (res) => {
+                    reject();
+                  }
+                })
               }
             })
           } else {

weixin-miniprogram/pages/scan/entrance.wxml

@@ -1,4 +1,4 @@
 <!--pages/scan/entrance.wxml-->
 <view>
-  您将要进入社区
+  您将要进入社区：未知
 </view>

weixin-miniprogram/pages/shop/components/good-list-card.js

@@ -0,0 +1,37 @@
+// pages/shop/components/good-list-card.js
+Component({
+  // refer: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    goodinfo: {
+      type: Object,
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    displayGoodsInfo: "",
+    displayInfo: "",
+  },
+
+  observers: {
+    'goodinfo': function (goodinfo) {
+      console.log("observers -> goodinfo", goodinfo)
+      this.setData({
+        displayGoodsInfo: JSON.stringify(this.properties.goodinfo)
+      })
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

weixin-miniprogram/pages/shop/components/good-list-card.json

@@ -1,3 +1,4 @@
 {
+  "component": true,
   "usingComponents": {}
 }

weixin-miniprogram/pages/shop/components/good-list-card.wxml

@@ -0,0 +1,22 @@
+<!--pages/shop/components/good-list-card.wxml-->
+<view class="good-card-container">
+  <!-- <view class="good-card-image" style="background-image: url('../../../image/home.jpg');">
+  </view> -->
+  <view class="good-card-image" style="background-image: {{ 'url(' + goodinfo.picUrl + ');'}};">
+  </view>
+  <view class="good-card-info">
+    <text class="good-title line-wrap">{{ goodinfo.goodsName }}</text>
+    <view class="good-price good-price-counter">
+      <!-- 原价 -->
+      <view class="good-price-symbol">¥</view>
+      <view class="good-price-number">{{ goodinfo.counterPrice }}</view>
+    </view>
+    <view class="good-price good-price-retail">
+      <!-- 售价 -->
+      <view style="height:0.12em;" class="good-price-line"></view>
+      <view class="good-price-symbol">¥</view>
+      <view class="good-price-number">{{ goodinfo.retailPrice }}</view>
+    </view>
+    <!-- <text class="line-wrap">{{ displayGoodsInfo }}</text> -->
+  </view>
+</view>

weixin-miniprogram/pages/shop/components/good-list-card.wxss

@@ -0,0 +1,82 @@
+/* pages/shop/components/good-list-card.wxss */
+.good-card-container {
+  /* background-color: violet; */
+  overflow: hidden;
+  display: grid;
+  height: 200px;
+  grid-template-rows: auto 58px;
+}
+
+.good-card-image {
+  background-color: bisque;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.good-card-info {
+  padding: 4.5px 6px;
+}
+
+/* 自动换行 */
+.line-wrap {
+  width: 100%;
+  word-break: break-word;
+  display: block;
+}
+
+/* 商品标题 */
+.good-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 400;
+  height: 36rpx;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+  line-height: 36rpx;
+  margin: 4rpx 0;
+}
+
+/* 商品价格 */
+.good-price {
+  white-space: nowrap;
+  font-weight: 700;
+  margin: 0;
+  display: inline;
+  position: relative;
+}
+
+.good-price-counter {
+  color: #fa4126;
+  font-size: 36rpx;
+}
+
+.good-price-retail {
+  color: #bbbbbb;
+  font-size: 24rpx;
+  margin: 0 0 0 8rpx;
+}
+
+.good-price .good-price-symbol {
+  font-size: 24rpx;
+  display: inline;
+}
+
+.good-price .good-price-number {
+  display: inline;
+}
+
+.good-price .good-price-line {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  margin: 0;
+  background-color: currentColor;
+}

weixin-miniprogram/pages/shop/shop.js

@@ -0,0 +1,122 @@
+// pages/shop/shop.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    sidebarActiveId: -1,
+    sidebarList: [
+      {
+        id: -1,
+        title: "全部分类",
+      },
+      {
+        id: 1,
+        title: "1",
+      },
+      {
+        id: 2,
+        title: "防疫物资",
+      },
+      {
+        id: 3,
+        title: "111",
+      },
+      {
+        id: 4,
+        title: "111",
+      },
+      {
+        id: 5,
+        title: "111",
+      },
+    ],
+
+    tabbarList: [
+      {
+        id: 1,
+        goodsName: "温度计",
+        counterPrice: "10.00",
+        retailPrice: "12.00",
+        picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/gh-2b.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
+      },
+      {
+        id: 2,
+        goodsName: "医用口罩",
+        counterPrice: "100.00",
+        retailPrice: "12.50",
+        picUrl: "https://cdn-we-retail.ym.tencent.com/tsr/goods/muy-3a.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp",
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+
+  sidebarItemTap(event) {
+    // 清除原来的选中项，并设置新的选中项
+    // console.log("event.target", event.target)
+    // console.log("event.currentTarget", event.currentTarget)
+    let dataset = event.currentTarget.dataset
+    console.log("dataset", dataset)
+    this.setData({
+      sidebarActiveId: dataset.item.id,
+    })
+    return
+  }
+})

weixin-miniprogram/pages/shop/shop.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "listcard":"./components/good-list-card"
+  },
+  "navigationBarTitleText": "生活物资"
+}

weixin-miniprogram/pages/shop/shop.wxml

@@ -0,0 +1,17 @@
+<!--pages/shop/shop.wxml-->
+<view class="container">
+  <!-- sidebar -->
+  <view class="sidebar">
+    <view class="sidebar-item {{ cate.id == sidebarActiveId ? 'active' : 'deactive' }}" wx:for="{{sidebarList}}" wx:for-item="cate" wx:key="id" bindtap="sidebarItemTap" data-item="{{cate}}" data-item2="aaa">
+      <text class="sidebar-item-text">{{ cate.title }}</text>
+    </view>
+  </view>
+
+  <!-- tabbar -->
+  <view class="tabbar">
+    <view class="tabbar-group">
+      <listcard class="tabbar-item" wx:for="{{tabbarList}}" wx:for-item="item" wx:key="id" goodinfo="{{item}}" />
+    </view>
+    <view class="no-more">没有更多啦</view>
+  </view>
+</view>

weixin-miniprogram/pages/shop/shop.wxss

@@ -0,0 +1,71 @@
+/* pages/shop/shop.wxss */
+.container {
+  /* background-color: aqua; */
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+
+  display: grid;
+  grid-template-columns: 98px 1fr;
+  overflow-y: hidden;
+}
+
+.sidebar {
+  background-color: #e7e7e7;
+  display: grid;
+  grid-template-rows: repeat(auto-fill, 50px);
+  grid-auto-flow: row dense;
+  overflow-y: auto;
+}
+
+.sidebar-item {
+  background-color: #F5F5F5;
+  /* border-bottom: 1px solid rgb(121, 121, 121); */
+  height: 100%;
+  display: table;
+}
+
+.sidebar-item:last-child {
+  border-bottom: none;
+}
+
+.sidebar-item-text {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.sidebar-item.active {
+  background-color: white;
+  font-weight: bold;
+  color: #FF764E;
+  border-left: 4px solid #FF764E;
+}
+
+.tabbar {
+  overflow-y: auto;
+}
+
+.tabbar-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: repeat(auto-fill, 210px);
+  grid-auto-flow: row dense;
+  place-items: center;
+  gap: 3px 10px;
+  margin: 6px;
+}
+
+.tabbar-item {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 6px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
+}
+
+.no-more {
+  text-align: center;
+  color:grey;
+  margin: 20px;
+}

weixin-miniprogram/project.private.config.json

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

weixin-miniprogram/utils/menuList.js

@@ -1,5 +1,6 @@
 const switchTab = "switchTab";
 const navigateTo = "navigateTo";
+const redirectTo = "redirectTo";
 let id = 0;
 
 let menuItemDict = {
@@ -24,8 +25,15 @@ let menuItemDict = {
     switchFunc: switchTab,
     url: '/pages/residents/report'
   },
+  'shop': {
+    for: ['user'],
+    title: "生活物资",
+    image: "shopping.svg",
+    switchFunc: switchTab,
+    url: '/pages/shop/shop'
+  },
   'apply-record': {
-    for: ['visitor', 'user'],
+    for: ['visitor'],
     title: "申请记录",
     image: "apply.png",
     switchFunc: switchTab,
@@ -53,14 +61,14 @@ let menuItemDict = {
     url: ''
   },
   'feedback-submit': {
-    for: ['visitor', 'user'],
+    for: ['visitor'],
     title: "提交反馈",
     image: "fk.png",
     switchFunc: switchTab,
     url: ''
   },
   'feedback-list': {
-    for: ['visitor', 'user'],
+    for: ['visitor'],
     title: "反馈查看",
     image: "feedback.png",
     switchFunc: switchTab,
@@ -73,6 +81,13 @@ let menuItemDict = {
     switchFunc: switchTab,
     url: ''
   },
+  'person': {
+    for: ['admin', 'user'],
+    title: "个人中心",
+    image: "person.png",
+    switchFunc: switchTab,
+    url: '/pages/person/person'
+  },
   'update-password': {
     for: ['user', 'admin'],
     title: "密码修改",