forest-H5/pages/confirmorder/confirmorder.vue

<template>
	<view class="pages">
		<view class="content-wrap">
			<view class="select-bar" @click="getAddrs">
				<svg class="icon select-bar-icon" aria-hidden="true">
					<use xlink:href="#icondizhi1"></use>
				</svg>
				<!-- <view class="select-bar-text">请选择收货信息</view> -->
				<view class="select-bar-text">
					<picker mode="selector" @change="bindPickerChange" :value="index" :range="addrsList" :range-key="'detailAddress'">
						<view class="uni-input">{{theAddr}}</view>
					</picker>
				</view>
				<view class="select-bar-arrow"></view>
			</view>
			<view class="bill-info">
				<view class="bill-product">
					<view class="bill-product-imgwrap">
						<image :src="billData.productImg" class="bill-product-img" mode="aspectFill"></image>
					</view>
					<view class="bill-product-info">
						<view class="bill-product-name">{{billData.productName}}</view>
						<view class="bill-product-price-wrap">
							<view class="left">
								¥
								<text class="bill-product-price">{{billData.productPrice}}</text>
								<text class="bill-product-unit" v-if="billData.productUnit">/{{billData.productUnit}}</text>								
							</view>
							<view class="bill-product-number">
								X {{billData.bayNum}}
							</view>
						</view>
					</view>
				</view>
				<!-- bill-product end -->
				<view class="form-item">
					<view class="form-item-til">商品总额</view>
					<view class="form-item-con amount">
						¥ {{ billData.productPrice*billData.bayNum }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-til">配送方式</view>
					<view class="form-item-con">
						普通快递
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-til">运费</view>
					<view class="form-item-con">
						¥ 0
					</view>
				</view>
			</view>
			<!-- bill-info end -->
			<view class="bottom-btn-wrap">
				<view class="bottom-btn" @click="submit">确认购买</view>
			</view>
		</view>
		<!-- content-wrap end -->
	</view>
</template>

<script>
	import {bus} from "../../utils/bus.js";
	export default {
		data() {
			return {
				token:'',
				params:{},
				billData:null,
				addrsList:[],
				index:0,
				theAddr:'请选择收货地址',
				memberReceiveAddressId:'',
			}
		},
		onShow() {
			
		},
		onLoad() {
			let self = this;
			if(Object.keys(bus.data).length>0){
				this.billData = bus.data;
				// console.log('bus.data',bus.data);
			};
			uni.getStorage({
				key:'token',
				success: function (res) {
					self.token = res.data;
				   // console.log(self.token);
				}
			});			
			this.getAddrs();
		},
		methods: {
			submit(){
				let param = {productId:this.billData.productId,bayNum:this.billData.bayNum,memberReceiveAddressId:this.memberReceiveAddressId};
				this.$api.http.post(this.config.apiBaseurl + '/order/insert',param,{
					header: {
					Accept:'application/json',
					Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res => {
					// console.log('res',res);
					if(res.data.code == 200 ){
						this.pay(res.data.data.order.id,res.data.data.order.payType)
					}else{
						uni.showToast({
							icon:"none",
							title:res.data.message,
							duration: 2000
						});
					}
				}).catch(err =>{
					console.log('err',err)
				});
				// console.log('param',param);
			},
			async pay(orderId,payType){
				
				let userInfo = uni.getStorageSync("userInfo");
					let params = {
						orderId:orderId,
						payType:payType,
						openid:userInfo.wxUsers.openid,
						"tradeType":"test"
					}
					this.$pay.wxPay(params).then(res =>{
						console.log('payres',res);
						if(res.code == 0){
							uni.reLaunch({
								url: '/pages/usercenter/myorder/myorder'
							})
						}else if(res.code == 1){
							uni.navigateTo({
								url: '/pages/usercenter/myorder/myorder'
							})
						}else if(res.code == 2){
							this.$api.msg("支付失败，请检查!")
							setTimeout(()=>{
								uni.navigateTo({
									url: '/pages/usercenter/myorder/myorder',
									fail:function(err){
										console.log(err)
									}
								});
							},1000)
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.message,
								duration: 2000
							});							
						}
					});
				
				// let param = {orderId:orderId,payType:payType};
				// this.$api.http.post(this.config.apiBaseurl + '/order/paySuccess',param,{
				// 	header: {
				// 	Accept:'application/json',
				// 	Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				// },
				// }).then(res => {
				// 	console.log('res',res);
				// 	if(res.data.code == 200 ){
						
				// 	}
				// }).catch(err =>{
				// 	console.log('err',err)
				// });				
			},
			getAddrs(){
				// console.log('this.token',this.token);
				let thetoken = 'Bearer ' + this.token;
				this.$api.http.get(this.config.apiBaseurl + '/member/address/list',{header: {Authorization:thetoken}}).then(res => {
					// console.log('getAddrList', res.data.data);
					this.addrsList = res.data.data;
					if(res.data.data.length>0){
						this.memberReceiveAddressId = res.data.data[0].id;
						this.theAddr = res.data.data[0].detailAddress;
						// console.log('this.memberReceiveAddressId',this.memberReceiveAddressId);
					}else{
						this.theAddr = '您还没有设置收货地址,请到个人中心页面设置!';
					}
				}).catch(err => {
					// console.log('err', err)
				})
			},
			bindPickerChange(e){				
				console.log(this.addrsList[e.target.value]);
				this.memberReceiveAddressId = this.addrsList[e.target.value].id;
				this.theAddr = this.addrsList[e.target.value].detailAddress;
				// console.log('this.memberReceiveAddressId',this.memberReceiveAddressId);
			}

		}
	}
</script>

<style scoped>
	@import url("./confirmorder.css");
</style>