<template>
|
<div id="adDetails">
|
<order-nav :title="$t('广告详情')" />
|
<div class="border_top px-32 box-border mb-28">
|
<div class="flex justify-between mt-40">
|
<span class="font-400 font-28 text-grey">{{ $t('广告编号') }}</span>
|
<span class="font-600 font-28">{{ info.id }}</span>
|
</div>
|
<div class="flex justify-end mt-44">
|
<div v-if="info.on_sale / 1 === 0" class="text-grey bg-grey px-12 py-6 font-24">{{ $t('已下架') }}</div>
|
<div v-if="info.on_sale / 1 === 1" class="bg-grey px-12 py-6 font-24" :class="{ grey: checked }">{{ $t('已上架') }}
|
</div>
|
<van-switch class="ml-28" disabled v-model="info.on_sale / 1 === 1 ? true : false" size="24" />
|
</div>
|
<div class="flex justify-between items-center mt-70">
|
<div class="flex flex-col">
|
<span class="font-400 font-28 text-grey mb-40">{{ $t('价格') }}</span>
|
<span class="font-400 font-28 text-grey ">{{ $t('固定价格') }}</span>
|
</div>
|
<div class="font-600 font-52">{{ $store.state.home.currency.currency_symbol }} {{ info.symbol_value }}</div>
|
</div>
|
</div>
|
<div class="w-full h-16 bg-grey"></div>
|
<div class="border_top px-32 box-border mb-28">
|
<div class="flex justify-between mt-40">
|
<span class="font-400 font-28 text-grey">{{ $t('交易总额') }}</span>
|
<span class="font-600 font-28">{{ info.symbol_value * info.coin_amount }} {{ info.symbol ?
|
info.symbol.toUpperCase()
|
: '' }}</span>
|
</div>
|
<div class="flex justify-between mt-40">
|
<span class="font-400 font-28 text-grey">{{ $t('限额') }}</span>
|
<span class="font-600 font-28">{{ info.investment_min + ' - ' + info.investment_max + ' ' + info.currency
|
}}</span>
|
</div>
|
<div class="mt-40 flex justify-between">
|
<span class="font-400 font-28 text-grey">{{ $t('付款方式') }}</span>
|
<div>{{ info.pay_type_name }}</div>
|
</div>
|
<div class="flex justify-between mt-40">
|
<span class="font-400 font-28 text-grey">{{ $t('付款限时') }}</span>
|
<span class="font-600 font-28">{{ info.expire_time }} {{ $t('分钟') }}</span>
|
</div>
|
<div class="w-full h-120 mt-40 text-left lh-120">
|
<span class="font-400 font-28 text-grey mr-10"> {{ $t('用户需要') }}</span>
|
<span class="font-400 font-28 ">{{ $t('认证 KYC 才可以交易') }}</span>
|
</div>
|
</div>
|
<div class="h-16 w-full bg-grey"></div>
|
<div class="mt-50 px-32 flex justify-between items-center">
|
<div class="w-252 h-100 font-36 bg-grey rounded-lg mr-22 text-center lh-100" @click="handleClose">{{ $t('关闭') }}
|
</div>
|
<div class="flex-1 h-100 font-36 bg-blue rounded-lg text-white text-center lh-100" @click="$router.push({
|
path: '/editAd',
|
query: {
|
...info,
|
type: '1'
|
}
|
})">{{ $t('編輯詳情') }}</div>
|
</div>
|
<transition name="left">
|
<payPwdInput @submit="handPwd" v-if="show" class="bg-white absolute left-0 top-0 w-full h-full"
|
@close="handleClosePwd"></payPwdInput>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import { getAdDetail, closeAd } from '@/API/otc'
|
import { Cell, DropdownItem, DropdownMenu, Icon, Switch, Toast } from "vant";
|
import payPwdInput from "@/components/payPwdInput";
|
export default {
|
name: "Ad_Details",
|
components: {
|
payPwdInput,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[Icon.name]: Icon,
|
[Switch.name]: Switch,
|
[Cell.name]: Cell,
|
OrderNav,
|
},
|
data() {
|
return {
|
type: 'left',
|
show: false,
|
checked: false,
|
form: {
|
id: '',
|
safeword: ''
|
},
|
info: {}
|
}
|
},
|
created() {
|
this.form.id = this.$route.query.id
|
getAdDetail({
|
id: this.form.id,
|
language: this.$i18n.locale
|
}).then(res => {
|
//console.log('订单详情', res)
|
this.info = res
|
})
|
|
},
|
methods: {
|
|
click() {
|
this.checked = !this.checked;
|
},
|
handleClosePwd() {
|
this.show = false
|
},
|
handleClose() {
|
if (!this.form.safeword) {
|
this.show = true
|
return
|
}
|
this.submitDel()
|
},
|
handPwd(pwd) {
|
this.handleClosePwd()
|
this.form.safeword = pwd
|
this.submitDel()
|
},
|
submitDel() {
|
Toast.loading()
|
closeAd(this.form).then((res) => {
|
//console.log('关闭订单', res)
|
Toast(this.$t('广告关闭成功！'))
|
this.$router.push('/c2c/advertise')
|
this.form.safeword = ''
|
}).catch(() => {
|
this.form.safeword = ''
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#adDetails {
|
.border_top {
|
border-top: 1px solid #C8CAD2;
|
}
|
|
.left-enter-active {
|
animation: left-in .2s;
|
}
|
|
.left-leave-active {
|
animation: left-in .2s reverse;
|
}
|
|
@keyframes left-in {
|
0% {
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
25% {
|
transform: translate3d(-75%, 0, 0);
|
}
|
|
50% {
|
transform: translate3d(-50%, 0, 0);
|
}
|
|
75% {
|
transform: translate3d(-25%, 0, 0);
|
}
|
|
100% {
|
transform: translate3d(0%, 0, 0);
|
}
|
}
|
|
}</style>
|
