✨ feat(message、home): 页面

src/business/classify/index.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: yizhiyang
- * @LastEditors: yizhiyang
- * @Date: 2023-04-27 20:06:25
- * @LastEditTime: 2023-04-27 20:06:38
- * @FilePath: \chelvc-custom\src\business\classify\index.vue
--->
 <template>
   <view>
     分类

src/client/chooseCity/index copy 3.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="chooseCity">
+    <view class="map">
+			<view class="page-section page-section-gap">
+				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
+				</map>
+			</view>
+		</view>
+    <view class="nearsMap">附近地址</view>
+    <view class="city">
+      <view class="citeItem1">某某省某某市某某区某某</view>
+      <view class="citeItem2">某某省某某市</view>
+    </view>
+    <view class="city">
+      <view class="citeItem1">某某省某某市某某区某某</view>
+      <view class="citeItem2">某某省某某市</view>
+    </view>
+    <view class="city">
+      <view class="citeItem1">某某省某某市某某区某某</view>
+      <view class="citeItem2">某某省某某市</view>
+    </view>
+    <view class="city">
+      <view class="citeItem1">某某省某某市某某区某某</view>
+      <view class="citeItem2">某某省某某市</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getHomePage } from '@/api/home';
+export default {
+  data() {
+		return {
+			id:0, // 使用 marker点击事件 需要填写id
+			title: 'map',
+			latitude: 0,
+			longitude: 0,
+			covers: [{
+				latitude: 0,
+				longitude: 0,
+				iconPath: '../../../static/location.png'
+			}, {
+				latitude: 0,
+				longitude: 0,
+				iconPath: '../../../static/location.png'
+			}]
+		}
+	},
+	methods: {
+    onShow() {
+      uni.getLocation({
+        type: 'gcj02',
+        success: res => {
+          console.log('当前位置的经度：' + res.longitude);
+          console.log('当前位置的纬度：' + res.latitude);
+          this.location.longitude = res.longitude;
+          this.location.latitude = res.latitude;
+          this.$store.commit('SET_LOCATION', { longitude: res.longitude, latitude: res.latitude });
+          getHomePage(this.location)
+            .then(res => {
+              console.log(res);
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        },
+      });
+    },
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.chooseCity {
+  background-color: #fff;
+
+  .map {
+    width: 100%;
+    height: 600rpx;
+    text-align: center;
+    line-height: 600rpx;
+  }
+
+  .nearsMap {
+    font-size: 36rpx;
+    padding: 30rpx;
+    border-bottom: 2rpx solid #d9d9d9;
+  }
+
+  .city {
+    width: 100%;
+    height: 150rpx;
+    padding: 30rpx;
+    box-sizing: border-box;
+
+    .citeItem1 {
+      font-size: 34rpx;
+      color: #343434;
+      margin-bottom: 20rpx;
+    }
+
+    .citeItem2 {
+      font-size: 26rpx;
+      color: #999999;
+    }
+  }
+
+  .city:nth-of-type(2n) {
+    background-color: #efefef;
+  }
+}
+</style>

src/client/search/index.vue

@@ -1,10 +1,3 @@
-<!--
- * @Author: yizhiyang
- * @LastEditors: yizhiyang
- * @Date: 2023-04-27 13:18:45
- * @LastEditTime: 2023-04-27 18:28:58
- * @FilePath: \chelvc-custom\src\client\search\index.vue
--->
 <template>
   <view class="search">
     <view class="searchItem">

src/pages.json

@@ -107,20 +107,28 @@
     "backgroundColor": "#ffffff",
     "list": [
       {
+        "text": "首页",
         "pagePath": "pages/home/index",
-        "text": "首页"
+        "iconPath": "static/images/home.png",
+        "selectedIconPath": "static/images/home-select.png"
       },
       {
         "pagePath": "pages/community/index",
-        "text": "社区"
+        "text": "社区",
+        "iconPath": "static/images/community.png",
+        "selectedIconPath": "static/images/community-select.png"
       },
       {
         "pagePath": "pages/message/index",
-        "text": "消息"
+        "text": "消息",
+        "iconPath": "static/images/message.png",
+        "selectedIconPath": "static/images/message-select.png"
       },
       {
         "pagePath": "pages/mine/index",
-        "text": "我的"
+        "text": "我的",
+        "iconPath": "static/images/mine.png",
+        "selectedIconPath": "static/images/mine-select.png"
       }
     ]
   },

src/pages/community/index copy.vue

@@ -0,0 +1,197 @@
+<template>
+  <view>
+    <view class="top-nav">
+      <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change" />
+      <u-icon name="search" size="25" @click="searchTop"></u-icon>
+    </view>
+    <view>
+      <view class="album">
+        <view class="album__avatar">
+          <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
+        </view>
+        <view class="album__content">
+          <u--text :text="niackName" bold size="17"></u--text>
+          <u--text
+            margin="0 0 8px 0"
+            style="padding-top: 7px"
+            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+          >
+          </u--text>
+          <u-album :urls="urls2"></u-album>
+        </view>
+      </view>
+      <view class="reply-info">
+        <view class="reply-left">
+          <u-icon name="red-packet" size="30px"></u-icon>
+          <u--text :text="followNum" size="22px"></u--text>
+        </view>
+        <view class="reply-right">
+          <u-icon name="thumb-up-fill" size="30px"></u-icon>
+          <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
+          <u-icon name="share-fill" size="30px"></u-icon>
+        </view>
+      </view>
+    </view>
+    <view v-if="showAllCom">
+      <view class="all-comments">
+        <view>
+          <u--text sizi="15px" text="全部评论"> </u--text>
+        </view>
+        <view class="comment-order">
+          <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent" @change="changeCom"></u-subsection>
+        </view>
+      </view>
+      <view class="album">
+        <view class="album__avatar">
+          <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
+        </view>
+        <view class="album__content">
+          <u--text :text="niackName" bold size="17"></u--text>
+          <u--text
+            margin="0 0 8px 0"
+            style="padding-top: 9px"
+            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+          >
+          </u--text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [{ name: '关注' }, { name: '推荐' }],
+      current: 0,
+      subsectionListCurrent: 0,
+      subsectionList: ['最新', '推荐'],
+      isAllReply: true,
+      showAllCom: false,
+      searching: false,
+      isSearch: true,
+      followNum: 111111,
+      urls2: [
+        'https://cdn.uviewui.com/uview/album/1.jpg',
+        'https://cdn.uviewui.com/uview/album/2.jpg',
+        'https://cdn.uviewui.com/uview/album/3.jpg',
+        'https://cdn.uviewui.com/uview/album/4.jpg',
+        'https://cdn.uviewui.com/uview/album/5.jpg',
+        'https://cdn.uviewui.com/uview/album/6.jpg',
+        'https://cdn.uviewui.com/uview/album/7.jpg',
+        'https://cdn.uviewui.com/uview/album/8.jpg',
+        'https://cdn.uviewui.com/uview/album/9.jpg',
+        'https://cdn.uviewui.com/uview/album/10.jpg',
+      ],
+      niackName: '昵称昵称昵称',
+      followInfo: '昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称昵称',
+      keyword: '123',
+      searchCon: '',
+      src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+    };
+  },
+  methods: {
+    change(index) {
+      this.current = index;
+    },
+    backTop() {
+      this.isAllReply = true;
+      this.showAllCom = true;
+    },
+    searchTop() {
+      // this.isSearch = false;
+      // this.searching = true;
+      uni.navigateTo({
+        url: '/client/CommunitySearch/index',
+      });
+    },
+    allReply() {
+      uni.navigateTo({
+        url: '/client/allComments/index',
+      });
+    },
+    changeCom(index) {
+      this.subsectionListCurrent = index;
+    },
+    getFocus() {},
+    cancelSearch() {
+      this.isSearch = true;
+      this.searching = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.top-nav {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav-left {
+  display: flex;
+}
+
+.left-text {
+  font-size: 15px;
+  padding-top: 22%;
+  padding-left: 5px;
+}
+
+.album {
+  display: flex;
+}
+
+.album__avatar {
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.album__content {
+  margin-left: 10px;
+  flex: 1;
+}
+
+.reply-info {
+  margin-top: 15px;
+  margin-left: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.reply-left {
+  display: flex;
+}
+
+.reply-right {
+  display: flex;
+}
+
+.all-comments {
+  margin: 15px 0 10px 12px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-order {
+  width: 100px;
+}
+
+.comment-order .u-subsection__item {
+  display: flex;
+  justify-content: center;
+}
+
+.comment-order .u-subsection--button {
+  border: 0.2px solid;
+  border-radius: 55px;
+}
+.search-content {
+  display: flex;
+}
+.search-tags {
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/pages/community/index.vue

@@ -1,64 +1,69 @@
 <template>
   <view>
+    <u-search :showAction="true" actionText="取消"/>
+    <!-- tab表格 -->
+    <!-- <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change" /> -->
+    <u-tabs :list="list" lineWidth="40" lineColor="#5992bb" :is-scroll="false" :current="current" @change="change"
+      :activeStyle="{
+        color: '#303133',
+        fontWeight: 'bold',
+        transform: 'scale(1.05)',
+      }"
+      :inactiveStyle="{
+        color: '#606266',
+        transform: 'scale(1)',
+      }"
+      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+    />
     <view>
-      <view class="top-nav">
-        <view class="nav-left" @click="backTop">
-          <u-icon name="arrow-left"></u-icon>
-          <view class="left-text">返回</view>
+      <view class="album">
+        <view class="album__avatar">
+          <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
+        </view>
+        <view class="album__content">
+          <u--text :text="niackName" bold size="17"></u--text>
+          <u--text
+            margin="0 0 8px 0"
+            style="padding-top: 7px"
+            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+          >
+          </u--text>
+          <u-album :urls="urls2"></u-album>
+        </view>
+      </view>
+      <view class="reply-info">
+        <view class="reply-left">
+          <u-icon name="red-packet" size="30px"></u-icon>
+          <u--text :text="followNum" size="22px"></u--text>
+        </view>
+        <view class="reply-right">
+          <u-icon name="thumb-up-fill" size="30px"></u-icon>
+          <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
+          <u-icon name="share-fill" size="30px"></u-icon>
         </view>
-        <u-tabs v-if="isAllReply" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
-        <u-icon name="search" size="25" @click="searchTop"></u-icon>
       </view>
-      <view>
-        <view class="album">
-          <view class="album__avatar">
-            <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
-          </view>
-          <view class="album__content">
-            <u--text :text="niackName" bold size="17"></u--text>
-            <u--text
-              margin="0 0 8px 0"
-              style="padding-top: 7px"
-              text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
-            >
-            </u--text>
-            <u-album :urls="urls2"></u-album>
-          </view>
+    </view>
+    <view v-if="showAllCom">
+      <view class="all-comments">
+        <view>
+          <u--text size="15px" text="全部评论"> </u--text>
         </view>
-        <view class="reply-info">
-          <view class="reply-left">
-            <u-icon name="red-packet" size="30px"></u-icon>
-            <u--text :text="followNum" size="22px"></u--text>
-          </view>
-          <view class="reply-right">
-            <u-icon name="thumb-up-fill" size="30px"></u-icon>
-            <u-icon name="chat-fill" size="30px" @click="allReply"></u-icon>
-            <u-icon name="share-fill" size="30px"></u-icon>
-          </view>
+        <view class="comment-order">
+          <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent" @change="changeCom"></u-subsection>
         </view>
       </view>
-      <view v-if="showAllCom">
-        <view class="all-comments">
-          <view>
-            <u--text sizi="15px" text="全部评论"> </u--text>
-          </view>
-          <view class="comment-order">
-            <u-subsection fontSize="15px" :list="subsectionList" :current="subsectionListCurrent" @change="changeCom"></u-subsection>
-          </view>
+      <view class="album">
+        <view class="album__avatar">
+          <image src="/static/logo.png" style="width: 32px; height: 32px"></image>
         </view>
-        <view class="album">
-          <view class="album__avatar">
-            <image src="/static/uview/common/logo.png" style="width: 32px; height: 32px"></image>
-          </view>
-          <view class="album__content">
-            <u--text :text="niackName" bold size="17"></u--text>
-            <u--text
-              margin="0 0 8px 0"
-              style="padding-top: 9px"
-              text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
-            >
-            </u--text>
-          </view>
+        <view class="album__content">
+          <u--text :text="niackName" bold size="17"></u--text>
+          <u--text
+            margin="0 0 8px 0"
+            style="padding-top: 9px"
+            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+          >
+          </u--text>
         </view>
       </view>
     </view>
@@ -68,14 +73,7 @@
 export default {
   data() {
     return {
-      list: [
-        {
-          name: '关注',
-        },
-        {
-          name: '推荐',
-        },
-      ],
+      list: [{ name: '关注' }, { name: '推荐' }],
       current: 0,
       subsectionListCurrent: 0,
       subsectionList: ['最新', '推荐'],
@@ -115,13 +113,13 @@ export default {
       // this.isSearch = false;
       // this.searching = true;
       uni.navigateTo({
-        url: "/client/CommunitySearch/index",
-      })
+        url: '/client/CommunitySearch/index',
+      });
     },
     allReply() {
       uni.navigateTo({
-        url: "/client/allComments/index",
-      })
+        url: '/client/allComments/index',
+      });
     },
     changeCom(index) {
       this.subsectionListCurrent = index;

src/pages/message/index.vue

@@ -1,9 +1,143 @@
 <template>
-  <view> message </view>
+  <view>
+    <u-tabs
+      :list="list"
+      lineWidth="60"
+      lineColor="#5992bb"
+      :activeStyle="{
+        color: '#303133',
+        fontWeight: 'bold',
+        transform: 'scale(1.05)',
+      }"
+      :inactiveStyle="{
+        color: '#606266',
+        transform: 'scale(1)',
+      }"
+      itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+      @click="change"
+    />
+    <!-- 系统通知 -->
+    <view class="orderList" v-for="item in orderList" :key="item.id">
+      <image :src="item.img" style="width: 40px; height: 40px" />
+      <view class="orderItem">
+        <view class="order1">{{ item.name }}</view>
+        <view class="order2">{{ item.text }}</view>
+      </view>
+      <u-icon name="arrow-right"></u-icon>
+    </view>
+    <!-- 消息通知 -->
+    <view class="message">
+      <image src="/static/images/home-select.png" style="width: 40px; height: 40px" />
+      <view class="business">
+        <view class="businessItem">商家</view>
+        <view class="messages">您好，请问有什么需要帮助的吗？</view>
+      </view>
+      <view class="time">
+        <view class="timeItem">17:00</view>
+        <u-badge numberType="overflow" :type="type" max="99" :value="value" />
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      list: [{ name: '系统通知' }, { name: '消息通知' }],
+      orderList: [
+        {
+          id: '1',
+          img: '/static/images/home-select.png',
+          name: '订单通知',
+          text: '您的订单成功付款，感谢您的支持。',
+        },
+        {
+          id: '2',
+          img: '/static/images/home-select.png',
+          name: '付款通知',
+          text: '您的订单成功付款，感谢您的支持。',
+        },
+        {
+          id: '3',
+          img: '/static/images/home-select.png',
+          name: '评价通知',
+          text: '您的订单成功付款，感谢您的支持。',
+        },
+        {
+          id: '4',
+          img: '/static/images/home-select.png',
+          name: '点赞回复',
+          text: '您的订单成功付款，感谢您的支持。',
+        },
+        {
+          id: '5',
+          img: '/static/images/home-select.png',
+          name: '优惠福利',
+          text: '您的订单成功付款，感谢您的支持。',
+        },
+      ],
+      type:"warning",
+			value:99999,
+      flag: true,
+    };
+  },
+  methods: {
+    change(e){
+      console.log('-----------', e);
+    }
+  },
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.orderList {
+  display: flex;
+  padding: 30rpx;
+  justify-content: space-between;
+
+  image {
+    margin-right: 10rpx;
+  }
+  .orderItem {
+    flex: 1;
+    .order1 {
+      font-size: 16px;
+      margin-bottom: 10rpx;
+      color: #232323;
+    }
+    .order2 {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  }
+}
+.message {
+  display: flex;
+  padding: 30rpx;
+  justify-content: space-between;
+
+  image {
+    margin-right: 10rpx;
+  }
+  .business {
+    flex: 1;
+    .businessItem {
+      font-size: 16px;
+      margin-bottom: 10rpx;
+      color: #232323;
+    }
+    .messages {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  }
+  .time{
+    .timeItem{
+      color: #9ca3af;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>