feiniao-youwei-uniapp/components/editNamePopup/editNamePopup.vue

<template>
    <up-popup :show="showBoardPopup" closeable mode="center" round="8" @close="closePopup" :safeAreaInsetBottom="false">
        <view class="board-popup">
            <view class="name">编辑木牌</view>
            <view class="board-content">
                <view class="board-img">
                    <view class="tag-img">
                        <view class="tag-content">
                            <view class="tag-name">【{{ editForm?.treeName }}】</view>
                        </view>
                    </view>
                </view>
                <view class="edit-form">
                    <view class="form-item">
                        <view class="item-name">树名</view>
						<up-input
						    placeholder="请输入树名"
						    border="none"
						    v-model="editForm.treeName"
							maxlength="4"
							color="#2199F8"
						  ></up-input>
                    </view>
                    <view class="form-item">
                        <view class="item-name">守护时间</view>
						<up-input
						    border="none"
						    v-model="editForm.createDate"
							readonly
						  ></up-input>
                    </view>
                </view>
				<up-button shape="circle" type="primary" text="确认修改" @click="onSubmit"></up-button>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
import { ref, reactive } from "vue";
import TREE from '@/api/tree.js'

const showBoardPopup = ref(false);

function showPopup({id, treeName, nickname, showName, createDate}) {
    editForm.id = id
    editForm.showName = showName
    editForm.treeName = treeName
    editForm.nickname = nickname
    editForm.createDate = createDate
    showBoardPopup.value = true
}

const editForm = reactive({
    id: null,
    treeName: "",
    nickname: "",
    showName: 1,
    createDate: ""
})

function onSubmit() {
    TREE.updateTreeName(editForm).then(({ code }) => {
		if(code === 0){
			uni.showToast({
				title: '编辑成功',
				icon:'none',
				duration: 2000
			});
			showBoardPopup.value = false
			emit("editEnd")
		}
    });
}
const emit = defineEmits(["editEnd"])
defineExpose({ showPopup });

const closePopup = () =>{
	showBoardPopup.value = false
}
</script>

<style lang="scss" scoped>
@import "@/static/style/mixin.scss";
.board-popup {
    width: 85vw;
	padding: 40rpx;
	box-sizing: border-box;
	@include ossBg("treePage/popup-mask.png");
    .name {
        font-size: 48rpx;
        margin-bottom: 24rpx;
        text-align: center;
        font-family: "PangMenZhengDao";
    }
    .button {
        margin-top: 48rpx;
        color: #fff;
        padding: 16rpx;
        text-align: center;
        background: #2199f8;
        border-radius: 4rpx;
    }

    .board-content {
        .board-img {
            width: 100%;
            height: 320rpx;
			@include ossBg("treePage/tree-bg.png");
            border-radius: 16rpx;
            position: relative;
            .tag-img {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                .tag-content {
					@include ossBg("treePage/tag-bg.png");
                    width: 276rpx;
                    height: 274rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #fff;
                    .tag-name {
                        font-family: "jiangxizhuokai";
                        font-size: 44rpx;
                        padding-top: 66rpx;
                        ::v-deep {
                            .el-input__wrapper {
                                background: transparent;
                                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
                            }
                            .el-input__inner {
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        .edit-form {
            padding: 12px 0;
            .form-item {
                display: flex;
                align-items: center;
                height: 46px;
                .item-name {
                    width: 72px;
                    flex: none;
                    font-size: 16px;
                    color: #8F8F8F;
                    line-height: 30px;
                }
            }
            .form-item + .form-item {
                border-top: 0.5px solid rgba(0, 0, 0, 0.1);
            }
        }
    }
}
</style>