nongminwang/components/advertising/BuyAD.vue

<template>
    <!-- 购买广告 -->
    <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="请选择开始时间" :size="size" />
                    <strong>至</strong>
                    <el-date-picker v-model="endTime" type="date" placeholder="请选择结束时间" :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" drag
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" 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="tableData" border 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="网站" label="网站" width="240" />
                            <el-table-column prop="广告位名称" label="广告位名称" width="240" />
                            <el-table-column prop="广告尺寸" label="广告尺寸" width="268" />
                            <el-table-column prop="金额" 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>21323411</span>
                    </p>
                    <div class="btn">
                        <button class="check">查看工单</button>
                        <button class="apply">再次申请</button>
                    </div>
                    <span>如有疑问，可联系客服人员。</span>
                </div>
            </div>
        </div>
    </div>
</template>

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


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

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)

console.log(adName.value);



const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;


//获取广告位
const getAD = async () => {
    try {
        const response = await axios.post("/order/getAD");
        console.log(response.data);
        // navigation1.value = response.data;
    } catch (error) {
        console.error(error);
    }
}

//获取广告状态
const getStauts = async () => {
    try {
        const response = await axios.post("/order/getStauts");
        console.log(response.data);
        // navigation1.value = response.data;
    } catch (error) {
        console.error(error);
    }
}

onMounted(() => {

    //获取广告位
    getAD()

    //获取广告状态
    getStauts()
})




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',
    },
]

// 表格中的数据
const tableData = [
    {
        id: 1,
        网站: '三农资讯网',
        广告位名称: '一号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 2,
        网站: '三农资讯网',
        广告位名称: '二号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 3,
        网站: '三农资讯网',
        广告位名称: '三号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 4,
        网站: '三农资讯网',
        广告位名称: '一号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 5,
        网站: '三农资讯网',
        广告位名称: '二号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 6,
        网站: '三农资讯网',
        广告位名称: '三号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 7,
        网站: '三农资讯网',
        广告位名称: '三号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 8,
        网站: '三农资讯网',
        广告位名称: '一号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 9,
        网站: '三农资讯网',
        广告位名称: '二号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
    {
        id: 10,
        网站: '三农资讯网',
        广告位名称: '三号广告位',
        广告尺寸: '1200 x 90 px',
        金额: '260'
    },
]

</script>

<style lang="less" scoped>
// 广告购买
.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;
                    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;
                }

            }

        }
    }
}
</style>