perry-mall/pagesA/getReadyDan/getReadyDan.vue

<template>
	<view class="pad-x160">
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'确认订单'"></status-nav>
		<!-- 容器 -->
		<container-subgroup>
			<view slot="content">
				<view class="bacf6 fon30 col3 radius20 mar-s20 disjbac pad-sx27-zy20">
					<view class="bold">配送方式</view>
					<view class="disac">
						<view @tap="expressEv(0)" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
						<view @tap="expressEv(1)" :class="!isExpress?'activeT':'expressT'"  :style="{background:isExpress?'':publicColor}">自提</view>
					</view>
				</view>
				<!-- 地址信息 -->
				<view v-if="isExpress" class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
					<view class="bold">收件人信息</view>
					<navigator url="/pagesA/myAddress/myAddress?isWhere=0" hover-class="none">
						<view class="disjbac pad-s30">
							<view v-if="addressInfo!=''">
								<view class="fon28 bold mar-x10">{{addressInfo.name}}<span class="mar-z20">{{userPphone}}</span></view>
								<view class="fon24 col9">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str || ''}}{{addressInfo.address || ''}}</view>
							</view>
							<view v-else class="fon24 col9">请完善收件人信息</view>
							<i class="icon icon-next col0"></i>
						</view>
					</navigator>
				</view>
				<!-- 自提地址 -->
				<view v-else class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20">
					<view class="bold">自提地址</view>
					<input type="number" maxlength="11" :focus="isFocus" @blur="blurEv" v-model="zPhone" class="mar-s50 mar-x20" style="border: 2rpx solid #E0E0E0;padding: 20rpx;border-radius: 10rpx;font-size: 24rpx;" placeholder="请输入收货人手机号" />
					<view class="disjbac mar-s50">
						<view>
							<view class="fon28 bold  mar-x20">佩丽饰品</view>
							<view class="fon24 col9">{{goAddress}}</view>
						</view>
						<!-- 立即导航 -->
						<view @tap="goThere(goAddress)" class="disjcac fc col0 fon24">
							<i class="icon icon-navigate-now " style="font-size: 50rpx;"></i>
							<view>立即导航</view>
						</view>
						<!-- <image src="/static/public/daoh.png" class="there" mode="aspectFill"></image> -->
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="bacf6 fon30 radius20 mar-s20 pad-sx27-zy20">
					<view class="bold">订单信息</view>
					<view v-for="(item,index) in orderList" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
						<image @tap="goShopDetail(item.id)" :src="item.imgSrc" class="flexs order-image" mode="aspectFill"></image>
						<view class="width100 disjb fc" style="height: 166rpx;">
							<view @tap="goShopDetail(item.id)" class="fon30 col3 bold clips2">{{item.title}}</view>
							<view class="fon24 colpeili disac fw">
								<view class="mar-y40" v-for="(item1,index1) in item.specs" :key="index1">{{item1}}</view>
							</view>
							<view class="disjbac mar-s10 width100">
								<view class="order-item-price">￥{{item.price}}</view>
								<view class="fon30 col6">x{{item.num}}</view>
							</view>
						</view>
					</view>
					<view class="fon30 disjbac mar-s20 pad-s10">
						<view class="col6">共{{allNum}}件</view>
						<view class="bold colf8">应付款：{{allPrice}}</view>
					</view>
				</view>
				<!-- 优惠 -->
				<view class="bacf6 fon30 col3 radius20 mar-s20 pad-sx27-zy20 disjbac">
					<view class="bold">折扣优惠</view>
					<view class="colf8 bold">￥{{discountPrice}}</view>
				</view>
				<!-- 快递费用 -->
				<view v-if="isExpress" class="bacf6 fon30 radius20 mar-s20 disjbac pad-sx27-zy20">
					<view class="bold">快递费用</view>
					<view class="colf8 bold">￥{{expressInfo.default_price}}</view>
				</view>
			</view>
		</container-subgroup>
		<!-- 底部导航 -->
		<payment :totalPrice="totalPrice" @immediatePayment="goPayment"></payment>
	</view>
</template>

<script>
	import payment from '@/components/payment-subgroup/payment.vue';
	export default {
		components:{
			payment
		},
		data() {
			return {
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				isExpress:true,
				orderList:uni.getStorageSync('orderList'),
				goAddress:'四川省成都市青羊区草堂东路88号',
				discountPrice:0,// 折扣优惠
				isNei:0,
				addressInfo:'',//地址信息
				zPhone:'',//自提时的手机号
				isFocus:false,
				times:0,//点击次数
				expressInfo:{
					code:'',//快递编号
					default_price:0 //快递费
				},
				userPphone:'', // 快递时的手机号
			}
		},
		computed:{
			// 所有商品数量
			allNum(){
				let num = 0;
				this.orderList.forEach(item=>{
					num += item.num;
				})
				return num;
			},
			// 应付款金额
			allPrice(){
				let newPrice = 0;
				this.orderList.forEach(item=>{
					newPrice += item.num * item.price;
				})
				return this.$toolAll.tools.addXiaoShu(newPrice);
			},
			// 合计金额
			totalPrice(){
				let price1 = this.$toolAll.tools.operationEv(this.allPrice, this.discountPrice, '-', 2);
				// 是否计算快递费
				let expressPrice = 0;
				this.isExpress ? expressPrice = this.expressInfo.default_price : expressPrice = 0;
				return  this.$toolAll.tools.operationEv(price1, expressPrice, '+', 2);
			}
		},
		onShow() {
			this.checkChoose();//调用检测地址
		},
		onLoad(options) {
			// 调取查询快递公司信息事件
			this.checkexpress();
		},
		methods: {
			//检测地址
			checkChoose(){
				console.log(uni.getStorageSync('chooseAddress'),165);
				if(uni.getStorageSync('chooseAddress')==''){
					this.checkAddress();//查询地址
				} else {
					console.log(uni.getStorageSync('chooseAddress'));
					let naddress = uni.getStorageSync('chooseAddress');
					this.addressInfo = {
						id:naddress.id,
						name:naddress.userName,
						phone:naddress.userPhone,
						province_str:naddress.province,
						city_str:naddress.city,
						county_str:naddress.county,
						address:naddress.address
					}
					this.userPphone = this.$toolAll.tools.hideMPhone(naddress.userPhone);
				}
			},
			goShopDetail(id){
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}`
				})
			},
			goPayment(){//去付款
				this.isFocus = false;
				let nphone = this.zPhone; // 自提时的手机号
				if(this.isExpress) nphone = this.addressInfo.phone; // 默认地址的手机号
				let self = 1; // 自提的方式
				if(this.isExpress) self = 0; // 快递的配送方式
				let nsku_list = [];
				this.orderList.forEach(item=>{
					let obj = {
						sku_coding:item.coding,
						num:item.num,
						group_id:item.pin_user_id
					}
					nsku_list.push(obj);
				})
				let parmas = {
					sku_list: nsku_list,//商品单号和数量数组
					total: this.totalPrice,//总金额
					address_id: this.isExpress ? this.addressInfo.id : 0,//地址ID
					express_code: this.isExpress ? this.expressInfo.code : '',//快递编码
					pick_self: self,//是否自提0 快递， 1自提
					pick_self_phone: nphone,//联系电话
					original_total: this.allPrice,//原价总金额
					freight: this.isExpress ? this.expressInfo.default_price : 0,//快递费
					discount:0
				}
				if(this.addressInfo=='' && self==0){
					this.$toolAll.tools.showToast('请完善收件人信息');
				} else if(nphone=='' && self==1) {
					this.$toolAll.tools.showToast('请填写收货人手机号');
					this.focusEv();
				} else if(this.$toolAll.tools.isPhone(nphone) && self==1) {
					this.$toolAll.tools.showToast('请正确填写收货人手机号');
					this.focusEv();
				} else {
					if(this.times==0){
						this.times++;
						if(this.allPrice==0){
							this.$toolAll.tools.showToast('正在支付','loading',1500);
						} else {
							this.$toolAll.tools.showToast('正在调起支付','loading',1500);
						}
						this.$requst.post('/api/order/create',parmas).then(res=>{
							if(res.code==0){
								// 调取微信支付
								this.payment(res.data);
							} else {
								this.$toolAll.tools.showToast(res.msg);
								this.times = 0;
							}
						}).catch(err=>{
							this.$toolAll.tools.showToast(err.msg);
						})
					}
				}
			},
			payment(info){
				if(info.needPay){
					uni.requestPayment({
						provider: 'wxpay',
						appId:info.payment_params.appId,//appId
						timeStamp: info.payment_params.timeStamp,//时间戳
						nonceStr: info.payment_params.nonceStr,//随机字符串
						package: info.payment_params.package,//package
						signType: info.payment_params.signType,//MD5
						paySign: info.payment_params.sign,//签名
						success:(res)=> {
							this.times = 0;
							// 支付成功通知
							this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
								if(res.code==0){
									this.$toolAll.tools.showToast('支付成功');
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pagesA/myOrder/myOrder?index=2'
										})
									},2000)
								} else this.$toolAll.tools.showToast(res.msg);
							})
						},
						fail:(err)=> {
							this.$toolAll.tools.showToast('取消支付');
						}
					});
				} else {
					// 支付成功通知
					this.$requst.post('/api/order/paid',{order_coding:info.coding}).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('支付成功');
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pagesA/myOrder/myOrder?index=2'
								})
							},2000)
						} else this.$toolAll.tools.showToast(res.msg);
					})
				}
			},
			goThere(val){//去这里
				wx.getLocation({//获取当前经纬度
				    type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
					success: function (res) {
						wx.openLocation({//​使用微信内置地图查看位置。
							latitude: 30.657707,//要去的纬度-地址
							longitude: 104.036007,//要去的经度-地址,
							name: val,
							address: val
						})
					}
				})
			},
			checkAddress(){//默认地址查询
				this.$requst.post('/api/user/address').then(res=>{
					if(res.code==0){
						if(res.data.length){
							res.data.forEach(item=>{
								if(item.is_default==1) {
									this.addressInfo = item;
								} else {
									if(res.data.length==1){
										this.addressInfo = item;
									}
								}
							})
							this.userPphone = this.$toolAll.tools.hideMPhone(this.addressInfo.phone);
						} else {
							this.addressInfo = '';
						}
					}
				})
			},
			//查询快递费
			checkexpress(){
				if(this.isExpress) {
					this.$requst.post('/api/common/express-list').then(res=>{
						if(res.code==0){
							if(res.data.length!=0){
								res.data.forEach(item=>{
									// 如果查询到有默认地址，赋值默认地址，没有默认地址就取地址列表第一位
									item.is_default==1 ? this.expressInfo = item : this.expressInfo = res.data[0];
								})
							}
						}
					})
				}
			},
			expressEv(index){//快递自取切换事件
				if(index==0) {
					this.isExpress = true;
					if(this.addressInfo==''){this.$toolAll.tools.showToast('请完善收件人信息','none',1500);}
				}
				if(index==1) {
					this.isExpress = false;
				}
			},
			checkOrderDetail(){//查询订单准备信息
				let nsku_list = [];
				this.orderList.forEach(item=>{
					let obj = {
						sku_coding:item.coding,
						num:item.num
					}
					nsku_list.push(obj)
				})
				let parmas = {
					sku_list: nsku_list,
					pick_self: 0
				}
				this.$requst.post('/api/order/prepare-info',parmas).then(res=>{
					if(res.code==0){
					} else this.$toolAll.tools.showToast(res.msg);
				})
			},
			goDetail(){//去订单列表
				uni.navigateTo({
					url:'/pagesA/myOrder/myOrder'
				})
			},
			focusEv(){//获取焦点
				this.isFocus = true;
			},
			blurEv(){//失去焦点
				this.isFocus = false;
			},
		}
	}
</script>

<style>
</style>