123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- <template>
- <div class="peripheralService">
- <div class="peripheralBody">
- <van-tabs :active="active" @change="selectChange">
- <van-tab title="全部" :name="all"></van-tab>
- <van-tab :title="item.label" :name="item.value" v-for="item in serviceList"></van-tab>
- <!-- <van-tab title="干洗" :name="1"></van-tab>-->
- <!-- <van-tab title="维修" :name="2"></van-tab>-->
- <!-- <van-tab title="保洁" :name="3"></van-tab>-->
- <!-- <van-tab title="精装水" :name="4"></van-tab>-->
- <!-- <van-tab title="医疗" :name="5"></van-tab>-->
- </van-tabs>
- <div class="peripheralBox">
- <div class="peripheralItem" v-for="item in peripheralList" @tap="toDetail(item)">
- <div class="peripheralItemRow1">
- <span class="peripheralName">{{item.businessName}}</span>
- <span class="periTag">{{item.type}}</span>
- </div>
- <div class="peripheralItemRow2">入驻时间:{{item.releaseTime}}</div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { getByCodes,peripheryList } from "@/js_sdk/http";
- export default {
- name: "peripheralService",
- data(){
- return {
- dc_key: ['periphery_type', 'QUICK_SELECTION'],
- active: 0,
- type: '',
- peripheralList:[
- // {name:'福奈特洗衣店(基金PARK店)',type:'干洗'},
- // {name:'印彩图文广告(金融街店)',type:'打印'},
- ],
- params: {
- pageNum: 1,
- pageSize: 10,
- releaseType: 'periphery',
- status: 'published'
- },
- selectType:'',
- serviceList:[],
- dic_SelectList:[],
- all: null
- }
- },
- created(){
- this.getByCodes()
- this.$nextTick(()=>{
- this.active = 0
- })
- },
- onPullDownRefresh() {
- this.getByCodes()
- setTimeout(function () {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods:{
- async getByCodes() {
- let data = await getByCodes(JSON.stringify(this.dc_key));
- this.dic_SelectList = this.$common.handleDicList(data);
- this.serviceList = this.dic_SelectList.periphery_type
- // console.log('this.serviceList',this.serviceList)
- this.selectChange({detail:{
- name:this.params.type
- }})
- },
- selectData(type) {
- console.log('this.active',this.active)
- console.log('this.type',type)
- const _this = this
- _this.params.type = type
- peripheryList(_this.params).then((res) => {
- if (res.data) {
- res.data.forEach(function(item) {
- const jsonMap = _this.getItemJson(item)
- // console.log('jsonMap',jsonMap)
- _this.peripheralList.push(jsonMap)
- })
- }
- // console.log(_this.peripheralList)
- })
- },
- selectChange(e) {
- console.log(e)
- this.peripheralList = []
- this.selectData(e.detail.name)
- },
- toDetail(item) {
- uni.navigateTo({
- url:'/pages/subPackages/peripheralService/detail?id='+item.id
- })
- },
- getItemJson: function(item) {
- item.releaseTime = this.$common.transDate(item.releaseTime)
- // item.type = this.dic_SelectList.periphery_type[item.type]
- let transformedObject = this.dic_SelectList.periphery_type.reduce((acc, obj) => {
- acc[obj.value] = obj.label;
- return acc;
- }, {'':'全部'});
- item.type = transformedObject[item.type]
- // console.log('this.dic_SelectList.periphery_type',transformedObject)
- return item
- }
- }
- }
- </script>
- <style lang="scss">
- .peripheralService{
- .peripheralBody{
- background: white;
- margin-top: 24rpx;
- padding: 32rpx;
- box-sizing: border-box;
- height: 1424rpx;
- .peripheralBox{
- margin-top: 8rpx;
- .peripheralItem{
- width: 686rpx;
- height: 172rpx;
- box-sizing: border-box;
- border-radius: 16rpx;
- background: #F5F7FA;
- padding: 32rpx;
- margin-top: 24rpx;
- .peripheralItemRow1{
- display: flex;
- justify-content: space-between;
- .peripheralName{
- color:#222222;
- font-size: 32rpx;
- font-weight: 600;
- }
- .periTag{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 92rpx;
- height: 48rpx;
- background: rgba(3, 101, 249, 0.20);
- color: rgba(3, 101, 249, 1);
- border-radius: 8rpx;
- font-size: 24rpx;
- }
- }
- .peripheralItemRow2{
- color: #888888;
- font-size: 28rpx;
- margin-top: 20rpx;
- }
- }
- }
- }
- }
- </style>
|