公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

191 lines
4.0 KiB

<!--常见疑问-->
<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>
3 years ago
<view style="width: 662rpx;height: 0.5rpx;position: relative;left: 20rpx;background-color: #E2E2E2;margin-top: 40rpx;" />
</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>
3 years ago
<view style="width: 100%;height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;"
@click="onTouchThisItem(index)"
>
3 years ago
<text class="content_title">{{item.title}}</text>
<u-icon name="arrow-right" customStyle="margin-right: 20rpx;"/>
</view>
3 years ago
<view v-if="index<2" style="width: 662rpx;height: 0.5rpx;position: relative;left: 20rpx;background-color: #E2E2E2;" />
</view>
</view>
</view>
</template>
<script>
3 years ago
var mainPageData = getApp().globalData.mainPageData;
var questions = [];
var arr = Array.from(mainPageData.question);
if(arr.length > 4){
//取前面三个
for(let i = 0;i<4;i++){
questions.push(arr[i]);
}
}else{
questions = arr;
}
export default {
name:"CommonQuestion",
data() {
return {
3 years ago
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;
3 years ago
height: auto;
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;
3 years ago
height: auto;
//background-color: #39B54A;
position: relative;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.cell_item{
width: 702rpx;
3 years ago
height: 100rpx;
//background-color: #0081FF;
border-radius: 20rpx;
position: relative;
}
.content_title{
height: 33rpx;
3 years ago
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
opacity: 1;
margin-left: 20rpx;
}
</style>