BuyConfList.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <script setup>
  2. import { onMounted, reactive, ref } from "vue";
  3. import sHeader from "@/components/SimpleHeader";
  4. import { getBuyConfList } from "@/service/buyOrSell";
  5. import { showFailToast } from "vant";
  6. import { getLoginUser, styleUrl } from "@/common/js/utils";
  7. import dateUtil from "@/utils/dateUtil";
  8. import { useRouter } from 'vue-router'
  9. import { useTradeStore } from '@/stores/trade';
  10. // 状态,0未确认,1已确认(双方已确认),2买家已付款(卖家未确认),3买家超时未确认,4特殊取消
  11. const showStatusText = (statusVal) => {
  12. const statusMap = {
  13. 0: '等待买家付款',
  14. 1: '已成交',
  15. 2: '等待卖家确认',
  16. 3: '买家超时未付款',
  17. 4: '特殊取消'
  18. }
  19. return statusMap[statusVal] || '未知状态';
  20. }
  21. const router = useRouter()
  22. const user = getLoginUser();
  23. const loading = ref(false); // 加载状态
  24. const error = ref(false); // 错误状态
  25. const finished = ref(false); // 结束翻页状态
  26. const buyConfList = ref([]); // 列表集合
  27. const buyConfListTotal = ref(0); // 列表总数
  28. let searchParams = reactive({
  29. current: 1, // 当前页,默认第一页
  30. size: 10, // 页大小,默认10条
  31. });
  32. // 查询列表
  33. const searchGetList = () => {
  34. buyConfList.value = [];
  35. searchParams.current = 1;
  36. getList();
  37. };
  38. // 获取新人账号注册审批列表数据
  39. const getList = async () => {
  40. finished.value = false;
  41. const { data } = await getBuyConfList(
  42. Object.assign({}, searchParams)
  43. );
  44. // console.log("买入列表 >>>", data.data);
  45. if (data.code === "00000") {
  46. if (searchParams.current === 0) {
  47. buyConfList.value = [];
  48. }
  49. // 列表值叠加
  50. buyConfList.value = buyConfList.value.concat(
  51. data.data.records
  52. );
  53. buyConfListTotal.value = data.data.total;
  54. if (buyConfList.value.length === data.data.total) {
  55. finished.value = true;
  56. }
  57. loading.value = false;
  58. } else {
  59. showFailToast(data.message);
  60. }
  61. };
  62. const showDateTime = (date) => {
  63. return date
  64. ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
  65. : "";
  66. };
  67. // const userStore = useUserStore();
  68. const tradeStore = useTradeStore();
  69. // 去付款
  70. const toBuy = (item) => {
  71. // userStore.setUserInfo(item);
  72. tradeStore.setTradeItem(item);
  73. router.push({ name: 'buyConf' });
  74. };
  75. // 滚动加载
  76. const onLoad = () => {
  77. if (!finished.value) {
  78. searchParams.current = searchParams.current + 1;
  79. getList();
  80. }
  81. };
  82. // 是否有操作的权限
  83. const isOper = ref(true);
  84. // 初始化页面获取列表
  85. onMounted(async () => {
  86. // 加载样式
  87. styleUrl('buyConfList');
  88. if (user) {
  89. searchGetList();
  90. // 如果不是admin账号,不能有操作权限
  91. if (user.phone != '13245678901') {
  92. isOper.value = false;
  93. }
  94. }
  95. });
  96. </script>
  97. <template>
  98. <!-- 买入确认列表 -->
  99. <div class="buyConfList flex-col">
  100. <s-header name="买入确认" :noback="false"></s-header>
  101. <div class="buyConfBox flex-col">
  102. <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
  103. :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
  104. @load="onLoad">
  105. <div class="searchRow flex-row justify-between">
  106. <div class="flex-col">
  107. <div class="flex-row justify-between bd3">
  108. <!-- 图标 -->
  109. <!-- <div class="flex-col outer4 proportionIcon"></div> -->
  110. <span class="flex-col txt2">{{ $t("taskMessage.total")
  111. }}<span class="discountNumber">{{ buyConfListTotal }}</span>{{
  112. $t("taskMessage.recordsInTotal") }}</span>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="listBox">
  117. <div v-for="item in buyConfList" :key="item.id" class="listItem">
  118. <div class="itemBox">
  119. <div class="itemRow">
  120. <span class="itemTitle">交易单号:&nbsp;</span>{{
  121. item.id }}
  122. </div>
  123. <div class="itemRow">
  124. <span class="itemTitle">股票价格:&nbsp;</span>{{
  125. item.price }}
  126. </div>
  127. <div class="itemRow">
  128. <span class="itemTitle">股票数量:&nbsp;</span>{{
  129. item.tradeNumber }}
  130. </div>
  131. <!-- 创建时间 -->
  132. <div class="itemRow">
  133. <span class="itemTitle">创建时间:&nbsp;</span>{{
  134. showDateTime(item.createTime) }}
  135. </div>
  136. <!-- 卖家确认时间 -->
  137. <div class="itemRow" v-if="item.status === '1'">
  138. <span class="itemTitle">卖家确认时间:&nbsp;</span>{{
  139. showDateTime(item.sellerConfirmTime)
  140. }}
  141. </div>
  142. <!-- 0买家未确认,去付款 -->
  143. <div v-if="item.status === '0'" class="itemRow"
  144. style="display: flex; justify-content: flex-end">
  145. <van-button span="5" round type="primary" :style="{
  146. height: '2em',
  147. padding: '0 1.2em',
  148. margin: '0 1em',
  149. backgroundColor: 'rgb(200, 55, 95 / 80%)', // 红色背景,不透明度为100%
  150. color: '#fff', // 文字颜色为白色
  151. boxShadow: '0 2px 8px rgba(255, 55, 95, 0.3)', // 添加阴影效果
  152. transition: 'all 0.3s ease' // 添加过渡效果,使变化更平滑
  153. }" @click="toBuy(item)">
  154. 付款
  155. </van-button>
  156. </div>
  157. <!-- 1双方确认-绿#1dd36c,2已付款卖家未确认-蓝#16D8CF,3买家超时未确认-#163DD8,4特殊取消-紫#D816D8 -->
  158. <div class="itemRow" style="display: flex; justify-content: flex-end">
  159. <!-- 已确认 -->
  160. <span v-if="item.status === '1'" style="color: #1dd36c">{{
  161. showStatusText(item.status)
  162. }}</span>
  163. <!-- 已付款未确认 -->
  164. <span v-if="item.status === '2'" style="color: #16D8CF">{{
  165. showStatusText(item.status)
  166. }}</span>
  167. <!-- 买家超时未确认 -->
  168. <span v-if="item.status === '3'" style="color: #163DD8">{{
  169. showStatusText(item.status)
  170. }}</span>
  171. <!-- 特殊取消 -->
  172. <span v-if="item.status === '4'" style="color: #D816D8">{{
  173. showStatusText(item.status)
  174. }}</span>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </van-list>
  180. </div>
  181. </div>
  182. </template>
  183. <style lang="less" scoped>
  184. @import "../../common/style/common.less";
  185. </style>