<template>
  <view class="assessList">
    <view class="userinfo">
      <view class="user">
        <img :src="userpic" alt class="photo" />
        <view class="info">
          <text class="username">{{username}}</text>
          <!-- <text class="proname">{{proname}}</text> -->
          <view class="stars">
            <view v-for="item in stararr " :key="item">
               <img src="../../static/img/star.png" alt class="star" />
            </view>
           <text class="pingfen">{{pingfen}}</text>
          </view>
        </view>
      </view>
      <view class="date">{{date}}</view>
    </view>
    <view class="detail">
      <text class="assessdetail">
        {{detail}}
      </text>
      <!-- <view class="deal">全文</view> -->
    </view>
    <view class="pictures">
      <view v-for="(i,j) in pinglunpic" :key="j">
        <img :src="i.imgpaththumb	" alt class="shoppic" />
        <!-- ikjoiphbio -->
      </view>

      
    </view>
    <view class="buyinfo">
      <view>{{shop}}</view>
      <view>购买时间：{{buydate}}</view>
    </view>
    <view class="line"></view>
  </view>
</template>


<script>
export default {
  name: "assessLIst",
  data(){
   return {
      stararr:[1,2]
   }
  },
  props:{
    userpic:{
      type:String
    },
    username:{
      type:String
    },
    proname:{
      type:String
    },
    photo:{
        type:String
    },
    detail:{
        type:String
    },
    shop:{
        type:String
    },
    date:{
        type:String
    },
    stars:{
      type:Number
    },
    shoppic:{
      type:String
    },
    pingfen:{
      type:Number
    },
    buydate:{
      type:String
    },
    pinglunpic:{
      type:Array
    }
  },
  //  username: 评论的用户名  proname 商品名   photo  用户头像  detail   评论内容   date  发表评论的日期  stars 评论几个星星 shoppic  商品图片
  mounted(){
      var stararr=[];
      for(var i=0;i<this.stars;i++){
        stararr.push(i)
      }
      console.log(this.stararr)
      this.stararr=stararr
      console.log(this.stararr)
    },
  methods:{
    
  }
};
</script>

<style lang="scss">
.assessList {
  .userinfo {
    display: flex;
    justify-content: space-between;
    .user {
      display: flex;
      margin-top: 30upx;
      .photo {
        width: 49upx;
        height: 49upx;
        margin-left: 29upx;
        margin-right: 18upx;
      }
   .info{
     margin-top: -7upx;
        .username {
        color: #333333;
        font-size: 30upx;
        padding-right:10upx;
      }
      .proname {
        color: #9b9b9b;
        font-size: 23upx;
      }
      .stars {
        display: flex;
        height:6upx;
        position: relative;
        top: -15upx;
        .star {
          width: 16upx;
          height: 16upx;
          margin-right: 9upx;
        }
        .pingfen{
          color: #DF3347;
          font-size: 22upx;
          line-height:55upx;
          margin-left: 16upx;
        }
      }
   }
    }
    .date {
      color: #9b9b9b;
      font-size: 24upx;
      margin-right: 34upx;
      line-height: 100upx;
    }
  }
  .detail {
    width: 631upx;
    margin: 0 auto;
    margin-top:25upx;
    padding-left: 40upx;
    .assessdetail {
      width: 631upx;
      height: 123upx;
      color: #686868;
      font-size: 26upx;
    }
    .deal {
      color: #4372a9;
      font-size: 23upx;
    }
  }
  .pictures {
    width: 596upx;
    display: flex;
    margin: 0 auto;
    margin-top:30upx;
    flex-wrap: wrap;

    .shoppic {
      width: 139upx;
      height: 135upx;
      margin-right: 12upx;
    }
  }
  .buyinfo{
    width: 624upx;
    display:flex;
    justify-content: space-between;
    font-size: 22upx;
    color: #999999;
    margin: 0 auto;
    margin-top:24upx;
  }
  .line{
    width:679upx;
    height: 2upx;
    background-color: #DCDCDC;
    margin: 0 auto;
    margin-top:26upx;
  }
}
</style>