刘文博 / gulu-vue

Blame view

src/pages/addOpticsData/addOpticsData.vue 6.83 KB
edit raw normal view history
156736a2e   尹聃   样式修改 
1
 
  <template>
863d3aa95   BigBoss   新增验光数据页面 
2
 
  	<view class="wrap">
e477b7dc7   BigBoss   修改冲突 
3
 
  		<!-- 弹窗 -->
863d3aa95   BigBoss   新增验光数据页面 
4
 
  		<uni-popup ref="popup" type="center">
e477b7dc7   BigBoss   修改冲突 
5
 
  			<!-- 给一个左边弹窗的样式 -->
863d3aa95   BigBoss   新增验光数据页面 
6
7
8
 
  			<view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
  				<!-- 关闭弹窗按钮 -->
  				<view class="closeBtn" @click="this.$refs.popup.close()"></view>
e477b7dc7   BigBoss   修改冲突 
9
 
  				<!-- 左 -->
863d3aa95   BigBoss   新增验光数据页面 
10
 
  				<image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
e477b7dc7   BigBoss   修改冲突 
11
 
  				<!-- 右 -->
863d3aa95   BigBoss   新增验光数据页面 
12
13
 
  				<image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
  			</view>
e477b7dc7   BigBoss   修改冲突 
14
 
  		</uni-popup>
156736a2e   尹聃   样式修改 
15
 
  		<!-- 点击弹窗部分 -->
5b513503f   BigBoss   验光数据页面 
16
 
  		<view class="header">
156736a2e   尹聃   样式修改 
17
 
  			<view class="headerLeft" @click=changeTap(1)>
5b513503f   BigBoss   验光数据页面 
18
19
20
 
  				<text>如何查看验光单？</text>
  				<image src="../../static/dataLook.png" mode="aspectFit"></image>
  			</view>
156736a2e   尹聃   样式修改 
21
 
  			<view class="headerRight" @click=changeTap(0)>
5b513503f   BigBoss   验光数据页面 
22
23
24
25
 
  				<text>如何查看眼镜框架？</text>
  				<image src="../../static/glassLook.png" mode="aspectFit"></image>
  			</view>
  		</view>
e477b7dc7   BigBoss   修改冲突 
26
 
  		<!-- 数据展示部分 -->
5b513503f   BigBoss   验光数据页面 
27
28
 
  		<view class="dataMenu">
  			<uni-collapse accordion="true">
31dea37da   喻鹏   新增验光单和修改验光单 
29
 
  				<view class="item" v-for="(loveItem,index) in loveList" :key="index" >
5b513503f   BigBoss   验光数据页面 
30
 
  					<uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
31dea37da   喻鹏   新增验光单和修改验光单 
31
 
  					    <view class="loveDataInfo" @click="toNewData(2,index)">
5b513503f   BigBoss   验光数据页面 
32
33
34
35
36
37
38
39
40
41
42
43
 
  							<view class="dataInfoItem">
  								<text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
  							</view>
  							<view class="dataInfoItem">
  								<text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
  							</view>
  							<view class="dataInfoItem">
  								<text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
  							</view>
  							<view class="dataInfoItem">
  								<text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
  							</view>
fed83ad11   BigBoss   新增数据 
44
45
46
47
48
49
50
51
52
 
  							<view class="dataInfoItem">
  								<text>镜片宽度：</text><text>{{loveItem.glassWidth!=='0'?loveItem.glassWidth:'暂无数据'}}</text>
  							</view>
  							<view class="dataInfoItem">
  								<text>鼻梁宽度：</text><text>{{loveItem.norseWidth!=='0'?loveItem.norseWidth:'暂无数据'}}</text>
  							</view>
  							<view class="dataInfoItem">
  								<text>镜腿长度：</text><text>{{loveItem.legWidth!=='0'?loveItem.legWidth:'暂无数据'}}</text>
  							</view>
5b513503f   BigBoss   验光数据页面 
53
54
55
56
57
58
 
  					    </view>
  					</uni-collapse-item>
  				</view>
  			</uni-collapse>
  		</view>
  		<view class="footer">
31dea37da   喻鹏   新增验光单和修改验光单 
59
 
  			<button class="btn" type="default" @click="toNewData(1)">新建验光单</button>
156736a2e   尹聃   样式修改 
60
61
62
63
 
  		</view>
  	</view>
  </template>
5b513503f   BigBoss   验光数据页面 
64
65
66
 
  <script>
  	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
863d3aa95   BigBoss   新增验光数据页面 
67
 
  	import UniPopup from '@/components/UniPopup/uni-popup.vue'
5b513503f   BigBoss   验光数据页面 
68
69
 
  	import store from '@/store';
  	export default {
156736a2e   尹聃   样式修改 
70
71
72
73
74
 
  		components: {UniCollapse,UniCollapseItem,UniPopup},
  		data() {
  			return {
  				whichTap:0
  			};
5b513503f   BigBoss   验光数据页面 
75
 
  		},
fed83ad11   BigBoss   新增数据 
76
 
  		onShow() {
5b513503f   BigBoss   验光数据页面 
77
78
 
  			//获取关心的人列表
  			store.dispatch('myLoveList/getLoveList', {
31dea37da   喻鹏   新增验光单和修改验光单 
79
 
  				uid: this.$store.state.user.userInfo.uid,
5b513503f   BigBoss   验光数据页面 
80
81
 
  			}); 
  		},
fed83ad11   BigBoss   新增数据 
82
83
84
85
86
87
 
  		onLoad: function(option) {
  			// //获取关心的人列表
  			// store.dispatch('myLoveList/getLoveList', {
  			// 	uid: this.$store.state.user.userInfo.uid,
  			// }); 
  		},
5b513503f   BigBoss   验光数据页面 
88
89
90
91
92
93
94
 
  		computed:{
  			loveList() {
  				console.log(this.$store.state.myLoveList.loveList)
  				return this.$store.state.myLoveList.loveList || []
  			},
  		},
  		methods:{
863d3aa95   BigBoss   新增验光数据页面 
95
96
97
 
  			changeTap(item){
  				this.whichTap = item
  				this.$refs.popup.open()
5b513503f   BigBoss   验光数据页面 
98
99
100
101
 
  			},
  			//给时间搞一个nice的格式
  			getRightTime(time){
  				//如果小于10 则返回'0'+m
863d3aa95   BigBoss   新增验光数据页面 
102
103
104
105
106
107
108
109
 
  				// function add(m){return m<10?'0'+m:m}
  				//传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
  				// const oldTime = (new Date(time)).getTime()
  				// const year = new Date(oldTime).getFullYear()
  				// const month = new Date(oldTime).getMonth()+1
  				// const day = new Date(oldTime).getDate()
  				// const newTime = add(year)+'-'+add(month)+'-'+add(day)
d1ce60f3d   BigBoss   合并冲突 
110
 
  				// console.log(newTime)
863d3aa95   BigBoss   新增验光数据页面 
111
112
 
  				// return newTime.replace(/-/g, '/')
  				return time
5b513503f   BigBoss   验光数据页面 
113
114
 
  			},
  			getFirstName(name){
5b513503f   BigBoss   验光数据页面 
115
 
  				return name.substring(0,1)
863d3aa95   BigBoss   新增验光数据页面 
116
 
  			},
31dea37da   喻鹏   新增验光单和修改验光单 
117
118
119
120
121
122
123
124
125
126
127
 
  			toNewData(item,index){
  				// const args={
  				// 	name:loveItem.name,
  				// 	pd:loveItem.pd,
  				// 	leftSph:loveItem.leftSph,
  				// 	rightSph:loveItem.rightSph,
  				// 	leftCyl:loveItem.leftCyl,
  				// 	rightCyl:loveItem.rightCyl,
  				// 	leftAxi:loveItem.leftAxi,
  				// 	rightAxi:loveItem.rightAxi
  				// }
863d3aa95   BigBoss   新增验光数据页面 
128
 
  				uni.navigateTo({
31dea37da   喻鹏   新增验光单和修改验光单 
129
130
131
 
  					// kinds 参数为 1 表示添加新的验光单， 2 表示更新验光单
  					// name 表示修改的人名儿，pd瞳距
  					url:'../newOpticsData/newOpticsData?kinds='+item+'&index='+index
863d3aa95   BigBoss   新增验光数据页面 
132
 
  				})
5b513503f   BigBoss   验光数据页面 
133
 
  			}
156736a2e   尹聃   样式修改 
134
135
136
137
138
 
  		}
  	}
  </script>
  
  <style lang="scss">
5b513503f   BigBoss   验光数据页面 
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
  	.wrap{
  		min-height: 100vh;
  		width: 100%;
  		background-color: #F2F2F2;
  		.header{
  			height: 304rpx;
  			width: 100%;
  			background-color: #FFFFFF;
  			display: flex;
  			justify-content: space-around;	
  			align-items: center;
  			view{
  				height: 210rpx;
  				width: 304rpx;
  				background: #FDF7F5;
  				border-radius: 4px;
  				border-radius: 4px;
  				display: flex;
  				flex-direction: column;
  				align-items: center;
  				justify-content: center;
  				text{
  					font-size: 12px;
  					color: #333333;
  				}
  				image{
  					height: 144rpx;
  					width: 144rpx;
  				}
  			}
  		}
  		.dataMenu{
  			margin-top: 20rpx;
  			box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
  			width: 100%;
  			background-color: #FFFFFF;
31dea37da   喻鹏   新增验光单和修改验光单 
175
 
  			margin-bottom: 120rpx;
5b513503f   BigBoss   验光数据页面 
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
  			.item{
  				padding: 0 40rpx;
  				.loveDataInfo{
  					padding: 0 44rpx 0 70rpx;
  					display: flex;
  					justify-content: space-around;
  					flex-direction: column;
  					align-items: flex-start;
  					.dataInfoItem{
  						font-size: 12px;
  						color: #333333;
  						margin-bottom: 34rpx;
  						text{
  							font-size: 12px;
  							color: #2A2A2A;
  							margin-right: 20rpx;
  						}
  					}
  				}
  			}
  		}
  		.footer{
  			width: 100%;
  			position: fixed;
  			bottom: 0;
  			left: 0;
  			.btn{
  				width: 100%;
  				height: 112rpx;
  				line-height: 112rpx;
  				background: #FF6B4A;
  				font-size: 16px;
  				color: #FFFFFF;
  			}
  		}
  	}
863d3aa95   BigBoss   新增验光数据页面 
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
 
  	.popUpWrap{
  		height: 850rpx;
  		width: 542rpx;
  		background-color: #FFFFFF;
  		border-radius: 4px;
  		border: 1px solid #979797;
  		.closeBtn{
  			height: 28rpx;
  			width: 28rpx;
  			// border: 1px solid red;
  			position: absolute;
  			top: 20rpx;
  			right: 20rpx;
  		}
  		.glassInfo{
  			height: 474rpx;
  			width: 528rpx;
  		}
  		.dataInfo{
  			height: 850rpx;
  			width: 542rpx;
  		}
  	}
  	.popUpWrap1{
  		height: 474rpx;
  		width: 528rpx;
  		border-radius: 4px;
  		border: 1px solid #979797;
  	}
156736a2e   尹聃   样式修改 
241
242
 
  	
  </style>