yizhizan-h5/my/setting/feedbackIndex.vue

<!-- 帮助反馈页面 -->
<template>
  <view class="page-question">
    <!-- <view class="text-top">常见问题</view> -->

    <view class="bg-list">
      <view
        v-for="(item, index) in helpClassifyList"
        :key="index"
        :title="item.helpClassifyName"
        class="list-title"
      >
        <view
          class="flex align-center justify-between"
          @click.stop="openList(item, index)"
        >
          <view
            class="text-title"
            :style="{ color: item.id == 0 ? 'rgba(1, 107, 246, 1)' : '' }"
            >{{ item.helpClassifyName }}</view
          >
          <view @click.stop="openList(item, index)">
            <image
              src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/05/d56c02cad3db64b1874d01e0ceeb48e1.png"
              style="width: 21rpx; height: 15rpx"
              v-if="item.id == 0"
            ></image>
            <image
              src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/05/8ee353c9b70928dc4f81488e75121441.png"
              style="width: 21rpx; height: 15rpx"
              v-else
            ></image>
          </view>
        </view>
        <view
          v-for="(problemItem, problemIndex) in item.helpWordList"
          :key="problemIndex"
          class="list-question"
          hover-class="hover"
          @click="onClick(problemItem)"
          v-if="item.id == 0"
        >
          <view class="text-item">{{ problemItem.helpWordTitle }}</view>
          <!-- <view class="line" v-if="problemIndex!=item.helpWordList.length-1"></view> -->
        </view>
      </view>
    </view>
    <view class="bg-box">
      <view class="bg-white-box">
        <image
          src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/05/6ea8d56c2451479b6327c56e3c57e91c.png"
          class="image"
        ></image>
        <view class="text-feedback" hover-class="hover" @click="goChat">联系客服</view>

        <view class="vertical-line"></view>

        <image
          src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/05/aa32e4508c2505631a17402d4e086cda.png"
          class="image"
        ></image>
        <view class="text-feedback" hover-class="hover" @click="toFeedback"
          >我要反馈</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      helpClassifyList: [],
    };
  },
  onLoad() {
    this.getlist();
  },
  methods: {
    openList(item, index) {
      if (item.id === 1) {
        this.helpClassifyList[index].id = 0;
      } else {
        this.helpClassifyList[index].id = 1;
      }
      console.log(this.helpClassifyList);
      this.$forceUpdate();
    },
    getlist() {
      this.$Request.get("/app/helpWord/selectHelpList?types=1").then((res) => {
        if (res.code == 0) {
          this.helpClassifyList = res.data;
          this.helpClassifyList.map((item) => {
            item.id = 1;
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    onClick(item) {
      console.log(item);
      // return
      uni.navigateTo({
        url: "./helpDetail?item=" + encodeURIComponent(JSON.stringify(item)),
      });
    },
    // toFeedbackList() {
    // 	wx.openCustomerServiceChat({
    // 		extInfo: {
    // 			url: this.$queue.getData('ZXMessageLink')
    // 		},
    // 		corpId: 'wxc2cd198ca1931c49',
    // 		success(res) {}
    // 	})

    // },
    // 在线客服
    goChat() {
      let that = this;
      if (uni.getStorageSync("userType") == 1) {
        //用户端
        // #ifdef MP-WEIXIN
        wx.openCustomerServiceChat({
          extInfo: {
            url: that.$queue.getData("kefu"),
          },
          corpId: that.$queue.getData("kefuAppid"),
          success(res) {
            console.log(res);
          },
        });
        // #endif
        // #ifdef H5
        window.location.href = that.$queue.getData("kefu");
        // #endif
        // #ifdef APP
        let kefu = that.$queue.getData("kefu");
        console.log(kefu);
        plus.runtime.openURL(kefu, function (res) {});
        // #endif
      } else {
        //企业端
        // #ifdef MP-WEIXIN
        wx.openCustomerServiceChat({
          extInfo: {
            url: that.$queue.getData("kefuq"),
          },
          corpId: that.$queue.getData("kefuAppidq"),
          success(res) {
            console.log(res);
          },
        });
        // #endif
        // #ifdef H5
        window.location.href = that.$queue.getData("kefuq");
        // #endif
        // #ifdef APP
        let kefu = that.$queue.getData("kefuq");
        console.log(kefu);
        plus.runtime.openURL(kefu, function (res) {});
        // #endif
      }
    },
    toFeedback() {
      uni.navigateTo({
        url: "/my/feedback/index",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-question {
  padding: 16rpx 40rpx;
  box-sizing: border-box;
}

.bg-box {
  /* background-color: #ffffff; */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.bg-list {
  margin-bottom: 100rpx;
  background-color: #ffffff;
  padding: 34rpx 32rpx 36rpx 32rpx;
  box-sizing: border-box;
  border: 1rpx solid rgba(227, 231, 236, 1);
  border-radius: 12rpx;
  background: #fdfdfd;
}

.bg-white-box {
  background-color: #ffffff;
  margin: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
  border-radius: 20rpx;

  font-size: 32rpx;
}

.vertical-line {
  height: 20rpx;
  background-color: #cecece;
  width: 2rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #999999;
}

.text-title {
  color: rgba(29, 33, 41, 1);
  font-family: DM Sans;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 32rpx;
  letter-spacing: 0%;
  text-align: left;
}

.text-item {
  font-size: 24rpx;
  padding: 24rpx;
  color: #999999;
  box-sizing: border-box;
}

.list-title {
  margin-bottom: 24rpx;
}
.list-title:last-child {
  margin-bottom: 0;
}
.list-question {
  font-size: 28rpx;
}

.hover {
  background-color: #f5f5f5;
  opacity: 0.6;
}

.image {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

.text-feedback {
  padding: 20rpx;
  /* color: #000000; */
}

.text-top {
  margin: 30rpx;

  font-size: 34rpx;
}
</style>