introduce.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view>
  3. <view style="position: fixed;z-index: 100;">
  4. <uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="详情"></uni-nav-bar>
  5. </view>
  6. <image :src="wormcasedata.img_urls" mode="" style="width: 100%;height: 320rpx;margin-top: 88rpx;"></image>
  7. <p class="name">{{wormcasedata.name}}</p>
  8. <view v-for="(item,index) in preventionArr" :key="index" class="prevention">
  9. <view class="prevention_title">
  10. <u-icon name="play-right-fill" size="24" color="#55A92D"></u-icon>
  11. <p>{{regexptitle[index]}}:</p>
  12. </view>
  13. <p class="prevention_con">{{item}}</p>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. wormcasedata:{},
  22. unititle:'',
  23. wormdata:{//虫子数据
  24. },
  25. disease:{//病害数据
  26. },
  27. preventionArr:[],
  28. regexptitle:[]
  29. }
  30. },
  31. methods: {
  32. async getIntroduce(data) {
  33. const res = await this.$myRequest({
  34. url: '/api/api_gateway?method=pest.pests.pests_info',
  35. data:{
  36. pest_id:data
  37. }
  38. })
  39. console.log(res)
  40. this.wormcasedata=res
  41. var regex2 = /\[(.+?)\]/g; // [] 中括号
  42. var str=this.wormcasedata.prevention
  43. var arr=str.match(regex2)
  44. var arrindex=[]
  45. for(var i=0;i<arr.length;i++){
  46. arrindex.push(str.indexOf(arr[i]))
  47. }
  48. for(var i=0;i<arr.length;i++){
  49. this.preventionArr.push(str.slice(arrindex[i]+arr[i].length,arrindex[i+1]))
  50. }
  51. for(var i=0;i<arr.length;i++){
  52. arr[i]=arr[i].slice(1,arr[i].length-1)
  53. }
  54. this.regexptitle=arr
  55. },
  56. clickLeft(){
  57. uni.navigateTo({
  58. url:"./wormcase?name="+this.unititle
  59. })
  60. }
  61. },
  62. onLoad(option){
  63. console.log(option)
  64. this.unititle=option.title
  65. this.getIntroduce(option.id)
  66. }
  67. }
  68. </script>
  69. <style lang="scss">
  70. .name{
  71. font-size: 34rpx;
  72. font-weight: 700;
  73. width: 95%;
  74. margin: 20rpx auto 0;
  75. }
  76. .prevention{
  77. font-size: 28rpx;
  78. color: #919191;
  79. width: 95%;
  80. margin: 20rpx auto;
  81. .prevention_title{
  82. display: flex;
  83. p{
  84. margin-left: 20rpx;
  85. color: #000000;
  86. font-size: 28rpx;
  87. font-weight: 700;
  88. }
  89. }
  90. .prevention_con{
  91. padding-left: 6%;
  92. }
  93. }
  94. </style>