product_wx/pages/subPackages/reportRepair/index.vue

<template>
  <div class="reportRepair">
    <div class="reportBody">
      <div class="record">
         报事记录 <img src="./image/rightIcon.png" class="recordImg">
      </div>
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName">当前企业</span>
          <span class="liInfo">无锡XXXXX有限公司</span>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red;margin-right: 10rpx;">*</span>
            您是想
          </span>
          <span class="liInfo">
              <label class="radio"  @click.stop="isCheck=true" >
                  <radio value="报事" :checked="isCheck" color="#0365F9"/>报事
              </label>
              <label class="radio" @click.stop="isCheck=false" >
                  <radio value="咨询" :checked="!isCheck" color="#0365F9"/>咨询
               </label>
          </span>
        </li>
        <li class="detailLi2">
          <span class="liName">
            快捷选择
          </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div class="checkItem" :class="item.isCheck?'checked':''" v-for="item in checkList" @click="clickCheck(item)">{{item.name}}</div>
            </div>
            <van-field
                :value="form.contant"
                autosize
                type="textarea"
                placeholder="请输入文字进行报事报修描述"
                class="myField"
                maxlength="800"
                show-word-limit
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isCheck:false,
      form:{
        contant:''
      },
      checkList:[
        {name:'挂件安装',isCheck:true},
        {name:'我要投诉',isCheck:false},
        {name:'疏通管道',isCheck:false},
        {name:'维修线路',isCheck:false},
        {name:'更换灯泡',isCheck:false},
        {name:'网络维修',isCheck:false},
        {name:'保洁服务',isCheck:false},
        {name:'其他维修',isCheck:false},
      ]
    }
  },
  methods:{
    clickCheck(item){
      item.isCheck = !item.isCheck
    }
  }
}
</script>
<style lang="scss">
    .reportRepair{
      .reportBody{
        margin-top: 24rpx;
        padding: 38rpx 36rpx;
        background: white;
        height: 1416rpx;
        box-sizing: border-box;
        .record {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #0365F9;
          font-size: 32rpx;
          .recordImg{
            width: 36rpx;
            height: 36rpx;
            padding: 5rpx 0 0 10rpx;
          }
        }
        .detailUl{
          margin-top: 20rpx;
          .liName{
            font-size: 32rpx;
            color: rgba(51, 51, 51, 1);
            white-space: nowrap;
          }
          .detailLi{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #E6E6E6;
            .liInfo{
              display: inline-block;
              text-align: right;
              max-width: 428rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
              .radio{
                margin-left: 64rpx;
              }
            }
          }
          .detailLi2{
            display: flex;
            flex-direction: column;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #E6E6E6;
            .detailLi2BoxTop{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin: 12rpx 0;
              .checkItem{
                width: 160rpx;
                height: 64rpx;
                font-size: 28rpx;
                color: #666666;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F5F7FA;
                border-radius: 8rpx;
                margin: 12rpx 0;
              }
              .checked{
                background: #0365F9;
                color: white;
              }
            }
          }
        }
      }
      .van-cell {
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
    }
</style>