yizhiyang hace 1 año
padre
commit
9763783a70

+ 84 - 0
src/pagesHome/productDetail/serviceFooter copy.vue

@@ -0,0 +1,84 @@
+<template>
+  <view class="fl-flex-item" style="padding: 20rpx 20rpx 40rpx 40rpx">
+    <view class="footer-left">
+      <view class="left-item" @click="collect(0)">
+        <view class="item-img">
+          <image src="/static/pagesHome/detail_shop.png" class="img"></image>
+        </view>
+        <view class="item-text">店铺</view>
+      </view>
+      <view class="left-item" @click="collect(1)">
+        <view class="item-img">
+          <image src="/static/pagesHome/detail_comment.png" class="img"></image>
+        </view>
+        <view class="item-text">咨询</view>
+      </view>
+    </view>
+    <view class="footer-right">
+      <view class="btn1" @click="handlerFavorite">
+        <image src="/static/pagesHome/detail_heart.png)"></image>
+        <view>收藏</view>
+      </view>
+      <view class="btn2" @click="handlerAddCart"> 立即购买 </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    collect(data) {
+      this.$emit('collect', data);
+    },
+    handlerAddCart() {
+      this.$emit('cart');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.footer-left {
+  display: flex;
+  .left-item {
+    margin-right: 32rpx;
+    .item-img {
+      .img {
+        width: 44rpx;
+        height: 44rpx;
+      }
+    }
+    .item-text {
+      color: #0c1223;
+      font-size: 24rpx;
+    }
+  }
+}
+.footer-right {
+  display: flex;
+  justify-content: space-between;
+  font-size: 28rpx;
+  .btn1 {
+    padding: 20rpx 54rpx;
+    background-color: #0c1223;
+    color: #fff;
+    text-align: center;
+    align-items: center;
+    border-radius: 8rpx;
+    display: flex;
+    margin-right: 20rpx;
+    vertical-align: middle;
+    .img {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 10rpx;
+    }
+  }
+  .btn2 {
+    border-radius: 8rpx;
+    padding: 20rpx 82rpx;
+    background-color: #215ebe;
+    color: #fff;
+  }
+}
+</style>

+ 53 - 61
src/pagesHome/productDetail/serviceFooter.vue

@@ -1,32 +1,41 @@
 <template>
-  <view class="fl-flex-item" style="padding: 20rpx 20rpx 40rpx 40rpx">
-    <view class="footer-left">
-      <view class="left-item" @click="collect(0)">
-        <view class="item-img">
-          <image src="/static/pagesHome/detail_shop.png" class="img"></image>
+  <view class="service-footer">
+    <view class="fl-flex-item">
+      <view class="fl-flex fl-align-center">
+        <view class="direction u-m-r-32" @click="handleCollect">
+          <u--image
+            src="/static/pagesHome/detail_shop.png"
+            width="44rpx"
+            height="44rpx"
+          />
+          <view class="f-s-24 text-primary">店铺</view>
         </view>
-        <view class="item-text">店铺</view>
-      </view>
-      <view class="left-item" @click="collect(1)">
-        <view class="item-img">
-          <image src="/static/pagesHome/detail_comment.png" class="img"></image>
+        <view class="direction" @click="handleConsult">
+          <u--image
+            src="/static/pagesHome/detail_comment.png"
+            width="44rpx"
+            height="44rpx"
+          />
+
+          <view class="f-s-24 text-primary">咨询</view>
         </view>
-        <view class="item-text">咨询</view>
       </view>
-    </view>
-    <view class="footer-right">
-      <view class="btn1" @click="handlerFavorite">
-        <image
-          :src="
-            goods.favorites
-              ? require('/static/pagesHome/detail_heart.png')
-              : require('/static/pagesHome/detail_heart-select.png.png')
-          "
-          class="img"
-        ></image>
-        <view>收藏</view>
+      <view class="fl-flex">
+        <view class="server-btn1 server-btn">
+          <!-- <u--image
+            src="/static/pagesHome/detail_heart.png"
+            width="32rpx"
+            height="32rpx"
+          /> -->
+          <u--image
+            src="/static/pagesHome/detail_heart-select.png"
+            width="32rpx"
+            height="32rpx"
+          />
+          <view class="u-m-l-12"> 收藏</view>
+        </view>
+        <view class="server-btn2 server-btn">立即购买</view>
       </view>
-      <view class="btn2" @click="handlerAddCart"> 立即购买 </view>
     </view>
   </view>
 </template>
@@ -34,58 +43,41 @@
 <script>
 export default {
   methods: {
-    collect(data) {
+    handleCollect(data) {
       this.$emit('collect', data);
     },
     handlerAddCart() {
       this.$emit('cart');
     },
+    handleConsult() {
+      this.$u.toast('该功能暂未开发,尽情期待!');
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.footer-left {
-  display: flex;
-  .left-item {
-    margin-right: 32rpx;
-    .item-img {
-      .img {
-        width: 44rpx;
-        height: 44rpx;
-      }
-    }
-    .item-text {
-      color: #0c1223;
-      font-size: 24rpx;
-    }
-  }
-}
-.footer-right {
-  display: flex;
-  justify-content: space-between;
-  font-size: 28rpx;
-  .btn1 {
-    padding: 20rpx 54rpx;
-    background-color: #0c1223;
+.service-footer {
+  height: 80rpx;
+  padding: 32rpx;
+  .server-btn {
+    height: 80rpx;
+    line-height: 80rpx;
     color: #fff;
     text-align: center;
-    align-items: center;
     border-radius: 8rpx;
+  }
+  .server-btn1 {
+    width: 208rpx;
+    background: #0c1223;
+    margin-right: 16rpx;
     display: flex;
-    margin-right: 20rpx;
-    vertical-align: middle;
-    .img {
-      width: 32rpx;
-      height: 32rpx;
-      margin-right: 10rpx;
-    }
+    justify-content: center;
+    align-items: center;
   }
-  .btn2 {
-    border-radius: 8rpx;
-    padding: 20rpx 82rpx;
-    background-color: #215ebe;
-    color: #fff;
+  .server-btn2 {
+    width: 318rpx;
+    background: #215ebe;
   }
 }
 </style>