question_uniapp/pages/index/index.vue

<template>
	<view class="page">
		<view style="margin-top: 60rpx;">
			<image src="/static/images/logo.png" style="width: 140rpx; height: 60rpx; float: left; margin-left: 20rpx;"></image>
			<view class="v1">
				<!-- <uni-icons size="20" type="gift"></uni-icons> -->
				<uni-badge @click="onPageJump('/pages/mine/notice')" class="uni-badge-left-margin" :is-dot="true" text="0" :offset="[5, 10]"  absolute="rightTop" size="small">
					<uni-icons size="20" type="notification" style="margin-left: 40rpx;"></uni-icons>
				</uni-badge>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view style="margin-top: 20rpx;">
			<uni-search-bar class="uni-mt-10" radius="10" v-model="kw"
			 :placeholder="$t('index.text1')" clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<view class="num">
			<view style="font-size: 30rpx; color: #999;">{{$t('index.text2')}}</view>
			<view>
				<span style="font-size: 60rpx; font-weight: bold; float: left;">{{parseFloat(user.money).toFixed(4)}}</span>
				<span style="font-size: 40rpx; font-weight: 600; margin: 20rpx 10rpx auto 10rpx; float: left;">USDT</span>
				<image src="/static/images/index2.png" style="width: 14rpx; height: 10rpx; float: left; margin-top: 42rpx;"></image>
				<view style="clear: both;"></view>
			</view>
			<view style="font-size: 30rpx; color: #999;">
				<span>{{$t('index.text3')}}</span>
				<span style="margin-left: 20rpx;">$ 0.00</span>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view style="width: 94%; margin: auto;">
			<uni-row>
			  <uni-col :span="12">
				  <button @click="onTokenJump('/pages/wallet/putforward')" style="background-color: #fff; border: 1px solid #1D61E7; border-radius: 40rpx; width: 93%; margin-top: 30rpx;">
					  <image src="/static/images/index4.png" style="width: 30rpx; height: 30rpx; float: left; margin-left: 18%; margin-top: 30rpx;"></image>
					  <span style="float: left; color: #1D61E7; margin-left: 10rpx;">{{$t('index.text4')}}</span>
				  </button>
			  </uni-col>
			  <uni-col :span="12">
				  <button @click="onTokenJump('/pages/wallet/recharge')" style="background-color: #1D61E7; border: 1px solid #1D61E7; border-radius: 40rpx; width: 93%; float: right; margin-top: 30rpx;">
				  		<image src="/static/images/index3.png" style="width: 30rpx; height: 30rpx; float: left; margin-left: 18%; margin-top: 30rpx;"></image>
				  		<span style="float: left; color: #fff; margin-left: 10rpx;">{{$t('recharge.title')}}</span>
				  </button>
			  </uni-col>
			</uni-row>
		</view>
		
		<view class="noticeBar">
		    <uni-icons type="sound" size="25" color="#3795F9" style="margin:0 10rpx 0 15rpx;" />
		    <swiper class="list" circular="true" vertical="true" autoplay="true" interval="3000" duration="1000">
		      <swiper-item v-for="item in notices" :key="item.id" @click="handleInfo(item.id)">
		        {{ getcash(item) }}
		      </swiper-item>
		    </swiper>
		    
		  </view>
		<view style="width: 94%; margin: 60rpx auto;">
			<uni-row>
			  <uni-col :span="8">
				  <image src="/static/images/index5.png" style="width: 220rpx; height: 180rpx; margin: 10rpx auto;"></image>
			  </uni-col>
			  <uni-col :span="16">
				  <view style="font-size: 30rpx; color: #999; margin-top: 10rpx;">{{$t('index.text6')}}</view>
				  <view style="font-size: 60rpx color: #333; font-weight: 600;">{{$t('index.text7')}}</view>
				  <view style="font-size: 30rpx; color: #333; margin-top: 10rpx;">
					  <span style="float: left;">{{$t('index.text8')}}</span>
					  <span style="float: left;"><uni-icons type="arrow-right" color="#333" size="20"></uni-icons></span>
					  <span style="float: right;">1/3</span>
				  </view>
			  </uni-col>
			</uni-row>
		</view>
		<view style="width: 94%; margin: auto;">
			<uni-section title="Questionnaire" titleFontSize="24" style="font-weight: 600;">
				<view class="v2" :style="index==0 ? '' : 'margin-top: 20rpx'" v-if="list.length > 0" v-for="(item, index) in list" :key="index">
					<uni-row :gutter="10" class="row">
						<uni-col :span="6" style="text-align: center;">
							<image class="i" src="/static/images/q1.png" fit="cover"></image>
						</uni-col>
						<uni-col :span="18">
							<view class="title">{{item.title}}</view>
							<view style="font-size: 12px; font-weight: 400; color: #999; line-height: 20px;">
								<view style="width: 40%; float: left; padding-top: 8rpx;">
									<slider :value="item.used" :disabled="true" style="height: 16rpx;" min="0" :max="item.stock+item.used" step="100" />
								</view>
								<view style="width: 55%; float: left; line-height: 35px; margin-left: 5%;">
									{{$t('index.text9')}}: <span style="color: #1D61E7;">{{item.used}}</span>/{{item.stock+item.used}}
								</view>
								<view style="text-align: left; clear: both;">Period: {{item.billing_cycle}} {{item.cycle_type}}</view>
							</view>
							<view style="font-size: 12px; font-weight: 400; color: #999; line-height: 20px; te">
							  	<view style="float: left; color: #333; font-size: 16px; font-weight: 500; line-height: 40px;">
									{{$t('index.text10')}}: <span style="font-size: 20px;">${{parseFloat(item.price).toFixed(2)}} </span>
								</view>
								<view style="float: right;">
									<button type="primary" class="b" @click="onTokenJump('/pages/questionnaire/details?id='+item.id)">To answer</button>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view @click="onPageJump1('/pages/questionnaire/index')" style="border: 1px solid #999; border-radius: 45rpx; font-size: 34rpx; margin: 40rpx auto; color: #333; width: 40%; text-align: center; height: 90rpx; line-height: 90rpx;">
					{{$t('index.text11')}} <uni-icons type="arrow-right" color="#333" size="20"></uni-icons>
				</view>
			</uni-section>
		</view>
		<view style="width: 94%; margin: auto; padding-bottom:40rpx;">
			<uni-section title="Core advantage" titleFontSize="24" style="font-weight: 600;">
				<view class="v2" style="margin-top: 20rpx; padding: 30rpx 20rpx;">
					<view><image src="/static/images/index6.png" style="width: 130rpx; height: 130rpx; margin: auto;"></image></view>
					<view style="font-size: 34rpx; font-weight: 600; text-align: center; margin-top: 20rpx;">
						{{$t('index.text12')}}
					</view>
					<view style="text-align: center; margin-top: 20rpx; color: #999; font-size: 26rpx;">
						1.&nbsp;{{$t('index.text13')}}<br>
						2.&nbsp;{{$t('index.text14')}}<br>
						3.&nbsp;{{$t('index.text15')}}
					</view>
				</view>
				<view class="v2">
					<view><image src="/static/images/index7.png" style="width: 130rpx; height: 130rpx; margin: auto;"></image></view>
					<view style="font-size: 34rpx; font-weight: 600; text-align: center; margin-top: 20rpx;">
						{{$t('index.text16')}}
					</view>
					<view style="text-align: center; margin-top: 20rpx; color: #999; font-size: 26rpx;">
						1.&nbsp;{{$t('index.text17')}}<br>
						2.&nbsp;{{$t('index.text18')}}<br>
						3.&nbsp;{{$t('index.text19')}}
					</view>
				</view>
				<view class="v2">
					<view><image src="/static/images/index8.png" style="width: 130rpx; height: 130rpx; margin: auto;"></image></view>
					<view style="font-size: 34rpx; font-weight: 600; text-align: center; margin-top: 20rpx;">
						{{$t('index.text20')}}
					</view>
					<view style="text-align: center; margin-top: 20rpx; color: #999; font-size: 26rpx;">
						1.&nbsp;{{$t('index.text21')}}<br>
						2.&nbsp;{{$t('index.text22')}}<br>
						3.&nbsp;{{$t('index.text23')}}
					</view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	import { getUserInfo } from '@/config/utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				activeName: 'first',
				url:"/static/images/tx.png",
				list:[],
				user: {money: 0.00},
				kw: '',
				notices: [{
					"id": "149",
					"user_id": 127710,
					"deduction_amount": "2.0000000000",
					"recive_amount": "1.0000000000",
					"fee": "1.0000000000",
					"created_at": "2025-06-01 02:07:13",
					"updated_at": "2025-06-01 02:07:13",
					"network": "BEP-20",
					"address": "0x12344578754433",
					"status": 0,
					"memo": null,
					"transfer_at": null,
					"txid": null
				},{
					"id": "150",
					"user_id": 127710,
					"deduction_amount": "2.0000000000",
					"recive_amount": "1.0000000000",
					"fee": "1.0000000000",
					"created_at": "2025-06-01 02:07:13",
					"updated_at": "2025-06-01 02:07:13",
					"network": "BEP-20",
					"address": "0x12344578754433",
					"status": 0,
					"memo": null,
					"transfer_at": null,
					"txid": null
				}]
			};
		},
		computed: {
			...mapState(['userInfo']),
			...mapState(['init'])
		},
		//第一次加载
		async onLoad(e) {
			uni.showLoading({
				title:this.$t('loading')
			})
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
				this.islogin = false;
				uni.hideLoading();
			}else{
				this.user = await getUserInfo(this.$i18n.locale);
			}
			this.$http.get('/api/withdrawl/recent').then(res => {
				if(res.code == 0){
					console.log(res.data);
				}
			}).catch(err => {
			});
			let data = {
				page: 1,
				limit: 5,
				lang: this.$i18n.locale,
			};
			this.$http.post('/api/product/list', data).then(res => {
				if(res.code == 0){
					this.list = res.data.data;
					uni.hideLoading();
				}
			}).catch(err => {
				uni.hideLoading()
			});
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			search(){
				uni.navigateTo({
					url: "/pages/questionnaire/select?kw="+this.kw
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onPageJump1(url) {
				uni.switchTab({
					url: url
				});
			},
			getcash(o){
				var email = 'lssii2010@outlook.com';
				let username = email.split('@')[0]; // 获取用户名部分
				let domain = email.split('@')[1]; // 获取域名部分
				let midIndex = Math.floor(username.length / 2) - 2; // 计算中间两个字符的起始索引
				let censoredEmail = username.slice(0, midIndex) + "****" + username.slice(midIndex + 4) + '@' + domain;
				return censoredEmail + this.$t('index.text5', {par: parseFloat(o.recive_amount).toFixed(2)})
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	::v-deep .uni-searchbar__box{padding: 30rpx 20rpx;}
	::v-deep .uni-searchbar__box{height: 100rpx;}
	::v-deep .uni-noticebar-icon{margin-top: 8rpx;}
	::v-deep .uni-noticebar{padding: 10rpx; border-radius: 20rpx; margin-top: 40rpx;}
	::v-deep .uni-section-header{padding: 0px !important;}
	::v-deep .uni-slider-handle{display: none;}
	::v-deep .uni-slider-thumb{display: none;}
	::v-deep .uni-slider-handle-wrapper{height: 12px;}
	::v-deep uni-slider{padding: 0px;margin: 0px}
	::v-deep .uni-section__content-title{font-weight: bold;}
	body{background-color: #fff;}
	.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
	.v2{border: 1px solid #ddd; background-color: #fff; padding: 10px; border-radius: 30rpx; margin-top: 30rpx;}
	.v2 .row{margin-top: 10rpx; border-radius: 20px;}
	.v2 .row .i{width: 80px; height: 80px; margin: auto;}
	.v2 .row .title{font-weight: 500; font-size: 16px; color: #333;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.page{background-color: #fff; min-height: 100vh;}
	.v1{ float: right; padding-right: 20upx;}
	.num{ width: 94%; margin: 20rpx auto 20rpx auto; font-size: 18px; background: url('/static/images/index1.png'); 
		  height: 160rpx; background-repeat: no-repeat;background-position:right bottom}
	.noticeBar {
	  margin: 20rpx auto 0;
	  width: 94%;
	  height: 80rpx;
	  line-height: 80rpx;
	  background: rgb(248,248,248);
	  color: #999;
	  font-size: 24rpx;
	  border-radius: 30rpx;
	  display: flex;
	  .list {
	    width: 100%;
	    height: 100%;
	  }
	}

</style>