Commit 7a2dda4461386c56d67c788aed2212fd8eeabfa7
1 parent
09a4a9a0aa
Exists in
master
首页逻辑修改
Showing
8 changed files
with
176 additions
and
72 deletions
Show diff stats
src/common/data.js
| ... | ... | @@ -37,6 +37,8 @@ |
| 37 | 37 | */ |
| 38 | 38 | // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的. |
| 39 | 39 | // 数据较长，请仔细查看。 |
| 40 | + | |
| 41 | + | |
| 40 | 42 | export default [ |
| 41 | 43 | { |
| 42 | 44 | "name":'综合', |
| ... | ... | @@ -52,8 +54,8 @@ export default [ |
| 52 | 54 | "name":'品牌', |
| 53 | 55 | "type": 'filter', |
| 54 | 56 | "submenu": [{ |
| 55 | - "name": '品牌', | |
| 56 | - "value": "品牌", | |
| 57 | + // "name": '品牌', | |
| 58 | + // "value": "品牌", | |
| 57 | 59 | "submenu": [{ |
| 58 | 60 | "name": "帕森", |
| 59 | 61 | "value": "帕森", |
| ... | ... | @@ -70,20 +72,19 @@ export default [ |
| 70 | 72 | "name":'功能', |
| 71 | 73 | "type": 'filter', |
| 72 | 74 | "submenu": [{ |
| 73 | - "name": "智能排序", | |
| 74 | - "value": "智能排序" | |
| 75 | - }, | |
| 76 | - { | |
| 77 | - "name": "离我最近", | |
| 78 | - "value": "离我最近" | |
| 79 | - }, | |
| 80 | - { | |
| 81 | - "name": "人均从高到低", | |
| 82 | - "value": "人均从高到低" | |
| 83 | - }, | |
| 84 | - { | |
| 85 | - "name": "人均从低到高", | |
| 86 | - "value": "人均从低到高" | |
| 75 | + "submenu": [{ | |
| 76 | + "name": "满减活动", | |
| 77 | + "value": "满减活动" | |
| 78 | + }, | |
| 79 | + { | |
| 80 | + "name": "打折优惠", | |
| 81 | + "value": "打折优惠" | |
| 82 | + }, | |
| 83 | + { | |
| 84 | + "name": "会员专享", | |
| 85 | + "value": "会员专享" | |
| 86 | + } | |
| 87 | + ] | |
| 87 | 88 | } |
| 88 | 89 | ] |
| 89 | 90 | }, | ... | ... |
src/components/CommodityCard/CommodityCard.vue
| 1 | 1 | <template> |
| 2 | - <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> | |
| 3 | - <image mode="widthFix" :src="goods.img" ></image> | |
| 2 | + <view class="card" @tap="toGoods(goods.id,goods.goodType)"> | |
| 3 | + <image mode="widthFix" :src="goods.imgurl" ></image> | |
| 4 | 4 | <view class="name">{{goods.name}}</view> |
| 5 | 5 | <view class="info"> |
| 6 | 6 | <view class="priceBox"> |
| 7 | 7 | <view class="price">{{goods.price}}</view> |
| 8 | 8 | <view class="originCost"> |
| 9 | - {{goods.originCost}} | |
| 9 | + {{goods.rsSon.Max_Price}} | |
| 10 | 10 | </view> |
| 11 | 11 | </view> |
| 12 | - <view class="slogan">{{goods.slogan}}</view> | |
| 12 | + <view class="trade_num">{{goods.trade_num}}人购买</view> | |
| 13 | 13 | </view> |
| 14 | 14 | </view> |
| 15 | 15 | </template> |
| ... | ... | @@ -21,18 +21,19 @@ |
| 21 | 21 | * 商品数据 |
| 22 | 22 | */ |
| 23 | 23 | goods: { |
| 24 | - goods_id: Number, | |
| 25 | - img: String, | |
| 24 | + id: Number, | |
| 25 | + imgurl: String, | |
| 26 | 26 | name: String, |
| 27 | + rsSon:Object, | |
| 27 | 28 | originCost:String, |
| 28 | 29 | price: String, |
| 29 | - slogan:String, | |
| 30 | + trade_num:String, | |
| 30 | 31 | goodType:String, |
| 31 | 32 | } |
| 32 | 33 | |
| 33 | 34 | }, |
| 34 | 35 | created() { |
| 35 | - console.log(this.goods) | |
| 36 | + // console.log(this.goods) | |
| 36 | 37 | }, |
| 37 | 38 | data() { |
| 38 | 39 | return { |
| ... | ... | @@ -40,9 +41,14 @@ |
| 40 | 41 | }; |
| 41 | 42 | }, |
| 42 | 43 | methods:{ |
| 43 | - toGoods(id,type){ | |
| 44 | - // console.log('toGoods =====> id======>', id) | |
| 45 | - // console.log(type) | |
| 44 | + toGoods(id,type){ | |
| 45 | + uni.navigateTo({ | |
| 46 | + url: `../frameDetail/frameDetail?oderId=`+id, | |
| 47 | + success: res => {}, | |
| 48 | + fail: () => {}, | |
| 49 | + complete: () => {} | |
| 50 | + }); | |
| 51 | + console.log('toGoods =====> id:'+id +"======>type:"+type) | |
| 46 | 52 | switch(type){ |
| 47 | 53 | case 1: |
| 48 | 54 | uni.navigateTo({ |
| ... | ... | @@ -124,7 +130,7 @@ |
| 124 | 130 | } |
| 125 | 131 | |
| 126 | 132 | } |
| 127 | - .slogan{ | |
| 133 | + .trade_num{ | |
| 128 | 134 | color: #999999; |
| 129 | 135 | font-size: 20rpx; |
| 130 | 136 | } | ... | ... |
src/components/HMFilterDropdown/HMFilterDropdown.vue
| ... | ... | @@ -45,7 +45,7 @@ |
| 45 | 45 | </scroll-view> |
| 46 | 46 | </block> |
| 47 | 47 | </block> |
| 48 | - <block v-if="page.type=='filter'"> | |
| 48 | + <block v-if="page.type=='filter'||page.type=='checkbox'"> | |
| 49 | 49 | <view class="filter"> |
| 50 | 50 | <scroll-view class="menu-box" :scroll-y="true"> |
| 51 | 51 | <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> |
| ... | ... | @@ -343,6 +343,7 @@ |
| 343 | 343 | }); |
| 344 | 344 | }else{ |
| 345 | 345 | let submenu = this.subData[i].submenu[item[0]]; |
| 346 | + // console.log(this.subData[i]) | |
| 346 | 347 | value[i][0] = submenu.value; |
| 347 | 348 | if(value[i].length>=2 && item[1]!=null){ |
| 348 | 349 | if(submenu.submenu.length>0){ |
| ... | ... | @@ -710,10 +711,15 @@ |
| 710 | 711 | border-radius: 2px; |
| 711 | 712 | margin-right: 15px; |
| 712 | 713 | margin-top: 8px; |
| 714 | + padding: 0 16rpx; | |
| 715 | + box-sizing: border-box; | |
| 713 | 716 | font-size: 12px; |
| 714 | 717 | flex-direction: row; |
| 715 | 718 | justify-content: center; |
| 716 | 719 | align-items: center; |
| 720 | + overflow: hidden; | |
| 721 | + white-space: nowrap; | |
| 722 | + text-overflow: ellipsis; | |
| 717 | 723 | &:nth-child(4n) { |
| 718 | 724 | margin-right: 0; |
| 719 | 725 | } |
| ... | ... | @@ -723,7 +729,7 @@ |
| 723 | 729 | } |
| 724 | 730 | .btn-box { |
| 725 | 731 | flex-shrink: 0; |
| 726 | - width: 698rpx; | |
| 732 | + width: 100%; | |
| 727 | 733 | height: 75px; |
| 728 | 734 | flex-direction: row !important; |
| 729 | 735 | align-items: center; | ... | ... |
src/pages/frameDetail/frameDetail.vue
| ... | ... | @@ -159,6 +159,7 @@ |
| 159 | 159 | </template> |
| 160 | 160 | |
| 161 | 161 | <script> |
| 162 | +import store from '@/store'; | |
| 162 | 163 | export default { |
| 163 | 164 | data(){ |
| 164 | 165 | return { |
| ... | ... | @@ -214,12 +215,17 @@ export default { |
| 214 | 215 | }, |
| 215 | 216 | onLoad:function(option){ |
| 216 | 217 | this.goodType = option.goodType |
| 217 | - console.log(this.updateGoodType) | |
| 218 | + // console.log(this.updateGoodType) | |
| 219 | + store.dispatch('read/fetch'); | |
| 218 | 220 | }, |
| 219 | 221 | computed:{ |
| 220 | 222 | updateGoodType(){ |
| 221 | 223 | return this.goodType |
| 222 | - } | |
| 224 | + }, | |
| 225 | + goodInfo() { | |
| 226 | + console.log(this.$store.state.read.goodInfo) | |
| 227 | + return this.$store.state.read.goodInfo; | |
| 228 | + }, | |
| 223 | 229 | }, |
| 224 | 230 | methods:{ |
| 225 | 231 | goPerchase(){ | ... | ... |
src/pages/index/index.vue
| ... | ... | @@ -8,7 +8,7 @@ |
| 8 | 8 | </view> |
| 9 | 9 | |
| 10 | 10 | <!-- 筛选栏--> |
| 11 | - <view class="screenBar"> | |
| 11 | + <!-- <view class="screenBar"> | |
| 12 | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> |
| 13 | 13 | <view |
| 14 | 14 | class="screenItem" |
| ... | ... | @@ -35,9 +35,9 @@ |
| 35 | 35 | >{{ item.text }}</view> |
| 36 | 36 | </view> |
| 37 | 37 | </view> |
| 38 | - </view> | |
| 38 | + </view> --> | |
| 39 | 39 | </view> |
| 40 | - <Uni-drawer | |
| 40 | + <!-- <Uni-drawer | |
| 41 | 41 | ref="showRight" |
| 42 | 42 | mask="true" |
| 43 | 43 | maskClick="true" |
| ... | ... | @@ -50,7 +50,7 @@ |
| 50 | 50 | <text class="word-btn-white">关闭</text> |
| 51 | 51 | </view> |
| 52 | 52 | </view> |
| 53 | - </Uni-drawer> | |
| 53 | + </Uni-drawer> --> | |
| 54 | 54 | |
| 55 | 55 | <!-- 筛选菜单--> |
| 56 | 56 | <view class="content-wrap"> |
| ... | ... | @@ -105,30 +105,85 @@ export default { |
| 105 | 105 | loadingText: "~~到底了~~", |
| 106 | 106 | filterDropdownValue: [], |
| 107 | 107 | filterData: [], |
| 108 | - goodsList:[ | |
| 109 | - { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 110 | - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | |
| 111 | - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | |
| 112 | - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | |
| 113 | - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 114 | - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | |
| 115 | - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | |
| 116 | - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | |
| 117 | - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 118 | - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } | |
| 119 | - ], | |
| 108 | + // goodsList:[ | |
| 109 | + // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 110 | + // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | |
| 111 | + // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | |
| 112 | + // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | |
| 113 | + // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 114 | + // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }, | |
| 115 | + // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 }, | |
| 116 | + // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 }, | |
| 117 | + // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, | |
| 118 | + // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 } | |
| 119 | + // ], | |
| 120 | 120 | }; |
| 121 | 121 | }, |
| 122 | 122 | computed: { |
| 123 | - // goodsList() { | |
| 124 | - // // 也可以从 getters 获取 | |
| 125 | - // console.log('list', this.$store.state.test.list); | |
| 126 | - // return this.$store.state.test.list; | |
| 127 | - // }, | |
| 128 | - // categoryList(){ | |
| 129 | - // console.log(this.$store.state.categoryOrder.categoryList); | |
| 130 | - // this.filterData = this.$store.state.categoryOrder.categoryList | |
| 131 | - // } | |
| 123 | + goodsList() { | |
| 124 | + // 也可以从 getters 获取 | |
| 125 | + return this.$store.state.test.list; | |
| 126 | + }, | |
| 127 | + categoryList(){ | |
| 128 | + // console.log(this.$store.state.categoryOrder.categoryList); | |
| 129 | + const categoryList = this.$store.state.categoryOrder.categoryList | |
| 130 | + let newData = [ | |
| 131 | + { | |
| 132 | + "name":'产品', | |
| 133 | + "type": 'filter', | |
| 134 | + "submenu": [{ | |
| 135 | + "submenu": [ | |
| 136 | + | |
| 137 | + ] | |
| 138 | + }, | |
| 139 | + ], | |
| 140 | + }, | |
| 141 | + { | |
| 142 | + "name":'品牌', | |
| 143 | + "type": 'filter', | |
| 144 | + "submenu": [{ | |
| 145 | + "submenu": [ | |
| 146 | + ] | |
| 147 | + }, | |
| 148 | + ] | |
| 149 | + }, | |
| 150 | + { | |
| 151 | + "name":'使用场景', | |
| 152 | + "type": 'filter', | |
| 153 | + "submenu": [{ | |
| 154 | + "submenu": [ | |
| 155 | + ] | |
| 156 | + } | |
| 157 | + ] | |
| 158 | + }, | |
| 159 | + { | |
| 160 | + "name":'材质', | |
| 161 | + "type": 'filter', | |
| 162 | + "submenu": [{ | |
| 163 | + "submenu": [ | |
| 164 | + ] | |
| 165 | + } | |
| 166 | + ] | |
| 167 | + }, | |
| 168 | + { | |
| 169 | + "name":'筛选', | |
| 170 | + "type": 'filter', | |
| 171 | + "submenu": [{ | |
| 172 | + // "name": "折扣(多选)", | |
| 173 | + "submenu": [ | |
| 174 | + ] | |
| 175 | + } | |
| 176 | + ] | |
| 177 | + } | |
| 178 | + ] | |
| 179 | + newData[0].submenu[0].submenu = categoryList[0].submenu | |
| 180 | + newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu | |
| 181 | + newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu | |
| 182 | + newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu | |
| 183 | + newData[4].submenu[0] = categoryList[3] | |
| 184 | + this.filterData = newData; | |
| 185 | + // this.filterData = categoryList; | |
| 186 | + } | |
| 132 | 187 | |
| 133 | 188 | }, |
| 134 | 189 | filters: { |
| ... | ... | @@ -139,19 +194,7 @@ export default { |
| 139 | 194 | onLoad: function() { |
| 140 | 195 | store.dispatch('test/fetch'); |
| 141 | 196 | store.dispatch('categoryOrder/fetch') |
| 142 | - | |
| 143 | - //定时器模拟ajax异步请求数据 | |
| 144 | - setTimeout(()=>{ | |
| 145 | - //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | |
| 146 | - // this.filterDropdownValue = [ | |
| 147 | - // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | |
| 148 | - // [null,null], //第1个菜单选中 都不选中 | |
| 149 | - // [1], //第2个菜单选中 一级菜单的第1项 | |
| 150 | - // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | |
| 151 | - // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | |
| 152 | - // ]; | |
| 153 | - // this.filterData = data; | |
| 154 | - },100); | |
| 197 | + | |
| 155 | 198 | }, |
| 156 | 199 | methods: { |
| 157 | 200 | showDrawer(e) { | ... | ... |
src/store/index.js
src/store/modules/read.js
| ... | ... | @@ -0,0 +1,40 @@ |
| 1 | + import urlAlias from '../url'; | |
| 2 | + import request from '../request'; | |
| 3 | + | |
| 4 | + const { | |
| 5 | + read | |
| 6 | + } = urlAlias; | |
| 7 | + | |
| 8 | +const state = { | |
| 9 | + goodInfo: [], | |
| 10 | +}; | |
| 11 | + | |
| 12 | +const mutations = { | |
| 13 | + INIT: (state, goodInfo) => { | |
| 14 | + state.goodInfo = goodInfo; | |
| 15 | + }, | |
| 16 | +}; | |
| 17 | + | |
| 18 | +const actions = { | |
| 19 | + fetch({ commit }, param) { | |
| 20 | + request({ | |
| 21 | + url: read, | |
| 22 | + success: (res) => { | |
| 23 | + commit('INIT', res.data.data) | |
| 24 | + }, | |
| 25 | + fail: (res) => { | |
| 26 | + console.log("fail status === > ", res); | |
| 27 | + }, | |
| 28 | + complete: (res) => { | |
| 29 | + console.log("complete status === > ", res); | |
| 30 | + }, | |
| 31 | + }) | |
| 32 | + }, | |
| 33 | +}; | |
| 34 | + | |
| 35 | +export default { | |
| 36 | + namespaced: true, | |
| 37 | + state, | |
| 38 | + mutations, | |
| 39 | + actions, | |
| 40 | +}; | ... | ... |
src/store/url.js