<template>
    <view>
        <!-- 重要提示 -->
        <view class="rightsPoint">
        	<view class="rightsPoint-cont">
        		<view class="rightsPoint-top">
        			<image src="/static/icon/Point_icon.png"></image>
        			<text>重要提示</text>
        		</view>
        		<view class="rightsPoint-text" :class="{active : notes.pointMoreShow}">
        			<rich-text :nodes="notes.notification"></rich-text>
        		</view>
        		<view class="pointMore" @click="pointMoreTap">
        			<text>{{ notes.pointMoreShow == true ? '收起' : '展开' }}</text>
        			<image :src="notes.pointMoreShow == true ? '/static/img/pointMore-up.png' : '/static/img/pointMore.png'">
        			</image>
        		</view>
        	</view>
        </view>
        
        <!-- 权益内容 -->
        <view style="padding-bottom: 220px">
            <!-- 权益logo -->
        	<view class="cont">
        		<view class="contBack">
        			<image class="classBack" src="https://lifetest.ysd-bs.com/storage/materials/2021/08/09/class_back_02.png" mode="scaleToFill"></image>
        			<view class="classCircle"></view>
        			<view class="rightsCont">
        				<scroll-view scroll-x class="welfareCont-top" scroll-with-animation>
        					<view class="welfareCont-list-img" v-for="(item, index) in rightData.detail.logos" :key="index">
        						<image :src="item" mode="aspectFill"></image>
        					</view>
        				</scroll-view>
        				<view class="nowrap rightsCont-btn">
        					{{ rightData.detail.three_title }}
        				</view>
        			</view>
        		</view>
        	</view>
            
            <!-- 数量 -->
            <view class="rightsNumber">
                <image class="rightsGoods-img" :src="rightData.detail.cover" mode="aspectFill"></image>
                <view class="rightsGoods">
                    <view class="nowrap rightsGoods-text">
                        {{ rightData.detail.title }}
                    </view>
                    <view class="rightsGoods-price">
                        <view class="rightsGoods-number"><text>￥</text>{{rightData.detail.amount}}</view>
                        <view class="rightsAdd">
                            <view class="rightsAdd-btn rightsAdd-remove" :class="{active : rightData.num != 1}" @click="goodsNumber('remove')">-</view>
                            <input class="rightsAdd-input" :data-num="rightData.num" :value="rightData.num" type="number" disabled=""></input>
                            <view class="rightsAdd-btn rightsAdd-plus" @click="goodsNumber('plus')">+</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 金额 -->
            <view class="rightsList" v-if="rightData.detail">
                <view class="rightsLabel">
                    <view class="rightsLabel-left">{{ rightData.detail.attribute.form_type }}</view>
                    <view class="rightsLabel-right rightsLabel-red">-￥{{ rightData.detail.score }}</view>
                </view>
            </view>
            
            <!-- 规格 -->
            <block v-if="buyWay.platformCp[buyWay.platIndex]">
                <view class="rightsList" style="margin-top: 20rpx">
                    <view class="rightsLabel" v-if="buyWay.platIndex == 1">
                        <view class="rightsLabel-left">电子券</view>
                        <view class="rightsLabel-right">{{ rightData.detail.qty }}张</view>
                    </view>
                    <block v-if="rightData.detail.type == 'physical'">
                        <view class="rightsLabel">
                            <view class="rightsLabel-left">请选择提交方式</view>
                            <view class="rightsLabel-right rightsLabel-range">
                                <picker :value="buyWay.platIndex" :range-key="'name'" :range="buyWay.platformCp" range-key="name" @change="platBind">
                                    <view class="tabs-text">
                                        {{ buyWay.platformCp[buyWay.platIndex].name }}
                                    </view>
                                </picker>
                                <image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
                            </view>
                        </view>
                        <view class="rightsLabel rightsLabel-address" v-if="buyWay.platformCp[buyWay.platIndex].name == '快递'">
                            <image class="rightsLabel-icon" src="https://card.ysd-bs.com/storage/materials/2021/09/01/new_rightsAddress.png"></image>
                            <view v-if="rightData.addressSee != ''" class="rightsLabel-right" @click="addressTap">
                                <view class="rightsLabel-address-text">
                                    <view class="rightsLabel-address-name">
                                        {{ rightData.addressSee.name }}<view class="rightsLabel-address-tel">{{ rightData.addressSee.mobile }}</view>
                                    </view>
                                    <text class="nowrap">{{ rightData.addressSee.all_address }}</text>
                                </view>
                                <image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
                            </view>
                            <navigator v-else class="rightsLabel-right" hover-class="none" url="/pages/address_form/address_form?type=Add">
                                <view class="rightsLabel-address-text" style="line-height: 90rpx;">
                                    添加收货地址
                                </view>
                                <image class="rightsLabel-row" src="/static/icon/rightsArrow.png"></image>
                            </navigator>
                        </view>
                        <view class="rightsLabel" v-if="buyWay.platformCp[buyWay.platIndex].name == '快递'">
                            <view class="rightsLabel-left">快递运费</view>
                            <view class="rightsLabel-right">￥{{ rightData.freight }}</view>
                        </view>
                    </block>
                </view>
            </block>
           
            <!-- 购买须知 -->
            <view class="notice">
                <view class="noticeTitle" @click="noticeTap">
                    <view class="noticeTitle-flex">
                        <image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
                        购买前请仔细阅读使用须知、内容介绍
                    </view>
                    <image class="noticeTitle-row" :class="{active : notice.noticeShow}" src="/static/icon/rightsArrow.png"></image>
                </view>
                <view class="noticeText" :class="{active : notice.noticeShow}">
                    <view class="noticeText-top">购买须知</view>
                    <view class="noticeText-cont">
                        <rich-text :nodes="notice.remark"></rich-text>
                    </view>
        
                    <view class="noticeText-top">内容介绍</view>
                    <view class="noticeText-cont">
                        <rich-text :nodes="notice.content"></rich-text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 购买按钮 -->
        <block v-if="fromType == 'unionpay'">
        	<view class="rightsBtn" @click="unionUrl" v-if="openid == ''">
        		<text>立即领取</text>
        	</view>
        	<view class="rightsBtn" :class="{active : rightsTap == true}" v-else>
        		<text v-if="rightsTap == true">立即购买</text>
        		<text v-else @click="unionOrder">立即购买</text>
        	</view>
        </block>
        <view class="newrightsBtn" @tap="submitOrder" v-else>
        	<view class="rightsBtn-text">
        		<view class="rightsBtn-text-num">共：{{ rightData.num }}件商品  </view> 
        		<view>实付：<text>￥{{ rightData.total }}</text></view>
        	</view>
        	<button :disabled="disabled">立即购买</button>
        </view>
        
        <!-- 选择收货地址 -->
        <view class="addressBack" :class="{active : address.addressShow}" @click="addressTap"></view>
        <view class="addressCont" :class="{active : address.addressShow}">
        	<view class="addressCont-title">
        		<view class="addressCont-left">请选择收货地址</view>
        		<view class="addressCont-right" @click="addSelect">新增收货地址</view>
        	</view>
        	<scroll-view class="header-classify" scroll-y="true">
        		<view class="addressCont-list" v-for="(item,index) in address.allAddress" :key="index"
        			@click="selectAddress(item.id, item)">
        			<view class="addressCont-top">
        				<view class="addressCont-name">{{ item.name }}</view>
        				<view class="addressCont-tel">{{ item.mobile }}</view>
        			</view>
        			<view class="addressCont-text">
        				{{ item.all_address }}
        			</view>
        			<view class="address-tool-icon">选择地址</view>
        		</view>
        	</scroll-view>
        </view>
    </view>
</template>

<script>
    import { index, rightStore, wechat, unionpay, unionCode } from '@/apis/interfaces/rights'
    export default {
		data() {
			return {
				rightData: {
                    detail    : '',  // 权益内容
                    rightId   : '',  // 权益id
                    addressSee: '',  // 收货地址
                    num       : 1,   // 购买数量
                    moreAmount: '',  // 产品总金额
                    freight   : '',  // 运费
                    total     : ''   // 总金额
                },
                buyWay        : {
                    platformCp: [],  // 选择提交数组
                    platIndex : 0,   // 选择提交方式下标
                    isdeliver : -1   // 选择提交方式
                },
                address        : {
                    allAddress : [],      // 收货地址列表
                    addressShow: false    // 地址显示状态
                },
                notes         : {
                    notification  : '',  // 重要提示-内容
                    pointMoreShow : false// 重要提示-展开收起
                },
                notice        : {
                    remark    : '',     // 购买须知
                    content   : '',     // 内容介绍
                    noticeShow: true   // 购买须知状态
                },
                fromType      : '',     // H5来源  unionpay银联
                uniUrl        : '',     // 跳转H5页面
                openid        : '',     // 银联是否存在openid
                rightsTap     : false,  // 是否跳转H5
                disabled      : false   // 下单按钮状态
			}
		},
		onLoad(e) {
            this.rightData.rightId = e.id
            this.openid   = e.openid || ''
        },
        onShow() { 
            // 获取权益详情
            this.rightsInfo();
        },
		methods: {
            // 权益详情
            rightsInfo() {
                index({
                    right_id   : this.rightData.rightId,
                    address_id : this.rightData.addressSee.id,
                    num        : this.rightData.num,
                    is_deliver : this.buyWay.isdeliver
                }).then(res => {
                    let obj    = res.detail.express
                    let arr    = new Array
                    arr = Object.keys(obj).map(val=>{
                        return { ...obj[val], ...{key: val} }
                    })
                    if(this.buyWay.isdeliver == -1){
                        if(res.detail.type == 'physical') {
                            this.buyWay.isdeliver = res.detail.def_get
                        }
                        if(res.detail.type == 'virtual') this.buyWay.isdeliver = 1
                    }
                    
                    this.fromType             = res.detail.from
                    this.rightData.detail     = res.detail
                    this.rightData.moreAmount = res.amount
                    this.rightData.total      = res.total
                    this.buyWay.platformCp    = arr
                    this.rightData.freight    = res.freight
                    this.rightData.addressSee = res.address
                    this.address.allAddress   = res.all_address
                    this.notes.notification   = res.detail.notification.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.notice.remark        = res.detail.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.notice.content       = res.detail.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 商品数量加减
            goodsNumber(e){
                let num = this.rightData.num
                if (e == 'plus'){
                    num ++;
                }else{
                    if (num > 1){
                        num --;
                    }else{
                        uni.showToast({
                            title   : '商品数量不能小于1',
                            icon    : 'none'
                        })
                    }
                }
                this.rightData.num = num
        
                // 获取详情
                this.rightsInfo()
            },
            
            // 输入商品数量
            goodsNumberInput(e){
                let goodsNum   = e.detail.value
                if (goodsNum > 0){
                    this.rightData.num = goodsNum
                }else{
                    uni.showToast({
                        title   : '商品数量不能小于1',
                        icon    : 'none'
                    })
                    this.rightData.num = goodsNum
                }
                // 获取详情
                this.rightsInfo()
            },
            
            // 重要提示展开-收起
            pointMoreTap() {
                this.notes.pointMoreShow = !this.notes.pointMoreShow
            },
            
            // 选择提交方式
            platBind(e) {
                this.buyWay.platIndex = e.detail.value
                this.buyWay.isdeliver = this.buyWay.platformCp[e.detail.value].value
                // 获取详情
                this.rightsInfo()
            },
            
            // 须知展开收起状态
            noticeTap() {
                this.notice.noticeShow = !this.notice.noticeShow
            },
            
            // 收货地址弹出
            addressTap() {
                this.address.addressShow = !this.address.addressShow
            },
            
            // 选择收货地址
            selectAddress(id, item){
                let new_addressId = id,
                    addressId     = this.rightData.addressSee.id
                if (new_addressId != addressId) {
                    this.rightData.addressSee = item
                    this.address.addressShow  = false
                }else{
                    this.address.addressShow  = false
                }
                // 获取详情
                this.rightsInfo()
            },
            
            // 只有银联商品获取
            unionOrder() {
                // 更新openid
                unionCode({
                    openid: this.openid
                }).then(res=>{})
                this.submitOrder();
            },
            
            // 银联获取openid跳转
            unionUrl() {
                if(this.openid == '') {
                    this.openid = this.rightData.detail.union_openid
                }
                if(this.fromType == 'unionpay') {
                    if(this.rightData.detail.union_openid == '') {
                        unionpay({
                            callback_url: '/pages/rights/index?id=' + this.rightData.detail.right_id,
                            callback_type: 'wxmini',
                            right_id: this.rightData.rightId
                        }).then(res=>{
                            // #ifdef H5
                            window.location.href = res
                            // #endif
                        }).catch(err => {});
                    }
                }
            },
            
            // 支付提交
            submitOrder() {
                // 收货方式
                if(this.buyWay.isdeliver.length == 0) this.buyWay.isdeliver = this.rightData.detail.def_get
                let rightId     = this.rightData.detail.right_id,
                    addressId   = this.rightData.addressSee.id,
                    isDeliver   = this.buyWay.isdeliver,
                    newQty      = this.rightData.num
                rightStore({
                    right_id    : rightId,
                    address_id  :addressId,
                    is_deliver  : isDeliver,
                    qty         : newQty
                }).then(res=>{
                    if(res.canPay == false) {
                        uni.showToast({
                            title   : '支付成功',
                            icon    : 'success',
                            duration: 2000
                        })
                        setTimeout(()=>{
                            if(this.buyWay.isdeliver == 1) {
                                uni.reLaunch({
                                    url: '/pages/order/order?orderType=rightsCoupons'
                                })
                            } else {
                                uni.reLaunch({
                                    url: '/pages/order/order?orderType=rights'
                                })
                            }
                        },3000)
                        this.rightsTap = true
                    }else {
                        // 跳转收银台
                        uni.navigateTo({
                            url: "/pages/cashier/index?tradeNo=" + res.trade_no + "&price=" + this.rightData.total + "&deliver=" + this.buyWay.isdeliver + "&activity_type=" + res.type + "&type=default"
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 重要提示 */
    .rightsPoint {
        position: fixed;
        left: 0;
        bottom: 160rpx;
        background: #eeeeee;
        z-index: 9;
        width: 100%;
        padding: 20rpx 20rpx 10rpx;
        box-sizing: border-box;
        .rightsPoint-cont {
            width: 100%;
            background: #eeeeee;
            border-radius: 10rpx;
            position: relative;
            max-height: 50vh;
            overflow-y: scroll;
            .rightsPoint-top {
                font-size: 28rpx;
                display: flex;
                padding: 0 20rpx 20rpx;
                box-sizing: border-box;
                font-weight: 600;
                image {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 10rpx;
                }
            }
            .rightsPoint-text {
                padding: 0 20rpx;
                box-sizing: border-box;
                font-size: 24rpx;
                line-height: 44rpx;
                height: 90rpx;
                transition: height 25s;
                overflow: hidden;
                &.active {
                    height: auto;
                    transition: 2s;
                }
            }
            .pointMore {
                text-align: center;
                width: 100%;
                background: #eeeeee;
                height: 80rpx;
                line-height: 82rpx;
                position: relative;
                margin-top: 10rpx;
                &::after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 2rpx;
                    background: #f2ecde;
                }
                text {
                    font-size: 28rpx;
                    color: #c38e00;
                    animation: dong 1.8s infinite;
                    display: inline-block;
                }
                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 4rpx;
                    vertical-align: -4rpx;
                    animation: dong 1.8s infinite;
                }
                @keyframes dong {
                    0% {
                        transform: translate(0px, 0px);
                    }
                
                    50% {
                        transform: translate(0px, -6rpx);
                    }
                
                    100% {
                        transform: translate(0px, 0px);
                    }
                }
                &::after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 2rpx;
                    background: #f2ecde;
                }
            }
        }
    }
    
    // 数量
    .rightsNumber {
        background-color: #ffffff;
        position: relative;
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        .rightsGoods-img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
        }
        .rightsGoods {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding: 80rpx 40rpx 0 270rpx;
            box-sizing: border-box;
            .rightsGoods-text {
                margin-bottom: 40rpx;
                font-weight: 600;
            }
            .rightsGoods-price {
                display: flex;
                .rightsGoods-number {
                    flex: 1;
                    font-size: 34rpx;
                    text {
                        font-size: 28rpx;
                    }
                }
                .rightsAdd {
                    display: flex;
                    .rightsAdd-btn {
                        border-radius: 4rpx;
                        text-align: center;
                        width: 50rpx;
                        height: 50rpx;
                        line-height: 45rpx;
                        font-size: 40rpx;
                        font-weight: 600;
                    }
                    .rightsAdd-remove {
                        background: #f8f8f8;
                        color: #d9d9d9;
                    }
                    
                    .rightsAdd-remove.active,
                    .rightsAdd-plus {
                        background: #e8e4e5;
                        color: #6b6768;
                    }
                    
                    .rightsAdd-input {
                        width: 100rpx;
                        text-align: center;
                        font-size: 28rpx;
                        line-height: 50rpx;
                    }
                }
            }
        }
    }
    
    // 卡券权益内容
    .cont {
        width: 100%;
        overflow: hidden;
    }
    .contBack {
        position: relative;
        width: 200%;
        height: 340rpx;
        left: -50%;
        text-align: center;
        background: #000000;
        border-radius: 0 0 100% 100%;
        overflow: hidden;
        &::before {
            position: absolute;
            border-radius: 50%;
            content: '';
            z-index: 1;
            background-color: rgba(255,255,255,.1);
            right: 20%;
            top: 55%;
            width: 300rpx;
            height: 300rpx;
        }
        .classBack {
            position: absolute;
            left: 28%;
            right: 30%;
            width: 44%;
            top: 40rpx;
        }
        .classCircle {
            position: relative;
            &::before {
                position: absolute;
                border-radius: 50%;
                content: '';
                z-index: 1;
                background-color: rgba(255,255,255,.1);
                left: 20%;
                top: -20rpx;
                width: 260rpx;
                height: 260rpx;
            }
        }
        .rightsCont {
            position: absolute;
            z-index: 3;
            left: calc(28% - 2rpx);
            right: calc(30% - 2rpx);
            width: calc(44% + 4rpx);
            top: 50rpx;
            .rightsCont-tips {
                color: #fff;
            }
            .welfareCont-top {
                white-space: nowrap;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                width: 100%;
                padding: 0 10rpx;
                box-sizing: border-box;
                margin: 50rpx 0 20rpx;
                .welfareCont-list-img {
                    border-radius: 50%;
                    width: 120rpx;
                    height: 120rpx;
                    display: inline-block;
                    margin: 0 15rpx;
                    overflow: hidden;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .rightsCont-btn {
                background: rgba(255, 255, 0255, .4);
                width: 100%;
                line-height: 70rpx;
                font-size: 40rpx;
                font-weight: 600;
                color: #000000;
                padding: 0 20rpx;
                box-sizing: border-box;
            }
        }
    }
    
    // 规格权益
    .rightsList,
    .notice,
    .detailsStore {
        background: white;
        box-sizing: border-box;
    }
    .rightsLabel,
    .rightsLabel-pay {
        display: flex;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        color: #6f7880;
        font-size: 30rpx;
        .rightsLabel-left {
            flex: 1;
            color: #747d86;
        }
        .rightsLabel-right {
            display: flex;
            font-size: 28rpx;
            font-weight: 700;
            &.rightsLabel-red{
                color: #ff5b5d;
            }
            &.rightsLabel-score {
                font-size: 34rpx;
                color: #000000;
            }
        }
        .rightsLabel-range {
            display: flex;
            color: #000;
            font-weight: 600;
        }
        .rightsLabel-row {
            width: 38rpx;
            height: 38rpx;
            margin: 2rpx 0 0 6rpx;
        }
    }
    
    // 购买须知
    .notice {
        background: white;
        padding: 20rpx;
        box-sizing: border-box;
        margin-top: 30rpx;
        .noticeTitle {
            display: flex;
            .noticeTitle-flex {
                flex: 1;
                display: flex;
                font-size: 30rpx;
                line-height: 46rpx;
                .noticeTitle-img {
                    width: 46rpx;
                    height: 46rpx;
                    margin-right: 20rpx;
                }
            }
            .noticeTitle-row {
                width: 46rpx;
                height: 46rpx;
                &.active {
                    transform: rotate(90deg);
                }
            }
        }
        .noticeText {
            font-size: 26rpx;
            height: 0;
            overflow: hidden;
            &.active {
                height: auto;
            }
            .noticeText-top {
                margin: 30rpx 0 10rpx;
                font-weight: 600;
            }
            .noticeText-cont {
                line-height: 60rpx;
            }
        }
    }
    
    // 购买按钮
    .rightsBtn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100rpx;
        z-index: 9;
        background: #fff;
        button,
        text {
            display: block;
            margin: 12rpx 30rpx;
            width: calc(100% - 60rpx) !important;
            height: 74rpx !important;
            line-height: 74rpx !important;
            padding: 0;
            background: #eacf88;
            text-align: center;
            border-radius: 60rpx;
            font-size: 30rpx;
        }
    }
    .newrightsBtn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 160rpx;
        z-index: 9;
        background: #fff;
        padding: 30rpx;
        box-sizing: border-box;
        display: flex;
        .rightsBtn-text {
            flex: 1;
            font-weight: 600;
            font-size: 30rpx;
            .rightsBtn-text-num {
                font-size: 30rpx;
                margin-bottom: 10rpx;
            }
            text {
                font-size: 38rpx;
                color: #fe2d55;
            }
        }
        button {
            width: 280rpx !important;
            background-color: #000000;
            color: #ffffff;
            border-radius: 80rpx;
            height: 100rpx;
            line-height: 100rpx;
            padding: 0;
            margin: 0;
        }
    }
    
    // 收货地址新增样式
    .rightsLabel-address {
        display: flex;
        position: relative;
        margin: 10rpx 0;
        padding: 25rpx 40rpx;
    }
    
    .rightsLabel-address::after,
    .rightsLabel-address::before {
        position: absolute;
        content: '';
        left: 30rpx;
        width: calc(100% - 60rpx);
        height: 2rpx;
        background-color: #bfbfbf;
    }
    
    .rightsLabel-address::after {
        top: 0;
    }
    
    .rightsLabel-address::before {
        bottom: 0;
    }
    
    .rightsLabel-address text {
        display: inline-block;
        width: calc(100% - 46rpx);
    }
    
    .rightsLabel-address .rightsLabel-right {
        width: calc(100% - 90rpx);
        margin-left: 20rpx;
        color: #000000;
    }
    
    .rightsLabel-address-text {
        flex: 1;
    }
    
    .rightsLabel-address .rightsLabel-row {
        margin-top: 30rpx;
    }
    
    .rightsLabel .rightsLabel-icon {
        width: 70rpx;
        height: 70rpx;
        margin-top: 14rpx;
    }
    
    .rightsLabel-address-name {
        display: flex;
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }
    
    .rightsLabel-address-tel {
        padding-left: 30rpx;
        color: #959595;
    }
    
    // 选择收货地址
    .addressBack {
        position: fixed;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        width: 100%;
        height: 100%;
        display: none;
        &.active {
            display: block;
        }
    }
    .addressCont {
        position: fixed;
        left: 0;
        bottom: -1000%;
        transition: .2s;
        background: #fff;
        z-index: 11;
        width: 100%;
        &.active {
            bottom: 0;
        }
        .addressCont-title {
            height: 90rpx;
            line-height: 90rpx;
            display: flex;
            padding: 0 30rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            font-weight: 600;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 2rpx;
                background: #f3f3f3;
            }
            .addressCont-left {
                flex: 1;
            }
            .addressCont-right {
                color: #309ded;
            }
        }
        .header-classify {
            white-space: nowrap;
            box-sizing: border-box;
            height: 600rpx;
            .addressCont-list {
                padding: 30rpx 20rpx;
                box-sizing: border-box;
                font-size: 30rpx;
                overflow: hidden;
                position: relative;
                &::after {
                	position: absolute;
                	content: '';
                	left: 0;
                    bottom: 0;
                	width: 100%;
                	height: 2rpx;
                	background: #f3f3f3;
                }
                .addressCont-top {
                    display: flex;
                    margin-bottom: 10rpx;
                    .addressCont-name {
                        font-weight: 600;
                    }
                }
                .addressCont-text {
                    color: #666;
                    width: calc(100% - 160rpx);
                }
                .address-tool-icon {
                    width: 120rpx;
                    height: 54rpx;
                    line-height: 54rpx;
                    border-radius: 4rpx;
                    text-align: center;
                    color: #fff;
                    position: absolute;
                    top: 45rpx;
                    right: 10rpx;
                    background: #dfae2e;
                    transform: scale(.9, .9);
                    font-size: 24rpx;
                }
            }
        }
    }
</style>
