<!--
 * @Author: euzhi
 * @Description: 获取挪车码
-->
<template>
<view class="appCotent">
    <div class="getCarCode">
        <div class="get__content">
            <div class="address" v-if="addressShow">
                <div class="address__left">
                    <div class="right__title" @click="geMap">
                        {{addressInfo.address}}&emsp;{{addressInfo.detailInfo}}
                    </div>
                    <div class="right__phone">
                        <span>{{addressInfo.userName}}</span> <span>{{addressInfo.telNumber}}</span>
						<span v-if="addressInfo.defaultFlag">默认</span>
                    </div>
                </div>
                <div class="address__right" @click="goAddress">
                    <image src="@/static/index/right.png" />
                </div>
                <u-gap bgColor="transparent" height="15"></u-gap>
            </div>
            <div v-else class="add__address" @click="addAddress">
                <image src="@/static/index/get-car-code5.png"> 添加收货地址
            </div>
            <u-gap bgColor="transparent" height="15"></u-gap>
            <div class="content__code">
                <div class="code__img">
					<image :src="freeCode.mainImgUrl" class="code__img"></image>
				</div>
                <div class="code__money">
                    <div class="money__title">
                        <text>{{freeCode.title}}</text>
                    </div>
                    <div class="code__tips">
                        <text>{{freeCode.spec}}</text>
                    </div>
                    <div class="money__num">
                        <text class="num__one">￥0.00</text>
                    </div>
                </div>
            </div>
            <u-gap bgColor="transparent" height="20"></u-gap>
            <div class="content__list">
                <div class="list__title">
                    超低价养车好物
                </div>
                <u-gap bgColor="transparent" height="20"></u-gap>
                <div class="list">
                    <div class="list__item" v-for="(vo,inx) in items" :key="inx">
                        <div class="list__img">
                            <!-- <image :src="vo.img" /> -->
                        </div>
                        <div class="list__money">
                            <div class="money__title">
                                <text>{{vo.title}}</text>
                            </div>
                            <div class="code__tips">
                                <text>{{vo.tip}}</text>
                            </div>
                            <div class="money__num">
                                <text class="num__one">¥{{vo.price2}}</text>
                                <text class="num__two">¥{{vo.price2}}</text>
                            </div>
                        </div>
                        <div class="list__add" @click="add">
                            <image src="@/static/index/get-car-code2.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <u-modal :show="show" :content='content' @confirm='show = false'></u-modal>
        <u-gap bgColor="transparent" height="65"></u-gap>
        <div class="price__bottom">
            <div class="price">
                <div class="price__num">
                    共<span>{{nums}}</span>件
                </div>
                <div class="price__all">
                    合计<span class="num__two">￥00.00</span>
                </div>
            </div>
            <div class="price__next" @click="pay">
                立即支付
            </div>
        </div>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            nums:0,
            show: false,
            addressShow: false,
            content: "地址不能为空",
            items: [{
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                },
                {
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                },
                {
                    title: '临时停车牌-经典样式',
                    tip: '静电贴材质 7.1cm*8.9cm',
                    price: '0.00',
                    price2: '19.99',
                    img: require('@/static/index/get-car-code1.png')
                }
            ],
			//收货地址列表
			addressList: [],
			//选择收货地址id
			addressId: '',
			//选择的收货地址
			addressInfo: {},
			//免费挪车码
			freeCode: {},
        }
    },
    methods: {
        getMap() {
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                }
            });
        },
        pay() {
            this.createOrder = {
            	addressId: this.addressId,
            	commodityList: [{
            		id: '2022042214065100000000',
            		nums: 1,
            	}],
            }
            let that = this
            let opts = { url: '/app/mall/create/order', method: 'post' };
            this.http.httpTokenRequest(opts, this.createOrder).then(res => {
            	if (res.data.code == 200) {
            		let orderIds = res.data.data
            		that.orderSubmit = {
            			appId: 6,
            			ids: orderIds,
            			channelCode: 'wx_lite',
            		}
            		let opts = { url: '/app/pay/order/submit/more', method: 'post' }
            		this.http.httpTokenRequest(opts, that.orderSubmit).then(res => {
            				if (res.data.code == 200) {
            						let paymentData = res.data.data.invokeResponse;
            						uni.requestPayment({
            							provider: 'wxpay', // 服务提提供商
            							timeStamp: paymentData.timeStamp,
            							nonceStr: paymentData.nonceStr,
            							package: paymentData.packageValue,
            							signType: paymentData.signType,
            							paySign: paymentData.paySign,
            							success: function (res) {
            								uni.navigateTo({
            									url: '/pagesC/pages/shop/payOk'
            								})	
            							},
            							fail: function (err) {
            									console.log('支付失败',err);
            							},
            						});
            				} else {
            		
            				}
            		})
            	}
            })
        },
        add(){
            this.nums++
        },
        addAddress() {
            uni.navigateTo({
                url: '/pagesD/pages/personal/addAddress'
            });
        },
		getAddressList(){
			let opts = { url: '/app/user/address/list', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.addressList = res.data.data
					if(this.addressList !== undefined && this.addressList != null  && this.addressList.length > 0){
						let defaultFlagExist = false
						this.addressList.forEach(element => {
							if(this.addressId){
								if(element.id == this.addressId){
									this.addressInfo = element
									this.addressShow = true
									defaultFlagExist = true
								}
							}else if(element.defaultFlag){
								this.addressInfo = element
								this.addressId = element.id
								this.addressShow = true
								defaultFlagExist = true
							}
						});
						if(!defaultFlagExist){
							this.addressInfo = this.addressList[0]
							this.addressShow = true
						}
					}
				}
			})
		},
		goAddress(){
			uni.navigateTo({
			    url: '/pagesD/pages/personal/myAddress?pay=1' 
			})
		},
		getMoveCode(){
			let opts = { url: '/app/mall/free/code', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.freeCode = res.data.data
				}
			})
		},
    },
	onShow() {
		this.getAddressList()
		this.getMoveCode()
	},
};
</script>

<style lang="scss" scoped>
.getCarCode {
    /deep/ .u-modal__content__text {
        text-align: center !important;
    }

    .price__bottom {
        width: 100%;
        height: 156rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 19rpx 2rpx rgba(215, 215, 215, 0.21);
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        position: fixed;
        bottom: 0;
        padding: 32rpx 40rpx;
        box-sizing: border-box;
        clear: both;

        .price {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price__num {

                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;

                span {
                    font-size: 32rpx;
                    font-family: DIN;
                    font-weight: 500;
                    color: #333333;
                }
            }

            .price__all {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                padding-right: 250rpx;

                span {
                    font-size: 26rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #E1251B;
                }
            }
        }

        .price__next {
            width: 240rpx;
            height: 98rpx;
            background: url('@/static/index/border-btn.png') no-repeat;
            background-size: contain;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            opacity: 0.96;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            top: -10rpx;
        }
    }

    .get__content {
        padding: 40rpx 0rpx;

        .address {
            background: #ffffff;
            display: flex;
            align-items: center;
            padding: 30rpx 40rpx;

            .address__left {
				width: 600rpx;
                .right__title {
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 48rpx;
                    margin-bottom: 20rpx;
                }

                .right__phone {
                    display: flex;
                    align-items: center;

                    span:nth-of-type(1) {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                        padding: 0 14rpx;
                    }
                    
                    span:nth-of-type(2) {
                        font-size: 28rpx;
                        font-family: DIN;
                        font-weight: 500;
                        color: #666666;
                    }
                    span:nth-of-type(3) {
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #F88D28;
                    	margin-left: 20rpx;
                        padding: 2rpx 4rpx;
                        border: 1rpx solid #F88D28;
                    }
                }
            }

            .address__right {
                image {
                    width: 14rpx;
                    height: 24rpx;
                }
            }
        }

        .add__address {
            width: 670rpx;
            height: 90rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
            border-radius: 10rpx;
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #F88D28;
            display: flex;
            margin: 0 auto;
            align-items: center;
            justify-content: center;

            image {
                width: 34rpx;
                height: 36rpx;
                margin-right: 20rpx;
            }
        }

        .content__code {
            padding: 28rpx;
            box-sizing: border-box;
            width: 670rpx;
            height: 220rpx;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            margin: 0 auto;
            position: relative;

            .code__img {
                width: 160rpx;
                height: 160rpx;
                background: #3699ff;
                border-radius: 10rpx;
            }

            .code__money {
                margin: 0 20rpx;

                .money__title {
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #333333;

                    line-height: 42rpx;

                    .code__tips {
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                        line-height: 42rpx;
                    }
                }

                .money__num {
                    .num__one {
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #e1251b;
                        line-height: 42rpx;
                    }

                    .num__two {
                        font-size: 22rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;
                        line-height: 42rpx;
                    }
                }
            }
        }

        .content__list {
            .list__title {
                padding-left: 40rpx;
                font-size: 38rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
            }

            .list__title::before {
                content: "";
                width: 76rpx;
                height: 14rpx;
                background-size: contain;
            }

            .list {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
                padding-right: 40rpx;

                .list__item {
                    padding: 28rpx;
                    box-sizing: border-box;
                    width: 620rpx;
                    height: 220rpx;
                    background: #ffffff;
                    box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
                    border-radius: 20rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                    margin-bottom: 20rpx;

                    .list__img {
                        width: 160rpx;
                        height: 160rpx;
                        background: #3699ff;
                        border-radius: 10rpx;
                        position: absolute;
                        left: -50rpx;
                        border-radius: 20rpx;
                    }

                    .list__money {
                        margin: 0 20rpx;
                        margin-left: 100rpx;

                        .money__title {
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #333333;

                            line-height: 42rpx;

                            .code__tips {
                                font-size: 26rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #666666;
                                line-height: 42rpx;
                            }
                        }

                        .money__num {
                            .num__one {
                                font-size: 26rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #e1251b;
                                line-height: 42rpx;
                                margin-right: 20rpx;
                            }

                            .num__two {
                                font-size: 22rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                                line-height: 42rpx;
                            }
                        }
                    }

                    .list__add {
                        position: absolute;
                        right: 30rpx;
                        bottom: 30rpx;
                        width: 44rpx;
                        height: 44rpx;

                        image {
                            width: 44rpx;
                            height: 44rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
