模板代码

<template>
	<view class="listitem" @click="goadd(item)">
		<div class="listitemTitle1">
			<div class="listitemTitle1l">生效时间：{{item.UpdateTime}}</div>
			<div class="listitemTitle1r">
				<status :ApprovalUsers="item.ApprovalUsers" :status="item.AdjustmentPriceStutus"></status>
			</div>
		</div>
		<div class="listitemTitle">
			<div class="listitemTitlel">货物：{{item.MaterialName}}</div>
		</div>
		<div class="listitemcenter">
			<item2 :item="item"></item2>
		</div>
	</view>
</template>

<script>
	import item2 from './item2.vue'
	import status from './status.vue'
	export default {
		components: {
			item2,
			status
		},
		data() {
			return {
				style: {
					p: 'font-size:28rpx;',
					span: 'font-size: 28rpx;',
				}
			}
		},
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		methods: {
			goadd(item) {
				uni.setStorageSync('pricingData', item)
				if (item.AdjustmentPriceStutus == 'Submit') {
					uni.navigateTo({
						url: '/packages/pages/enterprise/pricing/add/add?Id=' + item.Id
					})
				} else {
					uni.navigateTo({
						url: '/packages/pages/enterprise/pricing/add/detail?Id=' + item.Id
					})
				}
			},
			gettype(e) {
				this.type = e.value[0]
			}
		}
	}
</script>

<style scoped lang="scss">
	.listitem {
		margin: 0 auto;
		width: calc(694rpx - 64rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		padding-top: 0;

		.listitemTitle {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #272A5F;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.listitemTitlel {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #191C55;
			}

			.listitemTitler {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #4087FF;
			}
		}

		.listitemcenter {
			width: 630rpx;
			background: rgba(#4087FF, 0.05);
			border-radius: 12rpx;
			margin-top: 28rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.listitemcenterl {
				width: calc(50% - 32rpx);
				margin-left: 32rpx;

				.label {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6F7197;
				}

				.desc {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #141852;
				}
			}

			.listitemcenterl:nth-child(1) {
				border-right: 1rpx solid #E8EBF2;
			}
		}
	}

	.time {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A7A9BE;
		display: flex;
		margin-top: 28rpx;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
	}

	.listitemTitle1 {
		width: 630rpx;
		height: 96rpx;
		border-bottom: 1rpx solid #F6F6F6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin: 0 auto;
		margin-bottom: 28rpx;

		.listitemTitle1l {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #5B5D85;
		}
	}
</style>

状态代码

/**
* @Author: 858834013@qq.com
* @Name: status
* @Date: 2022-04-30
* @Desc:
Submit-待提交
Examine-待审核/审核中
Completed-待生效
Refuse-拒绝
Nullify-作废
InForce-已生效
*/
<template>
	<div>
		<div v-if="status=='Submit'" class="statuscom1">
			待提交
		</div>
		<div v-if="status=='Examine' && apStatus" class="statuscom2">
			待审核
		</div>
		<div v-if="status=='Examine' && !apStatus" class="statuscom2">
			审核中
		</div>
		<div v-if="status=='Completed'" class="statuscom2">
			待生效
		</div>
		<div v-if="status=='Refuse'" class="statuscom2">
			拒绝
		</div>
		<div v-if="status=='Nullify'" class="statuscom2">
			作废
		</div>
		<div v-if="status=='InForce'" class="statuscom2">
			已生效
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		},
		props: {
			status: {
				type: String,
				default () {
					return '';
				}
			},
			ApprovalUsers: {
				type: String,
				default () {
					return '';
				}
			},
		},
		computed: {
			now: function() {
				return Date.now()
			},
			apStatus: function() {
				var status = false
				var Account = JSON.parse(uni.getStorageSync('userData')).Account
				if (this.ApprovalUsers) {
					var arr = this.ApprovalUsers.split(",");
					if (_.indexOf(arr, Account, 0) != -1) {
						status = true
					}
				}
				return status
			}
		},
		methods: {}
	}
</script>

<style scoped lang="scss">
	.statuscom1 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FA8D17;
	}

	.statuscom2 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #45C36F;
	}
</style>

其他代码

<template>
	<view>
		<view class="listitems">
			<view class="listitemsx">
				<div class="listitems1">
					<text>原价：</text>
					<text>{{item.OldPrice}}元/{{item.Unit}}</text>
				</div>
				<div class="listitems1">
					<text>调整后价格：</text>
					<text>{{item.Price}}元/{{item.Unit}}</text>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.listitems {
		width: calc(630rpx - 48rpx);
		margin-left: 24rpx;
		margin-right: 24rpx;
		flex: 1;

		.listitemsx {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
		}

		.listitems1 {
			height: 70rpx;
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;


			text {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #8789A7;
			}

			text:nth-child(2n) {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #434675;
			}
		}
	}
</style>