You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

702 lines
22 KiB

2 months ago
3 months ago
3 months ago
3 months ago
1 month ago
1 month ago
1 month ago
3 months ago
3 months ago
3 months ago
2 months ago
3 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
2 months ago
3 months ago
3 months ago
1 month ago
3 months ago
3 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <script setup>
  2. import { computed, onMounted, reactive, ref, watch } from 'vue'
  3. import { ElMessage, ElMessageBox } from 'element-plus'
  4. import API from '@/util/http.js'
  5. import moment from 'moment'
  6. import {useAdminStore} from "@/store/index.js";
  7. import {storeToRefs} from "pinia";
  8. import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
  9. import { ta } from 'element-plus/es/locales.mjs';
  10. const adminStore = useAdminStore();
  11. const {adminData, menuTree} = storeToRefs(adminStore);
  12. const addRe = ref({
  13. typeR: '0'
  14. })
  15. const tableData = ref([])
  16. const pagination = ref({
  17. pageNum: 1,
  18. pageSize: 10,
  19. total: 0
  20. })
  21. // 精网号去空格
  22. const trimJwCode = () => {
  23. if (addRefund.value.jwcode) {
  24. addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, '');
  25. }
  26. }
  27. // 这是添加退款信息的表单
  28. const addRefund = ref({
  29. jwcode: '',
  30. goodsName: '',
  31. refundType: '',
  32. refundModel: 0,
  33. permanentGold: '',
  34. freeGold: '',
  35. taskGold: '',
  36. sumGold: 0,
  37. remark: '',
  38. adminId: null,
  39. orderCode: '',
  40. type: 0
  41. })
  42. // 取消按钮
  43. const cancel = function () {
  44. addRefund.value = {
  45. jwcode: '',
  46. goodsName: '',
  47. refundType: '',
  48. refundModel: 0,
  49. permanentGold: '',
  50. freeGold: '',
  51. taskGold: '',
  52. sumGold: 0,
  53. remark: '',
  54. adminId: adminData.value.id,
  55. orderCode: '',
  56. }
  57. addRe.value.typeR = '0'
  58. }
  59. const show = function () {
  60. console.log('===================================', addRefund.value.refundType)
  61. }
  62. // 这是添加退款信息的接口
  63. const add = async function () {
  64. try {
  65. // 更新 refundModel
  66. addRefund.value.refundModel = parseInt(addRe.value.typeR);
  67. if (addRefund.value.refundType === '商品退款') {
  68. addRefund.value.type = 1
  69. } else {
  70. addRefund.value.type = 0
  71. }
  72. // 对提交的金币数乘以 100
  73. const processedRefund = {
  74. ...addRefund.value,
  75. permanentGold: (Number(addRefund.value.permanentGold) || 0) * 100,
  76. freeGold: (Number(addRefund.value.freeGold) || 0) * 100,
  77. taskGold: (Number(addRefund.value.taskGold) || 0) * 100,
  78. sumGold: (Number(addRefund.value.sumGold) || 0) * 100
  79. }
  80. addDisabled.value = true
  81. // 发送POST请求
  82. const result = await API({
  83. url: '/refund/add',
  84. data: processedRefund
  85. })
  86. addDisabled.value = false
  87. if (result.code === 0) {
  88. ElMessage.error(result.msg)
  89. return
  90. }
  91. console.log('请求成功', result)
  92. ElMessage.success('添加成功')
  93. // 重置表单
  94. cancel()
  95. } catch (error) {
  96. console.log('请求失败', error)
  97. // 在这里可以处理错误逻辑,比如显示错误提示等
  98. }
  99. }
  100. //提交禁止重复点击
  101. const addDisabled = ref(false)
  102. // 提交退款信息前的表单验证
  103. const addBefore = () => {
  104. Ref.value.validate(async (valid) => {
  105. if (valid) {
  106. // try {
  107. // await getUser(addRefund.value.jwcode);
  108. // if (!user.value.jwcode) {
  109. // ElMessage.error('请先验证有效的精网号');
  110. // return;
  111. // }
  112. // } catch (error) {
  113. // ElMessage.error('精网号验证失败');
  114. // return;
  115. // }
  116. ElMessageBox.confirm('确认退款?')
  117. .then(() => {
  118. add()
  119. console.log('退款成功')
  120. })
  121. .catch(() => {
  122. console.log('取消退款')
  123. })
  124. } else {
  125. //提示
  126. ElMessage({
  127. type: 'error',
  128. message: '请检查输入内容'
  129. })
  130. }
  131. })
  132. }
  133. // 表单验证
  134. // 开始时间改变时,重新验证结束时间
  135. const Ref = ref(null)
  136. const startChange = (val) => {
  137. }
  138. const validateJwCode = (rule, value, callback) => {
  139. if (!value) {
  140. callback(new Error('精网号不能为空'));
  141. return;
  142. }
  143. if (/[^0-9]/.test(value)) {
  144. callback(new Error('精网号只能包含数字'));
  145. return;
  146. }
  147. callback();
  148. };
  149. const rules = reactive({
  150. jwcode: [{ required: true, validator: validateJwCode, trigger: 'blur' }],
  151. refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
  152. goodsName: [{ required: false, message: '请选择退款商品', trigger: 'blur' }],
  153. // 订单号
  154. orderCode: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
  155. taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
  156. freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
  157. permanentGold: [
  158. { required: true, message: '请输入永久金币', trigger: 'blur' }
  159. ],
  160. sumGold: [
  161. { required: true, message: '请选择付款方式', trigger: 'blur' },
  162. {
  163. validator: (rule, value) => {
  164. if (value === 0) {
  165. return Promise.reject(new Error('总金币不能为0'))
  166. }
  167. return Promise.resolve()
  168. },
  169. trigger: 'blur'
  170. }
  171. ]
  172. })
  173. // 取消按钮
  174. const cancelExceptJwcode = function () {
  175. addRefund.value = {
  176. jwcode: addRefund.value.jwcode, // 保留精网号
  177. goodsName: '',
  178. refundType: '',
  179. refundModel: 0,
  180. permanentGold: '',
  181. freeGold: '',
  182. taskGold: '',
  183. sumGold: 0,
  184. remark: '',
  185. adminId: adminData.value.id
  186. }
  187. addRe.value.typeR = '0'
  188. }
  189. // 查找客户信息的方法
  190. const user = ref({
  191. firstRechargeTime: ''
  192. })
  193. const getUser = async function (jwcode) {
  194. trimJwCode();
  195. // cancelExceptJwcode();
  196. // 验证精网号
  197. if (!jwcode) {
  198. ElMessage.warning('精网号不能为空');
  199. return;
  200. }
  201. // 验证精网号是否为数字
  202. if (!/^\d{1,9}$/.test(jwcode)) {
  203. cancel()
  204. return;
  205. }
  206. try {
  207. // 发送POST请求
  208. const result = await API({
  209. url: '/user/selectUser',
  210. data: {
  211. jwcode: addRefund.value.jwcode
  212. }
  213. })
  214. console.log('请求成功', result)
  215. // 重置订单信息
  216. restGoods()
  217. //在此处错误逻辑的提示做了注释,在后续商品查询接口返回错误时,提示信息会显示在弹窗中
  218. if (result.code === 0) {
  219. ElMessage.error(result.msg);
  220. } else if (result.data === null) {
  221. ElMessage.error("用户不存在");
  222. } else {
  223. // 对传过来的金币数除以 100
  224. const processedData = {
  225. ...result.data,
  226. historySumGold: (Number(result.data.historySumGold) || 0),
  227. nowSumGold: (Number(result.data.nowSumGold) || 0),
  228. nowPermanentGold: (Number(result.data.nowPermanentGold) || 0),
  229. nowFreeGold: (Number(result.data.nowFreeGold) || 0),
  230. nowTaskGold: (Number(result.data.nowTaskGold) || 0)
  231. }
  232. user.value = processedData;
  233. console.log("用户信息", user.value);
  234. //ElMessage.success(result.msg);
  235. }
  236. } catch (error) {
  237. console.log("请求失败", error);
  238. ElMessage.error("精网号错误");
  239. }
  240. }
  241. // 退款类型,写死为商品退款
  242. const refundType = ref([
  243. { value: '商品退款', label: '商品退款' },
  244. { value: '金币退款', label: '金币退款' }
  245. ]);
  246. // 根据精网号查询商品
  247. const goodsName = ref([]) // 存储所有商品信息
  248. const orderCodes = ref([]) // 订单号下拉
  249. const getGoods = async function (jwcode) {
  250. trimJwCode();
  251. if (!/^\d{1,9}$/.test(jwcode)) {
  252. ElMessage.warning('精网号必须为数字且不超过九位');
  253. return;
  254. }
  255. if (!addRefund.value.jwcode) {
  256. goodsName.value = []
  257. orderCodes.value = []
  258. return;
  259. }
  260. console.log('=======================', addRefund.value.refundType)
  261. if (addRefund.value.refundType === '商品退款') {
  262. addRefund.value.type = 1
  263. } else {
  264. addRefund.value.type = 0
  265. }
  266. try {
  267. const result = await API({
  268. url: '/refund/selectGoods',
  269. data: {
  270. jwcode: addRefund.value.jwcode,
  271. type: addRefund.value.type
  272. }
  273. })
  274. tableData.value = result.data
  275. if (result.data.length === 0) {
  276. ElMessage.error('该用户没有商品订单')
  277. return
  278. }
  279. if (Array.isArray(result.data)) {
  280. // 存储完整商品数据
  281. goodsName.value = result.data.map(item => ({
  282. orderCode: item.orderCode,
  283. goodsName: item.goodsName,
  284. permanentGold: Math.abs(Number((item.permanentGold) || 0) / 100),
  285. freeGold: Math.abs(Number((item.freeGold) || 0) / 100),
  286. taskGold: Math.abs(Number((item.taskGold) || 0) / 100),
  287. }))
  288. // 转换订单号数组 [{label, value}]
  289. orderCodes.value = result.data.map(item => ({
  290. label: item.orderCode,
  291. value: item.orderCode
  292. }))
  293. } else {
  294. ElMessage.error('商品数据格式错误,请联系管理员')
  295. }
  296. } catch (error) {
  297. console.log('请求失败', error)
  298. ElMessage.error('查询商品失败,请检查精网号是否正确')
  299. goodsName.value = []
  300. orderCodes.value = []
  301. }
  302. }
  303. // 根据订单号自动带出商品名
  304. const handleOrderChange = (orderCode) => {
  305. const selected = goodsName.value.find(item => item.orderCode === orderCode)
  306. if (selected) {
  307. addRefund.value.goodsName = selected.goodsName
  308. // 退款方式是“全部退款”时,自动填充金币
  309. if (addRe.value.typeR === '0') {
  310. addRefund.value.permanentGold = selected.permanentGold
  311. addRefund.value.freeGold = selected.freeGold
  312. addRefund.value.taskGold = selected.taskGold
  313. }
  314. // 记录选中商品金币
  315. selectedGoodsGold.value = {
  316. permanentGold: selected.permanentGold,
  317. freeGold: selected.freeGold,
  318. taskGold: selected.taskGold
  319. }
  320. } else {
  321. restGoods()
  322. }
  323. }
  324. // 存储选中商品的金币花费信息
  325. const selectedGoodsGold = ref({
  326. permanentGold: 0,
  327. freeGold: 0,
  328. taskGold: 0
  329. })
  330. // 重置订单信息
  331. const restGoods = () => {
  332. addRefund.value.orderCode = ''
  333. addRefund.value.goodsName = ''
  334. addRefund.value.permanentGold = ''
  335. addRefund.value.freeGold = ''
  336. addRefund.value.taskGold = ''
  337. }
  338. // 处理退款方式切换,当部分退款切换全部退款时,退款金额应自动重新填充
  339. const handleRefundModelChange = () => {
  340. if (addRe.value.typeR === '0') {
  341. // 全部退款时
  342. addRefund.value.permanentGold = selectedGoodsGold.value.permanentGold;
  343. addRefund.value.freeGold = selectedGoodsGold.value.freeGold;
  344. addRefund.value.taskGold = selectedGoodsGold.value.taskGold;
  345. }
  346. }
  347. const handleSelectionChange = (selectedOption) => {
  348. if (selectedOption) {
  349. // 更新商品名称
  350. addRefund.value.goodsName = selectedOption.value;
  351. // 更新金币字段
  352. addRefund.value.permanentGold = selectedOption.permanentGold || 0;
  353. addRefund.value.freeGold = selectedOption.freeGold || 0;
  354. addRefund.value.taskGold = selectedOption.taskGold || 0;
  355. // 记录选中商品的金币花费
  356. selectedGoodsGold.value.permanentGold = Number(selectedOption.permanentGold) || 0;
  357. selectedGoodsGold.value.freeGold = Number(selectedOption.freeGold) || 0;
  358. selectedGoodsGold.value.taskGold = Number(selectedOption.taskGold) || 0;
  359. } else {
  360. // 清空逻辑保持不变
  361. }
  362. console.log('选择的商品', selectedOption);
  363. }
  364. // 统一的输入处理函数
  365. const handleGoldInput = (type, value) => {
  366. // 1. 过滤非法字符(只允许数字和小数点)
  367. let filtered = value.replace(/[^\d.]/g, '');
  368. // 2. 防止多个小数点
  369. const dotCount = (filtered.match(/\./g) || []).length;
  370. if (dotCount > 1) {
  371. // 保留第一个小数点,移除后续的小数点
  372. const parts = filtered.split('.');
  373. filtered = parts[0] + '.' + parts.slice(1).join('');
  374. }
  375. // 3. 限制小数点后两位
  376. if (filtered.includes('.')) {
  377. const [integer, decimal] = filtered.split('.');
  378. if (decimal.length > 2) {
  379. filtered = `${integer}.${decimal.slice(0, 2)}`;
  380. }
  381. }
  382. // 4. 检查是否以小数点开头,如果是,在前面添加0
  383. if (filtered.startsWith('.')) {
  384. filtered = '0' + filtered;
  385. }
  386. // 5. 更新值
  387. addRefund.value[type] = filtered;
  388. // 6. 验证逻辑(这里直接应用修正后的值)
  389. const maxValue = selectedGoodsGold.value[type];
  390. const inputValue = Number(filtered || 0);
  391. if (isNaN(inputValue)) {
  392. return;
  393. }
  394. if (inputValue > maxValue) {
  395. // 修正为最大值并设置回输入框
  396. const correctedValue = maxValue.toFixed(2);
  397. addRefund.value[type] = correctedValue;
  398. ElMessage.warning('所填金额大于该类金币余额');
  399. }
  400. if (inputValue < 0) {
  401. // 修正为0并设置回输入框
  402. addRefund.value[type] = '0';
  403. ElMessage.warning('不能输入负数');
  404. }
  405. }
  406. // 使用示例
  407. const handlePermanentGoldInput = (value) => handleGoldInput('permanentGold', value);
  408. const handleFreeGoldInput = (value) => handleGoldInput('freeGold', value);
  409. const handleTaskGoldInput = (value) => handleGoldInput('taskGold', value);
  410. // 计算总金币
  411. const calculatedRechargeGoods = computed(() => {
  412. const permanentGold = addRefund.value.permanentGold === '' ? 0 : +addRefund.value.permanentGold;
  413. const freeGold = addRefund.value.freeGold === '' ? 0 : +addRefund.value.freeGold;
  414. const taskGold = addRefund.value.taskGold === '' ? 0 : +addRefund.value.taskGold;
  415. return Number((permanentGold + freeGold + taskGold).toFixed(2));
  416. })
  417. watch(calculatedRechargeGoods, (newVal) => {
  418. addRefund.value.sumGold = newVal
  419. console.log('计算的总金币', newVal)
  420. })
  421. const handlePageSizeChange = function (val) {
  422. pagination.value.pageSize = val
  423. }
  424. const handleCurrentChange = function (val) {
  425. pagination.value.pageNum = val
  426. }
  427. </script>
  428. <template>
  429. <div class="father">
  430. <div class="userAndForm">
  431. <div class="left">
  432. <el-form :model="addRefund" ref="Ref" :rules="rules" label-width="auto" label-position="right"
  433. style="min-width: 420px" class="add-form">
  434. <el-form-item prop="jwcode" label="精网号">
  435. <el-input v-model="addRefund.jwcode" style="width: 220px" />
  436. <el-button type="primary" @click="getUser(addRefund.jwcode)" style="margin-left: 20px">查询
  437. </el-button>
  438. </el-form-item>
  439. <el-form-item prop="refundType" label="退款类型" @change="show">
  440. <el-select v-model="addRefund.refundType" placeholder="请选择" style="width: 220px"
  441. @change="getGoods(addRefund.jwcode)">
  442. <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
  443. </el-select>
  444. </el-form-item>
  445. <el-form-item prop="orderCode" label="订单号">
  446. <el-select v-model="addRefund.orderCode" placeholder="请选择订单号" style="width: 220px;" clearable filterable
  447. :filter-method="handleFilter" @change="handleOrderChange">
  448. <el-option v-for="(item, index) in orderCodes" :key="index" :label="item.label" :value="item.value" />
  449. </el-select>
  450. </el-form-item>
  451. <el-form-item prop="goodsName" label="商品名">
  452. <el-input v-model="addRefund.goodsName" style="width: 220px" disabled />
  453. </el-form-item>
  454. <el-form-item prop="refundModel" label="退款方式:">
  455. <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
  456. <el-radio value="0">全部退款</el-radio>
  457. <el-radio value="1">部分退款</el-radio>
  458. </el-radio-group>
  459. </el-form-item>
  460. <el-form-item prop="permanentGold" label="永久金币">
  461. <el-input v-model="addRefund.permanentGold" style="width: 220px"
  462. :disabled="addRe.typeR === '0' ? true : false" @input="handlePermanentGoldInput($event)" type="number">
  463. </el-input>&nbsp;&nbsp;
  464. </el-form-item>
  465. <el-form-item prop="freeGold" label="免费金币">
  466. <el-input v-model="addRefund.freeGold" style="float: left; width: 220px"
  467. :disabled="addRe.typeR === '0' ? true : false" @input="handleFreeGoldInput($event)" type="number" />
  468. &nbsp;&nbsp;
  469. </el-form-item>
  470. <div>
  471. <el-form-item prop="taskGold" label="任务金币">
  472. <el-input v-model="addRefund.taskGold" style="float: left; width: 220px"
  473. :disabled="addRe.typeR === '0' ? true : false" @input="handleTaskGoldInput($event)" type="number" />
  474. &nbsp;&nbsp;
  475. </el-form-item>
  476. </div>
  477. <div>
  478. <el-form-item prop="sumGold" label="退款金币总数">
  479. <el-input disabled v-model="addRefund.sumGold" style="width: 220px">
  480. </el-input>
  481. </el-form-item>
  482. </div>
  483. <div>
  484. <el-form-item prop="remark" label="备注">
  485. <el-input v-model="addRefund.remark" style="width: 220px" :rows="3" maxlength="100" show-word-limit
  486. type="textarea" />
  487. </el-form-item>
  488. </div>
  489. <el-button type="success" @click="cancel()" style="margin-left: 200px">重置</el-button>
  490. <el-button type="primary" :disabled="addDisabled" @click="addBefore"> 提交</el-button>
  491. </el-form>
  492. </div>
  493. </div>
  494. <div class="right">
  495. <div class="right-up">
  496. <!-- 客户信息栏 -->
  497. <el-card v-if="user.jwcode" class="customer-info">
  498. <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
  499. <el-text size="large" style="padding:30%; ">客户信息</el-text>
  500. <!-- 第一行姓名 + 历史金币 -->
  501. <el-row style="margin-top: 10px;height:5vh;">
  502. <el-col :span="9">
  503. <el-form-item label="姓名">
  504. <p>{{ user.name }}</p>
  505. </el-form-item>
  506. </el-col>
  507. <el-col :span="14">
  508. <el-form-item label="当前金币总数" style="width: 500px">
  509. <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
  510. user.nowSumGold
  511. }}</span>
  512. </el-form-item>
  513. <!-- 金币详情独立显示 -->
  514. <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
  515. <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
  516. user.nowPermanentGold
  517. }};
  518. 免费金币:{{ user.nowFreeGold }};
  519. 任务金币:{{ user.nowTaskGold }})</span>
  520. </el-form-item>
  521. </el-col>
  522. </el-row>
  523. <!-- 第二行精网号 + 当前金币独立行 -->
  524. <el-row style="margin-top: 1px;height:5vh;">
  525. <el-col :span="9">
  526. <el-form-item label="精网号">
  527. <p>{{ user.jwcode }}</p>
  528. </el-form-item>
  529. </el-col>
  530. <el-col :span="14">
  531. <el-form-item label="消费次数">
  532. <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
  533. </el-form-item>
  534. <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
  535. <p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p>
  536. </el-form-item>
  537. </el-col>
  538. </el-row>
  539. <!-- 第四行消费次数 + 所属门店 -->
  540. <el-row style="margin-top: 1px;height:3vh;">
  541. <el-col :span="9">
  542. <el-form-item label="所属门店">
  543. <p>{{ user.market }}</p>
  544. </el-form-item>
  545. </el-col>
  546. </el-row>
  547. </el-form>
  548. </el-card>
  549. </div>
  550. <div class="right-down">
  551. <el-card class="card" v-if="tableData.length > 0">
  552. <el-table :data="tableData" style="height:43vh;width:50vw">
  553. <el-table-column type="index" label="序号" width="60" />
  554. <el-table-column prop="type" label="类型" width="120" >
  555. <template #default="{ row }">
  556. {{ row.orderCode.slice(3, 5) === 'CZ' ? '充值' : '消费' }}
  557. </template>
  558. </el-table-column>
  559. <el-table-column prop="goodsName" label="商品名称" width="120" />
  560. <el-table-column prop="orderCode" label="订单号" width="240px" show-overflow-tooltip />
  561. <el-table-column prop="permanentGold" label="永久金币" width="120">
  562. <template #default="{ row }">
  563. {{ row.permanentGold / 100 }}
  564. </template>
  565. </el-table-column>
  566. <el-table-column prop="freeGold" label="免费金币" width="120">
  567. <template #default="{ row }">
  568. {{ (row.freeGold) / 100 }}
  569. </template>
  570. </el-table-column>
  571. <el-table-column prop="taskGold" label="任务金币" width="120">
  572. <template #default="{ row }">
  573. {{ row.taskGold / 100 }}
  574. </template>
  575. </el-table-column>
  576. <el-table-column prop="isRefund" label="订单状态" width="120" />
  577. </el-table>
  578. <el-pagination class="pagination" v-model:current-page="pagination.pageNum"
  579. v-model:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
  580. :total="pagination.total" @size-change="handlePageSizeChange"
  581. @current-change="handleCurrentChange"></el-pagination>
  582. </el-card>
  583. </div>
  584. </div>
  585. </div>
  586. </template>
  587. <style scoped lang="scss">
  588. p {
  589. margin: 0px;
  590. }
  591. .father {
  592. width: 75vw;
  593. height: 70vh;
  594. display: flex;
  595. }
  596. .userAndForm {
  597. width: 25vw;
  598. height: 100%;
  599. display: flex;
  600. }
  601. .left {
  602. width: 35%;
  603. display: flex;
  604. .add-form {
  605. width: 100%;
  606. margin-top: 50px;
  607. }
  608. }
  609. .right-up {
  610. width: 35vw;
  611. height: 20vh;
  612. display: flex;
  613. .customer-info {
  614. width: 90%;
  615. display: flex;
  616. justify-content: center;
  617. align-items: center;
  618. padding: 0 10px;
  619. margin-left: 5vw;
  620. }
  621. }
  622. .card {
  623. width: 50vw;
  624. height: 50vh;
  625. margin-left: 5vw;
  626. margin-top: 1vh;
  627. }
  628. .pagination {
  629. display: flex;
  630. margin-top: 0.5vh;
  631. }
  632. </style>