|
@@ -0,0 +1,110 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="toast-wrap">
|
|
|
|
+ <p v-show="val" :class="['tab',{'check':val != '请选择'}]" @click="showPicker">{{val}}</p>
|
|
|
|
+ <p v-show="val != '请选择'" class="tip">点击可修改</p>
|
|
|
|
+ <div class="content" v-show="show">
|
|
|
|
+ <van-picker
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :visible-item-count='3'
|
|
|
|
+ />
|
|
|
|
+ <div class="confBtn">
|
|
|
|
+ <div @click="getVal">确认</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script type="text/javascript">
|
|
|
|
+ import $ from 'jquery';
|
|
|
|
+ // import {getNum} from '@utils/tools.js';
|
|
|
|
+ // const num = getNum();
|
|
|
|
+ const num = [0,1,2,3,4,5,6,7,8,9];
|
|
|
|
+ const unit = ['分钟', '小时', '天', '周', '月','年'];
|
|
|
|
+ export default {
|
|
|
|
+ name:'PickTime',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ columns: [
|
|
|
|
+ {
|
|
|
|
+ values:num,
|
|
|
|
+ className:'column1'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ values:num,
|
|
|
|
+ className:'column2',
|
|
|
|
+ defaultIndex: 2
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ values:unit,
|
|
|
|
+ className:'column3'
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ val:this.item.value || '请选择',
|
|
|
|
+ show:false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ props:['item'],
|
|
|
|
+ methods: {
|
|
|
|
+ showPicker(){
|
|
|
|
+ this.show = true;
|
|
|
|
+ },
|
|
|
|
+ getVal(){
|
|
|
|
+ const val1 = $(".column1 ul .van-picker-column__item--selected")[0].innerText;
|
|
|
|
+ const val2 = $(".column2 ul .van-picker-column__item--selected")[0].innerText;
|
|
|
|
+ const val3 = $(".column3 ul .van-picker-column__item--selected")[0].innerText;
|
|
|
|
+ this.val = val1 + val2 + val3;
|
|
|
|
+ this.show = false;
|
|
|
|
+ const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
|
|
|
|
+ this.$emit("updata",newData);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+ @import '../less/base.less';
|
|
|
|
+ .toast-wrap{
|
|
|
|
+ margin-bottom: .2rem;
|
|
|
|
+ position: relative;
|
|
|
|
+ .tab{
|
|
|
|
+ width:100%;
|
|
|
|
+ height: .8rem;
|
|
|
|
+ line-height: .8rem;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border:1px solid #E6E6E6;
|
|
|
|
+ border-radius: .1rem;
|
|
|
|
+ color:#7C828E;
|
|
|
|
+ }
|
|
|
|
+ .content{
|
|
|
|
+ padding-top: 25px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 227px;
|
|
|
|
+ background: #fff;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top:.88rem;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border-radius: .2rem;
|
|
|
|
+ z-index: 1000;
|
|
|
|
+ font-size: .3rem;
|
|
|
|
+ overflow-y: hidden;
|
|
|
|
+ box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
|
|
|
|
+ .confBtn{
|
|
|
|
+ height: 44px;
|
|
|
|
+ line-height: 44px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-top: 1px solid #ebedf0;
|
|
|
|
+ margin-top: 25px;
|
|
|
|
+ div{
|
|
|
|
+ color: #colors[theme];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .check{
|
|
|
|
+ color: #colors[theme] !important;
|
|
|
|
+ }
|
|
|
|
+ .tip{
|
|
|
|
+ color: #7C828E;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|