商品滑动

src/pages/merchantorders.vue

@@ -6,28 +6,36 @@
 </config>
 <template>
     <div class="container">
-        <nav-header></nav-header>
-        <van-sticky>
-            <div class="top">
-                <img
-                    class="mytest"
-                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
-                    alt=""
-                />
-                <div class="box">
-                    <div class="title" v-for="(item, index) in topList" :key="index">
-                        <div>
-                            <div class="text">
-                                <div class="text1">{{ item.address }}</div>
-                                <div class="text2">接受预定</div>
-                            </div>
-                            <div class="text1">{{ item.distribution }}</div>
-                            <div class="text2">公告：{{ item.notice }}</div>
+        <van-sticky :offset-top="0">
+            <nav-header></nav-header>
+            <img
+                class="mytest2"
+                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-15-18-12-24gMHNYyeC.png"
+                alt=""
+            />
+        </van-sticky>
+
+        <div class="top">
+            <img
+                class="mytest"
+                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-02-16-02-06RPYZopsT.png"
+                alt=""
+            />
+            <div class="box">
+                <div class="title" v-for="(item, index) in topList" :key="index">
+                    <div>
+                        <div class="text">
+                            <div class="text1">{{ item.address }}</div>
+                            <div class="text2">接受预定</div>
                         </div>
-                        <img :src="item.image" alt="" />
+                        <div class="text1">{{ item.distribution }}</div>
+                        <div class="text2">公告：{{ item.notice }}</div>
                     </div>
+                    <img :src="item.image" alt="" />
                 </div>
             </div>
+        </div>
+        <van-sticky :offset-top="90">
             <div class="tab">
                 <div
                     class="tabs"
@@ -51,171 +59,129 @@
                 />
             </div>
         </van-sticky>
-        <div class="content">
-            <div v-if="active == '点餐'">
-                <!-- height="115vw" -->
-                <van-tree-select
-                    :items="items"
-                    :main-item-class="red"
-                    :main-active-index="mainActiveIndex"
-                    :active-id="activeId"
-                    @onClickNav="onClickNav"
-                    @onSelectItem="onSelectItem"
-                >
-                    <div slot="content">
-                        <div v-if="falg == 0">
-                            <div
-                                @click="navigateTo('/pages/storedetails')"
-                                class="merchantroCon"
-                                v-for="(item, index) in merchantorListsData"
-                                :key="index"
-                            >
-                                <img class="imgLeft" :src="item.image" alt="" />
-                                <div>
-                                    <div class="text1">{{ item.name }}</div>
-                                    <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
-                                    <div class="bottom" @click.stop>
-                                        <div class="price">¥{{ item.price }}.00</div>
-                                        <div class="addcon">
-                                            <div v-if="item.currentNum > 0">
-                                                <img
-                                                    class="add"
-                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
-                                                    alt=""
-                                                    @click="minus(item)"
-                                                />
-                                            </div>
-                                            <div class="text" v-show="item.currentNum > 0">
-                                                {{ item.currentNum }}
-                                            </div>
-                                            <div>
-                                                <img
-                                                    class="add"
-                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
-                                                    alt=""
-                                                    @click="add(item)"
-                                                />
-                                            </div>
+        <div class="content" v-if="active == '点餐'">
+            <van-tree-select
+                :items="items"
+                :main-item-class="red"
+                :main-active-index="mainActiveIndex"
+                :active-id="activeId"
+                @onClickNav="onClickNav"
+                @onSelectItem="onSelectItem"
+            >
+                <div slot="content">
+                    <div v-if="falg == 0">
+                        <div
+                            @click="navigateTo('/pages/storedetails')"
+                            class="merchantroCon"
+                            v-for="(item, index) in merchantorListsData"
+                            :key="index"
+                        >
+                            <img class="imgLeft" :src="item.image" alt="" />
+                            <div>
+                                <div class="text1">{{ item.name }}</div>
+                                <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
+                                <div class="bottom" @click.stop>
+                                    <div class="price">¥{{ item.price }}.00</div>
+                                    <div class="addcon">
+                                        <div v-if="item.currentNum > 0">
+                                            <img
+                                                class="add"
+                                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                                alt=""
+                                                @click="minus(item)"
+                                            />
+                                        </div>
+                                        <div class="text" v-show="item.currentNum > 0">
+                                            {{ item.currentNum }}
+                                        </div>
+                                        <div>
+                                            <img
+                                                class="add"
+                                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                                alt=""
+                                                @click="add(item)"
+                                            />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div v-if="falg == 1">
-                            <div
-                                @click="navigateTo('/pages/storedetails')"
-                                class="merchantroCon"
-                                v-for="(item, index) in merchantorListsData"
-                                :key="index"
-                            >
-                                <img class="imgLeft" :src="item.image" alt="" />
-                                <div>
-                                    <div class="text1">{{ item.name }}</div>
-                                    <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
-                                    <div class="bottom" @click.stop>
-                                        <div class="price">¥{{ item.price }}.00</div>
-                                        <div class="addcon">
-                                            <div v-if="item.currentNum > 0">
-                                                <img
-                                                    class="add"
-                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
-                                                    alt=""
-                                                    @click="minus(item)"
-                                                />
-                                            </div>
-                                            <div class="text" v-show="item.currentNum > 0">
-                                                {{ item.currentNum }}
-                                            </div>
-                                            <div>
-                                                <img
-                                                    class="add"
-                                                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
-                                                    alt=""
-                                                    @click="add(item)"
-                                                />
-                                            </div>
+                    </div>
+                    <div v-if="falg == 1">
+                        <div
+                            @click="navigateTo('/pages/storedetails')"
+                            class="merchantroCon"
+                            v-for="(item, index) in merchantorListsData"
+                            :key="index"
+                        >
+                            <img class="imgLeft" :src="item.image" alt="" />
+                            <div>
+                                <div class="text1">{{ item.name }}</div>
+                                <div class="text2">月销{{ item.num }}&nbsp;&nbsp; 赞{{ item.fabulous }}</div>
+                                <div class="bottom" @click.stop>
+                                    <div class="price">¥{{ item.price }}.00</div>
+                                    <div class="addcon">
+                                        <div v-if="item.currentNum > 0">
+                                            <img
+                                                class="add"
+                                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-33-22neKqYgYm.png"
+                                                alt=""
+                                                @click="minus(item)"
+                                            />
+                                        </div>
+                                        <div class="text" v-show="item.currentNum > 0">
+                                            {{ item.currentNum }}
+                                        </div>
+                                        <div>
+                                            <img
+                                                class="add"
+                                                src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-16-10-41-46reAOWvaa.png"
+                                                alt=""
+                                                @click="add(item)"
+                                            />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </van-tree-select>
-            </div>
-            <div v-if="active == '评价'">
-                <div class="tabs2">
-                    <div
-                        class="tab2"
-                        :class="{ active2: item === active2 }"
-                        v-for="(item, index) in tabs2"
-                        :key="index"
-                        @click="change(item)"
-                    >
-                        {{ item }}
-                    </div>
                 </div>
-                <div class="evaluateCon">
-                    <img v-if="userInfo" :src="userInfo.avatar" alt="" />
-                    <div class="conr">
-                        <div class="name">
-                            <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
-                            <div class="text2">2021.07.03</div>
-                        </div>
-                        <!-- 点赞 -->
-                        <div class="give">
-                            <img src="../native/imgs/icon-zan@3x.png" alt="" />
-                            <div class="text1">赞了该商品</div>
-                        </div>
-                        <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
-                        <div class="image">
-                            <div v-for="(item, index) in lists" :key="index">
-                                <img class="img" :src="item.image" alt="" />
-                            </div>
-                        </div>
-                    </div>
+            </van-tree-select>
+        </div>
+        <div class="content" v-if="active == '评价'">
+            <div class="tabs2">
+                <div
+                    class="tab2"
+                    :class="{ active2: item === active2 }"
+                    v-for="(item, index) in tabs2"
+                    :key="index"
+                    @click="change(item)"
+                >
+                    {{ item }}
                 </div>
-                <div class="evaluateCon">
-                    <img v-if="userInfo" :src="userInfo.avatar" alt="" />
-                    <div class="conr">
-                        <div class="name">
-                            <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
-                            <div class="text2">2021.07.03</div>
-                        </div>
-                        <!-- 点赞 -->
-                        <div class="give">
-                            <img src="../native/imgs/icon-zan@3x.png" alt="" />
-                            <div class="text1">赞了该商品</div>
-                        </div>
-                        <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
-                        <div class="image">
-                            <div v-for="(item, index) in lists" :key="index">
-                                <img class="img" :src="item.image" alt="" />
-                            </div>
-                        </div>
+            </div>
+            <div class="evaluateCon">
+                <img v-if="userInfo" :src="userInfo.avatar" alt="" />
+                <div class="conr">
+                    <div class="name">
+                        <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
+                        <div class="text2">2021.07.03</div>
                     </div>
-                </div>
-                <div class="evaluateCon">
-                    <img v-if="userInfo" :src="userInfo.avatar" alt="" />
-                    <div class="conr">
-                        <div class="name">
-                            <div class="txt1" v-if="userInfo">{{ userInfo.nickname }}</div>
-                            <div class="text2">2021.07.03</div>
-                        </div>
-                        <!-- 点赞 -->
-                        <div class="give">
-                            <img src="../native/imgs/icon-zan@3x.png" alt="" />
-                            <div class="text1">赞了该商品</div>
-                        </div>
-                        <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
-                        <div class="image">
-                            <div v-for="(item, index) in lists" :key="index">
-                                <img class="img" :src="item.image" alt="" />
-                            </div>
+                    <div class="give">
+                        <img src="../native/imgs/icon-zan@3x.png" alt="" />
+                        <div class="text1">赞了该商品</div>
+                    </div>
+                    <div class="remark">哇塞，太好吃了吧，下次还要点，收藏起来。</div>
+                    <div class="image">
+                        <div v-for="(item, index) in lists" :key="index">
+                            <img class="img" :src="item.image" alt="" />
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="characteristic" v-if="active == '商家'">
+        </div>
+        <div class="content" v-if="active == '商家'">
+            <div class="characteristic">
                 <div v-for="(item, index) in merchantorList" :key="index">
                     <div class="title">商家特色</div>
                     <div class="text1">{{ item.title }}</div>
@@ -367,6 +333,14 @@ export default {
         -webkit-flex: 0.56;
         --sidebar-padding: 12px 8px 12px 12px;
     }
+    .mytest2 {
+        .mytest();
+        height: 184rpx;
+        img {
+            width: 100vw;
+            display: block;
+        }
+    }
     .top {
         padding-top: 96px;
         .mytest {
@@ -380,7 +354,7 @@ export default {
         .box {
             width: 343px;
             height: 120px;
-            margin: 0 16px;
+            margin: 0 16px 28px 16px;
             background: #ffffff;
             border-radius: 12px 12px 0 0;
             .title {
@@ -428,7 +402,7 @@ export default {
     }
     .tab {
         .flex();
-        padding: 28px 16px 0;
+        padding: 7px 16px 0 16px;
         background: #fff;
         .tabs {
             font-size: 16px;

src/pages/mock/merchantorList.js

@@ -1,4 +1,74 @@
 export const merchantorLists = [
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
+    {
+        name: '寿司',
+        image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
+        num: '226',
+        fabulous: '40',
+        price: 20.0
+    },
     {
         name: '寿司',
         image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',