adsRecommend.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view class="recommend acea-row row-between-wrapper">
  3. <view class="pictrue acea-row row-center-wrapper" v-if="isIframe && !recommendList.length">
  4. <view style="text-align: center;">
  5. <text class="iconfont icon-icon25201"></text>
  6. <view>{{$t(`广告位`)}}</view>
  7. </view>
  8. </view>
  9. <view class="pictrue" v-for="(item, index) in recommendList" :key="index" @click="goDetail(item)" v-if="recommendList.length && isShow && !isIframe">
  10. <image :src="item.img"></image>
  11. </view>
  12. <view class="pictrue" v-for="(item, index) in recommendList" :key="index" @click="goDetail(item)" v-if="recommendList.length && isIframe">
  13. <image :src="item.img"></image>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. let app = getApp();
  19. import {
  20. goPage
  21. } from '@/libs/order.js';
  22. export default {
  23. name: 'adsRecommend',
  24. props: {
  25. dataConfig: {
  26. type: Object,
  27. default: () => {}
  28. },
  29. },
  30. watch: {
  31. dataConfig: {
  32. immediate: true,
  33. handler(nVal, oVal) {
  34. if(nVal){
  35. this.recommendList = nVal.imgList.list;
  36. this.isShow = nVal.isShow.val;
  37. }
  38. }
  39. }
  40. },
  41. data() {
  42. return {
  43. recommendList: [],
  44. name:this.$options.name,//component组件固定写法获取当前name;
  45. isIframe:app.globalData.isIframe,//判断是前台还是后台;
  46. isShow:true//判断此模块是否显示;
  47. };
  48. },
  49. created() {
  50. },
  51. mounted() {
  52. },
  53. methods: {
  54. goDetail(item){
  55. goPage(item).then(res=>{
  56. uni.navigateTo({
  57. url: item.info[0].value
  58. })
  59. })
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="scss">
  65. .recommend{
  66. padding: 0 30rpx;
  67. margin-top: 26rpx;
  68. .pictrue{
  69. width: 338rpx;
  70. height: 206rpx;
  71. background-color: #ccc;
  72. border-radius: 8rpx;
  73. margin-bottom: 15rpx;
  74. image{
  75. width: 100%;
  76. height: 100%;
  77. }
  78. .iconfont{
  79. font-size: 50rpx;
  80. }
  81. }
  82. }
  83. .recommend .pictrue:nth-last-child(1) {
  84. margin-bottom: 0;
  85. }
  86. .recommend .pictrue:nth-last-child(2) {
  87. margin-bottom: 0;
  88. }
  89. </style>