refund-detail page

app.json

@@ -32,7 +32,8 @@
                 "pages/homestay/homestay-order2/index",
                 "pages/my/my-order/index",
                 "pages/my/my-order/order-detail/index",
-                "pages/my/my-order/my-refund/index"
+                "pages/my/my-order/my-refund/index",
+                "pages/my/my-order/my-refund/refund-detail/index"
             ]
         },
         {

nova-tourism/components/my/index.js

@@ -88,9 +88,9 @@ Component({
             });
         },
         gorefund(){
-            // wx.navigateTo({
-            //     url: '../../pages/my/my-order/my-refund/index',
-            // });
+            wx.navigateTo({
+                url: '../../pages/my/my-order/my-refund/index',
+            });
         }
     }
 })

nova-tourism/pages/my/my-order/index.less

@@ -4,6 +4,7 @@
     background-color: #F4F4F4;
     overflow-y: scroll;
     padding-bottom: 20rpx;
+    color: #382E2E;
     .tabbos{
         width: 100%;
         background-color: white;

nova-tourism/pages/my/my-order/my-refund/index.js

@@ -33,6 +33,7 @@ Page({
         });
     },
 
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
@@ -80,5 +81,14 @@ Page({
      */
     onShareAppMessage: function () {
 
-    }
+    },
+    gourl(e) {
+        const url = e.currentTarget.dataset.url;
+        // const id = e.currentTarget.dataset.id;
+
+        // 使用查询字符串跳转
+        wx.navigateTo({
+            url: `${url}`,
+        });
+    },
 })

nova-tourism/pages/my/my-order/my-refund/index.less

@@ -4,6 +4,7 @@
     overflow-y: scroll;
     background-color: #F4F4F4;
     padding-bottom: 20rpx;
+    color: #382E2E;
     .title{
         width: 100%;
         font-size: 36rpx;
@@ -24,7 +25,13 @@
         .title2{
             width: 100%;
             font-size: 30rpx;
-            font-weight: 600;
+            display: flex;
+            .title2-1{
+                font-weight: 600;
+            }
+            .title2-2{
+                margin-left: auto;
+            }
         }
         .roombox{
             width: 100%;

nova-tourism/pages/my/my-order/my-refund/index.wxml

@@ -4,7 +4,10 @@
     <view class="title">订单已完成</view>
     <block wx:for="{{3}}">
         <view class="cardbox">
-            <view class="title2">望仙礼遇</view>
+            <view class="title2">
+                <view class="title2-1">望仙礼遇</view>
+                <view class="title2-2">已完成</view>
+            </view>
             <view class="roombox">
                 <image src="https://file-cloud.fmode.cn//tmp/mqHkA2qV3Q8nca3dc59bad49de6e5ae57afa81d78ae8.jpeg?imageView2/1/w/200/h/200"></image>
                 <view class="room">
@@ -18,7 +21,7 @@
                 <view class="price">实付款￥19999.99</view>
             </view>
             <view class="sumbitbox">
-                <view class="sumbit" bindtap="gourl" data-url="../my-order/order-detail/index" data-id="{{item.objectId}}">退换</view>
+                <view class="sumbit" bindtap="gourl" data-url="../my-refund/refund-detail/index">退换</view>
             </view>
         </view>
     </block>

nova-tourism/pages/my/my-order/my-refund/refund-detail/index.js

@@ -0,0 +1,117 @@
+// nova-tourism/pages/my/my-order/my-refund/refund-detail/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        statusBarHeight: 0,
+        screenHeight: 0,
+        customHeight: 0,
+        bottomNavHeight: 0,
+        contentHeight: 0,
+
+        text: '',
+        // 图片
+        fileList: [],
+        uptokenURL: '',
+        domain: '',
+        uploadURL: '',
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    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 () {
+
+    },
+    // 添加本地图片
+    async getUptoken() {
+        let res = await Parse.Cloud.run('qiniu_uptoken', {
+            company: company
+        })
+        this.setData({
+            uptokenURL: res.uptoken,
+            domain: res.domain,
+            uploadURL: res.zoneUrl
+        })
+        console.log(this.data.uptokenURL, this.data.domain, this.data.uploadURL);
+    },
+    //获取图片数组
+    picture(event) {
+        console.log('event', event);
+        let FileList = event.detail
+        let url = []
+        for (let i = 0; i < FileList.length; i++) {
+            url.push(FileList[i].url)
+        }
+        this.setData({
+            fileList: url
+        })
+        console.log('图片', this.data.fileList);
+    },
+})

nova-tourism/pages/my/my-order/my-refund/refund-detail/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "van-divider": "@vant/weapp/divider/index",
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

nova-tourism/pages/my/my-order/my-refund/refund-detail/index.less

@@ -0,0 +1,149 @@
+/* nova-tourism/pages/my/my-order/my-refund/refund-detail/index.wxss */
+.all{
+    width: 100vw;
+    color: #382E2E;
+    background-color: #F4F4F4;
+    padding-bottom: 20rpx;
+    overflow-y: scroll;
+    .title{
+        width: 100%;
+        font-size: 36rpx;
+        background-color: white;
+        display: flex;
+        justify-content: center;
+        padding-bottom: 25rpx;
+    }
+    .cardbox{
+        width: 100%;
+        height: auto;
+        padding-left: 30rpx;
+        padding-right: 30rpx;
+        padding-top: 20rpx;
+        padding-bottom: 10rpx;
+        margin-top: 20rpx;
+        background-color: white;
+        .title2{
+            width: 100%;
+            font-size: 30rpx;
+            font-weight: 600;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 30rpx;
+        }
+        .roombox{
+            width: 100%;
+            display: flex;
+            margin-top: 20rpx;
+            image{
+                width: 170rpx;
+                height: 170rpx;
+                border-radius: 10rpx;
+            }
+            .room{
+                height: 100%;
+                margin-left: 20rpx;
+                .room-name{
+                    width: 460rpx;
+                    font-size: 28rpx;
+                    margin-bottom: 10rpx;
+                    color: #000000;
+    
+                }
+                .room-tag{
+                    font-size: 26rpx;
+                    width: 460rpx;
+                    height: auto;
+                    color: #F37B40;
+                    margin-bottom: 10rpx;
+                }
+                .room-text{
+                    width: 460rpx;
+                    height: auto;
+                    font-size: 26rpx;
+                    color: #737373;
+                }
+                .room-text2{
+                    width: 460rpx;
+                    height: auto;
+                    font-size: 26rpx;
+                    margin-top: 100rpx;
+                    color: #737373;
+                }
+            }
+        }
+        .text1{
+            width: 100%;
+            font-size: 28rpx;
+            display: flex;
+            color: #000000;
+            margin-bottom: 20rpx;
+            .tex1{
+                display: flex;
+                .tex1-1{
+                    color: #E22525;
+                    margin-left: 4rpx;
+                }
+
+            }
+            .tex2{
+                margin-left: auto;
+                font-size: 30rpx;
+                color: #F05C14;
+               
+            }
+            .tex3{
+                margin-left: auto;
+                font-size: 28rpx;
+                display: flex;
+            }
+
+        }
+        .areabox{
+            width: 100%;
+            height: auto;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            textarea{
+                background-color: #F4F4F4;
+                padding: 15rpx;
+                border-radius: 15rpx;
+                min-height: 200rpx;
+            }
+            .number{
+                color: gray;
+                position: absolute;
+                bottom: 0;
+                right: 46rpx;
+                font-size: 26rpx;
+            }
+        }
+        .uploadbox{
+            width: 100%;
+            height: 528rpx;
+            margin-top: 20rpx;
+        }
+    }
+    .submitbox{
+        width: 100%;
+        height: 110rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: white;
+        padding-bottom: 30rpx;
+        .submit{
+            background-color: #F05C14;
+            color: white;
+            width: 50%;
+            height: 100%;
+            border-radius: 20rpx;
+            font-size: 30rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}

nova-tourism/pages/my/my-order/my-refund/refund-detail/index.wxml

@@ -0,0 +1,49 @@
+<!--nova-tourism/pages/my/my-order/my-refund/refund-detail/index.wxml-->
+<nav type="back" background-color="#ffffff" frontColor="#000000" title="退款/售后" />
+<view class="all" style="height: {{contentHeight}}rpx;">
+    <view class="title">订单已完成</view>
+    <view class="cardbox">
+        <view class="title2">确认退换信息</view>
+        <view class="roombox">
+            <image src="https://file-cloud.fmode.cn//tmp/mqHkA2qV3Q8nca3dc59bad49de6e5ae57afa81d78ae8.jpeg?imageView2/1/w/200/h/200"></image>
+            <view class="room">
+                <view class="room-name">房间描述房间描述</view>
+                <view class="room-text2">紫色经典款</view>
+            </view>
+        </view>
+        <van-divider customStyle="margin: 20rpx;border-color:'#B1B1B1' " />
+        <view class="text1">
+            <view class="tex1">退换方式</view>
+            <view class="tex3">
+                退货退款
+                <van-icon name="arrow" custom-style='margin-left:10rpx' />
+            </view>
+        </view>
+        <view class="text1">
+            <view class="tex1">退货退款的原因</view>
+            <view class="tex3">
+                商品瑕疵
+                <van-icon name="arrow" custom-style='margin-left:10rpx' />
+            </view>
+        </view>
+        <view class="text1">
+            <view class="tex1">
+                描述和凭证
+                <view class="tex1-1">*</view>
+            </view>
+            <view class="tex2">
+                上传有助于处理问题
+            </view>
+        </view>
+        <view class="areabox">
+            <textarea auto-height model:value='{{text}}' bindinput='' maxlength='200'></textarea>
+            <view class="number">{{text.length}}/200</view>
+        </view>
+        <view class="uploadbox">
+            <upload bind:onChangeFile="picture" accept="image" uploadURL="{{uploadURL}}" domain="{{domain}}" uptokenURL="{{uptokenURL}}" maxCount="9" />
+        </view>
+    </view>
+    <view class="submitbox">
+        <view class="submit">提交</view>
+    </view>
+</view>

nova-tourism/pages/my/my-order/order-detail/index.less

@@ -4,6 +4,7 @@
     overflow-y: scroll;
     background-color: #F4F4F4;
     padding-bottom: 20rpx;
+    color: #382E2E;
     .title{
         width: 100%;
         font-size: 36rpx;

project.private.config.json

@@ -63,6 +63,12 @@
                     "pathName": "nova-tourism/pages/my/my-order/my-refund/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "退款详细",
+                    "pathName": "nova-tourism/pages/my/my-order/my-refund/refund-detail/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }