素材
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user