84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="product-list" >
|
||
|
|
<view class="product-item" v-for="(item, index) in listData" :key="index" :class="{'is-have': item.isHave === 0}">
|
||
|
|
<image :src="item.img" mode="aspectFit" ></image>
|
||
|
|
<view class="product-time">
|
||
|
|
{{ item.name }}
|
||
|
|
</view>
|
||
|
|
<view class="product-time">
|
||
|
|
{{ item.haveTime }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
listData: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.listData = [];
|
||
|
|
this.getData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
let self = this;
|
||
|
|
self.loading = true;
|
||
|
|
uni.showLoading({
|
||
|
|
title: self.$t('MN_F_6')
|
||
|
|
});
|
||
|
|
self._get('member/api/member/member-honor-wall-all', {
|
||
|
|
|
||
|
|
}, res => {
|
||
|
|
self.listData = res.rows;
|
||
|
|
console.log(self.listData);
|
||
|
|
self.loading = false;
|
||
|
|
uni.hideLoading();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.product-list {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 25rpx 25rpx 60rpx 24rpx;
|
||
|
|
background-color: rgb(169, 155, 129);
|
||
|
|
}
|
||
|
|
.product-list .product-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 320rpx;
|
||
|
|
height: 340rpx;
|
||
|
|
padding: 0 15rpx 25rpx 0;
|
||
|
|
background: #e6e6e6;;
|
||
|
|
box-shadow: 0rpx 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||
|
|
border-radius: 25rpx;
|
||
|
|
margin-bottom: 26rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.product-list .product-item image{
|
||
|
|
width: 208rpx;
|
||
|
|
height: 298rpx;
|
||
|
|
margin-left: 60rpx;
|
||
|
|
}
|
||
|
|
.product-list .product-item .product-time{
|
||
|
|
text-align:center;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.product-list .product-item.is-have {
|
||
|
|
background-image: radial-gradient( #D59F4C,#F5CB90,#E3B26A);
|
||
|
|
background-color: #F5CB90;
|
||
|
|
}
|
||
|
|
</style>
|