|
@@ -0,0 +1,204 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="header-container">
|
|
|
+ <switchseason class="switchseason" @switchseason="switchseason" />
|
|
|
+ <el-input v-model="params.challenge_name" type="text" placeholder="挑战者昵称/手机号" style="width:300px" />
|
|
|
+ <el-input v-model="params.accept_name" type="text" placeholder="应战人昵称/手机号" style="width:300px" />
|
|
|
+ <el-button type="primary" @click="params.page_index = 1; getList()">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ :data="list"
|
|
|
+ style="width: 100%;margin: 20px 0"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ type="index"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ :index="params.page_size * (params.page_index - 1) + 1"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="u_name"
|
|
|
+ label="挑战人昵称"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="u_phone"
|
|
|
+ label="挑战人手机号"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="uu_name"
|
|
|
+ label="应战人昵称"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="uu_phone"
|
|
|
+ label="应战人手机号"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="is_pay"
|
|
|
+ label="挑战失败红包"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="challenge_num"
|
|
|
+ label="挑战卖货数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="challenge_inte"
|
|
|
+ label="挑战获胜学分"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="challenge_time"
|
|
|
+ label="挑战时间"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="查看详情"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button type="primary" @click="handleInfo(row)">查看详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ :total="total"
|
|
|
+ :page-size="params.page_size"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ title="挑战详情"
|
|
|
+ :visible.sync="challengeInfo"
|
|
|
+ :before-close="resetInfo"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" class="info-header">
|
|
|
+ <span>挑战人: {{ info.challenge_name }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="info-header">
|
|
|
+ <span>应战人: {{ info.accept_name }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <p>竞猜人: </p>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <p v-for="item in info.challenge" :key="item.id">
|
|
|
+ {{ item.nickname }}
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <p v-for="item in info.accept" :key="item.id">
|
|
|
+ {{ item.nickname }}
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getList, getInfo } from '@/api/challenge'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ params: {
|
|
|
+ page_index: 1,
|
|
|
+ page_size: 15,
|
|
|
+ challenge_name: '',
|
|
|
+ accept_name: '',
|
|
|
+ // season: this.$store.state.user.season_list[0].season
|
|
|
+ season: ''
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ challengeInfo: false,
|
|
|
+ info: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ season_list() {
|
|
|
+ return this.$store.state.user.season_list
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ switchseason(index) { // 切换赛季
|
|
|
+ this.params.season = this.season_list[index].season
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(page) { // 换页
|
|
|
+ this.loading = true
|
|
|
+ this.params.page_index = page
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ this.loading = true
|
|
|
+ await getList(this.params).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.list = res.data.list
|
|
|
+ this.total = res.data.total
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data)
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async handleInfo(row) {
|
|
|
+ this.loading = true
|
|
|
+ await getInfo({ id: row.id }).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.info = res.data
|
|
|
+ this.challengeInfo = true
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data)
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ resetInfo() {
|
|
|
+ this.challengeInfo = false
|
|
|
+ this.info = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .header-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /deep/ .el-input {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .switchseason {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-header {
|
|
|
+ padding: 10px 0;
|
|
|
+ background: #409EFF;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ // margin-left: 20px;
|
|
|
+ background: #67C23A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|