<template>

    <view style="display: flex;flex-direction: column;" id="page">

        <view class="top">
            <NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight"
                :end-change-height="page.endHeight">
            </NavBar>
            <view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;">
                <view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;">
                    {{data.state}}
                </view>
                <view
                    style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;">
                    窖号：{{data.serialNumber}}
                </view>
                <view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;">
                    {{data.time}}
                </view>
            </view>

        </view>
        <view
            style="display: flex;flex-direction: row;justify-content: center;
			background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">


            <image src="https://ordermall.yxtsoft.com/image/detail_affeection.png" mode="aspectFit"
                style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image>

            <view style="width: 50%; margin-left: 20vw;
		display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center;
		justify-content: space-between;">
                <text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text>

                <text v-if="data.notRese"
                    style="background: #fff ; border-radius: 25px;color: #FF7201;padding: 3px 10px;"
                    @click="showDialog2">转赠亲友</text>

                <text v-if="!data.notRese"
                    style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text>
            </view>


        </view>
        <loading-state ref="pageView" @request="request">

            <view style="background-color: #fff;padding: 10px 15px;">

                <view style="display: flex;flex-direction: row;align-items: center;">
                    <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <text style="margin-left: 8px;font-size: 14px;color: #333;">商品明细</text>
                </view>

            </view>

            <view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)"
                style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

                <view style="display: flex;flex-direction: row;background-color: #fff;padding: 10px 15px;
					border-bottom: 1px #F1F2F3 solid; width: 100%;">
                    <image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
                    <view style="margin-left: 10px;margin-right: 10px;flex: 1;">
                        <text class="text" style="font-weight: 500;">{{item.goods}}
                        </text>
                        <view style="font-size: 12px;color: #666666;margin-top: 5px;">{{item.remarks}}</view>
                        <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 5px;">
                            <text
                                style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}}{{item.unitName}}
                            </text>
                            <view style="font-size: 12px;color: #666666;">可预约：{{item.lnum}}{{item.unitName}}</view>
                        </view>
                    </view>
                </view>


            </view>

            <view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;">

                <view style="display: flex;flex-direction: row;align-items: center;">
                    <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <text style="margin-left: 8px;font-size: 14px;color: #333;">预约记录</text>
                </view>

            </view>

            <view style="margin-bottom: 10px;">
                <view v-for="(item,index) in data.orderCardVoList" :key="index"
                    style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

                    <view style="display: flex;flex-direction: column;background-color: #fff;
					border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;">
                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
                            <image src="https://ordermall.yxtsoft.com/image/date.png"
                                style="width: 20px;height: 20px;">
                            </image>
                            <text
                                style="margin-left: 5px;font-size: 12px; color: #999;">提货时间：{{item.reserveDate}}</text>
                        </view>
                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                            <image src="https://ordermall.yxtsoft.com/image/location.png"
                                style="width: 20px;height: 20px;">
                            </image>
                            <text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点：{{item.store}}</text>
                        </view>
                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                            <image src="https://ordermall.yxtsoft.com/image/user2.png" mode="aspectFill"
                                style="width: 20px;height: 20px;">
                            </image>
                            <text
                                style="margin-left: 5px;font-size: 12px; color: #999;">提&ensp;货&ensp;人：{{item.userName}}</text>
                        </view>
                        <view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                            <image src="https://ordermall.yxtsoft.com/image/phone2.png" mode="aspectFill"
                                style="width: 20px;height: 20px;">
                            </image>
                            <text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话：{{item.userPhone}}</text>
                        </view>
                        <view style="	display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
                            <text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
                        </view>

                    </view>

                </view>

            </view>

            <view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;" id='the-id'>

                <view style="display: flex;flex-direction: row;align-items: center;">
                    <view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
                    <text style="margin-left: 8px;font-size: 14px;color: #333;">转赠信息</text>
                </view>

            </view>

            <view style="margin-bottom: 50px;">

                <view v-for="(item,index) in data.empCardGifts" :key="index"
                    style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

                    <view style="display: flex;flex-direction: row;background-color: #fff;
						border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;">

                        <view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;">
                            <image src="https://ordermall.yxtsoft.com/image/home_affection.png"
                                style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image>

                            <view style="display: flex;flex-direction: column;width: 100%;">

                                <text
                                    style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖序号：{{item.serialNumber}}</text>
                                <text
                                    style="font-size: 12px; color: #333;margin-top: 5px;">分享时间：{{item.createTime}}</text>
                                <text style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖编码：{{item.code}}</text>
                                <text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text>
                                <text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text>

                                <view
                                    style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;">
                                    <text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">-
                                        {{item.goods}}</text>

                                    <button v-show="item.isShare=='1'" class='sharebtn' :data-info="item"
                                        open-type="share">分享窖</button>
                                    <button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item"
                                        open-type="share">已分享</button>
                                    <button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button>


                                </view>
                            </view>

                        </view>

                    </view>

                </view>

            </view>

            <view style="height: 50px; "></view>

            <view v-if="data.notRese" style="width: 100%; background-color: #fff;height: 15vw;position: fixed;bottom: 0;overflow:hidden;
			display: flex;flex-direction: row;">

                <!-- <text
					style="flex: 1;color: #B3B3B3; padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;">
					可选择就近网点进行预约提货 >
				</text> -->
                <view style="flex: 1;"></view>
                <text style=" width: 20vw;font-size: 16px;color: #fff; background-color: #FFC104;
				padding: 10px 20px; display:margin：auto;text-align: center;line-height: 10vw;" @click="showDialog">预约提货</text>


            </view>


        </loading-state>


        <!-- 弹窗蒙版 -->
        <view class="model" catchtouchmove='preventTouchMove' v-if='showModal' @click.stop="colseDialog()"></view>
        <view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>

            <scroll-view scroll-y="true" style="height: 100%;width: 100%; padding: 20px; " bindscrolltoupper="upper"
                bindscrolltolower="lower" bindscroll="scroll">

                <view style="display: flex;flex-direction: column;margin-top: 10px;">
                    <text>提货地点</text>
                    <view
                        style="margin-top: 10px;background:#F5F5F5 ; display: flex;flex-direction: row;justify-content: space-between;width: 89.5%;border-radius: 4px;min-height: 35px;align-items: center;"
                        @click="address">
                        <view v-if="stringIsEmpty(data.addressName)"
                            style="color: #666;font-size: 12px;margin-left: 10px;">
                            请选择提货点</view>
                        <view v-if="stringIsNotEmpty(data.addressName)"
                            style="color: #666;font-size: 12px;margin-left: 10px;">{{data.addressName}}</view>
                        <uni-icons type="bottom" size="14" color="#999" style="flex-direction: 0;margin: 0px 5px;" />
                    </view>
                </view>

                <view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;">
                    <text>提货时间</text>
                    <view style="display: flex;align-items: center;margin-top: 6px;">
                        <uni-datetime-picker type="date" v-model="data.reserveDate" style="flex: 1;background: #F8F8F8;"
                            :start="data.start" :end="data.end" @showing='showing' :disabledDate="disabledDate" />
                    </view>
                </view>

                <view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;">
                    <text>提货人</text>
                    <view style="display: flex;align-items: center;margin-top: 6px;">
                        <input placeholder="请输入提货人"
                            style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
                            :value="data.userName" @input="onKeyInput1" />
                    </view>
                </view>

                <view style="display: flex;flex-direction: column;margin-top: 10px;width: 89.5%;">
                    <text>联系电话</text>
                    <view style="display: flex;align-items: center;margin-top: 6px;">
                        <input maxlength="11" placeholder="请输入联系电话"
                            style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;"
                            type="number" :value="data.userPhone" @input="onKeyInput2" />
                    </view>
                </view>

                <view style="background: #F5F5F5; border-radius: 5px;margin-top: 15px;width: 89.5%;">
                    <view v-for="(item,index) in data.goodsVos"
                        style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">
                        <view style="margin-left: 10px;margin-right: 10px;flex: 1;
							display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
							padding: 10px;">
                            <text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}}
                            </text>
                            <text class="text"
                                style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}}
                            </text>
                            <uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0"
                                :max="item.lnum" v-model="item.select"></uni-number-box>
                        </view>
                    </view>
                </view>

                <view
                    style="display: flex;flex-direction: row;align-items: center;justify-content: center; margin-top: 100px;width: 100%;">

                    <text
                        style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;"
                        @click.stop="colseDialog()">取消</text>
                    <text
                        style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FFC104;  padding: 5px 30px;margin-left: 20px;"
                        @click="save">确认</text>

                </view>
                <view style="height: 50px;">

                </view>

            </scroll-view>
        </view>

        <!-- 弹窗蒙版 -->
        <view class="model" catchtouchmove='preventTouchMove' v-if='showModal2' @click.stop="colseDialog2()"></view>
        <view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal2'>
            <scroll-view scroll-y="true" style="height: 100%; width: 100%;  box-sizing: border-box; 
		" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">


                <view style="display: flex;flex-direction: column;margin: 20px;">
                    <text>菜窖数量</text>
                    <view style="display: flex;align-items: center;margin-top: 6px;">
                        <input placeholder="请输入菜窖数量"
                            style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
                            type="number" :value="info.count" @input="onKeyInput3" />
                    </view>
                </view>
                <view style="display: flex;flex-direction: column;margin: 20px;">
                    <text>商品列表</text>
                    <view style="background: #F5F5F5; border-radius: 5px;margin-top: 6px;">
                        <view v-for="(item,index) in data.goodsVos"
                            style="display: flex;flex-direction: row;margin-top: 15px; margin-bottom: 10px;">
                            <view style="margin-left: 10px;margin-right: 10px;flex: 1;
						display: flex;flex-direction: column;justify-content: space-between;align-items: flex-end;
						padding: 10px;">
                                <text class="text" style="font-weight: 500;width: 100%;font-size: 14px;">{{item.goods}}
                                </text>
                                <text class="text"
                                    style="font-weight: 500;width: 100%;color: #919191; font-size: 12px;">剩余：{{item.lnum}}{{item.unitName}}
                                </text>
                                <uni-number-box ref="box" style="margin-top: -30px;" :showTextView="true" :min="0"
                                    :max="item.lnum" v-model="item.select"></uni-number-box>
                            </view>
                        </view>
                    </view>
                </view>

                <view style="display: flex;flex-direction: column;margin: 20px;">
                    <text>备注说明</text>
                    <view style="display: flex;align-items: center;margin-top: 6px;">
                        <input placeholder="请输入"
                            style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;height: 40px;line-height: 40px;padding-left: 10px;padding-right: 10px;"
                            :value="info.remarks" @input="onKeyInput4" />
                        <!-- <textarea placeholder="请输入" :disable-default-padding='true' :fixed="true" style="font-size: 30rpx;flex: 1;background: #F8F8F8;border-radius: 5px;
						line-height: 20px;padding: 10px;
						 white-space: pre-wrap;
						 height: auto;min-height: 30px;
						  word-wrap: break-word;" :value="info.remarks" @input="onKeyInput2" /> -->
                    </view>
                </view>

                <view
                    style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 100px;width: 100%;">

                    <text
                        style="border-radius:30px; font-size: 14px;color: #666;background-color: #F5F5F5; padding: 5px 30px;margin-right: 20px;"
                        @click.stop="colseDialog2()">取消</text>
                    <text
                        style="border-radius: 30px; font-size: 14px;color: #fff; background-color: #FF9D33;  padding: 5px 30px;margin-left: 20px;"
                        @click="save2()">确认</text>

                </view>
                <view style="height: 50px;">

                </view>

            </scroll-view>
        </view>


    </view>
</template>

<script>
    //引入bus
    import bus from '@/common/bus';
    export default {
        data() {
            return {
                showModal: false,
                showModal2: false,
                page: {
                    sid: '',
                    showTextView: false,
                    startHeight: 0,
                    endHeight: 0
                },
                data: {
                    time: "",
                    name: "",
                    pname: "",
                    state: "",
                    notRese: false,
                    showBtn: false,
                    showRecord: false,
                    goodsVos: [],
                    value: "",
                    userName: "",
                    userPhone: "",
                },
                disabledDate: [
                    // '2023-12-16'
                ],
                info: {
                    count: "1",
                    empCardSid: "",
                    remarks: "",
                    goodsVoList: []
                }
            }
        },
        onLoad(options) {
            this.page.sid = options.sid
            this.request()
            this.getSun()
            this.$bus.$on('order', msg => {
                this.$nextTick(() => {
                    this.$refs.pageView.setLoadState(0)
                })
                this.request();
            })

            uni.$on("address", (e) => {
                // 相当与下拉刷新
                this.data.value = e.sid;
                this.data.addressName = e.name;
            })

            let info = uni.getSystemInfoSync();

            this.page.startHeight = info.windowWidth * 0.6
            this.page.endHeight = info.windowWidth * 0.8
        },
        onUnload() {
            uni.$off('order');
            uni.$off('address');
        },
        onPageScroll(res) {
            // 渐变
            this.$refs.nav.defaultColorBgAlpha(res)
        },
        methods: {
            showDialog() {
                this.showModal = true
            },
            colseDialog() {
                this.showModal = false
            },
            showDialog2() {
                this.showModal2 = true
            },
            colseDialog2() {
                this.showModal2 = false
            },
            address() {
                uni.navigateTo({
                    url: '/pages/SelectAddressActivity'
                })
            },
            onKeyInput1: function(event) {
                this.data.userName = event.target.value
            },
            onKeyInput2: function(event) {
                this.data.userPhone = event.target.value
            },
            onKeyInput3: function(event) {
                this.info.count = event.target.value

            },
            onKeyInput4: function(event) {
                this.info.remarks = event.target.value
            },
            showing(e) {
                this.page.showTextView = e
            },
            save() {
                if (this.stringIsEmpty(this.data.value)) {
                    this.shortToast('请选择提货地点')
                    return
                }
                if (this.stringIsEmpty(this.data.reserveDate)) {
                    this.shortToast('请选择提货时间')
                    return
                }
                if (this.stringIsEmpty(this.data.userName)) {
                    this.shortToast('请输入提货人员')
                    return
                }
                if (this.stringIsEmpty(this.data.userPhone)) {
                    this.shortToast('请输入手机号码')
                    return
                }
                if (this.data.userPhone.length != 11) {
                    this.shortToast('手机号码格式不对')
                    return
                }


                let num = 0;
                for (var i = 0; i < this.data.goodsVos.length; i++) {
                    num += Number(this.data.goodsVos[i].select);
                }
                if (num == 0) {
                    this.shortToast('您未选择任何商品')
                    return
                }

                let _this = this
                _this.$api.gifcardBookingSave(this.data).then((resp) => {
                    bus.$emit('order', "监听回调");
                    uni.navigateBack()

                }).catch(e => {
                    _this.shortToast(e.msg)
                })

            },

            save2() {
                this.pageScroll()
                this.colseDialog2()

                let num = 0;
                for (var i = 0; i < this.data.goodsVos.length; i++) {
                    num += Number(this.data.goodsVos[i].select);
                }
                if (num == 0) {
                    this.shortToast('您未选择任何商品')
                    return
                }

                let _this = this

                this.info.empCardSid = this.page.sid,
                    this.info.goodsVoList = this.data.goodsVos,

                    console.log("info>>", this.info);

                _this.$api.generateEmpCardGift(this.info).then((resp) => {
                    bus.$emit('order', "监听回调");
                    // uni.navigateBack()

                }).catch(e => {
                    _this.shortToast(e.msg)
                })

            },
            pageScroll() {

                //获取容器高度，使页面滚动到容器底部  #xxx就是view的id名
                wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {
                    console.log('rect', rect);
                    console.log('rectheight', rect.height);
                    /* 将页面移动到最底部（用xxx的height定位） */
                    wx.pageScrollTo({
                        scrollTop: rect.height
                    })
                }).exec()

            },


            request() {
                let _this = this
                _this.$api.gifcardDetail(this.page.sid).then((resp) => {
                    _this.data = resp
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(2)
                    })
                }).catch(e => {
                    _this.$nextTick(() => {
                        _this.$refs.pageView.setLoadState(1)
                    })
                })
            },

            getSun() {
                let _this = this
                _this.$api.isSaturAndSun2(this.page.sid).then((resp) => {

                    // console.log("aaa",resp)

                    this.disabledDate = resp

                }).catch(e => {

                })
            },

            showRecord(sid) {
                uni.navigateTo({
                    url: '/pages/card/card_record?sid=' + sid
                })
            },
            booking(sid) {
                uni.navigateTo({
                    url: '/pages/card/card_booking?sid=' + sid
                })
            },
            itemClick(goodsSid) {
                uni.navigateTo({
                    url: '/pages/good/goodsDetail?sid=' + goodsSid
                })
            },
            onShareAppMessage: function(res) {
                console.log("res", res)
                console.log("data", res.target.dataset)
                var data = res.target.dataset.info
                this.shareCard(data.sid)
                // ①
                let shareData = JSON.stringify({
                    params: {
                        code: data.code,
                        codeKey: data.codeKey,
                        customerSid: ''
                    },
                    functionName: 'bindCard',
                    url: '/pages/detail/detail_affeection?sid=' + data.sid

                    // url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey,
                    // FunctionName:'share!
                })
                // 转码传输
                let value = encodeURIComponent(shareData)

                return {
                    title: '汇融农链ss-云菜窖',
                    // ②
                    path: '/pages/login/login?data=' + value,
                    imageUrl: 'https://ordermall.yxtsoft.com/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。
                    success: function(res) {
                        console.log('aaaa', "分享成功")
                    },
                    fail: function(res) {
                        // 转发失败
                        console.log('aaaa', "用户点击了取消")
                    }
                }
            },

            shareCard(sid) {
                let _this = this

                _this.$api.shareEmpCard(sid).then((resp) => {

                    var item = _this.data.empCardGiftVos.find(item => item.sid === sid)

                    console.log("item", item);

                    item.share = '2'

                }).catch(e => {})
            }
        }
    }
</script>

<style>
    .canvas-code {
        width: 39vw !important;
        height: 39vw !important;
    }

    .sharebtn {
        background: #FF4727;
        font-size: 12px;
        color: #fff;
        width: 30vw;
        border-radius: 20px;
    }


    .sharebtn::after {
        border: none;
    }

    .sharebtn2 {
        background: #FF7165;
        width: 30vw;
        font-size: 12px;
        color: #fff;
        border-radius: 20px;
    }

    .sharebtn2::after {
        border: none;
    }

    .sharebtn3 {
        background: #CFCFCF;
        width: 30vw;
        font-size: 12px;
        color: #fff;
        border-radius: 20px;
    }

    .sharebtn3::after {
        border: none;
    }

    .top {
        width: 100vw;
        /* height: 126.66vw; */
        height: 65vw;
        /* 加载背景图 */
        background-image: url(https://ordermall.yxtsoft.com/image/detail_bj1.png);
        /* 让背景图基于容器大小伸缩 */
        background-size: 100% 100%;
    }

    .text {
        white-space: normal;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    uni-page-body,
    page {
        background: #F1F2F3;
    }

    .btn {
        border: 1px solid;
        padding-left: 30rpx;
        padding-right: 30rpx;
        padding-top: 12rpx;
        padding-bottom: 12rpx;
        border-radius: 50rpx;
        height: 15px;
        margin-left: 25rpx;
        font-size: 26rpx;
    }

    /* 弹窗样式 */
    .model {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 999;
        opacity: 0.5;
        top: 0;
        left: 0;
    }

    .modalDlg {
        /* 设置超出滚动 */
        overflow: auto;
        width: 100%;
        position: fixed;
        top: 50vw;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background-color: #fff;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        display: flex;
        flex-direction: column;


    }
</style>