|
|
@@ -0,0 +1,154 @@
|
|
|
+<template>
|
|
|
+ <up-popup :show="showBoardPopup" closeable mode="center" round="8" @close="closePopup">
|
|
|
+ <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"
|
|
|
+ ></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";
|
|
|
+
|
|
|
+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: "2025.06.18"
|
|
|
+})
|
|
|
+
|
|
|
+function onSubmit() {
|
|
|
+ VE_API.guard_tree.updateTreeName(editForm).then(({ code }) => {
|
|
|
+ // code === 0 && ElMessage.success("编辑成功");
|
|
|
+ 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>
|
wangsisi