list.vue
2.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<view>
<view class="top-nav">
<button v-for="(item,i) in nav" :data-v="i" @click="navChange" :key="i">{{item}}</button>
</view>
<view class="content">
<view v-for="(item,index) in list" class="msg-info" :key="index">
<image :mode="mode||item.mode" :src="item.src" @click="imgClick(index)"></image>
<view class="tip">{{item.text}}</view>
</view>
<!-- <view class='left'>
<view v-for="(item,index) in list" class="msg-info">
<image :mode="mode||item.mode" :src="src||item.src" @error="imageError"></image>
<view class="tip">{{text||item.text}}</view>
</view>
</view>
<view class="right">
<view v-for="(item,index) in list" class="msg-info">
<image :mode="mode||item.mode" :src="src||item.src" @error="imageError">
<view class="tip">{{text||item.text}}</view>
</image>
</view>
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
nav: ['全部', '双色球', '大乐透', '快乐8', '福彩3d', '排列3', '排列5', '七星彩'],
list: [],
mode: 'aspectFill'
}
},
async onLoad() {
const res = await uni.$u.request.post({
data: {
query: `query{lottery_shop_get_posters(module_id:0)}`
}
})
var data = res.data.data['lottery_shop_get_posters'].map(a => ({
text: a.title,
src: a.main_image_url,
mid: a.module_id,
id: a.id
}))
this.list = data;
},
methods: {
navChange(e) {
console.log(e.target.dataset.v)
},
imgClick(index) {
uni.setStorage({
key: 'tv_list_selected_img',
data: this.list[index]
})
uni.navigateTo({
url: '/tv/info?zq=zq',
});
}
}
}
</script>
<style scoped>
.top-nav {
display: flex;
padding: 2vw;
flex-wrap: wrap;
}
.top-nav button {
margin-top: 8px;
width: 20vw;
height: 30px;
line-height: 30px;
color: #666666;
background-color: rgb(241, 241, 241);
font-size: 14px;
font-weight: normal;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
}
.content .msg-info {
position: relative !important;
margin-top: 5px;
width: 49vw;
}
.content image {
width: 100%;
}
.content .tip {
position: absolute;
bottom: 0;
background: #f6fbfe;
opacity: 0.8;
width: 100%;
line-height: 50px;
height: 50px;
z-index: 9;
text-align: center;
white-space: nowrap;
overflow: hidden;
font-size: 16px;
}
</style>