lineage-app/pages/shop/buy.vue

<template>
	<view>
		<view class="top">
			<view class="type">服务类型</view>
			<view class="title">{{ item.goodsType }}</view>
			<view class="clear"></view>
		</view>
		<view class="contents">
			<view class="r">
				<view class="r30"><image :src="ip + item.pic" class="pic"></image></view>
				<view class="r70">
					<view class="">{{ item.title }}</view>
					<view class="pirce">¥{{ item.price }}</view>
					<view class="num">x1</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<view class="note">
			<u-form-item label="备注"><u-input v-model="item.notes" placeholder="备注详情" /></u-form-item>
		</view>
		<view class="lfooter">
			<view class="price">
				<text class="hj">合计：</text>
				¥{{ item.price }}
			</view>
			<view class="buy">提交订单</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			item: {}
		};
	},
	onLoad(e) {
		this.item = JSON.parse(e.item);
	},
	methods: {
		//购买
		buy() {}
	}
};
</script>
<style lang="scss">
.top {
	background-color: white;
	font-size: 15px;
	padding: 12px 15px 12px 15px;
	.type {
		float: left;
	}
	.title {
		float: right;
		color: $dar1;
	}
}
.contents {
	margin-top: 10px;
	padding: 10px;
	background-color: white;
	font-size: 15px;
	.r30 {
		.pic {
			width: 70px;
			height: 70px;
			border-radius: 7px;
		}
	}
	.title {
		color: $dar1;
	}
	.pirce {
		margin-top: 15px;
		color: $theme-color;
	}
	.num {
		float: right;
		margin-top: -16px;
	}
}
.lfooter {
	font-size: 15px;
	display: flex;
	.price {
		line-height: 52px;
		flex: 1;
		color: $theme-color;
		.hj {
			padding-left: 10px;
			color: $dar1;
		}
	}
	.buy {
		flex: 0.5;
		background-color: $theme-color;
		text-align: center;
		color: white;
		height: 52px;
		line-height: 52px;
	}
}
.note {
	margin-top: 10px;
	padding: 0px 10px 0px 10px;
	background-color: white;
	font-size: 15px;
	.u-border-bottom:after {
		border: 0px;
	}
}
</style>