lmk-shop-web.git

<template>
  <div class="management">
    <Card>
      <!-- 活动表格 -->
      <Form
        ref="searchForm"
 
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="会员昵称" prop="nickName">
          <Input
            type="text"
            v-model="searchForm.nickName"
            placeholder="请输入会员昵称"
            clearable
            style="width: 160px"
          />
        </Form-item>
        <Button
          @click="handleSearch"
          type="primary"
          icon="ios-search"
          class="search-btn"
        >搜索</Button>
      </Form>
 
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        class="table"
      >
        <template slot="sn" slot-scope="{ row }">
          <span>{{row.sn}}</span>
        </template>
        <!-- 操作按钮插槽 -->
        <template slot-scope="{ row }" slot="action">
          <div class="action-btns">
            <Button
              type="info"
              size="small"
              @click="showCardPack(row)"
            >礼品卡包</Button>
 
          </div>
        </template>
        <template  slot="nickName" slot-scope="{ row }">
            <span >{{row.nickName}}</span>
        </template>
      </Table>
 
      <!-- 分页 -->
      <Row type="flex" justify="end" class="page-footer">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
 
      <!-- 模态框 -->
      <Modal
        v-model="modelShow"
        title="礼包卡"
        @on-cancel="modelClose"
        width="1000"
        class="modal"
      >
        <Form
          ref="cardPackForm"
          :model="cardPackListForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="领取人名称" prop="userNickName">
            <Input
              type="text"
              v-model="cardPackListForm.userNickName"
              placeholder="请输入会员昵称"
              clearable
              style="width: 160px"
            />
          </Form-item>
          <Form-item label="商品名称" prop="skuName">
            <Input
              type="text"
              v-model="cardPackListForm.skuName"
              placeholder="请输入会员昵称"
              clearable
              style="width: 160px"
            />
          </Form-item>
          <Button
            @click="cardPackLisHandleSearch"
            type="primary"
            icon="ios-search"
            class="search-btn"
          >搜索</Button>
        </Form>
        <Table
          :loading="cardPackLoading"
          border
          :columns="cardPackColumns"
          :data="cardPackList"
          class="table"
 
        ></Table>
        <Row type="flex" justify="end" class="page-footer">
          <Page
            :current="cardPackListForm.pageNumber"
            :total="cardPackTotal"
            :page-size="cardPackListForm.pageSize"
            @on-change="cardPackChangePage"
            @on-page-size-change="cardPackPageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </Modal>
    </Card>
  </div>
</template>
 
<script>
import { getCardPackData } from '@/api/cardPack'
import { getOrderList }  from '@/api/order'
export default {
  name: "CarPack",
  data() {
    return {
      modelShow:false,
 
      loading: false,
      cardPackLoading: false,
      // 搜索表单
      searchForm: {
        nickName:'',
        couponFlag: 'COUPON',
        pageNumber: 1,
        pageSize: 10
      },
      cardPackListForm:{
        skuName:'',
        userNickName:'',
        orderId:'',
        pageNumber: 1,
        pageSize: 10
      },
      //列表数据
      data: [],
      cardPackList:[],
      total: 0,
      cardPackTotal:0,
      // 表格列配置
      columns: [
        {
          title: "订单号",
          key: "sn",
          minWidth: 240,
          tooltip: true,
          slot: 'sn'
        },
 
        {
          title: "订单来源",
          key: "clientType",
          width: 120,
          render: (h, params) => {
            if (params.row.clientType == "H5") {
              return h("div", {}, "移动端");
            } else if (params.row.clientType == "PC") {
              return h("div", {}, "PC端");
            } else if (params.row.clientType == "WECHAT_MP") {
              return h("div", {}, "小程序端");
            } else if (params.row.clientType == "APP") {
              return h("div", {}, "移动应用端");
            } else {
              return h("div", {}, params.row.clientType);
            }
          },
        },
        {
          title: "订单类型",
          key: "orderPromotionType",
          width: 120,
          render: (h, params) => {
            if (params.row.orderPromotionType == "NORMAL") {
              return h("div", [
                h("tag", { props: { color: "blue" } }, "普通订单"),
              ]);
            } else if (params.row.orderPromotionType == "PINTUAN") {
              return h("div", [
                h("tag", { props: { color: "volcano" } }, "拼团订单"),
              ]);
            } else if (params.row.orderPromotionType == "GIFT") {
              return h("div", [
                h("tag", { props: { color: "green" } }, "赠品订单"),
              ]);
            } else if (params.row.orderPromotionType == "POINTS") {
              return h("div", [
                h("tag", { props: { color: "geekblue" } }, "积分订单"),
              ]);
            } else if (params.row.orderPromotionType == "KANJIA") {
              return h("div", [
                h("tag", { props: { color: "pink" } }, "砍价订单"),
              ]);
            }
          },
        },
        {
          title: "买家名称",
          key: "nickName",
          minWidth: 130,
          tooltip: true,
          slot:'nickName'
        },
 
        {
          title: "订单金额",
          key: "flowPrice",
          minWidth: 100,
          tooltip: true,
          render: (h, params) => {
            return h("priceColorScheme", {props:{value:params.row.flowPrice,color:this.$mainColor}} );
          },
 
        },
 
        {
          title: "订单状态",
          key: "orderStatus",
          minWidth: 100,
          render: (h, params) => {
            if (params.row.orderStatus == "UNPAID") {
              return h("div", [
                h("tag", { props: { color: "magenta" } }, "未付款"),
              ]);
            } else if (params.row.orderStatus == "PAID") {
              return h("div", [
                h("tag", { props: { color: "blue" } }, "已付款"),
              ]);
            } else if (params.row.orderStatus == "UNDELIVERED") {
              return h("div", [
                h("tag", { props: { color: "geekblue" } }, "待发货"),
              ]);
            } else if (params.row.orderStatus == "STAY_PICKED_UP") {
              return h("div", [
                h("tag", { props: { color: "geekblue" } }, "待自提"),
              ]);
            } else if (params.row.orderStatus == "DELIVERED") {
              return h("div", [
                h("tag", { props: { color: "cyan" } }, "已发货"),
              ]);
            } else if (params.row.orderStatus == "COMPLETED") {
              return h("div", [
                h("tag", { props: { color: "green" } }, "已完成"),
              ]);
            } else if (params.row.orderStatus == "TAKE") {
              return h("div", [
                h("tag", { props: { color: "volcano" } }, "待核验"),
              ]);
            } else if (params.row.orderStatus == "CANCELLED") {
              return h("div", [
                h("tag", { props: { color: "red" } }, "已关闭"),
              ]);
            }
          },
        },
        {
          title: "下单时间",
          key: "createTime",
          width: 170,
        },
        {
          title:"收货人",
          key:"consigneeName",
          width: 170,
        },
        {
          title:"手机号",
          key:"consigneeMobile",
          width: 170,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 150,
          fixed:"right",
          render: (h, params) => {
            const buttons = [];
 
            // 查看按钮 - 始终显示
            buttons.push(
              h(
                "Button",
                {
                  props: { type: "info", size: "small" },
                  style: { marginRight: "5px" },
                  on: {
                    click: () => {
                      this.showCardPack(params.row);
                    },
                  },
                },
                "查看"
              )
            );
            return h('div', buttons);
          },
        },
      ],
 
      cardPackColumns : [
        {
          title: '优惠券ID',
          key: 'couponId',
          align: 'center',
          width: 180
        },
        {
          title: '优惠券名称',
          key: 'couponName',
          align: 'center',
          width: 120
        },
        {
          title: '优惠券编号',
          key: 'couponNo',
          align: 'center',
          width: 120
        },
        {
          title: '商品名称',
          key: 'skuName',
          align: 'center',
          width: 120
        },
        {
          title: '订单ID',
          key: 'orderId',
          align: 'center',
          width: 220
        },
        {
          title: '领取状态',
          key: 'claimStatus',
          align: 'center',
          width: 120,
          // 转换claimStatus显示文本
          render: (h, params) => {
            const status = params.row.claimStatus;
            let text = '未知';
            let color = '#999';
 
            if (status === 'CLAIM') {
              text = '已领取';
              color = '#00B42A';
            } else if (status === 'NOT_CLAIM') {
              text = '未领取';
              color = '#FF7D00';
            }
 
            return h('span', {
              style: { color }
            }, text);
          }
        },
        {
          title: '领取人',
          key: 'userNickName',
          align: 'center',
          minWidth: 80
        },
        {
          title: '分享状态',
          key: 'shareStatus',
          align: 'center',
          minWidth: 120,
          // 转换shareStatus显示文本
          render: (h, params) => {
            const status = params.row.shareStatus;
            let text = '未知';
            let color = '#999';
 
            if (status === 'SHARE') {
              text = '已分享';
              color = '#00B42A';
            } else if (status === 'NOT_SHARE') {
              text = '未分享';
              color = '#FF7D00';
            }
 
            return h('span', {
              style: { color }
            }, text);
          }
        }
      ],
    }
  },
  mounted(){
    //初始化
    this.getData();
  },
  methods: {
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    cardPackLisHandleSearch(){
      this.cardPackListForm.pageNumber = 1;
      this.cardPackListForm.pageSize = 10;
 
      this.getCardPackData()
    },
    cardPackChangePage(page) {
      this.cardPackListForm.pageNumber = page
      this.getCardPackData()
    },
 
    // 改变每页条数
    cardPackPageSize(pageSize) {
      this.cardPackListForm.pageNumber = 1
      this.cardPackListForm.pageSize = pageSize
      this.getCardPackData()
    },
 
 
    changePage(page) {
      this.searchForm.pageNumber = page
      this.getData()
    },
 
    // 改变每页条数
    changePageSize(pageSize) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = pageSize
      this.getData()
    },
 
    getData(){
      this.loading = true;
      getOrderList(this.searchForm).then(res =>{
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
        }
      })
    },
    showCardPack(row){
      this.modelShow = true;
      this.cardPackListForm.orderId = row.sn;
      //重置页码
      this.cardPackListForm.pageSize = 10;
      this.cardPackListForm.pageNumber=1;
      this.cardPackTotal = 0;
      this.getCardPackData()
 
    },
    getCardPackData(){
      //获得数据
      this.cardPackLoading = true;
      getCardPackData(this.cardPackListForm).then(res =>{
        this.cardPackLoading = false;
        if (res.code === 200){
          this.cardPackList = res.data;
          this.cardPackTotal = res.total;
        }
      })
    },
 
    modelClose(){
      this.modelShow = false
    }
 
  }
}
</script>
 
<style lang="scss" scoped>
 
</style>