sannongzixunwang_web/pages/advertising/index.vue

<template>
    <!-- 广告服务 -->
    <div>
        <!-- 广告页面头部 -->
        <AdvertisingHead></AdvertisingHead>
        <div class="advertising">
            <div class="inner">

                <!-- 左侧tab导航 -->
                <ul class="nav">
                    <li class="current" @click="goBuyAd">广告购买</li>
                    <li @click="goOrderList">工单列表</li>
                </ul>

                <!-- 广告购买 -->
                <div id="buyAd" v-show="adCurrent">
                    <!-- <AdvertisingBuyAD></AdvertisingBuyAD> -->

                    <div class="buyAD">
                        <div class="inner">
                            <!-- tab栏标题 -->
                            <div class="tabTitle">
                                <span class="title">
                                    <span class="number">1</span>
                                    填写广告信息
                                </span>
                                <span class="title">
                                    <span class="icon">
                                        <el-icon>
                                            <DArrowRight />
                                        </el-icon>
                                    </span>
                                    <span class="number">2</span>
                                    选择相应网站
                                </span>
                                <span class="title">
                                    <span class="icon">
                                        <el-icon>
                                            <DArrowRight />
                                        </el-icon>
                                    </span>
                                    <span class="number">3</span>
                                    提交工单信息
                                </span>
                            </div>

                            <!-- 填写广告信息内容 -->
                            <div class="textOne" v-show="ad == 1">
                                <p>
                                    <label for="adName">广告名称:</label>
                                    <el-input id="adName" v-model="adName" style="width: 980px;height: 44px;"
                                        placeholder="请输入广告名称" />
                                    <span v-show="!adName">请输入广告名称。</span>
                                </p>
                                <p>

                                    <label for="adLink">广告链接:</label>
                                    <el-input class="adLink" v-model="adLink" style="width: 980px;height: 44px;"
                                        placeholder="请输入广告链接" />
                                    <span v-show="!adLink">请输入广告链接。</span>
                                </p>
                                <p>
                                    <label>广告持续时间:</label>
                                    <el-date-picker v-model="startTime" type="date" placeholder="请选择开始时间"
                                        @change=changeStartTime :size="size" />
                                    <strong>至</strong>
                                    <el-date-picker v-model="endTime" type="date" placeholder="请选择结束时间"
                                        @change=changeEndTime :size="size" />
                                    <span v-show="!endTime">请选择广告开始时间和结束时间</span>
                                </p>
                                <p class="AdSize">
                                    <label>广告尺寸:</label>
                                    <el-radio-group v-model="adSize" :size="size">
                                        <el-radio :value="1"> 1200 x 90px </el-radio>
                                        <el-radio :value="2"> 420 x 560px </el-radio>
                                    </el-radio-group>
                                    <span v-show="!adSize">请选择广告尺寸。</span>
                                </p>
                                <p>
                                    <label>广告图:</label>
                                    <el-upload class="upload-demo" action="http://192.168.1.118:9501"
                                        :on-success="handleUploadSuccess" :on-error="handleUploadError" drag multiple>
                                        <el-icon class="el-icon--upload">
                                            <Plus />
                                        </el-icon>
                                        <div class="el-upload__text">
                                            选择图片
                                        </div>
                                    </el-upload>
                                    <span>请添加广告图，不大于500k。</span>
                                </p>


                            </div>

                            <!-- 选择相应网站的内容 -->
                            <div class="textTwo" v-show="ad == 2">
                                <div class="inner">
                                    <!-- 搜索部分 -->
                                    <div class="pageTop">
                                        <div class="left">
                                            网站：
                                            <el-select v-model="value" placeholder="请选择网站名称" size="large"
                                                style="width: 244px;height: 44px;">
                                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                    :value="item.value" />
                                            </el-select>
                                            <a href="#">查看示意图</a>
                                        </div>
                                        <div class="right">
                                            <button class="reset">重置</button>
                                            <button class="search">搜索</button>
                                        </div>
                                    </div>

                                    <!-- 表格部分 -->
                                    <div class="pageTable">
                                        <el-table :data="processedData" border @selection-change="handleSelectionChange"
                                            select-on-indeterminate style="width: 100%"
                                            :header-row-style="{ height: '60px' }" :row-style="{ height: '74px' }"
                                            :header-cell-style="{ backgroundColor: '#fafafa', color: '#666' }">
                                            <el-table-column type="selection" width="152" align="center" />
                                            <el-table-column prop="website_name" label="网站" width="240" />
                                            <el-table-column prop="name" label="广告位名称" width="240" />
                                            <el-table-column prop="combinedField" label="广告尺寸" width="268" />
                                            <el-table-column prop="price" label="金额 (元) / 天" />
                                        </el-table>
                                    </div>

                                    <!-- 页码部分 -->
                                    <div class="pagination">
                                        <HomePagination></HomePagination>
                                    </div>
                                </div>
                            </div>

                            <!-- 提交工单信息 -->
                            <div class="submit" v-show="ad == 3">
                                <div class="inner">
                                    <h1>广告信息已提交成功，请等待审核......</h1>
                                    <p>
                                        工单编号:
                                        <span>{{ orderInformation.$ordernum }}</span>
                                    </p>
                                    <div class="btn">
                                        <button class="check">查看工单</button>
                                        <button class="apply">再次申请</button>
                                    </div>
                                    <span>如有疑问，可联系客服人员。</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工单列表 -->
                <div id="orderList" v-show="!adCurrent">
                    <AdvertisingOrderList></AdvertisingOrderList>
                </div>


            </div>

            <div class="bottom" v-show="ad != 3 && adCurrent">
                <div class="inner">
                    <!-- 总金额 -->
                    <div class="amount" v-show="ad == 2">
                        总金额:
                        <span>243,210,910</span>
                        元
                    </div>

                    <!-- 按钮 -->
                    <button class="btn" @click="nextStep">{{ ad == 1 ? '下一步' : '提交工单' }}</button>
                </div>
            </div>
        </div>
        <!-- 广告页面底部 -->
        <AdvertisingFoot></AdvertisingFoot>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElRadioGroup, ElRadio, ElDatePicker, ElInput, ElUpload, ElIcon, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-plus'
import { Plus, DArrowRight } from '@element-plus/icons-vue'

// axios请求
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;


// 通过变量ad控制tab栏标题的颜色及每一步下的不同的内容
let ad = useState("ad", () => 1)

let adCurrent = useState("adCurrent", () => true)

const size = ref < 'default' | 'large' | 'small' > ('default')

let adName = useState("adName", () => "")
let adLink = useState("adLink", () => "")
let startTime = useState("startTime", () => "")
let endTime = useState("endTime", () => "")
let adSize = useState("adSize", () => 1)
let adWidth = useState("adWidth", () => 1200)
let adHeight = useState("adHeight", () => 90)
let pageSize = useState("pageSize", () => 10)
let page = useState("page", () => 1)
let tableData = useState("tableData", () => [])
let processedData = useState("processedData", () => [])
let pids = useState("pids", () => "")
let orderInformation = useState("orderInformation", () => "")

// let order = useState('order', () => "")
// let order_ad = useState('order_ad', () => "")


// 获取开始时间
let changeStartTime = (val) => {
    startTime.value = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(startTime.value);
}

// 获取结束时间
let changeEndTime = (val) => {
    endTime.value = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(endTime.value);
}

//获取图片地址
let handleUploadSuccess = (response, file, fileList) => {
    // 假设服务器返回的响应中包含文件地址
    console.log(file.name);
    const fileUrl = response.fileUrl;
    // console.log('上传成功，文件地址为：', fileUrl);
}

//选择的广告位
let handleSelectionChange = (selectedRows) => {
    let selectedpids = [];
    selectedRows.forEach(row => {
        selectedpids.push(row.pid);
    });

    // console.log('选中行的 pid:', selectedpids);
    pids.value = selectedpids.join(",")
    // console.log(pids.value);

}


// 点击下一步与提交工单按钮
let nextStep = () => {
    ad.value++
    let icon = document.querySelectorAll(".icon")
    let number = document.querySelectorAll(".number")
    let title = document.querySelectorAll(".title")

    // 获取广告位需要传递的参数
    let adData = {
        width: adWidth.value,
        height: adHeight.value,
        starttime: startTime.value,
        endtime: endTime.value,
        pageSize: pageSize.value,
        page: page.value
    }

    // 获取广告位需要传递的参数
    let orderData = {
        name: adName.value,
        width: adWidth.value,
        height: adHeight.value,
        starttime: startTime.value,
        endtime: endTime.value,
        imgurl: adLink.value,
        imgsrc: "11111",
        pid: pids.value
    }

    // 点击下一步
    if (ad.value == 2) {
        icon[0].classList.add('color')
        number[1].classList.add('bgc')
        title[1].classList.add('color')

        if (adSize.value != 1) {
            adWidth.value = 420
            adHeight.value = 520
        }

        //获取广告位
        axios.post("/order/getAD", adData).then(response => {
            console.log("广告位信息", response.data.rows);
            tableData.value = response.data.rows
            processedData.value = tableData.value.map(item => {
                return {
                    ...item,
                    combinedField: `${item.width} x ${item.height} px`,
                };
            });

        }).catch(error => {
            console.log(error);
        })
    }

    // 点击提交工单信息
    if (ad.value >= 3) {
        ad.value = 3
        icon[1].classList.add('color')
        number[2].classList.add('bgc')
        title[2].classList.add('color')

        //提交工单
        axios.post("/order/addAD", orderData).then(response => {
            console.log(response.data);
            // tableData.value = response.data.rows
            orderInformation.value = response.data
        }).catch(error => {
            console.log(error);
        })
    }
}


// 点击广告购买标签的事件驱动函数
let goBuyAd = () => {
    adCurrent.value = true
    let lis = document.querySelectorAll('.nav>li')
    lis[0].classList.add('current')
    lis[1].classList.remove('current')
}

// 点击工单列表标签的事件驱动函数
let goOrderList = () => {
    adCurrent.value = false
    let lis = document.querySelectorAll('.nav>li')
    lis[0].classList.remove('current')
    lis[1].classList.add('current')
}


const value = ref('')
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]


</script>

<style lang="less" scoped>
.advertising {
    width: 100%;
    overflow: hidden;

    .inner {
        width: 1520px;
        // height: 900px;
        overflow: hidden;
        position: relative;

        // 左侧tab导航
        .nav {
            width: 120px;
            height: 80px;
            position: absolute;
            top: 54px;
            left: 0;
            border-right: 1px solid #d9d9d9;

            >li {
                width: 120px;
                height: 30px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #333333;
                line-height: 26px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-bottom: 20px;

            }

            .current {
                font-weight: bold;
                color: #333;
                border-right: 2px solid #139602;
            }

            // >li:hover {
            //     font-weight: bold;
            //     color: #333;
            //     border-right: 2px solid #139602;

            // }
        }



        // 广告购买
        #buyAd {
            width: 1200px;
            margin: 0 auto;

            .buyAD {
                width: 1200px;
                overflow: hidden;

                .inner {
                    width: 1200px;
                    overflow: hidden;
                    position: relative;

                    // 填写信息页tab标题
                    .tabTitle {
                        width: 1100px;
                        height: 80px;
                        padding-top: 26px;
                        margin: 0 auto;
                        box-sizing: border-box;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                        .icon,
                        .title {
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 16px;
                            color: #D5D5D5;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;
                        }

                        .number {
                            display: inline-block;
                            width: 32px;
                            height: 32px;
                            line-height: 32px;
                            color: #ffffff;
                            background-color: #d5d5d5;
                            border-radius: 50%;

                        }

                        .bgc {
                            background-color: #139602;
                        }

                        .color {
                            color: #139602;
                        }

                        // 填写广告信息字体及背景颜色
                        .title:first-child {
                            color: #139602;
                        }

                        .title:first-child .number {
                            background-color: #139602;
                        }

                        // 图标>>
                        .icon {
                            padding: 0 165px;
                        }

                    }

                    // 1.填写信息内容
                    .textOne {
                        width: 1100px;
                        height: 515px;
                        margin-top: 30px;
                        margin-left: 50px;

                        /deep/.el-radio-group {
                            height: 55px;
                        }

                        >p {
                            width: 1110px;
                            height: 75px;

                            strong {
                                font-weight: 500;
                                color: #333333;
                                padding: 0 14px;
                            }

                            label {
                                display: inline-block;
                                width: 125px;
                                text-align: right;
                                padding-right: 10px;
                                box-sizing: border-box;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }

                            >label::before {
                                content: "*";
                                display: inline-block;
                                width: 10px;
                                height: 2px;
                                color: #fe0101;
                            }

                            span {
                                color: #fe0101;
                                display: block;
                                padding-left: 135px;
                                height: 30px;
                            }

                            .upload-demo {
                                display: inline-block;
                                width: 112px;
                                height: 112px;
                                vertical-align: -93px;

                            }

                            /deep/.el-input__wrapper.is-focus {
                                box-shadow: 0 0 0 1px #c0c4cc;
                            }

                            /deep/.el-date-editor.el-input,
                            .el-date-editor.el-input__wrapper {
                                height: 44px;
                                width: 470px;
                            }

                            /deep/.el-input__inner {
                                font-size: 16px;
                            }

                            /deep/.el-upload-dragger {
                                padding: 0;
                                margin: 0;
                                border: 1px solid #ededed;
                            }

                            /deep/.el-upload-dragger .el-icon--upload {
                                font-size: 67px;
                                line-height: 50px;
                                padding: 0;
                                margin: 0;
                            }

                            /deep/.el-upload-dragger .el-upload__text {
                                font-size: 18px;
                                font-weight: 400;
                                color: #999;
                                text-align: center;
                                margin-bottom: 14px;
                                margin-top: 5px;
                            }

                            /deep/.el-icon svg {
                                width: 34px;
                                height: 34px;
                            }
                        }

                    }

                    // 2.选择相应网站
                    .textTwo {
                        width: 1200px;
                        overflow: hidden;

                        // 页面头部搜索和按钮
                        .pageTop {
                            width: 1150px;
                            height: 44px;
                            margin: 30px 0 40px 50px;

                            >.left {
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;

                                >a {
                                    width: 80px;
                                    height: 21px;
                                    padding-left: 30px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #47ACFF;
                                    line-height: 19px;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                }

                                /deep/.el-select__wrapper.is-focused {
                                    box-shadow: 0 0 0 1px var(--el-border-color) inset;
                                }

                            }

                            >.right {
                                button {
                                    width: 94px;
                                    height: 36px;
                                    line-height: 36px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #33B023;
                                    line-height: 19px;
                                    text-align: center;
                                    border: none;
                                    border-radius: 7px;
                                }

                                .reset {
                                    border: 1px solid #33B023;
                                    color: #33B023;
                                    background-color: #fff;
                                    margin-right: 25px;
                                }

                                .search {
                                    background-color: #33B023;
                                    color: #ffffff;
                                }
                            }

                        }

                        // 页面中的表格
                        .pageTable {
                            width: 100%;
                            overflow: hidden;
                            padding-bottom: 60px;


                            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                                background-color: #333;
                                border-color: #333;
                            }

                            /deep/.el-table tr {
                                background-color: #fafafa;
                                height: 74px;
                            }

                            /deep/.el-table .cell {
                                text-align: center;
                                box-sizing: border-box;
                                height: 23px;
                                line-height: 23px;
                                overflow-wrap: break-word;
                                padding: 0 12px;
                                text-overflow: ellipsis;
                                white-space: normal;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        // 页码
                        .pagination {
                            height: 34px;
                            text-align: center;
                            padding-bottom: 90px;
                        }
                    }

                    // 3.提交工单信息
                    .submit {
                        width: 1200px;
                        overflow: hidden;
                        text-align: center;

                        .inner {
                            width: 1100px;
                            padding-left: 50px;
                            padding-bottom: 130px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-style: normal;
                            text-transform: none;

                            // 标题
                            >h1 {
                                margin-top: 80px;
                                margin-bottom: 30px;
                                font-weight: bold;
                                font-size: 26px;
                                color: #333333;
                                line-height: 30px;
                                text-align: center;
                            }

                            // 工单编号
                            >p {
                                margin-bottom: 257px;
                                font-weight: 400;
                                font-size: 22px;
                                color: #333333;
                                text-align: center;
                            }

                            // 按钮
                            >.btn {
                                margin-bottom: 30px;

                                button {
                                    width: 134px;
                                    height: 50px;
                                    border: none;
                                    font-weight: 400;
                                    font-size: 16px;
                                    text-align: center;
                                    border-radius: 7px;
                                }

                                .check {
                                    background-color: #fff;
                                    color: #33B023;
                                    border: 1px solid #33B023;
                                    margin-right: 160px;
                                }

                                .apply {
                                    background-color: #33B023;
                                    color: #fff;
                                }
                            }

                            // 提示文字
                            >span {
                                font-weight: 400;
                                font-size: 14px;
                                color: #999999;
                            }

                        }

                    }
                }
            }
        }

        //工单列表
        #orderList {
            width: 1200px;
            margin: 0 auto;
        }


    }

    //广告页面底部部分
    .bottom {
        width: 100%;
        height: 145px;
        background-color: #ecf5ee;
        // display: none;

        .inner {
            width: 1200px;
            height: 145px;
            padding: 0;

            .amount {
                float: left;
                padding-top: 52px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 19px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                span {
                    padding: 0 15px 0 25px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #028E21;
                    line-height: 28px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .btn {
                float: right;
                width: 115px;
                height: 40px;
                font-size: 16px;
                background-color: #028e21;
                color: #ffffff;
                border: none;
                border-radius: 6px;
                margin: 53px 0;
            }
        }
    }
}
</style>