jzmall_uni/pages/ucenter/order/order.vue

<template>
    <view>
        <!-- <sjs src="../../../utils/formatFuc.sjs" module="utils" /> -->
        <view class="poster" v-if="myqr_show">
            <view>
                <image :src="myqr_url" :style="'width:' + myqr_width + 'rpx;'" mode="widthFix"></image>
                <view class="tool">
                    <view>
                        <button open-type="share" class="share-btn">
                            <image class="img" style="width: 85rpx; margin-right: 25rpx" mode="widthFix" src="/static/images/share/p_dy.png"></image>
                        </button>
                    </view>
                    <view>
                        <image class="img" mode="widthFix" @tap="goSaveQrcode" src="/static/images/share/p_save.png"></image>
                    </view>
                </view>
                <view style="text-align: center">
                    <image class="closeImg" @tap="hidePoster" src="/static/images/share/close.png"></image>
                </view>
            </view>
        </view>

        <view class="appoint-tabs-wrapper">

			<view :class="'appoint-tab-item ' + (showType == 0 ? 'active' : '')" data-tab="0" @tap="onTabChange">全 部</view>
			<view :class="'appoint-tab-item ' + (showType == 1 ? 'active' : '')" data-tab="1" @tap="onTabChange">待支付</view>
            <view :class="'appoint-tab-item ' + (showType == 2 ? 'active' : '')" data-tab="2" @tap="onTabChange">待服务</view>
            <!-- <view class="appoint-tab-item {{showType==4?'active':''}}" data-tab="4" bindtap="onTabChange">待评价</view> -->
        </view>

        <view class="container" :style="'filter:blur(' + myqr_blur + 'rpx)'">
            <!-- <view class="orders-switch">
    <view class="item {{ showType == 0 ? 'active' : ''}}" bindtap="switchTab" data-index='0'>
      <view class="txt">全部</view>
    </view>
    <view class="item {{ showType == 1 ? 'active' : ''}}" bindtap="switchTab" data-index='1'>
      <view class="txt">待付款</view>
    </view> -->

            <!-- <view class="item {{ showType == 2 ? 'active' : ''}}" bindtap="switchTab" data-index='2'>
      <view class="txt">待发货</view>
    </view> -->

            <!-- <view class="item {{ showType == 3 ? 'active' : ''}}" bindtap="switchTab" data-index='3'>
      <view class="txt">待上门</view>
    </view>
    <view class="item {{ showType == 4 ? 'active' : ''}}" bindtap="switchTab" data-index='4'>
      <view class="txt">待评价</view>
    </view>
  </view> -->

            <!-- <van-tabs active="{{showType }}" color="#09afff" bind:change="onTabChange">
    <van-tab title="全部" name="0"></van-tab>
    <van-tab title="待付款" name="1"></van-tab>
    <van-tab title="服务中" name="3"></van-tab>
    <van-tab title="待评价" name="4"></van-tab>
  </van-tabs> -->

            <!--
  <view class="appoint-tabs-wrapper">
    <view class="appoint-tab-item {{showType==0?'active':''}}" data-tab="0" bindtap="onTabChange">全 部</view>
    <view class="appoint-tab-item {{showType==1?'active':''}}" data-tab="1" bindtap="onTabChange">待付款</view>
    <view class="appoint-tab-item {{showType==3?'active':''}}" data-tab="3" bindtap="onTabChange">服务中</view>
    <view class="appoint-tab-item {{showType==4?'active':''}}" data-tab="4" bindtap="onTabChange">待评价</view>
</view> -->


            <view class="no-order" v-if="orderList.length <= 0">
                <view class="c">
                    <text>还没有任何订单呢</text>
                </view>
            </view>

            <view class="orders">

				<!-- 工单提醒 -->
				<block v-if="showType == 0">
				<view v-for="(item, index) in tipsList" :key="index" class="tips-item">
				    <view class="tips-item-title">
						<view class="item-title-left">
							<image mode="aspectFit"
								src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image>
							<text>服务提醒</text>
						</view>
						<view class="item-title-right">{{item.statusName}}</view>
					</view>
					<view class="tips-item-line">
						<view class="line-left">
							预约时间
						</view>
						<view class="line-right" v-if="item.bookDateTime.split(',').length>=3">
							{{item.bookDateTime.split(',')[0]}}
							<text>{{item.bookDateTime.split(',')[1]}}</text>
							{{item.bookDateTime.split(',')[2]}}
						</view>
						<view class="line-right" v-else>
							{{item.bookDateTime.split(',')[0]}}
							{{item.bookDateTime.split(',')[1]}}
						</view>

					</view>
					<view class="tips-item-line">
						<view class="line-left">
							服务项目
						</view>
						<view class="line-right">
							{{item.skuName}}
						</view>

					</view>
					<view class="tips-item-line">
						<view class="line-left">
							上门信息
						</view>
						<view class="line-right">
							{{item.bookInfo.split('|')[0]}}
						</view>

					</view>
					<view class="tips-item-line" style="margin-top:-18rpx;">
						<view class="line-left">

						</view>
						<view class="line-right">
							{{item.bookInfo.split('|')[1]}}
						</view>

					</view>
					<view class="tips-item-content" v-if="item.tip">
						提醒：{{item.tip}}
					</view>
				</view>


				</block>
				  <view v-if="orderList.length>0&&tipsList.length>0&&showType == 0" class="order-devide">
					  <view class="line"></view>
					  <view class="devide-text">订单列表</view>
					  <view class="line"></view>
					</view>

                <view class="order" v-for="(item, index) in orderList" :key="index"  :data-status="item.orderStatusVal"  @tap="goOrderDetailNew" :data-id="item.id">
                    <view class="h">
                        <view class="l" v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'">已支付</view>
                        <view class="l" v-else>{{ item.orderStatusVal }}</view>
                        <view class="r" v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'">
                            {{ item.orderStatusVal }}
                        </view>
                        <view class="r" v-else></view>
                    </view>

                    <!-- open-type="redirect" -->

                    <!-- <navigator :url="'../orderDetail/orderDetail?id=' + item.id"> -->
                        <view class="goods" >
                            <view class="img">
                                <image :src="item.picUrl + '?w=200'"></image>
                            </view>
                            <view class="info">
                                <!-- <view class="info-orderSn" >订单编号: {{item.orderSn}}</view> -->
                                <view class="info-main">
                                    <text class="product-name">{{ item.goodsName }}</text>
                                    <text class="price">¥{{ item.orderPrice }}</text>
                                </view>
                                <view class="sku-name" v-if="item.increaseSumPrice">
                                    <view>加购: {{ item.unitDescribe }}*{{ item.unitIncreaseNumber }}</view>
                                    <view>¥{{ item.increaseSumPrice }}</view>
                                </view>
                                <view class="sku-name">规格:{{ item.skuName }}</view>

                                <!-- <text class="number">共{{item.number}}件商品</text> -->

                                <text class="other-info">服务{{ item.serviceTimes }}次</text>
                                <!-- <text class="other-info" wx:if="{{utils.getNotServiceTimes(item.serviceTimes,item.servedTimes)>0}}">  {{utils.getNotServiceTimes(item.serviceTimes,item.servedTimes)}}次未服务</text> -->
                                <!-- 支付倒计时 payOverTime -->
                                <view v-if="item.payOverTime > 0" class="over-time">{{ formatOverTime(item.payOverTime) }} 后订单关闭</view>
                            </view>
                            <!-- <view class="status">
        </view> -->
                        </view>
                    <!-- </navigator> -->

                    <view class="b">
                        <view class="l">
                            <text>实付款：￥{{ item.actualPrice }}</text>
                        </view>
                    </view>

                    <!-- 提醒 -->

                    <view class="status-tips" v-if="item.orderStatusVal == '已退款'">
                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-refund-tips.png"></image>
                        <view class="tips-title">已退款</view>
                        <view>已按照原支付路径退回</view>
                    </view>

                    <view class="status-tips" v-if="item.orderStatusVal == '服务已完成'" :data-id="item.id" @tap="goCheck">
                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-customer-msg.png"></image>
                        <view class="tips-title">服务验收：</view>
                        <view>服务已完成，请评价</view>
                    </view>

                    <view class="customer-msg" v-if="item.customerServiceReminder">
                        <view class="msg-title">提醒：</view>
                        <view class="msg-text">{{ item.customerServiceReminder }}</view>
                    </view>

                    <view class="customer-msg" v-if="item.ticketStatus == 1">
                        <view class="msg-title">提醒：</view>
                        <view class="msg-text">您的售后工单正在处理中，请耐心等待</view>
                    </view>

                    <view class="customer-msg" v-if="item.ticketStatus == 2" :data-id="item.id" @tap="orderDetail">
                        <view class="msg-title">提醒：</view>
                        <view class="msg-text">您的售后工单已完成，可以去评价了哦</view>
                    </view>

                    <!-- 操作事件 -->

                    <view class="order-operate-wrapper">
                        <!-- <view catchtap="deleteOrder" wx:if="{{item.handleOption.delete}}" data-id="{{item.id}}" class="del">删除订单
          </view> -->
                        <view @tap.stop.prevent="cancelOrder" v-if="item.handleOption.cancel" :data-id="item.id" class="del">取消订单</view>
                        <view @tap.stop.prevent="showRefundDia"  v-if="item.handleOption.refund" :data-id="item.id"   class="del">申请退款</view>
						<!-- v-if="item.handleOption.refund" -->
                        <!-- <view  data-id="{{item.id}}" data-sn="{{item.orderSn}}" data-aid="{{item.addressId}}"
          data-type="{{item.type}}" wx:if="{{item.handleOption.book}}" class="eval-btn">评价</view> -->

                        <!-- 抖音评价  20231007屏蔽 by leo 启用工单上的服务验收
        <rate-button class="eval-btn" order-id="{{item.orderSn}}" bind:init="handleInit" bind:success="handleSuccess" bind:error="handleError" />-->
                        <!-- <view  catchtap="confirmOrder" wx:if="{{item.handleOption.confirm}}" data-id="{{item.id}}">待上门</view> -->
                        <!-- <view  catchtap="refundOrder" wx:if="{{item.handleOption.refund&&item.goodsList[0].goodsSn!='1036016'}}" data-id="{{item.id}}">申请退款</view> -->
                        <!-- <view  data-id="{{item.goodsList[0].goodsId}}" catchtap="shareFriendOrCircle" >分享商品</view> -->
                        <view
                            @tap.stop.prevent="appointService"
                            :data-id="item.id"
                            :data-sn="item.orderSn"
                            :data-aid="item.addressId"
                            :data-type="item.type"
                            v-if="item.handleOption.book"
                            :data-detail="item.detailId"
                            class="appoint"
                        >
                            预约服务
                        </view>

                      
                        <view @tap.stop.prevent="payOrder" :data-id="item.id" :data-sn="item.orderSn" v-if="item.handleOption.pay" class="appoint">继续支付</view>
                        <view class="btn-rebuy" @tap.stop.prevent="buyAgain" :data-id="item.goodsId" v-if="item.orderStatusVal != '未支付'">再来一单</view>

                    </view>
                </view>
            </view>
        </view>
		<contact-mov  :pageX="30" :pageY="420"></contact-mov>
		
		<view class="refund-order-overlay"  v-if="refundTipShow">
		    <view class="refund-order-dialog">
		        <view class="refund-dia-tips">您遇到任何问题都可联系在线客服，我们将竭诚为您解决问题！</view>
		        <view class="dia-btn-wrapper">
					<view class="dia-cancel-btn" @tap="refundOrder">继续退款</view>
		            <view class="dia-conf-btn" @tap="goIM">联系在线客服</view>
		           
		        </view>
		    </view>
		</view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
import contactMov from '@/components/contact-mov';

export default {
	components:{contactMov},
    data() {
        return {
            timer: '',
            orderList: [],
            showType: 0,
            page: 1,
            limit: 10,
            totalPages: 1,
            myqr_show: false,
            //我的分享二维码
            myqr_url: null,
            myqr_blur: 0,
            //背景模糊值
            myqr_width: 0,
            hasLogin: false,
            goodsId: '',
			tipsList:[],
			refundTipShow:false,
			refundId:''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        if (options.tab) {
            this.setData({
                showType: options.tab
            });
        } else {
            try {
                let query = uni.getEnterOptionsSync().query;
                let keys = Object.keys(query);
                if (keys.length > 0) {
                    let str = keys[0]; //{\"showType\": 1}
                    let json = str.replace(/\"/g, '').replace(/\\/g, '"');
                    let tab = JSON.parse(json).showType;
                    if (tab != null && tab != '' && tab != undefined) {
                        this.setData({
                            showType: '0' //全部订单，写死因为历史后台传的是1
                        });
                    }
                }
            } catch (error) {
                console.log('CatchClause', error);
                console.log('CatchClause', error);
                console.info(error);
            }
        }
    },
    onHide: function () {
        console.log('onHide');
        clearInterval(this.timer);
    },
    onUnload: function () {
        console.log('onunload');
        clearInterval(this.timer);
    },
    onReachBottom() {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getOrderList();
        } else if (this.orderList.length > 0) {
            uni.showToast({
                title: '没有更多订单了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
        this.setData({
            orderList: [],
            page: 1
        });
        // wx.pageScrollTo({
        //   scrollTop: 0,
        //   duration: 1000,
        // });
        this.getOrderList();
    },
    methods: {
		formatOverTime(time){
		  var minute='00';
		  var second='00';
		  if(time>0){
		    minute=(Math.floor(time/60)<10?('0'+Math.floor(time/60)):Math.floor(time/60));
		    second=(Number(time%60).toFixed(0)<10?('0'+Number(time%60).toFixed(0)):Number(time%60).toFixed(0));
		  }

		  var result="00:"+minute+":"+second;

		  return result;

		},
        getOrderList() {
            uni.showLoading({
                title: '加载中'
            });
            let that = this;
            util.request(api.OrderList, {
                showType: that.showType,
                page: that.page,
                limit: that.limit
            }).then((res) => {
                uni.hideLoading();
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        orderList: that.orderList.concat(res.data.data.orders),
                        totalPages: res.data.pages,
						tipsList:res.data.data.tips
                    });
                    clearInterval(this.timer);
                    // 如果有未支付订单,倒计时定时器
                    let isHasOver = this.orderList.some((item) => {
                        return item.payOverTime > 0;
                    });
                    console.log(isHasOver);
                    if (isHasOver) {
                        let timer = setInterval(() => {
                            let list = this.orderList;
                            let newList = [];
                            list.forEach((item) => {
                                let obj = item;
                                if (item.payOverTime > 0) {
                                    obj.payOverTime = item.payOverTime - 1;
                                }
                                newList.push(obj);
                            });
                            this.setData({
                                orderList: newList
                            });
                        }, 1000);
                        this.setData({
                            timer: timer
                        });
                    }
                }
            });
        },

        orderDetail(e) {
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
            });
        },

        switchTab: function (event) {
            let showType = event.currentTarget.dataset.index;
            this.setData({
                orderList: [],
                showType: showType,
                page: 1,
                // limit: 10,
                totalPages: 1
            });
            this.getOrderList();
        },

        onTabChange(e) {
            // let showType = e.detail.name;
            let showType = e.currentTarget.dataset.tab;
            this.setData({
                orderList: [],
                showType: showType,
                page: 1,
                // limit: 10,
                totalPages: 1
            });
            this.getOrderList();
        },

        appointServiceOld(e) {
            let id = e.currentTarget.dataset.id;
            let addressId = e.currentTarget.dataset.aid;
            let type = e.currentTarget.dataset.type;
            if (type && type == 5) {
                uni.navigateTo({
                    url: '/pages/ucenter/coupon/couponGoods?id=1'
                });
                return;
            }
            if (addressId == null || addressId == 0) {
                uni.navigateTo({
                    url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id
                });
            } else {
                //买约分离 没有地址的预约
                uni.navigateTo({
                    url: '/pages/ucenter/serviceDetail/serviceDetail?orderId=' + id
                });
            }
        },

        appointService(e) {
            let id = e.currentTarget.dataset.id;
            let addressId = e.currentTarget.dataset.aid;
            let type = e.currentTarget.dataset.type;
            let detailId = e.currentTarget.dataset.detail;
            uni.navigateTo({
                url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id + '&serviceId=' + detailId
            });
        },

        qrtouchstart: function () {
            this.setData({
                myqr_blur: 0,
                myqr_show: false
            });
        },

        shareFriendOrCircle: function (e) {
            // let that = this;
            // if (!app.globalData.hasLogin) {
            //   wx.navigateTo({
            //     url: "/pages/auth/login/login"
            //   });
            //   return;
            // }
            // //获取分享id 用来追踪链接
            // //引荐人和非引荐人的 链接不同
            // let imgUrl = that.data.goods.shareWxUrl ? that.data.goods.shareWxUrl : that.data.goods.gallery[0];
            // var path = '/pages/goods/goods?id=' + that.data.id + '&rId=' + that.data.userInfo.id;
            // if (that.data.userInfo.isDis) { //是引荐人
            //   path = '/pages/goods/goods?id=' + that.data.id + '&shareId=' + that.data.wxShareId;
            // }
            // this.hidePoster();
            // return {
            //   title: that.data.goods.name,
            //   desc: that.data.myqr_ads,
            //   path: path,
            //   imageUrl: imgUrl
            // }
        },

        // 保存分享图
        saveShare: function () {
            let that = this;
            uni.showLoading({
                title: '图片保存中'
            });
            console.log(that);
            uni.downloadFile({
                url: that.myqr_url,
                success: function (res) {
                    console.log(res);
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function (res) {
                            uni.hideLoading();
                            uni.showModal({
                                title: '存图成功',
                                content: '图片成功保存到相册了，可以分享到朋友圈了',
                                showCancel: false,
                                confirmText: '好的',
                                confirmColor: '#a78845',
                                success: function (res) {
                                    if (res.confirm) {
                                        console.log('用户点击确定');
                                        that.setData({
                                            myqr_show: false,
                                            myqr_blur: 0
                                        });
                                    }
                                }
                            });
                        },
                        fail: function (res) {
                            uni.hideLoading();
                            uni.showModal({
                                title: '警告',
                                content: '不授权无法保存',
                                showCancel: false
                            });
                            that.setData({
                                myqr_show: false,
                                myqr_blur: 0
                            });
                        }
                    });
                },
                fail: function (res) {
                    uni.hideLoading();
                    console.log(res);
                }
            });
        },

        // “去付款”按钮点击效果
        payOrder: function (e) {
            let that = this;
            let id = e.currentTarget.dataset.id;
            let ordern = e.currentTarget.dataset.sn;
            util.request(
                api.OrderPayCheck,
                {
                    orderId: id
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    const outOrderNo = res.data;
                    console.log(res);
                    uni.continueToPay({
                        // orderId: this.data.orderId, // 内部订单号
                        outOrderNo: outOrderNo,
                        // 外部订单号 2个订单号必填一个
                        success: (res) => {
                            console.log(res);
                            const { orderId, outOrderNo } = res;
                            console.log('success res', res);
                            console.log('orderId', orderId, 'outOrderNo', outOrderNo);
                            uni.redirectTo({
                                url: '/pages/ucenter/order/order'
                            });
                        },
                        fail: (res) => {
                            console.log(res);
                            const { orderId, outOrderNo, errNo, errMsg, errLogId } = res;
                            if (errLogId) {
                                console.log('查询订单信息失败', errNo, errMsg, errLogId);
                            }
                            if (orderId || outOrderNo) {
                                console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
                                console.log('订单号' + outOrderNo);
                                // wx.navigateTo({
                                //   url: '/pages/ucenter/orderDetail/orderDetail?id='+outOrderNo
                                // });
                            }

                            util.showErrorToast('支付失败');
                        }
                    });
                }
            });
        },

        // “删除”点击效果
        deleteOrder: function (e) {
            let that = this;
            let id = e.currentTarget.dataset.id;
            uni.showModal({
                title: '',
                content: '确定要删除此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderDelete,
                            {
                                orderId: id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '删除订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “取消订单”点击效果
        cancelOrder: function (e) {
            let that = this;
            let id = e.currentTarget.dataset.id;
            uni.showModal({
                title: '',
                content: '确定要取消此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderCancel,
                            {
                                orderId: id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '取消订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “待上门”点击效果
        confirmOrder: function (e) {
            let that = this;
            let id = e.currentTarget.dataset.id;
            uni.showModal({
                title: '',
                content: '确认上门服务？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderConfirm,
                            {
                                orderId: id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '确认上门成功！'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        // “取消订单并退款”点击效果
        refundOrderOld: function (e) {
            let that = this;
            let id = e.currentTarget.dataset.id;
            uni.showModal({
                title: '',
                content: '确定要取消此订单？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.OrderRefund,
                            {
                                orderId: id
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '取消订单成功'
                                });
                                util.redirect('/pages/ucenter/order/order');
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        showRefundDia:function(e){
			 let id = e.currentTarget.dataset.id;
			this.setData({
				refundTipShow:true,
				refundId:id
			});
		},
        refundOrder: function (e) {
			this.setData({
				refundTipShow:false
			});
           
            uni.navigateTo({
                url: '/pages/ucenter/applyRefund/applyRefund?id=' + this.refundId
            });
        },

        buyAgain(e) {
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/goods/goods?id=' + id
            });
        },

        goCheck(e) {
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
            });
        },
 goOrderDetailNew(e) {
	 let status= e.currentTarget.dataset.status;
            let id = e.currentTarget.dataset.id;
			console.log(status);
			if(status=='未支付'){
				uni.navigateTo({
				    url: '/pages/ucenter/orderDetail/orderDetailPay?id=' + id
				});
			}else{
				uni.navigateTo({
				    url: '/pages/ucenter/orderDetail/orderDetail?id=' + id
				});
			}

        },
        handleInit(event) {
            const { status } = event.detail;
            console.log(status);
        },

        handleSuccess(event) {
            const { result } = event.detail;
            // 团购订单不支持查看评价，此时可决定按钮是否展示
            console.log(result);
        },

        handleError(event) {
            const { errMsg, errNo } = event.detail;
            // errNo（错误码，对应某种具体报错原因）
            // errMsg（报错信息）
            console.log(errMsg, errNo);
        },

        goSaveQrcode() {
            console.log('占位：函数 goSaveQrcode 未声明');
        },

        hidePoster() {
            console.log('占位：函数 hidePoster 未声明');
        },
		goIM() {
			this.setData({
				refundTipShow:false
			});
		    console.info('goIm');
		    uni.navigateTo({
		        url: '/pages/chat/im/im'
		    });
		},
    }
};
</script>
<style>
page {
    /* height: 100%; */
    width: 100%;
    background: #f4f4f4;
}

.orders-switch {
    width: 100%;
    background: #fff;
    height: 84rpx;
    /* border-bottom: 1px solid rgba(0,0,0,.15); */
}

.orders-switch .item {
    display: inline-block;
    height: 82rpx;
    width: 18%;
    padding: 0 15rpx;
    text-align: center;
}

.orders-switch .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #9a9ba1;
    font-size: 30rpx;
    width: 170rpx;
}

.orders-switch .item.active .txt {
    color: #ab956d;
    border-bottom: 4rpx solid #ab956d;
}

.no-order {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.no-order .c {
    width: 100%;
    height: auto;
    padding-top: 400rpx;
}

.no-order .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 29rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 29rpx;
    color: #999;
}

.orders {
    height: auto;
    width: 750rpx;
    /* overflow: hidden; */
    padding: 0 24rpx;
    margin-top: 110rpx;
}

.order {
    /* margin-top: 20rpx; */
    background: #fff;
    padding: 0 24rpx 24rpx 24rpx;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
}

.order .h {
    height: 72rpx;
    border-bottom: 2rpx solid #e0e0e0;
    color: #191919;
    font-size: 28rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order .h .l {
}

.order .h .r {
}

.order .goods {
    display: flex;
    /* align-items: center; */
    padding: 24rpx 0 0;
    position: relative;
}

.order .goods .img {
    height: 190rpx;
    width: 190rpx;
    background: #f4f4f4;
}

.order .goods .img image {
    height: 190rpx;
    width: 190rpx;
    overflow: hidden;
    border-radius: 10rpx;
}

.order .goods .info {
    height: 145.83rpx;
    flex: 1;
    padding-left: 20rpx;
}
.info-orderSn {
    font-size: 28rpx;
    font-weight: bold;
}
.info-main {
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 58rpx; */
}
.info .sku-name {
    color: #666666;
    font-size: 24rpx;
    margin: 10rpx 0;
    height: 34rpx;
    line-height: 34rpx;
    display: flex;
    justify-content: space-between;
}
.product-name {
    line-height: 40rpx;
    font-size: 28rpx;
    /* padding-left: 20rpx;
  text-indent: -16rpx; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 328rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
}
.info-main .price {
    color: rgba(0, 0, 0, 0.9);
    font-size: 24rpx;
    font-weight: bold;
}
.info .other-info {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34rpx;
}

.order .goods .status {
    width: 105rpx;
    color: #b4282d;
    font-size: 25rpx;
}

.order .b {
    height: 44rpx;
    line-height: 44rpx;
    /* border-top: 1px solid #f4f4f4; */
    font-size: 26rpx;
    color: #666;
    text-align: right;
}
.order .b text {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold;
}
.order .b .l {
    /* float: left; */
}

.order .b .r {
    float: right;
}

.order .b .btn {
    margin-top: 19rpx;
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 28rpx;
    color: #fff;
    background: #b4282d;
}

.order-operate-wrapper {
    /* height: 80rpx; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    flex-wrap: wrap;
    border-top: 2rpx solid #e0e0e0;
    padding: 10rpx 0 12rpx;
    margin: 20rpx 0 0;
}
/* .order-operate-wrapper::after {
  content: '';
  flex: auto;
} */
.order-operate-wrapper > view {
    text-align: center;
    font-size: 28rpx;
    color: #fff;
    margin-left: 20rpx;
    width: 190rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
    border-radius: 72rpx;
    margin-top: 10rpx;
	font-weight: bold;
}
.order-operate-wrapper > view.del {
    border: 2rpx solid #d8d8d8;
    /* color: #666666; */
	color: rgba(0,0,0,0.85);
    background: #fff;
}
.order-operate-wrapper > view.appoint {
    background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
}

.myqr {
    position: fixed;
    z-index: 999;
    width: 100%;
    text-align: center;
    height: auto;
    padding-top: 50rpx;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.myqr .cancel {
    width: 60rpx;
    height: 60rpx;
    margin-top: 30rpx;
    margin-left: 480rpx;
}
.myqr .img {
    width: 480rpx;
}
.myqr .btn {
    width: 120rpx;
    height: 120rpx;
    line-height: 120rpx;
    margin-top: 20rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 60rpx;
}

/* 会员卡蒙层的样式 */
.poster {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #333333d1;
    /* padding: 0rpx 80rpx;
  padding-top: 20%;*/
    z-index: 99;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.title {
    color: #fff;
    margin: 20rpx 0;
    font-size: 30rpx;
}
.ads {
    margin: 10rpx 0rpx;
    color: #fff;
}
.tool {
    display: flex;
    text-align: center;
    justify-content: baseline;
    width: 100%;
    margin-top: 20rpx;
}
.tool view {
    flex: 1;
}

.img {
    width: 99rpx;
}

.closeImg {
    width: 57rpx;
    height: 57rpx;
}

.share-btn {
    background-color: transparent;
}

.share-btn::after {
    border: none;
}

.m-card {
    width: 100%;
    height: 230rpx;
    margin: 20rpx 0;
}
.m-card image {
    width: 100%;
    height: 230rpx;
}
.appoint-tabs-wrapper {
    height: 88rpx;
    display: flex;
    align-items: center;
    line-height: 88rpx;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 99;
}
.appoint-tab-item {
    font-weight: bold;
    font-size: 30rpx;
    color: #191919;
    /* width:80rpx; */
}
.appoint-tab-item.active {
    color: #fe2b54;
    /* border-bottom:4rpx solid #09afff; */
}
.detail-btn {
    width: 148rpx;
    text-align: center;
    line-height: 60rpx;
    text-align: center;
    font-size: 26rpx;
    color: #00b9ff;
    margin-top: -20rpx;
    /* margin-left:340rpx; */

    width: 170rpx;
    height: 60rpx;
    background: #ffffff;
    border: 2rpx solid #00b9ff;
    border-radius: 60px;
    float: right;
}
.status-tips {
    height: 56rpx;
    background: #ebebeb;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    padding: 0 0 0 16rpx;
    margin-top: 24rpx;
}
.status-tips image {
    width: 36rpx;
    height: 32rpx;
}
.status-tips view {
    font-size: 24rpx;
    color: #2e3333;
}
.status-tips .tips-title {
    color: #191919;
    font-weight: bold;
    margin: 0 16rpx;
}
.customer-msg {
    background: #ebebeb;
    border-radius: 10rpx;
    display: flex;
    padding: 12rpx 16rpx;
    margin-top: 24rpx;
}
.customer-msg .msg-title {
    color: #fe2b54;
    font-weight: bold;
    font-size: 24rpx;
    white-space: nowrap;
}
.customer-msg .msg-text {
    line-height: 34rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 24rpx;
    color: #000000;
}
.over-time {
    position: absolute;
    top: 170rpx;
    right: 0;
    line-height: 40rpx;
    color: #ad0000;
    font-size: 28rpx;
}
.eval-btn {
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    margin-left: 20rpx;
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
    border-radius: 56rpx;
    margin-top: 10rpx;
    border: 2rpx solid #ff8219;
    color: #ff8219;
    background: #fff;
}
.order-operate-wrapper view.eval-btn {
    border: 2rpx solid #ff8219;
    color: #ff8219;
    background: #fff;
}

.tips-item{
	background: #fff;
	border-radius:12rpx;
	padding:30rpx 0rpx 0;
	margin-bottom: 20rpx;
}
.tips-item-title{
	display: flex;
	height:40rpx;
	align-items: center;
	justify-content: space-between;
	margin-bottom:20rpx;
	padding:0 32rpx;
}
.item-title-left{
	display: flex;
	align-items: center;
}
.item-title-left image{
	width:28rpx;
	height:28rpx;
	margin-right:8rpx;
}
.item-title-left text{
	font-size: 28rpx;
	font-weight: bold;
	color:#333;
}
.item-title-right{
	height: 34rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
	border: 1rpx solid #5FB306;
	padding:0 8rpx;
	line-height: 34rpx;
	font-size: 22rpx;
	color: #5FB306;
}
.tips-item-line{
	display: flex;
	height:44rpx;
	margin-bottom:20rpx;
	align-items: center;
	justify-content: space-between;
	padding:0 32rpx;
}
.tips-item-line .line-left{
	font-size: 28rpx;
	color: #999999;
}
.tips-item-line .line-right{
font-size: 28rpx;
color: #333333;
font-weight: bold;
width:500rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
}
.line-right text{
	color: #5FB306;
}
.tips-item-content{
	background: #FF4447;
	border-radius: 0rpx 0rpx 14rpx 14rpx;
	padding:24rpx 24rpx 24rpx 32rpx;
	line-height: 40rpx;
	font-size: 28rpx;
	color: rgba(255,255,255,0.9);

}
.order-devide{
	height:40rpx;
	margin-bottom:20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 4rpx;
}
.order-devide .line{
	width: 290rpx;
	height: 1rpx;
	background: #979797;
}
.order-devide .devide-text{
	font-size: 28rpx;
	color: #999999;
}

/* 退款弹框 */
.refund-order-overlay {
    width: 750rpx;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
	z-index:999;
}

.refund-order-dialog {
	width: 606rpx;
	height: 644rpx;
	border-radius: 14rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    padding: 300rpx 30rpx 40rpx;
    background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund.png') no-repeat;
	background-color: #FFFFFF;
    background-size: 606rpx 210rpx;
}
.refund-dia-title {
	height: 56rpx;
    font-weight: bold;
    font-size: 40rpx;
    color: rgba(0,0,0,0.85);
    line-height: 56rpx;
    text-align: center;
	margin:60rpx 0 34rpx;
}
.refund-dia-tips {
   width: 540rpx;
    color: #333333;
    line-height: 46rpx;
    font-size: 32rpx;
    color: rgba(0,0,0,0.85);
    text-align: center;
	white-space: wrap;
    margin-bottom: 120rpx;
	font-weight: bold;
}

.dia-btn-wrapper {
    height:94rpx;
	display: flex;
	justify-content: space-between;
}
.dia-cancel-btn{
	width: 248rpx;
	height: 94rpx;
	line-height: 94rpx;
	border-radius: 94rpx;
	border: 2rpx solid #0093FF;
	font-size: 32rpx;
	color: #0093FF;
	/* font-weight: bold; */
	text-align: center;
}
.dia-conf-btn{
	width: 258rpx;
	height: 94rpx;
	line-height: 94rpx;
	border-radius: 94rpx;
	font-size: 32rpx;
	color: #fff;
	font-weight: bold;
	background: #0093FF;
	text-align: center;
}

</style>