Commit e10075b4c3858b1775d274fd2f1893fc25d266a5
1 parent
5db8f0d5
优选库——优选，品质优选列表页完成~
Showing
15 changed files
with
253 additions
and
152 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/pages/optimizationList/optimizationList.less
| @@ -25,31 +25,12 @@ | @@ -25,31 +25,12 @@ | ||
| 25 | } | 25 | } |
| 26 | } | 26 | } |
| 27 | .main-box { | 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 | - } | 28 | + padding: 40px 0; |
| 50 | .section { | 29 | .section { |
| 51 | background-color: #ffffff; | 30 | background-color: #ffffff; |
| 52 | - margin: 40px auto; | 31 | + background-repeat: no-repeat; |
| 32 | + background-size: contain; | ||
| 33 | + margin: 0 auto 30px auto; | ||
| 53 | width: 690px; | 34 | width: 690px; |
| 54 | height: auto; | 35 | height: auto; |
| 55 | border-radius: 24px; | 36 | border-radius: 24px; |
| @@ -57,64 +38,47 @@ | @@ -57,64 +38,47 @@ | ||
| 57 | &:last-child { | 38 | &:last-child { |
| 58 | margin-bottom: 0; | 39 | margin-bottom: 0; |
| 59 | } | 40 | } |
| 60 | - &.goods-list { | ||
| 61 | - /deep/ .goods-item-8-box { | ||
| 62 | - .main-box { | ||
| 63 | - border-bottom: 1px solid #EAEAEA; | 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 | + } | ||
| 64 | } | 54 | } |
| 65 | - } | ||
| 66 | - /deep/ .goods-item-8-box:last-child { | ||
| 67 | - .main-box { | ||
| 68 | - border-bottom: none; | 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 | + } | ||
| 69 | } | 71 | } |
| 70 | } | 72 | } |
| 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 | } | 73 | } |
| 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 | - } | 74 | + &.red-box { |
| 75 | + background-color: #FCA389; | ||
| 76 | + } | ||
| 77 | + &.blue-box { | ||
| 78 | + background-color: #5B8BB4; | ||
| 79 | + } | ||
| 80 | + &.green-box { | ||
| 81 | + background-color: #ADC77F; | ||
| 118 | } | 82 | } |
| 119 | } | 83 | } |
| 120 | } | 84 | } |
src/pages/optimizationList/optimizationList.vue
| @@ -17,11 +17,71 @@ | @@ -17,11 +17,71 @@ | ||
| 17 | <!-- 主区域 --> | 17 | <!-- 主区域 --> |
| 18 | <div class="main-box"> | 18 | <div class="main-box"> |
| 19 | 19 | ||
| 20 | - | ||
| 21 | - | ||
| 22 | - | ||
| 23 | - | ||
| 24 | - | 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> | ||
| 25 | </div> | 85 | </div> |
| 26 | 86 | ||
| 27 | <!-- 回到顶部按钮 --> | 87 | <!-- 回到顶部按钮 --> |
| @@ -37,12 +97,6 @@ | @@ -37,12 +97,6 @@ | ||
| 37 | import { Toast, Indicator } from "mint-ui"; | 97 | import { Toast, Indicator } from "mint-ui"; |
| 38 | import callAppBox from "@/components/callAppBox/callAppBox"; | 98 | import callAppBox from "@/components/callAppBox/callAppBox"; |
| 39 | import backBox from "@/components/backBox/backBox"; | 99 | import backBox from "@/components/backBox/backBox"; |
| 40 | - | ||
| 41 | - | ||
| 42 | - | ||
| 43 | - | ||
| 44 | - | ||
| 45 | - | ||
| 46 | import gotoTop from "@/components/gotoTop/gotoTop"; | 100 | import gotoTop from "@/components/gotoTop/gotoTop"; |
| 47 | 101 | ||
| 48 | export default { | 102 | export default { |
| @@ -51,8 +105,11 @@ | @@ -51,8 +105,11 @@ | ||
| 51 | return { | 105 | return { |
| 52 | title: "", // 标题 | 106 | title: "", // 标题 |
| 53 | backs: null, // 后退按钮组 | 107 | backs: null, // 后退按钮组 |
| 54 | - | 108 | + redBox: null, // 红色区块 |
| 109 | + blueBox: null, // 蓝色区块 | ||
| 110 | + greenBox: null, // 绿色区块 | ||
| 55 | 111 | ||
| 112 | + | ||
| 56 | 113 | ||
| 57 | 114 | ||
| 58 | } | 115 | } |
| @@ -60,10 +117,6 @@ | @@ -60,10 +117,6 @@ | ||
| 60 | components: { | 117 | components: { |
| 61 | callAppBox, | 118 | callAppBox, |
| 62 | backBox, | 119 | backBox, |
| 63 | - | ||
| 64 | - | ||
| 65 | - | ||
| 66 | - | ||
| 67 | gotoTop | 120 | gotoTop |
| 68 | }, | 121 | }, |
| 69 | created() { | 122 | created() { |
| @@ -99,7 +152,48 @@ | @@ -99,7 +152,48 @@ | ||
| 99 | // this.fansShopMessageList(); | 152 | // this.fansShopMessageList(); |
| 100 | 153 | ||
| 101 | 154 | ||
| 102 | - | 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 | + }); | ||
| 103 | 197 | ||
| 104 | 198 | ||
| 105 | 199 | ||
| @@ -161,64 +255,6 @@ | @@ -161,64 +255,6 @@ | ||
| 161 | }, | 255 | }, |
| 162 | 256 | ||
| 163 | /** | 257 | /** |
| 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 | * 跳转商品详情 | 258 | * 跳转商品详情 |
| 223 | * @param {Object} item [数据对象] | 259 | * @param {Object} item [数据对象] |
| 224 | */ | 260 | */ |
| @@ -235,6 +271,7 @@ | @@ -235,6 +271,7 @@ | ||
| 235 | this.$parent.gotoDetail(item); | 271 | this.$parent.gotoDetail(item); |
| 236 | } | 272 | } |
| 237 | }, | 273 | }, |
| 274 | + | ||
| 238 | /** | 275 | /** |
| 239 | * 列表附件按钮事件 | 276 | * 列表附件按钮事件 |
| 240 | * @param {Object} item [数据对象] | 277 | * @param {Object} item [数据对象] |
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