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

<template>
  <view class="container">
    <view class="item-box" @click="handlerOpenPop">
      <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.price }}</span>
            <span class="price-text2">￥{{ allPrice.originalPrice }}</span>
          </p>
        </view>
      </view>
      <view class="item-right" @click.stop="handlerSettleBtn"> 去结算 </view>
    </view>

    <u-popup :show="pop_show" @close="pop_show = false" round='20' mode='bottom'>
      <view class="pop" v-for="(item,index) of goodsCateList" :key='index'>
        <view class="pop-box">
          <!-- <u-swipe-action> -->
          <!-- <u-swipe-action-item :options="options1"> -->
          <view class="pop-item">
            <view class="left">
              <view class="item-left">
                <image class="left-img" :src='item.goodsPic'></image>
              </view>
              <view class="item-right">
                <view class="right-name">{{ item.goodsName }}</view>

                <view class="right-price"> <span>￥</span> {{ item.price }}</view>
              </view>
            </view>
            <view class="right">
              <u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
              <button class="btn" @click.stop="handlerService(item)">删除</button>
            </view>
          </view>
          <!-- </u-swipe-action-item> -->
          <!-- </u-swipe-action> -->

        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    addShoppingCart,
    editGoodsNumb,
    deleteCartItem
  } from '@/api/client/business.js';
  export default {
    data() {
      return {
        pop_show: false,
        // options1: [{
        //   text: '删除'
        // }]
      }
    },
    props: {
      goodsCateList: {
        type: Array,
        default: []
      },
      ids: {
        type: String,
        default: ''
      }
    },
    watch: {
      goodsCateList(newValue) {
        if (newValue.length == 0) {
          this.pop_show = false
        }
      }
    },
    computed: {
      allPrice() {
        let price = 0
        let originalPrice = 0
        this.goodsCateList.map(rs => {
          price += Number(rs.price) * Number(rs.quantity)
          originalPrice += Number(rs.originalPrice) * Number(rs.quantity)
        })
        return {
          price,
          originalPrice
        }
      },
      allNumb() {
        let allNumber = 0
        this.goodsCateList.map(rs => {
          allNumber += Number(rs.quantity)
        })
        return allNumber
      }
    },
    methods: {
      // 点击打开pop
      handlerOpenPop() {
        if (!this.goodsCateList.length) {
          uni.showToast({
            title: '购物车商品为空',
            icon: 'none'
          })
          return
        } else {
          this.pop_show = true
        }
      },
      // 结算按钮
      handlerSettleBtn() {
        if (this.goodsCateList.length == 0) {
          uni.showToast({
            title: '请添加购物车',
            icon: 'none'
          })
          return
        } else {
          uni.navigateTo({
            url: `/pages/client/clientPackage/uptickOrder?ids=${this.ids}`
          })
        }
      },
      // 修改商品数量
      valChange(item, e) {
        editGoodsNumb(item.id, {
          quantity: e.value
        }).then(res => {
          console.log('@@@2res', res)
        })
      },
      // 点击删除按钮
      handlerService(item, e) {
        deleteCartItem(item.id).then(res => {
          if (res.code === 'OK') {
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            })
            this.$emit("handlerDeleteGoods")
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            })
            return
          }
        })
      }
    }
  }
</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;
      }
    }

    .pop {
      max-height: 700rpx;
      overflow-y: auto;
    }

    .pop-box {
      padding: 20rpx;

      .pop-item {
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        box-shadow: 0 5rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        height: 100%;

        .left {
          display: flex;
        }

        .item-left {
          .left-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 20rpx;
          }
        }

        .item-right {
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .right-name {
            font-size: 32rpx;
            font-weight: bold;
          }

          .right-price {
            color: #ff4b04;
            font-size: 30rpx;
            font-weight: bold;

            span {
              font-size: 24rpx;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .btn {
            font-size: 26rpx;
            border-radius: 40rpx;
            border: 2rpx solid #ec5729;
            color: #ec5729;
            background-color: #fff;
          }
        }
      }
    }
  }
</style>