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

<template>
	<view>
		<!-- <navigation-bar background-color="#fff" front-color="#000000" /> -->
		<view class="back" @click="back">
			<uni-icons type="back" color="#000000" size="30"></uni-icons>
		</view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image width="100%" src="../../static/news.jpg"></image>
			</swiper-item>
		</swiper>
		<!-- <u-image width="100%" height="800rpx" :src="goods.goodsImg"></u-image> -->
		<!-- <u-image width="100%" height="400rpx" src="../../static/news.jpg"></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" @click="buy()">提交订单</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() {
				this.http.request({
					url: '/level-one-server/TbGoodsTransit/getById',
					data: {
						id: this.id
					},
					success: res => {
						this.goods = res.data.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() {
				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,
					goodsImg: this.goods.goodsImg,
					goodsName: this.goods.goodsName,
					// buyNum: parseInt(this.num)
				}
				this.http.request({
					url: '/level-one-server/app/TbGoodsCart/addGoodsInShopCart',
					data: params,
					contentType: 'application/json; charset=utf-8',
					method: 'POST',
					success: res => {
						setTimeout(function() {
							uni.showToast({
								title: res.data.msg
							});
						}, 1000)
					}
				});
			},
			// 立即购买
			buy() {
				this.http.request({
					url: '/level-one-server/app/TbGoodsTransit/purchaseLevelOntGoodsTransit',
					data: {
						goodsTransitId: this.goods.id
					},
					method: 'POST',
					contentType: 'application/json; charset=utf-8',
					success: res => {
						setTimeout(function() {
							uni.showToast({
								title: res.data.msg
							});
						}, 1000)
					}
				});
			},
			back() {
				uni.navigateBack({delta: 1})
			}
		}
	}
</script>

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

	.back {
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #828282;
		display: flex;
		opacity: 0.4;
		z-index: 1;
		align-items: center;
		justify-content: center;
	}

	.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>