wxapp_shuibei/components/orderGoods/index.vue

<template>
  <view class="orderGoods borRadius14">
<!--    <view class="total"-->
<!--      >共{{ orderProNum ? orderProNum : totalNmu }}件商品</view-->
<!--    >-->
    <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 pad30">
      <view
        class="item acea-row row-between-wrapper"
        v-for="(item, index) in cartInfo"
        :key="index"
        @click="jumpCon(item.productId)"
      >
        <view class="pictrue">
          <image :src="item.image"></image>
        </view>
        <view class="text">
          <view class="acea-row row-between-wrapper">
            <view class="name line1">
              {{ item.productName ? item.productName : item.storeName }}
            </view>
            <view class="num">
              x {{ item.payNum ? item.payNum : item.cartNum }}
            </view>
          </view>
          <view class="attr line1" v-if="item.sku">属性: {{ item.sku }}</view>
          <view v-if="mallType === 0" class="money font-color">
            ￥{{ Number(item.storePrice).toFixed(2) }}
          </view>
          <view v-else class="money font-color">
            贝币:{{ Number(item.storePrice).toFixed(2) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const props = defineProps({
  evaluate: {
    type: Number,
    default: 0,
  },
  mallType: {
    type: Number,
    default: 0, // 0: 水贝商城, 1: 贝币商城
  },
  cartInfo: {
    type: Array,
    default: () => [],
  },
  sbMerchant: {
    type: Object,
    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,
  },
});

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/goods_details/index?id=${id}&type=${type}`,
    });
  }
}
const toMerchant = (merchantId) => {
  uni.navigateTo({ url:"/pages/merchantCenters/merchant?merchantId="+merchantId });
}
</script>

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

.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;
  align-items: center;
}

.pictrue image {
  background: #f4f4f4;
}
.merchantImg{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.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;
  }
}
</style>