工会商品列表首页，页面开发完成~

王强
1 parent 39674e76
Showing 9 changed files with 243 additions and 48 deletions
src/components/columnListBox/columnListBox.vue
src/components/goodsItem_7/goodsItem_7.less
src/components/goodsItem_7/goodsItem_7.vue
src/components/tabsCom/tabsCom.less
src/components/tabsCom/tabsCom.vue
src/pages/labourUnion/labourUnion.less
src/pages/labourUnion/labourUnion.vue
static/img/balance_bg.png
static/img/icon_back_arrow_right.png
@@ -10,8 +10,10 @@
 				<div class="item-box" v-if="!(index % 2)" v-for="(item, index) in lists.list || lists" :key="index">
 					<!-- 商品组件 -->
-					<goods-item-7 v-if="com == '7'" :goodType="goodType" @jump="jump" @primary="primary"
-						:item="item">
+					<goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
+						:item="item"
+						:goodType="goodType"
+					>
 					</goods-item-7>
 				</div>
 			</div>
@@ -23,8 +25,10 @@
 				<div class="item-box" v-if="index % 2" v-for="(item, index) in lists.list || lists" :key="index">
 					<!-- 商品组件 -->
-					<goods-item-7 v-if="com == '7'" :goodType="goodType" @jump="jump" @primary="primary"
-						:item="item">
+					<goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
+						:item="item"
+						:goodType="goodType"
+					>
 					</goods-item-7>
 				</div>
 			</div>
@@ -134,5 +134,35 @@
                 }
             }
 		}
+		&.g-2 {
+			.content-box {
+				.title {
+					display: block;
+					font-weight: 500;
+					min-height: unset;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+				.price-box {
+					margin-top: 15px;
+					margin-bottom: 15px;
+					.left {
+						.y {
+							font-size: 36px;
+						}
+						.integer {
+							font-size: 36px;
+						}
+						.decimal {
+							font-size: 36px;
+						}
+					}
+					.right {
+						display: none;
+					}
+				}
+			}
+		}
 	}
 }
 <template>
 	<div class="goods-item-7-box" v-if="item" @click="jump(item)">
-		<div class="item">
+		<div class="item" :class="'g-' + goodType">
 			<div class="img-box">
 				<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
-        <!-- 补货中按钮 -->
-        <div v-if="item.stock && item.stock == 0" class="goods_active">
-            已售罄
-        </div>
-        <!-- goodType=1为积分商城定义实物商品展示tip积分+现金形式 -->
-        <div v-if="goodType == 1" class="goods_tip">
-          积分+现金
-        </div>
+                
+                <!-- 补货中按钮 -->
+                <div v-if="item.stock && item.stock == 0" class="goods_active">
+                    已售罄
+                </div>
+        
+                <!-- goodType=1为积分商城定义实物商品展示tip积分+现金形式 -->
+                <div v-if="goodType == 1" class="goods_tip">
+                    积分+现金
+                </div>
 			</div>
 			<div class="content-box">
 				<div class="title">{{item.title}}</div>
@@ -10,7 +10,7 @@
 		.tab {
 			margin-right: 50px;
 			padding: 23px 0 12px 0;
-			color: #B4B4B4;
+			color: #999999;
 			&:last-child {
 				margin-right: 0;
 			}
@@ -25,6 +25,12 @@
 				height: 4px;
 				border-radius: 3px;
 			}
+			&.active {
+				color: #000000;
+				.line {
+					background-color: #FC1540;
+				}
+			}
 		}
 	}
 }
 \ No newline at end of file
 <template>
 	<div class="tabs-com">
 		<div class="box">
-			<div class="tab" :style="{'color': (index == active) ? item.titleColor : ''}" @click="change(item, index)">
+			<div class="tab" :class="{'active': (index == active)}" :style="{'color': (index == active) ? item.titleColor : ''}" @click="change(item, index)">
 				<div class="title">{{item.title}}</div>
 				<div class="line" :style="{'backgroundColor': (index == active) ? item.titleColor : ''}"></div>
 			</div>
@@ -16,6 +16,7 @@
         .back-box {
             background-color: #ffffff;
             width: 100%;
+            border-bottom: 1px solid #E5E5E5;
         }
     }
     .pl {
@@ -44,25 +45,102 @@
     }
     .main-box {
         .header-box {
-            width: 100%;
+            margin: 30px auto 30px auto;
+            width: 690px;
             height: auto;
+            border-radius: 16px;
+            overflow: hidden;
             .header-img {
                 display: block;
                 width: 100%;
                 height: auto;
             }
         }
+        .balance-box {
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            margin: 30px auto;
+            width: 690px;
+            height: 210px;
+            .b-box {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                margin: 0 auto;
+                padding: 40px 0 20px 0;
+                width: 630px;
+                height: auto;
+                .balance-top {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: flex-start;
+                    .title {
+                        color: rgba(255, 255, 255, 0.69);
+                        font-size: 28px;
+                        font-weight: 500;
+                    }
+                    .sub-title {
+                        color: #FFE450;
+                        font-size: 22px;
+                        font-weight: 400;
+                    }
+                }
+                .balance-bottom {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-top: 20px;
+                    .price-box {
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: baseline;
+                        color: #FFFFFF;
+                        font-weight: bold;
+                        .sy {
+                            font-size: 60px;
+                        }
+                        .integer {
+                            display: flex;
+                            font-size: 84px;
+                        }
+                        .decimal {
+                            font-size: 60px;
+                        }
+                    }
+                    .btn {
+                        &.btn-default {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            background: linear-gradient(180deg, #FFE653 0%, #FFC829 100%);
+                            padding: 10px 24px;
+                            border-radius: 30px;
+                            .text {
+                                color: #3A3A3B;
+                                font-size: 28px;
+                                font-weight: 500;
+                            }
+                            .icon-back-arrow-right {
+                                display: block;
+                                width: 30px;
+                                height: 30px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
         .tabs-box {
             background-color: #ffffff;
             width: 100%;
             height: 90px;
-            border-top: 1px solid transparent;
+            // border-top: 1px solid transparent;
             border-bottom: 1px solid transparent;
             &.tabsFixed {
                 position: fixed;
                 top: 0;
                 z-index: 100;
-                border-top: 1px solid #E5E5E5;
+                // border-top: 1px solid #E5E5E5;
                 border-bottom: 1px solid #E5E5E5;
                 &.is-open-app {
                     top: 122px;
@@ -78,7 +156,7 @@
         .column-list-container {
             margin-top: 30px;
             .section {
-                background-color: #ffffff;
+                // background-color: #ffffff;
                 margin: 0 auto 40px auto;
                 width: 690px;
                 height: auto;
@@ -88,14 +166,10 @@
                     margin-bottom: 0;
                 }
                 &.goods-list {
-                    /deep/ .goods-item-8-box {
-                        .main-box {
-                            border-bottom: 1px solid #EAEAEA;
-                        }
-                    }
-                    /deep/ .goods-item-8-box:last-child {
-                        .main-box {
-                            border-bottom: none;
+                    .column-list-box {
+                        /deep/ .item-box {
+                            border: 1px solid #F1F0F0;
+                            border-radius: 16px;
                         }
                     }
                     .discount-flag {
 <template>
-    <div class="labour-union-page" :style="{'backgroundColor': tabs.list[tabs.active].color ? tabs.list[tabs.active].color : ''}" v-if="tabs.list[tabs.active]">
+    <div class="labour-union-page" v-if="tabs.list[tabs.active]">
         <!-- 导航区域 -->
         <div class="nav-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref='navBox'>
@@ -26,6 +26,33 @@
                 <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
             </div>
+            <!-- 余额展示区块 -->
+            <div class="balance-box" :style="{'backgroundImage': 'url(' + balanceBg + ')'}">
+                <div class="b-box">
+                    <div class="balance-top">
+                        <div class="title">
+                            我的余额
+                        </div>
+                        <div class="sub-title">
+                            工会福利商品仅限网家家支付
+                        </div>
+                    </div>
+                    <div class="balance-bottom">
+                        <div class="price-box">
+                            <div class="sy">￥</div>
+                            <div class="integer">{{getInteger(1950.00)}}.</div>
+                            <div class="decimal">{{getDecimal(1950.00)}}</div>
+                        </div>
+                        <div class="btn btn-default" @click="toOrderList">
+                            <div class="text">
+                                购买记录
+                            </div>
+                            <img src="static/img/icon_back_arrow_right.png" class="icon-back-arrow-right" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- tab导航 -->
             <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" ref='tabsBox'>
@@ -46,7 +73,8 @@
                     <!-- 商品样式 7 列表 -->
                     <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
                         :lists="lists[tabs.active]"
-                        com="7">
+                        com='7'
+                        goodType='2'>
                     </column-list-box>
                 </div>
             </van-list>
@@ -79,19 +107,20 @@
         name: 'labourUnionPage',
         data () {
             return {
-                title: "",                      // 标题
-                backs: null,                    // 后退按钮组
+                title: "",                                  // 标题
+                backs: null,                                // 后退按钮组
+                balanceBg: 'static/img/balance_bg.png',     // 余额区块背景图片
                 CALL_STATUS: {
-					INIT: "init",				// 初始化页面
-					LOAD_MORE: "loadMore"		// 加载更多
+					INIT: "init",				            // 初始化页面
+					LOAD_MORE: "loadMore"		            // 加载更多
 				},
-                tabs: {                         // tabs设置
-                    fixed: false,               // 是否吸顶
-                    offsetTop: 0,               // 距离顶部距离
-                    active: 0,                  // 活动项
-                    list: []                    // tabs数组
+                tabs: {                                     // tabs设置
+                    fixed: false,                           // 是否吸顶
+                    offsetTop: 0,                           // 距离顶部距离
+                    active: 0,                              // 活动项
+                    list: []                                // tabs数组
                 },
-                lists: []                       // 列表数据
+                lists: []                                   // 列表数据
             }
         },
         components: {
@@ -101,6 +130,35 @@
             columnListBox,
             gotoTop
         },
+        computed: {
+
+            /**
+             * 获取输入数字的整数部分
+             */
+            getInteger () {
+                return (number) => {
+                    return parseInt(number);
+                }
+            },
+
+            /**
+             * 获取输入数字的小数部分
+             */
+            getDecimal () {
+                return (number) => {
+                    
+                    // 拆分数字
+                    let numberArr = number.toString().split(".");
+                    
+                    // 判断是否有效数部分
+                    if (numberArr.length === 2) {
+                        return numberArr[1];
+                    } else {
+                        return "00";
+                    }
+                }
+            }
+        },
         created() {
             // 设置标题
@@ -116,12 +174,12 @@
                         back: {
                             icon: "static/img/icon_back.png"
                         },
-                        funcArray: [
-                            {
-                                icon: "static/img/icon_share.png",
-                                func: this.toShare
-                            }
-                        ]
+                        // funcArray: [
+                        //     {
+                        //         icon: "static/img/icon_share.png",
+                        //         func: this.toShare
+                        //     }
+                        // ]
                     }
                 });
             }
@@ -253,7 +311,7 @@
             /**
 			 * 获取店铺首页推荐商品列表
-			 * @param {object} CALL_STATUS	[何处触发请求]
+			 * @param {Object} CALL_STATUS	[何处触发请求]
 			 */
 			getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
@@ -279,8 +337,8 @@
 			/**
 			 * 获取店铺首页推荐商品列表回调
-			 * param {res}	[服务器返回数据]
-			 * param {ext}		[扩展参数]
+			 * @param {Object} res [服务器返回数据]
+			 * @param {Object} ext [扩展参数]
 			 */
 			getShopRecommendGoodsCallback(res, ext) {
@@ -339,6 +397,27 @@
 			},
             /**
+             * 跳转购买记录页面（全部订单页面）
+             */
+            toOrderList() {
+
+                console.log('toOrderList');
+
+                // 判断App内
+                if (this.isCNLive.value) {
+
+
+                    
+
+
+                } else {
+
+                    // App外，唤起App
+                    this.openApp();
+                }
+            },
+
+            /**
              * 跳转商品详情
              * @param {Object} item [数据对象]
              */