fangliao-houtai/src/views/orders/components/ProductList.vue

 模板
<template>
  <div class="manage-dialog">
    <div class="manage-shopping-title">
      <div class="manage-shopping-title-left" style="white-space: nowrap"></div>

      <div class="manage-shopping-title-right" style="white-space: nowrap">
        <el-form inline>
          <el-form-item>
            <el-input
                style="width: 100%"
                v-model="searchForm.name"
                placeholder="商品名称"
            />
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="searchFun">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-if="chunkedManagelist.length > 0" v-for="(row, rowIndex) in chunkedManagelist" :key="rowIndex" style="margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col v-for="(item, colIndex) in row" :key="colIndex" :span="4">
          <div class="product-item">
            <el-row>
              <el-col :span="24">
                <el-image class="product-image" :src="item.cover"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="product-info">
                <span class="product-name">{{ item.goods_name }}</span>
                <span class="product-price">{{ item.price_selling }}元</span>
                <el-button class="add-to-cart-btn" type="primary" @click="openToCart(item)">添加购物车</el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="pagination-container">
    <div class="pagination-wrapper">
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="选择规格"
      width="500"
  >
    <div class="display-flex-center mr20 mb30 ">
      <el-image :src="detailData.cover"  style="width: 100px; height: 100px" fit="fit" />
      <div class="ml15">
        <text class="fs12 color-556 fw400">￥</text>
        <text class="fs20 color-556 fw700 mr20">{{ irem_price_selling}}</text>
        <div class="color-777 mt5">
          <text>已选择  {{ selectSuitDisplay }}</text>
        </div>
      </div>
    </div>
    <div  v-for="(item, pIndex) in goodsSpecData" :key="pIndex">
      <div class="fw700 mb10">{{ item.name }}</div>
      <div class="suit-btn-box">
        <view  @click="suitChange(suit, item)" :key="index"
              :class="['suit-btn',suit.isChecked ? 'suit-btn-active' : '']" v-for="(suit, index) in item.list">
          {{ suit.name }}
        </view>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addToCart">
          加入购物车
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { listApi as managelistApi } from '@/plugins/api/shopping/manage';
let dialogVisible = ref(false);
let chunkedManagelist = ref([[]]);
let goodsSpecData = ref([]);
let irem_price_selling = ref('');

const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(0);
let mark = ref(["店内服务","店内商品"]);
let searchForm = ref({});
function initFun(type, row) {
  searchForm.value ={};
  if ("second"==type){
    mark.value = "店内商品";
  }else if("third"==type){
    mark.value = "店内服务";
  }else{
    mark.value = ["店内服务","店内商品"];
  }
  getData();
}

const emit = defineEmits(['refreshList', 'addToCart']); // 确保只声明一次 emit
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
let selectData = ref([]);
function searchFun() {
  currentPage.value = 1;
  selectData.value = [];
  getData();
}
function getData() {

  let obj = Object.assign(
      {
        mark:mark.value,
        page: currentPage.value,
        pageSize: pageSize.value,
      },
      searchForm.value
  );
  managelistApi(obj).then((data) => {
    if (data != null && data.list != null) {
      const chunkSize = 6;
      const result = [];
      for (let i = 0; i < data.list.length; i += chunkSize) {
        result.push(data.list.slice(i, i + chunkSize));
      }
      chunkedManagelist.value = result.slice(0, 2);
    }
    console.log(data.page.total);
    total.value = data.page.total;
  });
}

function suitChange(item, pItem) {
  if (item.disabled) return
  pItem.list.forEach(spec => {
    spec.isChecked = false
  })
  console.log('item',item)
  item.isChecked = true
  irem_price_selling.value=item['price_selling']
}

let detailData = ref({});
let addToCartData = ref({});
function openToCart(item) {
  detailData.value=item
  if (item.specs){
    let price_selling_data =[] ;
    item.items.forEach(item => {
      let specsArr=item.goods_spec.split(';;')
      price_selling_data[specsArr[specsArr.length-1]]=item.price_selling
    })
    item.specs.forEach(pItem => {
      pItem.list = pItem.list.map((item, index) => {
        item['price_selling']= price_selling_data[item.group+'::'+item.name]
        if (index === 0) {
          item.isChecked= true
          irem_price_selling.value=item['price_selling']
        } else {
          item.isChecked= false
        }
        return item
      })
    })
  }
  goodsSpecData.value= item.specs
  dialogVisible.value = true
  addToCartData.value = {
    id: item.id,
    goods_name: item.goods_name,
    selectSuitDisplay: selectSuitDisplay.value,
    price_selling: irem_price_selling.value,
    num: 1, // 默认数量为1，可以根据需要调整
    priceCount: irem_price_selling.value // 小计可以是单价乘以数量，这里简化为单价
  }
}
function addToCart(item) {
  addToCartData.value.selectSuitDisplay =selectSuitDisplay.value
  addToCartData.value.price_selling =irem_price_selling.value
  addToCartData.value.priceCount =irem_price_selling.value
  emit('addToCart', addToCartData.value);
  dialogVisible = false
}
// 定义 computed 属性
const selectSuitDisplay = computed(() => {
  let priceSuit = []
  if (detailData) {
    detailData.value.specs.forEach(pItem => {
      let tempList = pItem.list.filter(item => item.isChecked)
      tempList = tempList.map(item => {
        return {
          group_name: item.group,
          spec_name: item.name
        }
      })
      priceSuit = priceSuit.concat(tempList)
    })
  }
  let tempData='';
   tempData = priceSuit.map(item => {
      return `${item.group_name}:${item.spec_name}`;
    });
    return tempData.join(',');
});
defineExpose({
  initFun,
});
</script>

<style scoped lang="scss">
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100px;
  height: 100px;
  margin-bottom: 10px; /* 添加间距 */
}

.product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* 确保宽度占满 */
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2; /* 行高 */
  max-height: 2.4em; /* 最多两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多两行 */
  -webkit-box-orient: vertical;
  width: 100%; /* 确保宽度占满 */
  height: 2.4em; /* 固定高度 */
}

.product-price {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px; /* 添加间距 */
}

.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 10px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center; /* 确保内部内容居中 */
}
.manage-shopping-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;

  .manage-shopping-title-left {
    font-size: 18px;
    font-weight: 700;
    color: #172b4d;

    :deep(.el-form-item) {
      width: calc(100% / 7 - 20px);
      margin-bottom: 0 !important;
    }
  }
}
.suit-btn-active {
  color: #C29556;
  background-color: #F9F2E6;
}
.suit-btn-disabled{
  background-color: #fffafa;
  border-color: #d0d0d0;
  color: #ababab;
}
.display-flex-center {
  display: flex;
  align-items: center;
}
.add-to-cart-btn {
  width: 100%;
  max-width: 150px; /* 可选：设置最大宽度 */
}
.mr20 {
  margin-right: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.ml15{
  margin-left: 15px;
}
.color-556 {
  color: #C29556;
}
.fw700 {
  font-weight: 700 !important;
}
.fw600 {
  font-weight: 600!important;
}
.fw500 {
  font-weight: 500!important;
}
.fw400 {
  font-weight: 400!important;
}
.mr20 {
  margin-right: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.mt5 {
  margin-top: 5px;
}
.color-777 {
  color: #777777;
}
.suit-btn-box {
  display: flex;

  // justify-content: space-between;
  .suit-btn {
    background-color: #F6F6F6;
    border-radius: 4px;
    border: 1px solid transparent;
    height: 38px;
    line-height: 38px;
    text-align: center;
    width: calc(33% - 10px);
    color: #232323;
    margin-right: 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    &-active {
      color: #C29556;
      background-color: #F9F2E6 ;
    }
    &-disabled {
      background-color: #fffafa;
      border-color: #d0d0d0;
      color: #ababab;
    }

    &-column {
      width: 100%;
      text-align: left;
      padding: 0 10rpx;
      flex-shrink: 0;
    }

  }
}
</style>