ctxx-xcx/ctxx_xcx/pages/shopesOrder/index.vue

<template>
	<view>
		<view class="content">
		<view class="goodsList" v-for="(item,index) in goodsList" :key="index">
			<!-- <view class="order-time">剩余付款时间：{{item.time}}</view> -->
			<view class="goods-content">
				<view class="original-info">
					<view class="original-img">
						<img :src="item.list[item.indexs].logo" alt="">
					</view>
					<view class="original-texts">
						<view class="original-name">{{item.list[item.indexs].title}}</view>
						<view class="original-price-scope">
							<view class="original-text">价格范围</view>
							<view class="original-price">
							{{item.list[item.indexs].ladder_set[item.checkIndexs].title}}
							</view>
						</view>
					</view>

				</view>
				<view class="order-texts">原始照片</view>
				<view class="contents">
					<view class="photo-imgs" v-for="(items,index) in item.imageLiss">
						<view class="original-img" v-if="items">
							<img :src="items" alt="">
						</view>
					</view>
				</view>
			</view>
			<view class="remark">
				备注：{{item.remark}}
			</view>
			<view class="bottoms">
				<view style="color: #222;font-size: 24rpx">实付款</view>
				<view class="money">¥<span>{{item.list[item.indexs].ladder_set[item.checkIndexs].price}}</span></view>
			</view>
		</view>
			<view class="user-info">
				<view class="title">
					填写收货地址
				</view>
				<view style="height: 20rpx;"></view>
				<view class="views" >
					<view class="name">收货人</view>
					<view class="input" >
						<input v-model="from.userName" style="margin-left: 55rpx;" type="text" class="inputs" placeholder="填写姓名"/>
					</view>
				</view>
				<view class="views">
					<view class="name">联系电话</view>
					<view class="input">
						<input maxlength="11" v-model="from.userPhone" class="inputs" type="number" placeholder="填写手机号"/>
					</view>
				</view>
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
				<view class="views">
					<view class="name">所在区域</view>
					<view class="input">
						<input disabled="disabled" v-model="from.address" class="inputs" placeholder="选择收件地区（省、市、区）"/>
					</view>
				</view>
				</pick-regions>
				<view class="views">
					<view class="name">详细地址</view>
					<view class="input">
						<input v-model="from.addDetail" class="inputs" placeholder="例如门牌号、小区、楼层等"/>
					</view>
				</view>

			</view>

				<!-- <view class="goods-infos">
					<view class="goods-img">
						<image :src="goods.cover"></image>
					</view>
					<view class="goods-right">
						<view class="goods-name overflow2">{{goodsInfo.name}} {{goodsInfo.desc}}</view>
						<view class="goods-rule">{{goods.goods_spec}}</view>
					</view>
				</view> -->
				<view class="pay" >
					<view class="wx-icon">
						<image src="../../static/index/wxIcon.png"></image>
					</view>
					<view class="texts" style="flex:1">微信支付</view>
          <view class="wxIcon">
            <image src="../../static/index/check-icons.png"></image>

          </view>
				</view>
				<view style="height: 200rpx;"></view>

		</view>
		<view class="pay-bottom">
			<view class="money">实付款：<span>¥<span style="font-size: 40rpx;">{{price}}</span></span></view>
      <view class="button" @click="$global.clicks(pay)">立即购买</view>

    </view>
	</view>

</template>

<script>
import api from 'utils/api'
import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components:{pickRegions},
		data() {
			return {
				goodsList:[
					{
						image:"url",
						name:"运动鞋",
						price:2000,
						remark:'备注111',
						money:500,
						time:"25分32秒",
						photo:["1","2","3"]
					},
					{
						image:"url",
						name:"运动鞋",
						price:2000,
						remark:'备注111',
						money:500,
						time:"25分32秒",
						photo:["1","2","3"]
					},
				],
				 from:{
					 "userName":"",
					 "userPhone":"",
					 "userDetail":"",
					 "proName":"",
					 "cityName":"",
					 "countyName":"",
					 "addDetail":"",
					 "remark":"",
					 "address":""
				 },
				 pickerValueDefault: [0, 0, 0],
				 pickerText: '',
				 status:0,//0代表是预约 1代表下单购买
				 goods:'',
			     region:[],
				 goodsInfo:'',
				 price:'',
				 }
		},
		onShow() {
			this.getUserInfo();
		},
		onLoad(options) {
			let goods=JSON.parse(uni.getStorageSync("goodsList"))
			if(goods){
				this.goodsList=goods;
				let arr = {};
				let arrs=[];
				console.error(goods)

			}
			if(options){
				this.price=options.price
			}
			let infos=uni.getStorageSync("userInfo")
			if(infos){
				this.from.userName=infos.userName
				this.from.userPhone=infos.userPhone
				this.from.userDetail=infos.userDetail
				this.from.proName=infos.proName
				this.from.cityName=infos.cityName
				this.from.countyName=infos.countyName
				this.from.addDetail=infos.addDetail
				this.from.remark=infos.remark
				this.from.address=infos.address
			}
			// this.getAddress()
		},
		onUnload() {
			let from=this.from;
			uni.setStorageSync("userInfo",from)
		},
		methods: {
			//获取用户信息
			getUserInfo(){
				api.getUserInfo().then((res)=>{
					console.error(res)
					if(res.code==1){
						this.userInfos=res.data.detail
					}
				})
			},
			 tojson(arr){
				if(!arr.length) return null;

				var i = 0;
				len = arr.length,
				array = [];
				for(;i<len;i++){
					array.push({"projectname":arr[i][0],"projectnumber":arr[i][1]});
				}
				return JSON.stringify(array);
			},
			//下单
			pay(){
				let from=this.from;
				if(from.userName==''){
					uni.showToast({
						icon:"none",
						title:"请输入姓名"
					})
					return;
				}
				if(from.userPhone==''){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(from.userPhone))){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return;
				}
				if(from.address==''){
					uni.showToast({
						icon:"none",
						title:"请选择区域"
					})
					return;
				}
				if(from.addDetail==''){
					uni.showToast({
						icon:"none",
						title:"请输入详细地址"
					})
					return;
				}


				let data={
					"goods_json":"",
					"pro_name":from.proName,
					"city_name":from.cityName,
					"county_name":from.countyName,
					"add_detail":from.addDetail,
					"phone":from.userPhone,
					"user_name":from.userName,
					"remark":from.remark,
				}
				let goodsList=this.goodsList;
				let data_ss=[];
				let lists="";
				let arr=[];
				for(let i=0;i<goodsList.length;i++){
					let index_s=goodsList[i].indexs
					let _index=goodsList[i].checkIndexs
					lists={"cate_id":goodsList[i].list[index_s].id,
					ladder_key:goodsList[i].list[index_s].ladder_set[_index].ladder_key,
					images:goodsList[i].imageLiss?goodsList[i].imageLiss.join(','):[],remark:goodsList[i].remark}
					data_ss.push(lists)
				}
				data.goods_json=JSON.stringify(data_ss)
				api.createOrders(data).then((res)=>{
					if(res.code==1){
						api.payOrders({"order_id":res.data.order_id}).then((ret)=>{

							if(ret.code==1){
								let config=ret.data.config.config;
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: config.timestamp,
										nonceStr: config.nonceStr,
										package: config.package,
										signType: config.signType,
										paySign: config.paySign,
										success: function(res) {
											uni.showToast({
												icon:"none",
												title:"支付成功"
											})
											uni.navigateTo({
												url:"/pages/orderSuccess/index"
											})
										},
										fail: function(res) {
											uni.showToast({
												icon:"none",
												title:"支付失败"
											})
										},
										complete: function(res) {
											uni.showToast({
												icon:"none",
												title:"支付取消"
											})
										}
									});
							}
						})
					}
				})
			},
			 handleGetRegion(e){
                this.region = e
				// e 确认后选中的数据
				this.pickerText = JSON.stringify(e)
				this.from.proName=e[0].name;
				this.from.cityName=e[1].name;
				this.from.countyName=e[2].name;
				this.from.address=e[0].name+','+e[1].name+','+e[2].name
            },
			getAddress(){
				api.getAreaTree({"level":3}).then((res)=>{
					if(res.code==1){
						this.treeData=res.data.list;
						console.error(res.data.list)
					}
				})
			},
			//预约订单
			submit(){
				let from=this.from;
				if(from.userName==''){
					uni.showToast({
						icon:"none",
						title:"请输入姓名"
					})
					return;
				}
				if(from.userPhone==''){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(from.userPhone))){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return;
				}
				if(from.address==''){
					uni.showToast({
						icon:"none",
						title:"请选择区域"
					})
					return;
				}
				if(from.addDetail==''){
					uni.showToast({
						icon:"none",
						title:"请输入详细地址"
					})
					return;
				}
				let data={
					"goods_id":this.goodsInfo.id,
					"spec_id":this.goods.id,
					"pro_name":from.proName,
					"city_name":from.cityName,
					"county_name":from.countyName,
					"add_detail":from.addDetail,
					"phone":from.userPhone,
					"user_name":from.userName,
					"remark":from.remark,
				}
				api.makeAppointment(data).then((res)=>{
					if(res.code==1){
						uni.showToast({
							icon:"none",
							title:"预约成功",
							success() {
								setTimeout(()=>{
									uni.navigateTo({
										url:"/pages/subscribe/index"
									})
								},2000)
							}
						})
					}
				})
			},

		}
	}
</script>

<style lang="scss">
.wxIcon{
  margin-right: 32rpx;
  image{
    width: 32rpx;
    height: 32rpx;
  }
}
	.bottoms{
		display: flex;
		justify-content: space-between;
		padding:30rpx;
    .money{
      font-size: 28rpx;
      color: #222;
      span{
        font-size: 40rpx;
        font-weight: 600;
      }
    }
	}
	.goodsList{
		width: 686rpx;
		// height: 400rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 6rpx 0px rgba(231,231,231,0.41);
		border-radius: 16rpx;
		margin-bottom: 25rpx;
		.goods-content{
			padding: 30rpx 30rpx 30rpx 14rpx;
			.contents{
				display: flex;
				flex-wrap: wrap;
				.photo-imgs{
					.original-img{
						margin-left: 16rpx;
						img{
							width: 128rpx;
							height: 128rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
			.goods-contents{


			}

			.order-texts{
				color: #555;
				font-size: 24rpx;
				margin: 16rpx 0 8rpx 14rpx;
			}
			.original-info{
				display: flex;
				margin-left: 14rpx;
				.original-img{
					img{
						width: 128rpx;
						height: 128rpx;
					}
				}
				.original-texts{
					margin-left: 16rpx;
					.original-name{
						color: #222;
						font-size: 28rpx;
						margin-top: 20rpx;
					}
					.original-price-scope{
						display: flex;
						margin-top: 15rpx;
						.original-text{
							color: #555;
							font-size: 24rpx;
						}
						.original-price{
							width: 132rpx;
							height: 32rpx;
							background: #222222;
							border-radius: 8rpx;
							color: #fff;
							text-align: center;
							line-height: 32rpx;
							font-size: 20rpx;
							margin-left: 30rpx;
						}
					}
				}
			}
		}
		.order-time{
			border-radius: 16rpx 16rpx 0 0 ;
			height: 64rpx;
			background-color: #222;
			font-size: 28rpx;
			color: #fff;
			line-height: 64rpx;
			padding-left: 32rpx;
		}
	}
	.pay-bottom{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
    z-index: 111;
    justify-content: space-between;
		bottom: 0;
		display: flex;
		padding: 40rpx 20rpx 0 20rpx;
		.button{
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			line-height: 80rpx;
			width: 320rpx;
			height: 80rpx;
			background: #222222;
			margin-right: 50rpx;
		}
		.money{
      text-align: right;
      flex: 1;
      margin-right: 20rpx;
			//margin-left: 120rpx;
			color: #222;
			font-size: 24rpx;
			margin-top: 15rpx;
			span{
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	.content{
		padding: 30rpx;

		.pay{
			height: 90rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(231,231,231,0.41);
			border-radius: 16rpx;
			display: flex;
			margin: 25rpx 0;
			line-height: 90rpx;
      justify-content: space-between;
			.texts{
				color: #222;
				font-size: 28rpx;
				margin-left: 15rpx;
			}
			.wx-icon{
				image{
					margin: 20rpx 0 0 30rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		.goods-infos{
			height: 124rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(231,231,231,0.41);
			border-radius: 16rpx;
			padding: 30rpx;
			display: flex;
			.goods-img{
				image{
					width: 120rpx;
					height: 120rpx;
				}
			}
			.goods-right{
				margin-left: 20rpx;
				.goods-name{
					color: #222;
					font-size: 24rpx;
				}
				.goods-rule{
					color: #666;
					font-size: 20rpx;
					margin-top: 15rpx;
				}
			}
		}
		.remark{
			// height: 252rpx;
			// background: #FFFFFF;
			// box-shadow: 0px 4rpx 12rpx 0px rgba(231,231,231,0.41);
      flex-wrap: wrap;
      color: #555;
      font-size: 24rpx;
			border-radius: 16rpx;
			margin:25rpx 0;
			padding: 30rpx;
			.title{
				font-size: 28rpx;
				color: #222;
			}
			.place{
				color: #999;
			}
			.text-area{
				font-size: 24rpx;
				color: #333;
				margin-top: 25rpx;
			}
		}
		.user-info{
			height:400rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 12rpx 0px rgba(231,231,231,0.41);
			border-radius: 16rpx;
			width: 630rpx;
			background-color: #fff;
			padding: 30rpx;

			.views{
				display: flex;
				// margin-top: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 24rpx;
				.input{
					.inputs{

						height: 80rpx;
						line-height: 80rpx;
						border-bottom: 1rpx solid #f5f5f5;
						width: 400rpx;
						margin-left: 30rpx;
					}
				}
			}
			.title{
				font-size: 28rpx;
				color: #222;

			}
		}
	}
</style>