jzmall_verify_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 == 2 ? 'active' : '')" data-tab="2" @tap="onTabChange">服务中</view>
            <view :class="'appoint-tab-item ' + (showType == 1 ? 'active' : '')" data-tab="1" @tap="onTabChange">未支付</view>
            <view :class="'appoint-tab-item ' + (showType == 0 ? 'active' : '')" data-tab="0" @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">
                <view class="order" v-for="(item, index) in orderList" :key="index">
                    <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"></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 && item.orderChannel != 38" class="over-time">{{ utils.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 == '服务已完成'">
                        <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">
                        <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="revertOrder" :data-id="item.id" v-if="item.canReverse" class="del">取消预约</view>
                        <view @tap.stop.prevent="refundOrder" :data-id="item.id" v-if="item.handleOption.refund" class="del">售后/退款</view>
                        <!-- <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> -->

                        <!-- 抖音评价 -->
                        <!-- <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-goodsid="item.goodsId"
                            :data-sn="item.orderSn"
                            :data-aid="item.addressId"
                            :data-type="item.type"
                            v-if="item.handleOption.book"
                            class="appoint"
                        >
                            预约服务
                        </view>
                        <view @tap.stop.prevent="payOrder" :data-id="item.id" :data-sn="item.orderSn" v-if="item.handleOption.pay">立即支付</view>
                        <view class="btn-rebuy" @tap="buyAgain" :data-id="item.goodsId" v-if="item.handleOption.rebuy">再次购买</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            timer: '',
            orderList: [],
            showType: 2,
            page: 1,
            limit: 10,
            totalPages: 1,
            myqr_show: false,
            //我的分享二维码
            myqr_url: null,
            myqr_blur: 0,
            //背景模糊值
            myqr_width: 0,
            hasLogin: false,
            goodsId: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        if (options.tab) {
            this.setData({
                showType: options.tab
            });
        }
    },
    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: {
        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),
                        totalPages: res.data.pages
                    });
                    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();
        },

        //撤销
        revertOrder(e) {
            let id = e.currentTarget.dataset.id;
            let that = this;
            uni.showModal({
                title: '',
                content: '确认取消预约？',
                success: function (res) {
                    if (res.confirm) {
                        util.request(
                            api.RevertVerify,
                            {
                                orderId: id
                            },
                            'GET'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.showToast({
                                    title: '操作成功！'
                                });
                                that.setData({
                                    orderList: [],
                                    page: 1,
                                    totalPages: 1
                                });
                                that.getOrderList();
                            } else {
                                util.showErrorToast(res.errmsg);
                            }
                        });
                    }
                }
            });
        },

        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 goodsId=e.currentTarget.dataset.goodsid
            uni.navigateTo({
                url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id+'&goodsId='+goodsId
            });
        },

        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);
                            }
                        });
                    }
                }
            });
        },

        refundOrderOld: function (e) {
            let id = e.currentTarget.dataset.id;
        },

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

        buyAgain(e) {
            let id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/goods/goods?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 未声明');
        }
    }
};
</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: 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;
}
.order-operate-wrapper > view.del {
    border: 2rpx solid #d8d8d8;
    color: #666666;
    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: #666;
}
.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;
}
</style>