189 lines
7.4 KiB
Vue
189 lines
7.4 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<nav-bar title="Questionnaire" bgColor="#fff"></nav-bar>
|
||
|
|
<view>
|
||
|
|
<view class="head-nav">
|
||
|
|
<view class="tab" :class="navIndex==0?'activite':''" @click="checkIndex(0)">Data Market</view>
|
||
|
|
<view class="tab" :class="navIndex==1?'activite':''" @click="checkIndex(1)">In progress</view>
|
||
|
|
<view class="tab" :class="navIndex==2?'activite':''" @click="checkIndex(2)">done</view>
|
||
|
|
<view style="clear: both;"></view>
|
||
|
|
</view>
|
||
|
|
<!-- 内容切换 -->
|
||
|
|
<view class="content" v-if="navIndex==0">
|
||
|
|
<view style="width: 94%; margin: 10px 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: 12px; font-weight: 400; color: #999; line-height: 20px;">
|
||
|
|
<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: 35px; margin-left: 5%;">
|
||
|
|
Answered: <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;">
|
||
|
|
reward: <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 style="text-align: center; padding-bottom: 80px;" 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: 14px; font-weight: 400;">No data available</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: 14px;color: #999999;">Answer time: {{item.created_at.slice(0, 19)}}</view>
|
||
|
|
<view style="text-align: right;"><button type="primary" class="b" style="float: right;" @click="onTokenJump('/pages/questionnaire/answer?id='+item.id)">Details</button></view>
|
||
|
|
<view style="clear: both;"></view>
|
||
|
|
</view>
|
||
|
|
<view style="text-align: center; padding-bottom: 80px;" 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: 14px; font-weight: 400;">No data available</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content" v-if="navIndex==2">
|
||
|
|
<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: 14px;color: #999999;">Answer time: {{item.created_at.slice(0, 19)}}</view>
|
||
|
|
<view style="text-align: right;"><button type="primary" class="b" style="float: right;" @click="onTokenJump('/pages/questionnaire/answer?id='+item.id)">Details</button></view>
|
||
|
|
<view style="clear: both;"></view>
|
||
|
|
</view>
|
||
|
|
<view style="text-align: center; padding-bottom: 80px;" 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: 14px; font-weight: 400;">No data available</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</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:'Array 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{
|
||
|
|
this.$http.post('/api/server/list', data).then(res => {
|
||
|
|
if(res.code == 0){
|
||
|
|
this.list1 = 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 0px !important;}
|
||
|
|
::v-deep uni-slider .uni-slider-tap-area{padding: 4rpx 0rpx !important;}
|
||
|
|
|
||
|
|
.v1{border-bottom: 1px solid #ddd; background-color: #fff; padding: 10px;}
|
||
|
|
.v1 .row{margin-top: 15px; border-radius: 20px;}
|
||
|
|
.v1 .row .i{width: 80px; height: 80px; margin: auto;}
|
||
|
|
.v1 .row .title{font-weight: 500; font-size: 16px; color: #333;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
|
||
|
|
.v2{ border-bottom: 1px solid #ddd; background-color: #fff; padding: 10px; width: 94%; margin: 0rpx auto; border-radius: 40rpx;}
|
||
|
|
.v2 .title{font-weight: 600; font-size: 16px; color: #333;}
|
||
|
|
.w{background-color: #F8F8F8; border-radius: 10px; padding: 20px 10px;}
|
||
|
|
.w .t{text-align: center; margin-top: 10px; font-size: 14px;}
|
||
|
|
.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: 2px solid #1D61E7;}
|
||
|
|
.head-nav>view {padding-bottom: 10rpx;}
|
||
|
|
.content {height: 100%; padding-bottom: 20rpx;}
|
||
|
|
</style>
|