point-app/pagesHome/order/detail.vue

<template>
	<mobile-frame>
		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
			@scroll="handleScroll">
			<view class="main" id="top">
				<view class="onemain">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list-scroll-view">
							<view class="one">
								<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
									indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
									<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
										<image class="image" :src="item.url" mode=""></image>
									</swiper-item>
								</swiper>
							</view>
							<view class="two">
								<view class="two_1">
									<view class="money_1">
										<text>¥</text>
										<text>{{info.sell_money}}</text>
									</view>
									<view class="money_2">
										<text>¥</text>
										<text>{{info.flow_money}}</text>
									</view>
								</view>
								<view class="two_2">{{info.name}}</view>
								<view class="two_3">{{info.shot_brief}}</view>
								<view class="two_4">
									<text>运费{{info.freight}}元</text>
									<text>{{info.send_time}}内发货</text>
								</view>
							</view>
							<view class="thr">
								<view class="thr_1" @click="toChoose">
									<view class="title">选择规格</view>
									<text class="iconfont icon-dayufuhao"></text>
								</view>
								<view class="thr_1">
									<view class="title">商品评价({{info.comment||0}})</view>
									<text class="iconfont icon-dayufuhao"></text>
								</view>
							</view>
							<view class="four">
								<view class="four_1">
									<image class="image" :src="shop.file"></image>
									<view class="other">
										<view class="name">{{shop.name}}</view>
										<view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
									</view>
								</view>
								<view class="four_2">
									<view class="grade">商品：<text>{{shop.grade||'5.00'}}</text></view>|
									<view class="grade">发货：<text>{{shop.grade||'5.00'}}</text></view>|
									<view class="grade">服务：<text>{{shop.grade||'5.00'}}</text></view>
								</view>
								<view class="four_2">
									<view class="btn">进入店铺</view>
									<view class="btn">关注</view>
								</view>
							</view>
							<view class="five">
								<view class="five_1">{{info.brief}}</view>
								<view class="five_2" v-for="(item,index) in bannerList" :key="index">
									<image class="image" :src="item.url"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="foot">
					<uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>
			</view>
		</scroll-view>
		<view class="collect">
			<text v-if="collection==false" @click="toCollect('true')" class="iconfont icon-kongxin"></text>
			<text v-if="collection==true" @click="toCollect('false')" class="iconfont icon-shixin"></text>
		</view>
		<view class="menu">
			<text @click="menu" class="iconfont icon-gengduo"></text>
		</view>
		<view class="backTop" v-if="isShow==true">
			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view class="content">
				<view class="one">
					<image class="image" :src="info.file"></image>
					<view class="other">
						<view class="money">
							<text>¥</text>
							<text>{{info.sell_money}}</text>
						</view>
						<view class="other_1">
							已选: <text>{{Selected}}</text>
						</view>
					</view>
					<view class="btn">
						<text @click="toClose" class="iconfont icon-shanchu"></text>
					</view>
				</view>
				<view class="two">
					<view class="two_1">口味</view>
					<view class="two_2"><text>{{info.specs.flavor}}</text></view>
				</view>
				<view class="thr">
					<text>数量:</text>
					<view class="count">
						<lxc-count @handleCount="toCount" :value="info.specs.num" :delayed="100">
						</lxc-count>
					</view>
				</view>
				<view @click="toBuy" class="button">立即购买</view>
			</view>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	import lxcCount from '@/components/lxc-count/lxc-count.vue'
	export default {
		components: {
			lxcCount
		},
		data() {
			return {
				options: [{
						icon: 'shop',
						text: '店铺',
					},
					{
						icon: 'cart',
						text: '购物车',
					}, {
						icon: 'chat',
						text: '客服',
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				bannerList: [ // 轮播图
					{
						url: require('@/static/test.png')
					},
					{
						url: require('@/static/test.png')
					},
					{
						url: require('@/static/test.png')
					},
					{
						url: require('@/static/test.png')
					},
				],
				// 详情
				info: {
					file: require('@/static/test.png'),
					name: '大红门无淀粉果木熏火腿360g',
					sell_money: 28.8,
					flow_money: 35,
					shot_brief: '果木熏制 传统技法',
					freight: 8.00,
					send_time: '24h',
					specs: {
						flavor: '果木熏火腿',
						num: 0
					},
					brief: '简介',
				},
				shop: {
					file: require('@/static/test.png'),
					name: '官方自营店',
					num: 2,
					time: '2022-09-27'
				},
				// 已选
				Selected: '',
				// 是否显示返回顶部
				isShow: false,
				topItem: '',
				// 收藏
				collection: false
			};
		},
		onShow: function() {},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
			},
			// 选择规格
			toChoose() {
				this.$refs.popup.open();
			},
			// 关闭弹框
			toClose() {
				this.$refs.popup.close()
			},
			// 计数器
			toCount(e) {
				console.log(e);
			},
			// 立即购买
			toBuy() {},
			// 计算高度
			handleScroll(e) {
				const that = this;
				let scrollTop = e.detail.scrollTop;
				that.isShow = scrollTop > 500;
				that.topItem = '';
			},
			// 返回顶部
			backTop() {
				const that = this;
				that.topItem = 'top'
			}
		}
	}
</script>

<style lang="scss">
	.scrollView {
		height: 100vh;
	}

	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.onemain {
			position: relative;
			flex-grow: 1;
			background-color: var(--f9Color);

			.one {
				swiper {
					height: 80vw;
				}

				.list {
					border-radius: 5px;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}
			}

			.two {
				padding: 0 0 2vw 0;
				background-color: var(--mainColor);

				.two_1 {
					display: flex;
					align-items: center;
					border-bottom: 0.5vw solid var(--f9Color);
					padding: 2vw;

					.money_1 {
						color: var(--ff0Color);

						text {
							margin: 0 1vw 0 0;
						}

						text:last-child {
							font-size: var(--font20Szie);
							font-weight: bold;
						}
					}

					.money_2 {
						text-decoration: line-through;
						color: var(--f99Color);

						text {
							margin: 0 1vw 0 0;
						}

						text:last-child {
							font-size: var(--font16Size);
						}
					}
				}

				.two_2 {
					font-size: var(--font18Szie);
					font-weight: bold;
					padding: 1vw 2vw;
				}

				.two_3 {
					font-size: var(--font16Szie);
					color: var(--f85Color);
					padding: 1vw 2vw;
				}

				.two_4 {
					font-size: var(--font12Size);
					color: var(--fcColor);
					padding: 1vw 2vw;

					text {
						margin: 0 2vw 0 0;
					}
				}
			}

			.thr {
				.thr_1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 2vw 0 2vw 0;
					padding: 2vw;
					background-color: var(--mainColor);
				}
			}

			.four {
				padding: 2vw;
				background-color: var(--mainColor);

				.four_1 {
					display: flex;
					justify-content: space-between;

					.image {
						width: 15vw;
						height: 15vw;
					}

					.other {
						flex-grow: 1;
						margin: 0 0 0 2vw;

						.name {
							font-size: var(--font16Szie);
						}

						.other_1 {
							font-size: var(--font12Size);

							text {
								color: var(--fcColor);
								margin: 0 2vw 0 0;
							}
						}
					}
				}

				.four_2 {
					display: flex;
					flex-direction: row;
					justify-content: space-evenly;
					padding: 2vw 0;
					color: var(--f99Color);

					.grade {
						font-size: var(--font14Size);
						color: var(--f85Color);

						text {
							color: var(--ff0Color);
						}
					}

					.btn {
						border: 0.1vw solid var(--fcColor);
						padding: 1vw 6vw;
						border-radius: 1vw;
						color: var(--f00Color);
					}

					.btn:last-child {
						padding: 1vw 10vw;
					}
				}
			}

			.five {
				margin: 2vw 0 0 0;

				.five_1 {
					padding: 2vw;
					background-color: var(--mainColor);
					font-size: var(--font18Szie);
					color: var(--f99Color);
				}

				.five_2 {
					padding: 0 2vw;
					background-color: var(--mainColor);
					text-align: center;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.scrollView {
		height: 100vh;
	}

	.collect {
		position: fixed;
		top: 20vw;
		right: 5vw;

		text {
			font-size: 30px;
			background-color: #0000005f;
			border-radius: 90px;
		}
	}

	.menu {
		position: fixed;
		bottom: 20vw;
		right: 5vw;

		text {
			font-size: 30px;
			background-color: #0000005f;
			border-radius: 90px;
		}
	}

	.backTop {
		position: fixed;
		bottom: 10vw;
		right: 5vw;

		text {
			font-size: 30px;
			background-color: #0000005f;
			border-radius: 90px;
		}
	}

	.content {
		height: 100vw;

		.one {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 2vw;
			padding: 2vw 0;
			border-bottom: 1px solid var(--f9Color);

			.image {
				width: 25vw;
				height: 25vw;
				margin: 0 2vw 0 0;
			}

			.other {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				margin: 0 0 0 2vw;

				.money {
					color: var(--fFB1Color);
					font-size: var(--font20Szie);
					padding: 2vw 0;
				}

				.other_1 {
					font-size: var(--font14Size);

					text {
						font-weight: bold;
						padding: 0 2vw;
						color: var(--ff0Color);
					}
				}
			}
		}

		.two {
			margin: 0 2vw;
			padding: 2vw 0;
			font-size: var(--font12Size);
			border-bottom: 1px solid var(--f9Color);

			.two_2 {
				padding: 1vw;

				text {
					padding: 1vw;
					border-radius: 1vw;
					background-color: var(--f9Color);
				}
			}
		}

		.thr {
			display: flex;
			justify-content: space-between;
			margin: 0 2vw;
			padding: 2vw 0;

			text {
				margin: 1vw 0 0 0;
			}

			.count {
				margin: 0 2vw;
				flex-grow: 1;
			}
		}

		.button {
			position: fixed;
			width: 100vw;
			padding: 4vw 0;
			background-color: var(--fFB1Color);
			bottom: 0;
			text-align: center;
			font-size: var(--font18Szie);
			color: var(--mainColor);
		}
	}
</style>