Adam / gulu-vue

Commit f0cf57997c2438808bb572407021a3e3a18ee0fb

Authored by BigBoss 5 years ago

Exists in master

合并冲突

src/App.vue

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/CommodityCard/CommodityCard.vue

Diff comments View file @f0cf579

1	<template>	1	<template>
2	<view class="card" @tap="toGoods(goods.id,goods.goodType)">	2	<view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.goodType?goods.goodType:goods.p_root_index)">
3	<image mode="widthFix" :src="goods.imgurl" ></image>	3	<image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image>
4	<view class="name">{{goods.name}}</view>	4	<view class="name">{{goods.name?goods.name:goods.p_name}}</view>
5	<view class="info">	5	<view class="info">
6	<view class="priceBox">	6	<view class="priceBox">
7	<view class="price">{{goods.price}}</view>	7	<view class="price">{{goods.price?goods.price:goods.real_price}}</view>
8	<view class="originCost">	8	<view class="originCost">
9	{{goods.rsSon.Max_Price}}	9	{{goods.rsSon.Max_Price?goods.rsSon.Max_Price:goods.old_price}}
10	</view>	10	</view>
11	</view>	11	</view>
12	<view class="trade_num">{{goods.trade_num}}人购买</view>	12	<view class="trade_num">{{goods.trade_num}}人购买</view>
13	</view>	13	</view>
14	</view>	14	</view>
15	</template>	15	</template>
16		16
17	<script>	17	<script>
18	export default {	18	export default {
19	props: {	19	props: {
20	/**	20	/**
21	* 商品数据	21	* 商品数据
22	*/	22	*/
23	goods: {	23	goods: {
24	id: Number,	24	id: Number,
25	imgurl: String,	25	imgurl: String,
26	name: String,	26	name: String,
27	rsSon:Object,	27	rsSon:Object,
28	originCost:String,	28	originCost:String,
29	price: String,	29	price: String,
30	trade_num:String,	30	trade_num:String,
31	goodType:String,	31	goodType:String,
32	}	32	}
33		33
34	},	34	},
35	created() {	35	created() {
36	// console.log(this.goods)	36	// console.log(this.goods)
37	},	37	},
38	data() {	38	data() {
39	return {	39	return {
40		40
41	};	41	};
42	},	42	},
43	methods:{	43	methods:{
44	toGoods(id,type){	44	toGoods(id,type){
45	uni.navigateTo({	45	uni.navigateTo({
46	url: `../frameDetail/frameDetail?oderId=`+id,	46	url: `../frameDetail/frameDetail?oderId=`+id,
47	success: res => {},	47	success: res => {},
48	fail: () => {},	48	fail: () => {},
49	complete: () => {}	49	complete: () => {}
50	});	50	});
51	console.log('toGoods =====> id:'+id +"======>type:"+type)	51	console.log('toGoods =====> id:'+id +"======>type:"+type)
52	switch(type){	52	switch(type){
53	case 1:	53	case 1:
54	uni.navigateTo({	54	uni.navigateTo({
55	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,	55	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
56	success: res => {},	56	success: res => {},
57	fail: () => {},	57	fail: () => {},
58	complete: () => {}	58	complete: () => {}
59	});	59	});
60	break;	60	break;
61	case 2:	61	case 2:
62	uni.navigateTo({	62	uni.navigateTo({
63	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,	63	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
64	success: res => {},	64	success: res => {},
65	fail: () => {},	65	fail: () => {},
66	complete: () => {}	66	complete: () => {}
67	});	67	});
68	break;	68	break;
69	case 3:	69	case 3:
70	uni.navigateTo({	70	uni.navigateTo({
71	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,	71	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
72	success: res => {},	72	success: res => {},
73	fail: () => {},	73	fail: () => {},
74	complete: () => {}	74	complete: () => {}
75	});	75	});
76	break;	76	break;
77	case 4:	77	case 4:
78	uni.navigateTo({	78	uni.navigateTo({
79	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,	79	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
80	success: res => {},	80	success: res => {},
81	fail: () => {},	81	fail: () => {},
82	complete: () => {}	82	complete: () => {}
83	});	83	});
84	break;	84	break;
85	default :	85	default :
86	break	86	break
87	}	87	}
88	}	88	}
89	}	89	}
90	}	90	}
91	</script>	91	</script>
92		92
93	<style lang="scss">	93	<style lang="scss">
94	image{	94	image{
95	width: 100%;	95	width: 100%;
96	height: 120rpx;	96	height: 120rpx;
97	}	97	}
98	.name{	98	.name{
99	width: 92%;	99	width: 92%;
100	height: 54rpx;	100	height: 54rpx;
101	padding: 5px 4%;	101	padding: 5px 4%;
102	display: -webkit-box;	102	display: -webkit-box;
103	-webkit-box-orient: vertical;	103	-webkit-box-orient: vertical;
104	-webkit-line-clamp: 2;	104	-webkit-line-clamp: 2;
105	text-align: justify;	105	text-align: justify;
106	overflow: hidden;	106	overflow: hidden;
107	font-size: 24rpx;	107	font-size: 24rpx;
108	color: #333333;	108	color: #333333;
109	}	109	}
110	.info{	110	.info{
111	display: flex;	111	display: flex;
112	justify-content: space-between;	112	justify-content: space-between;
113	align-items: center;	113	align-items: center;
114	width: 92%;	114	width: 92%;
115	padding: 5px 4% 5px 4%;	115	padding: 5px 4% 5px 4%;
116	.priceBox{	116	.priceBox{
117	display: flex;	117	display: flex;
118	justify-content: space-between;	118	justify-content: space-between;
119	align-items: center;	119	align-items: center;
120	.price{	120	.price{
121	color: #EB5D3B;	121	color: #EB5D3B;
122	font-size: 28rpx;	122	font-size: 28rpx;
123	font-weight: 600;	123	font-weight: 600;
124	margin-right: 10rpx;	124	margin-right: 10rpx;
125	}	125	}
126	.originCost{	126	.originCost{
127	text-decoration:line-through;	127	text-decoration:line-through;
128	color: #999999;	128	color: #999999;
129	font-size: 20rpx;	129	font-size: 20rpx;
130	}	130	}
131		131
132	}	132	}
133	.trade_num{	133	.trade_num{
134	color: #999999;	134	color: #999999;
135	font-size: 20rpx;	135	font-size: 20rpx;
136	}	136	}
137	}	137	}
138	</style>	138	</style>

src/components/HMFilterDropdown/HMFilterDropdown.vue

Diff comments View file @f0cf579

 <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/components/UniSliper/UniSliper.vue

Diff comments View file @f0cf579

1	<template>	1	<template>
2	<div class="c-progress">	2	<div class="c-progress">
3	<div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">	3	<div class="c-progress-outer" :style="setProgressBgStyle" ref="progress">
4	<div class="c-progress-inner" :style="setProgressStyle"></div>	4	<div class="c-progress-inner" :style="setProgressStyle"></div>
5	<div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>	5	<div v-if="showSlider" class="c-progress-slider" ref="slider" :style="setSliderStyle"></div>
6	</div>	6	</div>
7	<span v-if="showPerText">{{stand_width}}mm</span>	7	<span v-if="showPerText">{{stand_width}}mm</span>
8	</div>	8	</div>
9	</template>	9	</template>
10		10
11	<script>	11	<script>
12	// 使用了element的颜色	12	// 使用了element的颜色
13	const colorTable = {	13	const colorTable = {
14	success: '#13ce66',	14	success: '#13ce66',
15	fail: '#ff4949',	15	fail: '#ff4949',
16	warning: '#e6a23c',	16	warning: '#e6a23c',
17	default: '#409EFF'	17	default: '#409EFF'
18	}	18	}
19	export default {	19	export default {
20	name: 'CProgress',	20	name: 'CProgress',
21	props: {	21	props: {
22	percent: {	22	percent: {
23	type: Number,	23	type: Number,
24	default: 60	24	default: 60
25	},	25	},
26	showSlider: {	26	showSlider: {
27	type: Boolean,	27	type: Boolean,
28	default: true	28	default: true
29	},	29	},
30	showPerText: {	30	showPerText: {
31	type: Boolean,	31	type: Boolean,
32	default: true	32	default: true
33	},	33	},
34	// 进度条的宽度	34	// 进度条的宽度
35	width: {	35	width: {
36	type: Number,	36	type: Number,
37	default: 300	37	default: 300
38	},	38	},
39	bgColor: {	39	bgColor: {
40	type: String,	40	type: String,
41	default: '#ebeef5'	41	default: '#ebeef5'
42	},	42	},
43	progressColor: {	43	progressColor: {
44	type: String,	44	type: String,
45	default: '#409EFF'	45	default: '#409EFF'
46	},	46	},
47	// 滑块的宽度	47	// 滑块的宽度
48	sliderWidth: {	48	sliderWidth: {
49	type: Number,	49	type: Number,
50	default: 20	50	default: 20
51	},	51	},
52	// 颜色的类型	52	// 颜色的类型
53	type: {	53	type: {
54	type: String,	54	type: String,
55	default: colorTable.default	55	default: colorTable.default
56	},	56	},
57	//规格长度	57	//规格长度
58	standard:{	58	standard:{
59	type: Number,	59	type: Number,
60	default: 1.4	60	default: 1.4
61	},	61	},
62	//初始长度	62	//初始长度
63	stand_width:{	63	stand_width:{
64	type: Number,	64	type: Number,
65	default: 0	65	default: 0
66	}	66	}
67	},	67	},
68	data () {	68	data () {
69	return {	69	return {
70	sliderLeft: 0, // 滑块相对父元素发x坐标	70	sliderLeft: 0, // 滑块相对父元素发x坐标
71	progressWidth: 0, // 进度条当前的的宽度	71	progressWidth: 0, // 进度条当前的的宽度
72	tempPercent: 0,	72	tempPercent: 0,
73	}	73	}
74	},	74	},
75	computed: {	75	computed: {
76	// 设置进度条的背景样式	76	// 设置进度条的背景样式
77	setProgressBgStyle () {	77	setProgressBgStyle () {
78	return {	78	return {
79	// 加上滑块的宽度	79	// 加上滑块的宽度
80	width: `${this.width + this.sliderWidth}px`	80	width: `${this.width + this.sliderWidth}px`
81	}	81	}
82	},	82	},
83	// 设置进度条的样式	83	// 设置进度条的样式
84	setProgressStyle () {	84	setProgressStyle () {
85	const color = colorTable[this.type] \|\| this.progressColor	85	const color = colorTable[this.type] \|\| this.progressColor
86	return {	86	return {
87	width: `${this.progressWidth}px`,	87	width: `${this.progressWidth}px`,
88	background: color	88	background: color
89	}	89	}
90	},	90	},
91	// 设置滑块的样式	91	// 设置滑块的样式
92	setSliderStyle () {	92	setSliderStyle () {
93	const color = colorTable[this.type] \|\| this.progressColor	93	const color = colorTable[this.type] \|\| this.progressColor
94	return {	94	return {
95	border: `1px solid ${color}`,	95	border: `1px solid ${color}`,
96	width: `${this.sliderWidth}px`,	96	width: `${this.sliderWidth}px`,
97	height: `${this.sliderWidth}px`,	97	height: `${this.sliderWidth}px`,
98	left: `${this.sliderLeft}px`	98	left: `${this.sliderLeft}px`
99	}	99	}
100	}	100	}
101	},	101	},
102	mounted () {	102	mounted () {
103	this.sliderLeft = this.width / 100 * this.percent	103	this.sliderLeft = this.width / 100 * this.percent
104	this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度	104	this.progressWidth = this.sliderLeft + this.sliderWidth // 滑块的x坐标加上滑块的宽度
105	this.tempPercent = this.percent	105	this.tempPercent = this.percent
106	this.addListener()	106	this.addListener()
107	},	107	},
108	methods: {	108	methods: {
109	addListener () {	109	addListener () {
110	const slider = this.$refs.slider	110	const slider = this.$refs.slider
111	const progress = this.$refs.progress	111	const progress = this.$refs.progress
112	let isClickSlider = false	112	let isClickSlider = false
113	let distance = 0 // 滑块与点击坐标的绝对距离	113	let distance = 0 // 滑块与点击坐标的绝对距离
114	progress.onclick = (e) => {	114	progress.onclick = (e) => {
115	// 阻止事件冒泡	115	// 阻止事件冒泡
116	if (e.target == slider) {	116	if (e.target == slider) {
117	return	117	return
118	}	118	}
119	let curX = progress.offsetLeft	119	let curX = progress.offsetLeft
120	this.sliderLeft = e.pageX - curX	120	this.sliderLeft = e.pageX - curX
121	if (this.sliderLeft <= 0) {	121	if (this.sliderLeft <= 0) {
122	this.sliderLeft = 0	122	this.sliderLeft = 0
123	}	123	}
124	if (this.sliderLeft >= this.width) {	124	if (this.sliderLeft >= this.width) {
125	this.sliderLeft = this.width	125	this.sliderLeft = this.width
126	}	126	}
127	this._countCurPercent()	127	this._countCurPercent()
128	}	128	}
129	// slider.onmousedown = (e) => {	129	// slider.onmousedown = (e) => {
130	// isClickSlider = true	130	// isClickSlider = true
131	// let curX = slider.offsetLeft	131	// let curX = slider.offsetLeft
132	// distance = e.pageX - curX // 得出绝对距离	132	// distance = e.pageX - curX // 得出绝对距离
133	// }	133	// }
134	progress.onmousemove = (e) => {	134	progress.onmousemove = (e) => {
135	if (isClickSlider) {	135	if (isClickSlider) {
136	// 判断是否已经超出进度条的长度	136	// 判断是否已经超出进度条的长度
137	if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {	137	if ((e.pageX - distance) >= 0 && (e.pageX - distance) <= (this.width - 0)) {
138	this.sliderLeft = e.pageX - distance	138	this.sliderLeft = e.pageX - distance
139	this._countCurPercent()	139	this._countCurPercent()
140	}	140	}
141	}	141	}
142	}	142	}
143	progress.onmouseup = () => {	143	progress.onmouseup = () => {
144	isClickSlider = false	144	isClickSlider = false
145	}	145	}
146	},	146	},
147	// 算出百分比	147	// 算出百分比
148	_countCurPercent () {	148	_countCurPercent () {
149	this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))	149	this.tempPercent = Math.ceil(parseInt(this.sliderLeft / this.width * 100))
150	this.progressWidth = this.sliderLeft + 20	150	this.progressWidth = this.sliderLeft + 20
151	// 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整	151	// 取整的时候宽度可能不为0，所以在0和100的时候也将宽度取整
152	if (this.tempPercent <= 0) {	152	if (this.tempPercent <= 0) {
153	this.progressWidth = 0	153	this.progressWidth = 0
154	this.sliderLeft = 0	154	this.sliderLeft = 0
155	}	155	}
156	if (this.tempPercent >= 100) {	156	if (this.tempPercent >= 100) {
157	this.progressWidth = this.width + 20	157	this.progressWidth = this.width + 20
158	this.sliderLeft = this.width	158	this.sliderLeft = this.width
159	}	159	}
160	this.stand_width = this.tempPercent*this.standard	160	this.stand_width = this.tempPercent*this.standard
161	this.stand_width = parseInt(this.stand_width/1) //取整	161	this.stand_width = parseInt(this.stand_width/1) //取整
162	this.$emit('percentChange', this.tempPercent)	162	this.$emit('percentChange', this.tempPercent)
163	}	163	}
164	}	164	}
165	}	165	}
166	</script>	166	</script>
167		167
168	<style scoped lang="scss">	168	<style scoped lang="scss">
169	.c-progress {	169	.c-progress {
170	$width: 300px;	170	$width: 400rpx;
171	$radius: 5px;	171	$radius: 5px;
172	display: flex;	172	display: flex;
173	align-items: center;	173	align-items: center;
174		174
175	span {	175	span {
176	margin-left: 5px;	176	margin-left: 5px;
177	font-size: 14px;	177	font-size: 14px;
178	color: #666;	178	color: #666;
179	}	179	}
180		180
181	.c-progress-outer {	181	.c-progress-outer {
182	width: $width;	182	width: $width;
183	height: 10px;	183	height: 10px;
184	background: #ebeef5;	184	background: #ebeef5;
185	position: relative;	185	position: relative;
186	display: flex;	186	display: flex;
187	align-items: center;	187	align-items: center;
188		188
189	.c-progress-inner {	189	.c-progress-inner {
190	width: 100px;	190	width: 100rpx;
191	height: 10px;	191	height: 10px;
192	background: #409EFF;	192	background: #FF6B4A ;
193	}	193	}
194		194
195	.c-progress-slider {	195	.c-progress-slider {
196	width: 20px;	196	width: 20px;
197	height: 20px;	197	height: 20px;
198	border-radius: 50%;	198	border-radius: 50%;
199	background: #fff;	199	background: #fff;
200	border: 1px solid #409EFF;	200	border: 1px solid #FF6B4A ;
201	position: absolute;	201	position: absolute;
202	z-index: 10;	202	z-index: 10;
203	left: 10px;	203	left: 10px;
204	}	204	}
205	}	205	}
206	}	206	}
207	</style>	207	</style>

src/pages/cart/cart.vue

Diff comments View file @f0cf579

1	<template>	1	<template>
2	<view class="content">	2	<view class="content">
3		3	<block v-if="cartList.length==0">
4	<view class="card">
5	<view class="cardHeader">
6	<block v-if="pIsoPen">
7	<view class="partentChecked" @click="pChange(pIsoPen)">
8	<span class="status correct"></span>
9	</view>
10	</block>
11	<block v-else>
12	<view class="partentCheck" @click="pChange(pIsoPen)"></view>
13	</block>
14	<image src="../../static/store.png" mode="aspectFill"></image>
15	<text>非常戴镜</text>
16	</view>
17		4
18	<view class="cardBody">	5	</block>
19	<template v-if="childIsOpen.child1">	6	<block v-else>
20	<view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">	7	<view class="card">
21	<span class="status correct"></span>	8	<view class="cardHeader">
		9	<view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
		10	@click="pChange(pIsoPen)">
		11	<span class="correct"></span>
22	</view>	12	</view>
23	</template>	13	<image src="../../static/store.png" mode="aspectFill"></image>
24	<template v-else>	14	<text>非常戴镜</text>
25	<view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>	15	</view>
26	</template>	16
27	<view class="goodInfo">	17	<view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
28	<view class="imageWrap">	18	@longpress="delCart(item.cart_id,index)">
29	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>	19	<view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
		20	@click="Change(childIsOpen[index],index)">
		21	<span class="correct"></span>
30	</view>	22	</view>
31	<view class="infoRight">	23	<view class="goodInfo">
32	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>	24	<view class="imageWrap">
33	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>	25	<image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
34	<view class="icon"></view>
35	</view>	26	</view>
36	<view class="priceBox">	27	<view class="infoRight">
37	<view class="price">￥{{198}}</view>	28	<view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
38	<text>(限购{{maxCount}}副)</text>	29	<view class="describ" @tap="toshop(item.pid,item.p_root_index)">
39	<view class="counter">	30	<text>
40	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>	31	<block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
41	<text>{{count}}</text>	32	{{tag.label+`  `}}
42	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>	33	</block>
		34	</text>
		35	<view class="icon"></view>
		36	</view>
		37	<view class="priceBox">
		38	<view class="price">￥{{item.nowPrice*item.num}}</view>
		39	<text>(限购{{maxCount}}副)</text>
		40	<view class="counter">
		41	<view class="btn" disabled="this.addDisabled" type="default"
		42	@click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
		43	<text>{{item.num}}</text>
		44	<view class="btn" disabled="this.desDisabled" type="default"
		45	@click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
		46	</view>
43	</view>	47	</view>
44	</view>	48	</view>
45	</view>	49	</view>
46	</view>	50	</view>
47	</view>	51	</view>
48	<view class="cardBody">	52	</block>
49	<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
50	<template v-if="childIsOpen.child2">
51	<view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
52	<span class="status correct"></span>
53	</view>
54	</template>
55	<template v-else>
56	<view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
57	</template>
58	<view class="goodInfo">
59	<view class="imageWrap">
60	<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
61	</view>
62	<view class="infoRight">
63	<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
64	<view class="describ"><text>颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 … </text>
65	<view class="icon"></view>
66	</view>
67	<view class="priceBox">
68	<view class="price">￥198</view>
69	<text>(限购{{maxCount}}副)</text>
70	<view class="counter">
71	<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
72	<text>{{count}}</text>
73	<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
74	</view>
75	</view>
76	</view>
77	</view>
78	</view>
79	</view>
80
81	<view class="footer">	53	<view class="footer">
82	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>	54	<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
83	<view class="footerRight">	55	<view class="footerRight">
84	<navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">	56	<navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
85	<view class="paybtn">立即支付</view>	57	<view class="paybtn" >立即结算</view>
86	</navigator>	58	</navigator>
87	</view>	59	</view>
88	</view>	60	</view>
89		61
90	</view>	62	</view>
91	</template>	63	</template>
92		64
93	<script>	65	<script>
94	import store from '@/store';	66	import store from '@/store';
95		67
96	export default {	68	export default {
97		69
98	data() {	70	data() {
99	return {	71	return {
100	totalPrice: 360,	72	totalPrice: 0,
101	count:1,	73	pIsoPen:false,
		74	// childIsOpen:[],
102	maxCount:20,	75	maxCount:20,
103	pIsoPen: false,
104	childIsOpen:{
105	"child1":true,
106	"child2":true
107	},
108	}	76	}
109	},	77	},
110	computed:{	78	computed:{
		79
111	cartList() {	80	cartList() {
112	// 也可以从 getters 获取	81	// console.log('cart-list', this.$store.state.cart.cartList);
113	console.log('cart-list', this.$store.state.cart.cartList);
114	return this.$store.state.cart.cartList;	82	return this.$store.state.cart.cartList;
		83	},
		84	childIsOpen(){
		85	let temp=[];
		86	temp.length=this.$store.state.cart.cartList.length;
		87	for (let i = 0; i < temp.length; i++) {
		88	temp[i]= false
		89	}
		90	console.log('this.childisOPne===>',temp)
		91	return temp
115	}	92	}
116	},	93	},
117	onLoad: function() {	94	onLoad: function() {
		95	// 判断是否授权
		96	// uni.getSetting({
		97	// success(res) {
		98	// console.log('authSetting',res.authSetting)
		99	// if(res.authSetting['scope.userInfo'] !== true) {
		100
		101	// uni.switchTab({
		102	// url:'/pages/user/user'
		103	// })
		104	// }else {
		105	// }
		106	// }
		107	// })
		108
		109	// console.log('usr-my',this.$store.state.user.userInfo)
		110	// store.dispatch('cart/addCart',{
		111	// "num":1,
		112	// "pid": 7,//产品id
		113	// "uid":1,
		114	// "sk_id": 72,
		115	// "price": 120,
		116	// "mp_id":1,
		117	// "checkedSKU":{
		118	// "discount": "45",
		119	// "in_price": "6000",
		120	// "kc": "0",
		121	// "model_pic": null,
		122	// "out_price": 191.8,
		123	// "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
		124	// "pid": "7",
		125	// "real_price": 99,
		126	// "sk_id": "89",
		127	// "sku_name": "1.56非球面防蓝光_黑",
		128	// "sku_shop_value": "",
		129	// "sku_value": "58_61",
		130	// "status": "1",
		131	// },
		132	// });
118	store.dispatch('cart/getCartList',{	133	store.dispatch('cart/getCartList',{
119	uid: 1, //用户id	134	uid: 1, //用户id
120	});	135	});
121	},	136	},
		137
122	methods: {	138	methods: {
123	counter(isadd){	139	// 跳转到对应的选购页面
		140	toshop(id,type){
		141	console.log('===',id,type)
		142	switch(type){
		143	case 1:
		144	uni.navigateTo({
		145	url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
		146	success: res => {},
		147	fail: () => {},
		148	complete: () => {}
		149	});
		150	break;
		151	case 2:
		152	uni.navigateTo({
		153	url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
		154	success: res => {},
		155	fail: () => {},
		156	complete: () => {}
		157	});
		158	break;
		159	case 3\|\|4:
		160	uni.navigateTo({
		161	url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
		162	success: res => {},
		163	fail: () => {},
		164	complete: () => {}
		165	});
		166	break;
		167	// case 4:
		168	// uni.navigateTo({
		169	// url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
		170	// success: res => {},
		171	// fail: () => {},
		172	// complete: () => {}
		173	// });
		174	case 5:
		175	uni.navigateTo({
		176	url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
		177	success: res => {},
		178	fail: () => {},
		179	complete: () => {}
		180	});
		181	break;
		182	default :
		183	break
		184	}
		185	},
		186	toGoods(id,type){
		187	uni.navigateTo({
		188	url: `../frameDetail/frameDetail?oderId=`+id,
		189	success: res => {},
		190	fail: () => {},
		191	complete: () => {}
		192	});
		193	console.log('toGoods =====> id:'+id +"======>type:"+type)
		194	switch(type){
		195	case 1:
		196	uni.navigateTo({
		197	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
		198	success: res => {},
		199	fail: () => {},
		200	complete: () => {}
		201	});
		202	break;
		203	case 2:
		204	uni.navigateTo({
		205	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
		206	success: res => {},
		207	fail: () => {},
		208	complete: () => {}
		209	});
		210	break;
		211	case 3:
		212	uni.navigateTo({
		213	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
		214	success: res => {},
		215	fail: () => {},
		216	complete: () => {}
		217	});
		218	break;
		219	case 4:
		220	uni.navigateTo({
		221	url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type,
		222	success: res => {},
		223	fail: () => {},
		224	complete: () => {}
		225	});
		226	break;
		227	default :
		228	break
		229	}
		230	},
		231
		232	counter(index,isadd,mp_id,sk_id,num,cart_id){
		233	// console.log('===>>counter ===>num',num)
		234	// console.log('===>>counter ===>isadd',isadd)
		235	num=parseInt(num);
124	if(isadd){	236	if(isadd){
125	this.count >= this.maxCount? this.addDisabled = true:this.count++;	237	if(num>=this.maxCount){
		238	this.addDisabled = true
		239	} else{
		240	this.addDisabled= true
		241	// 修改num
		242	store.dispatch('cart/modiCart',{
		243	uid: 1,
		244	// openid: '',
		245	mp_id: mp_id,
		246	sk_id: sk_id,
		247	cart_id:cart_id,
		248	num:num+1,
		249	args:{
		250	index:index,
		251	isadd:isadd,
		252	}
		253	})
		254	this.addDisabled= false
		255	}
		256	}else{
		257	if(num<=1){
		258	this.desDisabled = true
		259	} else{
		260	this.desDisabled = false
		261	// post 请求修改相关参数
		262	store.dispatch('cart/modiCart',{
		263	uid: 1,
		264	// openid: '',
		265	mp_id: mp_id,
		266	sk_id: sk_id,
		267	cart_id:cart_id,
		268	num:num-1,
		269	args:{
		270	index:index,
		271	isadd:isadd,
		272	}
		273	})
		274	this.desDisabled = true
		275	}
		276	}
		277	},
		278
		279	Change(isopen,indexC){
		280	// console.log('lalla===>',isopen)
		281	this.childIsOpen[indexC]=!isopen
		282	if(!isopen){
		283	this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
126	}else{	284	}else{
127	this.count <= 1? this.desDisabled = true:this.count--;	285	this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice)
		286	}
		287	let m=true;
		288	for (let i = 0; i < this.childIsOpen.length; i++) {
		289	m=m&this.childIsOpen[i]
		290	}
		291	if(m==1){
		292	this.pIsoPen=true
		293	} else{
		294	this.pIsoPen=false
128	}	295	}
129	},	296	},
130	pChange(isopen){	297	pChange(isopen){
131	// console.log(isopen)
132	this.pIsoPen=!isopen	298	this.pIsoPen=!isopen
133	this.childIsOpen.child1=!isopen	299	for (let i = 0; i < this.childIsOpen.length; i++) {
134	this.childIsOpen.child2=!isopen	300	this.childIsOpen[i]=!isopen
135	},
136	cChange(isopen,child){
137	// console.log(child)
138	if(child==='child1'){
139	this.childIsOpen.child1=!isopen
140	}	301	}
141	if(child==='child2'){	302	if(this.pIsoPen){
142	this.childIsOpen.child2=!isopen	303	// 计算总价逻辑
		304	if(this.childIsOpen.length!=0){
		305	for (let i = 0; i < this.childIsOpen.length; i++) {
		306	if(this.childIsOpen[i]){
		307	this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice)
		308	}
		309	}
		310	}
		311	} else{
		312	this.totalPrice=0
143	}	313	}
		314
		315	},
		316	delCart(cart_id,index){
		317	// console.log('userInfo',this.$store.state.user.userInfo)
		318	cart_id=parseInt(cart_id)
		319	// console.log('delcart------>cart_id',cart_id)
		320	// console.log('cartlist====>delcart',this.$store.state.cart.cartList)
		321	// console.log('delcart======>index',index)
		322	uni.showModal({
		323	title: "是否删除该商品",
		324	// content: '是否删除该商品',
		325	success: function (res) {
		326	if (res.confirm) {
		327	// this.$store.state.cart.cartList.splice(index,1)
		328	store.dispatch('cart/delCart',{
		329	uid: 1, //用户id
		330	openid: "",
		331	cart_id: cart_id, // 要修改的购物车id
		332	arg:index, // 由于action 传参是能接收两参数，因此将index放入对象
		333	});
		334	console.log('用户点击确定');
		335	}
		336	}
		337	});
		338
144	}	339	}
145	}	340	}
146	}	341	}
147	</script>	342	</script>
148		343
149	<style lang="scss">	344	<style lang="scss">
150	.content {	345	.content {
151	min-height: 100vh;	346	min-height: 100vh;
152	background-color: #f2f2f2;	347	background-color: #f2f2f2;
153	display: flex;	348	display: flex;
154	flex-direction: column;	349	flex-direction: column;
155	align-items: center;	350	align-items: center;
156	justify-content: space-between;	351	justify-content: space-between;
157	padding: 20rpx 40rpx;	352	padding: 20rpx 40rpx;
158	box-sizing: border-box;	353	box-sizing: border-box;
159		354
160	.partentCheck{	355	.partentCheck{
161	width: 16px;	356	width: 16px;
162	height: 16px;	357	height: 16px;
163	border-radius: 18px;	358	border-radius: 18px;
164	border: 1px solid #CFCFCF;	359	border: 1px solid #CFCFCF;
165	background-color: #FFFFFF;	360	background-color: #FFFFFF;
166	}	361	}
167	.partentChecked{	362	.partentChecked{
168	width: 18px;	363	width: 18px;
169	height: 18px;	364	height: 18px;
170	border-radius: 18px;	365	border-radius: 18px;
171	background-color: #FF6B4A;	366	background-color: #FF6B4A;
172	.correct {	367	.correct {
173	display: inline-block;	368	display: inline-block;
174	width: 5px;	369	position: relative;
175	height: 1px;	370	width: 10rpx;
		371	height: 2rpx;
176	background: #FFFFFF;	372	background: #FFFFFF;
177	line-height: 0;	373	line-height: 0;
178	font-size: 0;	374	font-size: 0;
179	position: relative;	375	position: relative;
180	top: -6px;	376	top: -7px;
181	left: 4px;	377	left: 4px;
182	-webkit-transform: rotate(45deg);	378	-webkit-transform: rotate(45deg);
183	}	379	}
184	.correct:after {	380	.correct:after {
185	content: '/';	381	content: '/';
186	display: block;	382	display: block;
187	width: 8px;	383	width: 16rpx;
188	height: 1px;	384	height: 2rpx;
189	background: #FFFFFF;	385	background: #FFFFFF;
190	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);	386	-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
191	}	387	}
192	}	388	}
193		389
194	.card{	390	.card{
195	background-color: #FFFFFF;	391	background-color: #FFFFFF;
196	border-radius: 16rpx;	392	border-radius: 16rpx;
197	box-sizing: border-box;	393	box-sizing: border-box;
198	padding: 36rpx 36rpx 36rpx 18rpx;	394	padding: 36rpx 36rpx 36rpx 18rpx;
199	display: flex;	395	display: flex;
200	flex-direction: column;	396	flex-direction: column;
201	align-items: center;	397	align-items: center;
202	justify-content: space-between;	398	justify-content: space-between;
		399	margin-bottom: 180rpx;
203	.cardHeader{	400	.cardHeader{
204	width: 100%;	401	width: 100%;
205	height: 36rpx;	402	height: 36rpx;
206	display: flex;	403	display: flex;
207	align-items: center;	404	align-items: center;
208	justify-content: flex-start;	405	justify-content: flex-start;
209	image{	406	image{
210	height: 32rpx;	407	height: 32rpx;
211	width: 32rpx;	408	width: 32rpx;
212	padding-left: 6px;	409	padding-left: 6px;
213	padding-right: 10px;	410	padding-right: 10px;
214	}	411	}
215	text{	412	text{
216	// font-family: PingFangSC-Regular;	413	// font-family: PingFangSC-Regular;
217	font-size: 14px;	414	font-size: 14px;
218	color: #333333;	415	color: #333333;
219	letter-spacing: -0.26px;	416	letter-spacing: -0.26px;
220	}	417	}
221	}	418	}
222	.cardBody{	419	.cardBody{
223	width: 100%;	420	width: 100%;
224	height: 300rpx;	421	height: 300rpx;
225	display: flex;	422	display: flex;
226	align-items: center;	423	align-items: center;
227	justify-content: space-between;	424	justify-content: space-between;
228	.goodInfo{	425	.goodInfo{
229	width: 95%;	426	width: 95%;
230	display: flex;	427	display: flex;
231	flex-direction: row;	428	flex-direction: row;
232	justify-content: flex-start;	429	justify-content: flex-start;
233	padding-left: 6px;	430	padding-left: 6px;
234	.imageWrap{	431	.imageWrap{
235	height: 188rpx;	432	height: 188rpx;
236	width: 188rpx;	433	width: 188rpx;
237	margin-right: 28rpx;	434	margin-right: 28rpx;
238	image{	435	image{
239	border-radius: 4px;	436	border-radius: 4px;
240	height: 188rpx;	437	height: 188rpx;
241	width: 188rpx;	438	width: 188rpx;
242	}	439	}
243	}	440	}
244	.infoRight{	441	.infoRight{
245	display: flex;	442	display: flex;
246	flex-direction: column;	443	flex-direction: column;
247	align-items: flex-start;	444	align-items: flex-start;
248	justify-content: space-between;	445	justify-content: space-between;
249	height: 240rpx;	446	height: 240rpx;
250	.goodName{	447	.goodName{
		448	display: -webkit-box;
		449	-webkit-box-orient: vertical;
		450	-webkit-line-clamp: 2;
		451	text-align: justify;
		452	overflow: hidden;
251	font-size: 28rpx;	453	font-size: 28rpx;
252	color: #333333;	454	color: #333333;
253	}	455	}
254	.describ{	456	.describ{
255	width: 100%;	457	width: 100%;
256	height: 80rpx;	458	height: 80rpx;
257	box-sizing: border-box;	459	box-sizing: border-box;
258	padding: 10rpx;	460	padding: 10rpx;
259	font-size: 20rpx;	461	font-size: 20rpx;
		462	letter-spacing: -0.23px;
		463	text-align: justify;
260	color: #999999;	464	color: #999999;
261	background: #F2F2F2;	465	background: #F9F9F9;
262	display: flex;	466	display: flex;
263	justify-content: center;	467	justify-content: center;
264	align-items: center;	468	align-items: center;
265	text{	469	text{
266	text-overflow: -o-ellipsis-lastline;	470	text-overflow: -o-ellipsis-lastline;
267	overflow: hidden;	471	overflow: hidden;
268	text-overflow: ellipsis;	472	text-overflow: ellipsis;
269	display: -webkit-box;	473	display: -webkit-box;
270	-webkit-line-clamp: 2;	474	-webkit-line-clamp: 2;
271	line-clamp: 2;	475	line-clamp: 2;
272	-webkit-box-orient: vertical;	476	-webkit-box-orient: vertical;
273	}	477	}
274	// .icon{	478	// .icon{
275	// transform: rotate(90deg);	479	// transform: rotate(90deg);
276	// height: 13px;	480	// height: 13px;
277	// width: 20px;	481	// width: 20px;
278		482
279	// }	483	// }
280	.icon{	484	.icon{
281	width: 0;	485	width: 0;
282	height: 0;	486	height: 0;
283	border-left: 5px transparent;	487	border-left: 5px transparent;
284	border-right: 5px transparent;	488	border-right: 5px transparent;
285	border-top: 5px #979797;	489	border-top: 5px #979797;
286	border-bottom: 0 transparent;	490	border-bottom: 0 transparent;
287	border-style: solid;	491	border-style: solid;
288	position: relative;	492	position: relative;
289	margin-left: 10px;	493	margin-left: 10px;
290	// transform: scaleY(-1);	494	// transform: scaleY(-1);
291	}	495	}
292	.icon::after{	496	.icon::after{
293	content: '';	497	content: '';
294	position: absolute;	498	position: absolute;
295	top: -6.5px;	499	top: -6.5px;
296	left: -5px;	500	left: -5px;
297	border-left: 5px transparent;	501	border-left: 5px transparent;
298	border-right: 5px transparent;	502	border-right: 5px transparent;
299	border-top: 5px #FFFFFF;	503	border-top: 5px #FFFFFF;
300	border-bottom: 0 transparent;	504	border-bottom: 0 transparent;
301	border-style: solid;	505	border-style: solid;
302	}	506	}
303	}	507	}
304	.priceBox{	508	.priceBox{
305	display: flex;	509	display: flex;
306	justify-content: space-between;	510	justify-content: space-between;
307	align-items: center;	511	align-items: center;
308	// margin-top: 26px;	512	// margin-top: 26px;
309	width: 100%;	513	width: 100%;
310	font-size: 14px;	514	font-size: 14px;
311	color: #999999;	515	color: #999999;
312	.price{	516	.price{
313	color: #FF6B4A;	517	color: #FF6B4A;
314	font-size: 28rpx;	518	font-size: 28rpx;
315	}	519	}
316	.counter{	520	.counter{
317	display: flex;	521	display: flex;
318	flex-direction: row;	522	flex-direction: row;
319	justify-content: space-between;	523	justify-content: space-between;
320	align-items: center;	524	align-items: center;
321	font-size: 28rpx;	525	font-size: 28rpx;
322	color: #333333;	526	color: #333333;
323	width: 122rpx;	527	width: 122rpx;
324	.btn{	528	.btn{
325	display: flex;	529	display: flex;
326	justify-content: center;	530	justify-content: center;
327	line-height: 32rpx;	531	line-height: 32rpx;
328	height: 32rpx;	532	height: 32rpx;

src/pages/detailStandard/detailStandard_k.vue

Diff comments View file @f0cf579

 <template>
     <view class="container">
         <view class="detail">
             <view class="detail1"><image v-bind:src="detail.image"></image></view>
             <view class="detail2">
                 <view class="detail2_name">{{detail.name}}</view>
                 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
                 <view class="detail2_price"><span>￥{{detail.price}}</span></view>
             </view>
         </view>
         <view class="choose">
             <view class="colour">
-                <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala2.png"></image></view>
+                <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
                 <view class="colour_exp">*黑色 BHL192345</view>
                 <view class="colour2">
                     <view v-for="(colours) in colour" :key="colours.key"><image v-bind:src="colours.img"></image></view>
                 </view>
                 <hr/>
             </view>
             <view class="size">
                 <view class="size1">
                     <view class="size1_1">框架尺寸</view>
-                    <view><span>+￥20</span><image src="/static/img/detail/xiala2.png"></image></view>
+                    <view><span>+￥20</span><image src="/static/img/detail/xiala.png"></image></view>
                 </view>
                 <view class="size2">
                     <view>通用</view>
                     <view>定制</view>
                 </view>
                 <view class="D3_list">
                     <view v-for="(item) in parameter" :key="item.key">
                         <view><image class="D3_image"  v-bind:src = "item.img"></image></view>
                         <view class="D3_list_jDu">
                             <!-- uni-sliper插件 -->
-                            <c-progress class="c-progress"
+                            <!-- <c-progress class="c-progress"
                             :percent="item.percent"
                             :show-slider="false" :width="190"
                             :standard="item.standard_l"
                             :stand_width="item.slength"
                             progressColor="#FF6B4A"
-                            />
+                            /> -->
                             <view>{{item.standard}}</view>
                         </view>
                     </view>
                     <hr/>
                 </view>
             </view>
             <view class="part">
                 <view class="size1">
                     <view class="size1_1">配件</view>
-                    <view><span>+￥0.00</span><image src="/static/img/detail/xiala2.png"></image></view>
+                    <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
                 </view>
                 <view class="colour_exp">*0290</view>
                 <view class="part_som">
                     <view v-for="(part) in part" :key="part.key"><image v-bind:src="part.img"></image></view>
                 </view>
             </view>
         </view>
         <view class="buy">
             <view class="buy1">选了镜框，想选镜片？</view>
             <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
             <view class="buy3">
                 <view class="buy3_1">暂时不选</view>
                 <view class="buy3_2">立即去选</view>
             </view>
         </view>
         <view class="zhanwei"></view>
         <view class="button"><view>立即结算</view></view>
     </view>
 </template>
 <script>
 import CProgress from '../../components/UniSliper/UniSliper'
+import store from '@/store'
 export default {
-    components: {
-        CProgress
-    },
     data(){
         return{
             detail:{
                 image:'/static/img/detail/d1.png',
                 name:'商品名称商品名称商品名称商品名称商品名称',
                 price: 180,
                 number: 1,
             },
             //框架颜色
             colour:[
                 {key:0 ,img: '/static/img/detail/Kuang/s1.png'},
                 {key:1 ,img: '/static/img/detail/Kuang/s2.png'},
                 {key:2 ,img: '/static/img/detail/Kuang/s3.png'},
                 {key:3 ,img: '/static/img/detail/Kuang/s4.png'},
                 {key:4 ,img: '/static/img/detail/Kuang/s5.png'},
                 {key:5 ,img: '/static/img/detail/Kuang/s6.png'},
                 {key:6 ,img: '/static/img/detail/Kuang/s7.png'}
             ],
             //规格
             parameter:[
                 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139,standard_l:1.4,percent:100},
                 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51,standard_l:1,percent:50},
                 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45,standard_l:1,percent:50},
                 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19,standard_l:0.4,percent:30},
                 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138,standard_l:1.6,percent:60},
             ],
             //配饰
             part:[
                 {key: 0,img:'/static/img/detail/Kuang/g1.png'},
                 {key: 1,img:'/static/img/detail/Kuang/g1.png'},
                 {key: 2,img:'/static/img/detail/Kuang/g2.png'},
                 {key: 3,img:'/static/img/detail/Kuang/g1.png'},
                 {key: 4,img:'/static/img/detail/Kuang/g1.png'},
                 {key: 5,img:'/static/img/detail/Kuang/g3.png'},
                 {key: 6,img:'/static/img/detail/Kuang/g3.png'},
                 {key: 7,img:'/static/img/detail/Kuang/g2.png'},
             ],
         }
-    }
+    },
+    components: {
+        detailStandard_k(){
+            console.log(detailStandard_k)
+            return this.$store.state.detailStandard_k.detailStandardList
+        }
+    },
+    onLoad:function(){
+        store.dispatch('detailStandard_k/getList')
+    },
 }
 </script>
 <style lang="scss">
 .container{
     min-height: 100vh;
     background: #F2F2F2;
     padding-top: 10px;
     box-sizing: border-box;
 }
 hr{
     border: none;
     height: 1px;
     background: #F2F2F2;
     margin-top: 18px;
 }
 .detail{
     height: 272rpx;
     background: #FFFFFF;
     border-radius: 8px;
     padding: 16px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 .detail1{
     height: 188rpx;
     width: 188rpx;
     image{
         width: 100%;
         height: 100%;
         border-radius: 8px;
     }
 }
 .detail2{
     width: 68%;
     view{
         margin-bottom: 8px;
         font-family: PingFangSC-Regular;
     }
     .detail2_name{
         font-size: 14px;
         color: #333333;
         letter-spacing: -0.26px;
         line-height: 18px;
     }
     .detail2_tui{
         font-size: 10px;
         color: #999999;
         letter-spacing: -0.19px;
         span{
             margin-right: 10px;
         }
     }
     .detail2_price{
         font-size: 14px;
         color: #FF6B4A;
         letter-spacing: -0.26px;
     }
 }
 .choose{
     background: #FFFFFF;
     padding: 16px;
     box-sizing: border-box;
     margin-top: 10px;
     border-radius: 8px;
     .colour1{
         span{
             font-family: PingFangSC-Medium;
             font-size: 16px;
             color: #333333;
             letter-spacing: -0.3px;
             text-align: justify;
             line-height: 24px;
             font-weight: bold;
         }
         image{
             float: right;
             width: 40rpx;
             height: 36rpx;
         }
     }
     .colour_exp{
         font-family: PingFangSC-Regular;
         font-size: 12px;
         color: #666666;
         letter-spacing: 0;
         margin-top: 10px;
         margin-bottom: 10px;
     }
     .colour2{
         display: grid;
         grid-template-columns: repeat(5, 17%);
         justify-content: space-between ;
         grid-row-gap: 10px;
         margin-bottom: 14px;
         view{
             border: 1px solid #F2F2F2;
             image{
                 width: 100%;
                 height: 100%;
             }
         }
         view:hover{
             border: 1px solid #FF6B4A;
         }
     }
 }
 .size,.part{
     margin-top:14px;
     .size1{
         display: flex;
         justify-content: space-between;
         margin-bottom: 10px;
         .size1_1{
             font-weight: bold;
             font-family: PingFangSC-Medium;
             font-size: 16px;
             color: #333333;
             letter-spacing: -0.3px;
             line-height: 24px;
         }
         view{
             span{
                 font-family: PingFangSC-Regular;
                 font-size: 14px;
                 color: #FF6B4A;
                 letter-spacing: -0.26px;
                 margin-right: 12px;
             }
             image{
                 width: 40rpx;
                 height: 36rpx;
             }
         }
     }
     .size2{
         view{
             display: inline-flex;
             align-items: center;
             justify-content: center; //字体居中
             margin-right: 12px;
             margin-bottom: 20px;
             width: 136rpx;
             height: 60rpx;
             background: #F2F2F2;
             border-radius: 2px;
             font-family: PingFangSC-Regular;
             font-size: 12px;
             color: #666666;
         }
         view:hover{
             color: #FF6B4A;
             background: rgba(255,107,74,0.15);
         }
     }
     .D3_list{
         margin-bottom: 4px;
     }
     .D3_list>view{
         display: flex;
         align-content: center;
         margin-bottom: 10px;
         view{
             margin-right: 10px;
         }
     }
     .D3_list image{
         width: 50px;
         height: 25px;
         margin-right: 6px;
     }
     .D3_list span{
         margin-left: 6px;
         margin-right: 5px;
         font-family: 'PingFangSC-Regular';
     }
     .D3_list_jDu{
         view{
             font-family: PingFangSC-Regular;
             font-size: 10px;
             color: #999999;
             letter-spacing: -0.19px;
         }
     }
 }
 .part{
     .part_som{
         display: grid;
         justify-content: space-between;
         grid-template-columns: repeat(4, 22%);
         grid-row-gap: 12px;
         margin-bottom: 14px;
         view{
             border: 1px solid #F2F2F2;
             height: 72rpx;
             image{
                 width: 100%;
                 height: 100%;
             }
         }
         view:hover{
             border: 1px solid #FF6B4A;
         }
     }
 }
 .buy{
     height: 280rpx;
     background: #FFFFFF ;
     margin-top: 10px;
     border-radius: 8px;
     padding-top: 20px;
     box-sizing: border-box;
     margin-bottom: 20px;
 }
 .buy1{
     font-family: PingFangSC-Medium;
     font-size: 16px;
     font-weight: bold;
     color: #333333;
     text-align: center;
 }
 .buy2{
     font-family: PingFangSC-Regular;
     font-size: 12px;
     color: #999999;
     text-align: center;
     margin: 10px;
 }
 .buy3{
     font-family: PingFangSC-Regular;
     font-size: 16px;
     display: flex;
     justify-content: center;
     margin-top: 14px;
     view{
         border-radius: 20px;
         width: 240rpx;
         height: 80rpx;
         display: flex;
         justify-content: center;
         align-items: center;
     }
     .buy3_1{
         margin-right: 20px;
         background: rgba(255,107,74,0.15);
         color: #FF6B4A ;
     }
     .buy3_2{
         background: #FF6B4A;
         color: #FFFFFF ;
     }
 }
 .zhanwei{
     background: #F2F2F2;
     height: 120rpx;
 }
 .button{
     position: fixed;
     bottom: 0;
     width:100%;
     height: 112rpx;
     background: #FF6B4A 100%;
     view{
         color: #FFFFFF;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         font-family: PingFangSC-Regular;
         font-size: 16px;

src/pages/detailsChoiceArgs/detailsChoiceArgs.vue

Diff comments View file @f0cf579

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 @f0cf579

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/pages/user/user.vue

Diff comments View file @f0cf579

1	<template>	1	<template>
2	<view class="wrap">	2	<view class="wrap">
3	<view v-if="isAuth" class="content">	3	<view v-if="isAuth" class="content">
4	<view class="userInfo">	4	<view class="userInfo">
5	<view class="info">	5	<view class="info">
6	<image :src="headerphoto" mode="aspectFill"></image>	6	<image :src="headerphoto" mode="aspectFill"></image>
7	<view class="infoText">	7	<view class="infoText">
8	<text class="userName">{{nickName}}</text>	8	<text class="userName">{{nickName}}</text>
9	</view>	9	</view>
10	</view>	10	</view>
11	<!-- <view class="service">	11	<!-- <view class="service">
12	<image src="../../static/serviceLogo.png" mode="aspectFill"></image>	12	<image src="../../static/serviceLogo.png" mode="aspectFill"></image>
13	</view> -->	13	</view> -->
14	</view>	14	</view>
15	<view class="myOpticsData">	15	<view class="myOpticsData">
16	<view class="left">	16	<view class="left">
17	<image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>	17	<image src="../../static/img/user/dataWrite.png" mode="aspectFit"></image>
18	<text>验光数据</text>	18	<text>验光数据</text>
19	</view>	19	</view>
20	<image src="../../static/right.png" mode="aspectFit"></image>	20	<image src="../../static/right.png" mode="aspectFit"></image>
21	</view>	21	</view>
22	<view class="myOrder">	22	<view class="myOrder">
23	<view class="orderHeader">	23	<view class="orderHeader">
24	<text>全部订单</text>	24	<text>全部订单</text>
25	<view class="btn" @click="toMyOrder('10')">	25	<view class="btn" @click="toMyOrder('10')">
26	全部	26	全部
27	<image src="../../static/right.png" mode="aspectFit"></image>	27	<image src="../../static/right.png" mode="aspectFit"></image>
28	</view>	28	</view>
29	</view>	29	</view>
30	<view class="orderBody">	30	<view class="orderBody">
31	<view class="item waitPay" @click="toMyOrder('0')">	31	<view class="item waitPay" @click="toMyOrder('0')">
32	<image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>	32	<image src="../../static/img/user/waitDeliver.png" mode="aspectFit"></image>
33	<text>待付款</text>	33	<text>待付款</text>
34	</view>	34	</view>
35	<view class="item waitDeliver" @click="toMyOrder('1')" >	35	<view class="item waitDeliver" @click="toMyOrder('1')" >
36	<image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>	36	<image src="../../static/img/user/waitPay.png" mode="aspectFit"></image>
37	<text>待收货</text>	37	<text>待收货</text>
38	</view>	38	</view>
39	<view class="item waitReceive" @click="toMyOrder('2')">	39	<view class="item waitReceive" @click="toMyOrder('2')">
40	<image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>	40	<image src="../../static/img/user/waitReceive.png" mode="aspectFit"></image>
41	<text>已完成</text>	41	<text>已完成</text>
42	</view>	42	</view>
43	<!-- <view class="item service" @click="toMyOrder('3')">	43	<!-- <view class="item service" @click="toMyOrder('3')">
44	<image src="../../static/img/user/refound.png" mode="aspectFit"></image>	44	<image src="../../static/img/user/refound.png" mode="aspectFit"></image>
45	<text>已评价</text>	45	<text>已评价</text>
46	</view> -->	46	</view> -->
47	</view>	47	</view>
48	</view>	48	</view>
49	<view class="someItem">	49	<view class="someItem">
50	<view class="item">	50	<!-- <view class="item">
51	<view class="left">	51	<view class="left">
52	<image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>	52	<image src="../../static/img/user/shouyi.png" mode="aspectFit"></image>
53	<text>推广记录与收益</text>	53	<text>推广记录与收益</text>
54	</view>	54	</view>
		55	<image src="../../static/right.png" mode="aspectFit"></image>
		56	</view> -->
55	<image src="../../static/right.png" mode="aspectFit"></image>	57	<view class="item">
56	</view>	58	<view class="left">
57	<view class="item">	59	<image src="../../static/img/user/introduce.png" mode="aspectFit"></image>
58	<view class="left">	60	<text>系统介绍</text>
59	<image src="../../static/img/user/introduce.png" mode="aspectFit"></image>	61	</view>
60	<text>系统介绍</text>	62	<image src="../../static/right.png" mode="aspectFit"></image>
61	</view>	63	</view>
62	<image src="../../static/right.png" mode="aspectFit"></image>	64	<view class="item">
63	</view>	65	<view class="left">
64	<view class="item">	66	<image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>
65	<view class="left">	67	<text>加入我们</text>
66	<image src="../../static/img/user/joinUs.png" mode="aspectFit"></image>	68	</view>
67	<text>加入我们</text>	69	<image src="../../static/right.png" mode="aspectFit"></image>
68	</view>	70	</view>
69	<image src="../../static/right.png" mode="aspectFit"></image>	71	<view class="item">
70	</view>	72	<view class="left">
71	<view class="item">	73	<image src="../../static/img/user/service.png" mode="aspectFit"></image>
72	<view class="left">	74	<text>联系客服</text>
73	<image src="../../static/img/user/service.png" mode="aspectFit"></image>	75	</view>
74	<text>联系客服</text>	76	<image src="../../static/right.png" mode="aspectFit"></image>
75	</view>	77	</view>
76	<image src="../../static/right.png" mode="aspectFit"></image>	78	</view>
77	</view>	79	<view class="recommend">
78	</view>	80	<view class="title">
79	<view class="recommend">	81	<view class="line"></view>
80	<view class="title">	82	<view class="text">精选推荐</view>
81	<view class="line"></view>	83	<view class="line"></view>
82	<view class="text">精选推荐</view>	84	</view>
83	<view class="line"></view>	85	<!-- 商品列表 -->
84	</view>	86	<view class="goods-list">
85	<!-- 商品列表 -->	87	<scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y class="product-list">
86	<view class="goods-list">	88	<block v-for="(goods) in userRecommandList " :key="goods.list.sk_id">
87	<view class="product-list">	89	<view class="product" v-for="(item) in goods.list" :key="item.sk_id">
88	<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >	90	<Card :goods="item" ></Card>
89	<Card :goods = "goods"></Card>	91	</view>
90	</view>	92	</block>
91	</view>	93	</scroll-view>
92	<view class="loading-text">{{loadingText}}</view>	94	<view class="loading-text">{{loadingText}}</view>
93	</view>	95	</view>
94	</view>	96	</view>
95	</view>	97	</view>
96	<view v-else class="auth">	98	<view v-else class="auth">
		99	<view class="icon"></view>
97	<view class="icon"></view>	100	<view class="divider"></view>
98	<view class="divider"></view>	101	<view class="title">申请获取以下权限</view>
99	<view class="title">申请获取以下权限</view>	102	<view class="text">获得您的公开信息(昵称、头像等)</view>
100	<view class="text">获得您的公开信息(昵称、头像等)</view>	103	<button
101	<button	104	type="primary"
102	type="primary"	105	open-type="getUserInfo"
103	open-type="getUserInfo"	106	@getuserinfo="onGotUserInfo"
104	@getuserinfo="onGotUserInfo"	107	>授权登陆</button>
105	>授权登陆</button>	108	</view>
106	</view>	109	</view>
107	</view>	110	</template>
108	</template>	111
109		112	<script>
110	<script>	113	import Card from "@/components/CommodityCard/CommodityCard.vue";
		114	import store from '@/store';
111	import Card from "@/components/CommodityCard/CommodityCard.vue";	115
112	import store from '@/store';	116	export default {
113		117	components: {
114	export default {	118	'Card':Card
115	components: {	119	},
116	'Card':Card	120	data() {
117	},	121	return {
118	data() {	122	isAuth: true, // 是否显示授权页面,
119	return {	123	pagesnum:1 // 分页请求初始值
120	//商品数据	124	}
121	goodsList:[	125	},
122	{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	126	onLoad() {
123	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	127	// 判断是否授权
124	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	128	uni.getSetting({
125	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	129	success(res) {
		130	console.log('authSetting',res.authSetting)
		131	if(res.authSetting['scope.userInfo'] === true) {
126	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	132	this.isAuth = true
127	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	133	} else {
		134	this.isAuth = false
		135	}
		136	}
		137	})
128	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	138
129	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	139	},
		140	computed: {
130	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },	141	nickName() {
131	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }	142	console.log('nickName', this.$store.state.user.userInfo)
132	],	143	return this.$store.state.user.userInfo.nickName;
133	isAuth: true, // 是否显示授权页面	144	},
134	}	145	headerphoto() {
135	},	146	return this.$store.state.user.userInfo.headerphoto;
136	onLoad() {	147	},
137	// 判断是否授权	148	userRecommandList() {
138	uni.getSetting({	149	console.log('recommandList', this.$store.state.userRecommand.recommandList);
139	success(res) {	150	return this.$store.state.userRecommand.recommandList;
140	console.log('authSetting',res.authSetting)	151	}
141	if(res.authSetting['scope.userInfo'] === true) {	152	},
142	this.isAuth = true	153	onLoad:function(){
143	} else {	154	console.log('usr-my',this.$store.state.user.userInfo)
144	this.isAuth = false	155
145	}	156	store.dispatch('userRecommand/getRecommandList', {
146	}	157	// uid:468,
147	})	158	uid: this.$store.state.user.userInfo.uid,
148	},	159	// openid:"oc8cg0d-0mFIInO4LyrCFtInPWr4",
149	computed: {	160	openid:this.$store.state.user.userInfo.openid,
150	nickName() {	161	page: this.pagesnum
151	console.log('nickName', this.$store.state.user.userInfo)	162	});
152	return this.$store.state.user.userInfo.nickName;	163	},
153	},	164
154	headerphoto() {	165	methods: {
155	return this.$store.state.user.userInfo.headerphoto;	166	// 授权
156	},	167	onGotUserInfo(e) {
157	userRecommandList() {	168	console.log('anthInfo', e);
158	console.log('recommandList', this.$store.state.userRecommand.recommandList);	169	if(e.detail.errMsg == 'getUserInfo:ok') {
159	return this.$store.state.userRecommand.recommandList;	170	const { fromInfo } = this.$store.state.user;
160	}	171	console.log('=====la', fromInfo)
161	},	172	// 用户授权成功
162	onLoad: function() {	173	store.dispatch('user/getUserInfo', fromInfo);
163	store.dispatch('userRecommand/getRecommandList', {	174	this.isAuth = true
164	uid: 2,	175	}
165	});	176	},
166	},	177	toMyOrder(status){
167	methods: {	178	uni.navigateTo({
168	// 授权	179	url: `../myOrder/myOrder?status=`+status,
169	onGotUserInfo(e) {	180	success: res => {},
170	console.log('anthInfo', e);	181	fail: () => {},
171	if(e.detail.errMsg == 'getUserInfo:ok') {	182	complete: () => {}
172	const { fromInfo } = this.$store.state.user;	183	});
173	console.log('=====la', fromInfo)	184	},
174	// 用户授权成功	185	handleScrolltolower(){
		186	// console.log('usr-my',this.$store.state.user.userInfo)
		187	this.pagesnum++;
		188	store.dispatch('userRecommand/getRecommandList', {
		189	uid: this.$store.state.user.userInfo.uid,
		190	openid:this.$store.state.user.userInfo.openid,
		191	page: this.pagesnum
		192	});
		193	}
		194	}
175	store.dispatch('user/getUserInfo', fromInfo);	195	}
176	this.isAuth = true	196	</script>
177	}	197
178	},	198	<style lang="scss">
179	toMyOrder(status){	199	.warp{
180	uni.navigateTo({	200	font-size: 24rpx;
181	url: `../myOrder/myOrder?status=`+status,	201	background-color: #f2f2f2;
182	success: res => {},	202	height: 100vh;
183	fail: () => {},	203	}
184	complete: () => {}	204	.content {
185	});	205	display: flex;
186	},	206	flex-direction: column;
187	}	207	align-items: center;
188	}	208	justify-content: center;
189	</script>	209	background-color: #F2F2F2;
190		210	}
191	<style lang="scss">	211	.userInfo{
192	.warp{	212	background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);
193	font-size: 24rpx;	213	width: 100%;
194	background-color: #f2f2f2;	214	height: 240rpx;
195	height: 100vh;	215	color: #FFFFFF;
196	}	216	padding: 60rpx 82rpx 80rpx 44rpx;
197	.content {	217	box-sizing: border-box;
198	display: flex;	218	display: flex;
199	flex-direction: column;	219	flex-direction: row;
200	align-items: center;	220	justify-content: space-between;
201	justify-content: center;	221	align-items: flex-start;
202	background-color: #F2F2F2;	222	.info{
203	}	223	display: flex;
204	.userInfo{	224	flex-direction: row;
205	background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%);	225	justify-content: space-between;
206	width: 100%;	226	align-items: center;
207	height: 240rpx;	227	image{
208	color: #FFFFFF;	228	border-radius: 50rpx;
209	padding: 60rpx 82rpx 80rpx 44rpx;	229	height: 100rpx ;
210	box-sizing: border-box;	230	width: 100rpx;
211	display: flex;	231	margin-right: 40rpx;
212	flex-direction: row;	232	}
213	justify-content: space-between;	233	.infoText{
214	align-items: flex-start;	234	display: flex;
215	.info{	235	flex-direction: column;
216	display: flex;	236	justify-content: space-between;
217	flex-direction: row;	237	align-items: flex-scetart;
218	justify-content: space-between;	238	.userName{
219	align-items: center;	239	font-size: 18px;
220	image{	240	color: #FFFFFF;
221	border-radius: 50rpx;	241	margin-bottom: 8rpx;
222	height: 100rpx ;	242	}
223	width: 100rpx;	243	.nickName{
224	margin-right: 40rpx;	244	font-size: 12px;
225	}	245	color: #FFFFFF;
226	.infoText{	246	}
227	display: flex;	247	}
228	flex-direction: column;	248	}
229	justify-content: space-between;	249	// .service{
230	align-items: flex-scetart;	250	// margin-top: 20rpx;
231	.userName{	251	// image{
232	font-size: 18px;	252	// height: 36rpx;
233	color: #FFFFFF;	253	// width: 36rpx;
234	margin-bottom: 8rpx;	254	// }
235	}	255	// }
236	.nickName{	256	}
237	font-size: 12px;	257	.myOpticsData{
238	color: #FFFFFF;	258	width: 670rpx;
239	}	259	height: 120rpx;
240	}	260	background-color: #FFFFFF;
241	}	261	border-radius: 6px;
242	// .service{	262	box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);
243	// margin-top: 20rpx;	263	position: relative;
244	// image{	264	bottom: 44rpx;
245	// height: 36rpx;	265	padding: 40rpx;
246	// width: 36rpx;	266	box-sizing: border-box;
247	// }	267	display: flex;
248	// }	268	justify-content: space-between;
249	}	269	align-items: center;
250	.myOpticsData{	270	.left{
251	width: 670rpx;	271	font-size: 14px;
252	height: 120rpx;	272	color: #333333;
253	background-color: #FFFFFF;	273	display: flex;
254	border-radius: 6px;	274	align-items: center;
255	box-shadow: 1px 1px 7px 0 rgba(133,107,107,0.10);	275	image{
256	position: relative;	276	margin-right: 32rpx;
257	bottom: 44rpx;	277	width: 30rpx;
258	padding: 40rpx;	278	height: 34rpx;
259	box-sizing: border-box;	279	}
260	display: flex;	280	}
261	justify-content: space-between;	281	image{
262	align-items: center;	282	height: 16px;
263	.left{	283	width: 8px;
264	font-size: 14px;	284	}
265	color: #333333;	285	}
266	display: flex;	286	.myOrder{
267	align-items: center;	287	width: 100%;
268	image{	288	height: 296rpx;
269	margin-right: 32rpx;	289	// margin-top: 116rpx;
270	width: 30rpx;	290	margin-bottom: 20rpx;
271	height: 34rpx;	291	padding: 0 40rpx;
272	}	292	box-sizing: border-box;
273	}	293	background: #FFFFFF;
274	image{	294	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
275	height: 16px;	295	border-radius: 6px;
276	width: 8px;	296	border-radius: 6px;
277	}	297	display: flex;
278	}	298	flex-direction: column;
279	.myOrder{	299	justify-content: space-around;
280	width: 100%;	300	align-items: center;
281	height: 296rpx;	301	.orderHeader{
282	// margin-top: 116rpx;	302	width: 100%;
283	margin-bottom: 20rpx;	303	height: 100rpx;
284	padding: 0 40rpx;	304	display: flex;
285	box-sizing: border-box;	305	flex-direction: row;
286	background: #FFFFFF;	306	justify-content: space-between;
287	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);	307	align-items: center;
288	border-radius: 6px;	308	border-bottom: 1px solid #E9E9E9;;
289	border-radius: 6px;	309	font-weight: bold;
290	display: flex;	310	font-size: 18px;
291	flex-direction: column;	311	color: #333333;
292	justify-content: space-around;	312	.btn{
293	align-items: center;	313	font-size: 12px;
294	.orderHeader{	314	color: #999999;
295	width: 100%;	315	display: flex;
296	height: 100rpx;	316	align-items: center;
297	display: flex;	317	image{
298	flex-direction: row;	318	margin-left: 20rpx;
299	justify-content: space-between;	319	height: 32rpx;
300	align-items: center;	320	width: 16rpx;
301	border-bottom: 1px solid #E9E9E9;;	321	}
302	font-weight: bold;	322	}
303	font-size: 18px;	323	}
304	color: #333333;	324	.orderBody{
305	.btn{	325	width: 100%;
306	font-size: 12px;	326	display: flex;
307	color: #999999;	327	flex-direction: row;
308	display: flex;	328	justify-content: space-around;
309	align-items: center;	329	align-items: center;
310	image{	330	.item{
311	margin-left: 20rpx;	331	display: flex;
312	height: 32rpx;	332	flex-direction: column;
313	width: 16rpx;	333	align-items: center;
314	}	334	image{
315	}	335	width: 62rpx;
316	}	336	height: 46rpx;
317	.orderBody{	337	}
318	width: 100%;	338	text{
319	display: flex;	339	margin-top: 24rpx;
320	flex-direction: row;	340	font-size: 12px;
321	justify-content: space-around;	341	color: #333333;
322	align-items: center;	342	}
323	.item{	343	}
324	display: flex;	344	}
325	flex-direction: column;	345	}
326	align-items: center;	346	.someItem{
327	image{	347	width: 100%;
328	width: 62rpx;	348	height: 336rpx;
329	height: 46rpx;	349	background: #FFFFFF;
330	}	350	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
331	text{	351	border-radius: 6px;
332	margin-top: 24rpx;	352	border-radius: 6px;
333	font-size: 12px;	353	margin-bottom: 18rpx;
334	color: #333333;	354	box-sizing: border-box;
335	}	355	padding: 21rpx 48rpx 21rpx 42rpx;
336	}	356	box-sizing: border-box;
		357	display: flex;
337	}	358	flex-direction: column;
338	}	359	justify-content: space-between;
339	.someItem{	360	align-items: center;
340	width: 100%;	361	.item{
341	height: 336rpx;	362	display: flex;
342	background: #FFFFFF;	363	justify-content: space-between;
343	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);	364	border-bottom: 1px solid #F2F2F2;;
344	border-radius: 6px;	365	align-items: center;
345	border-radius: 6px;	366	height: 72rpx;
346	margin-bottom: 18rpx;	367	width: 100%;
347	box-sizing: border-box;	368	.left{
348	padding: 21rpx 48rpx 21rpx 42rpx;	369	font-size: 14px;
349	box-sizing: border-box;	370	color: #333333;
350	display: flex;	371	display: flex;
351	flex-direction: column;	372	align-items: center;
352	justify-content: space-between;	373	image{
353	align-items: center;	374	margin-right: 32rpx;
354	.item{	375	width: 30rpx;
355	display: flex;	376	height: 34rpx;
356	justify-content: space-between;	377	}
357	border-bottom: 1px solid #F2F2F2;;	378	}
358	align-items: center;	379	image{
359	height: 72rpx;	380	height: 16px;
360	width: 100%;	381	width: 8px;
361	.left{	382	}
362	font-size: 14px;	383	}
363	color: #333333;	384
364	display: flex;	385	}
365	align-items: center;	386	.recommend{
366	image{	387	background: #FFFFFF;
367	margin-right: 32rpx;	388	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
368	width: 30rpx;	389	border-radius: 6px;
369	height: 34rpx;	390	border-radius: 6px;
370	}	391	width: 100%;
371	}	392	.title{
372	image{	393	display: flex;
373	height: 16px;	394	flex-direction: row;
374	width: 8px;	395	align-items: center;
375	}	396	justify-content: space-between;
376	}	397	padding: 20rpx 40rpx;
377		398	.line{
378	}	399	width: 264rpx;
379	.recommend{	400	height: 1rpx;
380	background: #FFFFFF;	401	border-bottom: 1px solid #EAEAEA;
381	box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);	402	}
382	border-radius: 6px;	403	.text{
383	border-radius: 6px;	404	font-family: PingFangSC-Medium;
384	width: 100%;	405	font-size: 14px;
385	.title{	406	color: #333333;
386	display: flex;	407	letter-spacing: -0.26px;
387	flex-direction: row;	408	text-align: justify;
388	align-items: center;	409	line-height: 24px;
389	justify-content: space-between;	410	}
390	padding: 20rpx 40rpx;	411	}
391	.line{	412	.goods-list{
392	width: 264rpx;	413	.loading-text{
393	height: 1rpx;	414	width: 100%;
394	border-bottom: 1px solid #EAEAEA;	415	display: flex;
395	}	416	justify-content: center;
396	.text{	417	align-items: center;
397	font-family: PingFangSC-Medium;	418	height: 30px;
398	font-size: 14px;	419	color: #979797;
399	color: #333333;	420	font-size: 12px;
400	letter-spacing: -0.26px;	421	}
401	text-align: justify;	422	.product-list{
402	line-height: 24px;	423	width: 92%;
403	}	424	padding: 0 4% 3vw 4%;
404	}	425	display: flex;
405	.goods-list{	426	height: 200px;
406	.loading-text{	427	justify-content: space-between;
407	width: 100%;	428	flex-wrap: wrap;
408	display: flex;	429	.product{
409	justify-content: center;	430	width: 48%;
410	align-items: center;	431	margin: 0 0 20rpx 0;
411	height: 30px;	432	background: #FFFFFF;
412	color: #979797;	433	border: 1px solid #F2F2F2;
413	font-size: 12px;	434	}
414	}	435	}
415	.product-list{	436	}
416	width: 92%;	437	}
417	padding: 0 4% 3vw 4%;	438	.auth {
418	display: flex;	439	height: 100vh;
419	justify-content: space-between;	440	display: flex;
420	flex-wrap: wrap;	441	flex-direction: column;
421	.product{	442	align-items: center;
422	width: 48%;	443	.icon {
423	margin: 0 0 20rpx 0;	444	width: 140rpx;
424	background: #FFFFFF;	445	height: 140rpx;
425	border: 1px solid #F2F2F2;	446	border-radius: 50%;
426	}	447	margin-top: 100rpx;
427	}	448	background-color: grey;
428	}	449	}
429	}	450	.divider {
430	.auth {	451	height: 1rpx;
431	height: 100vh;	452	width: 600rpx;
432	display: flex;	453	margin-top: 80rpx;
433	flex-direction: column;	454	background-color: #E6E3E3;
434	align-items: center;	455	}
435	.icon {	456	.title {
436	width: 140rpx;	457	width: 600rpx;
437	height: 140rpx;	458	margin-top: 50rpx;
438	border-radius: 50%;	459	text-align: left;
439	margin-top: 100rpx;	460	}
440	background-color: grey;	461	.text {
441	}	462	width: 600rpx;
442	.divider {	463	margin-top: 30rpx;
443	height: 1rpx;	464	text-align: left;
444	width: 600rpx;	465	color: #E6E3E3;
445	margin-top: 80rpx;	466	}
446	background-color: #E6E3E3;	467	button {
447	}	468	width: 450rpx;
448	.title {	469	height: 80rpx;
449	width: 600rpx;	470	line-height: 80rpx;
450	margin-top: 50rpx;	471	margin-top: 80rpx;
451	text-align: left;	472	border-radius: 30rpx;
452	}	473	}
453	.text {	474	}
454	width: 600rpx;	475
455	margin-top: 30rpx;	476	</style>
456	text-align: left;	477

src/store/modules/cart.js

Diff comments View file @f0cf579

1	import urlAlias from '../url';	1	import urlAlias from '../url';
2	import request from '../request';	2	import request from '../request';
3		3
4	const { cartList } = urlAlias;	4	const { cartList , cartModi, cartDel, cartAdd } = urlAlias;
5		5
6	const state = {	6	const state = {
7	cartList: [],	7	cartList: [],
8	};	8	};
9		9
		10
		11	const data = {
		12	data:{
		13	// list 购物车列表
		14	list:[
		15	{
		16	goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
		17	pid: "6",//产品id
		18	real_price: 99,
		19	checked: true,//是否选中
		20	name: "颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射防日光 / 配件免费送 /折射",//属性名称 ,颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 …
		21	cart_id: "39", //购物车唯一序列号
		22	num: "1", //此购物
		23	pics: "/static/myorder-paying-pic.png", //商品图片
		24	goodsType:2,// 商品种类
		25	},
		26	{
		27	goods_name: "1.56非球面防蓝光_黑01-8701志平防蓝光-防辐射电脑网课眼镜，TR90弹性漆，近视镜，青春潮流", //商品名称
		28	pid: "4",//产品id
		29	real_price: 189,
		30	checked: false,//是否选中
		31	name: "颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射防日光 / 配件免费送 /折射",//属性名称 ,颜色玫瑰金 /材质钛合金 / 功能防日光 / 配件免费送 /折射 …
		32	cart_id: "38", //购物车唯一序列号
		33	num: "2", //此购物
		34	pics: "/static/myorder-paying-pic.png", //商品图片
		35	goodsType:3,// 商品种类
		36	},
		37	],
		38	mp_id: "1",
		39	mp_list://使用人，一个产品只有一个使用人
		40	[
		41	{
		42	glassWidth: "54",//镜宽
		43	img_url2: "http://localhost:8087/images/shop_1/1/",//使用人的头像，根据此头像，AI识别出数据。
		44	in_time: "2020-02-22 03:19:38",//使用人加入的时间
		45	leftAxi: "124",//左眼数据
		46	leftCyl: "-2",//左眼数据
		47	leftSph: "-1",//左眼数据
		48	leftVis: "5",//左眼数据
		49	legWidth: "158",//镜腿长
		50	metal: null,//使用人的其它定义（材质过敏之类的）
		51	mp_id: "1",//使用的id
		52	name: "me",//使用人的名字
		53	norseWidth: "18",//鼻宽
		54	pd: "89.6",//瞳距
		55	price: "0",//此人偏好的价格
		56	rightAxi: "123",//右眼数据
		57	rightCyl: "24",//右眼数据
		58	rightSph: "-4",//右眼数据
		59	rightVis: "5.1",//右眼数据
		60	uid: "1",//购买人的uid
		61	}
		62	],
		63	sk_id: "80",//此产品下的sku的唯一id
		64	skuList:[//sku清单
		65	{
		66	discount: "45",//折扣，数据库中以int型存储，所以要除100
		67	in_price: "6000",//进货价格，数据库中以int型存储，单位是分，所以显示时要除以100
		68	kc: "0",//库存
		69	model_pic: null,//模型试戴图
		70	out_price: 191.8,//销售价格，元
		71	pic: "https://glass.xiuyetang.com//upload_jk/6/6_321EB1.jpg",//可供查看图
		72	pid: "6",//索引产品id
		73	real_price: 99,//真实可成交价格
		74	sk_id: "74",//成交时的sku_id
		75	sku_name: "1.56非球面防蓝光_黑色",//sku名称
		76	sku_shop_value: "",//sku商家定义值
		77	sku_value: "47_51",//sku系统生成值
		78	status: "1",//此产品下的sku状态
		79	}
		80	]
		81	}, // 一个产品下，会有多个sku，都在这个skuList数组下
		82	msg: "ok",
		83	status: 1,
		84	}
		85
10	const mutations = {	86	const mutations = {
11	INIT: (state, cartList) => {	87	INIT: (state, cartList) => {
12	state.cartList = cartList;	88	state.cartList = cartList;
13	},	89	},
		90	DEL:(state,index)=>{
		91	console.log('mutations====>',state.cartList)
		92	state.cartList.splice(index,1)
		93	console.log('mutations====>index',index)
		94	// state.cartList=delList
		95	},
		96	MODI:(state,args) => {
		97	console.log('the num',state.cartList[args.index].num)
		98	console.log('mutations====>isadd',args)
		99	if(args.isadd)
		100	{
		101	state.cartList[args.index].num=args.num
		102	} else{
		103	state.cartList[args.index].num=args.num
		104	}
		105	console.log('the num',state.cartList[args.index].num)
		106	},
		107
14	};	108	};
15		109
16
17
18	const actions = {	110	const actions = {
19		111
20	getCartList({ commit }, param) {	112	getCartList({ commit }, param) {
21	request({	113	request({
22	url: cartList,	114	url: cartList,
23	success: (res) => {	115	data:param,
24		116	success: (res) => {
25	commit('INIT', res.data.data)	117	console.log('cart===>接口数据',res.data.data)
26	},	118	// const resData = {
27	fail: (res) => {	119	// ...res,
28	console.log("fail status === > ", res);	120	// data,
29	},	121	// }
30	complete: (res) => {	122	commit('INIT', res.data.data)
31	console.log("complete status === > ", res);	123	},
32	},	124	fail: (res) => {
33	})	125	console.log("fail status === > ", res);
34	}	126	},
35		127	complete: (res) => {
		128	console.log("complete status === > ", res);
		129	},
		130	})
		131	},
		132
		133	modiCart({ commit }, param) {
		134	const args=Object.assign({num:param.num},param.args)
		135	delete param.args
		136	request({
		137	url: cartModi,
		138	data: param,
		139	success: (res) => {
		140	console.log('modi-parm',param)
		141	commit('MODI',args)
		142	},
		143	fail: (res) => {
		144	console.log("fail status === > ", res);
		145	},
		146	complete: (res) => {
		147	console.log("complete status === > ", res);
		148	},
		149	})
		150	},
		151
		152	delCart({ commit },param ) {
		153	let arg = param.arg;
		154	delete param.arg
		155	request({
		156	url: cartDel,
		157	data: param,
		158	success: (res) => {
		159	console.log('del-parm',param)
		160	console.log('del-myparms==>',arg)
		161	// console.log('deacart====>cartList',this.$store.state.cart.cartList)
		162
		163	commit('DEL',arg)
		164	},
		165	fail: (res) => {
		166	console.log("fail status === > ", res);
		167	},
		168	complete: (res) => {
		169	console.log("complete status === > ", res);
		170	},
		171	})
		172	},
		173
		174	addCart({ commit }, param) {
		175	console.log('请求接口开始')
		176	request({
		177	url: cartAdd,
		178	data:param,
		179	success: (res) => {
		180	console.log('add-parm',param)
		181	console.log('addcart===>res.data===>',res.data)
		182	// commit('INIT', res.data.data)
		183	},
		184	fail: (res) => {
		185	console.log("fail status === > ", res);
		186	},
		187	complete: (res) => {
		188	console.log("complete status === > ", res);
		189	},
		190	})
		191	},
		192
36	}	193	}
37		194
38	export default {	195	export default {
39	namespaced: true,	196	namespaced: true,
40	state,	197	state,
41	mutations,	198	mutations,

src/store/modules/categoryOrder.js

View file @9a8f39a

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/detailStandard_k.js

Diff comments View file @f0cf579

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

src/store/modules/index.js

Diff comments View file @f0cf579

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 @f0cf579

 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/modules/userRecommand.js

Diff comments View file @f0cf579

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	recommandList	5	recommandList
6	} = urlAlias;	6	} = urlAlias;
7		7
8	const state = {	8	const state = {
9	recommandList: [],	9	recommandList: [],
10	};	10	};
11		11
		12	const data = {
		13	"code": 1,
		14	"msg": "请求成功",
		15	"data": {
		16	// list 表示商品数据列表
		17	"list": [
		18	{
		19	model_pic: null,
		20	p_name: "1.61防蓝光镜片非球面_枪色款镜架商务男士防蓝光眼镜",
		21	p_root_index: "1", //对应goodType
		22	pic: "http://localhost/sys-glass/image/picture.png",
		23	pid: "96",
		24	real_price: "17800",
		25	sk_id: "1448",
		26	sku_name: "1.61防蓝光镜片非球面_枪色款镜架",
		27	trade_num: "0",
		28	},
		29	{
		30	"sk_id": "39",
		31	"pic": "/static/img/goods/p1.jpg",
		32	"p_name": "1.56防蓝光镜片非球面_黑银色镜架防蓝光眼镜超轻不压鼻",
		33	"old_price": "18000",
		34	"real_price": "9900",
		35	"trade_num": 123, // 对应购买人数
		36	"p_root_index": 2, // 对应跳转的详情页
		37	"pid":4, // 产品id
		38	},
		39	],
		40	pagesnum:1, // 懒加载要用到的页数
		41	pagessize:10,// 每次请求返回的list长度
		42	}
		43
		44	}
		45
12	const mutations = {	46	const mutations = {
13	INIT: (state, list) => {	47	INIT: (state, list) => {
14	state.recommandList = list;	48	state.recommandList = list;
15	},	49	},
16	};	50	};
17		51
		52	let goodsList=[];
		53
18	const actions = {	54	const actions = {
19	getRecommandList({ commit }, param) {	55	getRecommandList({ commit }, param) {
20	request({	56	request({
21	url: recommandList,	57	url: recommandList,
22	success: (res) => {	58	success: (res) => {
23	console.log(res.data)	59	console.log('userRecommand-parm',param)
24	commit('INIT', res.data.data)	60	console.log(res.data.data)
		61	// const Res={...res.data.data.list,...data.data.list}
		62	goodsList=[...goodsList,...res.data.data]
		63	// console.log(res.data)
		64	commit('INIT', goodsList)
25	},	65	},
26	fail: (res) => {	66	fail: (res) => {
		67	uni.showToast({
		68	title:"数据加载完了",
		69	icon:"none"
		70	})
27	console.log("fail status === > ", res);	71	console.log("fail status === > ", res);
28	},	72	},
29	complete: (res) => {	73	complete: (res) => {
30	console.log("complete status === > ", res);	74	console.log("complete status === > ", res);
31	},	75	},
32	})	76	})
33	},	77	},
34	};	78	};
35		79
36	export default {	80	export default {
37	namespaced: true,	81	namespaced: true,
38	state,	82	state,
39	mutations,	83	mutations,
40	actions,	84	actions,
41	};	85	};

src/store/request.js

Diff comments View file @f0cf579

 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 @f0cf579

1	const urlAlias = {	1	const urlAlias = {
2	// 获取首页商品列表	2	// 获取商品信息
3	shopList: '/app/prod/list',	3	read: '/app/prod/read',
4
5	// 获取首页商品列表
6	category: '/app/prod/category2',
7	// 获取商品信息
8	read: '/app/prod/read',
9		4
10	// 首页	5	// 首页
11	shopList: '/app/prod/list', // 获取首页商品列表	6	shopList: '/app/prod/list', // 获取首页商品列表
12	category: '/app/prod/category', // 获取首页商品分类	7	category: '/app/prod/category2', // 获取首页商品分类
		8	search: '/app/prod/search', // 首页搜索商品
13		9
14	// 登陆	10	// 登陆
15	login: '/app/glass/getOpenId', // 登陆	11	login: '/app/glass/getOpenId', // 登陆
16	getUserInfo: '/app/glass/userinfo', // 获取用户信息	12	getUserInfo: '/app/glass/userinfo', // 获取用户信息
17		13
18	// 我的订单	14	// 我的订单
19	myOrderList: '/app/order/list3', // 获取订单列表	15	myOrderList: '/app/order/list3', // 获取订单列表
20	orderRead: '/app/order/read', // 获取订单详情	16	orderRead: '/app/order/read', // 获取订单详情
21	cancelOrder: '/app/order/wait/del',//取消订单	17	cancelOrder: '/app/order/wait/del',//取消订单
22	statusConfirm: '/app/order/statusConfirm',//订单操作	18	statusConfirm: '/app/order/statusConfirm',//订单操作
		19	payLog:'/app/pay/log',//调起支付
		20
		21	// 购物车
23	payLog:'/app/pay/log',//调起支付	22	cartList: '/app/cart/list', // 获取购物车列表
24		23	cartModi: '/app/cart/modi', // 修改购物车
25	// 购物车	24	cartDel: '/app/cart/del', // 删除购物车
		25	cartAdd: '/app/cart/add',// 添加购物车
		26
		27	// 我的
		28	recommandList:'/app/prod/recommand', // 获取用户个性化推荐商品
26	cartList: '/app/cart/list', // 获取购物车列表	29
27		30	// 镜框选购页
28	// 我的	31	detailStandardList: '/app/prod/read', //获取商品的详细信息