1112

DESKTOP-CVS3R96\我恁爹

2022-11-12 8ac736966cb9748724123373cf517c19d79b8f70

 src/page/funds/xingu.vue

@@ -1,469 +0,0 @@
<template>
    <div class="wrapper">

        <div class="funds-list">
            <div style="display: flex;width: 80%;justify-content: space-between;margin: 0 auto;">
                <div class="funds-list-title" @click="shengouuu">
                    申购
                </div>
                <div class="funds-list-title" @click="shengoulist">
                    申购列表
                </div>
            </div>
            <div class="funds-list-item" v-for="(i, k) in shengou" :key="k" v-if="aaa == 'aaa' && i.zt == 1">
                <div class="funds-list-item__account clearfix" style="display: flex;align-items: center;">
                    <div class="col-xs-3 account">
                        <!-- 配资资金：17.63 股票可用金额：17.63 配资管理费：已结束 -->
                        <div class="order-title">新股名称</div>
                        <div class="order-money">{{i.names || 0}}</div>
                    </div>
                    <div class="col-xs-3 account">
                       
                        <div class="order-title">发行价格</div>
                        <div class="order-money">{{i.price || 0}}</div>
                    </div>
                    <div class="col-xs-3 account">
                        <!-- 保证金：100 股票市值：0 股票盈亏：0  -->
                        <div class="order-title">申购代码</div>
                        <div class="order-money">{{i.code || 0}}</div>
                    </div>
                    <div class="col-xs-3 account" >
                        <!-- <div class="order-title">状态</div>
                        <div class="order-money">
                            <span v-if="i.zt==0">已关闭</span>
                            <span v-if="i.zt==1">已开启</span>
                        </div> -->
                        <div class="peizi" @click="shengouclik(i)" >
                            申购
                        </div>
                    </div>
                </div>
            </div>
            <div class="funds-list-item" v-for="(item,index) in sgList" :key="index" v-if="aaa == 'bbb'">
                <div class="funds-list-item__account clearfix">
                    <div class="col-xs-4 account">
                        <!-- 配资资金：17.63 股票可用金额：17.63 配资管理费：已结束 -->
                        <div class="order-title">新股名称</div>
                        <div class="order-money">{{item.xgname || 0}}</div>
                        <div class="order-title">保证金</div>
                        <div class="order-money">{{item.bzj|| 0}}</div>
                    
                    </div>
                    <div class="col-xs-4 account">
                        <!-- 保证金：100 股票市值：0 股票盈亏：0  -->
                        <div class="order-title">申购代码</div>
                        <div class="order-money">{{item.codes || 0}}</div>
                        <div class="order-title">买入数量</div>
                        <div class="order-money">{{item.nums || 0}}</div>
                    </div>
                    <div class="col-xs-4 account">
                        <div class="order-title">状态</div>
                        <div class="order-money">
                            <span v-if="item.zts==3">未审核</span>
                            <span v-if="item.zts==1">已中签</span>
                            <span v-if="item.zts==2">未中签</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="funds-list-loadmore">
                点击加载更多内容
            </div> -->
            <el-dialog show-close :visible.sync="dialogCommunity" width="80%">
                <div class="storeinformation_popup">
                    <el-form :model="haoForm" ref="haoForm" class="demo-form">
                        <div class="storeinformation_popup_top">
                            <el-form-item>
                                <el-input type="text" v-model="haoForm.shehao" placeholder="请填写申购数量"
                                    show-word-limit oninput="value=value.replace(/[^\d]/g,'')">
                                </el-input>
                            </el-form-item>
                        </div>
                        <el-form-item style="text-align:center;">
                            <el-button @click="dialogCommunity = false">取 消</el-button>
                            <el-button type="primary" @click="shengData()"
                                style="background-color: #fff !important;color:#333 !important;border-color:#DCDFE6 !important;">
                                确 定
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import * as api from '../../axios/api'

    export default {
        data() {
            return {
                list: {
                    list: []
                },
                aaa: 'aaa',
                shengou: "",
                dialogCommunity: false,
                haoForm: {
                    shehao: ''
                },
                tijiao: '',
                sgList: ''
            }
        },
        computed: {
            // progress() {
            //     let per = this.$store.state.userInfo.userAmt/(this.$store.state.userInfo.userAmt+this.$store.state.userInfo.userIndexAmt) * 100 > 100?100:this.$store.state.userInfo.userAmt/(this.$store.state.userInfo.userAmt+this.$store.state.userInfo.userIndexAmt) * 100 > 100?this.$store.state.userInfo.userAmt/(this.$store.state.userInfo.userAmt+this.$store.state.userInfo.userIndexAmt) * 100 > 100?100:this.$store.state.userInfo.userAmt/(this.$store.state.userInfo.userAmt+this.$store.state.userInfo.userIndexAmt) * 100:100
            //     return per
            // }
        },
        created() {
            this.getlist()
            this.xxxx();
        },
        methods: {
            async shengouclik(i) {
                this.dialogCommunity = true
                this.tijiao = i
                console.log(i)
            },
            async shengouuu() {
                this.aaa = 'aaa'
            },
            async shengoulist() {
                this.aaa = 'bbb'
                this.shengouList();
            },
            async getlist() {
                // 获取持仓列表
                let opt = {
                    userId: 0,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                console.log(opt)
                let data = await api.getUserApplyList(opt)
                if (data.status === 0) {
                    this.list = data.data
                }

            },
            async xxxx() {
                // 获取持仓列表
                let opt = {};
                let data = await api.xingusg(opt);
                this.shengou = data.data.list;
                console.log(this.shengou, "申购");
            },
            async shengData() {
                // 获取持仓列表
                var timestamps = (new Date()).getTime();
                let opt = {
                    sgname: this.tijiao.names,
                    sgdaima: this.tijiao.code,
                    sgprice: this.tijiao.price,
                    sgsumber: this.haoForm.shehao,
                    tmes: timestamps,
                };
                console.log(opt);
                let data = await api.xingusgs(opt);
                this.shengoutijiao = data.data.list;
                console.log(this.shengoutijiao, "申购提交");
                this.dialogCommunity = false
                if (data.status == 200) {
                    this.$message({
                        message: data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'warning'
                    });
                }
            },
            async shengouList() {
                let opt = {};
                let data = await api.xingusgsList(opt);
                this.sgList = data.data.list;
                // this.timestampToTime()
                console.log(this.sgList)
            },
        },

    }
</script>

<style lang="less" scoped>
    .funds-list-item {
        padding: 0.2rem 0.16rem 0.45rem !important;
    }

    body {
        background-color: #16171d;
    }

    .wrapper {
        padding-bottom: 0;
    }

    .funds-info {
        display: block;
        width: 6.9rem;
        margin: .3rem;
        padding: .6rem .2rem .12rem .2rem;
        background-color: #1F2636;
        border-radius: .1rem;

        .money-info {
            padding-bottom: .42rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #fff2;

            &_left {
                flex: 1;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .money-info_total {
                    height: .4rem;
                    display: flex;
                    align-items: center;

                    .ino-ico {
                        width: .38rem;
                        height: .38rem;
                        margin-right: .15rem;
                    }

                    .ino-title {
                        font-size: .24rem;
                        margin-right: .15rem;
                    }

                    .ino-money {
                        font-size: .4rem;
                        color: #009C46;
                        letter-spacing: 0;
                        font-family: lightnumber;
                    }
                }

                .money-info_progress {
                    width: 100%;
                    height: .1rem;
                    border-radius: .05rem;
                    background-color: #4E5A73;

                    &__inner {
                        background-color: #E6003E;
                        height: .1rem;
                        border-radius: .05rem;
                    }
                }
            }

            &_right {
                margin-left: .3rem;
                width: 1.4rem;
                height: 1.14rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .money-info_botton {
                    width: 1.4rem;
                    height: .42rem;
                    line-height: .42rem;
                    font-size: .24rem;
                    color: #fff;
                    text-align: center;

                    &.redBtn {
                        background-color: #E6003E;
                        border-radius: .21rem;
                    }

                    &.blueBtn {
                        background-color: #024DA1;
                        border-radius: .21rem;
                    }
                }
            }
        }

        .money-detail {
            position: relative;

            &_title {
                padding: .3rem 0;
                display: flex;
                justify-content: space-between;
            }

            &_acc {
                display: flex;
                flex-wrap: wrap;

                .acc {
                    padding: 0;
                    display: flex;
                    width: 50%;

                    .acc-item {
                        margin-left: .2rem;
                        margin-bottom: .3rem;
                    }

                    .acc-item_title {
                        font-size: .24rem;
                        color: #fff;
                        line-height: .3rem;
                        margin-bottom: .2rem;
                    }

                    .acc-item_num {
                        font-size: .3rem;
                        color: #E6003E;
                        font-family: lightnumber;
                    }
                }
            }
        }

    }

    .funds-list {
        display: block;
        width: 6.9rem;
        margin: .3rem;
        padding: .12rem .2rem .12rem .2rem;
        background-color: #1F2636;
        border-radius: .1rem;

        &-title {
            text-align: center;
            padding: .26rem 0;
            color: #fff;
            font-size: .25rem;
            font-weight: bold;
        }

        &-item {
            padding: .45rem .16rem;
            border-top: 1px solid #fff2;

            &__title {
                display: flex;
                justify-content: space-between;
                margin-bottom: .35rem;

                &-left {
                    font-size: .3rem;

                    .zhishu {
                        font-size: .2rem;
                        color: #fff;
                        padding: .05rem .15rem;
                        background-image: url(../../assets/ico/zhishu.png);
                        background-size: 100% 100%;
                    }
                }

                &-right {
                    font-size: .24rem;
                }
            }

            .account {
                padding: 0;

                .order-title {
                    color: #AAAAAA;
                    font-size: .24rem;
                    margin-bottom: .1rem;
                    margin-top: .4rem;
                    text-align:center;
                }

                .order-money {
                    color: #fff;
                    font-size: .24rem;
                    margin-bottom: .13rem;
                    text-align: center;
                }

                .peizi {
                    height: .34rem;
                    background-color: #138EB4;
                    border-radius: .17rem;
                    text-align: center;
                    width: 1.26rem;
                    line-height: .35rem;
                }
            }
        }

        &-loadmore {
            height: .67rem;
            line-height: .67rem;
            text-align: center;
            font-size: .27rem;
            color: #fff;
            background-color: #494951;
            border-radius: 3px;
            margin-bottom: .4rem;
        }
    }

    .red-theme {
        .funds-info {
            background-color: #fff;

            .ino-title {
                color: #000;
            }

            .acc-item_title {
                color: #000 !important;
            }
        }

        .funds-list {
            background-color: #fff;

            &-title {
                color: #000;
            }

            &-item {
                border-top-color: #2222;

                &__title-left {
                    color: #222;
                }

                .account .order-title {
                    color: #666666;
                }

                .account .order-money {
                    color: #000;
                }

                .account .peizi {
                    background-color: #BC1816;
                    color: #fff;
                }
            }
        }

        .funds-list-loadmore {
            background-color: #BC1816;
        }
    }
</style>