jiaoyi-uni2/奥莱优品/pages/goods/detail.vue

<template>
	<view class="content">
		<block v-if="loading">
			<view class="skeleton-line max animate" style="height: 400rpx;"></view>
			<view class="skeleton">
				<view class="skeleton-line animate mt15"></view>
				<view class="skeleton-line min animate mt15"></view>
				<view class="skeleton-line min animate mt15"></view>
			</view>
			<view class="skeleton-line max animate mt15" style="height: 200upx;"></view>
			<view class="skeleton-line max animate mt15" style="height: 200upx;"></view>
		</block>
		<view class="goods-content" v-else>
			<scroll-view class="goods-body" scroll-y scroll-with-animation>
			</scroll-view>
			<view class="footer">
				<view class="footer-op">
					<view class="footer-left">
						<view class="item" @click="toNav('home')"><image src="/static/image/goods/home.png"></image>首页</view>
						<view class="item" @click="kfPop"><image src="/static/image/goods/service.png"></image>客服</view>
						<view class="item" @click="toNav('order')"><image src="/static/image/goods/order.png"></image>订单</view>
					</view>
					<view class="footer-right" @click="buyOrder(1)" v-if="isLogin">立即购买 {{ goodsData?$dialog.formatMoney(goodsData.price):'0.00'}}</view>
					<button class="footer-right" @click="toLogin" v-else>登录下单 {{ goodsData?$dialog.formatMoney(goodsData.price):''}}</button>
				</view>
				<view class="footer-safe"></view>
			</view>
		</view>
		<halfLogin ref="loginCom"></halfLogin>
		<kfService ref="kfService"></kfService>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			options:null,
			isLogin:null,
			loading:false,
			goodsData:null
		}
	},
	onLoad(options) {
		app = this;
		const data = uni.getLaunchOptionsSync();
		options.scene = data.scene
		app.options = options
		app.isLogin = uni.getStorageSync("user_token");
	},
	methods: {
		toLogin(){
			this.$refs.loginCom.open();
		},
		kfPop(){
			this.$refs.kfService.open();
		},
		toNav(type) {
			var url = "";
			switch (type) {
				case "order":
					url = "/pages/order/order"
				break;
				case "home":
				default:
					url = "/pages/index/index"
				break;
			}
			uni.switchTab({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	background-color: #fff;
	height: 100vh;
	.skeleton{
		width: 95%;
		margin: 0 auto;
	}
	.goods-content{
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #ededed;
		display: flex;
		flex-direction: column;
	}
	.goods-body{
		height: 0;
		flex: 1;
	}
	.footer{
		background-color: #fff;padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
		.footer-op{
			display: flex;align-items: center;
			.footer-left{
				display: flex;align-items: center;gap: 40upx;justify-content: center;
				.item{flex-direction: column;display: flex;font-size: 24rpx;color: #333;align-items: center;}
				image{width: 40upx;height: 40upx;}
			}
			.footer-right{
				background-color: $main-color;
				color: #fff;
				font-size: 28rpx;
				flex: 1;
				margin-left: 40upx;
				height: 80upx;
				border-radius: 10upx;
				line-height: 80upx;
				text-align: center;
			}
		}
		.footer-safe {
			height: env(safe-area-inset-bottom);width: 100%;
		}
	}
}
</style>