VAVABUY/pages/dashboard/components/parcel_detail_particulars.vue

<template>
	<view class="parcel_detail_particulars">
		<uni-collapse>
			<uni-collapse-item>
				<template v-slot:title>
					<view class="particulars__head">
						<image src="../../../static/shop/order_icon.png"></image>
						<view class="">
							<trans :_t="props.mapOptions.title" />
						</view>
					</view>
				</template>
				<template v-slot:default>
					<view class="particulars__list">
						<view
							:style="{
								color: item.fontColor ? item.fontColor : '#000'
							}"
							class="particulars__item"
							v-for="(item, i) in props.mapOptions.mapField"
							:key="i"
						>
							<view class="particulars__item-label"><trans :_t="item.label" /></view>
							<view
								class="particulars__item-right"
								:style="i == 0 ? {
									fontSize: '42rpx',
									fontWeight: 600,
									color: '#000'
								} : {}"
							>
								<template v-if="item.key != 'first_price' && item.key != 'continue_price'">
									<text style="margin-right:2px;" v-if="item.symbol">{{ item.symbol }}</text>
									<text v-if="!item.unit">{{ symbol.symbol }}</text>
									<text>{{ props.datas && props.datas[item.key] ? props.datas[item.key] : '0.00' }}</text>
									<text style="margin-left:4rpx;" v-if="item.unit">{{ item.unit }}</text>
								</template>
								<template v-else-if="item.key == 'first_price'">
									<text>{{ symbol.symbol }}</text>
									<text>{{ props.datas && props.datas[item.key] ? props.datas[item.key] : '0.00' }}</text>
									<text>/</text>
									<text>500</text>
									<text style="margin-left:4rpx;" v-if="item.unit">{{ item.unit }}</text>
								</template>
								<template v-else-if="item.key == 'continue_price'">
									<text>{{ symbol.symbol }}</text>
									<text>{{ props.datas && props.datas[item.key] ? props.datas[item.key] : '0.00' }}</text>
									<text>/</text>
									<text>{{ props.datas && props.datas.act_weight && (props.datas.act_weight - 500) > 0 ? props.datas.act_weight - 500 : 0 }}</text>
									<text style="margin-left:4rpx;" v-if="item.unit">{{ item.unit }}</text>
								</template>
							</view>
						</view>
					</view>
				</template>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script setup>
import { computed } from "vue";
import { useSystemStore } from "@/store";


const props = defineProps({
	mapOptions: {
		type: Object,
		default() {
			return null
		}
	},
	datas: {
		type: Object,
		default() {
			return null
		}
	}
})

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
</script>

<style scoped lang="less">
	.parcel_detail_particulars {
		width: 100%;
		
		.particulars__head {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 10rpx 0 20rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #000;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.particulars__item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 4px;
			font-size: 28rpx;
			color: #000;
			// font-weight: 500;
		}
		
		.particulars__item:first-child {
			.particulars__item-label {
				color: #555;
				margin: 8px 0 10px 0;
				font-size: 32rpx;
			}
		}
		
		.particulars__item-right {
			display: flex;
			align-items: center;
		}
	}
</style>