qimall/addons/Happiness/client/views/cash/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-collection-code', __DIR__ . '/');
ComponentHelper::loadComponentView('com-export-dialog-syn');
ComponentHelper::loadComponentView('com-dialog-select-goods', __DIR__ . '/component');


?>

<div id="app" v-cloak>
    <el-card v-loading="loading" style="border:0" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="店铺收款码" name="collection-code">
                <?php ComponentHelper::loadComponentView('collection-code', __DIR__ . '/'); ?>
            </el-tab-pane>
            <el-tab-pane label="收款明细" name="collection-log">
                <?php ComponentHelper::loadComponentView('collection-log', __DIR__ . '/'); ?>
            </el-tab-pane>
        </el-tabs>


    </el-card>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        activeName: 'collection-code',
        basicForm: {
          store_id: 0,
          cashier_url: '',
        },
        exportList: {},
        export_url: '/index.php?r=happiness/client/cash/cashier-log',

        basicFormRules: {},
        loading: false,
        listLoading: false,
        submitLoading: false,
        dialogFormVisible: false,
        store_bank_form: {},
        formLabelWidth: '120px',
        list: [],
        pageCount: 0,
        pagination: null,
        page: 1,
        searchData: {
          min: '',
          max: '',
          keyword: '',
          start: '',
          end: '',
        },
        datetime: '',
        dialogTableVisible_fenRun: false,
        activeNames: 'commission',
        user_level: {},
        dialogVisible: false,
        applet_url: '',
        get_can_set_give_goods_list: 'happiness/client/cash/search-goods-data',
        select_item: {},
        is_show_drawer: false,
        drawer_data: [],

      };
    },
    mounted: function () {
      this.loadData();
    },
    methods: {
      select(data){
        console.log('选择的订单');
        console.log(data);
        this.select_item = data;
        this.$refs.selectGoods.click();
      },
      goodsSelect(data) {
        console.log('选择的商品');
        console.log(data);
        if(data.length == 0)
        {
          this.$message.error('请选择商品');
          return;
        }
        request({
          params: {
            r: 'happiness/client/cash/confirm-goods',
          },
          method: 'post',
          data: {
            order_id: this.select_item.id,
            goods_list: data,
          }
        }).then(e => {
          this.loading = false;
          if (e.data.code === 0) {
            this.$message.success(e.data.msg);
            this.getCollectionLog();
          } else {
            this.$message.error(e.data.msg);
          }
        }).catch(e => {
          this.$message.error('网络错误');
        });

      },
      loadData() {
        let self = this;
        request({
          params: {
            r: 'happiness/client/cash/index',
          },
        }).then(e => {
          self.loading = false;
          if (e.data.code === 0) {
            self.basicForm.store_id = e.data.data.store_id;
            self.export_url = e.data.data.export_url;
            self.basicForm.cashier_url = e.data.data.cashier_url;
          } else {
            self.$message.error(e.data.msg);
          }
        }).catch(e => {
          self.$message.error('网络错误');
        });
      },
      submit() {
        request({
          params: {
            r: 'happiness/client/cash/index',
          },
          method: 'post',
          data: {
            form: this.basicForm
          }
        }).then(e => {
          this.loading = false;
          if (e.data.code === 0) {
            this.$message.success(e.data.msg);
          } else {
            this.$message.error(e.data.msg);
          }
        }).catch(e => {
          this.$message.error('网络错误');
        });
      },
      showPromotionCode(id, fun) {
        setTimeout(() => {
          fun();
        }, 300)
      },
      showMiniPromotionCode(type) {
        request({
          params: {
            r: 'happiness/client/cash/show-mini-promotion-code',
          },
          data: {
            type: type
          },
          method: 'post'
        }).then(e => {
          if (e.data.code == 0) {
            this.dialogVisible = true
            this.applet_url = e.data.data.applet_url;
          } else {
            this.$message.error('操作失败');
          }
        }).catch(e => {
          this.$message.error('网络错误');
        });
      },
      handleClick(tab, event) {
        if (tab.name == 'collection-log') {
          this.getCollectionLog();
        }
      },
      getCollectionLog() {
        request({
          params: {
            r: 'happiness/client/cash/cashier-log',
            page: this.page,
            withdraw_status: this.searchData.withdraw_status,
            start: this.searchData.start,
            end: this.searchData.end,
            min: this.searchData.min,
            max: this.searchData.max,
            keyword: this.searchData.keyword,
          },
          method: 'get',
        }).then(e => {
          this.loading = false;
          if (e.data.code === 0) {
            this.list = e.data.data.list;
            this.exportList = e.data.data.export_list;
            this.pagination = e.data.data.pagination;
            this.pageCount = e.data.data.page_count;
          } else {
            this.$message.error(e.data.msg);
          }
        }).catch(e => {
          this.$message.error('网络错误');
        });
      },

      handle(data = null) {
        let id = data ? parseInt(data.id) : '';
        this.dialogTableVisible_fenRun = true;
        this.orderId = id;
        this.getCapitalLog(id, this.activeNames)
      },
      pageChange(currentPage) {
        this.page = currentPage;
        this.getCollectionLog();
      },
      showDrawer(is_show, detail) {
        this.is_show_drawer = is_show
        this.drawer_data = detail
      },
      search() {
        this.page = 1;
        if (this.date == null) {
          this.date = ''
        }
        this.getCollectionLog();
      },
      changeTime(e) {
        this.searchData.start = e[0]
        this.searchData.end = e[1]
      },
    },
    computed: {}
  });
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    /*.input-item .el-input__inner {*/
    /*    border-right: 0;*/
    /*}*/

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        /*border-right: 0;*/
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }

    .el-table th > .cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .el-table__footer-wrapper, .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .el-table th > .cell {
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    .table1 .el-table__footer-wrapper,
    .table1 .el-table__header-wrapper {
        border-bottom: 1.4px solid #D6D6D6;
    }

    .user_img {
        position: relative;
        margin-right: 8px;
        /* height: 50px;
        width: 50px; */
    }

    .default-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .uer-nickname {
        flex: 1;
    }

    .value_input .el-form-item__content {
        display: flex;
    }

    .value_input .el-input-group input {
        width: 58px;
        border-right: 0;
    }

    .value_input .el-input-group {
        display: flex;
        width: 100px;
    }

    .value_input .el-input-group__append {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
    }
</style>