index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <div class="peripheralService">
  3. <div class="peripheralBody">
  4. <van-tabs :active="active" @change="selectChange">
  5. <van-tab title="全部" :name="all"></van-tab>
  6. <van-tab :title="item.label" :name="item.value" v-for="item in serviceList"></van-tab>
  7. <!-- <van-tab title="干洗" :name="1"></van-tab>-->
  8. <!-- <van-tab title="维修" :name="2"></van-tab>-->
  9. <!-- <van-tab title="保洁" :name="3"></van-tab>-->
  10. <!-- <van-tab title="精装水" :name="4"></van-tab>-->
  11. <!-- <van-tab title="医疗" :name="5"></van-tab>-->
  12. </van-tabs>
  13. <div class="peripheralBox">
  14. <div class="peripheralItem" v-for="item in peripheralList" @tap="toDetail(item)">
  15. <div class="peripheralItemRow1">
  16. <span class="peripheralName">{{item.businessName}}</span>
  17. <span class="periTag">{{item.type}}</span>
  18. </div>
  19. <div class="peripheralItemRow2">入驻时间:{{item.releaseTime}}</div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. import { getByCodes,peripheryList } from "@/js_sdk/http";
  27. export default {
  28. name: "peripheralService",
  29. data(){
  30. return {
  31. dc_key: ['periphery_type', 'QUICK_SELECTION'],
  32. active: 0,
  33. type: '',
  34. peripheralList:[
  35. // {name:'福奈特洗衣店(基金PARK店)',type:'干洗'},
  36. // {name:'印彩图文广告(金融街店)',type:'打印'},
  37. ],
  38. params: {
  39. pageNum: 1,
  40. pageSize: 10,
  41. releaseType: 'periphery',
  42. status: 'published'
  43. },
  44. selectType:'',
  45. serviceList:[],
  46. dic_SelectList:[],
  47. all: null
  48. }
  49. },
  50. created(){
  51. this.getByCodes()
  52. this.$nextTick(()=>{
  53. this.active = 0
  54. })
  55. },
  56. onPullDownRefresh() {
  57. this.getByCodes()
  58. setTimeout(function () {
  59. uni.stopPullDownRefresh();
  60. }, 1000);
  61. },
  62. methods:{
  63. async getByCodes() {
  64. let data = await getByCodes(JSON.stringify(this.dc_key));
  65. this.dic_SelectList = this.$common.handleDicList(data);
  66. this.serviceList = this.dic_SelectList.periphery_type
  67. // console.log('this.serviceList',this.serviceList)
  68. this.selectChange({detail:{
  69. name:this.params.type
  70. }})
  71. },
  72. selectData(type) {
  73. console.log('this.active',this.active)
  74. console.log('this.type',type)
  75. const _this = this
  76. _this.params.type = type
  77. peripheryList(_this.params).then((res) => {
  78. if (res.data) {
  79. res.data.forEach(function(item) {
  80. const jsonMap = _this.getItemJson(item)
  81. // console.log('jsonMap',jsonMap)
  82. _this.peripheralList.push(jsonMap)
  83. })
  84. }
  85. // console.log(_this.peripheralList)
  86. })
  87. },
  88. selectChange(e) {
  89. console.log(e)
  90. this.peripheralList = []
  91. this.selectData(e.detail.name)
  92. },
  93. toDetail(item) {
  94. uni.navigateTo({
  95. url:'/pages/subPackages/peripheralService/detail?id='+item.id
  96. })
  97. },
  98. getItemJson: function(item) {
  99. item.releaseTime = this.$common.transDate(item.releaseTime)
  100. // item.type = this.dic_SelectList.periphery_type[item.type]
  101. let transformedObject = this.dic_SelectList.periphery_type.reduce((acc, obj) => {
  102. acc[obj.value] = obj.label;
  103. return acc;
  104. }, {'':'全部'});
  105. item.type = transformedObject[item.type]
  106. // console.log('this.dic_SelectList.periphery_type',transformedObject)
  107. return item
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss">
  113. .peripheralService{
  114. .peripheralBody{
  115. background: white;
  116. margin-top: 24rpx;
  117. padding: 32rpx;
  118. box-sizing: border-box;
  119. height: 1424rpx;
  120. .peripheralBox{
  121. margin-top: 8rpx;
  122. .peripheralItem{
  123. width: 686rpx;
  124. height: 172rpx;
  125. box-sizing: border-box;
  126. border-radius: 16rpx;
  127. background: #F5F7FA;
  128. padding: 32rpx;
  129. margin-top: 24rpx;
  130. .peripheralItemRow1{
  131. display: flex;
  132. justify-content: space-between;
  133. .peripheralName{
  134. color:#222222;
  135. font-size: 32rpx;
  136. font-weight: 600;
  137. }
  138. .periTag{
  139. display: flex;
  140. align-items: center;
  141. justify-content: center;
  142. width: 92rpx;
  143. height: 48rpx;
  144. background: rgba(3, 101, 249, 0.20);
  145. color: rgba(3, 101, 249, 1);
  146. border-radius: 8rpx;
  147. font-size: 24rpx;
  148. }
  149. }
  150. .peripheralItemRow2{
  151. color: #888888;
  152. font-size: 28rpx;
  153. margin-top: 20rpx;
  154. }
  155. }
  156. }
  157. }
  158. }
  159. </style>