collect page

nova-tourism/components/collect/index.js

@@ -1,4 +1,6 @@
 // nova-tourism/components/collect/index.js
+let Parse = getApp().Parse;
+const company = getApp().globalData.company
 Component({
     /**
      * 组件的属性列表
@@ -11,13 +13,101 @@ Component({
      * 组件的初始数据
      */
     data: {
+        statusBarHeight: 0,
+        screenHeight: 0,
+        customHeight: 0,
+        bottomNavHeight: 0,
+        contentHeight: 0,
 
+        active: 0,
+    },
+    lifetimes: {
+        detached: function () {},
+        attached: async function () {
+            const systemInfo = wx.getSystemInfoSync();
+            const statusBarHeight = systemInfo.statusBarHeight || 0;
+            const screenHeight = systemInfo.screenHeight || 0;
+            const custom = wx.getMenuButtonBoundingClientRect();
+            const customHeight = custom.height + 10 + 2 || 0;
+            const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
+
+            const contentHeight = (screenHeight - bottomNavHeight - 50 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            this.setData({
+                statusBarHeight,
+                screenHeight,
+                customHeight,
+                bottomNavHeight,
+                contentHeight
+            });
+            this.gethomestar()
+        },
     },
 
     /**
      * 组件的方法列表
      */
     methods: {
+        //获取收藏店铺消息
+        async gethomestar() {
+            const currentUser = Parse.User.current();
+            console.log(currentUser);
+            let ShopStore = new Parse.Query('DramaShopCollect');
+            ShopStore.equalTo('company', company);
+            ShopStore.equalTo('user', currentUser.id);
+            ShopStore.equalTo('isCollect', 'true');
+            ShopStore.notEqualTo('isDeleted', "true");
+            ShopStore.include('homestayStore');
+            let store = await ShopStore.find();
+            let storeList = store.map(item => item.toJSON());
+            this.setData({
+                storeList
+            });
+
+            console.log('123', this.data.storeList);
+        },
+        //点击取消
+        async cancle(e) {
+            const object = e.currentTarget.dataset.id
+            const currentUser = Parse.User.current();
+            let Collect = new Parse.Query('DramaShopCollect');
+            Collect.equalTo('company', company);
+            Collect.equalTo('user', currentUser.id);
+            Collect.equalTo('isCollect', true);
+            Collect.equalTo('homestayStore', object);
+            Collect.notEqualTo('isDeleted', "true");
+            let collect = await Collect.first();
+
+            await this.changeiscollect(object)
+            if (collect) {
+                collect.set('isCollect', false)
+                try {
+                    let saveDate = await collect.save();
+                    console.log(saveDate);
+                    console.log("取消成功");
+                } catch (error) {
+                    console.error("保存数据时出现错误:", error);
+                }
+            }
+        },
+        // 点击收藏后把storeList中对应的isCollect变成true
+        changeiscollect(objectId) {
+            // 创建一个新的 storeList 数组，以确保视图更新
+            const updatedStoreList = this.data.storeList.map(item => {
+                if (item.homestayStore.objectId === objectId) {
+                    return {
+                        ...item,
+                        isCollect: !item.isCollect // 切换 iscollect 的值
+                    };
+                }
+                return item; // 返回未修改的项
+            });
+
+            // 更新 storeList
+            this.setData({
+                storeList: updatedStoreList
+            });
 
+            console.log('修改成功', objectId);
+        },
     }
-})
+})

nova-tourism/components/collect/index.json

@@ -1,4 +1,7 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "van-tab": "@vant/weapp/tab/index",
+        "van-tabs": "@vant/weapp/tabs/index"
+    }
 }

nova-tourism/components/collect/index.less

@@ -0,0 +1,87 @@
+/* nova-tourism/components/collect/index.wxss */
+.all{
+    width: 100vw;
+    overflow-y: scroll;
+    .img{
+        width: 100%;
+        height: 430rpx;
+    }
+    .Legendary-Information{
+        margin-top: 40rpx;
+        width: 100%;
+        background-color: white;
+        overflow-y: hidden;
+        padding-left: 3%;
+        padding-right: 3%;
+        padding-bottom: 40rpx;
+        column-count: 2; /* 设置列数 */
+        column-gap: 20rpx; /* 设置列间距 */
+        .cardbox {
+            break-inside: avoid; /* 防止卡片在列之间断裂 */
+            margin-bottom: 20rpx; /* 设置卡片底部间距 */
+            width: 100%; /* 确保卡片宽度为100% */
+            background-color: #F9F9F9;
+            .pic{
+                width: 100%;
+                height: 275rpx;
+            }
+            .textobx{
+                width: 100%;
+                height: 220rpx;
+                padding-top: 10rpx;
+                padding-left: 20rpx;
+                padding-right: 20rpx;
+                .title{
+                    width: 100%;
+                    height: 50rpx;
+                    display: flex;
+                    align-items: center;
+                    .til{
+                        font-size: 30rpx;
+                        font-weight: 600;
+                    }
+                    .collect{
+                        width: 50rpx;
+                        height: 50rpx;
+                        margin-left: auto;
+                    }
+                }
+                .miaosu{
+                    width: 100%;
+                    height: 80rpx; /* 设置固定高度 */
+                    font-size: 28rpx;
+                    overflow: hidden; /* 隐藏超出部分 */
+                    display: -webkit-box; /* 使用弹性盒子布局 */
+                    -webkit-box-orient: vertical; /* 垂直排列 */
+                    -webkit-line-clamp: 2; /* 限制显示的行数，这里设置为3行 */
+                    text-overflow: ellipsis; /* 超出部分显示省略号 */
+                }
+                .bottom{
+                    width: 100%;
+                    height: 80rpx;
+                    display: flex;
+                    align-items: center;
+                    .qian{
+                        color: #C5262Ced;
+                        display: flex;
+                        .numbox{
+                            margin-left: 6rpx;
+                        }
+                    }
+                    .soucang{
+                        width: 104rpx;
+                        height: 48rpx;
+                        font-size: 26rpx;
+                        background-color: #343027;
+                        border-radius: 40rpx;
+                        color: white;
+                        margin-left: auto;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+}

nova-tourism/components/collect/index.wxml

@@ -1,2 +1,43 @@
 <!--nova-tourism/components/collect/index.wxml-->
-<text>收藏</text>
+<nav type="title" background-color="#ffffff" frontColor="#000000" title="望仙谷" />
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <image class="img" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg"></image>
+    <van-tabs active="{{ active }}" color='#B2CEB9' title-inactive-color='#969696' title-active-color='#B2CEB9'>
+        <van-tab title="云上风物">
+
+        </van-tab>
+        <!-- 我的收藏 -->
+        <van-tab title="我的收藏">
+            <!-- 卡片 -->
+            <view class="Legendary-Information" wx:if="{{storeList.length!=0}}">
+                <block wx:for="{{storeList}}" wx:if="{{item.isCollect}}">
+                    <view class="cardbox">
+                        <image class="pic" src="{{item.homestayStore.image[0]}}" data-id="{{item.homestayStore.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl"></image>
+                        <view class="textobx">
+                            <view class="title" data-id="{{item.homestayStore.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                <view class="til">{{item.homestayStore.storeName}}</view>
+                                <image class="collect" wx:if="{{!item.isCollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png?imageView2/1/w/200/h/200"></image>
+                                <image class="collect" wx:if="{{item.isCollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/8mp9uj030058190.png?imageView2/1/w/200/h/200"></image>
+                            </view>
+
+                            <view class="miaosu" wx:if="{{item.homestayStore.desc}}" data-id="{{item.homestayStore.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                {{item.homestayStore.desc}}
+                            </view>
+
+                            <view class="bottom">
+                                <view class="qian" data-id="{{item.homestayStore.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                    ￥
+                                    <view class="numbox">
+                                        {{item.homestayStore.perCapita}}
+                                    </view>
+                                </view>
+                                <view class="soucang" wx:if="{{!item.isCollect}}" data-id="{{item.homestayStore.objectId}}" bindtap="submit">收藏</view>
+                                <view class="soucang" wx:if="{{item.isCollect}}" data-id="{{item.homestayStore.objectId}}" bindtap="cancle">取消</view>
+                            </view>
+                        </view>
+                    </view>
+                </block>
+            </view>
+        </van-tab>
+    </van-tabs>
+</view>

nova-tourism/components/collect/index.wxss

@@ -1 +1 @@
-/* nova-tourism/components/collect/index.wxss */
+.all{width:100vw;overflow-y:scroll}.all .img{width:100%;height:430rpx}.all .Legendary-Information{margin-top:40rpx;width:100%;background-color:white;overflow-y:hidden;padding-left:3%;padding-right:3%;padding-bottom:40rpx;column-count:2;column-gap:20rpx}.all .Legendary-Information .cardbox{break-inside:avoid;margin-bottom:20rpx;width:100%;background-color:#F9F9F9}.all .Legendary-Information .cardbox .pic{width:100%;height:275rpx}.all .Legendary-Information .cardbox .textobx{width:100%;height:220rpx;padding-top:10rpx;padding-left:20rpx;padding-right:20rpx}.all .Legendary-Information .cardbox .textobx .title{width:100%;height:50rpx;display:flex;align-items:center}.all .Legendary-Information .cardbox .textobx .title .til{font-size:30rpx;font-weight:600}.all .Legendary-Information .cardbox .textobx .title .collect{width:50rpx;height:50rpx;margin-left:auto}.all .Legendary-Information .cardbox .textobx .miaosu{width:100%;height:80rpx;font-size:28rpx;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}.all .Legendary-Information .cardbox .textobx .bottom{width:100%;height:80rpx;display:flex;align-items:center}.all .Legendary-Information .cardbox .textobx .bottom .qian{color:#C5262Ced;display:flex}.all .Legendary-Information .cardbox .textobx .bottom .qian .numbox{margin-left:6rpx}.all .Legendary-Information .cardbox .textobx .bottom .soucang{width:104rpx;height:48rpx;font-size:26rpx;background-color:#343027;border-radius:40rpx;color:white;margin-left:auto;display:flex;justify-content:center;align-items:center}