|
@@ -1,16 +1,25 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <uni-collapse>
|
|
|
- <uni-collapse-item title="标题文字"
|
|
|
- thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
|
|
+ <uni-collapse class="collapse" v-model="collapseArr" @change="change">
|
|
|
+ <uni-collapse-item
|
|
|
+ class="collapseItem"
|
|
|
+ v-for="(item, index) in prizeUserList"
|
|
|
+ :title="item.userName"
|
|
|
+ :thumb="item.userAvtar"
|
|
|
+ :show-arrow="false"
|
|
|
+ >
|
|
|
+ <template v-slot:title>
|
|
|
+ <view class="collapseTitle">
|
|
|
+ <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
|
|
|
+ <span class="text">{{item.userName, 'item.userName'}}</span>
|
|
|
+ <image v-if="collapseShow(index)" class="icon" :src="$fileUrl() + '/drawCard_fullSet/icon4.png'" mode="widthFix"></image>
|
|
|
+ <image v-else class="icon" :src="$fileUrl() + '/drawCard_fullSet/icon5.png'" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
<view class="content">
|
|
|
- <text class="text">折叠内容主体,可自定义内容及样式</text>
|
|
|
- </view>
|
|
|
- </uni-collapse-item>
|
|
|
- <uni-collapse-item title="标题文字"
|
|
|
- thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
|
|
|
- <view class="content">
|
|
|
- <text class="text">折叠内容主体,可自定义内容及样式</text>
|
|
|
+ <view class="item" v-for="(item2, index2) in item.prizes">
|
|
|
+ <image class="img" :src="item2.prizeIcon" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</uni-collapse-item>
|
|
|
</uni-collapse>
|
|
@@ -18,18 +27,134 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ prizeUserListApi
|
|
|
+ } from "@/api/drawCard.js"
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
-
|
|
|
+ return {
|
|
|
+ collapseArr: [],
|
|
|
+ params: {
|
|
|
+ limit: 9999,
|
|
|
+ page: 1,
|
|
|
+ raffleId: null
|
|
|
+ },
|
|
|
+ prizeUserList: [],
|
|
|
+ userIds: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ console.log(query, 'query')
|
|
|
+ if (query.raffleId) {
|
|
|
+ this.params.raffleId = query.raffleId
|
|
|
+ this.getPrizeUserList()
|
|
|
+ }
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
- methods: {
|
|
|
+ computed: {
|
|
|
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ collapseShow(index) {
|
|
|
+ console.log(this.collapseArr, 'this.collapseArr')
|
|
|
+ let i = index + ""
|
|
|
+ let b = false
|
|
|
+ if (this.collapseArr.indexOf(i) != -1) {
|
|
|
+ b = true
|
|
|
+ }
|
|
|
+ return b
|
|
|
+ },
|
|
|
+ change() {
|
|
|
+ // console.log(this.collapseArr, 'this.collapseArr')
|
|
|
+ },
|
|
|
+ getPrizeUserList() {
|
|
|
+ prizeUserListApi(this.params).then(res => {
|
|
|
+ console.log(res, '中奖记录')
|
|
|
+ let userIds = []
|
|
|
+ let list = []
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ let item = res.data[i]
|
|
|
+ if (userIds.indexOf(item.userId) == -1) {
|
|
|
+ userIds.push(item.userId)
|
|
|
+ console.log(userIds.indexOf(item.userId))
|
|
|
+ let index = userIds.indexOf(item.userId)
|
|
|
+ list[index] = {
|
|
|
+ userId: item.userId,
|
|
|
+ userAvtar: item.userAvtar,
|
|
|
+ userName: item.userName,
|
|
|
+ prizes: [],
|
|
|
+ }
|
|
|
+ list[index].prizes.push(item)
|
|
|
+ } else {
|
|
|
+ let index = userIds.indexOf(item.userId)
|
|
|
+ list[index].prizes.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.userIds = userIds
|
|
|
+ this.prizeUserList = list
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+ .collapseItem {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 0 10px 10px 10px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .collapseTitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
+ grid-gap: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ .item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(180deg, #FAF1A7 0%, #FFE456 100%);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ height: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+ .collapse >>> .uni-collapse {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .collapse >>> .uni-collapse-item__wrap {
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
+ }
|
|
|
</style>
|