144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<JeepayCustomNavbar textColor="#000" bgDefaultColor="#fff" :title="vdata.advertId ? '广告编辑' : '广告创建'"
|
|
backCtrl="back" />
|
|
<view class="ad-title-wrapper">
|
|
<view class="ad-title">广告标题</view>
|
|
<input type="text" v-model="vdata.title" placeholder="请输入广告标题"
|
|
placeholder-style="color: #b3b3b3ff; font-size: 32rpx;font-weight: 400;" maxlength="12">
|
|
</view>
|
|
<JSwitchCard borderWidth="0" title="是否发布" :tipsWidth='410' tips="发布后，刷脸设备上仅展示当前广告中包含的图片" v-if='!vdata.advertId'>
|
|
<template #right>
|
|
<JeepayStateSwitch v-model:state="vdata.releaseState" :showSwitchType="true" :confirm="false" />
|
|
</template>
|
|
</JSwitchCard>
|
|
<view class="ad-content">
|
|
<AdItems :adList="vdata.adList" />
|
|
</view>
|
|
<!-- 保存编辑 -->
|
|
<view class="footer-wrapper">
|
|
<view class="footer-button footer-button-style">
|
|
<button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="addOrEdit">{{ vdata.advertId ?
|
|
'保存编辑' : '确认创建' }}</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager.js"
|
|
import go from '@/commons/utils/go.js'
|
|
import emit from '@/commons/utils/emit.js'
|
|
import AdItems from "./components/AdItems.vue"
|
|
onLoad((options) => {
|
|
if (options.id) {
|
|
vdata.advertId = options.id
|
|
getDetails()
|
|
}
|
|
})
|
|
const vdata = reactive({
|
|
advertType: 1,
|
|
releaseState: 1,
|
|
adList: [{ timeId: new Date().getTime() + Math.random() }]
|
|
})
|
|
const addOrEdit = () => {
|
|
// 上传前格式化数据
|
|
if(!vdata.title) return infoBox.showToast('请填写广告标题')
|
|
if (formatAdData()) return
|
|
vdata.appContent = JSON.stringify(vdata.adList)
|
|
reqLoad.addOrUpdate(vdata.advertId ? vdata.advertId : false, API_URI_PAY_AD_LIST, vdata).then(res => {
|
|
go.back(1, emit.ENAME_REF_AD_DETAILS)
|
|
emit.refPageAndSearchEmit(emit.ENAME_REF_AD_LIST)
|
|
})
|
|
}
|
|
const getDetails = () => {
|
|
reqLoad.getById(API_URI_PAY_AD_LIST, vdata.advertId).then(({ bizData }) => {
|
|
bizData.adList = JSON.parse(bizData.appContent)
|
|
bizData.adList.forEach(v => {
|
|
v.timeId = new Date().getTime() + Math.random()
|
|
})
|
|
Object.assign(vdata, bizData)
|
|
})
|
|
}
|
|
const formatAdData = () => {
|
|
if (vdata.adList.findIndex(v => v.imgUrl) == '-1') return infoBox.showToast('空数据不可保存')
|
|
vdata.adList = vdata.adList.filter(v=>v.imgUrl) // 筛选有值字段
|
|
vdata.adList.forEach((v, i) => {
|
|
delete v.timeId //删除唯一值 后端不许要存储
|
|
if(!v.sort){
|
|
v.sort = i+1 //如果没有填写 排序字段 将 下标赋值给 排序字段
|
|
}
|
|
})
|
|
return false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
color: #4d4d4dff;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ad-content {
|
|
margin-top: 20rpx;
|
|
padding: 0.1rpx;
|
|
background-color: #fff;
|
|
|
|
|
|
}
|
|
|
|
.ad-title-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
height: 120rpx;
|
|
background-color: #fff;
|
|
|
|
input {
|
|
margin-left: 70rpx;
|
|
}
|
|
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.footer-wrapper {
|
|
height: 170rpx;
|
|
background-color: transparent;
|
|
|
|
.footer-button {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
padding: 30rpx;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 1rpx;
|
|
background-color: #edededff;
|
|
}
|
|
|
|
button {
|
|
height: 110rpx;
|
|
font-size: 33rpx;
|
|
font-weight: 500;
|
|
color: $J-color-tff;
|
|
border-radius: 20rpx;
|
|
background: $jeepay-bg-primary;
|
|
}
|
|
|
|
.hover-button {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
</style> |