JiangNingUmale-h5/subEnterprise/threeGuarantees/index.vue

<template>
	<view class="app-container">
		<!-- <u-navbar leftText="返回" title="门前三包服务" :autoBack="true" :placeholder="true">
			<view slot="right">
				<text class="nav-right"></text>
			</view>
		</u-navbar> -->
		<u-search height="75rpx" placeholder="输入评级规则查询" v-model="queryParams.rateRuleName" shape="square"
			:showAction="false" :clearabled="true" class="view-global" bgColor="#fff" @search="onSearch"
			@clear="onClear"></u-search>
		<view class="list-item">
			<view class="list-item-box">
				<view class="list-item-box-top">
					店铺名称:
				</view>
				<view class="list-item-box-bottom">
					{{titleObj.shopName || '优秀店铺'}}
				</view>
			</view>
			<view class="list-item-box">
				<view class="list-item-box-top">
					三包等级:
				</view>
				<view class="list-item-box-bottom "
					:class="titleObj.sbLevel==3?'red':titleObj.sbLevel==4?'yellow':titleObj.sbLevel==5?'good':''">
					<!-- 3红 4黄 5绿 -->
					{{titleObj.sbLevel==3?'红牌':titleObj.sbLevel==4?'黄牌':titleObj.sbLevel==5?'绿牌':'暂无'}}
				</view>
			</view>
			<view class="list-item-box">
				<view class="list-item-box-top">
					三包等级凭证:
				</view>
				<view class="list-item-box-bottom">
					暂无
				</view>
			</view>
			<view class="list-item-box">
				<view class="list-item-box-top">
					有效期:
				</view>
				<view class="list-item-box-bottom">
					长期有效
				</view>
			</view>
			
		</view>
		<view class="list-item">
			<view class="list-item-title">{{levelList[0].rateRuleName || ''}}</view>
			<view>

				<view class="Mytitle">

				</view>
				<view class="mytext" v-html="levelList[0].rateRuleContent">
				</view>
				<!-- 	<view class="mytext">
					<u-parse :content="levelList[0].rateRuleContent" :tag-style="style"></u-parse>
				</view> -->
			</view>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	// import uParse from '@/components/u-parse/u-parse.vue'
	import {
		listraterule,
		jnshop
	} from "../../api/jn/apply";
	export default {
		data() {
			return {
				// 表单参数
				form: {},
				levelList: [{
					rateRuleName: "",
					rateRuleContent: ""
				}],
				// 查询参数
				queryParams: {
					rateRuleName: "",
					sbLevelName: null,
					pageNum: 1,
					pageSize: 10,
					state: "1"
				},
				titleObj: {
					sbLevel: "",
					shopName: "",
				},
				style: {
					p: 'font-size:20rpx;!important'
				}
			};
		},
		onLoad() {
			this.getList();
			this.getXinxi();
		},
		methods: {
			getXinxi() {
				const launchOptions = uni.getLaunchOptionsSync();
				const {
					query
				} = launchOptions;
				// console.log(query, "query");
				// console.log(Object.keys(query).length, "query.lengh");
				if (Object.keys(query).length != 0) {
					// 3红 4黄 5绿 sbLevel shopName
					jnshop(query.storeId).then((item) => {
						// console.log(item);
						if (item.code == 200 && item.data) {
							this.titleObj.sbLevel = item.data.sbLevel
							this.titleObj.shopName = item.data.shopName
						} else {

						}
					})
				}
			},
			onSearch() {
				// this.getList();
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "暂无更多评级规则",
					complete() {
						
					}
				})

			},
			onClear() {
				this.queryParams.sbLevelName = "";
				// this.getList();
			},
			getList() {
				listraterule(this.queryParams).then((res) => {
					// console.log(res);
					if (res.rows.length != 0) {
						this.levelList = res.rows;

					} else {
						this.levelList = [{
							rateRuleName: "",
							rateRuleContent: ""
						}]
					}
				});
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					activeName: null,
					activeStart: null,
					activeEnd: null,
					activeContent: null,
					activePoint: null,
					joinRequire: null,
					activeState: null,
					createId: null,
					createBy: null,
					createTime: null,
					updateId: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					gridId: null,
					gridName: null,
					partId: null,
					partName: null,
				};
			},
		},
	};
</script>

<style lang="scss" scoped>
	.app-container {
		.list-item {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 25rpx;
			margin-bottom: 30rpx;
			margin-top: 30rpx;



			.list-item-title {
				text-align: center;
				border-bottom: 1rpx solid #000000;
				font-size: 35rpx;
				font-weight: bold;
			}

			.Mytitle {
				font-size: 30rpx;
				margin: 20rpx 0;
				font-weight: 550;

			}

			.mytext {
				// line-height: 45rpx;
				margin-top: 38rpx;
				display: grid;
				grid-template-columns: 1fr;
				grid-row-gap: 20rpx;
				line-height: 2;
				overflow: hidden;
			}

			.item-cell {
				display: flex;
				align-items: center;

				.cell-lable {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #9da2ab;
				}

				.cell-value {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #2e2f31;
				}
			}

			.cell-btn {
				display: flex;
				flex-direction: row-reverse;
			}

			&>view:not(.cell-btn) {
				margin-bottom: 20rpx;
			}
		}

		&>.list-item:last-child {
			margin-bottom: 0;
		}

	}

	.list-item-box {

		display: flex;
		text-align: center;

		.list-item-box-top {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
		}

		.list-item-box-bottom {
			font-size: 30rpx;
			font-weight: bold;
		}

		.good {
			color: green;
		}

		.red {
			color: red;
		}

		.yellow {
			color: yellowgreen;
		}
	}
</style>