w-front-end / select_good · Commits

Commit 816aa9be4118f7b51bdb06d77b47c622dcb4d918

Authored by 王强
1 parent 48009ac5

1、品质优选接口对接完成 

2、商城首页（旗舰店）页面组件优化
Inline Side-by-side
Showing 6 changed files with 146 additions and 221 deletions
src/components/titleSubTitleHoriCom/titleSubTitleHoriCom.less 0 → 100644
  View file @816aa9b
  1 +@charset "UTF-8";
  2 +
  3 +.title-sub-title-hori-com {
  4 + width: 100%;
  5 + .box {
  6 + display: flex;
  7 + justify-content: flex-start;
  8 + align-items: baseline;
  9 + margin: 0 auto;
  10 + width: 90%;
  11 + .title {
  12 + color: #4A4A4A;
  13 + font-size: 34px;
  14 + font-weight: 600;
  15 + & + .sub-title {
  16 + margin-left: 20px;
  17 + padding-left: 16px;
  18 + border-left: 1px solid #979797;
  19 + }
  20 + }
  21 + .sub-title {
  22 + color: #999999;
  23 + font-size: 24px;
  24 + font-weight: 400;
  25 + }
  26 + }
  27 +}
0 28 \ No newline at end of file
... ...
src/components/titleSubTitleHoriCom/titleSubTitleHoriCom.vue 0 → 100644
  View file @816aa9b
  1 +<template>
  2 + <div class="title-sub-title-hori-com" v-if="titles">
  3 + <div class="box">
  4 + <div class="title">{{titles.title}}</div>
  5 + <div class="sub-title">{{titles.subTitle}}</div>
  6 + </div>
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 + export default {
  12 + name: 'titleSubTitleHoriCom',
  13 + data() {
  14 + return {
  15 +
  16 + };
  17 + },
  18 + props: ["titles"],
  19 + methods: {
  20 +
  21 + }
  22 + }
  23 +</script>
  24 +
  25 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  26 +<style rel="stylesheet/less" lang='less' scoped>
  27 + @import './titleSubTitleHoriCom';
  28 +</style>
... ...
src/pages/mall2/mall2.less
  View file @816aa9b
... ... @@ -37,7 +37,9 @@
37 37 margin-bottom: 0;
38 38 }
39 39 &.shop-hot {
40   -
  40 + .title-sub-title-hori-com {
  41 + margin: 30px auto;
  42 + }
41 43 }
42 44 &.shop-list {
43 45 .header-img-box {
... ...
src/pages/mall2/mall2.vue
  View file @816aa9b
... ... @@ -18,19 +18,20 @@
18 18 <div class="main-box">
19 19  
20 20 <!-- 店铺精选 -->
21   - <div class="section shop-hot">
  21 + <div class="section shop-hot" v-if="navs">
22 22  
23 23 <!-- 标题 -->
24   - <text-bg-title-com
  24 + <title-sub-title-hori-com
25 25 :titles="{
26   - bg: 'static/img/text_bg_title_bg.jpg'
  26 + title: '旗舰店精选',
  27 + subTitle: '优质品牌 为你推荐'
27 28 }">
28   - </text-bg-title-com>
  29 + </title-sub-title-hori-com>
29 30  
30 31 <!-- 轮播展示店铺 -->
31   - <iconSwiperBox @jump="toDetail"
  32 + <icon-swiper-box @jump="toDetail"
32 33 :icons="navs">
33   - </iconSwiperBox>
  34 + </icon-swiper-box>
34 35 </div>
35 36  
36 37 <!-- 店铺列表 -->
... ... @@ -64,7 +65,7 @@
64 65 import { Toast, Indicator } from "mint-ui";
65 66 import callAppBox from "@/components/callAppBox/callAppBox";
66 67 import backBox from "@/components/backBox/backBox";
67   - import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
  68 + import titleSubTitleHoriCom from "@/components/titleSubTitleHoriCom/titleSubTitleHoriCom";
68 69 import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
69 70 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
70 71  
... ... @@ -81,20 +82,24 @@
81 82 components: {
82 83 callAppBox,
83 84 backBox,
84   - textBgTitleCom,
  85 + titleSubTitleHoriCom,
85 86 iconSwiperBox,
86 87 goodsItem2
87 88 },
88 89 created() {
89 90  
90   - // 获取优选库精选活动
91   - this.activityAd();
  91 + // 设置标题
  92 + this.$set(this, 'title', '旗舰店');
  93 +
  94 + // 品质优选
  95 + this.goodQuality();
92 96  
93 97 // 判断是否在App内
94 98 if (this.isCNLive.value) {
95 99  
96 100 // 添加后退按钮组“后退”和“分享”按钮
97 101 this.$set(this, 'backs', {
  102 + title: this.title,
98 103 funcs: {
99 104 back: {
100 105 icon: "static/img/icon_back.png"
... ... @@ -283,27 +288,27 @@
283 288 methods: {
284 289  
285 290 /**
286   - * 获取初始数据
  291 + * 品质优选
287 292 */
288   - activityAd() {
  293 + goodQuality() {
289 294  
290 295 // 加载中提示
291 296 Indicator.open("加载中...");
292 297  
293 298 // 获取证书请求接口
294   - this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
295   - id: this.$route.query.id
296   - }, this.activityAdCallback, {
  299 + this.http("/Api/" + this.getApiVersion().good + "/goodQuality", {
  300 + id: 0
  301 + }, this.goodQualityCallback, {
297 302 method: "POST"
298 303 });
299 304 },
300 305  
301 306 /**
302   - * 获取初始数据回调
  307 + * 品质优选回调
303 308 * @param {Object} res [服务器返回数据]
304 309 * @param {Object} ext [扩展参数]
305 310 */
306   - activityAdCallback(res, ext) {
  311 + goodQualityCallback(res, ext) {
307 312  
308 313 // 加载完成
309 314 Indicator.close();
... ... @@ -316,20 +321,7 @@
316 321  
317 322 /* 获取优选库精选活动数据 开始 */
318 323  
319   - // 设置标题
320   - this.$set(this, "title", datas.title);
321   -
322   - // 判断App内
323   - if (this.isCNLive.value) {
324   -
325   - // 设置后退按钮组
326   - this.$set(this.backs, 'title', datas.title);
327   - }
328   -
329   - // 设置navs数据
330   - if (datas.navs && datas.navs.length) {
331   - this.$set(this, "navs", datas.navs);
332   - }
  324 +
333 325  
334 326 /* 获取优选库精选活动数据 结束 */
335 327  
... ... @@ -340,7 +332,7 @@
340 332 } else {
341 333  
342 334 // 获取初始数据失败
343   - Toast("获取初始数据失败");
  335 + Toast("获取数据失败");
344 336 }
345 337 },
346 338  
... ...
src/pages/optimizationList/optimizationList.less
  View file @816aa9b
... ... @@ -38,48 +38,37 @@
38 38 &:last-child {
39 39 margin-bottom: 0;
40 40 }
41   - &.red-box, &.blue-box, &.green-box {
42   - .content-box {
43   - margin-top: 580px;
44   - .video-box {
45   - margin: 0 auto;
46   - width: 90%;
  41 + .content-box {
  42 + margin-top: 580px;
  43 + .video-box {
  44 + margin: 0 auto;
  45 + width: 90%;
  46 + height: auto;
  47 + border-radius: 24px;
  48 + overflow: hidden;
  49 + .video {
  50 + width: 100%;
47 51 height: auto;
48   - border-radius: 24px;
49   - overflow: hidden;
50   - .video {
51   - width: 100%;
52   - height: auto;
53   - }
54 52 }
55   - .list-box {
56   - margin: 0 auto;
57   - width: 90%;
  53 + }
  54 + .list-box {
  55 + margin: 0 auto;
  56 + width: 90%;
  57 + height: auto;
  58 + .item {
  59 + margin: 20px auto;
  60 + width: 100%;
58 61 height: auto;
59   - .item {
60   - margin: 20px auto;
  62 + border-radius: 24px;
  63 + overflow: hidden;
  64 + .list-img {
  65 + display: block;
61 66 width: 100%;
62 67 height: auto;
63   - border-radius: 24px;
64   - overflow: hidden;
65   - .list-img {
66   - display: block;
67   - width: 100%;
68   - height: auto;
69   - }
70 68 }
71 69 }
72 70 }
73 71 }
74   - &.red-box {
75   - background-color: #FCA389;
76   - }
77   - &.blue-box {
78   - background-color: #5B8BB4;
79   - }
80   - &.green-box {
81   - background-color: #ADC77F;
82   - }
83 72 }
84 73 }
85 74 }
86 75 \ No newline at end of file
... ...
src/pages/optimizationList/optimizationList.vue
  View file @816aa9b
... ... @@ -17,71 +17,31 @@
17 17 <!-- 主区域 -->
18 18 <div class="main-box">
19 19  
20   - <!-- 区块 -->
21   - <div class="section red-box" :style="{backgroundImage: 'url(' + redBox.bg + ')'}" v-if="redBox">
  20 + <!-- 判断变量是否存在 -->
  21 + <template v-if="datas">
22 22  
23   - <!-- 主区域 -->
24   - <div class="content-box">
  23 + <!-- 区块 -->
  24 + <div class="section" :style="{backgroundImage: 'url(' + item.img || '' + ')', backgroundColor: item.color || '#FFFFFF'}" v-for="(item, index) in datas" :key="index">
25 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">
  26 + <!-- 主区域 -->
  27 + <div class="content-box">
44 28  
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" />
  29 + <!-- 视频区块 -->
  30 + <div class="video-box" v-if="item.video">
  31 + <video class="video" controls :poster="item.video_img + SIGN.BIG">
  32 + <source :src="item.video" type="video/mp4" />
  33 + </video>
59 34 </div>
60   - </div>
61   - </div>
62   - </div>
63   -
64   - <!-- 区块 -->
65   - <div class="section green-box" :style="{backgroundImage: 'url(' + greenBox.bg + ')'}" v-if="greenBox">
66 35  
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" />
  36 + <!-- 列表区块 -->
  37 + <div class="list-box" v-if="item.ads">
  38 + <div class="item" v-for="(subItem, subIndex) in item.ads" :key="subIndex" @click="toDetail(subItem)">
  39 + <img :src="subItem.img + SIGN.BIG" class="list-img" />
  40 + </div>
81 41 </div>
82 42 </div>
83 43 </div>
84   - </div>
  44 + </template>
85 45 </div>
86 46  
87 47 <!-- 回到顶部按钮 -->
... ... @@ -105,13 +65,7 @@
105 65 return {
106 66 title: "", // 标题
107 67 backs: null, // 后退按钮组
108   - redBox: null, // 红色区块
109   - blueBox: null, // 蓝色区块
110   - greenBox: null, // 绿色区块
111   -
112   -
113   -
114   -
  68 + datas: null // 列表数据
115 69 }
116 70 },
117 71 components: {
... ... @@ -129,6 +83,7 @@
129 83  
130 84 // 添加后退按钮组“后退”和“分享”按钮
131 85 this.$set(this, 'backs', {
  86 + title: this.title,
132 87 funcs: {
133 88 back: {
134 89 icon: "static/img/icon_back.png"
... ... @@ -141,92 +96,35 @@
141 96 ]
142 97 }
143 98 });
144   -
145   - // 设置标题
146   - this.$set(this.backs, 'title', '品质优选');
147 99 }
148 100  
149   -
150   -
151   - // 优选页面接口
152   - // this.fansShopMessageList();
153   -
154   -
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   - });
197   -
198   -
199   -
200   -
  101 + // 品质优选
  102 + this.goodQuality();
201 103 },
202 104 methods: {
203 105  
204 106 /**
205   - * 优选页面接口
  107 + * 品质优选
206 108 */
207   - fansShopMessageList() {
  109 + goodQuality() {
208 110  
209   - // 校验登录
210   - if (this.$parent.checkLogin()) {
  111 + // 加载中提示
  112 + Indicator.open("加载中...");
211 113  
212   - // 加载中提示
213   - Indicator.open("加载中...");
214   -
215   - // 获取证书请求接口
216   - this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
217   - uid: this.getStore("uid")
218   - }, this.fansShopMessageListCallback, {
219   - method: "POST"
220   - });
221   - }
  114 + // 获取证书请求接口
  115 + this.http("/Api/" + this.getApiVersion().good + "/goodQuality", {
  116 + id: this.getStore('uid') || 0
  117 + }, this.goodQualityCallback, {
  118 + method: "POST"
  119 + });
222 120 },
223 121  
224 122 /**
225   - * 优选页面接口回调
  123 + * 品质优选回调
226 124 * @param {Object} res [服务器返回数据]
227 125 * @param {Object} ext [扩展参数]
228 126 */
229   - fansShopMessageListCallback(res, ext) {
  127 + goodQualityCallback(res, ext) {
230 128  
231 129 // 加载完成
232 130 Indicator.close();
... ... @@ -237,20 +135,20 @@
237 135 // 解构数据
238 136 let { data: datas } = res;
239 137  
240   - /* 获取优选库“优选”数据 开始 */
  138 + /* 获取品质优选数据 开始 */
241 139  
242   -
  140 + this.$set(this, 'datas', datas.list);
243 141  
244   - /* 获取优选库“优选”数据 结束 */
  142 + /* 获取品质优选数据 结束 */
245 143  
246 144 } else if (res.code == 400) {
247 145  
248   - // 获取优选失败
  146 + // 获取初始数据失败
249 147 Toast(res.message);
250 148 } else {
251 149  
252   - // 获取优选失败
253   - Toast("获取优选失败");
  150 + // 获取初始数据失败
  151 + Toast("获取数据失败");
254 152 }
255 153 },
256 154  
... ... @@ -265,13 +163,9 @@
265 163  
266 164 // 判断通用跳转函数是否存在
267 165 if (typeof this.$parent.gotoDetail === 'function') {
268   -
269   -
270   - console.log('toDetail', item);
271   -
272   -
  166 +
273 167 // 通用跳转
274   - this.$parent.gotoDetail(item);
  168 + this.$parent.gotoDetail(item.location);
275 169 }
276 170 } else {
277 171  
... ... @@ -285,6 +179,7 @@
285 179 success: this.$refs.callApp.callApp
286 180 }
287 181  
  182 + // 唤起App
288 183 this.$parent.callAppModal(options);
289 184 }
290 185 });
... ... @@ -292,14 +187,6 @@
292 187 },
293 188  
294 189 /**
295   - * 列表附件按钮事件
296   - * @param {Object} item [数据对象]
297   - */
298   - primary(item) {
299   - this.toDetail(item);
300   - },
301   -
302   - /**
303 190 * 分享
304 191 */
305 192 toShare() {
... ...