car-wash-java/car-wash-mp/src/pages-user/feedback/index.vue

<template>
  <view class="page">
    <view class="sheet">
      <uv-list border>
        <uv-list-item
            border
            :title="item.title"
            clickable
            show-arrow
            @click="handleClickFaq(item)"
            :note="item.createTime"
            v-for="(item, index) in state.feedbackList" :key="index">
          <template #footer>
            <uv-tags text="已反馈" plain size="mini" type="warning" v-if="item.replyContent"></uv-tags>
            <uv-tags text="待反馈" plain size="mini" type="primary" v-else></uv-tags>
          </template>
        </uv-list-item>
      </uv-list>
    </view>


    <view
        class="flex-center flex-column contact mt-20"
        hover-class="hover-scale"
        @click="call"
    >

      <image
          @click="handleCallPhone"
          class="width-96"
          mode="widthFix"
          src="/static/contact-customer.png"/>

      <view class="mt-16 color-666 fs-28">电话客服</view>
    </view>

    <view class="feedback-plus" @click="handleAddFeedback">
      <uv-icon name="plus" color="#fff"></uv-icon>
    </view>

    <add ref="add_ref" @refresh="loadDataList"></add>
    <add ref="detail_ref"></add>
  </view>
</template>

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

import add from '@/pages-user/feedback/add.vue';
import {getServicePhone} from "@/utils/common";

const add_ref = ref()
const detail_ref = ref()

const initState = () => ({
  feedbackList: [
    // {
    //   title: '洗车扣费异常问题',
    //   status: 1,
    //   createTime: '2022-09-01 10:00:00',
    // },
    // {
    //   title: '洗车扣费异常问题',
    //   status: 1,
    //   createTime: '2022-09-01 10:00:00',
    // }
  ] as any[],
  servicerPhone: "",
})

const state = reactive(initState())

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

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

onShow(() => {
  let gd = getApp<any>().globalData;
  console.log(gd)
  state.servicerPhone = getServicePhone();
  // getApp<any>().globalData.config?.servicePhone;
  loadDataList()
});

const handleCallPhone = () => {
  let servicePhone = getServicePhone();
  uni.makePhoneCall({
    phoneNumber: servicePhone,
    fail: (error) => {
      console.log(error)
    }
  });
}

const loadDataList = () => {
  body(`/feedback/list`).then((res: any) => {
    state.feedbackList = res.list;
  })
}

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

const handleClickFaq = (item: any) => {
  detail_ref.value?.open(item, 'detail')
}

const handleAddFeedback = () => {
  add_ref.value?.open(null, 'add');
}
</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;
        }
      }
    }
  }
}

.feedback-plus {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  width: 90rpx;
  height: 90rpx;
  background: $uni-color-primary;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}
</style>