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="four">
							<view class="four_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="four_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 class="four_2">
								<view class="btn" @tap="toShop('pagesHome/shop/index')">进入店铺</view>
								<view class="btn" @tap="shopCollect">{{shop_collect==true?'已关注':'关注'}}</view>
							</view>
						</view>
						<view class="five">
							<view class="five_1">
								<rich-text :nodes="info.brief"></rich-text>
							</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="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" v-if="specsInfo.file&&specsInfo.file.length>0"
						:src="specsInfo.file&&specsInfo.file.length>0?specsInfo.file[0].url:''"></image>
					<image class="image" v-else :src="info.file&&info.file.length>0?info.file[0].url:''"></image>
					<view class="other">
						<view class="money">
							<text>¥</text>
							<text>{{specsInfo.sell_money}}</text>
						</view>
						<view class="other_1">
							已选: <text>{{specsInfo.name}}</text>
						</view>
					</view>
					<view class="button">
						<text @click="toClose" class="iconfont icon-shanchu"></text>
					</view>
				</view>
				<view class="two">
					<view class="two_1">规格</view>
					<view class="two_2">
						<text v-for="(item,index) in specs" :key="index" @click="toStyle(item,index)"
							:class="{ 'style': isActive==index}">{{item.name}}
						</text>
					</view>
				</view>
				<view class="thr">
					<text>数量</text>
					<view class="count">
						<uni-number-box :min="1" :max="specsInfo.num" :disabled="disabled" v-model="num"
							@change="toCount">
						</uni-number-box>
					</view>
					<text>库存{{specsInfo.num||0}}</text>
				</view>
				<view class="btn" @click="toBuy">
					立即兑换
				</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'),
					},
				],
				options: [
					// {
					// 	icon: 'shop',
					// 	text: '店铺',
					// 	route: 'pagesHome/shop/index',
					// },
					// {
					// 	icon: 'cart',
					// 	text: '购物车',
					// 	route: 'pages/market/index',
					// },
					// {
					// 	icon: 'chat',
					// 	text: '客服',
					// }
				],
				buttonGroup: [{
					text: '立即兑换',
					backgroundColor: 'linear-gradient(90deg, #EF1224, #EF1224)',
					color: '#fff',
				}],
				// 商品id
				id: '',
				user: {},
				// 轮播图
				bannerList: [],
				// 商品详情
				info: {},
				// 商店详情
				shop: {},
				// 规格情况
				specs: [],
				// 已选
				specsInfo: {},
				// 是否显示返回顶部
				isShow: false,
				topItem: '',
				// 商品收藏
				collection: false,
				// 店铺收藏
				shop_collect: false,
				// 菜单显示
				menu: false,
				disabled: true,
				// 显示文字判断
				type: '0',
				// 选择规格
				isActive: -1,
				// 计数器
				num: 1,
				// 评论数
				comment: 0,
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
		},
		onShow: async function() {
			const that = this;
			await that.search();
			await that.searchOther();
			await that.configShare();
		},
		methods: {
			// //店铺，
			// // 购物车，客服跳转
			// onClick(e) {
			// 	const that = this;
			// 	if (e.index == '0' && e.content.route) {
			// 		// 进入店铺
			// 		that.toShop();
			// 	} else {
			// 		uni.reLaunch({
			// 			url: `/${e.content.route}`
			// 		})
			// 	}
			// },
			// 进入店铺
			toShop() {
				const that = this;
				uni.navigateTo({
					url: `/pagesHome/shop/index?id=${that.shop._id}`
				})
			},
			// 商品评价
			toAppraise(e) {
				const that = this;
				uni.navigateTo({
					url: `/pagesHome/order/appraise?id=${that.id}`
				})
			},
			// 关注商铺
			async shopCollect() {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					let res = await that.$api(`/storeShop`, `POST`, {
						customer: user._id,
						shop: that.shop._id
					});
					if (res.errcode == '0') {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.$set(that, `shop_collect`, res.data.result)
					}
				} else {
					uni.showToast({
						title: '无用户登录无法关注商铺',
						icon: 'none'
					})
				}
			},
			//主菜单跳转
			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();
			},
			// 修改样式
			toStyle(e, index) {
				const that = this;
				that.$set(that, `isActive`, index)
				that.$set(that, `specsInfo`, e)
				that.disabled = false;
			},
			// 计数器
			toCount(e) {
				const that = this;
				that.num = e;
			},
			// 立即兑换
			toBuy(e) {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async function(res) {
						let user = that.$jwt(res.data);
						that.$set(that, `user`, user)
						if (that.specsInfo._id) {
							let specs_id = that.specsInfo._id
							let data = {
								customer: user._id,
								shop: that.shop._id,
								goods: that.info._id,
								goodsSpec: specs_id,
								num: that.num
							}
							let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
							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.showModal({
								title: '提示',
								content: '请选择规格',
								confirmColor: '#ff0000',
								showCancel: false,
								success: function(res) {}
							});
						}
					},
					fail: function(err) {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				});
			},
			// 关闭弹框
			toClose() {
				const that = this;
				that.$refs.popup.close()
			},
			// 详情数据
			async search() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
						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)
							}
							let con = await that.$api(`/goodsRate`, `GET`, {
								goods: arr.data._id
							})
							if (con.errcode == '0') {
								that.$set(that, `comment`, con.total)
							}
						}
					},
					fail: function(err) {}
				});
			},
			async searchOther() {
				const that = this;
				let user = that.user;
				// 商铺是否收藏
				let arr = await that.$api(`/storeShop/check`, `GET`, {
					customer: user._id,
					shop: that.shop._id
				});
				if (arr.errcode == '0') {
					that.$set(that, `shop_collect`, arr.data)
				}
			},
			// 配置分享内容
			configShare() {
				const that = this;
				let user_id = that.user && that.user._id ? that.user._id : '';
				let id = that.info && that.info._id ? that.info._id : '';
				that.$config.share = {
					title: that.info.name,
					path: `/pagesHome/order/detail?id=${id}&user_id=${user_id}`,
					imageUrl: that.info.file[0].url
				}
			}
		}
	}
</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;
						}
					}

					.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;
					}
				}
			}
			.four {
				margin: 2vw 0 0 0;
				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 {
					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-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 {
				display: flex;
				flex-wrap: wrap;
				padding: 1vw;
				margin: 1vw 0 0 0;

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

				.style {
					color: var(--mainColor);
					background-color: var(--ff0Color);
				}
			}
		}

		.thr {
			display: flex;
			justify-content: flex-start;
			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 {
			position: fixed;
			bottom: 0;
			width: 100vw;
			padding: 4vw 0;
			background-color: var(--fFB1Color);
			text-align: center;
			font-size: var(--font18Szie);
			color: var(--mainColor);
		}

	}

	.uni-tab__cart-sub-left {
		padding: 0 !important;
	}
</style>