123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <view class="u-page">
- <view class="u-page__top-box">
- <text class="u-demo-block__title">演示效果</text>
- </view>
- <u-empty
- :mode="mode"
- :icon="imgList[mode]"
- >
- <u-button
- size="small"
- type="primary"
- :style="{marginTop:10+'px'}"
- v-if="mode=='car'"
- text="查看更多商品"
- >
- </u-button>
- </u-empty>
- <div class="empty-select">
- <u-cell
- :titleStyle="{fontWeight: 500}"
- @click="openImg(item.imgName)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </div>
- </view>
- </template>
- <script>
- export default {
- data() {
- // 如果使用这些图片,请勿直接引入cdn.uviewui.com的资源,因为此资源路径随时会有变动
- // 变动后,您将会访问图片失败,如有需要,您可以将这些图片上传到自己的oss或者服务器再使用
- const baseUrl = 'http://cdn.uviewui.com/uview/empty/'
- return {
- mode: 'car',
- imgList: {
- car: baseUrl + 'car.png',
- address: baseUrl + 'address.png',
- comment: baseUrl + 'comment.png',
- coupon: baseUrl + 'coupon.png',
- data: baseUrl + 'data.png',
- history: baseUrl + 'history.png',
- list: baseUrl + 'list.png',
- message: baseUrl + 'message.png',
- news: baseUrl + 'news.png',
- order: baseUrl + 'order.png',
- page: baseUrl + 'page.png',
- permission: baseUrl + 'permission.png',
- search: baseUrl + 'search.png',
- wifi: baseUrl + 'wifi.png',
- },
- list: [{
- imgName: 'car',
- title: '购物车为空(同时传入slot)',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/car.png'
- },
- {
- imgName: 'data',
- title: '数据为空',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/data.png'
- }, {
- imgName: 'comment',
- title: '评论为空',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/comment.png'
- }, {
- imgName: 'coupon',
- title: '没有优惠券',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/coupon.png'
- }, {
- imgName: 'history',
- title: '无历史记录',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/history.png'
- }, {
- imgName: 'list',
- title: '列表为空',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/list.png'
- }, {
- imgName: 'message',
- title: '消息列表为空',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/message.png'
- }, {
- imgName: 'news',
- title: '无新闻列表',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/news.png'
- }, {
- imgName: 'order',
- title: '订单为空',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/order.png'
- }, {
- imgName: 'page',
- title: '页面不存在',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/page.png'
- }, {
- imgName: 'permission',
- title: '无权限',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/permission.png'
- }, {
- imgName: 'search',
- title: '没有搜索结果',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/search.png'
- }, {
- imgName: 'wifi',
- title: '没有WiFi',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/wifi.png'
- },
- ]
- }
- },
- methods: {
- //点击改变图片
- openImg(imgName) {
- // this.mode = this.imgList[imgName]
- this.mode = imgName;
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 40rpx 0px;
- &__top-box {
- padding-left: 40rpx;
- }
- }
- .empty-select {
- margin-top: 10px;
- }
- </style>
|