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>
		<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>
		<view class="list-item">
			<view class="list-item-title">{{levelList[0].rateRuleName || ''}}</view>
			<view>

				<view class="Mytitle">

				</view>
				<view class="mytext">
					{{levelList[0].rateRuleContent || ""}}
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	import {
		listraterule,
		jnshop
	} from "../../api/jn/apply";
	export default {
		data() {
			return {
				// 表单参数
				form: {},
				levelList: [{
					rateRuleName: "",
					rateRuleContent: ""
				}],
				// 查询参数
				queryParams: {
					sbLevelName: null,
					pageNum: 1,
					pageSize: 10,
				},
				titleObj:{
					sbLevel:"",
					shopName:""
				}
			};
		},
		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();
			},
			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;
			}

			.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>