<template>
<view>
<view class="navigation">
<view class="header">
<view>
发起视屏
</view>
</view>
<view class="content">
<view class="content-box">
<input class="content-t" type="text" value="" placeholder="请输入店铺名称" />
<view class="content-y">
<text class="content-n" @click="sure()">发起群视频通话</text>
</view>
</view>
<view class="content-xia" v-for="(item,index) in jobs" :key="index">
<view class="content-xia-n">
<image class="content-xia-t" :src="item.tupian"></image>
</view>
<view class="content-xia-nai">
<text class="wenzi">{{item.name}}</text></br>
<text class="wenzi1">单位:</text>
<text class="wenzi2">{{item.danwei}}</text>
</view>
<view class="list-head" @click="choice(index)">
<view :class="[item.selected?'selde':'noselde']"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
selectId:[],
jobs: [{
id: 1,
name: '程序员',
danwei:'123456789',
tupian:'../../static/communicate/tupian1.png',
selected: false
},
{
id: 2,
name: '程序员',
danwei:'123456789',
tupian:'../../static/communicate/tupian1.png',
selected: false
},
{
id: 2,
name: '程序员',
danwei:'123456789',
tupian:'../../static/communicate/tupian1.png',
selected: false
},
{
id: 4,
name: '程序员',
danwei:'123456789',
tupian:'../../static/communicate/tupian1.png',
selected: false
}
],
}
},
methods:{
choice(index){
if(this.jobs[index].selected == true){
this.jobs[index].selected = false;
//取消选中时删除数组中的值
for(var i = 0; i < this.selectId.length; i++){
if(this.selectId[i] === this.jobs[index].id){
this.selectId.splice(i,1);
}
}
console.log("选中的值",this.selectId)
}else{
this.jobs[index].selected = true;
this.selectId.push(this.jobs[index].id)
console.log("选中的值",this.selectId)
}
},
sure(){
//提交选中的值
if(this.selectId.length==0){
return false;
}
var listIds = this.selectId.join(",")
uni.navigateTo({
url:"../../pages/communicate/ship?listIds" + encodeURIComponent(JSON.stringify(this.listIds))
})
}
}
}
</script>
<style lang="scss" scoped>
.navigation {
width: 100%;
min-height: 1112upx;
position: relative;
}
.content {
width: 100%;
position: absolute;
top: 128upx;
min-height: 1112upx;
.content-box {
padding-top: 20upx;
display: flex;
width: 670upx;
// padding-bottom: 160upx;
margin-left: 20upx;
float: left;
.content-t {
width: 400upx;
height: 52upx;
font-size: 28upx;
color: #999999;
font-weight: bold;
background: #FFFFFF;
border-radius: 8upx;
text-indent: 20upx;
background-image: url(../../static/images/search.png);
background-repeat: no-repeat;
background-position: right 20upx top 10upx;
background-size: 34upx;
}
.content-y {
border-radius: 5%;
padding-top: 20upx;
margin-left: 20upx;
color: #FFFFFF;
font-size: 28upx;
text-align: center;
width: 300upx;
height: 53upx;
background-color: #3294FF;
}
}
}
.header {
position: fixed;
top: 0;
width: 100%;
height: 128upx;
background: linear-gradient(to left, #3294FF, #3294FF);
display: flex;
justify-content: center;
z-index: 999;
view {
margin-top: 68upx;
color: #FEFEFE;
font-size: 34upx;
}
}
.content-xia {
padding-top: 10upx;
display: flex;
justify-content: space-between;
width: 100%;
// height: 100%;
.content-xia-t {
width: 210upx;
height: 210upx;
}
.content-xia-nai {
font-size: 28upx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 50upx;
padding-top: 20upx;
width: 338upx;
.wenzi2 {
padding-top: 50upx;
margin-left: 12upx;
}
}
//
.selde{
margin: 0 auto;
margin-top: 40upx;
width: 50upx;
height: 50upx;
border: 1px solid #000000;
background: #09BB07;
border-radius: 50%;
}
//
.noselde{
margin: 0 auto;
margin-top: 40upx;
width: 50upx;
height: 50upx;
border: 1px solid #000000;
background: #FFFFFF;
border-radius: 50%;
}
}
</style>