feat: 调整商品详情页的页面布局

src/pages/goods/detail.vue

@@ -20,9 +20,7 @@
           </view>
         </view>
         <view class="btns">
-          <u-button type="warning" text="分享好友" class="share" open-type="share"></u-button>
-          <u-button type="error" text="立即联系" class="contact" @click="toContact" v-if="!isMine"></u-button>
-          <u-button type="primary" text="立即购买" class="buy" @click="toBuy" v-if="!isMine && detail.amount && detail.status === 1"></u-button>
+          <view class="contact" @click="toContact" v-if="!isMine"><text class="iconfont icon-duihua"></text>联系Ta</view>
         </view>
       </view>
 
@@ -47,16 +45,7 @@
           <view class="left-location"><text class="iconfont icon-dingwei"></text>{{detail.city}} {{detail.area}}</view>
           <view class="right-stats">
             <view class="it">
-              <text class="iconfont icon-liulan"></text>
-              <text class="text">{{detail.visit || 0}}</text>
-            </view>
-            <view class="it" :class="detail.isLike ? 'active':''" @tap="handelLickCollect(1)">
-              <text class="iconfont icon-dianzan"></text>
-              <text class="text">{{detail.up || 0}}</text>
-            </view>
-            <view class="it" :class="detail.isCollect ? 'active':''" @tap="handelLickCollect(2)">
-              <text class="iconfont icon-shoucang"></text>
-              <text class="text">{{detail.collectNum || 0}}</text>
+              浏览 {{detail.visit || 0}}
             </view>
           </view>
         </view>
@@ -104,8 +93,25 @@
 
       <template slot="footer">
         <view class="bottom-container">
-          <u-button text="留言" type="primary" shape="circle" @click="openRemark()"></u-button>
-          <u-button text="操作" type="primary" shape="circle" @click="isShowActionDialog = true" v-if="isMine && detail.status !== 4"></u-button>
+          <view class="left-actions">
+            <button class="item button" open-type="share">
+              <text class="iconfont icon-fenxiang"></text>
+              <text class="text">分享</text>
+            </button>
+            <view class="item" :class="detail.isLike ? 'active':''" @tap="handelLickCollect(1)">
+              <text class="iconfont" :class="detail.isLike ? 'icon-dianzan2' : 'icon-dianzan'"></text>
+              <text class="text">{{detail.up || 0}}</text>
+            </view>
+            <view class="item" :class="detail.isCollect ? 'active':''" @tap="handelLickCollect(2)">
+              <text class="iconfont" :class="detail.isCollect ? 'icon-shoucang2' : 'icon-shoucang'"></text>
+              <text class="text">{{detail.collectNum || 0}}</text>
+            </view>
+          </view>
+          <view class="right-btns">
+            <view class="btn1" @click="openRemark()">我要留言</view>
+            <view class="btn2" @click="toBuy" v-if="!isMine && detail.amount && detail.status === 1">立即购买</view>
+            <view class="btn2" @click="isShowActionDialog = true" v-if="isMine && detail.status !== 4">更多操作</view>
+          </view>
         </view>
       </template>
     </zj-page-layout>
@@ -481,6 +487,9 @@ import { uploadImg } from '@/common/utils/util.js'
   background: #ffffff;
   margin-top: 30rpx;
   padding: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   .user {
     display: flex;
     align-items: center;
@@ -502,18 +511,17 @@ import { uploadImg } from '@/common/utils/util.js'
     }
   }
   .btns {
-    display: flex;
-    margin-top: 30rpx;
-    ::v-deep .u-button {
-      width: calc((100% - 60rpx) / 3);
-      height: 68rpx;
-      line-height: 68rpx;
-      font-size: 28rpx;
-      color: #ffffff;
-      margin: 0;
-      margin-right: 30rpx;
-      &:last-child {
-        margin-right: 0;
+    .contact {
+      height: 60rpx;
+      border-radius: 60rpx;
+      padding: 0 20rpx;
+      font-size: 24rpx;
+      background: rgba($color: $theme-color, $alpha: .2);
+      color: $theme-color;
+      display: flex;
+      align-items: center;
+      text {
+        margin-right: 4rpx;
       }
     }
   }
@@ -600,23 +608,8 @@ import { uploadImg } from '@/common/utils/util.js'
         display: flex;
         align-items: center;
         margin-left: 30rpx;
-        .iconfont {
-          font-size: 32rpx;
-          color: $sec-font;
-        }
-        .text {
-          font-size: 28rpx;
-          margin-left: 6rpx;
-          color: $sec-font;
-        }
-        &.active {
-          .iconfont {
-            color: $theme-color;
-          }
-          .text {
-            color: $theme-color;
-          }
-        }
+        font-size: 28rpx;
+        color: $sec-font;
       }
     }
   }
@@ -824,16 +817,71 @@ import { uploadImg } from '@/common/utils/util.js'
 }
 
 .bottom-container {
-  padding: 20rpx 30rpx;
+  padding: 20rpx 30rpx 20rpx 10rpx;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  ::v-deep .u-button {
-    width: auto;
-    height: 60rpx;
-    margin: 0;
-    margin-left: 20rpx;
-    padding: 0 30rpx;
+  justify-content: space-between;
+  .left-actions {
+    width: 45%;
+    display: flex;
+    align-items: center;
+    .item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0 10rpx;
+      background: none;
+      .iconfont {
+        font-size: 44rpx;
+        color: $reg-font;
+      }
+      .text {
+        font-size: 24rpx;
+        color: $reg-font;
+        margin-top: 4rpx;
+      }
+      &.button {
+        line-height: unset;
+        padding: 0;
+        &::after {
+          border: none;
+        }
+      }
+      &.active {
+        .iconfont {
+          color: $theme-color;
+        }
+        .text {
+          color: $theme-color;
+        }
+      }
+    }
+  }
+  .right-btns {
+    display: flex;
+    align-items: center;
+    >view {
+      height: 76rpx;
+      border-radius: 76rpx;
+      margin-left: 20rpx;
+      padding: 0 30rpx;
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      &:first-child {
+        margin-left: 0;
+      }
+      &.btn1 {
+        background: rgba($color: $theme-color, $alpha: .2);
+        color: $theme-color;
+      }
+      &.btn2 {
+        background: $theme-color;
+        color: #ffffff;
+      }
+    }
   }
+
 }
 </style>

src/styles/iconfont.css

@@ -1,9 +1,9 @@
 /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @font-face {
   font-family: 'iconfont';  /* Project id 4308323 */
-  src: url('https://at.alicdn.com/t/c/font_4308323_dmtu4i5zp24.woff2?t=1699092342414') format('woff2'),
-       url('https://at.alicdn.com/t/c/font_4308323_dmtu4i5zp24.woff?t=1699092342414') format('woff'),
-       url('https://at.alicdn.com/t/c/font_4308323_dmtu4i5zp24.ttf?t=1699092342414') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4308323_aieqfc49e5s.woff2?t=1699351867855') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4308323_aieqfc49e5s.woff?t=1699351867855') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4308323_aieqfc49e5s.ttf?t=1699351867855') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-duihua:before {
+  content: "\e619";
+}
+
+.icon-fenxiang:before {
+  content: "\e616";
+}
+
 .icon-guanbi1:before {
   content: "\e903";
 }