mh/components/goods-detail.vue

<template>
	<uni-popup ref="more-detail" type="bottom" :mask-click="false" height="30px">
		<view class="more-detail">
			<view class="more-detail-close" @click="$refs['more-detail'].close()">
				<image src="/static/image/home/guanbi@2x.png" mode=""></image>
			</view>
			<view class="more-detail-head">商品详情</view>
			<view class="content">
				<view>{{goods.goods_name}}</view>
				<view class="props">
					<view>
						<view class="label">参考价：</view>
						<view class="value">￥{{goods.price}}</view>
					</view>
					<view>
						<view class="label">参考概率：</view>
						<view class="value">{{rate.value}}</view>
					</view>
				</view>
			</view>
			<view class="goods.xiangqing">
				<!-- 产品多图 -->
				<image v-for="xq in goods.xiangqing" :src="xq" mode="widthFix"></image>  
				<!-- 产品单图 -->
				<!-- <image :src="goods.image" @click="lookImg()" mode="widthFix"></image> -->
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"payment",
		props:{
			//盒子id
			boxId: Number,
		},
		data() {
			return {
				goods: {},
				rate: {},
				boxDetail:{}
			};
		},
		methods: {
			/**
			 * 打开页面
			 * 
			 */
			open (goods, rate){
				this.goods = goods
				this.rate = rate || {}
				this.$refs['more-detail'].open()
			},
			lookImg () {
				uni.previewImage({
						urls: [this.goods.image],
						longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
										console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
										console.log(err.errMsg);
								}
						}
				});
			},
			//获取详情
			getDetails () {
				this.$api.boxDetail({box_id:this.boxId}).then(res=>{
					if (res.code === 1) {
						this.boxDetail = res.data
						this.record3 = res.data.record.slice(0, 3)
						console.log(this.boxDetail)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.more-detail {
	max-height: 70vh;
	overflow: auto;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	position: relative;
	.more-detail-close {
		top: 30rpx;
		right: 30rpx;
		width: 44rpx;
		height: 44rpx;
		position: absolute;
	}
	.content{
		padding: 0 50rpx 30rpx 50rpx;
	}
	.more-detail-head {
		padding: 0 50rpx 150rpx 50rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		padding: 40rpx 0 50rpx 0;
	}
	.props{
		display: flex;
		margin: 16rpx 0;
		>view{
			display: flex;
			flex: 1;
			align-items: center;
		}
		.label{
			font-size: 28rpx;
			color: #959595;
		}
		.value{
			margin-left: 10rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}

</style>