first

pageDevice/adManager/components/AdItems.vue

@@ -0,0 +1,106 @@
+<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>