123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <script setup>
- import { onMounted, reactive, ref } from "vue";
- import sHeader from "@/components/SimpleHeader";
- import { getBuyConfList } from "@/service/buyOrSell";
- import { showFailToast } from "vant";
- import { getLoginUser, styleUrl } from "@/common/js/utils";
- import dateUtil from "@/utils/dateUtil";
- import { useRouter } from 'vue-router'
- import { useTradeStore } from '@/stores/trade';
- // 状态,0未确认,1已确认(双方已确认),2买家已付款(卖家未确认),3买家超时未确认,4特殊取消
- const showStatusText = (statusVal) => {
- const statusMap = {
- 0: '等待买家付款',
- 1: '已成交',
- 2: '等待卖家确认',
- 3: '买家超时未付款',
- 4: '特殊取消'
- }
- return statusMap[statusVal] || '未知状态';
- }
- const router = useRouter()
- const user = getLoginUser();
- const loading = ref(false); // 加载状态
- const error = ref(false); // 错误状态
- const finished = ref(false); // 结束翻页状态
- const buyConfList = ref([]); // 列表集合
- const buyConfListTotal = ref(0); // 列表总数
- let searchParams = reactive({
- current: 1, // 当前页,默认第一页
- size: 10, // 页大小,默认10条
- });
- // 查询列表
- const searchGetList = () => {
- buyConfList.value = [];
- searchParams.current = 1;
- getList();
- };
- // 获取新人账号注册审批列表数据
- const getList = async () => {
- finished.value = false;
- const { data } = await getBuyConfList(
- Object.assign({}, searchParams)
- );
- // console.log("买入列表 >>>", data.data);
- if (data.code === "00000") {
- if (searchParams.current === 0) {
- buyConfList.value = [];
- }
- // 列表值叠加
- buyConfList.value = buyConfList.value.concat(
- data.data.records
- );
- buyConfListTotal.value = data.data.total;
- if (buyConfList.value.length === data.data.total) {
- finished.value = true;
- }
- loading.value = false;
- } else {
- showFailToast(data.message);
- }
- };
- const showDateTime = (date) => {
- return date
- ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss")
- : "";
- };
- // const userStore = useUserStore();
- const tradeStore = useTradeStore();
- // 去付款
- const toBuy = (item) => {
- // userStore.setUserInfo(item);
- tradeStore.setTradeItem(item);
- router.push({ name: 'buyConf' });
- };
- // 滚动加载
- const onLoad = () => {
- if (!finished.value) {
- searchParams.current = searchParams.current + 1;
- getList();
- }
- };
- // 是否有操作的权限
- const isOper = ref(true);
- // 初始化页面获取列表
- onMounted(async () => {
- // 加载样式
- styleUrl('buyConfList');
- if (user) {
- searchGetList();
- // 如果不是admin账号,不能有操作权限
- if (user.phone != '13245678901') {
- isOper.value = false;
- }
- }
- });
- </script>
- <template>
- <!-- 买入确认列表 -->
- <div class="buyConfList flex-col">
- <s-header name="买入确认" :noback="false"></s-header>
- <div class="buyConfBox flex-col">
- <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('common.reqFailClkReload')"
- :finished="finished" :finished-text="$t('common.noMoreTxt')" offset="300" :immediate-check="false"
- @load="onLoad">
- <div class="searchRow flex-row justify-between">
- <div class="flex-col">
- <div class="flex-row justify-between bd3">
- <!-- 图标 -->
- <!-- <div class="flex-col outer4 proportionIcon"></div> -->
- <span class="flex-col txt2">{{ $t("taskMessage.total")
- }}<span class="discountNumber">{{ buyConfListTotal }}</span>{{
- $t("taskMessage.recordsInTotal") }}</span>
- </div>
- </div>
- </div>
- <div class="listBox">
- <div v-for="item in buyConfList" :key="item.id" class="listItem">
- <div class="itemBox">
- <div class="itemRow">
- <span class="itemTitle">交易单号: </span>{{
- item.id }}
- </div>
- <div class="itemRow">
- <span class="itemTitle">股票价格: </span>{{
- item.price }}
- </div>
- <div class="itemRow">
- <span class="itemTitle">股票数量: </span>{{
- item.tradeNumber }}
- </div>
-
- <!-- 创建时间 -->
- <div class="itemRow">
- <span class="itemTitle">创建时间: </span>{{
- showDateTime(item.createTime) }}
- </div>
- <!-- 卖家确认时间 -->
- <div class="itemRow" v-if="item.status === '1'">
- <span class="itemTitle">卖家确认时间: </span>{{
- showDateTime(item.sellerConfirmTime)
- }}
- </div>
- <!-- 0买家未确认,去付款 -->
- <div v-if="item.status === '0'" class="itemRow"
- style="display: flex; justify-content: flex-end">
- <van-button span="5" round type="primary" :style="{
- height: '2em',
- padding: '0 1.2em',
- margin: '0 1em',
- backgroundColor: 'rgb(200, 55, 95 / 80%)', // 红色背景,不透明度为100%
- color: '#fff', // 文字颜色为白色
- boxShadow: '0 2px 8px rgba(255, 55, 95, 0.3)', // 添加阴影效果
- transition: 'all 0.3s ease' // 添加过渡效果,使变化更平滑
- }" @click="toBuy(item)">
- 付款
- </van-button>
- </div>
- <!-- 1双方确认-绿#1dd36c,2已付款卖家未确认-蓝#16D8CF,3买家超时未确认-#163DD8,4特殊取消-紫#D816D8 -->
- <div class="itemRow" style="display: flex; justify-content: flex-end">
- <!-- 已确认 -->
- <span v-if="item.status === '1'" style="color: #1dd36c">{{
- showStatusText(item.status)
- }}</span>
- <!-- 已付款未确认 -->
- <span v-if="item.status === '2'" style="color: #16D8CF">{{
- showStatusText(item.status)
- }}</span>
- <!-- 买家超时未确认 -->
- <span v-if="item.status === '3'" style="color: #163DD8">{{
- showStatusText(item.status)
- }}</span>
- <!-- 特殊取消 -->
- <span v-if="item.status === '4'" style="color: #D816D8">{{
- showStatusText(item.status)
- }}</span>
- </div>
-
- </div>
- </div>
- </div>
- </van-list>
- </div>
- </div>
- </template>
- <style lang="less" scoped>
- @import "../../common/style/common.less";
- </style>
|