yicangzongtai_app_240321/pages/product/surePay/IntegraPay.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="topStatus u-flex-center-sa u-plr30"  :style="{top:tabTop+'px'}" v-if="sureDataAll.is_able_select_self_take">
			<text class="u-1A1A1A u-font30 " :class="status==1?'active':''"  @click="changeStatus(1)">快递配送</text>
			<text class="u-1A1A1A u-font30" :class="status==2?'active':''"  @click="changeStatus(2)" >上门自提</text>
		</view>
		
		<view class="carbox" :class="sureDataAll.is_able_select_self_take?'changeTabtwo':''">
			<view class="addressBox">
				<view class="" v-if="status==1">
					<ldaddress :value="sureDataAll.receipt" :link='true'></ldaddress>
				</view>
				<view class="goHome" v-if="status==2&&sureDataAll.is_able_select_self_take">
					<view class="u-flex-center u-p30 u-border-one">
						<image class="u-avatar104 u-mr25" :src="sureDataAll.self_take_shop.logo" mode=""></image>
						<view class="u-flex1">
							<view class="u-1A1A1A u-font28 u-bold ">{{sureDataAll.self_take_shop.shop_name}}</view>
							<view class="smallAddress u-mt10">
								<text class="iconfont u-font30 u-mr10 " style="color: #0F8947;">&#xe611;</text>
								<text class="u-font24 u-bold u-999">{{sureDataAll.self_take_shop.province_name}}{{sureDataAll.self_take_shop.city_name}}{{sureDataAll.self_take_shop.area_name}}{{sureDataAll.self_take_shop.address}}</text>
							</view>
						</view>
					</view>
					<view class="u-flex-center u-p30">
						<view class="u-mr45 u-font28 u-999 u-flex-center">
							<text class="u-333 u-bold">提货人：</text>
							<input style="width: 150rpx;" type="text" value="" @input="userName" maxlength="8" placeholder="提货人姓名" placeholder-style="font-size:30rpx;" />
						</view>
						<view class="u-font28 u-999 u-flex-center">
							<text class="u-mr10 iconfont u-02331F u-font30">&#xe64e;</text>
							<input  style="width: 260rpx;" type="number" value="" maxlength="11" @input="userMobile" placeholder="提货人手机号"placeholder-style="font-size:30rpx;" />
						</view>
					</view>
				</view>
			</view>
			<view class="" v-for="(pitem,index) in sureDataAll.shop_orders" :key='pitem.source_shop_id'>
				<view class="shopList  u-mt10" >
					<ldshop :shopStatus='shopStatus' :value="pitem.source_shop_name"></ldshop>
					<view v-for="item in pitem.items" :key='item.goods_id'>
						<ldgoods :value="item" :zhe="false" :isInter='true'></ldgoods>
					</view>
				</view>
			
			<!-- list -->
			<view class="listText u-mt10">
				<!-- <view class="u-border-one u-p30 u-flex-center-sb">					
					<view class="u-font28 u-181818">
						<text>商品金额</text>
					</view>
					<view class="u-font30 u-999">
						¥ {{pitem.original_goods_amount}}
					</view>
				</view> -->
				
				<view class="u-border-one u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>运费</text>
					</view>
					<view class="u-font30 u-999" >
						{{pitem.total_freight?'+¥'+pitem.total_freight+'元':'免运费'}}
					</view>
				</view>
				<!-- <view class="u-border-one-one u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>店铺会员折扣({{pitem.user_role_name}})</text>
					</view>
					<view class="u-font30 u-999">
						-¥ {{pitem.discount_amount}}
					</view>
				</view> -->
				<view class="u-border-one u-p30 u-flex-center-sb" v-if="pitem.first_order_activity">
					<view class="u-font28 u-181818">
						<text>首单优惠</text>
						<text  class="u-font24 u-999">（满{{pitem.first_order_activity.full}}减{{pitem.first_order_activity.reduction}}）</text>
					</view>
					<view class="u-font30 u-999">
						-¥ {{pitem.first_order_reduced}}
					</view>
				</view>
				<view class="u-border-one u-p30 u-flex-center-sb">
					<view class="u-font28 u-181818">
						<text>支付</text>
					</view>
					<view class="u-flex-center-sb">
						<view class="u-flex-center-sb"  v-if="pitem.total_point>0">
					<text class="u-font24 ">积分：</text>
					<view class="u-font30 u-FF0000 u-bold ">
						{{pitem.total_point}}
					 
					</view></view><view class="u-flex-center-sb u-ml30" v-if="pitem.total_amount>0">
					<text >金额:</text>
					<view class="u-font30 u-FF0000 u-bold"  >
						<rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)" ></rich-text>
					</view></view>
					</view>
				</view>
			</view>
			
			<!-- 备注 -->
			<view class="listText u-p30 u-mt10">
				<view class="u-font28 u-181818">购买备注</view>
				<textarea class="textarea u-mt10 u-font28 u-333" @input="textareaText($event,index)"  value="" placeholder="选填，给商家留言"/>
			</view>
			
			</view>
		</view>
		
		<!-- 底部 -->
		
		<view class="botfixed u-flex-center-sb">
			<view class="leftAll u-flex-center">
				<view class="u-flex-center">
					<text class="u-mr20 u-font30 u-666">共{{totaltNum}}件</text>
					<!-- <text class="u-font28 u-333 ">合计：</text>
					<view class="u-FF0000 u-bold">
						<rich-text :nodes="$mUtil.priceBigSmall(sureDataAll.total_money)" ></rich-text>
					</view> -->
					
				</view>
				
			</view>
			<view class="rightP u-flex-center" @click="submitOrder">
				<view class="u-btn btnWidth u-ml30">提交订单</view>
			</view>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	var app = getApp()
	import ldaddress from '../../../components/ld-address/ld-address.vue'
	import ldshop from '../../../components/ld-shop/ld-shop.vue'
	import ldgoods from '../../../components/ld-goods/ld-goods.vue'
	export default{
		components:{
			ldaddress,
			ldshop,
			ldgoods
		},
		data(){
			return{
				shopStatus:false,
				totaltNum:0,
				tabTop:0,
				price:20,
				loading:false,
				status:1,//快递方式标志
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '确认订单',
					color: '#1a1a1a',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#fff'
				},
				sureDataAll:{},
				shopDiscounts:{},
				self_take:{},
				dataJson:{},
				sureData:{},
				addressChose:false,
				imgUrl: this.$mConfig.staticUrl
			}
		},
		
		onLoad(options) {
			this.loading = true;
			this.tabTop=app.globalData.barHeight+44;
			let dataJson = uni.getStorageSync('dataJson')
			// let sureData = uni.getStorageSync('sureData')
			// this.getByShop(sureDataAll.)
			
			if(dataJson){
				this.dataJson = dataJson
			}
		
		},
		
		onShow(){
			let orderreminder =uni.getStorageSync("orderreminder")
			if(orderreminder){
				this.$mUtil.toast("已生成待付款订单")
				uni.removeStorageSync("orderreminder")
			}
			let dataJson = uni.getStorageSync('dataJson')
			if(dataJson&&!this.addressChose){
				this.loading = true;
				this.$http.post(`/order/build`, dataJson).then(res => {
					if (res && res.code == 200) {
						this.loading = false;
						uni.setStorageSync('sureData', res.data)
						if(res.data){
							this.sureDataAll = res.data
							let totaltNum=0
							res.data.shop_orders.forEach(res=>{
								totaltNum+=res.goods_num
							})
							this.sureData = res.data
							this.totaltNum = totaltNum
						}
					}
				}).catch(e=>{
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		},
		methods:{
			//提交订单
			submitOrder(){
				if(this.status==1){//快速配送
					this.dataJson.self_take=null
					
					if(this.dataJson.receipt_id==null&&!this.sureDataAll.receipt.id){
						this.$mUtil.toast('请填写收货地址')
						return false
					}
					this.orderCreated();
				}else{//自提
					if(!this.self_take.receiver){
						this.$mUtil.toast('请填写提货人姓名')
						return false
					}
					if(!this.self_take.mobile){
						this.$mUtil.toast('请填写提货人手机号')
						return false
					}
					if(!(this.self_take.mobile.match(this.$mConfig.telRegex))){
						this.$mUtil.toast('请输入正确手机号')
						return false
					}
					this.dataJson.self_take=this.self_take
					this.orderCreated()
				}
				// this.orderCreated()
					
				
			},
			orderCreated(){
				this.$http.post('/order/create',this.dataJson)
					.then(res => {
						this.loading=false
						if(!res.data.payStatus){
							uni.navigateTo({
								url: "/pages/web-view/Apps?path=" + res.data.payUrl
							})
						}else{
							uni.redirectTo({
								url: `/pages/order/orderList/orderList`
							})
						}
						// if(res&&res.code==200){
						// 	let target = res.data
						// 	if(target.payment_status==5){
						// 		uni.reLaunch({
						// 			url:`/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
						// 		})	
						// 		return false
						// 	}else{
						// 		uni.navigateTo({
						// 			url:'../../order/pay?id='+target.id+'&total_amount='+target.total_amount+'&expired_pay_time='+target.expired_pay_time
						// 		})
						// 	}
							
						// }
					})
			},
			userName(e){
				if(this.status==2){
					this.self_take.receiver = e.detail.value
				}
			},
			userMobile(e){
				if(this.status==2){
					this.self_take.mobile = e.detail.value
				}
			},
			textareaText(e,index){
				this.dataJson.shop_orders.map((v,i)=>{
					if(i==index){
						v.user_remark=e.detail.value
					}
				})
			},
			//店铺优惠查询
			getByShop(id){
				this.$http.get('/marketing/firstOrder/getByShop/'+id,)
					.then(res => {
						if(res&&res.code==200){
							this.shopDiscounts=res.data
						}
					})
			},
			//选完地址回选
			otherFun(object){
				this.addressChose =true
				if(!!object){
					let dataJson = uni.getStorageSync('dataJson')
					dataJson.receipt_id = object.addressid
					this.dataJson = dataJson
					this.postData(dataJson)
				}
			},
			postData(dataJson){
				this.$http.post(`/order/build`,dataJson).then(res=>{
					if(res&&res.code==200){
						uni.setStorageSync('sureData',res.data)
						this.sureDataAll = res.data
						let totaltNum=0
						res.data.shop_orders.forEach(res=>{
							totaltNum+=res.goods_num
						})
						this.sureData = res.data
						this.totaltNum = totaltNum
					}
				})
			},
			changeStatus(val){
				this.status = val
				if(val==1){
					this.dataJson.shipment_mode=0
					
				}else{
					this.dataJson.shipment_mode=1
					
				}
				this.postData(this.dataJson)
			},
			
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.textarea{
		width: 100%;
		height: 234rpx;
		border: 1px solid #ededed;
		padding: 22rpx 20rpx;
		background-color: #fafafa;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.phone {
		margin-right: 10rpx;
		width: 25rpx;
		height: 25rpx;
	}
	.topStatus{
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 9;
		
		width: 100%;
		box-sizing: border-box;
		text{
			line-height: 100rpx;
			position: relative;
		}
		.active{
			font-weight: bold;
			color: #FA6138;
		}
		.active:after{
			width: 100%;
			height: 2px;
			background-color: #FA6138;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.courierAddress{
		background-color: #fff;
		padding: 36rpx 30rpx;
	}
	.goHome,.listText{
		background-color: #fff;
	}
	

	.btnview{
		width: 300rpx;
		margin: 30rpx auto 0;
	}
	.carbox{
		padding: 0rpx 0 160rpx 0;
		.shopList{
			background-color: #fff;
			padding:  30rpx 30rpx 0;
		}
	}
	.changeTabtwo{
		padding: 130rpx 0 160rpx 0;
	}
	.rightText{
		justify-content: space-between;
		height: 200rpx;
	}
	.bottext,.botPrice{
		width: 100%;
	}
	
	.bottext{
		margin-top: 36rpx;
	}
	.rightAddRes{
		width: 172rpx;
		height: 50rpx;
		border-radius: 8rpx;
		border: 1px solid #E5E5E5;
		.centertext{
			text-align: center;
		}
		.btnTag{
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #dedede;
			font-size: 46rpx;
			color: #888;
		}
	}
	
	.btnWidth{
		width: 340rpx;
		background: #FA6138;
	}
	.botfixed{
		position: fixed;
		background-color: #fff;
		width: 100%;
		height: 138rpx;
		bottom: 0;
		left: 0;
		z-index: 9;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>