项目搭建模板

搜索表单模板

        au-panel(title="优惠券管理")
            au-form(label-width="100" label-position="top" inline)
                au-form-item(label="名称")
                    au-input(v-model="form.name" placeholder="请输入名称") 
                au-form-item(label="类型")
                    au-select(v-model="form.type" v-bind:options="typeOptions" placeholder="请选择类型") 
                au-form-item(label="状态")
                    au-select(v-model="form.status" v-bind:options="statusOptions" placeholder="请选择状态") 
                au-form-item
                    au-button(type="primary" @click="queryCoupon") 查　询
                    au-button(type="success" @click="goAddCoupon") 添　加

带有分页功能的表格

        au-panel
            au-table(:data="tableData", :loading="loading", max-height="500" bordered)
                au-table-column(label="编码" attr-name="id")
                au-table-column(label="名称" attr-name="name")
                au-table-column(label="类型")
                    template(scope="scope") {{ scope.data.type | couponType}}
                au-table-column(label="取现折扣率/现金券金额")
                    template(scope="scope")
                        span(v-if="scope.data.type == 0") {{scope.data.discountAmount}}
                        au-button(v-if="scope.data.type == 1" type="link" @click="goCouponConfig(scope.data.id)") 详情
                au-table-column(label="取现金额区间" attr-name="range")
                au-table-column(label="适用SKU" attr-name="sku")
                au-table-column(label="计划发放" attr-name="count")
                au-table-column(label="已发放" attr-name="sendCount")
                au-table-column(label="发放来源" attr-name="source")
                au-table-column(label="更新时间" attr-name="updateTime")
                au-table-column(label="状态")
                    template(scope="scope") {{ scope.data.status | couponStatus}}
                au-table-column(label="操作")
                    template(scope="scope")
                        au-button(type="link" @click="goCouponConfig(scope.data.id)") 配置&审核
                        au-button(type="link" @click="goCouponGrant(scope.data.id)") 发放
            au-pagination(v-model="pageNo", :item-count="itemCount", :page-size="pageSize" @change="changePage" show-total, v-if="tableData.length")

分页码

            au-pagination(v-model="pageNow",:item-count="itemCount",show-total,align='center',show-page-size-control,show-page-control,:page-size-options="[5,10,20,50]",:page-size="pageSize",@page-size-change="pageSizeChange",@change="getWithdrawOrders")

自定义布局的区块展示

        au-panel(title="优惠券发放")
            au-row(:gutter="10")
                au-col(:span="2") 发放对象
                au-col(:span="6") 
                    au-button(type="primary", href="/manager/yqy/manager/coupon/download", style="transform:translateY(-2px)") 下载导入模板
                    au-upload(@change="onChange" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" button-text="选择导入文件")
                au-col(:span="2")
                    au-button(type="info", :loading="uploading", :disabled="!formData", @click="uploadFile") 发 放

模态框

        au-modal(title="鉴权验证", :mask-closeable="false",v-model="showModal", width="485px")
            au-form(label-width="120",style="100%",label-position="left",:model="cardCheckInfo")
                au-form-item(label="姓名")
                    au-input(v-model="cardCheckInfo.realname",placeholder="输入姓名")
                au-form-item(label="身份证号")
                    au-input(v-model='cardCheckInfo.idcardNo',placeholder='请输入身份证号')
                au-form-item(label="银行卡号")
                    au-input(v-model='cardCheckInfo.bankCardNo',placeholder='请输入银行卡号')
                au-form-item(label="预留手机")
                    au-input(v-model='cardCheckInfo.mobile',placeholder='请输入用户预留手机')
                au-form-item(label="鉴权渠道")
                    au-select(v-model='cardCheckInfo.channel', placeholder="鉴权渠道")
                        au-option(label="小视",value="CH36")
                        au-option(label="华付",value="CH42")
                au-panel
                    p 验证结果：
                        span(:class='{"errorcode":retCode!="0000","successcode":retCode=="0000"}') {{result}}
                au-form-item
                    au-button(type='default',@click='closeModal') 取消
                    au-button(type='primary',@click="bankCardCheck") 查询

sspa的方法

        SSPA_componentRead:_=>{

        }

        SSPA_componentShow: function() {
            this.idcard = '';
            this.idCardUrl='';
            this.bankCardUrl='';
            this.ticationList=[];
            this.serch()
        },

表格删除一行

<au-table :data="emptyList">
  <div slot="empty">还没有数据, 点击
    <au-button size="mini" type="primary" @click="addData">添加</au-button>
  </div>
  <au-table-column label="ID" attr-name="id"></au-table-column>
  <au-table-column label="姓名" attr-name="name"></au-table-column>
  <au-table-column label="年龄" attr-name="age"></au-table-column>
  <au-table-column label="操作">
    <template scope="scope">
      <au-button type="danger" size="small" @click="removeData">删除</au-button>
    </template>
  </au-table-column>
</au-table>
export default {
  data: {
    emptyList: []
  },
  methods: {
    addData() {
      this.emptyList.push({
        id: 1,
        name: 'kevin',
        age: 20
      });
    },
    removeData() {
      this.emptyList = [];
    }
  }
}

带有全选功能的表格：

<au-table ref="table" :data="data" @select="messageSelect">
  <au-table-column type="checkbox" v-model="checkeds"></au-table-column>
  <au-table-column label="ID" attr-name="id"></au-table-column>
  <au-table-column label="Name" attr-name="name"></au-table-column>
  <au-table-column label="Age" attr-name="age"></au-table-column>
</au-table>
<p>当前选中：{{JSON.stringify(checkeds)}}</p>
const data = new Array(10);
for (let i = data.length - 1; i >= 0; i--) {
  data[i] = {
    id: i + 1,
    name: 'kevin',
    age: Math.round(Math.random() * 100)
  };
}
export default {
  data() {
    return {
      data,
      checkeds: [
        data[2],
        data[3]
      ]
    }
  }
}

如何实现区块的折叠

　　　　au-panel(title="认证信息" collapse)

上传图片的案例

        au-modal(:title="title", :mask-closeable="false",v-model="showModal",width="570px")
            au-form(label-width="130",style="100%",label-position="left", :model="itemInfo" , @submit="addOrEditItem", name='carouselDto')
                au-form-item(label="名称")
                    au-input(v-model="itemInfo.name",placeholder="输入名称，限10字",name="name",:class="{'border-red':itemInfo.name.length>10}")
                    p.tip(v-show='itemInfo.name.length>10') 名称最多输入10个字～
                au-form-item(label="图片")
                    au-upload(@change="onChange",accept="",v-model='carouselFile',name="carouselFile")
                au-panel(style="border:none;")
                    img#preview2(:src="itemInfo.picUrl",v-if="!carouselFile")
                    img#preview(src="", alt="",v-else)
                au-form-item(label="跳转地址")
                    au-input(v-model='itemInfo.url',placeholder='输入图片跳转地址(native或H5)',name="url")
                au-form-item(label="是否需要登录") 
                    au-radio(:value="1",v-model="itemInfo.isLogin",label="是")
                    au-radio(:value="0",v-model="itemInfo.isLogin",label='否')
                au-form-item
                    input(type="hidden",name="id",v-model="itemInfo.id")
                    au-button(type='default',@click='closeModal') 取消
                    au-button(type='primary', native-type="submit") 确定