Commit 9b5736bcf1ef1bcc02253393596a1d826fb3d379
1 parent
fbb3022e
去除打开app操作
Showing
4 changed files
with
80 additions
and
81 deletions
src/pages/partyBuildingGoodDetails/partyBuildingGoodDetails.less
| 1 | 1 | .good-details-box{ |
| 2 | 2 | padding-bottom: 130px; |
| 3 | + .nav{ | |
| 4 | + position: fixed; | |
| 5 | + top: 0; | |
| 6 | + z-index: 100; | |
| 7 | + width: 100%; | |
| 8 | + .nav-bar { | |
| 9 | + position: unset; | |
| 10 | + background-color: #FFFFFF; | |
| 11 | + border-bottom: 1px solid #E6E6E6; | |
| 12 | + padding:20px 0; | |
| 13 | + } | |
| 14 | + } | |
| 3 | 15 | .pl { |
| 4 | 16 | background-color: transparent; |
| 5 | 17 | width: 100%; |
| 6 | - &.is-open-app { | |
| 7 | - height: 122px; | |
| 8 | - } | |
| 9 | - &.is-cnlive { | |
| 10 | - height: 93px; | |
| 11 | - } | |
| 18 | + height: 88px; | |
| 19 | + // &.is-open-app { | |
| 20 | + // height: 122px; | |
| 21 | + // } | |
| 22 | + // &.is-cnlive { | |
| 23 | + // height: 93px; | |
| 24 | + // } | |
| 12 | 25 | } |
| 13 | 26 | .hide{ |
| 14 | 27 | display:none; | ... | ... |
src/pages/partyBuildingGoodDetails/partyBuildingGoodDetails.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="good-details-box"> |
| 3 | 3 | <!-- H5唤起App组件 --> |
| 4 | - <call-app-box class="call-app-box" | |
| 5 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 6 | - ref="callApp" | |
| 7 | - v-if="!isCNLive.value" | |
| 8 | - :callApps="$parent.callApps"> | |
| 9 | - </call-app-box> | |
| 10 | - <back-box v-if="isCNLive.value" | |
| 11 | - :class="{'hide': $route.query.hideBack == true}" | |
| 12 | - class="back-box" | |
| 13 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 14 | - @back="back" | |
| 15 | - :backs="backs"> | |
| 16 | - </back-box> | |
| 17 | - <!-- pl --> | |
| 18 | - <div class="pl" | |
| 19 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 20 | - :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div> | |
| 4 | + <!-- 导航栏 --> | |
| 5 | + <div class="nav"> | |
| 6 | + | |
| 7 | + <!-- navBar --> | |
| 8 | + <nav-bar @back="back" | |
| 9 | + :navs="navs"> | |
| 10 | + </nav-bar> | |
| 11 | + </div> | |
| 12 | + | |
| 13 | + <div class="pl"></div> | |
| 21 | 14 | <!--轮播--> |
| 22 | 15 | <!-- <swiper |
| 23 | 16 | :style=" |
| ... | ... | @@ -197,9 +190,8 @@ |
| 197 | 190 | |
| 198 | 191 | <script> |
| 199 | 192 | import { Swipe, SwipeItem } from 'vant'; |
| 200 | -import callAppBox from "@/components/callAppBox/callAppBox"; | |
| 201 | 193 | import swiper from "@/components/swiper/swiper"; |
| 202 | -import backBox from "@/components/backBox/backBox"; | |
| 194 | +import navBar from '@/components/navBar/navBar'; | |
| 203 | 195 | import columnListBox from "@/components/columnListBox/columnListBox"; |
| 204 | 196 | import addressModal from '@/components/addressModal/addressModal'; |
| 205 | 197 | import { Toast, Indicator } from "mint-ui"; |
| ... | ... | @@ -210,7 +202,7 @@ export default { |
| 210 | 202 | title: "", // 标题 |
| 211 | 203 | banner: null, |
| 212 | 204 | goodsInfo: null, |
| 213 | - backs: null, // 后退按钮组 | |
| 205 | + navs: null, // 后退按钮组 | |
| 214 | 206 | isExchange: false, // 是否已经兑换 |
| 215 | 207 | currentAddress: null, // 当前选择的地址 |
| 216 | 208 | addressModalOptions: null // 填写地址浮层选项 |
| ... | ... | @@ -218,9 +210,8 @@ export default { |
| 218 | 210 | }, |
| 219 | 211 | //部件 |
| 220 | 212 | components: { |
| 221 | - callAppBox, | |
| 222 | 213 | swiper, |
| 223 | - backBox, | |
| 214 | + navBar, | |
| 224 | 215 | columnListBox, |
| 225 | 216 | addressModal |
| 226 | 217 | }, |
| ... | ... | @@ -529,7 +520,7 @@ export default { |
| 529 | 520 | // 同步当前选中的地址信息 |
| 530 | 521 | window.localStorage.setItem('currentAddress', JSON.stringify(datas)); |
| 531 | 522 | } |
| 532 | - } | |
| 523 | + } | |
| 533 | 524 | } |
| 534 | 525 | |
| 535 | 526 | // 设置地址浮层参数 |
| ... | ... | @@ -573,7 +564,7 @@ export default { |
| 573 | 564 | this.$set(this.addressModalOptions, 'cancelButtonCallback', this.$refs.addressModal.hideLayer); |
| 574 | 565 | } |
| 575 | 566 | console.log(this.addressModalOptions); |
| 576 | - // 显示填写地址浮层 | |
| 567 | + // 显示填写地址浮层 | |
| 577 | 568 | this.$refs.addressModal.showLayer(); |
| 578 | 569 | } |
| 579 | 570 | }); |
| ... | ... | @@ -599,6 +590,12 @@ export default { |
| 599 | 590 | created () { |
| 600 | 591 | // 设置标题 |
| 601 | 592 | this.$set(this, "title", "积分值商品详情页"); |
| 593 | + this.$set(this, "navs", { | |
| 594 | + back: { | |
| 595 | + img: "static/img/icon_back.png" | |
| 596 | + }, | |
| 597 | + title: this.title | |
| 598 | + }); | |
| 602 | 599 | // 获取商品ID |
| 603 | 600 | let goodsId = this.$route.query.goodsId; |
| 604 | 601 | if (goodsId && this.$parent.checkLogin()) { | ... | ... |
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.less
| ... | ... | @@ -15,16 +15,29 @@ |
| 15 | 15 | .column-list-box{ |
| 16 | 16 | margin-top:40px; |
| 17 | 17 | } |
| 18 | + .nav{ | |
| 19 | + position: fixed; | |
| 20 | + top: 0; | |
| 21 | + z-index: 100; | |
| 22 | + width: 100%; | |
| 23 | + .nav-bar { | |
| 24 | + position: unset; | |
| 25 | + background-color: #FFFFFF; | |
| 26 | + border-bottom: 1px solid #E6E6E6; | |
| 27 | + padding:20px 0; | |
| 28 | + } | |
| 29 | + } | |
| 18 | 30 | // 占位 |
| 19 | 31 | .pl { |
| 20 | 32 | background-color: transparent; |
| 21 | 33 | width: 100%; |
| 22 | - &.is-open-app { | |
| 23 | - height: 122px; | |
| 24 | - } | |
| 25 | - &.is-cnlive { | |
| 26 | - height: 93px; | |
| 27 | - } | |
| 34 | + height: 88px; | |
| 35 | + // &.is-open-app { | |
| 36 | + // height: 122px; | |
| 37 | + // } | |
| 38 | + // &.is-cnlive { | |
| 39 | + // height: 93px; | |
| 40 | + // } | |
| 28 | 41 | } |
| 29 | 42 | // 头部 |
| 30 | 43 | .top_main{ | ... | ... |
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="gift_zone_detail"> |
| 3 | - <call-app-box class="call-app-box" | |
| 4 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 5 | - ref="callApp" | |
| 6 | - v-if="!isCNLive.value" | |
| 7 | - :callApps="$parent.callApps"> | |
| 8 | - </call-app-box> | |
| 9 | - <back-box v-if="isCNLive.value" | |
| 10 | - :class="{'hide': $route.query.hideBack == true}" | |
| 11 | - class="back-box" | |
| 12 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 13 | - @back="back" | |
| 14 | - :backs="backs"> | |
| 15 | - </back-box> | |
| 16 | - <!-- pl --> | |
| 17 | - <div class="pl" | |
| 18 | - :style="'padding-top: ' + $parent.top.value + 'px'" | |
| 19 | - :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div> | |
| 3 | + | |
| 4 | + <!-- 导航栏 --> | |
| 5 | + <div class="nav"> | |
| 6 | + | |
| 7 | + <!-- navBar --> | |
| 8 | + <nav-bar @back="back" | |
| 9 | + :navs="navs"> | |
| 10 | + </nav-bar> | |
| 11 | + </div> | |
| 12 | + | |
| 13 | + <div class="pl"></div> | |
| 20 | 14 | <!-- 商品样式 7 列表 --> |
| 21 | 15 | <div class="top_main"> |
| 22 | 16 | <!-- 头部 --> |
| ... | ... | @@ -74,8 +68,7 @@ |
| 74 | 68 | </template> |
| 75 | 69 | |
| 76 | 70 | <script> |
| 77 | -import callAppBox from "@/components/callAppBox/callAppBox"; | |
| 78 | -import backBox from "@/components/backBox/backBox"; | |
| 71 | +import navBar from '@/components/navBar/navBar'; | |
| 79 | 72 | import { Toast, Indicator } from "mint-ui"; |
| 80 | 73 | import columnListBox from "@/components/columnListBox/columnListBox"; |
| 81 | 74 | export default { |
| ... | ... | @@ -84,7 +77,7 @@ export default { |
| 84 | 77 | return { |
| 85 | 78 | myGrade: 0, // 我的积分 |
| 86 | 79 | title: "积分商城", // 标题 |
| 87 | - backs: null, // 后退按钮组 | |
| 80 | + navs: null, // 后退按钮组 | |
| 88 | 81 | loading: true, |
| 89 | 82 | distance: 50, |
| 90 | 83 | phyicalGoods: { list: [] }, // 实物商品 |
| ... | ... | @@ -94,9 +87,8 @@ export default { |
| 94 | 87 | }, |
| 95 | 88 | //部件 |
| 96 | 89 | components: { |
| 97 | - backBox, | |
| 98 | - columnListBox, | |
| 99 | - callAppBox | |
| 90 | + navBar, | |
| 91 | + columnListBox | |
| 100 | 92 | }, |
| 101 | 93 | //静态 |
| 102 | 94 | props: [ |
| ... | ... | @@ -331,28 +323,12 @@ export default { |
| 331 | 323 | created () { |
| 332 | 324 | // 加载商品列表 |
| 333 | 325 | this.getIntegralNewGoodsList(this.page); |
| 334 | - | |
| 335 | - // 判断是否在App内 | |
| 336 | - if (this.isCNLive.value) { | |
| 337 | - | |
| 338 | - // 添加后退按钮组“后退”和“分享”按钮 | |
| 339 | - this.$set(this, 'backs', { | |
| 340 | - funcs: { | |
| 341 | - back: { | |
| 342 | - icon: "static/img/icon_back.png" | |
| 343 | - } | |
| 344 | - // funcArray: [ | |
| 345 | - // { | |
| 346 | - // icon: "static/img/icon_share.png", | |
| 347 | - // func: this.toShare | |
| 348 | - // } | |
| 349 | - // ] | |
| 350 | - } | |
| 351 | - }); | |
| 352 | - | |
| 353 | - /*设置标题 */ | |
| 354 | - this.$set(this.backs, 'title', "积分商城"); | |
| 355 | - } | |
| 326 | + this.$set(this, "navs", { | |
| 327 | + back: { | |
| 328 | + img: "static/img/icon_back.png" | |
| 329 | + }, | |
| 330 | + title: this.title | |
| 331 | + }); | |
| 356 | 332 | if (this.$parent.checkLogin()) { |
| 357 | 333 | // 获取积分商城商品信息接口 |
| 358 | 334 | this.integralMallIndex(); | ... | ... |