<template>
|
<div id="my_ad" class="pb-180 flex flex-col w-full h-full bg-grey">
|
<order-nav :title="$t('我的广告')">
|
<template #right>
|
<div @click="clickAD">
|
<img
|
class="w-36 h-36 mr-34"
|
src="@/assets/image/otc/buy/plus.png"
|
alt=""
|
/>
|
</div>
|
<div @click="AdHistory">
|
<img class="w-32 h-36" src="@/assets/image/otc/buy/ggbj.png" alt="" />
|
</div>
|
</template>
|
</order-nav>
|
<div class="border_top">
|
<van-dropdown-menu active-color="#1D91FF">
|
<van-dropdown-item
|
v-model="form.symbol"
|
:options="option1"
|
active-color="#ffffff"
|
/>
|
<van-dropdown-item v-model="form.direction" :options="option2" />
|
<van-dropdown-item v-model="form.on_sale" :options="option3" />
|
</van-dropdown-menu>
|
</div>
|
|
<div style="overflow-y: auto; flex: 1">
|
<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"
|
:finished="finished"
|
:finished-text="$t('没有更多了')"
|
@load="onLoad"
|
>
|
<div
|
class="flex-1 w-full bg-grey box-border px-32 py-32 overflow-y"
|
>
|
<div
|
@click="
|
$router.push({
|
path: '/adDetails',
|
query: {
|
id: item.id,
|
},
|
})
|
"
|
class="bg-white rounded-xl mb-32"
|
v-for="(item, index) in list"
|
:key="'AD' + index"
|
>
|
<div class="flex justify-between items-center px-28 pt-26">
|
<div>
|
<span
|
:class="
|
item.direction === 'sell' ? 'text-red' : 'text-green'
|
"
|
class="font-400 mr-10"
|
>{{
|
item.direction === "sell" ? $t("出售") : $t("购买")
|
}}</span
|
>
|
<span class="font-500 font-32 mr-10">{{
|
item.symbol.toUpperCase()
|
}}</span>
|
<span class="font-400 font-32 mr-10">{{ $t("用") }}</span>
|
<span class="font-500 font-32">{{ item.currency }}</span>
|
</div>
|
<div class="flex">
|
<div
|
v-if="!item.on_sale"
|
class="text-grey bg-grey px-12 py-6 font-24"
|
>
|
{{ $t("已下架") }}
|
</div>
|
<div
|
v-if="item.on_sale"
|
class="bg-grey px-12 py-6 font-24"
|
:class="{ grey: checked }"
|
>
|
{{ $t("已上架") }}
|
</div>
|
<van-switch
|
class="ml-28"
|
disabled
|
v-model="item.on_sale"
|
size="24"
|
/>
|
</div>
|
</div>
|
<div class="px-28 pb-26">
|
<div class="mt-34">
|
<span class="font-600 font-32 mr-18">{{
|
$store.state.home.currency.currency_symbol
|
}}</span>
|
<span class="font-700 font-52">{{
|
item.symbol_value
|
}}</span>
|
</div>
|
<div class="flex justify-between mt-30">
|
<span class="font-400 font-28 text-grey">{{
|
$t("交易总额")
|
}}</span>
|
<span class="font-600 font-28"
|
>{{ item.symbol_value * item.coin_amount }}
|
{{ item.symbol }}</span
|
>
|
</div>
|
<div class="flex justify-between mt-30">
|
<span class="font-400 font-28 text-grey">{{
|
$t("限额")
|
}}</span>
|
<span class="font-600 font-28">{{
|
item.investment_min +
|
" - " +
|
item.investment_max +
|
" " +
|
item.currency
|
}}</span>
|
</div>
|
<div class="flex justify-between items-center mt-64">
|
<div class="flex items-center">
|
<div class="w-7 h-29 col mr-9"></div>
|
<span class="mr-19">{{ item.pay_type_name }}</span>
|
</div>
|
<span @click="$router.push(item.path)"
|
><img
|
class="w-44 h-44"
|
src="@/assets/image/otc/buy/Group 2630.png"
|
alt=""
|
/>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</template>
|
<template
|
v-if="list.length === 0 && loading === false && isLoading === false"
|
>
|
<div class="mt-160">
|
<van-empty
|
class="custom-image"
|
:image="require('@/assets/image/otc/nodatas.png')"
|
:description="$t('暂无广告')"
|
>
|
<van-button
|
@click="showPopup"
|
round
|
type="danger"
|
square
|
class="bottom-button rounded-xl h-80 w-220 font-500 font-32"
|
color="linear-gradient(275.44deg, #1D92FF 2.13%, #B1DAFF 98.94%)"
|
></van-button>
|
</van-empty>
|
<van-popup v-model="show">
|
<div class="h-360 w-600 text-center">
|
<img
|
src="@/assets/image/otc/buy/advice_icon.png"
|
class="w-76 h-76 mt-46"
|
alt=""
|
/>
|
<div class="font-28 font-400 mt-36">
|
{{ $t("請先申請成為認證廣告方") }}
|
</div>
|
<div class="mt-42 mb-48 flex px-50 box-border">
|
<div
|
class="h-80 bg-grey flex-1 rounded-lg lh-80 text-center font-28 mr-22"
|
@click="show = false"
|
>
|
{{ $t("取消") }}
|
</div>
|
<div
|
class="h-80 bg-blue flex-1 rounded-lg lh-80 text-center font-28 text-white"
|
@click="$router.push('/CertifiedAdvertiser')"
|
>
|
{{ $t("去申请") }}
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
</van-pull-refresh>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import listLoadMixins from "@/utils/list-load-mixins";
|
import {
|
Icon,
|
DropdownMenu,
|
Cell,
|
DropdownItem,
|
Switch,
|
Empty,
|
Popup,
|
List,
|
PullRefresh,
|
Toast,
|
} from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import { getMyadvertList, c2cGetCurrencyList } from "@/API/otc";
|
export default {
|
name: "my_ad",
|
mixins: [listLoadMixins],
|
components: {
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[Icon.name]: Icon,
|
[Switch.name]: Switch,
|
[Cell.name]: Cell,
|
[Empty.name]: Empty,
|
[Popup.name]: Popup,
|
[List.name]: List,
|
[Toast.name]: Toast,
|
[PullRefresh.name]: PullRefresh,
|
OrderNav,
|
},
|
data() {
|
return {
|
show: false,
|
value2: "a",
|
value3: "A",
|
checked: false,
|
form: {
|
direction: "",
|
currency: this.$store.state.home.currency.currency,
|
symbol: "", // 默认全部
|
on_sale: "",
|
language: this.$i18n.locale,
|
},
|
option1: [{ text: this.$t("所有币种"), value: "" }],
|
option2: [
|
{ text: this.$t("所有类型"), value: "" },
|
{ text: this.$t("购买"), value: "buy" },
|
{ text: this.$t("出售"), value: "sell" },
|
],
|
option3: [
|
{ text: this.$t("所有状态"), value: "" },
|
{ text: this.$t("上架"), value: 1 },
|
{ text: this.$t("下架"), value: 0 },
|
],
|
};
|
},
|
created() {
|
c2cGetCurrencyList().then((res) => {
|
//console.log('上架币种列表', res)
|
Object.keys(res).forEach((key) => {
|
this.option1.push({
|
text: res[key],
|
value: key,
|
});
|
});
|
this.get();
|
});
|
},
|
methods: {
|
get() {
|
// 获取数据的方法需要自定义
|
//console.log('正在加载数据')
|
Toast.loading();
|
getMyadvertList(this.form).then((res) => {
|
Toast.clear();
|
//console.log('我的广告', res)
|
res.forEach((item) => {
|
item.on_sale === 1 ? (item.on_sale = true) : (item.on_sale = false);
|
});
|
this.handleData(res);
|
});
|
},
|
click() {
|
this.checked = !this.checked;
|
},
|
showPopup() {
|
this.show = true;
|
},
|
clickAD() {
|
this.$router.push({
|
path: "/editAd",
|
query: {
|
type: 0,
|
},
|
});
|
},
|
AdHistory() {
|
this.$router.push({
|
path: "/advertiserHistory",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#my_ad {
|
overflow: hidden;
|
box-sizing: border-box;
|
}
|
|
::v-deep {
|
.van-empty__bottom {
|
margin-top: 53px;
|
}
|
|
.van-empty__image {
|
width: 186px;
|
height: 186px;
|
}
|
}
|
|
.border_top {
|
border-top: 1px solid #c8cad2;
|
}
|
|
.grey {
|
color: #2c78f8;
|
}
|
|
.col {
|
background: #e7bb41;
|
}
|
|
.overflow-y {
|
overflow-y: auto;
|
}
|
</style>
|
