point-app/pagesIntegral/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="aspectFit">
									</image>
								</swiper-item>
							</swiper>
						</view>
						<view class="two">
							<view class="two_1">
								<view class="money_1">
									<text>{{info.cost||0}}</text>
								</view>
							</view>
							<view class="two_2">{{info.name}}</view>
							<view class="two_3">{{info.shot_brief}}</view>
							<view class="two_4">
								<text>{{info.send_time}}内发货</text>
							</view>
						</view>
						<view class="thr">
							<view class="thr_1">
								<image class="image" :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''"></image>
								<view class="other">
									<view class="name">{{shop.name}}</view>
								</view>
							</view>
							<view class="thr_2">
								<view class="grade">商品：<text>{{shop.goods_score||5}}</text></view>|
								<view class="grade">发货：<text>{{shop.send_score||5}}</text></view>|
								<view class="grade">服务：<text>{{shop.service_score||5}}</text></view>
							</view>
						</view>
						<view class="four">
							<view class="four_1">
								<rich-text :nodes="info.brief"></rich-text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="foot">
				<uni-goods-nav :buttonGroup="buttonGroup" 
					@buttonClick="buttonClick" />
			</view>
		</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">
					<text>数量</text>
					<view class="count">
						<uni-number-box :min="1" :max="info.num" v-model="num" @change="toCount">
						</uni-number-box>
					</view>
					<text>库存{{info.num||0}}</text>
				</view>
				<view class="btn">
					<text @click="toExchange" class="button">立即兑换</text>
				</view>
			</view>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				barList: [{
						name: '首页',
						route: 'pages/home/index',
						normal: require('@/static/shouye.png'),
					},
					{
						name: '微店',
						route: 'pages/store/index',
						normal: require('@/static/store.png'),
					},
					{
						name: '购物车',
						route: 'pages/market/index',
						normal: require('@/static/market.png'),
					},
					{
						name: '我的',
						route: 'pages/my/index',
						normal: require('@/static/my.png'),
					},
				],
				buttonGroup: [{
					text: '兑换',
					backgroundColor: 'linear-gradient(90deg, #6A5ACD, #6A5ACD)',
					color: '#fff',
				}],
				// 商品id
				id: '',
				user: {},
				// 轮播图
				bannerList: [],
				// 商品详情
				info: {},
				// 商店详情
				shop: {},
				// 是否显示返回顶部
				isShow: false,
				topItem: '',
				// 菜单显示
				menu: false,
				disabled: true,
				// 数量
				num: 1,
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
		},
		onShow: async function() {
			const that = this;
			// 监听用户是否登录
			await that.watchLogin();
			await that.search();
		},
		methods: {
			//主菜单跳转
			toPath(e) {
				if (e && e.route) uni.reLaunch({
					url: `/${e.route}`
				})
			},
			// 菜单展开
			toMenu() {
				const that = this;
				that.menu = !that.menu
			},
			// 计算高度
			handleScroll(e) {
				const that = this;
				let scrollTop = e.detail.scrollTop;
				that.isShow = scrollTop > 500;
				that.topItem = '';
			},
			// 返回顶部
			backTop() {
				const that = this;
				that.topItem = 'top'
			},
			//立即兑换
			buttonClick(e) {
				const that = this;
				that.$refs.popup.open();
			},
			// 计数器
			toCount(e) {
				const that = this;
				that.num = e;
			},
			// 立即兑换
			async toExchange() {
				const that = this;
				let user = that.user;
				if (user._id) {
					let data = {
						shop: that.shop._id,
						goods: that.id,
						num: that.num
					};
					let arr = await that.$api(`/zrOrder/checkCanBuy`, `POST`, data, `integral`)
					if (arr.errcode == '0') {
						if (arr.data.result == true) {
							uni.navigateTo({
								url: `/pagesIntegral/order/index?key=${arr.data.key}`
							})
						} else {
							uni.showToast({
								title: arr.data.msg,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				} else {
					uni.navigateTo({
						url: `/pages/login/index`
					})
				}

			},
			// 监听用户是否登录
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
					},
					fail: function(err) {}
				});
			},
			// 详情数据
			async search() {
				const that = this;
				let arr = await that.$api(`/zrGoods/${that.id}`, `POST`, {}, `integral`)
				if (arr.errcode == '0') {
					if (arr.data.brief) arr.data.brief = arr.data.brief.replace(/\<img/gi,
						'<img class="rich-img"');
					that.$set(that, `info`, arr.data)
					that.$set(that, `bannerList`, arr.data.file)
					let shop = await that.$api(`/shop/${arr.data.shop}`, `GET`)
					if (shop.errcode == '0') {
						that.$set(that, `shop`, shop.data)
					}
				}
			}
		}
	}
</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(--f1Color);

			.one {
				swiper {
					height: 70vw;
				}

				.list {
					border-radius: 5px;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 5px;
						background-color: #fff;
					}
				}
			}

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

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

				.thr_1 {
					display: flex;
					justify-content: space-between;
					align-items: center;

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

				.thr_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;
					}
				}
			}

			.four {
				margin: 2vw 0 0 0;

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

					.rich-img {
						width: 100% !important;
						display: block;
					}
				}
			}
		}
	}

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

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

	.scrollView {
		height: 100vh;
	}

	.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;
				font-size: var(--font14Size);
			}

		}
	}

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

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

	.uni-tab__cart-sub-left {
		padding: 0 !important;
	}

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

	.content {
		height: 60vw;

		.one {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 0 2vw;
			padding: 2vw 0;

			text {
				margin: 0 2vw 0 0;
			}

			text:last-child {
				margin: 0 0 0 2vw;
				font-size: var(--font12Size);
				color: var(--f85Color);
			}
		}

		.btn {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;

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