|
@@ -1,17 +1,6 @@
|
|
|
-/* eslint-disable no-alert, no-console */
|
|
|
<template>
|
|
|
- <!-- eslint-disable-line -->
|
|
|
|
|
|
<div id="PaiMaiXiangQing">
|
|
|
- <!-- <van-pull-refresh
|
|
|
- :disabled="isDisableRefresh"
|
|
|
- v-model="refreshing"
|
|
|
- @refresh="onRefresh"
|
|
|
- pulling-text="下拉开始刷新..."
|
|
|
- loosing-text="释放刷新..."
|
|
|
- loading-text="正在刷新"
|
|
|
- head-height='50'
|
|
|
- > -->
|
|
|
<div class="scroll-con">
|
|
|
<van-swipe class="my-swipe" :class="{has:imgs.length}" indicator-color="white" @change="change">
|
|
|
<van-swipe-item v-for="url in imgs" :key="url">
|
|
@@ -27,10 +16,8 @@
|
|
|
:class="infoData.auctionStatus=='1'?'s1':infoData.auctionStatus=='2'?'s2':'s3'">
|
|
|
<div class="end-str">{{auctionStatus(infoData.auctionStatus)}}</div>
|
|
|
<div v-if="hasData" class="time-str">
|
|
|
- // eslint-disable-next-line vue/html-quotes
|
|
|
- <!-- eslint-disable-next-line vue/max-attributes-per-line -->
|
|
|
- <span v-if="infoData.auctionStatus=="1"||infoData.auctionStatus=="3"||infoData.auctionStatus=="4"">{{$dateFormat(infoData.endTime)}} 结束</span>
|
|
|
- <span v-else-if="infoData.auctionStatus=="2"">{{$dateFormat(infoData.startTime)}} 开拍</span>
|
|
|
+ <span v-if="infoData.auctionStatus=='1'||infoData.auctionStatus=='3'||infoData.auctionStatus=='4'">{{dateFormat(infoData.endTime)}} 结束</span>
|
|
|
+ <span v-else-if="infoData.auctionStatus=='2'">{{dateFormat(infoData.startTime)}} 开拍</span>
|
|
|
<span v-else>本场拍卖{{auctionStatus(infoData.auctionStatus)}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -38,8 +25,8 @@
|
|
|
<van-skeleton title :row="8" :loading="loading">
|
|
|
<div class="tags">
|
|
|
<span v-if="infoData.auctionStage">{{auctionStage(infoData.auctionStage)}}</span>
|
|
|
- <span v-if="infoData.canLoan=="0"">可贷款</span>
|
|
|
- <span v-if="infoData.unlimitedPurchase=="1"">不限购</span>
|
|
|
+ <span v-if="infoData.canLoan=='0'">可贷款</span>
|
|
|
+ <span v-if="infoData.unlimitedPurchase=='1'">不限购</span>
|
|
|
<span v-if="infoData.auctionTypeTwo" class="s">{{infoData.auctionTypeTwo}}</span>
|
|
|
</div>
|
|
|
<div class="name">{{infoData.auctionTitle}}</div>
|
|
@@ -60,7 +47,7 @@
|
|
|
<span v-if="!share" class="gx" @click="updateData">更新数据</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="table">
|
|
|
+ <div class="tables">
|
|
|
<div class="t20">保证金</div><div class="t30"><span v-if="hasData&&infoData.cashDeposit!=null">¥{{priceDouhao(infoData.cashDeposit)}}</span><span v-if="hasData&&infoData.cashDeposit==null">--</span></div>
|
|
|
<div class="t30">加价幅度</div><div class="t20"><span v-if="hasData&&infoData.priceAdd!=null">¥{{priceDouhao(infoData.priceAdd)}}</span><span v-if="hasData&&infoData.priceAdd==null">--</span></div>
|
|
|
<div class="t20">起拍价</div><div class="t30"><span v-if="hasData&&infoData.initialPrice!=null">¥{{priceDouhao(infoData.initialPrice)}}</span><span v-if="hasData&&infoData.initialPrice==null">--</span></div>
|
|
@@ -74,7 +61,7 @@
|
|
|
<img v-if="infoData.address" src="@/assets/img/sifapaimai/address.png">
|
|
|
</div>
|
|
|
<van-action-sheet
|
|
|
- v-model="showAddr"
|
|
|
+ v-model:show="showAddr"
|
|
|
:actions="actions"
|
|
|
cancel-text="取消"
|
|
|
description="请选择相关地图"
|
|
@@ -96,7 +83,9 @@
|
|
|
暂无竞拍记录
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-tabs swipeable animated :lazy-render="false" sticky @change="tabChange">
|
|
|
+ <van-tabs swipeable animated
|
|
|
+ :lazy-render="false" offset-top="0"
|
|
|
+ @change="tabChange">
|
|
|
<van-tab title="物品介绍" name="1">
|
|
|
<div class="html" v-html="infoData.auctionIntroduce"></div>
|
|
|
</van-tab>
|
|
@@ -108,20 +97,20 @@
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
|
</div>
|
|
|
- <!-- </van-pull-refresh> -->
|
|
|
<div class="footer">
|
|
|
<div class="left" @click="baoming">
|
|
|
- <img src="@/assets/img/sifapaimai/feiji.png">报名/分享
|
|
|
+ <img src="@/assets/img/sifapaimai/feiji.png">
|
|
|
+ <span>报名/分享</span>
|
|
|
</div>
|
|
|
- <div class="right" :class="{s:["1","2"].includes(infoData.auctionStatus)}" @click="tixing">
|
|
|
- <img v-if="String(infoData.notice)==="true"" src="@/assets/img/sifapaimai/dui.png">
|
|
|
+ <div class="right" :class="{s:['1','2'].includes(infoData.auctionStatus)}" @click="tixing">
|
|
|
+ <img v-if="String(infoData.notice)==='true'" src="@/assets/img/sifapaimai/dui.png">
|
|
|
<img v-else src="@/assets/img/sifapaimai/clock.png">
|
|
|
- <span v-if="["3","4","5","6","7"].includes(infoData.auctionStatus)">拍卖已结束</span>
|
|
|
- <span v-else-if="String(infoData.notice)==="true"">已设置提醒</span>
|
|
|
+ <span v-if="['3','4','5','6','7'].includes(infoData.auctionStatus)">拍卖已结束</span>
|
|
|
+ <span v-else-if="String(infoData.notice)==='true'">已设置提醒</span>
|
|
|
<span v-else>设置提醒</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-popup v-model="showpop" position="bottom" class="pop-btm">
|
|
|
+ <van-popup v-model:show="showpop" position="bottom" class="pop-btm">
|
|
|
<div class="list" @click="copy">
|
|
|
<div class="left">
|
|
|
<img src="@/assets/img/sifapaimai/link.png">
|
|
@@ -147,7 +136,7 @@
|
|
|
<van-popup v-model="showtixing" class="pop-tixing" :close-on-click-overlay="false">
|
|
|
<div class="con">
|
|
|
<div class="title">设置消息提醒成功</div>
|
|
|
- <div class="content">小赢在此拍品<span v-if="infoData.auctionStatus=="2"">“开拍”与</span>“结束前30分钟”时,以短信方式为 <span class="c">{{$route.query.mobileNo}}</span> 发送提醒消息。</div>
|
|
|
+ <div class="content">小赢在此拍品<span v-if="infoData.auctionStatus=='2'">“开拍”与</span>“结束前30分钟”时,以短信方式为 <span class="c">{{$route.query.mobileNo}}</span> 发送提醒消息。</div>
|
|
|
<div class="btm">
|
|
|
<span @click="addMsgOk">好的</span>
|
|
|
</div>
|
|
@@ -160,7 +149,7 @@
|
|
|
<script lang="ts">
|
|
|
import $axios from '@/api'
|
|
|
import { Toast } from 'vant'
|
|
|
- import {$dateFormat} from '@/utils/utils'
|
|
|
+ import {$dateFormat,$copyText,$goOuterUrl} from '@/utils/utils'
|
|
|
export default {
|
|
|
name: 'PaiMaiXiangQing',
|
|
|
data() {
|
|
@@ -263,7 +252,7 @@
|
|
|
this.infoData=res
|
|
|
if(res.auctionImg) {
|
|
|
const imgs = JSON.parse(res.auctionImg) || []
|
|
|
- imgs.forEach((e) => {
|
|
|
+ imgs.forEach((e: string) => {
|
|
|
this.imgs.push(e.replace(/http:/g,'https:'))
|
|
|
})
|
|
|
}
|
|
@@ -319,10 +308,10 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- change(curr) {
|
|
|
+ change(curr: any) {
|
|
|
this.current=curr
|
|
|
},
|
|
|
- tabChange(name,title) {
|
|
|
+ tabChange(name: any,title: any) {
|
|
|
// console.log(name,title)
|
|
|
document.querySelector('.scroll-con').style.transition = 'all 0.3s'
|
|
|
document.querySelector('.scroll-con').scrollTop = this.taboffsetTop
|
|
@@ -339,7 +328,7 @@
|
|
|
}
|
|
|
},
|
|
|
//选择地图
|
|
|
- onSelect(item) {
|
|
|
+ onSelect(item: { type: any }) {
|
|
|
this.showAddr = false
|
|
|
try {
|
|
|
if (systemJudge() == 'Android') {
|
|
@@ -392,7 +381,7 @@
|
|
|
this.showtixing=false
|
|
|
},
|
|
|
copy() {
|
|
|
- this.$copyText(this.infoData.url,() => {
|
|
|
+ $copyText(this.infoData.url,() => {
|
|
|
this.showpop=false
|
|
|
Toast('链接复制成功')
|
|
|
})
|
|
@@ -422,13 +411,18 @@
|
|
|
goWeb() {
|
|
|
if(this.infoData.url) {
|
|
|
this.showpop=false
|
|
|
- this.$goOuterUrl(this.infoData.url)
|
|
|
+ $goOuterUrl(this.infoData.url)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
+ dateFormat() {
|
|
|
+ return (val: string) => {
|
|
|
+ return $dateFormat(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
auctionStatus() {
|
|
|
- return (str) => {
|
|
|
+ return (str: any) => {
|
|
|
switch (str) {
|
|
|
case '1' : return '拍卖中'
|
|
|
case '2' : return '预告中'
|
|
@@ -441,7 +435,7 @@
|
|
|
}
|
|
|
},
|
|
|
priceDouhao() {
|
|
|
- return (p) => {
|
|
|
+ return (p: string | number | null | undefined) => {
|
|
|
if(isNaN(p)) {
|
|
|
return p
|
|
|
}
|
|
@@ -465,7 +459,7 @@
|
|
|
}
|
|
|
},
|
|
|
auctionStage() {
|
|
|
- return (str) => {
|
|
|
+ return (str: any) => {
|
|
|
switch (str) {
|
|
|
case '1' : return '一拍'
|
|
|
case '2' : return '二拍'
|
|
@@ -480,6 +474,9 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang=scss>
|
|
|
+ div,span,p{
|
|
|
+ font-size: 13px
|
|
|
+ }
|
|
|
/* @import "@/assets/scss/cover.scss"; */
|
|
|
#PaiMaiXiangQing{
|
|
|
user-select: none;
|
|
@@ -490,28 +487,30 @@
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
height: 100%;
|
|
|
+ margin-bottom: 50px;
|
|
|
}
|
|
|
.my-swipe{
|
|
|
- height: 5rem;
|
|
|
+ height: 260px;
|
|
|
background: url("@/assets/img/sifapaimai/zhanwei.png") no-repeat center;
|
|
|
background-size: 5.76rem 3.84rem;
|
|
|
&.has{
|
|
|
background: #fff;
|
|
|
}
|
|
|
.top-img{
|
|
|
- height: 5rem;
|
|
|
+ height: 100%;
|
|
|
background-size: contain;
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: center;
|
|
|
}
|
|
|
.custom-indicator{
|
|
|
- min-width: 0.86rem;
|
|
|
+ min-width: 44px;
|
|
|
+ height: 20px;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
border-radius: 0.25rem;
|
|
|
- font-size: 0.22rem;
|
|
|
+ font-size: 12px;
|
|
|
font-weight: bold;
|
|
|
color: #FFFFFF;
|
|
|
- line-height: 0.38rem;
|
|
|
+ line-height: 20px;
|
|
|
text-align: center;
|
|
|
position: absolute;
|
|
|
bottom: 0.2rem;
|
|
@@ -519,21 +518,21 @@
|
|
|
}
|
|
|
}
|
|
|
.end-time{
|
|
|
- height: 0.92rem;
|
|
|
+ height: 50px;
|
|
|
.end-str{
|
|
|
font-size: 0.29rem;
|
|
|
color: #FFFFFF;
|
|
|
- line-height: 0.92rem;
|
|
|
+ line-height: 50px;
|
|
|
text-align: center;
|
|
|
width: 2.25rem;
|
|
|
- height: 0.92rem;
|
|
|
+ height: 50px;
|
|
|
float: left;
|
|
|
background-repeat: no-repeat;
|
|
|
- background-size: 2.25rem 0.92rem;
|
|
|
+ background-size: 2.25rem 50px;
|
|
|
}
|
|
|
.time-str{
|
|
|
font-size: 0.24rem;
|
|
|
- line-height: 0.92rem;
|
|
|
+ line-height: 50px;
|
|
|
padding-left: 2.57rem;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
@@ -570,6 +569,9 @@
|
|
|
padding: 0.25rem 0.32rem;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 0.16rem;
|
|
|
+ div{
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
.tags{
|
|
|
span{
|
|
|
display: inline-block;
|
|
@@ -588,18 +590,18 @@
|
|
|
}
|
|
|
}
|
|
|
.name{
|
|
|
- font-size: 0.3rem;
|
|
|
- line-height: 0.46rem;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
font-weight: bold;
|
|
|
color: #242A32;
|
|
|
- padding-bottom: 0.08rem;
|
|
|
+ padding: 6px 0;
|
|
|
}
|
|
|
.price{
|
|
|
font-size: 0.24rem;
|
|
|
line-height: 0.4rem;
|
|
|
color: #64696E;
|
|
|
.red{
|
|
|
- font-size: 0.4rem;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
color: #C13E3E;
|
|
|
line-height: 0.56rem;
|
|
@@ -628,8 +630,11 @@
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
flex: 1;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 20px;
|
|
|
.ms{
|
|
|
flex: 1;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.gx{
|
|
|
color: #4A90E2;
|
|
@@ -641,9 +646,11 @@
|
|
|
width: 0.34rem;
|
|
|
height: 0.34rem;
|
|
|
vertical-align: middle;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
}
|
|
|
- .table{
|
|
|
+ .tables{
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
font-size: 0.24rem;
|
|
@@ -667,6 +674,7 @@
|
|
|
font-size: 0.24rem;
|
|
|
color: #64696E;
|
|
|
line-height: 0.34rem;
|
|
|
+ align-items: center;
|
|
|
img{
|
|
|
width: 0.4rem;
|
|
|
height: 0.4rem;
|
|
@@ -708,7 +716,7 @@
|
|
|
border-radius: 0.16rem;
|
|
|
overflow: hidden;
|
|
|
.van-tab__text{
|
|
|
- font-size: 0.29rem;
|
|
|
+ font-size: 14px;
|
|
|
color: #919498;
|
|
|
padding-bottom: 10px !important;
|
|
|
}
|
|
@@ -781,20 +789,31 @@
|
|
|
background: #FFFFFF;
|
|
|
padding: 0.12rem 0.32rem 0.4rem;
|
|
|
display: flex;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
.left,.right{
|
|
|
flex: 1;
|
|
|
font-size: 0.3rem;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 0.94rem;
|
|
|
text-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ height: 48px;
|
|
|
+ width: 178px;
|
|
|
img{
|
|
|
- width: 0.32rem;
|
|
|
- height: 0.32rem;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
vertical-align: middle;
|
|
|
margin-right: 0.16rem;
|
|
|
position: relative;
|
|
|
top:-1px;
|
|
|
}
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
.left{
|
|
|
background: #242A32;
|
|
@@ -810,37 +829,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .pop-btm{
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 0.24rem 0.24rem 0rem 0rem;
|
|
|
- padding: 0.3rem 0.4rem 1rem;
|
|
|
- .list{
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .left{
|
|
|
- padding-right: 0.24rem;
|
|
|
- img{
|
|
|
- width: 0.48rem;
|
|
|
- height: 0.48rem;
|
|
|
- }
|
|
|
- }
|
|
|
- .center{
|
|
|
- flex: 1;
|
|
|
- border-bottom: 1px solid #F8FAFC;
|
|
|
- line-height: 1.04rem;
|
|
|
- font-size: 0.3rem;
|
|
|
- color: #242A32;
|
|
|
- }
|
|
|
- .right{
|
|
|
- width: 0.28rem;
|
|
|
- height: 0.28rem;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0.4rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
.pop-tixing{
|
|
|
width: 100%;
|
|
|
padding: 0 0.32rem;
|
|
@@ -878,5 +867,38 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .pop-btm{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 0.24rem 0.24rem 0rem 0rem;
|
|
|
+ padding: 0.3rem 0.4rem 1rem;
|
|
|
+ .list{
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .left{
|
|
|
+ padding-right: 0.24rem;
|
|
|
+ img{
|
|
|
+ width: 0.48rem;
|
|
|
+ height: 0.48rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center{
|
|
|
+ flex: 1;
|
|
|
+ border-bottom: 1px solid #F8FAFC;
|
|
|
+ line-height: 1.04rem;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #242A32;
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ width: 0.28rem;
|
|
|
+ height: 0.28rem;
|
|
|
+ /* position: absolute; */
|
|
|
+ /* right: 0; */
|
|
|
+ top: 0.4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
-/* eslint-disable no-alert, no-console */
|