wwbsr/pages/base/option-list.vue

<template>
	<v-page>
		<view class="d-flex flex-col">
			<view class="layout-main">
				<!-- 科创板 -->
				<view class="head_info m-t-xl" style="padding-bottom:60px">
					<van-tabs v-if="marketList.length" :active="infoActive" background="transparent" :border="false"
						animated class="tabs-border border-b">
						<van-tab v-for="parentItem in marketList" :key="parentItem.coin_name"
							:title="parentItem.coin_name" class="a">
							<view class="w-12/12 p-t-md">
								<view class="d-flex align-center p-l-md p-b-md">
									<view class="w-6/12 p-l-md d-flex justify-center">{{$t("base.g7")}}</view>
									<view class="w-3/12">{{$t("base.g8")}}</view>
									<view class="w-3/12 ">{{$t("base.g9")}}</view>
								</view>
								<view class="fn-center w-max">
									<v-link :to="{
                                            path: '/pages/exchange/index',
                                            query: { code: item.pair_name,type: 'bb' },
                                        }"
										class="m-b-md m-x-md rounded-sm bg-panel-7 box-shadow link-active d-flex align-center p-r-md p-y-md box-size"
										v-for="item in parentItem.collect
                                            ? collect
                                            : parentItem.marketInfoList" :key="item.pair_name">
										<view class="fn-18 w-2/12 d-flex align-center justify-center">
											<image class="d-block h-30 w-30" :src="item.coin_icon" alt=""
												mode="widthFix"></image>
										</view>
										<view class="color-light fn-left w-4/12">
											<view class="d-flex align-end fn-bold">{{
                                                item.pair_name
                                            }}</view>
											<view class="" style="font-size: 24rpx;">
												{{$t('base.f8')}}:{{Number(parseFloat(item.vol).toFixed(0)).toLocaleString('en-US')}}
											</view>
										</view>
										<view class="fn-left align-end color-light w-3/12">
											<view class="d-flex align-end fn-bold " style="margin-left: 23%;">{{
                                                item.close
                                            }}</view>
										</view>
										<view
											style=" margin-left: 10%;  width:120rpx;height: 45rpx; border-radius: 5rpx;"
											:style="item.increase * 1 < 0 ? 'background-color: #df3f73;':'background-color:#1ec692'">
											<view class="fn-bold " style="margin-top: 4%; color:ivory ">
												{{ item.increaseStr }}
											</view>
										</view>
									</v-link>
								</view>
							</view>
						</van-tab>
					</van-tabs>
				</view>
			</view>
			<!-- 个人主页弹出层 -->
			<van-popup class="personalCenter-main colbg" :show="show" @close="show = false" position="left"
				custom-style="width:75%;height:100%">
				<view class="personalCenter-top">
					<view class="app-nav"></view>
					<view class="theme-switch m-r-md">
						<label class="v-switch border rounded-xs d-flex" @click="changtTheme">
							<view class="icon border" :class="
                                    theme == 'light'
                                        ? 'bg-gradient-green active'
                                        : 'bg-gradient-green'
                                ">
								<view class="left color-light">{{
                                    $t("common.light")
                                }}</view>
								<view class="right color-light">{{
                                    $t("common.dark")
                                }}</view>
							</view>
						</label>
					</view>
					<view class="information p-l-md" @click="toAccountSettings">
						<view class="d-flex align-center">
							<img :src="logoMap.login_logo" class="h-50 w-50 d-block m-r-xs rounded-max flex-shrink" />
							<view class="inf-rig flex-fill">
								<span class="fn-10 color-light" v-if="isLogin">{{
							        user.account
							    }}</span>
								<span class="fn-lg color-light" v-else @click.stop>
									Hello，
									<v-link to="/pages/login/index" class="color-theme-1">{{ $t("base.b3") }}</v-link>
								</span>
								<span
									class="inf-rig-cent fn-sm color-default">UID：{{ isLogin ? user.user_id : "-" }}</span>
								<span v-if="isLogin" class="inf-rig-cent fn-sm color-default d-flex align-center">
									<span>{{$t('add.a5')}}：{{userAu.krediet}}</span>
									<image v-if="userAu.krediet>=100" :src="getDengJi(userAu.krediet)" mode="widthFix"
										style="width:100rpx;height:40rpx;"></image>
								</span>
							</view>
						</view>
						<v-link v-if="false" to="/pages/invite/level" style="padding: 3px 4px 6px"
							class="bg-panel-4 border border-r-0 rounded-tl-lg rounded-bl-lg border-buy"
							@click.native.stop>
							<span class="fn-xs color-buy">{{
                                $t("base.e6")
                            }}</span>
						</v-link>

					</view>
				</view>
				<view class="personalCenter-center border-b border-gray-5">
					<view class="d-flex justify-around">
						<v-link to="/pages/base/signIn" tag="div" class="d-flex w-3/12    flex-col align-center"
							style="padding-right:6rpx;overflow:hidden;word-break:break-all;">
							<img src="static/img/index/12.png" alt="" class="h-44" />
							<span class="fn-md color-light p-y-xs" style="text-align: center;">{{
						        $t("base.e9")
						    }}</span>
						</v-link>
						<v-link to="/pages/invite/index" tag="div" class="d-flex w-3/12   flex-col align-center"
							style="padding:0 6rpx;overflow:hidden;word-break:break-all;">
							<img src="static/img/index/1.png" alt="" class="h-44" />
							<span class="fn-md color-light p-y-xs" style="text-align: center;">{{
                                $t("base.b7")
                            }}</span>
						</v-link>
						<!-- <view @click="kefu" tag="div" class="d-flex w-3/12   flex-col align-center"
							style="padding:0 6rpx;overflow:hidden;word-break:break-all;">
							<img src="static/img/index/15.png" alt="" class="h-44" />
							<span class="fn-md color-light p-y-xs" style="text-align: center;">{{
						        $t("common.service")
						    }}</span>
						</view> -->
						<view @click="toShe" tag="div" class="d-flex w-3/12   flex-col align-center"
							style="padding:0 6rpx;overflow:hidden;word-break:break-all;">
							<img src="static/img/index/22.png" alt="" class="h-44" />
							<span class="fn-md color-light p-y-xs" style="text-align: center;">{{
						        $t("add.a2")
						    }}</span>
						</view>
						<!-- <v-link to="/pages/assets/recharge" tag="div" class="d-flex w-3/12   flex-col align-center" style="padding-right:6rpx;overflow:hidden;word-break:break-all;">
							<img src="static/img/index/2.png" alt="" class="h-44" />
							<span class="fn-md color-light p-y-xs">{{
                                $t("base.b5")
                            }}</span>
						</v-link>
						<v-link to="/pages/assets/draw" tag="div" class="d-flex   w-3/12 flex-col align-center" style="overflow:hidden;word-break:break-all;">
							<img src="static/img/index/3.png" alt="" class="h-44" />
							<view class="fn-md color-light p-y-xs">{{
                                $t("base.b6")
                            }}</view>
						</v-link> -->


						<!-- //签到 -->
						<!--                    <v-link tag="div" to="/pages/base/signIn" class="item">
						                        <view class="icon fn-22">
						                            <img class="h-54" src="static/img/index/12.png" />
						                        </view>
						                        <view class="fn-12">{{ $t("base.e9") }}</view>
						                    </v-link> -->
					</view>
				</view>
				<view class="personalCenter-bottom">
					<!--                    <v-link
		   to="/pages/otc/direct-recharge"
		   tag="div"
		   class="per-bot p-y-sm p-l-sm border-b d-flex align-center"
		 >
		   <img :src="$localImgUrl('Page9.png')" alt="" class="h-20 m-r-xs">
		   <span class="color-light">{{ $t("common.direct-recharge-a1") }}</span>
		 </v-link> -->
					<v-link to="/pages/commission/index" tag="div"
						class="per-bot p-y-sm p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page1.png')" alt="" class="m-r-xs h-20" />
						<span class="color-light">{{ $t("base.c1") }}</span>
					</v-link>
					<v-link to="/pages/auth/index" tag="div" class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page2.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c2") }}</span>

						<span class="color-light" style="flex:1;font-size:20rpx;text-align: right;padding-right:10rpx;"
							v-if="userAu != ''">
							<text v-if="userAu.primary_status == 0 || userAu.status == 0"> {{$t('auth.a2')}}</text>
							<text v-else-if="userAu.status == 1 && userAu.primary_status == 1">{{$t('auth.a3')}}</text>
						</span>

					</v-link>
					<v-link to="/pages/safe/index" tag="div" class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page3.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c3") }}</span>
					</v-link>
					<v-link to="/pages/help/index" tag="div" class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page11.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.g4") }}</span>
					</v-link>

					<v-link to="/pages/notice/index" tag="div"
						class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page4.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c4") }}</span>
					</v-link>
					<v-link to="/pages/assets/address-list" tag="div"
						class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page5.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.c5") }}</span>
						<!-- <span class="color-light" style="flex:1;font-size:20rpx;padding-right:10rpx;text-align: right;">
							<text v-if="walletAdd != ''">{{$t("base.g5")}}</text>
							<text v-else>{{$t("base.h0")}}</text>
						</span> -->
					</v-link>
					<view class="per-bot p-y-md p-l-sm border-b d-flex align-center">

						<img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" />
						<view class="">
							{{$t("base.g6")}}
						</view>
						<span class="color-light" style="flex:1;font-size:20rpx;padding-right:10rpx;text-align: right;">
							<i class="iconfont m-r-xs fn-sm">&#xe6e9;</i>
							<v-lang @change="
					                marketList = [];
					                indexData();
					            "></v-lang>

						</span>
					</view>
					<v-link v-if="agreement.about" :to="{path:'/pages/about-us/about-us',query:{id:agreement.about.id}}"
						tag="div" class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<img :src="$localImgUrl('Page10.png')" alt="" class="h-20 m-r-xs" />
						<span class="color-light">{{ $t("base.g2") }}</span>
						<span class="color-light" style="flex:1;font-size:20rpx;padding-right:10rpx;text-align: right;">
							<text>{{ $t("base.g3") }}</text>
						</span>
					</v-link>
					<v-link to="/pages/accountSettings/accountSettings" tag="div"
						class="per-bot p-y-md p-l-sm border-b d-flex align-center">
						<van-icon name="user-circle-o" class="fn-20  m-r-xs" />
						<span class="color-light">{{ $t("base.c6") }}</span>
					</v-link>
					<!-- <v-link
		  to="/pages/pledge/index"
		  tag="div"
		  class="per-bot p-y-md p-l-sm border-b d-flex align-center"
		>
		  <img :src="$localImgUrl('Page7.png')" alt="" class="h-20 m-r-xs" />
		  <span class="color-light">{{ $t("pledge.funcname") }}</span>
		</v-link> -->



					<view class="h-100"></view>
				</view>
			</van-popup>
			<van-toast id="van-toast" />
		</view>
		<ComFooter tab="option-list"></ComFooter>
		<!-- <com-footer tab="home"></com-footer> -->
	</v-page>
</template>

<script>
	import Home from "@/api/home";
	import Wallet from "@/api/wallet";
	import math from "@/utils/class/math.js";
	import app from "@/app";
	import Member from "@/api/member";
	import ComFooter from "./components/footer.vue";
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		name: "option-list",
		// props: ["isShow"],
		components: {
			ComFooter,
			...mapState({
				user: "user",
			}),
		},
		data() {
			return {
				infoActive: 0, // 详情选中
				marketList: [],
				home: {},
				notice: [],
				wap: "",
				indexList: [],
				createList: [],
				list: [],
				page: 1,
				tab: "kcb",
				show: false,
				checked: false,
				collect: [],
				app,
				first: true,
				isShow: false,
				userAu: '',
				walletAdd: '',
				agreement: {}
			};
		},
		onShow() {
			this.isShow = true;
			console.log(this.user)
		},
		onHide() {
			this.isShow = false;
		},
		computed: {
			...mapState({
				ws: "ws",
				user: "user",
				wsState: "wsState",
				logoMap: "logoMap",
				theme: "theme",
			}),
			isLogin() {
				return Boolean(uni.getStorageSync("token"));
			},
		},
		watch: {
			isShow(n) {
				console.log(n)
				if (n) {
					this.ws.send({
						cmd: "sub",
						msg: "indexMarketList",
					});
				} else {
					this.ws.send({
						cmd: "unsub",
						msg: "indexMarketList",
					});
				}
			},
		},
		created() {
			this.clause()
			// console.log(this.theme)
		},
		methods: {
			getDengJi(val) {
				if (!val) return
				let img = 0
				if (val >= 110 && val <= 119) {
					img = 1
				} else if (val >= 120 && val <= 129) {
					img = 2
				} else if (val >= 130 && val <= 139) {
					img = 3
				} else if (val >= 140 && val <= 149) {
					img = 4
				} else if (val >= 150 && val <= 159) {
					img = 5
				} else if (val >= 160 && val <= 169) {
					img = 6
				} else if (val >= 170 && val <= 179) {
					img = 7
				} else if (val >= 180 && val <= 189) {
					img = 8
				} else if (val >= 190 && val <= 199) {
					img = 9
				} else if (val >= 200) {
					img = 10
				}
				return `/static/img/dengji/${img}.png`
			},
			...mapActions({
				setTheme: "setTheme",
			}),
			toShe() {
				console.log('123456')
				window.location.href = 'https://t.me/GSR20'
			},
			handleSwiper(path) {
				//alert(path)
				uni.reLaunch({
					url: path,
				});
			},
			showToast() {
				uni.showToast({
					title: this.$t('base.h1'),
					icon: 'none'
				})
			},
			// 获取协议
			clause() {
				Member.clause().then((res) => {
					this.agreement = res.data;
				});
			},
			jump() {
				// window.location.href ='https://god1.top/pDZ569'
				window.open("https://god1.top/pDZ569", "_blank");
			},
			kefu(e) {
				let user_id = '';
				let avatar = '';
				let nickname = '';
				if (this.user.user_id > 0) {
					console.log(2);
					user_id = this.user.user_id;
					avatar = this.user.avatar;
					nickname = this.user.username;
				}
				// uni.navigateTo({
				// 	url:'/pages/assets/web-view'
				// })
				window.location.href = 'https://go.crisp.chat/chat/embed/?website_id=c6ffb47c-4db3-4d31-b84c-23c5b95f3255'
				// window.location.href = "http://kefu.bitkan.name/index/index/home?visiter_id=" + user_id +
				// 	"&visiter_name=" + nickname + "&avatar=" + avatar + "&business_id=24&groupid=0&special=51";
			},
			changtTheme() {
				if (this.theme == "light") {
					this.setTheme("dark");
				} else {
					this.setTheme("light");
				}
			},
			// 获取涨跌之前的价格
			getOldPrice(price, rate) {
				return math.multiple(math.division(price, 1 + rate * 1), rate, 2);
			},
			toAccountSettings() {
				this._router.push({
					path: "/pages/accountSettings/accountSettings",
				});
			},
			personalCenter() {
				this.show = true;
			},

			indexData() {
				let data = {};
				let ajax = Home.indexList(data, {
					loading: true
				});

				ajax.then((res) => {
					this.home = res.data.bannerList;
					this.notice = res.data.noticeList;
					this.indexList = res.data.brokenLine;
					this.marketList = res.data.marketList.filter(item => {
							return item.coin_name != 'BTC' && item.coin_name != 'ETH'
						});
					this.infoActive = 1;
					this.userAu = res.data.userAu;
					this.walletAdd = res.data.walletAdd;
					this.dunshift();
					this.getCollect();
					setTimeout(() => {
						this.first = false;
					}, 600);
				}).catch(() => {});
			},
			dunshift() {
				if (this.marketList.filter((item) => item.collect).length) return;
				this.marketList.unshift({
					coin_name: this.$t("base.c7"),
					collect: true,
					marketInfoList: [],
				});
			},
			// 获取自选交易列表
			getCollect(call) {
				if (!this.isLogin) return;
				Home.getCollect()
					.then((res) => {
						this.collect = res.data || [];
						call && call();
					})
					.catch(() => {});
			},
			// 是否为自选
			isCoolect(i) {
				return this.collect
					.map((item) => item.pair_name)
					.includes(i.pair_name);
			},
			// 替换自选数据
			replaceOptional() {
				let collect = this.collect.map((item) => item.pair_name);
				this.marketList.forEach((parentItem) => {
					parentItem.marketInfoList.forEach((item) => {
						let idx = collect.indexOf(item.pair_name);
						if (idx != -1) {
							this.collect.splice(idx, 1, item);
						}
					});
				});
			},
			// 添加自选
			option(item) {
				let data = {
					pair_name: item.pair_name,
				};
				Home.option(data)
					.then((res) => {
						this.getCollect();
						if (res.data) {
							this.$toast(this.$t("base.c8"));
						} else {
							this.$toast(this.$t("base.c9"));
						}
					})
					.catch(() => {});
			},
			// 链接socket
			indexMarketList() {
				this.ws.send({
					cmd: "sub",
					msg: "indexMarketList",
				});
				this.ws.on("message", (res) => {
					let {
						data,
						sub
					} = res;
					if (sub == "indexMarketList") {
						// console.log(data)
						this.marketList = data.filter(item => {
							return item.coin_name != 'BTC' && item.coin_name != 'ETH'
						});
						this.dunshift();
						this.replaceOptional();
					}
				});
			},
			// 创建充币地址
			createWalletAddress() {
				Wallet.createWalletAddress()
					.then(() => {})
					.catch(() => {});
			},
		},
		mounted() {
			this.indexData();
			this.indexMarketList();
			if (this.isLogin) {
				this.createWalletAddress();
			}
		},
		destroyed() {
			this.ws.send({
				cmd: "unsub",
				msg: "indexMarketList",
			});
		},
	};
</script>
<style lang="scss" scoped>
	.notice-more {
		color: var(--text-danger);
	}

	.router-link-active {
		color: $theme-1;
	}

	.a {
		margin-bottom: 30rpx;
	}

	.colbg {
		background-color: $bg;
	}

	.my-swipe {
		height: 150px;

		.van-image {
			padding: 0 18px;
			box-sizing: border-box;

			::v-deep img.van-image__img {
				border-radius: 9px !important;
			}
		}
	}

	.notice-swipe {
		height: 24px;
	}

	// #ff4d5c
	.nav2 {
		display: grid;
		grid-template-columns: repeat(4, 25%);
		// grid-column-gap: 30rpx;
		grid-row-gap: 30rpx;
		justify-content: center;
		text-align: center;

		.color-gray-6 {
			color: #f8a12e;
		}

		// .item {
		//     margin-right: 30rpx;
		//     margin-bottom: 30rpx;
		//     text-align: center;
		//     &:nth-of-type(4n) {
		//         margin-right: 0;
		//     }
		// }
	}

	.stock-swipe {
		.stock-index {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.stock-item-3 {
				padding: 3px 0;
			}
		}
	}

	.personalCenter-main {
		.personalCenter-top {
			box-sizing: border-box;

			.theme-switch {
				display: flex;
				justify-content: flex-end;
				padding: 30upx 0;

				.v-switch {
					$width: 50px;
					$icon-width: 20px;
					display: block;
					position: relative;
					height: 20px;
					width: $width;
					background: rgba($green, 0.2);
					overflow: hidden;

					.icon {
						position: absolute;
						top: 0;
						width: $icon-width;
						height: 20px;
						border-radius: inherit;
						transition: left 0.3s;

						.left,
						.right {
							position: absolute;
							width: $width;
							height: 100%;
							top: 0;
							box-sizing: border-box;
							text-align: center;

							&.left {
								right: 0;
								padding-right: $icon-width;
							}

							&.right {
								padding-left: $icon-width;
								left: 0;
							}
						}
					}

					.icon {
						left: 0;
					}

					.active.icon {
						left: $width - $icon-width;
					}
				}
			}

			.information {
				display: flex;
				align-items: flex-start;

				.inf-head-img {
					border-radius: 50%;
					margin-right: 4%;
				}

				.inf-rig {
					display: flex;
					flex-direction: column;
					letter-spacing: 1px;
					flex: 1;

					span:first-child {
						font-weight: 600;
						margin-bottom: 2px;
					}

					.inf-rig-cent {
						padding: 0 0 4px;
					}

					.vip-grade {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.progress-bar {
							width: 50%;
						}

						.progress-img {
							padding: 0 5px;
						}
					}
				}
			}
		}

		.personalCenter-center {
			padding: 20px 10px 10px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.personalCenter-bom {
				padding-top: 30px;

				.available-money {
					margin: 10px 0 0;
					height: 60%;
					background: rgba(100, 101, 102, 0.2);
					border-radius: 0 7px 7px 7px;
					align-items: center;
					padding: 6px 5px;
				}
			}
		}
	}

	.user-icon {
		font-size: 50px;
	}

	.epss-1 {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.fn-12 {
		// width: 65px;
		// max-height: 80px;
		word-wrap: break-word;
		word-break: keep-all;
		overflow: hidden;
	}
</style>