項目搭建模板
阿新 • • 發佈：2017-10-12
mode control put arr mas column 分頁 mod turn
搜索表單模板
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="", ,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") 確定
項目搭建模板