From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/placeAnOrder/page/adScreening.vue | 169 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 112 insertions(+), 57 deletions(-)
diff --git a/src/page/placeAnOrder/page/adScreening.vue b/src/page/placeAnOrder/page/adScreening.vue
index 13c3dba..9f16846 100644
--- a/src/page/placeAnOrder/page/adScreening.vue
+++ b/src/page/placeAnOrder/page/adScreening.vue
@@ -1,11 +1,13 @@
<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
+ 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>
+ <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="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>
@@ -15,8 +17,18 @@
</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" />
+ <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>
@@ -27,28 +39,54 @@
<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 }" />
+ <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>
+ <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('重置') }}
+ <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
+ 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>
@@ -57,11 +95,21 @@
<script>
import SelectItem from "@/page/placeAnOrder/components/selectItem/SelectItem";
-import { Cell, Icon, Popup, DropdownMenu, DropdownItem, Field, Switch, Collapse, CollapseItem } from 'vant';
+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';
+import { mapGetters, mapState } from "vuex";
+import countries from "@/components/country-list/countryList.js";
+import { timeStamp } from "console";
export default {
name: "adScreening",
@@ -78,83 +126,90 @@
SelectItem,
},
computed: {
- ...mapGetters('c2c', ['payMethods']),
- ...mapGetters('c2c', ['symbolList', 'payMethods', 'exchangeCurrency']),
+ ...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]
- })
- })
+ title: this.payMethods[key],
+ });
+ });
payMethods.unshift({
- method_type: '',
- title: this.$t('全部')
- })
+ method_type: "",
+ title: this.$t("全部"),
+ });
return payMethods;
- }
+ },
},
- created() {
- },
+ created() {},
data() {
return {
countries, // 国家列表
activeNames: [],
- amount: '',
+ amount: "",
// 0 代表全部
- method_type: '', // 支付方式
+ method_type: "", // 支付方式
country_code: 99, // 国家
tradeList: [
{
- '': this.$t('全部'),
+ "": this.$t("全部"),
// Bank_card: '银行卡',
// Coin_collection: '币收款',
- }
+ },
],
- large: '80',
+ large: "80",
checked: false,
tabindex: 1,
showAd: false,
- }
+ };
},
methods: {
- onChooseType(key) { // 选择支付方式
- this.method_type = key
- this.$refs.paymentMethod[0].toggle()
+ onChooseType(key) {
+ // 选择支付方式
+ this.method_type = key;
+ this.$refs.paymentMethod[0].toggle();
},
onSelectCountry(item) {
this.country_code = item.code;
- this.$refs.country.toggle()
+ this.$refs.country.toggle();
},
- onReset() { // 重置
- this.amount = ''
- this.method_type = 99
- this.country_code = 99
+ 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', {
+ onConfirm() {
+ // 确认
+ console.log(
+ this.amount,
+ this.method_type,
+ this.country_code,
+ this.checked
+ );
+ this.$emit("confirm", {
amount: this.amount,
- method_type: this.method_type
- })
+ method_type: this.method_type,
+ });
- this.$emit('back')
+ this.$emit("back");
},
handlerBack() {
- this.$emit('back')
+ this.$emit("back");
},
payMethod(val) {
console.log(val);
- this.method_type = val
+ this.method_type = val;
},
address(val) {
- this.country_code = val
- }
- }
-}
+ this.country_code = val;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
--
Gitblit v1.9.3