huihouqin-new-ph/pages/index/order.vue

<template>
	<view>
		<view class="address-box" @click="selectAddr">
			<view class="address-box-left">
				<view v-if="!address" class="address-box-unselect">选择收货地址</view>
				<view v-if="address" class="address-box-select">
					<view class="address-box-select-text1">
						{{address.address1}}{{address.address2}}{{address.room}}
					</view>
					<view class="address-box-select-text2">
						{{address.name}}  {{address.phone}}
					</view>
				</view>
			</view>
			<view class="address-box-right">
				<image src="../../images/jiantouyou.png"></image>
			</view>
		</view>
		
		<view class="main">
			<view class="order-box-list">
				<view class="order-box-header">
					<text class="order-box-title">{{orgName}}</text>
					<text class="order-box-desc"></text>
				</view>
				<view v-for="(item,index) in goods" :key="index" class="order-box-body">
					<view class="order-box-body-left">
						<image v-if="item.imageLoad" :src="item.img" @error="onErrorImg(item)" @load="onSuccessImg(item)" mode="aspectFill"></image>
						<image v-if="!item.imageLoad" src="../../images/errorbg.png" mode="aspectFill"></image>
					</view>
					<view class="order-box-body-middle">
						<text class="order-box-body-desc">{{item.title}}</text>
						<text class="order-box-body-cate">x{{item.nums}}</text>
					</view>
					<view class="order-box-body-right">
						￥{{(item.nums*parseFloat(item.price)).toFixed(2)}}
					</view>
				</view>
				<view class="order-box-footer">
					合计 ￥{{totalPrice}}元
				</view>
			</view>
		</view>
		
		<view class="order-btn" @click="addOrder">提交订单</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				goods: [],
				totalPrice: 0,
				orgName: '',
				deliveryTime: null,
				address: null,
				type: 0
			}
		},
		onLoad() {
			this.orgName = uni.getStorageSync(app.globalData.storagePre+'orgName');
			this.getAddr();
		},
		onShow() {
			var that = this;
			
			try {
			    const orderData =JSON.parse(uni.getStorageSync(app.globalData.storagePre+'orderData'));
				const selectGoods = orderData.goods;
				this.deliveryTime = orderData.day;
				this.type = orderData.type;
			    if (selectGoods.length > 0) {
			        this.goods = selectGoods;
					console.log(3333,orderData.goods,orderData);
					this.formatGoods();
			    }else{
					console.log(2222);
					uni.navigateBack({
					    delta: 1
					});
				}
			} catch (e) {
				console.log(1111,e);
			    uni.navigateBack({
			        delta: 1
			    });
			}
			
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'addr'){
					that.address = res.data.data;
				} else if (apiname == 'order') {
					uni.showToast({
						title: '下单成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(function(){
						uni.navigateTo({
						    url: '/pages/order/index'
						});
					},1000);
				}
			}
		},
		methods: {
			formatGoods(){
				this.totalPrice = 0;
				this.goods.forEach((item) => {
					this.totalPrice += item.nums*parseFloat(item.price);
				});
			},
			getAddr(){
				app.ajax({
					url: app.globalData.serverUrl + 'shopAddress/addressOne',
					type: 'POST',
					apiname: 'addr'
				});
			},
			addOrder(){
				const garr = [];
				this.goods.forEach((item) => {
					garr.push({
						id: item.id,
						nums: item.nums						
					});
				})
				app.ajax({
					url: app.globalData.serverUrl + 'shopOrder/addOrder',
					type: 'POST',
					apiname: 'order',
					data: {
						address_id: this.address.id,
						delivery_time: this.deliveryTime,
						type: this.type,
						json: JSON.stringify(garr)
					}
				});
			},
			selectAddr(){
				var that = this;
				uni.navigateTo({
					url: '/pages/address/index?type=1',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							console.log('jieshou:',data)
							that.address = data;
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { addressId: that.address?that.address.id:0 })
					}
				})
			},
			onErrorImg(item){
				this.$set(item, 'imageLoad', false);
				this.$forceUpdate();
			},
			onSuccessImg(item){
				this.$set(item, 'imageLoad', true);
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-btn{
		width: 673rpx;
		height: 72rpx;
		border-radius: 10rpx;
		color: #FFFFFF;
		background-color: $theme-color;
		line-height: 72rpx;
		font-size: 38rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	.address-box{
		width: 680rpx;
		height: 90rpx;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
	}
	.address-box-left{
		display: inline-block;
		width: 630rpx;
		height: 90rpx;
		float: left;
	}
	.address-box-unselect{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
	}
	.address-box-select{
		width: 100%;
		height: 90rpx;
		line-height: 45rpx;
	}
	.address-box-select-text1{
		color: #333333;
		font-size: 34rpx;
		height: 45rpx;
		overflow: hidden;
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.address-box-select-text2{
		color: #949494;
		font-size: 28rpx;
		height: 45rpx;
		overflow: hidden;
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.address-box-right{
		display: inline-block;
		width: 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: right;
		float: right;
	}
	.address-box-right image{
		width: 14rpx;
		height: 24%;
		vertical-align: middle;
	}
	
	.order-box-list{
		width: 680rpx;
		height: auto;
		border-radius: 8rpx;
		margin: 15rpx auto;
		background-color: #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	}
	.order-box-header{
		width: 680rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}
	.order-box-title{
		display: inline-block;
		width: 500rpx;
		height: 100%;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-desc{
		display: inline-block;
		width: 180rpx;
		text-align: right;
		height: 100%;
		color: #949494;
		font-size: 30rpx;
	}
	.order-box-body{
		padding: 20rpx 0 30rpx 0;
		overflow: hidden;
	}
	.order-box-body-left{
		display: inline-block;
		width: 88rpx;
		height: 88rpx;
		float: left;
	}
	.order-box-body-left image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.order-box-body-middle{
		display: inline-block;
		width: 420rpx;
		float: left;
		padding-left: 20rpx;
	}
	.order-box-body-right{
		display: inline-block;
		width: 140rpx;
		height: 88rpx;
		line-height: 88rpx;
		float: right;
		text-align: right;
	}
	.order-box-body-desc{
		display: inline-block;
		width: 100%;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.order-box-body-cate{
		display: inline-block;
		width: 100%;
		font-size: 24rpx;
		color: #949494;
	}
	.order-box-footer{
		border-top: 1rpx solid #F6F6F6;
		padding: 20rpx;
		text-align: right;
	}
</style>