## 組件名：我的活動組件 ### 作者：毛濤 ### 效果：  ### 使用方式： ``` <div v-for="(item,?index)?in list"?:key="item.title?+?index" class="list"> <hs-order-content border?:other-info="item.info" titleborder :obj="item"?@onClick="onClickOrder"> <templateslot="other-info"> <img v-if="!status"? :src="item.status?==?1???item.qrCode:?item.status?==?2??imgList.audited:?item.status?==?3??imgList.yiguoqi:?''" alt=""> <img v-else-if="status?==?'1'"?:src="item.qrCode" alt="" /> <img v-else?:src="imgList[imgName]" alt=""/> <div v-if="item.status?==?1" class="ecode">二維碼驗票</div> </div> </template> </hs-order-content> ### 引用文件： import hsOrderContent from './personal-center/hs-order-content.vue' ### 數據格式： data()?{ return?{ list:?[{ id:0, status:2, img:'http://via.placeholder.com/1920x678', num:'4121251241', time:'2020.08.20', title:'odk', orderNumber:'135616543A',?//?訂單號 orderTime:'2020.08.08',?//?訂單時間 info:?[ ???????????['時間：',?'2020-10-21'], ???????????['地點：',?'長沙市岳麓區'], ????????????['數量：',?'2222張'], ????????????['預定人：',?'huadfasdfgh'], ????????????['手機：',?'888111188888'] ??????????] ????????}], imgList:?{ audited:require('@/assets/imgs/audit-status/audited.png'),?//?2.已使用（已核銷） yiguoqi:require('@/assets/imgs/audit-status/yiguoqi.png')?//?3.已過期 ??????}, status:0 ????} ??} ``` ### 提示： 組件內有插槽，可加自定義，數據不傳不顯示 ### 參數： | 參數 | 作用 | 類型 | 默認 | 是否必傳 | 屬性 | | --- | --- | --- | --- | --- | --- | |???border|??列表是否顯示邊框|??boolean| false??|???|???| |?otherInfo|?相關信息展示?|??Array?|??|??是?|???| |?titleshow|??是否展示標題?|??Boolean|??true|???|???| |?titleborder |??標題邊框?|??boolean|?false?|???|???| |?obj |??數據|??Object|?|是???|???| ### 事件 | 事件 |說明 | | --- | --- | | onClick| 列表點擊事件 |