浏览代码

新增购物车组件

zxl 1 年之前
父节点
当前提交
6b8245f377

+ 97 - 0
src/components/settleBottomBtn/settleBottomBtn.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="container">
+    <view class="item-box">
+      <view class="item-left">
+        <image class="img" src="@/static/images/shopCarts.png"></image>
+        <view class="edge-box">
+          <u-badge class="edge" type="warning" max="99" value="12"></u-badge>
+        </view>
+        <view class="left-price">
+          <p class="price">
+            <span class="price-symbal">¥</span><span class="price-text1">100.2</span>
+            <span class="price-text2">¥219</span>
+          </p>
+        </view>
+      </view>
+      <view class="item-right" @click="handlerSettleBtn"> 去结算 </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default{
+    data(){
+      return{
+
+      }
+    },
+    methods:{
+      // 结算按钮
+      handlerSettleBtn(){
+
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container{
+    .item-box{
+      width: 90%;
+      height:80rpx;
+      margin: 0 auto;
+      display: flex;
+      .item-left{
+        background-color: #222426;
+        width: 80%;
+        border-radius: 40rpx 0 0 40rpx;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .img{
+          position: absolute;
+          width: 130rpx;
+          height: 130rpx;
+          left: 9%;
+          top: -70%;
+        }
+        .edge-box{
+          position: absolute;
+          left: 25%;
+          top: -55%;
+        }
+        .left-price{
+          margin-left: 30%;
+          .price{
+            color: #fff;
+            font-size: 28rpx;
+            font-weight: bold;
+            .price-symbal{
+              font-size: 28rpx;
+            }
+            .price-text1{
+              font-size: 34rpx;
+            }
+            .price-text2{
+              font-size: 24rpx;
+              color: #999999;
+              font-style: italic;
+              text-decoration:line-through;
+            }
+          }
+        }
+      }
+      .item-right{
+        background-color: #FFE339;
+        width: 20%;
+        border-radius: 0 40rpx 40rpx 0;
+        color: #000;
+        font-size: 30rpx;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>

+ 0 - 1
src/pages/client/clientPackage/serviceDetail/index.vue

@@ -210,7 +210,6 @@
       },
       // 点击收藏
       handlerFavorite() {
-        console.log('@@@',this.goods);
         if(this.goods.favorites){
           cancelFavorite(this.id).then(res => {
             if (res.code == 200) {

+ 56 - 18
src/pages/client/clientPackage/storeDetail.vue

@@ -28,12 +28,16 @@
           <view class="distance">{{ (merchant.distance / 1000).toFixed(2) }}km</view>
         </view>
         <view class="info-icon">
+          <view class="info-map" @click="handlerFavouriteShop">
+            <u-icon class="user-operate-icon" name='heart' size="24" />
+            <view style="font-size: 20rpx; margin-top: 5rpx">收藏</view>
+          </view>
           <view class="info-map">
-            <u-icon name="map" size="20"></u-icon>
+            <u-icon name="map" size="24"></u-icon>
             <view style="font-size: 20rpx; margin-top: 5rpx">导航</view>
           </view>
           <view class="info-map" @click="handlerMakeCall">
-            <u-icon name="phone" size="20"></u-icon>
+            <u-icon name="phone" size="24"></u-icon>
             <view style="font-size: 20rpx; margin-top: 5rpx">电话</view>
           </view>
         </view>
@@ -54,10 +58,15 @@
 		    " mode="scaleToFill" @click="$Router.push(`/pages/client/clientPackage/storeDetail?id=${item.id}`)"></image> -->
         <image class="img" :src="!Boolean(item.logo) ? '@/static/QR57a.jpg' : item.logo"></image>
         <view class="listDetail">
-          <view class="item-text">{{ item.name }}</view>
+          <view class="item-text">
+            <view class="item-text-left"> {{ item.name }} </view>
+            <view class="item-text-right">
+              <image class="img" src="@/static/icon/shopCar.png" @click.stop="handlerAddCart(item)"></image>
+            </view>
+          </view>
           <view class="item-flex">
             <view class="star">
-              <u-rate :count="item.score" :size="14" />
+              <u-rate count="5" v-model="item.score" readonly :size="14" />
               <text class="line">|</text>
               <text class="points">{{ item.score }}分</text>
             </view>
@@ -66,10 +75,10 @@
           <view class="list-item">
             <view class="list-price">
               <view class="item-l">
-                券后价 <span>¥{{ item.originalPrice.toFixed(2) }}</span>
+                优惠价 <span>¥{{ item.specialPrice.toFixed(2) }}</span>
               </view>
               <view class="item-r">
-                门市价 <span>¥{{ item.specialPrice.toFixed(2) }}</span>
+                门市价 <span>¥{{ item.originalPrice.toFixed(2) }}</span>
               </view>
             </view>
             <view class="btn-box">
@@ -85,6 +94,11 @@
       </u-empty>
     </view>
 
+    <!-- 底部购物车 -->
+    <view class="bottom-box">
+      <settleBottomBtn/>
+    </view>
+
     <!-- 弹窗 -->
     <u-popup :show="reserve_show" @close="reserve_show = false" round="20" mode="center">
       <view class="draw-box">
@@ -113,15 +127,13 @@
 </template>
 
 <script>
-  import {
-    getSellsDetail,
-    addReservation
-  } from '@/api/client/business.js';
-  import {
-    getCurrentLocation,
-    hotMerchant
-  } from '@/api/client/home';
+  import { getSellsDetail, addReservation } from '@/api/client/business.js';
+  import { getCurrentLocation, hotMerchant } from '@/api/client/home';
+  import settleBottomBtn from "@/components/settleBottomBtn/settleBottomBtn.vue"
   export default {
+    components:{
+      settleBottomBtn
+    },
     data() {
       return {
         merchant: {},
@@ -297,7 +309,14 @@
           });
         }
       },
+      // 收藏按钮
+      handlerFavouriteShop(){
 
+      },
+      // 添加购物车
+      handlerAddCart(e){
+        console.log('@@@@e',e);
+      },
       formatter(type, value) {
         if (type === 'minute') {
           return `00`;
@@ -318,8 +337,9 @@
 
 <style lang="scss" scoped>
   .detail {
-    min-height: 100vh;
+    min-height: calc( 100vh - 200rpx );
     background-color: #efefef;
+    padding-bottom: 200rpx;
   }
 
   // 轮播图
@@ -434,9 +454,22 @@
     }
 
     .item-text {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       font-weight: bold;
       margin: 10rpx 0 10rpx;
       color: #333;
+      font-size: 36rpx;
+      .item-text-left{
+
+      }
+      .item-text-right{
+        .img{
+          width: 50rpx;
+          height: 50rpx;
+        }
+      }
     }
 
     .item-flex {
@@ -449,9 +482,9 @@
 
       .star {
         display: flex;
-
+        align-items: center;
         .line {
-          margin-left: 16rpx;
+          margin: 0 12rpx;
           margin-top: 5rpx;
           font-size: 22rpx;
         }
@@ -466,7 +499,6 @@
     }
 
     .list-item {
-      margin-top: 40rpx;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -560,4 +592,10 @@
   .categoryList {
     background-color: #fff;
   }
+
+  .bottom-box{
+    width: 100%;
+    position: fixed;
+    bottom: 5%;
+  }
 </style>

+ 2 - 2
src/pages/client/tabBar/promotionCode/index.vue

@@ -4,7 +4,7 @@
     <view class="img-box">
       <image src="@/static/images/honglei.png" class="img" mode="aspectFill"></image>
       <view class="img-text">
-        <view class="name">是兄弟就来砍我</view>
+        <view class="name">你TM劈我瓜是吧</view>
         <view class="address">山东 潍坊</view>
       </view>
     </view>
@@ -25,7 +25,7 @@
   export default {
     data() {
       return {
-        text: 'https://www.4399.com',
+        text:'https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwxLDMsMiw2LDQsNSw3LDgsOQ%3D%3D&word=giao',
         size: 200
       };
     },

二进制
src/static/images/shopCarts.png