|
|
@@ -0,0 +1,996 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <u-sticky :h5-nav-height="0" z-index="9099" :offset-top='0'>
|
|
|
+ <uni-NavBar headerTitle="全屏广告创建" background="#fff" :isSlot="false"></uni-NavBar>
|
|
|
+ </u-sticky>
|
|
|
+ <u-form :model="adForm" :rules="adrules" ref="uForm" :label-width="200"
|
|
|
+ style="padding: 20rpx 24rpx 135rpx;box-sizing: border-box;">
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">基本信息</text>
|
|
|
+ <u-form-item label="投放计划名称" prop="name" required>
|
|
|
+ <u-input v-model="adForm.name" :custom-style="{textAlign:'right'}"
|
|
|
+ placeholder="请输入...(最多20个字符)"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="选择广告位" prop="positionName" required :border-bottom="false">
|
|
|
+ <u-input v-model="adForm.positionName" type="select" :select-open="adSlotShow"
|
|
|
+ @click="adSlotShow=true" :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">投放区域</text>
|
|
|
+ <u-form-item label="省市区" prop="district" :label-width="100" required :border-bottom="false">
|
|
|
+ <u-input v-model="queryTreeValue" type="select" :select-open="queryTreeShow"
|
|
|
+ @click="queryTreeShow=true" :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">投放时间</text>
|
|
|
+ <u-form-item label="投放开始时间" required prop="startDate">
|
|
|
+ <u-input v-model="adForm.startDate" type="select" :select-open="startDateShow"
|
|
|
+ @click="startDateShow=true" :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="投放结束时间" required prop="endDate">
|
|
|
+ <u-input v-model="adForm.endDate" type="select" :select-open="endDateShow" @click="endDateShow=true"
|
|
|
+ :custom-style="{textAlign:'right'}" placeholder="请选择"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <view class="dis f-c ">
|
|
|
+ <u-form-item label="生效周期" prop="validPeriodType" required
|
|
|
+ :border-bottom="adForm.validPeriodType && adForm.validPeriodType!='0'? false:true">
|
|
|
+ <view class="dis a-c j-end" style="width: 100%;">
|
|
|
+ <view class="tab-view dis a-c j-c"
|
|
|
+ :class="{'tab-view-active':adForm.validPeriodType==item.value}"
|
|
|
+ v-for="(item,index) in validPeriodTypeList" :key="index"
|
|
|
+ @click="validPeriodTypeSelect(item)">
|
|
|
+ <text>{{item.label}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ <!-- 周期策略选择 -->
|
|
|
+ <u-form-item prop="validPeriodValue" :border-bottom='false'
|
|
|
+ v-if="adForm.validPeriodType && adForm.validPeriodType!='0'">
|
|
|
+ <view class="extendArea dis a-c f-wrap" style="padding-bottom: 0;">
|
|
|
+ <view class="cycleStrategy dis a-c j-c" v-for="(item,index) in cycleStrategylist"
|
|
|
+ :key="index" :class="{ 'tcycleStrategy-active': selectedDays.includes(item.value) }"
|
|
|
+ @click="toggleDaySelection(item.value)">
|
|
|
+ <text>{{item.label}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="dis f-c ">
|
|
|
+ <u-form-item label="生效时段" prop="validTimeRangeType" required :border-bottom="false">
|
|
|
+ <view class="dis a-c j-end" style="width: 100%;">
|
|
|
+ <view class="tab-view dis a-c j-c"
|
|
|
+ :class="{'tab-view-active':adForm.validTimeRangeType==item.value}"
|
|
|
+ v-for="(item,index) in validTimeRangeTypeList" :key="index"
|
|
|
+ @click="timeSegmentSelect(item)">
|
|
|
+ <text>{{item.label}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ <view class="extendArea mb-3 " style="font-size: 26rpx;" v-if="adForm.validTimeRangeType=='1'">
|
|
|
+ <view class=" dis a-c j-s mb-3">
|
|
|
+ <text style="color: #333;">开始时间</text>
|
|
|
+ <view class="dis a-c" @click="timeSegmentStartShow=true">
|
|
|
+ <text style="color: #aaa;" class="mr-1">{{timeSegmentStart|| '请选择'}}</text>
|
|
|
+ <u-icon name="arrow-right" color="#979797" size="26"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class=" dis a-c j-s ">
|
|
|
+ <text style="color: #333;">开始时间</text>
|
|
|
+ <view class="dis a-c" @click="timeSegmentEndShow=true">
|
|
|
+ <text style="color: #aaa;" class="mr-1">{{timeSegmentEnd || "请选择"}}</text>
|
|
|
+ <u-icon name="arrow-right" color="#979797" size="26"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">投放内容</text>
|
|
|
+ <!-- 图片上传 -->
|
|
|
+ <view class="fileUpload ">
|
|
|
+ <view class="tabs dis a-end" v-if="tabList.length>1">
|
|
|
+ <view v-for="(item, index) in tabList" :key="index" class="tab dis a-c j-c" :class="{
|
|
|
+ active: fileUploadActiveTab === index,
|
|
|
+ tab1: fileUploadActiveTab !== index,
|
|
|
+ left: fileUploadActiveTab === 0,
|
|
|
+ right: fileUploadActiveTab === 1
|
|
|
+ }" @click="handleTab(index,item)">
|
|
|
+ <view class="tabtitle">
|
|
|
+ <view class="">
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fileUploadView" v-if="adForm.imageType=='1'">
|
|
|
+ <view class="p-2" v-show="imgFileList.length>0">
|
|
|
+ <u-upload ref="Upload" :file-list="imgFileList" :action="action"
|
|
|
+ @on-list-change="onListChange" @on-success="detailsSuccess" :source-type="['album']"
|
|
|
+ width="150" height="150">
|
|
|
+ </u-upload>
|
|
|
+ </view>
|
|
|
+ <view class="default dis f-c a-c j-c " @click="triggerUpload" v-if="!imgFileList.length">
|
|
|
+ <image src="/static/ad/ggtp.png" mode=""></image>
|
|
|
+ <text class="title">请上传广告图片</text>
|
|
|
+ <text>
|
|
|
+ 尺寸建议:建议图片1125*2436px,支持jpg、png格式,体积小于1Mb。因手机分辨率问题,部分机型可能图片展示不全,重要信息尽量展示在图片中部。
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="fileUploadView" v-if="adForm.imageType=='2'">
|
|
|
+ <view class="p-2 dis f-c " v-if="adForm.taskImage">
|
|
|
+ <video id="myVideo" :src="adForm.taskImage" :style="{width:'100%',height:'330rpx'}"
|
|
|
+ :muted="false" :enable-progress-gesture="true">
|
|
|
+ </video>
|
|
|
+ <view class="dis a-c j-end mt-2" style="width: 100%;">
|
|
|
+ <u-button size="medium" type="primary" plain style="margin-left: auto;"
|
|
|
+ @click="videoDel">删除</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="default dis f-c a-c j-c " @click="uploadVideo" v-else>
|
|
|
+ <image src="/static/ad/ggsp.png" mode=""></image>
|
|
|
+ <text class="title">请上传广告视频</text>
|
|
|
+ <text>尺寸建议:画面比例9:16,支持MP4格式,时长小于等于30秒。因手机分辨率问题,部分机型可能画面展示不全,重要信息尽量展示在画面中部。</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="module" v-if="adPricingModelList.length>0">
|
|
|
+ <text class="module-title">计费方式</text>
|
|
|
+ <u-radio-group v-model="adForm.relId" :wrap="true" active-color="#4B9DFF">
|
|
|
+ <view class="dis a-c j-c BillingModelView" v-for="(item, index) in adPricingModelList" :key="index">
|
|
|
+ <u-radio :name="item.id" label-size="26">
|
|
|
+ <text style="margin-right: 60rpx;">{{item.pricingName}}</text>
|
|
|
+ <text>{{ item.amount }} {{ item.pricingUnit }}</text>
|
|
|
+ </u-radio>
|
|
|
+ </view>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">投放频次</text>
|
|
|
+ <view class="deliveryFrequency dis a-c ">
|
|
|
+ <view class="title">每人每天展示次数</view>
|
|
|
+ <u-radio-group v-model="userDailyImpCount" @change="userDailyImpCountChange" active-color="#4B9DFF">
|
|
|
+ <u-radio name="1" label-size="26">不限</u-radio>
|
|
|
+ <u-radio name="2" label-size="26">限制</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ <view class="dis a-c flex-1" v-if="userDailyImpCount=='2'">
|
|
|
+ <u-input v-model="adForm.userDailyDisplayLimit" :custom-style="{width:'100rpx',minHeight:'0'}"
|
|
|
+ placeholder="请输入"></u-input>
|
|
|
+ <text>次</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="deliveryFrequency dis a-c ">
|
|
|
+ <view class="title">每人展示次数</view>
|
|
|
+ <u-radio-group v-model="userImpCount" @change="userImpCountChange" active-color="#4B9DFF">
|
|
|
+ <u-radio name="1" label-size="26">不限</u-radio>
|
|
|
+ <u-radio name="2" label-size="26">限制</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ <view class="dis a-c flex-1" v-if="userImpCount=='2'">
|
|
|
+ <u-input v-model="adForm.userTotalDisplayLimit" :custom-style="{width:'50rpx',minHeight:'0'}"
|
|
|
+ placeholder="请输入"></u-input>
|
|
|
+ <text>次</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="deliveryFrequency dis a-c ">
|
|
|
+ <view class="title">展示时间间隔</view>
|
|
|
+ <u-radio-group v-model="displayTimeInterval" @change="displayTimeIntervalChange"
|
|
|
+ active-color="#4B9DFF">
|
|
|
+ <u-radio name="1" label-size="26">不限</u-radio>
|
|
|
+ <u-radio name="2" label-size="26">限制</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ <view class="dis a-c flex-1" v-if="displayTimeInterval=='2'">
|
|
|
+ <u-input v-model="adForm.showInterval" :custom-style="{width:'50rpx',minHeight:'0'}"
|
|
|
+ placeholder="请输入"></u-input>
|
|
|
+ <text>分钟</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="module">
|
|
|
+ <text class="module-title ">广告预算</text>
|
|
|
+ <u-form-item label="广告预算" prop="adBudget" required :border-bottom="false">
|
|
|
+ <u-input v-model="adForm.adBudget" :custom-style="{textAlign:'right'}"></u-input>
|
|
|
+ <text class="ml-1">元</text>
|
|
|
+ </u-form-item>
|
|
|
+ <text class="mb-3" style="font-size: 22rpx;color: #aaa;">为保证广告正常投放,请保证余额账户有充足余额,余额不足时,广告 将自动暂停投放。</text>
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
+ <view class="footer-view">
|
|
|
+ <view class="dis a-c j-c " @click="submit">
|
|
|
+ 提交审核
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 省市区 -->
|
|
|
+ <u-select v-model="queryTreeShow" mode="mutil-column-auto" label-name="areaCname" value-name="areaCode"
|
|
|
+ child-name="child" :list="queryTreeList" @confirm="queryTreeConfirm"></u-select>
|
|
|
+ <!-- 广告位 -->
|
|
|
+ <u-select v-model="adSlotShow" mode="single-column" label-name="positionName" value-name="id" :list="adSlotList"
|
|
|
+ @confirm="adSlotConfirm"></u-select>
|
|
|
+ <!-- 投放日期 -->
|
|
|
+ <u-calendar v-model="startDateShow" mode="date" @change="startDateChange" max-date="2050-12-31"></u-calendar>
|
|
|
+ <u-calendar v-model="endDateShow" mode="date" @change="endDateChange" max-date="2050-12-31"></u-calendar>
|
|
|
+ <!-- 投放时间 -->
|
|
|
+ <u-picker v-model="timeSegmentStartShow" mode="time" :params="params"
|
|
|
+ @confirm="timeSegmentStartConfirm"></u-picker>
|
|
|
+ <u-picker v-model="timeSegmentEndShow" mode="time" :params="params" @confirm="timeSegmentEndConfirm"></u-picker>
|
|
|
+ <!-- 自定义加载动画 -->
|
|
|
+ <u-mask :show="lodingShow" style="background-color: rgba(255, 255, 255, 0.6);">
|
|
|
+ <view class="dis a-c j-c " style="height: 100%;">
|
|
|
+ <u-loading mode="circle"></u-loading>
|
|
|
+ </view>
|
|
|
+ </u-mask>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ ACCESS_TOKEN,
|
|
|
+ USER_INFO
|
|
|
+ } from '@/common/util/constants.js'
|
|
|
+ import configService from '@/common/service/config.service'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ adSlotPriceList: [], //价格列表
|
|
|
+ adPricingModelList: [], //计费模式列表
|
|
|
+ queryTreeList: [], //省市区optinos
|
|
|
+ adSlotList: [], //广告位options
|
|
|
+ queryTreeValue: "", //省市区回显
|
|
|
+ lodingShow: false, //loding组件
|
|
|
+ startDateShow: false, //开始日期选择
|
|
|
+ endDateShow: false, //结束日期选择
|
|
|
+ queryTreeShow: false, //省市区选择
|
|
|
+ adSlotShow: false, //广告位选择
|
|
|
+ timeSegmentStartShow: false, //开始时间
|
|
|
+ timeSegmentEndShow: false, //结果时间
|
|
|
+ params: {
|
|
|
+ year: false,
|
|
|
+ month: false,
|
|
|
+ day: false,
|
|
|
+ hour: true,
|
|
|
+ minute: true,
|
|
|
+ second: true
|
|
|
+ },
|
|
|
+ value: 'orange',
|
|
|
+ value1: "",
|
|
|
+ adForm: {
|
|
|
+ id: "",
|
|
|
+ name: '', //投放计划名称
|
|
|
+ positionId: null, //广告位id
|
|
|
+ positionName: "", //广告位name
|
|
|
+ startDate: "", //投放开始时间
|
|
|
+ endDate: "", //投放结束时间
|
|
|
+ province: "", //省
|
|
|
+ provinceCode: "",
|
|
|
+ city: "", //市
|
|
|
+ cityCode: "",
|
|
|
+ district: "", //区
|
|
|
+ districtCode: "",
|
|
|
+ street: "", //街道
|
|
|
+ streetCode: "",
|
|
|
+ validPeriodType: "", //生效周期
|
|
|
+ validPeriodValue: "", //周期策略
|
|
|
+ validTimeRangeType: "", //生效时段类型
|
|
|
+ validTimeRangeValue: "", //生效时段值
|
|
|
+ relId: "", //计费方式
|
|
|
+ userDailyDisplayLimit: "", //每人每天展示次数
|
|
|
+ userTotalDisplayLimit: "", //每人总次数
|
|
|
+ showInterval: "", //展示时间间隔
|
|
|
+ taskImage: "", //文件路径
|
|
|
+ imageType: "1", //文件类型
|
|
|
+ type: "", //广告类型
|
|
|
+ adBudget: "", //广告预算
|
|
|
+ merchantId: "", //商户id
|
|
|
+ merchantName: "", //商户name
|
|
|
+ },
|
|
|
+ timeSegmentStart: "", //生效时段开始
|
|
|
+ timeSegmentEnd: "", //生效时段结束
|
|
|
+ userDailyImpCount: "1",
|
|
|
+ userImpCount: "1",
|
|
|
+ displayTimeInterval: "1",
|
|
|
+ adrules: {
|
|
|
+ name: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入名称',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }],
|
|
|
+ positionName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择广告位',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }],
|
|
|
+ district: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择投放区域',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }],
|
|
|
+ startDate: [{
|
|
|
+ required: true,
|
|
|
+ message: '时间必选',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }],
|
|
|
+ endDate: [{
|
|
|
+ required: true,
|
|
|
+ message: '时间必选',
|
|
|
+ trigger: ['change', 'blur'],
|
|
|
+ }],
|
|
|
+ validPeriodType: [{
|
|
|
+ required: true,
|
|
|
+ message: '生效周期必选',
|
|
|
+ trigger: ['blur'],
|
|
|
+ }],
|
|
|
+ validTimeRangeType: [{
|
|
|
+ required: true,
|
|
|
+ message: '生效时段必传',
|
|
|
+ trigger: ['blur'],
|
|
|
+ }],
|
|
|
+ adBudget: [{
|
|
|
+ required: true,
|
|
|
+ message: '广告预算必填',
|
|
|
+ trigger: ['blur'],
|
|
|
+ }],
|
|
|
+ taskImage: [{
|
|
|
+ required: true,
|
|
|
+ message: '投放内容必传',
|
|
|
+ trigger: ['change'],
|
|
|
+ }],
|
|
|
+ validPeriodValue: [{
|
|
|
+ required: true,
|
|
|
+ message: '生效周期至少选择一天',
|
|
|
+ trigger: ['change'],
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ weekList: [], //周
|
|
|
+ monthList: [], //月
|
|
|
+ selectedDays: [], //周期策略选中日期
|
|
|
+ timeSegment: "", //生效时段
|
|
|
+ validTimeRangeTypeList: [{
|
|
|
+ label: "全天",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "指定时间段",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ //生效周期
|
|
|
+ validPeriodTypeList: [{
|
|
|
+ label: "每天",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "每周",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "每月",
|
|
|
+ value: "2",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tabList: [],
|
|
|
+ fileUploadActiveTab: 0,
|
|
|
+ //文件回显列表
|
|
|
+ imgFileList: [], //图片数组
|
|
|
+ action: configService.apiUrl + '/sys/common/upload', //图片上传地址
|
|
|
+ token: "",
|
|
|
+ userInfo: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ async onLoad(options) {
|
|
|
+ if (options.type) {
|
|
|
+ this.adForm.type = options.adType;
|
|
|
+ }
|
|
|
+ if (options.id) {
|
|
|
+ this.$http.get('advert/localAdvertTask/queryById?id=' + options.id).then(res => {
|
|
|
+ if (res.data.code == '200') {
|
|
|
+ delete res.data.result.adPositionPriceRel
|
|
|
+ delete res.data.result.createBy;
|
|
|
+ delete res.data.result.createTime;
|
|
|
+ delete res.data.result.isDelete;
|
|
|
+ delete res.data.result.updateBy;
|
|
|
+ delete res.data.result.updateTime;
|
|
|
+ this.adForm = res.data.result
|
|
|
+ this.queryTreeValue =
|
|
|
+ `${this.adForm.province}-${this.adForm.city}-${this.adForm.district}-${this.adForm.street}`;
|
|
|
+ this.getadBillingModel();
|
|
|
+ this.selectedDays = this.adForm.validPeriodValue.split(',')
|
|
|
+ let list = this.adForm.validTimeRangeValue.split(',');
|
|
|
+ this.timeSegmentStart = list[0];
|
|
|
+ this.timeSegmentEnd = list[1];
|
|
|
+ let imglist = this.adForm.taskImage.split(",")
|
|
|
+ this.imgFileList = imglist.map(val => {
|
|
|
+ return {
|
|
|
+ url: val
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.adForm.userDailyDisplayLimit) {
|
|
|
+ this.userDailyImpCount = '2';
|
|
|
+ }
|
|
|
+ if (this.adForm.userTotalDisplayLimit) {
|
|
|
+ this.userImpCount = '2';
|
|
|
+ }
|
|
|
+ if (this.adForm.showInterval) {
|
|
|
+ this.displayTimeInterval = '2';
|
|
|
+ }
|
|
|
+ this.adForm.validTimeRangeType = this.adForm.validTimeRangeType + '';
|
|
|
+ this.adForm.validPeriodType = this.adForm.validPeriodType + '';
|
|
|
+ this.adForm.adBudget = this.adForm.adBudget + '';
|
|
|
+ console.log(this.adForm);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.token = uni.getStorageSync(ACCESS_TOKEN);
|
|
|
+ this.userInfo = uni.getStorageSync(USER_INFO);
|
|
|
+ this.adForm.merchantId = this.userInfo.merchantId;
|
|
|
+ this.adForm.merchantName = this.userInfo.merchantName;
|
|
|
+ await this.queryTree(); //获取省市区数据
|
|
|
+ await this.queryAdSlot(); // 获取广告位数据
|
|
|
+ this.generateWeek();
|
|
|
+ this.generatemonth();
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.adrules);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //区分月和周
|
|
|
+ cycleStrategylist() {
|
|
|
+ return this.adForm.validPeriodType == '1' ? this.weekList : this.monthList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ if (this.adForm.validTimeRangeType == '1' && this.timeSegmentStart && this.timeSegmentEnd) {
|
|
|
+ this.adForm.validTimeRangeValue = this.timeSegmentStart + "," + this.timeSegmentEnd;
|
|
|
+ }
|
|
|
+ console.log(this.adForm);
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (!this.adForm.taskImage) {
|
|
|
+ return uni.showToast({
|
|
|
+ title: "素材不能为空",
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (!this.timeSegmentStart && this.timeSegmentEnd) {
|
|
|
+ return uni.showToast({
|
|
|
+ title: "生效时间段补充完整",
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (this.adForm.id) {
|
|
|
+ this.$http.post('advert/localAdvertTask/merchantEdit', this.adForm).then(res => {
|
|
|
+ if (res.data.code == '200') {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.message,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$http.post('advert/localAdvertTask/merchantAdd', this.adForm).then(res => {
|
|
|
+ if (res.data.code == '200') {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.message,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ videoDel() {
|
|
|
+ this.adForm.taskImage = "";
|
|
|
+ },
|
|
|
+ //视频上传
|
|
|
+ async uploadVideo(type, imageIdList, imgurl) {
|
|
|
+ let [chooseImageErr, chooseImageRes] = await uni.chooseVideo({
|
|
|
+ sourceType: ['album']
|
|
|
+ });
|
|
|
+ if (chooseImageRes) {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: configService.apiUrl + '/sys/common/upload',
|
|
|
+ name: "file",
|
|
|
+ file: chooseImageRes.tempFile,
|
|
|
+ header: {
|
|
|
+ Authorization: this.token,
|
|
|
+ },
|
|
|
+ success: async (Res) => {
|
|
|
+ let data = JSON.parse(Res.data);
|
|
|
+ this.adForm.taskImage = configService.apiUrl + '/' + data.message;
|
|
|
+ console.log(this.adForm.taskImage);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ triggerUpload() {
|
|
|
+ this.$refs.Upload.selectFile(); // ref调用文件选择*****************************
|
|
|
+ },
|
|
|
+ //图片上传事件
|
|
|
+ detailsSuccess(res, index, lists) {
|
|
|
+ const fileList = lists.map((file) => {
|
|
|
+ if (file.response) {
|
|
|
+ // 拼接地址前缀
|
|
|
+ file.url = configService.apiUrl + '/' + file.response.message;
|
|
|
+ }
|
|
|
+ return file.url;
|
|
|
+ });
|
|
|
+ this.adForm.taskImage = fileList.join(",") //图片地址逗号拼接
|
|
|
+ this.imgFileList = lists;
|
|
|
+ },
|
|
|
+ //图片多选上传
|
|
|
+ onListChange(lists) {
|
|
|
+
|
|
|
+ },
|
|
|
+ handleTab(index, item) {
|
|
|
+ this.fileUploadActiveTab = index
|
|
|
+ this.adForm.imageType = item.value;
|
|
|
+ this.adForm.taskImage = "";
|
|
|
+ this.imgFileList = [];
|
|
|
+ },
|
|
|
+ getadBillingModel() {
|
|
|
+ this.$http.get('/adPricingPrice/queryPageList', {
|
|
|
+ params: {
|
|
|
+ adPositionId: this.adForm.positionId,
|
|
|
+ city: this.adForm.cityCode,
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ }
|
|
|
+ }).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)
|
|
|
+ this.adPricingModelList = result;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: "该区域暂无计费模式相关配置"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryAdSlot() {
|
|
|
+ this.$http.get('/adPosition/queryPageList').then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.adSlotList = res.data.result.records
|
|
|
+ console.log(res.data.result);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryTree() {
|
|
|
+ this.lodingShow = true;
|
|
|
+ this.$http.post('/sys/area/queryTree').then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ console.log(res);
|
|
|
+ this.queryTreeList = res.data.result
|
|
|
+ this.lodingShow = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //省市区选择事件
|
|
|
+ queryTreeConfirm(value) {
|
|
|
+ this.queryTreeValue = `${value[0].label}-${value[1].label}-${value[2].label}-${value[3].label}`
|
|
|
+ this.adForm.provinceCode = value[0].value;
|
|
|
+ this.adForm.cityCode = value[1].value;
|
|
|
+ this.adForm.districtCode = value[2].value;
|
|
|
+ this.adForm.streetCode = value[3].value;
|
|
|
+ this.adForm.province = value[0].label;
|
|
|
+ this.adForm.city = value[1].label;
|
|
|
+ this.adForm.district = value[2].label;
|
|
|
+ this.adForm.street = value[3].label;
|
|
|
+ this.getadBillingModel() //获取计费方式
|
|
|
+ },
|
|
|
+ //广告位选择后续操作
|
|
|
+ adSlotConfirm(value) {
|
|
|
+ let info = this.adSlotList.find(val => val.id == value[0].value).supportMaterial.split(','); //获取投放内容类型
|
|
|
+ if (info.length > 1) {
|
|
|
+ this.tabList = info.map(val => {
|
|
|
+ return {
|
|
|
+ label: val == 1 ? '图片' : '视频',
|
|
|
+ value: val
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.tabList = [];
|
|
|
+ }
|
|
|
+ this.adForm.imageType = info[0];
|
|
|
+ this.adForm.positionId = value[0].value;
|
|
|
+ this.adForm.positionName = value[0].label;
|
|
|
+ },
|
|
|
+ //日期选择
|
|
|
+ startDateChange(e) {
|
|
|
+ this.adForm.startDate = e.result + " 00:00:00"
|
|
|
+ },
|
|
|
+ endDateChange(e) {
|
|
|
+ this.adForm.endDate = e.result + " 23:59:59"
|
|
|
+ },
|
|
|
+ // 时间选择
|
|
|
+ timeSegmentStartConfirm(value) {
|
|
|
+ this.timeSegmentStart = `${value.hour}:${value.minute}:${value.second}`
|
|
|
+ },
|
|
|
+ timeSegmentEndConfirm(value) {
|
|
|
+ this.timeSegmentEnd = `${value.hour}:${value.minute}:${value.second}`
|
|
|
+ },
|
|
|
+ userDailyImpCountChange(value) {
|
|
|
+ if (value == 1) {
|
|
|
+ this.adForm.userDailyDisplayLimit = ' ';
|
|
|
+ } else {
|
|
|
+ this.adForm.userDailyDisplayLimit = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ userImpCountChange(value) {
|
|
|
+ if (value == 1) {
|
|
|
+ this.adForm.userTotalDisplayLimit = ' ';
|
|
|
+ } else {
|
|
|
+ this.adForm.userTotalDisplayLimit = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ displayTimeIntervalChange(value) {
|
|
|
+ if (value == 1) {
|
|
|
+ this.adForm.showInterval = ' ';
|
|
|
+ } else {
|
|
|
+ this.adForm.showInterval = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //周列表
|
|
|
+ generateWeek() {
|
|
|
+ const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((val, index) => {
|
|
|
+ return {
|
|
|
+ label: val,
|
|
|
+ value: (index + 1).toString()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.weekList = weekList;
|
|
|
+ },
|
|
|
+ // 月列表
|
|
|
+ generatemonth() {
|
|
|
+ const monthList = Array.from({
|
|
|
+ length: 31
|
|
|
+ }, (_, index) => {
|
|
|
+ const value = (index + 1).toString();
|
|
|
+ return {
|
|
|
+ label: value,
|
|
|
+ value
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.monthList = monthList;
|
|
|
+ },
|
|
|
+ // 周期策略选择
|
|
|
+ toggleDaySelection(dayValue) {
|
|
|
+ const index = this.selectedDays.indexOf(dayValue);
|
|
|
+ if (index > -1) {
|
|
|
+ // 如果找到,移除该元素
|
|
|
+ this.selectedDays.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ // 如果未找到,添加该元素
|
|
|
+ this.selectedDays.push(dayValue);
|
|
|
+ }
|
|
|
+ this.adForm.validPeriodValue = this.selectedDays.join(',')
|
|
|
+ },
|
|
|
+ //生效周期选择
|
|
|
+ validPeriodTypeSelect(item) {
|
|
|
+ this.adForm.validPeriodType = item.value
|
|
|
+ this.selectedDays = [];
|
|
|
+
|
|
|
+ },
|
|
|
+ timeSegmentSelect(item) {
|
|
|
+ this.adForm.validTimeRangeType = item.value
|
|
|
+ if (item.value == 0) {
|
|
|
+ this.adForm.validTimeRangeValue = "00:00:00,23:59:59"
|
|
|
+ } else {
|
|
|
+ this.adForm.validTimeRangeValue = "";
|
|
|
+ this.timeSegmentStart = "";
|
|
|
+ this.timeSegmentEnd = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page {
|
|
|
+ background-color: #F7F8FC;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module {
|
|
|
+ width: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 30rpx 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .module-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-view {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ padding: 10rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-view-active {
|
|
|
+ background: #E0EDFF;
|
|
|
+ color: #006DFF;
|
|
|
+ border: 1rpx solid #E0EDFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ //计费模式
|
|
|
+ .BillingModelView {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliveryFrequency {
|
|
|
+ padding: 32rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ width: 250rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliveryFrequency:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .u-radio__label {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片上传预览视图层级提升
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-system-preview-image {
|
|
|
+ background: #4B9DFF !important;
|
|
|
+ z-index: 9999 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-view {
|
|
|
+ z-index: 99;
|
|
|
+ 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: 100%;
|
|
|
+ padding: 26rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #4B9DFF;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fileUpload {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 0px 10rpx 10rpx 10rpx;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ flex: 1;
|
|
|
+ height: 70rpx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ position: relative;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #F6F8FC;
|
|
|
+ color: #006DFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ &.left.active {
|
|
|
+ border-top-right-radius: 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -50px;
|
|
|
+ height: 100%;
|
|
|
+ width: 50px;
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #F6F8FC;
|
|
|
+ clip-path: path("M0 0 C13.5 0 13.5 25 25 45 L0 50 Z");
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 右侧标签的曲线
|
|
|
+ &.right.active {
|
|
|
+ border-top-left-radius: 0;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -49px;
|
|
|
+ height: 100%;
|
|
|
+ width: 50px;
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #F6F8FC;
|
|
|
+ clip-path: path("M50 0 C37.5 0 37.5 25 25 45 L50 50 Z");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab1 {
|
|
|
+ flex: 1;
|
|
|
+ height: 70rpx;
|
|
|
+ position: relative;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ background-color: #EBF2FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文件区域样式
|
|
|
+
|
|
|
+ .tabtitle {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1; // 父级降低层级
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fileUploadView {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #F6F8FC;
|
|
|
+ border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
|
+ min-height: 330rpx;
|
|
|
+
|
|
|
+ .default {
|
|
|
+ min-height: 330rpx;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 83rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 15rpx 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|