assessment-front/pages_order/service/index.vue

<template>
  <view class="page__view">

    <navbar title="咨询客服" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />

    <!-- todo: check is swiper ? -->
    <!-- <image class="bg" src="" mode="widthFix"></image> -->
    <view class="flex bg">
      <view class="flex bg-content">
        <view class="text">
          <view class="title">Hi～,有什么可以帮您！</view>
          <view class="flex desc">
            <view class="line">工作时间：</view>
            <view class="line">8:00-12:00  13:00-17:30</view>
          </view>
        </view>
        <image class="icon" src="@/pages_order/static/service/icon-service.png" mode="widthFix"></image>
      </view>
    </view>

    <view class="main">
      <view class="content">
        <view class="flex card concat">
          <button plain class="flex flex-column btn" open-type="contact">
            <image class="icon" src="@/pages_order/static/service/icon-message.png" mode="widthFix"></image>
            <view>联系客服</view>
          </button>
          <button plain class="flex flex-column btn" @click="openQrPopup">
            <image class="icon" src="@/pages_order/static/service/icon-wx.png" mode="widthFix"></image>
            <view>添加微信</view>
          </button>
          <button plain class="flex flex-column btn" @click="openPhonePopup">
            <image class="icon" src="@/pages_order/static/service/icon-phone.png" mode="widthFix"></image>
            <view>电话咨询</view>
          </button>
        </view>
        <view class="card question">
          <view class="card-header">常见问题</view>
          <view class="flex row" v-for="item in list" :key="item.id" @click="jumpToQuestion(item.id)">
            <view>{{ item.question }}</view>
            <uv-icon name="arrow-right" color="#999999" size="33rpx"></uv-icon>
          </view>
        </view>
      </view>
    </view>

    <popupQrCode ref="popupQrCode"></popupQrCode>

    <popupPhone ref="popupPhone"></popupPhone>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  import popupQrCode from './popupQrCode.vue'
  import popupPhone from './popupPhone.vue'

  export default {
		mixins: [mixinsList],
    components: {
      popupQrCode,
      popupPhone,
    },
    data() {
      return {
				list: [],
        mixinsListApi: 'queryFaqList',
      }
    },
    methods: {
      openQrPopup() {
        this.$refs.popupQrCode.open()
      },
      openPhonePopup() {
        this.$refs.popupPhone.open()
      },
      jumpToQuestion(id) {
        let data = this.list.find(item => item.id === id)
        this.$store.commit('setCommonQuestion', data)
				uni.navigateTo({
					url: `/pages_order/service/commonQuestion?id=${id}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">
  .page__view {
    background: #F5F5F5;
    
    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .bg {
    // width: 100%;
    // height: auto;
    // min-height: 501rpx;
    width: 100%;
    height: 501rpx;
    background: linear-gradient(160deg, #014FA2 36%, #4C8FD6);
    padding: 0 104rpx 90rpx 65rpx;
    box-sizing: border-box;
    align-items: flex-end;

    &-content {
      width: 100%;
      justify-content: space-between;
    }

    .text {
      padding: 26rpx 0 34rpx 0;
      color: #FFFFFF;

      .title {
        font-size: 36rpx;
        font-weight: 600;
      }

      .desc {
        margin-top: 13rpx;
        font-size: 22rpx;

        .line + .line {
          margin-top: 11rpx;
        }
      }
    }

    .icon {
      width: 168rpx;
      height: auto;
    }
  }

  .main {
    width: 100%;
    padding: 0 28rpx 28rpx 28rpx;
    box-sizing: border-box;
    background: #F5F5F5;

    .content {
      transform: translateY(-64rpx);
    }
  }

  .card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 15rpx;
  }

  .card.concat {
    justify-content: space-between;
    width: 100%;
    padding: 55rpx 64rpx 26rpx 64rpx;
    box-sizing: border-box;

    .btn {
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
      border: none;

      .icon {
        width: 66rpx;
        height: auto;
      }
    }
  }

  .card.question {
    margin-top: 25rpx;
    padding: 34rpx 19rpx;
    box-sizing: border-box;

    .card-header {
      padding: 0 11rpx 11rpx 11rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #000000;
    }

    .row {
      margin-top: 22rpx;
      justify-content: space-between;
      padding: 17rpx 14rpx 17rpx 23rpx;
      font-size: 30rpx;
      color: #000000;
      border-bottom: 0.5rpx solid rgba($color: #707070, $alpha: 0.1);
    }
  }
</style>