This commit is contained in:
shijingjing
2023-03-07 18:02:58 +08:00
parent da5601e784
commit dfac18eee4
2 changed files with 141 additions and 74 deletions

View File

@@ -38,7 +38,7 @@
<div class="fodder_file" v-for="(item, index) in files" :key="index">
<div class="item">
<div class="images">
<img src=" https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.name }}</div>

View File

@@ -3,27 +3,67 @@
<AiTopFixed class="search-box">
<u-search placeholder="素材名称" v-model="title" :clearabled="false" :animation="false"></u-search>
</AiTopFixed>
<div class="card-box">
<div class="card" v-for="(item,index) in list" :key="index">
<div class="left">
<div v-if="type == 0">
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.content }}</div>
<div class="card" v-for="(item,index) in list" :key="index">
<div class="left">
<!-- 话术 -->
<div v-if="type == 0">
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.content }}</div>
</div>
<!-- 图片 -->
<div class="files" v-if="type == 1">
<div class="pics ">
<img :src="item.imgPicUrl" alt="">
</div>
<div class="files-r">
<div class="title">{{ item.title }}</div>
<div class="mar-top info">{{ item.fileSizeStr }}</div>
</div>
<!-- <div class="files">
<div class="pic">
<img src="./images/files.png" alt="">
</div>
<div class="files-r">
<div class="title">百度一下你就知道</div>
<div class="mar-top info">www.baidu.com</div>
</div>
</div> -->
</div>
<div class="right" @click="item.isChecked = !item.isChecked">
<img src="./images/xz.png" v-if="item.isChecked" alt="">
<img src="./images/xzh.png" v-else alt="">
<!-- 小程序 -->
<div class="files" v-if="type == 2">
<div class="pic">
<img src="./images/files.png" alt="">
</div>
<div class="files-r">
<div class="title">{{ item.title }}</div>
<div class="mar-top info">www.baidu.com</div>
</div>
</div>
<!-- 文件 -->
<div class="files" v-if="type == 3">
<div class="pic">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="files-r">
<div class="title">{{ item.title }}</div>
<div class="mar-top info">{{ item.fileSizeStr }}</div>
</div>
</div>
<!-- 视频 -->
<div class="files" v-if="type == 4">
<div class="pic">
<img :src="item.pictureUrl" alt="">
</div>
<div class="files-r">
<div class="title">{{ item.title }}</div>
<div class="mar-top info">{{ item.fileSizeStr }}</div>
</div>
</div>
<!-- 网页 -->
<div class="files" v-if="type == 5">
<div class="pic">
<img src="./images/files.png" alt="">
</div>
<div class="files-r">
<div class="title">百度一下你就知道</div>
<!-- <div class="mar-top info">www.baidu.com</div> -->
</div>
</div>
</div>
<div class="right" @click="itemCheck(item)">
<img src="./images/xz.png" v-if="item.isChecked" alt="">
<img src="./images/xzh.png" v-else alt="">
</div>
</div>
<div class="subBtn" @click="submit">
@@ -61,17 +101,28 @@ export default {
this.list = res.data.records.map(e=> {
return {
...e,
isChecked: this.checkedList.map(i=> i.id==e.id),
isChecked: this.checkedList.find(i=> i.id==e.id),
}
})
}
})
},
itemCheck(e) {
e.isChecked = !!!e.isChecked
if (e.isChecked) {
this.checkedList.push(e)
} else {
let index = this.checkedList.findIndex(item=> item.id==e.id)
index>=0 && this.checkedList.splice(index,1)
}
uni.setStorageSync('checkedList', this.checkedList)
},
submit() {
// this.checkList = this.list.map()
if (!this.checkedList.length) {
return this.$u.toast(`请选择${this.typeArr[this.mstType]}`)
}
uni.$emit("fodder", [this.selected])
uni.$emit("fodder", [this.checkedList])
uni.setStorageSync('checkedList', this.checkedList)
uni.navigateBack()
}
@@ -99,69 +150,85 @@ export default {
.fodderList {
padding-bottom: 120px;
box-sizing: border-box;
.card-box {
.card {
background: #fff;
padding: 24px 32px;
box-sizing: border-box;
margin-top: 24px;
display: flex;
align-items: center;
width: 100%;
background: #fff;
padding: 24px 32px;
box-sizing: border-box;
margin-top: 24px;
.card {
display: flex;
align-items: center;
width: 100%;
.left {
width: calc(100% - 50px);
height: auto;
background: #f2f2f2;
border-radius: 12px;
padding: 16px;
box-sizing: border-box;
.left {
width: calc(100% - 50px);
height: auto;
background: #f2f2f2;
border-radius: 12px;
padding: 16px;
box-sizing: border-box;
.title {
font-size: 32px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title {
font-size: 32px;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.info {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
color: #999;
}
.info {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
color: #999;
}
.mar-top {
margin-top: auto;
}
.files {
display: flex;
.mar-top {
margin-top: auto;
}
.files {
display: flex;
.pic {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
}
}
.files-r {
.pic {
width: 100px;
height: 100px;
margin-right: 20px;
img {
width: 100%;
height: 100%;
}
}
.pics {
width: 140px;
height: 140px;
margin-right: 20px;
img {
width: 100%;
height: 100%;
}
}
.pic-r {
width: calc(100% - 160px);
}
.files-r {
width: calc(100% - 120px);
}
}
.right {
text-align: right;
width: 50px;
img {
width: 40px;
height: 40px;
}
}
.right {
text-align: right;
width: 50px;
img {
width: 40px;
height: 40px;
}
}
}