Adam / gulu-vue

Download as
Browse Code »

Commit 3233985506488730e42e94b21b0f85d615fdc7a4

Authored by 范牧
2 parents 467128613d e477b7dc7e
Exists in master

若干功能添加

Showing 14 changed files   Show diff stats
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @3233985
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
3 class="uni-collapse-cell"> 3 :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }"
4 <view class="uni-collapse-cell__title" @click="onClick"> 4 class="uni-collapse-cell"
5 <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}">{{iconText}}</view> 5 >
6 <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> 6 <view
7 <text class="uni-collapse-cell__title-text">{{ title }}</text> 7 class="uni-collapse-cell__title"
8 <text class="uni-collapse-cell__time-text">{{ time }}</text> 8 @click="onClick"
9 <!-- #ifdef MP-ALIPAY --> 9 >
10 <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 10 <view
11 class="uni-collapse-cell__title-arrow"> 11 v-if="iconText"
12 <uni-icons color="#bbb" size="20" type="arrowdown" /> 12 class="uni-collapse-cell__title-iconText"
13 </view> 13 v-bind:style="{background:background}"
14 <!-- #endif --> 14 >{{iconText}}</view>
15 <!-- #ifndef MP-ALIPAY --> 15 <image
16 <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" 16 v-if="thumb"
17 class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> 17 :src="thumb"
18 <!-- #endif --> 18 class="uni-collapse-cell__title-img"
19 </view> 19 />
20 <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content"> 20 <text class="uni-collapse-cell__title-text">{{ title }}</text>
21 <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" 21 <text class="uni-collapse-cell__time-text">{{ time }}</text>
22 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"> 22 <!-- #ifdef MP-ALIPAY -->
23 <slot /> 23 <view
24 </view> 24 :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
25 </view> 25 class="uni-collapse-cell__title-arrow"
26 </view> 26 >
27 </template> 27 <uni-icons
28 28 color="#bbb"
29 <script> 29 size="20"
30 import UniIcons from '../UniIcons/UniIcons.vue' 30 type="arrowdown"
31 export default { 31 />
32 name: 'UniCollapseItem', 32 </view>
33 components: { 33 <!-- #endif -->
34 UniIcons 34 <!-- #ifndef MP-ALIPAY -->
35 }, 35 <uni-icons
36 props: { 36 :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }"
37 title: { 37 class="uni-collapse-cell__title-arrow"
38 // 列表标题 38 color="#bbb"
39 type: String, 39 size="20"
40 default: '' 40 type="arrowdown"
41 }, 41 />
42 time: { 42 <!-- #endif -->
43 // 列表时间 朱海涛加的，验光数据需要 43 </view>
44 type: String, 44 <view
45 default: '' 45 :class="{'uni-collapse-cell__content--hide':!isOpen}"
46 }, 46 class="uni-collapse-cell__content"
47 name: { 47 >
48 // 唯一标识符 48 <view
49 type: [Number, String], 49 :class="{ 'uni-collapse-cell--animation': showAnimation === true }"
50 default: 0 50 class="uni-collapse-cell__wrapper"
51 }, 51 :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}"
52 disabled: { 52 >
53 // 是否禁用 53 <slot />
54 type: Boolean, 54 </view>
55 default: false 55 </view>
56 }, 56 </view>
57 showAnimation: { 57 </template>
58 // 是否显示动画 58
59 type: Boolean, 59 <script>
60 default: false 60 import UniIcons from '../UniIcons/UniIcons.vue'
61 }, 61 export default {
62 open: { 62 name: 'UniCollapseItem',
63 // 是否展开 63 components: {
64 type: Boolean, 64 UniIcons
65 default: false 65 },
66 }, 66 props: {
67 thumb: { 67 title: {
68 // 缩略图 68 // 列表标题
69 type: String, 69 type: String,
70 default: '' 70 default: ''
71 }, 71 },
72 iconText:{ 72 time: {
73 //名字头像 73 // 列表时间 朱海涛加的，验光数据需要
74 type:String, 74 type: String,
75 default:'' 75 default: ''
76 } 76 },
77 }, 77 name: {
78 data() { 78 // 唯一标识符
79 return { 79 type: [Number, String],
80 isOpen: false, 80 default: 0
81 background: '' 81 },
82 82 disabled: {
83 } 83 // 是否禁用
84 }, 84 type: Boolean,
85 watch: { 85 default: false
86 open(val) { 86 },
87 this.isOpen = val 87 showAnimation: {
88 } 88 // 是否显示动画
89 }, 89 type: Boolean,
90 inject: ['collapse'], 90 default: false
91 created() { 91 },
92 this.isOpen = this.open 92 open: {
93 this.nameSync = this.name ? this.name : this.collapse.childrens.length 93 // 是否展开
94 this.collapse.childrens.push(this) 94 type: Boolean,
95 if (String(this.collapse.accordion) === 'true') { 95 default: false
96 if (this.isOpen) { 96 },
97 let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] 97 thumb: {
98 if (lastEl) { 98 // 缩略图
99 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false 99 type: String,
100 } 100 default: ''
101 } 101 },
102 } 102 iconText: {
103 }, 103 // 名字头像
104 computed:{ 104 type: String,
105 //给头像搞个随机背景颜色，验光数据页面需要 105 default: ''
106 getRandomColor(){ 106 }
107 let r = Math.floor(Math.random()*256); 107 },
108 let g = Math.floor(Math.random()*256); 108 data() {
109 let b = Math.floor(Math.random()*256); 109 return {
110 let color = '#'+r.toString(16)+g.toString(16)+b.toString(16); 110 isOpen: false,
111 this.background = color 111 background: ''
112 // return color; 112
113 } 113 }
114 }, 114 },
115 methods: { 115 watch: {
116 onClick() { 116 open(val) {
117 if (this.disabled) { 117 this.isOpen = val
118 return 118 }
119 } 119 },
120 if (String(this.collapse.accordion) === 'true') { 120 inject: ['collapse'],
121 this.collapse.childrens.forEach(vm => { 121 created() {
122 if (vm === this) { 122 this.isOpen = this.open
123 return 123 this.nameSync = this.name ? this.name : this.collapse.childrens.length
124 } 124 this.collapse.childrens.push(this)
125 vm.isOpen = false 125 if (String(this.collapse.accordion) === 'true') {
126 }) 126 if (this.isOpen) {
127 } 127 const lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
128 this.isOpen = !this.isOpen 128 if (lastEl) {
129 this.collapse.onChange && this.collapse.onChange() 129 this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
130 this.$forceUpdate() 130 }
131 // console.log(this.isOpen) 131 }
132 }, 132 }
133 } 133 },
134 } 134 computed: {
135 </script> 135 // 给头像搞个随机背景颜色，验光数据页面需要
136 136 getRandomColor() {
137 <style lang="scss" scoped> 137 const r = Math.floor(Math.random() * 256)
138 @import '@/uni.scss'; 138 const g = Math.floor(Math.random() * 256)
139 139 const b = Math.floor(Math.random() * 256)
140 .uni-collapse-cell { 140 const color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
141 flex-direction: column; 141 this.background = color
142 border-color: #FFFFFF; 142 // return color;
143 border-bottom-width: 1px; 143 }
144 border-bottom-style: solid; 144 },
145 } 145 methods: {
146 146 onClick() {
147 147 if (this.disabled) {
148 .uni-collapse-cell--hover { 148 return
149 background-color: #FFFFFF; 149 }
150 } 150 if (String(this.collapse.accordion) === 'true') {
151 151 this.collapse.childrens.forEach(vm => {
152 .uni-collapse-cell--open { 152 if (vm === this) {
153 background-color: #FFFFFF; 153 return
154 } 154 }
155 155 vm.isOpen = false
156 .uni-collapse-cell--disabled { 156 })
157 background-color: #FFFFFF; 157 }
158 // opacity: 0.3; 158 this.isOpen = !this.isOpen
159 } 159 this.collapse.onChange && this.collapse.onChange()
160 160 this.$forceUpdate()
161 161 // console.log(this.isOpen)
162 .uni-collapse-cell--hide { 162 }
163 height: 48px; 163 }
164 } 164 }
165 165 </script>
166 .uni-collapse-cell--animation { 166
167 transition: transform all 0.3s ease; 167 <style lang="scss" scoped>
168 transition-property: transform; 168 @import "@/uni.scss";
169 transition-duration: 0.3s; 169
170 transition-timing-function: ease; 170 .uni-collapse-cell {
171 } 171 flex-direction: column;
172 172 border-color: #ffffff;
173 .uni-collapse-cell__title { 173 border-bottom-width: 1px;
174 // padding: 12px 12px; 174 border-bottom-style: solid;
175 font-size: 16px; 175 }
176 color: #333333; 176
177 position: relative; 177 .uni-collapse-cell--hover {
178 /* #ifndef APP-NVUE */ 178 background-color: #ffffff;
179 display: flex; 179 }
180 width: 100%; 180
181 box-sizing: border-box; 181 .uni-collapse-cell--open {
182 /* #endif */ 182 background-color: #ffffff;
183 height: 48px; 183 }
184 line-height: 24px; 184
185 flex-direction: row; 185 .uni-collapse-cell--disabled {
186 justify-content: space-between; 186 background-color: #ffffff;
187 align-items: center; 187 // opacity: 0.3;
188 } 188 }
189 .uni-collapse-cell__title-iconText{ 189
190 border: 1px solid #FFFFFF; 190 .uni-collapse-cell--hide {
191 height: 50rpx; 191 height: 48px;
192 width: 50rpx; 192 }
193 border-radius: 26rpx; 193
194 // background-color: #47A6F0; 194 .uni-collapse-cell--animation {
195 font-size: 12px; 195 transition: transform all 0.5s ease;
196 color: #FFFFFF; 196 transition-property: transform;
197 line-height: 50rpx; 197 transition-duration: 0.5s;
198 text-align: center; 198 transition-timing-function: ease;
199 margin-right: 20rpx; 199 }
200 } 200
201 .uni-collapse-cell__title:active { 201 .uni-collapse-cell__title {
202 background-color: #FFFFFF; 202 // padding: 12px 12px;
203 } 203 font-size: 16px;
204 204 color: #333333;
205 .uni-collapse-cell__title-img { 205 position: relative;
206 height: $uni-img-size-base; 206 /* #ifndef APP-NVUE */
207 width: $uni-img-size-base; 207 display: flex;
208 margin-right: 10px; 208 width: 100%;
209 // height: 50rpx; 209 box-sizing: border-box;
210 // width: 50rpx; 210 /* #endif */
211 // border-radius: 25rpx; 211 height: 48px;
212 // border-radius: 25rpx; 212 line-height: 24px;
213 } 213 flex-direction: row;
214 214 justify-content: space-between;
215 .uni-collapse-cell__title-arrow { 215 align-items: center;
216 width: 20px; 216 }
217 height: 20px; 217 .uni-collapse-cell__title-iconText {
218 transform: rotate(-90deg); 218 border: 1px solid #ffffff;
219 transform-origin: center center; 219 height: 50rpx;
220 220 width: 50rpx;
221 } 221 border-radius: 26rpx;
222 222 // background-color: #47A6F0;
223 .uni-collapse-cell__title-arrow-active { 223 font-size: 12px;
224 transform: rotate(0deg); 224 color: #ffffff;
225 } 225 line-height: 50rpx;
226 226 text-align: center;
227 .uni-collapse-cell__title-text { 227 margin-right: 20rpx;
228 flex: 1; 228 }
229 font-size: $uni-font-size-base; 229 .uni-collapse-cell__title:active {
230 /* #ifndef APP-NVUE */ 230 background-color: #ffffff;
231 white-space: nowrap; 231 }
232 color: inherit; 232
233 /* #endif */ 233 .uni-collapse-cell__title-img {
234 /* #ifdef APP-NVUE */ 234 height: $uni-img-size-base;
235 lines: 1; 235 width: $uni-img-size-base;
236 /* #endif */ 236 margin-right: 10px;
237 overflow: hidden; 237 // height: 50rpx;
238 text-overflow: ellipsis; 238 // width: 50rpx;
239 font-size: 12px; 239 // border-radius: 25rpx;
240 color: #333333; 240 // border-radius: 25rpx;
241 } 241 }
242 .uni-collapse-cell__time-text{ 242
243 font-size: 12px; 243 .uni-collapse-cell__title-arrow {
244 color: #999999; 244 width: 20px;
245 margin-right: 20rpx; 245 height: 20px;
246 } 246 transform: rotate(-90deg);
247 .uni-collapse-cell__content { 247 transform-origin: center center;
248 overflow: hidden; 248 }
249 } 249
250 250 .uni-collapse-cell__title-arrow-active {
251 .uni-collapse-cell__wrapper { 251 transform: rotate(0deg);
252 /* #ifndef APP-NVUE */ 252 }
253 display: flex; 253
254 /* #endif */ 254 .uni-collapse-cell__title-text {
255 flex-direction: column; 255 flex: 1;
256 } 256 font-size: $uni-font-size-base;
257 257 /* #ifndef APP-NVUE */
258 .uni-collapse-cell__content--hide { 258 white-space: nowrap;
259 // height: 0px; 259 color: inherit;
260 // line-height: 0px; 260 /* #endif */
261 } 261 /* #ifdef APP-NVUE */
262 </style> 262 lines: 1;
263 263 /* #endif */
264 overflow: hidden;
265 text-overflow: ellipsis;
266 font-size: 12px;
267 color: #333333;
268 }
269 .uni-collapse-cell__time-text {
270 font-size: 12px;
271 color: #999999;
272 margin-right: 20rpx;
273 }
274 .uni-collapse-cell__content {
275 overflow: hidden;
276 }
277
278 .uni-collapse-cell__wrapper {
279 /* #ifndef APP-NVUE */
280 display: flex;
281 /* #endif */
282 flex-direction: column;
283 }
284
285 .uni-collapse-cell__content--hide {
286 // height: 0px;
287 // line-height: 0px;
288 }
289 </style>
290
src/components/UniPopup/message.js
Diff comments   View file @3233985
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 @3233985
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 @3233985
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 @3233985
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 @3233985
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 @3233985
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 @3233985
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/index/index",
5 "style" : { 5 "style": {
6 "navigationBarTitleText" : "商城一览" 6 "navigationBarTitleText": "商城一览"
7 } 7 }
8 }, 8 },
9 { 9 {
10 "path" : "pages/addOpticsData/addOpticsData", 10 "path": "pages/user/user",
11 "style" : { 11 "style": {
12 "navigationBarTitleText" : "验光数据"} 12 "navigationBarTitleText": "我的"
13 }, 13 }
14 { 14 },
15 "path" : "pages/user/user", 15 {
16 "style" : { 16 "path": "pages/addOpticsData/addOpticsData",
17 "navigationBarTitleText" : "我的" 17 "style": {
18 } 18 "navigationBarTitleText": "验光数据"
19 }, 19 }
20 { 20 },
21 "path" : "pages/detailsChoiceArgs/detailsChoiceArgs", 21 {
22 "style" : { 22 "path": "pages/detailsChoiceArgs/detailsChoiceArgs",
23 "navigationBarTitleText" : "镜片名称名称" 23 "style": {
24 } 24 "navigationBarTitleText": "镜片名称名称"
25 }, 25 }
26 { 26 },
27 "path" : "pages/purchaseLenses/purchaseLenses", 27 {
28 "style" : { 28 "path": "pages/purchaseLenses/purchaseLenses",
29 "navigationBarTitleText" : "产品选购" 29 "style": {
30 } 30 "navigationBarTitleText": "产品选购"
31 }, 31 }
32 { 32 },
33 "path" : "pages/lensDetails/lensDetails", 33 {
34 "style" : { 34 "path": "pages/lensDetails/lensDetails",
35 "navigationBarTitleText" : "产品详情" 35 "style": {
36 } 36 "navigationBarTitleText": "产品详情"
37 }, 37 }
38 { 38 },
39 "path" : "pages/myOrderPaying/myOrderPaying", 39 {
40 "style" : { 40 "path": "pages/myOrderPaying/myOrderPaying",
41 "navigationBarTitleText" : "我的订单" 41 "style": {
42 } 42 "navigationBarTitleText": "我的订单"
43 }, 43 }
44 { 44 },
45 "path" : "pages/myOrder/myOrder", 45 {
46 "style" : { 46 "path": "pages/myOrder/myOrder",
47 "navigationBarTitleText" : "我的订单" 47 "style": {
48 } 48 "navigationBarTitleText": "我的订单"
49 }, 49 }
50 { 50 },
51 "path" : "pages/cart/cart", 51 {
52 "style" : { 52 "path": "pages/cart/cart",
53 "navigationBarTitleText" : "购物车" 53 "style": {
54 } 54 "navigationBarTitleText": "购物车"
55 }, 55 }
56 // { 56 },
57 // "path" : "pages/frameDetail/frameDetail", 57 {
58 // "style" : { 58 "path": "pages/frameDetail/frameDetail",
59 // "navigationBarTitleText" : "产品详情" 59 "style": {
60 // } 60 "navigationBarTitleText": "产品详情"
61 // }, 61 }
62 { 62 },
63 "path" : "pages/refundProgress/refundProgress", 63 {
64 "style" : { 64 "path": "pages/refundProgress/refundProgress",
65 "navigationBarTitleText" : "申请退款" 65 "style": {
66 } 66 "navigationBarTitleText": "申请退款"
67 }, 67 }
68 { 68 },
69 "path" : "pages/address/addAddress", 69 {
70 "style" : { 70 "path": "pages/address/addAddress",
71 "navigationBarTitleText" : "新增地址" 71 "style": {
72 } 72 "navigationBarTitleText": "新增地址"
73 }, 73 }
74 { 74 },
75 "path" : "pages/address/addressList", 75 {
76 "style" : { 76 "path": "pages/address/addressList",
77 "navigationBarTitleText" : "地址管理" 77 "style": {
78 } 78 "navigationBarTitleText": "地址管理"
79 }, 79 }
80 { 80 },
81 "path" : "pages/confirmOrder/confirmOrder", 81 {
82 "style" : { 82 "path": "pages/confirmOrder/confirmOrder",
83 "navigationBarTitleText" : "确认订单" 83 "style": {
84 } 84 "navigationBarTitleText": "确认订单"
85 }, 85 }
86 { 86 },
87 "path" : "pages/refundment/refundWays", 87 {
88 "style" : { 88 "path": "pages/refundment/refundWays",
89 "navigationBarTitleText" : "退款方式" 89 "style": {
90 } 90 "navigationBarTitleText": "退款方式"
91 }, 91 }
92 { 92 },
93 "path" : "pages/refundment/refundment", 93 {
94 "style" : { 94 "path": "pages/refundment/refundment",
95 "navigationBarTitleText" : "申请退款" 95 "style": {
96 } 96 "navigationBarTitleText": "申请退款"
97 }, 97 }
98 { 98 },
99 "path" : "pages/predelivery/predelivery", 99 {
100 "style" : { 100 "path": "pages/predelivery/predelivery",
101 "navigationBarTitleText" : "待发货" 101 "style": {
102 } 102 "navigationBarTitleText": "待发货"
103 }, 103 }
104 { 104 },
105 "path" : "pages/customerService/customerService", 105 {
106 "style" : { 106 "path": "pages/customerService/customerService",
107 "navigationBarTitleText" : "在线客服" 107 "style": {
108 } 108 "navigationBarTitleText": "在线客服"
109 }, 109 }
110 { 110 },
111 "path" : "pages/detailStandard/detailStandard_sun", 111 {
112 "style" : { 112 "path": "pages/detailStandard/detailStandard_sun",
113 "navigationBarTitleText" : "太阳镜选购页" 113 "style": {
114 } 114 "navigationBarTitleText": "太阳镜选购页"
115 }, 115 }
116 { 116 },
117 "path" : "pages/detailStandard/detailStandard_k", 117 {
118 "style" : { 118 "path": "pages/detailStandard/detailStandard_k",
119 "navigationBarTitleText" : "镜框选购页" 119 "style": {
120 } 120 "navigationBarTitleText": "镜框选购页"
121 } 121 }
122 122 },
123 {
124 "path": "pages/newOpticsData/newOpticsData",
125 "style": {
126 "navigationBarTitleText": "验光数据"
123 ], 127 }
124 "globalStyle" : { 128 }
125 "navigationBarTextStyle" : "black", 129 ],
126 "navigationBarTitleText" : "uni-app", 130 "globalStyle": {
127 "navigationBarBackgroundColor" : "#F8F8F8", 131 "navigationBarTextStyle": "black",
128 "backgroundColor" : "#F8F8F8" 132 "navigationBarTitleText": "uni-app",
129 }, 133 "navigationBarBackgroundColor": "#F8F8F8",
130 "tabBar" : { 134 "backgroundColor": "#F8F8F8"
131 "color" : "#C0C4CC", 135 },
132 "selectedColor" : "#fa436a", 136 "tabBar": {
133 "borderStyle" : "black", 137 "color": "#C0C4CC",
134 "backgroundColor" : "#ffffff", 138 "selectedColor": "#fa436a",
135 "list" : [ 139 "borderStyle": "black",
136 { 140 "backgroundColor": "#ffffff",
137 "pagePath" : "pages/index/index", 141 "list": [
138 "iconPath" : "static/tab-home.png", 142 {
139 "selectedIconPath" : "static/tab-home-current.png", 143 "pagePath": "pages/index/index",
140 "text" : "首页" 144 "iconPath": "static/tab-home.png",
141 }, 145 "selectedIconPath": "static/tab-home-current.png",
142 { 146 "text": "首页"
143 "pagePath" : "pages/cart/cart", 147 },
144 "iconPath" : "static/tab-cart.png", 148 {
145 "selectedIconPath" : "static/tab-cart-current.png", 149 "pagePath": "pages/cart/cart",
146 "text" : "购物车" 150 "iconPath": "static/tab-cart.png",
147 }, 151 "selectedIconPath": "static/tab-cart-current.png",
148 { 152 "text": "购物车"
149 "pagePath" : "pages/user/user", 153 },
150 "iconPath" : "static/tab-my.png", 154 {
151 "selectedIconPath" : "static/tab-my-current.png", 155 "pagePath": "pages/user/user",
152 "text" : "我的" 156 "iconPath": "static/tab-my.png",
153 } 157 "selectedIconPath": "static/tab-my-current.png",
154 ] 158 "text": "我的"
155 }, 159 }
156 "condition" : { 160 ]
157 "current" : 0, 161 },
158 "list" : [ 162 "condition": {
159 { 163 "current": 0,
160 "name" : "首页", 164 "list": [
161 "path" : "pages/index/index", 165 {
162 "query" : "" 166 "name": "首页",
163 }, { 167 "path": "pages/index/index",
164 "name" : "镜片、美瞳参数选购", 168 "query": ""
165 "path" : "pages/purchaseLenses/purchaseLenses", 169 },
166 "query" : "" 170 {
167 }, { 171 "name": "产品详情",
168 "name" : "新增地址", 172 "path": "pages/frameDetail/frameDetail",
169 "path" : "pages/address/addAddress", 173 "query": ""
170 "query" : "" 174 },
171 }, { 175 {
172 "name" : "地址管理", 176 "name": "镜片、美瞳参数选择",
173 "path" : "pages/address/addressList", 177 "path": "pages/purchaseLenses/purchaseLenses",
174 "query" : "" 178 "query": ""
175 } 179 },
176 ] 180 {
177 } 181 "name": "确认订单",
178 } 182 "path": "pages/confirmOrder/confirmOrder",
183 "query": ""
184 },
185 {
186 "name": "新增地址",
187 "path": "pages/address/addAddress",
188 "query": ""
189 },
190 {
191 "name": "地址管理",
192 "path": "pages/address/addressList",
193 "query": ""
194 },
195 {
196 "name": "我的",
197 "path": "pages/user/user",
198 "query": ""
199 }
200 ]
201 }
202 }
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @3233985
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <!-- 弹窗 -->
4 <uni-popup ref="popup" type="center">
5 <!-- 给一个左边弹窗的样式 -->
6 <view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
7 <!-- 关闭弹窗按钮 -->
8 <view class="closeBtn" @click="this.$refs.popup.close()"></view>
9 <!-- 左 -->
10 <image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
11 <!-- 右 -->
12 <image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
13 </view>
14 </uni-popup>
15 <!-- 点击弹窗部分 -->
3 <view class="header"> 16 <view class="header">
4 <view class="headerLeft" @click=tapShow(0)> 17 <view class="headerLeft" @click=changeTap(0)>
5 <text>如何查看验光单？</text> 18 <text>如何查看验光单？</text>
6 <image src="../../static/dataLook.png" mode="aspectFit"></image> 19 <image src="../../static/dataLook.png" mode="aspectFit"></image>
7 </view> 20 </view>
8 <view class="headerRight" @click=tapShow(1)> 21 <view class="headerRight" @click=changeTap(1)>
9 <text>如何查看眼镜框架？</text> 22 <text>如何查看眼镜框架？</text>
10 <image src="../../static/glassLook.png" mode="aspectFit"></image> 23 <image src="../../static/glassLook.png" mode="aspectFit"></image>
11 </view> 24 </view>
12 </view> 25 </view>
26 <!-- 数据展示部分 -->
13 <view class="dataMenu"> 27 <view class="dataMenu">
14 <uni-collapse accordion="true"> 28 <uni-collapse accordion="true">
15 <view class="item" v-for="(loveItem,index) in loveList" :key="index"> 29 <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'> 30 <uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
17 <view class="loveDataInfo"> 31 <view class="loveDataInfo">
18 <view class="dataInfoItem"> 32 <view class="dataInfoItem">
19 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text> 33 <text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
20 </view> 34 </view>
21 <view class="dataInfoItem"> 35 <view class="dataInfoItem">
22 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text> 36 <text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
23 </view> 37 </view>
24 <view class="dataInfoItem"> 38 <view class="dataInfoItem">
25 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text> 39 <text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
26 </view> 40 </view>
27 <view class="dataInfoItem"> 41 <view class="dataInfoItem">
28 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text> 42 <text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
29 </view> 43 </view>
30 </view> 44 </view>
31 </uni-collapse-item> 45 </uni-collapse-item>
32 </view> 46 </view>
33 </uni-collapse> 47 </uni-collapse>
34 </view> 48 </view>
35 <view class="footer"> 49 <view class="footer">
36 <button class="btn" type="default">新建验光单</button> 50 <button class="btn" type="default" @click="toNewData">新建验光单</button>
37 </view> 51 </view>
38 </view> 52 </view>
39 </template> 53 </template>
40 54
41 <script> 55 <script>
42 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 56 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
43 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 57 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
44 // import uniPopup from '@/components/uni-popup/uni-popup.vue' 58 import UniPopup from '@/components/UniPopup/uni-popup.vue'
45 import store from '@/store'; 59 import store from '@/store';
46 export default { 60 export default {
47 components: {UniCollapse,UniCollapseItem}, 61 components: {UniCollapse,UniCollapseItem,UniPopup},
48 data() { 62 data() {
49 return { 63 return {
50 64 whichTap:0
51 }; 65 };
52 }, 66 },
53 onLoad: function(option) { 67 onLoad: function(option) {
54 //获取关心的人列表 68 //获取关心的人列表
55 store.dispatch('myLoveList/getLoveList', { 69 store.dispatch('myLoveList/getLoveList', {
56 uid: "1", 70 uid: "1",
57 }); 71 });
58 }, 72 },
59 computed:{ 73 computed:{
60 loveList() { 74 loveList() {
61 console.log(this.$store.state.myLoveList.loveList) 75 console.log(this.$store.state.myLoveList.loveList)
62 return this.$store.state.myLoveList.loveList || [] 76 return this.$store.state.myLoveList.loveList || []
63 }, 77 },
64 }, 78 },
65 methods:{ 79 methods:{
66 tapShow(item){ 80 changeTap(item){
67 switch(item){ 81 this.whichTap = item
68 // 0左边 1右边 82 this.$refs.popup.open()
69 case '0':
70
71 break;
72 case '1':
73
74 break;
75 }
76 }, 83 },
77 //给时间搞一个nice的格式 84 //给时间搞一个nice的格式
78 getRightTime(time){ 85 getRightTime(time){
79 //如果小于10 则返回'0'+m 86 //如果小于10 则返回'0'+m
80 function add(m){return m<10?'0'+m:m} 87 // function add(m){return m<10?'0'+m:m}
81 const oldTime = (new Date(time)).getTime() 88 //传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
82 const year = new Date(oldTime).getFullYear() 89 // const oldTime = (new Date(time)).getTime()
83 const month = new Date(oldTime).getMonth()+1 90 // const year = new Date(oldTime).getFullYear()
84 const day = new Date(oldTime).getDate() 91 // const month = new Date(oldTime).getMonth()+1
85 const newTime = add(year)+'-'+add(month)+'-'+add(day) 92 // const day = new Date(oldTime).getDate()
93 // const newTime = add(year)+'-'+add(month)+'-'+add(day)
94
86 // console.log(newTime) 95 // console.log(newTime)
87 return newTime 96 // return newTime.replace(/-/g, '/')
97 return time
88 }, 98 },
89 getFirstName(name){ 99 getFirstName(name){
90 return name.substring(0,1) 100 return name.substring(0,1)
101 },
102 toNewData(){
103 uni.navigateTo({
104 url:'../newOpticsData/newOpticsData'
105 })
91 } 106 }
92 } 107 }
93 } 108 }
94 </script> 109 </script>
95 110
96 <style lang="scss"> 111 <style lang="scss">
97 .wrap{ 112 .wrap{
98 min-height: 100vh; 113 min-height: 100vh;
99 width: 100%; 114 width: 100%;
100 background-color: #F2F2F2; 115 background-color: #F2F2F2;
101 .header{ 116 .header{
102 height: 304rpx; 117 height: 304rpx;
103 width: 100%; 118 width: 100%;
104 background-color: #FFFFFF; 119 background-color: #FFFFFF;
105 display: flex; 120 display: flex;
106 justify-content: space-around; 121 justify-content: space-around;
107 align-items: center; 122 align-items: center;
108 view{ 123 view{
109 height: 210rpx; 124 height: 210rpx;
110 width: 304rpx; 125 width: 304rpx;
111 background: #FDF7F5; 126 background: #FDF7F5;
112 border-radius: 4px; 127 border-radius: 4px;
113 border-radius: 4px; 128 border-radius: 4px;
114 display: flex; 129 display: flex;
115 flex-direction: column; 130 flex-direction: column;
116 align-items: center; 131 align-items: center;
117 justify-content: center; 132 justify-content: center;
118 text{ 133 text{
119 font-size: 12px; 134 font-size: 12px;
120 color: #333333; 135 color: #333333;
121 } 136 }
122 image{ 137 image{
123 height: 144rpx; 138 height: 144rpx;
124 width: 144rpx; 139 width: 144rpx;
125 } 140 }
126 } 141 }
127 } 142 }
128 .dataMenu{ 143 .dataMenu{
129 margin-top: 20rpx; 144 margin-top: 20rpx;
130 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); 145 box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
131 width: 100%; 146 width: 100%;
132 background-color: #FFFFFF; 147 background-color: #FFFFFF;
133 .item{ 148 .item{
134 padding: 0 40rpx; 149 padding: 0 40rpx;
135 .loveDataInfo{ 150 .loveDataInfo{
136 padding: 0 44rpx 0 70rpx; 151 padding: 0 44rpx 0 70rpx;
137 display: flex; 152 display: flex;
138 justify-content: space-around; 153 justify-content: space-around;
139 flex-direction: column; 154 flex-direction: column;
140 align-items: flex-start; 155 align-items: flex-start;
141 .dataInfoItem{ 156 .dataInfoItem{
142 font-size: 12px; 157 font-size: 12px;
143 color: #333333; 158 color: #333333;
144 margin-bottom: 34rpx; 159 margin-bottom: 34rpx;
145 text{ 160 text{
146 font-size: 12px; 161 font-size: 12px;
147 color: #2A2A2A; 162 color: #2A2A2A;
148 margin-right: 20rpx; 163 margin-right: 20rpx;
149 } 164 }
150 } 165 }
151 } 166 }
152 } 167 }
153 } 168 }
154 .footer{ 169 .footer{
155 width: 100%; 170 width: 100%;
156 position: fixed; 171 position: fixed;
157 bottom: 0; 172 bottom: 0;
158 left: 0; 173 left: 0;
159 .btn{ 174 .btn{
160 width: 100%; 175 width: 100%;
161 height: 112rpx; 176 height: 112rpx;
162 line-height: 112rpx; 177 line-height: 112rpx;
163 background: #FF6B4A; 178 background: #FF6B4A;
164 font-size: 16px; 179 font-size: 16px;
165 color: #FFFFFF; 180 color: #FFFFFF;
166 } 181 }
167 } 182 }
168 } 183 }
184 .popUpWrap{
185 height: 850rpx;
186 width: 542rpx;
187 background-color: #FFFFFF;
188 border-radius: 4px;
189 border: 1px solid #979797;
190 .closeBtn{
191 height: 28rpx;
192 width: 28rpx;
193 // border: 1px solid red;
194 position: absolute;
195 top: 20rpx;
196 right: 20rpx;
197 }
198 .glassInfo{
199 height: 474rpx;
200 width: 528rpx;
201 }
202 .dataInfo{
203 height: 850rpx;
204 width: 542rpx;
205 }
206 }
207 .popUpWrap1{
208 height: 474rpx;
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @3233985
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 @3233985

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

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

36 KB