主页

wxmp/bin/pages.js

@@ -6,7 +6,6 @@ const start = () => {
     easycom: {
       autoscan: true,
       custom: {
-        "^(Ai|V)(.*)": "@/components/$1$2.vue",
         "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
       }
     },
@@ -20,7 +19,7 @@ const start = () => {
     globalStyle: {
       pageOrientation: "auto",
       navigationBarTextStyle: "white",
-      navigationBarBackgroundColor: "#4181FF"
+      navigationBarBackgroundColor: "#92ACD1"
     }
   }
   Promise.all([

wxmp/src/App.vue

@@ -10,8 +10,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "uni";
+@import "uni.scss";
 /*每个页面公共css */
+
 @each $padMar, $pm in (mar:margin, pad:padding) {
   @each $v in (8, 10, 16, 20, 32, 48, 64) {
     @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
@@ -35,9 +36,20 @@ export default {
   }
 }
 
+@each $where in (sticky, fixed) {
+  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+    .#{$where}-#{$pos} {
+      position: fixed;
+      #{$p}: 0;
+      z-index: 202301031019;
+      width: 100%;
+    }
+  }
+}
+
+
 .flex {
   display: flex;
-  align-items: center;
 
   &.spb {
     justify-content: space-between;
@@ -54,6 +66,10 @@ export default {
   &.start {
     align-items: flex-start;
   }
+
+  &.center {
+    align-items: center;
+  }
 }
 
 .fill {

wxmp/src/components/AiGap.vue

@@ -0,0 +1,29 @@
+<template>
+  <section class="AiGap" :style="{height,width}"/>
+</template>
+
+<script>
+export default {
+  name: "AiGap",
+  props: {
+    h: {default: 30},
+    w: {default: '100%'}
+  },
+  computed: {
+    height() {
+      let {h} = this
+      return /\d/.test(h) ? `${h}px` : h
+    },
+    width() {
+      let {w} = this
+      return /\d/.test(w) ? `${w}px` : w
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiGap {
+  flex-shrink: 0;
+}
+</style>

wxmp/src/components/AiGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AiGroup" :class="{noBorder,description}" :style="{paddingLeft:left+'rpx'}">
-    <div class="groupHeader" v-if="title" v-text="title"/>
+    <div class="groupHeader" v-if="title">{{ title }}</div>
     <slot/>
   </section>
 </template>

wxmp/src/components/AiItem.vue

@@ -2,22 +2,22 @@
   <section class="AiItem" :class="{border,readonly}">
     <div v-if="topLabel" class="topLabel">
       <div class="labelPane flex">
-        <div class="label" :class="{required,labelBold}" :style="{color}" v-text="label"/>
+        <div class="label" :class="{required,labelBold}" :style="{color}" v-html="label"/>
         <slot name="sub" v-if="$slots.sub"/>
       </div>
       <div class="itemContent">
         <slot v-if="$slots.default"/>
-        <div v-else v-text="value"/>
+        <div v-else v-html="value"/>
       </div>
     </div>
     <div v-else class="normal flex">
       <div class="fill flex">
-        <div class="label" :class="{required,labelBold}" :style="{color}" v-text="label"/>
+        <div class="label" :class="{required,labelBold}" :style="{color}" v-html="label"/>
         <slot name="sub" v-if="$slots.sub"/>
       </div>
       <div class="flexContent">
         <slot v-if="$slots.default"/>
-        <div v-else v-text="value"/>
+        <div v-else v-html="value"/>
       </div>
     </div>
   </section>

wxmp/src/components/AiTabs.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="AiTabs" :class="{white,vertical}" :style="{background}">
+    <div class="item" :class="{active:modelValue==i}" v-for="(item, i) in tabs" :key="i"
+         @click="handleClick(item,i)">{{ getLabel(item) }}
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiTabs",
+  props: {
+    modelValue: {default: ""},
+    tabs: {default: () => []},
+    background: {default: ""},
+    white: Boolean,
+    vertical: Boolean,
+  },
+  methods: {
+    getLabel(item) {
+      return item?.label || item
+    },
+    handleClick(item, index) {
+      this.$emit("update:modelValue", index)
+      this.$emit("click", item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTabs {
+  width: 100vw;
+  height: 48px;
+  line-height: 48px;
+  background: $uni-color-primary;
+  display: flex;
+
+  &.vertical {
+    flex-direction: column;
+    width: 80px !important;
+    flex-shrink: 0;
+    height: 100%;
+    background: transparent;
+    border-right: 1px solid #f8f8f8;
+
+    .item {
+      line-height: 36px;
+      height: 36px;
+      flex: 0;
+
+      &.active {
+        font-weight: bold;
+        color: $uni-color-primary;
+
+        &:after {
+          bottom: unset;
+          right: 4px;
+          width: 4px;
+          height: 18px;
+          left: unset;
+          top: 50%;
+          transform: translateY(-50%);
+          background: $uni-color-primary;
+        }
+      }
+    }
+  }
+
+  .item {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+
+    &.active {
+      color: #fff;
+      font-weight: 500;
+      position: relative;
+
+      &:after {
+        content: unset;
+      }
+    }
+  }
+
+  &.white {
+    background: #fff;
+
+    .item {
+      color: #666;
+
+      &.active {
+        color: #000;
+        font-weight: bold;
+
+        &:after {
+          background: #3399FF;
+        }
+      }
+    }
+  }
+}
+</style>

wxmp/src/mods/AppSearch/AppSearch.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="AppSearch">
+
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppSearch",
+  appName: "全局搜索",
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppSearch {
+}
+</style>

wxmp/src/pages/home.vue

@@ -1,31 +1,49 @@
 <template>
   <section class="home">
-    <div class="flex pad-h16 pad-v8">
+    <uni-search-bar class="sticky-t" placeholder="搜索商品" cancelText="更多" @cancel="" radius="100" @input="handleSearch"/>
-      <open-data class="avatar circle shrink" type="userAvatarUrl"/>
+    <ai-tabs class="fixedTabs" :tabs="indexList" vertical v-model="currentType" @click="handleType"/>
-      <open-data class="mar-l16 fill" type="userNickName"/>
+    <div class="pad-l64">
-      <div class="btn">个人中心</div>
+
     </div>
-    <ai-bottom>
+    <ai-gap h="50"/>
-      <div class="btn">个人中心</div>
+    <uni-goods-nav class="fixed-b" @click="handleGoodNav"/>
-    </ai-bottom>
   </section>
 </template>
 
 <script>
-import AiBottom from "../components/AiBottom";
+import AiTabs from "../components/AiTabs";
+import AiGap from "../components/AiGap";
 
 export default {
   name: "home",
-  components: {AiBottom},
+  components: {AiGap, AiTabs},
   data() {
-    return {}
+    return {
+      indexList: ["全部", "螺丝", "螺母", "平垫", "弹垫", "钢丝绳", "铆钉", "工具", "劳保", "其他"],
+      currentType: 0,
+      list: []
+    }
   },
   methods: {
+    getList() {
+
+    },
     handleGoodNav() {
 
+    },
+    handleType() {
+    },
+    handleSearch() {
+
     }
   },
-  created() {
+  onShow() {
+    this.current = 1
+    this.getList()
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
   }
 }
 </script>
@@ -33,5 +51,13 @@ export default {
 <style lang="scss" scoped>
 .home {
   height: 100vh;
+
+  .fixedTabs {
+    position: fixed;
+    top: 50px;
+    height: calc(100vh - 100px);
+    overflow-y: auto;
+    font-size: 12px;
+  }
 }
 </style>

wxmp/src/uni.scss

@@ -15,7 +15,7 @@
 /* 颜色变量 */
 
 /* 行为相关颜色 */
-$uni-color-primary: #007aff;
+$uni-color-primary: #92ACD1;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;