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

<template>
	<view>
		<navigation-bar background-color="#fff" front-color="#000000" />
		<u-image width="100%" height="400rpx" :src="goods.goodsImg"></u-image>
		<view class="title pad">
			{{goods.goodsName}}
		</view>
		<view class="price pad">
			￥{{goods.price}} {{goods.goodsUnits}}
		</view>
		<view class="pad">
			<u-tag class="tag" v-for="(item,index) in type" :key="index" :text="item" type="warning" plain></u-tag>
		</view>
		<view class="pad">
			<u--text prefixIcon="home" iconStyle="font-size: 50rpx" :text="goods.merchantName" size="26"></u--text>
		</view>
		<view class="pad">
			<u--text prefixIcon="map" iconStyle="font-size: 50rpx" :text="goods.tradeAreaName" size="26"></u--text>
		</view>
		<view class="pad des">
			<u--text text="商品描述：" size="24"></u--text>
			<u--text :text="goods.description? goods.description : '卖家很懒，什么都没有留下'" size="24"></u--text>
		</view>
		<view class="footer">
			<u-button class="custom-style" type="warning" @click="addCar()">加入购物车</u-button>
			<u-button class="custom-style" type="error">立即购买</u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open">
			<view>
				<text>出淤泥而不染，濯清涟而不妖</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import common from '../../common/js/common'
	export default {
		data() {
			return {
				id: '',
				goods: {},
				type: [],
				show: false,
				num: 1
			}
		},
		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
					if (this.goods) {
						this.type = this.goods.goodsType.toString().split("、")
					}
				})
			},
			addCar() {
				this.show = true
				let user = uni.getStorageInfoSync("info")
				let params = {
					buyUserId: user.id,
					enterpriseId: this.goods.merchantId,
					shopId: shopId,
					tradeAreaId: this.goods.tradeAreaId,
					saleGoodsInfoId: this.goods.id,
					buyUserType: user.userType,
					buyType: 2,
					goodsImg: this.goods.goodsImg,
					goodsName: this.goods.goodsName,
					buyNum: num
				}
				this.$api.addCar(this.goods).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

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

	.pad {
		width: 100%;
		padding: 10rpx;
		display: flex;
	}

	.title {
		font-size: 42rpx;
	}

	.price {
		color: red;
		font-size: 40rpx;
	}

	// .flex-box {

	// }

	.tag {
		width: auto;
		margin-right: 10rpx;
	}

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

	.des {
		border-top: 1rpx #888 solid;
		margin-bottom: 10rpx;
	}

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