w-front-end / select_good · Commits

Commit fe59ce5a354b3865c1940daa5c2dc4ee2b55d917

Authored by 王强
1 parent 74a17e5f

1、优选库——优选，添加”品质优选“页面框架 

2、优选库——优选，首页增驾锚点定位功能
3、优选库——优选，首页增驾跳转列表页事件实现，绑定到具体页面
Inline Side-by-side
Showing 7 changed files with 516 additions and 40 deletions
src/components/textBgTitleCom/textBgTitleCom.less
  View file @fe59ce5
... ... @@ -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
  View file @fe59ce5
... ... @@ -28,6 +28,7 @@
28 28 <!-- 更多 -->
29 29 <div class="more-box" v-if="titles.more" @click="more(titles.more)">
30 30 <div class="more-text">更多</div>
  31 + <img src="static/img/icon_more_arrow_right_3c.png" class="more-img" />
31 32 </div>
32 33 </div>
33 34 </div>
... ...
src/pages/optimization2/optimization2.vue
  View file @fe59ce5
... ... @@ -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
  View file @fe59ce5
  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 + .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 + }
  50 + .section {
  51 + background-color: #ffffff;
  52 + margin: 40px auto;
  53 + width: 690px;
  54 + height: auto;
  55 + border-radius: 24px;
  56 + overflow: hidden;
  57 + &:last-child {
  58 + margin-bottom: 0;
  59 + }
  60 + &.goods-list {
  61 + /deep/ .goods-item-8-box {
  62 + .main-box {
  63 + border-bottom: 1px solid #EAEAEA;
  64 + }
  65 + }
  66 + /deep/ .goods-item-8-box:last-child {
  67 + .main-box {
  68 + border-bottom: none;
  69 + }
  70 + }
  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 + }
  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 + }
  118 + }
  119 + }
  120 + }
  121 +}
0 122 \ No newline at end of file
... ...
src/pages/optimizationList/optimizationList.vue 0 → 100644
  View file @fe59ce5
  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 +
  22 +
  23 +
  24 +
  25 + </div>
  26 +
  27 + <!-- 回到顶部按钮 -->
  28 + <goto-top
  29 + :top="parseInt(150)">
  30 + </goto-top>
  31 + </div>
  32 +</template>
  33 +
  34 +<script>
  35 +
  36 + // 引入组件
  37 + import { Toast, Indicator } from "mint-ui";
  38 + import callAppBox from "@/components/callAppBox/callAppBox";
  39 + import backBox from "@/components/backBox/backBox";
  40 +
  41 +
  42 +
  43 +
  44 +
  45 +
  46 + import gotoTop from "@/components/gotoTop/gotoTop";
  47 +
  48 + export default {
  49 + name: 'optimizationListPage',
  50 + data () {
  51 + return {
  52 + title: "", // 标题
  53 + backs: null, // 后退按钮组
  54 +
  55 +
  56 +
  57 +
  58 + }
  59 + },
  60 + components: {
  61 + callAppBox,
  62 + backBox,
  63 +
  64 +
  65 +
  66 +
  67 + gotoTop
  68 + },
  69 + created() {
  70 +
  71 + // 设置标题
  72 + this.$set(this, "title", "品质优选");
  73 +
  74 + // 判断是否在App内
  75 + if (this.isCNLive.value) {
  76 +
  77 + // 添加后退按钮组“后退”和“分享”按钮
  78 + this.$set(this, 'backs', {
  79 + funcs: {
  80 + back: {
  81 + icon: "static/img/icon_back.png"
  82 + },
  83 + funcArray: [
  84 + {
  85 + icon: "static/img/icon_share.png",
  86 + func: this.toShare
  87 + }
  88 + ]
  89 + }
  90 + });
  91 +
  92 + // 设置标题
  93 + this.$set(this.backs, 'title', '品质优选');
  94 + }
  95 +
  96 +
  97 +
  98 + // 优选页面接口
  99 + // this.fansShopMessageList();
  100 +
  101 +
  102 +
  103 +
  104 +
  105 +
  106 +
  107 + },
  108 + methods: {
  109 +
  110 + /**
  111 + * 优选页面接口
  112 + */
  113 + fansShopMessageList() {
  114 +
  115 + // 校验登录
  116 + if (this.$parent.checkLogin()) {
  117 +
  118 + // 加载中提示
  119 + Indicator.open("加载中...");
  120 +
  121 + // 获取证书请求接口
  122 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  123 + uid: this.getStore("uid")
  124 + }, this.fansShopMessageListCallback, {
  125 + method: "POST"
  126 + });
  127 + }
  128 + },
  129 +
  130 + /**
  131 + * 优选页面接口回调
  132 + * @param {Object} res [服务器返回数据]
  133 + * @param {Object} ext [扩展参数]
  134 + */
  135 + fansShopMessageListCallback(res, ext) {
  136 +
  137 + // 加载完成
  138 + Indicator.close();
  139 +
  140 + // 返回处理
  141 + if (res.code == 200) {
  142 +
  143 + // 解构数据
  144 + let { data: datas } = res;
  145 +
  146 + /* 获取优选库“优选”数据 开始 */
  147 +
  148 +
  149 +
  150 + /* 获取优选库“优选”数据 结束 */
  151 +
  152 + } else if (res.code == 400) {
  153 +
  154 + // 获取优选失败
  155 + Toast(res.message);
  156 + } else {
  157 +
  158 + // 获取优选失败
  159 + Toast("获取优选失败");
  160 + }
  161 + },
  162 +
  163 + /**
  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 + * 跳转商品详情
  223 + * @param {Object} item [数据对象]
  224 + */
  225 + toDetail(item) {
  226 +
  227 + // 判断通用跳转函数是否存在
  228 + if (typeof this.$parent.gotoDetail === 'function') {
  229 +
  230 +
  231 + console.log('toDetail', item);
  232 +
  233 +
  234 + // 通用跳转
  235 + this.$parent.gotoDetail(item);
  236 + }
  237 + },
  238 + /**
  239 + * 列表附件按钮事件
  240 + * @param {Object} item [数据对象]
  241 + */
  242 + primary(item) {
  243 + this.toDetail(item);
  244 + },
  245 +
  246 +
  247 +
  248 +
  249 +
  250 +
  251 +
  252 + /**
  253 + * 分享
  254 + */
  255 + toShare() {
  256 +
  257 + // 判断分享
  258 + if (typeof this.$parent.toShare === 'function') {
  259 + this.$parent.toShare(38, this.$route.query.id || 0);
  260 + }
  261 + },
  262 +
  263 + /**
  264 + * 后退
  265 + */
  266 + back() {
  267 +
  268 + // 判断是否有处理函数
  269 + if (typeof this.$parent.back === 'function') {
  270 +
  271 + // 后退
  272 + this.$parent.back();
  273 + } else {
  274 +
  275 + // 后退
  276 + window.history.go(-1);
  277 + }
  278 + }
  279 + },
  280 + head: {
  281 + title () {
  282 + return {
  283 + inner: this.title
  284 + }
  285 + }
  286 + },
  287 + watch: {
  288 +
  289 + // 设置页面标题
  290 + title(newVal) {
  291 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  292 + this.$iFrame.insertIFrame(newVal);
  293 + } else {
  294 + this.$emit("updateHead");
  295 + }
  296 + }
  297 + },
  298 + mounted() {
  299 +
  300 + // 如果是App外，设置唤起App和微信内分享参数
  301 + if (!this.isCNLive.value) {
  302 +
  303 + // 唤起详情页
  304 + if (typeof this.$parent.getOpenApp === "function") {
  305 + this.$parent.getOpenApp({
  306 + type: 38,
  307 + id: this.$route.query.id || 1,
  308 + url: ""
  309 + });
  310 + }
  311 +
  312 + // 分享详情页
  313 + if (typeof this.$parent.getShareData === "function") {
  314 + this.$parent.getShareData({
  315 + type: 38,
  316 + id: this.$route.query.id || 1,
  317 + url: ""
  318 + });
  319 + }
  320 + }
  321 + }
  322 + }
  323 +</script>
  324 +
  325 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  326 +<style rel="stylesheet/less" lang='less' scoped>
  327 + @import "optimizationList";
  328 +</style>
0 329 \ No newline at end of file
... ...
src/router/index.js
  View file @fe59ce5
... ... @@ -206,6 +206,17 @@ const router = new Router({
206 206 requireAuth: false
207 207 }
208 208 },
  209 + {
  210 + // 新版优选库“优选品质优选列表”页面
  211 + path: "/optimizationList",
  212 + name: "optimizationList",
  213 + component: resolve => {
  214 + require(["@/pages/optimizationList/optimizationList"], resolve);
  215 + },
  216 + meta: {
  217 + requireAuth: false
  218 + }
  219 + },
209 220  
210 221 /* 优选和商城页面改版升级页面 结束 */
211 222  
... ...
static/img/icon_more_arrow_right_3c.png 0 → 100644
View file @fe59ce5

187 Bytes