help.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="container">
  3. <view class="title">
  4. 请选择问题类型<text style="color: #d77958;display: inline-block;margin-left: 4rpx;">*</text>
  5. </view>
  6. <van-collapse :value="activeNames" @change="onChange">
  7. <view class="" v-for=" item in commomProblems" :key="index">
  8. <van-collapse-item :name="index" class="problem-item" content-class>
  9. <view slot="title">
  10. <view class="service-title" style="height: 60rpx;">
  11. {{ item.problem_name }}
  12. </view>
  13. </view>
  14. {{item.problem_result}}
  15. </van-collapse-item>
  16. </view>
  17. </van-collapse>
  18. <view class="submit-btn" @tap="toService">在线客服</view>
  19. </view>
  20. </template>
  21. <script>
  22. var util = require('../../../utils/util.js');
  23. var api = require('../../../config/api.js');
  24. var app = getApp();
  25. export default {
  26. data() {
  27. return {
  28. commomProblems: [],
  29. activeNames: ['1'],
  30. };
  31. },
  32. onLoad: function() {},
  33. onReady: function() {},
  34. onShow: function() {
  35. let that = this
  36. util.request(
  37. api.getProblems
  38. ).then(function(res) {
  39. if (res.errno === 0) {
  40. that.setData({
  41. commomProblems: res.data
  42. })
  43. }
  44. });
  45. },
  46. /**
  47. * 生命周期函数--监听页面隐藏
  48. */
  49. onHide: function() {},
  50. /**
  51. * 生命周期函数--监听页面卸载
  52. */
  53. onUnload: function() {},
  54. /**
  55. * 页面相关事件处理函数--监听用户下拉动作
  56. */
  57. onPullDownRefresh: function() {},
  58. /**
  59. * 页面上拉触底事件的处理函数
  60. */
  61. onReachBottom: function() {},
  62. /**
  63. * 用户点击右上角分享
  64. */
  65. onShareAppMessage: function() {},
  66. methods: {
  67. onChange(event) {
  68. console.log("event.detail", event.detail);
  69. this.setData({
  70. activeNames: event.detail,
  71. });
  72. },
  73. toService() {
  74. uni.navigateTo({
  75. url: "/pages/im/im"
  76. })
  77. }
  78. }
  79. };
  80. </script>
  81. <style>
  82. .container {
  83. width: 720rpx;
  84. border-radius: 30rpx;
  85. margin: 30rpx auto;
  86. }
  87. .title {
  88. background: #fff;
  89. height: 130rpx;
  90. line-height: 130rpx;
  91. font-weight: bold;
  92. padding-left: 22rpx;
  93. border-radius: 30rpx 30rpx 0 0;
  94. border-bottom: 1rpx #999 solid;
  95. font-size: 32rpx;
  96. }
  97. .problem-item {
  98. height: 100rpx !important;
  99. }
  100. .submit-btn {
  101. text-align: center;
  102. color: #d77958;
  103. margin: 120rpx 26rpx 60rpx;
  104. width: 650rpx;
  105. height: 90rpx;
  106. line-height: 90rpx;
  107. border-radius: 90rpx;
  108. font-size: 34rpx;
  109. border: 1rpx solid #d77958;
  110. }
  111. </style>