节点中心

2021-09-25 09:51:37 +08:00
parent 8ab145ea73
commit 1d22ce7d13
30 changed files with 1571 additions and 5 deletions
--- a/pages/user/help.vue
+++ b/pages/user/help.vue
@@ -0,0 +1,118 @@
+<template>
+	<view>
+        <view class="helpCont">
+            <view class="helpCont-list" :class="{active : item.spread}" v-for="(item, index) in helpList" :key="index" @click="showClick(item, index)">
+                <view class="helpCont-name">
+                    <view class="helpCont-tips">{{ index + 1 }}</view>
+                    {{ item.title }}
+                    <image class="helpCont-img" src="/static/user/user-more.png" :class="{active : item.spread}" mode="aspectFill"></image>
+                </view>
+                <view class="helpCont-text">
+                    {{ item.description }}
+                </view>
+            </view>
+        </view>
+	</view>
+</template>
+
+<script>
+    import { userHelp } from '@/apis/interfaces/user'
+	export default {
+		data() {
+			return {
+				helpList: [],   //帮助中心列表
+                showList: false // 显示子内容
+			};
+		},
+        onLoad() {
+            // 获取帮助中心
+            this.helpInfo()
+        },
+        methods: {
+            // 帮助中心
+            helpInfo(){
+                userHelp().then(res => {
+                    console.log(res)
+                    res.forEach((value, index) => {
+                        res[index].spread = false
+                        res[0].spread = true
+                    });
+                    this.helpList = res
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: err.message
+                    })
+                })
+            },
+            
+            // 展开帮助中心-内容
+            showClick(item, index) {
+                this.helpList.forEach(i => {
+                    if (i.spread !== this.helpList[index].spread) {
+                        i.spread = false;
+                    }
+                })
+                item.spread = !item.spread
+            }
+        }
+	}
+</script>
+
+<style lang="scss">
+    .helpCont {
+        margin: $margin;
+        background-color: $uni-bg-color;
+        padding: $padding + 10 $padding + 10 5rpx $padding + 10;
+        box-sizing: border-box;
+        border-radius: $radius;
+        .helpCont-list {
+            margin-bottom: $margin;
+            border-bottom: 1rpx solid #f3f3f3;
+            font-size: $uni-font-size-base;
+            height: 60rpx;
+            overflow: hidden;
+            &.active {
+                height: auto;
+            }
+            &:last-child {
+                border-bottom: none;
+                margin-bottom: 0;
+            }
+            .helpCont-name {
+                font-weight: 700;
+                display: flex;
+                line-height: 40rpx;
+                margin-bottom: $margin;
+                position: relative;
+                .helpCont-tips {
+                    width: 40rpx;
+                    height: 40rpx;
+                    line-height: 40rpx;
+                    margin-right: 10rpx;
+                    text-align: center;
+                    background-image: linear-gradient(to left, #7c52fc, #976dff);
+                    color: $uni-text-color-inverse;
+                    transform: scale(0.83);
+                     border-radius: $uni-border-radius-base;
+                }
+                .helpCont-img {
+                    position: absolute;
+                    right: 0;
+                    top: 8rpx;
+                    width: 26rpx;
+                    height: 26rpx;
+                    &.active {
+                        transform:rotate(90deg);
+                    }
+                }
+            }
+            .helpCont-text {
+                font-size: $title-size-sm;
+                line-height: 40rpx;
+                color: $text-gray;
+                padding-bottom: $padding;
+            }
+        }
+    }
+</style>