CjyTravel/subPageA/shop/shopDetail/shopDetail.vue

<template>
	<view class="v-pages-bg bgcolor p-b-24">
		<!-- 轮播 -->
		<swiper :autoplay="autoplay" class="lh-swiper" :duration="duration" :indicator-dots="indicatorDots"
			:interval="interval">
			<swiper-item v-for="(item, index) in pic_list" :key="index">
				<image class="slide-image" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<!-- 详情头部 -->
		<view class="v-card detail container-fluid m-t--80">
			<view class="v-shop-price row flex-align-center">
				<text class="num-pre">&yen;</text>
				<text class="num-price">{{info.price}}</text>
				<text class="num-del col">&yen;{{info.marketPrice}}</text>
				<text class="num-sell">已售 {{info.soldQuantity}}</text>
			</view>
			<view class="v-shop-name">{{info.merchantName}}</view>
			<view class="v-detail-name">
				<view class="text inline-block">{{info.goodsName}}</view>
				<view class="v-detail-tip m-t-12"><text class="item">文创产品</text></view>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="v-card detail container-fluid m-t-24">
			<view class="v-detail-title">
				<view class="text"><text>商品详情</text></view>
			</view>
			<view class="v-detail-content m-t-24">
				<u-parse :content="info.description" />
			</view>
		</view>

		<view class="v-order-submit">
			<view class="btn m-t-24 text-center" @click="orderSubmit">立即购买</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/uni_modules/uview-ui/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				//轮播
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,
				//数据
				pic_list: undefined,
				info: {},
				netType: true,
				id:1
			};
		},
		onLoad: function(options) {
			// this.id = options.id
			this.getInitPage();
		},
		methods: {
			// 页面初始化
			getInitPage: function() {
				var that = this;
				var data = {
					"goodsId": this.id
				}
				this.$Request.get(this.$config.selectAppGoodsDetails, data, '', '', false, false).then(res => {
					this.info = res.data;
					this.pic_list = res.data.picPhoto.split(",")
				})
			},
			orderSubmit:function(){
				/* this.judgeLogin((resa) => {

					var data = {
						openid: this.userInfo.openid,
						shopId: this.info.id,
						goodsName: this.info.goodsName,
						price:this.info.price,
						merchantId:this.info.merchantId,
						merchantName:this.info.merchantName
					};

					const parame = {
						...val,
						...data
					}

					const shop = encodeURIComponent(JSON.stringify(parame));

					uni.navigateTo({
						url: "/subPageC/bookShop/bookShop?shop=" + shop
					});
				}); */
				var data = {
					shopId: this.info.id,
					goodsName: this.info.goodsName,
					price:this.info.price,
					merchantId:this.info.merchantId,
					merchantName:this.info.merchantName
				};
				uni.navigateTo({
					url: "/subPageC/bookShop/bookShop?shop=" + data
				});
			}
		}
	};
</script>

<style lang="scss">
	.scroll-view {
		top: 200rpx;
	}

	.lh-swiper {
		width: 100%;
		height: 400rpx;
		overflow: hidden;
		position: relative;
	}

	.lh-swiper .slide-image {
		width: 100%;
		height: 100%;
	}

	.v-shop-price {
		margin-top: 4rpx;

		.num-pre {
			color: #e02222;
			font-size: 24rpx;
		}

		.num-price {
			color: #e02222;
			font-size: 48rpx;
			margin-right: 12rpx;
		}

		.num-del {
			text-decoration: line-through;
			font-size: 30rpx;
			color: #cccccc;
		}

		.num-sell {
			font-size: 30rpx;
			color: #cccccc;
		}
	}

	.v-shop-name {
		position: relative;
		display: inline-block;
		padding: 4rpx 20rpx 4rpx 30rpx;
		margin: 4rpx 0 4rpx 20rpx;
		background-color: rgba(#CA8950, .16);
		color: #CA8950;
		border-radius: 4rpx;
		font-size: 24rpx;

		&:before {
			content: "";
			position: absolute;
			left: -20rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 38rpx;
			height: 38rpx;

			background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-shop.png');
			background-repeat: no-repeat;
			background-position: center;
			background-size: 38rpx;
		}
	}
</style>