agriculture-one-map/src/views/home/album/album_compoents/detailDailog.vue

<template>
    <el-dialog v-model="winDialogVisible" lock-scroll modal-class="album-detail-modal" :showClose="false" width="90%" align-center>
        <div>
            <div class="congratulation-wrap">
                <div class="congratulation-box">
                    <div class="win-des">
                        <!-- <img src="@/assets/img/weather_index/box-top.png" class="win-icon" /> -->
                    </div>
                    <div class="album-detail-box">
                        <div class="detail-title">{{ dialogData.farmWorkName }}</div>
                        <div class="detail-desc-box">
                            <div class="desc-item">
                                <span class="item-name">触发条件</span>
                                {{ dialogData.condition }}
                            </div>
                            <div class="desc-item">
                                <span class="item-name">农事编号</span>
                                {{ dialogData.code }}
                            </div>
                            <div class="desc-item">
                                <div v-if="dialogData.status === 2">
                                    <span class="item-name">推荐时间</span>
                                    {{ dialogData.solarName }}
                                </div>
                                <div v-if="dialogData.status === 1">
                                    <span class="item-name">推荐时间</span>
                                    {{ dialogData.executeDate }}
                                </div>
                                
                                <div v-if="dialogData.status === 0">
                                    <span class="item-name">{{ dialogData.reCheck ? "复核时间" : "执行时间" }}</span>
                                    {{ dialogData.executeDate }}
                                </div>
                                <!-- <span class="item-name">{{ dialogData.status === 0 ? (dialogData.reCheck ? "复核农事" : "完成农事") : "推荐时间" }}</span>
                                {{ dialogData.code }} -->
                            </div>
                            <div class="desc-item">
                                <span class="item-name">农事宗旨</span>
                                {{ dialogData.purpose }}
                            </div>
                            <div class="desc-item">
                                <div class="item-name">药物处方</div>
                                <div class="item-table">
                                    <el-table :data="dialogData.pesticideFertilizerList" style="width: 100%" :header-cell-style="{background: '#F5F5F5'}">
                                        <el-table-column prop="pesticideFertilizerCode" label="功效" width="62">
                                            <template #default="scope">
                                                {{scope.row.typeName}}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="名称" />
                                        <!-- <el-table-column prop="ratio" label="配比" width="50">
                                            <template #default="scope">
                                                {{scope.row.ratio ? scope.row.ratio : "--"}}
                                            </template>
                                        </el-table-column> -->
                                        <el-table-column prop="ratio" label="方式" width="62">
                                            <template #default="scope">
                                                {{scope.row.ratio ? "人工" : "人工"}}
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>

                            <div class="card-link">
                                <img src="@/assets/img/weather_index/expert-icon.png" />
                                <div class="expert-name">
                                    {{ dialogData.expertName }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="close-btn" @click.stop="winDialogVisible=false">
                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
                    <el-button type="primary" class="one-btn" @click.stop="toShare"> 立即分享 </el-button>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <div class="close-btn">
                    <!-- <el-icon size="32" color="#fff"><CircleCloseFilled /></el-icon> -->
                    <!-- <el-button type="primary" class="one-btn" @click="toShare"> 立即分享 </el-button> -->
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import eventBus from "@/api/eventBus";
import wx from "weixin-js-sdk";
import { useRoute, useRouter } from "vue-router";

const winDialogVisible = ref(false);

const route = useRoute();
const sampleId = route.query.sampleId
const farmId = route.query.farmId;

const dialogData = ref({});
const currentCard = ref({});
const showDialog = (pageParams) => {
    dialogData.value = pageParams.card;
    currentCard.value = {
        activeIndex: pageParams.activeIndex,
        farmWorkName: dialogData.value.farmWorkName,
        farmId: farmId,
        sampleId: sampleId,
    };
    winDialogVisible.value = true;
};
eventBus.on("detailDialog:showDialog", (data) => {
    showDialog(data)
});

const toShare = () => {
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(currentCard.value)}&type=album`,
    });
}
</script>

<style lang="less" scoped>
.congratulation-wrap {
    border-radius: 12px;
    background: #f4f5f4;
}
.close-btn {
    text-align: center;
    margin-top: 20px;
}
.congratulation-box {
    border-radius: 12px;
    background: url("@/assets/img/weather_index/box-top.png") no-repeat top center /contain;
    .el-message-box__message {
        padding: 12px 0 24px 0;
    }
    .win-title {
        color: #1d1e1f;
        font-family: "PangMenZhengDao", sans-serif; /* 使用自定义字体 */
        text-align: center;
        font-size: 24px;
        line-height: 32px;
    }
    .win-detail {
        text-align: center;
        color: #252525;
        padding-top: 6px;
        font-size: 16px;
        span {
            font-size: 22px;
            color: #2199f8;
            padding: 0 6px;
            font-weight: bold;
        }
    }
    .win-des {
        height: 205px;
        text-align: center;
    }
    .win-icon {
        width: 100%;
        border-radius: 12px 12px 0 0;
    }
}
.album-detail-box {
    padding: 0 24px 16px 12px;
    color: #000;
    position: relative;
    // top: -58px;
    .detail-title {
        font-size: 24px;
        font-weight: bold;
        padding-bottom: 8px;
        letter-spacing: 1.6px;
    }
    .detail-desc-box {
        position: relative;
        .desc-item {
            font-size: 14px;
            .item-name {
                color: #999999;
                margin-right: 12px;
            }
            .item-table {
                margin-top: 8px;
                border: 1px solid rgba(255, 255, 255, 0.6);
                border-radius: 4px;
                ::v-deep {
                    .el-table th.el-table__cell {
                        padding: 6px 0;
                    }
                    .el-table--default .el-table__cell {
                        padding: 6px 0;
                    }
                    .el-table--default .cell {
                        padding: 0px 6px;
                    }
                }
            }
        }
        .desc-item + .desc-item {
            padding-top: 8px;
        }
        .card-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #2199f8;
            font-size: 12px;
            position: absolute;
            right: 6px;
            top: 0px;
            .expert-name {
                background: #d3e8ff;
                border-radius: 4px;
                padding: 1px 12px;
                margin-top: 4px;
                display: flex;
                align-items: center;
            }
            img {
                width: 62px;
            }
            .icon {
                padding-right: 2px;
            }
        }
    }
}
.dialog-footer {
    position: relative;
    .close-btn {
        position: absolute;
        bottom: -58px;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
    }
}
</style>

<style lang="less">
.album-detail-modal {
    .el-overlay-dialog {
        .el-dialog {
            padding: 0;
            border-radius: 12px;
            background: none;
            box-shadow: none;
            margin-bottom: 70px;
            margin-top: 10px;
            overflow: auto;
            scrollbar-width: none;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            .el-dialog__header {
                padding: 0;
            }
            .el-dialog__body {
                pointer-events: all;
                width: 90%;
            }
        }

        .one-btn {
            width: 210px;
            height: 40px;
            line-height: 40px;
        }
    }
}
</style>