yy_goods.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div class="module-item-goods" :style="!module.base.m ? 'margin-top:0' : ''" v-if="shopList.length>0">
  3. <div class="item-goods-con" :style="style">
  4. <moduleBg :base="module.base" />
  5. <moduleTwtit :type="module.type" :title="module.title" v-if="module.title.s" />
  6. <div class="item-goods-style1 style2" :class="module.base.s == 1 ? 'style2' : ''">
  7. <div class="item" v-for="(item, index) in shopList" :key="index"
  8. @click="$util.openYyGoods(shopList,index)">
  9. <div class="pic">
  10. <img :src="url+item.thumb" alt="" />
  11. </div>
  12. <div class="c" style="padding: 0 5px;">
  13. <div class="tit" v-if="module.base.t.s">
  14. <moduleText :text="module.base.t" :name="item.name" />
  15. </div>
  16. <div class="price" v-if="module.base.sjg || module.base.sgm">
  17. <template v-if="module.base.sjg">
  18. <span>
  19. <b>¥{{ item.price }}</b>
  20. </span>
  21. <span v-if="item.type == 2">
  22. <b>{{ item.priceDescribe }}</b>
  23. </span>
  24. </template>
  25. <template v-if="module.base.sgm">
  26. <!-- <button >预约</button> -->
  27. <button class="yy_button flex-center" size="mini" type="danger">预约</button>
  28. </template>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="noadd" v-if="shopList.length == 0">
  33. 暂无预约商品
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import moduleBg from './bg.vue';
  41. import moduleText from './text.vue';
  42. import moduleTwtit from './twtit.vue';
  43. export default {
  44. props: ['module'],
  45. components: {
  46. moduleBg,
  47. moduleText,
  48. moduleTwtit
  49. },
  50. data() {
  51. return {
  52. url: getApp().globalData.URL,
  53. shopList: [],
  54. };
  55. },
  56. computed: {
  57. style() {
  58. if (this.module.base.fc != '') {
  59. return `color:${this.module.base.fc}`;
  60. }
  61. }
  62. },
  63. mounted() {
  64. this.getGoodsList();
  65. },
  66. methods: {
  67. //获取商品列表
  68. getGoodsList() {
  69. var shopList = [];
  70. // console.log(this.module, "获取商品列表")
  71. this.$http.request('template/yygoods_lists', {
  72. store_id: this.$store.state.store_id,
  73. controller: "admin",
  74. page: 1,
  75. limit: 6,
  76. }, "", "", "").then(t => {
  77. if (t.code == 200) {
  78. for (let i of t.data) {
  79. shopList.push({
  80. name: i.name,
  81. price: i.price,
  82. thumb: i.cover_pic,
  83. id: i.id
  84. })
  85. }
  86. this.module.list = shopList;
  87. this.shopList= shopList;
  88. } else {
  89. this.shopList= [];
  90. this.module.list = shopList;
  91. }
  92. })
  93. },
  94. },
  95. };
  96. </script>
  97. <style>
  98. @import url("./goods.css");
  99. .yy_button{
  100. color: #FFF;border-radius: 40px;background-color: #F56C6C; border-color: #F56C6C;
  101. }
  102. .module-item-goods {
  103. margin-top: 10px;
  104. }
  105. .scroll-true {
  106. white-space: nowrap;
  107. overflow-x: auto;
  108. }
  109. .scroll-true .item {
  110. display: inline-block;
  111. width: 30%;
  112. margin-right: 10px;
  113. }
  114. .el-scrollbar__wrap {
  115. overflow-y: hidden;
  116. }
  117. .pic_img {
  118. width: 106px;
  119. height: 106px;
  120. }
  121. .item-goods-style1 {
  122. position: relative;
  123. padding: 20rpx 0;
  124. }
  125. .noadd {
  126. position: relative;
  127. color: #999;
  128. }
  129. </style>