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>
				<view class="num">
					<u-button class="numBtn" icon="minus" @click="minus()"></u-button>
					<text v-model="num">{{num}}</text>
					<u-button class="numBtn" icon="plus"  @click="add()"></u-button>
				</view>
				<u-button type="primary" shape="circle" size="40" text="确定" @click="addCar()"></u-button>
			</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("、")
					}
				})
			},
			minus() {
				if (this.num == 1) {
					this.$$common.toast("已经到最小数量，无法在减少")
					return
				} else {
					this.num--
				}
			},
			add() {
				this.num++
			},
			addCar() {
				// this.show = true
				let user = uni.getStorageSync("info")
				let params = {
					buyUserId: user.id,
					enterpriseId: this.goods.merchantId,
					shopId: this.goods.shopId,
					tradeAreaId: this.goods.tradeAreaId,
					saleGoodsInfoId: this.goods.id,
					// buyUserType: user.userType,
					// buyType: parseInt(2),
					goodsImg: this.goods.goodsImg,
					goodsName: this.goods.goodsName,
					// buyNum: parseInt(this.num)
				}
				this.$api.addCar(params).then(res => {
					if(res.code == 200) {
						this.$common.toast(res.msg)
					}
				})
			}
		}
	}
</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;
	}

	.num {
		width: 100%;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
	}

	.numBtn {
		width: 20%;
		margin: 20rpx;
	}

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