商品详情: 替换收藏图标从svg为iconfont

@@ -54,26 +54,9 @@
         </div>
       </div>
       <div class="footer">
-        <div class="heart">
-          <div class="icon-fav" v-if="isFav" @click="_toggleFav(false)">
-            <svg style="width: 1rem; height: 1rem;" viewBox="0 0 24 24">
-              <title>已收藏</title>
-              <g id="icon/已收藏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g fill="#002B47">
-                  <path d="M11.9998882,18.7717254 L6.90760779,20.9153484 C6.3574449,21.1469424 5.72370571,20.8886913 5.49211167,20.3385284 C5.42388696,20.1764573 5.39623656,20.0001874 5.41155922,19.8250107 L5.88943154,14.3617254 L5.88943154,14.3617254 L2.2755824,10.2271262 C1.88274872,9.77768578 1.92863753,9.09488771 2.37807795,8.70205402 C2.51228845,8.58474724 2.67342863,8.50245519 2.84714548,8.46250776 L8.22341829,7.22619542 L8.22341829,7.22619542 L11.0754231,2.5175655 C11.3846728,2.00699755 12.0492663,1.84379684 12.5598342,2.15304652 C12.708963,2.24337339 12.8340264,2.36843679 12.9243532,2.5175655 L15.7763581,7.22619542 L15.7763581,7.22619542 L21.1526309,8.46250776 C21.734369,8.59628261 22.097515,9.1763205 21.9637402,9.75805866 C21.9237928,9.93177551 21.8415007,10.0929157 21.7241939,10.2271262 L18.1103448,14.3617254 L18.1103448,14.3617254 L18.5882171,19.8250107 C18.6402311,20.4196615 18.200337,20.9438868 17.6056863,20.9959008 C17.4305096,21.0112235 17.2542397,20.9835731 17.0921686,20.9153484 L11.9998882,18.7717254 L11.9998882,18.7717254 Z"></path>
-                </g>
-              </g>
-            </svg>
-          </div>
-          <div class="icon-fav" v-else  @click="_toggleFav(true)">
-            <svg id="icon-heart-o" style="width: 1rem; height: 1rem;" viewBox="0 0 24 24">
-              <title>未收藏</title>
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g stroke="#B2B2B2" stroke-width="1.62123234">
-                  <path d="M6.59310422,20.1682298 L11.9998882,17.892215 L17.4066721,20.1682298 C17.4471899,20.185286 17.4912574,20.1921986 17.5350516,20.188368 C17.6837143,20.1753645 17.7936878,20.0443081 17.7806843,19.8956454 L17.2727172,14.088301 L21.113856,9.69365996 C21.1431827,9.66010733 21.1637558,9.61982229 21.1737426,9.57639307 C21.2071863,9.43095853 21.1163998,9.28594906 20.9709653,9.25250535 L15.2606075,7.93936778 L12.2310044,2.93752506 C12.2084227,2.90024288 12.1771569,2.86897703 12.1398747,2.84639531 C12.0122327,2.76908289 11.8460843,2.80988307 11.7687719,2.93752506 L8.73916885,7.93936778 L3.02881107,9.25250535 C2.98538186,9.26249221 2.94509681,9.28306522 2.91154419,9.31239191 C2.79918408,9.41060033 2.78771188,9.58129985 2.8859203,9.69365996 L6.72705916,14.088301 L6.21909207,19.8956454 C6.21526141,19.9394396 6.22217401,19.9835071 6.23923019,20.0240249 C6.2971287,20.1615656 6.4555635,20.2261284 6.59310422,20.1682298 Z"></path>
-                </g>
-              </g>
-            </svg>
+        <div class="fav">
+          <div class="icon-fav" @click="_toggleFav">
+            <i class="iconfont" :class="[isFav ? 'icon-star-fill': 'icon-star-outline']" />
           </div>
           收藏
         </div>
@@ -276,13 +259,15 @@ export default {
     },
 
     // toggle收藏
-    async _toggleFav(isFav) {
+    async _toggleFav() {
       const userInfo = await this.auth();
 
       if (!userInfo) {
         return;
       }
 
+      const isFav = !this.isFav;
+
       this.toggleFav({productId: this.productId, isFav}).then(() => {
         const txt = isFav ? '收藏成功' : '取消收藏成功';
 
@@ -674,7 +659,7 @@ export default {
 
     @include cube-ufo-btn;
 
-    .heart {
+    .fav {
       margin-right: auto;
       text-align: center;
       width: 3em;
@@ -682,12 +667,17 @@ export default {
       font-size: 22px;
       line-height: 32px;
 
-      svg {
-        width: 48px;
-        height: 48px;
-        color: #888;
-        fill: currentColor;
-        stroke: currentColor;
+      .icon-star-fill,
+      .icon-star-outline {
+        font-size: 48px;
+      }
+
+      .icon-star-outline {
+        color: #b2b2b2;
+      }
+
+      .icon-star-fill {
+        color: #002b47;
       }
     }