123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <template>
- <view>
- <van-tabs :active="active" @change="onChange">
- <van-tab :name="1" title="酒店">
- </van-tab>
- <van-tab :name="2" title="商品">
- </van-tab>
- </van-tabs>
- <scroll-view style="height: 95vh;" class="floor-list"
- :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
- refresher-enabled="true">
- <view v-if="active == 1" v-for="(item,index) in store_list" :key="index">
- <van-cell :title="item.store_name" title-class="titlepadding">
- <template slot="icon">
- <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_logo" style="border-radius: 50%;
- width: 50upx;height: 50upx;vertical-align: middle;"></image>
- </template>
- </van-cell>
- <view class="hotelcontent">
- <view class="contentleft">
- <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar"
- style="width: 100%;height: 100%;vertical-align: middle;"></image>
- </view>
- <view class="contentitle">
- <view>{{item.store_name}}</view>
- <view class="contentip">{{item.store_summary}}</view>
- </view>
-
- </view>
- </view>
- <view v-if="active == 2" v-for="(item,index) in goods_list" :key="index">
- <van-cell :title="item.store_name" title-class ="titlepadding">
- <template slot="icon">
- <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" style="border-radius: 50%;
- width: 50upx;height: 50upx;vertical-align: middle;"></image>
- </template>
- </van-cell>
- <view style="border-bottom: 20upx solid #F5F5F5;">
- <van-card
- title-class="priceClass"
- desc-class="desclass"
- price-class ="priceClass"
- price="10.00"
- desc="描述信息"
- title="商品标题"
- thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
- >
- </van-card>
- </view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- pictureUrl: this.pictureUrl,
- active: 1,
- type: 'store',
- page: 1,
- page_size: 10,
- scrollTop:0,
- old: {
- scrollTop: 0
- },
- store_list:[],
- goods_list:[]
- }
- },
- onLoad() {
- this.getlist();
- },
- methods: {
- upper(e) {
- console.log(e)
- console.log("顶部")
- },
- // 滚到底部
- lower(e) {
- console.log("底部")
- },
- // 滚动时触发
- scroll(e) {
- this.old.scrollTop = e.detail.scrollTop
- },
- onChange(e) {
- console.log(e);
- this.active = e.detail.name;
- if(e.detail.name == 1) {
- this.type = 'store';
- }else {
- this.type = 'goods';
- }
- this.getlist();
- },
- getlist() {
- this.request({
- url: '/v1/favorites/get',
- method: 'post',
- scrollTop: 0,
- data: {
- type: this.type,
- page: this.page,
- page_size: this.page_size
- },
- success: (res) => {
-
- this.store_list = res.data.data.store_list;
- this.goods_list = res.data.data.goods_list;
- console.log(this.store_list );
- console.log(this.goods_list );
- }
- })
- },
- }
- }
- </script>
- <style lang="scss">
- .titlepadding {
- padding-left: 10upx;
- }
- .hotelcontent {
- display: flex;
- flex-direction: row;
- padding: 18upx 32upx;
- border-bottom: 20upx solid #F5F5F5;
- .contentleft {
- width: 200upx;
- height: 180upx;
- background-color: red;
- }
- .contentitle {
- padding-left: 35upx;
-
- .contentip {
- float: left;
- color: #909399;
- padding-top: 15upx;
- font-size: 24upx;
- }
- }
- }
- .van-card {
- background-color: #fff!important;
- }
- .priceClass {
- color: #303133!important;
- font-size: 28upx!important;
- font-weight: normal!important;
- }
- .desclass {
- color: #909399!important;
- font-size: 24upx;
- }
- </style>
|