MeiMeiZhuan/pages/money/paySuccess.vue

<template>
	<view class="content">
		<!-- 支付成功 -->
		<view class="pay-box">
			<!-- <text class="success-icon iconfont iconroundcheck"></text> -->
			<image src="../../static/img/success.png" class="success-icon"></image>
			<text class="tit">支付金额：￥{{money}}</text>

			<view class="btn-group flex">
				<navigator url="/pages/order/order?state=1" open-type="redirect" class="mix-btn">查看订单</navigator>
				<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
				<navigator v-if="goodstype == 2" :url="'/pages/product/details?pink_id=' + (goodsDetail.pink_id || '')" open-type="redirect" class="mix-btn hollow">马上分享</navigator>
			</view>

			<view class="warn">安全提醒：平台及商家不会以订单异常系统升级为由要 求你点击任何网址链接进行退款操作</view>
		</view>

		<!-- 猜你喜欢 -->
		<!-- <view class="like-box">
			<view class="line"></view>
			<view class="like-tit">猜你喜欢</view>
			<view class="line"></view>
		</view> -->

		<!-- 商品内容 -->
		<scroll-view scroll-y class="cate-list" @scrolltolower="getProducts">
			<view class="guess-section">
				<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<!-- <view class="guess-item"> -->
					<view class="image-wrapper">
						<image :src="item.image" mode="aspectFill"></image>
						<!-- <image src="../../static/img/img02.png" mode="aspectFill"></image> -->
					</view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="cmy-hr"></view>
					<view class="price margin-c-20 flex">
						<view>
							<text class="font-size-sm ">￥</text>
							{{ item.price }}
						</view>
						<view class="font-size-sm">
							<text class="font-color-gray">{{ item.sales }}人购买</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
		</scroll-view>
	</view>
</template>

<script>
import { getProducts } from '@/api/product.js';
import { orderDetail } from '@/api/order.js';
export default {
	data() {
		return {
			money:0,
			goodsList: [],
			limit: 6, //每次加载数据条数
			page: 1, //当前页数
			loadingType: 'more', //加载更多状态
			goodsDetail: {},
			showpink: false ,//判断是否显示拼团
			goodstype: '',	// 商品类型
		};
	},
	onLoad(op) {
		this.goodstype = op.goodstype;
		if (op.newGoods) {
			this.showpink = true;
		}
		if (op.orderid) {
			orderDetail({}, op.orderid).then(e => {
				this.goodsDetail = e.data;
				setTimeout(e => {
					if (op.newGoods) {
						uni.navigateTo({
							url: '/pages/product/details?pink_id=' + (e.data.pink_id || '')
						});
					}
				}, 1500);
			});
		}
		this.money = op.money;
		// this.getProducts();
	},
	//下拉刷新
	onPullDownRefresh() {
		// 重置当前页面
		this.page = 1;
		// 加载商品
		// this.getProducts('refresh');
	},
	methods: {
		// 加载商品
		async getProducts(type, loading) {
			let obj = this;
			//没有更多直接返回
			if (type !== 'refresh') {
				if (obj.loadingType === 'nomore') {
					return;
				} else {
					obj.loadingType = 'loading';
				}
			} else {
				obj.loadingType = 'more';
			}
			let data = {
				page: obj.page,
				limit: obj.limit,
				news: obj.newOrder,
				keyword: this.keyword,
				mer_id: this.shopId
			};
			getProducts(data).then(e => {
				if (type === 'refresh') {
					obj.goodsList = [];
				}
				obj.goodsList = obj.goodsList.concat(e.data);
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit == e.data.length) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'nomore';
				}
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			});
		},
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.id;
			uni.navigateTo({
				url: '/pages/product/product?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.pay-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 1);

	.success-icon {
		font-size: 96rpx;
		color: #5dbc7c;
		margin-top: 40rpx;
		width: 96rpx;
		height: 96rpx;
	}
	.tit {
		font-size: 38rpx;
		color: #303133;
		height: 34px;
		font-family: PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 56px;
		&.price {
			font-size: 42rpx;
		}
	}
	.btn-group {
		padding-top: 40rpx;
		display: flex;
		width: 100%;
		padding-right: 40rpx;
		padding-left: 40rpx;
		justify-content: space-around;
		.mix-btn {
			width: 180rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(204, 204, 204, 1);
			border-radius: 6rpx;
			margin-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-lg;
			color: #333333;

			&.hollow {
				background: #fff;
				color: #666666;
			}
		}
	}
	.warn {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(249, 174, 41, 1);
		line-height: 40rpx;
		padding: 40rpx;
	}
}

/* 猜你喜欢标题 */
.like-box {
	display: flex;
	align-items: center;
	height: 77rpx;
	justify-content: center;

	.line {
		width: 46rpx;
		height: 2rpx;
		background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(153, 153, 153, 1));
		&:last-of-type {
			background: linear-gradient(to right, rgba(153, 153, 153, 1), rgba(255, 255, 255, 1));
		}
	}

	.like-tit {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(63, 69, 75, 1);
		line-height: 55rpx;
		margin: 0 14rpx;
	}
}

.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 24rpx;

	.guess-item {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 48%;
		margin-bottom: 4%;
		border-radius: $border-radius-sm;
		background-color: white;
		box-shadow: $box-shadow;
		&:nth-child(2n + 1) {
			margin-right: 3%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 330rpx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-base;
		color: $font-color-dark;
		font-weight: bold;
		line-height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price {
		font-size: $font-lg;
		/* color: $font-color-base; */
		font-weight: bold;
		line-height: 1;
		line-height: 80rpx;
		color: rgba(252, 65, 65, 1);
	}

	/* .icon {
		@extend %icon;
	} */

	.detail {
		line-height: 1;
	}
	.tip {
		color: white;
		background-color: $color-yellow;
		line-height: 1.5;
		font-size: $font-sm;
		padding-left: 20rpx;
	}
}
</style>