Adam / gulu-vue

Blame view

src/pages/addOpticsData/addOpticsData.vue 5.61 KB
edit raw normal view history
9a8f39ae3   BigBoss   订单 
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
15
 
  		</uni-popup>
  		<!-- 点击弹窗部分 -->
5b513503f   BigBoss   验光数据页面 
16
 
  		<view class="header">
863d3aa95   BigBoss   新增验光数据页面 
17
 
  			<view class="headerLeft" @click=changeTap(0)>
5b513503f   BigBoss   验光数据页面 
18
19
20
 
  				<text>如何查看验光单？</text>
  				<image src="../../static/dataLook.png" mode="aspectFit"></image>
  			</view>
863d3aa95   BigBoss   新增验光数据页面 
21
 
  			<view class="headerRight" @click=changeTap(1)>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
  		<view class="dataMenu">
  			<uni-collapse accordion="true">
  				<view class="item" v-for="(loveItem,index) in loveList" :key="index">
  					<uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
  					    <view class="loveDataInfo">
  							<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>
  					    </view>
  					</uni-collapse-item>
  				</view>
  			</uni-collapse>
  		</view>
  		<view class="footer">
863d3aa95   BigBoss   新增验光数据页面 
50
 
  			<button class="btn" type="default" @click="toNewData">新建验光单</button>
5b513503f   BigBoss   验光数据页面 
51
 
  		</view>
9a8f39ae3   BigBoss   订单 
52
53
 
  	</view>
  </template>
5b513503f   BigBoss   验光数据页面 
54
55
56
 
  <script>
  	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
  	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
863d3aa95   BigBoss   新增验光数据页面 
57
 
  	import UniPopup from '@/components/UniPopup/uni-popup.vue'
5b513503f   BigBoss   验光数据页面 
58
59
 
  	import store from '@/store';
  	export default {
863d3aa95   BigBoss   新增验光数据页面 
60
 
  		components: {UniCollapse,UniCollapseItem,UniPopup},
9a8f39ae3   BigBoss   订单 
61
62
 
  		data() {
  			return {
863d3aa95   BigBoss   新增验光数据页面 
63
 
  				whichTap:0
9a8f39ae3   BigBoss   订单 
64
 
  			};
5b513503f   BigBoss   验光数据页面 
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
  		},
  		onLoad: function(option) {
  			//获取关心的人列表
  			store.dispatch('myLoveList/getLoveList', {
  				uid: "1",
  			}); 
  		},
  		computed:{
  			loveList() {
  				console.log(this.$store.state.myLoveList.loveList)
  				return this.$store.state.myLoveList.loveList || []
  			},
  		},
  		methods:{
863d3aa95   BigBoss   新增验光数据页面 
79
80
81
 
  			changeTap(item){
  				this.whichTap = item
  				this.$refs.popup.open()
5b513503f   BigBoss   验光数据页面 
82
83
84
85
 
  			},
  			//给时间搞一个nice的格式
  			getRightTime(time){
  				//如果小于10 则返回'0'+m
863d3aa95   BigBoss   新增验光数据页面 
86
87
88
89
90
91
92
93
 
  				// 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   合并冲突 
94
 
  				// console.log(newTime)
863d3aa95   BigBoss   新增验光数据页面 
95
96
 
  				// return newTime.replace(/-/g, '/')
  				return time
5b513503f   BigBoss   验光数据页面 
97
98
 
  			},
  			getFirstName(name){
5b513503f   BigBoss   验光数据页面 
99
 
  				return name.substring(0,1)
863d3aa95   BigBoss   新增验光数据页面 
100
101
102
103
104
 
  			},
  			toNewData(){
  				uni.navigateTo({
  					url:'../newOpticsData/newOpticsData'
  				})
5b513503f   BigBoss   验光数据页面 
105
 
  			}
9a8f39ae3   BigBoss   订单 
106
107
108
109
110
 
  		}
  	}
  </script>
  
  <style lang="scss">
5b513503f   BigBoss   验光数据页面 
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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
175
176
177
178
179
180
181
182
 
  	.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;
  			.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   新增验光数据页面 
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
 
  	.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;
  	}
5b513503f   BigBoss   验光数据页面 
212
9a8f39ae3   BigBoss   订单 
213
 
  </style>