H5_module/integralshop/integralRule/index.vue

<template>
	<view>
		<!--pages/integralshop/integralRule/index.wxml-->
		<!-- <text>pages/integralshop/integralRule/index.wxml</text> -->
		<view class="banner">
			如何获取积分？
			<!-- <image src="/integralshop/static/integralshop/images/integral_rule_bg1.png" mode="widthFix"></image> -->
		</view>
		<view class="cont">
			<view class="ziyou">
				<!--    <rich-text :nodes="diyNodes" @tap="richImg"></rich-text>
    <block v-for="(item, index) in diyImgs" :key="index">
						<image class="img" :src="item + '?x-oss-process=style/w750-auto'" mode="widthFix" @tap="chooseImg1" :data-src="item"></image>
				</block> -->
				<mp-html :content="diyNodes" @imgtap="choose" v-if="diyNodes!='<p><br></p>'" />
				<view class="nodata" v-else>
					<image :src="picUrlss+'empty.png'"></image>
					<text>暂无~</text>
				</view>
				<!-- <image src="{{item}}" mode="widthFix" wx:for="{{imgs}}" wx:key="{{index}}"></image> -->
			</view>
			<view class="tits">积分获取规则</view>
			<view class="guize">
				<view class="li dflex">
					<label class="label">场景</label>
					<view class="item flex">获取规则</view>
				</view>
				<view class="lis dflex" v-for="(item,index) in ruleList" :key="index" v-if="item.state == 2">
					<label class="label">{{getText(item.type)}}</label>
					<block  v-if="item.type == 1">
						<view class="item flex" v-if="item.giveMode == 1">首次赠送{{item.firstGiveIntegral}}积分，后续每次赠送{{item.fixedGiveIntegral}}积分</view>
						<view class="item flex" v-else>首次赠送{{item.firstGiveIntegral}}积分，连续叠加赠送{{item.superpositionIntegral}}积分，最多叠加{{item.maxFrequency}}次</view>
					</block>
					<view class="item flex" v-if="item.type == 2">首单赠送{{item.firstGiveIntegral}}积分，下单消费1元赠送{{item.proportionGiftsOrders}}积分</view>
					<view class="item flex" v-if="item.type == 3">首次赠送{{item.firstGiveIntegral}}积分，现金兑换积分比例{{item.proportionGiftsOrders}}</view>
					<block  v-if="item.type == 7">
						<view class="item flex" v-if="item.giveMode == 1">首次赠送{{item.firstGiveIntegral}}积分，后续每次赠送{{item.fixedGiveIntegral}}积分</view>
						<view class="item flex" v-else>首次赠送{{item.firstGiveIntegral}}积分，连续叠加赠送{{item.superpositionIntegral}}积分，最多叠加{{item.maxFrequency}}次</view>
					</block>
					<block  v-if="item.type == 8">
						<view class="item flex" v-if="item.giveMode == 1">首次赠送{{item.firstGiveIntegral}}积分，后续每次赠送{{item.fixedGiveIntegral}}积分</view>
						<view class="item flex" v-else>首次赠送{{item.firstGiveIntegral}}积分，连续叠加赠送{{item.superpositionIntegral}}积分，最多叠加{{item.maxFrequency}}次</view>
					</block>
					<view class="item flex" v-if="item.type == 99">首次赠送{{item.firstGiveIntegral}}积分，后续每次赠送{{item.fixedGiveIntegral}}积分</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// pages/integralshop/integralRule/index.js
	const req = require("../../utils/request.js");
	const route = require("../../utils/route");
	import mpHtml from "../../components/mp-html/components/mp-html/mp-html";
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				freshen: true,
				diyImgs: "",
				diyNodes: "",
				ruleList: []
			};
		},

		components: {},
		props: {},
		onLoad(){
			this.getRule();
		},
		onShow: function() {
			// INTEGRAL_EXPLANATION_CONFIG
			if (this.freshen) {
				route.getConfing(res => {
					if (res.INTEGRAL_EXPLANATION_CONFIG) {
						let that = this; //富文本图片放大
						var diyNodes = res.INTEGRAL_EXPLANATION_CONFIG;
						that.setData({
							diyNodes: diyNodes
						});
					}
				});
			}
		},

		methods: {
			chooseImg1: function(e) {
				//预览
				var src = e.currentTarget.dataset.src;
				this.setData({
					freshen: false
				});
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接  
					urls: this.diyImgs
				});
			},
			getRule(){
				req.getRequest('/api/integral/config',{},res=>{
					if(res && res.length > 0){
						res.map(it=>{
							if(it.state == 2){
								return it;
							}
						})
					this.ruleList = res;
					}
					console.log('规则=='+res)
				})
			},
			getText(type){
				let text = '';
				switch (type) {
					case 1:
						text = '签到送积分';
						break;
					case 2:
						text = '下单送积分';
						break;
					case 3:
						text = '现金兑换积分';
						break;
					case 4:
						text = '积分兑换商品';
						break;
					case 7:
						text = '推荐会员';
						break;
					case 8:
						text = '推荐分销商';
						break;
					case 99:
						text = '其它';
						break;
				}
				return text;
			}
		}
	};
</script>
<style>
	@import "./index.css";
</style>