<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>
|
<span @click="showKeyboard = true; cachePrice = ''">
|
<img class="w-39 h-39 ml-27"
|
src="@/assets/image/otc/buy/price_icon.png" alt="">
|
</span>
|
</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 0.2s;
|
}
|
|
.left-leave-active {
|
animation: left-in 0.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>
|
