question_uniapp/pages/questionnaire/index.vue

<template>
	<view class="page">
		<uni-nav-bar :title="$t('Questionnaire.title')"  :border="false" :shadow="false" :fixed="true" 
		backgroundColor="#fff" :statusBar="true"></uni-nav-bar>
		<view>
			<view class="head-nav">
				<view class="tab" :class="navIndex==0?'activite':''" @click="checkIndex(0)">{{$t('Questionnaire.text1')}}</view>
				<view class="tab" :class="navIndex==1?'activite':''" @click="checkIndex(1)">{{$t('Questionnaire.text2')}}</view>
				<view class="tab" :class="navIndex==2?'activite':''" @click="checkIndex(2)">{{$t('Questionnaire.text3')}}</view>
				<view style="clear: both;"></view>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==0">
				<view style="width: 94%; margin: 20rpx auto;">
					<view class="v1" :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="url" 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;">
										<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('Questionnaire.text4')}}: <span style="color: #1D61E7;">{{item.used}}</span>/{{item.stock+item.used}}
									</view>
									<view style="text-align: left; clear: both;">{{$t('Questionnaire.text5')}}: {{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('Questionnaire.text6')}}: <span style="font-size: 40rpx;">${{parseFloat(item.interest_rate).toFixed(2)}} </span>
									</view>
									<view style="float: right;">
										<button type="primary" v-if="item.buy_state" class="b" @click="onTokenJump('/pages/questionnaire/details?id='+item.id)">{{$t('Questionnaire.text7')}}</button>
										<button type="primary" v-else class="b" style="float: right; background-color: #eee; color: #333">{{$t('Questionnaire.text10')}}</button>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<view style="text-align: center; padding-bottom: 160px;" v-if="list.length <= 0">
						<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" mode="cover"></image>
						<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<view class="v2" style="margin-top: 20rpx" v-if="list1.length > 0" v-for="(item, index) in list1" :key="index">
					<view class="title">{{item.product.title}}</view>
					<view style="font-weight: 400;font-size: 28rpx;color: #999999;">
						{{$t('Questionnaire.text11')}}: <span style="color: #1D61E7;">${{parseFloat(item.product.interest_rate).toFixed(2)}}</span>
						<span style="margin-left: 60rpx;">{{$t('Questionnaire.text12')}}</span>: <span style="color: #1D61E7;">{{item.product.billing_cycle}} Days</span>
					</view>
					<view style="font-weight: 400;font-size: 28rpx;color: #999999;">{{$t('Questionnaire.text8')}}: {{item.created_at.slice(0, 19)}}</view>
					<view style="text-align: right;">
						<button type="primary" class="b" style="float: right;" v-if="item.status == 1" @click="onTokenJump('/pages/questionnaire/answer?id='+item.id)">{{$t('Questionnaire.text9')}}</button>
						<button type="primary" class="b" v-else style="float: right; background-color: #eee; color: #333">{{item.status_text}}</button>
					</view>
					<view style="clear: both;"></view>
				</view>
				<view style="text-align: center; padding-bottom: 160rpx;" v-if="list1.length <= 0">
					<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" mode="cover"></image>
					<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="v2" style="margin-top: 20rpx" v-if="list2.length > 0" v-for="(item, index) in list2" :key="index">
					<view class="title">{{item.product.title}}</view>
					<view style="font-weight: 400;font-size: 28rpx;color: #999999;">{{$t('Questionnaire.text8')}}: {{item.created_at.slice(0, 19)}}</view>
					<view style="text-align: right;"><button type="primary" class="b" style="float: right; background-color: #eee; color: #333">{{$t('Questionnaire.text10')}}</button></view>
					<view style="clear: both;"></view>
				</view>
				<view style="text-align: center; padding-bottom: 160rpx;" v-if="list2.length <= 0">
					<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" mode="cover"></image>
					<view style="color: #999; font-size: 28rpx; font-weight: 400;">{{$t('nodata')}}</view>
				</view>
			</view>
		</view>
		<zNavigation></zNavigation>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				navIndex: 0,
				value: 30,
				url:"/static/images/q1.png",
				list:[],
				list1: [],
				list2: [],
				par:{
					page: 1,
					limit: 10,
					lastPage: 1
				},
				par1:{
					page: 1,
					limit: 10,
					lastPage: 1
				},
				par2:{
					page: 1,
					limit: 10,
					lastPage: 1
				},
				
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			uni.showLoading({
				title: this.$t('loading')
			})
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
			}else{
				this.getList1();
				this.getList2();
			}
		},
		created() {
			uni.hideTabBar()
		},
		//页面显示
		onShow() {
			this.par.page = 1
			this.list = [];
			this.getList();
		},
		//方法
		methods: {
			checkIndex(index) {
				this.navIndex = index;
				if(this.navIndex == 0){
					this.par.page = 1;
					this.list = [];
					this.getList();
				}
				if(this.navIndex == 1){
					this.par1.page = 1;
					this.list1 = [];
					this.getList1();
				}
				if(this.navIndex == 2){
					this.par2.page = 1;
					this.list2 = [];
					this.getList2();
				}
			},
			getList(){
				let data = {
					page: this.par.page,
					limit: this.par.limit,
					lang: this.$i18n.locale,
				};
				this.$http.post('/api/product/list', data).then(res => {
					if(res.code == 0){
						res.data.data.forEach(item => {
							this.list.push(item);
						});
						this.par.lastPage = res.data.last_page
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading()
				});
			},
			getList1(){
				let data2 = {
					page: this.par1.page,
					limit: this.par1.limit,
					lang: this.$i18n.locale,
					step: 'progress'
				};
				this.$http.post('/api/server/list', data2).then(res => {
					if(res.code == 0){
						res.data.data.forEach(item => {
							this.list1.push(item);
						});
						this.par1.lastPage = res.data.last_page
					}
				}).catch(err => {
				});
			},
			getList2(){
				let data1 = {
					page: this.par2.page,
					limit: this.par2.limit,
					lang: this.$i18n.locale,
					step: 'done'
				};
				this.$http.post('/api/server/list', data1).then(res => {
					if(res.code == 0){
						res.data.data.forEach(item => {
							this.list2.push(item);
						});
						this.par2.lastPage = res.data.last_page
					}
				}).catch(err => {
				});
			},
			onTokenJump(url) {
				if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
					uni.showModal({
						title: this.$t('gotoLogin.title'),
						content: this.$t('gotoLogin.content'),
						confirmText: this.$t('gotoLogin.login'),
						cancelText: this.$t('gotoLogin.cancel'),
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/mine/login"
								});
							}
						}
					});
				}else{
					uni.navigateTo({
						url: url
					});
				}
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {
			if(this.navIndex == 0){
				if(this.par.page < this.par.lastPage){
					this.par.page = this.par.page + 1;
					this.getList();
				}
			}
			if(this.navIndex == 1){
				if(this.par1.page < this.par1.lastPage){
					this.par1.page = this.par1.page + 1;
					this.getList1();
				}
			}
			if(this.navIndex == 2){
				if(this.par2.page < this.par2.lastPage){
					this.par2.page = this.par2.page + 1;
					this.getList2();
				}
			}
		},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #F8F8F8;}
	.page{background-color: #F8F8F8; min-height: 100vh;}
	.b{height: 70rpx; width: 200rpx; line-height: 70rpx; font-size: 28rpx;}
	//修改slider高度
	::v-deep .uni-slider-handle-wrapper {height: 14rpx !important;}
	//修改slider选中的背景色
	::v-deep .uni-slider-track {background-image: linear-gradient(to right,#6cd0ca,#133fce) !important;}
	::v-deep .uni-slider-handle{display: none;}
	::v-deep .uni-slider-thumb{display: none;}
	::v-deep uni-slider{margin: 16rpx 0rpx !important;}
	::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}
	::v-deep .uni-slider-handle-wrapper{height: 24rpx;}
	::v-deep uni-slider{padding: 0rpx;margin: 0rpx}
	.v1{border-bottom: 2rpx solid #ddd; background-color: #fff; padding: 20rpx;}
	.v1 .row{margin-top: 30rpx; border-radius: 40rpx;}
	.v1 .row .i{width: 160rpx; height: 160rpx; margin: auto;}
	.v1 .row .title{font-weight: 500; font-size: 32rpx; color: #333;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.v2{ border-bottom: 2rpx solid #ddd; background-color: #fff; padding: 20rpx; width: 94%; margin: 0rpx auto; border-radius: 40rpx;}
	.v2 .title{font-weight: 600; font-size: 32rpx; color: #333;}
	.w{background-color: #F8F8F8; border-radius: 20rpx; padding: 40rpx 20rpx;}
	.w .t{text-align: center; margin-top: 20rpx; font-size: 28rpx;}
	.head-nav {display: flex;align-items: center;color: #999;font-size: 36rpx;font-weight: 500;background-color: #fff;}
	.tab{color: #999;font-size: 32rpx;font-weight: 500;float: left;padding: 40rpx;}
	.activite {color: #333;border-bottom: 4rpx solid #1D61E7;}
	.head-nav>view {padding-bottom: 10rpx;}
	.content {height: 100%; padding-bottom: 20rpx;}
</style>