uniap中radio取值

 <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> 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值