shop-applet/pages/nongKe/cpns/goodsPopup.vue

<template>
  <u-popup :show="goodsStatu" mode="bottom" :closeOnClickOverlay="false">
    <view class="goodsPopup">
      <view class="close" @click="colse">关闭</view>
      <view class="container">
        <!-- <image src=""  /> -->
        <view class="content">
          <view class="image">
            <image :src="info.image" />
          </view>
          <view class="content_info">
            <view>{{ info.store_name }}</view>
            <view>￥:{{ info.price * info.num }}</view>
            <view>库存:{{ info.stock }}</view>
          </view>
        </view>
        <view class="goods_num">
          <view>数量</view>
          <view class="shop_num">
            <view class="shop_box" @click="addor(-1)">-</view>
            <view class="num">{{ info.num }}</view>
            <view class="shop_box" @click="addor(+1)">+</view>
          </view>
        </view>
      </view>
      <view class="shopgo" @click="handel">添加到购物车</view>
    </view>
  </u-popup>
</template>

<script>
  export default {
    props: {
      goodsStatu: {
        type: Boolean,
        default: false
      },
      //商品参数
      goods_info: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        info: this.goods_info,
      };
    },
    onLoad() {
    },
    methods: {
      addor(item, index) {
        this.info.num += item;
        if (this.info.num <= 0) {
			// console.log(goods_info);
          this.info.num = 1;
        }
      },
      // 返回修改过后的商品参数给父组件
      handel() {
        this.$emit("change", this.info);
      },
      colse() {
        this.$emit("colses", true);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .goodsPopup {
    display: flex;
    position: relative;
    height: 30vh;

    .close {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }

    .container {
      width: 100%;

      .content {
        width: 90%;
        display: flex;
        margin: auto;

        .image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 20rpx;

          >image {
            width: 100%;
            height: 100%;
          }
        }

        .content_info :nth-child(1) {
          font-size: 36rpx;
        }

        .content_info :nth-child(2) {
          font-size: 32rpx;
          color: #fe9a10;
        }

        .content_info :nth-child(3) {
          color: #666;
        }
      }

      .goods_num {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: auto;

        .shop_num {
          display: flex;

          >view {
            width: 80rpx;
            height: 40rpx;
            border: 1px solid;
            text-align: center;
          }

          .num {
            border-left: 0;
            border-right: 0;
          }
        }
      }
    }

    .shopgo {
      position: absolute;
      bottom: 50rpx;
      left: 50%;
      transform: translate(-50%, 0);
      width: 200rpx;
      background: red;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      color: #fff;
    }
  }
</style>