抽离商品，购物车

components/cm-module/cm-banner/cm-banner.vue

@@ -0,0 +1,101 @@
+<template>
+    <view class="swiper-banner-box">
+        <swiper
+            class="tui-banner-swiper tui-banner tui-skeleton-fillet"
+            :autoplay="true"
+            :interval="5000"
+            :duration="500"
+            @change="swiperChange"
+            :circular="true"
+        >
+            <swiper-item v-for="(item, index) in list" :key="index">
+                <image :src="item" class="tui-slide-image" mode="scaleToFill" />
+            </swiper-item>
+        </swiper>
+        <view class="swiper__dots-box" v-if="list.length > 1">
+            <view
+                v-for="(item, idx) in list"
+                :key="idx"
+                :class="[idx === current ? 'swiper__dots-long' : 'none']"
+                :data-index="current"
+                class="swiper__dots-item"
+            >
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'address',
+    props: {
+        list: {
+            type: Array
+        }
+    },
+    data() {
+        return {
+            current: 0
+        }
+    },
+    methods: {
+        swiperChange(e) {
+            //轮播图切换
+            const index = e.detail.current
+            this.current = index
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.swiper-banner-box {
+    width: 100%;
+    height: 340rpx;
+    position: relative;
+    background-size: cover;
+}
+.tui-banner-swiper {
+    width: 700rpx;
+    margin: 0 auto;
+    height: 340rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    transform: translateY(0);
+    .banner-item {
+        border-radius: 16rpx;
+    }
+    .tui-slide-image {
+        width: 100%;
+        height: 340rpx;
+        display: block;
+    }
+}
+.swiper__dots-box {
+    position: absolute;
+    bottom: 24rpx;
+    left: 0;
+    right: 0;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .swiper__dots-item {
+        width: 10rpx;
+        height: 10rpx;
+        border-radius: 100%;
+        margin-left: 6px;
+        background-color: rgba(255, 255, 255, 0.7);
+    }
+    .swiper__dots-long {
+        width: 10rpx;
+        height: 10rpx;
+        border-radius: 4rpx;
+        background-color: #fa55bf;
+        transition: all 0.4s;
+    }
+}
+</style>

components/cm-module/cm-cart-product/cm-cart-product.vue

@@ -0,0 +1,332 @@
+<template>
+    <view class="cm-cart-product">
+        <template v-if="productList.length > 0">
+            <!-- 供应商名称 -->
+            <view class="shop-info">
+                <template v-if="listType === 'expired'">
+                    <view class="expired">失效商品{{ productList.length }}件</view>
+                </template>
+                <template v-else>
+                    <view
+                        class="radio iconfont"
+                        :class="data.checked ? 'icon-xuanze' : 'icon-weixuanze'"
+                        @click="chooseAll"
+                    ></view>
+                    <view class="name">{{ data.name }}</view>
+                </template>
+            </view>
+            <!-- 商品列表 -->
+            <view class="product-list">
+                <view
+                    class="row"
+                    v-for="(item, index) in productList"
+                    :key="index"
+                    :class="{ 'no-border': index === 0 }"
+                >
+                    <view class="expired" v-if="listType === 'expired'">失效</view>
+                    <view
+                        class="radio iconfont"
+                        :class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
+                        @click="chooseOne(item)"
+                        v-else
+                    ></view>
+                    <view class="product">
+                        <image class="cover" :src="item.mainImage"></image>
+                        <view class="content">
+                            <view class="title">{{ item.productName }}</view>
+                            <!-- 普通列表 -->
+                            <template v-if="['list', 'delete'].includes(listType)">
+                                <view class="params">规格：{{ item.unit || '' }}</view>
+                                <view class="tags">
+                                    <view class="tag type1" v-if="!item.heUserId">自营</view>
+                                    <view class="tag type2" v-if="item.activeStatus == 1" @click="clickPopupShow(item, 2)"
+                                        >活动价</view
+                                    >
+                                </view>
+                                <view class="footer">
+                                    <view class="price">￥{{ item.price }}</view>
+                                    <view>
+                                        <number-box
+                                            @change="numberChange(item, $event)"
+                                            v-if="listType !== 'delete'"
+                                            :value="item.productCount"
+                                        ></number-box>
+                                    </view>
+                                </view>
+                            </template>
+                            <template v-if="listType === 'expired'">
+                                <view class="tip">商品已下架</view>
+                            </template>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <!-- 合计价格 -->
+            <view class="total" v-if="listType === 'list'">
+                <text class="title">合计：</text> <text class="price">￥{{ data.totalPrice | formatPrice }}</text>
+            </view>
+        </template>
+        <!-- 促销活动弹窗 -->
+        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
+    </view>
+</template>
+
+<script>
+import NumberBox from './number-box.vue'
+import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
+export default {
+    name: 'cm-cart-product',
+    components: {
+        NumberBox,
+        activiPopup
+    },
+    data() {
+        return {
+            popupShow: false,
+            handlerPros: {}
+        }
+    },
+    props: {
+        // 列表类型 list普通列表  delete删除列表  expired失效列表
+        listType: {
+            type: String,
+            default: 'list'
+        },
+        // 数据
+        data: {
+            type: [Array, Object],
+            default: () => {}
+        },
+        vkey: {
+            type: String,
+            default: ''
+        }
+    },
+    filters: {
+        formatPrice(val) {
+            return Number(val).toFixed(2)
+        }
+    },
+    computed: {
+        productList() {
+            if (this.listType === 'expired') {
+                return this.data
+            } else {
+                return this.data[this.vkey]
+            }
+        }
+    },
+    methods: {
+        ...mapActions('cart', ['initCart', 'updateShoppogCount', 'removeFromCart', 'removeFailureFromCart']),
+        ...mapMutations('cart', [
+            'selectProduct',
+            'selectAllShopProduct',
+            'selectAllProduct',
+            'saveCartIds',
+            'selectFailure',
+            'selectAllFailure'
+        ]),
+        // 商品数量变化
+        numberChange(product, count) {
+            this.countChange(product, count)
+        },
+        // 勾选 / 取消勾选 供应商下所有商品
+        chooseAll() {
+            this.selectAllShopProduct({
+                shopId: this.data.shopId,
+                checked: !this.data.checked
+            })
+            this.$emit('chooseAll')
+        },
+        // 勾选到单个商品
+        chooseOne(product) {
+            this.selectProduct({
+                shopId: this.data.shopId,
+                productId: product.productId,
+                checked: !product.productsChecked
+            })
+            this.$emit('chooseOne')
+        },
+        //商品数量加加
+        countChange(product, count) {
+            this.updateShoppogCount({
+                cartId: product.cartId,
+                productCount: count
+            })
+        },
+        // 促销活动弹窗
+        clickPopupShow(pros, type) {
+            if (pros.ladderList.length > 0) {
+                this.popupShow = true
+                this.handlerPros = pros
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+$grid: 24rpx;
+.cm-cart-product {
+    overflow: hidden;
+    background: #fff;
+    margin-bottom: $grid;
+}
+.shop-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $grid $grid 0;
+    .name {
+        width: 622rpx;
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+    .expired {
+        font-size: 30rpx;
+        color: #333333;
+    }
+}
+.radio {
+    font-size: 36rpx;
+    color: #b2b2b2;
+    &.icon-xuanze {
+        color: #f83c6c;
+    }
+}
+.product-list {
+    .row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 $grid;
+        padding: 30rpx 0;
+        border-top: 1px solid #e1e1e1;
+        &.no-border {
+            border-top: 0;
+        }
+        .expired {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 72rpx;
+            height: 36rpx;
+            background: rgba(51, 51, 51, 0.3);
+            border-radius: 24rpx;
+            font-size: 24rpx;
+            color: #ffffff;
+        }
+    }
+    .product {
+        width: 622rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .cover {
+            width: 180rpx;
+            height: 180rpx;
+            box-sizing: border-box;
+            border: 1rpx dashed #e1e1e1;
+        }
+        .content {
+            width: 442rpx;
+            .title,
+            .tags,
+            .params,
+            .footer,
+            .tip {
+                padding-left: $grid;
+            }
+            .tags,
+            .params {
+                margin-top: 10rpx;
+            }
+            .tip {
+                margin-top: 80rpx;
+                margin-bottom: 0;
+                font-size: 26rpx;
+                color: #f83c6c;
+            }
+            .title {
+                height: 66rpx;
+                font-size: 26rpx;
+                color: #333333;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2; // 这里控制几行显示省略号
+                -webkit-box-orient: vertical;
+            }
+            .tags {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                height: 24rpx;
+                .tag {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 30rpx;
+                    margin-right: 8rpx;
+                    font-size: 22rpx;
+                    &.type1 {
+                        width: 56rpx;
+                        background: #ff457b;
+                        border-radius: 4rpx;
+                        color: #ffffff;
+                    }
+                    &.type2 {
+                        width: 80rpx;
+                        background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
+                            no-repeat;
+                        background-size: 80rpx 30rpx;
+                        color: #f83c6c;
+                    }
+                }
+            }
+            .params {
+                font-size: 20rpx;
+                color: #999999;
+            }
+            .footer {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-end;
+                margin-top: 4rpx;
+                .add-cart {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 44rpx;
+                    height: 44rpx;
+                    background: #ff457b;
+                    color: #fff;
+                    border-radius: 50%;
+                }
+                .price {
+                    flex: 1;
+                    font-size: 26rpx;
+                    font-weight: 600;
+                    color: #f83c6c;
+                }
+            }
+        }
+    }
+}
+.total {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 30rpx $grid;
+    font-size: 26rpx;
+    font-weight: bold;
+    .title {
+        color: #333333;
+    }
+    .price {
+        color: #ff457b;
+    }
+}
+</style>

components/cm-module/cm-cart-product/number-box.vue

@@ -0,0 +1,79 @@
+<template>
+    <view class="number-box">
+        <view class="sub iconfont icon-jianhao" @click="sub"></view>
+        <input class="number" type="number" v-model="number" @blur="blur" />
+        <view class="add iconfont icon-jiahao" @click="add"></view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'number-box',
+    data() {
+        return {
+            number: 0
+        }
+    },
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    created() {
+        this.number = this.value
+    },
+    methods: {
+        add() {
+            this.number++
+            this.$emit('change', this.number)
+        },
+        sub() {
+            if (this.number > 1) {
+                this.number--
+                this.$emit('change', this.number)
+            } else {
+                this.$util.msg('购买数量不能少于1', 2000)
+            }
+        },
+        blur() {
+            if (this.number <= 0) {
+                this.number = 1
+                this.$util.msg('购买数量不能少于1', 2000)
+            }
+            this.number = parseInt(this.number)
+            this.$emit('change', this.number)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.number-box {
+    width: 148rpx;
+    height: 48rpx;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 24rpx;
+    border: 1rpx solid #e1e1e1;
+    .sub,
+    .add {
+        flex: 1;
+        text-align: center;
+        font-size: 28rpx;
+        color: #ccc;
+    }
+    .number {
+        text-align: center;
+        width: 56rpx;
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #333333;
+        box-sizing: border-box;
+        border-right: 1rpx solid #e1e1e1;
+        border-left: 1rpx solid #e1e1e1;
+    }
+}
+</style>

components/cm-module/cm-coupon-list/cm-coupon-list.vue

@@ -28,7 +28,14 @@
                     </view>
                     <view class="list" :class="['scroll-' + listType]">
                         <!-- 优惠券列表 -->
-                        <cm-coupon :key="i" v-for="i in 6"></cm-coupon>
+                        <!-- <cm-coupon :key="i" v-for="i in 6"></cm-coupon> -->
+                        <!-- 优惠券为空 -->
+                        <cm-empty
+                            message="暂无任何优惠券~"
+                            v-if="couponList.length <= 0"
+                            :image="baseUrl + 'icon-coupon-empty.png'"
+                            :offset="-12"
+                        ></cm-empty>
                         <!-- 使用优惠券按钮 -->
                         <view class="btn" @click="confirm" v-if="listType === 'use'">确定</view>
                         <!-- IPhoneX 以上版本适配 -->
@@ -42,12 +49,14 @@
 
 <script>
 import CmCoupon from '@/components/cm-module/cm-coupon/cm-coupon.vue'
+import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
 import { mapGetters } from 'vuex'
 
 export default {
     name: 'cm-coupon-list',
     components: {
-        CmCoupon
+        CmCoupon,
+        CmEmpty
     },
     props: {
         // 列表标题
@@ -57,8 +66,8 @@ export default {
         },
         // 优惠券列表
         couponList: {
-            type: Object,
-            default: () => {}
+            type: Array,
+            default: () => []
         },
         // 显示弹窗
         visible: {
@@ -73,6 +82,7 @@ export default {
     },
     data() {
         return {
+            baseUrl: this.$Static,
             currentTab: 0,
             tabs: [
                 {

components/cm-module/cm-coupon/cm-coupon.vue

@@ -1,6 +1,6 @@
 <template>
-    <view class="coupon off">
-        <view class="content cover-bg" :class="[cover]">
+    <view class="coupon on">
+        <view class="content" :class="[statusIcon, { 'cover-bg': showStatus }]">
             <view class="header">
                 <view class="tag">优惠券标签</view> <view class="price"><text>￥</text>100</view>
                 <view class="tip">满600可用</view>
@@ -10,8 +10,8 @@
                 <view class="end-time">截止日期：2021-10-28</view>
             </view>
             <view class="footer">
-                <view class="btn" @click="handleBtnClick">领取</view>
-                <!-- <view class="btn" :class="{ plain: i === 2 }">{{ i === 2 ? '去使用' : '领取' }}</view> -->
+                <!-- <view class="btn" @click="handleBtnClick">领取</view> -->
+                <view class="btn plain" @click="handleBtnClick">去使用</view>
             </view>
             <!-- <text class="radio-flag iconfont icon-weixuanze"></text> -->
             <text class="radio-flag iconfont icon-xuanze" v-if="chooseAble" @click="choose"></text>
@@ -32,8 +32,8 @@ export default {
             type: Boolean,
             default: false
         },
-        // 显示已领取图标
-        showReceived: {
+        // 是否显示优惠券状态
+        showStatus: {
             type: Boolean,
             default: false
         }
@@ -52,8 +52,9 @@ export default {
         }
     },
     computed: {
-        cover() {
-            if(!this.couponData) return
+        // 优惠券状态图标
+        statusIcon() {
+            if (!this.couponData) return
             let name = ''
             switch (this.couponData.flag) {
                 case 1:
@@ -77,12 +78,8 @@ export default {
         choose() {
             this.$emit('choose', this.couponData)
         },
-        // 领取优惠券 TODO
-        receive() {
-            console.log('领取优惠券')
-        },
         // 按钮点击
-        handleBtnClick(){
+        handleBtnClick() {
             console.log('领取 or 使用')
         }
     }
@@ -115,7 +112,7 @@ $coupon-bg-used: url(https://static.caimei365.com/app/mini-hehe/icon/icon-coupon
     }
     .cover-bg {
         background-position: 580rpx 16rpx;
-        background-size: 90rpx 90rpx;
+        background-size: 100rpx 100rpx;
         background-repeat: no-repeat;
         &.received {
             background-image: $coupon-bg-received;

components/cm-module/cm-drawer/cm-drawer.vue

@@ -6,7 +6,7 @@
                 <view class="content">
                     <!-- 关闭弹框按钮 -->
                     <view class="iconfont icon-iconfontguanbi close" @click="$emit('close')"></view>
-                    <view class="title">{{ title }}</view>
+                    <view class="title" v-if="title">{{ title }}</view>
                     <!-- 自定义插槽 -->
                     <view><slot></slot></view>
                 </view>
@@ -21,7 +21,7 @@ export default {
     props: {
         title: {
             type: String,
-            default: 'title'
+            default: ''
         },
         visible: {
             type: Boolean,

components/cm-module/cm-product/cm-product.vue

@@ -0,0 +1,143 @@
+<template>
+    <view class="cm-product" @click.stop="detail">
+        <view class="recommend" v-if="data.recommend === '1'"></view>
+        <!-- 封面 -->
+        <image class="cover" :src="data.mainImage"></image>
+        <view class="content">
+            <!-- 标题名称 -->
+            <view class="title">{{ data.name }}</view>
+            <!-- 标签 -->
+            <view class="tags">
+                <!-- <view class="tag type1">自营</view> -->
+                <view class="tag type2" v-if="data.activeStatus == 1">活动价</view>
+            </view>
+            <!-- 底部 -->
+            <view class="footer">
+                <!-- 价格 -->
+                <view class="price">￥{{ data.price | priceFormat }}</view>
+                <!-- 加入购物车 -->
+                <view class="add-cart iconfont icon-gouwuche" @click.stop="addCart"></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'cm-product',
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    filters: {
+        priceFormat(val) {
+            return Number(val).toFixed(2)
+        }
+    },
+    methods: {
+        // 跳转商品详情
+        detail() {
+            uni.navigateTo({
+                url: `/pages/goods/product?productId=${this.data.productId}`
+            })
+        },
+        // 加入购物车
+        addCart(){
+            this.$store.dispatch('cart/addToCart', { productId: this.data.productId })
+        }
+    } 
+}
+</script>
+
+<style lang="scss" scoped>
+$width: 339rpx;
+$height: 532rpx;
+$radius: 16rpx;
+$grid: 24rpx;
+
+.cm-product {
+    position: relative;
+    width: $width;
+    height: $height;
+    background: #fff;
+    border-radius: $radius;
+    .recommend {
+        position: absolute;
+        top: 0;
+        left: 34rpx;
+        width: 68rpx;
+        height: 55rpx;
+        background: url(https://static.caimei365.com/app/mini-hehe/icon/recommend.png) no-repeat center;
+        background-size: 68rpx 55rpx;
+    }
+    .cover {
+        width: $width;
+        height: $width;
+    }
+    .title,
+    .tags,
+    .footer {
+        padding: 0 $grid;
+        margin: 12rpx 0;
+    }
+    .title {
+        height: 66rpx;
+        font-size: 26rpx;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; // 这里控制几行显示省略号
+        -webkit-box-orient: vertical;
+    }
+    .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 24rpx;
+        .tag {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 30rpx;
+            margin-right: 8rpx;
+            font-size: 22rpx;
+            &.type1 {
+                width: 56rpx;
+                background: #ff457b;
+                border-radius: 4rpx;
+                color: #ffffff;
+            }
+            &.type2 {
+                width: 80rpx;
+                background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
+                background-size: 80rpx 30rpx;
+                color: #f83c6c;
+            }
+        }
+    }
+    .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .add-cart {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 44rpx;
+            height: 44rpx;
+            background: #ff457b;
+            color: #fff;
+            border-radius: 50%;
+        }
+        .price {
+            flex: 1;
+            font-size: 26rpx;
+            font-weight: 600;
+            color: #f83c6c;
+        }
+    }
+}
+</style>

components/cm-module/cm-tabs/cm-tabs.vue

@@ -1,19 +0,0 @@
-<template>
-    <view class="cm-tabs"> 
-        <view class=""></view>
-    </view>
-</template>
-
-<script>
-export default {
-    name: 'cm-tabs',
-    props: {
-        data: {
-            type: Array,
-            default: () => []
-        }
-    }
-}
-</script>
-
-<style lang="scss" scoped></style>

components/cm-module/homeIndex/banner.vue

@@ -1,100 +1,101 @@
 <template>
-	<view>
-		<view class="swiper-banner-box" >
-			<swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true" :interval="5000" :duration="500"  @change="swiperChange" :circular="true">
-				<swiper-item v-for="(item,index) in list" :key="index">
-					<image :src="item" class="tui-slide-image" mode="scaleToFill"/>
-				</swiper-item>
-			</swiper>
-			<view class="swiper__dots-box" v-if="list.length > 1">
-				<view v-for="(item,idx) in list" 
-					  :key="idx" 
-					  :class="[idx===current?'swiper__dots-long':'none']" 
-					  :data-index="current" class="swiper__dots-item">
-				</view>	  
-			</view>
-		</view>
-	</view>
+    <view class="swiper-banner-box">
+        <swiper
+            class="tui-banner-swiper tui-banner tui-skeleton-fillet"
+            :autoplay="true"
+            :interval="5000"
+            :duration="500"
+            @change="swiperChange"
+            :circular="true"
+        >
+            <swiper-item v-for="(item, index) in list" :key="index">
+                <image :src="item" class="tui-slide-image" mode="scaleToFill" />
+            </swiper-item>
+        </swiper>
+        <view class="swiper__dots-box" v-if="list.length > 1">
+            <view
+                v-for="(item, idx) in list"
+                :key="idx"
+                :class="[idx === current ? 'swiper__dots-long' : 'none']"
+                :data-index="current"
+                class="swiper__dots-item"
+            >
+            </view>
+        </view>
+    </view>
 </template>
 
 <script>
-	export default{
-		name:"address",
-		props:{
-			list:{
-				type:Array
-			}
-		},
-		data() {
-			return{
-				current:0
-			}
-		},
-		created(){
-			
-		},
-		computed: {
-	
-		},
-		methods:{
-			swiperChange(e) {//轮播图切换
-				const index = e.detail.current;
-				this.current = index;
-			}
-		}
-	}
+export default {
+    name: 'address',
+    props: {
+        list: {
+            type: Array
+        }
+    },
+    data() {
+        return {
+            current: 0
+        }
+    },
+    methods: {
+        swiperChange(e) {
+            //轮播图切换
+            const index = e.detail.current
+            this.current = index
+        }
+    }
+}
 </script>
 
 <style lang="scss">
-	.swiper-banner-box{
-		width: 100%;
-		height: 360rpx;
-		padding-top:100rpx;
-		position: relative;
-		background-size: cover;
-	}	
-	.tui-banner-swiper {
-		width: 700rpx;
-		margin: 0 auto;
-		height: 340rpx;
-		border-radius: 16rpx;
-		overflow: hidden;
-		transform: translateY(0);
-		margin-top: 16rpx;
-		.banner-item{
-			border-radius: 16rpx;
-		}
-		.tui-slide-image {
-			width: 100%;
-			height: 340rpx;
-			display: block;
-		}
-	}
-	.swiper__dots-box{
-		position: absolute;
-		bottom: 30rpx;
-		left: 0;
-		right: 0;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		.swiper__dots-item{
-			width: 10rpx;
-			height: 10rpx;
-			border-radius: 100%;
-			margin-left: 6px;
-			background-color:rgba(255,255,255,.7);
-		}
-		.swiper__dots-long{
-			width: 10rpx;
-			height: 10rpx;
-			border-radius: 4rpx;
-			background-color: #fa55bf;
-			transition: all 0.4s;
-		}
-	}
+.swiper-banner-box {
+    width: 100%;
+    height: 340rpx;
+    position: relative;
+    background-size: cover;
+}
+.tui-banner-swiper {
+    width: 700rpx;
+    margin: 0 auto;
+    height: 340rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+    transform: translateY(0);
+    .banner-item {
+        border-radius: 16rpx;
+    }
+    .tui-slide-image {
+        width: 100%;
+        height: 340rpx;
+        display: block;
+    }
+}
+.swiper__dots-box {
+    position: absolute;
+    bottom: 24rpx;
+    left: 0;
+    right: 0;
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .swiper__dots-item {
+        width: 10rpx;
+        height: 10rpx;
+        border-radius: 100%;
+        margin-left: 6px;
+        background-color: rgba(255, 255, 255, 0.7);
+    }
+    .swiper__dots-long {
+        width: 10rpx;
+        height: 10rpx;
+        border-radius: 4rpx;
+        background-color: #fa55bf;
+        transition: all 0.4s;
+    }
+}
 </style>

components/cm-module/productDetails/cm-activipopu.vue

@@ -15,7 +15,7 @@
                     </view>
                 </view>
             </template>
-            <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+            <view class="tui-right-flex tui-popup-btn">
                 <view class="tui-flex-1"> <view class="tui-button" @click="hidePopup()">了解</view> </view>
             </view>
         </view>

components/cm-module/productDetails/cm-price-activity.vue

@@ -73,7 +73,7 @@
                         </view>
                     </view>
                 </template>
-                <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+                <view class="tui-right-flex tui-popup-btn">
                     <view class="tui-flex-1">
                         <view
                             class="tui-button"

components/cm-module/productDetails/cm-price.vue

@@ -72,7 +72,7 @@
                         </view>
                     </view>
                 </template>
-                <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
+                <view class="tui-right-flex tui-popup-btn">
                     <view class="tui-flex-1">
                         <view
                             class="tui-button"

pages.json

@@ -7,9 +7,8 @@
                 "navigationBarTitleText": "呵呵商城",
                 "enablePullDownRefresh": true,
                 "backgroundColor": "#F952B7",
-                "backgroundTextStyle": "light",
-                "navigationStyle": "custom",
-                "onReachBottomDistance": 100
+                "navigationBarBackgroundColor": "#F952B7",
+                "navigationBarTextStyle": "white"
             }
         },
         {

pages/goods/cart.vue

@@ -1,227 +1,84 @@
 <template>
-    <view class="container cart clearfix" v-if="hasLogin" :style="{ paddingTop: CustomBar + 'px' }">
+    <view class="cart" :style="{ paddingTop: CustomBar + 'px' }">
         <header-cart
             :systeminfo="systeminfo"
             :navbar-data="nvabarData"
             :headerBtnPosi="headerBtnPosi"
             :page="1"
         ></header-cart>
-        <tui-skeleton
-            v-if="skeletonShow"
-            backgroundColor="#fafafa"
-            borderRadius="10rpx"
-            :isLoading="true"
-            :loadingType="5"
-        ></tui-skeleton>
-        <view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
-            <view
-                class="foot-check-delbtn"
-                v-if="!isshowDelbtn && goodsList.length > 0"
-                :style="{ top: CustomBar + 'px' }"
-            >
-                <view class="foot-text"
-                    >共<text>{{ kindCount }}</text
-                    >件商品</view
-                >
-                <view class="delBtn" @tap.stop="showDelManager">删除</view>
-            </view>
-            <view v-if="!isEmpty" class="container-cart">
+        <template v-if="!isEmpty">
+            <template v-if="listType !== 'delete'">
+                <!-- 商品统计 / 批量删除商品 -->
+                <view class="cart-top">
+                    <view class="count">共{{ kindCount }}件商品</view>
+                    <view class="btn" @click="showDelManager">删除</view>
+                </view>
                 <!-- TODO -->
                 <view class="receive-coupon">
                     <view class="tip-text">还差￥200可用“满200元减50元”优惠券</view>
                     <view class="btn" @click="couponVisible = true">领券</view>
                 </view>
-                <view class="cart-content" :style="{ paddingBottom: isIphoneX ? '130rpx' : '100rpx' }">
-                    <view class="goods-list">
-                        <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
-                            <view class="shoptitle">
-                                <!--选择商店的全部商品"-->
-                                <view class="checkbox-box" @click.stop="checkShop(item)">
-                                    <view
-                                        class="checkbox iconfont"
-                                        :class="[item.checked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                    ></view>
-                                </view>
-                                <view class="text">{{ item.name }}</view>
-                            </view>
-                            <view class="productlist">
-                                <view class="goods-pros" v-for="(pros, idx) in item.productList" :key="idx">
-                                    <view class="goods-pros-t">
-                                        <!--选择商品-->
-                                        <view class="checkbox-box" @click.stop="checkProduct(item, pros)">
-                                            <view
-                                                class="checkbox iconfont"
-                                                :class="[pros.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                            ></view>
-                                        </view>
-                                        <view class="pros-img" @click.stop="navToListPage(pros)"
-                                            ><image :src="pros.mainImage ? pros.mainImage : ''" alt=""
-                                        /></view>
-                                        <view class="pros-product">
-                                            <view class="producttitle" @click.stop="navToListPage(pros)">{{
-                                                pros.productName
-                                            }}</view>
-                                            <view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
-                                            <view class="floor-item-act" v-if="pros.activeStatus == 1">
-                                                <text class="tag tag-01" v-if="!pros.heUserId">自营</text>
-                                                <text class="tag tag-01" v-else>促销</text>
-                                                <text class="tag tag-02" @click.stop="clickPopupShow(pros, 2)"
-                                                    >活动价</text
-                                                >
-                                            </view>
-                                            <view class="productprice">
-                                                <!--使用过滤器对总价改变-->
-                                                <view class="price"><text>￥</text>{{ pros.price | NumFormat }}</view>
-                                                <view class="count">
-                                                    <view class="number-box">
-                                                        <view
-                                                            class="iconfont icon-jianhao"
-                                                            @click="changeCountSub(item, pros)"
-                                                        ></view>
-                                                        <input
-                                                            class="btn-input"
-                                                            type="number"
-                                                            maxlength="4"
-                                                            v-model="pros.productCount"
-                                                            @blur="changeNumber($event, item, pros)"
-                                                            @focus="changeInput(pros)"
-                                                        />
-                                                        <view
-                                                            class="iconfont icon-jiahao"
-                                                            @click="changeCountAdd(item, pros)"
-                                                        ></view>
-                                                    </view>
-                                                </view>
-                                            </view>
-                                        </view>
-                                    </view>
-                                </view>
-                            </view>
-                            <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
-                                <view class="sum-none" v-if="item.reducedPrice > 0">
-                                    <text class="money-sign">￥</text>
-                                    <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
-                                    <text class="money-reduced"
-                                        >减<text>￥{{ item.reducedPrice | NumFormat }}</text></text
-                                    >
-                                </view>
-                                <view class="sum"
-                                    >合计:<text class="money"
-                                        ><text class="money-sign">￥</text>{{ item.totalPrice | NumFormat }}</text
-                                    ></view
-                                >
-                            </view>
-                        </view>
-                    </view>
-                    <view class="failure-list" v-if="failureList.length > 0">
-                        <view class="failure-title">
-                            <view class="title-txt"
-                                >失效商品<text>{{ failureList.length }}件</text></view
-                            >
-                            <view class="title-btn" @click.stop="deletefailureList"
-                                ><text class="butto">清空失效商品</text></view
-                            >
-                        </view>
-                        <view class="productlist">
-                            <view class="goods-pros" v-for="(failure, failureIdx) in failureList" :key="failureIdx">
-                                <view class="goods-pros-t" @click.stop="navToListPage(failure)">
-                                    <!--选择商品-->
-                                    <view
-                                        class="checkbox-box"
-                                        @click.stop="ischeckFailure(failure)"
-                                        v-if="isshowDelbtn"
-                                    >
-                                        <button
-                                            class="checkbox iconfont"
-                                            :class="[failure.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                        ></button>
-                                    </view>
-                                    <text class="img-tip">失效</text>
-                                    <view class="pros-img">
-                                        <image :src="failure.image ? failure.image : ''" alt="" />
-                                    </view>
-                                    <view class="pros-product">
-                                        <view class="producttitle">{{ failure.name }}</view>
-                                        <view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
-                                        <view class="productstate">商品已下架</view>
-                                    </view>
-                                    <view class="pros-marks" v-if="failure.isFailureLayer"></view>
-                                </view>
-                            </view>
-                        </view>
-                    </view>
+            </template>
+            <!-- 购物车列表 -->
+            <cm-cart-product
+                v-for="(cart, index) in goodsList"
+                class="product-list"
+                :listType="listType"
+                :key="index"
+                :data="cart"
+                vkey="productList"
+                @chooseAll="chooseAll"
+                @chooseOne="chooseOne"
+            ></cm-cart-product>
+
+            <!-- 失效商品列表 -->
+            <cm-cart-product class="product-list" :key="index" :data="failureList" listType="expired"></cm-cart-product>
+
+            <!-- 底部按钮 -->
+            <view class="footer" :style="[footerBottom]">
+                <view class="radio" @click="checkAll">
+                    <text class="iconfont" :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"></text>
+                    <text class="tip">全选</text>
                 </view>
-                <!-- 脚部菜单 -->
-                <view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
-                    <view class="footer-le">
-                        <view class="foot-check checkbox-box" @tap.stop="checkAll()">
-                            <button
-                                class="checkbox iconfont"
-                                :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"
-                            ></button>
-                            <view class="text">全选</view>
+                <template v-if="!isshowDelbtn">
+                    <view class="center">
+                        <view class="row">
+                            <text>总价：</text> <text class="total-price">￥{{ allPrice | NumFormat }}</text>
                         </view>
-
-                        <view class="sum">
-                            <view v-if="!isshowDelbtn" class="sum-price">
-                                <view class="row">
-                                    <text>总价:</text>
-                                    <text class="money-sign">￥</text>
-                                    <text class="money">{{ allPrice | NumFormat }}</text>
-                                </view>
-                                <view class="row">
-                                    <text>共减:</text>
-                                    <text class="discounted-price">￥200.00</text>
-                                    <text @click="showDiscountedDetail">优惠明细</text>
-                                    <text
-                                        class="iconfont"
-                                        :class="showDitail ? 'tui-icon-arrowdown' : 'tui-icon-arrowup'"
-                                    ></text>
-                                </view>
-                            </view>
+                        <!-- TODO -->
+                        <view class="row">
+                            <text>共减</text> <text class="discounted-price">￥200.00</text>
+                            <text @click="showDiscountedDetail">优惠明细</text>
+                            <text
+                                class="iconfont"
+                                :class="showDitail ? 'tui-icon-arrowdown' : 'tui-icon-arrowup'"
+                            ></text>
                         </view>
                     </view>
-                    <view v-if="!isshowDelbtn" class="footer-ri">
-                        <view class="btn hanld-btn" @tap="toConfirmation">去结算({{ allCount }})</view>
-                    </view>
-                    <view v-else class="footer-del">
-                        <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
-                        <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
-                    </view>
-                </view>
-            </view>
-            <view v-else class="cart-content empty">
-                <view class="empty-container">
-                    <image
-                        class="empty-container-image"
-                        :src="StaticUrl + 'icon-empty-cart.png'"
-                        mode="aspectFit"
-                    ></image>
-                    <text class="error-text">购物车空空的，快去逛逛吧~</text>
+                    <view class="submit" @click="toConfirmation">去结算({{ allCount }})</view>
+                </template>
+                <view v-else class="footer-del">
+                    <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
+                    <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
                 </view>
             </view>
+        </template>
+        <view class="empty" v-else>
+            <cm-empty :image="StaticUrl + 'icon-empty-cart.png'" message="购物车空空的，快去逛逛吧~"></cm-empty>
         </view>
-        <!-- 操作弹窗 -->
-        <tui-modal
-            :show="modal"
-            @click="handleClick"
-            @cancel="hideModal"
-            :content="contentModalText"
-            color="#333"
-            :size="32"
-            shape="circle"
-            :maskClosable="false"
-        ></tui-modal>
-        <!-- 促销活动弹窗 -->
-        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
         <!-- 优惠券列表 TODO-->
-        <cm-coupon-list title="优惠券" listType="search" :visible="couponVisible" @close="closeCouponList"></cm-coupon-list>
+        <cm-coupon-list
+            title="优惠券"
+            listType="search"
+            :visible="couponVisible"
+            @close="closeCouponList"
+        ></cm-coupon-list>
         <!-- 优惠明细 -->
         <cm-drawer
             title="优惠明细"
             :visible="showDitail"
             position="bottom"
-            :offset="150"
+            :offset="100"
             @close="showDitail = false"
             zIndex="99"
         >
@@ -235,31 +92,40 @@
                 </view>
             </template>
         </cm-drawer>
-        <!-- 透明模态层 -->
-        <modal-layer v-if="modallayer"></modal-layer>
+        <!-- 操作弹窗 -->
+        <tui-modal
+            :show="modal"
+            @click="handleClick"
+            @cancel="hideModal"
+            :content="contentModalText"
+            color="#333"
+            :size="32"
+            shape="circle"
+            :maskClosable="false"
+        ></tui-modal>
     </view>
 </template>
+
 <script>
 import authorize from '@/common/authorize.js'
-import HeaderCart from '@/components/cm-module/headerNavbar/header-cart.vue' //顶部自定义胶囊'
-import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
-import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
 import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
 import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
+import CmCartProduct from '@/components/cm-module/cm-cart-product/cm-cart-product.vue'
+import HeaderCart from '@/components/cm-module/headerNavbar/header-cart.vue'
+import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
+
 import { mapGetters, mapActions, mapMutations } from 'vuex'
-import { cartList } from '@/common/json/data.json.js' //本地数据
 
 export default {
     components: {
-        modalLayer,
-        HeaderCart,
-        activiPopup,
         CmCouponList,
-        CmDrawer
+        CmDrawer,
+        CmCartProduct,
+        HeaderCart,
+        CmEmpty
     },
     data() {
         return {
-            StaticUrl: this.$Static,
             nvabarData: {
                 //顶部自定义导航
                 showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
@@ -267,7 +133,8 @@ export default {
                 title: '购物车' // 导航栏 中间的标题
             },
             headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
-            systeminfo: this.setSysteminfo(), //获取设备信息
+            systeminfo: this.setSysteminfo(),
+            StaticUrl: this.$Static,
             CustomBar: this.CustomBar, // 顶部导航栏高度
             popupShow: false,
             handlerPros: {}, //监听单挑促销商品
@@ -278,11 +145,13 @@ export default {
             skeletonShow: true,
             isshowDelbtn: false,
             scrollHeight: 'auto',
+            hasNextPage: false,
             modal: false,
             contentModalText: '',
             deleteType: 0,
             couponVisible: false,
-            showDitail: false
+            showDitail: false,
+            listType: 'list'
         }
     },
     onLoad() {
@@ -302,6 +171,11 @@ export default {
         //被选中的产品数量
         allCount() {
             return this.cartIds.length
+        },
+        footerBottom() {
+            return {
+                bottom: this.isIphoneX ? '0' : ''
+            }
         }
     },
     filters: {
@@ -357,13 +231,9 @@ export default {
             })
         },
         // 关闭优惠券弹窗
-        closeCouponList(){
+        closeCouponList() {
             this.couponVisible = false
         },
-        // 优惠明细 TODO
-        showDiscountedDetail() {
-            this.showDitail = true
-        },
         // 活动价弹窗
         clickPopupShow(pros, type) {
             if (pros.ladderList.length > 0) {
@@ -371,6 +241,10 @@ export default {
                 this.handlerPros = pros
             }
         },
+        // 优惠明细 TODO
+        showDiscountedDetail() {
+            this.showDitail = true
+        },
         // 勾选单个失效商品
         ischeckFailure(failure) {
             this.selectFailure({
@@ -379,21 +253,12 @@ export default {
             })
             this.getCheckedProductId()
         },
-        // 勾选单个商品
-        checkProduct(shop, product) {
-            this.selectProduct({
-                shopId: shop.shopId,
-                productId: product.productId,
-                checked: !product.productsChecked
-            })
+        // 勾选供应商下所有商品
+        chooseAll() {
             this.isSelectAll()
         },
-        // 勾选商店所有商品
-        checkShop(shop) {
-            this.selectAllShopProduct({
-                shopId: shop.shopId,
-                checked: !shop.checked
-            })
+        // 勾选单核商品
+        chooseOne() {
             this.isSelectAll()
         },
         // 勾选全部商品
@@ -501,12 +366,14 @@ export default {
         //显示删除商品管理
         showDelManager() {
             this.isshowDelbtn = true
+            this.listType = 'delete'
         },
         //隐藏删除商品管理
         hideDelManage() {
             this.selectAllFailure(false)
             this.getCheckedProductId()
             this.isshowDelbtn = false
+            this.listType = 'list'
         },
         //删除购物车商品
         deleteList() {
@@ -536,6 +403,7 @@ export default {
                 //一键删除失效商品
                 this.removeFailureFromCart().finally(() => {
                     this.isshowDelbtn = false
+                    this.listType = 'list'
                 })
             }
             this.modal = false
@@ -593,753 +461,193 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-page {
+.cart {
+    padding-bottom: 124rpx;
     background: #f7f7f7;
-    height: auto;
-}
-.discounted-ditail {
-    padding: 52rpx 8rpx 16rpx;
-    .row {
+    min-height: 100%;
+    box-sizing: border-box;
+    .cart-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 12rpx 0;
-        text {
+        padding: 0 24rpx;
+        width: 750rpx;
+        height: 80rpx;
+        background: #f7f7f7;
+        box-sizing: border-box;
+        .count {
             font-size: 30rpx;
             color: #333333;
-            &.red {
-                color: #f94b4b;
-            }
-        }
-        &.total{
-            font-size: 30rpx;
-            font-weight: 600;
-        }
-    }
-    .tip {
-        padding: 12rpx 0;
-        font-size: 26rpx;
-        color: #999999;
-    }
-}
-.receive-coupon{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24rpx;
-    background: #fff;
-    .tip-text{
-        font-size: 26rpx;
-        color: #FF457B;
-    }
-    .btn{
-        width: 88rpx;
-        height: 42rpx;
-        background: linear-gradient(270deg, #F83C6C 0%, #FC32B4 100%);
-        border-radius: 28rpx;
-        font-size: 26rpx;
-        color: #FFFFFF;
-        text-align: center;
-        line-height: 42rpx;
-    }
-}
-.cart-content {
-    position: relative;
-}
-.container-cart-main.none {
-    display: none;
-}
-.container-cart-main.show {
-    display: block;
-}
-.cart-content.empty.none {
-    display: none;
-}
-.cart-content.empty.show {
-    display: block;
-}
-.container-cart.show {
-    display: block;
-}
-.container-cart.none {
-    display: none;
-}
-.empty-container.none {
-    display: none;
-}
-.empty-container.show {
-    display: flex;
-}
-.foot-check-delbtn {
-    width: 100%;
-    height: 80rpx;
-    position: fixed;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    padding: 15rpx 24rpx;
-    background-color: #f7f7f7;
-    z-index: 990;
-    .foot-text {
-        font-size: $font-size-26;
-        height: 50rpx;
-        line-height: 50rpx;
-        color: #666666;
-        float: left;
-        padding-left: 10rpx;
-        text {
-            margin: 0 6rpx;
-        }
-    }
-    .delBtn {
-        width: 100rpx;
-        display: inline-block;
-        padding: 0 15rpx;
-        font-size: $font-size-26;
-        height: 50rpx;
-        line-height: 50rpx;
-        border-radius: 30rpx;
-        background: #ffffff;
-        border: 1px solid #ff457b;
-        color: #ff457b;
-        float: right;
-        text-align: center;
-        &.none {
-            display: none;
-        }
-    }
-}
-.checkbox-box {
-    display: flex;
-    align-items: center;
-    .checkbox {
-        display: flex;
-        margin: 0;
-        padding: 0 5rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        text-decoration: none;
-        border-radius: 0;
-        -webkit-tap-highlight-color: transparent;
-        overflow: hidden;
-        background-color: #ffffff;
-        font-size: 36rpx;
-        color: #999999;
-        &.icon-xuanze {
-            color: $color-system;
         }
-    }
-    &.disabled {
-        .checkbox {
-            color: #999999;
+        .btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 88rpx;
+            height: 42rpx;
+            background: #fff8fd;
+            border: 1rpx solid #ff457b;
+            border-radius: 24rpx;
+            font-size: 26rpx;
+            color: #ff457b;
         }
     }
-    .text {
-        font-size: $font-size-24;
-        margin-left: 10rpx;
-    }
-}
-.goods-list {
-    width: 100%;
-    height: auto;
-    background-color: #f7f7f7;
-    .goods-item {
-        width: 702rpx;
-        padding: 0 24rpx;
-        background: #ffffff;
-        margin-bottom: 24rpx;
-    }
-    .shoptitle {
+    .receive-coupon {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        height: 80rpx;
-        line-height: 80rpx;
-        .checkbox-box {
-            padding: 10rpx;
+        padding: 24rpx;
+        background: #fff;
+        .tip-text {
+            font-size: 26rpx;
+            color: #ff457b;
         }
-        .text {
-            width: 450rpx;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-left: 20rpx;
-            font-size: $font-size-28;
-            color: $text-color;
-            text-align: left;
-            font-weight: bold;
+        .btn {
+            width: 88rpx;
+            height: 42rpx;
+            background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
+            border-radius: 28rpx;
+            font-size: 26rpx;
+            color: #ffffff;
+            text-align: center;
+            line-height: 42rpx;
         }
     }
-    .goods-pros {
-        width: 100%;
-        height: auto;
-        margin-bottom: 20rpx;
-    }
-    .goods-pros-t {
+    .footer {
+        position: fixed;
+        bottom: -40rpx;
+        left: 0;
+        z-index: 899;
         display: flex;
+        justify-content: space-between;
         align-items: center;
         width: 100%;
-        height: 210rpx;
-        padding: 0 0 26rpx 0;
-        .checkbox-box {
-            padding: 10rpx;
-        }
-        .pros-img {
-            width: 210rpx;
-            height: 100%;
-            border-radius: 10rpx;
-            margin: 0 20rpx;
-            border: 1px solid #f3f3f3;
-            image {
-                width: 100%;
-                height: 100%;
-                border-radius: 10rpx;
-            }
-        }
-    }
-    .goods-pros-b {
-        width: 100%;
-        height: auto;
-        padding: 0 0 24rpx 0;
+        height: 140rpx;
         box-sizing: border-box;
-        &.show {
-            display: block;
-        }
-        &.none {
-            display: none;
-        }
-        .sum-none {
-            width: 100%;
-            height: 48rpx;
-            line-height: 48rpx;
-            color: $text-color;
-            float: left;
-            text-align: right;
-            .money {
-                font-size: $font-size-26;
-                color: #999999;
-                text-decoration: line-through;
-            }
-            .money-sign {
-                font-size: $font-size-26;
-                color: #999999;
-                text-decoration: line-through;
-            }
-            .money-reduced {
-                margin-left: 10rpx;
-                font-size: $font-size-26;
-                color: $color-system;
-                .iconfont {
-                    font-size: $font-size-34;
-                }
-            }
-        }
-        .sum {
-            width: 100%;
-            height: 40rpx;
-            font-size: $font-size-26;
-            line-height: 40rpx;
-            color: $text-color;
-            float: left;
-            display: flex;
-            justify-content: flex-end;
-            font-weight: bold;
-            .money {
-                color: $color-system;
-                font-size: $font-size-26;
-            }
-            .money-sign {
-                font-size: $font-size-24;
-                color: $color-system;
+        padding: 0 24rpx 40rpx;
+        border-top: 1rpx solid #eee;
+        background: #ffffff;
+        .radio {
+            font-size: 36rpx;
+            color: #b2b2b2;
+            .icon-xuanze {
+                color: #f83c6c;
             }
-        }
-    }
-    .pros-product {
-        width: 416rpx;
-        height: 100%;
-        line-height: 36rpx;
-        font-size: $font-size-28;
-        position: relative;
-        .producttitle {
-            width: 100%;
-            display: inline-block;
-            height: auto;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            word-break: break-all;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-            margin-bottom: 15rpx;
-            .no-text {
-                display: inline-block;
-                height: 36rpx;
-                padding: 0 12rpx;
-                line-height: 36rpx;
-                background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
-                border-radius: 18rpx;
-                text-align: center;
-                color: #ffffff;
-                font-size: $font-size-28;
-                margin-right: 24rpx;
+            .tip {
+                font-size: 30rpx;
+                color: #333333;
+                margin-left: 6rpx;
             }
         }
-        .productspec {
-            height: 36rpx;
-            color: #999999;
-            font-size: $font-size-26;
-        }
-        .productprice {
-            width: 100%;
-            height: 48rpx;
-            margin: 30rpx 0 0 0;
-            .price {
-                line-height: 48rpx;
-                font-size: $font-size-26;
-                width: 48%;
-                color: $color-system;
-                float: left;
-                font-weight: bold;
-                &.disabled {
-                    color: #999999;
-                    text-decoration: line-through;
-                }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: $color-system;
+        .row {
+            &:nth-child(1) {
+                font-size: 26rpx;
+                color: #333333;
+                .total-price {
+                    color: #ff457b;
                 }
             }
-            .count {
-                height: 100%;
-                float: right;
-                position: relative;
-                &.show {
-                    display: block;
-                }
-                &.none {
-                    display: none;
-                }
-                .count-tips {
-                    width: auto;
-                    display: inline-block;
-                    padding: 0 15rpx;
-                    line-height: 44rpx;
-                    height: 44rpx;
-                    border-radius: 22rpx;
-                    background: $btn-confirm;
-                    font-size: $font-size-24;
-                    text-align: center;
-                    color: #ffffff;
-                    position: absolute;
-                    top: -60rpx;
-                    left: -5rpx;
-                    z-index: 5;
-                    &.step {
-                        left: -217rpx;
-                    }
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        bottom: -30rpx;
-                        right: 15rpx;
-                        z-index: 1;
-                        width: 0;
-                        height: 0;
-                        border-width: 18rpx;
-                        border-style: solid;
-                        border-color: $color-system transparent transparent transparent;
-                    }
-                }
-                .number-box {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border: 2rpx solid #e1e1e1;
-                    border-radius: 30rpx;
-                    height: 48rpx;
-                    margin-left: 20rpx;
-                    .iconfont {
-                        font-size: $font-size-24;
-                        padding: 0 14rpx;
-                        color: #666666;
-                        text-align: center;
-                        line-height: 48rpx;
-                        font-weight: bold;
-                        background: #ffffff;
-                        &.icon-jianhao {
-                            border-radius: 30rpx 0 0 30rpx;
-                        }
-                        &.icon-jiahao {
-                            border-radius: 0 30rpx 30rpx 0;
-                        }
-                    }
-                    .btn-input {
-                        width: 56rpx;
-                        height: 44rpx;
-                        line-height: 44rpx;
-                        border-radius: 4rpx;
-                        text-align: center;
-                        font-size: $font-size-24;
-                        color: #333333;
-                        background-color: #f7f7f7;
-                    }
-                }
-                .uni-numbox {
-                    position: absolute;
-                    left: 45rpx;
-                    bottom: 0;
-                    .uni-numbox-minus,
-                    .uni-numbox-plus {
-                        width: 50rpx;
-                        line-height: 40rpx;
-                    }
-                    .uni-numbox-value {
-                        font-size: $font-size-28;
-                        width: 60rpx;
-                    }
-                }
+            &:nth-child(2) {
+                margin-top: 6rpx;
+                font-size: 24rpx;
+                color: #ff457b;
             }
-        }
-        .floor-item-act {
-            width: 100%;
-            height: 30rpx;
-            margin-top: 8rpx;
-            float: left;
-            .tag {
-                display: inline-block;
-                height: 32rpx;
-                font-size: 22rpx;
-                line-height: 30rpx;
-                text-align: center;
-                color: #f83c6c;
-                float: left;
-                margin-right: 10rpx;
-                &.tag-02 {
-                    width: 80rpx;
-                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
-                        no-repeat;
-                    background-size: contain;
-                }
-                &.tag-01 {
-                    width: 56rpx;
-                    color: #fff;
-                    background-color: #f83c6c;
-                    border-radius: 4rpx;
-                }
+            .discounted-price {
+                margin-right: 32rpx;
             }
         }
-    }
-}
-.failure-list {
-    width: 702rpx;
-    height: auto;
-    padding: 0 24rpx;
-    margin-top: 20rpx;
-    background: #ffffff;
-    .failure-title {
-        width: 100%;
-        height: 82rpx;
-        line-height: 82rpx;
-        font-size: $font-size-28;
-        border-bottom: 1px solid #ebebeb;
-        .title-txt {
-            float: left;
-            color: #666666;
-            text-align: left;
-        }
-        .title-btn {
-            float: right;
-            color: $color-system;
-            text-align: right;
+        .submit {
+            width: 210rpx;
+            height: 80rpx;
+            background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
+            border-radius: 40rpx;
+            font-size: 30rpx;
+            color: #ffffff;
+            text-align: center;
             line-height: 80rpx;
-            .butto {
-                display: inline-block;
-                padding: 0 15rpx;
-                font-size: $font-size-26;
-                height: 50rpx;
-                line-height: 50rpx;
-                border-radius: 30rpx;
-                background: #fff8fd;
-                border: 1px solid #ff457b;
-                color: #ff457b;
-                margin-top: 15rpx;
-            }
-        }
-    }
-    .productlist {
-        padding-top: 10rpx;
-        .goods-pros {
-            width: 100%;
-            height: auto;
-            padding: 20rpx 0;
         }
-        .goods-pros-t {
+        .footer-del {
+            width: 420rpx;
+            height: 100rpx;
+            position: absolute;
+            padding-left: 200rpx;
+            background: #ffffff;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            box-sizing: border-box;
+            padding: 10rpx 0;
             display: flex;
-            align-items: center;
-            width: 100%;
-            height: 210rpx;
-            position: relative;
-            .img-tip {
-                display: block;
-                width: 72rpx;
-                height: 36rpx;
-                line-height: 36rpx;
-                font-size: $font-size-24;
-                text-align: center;
-                color: #ffffff;
-                border-radius: 24rpx;
-                background: rgba(51, 51, 51, 0.3);
-                // position: absolute;
-                // left: 0;
-                // top: 0;
-            }
-            .checkbox-box {
-                padding: 10rpx;
-            }
-            .pros-img {
-                width: 180rpx;
-                height: 100%;
-                border-radius: 10rpx;
-                margin: 0 20rpx;
-                border: 1px solid #f3f3f3;
-                position: relative;
-                image {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 10rpx;
-                }
-            }
-            .pros-marks {
-                width: 730rpx;
-                height: 250rpx;
-                z-index: 90;
-                background: rgba(0, 0, 0, 0.05);
-                position: absolute;
-                left: -20rpx;
-                top: -20rpx;
-            }
-        }
-        .goods-pros-b {
-            width: 622rpx;
-            margin-left: 84rpx;
-            height: 40rpx;
-            padding: 0 0 26rpx 0;
-            // border-top: 1px solid #EBEBEB;
             &.show {
-                display: block;
+                animation: showDelbtn 0s linear both;
             }
             &.none {
-                display: none;
-            }
-            .sum {
-                font-size: $font-size-28;
-                line-height: 40rpx;
-                color: $text-color;
-                display: flex;
-                justify-content: flex-end;
-                .money {
-                    color: #ff2a2a;
-                    font-size: $font-size-28;
-                }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: #ff2a2a;
-                }
+                animation: hideDelbtn 0s linear both;
             }
-        }
-        .pros-product {
-            width: 402rpx;
-            height: 100%;
-            line-height: 36rpx;
-            font-size: $font-size-28;
-            position: relative;
-            .producttitle {
-                width: 100%;
-                display: inline-block;
-                height: auto;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                word-break: break-all;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                margin-bottom: 8rpx;
-                .no-text {
-                    display: inline-block;
-                    height: 36rpx;
-                    padding: 0 12rpx;
-                    line-height: 36rpx;
-                    background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
-                    border-radius: 18rpx;
-                    text-align: center;
-                    color: #ffffff;
-                    font-size: $font-size-28;
-                    margin-right: 24rpx;
-                }
-            }
-            .productspec {
-                height: 36rpx;
-                color: #999999;
-                font-size: $font-size-26;
-                margin-top: 20rpx;
-            }
-            .productstate {
+            .btn {
+                flex: 1;
+                margin: 0 8rpx;
+                height: 100%;
+                line-height: 80rpx;
                 font-size: $font-size-28;
-                height: 44rpx;
-                color: #ff2a2a;
-                position: absolute;
-                bottom: 0;
-                left: 0;
-            }
-        }
-    }
-}
-.footer {
-    width: 100%;
-    background-color: #ffffff;
-    height: 100rpx;
-    position: fixed;
-    bottom: 0rpx;
-    z-index: 100;
-    border-top: 1px solid #EFEFEF;
-    .footer-le {
-        width: 520rpx;
-        height: 100%;
-        padding: 10rpx 24rpx;
-        float: left;
-        box-sizing: border-box;
-        .foot-check {
-            width: 100rpx;
-            float: left;
-            line-height: 80rpx;
-            font-size: $font-size-24;
-            .checkbox {
-                width: 40rpx;
+                color: #ffffff;
                 text-align: center;
+                float: left;
+                border-radius: 40rpx;
             }
-            .text {
-                width: 60rpx;
-                float: right;
+            .btn.btn-cancel {
+                background: #f7f7f7;
+                color: #b2b2b2;
             }
-        }
-        .sum {
-            width: 360rpx;
-            height: 100%;
-            float: right;
-            box-sizing: border-box;
-            padding: 0 10rpx;
-            .sum-price {
-                display: flex;
-                justify-content: center;
-                align-items: flex-end;
-                flex-direction: column;
-                width: 100%;
-                height: 80rpx;
-                font-size: $font-size-30;
-                color: $text-color;
-                float: left;
-                font-weight: normal;
-                .money {
-                    color: $color-system;
+            .btn.btn-confirm {
+                background: $btn-confirm;
+                color: #ffffff;
+            }
+            @keyframes showDelbtn {
+                0% {
+                    transform: translateX(0);
                 }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: $color-system;
+                100% {
+                    transform: translateX(-100%);
                 }
-                .discounted-price{
-                    margin-right: 32rpx;
+            }
+            @keyframes hideDelbtn {
+                0% {
+                    transform: translateX(-100%);
                 }
-                .row{
-                    &:nth-child(2){
-                        font-size: 24rpx;
-                        color: #FF457B;
-                    }
+                100% {
+                    transform: translateX(0);
                 }
             }
         }
     }
-    .footer-ri {
-        width: 230rpx;
-        height: 100%;
-        float: right;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        z-index: 999;
-        box-sizing: border-box;
-        padding: 13rpx 15rpx;
-        &.none {
-            display: none;
-        }
-        .btn {
-            width: 200rpx;
-            height: 100%;
-            background: $btn-confirm;
-            font-size: $font-size-28;
-            line-height: 80rpx;
-            color: #ffffff;
+    .discounted-ditail {
+        padding: 52rpx 8rpx 0;
+        .row {
             display: flex;
-            border-radius: 40rpx;
-            justify-content: center;
+            justify-content: space-between;
             align-items: center;
-        }
-    }
-    .footer-del {
-        width: 420rpx;
-        height: 100rpx;
-        position: absolute;
-        padding-left: 200rpx;
-        background: #ffffff;
-        right: 0;
-        top: 0;
-        z-index: 1000;
-        box-sizing: border-box;
-        padding: 10rpx 0;
-        display: flex;
-        &.show {
-            animation: showDelbtn 0s linear both;
-        }
-        &.none {
-            animation: hideDelbtn 0s linear both;
-        }
-        .btn {
-            flex: 1;
-            margin: 0 8rpx;
-            height: 100%;
-            line-height: 80rpx;
-            font-size: $font-size-28;
-            color: #ffffff;
-            text-align: center;
-            float: left;
-            border-radius: 40rpx;
-        }
-        .btn.btn-cancel {
-            background: #f7f7f7;
-            color: #b2b2b2;
-        }
-        .btn.btn-confirm {
-            background: $btn-confirm;
-            color: #ffffff;
-        }
-        @keyframes showDelbtn {
-            0% {
-                transform: translateX(0);
+            padding: 12rpx 0;
+            text {
+                font-size: 30rpx;
+                color: #333333;
+                &.red {
+                    color: #f94b4b;
+                }
             }
-            100% {
-                transform: translateX(-100%);
+            &.total {
+                font-size: 30rpx;
+                font-weight: 600;
             }
         }
-        @keyframes hideDelbtn {
-            0% {
-                transform: translateX(-100%);
-            }
-            100% {
-                transform: translateX(0);
-            }
+        .tip {
+            padding: 12rpx 0;
+            font-size: 26rpx;
+            color: #999999;
         }
     }
+    .empty{
+        height: 80vh;
+    }
 }
 </style>

pages/goods/good-floorMore.vue

@@ -1,395 +1,115 @@
 <template>
-    <view class="container clearfix tui-skeleton">
-        <!-- 骨架 -->
-        <tui-skeleton v-if="skeletonShow" :isLoading="true" loadingType="2"></tui-skeleton>
-        <!-- 商品列表 -->
-        <view class="container-section clearfix">
-            <!-- 商品列表区域 -->
-            <view class="product-list" v-for="(pro, index) in productList" :key="index" @click.stop="Details(pro)">
-                <view class="product-list-image">
-                    <image class="product-image" :src="pro.mainImage" mode=""></image>
-                    <!-- 推荐 -->
-                    <image
-                        class="product-icon"
-                        :src="StaticUrl + 'recommend.png'"
-                        mode=""
-                        v-if="pro.recommend === '1'"
-                    ></image>
-                </view>
-                <view class="product-list-msg">
-                    <view class="product-msg-name">{{ pro.name }}</view>
-                    <view class="product-list-tag " v-if="pro.activeStatus == 1">
-                        <text class="tag tag-02">活动价</text>
-                    </view>
-                    <view class="product-list-pri">
-                        <view class="price">￥{{ pro.price | PriceFormat }}</view>
-                        <view class="carts" @click.stop="handAddCarts(pro)">
-                            <view class="carts-add"> <text class="iconfont icon-gouwuche"></text> </view>
-                        </view>
-                    </view>
-                </view>
+    <view class="good-floor-more">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
+        <template v-if="!isRequest">
+            <!-- 商品列表 -->
+            <view class="product-list">
+                <template v-for="(product, index) in productList">
+                    <cm-product class="product" :key="index" :data="product"></cm-product>
+                </template>
             </view>
-        </view>
-        <tui-loadmore :index="2" v-if="hasNextPage"></tui-loadmore>
-        <tui-nomore text="没有更多了" v-else></tui-nomore>
-        <!-- 侧边 -->
-        <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
+            <template v-if="productList.length >= 6">
+                <tui-loadmore :index="3" :visible="loadmore"></tui-loadmore>
+                <tui-nomore :text="loadingText" :visible="!loadmore" backgroundColor="#f7f7f7"></tui-nomore>
+            </template>
+            <!-- 侧边 -->
+            <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
+        </template>
     </view>
 </template>
 
 <script>
-import authorize from '@/common/authorize.js'
-import banner from '@/components/cm-module/homeIndex/banner.vue'
-import { mapGetters, mapActions } from 'vuex'
+import CmProduct from '@/components/cm-module/cm-product/cm-product.vue'
+import { mapGetters } from 'vuex'
 export default {
     components: {
-        banner,
+        CmProduct
     },
     data() {
         return {
-            StaticUrl: this.$Static,
-            title: '', // 页面标题
-            floorId: '', //楼层id
-            userId: 0,
-            skeletonShow: true,
             productList: [], //商品列表
             pageNum: 1,
-            pageSize: 10,
+            pageSize: 6,
+            floorId: undefined,
+            title: '',
             hasNextPage: false,
             isScrollTop: false,
-            isRequest: false
+            isRequest: true,
+            loadmore: false, // 正在加载更多
+            timer: null
         }
     },
-    filters: {
-        //处理金额
-        PriceFormat: function(text) {
-            return Number(text).toFixed(2)
-        }
-    },
-    onLoad(options) {
-        console.log(options)
-        this.floorId = options.floorId
-        this.userId = this.userInfo?.userId
-        this.fetchProductList()
-        uni.setNavigationBarTitle({ 
-            title: options.title
-        })
+    onLoad(option) {
+        this.floorId = option.floorId
+        this.title = option.title
+        this.init()
     },
     computed: {
-        ...mapGetters(['hasLogin', 'userInfo'])
+        ...mapGetters(['userId']),
+        loadingText() {
+            return this.hasNextPage ? '上拉加载更多' : '没有更多了'
+        }
     },
     methods: {
-        ...mapActions('cart',['addToCart']),
+        // 首页初始化
+        async init() {
+            uni.setNavigationBarTitle({
+                title: this.title
+            })
+            try {
+                await this.fetchProductList()
+                this.isRequest = false
+            } catch (e) {
+                this.$util.msg(e.msg, 2000)
+            }
+        },
         //初始化商品数据列表
         fetchProductList() {
-            this.ProductService.QueryProductList({
+            this.loadmore = true
+            return this.ProductService.QueryProductList({
                 pageNum: this.pageNum,
                 pageSize: this.pageSize,
                 floorId: this.floorId
             })
                 .then(response => {
                     let data = response.data
-                    this.productList = data.list
+                    this.productList = [...this.productList, ...data.list]
                     this.hasNextPage = data.hasNextPage
                     this.title = data.title
-                    // 获取购物车商品数量
-                    // this.GetCartNumber();
-                    this.skeletonShow = false
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
-        },
-        //上滑加载更多
-        GetOnReachBottomProductList() {
-            this.pageNum += 1
-            this.ProductService.QueryProductList({
-                pageNum: this.pageNum,
-                pageSize: this.pageSize,
-                floorId: this.floorId
-            })
-                .then(response => {
-                    let data = response.data
-                    this.hasNextPage = data.hasNextPage
-                    this.productList = this.productList.concat(data.list)
+                    this.pageNum++
+                    this.loadmore = false
                 })
                 .catch(error => {
                     this.$util.msg(error.msg, 2000)
                 })
-        },
-        // 商品详情
-        Details(pro) {
-            this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
-        },
-        // 添加到购物车
-        handAddCarts(pro) {
-            this.addToCart({ productId: pro.productId })
-        },
-    },
-    // 监听页面滚动事件
-    onPageScroll(e) {
-        if (e.scrollTop > 400) {
-            this.isScrollTop = true
-        } else {
-            this.isScrollTop = false
         }
     },
-    onPullDownRefresh() {
-        //下拉刷新
-        // this.getHomeInformation()
-        this.pageNum = 1
-        this.fetchProductList()
-        setTimeout(() => {
-            uni.stopPullDownRefresh()
-        }, 2000)
+    onPageScroll(e) {
+        this.isScrollTop = e.scrollTop > 400
     },
     onReachBottom() {
-        console.log('触底了..')
-        if (this.hasNextPage) {
-            this.GetOnReachBottomProductList()
-        }
-    },
-    onShareAppMessage(res) {
-        //分享转发
-        if (res.from === 'button') {
-            // 来自页面内转发按钮
-        }
-        return {
-            title: '国内外知名美容院线护肤品线上商城~',
-            path: 'pages/tabBar/index/index',
-            imageUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-index-share.jpg'
-        }
+        if (!this.hasNextPage) return
+        clearTimeout(this.timer)
+        this.timer = setTimeout(() => {
+            console.log('触底了')
+            this.fetchProductList()
+        }, 200)
     }
 }
 </script>
 
-<style lang="scss">
-page {
-    background-color: #f7f7f7;
-}
-.container {
-    width: 750rxp;
-    height: 100vh;
+<style lang="scss" scoped>
+.good-floor-more {
+    background: $uni-floor-bg-color;
 }
-.navbar-wrap {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    z-index: 100000;
-    box-sizing: border-box;
-    background-image: linear-gradient(0deg, #f83c6c 0%, #fa55bf 100%);
-    background-size: cover;
-    border-bottom: none;
-    &.bgnone {
-        background: rgba(255, 255, 255, 0);
-    }
-    &.bgclass {
-        background: #f94a9b;
-    }
-}
-.navbar-text {
-    font-size: 30rpx;
-    color: #000000;
-    font-weight: 500;
-}
-.navbar-text.center {
-    text-align: center;
-}
-.navbar-text.left {
-    text-align: left;
-    padding-left: 45px;
-}
-.navbar-icon {
-    position: fixed;
+.product-list {
     display: flex;
-    box-sizing: border-box;
-}
-.navbar-icon .iconfont {
-    display: inline-block;
-    overflow: hidden;
-    font-size: 44rpx;
-    padding-right: 40rpx;
-    margin-top: 1px;
-}
-.navbar-icon .icon-iconfonticonfontsousuo1 {
-    color: #000000;
-}
-.navbar-icon view {
-    height: 18px;
-    border-left: 0.5px solid rgba(0, 0, 0, 0.3);
-    margin-top: 6px;
-}
-.navbar-loading {
-    background: #fff;
-    text-align: center;
-}
-.search-input {
-    width: 100%;
-    height: 110rpx;
-    padding: 20rpx 24rpx;
-    box-sizing: border-box;
-    .gosearch-btn {
-        width: 100%;
-        height: 100%;
-        border-radius: 40rpx;
-        background: #f0f0f0;
-        margin: 0 auto;
-        font-size: 28rpx;
-        line-height: 70rpx;
-        color: #8a8a8a;
-        background: #ffffff;
-        position: relative;
-        box-sizing: border-box;
-        padding-left: 80rpx;
-        .search-icon {
-            width: 80rpx;
-            height: 70rpx;
-            position: absolute;
-            left: 0;
-            top: 0;
-            text-align: center;
-            line-height: 70rpx;
-            .icon-iconfonticonfontsousuo1 {
-                margin: 0 6rpx;
-                font-size: $font-size-34;
-                color: #8a8a8a;
-                z-index: 10;
-            }
-        }
-        .search-text {
-            font-size: $font-size-24;
-            line-height: 70rpx;
-            color: #8a8a8a;
-        }
-    }
-}
-.container-section {
-    width: 100%;
-    height: auto;
-    background-color: #f7f7f7;
-    box-sizing: border-box;
+    justify-content: space-between;
+    flex-wrap: wrap;
     padding: 0 24rpx;
-    .product-list {
-        width: 339rpx;
-        height: 532rpx;
-        float: left;
-        margin-right: 24rpx;
+    box-sizing: border-box;
+    .product {
         margin-top: 24rpx;
-        background-color: #ffffff;
-        border-radius: 16rpx;
-        &:nth-child(2n) {
-            margin-right: 0;
-        }
-        .product-list-image {
-            width: 100%;
-            height: 339rpx;
-            float: left;
-            position: relative;
-            .product-image {
-                width: 100%;
-                height: 100%;
-                display: block;
-                border-radius: 16rpx 16rpx 0 0;
-            }
-            .product-icon {
-                width: 68rpx;
-                height: 55rpx;
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 34rpx;
-            }
-        }
-        .product-list-msg {
-            width: 100%;
-            height: 193rpx;
-            box-sizing: border-box;
-            padding: 16rpx 24rpx;
-            float: left;
-            position: relative;
-            .product-msg-name {
-                width: 100%;
-                height: 72rpx;
-                line-height: 35rpx;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                line-clamp: 2;
-                -webkit-box-orient: vertical;
-                font-size: $font-size-26;
-                color: #333333;
-                text-align: justify;
-                float: left;
-            }
-            .product-list-tag {
-                position: relative;
-                z-index: 9;
-                width: 100%;
-                height: 30rpx;
-                margin-top: 8rpx;
-                float: left;
-                .tag {
-                    display: inline-block;
-                    height: 32rpx;
-                    font-size: 22rpx;
-                    line-height: 30rpx;
-                    text-align: center;
-                    color: #f83c6c;
-                    float: left;
-                    margin-right: 10rpx;
-                    &.tag-02 {
-                        width: 80rpx;
-                        background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
-                            no-repeat;
-                        background-size: contain;
-                    }
-                    &.tag-01 {
-                        width: 56rpx;
-                        color: #fff;
-                        background-color: #f83c6c;
-                        border-radius: 4rpx;
-                    }
-                }
-            }
-            .product-list-pri {
-                width: 100%;
-                height: 44rpx;
-                float: left;
-                position: absolute;
-                bottom: 16rpx;
-                left: 0;
-                box-sizing: border-box;
-                padding: 0 24rpx;
-                .price {
-                    float: left;
-                    font-size: $font-size-26;
-                    color: #f83c6c;
-                    font-weight: bold;
-                    line-height: 44rpx;
-                }
-                .carts {
-                    float: right;
-                    .carts-add {
-                        width: 44rpx;
-                        height: 44rpx;
-                        text-align: center;
-                        line-height: 44rpx;
-                        background-color: #ff457b;
-                        border-radius: 50%;
-                        .iconfont {
-                            font-size: 32rpx;
-                            color: #ffffff;
-                        }
-                    }
-                }
-            }
-        }
     }
 }
-.clearfix::after {
-    content: '';
-    display: block;
-    clear: both;
-}
 </style>

pages/tabBar/cart/index.vue

@@ -1,206 +1,72 @@
 <template>
-    <view class="container cart clearfix" v-if="hasLogin">
-        <tui-skeleton
-            v-if="skeletonShow"
-            backgroundColor="#fafafa"
-            borderRadius="10rpx"
-            :isLoading="true"
-            :loadingType="5"
-        ></tui-skeleton>
-        <view class="container-cart-main tui-skeleton" :style="{ paddingTop: isshowDelbtn ? '0rpx' : '80rpx' }">
-            <view class="foot-check-delbtn" v-if="!isshowDelbtn && goodsList.length > 0">
-                <view class="foot-text">
-                    共<text>{{ kindCount }}</text
-                    >件商品</view
-                >
-                <view class="delBtn" @tap.stop="showDelManager">删除</view>
-            </view>
-            <view v-if="!isEmpty" class="container-cart">
+    <view class="cart">
+        <template v-if="!isEmpty">
+            <template v-if="listType !== 'delete'">
+                <!-- 商品统计 / 批量删除商品 -->
+                <view class="cart-top">
+                    <view class="count">共{{ kindCount }}件商品</view>
+                    <view class="btn" @click="showDelManager">删除</view>
+                </view>
                 <!-- TODO -->
                 <view class="receive-coupon">
                     <view class="tip-text">还差￥200可用“满200元减50元”优惠券</view>
                     <view class="btn" @click="couponVisible = true">领券</view>
                 </view>
-                <view class="cart-content" :style="{ paddingBottom: isIphoneX ? '130rpx' : '100rpx' }">
-                    <view class="goods-list">
-                        <view v-for="(item, index) in goodsList" :key="index" class="goods-item clearfix">
-                            <view class="shoptitle">
-                                <!--选择商店的全部商品"-->
-                                <view class="checkbox-box" @click.stop="checkShop(item)">
-                                    <view
-                                        class="checkbox iconfont"
-                                        :class="[item.checked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                    ></view>
-                                </view>
-                                <view class="text">{{ item.name }}</view>
-                            </view>
-                            <view class="productlist">
-                                <view class="goods-pros" v-for="(pros, idx) in item.productList" :key="idx">
-                                    <view class="goods-pros-t">
-                                        <!--选择商品-->
-                                        <view class="checkbox-box" @click.stop="checkProduct(item, pros)">
-                                            <view
-                                                class="checkbox iconfont"
-                                                :class="[pros.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                            ></view>
-                                        </view>
-                                        <view class="pros-img" @click.stop="navToListPage(pros)"
-                                            ><image :src="pros.mainImage ? pros.mainImage : ''" alt=""
-                                        /></view>
-                                        <view class="pros-product">
-                                            <view class="producttitle" @click.stop="navToListPage(pros)">{{
-                                                pros.productName
-                                            }}</view>
-                                            <view class="productspec">规格:{{ pros.unit ? pros.unit : '' }}</view>
-                                            <view class="floor-item-act" v-if="pros.activeStatus == 1">
-                                                <text class="tag tag-01" v-if="!pros.heUserId">自营</text>
-                                                <text class="tag tag-01" v-else>促销</text>
-                                                <text class="tag tag-02" @click.stop="clickPopupShow(pros, 2)"
-                                                    >活动价</text
-                                                >
-                                            </view>
-                                            <view class="productprice">
-                                                <!--使用过滤器对总价改变-->
-                                                <view class="price"><text>￥</text>{{ pros.price | NumFormat }}</view>
-                                                <view class="count">
-                                                    <view class="number-box">
-                                                        <view
-                                                            class="iconfont icon-jianhao"
-                                                            @click="changeCountSub(item, pros)"
-                                                        ></view>
-                                                        <input
-                                                            class="btn-input"
-                                                            type="number"
-                                                            maxlength="4"
-                                                            v-model="pros.productCount"
-                                                            @blur="changeNumber($event, item, pros)"
-                                                            @focus="changeInput(pros)"
-                                                        />
-                                                        <view
-                                                            class="iconfont icon-jiahao"
-                                                            @click="changeCountAdd(item, pros)"
-                                                        ></view>
-                                                    </view>
-                                                </view>
-                                            </view>
-                                        </view>
-                                    </view>
-                                </view>
-                            </view>
-                            <view class="goods-pros-b clearfix" :class="[isshowDelbtn ? 'none' : 'show']">
-                                <view class="sum-none" v-if="item.reducedPrice > 0">
-                                    <text class="money-sign">￥</text>
-                                    <text class="money">{{ item.totalOriginalPrice | NumFormat }}</text>
-                                    <text class="money-reduced"
-                                        >减<text>￥{{ item.reducedPrice | NumFormat }}</text></text
-                                    >
-                                </view>
-                                <view class="sum"
-                                    >合计:<text class="money"
-                                        ><text class="money-sign">￥</text>{{ item.totalPrice | NumFormat }}</text
-                                    ></view
-                                >
-                            </view>
-                        </view>
-                    </view>
-                    <view class="failure-list" v-if="failureList.length > 0">
-                        <view class="failure-title">
-                            <view class="title-txt"
-                                >失效商品<text>{{ failureList.length }}件</text></view
-                            >
-                            <view class="title-btn" @click.stop="deletefailureList"
-                                ><text class="butto">清空失效商品</text></view
-                            >
-                        </view>
-                        <view class="productlist">
-                            <view class="goods-pros" v-for="(failure, failureIdx) in failureList" :key="failureIdx">
-                                <view class="goods-pros-t" @click.stop="navToListPage(failure)">
-                                    <!--选择商品-->
-                                    <view
-                                        class="checkbox-box"
-                                        @click.stop="ischeckFailure(failure)"
-                                        v-if="isshowDelbtn"
-                                    >
-                                        <button
-                                            class="checkbox iconfont"
-                                            :class="[failure.productsChecked ? 'icon-xuanze' : 'icon-weixuanze']"
-                                        ></button>
-                                    </view>
-                                    <text class="img-tip">失效</text>
-                                    <view class="pros-img">
-                                        <image :src="failure.mainImage ? failure.mainImage : ''" alt="" />
-                                    </view>
-                                    <view class="pros-product">
-                                        <view class="producttitle">{{ failure.name }}</view>
-                                        <view class="productspec">规格:{{ failure.unit ? failure.unit : '' }}</view>
-                                        <view class="productstate">商品已下架</view>
-                                    </view>
-                                </view>
-                            </view>
-                        </view>
-                    </view>
+            </template>
+            <view>
+                <!-- 购物车列表 -->
+                <template v-for="(cart, index) in goodsList">
+                    <cm-cart-product
+                        class="product-list"
+                        :listType="listType"
+                        :key="index"
+                        :data="cart"
+                        vkey="productList"
+                        @chooseAll="chooseAll"
+                        @chooseOne="chooseOne"
+                    ></cm-cart-product>
+                </template>
+                <!-- 失效商品列表 -->
+                <cm-cart-product
+                    class="product-list"
+                    :key="index"
+                    :data="failureList"
+                    listType="expired"
+                ></cm-cart-product>
+            </view>
+
+            <!-- 底部按钮 -->
+            <view class="footer">
+                <view class="radio" @click="checkAll">
+                    <text class="iconfont" :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"></text>
+                    <text class="tip">全选</text>
                 </view>
-                <!-- 脚部菜单 -->
-                <view class="footer">
-                    <view class="footer-le">
-                        <view class="foot-check checkbox-box" @tap.stop="checkAll()">
-                            <button
-                                class="checkbox iconfont"
-                                :class="[isCheckAll ? 'icon-xuanze' : 'icon-weixuanze']"
-                            ></button>
-                            <view class="text">全选</view>
+                <template v-if="!isshowDelbtn">
+                    <view class="center">
+                        <view class="row">
+                            <text>总价：</text> <text class="total-price">￥{{ allPrice | NumFormat }}</text>
                         </view>
-
-                        <view class="sum">
-                            <view v-if="!isshowDelbtn" class="sum-price">
-                                <view class="row">
-                                    <text>总价:</text> <text class="money-sign">￥</text>
-                                    <text class="money">{{ allPrice | NumFormat }}</text>
-                                </view>
-                                <view class="row">
-                                    <text>共减</text> <text class="discounted-price">￥200.00</text>
-                                    <text @click="showDiscountedDetail">优惠明细</text>
-                                    <text
-                                        class="iconfont"
-                                        :class="showDitail ? 'tui-icon-arrowdown' : 'tui-icon-arrowup'"
-                                    ></text>
-                                </view>
-                            </view>
+                        <!-- TODO -->
+                        <view class="row">
+                            <text>共减</text> <text class="discounted-price">￥200.00</text>
+                            <text @click="showDiscountedDetail">优惠明细</text>
+                            <text
+                                class="iconfont"
+                                :class="showDitail ? 'tui-icon-arrowdown' : 'tui-icon-arrowup'"
+                            ></text>
                         </view>
                     </view>
-                    <view v-if="!isshowDelbtn" class="footer-ri">
-                        <view class="btn hanld-btn" @tap="toConfirmation">去结算({{ allCount }})</view>
-                    </view>
-                    <view v-else class="footer-del">
-                        <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
-                        <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
-                    </view>
-                </view>
-            </view>
-            <view v-else class="cart-content empty">
-                <view class="empty-container">
-                    <image
-                        class="empty-container-image"
-                        :src="StaticUrl + 'icon-empty-cart.png'"
-                        mode="aspectFit"
-                    ></image>
-                    <text class="error-text">购物车空空的，快去逛逛吧~</text>
+                    <view class="submit" @click="toConfirmation">去结算({{ allCount }})</view>
+                </template>
+                <view v-else class="footer-del">
+                    <view class="btn btn-cancel" @tap.stop="hideDelManage">取消</view>
+                    <view class="btn btn-confirm" @tap.stop="deleteList">删除</view>
                 </view>
             </view>
+        </template>
+        <view class="empty" v-else>
+            <cm-empty :image="StaticUrl + 'icon-empty-cart.png'" message="购物车空空的，快去逛逛吧~"></cm-empty>
         </view>
-        <!-- 操作弹窗 -->
-        <tui-modal
-            :show="modal"
-            @click="handleClick"
-            @cancel="hideModal"
-            :content="contentModalText"
-            color="#333"
-            :size="32"
-            shape="circle"
-            :maskClosable="false"
-        ></tui-modal>
-        <!-- 促销活动弹窗 -->
-        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
         <!-- 优惠券列表 TODO-->
         <cm-coupon-list
             title="优惠券"
@@ -227,24 +93,34 @@
                 </view>
             </template>
         </cm-drawer>
-        <!-- 透明模态层 -->
-        <modal-layer v-if="modallayer"></modal-layer>
+        <!-- 操作弹窗 -->
+        <tui-modal
+            :show="modal"
+            @click="handleClick"
+            @cancel="hideModal"
+            :content="contentModalText"
+            color="#333"
+            :size="32"
+            shape="circle"
+            :maskClosable="false"
+        ></tui-modal>
     </view>
 </template>
+
 <script>
 import authorize from '@/common/authorize.js'
-import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
-import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
 import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
 import CmDrawer from '@/components/cm-module/cm-drawer/cm-drawer.vue'
+import CmCartProduct from '@/components/cm-module/cm-cart-product/cm-cart-product.vue'
+import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 
 export default {
     components: {
-        activiPopup,
-        modalLayer,
         CmCouponList,
-        CmDrawer
+        CmDrawer,
+        CmCartProduct,
+        CmEmpty
     },
     data() {
         return {
@@ -264,7 +140,8 @@ export default {
             contentModalText: '',
             deleteType: 0,
             couponVisible: false,
-            showDitail: false
+            showDitail: false,
+            listType: 'list'
         }
     },
     onLoad() {
@@ -361,21 +238,12 @@ export default {
             })
             this.getCheckedProductId()
         },
-        // 勾选单个商品
-        checkProduct(shop, product) {
-            this.selectProduct({
-                shopId: shop.shopId,
-                productId: product.productId,
-                checked: !product.productsChecked
-            })
+        // 勾选供应商下所有商品
+        chooseAll() {
             this.isSelectAll()
         },
-        // 勾选商店所有商品
-        checkShop(shop) {
-            this.selectAllShopProduct({
-                shopId: shop.shopId,
-                checked: !shop.checked
-            })
+        // 勾选单核商品
+        chooseOne() {
             this.isSelectAll()
         },
         // 勾选全部商品
@@ -483,12 +351,14 @@ export default {
         //显示删除商品管理
         showDelManager() {
             this.isshowDelbtn = true
+            this.listType = 'delete'
         },
         //隐藏删除商品管理
         hideDelManage() {
             this.selectAllFailure(false)
             this.getCheckedProductId()
             this.isshowDelbtn = false
+            this.listType = 'list'
         },
         //删除购物车商品
         deleteList() {
@@ -518,6 +388,7 @@ export default {
                 //一键删除失效商品
                 this.removeFailureFromCart().finally(() => {
                     this.isshowDelbtn = false
+                    this.listType = 'list'
                 })
             }
             this.modal = false
@@ -560,755 +431,193 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-page {
+.cart {
+    padding-bottom: 124rpx;
     background: #f7f7f7;
-    height: auto;
-}
-.discounted-ditail {
-    padding: 52rpx 8rpx 0;
-    .row {
+    min-height: 100%;
+    box-sizing: border-box;
+    .cart-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 12rpx 0;
-        text {
+        padding: 0 24rpx;
+        width: 750rpx;
+        height: 80rpx;
+        background: #f7f7f7;
+        box-sizing: border-box;
+        .count {
             font-size: 30rpx;
             color: #333333;
-            &.red {
-                color: #f94b4b;
-            }
-        }
-        &.total{
-            font-size: 30rpx;
-            font-weight: 600;
-        }
-    }
-    .tip {
-        padding: 12rpx 0;
-        font-size: 26rpx;
-        color: #999999;
-    }
-}
-.receive-coupon {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24rpx;
-    background: #fff;
-    .tip-text {
-        font-size: 26rpx;
-        color: #ff457b;
-    }
-    .btn {
-        width: 88rpx;
-        height: 42rpx;
-        background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
-        border-radius: 28rpx;
-        font-size: 26rpx;
-        color: #ffffff;
-        text-align: center;
-        line-height: 42rpx;
-    }
-}
-.cart-content {
-    position: relative;
-}
-.container-cart-main.none {
-    display: none;
-}
-.container-cart-main.show {
-    display: block;
-}
-.cart-content.empty.none {
-    display: none;
-}
-.cart-content.empty.show {
-    display: block;
-}
-.container-cart.show {
-    display: block;
-}
-.container-cart.none {
-    display: none;
-}
-.empty-container.none {
-    display: none;
-}
-.empty-container.show {
-    display: flex;
-}
-.foot-check-delbtn {
-    width: 100%;
-    height: 80rpx;
-    position: fixed;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    padding: 15rpx 24rpx;
-    background-color: #f7f7f7;
-    z-index: 990;
-    .foot-text {
-        font-size: $font-size-26;
-        height: 50rpx;
-        line-height: 50rpx;
-        color: #666666;
-        float: left;
-        padding-left: 10rpx;
-        text {
-            margin: 0 6rpx;
         }
-    }
-    .delBtn {
-        width: 100rpx;
-        display: inline-block;
-        padding: 0 15rpx;
-        font-size: $font-size-26;
-        height: 50rpx;
-        line-height: 50rpx;
-        border-radius: 30rpx;
-        background: #ffffff;
-        border: 1px solid #ff457b;
-        color: #ff457b;
-        float: right;
-        text-align: center;
-        &.none {
-            display: none;
-        }
-    }
-}
-.checkbox-box {
-    display: flex;
-    align-items: center;
-    .checkbox {
-        display: flex;
-        margin: 0;
-        padding: 0 5rpx;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-        text-align: center;
-        text-decoration: none;
-        border-radius: 0;
-        -webkit-tap-highlight-color: transparent;
-        overflow: hidden;
-        background-color: #ffffff;
-        font-size: 36rpx;
-        color: #999999;
-        &.icon-xuanze {
-            color: $color-system;
-        }
-    }
-    &.disabled {
-        .checkbox {
-            color: #999999;
+        .btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 88rpx;
+            height: 42rpx;
+            background: #fff8fd;
+            border: 1rpx solid #ff457b;
+            border-radius: 24rpx;
+            font-size: 26rpx;
+            color: #ff457b;
         }
     }
-    .text {
-        font-size: $font-size-24;
-        margin-left: 10rpx;
-    }
-}
-.goods-list {
-    width: 100%;
-    height: auto;
-    background-color: #f7f7f7;
-    .goods-item {
-        width: 702rpx;
-        padding: 0 24rpx;
-        background: #ffffff;
-        margin-bottom: 24rpx;
-    }
-    .shoptitle {
+    .receive-coupon {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        height: 80rpx;
-        line-height: 80rpx;
-        .checkbox-box {
-            padding: 10rpx;
+        padding: 24rpx;
+        background: #fff;
+        .tip-text {
+            font-size: 26rpx;
+            color: #ff457b;
         }
-        .text {
-            width: 450rpx;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-left: 20rpx;
-            font-size: $font-size-28;
-            color: $text-color;
-            text-align: left;
-            font-weight: bold;
+        .btn {
+            width: 88rpx;
+            height: 42rpx;
+            background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
+            border-radius: 28rpx;
+            font-size: 26rpx;
+            color: #ffffff;
+            text-align: center;
+            line-height: 42rpx;
         }
     }
-    .goods-pros {
-        width: 100%;
-        height: auto;
-        margin-bottom: 20rpx;
-    }
-    .goods-pros-t {
+    .footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        z-index: 899;
         display: flex;
+        justify-content: space-between;
         align-items: center;
         width: 100%;
-        height: 210rpx;
-        padding: 0 0 26rpx 0;
-        .checkbox-box {
-            padding: 10rpx;
-        }
-        .pros-img {
-            width: 210rpx;
-            height: 100%;
-            border-radius: 10rpx;
-            margin: 0 20rpx;
-            border: 1px solid #f3f3f3;
-            image {
-                width: 100%;
-                height: 100%;
-                border-radius: 10rpx;
-            }
-        }
-    }
-    .goods-pros-b {
-        width: 100%;
-        height: auto;
-        padding: 0 0 24rpx 0;
+        height: 100rpx;
         box-sizing: border-box;
-        &.show {
-            display: block;
-        }
-        &.none {
-            display: none;
-        }
-        .sum-none {
-            width: 100%;
-            height: 48rpx;
-            line-height: 48rpx;
-            color: $text-color;
-            float: left;
-            text-align: right;
-            .money {
-                font-size: $font-size-26;
-                color: #999999;
-                text-decoration: line-through;
-            }
-            .money-sign {
-                font-size: $font-size-26;
-                color: #999999;
-                text-decoration: line-through;
-            }
-            .money-reduced {
-                margin-left: 10rpx;
-                font-size: $font-size-26;
-                color: $color-system;
-                .iconfont {
-                    font-size: $font-size-34;
-                }
-            }
-        }
-        .sum {
-            width: 100%;
-            height: 40rpx;
-            font-size: $font-size-26;
-            line-height: 40rpx;
-            color: $text-color;
-            float: left;
-            display: flex;
-            justify-content: flex-end;
-            font-weight: bold;
-            .money {
-                color: $color-system;
-                font-size: $font-size-26;
-            }
-            .money-sign {
-                font-size: $font-size-24;
-                color: $color-system;
+        padding: 0 24rpx;
+        border-top: 1rpx solid #eee;
+        background: #ffffff;
+        .radio {
+            font-size: 36rpx;
+            color: #b2b2b2;
+            .icon-xuanze {
+                color: #f83c6c;
             }
-        }
-    }
-    .pros-product {
-        width: 416rpx;
-        height: 100%;
-        line-height: 36rpx;
-        font-size: $font-size-28;
-        position: relative;
-        .producttitle {
-            width: 100%;
-            display: inline-block;
-            height: auto;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            word-break: break-all;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            overflow: hidden;
-            margin-bottom: 15rpx;
-            .no-text {
-                display: inline-block;
-                height: 36rpx;
-                padding: 0 12rpx;
-                line-height: 36rpx;
-                background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
-                border-radius: 18rpx;
-                text-align: center;
-                color: #ffffff;
-                font-size: $font-size-28;
-                margin-right: 24rpx;
+            .tip {
+                font-size: 30rpx;
+                color: #333333;
+                margin-left: 6rpx;
             }
         }
-        .productspec {
-            height: 36rpx;
-            color: #999999;
-            font-size: $font-size-26;
-        }
-        .productprice {
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            height: 48rpx;
-            margin: 30rpx 0 0 0;
-            .price {
-                line-height: 48rpx;
-                font-size: $font-size-26;
-                width: 48%;
-                color: $color-system;
-                float: left;
-                font-weight: bold;
-                &.disabled {
-                    color: #999999;
-                    text-decoration: line-through;
-                }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: $color-system;
+        .row {
+            &:nth-child(1) {
+                font-size: 26rpx;
+                color: #333333;
+                .total-price {
+                    color: #ff457b;
                 }
             }
-            .count {
-                height: 100%;
-                float: right;
-                position: relative;
-                &.show {
-                    display: block;
-                }
-                &.none {
-                    display: none;
-                }
-                .count-tips {
-                    width: auto;
-                    display: inline-block;
-                    padding: 0 15rpx;
-                    line-height: 44rpx;
-                    height: 44rpx;
-                    border-radius: 22rpx;
-                    background: $btn-confirm;
-                    font-size: $font-size-24;
-                    text-align: center;
-                    color: #ffffff;
-                    position: absolute;
-                    top: -60rpx;
-                    left: -5rpx;
-                    z-index: 5;
-                    &.step {
-                        left: -217rpx;
-                    }
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        bottom: -30rpx;
-                        right: 15rpx;
-                        z-index: 1;
-                        width: 0;
-                        height: 0;
-                        border-width: 18rpx;
-                        border-style: solid;
-                        border-color: $color-system transparent transparent transparent;
-                    }
-                }
-                .number-box {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border: 2rpx solid #e1e1e1;
-                    border-radius: 30rpx;
-                    height: 48rpx;
-                    margin-left: 20rpx;
-                    .iconfont {
-                        font-size: $font-size-24;
-                        padding: 0 14rpx;
-                        color: #666666;
-                        text-align: center;
-                        line-height: 48rpx;
-                        font-weight: bold;
-                        background: #ffffff;
-                        &.icon-jianhao {
-                            border-radius: 30rpx 0 0 30rpx;
-                        }
-                        &.icon-jiahao {
-                            border-radius: 0 30rpx 30rpx 0;
-                        }
-                    }
-                    .btn-input {
-                        width: 56rpx;
-                        height: 44rpx;
-                        line-height: 44rpx;
-                        border-radius: 4rpx;
-                        text-align: center;
-                        font-size: $font-size-24;
-                        color: #333333;
-                        background-color: #f7f7f7;
-                    }
-                }
-                .uni-numbox {
-                    position: absolute;
-                    left: 45rpx;
-                    bottom: 0;
-                    .uni-numbox-minus,
-                    .uni-numbox-plus {
-                        width: 50rpx;
-                        line-height: 40rpx;
-                    }
-                    .uni-numbox-value {
-                        font-size: $font-size-28;
-                        width: 60rpx;
-                    }
-                }
+            &:nth-child(2) {
+                margin-top: 6rpx;
+                font-size: 24rpx;
+                color: #ff457b;
             }
-        }
-        .floor-item-act {
-            width: 100%;
-            height: 30rpx;
-            margin-top: 8rpx;
-            float: left;
-            .tag {
-                display: inline-block;
-                height: 32rpx;
-                font-size: 22rpx;
-                line-height: 30rpx;
-                text-align: center;
-                color: #f83c6c;
-                float: left;
-                margin-right: 10rpx;
-                &.tag-02 {
-                    width: 80rpx;
-                    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
-                        no-repeat;
-                    background-size: contain;
-                }
-                &.tag-01 {
-                    width: 56rpx;
-                    color: #fff;
-                    background-color: #f83c6c;
-                    border-radius: 4rpx;
-                }
+            .discounted-price {
+                margin-right: 32rpx;
             }
         }
-    }
-}
-.failure-list {
-    width: 702rpx;
-    height: auto;
-    padding: 0 24rpx;
-    margin-top: 20rpx;
-    background: #ffffff;
-    .failure-title {
-        width: 100%;
-        height: 82rpx;
-        line-height: 82rpx;
-        font-size: $font-size-28;
-        border-bottom: 1px solid #ebebeb;
-        .title-txt {
-            float: left;
-            color: #666666;
-            text-align: left;
-        }
-        .title-btn {
-            float: right;
-            color: $color-system;
-            text-align: right;
+        .submit {
+            width: 210rpx;
+            height: 80rpx;
+            background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
+            border-radius: 40rpx;
+            font-size: 30rpx;
+            color: #ffffff;
+            text-align: center;
             line-height: 80rpx;
-            .butto {
-                display: inline-block;
-                padding: 0 15rpx;
-                font-size: $font-size-26;
-                height: 50rpx;
-                line-height: 50rpx;
-                border-radius: 30rpx;
-                background: #fff8fd;
-                border: 1px solid #ff457b;
-                color: #ff457b;
-                margin-top: 15rpx;
-            }
         }
-    }
-    .productlist {
-        padding-top: 10rpx;
-        .goods-pros {
-            width: 100%;
-            height: auto;
-            padding: 20rpx 0;
-        }
-        .goods-pros-t {
+        .footer-del {
+            width: 420rpx;
+            height: 100rpx;
+            position: absolute;
+            padding-left: 200rpx;
+            background: #ffffff;
+            right: 0;
+            top: 0;
+            z-index: 1000;
+            box-sizing: border-box;
+            padding: 10rpx 0;
             display: flex;
-            align-items: center;
-            width: 100%;
-            height: 210rpx;
-            position: relative;
-            .img-tip {
-                display: block;
-                width: 72rpx;
-                height: 36rpx;
-                line-height: 36rpx;
-                font-size: $font-size-24;
-                text-align: center;
-                color: #ffffff;
-                border-radius: 24rpx;
-                background: rgba(51, 51, 51, 0.3);
-                // position: absolute;
-                // left: 0;
-                // top: 0;
-            }
-            .checkbox-box {
-                padding: 10rpx;
-            }
-            .pros-img {
-                width: 180rpx;
-                height: 100%;
-                border-radius: 10rpx;
-                margin: 0 20rpx;
-                border: 1px solid #f3f3f3;
-                position: relative;
-                image {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 10rpx;
-                }
-            }
-            .pros-marks {
-                width: 730rpx;
-                height: 250rpx;
-                z-index: 90;
-                background: rgba(0, 0, 0, 0.05);
-                position: absolute;
-                left: -20rpx;
-                top: -20rpx;
-            }
-        }
-        .goods-pros-b {
-            width: 622rpx;
-            margin-left: 84rpx;
-            height: 40rpx;
-            padding: 0 0 26rpx 0;
-            // border-top: 1px solid #EBEBEB;
             &.show {
-                display: block;
+                animation: showDelbtn 0s linear both;
             }
             &.none {
-                display: none;
+                animation: hideDelbtn 0s linear both;
             }
-            .sum {
-                font-size: $font-size-28;
-                line-height: 40rpx;
-                color: $text-color;
-                display: flex;
-                justify-content: flex-end;
-                .money {
-                    color: #ff2a2a;
-                    font-size: $font-size-28;
-                }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: #ff2a2a;
-                }
-            }
-        }
-        .pros-product {
-            width: 402rpx;
-            height: 100%;
-            line-height: 36rpx;
-            font-size: $font-size-28;
-            position: relative;
-            .producttitle {
-                width: 100%;
-                display: inline-block;
-                height: auto;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                word-break: break-all;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                margin-bottom: 8rpx;
-                .no-text {
-                    display: inline-block;
-                    height: 36rpx;
-                    padding: 0 12rpx;
-                    line-height: 36rpx;
-                    background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
-                    border-radius: 18rpx;
-                    text-align: center;
-                    color: #ffffff;
-                    font-size: $font-size-28;
-                    margin-right: 24rpx;
-                }
-            }
-            .productspec {
-                height: 36rpx;
-                color: #999999;
-                font-size: $font-size-26;
-                margin-top: 20rpx;
-            }
-            .productstate {
+            .btn {
+                flex: 1;
+                margin: 0 8rpx;
+                height: 100%;
+                line-height: 80rpx;
                 font-size: $font-size-28;
-                height: 44rpx;
-                color: #ff2a2a;
-                position: absolute;
-                bottom: 0;
-                left: 0;
-            }
-        }
-    }
-}
-.footer {
-    width: 100%;
-    background-color: #ffffff;
-    height: 100rpx;
-    position: fixed;
-    bottom: 0rpx;
-    z-index: 100;
-    border-top: 1px solid #EFEFEF;
-    .footer-le {
-        width: 520rpx;
-        height: 100%;
-        padding: 10rpx 24rpx;
-        float: left;
-        box-sizing: border-box;
-        .foot-check {
-            width: 100rpx;
-            float: left;
-            line-height: 80rpx;
-            font-size: $font-size-24;
-            .checkbox {
-                width: 40rpx;
+                color: #ffffff;
                 text-align: center;
+                float: left;
+                border-radius: 40rpx;
             }
-            .text {
-                width: 60rpx;
-                float: right;
+            .btn.btn-cancel {
+                background: #f7f7f7;
+                color: #b2b2b2;
             }
-        }
-        .sum {
-            width: 360rpx;
-            height: 100%;
-            float: right;
-            box-sizing: border-box;
-            padding: 0 10rpx;
-            .sum-price {
-                display: flex;
-                justify-content: center;
-                align-items: flex-end;
-                flex-direction: column;
-                width: 100%;
-                height: 80rpx;
-                font-size: $font-size-30;
-                color: $text-color;
-                float: left;
-                font-weight: normal;
-                .money {
-                    color: $color-system;
+            .btn.btn-confirm {
+                background: $btn-confirm;
+                color: #ffffff;
+            }
+            @keyframes showDelbtn {
+                0% {
+                    transform: translateX(0);
                 }
-                .money-sign {
-                    font-size: $font-size-24;
-                    color: $color-system;
+                100% {
+                    transform: translateX(-100%);
                 }
-                .discounted-price {
-                    margin-right: 32rpx;
+            }
+            @keyframes hideDelbtn {
+                0% {
+                    transform: translateX(-100%);
                 }
-                .row {
-                    &:nth-child(2) {
-                        font-size: 24rpx;
-                        color: #ff457b;
-                    }
+                100% {
+                    transform: translateX(0);
                 }
             }
         }
     }
-    .footer-ri {
-        width: 230rpx;
-        height: 100%;
-        float: right;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        z-index: 999;
-        box-sizing: border-box;
-        padding: 13rpx 15rpx;
-        &.none {
-            display: none;
-        }
-        .btn {
-            width: 200rpx;
-            height: 100%;
-            background: $btn-confirm;
-            font-size: $font-size-28;
-            line-height: 80rpx;
-            color: #ffffff;
+    .discounted-ditail {
+        padding: 52rpx 8rpx 0;
+        .row {
             display: flex;
-            border-radius: 40rpx;
-            justify-content: center;
+            justify-content: space-between;
             align-items: center;
-        }
-    }
-    .footer-del {
-        width: 420rpx;
-        height: 100rpx;
-        position: absolute;
-        padding-left: 200rpx;
-        background: #ffffff;
-        right: 0;
-        top: 0;
-        z-index: 1000;
-        box-sizing: border-box;
-        padding: 10rpx 0;
-        display: flex;
-        &.show {
-            animation: showDelbtn 0s linear both;
-        }
-        &.none {
-            animation: hideDelbtn 0s linear both;
-        }
-        .btn {
-            flex: 1;
-            margin: 0 8rpx;
-            height: 100%;
-            line-height: 80rpx;
-            font-size: $font-size-28;
-            color: #ffffff;
-            text-align: center;
-            float: left;
-            border-radius: 40rpx;
-        }
-        .btn.btn-cancel {
-            background: #f7f7f7;
-            color: #b2b2b2;
-        }
-        .btn.btn-confirm {
-            background: $btn-confirm;
-            color: #ffffff;
-        }
-        @keyframes showDelbtn {
-            0% {
-                transform: translateX(0);
+            padding: 12rpx 0;
+            text {
+                font-size: 30rpx;
+                color: #333333;
+                &.red {
+                    color: #f94b4b;
+                }
             }
-            100% {
-                transform: translateX(-100%);
+            &.total {
+                font-size: 30rpx;
+                font-weight: 600;
             }
         }
-        @keyframes hideDelbtn {
-            0% {
-                transform: translateX(-100%);
-            }
-            100% {
-                transform: translateX(0);
-            }
+        .tip {
+            padding: 12rpx 0;
+            font-size: 26rpx;
+            color: #999999;
         }
     }
+    .empty{
+        height: 80vh;
+    }
 }
 </style>

pages/tabBar/index/index.vue

@@ -1,104 +1,65 @@
 <template>
-    <view class="home tui-skeleton clearfix">
-        <tui-skeleton v-if="skeletonShow" :isLoading="true" :loadingType="2"></tui-skeleton>
-        <!-- 首页自定义导航栏 -->
-        <view
-            class="navbar-wrap"
-            :style="{ height: CustomBar + 55 + 'px', paddingTop: StatusBar + 'px' }"
-            :class="inputActive"
-        >
-            <view
-                class="navbar-text"
-                :style="{
-                    color: navbarData.textColor ? navbarData.textColor : '',
-                    lineHeight: CustomBar - StatusBar + 'px;',
-                    fontSize: fontSizeSetting + 'px;',
-                    paddingLeft: navbarData.textLeft ? '' : 12 + 'px'
-                }"
-                :class="platformClass"
-            >
-                {{ navbarData.title ? navbarData.title : ' ' }}
-            </view>
-            <view class="search-input">
-                <view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
-                    <view class="search-icon"> <text class="iconfont icon-sousuo"></text> </view>
-                    <view class="search-text">搜索商品</view>
+    <view class="home">
+        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
+        <template v-if="!isRequest">
+            <!-- 首页自定义导航栏 -->
+            <view class="search-input" :class="{ fixed: isSticky }">
+                <view class="search-content" @click="this.$api.navigateTo(clickPath)">
+                    <text class="iconfont icon-sousuo"></text> <view class="search-text">搜索商品</view>
                 </view>
             </view>
-        </view>
-        <!-- 主页内容 -->
-        <view class="container-home " :style="{ paddingTop: CustomBar + 'px' }">
-            <!-- 轮播 -->
-            <banner :list="bannerImageList"></banner>
-        </view>
-        <!-- 商品列表 -->
-        <view class="container-section">
-            <view class="clearfix" v-for="(floor, index1) in productFloor" :key="index1">
-                <!-- 楼层标题区域 -->
-                <view class="tui-group-name">
-                    <view class="tui-group-title ">
-                        <view class="tui-group-l">{{ floor.title }}</view>
-                        <view class="tui-group-r" @click="NavToDetailPage(floor)" v-if="floor.productList.length >= 6">
-                            <text>更多</text> <tui-icon name="arrowright" :size="20" margin="0 0 0 -4rpx"></tui-icon>
-                        </view>
-                    </view>
-                    <view class="tui-sub__desc">{{ floor.description }}</view>
-                </view>
-                <!-- 商品列表区域 -->
-                <view
-                    class="product-list"
-                    v-for="(pro, index2) in floor.productList"
-                    :key="index2"
-                    @click.stop="Details(pro)"
-                >
-                    <view class="product-list-image">
-                        <image class="product-image" :src="pro.mainImage" mode=""></image>
-                        <!-- 推荐 -->
-                        <image
-                            class="product-icon"
-                            :src="StaticUrl + 'recommend.png'"
-                            mode=""
-                            v-if="pro.recommend === '1'"
-                        ></image>
-                    </view>
-                    <view class="product-list-msg">
-                        <view class="product-msg-name">{{ pro.name }}</view>
-                        <view class="product-list-tag" v-if="pro.activeStatus == 1">
-                            <text class="tag tag-02">活动价</text>
+            <!-- 主页内容 -->
+            <view class="swiper-content" :class="{ top: isSticky }">
+                <!-- 轮播 -->
+                <banner :list="bannerImageList"></banner>
+            </view>
+            <!-- 商品列表 -->
+            <view class="container-section">
+                <view v-for="(floor, i) in productFloor" :key="i">
+                    <!-- 楼层标题区域 -->
+                    <view class="floor-title">
+                        <view class="title">
+                            <view class="name">{{ floor.title }}</view>
+                            <view class="desc">{{ floor.description }}</view>
                         </view>
-                        <view class="product-list-pri">
-                            <view class="price">￥{{ pro.price | PriceFormat }}</view>
-                            <view class="carts" @click.stop="handAddCarts(pro)">
-                                <view class="carts-add"> <text class="iconfont icon-gouwuche"></text> </view>
-                            </view>
+                        <view class="more" @click="navToDetailPage(floor)">
+                            <template v-if="floor.productList.length >= 6">
+                                <text>更多</text> <text class="iconfont tui-icon-arrowright"></text>
+                            </template>
                         </view>
                     </view>
+                    <!-- 商品列表区域 -->
+                    <view class="product-list">
+                        <template v-for="(product, index) in floor.productList">
+                            <cm-product class="product" :key="index" :data="product"></cm-product>
+                        </template>
+                    </view>
                 </view>
             </view>
-        </view>
-        <!-- 侧边 -->
-        <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
-        <!-- 活动弹窗 -->
-        <active-popup
-            :visible="activePopupVisible"
-            :image="StaticUrl + 'icon-coupons-news.png'"
-            @click="activeClick"
-            @closed="activeClosed"
-        ></active-popup>
-        <!-- 领取优惠券提醒 -->
-        <selector-coupons
-            :top="CustomBar"
-            :visible="tipVisible"
-            title="呵呵商城"
-            subTitle="您已获得优惠券奖励，赶紧去领取吧！"
-            :image="StaticUrl + 'logo.png'"
-        ></selector-coupons>
+            <!-- 侧边 -->
+            <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
+            <!-- 活动弹窗 -->
+            <active-popup
+                :visible="activePopupVisible"
+                :image="StaticUrl + 'icon-coupons-news.png'"
+                @click="activeClick"
+                @closed="activeClosed"
+            ></active-popup>
+            <!-- 领取优惠券提醒 -->
+            <selector-coupons
+                :visible="tipVisible"
+                title="呵呵商城"
+                subTitle="您已获得优惠券奖励，赶紧去领取吧！"
+                :image="StaticUrl + 'logo.png'"
+            ></selector-coupons>
+        </template>
     </view>
 </template>
 
 <script>
 import authorize from '@/common/authorize.js'
 import banner from '@/components/cm-module/homeIndex/banner.vue'
+import CmProduct from '@/components/cm-module/cm-product/cm-product.vue'
 import ActivePopup from '@/components/cm-module/active-popup/active-popup.vue'
 import SelectorCoupons from '@/components/cm-module/selector-coupons/selector-coupons.vue'
 import { mapGetters, mapMutations, mapActions } from 'vuex'
@@ -106,96 +67,65 @@ export default {
     components: {
         banner,
         ActivePopup,
-        SelectorCoupons
+        SelectorCoupons,
+        CmProduct
     },
     data() {
         return {
             StaticUrl: this.$Static,
-            navbarData: {
-                //顶部自定义导航
-                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
-                showSearch: 0,
-                title: '呵呵商城', // 导航栏 中间的标题
-                haveBack: false,
-                textLeft: this.$store.getters.isIphone,
-                textColor: '#FFFFFF'
-            },
-            inputActive: 'bgnone',
+            isSticky: false,
             clickPath: '/pages/goods/search',
-            CustomBar: this.CustomBar, // 顶部导航栏高度
-            StatusBar: this.StatusBar,
-            fontSizeSetting: this.fontSizeSetting,
-            screenWidth: this.screenWidth,
-            capsule: this.capsule,
-            platformClass: this.platformClass,
-            modallayer: false,
-            skeletonShow: true,
             productFloor: [], //商品列表
             bannerImageList: [], //轮播
             pageNum: 1,
             pageSize: 20,
             hasNextPage: false,
             isScrollTop: false,
-            isRequest: false,
+            isRequest: true,
             activePopupVisible: false, // 活动弹窗
-            tipVisible: true //优惠券领取提示
-        }
-    },
-    filters: {
-        //处理金额
-        PriceFormat: function(text) {
-            return Number(text).toFixed(2)
+            tipVisible: false //优惠券领取提示
         }
     },
-    async onLoad() {
-        this.modallayer = false
-        this.wechatlogin()
-        this.GetHomeBanner()
-        this.GetHomeProductList()
-        setTimeout(() => {
-            this.tipVisible = false
-        }, 5000)
+    onLoad() {
+        this.init()
     },
     computed: {
-        ...mapGetters(['hasLogin', 'userIdentity', 'userId'])
+        ...mapGetters(['hasLogin'])
     },
     methods: {
-        ...mapMutations('app', ['login', 'logout', 'updateStatus']),
         ...mapActions('user', ['wechatlogin']),
-        ...mapActions('cart', ['addToCart', 'getCartNumber']),
-
+        ...mapActions('cart', ['getCartNumber']),
+        // 首页初始化
+        async init() {
+            this.wechatlogin()
+            try {
+                await this.GetHomeBanner()
+                await this.GetHomeProductList()
+                this.isRequest = false
+            } catch (e) {
+                this.$util.msg(e.msg, 2000)
+            }
+            setTimeout(() => {
+                this.tipVisible = false
+            }, 5000)
+        },
+        //初始化首页数据
         GetHomeBanner() {
-            //初始化首页数据
-            this.CommonService.GetProductCarousel()
-                .then(response => {
-                    let data = response.data
-                    this.bannerImageList = data
-                    this.skeletonShow = false
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
+            return this.CommonService.GetProductCarousel().then(response => {
+                let data = response.data
+                this.bannerImageList = data
+            })
         },
+        //初始化首页商品数据
         GetHomeProductList() {
-            //初始化首页商品数据
-            this.ProductService.QueryProductFloor()
-                .then(response => {
-                    this.productFloor = response.data
-                })
-                .catch(error => {
-                    this.$util.msg(error.msg, 2000)
-                })
+            return this.ProductService.QueryProductFloor().then(response => {
+                this.productFloor = response.data
+            })
         },
-        NavToDetailPage(floor) {
-            //跳转
+        //跳转楼层
+        navToDetailPage(floor) {
             this.$api.navigateTo(`/pages/goods/good-floorMore?floorId=${floor.floorId}&title=${floor.title}`)
         },
-        Details(pro) {
-            this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
-        },
-        handAddCarts(pro) {
-            this.addToCart({ productId: pro.productId })
-        },
         activeClick() {
             this.activePopupVisible = false
             console.log('点击了活动弹窗')
@@ -206,17 +136,8 @@ export default {
         }
     },
     onPageScroll(e) {
-        //实时获取到滚动的值
-        if (e.scrollTop > 50) {
-            this.inputActive = 'bgclass'
-        } else {
-            this.inputActive = 'bgnone'
-        }
-        if (e.scrollTop > 400) {
-            this.isScrollTop = true
-        } else {
-            this.isScrollTop = false
-        }
+        this.isSticky = e.scrollTop > 0
+        this.isScrollTop = e.scrollTop > 400
     },
     //下拉刷新
     onPullDownRefresh() {
@@ -246,262 +167,90 @@ export default {
 </script>
 
 <style lang="scss">
-page {
-    background-color: #ffffff;
+.home {
+    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-index-bg.png) no-repeat top center;
+    background-size: 750rpx auto;
+    background-position-y: -50rpx;
 }
-.navbar-wrap {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    z-index: 100000;
-    box-sizing: border-box;
-    background-image: linear-gradient(0deg, #f83c6c 0%, #fa55bf 100%);
-    background-size: cover;
-    border-bottom: none;
-    &.bgnone {
-        background: rgba(255, 255, 255, 0);
+.swiper-content {
+    &.top {
+        padding-top: 120rpx;
     }
-    &.bgclass {
-        background: #f94a9b;
-    }
-}
-.navbar-text {
-    font-size: 30rpx;
-    color: #000000;
-    font-weight: 500;
-}
-.navbar-text.center {
-    text-align: center;
-}
-.navbar-text.left {
-    text-align: left;
-    padding-left: 45px;
-}
-.navbar-icon {
-    position: fixed;
-    display: flex;
-    box-sizing: border-box;
-}
-.navbar-icon .iconfont {
-    display: inline-block;
-    overflow: hidden;
-    font-size: 44rpx;
-    padding-right: 40rpx;
-    margin-top: 1px;
-}
-.navbar-icon .icon-iconfonticonfontsousuo1 {
-    color: #000000;
-}
-.navbar-icon view {
-    height: 18px;
-    border-left: 0.5px solid rgba(0, 0, 0, 0.3);
-    margin-top: 6px;
-}
-.navbar-loading {
-    background: #fff;
-    text-align: center;
-}
-.container-home {
-    background: #f7f7f7 url(https://static.caimei365.com/app/mini-hehe/icon/icon-index-bg.png) top center no-repeat;
-    background-size: contain;
-    min-height: 485rpx;
 }
 .container-section {
     width: 100%;
-    height: auto;
+    padding: 12rpx 24rpx;
     background-color: #f7f7f7;
     box-sizing: border-box;
-    padding: 0 24rpx;
     .product-list {
-        width: 339rpx;
-        height: 532rpx;
-        float: left;
-        margin-right: 24rpx;
-        margin-bottom: 24rpx;
-        background-color: #ffffff;
-        border-radius: 16rpx;
-        &:nth-child(2n + 1) {
-            margin-right: 0;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        .product {
+            margin: 12rpx 0;
         }
-        .product-list-image {
-            width: 100%;
-            height: 339rpx;
-            float: left;
-            position: relative;
-            .product-image {
-                width: 100%;
-                height: 100%;
-                display: block;
-                border-radius: 16rpx 16rpx 0 0;
+    }
+    .floor-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12rpx 0;
+        .title {
+            .name {
+                font-size: 34rpx;
+                font-weight: bold;
+                text-align: left;
+                line-height: 49rpx;
+                color: #333;
             }
-            .product-icon {
-                width: 68rpx;
-                height: 55rpx;
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 34rpx;
+            .desc {
+                color: #999999;
+                font-size: $font-size-26;
             }
         }
-        .product-list-msg {
-            width: 100%;
-            height: 193rpx;
-            box-sizing: border-box;
-            padding: 16rpx 24rpx;
-            float: left;
-            position: relative;
-            .product-msg-name {
-                width: 100%;
-                height: 72rpx;
-                line-height: 35rpx;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                line-clamp: 2;
-                -webkit-box-orient: vertical;
+        .more {
+            text {
                 font-size: $font-size-26;
-                color: #333333;
-                text-align: justify;
-                float: left;
-            }
-            .product-list-tag {
-                position: relative;
-                z-index: 9;
-                width: 100%;
-                height: 30rpx;
-                margin-top: 8rpx;
-                float: left;
-                .tag {
-                    display: inline-block;
-                    height: 32rpx;
-                    font-size: 22rpx;
-                    line-height: 30rpx;
-                    text-align: center;
-                    color: #f83c6c;
-                    float: left;
-                    margin-right: 10rpx;
-                    &.tag-02 {
-                        width: 80rpx;
-                        background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
-                            no-repeat;
-                        background-size: contain;
-                    }
-                    &.tag-01 {
-                        width: 56rpx;
-                        color: #fff;
-                        background-color: #f83c6c;
-                        border-radius: 4rpx;
-                    }
-                }
+                text-align: right;
+                line-height: 49rpx;
+                color: #999999;
             }
-            .product-list-pri {
-                width: 100%;
-                height: 44rpx;
-                float: left;
-                position: absolute;
-                bottom: 16rpx;
-                left: 0;
-                box-sizing: border-box;
-                padding: 0 24rpx;
-                .price {
-                    float: left;
-                    font-size: $font-size-26;
-                    color: #f83c6c;
-                    font-weight: bold;
-                    line-height: 44rpx;
-                }
-                .carts {
-                    float: right;
-                    .carts-add {
-                        width: 44rpx;
-                        height: 44rpx;
-                        text-align: center;
-                        line-height: 44rpx;
-                        background-color: #ff457b;
-                        border-radius: 50%;
-                        .iconfont {
-                            font-size: 32rpx;
-                            color: #ffffff;
-                        }
-                    }
-                }
+            .iconfont {
+                font-size: $font-size-30;
+                color: #999999;
             }
         }
     }
 }
 .search-input {
     width: 100%;
-    height: 110rpx;
-    padding: 20rpx 24rpx;
+    padding: 24rpx;
     box-sizing: border-box;
-    .gosearch-btn {
-        width: 100%;
-        height: 100%;
-        border-radius: 40rpx;
-        background: #f0f0f0;
-        margin: 0 auto;
-        font-size: 28rpx;
-        line-height: 70rpx;
+    background: linear-gradient(180deg, #fa55bf 0%, #f8458b 100%);
+    &.fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99;
+    }
+    .search-content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: 702rpx;
+        height: 66rpx;
+        border-radius: 33rpx;
         color: #8a8a8a;
-        background: #ffffff;
-        position: relative;
+        background: #fff;
         box-sizing: border-box;
-        padding-left: 80rpx;
-        .search-icon {
-            width: 80rpx;
-            height: 70rpx;
-            position: absolute;
-            left: 0;
-            top: 0;
-            text-align: center;
-            line-height: 70rpx;
-            .icon-iconfonticonfontsousuo1 {
-                margin: 0 6rpx;
-                font-size: $font-size-34;
-                color: #8a8a8a;
-                z-index: 10;
-            }
+        padding: 0 24rpx;
+        .iconfont {
+            font-size: $font-size-34;
+            margin-right: 12rpx;
         }
         .search-text {
             font-size: $font-size-24;
-            line-height: 70rpx;
-            color: #8a8a8a;
         }
     }
 }
-.tui-group-name {
-    width: 100%;
-    height: 92rpx;
-    padding: 20rpx 0;
-}
-.tui-group-title {
-    width: 100%;
-    float: left;
-    .tui-group-l {
-        float: left;
-        font-size: 34rpx;
-        font-weight: bold;
-        text-align: left;
-        line-height: 49rpx;
-        color: #333;
-    }
-    .tui-group-r {
-        float: right;
-        font-size: $font-size-26;
-        text-align: right;
-        line-height: 49rpx;
-        color: #999999;
-        .icon-xiayibu {
-            font-size: $font-size-30;
-            color: #999999;
-        }
-    }
-}
-.tui-sub__desc {
-    width: 100%;
-    float: left;
-    color: rgba(153, 153, 153, 0.9);
-    font-size: $font-size-26;
-}
 </style>

pages/tabBar/user/index.vue

@@ -61,7 +61,7 @@
             <!-- 订单状态区域END -->
             <!-- 菜单导航区域 -->
             <view class="place-menu-conten clearfix">
-                <view class="place-menu-cell" @click="navigator()">
+                <view class="place-menu-cell" @click="navigator('/pages/user/activity/coupon-list')">
                     <view class="place-left">
                         <image class="place-menu-icon" :src="StaticUrl + 'icon-coupon.png'" mode=""></image>
                         <text class="place-menu-title">优惠券</text>

pages/user/activity/coupon-list.vue

@@ -42,6 +42,7 @@ export default {
     },
     data() {
         return {
+            windowHeight: 0,
             baseUrl: this.$Static,
             tabs: [
                 {
@@ -58,21 +59,29 @@ export default {
         }
     },
     computed: {
-        ...mapGetters(['windowHeight', 'isIphoneX']),
+        ...mapGetters(['isIphoneX']),
         swiperHeight() {
             if (this.isIphoneX) {
                 return this.windowHeight - 120
             }
             return this.windowHeight - 80
+            // return this.swiperHeight
         }
     },
-    onLoad() {},
+    onLoad() {
+        this.getWindowHeight()
+    },
     methods: {
         tabChange(e) {
             this.currentTab = e.index
         },
         swiperChange(e){
             this.currentTab = e.detail.current
+        },
+        // 获取可用屏幕高度
+        getWindowHeight(){
+            this.windowHeight = uni.getSystemInfoSync().windowHeight
+            console.log(this.windowHeight)
         }
     }
 }

uni.scss

@@ -56,6 +56,8 @@ $uni-bg-color: #ffffff;
 $uni-bg-color-grey: #f8f8f8;
 $uni-bg-color-hover: #f1f1f1; //点击状态颜色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
+$uni-floor-bg-color: #f7f7f7; // 页面背景
+
 
 /* 边框颜色 */
 $uni-border-color: #c8c7cc;