chelvc-custom/src/components/settleBottomBtn/settleBottomBtn.vue

<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="allNumb"></u-badge>
        </view>
        <view class="left-price">
          <p class="price">
            <span class="price-symbal">￥</span><span class="price-text1">{{ allPrice }}</span>
            <span class="price-text2">￥219</span>
          </p>
        </view>
      </view>
      <view class="item-right" @click="handlerSettleBtn"> 去结算 </view>
    </view>
  </view>
</template>

<script>
  import {
    addShoppingCart
  } from '@/api/client/business.js';
  export default {
    data() {
      return {}
    },
    props: {
      goodsCateList: {
        type: Array,
        default: []
      }
    },
    computed: {
      allPrice() {
        let sum = 0
        this.goodsCateList.map(rs => {
          sum += Number((rs.price).toFixed(2))
        })
        console.log('@@@@sum', sum);
        return sum
      },
      allNumb() {
        return this.goodsCateList.length
      }
    },
    methods: {
      // 结算按钮
      handlerSettleBtn() {
        this.goodsCateList.map(rs => {
          addShoppingCart(rs).then(res => {
            if (res.code == 200) {
              wx.showLoading({
                title: '结算中',
              })
            } else {
              uni.showToast({
                title: res.message,
                icon: 'none'
              })
              return
            }
          })
        })
        setTimeout(()=>{
          wx.hideLoading()
          this.goodsCateList = []
          uni.navigateTo({
          	url:"/pages/client/clientPackage/uptickOrder"
          })
        },1500)
      }
    }
  }
</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>