workorder-front/pages/index/cart.vue

<template>
	<view class="page">
		<navbar
		title="收藏列表"
		leftClick 
		
		@leftClick="$utils.navigateBack"/>
		
		<uv-search placeholder="请输入搜索内容" v-model="keyword" height="80"></uv-search>
		<!-- 标签选项 -->
		<view class="Tabs">
			<uv-tabs :list="listt" @click="click" ></uv-tabs>
		</view>
		
		
		<view class="Urgent-Work-Order">
		
			<view class="Urgent-Work-List"  v-for="(item,index) in 2 " >
				<view class="Work-List">
					任务号：GY1269103AC0
				</view>
				<view class="Work-List">
					担当信息：李林珠-15177689988
				</view>
				<view class="Work-List">
		
					机型信息：BSZ24861768
				</view>
				<view class="Work-List">
					数量：88
				</view>
				<view class="Work-List">
					工单状态：本体加工
				</view>
			</view>
		</view>
		

	

		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components: {
			tabber,
		},
		data() {
			return {
				keyword: '水调歌头',
				listt: [{
					name: '所有',
				}, {
					name: '备料中',
				}, {
					name: '本体加工'
				}, {
					name: '气密检测'
				}, {
					name: '挂机中'
				}],
				value : 0,
				checkboxValue : [],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#FA5A0A'
						}
					}, 
				],
				list : [
					{
						id : 1,
						title : '桌布租赁',
						num : 1,
						price : 299,
						unit : '120*40*75【桌子尺寸】',
					},
					{
						id : 2,
						title : '桌布租赁',
						num : 1,
						price : 299,
						unit : '120*40*75【桌子尺寸】',
					},
				],
			}
		},
		computed: {
			totalPrice(){
				if (!this.checkboxValue.length) {
					return 0
				}
				let price = 0
				this.list.forEach(n => {
					if(this.checkboxValue.includes(n.id)){
						price += n.price * n.num
					}
				})
				return price
			},
		},
		methods: {
			valChange(){
				
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 200rpx;
		/deep/ .uv-swipe-action{
			width: 100%;
		}
		.Tabs{
			display: flex;
			justify-content: center;
			
		}
		.Urgent-Work-Order{
			padding: 20rpx;
			
			.Urgent-Work-List{
				margin-top: 20rpx;
				border: 6rpx solid rgb(99 ,187 ,211);
				border-radius: 25rpx;
				padding: 15rpx;
				.Work-List{
					margin: 15rpx 0rpx;
					letter-spacing: 2px
				}
			}
		}
	}

	
</style>