car-wash-front/src/pages/z-common/faq/index.vue

<template>
  <view class="page">
    <view v-if="state.questions.length <= 0" class="flex-center mt-40 animation-loading">
      <uv-icon name="photo"></uv-icon>
    </view>
    <view class="sheet">
      <view class="sheet_bar" v-for="(item, index) in state.questions" :key="index">
        <view class="head" @click="toggle(index)">
          <view class="pt-32 pb-32 flex-align-center">
            <view class="fs-28 fw-500 color-000">{{ item.question }}</view>
            <view
                class="width-40 ml-auto flex-end flex-shrink transition"
                :style="{
                transform: item.open ? 'rotate(180deg)' : 'rotate(0deg)',
              }"
            >
              <uv-icon name="arrow-down"></uv-icon>

            </view>
          </view>
        </view>
        <view :class="['body', item.open ? 'body-open' : 'body-hidden']">
          <view
              v-for="(answerItem, answerIndex) in item.answer"
              :key="answerIndex"
              :class="[
              'fs-28',
              'lh-48',
              'color-666',
              answerIndex === 0 ? 'mt-0' : 'mt-10',
            ]"
          >{{ answerItem }}
          </view
          >
        </view>
      </view>
    </view>
    <view
        class="flex-center flex-column contact mt-20"
        hover-class="hover-scale"
        @click="call"
        v-if="state.questions.length"
    >
      <image
          class="width-96"
          mode="widthFix"
          src="/static/images/contact-customer.png"
      />
      <view class="mt-16 color-666 fs-28">电话客服</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onHide, onShow} from "@dcloudio/uni-app";
import {reactive} from "vue";
import {body} from "@/utils/https"


const initState = () => ({
  questions: [] as any[],
  servicerPhone: "",
})

const state = reactive(initState())

const call = () => {
  uni.makePhoneCall({
    phoneNumber: state.servicerPhone,
  });
};

const toggle = (index: number) => {
  state.questions = state.questions.map((item, i) => {
    return {
      ...item,
      open: item.open ? false : i === index,
    };
  });
};

onShow((options) => {
  if (options) {
    state.servicerPhone = options.service;
  }
  body(`faq/list`).then((res: any) => {
    state.questions = res.list;
  })
});

onHide(() => {
  Object.assign(state, initState());
})
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: #f6f7fa;
  box-sizing: border-box;
  padding: 40rpx 32rpx;
}

.contact {
  height: 216rpx;
  border-radius: 24rpx;
  background: #fff;
}

.sheet {
  box-sizing: border-box;
  border-radius: 24rpx;
  background: #fff;
  overflow: hidden;

  &_bar {
    .head {
      padding: 0rpx 24rpx;
      box-sizing: border-box;

      & > view {
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      }
    }

    .body {
      box-sizing: border-box;
      background-color: rgba(52, 125, 255, 0.06);
      transition: all 0.3s;
      padding: 0rpx 24rpx;
    }

    .body-hidden {
      height: 0px;
      overflow: hidden;
    }

    .body-open {
      height: auto;
      padding-top: 24rpx;
      padding-bottom: 24rpx;
    }

    &:last-child {
      .head {
        & > view {
          border-bottom: none;
        }
      }
    }
  }
}
</style>