collect-detail page

app.json

@@ -13,7 +13,8 @@
                 "pages/my/my-wallet/index",
                 "pages/homestay/homestay-order/index",
                 "pages/homestay/customer/select-customer/index",
-                "pages/homestay/customer/customer-info/index"
+                "pages/homestay/customer/customer-info/index",
+                "pages/collect/collect-detail/index"
             ]
         },
         {

nova-tourism/components/collect/index.js

@@ -158,6 +158,7 @@ Component({
             });
             console.log(this.data.start, this.data.end);
         },
+        //去收藏商铺
         gourl(e) {
             const url = e.currentTarget.dataset.url;
             const id = e.currentTarget.dataset.id;
@@ -184,6 +185,12 @@ Component({
             });
         },
 
+        //去商品详细
+        gourl2(e){
+            wx.navigateTo({
+                url: `../../pages/collect/collect-detail/index`,
+            });
+        }
 
 
     }

nova-tourism/components/collect/index.wxml

@@ -40,7 +40,7 @@
 
                 <view class="wang-cardbox">
                     <block wx:for="{{4}}">
-                        <view class="wang-card">
+                        <view class="wang-card"  bindtap="gourl2">
                             <image src="https://file-cloud.fmode.cn//tmp/srFPqGFAzeT5958c828d985e451ed4c0b452e39ff57a.jpeg"></image>
                             <view class="wang-catex">粉黛胖挑主人杯(无礼盒)·手做</view>
                             <view class="wang-numbox">

nova-tourism/pages/collect/collect-detail/index.js

@@ -0,0 +1,89 @@
+// nova-tourism/pages/collect/collect-detail/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        statusBarHeight: 0,
+        screenHeight: 0,
+        customHeight: 0,
+        bottomNavHeight: 0,
+        contentHeight: 0,
+
+        imageUrls: ['https://file-cloud.fmode.cn//tmp/srFPqGFAzeT5958c828d985e451ed4c0b452e39ff57a.jpeg',
+            'https://file-cloud.fmode.cn//tmp/P7YTTX6XuEZC607368e1f9745abc429c7c25cbef4c5a.jpeg',
+            'https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg'
+        ],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        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 - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        this.setData({
+            statusBarHeight,
+            screenHeight,
+            customHeight,
+            bottomNavHeight,
+            contentHeight
+        });
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

nova-tourism/pages/collect/collect-detail/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

nova-tourism/pages/collect/collect-detail/index.less

@@ -0,0 +1,88 @@
+/* nova-tourism/pages/collect/collect-detail/index.wxss */
+.all{
+    width: 100vw;
+    overflow-y: scroll;
+    position: relative;
+    .picturebox{
+        width: 100%;
+        height: 500rpx;
+        position: relative;
+        .img{
+            width: 100%;
+            height: 500rpx;
+            image{
+                width: 100%;
+                height: 100%;
+
+            }
+        }
+        .numberbox{
+            position: absolute;
+            bottom: 40rpx;
+            right: 20rpx;
+            border-radius: 45%;
+            z-index: 10;
+            color: white;
+            width: 70rpx;
+            height: 45rpx;
+            font-size: 24rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(12, 12, 12, 0.5);
+        }
+
+    }
+    .infobox{
+        width: 100%;
+        height: auto;
+        position: absolute;
+        top: 498rpx;
+        left: 0;
+        padding: 40rpx;
+        border-top-left-radius: 20rpx;
+        border-top-right-radius: 20rpx;
+        background-color: white;
+        .title{
+            width: 100%;
+            height: 90rpx;
+            font-size: 30rpx;
+
+        }
+        .lebalbox{
+            width: 100%;
+            height: 60rpx;
+            display: flex;
+            margin-top: 10rpx;
+            .lebal{
+                font-size: 30rpx;
+                border-radius: 15rpx;
+                padding-left: 20rpx;
+                padding-right: 20rpx;
+                background-color: #FBF5E1;
+                color: #F8BB7F;
+                margin-right: 20rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+        .carbox{
+            width: 100%;
+            height: 60rpx;
+            display: flex;
+            margin-top: 10rpx;
+            display:flex ;
+            align-items: center;
+            image{
+                width: 48rpx;
+                height: 40rpx;
+            }
+            .car-tex{
+                font-size: 28rpx;
+                color: #F8BB7F;
+                margin-left: 10rpx;
+            }
+        }
+    }
+}

nova-tourism/pages/collect/collect-detail/index.wxml

@@ -0,0 +1,26 @@
+<!--nova-tourism/pages/collect/collect-detail/index.wxml-->
+<nav type="back" background-color="#ffffff" frontColor="#000000" title="商品详细" />
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <!-- 轮播图 -->
+    <view class="picturebox">
+        <swiper autoplay="{{true}}" indicator-dots='{{true}}' indicator-color='#D9D9D9' indicator-active-color='#F8DA7F' interval="{{3000}}" circular duration="{{500}}" class="img" bindchange="onSwiperChange">
+            <block wx:for="{{imageUrls}}" wx:key="index" wx:for-item="img">
+                <swiper-item class="img">
+                    <image src="{{img}}" mode="aspectFill"></image>
+                </swiper-item>
+            </block>
+        </swiper>
+    </view>
+    <view class="infobox">
+        <view class="title">粉黛胖挑主人杯(无礼盒)·手做 粉黛胖挑主人杯(无礼盒)·手做</view>
+        <view class="lebalbox">
+            <block wx:for="{{2}}">
+                <view class="lebal">热销好物</view>
+            </block>
+        </view>
+        <view class="carbox">
+            <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/3i680f113841258.png"></image>
+            <view class="car-tex">48小时内发货</view>
+        </view>
+    </view>
+</view>

nova-tourism/pages/collect/collect-detail/index.wxss

@@ -0,0 +1 @@
+.all{width:100vw;overflow-y:scroll;position:relative}.all .picturebox{width:100%;height:500rpx;position:relative}.all .picturebox .img{width:100%;height:500rpx}.all .picturebox .img image{width:100%;height:100%}.all .picturebox .numberbox{position:absolute;bottom:40rpx;right:20rpx;border-radius:45%;z-index:10;color:white;width:70rpx;height:45rpx;font-size:24rpx;display:flex;justify-content:center;align-items:center;background-color:rgba(12,12,12,0.5)}.all .infobox{width:100%;height:auto;position:absolute;top:498rpx;left:0;padding:40rpx;border-top-left-radius:20rpx;border-top-right-radius:20rpx;background-color:white}.all .infobox .title{width:100%;height:90rpx;font-size:30rpx}.all .infobox .lebalbox{width:100%;height:60rpx;display:flex;margin-top:10rpx}.all .infobox .lebalbox .lebal{font-size:30rpx;border-radius:15rpx;padding-left:20rpx;padding-right:20rpx;background-color:#FBF5E1;color:#F8BB7F;margin-right:20rpx;display:flex;justify-content:center;align-items:center}.all .infobox .carbox{width:100%;height:60rpx;display:flex;margin-top:10rpx;display:flex ;align-items:center}.all .infobox .carbox image{width:48rpx;height:40rpx}.all .infobox .carbox .car-tex{font-size:28rpx;color:#F8BB7F;margin-left:10rpx}

project.private.config.json

@@ -39,6 +39,12 @@
                     "pathName": "nova-tourism/pages/my/my-card/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "商品详细",
+                    "pathName": "nova-tourism/pages/collect/collect-detail/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }