proginn-frontend/pages/credit/query.vue

<template>
    <div class="credit-query-wrapper">
        <!-- 身份选择 -->
        <div class="identify-wrapper">
            <div class="identify-title">身份选择</div>
            <el-button-group>
                <el-button
                    class="identify-btn"
                    @click="handleClickIdentify('2')"
                    :class="{'active' : !isCompany}">查询我的</el-button>
                <el-button
                    class="identify-btn"
                    @click="handleClickIdentify('1')"
                    :class="{'active' : isCompany}">我查询的</el-button>
            </el-button-group>
        </div>
        <!-- 查询内容 -->
        <div class="credit-query-content">
            <div class="title-area">
                <div class="stitle">技术信用({{roleName}})</div>
                <div v-if="isCompany" class="stips">这是您查询他人的技术信用查询记录，共{{queryInfo.total || 0}}个 ，同意授权({{queryInfo.approved || 0}}) ，拒绝授权({{queryInfo.rejected || 0}}) </div>
                <div v-else class="stips">这是他人查询您的技术信用查询记录，共{{queryInfo.total || 0}}个 ，同意授权({{queryInfo.approved || 0}}) ，拒绝授权({{queryInfo.rejected || 0}}) </div>
                <div class="select-area">
                    <el-select v-model="selectedValue" placeholder="请选择" @change="changeSelect">
                        <el-option
                          v-for="item in selectOptionsNow"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="list-empty" v-if="!myList.length && isFirstLoad">
                <img src="@/assets/img/common/empty@2x.png" alt="empty">
                <span>暂无数据</span>
            </div>
            <div class="list" v-else-if="isCompany" id="list">
                <div class="cell" v-for="(item, index) in myList" :key="'myCellCompany'+index">
                    <div class="top">
                        <div class="left">
                            信用报告-{{item.id}}
                        </div>
                        <div class="right">
                            <div class="status" :class="{ok: Number(item.status) === 1, green: Number(item.status) === 2}">
                               <p v-if="Number(item.status) === 1">待授权</p>
                               <p v-else-if="Number(item.status) === 2">查询成功</p>
                               <p v-else>对方拒绝</p>
                            </div>
                        </div>
                    </div>
                    <div class="cBody">
                        <div class="left">
                            <p class="p4"><span>被查询人：</span>{{item.nickname}}</p>
                            <p class="p9" v-if="Number(item.status) ===2 ">
                                <span>技术信用报告：</span>
                                <span class="point" @click="handleClickCompanyPoint(item)">点击查看信用报告</span>
                            </p>
                            <p class="p5"><span>报告项: </span>{{item.items_name}}</p>
                            <p class="p6"><span>购买时间：</span>{{item.created_at}}</p>
                            <p class="p7"><span>支付费用：</span><span class="num">￥{{(item.real_price/100).toFixed(2)}}</span>元</p>
                            <p class="p8" v-if="Number(item.status) ===3 "><span>退款日期：</span><span class="date">{{item.updated_at}}</span></p>
                        </div>
                        <div class="right" style="cursor: pointer">
                            <div class="userInfo" @click="handleClickUser(item)">
                                <img :src="item.icon_url" alt="" />
                                <div class="uname">{{item.nickname}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list" v-else id="list">
                <div class="cell" v-for="(item, index) in myList" :key="'myCell'+index">
                    <div class="top">
                        <div class="left">
                            信用报告-{{item.id}}
                        </div>
                        <div class="right">
                            <div class="rightWord" v-if="Number(item.status) === 1">
                                <span>{{item.calcTime.h}}</span>小时<span>{{item.calcTime.m}}</span>分<span>{{item.calcTime.s}}</span>秒 内未回应对方系统将自动拒绝
                            </div>
                            <div class="status" :class="{ok: Number(item.status) === 2}" v-else>
                                <p>{{Number(item.status) === 2 ? "同意授权" : "拒绝授权"}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="cBody">
                        <div class="left">
                            <p class="p1">需求方 <span>{{item.nickname}}</span> 希望查看您的技术信用报告，请确认是否授权</p>
                            <p class="p2">授权报告内容：<span @click="handleClickPoint(item)">
                                {{item.lookUrl}}
                            </span></p>
                            <p class="p3">授权同意后您将直接获得一定数量的STD收益，token权益即将上线</p>
                        </div>
                        <div class="right" v-if="Number(item.status) === 1">
                            <div class="disAgree" @click="rejectOrder(item)">
                                <p>拒绝</p>
                            </div>
                            <div class="agree"  @click="approveOrder(item)">
                                <p>同意授权</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomArea">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="page.size"
                  :total="page.total"
                  @current-change="pageChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'creditQuery',
    data () {
        return {
            identify: '',
            selectedValue: -1,
            selectOptions: [
                {label: "全部", value: -1},
                {label: "待授权", value: 1},
                {label: "查询成功", value: 2},
                {label: "对方拒绝", value: 3},
            ],
            selectOptionsMy: [
                {label: "全部", value: -1},
                {label: "待授权", value: 1},
                {label: "已同意", value: 2},
                {label: "已拒绝", value: 3},
            ],
            page: {
                page: 1,
                size: 10,
                total: 0
            },
            queryInfo: {
                total: 0,
                waited: 0,
                approved: 0,
                rejected: 0,
            },
            myList: [],
            isFirstLoad: false
        }
    },
    computed: {
        isCompany () {
            return this.userinfo.home_page_type === '1'
        },
        roleName () {
            return this.isCompany ? '我查询的' : '查询我的'
        },
        selectOptionsNow () {
            return this.isCompany ? this.selectOptions : this.selectOptionsMy
        }
    },
    head () {
        return {
            title: '技术信用查询'
        }
    },
    created () {
        const query = this.$route.query || {}
        // this.identify = query.identify || '2'
    },
    mounted() {
        this.getCreditOrders()
    },
    methods: {
        getCreditOrders () {
            const self = this
            let data = {...self.page}
            if (self.selectedValue !== -1) {
                data.status = this.selectedValue
            }
            let loading = this.$loading({
                target: "#list",
            })

            this.$axios.$post('/api/user_credit/get_credit_orders', data).then(res => {
                if (Number(res.status) === 1) {
                    res.data.orders.forEach(item => {
                        item.lookUrl = location.origin + '/credit/detail/' + item.id
                        if (Number(item.status) === 1) {
                            item.calcTime = self.calcItemTime(item)
                        } else {
                            item.calcTime = {}
                        }
                    })
                    self.myList = [...res.data.orders]
                    self.queryInfo = {...res.data.count}
                    self.page.pgae += 1
                    self.page.total = Number(res.data.count.total)
                } else {
                    self.$message.error(res.info)
                }
            }, error => {
                console.log(error)
            }).then(() => {
                loading && loading.close()
                self.isFirstLoad = true
            })
        },
        calcItemTime (item) {
            try {
                let des = item.left_time
                return {
                    h: parseInt(des / 3600),
                    m: parseInt(des % 3600 / 60),
                    s: parseInt(des % 60 / 60),
                }
            } catch (e) {
                console.log(e)
                return {
                    h: 23,
                    m: 59,
                    s: 59
                }
            }
        },
        /** 拒绝 **/
        rejectOrder (item) {
            const self = this
            const { id } = item
            let loading = this.$loading({
                target: "#woCredit",
            })

            this.$axios.$post('/api/user_credit/reject', { id: id }).then((res) => {
                if (Number(res.status) === 1) {
                    self.$message.success('您已拒绝授权！')
                    self.getCreditOrders()
                } else {
                    self.$message.info(res.info)
                }
            }).then(() => {
                loading && loading.close()
            })
        },
        /** 接受 **/
        approveOrder (item) {
            const self = this
            const { id } = item
            let loading = this.$loading({
                target: "#woCredit",
            })

            this.$axios.$post('/api/user_credit/approve', { id: id }).then((res) => {
                if (Number(res.status) === 1) {
                    self.$message.success('授权成功！')
                    self.getCreditOrders()
                } else {
                    self.$message.info(res.info)
                }
            }).then(() => {
                loading && loading.close()
            })
        },
        changeSelect () {
            this.getCreditOrders()
        },
        pageChange (current) {
            this.page.page = current
            this.getCreditOrders()
        },
        /** 点击身份状态时 */
        handleClickIdentify (identify) {
            if (Number(identify) !== Number(this.identify)) {
                let type = this.isCompany ? 2 : 1

                this.$axios.$post('/api/user/update_info', { home_page_type: type }).then((res) => {
                    window.location.reload()
                })
                // if (Number(identify) === 1) {
                //     // 跳转到我查询的
                //     window.location.href = '/credit/query?identify=1'
                // } else if (Number(identify) === 2) {
                //     // 跳转到查询我的
                //     window.location.href = '/credit/query?identify=2'
                // }
            }
        },
        /** 我查询的：点击查看信用报告 */
        handleClickCompanyPoint (item) {
             window.open(item.lookUrl, 'showDetail' + item.id)
        },
        /** 查询我的： */
        handleClickPoint (item) {
            window.open(item.lookUrl, '_black')
        },
        /** 点击用户 */
        handleClickUser (item) {
            window.open('/wo/' + item.visited_uid)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/credit/query.scss";
</style>