hmvue/src/views/social/social.vue

<template>
    <div class="social-wrap">
        <div class="p_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
            <span>
                <img v-if="data.is_fund == 0" src="../../assets/image/socialHeadIcon@2x.png" class="HeadIcon" alt="">
                <img v-else src="../../assets/image/fiveRisksHeadIcon@2x.png" class="HeadIcon" alt="">
                <span>
                    {{data.is_fund == 0 ? '社保代缴' : '五险一金'}}
                </span>
            </span>
        </div>
        <section class="social-basic input-qian" v-if="data.social_type == null">
            <form action="" id="social-basic" class="needs-validation" novalidate>
                <div class="form-group row">
                    <label for="realname" class="col-3 col-form-label">姓名</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="realname" name="realname"
                               value="" required pattern="^[\u4e00-\u9fa5]{2,4}$">
                        <div class="invalid-feedback">
                            请输入有效的姓名
                        </div>
                    </div>
                    <b class="text-danger">*</b>
                </div>
                <div class="form-group row">
                    <label for="gender" class="col-3 col-form-label">性别</label>
                    <div class="col-8">
                        <select id="gender" name="gender" class="form-control">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="city" class="col-3 col-form-label">选择城市</label>
                    <div class="col-8">
                        <select class="city-sheng" name="" id="sheng" v-model='data.code' @change="chooseShi()">
                            <option style="color:#8e8e8e" v-for="item in data.sheng" :value="item.code"> {{item.name}} </option>
                        </select>
                        <br>
                        <select class="city-shi" name="social_city" id=""  v-model='data.codes'  @change="chooseSocial()">
                            <option  v-for="items in data.shi" :value="items.code" > {{items.name}} </option>
                        </select>
                        <div class="invalid-feedback">
                            请选择代缴城市
                        </div>
                    </div>
                    <b class="text-danger">*</b>
                </div>
                <div class="form-group row">
                    <label for="socialType" class="col-3 col-form-label">社保户别</label>
                    <div class="col-8">
                        <select id="socialType" name="socialType" class="form-control" >
                            <option v-for="item in data.sociallist" :value="item.id">{{item.name}}</option>
                        </select>
                        <div class="invalid-feedback">
                            请输入有效的社保户别
                        </div>
                    </div>
                    <b class="text-danger">*</b>
                </div>
<!--                <div class="form-group row">-->
<!--                    <label for="socialCity" class="col-3 col-form-label">缴费城市</label>-->
<!--                    <div class="col-8">-->
<!--                        <input id="socialCity" name="socialCity" class="form-control" type="text" value="北京" readonly>-->
<!--                    </div>-->
<!--                    <b class="text-danger">*</b>-->
<!--                </div>-->
                <div class="form-group row">
                    <label for="idCard" class="col-3 col-form-label">身份证号</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="idCard" name="idCard" value="" required
                               pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)">
                        <div class="invalid-feedback">
                            请输入有效的身份证号
                        </div>
                    </div>
                    <b class="text-danger">*</b>
                </div>
                <div class="form-group row">
                    <label for="mobile" class="col-3 col-form-label">手机号码</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="mobile" name="mobile" :value="data.mobile" required
                               pattern="^1[3-9]\d{9}$">
                        <div class="invalid-feedback">
                            请输入有效的手机号码
                        </div>
                    </div>
                    <b class="text-danger">*</b>
                </div>
                <div class="form-group row">
                    <label for="email" class="col-3 col-form-label">电子邮箱</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="email" name="email" value=""
                              >
                        <div class="invalid-feedback">
                            请输入有效的电子邮箱
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="addr" class="col-3 col-form-label">联系地址</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="addr" name="addr" value="">
                    </div>
                </div>
                <div class="text-right" style="color: #6b6b6b">
                    <small class="small">输入您的个人信息,<b class="text-danger">*</b>号为必填内容</small>
                </div>
                <div class="btn-box form-group mt-3 row">
                    <input type="hidden" name="is_edit" value="">
                    <a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxMzYyMjYzOA==&scene=126&bizpsid=0#wechat_redirect" > 联系客服</a>
                    <button type="button" style="background: #0dbc5a;color: #ffffff;" class="btn btn-block p-3" v-on:click="saveInfo">下一步</button>
                </div>
            </form>
        </section>
        <!-- style="margin-bottom: 10rem;" -->
        <section class="social-detail" v-if="data.social_type != null">
            <form @submit.prevent action="" id="social-detail" class="needs-validation" novalidate>
                <input type="hidden" name="bill_type" value="calc">
                <input type="hidden" name="social_type" :value="data.social_type">
                <input type="hidden" name="code" :value="data.citycode">
                <div class="form-group row" style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label for="socialBasic" class="col-5 col-form-label">社保缴纳额度</label>
                    <div class="col-7">
                        <input type="number" class="form-control" id="socialBasic" name="socialBasic"
                               v-on:change="calcBill"
                               v-model="data.social_basic.pension[0]"
                               min="3613"
                               :max="data.social_basic.pension[1]" required>
                        <!-- <input type="number"
                            class="form-control"
                            id="socialBasic"
                            name="socialBasic"
                            v-on:change="calcBill"
                            v-model="social_basic.pension[0]"> -->
                        <div class="invalid-feedback">
                            <!-- 请输入介于{{data.social_basic.pension[0]}}，{{data.social_basic.pension[1]}}之间的整数 -->
                            请输入介于3613，{{data.social_basic.pension[1]}}之间的整数
                        </div>
                    </div>
                </div>
                <div id="fund" class="form-group row" v-if="data.is_fund"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label for="fundBasic" class="col-5 col-form-label">公积金缴纳额度</label>
                    <div class="col-7">
                        <input type="number" class="form-control fuwuinput" id="fundBasic" name="fundBasic"
                               placeholder="请输入3613-23565之间的整数"
                               v-on:change="calcBill"
                               v-model="data.social_basic.fund[0]" :min="3613"
                               :max="data.social_basic.fund[1]"
                               required>
                        <div class="invalid-feedback">
                            <!-- 请输入介于{{data.social_basic.fund[0]}}，{{data.social_basic.fund[1]}}之间的整数 -->
                            请输入介于3613，{{data.social_basic.pension[1]}}之间的整数
                        </div>
                    </div>
                </div>
                <div class="form-group row"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label for="serviceCharge" class="col-5 col-form-label">服务费</label>
                    <div class="col-4">
                        <select id="serviceCharge" class="form-control" name="serviceType" v-on:change="calcBill">
                            <option v-for="(value, key) in data.service_charge" :value="key"  :selected="key === 'monthly'">
                                {{value}}
                            </option>
                        </select>
                    </div>
                    <!-- <b class="text-danger col-3 text-right" v-if="data.is_discounts">5折优惠</b> -->
                    <img src="../../assets/image/fiveDiscount@2x.png" alt="" class="col-3 text-right" v-if="data.is_discounts">
                </div>
                <div class="detail mt-2  d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">代缴月份</label>
                    <span class="hubie-right">{{data.month}}月份</span>
                </div>
                <div class="detail  d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">代缴城市</label>
                    <span class="hubie-right">{{data.cityname}}</span>
                </div>
                <div class="detail"  style="padding-left: 1.5rem;padding-right: 1.5rem;padding-bottom: 1.5rem;">
                    <label class="col-form-label">社保户别</label>
                    <span class="hubie-right">{{data.hubie}}</span>
                    <!-- <ul class="list-group list-group-flush pl-4">
                        <li class="list-group-item d-flex justify-content-between align-items-center"
                            v-for="value in data.social_calc">
                            {{value[1]}}
                            <span class="badge badge-pill">&yen;{{value[0]}}</span>
                        </li>
                    </ul> -->
                </div>
                <!-- 缴费明细 -->
                <div class="backgroundColor"></div>
                <div>
                    <div class="header" style="padding-left: 1.5rem;padding-right: 1.5rem;">
                        <span>缴费明细</span>
                    </div>
                    <ul class="list-group list-group-flush pl-4">
                        <li class="list-group-item d-flex justify-content-between align-items-center"
                            v-for="(value,idx) in data.social_calc"
                            :key="idx">
                            {{value[1]}}
                            <span class="badge badge-pill">&yen;{{value[0]}}</span>
                        </li>
                    </ul> 
                </div>
                <div class="youhui"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
<!--                    <p class="pingtai">*平台优惠可以选择优惠方式进行支付</p>-->
<!--                    <p class="pingtai-2">平台优惠（二选一)</p>-->
                    <div class="youhui-box">
                        <p class="youhui-text">
                            <span class="youhui-dec">优惠券</span>
                            <select  class="form-control youinput" name="discount" v-on:change="calcBill"  >
                                <option v-for="(item,key) in data.discountList" :value="item.id" :selected="item.id === 'item.id'">
                                    {{item.money}}
                                </option>
                            </select>
                        </p>
<!--                        <p class="youhui-p">-->
<!--                            <span>余额可抵扣 -￥{{data.blance}}</span>-->
<!--                            <el-switch-->
<!--                                    v-model="data.is_balance"-->
<!--                                    :value="data.is_balance"-->
<!--                                    name="is_balance"-->
<!--                                    active-color="#2277e1"-->
<!--                                    inactive-color="#c2c2c2"-->
<!--                                    @change="changebalance()"-->
<!--                                    style="position: absolute;right: 1rem;">-->
<!--                            </el-switch>-->
<!--                        </p>-->
                    </div>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">社保小计</label>
                    <span class="badge">&yen;{{data.subtotal_calc}}</span>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"
                     v-if="data.is_fund"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">公积金</label>
                    <span class="badge">&yen;{{data.fund_calc}}</span>
                </div>
                <div
                    class="detail mt-2 pr-3 d-flex justify-content-between align-items-center" 
                    style="padding-left: 1.5rem;padding-right: 1.5rem;"
                    v-for="(item, idx) in data.append_cost" :key="idx">
                    <label class="col-form-label">{{item.name}}</label>
                    <span class="badge">&yen;{{item.cost}}</span>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">服务费</label>
                    <span class="badge">&yen;{{data.service_calc}}</span>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">优惠劵抵扣金额</label>
                    <span class="badge"> - &yen;{{data.discount}}</span>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;">
                    <label class="col-form-label">手续费(支付通道服务费0.6%)</label>
                    <span class="badge"> &yen;{{data.freedom}}</span>
                </div>
                <div class="detail mt-2 pr-3 d-flex justify-content-between align-items-center"  style="padding-left: 1.5rem;padding-right: 1.5rem;padding-bottom: 1.5rem;">
                    <label class="col-form-label">总计</label>
                    <span class="badge" style="color: #d30000;font-weight:700;">&yen;{{data.total_calc}}</span>
                </div>
                <div class="text-right" style="color: #6b6b6b">
                </div>
                <div class="backgroundColorFooter">
                    
                </div>
                <div class="bottom-twobtn">

                    <button type="button" class="button-1" v-on:click="saveOrder">
                        <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
                        去缴费
                    </button>
                    <button type="button" class="button-2" @click="open"><img class="button-2-img" src="../../assets/image/serviceFoot@2x.png" alt=""> 联系客服</button>
                </div>
            </form>
        </section>

    </div>
</template>

<script lang="ts" src="./social.ts"></script>

<style lang="scss" scoped>
    @import './social.scss';
</style>