优化：会员头像封装成组件支持默认头像

components/avatar-image/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="avatar-image">
+    <image class="image"
+      :style="{ width: `${width}rpx`, height: `${width}rpx`, borderWidth: `${borderWidth}rpx`, borderColor: borderColor }"
+      :src="url ? url : '/static/default-avatar.png'"></image>
+  </view>
+</template>
+
+<script>
+  export default {
+
+    /**
+     * 组件的属性列表
+     * 用于组件自定义设置
+     */
+    props: {
+      url: {
+        type: String,
+        default: ''
+      },
+      width: {
+        type: Number,
+        default: 90
+      },
+      borderWidth: {
+        type: Number,
+        default: 0
+      },
+      borderColor: {
+        type: String,
+        default: '#000000'
+      }
+    },
+
+    data() {
+      return {
+
+      }
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .avatar-image {
+    .image {
+      display: block;
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      border-style: solid;
+    }
+  }
+</style>

pages/comment/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
-    @up="upCallback">
+  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
     <!-- tab栏 -->
     <u-tabs :list="tabs" :is-scroll="false" :current="curTab" active-color="#FA2209" :duration="0.2" @change="onChangeTab" />
 
@@ -10,7 +9,7 @@
         <view class="item-head">
           <!-- 用户信息 -->
           <view class="user-info">
-            <image class="user-avatar" mode="aspectFill" :src="item.user.avatar_url"></image>
+            <avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" />
             <text class="user-name f-26">{{ item.user.nick_name }}</text>
           </view>
           <!-- 评星 -->
@@ -43,6 +42,7 @@
 <script>
   import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
   import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+    import AvatarImage from '@/components/avatar-image'
   import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
   import * as CommentApi from '@/api/comment'
 
@@ -63,7 +63,8 @@
 
   export default {
     components: {
-      MescrollBody
+      MescrollBody,
+          AvatarImage
     },
     mixins: [MescrollMixin],
     data() {
@@ -215,9 +216,6 @@
       align-items: center;
 
       .user-avatar {
-        width: 50rpx;
-        height: 50rpx;
-        border-radius: 50%;
         margin-right: 15rpx;
       }
 

pages/goods/components/Comment.vue

@@ -15,7 +15,7 @@
       <view class="comment-item" v-for="(item, index) in list" :key="index">
         <view class="comment-item_row dis-flex flex-y-center">
           <view class="user-info dis-flex flex-y-center">
-            <image class="avatar" :src="item.user.avatar_url"></image>
+            <avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" />
             <text class="user-name">{{ item.user.nick_name }}</text>
           </view>
           <!-- 评星 -->
@@ -34,9 +34,13 @@
 </template>
 
 <script>
+  import AvatarImage from '@/components/avatar-image'
   import * as CommentApi from '@/api/comment'
 
   export default {
+    components: {
+      AvatarImage
+    },
     props: {
       // 商品ID
       goodsId: {
@@ -130,7 +134,7 @@
   .user-info {
     margin-right: 15rpx;
 
-    .avatar {
+    .user-avatar {
       width: 50rpx;
       height: 50rpx;
       border-radius: 50%;

pages/user/index.vue

@@ -6,7 +6,7 @@
       <!-- 用户信息 -->
       <view v-if="isLogin" class="user-info">
         <view class="user-avatar">
-          <image class="image" :src="userInfo.avatar_url ? userInfo.avatar_url : '/static/default-avatar.png'"></image>
+          <avatar-image :url="userInfo.avatar_url" :width="100" />
         </view>
         <view class="user-content">
           <!-- 会员昵称 -->
@@ -123,6 +123,7 @@
 
 <script>
   import store from '@/store'
+  import AvatarImage from '@/components/avatar-image'
   import { setCartTabBadge } from '@/utils/app'
   import SettingKeyEnum from '@/common/enum/setting/Key'
   import SettingModel from '@/common/model/Setting'
@@ -153,6 +154,9 @@
   ]
 
   export default {
+    components: {
+      AvatarImage
+    },
     data() {
       return {
         // 枚举类
@@ -403,13 +407,6 @@
       height: 100rpx;
       z-index: 1;
 
-      .user-avatar .image {
-        display: block;
-        width: 100rpx;
-        height: 100rpx;
-        border-radius: 50%;
-      }
-
       .user-content {
         display: flex;
         flex-direction: column;