<template>
<div v-bind:style="{minHeight:clientHeight + 'px'}" id="recive-min-body">
<mt-header title="我的赞">
<mt-button icon="back" slot="left" @click.native="goBack">返回</mt-button>
</mt-header>
<form>
<h3 class="recive-min-input">请填写以下信息:</h3>
<mt-field label="你要点赞给" placeholder="巩一杰" @click.native="handleClick"></mt-field>
<!-- <mt-field label="使用数量" placeholder="1张"></mt-field> -->
<mt-popup
v-model="popupVisible"
position="bottom"
modal=false>
<mt-picker v-bind:style="{width:clientWidth + 'px',padding: 20 + 'px'}" :slots="slots" @change="onValuesChange"></mt-picker>
</mt-popup>
<mt-field label="点赞理由" placeholder="点赞理由要规范" type="textarea" rows="4"></mt-field>
<div class="recive-buttonBox">
<mt-button type="primary" class="recive-button" @click.native="reciveTestSubmit">确定</mt-button>
</div>
</form>
</div>
</template>
<style scoped>
#recive-min-body {
background-color: #f5f5f5;
}
.picker-item {
padding: 30px;
}
.recive-min-input {
margin-top: 10px;
}
form h3 {
margin: 0;
padding: 10px !important;
font-weight: normal;
font-size: 15px;
}
.recive-buttonBox {
margin: 0 20px;
}
.recive-button {
width: 100%;
border-radius: 7px;
margin-top: 20px;
}
</style>
<script>
export default {
data () {
return {
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight,
popupVisible:false,
slots:
[
{
flex: 1,
values: ['大一', '大二', '大三'],
className: 'slot1',
textAlign: 'left'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['1', '2', '3'],
className: 'slot3',
textAlign: 'right'
}
],
ids: ""
}
},
watch: {
values:function(val,oldval){
console.log(val,oldval);
}
},
methods:{
goBack: function() {
this.$router.push({ path: '/home/mine' });
},
handleClick: function() {
this.popupVisible = true;
},
onValuesChange(picker, values) {
if (values[0]=='大一') {
picker.setSlotValues(1, ['1','2','3']);
}else if (values[0]=='大二') {
picker.setSlotValues(1, ['a','b','c']);
}else if (values[0]=='大三') {
picker.setSlotValues(1, ['4','5','6']);
};
}
},
mounted(){
// this.ids = filters.ytox(this.$route.params.ids)
}
}
</script>
效果图: