首页其他静态页面

src/business/classify/index.vue

@@ -0,0 +1,22 @@
+<!--
+ * @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>
+    分类
+  </view>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/business/detail/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="detail">
+    <view class="detailItem">
+      <u-swiper :list="list6" @change="changePage" :autoplay="false" indicatorStyle="right: 20px" class="swiper">
+      <view slot="indicator" class="indicator-num">
+        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
+      </view>
+    </u-swiper>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentNum: 0,
+      list6: [
+        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+      ]
+    }
+  },
+  methods: {
+    changePage(e){
+      // console.log(e);
+      this.currentNum = e.current
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+.indicator-num {
+  padding: 2px 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  border-radius: 100px;
+  width: 35px;
+  @include flex;
+  justify-content: center;
+
+  &__text {
+    color: #FFFFFF;
+    font-size: 12px;
+  }
+}
+.detailItem{
+  height: 400rpx;
+  background-color: pink;
+  .u-swiper__wrapper__item__wrapper__image.data-v-7b038a67{
+    height: 100%;
+  }
+}
+</style>

src/client/chooseCity/index copy.vue

@@ -0,0 +1,48 @@
+<template>
+  <view>
+    <u-search></u-search>
+    <u-index-list :index-list="indexList" class="text-pink-800">
+      <view v-for="(item, index) in list" :key="index">
+        <u-index-item class="text-pink-800">
+          <u-index-anchor :text="item.letter" />
+          <view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
+            {{ item1 }}
+          </view>
+        </u-index-item>
+      </view>
+    </u-index-list>
+  </view>
+</template>
+
+<script>
+import indexList from '@/data/citylist.json';
+const letterArr = indexList.map(val => {
+  return val.letter;
+});
+export default {
+  data() {
+    return {
+      scrollTop: 0,
+      indexList: letterArr,
+      list: indexList,
+    };
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list-cell {
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px 24rpx;
+  overflow: hidden;
+  color: #323233;
+  font-size: 14px;
+  line-height: 24px;
+  background-color: #fff;
+}
+</style>

src/client/chooseCity/index.vue

@@ -1,48 +1,71 @@
 <template>
-  <view>
-    <u-search></u-search>
-    <u-index-list :index-list="indexList" class="text-pink-800">
-      <view v-for="(item, index) in list" :key="index">
-        <u-index-item class="text-pink-800">
-          <u-index-anchor :text="item.letter" />
-          <view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
-            {{ item1 }}
-          </view>
-        </u-index-item>
-      </view>
-    </u-index-list>
+  <view class="chooseCity">
+    <!-- 地图 -->
+    <view class="map">地图</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 indexList from '@/data/citylist.json';
-const letterArr = indexList.map(val => {
-  return val.letter;
-});
 export default {
-  data() {
-    return {
-      scrollTop: 0,
-      indexList: letterArr,
-      list: indexList,
-    };
-  },
-  onPageScroll(e) {
-    this.scrollTop = e.scrollTop;
-  },
-};
+
+}
 </script>
 
 <style lang="scss" scoped>
-.list-cell {
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 10px 24rpx;
-  overflow: hidden;
-  color: #323233;
-  font-size: 14px;
-  line-height: 24px;
+.chooseCity {
   background-color: #fff;
+
+  .map {
+    width: 100%;
+    height: 600rpx;
+    text-align: center;
+    line-height: 600rpx;
+    background-color: pink;
+  }
+
+  .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>
+</style>

src/client/search/index.vue

@@ -0,0 +1,99 @@
+<!--
+ * @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">
+      <u-search :showAction="true" actionText="取消" />
+    </view>
+    <!-- 搜索历史 -->
+    <view class="history">
+      <view class="historyTop">
+        <h3>搜索历史</h3>
+        <view class="historyRight">
+          <i class="iconfont icon-sanjiaoxing1"></i>
+          <text>删除记录</text>
+        </view>
+      </view>
+      <view class="label">
+        <u-tag text="标签" class="labelItem" plain shape="circle"></u-tag>
+        <u-tag text="标签" plain shape="circle"></u-tag>
+        <u-tag text="标签" plain shape="circle"></u-tag>
+        <u-tag text="标签" plain shape="circle"></u-tag>
+        <u-tag text="标签" plain shape="circle"></u-tag>
+      </view>
+    </view>
+
+    <!-- 热门搜索 -->
+    <view class="history">
+      <view class="historyTop">
+        <h3>热门搜索</h3>
+      </view>
+      <view class="label">
+        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+        <u-tag text="标签" type="warning" shape="circle"></u-tag>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  height: 1400rpx;
+  background-color: #efefef;
+
+  .searchItem {
+    padding: 0 20rpx;
+    height: 90rpx;
+    line-height: 90rpx;
+    background-color: #fff;
+    margin-bottom: 60rpx;
+  }
+
+  /* 搜索历史 */
+  .history {
+    padding: 20rpx;
+    margin-bottom: 50rpx;
+
+    .historyTop {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20rpx;
+      .historyRight {
+        margin-top: 10rpx;
+        display: flex;
+        font-size:24rpx;
+        .icon-sanjiaoxing1{
+          margin: 5rpx 5rpx 0 0;
+          font-size: 26rpx; 
+        }
+      }
+      h3 {
+        font-size: 34rpx;
+        font-weight: bold;
+        color:#404045;
+      }
+    }
+    .label{
+      display: flex;
+      width: 120rpx;
+      .labelItem{
+        margin-right: 20rpx;
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -61,12 +61,25 @@
           "style": {
             "navigationBarTitleText": "个人中心"
           }
+        },
+        {
+          "path": "search/index",
+          "style": {
+            "navigationBarTitleText": "搜索"
+          }
         }
       ]
     },
     {
       "root": "business",
-      "pages": []
+      "pages": [
+        {
+          "path": "detail/index",
+          "style": {
+            "navigationBarTitleText": "商家详情"
+          }
+        }
+      ]
     }
   ],
   "tabBar": {

src/pages/home/index.vue

@@ -2,15 +2,18 @@
   <view class="home">
     <!-- 顶部导航 -->
     <view class="home-header">
-      <view class="home-address">
+      <view class="gotoAddress" @click="gotoAddress">
         <span>地址</span>
         <i class="iconfont icon-sanjiaoxing1"></i>
       </view>
-      <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword"></u-search>
+      <view class="searchItem" @click="gotoSearch">
+        <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
+      </view>
     </view>
+
     <!-- 轮播图 -->
     <view class="home-swiper">
-      <u-swiper :list="list" indicator @change="change" @click="click"></u-swiper>
+      <u-swiper :list="list" indicator @change="change" @click="click" />
     </view>
 
     <!-- 分类 -->
@@ -31,7 +34,7 @@
         <i class="iconfont icon-youjiantou"></i>
       </view>
       <div class="hotList">
-        <view class="hotItem">
+        <view class="hotItem" @click="gotoDetail">
           <view class="hotImage">图片</view>
           <view class="hotName">商家名称</view>
           <view class="hotName">具体位置</view>
@@ -60,7 +63,7 @@
         <h3>附近商家</h3>
         <i class="iconfont icon-youjiantou"></i>
       </view>
-      <div class="hotList">
+      <view class="hotList">
         <view class="hotItem">
           <view class="hotImage">图片</view>
           <view class="hotName">商家名称</view>
@@ -81,7 +84,7 @@
           <view class="hotName">商家名称</view>
           <view class="hotName">具体位置</view>
         </view>
-      </div>
+      </view>
     </view>
   </view>
 </template>
@@ -121,7 +124,25 @@ export default {
     };
   },
   methods: {
-    change() {},
+    // 跳转地址栏
+    gotoAddress() {
+      uni.navigateTo({
+        url: "/client/chooseCity/index",
+      })
+    },
+    // 跳转详情页
+    gotoSearch() {
+      uni.navigateTo({
+        url: "/client/search/index",
+      })
+    },
+    // 跳转详情页
+    gotoDetail(){
+      uni.navigateTo({
+        url: "/business/detail/index",
+      })
+    },
+    change() { },
     click(name) {
       this.$refs.uToast.success(`点击了第${name}个`);
     },
@@ -143,20 +164,18 @@ export default {
   padding: 0 20rpx;
   background-color: #347caf;
 
-  .home-address {
+  .gotoAddress {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    height: 90rpx;
-    line-height: 90rpx;
-    font-size: 32rpx;
-    text-align: center;
 
     .icon-sanjiaoxing1 {
       font-size: 24rpx;
       margin: 17rpx 10rpx 0 6rpx;
     }
   }
+  .searchItem{
+    flex: 1;
+  }
 }
 
 /* 轮播图 */
@@ -188,6 +207,7 @@ export default {
     margin: 25rpx 0;
     display: flex;
     justify-content: space-between;
+
     h3 {
       font-weight: bold;
     }