sailun-tbr-web/pages/msg/System-message/index.vue

<template>
	<!-- 系统消息页面 -->
	<view class="header">
		<view class="content" v-for="(item,index) in datalist" @click="inDetails" :key="index">
			<view class="content-one">
				<text class="content-one-first">{{item.title}}</text>
				<text class="content-one-second">{{item.data}}</text>
			</view>
			<!-- 中间的虚线 -->
			<view class="content-two">
			</view>
			<view class="content-three">
				{{item.order}}
			</view>
			<view class="content-four">
				订单编号：{{item.number}}
			</view>
			<view class="content-four">
				创建时间：{{item.time}}
			</view>
			<view class="content-four">
				订单条数：{{item.amount}}条
			</view>
			<view class="content-four">
				联系人：{{item.name}}
			</view>
			<view class="content-four">
				联系电话：{{item.Telephone}}
			</view>
			<view class="content-four">
				零售店地址：{{item.address}}
			</view>
			<view class="content-five">
				<text class="content-five-first">查看订单详情</text>
				<text class="content-five-second">
					<u-icon name="arrow-right"></u-icon>
				</text>
			</view>
		</view>
		<view class="header">
			<view class="content" v-for="(item,index) in goodsList" :key="index">
				<view class="content-one">
					<text class="content-one-first">{{item.title}}</text>
					<text class="content-one-second">11.26</text>
				</view>
				<!-- 中间的虚线 -->
				<view class="content-two">
				</view>
				<view class="content-three" style="color:red;">
					{{item.data}}
				</view>
				<view class="content-four-tail">
					促销商品1（规格）：{{item.order1}}
				</view>
				<view class="content-four-tail">
					优惠力度： {{item.order2}}
				</view>
				<view class="content-four-tail">
					促销商品2（规格）：{{item.order3}}
				</view>
				<view class="content-four-tail">
					优惠力度： {{item.order3}}
				</view>
				<view class="content-four" style="color:#FF651A;">
					
					{{item.address}}
				</view>
				<view class="content-five">
					<text class="content-five-first">查看订单详情</text>
					<text class="content-five-second">
						<u-icon name="arrow-right"></u-icon>
					</text>
				</view>

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

<script>
	export default {
		data() {
			return {
				datalist: [{
						title: '零售店订单信息',
						data: '4月22日',
						order: '您接收到赛轮轮胎市北店的新订单',
						number: '20202000202202',
						time: '2020/04/21',
						amount: '300',
						name: '曹某',
						Telephone: '17863993980',
						address: '山东省青岛市李沧区某某小区某楼'
					}, {
						title: '零售店订单信息',
						data: '4月22日',
						order: '您接收到赛轮轮胎市北店的新订单',
						number: '20202000202202',
						time: '2020/04/21',
						amount: '300',
						name: '曹某',
						Telephone: '17863993980',
						address: '山东省青岛市李沧区某某小区某楼'
					},
					{
						title: '零售店订单信息',
						data: '4月22日',
						order: '您接收到赛轮轮胎市北店的新订单',
						number: '20202000202202',
						time: '2020/04/21',
						amount: '300',
						name: '曹某',
						Telephone: '17863993980',
						address: '山东省青岛市李沧区某某小区某楼'
					},
					{
						title: '零售店订单信息',
						data: '4月22日',
						order: '您接收到赛轮轮胎市北店的新订单',
						number: '20202000202202',
						time: '2020/04/21',
						amount: '300',
						name: '曹某',
						Telephone: '17863993980',
						address: '山东省青岛市李沧区某某小区某楼'
					},

				],
				goodsList: [
					{
						title: '零售店订单信息',
						data: '赛轮集团针对优质客户提供以下优惠活动，立马抢购吧！',
						order1: '225/55R17',
						order2: '每条胎在零售价基础上优惠20元',
						order3: '225/55R17',
						order4: '每条胎在零售价基础上优惠20元',
						address: '库存有限，赶紧去订单促销活动界面抢购吧。'
					},
					{
						title: '零售店订单信息',
						data: '赛轮集团针对优质客户提供以下优惠活动，立马抢购吧！',
						order1: '225/55R17',
						order2: '每条胎在零售价基础上优惠20元',
						order3: '225/55R17',
						order4: '每条胎在零售价基础上优惠20元',
						address: '库存有限，赶紧去订单促销活动界面抢购吧。'
					},
				]
			}
		},

		onLoad() {

		},

		methods: {
			inDetails(){
				this.$u.route({
					url: 'pages/msg/Order-details/index',
				})	
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 702rpx;
		height: 447rpx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 20rpx;
		box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(78, 60, 63, 0.2);
		border-radius: 10rpx;
	}

	.content-one {
		display: flex;
		justify-content: space-between;
	}

	.content-one-first {
		font-size: 28rpx;
		font-weight: bold;
		margin: 20rpx;
	}

	.content-one-second {
		font-size: 24rpx;
		color: #B2B2B2;
		margin: 20rpx;
	}

	.content-five {
		display: flex;
		justify-content: space-between;
	}

	.content-five-first {
		font-size: 24rpx;
		font-weight: bold;
		margin: 20rpx;
	}

	.content-five-second {
		font-size: 24rpx;
		color: #B2B2B2;
		margin: 20rpx;
	}

	// 中间虚线
	.content-two {
		width: 670rpx;
		margin: 0 auto;
		border-top: 1rpx solid #ededed;
	}

	.content-three {
		color: #aeaeae;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		margin-bottom: 27rpx;
	}

	.content-four {
		color: #aeaeae;
		margin-left: 20rpx;
		margin-top: 6rpx;
		font-size: 24rpx;
	}

	.content-four-tail {
		color: #000;
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.content-five {}
</style>