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="30" 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;">$ {{parseFloat(user.score).toFixed(2)}}</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; line-height: 90rpx; border: 2rpx solid #1D61E7; border-radius: 40rpx; width: 93%; margin-top: 30rpx;">
					  <uni-icons type="contact" color="transparent" size="20"></uni-icons>
					  <text style="margin-left: 10rpx; color: #1D61E7;">{{$t('index.text4')}}</text>
				  </button>
			  </uni-col>
			  <uni-col :span="12">
				  <button @click="onTokenJump('/pages/wallet/recharge')" 
				  style="background-color: #1D61E7; line-height: 90rpx; border: 2rpx solid #1D61E7; border-radius: 40rpx; width: 93%; float: right; margin-top: 30rpx;">
				  		<uni-icons type="home-filled" color="transparent" size="20"></uni-icons>
				  		<text style="margin-left: 10rpx; color: #fff;">{{$t('recharge.title')}}</text>
				  </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;" @click="onPageJump1('/pages/promotion/index')">
					  <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="$t('Questionnaire.title')" 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: 24rpx; font-weight: 400; color: #999; line-height: 40rpx;">
								<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: 70rpx; 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: 24rpx; font-weight: 400; color: #999; line-height: 40rpx;">
							  	<view style="float: left; color: #333; font-size: 32rpx; font-weight: 500; line-height: 80rpx;">
									{{$t('index.text10')}}: <span style="font-size: 40rpx;">${{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: 2rpx 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="$t('index.text24')" 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>
		<zNavigation></zNavigation>
	</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: []
			};
		},
		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){
					this.notices = 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 = o.user.email;
				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.deduction_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: 0rpx !important;}
	::v-deep .uni-slider-handle{display: none;}
	::v-deep .uni-slider-thumb{display: none;}
	::v-deep .uni-slider-handle-wrapper{height: 24rpx;}
	::v-deep uni-slider{padding: 0rpx;margin: 0rpx}
	::v-deep .uni-section__content-title{font-weight: bold;}
	::v-deep .uniui-contact {background: url('/static/images/index4.png') no-repeat center; background-size: contain; /* 或者使用 cover, 100% 100% 等 */}
	::v-deep .uniui-home-filled{background: url('/static/images/index3.png') no-repeat center; background-size: contain; /* 或者使用 cover, 100% 100% 等 */}
	body{background-color: #fff;}
	.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
	.v2{border: 2rpx solid #ddd; background-color: #fff; padding: 20rpx; border-radius: 30rpx; margin-top: 30rpx;}
	.v2 .row{margin-top: 10rpx; border-radius: 20px;}
	.v2 .row .i{width: 160rpx; height: 160rpx; margin: auto;}
	.v2 .row .title{font-weight: 500; font-size: 32rpx; 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: 36rpx; background: url('/static/images/index1.png'); 
		  height: 160rpx; background-repeat: no-repeat;background-position:right bottom; background-size: 22%;}
	.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>