首页搜索 对接猜你喜欢 和热门搜索接口 添加商品锚点 对接社区接口 后端有问题

src/api/client/community.js

@@ -0,0 +1,43 @@
+import { request } from '@/utils/request';
+
+/**
+ * 动态信息 - 查询列表
+ * @returns
+ */
+export function clientContentList(data) {
+  return request({
+    url: '/maintain/client/content/page',
+    method: 'get',
+	data:data,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+
+
+// // 动态评论 - 新增
+// export function addClientContent(data) {
+//   return request({
+//     url: `/maintain/client/content/add`,
+//     method: 'post',
+// 	data: data,
+//     header: {
+//       'Content-Type': 'application/json',
+//     },
+//   });
+// }
+
+// /**
+//  *@description 动态信息 - 获取动态详情
+//  */
+// export function getClientContentDetail() {
+//   return request({
+//     url: '/maintain/client/content/query',
+//     methods: get,
+//     header: {
+//       'content-type': 'application/x-www-form-urlencoded',
+//     },
+//   });
+// }
+

src/api/client/home.js

@@ -43,3 +43,42 @@ export function getCategoriesApi() {
     },
   });
 }
+
+
+// 热门搜索商家
+export function listHotMerchant(data) {
+  return request({
+    url: `/maintain/listHotMerchant/`,
+    method: 'post',
+	data: data,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+// 猜你喜欢的商家
+export function likeMerchant(data) {
+  return request({
+    url: `/maintain/likeMerchant/`,
+    method: 'post',
+	data: data,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+
+/**
+ *@description 热门搜索接口 - 添加用户点击埋点
+ */
+
+export function hotMerchant(id) {
+  return request({
+    url: `/maintain/hotMerchant/${id}`,
+    method: 'get',
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}

src/api/client/message.js

@@ -0,0 +1,29 @@
+import { request } from '@/utils/request';
+
+/**
+ *@description 动态评论 - 查询列表
+ */
+export function clientCommentList(data) {
+  return request({
+    url: '/maintain/client/comment/page',
+    methods: 'get',
+	data:data,
+    header: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+
+
+// 动态评论 - 新增
+export function addClientComment(data) {
+  return request({
+    url: `/maintain/client/comment/add`,
+    method: 'post',
+	data: data,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  });
+}
+

src/pages/client/clientPackage/search.vue

@@ -1,209 +1,235 @@
 <template>
-  <view class="search">
-    <view class="search-item">
-      <u-search v-model="search_text" :clearabled="true" @custom='handlerSearchBtn'/>
-	  <!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
-    </view>
-    <!-- 搜索历史 -->
-    <view class="history">
-      <view class="history-top">
-        <hotCom>搜索历史</hotCom>
-        <view class="history-right" @click="handlerAllSearchRecord">
-          <u-icon name="trash" />
-          <text>删除记录</text>
-        </view>
-      </view>
-      <view class="label">
-        <u-tag v-for="(item,index) of search_list" :key="index" :text="item.name" plain closable :show="close2" @close="handlerCloseSearchItem(item,index)" />
-      </view>
-    </view>
-
-    <!-- 热门搜索 -->
-    <view class="history">
-      <view class="history-top">
-        <text class="hotCom">热门搜索</text>
-      </view>
-      <view class="label">
-        <u-tag text="标签" class="label-item" v-for="item of 5"/>
-      </view>
-    </view>
-
-    <u-divider text="猜你喜欢"></u-divider>
-
-    <!-- 列表 -->
-    <view class="hot">
-      <Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
-      <view>
-        <view class="item-text">途虎养车洗车机(贵州省贵阳市云岩区)</view>
-        <view class="item-flex">
-          <view class="star">
-            <u-rate :count="count" v-model="value" />
-            <text class="line">|</text>
-          </view>
-          <view>989单</view>
-        </view>
-        <view class="address-flex">
-          <view>宝安中心区美容洗车</view>
-          <view>2.7km</view>
-        </view>
-      </view>
-    </view>
-  </view>
+	<view class="search">
+		<view class="search-item">
+			<u-search v-model="search_text" :clearabled="true" @custom='handlerSearchBtn' />
+			<!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
+		</view>
+		<!-- 搜索历史 -->
+		<view class="history">
+			<view class="history-top">
+				<hotCom>搜索历史</hotCom>
+				<view class="history-right" @click="handlerAllSearchRecord">
+					<u-icon name="trash" />
+					<text>删除记录</text>
+				</view>
+			</view>
+			<view class="label">
+				<u-tag v-for="(item,index) of search_list" :key="index" :text="item.name" plain closable :show="close2"
+					@close="handlerCloseSearchItem(item,index)" />
+			</view>
+		</view>
+
+		<!-- 热门搜索 -->
+		<view class="history">
+			<view class="history-top">
+				<text class="hotCom">热门搜索</text>
+			</view>
+			<view class="label">
+				<u-tag v-for="(item,index) in favourite_list" :text="item.name" class="label-item" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"/>
+			</view>
+		</view>
+
+		<u-divider text="猜你喜欢"></u-divider>
+
+		<!-- 列表 -->
+		<view class="popular-box">
+			<view class="hot" v-for="(item,index) of popular_search_list" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)">
+				<Image src="https://cdn.uviewui.com/uview/album/1.jpg"></Image>
+				<view>
+					<view class="item-text">{{ item.name }}</view>
+					<view class="item-flex">
+						<view class="star">
+							<u-rate :count="count" :value="item.score" readonly/>
+							<text class="line">|</text>
+						</view>
+						<view>{{ item.goodReview }}单</view>
+					</view>
+					<view class="address-flex">
+						<view>{{ item.address }}</view>
+						<view>2.7km</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      count: 5,
-      value: 4,
-      close2: true,
-      radios: [
-        {
-          checked: true,
-        },
-      ],
-      checkboxs: [
-        {
-          checked: true,
-        },
-      ],
-	  search_text:'',// 搜索text
-	  search_list:[],// 搜索列表
-    };
-  },
-  onShow() {
-	  if(uni.getStorageSync('searchItem')){
-		  this.search_list = uni.getStorageSync('searchItem')
-	  }
-  },
-  methods:{
-	  // 点击搜索按钮
-	  handlerSearchBtn(){
-		  if(!this.search_text){
-			  uni.showToast({
-			  	title:'请输入您要搜索的关键字',
-				icon:'none'
-			  })
-			  return 
-		  }else{
-			  let params = {
-			  			  name:this.search_text
-			  }
-			  this.search_list.push(params)
-			  uni.setStorageSync('searchItem',this.search_list)
-			  this.search_text = ''
-		  }
-	  },
-	  // 删除搜索记录按钮
-	  handlerCloseSearchItem(item,index){
-		this.search_list.splice(index,1)
-		uni.setStorageSync('searchItem',this.search_list)
-	  },
-	  // 删除所有搜索记录按钮
-	  handlerAllSearchRecord(){
-		uni.removeStorageSync('searchItem');
-		this.search_list = []
-	  }
-  }
-};
+	import { listHotMerchant,likeMerchant } from "@/api/client/home.js"
+	export default {
+		data() {
+			return {
+				count: 5,
+				value: 4,
+				close2: true,
+				radios: [{
+					checked: true,
+				}, ],
+				checkboxs: [{
+					checked: true,
+				}, ],
+				search_text: '', // 搜索text
+				search_list: [], // 搜索列表
+				
+				popular_search_list:[],//热门搜索列表
+				favourite_list:[] // 猜你喜欢列表
+			};
+		},
+		onShow() {
+			if (uni.getStorageSync('searchItem')) {
+				this.search_list = uni.getStorageSync('searchItem')
+			}
+		},
+		mounted() {
+			this.handlerInitList()
+		},
+		methods: {
+			// 初始化热门搜索 猜你喜欢列表
+			handlerInitList(){
+				listHotMerchant().then(res=>{
+					this.popular_search_list = res.data
+				})
+				
+				// 猜你喜欢列表
+				likeMerchant().then(res=>{
+					this.favourite_list = res.data
+				})
+			},
+			// 点击搜索按钮
+			handlerSearchBtn() {
+				if (!this.search_text) {
+					uni.showToast({
+						title: '请输入您要搜索的关键字',
+						icon: 'none'
+					})
+					return
+				} else {
+					let params = {
+						name: this.search_text
+					}
+					this.search_list.push(params)
+					uni.setStorageSync('searchItem', this.search_list)
+					this.search_text = ''
+				}
+			},
+			// 删除搜索记录按钮
+			handlerCloseSearchItem(item, index) {
+				this.search_list.splice(index, 1)
+				uni.setStorageSync('searchItem', this.search_list)
+			},
+			// 删除所有搜索记录按钮
+			handlerAllSearchRecord() {
+				uni.removeStorageSync('searchItem');
+				this.search_list = []
+			}
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
-.search {
-  min-height: 100vh;
-  background-color: #fff;
-}
-
-/* 搜索样式 */
-.search-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  background-color: #fff;
-  margin-bottom: 10rpx;
-  .search-btn{
-	  width: 160rpx;
-	  height: 70rpx;
-	  font-size: 28rpx;
-	  line-height: 70rpx;
-  }
-}
-
-/* 搜索历史样式 */
-.history {
-  padding: 30rpx;
-  margin-bottom: 10rpx;
-
-  .history-top {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 20rpx;
-
-    .history-right {
-      margin-top: 15rpx;
-      display: flex;
-      font-size: 12px;
-    }
-
-    hotCom {
-      font-size: 15px;
-      font-weight: bold;
-      color: #404045;
-    }
-  }
-}
-
-.label {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-// 列表
-.hot {
-  height: 220rpx;
-  background-color: #fff;
-  padding: 0 20rpx;
-  margin-bottom: 20rpx;
-  display: flex;
-  Image {
-    width: 120px;
-    height: calc(100% - 20rpx);
-    margin: 10rpx 20rpx 10rpx 0;
-  }
-  .item-text {
-    font-weight: bold;
-    margin: 10rpx 0 10rpx;
-    color: #333;
-  }
-  .item-flex {
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    margin: 0 20rpx 30rpx 0;
-    color: #0d0d0d66;
-    .star {
-      display: flex;
-      .line {
-        margin-left: 18rpx;
-        margin-top: 5rpx;
-        font-size: 24rpx;
-      }
-    }
-  }
-  .address-flex {
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-    color: #999;
-    margin-right: 20rpx;
-  }
-}
-
- ::v-deep view.data-v-1481d46d, scroll-view.data-v-1481d46d, swiper-item.data-v-1481d46d{
-	 margin: 0 4rpx;
- }
-</style>
+	.search {
+		min-height: 100vh;
+		background-color: #fff;
+	}
+
+	/* 搜索样式 */
+	.search-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 20rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		background-color: #fff;
+		margin-bottom: 10rpx;
+
+		.search-btn {
+			width: 160rpx;
+			height: 70rpx;
+			font-size: 28rpx;
+			line-height: 70rpx;
+		}
+	}
+
+	/* 搜索历史样式 */
+	.history {
+		padding: 30rpx;
+		margin-bottom: 10rpx;
+
+		.history-top {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 20rpx;
+
+			.history-right {
+				margin-top: 15rpx;
+				display: flex;
+				font-size: 12px;
+			}
+
+			hotCom {
+				font-size: 15px;
+				font-weight: bold;
+				color: #404045;
+			}
+		}
+	}
+
+	.label {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	// 列表
+	.hot {
+		height: 220rpx;
+		background-color: #fff;
+		padding: 0 20rpx;
+		margin-bottom: 20rpx;
+		display: flex;
+
+		Image {
+			width: 120px;
+			height: calc(100% - 20rpx);
+			margin: 10rpx 20rpx 10rpx 0;
+		}
+
+		.item-text {
+			font-weight: bold;
+			margin: 10rpx 0 10rpx;
+			color: #333;
+		}
+
+		.item-flex {
+			display: flex;
+			justify-content: space-between;
+			font-size: 14px;
+			margin: 0 20rpx 30rpx 0;
+			color: #0d0d0d66;
+
+			.star {
+				display: flex;
+
+				.line {
+					margin-left: 18rpx;
+					margin-top: 5rpx;
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		.address-flex {
+			display: flex;
+			justify-content: space-between;
+			font-size: 12px;
+			color: #999;
+			margin-right: 20rpx;
+		}
+	}
+
+	::v-deep view.data-v-1481d46d,
+	scroll-view.data-v-1481d46d,
+	swiper-item.data-v-1481d46d {
+		margin: 0 4rpx;
+	}
+</style>

src/pages/client/clientPackage/storeDetail.vue

@@ -113,13 +113,8 @@
 </template>
 
 <script>
-	import {
-		getSellsDetail,
-		addReservation
-	} from '@/api/client/business.js';
-	import {
-		getCurrentLocation
-	} from '@/api/client/home';
+	import { getSellsDetail, addReservation } from '@/api/client/business.js';
+	import { getCurrentLocation,hotMerchant } from '@/api/client/home';
 	export default {
 		data() {
 			return {
@@ -217,8 +212,9 @@
 					this.goods = res.data.goods;
 					this.swiperList = res.data.merchant.banners.map(h => h.url);
 				});
+				// 获取锚点
+				hotMerchant(this.queryParams.id).then()
 			},
-
 			// 点击拨打电话
 			handlerMakeCall() {
 				uni.makePhoneCall({

src/pages/client/tabBar/community.vue

@@ -1,116 +1,136 @@
 <template>
-  <view>
-    <!-- 关注和推荐 -->
-    <u-navbar :autoBack="true" leftIconSize="0">
-      <view slot="center">
-        <u-tabs :list="list" lineWidth="32" @change="tabChange" v-if="!player" />
-        <u-tabs
-          :list="list.filter(tab => tab.name !== '关注')"
-          lineWidth="32"
-          @change="tabChange"
-          v-else
-        />
-      </view>
-    </u-navbar>
+	<view>
+		<!-- 关注和推荐 -->
+		<u-navbar :autoBack="true" leftIconSize="0">
+			<view slot="center">
+				<u-tabs :list="list" lineWidth="32" @change="tabChange" v-if="!player" />
+				<u-tabs :list="list.filter(tab => tab.name !== '关注')" lineWidth="32" @change="tabChange" v-else />
+			</view>
+		</u-navbar>
 
-    <!-- 消息列表 -->
-    <view class="content" :style="{ marginTop: totalHeight + 'px' }">
-      <swiper class="swiper" style="height: 100vh" :duration="duration">
-        <swiper-item>
-          <scroll-view
-            scroll-y="true"
-            class="scroll-y"
-            @scrolltoupper="upper"
-            @scrolltolower="lower"
-            @scroll="scroll"
-          >
-            <view style="padding: 10rpx 20rpx; background-color: #ffffff">
-              <comment-list></comment-list>
-            </view>
-          </scroll-view>
-        </swiper-item>
+		<!-- 消息列表 -->
+		<view class="content" :style="{ marginTop: totalHeight + 'px' }">
+			<swiper class="swiper" style="height: 100vh" :duration="duration">
+				<swiper-item>
+					<scroll-view scroll-y="true" class="scroll-y" @scrolltoupper="upper" @scrolltolower="lower"
+						@scroll="scroll">
+						<view style="padding: 10rpx 20rpx; background-color: #ffffff">
+							<comment-list></comment-list>
+						</view>
+					</scroll-view>
+				</swiper-item>
 
-        <swiper-item>
-          <scroll-view scroll-y="true">
-            <view style="padding: 10rpx 20rpx">
-              <comment-list></comment-list>
-            </view>
-          </scroll-view>
-        </swiper-item>
-      </swiper>
-    </view>
-  </view>
+				<swiper-item>
+					<scroll-view scroll-y="true">
+						<view style="padding: 10rpx 20rpx">
+							<comment-list></comment-list>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
 </template>
 <script>
-import CommentList from '@/components/comment/CommentList.vue';
-export default {
-  components: {
-    CommentList,
-  },
-  data() {
-    return {
-      list: [{ name: '关注' }, { name: '推荐' }, { name: '广场' }],
-      duration: 700,
-      scrollTop: 0,
-      old: {
-        scrollTop: 0,
-      },
-      player: false,
-    };
-  },
+	import CommentList from '@/components/comment/CommentList.vue';
+	import { clientContentList } from "@/api/client/community.js"
+	export default {
+		components: {
+			CommentList,
+		},
+		data() {
+			return {
+				list: [{
+					name: '关注',
+					type:'ATTENTION'
+				}, {
+					name: '最新',
+					type:'LATEST'
+				}, {
+					name: '最热',
+					type:'HOTTEST'
+				}],
+				keyWord:'',
+				duration: 700,
+				scrollTop: 0,
+				old: {
+					scrollTop: 0,
+				},
+				player: false,
+			};
+		},
 
-  computed: {
-    totalHeight() {
-      return uni.getSystemInfoSync().statusBarHeight + 44;
-    },
-  },
+		computed: {
+			totalHeight() {
+				return uni.getSystemInfoSync().statusBarHeight + 44;
+			},
+		},
 
-  //点击tab时触发
-  onTabItemTap() {},
+		//点击tab时触发
+		onTabItemTap() {},
+		//页面加载触发
+		onLoad() {
+			
+		},
+		mounted() {
+			// let params = {
+			// 	keyWord:this.keyWord,
+			// 	type:'ATTENTION'
+			// }
+		},
+		onShow(){
+			this.handlerInitList()
+		},
+		methods: {
+			// 初始化社区列表
+			handlerInitList(){
+				let params = {
+					keyWord:'',
+					type:'ATTENTION'
+				}
+				clientContentList(params).then(res=>{
+					console.log('@@@res',res);
+				})
+			},
+			upper(e) {},
 
-  //页面加载触发
-  onLoad() {},
+			lower(e) {},
 
-  methods: {
-    upper(e) {},
+			scroll(e) {
+				this.old.scrollTop = e.detail.scrollTop;
+			},
 
-    lower(e) {},
+			//切换tab
+			tabChange(item) {
+				uni.showToast({
+					title: '提示的内容',
+					icon: '',
+				});
+			},
 
-    scroll(e) {
-      this.old.scrollTop = e.detail.scrollTop;
-    },
-
-    //切换tab
-    tabChange(item) {
-      uni.showToast({
-        title: '提示的内容',
-        icon: '',
-      });
-    },
-
-    goTop(e) {
-      this.scrollTop = this.old.scrollTop;
-      this.$nextTick(() => {
-        this.scrollTop = 0;
-      });
-      uni.showToast({
-        icon: 'none',
-        title: '纵向滚动 scrollTop 值已被修改为 0',
-      });
-    },
-  },
-};
+			goTop(e) {
+				this.scrollTop = this.old.scrollTop;
+				this.$nextTick(() => {
+					this.scrollTop = 0;
+				});
+				uni.showToast({
+					icon: 'none',
+					title: '纵向滚动 scrollTop 值已被修改为 0',
+				});
+			},
+		},
+	};
 </script>
 <style lang="scss" scoped>
-.scroll-y {
-  height: 100vh;
-}
+	.scroll-y {
+		height: 100vh;
+	}
 
-.search-item {
-  padding: 0 20rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  background-color: #ffffff;
-  margin-bottom: 10rpx;
-}
-</style>
+	.search-item {
+		padding: 0 20rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		background-color: #ffffff;
+		margin-bottom: 10rpx;
+	}
+</style>

src/pages/client/tabBar/message.vue

@@ -1,183 +1,180 @@
 <template>
-  <view>
-    <u-navbar :autoBack="true" leftIconSize="0">
-      <view slot="center">
-        <u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
-      </view>
-    </u-navbar>
-
-    <view :style="{ marginTop: totalHeight + 'px' }">
-      <view v-if="current == 0">
-        <view
-          class="orderList"
-          v-for="item in orderList"
-          :key="item.id"
-          @tap="$Router.push(item.url)"
-        >
-          <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>
-
-      <!-- 消息通知 -->
-      <view v-if="current == 1">
-        <view class="message" @click="notification">
-          <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>
-    </view>
-  </view>
+	<view>
+		<u-navbar :autoBack="true" leftIconSize="0">
+			<view slot="center">
+				<u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
+			</view>
+		</u-navbar>
+
+		<view :style="{ marginTop: totalHeight + 'px' }">
+			<view v-if="current == 0">
+				<!-- <view class="orderList" v-for="item in orderList" :key="item.id" @tap="$Router.push(item.url)"> -->
+				<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>
+
+			<!-- 消息通知 -->
+			<view v-if="current == 1">
+				<view class="message" @click="notification">
+					<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>
+		</view>
+	</view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      list: [
-        { id: 1, name: '系统通知' },
-        {
-          id: 2,
-          name: '消息通知',
-          badge: {
-            value: 5,
-          },
-        },
-      ],
-      current: 0,
-      orderList: [
-        {
-          id: '1',
-          img: '/static/images/home-select.png',
-          name: '订单通知',
-          text: '您的订单成功付款，感谢您的支持。',
-          url: '',
-        },
-        {
-          id: '2',
-          img: '/static/images/home-select.png',
-          name: '付款通知',
-          text: '您的订单成功付款，感谢您的支持。',
-          url: '',
-        },
-        {
-          id: '3',
-          img: '/static/images/home-select.png',
-          name: '评价通知',
-          text: '您的订单成功付款，感谢您的支持。',
-          url: '',
-        },
-        {
-          id: '4',
-          img: '/static/images/home-select.png',
-          name: '点赞回复',
-          text: '您的订单成功付款，感谢您的支持。',
-          url: '',
-        },
-        {
-          id: '5',
-          img: '/static/images/home-select.png',
-          name: '优惠福利',
-          text: '您的订单成功付款，感谢您的支持。',
-          url: '',
-        },
-      ],
-      type: 'warning',
-      value: 99999,
-      flag: true,
-    };
-  },
-  computed: {
-    totalHeight() {
-      return uni.getSystemInfoSync().statusBarHeight + 44;
-    },
-  },
-  methods: {
-    changeInfo(index) {
-      this.current = index.index;
-    },
-
-    notification() {
-      uni.navigateTo({
-        url: `/pages/client/clientPackage/chatRoom/chat`,
-      });
-    },
-  },
-};
+	export default {
+		data() {
+			return {
+				list: [{
+						id: 1,
+						name: '系统通知'
+					},
+					{
+						id: 2,
+						name: '消息通知',
+						badge: {
+							value: 5,
+						},
+					},
+				],
+				current: 0,
+				orderList: [{
+						id: '1',
+						img: '/static/images/home-select.png',
+						name: '订单通知',
+						text: '您的订单成功付款，感谢您的支持。',
+						url: '',
+					},
+					{
+						id: '2',
+						img: '/static/images/home-select.png',
+						name: '付款通知',
+						text: '您的订单成功付款，感谢您的支持。',
+						url: '',
+					},
+					{
+						id: '3',
+						img: '/static/images/home-select.png',
+						name: '评价通知',
+						text: '您的订单成功付款，感谢您的支持。',
+						url: '',
+					},
+					{
+						id: '4',
+						img: '/static/images/home-select.png',
+						name: '点赞回复',
+						text: '您的订单成功付款，感谢您的支持。',
+						url: '',
+					},
+					{
+						id: '5',
+						img: '/static/images/home-select.png',
+						name: '优惠福利',
+						text: '您的订单成功付款，感谢您的支持。',
+						url: '',
+					},
+				],
+				type: 'warning',
+				value: 99999,
+				flag: true,
+			};
+		},
+		computed: {
+			totalHeight() {
+				return uni.getSystemInfoSync().statusBarHeight + 44;
+			},
+		},
+		methods: {
+			changeInfo(index) {
+				this.current = index.index;
+			},
+
+			notification() {
+				uni.navigateTo({
+					url: `/pages/client/clientPackage/chatRoom/chat`,
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="scss" scoped>
-.messages {
-  min-height: 100vh;
-  background-color: #fff;
-}
-
-.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>
+	.messages {
+		min-height: 100vh;
+		background-color: #fff;
+	}
+
+	.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>