刮刮前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

95 lines
2.3 KiB

<template>
<view style="padding-top: 10px;">
<view v-for="(item,index) in typeGoodsList" :key="index" class="dis-flex-between-center goods-item">
<view class="">
<image :src="item.cover_image" mode="aspectFill"></image>
</view>
<view class="goods-info">
<view class="" style="color: #333;font-size: 16px;">{{item.title}}</view>
<view class="">面值{{item.price}}元</view>
<view class="">最高中奖金额{{item.max_awards_amount}}</view>
</view>
<view class="btn" @click="toUrl(item)">立即刮奖</view>
</view>
</view>
</template>
<script>
import API from '@/common/js/api.js'
export default {
data() {
return {
id: '',
type: '20元',
typeGoodsList: [
// {cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
// {cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
// {cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", },
// {cover_image:'../../static/home/tem11.png', title: '超级加倍', "id": 1, "important": "最高奖金100万元", "price": "20.00", }
],
}
},
methods: {
toUrl(item){
uni.navigateTo({
url:'/pages/scratchCard/scratchCard?id='+item.id+'&type='+this.type
})
},
getGoodsList(){
API.getGoodsList({zone_id: this.id}, res=>{
console.log(res);
this.typeGoodsList = res.data;
})
}
},
onLoad(e) {
uni.setNavigationBarTitle({
title: e.type,
// +'元专区'
})
this.type = e.type;
this.id = e.id;
this.getGoodsList();
}
}
</script>
<style lang="scss" scoped>
.dis-flex-between-center{
display: flex;
justify-content: space-between;
align-items: center;
}
.goods-item{
height: 88px;
padding: 10px 13px;
color: #999;
font-size: 14px;
>view{
height: 88px;
}
image{
width: 138px;
height: 88px;
border-radius: 10px;
}
.goods-info{
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0px 5px;
flex: 1;
}
.btn{
width: 78px;
height: 40px;
background-color: #e33838;
border-radius: 5px;
font-size: 14px;
color: #fff;
line-height: 40px;
text-align: center;
}
}
</style>