hezhiying/pages/ConfirmOrder/ConfirmOrder.vue

<template>
	<view class="page">
		<navbar :title="'确认订单'" :isCenter="true" :back="true" @onBack="backHandle"></navbar>
		<view v-if="qgSuccess">
			<!-- 地址 -->
			<view class="address-data">
				<view class="address-list" @click="onSkip('address')">
					<view v-if="hasAddr">
						<view class="list">
							<view class="moren" v-show="addressObj.is_default">
								默认
							</view>
							<text>{{addressObj.consignee}}</text>
							<text style="font-weight: normal;">{{addressObj.mobile}}</text>
						</view>
						<view class="list">
							<text style="font-weight: normal;">{{addressObj.province_name}}{{addressObj.city_name}}{{addressObj.district_name}}</text>
						</view>
						<view class="list">
							<text class="address">{{addressObj.address}}</text>
						</view>
					</view>
					<view v-if="!hasAddr" class="nothasAddr">
						<view class="text">
							请选择收货地址
						</view>
						<text class="iconfont icon-more"></text>
						
					</view>
				</view>
				
			
				<!-- 商品 -->
				<view class="goods-data">
					
					<view class="goods-list">
						<view class="list">
							<view class="thumb">
								<image :src="productObj.image" mode="aspectFill"></image>
							</view>
							<view class="item">
								<view class="title">
									<text class="name one-omit">{{productObj.name}}</text>
									
								</view>
								<view class="price-number">
									<view class="price">
										<text class="min">￥{{productObj.price}}</text>
										
									</view>
									<view class="number">
										<text>x 1</text>
									</view>
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			
			</view>
			
			<!-- 订单金额 -->
			<view class="order-price">
				<view class="price-list">
					<view class="list">
						<view class="title">
							<text>备注</text>
						</view>
						<view class="price">
							<text></text>
							<text class="iconfont icon-more"></text>
						</view>
					</view>
					<view class="list">
						<view class="title">
							<text>商品总额</text>
						</view>
						<view class="price">
							<text>{{productObj.price}}</text>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 地址提示 -->
			<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
				<text>{{addressObj.province_name}}{{addressObj.city_name}}{{addressObj.district_name}}{{addressObj.address}}</text>
			</view>
			<!-- 底部合计提交 -->
			<view class="footer-submit">
				<view class="price">
					<text class="min">合计：￥{{productObj.price}}</text>
					
				</view>
				<view class="submit" @click="onSubmit">
					<text>提交订单</text>
				</view>
			</view>
		</view>
		<view class="noqg" v-if="!qgSuccess">
			<image src="../../static/image/ku.png" mode="widthFix"></image>
			<view class="yihan">
				很遗憾，您抢购的宝贝已被别人抢先一步...
			</view>
			<view class="back" @click="backHandle">
				返回继续抢购
			</view>
		</view>
		
		
		<u-toast ref="uToast"></u-toast>
		<u-popup mode="center" round="10" :customStyle="{'width':'70%'}" :show="show" @close="close">
			<view class="showcontent">
				<image src="../../static/image/alert-bg.png" mode="widthFix"></image>
				<view class="contentContainer">
					<view class="text">
						<view class="textTitle">
							温馨提示
						</view>
						<view class="intrTitle">
							恭喜您，抢购成功
						</view>
						<view class="intr">
							您可以在“我的->我的仓库”中查看订单
						</view>
					</view>
					<view class="btnContent">
						<view class="submitBtn"  @click="onSkip('cangku')">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getAddrList,createOrder} from '@/common/api.js'
	import navbar from '@/components/navbar.vue'
	export default {
		components:{navbar},
		data() {
			return {
				scrollTop: 0,
				hasAddr:false,
				addressObj:{
					id:null,
					consignee:'',
					mobile:'',
					is_default:false,
					province_name:'',
					city_name:'',
					district_name:'',
					address:''
				},
				productObj:{
					id:null,
					image:'',
					name:'',
					price:''
				},
				show:false,
				qgSuccess:true,
			};
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop;
		},
		methods:{
			close() {
			  this.show = false
			},
		
			/**
			 * 提交订单
			 */
			onSubmit(){
				if(!this.hasAddr){
					this.$refs.uToast.show({
						message:'请选择收货地址'
					})
					return;
				}
				let params={
					address_id:this.addressObj.id,
					goods_id:this.productObj.id
				}
				console.log(params)
				createOrder(params).then(res=>{
					console.log(res,"==")
					if(res.code==1){
						this.show = true;
					
					}else{
						this.qgSuccess = false;
					}
				})
			},
			backHandle(){
				uni.redirectTo({
				  url: '/pages/qianggou/productList',
				})
			},
			
			onSkip(type){
				switch (type){
				  case 'address':
					uni.navigateTo({
					  url: '/pages/AddressList/AddressList',
					})
					break;
				  case 'cangku':
					// uni.navigateTo({
					//   url: '/pages/warehouse/buy?type=-1',
					// })
					uni.navigateTo({
					  url: '/pages/qianggou/productList',
					})
					break;
				}
			},
			getList(){
				getAddrList().then(res=>{
					let arr = res.data.filter(item=>{
						return item.is_default
					})
					if(arr.length>0){
						this.hasAddr = true;
						this.addressObj = Object.assign({},this.addressObj,arr[0])
					}else{
						this.hasAddr = false;
						this.addressObj = this.$options.data().addressObj
					}
					
				})
			}
		},
		onLoad(option){
			if(option.item){
				this.addressObj = Object.assign({},this.addressObj,JSON.parse(option.item));
				this.hasAddr = true;
			}
			
			this.productObj = Object.assign({},this.productObj,uni.getStorageSync('qgPro'))
			if(!this.addressObj.id){
				this.getList()
			}
		},
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
</style>