124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="search-header">
|
|
<view class="search-mian">
|
|
<image src="/static/iconImg/icon-search.svg" mode=""></image> <input type="text" disabled placeholder="搜索广告标题"
|
|
placeholder-style="color: #00000059;font-size: 27rpx;font-weight: 400;" @tap="toSearch">
|
|
</view>
|
|
</view>
|
|
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
|
|
<template #tableBody="{ record }">
|
|
<FaceCardRender :title="record.title" :advertId="record.advertId" :imgUrl="record.imgUrl"
|
|
:releaseState="record.releaseState" />
|
|
</template>
|
|
</JeepayTableList>
|
|
<view class="footer-wrapper">
|
|
<view class="footer-button footer-button-style">
|
|
<button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="createdAd">创建广告</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue"
|
|
import { reqLoad, API_URI_PAY_AD_LIST } from "@/http/apiManager"
|
|
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
|
import FaceCardRender from "/pages/list/render/FaceCardRender.vue"
|
|
import emit from '@/commons/utils/emit.js'
|
|
import go from '@/commons/utils/go.js'
|
|
uni.$on(emit.ENAME_REF_AD_LIST, (data) => {
|
|
jeepayTableListRef.value.refTable(true)
|
|
})
|
|
onUnload(() => {
|
|
uni.$off(emit.ENAME_REF_AD_LIST)
|
|
})
|
|
const jeepayTableListRef = ref(null)
|
|
const reqTableDataFunc = (params) => {
|
|
params.advertType = 1
|
|
return reqLoad.list(API_URI_PAY_AD_LIST, params)
|
|
}
|
|
const createdAd = () => {
|
|
go.to('PAGES_AD_EDIT')
|
|
}
|
|
const toSearch = () => {
|
|
go.toSearchPage('faceImgAd', 'faceImgAd')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
min-height: calc(100vh - 160rpx);
|
|
}
|
|
|
|
.search-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx;
|
|
height: 110rpx;
|
|
background-color: #fff;
|
|
|
|
image {
|
|
padding: 20rpx;
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.search-mian {
|
|
flex: 1;
|
|
display: flex;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
opacity: 1;
|
|
background: #f5f5f5ff;
|
|
|
|
input {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-wrapper {
|
|
height: 170rpx;
|
|
background-color: transparent;
|
|
|
|
|
|
.footer-button {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block {
|
|
height: 150rpx;
|
|
}
|
|
</style>
|