CalendarForm.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view class="com-calendar-form" v-if="info">
  3. <view class="date">{{info.tripDate}}</view>
  4. <view class="title">{{info.intro}}</view>
  5. <view class="content">
  6. <rich-text :nodes="info.content"></rich-text>
  7. <view class="btn" v-if="info.path!=''" >
  8. <view class="hx-btn" v-if="info.userTicket" @click="onViewQrCode(info.userTicket.hxCode)">
  9. 查看核销码
  10. </view>
  11. <view v-else></view>
  12. <view @click="onViewPage(info.path)" class="link">立即访问</view>
  13. </view>
  14. </view>
  15. <uni-popup ref="qrForm">
  16. <view class="qr-code" >
  17. <view class="qr-box">
  18. <view class="qrcode">
  19. <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
  20. <view v-for="(col, colI) in row" :key="colI">
  21. <view v-if="col.isBlack" style="width: 5px;height: 5px;background-color: black;">
  22. <!-- 黑色码点 -->
  23. </view>
  24. <view v-else style="width: 5px;height: 5px;background-color: white;">
  25. <!-- 白色码点 -->
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="qr-text">核销码:{{qrText}}</view>
  32. </view>
  33. </uni-popup>
  34. </view>
  35. </template>
  36. <script>
  37. import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
  38. export default {
  39. name:"CalendarForm",
  40. props:{
  41. info:{
  42. type:Object,
  43. default:()=>{
  44. return null;
  45. }
  46. }
  47. },
  48. watch:{
  49. 'info':{
  50. handler(val){
  51. console.log("val",val);
  52. },
  53. deep:true,
  54. immediate:true,
  55. }
  56. },
  57. data() {
  58. return {
  59. qrText:'二维码内容',
  60. modules: [],
  61. };
  62. },
  63. methods:{
  64. //查看二维码
  65. onViewQrCode(e){
  66. let _this=this;
  67. _this.qrText=e;
  68. // 获取uQRCode实例
  69. const qr = new UQRCode();
  70. qr.data = e+"&T";
  71. qr.make();
  72. _this.modules = qr.modules;
  73. _this.$refs.qrForm.open("center");
  74. },
  75. onViewPage(url){
  76. uni.navigateTo({
  77. url:url,
  78. })
  79. }
  80. },
  81. }
  82. </script>
  83. <style lang="scss">
  84. @import './CalendarForm.scss'
  85. </style>