VAVABUY/pages/repo/components/logisticsModel.vue

<template>
  <Popup title="填写物流" isClose ref="popRef">
    <template #content>
      <view class="form">
        <view class="form_item">
          <view class="item_label">
            <trans _t="物流公司" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请填写物流公司')"
              border="surround"
              v-model="form.express_name"
            />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="快递单号" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('请填写快递单号')"
              border="surround"
              v-model="form.express_no"
            />
          </view>
        </view>
      </view>
    </template>

    <!-- footer -->
    <template #footer>
      <view class="footer">
        <view class="submit_btn submit_close" @click="close">
          <trans _t="取消" />
        </view>
        <view class="submit_btn" @click="submit">
          <trans _t="确认" />
        </view>
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { computed, ref, reactive, nextTick } from "vue";
import Popup from "@/components/popup.vue";
import { Toast, Moneyhtml } from "@/utils";
import { t } from "@/locale";
import { useSystemStore } from "@/store";
import Input from "@/components/input";
import { SHOP_BUYBACK_EXPRESS } from "@/api";

const emit = defineEmits(["submit", "open", "close"]);

const popRef = ref(null);

const form = reactive({
  id: "",
  express_name: "",
  express_no: "",
});
const open = (id = "") => {
  form.id = id;
  emit("open");
  popRef.value && popRef.value.open();
};

const close = () => {
  emit("close");
  popRef.value && popRef.value.close();
};
const submit = async () => {
  if (!form.express_name) return Toast(t("请填写物流公司"));
  if (!form.express_no) return Toast(t("请填写快递单号"));
  try {
    let res = await SHOP_BUYBACK_EXPRESS(form);
    close();
    Toast(res.msg).then(() => {
      TimeOut(() => {
        close();
        emit("submit");
      });
    });
    Toast(res.msg);
  } catch (error) {
    Toast(error.msg);
  }
};

defineExpose({ open, close });
</script>


<style lang="less" scoped>
@import url("@/style.less");

.form {
  width: 100%;

  &_item {
    width: 100%;
    margin-top: 24rpx;

    &:first-child {
      margin-top: 0;
    }

    .item_label {
      font-weight: 700;
      color: var(--text);
      .size(28rpx);
      line-height: 60rpx;
      white-space: nowrap;
      padding-right: 24rpx;
      height: 64rpx;
      width: fit-content;
      position: relative;

      &::before {
        content: "*";
        color: #f56c6c;
        margin-right: 8rpx;
      }
    }

    ._required {
      &::before {
        content: "";
        margin-right: 0rpx;
      }
    }

    .item_value {
      column-gap: 24rpx;
      flex: 1;

      /deep/ .u-input {
        border-radius: 16rpx;
        padding: 0 24rpx !important;
        background-color: var(--bg);

        .u-input__content {
          display: unset;
        }
      }
    }
  }

  .tips {
    color: var(--text-01);
    .size(24rpx);
    margin: 24rpx 0;
  }

  .total {
    text-align: right;
    color: var(--black);
    .size(28rpx);

    .amount {
      color: var(--red);
      font-weight: 700;
      margin-left: 2rpx;
    }
  }
}

.footer {
  .hor(space-between);
  column-gap: 20rpx;

  .submit_btn {
    height: 76rpx;
    padding: 16rpx 100rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);

    &.submit_close {
      background-color: var(--bg);
      border: 1rpx solid var(--black);
      color: var(--black);
    }
  }
}
</style>