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>{{specs&&specs.length>0?specs[0].sell_money:''}}</text>
								</view>
								<view class="money_2">
									<text>¥</text>
									<text>{{specs&&specs.length>0?specs[0].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>运费{{specs&&specs.length>0?specs[0].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-jiantouyou"></text>
							</view>
							<view v-if="comment" class="thr_1" @click="toAppraise(info)">
								<view class="title">商品评价({{comment||0}})</view>
								<text class="iconfont icon-jiantouyou"></text>
							</view>
							<view v-else class="thr_1">
								<view class="title">暂无评价</view>
								<text class="iconfont icon-jiantouyou"></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 class="other_1"><text>宝贝数</text>{{shop.num||0}}</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="collect">
			<text v-if="!collection" @click="toCollect" class="iconfont icon-yduishoucangkongxin"></text>
			<text v-else @click="toCollect" class="iconfont icon-yduishoucangshixin-copy"></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" 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="btn">
						<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">
					<text @click="toBuy(type)" :class="{ 'button': specsInfo._id&&specsInfo.can_group=='0'&&type=='1'}">
						{{type=='0'?'加入购物车':'立即购买'}}
					</text>
					<text v-if="specsInfo._id&&specsInfo.can_group=='0'&&type=='1'" @click="toGroup"
						class="button2">参团</text>
				</view>
			</view>
		</uni-popup>
	</mobile-frame>
</template>

<script>
	export default {
		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, #FFCD1E, #FF8A18)',
						color: '#fff',
						type: '0'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff',
						type: '1'
					}
				],
				// 商品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,
				// 分享
				share: {},
				// 评论数
				comment: '',
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
		},
		onShow: async function() {
			const that = this;
			await that.search();
			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 toCollect() {
				const that = this;
				let user = that.user;
				if (user) {
					let res = await that.$api(`/storeGoods`, `POST`, {
						customer: user._id,
						goods: that.id
					});
					if (res.errcode == '0') {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.$set(that, `collection`, res.data.result)
					}
				} else {
					uni.showToast({
						title: '无用户登录无法收藏商品',
						icon: 'none'
					})
				}
			},
			// 关注商铺
			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'
					})
				}
			},
			// 参团
			toGroup() {
				const that = this;
				let specs_id = that.specsInfo._id
				uni.navigateTo({
					url: `/pagesHome/group/index?specs_id=${specs_id}&goods_id=${that.id}`
				})
			},
			//主菜单跳转
			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;
				if (e && e.content) that.type = e.content.type;
				that.$refs.popup.open();
			},
			// 选择规格
			toChoose() {
				const that = this;
				that.type = '1';
				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
							}
							if (e == '0') {
								let arr = await that.$api(`/cart`, 'POST', data)
								if (arr.errcode == '0') {
									uni.showToast({
										title: `加入购物车成功`,
										icon: 'success'
									})
									that.$refs.popup.close()
								} else {
									uni.showToast({
										title: arr.errmsg,
										icon: 'none'
									})
								}
							} else {
								let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
								if (arr.errcode == '0') {
									if (arr.data.result == true) {
										uni.navigateTo({
											url: `/pagesHome/order/order?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: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
						that.searchOther();
					},
					fail: function(err) {}
				});
				let res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
					id: that.id
				});
				if (res.errcode == '0') {
					that.$set(that, `info`, res.data.goods)
					that.$set(that, `specs`, res.data.specs)
					that.$set(that, `shop`, res.data.shop)
					if (res.data.specs.length > 0) that.$set(that.specsInfo, `sell_money`, res.data.specs[0]
						.sell_money)
					that.$set(that, `bannerList`, res.data.goods.file)
					let con = await that.$api(`/goodsRate`, `GET`, {
						goods: res.data.goods._id
					})
					if (con.errcode == '0') {
						that.$set(that, `comment`, con.total)
					}
				}
			},
			async searchOther() {
				const that = this;
				let user = that.user;
				// 商品是否收藏
				let res = await that.$api(`/storeGoods/check`, `GET`, {
					customer: user._id,
					goods: that.id
				});
				if (res.errcode == '0') {
					that.$set(that, `collection`, res.data)
				}
				// 商铺是否收藏
				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 : ''
				let obj = {
					title: that.info.name,
					path: `/pagesHome/order/detail?id=${id}&user_id=${user_id}`,
					imageUrl: that.info.file[0].url
				}
				that.$set(that, `share`, obj)
			}
		}
	}
</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;
					}
				}
			}

			.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 {
					background-color: var(--mainColor);
				}
			}
		}
	}

	.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: 4vw;
		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;
				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 {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;

			text {
				width: 100vw;
				padding: 4vw 0;
				background-color: var(--fFB1Color);
				text-align: center;
				font-size: var(--font18Szie);
				color: var(--mainColor);
			}

			.button {
				width: 50vw;
			}

			.button2 {
				width: 50vw;
				background-color: #FF8A18;
			}
		}

	}
</style>