cashier-ipad-new/pagesCreateOrder/index/components/taocanModel.vue

<template>
  <my-model ref="model" borderRadius="12" :title="datas.title">
    <template #desc>
      <scroll-view
        scroll-y="true"
        style="height: 50vh"
        class="u-p-30 guigeModel"
      >
        <view class="u-m-b-40" v-for="(item, index) in datas.skus" :key="index">
          <view class="u-text-left">
            <view class="color-333"
              >{{ item.title }}
              <text style="color: #999"
                >({{ item.count }}选{{ item.number }})</text
              >
            </view>
          </view>
          <view class="u-flex u-m-t-20 u-flex-wrap">
            <view
              class="item"
              @tap="chooseSkd(skd, item)"
              :class="{ active: skd.select == true }"
              v-for="(skd, skdIndex) in item.goods"
              :key="skdIndex"
            >
              {{ skd.proName }}
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <template #btn>
      <view class="u-p-30 border-top">
        <view class="u-flex u-p-b-30 u-row-between">
          <view class="price">
            <text>￥</text>
            <text>{{ datas.price }}</text>
          </view>
        </view>
        <view class="u-m-t-10">
          <my-button @tap="confirm">添加</my-button>
        </view>
      </view>
    </template>
  </my-model>
  <uni-popup ref="popup" type="message">
    <uni-popup-message
      type="info"
      message="请选择套餐"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";
import infobox from "@/commons/utils/infoBox.js";
import myModel from "@/components/my-components/my-model.vue";
import myButton from "@/components/my-components/my-button.vue";
import { onShow } from "@dcloudio/uni-app";
const props = defineProps({
  goodsData: {
    type: Object,
    default: () => {},
  },
});
const model = ref(null);
const popup = ref();
let datas = reactive({
  item: "",
  title: "",
  price: "",
  skus: [],
  // 几选几,的和
  selectNumber: 0,
});

watch(
  () => props.goodsData,
  (newval) => {
    let gArr = JSON.parse(newval.groupSnap);
    gArr.forEach((ele) => {
      ele.selectData = [];
    });
    console.log(newval, 11);
    datas.item = newval;
    datas.title = newval.name;
    datas.price = newval.lowPrice;
    datas.skus = gArr;
  }
);

const selectNumber = computed(() => {
  return datas.skus.reduce((prve, cur) => {
    console.log(prve);
    return 0 + cur.number;
  }, 0);
});

const emits = defineEmits(["confirm", "updateSku"]);

function confirm() {
  // 将数据保存进对应的值
  let arr = [];
  let arrlength = 0;
  datas.selectNumber = 0;
  datas.skus.map((ele) => {
    let group = {
      ...ele,
      goods: [],
    };
    if (ele.goods && ele.goods.length > 0) {
      ele.goods.map((item) => {
        if (item.select) {
          group.goods.push(item);
          arrlength++;
        }
      });
    }
    arr.push(group);
    datas.selectNumber += ele.number;
  });
  console.log(arrlength);
  console.log(datas.selectNumber);
  if (arrlength == datas.selectNumber) {
    emits("confirm", arr, datas.item);
    close();
  } else {
    popup.value.open();
  }
}

/**
 * 套餐选择处理
 * @param {Object} skd
 * @param {Object} item
 */
function chooseSkd(skd, item) {
  if (item.selectData.includes(skd.proId)) {
    skd.select = false;
    let indexs = item.selectData.indexOf(skd.proId);
    item.selectData.splice(indexs, 1);
  } else {
    if (item.selectData.length < item.number) {
      skd.select = true;
      item.selectData.push(skd.proId);
    }
  }
}

function open() {
  model.value.open();
}

function close() {
  datas.selectNumber = 0;
  model.value.close();
}

defineExpose({
  open,
  close,
});
</script>

<style lang="scss">
.border-top {
}

.icon {
  width: 40rpx;
  height: 40rpx;
}

.guigeModel {
  .item {
    color: #666;
    font-size: 24rpx;
    padding: 4rpx 28rpx;
    border: 1px solid #e5e5e5;
    border-radius: 8rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    transition: all 0.2s ease-in-out;

    &.active {
      border-color: $my-main-color;
      color: $my-main-color;
    }

    &.disabled {
      color: #ccc;
      border-color: #eee;
    }
  }
}

.price {
  color: #eb4f4f;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
</style>