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

2023-03-18 17:52:56 +08:00
parent 94a2dbf26d
commit ee7e2e9acb
33 changed files with 712 additions and 181 deletions
--- a/weixin-miniprogram/pages/index/index.js
+++ b/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),
-    })

-
-    console.log("menuItemDict", menuItemDict)
-    this.userInfo = wx.getStorageSync("userInfo")
-    this.displayUsername = this.userInfo?.username ?? "请登录"
-    if (!this.userInfo) {
+    let userInfo = wx.getStorageSync("userInfo")
+    if (!userInfo) {
      console.log("用户未登录")
      wx.redirectTo({
        url: '/pages/index/login'
@@ -35,13 +32,19 @@ Page({
      return
    } else {
      // 用户已登录
-      this.userGroup = getUserGroupByRole(this.userInfo.role)
-      this.debugObject = {
-        userGroup: this.userGroup
-      }
+      let userGroup = getUserGroupByRole(userInfo.role)
+      this.setData({
+        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)
-      // if (app.globalData.debugMode) {
-      //   wx.switchTab({
-      //     url: '/pages/residents/report'
-      //   })
-      //   return
-      // }
+      // 开发模式下自动跳转到指定页面，节省开发时间
+      console.log("app.globalData", app.globalData)
+      if (app.globalData.debugMode) {
+        wx.switchTab({
+          // url: '/pages/residents/report'
+          // url: '/pages/person/person'
+          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"
+    })
  }
 })
--- a/weixin-miniprogram/pages/index/index.wxml
+++ b/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="{ 'add-dot': menuItem.addDot }" style="display: inline-block;">
-        <image :src="'../../image/icon/' + menuItem.image" class="item-image" bindtap='switchTo(menuItem.switchFunc, menuItem.url)'></image>
+    <view class="menu-item" wx:for="{{ filterMenuItems }}" wx:for-item="menuItem" wx:key="id">
+      <view class="{{ menuItem.addDot ? 'add-dot' : '' }}" style="display: inline-block;">
+        <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('code', false)">隐藏小红点</button>
-  <button type="warn" size="mini" bindtap="magicButton">魔法按钮</button>
+  <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button>
+  <button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
+  <text>调试信息：{{ debugText }}</text>
 </view>
--- a/weixin-miniprogram/pages/index/index.wxss
+++ b/weixin-miniprogram/pages/index/index.wxss
@@ -1 +1,24 @@
-/* pages/index/index.wxss */
+/* 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;
+}
--- a/weixin-miniprogram/pages/index2/index.js
+++ b/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
-    })
-  }
-})
--- a/weixin-miniprogram/pages/index2/index.wxml
+++ b/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>
--- a/weixin-miniprogram/pages/index2/index.wxss
+++ b/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;
-}
--- a/weixin-miniprogram/pages/logs/logs.js
+++ b/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
-        }
-      })
-    })
-  }
-})
--- a/weixin-miniprogram/pages/logs/logs.json
+++ b/weixin-miniprogram/pages/logs/logs.json
@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "查看启动日志",
-  "usingComponents": {}
-}
--- a/weixin-miniprogram/pages/logs/logs.wxml
+++ b/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>
--- a/weixin-miniprogram/pages/logs/logs.wxss
+++ b/weixin-miniprogram/pages/logs/logs.wxss
@@ -1,8 +0,0 @@
-.log-list {
-  display: flex;
-  flex-direction: column;
-  padding: 40rpx;
-}
-.log-item {
-  margin: 10rpx;
-}
--- a/weixin-miniprogram/pages/person/person.js
+++ b/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
+    }
  }
-})
+})
--- a/weixin-miniprogram/pages/person/person.json
+++ b/weixin-miniprogram/pages/person/person.json
@@ -1,4 +1,6 @@
 {
  "usingComponents": {},
-  "navigationBarTitleText": "我"
+  "navigationBarTitleText": "个人中心",
+  "backgroundColor": "#000000",
+  "navigationStyle": "custom"
 }
--- a/weixin-miniprogram/pages/person/person.wxml
+++ b/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>
--- a/weixin-miniprogram/pages/person/person.wxss
+++ b/weixin-miniprogram/pages/person/person.wxss
@@ -1 +1,66 @@
-/* pages/person/person.wxss */
+/* 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;
+}
--- a/weixin-miniprogram/pages/residents/report.js
+++ b/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 {
--- a/weixin-miniprogram/pages/scan/entrance.wxml
+++ b/weixin-miniprogram/pages/scan/entrance.wxml
@@ -1,4 +1,4 @@
 <!--pages/scan/entrance.wxml-->
 <view>
-  您将要进入社区
+  您将要进入社区：未知
 </view>
--- a/weixin-miniprogram/pages/shop/components/good-list-card.js
+++ b/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: {
+
+  }
+})
--- a/weixin-miniprogram/pages/shop/components/good-list-card.json
+++ b/weixin-miniprogram/pages/shop/components/good-list-card.json
@@ -1,3 +1,4 @@
 {
+  "component": true,
  "usingComponents": {}
 }
--- a/weixin-miniprogram/pages/shop/components/good-list-card.wxml
+++ b/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>
--- a/weixin-miniprogram/pages/shop/components/good-list-card.wxss
+++ b/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;
+}
--- a/weixin-miniprogram/pages/shop/shop.js
+++ b/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
+  }
+})
--- a/weixin-miniprogram/pages/shop/shop.json
+++ b/weixin-miniprogram/pages/shop/shop.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "listcard":"./components/good-list-card"
+  },
+  "navigationBarTitleText": "生活物资"
+}
--- a/weixin-miniprogram/pages/shop/shop.wxml
+++ b/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>
--- a/weixin-miniprogram/pages/shop/shop.wxss
+++ b/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;
+}