market-app-ui/pages/goodsDetails/goodsDetails.vue

<template>
	<view>
		<navigation-bar background-color="#fff" front-color="#000000" />
		<u-image width="100%" height="300rpx" :src="goods.goodsImg"></u-image>
		<view class="title">
			{{goods.goodsName}}
		</view>
		<view class="footer">
			<u-button class="custom-style" type="warning">加入购物车</u-button>
			<u-button class="custom-style" type="error">立即购买</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				goods: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getGoodsDetails()
		},
		methods: {
			getGoodsDetails() {
				let params = {
					id: this.id
				}
				this.$api.getGoodsDetails(params).then(res => {
					this.goods = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.title {
		margin: 10rpx;
		font-size: 40rpx;
	}

	.custom-style {
		width: 400rpx;
		height: 100rpx;
		font-size: 30rpx;
	}

	.footer {
		display: flex;
		position: absolute;
		bottom: 1rpx;
	}
</style>