|
|
|
<!--常见疑问-->
|
|
|
|
<template name="CommonQuestion">
|
|
|
|
<view class="main">
|
|
|
|
<view class="top">
|
|
|
|
<text class="top_title">常见疑问</text>
|
|
|
|
<image class="imageOfWenti" src="@/static/images/mainview/wenti.png" mode="aspectFit"/>
|
|
|
|
<view class="top_change_area" @click="getRandomShowItems">
|
|
|
|
<image src="@/static/images/mainview/huan.png" class="imageOfHuan" mode="aspectFit">
|
|
|
|
<text class="text_huan">换一换</text>
|
|
|
|
</view>
|
|
|
|
<u-line color="#E2E2E2" length="662rpx" customStyle="position: absolute;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="99rpx 0 0 0"></u-line>
|
|
|
|
</view>
|
|
|
|
<view class="cell_group">
|
|
|
|
<u-skeleton v-if="mainPageData.question.length == 0"
|
|
|
|
rows="4"
|
|
|
|
:loading="true"
|
|
|
|
:title="false"
|
|
|
|
rowsHeight="80rpx"
|
|
|
|
rowsWidth="702rpx"
|
|
|
|
></u-skeleton>
|
|
|
|
<view class="cell_item" v-for="(item,index) in questions" :key="index" v-else>
|
|
|
|
<view style="width: 100%;height: 80rpx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;"
|
|
|
|
@click="onTouchThisItem(index)"
|
|
|
|
>
|
|
|
|
<text class="content_title">{{item.textmsg}}</text>
|
|
|
|
<u-icon name="arrow-right" customStyle="margin-right: 20rpx;"/>
|
|
|
|
</view>
|
|
|
|
<u-line color="#E2E2E2" length="662rpx" customStyle="border: 1px solid #E2E2E2;margin-left:20rpx;" :hairline="true"></u-line>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var questions = [];
|
|
|
|
import HelpItem from "@/components/HelpItem/HelpItem.vue"
|
|
|
|
export default {
|
|
|
|
name:"CommonQuestion",
|
|
|
|
components:{
|
|
|
|
HelpItem
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
mainPageData : getApp().globalData.mainPageData,
|
|
|
|
questions,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getRandomShowItems();
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
/**
|
|
|
|
* 获取随机显示的内容
|
|
|
|
*/
|
|
|
|
getRandomShowItems(){
|
|
|
|
this.questions = [];
|
|
|
|
var arr = [];
|
|
|
|
arr = Array.from(this.mainPageData.question);
|
|
|
|
var last = 4;
|
|
|
|
var len = arr.length;
|
|
|
|
if(len < last){
|
|
|
|
this.questions = arr;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
while(last > 0){
|
|
|
|
len = arr.length;
|
|
|
|
if(len == 0){
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
var index = this.$utils.random(0,len);
|
|
|
|
this.questions.push(arr[index]);
|
|
|
|
arr.splice(index,1);
|
|
|
|
last -= 1;
|
|
|
|
//console.log(last);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onTouchThisItem(index){
|
|
|
|
var data = this.questions[index];
|
|
|
|
console.log("点击了问题:",data);
|
|
|
|
getApp().globalData.showingSkipData = data;
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/pages/SkipView/SkipView'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.main{
|
|
|
|
width: 702rpx;
|
|
|
|
height: 460rpx;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
opacity: 1;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
|
|
.top{
|
|
|
|
width: 702rpx;
|
|
|
|
height: 99rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
position: relative;
|
|
|
|
//background-color: #8DC63F;
|
|
|
|
}
|
|
|
|
.top_title{
|
|
|
|
width: 144rpx;
|
|
|
|
height: 50rpx;
|
|
|
|
font-size: 36rpx;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #333333;
|
|
|
|
opacity: 1;
|
|
|
|
position: relative;
|
|
|
|
left: 16rpx;
|
|
|
|
top: 24rpx;
|
|
|
|
}
|
|
|
|
.imageOfWenti{
|
|
|
|
width: 37rpx;
|
|
|
|
height: 37rpx;
|
|
|
|
position: absolute;
|
|
|
|
top: 32rpx;
|
|
|
|
left: 174rpx;
|
|
|
|
}
|
|
|
|
///顶部点击换一换的区域
|
|
|
|
.top_change_area{
|
|
|
|
width: 132rpx;
|
|
|
|
height: 99rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
//background-color: #A5673F;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
.imageOfHuan{
|
|
|
|
width: 32rpx;
|
|
|
|
height: 27rpx;
|
|
|
|
position: absolute;
|
|
|
|
right: 99rpx;
|
|
|
|
top: 36rpx;
|
|
|
|
}
|
|
|
|
///换一换
|
|
|
|
.text_huan{
|
|
|
|
width: 66rpx;
|
|
|
|
height: 30rpx;
|
|
|
|
font-size: 22rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #999999;
|
|
|
|
opacity: 1;
|
|
|
|
position: absolute;
|
|
|
|
top: 34rpx;
|
|
|
|
right: 22rpx;
|
|
|
|
}
|
|
|
|
.cell_group{
|
|
|
|
width: 702rpx;
|
|
|
|
height: 341rpx;
|
|
|
|
//background-color: #39B54A;
|
|
|
|
position: relative;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.cell_item{
|
|
|
|
width: 702rpx;
|
|
|
|
height: 85rpx;
|
|
|
|
//background-color: #0081FF;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.content_title{
|
|
|
|
height: 33rpx;
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-family: PingFang SC;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #333333;
|
|
|
|
opacity: 1;
|
|
|
|
margin-left: 20rpx;
|
|
|
|
}
|
|
|
|
</style>
|