页面

package_sub/pages/AddOrder/AddOrder.vue

@@ -97,7 +97,7 @@
           :error-type="['toast']"
         >
           <view class="form-card form-card-1">
-            <u-form-item label="就诊医院" prop="hospital" required>
+            <u-form-item label="就诊医院" prop="hospital" required v-if="form.type == 1">
               <u-input
                 :type="!!orderId ? 'input' : 'select'"
                 placeholder="请选择就诊医院"
@@ -141,6 +141,13 @@
                 </u-radio-group>
               </view>
             </u-form-item>
+            <u-form-item label="详细地址" prop="city" v-if="form.type == 2">
+              <u-input
+                  v-model="form.city"
+                  :disabled="!!orderId"
+                  placeholder="请填写详细地址"
+              />
+            </u-form-item>
             <u-form-item label="预约人" prop="appoint_name" required>
               <u-input
                 v-model="form.appoint_name"
@@ -178,7 +185,7 @@
             </u-form-item>
           </view>
 
-          <view class="form-card form-card-2">
+          <view class="form-card form-card-2" v-if="form.type == 1">
             <view class="title">
               <view class="title__left">
                 <text>上传资料</text>
@@ -630,23 +637,6 @@ export default {
       // service
       isShowService: false,
 
-      // step
-      stepList: [
-        {
-          name: "填写预约",
-        },
-        {
-          name: "在线支付",
-        },
-        {
-          name: "专人陪诊",
-        },
-        {
-          name: "服务完成",
-        },
-      ],
-      //
-
       // form
       fileList: [],
       isShowHospital: false,
@@ -954,6 +944,24 @@ export default {
     }
   },
   computed: {
+    // step
+    stepList() {
+      return [
+        {
+          name: "填写预约",
+        },
+        {
+          name: "在线支付",
+        },
+        {
+          name: "专人" + (this.form.type == 1 ? "陪诊" : "陪护"),
+        },
+        {
+          name: "服务完成",
+        },
+      ]
+    },
+    //
     currentStep() {
       if (!this.orderId) {
         return 0;

package_sub/pages/Shop/Home.vue

@@ -0,0 +1,24 @@
+<template>
+  <view>
+    <navbar></navbar>
+    <tabbar></tabbar>
+  </view>
+</template>
+
+<script>
+import tabbar from './Tabbar.vue'
+import navbar from './Navbar.vue'
+export default {
+  components: {
+    tabbar,
+    navbar
+  },
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

package_sub/pages/Shop/Navbar.vue

@@ -0,0 +1,43 @@
+<template>
+  <view>
+    <u-navbar back-text="返回"
+              is-back
+              :title="title"
+              back-icon-color="#fff"
+              :back-text-style="{
+                color: '#fff'
+              }"
+              :background="{
+                backgroundImage: 'linear-gradient(0deg, #c10d12 0%, #c10d12 4%, #e26165 99%, #e26165 100%)'
+              }">
+      <view class="slot-wrap" @click="toSearch">
+        <u-search :show-action="false" shape="round" placeholder="请输入搜索内容"></u-search>
+      </view>
+    </u-navbar>
+
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toSearch() {
+      this.$u.route({
+        url: '/package_sub/pages/Shop/Search'
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.slot-wrap {
+  margin: auto;
+}
+</style>

package_sub/pages/Shop/Order.vue

@@ -0,0 +1,23 @@
+<template>
+  <view>
+    <tabbar></tabbar>
+
+  </view>
+</template>
+
+<script>
+import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";
+
+export default {
+  components: {
+    tabbar
+  },
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

package_sub/pages/Shop/ProductList.vue

@@ -0,0 +1,290 @@
+<template>
+  <view class="u-wrap">
+    <navbar></navbar>
+    <view class="u-menu-wrap">
+      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
+                   :scroll-into-view="itemId">
+        <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
+              @tap.stop="swichMenu(index)">
+          <text class="u-line-1">{{item.name}}</text>
+        </view>
+      </scroll-view>
+      <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
+        <view class="page-view">
+          <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+            <view class="item-title">
+              <text>{{item.name}}</text>
+            </view>
+            <view class="item-container">
+              <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+                <image class="item-menu-image" :src="item1.icon" mode=""></image>
+                <view class="item-menu-name">{{item1.name}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <tabbar></tabbar>
+  </view>
+</template>
+<script>
+import classifyData from './classify.data.js';
+import navbar from "@/package_sub/pages/Shop/Navbar.vue";
+import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";
+export default {
+  components: {tabbar, navbar},
+  data() {
+    return {
+      scrollTop: 0, //tab标题的滚动条位置
+      oldScrollTop: 0,
+      current: 0, // 预设当前项的值
+      menuHeight: 0, // 左边菜单的高度
+      menuItemHeight: 0, // 左边菜单item的高度
+      itemId: '', // 栏目右边scroll-view用于滚动的id
+      tabbar: classifyData,
+      menuItemPos: [],
+      arr: [],
+      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
+      timer: null, // 定时器
+
+    }
+  },
+  onLoad() {
+
+  },
+  onReady() {
+    this.getMenuItemTop()
+  },
+  methods: {
+    // 点击左边的栏目切换
+    async swichMenu(index) {
+      if(this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if (index == this.current) return;
+      this.scrollRightTop = this.oldScrollTop;
+      this.$nextTick(function(){
+        this.scrollRightTop = this.arr[index];
+        this.current = index;
+        this.leftMenuStatus(index);
+      })
+    },
+    // 获取一个目标元素的高度
+    getElRect(elClass, dataVal) {
+      new Promise((resolve, reject) => {
+        const query = uni.createSelectorQuery().in(this);
+        query.select('.' + elClass).fields({
+          size: true
+        }, res => {
+          // 如果节点尚未生成，res值为null，循环调用执行
+          if (!res) {
+            setTimeout(() => {
+              this.getElRect(elClass);
+            }, 10);
+            return;
+          }
+          this[dataVal] = res.height;
+          resolve();
+        }).exec();
+      })
+    },
+    // 观测元素相交状态
+    async observer() {
+      this.tabbar.map((val, index) => {
+        let observer = uni.createIntersectionObserver(this);
+        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+        observer.relativeTo('.right-box', {
+          top: 0
+        }).observe('#item' + index, res => {
+          if (res.intersectionRatio > 0) {
+            let id = res.id.substring(4);
+            this.leftMenuStatus(id);
+          }
+        })
+      })
+    },
+    // 设置左边菜单的滚动状态
+    async leftMenuStatus(index) {
+      this.current = index;
+      // 如果为0，意味着尚未初始化
+      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+        await this.getElRect('u-tab-item', 'menuItemHeight');
+      }
+      // 将菜单活动item垂直居中
+      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
+    },
+    // 获取右边菜单每个item到顶部的距离
+    getMenuItemTop() {
+      new Promise(resolve => {
+        let selectorQuery = uni.createSelectorQuery();
+        selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+          // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+          if(!rects.length) {
+            setTimeout(() => {
+              this.getMenuItemTop();
+            }, 10);
+            return ;
+          }
+          rects.forEach((rect) => {
+            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+            this.arr.push(rect.top - rects[0].top);
+            resolve();
+          })
+        }).exec()
+      })
+    },
+    // 右边菜单滚动
+    async rightScroll(e) {
+      this.oldScrollTop = e.detail.scrollTop;
+      if(this.arr.length == 0) {
+        await this.getMenuItemTop();
+      }
+      if(this.timer) return ;
+      if(!this.menuHeight) {
+        await this.getElRect('menu-scroll-view', 'menuHeight');
+      }
+      setTimeout(() => { // 节流
+        this.timer = null;
+        // scrollHeight为右边菜单垂直中点位置
+        let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
+        for (let i = 0; i < this.arr.length; i++) {
+          let height1 = this.arr[i];
+          let height2 = this.arr[i + 1];
+          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+          if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+            this.leftMenuStatus(i);
+            return ;
+          }
+        }
+      }, 10)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-wrap {
+  height: calc(100vh);
+  /* #ifdef H5 */
+  height: calc(100vh - var(--window-top));
+  /* #endif */
+  display: flex;
+  flex-direction: column;
+}
+
+.u-search-box {
+  padding: 18rpx 30rpx;
+}
+
+.u-menu-wrap {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.u-search-inner {
+  background-color: rgb(234, 234, 234);
+  border-radius: 100rpx;
+  display: flex;
+  align-items: center;
+  padding: 10rpx 16rpx;
+}
+
+.u-search-text {
+  font-size: 26rpx;
+  color: $u-tips-color;
+  margin-left: 10rpx;
+}
+
+.u-tab-view {
+  width: 200rpx;
+  height: 100%;
+}
+
+.u-tab-item {
+  height: 110rpx;
+  background: #f6f6f6;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #444;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.u-tab-item-active {
+  position: relative;
+  color: #000;
+  font-size: 30rpx;
+  font-weight: 600;
+  background: #fff;
+}
+
+.u-tab-item-active::before {
+  content: "";
+  position: absolute;
+  border-left: 4px solid $u-type-primary;
+  height: 32rpx;
+  left: 0;
+  top: 39rpx;
+}
+
+.u-tab-view {
+  height: 100%;
+}
+
+.right-box {
+  background-color: rgb(250, 250, 250);
+}
+
+.page-view {
+  padding: 16rpx;
+}
+
+.class-item {
+  margin-bottom: 30rpx;
+  background-color: #fff;
+  padding: 16rpx;
+  border-radius: 8rpx;
+}
+
+.class-item:last-child {
+  min-height: 100vh;
+}
+
+.item-title {
+  font-size: 26rpx;
+  color: $u-main-color;
+  font-weight: bold;
+}
+
+.item-menu-name {
+  font-weight: normal;
+  font-size: 24rpx;
+  color: $u-main-color;
+}
+
+.item-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.thumb-box {
+  width: 33.333333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 20rpx;
+}
+
+.item-menu-image {
+  width: 120rpx;
+  height: 120rpx;
+}
+</style>

package_sub/pages/Shop/Search.vue

@@ -0,0 +1,23 @@
+<template>
+  <view>
+    <tabbar></tabbar>
+
+  </view>
+</template>
+
+<script>
+import tabbar from "@/package_sub/pages/Shop/Tabbar.vue";
+
+export default {
+  components: {
+    tabbar
+  },
+  data() {
+    return {};
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>

package_sub/pages/Shop/Tabbar.vue

@@ -0,0 +1,64 @@
+<template>
+  <view>
+    <u-tabbar inactive-color="#999"
+              active-color="#ea3323"
+              :list="list"
+              :mid-button="false"
+              @change="tabbarSwitch"></u-tabbar>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          iconPath: "home",
+          selectedIconPath: "home-fill",
+          text: "首页",
+          customIcon: false,
+          pagePath: "/package_sub/pages/Shop/Home"
+        },
+        {
+          iconPath: "grid",
+          selectedIconPath: "grid-fill",
+          text: "分类",
+          customIcon: false,
+          pagePath: "/package_sub/pages/Shop/ProductList"
+        },
+        {
+          iconPath: "search",
+          selectedIconPath: "search",
+          text: "搜索",
+          customIcon: false,
+          pagePath: "/package_sub/pages/Shop/Search"
+        },
+        {
+          iconPath: "shopping-cart",
+          selectedIconPath: "shopping-cart-fill",
+          text: "购物车",
+          customIcon: false,
+          pagePath: "/package_sub/pages/Shop/Order"
+        }
+      ]
+    };
+  },
+  created() {
+    let curPages = getCurrentPages();
+    this.pageUrl = curPages[curPages.length - 1].route;
+  },
+  methods: {
+    tabbarSwitch(e) {
+      this.$u.route({
+        url: this.list[e].pagePath,
+        animationDuration: 500
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>

pages.json

@@ -77,6 +77,30 @@
             "navigationBarTitleText": "订单",
             "enablePullDownRefresh": true
           }
+        },
+        {
+          "path": "pages/Shop/ProductList",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/Shop/Home",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/Shop/Search",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "pages/Shop/Order",
+          "style": {
+            "navigationStyle": "custom"
+          }
         }
       ]
     }

pages/index/index.vue

@@ -276,6 +276,7 @@ export default {
         {
           text: "商城服务",
           icon: "/static/index/shangchengfuwu.png",
+          to: "/package_sub/pages/Shop/Home",
         },
       ],