point-app/pagesHome/order/detail.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="onemain">
				<scroll-view scroll-y="true" class="scroll-view" scroll-with-animation :scroll-into-view="topItem"
					@scroll="handleScroll">
					<view class="list-scroll-view" id="top">
						<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>
		<view class="collect">
			<text v-if="!collection" @click="toCollect" class="iconfont icon-kongxin"></text>
			<text v-else @click="toCollect" class="iconfont icon-shixin"></text>
		</view>
		<view class="menu">
			<text @click="toMenu" class="iconfont icon-gengduo"></text>
		</view>
		<view class="menu_1" v-if="menu">
			<view class="title" v-for="(item,index) in barList" :key="index" @click="toPath(item)">
				<image class="image" :src="item.normal"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</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 @click="toStyle"
							:style="{color:color,background:background}">{{info.specs.flavor}}</text></view>
				</view>
				<view class="thr">
					<text>数量:</text>
					<view class="count">
						<uni-number-box :disabled="disabled" v-model="info.specs.num" @change="toCount">
						</uni-number-box>
					</view>
				</view>
				<view @click="toBuy" class="button">立即购买</view>
			</view>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				barList: [{
						name: '首页',
						route: 'pages/home/index',
						normal: require('@/static/shouye.png'),
						active: require('@/static/shouye_1.png')
					},
					{
						name: '微店',
						route: 'pages/store/index',
						normal: require('@/static/store.png'),
						active: require('@/static/store_1.png')
					},
					{
						name: '周边',
						route: 'pages/week/index',
						normal: require('@/static/week.png'),
						active: require('@/static/week_1.png')
					},
					{
						name: '购物车',
						route: 'pages/market/index',
						normal: require('@/static/market.png'),
						active: require('@/static/market_1.png')
					},
					{
						name: '我的',
						route: 'pages/my/index',
						normal: require('@/static/my.png'),
						active: require('@/static/my_1.png')
					},
				],
				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,
				// 菜单显示
				menu: false,
				disabled: true,
				background: '#f9f9f9',
				color: '#000'
			};
		},
		onShow: function() {},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			toPath(e) {
				if (e && e.route) uni.redirectTo({
					url: `/${e.route}`
				})
			},
			buttonClick(e) {
				console.log(e)
			},
			// 选择规格
			toChoose() {
				const that = this;
				that.$refs.popup.open();
			},
			// 关闭弹框
			toClose() {
				const that = this;
				that.$refs.popup.close()
			},
			// 修改样式
			toStyle() {
				const that = this;
				that.color = '#ffffff';
				that.background = '#ff0000';
				that.Selected = that.info.specs.flavor;
				that.disabled = false;
			},
			// 计数器
			toCount(e) {
				console.log(e);
			},
			// 收藏
			toCollect() {
				const that = this;
				that.collection = !that.collection;
				if (that.collection == true) {
					uni.showToast({
						title: `收藏成功`,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: `取消成功`,
						icon: 'none'
					})
				}
			},
			// 菜单展开
			toMenu() {
				const that = this;
				that.menu = !that.menu
			},
			// 立即购买
			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;
						border: 0.1vw solid var(--fcColor);
					}

					.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: 30vw;
		right: 5vw;

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

	.menu_1 {
		position: fixed;
		bottom: 40vw;
		right: 5vw;
		background-color: var(--mainColor);
		padding: 2vw;

		.title {
			display: flex;
			padding: 2vw;
			border-bottom: 0.1vw solid var(--fcColor);

			.image {
				width: 7vw;
				height: 6vw;
			}

			.name {
				margin: 0 0 0 1vw;
			}

		}
	}

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

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

	uni-popup {
		z-index: 999999 !important;
	}

	.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 {
						padding: 0 2vw;
						color: var(--f85Color);
					}
				}
			}
		}

		.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>