shuhi-ui/src/views/recycleOrder/detail/order-book-list.vue

<template>
  <SimpleTable :columns="columns" border>
    <template #baseInfo="{ row }">
      <div class="base-info flex justify-between">
        <div class="base-info-left flex flex-1">
          <el-image
            style="width: 80px; height: 100px"
            fit="cover"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          />
          <div class="base-info-left-con flex flex-col items-start ml-3">
            <div><el-text type="primary">作物栽培</el-text></div>
            <div><el-text>ISBN：9787109261839</el-text></div>
            <div class="base-info-btns flex">
              <el-button
                size="small"
                color="#4f4f4f"
                @click="handleBlackList(row)"
                >加入黑名单</el-button
              >
              <el-button
                size="small"
                type="success"
                @click="handleAddBookList(row)"
                >加入回收书单</el-button
              >
              <el-button
                size="small"
                type="warning"
                @click="handleSpecifiedDiscount(row)"
                >指定回收折扣</el-button
              >
              <el-button
                size="small"
                color="#7728f5"
                @click="handleModifyDiscount(row)"
                >修改回收折扣</el-button
              >
            </div>
            <div
              ><el-text type="danger"
                >(已回收数量：200当前库存：75)</el-text
              ></div
            >
          </div>
        </div>
        <div class="base-info-right w-36 shrink-0">
          <div class="common-text flex">
            <el-text>定  价：</el-text>
            <el-text>¥ 46</el-text>
          </div>
          <div class="common-text flex">
            <el-text>回收折扣：</el-text>
            <el-text>¥ 0.35折</el-text>
          </div>
          <div class="common-text flex">
            <el-text>预估金额：</el-text>
            <el-text>¥ 1.61</el-text>
          </div>
          <div class="common-text flex">
            <el-text>销售价格：</el-text>
            <el-text>¥ 10.1</el-text>
          </div>
        </div>
      </div>
    </template>
    <template #action="{ row }">
      <div class="action-btns">
        <el-button class="mb-10" color="#4f4f4f" @click="">审核图片</el-button>
        <el-button
          class="mb-10"
          color="#a4adb3"
          @click="handleViewUrl(row, 'dd')"
          >查看当当</el-button
        >
        <el-button class="mb-10" color="#e99d42" @click="handleRecycleLog(row)"
          >回收日志</el-button
        >
        <el-button
          class="mb-10"
          color="#f27606"
          @click="handleViewUrl(row, 'tb')"
          >查看淘宝</el-button
        >
        <el-button color="#0f7dc7" @click="handleSalesLog(row)">售价日志</el-button>
        <el-button color="#399420" @click="handleViewUrl(row, 'db')"
          >查看豆瓣</el-button
        >
      </div>
    </template>
    <template #auditInfo="{ row }">
      <div class="audit-info flex justify-center">
        <el-radio-group v-model="row.auditInfo" style="width: 120px">
          <el-radio :value="1">品相良好</el-radio>
          <el-radio :value="2">品相一般</el-radio>
          <el-radio :value="3">品相极差</el-radio>
        </el-radio-group>
        <el-input
          v-model="row.textarea"
          style="width: 170px"
          :rows="4"
          type="textarea"
          placeholder="请输入品相极差的原因"
        />
      </div>
    </template>
  </SimpleTable>
  <orderSpecifiedDiscount ref="specifiedRef" />
  <orderModifyDiscount ref="modifyRef" />
  <orderBlacklist ref="blacklistRef" />
  <orderRecycleLog ref="recycleLogRef" />
  <orderSalesLog ref="salesLogRef" />
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
  import orderSpecifiedDiscount from '@/views/recycleOrder/detail/order-specified-discount.vue';
  import orderModifyDiscount from '@/views/recycleOrder/detail/order-modify-discount.vue';
  import orderBlacklist from '@/views/recycleOrder/detail/order-blacklist.vue';
  import orderRecycleLog from '@/views/recycleOrder/detail/order-recycle-log.vue';
  import orderSalesLog from '@/views/recycleOrder/detail/order-sales-log.vue';

  const columns = ref([
    {
      type: 'index',
      columnKey: 'index',
      width: 60,
      align: 'center'
    },
    {
      label: '信息',
      prop: 'baseInfo',
      slot: 'baseInfo',
      minWidth: 650,
      align: 'center'
    },
    {
      label: '操作',
      prop: 'action',
      slot: 'action',
      width: 220,
      align: 'center'
    },
    { label: '数量', prop: 'number', minWidth: 90, align: 'center' },
    {
      label: '审核信息',
      prop: 'auditInfo',
      slot: 'auditInfo',
      align: 'center',
      minWidth: 317
    },
    {
      label: '审核金额',
      prop: 'reviewedPayment',
      align: 'center',
      minWidth: 120
    }
  ]);

  //查看当当、淘宝、豆瓣链接
  const handleViewUrl = (row, type) => {
    let url = '';
    if (type == 'dd') {
      url = 'https://search.dangdang.com/?key=9787310027446&act=input';
    } else if (type == 'tb') {
      url =
        'https://s.taobao.com/search?page=1&q=9787310027446&sort=sale-desc&tab=all';
    } else if (type == 'db') {
      url =
        'https://search.douban.com/book/subject_search?search_text=9787310027446';
    }
    window.open(url, '_blank');
  };
  //加入回收书单
  const handleAddBookList = (row) => {
    ElMessageBox.confirm('确认加入回收书单？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    }).then(() => {
      console.log(row, 'row');
    });
  };
  //修改回收折扣
  const modifyRef = ref();
  const handleModifyDiscount = (row) => {
    modifyRef.value?.handleOpen(row);
  };
  //指定回收折扣
  const specifiedRef = ref();
  const handleSpecifiedDiscount = (row) => {
    specifiedRef.value?.handleOpen(row);
  };
  //加入黑名单
  const blacklistRef = ref();
  const handleBlackList = (row) => {
    blacklistRef.value?.handleOpen(row);
  };
  //查看回收日志
  const recycleLogRef = ref();
  const handleRecycleLog = (row) => {
    recycleLogRef.value?.handleOpen(row);
  };
  //查看售价日志
  const salesLogRef = ref();
  const handleSalesLog = (row) => {
    salesLogRef.value?.handleOpen(row);
  };
</script>

<style lang="scss">
  .mb-10 {
    margin-bottom: 7px;
  }
</style>