w-front-end / select_good · Commits

Commit e10075b4c3858b1775d274fd2f1893fc25d266a5

Authored by 王强
1 parent 5db8f0d5

优选库——优选，品质优选列表页完成~

Inline Side-by-side
Showing 15 changed files with 253 additions and 152 deletions
src/components/goodsItem_9/goodsItem_9.less 0 → 100644
  View file @e10075b
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-9-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .main-box {
  8 + display: flex;
  9 + justify-content: space-between;
  10 + margin: 0 auto;
  11 + padding: 30px 0;
  12 + width: 90%;
  13 + height: auto;
  14 +
  15 +
  16 +
  17 +
  18 +
  19 + }
  20 + &.style-2 {
  21 + .main-box {
  22 +
  23 + }
  24 + }
  25 + &.style-3 {
  26 + .main-box {
  27 +
  28 + }
  29 + }
  30 +}
... ...
src/components/goodsItem_9/goodsItem_9.vue 0 → 100644
  View file @e10075b
  1 +<template>
  2 + <div class="goods-item-9-box" :class="'style-' + sty" v-if="item" @click="jump(item)">
  3 + <div class="main-box">
  4 +
  5 + </div>
  6 + </div>
  7 +</template>
  8 +
  9 +<script>
  10 + export default {
  11 + data: function () {
  12 + return {
  13 +
  14 + }
  15 + },
  16 + props: ["item", "sty"],
  17 + computed: {
  18 +
  19 + /**
  20 + * 获取输入数字的整数部分
  21 + */
  22 + getInteger() {
  23 + return (number) => {
  24 + return parseInt(number);
  25 + }
  26 + },
  27 +
  28 + /**
  29 + * 获取输入数字的小数部分
  30 + */
  31 + getDecimal() {
  32 + return (number) => {
  33 +
  34 + // 拆分数字
  35 + let numberArr = number.toString().split(".");
  36 +
  37 + // 判断是否有效数部分
  38 + if (numberArr.length === 2) {
  39 + return numberArr[1];
  40 + } else {
  41 + return "00";
  42 + }
  43 + }
  44 + }
  45 + },
  46 + methods: {
  47 +
  48 + /**
  49 + * 点击跳转
  50 + * @param {object} item [数据对象]
  51 + */
  52 + jump(item) {
  53 + this.$emit("jump", item);
  54 + },
  55 +
  56 + /**
  57 + * 主按钮点击事件
  58 + * @param {object} item [数据对象]
  59 + */
  60 + primary(item) {
  61 + this.$emit("primary", item);
  62 + }
  63 + }
  64 + }
  65 +</script>
  66 +
  67 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  68 +<style rel="stylesheet/less" lang="less" scoped>
  69 + @import './goodsItem_9';
  70 +</style>
... ...
src/pages/optimizationList/optimizationList.less
  View file @e10075b
... ... @@ -25,31 +25,12 @@
25 25 }
26 26 }
27 27 .main-box {
28   - .header-box {
29   - width: 100%;
30   - height: auto;
31   - .header-img {
32   - display: block;
33   - width: 100%;
34   - height: auto;
35   - }
36   - }
37   - .count-down-box {
38   - display: flex;
39   - justify-content: flex-start;
40   - align-items: center;
41   - margin: 0 auto;
42   - width: 630px;
43   - height: auto;
44   - .text {
45   - color: #633531;
46   - font-size: 24px;
47   - font-weight: 400;
48   - }
49   - }
  28 + padding: 40px 0;
50 29 .section {
51 30 background-color: #ffffff;
52   - margin: 40px auto;
  31 + background-repeat: no-repeat;
  32 + background-size: contain;
  33 + margin: 0 auto 30px auto;
53 34 width: 690px;
54 35 height: auto;
55 36 border-radius: 24px;
... ... @@ -57,64 +38,47 @@
57 38 &:last-child {
58 39 margin-bottom: 0;
59 40 }
60   - &.goods-list {
61   - /deep/ .goods-item-8-box {
62   - .main-box {
63   - border-bottom: 1px solid #EAEAEA;
  41 + &.red-box, &.blue-box, &.green-box {
  42 + .content-box {
  43 + margin-top: 580px;
  44 + .video-box {
  45 + margin: 0 auto;
  46 + width: 90%;
  47 + height: auto;
  48 + border-radius: 24px;
  49 + overflow: hidden;
  50 + .video {
  51 + width: 100%;
  52 + height: auto;
  53 + }
64 54 }
65   - }
66   - /deep/ .goods-item-8-box:last-child {
67   - .main-box {
68   - border-bottom: none;
  55 + .list-box {
  56 + margin: 0 auto;
  57 + width: 90%;
  58 + height: auto;
  59 + .item {
  60 + margin: 20px auto;
  61 + width: 100%;
  62 + height: auto;
  63 + border-radius: 24px;
  64 + overflow: hidden;
  65 + .list-img {
  66 + display: block;
  67 + width: 100%;
  68 + height: auto;
  69 + }
  70 + }
69 71 }
70 72 }
71   - .discount-flag {
72   - position: absolute;
73   - top: 10px;
74   - left: 10px;
75   - z-index: 1;
76   - background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
77   - padding: 1px 8px;
78   - color: #945A08;
79   - font-size: 20px;
80   - font-weight: 400;
81   - border-radius: 6px;
82   - }
83 73 }
84   - }
85   - .bottom-pl {
86   - background-color: transparent;
87   - width: 100%;
88   - height: 100px;
89   - }
90   - .tips-box {
91   - position: fixed;
92   - bottom: 0;
93   - z-index: 1;
94   - background-color: #FFF6E5;
95   - padding: 30px 0;
96   - width: 100%;
97   - height: auto;
98   - .tips {
99   - display: flex;
100   - justify-content: flex-start;
101   - align-items: center;
102   - margin: 0 auto;
103   - width: 690px;
104   - height: 100%;
105   - .tips-img {
106   - display: block;
107   - width: 26px;
108   - height: 26px;
109   - & + .text {
110   - margin-left: 14px;
111   - }
112   - }
113   - .text {
114   - color: #FEA835;
115   - font-size: 24px;
116   - font-weight: 400;
117   - }
  74 + &.red-box {
  75 + background-color: #FCA389;
  76 + }
  77 + &.blue-box {
  78 + background-color: #5B8BB4;
  79 + }
  80 + &.green-box {
  81 + background-color: #ADC77F;
118 82 }
119 83 }
120 84 }
... ...
src/pages/optimizationList/optimizationList.vue
  View file @e10075b
... ... @@ -17,11 +17,71 @@
17 17 <!-- 主区域 -->
18 18 <div class="main-box">
19 19  
20   -
21   -
22   -
23   -
24   -
  20 + <!-- 区块 -->
  21 + <div class="section red-box" :style="{backgroundImage: 'url(' + redBox.bg + ')'}" v-if="redBox">
  22 +
  23 + <!-- 主区域 -->
  24 + <div class="content-box">
  25 +
  26 + <!-- 视频区块 -->
  27 + <div class="video-box" v-if="redBox.video">
  28 + <video class="video" controls :poster="redBox.video.poster + SIGN.BIG">
  29 + <source :src="redBox.video.url" type="video/mp4" />
  30 + </video>
  31 + </div>
  32 +
  33 + <!-- 列表区块 -->
  34 + <div class="list-box" v-if="redBox.list">
  35 + <div class="item" v-for="(item, index) in redBox.list" :key="index" @click="toDetail(item)">
  36 + <img :src="item.img + SIGN.BIG" class="list-img" />
  37 + </div>
  38 + </div>
  39 + </div>
  40 + </div>
  41 +
  42 + <!-- 区块 -->
  43 + <div class="section blue-box" :style="{backgroundImage: 'url(' + blueBox.bg + ')'}" v-if="blueBox">
  44 +
  45 + <!-- 主区域 -->
  46 + <div class="content-box">
  47 +
  48 + <!-- 视频区块 -->
  49 + <div class="video-box" v-if="blueBox.video">
  50 + <video class="video" controls :poster="blueBox.video.poster + SIGN.BIG">
  51 + <source :src="blueBox.video.url" type="video/mp4" />
  52 + </video>
  53 + </div>
  54 +
  55 + <!-- 列表区块 -->
  56 + <div class="list-box" v-if="blueBox.list">
  57 + <div class="item" v-for="(item, index) in blueBox.list" :key="index" @click="toDetail(item)">
  58 + <img :src="item.img + SIGN.BIG" class="list-img" />
  59 + </div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 +
  64 + <!-- 区块 -->
  65 + <div class="section green-box" :style="{backgroundImage: 'url(' + greenBox.bg + ')'}" v-if="greenBox">
  66 +
  67 + <!-- 主区域 -->
  68 + <div class="content-box">
  69 +
  70 + <!-- 视频区块 -->
  71 + <div class="video-box" v-if="greenBox.video">
  72 + <video class="video" controls :poster="greenBox.video.poster + SIGN.BIG">
  73 + <source :src="greenBox.video.url" type="video/mp4" />
  74 + </video>
  75 + </div>
  76 +
  77 + <!-- 列表区块 -->
  78 + <div class="list-box" v-if="greenBox.list">
  79 + <div class="item" v-for="(item, index) in greenBox.list" :key="index" @click="toDetail(item)">
  80 + <img :src="item.img + SIGN.BIG" class="list-img" />
  81 + </div>
  82 + </div>
  83 + </div>
  84 + </div>
25 85 </div>
26 86  
27 87 <!-- 回到顶部按钮 -->
... ... @@ -37,12 +97,6 @@
37 97 import { Toast, Indicator } from "mint-ui";
38 98 import callAppBox from "@/components/callAppBox/callAppBox";
39 99 import backBox from "@/components/backBox/backBox";
40   -
41   -
42   -
43   -
44   -
45   -
46 100 import gotoTop from "@/components/gotoTop/gotoTop";
47 101  
48 102 export default {
... ... @@ -51,8 +105,11 @@
51 105 return {
52 106 title: "", // 标题
53 107 backs: null, // 后退按钮组
54   -
  108 + redBox: null, // 红色区块
  109 + blueBox: null, // 蓝色区块
  110 + greenBox: null, // 绿色区块
55 111  
  112 +
56 113  
57 114  
58 115 }
... ... @@ -60,10 +117,6 @@
60 117 components: {
61 118 callAppBox,
62 119 backBox,
63   -
64   -
65   -
66   -
67 120 gotoTop
68 121 },
69 122 created() {
... ... @@ -99,7 +152,48 @@
99 152 // this.fansShopMessageList();
100 153  
101 154  
102   -
  155 +
  156 +
  157 + // 临时，设置各区块头部图片地址
  158 + this.$set(this, 'redBox', {
  159 + bg: 'static/img/o_bg_01.png',
  160 + video: {
  161 + poster: 'static/img/o_01_video.png'
  162 + },
  163 + list: [
  164 + {
  165 + img: 'static/img/o_01_01.png'
  166 + },
  167 + {
  168 + img: 'static/img/o_01_02.png'
  169 + }
  170 + ]
  171 + });
  172 + this.$set(this, 'blueBox', {
  173 + bg: 'static/img/o_bg_02.png',
  174 + video: {
  175 + poster: 'static/img/o_02_video.png'
  176 + },
  177 + list: [
  178 + {
  179 + img: 'static/img/o_02_01.png'
  180 + },
  181 + {
  182 + img: 'static/img/o_02_02.png'
  183 + }
  184 + ]
  185 + });
  186 + this.$set(this, 'greenBox', {
  187 + bg: 'static/img/o_bg_03.png',
  188 + list: [
  189 + {
  190 + img: 'static/img/o_03_01.png'
  191 + },
  192 + {
  193 + img: 'static/img/o_03_02.png'
  194 + }
  195 + ]
  196 + });
103 197  
104 198  
105 199  
... ... @@ -161,64 +255,6 @@
161 255 },
162 256  
163 257 /**
164   - * 商品列表
165   - * @param {Int} groupId [平台分类id]
166   - * @param {Int} page [页码]
167   - * @param {String} CALL_STATUS [何处触发请求]
168   - */
169   - shopGoodsList(groupId, page) {
170   -
171   - // 校验必填参数
172   - if (groupId && page) {
173   -
174   - // 加载中
175   - this.$set(this.paging, "loading", true);
176   -
177   - // 获取证书请求接口
178   - this.http("/Api/" + this.getApiVersion().index + "/shopNewGoodsList", {
179   - groupid: groupId,
180   - page: page
181   - }, this.shopGoodsListCallback, {
182   - method: "POST"
183   - }
184   - );
185   - }
186   - },
187   -
188   - /**
189   - * 商品列表回调
190   - * @param {Object} res [服务器返回数据]
191   - * @param {Object} ext [扩展参数]
192   - */
193   - shopGoodsListCallback(res, ext) {
194   -
195   - // 下拉刷新结束
196   - this.$set(this, "isLoading", false);
197   -
198   - // 返回处理
199   - if (res.code == 200) {
200   -
201   - // 解构数据
202   - let { data: datas } = res;
203   -
204   - /* 获取商品列表数据 开始 */
205   -
206   -
207   -
208   - /* 获取商品列表数据 结束 */
209   -
210   - } else if (res.code == 400) {
211   -
212   - // 获取最新上架列表失败
213   - Toast(res.message);
214   - } else {
215   -
216   - // 获取最新上架列表失败
217   - Toast("获取最新上架列表失败");
218   - }
219   - },
220   -
221   - /**
222 258 * 跳转商品详情
223 259 * @param {Object} item [数据对象]
224 260 */
... ... @@ -235,6 +271,7 @@
235 271 this.$parent.gotoDetail(item);
236 272 }
237 273 },
  274 +
238 275 /**
239 276 * 列表附件按钮事件
240 277 * @param {Object} item [数据对象]
... ...
static/img/o_01_01.png 0 → 100644
View file @e10075b

121 KB
static/img/o_01_02.png 0 → 100644
View file @e10075b

124 KB
static/img/o_01_video.png 0 → 100644
View file @e10075b

165 KB
static/img/o_02_01.png 0 → 100644
View file @e10075b

89 KB
static/img/o_02_02.png 0 → 100644
View file @e10075b

88.8 KB
static/img/o_02_video.png 0 → 100644
View file @e10075b

33.6 KB
static/img/o_03_01.png 0 → 100644
View file @e10075b

129 KB
static/img/o_03_02.png 0 → 100644
View file @e10075b

129 KB
static/img/o_bg_01.png 0 → 100644
View file @e10075b

538 KB
static/img/o_bg_02.png 0 → 100644
View file @e10075b

493 KB
static/img/o_bg_03.png 0 → 100644
View file @e10075b

598 KB