126 lines
3.6 KiB
Vue
126 lines
3.6 KiB
Vue
<template>
|
||
<JeepayBackground :bgColorStyle="{ height: '706rpx' }">
|
||
<JeepayCustomNavbar textColor="#fff"
|
||
bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="广告详情"
|
||
backCtrl="back" />
|
||
<JeepayTableListItem viewClass="list-item-by-detail" logo="/pageDevice/static/icon/ad-white.svg"
|
||
:title="vdata.title" :subtitle="vdata.advertId" :moreBtnList="list" />
|
||
<view class="create-time">
|
||
<view class="time-title">创建时间</view>
|
||
<view class="time-info">{{ vdata.createdAt }}</view>
|
||
</view>
|
||
<JeepayCard editText="编辑广告" @editTap="toEditAd">
|
||
<JeepayDescview>
|
||
<block v-for="(v, i) in vdata.appContent">
|
||
<JeepayDescviewItem :title="`广告图片（${i + 1}）`">
|
||
<template #desc>
|
||
<image class="ad-img" :src="v.imgUrl" mode="aspectFill">
|
||
</image>
|
||
</template>
|
||
</JeepayDescviewItem>
|
||
</block>
|
||
</JeepayDescview>
|
||
</JeepayCard>
|
||
<JeepayCard title='其他设置' viewStyle="margin-top:30rpx">
|
||
<JSwitchCard title="是否发布" :tipsWidth='410' tips="发布后，刷脸设备上仅展示当前广告中包含的图片">
|
||
<template #right>
|
||
<JeepayStateSwitch v-model:state="vdata.releaseState" :showSwitchType="true"
|
||
:updateStateFunc="updateStateFunc" />
|
||
</template>
|
||
</JSwitchCard>
|
||
</JeepayCard>
|
||
<JeepayPopupConfirm ref="refTips" />
|
||
<JSinglePopup ref="refMore" :list="list" activeColor="#FF5B4C" />
|
||
</JeepayBackground>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager.js"
|
||
import http from "@/http/http"
|
||
import emit from '@/commons/utils/emit.js'
|
||
import infoBox from '@/commons/utils/infoBox.js'
|
||
import { reactive, ref } from "vue"
|
||
import go from '@/commons/utils/go.js'
|
||
import { onLoad,onUnload } from '@dcloudio/uni-app'
|
||
onLoad((options) => {
|
||
vdata.advertId = options.id
|
||
getDetails()
|
||
})
|
||
uni.$on(emit.ENAME_REF_AD_DETAILS, (data) => {
|
||
getDetails()
|
||
})
|
||
const list = reactive([{
|
||
label: '编辑广告',
|
||
value: 'editAd',
|
||
fun: toEditAd,
|
||
},
|
||
{
|
||
label: '删除广告',
|
||
value: 'deleteAd',
|
||
color: '#FF5B4C',
|
||
fun: function () {
|
||
refTips.value.open('是否确认删除该条广告?').then(() => {
|
||
http.req(API_URI_PAY_AD_LIST, { delAdvertIds: vdata.advertId }, "DELETE").then(res => {
|
||
infoBox.showSuccessToast('删除成功').then(res => {
|
||
go.back(1,emit.ENAME_REF_AD_LIST)
|
||
})
|
||
|
||
})
|
||
}).catch(() => {
|
||
refMore.value.open()
|
||
})
|
||
}
|
||
},
|
||
])
|
||
const refTips = ref(null)
|
||
const refMore = ref(null)
|
||
const vdata = reactive({})
|
||
function toEditAd () {
|
||
go.to('PAGES_AD_EDIT', { id: vdata.advertId })
|
||
}
|
||
// 获取详情
|
||
const getDetails = () => {
|
||
reqLoad.getById(API_URI_PAY_AD_LIST, vdata.advertId).then(({ bizData }) => {
|
||
bizData.appContent = JSON.parse(bizData.appContent)
|
||
Object.assign(vdata, bizData)
|
||
})
|
||
}
|
||
// 修改发布状态
|
||
const updateStateFunc = (state) => {
|
||
reqLoad.addOrUpdate(vdata.advertId, API_URI_PAY_AD_LIST, { releaseState: state }).then(res=>{
|
||
emit.refPageAndSearchEmit( emit.ENAME_REF_AD_LIST)
|
||
})
|
||
}
|
||
onUnload(() => uni.$off(emit.ENAME_REF_AD_DETAILS))
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.create-time {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0 75rpx;
|
||
padding: 50rpx 0;
|
||
font-size: 30rpx;
|
||
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
|
||
|
||
.time-title {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.time-info {
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.ad-img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.c-desc-view-item ::v-deep .title {
|
||
justify-content: flex-start !important;
|
||
}
|
||
</style>
|