index.vue 53 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="20">
  4. <el-col :span="12">
  5. <el-card class="box-card custom-card">
  6. <div slot="header" class="clearfix">
  7. <span>选择客户</span>
  8. <el-button type="primary" style="float: right" plain icon="el-icon-plus" @click="handleAdd" v-if="userInfoVO.userType == '02'">新建客户 </el-button>
  9. </div>
  10. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" @submit.native.prevent>
  11. <el-form-item label="手机号" prop="phoneNumber">
  12. <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable maxlength="11" @change="searchUser" @keyup.enter.native="searchUser" />
  13. </el-form-item>
  14. <el-form-item>
  15. <!-- <el-button type="primary" icon="el-icon-full-screen" @click="qrcodeSearchUser">扫码</el-button>-->
  16. <el-button type="primary" icon="el-icon-search" @click="searchUser">查询</el-button>
  17. </el-form-item>
  18. </el-form>
  19. <el-descriptions title="用户信息" v-if="appUserInfo" :column="2">
  20. <el-descriptions-item label="用户名" span="2">{{ appUserInfo.realName }}</el-descriptions-item>
  21. <el-descriptions-item label="手机号" span="2">{{ appUserInfo.phoneNumber }} </el-descriptions-item>
  22. <el-descriptions-item label="现金余额">
  23. {{ (appUserInfo.rechargeBalance * 100) / 100 }}
  24. </el-descriptions-item>
  25. <el-descriptions-item label="赠送余额">
  26. {{ (appUserInfo.giveBalance * 100) / 100 }}
  27. </el-descriptions-item>
  28. <el-descriptions-item label="福利金">
  29. {{ (appUserInfo.welfareBalance * 100) / 100 }}
  30. </el-descriptions-item>
  31. <el-descriptions-item label="积分">
  32. {{ appUserInfo.pointBalance }}
  33. </el-descriptions-item>
  34. <el-descriptions-item label="等级">{{ appUserInfo.level }}</el-descriptions-item>
  35. </el-descriptions>
  36. <Page uri="/mapi/recharge/card/list" :request-params="cardParams" ref="pagination" v-if="appUserInfo" :page-size="5">
  37. <el-table-column label="卡号" align="center" prop="cardNo" width="100" />
  38. <el-table-column label="储值门店" align="center" prop="rechargeStoreName" width="100">
  39. <template slot-scope="scope">
  40. {{ scope.row.useBindStoreName == null ? '--' : scope.row.useBindStoreName }}
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="充值金额(元)" align="center" prop="rechargeAmount" width="120" />
  44. <el-table-column label="卡内余额(元)" align="center" prop="rechargeAmount" width="120">
  45. <template slot-scope="scope">
  46. <span style="display: block; text-align: left">现金金额: {{ scope.row.rechargeBalance }}</span>
  47. <span style="display: block; text-align: left">赠送金额: {{ scope.row.giveBalance }}</span>
  48. <span style="display: block; text-align: left">福利金额: {{ scope.row.welfareBalance }}</span>
  49. </template>
  50. </el-table-column>
  51. <el-table-column label="充值时间" align="center" prop="rechargeTime" width="100">
  52. <template slot-scope="scope">
  53. {{ scope.row.rechargeTime == null ? '--' : scope.row.rechargeTime }}
  54. </template>
  55. </el-table-column>
  56. <el-table-column label="状态" align="center" prop="rechargeStatus">
  57. <template slot-scope="scope">
  58. <dict-tag :options="dict.type.recharge_use_status" :value="scope.row.rechargeStatus" />
  59. </template>
  60. </el-table-column>
  61. </Page>
  62. </el-card>
  63. </el-col>
  64. <!-- 充值类型 -->
  65. <el-col :span="12">
  66. <el-card class="box-card">
  67. <div slot="header" class="clearfix">
  68. <span>充值信息</span>
  69. </div>
  70. <el-form ref="rechargeFrom" :model="rechargeFrom" :rules="rules" label-width="160px" @submit.native.prevent>
  71. <el-col :span="24">
  72. <el-form-item label="请选择充值类型" label-width="120px" prop="rechargeType">
  73. <el-col :span="18">
  74. <el-radio-group v-model="rechargeFrom.rechargeType" style="width: 500px" @input="clearData">
  75. <el-radio-button label="3">自定义充值</el-radio-button>
  76. <el-radio-button label="0">套餐充值</el-radio-button>
  77. <el-radio-button label="1">福利金额充值</el-radio-button>
  78. <!-- <el-radio-button label="2">卡密充值</el-radio-button>-->
  79. </el-radio-group>
  80. </el-col>
  81. </el-form-item>
  82. <el-form-item label="请选择充值套餐" label-width="120px" prop="rechargeMealId" v-if="rechargeFrom.rechargeType == 0">
  83. <el-col :span="18">
  84. <el-select v-model="rechargeFrom.rechargeMealId" placeholder="请选择充值套餐" style="width: 300px" clearable @input="getActivityInfo(rechargeFrom.rechargeMealId)">
  85. <el-option v-for="recharge in rechargeList" :key="recharge.id" :label="recharge.title" :value="recharge.id" />
  86. </el-select>
  87. </el-col>
  88. </el-form-item>
  89. <el-form-item label="自定义金额" label-width="120px" prop="customAmount" v-if="rechargeFrom.rechargeType == 3">
  90. <el-col :span="18">
  91. <el-input-number v-model="rechargeFrom.customAmount" :controls="false" :min="0" :max="10000" style="width: 300px"></el-input-number>
  92. </el-col>
  93. </el-form-item>
  94. <el-form-item label="福利金额(元)" label-width="120px" prop="welfareAmount" v-if="rechargeFrom.rechargeType == 1">
  95. <el-col :span="18">
  96. <el-input-number v-model="rechargeFrom.welfareAmount" :controls="false" :min="0" :max="999999" style="width: 300px"></el-input-number>
  97. </el-col>
  98. </el-form-item>
  99. <el-form-item label="卡号" label-width="120px" v-if="rechargeFrom.rechargeType == 2" required>
  100. <el-col :span="18">
  101. <el-input v-model="rechargeFrom.rechargeCardNo" style="width: 300px"></el-input>
  102. </el-col>
  103. </el-form-item>
  104. <el-form-item label="密码" label-width="120px" v-if="rechargeFrom.rechargeType == 2" required>
  105. <el-col :span="18">
  106. <el-input v-model="rechargeFrom.rechargeCardPassword" style="width: 300px"></el-input>
  107. </el-col>
  108. </el-form-item>
  109. <el-form-item label="充值备注" label-width="120px" prop="remark">
  110. <el-col :span="18">
  111. <el-input type="textarea" placeholder="请输入充值备注" v-model="rechargeFrom.remark" style="width: 300px"></el-input>
  112. </el-col>
  113. </el-form-item>
  114. </el-col>
  115. <el-col :span="24">
  116. <el-card style="width: 430px" v-if="rechargeFrom.rechargeType == 0">
  117. <el-descriptions title="充值活动信息" :column="1" :label-style="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'center' }">
  118. <el-descriptions-item label="本次充值金额" style="width: 100px" v-if="activityAmount != null && activityAmount != ''">
  119. {{ getRechargeTypeInfo == '' ? '--' : getRechargeTypeInfo.rechargeAmount }}
  120. </el-descriptions-item>
  121. <el-descriptions-item label="原赠送金额" v-if="activityAmount != null && activityAmount != ''">
  122. {{ getRechargeTypeInfo == '' ? '--' : getRechargeTypeInfo.giveAmount }}
  123. </el-descriptions-item>
  124. <el-descriptions-item label="活动赠送金额" v-if="activityAmount != null && activityAmount != ''">
  125. {{ activityAmount }}
  126. </el-descriptions-item>
  127. <el-descriptions-item label="参与活动" v-if="activityAmount == null || activityAmount == ''"> 此套餐暂未参与活动 </el-descriptions-item>
  128. </el-descriptions>
  129. </el-card>
  130. </el-col>
  131. <!-- <el-col :span="24">-->
  132. <!-- <el-card class="box-card" shadow="hover" style="width: 150px" @click.native="clickRecharge">-->
  133. <!-- <div slot="header" class="clearfix">-->
  134. <!-- <span></span>-->
  135. <!-- <span style="float: right">赠送500元</span>-->
  136. <!-- </div>-->
  137. <!-- <div class="text item">-->
  138. <!-- <span>{{'充值金额 ' + "1" }}</span>-->
  139. <!-- <span>{{'充值金额 ' + "1" }}</span>-->
  140. <!-- </div>-->
  141. <!-- </el-card>-->
  142. <!-- </el-col>-->
  143. </el-form>
  144. <div>
  145. <el-button type="primary" @click="submitCash" style="margin-left: 3%; margin-top: 20px">收银 </el-button>
  146. </div>
  147. </el-card>
  148. </el-col>
  149. </el-row>
  150. <el-dialog title="确认充值" :visible.sync="openWelfareRecharge" width="400px">
  151. <el-form ref="payFrom" :model="rechargeInfo" label-width="100px" style="margin-top: 20px" @submit.native.prevent>
  152. <el-form-item label="充值金额:">
  153. <span style="font-size: 16px;font-weight: bold">¥{{rechargeInfo.welfareAmount}}</span>
  154. </el-form-item>
  155. <el-form-item label="备注:" >
  156. <span style="font-size: 16px;font-weight: bold">{{rechargeInfo.remark}}</span>
  157. </el-form-item>
  158. </el-form>
  159. <el-button type="primary" @click="submitSettlement" style="margin: 20px 80px 0; width: 200px; height: 40px">确认</el-button>
  160. </el-dialog>
  161. <!-- 支付方式 -->
  162. <el-dialog :title="rechargeTitle" :visible.sync="openRecharge" width="75%" :before-close="checkClosePay">
  163. <el-descriptions title="核对信息" v-if="rechargeInfo && appUserInfo" :column="4" border :contentStyle="{ 'text-align': 'center' }">
  164. <el-descriptions-item label="本次充值金额" :labelStyle="{ width: '14%' }">{{ rechargeInfo.rechargeAmount }} </el-descriptions-item>
  165. <el-descriptions-item label="本次赠送金额" :labelStyle="{ width: '14%' }">
  166. {{ activityAmount != null && activityAmount != '' ? activityAmount : rechargeInfo.giveAmount }}
  167. </el-descriptions-item>
  168. <el-descriptions-item label="本次赠送积分" :labelStyle="{ width: '14%' }">
  169. {{ rechargeInfo.givePointAmount }}
  170. </el-descriptions-item>
  171. <el-descriptions-item label="本次福利金额" :labelStyle="{ width: '14%' }">{{ rechargeInfo.welfareAmount }} </el-descriptions-item>
  172. <el-descriptions-item label="充值余额">{{ appUserInfo.rechargeBalance }}</el-descriptions-item>
  173. <el-descriptions-item label="赠送余额">{{ appUserInfo.giveBalance }}</el-descriptions-item>
  174. <el-descriptions-item label="现有积分">{{ appUserInfo.pointBalance }}</el-descriptions-item>
  175. <el-descriptions-item label="福利余额">{{ appUserInfo.welfareBalance }}</el-descriptions-item>
  176. <el-descriptions-item label="充值后余额">
  177. {{ (rechargeInfo.rechargeAmount * 100 + appUserInfo.rechargeBalance * 100) / 100 }}
  178. </el-descriptions-item>
  179. <el-descriptions-item label="充值后赠送余额">
  180. {{ activityAmount != null && activityAmount != '' ? (activityAmount * 100 + appUserInfo.giveBalance * 100) / 100 : (rechargeInfo.giveAmount * 100 + appUserInfo.giveBalance * 100) / 100 }}
  181. </el-descriptions-item>
  182. <el-descriptions-item label="充值后积分">
  183. {{ (rechargeInfo.givePointAmount * 100 + appUserInfo.pointBalance * 100) / 100 }}
  184. </el-descriptions-item>
  185. <el-descriptions-item label="充值后福利余额">
  186. {{ (rechargeInfo.welfareAmount * 100 + appUserInfo.welfareBalance * 100) / 100 }}
  187. </el-descriptions-item>
  188. </el-descriptions>
  189. <template v-if="rechargeInfo">
  190. <el-form ref="payFrom" :model="payFrom" label-width="80px" style="margin-top: 20px" @submit.native.prevent>
  191. <el-card>
  192. <!-- <el-row :gutter="10" style="margin-top: 10px">-->
  193. <!-- <el-col :span="24">-->
  194. <!-- <el-checkbox v-model="payFrom.isUsedCoupon">是否使用优惠券</el-checkbox>-->
  195. <!-- <el-button style="margin-left: 10px" v-if="payFrom.isUsedCoupon" type="primary" @click="openCouponList">选择优惠券列表</el-button>-->
  196. <!-- </el-col>-->
  197. <!-- </el-row>-->
  198. <el-row :gutter="10" style="margin-top: 10px">
  199. <el-col :span="12" style="margin-top: 10px">
  200. <el-form-item label="支付方式" label-width="150px" prop="payType">
  201. <el-radio-group v-model="payFrom.payType" @input="changePayType">
  202. <el-radio-button label="2">现金</el-radio-button>
  203. <el-radio-button label="0">微信/支付宝</el-radio-button>
  204. <!-- <el-radio-button label="1">支付宝</el-radio-button>-->
  205. <el-radio-button label="9">组合支付</el-radio-button>
  206. </el-radio-group>
  207. </el-form-item>
  208. </el-col>
  209. <!-- <el-col :span="12">-->
  210. <!-- <el-form-item label="是否分段支付" label-width="150px" prop="isInstalment">-->
  211. <!-- <el-radio-group v-model="payFrom.isInstalment" :disabled="alreadyPayTotal > 0">-->
  212. <!-- <el-radio-button label="Y">是</el-radio-button>-->
  213. <!-- <el-radio-button label="N">否</el-radio-button>-->
  214. <!-- </el-radio-group>-->
  215. <!-- </el-form-item>-->
  216. <!-- </el-col>-->
  217. </el-row>
  218. <el-row style="margin-top: 10px; margin-left: 20px">
  219. <div class="clearfix">
  220. <!-- <span>已优惠<span style="color: #ff4949; font-size: 18px; font-weight: bold; margin: 0 4px">{{ getCouponAmount }}</span>元</span>-->
  221. <span style="margin-left: 20px">需支付<span style="color: #ff4949; font-size: 18px; font-weight: bold; margin: 0 4px">{{ (getOrderNeedAmount * 100 - parseFloat(alreadyPayTotal * 100)) / 100 }}</span>元</span>
  222. </div>
  223. </el-row>
  224. <el-row :gutter="10" style="margin-top: 10px">
  225. <!-- <el-col :span="8">-->
  226. <!-- <el-form-item label="已经支付:" label-width="90px" v-if="payFrom.isInstalment == 'Y'">-->
  227. <!-- <span>{{ alreadyPayTotal }} 元</span>-->
  228. <!-- </el-form-item>-->
  229. <!-- </el-col>-->
  230. <el-col :span="8">
  231. <el-form-item label="本次收取金额(元)" label-width="150px" prop="thisPayMoney" v-if="payFrom.isInstalment == 'Y'">
  232. <el-input style="width: 250px" v-model="payFrom.thisPayMoney"></el-input>
  233. </el-form-item>
  234. </el-col>
  235. <el-col :span="8">
  236. <el-button type="primary" @click="submitConfirm" v-if="(payFrom.payType == '0' || payFrom.payType == '1') && payFrom.isInstalment == 'Y' && payConfirm == false"> 确认 </el-button>
  237. </el-col>
  238. </el-row>
  239. <el-row :gutter="10" style="margin-top: 10px">
  240. <el-col :span="8">
  241. <el-form-item label="付款条形码" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '0'">
  242. <el-input style="width: 250px" v-model="payFrom.wxBarcode" clearable placeholder="请输入付款码"></el-input>
  243. </el-form-item>
  244. </el-col>
  245. <!-- <el-col :span="8">-->
  246. <!-- <el-form-item label="实收现金(元)" label-width="150px" prop="thisPayMoney" v-if="payFrom.payType == '2'">-->
  247. <!-- <el-input-number style="width: 250px" :controls="false" v-model="payFrom.thisPayMoney"></el-input-number>-->
  248. <!-- </el-form-item>-->
  249. <!-- </el-col>-->
  250. <el-col :span="8">
  251. <el-form-item label="实收现金(元)" label-width="150px" prop="cashPayAmount" v-if="payFrom.payType == '9'">
  252. <el-input style="width: 250px" :controls="false" v-model="payFrom.cashPayAmount" @input="changeCashPayAmount"></el-input>
  253. </el-form-item>
  254. <el-form-item label="微信/支付宝(元)" label-width="150px" prop="otherPayAmount" v-if="payFrom.payType == '9'">
  255. <!-- <el-input-number style="width: 250px" :controls="false" disabled v-model="payFrom.otherPayAmount"></el-input-number>-->
  256. <span style="font-size: 16px;font-weight: bold">¥{{payFrom.otherPayAmount || 0}}</span>
  257. </el-form-item>
  258. </el-col>
  259. <el-col :span="8">
  260. <el-form-item label="" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '9'">
  261. <el-input-number style="width: 250px; opacity: 0" :controls="false" disabled v-model="payFrom.otherPayAmount"></el-input-number>
  262. </el-form-item>
  263. <el-form-item label="付款条形码" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '9'">
  264. <el-input style="width: 250px" v-model="payFrom.wxBarcode" clearable placeholder="请输入付款码"></el-input>
  265. </el-form-item>
  266. </el-col>
  267. <el-col :span="8">
  268. </el-col>
  269. </el-row>
  270. <!-- <el-row :gutter="10" style="margin-top: 10px">-->
  271. <!-- <el-card>-->
  272. <!-- <el-table :data="alreadySelectCouponList">-->
  273. <!-- &lt;!&ndash; <el-table-column label="编号" align="center" prop="id" />&ndash;&gt;-->
  274. <!-- <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />-->
  275. <!-- <el-table-column label="优惠内容" align="center" prop="clothItemTypeName">-->
  276. <!-- <template slot-scope="scope">-->
  277. <!-- <span>抵扣充值金额:{{ scope.row.deductRechargeAmount }}元</span>-->
  278. <!-- </template>-->
  279. <!-- </el-table-column>-->
  280. <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
  281. <!-- <template slot-scope="scope">-->
  282. <!-- <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
  283. <!-- </template>-->
  284. <!-- </el-table-column>-->
  285. <!-- </el-table>-->
  286. <!-- </el-card>-->
  287. <!-- </el-row>-->
  288. </el-card>
  289. <el-row :gutter="10">
  290. <div>
  291. <el-button type="primary" @click="submitSettlement" style="margin-left: 5px; margin-top: 20px">结算 </el-button>
  292. </div>
  293. </el-row>
  294. </el-form>
  295. </template>
  296. </el-dialog>
  297. <el-dialog title="选择优惠券" :visible.sync="openCoupon" width="60%">
  298. <template>
  299. <el-table :data="couponList" style="width: 100%" @selection-change="handleSelectionChange">
  300. <el-table-column type="selection" width="55" align="center" fixed="left" />
  301. <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />
  302. <el-table-column label="优惠内容" align="center">
  303. <template slot-scope="scope">
  304. <span>抵扣充值金额:{{ scope.row.deductRechargeAmount }}元</span>
  305. </template>
  306. </el-table-column>
  307. </el-table>
  308. <el-row>
  309. <div style="margin-top: 30px">
  310. <el-button @click="submitAlreadySelectCouponList" size="small" type="primary" style="float: right"> 确定 </el-button>
  311. </div>
  312. </el-row>
  313. </template>
  314. </el-dialog>
  315. <!-- 添加用户对话框 -->
  316. <el-dialog :title="title" :visible.sync="open" size="30%" append-to-body :before-close="checkCloseUserPage">
  317. <el-row :gutter="15">
  318. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  319. <el-col :span="24">
  320. <el-form-item label="昵称" prop="nickName">
  321. <el-input v-model="form.nickName" placeholder="请输入昵称" maxlength="50" show-word-limit clearable />
  322. </el-form-item>
  323. <el-form-item label="真实姓名" prop="realName">
  324. <el-input v-model="form.realName" placeholder="请输入真实姓名" maxlength="5" show-word-limit clearable />
  325. </el-form-item>
  326. <el-form-item label="手机号" prop="phoneNumber">
  327. <el-input v-model="form.phoneNumber" placeholder="请输入手机号" maxlength="11" show-word-limit clearable />
  328. </el-form-item>
  329. <el-form-item label="性别" prop="sex">
  330. <el-select v-model="form.sex" placeholder="请选择性别" clearable>
  331. <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
  332. </el-select>
  333. </el-form-item>
  334. <el-form-item label="生日" prop="birthday" clearable>
  335. <el-date-picker clearable v-model="form.birthday" type="date" value-format="yyyy-MM-dd" placeholder="请选择生日"></el-date-picker>
  336. </el-form-item>
  337. <el-form-item label="头像地址" prop="avatarUrl">
  338. <image-upload v-model="form.avatarUrl" :limit="1" />
  339. </el-form-item>
  340. <el-form-item label="客户等级" prop="level">
  341. <el-input-number v-model="form.level" :min="1" :max="50" label="请输入客户等级"></el-input-number>
  342. </el-form-item>
  343. <el-form-item label="备注" prop="remark">
  344. <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" show-word-limit />
  345. </el-form-item>
  346. </el-col>
  347. </el-form>
  348. </el-row>
  349. <div slot="footer" class="dialog-footer">
  350. <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>
  351. <el-button @click="cancel">取 消</el-button>
  352. </div>
  353. </el-dialog>
  354. </div>
  355. </template>
  356. <script>
  357. import { listType } from '@/api/recharge/type'
  358. import { addUser, findUserByPhoneNumber, getMemberCouponInfoByRecharge, updateUser } from '@/api/app/user'
  359. import { addOrder, getOrderIsAllPayByOrderNo, getOrderStatusByOrderNo, morePay } from '@/api/recharge/order'
  360. import { getRechargeTypeRelationActivityInfo } from '@/api/activity/rechargeItem'
  361. export default {
  362. name: 'workRecharge',
  363. dicts: ['recharge_use_status', 'sys_user_sex'],
  364. data() {
  365. return {
  366. alreadyPayTotal: 0,
  367. orderNeedPayAmount: 0,
  368. couponAmount: 0,
  369. alreadyPayInfo: {},
  370. payConfirm: false,
  371. payFrom: {},
  372. userInfoVO: null,
  373. orderNo: null,
  374. // 优惠卷
  375. // couponInfo:null,
  376. couponList: [],
  377. // 客户信息
  378. appUserInfo: null,
  379. rechargeList: null,
  380. rechargeInfo: {},
  381. // 充值类型参数
  382. rechargeFrom: {
  383. rechargeType: '3',
  384. // 充值套餐id
  385. rechargeMealId: null,
  386. // 自定义金额
  387. customAmount: null,
  388. remark: '',
  389. // 福利金额
  390. welfareAmount: null,
  391. // 卡号
  392. rechargeCardNo: null,
  393. // 密码
  394. rechargeCardPassword: null
  395. },
  396. // 遮罩层
  397. loading: true,
  398. // 选中数组
  399. ids: [],
  400. // 非单个禁用
  401. single: true,
  402. // 非多个禁用
  403. multiple: true,
  404. // 显示搜索条件
  405. showSearch: true,
  406. // 总条数
  407. total: 0,
  408. // 表格数据
  409. // 弹出层标题
  410. title: '',
  411. rechargeTitle: '',
  412. // 是否显示弹出层
  413. open: false,
  414. openRecharge: false,
  415. openWelfareRecharge: false,
  416. openCoupon: false,
  417. // 查询参数
  418. queryParams: {
  419. pageNum: 1,
  420. pageSize: 10
  421. },
  422. cardParams: {
  423. rechargeUserId: 0
  424. },
  425. couponParams: {
  426. pageNum: 1,
  427. pageSize: 999,
  428. appUserId: null
  429. },
  430. // 表单参数
  431. form: {},
  432. // 表单校验
  433. rules: {
  434. rechargeCardNo: [
  435. {
  436. pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  437. required: true,
  438. message: '请输入正整数类型',
  439. trigger: 'blur'
  440. }
  441. ],
  442. rechargeCardPassword: [
  443. {
  444. pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  445. required: true,
  446. message: '请输入正整数类型',
  447. trigger: 'blur'
  448. }
  449. ],
  450. nickName: [
  451. {
  452. required: true,
  453. message: '昵称不能为空',
  454. trigger: 'blur'
  455. }
  456. ],
  457. realName: [
  458. {
  459. required: true,
  460. message: '真实姓名不能为空',
  461. trigger: 'blur'
  462. }
  463. ],
  464. phoneNumber: [
  465. {
  466. required: true,
  467. message: '手机号不能为空',
  468. trigger: 'blur'
  469. },
  470. {
  471. pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
  472. required: true,
  473. message: '请输入数量,且为正整数类型',
  474. trigger: 'blur'
  475. },
  476. { min: 11, max: 11, message: '手机号至少11位', trigger: 'blur' }
  477. ],
  478. sex: [
  479. {
  480. required: true,
  481. message: '性别不能为空',
  482. trigger: 'blur'
  483. }
  484. ],
  485. birthday: [
  486. {
  487. required: true,
  488. message: '生日不能为空',
  489. trigger: 'blur'
  490. }
  491. ]
  492. },
  493. authCode: null,
  494. activityAmount: null,
  495. alreadySelectCouponList: [],
  496. //支付检测
  497. isPaying: false
  498. }
  499. },
  500. created() {
  501. this.handleUser()
  502. this.getRechargeList()
  503. },
  504. computed: {
  505. getRechargeTypeInfo() {
  506. if (this.rechargeFrom.rechargeMealId != null) {
  507. return this.rechargeList.find((item) => item.id == this.rechargeFrom.rechargeMealId)
  508. } else {
  509. return ''
  510. }
  511. },
  512. getCouponAmount() {
  513. this.couponAmount = 0
  514. if (this.alreadySelectCouponList.length == 0) {
  515. return this.couponAmount
  516. }
  517. if (this.alreadySelectCouponList.length > 0) {
  518. this.alreadySelectCouponList.forEach((coupon) => {
  519. this.couponAmount = this.couponAmount + parseFloat(coupon.deductRechargeAmount)
  520. })
  521. }
  522. return this.couponAmount
  523. },
  524. getOrderNeedAmount() {
  525. this.orderNeedPayAmount = parseFloat(this.rechargeInfo.rechargeAmount) - parseFloat(this.couponAmount) > 0 ? parseFloat(this.rechargeInfo.rechargeAmount) - parseFloat(this.couponAmount) : 0
  526. return this.orderNeedPayAmount
  527. }
  528. },
  529. methods: {
  530. changeCashPayAmount(value) {
  531. this.payFrom.cashPayAmount = value.replace(/[^\d]/g,'')
  532. this.payFrom.otherPayAmount = Number(this.orderNeedPayAmount) - Number(this.payFrom.cashPayAmount)
  533. },
  534. clickRecharge(done) {
  535. this.$confirm('是否关闭表单,关闭后数据将丢失?')
  536. .then(function () {
  537. done()
  538. })
  539. .then(() => {})
  540. .catch(() => {})
  541. },
  542. getActivityInfo(rechargeTypeId) {
  543. if (rechargeTypeId != null && rechargeTypeId != '') {
  544. getRechargeTypeRelationActivityInfo(rechargeTypeId, this.userInfoVO.storeId).then((response) => {
  545. this.activityAmount = response.data
  546. })
  547. } else {
  548. this.activityAmount = null
  549. }
  550. },
  551. clearData() {
  552. this.rechargeFrom.rechargeMealId = null
  553. this.rechargeFrom.customAmount = null
  554. this.rechargeFrom.welfareAmount = null
  555. this.rechargeFrom.rechargeCardNo = null
  556. this.rechargeFrom.rechargeCardPassword = null
  557. this.activityAmount = null
  558. },
  559. openCouponList() {
  560. this.getCouponList()
  561. this.openCoupon = true
  562. },
  563. // 获取优惠券集合
  564. getCouponList() {
  565. if (this.appUserInfo == null) {
  566. this.couponList = []
  567. return
  568. }
  569. this.couponParams.appUserId = this.appUserInfo.id
  570. getMemberCouponInfoByRecharge(this.couponParams).then((response) => {
  571. this.couponList = response.data.records
  572. })
  573. },
  574. // 获取登录人信息
  575. handleUser() {
  576. this.userInfoVO = this.getUserInfo()
  577. },
  578. //搜索用户
  579. searchUser() {
  580. this.$refs['queryForm'].validate((valid) => {
  581. if (valid) {
  582. findUserByPhoneNumber(this.queryParams).then((res) => {
  583. this.appUserInfo = res.data
  584. if (this.appUserInfo) {
  585. this.cardParams.rechargeUserId = this.appUserInfo.id
  586. this.$nextTick(() => {
  587. this.$refs.pagination.handleSearch(true)
  588. })
  589. }
  590. })
  591. }
  592. })
  593. },
  594. //条码搜索用户
  595. qrcodeSearchUser() {},
  596. // 获取 充值套餐集合
  597. getRechargeList() {
  598. listType().then((response) => {
  599. this.rechargeList = response.rows
  600. })
  601. },
  602. // 关闭用户新建页面 二次确认
  603. checkCloseUserPage(done) {
  604. this.$confirm('是否关闭表单,关闭后数据将丢失?')
  605. .then(function () {
  606. done()
  607. })
  608. .then(() => {})
  609. .catch(() => {})
  610. },
  611. // 关闭支付页面 二次确认
  612. checkClosePay(done) {
  613. this.$confirm('退单金额如下:现金:' + this.alreadyPayInfo.alreadyPayCash + ',微信:' + this.alreadyPayInfo.alreadyPayWX + ',支付宝:' + this.alreadyPayInfo.alreadyPayAli + ' 是否暂停支付?')
  614. .then(function () {
  615. done()
  616. })
  617. .then(() => {})
  618. .catch(() => {})
  619. },
  620. // 创建用户
  621. submitForm() {
  622. this.$refs['form'].validate((valid) => {
  623. if (valid) {
  624. if (this.form.id != null) {
  625. updateUser(this.form).then((response) => {
  626. this.$modal.msgSuccess('修改成功')
  627. this.open = false
  628. })
  629. } else {
  630. addUser(this.form).then((response) => {
  631. this.$modal.msgSuccess('新增成功')
  632. this.open = false
  633. })
  634. }
  635. }
  636. })
  637. },
  638. // 收银
  639. submitCash() {
  640. if (this.appUserInfo == null) {
  641. this.$message.error('请选择客户')
  642. return
  643. }
  644. // 重置
  645. this.resetPayInfo()
  646. this.rechargeInfo.remark = this.rechargeFrom.remark
  647. // 自定义充值
  648. if (this.rechargeFrom.rechargeType == '3') {
  649. if (this.rechargeFrom.customAmount == '0') {
  650. this.$message.error('充值金额不能为0元')
  651. return
  652. }
  653. this.rechargeInfo.rechargeAmount = this.rechargeFrom.customAmount
  654. this.rechargeInfo.giveAmount = 0
  655. this.rechargeInfo.givePointAmount = 0
  656. this.rechargeInfo.welfareAmount = 0
  657. this.rechargeInfo.rechargeType = this.rechargeFrom.rechargeType
  658. this.rechargeInfo.rechargeTypeId = null
  659. }
  660. // 套餐充值
  661. if (!this.rechargeFrom.rechargeType || this.rechargeFrom.rechargeType == '0') {
  662. if (this.rechargeFrom.rechargeMealId == null) {
  663. this.$message.error('充值套餐不能为空')
  664. return
  665. }
  666. let recharge
  667. recharge = this.rechargeList.find((item) => item.id == this.rechargeFrom.rechargeMealId)
  668. this.rechargeInfo.rechargeAmount = recharge.rechargeAmount
  669. this.rechargeInfo.giveAmount = recharge.giveAmount
  670. this.rechargeInfo.givePointAmount = recharge.givePointAmount
  671. this.rechargeInfo.welfareAmount = 0
  672. this.rechargeInfo.rechargeType = this.rechargeFrom.rechargeType
  673. this.rechargeInfo.rechargeTypeId = recharge.id
  674. }
  675. // 福利金额充值
  676. if (this.rechargeFrom.rechargeType == '1') {
  677. if (!this.rechargeFrom.rechargeType || this.rechargeFrom.welfareAmount == '0') {
  678. this.$message.error('充值金额不能为0元')
  679. return
  680. }
  681. if (!this.rechargeFrom.remark) {
  682. this.$message.error('请输入备注')
  683. return
  684. }
  685. this.rechargeInfo.rechargeAmount = 0
  686. this.rechargeInfo.giveAmount = 0
  687. this.rechargeInfo.givePointAmount = 0
  688. this.rechargeInfo.welfareAmount = this.rechargeFrom.welfareAmount
  689. this.rechargeInfo.rechargeType = this.rechargeFrom.rechargeType
  690. this.rechargeInfo.rechargeTypeId = null
  691. this.rechargeInfo.remark = this.rechargeFrom.remark
  692. this.openWelfareRecharge = true
  693. this.orderNo = null
  694. return;
  695. }
  696. // 卡密充值
  697. if (this.rechargeFrom.rechargeType == '2') {
  698. if (this.rechargeFrom.rechargeCardNo == null || this.rechargeFrom.rechargeCardPassword == null) {
  699. this.$message.error('卡号/密码,不能为空')
  700. return
  701. }
  702. const orderRechargePayDTO = {
  703. appUserId: this.appUserInfo.id,
  704. rechargeType: this.rechargeFrom.rechargeType,
  705. cardNo: this.rechargeFrom.rechargeCardNo,
  706. password: this.rechargeFrom.rechargeCardPassword,
  707. remark: this.rechargeFrom.remark
  708. }
  709. addOrder(orderRechargePayDTO).then((response) => {
  710. if (response.data.isAllPayEnd == true) {
  711. this.$modal.msgSuccess('充值成功')
  712. this.searchUser()
  713. this.clearData()
  714. }
  715. })
  716. return
  717. }
  718. this.rechargeTitle = '支付方式选择'
  719. this.openRecharge = true
  720. this.orderNo = null
  721. },
  722. // 结算
  723. submitSettlement() {
  724. // if (this.payFrom.payType == '2' && this.payFrom.isInstalment == 'N' && this.payFrom.thisPayMoney < this.orderNeedPayAmount) {
  725. // this.$message.error('支付金额小于需支付金额')
  726. // return
  727. // }
  728. // if (this.payFrom.payType == '2' && this.payFrom.isInstalment == 'N' && this.payFrom.thisPayMoney > this.orderNeedPayAmount) {
  729. // this.$message.error('支付金额大于需支付金额')
  730. // return
  731. // }
  732. const orderRechargePayDTO = {
  733. orderNo: this.orderNo,
  734. appUserId: this.appUserInfo.id,
  735. payType: this.payFrom.payType,
  736. isInstalment: this.payFrom.isInstalment,
  737. couponIds: [],
  738. remark: this.rechargeInfo.remark,
  739. rechargeAmount: this.rechargeInfo.rechargeAmount,
  740. giveAmount: this.rechargeInfo.giveAmount,
  741. givePointAmount: this.rechargeInfo.givePointAmount,
  742. rechargeTypeId: this.rechargeInfo.rechargeTypeId,
  743. welfareAmount: this.rechargeInfo.welfareAmount,
  744. rechargeType: this.rechargeInfo.rechargeType,
  745. payAmount: this.orderNeedPayAmount,
  746. }
  747. if (this.alreadySelectCouponList.length > 0) {
  748. this.alreadySelectCouponList.forEach((vo) => {
  749. orderRechargePayDTO.couponIds.push(vo.id)
  750. })
  751. } else {
  752. orderRechargePayDTO.couponIds = []
  753. }
  754. if (this.payFrom.isInstalment == 'N') {
  755. orderRechargePayDTO.thisPayAmount = this.orderNeedPayAmount
  756. }
  757. if (this.payFrom.isInstalment == 'Y') {
  758. orderRechargePayDTO.thisPayAmount = this.payFrom.thisPayMoney
  759. }
  760. // 现金支付
  761. if (this.payFrom.payType == 2) {
  762. orderRechargePayDTO.thisPayAmount = this.orderNeedPayAmount
  763. }
  764. // 微信支付
  765. if (this.payFrom.payType == 0) {
  766. orderRechargePayDTO.authCode = this.payFrom.wxBarcode
  767. }
  768. // 支付宝支付
  769. if (this.payFrom.payType == 1) {
  770. orderRechargePayDTO.authCode = this.payFrom.aliPayBarcode
  771. }
  772. if (this.payFrom.payType == 9) {
  773. if (!this.payFrom.cashPayAmount) {
  774. this.$message.error('请输入现金支付金额')
  775. return
  776. }
  777. if (Number(this.payFrom.cashPayAmount) >= Number(this.orderNeedPayAmount)) {
  778. this.$message.error('现金支付金额必须小于还需支付金额')
  779. return
  780. }
  781. orderRechargePayDTO.cashPayAmount = this.payFrom.cashPayAmount || 0
  782. orderRechargePayDTO.otherPayAmount = this.payFrom.otherPayAmount || 0
  783. }
  784. this.$confirm('确定进行支付结算吗?')
  785. .then(() => {
  786. const loading = this.$loading({
  787. lock: true,
  788. text: 'Loading',
  789. spinner: 'el-icon-loading',
  790. background: 'rgba(0, 0, 0, 0.7)'
  791. })
  792. if (this.orderNo == null) {
  793. // 首次支付
  794. addOrder(orderRechargePayDTO).then((response) => {
  795. loading.close()
  796. this.orderNo = response.data.orderNo
  797. // 第三方支付
  798. if (this.payFrom.payType == '0' || this.payFrom.payType == '1' || (this.payFrom.payType == '9' && this.payFrom.otherPayAmount)) {
  799. this.isPaying = true
  800. var intervalId = setInterval(() => {
  801. this.intervalCheckOrderStatus(intervalId, this.orderNo)
  802. }, 4000)
  803. } else {
  804. this.checkIsAllPay(this.orderNo)
  805. }
  806. if (orderRechargePayDTO.isInstalment == 'Y') {
  807. this.$confirm('本次支付完成,是否继续支付')
  808. .then(() => {
  809. this.alreadyPayTotal = this.alreadyPayTotal + parseFloat(this.payFrom.thisPayMoney)
  810. this.saveAlreadyPayAmount()
  811. })
  812. .catch(() => {
  813. this.openRecharge = false
  814. this.orderNo = null
  815. this.$modal.msgWarning('确定关闭本次充值吗?关闭后如需完成支付请前往订单管理继续支付')
  816. })
  817. }
  818. }, err => {
  819. loading.close()
  820. })
  821. } else {
  822. // 多次支付
  823. morePay(orderRechargePayDTO).then((response) => {
  824. loading.close()
  825. if (response.data.payResult != 200) {
  826. this.$message.error(response.data.payMsg)
  827. return
  828. }
  829. if (this.payFrom.payType == '0' || this.payFrom.payType == '1') {
  830. //第三方支付
  831. console.log('第三方支付')
  832. this.isPaying = true
  833. var intervalId = setInterval(() => {
  834. this.intervalCheckOrderStatus(intervalId, response.data.orderNo)
  835. }, 4000)
  836. } else {
  837. this.checkIsAllPay(this.orderNo)
  838. }
  839. if (orderRechargePayDTO.isInstalment == 'Y') {
  840. this.$confirm('本次支付完成,是否继续支付')
  841. .then(() => {
  842. this.alreadyPayTotal = this.alreadyPayTotal + parseFloat(this.payFrom.thisPayMoney)
  843. this.saveAlreadyPayAmount()
  844. })
  845. .catch(() => {
  846. this.openRecharge = false
  847. this.orderNo = null
  848. this.$modal.msgWarning('确定关闭本次充值吗?关闭后如需完成支付请前往订单管理继续支付')
  849. })
  850. }
  851. })
  852. }
  853. })
  854. .catch(() => {})
  855. },
  856. intervalCheckOrderStatus(intervalId, orderNo) {
  857. getOrderStatusByOrderNo({ orderNo: orderNo }).then((response) => {
  858. if (response.data == '0') {
  859. return
  860. }
  861. this.isPaying = false
  862. if (response.data == '100') {
  863. //已取消
  864. this.$notify.error({
  865. title: '支付失败',
  866. message: '支付超时或客户已取消支付'
  867. })
  868. clearInterval(intervalId)
  869. return
  870. }
  871. this.$notify({
  872. title: '支付成功',
  873. message: '客户已成功支付订单',
  874. type: 'success'
  875. })
  876. this.openRecharge = false
  877. this.searchUser()
  878. clearInterval(intervalId)
  879. })
  880. },
  881. checkIsAllPay(orderNo) {
  882. // getOrderIsAllPayByOrderNo({ orderNo: orderNo }).then((response) => {
  883. // if (response.data == true) {
  884. this.$modal.msgSuccess('支付成功')
  885. this.openRecharge = false
  886. this.openWelfareRecharge = false
  887. this.searchUser()
  888. // }
  889. // })
  890. },
  891. // 保存临时的 支付金额 用于取消支付提示信息
  892. saveAlreadyPayAmount() {
  893. // 微信
  894. if (this.payFrom.payType == '0') {
  895. this.alreadyPayInfo.alreadyPayWX = this.alreadyPayInfo.alreadyPayWX + parseFloat(this.payFrom.thisPayMoney)
  896. }
  897. // 支付宝
  898. if (this.payFrom.payType == '1') {
  899. this.alreadyPayInfo.alreadyPayAli = this.alreadyPayInfo.alreadyPayAli + parseFloat(this.payFrom.thisPayMoney)
  900. }
  901. // 现金
  902. if (this.payFrom.payType == '2') {
  903. this.alreadyPayInfo.alreadyPayCash = this.alreadyPayInfo.alreadyPayCash + parseFloat(this.payFrom.thisPayMoney)
  904. }
  905. },
  906. // 支付页面 确认按钮
  907. submitConfirm() {
  908. this.payConfirm = true
  909. },
  910. // 切换支付方式
  911. changePayType() {
  912. this.payConfirm = false
  913. this.payFrom.thisPayMoney = null
  914. this.payFrom.aliPayBarcode = null
  915. this.payFrom.wxBarcode = null
  916. },
  917. // 取消按钮
  918. cancel() {
  919. this.open = false
  920. this.reset()
  921. },
  922. // 表单重置
  923. reset() {
  924. this.form = {
  925. id: null,
  926. phoneNumber: null,
  927. nickName: null,
  928. realName: null,
  929. sex: null,
  930. birthday: null,
  931. avatarUrl: null,
  932. unionId: null,
  933. createTime: null,
  934. payPassword: null,
  935. isUsePayPassword: null,
  936. status: '0',
  937. level: null
  938. }
  939. this.resetForm('form')
  940. },
  941. resetPayInfo() {
  942. this.alreadyPayTotal = 0
  943. this.couponAmount = 0
  944. this.payConfirm = false
  945. this.rechargeInfo = {}
  946. this.alreadySelectCouponList = []
  947. this.payFrom = {
  948. payType: '2',
  949. isInstalment: 'N',
  950. wxBarcode: null,
  951. aliPayBarcode: null,
  952. thisPayMoney: 0,
  953. isUsedCoupon: false
  954. }
  955. this.alreadyPayInfo = {
  956. alreadyPayWX: 0,
  957. alreadyPayCash: 0,
  958. alreadyPayAli: 0
  959. }
  960. },
  961. /** 新增按钮操作 */
  962. handleAdd() {
  963. this.reset()
  964. this.open = true
  965. this.title = '添加用户'
  966. },
  967. // 多选框选中数据
  968. handleSelectionChange(selection) {
  969. this.ids = selection.map((item) => item.id)
  970. this.single = selection.length !== 1
  971. this.multiple = !selection.length
  972. },
  973. submitAlreadySelectCouponList() {
  974. this.alreadySelectCouponList = []
  975. this.ids.forEach((id) => {
  976. const vo = this.couponList.find((item) => item.id == id)
  977. this.alreadySelectCouponList.push(vo)
  978. })
  979. this.openCoupon = false
  980. },
  981. handleDelete(row) {
  982. this.alreadySelectCouponList = this.alreadySelectCouponList.filter((item) => item.id != row.id)
  983. this.$forceUpdate()
  984. }
  985. }
  986. }
  987. </script>
  988. <style></style>