## 组件名：我的活动组件 ### 作者：毛涛 ### 效果：  ### 使用方式： ``` <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| 列表点击事件 |