1890 lines
64 KiB
Vue
1890 lines
64 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="baseUrl + 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">-->
|
||
<!-- 会员等级：{{ gradeName }}-->
|
||
<!-- </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 class="o-top" v-if="userInfo">
|
||
<div style="width: 50%">
|
||
<div class="d-s">
|
||
<img src="./imgs/new_user.png" style="width: 32px;height: 32px;margin-right: 10px">
|
||
<div >
|
||
<div style="font-weight: bold;margin-bottom: 2px">{{chooseVipUser.name||'匿名'}}</div>
|
||
<div class="d-s">
|
||
<span>{{chooseVipUser.mobile}}</span>
|
||
<sapn style="margin: 0px 5px">普通会员</sapn>
|
||
<el-popover
|
||
placement="bottom"
|
||
trigger="hover">
|
||
<div> 储值卡：￥1000.00 </div>
|
||
<div> 储值卡：￥1000.00 </div>
|
||
<div> 储值卡：￥1000.00 </div>
|
||
<div> 储值卡：￥1000.00 </div>
|
||
<div> 储值卡：￥1000.00 </div>
|
||
<img slot="reference" src="./imgs/kbao.png" style="width: 24px;height: 24px;margin-right: 10px">
|
||
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="d-s" >-->
|
||
<!-- <div style="font-size: 12px;margin-right: 5px">储值卡：￥{{chooseVipUser.cardBalance}} </div>-->
|
||
<!-- <div style="font-size: 12px">囤油卡：￥1000.000</div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
<div class="d-s" style="width: 50%">
|
||
<div class="an_bor" @click="addMemberRecharge()">会员充值</div>
|
||
<div class="an_bor" @click="restVipUser">重置会员</div>
|
||
<div class="an_bor" @click="addFreeTicket()" >赠送优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="o-top" v-if="!userInfo">
|
||
<div class="left_input">
|
||
<el-autocomplete
|
||
v-model="userMobile"
|
||
style="width: 95%; "
|
||
:fetch-suggestions="getUsers"
|
||
placeholder="请输入会员手机号"
|
||
>
|
||
<template slot-scope="{ item }">
|
||
<div class="name" @click="chooseUser(item)">{{ item.name+" "+item.mobile }}</div>
|
||
</template>
|
||
</el-autocomplete>
|
||
<i class="el-icon-search" style="font-size: 18px;margin-right: 10px" ></i>
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="an_bor" @click="addVip()">新增会员</div>
|
||
</div>
|
||
|
||
<!-- 渲染会员列表 -->
|
||
<div class="taber-box" v-for="(item,index) in vipUserList" :key="index">
|
||
<div class="goods_name">
|
||
<!-- <img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">-->
|
||
{{ item.name }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-left-hj">
|
||
<div>使用积分</div>
|
||
<div>-{{allPoints}}</div>
|
||
</div>
|
||
|
||
<div class="center-left-hj" v-show="isMember">
|
||
<div>
|
||
积分余额
|
||
<span>（账户余额：{{ member.points }}积分）</span>
|
||
<span v-if="!isTheBalanceIsSufficient" style="color: red">积分余额不足</span>
|
||
</div>
|
||
<div>-{{ allPoints }}</div>
|
||
</div>
|
||
<div class="center-left-th">
|
||
<div class="th-box">
|
||
<div>扫码支付</div>
|
||
<div class="bule">{{allPoints}}</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"
|
||
@click="payMethod(item)"
|
||
v-for="item in payList"
|
||
v-if="item.dictValue!=='APPLET_CODE'"
|
||
:key="item.dictValue"
|
||
:value="item.dictValue"
|
||
:class="{ 'wrap-box2': item.dictValue === paymentType }"
|
||
>
|
||
<span >{{ item.dictLabel }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="center-left-bottom">
|
||
<div>
|
||
<div class="bottom-price">￥{{allAmout}}</div>
|
||
<div class="price-red">积分合计：{{allPoints}}</div>
|
||
</div>
|
||
<div v-if="!isMember" style="background-color: #ffa6a6;" class="center-left-lv" >请先登录会员</div>
|
||
<div v-if="isMember && !isTheBalanceIsSufficient" style="background-color: #a9fcce;" class="center-left-lv" >余额不足</div>
|
||
<div v-if="isMember && isTheBalanceIsSufficient" class="center-left-lv" @click="settlement">立即结算</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 右侧-->
|
||
<div class="center-right">
|
||
<div class="center-right-top" style="margin-left: 25px;">
|
||
<el-tabs v-model="queryParams.categoryId" style="width: 100%" @tab-click="handleClick">
|
||
<el-tab-pane label="全部" name='first'></el-tab-pane>
|
||
<el-tab-pane v-for="(item,index) in giftCategoryList" :label="item.categoryName" :name='item.id.toString()'></el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div style="width: 200px;margin-left: 30px; ">
|
||
<el-input v-model="queryParams.giftName" @input="getGift()" placeholder="请输入内容"></el-input>
|
||
</div>
|
||
<div class="wrap-right">
|
||
<div class="ts-box">
|
||
<div class="wrap-right-box" v-for="(item,index) in giftList" :key="item.id" @click="addGift(item)">
|
||
<div class="new_card" >
|
||
<el-badge :hidden="!item.markPurchases>0" :value="item.markPurchases" class="item">
|
||
<div class="box-six">
|
||
<img :src="imagePath+item.coverImage" >
|
||
</div>
|
||
<div class="box-four">
|
||
<div class="title-red" >
|
||
<span v-if="item.exchangeMethod == '积分' || item.exchangeMethod == '积分+金额' || item.exchangeMethod == '积分+加钱购'">{{item.exchangePoints}}积分</span>
|
||
<span v-if="item.exchangeMethod == '积分+金额'">+</span>
|
||
<span v-if="item.exchangeMethod == '金额' || item.exchangeMethod == '积分+金额'">￥{{item.exchangeAmount}}</span>
|
||
<!-- <span v-if="item.exchangeMethod == '积分+加钱购'">+{{item.moneyRatio}}加钱比例</span>-->
|
||
</div>
|
||
<div class="title-hui">
|
||
<span>库存:{{item.remainingInventory === -1?"不限":item.remainingInventory}}</span>
|
||
</div>
|
||
<div class="title-goods">
|
||
<el-tag type="danger" size="mini" effect="dark">{{item.exchangeMethod}}</el-tag>
|
||
<!-- <span style="margin-left: 5px">{{item.giftName}}</span>-->
|
||
<el-tooltip class="item" effect="dark" :content="item.giftName" placement="top-start">
|
||
|
||
<span style="margin-left: 5px; display: inline-block; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.giftName }}</span>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</el-badge>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-right-bottom">
|
||
<div class="chongzhi" @click="reset()"> <i class="el-icon-refresh"></i> 重置</div>
|
||
<div style="display: flex;align-items: center">
|
||
<div class="ddjil" @click="orderHistoryMethod">订单记录</div>
|
||
<div class="gwuc" @click="shoppingCartMethod()">
|
||
<el-badge :hidden="markPurchasesAll<1" :value="markPurchasesAll" class="item">
|
||
<i class="el-icon-shopping-cart-2"></i> <span style="margin-left: 5px">购物车</span>
|
||
</el-badge>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 会员登录-->
|
||
<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 ? getGradeName(gradeList,member.gradeId) : "--"}}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="储值余额">
|
||
<template slot="extra">
|
||
<!-- <span style="color: red;margin-right: 20px">余额充值</span>-->
|
||
<span style="font-weight: bold">￥{{member.cardBalance ? member.cardBalance : "--"}}</span>
|
||
</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="请选择会员"
|
||
:visible.sync="dialogVisibleMember"
|
||
:close-on-click-modal="false">
|
||
<div class="wrap-wrap" style="height:700px;overflow-y: scroll;">
|
||
<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="baseUrl + 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>
|
||
<!-- 加油员姓名-->
|
||
<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),dialogVisible = false"
|
||
: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="openShoppingCart" width="50%">
|
||
<el-alert
|
||
style="margin-bottom: 5px"
|
||
title="“加钱够”商品仅支持在单商品结算时支持积分不足情况下使用加钱购进行付款,多个商品结算不支持“加钱够”计算"
|
||
type="warning"
|
||
:closable="false">
|
||
</el-alert>
|
||
<el-table
|
||
:data="shoppingCart"
|
||
stripe
|
||
align="center"
|
||
style="width: 100%">
|
||
<el-table-column align="center" prop="date" label="商品信息">
|
||
<el-table-column align="center" prop="date" label="商品图">
|
||
<template slot-scope="scope">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="imagePath+scope.row.coverImage"
|
||
fit="cover"></el-image>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="giftName" label="商品名称" ></el-table-column>
|
||
<el-table-column align="center" prop="remainingInventory" label="库存">
|
||
<template slot-scope="scope">
|
||
{{scope.row.remainingInventory === -1?"不限":scope.row.remainingInventory}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="date" label="价格">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.exchangeMethod == '积分' || scope.row.exchangeMethod == '积分+金额' || scope.row.exchangeMethod == '积分+加钱购'">{{scope.row.exchangePoints}}积分</span>
|
||
<span v-if="scope.row.exchangeMethod == '积分+金额'">+</span>
|
||
<span v-if="scope.row.exchangeMethod == '金额' || scope.row.exchangeMethod == '积分+金额'">￥{{scope.row.exchangeAmount}}</span>
|
||
<span v-if="scope.row.exchangeMethod == '积分+加钱购'">+{{scope.row.moneyRatio}}加钱比例</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="name" label="购买数量" width="200px">
|
||
<template slot-scope="scope">
|
||
|
||
<el-input-number :disabled="scope.row.markPurchases>=scope.row.remainingInventory" v-model="scope.row.markPurchases" @change="changePurchases(scope.row),changeCompute" :min="1" :max="10000" label="" style="width: 130px" size="small"></el-input-number>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="totalPoints_sum" label="合计">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
fixed="right"
|
||
label="操作"
|
||
width="100">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="delShooping(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
<!-- 立即结算-->
|
||
<el-dialog
|
||
:title="payType"
|
||
: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">
|
||
￥{{allAmout}}
|
||
</div>
|
||
<div style="text-align: center;margin-bottom: 10px">
|
||
减去积分：{{ allPoints }}
|
||
</div>
|
||
<template v-if="paymentType !== 'CASH' ">
|
||
<template v-if="allAmout != 0 ">
|
||
|
||
<div>
|
||
<el-input
|
||
v-model="authCode"
|
||
v-focus ref="getFocus"
|
||
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>
|
||
</template>
|
||
</template>
|
||
|
||
<template v-else-if="allAmout>0">
|
||
<div>
|
||
<el-input v-model="authCode"
|
||
v-focus ref="getFocus"
|
||
autofocus
|
||
@input="changeSeekZero"
|
||
@keydown.enter.native="collection"
|
||
placeholder="请输入收款金额">
|
||
</el-input>
|
||
</div>
|
||
<div style="text-align: right;margin: 10px 0">
|
||
<span>应找零</span>
|
||
<span style="color: red;font-size: 18px"> ￥{{ seekZero }}</span>
|
||
</div>
|
||
</template>
|
||
|
||
<el-divider></el-divider>
|
||
<span slot="footer" class="dialog-footer" style="display: flex;justify-content: space-around">
|
||
<el-button @click="dialogVisiblej = false, visflg = true" 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-if="isAwait">
|
||
<el-result icon="warning" 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-drawer title="订单记录" :visible.sync="openOrderHistory" direction="rtl" size="1300px">
|
||
<PointsCashier></PointsCashier>
|
||
</el-drawer>
|
||
|
||
|
||
<div id="reportSuccess" ref="report" class="box-center" v-show="false">
|
||
<div class="box-title">积分商城订单</div>
|
||
<div class="box-ge">
|
||
<div v-for="item in shoppingCart" :key="item.id">
|
||
<div class="input-box">
|
||
<div>商品名称</div>
|
||
<div>{{ item.giftName }}</div>
|
||
</div>
|
||
<div class="input-box">
|
||
<div>商品数量</div>
|
||
<div>{{ item.markPurchases }}</div>
|
||
</div>
|
||
<div class="input-box">
|
||
<div>价格</div>
|
||
<span v-if="item.exchangeMethod == '积分' || item.exchangeMethod == '积分+金额' || item.exchangeMethod == '积分+加钱购'">{{item.exchangePoints}}积分</span>
|
||
<span v-if="item.exchangeMethod == '积分+金额'">+</span>
|
||
<span v-if="item.exchangeMethod == '金额' || item.exchangeMethod == '积分+金额'">￥{{item.exchangeAmount}}</span>
|
||
<span v-if="item.exchangeMethod == '积分+加钱购'">+{{item.moneyRatio}}加钱比例</span> </div>
|
||
</div>
|
||
<hr/>
|
||
|
||
<div class="input-box">
|
||
<div>积分合计：</div>
|
||
<div>{{allPoints}}</div>
|
||
</div>
|
||
<div class="input-box" v-if="allAmout">
|
||
<div>总价合计：</div>
|
||
<div>￥{{allAmout}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCheckTheStatusOfYourPaymentByIntegralApi, getDetermineTheInventoryOfTheProductApi,
|
||
getGiftApi,
|
||
getGiftCategoryApi,
|
||
getIntegralOrdersProcessingApi
|
||
} from "@/api/cashier/integral";
|
||
import BigNumber from 'bignumber.js';
|
||
import PointsCashier from "@/views/cashier/NewComponents/integralOrder/pointsCashier";
|
||
import {getDicts} from "@/api/dict/data";
|
||
import {getUserInfoMobile, getUserVoMobile, getUserVoName, userListByPhone} from "@/api/cashier/user";
|
||
import {getUserGrade, listUserGrade} from "@/api/cashier/usergrade";
|
||
import {queryStaffs, staffInfo} from "@/api/cashier/staff";
|
||
import {connectFlag, getLodop} from "@/api/LodopFuncs";
|
||
import {listCardFavorableRecord} from "@/api/cashier/cardfavorablerecord";
|
||
import {getReturnCode, printIntegralReport, sendPrintIndex} from "@/api/print";
|
||
|
||
export default {
|
||
name: "Integral",
|
||
components: {PointsCashier},
|
||
dict: [],
|
||
data(){
|
||
return{
|
||
userMobile:null,
|
||
seekZero :0,
|
||
userInfo: false,
|
||
baseUrl:process.env.VUE_APP_BASE_API,
|
||
shoppingCart:[],
|
||
giftList:'',
|
||
giftCategoryList:'',
|
||
queryParams: {
|
||
categoryId:'',
|
||
giftName:'',
|
||
deliveryMethod:'门店自提',
|
||
page: 1,
|
||
pageSize: 10000,
|
||
},
|
||
markPurchasesAll: 0,
|
||
// 图片根目录
|
||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||
activeName:"first",
|
||
input:'',
|
||
|
||
allPoints:0,
|
||
allAmout:0,
|
||
allMoneyRatio:0,
|
||
|
||
dialogVisible: false, //员工选择
|
||
dialogVisiblevip:false, // 会员查询
|
||
dialogVisibleMember: false,// 模糊查询会员
|
||
dialogVisiblej: false,// 支付方式
|
||
visflg: false,// 支付方式
|
||
openShoppingCart: false,
|
||
openOrderHistory: false,
|
||
// 会员相关
|
||
isMember: false, //是否为会员
|
||
balance:0, // 账户余额
|
||
member:{}, // 会员信息
|
||
memberList:[], // 会员列表信息
|
||
select1:'会员手机号',
|
||
// 会员信息
|
||
userNo:"",
|
||
gradeName:"",
|
||
gradeList:"",
|
||
// 员工相关
|
||
staffList:[],
|
||
staff:"",
|
||
//支付方式
|
||
payList:[],
|
||
authCode:'',
|
||
isPay:true,
|
||
isPaySuccess:false,
|
||
isAwait: false,
|
||
|
||
loading:false,
|
||
paymentType : 'ALIPAY', // 默认支付宝
|
||
payType:'支付宝支付'
|
||
// isTheBalanceIsSufficient:false, //余额是否充足
|
||
}
|
||
|
||
},
|
||
created() {
|
||
this.getGiftCategory();
|
||
this.getGift();
|
||
this.getPayList()
|
||
this.getStaffList();
|
||
this.getStaff();
|
||
this.getCouponList();
|
||
|
||
},
|
||
directives: {
|
||
// 注册一个局部的自定义指令 v-focus
|
||
focus: {
|
||
// 指令的定义
|
||
inserted: function (el) {
|
||
// 聚焦元素
|
||
el.querySelector('input').focus()
|
||
},
|
||
},
|
||
},
|
||
methods:{
|
||
changeSeekZero(){
|
||
this.seekZero = (this.authCode - this.allAmout).toFixed(2)
|
||
|
||
},
|
||
// 获取所有积分商品
|
||
async getGift() {
|
||
if (this.queryParams.categoryId ==='first') {
|
||
this.queryParams.categoryId = null
|
||
}
|
||
await getGiftApi(this.queryParams).then(res=>{
|
||
this.giftList = res.data.records;
|
||
})
|
||
console.log("imagePath",this.imagePath)
|
||
},
|
||
// 获取商品分类
|
||
getGiftCategory() {
|
||
getGiftCategoryApi().then(res=>{
|
||
this.giftCategoryList = res.data.records;
|
||
})
|
||
},
|
||
// 获取支付方式
|
||
getPayList() {
|
||
getDicts("payment_type").then(response => {
|
||
this.payList = response.data;
|
||
})
|
||
},
|
||
payMethod(payType){
|
||
this.paymentType = payType.dictValue
|
||
this.payType = payType.dictLabel +"支付"
|
||
},
|
||
// 点击商品增加库存
|
||
async addGift(data) {
|
||
// if (data.giftType === "实物商品") {
|
||
// //判断商品库存(原库存)是否足够
|
||
//
|
||
// let stock = 1;
|
||
// if (data.markPurchases) {
|
||
// stock = data.markPurchases+1
|
||
// }
|
||
// await getDetermineTheInventoryOfTheProductApi({id:data.goodsId,
|
||
// stock:stock}).then(res=> {
|
||
// if (!res.data) {
|
||
// // data.markPurchases = data.markPurchases-1
|
||
// this.$message.error('该商品库存不足');
|
||
// return
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
|
||
if (this.shoppingCart.length != 0) {
|
||
// 只能订购加钱购
|
||
let flag = false
|
||
this.shoppingCart.forEach(res => {
|
||
if (res.exchangeMethod == "积分+加钱购") {
|
||
flag = true
|
||
}
|
||
})
|
||
if (data.exchangeMethod == "积分+加钱购" || flag) {
|
||
flag = false
|
||
this.shoppingCart.forEach(res => {
|
||
if (res.id != data.id ) {
|
||
flag = true
|
||
return
|
||
}
|
||
})
|
||
}
|
||
if (flag){
|
||
this.$message.error('“加钱购”商品仅支持在单商品结算时支持积分不足情况下使用加钱购进行付款,多个商品结算不支持“加钱够”计算');
|
||
return
|
||
}
|
||
}
|
||
if (data.markPurchases) {
|
||
if (data.markPurchases>=data.remainingInventory){
|
||
this.$message.error('库存不足');
|
||
return
|
||
}
|
||
data.markPurchases = data.markPurchases+1
|
||
}else {
|
||
if (data.remainingInventory == 0) {
|
||
this.$message.error('库存不足');
|
||
return
|
||
}
|
||
this.$set(data, "markPurchases", 1);
|
||
}
|
||
this.markPurchasesAll++
|
||
console.log("addGift",data)
|
||
// 计算总额
|
||
this.dataChange(data);
|
||
if (this.shoppingCart.length === 0) {
|
||
this.shoppingCart.push(data);
|
||
} else {
|
||
let flag = false;
|
||
this.shoppingCart.forEach(shopp=>{
|
||
if (data.id === shopp.id) {
|
||
flag = true;
|
||
}
|
||
})
|
||
if (!flag) {
|
||
this.shoppingCart.push(data);
|
||
}
|
||
}
|
||
this.allData();
|
||
// 计算余额是否足够
|
||
},
|
||
handleClick(tab, event){
|
||
this.getGift()
|
||
},
|
||
// 选择会员
|
||
chooseUser(mobile,id){
|
||
console.log("this.member",this.member)
|
||
if (this.member.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;
|
||
}
|
||
}else {
|
||
this.$message.error('请先选择会员');
|
||
}
|
||
|
||
},
|
||
// 选择会员信息
|
||
handleChoose(data){
|
||
this.member = data;
|
||
this.dialogVisibleMember = false;
|
||
this.allData();
|
||
},
|
||
// 根据手机号查询会员信息
|
||
getUser(){
|
||
if(this.select1=="会员手机号"){
|
||
getUserInfoMobile({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.userVo
|
||
})
|
||
this.dialogVisibleMember = true;
|
||
}
|
||
},
|
||
getUsers(queryString, cb){
|
||
userListByPhone({mobile:queryString}).then( response => {
|
||
if (response.data){
|
||
cb(response.data)
|
||
console.log(response.data,608)
|
||
}else {
|
||
this.$modal.msgError("会员信息不存在")
|
||
}
|
||
})
|
||
},
|
||
// 获取会员等级信息
|
||
// getGrade(id){
|
||
// getUserGrade(id).then( response => {
|
||
// this.gradeName = response.data.name;
|
||
// })
|
||
// return this.gradeName;
|
||
// },
|
||
// 重置会员
|
||
resetMember(){
|
||
this.member = {};
|
||
this.isMember = false;
|
||
this.userNo = "";
|
||
},
|
||
// 获取当前账户信息
|
||
getStaff(){
|
||
staffInfo().then( response => {
|
||
// this.staff = response.data;
|
||
console.log("response",response.data)
|
||
this.staff = response.data;
|
||
// this.map.staffId = this.staff.id;
|
||
})
|
||
},
|
||
// 选择员工信息
|
||
chooseStaff(data){
|
||
this.staff = data;
|
||
// this.map.staffId = this.staff.id;
|
||
},
|
||
// 获取员工列表
|
||
getStaffList(){
|
||
queryStaffs().then( response => {
|
||
this.staffList = response.data
|
||
})
|
||
},
|
||
// 重置
|
||
async reset() {
|
||
this.shoppingCart=[]
|
||
this.markPurchasesAll = 0
|
||
this.allPoints=0
|
||
this.allAmout=0
|
||
this.allMoneyRatio=0
|
||
this.giftList = ''
|
||
this.getGiftCategory();
|
||
|
||
await this.getGift();
|
||
// this.paymentType = ''
|
||
this.resetMember()
|
||
},
|
||
// 打开购物车
|
||
shoppingCartMethod() {
|
||
if (this.shoppingCart == [] || this.shoppingCart.length < 1) {
|
||
this.$message({
|
||
message: '请先选择商品！',
|
||
type: 'warning'
|
||
});
|
||
} else {
|
||
this.openShoppingCart = true
|
||
this.dataChange(this.shoppingCart[0])
|
||
}
|
||
},
|
||
// 购物车页面计算
|
||
changePurchases(data) {
|
||
//计算总积分
|
||
this.dataChange(data);
|
||
this.allData()
|
||
},
|
||
changeCompute(newValue,oldValue){
|
||
this.markPurchasesAll = this.markPurchasesAll + (newValue - oldValue)
|
||
},
|
||
// 删除商品
|
||
delShooping(data) {
|
||
|
||
if (this.markPurchasesAll >= data.markPurchases) {
|
||
this.markPurchasesAll = this.markPurchasesAll - data.markPurchases
|
||
}
|
||
data.markPurchases = 0;
|
||
this.shoppingCart = this.shoppingCart.filter(item => item.id !== data.id);
|
||
this.allData()
|
||
},
|
||
allData() {
|
||
this.allPoints = 0
|
||
this.allAmout = 0
|
||
let allPoints = new BigNumber(this.allPoints)
|
||
let allAmout = new BigNumber(this.allAmout)
|
||
let allMoneyRatio = new BigNumber(this.allMoneyRatio)
|
||
|
||
console.log("this.shoppingCart",this.shoppingCart)
|
||
|
||
this.shoppingCart.forEach(res => {
|
||
if (res.exchangePoints_sum) {
|
||
let exchangePoints_sum = new BigNumber(res.exchangePoints_sum);
|
||
allPoints = allPoints.plus(exchangePoints_sum);
|
||
}
|
||
// todo 计算
|
||
if (res.exchangeAmount_sum) {
|
||
let exchangeAmount_sum = new BigNumber(res.exchangeAmount_sum);
|
||
allAmout = allAmout.plus(exchangeAmount_sum);
|
||
}
|
||
});
|
||
|
||
// 计算加钱购
|
||
if (this.shoppingCart && this.shoppingCart.length === 1 && this.shoppingCart[0].exchangeMethod === '积分+加钱购' && this.shoppingCart[0].moneyRatio) {
|
||
let data = this.shoppingCart[0];
|
||
// 计算加钱购商品一共多少积分
|
||
let markPurchases = new BigNumber(data.markPurchases);
|
||
let exchangePoints = markPurchases.multipliedBy(new BigNumber(data.exchangePoints));
|
||
// 拿到总的积分
|
||
this.member.points = this.member.points?this.member.points:0
|
||
let points = this.member.points - exchangePoints.toNumber(); // 使用 toNumber() 获取 BigNumber 的数值
|
||
if (this.member.points<0) {
|
||
points = 0
|
||
}
|
||
// 以及分等一多少
|
||
if (points < 0) {
|
||
|
||
// 计算需要的金额
|
||
points = Math.abs(points);
|
||
|
||
|
||
allAmout = points * data.moneyRatio; // 直接使用 JavaScript 中的乘法
|
||
this.allAmout = allAmout.toFixed(2);
|
||
this.allPoints = this.member.points;
|
||
} else {
|
||
console.log("计算加钱购",exchangePoints)
|
||
console.log("计算加钱购",this.member.points)
|
||
|
||
this.allAmout = 0
|
||
this.allPoints = exchangePoints.toNumber();
|
||
}
|
||
return
|
||
}
|
||
|
||
|
||
// 更新组件的值
|
||
this.allPoints = Number(allPoints).toFixed(2);
|
||
this.allAmout = Number(allAmout).toFixed(2);
|
||
},
|
||
dataChange(data) {
|
||
// 判断支付方式 (计算积分)
|
||
if (data.exchangeMethod =='积分'){
|
||
let exchange = new BigNumber(data.exchangePoints);
|
||
let mark = new BigNumber(data.markPurchases);
|
||
let exchangePoints_sum = exchange.multipliedBy(mark);
|
||
if (data.exchangePoints_sum) {
|
||
data.exchangePoints_sum = Number(exchangePoints_sum);
|
||
}else {
|
||
this.$set(data, "exchangePoints_sum", exchangePoints_sum);
|
||
}
|
||
if (data.totalPoints_sum) {
|
||
data.totalPoints_sum = exchangePoints_sum.toString()+"积分";
|
||
}else {
|
||
this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分");
|
||
}
|
||
}else if (data.exchangeMethod =='金额') {
|
||
let amount = new BigNumber(data.exchangeAmount);
|
||
let mark = new BigNumber(data.markPurchases);
|
||
let exchangeAmount_sum = amount.multipliedBy(mark);
|
||
|
||
if (data.exchangeAmount_sum) {
|
||
data.exchangeAmount_sum = Number(exchangeAmount_sum);
|
||
}else {
|
||
this.$set(data, "exchangeAmount_sum", exchangeAmount_sum);
|
||
}
|
||
if (data.totalPoints_sum) {
|
||
data.totalPoints_sum = "￥"+exchangeAmount_sum.toString();
|
||
}else {
|
||
this.$set(data, "totalPoints_sum", "￥"+exchangeAmount_sum);
|
||
}
|
||
}else if (data.exchangeMethod =='积分+金额') {
|
||
let exchange = new BigNumber(data.exchangePoints);
|
||
let mark = new BigNumber(data.markPurchases);
|
||
let exchangePoints_sum = exchange.multipliedBy(mark);
|
||
|
||
if (data.exchangePoints_sum) {
|
||
data.exchangePoints_sum = Number(exchangePoints_sum);
|
||
}else {
|
||
this.$set(data, "exchangePoints_sum", exchangePoints_sum);
|
||
}
|
||
|
||
let amount = new BigNumber(data.exchangeAmount);
|
||
let exchangeAmount_sum = amount.multipliedBy(mark);
|
||
|
||
if (data.exchangeAmount_sum) {
|
||
data.exchangeAmount_sum = Number(exchangeAmount_sum);
|
||
}else {
|
||
this.$set(data, "exchangeAmount_sum", exchangeAmount_sum);
|
||
}
|
||
if (data.totalPoints_sum) {
|
||
data.totalPoints_sum = exchangePoints_sum.toString()+"积分"+"+"+"￥"+exchangeAmount_sum.toString();
|
||
}else {
|
||
this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+"￥"+exchangeAmount_sum);
|
||
}
|
||
|
||
}else if (data.exchangeMethod =='积分+加钱购') {
|
||
|
||
|
||
let exchangePoints_sum = 0
|
||
let exchangeAmount_sum = 0
|
||
|
||
// let data1 = this.shoppingCart[0];
|
||
// 计算加钱购商品一共多少积分
|
||
let markPurchases = new BigNumber(data.markPurchases);
|
||
let exchangePoints = markPurchases.multipliedBy(new BigNumber(data.exchangePoints));
|
||
// 拿到总的积分
|
||
this.member.points = this.member.points?this.member.points:0
|
||
let points = this.member.points - exchangePoints.toNumber(); // 使用 toNumber() 获取 BigNumber 的数值
|
||
console.log("points",points)
|
||
// 以及分等一多少
|
||
if (points < 0) {
|
||
|
||
// 计算需要的金额
|
||
points = Math.abs(points);
|
||
|
||
|
||
exchangeAmount_sum = points * data.moneyRatio; // 直接使用 JavaScript 中的乘法
|
||
exchangeAmount_sum = exchangeAmount_sum.toFixed(2);
|
||
|
||
exchangePoints_sum = this.member.points;
|
||
} else {
|
||
exchangeAmount_sum = 0
|
||
exchangePoints_sum = exchangePoints.toNumber();
|
||
}
|
||
this.$set(data, "exchangePoints_sum", exchangePoints_sum)
|
||
this.$set(data, "exchangeAmount_sum", exchangeAmount_sum)
|
||
|
||
|
||
if (data.totalPoints_sum) {
|
||
data.totalPoints_sum = exchangePoints_sum+"积分"+"+"+exchangeAmount_sum+"";
|
||
}else {
|
||
this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+exchangeAmount_sum+"");
|
||
|
||
}
|
||
console.log("数据",data)
|
||
return
|
||
|
||
//
|
||
// let exchange = new BigNumber(data.exchangePoints);
|
||
// let mark = new BigNumber(data.markPurchases);
|
||
// let exchangePoints_sum = exchange.multipliedBy(mark);
|
||
// this.$set(data, "exchangePoints_sum", exchangePoints_sum);
|
||
//
|
||
// if (data.exchangePoints_sum) {
|
||
// data.exchangePoints_sum = Number(exchangePoints_sum);
|
||
// }else {
|
||
// this.$set(data, "exchangePoints_sum", exchangePoints_sum);
|
||
// }
|
||
//
|
||
// let ratio = new BigNumber(data.moneyRatio);
|
||
// let moneyRatio_sum = ratio.multipliedBy(mark);
|
||
// this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"");
|
||
//
|
||
// if (data.moneyRatio_sum) {
|
||
// data.moneyRatio_sum = moneyRatio_sum;
|
||
// }else {
|
||
// this.$set(data, "moneyRatio_sum", moneyRatio_sum);
|
||
// }
|
||
// if (data.totalPoints_sum) {
|
||
// data.totalPoints_sum = exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"";
|
||
// }else {
|
||
// this.$set(data, "totalPoints_sum", exchangePoints_sum+"积分"+"+"+moneyRatio_sum+"");
|
||
//
|
||
// }
|
||
// console.log("data积分",data)
|
||
}
|
||
},
|
||
// 打开订单记录
|
||
orderHistoryMethod() {
|
||
this.openOrderHistory = true
|
||
},
|
||
// 立即结算
|
||
async settlement(){
|
||
if (this.shoppingCart.length <1){
|
||
this.$message.error('请先选择商品');
|
||
return
|
||
} else if(!this.paymentType) {
|
||
this.$message.error('请先选择支付方式');
|
||
return
|
||
}
|
||
this.isPay = true;
|
||
this.dialogVisiblej = true
|
||
if (this.paymentType !== 'CASH') {
|
||
if (this.allAmout != 0) {
|
||
// 发送扫码机请求（易联云网络下发）
|
||
await this.getSendPrintIndex(this.allAmout);
|
||
this.getCode(this.allAmout)
|
||
|
||
}
|
||
|
||
}
|
||
},
|
||
// 网络下发之后获取条码
|
||
getCode(amount) {
|
||
this.jishuqi++;
|
||
if (this.jishuqi == 30) {
|
||
this.jishuqi = 0
|
||
return
|
||
}
|
||
getReturnCode ({payAmount:amount}).then(res=>{
|
||
if (res.data === "300") {
|
||
setTimeout(() => {
|
||
this.getCode(amount); // 重新发起请求
|
||
}, 1000); // 停顿一秒
|
||
}else {
|
||
this.authCode = res.data
|
||
}
|
||
})
|
||
},
|
||
getSendPrintIndex(amount) {
|
||
sendPrintIndex({payAmount:amount}).then(ress=>{
|
||
if (ress.data != "success") {
|
||
this.$modal.msgError("扫码机发起付款失败！")
|
||
return;
|
||
}
|
||
})
|
||
},
|
||
integralReport() {
|
||
let shoppingCart = []
|
||
this.shoppingCart.forEach(res=>{
|
||
let price = ''
|
||
if (res.exchangeMethod == '积分' || res.exchangeMethod == '积分+金额' || res.exchangeMethod == '积分+加钱购') {
|
||
price = res.exchangePoints+"积分"
|
||
}
|
||
if (res.exchangeMethod == '积分+金额'){
|
||
price = price+"+"
|
||
}
|
||
if (res.exchangeMethod == '金额' || res.exchangeMethod == '积分+金额'){
|
||
price = price+"￥"+res.exchangeAmount
|
||
}
|
||
if (res.exchangeMethod == '积分+加钱购'){
|
||
price = price +"+"+res.moneyRatio+"加钱比例"
|
||
}
|
||
let a = {
|
||
giftName:res.giftName,
|
||
markPurchases:res.markPurchases,
|
||
price:price
|
||
}
|
||
shoppingCart.push(a)
|
||
})
|
||
let f = {
|
||
shoppingCart:shoppingCart,
|
||
allPoints:this.allPoints,
|
||
allAmout:this.allAmout
|
||
}
|
||
printIntegralReport(f).then(res=>{
|
||
|
||
})
|
||
|
||
},
|
||
|
||
|
||
// 确定收款
|
||
async collection() {
|
||
let isPayFlag = false
|
||
|
||
let this_ = this
|
||
|
||
let actualPayment = 0
|
||
let makeChange = 0
|
||
if (this_.paymentType === "CASH") {
|
||
actualPayment = this.authCode
|
||
makeChange = this.seekZero
|
||
}
|
||
|
||
// this_.authCode
|
||
let integralOrdersList = []
|
||
if (this_.shoppingCart.length >0) {
|
||
//数组组装
|
||
console.log("this_.shoppingCart",this_.shoppingCart)
|
||
this_.shoppingCart.forEach(res =>{
|
||
let integralOrders = {
|
||
userId : this_.member.id,
|
||
giftId : res.id,
|
||
amount : res.exchangeAmount_sum,
|
||
integral : res.exchangePoints_sum,
|
||
exchangeQuantity : res.markPurchases,
|
||
orderType : 1,
|
||
staffId: this_.staff.id,
|
||
paymentType : this_.paymentType,
|
||
actualPayment : actualPayment,
|
||
makeChange : makeChange
|
||
}
|
||
integralOrdersList.push(integralOrders)
|
||
})
|
||
let flag = false
|
||
let orderNumber = '';
|
||
await getIntegralOrdersProcessingApi({
|
||
integralOrdersList:integralOrdersList,
|
||
authCode:this_.authCode,
|
||
paymentType:this_.paymentType,
|
||
allAmout:this_.allAmout,
|
||
allPoints:this_.allPoints,
|
||
}).then(response=> {
|
||
if (response.data!=null){
|
||
this_.loading = true;
|
||
orderNumber = response.data.orderNumber
|
||
if (response.data.status == "un") {
|
||
this.$message.error('积分已不足');
|
||
this_.loading = false;
|
||
flag = true
|
||
}
|
||
}
|
||
});
|
||
if (flag) return
|
||
let timer = setInterval(async () => {
|
||
await getCheckTheStatusOfYourPaymentByIntegralApi({orderNumber:orderNumber}).then(response => {
|
||
if (response.data!=null){
|
||
if (response.data.status == "unpaid"){
|
||
this_.isQuery = true;
|
||
}
|
||
if (response.data.status == "paid"){
|
||
this_.isPaySuccess = true;
|
||
isPayFlag = true
|
||
this_.isQuery = false;
|
||
clearInterval(timer);
|
||
// this_.printLocally()
|
||
}
|
||
if (response.data.status == "payFail"){
|
||
this_.isPaySuccess = false;
|
||
this_.isQuery = false;
|
||
}
|
||
}
|
||
})
|
||
}, 500);
|
||
|
||
let timer2 = setInterval(function () {
|
||
if (this_.isQuery == false) {
|
||
this_.loading = false;
|
||
this_.isPay = false;
|
||
console.log("isPayFlag",isPayFlag)
|
||
if (isPayFlag) {
|
||
// this_.printLocally()
|
||
this_.integralReport()
|
||
isPayFlag = false
|
||
}
|
||
clearInterval(timer);
|
||
clearInterval(timer2);
|
||
clearTimeout(timer3);
|
||
}
|
||
},500)
|
||
|
||
let timer3 = setTimeout(function (){
|
||
clearInterval(timer2);
|
||
clearInterval(timer);
|
||
this_.loading = false;
|
||
this_.isPay = false;
|
||
this_.isAwait = true;
|
||
|
||
this.isPaySuccess = false;
|
||
|
||
},15000)
|
||
|
||
// console.log("isPayFlag",isPayFlag)
|
||
|
||
}
|
||
|
||
|
||
// this.paymentType = ''
|
||
},
|
||
// 获取优惠券列表信息
|
||
getCouponList(){
|
||
listCardFavorableRecord().then(response => {
|
||
this.couponList = response.data.records
|
||
})
|
||
let map = {
|
||
page:1,
|
||
pageSize:20,
|
||
}
|
||
listUserGrade(map).then(response => {
|
||
this.gradeList = response.data.records
|
||
})
|
||
},
|
||
// 获取会员等级id
|
||
getGradeName(list,id){
|
||
let name = "";
|
||
list.forEach(item => {
|
||
if (item.id == id){
|
||
name = item.name
|
||
}
|
||
})
|
||
this.gradeName = name;
|
||
return name;
|
||
},
|
||
// 清楚数据
|
||
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.isPaySuccess=false,
|
||
this.isQuery=true,
|
||
this.openConfirm = false
|
||
this.openRecharge = false
|
||
|
||
// this.reset()
|
||
this.dialogVisiblej = false
|
||
this.visflg = false
|
||
this.authCode = '';
|
||
},
|
||
async printLocally(data) {
|
||
if (!connectFlag){
|
||
return
|
||
}
|
||
//初始化打印函数
|
||
let LODOP = getLodop(); // 初始化打印
|
||
LODOP.PRINT_INIT();
|
||
var bodyStyle = `<style>
|
||
.input-box{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 5px 0px;
|
||
}
|
||
.box-ge{
|
||
border-bottom: 1px solid #000000 ;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
.box-title{
|
||
font-size: 18px;
|
||
text-align: center;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
}
|
||
.input-hui{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 15px 0px;
|
||
background: #b2b2b2;
|
||
box-sizing: border-box;
|
||
padding: 5px 0px;
|
||
}
|
||
.input-hui-frou{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 15px 0px;
|
||
background: #b2b2b2;
|
||
box-sizing: border-box;
|
||
padding: 5px 0px;
|
||
div{
|
||
width: 25%;
|
||
text-align: left;
|
||
}
|
||
}
|
||
.input-box-frou{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 5px 0px;
|
||
div{
|
||
width: 25%;
|
||
text-align: left;
|
||
}
|
||
}
|
||
.box-center{
|
||
height: 500px;
|
||
}
|
||
</style>
|
||
`
|
||
// var fromHtml = bodyStyle+this.$refs.report.innerHTML
|
||
var fromHtml = ''
|
||
|
||
fromHtml = bodyStyle+this.$refs.report.innerHTML
|
||
|
||
|
||
// LODOP.PRINT_INITA(0, 0, 665, 600, '模板设计')
|
||
LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);
|
||
// LODOP.SET_PRINT_PAGESIZE(100,100,100,100)
|
||
|
||
LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true);
|
||
|
||
// LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
|
||
// let preview = LODOP.PREVIEW();
|
||
// console.log("preview",preview);
|
||
LODOP.PRINT();
|
||
|
||
},
|
||
},
|
||
watch: {
|
||
dialogVisiblej(newValue) {
|
||
if (!newValue && !this.visflg) {
|
||
console.log("newValue",newValue)
|
||
|
||
this.queryParams= {
|
||
categoryId:'',
|
||
giftName:'',
|
||
deliveryMethod:'门店自提',
|
||
page: 1,
|
||
pageSize: 10000,
|
||
},
|
||
this.seekZero = 0
|
||
this.handClose()
|
||
this.reset()
|
||
|
||
} else {
|
||
this.visflg = false
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
isTheBalanceIsSufficient(){
|
||
if (this.member && this.member.points !== undefined) {
|
||
const allPoints = new BigNumber(this.allPoints);
|
||
const points = new BigNumber(this.member.points);
|
||
return points.minus(allPoints).toNumber() >= 0;
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-center{
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
padding-top: 20px;
|
||
height: 100vh;
|
||
justify-content: space-between;
|
||
}
|
||
.center-left{
|
||
width: 33%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
height: 98vh;
|
||
position: relative;
|
||
margin-left: 15px;
|
||
}
|
||
.bottom-posi{
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
}
|
||
.center-app{
|
||
width: 33%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
/*background: white;*/
|
||
|
||
}
|
||
.center-right{
|
||
width: 64%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin: 0px 10px;
|
||
height: 98vh;
|
||
background: #fff;
|
||
/*background: white;*/
|
||
}
|
||
.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: #FF9655;
|
||
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: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
border: 1px solid #00afff;
|
||
}
|
||
|
||
.wrap-box2{
|
||
background: #30a1ff !important;
|
||
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 #FF9655;
|
||
background: #FF9655;
|
||
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: 40%;
|
||
height: 60px;
|
||
color: white;
|
||
background: linear-gradient( 312deg, #FF945B 0%, #FEB37C 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
cursor: pointer;
|
||
}
|
||
.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: #FF9655 !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;
|
||
}
|
||
.center-right-top{
|
||
width: 100%;
|
||
background: white;
|
||
height: 75px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.wrap-right{
|
||
width: 100%;
|
||
|
||
background: white;
|
||
overflow: auto;
|
||
}
|
||
.ts-box{
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.wrap-right-box{
|
||
width: 20%;
|
||
height: 270px;
|
||
/*margin-right: 10px;*/
|
||
/*margin-bottom: 10px;*/
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
.box-six{
|
||
|
||
width: 164px;
|
||
height: 150px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
.title-red{
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: rgb(238, 59, 62);
|
||
}
|
||
.title-hui{
|
||
font-size: 14px;
|
||
/*font-weight: bold;*/
|
||
color: #999999;
|
||
margin: 5px 0px;
|
||
}
|
||
.title-goods{
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.wrap-right-bottom{
|
||
position: absolute;
|
||
bottom: 0px;
|
||
justify-content: space-between;
|
||
width: 57%;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
|
||
|
||
}
|
||
.chongzhi{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
border: 1px solid #999999;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.ddjil{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
font-size: 20px;
|
||
background: linear-gradient( 312deg, #9CDCA0 0%, #5BC557 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
color: white;
|
||
margin: 8px 10px;
|
||
cursor: pointer;
|
||
}
|
||
.gwuc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 25px;
|
||
font-size: 20px;
|
||
background: linear-gradient( 312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
color: white;
|
||
margin: 8px 10px;
|
||
cursor: pointer;
|
||
}
|
||
.new_card{
|
||
border: 1px solid #eceff1;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
}
|
||
//
|
||
.center-left{
|
||
width: 33%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
height: 98vh;
|
||
position: relative;
|
||
}
|
||
.o-top {
|
||
width: 100%;
|
||
height: 80px;
|
||
background: #FF9655;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.left_input {
|
||
width: 80%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
color: white;
|
||
border: 1px solid #fff;
|
||
::v-deep.el-input__inner {
|
||
background: transparent !important;
|
||
border: transparent 1px solid;
|
||
color: #fff;
|
||
.el-input__placeholder{
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
|
||
::v-deep input:-moz-placeholder,
|
||
::v-deep textarea:-moz-placeholder {
|
||
color: #fff;
|
||
}
|
||
::v-deep input:-ms-input-placeholder,
|
||
::v-deep textarea:-ms-input-placeholder {
|
||
color: #fff;
|
||
}
|
||
::v-deep input::-webkit-input-placeholder,
|
||
::v-deep textarea::-webkit-input-placeholder {
|
||
color: #fff ;
|
||
}
|
||
}
|
||
.an_bor {
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
border: 1px solid #fff;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
justify-content: center;
|
||
margin: 0px 5px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|