Adam / gulu-vue

Browse Code »

Commit 5214ca9be215597227be072a6f3d1bc6d5548f5d

Authored by 喻鹏 5 years ago

2 parents cc196c33cc c300654f9c

Exists in master

Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue

Showing 9 changed files Show diff stats

src/App.vue

Diff comments View file @5214ca9

1	<script>	1	<script>
2	import Vue from 'vue';	2	import Vue from 'vue';
3	import store from '@/store';	3	import store from '@/store';
4		4
5	export default Vue.extend({	5	export default Vue.extend({
6	mpType: 'app',	6	mpType: 'app',
7	onLaunch(options) {	7	onLaunch(options) {
8	const option = options \|\| {};	8	const option = options \|\| {};
9	// 获取用户来源	9	// 获取用户来源
10	console.log('软件启动，输出转来的参数:', option);	10	// console.log('软件启动，输出转来的参数:', option);
11	console.log('场景值------------------:', option.scene);	11	// console.log('场景值------------------:', option.scene);
12	let loginQueryInfo = option ? option.query : {};	12	let loginQueryInfo = option ? option.query : {};
13	loginQueryInfo = loginQueryInfo \|\| {};	13	loginQueryInfo = loginQueryInfo \|\| {};
14	console.log('loginQueryInfo onShow===>', loginQueryInfo);	14	// console.log('loginQueryInfo onShow===>', loginQueryInfo);
15	const scene = decodeURIComponent(loginQueryInfo.scene);	15	const scene = decodeURIComponent(loginQueryInfo.scene);
16	console.log('decodeURIComponent scense====>', scene);	16	// console.log('decodeURIComponent scense====>', scene);
17	let fromInfo = {};	17	let fromInfo = {};
18		18
19	if(scene.length > 0 ) {	19	if(scene.length > 0 ) {
20	const getQueryString = {	20	const getQueryString = {
21	uid: undefined,	21	uid: undefined,
22	sid: undefined,	22	sid: undefined,
23	pid: undefined	23	pid: undefined
24	};	24	};
25	const strB = scene.split('&');	25	const strB = scene.split('&');
26		26
27	for(let i = 0; i < strB.length; i += 1) {	27	for(let i = 0; i < strB.length; i += 1) {
28	getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]);	28	getQueryString[strB[i].split('=')[0]] = unescape(strB[i].split('=')[1]);
29	}	29	}
30	fromInfo = {	30	fromInfo = {
31	loginQueryInfo,	31	loginQueryInfo,
32	fromuid: getQueryString.uid,	32	fromuid: getQueryString.uid,
33	fromsid: getQueryString.sid,	33	fromsid: getQueryString.sid,
34	frompid: getQueryString.pid,	34	frompid: getQueryString.pid,
35	scene: option.scene,	35	scene: option.scene,
36	}	36	}
37	store.dispatch('user/setFrom', fromInfo);	37	store.dispatch('user/setFrom', fromInfo);
38	console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString);	38	// console.log('loginQueryInfo.hasOwnProperty=====111===>', getQueryString);
39	} else {	39	} else {
40	console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo);	40	// console.log('loginQueryInfo.hasOwnProperty====22222====>', loginQueryInfo);
41	if (loginQueryInfo.hasOwnProperty('sid') == false) {	41	if (loginQueryInfo.hasOwnProperty('sid') == false) {
42	loginQueryInfo.sid = 0;	42	loginQueryInfo.sid = 0;
43	}	43	}
44	if (loginQueryInfo.hasOwnProperty('pid') == false) {	44	if (loginQueryInfo.hasOwnProperty('pid') == false) {
45	loginQueryInfo.pid = 0;	45	loginQueryInfo.pid = 0;
46	}	46	}
47	if (loginQueryInfo.hasOwnProperty('uid') == false) {	47	if (loginQueryInfo.hasOwnProperty('uid') == false) {
48	loginQueryInfo.uid = 0;	48	loginQueryInfo.uid = 0;
49	}	49	}
50	fromInfo = {	50	fromInfo = {
51	loginQueryInfo,	51	loginQueryInfo,
52	fromuid: loginQueryInfo.uid,	52	fromuid: loginQueryInfo.uid,
53	fromsid: loginQueryInfo.sid,	53	fromsid: loginQueryInfo.sid,
54	frompid: loginQueryInfo.pid,	54	frompid: loginQueryInfo.pid,
55	scene: option.scene,	55	scene: option.scene,
56	}	56	}
57	store.dispatch('user/setFrom', fromInfo)	57	store.dispatch('user/setFrom', fromInfo)
58	}	58	}
59		59
60	// 登陆	60	// 登陆
61	const openId = uni.getStorageSync('openid') \|\| "";	61	const openId = uni.getStorageSync('openid') \|\| "";
62	if(openId.length <= 10) {	62	if(openId.length <= 10) {
63	uni.clearStorageSync()	63	uni.clearStorageSync()
64	store.dispatch("user/login", fromInfo);	64	store.dispatch("user/login", fromInfo);
65	} else {	65	} else {
66	store.dispatch("user/getUserInfo", fromInfo);	66	store.dispatch("user/getUserInfo", fromInfo);
67	}	67	}
68	},	68	},
69	onShow() {	69	onShow() {
70		70	// console.log('App Show')
71	console.log('App Show')
72	},	71	},
73	onHide() {	72	onHide() {
74	console.log('App Hide')	73	// console.log('App Hide')
75	},	74	},
76	methods: {	75	methods: {
77	}	76	}
78	});	77	});
79	</script>	78	</script>
80		79
81	<style>	80	<style>
82	/每个页面公共css /	81	/每个页面公共css /
83	</style>	82	</style>
84		83

src/components/HMFilterDropdown/HMFilterDropdown.vue

Diff comments View file @5214ca9

 <template>
 	<view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard">
 		<view class="nav">
 			<block v-for="(item,index) in menu" :key="index">
-				<view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
+				<view
+				 class="first-menu"
+				 :class="{'on':showPage==index || on[index] === 1}"
+				 @tap="togglePage(index)"
+				 v-if="!item.isNoPull"
+				>
+					<text class="name">{{item.name}}</text>
+					<text
+					 class="iconfont triangle"
+					 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
+					></text>
+				</view>
+				<view
+				 class="first-menu"
+				 :class="{'on':showPage==index || on[index] === 1}"
+				 @tap="showAll()"
+				 v-else
+				>
 					<text class="name">{{item.name}}</text>
-					<text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
 				</view>
 			</block>
 		</view>
 		<view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
 		<block v-for="(page,page_index) in subData" :key="page_index">
 			<view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
 				<block v-if="page.type=='hierarchy'&& page.submenu.length>0">
 					<scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
 					 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
 						<block v-for="(sub,index) in page.submenu" :key="index">
 							<view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
 								<view class="menu-name">
 									<text>{{sub.name}}</text>
 									<text class="iconfont selected"></text>
 								</view>
 							</view>
 						</block>
 					</scroll-view>
 					<block v-for="(sub,index) in page.submenu" :key="index">
 						<scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
 						 :scroll-into-view="'second_id'+secondScrollInto">
 							<block v-for="(sub_second,second_index) in sub.submenu" :key="second_index">
 								<view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
 									<view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
 										<text>{{sub_second.name}}</text>
 										<text class="iconfont selected"></text>
 									</view>
 									<view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0">
 										<block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index">
 											<text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
 											 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
 											<text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text
 												 class="iconfont triangle"></text></text>
 										</block>
 									</view>
 								</view>
 							</block>
 						</scroll-view>
 					</block>
 				</block>
 				<block v-if="page.type=='filter'||page.type=='checkbox'">
 					<view class="filter">
 						<scroll-view class="menu-box" :scroll-y="true">
 							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
 								<view class="title">{{box.name}}</view>
 								<view class="labels">
 									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
 									 :class="{'on':label.selected}">{{label.name}}</view>
 								</view>
 							</view>
 						</scroll-view>
 						<view class="btn-box">
 							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
 							<view class="submit" @tap="setFilterData(page_index)">确定</view>
 						</view>
 					</view>
 				</block>
 				<block v-if="page.type=='radio'">
 					<view class="filter">
 						<scroll-view class="menu-box" :scroll-y="true">
 							<view class="box" v-for="(box,box_index) in page.submenu" :key="box_index">
 								<view class="title">{{box.name}}</view>
 								<view class="labels">
 									<view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)"
 									 :class="{'on':label.selected}">{{label.name}}</view>
 								</view>
 							</view>
 						</scroll-view>
 						<view class="btn-box">
 							<view class="reset" @tap="resetFilterData(page_index)">重置</view>
 							<view class="submit" @tap="setFilterData(page_index)">确定</view>
 						</view>
 					</view>
 				</block>
 			</view>
 		</block>
 	</view>
 </template>
 <script>
 	export default {
 		data() {
 			return {
 				subData: [], //菜单数据
 				menu: [], //顶部横条数据
 				showPage: -1, //菜单页面显示/隐藏动画控制
 				pageState: [], //页面的状态
 				activeMenuArr: [], //UI状态
 				shadowActiveMenuArr: [], //记录选中
 				defaultActive:[],
 				triangleDeg: [], //小三角形的翻转动画控制
 				isShowMask: false, //遮罩层显示/隐藏动画控制
 				maskVisibility: false, //遮罩层显示/隐藏状态
 				//滚动区域定位
 				firstScrollInto: 0,
 				secondScrollInto: 0,
 				componentTop:0	,//组件top
-				isReadNewSelect:false
+				isReadNewSelect:false,
+				on: [1,0,0,0,0],
 			}
 		},
 		props: {
 			filterData: {
 				value: Array,
 				default: []
 			},
 			defaultSelected:{
 				value: Array,
 				default: []
 			},
 			updateMenuName:{
 				value: Boolean,
 				default: true
 			},
 			dataFormat:{
 				value: String,
 				default: 'Array'
 			}
 		},
 		watch: {
 			filterData: {
 				handler() {
 					this.initMenu(); //filterData重新赋值初始化菜单
 				},
 				immediate: true
 			},
 			defaultSelected(newVal) {
 				if(newVal.length==0){
 					return;
 				}
 				this.defaultActive = JSON.parse(JSON.stringify(newVal));
 				this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
 				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
-				if(this.updateMenuName){
+				// if(this.updateMenuName){
-					this.setMenuName();
+				// 	this.setMenuName();
-				}
+				// }
 			}
 		},
 		methods: {
 			initMenu() {
 				let tmpMenuActiveArr=[];
 				let tmpMenu=[];
 				for (let i = 0; i < this.filterData.length; i++) {
 					let tmpitem = this.filterData[i];
 					tmpMenu.push({
 						//如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
 						name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name),
-						type: tmpitem.type
+						type: tmpitem.type,
+						isNoPull: tmpitem.isNoPull,
 					});
-					//初始化选中项数组-ui状态
+					// 初始化选中项数组-ui状态
 					tmpMenuActiveArr.push(this.processActive(tmpitem));
-					//初始化角度数组
+					// 初始化角度数组
 					this.triangleDeg.push(0);
-					//初始化控制显示状态数组
+					// 初始化控制显示状态数组
 					this.pageState.push(false);
-					//递归处理子菜单数据
+					// 递归处理子菜单数据
 					tmpitem = this.processSubMenu(tmpitem);
 					this.filterData[i] = tmpitem;
 				}
 				this.menu = tmpMenu;
-				//初始化选中项数组
+				// 初始化选中项数组
 				tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
 				this.defaultActive = [];
 				this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
 				this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
-				//加载菜单数据
+				// 加载菜单数据
 				this.subData = this.filterData;
-				//设定顶部菜单名字
+				// 设定顶部菜单名字
-				if(this.updateMenuName){
+				// if(this.updateMenuName){
-					this.setMenuName();
+				// 	this.setMenuName();
-				}
+				// }
-			},
-			setMenuName(){
-				for(var i=0;i<this.activeMenuArr.length;i++){
-					let row = this.activeMenuArr[i];
-					if (typeof(row[0]) != 'object'){
-						var tmpsub = false;
-						if(row.length>0 && row[0]!=null){
-							tmpsub = this.subData[i].submenu[row[0]];
-							if(row.length>1 && row[1]!=null){
-								tmpsub = tmpsub.submenu[row[1]];
-								if(row.length>2 && row[2]!=null){
-									tmpsub = tmpsub.submenu[row[2]];
-								}
-							}
-						}else{
-							tmpsub = false;
-						}
-						if(tmpsub){
-							this.menu[i].name = tmpsub.name;
-						}
-					}
-				}
 			},
+			// setMenuName(){
+			// 	for(var i=0;i<this.activeMenuArr.length;i++){
+			// 		let row = this.activeMenuArr[i];
+			// 		if (typeof(row[0]) != 'object'){
+			// 			var tmpsub = false;
+			// 			if(row.length>0 && row[0]!=null){
+			// 				tmpsub = this.subData[i].submenu[row[0]];
+			// 				if(row.length>1 && row[1]!=null){
+			// 					tmpsub = tmpsub.submenu[row[1]];
+			// 					if(row.length>2 && row[2]!=null){
+			// 						tmpsub = tmpsub.submenu[row[2]];
+			// 					}
+			// 				}
+			// 			}else{
+			// 				tmpsub = false;
+			// 			}
+			// 			if(tmpsub){
+			// 				this.menu[i].name = tmpsub.name;
+			// 			}
+			// 		}
+			// 	}
+			// },
 			//展开更多
 			showMoreSub(index) {
 				this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true;
 				this.$forceUpdate();
 			},
 			//选中
 			selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
 				//读取记录
 				if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
 					level1_index) {
 					this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
 				} else {
 					this.activeMenuArr[page_index].splice(0, 1, level1_index);
 					(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);
 					(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);
 				}
 				//写入结果
 				if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
 				) {
 					let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index];
-					if(this.updateMenuName){
+					// if(this.updateMenuName){
-						this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
+					// 	this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name;
-					}
+					// }
 					this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
 					this.togglePage(this.showPage);
 				}
 			},
 			//写入结果，筛选
 			setFilterData(page_index) {
 				this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
 				this.togglePage(this.showPage);
 			},
 			//重置结果和ui，筛选
 			resetFilterData(page_index) {
 				let tmpArr = [];
 				let level = this.shadowActiveMenuArr[page_index].length;
 				while (level > 0) {
 					tmpArr.push([]);
 					let box = this.subData[page_index].submenu[level - 1].submenu;
 					for (let i = 0; i < box.length; i++) {
 						this.subData[page_index].submenu[level - 1].submenu[i].selected = false;
 					}
 					level--;
 				}
 				this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
 				this.$forceUpdate();
 			},
 			//选中筛选类label-UI状态
 			selectFilterLabel(page_index, box_index, label_index) {
 				let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
 				if (find_index > -1) {
 					this.activeMenuArr[page_index][box_index].splice(find_index, 1);
 					this.subData[page_index].submenu[box_index].submenu[label_index].selected = false;
 				} else {
 					this.activeMenuArr[page_index][box_index].push(label_index);
 					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
 				}
 				this.$forceUpdate();
 			},
 			//选中单选类label-UI状态
 			selectRadioLabel(page_index, box_index, label_index) {
 				let activeIndex = this.activeMenuArr[page_index][box_index][0];
 				if(activeIndex == label_index){
 					this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
 					this.activeMenuArr[page_index][box_index][0] = null;
 				}else{
 					if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
 						this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
 					}
 					this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
 					this.activeMenuArr[page_index][box_index][0] = label_index;
 				}
 				this.$forceUpdate();
 			},
 			//菜单开关
 			togglePage(index) {
 				if (index == this.showPage) {
 					this.hidePageLayer(true);
 					this.hideMask();
 					this.showPage = -1;
 				} else {
 					if (this.showPage > -1) {
 						this.hidePageLayer(false);
 					}
 					this.showPageLayer(index);
 					this.showMask();
 				}
+				if(this.on[0] === 1) {
+					this.on[0] = 0;
+				}
+				this.on[index] = 1;
+			},
+			showAll() {
+				this.on = [1,0,0,0,0]
+				// 输出
+				this.$emit('search', {
+					index: {},
+					value: {},
+					on: this.on,
+				});
 			},
 			//hide遮罩层
 			hideMask() {
 				this.isShowMask = false;
 				setTimeout(() => {
 					this.maskVisibility = false;
 				}, 200);
 			},
 			//show遮罩层
 			showMask() {
 				this.maskVisibility = true;
 				this.$nextTick(() => {
 					setTimeout(() => {
 						this.isShowMask = true;
 					}, 0);
 				})
 			},
 			//hide菜单页
 			hidePageLayer(isAnimation) {
 				this.triangleDeg[this.showPage] = 0;
 				let tmpIndex = this.showPage;
 				if (isAnimation) {
 					setTimeout(() => {
 						this.pageState.splice(tmpIndex, 1, false);
 					}, 200);
 					this.confirm();
 				} else {
 					this.pageState.splice(tmpIndex, 1, false)
 				}
 				this.firstScrollInto = null;
 				this.secondScrollInto = null;
 			},
 			confirm() {
 				let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
 				let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
 				//对结果做一下处理
 				index.forEach((item, i) => {
 					if (typeof(item[0]) == 'object') {
 						//针对筛选结果过一个排序
 						item.forEach((s, j) => {
 							if(s!=null){
 								s.sort((val1, val2) => {
 									return val1 - val2;
 								});
 								item[j] = s;
 								s.forEach((v, k) => {
 									value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
 									if(this.subData[i].type == 'radio' && value[i][j][k] == null){
 										value[i][j] = [];
 										index[i][j] = [];
 									}
 								});
 							}
 						});
 					}else{
 						let submenu = this.subData[i].submenu[item[0]];
-						// console.log(this.subData[i])
+						value[i][0] = submenu && submenu.value;
-						value[i][0] = submenu.value;
 						if(value[i].length>=2  && item[1]!=null){
 							if(submenu.submenu.length>0){
 								submenu = submenu.submenu[item[1]];
 								value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
 							}else{
 								value[i][1] = null
 							}
 							if(value[i].length>=3 && item[2]!=null){
 								if(submenu.submenu.length>0){
 									submenu = submenu.submenu[item[2]];
 									value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
 								}else{
 									value[i][2] = null;
 								}
 							}
 						}
 					}
 					index[i] = item;
 				});
 				// 输出
-				this.$emit('confirm', {
+				this.$emit('search', {
 					index: index,
-					value: value
+					value: value,
+					on: this.on,
 				});
 			},
 			//show菜单页
 			showPageLayer(index) {
 				this.processPage(index);
 				this.pageState.splice(index, 1, true);
 				this.$nextTick(() => {
 					setTimeout(() => {
 						this.showPage = index;
 					}, 0);
 				})
 				this.triangleDeg[index] = 180;
 			},
 			reloadActiveMenuArr(){
 				for (let i = 0; i < this.filterData.length; i++) {
 					let tmpitem = this.filterData[i];
 					let tmpArr = this.processActive(tmpitem);
 					tmpitem = this.processSubMenu(tmpitem);
 					if(this.activeMenuArr[i].length!=tmpArr.length){
 						this.filterData[i] = tmpitem;
 						this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
 						this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
 					}
 				}
 				this.subData = this.filterData;
 				this.$forceUpdate();
 			},
 			processPage(index) {
 				//check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
 				this.reloadActiveMenuArr();
 				//重置UI控制数组
 				this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
 				if (this.menu[index].type == 'filter') {
 					//重载筛选页选中状态
 					let level = this.shadowActiveMenuArr[index].length;
 					for (let i = 0; i < level; i++) {
 						let box = this.subData[index].submenu[i].submenu;
 						for (let j = 0; j < box.length; j++) {
 							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
 								this.subData[index].submenu[i].submenu[j].selected = true;
 							} else {
 								this.subData[index].submenu[i].submenu[j].selected = false;
 							}
 						}
 					}
 				} else if (this.menu[index].type == 'hierarchy') {
 					this.$nextTick(() => {
 						setTimeout(() => {
 							//滚动到选中项
 							this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
 							this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
 						}, 0);
 					})
 				} else if (this.menu[index].type == 'radio') {
 					//重载筛选页选中状态
 					let level = this.shadowActiveMenuArr[index].length;
 					for (let i = 0; i < level; i++) {
 						let box = this.subData[index].submenu[i].submenu;
 						for (let j = 0; j < box.length; j++) {
 							if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
 								this.subData[index].submenu[i].submenu[j].selected = true;
 							} else {
 								this.subData[index].submenu[i].submenu[j].selected = false;
 							}
 						}
 					}
 				}
 			},
 			processActive(tmpitem) {
 				let tmpArr = []
 				if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
 					let level = this.getMaxFloor(tmpitem.submenu);
 					while (level > 0) {
 						tmpArr.push(0);
 						level--;
 					}
 				} else if (tmpitem.type == 'filter') {
 					let level = tmpitem.submenu.length;
 					while (level > 0) {
 						tmpArr.push([]);
 						level--;
 					}
 				} else if (tmpitem.type == 'radio') {
 					let level = tmpitem.submenu.length;
 					while (level > 0) {
 						tmpArr.push([]);
 						level--;
 					}
 				}
 				return tmpArr;
 			},
 			processSubMenu(menu) {
 				if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
 					for (let i = 0; i < menu.submenu.length; i++) {
 						menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
 					}
 				} else {
 					menu.submenu = [];
 				}
 				return menu;
 			},
 			//计算菜单层级
 			getMaxFloor(treeData) {
 				let floor = 0
 				let max = 0
 				function each(data, floor) {
 					data.forEach(e => {
 						max = floor > max ? floor : max;
 						if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
 							each(e.submenu, floor + 1)
 						}
 					})
 				}
 				each(treeData, 1)
 				return max;
 			},
 			discard() {
 			}
 		}
 	}
 </script>
 <style lang="scss">
 	.HMfilterDropdown {
 		flex-shrink: 0;
 		width: 100%;
 		height: 44px;
 		position: fixed;
 		z-index: 997;
 		flex-wrap: nowrap;
 		display: flex;
 		flex-direction: row;
 		top: var(--window-top);
 		left:0;
 		view {
 			display: flex;
 			flex-wrap: nowrap;
 		}
 	}
 	.region {
 		flex: 1;
 		height: 44px;
 	}
 	.nav {
 		width: 100%;
 		height: 44px;
-		border-bottom: solid 1rpx #eee;
 		z-index: 12;
 		background-color: #ffffff;
 		flex-direction: row;
 		.first-menu {
 			width: 100%;
-			font-size: 13px;
+			font-size: 16px;
 			color: #333333;
 			flex-direction: row;
 			align-items: center;
 			justify-content: center;
 			transition: color .2s linear;
 			&.on {
 				color: #FF6B4A;
 				.iconfont {
 					color: #FF6B4A;
 				}
 			}
 			.name {
 				height: 20px;
+				// font-size: 16px;
 				text-align: center;
 				text-overflow: clip;
 				overflow: hidden;
 			}
 			.iconfont {
 				width: 13px;
 				height: 13px;
+				line-height: 16px;
 				align-items: center;
 				justify-content: center;
 				transition: transform .2s linear, color .2s linear;
 			}
 		}
 	}
 	.sub-menu-class {
 		width: 100%;
 		position: absolute;
 		left: 0;
 		transform: translate3d(0, - 100%, 0);
 		max-height: 345px;
 		background-color: #ffffff;
 		z-index: 11;
 		box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
 		overflow: hidden;
 		flex-direction: row;
 		transition: transform .15s linear;
 		&.hide {
 			display: none;
 		}
 		&.show {
 			transform: translate3d(0, calc(44px + 1rpx), 0);
 		}
 	}
 	.sub-menu-list {
 		width: 100%;
 		height: 345px;
 		flex-direction: column;
 		.sub-menu {
 			min-height: 44px;
 			font-size: 13px;
 			flex-direction: column;
 			padding-right: 15px;
 			>.menu-name {
 				height: 44px;
 				flex-direction: row;
 				align-items: center;
 				justify-content: space-between;
 				>.iconfont {
 					display: none;
 					font-size: 18px;
 					color: #FF6B4A;
 				}
 			}
 		}
 		&.first {
 			flex-shrink: 0;
 			width: 236rpx;
 			background-color: #f0f0f0;
 			.sub-menu {
 				padding-left: 15px;
 				&.on {
 					background-color: #fff;
 				}
 			}
 		}
 		&.alone {
 			max-height: 345px;
-			min-height: 170px;
+			min-height: 60rpx;
 			height: auto;
 			.sub-menu {
 				min-height: calc(44px - 1rpx);
 				margin-left: 15px;
 				border-bottom: solid 1rpx #e5e5e5;
 				&.on {
 					color: #FF6B4A;
 					>.menu-name {
 						>.iconfont {
 							display: block;
 						}
 					}
 				}
 			}
 		}
 		&.not-first {
 			.sub-menu {
 				min-height: calc(44px - 1rpx);
 				margin-left: 15px;
 				border-bottom: solid 1rpx #e5e5e5;
 				>.menu-name {
 					height: calc(44px - 1rpx);
 					>.iconfont {
 						display: none;
 						font-size: 18px;
 						color: #FF6B4A;
 					}
 				}
 				&.on {
 					color: #FF6B4A;
 					>.menu-name {
 						>.iconfont {
 							display: block;
 						}
 					}
 				}
 				.more-sub-menu {
 					flex-direction: row;
 					flex-wrap: wrap;
 					padding-bottom: 9px;
 					>text {
 						height: 30px;
 						border-radius: 3px;
 						background-color: #f5f5f5;
 						color: #9b9b9b;
 						margin-bottom: 6px;
 						margin-right: 6px;
 						text-align: center;
 						line-height: 30px;
 						border: solid #f5f5f5 1rpx;
 						flex: 0 0 calc(33.33% - 6px);
 						overflow: hidden;
 						font-size: 12px;
 						&:nth-child(3n) {
 							margin-right: 0;
 						}
 						&.on {
 							border-color: #f6c8ac;
 							color: #FF6B4A;
 						}
 						.iconfont {
 							color: #9b9b9b;
 						}
 					}
 				}
 			}
 		}
 	}
 	.filter {
 		width: 100%;
 		height: 345px;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		align-items: center;
 		.menu-box {
 			width: 698rpx;
 			height: calc(345px - 75px);
 			flex-shrink: 1;
 			.box {
 				width: 100%;
 				margin-top: 16px;
 				flex-direction: column;
 				.title {
 					width: 100%;
 					font-size: 13px;
 					color: #888;
 				}
 				.labels {
 					flex-direction: row;
 					flex-wrap: wrap;
 					.on {
 						border-color: #FF6B4A;
 						background-color: #FF6B4A;
 						color: #fff;
 					}
 					>view {
 						width: 148rpx;
 						height: 30px;
 						border: solid 1rpx #adadad;
 						border-radius: 2px;
 						margin-right: 15px;
 						margin-top: 8px;
 						padding: 0 16rpx;
 						box-sizing: border-box;
 						font-size: 12px;
 						flex-direction: row;
 						justify-content: center;
 						align-items: center;
 						overflow: hidden;
 						white-space: nowrap;
 						text-overflow: ellipsis;
 						&:nth-child(4n) {
 							margin-right: 0;
 						}
 					}
 				}
 			}
 		}
 		.btn-box {
 			flex-shrink: 0;
 			width: 100%;
 			height: 75px;
 			flex-direction: row !important;
 			align-items: center;
 			justify-content: space-between;
 			>view {
 				width: 320rpx;
 				height: 40px;
 				border-radius: 40px;
 				border: solid 1rpx #FF6B4A;
 				align-items: center;
 				justify-content: center;
 			}
 			.reset {
 				color: #FF6B4A;
 			}
 			.submit {
 				color: #fff;
 				background-color: #FF6B4A;
 			}
 		}
 	}
 	.mask {
 		z-index: 10;
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background-color: rgba(0, 0, 0, 0);
 		transition: background-color .15s linear;
 		&.show {
 			background-color: rgba(0, 0, 0, 0.5);
 		}
 		&.hide {
 			display: none;

src/pages/detailsChoiceArgs/detailsChoiceArgs.vue

Diff comments View file @5214ca9

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="goods-info">	3	<view class="goods-info">
4	<image src="../../static/myorder-paying-pic.png"></image>	4	<image src="../../static/myorder-paying-pic.png"></image>
5	<view class="box-right">	5	<view class="box-right">
6	<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>	6	<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
7	<text class="p2">支持7天无理由退货顺丰发货</text>	7	<text class="p2">支持7天无理由退货顺丰发货</text>
8	<view class="priceBox">	8	<view class="priceBox">
9	<view class="price">￥{{price*count}}</view>	9	<view class="price">￥{{price*count}}</view>
10	<view class="counter">	10	<view class="counter">
11	<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>	11	<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12	<text>{{count}}</text>	12	<text>{{count}}</text>
13	<view class="btn" @click="counter(true)">+</view>	13	<view class="btn" @click="counter(true)">+</view>
14	</view>	14	</view>
15	</view>	15	</view>
16	</view>	16	</view>
17	</view>	17	</view>
18	<view class="goods-data">	18	<view class="goods-data">
19	<!-- 实用功能折叠框 -->
20	<MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
21	<MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
22	<MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
23	<MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
24
25	<view class="opCollapse">	19	<view class="opCollapse">
26	<view class="head">	20	<view class="head">
27	<view v-if="!opIsOpen">填写验光数据</view>	21	<view v-if="!opIsOpen">填写验光数据</view>
28	<view v-else></view>	22	<view v-else></view>
29	<view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>	23	<view class="headRighted" v-if="opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
30	<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>	24	<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view>
31	</view>	25	</view>
32	<view class="body">	26	<view class="body">
33	<template v-if="opIsOpen">	27	<template v-if="opIsOpen">
34		28
35	<view class="goods-form">	29	<view class="goods-form">
36	<text class="p1">填写验光数据</text>	30	<text class="p1">填写验光数据</text>
37	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>	31	<text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
38	<view class="picker" >	32	<view class="picker" >
39	<view class="picker-choice">	33	<view class="picker-choice">
40	<view class="choice-left">	34	<view class="choice-left">
41	<text class="p11">{{pickerInfoList[0].nameC}}</text>	35	<text class="p11">{{pickerInfoList[0].nameC}}</text>
42	<text class="p12">{{pickerInfoList[0].nameE}}</text>	36	<text class="p12">{{pickerInfoList[0].nameE}}</text>
43	</view>	37	</view>
44	<text class="p13">左   (OD)</text>	38	<text class="p13">左   (OD)</text>
45	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>	39	<text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
46	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">	40	<picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
47	<image src="../../static/detail-tabicon.png" ></image>	41	<image src="../../static/detail-tabicon.png" ></image>
48	</picker>	42	</picker>
49	<text class="p13">右   (OS)</text>	43	<text class="p13">右   (OS)</text>
50	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>	44	<text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
51	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">	45	<picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
52	<image src="../../static/detail-tabicon.png" ></image>	46	<image src="../../static/detail-tabicon.png" ></image>
53	</picker>	47	</picker>
54	</view>	48	</view>
55	</view>	49	</view>
56	<view class="picker" >	50	<view class="picker" >
57	<view class="picker-choice">	51	<view class="picker-choice">
58	<view class="choice-left">	52	<view class="choice-left">
59	<text class="p11">{{pickerInfoList[1].nameC}}</text>	53	<text class="p11">{{pickerInfoList[1].nameC}}</text>
60	<text class="p12">{{pickerInfoList[1].nameE}}</text>	54	<text class="p12">{{pickerInfoList[1].nameE}}</text>
61	</view>	55	</view>
62	<text class="p13">左   (OD)</text>	56	<text class="p13">左   (OD)</text>
63	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>	57	<text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
64	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">	58	<picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
65	<image src="../../static/detail-tabicon.png" ></image>	59	<image src="../../static/detail-tabicon.png" ></image>
66	</picker>	60	</picker>
67	<text class="p13">右   (OS)</text>	61	<text class="p13">右   (OS)</text>
68	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>	62	<text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
69	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">	63	<picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
70	<image src="../../static/detail-tabicon.png" ></image>	64	<image src="../../static/detail-tabicon.png" ></image>
71	</picker>	65	</picker>
72	</view>	66	</view>
73	</view>	67	</view>
74	<view class="picker" >	68	<view class="picker" >
75	<view class="picker-choice">	69	<view class="picker-choice">
76	<view class="choice-left">	70	<view class="choice-left">
77	<text class="p11">{{pickerInfoList[2].nameC}}</text>	71	<text class="p11">{{pickerInfoList[2].nameC}}</text>
78	<text class="p12">{{pickerInfoList[2].nameE}}</text>	72	<text class="p12">{{pickerInfoList[2].nameE}}</text>
79	</view>	73	</view>
80	<text class="p13">左   (OD)</text>	74	<text class="p13">左   (OD)</text>
81	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>	75	<text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
82	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">	76	<picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
83	<image src="../../static/detail-tabicon.png" ></image>	77	<image src="../../static/detail-tabicon.png" ></image>
84	</picker>	78	</picker>
85	<text class="p13">右   (OS)</text>	79	<text class="p13">右   (OS)</text>
86	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>	80	<text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
87	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">	81	<picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
88	<image src="../../static/detail-tabicon.png" ></image>	82	<image src="../../static/detail-tabicon.png" ></image>
89	</picker>	83	</picker>
90	</view>	84	</view>
91	</view>	85	</view>
92	<view class="picker" >	86	<view class="picker" >
93	<view class="picker-choice">	87	<view class="picker-choice">
94	<view class="choice-left">	88	<view class="choice-left">
95	<text class="p11">{{pickerInfoList[3].nameC}}</text>	89	<text class="p11">{{pickerInfoList[3].nameC}}</text>
96	<text class="p12">{{pickerInfoList[3].nameE}}</text>	90	<text class="p12">{{pickerInfoList[3].nameE}}</text>
97	</view>	91	</view>
98	<text class="p13">左   (OD)</text>	92	<text class="p13">左   (OD)</text>
99	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>	93	<text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">	94	<picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101	<image src="../../static/detail-tabicon.png" ></image>	95	<image src="../../static/detail-tabicon.png" ></image>
102	</picker>	96	</picker>
103	<text class="p13">右   (OS)</text>	97	<text class="p13">右   (OS)</text>
104	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>	98	<text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">	99	<picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106	<image src="../../static/detail-tabicon.png" ></image>	100	<image src="../../static/detail-tabicon.png" ></image>
107	</picker>	101	</picker>
108	</view>	102	</view>
109	</view>	103	</view>
110	<view class="picker" >	104	<view class="picker" >
111	<view class="picker-choice">	105	<view class="picker-choice">
112	<view class="choice-left">	106	<view class="choice-left">
113	<text class="p11">{{pickerInfoList[4].nameC}}</text>	107	<text class="p11">{{pickerInfoList[4].nameC}}</text>
114	</view>	108	</view>
115	<text class="p13-date">年   (Y)</text>	109	<text class="p13-date">年   (Y)</text>
116	<text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>	110	<text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
117	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">	111	<picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
118	<image src="../../static/detail-tabicon.png" ></image>	112	<image src="../../static/detail-tabicon.png" ></image>
119	</picker>	113	</picker>
120	<text class="p13-date">月   (M)</text>	114	<text class="p13-date">月   (M)</text>
121	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>	115	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
122	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">	116	<picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
123	<image src="../../static/detail-tabicon.png" ></image>	117	<image src="../../static/detail-tabicon.png" ></image>
124	</picker>	118	</picker>
125	<text class="p13-date">日   (D)</text>	119	<text class="p13-date">日   (D)</text>
126	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>	120	<text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
127	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">	121	<picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
128	<image src="../../static/detail-tabicon.png" ></image>	122	<image src="../../static/detail-tabicon.png" ></image>
129	</picker>	123	</picker>
130	</view>	124	</view>
131	</view>	125	</view>
132	<view class="confirm">	126	<view class="confirm">
133	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>	127	<image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
134	<text>确认以上输入信息来源于我的验光数据!</text>	128	<text>确认以上输入信息来源于我的验光数据!</text>
135	</view>	129	</view>
136	</view>	130	</view>
137		131
138	</template>	132	</template>
139	<template v-else>	133	<template v-else>
140	<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">	134	<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
141	<template v-if="item.nameC==='验光日期'">	135	<template v-if="item.nameC==='验光日期'">
142	<text class="names">{{item.nameC}}</text>	136	<text class="names">{{item.nameC}}</text>
143	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>	137	<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
144	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>	138	<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
145	<text>{{item.nameArray3[item.nameIndex2]}}日</text>	139	<text>{{item.nameArray3[item.nameIndex2]}}日</text>
146	</template>	140	</template>
147	<template v-else>	141	<template v-else>
148	<template v-if="item.nameC==='度数'">	142	<template v-if="item.nameC==='度数'">
149	<text style="display: inline;">*</text>	143	<text style="display: inline;">*</text>
150	</template>	144	</template>
151		145
152	<text class="names">{{item.nameC}}</text>	146	<text class="names">{{item.nameC}}</text>
153	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>	147	<text style="margin-right: 10px;">左 {{item.nameArray1[item.nameIndex1]}}</text>
154	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>	148	<text>右 {{item.nameArray2[item.nameIndex2]}}</text>
155	</template>	149	</template>
156	</view>	150	</view>
157	</template>	151	</template>
158	</view>	152	</view>
159	</view>	153	</view>
160		154	<!-- 实用功能折叠框 -->
		155	<MyCollapse :isOpenProps="funIsOpen" :funListProp="funList" :funContentProp="funContent" title="实用功能"></MyCollapse>
		156	<MyCollapse :isOpenProps="kindIsOpen" :funListProp="kindList1" :funList2Prop="kindList2" :funContentProp="kindContent" title="镜片种类"></MyCollapse>
		157	<MyCollapse :isOpenProps="maIsOpen" :funListProp="maList1" :funList2Prop="maList2" :funContentProp="maContent" title="材质选择"></MyCollapse>
		158	<MyCollapse :isOpenProps="reIsOpen" :funListProp="reList1" :funList2Prop="reList2" :funContentProp="reContent" title="折射率"></MyCollapse>
161	</view>	159	</view>
162	<view class="submit">立即结算</view>	160	<view class="submit">立即结算</view>
163	</view>	161	</view>
164	</template>	162	</template>
165		163
166	<script>	164	<script>
167	import MyCollapse from './compoents/MyCollapse.vue'	165	import MyCollapse from './compoents/MyCollapse.vue'
168	export default {	166	export default {
169	components: {	167	components: {
170	MyCollapse	168	MyCollapse
171	},	169	},
172	data() {	170	data() {
173	return {	171	return {
174	count:1,	172	count:1,
175	disabled:false,	173	disabled:false,
176	price:180,	174	price:180,
177	// 实用功能参数	175	// 实用功能参数
178	funIsOpen:true, // 默认myCollapse开启	176	funIsOpen:true, // 默认myCollapse开启
179	funList: [	177	funList: [
180	{"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},	178	{"name":"防紫外线","isChioce": false,"key":1,"type": "fun"},
181	{"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},	179	{"name":"防蓝光","isChioce": false,"key":2,"type": "fun"},
182	{"name":"智能变色","isChioce": false,"key":3,"type": "fun"},	180	{"name":"智能变色","isChioce": false,"key":3,"type": "fun"},
183	{"name":"易清洁","isChioce": false,"key":4,"type": "fun"},	181	{"name":"易清洁","isChioce": false,"key":4,"type": "fun"},
184	{"name":"防辐射","isChioce": false,"key":5,"type": "fun"},	182	{"name":"防辐射","isChioce": false,"key":5,"type": "fun"},
185	{"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},	183	{"name":"抗疲劳","isChioce": false,"key":6,"type": "fun"},
186	],	184	],
187	funContent:[],	185	funContent:[],
188		186
189	// 镜片种类参数	187	// 镜片种类参数
190	kindIsOpen:true,	188	kindIsOpen:true,
191	kindList1: [	189	kindList1: [
192	{"name":"染色","isChioce":false,key:1,"type": "kind"},	190	{"name":"染色","isChioce":false,key:1,"type": "kind"},
193	{"name":"渐变","isChioce":false,key:2,"type": "kind"},	191	{"name":"渐变","isChioce":false,key:2,"type": "kind"},
194	],	192	],
195	kindList2: [	193	kindList2: [
196	{"name":"JB234759","isChioce":false,key:3,"type": "kind"},	194	{"name":"JB234759","isChioce":false,key:3,"type": "kind"},
197	{"name":"JB234759","isChioce":false,key:4,"type": "kind"},	195	{"name":"JB234759","isChioce":false,key:4,"type": "kind"},
198	{"name":"JB234759","isChioce":false,key:5,"type": "kind"},	196	{"name":"JB234759","isChioce":false,key:5,"type": "kind"},
199	{"name":"JB234759","isChioce":false,key:6,"type": "kind"},	197	{"name":"JB234759","isChioce":false,key:6,"type": "kind"},
200	{"name":"JB234759","isChioce":false,key:7,"type": "kind"},	198	{"name":"JB234759","isChioce":false,key:7,"type": "kind"},
201	],	199	],
202	kindContent:[],	200	kindContent:[],
203	// 材质选择	201	// 材质选择
204	maIsOpen:true,	202	maIsOpen:true,
205	maList1: [	203	maList1: [
206	{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},	204	{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
207	{"name":"特殊镜片","isChioce":false,key:2},	205	{"name":"特殊镜片","isChioce":false,key:2},
208	],	206	],
209	maList2: [	207	maList2: [
210	{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},	208	{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
211	{"name":"玻璃镜片","isChioce":false,key:4},	209	{"name":"玻璃镜片","isChioce":false,key:4},
212	],	210	],
213	maContent:[],	211	maContent:[],
214	// 折射率参数	212	// 折射率参数
215	reIsOpen:true,	213	reIsOpen:true,
216	reList1: [	214	reList1: [
217	{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},	215	{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
218	{"name":"1.60","isChioce":false,key:2},	216	{"name":"1.60","isChioce":false,key:2},
219	],	217	],
220	reList2: [	218	reList2: [
221	{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},	219	{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
222	{"name":"1.67","isChioce":false,key:4},	220	{"name":"1.67","isChioce":false,key:4},
223	{"name":"1.71","isChioce":false,key:5},	221	{"name":"1.71","isChioce":false,key:5},
224	{"name":"1.74","isChioce":false,key:6},	222	{"name":"1.74","isChioce":false,key:6},
225	],	223	],
226	reContent:[],	224	reContent:[],
227	// 验光参数	225	// 验光参数
228	opIsOpen:true,	226	opIsOpen:true,
229	tablist: {	227	tablist: {
230	// read: true,	228	// read: true,
231	// seeLong: false,	229	// seeLong: false,
232	confirm: false	230	confirm: false
233	},	231	},
234	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],	232	tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
235	// 度数相关数据	233	// 度数相关数据
236	pickerInfoList:[	234	pickerInfoList:[
237	{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},	235	{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
238	{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},	236	{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
239	{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},	237	{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
240	{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},	238	{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
241	{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}	239	{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
242	],	240	],
243		241
244	}	242	}
245	},	243	},
246	methods: {	244	methods: {
247	counter(isadd){	245	counter(isadd){
248	if(isadd){	246	if(isadd){
249	this.count++	247	this.count++
250	}else{	248	}else{
251	this.count <= 1? this.disabled = true:this.count--	249	this.count <= 1? this.disabled = true:this.count--
252	}	250	}
253	},	251	},
254	myCollapseChange(isopen){	252	myCollapseChange(isopen){
255	// console.log(isopen)	253	// console.log(isopen)
256	this.opIsOpen = !isopen	254	this.opIsOpen = !isopen
257	},	255	},
258	changeConfirm() {	256	changeConfirm() {
259	this.tablist.confirm = !this.tablist.confirm	257	this.tablist.confirm = !this.tablist.confirm
260	},	258	},
261		259
262	bindPickerChange01: function(e) {	260	bindPickerChange01: function(e) {
263	this.pickerInfoList[0].nameIndex1 = e.target.value	261	this.pickerInfoList[0].nameIndex1 = e.target.value
264	},	262	},
265	bindPickerChange02: function(e) {	263	bindPickerChange02: function(e) {
266	this.pickerInfoList[0].nameIndex2 = e.target.value	264	this.pickerInfoList[0].nameIndex2 = e.target.value
267	},	265	},
268		266
269	bindPickerChange11: function(e) {	267	bindPickerChange11: function(e) {
270	this.pickerInfoList[1].nameIndex1 = e.target.value	268	this.pickerInfoList[1].nameIndex1 = e.target.value
271	},	269	},
272	bindPickerChange12: function(e) {	270	bindPickerChange12: function(e) {
273	this.pickerInfoList[1].nameIndex2 = e.target.value	271	this.pickerInfoList[1].nameIndex2 = e.target.value
274	},	272	},
275		273
276	bindPickerChange21: function(e) {	274	bindPickerChange21: function(e) {
277	this.pickerInfoList[2].nameIndex1 = e.target.value	275	this.pickerInfoList[2].nameIndex1 = e.target.value
278	},	276	},
279	bindPickerChange22: function(e) {	277	bindPickerChange22: function(e) {
280	this.pickerInfoList[2].nameIndex2 = e.target.value	278	this.pickerInfoList[2].nameIndex2 = e.target.value
281	},	279	},
282		280
283	bindPickerChange31: function(e) {	281	bindPickerChange31: function(e) {
284	this.pickerInfoList[3].nameIndex1 = e.target.value	282	this.pickerInfoList[3].nameIndex1 = e.target.value
285	},	283	},
286	bindPickerChange32: function(e) {	284	bindPickerChange32: function(e) {
287	this.pickerInfoList[3].nameIndex2 = e.target.value	285	this.pickerInfoList[3].nameIndex2 = e.target.value
288	},	286	},
289		287
290	bindPickerChange41: function(e) {	288	bindPickerChange41: function(e) {
291	this.pickerInfoList[4].nameIndex1 = e.target.value	289	this.pickerInfoList[4].nameIndex1 = e.target.value
292	},	290	},
293	bindPickerChange42: function(e) {	291	bindPickerChange42: function(e) {
294	this.pickerInfoList[4].nameIndex2 = e.target.value	292	this.pickerInfoList[4].nameIndex2 = e.target.value
295	},	293	},
296	bindPickerChange43: function(e) {	294	bindPickerChange43: function(e) {
297	this.pickerInfoList[4].nameIndex3 = e.target.value	295	this.pickerInfoList[4].nameIndex3 = e.target.value
298	},	296	},
299	}	297	}
300	}	298	}
301	</script>	299	</script>
302		300
303	<style lang="scss" scoped>	301	<style lang="scss" scoped>
304	.content{	302	.content{
305	width: 100%;	303	width: 100%;
306	background-color: #F2F2F2;	304	background-color: #F2F2F2;
307	display: flex;	305	display: flex;
308	flex-direction: column;	306	flex-direction: column;
309	align-items: center;	307	align-items: center;
310	}	308	}
311		309
312	.goods-info{	310	.goods-info{
313	width: 100%;	311	width: 100%;
314	height: 272rpx;	312	height: 272rpx;
315	box-sizing: border-box;	313	box-sizing: border-box;
316	padding: 40rpx 40rpx 36rpx 36rpx;	314	padding: 40rpx 40rpx 36rpx 36rpx;
317	margin: 36rpx 0 18rpx 0;	315	margin: 36rpx 0 18rpx 0;
318	// margin-bottom: -18rpx;	316	// margin-bottom: -18rpx;
319	// margin-top: -36rpx;	317	// margin-top: -36rpx;
320	background: #FFFFFF;	318	background: #FFFFFF;
321	border-radius: 16rpx;	319	border-radius: 16rpx;
322	display: flex;	320	display: flex;
323	image{	321	image{
324	width: 94px;	322	width: 94px;
325	height: 94px;	323	height: 94px;
326	margin-right: 28rpx;	324	margin-right: 28rpx;
327	}	325	}
328	.box-right{	326	.box-right{
329	width: 458rpx;	327	width: 458rpx;
330	display: flex;	328	display: flex;
331	flex-direction: column;	329	flex-direction: column;
332	align-items: flex-start;	330	align-items: flex-start;
333	justify-content: space-between;	331	justify-content: space-between;
334	.p1 {	332	.p1 {
335	// font-family: PingFangSC-Regular;	333	// font-family: PingFangSC-Regular;
336	font-size: 14px;	334	font-size: 14px;
337	color: #333333;	335	color: #333333;
338	letter-spacing: -0.26px;	336	letter-spacing: -0.26px;
339	text-align: justify;	337	text-align: justify;
340	line-height: 18px;	338	line-height: 18px;
341	}	339	}
342	.p2 {	340	.p2 {
343	// font-family: PingFangSC-Regular;	341	// font-family: PingFangSC-Regular;
344	font-size: 10px;	342	font-size: 10px;
345	color: #999999;	343	color: #999999;
346	letter-spacing: -0.19px;	344	letter-spacing: -0.19px;
347	margin-top: -20rpx;	345	margin-top: -20rpx;
348	}	346	}
349	.priceBox{	347	.priceBox{
350	display: flex;	348	display: flex;
351	flex-direction: row;	349	flex-direction: row;
352	justify-content: space-between;	350	justify-content: space-between;
353	width: 100%;	351	width: 100%;
354	.price{	352	.price{
355	color: #FF6B4A;	353	color: #FF6B4A;
356	font-size: 28rpx;	354	font-size: 28rpx;
357	}	355	}
358	.counter{	356	.counter{
359	display: flex;	357	display: flex;
360	flex-direction: row;	358	flex-direction: row;
361	justify-content: space-between;	359	justify-content: space-between;
362	font-size: 28rpx;	360	font-size: 28rpx;
363	color: #333333;	361	color: #333333;
364	width: 122rpx;	362	width: 122rpx;
365	.btn{	363	.btn{
366	display: flex;	364	display: flex;
367	justify-content: center;	365	justify-content: center;
368	line-height: 32rpx;	366	line-height: 32rpx;
369	height: 32rpx;	367	height: 32rpx;
370	width: 32rpx;	368	width: 32rpx;
371	background-color: #F2F2F2;	369	background-color: #F2F2F2;
372	color: #CFCFCF;	370	color: #CFCFCF;
373	}	371	}
374	}	372	}
375	}	373	}
376	}	374	}
377	}	375	}
378		376
379	.goods-data{	377	.goods-data{
380	width: 100%;	378	width: 100%;
381	box-sizing: border-box;	379	box-sizing: border-box;
382	padding: 37rpx 40rpx 0 40rpx;	380	padding: 37rpx 40rpx 0 40rpx;
383	background: #FFFFFF;	381	background: #FFFFFF;
384	border-radius: 12rpx;	382	border-radius: 12rpx;
385	margin-bottom: 92px;	383	margin-bottom: 92px;
386	.opCollapse{	384	.opCollapse{
387	width: 100%;	385	width: 100%;
388	padding-bottom: 28rpx;	386	padding-bottom: 28rpx;
389	margin-top: 7px;	387	margin-top: 7px;
390	border-bottom: 1px solid #E9E9E9;	388	border-bottom: 1px solid #E9E9E9;
391	.head{	389	.head{
392	display: flex;	390	display: flex;
393	justify-content: space-between;	391	justify-content: space-between;
394	height: 24px;	392	height: 24px;
395	// font-family: PingFangSC-Medium;	393	// font-family: PingFangSC-Medium;
396	font-size: 16px;	394	font-size: 16px;
397	color: #333333;	395	color: #333333;
398	letter-spacing: -0.3px;	396	letter-spacing: -0.3px;
399	text-align: justify;	397	text-align: justify;
400	line-height: 24px;	398	line-height: 24px;
401	margin-bottom: 18rpx;	399	margin-bottom: 18rpx;
402	.headRighted{	400	.headRighted{
403	width: 0;	401	width: 0;
404	height: 0;	402	height: 0;
405	border-left: 4px solid transparent;	403	border-left: 4px solid transparent;
406	border-right: 4px solid transparent;	404	border-right: 4px solid transparent;
407	border-bottom: 4px solid #CFCFCF;	405	border-bottom: 4px solid #CFCFCF;
408	transform: scaleY(-1);	406	transform: scaleY(-1);
409	margin-top: 10px;	407	margin-top: 10px;
410	}	408	}
411	.headMid{	409	.headMid{
412	// font-family: PingFangSC-Regular;	410	// font-family: PingFangSC-Regular;
413	font-size: 10px;	411	font-size: 10px;
414	color: #999999;	412	color: #999999;
415	letter-spacing: -0.19px;	413	letter-spacing: -0.19px;
416	margin-left: -120rpx;	414	margin-left: -120rpx;
417	}	415	}
418	.headRight{	416	.headRight{
419	width: 0;	417	width: 0;
420	height: 0;	418	height: 0;
421	border-left: 4px solid transparent;	419	border-left: 4px solid transparent;
422	border-right: 4px solid transparent;	420	border-right: 4px solid transparent;
423	border-bottom: 4px solid #CFCFCF;	421	border-bottom: 4px solid #CFCFCF;
424	margin-top: 10px;	422	margin-top: 10px;
425	}	423	}
426	}	424	}
427	.body{	425	.body{
428	// font-family: PingFangSC-Regular;	426	// font-family: PingFangSC-Regular;
429	font-size: 12px;	427	font-size: 12px;
430	color: #666666;	428	color: #666666;
431	letter-spacing: 0;	429	letter-spacing: 0;
432	.bodyBox{	430	.bodyBox{
433	margin-top: 15px;	431	margin-top: 15px;
434	.names{	432	.names{
435	// font-family: PingFangSC-Regular;	433	// font-family: PingFangSC-Regular;
436	font-size: 12px;	434	font-size: 12px;
437	color: #151515;	435	color: #151515;
438	letter-spacing: 0;	436	letter-spacing: 0;
439	text-align: justify;	437	text-align: justify;
440	line-height: 17px;	438	line-height: 17px;
441	margin-left: 5px;	439	margin-left: 5px;
442	margin-right: 10px;	440	margin-right: 10px;
443	}	441	}
444	text{	442	text{
445	// font-family: PingFangSC-Regular;	443	// font-family: PingFangSC-Regular;
446	font-size: 12px;	444	font-size: 12px;
447	color: #666666;	445	color: #666666;
448	letter-spacing: 0;	446	letter-spacing: 0;
449	text-align: justify;	447	text-align: justify;
450	}	448	}
451	}	449	}
452		450
453	}	451	}
454	}	452	}
455		453
456	}	454	}
457		455
458	.goods-form {	456	.goods-form {
459	display: flex;	457	display: flex;
460	flex-direction: column;	458	flex-direction: column;
461	align-items: center;	459	align-items: center;
462	justify-content: center;	460	justify-content: center;
463	background-color: #fff;	461	background-color: #fff;
464	width: 100%;	462	width: 100%;
465		463
466	.p1 {	464	.p1 {
467	font-size: 16px;	465	font-size: 16px;
468	color: #333333;	466	color: #333333;
469	letter-spacing: -0.3px;	467	letter-spacing: -0.3px;
470	text-align: justify;	468	text-align: justify;
471	line-height: 24px;	469	line-height: 24px;
472	margin: 4px 0;	470	margin: 4px 0;
473		471
474	}	472	}
475	.p2 {	473	.p2 {
476	font-size: 12px;	474	font-size: 12px;
477	color: #999999;	475	color: #999999;
478	letter-spacing: -0.23px;	476	letter-spacing: -0.23px;
479	margin-bottom: 18rpx;	477	margin-bottom: 18rpx;
480	}	478	}
481	image{	479	image{
482	width: 28rpx;	480	width: 28rpx;
483	height: 26rpx;	481	height: 26rpx;
484	}	482	}
485	.confirm {	483	.confirm {
486	display: flex;	484	display: flex;
487	align-items: center;	485	align-items: center;
488	font-size: 12px;	486	font-size: 12px;
489	color: #666666;	487	color: #666666;
490	letter-spacing: -0.23px;	488	letter-spacing: -0.23px;
491	width: 684rpx;	489	width: 684rpx;
492	image{	490	image{
493	margin-right:25rpx;	491	margin-right:25rpx;
494	}	492	}
495	}	493	}
496	.picker{	494	.picker{
497	display: flex;	495	display: flex;
498	flex-direction: column;	496	flex-direction: column;
499	justify-content: center;	497	justify-content: center;
500	align-items: center;	498	align-items: center;
501	width: 100%;	499	width: 100%;
502	image{	500	image{
503	width: 10px;	501	width: 10px;
504	height: 10px;	502	height: 10px;
505	margin-right: 5px;	503	margin-right: 5px;
506	}	504	}
507	.picker-choice{	505	.picker-choice{
508	display: flex;	506	display: flex;
509	width: 684rpx;	507	width: 684rpx;
510	align-items: center;	508	align-items: center;
511	margin-bottom: 40rpx;	509	margin-bottom: 40rpx;
512	.choice-left{	510	.choice-left{
513	width: 210rpx;	511	width: 210rpx;
514	.p11 {	512	.p11 {
515	font-size: 14px;	513	font-size: 14px;
516	color: #333333;	514	color: #333333;
517	letter-spacing: -0.26px;	515	letter-spacing: -0.26px;
518	text-align: justify;	516	text-align: justify;
519	line-height: 24px;	517	line-height: 24px;
520	// margin-right: 10px;	518	// margin-right: 10px;
521	}	519	}
522	.p12 {	520	.p12 {
523	font-size: 10px;	521	font-size: 10px;
524	color: #3F3F3F;	522	color: #3F3F3F;
525	letter-spacing: -0.19px;	523	letter-spacing: -0.19px;
526	text-align: justify;	524	text-align: justify;
527	line-height: 24px;	525	line-height: 24px;
528	}	526	}
529		527
530		528
531	}	529	}
532	.p13 {	530	.p13 {
533	font-size: 10px;	531	font-size: 10px;
534	color: #999999;	532	color: #999999;
535	letter-spacing: -0.19px;	533	letter-spacing: -0.19px;
536	margin-right: 10px;	534	margin-right: 10px;
537	}	535	}
538	.p13-date {	536	.p13-date {
539	font-size: 10px;	537	font-size: 10px;
540	color: #999999;	538	color: #999999;
541	letter-spacing: -0.19px;	539	letter-spacing: -0.19px;
542	margin-right: 5px;	540	margin-right: 5px;
543	}	541	}
544	.p14 {	542	.p14 {
545	font-size: 14px;	543	font-size: 14px;
546	color: #666666;	544	color: #666666;
547	letter-spacing: -0.26px;	545	letter-spacing: -0.26px;
548	text-align: center;	546	text-align: center;
549	width: 124rpx;	547	width: 124rpx;
550	border-bottom: 1px solid #CFCFCF;	548	border-bottom: 1px solid #CFCFCF;
551	}	549	}
552		550
553	}	551	}
554	}	552	}
555	}	553	}
556		554
557	.submit{	555	.submit{
558	width: 100%;	556	width: 100%;
559	height: 112rpx;	557	height: 112rpx;
560	background: #FF6B4A;	558	background: #FF6B4A;
561	position: fixed;	559	position: fixed;
562	bottom: 0;	560	bottom: 0;
563	text-align: center;	561	text-align: center;
564	line-height: 112rpx;	562	line-height: 112rpx;
565	// font-family: PingFangSC-Regular;	563	// font-family: PingFangSC-Regular;
566	font-size: 16px;	564	font-size: 16px;
567	color: #FFFFFF;	565	color: #FFFFFF;
568	letter-spacing: -0.3px;	566	letter-spacing: -0.3px;

src/pages/index/index.vue

Diff comments View file @5214ca9

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3	<view class="header">	3	<view class="header">
4	<!-- 搜索-->	4	<!-- 搜索-->
5	<view class="searchBar">	5	<view class="searchBar">
6	<icon class="searchIcon" type="search" size="14"></icon>	6	<icon class="searchIcon" type="search" size="14"></icon>
7	<input class="searchIpt" placeholder="老花镜" confirm-type="search" />	7	<input
		8	v-model="searchText"
		9	class="searchIpt"
		10	placeholder="老花镜"
		11	confirm-type="search"
		12	@blur="searchKey"
		13	/>
8	</view>	14	</view>
9		15
10	<!-- 筛选栏-->	16	<!-- 筛选栏-->
11	<view class="screenBar">	17	<!-- <view class="screenBar">
12	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">	18	<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
13	<view	19	<view
14	class="screenItem"	20	class="screenItem"
15	v-bind:class="{ active: current === item.current }"	21	v-bind:class="{ active: current === item.current }"
16	v-if="item.current === 2"	22	v-if="item.current === 2"
17	@click="dropDown"	23	@click="dropDown"
18	>	24	>
19	{{ item.text }}	25	{{ item.text }}
20	<icon type="info" size="14"></icon>	26	<icon type="info" size="14"></icon>
21	</view>	27	</view>
22	<view	28	<view
23	class="screenItem"	29	class="screenItem"
24	v-bind:class="{ active: current === item.current }"	30	v-bind:class="{ active: current === item.current }"
25	v-if="item.current === 4"	31	v-if="item.current === 4"
26	@click="showDrawer('showRight')"	32	@click="showDrawer('showRight')"
27	>	33	>
28	{{ item.text }}	34	{{ item.text }}
29	<icon type="info" size="14"></icon>	35	<icon type="info" size="14"></icon>
30	</view>	36	</view>
31	<view v-if="item.current !== 2&&item.current!==4">	37	<view v-if="item.current !== 2&&item.current!==4">
32	<view	38	<view
33	class="screenItem"	39	class="screenItem"
34	v-bind:class="{ active: current === item.current }"	40	v-bind:class="{ active: current === item.current }"
35	>{{ item.text }}</view>	41	>{{ item.text }}</view>
36	</view>	42	</view>
37	</view>	43	</view>
38	</view>	44	</view>-->
39	</view>	45	</view>
40	<Uni-drawer	46	<Uni-drawer
41	ref="showRight"	47	ref="showRight"
42	mask="true"	48	mask="true"
43	maskClick="true"	49	maskClick="true"
44	mode="right"	50	mode="right"
45	:width="320"	51	:width="320"
46	@change="change($event,'showRight')"	52	@change="change($event,'showRight')"
47	>	53	>
48	<view class="close">	54	<view class="close">
49	<view @click="closeDrawer('showRight')">	55	<view @click="closeDrawer('showRight')">
50	<text class="word-btn-white">关闭</text>	56	<text class="word-btn-white">关闭</text>
51	</view>	57	</view>
52	</view>	58	</view>
53	</Uni-drawer>	59	</Uni-drawer>
54		60
55	<!-- 筛选菜单-->	61	<!-- 筛选菜单-->
56	<view class="content-wrap">	62	<view class="content-wrap">
57	<view>	63	<view>
58	<HMfilterDropdown	64	<HMfilterDropdown
59	:filterData="filterData"	65	:filterData="categoryList"
60	:defaultSelected="filterDropdownValue"	66	:defaultSelected="filterDropdownValue"
61	:updateMenuName="true"	67	:updateMenuName="true"
62	@confirm="confirm"	68	@search="search"
		69	@getList="getList"
63	data-format="Object"	70	data-format="Object"
64	></HMfilterDropdown>	71	></HMfilterDropdown>
65	<!-- 商品列表 -->	72	<!-- 商品列表 -->
66	<view class="goods-list">	73	<view class="goods-list">
67	<view class="product-list">	74	<view class="product-list">
68	<view class="product" v-for="(goods) in goodsList" :key="goods.id">	75	<view class="product" v-for="(goods) in goodsList" :key="goods.id">
69	<Card :goods="goods"></Card>	76	<Card :goods="goods"></Card>
70	</view>	77	</view>
71	</view>	78	</view>
72	<view class="loading-text">{{loadingText}}</view>	79	<view class="loading-text">{{loadingText}}</view>
73	</view>	80	</view>
74	</view>	81	</view>
75	</view>	82	</view>
76	</view>	83	</view>
77	</template>	84	</template>
78		85
79	<script>	86	<script>
80	import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";	87	import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
81	import Card from "@/components/CommodityCard/CommodityCard.vue";	88	import Card from "@/components/CommodityCard/CommodityCard.vue";
82	import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";	89	import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
83	import data from "@/common/data.js"; //筛选菜单数据	90	import data from "@/common/data.js"; //筛选菜单数据
84	import store from '@/store';	91	import store from '@/store';
85		92
86	export default {	93	export default {
87	components: {	94	components: {
88	UniDrawer: UniDrawer,	95	UniDrawer: UniDrawer,
89	HMfilterDropdown: HMfilterDropdown,	96	HMfilterDropdown: HMfilterDropdown,
90	Card: Card	97	Card: Card
91	},	98	},
92	data() {	99	data() {
93	return {	100	return {
94	screenItems: [	101	// screenItems: [
95	{ current: 0, text: "全部", hasIcon: false },	102	// { current: 0, text: "全部", hasIcon: false },
96	{ current: 1, text: "销量", hasIcon: false },	103	// { current: 1, text: "销量", hasIcon: false },
97	{ current: 2, text: "价格", hasIcon: true },	104	// { current: 2, text: "价格", hasIcon: true },
98	{ current: 3, text: "折扣", hasIcon: false },	105	// { current: 3, text: "折扣", hasIcon: false },
99	{ current: 4, text: "筛选", hasIcon: true }	106	// { current: 4, text: "筛选", hasIcon: true }
100	],	107	// ],
101	current: 0,	108	// current: 0,
102	showRight: false,	109	// showRight: false,
103	indexArr: "",	110	indexArr: "",
104	valueArr: "",	111	valueArr: "",
105	loadingText: "~~到底了~~",	112	loadingText: "~~到底了~~",
106	filterDropdownValue: [],	113	filterDropdownValue: [],
107	filterData: [],	114	filterData: [],
		115	searchText: '',
108	// goodsList:[	116	// goodsList:[
109	// { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },	117	// { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
110	// { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },	118	// { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
111	// { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },	119	// { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
112	// { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },	120	// { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
113	// { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },	121	// { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
114	// { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },	122	// { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
115	// { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },	123	// { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
116	// { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },	124	// { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
117	// { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },	125	// { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
118	// { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }	126	// { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
119	// ],	127	// ],
120	};	128	};
121	},	129	},
122	computed: {	130	computed: {
123	goodsList() {	131	goodsList() {
124	// 也可以从 getters 获取	132	// 也可以从 getters 获取
125	return this.$store.state.test.list;	133	return this.$store.state.index.list;
126	},	134	},
127	categoryList(){	135	categoryList(){
128	// console.log(this.$store.state.categoryOrder.categoryList);	136	return this.$store.state.index.categoryList;
129	const categoryList = this.$store.state.categoryOrder.categoryList
130	let newData = [
131	{
132	"name":'产品',
133	"type": 'filter',
134	"submenu": [{
135	"submenu": [
136
137	]
138	},
139	],
140	},
141	{
142	"name":'品牌',
143	"type": 'filter',
144	"submenu": [{
145	"submenu": [
146	]
147	},
148	]
149	},
150	{
151	"name":'使用场景',
152	"type": 'filter',
153	"submenu": [{
154	"submenu": [
155	]
156	}
157	]
158	},
159	{
160	"name":'材质',
161	"type": 'filter',
162	"submenu": [{
163	"submenu": [
164	]
165	}
166	]
167	},
168	{
169	"name":'筛选',
170	"type": 'filter',
171	"submenu": [{
172	// "name": "折扣(多选)",
173	"submenu": [
174	]
175	}
176	]
177	}
178	]
179	// newData[0].submenu[0].submenu = categoryList[0].submenu	137	// newData[0].submenu[0].submenu = categoryList[0].submenu
180	// newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu	138	// newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
181	// newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu	139	// newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
182	// newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu	140	// newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
183	// newData[4].submenu[0] = categoryList[3]	141	// newData[4].submenu[0] = categoryList[3]
184	this.filterData = newData;	142	this.filterData = newData;
185	// this.filterData = categoryList;	143	// this.filterData = categoryList;
186	}	144	},
187
188	},	145	},
189	filters: {	146	filters: {
190	outData(value) {	147	outData(value) {
191	return JSON.stringify(value);	148	return JSON.stringify(value);
192	}	149	}
193	},	150	},
194	onLoad: function() {	151	onLoad() {
195	store.dispatch('test/fetch');	152	console.log('onload')
196	store.dispatch('categoryOrder/fetch')	153	store.dispatch('index/category');
197		154	// this.getList();
198	// 登陆	155	store.dispatch('index/list');
199	// store.dispatch('user/login')
200
201	},	156	},
202	methods: {	157	methods: {
203	showDrawer(e) {	158	showDrawer(e) {
204	this.$refs[e].open();	159	this.$refs[e].open();
205	},	160	},
		161	getList() {
		162	store.dispatch('index/list');
		163	},
		164	// search(params) {
		165	// this.$store.index.
		166	// },
206	closeDrawer(e) {	167	closeDrawer(e) {
207	this.$refs[e].close();	168	this.$refs[e].close();
208	},	169	},
209	change(e, type) {	170	change(e, type) {
210	this[type] = e;	171	this[type] = e;
211	},	172	},
212	onClickItem(e) {	173	onClickItem(e) {
213	if (this.current !== e) {	174	if (this.current !== e) {
214	this.current = e;	175	this.current = e;
215	}	176	}
216	},	177	},
217	dropDown() {	178	dropDown() {
218	console.log("下拉");	179	console.log("下拉");
219	},	180	},
		181	searchKey(e) {
		182	const { value: keyword } = e.detail;
		183	this.keyWords = keyword;
		184	console.log('e', e, keyword);
		185	store.dispatch('index/search', {
		186	params: {},
		187	keyword,
		188	});
		189	},
220	//接收菜单结果	190	//接收菜单结果
221	confirm(e) {	191	search(e) {
222	this.indexArr = e.index;	192	console.log("修改菜单-----", e, this.categoryList);
223	this.valueArr = e.value;	193	const { on, value, index } = e;
224	return;	194	let params = {}
225	console.log("修改菜单");	195	if(on[0] === 1) {
226	this.filterData[4].submenu[1] = {	196	this.searchText = '';
227	name: "项目2",	197	store.dispatch('index/list');
228	submenu: []	198	} else {
229	};	199	for(let i = 1; i<=on.length; i++){ // on[0]是全部
		200	if(on[i] === 1) { // 若该选项被选中
		201	console.log('---', `${this.categoryList[i].value}`);
		202	params[`${this.categoryList[i].value}`] = value[i][0];
		203	}
		204	}
		205	store.dispatch('index/search', {
		206	params,
		207	keyword: this.keyWords
		208	});
		209	}
230	}	210	}
231	},	211	},
232		212
233	};	213	};
234	</script>	214	</script>
235		215
236	<style lang="scss">	216	<style lang="scss">
237	.content {	217	.content {
238	display: flex;	218	display: flex;
239	flex-direction: column;	219	flex-direction: column;
240	align-items: center;	220	align-items: center;
241	justify-content: center;	221	justify-content: center;
242	background-color: #f7f6f6;	222	background-color: #f7f6f6;
243	}	223	}
244	.header {	224	.header {
245	display: flex;	225	display: flex;
246	flex-direction: column;	226	flex-direction: column;
247	align-items: center;	227	align-items: center;
248	justify-content: center;	228	justify-content: center;
249	background-color: #f7f6f6;	229	background-color: #f7f6f6;
250	height: 178rpx;	230	height: 178rpx;
251	width: 100%;	231	width: 100%;
252	z-index: 999;	232	z-index: 999;
253	position: fixed;	233	position: fixed;
254	top: 0;	234	top: 0;
255	left: 0;	235	left: 0;
256	}	236	}
257	.searchBar {	237	.searchBar {
258	width: 670rpx;	238	width: 670rpx;
259	display: flex;	239	display: flex;
260	justify-content: center;	240	justify-content: center;
261	align-items: center;	241	align-items: center;
262	box-sizing: border-box;	242	box-sizing: border-box;
263	padding: 0rpx 16rpx;	243	padding: 0rpx 16rpx;
264	border: 1px solid #ff6b4a;	244	border: 1px solid #ff6b4a;
265	border-radius: 8rpx;	245	border-radius: 8rpx;
266	background-color: #ffffff;	246	background-color: #ffffff;
267	}	247	}
268		248
269	.searchIpt {	249	.searchIpt {
270	height: 68rpx;	250	height: 68rpx;
271	width: 670rpx;	251	width: 670rpx;
272	padding: 16rpx;	252	padding: 16rpx;
273	font-size: 28rpx;	253	font-size: 28rpx;
274	box-sizing: border-box;	254	box-sizing: border-box;
275	}	255	}
276	.screenBar {	256	.screenBar {
277	width: 670rpx;	257	width: 670rpx;
278	height: 110rpx;	258	height: 110rpx;
279	display: flex;	259	display: flex;
280	flex-direction: row;	260	flex-direction: row;
281	justify-content: space-between;	261	justify-content: space-between;
282	align-items: center;	262	align-items: center;
283	color: #333333;	263	color: #333333;
284	font-size: 32rpx;	264	font-size: 32rpx;
285	}	265	}
286	.active {	266	.active {
287	color: #ff6b4a;	267	color: #ff6b4a;
288	}	268	}
289	.screenItem {	269	.screenItem {
290	display: flex;	270	display: flex;
291	justify-content: center;	271	justify-content: center;
292	align-items: center;	272	align-items: center;
293	}	273	}
294	.content-wrap {	274	.content-wrap {
295	width: 100%;	275	width: 100%;
296	background-color: #ffffff;	276	background-color: #ffffff;

src/store/modules/categoryOrder.js

View file @cc196c3

1	import urlAlias from '../url';		File was deleted
2	import request from '../request';
3
4	const {
5	category
6	} = urlAlias;
7
8	const state = {
9	categoryList: [],
10	};
11
12	const mutations = {
13	INIT: (state, categoryList) => {
14	state.categoryList = categoryList;
15	},
16	};
17
18	const actions = {
19	fetch({ commit }, param) {
20	request({
21	url: category,
22	success: (res) => {
23	commit('INIT', res.data.data)
24	},
25	fail: (res) => {
26	console.log("fail status === > ", res);
27	},
28	complete: (res) => {
29	console.log("complete status === > ", res);
30	},
31	})
32	},
33	};
34
35	export default {
36	namespaced: true,
37	state,
38	mutations,
39	actions,
40	};
41		1	import urlAlias from '../url';

src/store/modules/index.js

Diff comments View file @5214ca9

File was created	1	import urlAlias from '../url';
	2	import request from '../request';
	3
	4	const {
	5	category,
	6	shopList,
	7	search,
	8	} = urlAlias;
	9
	10	const state = {
	11	categoryList: [],
	12	list: [],
	13	};
	14
	15	const mutations = {
	16	LIST: (state, list) => {
	17	state.list = list;
	18	},
	19	CATEGORY: (state, categoryList) => {
	20	state.categoryList = categoryList;
	21	},
	22	};
	23
	24	const actions = {
	25	category({ commit }, param) {
	26	request({
	27	url: category,
	28	success: (res) => {
	29	console.log('category', res);
	30	let data = res.data.data;
	31	for(let i = 0; i<=data.length; i++) {
	32	if(data[i] && data[i].type !== 'filter'){
	33	data[i].type = 'hierarchy';
	34	}
	35	}
	36	data.unshift({
	37	type: "hierarchy",
	38	name: "全部",
	39	value: "all",
	40	isNoPull: true,
	41	});
	42	commit('CATEGORY', data);
	43	},
	44	fail: (res) => {
	45	console.log("fail status === > ", res);
	46	},
	47	complete: (res) => {
	48	console.log("complete status === > ", res);
	49	},
	50	})
	51	},
	52	list({ commit }, param) {
	53	request({
	54	url: shopList,
	55	success: (res) => {
	56	commit('LIST', res.data.data)
	57	},
	58	fail: (res) => {
	59	console.log("fail status === > ", res);
	60	},
	61	complete: (res) => {
	62	console.log("complete status === > ", res);
	63	},
	64	})
	65	},
	66	search({ commit }, { params, keyword }) {
	67	const uid = uni.getStorageSync('uid');
	68	console.log("params",params, keyword);
	69	request({
	70	url: search,
	71	data: {
	72	params: JSON.stringify(params),
	73	uid,
	74	way: 1,
	75	keyword,
	76	},
	77	success: (res) => {
	78	commit('LIST', res.data.data);
	79	},
	80	fail: (res) => {
	81	console.log("fail status === > ", res);
	82	},
	83	complete: (res) => {
	84	console.log("complete status === > ", res);
	85	},
	86	})
	87	}
	88	};
	89
	90	export default {
	91	namespaced: true,
	92	state,
	93	mutations,
	94	actions,
	95	};
	96

src/store/modules/user.js

Diff comments View file @5214ca9

 import urlAlias from '../url';
 import request from '../request';
 const {
   login,
   getUserInfo,
 } = urlAlias;
 const state = {
   fromInfo: {
 		loginQueryInfo: {},
     fromuid: 0,
     fromsid: 0,
     frompid: 0,
     scene: 1001,
   },
   userInfo: {
     uid: 1,
     openid: '',
     nickName: '',
     headerphoto: '',
   }
 };
 const mutations = {
   FROM: (state, data) => {
     state.formInfo = data;
   },
   UPDATE: (state, data) => {
     state.userInfo = data;
   }
 };
 const actions = {
   // 登陆
   login({ commit }, param) {
     const {
       frompid = undefined,
       fromsid = undefined,
       fromuid = undefined,
       scene = 1001 ,
     } = param || {};
     uni.login({
       provider: 'weixin',
       success: function (loginRes) {
         console.log('login',loginRes);
         request({
           url: login,
           data: {
             app_uid: 2020,
             code: loginRes.code,
             frompid,
             fromsid,
             fromuid,
           },
           success: (res) => {
             const { data: { session_key, openid} } = res;
             console.log('res', res)
             // 写入缓存
             uni.setStorageSync('session_key', session_key);
             uni.setStorageSync('openid', openid);
             request({
               url: getUserInfo,
               data: {
                 app_uid: 2020,
                 frompid,
                 fromsid,
                 fromuid,
                 openid,
                 scene,
               },
               success: (res) => {
                 console.log('userInfo=====', res);
                 const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
+                uni.setStorageSync('uid', uid);
                 const userInfo = {
                   uid,
                   openid,
                   nickName,
                   headerphoto,
                 }
                 commit("UPDATE", userInfo)
               }
             })
           }
         })
       }
     });
   },
   setFrom({ commit }, param) {
     commit("FROM", param);
   },
   getUserInfo( { commit }, param) {
     const {
       frompid = undefined,
       fromsid = undefined,
       fromuid = undefined,
       scene = 1001 ,
     } = param || {};
     // 写入缓存
     const openid = uni.getStorageSync('openid', openid);
     request({
       url: getUserInfo,
       data: {
         app_uid: 2020,
         frompid,
         fromsid,
         fromuid,
         openid,
         scene,
       },
       success: (res) => {
         console.log('userInfo=====', res);
         const { data: { data: { uid, username: nickName, openid, headerphoto } } } = res;
+        uni.setStorageSync('uid', uid);
         const userInfo = {
           uid,
           openid,
           nickName,
           headerphoto,
         }
         commit("UPDATE", userInfo)
       }
     })
   },
 }
 export default {
   namespaced: true,
   state,
   mutations,
   actions,
 }

src/store/request.js

Diff comments View file @5214ca9

 const DOMAIN = 'https://api.glass.xiuyetang.com';
 export default async function request({
     url,
     method = "post",
     data = {},
     header = {
         "Content-Type": "application/x-www-form-urlencoded",
     },
     timeout = 3000,
     withCredentials = false, // 跨域请求时是否携带凭证（cookies）
     // sslVerify: true, // 验证 ssl 证书
     success,
     fail = (res) => {
       console.log("fail status === > ", res);
     },
     complete = (res) => {
       console.log("complete status === > ", res);
     },
 }) {
-    console.log("DOMAIN", DOMAIN, url);
     uni
      .request({
          url: DOMAIN + url,
          method,
          data,
          header,
          timeout,
          withCredentials,
          success,
          fail,
          complete,
      })
 }

src/store/url.js

Diff comments View file @5214ca9

 const urlAlias = {
-    // 获取首页商品列表
+  // 获取商品信息
-    shopList: '/app/prod/list',
+  read: '/app/prod/read',
-    // 获取首页商品列表
-    category: '/app/prod/category2',
-    // 获取商品信息
-    read: '/app/prod/read',
   // 首页
   shopList: '/app/prod/list', // 获取首页商品列表
-  category: '/app/prod/category', // 获取首页商品分类
+  category: '/app/prod/category2', // 获取首页商品分类
+  search: '/app/prod/search', // 首页搜索商品
   // 登陆
   login: '/app/glass/getOpenId', // 登陆
   getUserInfo: '/app/glass/userinfo', // 获取用户信息
   // 我的订单
   orderList: '/app/order/list', // 获取订单列表
 	// 购物车
 	cartList: '/app/cart/list', // 获取购物车列表
 	cartModi: '/app/cart/modi', // 修改购物车
 	cartDel: '/app/cart/del', // 删除购物车
 	cartAdd: '/app/cart/add',// 添加购物车
 	// 我的
   recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
   // 镜框选购页
   detailStandardList: '/app/prod/read', //获取商品的详细信息
 }
 export default  urlAlias;