wwbsr/pages/exchange/contract-miao.vue

<template>
	<v-page>
		<view class="head_info p-t-xl" style="padding-bottom:60px">

			<view class="w-12/12 p-b-lg">
				<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/contract-miao-detail',
		                            query: { code: item.coin_name },
		                        }"
						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 marketList" :key="item.coin_name">
						<view class="fn-18 w-2/12 d-flex align-center justify-center">
							<!-- app.imgUrl+'/'+ -->
							<image class="d-block h-30 w-30" :src="item.logo" alt="" mode="widthFix"></image>
						</view>
						<view class="color-light fn-left w-4/12">
							<view class="d-flex align-end fn-bold">{{
		                                item.coin_name
		                            }}</view>
							<view class="" style="font-size: 24rpx;" v-if="item.monovalent&&item.monovalent.vol">
								{{$t('base.f8')}}:{{Number(parseFloat(item.monovalent.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.monovalent.close
		                            }}</view>
						</view>
						<view style=" margin-left: 10%;  width:120rpx;height: 45rpx; border-radius: 5rpx;"
							:style="item.monovalent.increase * 1 < 0 ? 'background-color: #df3f73;':'background-color:#1ec692'">
							<view class="fn-bold " style="margin-top: 4%; color:ivory ">
								{{ item.monovalent.increaseStr  }}
							</view>
						</view>
					</v-link>
				</view>
			</view>
		</view>
	</v-page>
</template>

<script>
	import Contract from "@/api/contract";
	import app from "@/app.js"
	import {
		mapState
	} from "vuex";
	
	export default {
		data() {
			return {
				marketList: [],
				app
			};
		},
		computed: {
			...mapState({
				ws: "ws"
			}),
		},
		onLoad() {
			console.log(123)
			this.getMaketList()
		},
		methods: {
			
			// 链接socket
			linkSocket() {
				this.getMaketList()
				let msg = "indexMarketList";
				this.ws.send({
					cmd: "sub",
					msg: "indexMarketList",
				});
				this.ws.on("message", (res) => {
					let {
						data,
						sub
					} = res;
					if (sub == "indexMarketList") {
						res = data[0]['marketInfoList'];
						for (var i=0;i<res.length;i++) {
							for (var a=0;a<this.marketList.length;a++) {
								if(this.marketList[a].coin_name == res[i].pair_name){
									this.marketList[a].monovalent.increaseStr = res[i].increaseStr
									this.marketList[a].monovalent.close = res[i].close
									this.marketList[a].monovalent.vol = res[i].vol
									this.marketList[a].logo = res[i].coin_icon
								}
							}
						}
						this.$forceUpdate()
					}
				});
			},
			destroyed() {
				this.ws.send({
					cmd: "unsub",
					msg: "indexMarketList",
				});
			},
			
			getMaketList(){
				Contract.marketListM().then((res)=>{
					this.marketList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">

</style>