chelvc-custom/src/pages/tabbar/store/evaluateManagement.vue

<template>
  <view class="container">
    <view class="top-box">
      <view class="top-l">
        <view class="l-l"> {{ value.toFixed(1) }} </view>
        <view class="l-r">
          <u-rate :count="count" v-model="value"></u-rate>
          <p>根据近90天评价计其所得</p>
        </view>
      </view>
      <view class="top-r">
        <span>更多</span>
        <u-icon name="arrow-right" color="#9B9B9B" size="18"></u-icon>
      </view>
    </view>

    <view class="content-box">
      <view class="top-box">
        <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" :activeStyle="{
            color: '#000',
            fontSize: '28rpx',
            transform: 'scale(1.05)',
            marginBottom: '15rpx',
          }" :inactiveStyle="{
            color: '#333',
            fontSize: '30rpx',
            transform: 'scale(1)',
            marginBottom: '15rpx',
          }"></u-tabs>
      </view>
      <view class="item-box">
        <view class="item" :class="current == index ? 'act-item' : ''" v-for="(item,index) of contentList" @click="handlerSelectItem(item,index)">{{ item.name }}{{ item.numb }}</view>
      </view>
      <view class="item-radio-box">
        <u-radio-group v-model="radiovalue1" placement="row" >
          <u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist1" :key="index"
            :label="item.name" :name="item.name" >
          </u-radio>
        </u-radio-group>
      </view>

    </view>

    <evaluateItem></evaluateItem>

  </view>
</template>

<script>
  import evaluateItem from "@/pages/tabbar/store/components/evaluateItem.vue"
  export default {
    data() {
      return {
        current:0,
        count: 5,
        value: 2,
        list1: [{
          name: '未回复的评价',
        }, {
          name: '全部评价',
        }],
        contentList: [{
            name: '全部',
            numb: 360
          },
          {
            name: '五星',
            numb: 21
          },
          {
            name: '四星',
            numb: 50
          },
          {
            name: '三星',
            numb: 88
          },
          {
            name: '二星',
            numb: 72
          },
          {
            name: '一星',
            numb: 218
          }
        ],
        radiolist1: [{
            name: '有内容的评价',
            disabled: false
          },
          {
            name: '有图片的评价',
            disabled: false
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        radiovalue1: '有内容的评价',
      }
    },
    components:{evaluateItem},
    methods: {
      // 选择星级
      handlerSelectItem(item,index){
        this.current = index
      },
      click() {

      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #F5F5F5 !important;
    min-height: calc(100vh - 20rpx);
    padding-bottom: 20rpx ;
    .top-box {
      background-color: #fff;
      padding: 20rpx 40rpx;
      display: flex;
      justify-content: space-between;

      .top-l {
        display: flex;
        align-items: center;

        .l-l {
          margin-right: 20rpx;
          font-size: 42rpx;
          color: #D32625;
          font-weight: bold;
        }

        .l-r {
          p {
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #AFAFAF;
          }
        }
      }

      .top-r {
        display: flex;
        align-items: center;
        color: #AFAFAF;
        font-size: 26rpx;
      }
    }

    .content-box {
      padding: 0 20rpx 20rpx;
      background-color: #fff;
      margin: 10rpx 0 ;

      .item-box {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        justify-content: space-between;

        .item,.act-item {
          border: 2rpx solid #E0E0E0;
          padding: 10rpx 30rpx;
          text-align: center;
          margin: 20rpx;
          font-size: 26rpx;
          color: #999999;
        }
        .act-item{
          border: 2rpx solid #87AFCC !important;
          color: #87AFCC !important;
        }
      }

      .item-radio-box {}
    }
  }
</style>