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 | 55 | overflow: hidden; |
| 56 | 56 | } |
| 57 | 57 | } |
| 58 | + .extend-box { | |
| 59 | + & + .more-box { | |
| 60 | + margin-left: 20px; | |
| 61 | + } | |
| 62 | + } | |
| 58 | 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 | 69 | font-weight: 400; |
| 63 | 70 | .more-text { |
| 64 | 71 | max-width: 90px; |
| ... | ... | @@ -66,9 +73,11 @@ |
| 66 | 73 | text-overflow: ellipsis; |
| 67 | 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 | 84 | \ No newline at end of file | ... | ... |
src/components/textBgTitleCom/textBgTitleCom.vue
src/pages/optimization2/optimization2.vue
| ... | ... | @@ -7,7 +7,7 @@ |
| 7 | 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 | 11 | :backs="backs"> |
| 12 | 12 | </back-box> |
| 13 | 13 | |
| ... | ... | @@ -21,9 +21,10 @@ |
| 21 | 21 | <div class="section shop-list"> |
| 22 | 22 | |
| 23 | 23 | <!-- 标题 --> |
| 24 | - <text-bg-title-com | |
| 24 | + <text-bg-title-com @more="toDiscountList" | |
| 25 | 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 | 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 | 65 | <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toOptimizationList(items)"> |
| 65 | 66 | |
| ... | ... | @@ -81,7 +82,7 @@ |
| 81 | 82 | </div> |
| 82 | 83 | |
| 83 | 84 | <!-- 热销排行 --> |
| 84 | - <div class="section hot-box"> | |
| 85 | + <div class="section hot-box" ref="hotBox"> | |
| 85 | 86 | |
| 86 | 87 | <!-- 3D轮播 --> |
| 87 | 88 | <swiper-3d-com @onMainSlideClick="toHotSaleList" |
| ... | ... | @@ -91,7 +92,7 @@ |
| 91 | 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 | 98 | <text-bg-title-com |
| ... | ... | @@ -117,7 +118,7 @@ |
| 117 | 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 | 124 | <text-title-box @more='changeGoods' |
| ... | ... | @@ -260,36 +261,24 @@ |
| 260 | 261 | // 临时,设置锚点定位数据 |
| 261 | 262 | this.$set(this, 'navs', [ |
| 262 | 263 | { |
| 263 | - id: "295", | |
| 264 | - shop_type: "", | |
| 264 | + ref: 'optimizationBox', | |
| 265 | 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 | 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 | 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 | 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 | 545 | |
| 557 | 546 | // 设置跳转参数 |
| 558 | 547 | let params = { |
| 559 | - | |
| 548 | + url: 'discountList', | |
| 549 | + query: {} | |
| 560 | 550 | }; |
| 561 | 551 | |
| 562 | 552 | // 页面跳转 |
| ... | ... | @@ -570,6 +560,24 @@ |
| 570 | 560 | */ |
| 571 | 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 | 591 | |
| 584 | 592 | // 设置跳转参数 |
| 585 | 593 | let params = { |
| 586 | - | |
| 594 | + url: 'optimizationList', | |
| 595 | + query: {} | |
| 587 | 596 | }; |
| 588 | 597 | |
| 589 | 598 | // 页面跳转 |
| ... | ... | @@ -597,16 +606,13 @@ |
| 597 | 606 | */ |
| 598 | 607 | toHotSaleList(item) { |
| 599 | 608 | |
| 600 | - | |
| 601 | - console.log('toHotSaleList', item); | |
| 602 | - | |
| 603 | - | |
| 604 | 609 | // 跳转封装 |
| 605 | 610 | if (typeof this.$parent.navBarJump === 'function') { |
| 606 | 611 | |
| 607 | 612 | // 设置跳转参数 |
| 608 | 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 | 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 | 366 | \ No newline at end of file | ... | ... |
src/router/index.js
| ... | ... | @@ -213,16 +213,29 @@ const router = new Router({ |
| 213 | 213 | } |
| 214 | 214 | }, |
| 215 | 215 | { |
| 216 | +<<<<<<< HEAD | |
| 216 | 217 | // 新版积分商城 |
| 217 | 218 | path: "/pointsMall", |
| 218 | 219 | name: "pointsMall", |
| 219 | 220 | component: resolve => { |
| 220 | 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 | 230 | meta: { |
| 223 | 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