<template>
|
<div id="full" class="adScreening">
|
<div class="flex box-border items-center justify-between px-36 w-full mt-26 font-36 font-700 text-center">
|
<div></div>
|
<span class="c2cColor">{{ $t('广告筛选') }}</span>
|
<van-icon class="c2cColor" name="cross" @click="handlerBack" />
|
</div>
|
<div class="font-27 mb-35 text-grey ml-32 mt-40">{{ $t('总额') }}</div>
|
<div class="px-32">
|
<van-field v-model="amount" :size="large" :placeholder="$t('请输入总额')">
|
<template #extra>
|
<div class="tabBackground pr-30 box-border textColor">
|
{{ exchangeCurrency }}
|
</div>
|
</template>
|
</van-field>
|
</div>
|
<select-item class="mt-64" :title="$t('交易方式')" :options="fullPayMethods" v-model="method_type" />
|
<select-item class="mt-64" :title="$t('国家/地区')" :options="countries" v-model="country_code" />
|
<div class="px-32">
|
<van-cell class="c2cColor" center :title="$t('仅显示商家发布的广告')">
|
<template #right-icon>
|
<van-switch v-model="checked" size="24" @click="showAd = !showAd" />
|
</template>
|
</van-cell>
|
<van-collapse v-model="activeNames" v-show="showAd">
|
<van-collapse-item>
|
<template #title>
|
<div class="flex items-center">
|
<img class="w-24 h-24 mr-18" src="~@/assets/image/otc/wantBuyHead/tip_ico.png" alt="">
|
<span class="mr-16 font-24 text-grey">{{ $t('广告筛选说明') }}</span>
|
<van-icon name="arrow-down" class="block relative top-1 font-24 font-700"
|
:class="{ 'rotateZ': activeNames.length > 0 }" />
|
</div>
|
</template>
|
<template #right-icon><i></i></template>
|
<template #default>
|
<div class="font-28 c2cColor">
|
<div><span>{{ $t('交易方式：') }}</span><span class="font-700">{{ $t('仅显示可用的交易方式') }}</span></div>
|
<div class="mt-6"><span>{{ $t('国家/地区') }}</span><span class="font-700">{{ $t('仅显示可用的国家 / 地区') }}</span>
|
</div>
|
</div>
|
</template>
|
</van-collapse-item>
|
</van-collapse>
|
<div class="flex mt-56 mb-36 justify-center ">
|
<button class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
|
@click="onReset">{{ $t('重置') }}
|
</button>
|
<button class="w-370 h-82 bg-grey rounded-lg font-400 font-30 border-none"
|
:class="[{ 'btnMain': tabindex === 1 }, { 'text-white': tabindex === 1 }]" @click="onConfirm">{{ $t('确认') }}
|
</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SelectItem from "@/page/placeAnOrder/components/selectItem/SelectItem";
|
import { Cell, Icon, Popup, DropdownMenu, DropdownItem, Field, Switch, Collapse, CollapseItem } from 'vant';
|
|
import { mapGetters, mapState } from 'vuex'
|
import countries from '@/components/country-list/countryList.js'
|
import { timeStamp } from 'console';
|
|
export default {
|
name: "adScreening",
|
components: {
|
[Icon.name]: Icon,
|
[Field.name]: Field,
|
[Popup.name]: Popup,
|
[Cell.name]: Cell,
|
[Switch.name]: Switch,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[Collapse.name]: Collapse,
|
[CollapseItem.name]: CollapseItem,
|
SelectItem,
|
},
|
computed: {
|
...mapGetters('c2c', ['payMethods']),
|
...mapGetters('c2c', ['symbolList', 'payMethods', 'exchangeCurrency']),
|
// 处理交易方式对象
|
fullPayMethods() {
|
const payMethods = [];
|
Object.keys(this.payMethods).forEach((key) => {
|
payMethods.push({
|
method_type: key,
|
title: this.payMethods[key]
|
})
|
})
|
payMethods.unshift({
|
method_type: '',
|
title: this.$t('全部')
|
})
|
|
return payMethods;
|
}
|
},
|
created() {
|
},
|
data() {
|
return {
|
countries, // 国家列表
|
activeNames: [],
|
amount: '',
|
// 0 代表全部
|
method_type: '', // 支付方式
|
country_code: 99, // 国家
|
tradeList: [
|
{
|
'': this.$t('全部'),
|
// Bank_card: '银行卡',
|
// Coin_collection: '币收款',
|
}
|
],
|
large: '80',
|
checked: false,
|
tabindex: 1,
|
showAd: false,
|
}
|
},
|
methods: {
|
onChooseType(key) { // 选择支付方式
|
this.method_type = key
|
this.$refs.paymentMethod[0].toggle()
|
},
|
onSelectCountry(item) {
|
this.country_code = item.code;
|
this.$refs.country.toggle()
|
},
|
onReset() { // 重置
|
this.amount = ''
|
this.method_type = 99
|
this.country_code = 99
|
},
|
onConfirm() { // 确认
|
console.log(this.amount, this.method_type, this.country_code, this.checked)
|
this.$emit('confirm', {
|
amount: this.amount,
|
method_type: this.method_type
|
})
|
|
this.$emit('back')
|
},
|
handlerBack() {
|
this.$emit('back')
|
},
|
payMethod(val) {
|
console.log(val);
|
this.method_type = val
|
},
|
address(val) {
|
this.country_code = val
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.active_trade {
|
color: #ffffff;
|
|
@include themify() {
|
background: themed("color_main");
|
}
|
}
|
|
.rotateZ {
|
transform: rotateZ(180deg);
|
}
|
|
::v-deep {
|
.van-dropdown-menu__bar {
|
background: none;
|
box-shadow: none;
|
}
|
|
.van-collapse-item__content {
|
padding: 0;
|
}
|
}
|
|
#full {
|
::v-deep .van-cell {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-cell::after {
|
@include themify() {
|
border-bottom: 1px solid themed("divi_line");
|
}
|
}
|
|
.van-switch {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
}
|
|
::v-deep .van-collapse-item__content {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-field__control {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
</style>
|
