purchase-let/components/goodPopup.vue

<template>
  <up-popup :show="show" closeable round="10" @close="close">
    <view class="good-popup">
      <view class="head-title">
        {{datas.is_bulk ? '称重商品' : '计件商品'}}
      </view>
      <view class="row">
        <view>商品名称</view>
        <view>{{datas.name || datas.goods_name}}</view>
      </view>
      <view class="row">
        <view>商品单位</view>
        <view>{{datas.unit_name}}</view>
      </view>
      <view class="row">
        <view>商品价格</view>
        <view>¥ {{datas.sell}}</view>
      </view>
      <view class="row">
        <view>小计</view>
        <view style="color: #F55726;">¥ {{subtotal}}</view>
      </view>
      <view v-if="datas.is_bulk" class="row">
        <view>商品重量<text style="color: #F55726;">*</text></view>
        <view><up-input v-model="datas.cart_num" border="none" placeholder="请输入重量" inputAlign="right"></up-input></view>
      </view>
      <view v-else class="row">
        <view>商品数量<text style="color: #F55726;">*</text></view>
        <view><up-input v-model="datas.cart_num" border="none" placeholder="请输入数量" inputAlign="right"></up-input></view>
      </view>
      <view class="row">
        <view style="width: 30%;margin-right: 30rpx;">
          <up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button>
        </view>
        <view style="flex: 1;">
          <up-button @click="change" color="#20b128">确定</up-button>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import { computed, ref } from "vue"

  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
  })
  
  const datas = ref({
    cart_num: ''
  });
  const setData = (e)=>{
    datas.value = e;
  }

  const emit = defineEmits(['close', 'change']);
  const close = () => {
    emit('close');
  }

  const change = () => {
    emit('change', datas.value);
  }
  
  const subtotal = computed(()=>{
    let num = +datas.value.cart_num || 0;
    let sell = +datas.value.sell;
    return Math.ceil(num * sell * 100) / 100
  })
  
  defineExpose({
    setData
  })
</script>

<style scoped lang="scss">
  .good-popup {
    padding: 30rpx;

    .head-title {
      font-weight: bold;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f6f6f6;
      margin-bottom: 20rpx;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .content {
        .top {
          display: flex;

          view {
            margin-right: 20rpx;
          }
        }

        .bottom {}
      }

      image {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
      }
    }
  }

  @keyframes disappear {
    to {
      opacity: 0;
      /* 渐隐 */
      transform: scale(0);
      /* 缩小 */
    }
  }
</style>