|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <div class="showGoodsIdx">
|
|
|
+ <s-header :name="$t('device.returnCoin')" :noback="false"></s-header>
|
|
|
+ <div class="headerCon kBordBott o-plr-10 o-ptb-16 l-flex-RC">
|
|
|
+ <div class="line o-mr-6"></div>
|
|
|
+ <div>
|
|
|
+ <span class="c-color c-text-14">{{ $t('device.showGoodsPage.equipmentName') }}：</span>
|
|
|
+ <span class="c-text-color c-text-14">{{ equipmentName }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="">
|
|
|
+ <van-field name="stepper" :label="$t('device.returnCoinPage.amount')" class="l-flex-RC">
|
|
|
+ <template #input>
|
|
|
+ <van-stepper v-model="amount" max="50"/>
|
|
|
+ </template>
|
|
|
+ <template #button>
|
|
|
+ <van-button size="small" type="primary" @click="applyReturnCoinClk()">{{ $t('device.returnCoinPage.returnCoinBtn')
|
|
|
+ }}</van-button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
+ <van-cell :title="$t('device.returnCoinPage.returnCoinRecord')" icon="points"/>
|
|
|
+ <div class="outer2 flex-col" v-for="item in recordList" :key="item.id">
|
|
|
+ <div class="word">{{ $t('device.returnCoinPage.applyTime') }}：{{ showTime(item.createDate) }}</div>
|
|
|
+ <div class="word">{{ $t('device.returnCoinPage.amount') }}：{{ item.amount }}</div>
|
|
|
+ <div class="word">{{ $t('device.returnCoinPage.status') }}：{{ item.status == 1 ? $t('device.returnCoinPage.returnCoinSuccess') : (item.status == 2 ? $t('device.returnCoinPage.returnCoinFailed') : $t('device.returnCoinPage.waiting')) }}</div>
|
|
|
+ <div class="word" v-if="item.status == 2">{{ $t('device.returnCoinPage.reason') }}：{{ item.reason}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 导入接口
|
|
|
+import { applyReturnCoin, getReturnCoinList } from '@/service/device/index';
|
|
|
+import sHeader from "@/components/SimpleHeader";
|
|
|
+import { ref } from "@vue/reactivity";
|
|
|
+import { onMounted } from '@vue/runtime-core';
|
|
|
+import { useRoute, useRouter } from 'vue-router';
|
|
|
+import { showConfirmDialog, showFailToast, showToast } from 'vant';
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import { getLoginUser, styleUrl } from '../../../common/js/utils';
|
|
|
+import dateUtil from "../../../utils/dateUtil";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ sHeader
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ // 引入语言
|
|
|
+ const { t } = useI18n();
|
|
|
+ // 路由
|
|
|
+ const route = useRoute();
|
|
|
+ const router = useRouter();
|
|
|
+ const amount = ref(1);
|
|
|
+ const user = getLoginUser();
|
|
|
+ const equipmentId = ref('');
|
|
|
+ const equipmentName = ref('');
|
|
|
+ const clientId = ref('');
|
|
|
+ const activeNames = ref(['1']);
|
|
|
+ const recordList = ref([]);
|
|
|
+ // 刚进页面
|
|
|
+ onMounted(() => {
|
|
|
+ // 加载样式
|
|
|
+ styleUrl('showGoods');
|
|
|
+ equipmentId.value = route.query.deviceId || "";
|
|
|
+ const name = route.query.name || "";
|
|
|
+ clientId.value = route.query.clientId || "";
|
|
|
+ if (equipmentId) {
|
|
|
+ equipmentName.value = name;
|
|
|
+ }
|
|
|
+ getList(clientId.value);
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ // 获取退币记录
|
|
|
+ const getList = async () => { // 声明为异步函数
|
|
|
+ try {
|
|
|
+ const { data } = await getReturnCoinList({equipmentId: equipmentId.value}); // 使用await等待异步函数执行完毕并返回结果
|
|
|
+ // 处理获取到的data
|
|
|
+ recordList.value = data.data;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error fetching data:', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 格式化时间
|
|
|
+ const showTime = (time) => {
|
|
|
+ return dateUtil.timeZoneDate(new Date(dateUtil.formateDate(new Date(time), "yyyy/MM/dd hh:mm:ss")));
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 退币申请
|
|
|
+ const applyReturnCoinClk = () => {
|
|
|
+ const params = {
|
|
|
+ equipmentId: equipmentId.value,
|
|
|
+ amount: amount.value,
|
|
|
+ adminId: user.id
|
|
|
+ };
|
|
|
+ showConfirmDialog({
|
|
|
+ title: t('alramClean.tips'),
|
|
|
+ message: t('device.returnCoinPage.tipsContent'),
|
|
|
+ }).then(async () => {
|
|
|
+ const { data } = await applyReturnCoin(params);
|
|
|
+ console.log("data>>>", data);
|
|
|
+ if (data.code) {
|
|
|
+ showToast(t('alramClean.successfully'));
|
|
|
+ setTimeout(() => {
|
|
|
+ router.go(-1);
|
|
|
+ }, 1500);
|
|
|
+ } else {
|
|
|
+ showFailToast(data.message);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ equipmentName,
|
|
|
+ applyReturnCoinClk,
|
|
|
+ amount,
|
|
|
+ activeNames,
|
|
|
+ recordList,
|
|
|
+ showTime
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+.van-cell {
|
|
|
+ font-size: 20px !important;
|
|
|
+}
|
|
|
+.outer2 {
|
|
|
+ box-shadow: 1px 2px 5px 3px rgba(70, 95, 198, 0.14);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 20px 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px 20px;
|
|
|
+
|
|
|
+ .word {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 3px 0;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
