wxapp_shuibei/components/orderGoods/index.vue

<template>
	<view class="orderGoods borRadius14">

		<!-- <view class="total"
      >
		  <view v-if="sbMerchant&&sbMerchant.merchantName" class="merchant-container" @click.stop="toMerchant(sbMerchant.id)">
			<image v-if="sbMerchant.merchantLogo" class="merchant-logo" :src="sbMerchant.merchantLogo" mode=""></image>
			<text class="merchant-name">{{sbMerchant.merchantName}}</text>
			<uni-icons type="right" size="16" color="#333"></uni-icons>
		  </view>
		  <text>共{{ orderProNum ? orderProNum : totalNmu }}件商品</text>
	  </view
    > -->
		<view class="goodWrapper">
			<view class="product-item" v-for="(item, index) in cartInfo" :key="index"
				@click="jumpCon(item.productId)">
				<view class="product-img">
					<image class="img" :src="item.image"></image>
				</view>
				<view class="text">
					<view class="acea-row no-wrap row-between-wrapper">
						<view class="product-name">
							{{ item.productName ? item.productName : item.storeName }}
						</view>
						<view v-if="mallType === 0" class="product-price">
							￥{{ Number(item.storePrice).toFixed(2) }}
						</view>
						<view v-else class="product-price">
							{{ Number(item.storePrice).toFixed(2) }}
							<text class="sub">贝币</text>
						</view>
					</view>
					<view class="acea-row row-between-wrapper">
						<view class="t" v-if="item.sku">属性: {{ item.sku }}</view>
						<view class="t">
							x {{ item.payNum ? item.payNum : item.cartNum }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue";

	const props = defineProps({
		evaluate: {
			type: Number,
			default: 0,
		},
		mallType: {
			type: Number,
			default: 0, // 0: 水贝商城, 1: 贝币商城
		},
		cartInfo: {
			type: Array,
			default: () => [],
		},
		orderId: {
			type: String,
			default: "",
		},
		ids: {
			type: Number,
			default: 0,
		},
		jump: {
			type: Boolean,
			default: false,
		},
		orderProNum: {
			type: Number,
			default: 0,
		},
		productType: {
			type: Number,
			default: 0,
		},
		sbMerchant: {
			type: Object,
		}
	});

	const totalNmu = ref("");

	watch(
		() => props.cartInfo,
		(nVal) => {
			let num = 0;
			nVal.forEach((item) => {
				num += item.cartNum;
			});
			totalNmu.value = num;
		}, {
			immediate: true
		}
	);

	function evaluateTap(item) {
		uni.navigateTo({
			url: `/pages/users/goods_comment_con/index?unique=${item.attrId}&orderId=${props.orderId}&id=${props.ids}`,
		});
	}

	function jumpCon(id) {
		let type = props.productType == 0 ? "normal" : "video";
		if (props.jump) {
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${id}&type=${type}`,
			});
		}
	}
	// 前往商家详情页
	const toMerchant = (merchantId) => {
		uni.navigateTo({
			url: "/pages/merchantCenters/merchant/merchant?merchantId=" + merchantId
		});
	}
</script>

<style scoped lang="scss">
	.orderGoods {
		background-color: #fff;
	}

	.orderGoods .total {
		width: 100%;
		height: 86rpx;
		padding: 0 24rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pictrue image {
		background: #f4f4f4;
	}

	.merchant-container {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #333;

		.merchant-logo {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background-color: #000;
		}
	}
	
	.text .no-wrap{
		flex-wrap: nowrap;
		
		.product-name{
			font-size: 28rpx;
			color:#333;
			line-height: 44rpx;
			font-weight: bold;
		}
		.product-price{
			font-size: 36rpx;
			line-height: 44rpx;
			flex-shrink: 0;
			margin-left: 20rpx;
			color: #333;
			font-weight: bold;
			
			.sub{
				font-size: 24rpx;
			}
		}
	}
	
	.goodWrapper{
		// padding: 16rpx;
		.product-item{
			display: flex;
			width: 100%;
			
			.text{
				flex: 1;
				
				.t{
					font-size: 24rpx;
					line-height: 40rpx;
					margin-top: 12rpx;
					color: #666;
				}
			}
		}
		.product-img{
			width: 160rpx;
			height: 160rpx;
			margin-right: 16rpx;
			.img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
			}
			
		}
	}
</style>