point-app/pagesHome/order/detail.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="one_1">
							<banner :goodsInfo="goodsInfo" :goodsColect="goodsColect" @toGoodscolect="toGoodscolect">
							</banner>
						</view>
						<view class="one_2">
							<text class="money_1" v-if="infospecs.leader_price"><text>团长价¥</text>{{infospecs.leader_price||0}}</text>
							<text class="money" v-if="infospecs.price"><text>特价¥</text>{{infospecs.price||0}}</text>
							<text class="money" v-if="!infospecs.price&&!infospecs.leader_price"><text>¥</text>{{infospecs.sell_money||0}}</text>
							<text class="money"><text>¥</text>{{infospecs.flow_money||0}}</text>
						</view>
						<view class="one_3" v-if="discount">
							<text v-if="discount.full_decrement&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_decrement" :key="index">{{item}}</text>
							<text v-if="discount.full_fold&&discount.full_decrement.length>0" class="act" v-for="(item,index) in discount.full_fold" :key="index">{{item}}</text>
						</view>
						<view class="one_4">
							<text class="num">已售{{info.goods&&info.goods.sell_num||0}}件</text>
						</view>
						<view class="one_5">
							51
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="two">
				<uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft" @buttonClick="toNavright" />
			</view>
		</view>
		<!-- 跳转菜单 -->
		<view class="bar_1">
			<text @tap="toMenubar" class="iconfont icon-gengduo"></text>
		</view>
		<view class="bar_2" v-if="is_menu">
			<view class="list" v-for="(item,index) in barList" :key="index" v-if="item.is_use=='0'" @click="toPath(item)">
				<image class="image" :src="item.normal&&item.normal.length>0?item.normal[0].url:''"></image>
				<text class="name"> {{item.name}}</text>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	import banner from './components/banner_1.vue';
	export default {
		components: {
			banner
		},
		data() {
			return {
				// 系统设置
				config: {},
				// 商品id
				id: '',
				// 分享人id
				inviter: '',
				// 当前用户信息
				user: {},
				// 是否关注商品
				goodsColect: false,
				// 是否关注店铺
				shopColect: false,
				// 评价数
				evaluate_num: 0,
				// 商品详情
				info: {},
				// 商品详情
				goodsInfo: {},
				// 规格
				infospecs: {},
				// 优惠
				discount: {},
				// 底部菜单
				options: [{
						icon: 'shop',
						text: '店铺',
						type: 'shop',
						route: 'pagesHome/shop/index',
					},
					{
						icon: 'cart',
						text: '购物车',
						type: 'market',
						route: 'pages/market/index',
					},
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff',
						type: '0'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff',
						type: '1'
					}
				],
				// 系统菜单
				barList: [],
				is_menu: false,
				// 规格弹框
				popupShow: '1',
				// 规格信息
				is_specs: 0,
				btn_type: '1',
				specsInfo: {},
				// 是否零库存
				is_zero: false,
				// 商品设置
				group_config: [],
				// 限制说明
				buyList: [],
				// 购买数量
				buy_num: 1,
				// 规格弹出框
				dialog: {
					show: false,
					type: '1'
				},
			};
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '');
			that.$set(that, `inviter`, e.inviter || '');
			await that.searchConfig();
			await that.search();
			await that.configShare();
		},
		onShow: async function() {
			const that = this;
			await that.watchLogin();
		},
		onUnload: function() {
			// 页面卸载,重新部署分享内容
			const that = this;
			if (that.config) {
				// 赋值默认值
				that.$config.share = {
					title: that.config.title,
					path: '/pages/index/index',
					imageUrl: that.config.config.share[0].url
				}
			}
		},
		methods: {
			// 查询系统设置
			searchConfig() {
				const that = this;
				uni.getStorage({
					key: 'config',
					success: function(res) {
						let data = res.data;
						that.$set(that, `config`, data);
						if (data.bottom_menu && data.bottom_menu.list.length > 0) {
							let list = data.bottom_menu.list.sort((a, b) => {
								return a.sort - b.sort
							});
							that.$set(that, `barList`, list)
						}
					}
				})
			},
			// 查询用户信息
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
					},
					fail: function(err) {
						console.log('暂无用户信息');
					}
				})
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let user = that.user;
				let res;
				// 是否关注商品
				res = await that.$api(`/storeGoods/check`, `GET`, {
					customer: user._id,
					goods: that.id
				});
				if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
				// 是否关注店铺
				res = await that.$api(`/storeShop/check`, `GET`, {
					customer: user._id,
					shop: that.info?.shop?._id
				});
				if (res.errcode == '0') that.$set(that, `shopColect`, res.data);
				// 商品设置
				res = await that.$api(`/goodsConfig`, `GET`, {
					goods: that.id,
					shop: that.info?.shop?._id
				}, 'group');
				if (res.errcode == '0' && res.total > 0) that.$set(that, `group_config`, res.data);
				// 限制说明
				res = await that.$api(`/dictData`, 'GET', {
					code: "buy_limit"
				});
				if (res.errcode == '0') that.$set(that, `buyList`, res.data)
			},
			// 查询商品信息
			async search() {
				const that = this;
				let id = that.id;
				if (id) {
					let res;
					res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
						id: id
					});
					if (res.errcode == '0') {
						let data = res.data;
						if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi,
							'<img class="rich-img"');
						// 特价
						let act;
						act = data.act.find(i => i.type == '3')
						if (act) {
							for (let val of act.list) {
								for (let [index, arr] of data.specs.entries()) {
									if (val.spec == arr._id) arr.price = val.price
								}
							}
						}
						// 显示最低价格的规格信息,不考虑库存问题
						if (data.specs && data.specs.length > 0) {
							// 规格排序
							let indexSpecs = data.specs.sort(function(a, b) {
								let i, j;
								if (a.price) i = 'price'
								else i = 'sell_money'
								if (b.price) j = 'price'
								else j = 'sell_money'
								return a[i] - b[j];
							})
							that.$set(that, `infospecs`, indexSpecs[0])
						}
						that.$set(that, `info`, data);
						that.$set(that, `goodsInfo`, data?.goods);
						// 优惠
						act = data.act.find(i => i.type == '5')
						if (act) that.$set(that.discount, `full_decrement`, act.text.split(';'));
						act = data.act.find(i => i.type == '6')
						if (act) that.$set(that.discount, `full_fold`, act.text.split(';'));
						await that.searchOther();
						// 查询规格
						await that.searchSpecs(data.specs);
						// 查询评价数
						await that.searchRate(data);
					}
				} else {
					uni.showToast({
						title: '暂无商品信息',
						icon: 'none'
					})
				}
			},
			// 查询规格
			searchSpecs(e) {
				const that = this;
				if (e.length > 0) {
					let data = e.find(i => i.num > 0);
					let dataIndex = e.findIndex(i => i._id == data._id);
					if (data) {
						let specsInfo = that.group_config.find(i => i.spec._id == data._id)
						if (specsInfo?._id && that.user.is_leader == '0') data.can_group = '0'
						else data.can_group = '1'
						let limit = that.buyList.find((i) => i.value == data.buy_limit);
						if (limit) data.buy_name = limit.label
						that.$set(that, `specsInfo`, data);
						that.$set(that, `is_specs`, dataIndex);
					}
				}
			},
			// 查询评价数
			async searchRate(e) {
				const that = this;
				let res = await that.$api(`/goodsRate`, `GET`, {
					limit: 1,
					goods: e.goods._id
				})
				if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
			},
			// 关注商品
			async toGoodscolect() {
				const that = this;
				let user = that.user;
				if (user && user._id) {
					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, `goodsColect`, res.data.result)
					}
				} else {
					uni.showToast({
						title: '暂无账号，无法收藏商品',
						icon: 'none'
					})
				}
			},
			// 店铺,购物车
			toNavleft(e) {
				const that = this;
				if (e.content.type == 'shop') {
					that.toShop();
				} else if (e.content.type == 'market') {
					let obj = {
						route: e.content.route
					}
					that.toPath(obj)
				}
			},
			// 加入购物车,立即购买
			toNavright(e) {
				const that = this;
				that.$set(that, `popupShow`, '1');
				that.$set(that, `btn_type`, e.content.type);
				that.$refs.specShow.open();
			},
			// 配置分享内容
			configShare() {
				const that = this;
				let id = that.id;
				let inviter = that.user && that.user._id ? that.user._id : '';
				let title = that.info && that.info.goods ? that.info.goods.name : '';
				let imageUrl = that.info && that.info.goods ? that.info.goods.file[0].url : '';
				that.$config.share = {
					title: title,
					path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
					imageUrl: imageUrl
				}
			},
			// 右侧菜单
			toMenubar() {
				const that = this;
				that.$set(that, `is_menu`, that.is_menu ? false : true)
			},
			toPath(e) {
				let url = `/${e.route}`;
				uni.reLaunch({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;

			.one_2 {
				border-bottom: 0.5vw solid var(--f9Color);
				padding: 2vw;

				.money_1 {
					color: #23B67A;
					font-size: 20px;
					padding: 0 1vw 0 0;
					font-weight: bold;

					text {
						font-size: 14px;
					}
				}

				.money {
					font-size: 20px;
					padding: 0 1vw 0 0;
					color: #ff0000;
					font-weight: bold;

					text {
						font-size: 14px;
					}
				}

				.money:last-child {
					font-size: 16px;
					color: #858585;
					text-decoration: line-through;
				}
			}

			.one_3 {
				display: flex;
				flex-wrap: wrap;
				padding: 1vw;
				border-bottom: 0.5vw solid var(--f9Color);

				.act {
					font-size: 12px;
					border: 1px solid var(--fFB1Color);
					margin: 0 1vw 1vw 0;
					color: var(--fFB1Color);
					border-radius: 6px;
					padding: 0 1vw;
				}

				.num {
					font-size: 12px;
					color: #858585;
				}
			}

			.one_4 {
				display: flex;
				flex-wrap: wrap;
				padding: 1vw;
				border-bottom: 0.5vw solid var(--f9Color);

				.num {
					font-size: 12px;
					color: #858585;
				}

			}
		}

		.two {
			width: 100vw;
			height: 8vh;
			overflow: hidden;
		}
	}

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

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

	.bar_1 {
		position: fixed;
		right: 2vw;
		bottom: 20vw;

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

	.bar_2 {
		position: fixed;
		right: 2vw;
		bottom: 28vw;
		width: 27vw;
		background: #ffffff;
		padding: 0 2vw;
		box-shadow: 0 0 5px #858585;

		.list {
			display: flex;
			border-bottom: 1px solid #f1f1f1;
			padding: 1vw 0;


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

			.name {
				font-size: 14px;
				position: relative;
				top: 2vw;
				left: 2vw;
			}
		}

		.list:last-child {
			border-bottom: none;
		}
	}
</style>