h5-tiyu/pages/index/orderinfo.vue

<template>
	<view class="page">
		<view class="info">
			<view class="u-flex u-row-between">
				<text class="shang">商品信息</text>
				<text class="more" @click="open" v-if="orderlist.length>3 && this.opena == false">展开</text>
				<text class="more" @click="open" v-if="orderlist.length>3 && this.opena==true">收起</text>
			</view>
			<!-- 			<view v-if="index==1" class="u-flex" style="margin-top: 32rpx;" :key="index">
				<view class="box">
					<image :src="item.image" style="width: 120rpx;height: 160rpx;" mode=""></image>
				</view>
				<view class=""
					style="margin-left: 20rpx;justify-content: space-between;display: flex;flex-direction: column;height: 160rpx;">
					<view class="" style="width: 500rpx;">
						<view class="title u-line-1" style="margin-bottom: 8rpx;">{{item.title}}</view>
						<view class="fufei">资源类型：付费资源</view>
						<view class="fufei">资源类型：免费资源</view>
					</view>
					<view class="money">¥{{item.price}}</view>
				</view>
			</view> -->
			<view class="u-flex" style="margin-top: 32rpx;" v-for="(item,index) in orderlist" :key="index">
				<view class="box">
					<image :src="item.good_item.image" style="width: 120rpx;height: 160rpx;" mode=""></image>
				</view>
				<view class=""
					style="margin-left: 20rpx;justify-content: space-between;display: flex;flex-direction: column;height: 160rpx;">
					<view class="" style="width: 500rpx;">
						<view class="title u-line-1" style="margin-bottom: 8rpx;">{{item.good_item.title}}</view>
						<view class="fufei" v-if="item.good_item.price>0">资源类型：付费资源</view>
						<view class="fufei" v-if="item.good_item.price==0">资源类型：免费资源</view>
					</view>
					<view class="money">¥{{item.good_item.price}}</view>
				</view>
			</view>
			<view class="jiner ">
				<view class="" style="margin-top: 24rpx;" class="u-flex u-row-between">
					<text class="sum">商品金额</text>
					<view class="">
						<text class="figure">￥</text>
						<text class="figure" style="font-size: 32rpx;font-weight: 400;">{{orderinfo.total_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<u-radio-group v-model="value" >
				<view class="u-flex u-row-between" style="width: 680rpx;">
					<view class="u-flex">
						<image src="/static/images/wei.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="weipay">微信支付</view>
					</view>
					<view class="">
						<u-radio name="0">
						</u-radio>
					</view>
				</view>
				<view class="u-flex u-row-between"
					style="width: 680rpx;border-top: rgba(151, 151, 151, 0.1);margin-top: 30rpx;padding-top: 26rpx;">
					<view class="u-flex">
						<image src="/static/images/zhi.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="weipay">支付宝支付</view>
					</view>
					<view class="">
						<u-radio name="1"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="" style="height: 166rpx;"></view>
		<view class="bottom u-flex u-row-right">
			<view class="">
				<text>合计：</text>
				<text>￥</text>
				<text>{{orderinfo.total_price}}</text>
			</view>
			<view class="btn" @click="pay">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				orderlist: [],
				orderinfo: {
					total_price: ''
				},
				order: {

				},
				index: '',
				opena: false
			};
		},
		onLoad(options) {
			this.orderid = options.id
			this.index = options.index
			this.getOrderList()
		},
		methods: {
			open() {
				this.opena = !this.opena
			},
			//获取订单列表
			getOrderList() {
				this.$u.post('api/order/getOrderInfo', {
					id: this.orderid
				}).then(res => {
					this.orderinfo = res.data
					if (this.opena) {
						this.orderlist = res.data.goods
					} else {
						this.orderlist = res.data.goods.slice(0, 3)
					}
					console.log(res);
				})
			},

			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			pay() {
				uni.navigateTo({
					url: '/pages/index/pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weipay {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 20rpx;
	}

	.bottom {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 28rpx;
		left: 0;

		.btn {
			width: 212rpx;
			height: 88rpx;
			background: #06A971;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-left: 24rpx;
		}
	}

	.pay {
		width: 694rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 32rpx 20rpx;
	}

	.jiner {
		width: 654rpx;
		// height: 2rpx;
		border-top: 2rpx solid rgba(151, 151, 151, 0.1);
		margin-top: 32rpx;

		.sum {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #222222;
		}

		.figure {
			font-size: 26rpx;
			font-family: JDZhengHT, JDZhengHT;
			font-weight: 300;
			color: #222222;
		}
	}

	.shang {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #222222;
	}

	.more {
		font-size: 26rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #06A971;
	}

	.fufei {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
	}

	.money {
		font-size: 32rpx;
		font-family: SFPro, SFPro;
		font-weight: 400;
		color: #CF1534;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.info {
		width: 694rpx;
		// height: 944rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx 20rpx 30rpx;
	}

	.page {
		background-color: rgba(244, 244, 244, 1);
		padding: 20rpx 28rpx;
		min-height: 94vh;
	}

	.box {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx solid rgba(151, 151, 151, 0.2);
		padding: 0 20rpx
	}
</style>