<template>
|
<div
|
id="wantBuy"
|
class="c2cBackground fixed left-0 right-0 top-0 bottom-0 wantBuy"
|
>
|
<div
|
class="w-full h-122 pl-40 pr-31 box-border c2cBackground flex text-white items-center"
|
>
|
<van-icon name="arrow-left" @click="goback" />
|
<div class="flex-1 text-right mr-100" @click="showPopup">
|
<span class="font-35 mr-8">{{ $t("自选区") }}</span>
|
<van-icon name="arrow-down" />
|
</div>
|
<van-popup
|
round
|
position="top"
|
class="pt-30"
|
v-model="show"
|
:closeable="true"
|
>
|
<div class="flex justify-around c2cColor mt-40 pb-48">
|
<div
|
class="flex flex-col items-center"
|
@click="$router.push({ path: '/wantBuy/quick' })"
|
>
|
<img
|
class="w-56 h-56"
|
src="@/assets/image/otc/wantBuyHead/fast.png"
|
alt=""
|
/>
|
<span class="font-24 mt-10 h-32 font-500">{{ $t("快捷区") }}</span>
|
</div>
|
<div class="flex flex-col items-center" @click="show = false">
|
<img
|
class="w-56 h-56"
|
src="@/assets/image/otc/wantBuyHead/optional.png"
|
alt=""
|
/>
|
<span class="font-24 mt-10 font-500">{{ $t("自选区") }}</span>
|
</div>
|
</div>
|
</van-popup>
|
<div
|
class="w-232 h-64 px-23 box-border box-radius text-black flex justify-around items-center"
|
style="background: #c2e1ff"
|
>
|
<div
|
class="flex items-center"
|
@click="$router.push({ path: '/selectLegalCurrency' })"
|
>
|
<span class="mr-15 font-31 font-400">{{ exchangeCurrency }}</span>
|
<img
|
class="w-24 h-20"
|
:src="require('@/assets/image/otc/wantBuyHead/Group.png')"
|
alt=""
|
/>
|
</div>
|
<template>
|
<span class="mx-28 w-2 h-36">|</span>
|
<van-popover
|
get-container="#quick"
|
v-model="showPopover"
|
:actions="actions"
|
@select="onSelect"
|
placement="bottom-end"
|
theme="dark"
|
:offset="[20, 20]"
|
>
|
<template #reference>
|
<span @click="showPopover = !showPopover">
|
<img
|
class="relative bottom-4 w-24 h-6 list-img"
|
:src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
|
alt=""
|
/>
|
</span>
|
</template>
|
</van-popover>
|
</template>
|
</div>
|
</div>
|
<!-- <buy :loading="loading" :symbol="symbolList" @change="onChange" @change-direction="handleDirection"-->
|
<buy
|
:loading="loading"
|
:symbol="['USDT']"
|
@change="onChange"
|
@change-direction="handleDirection"
|
@confirm="selectConfirm"
|
>
|
<van-pull-refresh
|
:pulling-text="$t('下拉即可刷新')"
|
:loosing-text="$t('释放即可刷新')"
|
:loading-text="$t('加载中')"
|
v-model="isLoading"
|
@refresh="onRefresh"
|
>
|
<template v-if="list.length > 0">
|
<van-list
|
v-model="loading"
|
:immediate-check="false"
|
:finished="finished"
|
:finished-text="$t('没有更多了')"
|
@load="onLoad"
|
>
|
<div
|
class="flex flex-col ml-32 mr-32"
|
v-for="(item, index) in list"
|
:key="'buy' + index"
|
>
|
<div class="flex">
|
<div class="flex-1 textColor">
|
<div class="flex items-center">
|
<span @click="handleGoUserHome(item)">
|
<img
|
class="w-32 h-32 mr-10"
|
:src="item.head_img"
|
alt=""
|
/>
|
</span>
|
|
<div class="font-400 font-26 mr-10">
|
{{ item.nick_name }}
|
</div>
|
<img
|
class="w-22 h-22"
|
:src="require('@/assets/image/otc/buy/star.png')"
|
alt=""
|
/>
|
</div>
|
<div class="font-22 text-grey mt-31">{{ $t("单价") }}</div>
|
<div class="mt-10">
|
<span class="font-22 mr-10">{{ item.currency }}</span>
|
<span class="font-40">{{
|
(item.symbol_value / 1).toFixed(2)
|
}}</span>
|
</div>
|
<div class="mt-26">
|
<span class="font-22 text-grey mr-10">{{
|
$t("数量")
|
}}</span>
|
<span>{{
|
item.coin_amount &&
|
(item.coin_amount / 1).toFixed(
|
item.symbol.toUpperCase() === "USDT" ? 2 : 4
|
)
|
}}</span>
|
</div>
|
<div class="mt-13">
|
<span class="font-22 text-grey mr-10">{{
|
$t("限额")
|
}}</span>
|
<span class="font-22"
|
>{{ currencySymbol }}
|
{{ (item.investment_min / 1).toFixed(2) }} -
|
{{ currencySymbol }}
|
{{ (item.investment_max / 1).toFixed(2) }}</span
|
>
|
</div>
|
<div class="flex mt-36">
|
<section
|
v-for="(_item, _index) in item.pay_type_name.split(',')"
|
:key="_index"
|
class="flex"
|
>
|
<div class="w-5 h-20 col mr-9">|</div>
|
<div class="mr-19">{{ _item }}</div>
|
</section>
|
<!-- <div class="w-5 h-20 cl mr-9">|</div>
|
<div>币交易</div> -->
|
</div>
|
</div>
|
<div class="flex flex-col justify-between items-end">
|
<div class="text-grey flex font-24">
|
<div class="flex items-center">
|
<span
|
>{{ $t("成交量") }} {{ item.thirty_days_order }}</span
|
>
|
<span
|
class="w-1 h-16 mx-8"
|
style="background: #eaebee"
|
></span>
|
<span>{{ item.thirty_days_order_ratio }}%</span>
|
</div>
|
</div>
|
<div
|
class="w-250 h-54 font-24 greyBg lh-54 text-center textColor px-10"
|
v-if="
|
item.direction === 'sell' &&
|
!methodAvaiable(item.pay_type_name, payMethods)
|
"
|
>
|
{{ $t("不满足广告方要求") }}
|
</div>
|
<div
|
v-if="item.direction === 'sell'"
|
@click="trade('sell', item)"
|
class="w-160 h-58 font-29 text-white rounded-lg bg-red text-center lh-58"
|
>
|
{{ $t("出售") }}
|
</div>
|
<div
|
v-if="item.direction === 'buy'"
|
@click="trade('buy', item)"
|
class="w-160 h-58 font-29 text-white rounded-lg bg-green text-center lh-58"
|
>
|
{{ $t("购买") }}
|
</div>
|
</div>
|
</div>
|
<div class="flex justify-center mb-12">
|
<div class="w-full h-8 diviLine mt-40 mb-45 box-border"></div>
|
</div>
|
</div>
|
</van-list>
|
</template>
|
<template
|
v-if="list.length === 0 && loading === false && isLoading === false"
|
>
|
<div>
|
<van-empty
|
class="custom-image"
|
:image="require('@/assets/image/otc/nodatas.png')"
|
:description="$t('暂无广告')"
|
>
|
</van-empty>
|
</div>
|
</template>
|
</van-pull-refresh>
|
</buy>
|
<van-dialog v-model="showJie" :showConfirmButton="false">
|
<div class="dia-main">
|
<p class="dia-change">{{ $t("切换到接单模式") }}</p>
|
<p class="dia-text">
|
{{ $t("接单模式适用于有发布广告交易需求的用户。") }}
|
</p>
|
<div class="dia-btn">
|
<div @click="showJie = false">{{ $t("取消") }}</div>
|
<div style="background: #1d91ff; color: #ffffff" @click="linkToC2C">
|
{{ $t("确认") }}
|
</div>
|
</div>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { SET_ORDER_MODE } from "@/store/const.store";
|
import { Icon, Popup, Popover, Dialog, List, PullRefresh, Empty } from "vant";
|
import listLoadMixins from "@/utils/list-load-mixins";
|
import Buy from "@/page/placeAnOrder/components/buy/buy";
|
import otcApi from "@/API/otc";
|
import { mapActions, mapGetters, mapMutations } from "vuex";
|
import { Toast, Notify } from "vant";
|
// import payment from "@/store/modules/payment";
|
|
export default {
|
// beforeRouteEnter(to, from, next) {
|
// next(vm => {
|
// // 回到原来的位置
|
|
// // const position = JSON.parse(window.sessionStorage.getItem('position'))
|
// // document.querySelector('.roll-section').scrollTop = position
|
// setTimeout(() => {
|
// // console.log( document.querySelector('.roll-section') )
|
// })
|
// })
|
// },
|
beforeRouteLeave(to, from, next) {
|
// 保存离开页面时的列表的位置
|
const position = document.querySelector(".roll-section").scrollTop;
|
window.sessionStorage.setItem("position", JSON.stringify(position));
|
next();
|
},
|
props: {
|
showDot: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
name: "wantBuy",
|
mixins: [listLoadMixins],
|
components: {
|
[Icon.name]: Icon,
|
[Popup.name]: Popup,
|
[Popover.name]: Popover,
|
[Dialog.name]: Dialog,
|
[List.name]: List,
|
[Empty.name]: Empty,
|
[PullRefresh.name]: PullRefresh,
|
Buy,
|
},
|
computed: {
|
...mapGetters("c2c", [
|
"symbolList",
|
"exchangeCurrency",
|
"symbol",
|
"currencySymbol",
|
]),
|
...mapGetters("home", ["currency"]),
|
},
|
async created() {
|
console.log("created");
|
await this.SET_SYMBOL_LIST();
|
await this.SET_PAY_METHODS({ language: this.$i18n.locale });
|
if (!this.exchangeCurrency) {
|
console.log(this.currency.currency);
|
this.SET_CURRENCY(this.currency.currency);
|
}
|
|
if (!this.currencySymbol) {
|
this.SET_CURRENCY_SYMBOL(this.currency.currency_symbol);
|
}
|
|
otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then((res) => {
|
res.data.map((item) => {
|
this.payMethods.push(item.methodName);
|
});
|
});
|
this.params = {
|
page_no: this.page_no, // 页码
|
direction: this.$store.state.c2c.direction, // 买 or 卖
|
currency: this.exchangeCurrency, // 法币
|
symbol: this.symbol, // 配置的加密货币
|
amount: "", // 兑换金额
|
method_type: "", // 支付方式
|
language: this.$i18n.locale,
|
};
|
this.get();
|
},
|
data() {
|
return {
|
showJie: false,
|
show: false,
|
showPopover: false,
|
page_no: 1,
|
list: [],
|
direction: "buy", //
|
params: {},
|
loading: false,
|
payMethods: [],
|
actions: [
|
{
|
text: this.$t("收款方式"),
|
icon: require("@/assets/image/otc/buy/collection_icon.png"),
|
path: "/paymentMethod",
|
},
|
// {
|
// text: this.$t('c2c帮助中心'),
|
// icon: require('@/assets/image/otc/buy/help_icon.png'),
|
// path: '/c2cHelpCenter',
|
// },
|
// {
|
// text: 'c2c用户中心',
|
// icon: require('@/assets/image/otc/buy/user_icon.png'),
|
// path: '/c2c_normal_user',
|
// },
|
// {
|
// text: this.$t('接单模式'),
|
// icon: require('@/assets/image/otc/buy/order_icon.png'),
|
// },
|
],
|
};
|
},
|
methods: {
|
...mapActions("c2c", ["SET_SYMBOL_LIST", "SET_PAY_METHODS"]),
|
...mapMutations("c2c", ["SET_CURRENCY", "SET_CURRENCY_SYMBOL"]),
|
onChange(params) {
|
// 买卖变化
|
this.params = Object.assign(this.params, params);
|
this.list = [];
|
this.get();
|
},
|
methodAvaiable(payStr, arr) {
|
console.log(payStr, arr);
|
let exist = false;
|
for (let i = 0; i < arr.length; i++) {
|
if (payStr.indexOf(arr[i]) > -1) {
|
exist = true;
|
break;
|
}
|
}
|
return exist;
|
},
|
get() {
|
Toast.loading();
|
otcApi.ctcAdvertList(this.params).then((res) => {
|
Toast.clear();
|
this.handleData(res.data);
|
});
|
},
|
linkToC2C() {
|
// if (this.$store.state.user.userInfo.c2c_user_type === 0) { // 普通用户
|
// Toast('你不是平台认证商家')
|
// return
|
// }
|
this.$router.push("/c2c/receivingBuy");
|
this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
|
state: true,
|
});
|
},
|
showPopup() {
|
this.show = true;
|
},
|
onSelect(action) {
|
if (action.text === "接单模式") {
|
this.showJie = true;
|
return;
|
}
|
this.$router.push({
|
path: action.path,
|
});
|
},
|
handleDirection(direction) {
|
console.log(direction);
|
this.direction = direction;
|
this.params.direction = this.direction;
|
// 发送请求
|
this.get();
|
},
|
handleGoUserHome(item) {
|
console.log("去买卖用户首页", item);
|
this.$router.push({
|
path: "/advertiserDetail",
|
query: {
|
uid: item.c2c_user_id,
|
},
|
});
|
},
|
trade(type, data) {
|
// 支付方式是否满足
|
if (
|
type == "sell" &&
|
!this.methodAvaiable(data.pay_type_name, this.payMethods)
|
) {
|
console.log(data.pay_type_name);
|
console.log(this.payMethods);
|
this.$toast(this.$t("请添加相应的收款方式"));
|
setTimeout(() => {
|
this.$router.push("/paymentMethod");
|
}, 500);
|
//Notify({ type: 'danger', message: '不满足广告方要求' })
|
return;
|
}
|
//
|
if (data && data.isRemoved) {
|
this.showRemoved = true;
|
return;
|
}
|
this.$store.commit("c2c/SET_ADV_ID", data.id); // 保存广告id
|
this.$router.push({
|
name: "c2cTrade",
|
// query: {
|
// type,
|
// id: data.id
|
// }
|
});
|
},
|
selectConfirm(params) {
|
this.params = Object.assign(this.params, params);
|
this.list = [];
|
this.get();
|
},
|
goback() {
|
let frompath = this.$route.query.frompath;
|
if (frompath) {
|
this.$router.push(frompath);
|
} else {
|
this.$router.push("/home");
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.wantBuy {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.dia-main {
|
padding: 50px;
|
color: #000;
|
|
.dia-change {
|
text-align: center;
|
margin-bottom: 32px;
|
font-size: 35px;
|
font-weight: bold;
|
}
|
|
.dia-text {
|
margin-bottom: 40px;
|
}
|
|
.dia-btn {
|
display: flex;
|
justify-content: space-between;
|
|
div {
|
width: 240px;
|
height: 80px;
|
text-align: center;
|
line-height: 80px;
|
background: #eaebee;
|
color: #21262f;
|
font-size: 32px;
|
border-radius: 8px;
|
}
|
}
|
}
|
|
.box-radius {
|
border-radius: 40px;
|
}
|
|
.list-img {
|
top: -6px;
|
}
|
</style>
|
