<div class="container" style="text-align: left;margin-top: 20px;margin-left: 10%" >
<!--双向绑定数据checkedData 加入多选框的样式
绑定的是checkData的数据 本次位置是一个数组 当其中选择的数值发生变化的时候 会触发对应的方法 -->
<el-checkbox-group v-model="checkedData" @change="handleCheckedDataChange">
<!--循环遍历得到每一个数据 传入data的每一个数据-->
<el-checkbox v-for="acc in data" :label="acc" :key="acc.id" style="margin-left: 5px;margin-top: 20px">
<!-- <el-checkbox v-for="acc in data" :label="acc" :key="acc.id">-->
<el-card
shadow="hover"
class="card-container"
style="display: flex;justify-content: center"
>
<!-- <div class="avatar-img">
<!– <span><img :src="acc.pAvatar" alt="image" class="media-img" /></span>–>
<!– <el-avatar :src="acc.dAvatar" alt="image" />–>
</div>-->
<div style="display: flex;justify-content: left;align-items: center">
<div style="display: flex;flex-direction: column;font-size: 12px;justify-content: center">
<div style="display: flex;justify-content: left">
<div style="margin-top: 10px;margin-right: 20px"> <h1 style="font-size: 12px;">
{{ acc.name }}
</h1>
<p style="font-size: 12px;margin-top: 2px;">
{{ acc.departmentName }}
</p>
</div>
<div style="display: flex;flex-direction: column;justify-content: left;text-align: center">
<div style="font-size: 12px;background-color: #ccc;">{{ acc.platform }}</div>
<p style="font-size: 12px;">刊例价:¥{{ acc.price }}</p>
<p style="font-size: 12px">平均播放量:{{ acc.avg_view==null?0:acc.avg_view }} </p>
<p style="font-size: 12px">粉丝数:{{ acc.num_fan==null?0:acc.num_fan }}</p>
</div>
</div>
</div> <!-- <div style="margin-left: 40px;">
<input type="checkbox" name="running" :checked="checked" style="width: 20px;height: 20px">
</div>-->
</div>
<!-- </div>-->
<!--<div class="gy-right">
<div class="account-name"> <span>{{ acc.platform }}</span>
</div>-->
<!--<div class="account-info">
<p class="p-slide">刊例价:¥{{ acc.price }}</p>
<p class="p-slide">平均播放量:{{ acc.avg_view }} </p>
<p class="p-slide">粉丝数:{{ acc.num_fan }}</p>
</div>-->
</el-card>
</el-checkbox>
</el-checkbox-group>
</div></template>
<script>
import {
getAction
} from "@/api"; export default {
name: "SelectAccount",
// props: {
// value: {
// type: String | Number,
// required: true
// },
// },
model: {
prop: "value",
event: "change"
},
props: ['checkedData'],
data() {
return {
selectStatus: [],
data: null,
/*双向绑定数据 双向数据绑定*/
checkedData:[],
checked:true
};
},
mounted() {
this.list();
},
methods: {
/*向父组件传值*/
// onSelect(data) {
// this.$emit("seletct", data);
// },
/*test(){
this.checked=!this.checked
},*/
list() {
getAction('/account/list').then(res => {
/*定义一个list数组*/
var list = [];
/*定义一个字符串对象*/
var data = '';
for (var i = 0; i < res.data.length; i++) {
/*创建数组
{
"id": "1",
"name": "Hi苏州",
"num_fan": null,
"avg_view": null,
"platform": "今日头条",
"department_id": "1",
"column": null,
"price": "111.00",
"department_name": "ddd1"
},*/
data = {
/*任务id*/
id: res.data[i].id,
/*账号名称*/
name: res.data[i].name,
/*粉丝数*/
num_fan: res.data[i].num_fan,
/*平均播放量*/
avg_view: res.data[i].avg_view,
/*账号类型*/
platform: res.data[i].platform,
/*部门id*/
department_id: res.data[i].department_id,
column:res.data[i].column,
/*刊价比*/
price: res.data[i].price,
/*部门名称*/
departmentName: res.data[i].department_name,
/*暂时写死的两个字段 后续可注释*/
pAvatar: "./logo.png",
dAvatar: "./logo.png"
}
list.push(data);
}
/*赋值给data*/
this.data = list;
})
},
/*父子组件传值 通过select的属性进行传值*/
handleCheckedDataChange(val){
console.log(111)
/*触发父亲组件的方法 冰进行传值*/
this.checked=!this.checked
console.log(this.checked)
this.$emit("seletct", val);
}
}
};
</script><style lang="scss" scoped>
*{
margin: 0;
padding: 0;
}
.card-container{
width: 300px;
height: 100px;
padding: 0px;
}
.card-container:hover{
border: 2px solid mediumturquoise;
}
.card-container:active{
border: 2px solid red;
} h1{
font-size: 14px;
text-align: center;}
p{
font-size: 14px;
text-align: center;}
.p-slide{
font-size: 14px;
margin-top: 15px;
}
</style>