cashier-mer/src/views/saleOrder/indexList.vue

<script setup>
import { ref } from "vue";
import {
  orderListApi,
  orderStatusApi,
  orderLadingApi,
  cartListApi
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import pay from "@/components/pay.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const userStore = useUserStore();
const orderList = ref([]);
const router = useRouter();

const tabPosition = ref(1); // 1-全部, 2-未支付
const payRef = ref(null);

const where = ref({
  page_no: 1,
  page_size: 20,
});

const loading = ref(false);
const total = ref(0);

const getOrderList = () => {
  loading.value = true;
  if (tabPosition.value == 1) where.value.paid = null;
  if (tabPosition.value == 2) where.value.paid = 0;
  orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
    orderList.value = res.data.list;
    total.value = res.data.count;
    loading.value = false;
  });
};

getOrderList();


const cartCount = ref(0);
const getCartList = () => {
  cartListApi({
      staff_id: userStore.userInfo.service.service_id,
  }).then((res) => {
    cartCount.value = res.data.list?.length;
  });
};
getCartList();

const changeTabPosition = (e) => {
  where.value.page_no = 1;
  getOrderList();
};

const prevClick = (e) => {
  where.value.page_no = e;
  getOrderList();
};

const nextClick = (e) => {
  where.value.page_no = e;
  getOrderList();
};

const currentChange = (e) => {
  where.value.page_no = e;
  getOrderList();
};

const paySuccess = () => {
  getOrderList();
};

const rePay = (row) => {
  payRef.value.setRePay({
    price: row.pay_price,
    order_id: row.group_order_id,
  });
  payRef.value.drawer = true;
};

const getOrderStatus = (id) => {
  orderStatusApi({
    order_sn: id,
  })
    .then((res) => {
      if (res.data.paid == 1 || res.message == "支付成功") {
        ElMessage({
          message: res.message,
          type: "success",
        });
        getOrderList();
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch((err) => {});
};

const orderLadingSn = ref('')
const orderLading = () => {
  dialogVisible.value = false;
  orderLadingApi({
    order_sn: orderLadingSn.value,
  }).then((res) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
    router.push({
      name: "home",
    });
  });
};

const dialogVisible = ref(false);
const orderLadingComfirm = (order_sn)=>{
  orderLadingSn.value = order_sn;
  dialogVisible.value = true;
}

const goHome = ()=>{
  router.push({
      name: "home",
    });
}
</script>

<template>
  <div v-loading="loading" element-loading-text="加载中" class="my-order">
    <el-radio-group
      v-model="tabPosition"
      style="margin-bottom: 30px"
      @change="changeTabPosition"
    >
      <el-radio-button :value="1">全部</el-radio-button>
      <el-radio-button :value="2">未支付</el-radio-button>
    </el-radio-group>
    <el-table :data="orderList" style="width: 100%">
      <el-table-column prop="group_order_id" label="ID" width="100" />
      <el-table-column prop="order_sn" label="订单号" width="260" />
      <el-table-column prop="total_price" label="订单金额" />
      <el-table-column prop="paid" label="支付状态">
        <template #default="scope">
          <span v-if="scope.row.paid == 1">已支付</span>
          <span v-else style="color: #ff4a00">未支付</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="订单创建时间" />
      <el-table-column prop="pay_time" label="订单支付时间">
        <template #default="scope">
          <span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
          <div v-else class="flex">
            <el-button type="primary" link @click="rePay(scope.row)"
              >重新支付</el-button
            >
            <el-button
              type="primary"
              link
              @click="getOrderStatus(scope.row.order_sn)"
              >检测状态</el-button
            >
            <el-button
              type="primary"
              link
              @click="orderLadingComfirm(scope.row.order_sn)"
              >提单</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page_no-size="where.page_size"
      layout="prev, pager, next"
      :total="total"
      @prev-click="prevClick"
      @next-click="nextClick"
      @current-change="currentChange"
    />
    <pay ref="payRef" @paySuccess="paySuccess" />
    <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="500"
    >
      <span>提单前请清空购物车, 避免提单的商品与购物车商品混合, 请确保购物车内无数据后再进行提单</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="cartCount>0" @click="goHome">
            前去清空购物车
          </el-button>
          <el-button v-else type="primary" @click="orderLading">
            确认提单
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.my-order {
  background-color: #fff;
  border-radius: 1.2rem;
  box-sizing: border-box;
  padding: 1rem;
  overflow-y: scroll;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 0.315rem; /* 设置滚动条的宽度 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 1.25rem 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 0.315rem; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>