上传文件至 'hangout-master/asset/components/message'

hangout-master/asset/components/message/message.js

@@ -0,0 +1,75 @@
+// components/message/message.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        list : [{
+            text:"饮食",
+            iconPath:"/asset/img/icon-eat.png",
+        },{
+            text:"娱乐",
+            iconPath:"/asset/img/icon-play.png"
+        },{
+            text:"交通",
+            iconPath:"/asset/img/icon-info.png"
+        },{
+            text:"天气",
+            iconPath:"/asset/img/icon-weather.png"
+        },{
+            text:"防疫政策",
+            iconPath:"/asset/img/icon-virus.png"
+        }]
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onRet: function () {
+            wx.reLaunch({
+              url: "/Pages/travel/home/home",
+            });
+          },
+
+        switchPage : function(e){
+            switch (e.currentTarget.id) {
+                case '0':
+                    wx.redirectTo({
+                      url: '/Pages/travel/preparation/message/eat/eat',
+                    })
+                    break;
+                case '1':
+                    wx.redirectTo({
+                        url: '/Pages/travel/preparation/message/play/play',
+                      })
+                    break
+                case '2':
+                    wx.redirectTo({
+                        url: '/Pages/travel/preparation/message/travel/travel',
+                      })
+                    break
+                case '3':
+                    wx.redirectTo({
+                        url: '/Pages/travel/preparation/message/weather/weather',
+                      })
+                    break
+                case '4':
+                    wx.redirectTo({
+                        url: '/Pages/travel/preparation/message/epidemic/epidemic',
+                      })
+                    break
+                default:
+                    break;
+            }
+        }
+    }
+})

hangout-master/asset/components/message/message.json

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

hangout-master/asset/components/message/message.wxml

@@ -0,0 +1,19 @@
+<!--components/message/message.wxml-->
+<!--下面就是button的跳转了，不知道跳到哪里去呢，函数写了一个笨笨的switch，应该写一个跳转语句就可以？-->
+<view style="display: flex;">
+    <image class="navi" src="/asset/img/navi.png" bindtap="onRet"></image>
+
+    <view style="padding: 0;margin: 0;width: 1px;height:700px;background-color:  #7B8B6F;"></view>
+
+    <view style="display: block">
+        <view class="title">当地信息</view>
+
+        <view wx:for="{{list}}" wx:for-item="item" style="display: flex;" wx:for-index="idx">
+            <view class="icon">
+                <image src="{{item.iconPath}}" class="icon-image"  mode="heightFix"></image>
+                <text class="icon-text" bindtap="switchPage" id="{{idx}}">{{item.text}}</text>
+                <button class="icon-button" bindtap="switchPage" id="{{idx}}">></button>
+            </view>
+        </view>
+    </view>
+</view>

hangout-master/asset/components/message/message.wxss

@@ -0,0 +1,57 @@
+/* components/message/message.wxss */
+.navi {
+  width: 40px;
+  height: 30px;
+  margin: 5px;
+  padding-top: 10px;
+}
+
+.title {
+  position: relative;
+  top: 20px;
+  left: 15px;
+  font-size: 22px;
+  font-weight: 900;
+  color: #000;
+}
+
+.icon {
+  position: relative;
+  top: 10vh;
+  padding: 5vw;
+  width: 40%;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  flex: 1;
+  flex-direction: column;
+}
+
+.icon-image {
+  height: 40px;
+  width: 40px;
+  justify-content: center;
+  align-items: center;
+  float: left;
+  padding: 5px;
+}
+
+.icon-text {
+  padding: 0;
+  margin-inline: 10vw;
+  position: relative;
+  top: 2vh;
+  font-weight: bolder;
+  font-size: 22px;
+  text-align: center;
+}
+.icon-button {
+  float: right;
+  font-size: large;
+  font-weight: 600;
+  color: #7b8b6f;
+  margin-right: 5vw;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+}