214 lines
8.5 KiB
Vue
214 lines
8.5 KiB
Vue
<template>
|
|
<view class="page">
|
|
<uni-nav-bar :title="$t('Questionnaire.title')" :border="false" :shadow="false" :fixed="true"
|
|
backgroundColor="#fff"></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.questionnaire.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;" 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.questionnaire.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
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo'])
|
|
},
|
|
//第一次加载
|
|
onLoad(e) {
|
|
|
|
},
|
|
//页面显示
|
|
onShow() {
|
|
uni.showLoading({
|
|
title: this.$t('loading')
|
|
})
|
|
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){
|
|
this.list = res.data.data;
|
|
uni.hideLoading();
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
});
|
|
if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
|
|
}else{
|
|
let data2 = {
|
|
page: this.par.page,
|
|
limit: this.par.limit,
|
|
lang: this.$i18n.locale,
|
|
step: 'progress'
|
|
};
|
|
this.$http.post('/api/server/list', data2).then(res => {
|
|
if(res.code == 0){
|
|
this.list1 = res.data.data;
|
|
}
|
|
}).catch(err => {
|
|
});
|
|
let data1 = {
|
|
page: this.par.page,
|
|
limit: this.par.limit,
|
|
lang: this.$i18n.locale,
|
|
step: 'done'
|
|
};
|
|
this.$http.post('/api/server/list', data1).then(res => {
|
|
if(res.code == 0){
|
|
this.list2 = res.data.data;
|
|
}
|
|
}).catch(err => {
|
|
});
|
|
}
|
|
|
|
},
|
|
//方法
|
|
methods: {
|
|
checkIndex(index) {
|
|
this.navIndex = index;
|
|
},
|
|
onTokenJump(url) {
|
|
this.judgeLogin(() => {
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
});
|
|
},
|
|
},
|
|
//页面隐藏
|
|
onHide() {},
|
|
//页面卸载
|
|
onUnload() {},
|
|
//页面下来刷新
|
|
onPullDownRefresh() {},
|
|
//页面上拉触底
|
|
onReachBottom() {},
|
|
//用户点击分享
|
|
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> |