zyejMAll-mobile/pages/activity/pointRule.vue

<template>
	<s-layout title="积分规则" class="set-userinfo-wrap" :bgStyle="{ background:'white !important' }">
		<!-- <view class="pointRule_cont">
			{{state.content}}
		</view> -->
		<view class="pointRule_box">
			<!-- <rich-text :nodes="state.content1">
			</rich-text> -->
			<view class="pb_title">积分怎么花?</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>在下单的时候，使用积分抵现
			</view>
			<view class="pb_commonsent redeem">
				<view class="dot"></view>100积分=1元
			</view>
			<view class="pb_commonsent">
				<view class="dot"></view>每笔订单最多抵扣5% 在下单的时候，使用积分抵现
			</view>
			<view class="pb_commonsent">
				<view class="dot"></view>部分商品不可以使用积分抵现，具体可咨询客服
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>使用积分兑换商品：可兑换优惠券；兑换权益卡；兑换商品。兑换成功后可到个人中心查看。
			</view>

			<view class="pb_title">怎么赚积分?</view>
			<view class="content_center">
				<view class="getWay">
					<view class="getWay_left">
						<view class="gl_title">消费得积分</view>
						<view class="gl_descript">消费1.00元积分<text>+1</text> </view>
					</view>
					<view class="getWay_right" @tap="gobuyit">去下单</view>
				</view>
				<view class="getWay">
					<view class="getWay_left">
						<view class="gl_title">分享得积分</view>
						<view class="gl_descript">每次分享给朋友或朋友圈 <text>+10</text></view>
					</view>
					<view class="getWay_right" @tap.stop="goShare">去分享</view>
				</view>
				<view class="getWay">
					<view class="getWay_left">
						<view class="gl_title">好评得积分</view>
						<view class="gl_descript">订单好评 <text>+10</text></view>
					</view>
					<view class="getWay_right" @tap="goEsteem">去评价</view>
				</view>
			</view>
			<view class="pb_title">常见问题</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分状态分为收入、支出、冻结状态。收入指获得积分；支出指消耗积分；冻结指积分还在保护期内（不可使用）。
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分获取上限： 每天获取积分无上限
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分有效期： 当前获得的积分将在次年8月1日过期
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分扣减规则：通过下单获得的积分，在订单退款时，会相应扣减积分
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分退回规则：1）下单未使用积分抵现，在整笔退款时，则会退回所有未生效的积分；2）在积分商城使用积分兑换， 订单退款时，不会退还积分
			</view>
			<view class="pb_commonsent">
				<view class="dot">•</view>积分兑换商品产生的订单不获得积分： 在商品详情页点击积分兑换，使用积分+现金购买产生的订单，不会获得积分
			</view>
			<view class="bottom_prompt">
				* 详情可咨询客服
			</view>
			<!-- <rich-text :nodes="state.content2"> -->
			<!-- </rich-text> -->
			<!-- <image mode="widthFix"
				src="https://dfhg.obs.cn-north-4.myhuaweicloud.com/33a90ff768956f10ece05e873cf6e251d0973e4d1f84b61ce06b1c0b61ed1268.png">
			</image> -->
		</view>


	</s-layout>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import PointApi from '@/sheep/api/promotion/point';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';


	const state = reactive({
		content1: '',
		content2: '',
	})

	onLoad((options) => {
		getPointRules()
	})

	const gobuyit = () => {
		uni.navigateTo({
			url: "/pages/goods/index?id=641"
		})
	}

	const goEsteem = () => {
		uni.navigateTo({
			url: "/pages/order/list?type=4"
		})
	}
	const goShare = () => {
		uni.switchTab({
			url: "/pages/index/index"
		})
	}
	const getPointRules = async () => {
		const res = await PointApi.getPointRules();
		console.log(res);
		if (res.code === 0) {
			console.log("进来了")
			// state.content = res.data.content
			const [firstPart, secondPart] = res.data.content.split('常见问题');
			state.content1 = firstPart;
			if (secondPart) {
				state.content2 = `<h3>常见问题</h3>${secondPart}`
			}

		}

	}
</script>

<style lang="scss" scoped>
	.pointRule_box {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		background: white;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;

		>image {
			width: 600rpx;
			margin-bottom: 20rpx;
		}

		.pb_title {
			width: 100%;
			text-align: left;
			font-size: 34rpx;
			color: black;
			margin: 36rpx auto;
		}

		// .redeem{
		// 	margin: 20rpx auto;
		// }
		.pb_commonsent {
			width: 100%;
			text-align: left;
			display: flex;
			margin: 10rpx auto;

			.dot {
				min-width: 30rpx;
				height: 100%;
				font-weight: bold;
			}
		}

		.bottom_prompt {
			width: 100%;
			text-align: left;
			color: gray;
			margin-top: 30rpx;
		}

		.content_center {
			width: 100%;
			background-color: #F5F5F7;
			border-radius: 10rpx;

			.getWay {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 39rpx;
				box-sizing: border-box;
				position: relative;

				.getWay_left {

					.gl_title {
						margin-bottom: 10rpx;
					}

					.gl_descript {
						color: gray;

						>text {
							color: #7D9337;
						}
					}
				}

				.getWay_right {
					height: 30rpx;
					line-height: 32rpx;
					padding: 16rpx 32rpx;
					color: #7D9337;
					text-align: center;
					width: 100rpx;
					border: 1px solid #c5c3c3;
					border-radius: 100rpx;
				}
			}

			.getWay:not(:last-child)::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 90%;
				height: 1rpx;
				background-color: #c5c3c3;
			}
		}
	}
</style>