jzmall_verify_uni/pages/ucenter/appointOrder/appointOrder.vue

<template>
    <view class="container">
		<!-- 步骤 -->
		<view class="step-block">
			   <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-01.png" class="step-img"></image>
			  <view class="step-right">
				  <view class="step-title">填写上门信息</view>
				  <view class="step-tips">服务所需的地址、电话等信息</view>
			  </view>
		</view>
        <!-- 地址 -->
        <view class="order-address">
            <!-- 有地址，选择 -->
            <view v-if="addressId > 0" class="address-select" @tap="addressSelect">
                <!-- <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png" class="map-img"></image> -->

                <view class="address-main">
					<view class="customer-address">
						 <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-map-yj.png" class="map-img"></image>
					<view>{{ checkedAddress.addressDetail }}</view>
					</view>
                    <view class="main-line">
                        <view>{{ checkedAddress.name }}</view>
                        <view class="phone">{{ checkedAddress.tel }}</view>
                    </view>
                    
                </view>
                <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-arrow-blue.png" class="arrow-img"></image>
            </view>
            <!-- 没地址，输入 -->
            <view v-else class="address-input-module add-address">
                <view class="add-form">
                    <view class="form-item" @tap="goMap" style="height: auto; min-height: 78rpx">
                        <view class="label">
                            <text>*</text>
                            服务地址
                        </view>
                        <view class="content" style="height: auto; min-height: 78rpx">
                            <view v-if="address.addressname == ''" style="color: #acadb1; font-size: 24rpx" class="input">选择省、市、县（区）、乡（镇）</view>
                            <view v-else class="input">{{ address.addressname }}</view>
                            <!-- <input class="input" value="{{address.addressname}}" disabled="true" placeholder="选择省、市、县（区）、乡（镇）"  placeholder-style="color: #ACADB1;;font-size:24rpx;"/> -->

                            <image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-address-map.png" style="width: 28rpx; height: 28rpx; margin: 28rpx 0 0 10rpx"></image>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="label">
                            <text>*</text>
                            小区门牌
                        </view>
                        <view class="content">
                            <input
                                class="input"
                                @input="bindinputAddress"
                                :value="address.detail"
                                placeholder="详细地址，例xx小区x号楼x单元xx室"
                                placeholder-style="color: #ACADB1;;font-size:24rpx;"
                            />
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="label">
                            <text>*</text>
                            联系人
                        </view>
                        <view class="content special-content">
                            <input class="input" @input="bindinputName" placeholder="姓名" :value="address.name" auto-focus placeholder-style="color: #ACADB1;;font-size:24rpx;" />
                            <view class="gender-wrapper">
                                <view class="female" @tap="femaleSelect">
                                    <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-select-popup.png" mode="asceptFit" v-if="gender == 2"></image>
                                    <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png" mode="asceptFit" v-else></image>
                                    <text>女士</text>
                                </view>
                                <view class="male" @tap="maleSelect">
                                    <image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" mode="asceptFit" v-if="gender == 1"></image>
                                    <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-unselect-popup.png" mode="asceptFit" v-else></image>
                                    <text>先生</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <view class="label">
                            <text>*</text>
                            联系电话
                        </view>
                        <view class="content">
                            <input
                                class="input"
                                @input="bindinputMobile"
                                :value="address.tel"
                                type="number"
                                placeholder="手机号码"
                                maxlength="11"
                                placeholder-style="color: #ACADB1;;font-size:24rpx;"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
       <!-- 步骤 -->
       <view class="step-block">
       	   <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-02.png" class="step-img"></image>
       	  <view class="step-right">
       		  <view class="step-title">预约服务时间</view>
       		  <view class="step-tips">选择您想要的服务时间</view>
       	  </view>
       </view>
		<!-- <view style="color: red; font-size: 24rpx; margin-top: 20rpx">临近春节，服务力紧张，我们会尽量为您安排。如果不能准时服务，支持全额退款</view> -->
        <!-- 预约服务时间 -->
        <view class="appoint-main-module">
            <view class="appoint-block appoint-block-special" @tap="showAppoint">
               <!-- <view class="title">
                    <text>*</text>
                    上门时段
                </view> -->
                <view class="appoint-time" v-if="appointDate == ''">服务者将在该时段内上门</view>
                <view class="appoint-timed" v-else>{{ appointDate }}</view>
				<view v-if="appointDate!= ''&&futureDays>=1" class="future-days">
					距离今日 <text>{{futureDays}}</text> 天
				</view>
               
            </view>
			 <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-arrow-blue.png" mode="aspectFit" class="arrow-img"></image>
    
        </view>
		
		<!-- 步骤 -->
		<view class="step-block">
			   <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/step-03.png" class="step-img"></image>
			  <view class="step-right">
				  <view class="step-title">填写备注</view>
				  <view class="step-tips">请提前告知需要我们注意的信息</view>
			  </view>
		</view>
		        <view class="appoint-main-module">
					<view class="appoint-block" @tap="showRemarkSelect">
					    <!-- <view class="title">选择备注</view> -->
					    <view class="appoint-time" v-if="remark == ''">请选择备注</view>
					    <view class="appoint-timed" v-else>{{ remark }}</view>
					    <image src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-arrow-blue.png" mode="aspectFit" class="arrow-img"></image>
					</view>
					</view>
					<view class="appoint-main-module textarea-wrapper">
						
						
						<textarea  placeholder="其他备注请填写" class="remark-extra" :value="message" placeholder-style="font-size:24rpx;color: #ACADB1;" @input="bindMessageInput" auto-height/>
						
						</view>
					

        <!-- 商品 -->
      <!--  <view class="product-block">
            <view class="product-detail">
                <view class="profuct-info">
                    <image mode="aspectFit" class="product-img" :src="orderGoods.picUrl"></image>
                    <view class="info-right">
                        <view class="info-main">
                            <view class="product-name">{{ orderGoods.name }}</view>
                            <view class="price">
                                ¥
                                <text style="font-size: 24rpx">{{ amount / 100 }}</text>
                            </view>
                        </view>
                        <view class="sku-name">规格:{{ orderProduct.specifications }}</view>
                        <view class="other-info">服务{{ orderProduct.serviceTimes }}次</view>
                    </view>
                </view>
            </view>
        </view> -->
        <!-- 订单信息 -->
      <!--  <view class="order-info">
            <view class="order-top">
                <view class="topic">订单编号：</view>
                <view>
                    {{ dyOrderId }}
                </view>
                <image mode="aspectFit" class="copy-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" @tap="copyOrder"></image>
            </view>
            <view class="order-top">
                <view class="topic">抖音券号：</view>
                <view>
                    {{ certificateId }}
                </view>
            </view>
            <view class="order-top">
                <view class="topic">订单金额：</view>
                <view>¥{{ amount / 100 }}</view>
            </view>
        </view> -->
        <!-- 提交按钮 -->
        <!-- <view class="appoint-btn" bindtap="submitAll" wx:if="{{!isHide}}">
    立即预约
  </view> -->
        <view class="appoint-btn" @tap="submitAll">立即预约</view>

        <!-- 备注弹框 -->
        <view class="appoint-overlay-wrapper" v-if="remarkShow" @tap="onRemarkClose"></view>
        <view class="remark-popup" v-if="remarkShow">
            <view class="title">订单备注</view>
            <textarea
                @input="bindMessageInput"
                placeholder="请输入订单备注信息"
                :value="message"
                placeholder-style="font-size:26rpx;color:#666;"
                maxlength="200"
                class="remark-textarea"
            ></textarea>
            <view class="btn" @tap="confirmRemark">确定</view>
        </view>

        <view class="appoint-overlay-wrapper" v-if="choosePopup" @tap="onClose"></view>
        <view class="popup-wrapper popup-wrapper-special" v-if="choosePopup">
            <!-- 标题 -->
            <view class="popup-title popup-title-special popup-title-new">
                <view>选择服务开始时间</view>
                <view v-if="selectTimeValue >= 17" class="fee-tips">您选的时间段可能会加收夜间服务费，具体以与商家的沟通为准</view>
                <!-- 选择服务者上门时段（具体服务时长以实际服务为准） -->
            </view>

            <block>
                <view class="popup-content popup-content-special">
                    <view class="time-select-left">
                        <view
                            class="time-select-left-item"
                            @tap="dateCheck"
                            :data-index="index"
                            :data-week="item.week"
                            :data-date="item.date"
                            :data-isbook="item.isBook"
                            v-for="(item, index) in dateList"
                            :key="index"
                        >
                            <view class="date-line-wrapper">
                                <view :class="dateIndex == index ? 'current-date' : ''">{{ item.bookdate + ' ' + item.weekOfDay }}</view>
                                <view>
                                    <text v-if="index <= 1" class="date-tag">{{ index == 0 ? '今天' : '明天' }}</text>
                                </view>
                            </view>

                            <view :class="'date-msg ' + (item.dateMsg == '可约' ? 'avail-date' : '')">{{ item.dateMsg }}</view>
                        </view>
                    </view>
                    <view class="time-select-right">
                        <view class="noon-select">
                            <view :class="'noon-item ' + (noonType == '1' ? 'active-noon' : '')" data-noon="1" @tap="noonTab">上午</view>
                            <view :class="'noon-item ' + (noonType == '2' ? 'active-noon' : '')" data-noon="2" @tap="noonTab">下午</view>
                        </view>
                        <view class="time-item-wrapper">
                            <view
                                :class="'time-select-right-item ' + (item.timeMsg ? 'invalid-time' : '')"
                                @tap="timeCheck"
                                :data-stock="item.stock"
                                :data-index="index"
                                :data-msg="item.timeMsg"
                                v-for="(item, index) in timeList"
                                :key="index"
                            >
                                <!-- <view class="{{item.stock<=0?'zero-stock':''}}"> -->

                                <view class="time-line">
                                    <text :class="timeIndex === index ? 'current-date' : ''">{{ item.begin }}</text>
                                    <!-- <text class="stock-text">(库存:{{item.stock}})</text> -->
                                    <text v-if="selectTimeValue >= 17 && timeIndex == index && !item.timeMsg" class="extra-tips">收夜间服务费</text>
                                    <text v-if="timeIndex === index" class="date-tag">已选</text>
                                    <view v-if="item.timeMsg && item.timeMsg != null" class="time-msg">
                                        {{ item.timeMsg }}
                                    </view>
                                </view>

                                <!-- <view wx:if="{{timeIndex===index&&item.time>='17:00'}}" style="font-size: 11px;line-height: 12px;">您选的时间段可能会加收夜间服务费，具体以与商家的沟通为准</view> -->
                            </view>
                        </view>
                    </view>
                </view>
            </block>

            <!-- 确认按钮 -->
            <view class="popup-btn-wrapper">
                <view @tap="confirmTime" class="confirm-btn">确定</view>
            </view>
        </view>

        <!-- 地址弹框 -->
        <view class="appoint-overlay-wrapper address-overlay" v-if="addressShow" @tap="onAddressClose">
            <view class="address-popup" cantap="onAddressClick">
                <view class="title">选择地址</view>
                <view class="address-list">
                    <view class="address-item" :data-address="item" @tap="addressConfirm" v-for="(item, index) in addressList" :key="index">
                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png" class="map-img"></image>

                        <view class="address-main">
                            <view class="main-line">
                                <view>{{ item.name }}</view>
                                <view class="phone">{{ item.tel }}</view>
                            </view>
                            <view class="customer-address">{{ item.addressDetail }}</view>
                        </view>

                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/wx-dy/arrow-grey.png" class="arrow-img"></image>
                    </view>
                </view>
                <view class="add-address-btn" @tap="goAddAddress">添加其他地址</view>
            </view>
        </view>

        <!-- 备注弹框 -->
        <view class="appoint-overlay-wrapper remark-overlay" v-if="remarkPopupShow" @tap="onRemarkPopupClose">
            <view class="remark-select" @tap.stop.prevent="onRemarkClick">
                <view class="title">选择备注</view>
                <view class="remark-list">
                    <view class="remark-item" :data-remark="item" @tap.stop.prevent="remarkItemSelect" v-for="(item, index) in remarkList" :key="index">
                        <view class="remark-value">{{ item }}</view>

                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" class="radio-img" v-if="remarkActive == item"></image>

                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" class="radio-img" v-else></image>
                    </view>
                </view>
                <view class="remark-conf-btn" @tap.stop.prevent="remarkItemConfirm">提交备注</view>
            </view>
        </view>
    </view>
</template>

<script>
//获取应用实例
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var check = require('../../../utils/check.js');
var app = getApp();
export default {
    data() {
        return {
			futureDays:'',
            type: '',

            //2为修改预约类型
            gender: '2',

            address: {
                id: 0,
                areaCode: 0,
                address: '',
                name: '',
                tel: '',
                isDefault: 0,
                province: '',
                city: '',
                county: '',
                latitude: '',
                longitude: '',
                addressDetail: '',
                detail: '',
                addressname: ''
            },

            addressIdSave: '',

            //新增地址保存
            checkedAddress: {
                name: '',
                tel: '',
                addressDetail: ''
            },

            addressList: [],
            addressShow: false,
            remark: '',
            remarkPopupShow: false,
            remarkList: ['上门前提前电话联系', '请准时到达', '请自带打扫工具', '主要打扫厨房&卫生间', '家里有宠物'],
            remarkActive: '',
            serviceId: '',
            message: '',
            remarkShow: false,
            addressId: '',
            addressName: '',
            noAppoint: '',
            aftersaleStatus: '',
            orderId: '',
            order: '',
            bookId: '',
            bookCount: 0,
            orderStatusText: '订单服务中',
            activeTab: 1,

            orderBook: {
                status: ''
            },

            orderChannel: 0,
            jzOrderBookDetails: [],
            unusedSerList: [],
            usedSerList: [],
            serList: [],
            choosePopup: false,
            timeList: [],

            // dateList: util.getDateList(new Date(new Date().getTime() + 60 * 60 * 1000 * 24 * 0), 1, 30),
            dateList: [],

            timeIndex: '',

            //选中的时间段
            dateIndex: 0,

            //选中的日期
            appointDate: '',

            //显示信息
            isHide: false,

            certificateId: '',

            //抖音券
            dyOrderId: '',

            //抖音券的订单号
            goodsId: '',

            //抖音券上的第三方商品id
            amount: '',

            //抖音券支付金额
            specifications: '',

            //商品规格
            orderGoods: {
                picUrl: '',
                name: ''
            },

            orderProduct: {
                specifications: '',
                serviceTimes: ''
            },

            noonType: 1,
            selectTimeValue: '',
            dySku: '',
            remainTimes: '',
            mobile: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(options);
        if (options.type) {
            this.setData({
                type: options.type
            });
        }
        if (options.serviceId) {
            this.setData({
                serviceId: options.serviceId
            });
        }
        if (options.orderId) {
            this.setData({
                orderId: options.orderId
            });
        }
        if (options.goodsId) {
            //券绑定的商品
            this.setData({
                goodsId: options.goodsId
            });
        }
        if (options.amount) {
            //券支付金额
            this.setData({
                amount: options.amount
            });
        }
        if (options.dyOrderId) {
            //券订单
            this.setData({
                dyOrderId: options.dyOrderId
            });
        }
        if (options.dySku) {
            //券订单
            this.setData({
                dySku: options.dySku
            });
        }
        if (options.certificateId) {
            //券码
            this.setData({
                certificateId: options.certificateId
            });
        }
    },
    onShow: function () {
        this.getOrderGoodsDetail();
        if (app.globalData.mapSelectFinish) {
            let poi = app.globalData.mapSelectPoi;
            let location = poi.location;
            let address = this.address;
            address.lng = location.split(',')[0];
            address.lat = location.split(',')[1];
            address.addressname = poi.address;
            this.setData({
                address: address
                // selectAddress:poi.address
            });

            console.log(this.address);
            this.getAreaCode();
        }
    },
    methods: {
        getOrderGoodsDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            util.request(api.OrderGoodsInfo, {
                goodsId: this.goodsId
            }).then((res) => {
                if (res.errno === 0) {
                    uni.hideLoading();
                    console.log(res.data);
                    this.setData({
                        addressId: res.data.addressId,
                        remainTimes: res.data.serviceTimes - res.data.servedTimes,
                        orderGoods: res.data.orderGoods,
                        orderProduct: res.data.orderProduct
                    });
                    if (res.data.addressId) {
                        this.getAddressList();
                    }
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        getAddressList() {
            util.request(api.AddressList).then((res) => {
                if (res.errno === 0) {
                    this.setData({
                        addressList: res.data.list
                    });
                    let current = this.addressList.filter((item) => {
                        return item.id == this.addressId;
                    });
                    if (current.length > 0) {
                        this.setData({
                            checkedAddress: current[0]
                        });
                    }
                }
            });
        },

        showAppoint(e) {
            if (this.appointDate != '') {
                this.setData({
                    choosePopup: true
                });
                return false;
            } else {
                this.setData({
                    choosePopup: true,
                    noonType: 1,
                    timeIndex: 0
                });
                let params = {
                    days: 30,
                    // orderBookId:this.data.bookId,
                    bookId: this.serviceId,
                    productId: this.orderProduct.id,
                    serviceDuration: this.orderProduct.serviceDuration
                };
                this.getDayTime(params);
            }

            // console.info('getDayStock')
            // this.getDayStock();

            //如果是当天 只能预约四小时后 大于12点 默认加载下午时间段
            // if (this.data.dateList[this.data.dateIndex].name == '今天' ) {
            //   this.setData({
            //     noonType: 2,
            //   })
            // }
            // this.getTimeList();
        },

        getTimeList() {
            let timeList = util.getBeginTimeList(this.orderProduct.serviceDuration, this.noonType, this.dateList[this.dateIndex].name);
            this.setData({
                timeList: timeList,
                selectTimeValue: timeList.length == 0 ? '' : timeList[0].value
            });
            if (this.timeList.length == 0) {
                this.setData({
                    timeIndex: ''
                });
            }
        },

        getDayStock() {
            if (this.dateIndex < 0) {
                return false;
            }
            if (!this.addressIdSave && !this.checkedAddress) {
                util.showErrorToast('请选择地址');
                return;
            }
            let params = {
                day: this.dateList[this.dateIndex].date,
                goodsId: this.orderGoods.id,
                lng: this.address.lng,
                lat: this.address.lat,
                productId: this.orderProduct.id,
                serviceDuration: this.orderProduct.serviceDuration
            };
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.EveryDayStock, params, 'GET')
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno == 0) {
                        this.setData({
                            timeList: res.data
                        });
                        let validList = this.timeList.filter((item) => {
                            return item.stock > 0;
                        });
                        if (validList.length > 0) {
                            this.setData({
                                timeIndex: validList[0].id - 1
                            });
                        } else {
                            this.setData({
                                timeIndex: ''
                            });
                        }
                    } else {
                        uni.showToast({
                            title: res.errmsg,
                            icon: 'none',
                            duration: 2000
                        });
                        this.setData({
                            timeList: [],
                            timeIndex: ''
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                    uni.showToast({
                        title: err.errMsg,
                        icon: 'none'
                    });
                    this.setData({
                        timeList: [],
                        timeIndex: ''
                    });
                });
        },

        onClose() {
            this.setData({
                choosePopup: false
            });
        },

        getDayTime(params) {
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.everyDayTime, params, 'GET')
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno == 0) {
                        this.setData({
                            dateList: res.data,
                            dateIndex: 0,
                            timeIndex: -1,
                            noonType: 1
                        });
                        let period = res.data[0].period;
                        let list = period.filter((item) => {
                            return item.ofTime == '上午';
                        });
                        this.setData({
                            timeList: list
                        });
                    } else {
                        uni.showToast({
                            title: res.errmsg,
                            icon: 'none',
                            duration: 2000
                        });
                        this.setData({
                            timeList: [],
                            timeIndex: ''
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                    uni.showToast({
                        title: err.errMsg,
                        icon: 'none'
                    });
                    this.setData({
                        timeList: [],
                        timeIndex: ''
                    });
                });
        },

        dateCheck(e) {
            let index = e.currentTarget.dataset.index;
            let date = e.currentTarget.dataset.date;
            let week = e.currentTarget.dataset.week;
            let isbook = e.currentTarget.dataset.isbook;
            this.setData({
                dateIndex: index
            });
            let period = this.dateList[this.dateIndex].period;
            let current = this.noonType == 1 ? '上午' : '下午';
            let list = period.filter((item) => {
                return item.ofTime == current;
            });
            this.setData({
                timeList: list
            });
            let isNoTime = list.every((item) => {
                return item.timeMsg && item.timeMsg != null;
            });
            if (isNoTime) {
                this.setData({
                    timeIndex: -1,
                    selectTimeValue: ''
                });
            }

            // if (isbook) {
            //   this.setData({
            //     dateIndex: index
            //   });
            //   this.getDayStock();
            // }
            //上一个选中日期是今日 这里需要变更时间段
            //   let dateName = this.data.dateList[this.data.dateIndex].name;

            // this.setData({
            //   dateIndex: index
            // });

            //    let curDateName = this.data.dateList[this.data.dateIndex].name;

            //    if ((curDateName == '今天') || ((new Date()).getHours() >18&&curDateName == "明天")) {
            //      this.setData({
            //        noonType: 2
            //      })
            //    }
            //    this.getTimeList();
        },

        timeCheck(e) {
            let index = e.currentTarget.dataset.index;
            // this.setData({
            //   timeIndex: index,
            //   selectTimeValue:this.data.timeList[index].value
            // });
            let msg = e.currentTarget.dataset.msg;
            if (msg == null || msg == '') {
                let time = this.timeList[index].begin.split(':')[0];
                this.setData({
                    timeIndex: index,
                    selectTimeValue: Number(time)
                });
            }
        },

        submitBook() {
            //提交预约
            let that = this;
            if (this.addressId == '' && this.addressIdSave == '') {
                util.showErrorToast('请输入服务地址');
                return false;
            }
            if (this.timeIndex === '' || this.timeIndex < 0||this.appointDate=='') {
                util.showErrorToast('请选择服务时间');
                return false;
            }
			uni.showModal({
				title: '温馨提示',
				content: '是否确认预约?',
				confirmColor:'#09afff',
				success: function (res) {
					if (res.confirm) {
						that.confirmOrder();
					} else if (res.cancel) {
					}
				}
			});
           
        },
		
        confirmOrder(){
			let that=this;
			let date = this.dateList[this.dateIndex].bookdate;
			let week = this.dateList[this.dateIndex].weekOfDay;
			let time = this.timeList[this.timeIndex].begin + '-' + this.timeList[this.timeIndex].end;
			console.log(date, week, time);
			let params = {
			    goodsId: this.goodsId,
			    dyOrderId: this.dyOrderId,
			    certificateId: this.certificateId,
			    addressId: this.addressId == 0 ? this.addressIdSave : this.checkedAddress.id,
			    bookDate: date,
			    bookStartTime: time.split('-')[0],
			    bookEndTime: time.split('-')[1],
			    bookRemark: this.remark + this.message,
			    amount: that.amount,
			    productId: this.orderProduct.id,
			    dySkuId: this.dySku
			};
			console.info(params);
			uni.showLoading({
			    title: '加载中...'
			});
			// 如果是修改预约，不用生成订单
			if (this.type == 2||this.orderId) {
			    params = {
			        detail_id: this.serviceId ? this.serviceId : this.orderId,
			        // bookId: this.data.bookId,
			        date: date,
			        startTime: time.split('-')[0],
			        endTime: time.split('-')[1],
			        addressId: this.addressId == 0 ? this.addressIdSave : this.checkedAddress.id,
			        // orderId: this.data.orderId,
			        remark: this.remark + this.message
			    };
			    util.request(api.ServiceOrderBookV2, params, 'GET').then((res) => {
			        if (res.errno == 0) {
			            uni.hideLoading();
			            this.setData({
			                isHide: true
			            });
			            uni.showToast({
			                title: '预约成功',
			                icon: 'none',
			                duration: 2000
			            });
			            setTimeout(() => {
			                uni.navigateTo({
			                    url: '/pages/ucenter/orderDetail/orderDetail?id=' + this.orderId
			                });
			            }, 1000);
			        } else {
			            uni.showToast({
			                title: res.errmsg,
			                icon: 'none'
			            });
			            // util.showErrorToast(res.errmsg);
			        }
			    });
			} else {
			    util.request(api.OrderPrepay, params, 'GET').then((res) => {
			        uni.hideLoading();
			        if (res.errno == 0) {
			            // this.setData({
			            //     isHide: true
			            // });
						let orderId=res.data;
						setTimeout(() => {
						    uni.navigateTo({
						        url: '/pages/ucenter/orderDetail/orderDetail?id=' + orderId
						    });
						}, 1000);
			            //拉起支付
			            // that.createOrder(res.data);
			        } else {
			            uni.showToast({
			                title: res.errmsg,
			                icon: 'none'
			            });
			        }
			    });
			}
		},
        createOrder(data) {
            console.log('data--->' + JSON.stringify(data));
            uni.createOrder({
                skuList: data.preOrderParm.skuList,
                payment: data.preOrderParm.payment,
                callbackData: data.orderInfo,
                callbackUrl: data.preOrderParm.callbackUrl,
                success: (res) => {
                    uni.hideLoading();
                    console.log('预下单成功11');
                    console.log(res);
                    const { orderId, outOrderNo } = res;
                    console.log('success res', res, 'orderId', orderId, 'outOrderNo', outOrderNo);
                    //如果是静默状态未登录 开始授权登录
                    // wx.redirectTo({
                    //   url: '/pages/checkout/payResult/payResult?status=1&outOrderNo=' + outOrderNo + '&actualPrice=' + that.data.actualPrice
                    // });
                    uni.redirectTo({
                        url: '/pages/ucenter/order/order?tab=0'
                    });
                },
                fail: (res) => {
                    uni.hideLoading();
                    console.log('预下单失败11');
                    console.log(res);
                    const { orderId, outOrderNo, errNo, errMsg, errLogId } = res;
                    if (errLogId) {
                        console.log('预下单失败', errNo, errMsg, errLogId);
                        let tomsg = errMsg;
                        if (tomsg.indexOf('createOrder') != -1) {
                            tomsg = tomsg.replace('createOrder:fail 开发者限购:', '');
                            tomsg = tomsg.replace('createOrder:fail 开发者拒绝交易:', '');
                            tomsg = tomsg.replace('createOrder:fail', '');
                        }
                        uni.showModal({
                            title: '提示',
                            content: tomsg,
                            showCancel: false
                        });
                    }
                    if (orderId || outOrderNo) {
                        uni.navigateTo({
                            url: '/pages/ucenter/orderDetail/orderDetail?id=' + outOrderNo
                        });
                        console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
                    }
                    console.log(errNo, errMsg);
                }
            });
        },

        confirmTime() {
            if (this.timeIndex === '' || this.timeIndex < 0) {
                util.showErrorToast('请选择服务时间');
                return false;
            }
            let date = this.dateList[this.dateIndex].bookdate;
            let week = this.dateList[this.dateIndex].weekOfDay;
            let time = this.timeList[this.timeIndex].begin + '-' + this.timeList[this.timeIndex].end;
			let futureDays=(((new Date(date)).getTime()-(new Date()).getTime())/(1000*24*3600));

			futureDays=Math.ceil(futureDays);
            this.setData({
                choosePopup: false,
                appointDate: date + ' ' + week + ' ' + time,
				futureDays:futureDays
            });
        },

        selectAddress() {
            //已经输入过地址的订单 不允许再次选择地址
            if (this.order.addressId > 0) {
                return;
            }
            uni.navigateTo({
                url: '/pages/ucenter/address/address'
            });
        },

        showRemark() {
            this.setData({
                remarkShow: true
            });
        },

        onRemarkClose() {
            this.setData({
                remarkShow: false
            });
        },

        confirmRemark() {
            this.setData({
                remarkShow: false
            });
        },

        bindMessageInput: function (e) {
            this.setData({
                message: e.detail.value
            });
        },

        bindPhone(e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        copyOrder() {
            uni.setClipboardData({
                data: this.dyOrderId,
                success: function (res) {
                    uni.getClipboardData({
                        success: function (res) {
                            uni.showToast({
                                title: '订单编号复制成功',
                                icon: 'success',
                                duration: 2000
                            });
                        }
                    });
                }
            });
        },

        onAddressClose() {
            this.setData({
                addressShow: false
            });
        },

        onAddressClick() {
            //阻止事件冒泡，不要删
        },

        addressConfirm(e) {
            let address = e.currentTarget.dataset.address;
            this.setData({
                checkedAddress: address,
                addressShow: false
            });
        },

        addressSelect() {
            this.setData({
                addressShow: true
            });
        },

        showRemarkSelect() {
            this.setData({
                remarkPopupShow: true
            });
        },

        onRemarkPopupClose() {
            this.setData({
                remarkPopupShow: false
            });
        },

        onRemarkClick() {
            //阻止事件冒泡，不要删
        },

        remarkItemSelect(e) {
            let remark = e.currentTarget.dataset.remark;
            this.setData({
                remark: remark,
                remarkActive: remark
            });
        },

        remarkItemConfirm() {
            if (this.remarkActive === '') {
                util.showErrorToast('请选择备注');
                return false;
            }
            this.setData({
                remarkPopupShow: false
            });
        },

        bindinputMobile(event) {
            let address = this.address;
            address.tel = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputName(event) {
            let address = this.address;
            address.name = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputAddress(event) {
            let address = this.address;
            address.detail = event.detail.value.replace(/[,，]/g, '');
            this.setData({
                address: address
            });
            // return value.replace(/[,，]/g,'');
        },

        bindAddressDetail(event) {
            let address = this.address;
            address.addressname = event.detail.value.replace(/[,，]/g, '');
            this.setData({
                address: address
            });
        },

        submitAll() {
            if (this.addressId == '' && this.addressIdSave == '') {
                this.saveAddress();
            } else {
                this.submitBook();
            }
        },

        async saveAddress() {
            console.log(this.address);
            let address = this.address;
            // if (address.addressname == 0) {
            //   util.showErrorToast('请选择服务地址');
            //   return false;
            // }
            if (address.addressname == '') {
                util.showErrorToast('请选择服务地址');
                return false;
            }
            if (address.name == '') {
                util.showErrorToast('请输入姓名');
                return false;
            }
            if (address.detail == '') {
                util.showErrorToast('请输入门牌号');
                return false;
            }
            if (this.gender == null || this.gender == '') {
                util.showErrorToast('请选择性别');
                return false;
            }
            if (address.tel == '') {
                util.showErrorToast('请输入手机号码');
                return false;
            }
            if (!check.isValidPhone(address.tel)) {
                util.showErrorToast('手机号不正确');
                return false;
            }
            let that = this;
            let addressString = address.detail == '' ? address.addressname : address.addressname + ',' + address.detail;
            uni.showLoading({
                title: '加载中...'
            });
            let res = await util.request(
                api.AddressSave,
                {
                    gender: this.gender,
                    id: address.id,
                    name: address.name,
                    tel: address.tel,
                    province: address.province,
                    city: address.city,
                    county: address.county,
                    areaCode: address.areaCode,
                    addressDetail: addressString,
                    isDefault: address.isDefault,
                    lat: Number(address.lat).toFixed(5),
                    lng: Number(address.lng).toFixed(5)
                },
                'POST'
            );
            uni.hideLoading();
            if (res.errno === 0) {
                that.setData({
                    addressIdSave: res.data
                });
                that.submitBook();
            } else {
                uni.showModal({
                    title: '提醒',
                    showCancel: false,
                    content: res.errmsg
                });
            }
        },

        goMap() {
            let that = this;
            // wx.authorize({
            //   scope: "scope.userLocation",
            //   success: (res) => {
            //     console.log("authorize", res);
            uni.chooseLocation({
                success: (location) => {
                    console.log('chooseLocation success: ', location);
                    console.log(`经度${location.longitude}，维度${location.latitude}`);
                    console.log(location);
                    if (location != null) {
                        let address = that.address;
                        address.lat = location.latitude;
                        address.lng = location.longitude;
                        address.addressname = location.address;
                        that.setData({
                            address: address
                            // selectAddress:location.address
                        });

                        console.log(that.address);
                        that.getAreaCode();
                    }
                },
                fail: (err) => {
                    console.log('chooseLocation fail: ' + err.errMsg);
                }
            });
            //   },
            //   fail: () => {
            //     wx.openSetting({});
            //   },
            // });
        },

        goMap() {
            console.log('gomap');
            app.globalData.mapSelectFinish = false;
            if (this.address.lng && this.address.lat) {
                let city = this.address.city == '市辖区' ? this.address.province : this.address.city;
                uni.navigateTo({
                    url: '/pages/map/mapContent/mapContent?lng=' + this.address.lng + '&lat=' + this.address.lat + '&addressname=' + this.address.addressname + '&city=' + city
                });
            } else {
                uni.navigateTo({
                    url: '/pages/map/mapContent/mapContent'
                });
            }
        },

        maleSelect() {
            this.setData({
                gender: 1
            });
        },

        femaleSelect() {
            this.setData({
                gender: 2
            });
        },

        getAreaCode() {
            let param = {
                location: this.address.lng + ',' + this.address.lat,
                extensions: 'all',
                key: api.gdKey,
                radius: 3000
            };
            uni.request({
                url: api.gdUrl,
                data: param,
                method: 'GET',
                header: {
                    'Content-Type': 'application/json'
                },
                success: (res) => {
                    console.log(res);
                    if (res.data.infocode == '10000') {
                        if (res.data.info == 'OK') {
                            // let ad_info = res.data.result.ad_info;
                            // let areaCode = res.data.result.ad_info.adcode;
                            let regeocode = res.data.regeocode.addressComponent;
                            let cityName = regeocode.city == null || regeocode.city.length == 0 ? regeocode.province : regeocode.city;
                            let district = regeocode.district == null || regeocode.district.length == 0 ? '' : regeocode.district;
                            this.setData({
                                ['address.areaCode']: regeocode.adcode,
                                ['address.province']: regeocode.province,
                                ['address.city']: cityName,
                                ['address.county']: district
                                // ['address.addressname']:res.data.result.address
                            });
                        } else {
                            uni.showToast({
                                title: '获取地区码失败',
                                icon: 'none',
                                duration: 3000
                            });
                        }
                    } else {
                        uni.showToast({
                            title: '获取地区码失败',
                            icon: 'none',
                            duration: 3000
                        });
                    }
                },
                fail: function (err) {
                    reject(err);
                }
            });
        },

        goAddAddress() {
            uni.navigateTo({
                url: '/pages/ucenter/addressAdd/addressAdd?id=0'
            });
        },

        noonTab(e) {
            let noon = e.currentTarget.dataset.noon;
            this.setData({
                timeIndex: -1,
                noonType: noon,
                selectTimeValue: ''
            });
            let period = this.dateList[this.dateIndex].period;
            let current = this.noonType == 1 ? '上午' : '下午';
            let list = period.filter((item) => {
                return item.ofTime == current;
            });
            this.setData({
                timeList: list
            });
        }
    }
};
</script>
<style>

.container {
    padding:0 0 180rpx;
	background: linear-gradient(180deg, rgb(240,234,226) 0%, rgb(239,238,237) 100%);
}

view,
text {
    font-size: 30rpx;
    color: #333;
    box-sizing: border-box;
}

.address-block {
    background: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx 20rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.address-wrapper {
    width: 610rpx;
    height: 90rpx;
}

.address-block .tips {
    display: flex;
    align-items: center;
    height: 30rpx;
}

.tips image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}

.tips view {
    line-height: 30rpx;
    font-size: 30rpx;
}

.address-block .detail {
    padding-left: 38rpx;
    margin-top: 18rpx;
    line-height: 40rpx;
    font-size: 26rpx;
    overflow: hidden;
    height: 40rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arrow-img {
    width: 24rpx;
    height: 24rpx;
}

.product-block {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 24rpx;
    margin: 24rpx 0;
}

.product-block .title {
    height: 88rpx;
    line-height: 78rpx;
}

.profuct-info {
    height: 190rpx;
    display: flex;
    align-items: flex-start;
}

.product-img {
    width: 190rpx;
    height: 190rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.info-right {
    /* padding-top: 10rpx; */
    flex: 1;
}

.info-main {
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 58rpx; */
}

.info-right .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: 18rpx;
    font-weight: bold;
}

.info-right .other-info {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34rpx;
}

.appoint-main-module {
	height: 156rpx;
	border-radius: 14rpx;
    background: #ffffff;
    padding: 0 24rpx;
	display: flex;
	align-items: center;
	width:690rpx;
	margin:0 30rpx;
}
.textarea-wrapper{
	margin-top:10rpx;
}
.appoint-block {
    /* height: 74rpx; */
	flex:1;
    display: flex;
    align-items: center;
	justify-content: space-between;
    /* border-bottom: 2rpx solid #e0e0e0; */
}

.appoint-block .title {
    width: 136rpx;
    border-bottom: 2rpx solid #fff;
    font-size: 26rpx;
    font-weight: bold;
    z-index: 9;
    height: 72rpx;
    line-height: 72rpx;
}

.appoint-block .title text {
    color: #f00;
}

.appoint-time {
    flex: 1;
    color: #acadb1;
    padding-left: 4rpx;
    font-size: 26rpx;
}

.appoint-timed {
    flex: 1;
    padding-left: 4rpx;
    color: #333;
    font-size: 26rpx;
}
.appoint-block.appoint-block-special{
	flex-direction: column;
	align-items: flex-start;
}
.appoint-block .arrow-img {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
}
.future-days{
	height: 38rpx;
	font-size: 26rpx;
	color: #999;
	margin:0 8rpx;
}
.future-days text{
	color:#09AFFF;
}
.remark-extra{
	wigth:642rpx;
	font-size: 26rpx;
	/* height:130rpx; */
}

.appoint-btn {
    position: fixed;
    bottom: 56rpx;
    left: 40rpx;
    right: 40rpx;
    height: 90rpx;
    width: 670rpx;
    border-radius: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
    font-size: 30rpx;
}

.appoint-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.remark-text {
    font-size: 26rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 486rpx;
    padding-left: 40rpx;
    margin: 0 10rpx 0 20rpx;
    text-align: right;
}

.remark-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 860rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 0px 0px;
    padding: 40rpx 30rpx 50rpx;
    z-index: 9999;
}

.remark-popup .title {
    height: 30rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    color: #333333;
}

.remark-textarea {
    width: 690rpx;
    height: 240rpx;
    background: #f8f8f8;
    border-radius: 10rpx;
    padding: 20rpx 36rpx 36rpx 20rpx;
    font-size: 26rpx;
    line-height: 40rpx;
    margin: 30rpx 0 330rpx;
    box-sizing: border-box;
}

.remark-popup .btn {
    width: 690rpx;
    height: 100rpx;
    background: #00b9ff;
    border-radius: 50rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
}

.address-item {
    display: flex;
    min-height: 136rpx;
    background: #fff;
    padding: 30rpx 20rpx;
    border-radius: 10rpx;
}

.address-item.address-empty {
    line-height: 75rpx;
    text-align: center;
}

.address-item .map-icon {
    width: 28rpx;
    height: 30rpx;
    margin: 6rpx 10rpx 0 0;
}

.address-box .l {
    width: 125rpx;
    height: 100%;
}

.address-box .l .name {
    margin-left: 6.25rpx;
    margin-top: -7.25rpx;
    display: block;
    width: 125rpx;
    height: 43rpx;
    line-height: 43rpx;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 5rpx;
}

.address-box .l .default {
    margin-left: 6.25rpx;
    display: block;
    width: 62rpx;
    height: 33rpx;
    border-radius: 5rpx;
    border: 1px solid #b4282d;
    font-size: 20.5rpx;
    text-align: center;
    line-height: 29rpx;
    color: #b4282d;
}

.address-box .m {
    flex: 1;
}

.address-box .mobile {
    display: block;
    height: 29rpx;
    line-height: 29rpx;
    margin-bottom: 6.25rpx;
    font-size: 26rpx;
}

.address-box .address {
    display: block;
    /* height: 30rpx; */
    line-height: 32rpx;
    font-size: 30rpx;
    margin: 0 0 16rpx 0;
}

.address-bottom {
    color: #999;
    line-height: 28rpx;
    height: 28rpx;
    font-size: 26rpx;
}

.address-bottom .user-name {
    margin: 0 32rpx 0 0;
}

.address-box .r {
    width: 30rpx;
    height: 90rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.address-box .r image {
    width: 14rpx;
    height: 24rpx;
}

.popup-wrapper view {
    color: #888;
    font-size: 30rpx;
}

.popup-content {
    flex: 1;
}

.popup-title {
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    border-bottom: 1rpx solid #ddd;
}

.popup-content {
    display: flex;
}

.time-select-left {
    /* flex: 2; */
    border-right: 1rpx solid #ddd;
    padding: 0 8rpx 0 20rpx;
    width: 370rpx;
}

.time-select-right {
    flex: 1;
    /* padding: 0 8rpx; */
    height: 900rpx;
    overflow-y: hidden;
}

.time-select-left-item {
    height: 108rpx;
    display: flex;
    flex-direction: column;
    padding: 4rpx 0;
}
.date-line-wrapper {
    flex: 1;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}
.time-select-left-item .date-msg {
    height: 36rpx;
    line-height: 36rpx;
    color: #888;
    font-size: 24rpx;
}
.time-select-left-item .date-msg.avail-date {
    color: #3fa10d;
    font-weight: bold;
}

.popup-wrapper .popup-content .current-date {
    color: #09afff;
    font-weight: bold;
}
view.popup-wrapper .time-select-right-item {
    height: 104rpx;
    border-bottom: 1rpx solid #ddd;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 0 24rpx;
}

.time-select-right-item view {
    color: #6d7278;
    /* font-weight: bold; */
}

view.popup-btn-wrapper {
    margin: 20rpx 0 0;
    padding: 0 24rpx 20rpx;
}

view.popup-btn-wrapper button > view {
    color: #fff;
}

view.popup-wrapper .date-tag {
    color: #09afff;
    height: 44rpx;
    line-height: 42rpx;
    width: 76rpx;
    border: 2rpx solid #09afff;
    border-radius: 44rpx;
    text-align: center;
    font-weight: normal;
    font-size: 22rpx;
    display: inline-block;
    margin-left: 8rpx;
}
view.popup-wrapper .full-time {
    color: #09afff;
    font-size: 24rpx;
    margin: 0 0 0 20rpx;
    height: 44rpx;
    line-height: 44rpx;
    float: right;
    padding-right: 40rpx;
}

.first-appoint-date-item {
    height: 108rpx;
    display: flex;
    align-items: center;
    padding: 0 0 0 240rpx;
}

.first-time-selected {
    margin: 0 0 0 60rpx;
}

.select-week-times {
    border-top: 1rpx solid #ddd;
}

.week-select-left {
    flex: 1.2;
}

.week-select-left > view.time-select-left-item {
    padding: 0 0 0 60rpx;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    padding: 10rpx 0 0 60rpx;
}

.week-select-left > view.time-select-left-item .week-str {
    padding: 12rpx 0 0 0;
}

view.popup-wrapper view.select-num-tag {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #09afff;
    border-radius: 34rpx;
    font-size: 20rpx;
    color: #fff;
    text-align: center;
    margin: 0 0 0 6rpx;
}

.popup-content-special {
    position: relative;
}

.popup-title-special {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background: #fff;
}

.popup-content-special {
    height: 900rpx;
    /* margin-top: 96rpx; */
    margin-top: 116rpx;
}

.popup-content-special .time-select-left {
    height: 900rpx;
    overflow-y: scroll;
}

.stock-text {
    font-size: 20rpx;
    font-weight: normal;
    color: #888;
}

.zero-stock {
    color: #ccc;
}

.appoint-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

/* 选择时间 */
view.popup-wrapper {
    /* padding: 0 0 20rpx; */
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 80%; */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 9999;
    border-radius: 36rpx 36rpx 0rpx 0rpx;
    overflow: hidden;
}

view.popup-wrapper view.confirm-btn {
    background: #09afff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 88rpx;
    text-align: center;
    color: #fff;
}

.go-pay-wrapper {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.go-pay-wrapper view {
    background: #09afff;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 88rpx;
    text-align: center;
    color: #fff;
}

.appoint-tabs-wrapper {
    height: 88rpx;
    display: flex;
    align-items: center;
    line-height: 88rpx;
    justify-content: space-around;
    background: #fff;
}

.appoint-tab-item {
    /* width:80rpx; */
}

.appoint-tab-item.active {
    color: #09afff;
    border-bottom: 4rpx solid #09afff;
}

.order-info {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 20rpx 24rpx;
}

.order-info .order-top {
    display: flex;
    align-items: center;
    height: 36rpx;
    margin-bottom: 6rpx;
}

.order-top view {
    font-size: 26rpx;
    color: #333;
}

.order-top view.topic {
    color: #666;
    margin-right: 16rpx;
}

.order-top .copy-img {
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
}

.order-bottom {
    border-top: 2rpx solid #e0e0e0;
    margin-top: 14rpx;
    padding-top: 16rpx;
}

.order-price,
.coupon-price {
    display: flex;
    align-items: center;
    height: 36rpx;
    margin-bottom: 6rpx;
    justify-content: space-between;
}

.order-price view,
.coupon-price view {
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold;
}

.order-price view.topic,
.coupon-price view.topic {
    color: #666;
    margin-right: 16rpx;
    font-weight: normal;
}

.order-bottom .real-price {
    display: flex;
    align-items: center;
    height: 36rpx;
    justify-content: flex-end;
    font-size: 26rpx;
    font-weight: bold;
}

.order-bottom .real-price text {
    color: #ff004e;
    font-size: 26rpx;
}

/* 顶部地址 */
.address-select {
    padding: 44rpx 24rpx 36rpx 26rpx;
    background: #ffffff;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    min-height: 132rpx;
	width:690rpx;
	margin:0 30rpx;
}

.address-select .map-img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
}

.address-main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.address-main .main-line {
    display: flex;
    height: 36rpx;
	line-height: 36rpx;
    margin-top: 16rpx;
    align-items: center;
	font-size: 26rpx;
}

.main-line view {
    color: #333333;
    font-size: 32rpx;
}

.main-line view.phone {
    /* color: #999999; */
    /* font-size: 24rpx; */
    margin-left: 20rpx;
}

 .customer-address {
  color: #191919;
    line-height: 40rpx;
	display: flex;
	align-items: center;
}
.customer-address  .map-img{
	width:28rpx;
	height:34rpx;
	margin-right:24rpx;
}

.address-select .arrow-img {
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
}

/* 地址选择 */
.appoint-overlay-wrapper.address-overlay {
    display: flex;
    align-items: flex-end;
}

.address-popup {
    width: 750rpx;
    padding: 0 24rpx 0rpx;
    background: #ffffff;
    border-radius: 56rpx 56rpx 0 0;
}

.address-popup .title {
    font-weight: 600;
    color: #191919;
    font-size: 28rpx;
    height: 122rpx;
    line-height: 122rpx;
    text-align: center;
}

.address-list {
    height: 720rpx;
    overflow-y: scroll;
    padding-bottom: 20rpx;
}

.address-popup .add-address-btn {
    width: 654rpx;
    margin: 40rpx 24rpx 40rpx;
    height: 90rpx;
    background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
    border-radius: 45rpx;
    font-size: 36rpx;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    line-height: 90rpx;
}

.address-item {
    width: 690rpx;
    display: flex;
    align-items: center;
    min-height: 132rpx;
    border-radius: 24rpx;
    border: 2rpx solid #e3e3e3;
    margin-bottom: 30rpx;
}

.address-item .arrow-img {
    width: 28rpx;
    height: 28rpx;
    margin-left: 20rpx;
}

.address-item .map-img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
}

/* 选择备注 */
.appoint-overlay-wrapper.remark-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.remark-select {
    width: 750rpx;
    padding: 0 24rpx 56rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
}

.remark-select .title {
    font-weight: 600;
    color: #191919;
    font-size: 30rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 2rpx solid #e0e0e0;
}

.remark-item .remark-value {
    color: #191919;
    font-size: 26rpx;
    font-weight: bold;
    flex: 1;
    text-align: left;
}

.remark-list .remark-item {
    height: 84rpx;
    display: flex;
    border-bottom: 2rpx solid #e0e0e0;
    align-items: center;
}

.remark-item .radio-img {
    width: 26rpx;
    height: 26rpx;
}

.remark-conf-btn {
    width: 652rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 90rpx;
    border: 4rpx solid #ff8219;
    text-align: center;
    font-size: 36rpx;
    color: #ff8219;
    margin: 0 auto;
    margin-top: 54rpx;
}

/* 地址输入 */
.add-address .add-form {
    background: #fff;
    width: 690rpx;
    border-radius: 25rpx;
    padding: 4rpx 24rpx 24rpx;
	margin:0 30rpx;
}

.add-address .form-item {
    height: 78rpx;
    display: flex;
    align-items: center;
}

.add-address .input {
    flex: 1;
    /* height: 78rpx; */
    /* overflow: hidden; */
    font-size: 26rpx;
    color: #333;
    padding-top: 24rpx;
}

.add-address .label {
    font-size: 26rpx;
    font-weight: bold;
    width: 160rpx;
    text-align: left;
    color: rgba(0, 0, 0, 0.9);
}

.add-address .label text {
    color: #ff0000;
}

.add-address .content {
    border-bottom: 2rpx solid #e0e0e0;
    /* height: 88rpx; */
    align-content: center;
    flex: 1;
    display: flex;
    align-items: center;
    padding-bottom: 8rpx;
    height: 78rpx;
}

.gender-wrapper image {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}

.gender-wrapper {
    display: flex;
    /* align-items: center;
   */

    height: 78rpx;
    justify-content: space-between;
    width: 220rpx;
}

.male,
.female {
    display: flex;
    align-items: center;
    height: 78rpx;
    padding-top: 24rpx;
}

.male text,
.female text {
    color: #acadb1;
    font-size: 24rpx;
}
.noon-select {
    height: 64rpx;
    display: flex;
    border-bottom: 1rpx solid #ddd;
}
.time-select-right .noon-item {
    flex: 1;
    text-align: center;
    line-height: 64rpx;
    color: #979797;
    font-size: 26rpx;
}
.time-select-right view.noon-item.active-noon {
    color: #fff;
    background: #09afff;
}
view.popup-wrapper .time-select-right-item .date-tag {
    width: 80rpx;
    height: 40rpx;
    line-height: 38rpx;
    margin-left: 0;
    /* margin-left:120rpx; */
}
.popup-title-new.popup-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 116rpx;
    line-height: normal;
}
.popup-title-new view {
    color: #333;
    font-size: 32rpx;
}
.popup-title-new view.fee-tips {
    color: #ff5735;
    font-size: 22rpx;
}
.time-select-right-item text {
    color: #888;
}
.time-select-right .time-item-wrapper {
    height: 836rpx;
    overflow-y: scroll;
}
.time-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
view.popup-wrapper .time-select-right-item.invalid-time text {
    color: #999;
}
view.popup-wrapper .time-select-right-item.invalid-time {
    /* background: #E1E1E1; */
    background: #eee;
}
.time-select-right-item view.time-msg {
    height: 40rpx;
    line-height: 38rpx;
    border-radius: 40rpx;
    padding: 0 8rpx;
    font-size: 22rpx;
    border: 2rpx solid #999;
    color: #999;
    font-weight: normal;
    white-space: nowrap;
}
.time-select-right-item text.extra-tips {
    color: #ff5735;
    font-size: 22rpx;
}
.step-block{
	display: flex;
	align-items: center;
	height: 172rpx;
}
.step-block .step-img{
	width:124rpx;
	height:124rpx;
}
.step-right{
	padding-top:20rpx;
}
.step-title{
	height: 46rpx;
	font-size: 32rpx;
	margin-bottom:10rpx;
	font-weight: 600;
	color: #191919;
	line-height: 46rpx;
}
.step-tips{
	height: 38rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #ACADB1;
	line-height: 38rpx;
}
</style>