Adam / gulu-vue

Download as
Browse Code »

Commit 863d3aa9569f8e91bc8618f11b56dd9fe55930d5

Authored by BigBoss
1 parent d1ce60f3df
Exists in master

新增验光数据页面

Showing 14 changed files with 1555 additions and 30 deletions   Show diff stats
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @863d3aa
1 <template> 1 <template>
2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" 2 <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
3 class="uni-collapse-cell"> 3 class="uni-collapse-cell">
4 <view class="uni-collapse-cell__title" @click="onClick"> 4 <view class="uni-collapse-cell__title" @click="onClick">
5 <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view> 5 <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view>
6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> 6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" />
7 <text class="uni-collapse-cell__title-text">{{ title }}</text> 7 <text class="uni-collapse-cell__title-text">{{ title }}</text>
8 <text class="uni-collapse-cell__time-text">{{ time }}</text> 8 <text class="uni-collapse-cell__time-text">{{ time }}</text>
9 <!-- #ifdef MP-ALIPAY --> 9 <!-- #ifdef MP-ALIPAY -->
10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
11 class="uni-collapse-cell__title-arrow"> 11 class="uni-collapse-cell__title-arrow">
12 <uni-icons color="#bbb" size="20" type="arrowdown" /> 12 <uni-icons color="#bbb" size="20" type="arrowdown" />
13 </view> 13 </view>
14 <!-- #endif --> 14 <!-- #endif -->
15 <!-- #ifndef MP-ALIPAY --> 15 <!-- #ifndef MP-ALIPAY -->
16 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 16 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
17 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> 17 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" />
18 <!-- #endif --> 18 <!-- #endif -->
19 </view> 19 </view>
20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> 20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content">
21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" 21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper"
22 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"> 22 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}">
23 <slot /> 23 <slot />
24 </view> 24 </view>
25 </view> 25 </view>
26 </view> 26 </view>
27 </template> 27 </template>
28 28
29 <script> 29 <script>
30 import UniIcons from '../UniIcons/UniIcons.vue' 30 import UniIcons from '../UniIcons/UniIcons.vue'
31 export default { 31 export default {
32 name: 'UniCollapseItem', 32 name: 'UniCollapseItem',
33 components: { 33 components: {
34 UniIcons 34 UniIcons
35 }, 35 },
36 props: { 36 props: {
37 title: { 37 title: {
38 // 列表标题 38 // 列表标题
39 type: String, 39 type: String,
40 default: '' 40 default: ''
41 }, 41 },
42 time: { 42 time: {
43 // 列表时间 朱海涛加的，验光数据需要 43 // 列表时间 朱海涛加的，验光数据需要
44 type: String, 44 type: String,
45 default: '' 45 default: ''
46 }, 46 },
47 name: { 47 name: {
48 // 唯一标识符 48 // 唯一标识符
49 type: [Number, String], 49 type: [Number, String],
50 default: 0 50 default: 0
51 }, 51 },
52 disabled: { 52 disabled: {
53 // 是否禁用 53 // 是否禁用
54 type: Boolean, 54 type: Boolean,
55 default: false 55 default: false
56 }, 56 },
57 showAnimation: { 57 showAnimation: {
58 // 是否显示动画 58 // 是否显示动画
59 type: Boolean, 59 type: Boolean,
60 default: false 60 default: false
61 }, 61 },
62 open: { 62 open: {
63 // 是否展开 63 // 是否展开
64 type: Boolean, 64 type: Boolean,
65 default: false 65 default: false
66 }, 66 },
67 thumb: { 67 thumb: {
68 // 缩略图 68 // 缩略图
69 type: String, 69 type: String,
70 default: '' 70 default: ''
71 }, 71 },
72 iconText:{ 72 iconText:{
73 //名字头像 73 //名字头像
74 type:String, 74 type:String,
75 default:'' 75 default:''
76 } 76 }
77 }, 77 },
78 data() { 78 data() {
79 return { 79 return {
80 isOpen: false, 80 isOpen: false,
81 background: '' 81 background: ''
82 82
83 } 83 }
84 }, 84 },
85 watch: { 85 watch: {
86 open(val) { 86 open(val) {
87 this.isOpen = val 87 this.isOpen = val
88 } 88 }
89 }, 89 },
90 inject: ['collapse'], 90 inject: ['collapse'],
91 created() { 91 created() {
92 this.isOpen = this.open 92 this.isOpen = this.open
93 this.nameSync = this.name ? this.name : this.collapse.childrens.length 93 this.nameSync = this.name ? this.name : this.collapse.childrens.length
94 this.collapse.childrens.push(this) 94 this.collapse.childrens.push(this)
95 if (String(this.collapse.accordion) === 'true') { 95 if (String(this.collapse.accordion) === 'true') {
96 if (this.isOpen) { 96 if (this.isOpen) {
97 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] 97 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
98 if (lastEl) { 98 if (lastEl) {
99 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false 99 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
100 } 100 }
101 } 101 }
102 } 102 }
103 }, 103 },
104 computed:{ 104 computed:{
105 //给头像搞个随机背景颜色，验光数据页面需要 105 //给头像搞个随机背景颜色，验光数据页面需要
106 getRandomColor(){ 106 getRandomColor(){
107 let r = Math.floor(Math.random()*256); 107 let r = Math.floor(Math.random()*256);
108 let g = Math.floor(Math.random()*256); 108 let g = Math.floor(Math.random()*256);
109 let b = Math.floor(Math.random()*256); 109 let b = Math.floor(Math.random()*256);
110 let color = '#'+r.toString(16)+g.toString(16)+b.toString(16); 110 let color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
111 this.background = color 111 this.background = color
112 // return color; 112 // return color;
113 } 113 }
114 }, 114 },
115 methods: { 115 methods: {
116 onClick() { 116 onClick() {
117 if (this.disabled) { 117 if (this.disabled) {
118 return 118 return
119 } 119 }
120 if (String(this.collapse.accordion) === 'true') { 120 if (String(this.collapse.accordion) === 'true') {
121 this.collapse.childrens.forEach(vm => { 121 this.collapse.childrens.forEach(vm => {
122 if (vm === this) { 122 if (vm === this) {
123 return 123 return
124 } 124 }
125 vm.isOpen = false 125 vm.isOpen = false
126 }) 126 })
127 } 127 }
128 this.isOpen = !this.isOpen 128 this.isOpen = !this.isOpen
129 this.collapse.onChange && this.collapse.onChange() 129 this.collapse.onChange && this.collapse.onChange()
130 this.$forceUpdate() 130 this.$forceUpdate()
131 // console.log(this.isOpen) 131 // console.log(this.isOpen)
132 }, 132 },
133 } 133 }
134 } 134 }
135 </script> 135 </script>
136 136
137 <style lang="scss" scoped> 137 <style lang="scss" scoped>
138 @import '@/uni.scss'; 138 @import '@/uni.scss';
139 139
140 .uni-collapse-cell { 140 .uni-collapse-cell {
141 flex-direction: column; 141 flex-direction: column;
142 border-color: #FFFFFF; 142 border-color: #FFFFFF;
143 border-bottom-width: 1px; 143 border-bottom-width: 1px;
144 border-bottom-style: solid; 144 border-bottom-style: solid;
145 } 145 }
146 146
147 147
148 .uni-collapse-cell--hover { 148 .uni-collapse-cell--hover {
149 background-color: #FFFFFF; 149 background-color: #FFFFFF;
150 } 150 }
151 151
152 .uni-collapse-cell--open { 152 .uni-collapse-cell--open {
153 background-color: #FFFFFF; 153 background-color: #FFFFFF;
154 } 154 }
155 155
156 .uni-collapse-cell--disabled { 156 .uni-collapse-cell--disabled {
157 background-color: #FFFFFF; 157 background-color: #FFFFFF;
158 // opacity: 0.3; 158 // opacity: 0.3;
159 } 159 }
160 160
161 161
162 .uni-collapse-cell--hide { 162 .uni-collapse-cell--hide {
163 height: 48px; 163 height: 48px;
164 } 164 }
165 165
166 .uni-collapse-cell--animation { 166 .uni-collapse-cell--animation {
167 transition: transform all 0.3s ease; 167 transition: transform all 0.5s ease;
168 transition-property: transform; 168 transition-property: transform;
169 transition-duration: 0.3s; 169 transition-duration: 0.5s;
170 transition-timing-function: ease; 170 transition-timing-function: ease;
171 } 171 }
172 172
173 .uni-collapse-cell__title { 173 .uni-collapse-cell__title {
174 // padding: 12px 12px; 174 // padding: 12px 12px;
175 font-size: 16px; 175 font-size: 16px;
176 color: #333333; 176 color: #333333;
177 position: relative; 177 position: relative;
178 /* #ifndef APP-NVUE */ 178 /* #ifndef APP-NVUE */
179 display: flex; 179 display: flex;
180 width: 100%; 180 width: 100%;
181 box-sizing: border-box; 181 box-sizing: border-box;
182 /* #endif */ 182 /* #endif */
183 height: 48px; 183 height: 48px;
184 line-height: 24px; 184 line-height: 24px;
185 flex-direction: row; 185 flex-direction: row;
186 justify-content: space-between; 186 justify-content: space-between;
187 align-items: center; 187 align-items: center;
188 } 188 }
189 .uni-collapse-cell__title-iconText{ 189 .uni-collapse-cell__title-iconText{
190 border: 1px solid #FFFFFF; 190 border: 1px solid #FFFFFF;
191 height: 50rpx; 191 height: 50rpx;
192 width: 50rpx; 192 width: 50rpx;
193 border-radius: 26rpx; 193 border-radius: 26rpx;
194 // background-color: #47A6F0; 194 // background-color: #47A6F0;
195 font-size: 12px; 195 font-size: 12px;
196 color: #FFFFFF; 196 color: #FFFFFF;
197 line-height: 50rpx; 197 line-height: 50rpx;
198 text-align: center; 198 text-align: center;
199 margin-right: 20rpx; 199 margin-right: 20rpx;
200 } 200 }
201 .uni-collapse-cell__title:active { 201 .uni-collapse-cell__title:active {
202 background-color: #FFFFFF; 202 background-color: #FFFFFF;
203 } 203 }
204 204
205 .uni-collapse-cell__title-img { 205 .uni-collapse-cell__title-img {
206 height: $uni-img-size-base; 206 height: $uni-img-size-base;
207 width: $uni-img-size-base; 207 width: $uni-img-size-base;
208 margin-right: 10px; 208 margin-right: 10px;
209 // height: 50rpx; 209 // height: 50rpx;
210 // width: 50rpx; 210 // width: 50rpx;
211 // border-radius: 25rpx; 211 // border-radius: 25rpx;
212 // border-radius: 25rpx; 212 // border-radius: 25rpx;
213 } 213 }
214 214
215 .uni-collapse-cell__title-arrow { 215 .uni-collapse-cell__title-arrow {
216 width: 20px; 216 width: 20px;
217 height: 20px; 217 height: 20px;
218 transform: rotate(-90deg); 218 transform: rotate(-90deg);
219 transform-origin: center center; 219 transform-origin: center center;
220 220
221 } 221 }
222 222
223 .uni-collapse-cell__title-arrow-active { 223 .uni-collapse-cell__title-arrow-active {
224 transform: rotate(0deg); 224 transform: rotate(0deg);
225 } 225 }
226 226
227 .uni-collapse-cell__title-text { 227 .uni-collapse-cell__title-text {
228 flex: 1; 228 flex: 1;
229 font-size: $uni-font-size-base; 229 font-size: $uni-font-size-base;
230 /* #ifndef APP-NVUE */ 230 /* #ifndef APP-NVUE */
231 white-space: nowrap; 231 white-space: nowrap;
232 color: inherit; 232 color: inherit;
233 /* #endif */ 233 /* #endif */
234 /* #ifdef APP-NVUE */ 234 /* #ifdef APP-NVUE */
235 lines: 1; 235 lines: 1;
236 /* #endif */ 236 /* #endif */
237 overflow: hidden; 237 overflow: hidden;
238 text-overflow: ellipsis; 238 text-overflow: ellipsis;
239 font-size: 12px; 239 font-size: 12px;
240 color: #333333; 240 color: #333333;
241 } 241 }
242 .uni-collapse-cell__time-text{ 242 .uni-collapse-cell__time-text{
243 font-size: 12px; 243 font-size: 12px;
244 color: #999999; 244 color: #999999;
245 margin-right: 20rpx; 245 margin-right: 20rpx;
246 } 246 }
247 .uni-collapse-cell__content { 247 .uni-collapse-cell__content {
248 overflow: hidden; 248 overflow: hidden;
249 } 249 }
250 250
251 .uni-collapse-cell__wrapper { 251 .uni-collapse-cell__wrapper {
252 /* #ifndef APP-NVUE */ 252 /* #ifndef APP-NVUE */
253 display: flex; 253 display: flex;
254 /* #endif */ 254 /* #endif */
255 flex-direction: column; 255 flex-direction: column;
256 } 256 }
257 257
258 .uni-collapse-cell__content--hide { 258 .uni-collapse-cell__content--hide {
259 // height: 0px; 259 // height: 0px;
260 // line-height: 0px; 260 // line-height: 0px;
261 } 261 }
262 </style> 262 </style>
263 263
src/components/UniPopup/message.js
Diff comments   View file @863d3aa
File was created 1 export default {
2 created() {
3 if (this.type === 'message') {
4 // 获取自组件对象
5 this.maskShow = false
6 this.children = null
7 }
8 },
9 created() {
10 if (this.type === 'message') {
11 // 不显示遮罩
12 this.maskShow = false
13 // 获取子组件对象
14 this.childrenMsg = null
15 }
16 },
17 methods: {
18 customOpen() {
19 if (this.childrenMsg) {
20 this.childrenMsg.open()
21 }
22 },
23 customClose() {
24 if (this.childrenMsg) {
25 this.childrenMsg.close()
26 }
27 }
28 }
29 }
30
src/components/UniPopup/popup.js
Diff comments   View file @863d3aa
File was created 1 import message from './message.js';
2 // 定义 type 类型:弹出类型：top/bottom/center
3 const config = {
4 // 顶部弹出
5 top:'top',
6 // 底部弹出
7 bottom:'bottom',
8 // 居中弹出
9 center:'center',
10 // 消息提示
11 message:'top',
12 // 对话框
13 dialog:'center',
14 // 分享
15 share:'bottom',
16 }
17
18 export default {
19 data(){
20 return {
21 config:config
22 }
23 },
24 mixins: [message],
25 }
26
src/components/UniPopup/uni-popup-dialog.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view class="uni-popup-dialog">
3 <view class="uni-dialog-title">
4 <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
5 </view>
6 <view class="uni-dialog-content">
7 <text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
8 <input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
9 </view>
10 <view class="uni-dialog-button-group">
11 <view class="uni-dialog-button" @click="close">
12 <text class="uni-dialog-button-text">取消</text>
13 </view>
14 <view class="uni-dialog-button uni-border-left" @click="onOk">
15 <text class="uni-dialog-button-text uni-button-color">确定</text>
16 </view>
17 </view>
18
19 </view>
20 </template>
21
22 <script>
23 /**
24 * PopUp 弹出层-对话框样式
25 * @description 弹出层-对话框样式
26 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
27 * @property {String} value input 模式下的默认值
28 * @property {String} placeholder input 模式下输入提示
29 * @property {String} type = [success|warning|info|error] 主题样式
30 * @value success 成功
31 * @value warning 提示
32 * @value info 消息
33 * @value error 错误
34 * @property {String} mode = [base|input] 模式、
35 * @value base 基础对话框
36 * @value input 可输入对话框
37 * @property {String} content 对话框内容
38 * @property {Boolean} beforeClose 是否拦截取消事件
39 * @event {Function} confirm 点击确认按钮触发
40 * @event {Function} close 点击取消按钮触发
41 */
42
43 export default {
44 name: "uniPopupDialog",
45 props: {
46 value: {
47 type: [String, Number],
48 default: ''
49 },
50 placeholder: {
51 type: [String, Number],
52 default: '请输入内容'
53 },
54 /**
55 * 对话框主题 success/warning/info/error 默认 success
56 */
57 type: {
58 type: String,
59 default: 'error'
60 },
61 /**
62 * 对话框模式 base/input
63 */
64 mode: {
65 type: String,
66 default: 'base'
67 },
68 /**
69 * 对话框标题
70 */
71 title: {
72 type: String,
73 default: '提示'
74 },
75 /**
76 * 对话框内容
77 */
78 content: {
79 type: String,
80 default: ''
81 },
82 /**
83 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
84 */
85 beforeClose: {
86 type: Boolean,
87 default: false
88 }
89 },
90 data() {
91 return {
92 dialogType: 'error',
93 focus: false,
94 val: ""
95 }
96 },
97 inject: ['popup'],
98 watch: {
99 type(val) {
100 this.dialogType = val
101 },
102 mode(val) {
103 if (val === 'input') {
104 this.dialogType = 'info'
105 }
106 },
107 value(val) {
108 this.val = val
109 }
110 },
111 created() {
112 // 对话框遮罩不可点击
113 this.popup.mkclick = false
114 if (this.mode === 'input') {
115 this.dialogType = 'info'
116 this.val = this.value
117 } else {
118 this.dialogType = this.type
119 }
120 },
121 mounted() {
122 this.focus = true
123 },
124 methods: {
125 /**
126 * 点击确认按钮
127 */
128 onOk() {
129 this.$emit('confirm', () => {
130 this.popup.close()
131 if (this.mode === 'input') this.val = this.value
132 }, this.mode === 'input' ? this.val : '')
133 },
134 /**
135 * 点击取消按钮
136 */
137 close() {
138 if (this.beforeClose) {
139 this.$emit('close', () => {
140 this.popup.close()
141 })
142 return
143 }
144 this.popup.close()
145 }
146 }
147 }
148 </script>
149
150 <style lang="scss" scoped>
151 .uni-popup-dialog {
152 width: 300px;
153 border-radius: 15px;
154 background-color: #fff;
155 }
156
157 .uni-dialog-title {
158 /* #ifndef APP-NVUE */
159 display: flex;
160 /* #endif */
161 flex-direction: row;
162 justify-content: center;
163 padding-top: 15px;
164 padding-bottom: 5px;
165 }
166
167 .uni-dialog-title-text {
168 font-size: 16px;
169 font-weight: 500;
170 }
171
172 .uni-dialog-content {
173 /* #ifndef APP-NVUE */
174 display: flex;
175 /* #endif */
176 flex-direction: row;
177 justify-content: center;
178 align-items: center;
179 padding: 5px 15px 15px 15px;
180 }
181
182 .uni-dialog-content-text {
183 font-size: 14px;
184 color: #6e6e6e;
185 }
186
187 .uni-dialog-button-group {
188 /* #ifndef APP-NVUE */
189 display: flex;
190 /* #endif */
191 flex-direction: row;
192 border-top-color: #f5f5f5;
193 border-top-style: solid;
194 border-top-width: 1px;
195 }
196
197 .uni-dialog-button {
198 /* #ifndef APP-NVUE */
199 display: flex;
200 /* #endif */
201
202 flex: 1;
203 flex-direction: row;
204 justify-content: center;
205 align-items: center;
206 height: 45px;
207 }
208
209 .uni-border-left {
210 border-left-color: #f0f0f0;
211 border-left-style: solid;
212 border-left-width: 1px;
213 }
214
215 .uni-dialog-button-text {
216 font-size: 14px;
217 }
218
219 .uni-button-color {
220 color: $uni-color-primary;
221 }
222
223 .uni-dialog-input {
224 flex: 1;
225 font-size: 14px;
226 }
227
228 .uni-popup__success {
229 color: $uni-color-success;
230 }
231
232 .uni-popup__warn {
233 color: $uni-color-warning;
234 }
235
236 .uni-popup__error {
237 color: $uni-color-error;
238 }
239
240 .uni-popup__info {
241 color: #909399;
242 }
243 </style>
244
src/components/UniPopup/uni-popup-message.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view class="uni-popup-message" :class="'uni-popup__'+[type]">
3 <text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
4 </view>
5 </template>
6
7 <script>
8
9 /**
10 * PopUp 弹出层-消息提示
11 * @description 弹出层-消息提示
12 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
13 * @property {String} type = [success|warning|info|error] 主题样式
14 * @value success 成功
15 * @value warning 提示
16 * @value info 消息
17 * @value error 错误
18 * @property {String} message 消息提示文字
19 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
20 */
21
22 export default {
23 name: 'UniPopupMessage',
24 props: {
25 /**
26 * 主题 success/warning/info/error 默认 success
27 */
28 type: {
29 type: String,
30 default: 'success'
31 },
32 /**
33 * 消息文字
34 */
35 message: {
36 type: String,
37 default: ''
38 },
39 /**
40 * 显示时间，设置为 0 则不会自动关闭
41 */
42 duration: {
43 type: Number,
44 default: 3000
45 }
46 },
47 inject: ['popup'],
48 data() {
49 return {}
50 },
51 created() {
52 this.popup.childrenMsg = this
53 },
54 methods: {
55 open() {
56 if (this.duration === 0) return
57 clearTimeout(this.popuptimer)
58 this.popuptimer = setTimeout(() => {
59 this.popup.close()
60 }, this.duration)
61 },
62 close() {
63 clearTimeout(this.popuptimer)
64 }
65 }
66 }
67 </script>
68 <style lang="scss" scoped>
69 .uni-popup-message {
70 /* #ifndef APP-NVUE */
71 display: flex;
72 /* #endif */
73 flex-direction: row;
74 background-color: #e1f3d8;
75 padding: 10px 15px;
76 border-color: #eee;
77 border-style: solid;
78 border-width: 1px;
79 }
80 .uni-popup-message-text {
81 font-size: 14px;
82 padding: 0;
83 }
84
85 .uni-popup__success {
86 background-color: #e1f3d8;
87 }
88
89 .uni-popup__success-text {
90 color: #67C23A;
91 }
92
93 .uni-popup__warn {
94 background-color: #faecd8;
95 }
96
97 .uni-popup__warn-text {
98 color: #E6A23C;
99 }
100
101 .uni-popup__error {
102 background-color: #fde2e2;
103 }
104
105 .uni-popup__error-text {
106 color: #F56C6C;
107 }
108
109 .uni-popup__info {
110 background-color: #F2F6FC;
111 }
112
113 .uni-popup__info-text {
114 color: #909399;
115 }
116 </style>
117
src/components/UniPopup/uni-popup-share.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view class="uni-popup-share">
3 <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
4 <view class="uni-share-content">
5 <view class="uni-share-content-box">
6 <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
7 <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
8 <text class="uni-share-text">{{item.text}}</text>
9 </view>
10
11 </view>
12 </view>
13 <view class="uni-share-button-box">
14 <button class="uni-share-button" @click="close">取消</button>
15 </view>
16 </view>
17 </template>
18
19 <script>
20 export default {
21 name: 'UniPopupShare',
22 props: {
23 title: {
24 type: String,
25 default: '分享到'
26 }
27 },
28 inject: ['popup'],
29 data() {
30 return {
31 bottomData: [{
32 text: '微信',
33 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
34 name: 'wx'
35 },
36 {
37 text: '支付宝',
38 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
39 name: 'wx'
40 },
41 {
42 text: 'QQ',
43 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
44 name: 'qq'
45 },
46 {
47 text: '新浪',
48 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
49 name: 'sina'
50 },
51 {
52 text: '百度',
53 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
54 name: 'copy'
55 },
56 {
57 text: '其他',
58 icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
59 name: 'more'
60 }
61 ]
62 }
63 },
64 created() {},
65 methods: {
66 /**
67 * 选择内容
68 */
69 select(item, index) {
70 this.$emit('select', {
71 item,
72 index
73 }, () => {
74 this.popup.close()
75 })
76 },
77 /**
78 * 关闭窗口
79 */
80 close() {
81 this.popup.close()
82 }
83 }
84 }
85 </script>
86 <style lang="scss" scoped>
87 .uni-popup-share {
88 background-color: #fff;
89 }
90 .uni-share-title {
91 /* #ifndef APP-NVUE */
92 display: flex;
93 /* #endif */
94 flex-direction: row;
95 align-items: center;
96 justify-content: center;
97 height: 40px;
98 }
99 .uni-share-title-text {
100 font-size: 14px;
101 color: #666;
102 }
103 .uni-share-content {
104 /* #ifndef APP-NVUE */
105 display: flex;
106 /* #endif */
107 flex-direction: row;
108 justify-content: center;
109 padding-top: 10px;
110 }
111
112 .uni-share-content-box {
113 /* #ifndef APP-NVUE */
114 display: flex;
115 /* #endif */
116 flex-direction: row;
117 flex-wrap: wrap;
118 width: 360px;
119 }
120
121 .uni-share-content-item {
122 width: 90px;
123 /* #ifndef APP-NVUE */
124 display: flex;
125 /* #endif */
126 flex-direction: column;
127 justify-content: center;
128 padding: 10px 0;
129 align-items: center;
130 }
131
132 .uni-share-content-item:active {
133 background-color: #f5f5f5;
134 }
135
136 .uni-share-image {
137 width: 30px;
138 height: 30px;
139 }
140
141 .uni-share-text {
142 margin-top: 10px;
143 font-size: 14px;
144 color: #3B4144;
145 }
146
147 .uni-share-button-box {
148 /* #ifndef APP-NVUE */
149 display: flex;
150 /* #endif */
151 flex-direction: row;
152 padding: 10px 15px;
153 }
154
155 .uni-share-button {
156 flex: 1;
157 border-radius: 50px;
158 color: #666;
159 font-size: 16px;
160 }
161
162 .uni-share-button::after {
163 border-radius: 50px;
164 }
165 </style>
166
src/components/UniPopup/uni-popup.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
3 <uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
4 @click="onTap" />
5 <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
6 <view class="uni-popup__wrapper-box" @click.stop="clear">
7 <slot />
8 </view>
9 </uni-transition>
10 </view>
11 </template>
12
13 <script>
14 import uniTransition from '../uni-transition/uni-transition.vue'
15 import popup from './popup.js'
16 /**
17 * PopUp 弹出层
18 * @description 弹出层组件，为了解决遮罩弹层的问题
19 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
20 * @property {String} type = [top|center|bottom] 弹出方式
21 * @value top 顶部弹出
22 * @value center 中间弹出
23 * @value bottom 底部弹出
24 * @value message 消息提示
25 * @value dialog 对话框
26 * @value share 底部分享示例
27 * @property {Boolean} animation = [ture|false] 是否开启动画
28 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
29 * @event {Function} change 打开关闭弹窗触发，e={show: false}
30 */
31
32 export default {
33 name: 'UniPopup',
34 components: {
35 uniTransition
36 },
37 props: {
38 // 开启动画
39 animation: {
40 type: Boolean,
41 default: true
42 },
43 // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
44 // message: 消息提示 ; dialog : 对话框
45 type: {
46 type: String,
47 default: 'center'
48 },
49 // maskClick
50 maskClick: {
51 type: Boolean,
52 default: true
53 }
54 },
55 provide() {
56 return {
57 popup: this
58 }
59 },
60 mixins: [popup],
61 watch: {
62 /**
63 * 监听type类型
64 */
65 type: {
66 handler: function(newVal) {
67 this[this.config[newVal]]()
68 },
69 immediate: true
70 },
71 /**
72 * 监听遮罩是否可点击
73 * @param {Object} val
74 */
75 maskClick(val) {
76 this.mkclick = val
77 }
78 },
79 data() {
80 return {
81 duration: 300,
82 ani: [],
83 showPopup: false,
84 showTrans: false,
85 maskClass: {
86 'position': 'fixed',
87 'bottom': 0,
88 'top': 0,
89 'left': 0,
90 'right': 0,
91 'backgroundColor': 'rgba(0, 0, 0, 0.4)'
92 },
93 transClass: {
94 'position': 'fixed',
95 'left': 0,
96 'right': 0,
97 },
98 maskShow: true,
99 mkclick: true,
100 popupstyle: 'top'
101 }
102 },
103 created() {
104 this.mkclick = this.maskClick
105 if (this.animation) {
106 this.duration = 300
107 } else {
108 this.duration = 0
109 }
110 },
111 methods: {
112 clear(e) {
113 // TODO nvue 取消冒泡
114 e.stopPropagation()
115 },
116 open() {
117 this.showPopup = true
118 this.$nextTick(() => {
119 new Promise(resolve => {
120 clearTimeout(this.timer)
121 this.timer = setTimeout(() => {
122 this.showTrans = true
123 // fixed by mehaotian 兼容 app 端
124 this.$nextTick(() => {
125 resolve();
126 })
127 }, 50);
128 }).then(res => {
129 // 自定义打开事件
130 clearTimeout(this.msgtimer)
131 this.msgtimer = setTimeout(() => {
132 this.customOpen && this.customOpen()
133 }, 100)
134 this.$emit('change', {
135 show: true,
136 type: this.type
137 })
138 })
139 })
140 },
141 close(type) {
142 this.showTrans = false
143 this.$nextTick(() => {
144 this.$emit('change', {
145 show: false,
146 type: this.type
147 })
148 clearTimeout(this.timer)
149 // 自定义关闭事件
150 this.customOpen && this.customClose()
151 this.timer = setTimeout(() => {
152 this.showPopup = false
153 }, 300)
154 })
155 },
156 onTap() {
157 if (!this.mkclick) return
158 this.close()
159 },
160 /**
161 * 顶部弹出样式处理
162 */
163 top() {
164 this.popupstyle = 'top'
165 this.ani = ['slide-top']
166 this.transClass = {
167 'position': 'fixed',
168 'left': 0,
169 'right': 0,
170 }
171 },
172 /**
173 * 底部弹出样式处理
174 */
175 bottom() {
176 this.popupstyle = 'bottom'
177 this.ani = ['slide-bottom']
178 this.transClass = {
179 'position': 'fixed',
180 'left': 0,
181 'right': 0,
182 'bottom': 0
183 }
184 },
185 /**
186 * 中间弹出样式处理
187 */
188 center() {
189 this.popupstyle = 'center'
190 this.ani = ['zoom-out', 'fade']
191 this.transClass = {
192 'position': 'fixed',
193 /* #ifndef APP-NVUE */
194 'display': 'flex',
195 'flexDirection': 'column',
196 /* #endif */
197 'bottom': 0,
198 'left': 0,
199 'right': 0,
200 'top': 0,
201 'justifyContent': 'center',
202 'alignItems': 'center'
203 }
204 }
205 }
206 }
207 </script>
208 <style lang="scss" scoped>
209 .uni-popup {
210 position: fixed;
211 /* #ifndef APP-NVUE */
212 z-index: 99;
213 /* #endif */
214 }
215
216 .uni-popup__mask {
217 position: absolute;
218 top: 0;
219 bottom: 0;
220 left: 0;
221 right: 0;
222 background-color: $uni-bg-color-mask;
223 opacity: 0;
224 }
225
226 .mask-ani {
227 transition-property: opacity;
228 transition-duration: 0.2s;
229 }
230
231 .uni-top-mask {
232 opacity: 1;
233 }
234
235 .uni-bottom-mask {
236 opacity: 1;
237 }
238
239 .uni-center-mask {
240 opacity: 1;
241 }
242
243 .uni-popup__wrapper {
244 /* #ifndef APP-NVUE */
245 display: block;
246 /* #endif */
247 position: absolute;
248 }
249
250 .top {
251 /* #ifdef H5 */
252 top: var(--window-top);
253 /* #endif */
254 /* #ifndef H5 */
255 top: 0;
256 /* #endif */
257 }
258
259 .bottom {
260 bottom: 0;
261 }
262
263 .uni-popup__wrapper-box {
264 /* #ifndef APP-NVUE */
265 display: block;
266 /* #endif */
267 position: relative;
268 /* iphonex 等安全区设置，底部安全区适配 */
269 /* #ifndef APP-NVUE */
270 padding-bottom: constant(safe-area-inset-bottom);
271 padding-bottom: env(safe-area-inset-bottom);
272 /* #endif */
273 }
274
275 .content-ani {
276 // transition: transform 0.3s;
277 transition-property: transform, opacity;
278 transition-duration: 0.2s;
279 }
280
281
282 .uni-top-content {
283 transform: translateY(0);
284 }
285
286 .uni-bottom-content {
287 transform: translateY(0);
288 }
289
290 .uni-center-content {
291 transform: scale(1);
292 opacity: 1;
293 }
294 </style>
295
src/components/uni-transition/uni-transition.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
3 @click="change">
4 <slot></slot>
5 </view>
6 </template>
7
8 <script>
9 // #ifdef APP-NVUE
10 const animation = uni.requireNativePlugin('animation');
11 // #endif
12 /**
13 * Transition 过渡动画
14 * @description 简单过渡动画组件
15 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
16 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
17 * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
18 * @value fade 渐隐渐出过渡
19 * @value slide-top 由上至下过渡
20 * @value slide-right 由右至左过渡
21 * @value slide-bottom 由下至上过渡
22 * @value slide-left 由左至右过渡
23 * @value zoom-in 由小到大过渡
24 * @value zoom-out 由大到小过渡
25 * @property {Number} duration 过渡动画持续时间
26 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
27 */
28 export default {
29 name: 'uniTransition',
30 props: {
31 show: {
32 type: Boolean,
33 default: false
34 },
35 modeClass: {
36 type: Array,
37 default () {
38 return []
39 }
40 },
41 duration: {
42 type: Number,
43 default: 300
44 },
45 styles: {
46 type: Object,
47 default () {
48 return {}
49 }
50 }
51 },
52 data() {
53 return {
54 isShow: false,
55 transform: '',
56 ani: { in: '',
57 active: ''
58 }
59 };
60 },
61 watch: {
62 show: {
63 handler(newVal) {
64 if (newVal) {
65 this.open()
66 } else {
67 this.close()
68 }
69 },
70 immediate: true
71 }
72 },
73 computed: {
74 stylesObject() {
75 let styles = {
76 ...this.styles,
77 'transition-duration': this.duration / 1000 + 's'
78 }
79 let transfrom = ''
80 for (let i in styles) {
81 let line = this.toLine(i)
82 transfrom += line + ':' + styles[i] + ';'
83 }
84 return transfrom
85 }
86 },
87 created() {
88 // this.timer = null
89 // this.nextTick = (time = 50) => new Promise(resolve => {
90 // clearTimeout(this.timer)
91 // this.timer = setTimeout(resolve, time)
92 // return this.timer
93 // });
94 },
95 methods: {
96 change() {
97 this.$emit('click', {
98 detail: this.isShow
99 })
100 },
101 open() {
102 clearTimeout(this.timer)
103 this.isShow = true
104 this.transform = ''
105 this.ani.in = ''
106 for (let i in this.getTranfrom(false)) {
107 if (i === 'opacity') {
108 this.ani.in = 'fade-in'
109 } else {
110 this.transform += `${this.getTranfrom(false)[i]} `
111 }
112 }
113 this.$nextTick(() => {
114 setTimeout(() => {
115 this._animation(true)
116 }, 50)
117 })
118
119 },
120 close(type) {
121 clearTimeout(this.timer)
122 this._animation(false)
123 },
124 _animation(type) {
125 let styles = this.getTranfrom(type)
126 // #ifdef APP-NVUE
127 if(!this.$refs['ani']) return
128 animation.transition(this.$refs['ani'].ref, {
129 styles,
130 duration: this.duration, //ms
131 timingFunction: 'ease',
132 needLayout: false,
133 delay: 0 //ms
134 }, () => {
135 if (!type) {
136 this.isShow = false
137 }
138 this.$emit('change', {
139 detail: this.isShow
140 })
141 })
142 // #endif
143 // #ifndef APP-NVUE
144 this.transform = ''
145 for (let i in styles) {
146 if (i === 'opacity') {
147 this.ani.in = `fade-${type?'out':'in'}`
148 } else {
149 this.transform += `${styles[i]} `
150 }
151 }
152 this.timer = setTimeout(() => {
153 if (!type) {
154 this.isShow = false
155 }
156 this.$emit('change', {
157 detail: this.isShow
158 })
159
160 }, this.duration)
161 // #endif
162
163 },
164 getTranfrom(type) {
165 let styles = {
166 transform: ''
167 }
168 this.modeClass.forEach((mode) => {
169 switch (mode) {
170 case 'fade':
171 styles.opacity = type ? 1 : 0
172 break;
173 case 'slide-top':
174 styles.transform += `translateY(${type?'0':'-100%'}) `
175 break;
176 case 'slide-right':
177 styles.transform += `translateX(${type?'0':'100%'}) `
178 break;
179 case 'slide-bottom':
180 styles.transform += `translateY(${type?'0':'100%'}) `
181 break;
182 case 'slide-left':
183 styles.transform += `translateX(${type?'0':'-100%'}) `
184 break;
185 case 'zoom-in':
186 styles.transform += `scale(${type?1:0.8}) `
187 break;
188 case 'zoom-out':
189 styles.transform += `scale(${type?1:1.2}) `
190 break;
191 }
192 })
193 return styles
194 },
195 _modeClassArr(type) {
196 let mode = this.modeClass
197 if (typeof(mode) !== "string") {
198 let modestr = ''
199 mode.forEach((item) => {
200 modestr += (item + '-' + type + ',')
201 })
202 return modestr.substr(0, modestr.length - 1)
203 } else {
204 return mode + '-' + type
205 }
206 },
207 // getEl(el) {
208 // console.log(el || el.ref || null);
209 // return el || el.ref || null
210 // },
211 toLine(name) {
212 return name.replace(/([A-Z])/g, "-$1").toLowerCase();
213 }
214 }
215 }
216 </script>
217
218 <style>
219 .uni-transition {
220 transition-timing-function: ease;
221 transition-duration: 0.3s;
222 transition-property: transform, opacity;
223 }
224
225 .fade-in {
226 opacity: 0;
227 }
228
229 .fade-active {
230 opacity: 1;
231 }
232
233 .slide-top-in {
234 /* transition-property: transform, opacity; */
235 transform: translateY(-100%);
236 }
237
238 .slide-top-active {
239 transform: translateY(0);
240 /* opacity: 1; */
241 }
242
243 .slide-right-in {
244 transform: translateX(100%);
245 }
246
247 .slide-right-active {
248 transform: translateX(0);
249 }
250
251 .slide-bottom-in {
252 transform: translateY(100%);
253 }
254
255 .slide-bottom-active {
256 transform: translateY(0);
257 }
258
259 .slide-left-in {
260 transform: translateX(-100%);
261 }
262
263 .slide-left-active {
264 transform: translateX(0);
265 opacity: 1;
266 }
267
268 .zoom-in-in {
269 transform: scale(0.8);
270 }
271
272 .zoom-out-active {
273 transform: scale(1);
274 }
275
276 .zoom-out-in {
277 transform: scale(1.2);
278 }
279 </style>
280
1 { 1 {
2 "pages" : [ 2 "pages" : [
3 { 3 {
4 "path" : "pages/index/index", 4 "path" : "pages/user/user",
5 "style" : { 5 "style" : {
6 "navigationBarTitleText" : "商城一览" 6 "navigationBarTitleText" : "我的"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/addOpticsData/addOpticsData", 10 "path" : "pages/addOpticsData/addOpticsData",
11 "style" : { 11 "style" : {
12 "navigationBarTitleText" : "验光数据"} 12 "navigationBarTitleText" : "验光数据"}
13 }, 13 },
14 { 14 {
15 "path" : "pages/user/user", 15 "path" : "pages/index/index",
16 "style" : { 16 "style" : {
17 "navigationBarTitleText" : "我的" 17 "navigationBarTitleText" : "商城一览"
18 } 18 }
19 }, 19 },
20 { 20 {
21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs",
22 "style" : { 22 "style" : {
23 "navigationBarTitleText" : "镜片名称名称" 23 "navigationBarTitleText" : "镜片名称名称"
24 } 24 }
25 }, 25 },
26 { 26 {
27 "path" : "pages/purchaseLenses/purchaseLenses", 27 "path" : "pages/purchaseLenses/purchaseLenses",
28 "style" : { 28 "style" : {
29 "navigationBarTitleText" : "产品选购" 29 "navigationBarTitleText" : "产品选购"
30 } 30 }
31 }, 31 },
32 { 32 {
33 "path" : "pages/lensDetails/lensDetails", 33 "path" : "pages/lensDetails/lensDetails",
34 "style" : { 34 "style" : {
35 "navigationBarTitleText" : "产品详情" 35 "navigationBarTitleText" : "产品详情"
36 } 36 }
37 }, 37 },
38 { 38 {
39 "path" : "pages/myOrderPaying/myOrderPaying", 39 "path" : "pages/myOrderPaying/myOrderPaying",
40 "style" : { 40 "style" : {
41 "navigationBarTitleText" : "我的订单" 41 "navigationBarTitleText" : "我的订单"
42 } 42 }
43 }, 43 },
44 { 44 {
45 "path" : "pages/myOrder/myOrder", 45 "path" : "pages/myOrder/myOrder",
46 "style" : { 46 "style" : {
47 "navigationBarTitleText" : "我的订单" 47 "navigationBarTitleText" : "我的订单"
48 } 48 }
49 }, 49 },
50 { 50 {
51 "path" : "pages/cart/cart", 51 "path" : "pages/cart/cart",
52 "style" : { 52 "style" : {
53 "navigationBarTitleText" : "购物车" 53 "navigationBarTitleText" : "购物车"
54 } 54 }
55 }, 55 },
56 // { 56 // {
57 // "path" : "pages/frameDetail/frameDetail", 57 // "path" : "pages/frameDetail/frameDetail",
58 // "style" : { 58 // "style" : {
59 // "navigationBarTitleText" : "产品详情" 59 // "navigationBarTitleText" : "产品详情"
60 // } 60 // }
61 // }, 61 // },
62 { 62 {
63 "path" : "pages/refundProgress/refundProgress", 63 "path" : "pages/refundProgress/refundProgress",
64 "style" : { 64 "style" : {
65 "navigationBarTitleText" : "申请退款" 65 "navigationBarTitleText" : "申请退款"
66 } 66 }
67 }, 67 },
68 { 68 {
69 "path" : "pages/addAddress/addAddress", 69 "path" : "pages/addAddress/addAddress",
70 "style" : { 70 "style" : {
71 "navigationBarTitleText" : "新增地址" 71 "navigationBarTitleText" : "新增地址"
72 } 72 }
73 }, 73 },
74 { 74 {
75 "path" : "pages/confirmOrder/confirmOrder", 75 "path" : "pages/confirmOrder/confirmOrder",
76 "style" : { 76 "style" : {
77 "navigationBarTitleText" : "确认订单" 77 "navigationBarTitleText" : "确认订单"
78 } 78 }
79 }, 79 },
80 { 80 {
81 "path" : "pages/refundment/refundWays", 81 "path" : "pages/refundment/refundWays",
82 "style" : { 82 "style" : {
83 "navigationBarTitleText" : "退款方式" 83 "navigationBarTitleText" : "退款方式"
84 } 84 }
85 }, 85 },
86 { 86 {
87 "path" : "pages/refundment/refundment", 87 "path" : "pages/refundment/refundment",
88 "style" : { 88 "style" : {
89 "navigationBarTitleText" : "申请退款" 89 "navigationBarTitleText" : "申请退款"
90 } 90 }
91 }, 91 },
92 { 92 {
93 "path" : "pages/predelivery/predelivery", 93 "path" : "pages/predelivery/predelivery",
94 "style" : { 94 "style" : {
95 "navigationBarTitleText" : "待发货" 95 "navigationBarTitleText" : "待发货"
96 } 96 }
97 }, 97 },
98 { 98 {
99 "path" : "pages/customerService/customerService", 99 "path" : "pages/customerService/customerService",
100 "style" : { 100 "style" : {
101 "navigationBarTitleText" : "在线客服" 101 "navigationBarTitleText" : "在线客服"
102 } 102 }
103 }, 103 },
104 { 104 {
105 "path" : "pages/detailStandard/detailStandard_sun", 105 "path" : "pages/detailStandard/detailStandard_sun",
106 "style" : { 106 "style" : {
107 "navigationBarTitleText" : "太阳镜选购页" 107 "navigationBarTitleText" : "太阳镜选购页"
108 } 108 }
109 }, 109 },
110 { 110 {
111 "path" : "pages/detailStandard/detailStandard_k", 111 "path" : "pages/detailStandard/detailStandard_k",
112 "style" : { 112 "style" : {
113 "navigationBarTitleText" : "镜框选购页" 113 "navigationBarTitleText" : "镜框选购页"
114 } 114 }
115 } 115 }
116 116
117 ,{
118 "path" : "pages/newOpticsData/newOpticsData",
119 "style" : {"navigationBarTitleText" : "验光数据"}
120 }
117 ], 121 ],
118 "globalStyle" : { 122 "globalStyle" : {
119 "navigationBarTextStyle" : "black", 123 "navigationBarTextStyle" : "black",
120 "navigationBarTitleText" : "uni-app", 124 "navigationBarTitleText" : "uni-app",
121 "navigationBarBackgroundColor" : "#F8F8F8", 125 "navigationBarBackgroundColor" : "#F8F8F8",
122 "backgroundColor" : "#F8F8F8" 126 "backgroundColor" : "#F8F8F8"
123 }, 127 },
124 "tabBar" : { 128 "tabBar" : {
125 "color" : "#C0C4CC", 129 "color" : "#C0C4CC",
126 "selectedColor" : "#fa436a", 130 "selectedColor" : "#fa436a",
127 "borderStyle" : "black", 131 "borderStyle" : "black",
128 "backgroundColor" : "#ffffff", 132 "backgroundColor" : "#ffffff",
129 "list" : [ 133 "list" : [
130 { 134 {
131 "pagePath" : "pages/index/index", 135 "pagePath" : "pages/index/index",
132 "iconPath" : "static/tab-home.png", 136 "iconPath" : "static/tab-home.png",
133 "selectedIconPath" : "static/tab-home-current.png", 137 "selectedIconPath" : "static/tab-home-current.png",
134 "text" : "首页" 138 "text" : "首页"
135 }, 139 },
136 { 140 {
137 "pagePath" : "pages/cart/cart", 141 "pagePath" : "pages/cart/cart",
138 "iconPath" : "static/tab-cart.png", 142 "iconPath" : "static/tab-cart.png",
139 "selectedIconPath" : "static/tab-cart-current.png", 143 "selectedIconPath" : "static/tab-cart-current.png",
140 "text" : "购物车" 144 "text" : "购物车"
141 }, 145 },
142 { 146 {
143 "pagePath" : "pages/user/user", 147 "pagePath" : "pages/user/user",
144 "iconPath" : "static/tab-my.png", 148 "iconPath" : "static/tab-my.png",
145 "selectedIconPath" : "static/tab-my-current.png", 149 "selectedIconPath" : "static/tab-my-current.png",
146 "text" : "我的" 150 "text" : "我的"
147 } 151 }
148 ] 152 ]
149 }, 153 },
150 "condition" : { 154 "condition" : {
151 //模式配置，仅开发期间生效 155 //模式配置，仅开发期间生效
152 "current" : 0, //当前激活的模式(list 的索引项) 156 "current" : 0, //当前激活的模式(list 的索引项)
153 "list" : [ 157 "list" : [
154 { 158 {
155 "name" : "", //模式名称 159 "name" : "", //模式名称
156 "path" : "", //启动页面，必选 160 "path" : "", //启动页面，必选
157 "query" : "" //启动参数，在页面的onLoad函数里面得到 161 "query" : "" //启动参数，在页面的onLoad函数里面得到
158 } 162 }
159 ] 163 ]
160 } 164 }
161 } 165 }
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @863d3aa
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <uni-popup ref="popup" type="center">
4 <!-- 给一个左边的样式 -->
5 <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
6 <!-- 关闭弹窗按钮 -->
7 <view class="closeBtn" @click="this.$refs.popup.close()"></view>
8 <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
9 <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
10 </view>
11 </uni-popup>
3 <view class="header"> 12 <view class="header">
4 <view class="headerLeft" @click=tapShow(0)> 13 <view class="headerLeft" @click=changeTap(0)>
5 <text>如何查看验光单？</text> 14 <text>如何查看验光单？</text>
6 <image src="../../static/dataLook.png" mode="aspectFit"></image> 15 <image src="../../static/dataLook.png" mode="aspectFit"></image>
7 </view> 16 </view>
8 <view class="headerRight" @click=tapShow(1)> 17 <view class="headerRight" @click=changeTap(1)>
9 <text>如何查看眼镜框架？</text> 18 <text>如何查看眼镜框架？</text>
10 <image src="../../static/glassLook.png" mode="aspectFit"></image> 19 <image src="../../static/glassLook.png" mode="aspectFit"></image>
11 </view> 20 </view>
12 </view> 21 </view>
13 <view class="dataMenu"> 22 <view class="dataMenu">
14 <uni-collapse accordion="true"> 23 <uni-collapse accordion="true">
15 <view class="item" v-for="(loveItem,index) in loveList" :key="index"> 24 <view class="item" v-for="(loveItem,index) in loveList" :key="index">
16 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'> 25 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
17 <view class="loveDataInfo"> 26 <view class="loveDataInfo">
18 <view class="dataInfoItem"> 27 <view class="dataInfoItem">
19 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text> 28 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
20 </view> 29 </view>
21 <view class="dataInfoItem"> 30 <view class="dataInfoItem">
22 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text> 31 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
23 </view> 32 </view>
24 <view class="dataInfoItem"> 33 <view class="dataInfoItem">
25 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text> 34 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
26 </view> 35 </view>
27 <view class="dataInfoItem"> 36 <view class="dataInfoItem">
28 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text> 37 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
29 </view> 38 </view>
30 </view> 39 </view>
31 </uni-collapse-item> 40 </uni-collapse-item>
32 </view> 41 </view>
33 </uni-collapse> 42 </uni-collapse>
34 </view> 43 </view>
35 <view class="footer"> 44 <view class="footer">
36 <button class="btn" type="default">新建验光单</button> 45 <button class="btn" type="default" @click="toNewData">新建验光单</button>
37 </view> 46 </view>
38 </view> 47 </view>
39 </template> 48 </template>
40 49
41 <script> 50 <script>
42 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 51 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
43 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 52 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
44 // import uniPopup from '@/components/uni-popup/uni-popup.vue' 53 import UniPopup from '@/components/UniPopup/uni-popup.vue'
45 import store from '@/store'; 54 import store from '@/store';
46 export default { 55 export default {
47 components: {UniCollapse,UniCollapseItem}, 56 components: {UniCollapse,UniCollapseItem,UniPopup},
48 data() { 57 data() {
49 return { 58 return {
50 59 whichTap:0
51 }; 60 };
52 }, 61 },
53 onLoad: function(option) { 62 onLoad: function(option) {
54 //获取关心的人列表 63 //获取关心的人列表
55 store.dispatch('myLoveList/getLoveList', { 64 store.dispatch('myLoveList/getLoveList', {
56 uid: "1", 65 uid: "1",
57 }); 66 });
58 }, 67 },
59 computed:{ 68 computed:{
60 loveList() { 69 loveList() {
61 console.log(this.$store.state.myLoveList.loveList) 70 console.log(this.$store.state.myLoveList.loveList)
62 return this.$store.state.myLoveList.loveList || [] 71 return this.$store.state.myLoveList.loveList || []
63 }, 72 },
64 }, 73 },
65 methods:{ 74 methods:{
66 tapShow(item){ 75 changeTap(item){
67 switch(item){ 76 this.whichTap = item
68 // 0左边 1右边 77 this.$refs.popup.open()
69 case '0':
70
71 break;
72 case '1':
73
74 break;
75 }
76 }, 78 },
77 //给时间搞一个nice的格式 79 //给时间搞一个nice的格式
78 getRightTime(time){ 80 getRightTime(time){
79 //如果小于10 则返回'0'+m 81 //如果小于10 则返回'0'+m
80 function add(m){return m<10?'0'+m:m} 82 // function add(m){return m<10?'0'+m:m}
81 const oldTime = (new Date(time)).getTime() 83 //传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
82 const year = new Date(oldTime).getFullYear() 84 // const oldTime = (new Date(time)).getTime()
83 const month = new Date(oldTime).getMonth()+1 85 // const year = new Date(oldTime).getFullYear()
84 const day = new Date(oldTime).getDate() 86 // const month = new Date(oldTime).getMonth()+1
85 const newTime = add(year)+'-'+add(month)+'-'+add(day) 87 // const day = new Date(oldTime).getDate()
88 // const newTime = add(year)+'-'+add(month)+'-'+add(day)
89
86 // console.log(newTime) 90 // console.log(newTime)
87 return newTime 91 // return newTime.replace(/-/g, '/')
92 return time
88 }, 93 },
89 getFirstName(name){ 94 getFirstName(name){
90 return name.substring(0,1) 95 return name.substring(0,1)
96 },
97 toNewData(){
98 uni.navigateTo({
99 url:'../newOpticsData/newOpticsData'
100 })
91 } 101 }
92 } 102 }
93 } 103 }
94 </script> 104 </script>
95 105
96 <style lang="scss"> 106 <style lang="scss">
97 .wrap{ 107 .wrap{
98 min-height: 100vh; 108 min-height: 100vh;
99 width: 100%; 109 width: 100%;
100 background-color: #F2F2F2; 110 background-color: #F2F2F2;
101 .header{ 111 .header{
102 height: 304rpx; 112 height: 304rpx;
103 width: 100%; 113 width: 100%;
104 background-color: #FFFFFF; 114 background-color: #FFFFFF;
105 display: flex; 115 display: flex;
106 justify-content: space-around; 116 justify-content: space-around;
107 align-items: center; 117 align-items: center;
108 view{ 118 view{
109 height: 210rpx; 119 height: 210rpx;
110 width: 304rpx; 120 width: 304rpx;
111 background: #FDF7F5; 121 background: #FDF7F5;
112 border-radius: 4px; 122 border-radius: 4px;
113 border-radius: 4px; 123 border-radius: 4px;
114 display: flex; 124 display: flex;
115 flex-direction: column; 125 flex-direction: column;
116 align-items: center; 126 align-items: center;
117 justify-content: center; 127 justify-content: center;
118 text{ 128 text{
119 font-size: 12px; 129 font-size: 12px;
120 color: #333333; 130 color: #333333;
121 } 131 }
122 image{ 132 image{
123 height: 144rpx; 133 height: 144rpx;
124 width: 144rpx; 134 width: 144rpx;
125 } 135 }
126 } 136 }
127 } 137 }
128 .dataMenu{ 138 .dataMenu{
129 margin-top: 20rpx; 139 margin-top: 20rpx;
130 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 140 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
131 width: 100%; 141 width: 100%;
132 background-color: #FFFFFF; 142 background-color: #FFFFFF;
133 .item{ 143 .item{
134 padding: 0 40rpx; 144 padding: 0 40rpx;
135 .loveDataInfo{ 145 .loveDataInfo{
136 padding: 0 44rpx 0 70rpx; 146 padding: 0 44rpx 0 70rpx;
137 display: flex; 147 display: flex;
138 justify-content: space-around; 148 justify-content: space-around;
139 flex-direction: column; 149 flex-direction: column;
140 align-items: flex-start; 150 align-items: flex-start;
141 .dataInfoItem{ 151 .dataInfoItem{
142 font-size: 12px; 152 font-size: 12px;
143 color: #333333; 153 color: #333333;
144 margin-bottom: 34rpx; 154 margin-bottom: 34rpx;
145 text{ 155 text{
146 font-size: 12px; 156 font-size: 12px;
147 color: #2A2A2A; 157 color: #2A2A2A;
148 margin-right: 20rpx; 158 margin-right: 20rpx;
149 } 159 }
150 } 160 }
151 } 161 }
152 } 162 }
153 } 163 }
154 .footer{ 164 .footer{
155 width: 100%; 165 width: 100%;
156 position: fixed; 166 position: fixed;
157 bottom: 0; 167 bottom: 0;
158 left: 0; 168 left: 0;
159 .btn{ 169 .btn{
160 width: 100%; 170 width: 100%;
161 height: 112rpx; 171 height: 112rpx;
162 line-height: 112rpx; 172 line-height: 112rpx;
163 background: #FF6B4A; 173 background: #FF6B4A;
164 font-size: 16px; 174 font-size: 16px;
165 color: #FFFFFF; 175 color: #FFFFFF;
166 } 176 }
167 } 177 }
168 } 178 }
179 .popUpWrap{
180 height: 850rpx;
181 width: 542rpx;
182 background-color: #FFFFFF;
183 border-radius: 4px;
184 border: 1px solid #979797;
185 .closeBtn{
186 height: 28rpx;
187 width: 28rpx;
188 // border: 1px solid red;
189 position: absolute;
190 top: 20rpx;
191 right: 20rpx;
192 }
193 .glassInfo{
194 height: 474rpx;
195 width: 528rpx;
196 }
197 .dataInfo{
198 height: 850rpx;
199 width: 542rpx;
200 }
201 }
202 .popUpWrap1{
203 height: 474rpx;
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @863d3aa
File was created 1 <template>
2 <view class="wrap">
3 <view class="body">
4 <template >
5 <view class="goods-form">
6 <view class="p1">
7 <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
8 填写验光数据
9 </view>
10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
11 <view class="picker" >
12 <view class="picker-choice">
13 <view class="choice-left">
14 <text class="p11">{{pickerInfoList[0].nameC}}</text>
15 <text class="p12">{{pickerInfoList[0].nameE}}</text>
16 </view>
17 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
18 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
19 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
20 <image src="../../static/detail-tabicon.png" ></image>
21 </picker>
22 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
23 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
24 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
25 <image src="../../static/detail-tabicon.png" ></image>
26 </picker>
27 </view>
28 </view>
29 <view class="picker" >
30 <view class="picker-choice">
31 <view class="choice-left">
32 <text class="p11">{{pickerInfoList[1].nameC}}</text>
33 <text class="p12">{{pickerInfoList[1].nameE}}</text>
34 </view>
35 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
36 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
37 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
38 <image src="../../static/detail-tabicon.png" ></image>
39 </picker>
40 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
41 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
42 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
43 <image src="../../static/detail-tabicon.png" ></image>
44 </picker>
45 </view>
46 </view>
47 <view class="picker" >
48 <view class="picker-choice">
49 <view class="choice-left">
50 <text class="p11">{{pickerInfoList[2].nameC}}</text>
51 <text class="p12">{{pickerInfoList[2].nameE}}</text>
52 </view>
53 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
54 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
55 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
56 <image src="../../static/detail-tabicon.png" ></image>
57 </picker>
58 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
59 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
60 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
61 <image src="../../static/detail-tabicon.png" ></image>
62 </picker>
63 </view>
64 </view>
65 <view class="picker" >
66 <view class="picker-choice">
67 <view class="choice-left">
68 <text class="p11">{{pickerInfoList[3].nameC}}</text>
69 <text class="p12">{{pickerInfoList[3].nameE}}</text>
70 </view>
71 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
72 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
73 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
74 <image src="../../static/detail-tabicon.png" ></image>
75 </picker>
76 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
77 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
78 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
79 <image src="../../static/detail-tabicon.png" ></image>
80 </picker>
81 </view>
82 </view>
83 <view class="picker" >
84 <view class="picker-choice">
85 <view class="choice-left">
86 <text class="p11">{{pickerInfoList[4].nameC}}</text>
87 </view>
88 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
89 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
90 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
91 <image src="../../static/detail-tabicon.png" ></image>
92 </picker>
93 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
94 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
95 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
96 <image src="../../static/detail-tabicon.png" ></image>
97 </picker>
98 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
99 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
100 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
101 <image src="../../static/detail-tabicon.png" ></image>
102 </picker>
103 </view>
104 </view>
105 <view class="confirm">
106 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
107 <text>确认以上输入信息来源于我的验光数据!</text>
108 </view>
109 </view>
110
111 </template>
112 </view>
113
114
115 <view class="footer">
116 <button class="btn" type="default">提 交</button>
117 </view>
118 </view>
119 </template>
120
121 <script>
122 export default {
123 data() {
124 return {
125 pickerInfoList:[
126 {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},
127 {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},
128 {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},
129 {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},
130 {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}
131 ],
132 tablist: {
133 // read: true,
134 // seeLong: false,
135 confirm: false
136 },
137 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
138 };
139 },
140 methods:{
141 changeConfirm() {
142 this.tablist.confirm = !this.tablist.confirm
143 },
144
145 bindPickerChange01: function(e) {
146 this.pickerInfoList[0].nameIndex1 = e.target.value
147 },
148 bindPickerChange02: function(e) {
149 this.pickerInfoList[0].nameIndex2 = e.target.value
150 },
151
152 bindPickerChange11: function(e) {
153 this.pickerInfoList[1].nameIndex1 = e.target.value
154 },
155 bindPickerChange12: function(e) {
156 this.pickerInfoList[1].nameIndex2 = e.target.value
157 },
158
159 bindPickerChange21: function(e) {
160 this.pickerInfoList[2].nameIndex1 = e.target.value
161 },
162 bindPickerChange22: function(e) {
163 this.pickerInfoList[2].nameIndex2 = e.target.value
164 },
165
166 bindPickerChange31: function(e) {
167 this.pickerInfoList[3].nameIndex1 = e.target.value
168 },
169 bindPickerChange32: function(e) {
170 this.pickerInfoList[3].nameIndex2 = e.target.value
171 },
172
173 bindPickerChange41: function(e) {
174 this.pickerInfoList[4].nameIndex1 = e.target.value
175 },
176 bindPickerChange42: function(e) {
177 this.pickerInfoList[4].nameIndex2 = e.target.value
178 },
179 bindPickerChange43: function(e) {
180 this.pickerInfoList[4].nameIndex3 = e.target.value
181 },
182 }
183 }
184 </script>
185
186 <style lang="scss">
187 .wrap{
188 min-height: 100vh;
189 background-color: #F2F2F2;
190 .body{
191 // font-family: PingFangSC-Regular;
192 font-size: 12px;
193 color: #666666;
194 letter-spacing: 0;
195 .bodyBox{
196 margin-top: 15px;
197 .names{
198 // font-family: PingFangSC-Regular;
199 font-size: 12px;
200 color: #151515;
201 letter-spacing: 0;
202 text-align: justify;
203 line-height: 17px;
204 margin-left: 5px;
205 margin-right: 10px;
206 }
207 text{
208 // font-family: PingFangSC-Regular;
209 font-size: 12px;
210 color: #666666;
211 letter-spacing: 0;
212 text-align: justify;
213 }
214 }
215
216 }
217 .goods-form {
218 display: flex;
219 flex-direction: column;
220 align-items: center;
221 justify-content: center;
222 background-color: #fff;
223 width: 100%;
224 padding: 40rpx 0;
225 .p1 {
226 font-size: 16px;
227 color: #333333;
228 letter-spacing: -0.3px;
229 text-align: justify;
230 line-height: 24px;
231 margin: 4px 0;
232
233 }
234 .p2 {
235 font-size: 12px;
236 color: #999999;
237 letter-spacing: -0.23px;
238 margin-bottom: 18rpx;
239 }
240 image{
241 width: 28rpx;
242 height: 26rpx;
243 }
244 .confirm {
245 display: flex;
246 align-items: center;
247 font-size: 12px;
248 color: #666666;
249 letter-spacing: -0.23px;
250 width: 684rpx;
251 image{
252 margin-right:25rpx;
253 }
254 }
255 .picker{
256 display: flex;
257 flex-direction: column;
258 justify-content: center;
259 align-items: center;
260 width: 100%;
261 image{
262 width: 10px;
263 height: 10px;
264 margin-right: 5px;
265 }
266 .picker-choice{
267 display: flex;
268 width: 684rpx;
269 align-items: center;
270 margin-bottom: 40rpx;
271 .choice-left{
272 width: 210rpx;
273 .p11 {
274 font-size: 14px;
275 color: #333333;
276 letter-spacing: -0.26px;
277 text-align: justify;
278 line-height: 24px;
279 // margin-right: 10px;
280 }
281 .p12 {
282 font-size: 10px;
283 color: #3F3F3F;
284 letter-spacing: -0.19px;
285 text-align: justify;
286 line-height: 24px;
287 }
288
289
290 }
291 .p13 {
292 font-size: 10px;
293 color: #999999;
294 letter-spacing: -0.19px;
295 margin-right: 10px;
296 }
297 .p13-date {
298 font-size: 10px;
299 color: #999999;
300 letter-spacing: -0.19px;
301 margin-right: 5px;
302 }
303 .p14 {
304 font-size: 14px;
305 color: #666666;
306 letter-spacing: -0.26px;
307 text-align: center;
308 width: 124rpx;
309 border-bottom: 1px solid #CFCFCF;
310 }
311
312 }
313 }
314 }
315
316 .footer{
317 width: 100%;
318 position: fixed;
319 bottom: 0;
320 left: 0;
321 .btn{
322 width: 100%;
323 height: 112rpx;
324 line-height: 112rpx;
325 background: #FF6B4A;
326 font-size: 16px;
327 color: #FFFFFF;
328 }
329 }
330 }
331 </style>
332
src/static/img/myOpticsData/dataInfo.png
Diff comments   View file @863d3aa

53.4 KB
src/static/img/myOpticsData/dataWrite.png
Diff comments   View file @863d3aa

1.01 KB
src/static/img/myOpticsData/glassInfo.png
Diff comments   View file @863d3aa

36 KB