凑单促销页面

src/main/resources/static/css/product/list.css

@@ -22,6 +22,14 @@ li{list-style:none}
     .productList{width:1200px;margin:0 auto;box-sizing:border-box}
     .productList .productItem{margin-bottom:16px}
     .login-btn{font-size: 12px}
+    .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
+    .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
+
+
+
+
 }
 /**
 * 移动端
@@ -44,8 +52,20 @@ li{list-style:none}
     .empty img{width:40vw;height:40vw;}
     .empty a{color:#E15616;}
     .productList{width:96.6vw;margin:1.3vw auto;box-sizing:border-box}
-    .original-price{
-    text-decoration:line-through;
-}
+    .original-price{text-decoration:line-through}
+    .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
+    .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
+
+
+
+
+
+
+
+
+
+
 }
 

src/main/resources/static/js/index.js

@@ -93,7 +93,9 @@ var homeData = new Vue({
                                 productIdArr.push(item.id)
                             }
                         });
-                        setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {});
+                        setProductPrice(_self.recommends, productIdArr.join(","), _self.userId, function () {
+                            _self.$forceUpdate();
+                        });
                         console.log(_self.recommends)
                     // }
                 }

src/main/resources/static/js/product/promotions.js

@@ -0,0 +1,145 @@
+var promotionsList = new Vue({
+    el: "#promotionsList",
+    data: {
+        userId: 0,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            id: 0,
+            size: 0,
+            num: 0
+        },
+        promotions: {},
+        listData: [],
+        listRecord: 0,
+        pageInput: '1',
+        userIdentity: '',
+        userToken: ''
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        getPromotions: function(){
+            var _self = this;
+            $.getJSON(spiServer+"/product/promotion/info?promotionsId="+this.params.id, function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.promotions = r.data;
+                    _self.getProductsByPromotions();
+                }else{
+                    CAIMEI.Alert("该促销活动已过期或不存在!", '确定', true, function(){
+                        window.location.href="/";
+                    });
+                }
+            })
+        },
+        getProductsByPromotions: function () {
+            var _self = this;
+            $.getJSON(spiServer+"/product/promotion/products",{
+                promotionsId: this.params.id,
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            },function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.listRecord = r.data.total;
+                    var resultData = r.data.list;
+                    var productIdArr = [];
+                    resultData.map(function (item) {
+                        productIdArr.push(item.id)
+                    });
+                    setProductPrice(resultData, productIdArr.join(","), _self.userId, function () {
+                        _self.$forceUpdate();
+                    });
+                    if(isPC){
+                        _self.listData = resultData;
+                    }else{
+                        _self.listData = _self.listData.concat(resultData);
+                    }
+                    console.log(_self.listData)
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            })
+        }
+    },
+    created: function () {
+        if(isPC){
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 20;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        }else{
+            this.params.size = 10;
+            this.params.num = 1;
+        }
+        this.params.id = getUrlParam("id") ? getUrlParam("id") : 0;
+        // 搜索框赋值
+        $('#topSearch').find('[data-select]').attr("data-select", 0).text("产品");
+        $('#topSearch').find('.jqSelect').find('select').val(0);
+        $('#topSearch').find('.keyword').val(getUrlParam("keyword"));
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
+        // 获取页面数据
+        this.getPromotions();
+    },
+    mounted: function () {
+        var _self = this;
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        if (_self.requestFlag){
+                            _self.params.num = next;
+                            _self.getPromotions();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+    }
+});

src/main/resources/static/js/supplier/index.js

@@ -78,7 +78,9 @@ var supplierHome = new Vue({
                                 productIdArr.push(item.id)
                             }
                         });
-                        setProductPrice(r.data, productIdArr.join(","), _self.userId, function () {});
+                        setProductPrice(r.data, productIdArr.join(","), _self.userId, function () {
+                            _self.$forceUpdate();
+                        });
                     }
                     _self.mainProducts = r.data;
                 }

src/main/resources/static/js/supplier/list.js

@@ -62,8 +62,8 @@ var supplierList = new Vue({
                     result.items.map(function (su) {
                         if(su.products && su.products.length>0) {
                             var productList = setSearchProductList(su.products, 0, function(){
-                            _self.$forceUpdate();
-                        });
+                                _self.$forceUpdate();
+                            });
                         }
                         resultData.push({
                             id: su.s_id,

src/main/resources/templates/product/promotions.html

@@ -11,16 +11,85 @@
 <template th:replace="components/header"></template>
 
 <!-- 商品列表 -->
-<div id="promotionsList">
-    <!-- 面包屑 -->
-    <div v-else class="crumbs">
-        <a href="/">首页</a>
-        <span>&gt;</span>
-        <span>凑单商品</span>
+<div id="promotionsList" v-cloak>
+    <div class="listTitle">
+        <h1>【{{promotions.name}}】 {{promotions.description}}</h1>
+        <p><span>促销时间：</span>
+            <em v-if="promotions.status==1">不限时</em>
+            <em v-else>{{promotions.beginTime.substr(0,10)+' ~ '+promotions.endTime.substr(0,10)}}</em>
+        </p>
+        <p>下面为参与本次凑单活动的全部商品：</p>
     </div>
-    <!-- 列表数据 -->
-    <div>
-        <h1>促单满减商品</h1>
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+            <p>暂未找到促单的商品，去<a href="/">商城</a>，逛逛吧~</p>
+        </div>
+    </div>
+    <template v-else>
+        <!--商品列表-->
+        <ul class="productList clear mfw">
+            <li class="productItem mfc" v-for="p in listData">
+                <div class="item">
+                    <a class="image" :href="'/product-'+p.id+'.html'" target="_blank">
+                        <img :src="p.image" :alt="p.name">
+                    </a>
+                    <a class="name" :href="'/product-'+p.id+'.html'" target="_blank">
+                        <span v-html="p.name"></span>
+                    </a>
+                    <div class="price mfhc">
+                        <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                            <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+                            <template v-if="p.priceFlag==1">
+                                <em>￥价格未公开</em>
+                                <div class="btnBox">
+                                    <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <template v-if="p.priceFlag==0 || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
+                                    <em class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
+                                    <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
+                                </template>
+                                <template v-else-if="p.priceFlag==2 && p.userIdentity!=2">
+                                    <em>￥会员可见</em>
+                                    <div class="btnBox">
+                                        <a href="/upgrade.html" class="btn">升级会员查看价格</a>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                                </template>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
+                            <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                        </template>
+                    </div>
+                </div>
+            </li>
+        </ul>
+    </template>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
     </div>
 </div>
 <!-- 引入底部 -->