sannongzixunwang_web/pages/advertising/index.vue

<template>
    <!-- 广告服务 -->
    <div>
        <!-- 广告页面头部 -->
        <div class="head">
            <div class="inner">
                <div class="headLogo left">
                    <img src="../../static/images/image 36.png" alt="" @click="goBack">
                    <span>广告服务</span>
                </div>
                <div class="right">
                    <span>
                        <em class="home"></em>
                        设为首页
                    </span>
                    <span>
                        <em class="collection"></em>
                        加入收藏
                    </span>
                </div>
            </div>
        </div>
        <div class="tips">
            <div class="inner">
                <p v-if="activeName == '1'">注意：广告购买需提交信息，用户与商务人员进行线下金额交易，交易成功后由商务人员后台审核。审核通过，即广告投放成功。</p>
            </div>
        </div>
        <div class="advertising">
            <div class="inner">
                <el-tabs v-model="activeName" :tab-position="tabPosition" class="demo-tabs" @tab-change="goOrderList">
                    <!-- {{  ad }} -->
                    <el-tab-pane label="广告购买" name="1" @click="goBuyAd">
                        <!-- 广告购买 -->
                        <div id="buyAd">
                            <div class="buyAD">
                                <div class="inner">
                                    <!-- tab栏标题 -->
                                    <div class="tabTitle" v-if="ad == 1">
                                        <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="tabTitle" v-if="ad == 2">
                                        <span class="title">
                                            <span class="number">1</span>
                                            填写广告信息
                                        </span>
                                        <span class="title color">
                                            <span class="icon  color">
                                                <el-icon>
                                                    <DArrowRight />
                                                </el-icon>
                                            </span>
                                            <span class="number bgc">2</span>
                                            选择相应网站
                                        </span>
                                        <span class="title">
                                            <span class="icon">
                                                <el-icon>
                                                    <DArrowRight />
                                                </el-icon>
                                            </span>
                                            <span class="number">3</span>
                                            提交工单信息
                                        </span>
                                    </div>

                                    <div class="tabTitle" v-if="ad == 3">
                                        <span class="title">
                                            <span class="number">1</span>
                                            填写广告信息
                                        </span>
                                        <span class="title color">
                                            <span class="icon  color">
                                                <el-icon>
                                                    <DArrowRight />
                                                </el-icon>
                                            </span>
                                            <span class="number bgc">2</span>
                                            选择相应网站
                                        </span>
                                        <span class="title color">
                                            <span class="icon color">
                                                <el-icon>
                                                    <DArrowRight />
                                                </el-icon>
                                            </span>
                                            <span class="number bgc">3</span>
                                            提交工单信息
                                        </span>
                                    </div>

                                    <!-- 填写广告信息内容 -->
                                    <div class="textOne" v-if="ad == 1">
                                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110"
                                            class="demo-ruleForm" :size="formSize" status-icon>
                                            <el-form-item label="广告名称:" prop="adName">
                                                <el-input v-model="ruleForm.adName" placeholder="请输入广告名称" />
                                            </el-form-item>
                                            <el-form-item label="广告链接:" prop="adLink">
                                                <el-input v-model="ruleForm.adLink" placeholder="请输入广告链接" />
                                            </el-form-item>
                                            <el-form-item label="广告持续时间:" required>
                                                <el-col :span="11">
                                                    <el-form-item prop="startTime">
                                                        <el-date-picker v-model="ruleForm.startTime" type="date"
                                                            placeholder="请选择开始时间" @change="changeStartTime"
                                                            :disabled-date="disabledStartTime" style="width: 100%">
                                                        </el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col class="text-center" :span="2">
                                                    <span class="text-gray-500">至</span>
                                                </el-col>
                                                <el-col :span="11">
                                                    <el-form-item prop="endTime">
                                                        <el-date-picker v-model="ruleForm.endTime" unlink-panels
                                                            type="date" placeholder="请选择结束时间" @change="changeEndTime"
                                                            :disabled-date="disabledEndTime" style="width: 100%">
                                                        </el-date-picker>
                                                    </el-form-item>
                                                </el-col>
                                            </el-form-item>
                                            <el-form-item label="广告尺寸:" prop="adSize">
                                                <el-radio-group v-model="ruleForm.adSize">
                                                    <el-radio :value="item.id" v-for="item in options" :key="item.id">{{
                                                        item.size }}</el-radio>
                                                </el-radio-group>
                                                <!-- 因为下拉列表与时间选择器有冲突 所以换成了单选按钮 -->
                                                <!-- <el-select v-model="ruleForm.adSize" placeholder="请选择广告尺寸"
                                                    @change="change">
                                                    <el-option v-for="item in options" :key="item.id" :label="item.size"
                                                        :value="item.id" :disabled="item.disabled">
                                                    </el-option>
                                                </el-select> -->
                                            </el-form-item>
                                            <el-form-item label="广告图:" prop="adImg">
                                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                                    :on-success="handleAvatarSuccess"
                                                    :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                                    <div v-else>
                                                        <el-icon class="avatar-uploader-icon">
                                                            <Plus></Plus>
                                                            <div class="chooseImgDiv">选择图片</div>
                                                        </el-icon>
                                                    </div>
                                                </el-upload>
                                            </el-form-item>
                                        </el-form>
                                    </div>

                                    <!-- 选择相应网站的内容 -->
                                    <div class="textTwo" v-if="ad == 2">
                                        <div class="inner">
                                            <!-- 搜索部分 -->
                                            <div class="pageTop">
                                                <div class="left">
                                                    网站：
                                                    <el-select v-model="adWeb" placeholder="请选择网站名称" size="large"
                                                        style="width: 244px; height: 44px;">
                                                        <el-option v-for="item in adWebList" :key="item.id"
                                                            :label="item.website_name" :value="item.id"
                                                            @click="chooseweb(item.id)" />
                                                    </el-select>
                                                    <a @click="goPhoto">查看示意图</a>
                                                </div>
                                                <div class="right">
                                                    <button class="reset" @click="goReset">重置</button>
                                                    <button class="search" @click="goSearch">搜索</button>
                                                </div>
                                            </div>

                                            <!-- 示意图弹框 -->
                                            <el-dialog v-model="dialogTableVisible" :show-close="false" width="60%"
                                                :close-on-click-modal="false">
                                                <template #header="{ close, titleId, titleClass }">
                                                    <div class="my-header">
                                                        <h4 :id="titleId" :class="titleClass" class="left">示意图类型</h4>
                                                        <el-button type="danger" @click="close" class="right">
                                                            <el-icon class="el-icon--left">
                                                                <CircleCloseFilled />
                                                            </el-icon>
                                                            关闭
                                                        </el-button>
                                                    </div>
                                                </template>
                                                <ul class="graph">
                                                    <li>
                                                        <span>广告尺寸图A: 1200x90</span>
                                                        <img src="../../static/ad/01.png" alt="">
                                                    </li>
                                                    <li>
                                                        <span>广告尺寸图B: 600x150</span>
                                                        <img src="../../static/ad/02.png" alt="">
                                                    </li>
                                                    <li>
                                                        <span>广告尺寸图C: 300x150</span>
                                                        <img src="../../static//ad/03.png" alt="">
                                                    </li>
                                                </ul>
                                            </el-dialog>


                                            <!-- 表格部分 -->
                                            <div class="pageTable">
                                                <el-table :data="tableData" border ref="multipleTable"
                                                    @selection-change="handleSelectionChange" style="width: 100%"
                                                    :header-row-style="{ height: '60px' }"
                                                    :row-style="{ height: '74px' }"
                                                    :header-cell-style="{ backgroundColor: '#fafafa', color: '#666' }">
                                                    <!-- <el-table-column type="selection" :reserve-selection="true"
                                                        width="152" align="center" /> -->
                                                    <el-table-column width="152" align="center">
                                                        <template #default="{ row }">
                                                            <el-checkbox v-model="row.selected"
                                                                @change="toggleRowSelection(row)">
                                                            </el-checkbox>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="website_name" label="网站" width="240" />
                                                    <el-table-column prop="name" label="广告位名称" width="240" />
                                                    <el-table-column prop="size" label="广告尺寸" width="268" />
                                                    <el-table-column prop="price" label="金额 (元) / 天" />
                                                </el-table>
                                            </div>

                                            <!-- 页码部分 -->
                                            <div class="pagination">
                                                <el-pagination background layout="prev, pager, next" :total="total"
                                                    prev-text="上一页" next-text="下一页" :default-page-size="pageSize"
                                                    v-model:current-page="page" @change="changePage" />
                                            </div>
                                        </div>
                                    </div>

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

                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单列表" name="2">
                        <!-- 工单列表 -->
                        <AdvertisingOrderList @childData="handleChildData"></AdvertisingOrderList>
                    </el-tab-pane>
                </el-tabs>

            </div>
            <div class="bottom" v-if="ad != 3 && activeName == '1'" :key="ad">
                <div class="inner">
                    <!-- 总金额 -->
                    <div class="amount" v-if="ad == 2">
                        总金额:
                        <span>{{ priceTotal == '' ? 0 : priceTotal }}</span>
                        元
                    </div>
                    <!-- 按钮 -->
                    <div class="btn">
                        <button class="btn1" @click="prevStep" v-if="ad == 2">上一步</button>
                        <button class="btn2" @click="nextStep" v-if="ad == 1">下一步</button>
                        <button class="btn2" @click="submitStep" v-if="ad == 2"> 提交工单</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告页面底部 -->
        <AdvertisingFoot></AdvertisingFoot>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
import { ElCheckbox, ElRadio, ElRadioGroup, ElDatePicker, ElInput, ElUpload, ElPagination, ElIcon, ElSelect, ElOption, ElTabs, ElTabPane, ElTable, ElTableColumn, ElMessage, ElForm, ElFormItem, ElCol, valueEquals } from 'element-plus'
import { ElButton, ElDialog } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { Plus, DArrowRight, Edit, Picture, UploadFilled } from '@element-plus/icons-vue'

import { useRoute } from 'vue-router'

const route = useRoute()

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

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

let activeName = useState("activeName", () => "1")
let startTime = useState("startTime", () => new Date())
let adSize = useState("adSize", () => "")
let tableData = useState("tableData", () => [])
let processedData = useState("processedData", () => [])
let pid = useState("pid", () => [])
let pids = useState("pids", () => [])
let pidArr = useState("pidArr", () => [])
let orderInformation = useState("orderInformation", () => "")
let adWeb = useState("adWeb", () => "")
let adWebId = useState("adWebId", () => "")
let adWebList = useState("adWebList", () => [])
let priceTotal = useState("priceTotal", () => '')//总金额
let orderId = useState("orderId", () => "")
let options = useState('options', () => [])
const multipleTable = ref('');
let shopCode = useState('shopCode', () => '')



// 分页
let total = useState('total', () => 0)
let pageSize = useState("pageSize", () => 10)
let page = useState("page", () => 1)


//ruleForm
let logoUrl = ref('');
const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = reactive({
    adName: '',
    adLink: '',
    startTime: '',
    endTime: '',
    adSize: '',
    adImg: '',
});

const rules = reactive({
    adName: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
    adLink: [{ required: true, message: '请输入广告链接', trigger: 'change' }],
    startTime: [{ required: true, message: '请输入开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请输入结束时间', trigger: 'change' }],
    adSize: [{ required: true, message: '请选择广告尺寸', trigger: 'change' }],
    adImg: [{ required: true, message: '请选择广告图', trigger: 'change' }],
});

const tabPosition = ref('left')

// 获取开始时间
let changeStartTime = (val) => {
    ruleForm.startTime = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(ruleForm.startTime);
}
let disabledStartTime = (time) => {
    return time.getTime() <= (Date.now() + 3600 * 1000 * 24);
}

// 获取结束时间
let changeEndTime = (val) => {
    ruleForm.endTime = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(ruleForm.endTime);
}
let disabledEndTime = (time) => {
    // console.log('时间',time);
    // console.log("time.getTime()",time.getTime());
    if (ruleForm.startTime == '') {
        return true;
    } else {
        const targetDate = new Date(ruleForm.startTime);// 这里设置禁用日期为2024年1月1日之前的日期
        return time.getTime() < targetDate.getTime() + 3600 * 1000 * 24;
    }
}

const imageUrl = ref('');
const handleAvatarSuccess = (response, uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
};
const bb = (item) => {
    console.log("===", item)
    navigateTo({
        path: "/advertising/addetail",
        query: {
            id: item
        }
    })
}
//获取图片地址
const beforeAvatarUpload = (file) => {
    console.log('file', file);

    if (!file) return;
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
        return;
    }
    if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!');
        return;
    }

    const data = new FormData();
    data.append('file', file);

    axios.post("/public/uploadFile", data).then(res => {
        console.log(res);
        logoUrl.value = res.data.imgUrl;
        ruleForm.adImg = res.data.imgUrl;
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '网络错误，请重试！'
        });
    });
};

let goPhoto = () => {
    dialogTableVisible.value = true
}

//选择的广告位
let handleSelectionChange = (selectedRows) => {

    pidArr.value = selectedRows.map(row => row.pid);
    console.log("选中的广告位llllllllll", pidArr.value);
    // getPrice() //获取总金额
    let aa = JSON.parse(JSON.stringify(pidArr.value))
    console.log("pids", aa);

    for (let item = 0; item <= aa.length - 1; item++) {
        console.log('pidArr.value', aa[item]);
        pids.value = aa[item]
    }
}

pidArr.value.forEach((item) => {
    const index = tableData.findIndex((row) => row.id === item);
    if (index !== -1) {
        tableData[index].selected = true;
    }
});

let toggleRowSelection = (row) => {
    console.log('11111', row.pid);
    console.log('类型', typeof (row.pid));

    // 判断 row.pid 是否已经存在于 pid.value 数组中
    const isExist = pid.value.includes(row.pid);
    console.log('判断当前选择的id是否已被选择', isExist); // 输出: true
    if (isExist) {
        //删除购物车中的广告位
        let data = {
            shopping_id: shopCode.value,
            pid: row.pid,
        }
        //删除购物车接口
        axios.post('/order/delShoppingCartAD', data).then(data => {
            console.log('删除购物车广告位--------------', data);
            if (data.code == 200) {
                getShoppingCartAD()
            }
        })
    } else {
        //添加购物车中的广告位
        let data = {
            shopping_id: shopCode.value,
            pid: row.pid,
        }
        //添加购物车接口
        axios.post('/order/addShoppingCartAD', data).then(data => {
            console.log('添加购物车广告位--------------', data);
            if (data.code == 200) {
                getShoppingCartAD()
            }
        })
    }

};

onMounted(() => {
    tableData.value.forEach((row) => {
        console.log(row);

        if (row.selected) {
            multipleTable.value.toggleRowSelection(row, true);
        }
    });
});

//搜索前选择网站
let chooseweb = (id) => {
    console.log("id", id);
    adWebId.value = id
}

// 点击搜索按钮
let goSearch = () => {
    console.log(1);
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
        website_id: adWebId.value
    }
    // 搜索按钮接口
    axios.post("/order/getWebsiteAd", adData).then(response => {
        console.log(response.data);
        console.log(response.data.rows);
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
        }
    })
}

//点击重置
let goReset = () => {
    adWeb.value = ''
    priceTotal.value = 0
    pidArr.value = []
    getDate()
}

let getDate = () => {

    // 获取广告位需要传递的参数
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
    }
    //获取广告位
    axios.post("/order/getAD", adData).then(response => {
        console.log("广告位信息", response.data.rows);
        total.value = response.data.count
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
            item.selected = false
        }

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

//获取广告尺寸列表
let adSizeList = () => {
    // 搜索按钮接口
    axios.post("/order/getAD").then(response => {
        console.log("responseresponse", response);
        options.value = response.data
        for (let item of options.value) {
            console.log(item);
            item.size = item.width + ' * ' + item.height + ' px '
        }
        console.log("=========", options.value);
    })
}

//查看工单
let lookOrder = () => {
    activeName.value = '2'
    sessionStorage.setItem('activeName', JSON.stringify('2'));
    window.location.href = (`http://localhost:3000/advertising?activeName=${'2'}`)
    // window.location.href = (`http://nwdev.bjzxtw.org.cn/advertising?activeName=${'2'}`)

    // navigateTo({
    //     path: "/advertising/adDetail",
    //     query: {
    //         id: orderId.value
    //     }
    // })
}

//再次申请
let reapply = () => {
    ad.value = 1
    window.location.href = ('http://localhost:3000/advertising')
    // window.location.href = ('http://nwdev.bjzxtw.org.cn/advertising')
}

//获取总金额
const getPrice = () => {
    let data = {
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pid: pid.value
    }
    console.log('data=========', data);

    axios.post('/order/getPrice', data).then(data => {
        console.log('获取到的金额', data.data);
        priceTotal.value = data.data
        // let count = data.data
        // priceTotal.value = Number(priceTotal.value) + Number(count);
    })
}


//获取购物车广告位 
const getShoppingCartAD = () => {
    axios.post('/order/getShoppingCartAD', {
        shopping_id: shopCode.value
    }).then(data => {
        console.log('获取购物车广告位=====================', data.data.pid);
        pid.value = data.data.pid
        getPrice()
    })
}

// 添加购物车广告位 addShoppingCartAD
const addShoppingCartAD = () => {
    axios.post('/order/addShoppingCartAD', {
        shopping_id: shopCode.value,
        pid: pidArr.value
    }).then(data => {
        console.log('添加购物车广告位', data.data);
    })
}

//删除购物车中的广告位 delShoppingCartAD
const delShoppingCartAD = () => {
    axios.post('/order/delShoppingCartAD', {
        shopping_id: shopCode.value,
        pid: pidArr.value
    }).then(data => {
        console.log('删除购物车广告位', data.data);
    })
}


//挂载成功
onMounted(() => {
    adSizeList()
    getPrice()

    if (route.query.activeName == '1' || route.query.activeName == '2') {
        activeName.value = route.query.activeName;
    }
    if (!route.query.activeName) {
        activeName.value = JSON.parse(sessionStorage.getItem('activeName'));
        // console.log('activeName', activeName.value);
    }
})
onMounted(() => {
    // ad.value=route.query.ad

    watch(activeName, (newval) => {
        console.log('activeName', newval);
        sessionStorage.setItem('activeName', JSON.stringify(newval));
    }, {
        deep: true,
        immediate: true
    })
})

//页码发生改变
watch(page, (newval) => {
    page.value = newval
    console.log(newval);
}, {
    deep: true,
    immediate: true
})

//页码发生改变
const changePage = (val) => {
    console.log(val);
    page.value = val
    // 获取广告位需要传递的参数
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
    }

    //获取广告位
    axios.post("/order/getAD", adData).then(response => {
        console.log("广告位", response.data);
        // console.log("广告位信息", response.data.rows);
        total.value = response.data.count
        for (let item of response.data.rows) {
            if (pid.value.includes(item.pid)) {
                item.selected = true
                // console.log(item.selected);
            } else {
                item.selected = false
            }
        }
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
        }
        console.log(tableData.value);
    }).catch(error => {
        console.log(error);
    })
}

//6.子组件传递的数据 start ---------------------------------------->
let handleChildData = (data) => {
    activeName.value = `${data}`
}
//6.子组件传递的数据 end ---------------------------------------->

//点击上一步按钮
let prevStep = () => {
    ad.value--
    pid.value = []
    page.value = 1
    pageSize.value = 10
    getPrice()
    console.log(pidArr.value);
}


// 点击下一步与提交工单按钮
let nextStep = () => {
    // 表单验证
    if (ruleForm.adName == '') {
        ElMessage({
            message: '请输入广告名称',
            type: 'error',
        })
        return
    }
    if (ruleForm.adLink == '') {
        ElMessage({
            message: '请输入广告链接',
            type: 'error',
        })
        return
    }
    if (ruleForm.startTime == '') {
        ElMessage({
            message: '请选择广告持续时间!',
            type: 'error',
        })
        return
    }
    if (ruleForm.endTime == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adSize == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adImg == '') {
        ElMessage({
            message: '请添加广告图',
            type: 'error',
        })
        return
    }

    // 点击下一步
    if (ad.value == 1) {
        ad.value++

        //获取网站名称需要传递的参数
        let data = {
            ad_size_id: ruleForm.adSize,
            starttime: ruleForm.startTime,
            endtime: ruleForm.endTime,
            pageSize: pageSize.value,
            page: page.value,
        }
        console.log(data);

        //网站名称
        axios.post("/order/getWebsiteAd", data).then(response => {
            console.log("网站名称", response);
            // console.log("网站名称", response.data.rows);
            adWebList.value = response.data.rows
        }).catch(error => {
            console.log(error);
        })


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

        //获取广告位
        axios.post("/order/getAD", adData).then(response => {
            console.log("广告位", response.data);
            // console.log("广告位信息", response.data.rows);
            total.value = response.data.count
            tableData.value = response.data.rows
            for (let item of tableData.value) {
                item.size = item.size_width + ' * ' + item.size_height + ' px '
                item.selected = false
            }
            console.log('tableData', tableData.value);
        }).catch(error => {
            console.log(error);
        })

        //创建购物车
        if (!shopCode.value) {
            axios.post("/order/addShoppingCart").then(response => {
                // console.log("创建购物车", response.data);
                shopCode.value = response.data
                console.log('shopCode', shopCode.value);
            })
        }
    }
}
// 点击提交工单信息
let submitStep = () => {

    // 获取广告位需要传递的参数
    let orderData = {
        name: ruleForm.adName,
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        imgurl: ruleForm.adLink,
        imgsrc: ruleForm.adImg,
        pid: pid.value,
        price: priceTotal.value
    }


    //提交工单
    axios.post("/order/addAD", orderData).then(response => {
        console.log("提交工单", response); //order_id
        console.log("orderData", orderData);


        if (response.code == 200) {
            tableData.value = response.data.rows
            orderInformation.value = response.data.ordernum
            ad.value = 3
            orderId.value = response.data.order_id
        }


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


// // 点击广告购买标签的事件驱动函数
let goBuyAd = () => {
    activeName.value = '1'
}

// 点击工单列表标签的事件驱动函数
let goOrderList = (item) => {

    if (item == 2 && (route.query.activeName == '1' || route.query.activeName == '2')) {
        window.location.href = ('http://localhost:3000/advertising')
        // window.location.href = ('http://nwdev.bjzxtw.org.cn/advertising')
    }
}


watch(adSize, (newval) => {
    // console.log('newval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})
watch(ad, (newval) => {
    // console.log('adnewval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})


</script>

<style lang="less" scoped>
// 广告页面头部
.head {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 27px;
    }

    .headLogo {
        img {
            width: 127px;
            height: 27px;
            padding-right: 15px;
            vertical-align: -10px;
            border-right: 1px solid #999;
        }

        span {
            display: inline-block;
            width: 100px;
            padding-left: 15px;
            vertical-align: middle;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .right {
        span {
            margin-left: 26px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .home,
        .collection {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: -3px;
        }

        .home {
            background-image: url("../../static/images/Iconly／Light／Home.png");
        }

        .collection {
            background-image: url("../../static/images/Iconly／Light／Star.png");
        }
    }
}

//提示信息
.tips {
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 70px;
    }

    p {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FE0101;
        // line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}


.advertising {
    width: 100%;
    overflow: hidden;

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

        // 左侧tab导航
        :deep(.el-tabs--left .el-tabs__header.is-left) {
            margin-top: 50px;
            margin-right: 10px;
        }

        // 左侧tab导航字体颜色
        :deep(.el-tabs__item.is-active),
        :deep(.el-tabs__item:hover) {
            color: #139602;
            // font-weight: bold;
        }

        // 左侧tab导航字体大小
        :deep(.el-tabs--left .el-tabs__item.is-left) {
            text-align: right;
            font-size: 20px;
        }

        // 左侧tab导航下划线
        :deep(.el-tabs__active-bar) {
            background-color: #139602;
        }

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

            .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;
                        overflow: hidden;
                        // height: 515px;
                        margin-top: 35px;
                        margin-left: 50px;

                        /deep/ .el-form-item {
                            margin-bottom: 35px;
                        }

                        .el-col {
                            height: 36px;
                        }

                        .el-col-2 {
                            text-align: center;
                        }

                        .chooseImg {
                            display: block;
                        }

                        .chooseImgDiv {
                            font-size: 16px;
                            font-style: normal;
                        }

                        .avatar-uploader {
                            width: 120px;
                            height: 120px;
                            border: 1px solid #ededed;
                            border-radius: 12px;
                        }

                        .avatar-uploader .avatar {
                            width: 120px;
                            border-top-left-radius: 12px;
                            border-top-right-radius: 12px;
                        }

                        .avatar-uploader .el-upload {
                            border: 1px dashed var(--el-border-color);
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            transition: var(--el-transition-duration-fast);
                        }

                        .avatar-uploader .el-upload:hover {
                            border-color: var(--el-color-primary);
                        }

                        .el-icon.avatar-uploader-icon {
                            display: block;
                            font-size: 36px;
                            color: #8c939d;
                            background-color: #fafafa;
                            width: 120px;
                            height: 120px;
                            padding-top: 30px;
                            box-sizing: border-box;
                            border: 1px solid #EDEDED;
                            border-radius: 12px;
                            text-align: center;
                        }

                        >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;
                            }

                            //上传图片相关样式
                            .avatar-uploader .el-upload {
                                border: 1px dashed var(--el-border-color);
                                border-radius: 6px;
                                cursor: pointer;
                                position: relative;
                                overflow: hidden;
                                transition: var(--el-transition-duration-fast);
                            }

                            .avatar-uploader .el-upload:hover {
                                border-color: var(--el-color-primary);
                            }

                            .el-icon.avatar-uploader-icon {
                                font-size: 28px;
                                color: #8c939d;
                                width: 178px;
                                height: 178px;
                                text-align: center;
                            }

                            //上传图片相关样式 end


                            :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;
                                }
                            }

                        }

                        //示意图
                        .my-header {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            gap: 16px;

                            .el-button {
                                border-radius: var(--el-border-radius-base);
                                font-size: var(--el-font-size-base);
                                background: #ee8787;
                                border: none;
                            }
                        }

                        .graph {
                            background-color: #fff;
                            padding: 40px 60px 80px;
                            overflow: hidden;
                            display: flex;

                            li {
                                float: left;

                                span {
                                    display: inline-block;
                                    width: 246px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: bold;
                                    font-size: 16px;
                                    color: #333333;
                                    line-height: 30px;
                                    text-align: center;
                                    margin-bottom: 15px;
                                }

                                img {
                                    width: 246px;
                                    height: 344px;
                                }
                            }

                            >li:first-child {
                                margin-right: 60px;
                            }

                            >li:last-child {
                                margin-left: 60px;
                            }
                        }

                        // 页面中的表格
                        .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 {
                            display: flex;
                            justify-content: center;
                            // margin-top: 60px;
                            margin-bottom: 90px;

                            // 鼠标移入后字体颜色
                            :deep(.el-pagination:hover) {
                                color: #139609;
                            }

                            :deep(.el-pagination.is-background .btn-next),
                            :deep(.el-pagination.is-background .btn-prev) {
                                width: 70px;
                                height: 34px;
                                margin: 0px 10px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .el-pager li) {
                                margin: 0px 10px;
                                width: 38px;
                                height: 34px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .btn-next.is-active),
                            :deep(.el-pagination.is-background .btn-prev.is-active),
                            :deep(.el-pagination.is-background .el-pager li.is-active) {
                                background-color: #028e21;
                                color: #fff;
                            }
                        }

                    }

                    // 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;

                .btn1 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #ffffff;
                    color: #028e21;
                    border: 1px solid #028e21;
                    border-radius: 6px;
                    margin-right: 50px;
                    margin-top: 53px;
                }

                .btn2 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #028e21;
                    color: #ffffff;
                    border: none;
                    border-radius: 6px;
                    margin: 53px 0;
                }
            }

        }
    }
}
</style>