xxxx

src/packages/pc/views/market/trade/presell/ballot/detail/delisting/index.vue

@@ -0,0 +1,104 @@
+<!-- 交易市场-预售转让-预售中签-详情-我要认购 -->
+<template>
+    <app-drawer title="我要认购" v-model:show="show" :width="800" :loading="loading" :refresh="refresh">
+        <el-form ref="formRef" class="el-form--horizontal" label-width="100px" :model="formData" :rules="formRules">
+            <el-form-item label="发行价">
+                <span>{{ selectedRow.refprice }}</span>
+            </el-form-item>
+            <el-form-item label="最大申购量">
+                <span>{{ selectedRow.buymaxqty }}</span>
+            </el-form-item>
+            <el-form-item label="预售定金">
+                <span>{{ deposit }}</span>
+            </el-form-item>
+            <el-form-item label="可用资金">
+                <span>{{ accountStore.currentAccount.avaiableMoney?.toFixed(2) }}</span>
+            </el-form-item>
+            <el-form-item prop="OrderQty" label="认购数量">
+                <el-input-number placeholder="请输入" :min="0" :max="selectedRow.presaleqty" :precision="0" v-model="formData.OrderQty" />
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="primary" @click="onSubmit">提交</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed, PropType } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { BuyOrSell } from '@/constants/order'
+import { useOrder } from '@/business/trade'
+import { useAccountStore } from '@/stores'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+import { EPriceMode, EValidType } from '@/constants/client'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.PresaleAuctionsRsp>,
+        required: true,
+    }
+})
+
+const { formData, formSubmit, loading } = useOrder()
+const accountStore = useAccountStore()
+const show = shallowRef(true)
+const refresh = shallowRef(false)
+const formRef = shallowRef<FormInstance>()
+
+// 预售定金
+const deposit = computed(() => {
+    const { refprice, presaledepositalgorithm, presaledepositvalue } = props.selectedRow
+    const qty = formData.OrderQty ?? 0
+
+    switch (presaledepositalgorithm) {
+        case 1:
+            return (presaledepositvalue * refprice * qty).toFixed(2)
+        case 2:
+            return (presaledepositvalue * qty).toFixed(2)
+        default:
+            return '0.0'
+    }
+})
+
+const formRules: FormRules = {
+    OrderQty: [{
+        required: true,
+        validator: (rule, value, callback) => {
+            const buymaxqty = props.selectedRow.buymaxqty
+            if (value <= buymaxqty) {
+                callback()
+            } else {
+                callback(new Error('委托数量不能大于' + `${buymaxqty}`))
+            }
+        }
+    }],
+}
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            const { applyid, goodsid, marketid } = props.selectedRow
+            formData.GoodsID = goodsid
+            formData.MarketID = marketid
+            formData.BuyOrSell = BuyOrSell.Buy
+            formData.RelatedID = applyid
+            formData.PriceMode = EPriceMode.PRICEMODE_LIMIT
+            formData.TimevalidType = EValidType.VALIDTYPE_YZ
+            /// 代码提交
+            formSubmit().then(() => {
+                ElMessage.success('提交成功')
+                onCancel(true)
+            }).catch((err) => {
+                ElMessage.error('提交失败：' + err)
+            })
+        }
+    })
+}
+</script>

src/packages/pc/views/market/trade/presell/ballot/detail/index.vue

@@ -0,0 +1,115 @@
+<!-- 交易市场-预售转让-预售中签-详情 -->
+<template>
+    <app-drawer title="商品详情" v-model:show="show" :width="800" :refresh="refresh">
+        <div class="g-detail__desc">
+            <template v-for="(url, index) in detailBanners" :key="index">
+                <img :src="url" alt="" />
+            </template>
+        </div>
+        <div class="g-detail__buy">
+            <div class="topic">
+                <div class="topic-left">
+                    <span class="price-text">发行价</span>
+                    <span class="price-unit">￥</span>
+                    <span class="price-integer">{{ selectedRow.refprice?.toFixed(2) }}</span>
+                </div>
+                <div class="topic-right">
+                    <span>开始：{{ selectedRow.starttime }}</span>
+                    <span>结束：{{ selectedRow.endtime }}</span>
+                </div>
+            </div>
+            <div class="title">
+                <el-tag type="danger" round>摇号中签</el-tag>
+                <span>{{ selectedRow.sellname }}</span>
+                <span>{{ selectedRow.goodscode }}/{{ selectedRow.goodsname }}</span>
+            </div>
+            <div class="qty">
+                <span>总量：{{ selectedRow.presaleqty }}</span>
+            </div>
+            <div class="info">
+                <ul>
+                    <li>
+                        <span>预售定金</span>
+                        <span>{{ earnest }}</span>
+                    </li>
+                    <li>
+                        <span>转让定金</span>
+                        <span>{{ parsePercent(selectedRow.transferdepositratio) }}</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="g-detail__desc">
+            <template v-for="(url, index) in detailImages" :key="index">
+                <img :src="url" alt="" />
+            </template>
+        </div>
+        <template #footer v-if="selectedRow.presalestatus === 2">
+            <div class="price">
+                <span class="price-text">发行价：</span>
+                <span class="price-unit">￥</span>
+                <span class="price-integer">{{ selectedRow.refprice?.toFixed(2) }}</span>
+            </div>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="primary" @click="onSubmit">我要认购</el-button>
+            <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
+                @closed="closeComponent" v-if="componentId" />
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed, PropType, defineAsyncComponent } from 'vue'
+import { getFileUrl, parsePercent } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['delisting', defineAsyncComponent(() => import('./delisting/index.vue'))], // 摘牌
+])
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(false)
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.PresaleAuctionsRsp>,
+        required: true,
+    }
+})
+
+// 商品banner
+const detailBanners = computed(() => {
+    const bannerpicurl = props.selectedRow.bannerpicurl ?? ''
+    return bannerpicurl?.split(',').map((path) => getFileUrl(path))
+})
+
+// 预售定金
+const earnest = computed(() => {
+    switch (props.selectedRow.presaledepositalgorithm) {
+        case 1:
+            return parsePercent(props.selectedRow.presaledepositvalue)
+        case 2:
+            return props.selectedRow.presaledepositvalue.toFixed(2)
+        default:
+            return '0.0'
+    }
+})
+
+// 商品图片列表
+const detailImages = computed(() => {
+    const pictureurls = props.selectedRow.pictureurls ?? ''
+    return pictureurls.split(',').map((path) => getFileUrl(path))
+})
+
+const show = shallowRef(true)
+const refresh = shallowRef(false)
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onSubmit = () => {
+    openComponent('delisting')
+}
+</script>

src/packages/pc/views/market/trade/presell/ballot/index.vue

@@ -20,15 +20,13 @@
 <script lang="ts" setup>
 import { shallowRef, defineAsyncComponent } from 'vue'
 import { useComponent } from '@/hooks/component'
-// import { useDataFilter } from '@/hooks/datatable'
 import { useRequest } from '@/hooks/request'
 import { getWRPresaleStatusName } from '@/constants/order'
 import { queryPresaleAuctions } from '@/services/api/presale'
 import AppTable from '@pc/components/base/table/index.vue'
-// import AppFilter from '@pc/components/base/table-filter/index.vue'
 
 const componentMap = new Map<string, unknown>([
-    
+    ['detail', defineAsyncComponent(() => import('./detail/index.vue'))], // 详情
 ])
 
 const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => run(), false)
@@ -52,6 +50,6 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 
 const onRowClick = (row: Model.PresaleAuctionsRsp) => {
     selectedRow.value = row
-    openComponent('order')
+    openComponent('detail')
 }
 </script>