刘文博 / gulu-vue

Download as
Browse Code »

Commit 7a2dda4461386c56d67c788aed2212fd8eeabfa7

Authored by BigBoss
1 parent 09a4a9a0aa
Exists in master

首页逻辑修改

Showing 8 changed files with 176 additions and 72 deletions   Show diff stats
src/common/data.js
Diff comments   View file @7a2dda4
1 // 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示, 1 // 数据格式,数据中只需要包含以下字段和数据格式,可以添加字段,比如id等等,不影响组件显示,
2 // 组件的返回结果是有菜单数组下标形式返回, 2 // 组件的返回结果是有菜单数组下标形式返回,
3 // 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单 3 // 如果传入数据中有value,也会返回value,开发者可根据返回的下标获取所选中的菜单
4 /* 4 /*
5 [ 5 [
6 { 6 {
7 "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选" 7 "name":"", //字符串类型 选填项 菜单名称,如不填,则取第一个子菜单的name值,filter和radio类型则将设置为"筛选"
8 "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单 8 "type":"" //字符串类型 必填项 可取值 hierarchy/filter/radio hierarchy单/多层级菜单(最多三级); filter筛选多选菜单; radio筛选单选菜单
9 "submenu":[ //对象数组类型 必填项 子菜单数据 9 "submenu":[ //对象数组类型 必填项 子菜单数据
10 { 10 {
11 "name":"", //字符串类型 必填项 菜单名称 11 "name":"", //字符串类型 必填项 菜单名称
12 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果 12 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null,filter类型此字段无效果
13 "submenu":[ //对象数组类型 必填项 子菜单数据 13 "submenu":[ //对象数组类型 必填项 子菜单数据
14 { 14 {
15 "name":"", //字符串类型 必填项 菜单名称 15 "name":"", //字符串类型 必填项 菜单名称
16 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null 16 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
17 "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效 17 "submenu":[ //对象数组类型 必填项 子菜单数据 filter类型无效
18 { 18 {
19 "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此 19 "name":"", //字符串类型 必填项 菜单名称 hierarchy类型层级最多到此
20 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null 20 "value":"", //字符串类型 选填项 自定义内容,比如id等等,如果填写了,confirm返回的结果中将返回对应选中的value,若菜单无value字段则返回null
21 } 21 }
22 ] 22 ]
23 } 23 }
24 ] 24 ]
25 } 25 }
26 ] 26 ]
27 } 27 }
28 ] 28 ]
29 */ 29 */
30 30
31 //0.0.4版本起 返回结果将有两部分组成: 31 //0.0.4版本起 返回结果将有两部分组成:
32 /* 32 /*
33 { 33 {
34 index:[], //旧版本的下标数组形式 34 index:[], //旧版本的下标数组形式
35 value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已 35 value:[] //菜单中的valve,结构和下标结果数组一样,只是把下标替换成了value而已
36 } 36 }
37 */ 37 */
38 // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的. 38 // 以下演示数据中,我故意把value设置成跟name一样,只是为了方便演示,使示例更加易懂,实际使用时候value应该是一个标识,给后台识别所用的.
39 // 数据较长，请仔细查看。 39 // 数据较长，请仔细查看。
40
41
40 export default [ 42 export default [
41 { 43 {
42 "name":'综合', 44 "name":'综合',
43 "type": 'filter', 45 "type": 'filter',
44 "submenu": [{ 46 "submenu": [{
45 "submenu": [ 47 "submenu": [
46 48
47 ] 49 ]
48 }, 50 },
49 ], 51 ],
50 }, 52 },
51 { 53 {
52 "name":'品牌', 54 "name":'品牌',
53 "type": 'filter', 55 "type": 'filter',
54 "submenu": [{ 56 "submenu": [{
55 "name": '品牌', 57 // "name": '品牌',
56 "value": "品牌", 58 // "value": "品牌",
57 "submenu": [{ 59 "submenu": [{
58 "name": "帕森", 60 "name": "帕森",
59 "value": "帕森", 61 "value": "帕森",
60 }, 62 },
61 { 63 {
62 "name": "海伦凯勒", 64 "name": "海伦凯勒",
63 "value": "海伦凯勒", 65 "value": "海伦凯勒",
64 }, 66 },
65 ] 67 ]
66 }, 68 },
67 ] 69 ]
68 }, 70 },
69 { 71 {
70 "name":'功能', 72 "name":'功能',
71 "type": 'filter', 73 "type": 'filter',
72 "submenu": [{ 74 "submenu": [{
73 "name": "智能排序", 75 "submenu": [{
74 "value": "智能排序" 76 "name": "满减活动",
75 }, 77 "value": "满减活动"
76 { 78 },
77 "name": "离我最近", 79 {
78 "value": "离我最近" 80 "name": "打折优惠",
79 }, 81 "value": "打折优惠"
80 { 82 },
81 "name": "人均从高到低", 83 {
82 "value": "人均从高到低" 84 "name": "会员专享",
83 }, 85 "value": "会员专享"
84 { 86 }
85 "name": "人均从低到高", 87 ]
86 "value": "人均从低到高"
87 } 88 }
88 ] 89 ]
89 }, 90 },
90 { 91 {
91 "name":'材质', 92 "name":'材质',
92 "type": 'filter', 93 "type": 'filter',
93 "submenu": [{ 94 "submenu": [{
94 "submenu": [{ 95 "submenu": [{
95 "name": "满减活动", 96 "name": "满减活动",
96 "value": "满减活动" 97 "value": "满减活动"
97 }, 98 },
98 { 99 {
99 "name": "打折优惠", 100 "name": "打折优惠",
100 "value": "打折优惠" 101 "value": "打折优惠"
101 }, 102 },
102 { 103 {
103 "name": "会员专享", 104 "name": "会员专享",
104 "value": "会员专享" 105 "value": "会员专享"
105 } 106 }
106 ] 107 ]
107 } 108 }
108 ] 109 ]
109 }, 110 },
110 { 111 {
111 "name":'折扣', 112 "name":'折扣',
112 "type": 'filter', 113 "type": 'filter',
113 "submenu": [{ 114 "submenu": [{
114 "name": "折扣(多选)", 115 "name": "折扣(多选)",
115 "submenu": [{ 116 "submenu": [{
116 "name": "满减活动", 117 "name": "满减活动",
117 "value": "满减活动" 118 "value": "满减活动"
118 }, 119 },
119 { 120 {
120 "name": "打折优惠", 121 "name": "打折优惠",
121 "value": "打折优惠" 122 "value": "打折优惠"
122 }, 123 },
123 { 124 {
124 "name": "会员专享", 125 "name": "会员专享",
125 "value": "会员专享" 126 "value": "会员专享"
126 } 127 }
127 ] 128 ]
128 } 129 }
129 ] 130 ]
130 } 131 }
131 ] 132 ]
132 133
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @7a2dda4
1 <template> 1 <template>
2 <view class="card" @tap="toGoods(goods.goods_id,goods.goodType)"> 2 <view class="card" @tap="toGoods(goods.id,goods.goodType)">
3 <image mode="widthFix" :src="goods.img" ></image> 3 <image mode="widthFix" :src="goods.imgurl" ></image>
4 <view class="name">{{goods.name}}</view> 4 <view class="name">{{goods.name}}</view>
5 <view class="info"> 5 <view class="info">
6 <view class="priceBox"> 6 <view class="priceBox">
7 <view class="price">{{goods.price}}</view> 7 <view class="price">{{goods.price}}</view>
8 <view class="originCost"> 8 <view class="originCost">
9 {{goods.originCost}} 9 {{goods.rsSon.Max_Price}}
10 </view> 10 </view>
11 </view> 11 </view>
12 <view class="slogan">{{goods.slogan}}</view> 12 <view class="trade_num">{{goods.trade_num}}人购买</view>
13 </view> 13 </view>
14 </view> 14 </view>
15 </template> 15 </template>
16 16
17 <script> 17 <script>
18 export default { 18 export default {
19 props: { 19 props: {
20 /** 20 /**
21 * 商品数据 21 * 商品数据
22 */ 22 */
23 goods: { 23 goods: {
24 goods_id: Number, 24 id: Number,
25 img: String, 25 imgurl: String,
26 name: String, 26 name: String,
27 rsSon:Object,
27 originCost:String, 28 originCost:String,
28 price: String, 29 price: String,
29 slogan:String, 30 trade_num:String,
30 goodType:String, 31 goodType:String,
31 } 32 }
32 33
33 }, 34 },
34 created() { 35 created() {
35 console.log(this.goods) 36 // console.log(this.goods)
36 }, 37 },
37 data() { 38 data() {
38 return { 39 return {
39 40
40 }; 41 };
41 }, 42 },
42 methods:{ 43 methods:{
43 toGoods(id,type){ 44 toGoods(id,type){
44 // console.log('toGoods =====> id======>', id) 45 uni.navigateTo({
45 // console.log(type) 46 url: `../frameDetail/frameDetail?oderId=`+id,
47 success: res => {},
48 fail: () => {},
49 complete: () => {}
50 });
51 console.log('toGoods =====> id:'+id +"======>type:"+type)
46 switch(type){ 52 switch(type){
47 case 1: 53 case 1:
48 uni.navigateTo({ 54 uni.navigateTo({
49 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 55 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
50 success: res => {}, 56 success: res => {},
51 fail: () => {}, 57 fail: () => {},
52 complete: () => {} 58 complete: () => {}
53 }); 59 });
54 break; 60 break;
55 case 2: 61 case 2:
56 uni.navigateTo({ 62 uni.navigateTo({
57 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 63 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
58 success: res => {}, 64 success: res => {},
59 fail: () => {}, 65 fail: () => {},
60 complete: () => {} 66 complete: () => {}
61 }); 67 });
62 break; 68 break;
63 case 3: 69 case 3:
64 uni.navigateTo({ 70 uni.navigateTo({
65 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 71 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
66 success: res => {}, 72 success: res => {},
67 fail: () => {}, 73 fail: () => {},
68 complete: () => {} 74 complete: () => {}
69 }); 75 });
70 break; 76 break;
71 case 4: 77 case 4:
72 uni.navigateTo({ 78 uni.navigateTo({
73 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 79 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
74 success: res => {}, 80 success: res => {},
75 fail: () => {}, 81 fail: () => {},
76 complete: () => {} 82 complete: () => {}
77 }); 83 });
78 break; 84 break;
79 default : 85 default :
80 break 86 break
81 } 87 }
82 } 88 }
83 } 89 }
84 } 90 }
85 </script> 91 </script>
86 92
87 <style lang="scss"> 93 <style lang="scss">
88 image{ 94 image{
89 width: 100%; 95 width: 100%;
90 height: 120rpx; 96 height: 120rpx;
91 } 97 }
92 .name{ 98 .name{
93 width: 92%; 99 width: 92%;
94 height: 54rpx; 100 height: 54rpx;
95 padding: 5px 4%; 101 padding: 5px 4%;
96 display: -webkit-box; 102 display: -webkit-box;
97 -webkit-box-orient: vertical; 103 -webkit-box-orient: vertical;
98 -webkit-line-clamp: 2; 104 -webkit-line-clamp: 2;
99 text-align: justify; 105 text-align: justify;
100 overflow: hidden; 106 overflow: hidden;
101 font-size: 24rpx; 107 font-size: 24rpx;
102 color: #333333; 108 color: #333333;
103 } 109 }
104 .info{ 110 .info{
105 display: flex; 111 display: flex;
106 justify-content: space-between; 112 justify-content: space-between;
107 align-items: center; 113 align-items: center;
108 width: 92%; 114 width: 92%;
109 padding: 5px 4% 5px 4%; 115 padding: 5px 4% 5px 4%;
110 .priceBox{ 116 .priceBox{
111 display: flex; 117 display: flex;
112 justify-content: space-between; 118 justify-content: space-between;
113 align-items: center; 119 align-items: center;
114 .price{ 120 .price{
115 color: #EB5D3B; 121 color: #EB5D3B;
116 font-size: 28rpx; 122 font-size: 28rpx;
117 font-weight: 600; 123 font-weight: 600;
118 margin-right: 10rpx; 124 margin-right: 10rpx;
119 } 125 }
120 .originCost{ 126 .originCost{
121 text-decoration:line-through; 127 text-decoration:line-through;
122 color: #999999; 128 color: #999999;
123 font-size: 20rpx; 129 font-size: 20rpx;
124 } 130 }
125 131
126 } 132 }
127 .slogan{ 133 .trade_num{
128 color: #999999; 134 color: #999999;
129 font-size: 20rpx; 135 font-size: 20rpx;
130 } 136 }
131 } 137 }
132 </style> 138 </style>
133 139
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @7a2dda4
1 <template> 1 <template>
2 <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard"> 2 <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
3 <view class="nav"> 3 <view class="nav">
4 <block v-for="(item,index) in menu" :key="index"> 4 <block v-for="(item,index) in menu" :key="index">
5 <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)"> 5 <view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
6 <text class="name">{{item.name}}</text> 6 <text class="name">{{item.name}}</text>
7 <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text> 7 <text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
8 </view> 8 </view>
9 </block> 9 </block>
10 </view> 10 </view>
11 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view> 11 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
12 <block v-for="(page,page_index) in subData" :key="page_index"> 12 <block v-for="(page,page_index) in subData" :key="page_index">
13 <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"> 13 <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
14 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 14 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
15 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']" 15 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
16 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto"> 16 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
17 <block v-for="(sub,index) in page.submenu" :key="index"> 17 <block v-for="(sub,index) in page.submenu" :key="index">
18 <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)"> 18 <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
19 <view class="menu-name"> 19 <view class="menu-name">
20 <text>{{sub.name}}</text> 20 <text>{{sub.name}}</text>
21 <text class="iconfont selected"></text> 21 <text class="iconfont selected"></text>
22 </view> 22 </view>
23 </view> 23 </view>
24 </block> 24 </block>
25 </scroll-view> 25 </scroll-view>
26 <block v-for="(sub,index) in page.submenu" :key="index"> 26 <block v-for="(sub,index) in page.submenu" :key="index">
27 <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 27 <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
28 :scroll-into-view="'second_id'+secondScrollInto"> 28 :scroll-into-view="'second_id'+secondScrollInto">
29 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index"> 29 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
30 <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}"> 30 <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
31 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"> 31 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
32 <text>{{sub_second.name}}</text> 32 <text>{{sub_second.name}}</text>
33 <text class="iconfont selected"></text> 33 <text class="iconfont selected"></text>
34 </view> 34 </view>
35 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"> 35 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
36 <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index"> 36 <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
37 <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 37 <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
38 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text> 38 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
39 <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text 39 <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
40 class="iconfont triangle"></text></text> 40 class="iconfont triangle"></text></text>
41 </block> 41 </block>
42 </view> 42 </view>
43 </view> 43 </view>
44 </block> 44 </block>
45 </scroll-view> 45 </scroll-view>
46 </block> 46 </block>
47 </block> 47 </block>
48 <block v-if="page.type=='filter'"> 48 <block v-if="page.type=='filter'||page.type=='checkbox'">
49 <view class="filter"> 49 <view class="filter">
50 <scroll-view class="menu-box" :scroll-y="true"> 50 <scroll-view class="menu-box" :scroll-y="true">
51 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 51 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
52 <view class="title">{{box.name}}</view> 52 <view class="title">{{box.name}}</view>
53 <view class="labels"> 53 <view class="labels">
54 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)" 54 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
55 :class="{'on':label.selected}">{{label.name}}</view> 55 :class="{'on':label.selected}">{{label.name}}</view>
56 </view> 56 </view>
57 </view> 57 </view>
58 </scroll-view> 58 </scroll-view>
59 <view class="btn-box"> 59 <view class="btn-box">
60 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 60 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
61 <view class="submit" @tap="setFilterData(page_index)">确定</view> 61 <view class="submit" @tap="setFilterData(page_index)">确定</view>
62 </view> 62 </view>
63 </view> 63 </view>
64 </block> 64 </block>
65 <block v-if="page.type=='radio'"> 65 <block v-if="page.type=='radio'">
66 <view class="filter"> 66 <view class="filter">
67 <scroll-view class="menu-box" :scroll-y="true"> 67 <scroll-view class="menu-box" :scroll-y="true">
68 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 68 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
69 <view class="title">{{box.name}}</view> 69 <view class="title">{{box.name}}</view>
70 <view class="labels"> 70 <view class="labels">
71 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)" 71 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
72 :class="{'on':label.selected}">{{label.name}}</view> 72 :class="{'on':label.selected}">{{label.name}}</view>
73 </view> 73 </view>
74 </view> 74 </view>
75 </scroll-view> 75 </scroll-view>
76 <view class="btn-box"> 76 <view class="btn-box">
77 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 77 <view class="reset" @tap="resetFilterData(page_index)">重置</view>
78 <view class="submit" @tap="setFilterData(page_index)">确定</view> 78 <view class="submit" @tap="setFilterData(page_index)">确定</view>
79 </view> 79 </view>
80 </view> 80 </view>
81 </block> 81 </block>
82 </view> 82 </view>
83 </block> 83 </block>
84 </view> 84 </view>
85 </template> 85 </template>
86 <script> 86 <script>
87 export default { 87 export default {
88 data() { 88 data() {
89 return { 89 return {
90 subData: [], //菜单数据 90 subData: [], //菜单数据
91 menu: [], //顶部横条数据 91 menu: [], //顶部横条数据
92 showPage: -1, //菜单页面显示/隐藏动画控制 92 showPage: -1, //菜单页面显示/隐藏动画控制
93 pageState: [], //页面的状态 93 pageState: [], //页面的状态
94 activeMenuArr: [], //UI状态 94 activeMenuArr: [], //UI状态
95 shadowActiveMenuArr: [], //记录选中 95 shadowActiveMenuArr: [], //记录选中
96 defaultActive:[], 96 defaultActive:[],
97 triangleDeg: [], //小三角形的翻转动画控制 97 triangleDeg: [], //小三角形的翻转动画控制
98 isShowMask: false, //遮罩层显示/隐藏动画控制 98 isShowMask: false, //遮罩层显示/隐藏动画控制
99 maskVisibility: false, //遮罩层显示/隐藏状态 99 maskVisibility: false, //遮罩层显示/隐藏状态
100 //滚动区域定位 100 //滚动区域定位
101 firstScrollInto: 0, 101 firstScrollInto: 0,
102 secondScrollInto: 0, 102 secondScrollInto: 0,
103 componentTop:0 ,//组件top 103 componentTop:0 ,//组件top
104 isReadNewSelect:false 104 isReadNewSelect:false
105 } 105 }
106 }, 106 },
107 props: { 107 props: {
108 filterData: { 108 filterData: {
109 value: Array, 109 value: Array,
110 default: [] 110 default: []
111 }, 111 },
112 defaultSelected:{ 112 defaultSelected:{
113 value: Array, 113 value: Array,
114 default: [] 114 default: []
115 }, 115 },
116 updateMenuName:{ 116 updateMenuName:{
117 value: Boolean, 117 value: Boolean,
118 default: true 118 default: true
119 }, 119 },
120 dataFormat:{ 120 dataFormat:{
121 value: String, 121 value: String,
122 default: 'Array' 122 default: 'Array'
123 } 123 }
124 }, 124 },
125 watch: { 125 watch: {
126 filterData: { 126 filterData: {
127 handler() { 127 handler() {
128 this.initMenu(); //filterData重新赋值初始化菜单 128 this.initMenu(); //filterData重新赋值初始化菜单
129 }, 129 },
130 immediate: true 130 immediate: true
131 }, 131 },
132 defaultSelected(newVal) { 132 defaultSelected(newVal) {
133 if(newVal.length==0){ 133 if(newVal.length==0){
134 return; 134 return;
135 } 135 }
136 this.defaultActive = JSON.parse(JSON.stringify(newVal)); 136 this.defaultActive = JSON.parse(JSON.stringify(newVal));
137 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)); 137 this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
138 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)); 138 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
139 if(this.updateMenuName){ 139 if(this.updateMenuName){
140 this.setMenuName(); 140 this.setMenuName();
141 } 141 }
142 } 142 }
143 }, 143 },
144 methods: { 144 methods: {
145 initMenu() { 145 initMenu() {
146 let tmpMenuActiveArr=[]; 146 let tmpMenuActiveArr=[];
147 let tmpMenu=[]; 147 let tmpMenu=[];
148 for (let i = 0; i < this.filterData.length; i++) { 148 for (let i = 0; i < this.filterData.length; i++) {
149 let tmpitem = this.filterData[i]; 149 let tmpitem = this.filterData[i];
150 tmpMenu.push({ 150 tmpMenu.push({
151 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 151 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
152 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name), 152 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
153 type: tmpitem.type 153 type: tmpitem.type
154 }); 154 });
155 //初始化选中项数组-ui状态 155 //初始化选中项数组-ui状态
156 tmpMenuActiveArr.push(this.processActive(tmpitem)); 156 tmpMenuActiveArr.push(this.processActive(tmpitem));
157 //初始化角度数组 157 //初始化角度数组
158 this.triangleDeg.push(0); 158 this.triangleDeg.push(0);
159 //初始化控制显示状态数组 159 //初始化控制显示状态数组
160 this.pageState.push(false); 160 this.pageState.push(false);
161 //递归处理子菜单数据 161 //递归处理子菜单数据
162 tmpitem = this.processSubMenu(tmpitem); 162 tmpitem = this.processSubMenu(tmpitem);
163 this.filterData[i] = tmpitem; 163 this.filterData[i] = tmpitem;
164 } 164 }
165 this.menu = tmpMenu; 165 this.menu = tmpMenu;
166 //初始化选中项数组 166 //初始化选中项数组
167 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr; 167 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
168 this.defaultActive = []; 168 this.defaultActive = [];
169 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 169 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
170 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 170 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
171 //加载菜单数据 171 //加载菜单数据
172 this.subData = this.filterData; 172 this.subData = this.filterData;
173 //设定顶部菜单名字 173 //设定顶部菜单名字
174 if(this.updateMenuName){ 174 if(this.updateMenuName){
175 this.setMenuName(); 175 this.setMenuName();
176 } 176 }
177 }, 177 },
178 setMenuName(){ 178 setMenuName(){
179 for(var i=0;i<this.activeMenuArr.length;i++){ 179 for(var i=0;i<this.activeMenuArr.length;i++){
180 let row = this.activeMenuArr[i]; 180 let row = this.activeMenuArr[i];
181 if (typeof(row[0]) != 'object'){ 181 if (typeof(row[0]) != 'object'){
182 var tmpsub = false; 182 var tmpsub = false;
183 if(row.length>0 && row[0]!=null){ 183 if(row.length>0 && row[0]!=null){
184 tmpsub = this.subData[i].submenu[row[0]]; 184 tmpsub = this.subData[i].submenu[row[0]];
185 if(row.length>1 && row[1]!=null){ 185 if(row.length>1 && row[1]!=null){
186 tmpsub = tmpsub.submenu[row[1]]; 186 tmpsub = tmpsub.submenu[row[1]];
187 if(row.length>2 && row[2]!=null){ 187 if(row.length>2 && row[2]!=null){
188 tmpsub = tmpsub.submenu[row[2]]; 188 tmpsub = tmpsub.submenu[row[2]];
189 } 189 }
190 } 190 }
191 }else{ 191 }else{
192 tmpsub = false; 192 tmpsub = false;
193 } 193 }
194 if(tmpsub){ 194 if(tmpsub){
195 this.menu[i].name = tmpsub.name; 195 this.menu[i].name = tmpsub.name;
196 } 196 }
197 } 197 }
198 } 198 }
199 }, 199 },
200 //展开更多 200 //展开更多
201 showMoreSub(index) { 201 showMoreSub(index) {
202 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true; 202 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
203 this.$forceUpdate(); 203 this.$forceUpdate();
204 }, 204 },
205 //选中 205 //选中
206 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) { 206 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
207 //读取记录 207 //读取记录
208 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] == 208 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
209 level1_index) { 209 level1_index) {
210 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))); 210 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
211 } else { 211 } else {
212 this.activeMenuArr[page_index].splice(0, 1, level1_index); 212 this.activeMenuArr[page_index].splice(0, 1, level1_index);
213 (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1); 213 (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
214 (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1); 214 (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
215 } 215 }
216 //写入结果 216 //写入结果
217 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 217 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
218 ) { 218 ) {
219 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]; 219 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
220 if(this.updateMenuName){ 220 if(this.updateMenuName){
221 this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name; 221 this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
222 } 222 }
223 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 223 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
224 this.togglePage(this.showPage); 224 this.togglePage(this.showPage);
225 } 225 }
226 }, 226 },
227 //写入结果，筛选 227 //写入结果，筛选
228 setFilterData(page_index) { 228 setFilterData(page_index) {
229 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 229 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
230 this.togglePage(this.showPage); 230 this.togglePage(this.showPage);
231 }, 231 },
232 //重置结果和ui，筛选 232 //重置结果和ui，筛选
233 resetFilterData(page_index) { 233 resetFilterData(page_index) {
234 let tmpArr = []; 234 let tmpArr = [];
235 let level = this.shadowActiveMenuArr[page_index].length; 235 let level = this.shadowActiveMenuArr[page_index].length;
236 while (level > 0) { 236 while (level > 0) {
237 tmpArr.push([]); 237 tmpArr.push([]);
238 let box = this.subData[page_index].submenu[level - 1].submenu; 238 let box = this.subData[page_index].submenu[level - 1].submenu;
239 for (let i = 0; i < box.length; i++) { 239 for (let i = 0; i < box.length; i++) {
240 this.subData[page_index].submenu[level - 1].submenu[i].selected = false; 240 this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
241 } 241 }
242 level--; 242 level--;
243 } 243 }
244 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)); 244 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
245 this.$forceUpdate(); 245 this.$forceUpdate();
246 }, 246 },
247 //选中筛选类label-UI状态 247 //选中筛选类label-UI状态
248 selectFilterLabel(page_index, box_index, label_index) { 248 selectFilterLabel(page_index, box_index, label_index) {
249 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index); 249 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
250 if (find_index > -1) { 250 if (find_index > -1) {
251 this.activeMenuArr[page_index][box_index].splice(find_index, 1); 251 this.activeMenuArr[page_index][box_index].splice(find_index, 1);
252 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false; 252 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
253 } else { 253 } else {
254 this.activeMenuArr[page_index][box_index].push(label_index); 254 this.activeMenuArr[page_index][box_index].push(label_index);
255 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 255 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
256 } 256 }
257 this.$forceUpdate(); 257 this.$forceUpdate();
258 }, 258 },
259 //选中单选类label-UI状态 259 //选中单选类label-UI状态
260 selectRadioLabel(page_index, box_index, label_index) { 260 selectRadioLabel(page_index, box_index, label_index) {
261 261
262 let activeIndex = this.activeMenuArr[page_index][box_index][0]; 262 let activeIndex = this.activeMenuArr[page_index][box_index][0];
263 if(activeIndex == label_index){ 263 if(activeIndex == label_index){
264 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false; 264 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
265 this.activeMenuArr[page_index][box_index][0] = null; 265 this.activeMenuArr[page_index][box_index][0] = null;
266 }else{ 266 }else{
267 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){ 267 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
268 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false; 268 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
269 } 269 }
270 270
271 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 271 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
272 this.activeMenuArr[page_index][box_index][0] = label_index; 272 this.activeMenuArr[page_index][box_index][0] = label_index;
273 } 273 }
274 this.$forceUpdate(); 274 this.$forceUpdate();
275 }, 275 },
276 //菜单开关 276 //菜单开关
277 togglePage(index) { 277 togglePage(index) {
278 if (index == this.showPage) { 278 if (index == this.showPage) {
279 this.hidePageLayer(true); 279 this.hidePageLayer(true);
280 this.hideMask(); 280 this.hideMask();
281 this.showPage = -1; 281 this.showPage = -1;
282 } else { 282 } else {
283 if (this.showPage > -1) { 283 if (this.showPage > -1) {
284 this.hidePageLayer(false); 284 this.hidePageLayer(false);
285 } 285 }
286 this.showPageLayer(index); 286 this.showPageLayer(index);
287 this.showMask(); 287 this.showMask();
288 } 288 }
289 }, 289 },
290 //hide遮罩层 290 //hide遮罩层
291 hideMask() { 291 hideMask() {
292 this.isShowMask = false; 292 this.isShowMask = false;
293 setTimeout(() => { 293 setTimeout(() => {
294 this.maskVisibility = false; 294 this.maskVisibility = false;
295 }, 200); 295 }, 200);
296 }, 296 },
297 //show遮罩层 297 //show遮罩层
298 showMask() { 298 showMask() {
299 this.maskVisibility = true; 299 this.maskVisibility = true;
300 this.$nextTick(() => { 300 this.$nextTick(() => {
301 setTimeout(() => { 301 setTimeout(() => {
302 this.isShowMask = true; 302 this.isShowMask = true;
303 }, 0); 303 }, 0);
304 }) 304 })
305 }, 305 },
306 //hide菜单页 306 //hide菜单页
307 hidePageLayer(isAnimation) { 307 hidePageLayer(isAnimation) {
308 this.triangleDeg[this.showPage] = 0; 308 this.triangleDeg[this.showPage] = 0;
309 let tmpIndex = this.showPage; 309 let tmpIndex = this.showPage;
310 if (isAnimation) { 310 if (isAnimation) {
311 setTimeout(() => { 311 setTimeout(() => {
312 this.pageState.splice(tmpIndex, 1, false); 312 this.pageState.splice(tmpIndex, 1, false);
313 }, 200); 313 }, 200);
314 this.confirm(); 314 this.confirm();
315 } else { 315 } else {
316 this.pageState.splice(tmpIndex, 1, false) 316 this.pageState.splice(tmpIndex, 1, false)
317 } 317 }
318 this.firstScrollInto = null; 318 this.firstScrollInto = null;
319 this.secondScrollInto = null; 319 this.secondScrollInto = null;
320 }, 320 },
321 confirm() { 321 confirm() {
322 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 322 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
323 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)); 323 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
324 324
325 //对结果做一下处理 325 //对结果做一下处理
326 index.forEach((item, i) => { 326 index.forEach((item, i) => {
327 if (typeof(item[0]) == 'object') { 327 if (typeof(item[0]) == 'object') {
328 //针对筛选结果过一个排序 328 //针对筛选结果过一个排序
329 item.forEach((s, j) => { 329 item.forEach((s, j) => {
330 if(s!=null){ 330 if(s!=null){
331 s.sort((val1, val2) => { 331 s.sort((val1, val2) => {
332 return val1 - val2; 332 return val1 - val2;
333 }); 333 });
334 item[j] = s; 334 item[j] = s;
335 s.forEach((v, k) => { 335 s.forEach((v, k) => {
336 value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value; 336 value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
337 if(this.subData[i].type == 'radio' && value[i][j][k] == null){ 337 if(this.subData[i].type == 'radio' && value[i][j][k] == null){
338 value[i][j] = []; 338 value[i][j] = [];
339 index[i][j] = []; 339 index[i][j] = [];
340 } 340 }
341 }); 341 });
342 } 342 }
343 }); 343 });
344 }else{ 344 }else{
345 let submenu = this.subData[i].submenu[item[0]]; 345 let submenu = this.subData[i].submenu[item[0]];
346 // console.log(this.subData[i])
346 value[i][0] = submenu.value; 347 value[i][0] = submenu.value;
347 if(value[i].length>=2 && item[1]!=null){ 348 if(value[i].length>=2 && item[1]!=null){
348 if(submenu.submenu.length>0){ 349 if(submenu.submenu.length>0){
349 submenu = submenu.submenu[item[1]]; 350 submenu = submenu.submenu[item[1]];
350 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null; 351 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
351 }else{ 352 }else{
352 value[i][1] = null 353 value[i][1] = null
353 } 354 }
354 if(value[i].length>=3 && item[2]!=null){ 355 if(value[i].length>=3 && item[2]!=null){
355 if(submenu.submenu.length>0){ 356 if(submenu.submenu.length>0){
356 submenu = submenu.submenu[item[2]]; 357 submenu = submenu.submenu[item[2]];
357 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null; 358 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
358 }else{ 359 }else{
359 value[i][2] = null; 360 value[i][2] = null;
360 } 361 }
361 } 362 }
362 } 363 }
363 } 364 }
364 index[i] = item; 365 index[i] = item;
365 366
366 }); 367 });
367 // 输出 368 // 输出
368 this.$emit('confirm', { 369 this.$emit('confirm', {
369 index: index, 370 index: index,
370 value: value 371 value: value
371 }); 372 });
372 }, 373 },
373 //show菜单页 374 //show菜单页
374 showPageLayer(index) { 375 showPageLayer(index) {
375 this.processPage(index); 376 this.processPage(index);
376 this.pageState.splice(index, 1, true); 377 this.pageState.splice(index, 1, true);
377 this.$nextTick(() => { 378 this.$nextTick(() => {
378 setTimeout(() => { 379 setTimeout(() => {
379 this.showPage = index; 380 this.showPage = index;
380 }, 0); 381 }, 0);
381 }) 382 })
382 this.triangleDeg[index] = 180; 383 this.triangleDeg[index] = 180;
383 }, 384 },
384 reloadActiveMenuArr(){ 385 reloadActiveMenuArr(){
385 for (let i = 0; i < this.filterData.length; i++) { 386 for (let i = 0; i < this.filterData.length; i++) {
386 let tmpitem = this.filterData[i]; 387 let tmpitem = this.filterData[i];
387 let tmpArr = this.processActive(tmpitem); 388 let tmpArr = this.processActive(tmpitem);
388 tmpitem = this.processSubMenu(tmpitem); 389 tmpitem = this.processSubMenu(tmpitem);
389 if(this.activeMenuArr[i].length!=tmpArr.length){ 390 if(this.activeMenuArr[i].length!=tmpArr.length){
390 this.filterData[i] = tmpitem; 391 this.filterData[i] = tmpitem;
391 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 392 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
392 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))); 393 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
393 } 394 }
394 } 395 }
395 this.subData = this.filterData; 396 this.subData = this.filterData;
396 this.$forceUpdate(); 397 this.$forceUpdate();
397 }, 398 },
398 processPage(index) { 399 processPage(index) {
399 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 400 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
400 this.reloadActiveMenuArr(); 401 this.reloadActiveMenuArr();
401 //重置UI控制数组 402 //重置UI控制数组
402 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))); 403 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
403 if (this.menu[index].type == 'filter') { 404 if (this.menu[index].type == 'filter') {
404 //重载筛选页选中状态 405 //重载筛选页选中状态
405 let level = this.shadowActiveMenuArr[index].length; 406 let level = this.shadowActiveMenuArr[index].length;
406 for (let i = 0; i < level; i++) { 407 for (let i = 0; i < level; i++) {
407 let box = this.subData[index].submenu[i].submenu; 408 let box = this.subData[index].submenu[i].submenu;
408 for (let j = 0; j < box.length; j++) { 409 for (let j = 0; j < box.length; j++) {
409 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 410 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
410 this.subData[index].submenu[i].submenu[j].selected = true; 411 this.subData[index].submenu[i].submenu[j].selected = true;
411 } else { 412 } else {
412 this.subData[index].submenu[i].submenu[j].selected = false; 413 this.subData[index].submenu[i].submenu[j].selected = false;
413 } 414 }
414 } 415 }
415 } 416 }
416 } else if (this.menu[index].type == 'hierarchy') { 417 } else if (this.menu[index].type == 'hierarchy') {
417 this.$nextTick(() => { 418 this.$nextTick(() => {
418 setTimeout(() => { 419 setTimeout(() => {
419 //滚动到选中项 420 //滚动到选中项
420 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]); 421 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
421 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]); 422 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
422 }, 0); 423 }, 0);
423 }) 424 })
424 } else if (this.menu[index].type == 'radio') { 425 } else if (this.menu[index].type == 'radio') {
425 //重载筛选页选中状态 426 //重载筛选页选中状态
426 let level = this.shadowActiveMenuArr[index].length; 427 let level = this.shadowActiveMenuArr[index].length;
427 for (let i = 0; i < level; i++) { 428 for (let i = 0; i < level; i++) {
428 let box = this.subData[index].submenu[i].submenu; 429 let box = this.subData[index].submenu[i].submenu;
429 for (let j = 0; j < box.length; j++) { 430 for (let j = 0; j < box.length; j++) {
430 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 431 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
431 this.subData[index].submenu[i].submenu[j].selected = true; 432 this.subData[index].submenu[i].submenu[j].selected = true;
432 } else { 433 } else {
433 this.subData[index].submenu[i].submenu[j].selected = false; 434 this.subData[index].submenu[i].submenu[j].selected = false;
434 } 435 }
435 } 436 }
436 } 437 }
437 } 438 }
438 }, 439 },
439 processActive(tmpitem) { 440 processActive(tmpitem) {
440 let tmpArr = [] 441 let tmpArr = []
441 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) { 442 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
442 let level = this.getMaxFloor(tmpitem.submenu); 443 let level = this.getMaxFloor(tmpitem.submenu);
443 while (level > 0) { 444 while (level > 0) {
444 tmpArr.push(0); 445 tmpArr.push(0);
445 level--; 446 level--;
446 } 447 }
447 } else if (tmpitem.type == 'filter') { 448 } else if (tmpitem.type == 'filter') {
448 let level = tmpitem.submenu.length; 449 let level = tmpitem.submenu.length;
449 while (level > 0) { 450 while (level > 0) {
450 tmpArr.push([]); 451 tmpArr.push([]);
451 level--; 452 level--;
452 } 453 }
453 } else if (tmpitem.type == 'radio') { 454 } else if (tmpitem.type == 'radio') {
454 let level = tmpitem.submenu.length; 455 let level = tmpitem.submenu.length;
455 while (level > 0) { 456 while (level > 0) {
456 tmpArr.push([]); 457 tmpArr.push([]);
457 level--; 458 level--;
458 } 459 }
459 } 460 }
460 return tmpArr; 461 return tmpArr;
461 }, 462 },
462 processSubMenu(menu) { 463 processSubMenu(menu) {
463 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 464 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
464 for (let i = 0; i < menu.submenu.length; i++) { 465 for (let i = 0; i < menu.submenu.length; i++) {
465 menu.submenu[i] = this.processSubMenu(menu.submenu[i]); 466 menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
466 } 467 }
467 } else { 468 } else {
468 menu.submenu = []; 469 menu.submenu = [];
469 } 470 }
470 return menu; 471 return menu;
471 }, 472 },
472 //计算菜单层级 473 //计算菜单层级
473 getMaxFloor(treeData) { 474 getMaxFloor(treeData) {
474 let floor = 0 475 let floor = 0
475 let max = 0 476 let max = 0
476 function each(data, floor) { 477 function each(data, floor) {
477 data.forEach(e => { 478 data.forEach(e => {
478 max = floor > max ? floor : max; 479 max = floor > max ? floor : max;
479 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 480 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
480 each(e.submenu, floor + 1) 481 each(e.submenu, floor + 1)
481 } 482 }
482 }) 483 })
483 } 484 }
484 each(treeData, 1) 485 each(treeData, 1)
485 return max; 486 return max;
486 }, 487 },
487 discard() { 488 discard() {
488 489
489 } 490 }
490 } 491 }
491 } 492 }
492 </script> 493 </script>
493 <style lang="scss"> 494 <style lang="scss">
494 .HMfilterDropdown { 495 .HMfilterDropdown {
495 flex-shrink: 0; 496 flex-shrink: 0;
496 width: 100%; 497 width: 100%;
497 height: 44px; 498 height: 44px;
498 position: fixed; 499 position: fixed;
499 z-index: 997; 500 z-index: 997;
500 flex-wrap: nowrap; 501 flex-wrap: nowrap;
501 display: flex; 502 display: flex;
502 flex-direction: row; 503 flex-direction: row;
503 top: var(--window-top); 504 top: var(--window-top);
504 left:0; 505 left:0;
505 view { 506 view {
506 display: flex; 507 display: flex;
507 flex-wrap: nowrap; 508 flex-wrap: nowrap;
508 } 509 }
509 } 510 }
510 .region { 511 .region {
511 flex: 1; 512 flex: 1;
512 height: 44px; 513 height: 44px;
513 } 514 }
514 .nav { 515 .nav {
515 width: 100%; 516 width: 100%;
516 height: 44px; 517 height: 44px;
517 border-bottom: solid 1rpx #eee; 518 border-bottom: solid 1rpx #eee;
518 z-index: 12; 519 z-index: 12;
519 background-color: #ffffff; 520 background-color: #ffffff;
520 flex-direction: row; 521 flex-direction: row;
521 .first-menu { 522 .first-menu {
522 width: 100%; 523 width: 100%;
523 font-size: 13px; 524 font-size: 13px;
524 color: #333333; 525 color: #333333;
525 flex-direction: row; 526 flex-direction: row;
526 align-items: center; 527 align-items: center;
527 justify-content: center; 528 justify-content: center;
528 transition: color .2s linear; 529 transition: color .2s linear;
529 530
530 &.on { 531 &.on {
531 color: #FF6B4A; 532 color: #FF6B4A;
532 533
533 .iconfont { 534 .iconfont {
534 color: #FF6B4A; 535 color: #FF6B4A;
535 } 536 }
536 } 537 }
537 .name { 538 .name {
538 height: 20px; 539 height: 20px;
539 text-align: center; 540 text-align: center;
540 text-overflow: clip; 541 text-overflow: clip;
541 overflow: hidden; 542 overflow: hidden;
542 } 543 }
543 .iconfont { 544 .iconfont {
544 width: 13px; 545 width: 13px;
545 height: 13px; 546 height: 13px;
546 align-items: center; 547 align-items: center;
547 justify-content: center; 548 justify-content: center;
548 transition: transform .2s linear, color .2s linear; 549 transition: transform .2s linear, color .2s linear;
549 } 550 }
550 } 551 }
551 } 552 }
552 .sub-menu-class { 553 .sub-menu-class {
553 width: 100%; 554 width: 100%;
554 position: absolute; 555 position: absolute;
555 left: 0; 556 left: 0;
556 transform: translate3d(0, - 100%, 0); 557 transform: translate3d(0, - 100%, 0);
557 max-height: 345px; 558 max-height: 345px;
558 background-color: #ffffff; 559 background-color: #ffffff;
559 z-index: 11; 560 z-index: 11;
560 box-shadow: 0 5px 5px rgba(0, 0, 0, .1); 561 box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
561 overflow: hidden; 562 overflow: hidden;
562 flex-direction: row; 563 flex-direction: row;
563 transition: transform .15s linear; 564 transition: transform .15s linear;
564 &.hide { 565 &.hide {
565 display: none; 566 display: none;
566 } 567 }
567 568
568 &.show { 569 &.show {
569 transform: translate3d(0, calc(44px + 1rpx), 0); 570 transform: translate3d(0, calc(44px + 1rpx), 0);
570 } 571 }
571 } 572 }
572 .sub-menu-list { 573 .sub-menu-list {
573 width: 100%; 574 width: 100%;
574 height: 345px; 575 height: 345px;
575 flex-direction: column; 576 flex-direction: column;
576 .sub-menu { 577 .sub-menu {
577 min-height: 44px; 578 min-height: 44px;
578 font-size: 13px; 579 font-size: 13px;
579 flex-direction: column; 580 flex-direction: column;
580 padding-right: 15px; 581 padding-right: 15px;
581 >.menu-name { 582 >.menu-name {
582 height: 44px; 583 height: 44px;
583 flex-direction: row; 584 flex-direction: row;
584 align-items: center; 585 align-items: center;
585 justify-content: space-between; 586 justify-content: space-between;
586 >.iconfont { 587 >.iconfont {
587 display: none; 588 display: none;
588 font-size: 18px; 589 font-size: 18px;
589 color: #FF6B4A; 590 color: #FF6B4A;
590 } 591 }
591 } 592 }
592 } 593 }
593 &.first { 594 &.first {
594 flex-shrink: 0; 595 flex-shrink: 0;
595 width: 236rpx; 596 width: 236rpx;
596 background-color: #f0f0f0; 597 background-color: #f0f0f0;
597 .sub-menu { 598 .sub-menu {
598 padding-left: 15px; 599 padding-left: 15px;
599 600
600 &.on { 601 &.on {
601 background-color: #fff; 602 background-color: #fff;
602 } 603 }
603 } 604 }
604 } 605 }
605 &.alone { 606 &.alone {
606 max-height: 345px; 607 max-height: 345px;
607 min-height: 170px; 608 min-height: 170px;
608 height: auto; 609 height: auto;
609 .sub-menu { 610 .sub-menu {
610 min-height: calc(44px - 1rpx); 611 min-height: calc(44px - 1rpx);
611 margin-left: 15px; 612 margin-left: 15px;
612 border-bottom: solid 1rpx #e5e5e5; 613 border-bottom: solid 1rpx #e5e5e5;
613 614
614 &.on { 615 &.on {
615 color: #FF6B4A; 616 color: #FF6B4A;
616 617
617 >.menu-name { 618 >.menu-name {
618 >.iconfont { 619 >.iconfont {
619 display: block; 620 display: block;
620 } 621 }
621 } 622 }
622 } 623 }
623 } 624 }
624 } 625 }
625 &.not-first { 626 &.not-first {
626 .sub-menu { 627 .sub-menu {
627 min-height: calc(44px - 1rpx); 628 min-height: calc(44px - 1rpx);
628 margin-left: 15px; 629 margin-left: 15px;
629 border-bottom: solid 1rpx #e5e5e5; 630 border-bottom: solid 1rpx #e5e5e5;
630 >.menu-name { 631 >.menu-name {
631 height: calc(44px - 1rpx); 632 height: calc(44px - 1rpx);
632 >.iconfont { 633 >.iconfont {
633 display: none; 634 display: none;
634 font-size: 18px; 635 font-size: 18px;
635 color: #FF6B4A; 636 color: #FF6B4A;
636 } 637 }
637 } 638 }
638 &.on { 639 &.on {
639 color: #FF6B4A; 640 color: #FF6B4A;
640 >.menu-name { 641 >.menu-name {
641 >.iconfont { 642 >.iconfont {
642 display: block; 643 display: block;
643 } 644 }
644 } 645 }
645 } 646 }
646 .more-sub-menu { 647 .more-sub-menu {
647 flex-direction: row; 648 flex-direction: row;
648 flex-wrap: wrap; 649 flex-wrap: wrap;
649 padding-bottom: 9px; 650 padding-bottom: 9px;
650 >text { 651 >text {
651 height: 30px; 652 height: 30px;
652 border-radius: 3px; 653 border-radius: 3px;
653 background-color: #f5f5f5; 654 background-color: #f5f5f5;
654 color: #9b9b9b; 655 color: #9b9b9b;
655 margin-bottom: 6px; 656 margin-bottom: 6px;
656 margin-right: 6px; 657 margin-right: 6px;
657 text-align: center; 658 text-align: center;
658 line-height: 30px; 659 line-height: 30px;
659 border: solid #f5f5f5 1rpx; 660 border: solid #f5f5f5 1rpx;
660 flex: 0 0 calc(33.33% - 6px); 661 flex: 0 0 calc(33.33% - 6px);
661 overflow: hidden; 662 overflow: hidden;
662 font-size: 12px; 663 font-size: 12px;
663 &:nth-child(3n) { 664 &:nth-child(3n) {
664 margin-right: 0; 665 margin-right: 0;
665 } 666 }
666 &.on { 667 &.on {
667 border-color: #f6c8ac; 668 border-color: #f6c8ac;
668 color: #FF6B4A; 669 color: #FF6B4A;
669 } 670 }
670 .iconfont { 671 .iconfont {
671 color: #9b9b9b; 672 color: #9b9b9b;
672 } 673 }
673 } 674 }
674 } 675 }
675 } 676 }
676 } 677 }
677 } 678 }
678 .filter { 679 .filter {
679 width: 100%; 680 width: 100%;
680 height: 345px; 681 height: 345px;
681 display: flex; 682 display: flex;
682 flex-direction: column; 683 flex-direction: column;
683 justify-content: space-between; 684 justify-content: space-between;
684 align-items: center; 685 align-items: center;
685 .menu-box { 686 .menu-box {
686 width: 698rpx; 687 width: 698rpx;
687 height: calc(345px - 75px); 688 height: calc(345px - 75px);
688 flex-shrink: 1; 689 flex-shrink: 1;
689 .box { 690 .box {
690 width: 100%; 691 width: 100%;
691 margin-top: 16px; 692 margin-top: 16px;
692 flex-direction: column; 693 flex-direction: column;
693 .title { 694 .title {
694 width: 100%; 695 width: 100%;
695 font-size: 13px; 696 font-size: 13px;
696 color: #888; 697 color: #888;
697 } 698 }
698 .labels { 699 .labels {
699 flex-direction: row; 700 flex-direction: row;
700 flex-wrap: wrap; 701 flex-wrap: wrap;
701 .on { 702 .on {
702 border-color: #FF6B4A; 703 border-color: #FF6B4A;
703 background-color: #FF6B4A; 704 background-color: #FF6B4A;
704 color: #fff; 705 color: #fff;
705 } 706 }
706 >view { 707 >view {
707 width: 148rpx; 708 width: 148rpx;
708 height: 30px; 709 height: 30px;
709 border: solid 1rpx #adadad; 710 border: solid 1rpx #adadad;
710 border-radius: 2px; 711 border-radius: 2px;
711 margin-right: 15px; 712 margin-right: 15px;
712 margin-top: 8px; 713 margin-top: 8px;
714 padding: 0 16rpx;
715 box-sizing: border-box;
713 font-size: 12px; 716 font-size: 12px;
714 flex-direction: row; 717 flex-direction: row;
715 justify-content: center; 718 justify-content: center;
716 align-items: center; 719 align-items: center;
720 overflow: hidden;
721 white-space: nowrap;
722 text-overflow: ellipsis;
717 &:nth-child(4n) { 723 &:nth-child(4n) {
718 margin-right: 0; 724 margin-right: 0;
719 } 725 }
720 } 726 }
721 } 727 }
722 } 728 }
723 } 729 }
724 .btn-box { 730 .btn-box {
725 flex-shrink: 0; 731 flex-shrink: 0;
726 width: 698rpx; 732 width: 100%;
727 height: 75px; 733 height: 75px;
728 flex-direction: row !important; 734 flex-direction: row !important;
729 align-items: center; 735 align-items: center;
730 justify-content: space-between; 736 justify-content: space-between;
731 >view { 737 >view {
732 width: 320rpx; 738 width: 320rpx;
733 height: 40px; 739 height: 40px;
734 border-radius: 40px; 740 border-radius: 40px;
735 border: solid 1rpx #FF6B4A; 741 border: solid 1rpx #FF6B4A;
736 align-items: center; 742 align-items: center;
737 justify-content: center; 743 justify-content: center;
738 } 744 }
739 .reset { 745 .reset {
740 color: #FF6B4A; 746 color: #FF6B4A;
741 } 747 }
742 .submit { 748 .submit {
743 color: #fff; 749 color: #fff;
744 background-color: #FF6B4A; 750 background-color: #FF6B4A;
745 } 751 }
746 } 752 }
747 } 753 }
748 .mask { 754 .mask {
749 z-index: 10; 755 z-index: 10;
750 position: fixed; 756 position: fixed;
751 top: 0; 757 top: 0;
752 left: 0; 758 left: 0;
753 right: 0; 759 right: 0;
754 bottom: 0; 760 bottom: 0;
755 background-color: rgba(0, 0, 0, 0); 761 background-color: rgba(0, 0, 0, 0);
756 transition: background-color .15s linear; 762 transition: background-color .15s linear;
757 &.show { 763 &.show {
758 background-color: rgba(0, 0, 0, 0.5); 764 background-color: rgba(0, 0, 0, 0.5);
759 } 765 }
760 &.hide { 766 &.hide {
761 display: none; 767 display: none;
762 } 768 }
763 } 769 }
764 /* 字体图标 */ 770 /* 字体图标 */
765 @font-face { 771 @font-face {
766 font-family: "HM-FD-font"; 772 font-family: "HM-FD-font";
767 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA='); 773 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
768 } 774 }
769 .iconfont { 775 .iconfont {
770 font-family: "HM-FD-font" !important; 776 font-family: "HM-FD-font" !important;
771 font-size: 13px; 777 font-size: 13px;
772 font-style: normal; 778 font-style: normal;
773 color: #757575; 779 color: #757575;
774 &.triangle { 780 &.triangle {
775 &:before { 781 &:before {
776 content: "\e65a"; 782 content: "\e65a";
777 } 783 }
778 } 784 }
779 &.selected { 785 &.selected {
780 &:before { 786 &:before {
781 content: "\e607"; 787 content: "\e607";
782 } 788 }
783 } 789 }
784 } 790 }
785 </style> 791 </style>
786 792
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @7a2dda4
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" > 5 <swiper class="swiperImage" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
6 <swiper-item v-for="(item) in infos" :key="item.goods_id"> 6 <swiper-item v-for="(item) in infos" :key="item.goods_id">
7 <image :src="item.img" mode="scaleToFill"></image> 7 <image :src="item.img" mode="scaleToFill"></image>
8 </swiper-item> 8 </swiper-item>
9 </swiper> 9 </swiper>
10 <view class="D1_price">￥{{price}}</view> 10 <view class="D1_price">￥{{price}}</view>
11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view> 11 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 12 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
13 </view> 13 </view>
14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4"> 14 <view class="D2" v-if="updateGoodType == 2 || updateGoodType == 4">
15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 15 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 16 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 17 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
18 </view> 18 </view>
19 <view class="D2" v-if="updateGoodType == 1"> 19 <view class="D2" v-if="updateGoodType == 1">
20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 20 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view> 21 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view> 22 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
23 </view> 23 </view>
24 <view class="D2" v-if="updateGoodType == 3"> 24 <view class="D2" v-if="updateGoodType == 3">
25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 25 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view> 26 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 27 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
28 </view> 28 </view>
29 29
30 <view class="D3"> 30 <view class="D3">
31 <view class="screenBar"> 31 <view class="screenBar">
32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" > 32 <view v-for="item in screenItems" :key="item.current" @click="tabChange(item.current)" >
33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 33 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
34 </view> 34 </view>
35 </view> 35 </view>
36 <view class="screen-item " v-if="current ===0"> 36 <view class="screen-item " v-if="current ===0">
37 <view class="D3_list"> 37 <view class="D3_list">
38 <view v-for="(item) in parameter" :key="item.key"> 38 <view v-for="(item) in parameter" :key="item.key">
39 <image class="D3_image" v-bind:src = "item.img"></image> 39 <image class="D3_image" v-bind:src = "item.img"></image>
40 <span>{{item.standard}}</span> 40 <span>{{item.standard}}</span>
41 <span>{{item.slength}}</span> 41 <span>{{item.slength}}</span>
42 </view> 42 </view>
43 </view> 43 </view>
44 </view > 44 </view >
45 <view class="screen-item " v-if="current ===1"> 45 <view class="screen-item " v-if="current ===1">
46 <view class="D3_list"> 46 <view class="D3_list">
47 <view>主体</view> 47 <view>主体</view>
48 <view>商品产地：韩国</view> 48 <view>商品产地：韩国</view>
49 <view>包装清单：彩色隐形 * 1</view> 49 <view>包装清单：彩色隐形 * 1</view>
50 </view> 50 </view>
51 </view > 51 </view >
52 <view class="screen-item " v-if="current ===2"> 52 <view class="screen-item " v-if="current ===2">
53 <view class="customerService"> 53 <view class="customerService">
54 <view class="serviceItem" > 54 <view class="serviceItem" >
55 <view class="title"> 55 <view class="title">
56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 56 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
57 <text class="titleText">卖家服务</text> 57 <text class="titleText">卖家服务</text>
58 </view> 58 </view>
59 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 59 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
60 </view> 60 </view>
61 <view class="serviceItem" > 61 <view class="serviceItem" >
62 <view class="title"> 62 <view class="title">
63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 63 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
64 <text class="titleText">平台承诺</text> 64 <text class="titleText">平台承诺</text>
65 </view> 65 </view>
66 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 66 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
67 </view> 67 </view>
68 <view class="serviceItem"> 68 <view class="serviceItem">
69 <view class="title"> 69 <view class="title">
70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 70 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
71 <text class="titleText">正品保证</text> 71 <text class="titleText">正品保证</text>
72 </view> 72 </view>
73 <view class="itemContent">向您保证所售商品均为正品行货</view> 73 <view class="itemContent">向您保证所售商品均为正品行货</view>
74 </view> 74 </view>
75 <view class="serviceItem2"> 75 <view class="serviceItem2">
76 <view class="title"> 76 <view class="title">
77 <text class="titleText">权利申明</text> 77 <text class="titleText">权利申明</text>
78 </view> 78 </view>
79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 79 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
80 </view> 80 </view>
81 <view class="serviceItem2"> 81 <view class="serviceItem2">
82 <view class="title"> 82 <view class="title">
83 <text class="titleText">价格保证</text> 83 <text class="titleText">价格保证</text>
84 </view> 84 </view>
85 <view class="itemContent"> 85 <view class="itemContent">
86 <view class="itemContent-child"> 86 <view class="itemContent-child">
87 <text class="contentTitle">平台价:</text> 87 <text class="contentTitle">平台价:</text>
88 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 88 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
89 </view> 89 </view>
90 <view class="itemContent-child"> 90 <view class="itemContent-child">
91 <text class="contentTitle">划线价:</text> 91 <text class="contentTitle">划线价:</text>
92 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 92 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
93 </view> 93 </view>
94 <view class="itemContent-child"> 94 <view class="itemContent-child">
95 <text class="contentTitle">平折扣:</text> 95 <text class="contentTitle">平折扣:</text>
96 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 96 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
97 </view> 97 </view>
98 <view class="itemContent-child"> 98 <view class="itemContent-child">
99 <text class="contentTitle">异常问题:</text> 99 <text class="contentTitle">异常问题:</text>
100 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 100 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
101 </view> 101 </view>
102 102
103 </view> 103 </view>
104 </view> 104 </view>
105 </view> 105 </view>
106 </view > 106 </view >
107 </view> 107 </view>
108 <view class="D4" v-if="current !==2"> 108 <view class="D4" v-if="current !==2">
109 <view class="D4_esvalue"> 109 <view class="D4_esvalue">
110 <view>{{esvalue}}</view> 110 <view>{{esvalue}}</view>
111 <view class="D4_2"> 111 <view class="D4_2">
112 <view class="star" v-for="o in starCount" :key="o"> 112 <view class="star" v-for="o in starCount" :key="o">
113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image> 113 <image src="../../static/img/detail/d_star.png" mode="aspectFill" style="height: 26rpx; width: 28rpx;"></image>
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <view class="D4_list"> 117 <view class="D4_list">
118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view> 118 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
119 </view> 119 </view>
120 </view> 120 </view>
121 <view class="D5" v-if="current !==2"> 121 <view class="D5" v-if="current !==2">
122 <view class="D5_fixed1"> 122 <view class="D5_fixed1">
123 <image src="/static/img/detail/hr.png"></image> 123 <image src="/static/img/detail/hr.png"></image>
124 <view>商品详细</view> 124 <view>商品详细</view>
125 <image src="/static/img/detail/hr.png"></image> 125 <image src="/static/img/detail/hr.png"></image>
126 </view> 126 </view>
127 <view class="D5_all"> 127 <view class="D5_all">
128 <image v-bind:src="imgAll"></image> 128 <image v-bind:src="imgAll"></image>
129 </view> 129 </view>
130 <view class="D5_photoes"> 130 <view class="D5_photoes">
131 <view class="D5_photoes1"> 131 <view class="D5_photoes1">
132 <view v-for="(photoes) in photoes" :key="photoes.value"> 132 <view v-for="(photoes) in photoes" :key="photoes.value">
133 <image v-bind:src = "photoes.img"></image> 133 <image v-bind:src = "photoes.img"></image>
134 <view>{{photoes.value}}</view> 134 <view>{{photoes.value}}</view>
135 </view> 135 </view>
136 </view> 136 </view>
137 <view class="D5_logo1">帕森防蓝光镜片</view> 137 <view class="D5_logo1">帕森防蓝光镜片</view>
138 <view class="D5_logo2">健康护眼，我们是认真的！</view> 138 <view class="D5_logo2">健康护眼，我们是认真的！</view>
139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view> 139 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
140 </view> 140 </view>
141 </view> 141 </view>
142 <view class="D6" v-if="current !==2"> 142 <view class="D6" v-if="current !==2">
143 <view class="D6_v1">CHARM DETAIL</view> 143 <view class="D6_v1">CHARM DETAIL</view>
144 <view class="D6_v2">细节展示</view> 144 <view class="D6_v2">细节展示</view>
145 <view ><image v-bind:src="imgDetail"></image></view> 145 <view ><image v-bind:src="imgDetail"></image></view>
146 <view>........................................................................</view> 146 <view>........................................................................</view>
147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view> 147 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
148 </view> 148 </view>
149 149
150 <!-- 底部菜单 --> 150 <!-- 底部菜单 -->
151 <view class="botton"> 151 <view class="botton">
152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view> 152 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
153 <view class="botton_2"> 153 <view class="botton_2">
154 <view class="botton_input">加入购物车</view> 154 <view class="botton_input">加入购物车</view>
155 <view class="botton_now" @click="goPerchase">立即购买</view> 155 <view class="botton_now" @click="goPerchase">立即购买</view>
156 </view> 156 </view>
157 </view> 157 </view>
158 </view> 158 </view>
159 </template> 159 </template>
160 160
161 <script> 161 <script>
162 import store from '@/store';
162 export default { 163 export default {
163 data(){ 164 data(){
164 return { 165 return {
165 name:'商品名称', 166 name:'商品名称',
166 goodType:2, 167 goodType:2,
167 price: 120, 168 price: 120,
168 number: 391, 169 number: 391,
169 screenItems: [ 170 screenItems: [
170 {current:0,text:'商品保障'}, 171 {current:0,text:'商品保障'},
171 {current:1,text:'规格参数'}, 172 {current:1,text:'规格参数'},
172 {current:2,text:'售后保障'}, 173 {current:2,text:'售后保障'},
173 ], 174 ],
174 current: 0, 175 current: 0,
175 starCount:5, 176 starCount:5,
176 infos: [ 177 infos: [
177 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 178 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
178 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 179 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
179 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 180 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
180 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' }, 181 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
181 ], 182 ],
182 parameter:[ 183 parameter:[
183 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'}, 184 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
184 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'}, 185 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
185 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'}, 186 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
186 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'}, 187 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
187 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'}, 188 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
188 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'} 189 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
189 ], 190 ],
190 assess:[ 191 assess:[
191 {key: 0, Iassess: '价格实惠'}, 192 {key: 0, Iassess: '价格实惠'},
192 {key: 1, Iassess: '美观大方'}, 193 {key: 1, Iassess: '美观大方'},
193 {key: 2, Iassess: '易搭配'} 194 {key: 2, Iassess: '易搭配'}
194 ], 195 ],
195 esvalue:'宝贝好评率 100%', 196 esvalue:'宝贝好评率 100%',
196 introduction:{ 197 introduction:{
197 material:'钛合金', 198 material:'钛合金',
198 func:'抗疲劳/防辐射', 199 func:'抗疲劳/防辐射',
199 rate: 1.6 200 rate: 1.6
200 }, 201 },
201 imgAll:'/static/img/detail/d8.png' , 202 imgAll:'/static/img/detail/d8.png' ,
202 photoes:[ 203 photoes:[
203 {value:'日常办公', img:'/static/img/detail/d9.png'}, 204 {value:'日常办公', img:'/static/img/detail/d9.png'},
204 {value:'上网', img:'/static/img/detail/d10.png'}, 205 {value:'上网', img:'/static/img/detail/d10.png'},
205 {value:'追剧', img:'/static/img/detail/d11.png'}, 206 {value:'追剧', img:'/static/img/detail/d11.png'},
206 {value:'玩游戏', img:'/static/img/detail/d12.png'}, 207 {value:'玩游戏', img:'/static/img/detail/d12.png'},
207 ], 208 ],
208 imgDetail:'/static/img/detail/d13.png', 209 imgDetail:'/static/img/detail/d13.png',
209 imgShop:{ 210 imgShop:{
210 img:'/static/tab-cart.png', 211 img:'/static/tab-cart.png',
211 IsShown: false 212 IsShown: false
212 } 213 }
213 } 214 }
214 }, 215 },
215 onLoad:function(option){ 216 onLoad:function(option){
216 this.goodType = option.goodType 217 this.goodType = option.goodType
217 console.log(this.updateGoodType) 218 // console.log(this.updateGoodType)
219 store.dispatch('read/fetch');
218 }, 220 },
219 computed:{ 221 computed:{
220 updateGoodType(){ 222 updateGoodType(){
221 return this.goodType 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 methods:{ 230 methods:{
225 goPerchase(){ 231 goPerchase(){
226 switch(this.updateGoodType){ 232 switch(this.updateGoodType){
227 case '1': 233 case '1':
228 uni.navigateTo({ 234 uni.navigateTo({
229 url: '../detailsChoiceArgs/detailsChoiceArgs', 235 url: '../detailsChoiceArgs/detailsChoiceArgs',
230 success: res => {}, 236 success: res => {},
231 fail: () => {}, 237 fail: () => {},
232 complete: () => {} 238 complete: () => {}
233 }); 239 });
234 break; 240 break;
235 case '2': 241 case '2':
236 uni.navigateTo({ 242 uni.navigateTo({
237 url: `../detailStandard/detailStandard_k`, 243 url: `../detailStandard/detailStandard_k`,
238 success: res => {}, 244 success: res => {},
239 fail: () => {}, 245 fail: () => {},
240 complete: () => {} 246 complete: () => {}
241 }); 247 });
242 break; 248 break;
243 case '3': 249 case '3':
244 uni.navigateTo({ 250 uni.navigateTo({
245 url: `../purchaseLenses/purchaseLenses`, 251 url: `../purchaseLenses/purchaseLenses`,
246 success: res => {}, 252 success: res => {},
247 fail: () => {}, 253 fail: () => {},
248 complete: () => {} 254 complete: () => {}
249 }); 255 });
250 break; 256 break;
251 case '4': 257 case '4':
252 uni.navigateTo({ 258 uni.navigateTo({
253 url: `../detailStandard/detailStandard_sun`, 259 url: `../detailStandard/detailStandard_sun`,
254 success: res => {}, 260 success: res => {},
255 fail: () => {}, 261 fail: () => {},
256 complete: () => {} 262 complete: () => {}
257 }); 263 });
258 break; 264 break;
259 default : 265 default :
260 break 266 break
261 } 267 }
262 }, 268 },
263 tabChange(e) { 269 tabChange(e) {
264 if (this.current !== e) { 270 if (this.current !== e) {
265 this.current = e; 271 this.current = e;
266 } 272 }
267 } 273 }
268 } 274 }
269 } 275 }
270 </script> 276 </script>
271 <style lang='scss'> 277 <style lang='scss'>
272 .container{ 278 .container{
273 background-color:#f8f8f8 ; 279 background-color:#f8f8f8 ;
274 } 280 }
275 .D1,.D2,.D3,.D4,.D6{ 281 .D1,.D2,.D3,.D4,.D6{
276 background: #ffffff; 282 background: #ffffff;
277 margin-bottom: 10px; 283 margin-bottom: 10px;
278 padding:8px 20px 8px 20px; 284 padding:8px 20px 8px 20px;
279 box-sizing: border-box; 285 box-sizing: border-box;
280 .swiperImage { 286 .swiperImage {
281 width: 684rpx; 287 width: 684rpx;
282 height: 512rpx; 288 height: 512rpx;
283 image { 289 image {
284 width: 100%; 290 width: 100%;
285 height: 100%; 291 height: 100%;
286 border-radius: 16rpx; 292 border-radius: 16rpx;
287 } 293 }
288 } 294 }
289 } 295 }
290 .D5{ 296 .D5{
291 background: #ffffff; 297 background: #ffffff;
292 padding:8px 20px 8px 20px; 298 padding:8px 20px 8px 20px;
293 box-sizing: border-box; 299 box-sizing: border-box;
294 } 300 }
295 .swiperImage{ 301 .swiperImage{
296 width: 100%; 302 width: 100%;
297 height: 560rpx; 303 height: 560rpx;
298 .swiper-item{ 304 .swiper-item{
299 width: 100%; 305 width: 100%;
300 image{ 306 image{
301 width: 100%; 307 width: 100%;
302 } 308 }
303 } 309 }
304 } 310 }
305 .D1{ 311 .D1{
306 .D1_price{ 312 .D1_price{
307 color: #EB5D3B; 313 color: #EB5D3B;
308 font-size: 18px; 314 font-size: 18px;
309 margin-top: 5px; 315 margin-top: 5px;
310 font-family: 'PingFangSC-Semibold'; 316 font-family: 'PingFangSC-Semibold';
311 } 317 }
312 .D1_name{ 318 .D1_name{
313 font-size: 16px; 319 font-size: 16px;
314 font-family: 'PingFangSC-Semibold'; 320 font-family: 'PingFangSC-Semibold';
315 margin-top: 5px; 321 margin-top: 5px;
316 display: flex; 322 display: flex;
317 justify-content: space-between; 323 justify-content: space-between;
318 .D1_name1{ 324 .D1_name1{
319 font-weight: bold; 325 font-weight: bold;
320 font-size: 16px; 326 font-size: 16px;
321 color: #333333; 327 color: #333333;
322 } 328 }
323 .D1_number{ 329 .D1_number{
324 color: #999999 ; 330 color: #999999 ;
325 font-size: 14px; 331 font-size: 14px;
326 font-family: 'PingFangSC-Regular'; 332 font-family: 'PingFangSC-Regular';
327 } 333 }
328 } 334 }
329 .D1_spans{ 335 .D1_spans{
330 font-size: 10px; 336 font-size: 10px;
331 color:#999999; 337 color:#999999;
332 margin-top: 5px; 338 margin-top: 5px;
333 span{ 339 span{
334 height: 14px; 340 height: 14px;
335 margin-right: 10px; 341 margin-right: 10px;
336 } 342 }
337 } 343 }
338 344
339 } 345 }
340 .D2{ 346 .D2{
341 font-size: 14px; 347 font-size: 14px;
342 font-family: 'PingFangSC-Regular'; 348 font-family: 'PingFangSC-Regular';
343 view{ 349 view{
344 height: 24px; 350 height: 24px;
345 } 351 }
346 .D2_span1{ 352 .D2_span1{
347 color: #999999; 353 color: #999999;
348 } 354 }
349 .D2_span2{ 355 .D2_span2{
350 color: #333333; 356 color: #333333;
351 } 357 }
352 } 358 }
353 .D3{ 359 .D3{
354 .screenBar{ 360 .screenBar{
355 width: 670rpx; 361 width: 670rpx;
356 margin-top: 20rpx; 362 margin-top: 20rpx;
357 margin-bottom: 24rpx; 363 margin-bottom: 24rpx;
358 display: flex; 364 display: flex;
359 flex-direction: row; 365 flex-direction: row;
360 justify-content: space-between; 366 justify-content: space-between;
361 align-items: center; 367 align-items: center;
362 font-size: 14px; 368 font-size: 14px;
363 color: #333333; 369 color: #333333;
364 transition:all 0.2s; 370 transition:all 0.2s;
365 } 371 }
366 .screen-item{ 372 .screen-item{
367 font-size: 32rpx; 373 font-size: 32rpx;
368 color: #333333; 374 color: #333333;
369 display: flex; 375 display: flex;
370 transition:all 0.2s; 376 transition:all 0.2s;
371 .D3_list{ 377 .D3_list{
372 margin-bottom: 4px; 378 margin-bottom: 4px;
373 } 379 }
374 .D3_list view{ 380 .D3_list view{
375 display: flex; 381 display: flex;
376 align-content: center; 382 align-content: center;
377 font-size: 14px; 383 font-size: 14px;
378 color: #333333; 384 color: #333333;
379 } 385 }
380 .D3_list image{ 386 .D3_list image{
381 width: 50px; 387 width: 50px;
382 height: 25px; 388 height: 25px;
383 margin-right: 6px; 389 margin-right: 6px;
384 } 390 }
385 .D3_list span{ 391 .D3_list span{
386 margin-left: 6px; 392 margin-left: 6px;
387 margin-right: 5px; 393 margin-right: 5px;
388 font-family: 'PingFangSC-Regular'; 394 font-family: 'PingFangSC-Regular';
389 } 395 }
390 } 396 }
391 .active{ 397 .active{
392 border-bottom: 4rpx solid #FF6B4A; 398 border-bottom: 4rpx solid #FF6B4A;
393 } 399 }
394 .customerService{ 400 .customerService{
395 margin-bottom: 90rpx; 401 margin-bottom: 90rpx;
396 .serviceItem{ 402 .serviceItem{
397 margin-bottom: 32rpx; 403 margin-bottom: 32rpx;
398 .title{ 404 .title{
399 display: flex;flex-direction: row; 405 display: flex;flex-direction: row;
400 align-items: center; 406 align-items: center;
401 .titleText{ 407 .titleText{
402 font-size: 14px; 408 font-size: 14px;
403 color: #333333; 409 color: #333333;
404 margin-bottom: 12rpx; 410 margin-bottom: 12rpx;
405 } 411 }
406 } 412 }
407 .itemContent{ 413 .itemContent{
408 font-size: 14px; 414 font-size: 14px;
409 color: #999999; 415 color: #999999;
410 margin-left: 18rpx; 416 margin-left: 18rpx;
411 } 417 }
412 } 418 }
413 .serviceItem2{ 419 .serviceItem2{
414 margin-left: 18rpx; 420 margin-left: 18rpx;
415 margin-bottom: 32rpx; 421 margin-bottom: 32rpx;
416 .titleText{ 422 .titleText{
417 font-size: 14px; 423 font-size: 14px;
418 color: #FF6B4A; 424 color: #FF6B4A;
419 } 425 }
420 .itemContent{ 426 .itemContent{
421 font-size: 14px; 427 font-size: 14px;
422 color: #999999; 428 color: #999999;
423 .itemContent-child{ 429 .itemContent-child{
424 margin-bottom: 40rpx; 430 margin-bottom: 40rpx;
425 .contentTitle{ 431 .contentTitle{
426 border-bottom: 1px solid #FF6B4A; 432 border-bottom: 1px solid #FF6B4A;
427 } 433 }
428 } 434 }
429 } 435 }
430 } 436 }
431 } 437 }
432 } 438 }
433 .D4{ 439 .D4{
434 .D4_esvalue{ 440 .D4_esvalue{
435 font-size: 14px; 441 font-size: 14px;
436 color: #333333; 442 color: #333333;
437 display: flex; 443 display: flex;
438 justify-content: space-between; 444 justify-content: space-between;
439 margin-bottom: 10px; 445 margin-bottom: 10px;
440 .D4_2{ 446 .D4_2{
441 width: 90px; 447 width: 90px;
442 display: flex; 448 display: flex;
443 align-items: center; 449 align-items: center;
444 justify-content: space-between; 450 justify-content: space-between;
445 } 451 }
446 } 452 }
447 .D4_esvalue view{ 453 .D4_esvalue view{
448 font-size: 14px; 454 font-size: 14px;
449 color: #333333; 455 color: #333333;
450 font-weight: bold; 456 font-weight: bold;
451 } 457 }
452 .D4_list view{ 458 .D4_list view{
453 display: inline-block; 459 display: inline-block;
454 font-size: 12px; 460 font-size: 12px;
455 text-align: center; 461 text-align: center;
456 margin-right: 12px; 462 margin-right: 12px;
457 width: 90px; 463 width: 90px;
458 height: 24px; 464 height: 24px;
459 line-height: 24px; 465 line-height: 24px;
460 background: #F2F2F2; 466 background: #F2F2F2;
461 color: #666666 ; 467 color: #666666 ;
462 } 468 }
463 } 469 }
464 .D5{ 470 .D5{
465 .D5_fixed1{ 471 .D5_fixed1{
466 display: flex; 472 display: flex;
467 justify-content: space-between; 473 justify-content: space-between;
468 align-content: center; 474 align-content: center;
469 margin-bottom: 12px; 475 margin-bottom: 12px;
470 view{ 476 view{
471 font-size: 14px; 477 font-size: 14px;
472 color: #333333; 478 color: #333333;
473 font-weight: bold; 479 font-weight: bold;
474 font-family: 'PingFangSC-Medium'; 480 font-family: 'PingFangSC-Medium';
475 line-height: 24px; 481 line-height: 24px;
476 } 482 }
477 image{ 483 image{
478 width: 240rpx; 484 width: 240rpx;
479 height: 3px; 485 height: 3px;
480 margin-top: 10px; 486 margin-top: 10px;
481 } 487 }
482 } 488 }
483 .D5_all { 489 .D5_all {
484 width: 100%; 490 width: 100%;
485 height: 380px; 491 height: 380px;
486 margin-bottom: 30px; 492 margin-bottom: 30px;
487 font-family: 'PingFangSC-Regular'; 493 font-family: 'PingFangSC-Regular';
488 border: #999999 solid 1.5px; 494 border: #999999 solid 1.5px;
489 image{ 495 image{
490 width: 100%; 496 width: 100%;
491 height: 380px; 497 height: 380px;
492 }} 498 }}
493 .D5_photoes1{ 499 .D5_photoes1{
494 display: grid; 500 display: grid;
495 grid-template-columns: 48% 48%; 501 grid-template-columns: 48% 48%;
496 grid-row-gap: 10px; 502 grid-row-gap: 10px;
497 grid-column-gap: 4%; 503 grid-column-gap: 4%;
498 image{ 504 image{
499 width: 100%; 505 width: 100%;
500 height: 70px; 506 height: 70px;
501 } 507 }
502 view{ 508 view{
503 width: 100%; 509 width: 100%;
504 font-size: 14px; 510 font-size: 14px;
505 text-align: center; 511 text-align: center;
506 background: #949494; 512 background: #949494;
507 font-family: 'PingFangSC-Regular'; 513 font-family: 'PingFangSC-Regular';
508 color: #ffffff; 514 color: #ffffff;
509 view{ 515 view{
510 height: 24px; 516 height: 24px;
511 line-height: 24px; 517 line-height: 24px;
512 } 518 }
513 } 519 }
514 } 520 }
515 .D5_logo1,.D5_logo2{ 521 .D5_logo1,.D5_logo2{
516 text-align: center; 522 text-align: center;
517 } 523 }
518 .D5_logo1{ 524 .D5_logo1{
519 margin-top: 40px; 525 margin-top: 40px;
520 font-size: 24px; 526 font-size: 24px;
521 font-weight: bold; 527 font-weight: bold;
522 font-family: 'PingFangSC-Semibold'; 528 font-family: 'PingFangSC-Semibold';
523 } 529 }
524 .D5_logo2{ 530 .D5_logo2{
525 font-size: 12px; 531 font-size: 12px;
526 } 532 }
527 .D5_logo3{ 533 .D5_logo3{
528 width: 100%; 534 width: 100%;
529 text-align: center; 535 text-align: center;
530 image{ 536 image{
531 width: 50px; 537 width: 50px;
532 height: 24px; 538 height: 24px;
533 } 539 }
534 } 540 }
535 } 541 }
536 .D6{ 542 .D6{
537 width: 100%; 543 width: 100%;
538 height: 430px; 544 height: 430px;
539 background: #F9F6ED; 545 background: #F9F6ED;
540 margin-bottom: 74px; 546 margin-bottom: 74px;
541 view{ 547 view{
542 text-align: center; 548 text-align: center;
543 } 549 }
544 .D6_v1{ 550 .D6_v1{
545 font-weight: bold; 551 font-weight: bold;
546 } 552 }
547 .D6_v2{ 553 .D6_v2{
548 font-size: 14px; 554 font-size: 14px;
549 margin-bottom: 30px; 555 margin-bottom: 30px;
550 } 556 }
551 .D6_v5{ 557 .D6_v5{
552 .D6_v5_s1{ 558 .D6_v5_s1{
553 font-weight: bold; 559 font-weight: bold;
554 } 560 }
555 .D6_v5_s2{ 561 .D6_v5_s2{
556 font-size: 14px; 562 font-size: 14px;
557 } 563 }
558 } 564 }
559 } 565 }
560 .botton{ 566 .botton{
561 position: fixed; 567 position: fixed;
562 bottom: 0; 568 bottom: 0;
563 height: 74px; 569 height: 74px;
564 width: 100%; 570 width: 100%;
565 background: #FFFFFF; 571 background: #FFFFFF;
566 padding: 20px 20px 8px 20px; 572 padding: 20px 20px 8px 20px;
567 font-family: 'PingFangSC-Regular'; 573 font-family: 'PingFangSC-Regular';
568 box-sizing: border-box; 574 box-sizing: border-box;
569 display: flex; 575 display: flex;
570 justify-content: space-between; 576 justify-content: space-between;
571 align-content: center; 577 align-content: center;
572 .botton_1{ 578 .botton_1{
573 width: 20%; 579 width: 20%;
574 height: 100%; 580 height: 100%;
575 text-align: center; 581 text-align: center;
576 color: #989898; 582 color: #989898;
577 } 583 }
578 image{ 584 image{
579 width: 60%; 585 width: 60%;
580 height: 30px; 586 height: 30px;
581 } 587 }
582 .botton_image{ 588 .botton_image{
583 font-size: 12px; 589 font-size: 12px;
584 text-align: center; 590 text-align: center;
585 } 591 }
586 .botton_2{ 592 .botton_2{
587 width: 74%; 593 width: 74%;
588 height: 86%; 594 height: 86%;
589 display: grid; 595 display: grid;
590 grid-template-columns: 50% 50%; 596 grid-template-columns: 50% 50%;
591 } 597 }
592 .botton_input{ 598 .botton_input{
593 display: inline-flex; 599 display: inline-flex;
594 align-items: center; 600 align-items: center;
595 justify-content: space-around; 601 justify-content: space-around;
596 background: #FFF0EC; 602 background: #FFF0EC;
597 font-size: 16px; 603 font-size: 16px;
598 color: #FF6B4A; 604 color: #FF6B4A;
599 border-radius: 20px 0 0 20px; 605 border-radius: 20px 0 0 20px;
600 } 606 }
601 .botton_now{ 607 .botton_now{
602 display: inline-flex; 608 display: inline-flex;
603 align-items: center; 609 align-items: center;
604 justify-content: space-around; 610 justify-content: space-around;
605 background: #FF6B4A; 611 background: #FF6B4A;
606 font-size: 16px; 612 font-size: 16px;
607 color: #FFFFFF; 613 color: #FFFFFF;
608 border-radius:0 20px 20px 0; 614 border-radius:0 20px 20px 0;
609 } 615 }
610 } 616 }
611 </style> 617 </style>
src/pages/index/index.vue
Diff comments   View file @7a2dda4
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" /> 7 <input class="searchIpt" placeholder="老花镜" confirm-type="search" />
8 </view> 8 </view>
9 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <view class="screenBar"> 11 <!-- <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13 <view 13 <view
14 class="screenItem" 14 class="screenItem"
15 v-bind:class="{ active: current === item.current }" 15 v-bind:class="{ active: current === item.current }"
16 v-if="item.current === 2" 16 v-if="item.current === 2"
17 @click="dropDown" 17 @click="dropDown"
18 > 18 >
19 {{ item.text }} 19 {{ item.text }}
20 <icon type="info" size="14"></icon> 20 <icon type="info" size="14"></icon>
21 </view> 21 </view>
22 <view 22 <view
23 class="screenItem" 23 class="screenItem"
24 v-bind:class="{ active: current === item.current }" 24 v-bind:class="{ active: current === item.current }"
25 v-if="item.current === 4" 25 v-if="item.current === 4"
26 @click="showDrawer('showRight')" 26 @click="showDrawer('showRight')"
27 > 27 >
28 {{ item.text }} 28 {{ item.text }}
29 <icon type="info" size="14"></icon> 29 <icon type="info" size="14"></icon>
30 </view> 30 </view>
31 <view v-if="item.current !== 2&&item.current!==4"> 31 <view v-if="item.current !== 2&&item.current!==4">
32 <view 32 <view
33 class="screenItem" 33 class="screenItem"
34 v-bind:class="{ active: current === item.current }" 34 v-bind:class="{ active: current === item.current }"
35 >{{ item.text }}</view> 35 >{{ item.text }}</view>
36 </view> 36 </view>
37 </view> 37 </view>
38 </view> 38 </view> -->
39 </view> 39 </view>
40 <Uni-drawer 40 <!-- <Uni-drawer
41 ref="showRight" 41 ref="showRight"
42 mask="true" 42 mask="true"
43 maskClick="true" 43 maskClick="true"
44 mode="right" 44 mode="right"
45 :width="320" 45 :width="320"
46 @change="change($event,'showRight')" 46 @change="change($event,'showRight')"
47 > 47 >
48 <view class="close"> 48 <view class="close">
49 <view @click="closeDrawer('showRight')"> 49 <view @click="closeDrawer('showRight')">
50 <text class="word-btn-white">关闭</text> 50 <text class="word-btn-white">关闭</text>
51 </view> 51 </view>
52 </view> 52 </view>
53 </Uni-drawer> 53 </Uni-drawer> -->
54 54
55 <!-- 筛选菜单--> 55 <!-- 筛选菜单-->
56 <view class="content-wrap"> 56 <view class="content-wrap">
57 <view> 57 <view>
58 <HMfilterDropdown 58 <HMfilterDropdown
59 :filterData="filterData" 59 :filterData="filterData"
60 :defaultSelected="filterDropdownValue" 60 :defaultSelected="filterDropdownValue"
61 :updateMenuName="true" 61 :updateMenuName="true"
62 @confirm="confirm" 62 @confirm="confirm"
63 data-format="Object" 63 data-format="Object"
64 ></HMfilterDropdown> 64 ></HMfilterDropdown>
65 <!-- 商品列表 --> 65 <!-- 商品列表 -->
66 <view class="goods-list"> 66 <view class="goods-list">
67 <view class="product-list"> 67 <view class="product-list">
68 <view class="product" v-for="(goods) in goodsList" :key="goods.id"> 68 <view class="product" v-for="(goods) in goodsList" :key="goods.id">
69 <Card :goods="goods"></Card> 69 <Card :goods="goods"></Card>
70 </view> 70 </view>
71 </view> 71 </view>
72 <view class="loading-text">{{loadingText}}</view> 72 <view class="loading-text">{{loadingText}}</view>
73 </view> 73 </view>
74 </view> 74 </view>
75 </view> 75 </view>
76 </view> 76 </view>
77 </template> 77 </template>
78 78
79 <script> 79 <script>
80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 80 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81 import Card from "@/components/CommodityCard/CommodityCard.vue"; 81 import Card from "@/components/CommodityCard/CommodityCard.vue";
82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 82 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83 import data from "@/common/data.js"; //筛选菜单数据 83 import data from "@/common/data.js"; //筛选菜单数据
84 import store from '@/store'; 84 import store from '@/store';
85 85
86 export default { 86 export default {
87 components: { 87 components: {
88 UniDrawer: UniDrawer, 88 UniDrawer: UniDrawer,
89 HMfilterDropdown: HMfilterDropdown, 89 HMfilterDropdown: HMfilterDropdown,
90 Card: Card 90 Card: Card
91 }, 91 },
92 data() { 92 data() {
93 return { 93 return {
94 screenItems: [ 94 screenItems: [
95 { current: 0, text: "全部", hasIcon: false }, 95 { current: 0, text: "全部", hasIcon: false },
96 { current: 1, text: "销量", hasIcon: false }, 96 { current: 1, text: "销量", hasIcon: false },
97 { current: 2, text: "价格", hasIcon: true }, 97 { current: 2, text: "价格", hasIcon: true },
98 { current: 3, text: "折扣", hasIcon: false }, 98 { current: 3, text: "折扣", hasIcon: false },
99 { current: 4, text: "筛选", hasIcon: true } 99 { current: 4, text: "筛选", hasIcon: true }
100 ], 100 ],
101 current: 0, 101 current: 0,
102 showRight: false, 102 showRight: false,
103 indexArr: "", 103 indexArr: "",
104 valueArr: "", 104 valueArr: "",
105 loadingText: "~~到底了~~", 105 loadingText: "~~到底了~~",
106 filterDropdownValue: [], 106 filterDropdownValue: [],
107 filterData: [], 107 filterData: [],
108 goodsList:[ 108 // goodsList:[
109 { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 }, 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 }, 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 }, 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 }, 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 }, 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 }, 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 }, 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 }, 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 }, 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 } 118 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
119 ], 119 // ],
120 }; 120 };
121 }, 121 },
122 computed: { 122 computed: {
123 // goodsList() { 123 goodsList() {
124 // // 也可以从 getters 获取 124 // 也可以从 getters 获取
125 // console.log('list', this.$store.state.test.list); 125 return this.$store.state.test.list;
126 // return this.$store.state.test.list; 126 },
127 // }, 127 categoryList(){
128 // categoryList(){ 128 // console.log(this.$store.state.categoryOrder.categoryList);
129 // console.log(this.$store.state.categoryOrder.categoryList); 129 const categoryList = this.$store.state.categoryOrder.categoryList
130 // this.filterData = this.$store.state.categoryOrder.categoryList 130 let newData = [
131 // } 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 filters: { 189 filters: {
135 outData(value) { 190 outData(value) {
136 return JSON.stringify(value); 191 return JSON.stringify(value);
137 } 192 }
138 }, 193 },
139 onLoad: function() { 194 onLoad: function() {
140 store.dispatch('test/fetch'); 195 store.dispatch('test/fetch');
141 store.dispatch('categoryOrder/fetch') 196 store.dispatch('categoryOrder/fetch')
142 197
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);
155 }, 198 },
156 methods: { 199 methods: {
157 showDrawer(e) { 200 showDrawer(e) {
158 this.$refs[e].open(); 201 this.$refs[e].open();
159 }, 202 },
160 closeDrawer(e) { 203 closeDrawer(e) {
161 this.$refs[e].close(); 204 this.$refs[e].close();
162 }, 205 },
163 change(e, type) { 206 change(e, type) {
164 this[type] = e; 207 this[type] = e;
165 }, 208 },
166 onClickItem(e) { 209 onClickItem(e) {
167 if (this.current !== e) { 210 if (this.current !== e) {
168 this.current = e; 211 this.current = e;
169 } 212 }
170 }, 213 },
171 dropDown() { 214 dropDown() {
172 console.log("下拉"); 215 console.log("下拉");
173 }, 216 },
174 //接收菜单结果 217 //接收菜单结果
175 confirm(e) { 218 confirm(e) {
176 this.indexArr = e.index; 219 this.indexArr = e.index;
177 this.valueArr = e.value; 220 this.valueArr = e.value;
178 return; 221 return;
179 console.log("修改菜单"); 222 console.log("修改菜单");
180 this.filterData[4].submenu[1] = { 223 this.filterData[4].submenu[1] = {
181 name: "项目2", 224 name: "项目2",
182 submenu: [] 225 submenu: []
183 }; 226 };
184 } 227 }
185 }, 228 },
186 229
187 }; 230 };
188 </script> 231 </script>
189 232
190 <style lang="scss"> 233 <style lang="scss">
191 .content { 234 .content {
192 display: flex; 235 display: flex;
193 flex-direction: column; 236 flex-direction: column;
194 align-items: center; 237 align-items: center;
195 justify-content: center; 238 justify-content: center;
196 background-color: #f7f6f6; 239 background-color: #f7f6f6;
197 } 240 }
198 .header { 241 .header {
199 display: flex; 242 display: flex;
200 flex-direction: column; 243 flex-direction: column;
201 align-items: center; 244 align-items: center;
202 justify-content: center; 245 justify-content: center;
203 background-color: #f7f6f6; 246 background-color: #f7f6f6;
204 height: 178rpx; 247 height: 178rpx;
205 width: 100%; 248 width: 100%;
206 z-index: 999; 249 z-index: 999;
207 position: fixed; 250 position: fixed;
208 top: 0; 251 top: 0;
209 left: 0; 252 left: 0;
210 } 253 }
211 .searchBar { 254 .searchBar {
212 width: 670rpx; 255 width: 670rpx;
213 display: flex; 256 display: flex;
214 justify-content: center; 257 justify-content: center;
215 align-items: center; 258 align-items: center;
216 box-sizing: border-box; 259 box-sizing: border-box;
217 padding: 0rpx 16rpx; 260 padding: 0rpx 16rpx;
218 border: 1px solid #ff6b4a; 261 border: 1px solid #ff6b4a;
219 border-radius: 8rpx; 262 border-radius: 8rpx;
220 background-color: #ffffff; 263 background-color: #ffffff;
221 } 264 }
222 265
223 .searchIpt { 266 .searchIpt {
224 height: 68rpx; 267 height: 68rpx;
225 width: 670rpx; 268 width: 670rpx;
226 padding: 16rpx; 269 padding: 16rpx;
227 font-size: 28rpx; 270 font-size: 28rpx;
228 box-sizing: border-box; 271 box-sizing: border-box;
229 } 272 }
230 .screenBar { 273 .screenBar {
231 width: 670rpx; 274 width: 670rpx;
232 height: 110rpx; 275 height: 110rpx;
233 display: flex; 276 display: flex;
234 flex-direction: row; 277 flex-direction: row;
235 justify-content: space-between; 278 justify-content: space-between;
236 align-items: center; 279 align-items: center;
237 color: #333333; 280 color: #333333;
238 font-size: 32rpx; 281 font-size: 32rpx;
239 } 282 }
240 .active { 283 .active {
241 color: #ff6b4a; 284 color: #ff6b4a;
242 } 285 }
243 .screenItem { 286 .screenItem {
244 display: flex; 287 display: flex;
245 justify-content: center; 288 justify-content: center;
246 align-items: center; 289 align-items: center;
247 } 290 }
248 .content-wrap { 291 .content-wrap {
249 width: 100%; 292 width: 100%;
250 background-color: #ffffff; 293 background-color: #ffffff;
251 } 294 }
252 295
253 .HMfilterDropdown { 296 .HMfilterDropdown {
254 top: 178rpx !important; 297 top: 178rpx !important;
255 } 298 }
256 299
257 .goods-list { 300 .goods-list {
258 padding-top: 286rpx; 301 padding-top: 286rpx;
259 .loading-text { 302 .loading-text {
260 width: 100%; 303 width: 100%;
261 display: flex; 304 display: flex;
262 justify-content: center; 305 justify-content: center;
263 align-items: center; 306 align-items: center;
264 height: 30px; 307 height: 30px;
265 color: #979797; 308 color: #979797;
266 font-size: 12px; 309 font-size: 12px;
267 } 310 }
268 .product-list { 311 .product-list {
269 width: 92%; 312 width: 92%;
270 padding: 0 4% 3vw 4%; 313 padding: 0 4% 3vw 4%;
271 display: flex; 314 display: flex;
src/store/index.js
Diff comments   View file @7a2dda4
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Vuex from 'vuex' 2 import Vuex from 'vuex'
3 3
4 Vue.use(Vuex) 4 Vue.use(Vuex)
5 5
6 const modulesFiles = require.context('./modules', true, /\.js$/) 6 const modulesFiles = require.context('./modules', true, /\.js$/)
7 7
8 const modules = modulesFiles.keys().reduce((modules, modulePath) => { 8 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
9 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') 9 const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
10 const value = modulesFiles(modulePath) 10 const value = modulesFiles(modulePath)
11 11
12 modules[moduleName] = value.default 12 modules[moduleName] = value.default
13 13
14 return modules 14 return modules
15 }, {}) 15 }, {})
16 16
17 const store = new Vuex.Store({ 17 const store = new Vuex.Store({
18 modules, 18 modules,
19 getters: { 19 getters: {
20 list: state => state.test.list 20 // list: state => state.test.list
21 } 21 }
22 }) 22 })
23 23
24 export default store; 24 export default store;
src/store/modules/read.js
Diff comments   View file @7a2dda4
File was created 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 };
41
1 const urlAlias = { 1 const urlAlias = {
2 // 获取首页商品列表 2 // 获取首页商品列表
3 shopList: '/app/prod/list', 3 shopList: '/app/prod/list',
4 4
5 // 获取首页商品列表 5 // 获取首页商品列表
6 category: '/app/prod/category', 6 category: '/app/prod/category2',
7 // 获取商品信息
8 read: '/app/prod/read',
7 } 9 }
8 10
9 export default urlAlias; 11 export default urlAlias;
10 12