1554 lines
48 KiB
Vue
1554 lines
48 KiB
Vue
<template>
|
|
<div class="app-center">
|
|
<div class="center-left">
|
|
<div class="center-vh">
|
|
<div class="center-left-top">
|
|
<div class="vip-bottom" v-if="isMember == false" @click="dialogVisiblevip = true">
|
|
<div>会员登录</div>
|
|
</div>
|
|
<div v-else style="width: 96%;margin: 0 auto;display: flex;justify-content: space-between">
|
|
<div
|
|
style="display: flex;color: white;justify-content: space-around;width: 55%;
|
|
height: 90%;border-radius: 10px;
|
|
padding-top: 10px;
|
|
background-color: rgb(67,119,204)">
|
|
<div>
|
|
<template>
|
|
<img v-if="member.avatar" class="list-avatar" :src="member.avatar">
|
|
<img v-else class="list-avatar" src="@/assets/images/avatar.png">
|
|
</template>
|
|
</div>
|
|
<div style="text-align: center">
|
|
<span style="margin-bottom: 10px">{{ member.name }}</span><br/>
|
|
<span>{{ member.mobile }}</span>
|
|
</div>
|
|
<div style="background-color: rgba(46,82,142,0.65);width: 50px;height: 45px;padding-top: 5px;
|
|
border-radius: 5px;text-align: center">
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
<p>会员储值账户余额：{{ member.cardBalance }}</p>
|
|
<p>积分余额：{{ member.points }}</p>
|
|
</div>
|
|
<i class="el-icon-bank-card" style="font-size: 35px"></i>
|
|
</el-tooltip>
|
|
</div>
|
|
<div style="background-color: rgba(46,82,142,0.65);width: 50px;height: 45px;padding-top: 5px;
|
|
border-radius: 5px;text-align: center">
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
会员等级：{{ getGrade(member.gradeId) }}
|
|
</div>
|
|
<i class="el-icon-medal" style="font-size: 35px"></i>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="vip-bottom" style="height: 40px;margin-top: 10px" @click="resetMember">
|
|
<div>重置会员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-left-hj">
|
|
<div class="hj-box" style="justify-content: left">油品:￥{{ oilAmount }}</div>
|
|
<div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥{{ goodsAmount }}</div>
|
|
<div class="hj-box" style="justify-content: flex-end">合计: ￥{{ oilAmount + goodsAmount }}</div>
|
|
</div>
|
|
<div class="center-left-hj">
|
|
<div>满减活动</div>
|
|
<div>-￥{{ oilDiscount + goodsDiscount }}</div>
|
|
</div>
|
|
<div class="center-left-hj" v-show="isMember">
|
|
<div>充值优惠</div>
|
|
<div>-￥0</div>
|
|
</div>
|
|
<div class="center-left-hj" v-show="isMember">
|
|
<div>
|
|
储值卡
|
|
<span>（账户余额：{{ balance }}元）</span>
|
|
</div>
|
|
<div>-￥{{ consumeAmount }}</div>
|
|
</div>
|
|
<div class="center-left-th">
|
|
<div class="th-box">
|
|
<div>扫码支付</div>
|
|
<div class="bule">{{ oilActualPay + goodsActualPay }}</div>
|
|
</div>
|
|
<div class="th-box">
|
|
<div>找零</div>
|
|
<div class="bule">0</div>
|
|
</div>
|
|
<div class="th-box">
|
|
<div @click="dialogVisible = true">加油员</div>
|
|
<div style="cursor: pointer;color: crimson" @click="dialogVisible = true" >{{ staff.realName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-posi">
|
|
<div class="center-left-wrap">
|
|
<div class="wrap-box" v-for="item in payList"
|
|
:key="item.dictValue"
|
|
:value="item.dictValue">
|
|
<span @click="payMethod(item.dictValue)">{{ item.dictLabel }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="center-left-bottom">
|
|
<div>
|
|
<div class="bottom-price">￥{{ oilActualPay + goodsActualPay }}</div>
|
|
<div class="price-red">优惠合计：{{ oilDiscount + goodsDiscount }}元</div>
|
|
</div>
|
|
<div class="center-left-lv" @click="settlement">立即结算</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="center-right">
|
|
<div class="center-top">
|
|
<div class="center-top-tab">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="全部" name="1"></el-tab-pane>
|
|
<el-tab-pane v-for="item in oilNameList" :key="item.id"
|
|
:label="item.oilName" :name="item.id+''"></el-tab-pane>
|
|
<!-- <el-tab-pane label="95#" name="third"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="98#" name="fourth"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="0#" name="one"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="京0#" name="two"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="京10#" name="three"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="CNG" name="frou"></el-tab-pane>-->
|
|
<!-- <el-tab-pane label="LNG" name="frous"></el-tab-pane>-->
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<div class="center-top-data">
|
|
<div class="center-top-of">
|
|
<div class="wrap-wrap">
|
|
<div class="of-box" v-for="(item,index) in oilNumGunList" :key="index"
|
|
:style="{'background-color': colorList[index%5].color}"
|
|
@click="refuel(item.id)">
|
|
<div>{{ getName(oilNameList,item.oilName) }}</div>
|
|
|
|
<div class="of-title" >{{item.oilGunNum}}号枪</div>
|
|
<div>
|
|
<img src="../../../assets/images/jya.png" style="width: 18px;height: 18px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -->
|
|
<div class="content-top-bottom">
|
|
<div>订单笔数 <span class="bule">{{ oilTotal }}件</span> </div>
|
|
<div>订单金额 <span class="bule">￥{{ oilAmount }}</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-left-bottom">
|
|
<div class="bottom-gd" @click="resetting">重置</div>
|
|
<!-- <div class="bottom-qk">解锁</div>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-app">
|
|
<div class="center-top">
|
|
<div class="center-top-title">非油商品</div>
|
|
<div class="center-top-input">
|
|
<template>
|
|
<el-autocomplete
|
|
popper-class="my-autocomplete"
|
|
style="width: 94%"
|
|
v-model="goods"
|
|
:fetch-suggestions="querySearch"
|
|
placeholder="商品名称，商品关键词，商品条码"
|
|
@select="changeGoods">
|
|
<template slot-scope="{ item }">
|
|
<div style="display: flex;justify-content: space-between">
|
|
<span class="name">{{ item.name }}</span>
|
|
<span v-if="isMember" class="addr">{{ item.memberPrice }}</span>
|
|
<span v-else class="addr">{{ item.retailPrice }}</span>
|
|
</div>
|
|
</template>
|
|
</el-autocomplete>
|
|
<!-- <el-select v-model="goods" filterable-->
|
|
<!-- style="width: 95%;font-size: 20px;"-->
|
|
<!-- @change="changeGoods"-->
|
|
<!-- @keydown.enter.native="queryGoods"-->
|
|
<!-- clearable-->
|
|
<!-- placeholder="请输入商品名称，商品关键词">-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="item in goodsList"-->
|
|
<!-- :key="item.id"-->
|
|
<!-- :label="item.name"-->
|
|
<!-- :value="item.id">-->
|
|
<!-- <span style="float: left">{{ item.name }}</span>-->
|
|
<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.retailPrice }}</span>-->
|
|
<!-- </el-option>-->
|
|
<!-- </el-select>-->
|
|
</template>
|
|
</div>
|
|
<div class="center-top-data">
|
|
<div class="data-top">
|
|
<div class="data-top-title">商品</div>
|
|
<div class="data-top-three">
|
|
<div v-if="isMember == false">单价</div>
|
|
<div v-else>会员价</div>
|
|
<div>数量</div>
|
|
<div>操作</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-top-box" v-for="(item,index) in goodsOrder" :key="index">
|
|
<div class="data-top-title">{{ item.name }}</div>
|
|
<div class="data-top-three">
|
|
<div v-if="isMember == false">{{ item.retailPrice }}</div>
|
|
<div v-else>{{ item.memberPrice }}</div>
|
|
<div>
|
|
<el-input-number v-model="item.num" size="small" controls-position="right"
|
|
@change="handleChange" :min="1" :max="10"></el-input-number>
|
|
</div>
|
|
<div @click="delGoods(index)"><i class="el-icon-circle-close" style="font-size: 22px"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-top-bottom">
|
|
<div>商品数量 <span class="bule">{{ goodsTotal }}件</span> </div>
|
|
<div>商品总额 <span class="bule">￥{{ goodsAmount }}</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-left-bottom">
|
|
<div class="bottom-qk" @click="empty">清空</div>
|
|
<div style="display: flex">
|
|
<div class="bottom-qd" @click="dialogTakeOrder = true">取单</div>
|
|
<div class="bottom-gd" @click="dialogRegistration = true">挂单</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加油员姓名-->
|
|
<el-dialog
|
|
title="选择加油员"
|
|
:visible.sync="dialogVisible"
|
|
width="30%"
|
|
:close-on-click-modal="false">
|
|
<div class="wrap-wrap">
|
|
<div class="of-box" v-for="(item,index) in staffList" :key="index"
|
|
@click="chooseStaff(item)"
|
|
:style="{'background-color': item.color}">
|
|
<div class="of-title">{{ item.realName }}</div>
|
|
<div style="text-align: center;font-size: 17px">{{ item.mobile }}</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">关 闭</el-button>
|
|
<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 挂单-->
|
|
<el-dialog
|
|
title="挂单提示"
|
|
:visible.sync="dialogRegistration"
|
|
width="20%"
|
|
style="margin-top: 200px"
|
|
:close-on-click-modal="false">
|
|
<div class="wrap-wrap">
|
|
<p>
|
|
挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、挂单备注为选填
|
|
</p>
|
|
<div>
|
|
<el-input
|
|
type="textarea"
|
|
:rows="2"
|
|
style="width: 180%"
|
|
placeholder="请输入挂单备注(选填)"
|
|
v-model="registrationRemark">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogRegistration = false">关 闭</el-button>
|
|
<el-button type="primary" @click="registration">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 挂单成功提示-->
|
|
<el-dialog
|
|
title="挂单成功"
|
|
:visible.sync="dialogSuccess"
|
|
width="20%"
|
|
style="margin-top: 200px"
|
|
:close-on-click-modal="false">
|
|
<span>商品记录挂单成功</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<!-- <el-button @click="dialogVisible = false">取 消</el-button>-->
|
|
<el-button type="primary" @click="dialogSuccess = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 取单提示-->
|
|
<el-dialog
|
|
title="取单"
|
|
:visible.sync="dialogTakeOrder"
|
|
width="50%"
|
|
:close-on-click-modal="false">
|
|
<div style="height: 500px">
|
|
<el-row class="tac">
|
|
<el-col :span="6">
|
|
<el-input v-model="putRemark" placeholder="挂单备注检索" style="margin-bottom: 20px;width: 80%"></el-input>
|
|
<el-menu
|
|
default-active="2"
|
|
v-for="(item,index) in registrationList"
|
|
:key="index"
|
|
class="el-menu-vertical-demo">
|
|
<el-menu-item :index="index+''" @click="getTakeGoods(item,index)">
|
|
<span slot="title">{{ item.menu }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-table ref="tables" :data="takeList">
|
|
<el-table-column label="商品名称" align="center" prop="name" />
|
|
<el-table-column label="零售价" align="center" prop="retailPrice"/>
|
|
<el-table-column label="数量" align="center" prop="num"/>
|
|
<el-table-column label="金额" align="center">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.retailPrice * scope.row.num }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<span style="display: flex;justify-content: space-between">
|
|
<el-button class="elBut" @click="dialogTakeOrder = false" round>返 回</el-button>
|
|
<span>
|
|
<el-button class="elBut" type="danger" @click="cancel" round>作 废</el-button>
|
|
<el-button class="elBut" type="success" @click="pickOrder" round>取 单</el-button>
|
|
</span>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 立即结算-->
|
|
<el-dialog
|
|
title="扫码支付"
|
|
:visible.sync="dialogVisiblej"
|
|
width="30%"
|
|
:close-on-click-modal="false">
|
|
<div v-if="isPay == true"
|
|
v-loading="loading">
|
|
<div style="text-align: center;font-size: 15px;font-weight: bold">应收金额</div>
|
|
<div style="text-align: center;font-size: 30px;font-weight: bold;color: red;margin: 10px 0">
|
|
￥{{ oilActualPay + goodsActualPay }}
|
|
</div>
|
|
<div style="text-align: center;margin-bottom: 10px">
|
|
合计金额：{{ oilAmount + goodsAmount }}元、优惠合计13.02元
|
|
</div>
|
|
<div>
|
|
<el-input v-model="authCode"
|
|
autofocus="autofocus"
|
|
@keydown.enter.native="collection"
|
|
placeholder="扫描或输入付款码、支持微信、支付宝、云闪付">
|
|
<i
|
|
slot="suffix">
|
|
<svg t="1697791915471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1479" width="32" height="32"><path d="M149.333333 170.858667A21.546667 21.546667 0 0 1 170.858667 149.333333H384V106.666667H170.858667A64.213333 64.213333 0 0 0 106.666667 170.858667V384h42.666666V170.858667zM170.858667 874.666667A21.546667 21.546667 0 0 1 149.333333 853.141333V640H106.666667v213.141333A64.213333 64.213333 0 0 0 170.858667 917.333333H384v-42.666666H170.858667zM853.12 149.333333A21.546667 21.546667 0 0 1 874.666667 170.858667V384h42.666666V170.858667A64.213333 64.213333 0 0 0 853.141333 106.666667H640v42.666666h213.141333zM874.666667 853.141333A21.546667 21.546667 0 0 1 853.141333 874.666667H640v42.666666h213.141333A64.213333 64.213333 0 0 0 917.333333 853.141333V640h-42.666666v213.141333zM106.666667 490.666667h810.666666v42.666666H106.666667v-42.666666z" fill="#3D3D3D" p-id="1480"></path></svg>
|
|
</i>
|
|
</el-input>
|
|
</div>
|
|
<div class="demo-image">
|
|
<div class="block" style="text-align: center">
|
|
<el-image
|
|
style="width: 200px; height: 200px"
|
|
fit="cover"
|
|
src="https://oil.wudb.cn/static/img/scan-demo.fcb8b1ab.png"></el-image>
|
|
</div>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around">
|
|
<el-button @click="dialogVisiblej = false" class="but">取 消</el-button>
|
|
<el-button type="primary" class="but" @click="collection">确 定 收 款</el-button>
|
|
</span>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="isPaySuccess">
|
|
<el-result icon="success" title="收款成功">
|
|
<template slot="extra">
|
|
<el-button type="primary" @click="handClose">关 闭</el-button>
|
|
</template>
|
|
</el-result>
|
|
</div>
|
|
<div v-else>
|
|
<el-result icon="error" title="支付失败，请重新支付">
|
|
<template slot="extra">
|
|
<el-button type="primary" @click="handClose">关 闭</el-button>
|
|
</template>
|
|
</el-result>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 会员登录-->
|
|
<el-dialog
|
|
title="会员信息"
|
|
:visible.sync="dialogVisiblevip"
|
|
width="30%"
|
|
:close-on-click-modal="false">
|
|
<div >
|
|
<el-input placeholder="会员手机号、用户昵称" v-model="userNo"
|
|
clearable
|
|
@keyup.enter.native="getUser"
|
|
class="input-with-select" style="text-align: center;">
|
|
<el-select v-model="select1" slot="prepend" placeholder="请选择" style="width: 120px">
|
|
<el-option label="会员手机号" value="会员手机号"></el-option>
|
|
<el-option label="用户昵称" value="用户昵称"></el-option>
|
|
</el-select>
|
|
<el-button slot="append" @click="getUser">查询</el-button>
|
|
</el-input>
|
|
</div>
|
|
<el-row>
|
|
<el-descriptions title="会员信息" :column="2">
|
|
<el-descriptions-item label="手机号">{{member.mobile ? member.mobile : "--"}}</el-descriptions-item>
|
|
<el-descriptions-item label="会员昵称">{{member.name ? member.name : "--"}}</el-descriptions-item>
|
|
<el-descriptions-item label="积分">{{member.points ? member.points : "--"}}</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="加油金余额">0</el-descriptions-item>-->
|
|
<el-descriptions-item label="车牌号">{{member.carNo ? member.carNo : "--"}}</el-descriptions-item>
|
|
<el-descriptions-item label="会员备注">{{member.remark ? member.remark : "--"}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions title="会员等级">
|
|
<el-descriptions-item label="等级名称">{{member.gradeId ? member.gradeId : "--"}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions title="储值余额">
|
|
<template slot="extra">
|
|
<sapn style="color: red;margin-right: 20px">余额充值</sapn>
|
|
<sapn style="font-weight: bold">￥{{member.cardBalance ? member.cardBalance : "--"}}</sapn>
|
|
</template>
|
|
<el-descriptions-item v-if="member.cardBalance!=0" label="账户余额">{{member.cardBalance ? member.cardBalance : "--"}}元</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisiblevip = false">取 消</el-button>
|
|
<el-button type="primary" @click="chooseUser(member.mobile,member.id)">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 油号选择-->
|
|
|
|
<!-- 加油枪加油金额-->
|
|
<el-dialog
|
|
title="加油金额"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="dialogVisibleamount"
|
|
width="30%">
|
|
<div class="amount">
|
|
<span>已选油品</span>
|
|
<span class="amountBlue">{{ getName(oilNameList,form.oilName) }}</span>
|
|
</div>
|
|
<div class="amount">
|
|
<span>已选油枪</span>
|
|
<span class="amountBlue">{{ form.oilGunNum }}号枪</span>
|
|
</div>
|
|
<div class="amount">
|
|
<span>油品单价</span>
|
|
<span class="amountBlue">{{ form.oilPrice }}元/L</span>
|
|
</div>
|
|
<div >
|
|
<el-input v-model="amount" @input="form.amount = amount" placeholder="请输入加油金额"
|
|
style="font-weight: 700;text-align: center;font-size: 20px;">
|
|
<el-select v-model="select" style="width: 70px" @change="changeSelect" slot="append" placeholder="请选择">
|
|
<el-option label="元" value="元"></el-option>
|
|
<el-option label="L" value="L"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
<!-- <el-input v-model="form.amount"></el-input>-->
|
|
</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="6" v-for="(item,index) in rise" :key="index">
|
|
<el-button class="grid-content bg-purple" @click="changeAmount(item.value)">{{ item.value }}</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around">
|
|
<el-button @click="dialogVisibleamount = false" class="but">取 消</el-button>
|
|
<el-button type="primary" @click="getOilOrder" class="but">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<!-- 模糊查询会员列表信息-->
|
|
<el-dialog
|
|
title="请选择会员"
|
|
:visible.sync="dialogVisibleMember"
|
|
:close-on-click-modal="false">
|
|
<div class="wrap-wrap">
|
|
<el-table ref="tables" :data="memberList">
|
|
<el-table-column label="ID" align="center" prop="id" width="80" />
|
|
<el-table-column label="头像" align="center" width="70">
|
|
<template slot-scope="scope">
|
|
<img v-if="scope.row.avatar" class="list-avatar" :src="scope.row.avatar">
|
|
<img v-else class="list-avatar" src="@/assets/images/avatar.png">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="姓名" align="center" prop="name" />
|
|
<el-table-column label="手机号" align="center" prop="mobile"/>
|
|
<el-table-column label="注册时间" align="center" prop="createTime">
|
|
<template slot-scope="scope">
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="primary" round
|
|
@click="handleChoose(scope.row)"
|
|
>选择</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getDicts} from "@/api/dict/data";
|
|
import {getOilNameList, getOilNumGun, getOilNumGunById, listOilNumGun} from "@/api/cashier/oilnumgun";
|
|
import {listgoods} from "@/api/cashier/ljgoods";
|
|
import {getUserVoMobile, getUserVoName} from "@/api/cashier/user";
|
|
import {queryStaffs, staffInfo} from "@/api/cashier/staff";
|
|
import {addLJGoods, goodsOrder, oilOrder} from "@/api/cashier/oilorder";
|
|
import {getUserGrade} from "@/api/cashier/usergrade";
|
|
|
|
export default {
|
|
name: "homeindex",
|
|
data(){
|
|
return{
|
|
// 会员消费金额（储值卡需要减少的金额）
|
|
consumeAmount:0,
|
|
// 账户余额
|
|
balance:0,
|
|
// 绑定数据
|
|
amount:'',
|
|
// 等待中
|
|
loading:false,
|
|
// 油品类型
|
|
oilType:'',
|
|
// 取单列表
|
|
takeList:[],
|
|
// 挂单备注检索
|
|
putRemark:"",
|
|
// 挂单备注
|
|
registrationRemark:"",
|
|
// 挂单列表
|
|
registrationList:[],
|
|
// 油品订单
|
|
oilOrder:[],
|
|
// 油品金额
|
|
oilAmount:0,
|
|
// 油品订单数
|
|
oilTotal:0,
|
|
// 油品实付金额
|
|
oilActualPay:0,
|
|
// 油品优惠金额
|
|
oilDiscount:0,
|
|
// 商品优惠金额
|
|
goodsDiscount:0,
|
|
// 商品实付金额
|
|
goodsActualPay:0,
|
|
// 商品订单
|
|
goodsOrder:[],
|
|
// 商品金额
|
|
goodsAmount:0,
|
|
// 商品订单数
|
|
goodsTotal:0,
|
|
// 加油金额
|
|
rise:[
|
|
{value:"￥100"},
|
|
{value:"￥150"},
|
|
{value:"￥200"},
|
|
{value:"￥300"},
|
|
],
|
|
// 会员信息
|
|
member:{},
|
|
// 会员列表信息
|
|
memberList:[],
|
|
select1:'会员手机号',
|
|
// 会员信息
|
|
userNo:"",
|
|
// 查询的商品信息
|
|
goods:"",
|
|
select:"元",
|
|
form:{
|
|
amount : 0
|
|
},
|
|
oilNumGunList:[],
|
|
authCode:'',
|
|
// 油号列表
|
|
oilNumList:[],
|
|
// 商品列表
|
|
goodsList:[],
|
|
// 油枪列表
|
|
oilGunList:[],
|
|
// 支付方式列表
|
|
payList:[],
|
|
dialogVisible: false,
|
|
dialogVisiblej: false,
|
|
dialogVisiblevip:false,
|
|
dialogVisibleamount:false,
|
|
dialogVisibleMember:false,
|
|
dialogRegistration:false,
|
|
dialogSuccess:false,
|
|
dialogTakeOrder:false,
|
|
activeName: '1',
|
|
tabarr:[
|
|
{name:'收银台',icon:'el-icon-s-platform'},
|
|
{name:'充值',icon: 'el-icon-s-finance'},
|
|
{name:'订单',icon: 'el-icon-s-order'},
|
|
{name:'会员',icon: 'el-icon-s-custom'},
|
|
{name:'核销',icon: 'el-icon-s-check'},
|
|
{name:'挂账',icon:'el-icon-s-claim'},
|
|
{name:'积分',icon:'el-icon-s-data'},
|
|
{name:'交班',icon: 'el-icon-s-flag'},
|
|
],
|
|
leftindex:0,
|
|
oilList:[],
|
|
colorList:[
|
|
{color:'#e5f0ff'},
|
|
{color:'#fff2e5'},
|
|
{color:'#e5edf1'},
|
|
{color:'#ecfae5'},
|
|
{color:'#fafafa'}
|
|
],
|
|
restaurants:'',
|
|
num: 1,
|
|
// 油号名称
|
|
oilNameList:'',
|
|
// 员工列表
|
|
staffList:[],
|
|
isMember: false,
|
|
// 员工信息
|
|
staff:"",
|
|
map:{
|
|
allAmount:0,
|
|
// 用户支付条码信息
|
|
authCode:'',
|
|
// 油品订单
|
|
oilOrder:"",
|
|
// 商品订单
|
|
goodsOrder:"",
|
|
// 支付方式
|
|
payType:"WECHAT",
|
|
// 油品订单金额
|
|
oilAmount:0,
|
|
// 商品订单金额
|
|
goodsAmount:0,
|
|
// 油品实付金额
|
|
oilActualPay:0,
|
|
// 商品实付金额
|
|
goodsActualPay:0,
|
|
// 付款用户
|
|
payUser:"",
|
|
// 油品优惠金额
|
|
oilDiscount:0,
|
|
// 商品优惠金额
|
|
goodsDiscount:0,
|
|
// 员工id
|
|
staffId:"",
|
|
// 优惠券id
|
|
couponId:"",
|
|
// 会员id
|
|
userId:"",
|
|
// 提成金额
|
|
commissionAmount:0,
|
|
// 使用积分数量
|
|
usePoint:0,
|
|
// 积分金额
|
|
pointAmount:0,
|
|
// 终端
|
|
terminal:"PC",
|
|
// 商品数量
|
|
goodsNum:0,
|
|
// 会员消费金额（储值卡需要减少的金额）
|
|
consumeAmount:0,
|
|
},
|
|
gradeName:"",
|
|
menu:1,
|
|
index:0,
|
|
isPay:true,
|
|
isPaySuccess:false,
|
|
orderNo:'',
|
|
timer: null,
|
|
isQuery:true,
|
|
}
|
|
},
|
|
created() {
|
|
this.getPayList();
|
|
this.getOilName();
|
|
this.getGoods();
|
|
this.getStaffList();
|
|
this.getStaff();
|
|
},
|
|
mounted(){
|
|
// this.restaurants = this.goodsList;
|
|
},
|
|
methods:{
|
|
querySearch(queryString, cb) {
|
|
let _this = this;
|
|
let results = _this.goodsList;
|
|
if (queryString != ""){
|
|
results = [];
|
|
_this.goodsList.forEach(item => {
|
|
if(item.name.includes(queryString)){
|
|
results.push(item)
|
|
}
|
|
if(item.goodsNo.includes(queryString)){
|
|
results.push(item)
|
|
}
|
|
})
|
|
}
|
|
cb(results);
|
|
},
|
|
// 取单
|
|
pickOrder(){
|
|
let list = this.takeList
|
|
this.goodsOrder = list;
|
|
let num = 0;
|
|
let amount = 0;
|
|
let _this = this;
|
|
list.forEach(item => {
|
|
num += item.num;
|
|
if (_this.isMember){
|
|
amount += item.memberPrice;
|
|
}else {
|
|
amount += item.retailPrice;
|
|
}
|
|
})
|
|
this.goodsTotal = num;
|
|
this.goodsAmount = amount;
|
|
this.goodsActualPay = this.goodsAmount - this.goodsDiscount;
|
|
this.dialogTakeOrder = false;
|
|
},
|
|
// 作废
|
|
cancel(){
|
|
this.registrationList.splice(this.index,1);
|
|
this.takeList = [];
|
|
},
|
|
// 取单列表
|
|
getTakeGoods(data,index){
|
|
this.takeList = data.children;
|
|
this.index = index;
|
|
},
|
|
// 挂单
|
|
registration(){
|
|
this.dialogRegistration = false;
|
|
this.registrationList.push({menu:this.menu,children:this.goodsOrder})
|
|
this.menu++;
|
|
this.goodsOrder = [];
|
|
this.goodsTotal = 0;
|
|
this.goodsAmount = 0;
|
|
this.goodsActualPay = this.goodsAmount - this.goodsDiscount;
|
|
this.getTakeGoods(this.registrationList[0]);
|
|
this.dialogSuccess = true;
|
|
},
|
|
// 重置会员
|
|
resetMember(){
|
|
this.member = {};
|
|
this.isMember = false;
|
|
this.map.payUser == "";
|
|
this.balance = 0;
|
|
this.userNo = "";
|
|
this.handleChange();
|
|
},
|
|
// 获取会员等级信息
|
|
getGrade(id){
|
|
getUserGrade(id).then( response => {
|
|
this.gradeName = response.data.name;
|
|
// if (this.oilType == "汽油"){
|
|
//
|
|
// }
|
|
// if (this.oilType == "柴油"){
|
|
//
|
|
// }
|
|
// if (this.oilType == "天然气"){
|
|
//
|
|
// }
|
|
})
|
|
return this.gradeName;
|
|
},
|
|
// 选择会员
|
|
chooseUser(mobile,id){
|
|
this.dialogVisiblevip = false
|
|
this.isMember = true;
|
|
this.map.payUser = mobile;
|
|
this.map.userId = id;
|
|
this.balance = this.member.cardBalance;
|
|
if (this.balance>=(this.oilAmount - this.oilDiscount)){
|
|
this.consumeAmount = this.oilAmount - this.oilDiscount;
|
|
this.oilActualPay = 0;
|
|
}else {
|
|
this.consumeAmount = this.balance;
|
|
this.oilActualPay = this.oilAmount - this.oilDiscount - this.balance;
|
|
}
|
|
this.handleChange();
|
|
},
|
|
// 选择会员信息
|
|
handleChoose(data){
|
|
this.member = data;
|
|
this.dialogVisibleMember = false;
|
|
},
|
|
// 清空商品订单列表
|
|
empty(){
|
|
this.goodsOrder = [];
|
|
this.goodsTotal = 0;
|
|
this.goodsAmount = 0;
|
|
this.goodsActualPay = 0;
|
|
},
|
|
// 获取当前账户信息
|
|
getStaff(){
|
|
staffInfo().then( response => {
|
|
this.staff = response.data;
|
|
this.map.staffId = this.staff.id;
|
|
})
|
|
},
|
|
// 选择员工信息
|
|
chooseStaff(data){
|
|
this.staff = data;
|
|
this.map.staffId = this.staff.id;
|
|
},
|
|
// 删除商品列表信息
|
|
delGoods(index){
|
|
this.goodsOrder.splice(index,1)
|
|
},
|
|
// 添加商品列表信息
|
|
changeGoods(val){
|
|
let result = true;
|
|
let goods = this.goodsOrder;
|
|
let _this = this;
|
|
if (this.goodsOrder.length>0){
|
|
let amount = 0;
|
|
for (let i = 0; i<goods.length; i++){
|
|
if (_this.isMember){
|
|
amount += goods[i].memberPrice * goods[i].num
|
|
}else {
|
|
amount += goods[i].retailPrice * goods[i].num
|
|
}
|
|
if (goods[i].id == val.id){
|
|
goods[i].num = goods[i].num + 1;
|
|
this.goodsTotal += 1;
|
|
result = false;
|
|
break;
|
|
}else {
|
|
result = true;
|
|
}
|
|
}
|
|
this.goodsAmount = amount;
|
|
this.goodsActualPay = this.goodsAmount - this.goodsDiscount;
|
|
}else {
|
|
result = true;
|
|
}
|
|
if (result){
|
|
val.num = 1;
|
|
if (_this.isMember){
|
|
this.goodsAmount += val.memberPrice
|
|
}else {
|
|
this.goodsAmount += val.retailPrice
|
|
}
|
|
this.goodsActualPay = this.goodsAmount - this.goodsDiscount;
|
|
this.goodsOrder.push(val);
|
|
this.goodsTotal += 1;
|
|
}
|
|
this.goods = ""
|
|
},
|
|
// 立即结算
|
|
settlement(){
|
|
this.isPay = true
|
|
this.dialogVisiblej = true
|
|
},
|
|
// 新增订单（重置）
|
|
resetting(){
|
|
this.oilOrder = [];
|
|
this.oilActualPay = 0;
|
|
this.oilTotal = 0;
|
|
this.oilAmount = 0;
|
|
this.amount = "";
|
|
},
|
|
// 获取员工列表
|
|
getStaffList(){
|
|
queryStaffs().then( response => {
|
|
this.staffList = response.data
|
|
})
|
|
},
|
|
// 油品订单信息
|
|
getOilOrder(){
|
|
this.dialogVisibleamount = false
|
|
this.oilOrder.push(this.form)
|
|
if (this.select == "元"){
|
|
this.oilAmount = +this.form.amount + this.oilAmount;
|
|
if (this.balance!=0){
|
|
if (this.balance>=(this.oilAmount - this.oilDiscount)){
|
|
this.consumeAmount = this.oilAmount - this.oilDiscount;
|
|
this.oilActualPay = 0;
|
|
}else {
|
|
this.consumeAmount = this.balance;
|
|
this.oilActualPay = this.oilAmount - this.oilDiscount - this.balance;
|
|
}
|
|
}else {
|
|
this.oilActualPay = this.oilAmount - this.oilDiscount;
|
|
}
|
|
}else {
|
|
this.oilAmount = +(this.form.oilPrice * this.form.amount) + this.oilAmount;
|
|
this.oilActualPay = this.oilAmount - this.oilDiscount;
|
|
}
|
|
this.oilTotal += 1;
|
|
this.select = "元";
|
|
},
|
|
// 选择“元”或“L”
|
|
changeSelect(){
|
|
if(this.select == "元"){
|
|
this.rise = [
|
|
{value:"￥100"},
|
|
{value:"￥150"},
|
|
{value:"￥200"},
|
|
{value:"￥300"},
|
|
];
|
|
}else {
|
|
this.rise = [
|
|
{value:"100L"},
|
|
{value:"150L"},
|
|
{value:"200L"},
|
|
{value:"300L"},
|
|
];
|
|
}
|
|
},
|
|
// 改变加油金额
|
|
changeAmount(amount){
|
|
if (this.select == "元"){
|
|
this.amount = amount.slice(1)
|
|
this.form.amount = this.amount
|
|
}else {
|
|
this.amount = amount.slice(0,3)
|
|
this.form.amount = this.amount
|
|
}
|
|
},
|
|
// 获取油号名称
|
|
getName(oilNameList,id){
|
|
let name = ""
|
|
let _this = this;
|
|
if(oilNameList!=null && oilNameList!=""){
|
|
oilNameList.forEach(item => {
|
|
if (item.id == id){
|
|
name = item.oilName;
|
|
_this.oilType = item.oilType;
|
|
}
|
|
})
|
|
}
|
|
return name;
|
|
},
|
|
// 获取油号信息
|
|
getOilName(){
|
|
getOilNameList().then( response => {
|
|
this.oilNameList = response.data;
|
|
})
|
|
},
|
|
// 根据手机号查询会员信息
|
|
getUser(){
|
|
if(this.select1=="会员手机号"){
|
|
getUserVoMobile({mobile:this.userNo}).then( response => {
|
|
if (response.data!=null){
|
|
this.member = response.data
|
|
}else {
|
|
this.$modal.msgError("会员信息不存在")
|
|
}
|
|
})
|
|
}else {
|
|
getUserVoName({name:this.userNo}).then( response => {
|
|
this.memberList = response.data
|
|
})
|
|
this.dialogVisibleMember = true;
|
|
}
|
|
},
|
|
// 查询所有商品信息
|
|
getGoods(){
|
|
listgoods().then( response => {
|
|
this.goodsList = response.data
|
|
})
|
|
},
|
|
// 加油金额
|
|
refuel(id){
|
|
this.amount = 0
|
|
this.dialogVisibleamount = true;
|
|
getOilNumGunById(id).then( response => {
|
|
this.form = response.data;
|
|
})
|
|
},
|
|
// 确定收款
|
|
collection(){
|
|
// JSON.parse()
|
|
this.map.oilAmount = this.oilAmount;
|
|
this.map.goodsAmount = this.goodsAmount;
|
|
this.map.oilActualPay = this.oilActualPay;
|
|
this.map.goodsActualPay = this.goodsActualPay;
|
|
this.map.oilDiscount = this.oilDiscount;
|
|
this.map.goodsDiscount = this.goodsDiscount;
|
|
this.map.goodsNum = this.goodsTotal;
|
|
this.map.oilOrder = JSON.stringify(this.oilOrder);
|
|
this.map.goodsOrder = JSON.stringify(this.goodsOrder);
|
|
this.map.authCode = this.authCode;
|
|
this.map.allAmount = this.oilActualPay + this.goodsActualPay;
|
|
this.map.consumeAmount = this.consumeAmount;
|
|
|
|
let _this = this;
|
|
addLJGoods(_this.map).then( response => {
|
|
if (response.data.oilOrder!=null){
|
|
_this.orderNo = response.data.oilOrder.orderNo;
|
|
if (response.data.oilOrder.orderStatus == "paid"){
|
|
_this.isPaySuccess = true;
|
|
}
|
|
}
|
|
if (response.data.goodsOrder!=null){
|
|
if (response.data.goodsOrder.status == "paid"){
|
|
_this.isPaySuccess = true;
|
|
}
|
|
}
|
|
})
|
|
this.loading = true;
|
|
_this.queryPayStatus();
|
|
let timer = setInterval(function () {
|
|
if (_this.isQuery == false) {
|
|
_this.loading = false;
|
|
_this.isPay = false;
|
|
clearInterval(_this.timer);
|
|
}
|
|
},500)
|
|
setTimeout(function (){
|
|
clearInterval(timer);
|
|
},30000)
|
|
|
|
this.authCode = "";
|
|
if (_this.isPaySuccess == true){
|
|
_this.oilAmount = 0;
|
|
_this.oilActualPay = 0;
|
|
_this.oilDiscount = 0;
|
|
_this.goodsAmount = 0;
|
|
_this.goodsActualPay = 0;
|
|
_this.goodsDiscount = 0;
|
|
_this.consumeAmount = 0;
|
|
_this.oilTotal = 0;
|
|
_this.goodsTotal = 0;
|
|
};
|
|
this.map = {
|
|
allAmount:0,
|
|
// 用户支付条码信息
|
|
authCode:'',
|
|
// 油品订单
|
|
oilOrder:"",
|
|
// 商品订单
|
|
goodsOrder:"",
|
|
// 支付方式
|
|
payType:"WECHAT",
|
|
// 油品订单金额
|
|
oilAmount:0,
|
|
// 商品订单金额
|
|
goodsAmount:0,
|
|
// 油品实付金额
|
|
oilActualPay:0,
|
|
// 商品实付金额
|
|
goodsActualPay:0,
|
|
// 付款用户
|
|
payUser:"",
|
|
// 油品优惠金额
|
|
oilDiscount:0,
|
|
// 商品优惠金额
|
|
goodsDiscount:0,
|
|
// 优惠券id
|
|
couponId:"",
|
|
// 提成金额
|
|
commissionAmount:0,
|
|
// 使用积分数量
|
|
usePoint:0,
|
|
// 积分金额
|
|
pointAmount:0,
|
|
// 终端
|
|
terminal:"PC",
|
|
// 商品数量
|
|
goodsNum:0,
|
|
// 会员消费金额（储值卡需要减少的金额）
|
|
consumeAmount:0,
|
|
};
|
|
},
|
|
// 查询订单支付状态
|
|
queryPayStatus(){
|
|
let _this = this;
|
|
_this.timer = setInterval(function (){
|
|
oilOrder({orderNo:_this.orderNo}).then( response => {
|
|
if (response.data!=null){
|
|
if (response.data.orderStatus == "unpaid"){
|
|
_this.isQuery = true;
|
|
}
|
|
if (response.data.orderStatus == "paid"){
|
|
_this.isPaySuccess = true;
|
|
_this.isQuery = false;
|
|
}
|
|
if (response.data.orderStatus == "payFail"){
|
|
_this.isPaySuccess = false;
|
|
_this.isQuery = false;
|
|
}
|
|
}
|
|
})
|
|
goodsOrder({orderNo:_this.orderNo}).then( response => {
|
|
if (response.data!=null){
|
|
if (response.data.status == "unpaid"){
|
|
_this.isQuery = true;
|
|
}
|
|
if (response.data.status == "paid"){
|
|
_this.isPaySuccess = true;
|
|
_this.isQuery = false;
|
|
}
|
|
if (response.data.status == "payFail"){
|
|
_this.isPaySuccess = false;
|
|
_this.isQuery = false;
|
|
}
|
|
}
|
|
})
|
|
},500)
|
|
},
|
|
handClose(){
|
|
if(this.isPaySuccess){
|
|
this.oilAmount = 0;
|
|
this.oilActualPay = 0;
|
|
this.oilDiscount = 0;
|
|
this.goodsAmount = 0;
|
|
this.goodsActualPay = 0;
|
|
this.goodsDiscount = 0;
|
|
this.consumeAmount = 0;
|
|
this.oilTotal = 0;
|
|
this.goodsTotal = 0;
|
|
}
|
|
this.isPay = true;
|
|
this.dialogVisiblej = false
|
|
this.isPaySuccess = false;
|
|
},
|
|
// 支付方式
|
|
payMethod(payType){
|
|
this.map.payType = payType;
|
|
},
|
|
// 获取支付方式
|
|
getPayList(){
|
|
getDicts("payment_type").then( response => {
|
|
this.payList = response.data;
|
|
})
|
|
// 获取油号列表信息
|
|
listOilNumGun().then( response => {
|
|
this.oilNumList = response.data
|
|
})
|
|
// 获取油号油枪对应信息
|
|
getOilNumGun({oilNum : "全部"}).then( response => {
|
|
this.oilNumGunList = response.data
|
|
})
|
|
},
|
|
handleClose(done) {
|
|
this.$confirm('确认关闭？')
|
|
.then(_ => {
|
|
done();
|
|
})
|
|
.catch(_ => {});
|
|
},
|
|
handleChange(value) {
|
|
let goods = this.goodsOrder;
|
|
let num = 0;
|
|
let amount = 0;
|
|
let _this = this;
|
|
goods.forEach(item => {
|
|
num += item.num
|
|
if (_this.isMember){
|
|
amount += item.memberPrice*item.num;
|
|
}else {
|
|
amount += item.retailPrice*item.num;
|
|
}
|
|
})
|
|
this.goodsTotal = num;
|
|
this.goodsAmount = amount;
|
|
this.goodsActualPay = this.goodsAmount - this.goodsDiscount;
|
|
},
|
|
handleClick(tab, event) {
|
|
let oilNum = ""
|
|
this.oilNumList.forEach(item => {
|
|
if (item.oilName == tab.name){
|
|
oilNum = item.numberId
|
|
}
|
|
})
|
|
if (tab.label == "全部"){
|
|
oilNum = "全部"
|
|
}
|
|
getOilNumGun({oilNum : oilNum}).then( response => {
|
|
this.oilNumGunList = response.data
|
|
})
|
|
},
|
|
gocomponents(index){
|
|
this.leftindex = index
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.but{
|
|
width: 150px;
|
|
height: 50px;
|
|
border-radius: 50px;
|
|
font-size: 20px;
|
|
}
|
|
.amountBlue{
|
|
color: #00afff;
|
|
font-weight: bold;
|
|
}
|
|
.amount{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
margin: 10px auto;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
background-color: #f6f6f6;
|
|
border-radius: 5px;
|
|
}
|
|
.app-center{
|
|
width: 100%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
.center-left{
|
|
width: 33%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
height: 98vh;
|
|
position: relative;
|
|
}
|
|
.bottom-posi{
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
}
|
|
.center-app{
|
|
width: 33%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
/*background: white;*/
|
|
|
|
}
|
|
.center-right{
|
|
width: 33%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin: 0px 10px;
|
|
|
|
|
|
|
|
}
|
|
.center-top{
|
|
width: 100%;
|
|
height: 86vh;
|
|
background: white;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
position: relative;
|
|
|
|
}
|
|
.center-top-title{
|
|
box-sizing: border-box;
|
|
padding: 10px 0px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #ececec;
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.center-top-tab{
|
|
box-sizing: border-box;
|
|
padding: 15px 0px;
|
|
|
|
}
|
|
.center-top-input{
|
|
width: 100%;
|
|
height: 60px;
|
|
background: #f8f8f8;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
input{
|
|
width: 90%;
|
|
font-size: 18px;
|
|
border: none;
|
|
outline: none;
|
|
background-color:transparent;
|
|
}
|
|
|
|
}
|
|
.center-top-data{
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
|
|
|
|
/*background-color: #f8f8f8;*/
|
|
}
|
|
.center-top-of{
|
|
width: 100%;
|
|
/*background-color: #99a9bf;*/
|
|
height: 70vh;
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
.wrap-wrap{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.of-box{
|
|
width: 31%;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
background-color: #b4d5ff;
|
|
height: 110px;
|
|
padding: 10px;
|
|
color: #3e4f60;
|
|
}
|
|
.of-title{
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
margin: 13px;
|
|
}
|
|
.data-top{
|
|
width: 100%;
|
|
background-color: #ededed;
|
|
box-sizing: border-box;
|
|
padding: 15px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.data-top-box{
|
|
width: 100%;
|
|
/*background-color: #ededed;*/
|
|
box-sizing: border-box;
|
|
padding: 15px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.data-top-three{
|
|
width: 55%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
.data-top-title{
|
|
width: 45%;
|
|
overflow: hidden;
|
|
}
|
|
.content-top-bottom{
|
|
position: absolute;
|
|
bottom:-16px;
|
|
width: 98%;
|
|
border-top: 1px solid #ececec;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transform: translate(-50%,-50%);
|
|
left: 50%;
|
|
color: #2c3e50;
|
|
font-size: 18px;
|
|
box-sizing: border-box;
|
|
padding: 15px ;
|
|
background-color: white;
|
|
|
|
|
|
}
|
|
.center-left-top{
|
|
width: 100%;
|
|
background: #5393ff;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.center-vh{
|
|
/*height: 68vh;*/
|
|
}
|
|
.center-left-hj{
|
|
background: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.center-left-th{
|
|
background: white;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
margin: 10px auto;
|
|
}
|
|
.center-left-wrap{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
/*margin-top: 280px;*/
|
|
}
|
|
.wrap-box{
|
|
width: 31%;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
.wrap-box :hover{
|
|
/*background: #00afff !important;*/
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #00afff;
|
|
cursor: pointer;
|
|
/*color: white;*/
|
|
}
|
|
|
|
.center-left-bottom{
|
|
width: 100%;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.bottom-qk{
|
|
border: 1px solid #99a9bf;
|
|
box-sizing: border-box;
|
|
padding: 14px 20px;
|
|
border-radius: 50px;
|
|
color: #99a9bf;
|
|
margin: 15px 0px ;
|
|
}
|
|
.bottom-qd{
|
|
border: 1px solid #13ce66;
|
|
background: #13ce66;
|
|
box-sizing: border-box;
|
|
padding: 14px 20px;
|
|
border-radius: 50px;
|
|
color: #ffffff;
|
|
|
|
margin: 15px 10px ;
|
|
}
|
|
.bottom-gd{
|
|
border: 1px solid #5393ff;
|
|
background: #5393ff;
|
|
box-sizing: border-box;
|
|
padding: 14px 20px;
|
|
border-radius: 50px;
|
|
color: #ffffff;
|
|
|
|
margin: 15px 10px ;
|
|
}
|
|
|
|
.bottom-price{
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
}
|
|
.price-red{
|
|
color: red;
|
|
}
|
|
.center-left-lv{
|
|
width: 60%;
|
|
height: 80px;
|
|
background-color: #13ce66;
|
|
color: white;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
}
|
|
.th-box{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f6f8f9;
|
|
box-sizing: border-box;
|
|
padding: 10px 0px;
|
|
}
|
|
.hj-box{
|
|
width: 33%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bule{
|
|
font-weight: 700;
|
|
color: #5393ff !important;
|
|
}
|
|
.vip-bottom{
|
|
border: 1px solid #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 5px 15px;
|
|
border-radius: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
.el-row {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.el-col {
|
|
border-radius: 2px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
.bg-purple-dark {
|
|
background: #eeeeee;
|
|
}
|
|
.bg-purple {
|
|
background: #d3dce6;
|
|
}
|
|
.bg-purple-light {
|
|
background: #e5e9f2;
|
|
}
|
|
.grid-content {
|
|
height: 50px;
|
|
font-size: 20px;
|
|
width: 120px;
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
}
|
|
.row-bg {
|
|
padding: 10px 0;
|
|
background-color: #eeeeee;
|
|
}
|
|
.elBut{
|
|
width: 85px;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
}
|
|
.addr{
|
|
color: grey;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|