web-africa-h5/pages/user/goal/year/forms/team.vue

<template>
    <view class="bg-white br12 p-0-20">
        <view class="d-b-c p-30-0 border-b">
            <view class="f28 fb">{{ $t('ENU_G_C_1') }}</view>
            <view  @click="clickFold">
                <u-icon name="arrow-down" size="28rpx" color="#999999" v-if="fold"></u-icon>
                <u-icon name="arrow-right" size="28rpx" color="#999999" v-else></u-icon>
            </view>
        </view>
        <view class="collspaceContent" :class="{'closed': !fold }"> 
            <view class="d-b-c p-20-0 border-b">
                <view class="f28 gray3">{{ $t('S_C_7') }}：{{ $t('S_C_58') }}</view>
                <picker :range="monthList" @change="changeMonth">
                    <view class="common picker">
                        <text>{{ monthList[monthIndex] }}{{ $t('S_C_62') }}</text>
                        <u-icon name="arrow-down" size="28rpx" color="#333"></u-icon>
                    </view>
                </picker>
            </view>
            <view class="prefecture form-group">
                <view class="form-item">
                    <view class="form-label">
                        <text class="domation mr10">*</text>
                        {{ $t('S_C_8') }}({{ performanceCurrency() }})
                    </view>
                    <input class="form-input" type="text" value="" v-model="totalAchieve" :placeholder="$t('S_C_70')" />
                </view>
                <view class="form-item">
                    <view class="form-label">
                        {{ $t('S_C_9') }}
                    </view>
                    <view class="flex-1">
                        <text class="domation mr10">*</text>
                        <text class="f28">{{ $t('S_C_10') }}</text>
                    </view>
                </view>
                <view class="form-item" v-for="(v, idx) in goalsDetailVOList" :key="idx">
                    <view class="form-label">
                        {{ $t(transformZh(idx + 1)) }}
                    </view>
                    <input class="form-input" type="text" v-model="v.cycleValue" :placeholder="$t('S_C_70')" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import utils from '@/common/utils.js';
export default {
    components: {},
    props: ['data', 'monthList', 'monthIndex'],
    data() {
        return {
            fold: true,
            totalAchieve: "",
            goalsDetailVOList: [
                {
                    cycleKey: "m1",
                    cycleValue: "",
                },
                {
                    cycleKey: "m2",
                    cycleValue: "",
                },
                {
                    cycleKey: "m3",
                    cycleValue: "",
                },
                {
                    cycleKey: "m4",
                    cycleValue: "",
                },
                {
                    cycleKey: "m5",
                    cycleValue: "",
                },
                {
                    cycleKey: "m6",
                    cycleValue: "",
                },
                {
                    cycleKey: "m7",
                    cycleValue: "",
                },
                {
                    cycleKey: "m8",
                    cycleValue: "",
                },
                {
                    cycleKey: "m9",
                    cycleValue: "",
                },
                {
                    cycleKey: "m10",
                    cycleValue: "",
                },
                {
                    cycleKey: "m11",
                    cycleValue: "",
                },
                {
                    cycleKey: "m12",
                    cycleValue: "",
                },
            ]
        };
    },
    methods: {
        clickFold(){
            this.fold = !this.fold;
        },
        changeMonth(e) {
            this.$emit('change-month', e)
        },
        transformZh(index) {
            return utils.numberToChinese(index,'year') 
        },
        submit() {
            if (!this.totalAchieve) {
                uni.showToast({
                    title: `${this.$t('S_C_70')}${this.$t('ENU_G_C_1')}${this.$t('S_C_8')}`,
                    duration: 1000,
                    icon: 'none'
                });
                return
            }
            if (this.goalsDetailVOList.length < 1) {
                uni.showToast({
                    title: `${this.$t('S_C_70')}${this.$t('S_C_10')}`,
                    duration: 1000,
                    icon: 'none'
                });
                return
            }
            let flag = this.goalsDetailVOList.every((item) => {
                return item.cycleValue
            })
            if (!flag) {
                uni.showToast({
                    title: `${this.$t('S_C_70')}${this.$t('S_C_10')}`,
                    duration: 1000,
                    icon: 'none'
                });
                return
            }
            this.$props.data.totalAchieve = this.totalAchieve;
            this.$props.data.goalsDetailVOList = JSON.parse(JSON.stringify(this.goalsDetailVOList));
            return true
        }
    }
};
</script>

<style lang="scss" scoped>
.collspaceContent{
    max-height: 5000rpx;
    overflow: hidden;
    transition: all ease 0.8s;
    &.closed{
        max-height: 0;
        transition: all ease 0.6s;
    }
}
</style>