From 7a2dda4461386c56d67c788aed2212fd8eeabfa7 Mon Sep 17 00:00:00 2001 From: BigBoss <2280520255@qq.com> Date: Fri, 15 May 2020 22:20:48 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=80=BB=E8=BE=91=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/data.js | 33 +++--- src/components/CommodityCard/CommodityCard.vue | 30 +++--- .../HMFilterDropdown/HMFilterDropdown.vue | 10 +- src/pages/frameDetail/frameDetail.vue | 10 +- src/pages/index/index.vue | 119 ++++++++++++++------- src/store/index.js | 2 +- src/store/modules/read.js | 40 +++++++ src/store/url.js | 4 +- 8 files changed, 176 insertions(+), 72 deletions(-) create mode 100644 src/store/modules/read.js diff --git a/src/common/data.js b/src/common/data.js index 9e85539..198bc0b 100644 --- a/src/common/data.js +++ b/src/common/data.js @@ -37,6 +37,8 @@ */ // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的. // 数据较长,请仔细查看。 + + export default [ { "name":'综合', @@ -52,8 +54,8 @@ export default [ "name":'品牌', "type": 'filter', "submenu": [{ - "name": '品牌', - "value": "品牌", + // "name": '品牌', + // "value": "品牌", "submenu": [{ "name": "帕森", "value": "帕森", @@ -70,20 +72,19 @@ export default [ "name":'功能', "type": 'filter', "submenu": [{ - "name": "智能排序", - "value": "智能排序" - }, - { - "name": "离我最近", - "value": "离我最近" - }, - { - "name": "人均从高到低", - "value": "人均从高到低" - }, - { - "name": "人均从低到高", - "value": "人均从低到高" + "submenu": [{ + "name": "满减活动", + "value": "满减活动" + }, + { + "name": "打折优惠", + "value": "打折优惠" + }, + { + "name": "会员专享", + "value": "会员专享" + } + ] } ] }, diff --git a/src/components/CommodityCard/CommodityCard.vue b/src/components/CommodityCard/CommodityCard.vue index d153156..fdef58e 100644 --- a/src/components/CommodityCard/CommodityCard.vue +++ b/src/components/CommodityCard/CommodityCard.vue @@ -1,15 +1,15 @@ <template> - <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> - <image mode="widthFix" :src="goods.img" ></image> + <view class="card" @tap="toGoods(goods.id,goods.goodType)"> + <image mode="widthFix" :src="goods.imgurl" ></image> <view class="name">{{goods.name}}</view> <view class="info"> <view class="priceBox"> <view class="price">{{goods.price}}</view> <view class="originCost"> - {{goods.originCost}} + {{goods.rsSon.Max_Price}} </view> </view> - <view class="slogan">{{goods.slogan}}</view> + <view class="trade_num">{{goods.trade_num}}人购买</view> </view> </view> </template> @@ -21,18 +21,19 @@ * 商品数据 */ goods: { - goods_id: Number, - img: String, + id: Number, + imgurl: String, name: String, + rsSon:Object, originCost:String, price: String, - slogan:String, + trade_num:String, goodType:String, } }, created() { - console.log(this.goods) + // console.log(this.goods) }, data() { return { @@ -40,9 +41,14 @@ }; }, methods:{ - toGoods(id,type){ - // console.log('toGoods =====> id======>', id) - // console.log(type) + toGoods(id,type){ + uni.navigateTo({ + url: `../frameDetail/frameDetail?oderId=`+id, + success: res => {}, + fail: () => {}, + complete: () => {} + }); + console.log('toGoods =====> id:'+id +"======>type:"+type) switch(type){ case 1: uni.navigateTo({ @@ -124,7 +130,7 @@ } } - .slogan{ + .trade_num{ color: #999999; font-size: 20rpx; } diff --git a/src/components/HMFilterDropdown/HMFilterDropdown.vue b/src/components/HMFilterDropdown/HMFilterDropdown.vue index 56f9cee..5c8e973 100644 --- a/src/components/HMFilterDropdown/HMFilterDropdown.vue +++ b/src/components/HMFilterDropdown/HMFilterDropdown.vue @@ -45,7 +45,7 @@ </scroll-view> </block> </block> - <block v-if="page.type=='filter'"> + <block v-if="page.type=='filter'||page.type=='checkbox'"> <view class="filter"> <scroll-view class="menu-box" :scroll-y="true"> <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> @@ -343,6 +343,7 @@ }); }else{ let submenu = this.subData[i].submenu[item[0]]; + // console.log(this.subData[i]) value[i][0] = submenu.value; if(value[i].length>=2 && item[1]!=null){ if(submenu.submenu.length>0){ @@ -710,10 +711,15 @@ border-radius: 2px; margin-right: 15px; margin-top: 8px; + padding: 0 16rpx; + box-sizing: border-box; font-size: 12px; flex-direction: row; justify-content: center; align-items: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; &:nth-child(4n) { margin-right: 0; } @@ -723,7 +729,7 @@ } .btn-box { flex-shrink: 0; - width: 698rpx; + width: 100%; height: 75px; flex-direction: row !important; align-items: center; diff --git a/src/pages/frameDetail/frameDetail.vue b/src/pages/frameDetail/frameDetail.vue index 53010c0..af007b1 100644 --- a/src/pages/frameDetail/frameDetail.vue +++ b/src/pages/frameDetail/frameDetail.vue @@ -159,6 +159,7 @@ </template> <script> +import store from '@/store'; export default { data(){ return { @@ -214,12 +215,17 @@ export default { }, onLoad:function(option){ this.goodType = option.goodType - console.log(this.updateGoodType) + // console.log(this.updateGoodType) + store.dispatch('read/fetch'); }, computed:{ updateGoodType(){ return this.goodType - } + }, + goodInfo() { + console.log(this.$store.state.read.goodInfo) + return this.$store.state.read.goodInfo; + }, }, methods:{ goPerchase(){ diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 0cfd791..7f07fb9 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -8,7 +8,7 @@ </view> <!-- 筛选栏--> - <view class="screenBar"> + <!-- <view class="screenBar"> <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> <view class="screenItem" @@ -35,9 +35,9 @@ >{{ item.text }}</view> </view> </view> - </view> + </view> --> </view> - <Uni-drawer + <!-- <Uni-drawer ref="showRight" mask="true" maskClick="true" @@ -50,7 +50,7 @@ <text class="word-btn-white">关闭</text> </view> </view> - </Uni-drawer> + </Uni-drawer> --> <!-- 筛选菜单--> <view class="content-wrap"> @@ -105,30 +105,85 @@ export default { loadingText: "~~到底了~~", filterDropdownValue: [], filterData: [], - goodsList:[ - { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, - { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, - { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, - { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, - { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, - { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, - { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, - { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, - { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, - { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 } - ], + // goodsList:[ + // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, + // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, + // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, + // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, + // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, + // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, + // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, + // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, + // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, + // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 } + // ], }; }, computed: { - // goodsList() { - // // 也可以从 getters 获取 - // console.log('list', this.$store.state.test.list); - // return this.$store.state.test.list; - // }, - // categoryList(){ - // console.log(this.$store.state.categoryOrder.categoryList); - // this.filterData = this.$store.state.categoryOrder.categoryList - // } + goodsList() { + // 也可以从 getters 获取 + return this.$store.state.test.list; + }, + categoryList(){ + // console.log(this.$store.state.categoryOrder.categoryList); + const categoryList = this.$store.state.categoryOrder.categoryList + let newData = [ + { + "name":'产品', + "type": 'filter', + "submenu": [{ + "submenu": [ + + ] + }, + ], + }, + { + "name":'品牌', + "type": 'filter', + "submenu": [{ + "submenu": [ + ] + }, + ] + }, + { + "name":'使用场景', + "type": 'filter', + "submenu": [{ + "submenu": [ + ] + } + ] + }, + { + "name":'材质', + "type": 'filter', + "submenu": [{ + "submenu": [ + ] + } + ] + }, + { + "name":'筛选', + "type": 'filter', + "submenu": [{ + // "name": "折扣(多选)", + "submenu": [ + ] + } + ] + } + ] + newData[0].submenu[0].submenu = categoryList[0].submenu + newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu + newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu + newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu + newData[4].submenu[0] = categoryList[3] + this.filterData = newData; + // this.filterData = categoryList; + } }, filters: { @@ -139,19 +194,7 @@ export default { onLoad: function() { store.dispatch('test/fetch'); store.dispatch('categoryOrder/fetch') - - //定时器模拟ajax异步请求数据 - setTimeout(()=>{ - //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null - // this.filterDropdownValue = [ - // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 - // [null,null], //第1个菜单选中 都不选中 - // [1], //第2个菜单选中 一级菜单的第1项 - // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 - // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 - // ]; - // this.filterData = data; - },100); + }, methods: { showDrawer(e) { diff --git a/src/store/index.js b/src/store/index.js index f1a9d72..c637ffd 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -17,7 +17,7 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => { const store = new Vuex.Store({ modules, getters: { - list: state => state.test.list + // list: state => state.test.list } }) diff --git a/src/store/modules/read.js b/src/store/modules/read.js new file mode 100644 index 0000000..9747679 --- /dev/null +++ b/src/store/modules/read.js @@ -0,0 +1,40 @@ + import urlAlias from '../url'; + import request from '../request'; + + const { + read + } = urlAlias; + +const state = { + goodInfo: [], +}; + +const mutations = { + INIT: (state, goodInfo) => { + state.goodInfo = goodInfo; + }, +}; + +const actions = { + fetch({ commit }, param) { + request({ + url: read, + success: (res) => { + commit('INIT', res.data.data) + }, + fail: (res) => { + console.log("fail status === > ", res); + }, + complete: (res) => { + console.log("complete status === > ", res); + }, + }) + }, +}; + +export default { + namespaced: true, + state, + mutations, + actions, +}; diff --git a/src/store/url.js b/src/store/url.js index 0c19d35..50ef579 100644 --- a/src/store/url.js +++ b/src/store/url.js @@ -3,7 +3,9 @@ const urlAlias = { shopList: '/app/prod/list', // 获取首页商品列表 - category: '/app/prod/category', + category: '/app/prod/category2', + // 获取商品信息 + read: '/app/prod/read', } export default urlAlias; -- 2.0.0