106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<!-- 数据循环 timeId 时间戳加随机数唯一值 -->
|
|
<block v-for="(v, i) in adList" :key="v.timeId">
|
|
<view class="ad-item">
|
|
<view class="ad-img-wrapper">
|
|
<view class="title">广告图片</view>
|
|
<view style="flex:1">
|
|
<JeepayUploadImg v-model:src="v.imgUrl" bizType="notice" />
|
|
</view>
|
|
</view>
|
|
<view class="ad-sort" :class="{ 'border-none': adList.length - 1 == i }">
|
|
<view class="title">广告排序</view>
|
|
<input type="number" v-model="v.sort" placeholder="请输入广告排序"
|
|
placeholder-style="color: #b3b3b3ff; font-size: 32rpx;" maxlength="5" />
|
|
<view class="del-but" hover-class="jeepay-hover-button" @tap="delAdData(v.timeId)">删除该条</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 添加数据 -->
|
|
<view class="add-img-but" hover-class="jeepay-hover-button" @tap="addAdData">
|
|
<image class="add-icon-img" src="/pageDevice/static/icon/ad-add.svg"></image>
|
|
添加广告图片 </view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
const props = defineProps({
|
|
adList: { type: Array, default: () => ([]) }
|
|
});
|
|
// 添加数据方法
|
|
const addAdData = () => {
|
|
props.adList.push({ timeId: new Date().getTime() + Math.random() })
|
|
}
|
|
// 删除数据方法
|
|
const delAdData = (key) => {
|
|
if(props.adList.length<=1) return infoBox.showToast('最后一条数据不可删除。')
|
|
const index = props.adList.findIndex(v => v.timeId == key)
|
|
props.adList.splice(index, 1)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
margin-right: 70rpx;
|
|
color: #4d4d4dff;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ad-item {
|
|
padding: 40rpx 0 0 40rpx;
|
|
}
|
|
|
|
.ad-img-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ad-sort {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 40rpx;
|
|
height: 120rpx;
|
|
border-bottom: 1rpx solid #edededff;
|
|
}
|
|
|
|
.del-but {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 40rpx;
|
|
width: 148rpx;
|
|
height: 70rpx;
|
|
color: #ff0000ff;
|
|
font-size: 27rpx;
|
|
border-radius: 10rpx;
|
|
background: #ff00000f;
|
|
}
|
|
|
|
.add-img-but {
|
|
margin: 40rpx;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
color: #2d2d2dff;
|
|
font-size: 32rpx;
|
|
border: 2rpx dashed #0000001a;
|
|
background: #00000005;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.border-none {
|
|
border: none !important;
|
|
}
|
|
.jeepay-hover-button{
|
|
opacity: 0.5;
|
|
background-color: rgba($color: #000000, $alpha: 0.09);
|
|
}
|
|
.add-icon-img{
|
|
margin-right: 20rpx;
|
|
width: 25rpx;
|
|
}
|
|
</style> |