NurseStationApp/pages/CommodityDetails/CommodityDetails.vue

<template>
	<view class="app">
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" @clickItem='clickItem'
			style='background-color: #fff;height:750rpx'>
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height:100%">
				<!-- <swiper-item v-for="(item ,index) in info" :key="index">
				</swiper-item> -->
				<swiper-item>
					<image style='width:100%;height:750rpx' src="../../static/spjtcs.png" mode=""></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="Commodity common" v-for="(item,index) in goodsDetails" :key="index">
			<view class="name">
				{{item.goodsName}}
			</view>
			<view class="number">
				200{{item.goodsUnit}}
			</view>
			<view class="price">
				￥{{item.goodsPrice}}
			</view>
		</view>
		<view class="choice common"  v-for="(item,index) in goodsDetails" @tap="buyshow=true">
			<view class="selected">
				已选
			</view>
			<view class="content">
				酒精棉片 8盒×1
			</view>
			<image src="../../static/jiantou.png" mode=""></image>
		</view>
		<view class="Discount common">
			<view class="selected">
				优惠
			</view>
			<view class="content">
				购买最多可获得3积分
			</view>
			<image src="../../static/jiantou.png" mode=""></image>
		</view>
		<view class="service common">
			<view class="selected">
				服务
			</view>
			<view class="content">
				· 7天无理由退货
			</view>
			<view class="content" style="display: block;">
				· 仅工作日发货
			</view>
			<image src="../../static/jiantou.png" mode=""></image>
		</view>
		<view class="picture">
			<view class="selected">
				图文服务
			</view>
			<image src="../../static/tpcs.png" mode=""></image>
		</view>
		<view class="Purchasecolumn">
			<view class="buy" @tap="buyshow=true">
				立即购买
			</view>
		</view>

		<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
			<view class="PurchasePage" @click.stop=''>
				<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
				<view class="topcontent">
					<view class="image">
						<image src="../../static/tpcs.png" mode=""></image>
					</view>
					<view class="title">
						<span>酒精棉片</span> <span style='margin-left: 30rpx;'>200片</span>
					</view>
					<view class="price">
						￥36.0
					</view>
				</view>
				<view class="centercontent topcontent">
					<view class="header">
						型号
					</view>
					<view class="Productmodel">
						酒精棉片 8盒
					</view>
				</view>
				<view class="bottomcontent topcontent">
					<view class="header">
						数量
					</view>
					<view class="number">
						<u-number-box :min="1" :max="999"></u-number-box>
					</view>
				</view>
				<view class="buy">
					立即购买
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		goodsDetails
	} from '@/api/CommodityDetails/CommodityDetails.js'
	import baseurl from '@/api/baseurl.js'

	export default {
		data() {
			return {
				goodsDetails:[],
				goodsInfoId:"1",
				buyshow: false, //立即购买遮罩层开关
				//轮播内容
				info: [{
					content: '内容 A'
				}],
				current: 0, //轮播初始下标
				mode: 'dot', //轮播点样式
				swiperDotIndex: 0, //轮播可视图
				number: 1, //数量
			};
		},

		onLoad(options) {
			//获取传值
			console.log(options)
			this.goodsDetailsinfo()
			// this.title = options.title
			this.goodsInfoId = options.goodsInfoId
			// this.goodsListinfo()
		},
		methods: {
			//滑动轮播切换
			change(e) {
				this.current = e.detail.current;
			},
			//点击轮播点切换
			clickItem(e) {
				this.swiperDotIndex = e
			},
			// 查询商品详细信息
			goodsDetailsinfo(){
				goodsDetails(this.goodsInfoId).then(res => {
					// res.data.forEach(e => {
					// 	e.goodsCatrgoryPicture = baseurl + e.goodsCatrgoryPicture
					// })
					this.goodsDetails = res.data
					console.log(this.goodsDetails)
				})
			}
		}
	}
</script>

<style lang="scss">
	.app {
		.mask {
			.PurchasePage {
				position: fixed;
				top: 40%;
				width: 100%;
				height: 60%;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 0px 0px;
				font-size: 36rpx;

				.close {
					width: 31rpx;
					height: 31rpx;
					position: absolute;
					top: 5%;
					right: 5%;
				}

				.topcontent {
					width: 90%;
					margin: 0 auto;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid #D8D4D4;

					.price {
						color: #D43953;
						position: absolute;
						top: 23%;
						left: 40%;
					}

					.title {
						position: absolute;
						top: 13%;
						left: 40%;
						font-weight: 600;
					}

					.image {
						width: 215rpx;
						height: 215rpx;
						background: rgba(150, 147, 148, 0.21);
						margin: 60rpx 0 0 0;

						image {
							width: 201rpx;
							height: 201rpx;
							margin: 7rpx 0 0 7rpx;
						}

					}
				}

				.buy {
					width: 60%;
					height: 71rpx;
					background: #4C7BC9;
					color: #FFFFFF;
					text-align: center;
					line-height: 71rpx;
					border-radius: 26rpx;
					margin: 40rpx 0 0 20%;
				}

				.bottomcontent {
					margin-top: 34rpx;
					padding-bottom: 35rpx;

					.header {
						display: inline-block;
						vertical-align: middle;
					}

					.number {
						display: inline-block;
						position: absolute;
						right: 10%;
					}
				}

				.centercontent {
					margin-top: 34rpx;
					padding-bottom: 35rpx;

					.Productmodel {
						width: 344rpx;
						height: 80rpx;
						background: #ECF1FA;
						border: 1rpx solid #4C7BC9;
						line-height: 80rpx;
						border-radius: 25rpx;
						color: #4C7BC9;
						text-align: center;
						margin-top: 27rpx;
					}
				}
			}
		}

		.Purchasecolumn {
			width: 100%;
			height: 110rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;

			.buy {
				width: 263rpx;
				height: 80rpx;
				background: #4C7BC9;
				border-radius: 25rpx;
				font-size: 38rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				position: absolute;
				right: 5%;
				top: 15rpx;
			}
		}

		.common {
			padding-left: 5%;
		}

		.choice,
		.Discount,
		.service {
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
			font-size: 34rpx;
			line-height: 80rpx;
			margin-bottom: 15rpx;
			position: relative;

			image {
				width: 17rpx;
				height: 26rpx;
				position: absolute;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
			}

			.content {
				display: inline-block;
				position: absolute;
				left: 25%;
			}

			.selected {
				color: #969394;
				display: inline-block;
			}
		}

		.picture {
			background: #FFFFFF;
			box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03);
			position: relative;
			padding-bottom: 110rpx;

			.selected {
				padding: 20rpx 0 0 5%;
				color: #969394;
				display: inline-block;
			}

			image {
				margin-top: 20rpx;
				height: 850rpx;
				width: 100%;
			}
		}

		.service {
			height: 130rpx;
			line-height: 65rpx;

			.content {
				display: inline-block;
				position: absolute;
				left: 25%;
			}

			.selected {
				color: #969394;
				display: inline-block;
			}
		}

		.Commodity {
			height: 160rpx;
			background: #FFFFFF;
			margin: 15rpx 0 15rpx 0;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			font-size: 36rpx;
			line-height: 75rpx;

			.name,
			.number {
				display: inline-block;
			}

			.price {
				color: #D43953;
			}

			.number {
				padding-left: 30rpx;
			}
		}
	}
</style>