1. <view class='container'>
  2. <view class='title'>请选择问题</view>
  3. <!-- checkbox组 -->
  4. <checkbox-group bindchange="checkboxChange">
  5. <view class='box1'>
  6. <view class="box2" wx:for="{{items}}">
  7. <view class='box3'>
  8. <view>
  9. <checkbox class='checkbox' value="{{item.value}}" checked="{{item.checked}}" />
  10. </view>
  11. <view>{{item.name}}</view>
  12. </view>
  13. </view>
  14. </view>
  15. </checkbox-group>
  16. <!-- 按钮 -->
  17. <view class='btn'>
  18. <button class='yes' wx:if="{{wenti}}" bindtap='submit'>提交</button>
  19. <button class='no' wx:else>提交</button>
  20. </view>
  21. </view>
  1. .container {
  2. padding-top: 100rpx;
  3. }
  4. .title {
  5. font-size: 40rpx;
  6. font-weight: bold;
  7. margin-left: 50rpx;
  8. margin-bottom: 60rpx;
  9. }
  10. .box3 {
  11. display: flex;
  12. flex-direction: column;
  13. align-items: center;
  14. width: 100%;
  15. font-size: 34rpx;
  16. }
  17. .box1 {
  18. display: flex;
  19. flex-wrap: wrap;
  20. flex-direction: row;
  21. justify-content: space-between;
  22. width: 100%;
  23. }
  24. /* 未选中的 背景样式 */
  25. .box2 {
  26. width: 30%;
  27. margin-bottom: 30rpx;
  28. }
  29. .checkbox .wx-checkbox-input {
  30. border-radius: 10rpx; /* 圆角 */
  31. width: 100rpx; /* 背景的宽 */
  32. height: 100rpx; /* 背景的高 */
  33. border: none;
  34. background: #eee;
  35. margin: 20rpx;
  36. }
  37. /* 选中后的 背景样式 (背景 无边框 可根据UI需求自己修改) */
  38. .checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  39. border: none;
  40. background: #86ca6b;
  41. }
  42. /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
  43. .checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  44. border-radius: 50%; /* 圆角 */
  45. width: 100rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  46. height: 100rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  47. line-height: 100rpx;
  48. text-align: center;
  49. font-size: 40rpx; /* 对勾大小 30rpx */
  50. color: #fff; /* 对勾颜色 白色 */
  51. background: transparent;
  52. transform: translate(-50%, -50%) scale(1);
  53. -webkit-transform: translate(-50%, -50%) scale(1);
  54. }
  55. .btn {
  56. position: fixed;
  57. left: 30rpx;
  58. right: 30rpx;
  59. bottom: 70rpx;
  60. }
  61. .btn .yes {
  62. font-size: 36rpx;
  63. color: #fff;
  64. width: 100%;
  65. height: 100rpx;
  66. line-height: 100rpx;
  67. border-radius: 10rpx;
  68. border: none;
  69. background: #409eff;
  70. }
  71. .btn .no {
  72. font-size: 36rpx;
  73. color: #666;
  74. width: 100%;
  75. height: 100rpx;
  76. line-height: 100rpx;
  77. border-radius: 10rpx;
  78. border: none;
  79. background: #eee;
  80. }
  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. items: [{
  7. name: '充电线',
  8. value: '充电线'
  9. },
  10. {
  11. name: '硬件损坏',
  12. value: '硬件损坏',
  13. },
  14. {
  15. name: '不来电',
  16. value: '不来电'
  17. },
  18. {
  19. name: '设备掉线',
  20. value: '设备掉线'
  21. },
  22. {
  23. name: '其他',
  24. value: '其他'
  25. },
  26. {
  27. name: '其他',
  28. value: '其他'
  29. },
  30. ],
  31. wenti: false,
  32. category: [],
  33. },
  34. //获取选择问题
  35. checkboxChange: function(event) {
  36. let length = event.detail.value.length
  37. if (length) {
  38. this.setData({
  39. wenti: true,
  40. category: event.detail.value
  41. })
  42. } else {
  43. this.setData({
  44. wenti: false,
  45. category: event.detail.value
  46. })
  47. }
  48. },
  49. //提交问题
  50. submit: function() {
  51. wx.showLoading({
  52. title: '数据提交中...',
  53. })
  54. let that = this
  55. let device_code = wx.getStorageSync('params')
  56. let category = that.data.category
  57. //请求下单
  58. charge.addFault(device_code, category, (res) => {
  59. wx.hideLoading()
  60. wx.showModal({
  61. title: '提示',
  62. content: '故障已提交,设备会自动断电!',
  63. showCancel: false,
  64. success: function (res) {
  65. if (res.confirm) {
  66. wx.switchTab({
  67. url: '../index/index',
  68. })
  69. } else if (res.cancel) {
  70. wx.switchTab({
  71. url: '../index/index',
  72. })
  73. } else {
  74. wx.switchTab({
  75. url: '../index/index',
  76. })
  77. }
  78. }
  79. })
  80. })
  81. }
  82. })

分类: 小程序

标签: