leromro-mini/pages_home/pages/serviceManagement/Specifications.vue

<template>
    <view>
        <view v-for="(item, index) in formList" :key="index">
            <view class="flex_c_s">
                <view class="flex_c_l certification-title">
                    <text class="text-red" v-if="viewStatus">*</text>请填写规格信息({{index + 1}}/5)
                </view>
                <view @click="clickMenu" class="flex_c_l" v-if="index === 0 && viewStatus">
                    <view :class="[status ? 'icon-complete' : 'icon-manage']"></view>
                    <view :class="[status ? 'complete-font' : 'manage-font']">{{ status ? '完成' : '管理' }}</view>
                </view>
                <view @click="clickDelete(index)" class="flex_c_l" v-if="index !== 0 && status ">
                    <view class="icon-delete"></view>
                    <view class="manage-font">删除</view>
                </view>
            </view>
            <Form :form="item"></Form>
        </view>

        <view class="footer-add flex_c_c" @click="addForm" v-if="status && (formList.length < 5)">
            <view class="icon-add"></view>
            <view class="manage-font">添加</view>
        </view>
    </view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { provide, inject } from 'vue'
import Form from './Form.vue';
const formData = inject('formData');
const viewStatus = inject('viewStatus');
const status = ref(false);//true:完成 false:管理
const formList = computed(() => { 
    return formData.volunteerServiceSpecList ;
});


const clickMenu = () => {
    status.value = !status.value;
}
const addForm = () => {
    formData.volunteerServiceSpecList.push({});
}
const clickDelete =  (index) => { 
    formData.volunteerServiceSpecList.splice(index, 1);
}
</script>

<style lang="scss" scoped>
@import "./index.scss";


.complete-font {
    font-family: 思源黑体;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 30rpx;
    text-align: right;
    letter-spacing: normal;
    color: #FA5700;
}

.manage-font {
    font-family: Source Han Sans;
    font-size: 30rpx;
    font-weight: normal;
    line-height: 30rpx;
    text-align: right;
    letter-spacing: normal;
    color: rgba(19, 15, 38, 0.5);
}
.footer-add {
    padding: 30rpx 0;
}
</style>
<style>
.form-input {
    font-family: PingFang SC;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #130F26;
    width: 100% !important;
}

.form-placeholder {
    color: #C9CDD4;
}

.skillDescribe-conten {
    padding: 32rpx;
}
</style>