yoe-opm-web/src/views/diy/components/edit-goods-coupon.vue

<template>
  <div>
    <!-- 内容 -->
    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">风格选择</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="风格选择" class="flex">
            <span class="text-primary flex-1 cursor-pointer" @click="showCouponStyle">{{ diyStore.editComponent.styleName }}</span>
            <el-icon @click="showCouponStyle" class="cursor-pointer">
              <ArrowRight />
            </el-icon>
          </el-form-item>
        </el-form>

        <el-dialog v-model="showCouponDialog" title="风格选择" width="500px">
          <div class="data-bos">
            <template v-for="(item, index) in couponStyleList" :key="index">
              <div
                :class="{ 'border-primary': selectCouponStyle.value == item.value }"
                @click="changeCouponStyle(item)"
                class="data-list flex items-center justify-center overflow-hidden w-[200px] h-[100px] m-[6px] cursor-pointer border bg-gray-50"
              >
                <img :src="img(item.url)" />
              </div>
            </template>
          </div>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showCouponDialog = false">取消</el-button>
              <el-button type="primary" @click="confirmCouponStyle">确认</el-button>
            </span>
          </template>
        </el-dialog>
      </div>

      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">优惠券内容</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="标题">
            <el-input
              v-model.trim="diyStore.editComponent.couponTitle"
              clearable
              :maxlength="diyStore.editComponent.style == 'style-3' ? 4 : 8"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="副标题">
            <el-input
              v-model.trim="diyStore.editComponent.couponSubTitle"
              clearable
              :maxlength="diyStore.editComponent.style == 'style-3' ? 7 : 10"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">优惠券数据</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="选择优惠券">
            <el-radio-group v-model="diyStore.editComponent.source" title="选择商品">
              <el-radio value="all">全部</el-radio>
              <el-radio value="custom">手动选择</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手动选择" v-if="diyStore.editComponent.source == 'custom'">
            <coupon-select-popup ref="couponSelectPopupRef" v-model="diyStore.editComponent.couponIds" :min="1" :max="20" />
          </el-form-item>
          <el-form-item label="优惠券数量" v-if="diyStore.editComponent.source == 'all'">
            <el-slider show-input v-model="diyStore.editComponent.num" :min="1" :max="20" size="small" class="goods-coupon-slider" />
          </el-form-item>
          <el-form-item label="按钮文字" v-if="diyStore.editComponent.style != 'style-4'">
            <el-input v-model.trim="diyStore.editComponent.btnText" clearable maxlength="5" show-word-limit />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 样式 -->
    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
      <div class="edit-attr-item-wrap" v-if="diyStore.editComponent.style == 'style-4'">
        <h3 class="mb-[10px]">标题样式</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="标题颜色">
            <el-color-picker v-model="diyStore.editComponent.titleColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
          <el-form-item label="副标题颜色">
            <el-color-picker v-model="diyStore.editComponent.subTitleColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
        </el-form>
      </div>

      <div class="edit-attr-item-wrap" v-if="diyStore.editComponent.style == 'style-4'">
        <h3 class="mb-[10px]">优惠券项样式</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="金额颜色">
            <el-color-picker v-model="diyStore.editComponent.couponItem.moneyColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
          <el-form-item label="标题颜色">
            <el-color-picker v-model="diyStore.editComponent.couponItem.textColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
          <el-form-item label="副标题颜色">
            <el-color-picker v-model="diyStore.editComponent.couponItem.subTextColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-color-picker v-model="diyStore.editComponent.couponItem.bgColor" show-alpha :predefine="diyStore.predefineColors" />
          </el-form-item>
          <el-form-item label="圆角">
            <el-slider v-model="diyStore.editComponent.couponItem.aroundRadius" show-input size="small" class="ml-[10px] diy-nav-slider" :max="50" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useDiyStore from '@/store/modules/diy';
import { img } from '@/utils/common';
// import couponSelectPopup from '@/addon/shop/views/goods/components/coupon-select-popup.vue';

import style1 from '@/assets/images/diy/shop/style-1.png';
import style2 from '@/assets/images/diy/shop/style-2.png';
import style3 from '@/assets/images/diy/shop/style-3.png';
import style4 from '@/assets/images/diy/shop/style-4.png';

const diyStore = useDiyStore();
diyStore.editComponent.ignore = ['componentBgColor', 'componentBgUrl']; // 忽略公共属性

// 组件验证
diyStore.editComponent.verify = (index: number) => {
  const res = { code: true, message: '' };

  if (diyStore.value[index].source == 'custom') {
    if (diyStore.value[index].couponIds.length == 0) {
      res.code = false;
      res.message = '请选择优惠券';
      return res;
    }
  }

  if (diyStore.value[index].btnText == '') {
    res.code = false;
    res.message = '请输入按钮文字';
    return res;
  }

  if (diyStore.value[index].couponTitle == '') {
    res.code = false;
    res.message = '请输入标题';
    return res;
  }

  if (diyStore.value[index].couponSubTitle == '') {
    res.code = false;
    res.message = '请输入副标题';
    return res;
  }

  return res;
};

const selectCouponStyle = reactive({
  title: diyStore.editComponent.styleName,
  value: diyStore.editComponent.style
});

// 风格样式
const showCouponDialog = ref(false);

const showCouponStyle = () => {
  showCouponDialog.value = true;
  selectCouponStyle.title = diyStore.editComponent.styleName;
  selectCouponStyle.value = diyStore.editComponent.style;
};

const couponStyleList = reactive([
  {
    url: style1,
    title: '风格1',
    value: 'style-1'
  },
  {
    url: style2,
    title: '风格2',
    value: 'style-2'
  },
  {
    url: style3,
    title: '风格3',
    value: 'style-3'
  },
  {
    url: style4,
    title: '风格4',
    value: 'style-4'
  }
]);

const changeCouponStyle = (item: any) => {
  selectCouponStyle.title = item.title;
  selectCouponStyle.value = item.value;
};

const confirmCouponStyle = () => {
  diyStore.editComponent.styleName = selectCouponStyle.title;
  diyStore.editComponent.style = selectCouponStyle.value;
  if (diyStore.editComponent.style == 'style-3') {
    if (diyStore.editComponent.couponTitle && diyStore.editComponent.couponTitle.length > 4) {
      diyStore.editComponent.couponTitle = diyStore.editComponent.couponTitle.substring(0, 4);
    }
    if (diyStore.editComponent.couponSubTitle && diyStore.editComponent.couponSubTitle.length > 7) {
      diyStore.editComponent.couponSubTitle = diyStore.editComponent.couponSubTitle.substring(0, 7);
    }
  }
  initStyleFn();
  showCouponDialog.value = false;
};

const initStyleFn = () => {
  const index = diyStore.editComponent.ignore.indexOf('componentBgColor');
  if (diyStore.editComponent.style == 'style-4' && index != -1) {
    diyStore.editComponent.ignore.splice(index, 1);
    diyStore.editComponent.titleColor = '#ffffff';
    diyStore.editComponent.subTitleColor = '#ffffff';

    diyStore.editComponent.couponItem.moneyColor = '#fa191d';
    diyStore.editComponent.couponItem.textColor = '#333333';
    diyStore.editComponent.couponItem.subTextColor = '#999999';
    diyStore.editComponent.couponItem.bgColor = '#ffffff';
    diyStore.editComponent.couponItem.aroundRadius = 10;
    diyStore.editComponent.componentStartBgColor = '#fa191d';
  } else if (diyStore.editComponent.style != 'style-4' && index == -1) {
    diyStore.editComponent.ignore.push('componentBgColor');
  }
};

defineExpose({});
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.goods-coupon-slider {
  .el-slider__input {
    width: 100px;
  }
}

.data-bos {
  display: flex;
  flex-wrap: wrap;
  width: 624px;
  gap: 0 12px;
  .data-list {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    &.border-primary {
      border-color: var(--el-color-primary);
    }
    img {
      width: 100%;
    }
  }
}
</style>