<template>
|
<div id="editAd">
|
<order-nav :title="title1" />
|
<div class="">
|
<div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '1'">{{ $t('1/3.设置类型&价格') }}</div>
|
<div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '2'">{{ $t('2/3.设置类型&价格') }}</div>
|
<div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '3'">{{ $t('3/3.设置类型&价格') }}</div>
|
<div class="mt-42 flex justify-between items-center px-32 box-border">
|
<div class="w-72 h-72 border lh-72 text-center bg-bl">1</div>
|
<div class="h-8 bg-grey flex-1"></div>
|
<div class="w-72 h-72 border lh-72 text-center" :class="num === '2' || num === '3' ? 'bg-bl' : 'bg-grey'">2</div>
|
<div class="h-8 bg-grey flex-1"></div>
|
<div class="w-72 h-72 border lh-72 text-center" :class="num === '3' ? 'bg-bl' : 'bg-grey'">3</div>
|
</div>
|
<div v-if="num === '1'">
|
<div class="flex mt-48 h-100 bg-grey items-center mx-32 box-border">
|
<div class="h-80 font-28 font-400 mr-24 flex-1 text-center lh-80"
|
:class="info.direction === 'buy' ? 'bg-wh' : 'bg-grey'" @click="tabClick('buy')">{{ $t('购买') }}</div>
|
<div class="h-80 font-28 font-400 flex-1 text-center lh-80"
|
:class="info.direction === 'sell' ? 'bg-wh' : 'bg-grey'" @click="tabClick('sell')">{{ $t('出售') }}</div>
|
</div>
|
<div class="flex mt-56 px-32 box-border">
|
<div class="font-500 font-28 flex-1">{{ $t('币种') }}</div>
|
<div class="font-500 font-28 flex-1">{{ $t('用法币') }}</div>
|
</div>
|
<div class="flex mt-20 rounded-xl px-32 box-border">
|
<div class="flex-1">
|
<van-dropdown-menu active-color="#1D91FF">
|
<van-dropdown-item v-model="info.symbol" :options="option1" />
|
</van-dropdown-menu>
|
</div>
|
<div class="flex-1">
|
<van-dropdown-menu active-color="#1D91FF">
|
<van-dropdown-item v-model="info.currency" :options="option2" />
|
</van-dropdown-menu>
|
</div>
|
<!-- <div class="h-100 font-400 font-32 bg-grey lh-100 ml-14 flex-1 px-26 rounded-xl">TWD</div>-->
|
</div>
|
|
<div class="h-16 w-full bg-grey mt-44"></div>
|
<div class="px-32 box-border ">
|
<div class="mt-44 font-500 font-28">{{ $t('设置价格') }}</div>
|
<div class="flex mt-48 h-100 items-center">
|
<div class="w-360 h-80 text-blue rounded-xl border-solid-blue font-28 font-400 text-center lh-80">{{
|
$t('固定价格') }}</div>
|
</div>
|
<div class="flex justify-between mt-58">
|
<div class=" font-400 font-28 ">{{ $t('设置价格') }}</div>
|
<div class=" font-400 font-28 ">{{ $t('市场最高价') }}</div>
|
</div>
|
<div class="flex justify-between mt-34">
|
<div class=" flex items-center">
|
<div class="mr-27 font-700 font-48">
|
<span class="mr-20">$</span>
|
<span>{{ info.symbol_value }}</span>
|
</div>
|
<img @click="showKeyboard = true; cachePrice = ''" class="w-39 h-39 ml-27"
|
src="@/assets/image/otc/buy/price_icon.png" alt="">
|
</div>
|
<div class=" font-700 font-48">
|
<span class="mr-20">$</span>
|
<span>{{ adParams.price }}</span>
|
</div>
|
</div>
|
|
</div>
|
<div class="w-full pb-40">
|
<div class="h-16 w-full bg-grey "></div>
|
<div class="flex justify-center items-center" @click="ClickNum('2')">
|
<div class="h-99 bg-blue text-white mt-56 wd text-center lh-99">{{ $t('下一步') }}</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="num === '2'">
|
<div class="mt-40 font-500 font-28 px-32 box-border">
|
{{ $t('交易数量') }}
|
</div>
|
<div class="mx-32 h-100 bg-grey flex justify-between items-center px-32 mt-20">
|
<input v-model="info.coin_amount" class="h-100 border-none bg-grey" type="number" :placeholder="$t('输入交易数量')">
|
<span>{{ info.symbol.toUpperCase() }}</span>
|
</div>
|
<div class="mt-28 font-500 font-28 px-32 box-border">
|
{{ $t('单笔订单限额') }}
|
</div>
|
<div class="px-32 mt-20 flex justify-between items-center">
|
<div class="w-350 bg-grey box-border h-100 px-24 flex justify-between rounded-xl flex-1 lh-100">
|
<input style="border: none" class="w-200 bg-grey font-400 font-28" v-model="info.investment_min"
|
type="number">
|
<!-- <span class="font-400 font-28">{{ info.investment_min }}</span>-->
|
<span class="font-400 font-28">{{ this.info.currency }}</span>
|
</div>
|
<div class="w-22 h-3 mx-22 bg-black"></div>
|
<div class="w-350 bg-grey box-border h-100 px-24 flex justify-between rounded-xl flex-1 lh-100">
|
<input style="border: none" class="w-200 bg-grey font-400 font-28" v-model="info.investment_max"
|
type="number">
|
<span class="font-400 font-28">{{ this.info.currency }}</span>
|
</div>
|
</div>
|
<div class="h-16 w-full bg-grey mt-48"></div>
|
<div class="mt-56 font-500 font-28 px-32 box-border">
|
{{ $t('付款方式') }}
|
</div>
|
<div class="mt-20 font-500 font-28 px-32 box-border text-grey">
|
{{ $t('最多选择3个') }}
|
</div>
|
<div class="flex mb-72 justify-between items-center mt-44 px-32 box-border flex-wrap">
|
|
<div :key="key + 'method_config_map'" v-for="(value, key) in method_config_map"
|
class="relative bg-grey flex-1 mr-22" @click="choose(value, key)">
|
<div class="text-center h-82 lh-82 rounded-lg font-400 font-28 border-none ">
|
<img class="w-26 h-22 mr-18" src="@/assets/image/otc/buy/BankCard_icon.png" alt="">
|
{{ value }}
|
</div>
|
<img v-show="findActive(key)" class="absolute top-0 right-0 w-232 h-82 "
|
src="@/assets/image/otc/wantBuyHead/trade_bg.png" alt="">
|
</div>
|
</div>
|
<div class="h-16 w-full bg-grey mt-54"></div>
|
<div class="mt-48 px-32 flex justify-between">
|
<div class="font-500 font-28">{{ $t('支持時效') }}</div>
|
<div @click="showPopup">
|
<span class="font-500 font-28 mr-18">{{ timeList[info.expire_time] }}</span>
|
<van-icon name="arrow" />
|
</div>
|
</div>
|
<van-popup v-model="show" round position="bottom" :style="{ height: '453px' }" closeable>
|
<div class="font-500 font-36 text-center mt-32">
|
{{ $t('支持時效') }}
|
</div>
|
<div class="mt-52 bg">
|
<van-radio-group v-model="info.expire_time">
|
<van-cell-group>
|
<div class="text-center">
|
<van-cell :key="'timeList' + key" v-for="(value, key) in timeList" :title="value" clickable
|
@click="info.expire_time = key">
|
<template #right-icon>
|
<van-radio :name="key">
|
<template #icon="props">
|
<img v-if="props.checked" class="img-icon w-36 h-36" :src="props.checked ? activeIcon : ''" />
|
<div class="w-36 h-36" v-else></div>
|
</template>
|
</van-radio>
|
</template>
|
</van-cell>
|
|
</div>
|
</van-cell-group>
|
</van-radio-group>
|
</div>
|
<div class="font-400 font-32 text-center mt-62 text-grey">
|
{{ $t('選擇付款方式以及對方支付的時間限制') }}
|
</div>
|
</van-popup>
|
<div class="h-16 w-full bg-grey mt-48"></div>
|
<div class="mt-50 flex px-32 box-border justify-between">
|
<div class="font-400 font-36 bg-grey h-100 lh-100 text-center rounded-lg mr-22 width_30" @click="ClickNum('1')">
|
{{ $t('上一步') }}</div>
|
<div class="font-400 font-36 bg-blue text-white h-100 lh-100 text-center rounded-lg flex-1"
|
@click="ClickNum('3')">{{ $t('下一步') }}</div>
|
</div>
|
</div>
|
<div v-if="num === '3'">
|
<div class="mt-40 font-500 font-28 px-32 box-border">
|
{{ $t(' 交易条款（选填）') }}
|
</div>
|
<div class="mt-20 px-32 box-border">
|
<van-field v-model="info.transaction_terms" rows="5" maxlength="1000" show-word-limit type="textarea"
|
:placeholder="$t('交易條款將在用戶下單前展示')" />
|
</div>
|
<div class="mt-40 font-500 font-28 px-32 box-border">
|
{{ $t('訂單自動消息（選填）') }}
|
</div>
|
<div class="mt-20 px-32 box-border">
|
<van-field v-model="info.order_msg" rows="5" maxlength="1000" show-word-limit type="textarea"
|
:placeholder="$t('自動回復消息在交易對方下單後將Dion發送給對方')" />
|
</div>
|
<div class="h-16 w-full bg-grey mt-40"></div>
|
<div class="px-32">
|
</van-radio-group>
|
<div class="h-2 w-full bg-grey mt-50"></div>
|
<div class="mt-50">
|
<van-radio-group v-model="info.on_sale">
|
<div class="mb-44">
|
<van-radio name="1">{{ $t('立即上線') }}</van-radio>
|
</div>
|
|
<van-radio name="0">{{ $t('稍後手動上線') }}</van-radio>
|
</van-radio-group>
|
</div>
|
</div>
|
<div class="h-16 w-full bg-grey mt-50"></div>
|
<div class="mt-50 pb-94 flex px-32 box-border justify-between">
|
<div class="font-400 font-36 bg-grey h-100 lh-100 text-center rounded-lg mr-22 width_30" @click="ClickNum('2')">
|
{{ $t('上一步') }}</div>
|
<div class="font-400 font-36 bg-blue text-white h-100 lh-100 text-center rounded-lg flex-1" @click="handleAd">{{
|
$t('保存') }}</div>
|
</div>
|
</div>
|
</div>
|
<van-number-keyboard :show="showKeyboard" v-model="info.symbol_value" :title="info.symbol_value" extra-key="."
|
:close-button-text="this.$t('完成')" @blur="showKeyboard = false" />
|
<transition name="left">
|
<payPwdInput @submit="handPwd" v-if="showInput" class="bg-white absolute left-0 top-0 w-full h-full"
|
@close="handleClosePwd"></payPwdInput>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import payPwdInput from "@/components/payPwdInput";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import { Step, Steps, DropdownMenu, DropdownItem, Icon, Field, Checkbox, CheckboxGroup, Popup, RadioGroup, Radio, Cell, CellGroup, NumberKeyboard, Toast } from 'vant';
|
import { c2cGetCurrencyList, c2cGetPayCurrencyList, countAdParams, getCtcAdvertToken, getTimeList, editAd, placeAd } from "@/API/otc";
|
export default {
|
name: "editAd",
|
created() {
|
console.log(this.$route.query)
|
this.pageType = this.$route.query.type
|
if (this.pageType === '1') {
|
this.info = { ...this.info, ...this.$route.query }
|
}
|
|
if (this.info.pay_type) { // choose(value, key)
|
let a = this.info.pay_type.split(',')
|
let b = this.info.pay_type_name.split(',')
|
for (let i = 0; i < a.length; i++) {
|
this.choose(b[i], a[i])
|
}
|
|
}
|
|
getTimeList().then(res => {
|
//console.log('支付时效列表', res)
|
this.timeList = res
|
if (!this.info.expire_time) {
|
this.info.expire_time = Object.keys(res)[0]
|
}
|
})
|
|
Promise.all([this.getCurrencyList(), this.getPayCurrencyList()]).then(res => {
|
//console.log('Promise.all', res)
|
this.getCountAdParams()
|
this.getSessionToken()
|
})
|
|
},
|
data() {
|
return {
|
showInput: false,
|
timeList: null, // 支付时效列表
|
adParams: {}, // 计算过的广告相关参数 如市场最高价等
|
cachePrice: '', // 数字键盘缓存价格
|
showKeyboard: false, // 数字键盘
|
info: {
|
id: '', // 修改的时候
|
safeword: '', // 资金密码
|
payment_method1: '',
|
payment_method2: '',
|
payment_method3: '',
|
direction: 'buy', // 买卖方式：buy买/sell卖
|
currency: '', // 支付币种
|
symbol: '', // 上架币种
|
coin_amount: '', // 交易数量
|
symbol_value: '', // 币种单价
|
investment_min: '', // 订单最低限额
|
investment_max: '', // 订单最高限额
|
on_sale: 0, // 是否上架(立即上線) 0 下架 1上架
|
closed: 0, // 是否关闭 0 否 1 是
|
expire_time: '', // 支付时效(分钟)
|
transaction_terms: '', // 交易条款
|
order_msg: '', // 订单自动消息
|
remark: '', // 备注
|
},
|
pageType: '0', // 0 发布广告 1 编辑广告
|
show: false,
|
active: 0,
|
buy: 1,
|
type: "1",
|
num: '1',
|
value1: 0, // 上架币种
|
value2: 0, // 法币
|
price: '1',
|
showT: false,
|
showQ: false,
|
showP: false,
|
checked: true,
|
check: false,
|
checking: false,
|
select: false,
|
selected: false,
|
message: '',
|
radio: '1',
|
radio2: '1',
|
activeIcon: require('@/assets/image/成功.png'),
|
option1: [ // 上架币种
|
],
|
option2: [ // 法币
|
],
|
}
|
},
|
components: {
|
payPwdInput,
|
OrderNav,
|
[Field.name]: Field,
|
[Icon.name]: Icon,
|
[Step.name]: Step,
|
[Steps.name]: Steps,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[Checkbox.name]: Checkbox,
|
[CheckboxGroup.name]: CheckboxGroup,
|
[Popup.name]: Popup,
|
[RadioGroup.name]: RadioGroup,
|
[Radio.name]: Radio,
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[NumberKeyboard.name]: NumberKeyboard,
|
},
|
computed: {
|
title1() {
|
return this.pageType === '0' ? this.$t('发布广告') : this.$t('编辑广告')
|
},
|
pay_type_name() {
|
let a = this.info.payment_method1 ? this.method_config_map[this.info.payment_method1] : ''
|
let b = this.info.payment_method2 ? this.method_config_map[this.info.payment_method2] : ''
|
let c = this.info.payment_method3 ? this.method_config_map[this.info.payment_method3] : ''
|
console.log(a, b, c)
|
let arr = []
|
if (a) {
|
arr.push(a)
|
}
|
if (b) {
|
arr.push(b)
|
}
|
if (c) {
|
arr.push(c)
|
}
|
return arr.join(',')
|
},
|
},
|
watch: {
|
'info.symbol'(val) {
|
this.getCountAdParams()
|
}
|
},
|
methods: {
|
getCurrencyList() {
|
return c2cGetCurrencyList().then(res => {
|
//console.log('上架币种列表', res)
|
Object.keys(res).forEach(key => {
|
this.option1.push({
|
text: res[key],
|
value: key
|
})
|
})
|
if (!this.info.symbol) {
|
this.info.symbol = this.option1[0].value
|
}
|
})
|
},
|
getPayCurrencyList() {
|
return c2cGetPayCurrencyList().then(res => {
|
//console.log('法币列表', res)
|
res.forEach(item => {
|
this.option2.push({
|
text: item.currency,
|
value: item.currency
|
})
|
})
|
if (!this.info.currency) {
|
this.info.currency = this.option2[0].value
|
} else {
|
this.info.currency = res.find((item) => {
|
return item.currency === this.info.currency
|
}).currency
|
}
|
})
|
},
|
handleClosePwd() {
|
this.showInput = false
|
},
|
handPwd(pwd) {
|
this.handleClosePwd()
|
this.info.safeword = pwd
|
this.handleAd()
|
},
|
handleAd() {
|
// this.$router.push('/saveAd')
|
if (!this.info.safeword) {
|
this.showInput = true
|
return
|
}
|
if (this.info.type === '1') { // 编辑广告
|
Toast.loading()
|
editAd({
|
session_token: this.session_token,
|
...this.info
|
}).then(res => {
|
//console.log('编辑广告', res)
|
Toast(this.$t('修改成功'))
|
// this.getSessionToken()
|
this.$router.push({
|
path: '/saveAd',
|
query: {
|
...this.info,
|
pay_type_name: this.pay_type_name
|
}
|
})
|
}).catch(err => {
|
this.info.safeword = ''
|
this.getSessionToken()
|
})
|
} else { // 发布新广告
|
Toast.loading()
|
placeAd({
|
session_token: this.session_token,
|
...this.info
|
}).then(res => {
|
//console.log('编辑广告', res)
|
Toast(this.$t('提交成功'))
|
this.$router.push({
|
path: '/saveAd',
|
query: {
|
...this.info
|
}
|
})
|
}).catch(err => {
|
this.info.safeword = ''
|
this.getSessionToken()
|
})
|
}
|
|
},
|
findActive(key) {
|
return key === this.info.payment_method1 || key === this.info.payment_method2 || key === this.info.payment_method3;
|
},
|
getSessionToken() {
|
getCtcAdvertToken({
|
currency: this.info.currency,
|
symbol: this.info.symbol,
|
language: this.$i18n.locale
|
}).then(res => {
|
//console.log('token', res)
|
this.session_token = res.session_token
|
this.method_config_map = res.method_config_map // 支付方式列表
|
})
|
},
|
getCountAdParams() { // 获取计算的广告参数
|
countAdParams({
|
currency: this.info.currency,
|
symbol: this.info.symbol,
|
coin_amount: this.info.coin_amount,
|
symbol_value: this.info.symbol_value
|
}).then((res) => {
|
//console.log('计算广告参数', res)
|
this.adParams = res
|
})
|
},
|
tabClick(type) {
|
this.info.direction = type;
|
},
|
ClickNum(num) {
|
if (num === '2') {
|
if (!this.info.symbol || !this.info.currency || !this.info.symbol_value) {
|
Toast(this.$t('上架币种，法币或价格不能为空'))
|
return
|
}
|
|
}
|
if (num === '3') {
|
if (!this.info.coin_amount || !this.info.investment_min || !this.info.investment_max || (!this.info.payment_method1 && !this.info.payment_method2 && !this.info.payment_method3)) {
|
Toast(this.$t('交易数量，单笔限额，付款方式都不能为空'))
|
return
|
}
|
if (this.info.coin_amount / 1 > this.adParams.coin_amount_max / 1) {
|
Toast(this.$t('最大交易币种数量不能超过') + this.adParams.coin_amount_max);
|
return;
|
}
|
if (this.info.investment_max / 1 > this.adParams.investment_max_limit / 1) {
|
Toast(this.$t('最大支付金额不能超过') + this.adParams.investment_max_limit);
|
return;
|
}
|
if (this.info.investment_min / 1 < this.adParams.investment_min_limit / 1) {
|
Toast(this.$t('最小支付金额不能低于') + this.adParams.investment_min_limit);
|
return;
|
}
|
}
|
this.num = num;
|
},
|
ClickPrice(price) {
|
this.price = price;
|
},
|
choose(val, key) {
|
if (key === this.info.payment_method1) { // 取消
|
this.info.payment_method1 = ''
|
return
|
} else if (key === this.info.payment_method2) {
|
this.info.payment_method2 = ''
|
return
|
} else if (key === this.info.payment_method3) {
|
this.info.payment_method3 = ''
|
return
|
}
|
|
if (!this.info.payment_method1) {
|
this.info.payment_method1 = key
|
} else if (this.info.payment_method1 && !this.info.payment_method2) {
|
this.info.payment_method2 = key
|
} else if (this.info.payment_method1 && this.info.payment_method2 && !this.info.payment_method3) {
|
this.info.payment_method3 = key
|
}
|
|
},
|
showPopup() {
|
this.show = true;
|
},
|
}
|
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#editAd {
|
::v-deep {
|
.van-cell__title {
|
font-size: 16px;
|
}
|
|
.van-cell {
|
height: 120px;
|
}
|
|
.van-cell__title {
|
font-size: 32px;
|
display: flex;
|
//justify-content: center;
|
align-items: center;
|
}
|
}
|
|
.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);
|
}
|
}
|
|
.border {
|
border-radius: 36px;
|
}
|
|
.bg-wh {
|
background: #FFFFFF;
|
border: 1px solid #B8BCC5;
|
}
|
|
.bg-bl {
|
background: #2C78F8;
|
color: #FFFFFF;
|
}
|
|
.width {
|
width: 50%;
|
}
|
|
.wd {
|
width: 92%;
|
}
|
|
.width_30 {
|
width: 30%;
|
}
|
|
.border_top {
|
border-top: 1px solid #C8CAD2;
|
}
|
}</style>
|
