项目搭建模板
搜索表单模板
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()
},
表格删除一行
<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="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") 确定
