uni-app季度选择控件

代码中涉及到图片需要自己加哦，效果如图：

<template>
    <view class="content">
        <view class="input_year">
            <button @click="quarterTime" style="display: none">季度</button>
            <span @click="showDoubleMonth">
                <input class="select_year" v-model="choseQuarter" placeholder="请选择季度"/>
            </span>
            <view v-show="showTime1a">
                <p>
                    <image src="~@/static/img/year/left.png"  @click="prev" class="left"></image>
                    <span class="span-year">{{ year }}年</span>
                    <image src="~@/static/img/year/right.png" @click="next" class="right"></image>
                </p>
                <view>
                    <p v-for="(item,index) in fullMonth" :key="index" class="selectMonth" @click="selectQuarter(item)">{{ item }}</p>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        //data配置变量
        data(){
            return {
                showTime2: false,
                showTime1a: false,
                year: new Date().getFullYear(),
                fullMonth: ['第一季度', '第二季度', '第三季度', '第四季度'],
            }
        },
        methods:{
            // 点击季度按钮
            quarterTime () {
                this.showTime2 = true
                this.choseQuarter = ''
                this.fullMonth = ['第一季度', '第二季度', '第三季度', '第四季度']
            },
            // 点击半年按钮
            halfYear () {
                this.showTime2 = true
                this.choseQuarter = ''
                this.fullMonth = ['上半年', '下半年']
            },
            // 点击input框
            showDoubleMonth () {
                this.showTime1a = true
            },
            // 上一年
            prev () {
                this.year = this.year * 1 - 1
            },
            // 下一年
            next () {
                this.year = this.year * 1 + 1
            },
            // 点击选项事件
            selectQuarter (item) {
                switch (item) {
                    case '第一季度':
                        this.choseQuarter = this.year + '年' + '第' + '1' + '季度'
                        break
                    case '第二季度':
                        this.choseQuarter = this.year + '年' + '第' + '2' + '季度'
                        break
                    case '第三季度':
                        this.choseQuarter = this.year + '年' + '第' + '3' + '季度'
                        break
                    case '第四季度':
                        this.choseQuarter = this.year + '年' + '第' + '4' + '季度'
                        break
                    case '上半年':
                        this.choseQuarter = this.year + '年' + '第' + '1'
                        break
                    case '下半年':
                        this.choseQuarter = this.year + '年' + '第' + 'H'
                        break
                }
                this.showTime1a = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .select_type{
        height: 40rpx;
        margin-left: 20rpx;
    }
    .select_year{
        border: 1rpx solid lightgray;
        width: 210rpx;
        margin-top: 13rpx;
    }
    .selectMonth{
        margin-left: 15rpx;
        font-size:32rpx ;
    }
    .span-year{
        font-size: 32rpx;
        line-height: 0.2rem;
    }
    .left{
        width: 30rpx;
        height: 30rpx;
    }
    .right{
        width: 30rpx;
        height: 30rpx;
    }
    .input_year{
        margin-left: 50rpx;
        float: left;
    }
</style>