刘文博 / gulu-vue

Download as
Browse Code »

Commit 6cba5813014536e20ad36b59e87802a40b2c29b6

Authored by BigBoss
2 parents 15af636b40 280fcb85bf
Exists in master

修改冲突

Showing 16 changed files   Show diff stats
src/components/CommodityCard/CommodityCard.vue
Diff comments   View file @6cba581
1 <template> 1 <template>
2 <view 2 <view
3 class="card" 3 class="card"
4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" 4 @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
5 > 5 >
6 <easy-loadimage mode="widthFix" 6 <easy-loadimage mode="widthFix"
7 :scroll-top="scrollTop" 7 :scroll-top="scrollTop"
8 :image-src="goods.imgurl?goods.imgurl:goods.pic" 8 :image-src="goods.imgurl?goods.imgurl:goods.pic"
9 :viewHeight="viewHeight"></easy-loadimage> 9 :viewHeight="viewHeight"></easy-loadimage>
10 <!-- <image 10 <!-- <image
11 mode="widthFix" 11 mode="widthFix"
12 :src="goods.imgurl?goods.imgurl:goods.pic" 12 :src="goods.imgurl?goods.imgurl:goods.pic"
13 ></image> --> 13 ></image> -->
14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view> 14 <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
15 <view class="info"> 15 <view class="info">
16 <view class="priceBox"> 16 <view class="priceBox">
17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> 17 <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view>
18 <view class="originCost"> 18 <view class="originCost">
19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> 19 <!-- {{goods.price !== undefined?goods.price:goods.real_price}} -->
20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} 20 {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}}
21 </view> 21 </view>
22 </view> 22 </view>
23 <view class="trade_num">{{goods.trade_num}}人购买</view> 23 <view class="trade_num">{{goods.trade_num}}人购买</view>
24 </view> 24 </view>
25 </view> 25 </view>
26 </template> 26 </template>
27 27
28 <script> 28 <script>
29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' 29 import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
30 // const MockData = require('@/static/easy-loadimage/mock-data.json') 30 // const MockData = require('@/static/easy-loadimage/mock-data.json')
31 export default { 31 export default {
32 components:{easyLoadimage}, 32 components:{easyLoadimage},
33 props: { 33 props: {
34 /** 34 /**
35 * 商品数据 35 * 商品数据
36 */ 36 */
37 goods: { 37 goods: {
38 id: Number, 38 id: Number,
39 imgurl: String, 39 imgurl: String,
40 name: String, 40 name: String,
41 rsSon: Object, 41 rsSon: Object,
42 originCost: String, 42 originCost: String,
43 price: String, 43 price: String,
44 trade_num: String, 44 trade_num: String,
45 goodType: String, 45 goodType: String,
46 }, 46 },
47 scrollTop:Number, 47 scrollTop:Number,
48 viewHeight:Number, 48 viewHeight:Number,
49 }, 49 },
50 created () { 50 created () {
51 }, 51 },
52 data () { 52 data () {
53 return { 53 return {
54 54
55 } 55 }
56 }, 56 },
57 57
58 methods: { 58 methods: {
59 toGoods (id, skId) { 59 toGoods (id, skId) {
60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) 60 console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
61 uni.navigateTo({ 61 uni.navigateTo({
62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, 62 url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId,
63 success: res => {}, 63 success: res => {},
64 fail: () => {}, 64 fail: () => {},
65 complete: () => {}, 65 complete: () => {},
66 }) 66 })
67 }, 67 },
68 }, 68 },
69 } 69 }
70 </script> 70 </script>
71 71
72 <style lang="scss"> 72 <style lang="scss">
73 73
74 image { 74 image {
75 width: 100%; 75 width: 100%;
76 height: 120rpx; 76 height: 120rpx;
77 } 77 }
78 .name { 78 .name {
79 width: 92%; 79 width: 92%;
80 height: 76rpx; 80 height: 76rpx;
81 padding: 5px 4%; 81 padding: 5px 4%;
82 box-sizing: border-box; 82 box-sizing: border-box;
83 display: -webkit-box; 83 display: -webkit-box;
84 -webkit-box-orient: vertical; 84 -webkit-box-orient: vertical;
85 -webkit-line-clamp: 2; 85 -webkit-line-clamp: 2;
86 text-align: justify; 86 text-align: justify;
87 overflow: hidden; 87 overflow: hidden;
88 font-size: 26rpx; 88 font-size: 26rpx;
89 color: #333333; 89 color: #333333;
90 } 90 }
91 .info { 91 .info {
92 display: flex; 92 display: flex;
93 justify-content: space-between; 93 justify-content: space-between;
94 align-items: center; 94 align-items: center;
95 width: 92%; 95 width: 92%;
96 padding: 5px 4% 5px 4%; 96 padding: 5px 4% 5px 4%;
97 .priceBox { 97 .priceBox {
98 display: flex; 98 display: flex;
99 justify-content: space-between; 99 justify-content: space-between;
100 align-items: center; 100 align-items: center;
101 .price { 101 .price {
102 color: #eb5d3b; 102 color: #eb5d3b;
103 font-size: 28rpx; 103 font-size: 28rpx;
104 font-weight: 600; 104 font-weight: 600;
105 margin-right: 10rpx; 105 margin-right: 10rpx;
106 } 106 }
107 .originCost { 107 .originCost {
108 text-decoration: line-through; 108 text-decoration: line-through;
109 color: #999999; 109 color: #999999;
110 font-size: 20rpx; 110 font-size: 20rpx;
111 } 111 }
112 } 112 }
113 .trade_num { 113 .trade_num {
114 color: #999999; 114 color: #999999;
115 font-size: 20rpx; 115 font-size: 20rpx;
116 } 116 }
117 } 117 }
118 </style> 118 </style>
119 119
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @6cba581
1 <template> 1 <template>
2 <view 2 <view
3 class="HMfilterDropdown" 3 class="HMfilterDropdown"
4 @touchmove.stop.prevent="discard" 4 @touchmove.stop.prevent="discard"
5 @tap.stop="discard" 5 @tap.stop="discard"
6 > 6 >
7 <view class="nav"> 7 <view class="nav">
8 <block 8 <block
9 v-for="(item,index) in menu" 9 v-for="(item,index) in menu"
10 :key="index" 10 :key="index"
11 > 11 >
12 <view 12 <view
13 class="first-menu" 13 class="first-menu"
14 :class="{'on':showPage==index || on[index] === 1}" 14 :class="{'on':showPage==index || on[index] === 1}"
15 @tap="togglePage(index)" 15 @tap="togglePage(index, false)"
16 v-if="!item.isNoPull" 16 v-if="!item.isNoPull"
17 > 17 >
18 <text class="name">{{item.name}}</text> 18 <text class="name">{{item.name}}</text>
19 <text 19 <text
20 class="iconfont triangle" 20 class="iconfont triangle"
21 :style="'transform:rotate('+triangleDeg[index]+'deg);'" 21 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
22 ></text> 22 ></text>
23 </view> 23 </view>
24 <view 24 <view
25 class="first-menu" 25 class="first-menu"
26 :class="{'on':showPage==index || on[index] === 1}" 26 :class="{'on':showPage==index || on[index] === 1}"
27 @tap="showAll()" 27 @tap="showAll()"
28 v-else 28 v-else
29 > 29 >
30 <text class="name">{{item.name}}</text> 30 <text class="name">{{item.name}}</text>
31 </view> 31 </view>
32 </block> 32 </block>
33 </view> 33 </view>
34 <view 34 <view
35 class="mask" 35 class="mask"
36 :class="{'show':isShowMask,'hide':maskVisibility!=true}" 36 :class="{'show':isShowMask,'hide':maskVisibility!=true}"
37 @tap="togglePage(showPage)" 37 @tap="togglePage(showPage)"
38 ></view> 38 ></view>
39 <block 39 <block
40 v-for="(page,page_index) in subData" 40 v-for="(page,page_index) in subData"
41 :key="page_index" 41 :key="page_index"
42 > 42 >
43 <view 43 <view
44 class="sub-menu-class" 44 class="sub-menu-class"
45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}" 45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
46 > 46 >
47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
48 <scroll-view 48 <scroll-view
49 class="sub-menu-list" 49 class="sub-menu-list"
50 :class="[activeMenuArr[page_index].length>1?'first':'alone']" 50 :class="[activeMenuArr[page_index].length>1?'first':'alone']"
51 :scroll-y="true" 51 :scroll-y="true"
52 :scroll-into-view="'first_id'+firstScrollInto" 52 :scroll-into-view="'first_id'+firstScrollInto"
53 > 53 >
54 <block 54 <block
55 v-for="(sub,index) in page.submenu" 55 v-for="(sub,index) in page.submenu"
56 :key="index" 56 :key="index"
57 > 57 >
58 <view 58 <view
59 class="sub-menu" 59 class="sub-menu"
60 :id="'first_id'+index" 60 :id="'first_id'+index"
61 :class="{'on':activeMenuArr[page_index][0]==index}" 61 :class="{'on':activeMenuArr[page_index][0]==index}"
62 @tap="selectHierarchyMenu(page_index,index,null,null)" 62 @tap="selectHierarchyMenu(page_index,index,null,null)"
63 > 63 >
64 <view class="menu-name"> 64 <view class="menu-name">
65 <text>{{sub.name}}</text> 65 <text>{{sub.name}}</text>
66 <text class="iconfont selected"></text> 66 <text class="iconfont selected"></text>
67 </view> 67 </view>
68 </view> 68 </view>
69 </block> 69 </block>
70 </scroll-view> 70 </scroll-view>
71 <block 71 <block
72 v-for="(sub,index) in page.submenu" 72 v-for="(sub,index) in page.submenu"
73 :key="index" 73 :key="index"
74 > 74 >
75 <scroll-view 75 <scroll-view
76 class="sub-menu-list not-first" 76 class="sub-menu-list not-first"
77 :scroll-y="true" 77 :scroll-y="true"
78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
79 :scroll-into-view="'second_id'+secondScrollInto" 79 :scroll-into-view="'second_id'+secondScrollInto"
80 > 80 >
81 <block 81 <block
82 v-for="(sub_second,second_index) in sub.submenu" 82 v-for="(sub_second,second_index) in sub.submenu"
83 :key="second_index" 83 :key="second_index"
84 > 84 >
85 <view 85 <view
86 class="sub-menu" 86 class="sub-menu"
87 :id="'second_id'+second_index" 87 :id="'second_id'+second_index"
88 :class="{'on':activeMenuArr[page_index][1]==second_index}" 88 :class="{'on':activeMenuArr[page_index][1]==second_index}"
89 > 89 >
90 <view 90 <view
91 class="menu-name" 91 class="menu-name"
92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)" 92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
93 > 93 >
94 <text>{{sub_second.name}}</text> 94 <text>{{sub_second.name}}</text>
95 <text class="iconfont selected"></text> 95 <text class="iconfont selected"></text>
96 </view> 96 </view>
97 <view 97 <view
98 class="more-sub-menu" 98 class="more-sub-menu"
99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0" 99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
100 > 100 >
101 <block 101 <block
102 v-for="(sub2,sub2_index) in sub_second.submenu" 102 v-for="(sub2,sub2_index) in sub_second.submenu"
103 :key="sub2_index" 103 :key="sub2_index"
104 > 104 >
105 <text 105 <text
106 v-if="sub_second.showAllSub || (sub2_index<8)" 106 v-if="sub_second.showAllSub || (sub2_index<8)"
107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)" 108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
109 >{{sub2.name}}</text> 109 >{{sub2.name}}</text>
110 <text 110 <text
111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" 111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
112 @tap="showMoreSub(second_index)" 112 @tap="showMoreSub(second_index)"
113 >更多<text class="iconfont triangle"></text></text> 113 >更多<text class="iconfont triangle"></text></text>
114 </block> 114 </block>
115 </view> 115 </view>
116 </view> 116 </view>
117 </block> 117 </block>
118 </scroll-view> 118 </scroll-view>
119 </block> 119 </block>
120 </block> 120 </block>
121 <block v-if="page.type=='filter' || page.type=='checkbox'"> 121 <block v-if="page.type=='filter' || page.type=='checkbox'">
122 <view class="filter"> 122 <view class="filter">
123 <scroll-view 123 <scroll-view
124 class="menu-box" 124 class="menu-box"
125 :scroll-y="true" 125 :scroll-y="true"
126 > 126 >
127 <view 127 <view
128 class="box" 128 class="box"
129 v-for="(box,box_index) in page.submenu" 129 v-for="(box,box_index) in page.submenu"
130 :key="box_index" 130 :key="box_index"
131 > 131 >
132 <view class="title">{{box.name}}</view> 132 <view class="title">{{box.name}}</view>
133 <view class="labels"> 133 <view class="labels">
134 <view 134 <view
135 v-for="(label,label_index) in box.submenu" 135 v-for="(label,label_index) in box.submenu"
136 :key="label_index" 136 :key="label_index"
137 @tap="selectFilterLabel(page_index, box_index, label_index)" 137 @tap="selectFilterLabel(page_index, box_index, label_index)"
138 :class="{'on': label.selected}" 138 :class="{'on': label.selected}"
139 >{{label.name}}</view> 139 >{{label.name}}</view>
140 </view> 140 </view>
141 </view> 141 </view>
142 </scroll-view> 142 </scroll-view>
143 <view class="btn-box"> 143 <view class="btn-box">
144 <view 144 <view
145 class="reset" 145 class="reset"
146 @tap="resetFilterData(page_index)" 146 @tap="resetFilterData(page_index)"
147 >重置</view> 147 >重置</view>
148 <view 148 <view
149 class="submit" 149 class="submit"
150 @tap="setFilterData(page_index)" 150 @tap="setFilterData(page_index)"
151 >确定</view> 151 >确定</view>
152 </view> 152 </view>
153 </view> 153 </view>
154 </block> 154 </block>
155 <block v-if="page.type=='radio'"> 155 <block v-if="page.type=='radio'">
156 <view class="filter"> 156 <view class="filter">
157 <scroll-view 157 <scroll-view
158 class="menu-box" 158 class="menu-box"
159 :scroll-y="true" 159 :scroll-y="true"
160 > 160 >
161 <view 161 <view
162 class="box" 162 class="box"
163 v-for="(box,box_index) in page.submenu" 163 v-for="(box,box_index) in page.submenu"
164 :key="box_index" 164 :key="box_index"
165 > 165 >
166 <view class="title">{{box.name}}</view> 166 <view class="title">{{box.name}}</view>
167 <view class="labels"> 167 <view class="labels">
168 <view 168 <view
169 v-for="(label,label_index) in box.submenu" 169 v-for="(label,label_index) in box.submenu"
170 :key="label_index" 170 :key="label_index"
171 @tap="selectRadioLabel(page_index,box_index,label_index)" 171 @tap="selectRadioLabel(page_index,box_index,label_index)"
172 :class="{'on':label.selected}" 172 :class="{'on':label.selected}"
173 >{{label.name}}</view> 173 >{{label.name}}</view>
174 </view> 174 </view>
175 </view> 175 </view>
176 </scroll-view> 176 </scroll-view>
177 <view class="btn-box"> 177 <view class="btn-box">
178 <view 178 <view
179 class="reset" 179 class="reset"
180 @tap="resetFilterData(page_index)" 180 @tap="resetFilterData(page_index)"
181 >重置</view> 181 >重置</view>
182 <view 182 <view
183 class="submit" 183 class="submit"
184 @tap="setFilterData(page_index)" 184 @tap="setFilterData(page_index)"
185 >确定</view> 185 >确定</view>
186 </view> 186 </view>
187 </view> 187 </view>
188 </block> 188 </block>
189 </view> 189 </view>
190 </block> 190 </block>
191 </view> 191 </view>
192 </template> 192 </template>
193 <script> 193 <script>
194 export default { 194 export default {
195 data () { 195 data () {
196 return { 196 return {
197 subData: [], // 菜单数据 197 subData: [], // 菜单数据
198 menu: [], // 顶部横条数据 198 menu: [], // 顶部横条数据
199 showPage: -1, // 菜单页面显示/隐藏动画控制 199 showPage: -1, // 菜单页面显示/隐藏动画控制
200 pageState: [], // 页面的状态 200 pageState: [], // 页面的状态
201 activeMenuArr: [], // UI状态 201 activeMenuArr: [], // UI状态
202 shadowActiveMenuArr: [], // 记录选中 202 shadowActiveMenuArr: [], // 记录选中
203 defaultActive: [], 203 defaultActive: [],
204 triangleDeg: [], // 小三角形的翻转动画控制 204 triangleDeg: [], // 小三角形的翻转动画控制
205 isShowMask: false, // 遮罩层显示/隐藏动画控制 205 isShowMask: false, // 遮罩层显示/隐藏动画控制
206 maskVisibility: false, // 遮罩层显示/隐藏状态 206 maskVisibility: false, // 遮罩层显示/隐藏状态
207 // 滚动区域定位 207 // 滚动区域定位
208 firstScrollInto: 0, 208 firstScrollInto: 0,
209 secondScrollInto: 0, 209 secondScrollInto: 0,
210 componentTop: 0, // 组件top 210 componentTop: 0, // 组件top
211 isReadNewSelect: false, 211 isReadNewSelect: false,
212 on: [1, 0, 0, 0, 0], 212 on: [1, 0, 0, 0, 0],
213 selectedData: {} 213 selectedData: {}
214 } 214 }
215 }, 215 },
216 props: { 216 props: {
217 filterData: { 217 filterData: {
218 value: Array, 218 value: Array,
219 default: [] 219 default: []
220 }, 220 },
221 defaultSelected: { 221 defaultSelected: {
222 value: Array, 222 value: Array,
223 default: [] 223 default: []
224 }, 224 },
225 updateMenuName: { 225 updateMenuName: {
226 value: Boolean, 226 value: Boolean,
227 default: true 227 default: true
228 }, 228 },
229 dataFormat: { 229 dataFormat: {
230 value: String, 230 value: String,
231 default: 'Array' 231 default: 'Array'
232 } 232 }
233 }, 233 },
234 watch: { 234 watch: {
235 filterData: { 235 filterData: {
236 handler () { 236 handler () {
237 this.initMenu() // filterData重新赋值初始化菜单 237 this.initMenu() // filterData重新赋值初始化菜单
238 }, 238 },
239 immediate: true 239 immediate: true
240 }, 240 },
241 defaultSelected (newVal) { 241 defaultSelected (newVal) {
242 if (newVal.length === 0) { 242 if (newVal.length === 0) {
243 return 243 return
244 } 244 }
245 this.defaultActive = JSON.parse(JSON.stringify(newVal)) 245 this.defaultActive = JSON.parse(JSON.stringify(newVal))
246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)) 246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)) 247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
248 } 248 }
249 }, 249 },
250 methods: { 250 methods: {
251 initMenu () { 251 initMenu () {
252 let tmpMenuActiveArr = [] 252 let tmpMenuActiveArr = []
253 const tmpMenu = [] 253 const tmpMenu = []
254 for (let i = 0; i < this.filterData.length; i++) { 254 for (let i = 0; i < this.filterData.length; i++) {
255 let tmpitem = this.filterData[i] 255 let tmpitem = this.filterData[i]
256 tmpMenu.push({ 256 tmpMenu.push({
257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name), 258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
259 type: tmpitem.type, 259 type: tmpitem.type,
260 isNoPull: tmpitem.isNoPull 260 isNoPull: tmpitem.isNoPull
261 }) 261 })
262 // 初始化选中项数组-ui状态 262 // 初始化选中项数组-ui状态
263 tmpMenuActiveArr.push(this.processActive(tmpitem)) 263 tmpMenuActiveArr.push(this.processActive(tmpitem))
264 // 初始化角度数组 264 // 初始化角度数组
265 this.triangleDeg.push(0) 265 this.triangleDeg.push(0)
266 // 初始化控制显示状态数组 266 // 初始化控制显示状态数组
267 this.pageState.push(false) 267 this.pageState.push(false)
268 // 递归处理子菜单数据 268 // 递归处理子菜单数据
269 tmpitem = this.processSubMenu(tmpitem) 269 tmpitem = this.processSubMenu(tmpitem)
270 this.filterData[i] = tmpitem 270 this.filterData[i] = tmpitem
271 if (tmpitem.type === 'filter') { 271 if (tmpitem.type === 'filter') {
272 for (let i = 0; i < tmpitem.length; i++) { 272 for (let i = 0; i < tmpitem.length; i++) {
273 this.selectedData[`${tmpitem.submenu[i].value}`] = [] 273 this.selectedData[`${tmpitem.submenu[i].value}`] = []
274 } 274 }
275 } 275 }
276 } 276 }
277 console.log('this.selectedData', this.selectedData) 277 console.log('this.selectedData', this.selectedData)
278 this.menu = tmpMenu 278 this.menu = tmpMenu
279 // 初始化选中项数组 279 // 初始化选中项数组
280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr 280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
281 this.defaultActive = [] 281 this.defaultActive = []
282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)) 283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
284 // 加载菜单数据 284 // 加载菜单数据
285 this.subData = this.filterData 285 this.subData = this.filterData
286 }, 286 },
287 // 展开更多 287 // 展开更多
288 showMoreSub (index) { 288 showMoreSub (index) {
289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true 289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
290 this.$forceUpdate() 290 this.$forceUpdate()
291 }, 291 },
292 // 选中 292 // 选中
293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) { 293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
294 // 读取记录 294 // 读取记录
295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) { 295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))) 296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
297 } else { 297 } else {
298 this.activeMenuArr[page_index].splice(0, 1, level1_index); 298 this.activeMenuArr[page_index].splice(0, 1, level1_index);
299 (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); 299 (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);
300 (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) 300 (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)
301 } 301 }
302 // 写入结果 302 // 写入结果
303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
304 ) { 304 ) {
305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index] 305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
307 this.togglePage(this.showPage) 307 this.togglePage(this.showPage)
308 } 308 }
309 }, 309 },
310 // 写入结果，筛选 310 // 写入结果，筛选
311 setFilterData (page_index) { 311 setFilterData (page_index) {
312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])) 312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
313 this.togglePage(this.showPage) 313 this.togglePage(this.showPage)
314 }, 314 },
315 // 重置结果和ui，筛选 315 // 重置结果和ui，筛选
316 resetFilterData (page_index) { 316 resetFilterData (page_index) {
317 const tmpArr = [] 317 const tmpArr = []
318 let level = this.shadowActiveMenuArr[page_index].length 318 let level = this.shadowActiveMenuArr[page_index].length
319 while (level > 0) { 319 while (level > 0) {
320 tmpArr.push([]) 320 tmpArr.push([])
321 const box = this.subData[page_index].submenu[level - 1].submenu 321 const box = this.subData[page_index].submenu[level - 1].submenu
322 for (let i = 0; i < box.length; i++) { 322 for (let i = 0; i < box.length; i++) {
323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false 323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false
324 } 324 }
325 level-- 325 level--
326 } 326 }
327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)) 327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
328 this.$forceUpdate() 328 this.$forceUpdate()
329 }, 329 },
330 // 选中筛选类label-UI状态 330 // 选中筛选类label-UI状态
331 selectFilterLabel (page_index, box_index, label_index) { 331 selectFilterLabel (page_index, box_index, label_index) {
332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index) 332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
333 const data = this.filterData[page_index].submenu 333 const data = this.filterData[page_index].submenu
334 const selected = this.selectedData[`${data[box_index].value}`] 334 const selected = this.selectedData[`${data[box_index].value}`]
335 if (findIndex > -1) { 335 if (findIndex > -1) {
336 this.activeMenuArr[page_index][box_index].splice(findIndex, 1) 336 this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
337 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false 337 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
338 for (let i = 0; i < selected.length; i++) { 338 for (let i = 0; i < selected.length; i++) {
339 if (selected[i] === data[box_index].submenu[label_index].value) { 339 if (selected[i] === data[box_index].submenu[label_index].value) {
340 selected.splice(i, 1) 340 selected.splice(i, 1)
341 this.selectedData[`${data[box_index].value}`] = selected 341 this.selectedData[`${data[box_index].value}`] = selected
342 } 342 }
343 } 343 }
344 } else { 344 } else {
345 this.activeMenuArr[page_index][box_index].push(label_index) 345 this.activeMenuArr[page_index][box_index].push(label_index)
346 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true 346 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
347 if (!selected) { 347 if (!selected) {
348 this.selectedData[`${data[box_index].value}`] = [] 348 this.selectedData[`${data[box_index].value}`] = []
349 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 349 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
350 } else { 350 } else {
351 console.log('---', data, this.filterData, this.selectedData) 351 console.log('---', data, this.filterData, this.selectedData)
352 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value) 352 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
353 } 353 }
354 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index]) 354 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
355 } 355 }
356 this.$forceUpdate() 356 this.$forceUpdate()
357 }, 357 },
358 // 选中单选类label-UI状态 358 // 选中单选类label-UI状态
359 selectRadioLabel (pageIndex, boxIndex, labelIndex) { 359 selectRadioLabel (pageIndex, boxIndex, labelIndex) {
360 const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0] 360 const activeIndex = this.activeMenuArr[pageIndex][boxIndex][0]
361 if (activeIndex === labelIndex) { 361 if (activeIndex === labelIndex) {
362 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false 362 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
363 this.activeMenuArr[pageIndex][boxIndex][0] = null 363 this.activeMenuArr[pageIndex][boxIndex][0] = null
364 } else { 364 } else {
365 if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) { 365 if (activeIndex != null && activeIndex < this.subData[pageIndex].submenu[boxIndex].submenu.length) {
366 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false 366 this.subData[pageIndex].submenu[boxIndex].submenu[activeIndex].selected = false
367 } 367 }
368 368
369 this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true 369 this.subData[pageIndex].submenu[boxIndex].submenu[labelIndex].selected = true
370 this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex 370 this.activeMenuArr[pageIndex][boxIndex][0] = labelIndex
371 } 371 }
372 this.$forceUpdate() 372 this.$forceUpdate()
373 }, 373 },
374 // 菜单开关 374 // 菜单开关
375 togglePage (index) { 375 togglePage (index, isRequest = true) {
376 if (index === this.showPage) { 376 if (index === this.showPage) {
377 this.hidePageLayer(true) 377 this.hidePageLayer(true, isRequest)
378 this.hideMask() 378 this.hideMask()
379 this.showPage = -1 379 this.showPage = -1
380 } else { 380 } else {
381 if (this.showPage > -1) { 381 if (this.showPage > -1) {
382 this.hidePageLayer(false) 382 this.hidePageLayer(false, isRequest)
383 } 383 }
384 this.showPageLayer(index) 384 this.showPageLayer(index)
385 this.showMask() 385 this.showMask()
386 } 386 }
387 if (this.on[0] === 1) { 387 if (this.on[0] === 1) {
388 this.on[0] = 0 388 this.on[0] = 0
389 } 389 }
390 this.on[index] = 1 390 this.on[index] = 1
391 }, 391 },
392 showAll () { 392 showAll () {
393 this.on = [1, 0, 0, 0, 0] 393 this.on = [1, 0, 0, 0, 0]
394 // 输出 394 // 输出
395 this.$emit('search', { 395 this.$emit('search', {
396 index: {}, 396 index: {},
397 value: {}, 397 value: {},
398 on: this.on, 398 on: this.on,
399 selectedData: this.selectedData 399 selectedData: this.selectedData
400 }) 400 })
401 }, 401 },
402 // hide遮罩层 402 // hide遮罩层
403 hideMask () { 403 hideMask () {
404 this.isShowMask = false 404 this.isShowMask = false
405 setTimeout(() => { 405 setTimeout(() => {
406 this.maskVisibility = false 406 this.maskVisibility = false
407 }, 200) 407 }, 200)
408 }, 408 },
409 // show遮罩层 409 // show遮罩层
410 showMask () { 410 showMask () {
411 this.maskVisibility = true 411 this.maskVisibility = true
412 this.$nextTick(() => { 412 this.$nextTick(() => {
413 setTimeout(() => { 413 setTimeout(() => {
414 this.isShowMask = true 414 this.isShowMask = true
415 }, 0) 415 }, 0)
416 }) 416 })
417 }, 417 },
418 // hide菜单页 418 // hide菜单页
419 hidePageLayer (isAnimation) { 419 hidePageLayer (isAnimation,isRequset = true) {
420 this.triangleDeg[this.showPage] = 0 420 this.triangleDeg[this.showPage] = 0
421 const tmpIndex = this.showPage 421 const tmpIndex = this.showPage
422 if (isAnimation) { 422 if (isAnimation) {
423 setTimeout(() => { 423 setTimeout(() => {
424 this.pageState.splice(tmpIndex, 1, false) 424 this.pageState.splice(tmpIndex, 1, false)
425 }, 200) 425 }, 200)
426 this.confirm() 426 // debugger
427 if(isRequset){
428 this.confirm()
429 }
427 } else { 430 } else {
428 this.pageState.splice(tmpIndex, 1, false) 431 this.pageState.splice(tmpIndex, 1, false)
429 } 432 }
430 this.firstScrollInto = null 433 this.firstScrollInto = null
431 this.secondScrollInto = null 434 this.secondScrollInto = null
432 }, 435 },
433 confirm () { 436 confirm () {
434 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 437 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
435 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr)) 438 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
436 439
437 // 对结果做一下处理 440 // 对结果做一下处理
438 index.forEach((item, i) => { 441 index.forEach((item, i) => {
439 if (typeof (item[0]) === 'object') { 442 if (typeof (item[0]) === 'object') {
440 // 针对筛选结果过一个排序 443 // 针对筛选结果过一个排序
441 item.forEach((s, j) => { 444 item.forEach((s, j) => {
442 if (s != null) { 445 if (s != null) {
443 s.sort((val1, val2) => { 446 s.sort((val1, val2) => {
444 return val1 - val2 447 return val1 - val2
445 }) 448 })
446 item[j] = s 449 item[j] = s
447 s.forEach((v, k) => { 450 s.forEach((v, k) => {
448 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value 451 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
449 if (this.subData[i].type === 'radio' && value[i][j][k] == null) { 452 if (this.subData[i].type === 'radio' && value[i][j][k] == null) {
450 value[i][j] = [] 453 value[i][j] = []
451 index[i][j] = [] 454 index[i][j] = []
452 } 455 }
453 }) 456 })
454 } 457 }
455 }) 458 })
456 } else { 459 } else {
457 let submenu = this.subData[i].submenu[item[0]] 460 let submenu = this.subData[i].submenu[item[0]]
458 value[i][0] = submenu && submenu.value 461 value[i][0] = submenu && submenu.value
459 if (value[i].length >= 2 && item[1] != null) { 462 if (value[i].length >= 2 && item[1] != null) {
460 if (submenu.submenu.length > 0) { 463 if (submenu.submenu.length > 0) {
461 submenu = submenu.submenu[item[1]] 464 submenu = submenu.submenu[item[1]]
462 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null 465 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
463 } else { 466 } else {
464 value[i][1] = null 467 value[i][1] = null
465 } 468 }
466 if (value[i].length >= 3 && item[2] != null) { 469 if (value[i].length >= 3 && item[2] != null) {
467 if (submenu.submenu.length > 0) { 470 if (submenu.submenu.length > 0) {
468 submenu = submenu.submenu[item[2]] 471 submenu = submenu.submenu[item[2]]
469 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null 472 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
470 } else { 473 } else {
471 value[i][2] = null 474 value[i][2] = null
472 } 475 }
473 } 476 }
474 } 477 }
475 } 478 }
476 index[i] = item 479 index[i] = item
477 }) 480 })
478 // 输出 481 // 输出
479 this.$emit('search', { 482 this.$emit('search', {
480 index: index, 483 index: index,
481 value: value, 484 value: value,
482 on: this.on, 485 on: this.on,
483 selectedData: this.selectedData 486 selectedData: this.selectedData
484 }) 487 })
485 }, 488 },
486 // show菜单页 489 // show菜单页
487 showPageLayer (index) { 490 showPageLayer (index) {
488 this.processPage(index) 491 this.processPage(index)
489 this.pageState.splice(index, 1, true) 492 this.pageState.splice(index, 1, true)
490 this.$nextTick(() => { 493 this.$nextTick(() => {
491 setTimeout(() => { 494 setTimeout(() => {
492 this.showPage = index 495 this.showPage = index
493 }, 0) 496 }, 0)
494 }) 497 })
495 this.triangleDeg[index] = 180 498 this.triangleDeg[index] = 180
496 }, 499 },
497 reloadActiveMenuArr () { 500 reloadActiveMenuArr () {
498 for (let i = 0; i < this.filterData.length; i++) { 501 for (let i = 0; i < this.filterData.length; i++) {
499 let tmpitem = this.filterData[i] 502 let tmpitem = this.filterData[i]
500 const tmpArr = this.processActive(tmpitem) 503 const tmpArr = this.processActive(tmpitem)
501 tmpitem = this.processSubMenu(tmpitem) 504 tmpitem = this.processSubMenu(tmpitem)
502 if (this.activeMenuArr[i].length !== tmpArr.length) { 505 if (this.activeMenuArr[i].length !== tmpArr.length) {
503 this.filterData[i] = tmpitem 506 this.filterData[i] = tmpitem
504 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 507 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
505 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr))) 508 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
506 } 509 }
507 } 510 }
508 this.subData = this.filterData 511 this.subData = this.filterData
509 this.$forceUpdate() 512 this.$forceUpdate()
510 }, 513 },
511 processPage (index) { 514 processPage (index) {
512 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步 515 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
513 this.reloadActiveMenuArr() 516 this.reloadActiveMenuArr()
514 // 重置UI控制数组 517 // 重置UI控制数组
515 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index]))) 518 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
516 if (this.menu[index].type === 'filter') { 519 if (this.menu[index].type === 'filter') {
517 // 重载筛选页选中状态 520 // 重载筛选页选中状态
518 const level = this.shadowActiveMenuArr[index].length 521 const level = this.shadowActiveMenuArr[index].length
519 for (let i = 0; i < level; i++) { 522 for (let i = 0; i < level; i++) {
520 const box = this.subData[index].submenu[i].submenu 523 const box = this.subData[index].submenu[i].submenu
521 for (let j = 0; j < box.length; j++) { 524 for (let j = 0; j < box.length; j++) {
522 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 525 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
523 this.subData[index].submenu[i].submenu[j].selected = true 526 this.subData[index].submenu[i].submenu[j].selected = true
524 } else { 527 } else {
525 this.subData[index].submenu[i].submenu[j].selected = false 528 this.subData[index].submenu[i].submenu[j].selected = false
526 } 529 }
527 } 530 }
528 } 531 }
529 } else if (this.menu[index].type === 'hierarchy') { 532 } else if (this.menu[index].type === 'hierarchy') {
530 this.$nextTick(() => { 533 this.$nextTick(() => {
531 setTimeout(() => { 534 setTimeout(() => {
532 // 滚动到选中项 535 // 滚动到选中项
533 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]) 536 this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
534 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]) 537 this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
535 }, 0) 538 }, 0)
536 }) 539 })
537 } else if (this.menu[index].type === 'radio') { 540 } else if (this.menu[index].type === 'radio') {
538 // 重载筛选页选中状态 541 // 重载筛选页选中状态
539 const level = this.shadowActiveMenuArr[index].length 542 const level = this.shadowActiveMenuArr[index].length
540 for (let i = 0; i < level; i++) { 543 for (let i = 0; i < level; i++) {
541 const box = this.subData[index].submenu[i].submenu 544 const box = this.subData[index].submenu[i].submenu
542 for (let j = 0; j < box.length; j++) { 545 for (let j = 0; j < box.length; j++) {
543 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) { 546 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
544 this.subData[index].submenu[i].submenu[j].selected = true 547 this.subData[index].submenu[i].submenu[j].selected = true
545 } else { 548 } else {
546 this.subData[index].submenu[i].submenu[j].selected = false 549 this.subData[index].submenu[i].submenu[j].selected = false
547 } 550 }
548 } 551 }
549 } 552 }
550 } 553 }
551 }, 554 },
552 processActive (tmpitem) { 555 processActive (tmpitem) {
553 const tmpArr = [] 556 const tmpArr = []
554 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) { 557 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
555 let level = this.getMaxFloor(tmpitem.submenu) 558 let level = this.getMaxFloor(tmpitem.submenu)
556 while (level > 0) { 559 while (level > 0) {
557 tmpArr.push(0) 560 tmpArr.push(0)
558 level-- 561 level--
559 } 562 }
560 } else if (tmpitem.type === 'filter') { 563 } else if (tmpitem.type === 'filter') {
561 let level = tmpitem.submenu.length 564 let level = tmpitem.submenu.length
562 while (level > 0) { 565 while (level > 0) {
563 tmpArr.push([]) 566 tmpArr.push([])
564 level-- 567 level--
565 } 568 }
566 } else if (tmpitem.type === 'radio') { 569 } else if (tmpitem.type === 'radio') {
567 let level = tmpitem.submenu.length 570 let level = tmpitem.submenu.length
568 while (level > 0) { 571 while (level > 0) {
569 tmpArr.push([]) 572 tmpArr.push([])
570 level-- 573 level--
571 } 574 }
572 } 575 }
573 return tmpArr 576 return tmpArr
574 }, 577 },
575 processSubMenu (menu) { 578 processSubMenu (menu) {
576 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) { 579 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
577 for (let i = 0; i < menu.submenu.length; i++) { 580 for (let i = 0; i < menu.submenu.length; i++) {
578 menu.submenu[i] = this.processSubMenu(menu.submenu[i]) 581 menu.submenu[i] = this.processSubMenu(menu.submenu[i])
579 } 582 }
580 } else { 583 } else {
581 menu.submenu = [] 584 menu.submenu = []
582 } 585 }
583 return menu 586 return menu
584 }, 587 },
585 // 计算菜单层级 588 // 计算菜单层级
586 getMaxFloor (treeData) { 589 getMaxFloor (treeData) {
587 const floor = 0 590 const floor = 0
588 let max = 0 591 let max = 0
589 function each (data, floor) { 592 function each (data, floor) {
590 data.forEach(e => { 593 data.forEach(e => {
591 max = floor > max ? floor : max 594 max = floor > max ? floor : max
592 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) { 595 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
593 each(e.submenu, floor + 1) 596 each(e.submenu, floor + 1)
594 } 597 }
595 }) 598 })
596 } 599 }
597 each(treeData, 1) 600 each(treeData, 1)
598 601
599 return max 602 return max
600 }, 603 },
601 discard () { 604 discard () {
602 605
603 } 606 }
604 } 607 }
605 } 608 }
606 </script> 609 </script>
607 <style lang="scss"> 610 <style lang="scss">
608 .HMfilterDropdown { 611 .HMfilterDropdown {
609 flex-shrink: 0; 612 flex-shrink: 0;
610 width: 100%; 613 width: 100%;
611 height: 44px; 614 height: 44px;
612 position: fixed; 615 position: fixed;
613 z-index: 997; 616 z-index: 997;
614 flex-wrap: nowrap; 617 flex-wrap: nowrap;
615 display: flex; 618 display: flex;
616 flex-direction: row; 619 flex-direction: row;
617 top: var(--window-top); 620 top: var(--window-top);
618 left: 0; 621 left: 0;
619 view { 622 view {
620 display: flex; 623 display: flex;
621 flex-wrap: nowrap; 624 flex-wrap: nowrap;
622 } 625 }
623 } 626 }
624 .region { 627 .region {
625 flex: 1; 628 flex: 1;
626 height: 44px; 629 height: 44px;
627 } 630 }
628 .nav { 631 .nav {
629 width: 100%; 632 width: 100%;
630 height: 44px; 633 height: 44px;
631 z-index: 12; 634 z-index: 12;
632 background-color: #ffffff; 635 background-color: #ffffff;
633 flex-direction: row; 636 flex-direction: row;
634 .first-menu { 637 .first-menu {
635 width: 100%; 638 width: 100%;
636 font-size: 16px; 639 font-size: 16px;
637 color: #333333; 640 color: #333333;
638 flex-direction: row; 641 flex-direction: row;
639 align-items: center; 642 align-items: center;
640 justify-content: center; 643 justify-content: center;
641 transition: color 0.2s linear; 644 transition: color 0.2s linear;
642 645
643 &.on { 646 &.on {
644 color: #ff6b4a; 647 color: #ff6b4a;
645 648
646 .iconfont { 649 .iconfont {
647 color: #ff6b4a; 650 color: #ff6b4a;
648 } 651 }
649 } 652 }
650 .name { 653 .name {
651 height: 20px; 654 height: 20px;
652 // font-size: 16px; 655 // font-size: 16px;
653 text-align: center; 656 text-align: center;
654 text-overflow: clip; 657 text-overflow: clip;
655 overflow: hidden; 658 overflow: hidden;
656 } 659 }
657 .iconfont { 660 .iconfont {
658 width: 13px; 661 width: 13px;
659 height: 13px; 662 height: 13px;
660 line-height: 16px; 663 line-height: 16px;
661 align-items: center; 664 align-items: center;
662 justify-content: center; 665 justify-content: center;
663 transition: transform 0.2s linear, color 0.2s linear; 666 transition: transform 0.2s linear, color 0.2s linear;
664 } 667 }
665 } 668 }
666 } 669 }
667 .sub-menu-class { 670 .sub-menu-class {
668 width: 100%; 671 width: 100%;
669 position: absolute; 672 position: absolute;
670 left: 0; 673 left: 0;
671 transform: translate3d(0, -100%, 0); 674 transform: translate3d(0, -100%, 0);
672 max-height: 345px; 675 max-height: 345px;
673 background-color: #ffffff; 676 background-color: #ffffff;
674 z-index: 11; 677 z-index: 11;
675 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); 678 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
676 overflow: hidden; 679 overflow: hidden;
677 flex-direction: row; 680 flex-direction: row;
678 transition: transform 0.15s linear; 681 transition: transform 0.15s linear;
679 &.hide { 682 &.hide {
680 display: none; 683 display: none;
681 } 684 }
682 685
683 &.show { 686 &.show {
684 transform: translate3d(0, calc(44px + 1rpx), 0); 687 transform: translate3d(0, calc(44px + 1rpx), 0);
685 } 688 }
686 } 689 }
687 .sub-menu-list { 690 .sub-menu-list {
688 width: 100%; 691 width: 100%;
689 height: 345px; 692 height: 345px;
690 flex-direction: column; 693 flex-direction: column;
691 .sub-menu { 694 .sub-menu {
692 min-height: 44px; 695 min-height: 44px;
693 font-size: 13px; 696 font-size: 13px;
694 flex-direction: column; 697 flex-direction: column;
695 padding-right: 15px; 698 padding-right: 15px;
696 > .menu-name { 699 > .menu-name {
697 height: 44px; 700 height: 44px;
698 flex-direction: row; 701 flex-direction: row;
699 align-items: center; 702 align-items: center;
700 justify-content: space-between; 703 justify-content: space-between;
701 > .iconfont { 704 > .iconfont {
702 display: none; 705 display: none;
703 font-size: 18px; 706 font-size: 18px;
704 color: #ff6b4a; 707 color: #ff6b4a;
705 } 708 }
706 } 709 }
707 } 710 }
708 &.first { 711 &.first {
709 flex-shrink: 0; 712 flex-shrink: 0;
710 width: 236rpx; 713 width: 236rpx;
711 background-color: #f0f0f0; 714 background-color: #f0f0f0;
712 .sub-menu { 715 .sub-menu {
713 padding-left: 15px; 716 padding-left: 15px;
714 717
715 &.on { 718 &.on {
716 background-color: #fff; 719 background-color: #fff;
717 } 720 }
718 } 721 }
719 } 722 }
720 &.alone { 723 &.alone {
721 max-height: 345px; 724 max-height: 345px;
722 min-height: 60rpx; 725 min-height: 60rpx;
723 height: auto; 726 height: auto;
724 .sub-menu { 727 .sub-menu {
725 min-height: calc(44px - 1rpx); 728 min-height: calc(44px - 1rpx);
726 margin-left: 15px; 729 margin-left: 15px;
727 border-bottom: solid 1rpx #e5e5e5; 730 border-bottom: solid 1rpx #e5e5e5;
728 731
729 &.on { 732 &.on {
730 color: #ff6b4a; 733 color: #ff6b4a;
731 734
732 > .menu-name { 735 > .menu-name {
733 > .iconfont { 736 > .iconfont {
734 display: block; 737 display: block;
735 } 738 }
736 } 739 }
737 } 740 }
738 } 741 }
739 } 742 }
740 &.not-first { 743 &.not-first {
741 .sub-menu { 744 .sub-menu {
742 min-height: calc(44px - 1rpx); 745 min-height: calc(44px - 1rpx);
743 margin-left: 15px; 746 margin-left: 15px;
744 border-bottom: solid 1rpx #e5e5e5; 747 border-bottom: solid 1rpx #e5e5e5;
745 > .menu-name { 748 > .menu-name {
746 height: calc(44px - 1rpx); 749 height: calc(44px - 1rpx);
747 > .iconfont { 750 > .iconfont {
748 display: none; 751 display: none;
749 font-size: 18px; 752 font-size: 18px;
750 color: #ff6b4a; 753 color: #ff6b4a;
751 } 754 }
752 } 755 }
753 &.on { 756 &.on {
754 color: #ff6b4a; 757 color: #ff6b4a;
755 > .menu-name { 758 > .menu-name {
756 > .iconfont { 759 > .iconfont {
757 display: block; 760 display: block;
758 } 761 }
759 } 762 }
760 } 763 }
761 .more-sub-menu { 764 .more-sub-menu {
762 flex-direction: row; 765 flex-direction: row;
763 flex-wrap: wrap; 766 flex-wrap: wrap;
764 padding-bottom: 9px; 767 padding-bottom: 9px;
765 > text { 768 > text {
766 height: 30px; 769 height: 30px;
767 border-radius: 3px; 770 border-radius: 3px;
768 background-color: #f5f5f5; 771 background-color: #f5f5f5;
769 color: #9b9b9b; 772 color: #9b9b9b;
770 margin-bottom: 6px; 773 margin-bottom: 6px;
771 margin-right: 6px; 774 margin-right: 6px;
772 text-align: center; 775 text-align: center;
773 line-height: 30px; 776 line-height: 30px;
774 border: solid #f5f5f5 1rpx; 777 border: solid #f5f5f5 1rpx;
775 flex: 0 0 calc(33.33% - 6px); 778 flex: 0 0 calc(33.33% - 6px);
776 overflow: hidden; 779 overflow: hidden;
777 font-size: 12px; 780 font-size: 12px;
778 &:nth-child(3n) { 781 &:nth-child(3n) {
779 margin-right: 0; 782 margin-right: 0;
780 } 783 }
781 &.on { 784 &.on {
782 border-color: #f6c8ac; 785 border-color: #f6c8ac;
783 color: #ff6b4a; 786 color: #ff6b4a;
784 } 787 }
785 .iconfont { 788 .iconfont {
786 color: #9b9b9b; 789 color: #9b9b9b;
787 } 790 }
788 } 791 }
789 } 792 }
790 } 793 }
791 } 794 }
792 } 795 }
793 .filter { 796 .filter {
794 width: 100%; 797 width: 100%;
795 height: 345px; 798 height: 345px;
796 display: flex; 799 display: flex;
797 flex-direction: column; 800 flex-direction: column;
798 justify-content: space-between; 801 justify-content: space-between;
799 align-items: center; 802 align-items: center;
800 .menu-box { 803 .menu-box {
801 width: 698rpx; 804 width: 698rpx;
802 height: calc(345px - 75px); 805 height: calc(345px - 75px);
803 flex-shrink: 1; 806 flex-shrink: 1;
804 .box { 807 .box {
805 width: 100%; 808 width: 100%;
806 margin-top: 16px; 809 margin-top: 16px;
807 flex-direction: column; 810 flex-direction: column;
808 .title { 811 .title {
809 width: 100%; 812 width: 100%;
810 font-size: 13px; 813 font-size: 13px;
811 color: #888; 814 color: #888;
812 } 815 }
813 .labels { 816 .labels {
814 flex-direction: row; 817 flex-direction: row;
815 flex-wrap: wrap; 818 flex-wrap: wrap;
819 justify-content: space-between;
816 .on { 820 .on {
817 border-color: #ff6b4a; 821 border-color: #ff6b4a;
818 background-color: #ff6b4a; 822 background-color: #ff6b4a;
819 color: #fff; 823 color: #fff;
820 } 824 }
821 > view { 825 > view {
822 width: 148rpx; 826 width: 220rpx;
823 height: 30px; 827 height: 30px;
824 border: solid 1rpx #adadad; 828 border: solid 1rpx #adadad;
825 border-radius: 2px; 829 border-radius: 2px;
826 margin-right: 15px; 830 margin-right: 2px;
827 margin-top: 8px; 831 margin-top: 8px;
828 padding: 0 16rpx; 832 padding: 0 10rpx;
829 box-sizing: border-box; 833 box-sizing: border-box;
830 font-size: 12px; 834 font-size: 12px;
831 flex-direction: row; 835 flex-direction: row;
832 justify-content: center; 836 justify-content: center;
833 align-items: center; 837 align-items: center;
834 overflow: hidden; 838 overflow: hidden;
835 white-space: nowrap; 839 white-space: nowrap;
836 text-overflow: ellipsis; 840 text-overflow: ellipsis;
837 &:nth-child(4n) { 841 &:nth-child(4n) {
838 margin-right: 0; 842 margin-right: 0;
839 } 843 }
840 } 844 }
841 } 845 }
842 } 846 }
843 } 847 }
844 .btn-box { 848 .btn-box {
845 flex-shrink: 0; 849 flex-shrink: 0;
846 width: 100%; 850 width: 100%;
847 height: 75px; 851 height: 75px;
848 flex-direction: row !important; 852 flex-direction: row !important;
849 align-items: center; 853 align-items: center;
850 justify-content: space-between; 854 justify-content: space-between;
851 > view { 855 > view {
852 width: 320rpx; 856 width: 320rpx;
853 height: 40px; 857 height: 40px;
854 border-radius: 40px; 858 border-radius: 40px;
855 border: solid 1rpx #ff6b4a; 859 border: solid 1rpx #ff6b4a;
856 align-items: center; 860 align-items: center;
857 justify-content: center; 861 justify-content: center;
858 } 862 }
859 .reset { 863 .reset {
860 color: #ff6b4a; 864 color: #ff6b4a;
861 } 865 }
862 .submit { 866 .submit {
863 color: #fff; 867 color: #fff;
864 background-color: #ff6b4a; 868 background-color: #ff6b4a;
865 } 869 }
866 } 870 }
867 } 871 }
868 .mask { 872 .mask {
869 z-index: 10; 873 z-index: 10;
870 position: fixed; 874 position: fixed;
871 top: 0; 875 top: 0;
872 left: 0; 876 left: 0;
873 right: 0; 877 right: 0;
874 bottom: 0; 878 bottom: 0;
875 background-color: rgba(0, 0, 0, 0); 879 background-color: rgba(0, 0, 0, 0);
876 transition: background-color 0.15s linear; 880 transition: background-color 0.15s linear;
877 &.show { 881 &.show {
878 background-color: rgba(0, 0, 0, 0.5); 882 background-color: rgba(0, 0, 0, 0.5);
879 } 883 }
880 &.hide { 884 &.hide {
881 display: none; 885 display: none;
882 } 886 }
883 } 887 }
884 /* 字体图标 */ 888 /* 字体图标 */
885 @font-face { 889 @font-face {
886 font-family: "HM-FD-font"; 890 font-family: "HM-FD-font";
887 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="); 891 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=");
888 } 892 }
889 .iconfont { 893 .iconfont {
890 font-family: "HM-FD-font" !important; 894 font-family: "HM-FD-font" !important;
891 font-size: 13px; 895 font-size: 13px;
892 font-style: normal; 896 font-style: normal;
893 color: #757575; 897 color: #757575;
894 &.triangle { 898 &.triangle {
895 &:before { 899 &:before {
896 content: "\e65a"; 900 content: "\e65a";
897 } 901 }
898 } 902 }
899 &.selected { 903 &.selected {
900 &:before { 904 &:before {
901 content: "\e607"; 905 content: "\e607";
902 } 906 }
903 } 907 }
904 } 908 }
905 </style> 909 </style>
906 910
src/components/sl-filter/filter-view.vue
Diff comments   View file @6cba581
File was created 1 <template>
2
3 <view>
4 <view style="padding: 0px 0px;">
5 <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
6 <view v-if="item.isSort">
7 <view class="filter-content-list">
8 <view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
9 :style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
10 <text>{{detailItem.title}}</text>
11 </view>
12 </view>
13 </view>
14 <view v-else>
15 <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
16 <text>{{item.detailTitle}}</text>
17 </view>
18 <view class="filter-content-detail">
19 <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
20 @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
21 {{detailItem.title}}
22 </text>
23 </view>
24 <view class="filter-content-footer">
25 <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)">
26 <text>重置</text>
27 </view>
28 <view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
29 <text>确定</text>
30 </view>
31 </view>
32 </view>
33 </view>
34 </view>
35 </view>
36
37 </template>
38
39 <script>
40 export default {
41 data() {
42 return {
43 selectArr: [],
44 result: {},
45 menuIndex: 0,
46 selectDetailList: [],
47 independenceObj: {},
48 selectedKey: '',
49 cacheSelectedObj: {},
50 defaultSelectedTitleObj: {}
51 };
52 },
53 props: {
54 themeColor: {
55 type: String,
56 default () {
57 return '#D1372C'
58 }
59 },
60 menuList: {
61 type: Array,
62 default () {
63 return []
64 }
65 },
66 independence: {
67 type: Boolean,
68 default: false
69 }
70 },
71 computed: {
72 selectedTitleObj() {
73 let obj = {}
74 for (let i = 0; i < this.menuList.length; i++) {
75 let item = this.menuList[i];
76 obj[item.key] = item.title;
77 }
78 return obj;
79 },
80 defaultSelectedObj() { // 保存初始状态
81 return this.getSelectedObj()
82 },
83 selectedObj: {
84 get() {
85 return this.getSelectedObj()
86 },
87 set(newObj) {
88 return newObj;
89 }
90
91 }
92 },
93 methods: {
94 getSelectedObj() {
95 let obj = {}
96 for (let i = 0; i < this.menuList.length; i++) {
97 let item = this.menuList[i];
98 if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
99
100 if (item.isMutiple) {
101 obj[item.key] = [];
102 item.detailList[0].isSelected = false;
103 if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
104 item.defaultSelectedIndex = [item.defaultSelectedIndex];
105 }
106 for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
107 item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
108 obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
109 }
110
111 } else {
112 obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
113 this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
114 this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
115 item.detailList[0].isSelected = false;
116 item.detailList[item.defaultSelectedIndex].isSelected = true;
117 }
118 } else {
119 if (item.isMutiple) {
120 obj[item.key] = [];
121 } else {
122 obj[item.key] = '';
123 }
124 }
125 }
126 this.result = obj;
127 return obj;
128 },
129 // 重置所有选项，包括默认选项，并更新result
130 resetAllSelect(callback) {
131 let titles = [];
132 for (let i = 0; i < this.menuList.length; i++) {
133 this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
134 titles[this.menuList[i].key] = this.menuList[i].title;
135 }
136 let obj = {
137 'result': this.result,
138 'titles': titles,
139 'isReset': true
140 }
141 this.$emit("confirm", obj);
142 callback(this.result);
143 },
144 // 重置选项为设置的默认值，并更新result
145 resetSelectToDefault(callback) {
146 for (let i = 0; i < this.menuList.length; i++) {
147 this.selectDetailList = this.menuList[i].detailList;
148
149 if (this.menuList[i].defaultSelectedIndex) {
150 if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
151 for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
152 if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
153 this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
154 .menuList[i].key)
155 }
156 }
157 } else {
158 this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
159 i].key)
160 }
161
162 // 获取非默认项的下标
163 let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
164 // 把所有不是默认的为true的点为false
165 for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
166 if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
167 this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
168 .menuList[i].key)
169 }
170 }
171 }
172
173
174 }
175
176 this.selectedObj = this.defaultSelectedObj;
177 this.result = this.defaultSelectedObj;
178 let obj = {
179 'result': this.result,
180 'titles': this.defaultSelectedTitleObj,
181 'isReset': true
182 }
183 this.$emit("confirm", obj);
184 callback(this.result)
185 },
186 getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
187 let tempDefault = menuListItem.defaultSelectedIndex;
188 if (!Array.isArray(tempDefault)) {
189 tempDefault = [tempDefault];
190 }
191 // 获取所有项的下标 组成新的数组
192 let all = [];
193 for (let i = 0; i < menuListItem.detailList.length; i++) {
194 all.push(i)
195 }
196 // 将默认选中的数组与所有项的数组的不同值合并为一个新数组
197 var unDefaultSelectedIndex = tempDefault.filter(function(v) {
198 return !(all.indexOf(v) > -1)
199 }).concat(all.filter(function(v) {
200 return !(tempDefault.indexOf(v) > -1)
201 }));
202 return unDefaultSelectedIndex;
203 },
204 resetMenuList(val) {
205 this.menuList = val;
206 this.$emit('update:menuList', val)
207 },
208 menuTabClick(index) {
209 this.menuIndex = index;
210 this.selectDetailList = this.menuList[index].detailList;
211 this.selectedKey = this.menuList[index].key;
212 // 如果是独立菜单
213 if (this.independence && !this.menuList[index].isSort) {
214 if (JSON.stringify(this.independenceObj) == '{}') {
215 this.initIndependenceObj(index);
216 } else {
217 for (let key in this.independenceObj) {
218 if (key != this.selectedKey) {
219 this.initIndependenceObj(index);
220 this.resetSelected(this.menuList[index].detailList, this.selectedKey);
221 }
222 }
223 }
224
225 }
226 if (this.independence && this.menuList[index].isSort) {
227
228 this.independenceObj = {};
229
230
231 }
232 if (this.independence) {
233 let idx = this.menuList[index].defaultSelectedIndex;
234 if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
235 if (this.menuList[index].isMutiple) {
236 for (let i = 0; i < idx.length; i++) {
237 if (this.menuList[index].detailList[idx[i]].isSelected == false) {
238 this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
239 }
240
241 }
242 } else {
243 if (this.menuList[index].detailList[idx].isSelected == false) {
244
245 this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
246
247 }
248 }
249
250 }
251 }
252
253
254 // #ifdef H5
255 this.selectedObj = this.selectedObj;
256 this.$forceUpdate();
257 // #endif
258 },
259 initIndependenceObj(index) {
260 this.independenceObj = {};
261 if (this.menuList[index].isMutiple) {
262 this.independenceObj[this.selectedKey] = [];
263 } else {
264 this.independenceObj[this.selectedKey] = '';
265 }
266 },
267 itemTap(index, list, isMutiple, key) {
268 if (isMutiple == true) {
269 list[index].isSelected = !list[index].isSelected;
270 if (index == 0) {
271 this.resetSelected(list, key)
272 if (!this.independence) {
273 this.selectedTitleObj[key] = list[index].title;
274 }
275 } else {
276 list[0].isSelected = false
277 if (list[index].isSelected) {
278 if (this.independence) {
279 this.independenceObj[this.selectedKey].push(list[index].value);
280 } else {
281 this.selectedObj[key].push(list[index].value);
282 }
283 } else {
284 list[index].isSelected = false;
285 if (this.independence) {
286 var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
287 this.independenceObj[this.selectedKey].splice(idx, 1);
288 } else {
289 var idx = this.selectedObj[key].indexOf(list[index].value);
290 this.selectedObj[key].splice(idx, 1);
291 }
292
293 }
294 if (this.independence) {
295 this.result = this.independenceObj;
296 } else {
297 this.result = this.selectedObj;
298 }
299
300 }
301 } else {
302 if (index == 0) {
303 this.resetSelected(list, key)
304 if (!this.independence) {
305 this.selectedTitleObj[key] = list[index].title;
306 }
307 } else {
308 list[0].isSelected = false
309 if (this.independence) {
310 this.independenceObj[this.selectedKey] = list[index].value;
311 this.result = this.independenceObj;
312 } else {
313 this.selectedObj[key] = list[index].value;
314 this.result = this.selectedObj;
315 this.selectedTitleObj[key] = list[index].title;
316 }
317
318 for (let i = 0; i < list.length; i++) {
319 if (index == i) {
320 list[i].isSelected = true
321 } else {
322 list[i].isSelected = false
323 }
324 }
325 }
326 }
327 // #ifdef H5
328 this.$forceUpdate();
329 // #endif
330 },
331 resetSelected(list, key) {
332 if (typeof this.result[key] == 'object') {
333 this.result[key] = [];
334 this.selectedTitleObj[key] = list[0].title;
335 } else {
336 this.result[key] = '';
337 this.selectedTitleObj[key] = list[0].title;
338 }
339 for (let i = 0; i < list.length; i++) {
340 if (i == 0) {
341 list[i].isSelected = true;
342 } else {
343 list[i].isSelected = false;
344 }
345 }
346 // #ifdef H5
347 this.$forceUpdate();
348 // #endif
349 },
350 sortTap(index, list, key) {
351 if (this.independence) {
352 this.independenceObj[this.selectedKey] = list[index].value;
353 this.result = this.independenceObj;
354 } else {
355 this.selectedObj[key] = list[index].value;
356 this.result = this.selectedObj;
357 this.selectedTitleObj[key] = list[index].title;
358 }
359
360 for (let i = 0; i < list.length; i++) {
361 if (index == i) {
362 list[i].isSelected = true;
363 } else {
364 list[i].isSelected = false;
365 }
366 }
367 let obj = {
368 'result': this.result,
369 'titles': this.selectedTitleObj,
370 'isReset': false
371 }
372 this.$emit("confirm", obj);
373 },
374 sureClick() {
375 let obj = {
376 'result': this.result,
377 'titles': this.selectedTitleObj,
378 'isReset': false
379 }
380 this.$emit("confirm", obj);
381 },
382 resetClick(list, key) {
383 this.resetSelected(list, key)
384 }
385 }
386 }
387 </script>
388
389 <style>
390 .filter-content {
391 background-color: #F6F7F8;
392 }
393
394 .filter-content-title {
395 border-bottom: #EEEEEE 1px solid;
396 padding: 10px 15px;
397 font-size: 13px;
398 color: #999999;
399 }
400
401 .filter-content-detail {
402 padding: 5px 15px;
403 }
404
405 .filter-content-detail-item-active {
406 background-color: #D1372C;
407 color: #FFFFFF;
408 padding: 5px 15px;
409 border-radius: 20px;
410 margin-right: 10px;
411 margin-top: 10px;
412 display: inline-block;
413 font-size: 14px;
414 }
415
416 .filter-content-detail-item-default {
417 background-color: #FFFFFF;
418 color: #666666;
419 padding: 5px 15px;
420 border-radius: 20px;
421 margin-right: 10px;
422 margin-top: 10px;
423 display: inline-block;
424 font-size: 14px;
425 }
426
427 .filter-content-footer {
428 display: flex;
429 justify-content: space-between;
430 width: 100%;
431 height: 45px;
432 margin-top: 10px;
433 }
434
435 .filter-content-footer-item {
436 width: 50%;
437 display: flex;
438 justify-content: center;
439 align-items: center;
440 font-size: 16px;
441 }
442
443 .filter-content-list {
444
445 padding: 5px 15px;
446 }
447
448 .filter-content-list-item-default {
449 color: #666666;
450 width: 100%;
451 padding: 10px 0px;
452 }
453
454 .filter-content-list-item-default text {
455 width: 90%;
456 font-size: 14px;
457 display: inline-block;
458 }
459
460 .filter-content-list-item-active {
461 color: #D1372C;
462 width: 100%;
463 padding: 10px 0px;
464 }
465
466 .filter-content-list-item-active text {
467 font-size: 14px;
468 width: 90%;
469 display: inline-block;
470 }
471
472 .filter-content-list-item-active:after {
473 content: '✓';
474 }
475 </style>
476
src/components/sl-filter/iconfont/iconfont.css
Diff comments   View file @6cba581
File was created 1 @font-face {
2 font-family: 'sl-font';
3 src: url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzI8kEgOAAABfAAAAFZjbWFwZO3RAgAAAeAAAAGGZ2x5Zh0ZI/EAAANwAAAAyGhlYWQVZkUXAAAA4AAAADZoaGVhB94DhAAAALwAAAAkaG10eAwAAAAAAAHUAAAADGxvY2EAMgBkAAADaAAAAAhtYXhwAREAKAAAARgAAAAgbmFtZT5U/n0AAAQ4AAACbXBvc3TohGjqAAAGqAAAADMAAQAAA4D/gABcBAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAMAAQAAAAEAANxW6kVfDzz1AAsEAAAAAADZJADbAAAAANkkANsAAAAABAACZAAAAAgAAgAAAAAAAAABAAAAAwAcAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQQAAZAABQAIAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5hrmHAOA/4AAXAOAAIAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAABQAAAAMAAAAsAAAABAAAAV4AAQAAAAAAWAADAAEAAAAsAAMACgAAAV4ABAAsAAAABgAEAAEAAuYa5hz//wAA5hrmHP//AAAAAAABAAYABgAAAAEAAgAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAKAAAAAAAAAACAADmGgAA5hoAAAABAADmHAAA5hwAAAACAAAAAAAAADIAZAAEAAAAAAOlAmQAEwAWABkAGgAAEwEWMjcBNjIWFAcBBiInASY0NjIBMDEVMDEnmQFgAgoDAV8LHRUK/n8LHAv+fwoVHQFoAQJZ/qEDAwFfCxYcC/6ACwsBgAsdFf6bAgQAAAAABAAAAAADpAJkABMAFgAZABsAACUBJiIHAQYiJjQ3ATYyFwEWFAYiATAxNTAxFzEDZ/6hAwoD/qELHRUKAYELHAsBgQoVHf6YAacBXwMD/qELFhwLAYEKCv5/CxwWAWUCBAAAAAAAEgDeAAEAAAAAAAAAFQAAAAEAAAAAAAEACAAVAAEAAAAAAAIABwAdAAEAAAAAAAMACAAkAAEAAAAAAAQACAAsAAEAAAAAAAUACwA0AAEAAAAAAAYACAA/AAEAAAAAAAoAKwBHAAEAAAAAAAsAEwByAAMAAQQJAAAAKgCFAAMAAQQJAAEAEACvAAMAAQQJAAIADgC/AAMAAQQJAAMAEADNAAMAAQQJAAQAEADdAAMAAQQJAAUAFgDtAAMAAQQJAAYAEAEDAAMAAQQJAAoAVgETAAMAAQQJAAsAJgFpCkNyZWF0ZWQgYnkgaWNvbmZvbnQKaWNvbmZvbnRSZWd1bGFyaWNvbmZvbnRpY29uZm9udFZlcnNpb24gMS4waWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBpAGMAbwBuAGYAbwBuAHQAUgBlAGcAdQBsAGEAcgBpAGMAbwBuAGYAbwBuAHQAaQBjAG8AbgBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABpAGMAbwBuAGYAbwBuAHQARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAEZG93bgJ1cAAAAA==') format('truetype');
4 }
5
6 .sl-font {
7 font-family: "sl-font" !important;
8 font-size: 16px;
9 font-style: normal;
10 -webkit-font-smoothing: antialiased;
11 -moz-osx-font-smoothing: grayscale;
12 }
13
14 .sl-down:before {
15 content: "\e61a";
16 }
17
18 .sl-up:before {
19 content: "\e61c";
20 }
21
src/components/sl-filter/popup-layer.vue
Diff comments   View file @6cba581
File was created 1 <template>
2 <scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
3 <view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
4 <slot></slot>
5 </view>
6 </scroll-view>
7 </template>
8
9 <script>
10 export default {
11 name: 'popup-layer',
12 props: {
13 direction: {
14 type: String,
15 default: 'top', // 方向 top，bottom，left，right
16 },
17 autoClose: {
18 type: Boolean,
19 default: true,
20 },
21 isTransNav: {
22 type: Boolean,
23 default: false
24 },
25 navHeight: {
26 type: Number,
27 default: 0
28 }
29 },
30 data() {
31 return {
32 ifshow: false, // 是否展示,
33 translateValue: -100, // 位移距离
34 timer: null,
35 iftoggle: false,
36 };
37 },
38 computed: {
39 _translate() {
40 if (this.isTransNav) {
41 const transformObj = {
42 'top': `transform:translateY(${-this.translateValue}%)`,
43 'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
44 'left': `transform:translateX(${-this.translateValue}%)`,
45 'right': `transform:translateX(${this.translateValue}%)`
46 };
47 return transformObj[this.direction]
48 } else {
49 const transformObj = {
50 'top': `transform:translateY(${-this.translateValue}%)`,
51 'bottom': `transform:translateY(${this.translateValue}%)`,
52 'left': `transform:translateX(${-this.translateValue}%)`,
53 'right': `transform:translateX(${this.translateValue}%)`
54 };
55 return transformObj[this.direction]
56 }
57
58 },
59 _location() {
60 const positionValue = {
61 'top': 'bottom:0px;width:100%;',
62 'bottom': 'top:0px;width:100%;',
63 'left': 'right:0px;height:100%;',
64 'right': 'left:0px;height:100%;',
65 };
66 return positionValue[this.direction] + this._translate;
67 }
68 },
69 methods: {
70 show() {
71 let _this = this;
72 this.ifshow = true;
73 let _open = setTimeout(() => {
74 this.translateValue = 0;
75 _open = null;
76 }, 100)
77 let _toggle = setTimeout(() => {
78 this.iftoggle = true;
79 _toggle = null;
80 }, 300);
81 },
82 close() {
83 if (this.timer !== null || !this.iftoggle) {
84 return;
85 }
86 this.translateValue = -100 - this.navHeight;
87
88 this.timer = setTimeout(() => {
89 this.ifshow = false;
90 this.timer = null;
91 this.iftoggle = false;
92 }, 300);
93 this.$emit("close")
94 },
95 ableClose() {
96 if (this.autoClose) {
97 this.close();
98 }
99 },
100 stopEvent(event) {},
101 }
102 }
103 </script>
104
105 <style>
106 .popup-layer {
107 position: absolute;
108 z-index: 999999;
109 background: rgba(0, 0, 0, .3);
110 height: calc(100% - 50px);
111 width: 100%;
112 left: 0px;
113 overflow: hidden;
114 }
115
116 .popup-content {
117 position: absolute;
118 z-index: 1000000;
119 background: #FFFFFF;
120 transition: all .3s ease;
121 }
122 </style>
123
src/components/sl-filter/sl-filter.vue
Diff comments   View file @6cba581
File was created 1 <template>
2 <view class="content">
3 <view :style="{height: tabHeight + 1 +'px'}">
4 <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
5 <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
6 <text :style="{color:color}">{{item.title}}</text>
7 <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
8 </view>
9 </view>
10 </view>
11 <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
12 :tabHeight="tabHeight">
13 <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
14 ref="slFilterView" @confirm="filterResult"></sl-filter-view>
15 </popup-layer>
16 </view>
17
18 </template>
19
20 <script>
21 import popupLayer from '@/components/sl-filter/popup-layer.vue';
22 import slFilterView from '@/components/sl-filter/filter-view.vue';
23 export default {
24 components: {
25 popupLayer,
26 slFilterView
27 },
28 props: {
29 menuList: {
30 type: Array,
31 default () {
32 return []
33 }
34 },
35 themeColor: {
36 type: String,
37 default () {
38 return '#000000'
39 }
40 },
41 color: {
42 type: String,
43 default () {
44 return '#666666'
45 }
46 },
47 independence: {
48 type: Boolean,
49 default: false
50 },
51 isTransNav: {
52 type: Boolean,
53 default: false
54 },
55 navHeight: {
56 type: Number,
57 default: 0
58 },
59 topFixed: {
60 type: Boolean,
61 default: false
62 }
63 },
64
65 computed: {
66 itemWidth() {
67 return 'calc(100%/2)'
68 },
69 menuListTemp: {
70 get() {
71 return this.getMenuListTemp();
72 },
73 set(newObj) {
74 return newObj;
75 }
76 }
77 },
78 // #ifndef H5
79 onReady: function() {
80 let arr = [];
81 let titleArr = [];
82 let r = {};
83 for (let i = 0; i < this.menuList.length; i++) {
84 arr.push({
85 'isActive': false
86 });
87 // titleArr.push({
88 // 'title': this.menuList[i].title,
89 // 'key': this.menuList[i].key
90 // })
91
92 r[this.menuList[i].key] = this.menuList[i].title;
93
94 if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
95 titleArr.push({
96 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
97 'key': this.menuList[i].key
98 })
99 } else {
100 titleArr.push({
101 'title': this.menuList[i].title,
102 'key': this.menuList[i].key
103 })
104 }
105
106 }
107 this.statusList = arr;
108 this.titleList = titleArr;
109 this.tempTitleObj = r;
110 },
111 // #endif
112
113 // #ifdef H5
114 created: function() {
115 let arr = [];
116 let titleArr = [];
117 let r = {};
118 for (let i = 0; i < this.menuList.length; i++) {
119 arr.push({
120 'isActive': false
121 });
122 // titleArr.push({
123 // 'title': this.menuList[i].title,
124 // 'key': this.menuList[i].key
125 // });
126 r[this.menuList[i].key] = this.menuList[i].title;
127
128 if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
129 titleArr.push({
130 'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
131 'key': this.menuList[i].key
132 })
133 } else {
134 titleArr.push({
135 'title': this.menuList[i].title,
136 'key': this.menuList[i].key
137 })
138 }
139
140 }
141 this.statusList = arr;
142 this.titleList = titleArr;
143 this.tempTitleObj = r;
144 },
145 // #endif
146 data() {
147 return {
148 down: 'sl-down',
149 up: 'sl-up',
150 tabHeight: 50,
151 statusList: [],
152 selectedIndex: '',
153 titleList: [],
154 tempTitleObj: {}
155 };
156 },
157 methods: {
158 getMenuListTemp() {
159 let arr = this.menuList;
160 for (let i = 0; i < arr.length; i++) {
161 let item = arr[i];
162 for (let j = 0; j < item.detailList.length; j++) {
163 let d_item = item.detailList[j];
164 if (j == 0) {
165 d_item.isSelected = true
166 } else {
167 d_item.isSelected = false
168 }
169 }
170 }
171 return arr;
172 },
173 // 重置所有选项，包括默认选项，并更新result
174 resetAllSelect(callback) {
175 this.$refs.slFilterView.resetAllSelect(function(e){
176 callback(e);
177 });
178 },
179 // 重置选项为设置的默认值，并更新result
180 resetSelectToDefault(callback) {
181 this.$refs.slFilterView.resetSelectToDefault(function(e){
182 callback(e);
183 });
184 },
185 resetMenuList(val) {
186 this.menuList = val;
187 this.$emit('update:menuList', val)
188 this.$forceUpdate();
189 this.$refs.slFilterView.resetMenuList(val)
190 },
191 showMenuClick(index) {
192 this.selectedIndex = index;
193 if (this.statusList[index].isActive == true) {
194 this.$refs.popupRef.close();
195 this.statusList[index].isActive = false
196 } else {
197 this.menuTabClick(index);
198 this.$refs.popupRef.show()
199 }
200 },
201 menuTabClick(index) {
202 this.$refs.slFilterView.menuTabClick(index);
203 for (let i = 0; i < this.statusList.length; i++) {
204 if (index == i) {
205 this.statusList[i].isActive = true;
206 } else {
207 this.statusList[i].isActive = false;
208 }
209 }
210 },
211 filterResult(obj) {
212 let val = obj.result;
213 let titlesObj = obj.titles;
214 // 处理选项映射到菜单title
215 if (this.independence) {
216 if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
217 let tempTitle = '';
218 for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
219 let item = this.menuList[this.selectedIndex].detailList[i];
220 if (item.value == val[this.menuList[this.selectedIndex].key]) {
221 tempTitle = item.title;
222 }
223 }
224 if (this.menuList[this.selectedIndex].reflexTitle) {
225 this.titleList[this.selectedIndex].title = tempTitle;
226 }
227 }
228 } else {
229 for (let key in titlesObj) {
230 if (!Array.isArray(titlesObj[key])) {
231 this.tempTitleObj[key] = titlesObj[key];
232 }
233
234 }
235 for (let key in this.tempTitleObj) {
236 for (let i = 0; i < this.titleList.length; i++) {
237 if (this.titleList[i].key == key) {
238 this.titleList[i].title = this.tempTitleObj[key];
239 }
240 }
241 }
242 }
243
244 this.$refs.popupRef.close()
245 if (obj.isReset) {
246
247 } else{
248 this.$emit("result", val)
249 }
250
251
252 },
253 close() {
254 for (let i = 0; i < this.statusList.length; i++) {
255 this.statusList[i].isActive = false;
256 }
257 }
258 }
259 }
260 </script>
261
262 <style lang="scss">
263 @import 'iconfont/iconfont.css';
264 // .content{
265 // flex-shrink: 0;
266 // width: 100%;
267 // height: 44px;
268 // position: fixed;
269 // z-index: 997;
270 // flex-wrap: nowrap;
271 // display: flex;
272 // flex-direction: row;
273 // // top: var(--window-top);
274 // left: 0;
275 // view {
276 // display: flex;
277 // flex-wrap: nowrap;
278 // }
279 // }
280 .select-tab {
281 border-bottom: #F7F7F7 1px solid;
282 background-color: #FFFFFF;
283 display: flex;
284 width: 100%;
285 }
286
287 .select-tab-fixed-top {
288 border-bottom: #F7F7F7 1px solid;
289 background-color: #FFFFFF;
290 display: flex;
291 width: 100%;
292 position: fixed;
293 /* #ifdef H5 */
294 top: 44px;
295 /* #endif */
296 /* #ifndef H5 */
297 top: 0;
298 /* #endif */
299 }
300
301 .arrows {
302 margin-left: 5px;
303 }
304
305 .select-tab .select-tab-item,
306 .select-tab-fixed-top .select-tab-item {
307 display: flex;
308 justify-content: center;
309 align-items: center;
310 }
311
312 .select-tab .select-tab-item text,
313 .select-tab-fixed-top .select-tab-item text {
314 color: #666666;
315 font-size: 14px;
316 }
317 </style>
318
1 { 1 {
2 "pages": [ 2 "pages": [
3 { 3 {
4 "path": "pages/index/index", 4 "path": "pages/index/index",
5 "style": { 5 "style": {
6 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path": "pages/user/user", 10 "path": "pages/user/user",
11 "style": { 11 "style": {
12 "navigationBarTitleText": "我的" 12 "navigationBarTitleText": "我的"
13 } 13 }
14 }, 14 },
15 { 15 {
16 "path": "pages/addOpticsData/addOpticsData", 16 "path": "pages/addOpticsData/addOpticsData",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "验光数据" 18 "navigationBarTitleText": "验光数据"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs", 22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "镜片名称名称" 24 "navigationBarTitleText": "镜片名称名称"
25 } 25 }
26 }, 26 },
27 { 27 {
28 "path": "pages/purchaseLenses/purchaseLenses", 28 "path": "pages/purchaseLenses/purchaseLenses",
29 "style": { 29 "style": {
30 "navigationBarTitleText": "参数选择" 30 "navigationBarTitleText": "参数选择"
31 } 31 }
32 }, 32 },
33 { 33 {
34 "path": "pages/lensDetails/lensDetails", 34 "path": "pages/lensDetails/lensDetails",
35 "style": { 35 "style": {
36 "navigationBarTitleText": "产品详情" 36 "navigationBarTitleText": "产品详情"
37 } 37 }
38 }, 38 },
39 { 39 {
40 "path": "pages/details/details",
41 "style": {
42 "navigationBarTitleText": "产品详情"
43 }
44 },
45 {
40 "path": "pages/myOrderPaying/myOrderPaying", 46 "path": "pages/myOrderPaying/myOrderPaying",
41 "style": { 47 "style": {
42 "navigationBarTitleText": "我的订单" 48 "navigationBarTitleText": "我的订单"
43 } 49 }
44 }, 50 },
45 { 51 {
46 "path": "pages/myOrder/myOrder", 52 "path": "pages/myOrder/myOrder",
47 "style": { 53 "style": {
48 "navigationBarTitleText": "我的订单" 54 "navigationBarTitleText": "我的订单"
49 } 55 }
50 }, 56 },
51 { 57 {
52 "path": "pages/cart/cart", 58 "path": "pages/cart/cart",
53 "style": { 59 "style": {
54 "navigationBarTitleText": "购物车" 60 "navigationBarTitleText": "购物车"
55 } 61 }
56 }, 62 },
57 { 63 {
58 "path": "pages/frameDetail/frameDetail", 64 "path": "pages/frameDetail/frameDetail",
59 "style": { 65 "style": {
60 "navigationBarTitleText": "产品详情" 66 "navigationBarTitleText": "产品详情"
61 } 67 }
62 }, 68 },
63 // { 69 // {
64 // "path": "pages/refundProgress/refundProgress", 70 // "path": "pages/refundProgress/refundProgress",
65 // "style": { 71 // "style": {
66 // "navigationBarTitleText": "申请退款" 72 // "navigationBarTitleText": "申请退款"
67 // } 73 // }
68 // }, 74 // },
69 // { 75 // {
70 // "path": "pages/address/addAddress", 76 // "path": "pages/address/addAddress",
71 // "style": { 77 // "style": {
72 // "navigationBarTitleText": "新增地址" 78 // "navigationBarTitleText": "新增地址"
73 // } 79 // }
74 // }, 80 // },
75 // { 81 // {
76 // "path": "pages/address/addressList", 82 // "path": "pages/address/addressList",
77 // "style": { 83 // "style": {
78 // "navigationBarTitleText": "地址管理" 84 // "navigationBarTitleText": "地址管理"
79 // } 85 // }
80 // }, 86 // },
81 { 87 {
82 "path": "pages/confirmOrder/confirmOrder", 88 "path": "pages/confirmOrder/confirmOrder",
83 "style": { 89 "style": {
84 "navigationBarTitleText": "确认订单" 90 "navigationBarTitleText": "确认订单"
85 } 91 }
86 }, 92 },
87 // { 93 // {
88 // "path": "pages/refundment/refundWays", 94 // "path": "pages/refundment/refundWays",
89 // "style": { 95 // "style": {
90 // "navigationBarTitleText": "退款方式" 96 // "navigationBarTitleText": "退款方式"
91 // } 97 // }
92 // }, 98 // },
93 // { 99 // {
94 // "path": "pages/refundment/refundment", 100 // "path": "pages/refundment/refundment",
95 // "style": { 101 // "style": {
96 // "navigationBarTitleText": "申请退款" 102 // "navigationBarTitleText": "申请退款"
97 // } 103 // }
98 // }, 104 // },
99 { 105 {
100 "path": "pages/predelivery/predelivery", 106 "path": "pages/predelivery/predelivery",
101 "style": { 107 "style": {
102 "navigationBarTitleText": "待发货" 108 "navigationBarTitleText": "待发货"
103 } 109 }
104 }, 110 },
105 { 111 {
106 "path": "pages/customerService/customerService", 112 "path": "pages/customerService/customerService",
107 "style": { 113 "style": {
108 "navigationBarTitleText": "在线客服" 114 "navigationBarTitleText": "在线客服"
109 } 115 }
110 }, 116 },
111 { 117 {
112 "path": "pages/detailStandard/detailStandard_sun", 118 "path": "pages/detailStandard/detailStandard_sun",
113 "style": { 119 "style": {
114 "navigationBarTitleText": "太阳镜选购页" 120 "navigationBarTitleText": "太阳镜选购页"
115 } 121 }
116 }, 122 },
117 { 123 {
118 "path": "pages/detailStandard/detailStandard_k", 124 "path": "pages/detailStandard/detailStandard_k",
119 "style": { 125 "style": {
120 "navigationBarTitleText": "镜框选购页" 126 "navigationBarTitleText": "镜框选购页"
121 } 127 }
122 }, 128 },
123 { 129 {
124 "path": "pages/newOpticsData/newOpticsData", 130 "path": "pages/newOpticsData/newOpticsData",
125 "style": { 131 "style": {
126 "navigationBarTitleText": "验光数据" 132 "navigationBarTitleText": "验光数据"
127 } 133 }
128 } 134 }
129 ], 135 ],
130 "subpackages": [ 136 "subpackages": [
131 { 137 {
132 "root": "pages/refundment", 138 "root": "pages/refundment",
133 "pages": [ 139 "pages": [
134 "pages/refundment/refundWays", 140 "pages/refundment/refundWays",
135 "pages/refundment/refundment", 141 "pages/refundment/refundment",
136 "pages/refundProgress/refundProgress" 142 "pages/refundProgress/refundProgress"
137 ] 143 ]
138 }, 144 },
139 { 145 {
140 "root": "pages/address", 146 "root": "pages/address",
141 "name": "pack2", 147 "name": "pack2",
142 "pages": [ 148 "pages": [
143 "pages/address/addAddress", 149 "pages/address/addAddress",
144 "pages/address/addressList" 150 "pages/address/addressList"
145 ] 151 ]
146 } 152 }
147 ], 153 ],
148 "globalStyle": { 154 "globalStyle": {
149 "navigationBarTextStyle": "black", 155 "navigationBarTextStyle": "black",
150 "navigationBarTitleText": "uni-app", 156 "navigationBarTitleText": "uni-app",
151 "navigationBarBackgroundColor": "#F8F8F8", 157 "navigationBarBackgroundColor": "#F8F8F8",
152 "backgroundColor": "#F8F8F8" 158 "backgroundColor": "#F8F8F8"
153 }, 159 },
154 "tabBar": { 160 "tabBar": {
155 "color": "#C0C4CC", 161 "color": "#C0C4CC",
156 "selectedColor": "#fa436a", 162 "selectedColor": "#fa436a",
157 "borderStyle": "black", 163 "borderStyle": "black",
158 "backgroundColor": "#ffffff", 164 "backgroundColor": "#ffffff",
159 "list": [ 165 "list": [
160 { 166 {
161 "pagePath": "pages/index/index", 167 "pagePath": "pages/index/index",
162 "iconPath": "static/tab-home.png", 168 "iconPath": "static/tab-home.png",
163 "selectedIconPath": "static/tab-home-current.png", 169 "selectedIconPath": "static/tab-home-current.png",
164 "text": "首页" 170 "text": "首页"
165 }, 171 },
166 { 172 {
167 "pagePath": "pages/cart/cart", 173 "pagePath": "pages/cart/cart",
168 "iconPath": "static/tab-cart.png", 174 "iconPath": "static/tab-cart.png",
169 "selectedIconPath": "static/tab-cart-current.png", 175 "selectedIconPath": "static/tab-cart-current.png",
170 "text": "购物车" 176 "text": "购物车"
171 }, 177 },
172 { 178 {
173 "pagePath": "pages/user/user", 179 "pagePath": "pages/user/user",
174 "iconPath": "static/tab-my.png", 180 "iconPath": "static/tab-my.png",
175 "selectedIconPath": "static/tab-my-current.png", 181 "selectedIconPath": "static/tab-my-current.png",
176 "text": "我的" 182 "text": "我的"
177 } 183 }
178 ] 184 ]
179 }, 185 },
180 "condition": { 186 "condition": {
181 "current": 0, 187 "current": 0,
182 "list": [ 188 "list": [
183 // { 189 // {
184 // "name": "首页", 190 // "name": "首页",
185 // "path": "pages/test/index", 191 // "path": "pages/test/index",
186 // "query": "" 192 // "query": ""
187 // }, 193 // },
188 { 194 {
189 "name": "首页", 195 "name": "首页",
190 "path": "pages/index/index", 196 "path": "pages/index/index",
191 "query": "" 197 "query": ""
192 }, 198 },
193 { 199 {
194 "name": "产品详情", 200 "name": "产品详情",
195 "path": "pages/frameDetail/frameDetail", 201 "path": "pages/details/details",
196 "query": "" 202 "query": ""
197 }, 203 },
198 { 204 {
199 "name": "镜片、美瞳参数选择", 205 "name": "镜片、美瞳参数选择",
200 "path": "pages/purchaseLenses/purchaseLenses", 206 "path": "pages/purchaseLenses/purchaseLenses",
201 "query": "" 207 "query": ""
202 }, 208 },
203 { 209 {
204 "name": "确认订单", 210 "name": "确认订单",
205 "path": "pages/confirmOrder/confirmOrder", 211 "path": "pages/confirmOrder/confirmOrder",
206 "query": "" 212 "query": ""
207 }, 213 },
208 { 214 {
209 "name": "新增地址", 215 "name": "新增地址",
210 "path": "pages/address/addAddress", 216 "path": "pages/address/addAddress",
211 "query": "" 217 "query": ""
212 }, 218 },
213 { 219 {
214 "name": "地址管理", 220 "name": "地址管理",
215 "path": "pages/address/addressList", 221 "path": "pages/address/addressList",
216 "query": "" 222 "query": ""
217 }, 223 },
218 { 224 {
219 "name": "我的订单", 225 "name": "我的订单",
220 "path": "pages/myOrder/myOrder", 226 "path": "pages/myOrder/myOrder",
221 "query": "" 227 "query": ""
222 }, 228 },
223 { 229 {
224 "name": "待付款订单详情", 230 "name": "待付款订单详情",
225 "path": "pages/myOrderPaying/myOrderPaying", 231 "path": "pages/myOrderPaying/myOrderPaying",
226 "query": "" 232 "query": ""
227 }, 233 },
228 { 234 {
229 "name": "我的", 235 "name": "我的",
230 "path": "pages/user/user", 236 "path": "pages/user/user",
231 "query": "" 237 "query": ""
232 } 238 }
233 ] 239 ]
234 } 240 }
235 } 241 }
src/pages/details/components/AfterSails.vue
Diff comments   View file @6cba581
File was created 1 <template>
2 <!-- 售后保障 -->
3 <view class="customerService">
4 <view class="serviceItem">
5 <view class="title">
6 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
7 <text class="titleText">卖家服务</text>
8 </view>
9 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
10 </view>
11 <view class="serviceItem">
12 <view class="title">
13 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
14 <text class="titleText">平台承诺</text>
15 </view>
16 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
17 </view>
18 <view class="serviceItem">
19 <view class="title">
20 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
21 <text class="titleText">正品保证</text>
22 </view>
23 <view class="itemContent">向您保证所售商品均为正品行货</view>
24 </view>
25 <view class="serviceItem2">
26 <view class="title">
27 <text class="titleText">权利申明</text>
28 </view>
29 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
30 </view>
31 <view class="serviceItem2">
32 <view class="title">
33 <text class="titleText">价格保证</text>
34 </view>
35 <view class="itemContent">
36 <view class="itemContent-child">
37 <text class="contentTitle">平台价:</text>
38 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
39 </view>
40 <view class="itemContent-child">
41 <text class="contentTitle">划线价:</text>
42 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
43 </view>
44 <view class="itemContent-child">
45 <text class="contentTitle">平折扣:</text>
46 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
47 </view>
48 <view class="itemContent-child">
49 <text class="contentTitle">异常问题:</text>
50 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
51 </view>
52 </view>
53 </view>
54 </view>
55 </template>
56
57 <script>
58 export default {
59
60 }
61 </script>
62
63 <style lang="scss">
64 .customerService {
65 margin-bottom: 90rpx;
66 .serviceItem {
67 margin-bottom: 32rpx;
68 .title {
69 display: flex;
70 flex-direction: row;
71 align-items: center;
72 .titleText {
73 font-family: PingFangSC-Medium;
74 font-size: 14px;
75 color: #333333;
76 margin-bottom: 12rpx;
77 }
78 }
79 .itemContent {
80 font-size: 14px;
81 color: #999999;
82 margin-left: 18rpx;
83 }
84 }
85 .serviceItem2 {
86 margin-left: 18rpx;
87 margin-bottom: 32rpx;
88 .titleText {
89 font-size: 14px;
90 color: #ff6b4a;
91 }
92 .itemContent {
93 font-size: 14px;
94 color: #999999;
95 .itemContent-child {
96 margin-bottom: 40rpx;
97 .contentTitle {
98 border-bottom: 1px solid #ff6b4a;
99 }
100 }
101 }
102 }
103 }
104 </style>
105
src/pages/details/details.vue
Diff comments   View file @6cba581
File was created 1 <template>
2 <view class="container">
3 <view class="basic_info">
4 <!-- 轮播图 -->
5 <swiper
6 class="swiperImage"
7 :indicator-dots="true"
8 :autoplay="true"
9 :interval="4000"
10 :duration="500"
11 >
12 <swiper-item
13 v-for="(item, index) in carousel"
14 :key="index"
15 >
16 <image
17 :src="item"
18 mode="scaleToFill"
19 ></image>
20 </swiper-item>
21 </swiper>
22 <!-- 产品价格及购买人数 -->
23 <view class="info_pay">
24 <view>￥{{goodsInfo.price || '暂无'}}<span
25 v-if="goodsInfo.discountPrice"
26 class="info_pay_discount"
27 >¥{{goodsInfo.discountPrice}}</span></view>
28 <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
29 </view>
30 <!-- 产品名称 -->
31 <view class="info_name">
32 <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
33 <view class="info_name_share">
34 <image src="/static/img/detail/share-icon.png"></image>
35 <text>分享</text>
36 </view>
37 </view>
38 <!-- 产品售后信息 -->
39 <view class="info_after">
40 <span>支持7天无理由退货</span>
41 <span>顺丰发货</span>
42 <span>30天质量保证</span>
43 </view>
44 </view>
45 <view class="detail_info">
46 <!-- 详细信息菜单 -->
47 <view class="screen_bar">
48 <view
49 v-for="item in screenItems"
50 :key="item.current"
51 @click="tabChange(item.current)"
52 >
53 <view
54 class="screen_item"
55 v-bind:class="{ item_active: item_current === item.current }"
56 >{{ item.text || '暂无' }}</view>
57 </view>
58 </view>
59 <!-- 售后保障 -->
60 <view
61 class="screen_item"
62 v-if="item_current === 2"
63 >
64 <AfterSails />
65 </view>
66 </view>
67 </view>
68 </template>
69
70 <script>
71 import store from '@/store'
72 import AfterSails from './components/AfterSails'
73 // import BottomSheet from '@/components/BottomSheet.vue'
74
75 export default {
76 components: {
77 AfterSails,
78 },
79 data () {
80 return {
81 pid: 7, // 产品ID
82 skId: undefined, // skuId
83 // 详细信息菜单
84 item_current: 0,
85 screenItems: [
86 { current: 0, text: '商品介绍' },
87 { current: 1, text: '规格参数' },
88 { current: 2, text: '售后保障' },
89 ],
90 }
91 },
92 onLoad({ pid = this.pid, sk_id: skId }) {
93 this.pid = pid
94 this.skId = skId
95
96 // 获取产品详情
97 this.getDetails({ pid, skId })
98 },
99 computed: {
100 // 获取轮播图数据
101 carousel() {
102 return this.$store.state.details.carousel
103 },
104 // 商品基本信息
105 goodsInfo() {
106 return this.$store.state.details.goodsInfo
107 },
108 },
109 methods: {
110 // 获取产品详情
111 getDetails({ pid, skId }) {
112 store.dispatch('details/details', {
113 pid,
114 sk_id: skId,
115 })
116 },
117 // 切换详细信息菜单
118 tabChange (e) {
119 if (this.current !== e) {
120 this.item_current = e
121 }
122 },
123 },
124 }
125 </script>
126
127 <style lang="scss">
128 .container {
129 background-color: #f8f8f8;
130 font-family: "PingFangSC-Regular";
131 // 板块样式
132 > view {
133 background: #ffffff;
134 margin-bottom: 10px;
135 padding: 8px 20px 8px 20px;
136 box-sizing: border-box;
137 }
138 // 基础信息板块
139 .basic_info {
140 // 轮播图
141 .swiperImage {
142 width: 684rpx;
143 height: 480rpx;
144 image {
145 max-width: 100%;
146 max-height: 100%;
147 border-radius: 16rpx;
148 }
149 }
150 // 产品价格及购买人数
151 .info_pay {
152 color: #eb5d3b;
153 font-size: 18px;
154 margin-top: 5px;
155 font-family: "PingFangSC-Semibold";
156 display: flex;
157 justify-content: space-between;
158 .info_pay_discount {
159 text-decoration: line-through;
160 margin-left: 8rpx;
161 color: #999;
162 font-size: 14px;
163 }
164 .info_pay_number {
165 color: #999;
166 font-size: 14px;
167 }
168 }
169 // 产品名称
170 .info_name {
171 margin-top: 5px;
172 display: flex;
173 justify-content: space-between;
174 .info_name_name {
175 margin-right: 10px;
176 font-size: 16px;
177 font-family: "PingFangSC-Semibold";
178 max-width: 592rpx;
179 }
180 .info_name_share {
181 display: flex;
182 flex-direction: column;
183 justify-content: space-between;
184 align-items: center;
185 margin-top: 14rpx;
186 > image {
187 height: 40rpx;
188 width: 40rpx;
189 }
190 > text {
191 font-family: PingFangSC-Regular;
192 font-size: 12px;
193 color: #999;
194 letter-spacing: -0.23px;
195 }
196 }
197 }
198 // 售后服务
199 .info_after {
200 font-size: 10px;
201 color: #999;
202 margin-top: 20rpx;
203 > span {
204 height: 14px;
205 margin-right: 10px;
206 }
207 }
208 }
209 // 详细信息
210 .detail_info {
211 .screen_bar {
212 width: 670rpx;
213 margin-top: 20rpx;
214 margin-bottom: 24rpx;
215 display: flex;
216 flex-direction: row;
217 justify-content: space-between;
218 align-items: center;
219 font-size: 14px;
220 color: #333333;
221 transition: all 0.2s;
222 }
223 .item_active {
224 border-bottom: 4rpx solid #ff6b4a;
225 }
226 .screen_item {
227 font-size: 32rpx;
228 color: #333333;
229 display: flex;
230 transition: all 0.2s;
231 }
232 }
233 }
234 </style>
235
src/pages/frameDetail/components/BottomSheet.vue
Diff comments   View file @6cba581
File was created 1 <template>
2 <view class="content">
3 <view
4 class="sheet"
5 :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"
6 @touchmove.stop.prevent="moveHandle"
7 @click="closeSheet()"
8 >
9 <scroll-view
10 scroll-y="true"
11 class="sheetView"
12 :class="{sheetView_active:isShowBottom}"
13 @click.stop="stopEvent()"
14 >
15 <view class="content">
16 <view class="goodInfo">
17 <view class="imageWrap">
18 <image
19 :src="goodInfo.img_index_url"
20 mode="aspectFill"
21 style="width: 188rpx;height: 168rpx;"
22 ></image>
23 </view>∂
24 <view class="infoRight">
25 <text class="goodName">{{goodInfo.p_name}}</text>
26 <text class="remarks">支持7天无理由退货 顺丰发货</text>
27 <view class="priceBox">
28 <view class="price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}</view>
29 <text>(限购{{maxCount}}副)</text>
30 <view class="counter">
31 <view
32 class="btn"
33 disabled="this.addDisabled"
34 type="default"
35 @click="counter(false)"
36 >-</view>
37 <text>{{count}}</text>
38 <view
39 class="btn"
40 disabled="this.desDisabled"
41 type="default"
42 @click="counter(true)"
43 >+</view>
44 </view>
45 </view>
46 </view>
47 </view>
48 <view class="peopleChoose">
49 <view class="title">选择使用人</view>
50 <view class="loveList">
51 <view
52 class="peopleName"
53 v-for="(item,index) in loveList"
54 :key='index'
55 :class="{ active2: loveCurrent === index }"
56 @click="onClickLoveItem(index,item.name)"
57 >
58 {{item.name}}
59 </view>
60 </view>
61 </view>
62 <view class="goods-data">
63 <view class="opCollapse">
64 <view class="body">
65 <template v-if="opIsOpen">
66 <view class="goods-form">
67 <view class="p1">
68 <image
69 class="image2"
70 src="../../../static/img/myOpticsData/dataWrite.png"
71 mode="aspectFit"
72 ></image>
73 填写验光数据
74 </view>
75 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
76 <view class="picker">
77 <view class="picker-choice">
78 <view class="choice-left">
79 <text class="pd">验光单取名:</text>
80 </view>
81 <input
82 type="text"
83 @blur="handleInput"
84 class="input"
85 placeholder="请输入名称"
86 maxlength="20"
87 :value="name"
88 />
89 </view>
90 </view>
91 <view class="picker">
92 <view class="picker-choice">
93 <view class="choice-left">
94 <text class="p11">{{pickerInfoList[0].nameC}}</text>
95 <text class="p12">{{pickerInfoList[0].nameE}}</text>
96 </view>
97 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
98 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
99 <picker
100 @change="bindPickerChange01"
101 :value="pickerInfoList[0].nameIndex1"
102 :range="pickerInfoList[0].nameArray1"
103 >
104 <view class="p14">
105 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
106 <image src="../../../static/detail-tabicon.png"></image>
107 </view>
108 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
109 </picker>
110 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
111 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
112 <picker
113 @change="bindPickerChange02"
114 :value="pickerInfoList[0].nameIndex2"
115 :range="pickerInfoList[0].nameArray2"
116 >
117 <view class="p14">
118 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
119 <image src="../../../static/detail-tabicon.png"></image>
120 </view>
121 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
122 </picker>
123 </view>
124 </view>
125 <view class="picker">
126 <view class="picker-choice">
127 <view class="choice-left">
128 <text class="p11">{{pickerInfoList[1].nameC}}</text>
129 <text class="p12">{{pickerInfoList[1].nameE}}</text>
130 </view>
131 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
132 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
133 <picker
134 @change="bindPickerChange11"
135 :value="pickerInfoList[1].nameIndex1"
136 :range="pickerInfoList[1].nameArray1"
137 >
138 <view class="p14">
139 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
140 <image src="../../../static/detail-tabicon.png"></image>
141 </view>
142 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
143 </picker>
144 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
145 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
146 <picker
147 @change="bindPickerChange12"
148 :value="pickerInfoList[1].nameIndex2"
149 :range="pickerInfoList[1].nameArray2"
150 >
151 <view class="p14">
152 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
153 <image src="../../../static/detail-tabicon.png"></image>
154 </view>
155 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
156 </picker>
157 </view>
158 </view>
159 <view class="picker">
160 <view class="picker-choice">
161 <view class="choice-left">
162 <text class="p11">{{pickerInfoList[2].nameC}}</text>
163 <text class="p12">{{pickerInfoList[2].nameE}}</text>
164 </view>
165 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
166 <picker
167 @change="bindPickerChange21"
168 :value="pickerInfoList[2].nameIndex1"
169 :range="pickerInfoList[2].nameArray1"
170 >
171 <view class="p14">
172 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
173 <image src="../../../static/detail-tabicon.png"></image>
174 </view>
175 </picker>
176 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
177 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
178 <picker
179 @change="bindPickerChange22"
180 :value="pickerInfoList[2].nameIndex2"
181 :range="pickerInfoList[2].nameArray2"
182 >
183 <view class="p14">
184 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
185 <image src="../../../static/detail-tabicon.png"></image>
186 </view>
187 <!-- <image src="../../../static/detail-tabicon.png" ></image> -->
188 </picker>
189 </view>
190 </view>
191 <view class="picker">
192 <view class="picker-choice">
193 <view class="choice-left">
194 <text class="pd">瞳距:</text>
195 </view>
196 <input
197 type="digit"
198 @change="handleInputPd"
199 class="input"
200 placeholder="请输入瞳距,单位cm"
201 maxlength="20"
202 :value="pd"
203 />
204 </view>
205 </view>
206 <view class="picker">
207 <view class="picker-choice">
208 <view class="choice-left">
209 <text class="p11">{{pickerInfoList[3].nameC}}</text>
210 </view>
211 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
212 <picker
213 @change="bindPickerChange41"
214 :value="pickerInfoList[3].nameIndex1"
215 :range="pickerInfoList[3].nameArray1"
216 >
217 <view
218 class="p14"
219 style="width: 30px;"
220 >
221 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
222 <image src="../../../static/detail-tabicon.png"></image>
223 </view>
224 </picker>
225 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
226 <picker
227 @change="bindPickerChange42"
228 :value="pickerInfoList[3].nameIndex2"
229 :range="pickerInfoList[3].nameArray2"
230 >
231 <view
232 class="p14"
233 style="width: 30px;"
234 >
235 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
236 <image src="../../../static/detail-tabicon.png"></image>
237 </view>
238 </picker>
239 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
240 <picker
241 @change="bindPickerChange43"
242 :value="pickerInfoList[3].nameIndex3"
243 :range="pickerInfoList[3].nameArray3"
244 >
245 <view
246 class="p14"
247 style="width: 30px;"
248 >
249 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
250 <image src="../../../static/detail-tabicon.png"></image>
251 </view>
252 </picker>
253 </view>
254 </view>
255 <view class="confirm">
256 <image
257 class="image1"
258 :src="confirm ? tabicon[0] : tabicon[1]"
259 @tap="changeConfirm"
260 ></image>
261 <text>确认以上输入信息来源于我的验光数据!</text>
262 </view>
263 </view>
264 </template>
265 <template v-else>
266 <view
267 v-for="item in pickerInfoList"
268 :key="item.key"
269 class="bodyBox"
270 >
271 <template v-if="item.nameC==='验光日期'">
272 <text class="names">{{item.nameC}}</text>
273 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
274 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
275 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
276 </template>
277 <template v-else>
278 <template v-if="item.nameC==='度数'">
279 <text style="display: inline;">*</text>
280 </template>
281
282 <text class="names">{{item.nameC}}</text>
283 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
284 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
285 </template>
286 </view>
287 </template>
288 </view>
289 </view>
290 </view>
291 <view class="choose">
292 <view
293 class="chooseItem_1_content"
294 v-for="(item,index) in attrList"
295 :key="index"
296 >
297 <UniCollapse @change="changeShow(index)">
298 <UniCollapseItem
299 :open="show[index]"
300 :title="item.meta_name"
301 showAnimation=false
302 >
303 <view class="chooseItem_1_content">
304 <view class="itemsWrap">
305 <view
306 class="item2"
307 v-for="(one,i) in item.attr"
308 :key="i"
309 :class="{ active2: current[index] === i }"
310 @click="onClickItem(index, i)"
311 >{{one.name}}</view>
312 </view>
313 </view>
314 </UniCollapseItem>
315 </UniCollapse>
316 <view
317 class="chooseRes"
318 v-show="!show[index]"
319 >* {{attrList[index].attr[current[index]].name}}</view>
320 </view>
321 </view>
322 <view
323 class="button"
324 @click.native="addCart"
325 v-if="isCart"
326 >
327 加入购物车
328 </view>
329 <view
330 class="button"
331 @click="toComfirmOrder"
332 v-else
333 >
334 立即结算
335 </view>
336 </view>
337 </scroll-view>
338 </view>
339 </view>
340 </template>
341 <script>
342 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
343 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
344 import store from '@/store'
345 export default {
346 components: {
347 UniCollapse,
348 UniCollapseItem,
349 },
350 props: {
351 isShowBottom: Boolean,
352 pid: Number,
353 goodInfo: Object,
354 isCart: Boolean,
355 },
356 data() {
357 return {
358 loveCurrent: Number,
359 count: 1,
360 // pid: 0,
361 maxCount: 20,
362 dataName: '', // 验光数据人员名称
363 isDataName: false, // 是否是已存在的人员数据
364 dataConfirm: false, // 已确认所输入验光数据
365 opIsOpen: true,
366 addDisabled: false,
367 desDisabled: false,
368 current: [],
369 show: [],
370 checkedData: {},
371 // 度数相关数据
372 pickerInfoList: [
373 { nameC: '度数', nameE: '(SPH)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 0 },
374 { nameC: '散光', nameE: '(CYL)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 1 },
375 { nameC: '散光轴位', nameE: '(AXI)', nameArray1: [''], nameIndex1: 0, nameArray2: [''], nameIndex2: 0, key: 2 },
376 { nameC: '验光日期', nameE: '', nameArray1: [''], nameIndex1: 0, nameArray2: ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], nameIndex2: 0, nameArray3: [''], nameIndex3: 0 },
377 ],
378 confirm: false, // 用户是否确认
379 tabicon: ['/static/detail-button.png', '/static/detail-button-unselected.png'],
380 name: '',
381 oldname: '', // 用于判读用户是否改变名字
382 pickerInfoChioce: {
383 leftSph: '',
384 rightSph: '',
385 leftCyl: '',
386 rightCyl: '',
387 leftAxi: '',
388 rightAxi: '',
389 time: {
390 year: 0,
391 month: 0,
392 day: 0,
393 },
394 },
395 pd: '', // 瞳距
396 oldpd: '', // 用于判断用户是否改变瞳距
397 kinds: 1, // kinds=1，提交为新增验光，2为修改
398 mp_id: Number,
399 }
400 },
401 computed: {
402 loveList() {
403 // console.log('**********loveList',this.$store.state.myLoveList.loveList)
404 return this.$store.state.myLoveList.loveList || []
405 },
406 attrList() {
407 const attrList = this.$store.state.read.goodInfo.attrList
408 if (attrList !== undefined) {
409 return attrList
410 } else {
411 return []
412 }
413 },
414 skuList() {
415 return this.$store.state.read.goodInfo.skuList
416 },
417 mpList() {
418 return this.$store.state.myLoveList.loveList
419 },
420 },
421 created() {
422 const pid = this.pid
423 console.log('this.goodInfo', this.goodInfo)
424 const current = []
425 const show = []
426 for (let index = 0; index < this.attrList.length; index++) {
427 current.push(0)
428 show.push(true)
429 }
430 this.current = current
431 this.show = show
432
433 // 获取关心的人列表
434 store.dispatch('myLoveList/getLoveList', {
435 uid: this.$store.state.user.userInfo.uid,
436 })
437 // 初始化SPL、CYL、AXI的值
438 for (let j = 0; j < 3; j++) {
439 for (let i = -12; i < 6; i++) {
440 this.pickerInfoList[j].nameArray1.push(i)
441 this.pickerInfoList[j].nameArray1.push(i + 0.5)
442 this.pickerInfoList[j].nameArray2.push(i)
443 this.pickerInfoList[j].nameArray2.push(i + 0.5)
444 if (i >= -6) {
445 this.pickerInfoList[j].nameArray1.push(i + 0.25)
446 this.pickerInfoList[j].nameArray1.push(i + 0.75)
447 this.pickerInfoList[j].nameArray2.push(i + 0.25)
448 this.pickerInfoList[j].nameArray2.push(i + 0.75)
449 }
450 if (i === 5) {
451 this.pickerInfoList[j].nameArray1.push(i + 1)
452 this.pickerInfoList[j].nameArray2.push(i + 1)
453 }
454 }
455 }
456 // 初始化日期值
457 for (let i = 1; i < 32; i++) {
458 this.pickerInfoList[3].nameArray3.push(i)
459 }
460 // 初始化年份前后五年
461 const myDate = new Date()
462 const nowYear = myDate.getFullYear()
463 for (let i = 0; i < 5; i++) {
464 this.pickerInfoList[3].nameArray1.push(nowYear - i)
465 }
466 },
467 name: 'bottomSheet',
468 methods: {
469 addCart() {
470 const that = this
471 const checkedSKUName = [that.goodInfo.attrList[0].meta_name, that.goodInfo.attrList[1].meta_name]
472 const checkedSKU = []
473 let j
474 for (let i = 0; i < that.current.length; i++) {
475 checkedSKU.push(that.goodInfo.attrList[i].attr[that.current[i]])
476 // console.log('i', i, j, i !== this.current.length - 1)
477 if (i !== this.current.length - 1) {
478 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
479 j = this.current[i] * this.attrList[1].attr.length
480 } else {
481 j += this.current[i]
482 }
483 }
484 const sk_id = this.skuList[j].sk_id
485 console.log('选择的商品sk_id', sk_id, '选择的商品参数', checkedSKU)
486 this.$emit('addCart', this.mp_id, this.count, checkedSKU, sk_id)// 添加购物车
487 this.$emit('closeBottom')// 关闭弹窗
488 },
489 onClickLoveItem(index, name) {
490 const loveList = this.loveList
491 for (let index = 0; index < loveList.length; index++) {
492 if (name === loveList[index].name && name !== this.name) {
493 this.isDataName = true
494 this.kinds = 2
495 this.name = loveList[index].name
496 this.pd = loveList[index].pd
497 this.mp_id = loveList[index].mp_id
498 this.oldname = loveList[index].name
499 this.oldpd = loveList[index].pd
500 this.pickerInfoList[0].nameArray1.unshift(loveList[index].leftSph)
501 this.pickerInfoList[0].nameArray2.unshift(loveList[index].rightSph)
502 this.pickerInfoList[1].nameArray1.unshift(loveList[index].leftCyl)
503 this.pickerInfoList[1].nameArray2.unshift(loveList[index].rightCyl)
504 this.pickerInfoList[2].nameArray1.unshift(loveList[index].leftAxi)
505 this.pickerInfoList[2].nameArray2.unshift(loveList[index].rightAxi)
506 this.pickerInfoList[3].nameArray1.unshift(loveList[index].in_time.toString().slice(0, 4))
507 if (loveList[index].in_time.toString().slice(5, 6) === 0) {
508 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(6, 7))
509 } else {
510 this.pickerInfoList[3].nameArray2.unshift(loveList[index].in_time.toString().slice(5, 7))
511 }
512 if (loveList[index].in_time.toString().slice(8, 9) === 0) {
513 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(9, 10))
514 } else {
515 this.pickerInfoList[3].nameArray3.unshift(loveList[index].in_time.toString().slice(8, 10))
516 }
517 }
518 }
519 this.name = name
520 this.loveCurrent = index
521 },
522 closeSheet() {
523 this.$emit('closeBottom')
524 },
525 // @click.stop防止事件冒泡
526 stopEvent() {},
527 // 不让页面滚动
528 moveHandle() {},
529 // picker相关功能
530 handleInput(e) {
531 this.name = e.target.value
532 this.isDataName = false
533 console.log('e---->', e)
534 const mpList = this.mpList
535 // console.log('mpList===>', mpList)
536 for (let index = 0; index < mpList.length; index++) {
537 if (e.detail.value === mpList[index].name) {
538 this.isDataName = true
539 uni.showModal({
540 title: '提示',
541 content: `是否填充已有的"${e.detail.value}"的数据`,
542 success: (res) => {
543 if (res.confirm) {
544 this.kinds = 2
545 console.log('args===>', index)
546 // const mpList=Object.assign({},this.$store.state.mympList.mpList)
547 console.log('mpList===>', mpList)
548 this.name = mpList[index].name
549 this.pd = mpList[index].pd
550 this.mp_id = mpList[index].mp_id
551 this.oldname = mpList[index].name
552 this.oldpd = mpList[index].pd
553 // 将kinds =2时的值传到该页面
554 this.pickerInfoList[0].nameArray1.unshift(mpList[index].leftSph)
555 this.pickerInfoList[0].nameArray2.unshift(mpList[index].rightSph)
556 this.pickerInfoList[1].nameArray1.unshift(mpList[index].leftCyl)
557 this.pickerInfoList[1].nameArray2.unshift(mpList[index].rightCyl)
558 this.pickerInfoList[2].nameArray1.unshift(mpList[index].leftAxi)
559 this.pickerInfoList[2].nameArray2.unshift(mpList[index].rightAxi)
560 this.pickerInfoList[3].nameArray1.unshift(mpList[index].in_time.toString().slice(0, 4))
561 if (mpList[index].in_time.toString().slice(5, 6) === 0) {
562 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(6, 7))
563 } else {
564 this.pickerInfoList[3].nameArray2.unshift(mpList[index].in_time.toString().slice(5, 7))
565 }
566 if (mpList[index].in_time.toString().slice(8, 9) === 0) {
567 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(9, 10))
568 } else {
569 this.pickerInfoList[3].nameArray3.unshift(mpList[index].in_time.toString().slice(8, 10))
570 }
571 // this.checkedData = mpList[index]
572 // console.log('checkedData', this.checkedData)
573 } else if (res.cancel) {
574 this.kinds = 2
575 }
576 },
577 })
578 }
579 }
580 },
581 handleInputPd(e) {
582 // 只能输入正浮点数或正数
583 if (/^\d+(\.\d+)?$/.test(e.target.value)) {
584 this.pd = e.target.value
585 } else {
586 uni.showToast({
587 title: '请输入有效数据;示例:89',
588 icon: 'none',
589 duration: 2000,
590 })
591 this.pd = ''
592 }
593 },
594 changeConfirm() {
595 this.confirm = !this.confirm
596 },
597 bindPickerChange01: function(e) {
598 this.pickerInfoList[0].nameIndex1 = e.target.value
599 this.pickerInfoChioce.leftSph = this.pickerInfoList[0].nameArray1[e.target.value]
600 },
601 bindPickerChange02: function(e) {
602 this.pickerInfoList[0].nameIndex2 = e.target.value
603 this.pickerInfoChioce.rightSph = this.pickerInfoList[0].nameArray2[e.target.value]
604 },
605 bindPickerChange11: function(e) {
606 this.pickerInfoList[1].nameIndex1 = e.target.value
607 this.pickerInfoChioce.leftCyl = this.pickerInfoList[1].nameArray1[e.target.value]
608 },
609 bindPickerChange12: function(e) {
610 this.pickerInfoList[1].nameIndex2 = e.target.value
611 this.pickerInfoChioce.rightCyl = this.pickerInfoList[1].nameArray2[e.target.value]
612 },
613 bindPickerChange21: function(e) {
614 this.pickerInfoList[2].nameIndex1 = e.target.value
615 this.pickerInfoChioce.leftAxi = this.pickerInfoList[2].nameArray1[e.target.value]
616 },
617 bindPickerChange22: function(e) {
618 this.pickerInfoList[2].nameIndex2 = e.target.value
619 this.pickerInfoChioce.rightAxi = this.pickerInfoList[2].nameArray2[e.target.value]
620 },
621 bindPickerChange41: function(e) {
622 this.pickerInfoList[3].nameIndex1 = e.target.value
623 this.pickerInfoChioce.time.year = this.pickerInfoList[3].nameArray1[e.target.value]
624 },
625 bindPickerChange42: function(e) {
626 this.pickerInfoList[3].nameIndex2 = e.target.value
627 this.pickerInfoChioce.time.month = this.pickerInfoList[3].nameArray2[e.target.value]
628 },
629 bindPickerChange43: function(e) {
630 this.pickerInfoList[3].nameIndex3 = e.target.value
631 this.pickerInfoChioce.time.day = this.pickerInfoList[3].nameArray3[e.target.value]
632 },
633 changeShow(num) {
634 this.show[num] = !this.show[num]
635 this.$forceUpdate()
636 },
637 onClickItem(index, i) {
638 if (this.current[index] !== i) {
639 this.current[index] = i
640 }
641 this.$forceUpdate()
642 },
643 counter(isadd) {
644 if (isadd) {
645 this.count >= this.maxCount ? this.addDisabled = true : this.count++
646 } else {
647 this.count <= 1 ? this.desDisabled = true : this.count--
648 }
649 },
650 toComfirmOrder() {
651 // 先处理验光部分的逻辑，如果ok在跳转
652 let flag = 0
653 if (this.name === '') {
654 uni.showToast({
655 title: '请输入验光单取名',
656 icon: 'none',
657 duration: 2000,
658 })
659 } else {
660 if (this.pd === '') {
661 uni.showToast({
662 title: '请输入瞳距',
663 icon: 'none',
664 duration: 2000,
665 })
666 } else {
667 if (this.kinds === 1) {
668 // 添加用户验光单
669 console.log('kinds====>', this.pickerInfoChioce.leftSph)
670 console.log('kinds====>', this.pickerInfoChioce.leftSph === Number)
671 console.log('kinds====>', this.pickerInfoChioce.rightSph === Number)
672 if (this.pickerInfoChioce.rightSph === '' || this.pickerInfoChioce.leftSph === '' ||
673 this.pickerInfoChioce.leftCyl === '' || this.pickerInfoChioce.rightCyl === '' ||
674 this.pickerInfoChioce.leftAxi === '' || this.pickerInfoChioce.rightAxi === ''
675 ) {
676 uni.showToast({
677 title: '请输入您的验光数据',
678 icon: 'none',
679 duration: 2000,
680 })
681 } else {
682 if (this.confirm) {
683 store.dispatch('myLoveList/addMylove', {
684 uid: this.$store.state.user.userInfo.uid,
685 openid: this.$store.state.user.userInfo.openid,
686 // mp_name: this.$store.state.user.userInfo.mp_name,
687 leftSph: this.pickerInfoChioce.leftSph,
688 rightSph: this.pickerInfoChioce.rightSph,
689 leftCyl: this.pickerInfoChioce.leftCyl,
690 rightCyl: this.pickerInfoChioce.rightCyl,
691 leftAxi: this.pickerInfoChioce.leftAxi,
692 rightAxi: this.pickerInfoChioce.rightAxi,
693 pd: this.pd, // 瞳距
694 mp_name: this.name,
695 // time: this.pickerInfoChioce.time,
696 // img_url2: "http://localhost:8087/images/shop_1/1/",
697 }).then(({ mp_id: mpId }) => {
698 this.mp_id = mpId
699 })
700 flag = 1
701 } else {
702 uni.showToast({
703 title: '请确认您的验光数据',
704 icon: 'none',
705 duration: 3000,
706 })
707 }
708 }
709 }
710 if (this.kinds === 2) {
711 if (this.confirm) {
712 const leftList = ['leftSph', 'leftCyl', 'leftAxi']
713 const rightList = ['rightSph', 'rightCyl', 'rightAxi']
714 // let flag=0;
715 if (this.name !== this.oldname) {
716 store.dispatch('myLoveList/updateMylove', {
717 uid: this.$store.state.user.userInfo.uid,
718 openid: this.$store.state.user.userInfo.openid,
719 mp_id: this.mp_id,
720 keyname: 'name',
721 keyvalue: this.name,
722 })
723 flag = 1
724 }
725 if (this.pd !== this.oldpd) {
726 store.dispatch('myLoveList/updateMylove', {
727 uid: this.$store.state.user.userInfo.uid,
728 openid: this.$store.state.user.userInfo.openid,
729 mp_id: this.mp_id,
730 keyname: 'pd',
731 keyvalue: this.pd,
732 })
733 flag = 1
734 }
735 // 先验证是否输入有无空
736 let q = true
737 for (let k = 0; k < 3; k++) {
738 q = q && (this.pickerInfoList[k].nameArray1[this.pickerInfoList[k].nameIndex1] !== '' &&
739 this.pickerInfoList[k].nameArray2[this.pickerInfoList[k].nameIndex2] !== '')
740 }
741 if (q) {
742 for (let j = 0; j < 3; j++) {
743 if (this.pickerInfoList[j].nameIndex1 !== 0) {
744 store.dispatch('myLoveList/updateMylove', {
745 uid: this.$store.state.user.userInfo.uid,
746 openid: this.$store.state.user.userInfo.openid,
747 mp_id: this.mp_id,
748 keyname: leftList[j],
749 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
750 })
751 }
752 if (this.pickerInfoList[j].nameIndex2 !== 0) {
753 store.dispatch('myLoveList/updateMylove', {
754 uid: this.$store.state.user.userInfo.uid,
755 openid: this.$store.state.user.userInfo.openid,
756 mp_id: this.mp_id,
757 keyname: rightList[j],
758 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2],
759 })
760 }
761 flag = 1
762 }
763 } else {
764 flag = 0
765 uni.showToast({
766 title: '请输入您的验光数据',
767 icon: 'none',
768 duration: 2000,
769 })
770 }
771 if (flag !== 0) {
772 store.dispatch('myLoveList/getLoveList', {
773 uid: this.$store.state.user.userInfo.uid,
774 })
775 }
776 } else {
777 uni.showToast({
778 title: '请确认您的验光数据',
779 icon: 'none',
780 duration: 3000,
781 })
782 }
783 }
784 }
785 }
786 if (flag !== 0) {
787 // 如果数据验证无误，那么更新验光单的数据
788 store.dispatch('myLoveList/getLoveList', {
789 uid: this.$store.state.user.userInfo.uid,
790 })
791 let i = 0
792 // 判断出是哪一个sku被选中
793 for (let index = 0; index < this.current.length; index++) {
794 console.log('index', index, i, index !== this.current.length - 1)
795 if (index !== this.current.length - 1) {
796 // 后续需修改算法：目前暂定只有两个参数选择，后续若有多个参数需要修改实现自适应
797 i = this.current[index] * this.attrList[1].attr.length
798 } else {
799 i += this.current[index]
800 }
801 }
802 // 判断是否其输入的人员数据是否已存在
803 store.dispatch('order/saveParams', {
804 sk_id_arr: this.skuList[i],
805 current: this.current,
806 mp_id: this.mp_id,
807 attrList: this.attrList,
808 })
809 // 跳转到确认订单页面
810 uni.navigateTo({
811 url: `../confirmOrder/confirmOrder?pid=${this.pid}&count=${this.count}&name=${this.name}`,
812 })
813 }
814 },
815 },
816 }
817 </script>
818
819 <style lang="scss">
820 .content {
821 min-height: 100vh;
822 background-color: #f2f2f2;
823 // padding-top: 20rpx;
824 .goodInfo {
825 width: 100%;
826 height: 272rpx;
827 border-radius: 16rpx;
828 background-color: #ffffff;
829 box-sizing: border-box;
830 padding: 36rpx;
831 display: flex;
832 flex-direction: row;
833 justify-content: flex-start;
834 .imageWrap {
835 height: 188rpx;
836 width: 188rpx;
837 margin-right: 28rpx;
838 image {
839 height: 188rpx;
840 width: 188rpx;
841 }
842 }
843 .infoRight {
844 display: flex;
845 flex-direction: column;
846 align-items: flex-start;
847 justify-content: space-between;
848 .goodName {
849 font-size: 28rpx;
850 color: #333333;
851 }
852 .remarks {
853 font-size: 20rpx;
854 color: #999999;
855 }
856 .priceBox {
857 display: flex;
858 justify-content: space-between;
859 align-items: center;
860 width: 100%;
861 font-size: 14px;
862 color: #999999;
863 .price {
864 color: #ff6b4a;
865 font-size: 28rpx;
866 }
867 .counter {
868 display: flex;
869 flex-direction: row;
870 justify-content: space-between;
871 align-items: center;
872 font-size: 28rpx;
873 color: #333333;
874 width: 122rpx;
875 .btn {
876 display: flex;
877 justify-content: center;
878 line-height: 32rpx;
879 height: 32rpx;
880 width: 32rpx;
881 background-color: #f2f2f2;
882 color: #cfcfcf;
883 }
884 }
885 }
886 }
887 }
888 .peopleChoose {
889 width: 100%;
890 min-height: 200rpx;
891 border-radius: 16rpx;
892 background-color: #ffffff;
893 box-sizing: border-box;
894 padding: 36rpx;
895 margin: 10px 0;
896 display: flex;
897 flex-direction: column;
898 justify-content: flex-start;
899 align-items: center;
900 .title {
901 font-size: 16px;
902 color: #333333;
903 letter-spacing: -0.3px;
904 text-align: justify;
905 line-height: 24px;
906 margin: 4px 0;
907 }
908 .loveList {
909 display: flex;
910 flex-direction: row;
911 flex-wrap: wrap;
912 justify-content: flex-start;
913 align-items: center;
914 padding-top: 24rpx;
915 width: 100%;
916 .peopleName {
917 padding: 0 30rpx;
918 height: 60rpx;
919 margin: 0 20rpx 20rpx 0;
920 transition: all 0.3s;
921 background: #f2f2f2;
922 border-radius: 2px;
923 border-radius: 2px;
924 line-height: 60rpx;
925 text-align: center;
926 color: #666666;
927 font-size: 12px;
928 }
929 .active2 {
930 background: rgba(255, 107, 74, 0.15);
931 color: #ff6b4a;
932 }
933 }
934 }
935 .goods-data {
936 width: 100%;
937 box-sizing: border-box;
938 padding: 37rpx 40rpx 0 40rpx;
939 background: #ffffff;
940 border-radius: 12rpx;
941 .opCollapse {
942 width: 100%;
943 padding-bottom: 28rpx;
944 margin-top: 7px;
945 border-bottom: 1px solid #e9e9e9;
946 .head {
947 display: flex;
948 justify-content: space-between;
949 height: 24px;
950 // font-family: PingFangSC-Medium;
951 font-size: 16px;
952 color: #333333;
953 letter-spacing: -0.3px;
954 text-align: justify;
955 line-height: 24px;
956 margin-bottom: 18rpx;
957 .headRighted {
958 width: 0;
959 height: 0;
960 border-left: 4px solid transparent;
961 border-right: 4px solid transparent;
962 border-bottom: 4px solid #cfcfcf;
963 transform: scaleY(-1);
964 margin-top: 10px;
965 }
966 .headMid {
967 font-size: 10px;
968 color: #999999;
969 letter-spacing: -0.19px;
970 margin-left: -120rpx;
971 }
972 .headRight {
973 width: 0;
974 height: 0;
975 border-left: 4px solid transparent;
976 border-right: 4px solid transparent;
977 border-bottom: 4px solid #cfcfcf;
978 margin-top: 10px;
979 }
980 }
981 .body {
982 font-size: 12px;
983 color: #666666;
984 letter-spacing: 0;
985 .bodyBox {
986 margin-top: 15px;
987 .names {
988 font-size: 12px;
989 color: #151515;
990 letter-spacing: 0;
991 text-align: justify;
992 line-height: 17px;
993 margin-left: 5px;
994 margin-right: 10px;
995 }
996 text {
997 font-size: 12px;
998 color: #666666;
999 letter-spacing: 0;
1000 text-align: justify;
1001 }
1002 }
1003 }
1004 .goods-form {
1005 display: flex;
1006 flex-direction: column;
1007 align-items: center;
1008 justify-content: center;
1009 background-color: #fff;
1010 width: 100%;
1011 padding: 40rpx 0;
1012 .p1 {
1013 font-size: 16px;
1014 color: #333333;
1015 letter-spacing: -0.3px;
1016 text-align: justify;
1017 line-height: 24px;
1018 margin: 4px 0;
1019 }
1020 .p2 {
1021 font-size: 12px;
1022 color: #999999;
1023 letter-spacing: -0.23px;
1024 margin-bottom: 32rpx;
1025 }
1026 .image2 {
1027 width: 42rpx;
1028 height: 34rpx;
1029 margin-right: 12rpx;
1030 }
1031 .confirm {
1032 display: flex;
1033 align-items: center;
1034 font-size: 12px;
1035 color: #666666;
1036 letter-spacing: -0.23px;
1037 width: 684rpx;
1038 .image1 {
1039 margin-right: 25rpx;
1040 width: 42rpx;
1041 height: 38rpx;
1042 }
1043 }
1044 .picker {
1045 display: flex;
1046 flex-direction: column;
1047 justify-content: center;
1048 align-items: center;
1049 width: 100%;
1050
1051 .picker-choice {
1052 display: flex;
1053 width: 684rpx;
1054 align-items: center;
1055 margin-bottom: 40rpx;
1056 .input {
1057 border-bottom: 1px solid #cfcfcf;
1058 height: 40rpx;
1059 }
1060 .choice-left {
1061 width: 210rpx;
1062 .pd {
1063 font-size: 14px;
1064 color: #333333;
1065 letter-spacing: -0.26px;
1066 text-align: justify;
1067 line-height: 24px;
1068 margin-right: 44rpx;
1069 }
1070 .p11 {
1071 font-size: 14px;
1072 color: #333333;
1073 letter-spacing: -0.26px;
1074 text-align: justify;
1075 line-height: 24px;
1076 // margin-right: 10px;
1077 }
1078 .p12 {
1079 font-size: 10px;
1080 color: #3f3f3f;
1081 letter-spacing: -0.19px;
1082 text-align: justify;
1083 line-height: 24px;
1084 }
1085 }
1086 .p13 {
1087 font-size: 10px;
1088 color: #999999;
1089 letter-spacing: -0.19px;
1090 margin-right: 10px;
1091 }
1092 .p13-date {
1093 font-size: 10px;
1094 color: #999999;
1095 letter-spacing: -0.19px;
1096 margin-right: 5px;
1097 }
1098 picker {
1099 width: 144rpx;
1100 height: 40rpx;
1101 display: flex;
1102 position: relative;
1103 .p14 {
1104 font-size: 14px;
1105 color: #666666;
1106 letter-spacing: -0.26px;
1107 text-align: center;
1108 width: 124rpx;
1109 border-bottom: 1px solid #cfcfcf;
1110 height: 38rpx;
1111 }
1112 image {
1113 width: 20rpx;
1114 height: 20rpx;
1115 position: absolute;
1116 right: 20rpx;
1117 top: 8rpx;
1118 }
1119 }
1120 }
1121 }
1122 }
1123 }
1124 }
1125 .choose {
1126 width: 100%;
1127 background: #ffffff;
1128 border-radius: 12rpx;
1129 margin-top: 20rpx;
1130 padding: 40rpx 40rpx 112rpx 40rpx;
1131 box-sizing: border-box;
1132 .chooseItem {
1133 width: 100%;
1134 padding-bottom: 32rpx;
1135 border-bottom: 1px solid #e9e9e9;
1136 margin-bottom: 28rpx;
1137 }
1138 .chooseRes {
1139 font-size: 12px;
1140 color: #666666;
1141 }
1142 .itemsWrap {
1143 display: flex;
1144 flex-direction: row;
1145 flex-wrap: wrap;
1146 justify-content: flex-start;
1147 align-items: center;
1148 padding-top: 24rpx;
1149 .item1 {
1150 width: 64rpx;
1151 height: 64rpx;
1152 border-radius: 32rpx;
1153 margin: 0 36rpx 24rpx 0;
1154 transition: all 0.3s;
1155 border: 1px solid #ffffff;
1156 }
1157 .item2 {
1158 // width: 100rpx;
1159 padding: 0 30rpx;
1160 height: 60rpx;
1161 margin: 0 20rpx 20rpx 0;
1162 transition: all 0.3s;
1163 background: #f2f2f2;
1164 border-radius: 2px;
1165 border-radius: 2px;
1166 line-height: 60rpx;
1167 text-align: center;
1168 color: #666666;
1169 font-size: 12px;
1170 }
1171 .active1 {
1172 opacity: 0.7;
1173 border: 1px solid #ff6b4a;
1174 }
1175 .active2 {
1176 background: rgba(255, 107, 74, 0.15);
1177 color: #ff6b4a;
1178 }
1179 }
1180 }
1181 .button {
1182 position: fixed;
1183 z-index: 10;
1184 width: 100%;
1185 height: 112rpx;
1186 background-color: #ff6b4a;
1187 font-size: 16px;
1188 color: #ffffff;
1189 line-height: 112rpx;
1190 text-align: center;
1191 // position: absolute;
1192 bottom: 0;
1193 left: 0;
1194 }
1195 }
1196 /* sheet弹窗 */
1197 .sheet {
1198 width: 100%;
1199 height: 100%;
1200 position: fixed;
1201 top: 150%;
1202 left: 0upx;
1203 bottom: 0upx;
1204 right: 0upx;
1205 background: rgba(0, 0, 0, 0.3);
1206 z-index: 10000;
1207 }
1208
1209 /* 显示时候的动画默认0.5s */
1210 .sheetView {
1211 width: 100%;
1212 height: 0upx;
1213 position: absolute;
1214 bottom: 0upx;
1215 background: white;
1216 z-index: 10001;
1217 transition: all 0.5s;
1218 }
1219 .sheetShow {
1220 top: 0upx !important;
1221 }
1222 /* 关闭时的动画，时间自己可以设置0.5s*/
1223 .sheeHide {
1224 top: 120% !important;
1225 transition: all 0.5s;
1226 }
1227
1228 /* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
1229 .sheetView_active {
1230 height: 942upx;
1231 }
1232 </style>
1233
src/pages/frameDetail/frameDetail.vue
Diff comments   View file @6cba581
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="D1"> 3 <view class="D1">
4 <!-- 轮播图 --> 4 <!-- 轮播图 -->
5 <swiper 5 <swiper
6 class="swiperImage" 6 class="swiperImage"
7 :indicator-dots="true" 7 :indicator-dots="true"
8 :autoplay="true" 8 :autoplay="true"
9 :interval="4000" 9 :interval="4000"
10 :duration="500" 10 :duration="500"
11 > 11 >
12 <swiper-item 12 <swiper-item
13 v-for="(item, index) in goodInfo.pics" 13 v-for="(item, index) in goodInfo.pics"
14 :key="index" 14 :key="index"
15 > 15 >
16 <image 16 <image
17 :src="item" 17 :src="item"
18 mode="scaleToFill" 18 mode="scaleToFill"
19 ></image> 19 ></image>
20 </swiper-item> 20 </swiper-item>
21 </swiper> 21 </swiper>
22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view> 22 <view class="D1_price">￥{{goodInfo.priceArea.Min_Price || '暂无'}}<span class="D1_number">{{goodInfo.trade_num || '暂无'}}人购买过</span></view>
23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view> 23 <view class="D1_name"><span class="D1_name1">{{goodInfo.p_name || '暂无'}}</span></view>
24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view> 24 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
25 </view> 25 </view>
26 <view 26 <!-- <view
27 class="D2" 27 class="D2"
28 v-if="updateGoodType == 2 || updateGoodType == 4" 28 v-if="updateGoodType == 2 || updateGoodType == 4"
29 > 29 >
30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view> 30 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view> 31 <view><span class="D2_span1">风格：</span><span class="D2_span2">{{introduction.func}}</span></view>
32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view> 32 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
33 </view>
34 <!-- <view
35 class="D2"
36 v-if="updateGoodType == 1"
37 >
38 <view><span class="D2_span1">镜片材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
39 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
40 <view><span class="D2_span1">使用场景：</span><span class="D2_span2">{{introduction.rate}}</span></view>
41 </view>
42 <view
43 class="D2"
44 v-if="updateGoodType == 3"
45 >
46 <view><span class="D2_span1">材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
47 <view><span class="D2_span1">直径/基弧：</span><span class="D2_span2">{{introduction.func}}</span></view>
48 <view><span class="D2_span1">适用性别：</span><span class="D2_span2">{{introduction.rate}}</span></view>
49 </view> --> 33 </view> -->
50 <view class="D3"> 34 <view class="D3">
51 <view class="screenBar"> 35 <view class="screenBar">
52 <view 36 <view
53 v-for="item in screenItems" 37 v-for="item in screenItems"
54 :key="item.current" 38 :key="item.current"
55 @click="tabChange(item.current)" 39 @click="tabChange(item.current)"
56 > 40 >
57 <view 41 <view
58 class="screenItem" 42 class="screenItem"
59 v-bind:class="{ active: current === item.current }" 43 v-bind:class="{ active: current === item.current }"
60 >{{ item.text || '暂无' }}</view> 44 >{{ item.text || '暂无' }}</view>
61 </view> 45 </view>
62 </view> 46 </view>
63 <view 47 <view
64 class="screen-item" 48 class="screen-item"
65 v-if="current === 1" 49 v-if="current === 1"
66 > 50 >
67 <view class="D3_list"> 51 <view class="D3_list">
68 <view 52 <view
69 v-for="(item) in parameter" 53 v-for="(item) in parameter"
70 :key="item.key" 54 :key="item.key"
71 > 55 >
72 <image 56 <image
73 class="D3_image" 57 class="D3_image"
74 v-bind:src="item.img" 58 v-bind:src="item.img"
75 ></image> 59 ></image>
76 <span>{{item.standard || '暂无'}}</span> 60 <span>{{item.standard || '暂无'}}</span>
77 <span>{{item.slength || '暂无'}}</span> 61 <span>{{item.slength || '暂无'}}</span>
78 </view> 62 </view>
79 </view> 63 </view>
80 </view> 64 </view>
81 <view 65 <view
82 class="screen-item" 66 class="screen-item"
83 v-if="current === 0" 67 v-if="current === 0"
84 > 68 >
85 <view class="D3_list"> 69 <view class="D3_list">
86 <!-- <block> 70 <!-- <block>
87 <view>主体</view> 71 <view>主体</view>
88 <view>商品产地：韩国</view> 72 <view>商品产地：韩国</view>
89 <view>包装清单：彩色隐形 * 1</view> 73 <view>包装清单：彩色隐形 * 1</view>
90 </block> --> 74 </block> -->
91 <!-- 迭代时建议配合接口修改 为数组 --> 75 <!-- 迭代时建议配合接口修改 为数组 -->
92 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0"> 76 <view v-if="tag.prod_tag_age && tag.prod_tag_age.length !== 0">
93 <view class=""> 77 <view class="">
94 年龄：<view 78 年龄：<view
95 v-for="(item,index) in tag.prod_tag_age" 79 v-for="(item,index) in tag.prod_tag_age"
96 :key="index" 80 :key="index"
97 > 81 >
98 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text> 82 {{item.label}}<text v-if="index !== tag.prod_tag_age.length - 1">/</text>
99 </view> 83 </view>
100 </view> 84 </view>
101 </view> 85 </view>
102 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0"> 86 <view v-if="tag.prod_tag_color && tag.prod_tag_color.length !== 0">
103 <view class=""> 87 <view class="">
104 颜色：<view 88 颜色：<view
105 v-for="(item,index) in tag.prod_tag_color" 89 v-for="(item,index) in tag.prod_tag_color"
106 :key="index" 90 :key="index"
107 > 91 >
108 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text> 92 {{item.label}}<text v-if="index !== tag.prod_tag_color.length - 1">/</text>
109 </view> 93 </view>
110 </view> 94 </view>
111 </view> 95 </view>
112 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0"> 96 <view v-if="tag.prod_tag_face && tag.prod_tag_face.length !== 0">
113 <view class=""> 97 <view class="">
114 脸型：<view 98 脸型：<view
115 v-for="(item,index) in tag.prod_tag_face" 99 v-for="(item,index) in tag.prod_tag_face"
116 :key="index" 100 :key="index"
117 > 101 >
118 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text> 102 {{item.label}}<text v-if="index !== tag.prod_tag_face.length - 1">/</text>
119 </view> 103 </view>
120 </view> 104 </view>
121 </view> 105 </view>
122 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0"> 106 <view v-if="tag.prod_tag_freesend && tag.prod_tag_freesend.length !== 0">
123 <view class=""> 107 <view class="">
124 赠品：<view 108 赠品：<view
125 v-for="(item,index) in tag.prod_tag_freesend" 109 v-for="(item,index) in tag.prod_tag_freesend"
126 :key="index" 110 :key="index"
127 > 111 >
128 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text> 112 {{item.label}}<text v-if="index !== tag.prod_tag_freesend.length - 1">/</text>
129 </view> 113 </view>
130 </view> 114 </view>
131 </view> 115 </view>
132 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0"> 116 <view v-if="tag.prod_tag_insurance && tag.prod_tag_insurance.length !== 0">
133 <view class=""> 117 <view class="">
134 保险：<view 118 保险：<view
135 v-for="(item,index) in tag.prod_tag_insurance" 119 v-for="(item,index) in tag.prod_tag_insurance"
136 :key="index" 120 :key="index"
137 > 121 >
138 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text> 122 {{item.label}}<text v-if="index !== tag.prod_tag_insurance.length - 1">/</text>
139 </view> 123 </view>
140 </view> 124 </view>
141 </view> 125 </view>
142 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0"> 126 <view v-if="tag.prod_tag_metal && tag.prod_tag_metal.length !== 0">
143 <view class=""> 127 <view class="">
144 材质：<view 128 材质：<view
145 v-for="(item,index) in tag.prod_tag_metal" 129 v-for="(item,index) in tag.prod_tag_metal"
146 :key="index" 130 :key="index"
147 > 131 >
148 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text> 132 {{item.label}}<text v-if="index !== tag.prod_tag_metal.length - 1">/</text>
149 </view> 133 </view>
150 </view> 134 </view>
151 </view> 135 </view>
152 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0"> 136 <view v-if="tag.prod_tag_personal && tag.prod_tag_personal.length !== 0">
153 <view class=""> 137 <view class="">
154 个性：<view 138 个性：<view
155 v-for="(item,index) in tag.prod_tag_personal" 139 v-for="(item,index) in tag.prod_tag_personal"
156 :key="index" 140 :key="index"
157 > 141 >
158 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text> 142 {{item.label}}<text v-if="index !== tag.prod_tag_personal.length - 1">/</text>
159 </view> 143 </view>
160 </view> 144 </view>
161 </view> 145 </view>
162 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0"> 146 <view v-if="tag.prod_tag_sense && tag.prod_tag_sense.length !== 0">
163 <view class=""> 147 <view class="">
164 场景：<view 148 场景：<view
165 v-for="(item,index) in tag.prod_tag_sense" 149 v-for="(item,index) in tag.prod_tag_sense"
166 :key="index" 150 :key="index"
167 > 151 >
168 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text> 152 {{item.label}}<text v-if="index !== tag.prod_tag_sense.length - 1">/</text>
169 </view> 153 </view>
170 </view> 154 </view>
171 </view> 155 </view>
172 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0"> 156 <view v-if="tag.prod_tag_sex && tag.prod_tag_sex.length !== 0">
173 <view class=""> 157 <view class="">
174 性别：<view 158 性别：<view
175 v-for="(item,index) in tag.prod_tag_sex" 159 v-for="(item,index) in tag.prod_tag_sex"
176 :key="index" 160 :key="index"
177 > 161 >
178 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text> 162 {{item.label}}<text v-if="index !== tag.prod_tag_sex.length - 1">/</text>
179 </view> 163 </view>
180 </view> 164 </view>
181 </view> 165 </view>
182 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0"> 166 <view v-if="tag.prod_tag_style && tag.prod_tag_style.length !== 0">
183 <view class=""> 167 <view class="">
184 风格：<view 168 风格：<view
185 v-for="(item,index) in tag.prod_tag_style" 169 v-for="(item,index) in tag.prod_tag_style"
186 :key="index" 170 :key="index"
187 > 171 >
188 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text> 172 {{item.label}}<text v-if="index !== tag.prod_tag_style.length - 1">/</text>
189 </view> 173 </view>
190 </view> 174 </view>
191 </view> 175 </view>
192 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0"> 176 <view v-if="tag.prod_tag_weight && tag.prod_tag_weight.length !== 0">
193 <view class=""> 177 <view class="">
194 重量：<view 178 重量：<view
195 v-for="(item,index) in tag.prod_tag_weight" 179 v-for="(item,index) in tag.prod_tag_weight"
196 :key="index" 180 :key="index"
197 > 181 >
198 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text> 182 {{item.label}}<text v-if="index !== tag.prod_tag_weight.length - 1">/</text>
199 </view> 183 </view>
200 </view> 184 </view>
201 </view> 185 </view>
202 </view> 186 </view>
203 </view> 187 </view>
204 <view 188 <view
205 class="screen-item " 189 class="screen-item "
206 v-if="current ===2" 190 v-if="current ===2"
207 > 191 >
208 <view class="customerService"> 192 <view class="customerService">
209 <view class="serviceItem"> 193 <view class="serviceItem">
210 <view class="title"> 194 <view class="title">
211 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 195 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
212 <text class="titleText">卖家服务</text> 196 <text class="titleText">卖家服务</text>
213 </view> 197 </view>
214 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view> 198 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验</view>
215 </view> 199 </view>
216 <view class="serviceItem"> 200 <view class="serviceItem">
217 <view class="title"> 201 <view class="title">
218 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 202 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
219 <text class="titleText">平台承诺</text> 203 <text class="titleText">平台承诺</text>
220 </view> 204 </view>
221 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view> 205 <view class="itemContent">平台卖家服务，为您在平台获得最优的购买体验阿斯蒂芬的发射点发射点发生的房贷首付的发护法国会国家和国际会更加和</view>
222 </view> 206 </view>
223 <view class="serviceItem"> 207 <view class="serviceItem">
224 <view class="title"> 208 <view class="title">
225 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view> 209 <view style="width: 6rpx;height: 6rpx;border-radius: 3rpx;background-color: #FF6B4A;margin-right: 12rpx;"></view>
226 <text class="titleText">正品保证</text> 210 <text class="titleText">正品保证</text>
227 </view> 211 </view>
228 <view class="itemContent">向您保证所售商品均为正品行货</view> 212 <view class="itemContent">向您保证所售商品均为正品行货</view>
229 </view> 213 </view>
230 <view class="serviceItem2"> 214 <view class="serviceItem2">
231 <view class="title"> 215 <view class="title">
232 <text class="titleText">权利申明</text> 216 <text class="titleText">权利申明</text>
233 </view> 217 </view>
234 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view> 218 <view class="itemContent">任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知。</view>
235 </view> 219 </view>
236 <view class="serviceItem2"> 220 <view class="serviceItem2">
237 <view class="title"> 221 <view class="title">
238 <text class="titleText">价格保证</text> 222 <text class="titleText">价格保证</text>
239 </view> 223 </view>
240 <view class="itemContent"> 224 <view class="itemContent">
241 <view class="itemContent-child"> 225 <view class="itemContent-child">
242 <text class="contentTitle">平台价:</text> 226 <text class="contentTitle">平台价:</text>
243 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 227 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
244 </view> 228 </view>
245 <view class="itemContent-child"> 229 <view class="itemContent-child">
246 <text class="contentTitle">划线价:</text> 230 <text class="contentTitle">划线价:</text>
247 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 231 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
248 </view> 232 </view>
249 <view class="itemContent-child"> 233 <view class="itemContent-child">
250 <text class="contentTitle">平折扣:</text> 234 <text class="contentTitle">平折扣:</text>
251 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 235 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
252 </view> 236 </view>
253 <view class="itemContent-child"> 237 <view class="itemContent-child">
254 <text class="contentTitle">异常问题:</text> 238 <text class="contentTitle">异常问题:</text>
255 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text> 239 <text>任何个人或单位如果同时符合以下两个条件：1. 权利人发现网络用户利用网络服务侵害其合法权益；2. 百度的搜索引擎系统以自动检索方式而链接到第三方网站的内容侵犯了上述权利人的合法权益。请上述个人或单位务必以书面的通讯方式向百度提交权利通知</text>
256 </view> 240 </view>
257 241
258 </view> 242 </view>
259 </view> 243 </view>
260 </view> 244 </view>
261 </view> 245 </view>
262 </view> 246 </view>
263 <view 247 <view
264 class="D4" 248 class="D4"
265 v-if="current !==2" 249 v-if="current !==2"
266 > 250 >
267 <view class="D4_esvalue"> 251 <view class="D4_esvalue">
268 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view> 252 <view>{{esvalue}}&nbsp;&nbsp;{{goodInfo.judgeInfo.good}}</view>
269 <view class="D4_2"> 253 <view class="D4_2">
270 <view 254 <view
271 class="star" 255 class="star"
272 v-for="o in starCount" 256 v-for="o in starCount"
273 :key="o" 257 :key="o"
274 > 258 >
275 <image 259 <image
276 src="../../static/img/detail/d_star.png" 260 src="../../static/img/detail/d_star.png"
277 mode="aspectFill" 261 mode="aspectFill"
278 style="height: 26rpx; width: 28rpx;" 262 style="height: 26rpx; width: 28rpx;"
279 ></image> 263 ></image>
280 </view> 264 </view>
281 </view> 265 </view>
282 </view> 266 </view>
283 <view class="D4_list"> 267 <view class="D4_list">
284 <view 268 <view
285 v-for="(assess) in goodInfo.judge_tag" 269 v-for="(assess) in goodInfo.judge_tag"
286 :key="assess.key" 270 :key="assess.key"
287 >{{assess.name}}</view> 271 >{{assess.name}}</view>
288 </view> 272 </view>
289 </view> 273 </view>
290 <view 274 <view
291 class="D5" 275 class="D5"
292 v-if="current !==2" 276 v-if="current !==2"
293 > 277 >
294 <view 278 <view
295 class="D5_fixed1" 279 class="D5_fixed1"
296 @click="consolg(goodInfo.prodIntro1)" 280 @click="consolg(goodInfo.prodIntro1)"
297 > 281 >
298 <image src="/static/img/detail/hr.png"></image> 282 <image src="/static/img/detail/hr.png"></image>
299 <view>商品详细</view> 283 <view>商品详细</view>
300 <image src="/static/img/detail/hr.png"></image> 284 <image src="/static/img/detail/hr.png"></image>
301 </view> 285 </view>
302 <view 286 <view
303 class="D5_all" 287 class="D5_all"
304 v-html="test" 288 v-html="test"
305 > 289 >
306 <!-- <block> 290 <!-- <block>
307 <rich-text :nodes="goodInfo.prodIntro1"></rich-text> 291 <rich-text :nodes="goodInfo.prodIntro1"></rich-text>
308 </block> --> 292 </block> -->
309 </view> 293 </view>
310 </view> 294 </view>
311 <!-- 底部菜单 --> 295 <!-- 底部菜单 -->
312 <view class="botton"> 296 <view class="botton">
313 <view 297 <view
314 @tap="toCart()" 298 @tap="toCart()"
315 class="botton_1" 299 class="botton_1"
316 > 300 >
317 <view class="cart_icon"> 301 <view class="cart_icon">
318 <image v-bind:src="imgShop.img" /> 302 <image v-bind:src="imgShop.img" />
319 <text>{{cartNumber}}</text> 303 <text>{{cartNumber}}</text>
320 </view> 304 </view>
321 <view class="botton_image">购物车</view> 305 <view class="botton_image">购物车</view>
322 </view> 306 </view>
323 <view class="botton_2"> 307 <view class="botton_2">
324 <view 308 <view
325 class="botton_input" 309 class="botton_input"
326 @tap="showBottom(1)" 310 @tap="showBottom(1)"
327 >加入购物车</view> 311 >加入购物车</view>
328 <view 312 <view
329 class="botton_now" 313 class="botton_now"
330 314
331 @click="showBottom(2)" 315 @click="showBottom(2)"
332 >立即购买</view> 316 >立即购买</view>
333 </view> 317 </view>
334 </view> 318 </view>
335 <BottomSheet 319 <BottomSheet
336 v-if="isShowBottom" 320 v-if="isShowBottom"
337 :isCart="isCart" 321 :isCart="isCart"
338 @addCart="addCart" 322 @addCart="addCart"
339 :pid="pid" 323 :pid="pid"
340 :goodInfo="goodInfo" 324 :goodInfo="goodInfo"
341 :isShowBottom="isShowBottom" 325 :isShowBottom="isShowBottom"
342 @closeBottom="closeBottom" 326 @closeBottom="closeBottom"
343 ></BottomSheet> 327 ></BottomSheet>
344 </view> 328 </view>
345 </template> 329 </template>
346 330
347 <script> 331 <script>
348 import store from '@/store' 332 import store from '@/store'
349 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue'; 333 import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
350 export default { 334 export default {
351 components:{ 335 components:{
352 BottomSheet, 336 BottomSheet,
353 }, 337 },
354 data () { 338 data () {
355 return { 339 return {
356 isCart:Number, 340 isCart:Number,
357 isShowBottom : false, //底部弹窗开关 341 isShowBottom : false, //底部弹窗开关
358 342
359 test: '', 343 test: '',
360 goodType: 2, 344 goodType: 2,
361 screenItems: [ 345 screenItems: [
362 { current: 0, text: '商品介绍' }, 346 { current: 0, text: '商品介绍' },
363 { current: 1, text: '规格参数' }, 347 { current: 1, text: '规格参数' },
364 { current: 2, text: '售后保障' }, 348 { current: 2, text: '售后保障' },
365 ], 349 ],
366 current: 0, 350 current: 0,
367 starCount: 5, 351 starCount: 5,
368 parameter: [ 352 parameter: [
369 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' }, 353 { key: 0, img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
370 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' }, 354 { key: 1, img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
371 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' }, 355 { key: 2, img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
372 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' }, 356 { key: 3, img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
373 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' }, 357 { key: 4, img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
374 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' }, 358 { key: 5, img: '/static/img/detail/d7.png', standard: '框架重', slength: '19mm' },
375 ], 359 ],
376 esvalue: '宝贝好评率', 360 esvalue: '宝贝好评率',
377 introduction: { 361 introduction: {
378 material: '钛合金', 362 material: '钛合金',
379 func: '抗疲劳/防辐射', 363 func: '抗疲劳/防辐射',
380 rate: '男/女', 364 rate: '男/女',
381 }, 365 },
382 imgAll: '/static/img/detail/d8.png', 366 imgAll: '/static/img/detail/d8.png',
383 photoes: [ 367 photoes: [
384 { value: '日常办公', img: '/static/img/detail/d9.png' }, 368 { value: '日常办公', img: '/static/img/detail/d9.png' },
385 { value: '上网', img: '/static/img/detail/d10.png' }, 369 { value: '上网', img: '/static/img/detail/d10.png' },
386 { value: '追剧', img: '/static/img/detail/d11.png' }, 370 { value: '追剧', img: '/static/img/detail/d11.png' },
387 { value: '玩游戏', img: '/static/img/detail/d12.png' }, 371 { value: '玩游戏', img: '/static/img/detail/d12.png' },
388 ], 372 ],
389 imgDetail: '/static/img/detail/d13.png', 373 imgDetail: '/static/img/detail/d13.png',
390 imgShop: { 374 imgShop: {
391 img: '/static/tab-cart.png', 375 img: '/static/tab-cart.png',
392 IsShown: false, 376 IsShown: false,
393 }, 377 },
394 tag: { 378 tag: {
395 prod_tag_freesend: [{ 379 prod_tag_freesend: [{
396 label: '眼镜盒', 380 label: '眼镜盒',
397 value: '262', 381 value: '262',
398 }], 382 }],
399 }, 383 },
400 384
401 pid: Number, 385 pid: Number,
402 // 购物车数据 386 // 购物车数据
403 addCartList: { 387 addCartList: {
404 uid: Number,//用户的唯一识别码 388 uid: Number,//用户的唯一识别码
405 openid: String, 389 openid: String,
406 mp_id: Number,//使用人 390 mp_id: Number,//使用人
407 sk_id: Number,//产品的sku_id 391 sk_id: Number,//产品的sku_id
408 num: Number,//购买数量 392 num: Number,//购买数量
409 pid: Number,//产品id 393 pid: Number,//产品id
410 price: Number,//价格 394 price: Number,//价格
411 checkedSKU:Object//产品信息 395 checkedSKU:Object//产品信息
412 }, 396 },
413 } 397 }
414 }, 398 },
415 onLoad: function ({ pid, sk_id: skId }) { 399 onLoad: function ({ pid, sk_id: skId }) {
416 this.pid = pid 400 this.pid = pid
417 // console.log('sk_id=====>',sk_id) 401 // console.log('sk_id=====>',sk_id)
418 store.dispatch('read/fetch', { 402 store.dispatch('read/fetch', {
419 pid, 403 pid,
420 // sk_id: skId, 404 // sk_id: skId,
421 }).then(() => { 405 }).then(() => {
422 this.parameter[0].slength = `${this.goodInfo.frame_width}mm` 406 this.parameter[0].slength = `${this.goodInfo.frame_width}mm`
423 this.parameter[1].slength = `${this.goodInfo.glass_width}mm` 407 this.parameter[1].slength = `${this.goodInfo.glass_width}mm`
424 this.parameter[2].slength = `${this.goodInfo.glass_height}mm` 408 this.parameter[2].slength = `${this.goodInfo.glass_height}mm`
425 this.parameter[3].slength = `${this.goodInfo.nose_width}mm` 409 this.parameter[3].slength = `${this.goodInfo.nose_width}mm`
426 this.parameter[4].slength = `${this.goodInfo.leg_long}mm` 410 this.parameter[4].slength = `${this.goodInfo.leg_long}mm`
427 this.parameter[5].slength = `${this.goodInfo.weight}mm` 411 this.parameter[5].slength = `${this.goodInfo.weight}mm`
428 this.tag = this.goodInfo.tag 412 this.tag = this.goodInfo.tag
429 this.test = this.goodInfo.prodIntro1 413 this.test = this.goodInfo.prodIntro1
430 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') 414 this.test = this.test.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
431 // addCart 415 // addCart
432 this.addCartList.uid = this.$store.state.user.userInfo.uid 416 this.addCartList.uid = this.$store.state.user.userInfo.uid
433 this.addCartList.openid = this.$store.state.user.userInfo.openid 417 this.addCartList.openid = this.$store.state.user.userInfo.openid
434 this.addCartList.pid = this.goodInfo.pid 418 this.addCartList.pid = this.goodInfo.pid
435 this.addCartList.price = this.goodInfo.priceArea.Min_Price 419 this.addCartList.price = this.goodInfo.priceArea.Min_Price
436 }) 420 })
437 store.dispatch('cart/getCartList') 421 store.dispatch('cart/getCartList')
438 // console.log(this.$store.state.user.userInfo.uid + 'ssss') 422 // console.log(this.$store.state.user.userInfo.uid + 'ssss')
439 }, 423 },
440 computed: { 424 computed: {
441 updateGoodType () { 425 updateGoodType () {
442 return this.goodType 426 return this.goodType
443 }, 427 },
444 goodInfo () { 428 goodInfo () {
445 // console.log(this.$store.state.read.goodInfo) 429 // console.log(this.$store.state.read.goodInfo)
446 return this.$store.state.read.goodInfo 430 return this.$store.state.read.goodInfo
447 }, 431 },
448 cartNumber() { 432 cartNumber() {
449 return this.$store.state.cart.cartList.length || 0 433 return this.$store.state.cart.cartList.length || 0
450 }, 434 },
451 }, 435 },
452 methods: { 436 methods: {
453 // 底部弹窗开关 437 // 底部弹窗开关
454 showBottom(isCart) { 438 showBottom(isCart) {
455 this.isCart = isCart 439 this.isCart = isCart
456 this.isShowBottom = true 440 this.isShowBottom = true
457 }, 441 },
458 closeBottom() { 442 closeBottom() {
459 this.isShowBottom = false 443 this.isShowBottom = false
460 }, 444 },
461 // 前往购物车 445 // 前往购物车
462 toCart() { 446 toCart() {
463 uni.switchTab({ 447 uni.switchTab({
464 url: '/pages/cart/cart', 448 url: '/pages/cart/cart',
465 success: res => {}, 449 success: res => {},
466 fail: (error) => { console.log('跳转购物车失败======>', error) }, 450 fail: (error) => { console.log('跳转购物车失败======>', error) },
467 complete: () => { console.log('toCart') }, 451 complete: () => { console.log('toCart') },
468 }) 452 })
469 }, 453 },
470 // 加入购物车 454 // 加入购物车
471 addCart (mp_id,num,checkedSKU,sk_id) { 455 addCart (mp_id,num,checkedSKU,sk_id) {
472 this.addCartList.mp_id = mp_id 456 this.addCartList.mp_id = mp_id
473 this.addCartList.sk_id = sk_id 457 this.addCartList.sk_id = sk_id
474 this.addCartList.num = num 458 this.addCartList.num = num
475 this.addCartList.checkedSKU = checkedSKU 459 this.addCartList.checkedSKU = checkedSKU
476 console.log('添加购物车的参数',this.addCartList) 460 console.log('添加购物车的参数',this.addCartList)
477 store.dispatch('cart/addCart', this.addCartList).then((res)=>{ 461 store.dispatch('cart/addCart', this.addCartList).then((res)=>{
478 if(res.code == 1){ 462 if(res.code == 1){
479 uni.showToast({ 463 uni.showToast({
480 title:'添加成功~', 464 title:'添加成功~',
481 icon:'success' 465 icon:'success'
482 }) 466 })
483 } 467 }
484 // 再次请求购物车接口，实现实时更新 468 // 再次请求购物车接口，实现实时更新
485 store.dispatch('cart/getCartList', { 469 store.dispatch('cart/getCartList', {
486 uid: this.$store.state.user.userInfo.uid, 470 uid: this.$store.state.user.userInfo.uid,
487 }) 471 })
488 }) 472 })
489 473
490 }, 474 },
491 goPerchase () { 475 goPerchase () {
492 // switch (this.updateGoodType) { 476 // switch (this.updateGoodType) {
493 // case '1': 477 // case '1':
494 console.log('goPerchase') 478 console.log('goPerchase')
495 uni.navigateTo({ 479 uni.navigateTo({
496 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`, 480 url: `../purchaseLenses/purchaseLenses?pid=${this.pid}`,
497 success: res => {}, 481 success: res => {},
498 fail: (error) => { console.log('跳转参数选择失败======>', error) }, 482 fail: (error) => { console.log('跳转参数选择失败======>', error) },
499 complete: () => { console.log('goPerchase') }, 483 complete: () => { console.log('goPerchase') },
500 }) 484 })
501 // break
502 // case '2':
503 // uni.navigateTo({
504 // url: '../detailStandard/detailStandard_k',
505 // success: res => {},
506 // fail: () => {},
507 // complete: () => {}
508 // })
509 // break
510 // case '3':
511 // uni.navigateTo({
512 // url: '../purchaseLenses/purchaseLenses',
513 // success: res => {},
514 // fail: () => {},
515 // complete: () => {}
516 // })
517 // break
518 // case '4':
519 // uni.navigateTo({
520 // url: '../detailStandard/detailStandard_sun',
521 // success: res => {},
522 // fail: () => {},
523 // complete: () => {}
524 // })
525 // break
526 // default :
527 // break
528 // }
529 }, 485 },
530 // 加入购物车
531 // addCart () {
532 // store.dispatch('cart/addCart', {
533 // uid: this.$store.state.user.userInfo.uid,
534 // openid: this.$store.state.user.userInfo.openid,
535 // pid: this.pid,
536 // checkedSKU: {},
537 // })
538 // store.dispatch('cart/getCartList', {
539 // uid: this.$store.state.user.userInfo.uid, // 用户id
540 // })
541 // },
542 tabChange (e) { 486 tabChange (e) {
543 if (this.current !== e) { 487 if (this.current !== e) {
544 this.current = e 488 this.current = e
545 } 489 }
546 }, 490 },
547 }, 491 },
548 } 492 }
549 </script> 493 </script>
550 <style lang='scss'> 494 <style lang='scss'>
551 .container { 495 .container {
552 background-color: #f8f8f8; 496 background-color: #f8f8f8;
553 } 497 }
554 .D1, 498 .D1,
555 .D2, 499 .D2,
556 .D3, 500 .D3,
557 .D4, 501 .D4,
558 .D6 { 502 .D6 {
559 background: #ffffff; 503 background: #ffffff;
560 margin-bottom: 10px; 504 margin-bottom: 10px;
561 padding: 8px 20px 8px 20px; 505 padding: 8px 20px 8px 20px;
562 box-sizing: border-box; 506 box-sizing: border-box;
563 .swiperImage { 507 .swiperImage {
564 width: 684rpx; 508 width: 684rpx;
565 height: 480rpx; 509 height: 480rpx;
566 image { 510 image {
567 max-width: 100%; 511 max-width: 100%;
568 max-height: 100%; 512 max-height: 100%;
569 border-radius: 16rpx; 513 border-radius: 16rpx;
570 } 514 }
571 } 515 }
572 } 516 }
573 .D5 { 517 .D5 {
574 background: #ffffff; 518 background: #ffffff;
575 padding: 8px 20px 8px 20px; 519 padding: 8px 20px 8px 20px;
576 box-sizing: border-box; 520 box-sizing: border-box;
577 } 521 }
578 .swiperImage { 522 .swiperImage {
579 width: 100%; 523 width: 100%;
580 height: 560rpx; 524 height: 560rpx;
581 .swiper-item { 525 .swiper-item {
582 width: 100%; 526 width: 100%;
583 image { 527 image {
584 width: 100%; 528 width: 100%;
585 } 529 }
586 } 530 }
587 } 531 }
588 .D1 { 532 .D1 {
589 .D1_price { 533 .D1_price {
590 color: #eb5d3b; 534 color: #eb5d3b;
591 font-size: 18px; 535 font-size: 18px;
592 margin-top: 5px; 536 margin-top: 5px;
593 font-family: "PingFangSC-Semibold"; 537 font-family: "PingFangSC-Semibold";
594 display: flex; 538 display: flex;
595 justify-content: space-between; 539 justify-content: space-between;
596 .D1_number { 540 .D1_number {
597 color: #999999; 541 color: #999999;
598 font-size: 14px; 542 font-size: 14px;
599 font-family: "PingFangSC-Regular"; 543 font-family: "PingFangSC-Regular";
600 } 544 }
601 } 545 }
602 .D1_name { 546 .D1_name {
603 font-size: 16px; 547 font-size: 16px;
604 font-family: "PingFangSC-Semibold"; 548 font-family: "PingFangSC-Semibold";
605 margin-top: 5px; 549 margin-top: 5px;
606 .D1_name1 { 550 .D1_name1 {
607 font-weight: bold; 551 font-weight: bold;
608 font-size: 16px; 552 font-size: 16px;
609 color: #333333; 553 color: #333333;
610 } 554 }
611 } 555 }
612 .D1_spans { 556 .D1_spans {
613 font-size: 10px; 557 font-size: 10px;
614 color: #999999; 558 color: #999999;
615 margin-top: 5px; 559 margin-top: 5px;
616 span { 560 span {
617 height: 14px; 561 height: 14px;
618 margin-right: 10px; 562 margin-right: 10px;
619 } 563 }
620 } 564 }
621 } 565 }
622 .D2 { 566 .D2 {
623 font-size: 14px; 567 font-size: 14px;
624 font-family: "PingFangSC-Regular"; 568 font-family: "PingFangSC-Regular";
625 view { 569 view {
626 height: 24px; 570 height: 24px;
627 } 571 }
628 .D2_span1 { 572 .D2_span1 {
629 color: #999999; 573 color: #999999;
630 } 574 }
631 .D2_span2 { 575 .D2_span2 {
632 color: #333333; 576 color: #333333;
633 } 577 }
634 } 578 }
635 .D3 { 579 .D3 {
636 .screenBar { 580 .screenBar {
637 width: 670rpx; 581 width: 670rpx;
638 margin-top: 20rpx; 582 margin-top: 20rpx;
639 margin-bottom: 24rpx; 583 margin-bottom: 24rpx;
640 display: flex; 584 display: flex;
641 flex-direction: row; 585 flex-direction: row;
642 justify-content: space-between; 586 justify-content: space-between;
643 align-items: center; 587 align-items: center;
644 font-size: 14px; 588 font-size: 14px;
645 color: #333333; 589 color: #333333;
646 transition: all 0.2s; 590 transition: all 0.2s;
647 } 591 }
648 .screen-item { 592 .screen-item {
649 font-size: 32rpx; 593 font-size: 32rpx;
650 color: #333333; 594 color: #333333;
651 display: flex; 595 display: flex;
652 transition: all 0.2s; 596 transition: all 0.2s;
653 .D3_list { 597 .D3_list {
654 margin-bottom: 4px; 598 margin-bottom: 4px;
655 } 599 }
656 .D3_list view { 600 .D3_list view {
657 display: flex; 601 display: flex;
658 align-content: center; 602 align-content: center;
659 font-size: 14px; 603 font-size: 14px;
660 color: #333333; 604 color: #333333;
661 } 605 }
662 .D3_list image { 606 .D3_list image {
663 width: 50px; 607 width: 50px;
664 height: 25px; 608 height: 25px;
665 margin-right: 6px; 609 margin-right: 6px;
666 } 610 }
667 .D3_list span { 611 .D3_list span {
668 margin-left: 6px; 612 margin-left: 6px;
669 margin-right: 5px; 613 margin-right: 5px;
670 font-family: "PingFangSC-Regular"; 614 font-family: "PingFangSC-Regular";
671 } 615 }
672 } 616 }
673 .active { 617 .active {
674 border-bottom: 4rpx solid #ff6b4a; 618 border-bottom: 4rpx solid #ff6b4a;
675 } 619 }
676 .customerService { 620 .customerService {
677 margin-bottom: 90rpx; 621 margin-bottom: 90rpx;
678 .serviceItem { 622 .serviceItem {
679 margin-bottom: 32rpx; 623 margin-bottom: 32rpx;
680 .title { 624 .title {
681 display: flex; 625 display: flex;
682 flex-direction: row; 626 flex-direction: row;
683 align-items: center; 627 align-items: center;
684 .titleText { 628 .titleText {
685 font-size: 14px; 629 font-size: 14px;
686 color: #333333; 630 color: #333333;
687 margin-bottom: 12rpx; 631 margin-bottom: 12rpx;
688 } 632 }
689 } 633 }
690 .itemContent { 634 .itemContent {
691 font-size: 14px; 635 font-size: 14px;
692 color: #999999; 636 color: #999999;
693 margin-left: 18rpx; 637 margin-left: 18rpx;
694 } 638 }
695 } 639 }
696 .serviceItem2 { 640 .serviceItem2 {
697 margin-left: 18rpx; 641 margin-left: 18rpx;
698 margin-bottom: 32rpx; 642 margin-bottom: 32rpx;
699 .titleText { 643 .titleText {
700 font-size: 14px; 644 font-size: 14px;
701 color: #ff6b4a; 645 color: #ff6b4a;
702 } 646 }
703 .itemContent { 647 .itemContent {
704 font-size: 14px; 648 font-size: 14px;
705 color: #999999; 649 color: #999999;
706 .itemContent-child { 650 .itemContent-child {
707 margin-bottom: 40rpx; 651 margin-bottom: 40rpx;
708 .contentTitle { 652 .contentTitle {
709 border-bottom: 1px solid #ff6b4a; 653 border-bottom: 1px solid #ff6b4a;
710 } 654 }
711 } 655 }
712 } 656 }
713 } 657 }
714 } 658 }
715 } 659 }
716 .D4 { 660 .D4 {
717 .D4_esvalue { 661 .D4_esvalue {
718 font-size: 14px; 662 font-size: 14px;
719 color: #333333; 663 color: #333333;
720 display: flex; 664 display: flex;
721 justify-content: space-between; 665 justify-content: space-between;
722 margin-bottom: 10px; 666 margin-bottom: 10px;
723 .D4_2 { 667 .D4_2 {
724 width: 90px; 668 width: 90px;
725 display: flex; 669 display: flex;
726 align-items: center; 670 align-items: center;
727 justify-content: space-between; 671 justify-content: space-between;
728 } 672 }
729 } 673 }
730 .D4_esvalue view { 674 .D4_esvalue view {
731 font-size: 14px; 675 font-size: 14px;
732 color: #333333; 676 color: #333333;
733 font-weight: bold; 677 font-weight: bold;
734 } 678 }
735 .D4_list { 679 .D4_list {
736 display: grid; 680 display: grid;
737 grid-row-gap: 10px; 681 grid-row-gap: 10px;
738 grid-column-gap: 4px; 682 grid-column-gap: 4px;
739 } 683 }
740 .D4_list view { 684 .D4_list view {
741 display: flex; 685 display: flex;
742 justify-content: center; 686 justify-content: center;
743 align-items: center; 687 align-items: center;
744 font-size: 12px; 688 font-size: 12px;
745 width: 118px; 689 width: 118px;
746 height: 24px; 690 height: 24px;
747 border-radius: 2px; 691 border-radius: 2px;
748 background: #f2f2f2; 692 background: #f2f2f2;
749 color: #666666; 693 color: #666666;
750 // letter-spacing: 1px; 694 // letter-spacing: 1px;
751 } 695 }
752 } 696 }
753 .D5 { 697 .D5 {
754 .D5_fixed1 { 698 .D5_fixed1 {
755 display: flex; 699 display: flex;
756 justify-content: space-between; 700 justify-content: space-between;
757 align-content: center; 701 align-content: center;
758 margin-bottom: 12px; 702 margin-bottom: 12px;
759 view { 703 view {
760 font-size: 14px; 704 font-size: 14px;
761 color: #333333; 705 color: #333333;
762 font-weight: bold; 706 font-weight: bold;
763 font-family: "PingFangSC-Medium"; 707 font-family: "PingFangSC-Medium";
764 line-height: 24px; 708 line-height: 24px;
765 } 709 }
766 image { 710 image {
767 width: 240rpx; 711 width: 240rpx;
768 height: 3px; 712 height: 3px;
769 margin-top: 10px; 713 margin-top: 10px;
770 } 714 }
771 } 715 }
772 .D5_all { 716 .D5_all {
773 width: 100%; 717 width: 100%;
774 margin-top: 30rpx; 718 margin-top: 30rpx;
775 margin-right: 30rpx; 719 margin-right: 30rpx;
776 margin-bottom: 180rpx; 720 margin-bottom: 180rpx;
777 font-family: "PingFangSC-Regular"; 721 font-family: "PingFangSC-Regular";
778 // border: #999999 solid 1.5px; 722 // border: #999999 solid 1.5px;
779 } 723 }
780 } 724 }
781 .D6 { 725 .D6 {
782 width: 100%; 726 width: 100%;
783 height: 430px; 727 height: 430px;
784 background: #f9f6ed; 728 background: #f9f6ed;
785 margin-bottom: 74px; 729 margin-bottom: 74px;
786 view { 730 view {
787 text-align: center; 731 text-align: center;
788 } 732 }
789 .D6_v1 { 733 .D6_v1 {
790 font-weight: bold; 734 font-weight: bold;
791 } 735 }
792 .D6_v2 { 736 .D6_v2 {
793 font-size: 14px; 737 font-size: 14px;
794 margin-bottom: 30px; 738 margin-bottom: 30px;
795 } 739 }
796 .D6_v5 { 740 .D6_v5 {
797 .D6_v5_s1 { 741 .D6_v5_s1 {
798 font-weight: bold; 742 font-weight: bold;
799 } 743 }
800 .D6_v5_s2 { 744 .D6_v5_s2 {
801 font-size: 14px; 745 font-size: 14px;
802 } 746 }
803 } 747 }
804 } 748 }
805 .botton { 749 .botton {
806 position: fixed; 750 position: fixed;
807 bottom: 0; 751 bottom: 0;
808 height: 74px; 752 height: 74px;
809 width: 100%; 753 width: 100%;
810 background: #ffffff; 754 background: #ffffff;
811 padding: 20px 20px 8px 20px; 755 padding: 20px 20px 8px 20px;
812 font-family: "PingFangSC-Regular"; 756 font-family: "PingFangSC-Regular";
813 box-sizing: border-box; 757 box-sizing: border-box;
814 display: flex; 758 display: flex;
815 justify-content: space-between; 759 justify-content: space-between;
816 align-content: center; 760 align-content: center;
817 .botton_1 { 761 .botton_1 {
818 width: 20%; 762 width: 20%;
819 height: 100%; 763 height: 100%;
820 text-align: center; 764 text-align: center;
821 color: #989898; 765 color: #989898;
822 .cart_icon { 766 .cart_icon {
823 position: relative; 767 position: relative;
824 image { 768 image {
825 } 769 }
826 text { 770 text {
827 position: absolute; 771 position: absolute;
828 color: white; 772 color: white;
829 font-size: 17px; 773 font-size: 17px;
830 background-color: red; 774 background-color: red;
831 min-height: 24px; 775 min-height: 24px;
832 min-width: 24px; 776 min-width: 24px;
833 line-height: 24px; 777 line-height: 24px;
834 right: -12%; 778 right: -12%;
835 top: -12px; 779 top: -12px;
836 text-align: center; 780 text-align: center;
837 border-radius: 24px; 781 border-radius: 24px;
838 padding: 2px; 782 padding: 2px;
839 } 783 }
840 } 784 }
841 } 785 }
842 image { 786 image {
843 width: 42%; 787 width: 42%;
844 height: 26px; 788 height: 26px;
845 } 789 }
846 .botton_image { 790 .botton_image {
847 font-size: 12px; 791 font-size: 12px;
848 text-align: center; 792 text-align: center;
849 } 793 }
850 .botton_2 { 794 .botton_2 {
851 width: 74%; 795 width: 74%;
852 height: 86%; 796 height: 86%;
853 display: grid; 797 display: grid;
854 grid-template-columns: 50% 50%; 798 grid-template-columns: 50% 50%;
855 } 799 }
856 .botton_input { 800 .botton_input {
857 display: inline-flex; 801 display: inline-flex;
858 align-items: center; 802 align-items: center;
859 justify-content: space-around; 803 justify-content: space-around;
860 background: #fff0ec; 804 background: #fff0ec;
861 font-size: 16px; 805 font-size: 16px;
862 color: #ff6b4a; 806 color: #ff6b4a;
863 border-radius: 20px 0 0 20px; 807 border-radius: 20px 0 0 20px;
864 } 808 }
865 .botton_now { 809 .botton_now {
866 display: inline-flex; 810 display: inline-flex;
867 align-items: center; 811 align-items: center;
868 justify-content: space-around; 812 justify-content: space-around;
869 background: #ff6b4a; 813 background: #ff6b4a;
870 font-size: 16px; 814 font-size: 16px;
871 color: #ffffff; 815 color: #ffffff;
872 border-radius: 0 20px 20px 0; 816 border-radius: 0 20px 20px 0;
873 } 817 }
874 } 818 }
875 /* 隐藏滚动条 */ 819 /* 隐藏滚动条 */
876 ::-webkit-scrollbar { 820 ::-webkit-scrollbar {
877 width: 0; 821 width: 0;
878 height: 0; 822 height: 0;
879 color: transparent; 823 color: transparent;
880 } 824 }
881 </style> 825 </style>
882 826
src/pages/index/index.vue
Diff comments   View file @6cba581
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="content skeleton" v-show="showContent"> 3 <view class="content skeleton" v-show="showContent">
4 <view class="header"> 4 <view class="header">
5 <!-- 搜索--> 5 <!-- 搜索-->
6 <view class="searchBar skeleton-rect"> 6 <view class="searchBar skeleton-rect">
7 <icon 7 <icon
8 class="searchIcon" 8 class="searchIcon"
9 type="search" 9 type="search"
10 size="14" 10 size="14"
11 ></icon> 11 ></icon>
12 <input 12 <input
13 v-model="searchText" 13 v-model="searchText"
14 class="searchIpt" 14 class="searchIpt"
15 placeholder="老花镜" 15 placeholder="老花镜"
16 confirm-type="search" 16 confirm-type="search"
17 @blur="searchKey" 17 @blur="searchKey"
18 /> 18 />
19 </view> 19 </view>
20 20
21 <!-- 筛选栏--> 21 <!-- 筛选栏-->
22 <!-- <view class="screenBar"> 22 <!-- <view class="screenBar">
23 <view 23 <view
24 v-for="item in screenItems" 24 v-for="item in screenItems"
25 :key="item.current" 25 :key="item.current"
26 @click="onClickItem(item.current)" 26 @click="onClickItem(item.current)"
27 > 27 >
28 <view 28 <view
29 class="screenItem" 29 class="screenItem"
30 v-bind:class="{ active: current === item.current }" 30 v-bind:class="{ active: current === item.current }"
31 v-if="item.current === 2" 31 v-if="item.current === 2"
32 @click="dropDown" 32 @click="dropDown"
33 > 33 >
34 {{ item.text }} 34 {{ item.text }}
35 <icon 35 <icon
36 type="info" 36 type="info"
37 size="14" 37 size="14"
38 ></icon> 38 ></icon>
39 </view> 39 </view>
40 <view 40 <view
41 class="screenItem" 41 class="screenItem"
42 v-bind:class="{ active: current === item.current }" 42 v-bind:class="{ active: current === item.current }"
43 v-if="item.current === 4" 43 v-if="item.current === 4"
44 @click="showDrawer('showRight')" 44 @click="showDrawer('showRight')"
45 > 45 >
46 {{ item.text }} 46 {{ item.text }}
47 <icon 47 <icon
48 type="info" 48 type="info"
49 size="14" 49 size="14"
50 ></icon> 50 ></icon>
51 </view> 51 </view>
52 <view v-if="item.current !== 2&&item.current!==4"> 52 <view v-if="item.current !== 2&&item.current!==4">
53 <view 53 <view
54 class="screenItem" 54 class="screenItem"
55 v-bind:class="{ active: current === item.current }" 55 v-bind:class="{ active: current === item.current }"
56 >{{ item.text }}</view> 56 >{{ item.text }}</view>
57 </view> 57 </view>
58 </view> 58 </view>
59 </view> --> 59 </view> -->
60 </view> 60 </view>
61 <Uni-drawer 61 <Uni-drawer
62 ref="showRight" 62 ref="showRight"
63 mask="true" 63 mask="true"
64 maskClick="true" 64 maskClick="true"
65 mode="right" 65 mode="right"
66 :width="320" 66 :width="320"
67 @change="change($event,'showRight')" 67 @change="change($event,'showRight')"
68 > 68 >
69 <view class="close"> 69 <view class="close">
70 <view @click="closeDrawer('showRight')"> 70 <view @click="closeDrawer('showRight')">
71 <text class="word-btn-white">关闭</text> 71 <text class="word-btn-white">关闭</text>
72 </view> 72 </view>
73 </view> 73 </view>
74 </Uni-drawer> 74 </Uni-drawer>
75 75
76 <!-- 筛选菜单--> 76 <!-- 筛选菜单-->
77 <view class="content-wrap skeleton-rect"> 77 <view class="content-wrap skeleton-rect">
78 <view> 78 <view>
79 <HMfilterDropdown 79 <HMfilterDropdown
80 :filterData="categoryList" 80 :filterData="categoryList"
81 :defaultSelected="filterDropdownValue" 81 :defaultSelected="filterDropdownValue"
82 :updateMenuName="true" 82 :updateMenuName="true"
83 @search="search" 83 @search="search"
84 @getList="getList" 84 @getList="getList"
85 data-format="Object" 85 data-format="Object"
86 ></HMfilterDropdown> 86 ></HMfilterDropdown>
87 <!-- 商品列表 --> 87 <!-- 商品列表 -->
88 <!-- <scroll-view 88 <!-- <scroll-view
89 enable-flex 89 enable-flex
90 @scrolltolower="handleScrolltolower" 90 @scrolltolower="handleScrolltolower"
91 scroll-y 91 scroll-y
92 style="height: 1000px;margin-bottom: 20px;" 92 style="height: 1000px;margin-bottom: 20px;"
93 > --> 93 > -->
94 <view class="goods-list"> 94 <view class="goods-list">
95 <view class="product-list"> 95 <view class="product-list">
96 <view 96 <view
97 class="product skeleton-rect" 97 class="product skeleton-rect"
98 v-for="(goods) in goodsList" 98 v-for="(goods) in goodsList"
99 :key="goods.id" 99 :key="goods.id"
100 > 100 >
101 <Card 101 <Card
102 :goods="goods" 102 :goods="goods"
103 :scrollTop="scrollTop" 103 :scrollTop="scrollTop"
104 :viewHeight="viewHeight" 104 :viewHeight="viewHeight"
105 ></Card> 105 ></Card>
106 </view> 106 </view>
107 </view> 107 </view>
108 <view class="loading-text"> 108 <view class="loading-text">
109 <text>{{loadedText}}</text> 109 <text v-if="isLoading==true">{{loadingText}}</text>
110 <!-- <text v-else>{{loadedText}}</text> --> 110 <text v-else>{{loadedText}}</text>
111 </view> 111 </view>
112 </view> 112 </view>
113 <!-- </scroll-view> --> 113 <!-- </scroll-view> -->
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <!--引用组件--> 117 <!--引用组件-->
118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton> 118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
119 </view> 119 </view>
120 </template> 120 </template>
121 121
122 <script> 122 <script>
123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
124 import Card from "@/components/CommodityCard/CommodityCard.vue"; 124 import Card from "@/components/CommodityCard/CommodityCard.vue";
125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue"; 126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
127 import store from "@/store"; 127 import store from "@/store";
128 128
129 129
130 export default { 130 export default {
131 components: { 131 components: {
132 UniDrawer: UniDrawer, 132 UniDrawer: UniDrawer,
133 HMfilterDropdown: HMfilterDropdown, 133 HMfilterDropdown: HMfilterDropdown,
134 Card: Card, 134 Card: Card,
135 skeleton: skeleton 135 skeleton: skeleton
136 }, 136 },
137 data() { 137 data() {
138 return { 138 return {
139 indexArr: "", 139 indexArr: "",
140 valueArr: "", 140 valueArr: "",
141 isLoading: true, //初始化加载状态 141 isLoading: true, //初始化加载状态
142 loadingText: "data loading...", 142 loadingText: "data loading...",
143 loadedText: "~~到底啦~~", 143 loadedText: "~~暂无更多数据~~",
144 filterDropdownValue: [], 144 filterDropdownValue: [],
145 filterData: [], 145 filterData: [],
146 searchText: "", 146 searchText: "",
147 scrollTop: 0, 147 scrollTop: 0,
148 showContent: true, 148 showContent: true,
149 viewHeight: uni.getSystemInfoSync().windowHeight, 149 viewHeight: uni.getSystemInfoSync().windowHeight,
150 showSkeleton: false //骨架屏显示隐藏 150 showSkeleton: false //骨架屏显示隐藏
151 }; 151 };
152 }, 152 },
153 onPageScroll({ scrollTop }) { 153 onPageScroll({ scrollTop }) {
154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
155 this.scrollTop = scrollTop; 155 this.scrollTop = scrollTop;
156 }, 156 },
157 computed: { 157 computed: {
158 goodsList() { 158 goodsList() {
159 // 也可以从 getters 获取 159 // 也可以从 getters 获取
160 // console.log('index-list=====>',this.$store.state.index.list) 160 // console.log('index-list=====>',this.$store.state.index.list)
161 return this.$store.state.index.list; 161 let list = this.$store.state.index.list;
162 if(list.length == 0){
163 this.isLoading = false;
164 }
165 this.scrollTop = 0.1;
166 return list
162 }, 167 },
163 categoryList() { 168 categoryList() {
164 return this.$store.state.index.categoryList; 169 return this.$store.state.index.categoryList;
165 } 170 }
166 }, 171 },
167 filters: { 172 filters: {
168 outData(value) { 173 outData(value) {
169 return JSON.stringify(value); 174 return JSON.stringify(value);
170 } 175 }
171 }, 176 },
172 /** 177 /**
173 * 页面载入完成后调用子组件的方法生成预加载效果 178 * 页面载入完成后调用子组件的方法生成预加载效果
174 */ 179 */
175 onReady:function(){ 180 onReady:function(){
176 this.getInitData() 181 this.getInitData()
177 }, 182 },
178 methods: { 183 methods: {
179 async getInitData (){ 184 async getInitData (){
180 this.showSkeleton = true; 185 this.showSkeleton = true;
181 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")]) 186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
182 this.showSkeleton = false; 187 this.showSkeleton = false;
183 this.showContent = true 188 this.showContent = true
184 }, 189 },
185 showDrawer(e) { 190 showDrawer(e) {
186 this.$refs[e].open(); 191 this.$refs[e].open();
187 }, 192 },
188 getList() { 193 getList() {
189 store.dispatch("index/list"); 194 store.dispatch("index/list");
190 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。 195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
191 //把data里的isLoading 改为false就可以了 196 //把data里的isLoading 改为false就可以了
192 }, 197 },
193 // search(params) { 198 // search(params) {
194 // this.$store.index. 199 // this.$store.index.
195 // }, 200 // },
196 closeDrawer(e) { 201 closeDrawer(e) {
197 this.$refs[e].close(); 202 this.$refs[e].close();
198 }, 203 },
199 change(e, type) { 204 change(e, type) {
200 this[type] = e; 205 this[type] = e;
201 }, 206 },
202 onClickItem(e) { 207 onClickItem(e) {
203 if (this.current !== e) { 208 if (this.current !== e) {
204 this.current = e; 209 this.current = e;
205 } 210 }
206 }, 211 },
207 dropDown() { 212 dropDown() {
208 console.log("下拉"); 213 console.log("下拉");
209 }, 214 },
210 searchKey(e) { 215 searchKey(e) {
211 const { value: keyword } = e.detail; 216 const { value: keyword } = e.detail;
212 this.keyWords = keyword; 217 this.keyWords = keyword;
213 store.dispatch("index/search", { 218 store.dispatch("index/search", {
214 params: {}, 219 params: {},
215 keyword 220 keyword
216 }); 221 });
217 }, 222 },
218 // 接收菜单结果 223 // 接收菜单结果
219 search(e) { 224 search(e) {
220 const { on, value, selectedData } = e; 225 const { on, value, selectedData } = e;
221 let params = {}; 226 let params = {};
222 const selectedPayload = {}; 227 const selectedPayload = {};
223 for (const key in selectedData) { 228 for (const key in selectedData) {
224 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
225 selectedPayload[key] = selectedData[key].toString(); 230 selectedPayload[key] = selectedData[key].toString();
226 } 231 }
227 } 232 }
228 if (on[0] === 1) { 233 if (on[0] === 1) {
229 // 若点击全部 234 // 若点击全部
230 this.searchText = ""; 235 this.searchText = "";
231 store.dispatch("index/list"); 236 store.dispatch("index/list");
232 } else { 237 } else {
233 for (let i = 1; i <= on.length; i++) { 238 for (let i = 1; i <= on.length; i++) {
234 // on[0]是全部 239 // on[0]是全部
235 if (on[i] === 1) { 240 if (on[i] === 1) {
236 // 若该选项被选中 241 // 若该选项被选中
237 if (this.categoryList[i].value === "filter") { 242 if (this.categoryList[i].value === "filter") {
238 params = { 243 params = {
239 ...selectedPayload, 244 ...selectedPayload,
240 ...params 245 ...params
241 }; 246 };
242 } else { 247 } else {
243 params[`${this.categoryList[i].value}`] = value[i][0]; 248 params[`${this.categoryList[i].value}`] = value[i][0];
244 } 249 }
245 } 250 }
246 } 251 }
247 store.dispatch("index/search", { 252 store.dispatch("index/search", {
248 params, 253 params,
249 keyword: this.keyWords 254 keyword: this.keyWords
250 }); 255 });
251 } 256 }
252 } 257 }
253 } 258 }
254 }; 259 };
255 </script> 260 </script>
256 261
257 <style lang="scss"> 262 <style lang="scss">
258 .content,.container { 263 .content,.container {
259 display: flex; 264 display: flex;
260 flex-direction: column; 265 flex-direction: column;
261 align-items: center; 266 align-items: center;
262 justify-content: center; 267 justify-content: center;
263 background-color: #f7f6f6;
264 } 268 }
265 .header { 269 .header {
266 display: flex; 270 display: flex;
267 flex-direction: column; 271 flex-direction: column;
268 align-items: center; 272 align-items: center;
269 justify-content: center; 273 justify-content: center;
270 background-color: #f7f6f6; 274 background-color: #f7f6f6;
271 height: 178rpx; 275 height: 178rpx;
272 width: 100%; 276 width: 100%;
273 z-index: 999; 277 z-index: 999;
274 position: fixed; 278 position: fixed;
275 top: 0; 279 top: 0;
276 left: 0; 280 left: 0;
277 } 281 }
278 .searchBar { 282 .searchBar {
279 width: 670rpx; 283 width: 670rpx;
280 display: flex; 284 display: flex;
281 justify-content: center; 285 justify-content: center;
282 align-items: center; 286 align-items: center;
283 box-sizing: border-box; 287 box-sizing: border-box;
284 padding: 0rpx 16rpx; 288 padding: 0rpx 16rpx;
285 border: 1px solid #ff6b4a; 289 border: 1px solid #ff6b4a;
286 border-radius: 8rpx; 290 border-radius: 8rpx;
287 background-color: #ffffff; 291 background-color: #ffffff;
288 } 292 }
289 293
290 .searchIpt { 294 .searchIpt {
291 height: 68rpx; 295 height: 68rpx;
292 width: 670rpx; 296 width: 670rpx;
293 padding: 16rpx; 297 padding: 16rpx;
294 font-size: 28rpx; 298 font-size: 28rpx;
295 box-sizing: border-box; 299 box-sizing: border-box;
296 } 300 }
297 .screenBar { 301 .screenBar {
298 width: 670rpx; 302 width: 670rpx;
299 height: 110rpx; 303 height: 110rpx;
300 display: flex; 304 display: flex;
301 flex-direction: row; 305 flex-direction: row;
302 justify-content: space-between; 306 justify-content: space-between;
303 align-items: center; 307 align-items: center;
304 color: #333333; 308 color: #333333;
305 font-size: 32rpx; 309 font-size: 32rpx;
306 } 310 }
307 .active { 311 .active {
308 color: #ff6b4a; 312 color: #ff6b4a;
309 } 313 }
310 .screenItem { 314 .screenItem {
311 display: flex; 315 display: flex;
312 justify-content: center; 316 justify-content: center;
313 align-items: center; 317 align-items: center;
314 } 318 }
315 .content-wrap { 319 .content-wrap {
316 width: 100%; 320 width: 100%;
317 background-color: #ffffff; 321 background-color: #ffffff;
318 } 322 }
319 323
320 .HMfilterDropdown { 324 .HMfilterDropdown {
321 top: 178rpx !important; 325 top: 178rpx !important;
322 } 326 }
323 327
324 .goods-list { 328 .goods-list {
325 padding-top: 286rpx; 329 padding-top: 286rpx;
326 .loading-text { 330 .loading-text {
327 width: 100%; 331 width: 100%;
328 display: flex; 332 display: flex;
329 justify-content: center; 333 justify-content: center;
330 align-items: center; 334 align-items: center;
331 height: 30px; 335 height: 30px;
332 color: #979797; 336 color: #979797;
333 font-size: 12px; 337 font-size: 12px;
334 } 338 }
335 .product-list { 339 .product-list {
336 width: 92%; 340 width: 92%;
337 padding: 0 4% 3vw 4%; 341 padding: 0 4% 3vw 4%;
338 display: flex; 342 display: flex;
339 justify-content: space-between; 343 justify-content: space-between;
340 flex-wrap: wrap; 344 flex-wrap: wrap;
341 .product { 345 .product {
342 width: 48%; 346 width: 48%;
343 min-height: 120rpx; 347 min-height: 120rpx;
344 margin: 0 0 20rpx 0; 348 margin: 0 0 20rpx 0;
345 background: #ffffff; 349 background: #ffffff;
346 border: 1px solid #f2f2f2; 350 border: 1px solid #f2f2f2;
347 } 351 }
348 } 352 }
349 } 353 }
350 </style> 354 </style>
src/static/img/detail/share-icon.png
Diff comments   View file @6cba581

1.54 KB
src/store/modules/details.js
Diff comments   View file @6cba581
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 // 轮播图
10 carousel: [
11 '/static/img/detail/d9.png',
12 ],
13 // 商品基本信息
14 goodsInfo: {
15 name: '暂无名称',
16 price: '暂无价格',
17 discountPrice: undefined,
18 tradeNumber: undefined,
19 },
20 }
21
22 const mutations = {
23 INIT: (state, { carousel, goodsInfo }) => {
24 state.carousel = carousel
25 state.goodsInfo = goodsInfo
26 },
27 }
28
29 const actions = {
30 details({ commit }, param) {
31 return new Promise((resolve, reject) => request({
32 url: read,
33 data: param,
34 success: ({ data: { data } }) => {
35 commit('INIT', {
36 carousel: data.pics,
37 goodsInfo: {
38 name: data.p_name,
39 price: data.priceArea.Min_Price,
40 discountPrice: data.priceArea.Min_Price - Number(data.priceArea.discount),
41 tradeNumber: data.trade_num,
42 },
43 })
44 resolve(data)
45 },
46 fail: (res) => {
47 console.log('fail status ===>', res)
48 },
49 }))
50 },
51 }
52
53 export default {
54 namespaced: true,
55 state,
56 mutations,
57 actions,
58 }
59
src/store/modules/index.js
Diff comments   View file @6cba581
1 import urlAlias from '../url'; 1 import urlAlias from '../url';
2 import request from '../request'; 2 import request from '../request';
3 3
4 const { 4 const {
5 category, 5 category,
6 shopList, 6 shopList,
7 search, 7 search,
8 } = urlAlias; 8 } = urlAlias;
9 9
10 let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"", 10 let initData = {"name":"志平防蓝光-防辐射电脑网课眼镜","id":"9","imgurl":"",
11 "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83", 11 "price":0,"trade_num":"102","rsSon":{"pic":"9_FDB33D.jpg","model_pic":null,"in_price":"6000","sku_value":"80_83",
12 "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}} 12 "discount":"45","kc":"0","sku_name":"1.56非球面防蓝光_黑透+蓝纹","Max_Price":158,"Min_Price":99}}
13 var initArr = [1,2,3,4,5,6,7,8] 13 var initArr = [1,2,3,4,5,6,7,8]
14 let list = [] 14 let list = []
15 initArr.forEach(function (value) { 15 initArr.forEach(function (value) {
16 list.push(initData) 16 list.push(initData)
17 }); 17 });
18 18
19 let categoryList = [
20 {
21 "type": "checkbox",
22 "name": "产品",
23 "value": "category",
24 "submenu": [
25 {
26 "label": "镜框",
27 "name": "镜框",
28 "value": "1"
29 },
30 {
31 "label": "镜片",
32 "name": "镜片",
33 "value": "2"
34 },
35 {
36 "label": "特种镜",
37 "name": "特种镜",
38 "value": "146"
39 }
40 ],
41 "groups": [
42 "001"
43 ]
44 },
45 {
46 "type": "radio",
47 "name": "规则",
48 "value": "px",
49 "submenu": [
50 {
51 "name": "按价格排",
52 "value": "1"
53 },
54 {
55 "name": "按销量排",
56 "value": "2"
57 }
58 ],
59 "groups": [
60 "002"
61 ]
62 },
63 {
64 "type": "radio",
65 "name": "排序",
66 "value": "sort",
67 "submenu": [
68 {
69 "name": "从高到低",
70 "value": "1"
71 },
72 {
73 "name": "从低到高",
74 "value": "2"
75 }
76 ],
77 "groups": [
78 "003"
79 ]
80 },
81 {
82 "type": "filter",
83 "name": "筛选",
84 "value": "filter",
85 "submenu": [
86 {
87 "type": "checkbox",
88 "name": "性别",
89 "value": "sex",
90 "submenu": [
91 {
92 "label": "男性",
93 "name": "男性",
94 "value": "27"
95 },
96 {
97 "label": "女性",
98 "name": "女性",
99 "value": "28"
100 }
101 ]
102 },
103 {
104 "type": "checkbox",
105 "name": "年龄",
106 "value": "age",
107 "submenu": [
108 {
109 "label": "通用",
110 "name": "通用",
111 "value": "24"
112 }
113 ]
114 },
115 {
116 "type": "checkbox",
117 "name": "适用场景",
118 "value": "sense",
119 "submenu": [
120 {
121 "label": "行政风",
122 "name": "行政风",
123 "value": "53"
124 },
125 {
126 "label": "青春学子风",
127 "name": "青春学子风",
128 "value": "54"
129 },
130 {
131 "label": "运动风",
132 "name": "运动风",
133 "value": "55"
134 },
135 {
136 "label": "简约-极简文艺范",
137 "name": "简约-极简文艺范",
138 "value": "56"
139 },
140 {
141 "label": "奶奶风",
142 "name": "奶奶风",
143 "value": "57"
144 },
145 {
146 "label": "流线洛可可",
147 "name": "流线洛可可",
148 "value": "58"
149 },
150 {
151 "label": "自然舒视角",
152 "name": "自然舒视角",
153 "value": "59"
154 },
155 {
156 "label": "无界人文系",
157 "name": "无界人文系",
158 "value": "60"
159 },
160 {
161 "label": "有机未来时",
162 "name": "有机未来时",
163 "value": "61"
164 },
165 {
166 "label": "立体巴洛克",
167 "name": "立体巴洛克",
168 "value": "62"
169 },
170 {
171 "label": "多元新风尚",
172 "name": "多元新风尚",
173 "value": "63"
174 },
175 {
176 "label": "理性几何派",
177 "name": "理性几何派",
178 "value": "64"
179 },
180 {
181 "label": "轻简北欧风",
182 "name": "轻简北欧风",
183 "value": "65"
184 },
185 {
186 "label": "质感哥特潮",
187 "name": "质感哥特潮",
188 "value": "66"
189 },
190 {
191 "label": "时尚",
192 "name": "时尚",
193 "value": "67"
194 },
195 {
196 "label": "复古",
197 "name": "复古",
198 "value": "68"
199 },
200 {
201 "label": "商务",
202 "name": "商务",
203 "value": "69"
204 },
205 {
206 "label": "休闲",
207 "name": "休闲",
208 "value": "70"
209 },
210 {
211 "label": "折射率",
212 "name": "折射率",
213 "value": "285"
214 }
215 ]
216 },
217 {
218 "type": "checkbox",
219 "name": "价格",
220 "value": "price",
221 "submenu": [
222 {
223 "name": "100以下",
224 "value": "1,100"
225 },
226 {
227 "name": "100-300",
228 "value": "100,300"
229 },
230 {
231 "name": "300-1000",
232 "value": "300,1000"
233 },
234 {
235 "name": "1000以上",
236 "value": "1000,-1"
237 }
238 ]
239 },
240 {
241 "type": "checkbox",
242 "name": "材质",
243 "value": "glasscate",
244 "submenu": [
245 {
246 "label": "购易",
247 "name": "购易",
248 "value": "72"
249 },
250 {
251 "label": "海俪恩",
252 "name": "海俪恩",
253 "value": "73"
254 },
255 {
256 "label": "沙漠风暴",
257 "name": "沙漠风暴",
258 "value": "74"
259 },
260 {
261 "label": "古诗",
262 "name": "古诗",
263 "value": "75"
264 },
265 {
266 "label": "暴龙",
267 "name": "暴龙",
268 "value": "76"
269 },
270 {
271 "label": "犀牛",
272 "name": "犀牛",
273 "value": "77"
274 },
275 {
276 "label": "Ray-Ban雷朋",
277 "name": "Ray-Ban雷朋",
278 "value": "78"
279 },
280 {
281 "label": "PARIM派丽蒙",
282 "name": "PARIM派丽蒙",
283 "value": "79"
284 },
285 {
286 "label": "石狼",
287 "name": "石狼",
288 "value": "80"
289 },
290 {
291 "label": "木九十",
292 "name": "木九十",
293 "value": "81"
294 }
295 ]
296 },
297 {
298 "type": "checkbox",
299 "name": "品牌",
300 "value": "brand",
301 "submenu": [
302 {
303 "label": "购易",
304 "name": "购易",
305 "value": "72"
306 },
307 {
308 "label": "海俪恩",
309 "name": "海俪恩",
310 "value": "73"
311 },
312 {
313 "label": "沙漠风暴",
314 "name": "沙漠风暴",
315 "value": "74"
316 },
317 {
318 "label": "古诗",
319 "name": "古诗",
320 "value": "75"
321 },
322 {
323 "label": "暴龙",
324 "name": "暴龙",
325 "value": "76"
326 },
327 {
328 "label": "犀牛",
329 "name": "犀牛",
330 "value": "77"
331 },
332 {
333 "label": "Ray-Ban雷朋",
334 "name": "Ray-Ban雷朋",
335 "value": "78"
336 },
337 {
338 "label": "PARIM派丽蒙",
339 "name": "PARIM派丽蒙",
340 "value": "79"
341 },
342 {
343 "label": "石狼",
344 "name": "石狼",
345 "value": "80"
346 },
347 {
348 "label": "木九十",
349 "name": "木九十",
350 "value": "81"
351 }
352 ]
353 }
354 ],
355 "groups": [
356 "001",
357 "002",
358 "003"
359 ],
360 }
361 ]
362
19 //初始化数据是为了显示默认骨架 363 //初始化数据是为了显示默认骨架
20 const state = { 364 const state = {
21 categoryList: [], 365 categoryList: [],
22 list: list 366 list: list
23 }; 367 };
24 368
25 const mutations = { 369 const mutations = {
26 LIST: (state, list) => { 370 LIST: (state, list) => {
27 state.list = list; 371 state.list = list;
28 }, 372 },
29 CATEGORY: (state, categoryList) => { 373 CATEGORY: (state, categoryList) => {
30 state.categoryList = categoryList; 374 state.categoryList = categoryList;
31 } 375 }
32 }; 376 };
33 377
34 const actions = { 378 const actions = {
35 category({ 379 category({
36 commit 380 commit
37 }, param) { 381 }, param) {
38 return new Promise((resolve) => request({ 382 return new Promise((resolve) => request({
39 url: category, 383 url: category,
40 success: (res) => { 384 success: (res) => {
41 let data = res.data.data; 385 let data = res.data.data;
42 for (let i = 0; i <= data.length; i++) { 386 for (let i = 0; i <= data.length; i++) {
43 if (data[i] && data[i].type !== 'filter') { 387 if (data[i] && data[i].type !== 'filter') {
44 data[i].type = 'hierarchy'; 388 data[i].type = 'hierarchy';
45 } 389 }
46 } 390 }
47 data.unshift({ 391 data.unshift({
48 type: "hierarchy", 392 type: "hierarchy",
49 name: "全部", 393 name: "全部",
50 value: "all", 394 value: "all",
51 isNoPull: true, 395 isNoPull: true,
52 }); 396 });
53 commit('CATEGORY', data); 397 commit('CATEGORY', data);
54 resolve(data) 398 resolve(data)
55 console.log('3333')
56 }, 399 },
57 fail: (res) => { 400 fail: (res) => {
58 console.log("fail status === > ", res); 401 console.log("fail status === > ", res);
59 } 402 }
60 })) 403 }))
61 404
62 }, 405 },
63 list({ 406 list({
64 commit 407 commit
65 }, param) { 408 }, param) {
66 return new Promise((resolve) => request({ 409 return new Promise((resolve) => request({
67 url: shopList, 410 url: shopList,
68 success: (res) => { 411 success: (res) => {
69 commit('LIST', res.data.data) 412 commit('LIST', res.data.data)
70 resolve(res.data) 413 resolve(res.data)
71 console.log('3333')
72 }, 414 },
73 fail: (res) => { 415 fail: (res) => {
74 console.log("fail status === > ", res); 416 console.log("fail status === > ", res);
75 }, 417 },
76 complete: (res) => { 418 complete: (res) => {
77 state.isLoading = false; 419 state.isLoading = false;
78 }, 420 },
79 })) 421 }))
80 }, 422 },
81 search({ 423 search({
82 commit 424 commit
83 }, { 425 }, {
84 params, 426 params,
85 keyword 427 keyword
86 }) { 428 }) {
87 const uid = uni.getStorageSync('uid'); 429 const uid = uni.getStorageSync('uid');
88 return new Promise((resolve) => request({ 430 return new Promise((resolve) => request({
89 url: search, 431 url: search,
90 data: { 432 data: {
91 params: JSON.stringify(params), 433 params: JSON.stringify(params),
92 uid, 434 uid,
93 way: 1, 435 way: 1,
94 keyword, 436 keyword,
95 }, 437 },
96 success: (res) => { 438 success: (res) => {
97 commit('LIST', res.data.data); 439 commit('LIST', res.data.data);
98 resolve(res.data) 440 resolve(res.data)
99 }, 441 },
100 fail: (res) => { 442 fail: (res) => {
101 console.log("fail status === > ", res); 443 console.log("fail status === > ", res);
102 } 444 }
103 })) 445 }))
104 446
105 }, 447 },
106 }; 448 };
107 449
108 export default { 450 export default {
109 namespaced: true, 451 namespaced: true,
110 state, 452 state,
111 mutations, 453 mutations,
src/store/modules/read.js
Diff comments   View file @6cba581
1 import urlAlias from '../url' 1 import urlAlias from '../url'
2 import request from '../request' 2 import request from '../request'
3 3
4 const { 4 const {
5 read 5 read,
6 } = urlAlias 6 } = urlAlias
7 7
8 const state = { 8 const state = {
9 goodInfo: {} 9 goodInfo: {},
10 } 10 }
11 11
12 const mutations = { 12 const mutations = {
13 INIT: (state, goodInfo) => { 13 INIT: (state, goodInfo) => {
14 state.goodInfo = goodInfo 14 state.goodInfo = goodInfo
15 } 15 },
16 } 16 }
17 17
18 const actions = { 18 const actions = {
19 fetch({ commit }, param) { 19 fetch({ commit }, param) {
20 // 由于购物车和用户推荐的价格要根据sk_id来获取 20 // 由于购物车和用户推荐的价格要根据sk_id来获取
21 const arg=Object.assign({},param) 21 const arg = Object.assign({}, param)
22 delete param.sk_id 22 delete param.sk_id
23 return new Promise((resolve, reject) => request({ 23 return new Promise((resolve, reject) => request({
24 url: read, 24 url: read,
25 data: param, 25 data: param,
26 success: (res) => { 26 success: (res) => {
27 console.log('readParm====>',arg) 27 console.log('readParm====>', arg)
28 console.log('read====>',res.data.data) 28 console.log('read====>', res.data.data)
29 // 用一个新的对象来接收sk_id找的值 29 // 用一个新的对象来接收sk_id找的值
30 const Res=Object.assign({},res.data.data) 30 const Res = Object.assign({}, res.data.data)
31 if(arg.sk_id!=undefined){ 31 if (arg.sk_id !== undefined) {
32 for (let i = 0; i < res.data.data.skuList.length; i++) { 32 for (let i = 0; i < res.data.data.skuList.length; i++) {
33 if(res.data.data.skuList[i].sk_id==arg.sk_id){ 33 if (res.data.data.skuList[i].sk_id === arg.sk_id) {
34 Res.p_sale_price= res.data.data.skuList[i].real_price 34 Res.p_sale_price = res.data.data.skuList[i].real_price
35 console.log('陈工了') 35 console.log('陈工了')
36 } 36 }
37 } 37 }
38 } 38 }
39 console.log(Res)
40 commit('INIT', Res) 39 commit('INIT', Res)
41 resolve() 40 resolve(res.data)
42 }, 41 },
43 fail: (res) => { 42 fail: (res) => {
44 console.log('fail status === > ', res) 43 console.log('fail status === > ', res)
45 }, 44 },
46 complete: (res) => { 45 complete: (res) => {
47 console.log('complete status === > ', res) 46 console.log('complete status === > ', res)
48 } 47 },
49 })) 48 }))
50 } 49 },
51 } 50 }
52 51
53 export default { 52 export default {
54 namespaced: true, 53 namespaced: true,
55 state, 54 state,
56 mutations, 55 mutations,
57 actions 56 actions,
58 } 57 }
59 58