w-front-end / select_good · Commits

Commit b3b284580a8a4c46c55c8196597f7c12403f9ff8

Authored by 王强
2 parents 28ee3844 3110ab73

Merge branch 'version_2.0.0_optimization_mall_update' of http://bj.gitlab.cnlive… 

….com/w-front-end/select_good into version_2.0.0_optimization_mall_update
Inline Side-by-side
Showing 8 changed files with 521 additions and 77 deletions
src/components/goodsItem_2/goodsItem_2.less
  View file @b3b2845
... ... @@ -34,8 +34,12 @@
34 34 font-size: 24px;
35 35 white-space: nowrap;
36 36 text-overflow: ellipsis;
37   - overflow: hidden;
38   - }
  37 + overflow: hidden;
  38 + }
  39 + /**积分商城显示灰色颜色字**/
  40 + .grey {
  41 + color: #666666;
  42 + }
39 43 .price-box {
40 44 display: flex;
41 45 justify-content: flex-start;
... ...
src/components/goodsItem_2/goodsItem_2.vue
  View file @b3b2845
... ... @@ -7,8 +7,10 @@
7 7 <slot name="flag"></slot>
8 8 </div>
9 9 <div class="content-box">
10   - <div class="title" v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
11   - <div class="price-box" v-if="pid != '5'">
  10 + <!--因积分商城需要显示白色灰色字体标示 -->
  11 + <div class="title" :class={grey:item.grade} v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
  12 + <!--因积分商城不价格所有加上 !item.grade判断 -->
  13 + <div class="price-box" v-if="pid != '5' && !item.grade">
12 14 <div class="symbol">¥&nbsp;</div>
13 15 <div class="price">{{item.price}}</div>
14 16 <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
... ... @@ -21,27 +23,27 @@
21 23 </template>
22 24  
23 25 <script>
24   - export default {
25   - data: function () {
26   - return {
  26 +export default {
  27 + data: function () {
  28 + return {
27 29  
28   - }
29   - },
30   - props: ["item", "pid"],
31   - methods: {
  30 + }
  31 + },
  32 + props: ["item", "pid"],
  33 + methods: {
32 34  
33   - /**
34   - * 点击跳转
35   - * @param {object} item [数据对象]
36   - */
37   - jump(item) {
38   - this.$emit("jump", item);
39   - }
40   - }
  35 + /**
  36 + * 点击跳转
  37 + * @param {object} item [数据对象]
  38 + */
  39 + jump (item) {
  40 + this.$emit("jump", item);
41 41 }
  42 + }
  43 +}
42 44 </script>
43 45  
44 46 <!-- Add "scoped" attribute to limit CSS to this component only -->
45 47 <style rel="stylesheet/less" lang="less" scoped>
46   - @import './goodsItem_2';
  48 +@import './goodsItem_2';
47 49 </style>
... ...
src/components/goodsItem_7/goodsItem_7.less
  View file @b3b2845
... ... @@ -17,12 +17,28 @@
17 17 width: 100%;
18 18 height: 330px;
19 19 // height: 100%;
20   - overflow: hidden;
  20 + overflow: hidden;
  21 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  22 + position: relative;
21 23 .img {
22 24 display: block;
23 25 width: 100%;
24 26 height: auto;
25   - }
  27 + }
  28 + // 积分商城需要商品是否有货显示补货中
  29 + .goods_active{
  30 + width: 100%;
  31 + height: 58px;
  32 + line-height: 58px;
  33 + background: #000000;
  34 + color: #fff;
  35 + font-size: 30px;
  36 + opacity: 0.39;
  37 + text-align: center;
  38 + position: absolute;
  39 + left: 0;
  40 + bottom: 0;
  41 + }
26 42 }
27 43 .content-box {
28 44 margin: 0 auto;
... ... @@ -84,7 +100,23 @@
84 100 height: 48px;
85 101 }
86 102 }
87   - }
  103 + }
  104 + /**积分显示*/
  105 + .grade-box {
  106 + height: 50px;
  107 + font-size: 36px;
  108 + font-weight: 500;
  109 + color: #FC1541;
  110 + line-height: 50px;
  111 + display: flex;
  112 + align-items: center;
  113 + span{
  114 + font-size: 24px;
  115 + font-weight: 400;
  116 + color: #999999;
  117 + margin-left: 10px;
  118 + }
  119 + }
88 120 }
89 121 }
90 122 }
... ...
src/components/goodsItem_7/goodsItem_7.vue
  View file @b3b2845
... ... @@ -3,13 +3,18 @@
3 3 <div class="item">
4 4 <div class="img-box">
5 5 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  6 + <!-- 补货中按钮 -->
  7 + <div v-show="item.grade" class="goods_active">
  8 + 补货中
  9 + </div>
6 10 </div>
7 11 <div class="content-box">
8 12 <div class="title">{{item.title}}</div>
9 13 <!-- <div class="coupon-box">
10 14 满180减10
11 15 </div> -->
12   - <div class="price-box">
  16 + <!-- 价格 -->
  17 + <div v-show="!item.grade" class="price-box">
13 18 <div class="left">
14 19 <div class="y">¥&nbsp;</div>
15 20 <div class="integer">{{getInteger(item.price)}}.</div>
... ... @@ -19,70 +24,74 @@
19 24 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" />
20 25 </div>
21 26 </div>
  27 + <!-- 积分 -->
  28 + <div v-show="item.grade" class="grade-box">
  29 + {{item.grade}}<span>积分</span>
  30 + </div>
22 31 </div>
23 32 </div>
24 33 </div>
25 34 </template>
26 35  
27 36 <script>
28   - export default {
29   - data: function () {
30   - return {
  37 +export default {
  38 + data: function () {
  39 + return {
31 40  
32   - }
33   - },
34   - props: ["item"],
35   - computed: {
  41 + }
  42 + },
  43 + props: ["item"],
  44 + computed: {
36 45  
37   - /**
38   - * 获取输入数字的整数部分
39   - */
40   - getInteger() {
41   - return (number) => {
42   - return parseInt(number);
43   - }
44   - },
  46 + /**
  47 + * 获取输入数字的整数部分
  48 + */
  49 + getInteger () {
  50 + return (number) => {
  51 + return parseInt(number);
  52 + }
  53 + },
45 54  
46   - /**
47   - * 获取输入数字的小数部分
48   - */
49   - getDecimal() {
50   - return (number) => {
  55 + /**
  56 + * 获取输入数字的小数部分
  57 + */
  58 + getDecimal () {
  59 + return (number) => {
51 60  
52   - // 拆分数字
53   - let numberArr = number.toString().split(".");
  61 + // 拆分数字
  62 + let numberArr = number.toString().split(".");
54 63  
55   - // 判断是否有效数部分
56   - if (numberArr.length === 2) {
57   - return numberArr[1];
58   - } else {
59   - return "00";
60   - }
61   - }
62   - }
63   - },
64   - methods: {
  64 + // 判断是否有效数部分
  65 + if (numberArr.length === 2) {
  66 + return numberArr[1];
  67 + } else {
  68 + return "00";
  69 + }
  70 + }
  71 + }
  72 + },
  73 + methods: {
65 74  
66   - /**
67   - * 点击跳转
68   - * @param {object} item [数据对象]
69   - */
70   - jump(item) {
71   - this.$emit("jump", item);
72   - },
  75 + /**
  76 + * 点击跳转
  77 + * @param {object} item [数据对象]
  78 + */
  79 + jump (item) {
  80 + this.$emit("jump", item);
  81 + },
73 82  
74   - /**
75   - * 主按钮点击事件
76   - * @param {object} item [数据对象]
77   - */
78   - primary(item) {
79   - this.$emit("primary", item);
80   - }
81   - }
  83 + /**
  84 + * 主按钮点击事件
  85 + * @param {object} item [数据对象]
  86 + */
  87 + primary (item) {
  88 + this.$emit("primary", item);
82 89 }
  90 + }
  91 +}
83 92 </script>
84 93  
85 94 <!-- Add "scoped" attribute to limit CSS to this component only -->
86 95 <style rel="stylesheet/less" lang="less" scoped>
87   - @import './goodsItem_7';
  96 +@import './goodsItem_7';
88 97 </style>
... ...
src/pages/pointsMall/pointsMall.less 0 → 100644
  View file @b3b2845
  1 +@charset "UTF-8";
  2 +.main_box{
  3 + background: #fff;
  4 +}
  5 + // 头部
  6 + .top_main{
  7 + margin:40px 30px;
  8 + padding: 30px;
  9 + height: 394px;
  10 + background: #FFFFFF;
  11 + box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
  12 + border-radius: 24px;
  13 + .top{
  14 + display: flex;
  15 + justify-content: space-between;
  16 + .left{
  17 + height: 40px;
  18 + font-size: 28px;
  19 + font-weight: 400;
  20 + color: #45270D;
  21 + line-height: 40px;
  22 + span{
  23 + margin-left: 8px;
  24 + height: 40px;
  25 + font-size: 28px;
  26 + font-weight: 500;
  27 + color: #F5A623;
  28 + line-height: 40px;
  29 + }
  30 + }
  31 + .right{
  32 + height: 33px;
  33 + font-size: 24px;
  34 + font-weight: 400;
  35 + color: #999999;
  36 + line-height: 33px;
  37 + display: flex;
  38 + justify-content: center;
  39 + align-items: center;
  40 + .back_right_iocn{
  41 + display: block;
  42 + width: 20px;
  43 + height:20px;
  44 + margin-left: 10px;
  45 + }
  46 + }
  47 + }
  48 + // 商品类型
  49 + .item_box{
  50 + display: flex;
  51 + justify-content: space-between;
  52 + margin: 40px 110px 30px 110px;
  53 + .item{
  54 + img{
  55 + display: block;
  56 + width: 90px;
  57 + height:90px;
  58 + }
  59 + .text{
  60 + width: 96px;
  61 + height: 33px;
  62 + font-size: 24px;
  63 + font-weight: 400;
  64 + color: #666666;
  65 + line-height: 33px;
  66 + margin-top: 12px;
  67 + }
  68 + }
  69 + }
  70 + //赚取积分
  71 + .earn_points_box{
  72 + height: 90px;
  73 + background: #FFF8E8;
  74 + border-radius: 12px;
  75 + display:flex;
  76 + justify-content: space-between;
  77 + align-items: center;
  78 + padding: 10px 20px;
  79 + .earn_icon{
  80 + display: block;
  81 + width: 36px;
  82 + height:36px;
  83 + }
  84 + .desc{
  85 + height: 90px;
  86 + font-size: 26px;
  87 + font-weight: 400;
  88 + color: #746037;
  89 + line-height: 90px;
  90 + }
  91 + .btn{
  92 + padding: 9px 20px;
  93 + height: 50px;
  94 + background: #DAB277;
  95 + border-radius: 26px;
  96 + color: #fff;
  97 + text-align: center;
  98 + display: flex;
  99 + align-items: center;
  100 + .earn_right_back{
  101 + display: block;
  102 + width: 9px;
  103 + height: 18px;
  104 + margin-left: 8px;
  105 + }
  106 + }
  107 + }
  108 + }
  109 + // 内容区域
  110 + .tab_item_box{
  111 + display: flex;
  112 + align-items: center;
  113 + // justify-content: space-between;
  114 + margin:50px 30px 33px 30px;
  115 + .item{
  116 + height: 33px;
  117 + font-size: 24px;
  118 + font-weight: 400;
  119 + color: #999999;
  120 + line-height: 33px;
  121 + }
  122 + .active{
  123 + height: 48px;
  124 + font-size: 34px;
  125 + font-weight: 600;
  126 + color: #373737;
  127 + line-height: 48px;
  128 + }
  129 + .line{
  130 + width: 1px;
  131 + height: 20px;
  132 + background: #999999;
  133 + margin: 0 16px;
  134 + }
  135 + }
  136 + // 为你推荐
  137 + .list-box {
  138 + display: flex;
  139 + justify-content: space-between;
  140 + align-items: center;
  141 + .discount-flag {
  142 + position: absolute;
  143 + top: 4px;
  144 + left: 22px;
  145 + z-index: 1;
  146 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  147 + padding: 1px 8px;
  148 + color: #945A08;
  149 + font-size: 20px;
  150 + font-weight: 400;
  151 + border-radius: 6px;
  152 + }
  153 +}
0 154 \ No newline at end of file
... ...
src/pages/pointsMall/pointsMall.vue 0 → 100644
  View file @b3b2845
  1 +<template>
  2 +<div>
  3 + <div class="main_box">
  4 + <div class="top_main">
  5 + <!-- 头部 -->
  6 + <div class="top">
  7 + <div class="left">
  8 + 我的积分: <span>2800</span>
  9 + </div>
  10 + <div class="right">
  11 + 兑换记录
  12 + <!-- 返回图标 -->
  13 + <img class="back_right_iocn" src="static/img/back_right.png" alt=""/>
  14 + </div>
  15 + </div>
  16 + <!-- 商品类型 -->
  17 + <div class="item_box">
  18 + <div class="item">
  19 + <img src="static/img/1.png" alt=""/>
  20 + <div class="text">实物商品</div>
  21 + </div>
  22 + <div class="item">
  23 + <img src="static/img/1.png" alt=""/>
  24 + <div class="text">虚拟商品</div>
  25 + </div>
  26 + <div class="item">
  27 + <img src="static/img/1.png" alt=""/>
  28 + <div class="text">满减红包</div>
  29 + </div>
  30 + </div>
  31 + <!--积分赚取 -->
  32 + <div class="earn_points_box">
  33 + <img class="earn_icon" src="static/img/1.png" alt="">
  34 + <div class="desc">赚取更多积分，兑换精美礼品～</div>
  35 + <div class="btn">赚取积分 <img class="earn_right_back" src="static/img/back_right.png" alt=""/></div>
  36 + </div>
  37 + </div>
  38 + <!-- 为你推荐 -->
  39 + <div class="tab_item_box">
  40 + <div class="item active">为你推荐</div>
  41 + <!-- 分割线 -->
  42 + <div class="line"> </div>
  43 + <div class="item">热门商品</div>
  44 + </div>
  45 + <!-- 为你推荐商品列表 -->
  46 + <div class="list-box">
  47 + <!-- 商品展示样式 2 -->
  48 + <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
  49 + :item="item"
  50 + pid="4">
  51 + </goods-item-2>
  52 + </div>
  53 + <!-- 实物商品 -->
  54 + <div class="tab_item_box">
  55 + <div class="item active">实物商品</div>
  56 + <!-- 分割线 -->
  57 + <div class="line"> </div>
  58 + <div class="item">实物商品实物商品实物商品实物商品</div>
  59 + </div>
  60 + <!-- 实物商品裂变 -->
  61 + <!-- 商品样式 7 列表 -->
  62 + <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" @primary="primary"
  63 + :lists="phyicalGoods"
  64 + com="7">
  65 + </column-list-box>
  66 + <!-- 虚拟商品 -->
  67 + <div class="tab_item_box">
  68 + <div class="item active">虚拟商品</div>
  69 + <!-- 分割线 -->
  70 + <div class="line"> </div>
  71 + <div class="item">热门商品</div>
  72 + </div>
  73 + <!-- 满减红包 -->
  74 + <div class="tab_item_box">
  75 + <div class="item active">满减红包</div>
  76 + <!-- 分割线 -->
  77 + <div class="line"> </div>
  78 + <div class="item">热门商品</div>
  79 + </div>
  80 + </div>
  81 +</div>
  82 +</template>
  83 +
  84 +<script>
  85 +import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  86 +import columnListBox from "@/components/columnListBox/columnListBox";
  87 +export default {
  88 + data () {
  89 + return {
  90 + goodsLists: null, // 为你推荐商品
  91 + phyicalGoods: null, // 实物商品
  92 + virtualGoods: null, // 虚拟商品
  93 + redEnvelopeFull: null // 满减红包
  94 + }
  95 + },
  96 + //部件
  97 + components: {
  98 + goodsItem2,
  99 + columnListBox
  100 + },
  101 + //静态
  102 + props: [
  103 + ],
  104 + //对象内部的属性监听，也叫深度监听
  105 + watch: {
  106 + },
  107 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  108 + computed: {
  109 + },
  110 + //方法表示一个具体的操作，主要书写业务逻辑；
  111 + methods: {
  112 + },
  113 + //请求数据
  114 + created () {
  115 + // 临时，为你推荐商品数据
  116 + this.$set(this, 'goodsLists', [
  117 + {
  118 + ads: "广告语",
  119 + id: "9519164",
  120 + price: "5.01",
  121 + prices: "6.00",
  122 + shop_type: "1",
  123 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  124 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  125 + grade: 1500 // 积分
  126 + },
  127 + {
  128 + ads: "广告语",
  129 + id: "9519164",
  130 + price: "5.01",
  131 + prices: "6.00",
  132 + shop_type: "1",
  133 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  134 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  135 + grade: 1500 // 积分
  136 + },
  137 + {
  138 + ads: "广告语",
  139 + id: "9519164",
  140 + price: "5.01",
  141 + prices: "6.00",
  142 + shop_type: "1",
  143 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  144 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml",
  145 + grade: 1500 // 积分
  146 + }
  147 + ]);
  148 + // 临时，实物商品列表
  149 + this.$set(this, 'phyicalGoods', {
  150 + list: [
  151 + {
  152 + activity: "0",
  153 + activity_desc: "",
  154 + addtime: "1604544867",
  155 + ads: "23123",
  156 + code: "160454486791776561000",
  157 + id: "9525539",
  158 + price: "0.01",
  159 + prices: "0.00",
  160 + shop_type: "1",
  161 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  162 + stock: "0",
  163 + stoptime: "0",
  164 + title: "aabbsdf350ml",
  165 + grade: 1500 // 积分
  166 + },
  167 + {
  168 + activity: "0",
  169 + activity_desc: "",
  170 + addtime: "1604544867",
  171 + ads: "23123",
  172 + code: "160454486791776561000",
  173 + id: "9525539",
  174 + price: "0.01",
  175 + prices: "0.00",
  176 + shop_type: "1",
  177 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  178 + stock: "0",
  179 + stoptime: "0",
  180 + title: "aabbsdf350ml",
  181 + grade: 1500 // 积分
  182 + },
  183 + {
  184 + activity: "0",
  185 + activity_desc: "",
  186 + addtime: "1604544867",
  187 + ads: "23123",
  188 + code: "160454486791776561000",
  189 + id: "9525539",
  190 + price: "0.01",
  191 + prices: "0.00",
  192 + shop_type: "1",
  193 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  194 + stock: "0",
  195 + stoptime: "0",
  196 + title: "aabbsdf350ml",
  197 + grade: 1500 // 积分
  198 + },
  199 + {
  200 + activity: "0",
  201 + activity_desc: "",
  202 + addtime: "1604544867",
  203 + ads: "23123",
  204 + code: "160454486791776561000",
  205 + id: "9525539",
  206 + price: "0.01",
  207 + prices: "0.00",
  208 + shop_type: "1",
  209 + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
  210 + stock: "0",
  211 + stoptime: "0",
  212 + title: "aabbsdf350ml",
  213 + grade: 1500 // 积分
  214 + }
  215 + ]
  216 + });
  217 + },
  218 + mounted () {
  219 + }
  220 +}
  221 +</script>
  222 +
  223 +<style rel="stylesheet/less" lang='less' scoped>
  224 +@import 'pointsMall';
  225 +</style>
  226 +
... ...
src/router/index.js
  View file @b3b2845
... ... @@ -32,7 +32,9 @@ const router = new Router({
32 32 path: "/fansShopMessageList",
33 33 name: "fansShopMessageList",
34 34 component: resolve => {
35   - require(["@/pages/fansShopMessageList/fansShopMessageList"], resolve);
  35 + require([
  36 + "@/pages/fansShopMessageList/fansShopMessageList"
  37 + ], resolve);
36 38 },
37 39 meta: {
38 40 requireAuth: false
... ... @@ -131,7 +133,9 @@ const router = new Router({
131 133 path: "/recommendMore",
132 134 name: "recommendMore",
133 135 component: resolve => {
134   - require(["@/pages/recommendMore/recommendMore"], resolve);
  136 + require([
  137 + "@/pages/recommendMore/recommendMore"
  138 + ], resolve);
135 139 },
136 140 meta: {
137 141 requireAuth: false
... ... @@ -178,7 +182,9 @@ const router = new Router({
178 182 path: "/optimization2",
179 183 name: "optimization2",
180 184 component: resolve => {
181   - require(["@/pages/optimization2/optimization2"], resolve);
  185 + require([
  186 + "@/pages/optimization2/optimization2"
  187 + ], resolve);
182 188 },
183 189 meta: {
184 190 requireAuth: false
... ... @@ -211,15 +217,27 @@ const router = new Router({
211 217 path: "/optimizationList",
212 218 name: "optimizationList",
213 219 component: resolve => {
214   - require(["@/pages/optimizationList/optimizationList"], resolve);
  220 + require([
  221 + "@/pages/optimizationList/optimizationList"
  222 + ], resolve);
215 223 },
216 224 meta: {
217 225 requireAuth: false
218 226 }
219 227 },
  228 + {
  229 + // 积分商城首页
  230 + path: "/pointsMall",
  231 + name: "pointsMall",
  232 + component: resolve => {
  233 + require(["@/pages/pointsMall/pointsMall"], resolve);
  234 + },
  235 + meta: {
  236 + requireAuth: false
  237 + }
  238 + }
220 239  
221 240 /* 优选和商城页面改版升级页面 结束 */
222   -
223 241 ]
224 242 },
225 243 {
... ...
static/img/back_right.png 0 → 100755
View file @b3b2845

477 Bytes