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