Commit 8620c2a7b4c6cc837e7e6be8e1d1b8542df6e2d7
test
Showing
21 changed files
with
619 additions
and
40 deletions
src/components/goodsItem_9/goodsItem_9.less
0 → 100644
| 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
| 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/components/textBgTitleCom/textBgTitleCom.less
| @@ -55,10 +55,17 @@ | @@ -55,10 +55,17 @@ | ||
| 55 | overflow: hidden; | 55 | overflow: hidden; |
| 56 | } | 56 | } |
| 57 | } | 57 | } |
| 58 | + .extend-box { | ||
| 59 | + & + .more-box { | ||
| 60 | + margin-left: 20px; | ||
| 61 | + } | ||
| 62 | + } | ||
| 58 | .more-box { | 63 | .more-box { |
| 59 | - display: contents; | ||
| 60 | - color: #999999; | ||
| 61 | - font-size: 26px; | 64 | + display: flex; |
| 65 | + justify-content: flex-end; | ||
| 66 | + align-items: center; | ||
| 67 | + color: #3C3C3C; | ||
| 68 | + font-size: 24px; | ||
| 62 | font-weight: 400; | 69 | font-weight: 400; |
| 63 | .more-text { | 70 | .more-text { |
| 64 | max-width: 90px; | 71 | max-width: 90px; |
| @@ -66,9 +73,11 @@ | @@ -66,9 +73,11 @@ | ||
| 66 | text-overflow: ellipsis; | 73 | text-overflow: ellipsis; |
| 67 | overflow: hidden; | 74 | overflow: hidden; |
| 68 | } | 75 | } |
| 69 | - } | ||
| 70 | - .extend-box { | ||
| 71 | - | 76 | + .more-img { |
| 77 | + display: block; | ||
| 78 | + width: 24px; | ||
| 79 | + height: 24px; | ||
| 80 | + } | ||
| 72 | } | 81 | } |
| 73 | } | 82 | } |
| 74 | } | 83 | } |
| 75 | \ No newline at end of file | 84 | \ No newline at end of file |
src/components/textBgTitleCom/textBgTitleCom.vue
| @@ -28,6 +28,7 @@ | @@ -28,6 +28,7 @@ | ||
| 28 | <!-- 更多 --> | 28 | <!-- 更多 --> |
| 29 | <div class="more-box" v-if="titles.more" @click="more(titles.more)"> | 29 | <div class="more-box" v-if="titles.more" @click="more(titles.more)"> |
| 30 | <div class="more-text">更多</div> | 30 | <div class="more-text">更多</div> |
| 31 | + <img src="static/img/icon_more_arrow_right_3c.png" class="more-img" /> | ||
| 31 | </div> | 32 | </div> |
| 32 | </div> | 33 | </div> |
| 33 | </div> | 34 | </div> |
src/pages/optimization2/optimization2.vue
| @@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
| 7 | </call-app-box> | 7 | </call-app-box> |
| 8 | 8 | ||
| 9 | <!-- 后退导航 --> | 9 | <!-- 后退导航 --> |
| 10 | - <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value && $route.query.showBack == true" @back="back" | 10 | + <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref="backBox" v-if="isCNLive.value && $route.query.showBack == true" @back="back" |
| 11 | :backs="backs"> | 11 | :backs="backs"> |
| 12 | </back-box> | 12 | </back-box> |
| 13 | 13 | ||
| @@ -21,9 +21,10 @@ | @@ -21,9 +21,10 @@ | ||
| 21 | <div class="section shop-list"> | 21 | <div class="section shop-list"> |
| 22 | 22 | ||
| 23 | <!-- 标题 --> | 23 | <!-- 标题 --> |
| 24 | - <text-bg-title-com | 24 | + <text-bg-title-com @more="toDiscountList" |
| 25 | :titles="{ | 25 | :titles="{ |
| 26 | - bg: 'static/img/text_bg_title_bg.jpg' | 26 | + bg: 'static/img/text_bg_title_bg.jpg', |
| 27 | + more: true | ||
| 27 | }"> | 28 | }"> |
| 28 | 29 | ||
| 29 | <!-- 倒计时组件 --> | 30 | <!-- 倒计时组件 --> |
| @@ -59,7 +60,7 @@ | @@ -59,7 +60,7 @@ | ||
| 59 | </div> | 60 | </div> |
| 60 | 61 | ||
| 61 | <!-- 品质优选 --> | 62 | <!-- 品质优选 --> |
| 62 | - <div class="shop-list-box" v-if="shopLists && shopLists.length"> | 63 | + <div class="shop-list-box" ref="optimizationBox" v-if="shopLists && shopLists.length"> |
| 63 | 64 | ||
| 64 | <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toOptimizationList(items)"> | 65 | <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toOptimizationList(items)"> |
| 65 | 66 | ||
| @@ -81,7 +82,7 @@ | @@ -81,7 +82,7 @@ | ||
| 81 | </div> | 82 | </div> |
| 82 | 83 | ||
| 83 | <!-- 热销排行 --> | 84 | <!-- 热销排行 --> |
| 84 | - <div class="section hot-box"> | 85 | + <div class="section hot-box" ref="hotBox"> |
| 85 | 86 | ||
| 86 | <!-- 3D轮播 --> | 87 | <!-- 3D轮播 --> |
| 87 | <swiper-3d-com @onMainSlideClick="toHotSaleList" | 88 | <swiper-3d-com @onMainSlideClick="toHotSaleList" |
| @@ -91,7 +92,7 @@ | @@ -91,7 +92,7 @@ | ||
| 91 | </div> | 92 | </div> |
| 92 | 93 | ||
| 93 | <!-- 积分商城 --> | 94 | <!-- 积分商城 --> |
| 94 | - <div class="section shop-list"> | 95 | + <div class="section shop-list" ref="integralMallBox"> |
| 95 | 96 | ||
| 96 | <!-- 标题 --> | 97 | <!-- 标题 --> |
| 97 | <text-bg-title-com | 98 | <text-bg-title-com |
| @@ -117,7 +118,7 @@ | @@ -117,7 +118,7 @@ | ||
| 117 | </div> | 118 | </div> |
| 118 | 119 | ||
| 119 | <!-- 猜你喜欢 --> | 120 | <!-- 猜你喜欢 --> |
| 120 | - <div class="section goods-list"> | 121 | + <div class="section goods-list" ref="guessLikeBox"> |
| 121 | 122 | ||
| 122 | <!-- 标题 --> | 123 | <!-- 标题 --> |
| 123 | <text-title-box @more='changeGoods' | 124 | <text-title-box @more='changeGoods' |
| @@ -260,36 +261,24 @@ | @@ -260,36 +261,24 @@ | ||
| 260 | // 临时，设置锚点定位数据 | 261 | // 临时，设置锚点定位数据 |
| 261 | this.$set(this, 'navs', [ | 262 | this.$set(this, 'navs', [ |
| 262 | { | 263 | { |
| 263 | - id: "295", | ||
| 264 | - shop_type: "", | 264 | + ref: 'optimizationBox', |
| 265 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", | 265 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", |
| 266 | - title: "品质优选", | ||
| 267 | - to: "0", | ||
| 268 | - type: "0" | 266 | + title: "品质优选" |
| 269 | }, | 267 | }, |
| 270 | { | 268 | { |
| 271 | - id: "295", | ||
| 272 | - shop_type: "", | 269 | + ref: 'hotBox', |
| 273 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", | 270 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", |
| 274 | - title: "热销排行", | ||
| 275 | - to: "0", | ||
| 276 | - type: "0" | 271 | + title: "热销排行" |
| 277 | }, | 272 | }, |
| 278 | { | 273 | { |
| 279 | - id: "295", | ||
| 280 | - shop_type: "", | 274 | + ref: 'integralMallBox', |
| 281 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", | 275 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", |
| 282 | - title: "积分商城", | ||
| 283 | - to: "0", | ||
| 284 | - type: "0" | 276 | + title: "积分商城" |
| 285 | }, | 277 | }, |
| 286 | { | 278 | { |
| 287 | - id: "295", | ||
| 288 | - shop_type: "", | 279 | + ref: 'guessLikeBox', |
| 289 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", | 280 | simg: "https://wjjtest.ys2.cnliveimg.com/802shop/img/2020/04/23/5ea15e31d986d.jpg", |
| 290 | - title: "猜你喜欢", | ||
| 291 | - to: "0", | ||
| 292 | - type: "0" | 281 | + title: "猜你喜欢" |
| 293 | } | 282 | } |
| 294 | ]); | 283 | ]); |
| 295 | 284 | ||
| @@ -556,7 +545,8 @@ | @@ -556,7 +545,8 @@ | ||
| 556 | 545 | ||
| 557 | // 设置跳转参数 | 546 | // 设置跳转参数 |
| 558 | let params = { | 547 | let params = { |
| 559 | - | 548 | + url: 'discountList', |
| 549 | + query: {} | ||
| 560 | }; | 550 | }; |
| 561 | 551 | ||
| 562 | // 页面跳转 | 552 | // 页面跳转 |
| @@ -570,6 +560,24 @@ | @@ -570,6 +560,24 @@ | ||
| 570 | */ | 560 | */ |
| 571 | anchor(item) { | 561 | anchor(item) { |
| 572 | 562 | ||
| 563 | + // 判断锚点是否存在 | ||
| 564 | + if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') { | ||
| 565 | + | ||
| 566 | + // 根据头部设置锚点位置 | ||
| 567 | + let safeDistance = 0; | ||
| 568 | + | ||
| 569 | + // 判断是否有callApp组件 | ||
| 570 | + if (typeof this.$refs.callApp === 'object') { | ||
| 571 | + safeDistance += this.$refs.callApp.$el.clientHeight; | ||
| 572 | + } | ||
| 573 | + | ||
| 574 | + // 判断是否有backBox组件 | ||
| 575 | + if (typeof this.$refs.backBox === 'object') { | ||
| 576 | + safeDistance += this.$refs.backBox.$el.clientHeight; | ||
| 577 | + } | ||
| 578 | + | ||
| 579 | + document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750)); | ||
| 580 | + } | ||
| 573 | }, | 581 | }, |
| 574 | 582 | ||
| 575 | /** | 583 | /** |
| @@ -583,7 +591,8 @@ | @@ -583,7 +591,8 @@ | ||
| 583 | 591 | ||
| 584 | // 设置跳转参数 | 592 | // 设置跳转参数 |
| 585 | let params = { | 593 | let params = { |
| 586 | - | 594 | + url: 'optimizationList', |
| 595 | + query: {} | ||
| 587 | }; | 596 | }; |
| 588 | 597 | ||
| 589 | // 页面跳转 | 598 | // 页面跳转 |
| @@ -597,16 +606,13 @@ | @@ -597,16 +606,13 @@ | ||
| 597 | */ | 606 | */ |
| 598 | toHotSaleList(item) { | 607 | toHotSaleList(item) { |
| 599 | 608 | ||
| 600 | - | ||
| 601 | - console.log('toHotSaleList', item); | ||
| 602 | - | ||
| 603 | - | ||
| 604 | // 跳转封装 | 609 | // 跳转封装 |
| 605 | if (typeof this.$parent.navBarJump === 'function') { | 610 | if (typeof this.$parent.navBarJump === 'function') { |
| 606 | 611 | ||
| 607 | // 设置跳转参数 | 612 | // 设置跳转参数 |
| 608 | let params = { | 613 | let params = { |
| 609 | - | 614 | + url: 'hotSaleList', |
| 615 | + query: {} | ||
| 610 | }; | 616 | }; |
| 611 | 617 | ||
| 612 | // 页面跳转 | 618 | // 页面跳转 |
src/pages/optimizationList/optimizationList.less
0 → 100644
| 1 | +@charset "UTF-8"; | ||
| 2 | + | ||
| 3 | +.optimization-list-page { | ||
| 4 | + background-color: #FFFFFF; | ||
| 5 | + min-height: 100vh; | ||
| 6 | + .call-app-box { | ||
| 7 | + position: fixed; | ||
| 8 | + top: 0; | ||
| 9 | + z-index: 100; | ||
| 10 | + } | ||
| 11 | + .back-box { | ||
| 12 | + position: fixed; | ||
| 13 | + top: 0; | ||
| 14 | + z-index: 100; | ||
| 15 | + background-color: #ffffff; | ||
| 16 | + } | ||
| 17 | + .pl { | ||
| 18 | + background-color: transparent; | ||
| 19 | + width: 100%; | ||
| 20 | + &.is-open-app { | ||
| 21 | + height: 122px; | ||
| 22 | + } | ||
| 23 | + &.is-cnlive { | ||
| 24 | + height: 93px; | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + .main-box { | ||
| 28 | + padding: 40px 0; | ||
| 29 | + .section { | ||
| 30 | + background-color: #ffffff; | ||
| 31 | + background-repeat: no-repeat; | ||
| 32 | + background-size: contain; | ||
| 33 | + margin: 0 auto 30px auto; | ||
| 34 | + width: 690px; | ||
| 35 | + height: auto; | ||
| 36 | + border-radius: 24px; | ||
| 37 | + overflow: hidden; | ||
| 38 | + &:last-child { | ||
| 39 | + margin-bottom: 0; | ||
| 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%; | ||
| 47 | + height: auto; | ||
| 48 | + border-radius: 24px; | ||
| 49 | + overflow: hidden; | ||
| 50 | + .video { | ||
| 51 | + width: 100%; | ||
| 52 | + height: auto; | ||
| 53 | + } | ||
| 54 | + } | ||
| 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 | + } | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | + } | ||
| 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 | + } | ||
| 84 | + } | ||
| 85 | +} | ||
| 0 | \ No newline at end of file | 86 | \ No newline at end of file |
src/pages/optimizationList/optimizationList.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="optimization-list-page"> | ||
| 3 | + | ||
| 4 | + <!-- H5唤起App组件 --> | ||
| 5 | + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value" | ||
| 6 | + :callApps="$parent.callApps"> | ||
| 7 | + </call-app-box> | ||
| 8 | + | ||
| 9 | + <!-- 后退导航 --> | ||
| 10 | + <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value" @back="back" | ||
| 11 | + :backs="backs"> | ||
| 12 | + </back-box> | ||
| 13 | + | ||
| 14 | + <!-- pl --> | ||
| 15 | + <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div> | ||
| 16 | + | ||
| 17 | + <!-- 主区域 --> | ||
| 18 | + <div class="main-box"> | ||
| 19 | + | ||
| 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> | ||
| 85 | + </div> | ||
| 86 | + | ||
| 87 | + <!-- 回到顶部按钮 --> | ||
| 88 | + <goto-top | ||
| 89 | + :top="parseInt(150)"> | ||
| 90 | + </goto-top> | ||
| 91 | + </div> | ||
| 92 | +</template> | ||
| 93 | + | ||
| 94 | +<script> | ||
| 95 | + | ||
| 96 | + // 引入组件 | ||
| 97 | + import { Toast, Indicator } from "mint-ui"; | ||
| 98 | + import callAppBox from "@/components/callAppBox/callAppBox"; | ||
| 99 | + import backBox from "@/components/backBox/backBox"; | ||
| 100 | + import gotoTop from "@/components/gotoTop/gotoTop"; | ||
| 101 | + | ||
| 102 | + export default { | ||
| 103 | + name: 'optimizationListPage', | ||
| 104 | + data () { | ||
| 105 | + return { | ||
| 106 | + title: "", // 标题 | ||
| 107 | + backs: null, // 后退按钮组 | ||
| 108 | + redBox: null, // 红色区块 | ||
| 109 | + blueBox: null, // 蓝色区块 | ||
| 110 | + greenBox: null, // 绿色区块 | ||
| 111 | + | ||
| 112 | + | ||
| 113 | + | ||
| 114 | + | ||
| 115 | + } | ||
| 116 | + }, | ||
| 117 | + components: { | ||
| 118 | + callAppBox, | ||
| 119 | + backBox, | ||
| 120 | + gotoTop | ||
| 121 | + }, | ||
| 122 | + created() { | ||
| 123 | + | ||
| 124 | + // 设置标题 | ||
| 125 | + this.$set(this, "title", "品质优选"); | ||
| 126 | + | ||
| 127 | + // 判断是否在App内 | ||
| 128 | + if (this.isCNLive.value) { | ||
| 129 | + | ||
| 130 | + // 添加后退按钮组“后退”和“分享”按钮 | ||
| 131 | + this.$set(this, 'backs', { | ||
| 132 | + funcs: { | ||
| 133 | + back: { | ||
| 134 | + icon: "static/img/icon_back.png" | ||
| 135 | + }, | ||
| 136 | + funcArray: [ | ||
| 137 | + { | ||
| 138 | + icon: "static/img/icon_share.png", | ||
| 139 | + func: this.toShare | ||
| 140 | + } | ||
| 141 | + ] | ||
| 142 | + } | ||
| 143 | + }); | ||
| 144 | + | ||
| 145 | + // 设置标题 | ||
| 146 | + this.$set(this.backs, 'title', '品质优选'); | ||
| 147 | + } | ||
| 148 | + | ||
| 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 | + | ||
| 201 | + }, | ||
| 202 | + methods: { | ||
| 203 | + | ||
| 204 | + /** | ||
| 205 | + * 优选页面接口 | ||
| 206 | + */ | ||
| 207 | + fansShopMessageList() { | ||
| 208 | + | ||
| 209 | + // 校验登录 | ||
| 210 | + if (this.$parent.checkLogin()) { | ||
| 211 | + | ||
| 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 | + } | ||
| 222 | + }, | ||
| 223 | + | ||
| 224 | + /** | ||
| 225 | + * 优选页面接口回调 | ||
| 226 | + * @param {Object} res [服务器返回数据] | ||
| 227 | + * @param {Object} ext [扩展参数] | ||
| 228 | + */ | ||
| 229 | + fansShopMessageListCallback(res, ext) { | ||
| 230 | + | ||
| 231 | + // 加载完成 | ||
| 232 | + Indicator.close(); | ||
| 233 | + | ||
| 234 | + // 返回处理 | ||
| 235 | + if (res.code == 200) { | ||
| 236 | + | ||
| 237 | + // 解构数据 | ||
| 238 | + let { data: datas } = res; | ||
| 239 | + | ||
| 240 | + /* 获取优选库“优选”数据 开始 */ | ||
| 241 | + | ||
| 242 | + | ||
| 243 | + | ||
| 244 | + /* 获取优选库“优选”数据 结束 */ | ||
| 245 | + | ||
| 246 | + } else if (res.code == 400) { | ||
| 247 | + | ||
| 248 | + // 获取优选失败 | ||
| 249 | + Toast(res.message); | ||
| 250 | + } else { | ||
| 251 | + | ||
| 252 | + // 获取优选失败 | ||
| 253 | + Toast("获取优选失败"); | ||
| 254 | + } | ||
| 255 | + }, | ||
| 256 | + | ||
| 257 | + /** | ||
| 258 | + * 跳转商品详情 | ||
| 259 | + * @param {Object} item [数据对象] | ||
| 260 | + */ | ||
| 261 | + toDetail(item) { | ||
| 262 | + | ||
| 263 | + // 判断通用跳转函数是否存在 | ||
| 264 | + if (typeof this.$parent.gotoDetail === 'function') { | ||
| 265 | + | ||
| 266 | + | ||
| 267 | + console.log('toDetail', item); | ||
| 268 | + | ||
| 269 | + | ||
| 270 | + // 通用跳转 | ||
| 271 | + this.$parent.gotoDetail(item); | ||
| 272 | + } | ||
| 273 | + }, | ||
| 274 | + | ||
| 275 | + /** | ||
| 276 | + * 列表附件按钮事件 | ||
| 277 | + * @param {Object} item [数据对象] | ||
| 278 | + */ | ||
| 279 | + primary(item) { | ||
| 280 | + this.toDetail(item); | ||
| 281 | + }, | ||
| 282 | + | ||
| 283 | + | ||
| 284 | + | ||
| 285 | + | ||
| 286 | + | ||
| 287 | + | ||
| 288 | + | ||
| 289 | + /** | ||
| 290 | + * 分享 | ||
| 291 | + */ | ||
| 292 | + toShare() { | ||
| 293 | + | ||
| 294 | + // 判断分享 | ||
| 295 | + if (typeof this.$parent.toShare === 'function') { | ||
| 296 | + this.$parent.toShare(38, this.$route.query.id || 0); | ||
| 297 | + } | ||
| 298 | + }, | ||
| 299 | + | ||
| 300 | + /** | ||
| 301 | + * 后退 | ||
| 302 | + */ | ||
| 303 | + back() { | ||
| 304 | + | ||
| 305 | + // 判断是否有处理函数 | ||
| 306 | + if (typeof this.$parent.back === 'function') { | ||
| 307 | + | ||
| 308 | + // 后退 | ||
| 309 | + this.$parent.back(); | ||
| 310 | + } else { | ||
| 311 | + | ||
| 312 | + // 后退 | ||
| 313 | + window.history.go(-1); | ||
| 314 | + } | ||
| 315 | + } | ||
| 316 | + }, | ||
| 317 | + head: { | ||
| 318 | + title () { | ||
| 319 | + return { | ||
| 320 | + inner: this.title | ||
| 321 | + } | ||
| 322 | + } | ||
| 323 | + }, | ||
| 324 | + watch: { | ||
| 325 | + | ||
| 326 | + // 设置页面标题 | ||
| 327 | + title(newVal) { | ||
| 328 | + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") { | ||
| 329 | + this.$iFrame.insertIFrame(newVal); | ||
| 330 | + } else { | ||
| 331 | + this.$emit("updateHead"); | ||
| 332 | + } | ||
| 333 | + } | ||
| 334 | + }, | ||
| 335 | + mounted() { | ||
| 336 | + | ||
| 337 | + // 如果是App外，设置唤起App和微信内分享参数 | ||
| 338 | + if (!this.isCNLive.value) { | ||
| 339 | + | ||
| 340 | + // 唤起详情页 | ||
| 341 | + if (typeof this.$parent.getOpenApp === "function") { | ||
| 342 | + this.$parent.getOpenApp({ | ||
| 343 | + type: 38, | ||
| 344 | + id: this.$route.query.id || 1, | ||
| 345 | + url: "" | ||
| 346 | + }); | ||
| 347 | + } | ||
| 348 | + | ||
| 349 | + // 分享详情页 | ||
| 350 | + if (typeof this.$parent.getShareData === "function") { | ||
| 351 | + this.$parent.getShareData({ | ||
| 352 | + type: 38, | ||
| 353 | + id: this.$route.query.id || 1, | ||
| 354 | + url: "" | ||
| 355 | + }); | ||
| 356 | + } | ||
| 357 | + } | ||
| 358 | + } | ||
| 359 | + } | ||
| 360 | +</script> | ||
| 361 | + | ||
| 362 | +<!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| 363 | +<style rel="stylesheet/less" lang='less' scoped> | ||
| 364 | + @import "optimizationList"; | ||
| 365 | +</style> | ||
| 0 | \ No newline at end of file | 366 | \ No newline at end of file |
src/router/index.js
| @@ -213,16 +213,29 @@ const router = new Router({ | @@ -213,16 +213,29 @@ const router = new Router({ | ||
| 213 | } | 213 | } |
| 214 | }, | 214 | }, |
| 215 | { | 215 | { |
| 216 | +<<<<<<< HEAD | ||
| 216 | // 新版积分商城 | 217 | // 新版积分商城 |
| 217 | path: "/pointsMall", | 218 | path: "/pointsMall", |
| 218 | name: "pointsMall", | 219 | name: "pointsMall", |
| 219 | component: resolve => { | 220 | component: resolve => { |
| 220 | require(["@/pages/pointsMall/pointsMall"], resolve); | 221 | require(["@/pages/pointsMall/pointsMall"], resolve); |
| 222 | +======= | ||
| 223 | + // 新版优选库“优选品质优选列表”页面 | ||
| 224 | + path: "/optimizationList", | ||
| 225 | + name: "optimizationList", | ||
| 226 | + component: resolve => { | ||
| 227 | + require(["@/pages/optimizationList/optimizationList"], resolve); | ||
| 228 | +>>>>>>> e10075b4c3858b1775d274fd2f1893fc25d266a5 | ||
| 221 | }, | 229 | }, |
| 222 | meta: { | 230 | meta: { |
| 223 | requireAuth: false | 231 | requireAuth: false |
| 224 | } | 232 | } |
| 233 | +<<<<<<< HEAD | ||
| 225 | } | 234 | } |
| 235 | +======= | ||
| 236 | + }, | ||
| 237 | + | ||
| 238 | +>>>>>>> e10075b4c3858b1775d274fd2f1893fc25d266a5 | ||
| 226 | /* 优选和商城页面改版升级页面 结束 */ | 239 | /* 优选和商城页面改版升级页面 结束 */ |
| 227 | ] | 240 | ] |
| 228 | }, | 241 | }, |
static/img/icon_more_arrow_right_3c.png
0 → 100644
187 Bytes
static/img/o_01_01.png
0 → 100644
121 KB
static/img/o_01_02.png
0 → 100644
124 KB
static/img/o_01_video.png
0 → 100644
165 KB
static/img/o_02_01.png
0 → 100644
89 KB
static/img/o_02_02.png
0 → 100644
88.8 KB
static/img/o_02_video.png
0 → 100644
33.6 KB
static/img/o_03_01.png
0 → 100644
129 KB
static/img/o_03_02.png
0 → 100644
129 KB
static/img/o_bg_01.png
0 → 100644
538 KB
static/img/o_bg_02.png
0 → 100644
493 KB
static/img/o_bg_03.png
0 → 100644
598 KB
static/img/play_dark.png
0 → 100644
3.76 KB