web-africa-h5/pages/user/goal/list.vue

<template>
    <view class="wrap">
        <view class="top-head">
			<view class="top-tabbar">
				<view class="tab-item" :class="{ active: goalType == 1 }" @click="changeType(1)">{{ $t('S_C_59') }}</view>
				<view class="tab-item" :class="{ active: goalType == 2 }" @click="changeType(2)">{{ $t('S_C_60') }}</view>
				<view class="tab-item" :class="{ active: goalType == 3 }" @click="changeType(3)">{{ $t('S_C_61') }}</view>
			</view>
		</view>
        <view class="cardWrap">
            <!-- 月度目标 -->
            <template v-if="goalType == 1">
                <template v-if="showForm">
                    <monthlyIndex :goalType="goalType" @get-data="getData" />
                </template>
                <template v-else>
                    <detailsIndex :data="showFormData" />
                </template>
            </template>
            <!-- 季度目标 -->
            <template v-if="goalType == 2">
                <template v-if="showForm">
                    <quarterIndex :goalType="goalType" @get-data="getData" />
                </template>
                <template v-else>
                    <quarterDetailsIndex :data="showFormData" />
                </template>
            </template>
             <!-- 年度目标 -->
             <template v-if="goalType == 3">
                <template v-if="showForm">
                    <yearIndex :goalType="goalType" @get-data="getData" />
                </template>
                <template v-else>
                    <yearDetailsIndex :data="showFormData" />
                </template>
            </template>
        </view>
    </view>
</template>

<script>
    import monthlyIndex from "./monthly/forms/index.vue";
    import detailsIndex from "./monthly/details/index.vue";
    import quarterIndex from "./quarter/forms/index.vue";
    import quarterDetailsIndex from "./quarter/details/index.vue";
    import yearIndex from "./year/forms/index.vue";
    import yearDetailsIndex from "./year/details/index.vue";
	export default {
		components: {
            monthlyIndex,
            detailsIndex,
            quarterIndex,
            quarterDetailsIndex,
            yearIndex,
            yearDetailsIndex,
		},
		data() {
			return {
                goalType: 1,
                showForm: true,
                showFormData: {},
			};
		},
        onShow(){
            this.getShowGoals();
        },
		methods: {
            getData(){
                this.getShowGoals();
            },
            getShowGoals(){
                let self = this;
                self.showForm = true;
                self.loading = true;
                uni.showLoading({
                    title: self.$t('MN_F_6')
                });
                self._get('member/api/goals/show-goals', {
                    goalType: self.goalType,
                }, res => {
                    const { data } = res;
                    if(data){
                        self.showForm = false;
                        self.showFormData = data;
                    }
                    self.loading = false;
                    uni.hideLoading();
                })
            },
            changeType(v){
                this.goalType = v;
                this.getShowGoals();
            },
        }
	};
</script>

<style lang="scss" scoped>
.cardWrap{
    padding: 20rpx;
    box-sizing: border-box;
    
    /* .cardBox{
        padding: 77rpx 56rpx;
        background: #fff;
        border-radius: 20rpx;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 69rpx;
    }
    .cardItem{
        text-align: center;
        .img{
            width: 102rpx;
            height: 102rpx;
            background: #FB3024;
            border-radius: 35rpx;
            display: block;
            margin: 0 auto;
        }
        .txt{
            font-size: 26rpx;
            color: #666666;
            margin-top: 25rpx;
        }
    } */
}
</style>