<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>
|
<img @click="showPopover = !showPopover" class="relative bottom-4 w-24 h-6 list-img"
|
:src="require('@/assets/image/otc/wantBuyHead/Group2.png')" alt="" />
|
</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">
|
<img class="w-32 h-32 mr-10" @click="handleGoUserHome(item)" :src="item.head_img" alt="">
|
<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>
|
