w-front-end / select_good · Commits

Commit 64b527f38a86af6d7668880a0227950a6affc693

Authored by 王强
1 parent 39674e76

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

Inline Side-by-side
Showing 9 changed files with 243 additions and 48 deletions
src/components/columnListBox/columnListBox.vue
  View file @64b527f
... ... @@ -10,8 +10,10 @@
10 10 <div class="item-box" v-if="!(index % 2)" v-for="(item, index) in lists.list || lists" :key="index">
11 11  
12 12 <!-- 商品组件 -->
13   - <goods-item-7 v-if="com == '7'" :goodType="goodType" @jump="jump" @primary="primary"
14   - :item="item">
  13 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  14 + :item="item"
  15 + :goodType="goodType"
  16 + >
15 17 </goods-item-7>
16 18 </div>
17 19 </div>
... ... @@ -23,8 +25,10 @@
23 25 <div class="item-box" v-if="index % 2" v-for="(item, index) in lists.list || lists" :key="index">
24 26  
25 27 <!-- 商品组件 -->
26   - <goods-item-7 v-if="com == '7'" :goodType="goodType" @jump="jump" @primary="primary"
27   - :item="item">
  28 + <goods-item-7 v-if="com == '7'" @jump="jump" @primary="primary"
  29 + :item="item"
  30 + :goodType="goodType"
  31 + >
28 32 </goods-item-7>
29 33 </div>
30 34 </div>
... ...
src/components/goodsItem_7/goodsItem_7.less
  View file @64b527f
... ... @@ -134,5 +134,35 @@
134 134 }
135 135 }
136 136 }
  137 + &.g-2 {
  138 + .content-box {
  139 + .title {
  140 + display: block;
  141 + font-weight: 500;
  142 + min-height: unset;
  143 + white-space: nowrap;
  144 + text-overflow: ellipsis;
  145 + overflow: hidden;
  146 + }
  147 + .price-box {
  148 + margin-top: 15px;
  149 + margin-bottom: 15px;
  150 + .left {
  151 + .y {
  152 + font-size: 36px;
  153 + }
  154 + .integer {
  155 + font-size: 36px;
  156 + }
  157 + .decimal {
  158 + font-size: 36px;
  159 + }
  160 + }
  161 + .right {
  162 + display: none;
  163 + }
  164 + }
  165 + }
  166 + }
137 167 }
138 168 }
... ...
src/components/goodsItem_7/goodsItem_7.vue
  View file @64b527f
1 1 <template>
2 2 <div class="goods-item-7-box" v-if="item" @click="jump(item)">
3   - <div class="item">
  3 + <div class="item" :class="'g-' + goodType">
4 4 <div class="img-box">
5 5 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
6   - <!-- 补货中按钮 -->
7   - <div v-if="item.stock && item.stock == 0" class="goods_active">
8   - 已售罄
9   - </div>
10   - <!-- goodType=1为积分商城定义实物商品展示tip积分+现金形式 -->
11   - <div v-if="goodType == 1" class="goods_tip">
12   - 积分+现金
13   - </div>
  6 +
  7 + <!-- 补货中按钮 -->
  8 + <div v-if="item.stock && item.stock == 0" class="goods_active">
  9 + 已售罄
  10 + </div>
  11 +
  12 + <!-- goodType=1为积分商城定义实物商品展示tip积分+现金形式 -->
  13 + <div v-if="goodType == 1" class="goods_tip">
  14 + 积分+现金
  15 + </div>
14 16 </div>
15 17 <div class="content-box">
16 18 <div class="title">{{item.title}}</div>
... ...
src/components/tabsCom/tabsCom.less
  View file @64b527f
... ... @@ -10,7 +10,7 @@
10 10 .tab {
11 11 margin-right: 50px;
12 12 padding: 23px 0 12px 0;
13   - color: #B4B4B4;
  13 + color: #999999;
14 14 &:last-child {
15 15 margin-right: 0;
16 16 }
... ... @@ -25,6 +25,12 @@
25 25 height: 4px;
26 26 border-radius: 3px;
27 27 }
  28 + &.active {
  29 + color: #000000;
  30 + .line {
  31 + background-color: #FC1540;
  32 + }
  33 + }
28 34 }
29 35 }
30 36 }
31 37 \ No newline at end of file
... ...
src/components/tabsCom/tabsCom.vue
  View file @64b527f
1 1 <template>
2 2 <div class="tabs-com">
3 3 <div class="box">
4   - <div class="tab" :style="{'color': (index == active) ? item.titleColor : ''}" @click="change(item, index)">
  4 + <div class="tab" :class="{'active': (index == active)}" :style="{'color': (index == active) ? item.titleColor : ''}" @click="change(item, index)">
5 5 <div class="title">{{item.title}}</div>
6 6 <div class="line" :style="{'backgroundColor': (index == active) ? item.titleColor : ''}"></div>
7 7 </div>
... ...
src/pages/labourUnion/labourUnion.less
  View file @64b527f
... ... @@ -16,6 +16,7 @@
16 16 .back-box {
17 17 background-color: #ffffff;
18 18 width: 100%;
  19 + border-bottom: 1px solid #E5E5E5;
19 20 }
20 21 }
21 22 .pl {
... ... @@ -44,25 +45,102 @@
44 45 }
45 46 .main-box {
46 47 .header-box {
47   - width: 100%;
  48 + margin: 30px auto 30px auto;
  49 + width: 690px;
48 50 height: auto;
  51 + border-radius: 16px;
  52 + overflow: hidden;
49 53 .header-img {
50 54 display: block;
51 55 width: 100%;
52 56 height: auto;
53 57 }
54 58 }
  59 + .balance-box {
  60 + background-repeat: no-repeat;
  61 + background-size: 100% 100%;
  62 + margin: 30px auto;
  63 + width: 690px;
  64 + height: 210px;
  65 + .b-box {
  66 + display: flex;
  67 + flex-direction: column;
  68 + justify-content: space-between;
  69 + margin: 0 auto;
  70 + padding: 40px 0 20px 0;
  71 + width: 630px;
  72 + height: auto;
  73 + .balance-top {
  74 + display: flex;
  75 + justify-content: space-between;
  76 + align-items: flex-start;
  77 + .title {
  78 + color: rgba(255, 255, 255, 0.69);
  79 + font-size: 28px;
  80 + font-weight: 500;
  81 + }
  82 + .sub-title {
  83 + color: #FFE450;
  84 + font-size: 22px;
  85 + font-weight: 400;
  86 + }
  87 + }
  88 + .balance-bottom {
  89 + display: flex;
  90 + justify-content: space-between;
  91 + align-items: center;
  92 + margin-top: 20px;
  93 + .price-box {
  94 + display: flex;
  95 + justify-content: flex-start;
  96 + align-items: baseline;
  97 + color: #FFFFFF;
  98 + font-weight: bold;
  99 + .sy {
  100 + font-size: 60px;
  101 + }
  102 + .integer {
  103 + display: flex;
  104 + font-size: 84px;
  105 + }
  106 + .decimal {
  107 + font-size: 60px;
  108 + }
  109 + }
  110 + .btn {
  111 + &.btn-default {
  112 + display: flex;
  113 + justify-content: center;
  114 + align-items: center;
  115 + background: linear-gradient(180deg, #FFE653 0%, #FFC829 100%);
  116 + padding: 10px 24px;
  117 + border-radius: 30px;
  118 + .text {
  119 + color: #3A3A3B;
  120 + font-size: 28px;
  121 + font-weight: 500;
  122 + }
  123 + .icon-back-arrow-right {
  124 + display: block;
  125 + width: 30px;
  126 + height: 30px;
  127 + }
  128 + }
  129 + }
  130 + }
  131 + }
  132 + }
55 133 .tabs-box {
56 134 background-color: #ffffff;
57 135 width: 100%;
58 136 height: 90px;
59   - border-top: 1px solid transparent;
  137 + // border-top: 1px solid transparent;
60 138 border-bottom: 1px solid transparent;
61 139 &.tabsFixed {
62 140 position: fixed;
63 141 top: 0;
64 142 z-index: 100;
65   - border-top: 1px solid #E5E5E5;
  143 + // border-top: 1px solid #E5E5E5;
66 144 border-bottom: 1px solid #E5E5E5;
67 145 &.is-open-app {
68 146 top: 122px;
... ... @@ -78,7 +156,7 @@
78 156 .column-list-container {
79 157 margin-top: 30px;
80 158 .section {
81   - background-color: #ffffff;
  159 + // background-color: #ffffff;
82 160 margin: 0 auto 40px auto;
83 161 width: 690px;
84 162 height: auto;
... ... @@ -88,14 +166,10 @@
88 166 margin-bottom: 0;
89 167 }
90 168 &.goods-list {
91   - /deep/ .goods-item-8-box {
92   - .main-box {
93   - border-bottom: 1px solid #EAEAEA;
94   - }
95   - }
96   - /deep/ .goods-item-8-box:last-child {
97   - .main-box {
98   - border-bottom: none;
  169 + .column-list-box {
  170 + /deep/ .item-box {
  171 + border: 1px solid #F1F0F0;
  172 + border-radius: 16px;
99 173 }
100 174 }
101 175 .discount-flag {
... ...
src/pages/labourUnion/labourUnion.vue
  View file @64b527f
1 1 <template>
2   - <div class="labour-union-page" :style="{'backgroundColor': tabs.list[tabs.active].color ? tabs.list[tabs.active].color : ''}" v-if="tabs.list[tabs.active]">
  2 + <div class="labour-union-page" v-if="tabs.list[tabs.active]">
3 3  
4 4 <!-- 导航区域 -->
5 5 <div class="nav-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref='navBox'>
... ... @@ -26,6 +26,33 @@
26 26 <img :src="tabs.list[tabs.active].img + SIGN.BIG" class="header-img" />
27 27 </div>
28 28  
  29 + <!-- 余额展示区块 -->
  30 + <div class="balance-box" :style="{'backgroundImage': 'url(' + balanceBg + ')'}">
  31 + <div class="b-box">
  32 + <div class="balance-top">
  33 + <div class="title">
  34 + 我的余额
  35 + </div>
  36 + <div class="sub-title">
  37 + 工会福利商品仅限网家家支付
  38 + </div>
  39 + </div>
  40 + <div class="balance-bottom">
  41 + <div class="price-box">
  42 + <div class="sy">￥</div>
  43 + <div class="integer">{{getInteger(1950.00)}}.</div>
  44 + <div class="decimal">{{getDecimal(1950.00)}}</div>
  45 + </div>
  46 + <div class="btn btn-default" @click="toOrderList">
  47 + <div class="text">
  48 + 购买记录
  49 + </div>
  50 + <img src="static/img/icon_back_arrow_right.png" class="icon-back-arrow-right" />
  51 + </div>
  52 + </div>
  53 + </div>
  54 + </div>
  55 +
29 56 <!-- tab导航 -->
30 57 <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'>
31 58  
... ... @@ -46,7 +73,8 @@
46 73 <!-- 商品样式 7 列表 -->
47 74 <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
48 75 :lists="lists[tabs.active]"
49   - com="7">
  76 + com='7'
  77 + goodType='2'>
50 78 </column-list-box>
51 79 </div>
52 80 </van-list>
... ... @@ -79,19 +107,20 @@
79 107 name: 'labourUnionPage',
80 108 data () {
81 109 return {
82   - title: "", // 标题
83   - backs: null, // 后退按钮组
  110 + title: "", // 标题
  111 + backs: null, // 后退按钮组
  112 + balanceBg: 'static/img/balance_bg.png', // 余额区块背景图片
84 113 CALL_STATUS: {
85   - INIT: "init", // 初始化页面
86   - LOAD_MORE: "loadMore" // 加载更多
  114 + INIT: "init", // 初始化页面
  115 + LOAD_MORE: "loadMore" // 加载更多
87 116 },
88   - tabs: { // tabs设置
89   - fixed: false, // 是否吸顶
90   - offsetTop: 0, // 距离顶部距离
91   - active: 0, // 活动项
92   - list: [] // tabs数组
  117 + tabs: { // tabs设置
  118 + fixed: false, // 是否吸顶
  119 + offsetTop: 0, // 距离顶部距离
  120 + active: 0, // 活动项
  121 + list: [] // tabs数组
93 122 },
94   - lists: [] // 列表数据
  123 + lists: [] // 列表数据
95 124 }
96 125 },
97 126 components: {
... ... @@ -101,6 +130,35 @@
101 130 columnListBox,
102 131 gotoTop
103 132 },
  133 + computed: {
  134 +
  135 + /**
  136 + * 获取输入数字的整数部分
  137 + */
  138 + getInteger () {
  139 + return (number) => {
  140 + return parseInt(number);
  141 + }
  142 + },
  143 +
  144 + /**
  145 + * 获取输入数字的小数部分
  146 + */
  147 + getDecimal () {
  148 + return (number) => {
  149 +
  150 + // 拆分数字
  151 + let numberArr = number.toString().split(".");
  152 +
  153 + // 判断是否有效数部分
  154 + if (numberArr.length === 2) {
  155 + return numberArr[1];
  156 + } else {
  157 + return "00";
  158 + }
  159 + }
  160 + }
  161 + },
104 162 created() {
105 163  
106 164 // 设置标题
... ... @@ -116,12 +174,12 @@
116 174 back: {
117 175 icon: "static/img/icon_back.png"
118 176 },
119   - funcArray: [
120   - {
121   - icon: "static/img/icon_share.png",
122   - func: this.toShare
123   - }
124   - ]
  177 + // funcArray: [
  178 + // {
  179 + // icon: "static/img/icon_share.png",
  180 + // func: this.toShare
  181 + // }
  182 + // ]
125 183 }
126 184 });
127 185 }
... ... @@ -253,7 +311,7 @@
253 311  
254 312 /**
255 313 * 获取店铺首页推荐商品列表
256   - * @param {object} CALL_STATUS [何处触发请求]
  314 + * @param {Object} CALL_STATUS [何处触发请求]
257 315 */
258 316 getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
259 317  
... ... @@ -279,8 +337,8 @@
279 337  
280 338 /**
281 339 * 获取店铺首页推荐商品列表回调
282   - * param {res} [服务器返回数据]
283   - * param {ext} [扩展参数]
  340 + * @param {Object} res [服务器返回数据]
  341 + * @param {Object} ext [扩展参数]
284 342 */
285 343 getShopRecommendGoodsCallback(res, ext) {
286 344  
... ... @@ -339,6 +397,27 @@
339 397 },
340 398  
341 399 /**
  400 + * 跳转购买记录页面（全部订单页面）
  401 + */
  402 + toOrderList() {
  403 +
  404 + console.log('toOrderList');
  405 +
  406 + // 判断App内
  407 + if (this.isCNLive.value) {
  408 +
  409 +
  410 +
  411 +
  412 +
  413 + } else {
  414 +
  415 + // App外，唤起App
  416 + this.openApp();
  417 + }
  418 + },
  419 +
  420 + /**
342 421 * 跳转商品详情
343 422 * @param {Object} item [数据对象]
344 423 */
... ...
static/img/balance_bg.png 0 → 100644
View file @64b527f

58.5 KB
static/img/icon_back_arrow_right.png 0 → 100644
View file @64b527f

243 Bytes