Adam / gulu-vue

Download as
Browse Code »

Commit 3233985506488730e42e94b21b0f85d615fdc7a4

Authored by mullins
2 parents 467128613d e477b7dc7e
Exists in master

若干功能添加

Showing 14 changed files   Show diff stats
src/components/UniCollapseItem/UniCollapseItem.vue
Diff comments   View file @3233985
... ... @@ -164,9 +164,9 @@
164 164 }
165 165  
166 166 .uni-collapse-cell--animation {
167   - transition: transform all 0.3s ease;
  167 + transition: transform all 0.5s ease;
168 168 transition-property: transform;
169   - transition-duration: 0.3s;
  169 + transition-duration: 0.5s;
170 170 transition-timing-function: ease;
171 171 }
172 172  
... ...
src/components/UniPopup/message.js
Diff comments   View file @3233985
... ... @@ -0,0 +1,29 @@
  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 +}
... ...
src/components/UniPopup/popup.js
Diff comments   View file @3233985
... ... @@ -0,0 +1,25 @@
  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 +}
... ...
src/components/UniPopup/uni-popup-dialog.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,243 @@
  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>
... ...
src/components/UniPopup/uni-popup-message.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,116 @@
  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>
... ...
src/components/UniPopup/uni-popup-share.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,165 @@
  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>
... ...
src/components/UniPopup/uni-popup.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,294 @@
  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>
... ...
src/components/uni-transition/uni-transition.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,279 @@
  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>
... ...
1 1 {
2 2 "pages" : [
3 3 {
4   - "path" : "pages/index/index",
  4 + "path" : "pages/user/user",
5 5 "style" : {
6   - "navigationBarTitleText" : "商城一览"
  6 + "navigationBarTitleText" : "我的"
7 7 }
8 8 },
9 9 {
... ... @@ -12,9 +12,9 @@
12 12 "navigationBarTitleText" : "验光数据"}
13 13 },
14 14 {
15   - "path" : "pages/user/user",
  15 + "path" : "pages/index/index",
16 16 "style" : {
17   - "navigationBarTitleText" : "我的"
  17 + "navigationBarTitleText" : "商城一览"
18 18 }
19 19 },
20 20 {
... ... @@ -53,12 +53,12 @@
53 53 "navigationBarTitleText" : "购物车"
54 54 }
55 55 },
56   - // {
57   - // "path" : "pages/frameDetail/frameDetail",
58   - // "style" : {
59   - // "navigationBarTitleText" : "产品详情"
60   - // }
61   - // },
  56 + {
  57 + "path" : "pages/frameDetail/frameDetail",
  58 + "style" : {
  59 + "navigationBarTitleText" : "产品详情"
  60 + }
  61 + },
62 62 {
63 63 "path" : "pages/refundProgress/refundProgress",
64 64 "style" : {
... ... @@ -120,6 +120,10 @@
120 120 }
121 121 }
122 122  
  123 + ,{
  124 + "path" : "pages/newOpticsData/newOpticsData",
  125 + "style" : {"navigationBarTitleText" : "验光数据"}
  126 + }
123 127 ],
124 128 "globalStyle" : {
125 129 "navigationBarTextStyle" : "black",
... ...
src/pages/addOpticsData/addOpticsData.vue
Diff comments   View file @3233985
1 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 16 <view class="header">
4   - <view class="headerLeft" @click=tapShow(0)>
  17 + <view class="headerLeft" @click=changeTap(0)>
5 18 <text>如何查看验光单？</text>
6 19 <image src="../../static/dataLook.png" mode="aspectFit"></image>
7 20 </view>
8   - <view class="headerRight" @click=tapShow(1)>
  21 + <view class="headerRight" @click=changeTap(1)>
9 22 <text>如何查看眼镜框架？</text>
10 23 <image src="../../static/glassLook.png" mode="aspectFit"></image>
11 24 </view>
12 25 </view>
  26 + <!-- 数据展示部分 -->
13 27 <view class="dataMenu">
14 28 <uni-collapse accordion="true">
15 29 <view class="item" v-for="(loveItem,index) in loveList" :key="index">
... ... @@ -33,7 +47,7 @@
33 47 </uni-collapse>
34 48 </view>
35 49 <view class="footer">
36   - <button class="btn" type="default">新建验光单</button>
  50 + <button class="btn" type="default" @click="toNewData">新建验光单</button>
37 51 </view>
38 52 </view>
39 53 </template>
... ... @@ -41,13 +55,13 @@
41 55 <script>
42 56 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
43 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 59 import store from '@/store';
46 60 export default {
47   - components: {UniCollapse,UniCollapseItem},
  61 + components: {UniCollapse,UniCollapseItem,UniPopup},
48 62 data() {
49 63 return {
50   -
  64 + whichTap:0
51 65 };
52 66 },
53 67 onLoad: function(option) {
... ... @@ -63,31 +77,32 @@
63 77 },
64 78 },
65 79 methods:{
66   - tapShow(item){
67   - switch(item){
68   - // 0左边 1右边
69   - case '0':
70   -
71   - break;
72   - case '1':
73   -
74   - break;
75   - }
  80 + changeTap(item){
  81 + this.whichTap = item
  82 + this.$refs.popup.open()
76 83 },
77 84 //给时间搞一个nice的格式
78 85 getRightTime(time){
79 86 //如果小于10 则返回'0'+m
80   - function add(m){return m<10?'0'+m:m}
81   - const oldTime = (new Date(time)).getTime()
82   - const year = new Date(oldTime).getFullYear()
83   - const month = new Date(oldTime).getMonth()+1
84   - const day = new Date(oldTime).getDate()
85   - const newTime = add(year)+'-'+add(month)+'-'+add(day)
  87 + // function add(m){return m<10?'0'+m:m}
  88 + //传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
  89 + // const oldTime = (new Date(time)).getTime()
  90 + // const year = new Date(oldTime).getFullYear()
  91 + // const month = new Date(oldTime).getMonth()+1
  92 + // const day = new Date(oldTime).getDate()
  93 + // const newTime = add(year)+'-'+add(month)+'-'+add(day)
  94 +
86 95 // console.log(newTime)
87   - return newTime
  96 + // return newTime.replace(/-/g, '/')
  97 + return time
88 98 },
89 99 getFirstName(name){
90 100 return name.substring(0,1)
  101 + },
  102 + toNewData(){
  103 + uni.navigateTo({
  104 + url:'../newOpticsData/newOpticsData'
  105 + })
91 106 }
92 107 }
93 108 }
... ... @@ -166,5 +181,34 @@
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;
  209 + width: 528rpx;
  210 + border-radius: 4px;
  211 + border: 1px solid #979797;
  212 + }
169 213  
170 214 </style>
... ...
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @3233985
... ... @@ -0,0 +1,331 @@
  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>
... ...
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