list.vue 3 KB
<template>
  <layout-page>
    <i-breadcrumb slot="breadcrumb">
      <i-breadcrumb-item>首页</i-breadcrumb-item>
      <i-breadcrumb-item>店铺列表</i-breadcrumb-item>
    </i-breadcrumb>
    <layout-content-card>
      <p slot="title">店铺列表</p>
      <div class="buttons">
        <i-button type="primary" @click="onBindUrl">获取授权链接</i-button>
      </div>
      <i-table :columns="columns" :data="eshop.eshops"></i-table>
    </layout-content-card>
    <modal-commit ref="modalCommit"></modal-commit>
    <modal-category ref="modalCategory"></modal-category>
    <modal-preview ref="modalPreview"></modal-preview>
  </layout-page>
</template>

<script>
import {mapState} from 'vuex';
import {Button} from 'iview';
import components from './components';

export default {
  name: 'EshopList',
  computed: {
    ...mapState(['eshop'])
  },
  data() {
    return {
      authType: '',
      columns: [{
        title: 'appId',
        key: 'authAppId'
      }, {
        title: '店铺ID',
        key: 'brandId'
      }, {
        title: '店铺名',
        key: 'brandName'
      }, {
        title: '操作',
        render: (h, {row}) => {
          return (
            <div>
              <i-button type="primary" onClick={() => this.commit(row)}>上传代码</i-button>
              &nbsp;&nbsp;
              <i-button type="success" onClick={() => this.preview(row)}>体验版</i-button>
              &nbsp;&nbsp;
              <i-button type="success" onClick={() => this.submitAudit(row)}>提交审核</i-button>
              &nbsp;&nbsp;
              <i-button type="warning" onClick={() => this.release(row)}>发布</i-button>
            </div>
          );
        }
      }],
      data: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$store.dispatch('eshop/fetchEshops');
    },
    preview(row) {
      this.$refs.modalPreview.show(row);
    },
    commit(row) {
      this.$refs.modalCommit.show(row);
    },
    submitAudit(row) {
      this.$refs.modalCategory.show(row);
    },
    release(row) {

    },
    async onBindUrl() {
      this.$Loading.start();
      const result = await this.$store.dispatch('eshop/fetchAuthUrl');

      this.$Loading.finish();
      if (result) {
        if (result.code === 200) {
          this.$Modal.info({
            title: '授权链接',
            render: () => {
              return (
                <div style="word-wrap: break-word; margin-top: 20px;">
                  <a href="https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid=wxe875c6c6552c1036&pre_auth_code=du6usNA_-W0q9HUeoChN6yE60SEUCUDxwofVJopszm23oqXAAC29VAoFAktkduGw&redirect_uri=https%3A%2F%2Fwxauth.yohops.com&auth_type=3">点击跳转到扫码授权页面</a>
                </div>
              );
            }
          });
        } else {
          this.$Message.warning(result.message);
        }
      }
    }
  },
  components: {Button, ...components}
};
</script>

<style lang="scss">
.buttons {
  margin-bottom: 20px;
}
</style>