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="fodder_file" v-for="(item, index) in files" :key="index">
<div class="item"> <div class="item">
<div class="images"> <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>
<div class="info"> <div class="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>

View File

@@ -3,27 +3,67 @@
<AiTopFixed class="search-box"> <AiTopFixed class="search-box">
<u-search placeholder="素材名称" v-model="title" :clearabled="false" :animation="false"></u-search> <u-search placeholder="素材名称" v-model="title" :clearabled="false" :animation="false"></u-search>
</AiTopFixed> </AiTopFixed>
<div class="card-box"> <div class="card" v-for="(item,index) in list" :key="index">
<div class="card" v-for="(item,index) in list" :key="index"> <div class="left">
<div class="left"> <!-- 话术 -->
<div v-if="type == 0"> <div v-if="type == 0">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="info">{{ item.content }}</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>
<!-- <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>
<div class="right" @click="item.isChecked = !item.isChecked"> <!-- 小程序 -->
<img src="./images/xz.png" v-if="item.isChecked" alt=""> <div class="files" v-if="type == 2">
<img src="./images/xzh.png" v-else alt=""> <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>
<!-- 文件 -->
<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> </div>
<div class="subBtn" @click="submit"> <div class="subBtn" @click="submit">
@@ -61,17 +101,28 @@ export default {
this.list = res.data.records.map(e=> { this.list = res.data.records.map(e=> {
return { return {
...e, ...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() { submit() {
// this.checkList = this.list.map()
if (!this.checkedList.length) { if (!this.checkedList.length) {
return this.$u.toast(`请选择${this.typeArr[this.mstType]}`) return this.$u.toast(`请选择${this.typeArr[this.mstType]}`)
} }
uni.$emit("fodder", [this.selected]) uni.$emit("fodder", [this.checkedList])
uni.setStorageSync('checkedList', this.checkedList) uni.setStorageSync('checkedList', this.checkedList)
uni.navigateBack() uni.navigateBack()
} }
@@ -99,69 +150,85 @@ export default {
.fodderList { .fodderList {
padding-bottom: 120px; padding-bottom: 120px;
box-sizing: border-box; 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; background: #fff;
padding: 24px 32px;
box-sizing: border-box;
margin-top: 24px;
.card {
display: flex;
align-items: center;
width: 100%;
.left { .left {
width: calc(100% - 50px); width: calc(100% - 50px);
height: auto; height: auto;
background: #f2f2f2; background: #f2f2f2;
border-radius: 12px; border-radius: 12px;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
font-size: 32px; font-size: 32px;
font-weight: 600; font-weight: 600;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.info { .info {
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
color: #999; color: #999;
} }
.mar-top { .mar-top {
margin-top: auto; margin-top: auto;
} }
.files { .files {
display: flex; display: flex;
.pic { .pic {
width: 100px; width: 100px;
height: 100px; height: 100px;
img { margin-right: 20px;
width: 100%; img {
height: 100%;
}
}
.files-r {
width: 100%; 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; .right {
width: 50px; text-align: right;
img { width: 50px;
width: 40px; img {
height: 40px; width: 40px;
} height: 40px;
} }
} }
} }