搜索表单模板
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="width: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() },
表格删除一行
export default { data: { emptyList: [] }, methods: { addData() { this.emptyList.push({ id: 1, name: 'kevin', age: 20 }); }, removeData() { this.emptyList = []; } }} 还没有数据, 点击添加 删除
带有全选功能的表格：
当前选中：{
{JSON.stringify(checkeds)}}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="width: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") 确定