mh/components/goods-detail.vue

<template>
	<uni-popup ref="more-detail" type="bottom" :mask-click="false" height="30px">
		<scroll-view class="scrolllist" scroll-y="true">
			<view class="more-detail">
				<view class="more-detail-close" @click="$refs['more-detail'].close()"><image src="https://www.chaomangdao.com/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.indexOf('http') == -1 ? 'https://www.chaomangdao.com' + xq : xq" mode="widthFix"></image>
					<!-- 产品单图 -->
					<!-- <image :src="goods.image" @click="lookImg()" mode="widthFix"></image> -->
				</view>
			</view>
		</scroll-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">
.scrolllist {
	max-height: 70vh;
}
.more-detail {
	max-height: 70vh;
	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>