|
|
@@ -1,523 +1,481 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
<u-sticky :h5-nav-height="0" z-index="9099" :offset-top='0'>
|
|
|
- <uni-NavBar :headerTitle="`${headerTitle}详情`" background="#fff" :isSlot="false"></uni-NavBar>
|
|
|
- <view class="status-message dis a-c " :style="{background:detailsInfo.styleCOlor.backcolor}">
|
|
|
- <text>{{adTypeMap}}</text>
|
|
|
- <view class="status"
|
|
|
- :style="{background:detailsInfo.styleCOlor.backcolor1,color:detailsInfo.styleCOlor.color}">
|
|
|
- {{statusTypeMap}}
|
|
|
- </view>
|
|
|
- <text class="error" v-if="detailsInfo.status=='1'" @click="rejectReasonShow=true">查看驳回原因</text>
|
|
|
- </view>
|
|
|
- </u-sticky>
|
|
|
- <view class="body">
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">基本信息</text>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>投放计划名称</text>
|
|
|
- <text>{{detailsInfo.name}}</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>位置名称</text>
|
|
|
- <text>{{detailsInfo.positionName}}</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>广告类型</text>
|
|
|
- <text>{{adTypeMap}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">投放区域</text>
|
|
|
- <text class="address">{{detailsInfo.address}}</text>
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">投放时间</text>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>投放开始日期</text>
|
|
|
- <text>{{detailsInfo.startDate}}</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>投放结束日期</text>
|
|
|
- <text>{{detailsInfo.endDate}}</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>生效周期</text>
|
|
|
- <text>{{detailsInfo.validPeriodType==0?'每天':detailsInfo.validPeriodType==1 ? '每周':'每月'}}</text>
|
|
|
- </view>
|
|
|
- <view class="extendArea dis a-c f-wrap mt-2" style="padding-bottom: 0;"
|
|
|
- v-if="detailsInfo.validPeriodType!='0'">
|
|
|
- <view class="cycleStrategy dis a-c j-c" v-for="(item,index) in cycleStrategylist" :key="index"
|
|
|
- :class="{ 'tcycleStrategy-active': selectedDays.includes(item.value) }">
|
|
|
- <text>{{item.label}}</text>
|
|
|
+ <uni-NavBar headerTitle="广告列表" background="linear-gradient(230deg, #CFE6FF 40%, #FFFFFF 100%)"
|
|
|
+ :isSlot="false"></uni-NavBar>
|
|
|
+ <div class="search dis a-c j-s ">
|
|
|
+ <u-search v-model="selectedOptions.name" @custom="custom" @search="search" shape="square" :height='68'
|
|
|
+ color="#AAAAAA" bg-color="#F6F8FC" :input-style="{background:'transparent'}"
|
|
|
+ :actionStyle="{position: 'absolute',right:'50px',boxSiting:'border-box',borderLeft:'2rpx solid #DDDDDD'}"
|
|
|
+ placeholder-color="#AAAAAA" :clearabled="true" @clear="clear" placeholder="请输入关键词"></u-search>
|
|
|
+ <u-icon name="list" class="ml-2" color="#333" size="48" @click="categoryFilterShow=true"></u-icon>
|
|
|
+ </div>
|
|
|
+ </u-sticky>
|
|
|
+ <!-- 广告列表 -->
|
|
|
+ <view class="adlist dis f-c ">
|
|
|
+ <view class="dataView dis a-c j-s" v-for="(item,index) in dataList" :key="index" @click="godetails(item)">
|
|
|
+ <view class="dataView-left dis a-start">
|
|
|
+ <image :src="item.taskImage" mode=""></image>
|
|
|
+ <view class="content dis f-c ">
|
|
|
+ <text class="title">{{item.name}}</text>
|
|
|
+ <view class="tag dis a-c ">
|
|
|
+ <text>{{adTypeMap(item.type)}}</text>
|
|
|
+ <text>{{item.positionName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="dis a-c mb-1">
|
|
|
+ <view class="time-tag mr-1">始</view>
|
|
|
+ <text class="time-text"> 开始时间：{{item.planStartTime}} </text>
|
|
|
+ </view>
|
|
|
+ <view class="dis a-c">
|
|
|
+ <view class="time-tag mr-1" style="background-color: #FF5353;">终</view>
|
|
|
+ <text class="time-text"> 结束时间：{{item.planEndTime}} </text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>生效时段</text>
|
|
|
- <text>{{detailsInfo.validTimeRangeType==0?'全天':'指定时间段'}}</text>
|
|
|
- </view>
|
|
|
- <view class="extendArea mt-2" style="font-size: 26rpx;" v-if="detailsInfo.validTimeRangeType=='1'">
|
|
|
- <view class=" dis a-c j-s mb-3">
|
|
|
- <text style="color: #333;">开始时间</text>
|
|
|
- <text style="color: #aaa;" class="mr-1">{{timeSegmentStart}}</text>
|
|
|
- </view>
|
|
|
- <view class=" dis a-c j-s ">
|
|
|
- <text style="color: #333;">开始时间</text>
|
|
|
- <text style="color: #aaa;" class="mr-1">{{timeSegmentEnd }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">投放内容</text>
|
|
|
- <view class="admaterial mt-3 ">
|
|
|
- <u-swiper :list="imagelist" mode="number" indicator-pos="bottomRight" height="330"
|
|
|
- v-if="detailsInfo.imageType=='1'"></u-swiper>
|
|
|
- <video v-else id="myVideo" :src="detailsInfo.taskImage"
|
|
|
- :style="{height:'330rpx',width:'100%',borderRadius:'10rpx'}" :muted="false"
|
|
|
- :enable-progress-gesture="true">
|
|
|
- </video>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">计费方式</text>
|
|
|
- <view class="views dis a-c j-s " v-for="(item,index) in adPricingModelList" :key="index">
|
|
|
- <text>{{item.pricingName}}</text>
|
|
|
- <text>{{item.amount}} {{item.pricingUnit}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">投放频次</text>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>每人每天展示次数</text>
|
|
|
- <text>{{detailsInfo.userDailyDisplayLimit || '不限'}}次</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>每人展示总次数</text>
|
|
|
- <text>{{detailsInfo.userTotalDisplayLimit || '不限'}}次</text>
|
|
|
- </view>
|
|
|
- <view class="views dis a-c j-s ">
|
|
|
- <text>展示时间间隔</text>
|
|
|
- <text>{{detailsInfo.showInterval || '不限'}}分钟</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="module dis f-c ">
|
|
|
- <text class="module-title ">广告预算</text>
|
|
|
- <view class="views dis a-c j-s">
|
|
|
- <text>广告预算</text>
|
|
|
- <text>{{detailsInfo.adBudget}}元</text>
|
|
|
+ <view class="dataView-right ">
|
|
|
+ <text class="status"
|
|
|
+ :style="{color:statusColorMap(item.status)}">{{item.statusName}}</text>
|
|
|
+ <u-icon name="arrow-right" class="ml-1" color="#979797" size="24"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="footer-view dis a-c j-s ">
|
|
|
- <view class="dis a-c j-c " @click="adEdit">
|
|
|
- 编辑
|
|
|
- </view>
|
|
|
- <view class="dis a-c j-c " @click="delShow=true">
|
|
|
- 作废
|
|
|
+ <view class="footer">
|
|
|
+ <view class="btn dis a-c j-c" @click="ifPlatform=true">
|
|
|
+ <image src="/static/ad/createAd.png" mode="" style="width: 32rpx ; height: 32rpx;margin-right: 13rpx;">
|
|
|
+ </image>
|
|
|
+ <text>投广告</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-popup v-model="rejectReasonShow" mode="center" width="580rpx" :closeable="false" border-radius="20">
|
|
|
+ <u-popup v-model="createAdShow" mode="center" width="580rpx" :closeable="true" border-radius="20">
|
|
|
<view class="popup">
|
|
|
<view class="header dis a-c j-c ">
|
|
|
- <text>驳回原因</text>
|
|
|
- </view>
|
|
|
- <view class="content dis f-c a-c ">
|
|
|
- {{detailsInfo.rejectReason}}
|
|
|
+ <text>选择广告类型</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="popup-footer dis a-c j-s">
|
|
|
- <view class="dis a-c j-c" @click="rejectReasonShow=false">
|
|
|
- 我知道了
|
|
|
- </view>
|
|
|
- <view class="dis a-c j-c" @click="adEdit">
|
|
|
- 去修改
|
|
|
+ <view class="createAd-content dis f-wrap j-s">
|
|
|
+ <view class="adimage dis f-c j-c" v-for="(item,index) in adbgImage" :key="index"
|
|
|
+ :style="{ backgroundImage: `url('${item.image}')` }" @click="adTypeSelect(item.value)">
|
|
|
+ <text class="mb-1">{{item.name}}</text>
|
|
|
+ <text>{{item.content}}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</u-popup>
|
|
|
- <u-popup v-model="delShow" mode="center" width="580rpx" :closeable="false" border-radius="20">
|
|
|
+ <u-popup v-model="categoryFilterShow" mode="bottom" :closeable="true" border-radius="20" height="730px">
|
|
|
<view class="popup">
|
|
|
<view class="header dis a-c j-c ">
|
|
|
- <text>提示</text>
|
|
|
+ <text>请选择</text>
|
|
|
</view>
|
|
|
- <view class="content dis f-c a-c ">
|
|
|
- <text class="title mb-3">是否将此广告作废？</text>
|
|
|
- <text>广告一旦作废将无法使用，只能重新 投放新广告哦~</text>
|
|
|
+ <view class="categoryFilter">
|
|
|
+ <view class="view dis f-c " v-for="(item,index) in categoryFilter" :key="index">
|
|
|
+ <text class="title">{{item.title}}</text>
|
|
|
+ <view class="dis f-wrap a-c">
|
|
|
+ <view class="status-options dis a-c j-c" :class="{ 'active': isActive(item, Filteritem) }"
|
|
|
+ v-for="(Filteritem,Filterindex) in item.options" :key="Filterindex"
|
|
|
+ @click="optionsClick(item, Filteritem)">
|
|
|
+ <text>{{Filteritem.label}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="view dis f-c ">
|
|
|
+ <text class="title">投放页面</text>
|
|
|
+ <view class="dis f-wrap a-c">
|
|
|
+ <view class="status-options dis a-c j-c"
|
|
|
+ :class="{'active':selectedOptions.positionId==item.id}"
|
|
|
+ v-for="(item,index) in adSlotList" :key="index" @click="adSlotOptions(item)">
|
|
|
+ <text>{{item.positionName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="view dis f-c ">
|
|
|
+ <text class="title">广告日期</text>
|
|
|
+ <view class="time-select dis a-c j-s" @click="timeChange">
|
|
|
+ <text class="">{{startTime && endTime ? startTime+" - "+endTime:'请选择' }}</text>
|
|
|
+ <u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="popup-footer dis a-c j-s">
|
|
|
- <view class="dis a-c j-c" @click="delShow=false">
|
|
|
- 取消
|
|
|
+ <view class="categoryFilter-footer dis a-c j-s">
|
|
|
+ <view class="dis a-c j-c" @click="categoryFilterShow=false">
|
|
|
+ 重置
|
|
|
</view>
|
|
|
- <view class="dis a-c j-c" @click="markAsInvalid">
|
|
|
- 确定
|
|
|
+ <view class="dis a-c j-c" @click="queryType">
|
|
|
+ 查询
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
+ <my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
|
|
|
+ <AdServicePopup v-if="ifPlatform" @contact="onContactPlatform"/>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
+ import myDatePicker from '@/components/date-picker.vue';
|
|
|
+ import uniNavBar from '@/components/uni-NavBar/uni-NavBar.vue'
|
|
|
+ import AdServicePopup from './popup_platform.vue'
|
|
|
+
|
|
|
+ import {
|
|
|
+ USER_INFO
|
|
|
+ } from '@/common/util/constants.js'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ myDatePicker,
|
|
|
+ uniNavBar,AdServicePopup
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- rejectReasonShow: false, //驳回弹窗
|
|
|
- delShow: false, //作废弹窗
|
|
|
- timeSegmentStart: "", //生效开始时间
|
|
|
- timeSegmentEnd: "", //生效结束时间
|
|
|
- imagelist: [], //图片回显列表
|
|
|
- colorList: [{
|
|
|
- id: 0,
|
|
|
- color: "rgba(230, 141, 0, 1)",
|
|
|
- backcolor: "rgba(230, 141, 0, 0.1)",
|
|
|
- backcolor1: "rgba(230, 141, 0, 0.2)",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- color: "rgba(255, 19, 19, 1)",
|
|
|
- backcolor: "rgba(255, 19, 19, 0.1)",
|
|
|
- backcolor1: "rgba(255, 19, 19, 0.2)",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- color: "rgba(100, 166, 255, 1)",
|
|
|
- backcolor: "rgba(100, 166, 255, 0.1)",
|
|
|
- backcolor1: "rgba(100, 166, 255, 0.2)",
|
|
|
+ categoryFilterShow: false, //分类筛选
|
|
|
+ createAdShow: false, //创建广告弹窗
|
|
|
+ selectedOptions: {
|
|
|
+ type: null,
|
|
|
+ status: null,
|
|
|
+ positionId: null,
|
|
|
+ name: "",
|
|
|
+ startDate: "",
|
|
|
+ endDate: "",
|
|
|
+ },
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ adbgImage: [{
|
|
|
+ name: "全屏广告",
|
|
|
+ value: "0",
|
|
|
+ content: "沉浸式覆盖",
|
|
|
+ image: require("../../static/ad/adtype1.png")
|
|
|
},
|
|
|
{
|
|
|
- id: 3,
|
|
|
- color: "rgba(119, 119, 120, 1)",
|
|
|
- backcolor: "rgba(119, 119, 120, 0.1)",
|
|
|
- backcolor1: "rgba(119, 119, 120, 0.2)",
|
|
|
+ name: "轮播广告",
|
|
|
+ value: "2",
|
|
|
+ content: "多内容循环展示",
|
|
|
+ image: require("../../static/ad/adtype2.png")
|
|
|
},
|
|
|
{
|
|
|
- id: 4,
|
|
|
- color: "rgba(100, 166, 255, 1)",
|
|
|
- backcolor: "rgba(100, 166, 255, 0.1)",
|
|
|
- backcolor1: "rgba(100, 166, 255, 0.2)",
|
|
|
+ name: "页面嵌入广告",
|
|
|
+ value: "3",
|
|
|
+ content: "自然融入页面",
|
|
|
+ image: require("../../static/ad/adtype3.png")
|
|
|
},
|
|
|
{
|
|
|
- id: 5,
|
|
|
- color: "rgba(0, 129, 171, 1)",
|
|
|
- backcolor: "rgba(0, 129, 171, 0.1)",
|
|
|
- backcolor1: "rgba(0, 129, 171, 0.2)",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- color: "rgba(175, 96, 255, 1)",
|
|
|
- backcolor: "rgba(175, 96, 255, 0.1)",
|
|
|
- backcolor1: "rgba(175, 96, 255, 0.2)",
|
|
|
+ name: "弹窗广告",
|
|
|
+ value: "1",
|
|
|
+ content: "强提醒触达",
|
|
|
+ image: require("../../static/ad/adtype4.png")
|
|
|
}
|
|
|
],
|
|
|
- detailsInfo: {}, //详情数据
|
|
|
- weekList: [], //周
|
|
|
- monthList: [], //月
|
|
|
- selectedDays: [], //周期策略选中日期
|
|
|
- adPricingModelList: [], //计费模式列表
|
|
|
- adSlotPriceList: [], //广告位价格列表
|
|
|
- headerTitle: "",
|
|
|
+ categoryFilter: [{
|
|
|
+ title: "广告类型",
|
|
|
+ filed: "type",
|
|
|
+ options: [{
|
|
|
+ id: 0,
|
|
|
+ label: "全部",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: "全屏广告",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: "弹窗广告",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: "轮播广告",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ label: "嵌入商品列表广告",
|
|
|
+ value: "3",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ }, {
|
|
|
+ title: "状态",
|
|
|
+ filed: "status",
|
|
|
+ options: [{
|
|
|
+ id: 0,
|
|
|
+ label: "全部",
|
|
|
+ value: " ",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // id: 1,
|
|
|
+ // label: "待审核",
|
|
|
+ // value: "0",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 2,
|
|
|
+ // label: "审核通过",
|
|
|
+ // value: "1",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // id: 3,
|
|
|
+ // label: "审核驳回",
|
|
|
+ // value: "2",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ label: "未开始",
|
|
|
+ value: "3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ label: "已生效",
|
|
|
+ value: "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ label: "已作废",
|
|
|
+ value: "5",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ label: "已结束",
|
|
|
+ value: "6",
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ }, ],
|
|
|
+ dataList: [], //广告列表
|
|
|
+ userInfo: {},
|
|
|
+ adSlotList: [], //广告位列表
|
|
|
+ ifPlatform:false
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
-
|
|
|
+ this.pageLlist(); //列表接口
|
|
|
+ this.queryAdSlot(); //查询广告位
|
|
|
},
|
|
|
- computed: {
|
|
|
+ onLoad() {
|
|
|
+ this.userInfo = uni.getStorageSync(USER_INFO);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onContactPlatform(){
|
|
|
+ this.ifPlatform = false
|
|
|
+ },
|
|
|
+ adSlotOptions(item) {
|
|
|
+ this.selectedOptions.positionId = item.id;
|
|
|
+ },
|
|
|
+ queryAdSlot() {
|
|
|
+ this.$http.get('/adPosition/queryPageList').then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ res.data.result.records.unshift({
|
|
|
+ id: "",
|
|
|
+ positionName: "全部"
|
|
|
+ })
|
|
|
+ this.adSlotList = res.data.result.records
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryType() {
|
|
|
+ this.pageLlist();
|
|
|
+ this.categoryFilterShow = false
|
|
|
|
|
|
- //区分月和周
|
|
|
- cycleStrategylist() {
|
|
|
- return this.detailsInfo.validPeriodType == '1' ? this.weekList : this.monthList;
|
|
|
},
|
|
|
- //广告类型
|
|
|
- adTypeMap() {
|
|
|
+ adTypeMap(ele) {
|
|
|
const map = {
|
|
|
0: '全屏广告',
|
|
|
1: '弹窗广告',
|
|
|
2: '轮播广告',
|
|
|
3: '页面嵌入广告',
|
|
|
}
|
|
|
- return map[this.detailsInfo.type] || ''
|
|
|
+ return map[ele] || ''
|
|
|
},
|
|
|
- //状态
|
|
|
- statusTypeMap() {
|
|
|
+ statusTypeMap(ele) {
|
|
|
const map = {
|
|
|
- 0: '待审核',
|
|
|
- 1: '审核驳回',
|
|
|
- 2: '审核通过',
|
|
|
3: '未开始',
|
|
|
4: '已生效',
|
|
|
5: '已作废',
|
|
|
6: '已结束',
|
|
|
}
|
|
|
- return map[this.detailsInfo.status] || ''
|
|
|
- }
|
|
|
- },
|
|
|
- async onLoad(options) {
|
|
|
- this.generateWeek();
|
|
|
- this.generatemonth();
|
|
|
- this.detailsInfo = JSON.parse(options.info);
|
|
|
- this.colorList.map(val => {
|
|
|
- if (val.id == this.detailsInfo.status) {
|
|
|
- this.detailsInfo.styleCOlor = val;
|
|
|
- }
|
|
|
- return val;
|
|
|
- })
|
|
|
- await this.getadBillingModel();
|
|
|
- this.imagelist = this.detailsInfo.taskImage.split(',');
|
|
|
- this.selectedDays = this.detailsInfo.validPeriodValue.split(',');
|
|
|
- let list = this.detailsInfo.validTimeRangeValue.split(',');
|
|
|
- this.timeSegmentStart = list[0];
|
|
|
- this.timeSegmentEnd = list[1];
|
|
|
- const map = {
|
|
|
- '0': '全屏广告',
|
|
|
- '1': '弹窗广告',
|
|
|
- '2': '轮播广告',
|
|
|
- '3': '页面嵌入广告',
|
|
|
- }
|
|
|
- this.headerTitle = map[this.detailsInfo.type] || ''
|
|
|
- },
|
|
|
- methods: {
|
|
|
- adEdit() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/adManagement/createFullscreenAd?id=' + this.detailsInfo.id,
|
|
|
- })
|
|
|
+ return map[ele] || ''
|
|
|
},
|
|
|
- //作废操作
|
|
|
- markAsInvalid() {
|
|
|
- this.$http.delete('advert/localAdvertTask/cancelDispatch?id=' + this.detailsInfo.id).then(res => {
|
|
|
- if (res.data.code == 200) {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
+ statusColorMap(ele) {
|
|
|
+ const map = {
|
|
|
+ 0: '#E68D00',
|
|
|
+ 1: '#F00000',
|
|
|
+ 2: '#006DFF',
|
|
|
+ 3: '#777777',
|
|
|
+ 4: '#006DFF',
|
|
|
+ 5: '#0081AB',
|
|
|
+ 6: '#AF60FF',
|
|
|
+ }
|
|
|
+ return map[ele] || ''
|
|
|
},
|
|
|
- //获取计费模式
|
|
|
- getadBillingModel() {
|
|
|
- this.$http.get('/adPricingPrice/queryPageList', {
|
|
|
- params: {
|
|
|
- adPositionId: this.detailsInfo.positionId,
|
|
|
- city: this.detailsInfo.cityCode,
|
|
|
+ pageLlist() {
|
|
|
+ this.$http.post('advert/localAdvertTask/pageList', {
|
|
|
pageNo: 1,
|
|
|
- pageSize: 1000,
|
|
|
- }
|
|
|
+ pageSize: 10,
|
|
|
+ adType: "1",
|
|
|
+ merchantId: this.userInfo.merchantId,
|
|
|
+ merchantName: this.userInfo.merchantName,
|
|
|
+ ...this.selectedOptions,
|
|
|
}).then(res => {
|
|
|
- if (res.data.result.records.length > 0) {
|
|
|
- this.adSlotPriceList = res.data.result.records[0]?.adPositionPriceRelList;
|
|
|
- this.$http.get('/adPricingModel/queryPageList', {
|
|
|
- params: {
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 1000,
|
|
|
- isDelete: 0,
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- const pricingUnitMap = {
|
|
|
- "1": "元/点击",
|
|
|
- "2": "元/天",
|
|
|
- "3": "元/笔销售",
|
|
|
- "4": "元/千次曝光",
|
|
|
- }
|
|
|
- this.adPricingModelList = res.data.result.records.map(val => {
|
|
|
- return {
|
|
|
- adPricingModelId: val.id,
|
|
|
- pricingName: val.pricingName,
|
|
|
- pricingUnit: pricingUnitMap[val.pricingUnit],
|
|
|
- checked: false,
|
|
|
- amount: "",
|
|
|
- }
|
|
|
- })
|
|
|
- const result = this.adPricingModelList.map(model => {
|
|
|
- const matchedPrice = this.adSlotPriceList.find(price => price
|
|
|
- .adPricingModelId === model.adPricingModelId);
|
|
|
- return {
|
|
|
- ...model,
|
|
|
- amount: matchedPrice ? matchedPrice.amount : model.amount,
|
|
|
- checked: false,
|
|
|
- id: matchedPrice?.id,
|
|
|
- };
|
|
|
- }).filter(val => val.amount).filter(val => val.id == this.detailsInfo
|
|
|
- .relId)
|
|
|
- this.adPricingModelList = result;
|
|
|
- console.log(this.adPricingModelList);
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: "该区域暂无计费模式相关配置"
|
|
|
- })
|
|
|
+ if (res.data.code == '200') {
|
|
|
+ this.dataList = res.data.result.records
|
|
|
}
|
|
|
-
|
|
|
})
|
|
|
},
|
|
|
- //周列表
|
|
|
- generateWeek() {
|
|
|
- const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((val, index) => {
|
|
|
- return {
|
|
|
- label: val,
|
|
|
- value: (index + 1).toString()
|
|
|
- }
|
|
|
+ godetails(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/adManagement/fullscreenAdDetails?id=' + item.id
|
|
|
})
|
|
|
- this.weekList = weekList;
|
|
|
},
|
|
|
- // 月列表
|
|
|
- generatemonth() {
|
|
|
- const monthList = Array.from({
|
|
|
- length: 31
|
|
|
- }, (_, index) => {
|
|
|
- const value = (index + 1).toString();
|
|
|
- return {
|
|
|
- label: value,
|
|
|
- value
|
|
|
- };
|
|
|
- });
|
|
|
- this.monthList = monthList;
|
|
|
+ //回车搜索事件
|
|
|
+ search(val) {
|
|
|
+ this.pageLlist();
|
|
|
+ },
|
|
|
+ //搜索按钮事件
|
|
|
+ custom(val) {
|
|
|
+ this.pageLlist();
|
|
|
+ },
|
|
|
+ clear(val) {
|
|
|
+ this.pageLlist();
|
|
|
+ },
|
|
|
+ optionsClick(item, Filteritem) {
|
|
|
+ if (item.filed) {
|
|
|
+ this.selectedOptions[item.filed] = Filteritem.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isActive(item, Filteritem) {
|
|
|
+ return this.selectedOptions[item.filed] === Filteritem.value;
|
|
|
+ },
|
|
|
+ timeChange() {
|
|
|
+ this.$refs.datePicker.open()
|
|
|
+ },
|
|
|
+ confirmPickDate(dateStr, dateStr1) {
|
|
|
+ if (dateStr) {
|
|
|
+ dateStr += ' 00:00:00'
|
|
|
+ }
|
|
|
+ if (dateStr1) {
|
|
|
+ dateStr1 += ' 23:59:59'
|
|
|
+ }
|
|
|
+ this.selectedOptions.startTime = dateStr;
|
|
|
+ this.selectedOptions.endTime = dateStr1;
|
|
|
},
|
|
|
+ adTypeSelect(value) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/adManagement/createFullscreenAd?adType=' + value
|
|
|
+ })
|
|
|
+ this.createAdShow = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- ::v-deep {
|
|
|
- .u-sticky {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.page {
|
|
|
background-color: #F7F8FC;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .body {
|
|
|
- padding: 0 24rpx 154rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
|
|
|
- .status-message {
|
|
|
- z-index: 9999;
|
|
|
- padding: 13rpx 24rpx;
|
|
|
+ .search {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 14rpx 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
|
|
|
- text {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
}
|
|
|
|
|
|
- .status {
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-left: 27rpx;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .error {
|
|
|
- margin-left: auto;
|
|
|
- color: #F00000;
|
|
|
+ ::v-deep {
|
|
|
+ .u-close-wrap {
|
|
|
+ margin-right: 70rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .module {
|
|
|
- padding: 30rpx 20rpx;
|
|
|
+ .dataView {
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
box-sizing: border-box;
|
|
|
- margin-top: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .module-title {
|
|
|
- font-size: 34rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .dataView-left {
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .views {
|
|
|
- margin-top: 30rpx;
|
|
|
+ .content {
|
|
|
+ height: 100%;
|
|
|
|
|
|
- text:first-child {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #777;
|
|
|
+ border-right: 1rpx solid #777;
|
|
|
+ padding-right: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-tag {
|
|
|
+ background-color: #3C96FF;
|
|
|
+ padding: 3rpx 6rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #8F96AC;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- text:last-child {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
+ >image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .address {
|
|
|
- margin-top: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
+ .dataView-right {
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
|
- .admaterial {
|
|
|
- border-radius: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .footer-view {
|
|
|
- z-index: 99;
|
|
|
+ .footer {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 17rpx 24rpx;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
background-color: #fff;
|
|
|
- padding: 17rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(225, 225, 225, 0.3);
|
|
|
|
|
|
- >view {
|
|
|
- width: 50%;
|
|
|
- padding: 26rpx;
|
|
|
+ .btn {
|
|
|
box-sizing: border-box;
|
|
|
- border-radius: 100rpx;
|
|
|
+ padding: 26rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #4B9DFF;
|
|
|
font-size: 30rpx;
|
|
|
- }
|
|
|
-
|
|
|
- :first-child {
|
|
|
- background: #fff;
|
|
|
- color: #888;
|
|
|
- border: 1px solid #E5E5E5;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- :last-child {
|
|
|
- background: #4B9DFF;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .extendArea {
|
|
|
- padding: 20rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #F6F8FC;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .cycleStrategy {
|
|
|
- min-width: 100rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 1px solid #E5E5E5;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- padding: 10rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-left: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tcycleStrategy-active {
|
|
|
- background: #E0EDFF;
|
|
|
- color: #006DFF;
|
|
|
- border: 1rpx solid #E0EDFF;
|
|
|
- }
|
|
|
-
|
|
|
.popup {
|
|
|
padding: 0 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
@@ -530,23 +488,75 @@
|
|
|
font-weight: bold;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- min-height: 350rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #888;
|
|
|
- padding: 50rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ .createAd-content {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .adimage {
|
|
|
+ width: 260rpx;
|
|
|
+ height: 143rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .categoryFilter {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .view {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
.title {
|
|
|
- font-size: 32rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-options {
|
|
|
+ min-width: 165rpx;
|
|
|
+ background: #F7F8FC;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ padding: 26rpx 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 28rpx;
|
|
|
color: #333;
|
|
|
- font-weight: bold;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: #ECF5FF;
|
|
|
+ border: 1px solid #3F99FF;
|
|
|
+ color: #1476EA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-select {
|
|
|
+ height: 88rpx;
|
|
|
+ background: #F7F8FC;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ padding: 30rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .popup-footer {
|
|
|
+ .categoryFilter-footer {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
width: 100%;
|
|
|
@@ -557,9 +567,9 @@
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
view:first-child {
|
|
|
- width: 50%;
|
|
|
+ width: 30%;
|
|
|
background: #FFFFFF;
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 27rpx;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 100px;
|
|
|
border: 1px solid #E5E5E5;
|
|
|
@@ -567,13 +577,13 @@
|
|
|
}
|
|
|
|
|
|
view:last-child {
|
|
|
- width: 50%;
|
|
|
+ width: 70%;
|
|
|
background: #4B9DFF;
|
|
|
color: #fff;
|
|
|
- padding: 20rpx;
|
|
|
+ padding: 27rpx;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 100px;
|
|
|
margin-left: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
