<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>
|
