fashion-ssr-vue3/components/business/account/orders/remarkModal.vue

<!-- @format -->

<script lang="ts" setup>
import { Message } from '@element-plus/icons-vue'
import { updateOrderApi } from '@/api/model/order'

const props = defineProps({
  orderId: {
    type: String,
    default: '',
  },
})
const visible = defineModel('visible', { type: Boolean, required: true })
const product = defineModel('product', {
  type: Object,
  default: () => ({}),
})
function handleClose() {
  console.log('close')
}

function getFileTitle(file: string) {
  const fileArr = file.split('/')
  return fileArr[fileArr.length - 1]
}
async function onSave() {
  try {
    const params = {
      file: product.value.file,
      orderId: props.orderId,
      merchandiseId: product.value.merchandiseId,
    }
    await updateOrderApi(params)
    ElMessage.success('update success')
    visible.value = false
  }
  catch (error) {
    console.log(error)
  }
}
function del(i: number) {
  product.value.file = product.value.file.filter((item: any, index: number) => index !== i)
  console.log('product.value', product.value)
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :append-to-body="true"
    width="800"
    modal-class="custom-remark-modal"
    @close="handleClose"
  >
    <template #header>
      <div
        class="px-40px py-25px bg-#F5F5F5 b-rd-lt-6px b-rd-rt-6px text-18px fw-500 text-#333"
      >
        Remark
      </div>
    </template>
    <div class="py-24px px-40px">
      <div
        class="p-16px bg-#F7F8FA b-1px b-solid b-#E0E0E0 text-#333333 b-rd-4px"
      >
        {{ product?.remark }}
      </div>
      <div class="mt-28px">
        <div
          v-for="(items, index) in product?.file"
          :key="items.id"
          class="py-14px px-16px bg-#F7F8FA flex items-center justify-between mb-16px b-solid b-1px b-#E0E0E0 b-rd-4px"
        >
          <div class="flex items-center">
            <svgo-file
              class="!w-20px cursor-pointer !h-20px text-#333 mr-16px"
            />
            附件{{ index }}：  <a :href="items"> {{ getFileTitle(items) }}</a>
          </div>
          <div>
            <img
              src="@/assets/images/file_delete.png"
              class="!w-20px cursor-pointer !h-20px"
              alt=""
              srcset=""
              @click="del(index)"
            >
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button
        class="!bg-#fff !text-#C58C64 !ml-0 mr-24px !w-110px !h-48px !text-14px !fw-500 !b-rd-6px"
        @click="visible = false"
      >
        Cancel
      </el-button>
      <el-button
        class="!bg-#C58C64 !text-#fff !ml-0 !w-110px !h-48px !text-14px !fw-500 !b-rd-6px"
        @click="onSave"
      >
        Save
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="less">
.custom-remark-modal {
  .el-dialog {
    padding: unset !important;
    .el-dialog__header {
      padding: 0 !important;
      .el-dialog__headerbtn {
        right: 20px;
        top: 10px;
      }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      padding-bottom: 24px !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
    }
  }
}
</style>