feiniao-farm-h5/src/views/old_mini/service_manage/index.vue

<template>
    <div class="service-manage">
        <custom-header name="服务维护"></custom-header>
        <div class="main-content">
            <div class="service-title">
                <img class="label-icon" src="@/assets/img/home/label-icon.png" alt="">
                服务信息
            </div>
            <div class="service-content">
                <div class="service-item">
                    <div class="sub-title">服务作物</div>
                    <div class="tag-group" v-if="!isEdit">
                        <div class="tag-item" v-for="(item, idx) in crops" :key="'c-'+idx">{{ item.name }}</div>
                    </div>
                    <div class="tag-group add-tag-group" v-else>
                        <div class="tag-item" :class="{ self: item.isSelf === 1 }" v-for="(item, idx) in crops" :key="'ce-'+idx">
                            <span class="text">{{ item.name }}<el-icon @click.stop="handleEdit(item.name)" v-if="item.isSelf===1" class="edit-icon"><Edit /></el-icon></span>
                            <el-icon v-if="item.isSelf===1" class="del-icon" @click.stop="handleDelete('crops', idx)"><Close /></el-icon>
                        </div>
                        <div class="tag-item last-add" @click="handleAdd('作物')"><el-icon class="add-icon"><Plus /></el-icon>作物</div>
                    </div>
                </div>
                <div class="service-item">
                    <div class="sub-title">服务类型</div>
                    <div class="tag-group" v-if="!isEdit">
                        <div class="tag-item" v-for="(item, idx) in serviceTypes" :key="'t-'+idx">{{ item.name }}</div>
                    </div>
                    <div class="tag-group add-tag-group" v-else>
                        <div class="tag-item" :class="{ self: item.isSelf === 1 }" v-for="(item, idx) in serviceTypes" :key="'te-'+idx">
                            <span class="text">{{ item.name }}<el-icon @click.stop="handleEdit(item.name)" v-if="item.isSelf===1" class="edit-icon"><Edit /></el-icon></span>
                            <el-icon v-if="item.isSelf===1" class="del-icon" @click.stop="handleDelete('serviceTypes', idx)"><Close /></el-icon>
                        </div>
                        <div class="tag-item last-add" @click="handleAdd('类型')"><el-icon class="add-icon"><Plus /></el-icon>类型</div>
                    </div>
                </div>
                <div class="service-item">
                    <div class="sub-title">农机设备</div>
                    <div class="tag-group" v-if="!isEdit">
                        <div class="tag-item" v-for="(item, idx) in machines" :key="'m-'+idx">{{ item.name }}</div>
                    </div>
                    <div class="tag-group add-tag-group" v-else>
                        <div class="tag-item" :class="{ self: item.isSelf === 1 }" v-for="(item, idx) in machines" :key="'me-'+idx">
                            <span class="text">{{ item.name }}<el-icon @click.stop="handleEdit(item.name)" v-if="item.isSelf===1" class="edit-icon"><Edit /></el-icon></span>
                            <el-icon v-if="item.isSelf===1" class="del-icon" @click.stop="handleDelete('machines', idx)"><Close /></el-icon>
                        </div>
                        <div class="tag-item last-add" @click="handleAdd('设备')"><el-icon class="add-icon"><Plus /></el-icon>设备</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="page-action" v-if="isEdit">
            <div class="btn-item cancel" @click="isEdit = false">取消</div>
            <div class="btn-right">
                <div class="btn-item primary" @click="isEdit = false">保存服务类型</div>
            </div>
        </div>
        <div class="page-action" v-else>
            <div class="btn-item primary center-btn" @click="isEdit = true">编辑服务类型</div>
        </div>
    </div>

    <popup class="add-tag-popup" round v-model:show="showAddPopup">
        <div class="popup-title" v-if="isEditPopup">编辑标签</div>
        <div class="popup-title" v-else>添加{{addTypeName}}<span class="ml-2">标签</span></div>
        <el-input class="popup-input" v-model="input" placeholder="标签" size="large" />
        <div class="popup-button">
            <div class="cancel" @click="showAddPopup = false">取消</div>
            <div>{{isEditPopup ? '确定' : '添加'}}</div>
        </div>
    </popup>
</template>

<script setup>
import { ref } from "vue";
import customHeader from "@/components/customHeader.vue";
import { Popup} from "vant";
import { Edit, Close, Plus } from '@element-plus/icons-vue'

const isEdit = ref(true);
const showAddPopup = ref(false);

const input = ref("");

const addTypeName = ref("");
function handleAdd(type) {
    isEditPopup.value = false
    addTypeName.value = type;
    input.value = "";
    showAddPopup.value = true;
}

// 三类数据：数组对象形式，随意赋值 isSelf=0/1
const crops = ref([
    { name: "荔枝", isSelf: 1 },
    { name: "龙眼", isSelf: 1 },
    { name: "芒果", isSelf: 0 }
]);
const serviceTypes = ref([
    { name: "飞防类", isSelf: 1 },
    { name: "技术类", isSelf: 1 },
    { name: "劳力类", isSelf: 0 },
    { name: "机械类", isSelf: 0 }
]);
const machines = ref([
    { name: "收割机", isSelf: 1 },
    { name: "M3E", isSelf: 0 }
]);

function handleDelete(category, index) {
    if (category === 'crops') crops.value.splice(index, 1);
    if (category === 'serviceTypes') serviceTypes.value.splice(index, 1);
    if (category === 'machines') machines.value.splice(index, 1);
}

const isEditPopup = ref(false);
function handleEdit(val) {
    isEditPopup.value = true;
    input.value = val;
    showAddPopup.value = true;
}
</script>

<style lang="scss" scoped>
.service-manage {
    width: 100%;
    height: 100vh;
    background: #F5F7FB;
    .main-content {
        max-height: calc(100% - 40px);
        overflow: auto;
        padding: 15px 12px;
        margin: 14px 12px;
        border-radius: 12px;
        background: #fff;
        .service-title {
            font-size: 18px;
            color: #222222;
            font-weight: 500;
            margin-bottom: 10px;
            .label-icon {
                width: 14px;
                padding-right: 5px;
            }
        }
        .service-content {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #F5F5F5;
            .service-item {
                .sub-title {
                    font-size: 16px;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.9);
                }
                .tag-group {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 0 12px;
                    font-size: 16px;
                    .tag-item {
                        margin-top: 10px;
                        position: relative;
                        background: #E8F5FF;
                        border-radius: 8px;
                        color: #2199f8;
                        padding: 0 12px;
                        box-sizing: border-box;
                        min-width: 26vw;
                        height: 48px;
                        text-align: center;
                        line-height: 48px;
                        .text { display: inline-flex; align-items: center; }
                        .edit-icon { margin-left: 8px; }
                        .del-icon {
                            position: absolute;
                            right: -8px;
                            top: -8px;
                            background: #2199F8;
                            border-radius: 50%;
                            width: 16px; height: 16px;
                            font-size: 10px;
                            display: flex; align-items: center; justify-content: center;
                            color: #fff;
                        }
                    }
                    &.add-tag-group {
                        .tag-item {
                            color: #000000;
                            background: none;
                            border: 1px solid #999999;
                            &.self {
                                border: 1px solid #2199F8;
                                background: #E8F5FF;
                                color: #2199F8;
                            }
                            &.last-add {
                                background: #F7F7F7;
                                color: #343434;
                                border: none;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .add-icon {
                                    font-size: 14px;
                                    font-weight: bold;
                                    margin-right: 3px;
                                }
                            }
                        }
                    }
                }
            }
            .service-item + .service-item {
                margin-top: 20px;
            }
        }
    }
    
    .page-action {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 12px;
        background: #fff;
        box-shadow: 2px 2px 4.5px rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-item {
            height: 40px;
            line-height: 41px;
            border-radius: 20px;
            width: fit-content;
            padding: 0 20px;
            color: #666666;
            font-size: 14px;
            &.del {
                color: #ff943d;
                background: rgba(255, 148, 61, 0.1);
            }
            &.cancel {
                border: 1px solid rgba(153, 153, 153, 0.5);
            }
            &.primary {
                color: #fff;
                background: linear-gradient(#76c3ff, #2199f8);
            }
        }
        .center-btn {
            margin: 0 auto;
        }
        .btn-right {
            display: flex;
            gap: 10px;
        }
    }
}


.add-tag-popup{
    width: 90%;
    padding: 20px 16px;
    .popup-title{
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 12px;
    }
    .ml-2 {
        margin-left: 3px;
    }
    .popup-input{
        margin-bottom: 30px;
    }
    .popup-button{
        display: flex;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        div{
            flex: 1;
            font-size: 16px;
            padding: 9px;
            border-radius: 20px;
            background: #2199F8;
            color: #fff;
            text-align: center;
        }
        .cancel{
            margin-right: 20px;
            color: #000;
            background: #fff;
            border: 1px solid #999999;
        }
    }
}
</style>