mall-app-t/pages/product/manageGoods.vue

<template>
  <pb-layout
    class="manage-goods"
    :title="goodsTitle"
    leftIcon="leftIcon"
    navbar="normal"
    :bgStyle="bgStyle"
    opacityBgUi="bg-white"
    color="black"
  >
    <view class="goods-form">
      <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
        <uni-forms-item label="商品封面图" name="picUrl" required>
          <p-uploader
            v-model:url="formData.picUrl"
            :readonly="!canEdit"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
          <p-uploader
            v-model:url="formData.sliderPicUrls"
            :readonly="!canEdit"
            fileMediatype="image"
            limit="6"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          />
        </uni-forms-item>
        <uni-forms-item label="商品名称" name="name" required>
          <uni-easyinput
            type="text"
            trim="all"
            v-model="formData.name"
            :disabled="!canEdit"
            placeholder="请输入商品名称"
          />
        </uni-forms-item>
        <uni-forms-item
          label="商品分类"
          @tap="openPicker('category', 'multiple')"
          name="categoryId"
          label-position="left"
          required
        >
          <uni-easyinput
            type="text"
            v-model="formData.categoryText"
            :styles="selfStyles"
            placeholderStyle="color:#8a8a8a"
            :clearable="false"
            :inputBorder="false"
            placeholder="请选择商品分类"
            disabled
          >
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item
          label="商品品牌"
          name="brandId"
          label-position="left"
          required
          @tap="openPicker('brand', 'single')"
        >
          <uni-easyinput
            type="text"
            v-model="formData.brandText"
            :styles="selfStyles"
            placeholderStyle="color:#8a8a8a"
            :clearable="false"
            :inputBorder="false"
            placeholder="请选择商品品牌"
            disabled
          >
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="商品规格" name="skus" required label-position="left">
          <view class="btn-group">
            <button class="ss-reset-button ss-set-property" @tap="clickSetProperty">规格设置</button>
          </view>
        </uni-forms-item>
        <uni-forms-item label="商品关键词" name="keyword" required>
          <uni-easyinput type="text" v-model="formData.keyword" :disabled="!canEdit" placeholder="请输入商品关键词" />
        </uni-forms-item>
        <uni-forms-item label="商品简介" name="introduction" required>
          <uni-easyinput
            type="textarea"
            :disabled="!canEdit"
            trim="all"
            autoHeight
            v-model="formData.introduction"
            placeholder="请输入商品简介"
          />
        </uni-forms-item>
        <uni-forms-item
          label="物流设置"
          @tap="openPicker('delivery', 'single')"
          name="deliveryTypes"
          label-position="left"
          required
        >
          <uni-easyinput
            type="text"
            :clearable="false"
            :styles="selfStyles"
            placeholderStyle="color:#8a8a8a"
            :inputBorder="false"
            v-model="formData.deliveryText"
            placeholder="请选择配送方式"
            disabled
          >
            <template v-slot:right>
              <uni-icons type="right" />
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item label="虚拟销量" name="virtualSalesCount" required>
          <uni-easyinput
            v-model="formData.virtualSalesCount"
            type="number"
            :disabled="!canEdit"
            placeholder="请输入虚拟销量"
          />
        </uni-forms-item>
        <uni-forms-item label="商品详情" required>
          <piaoyiEditor
            :values="richValues"
            @changes="saveContens"
            :maxlength="3000"
            :readOnly="richReadOnly"
            :photoUrl="photoUrl"
            :api="richApi"
          />
        </uni-forms-item>
      </uni-forms>
      <view @tap="onSubmit" v-if="canEdit">
        <button class="ss-reset-button submit-button ui-Shadow-Main">提交</button>
      </view>
    </view>

    <p-picker ref="pickerRef" :mode="pickerMode" :options-cols="optionsCols" @confirm="onRDPickerConfirm"></p-picker>
  </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import _ from 'lodash'
import GoodsApi from '@/peach/api/trade/goods'
import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue'
import peach from '@/peach'
import { baseUrl, apiPath } from '@/peach/config'
import { handleTree, floatToFixed2, convertToInteger } from '@/peach/utils'
import { validateSku } from './js/sku'

const bgStyle = {
  backgroundImage: '',
  backgroundColor: '#fff',
  description: '',
}

const DELIVERY_TYPES = [
  {
    value: 3,
    label: '到店核销',
  },
  {
    value: 4,
    label: '商家配送',
  },
]

const selfStyles = {
  backgroundColor: '#f9f9f9',
}

const pickerRef = ref()
const richValues = ref('')
const photoUrl = baseUrl + apiPath
const richApi = '/infra/file/upload'
const richReadOnly = ref(true)
const formData = ref({
  picUrl: '',
  sliderPicUrls: [],
  name: '',
  categoryId: '',
  categoryText: '',
  brandId: '',
  keyword: '',
  deliveryTypes: [],
  deliveryText: '',
  sort: 0,
  giveIntegral: 0,
  virtualSalesCount: 0,
  subCommissionType: false,
  introduction: '',
})

const rules = {
  name: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品名称',
      },
    ],
  },
  picUrl: {
    rules: [
      {
        required: true,
        errorMessage: '请上传商品封面图',
      },
    ],
  },
  sliderPicUrls: {
    rules: [
      {
        required: true,
        errorMessage: '请上传商品轮播图',
      },
    ],
  },
  categoryId: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品分类',
      },
    ],
  },
  brandId: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品品牌',
      },
    ],
  },
  skus: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品规格',
      },
    ],
  },
  keyword: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品关键字',
      },
    ],
  },
  introduction: {
    rules: [
      {
        required: true,
        errorMessage: '请输入商品简介',
      },
    ],
  },
  deliveryTypes: {
    rules: [
      {
        required: true,
        errorMessage: '请选择商品物流',
      },
    ],
  },
}

const formRef = ref(null)
const pickerMode = ref('single')
const popMark = ref('')
const goodsTitle = ref('')
const categoryList = ref([])
const brandList = ref([])
const optionsCols = ref([])
const canEdit = computed(() => peach.$store('trade').canEdit)

function openPicker(mark, mode) {
  if (!canEdit.value) return
  pickerMode.value = mode
  popMark.value = mark
  if (mark === 'delivery') {
    optionsCols.value = DELIVERY_TYPES
    pickerRef.value.onOpen([0])
  } else if (mark === 'category') {
    optionsCols.value = categoryList.value
    pickerRef.value.onOpen([0, 0])
  } else if (mark === 'brand') {
    optionsCols.value = brandList.value
    pickerRef.value.onOpen([0])
  }
}

function onRDPickerConfirm(e) {
  if (popMark.value === 'delivery') {
    formData.value.deliveryTypes = []
    formData.value.deliveryText = DELIVERY_TYPES[e.value[0]].label
    formData.value.deliveryTypes.push(DELIVERY_TYPES[e.value[0]].value)
  }

  if (popMark.value === 'category') {
    formData.value.categoryId = categoryList.value[e.value[0]].children[e.value[1]].id
    formData.value.categoryText =
      categoryList.value[e.value[0]].name + '/' + categoryList.value[e.value[0]].children[e.value[1]].name
  }

  if (popMark.value === 'brand') {
    formData.value.brandId = brandList.value[e.value[0]].id
    formData.value.brandText = brandList.value[e.value[0]].name
  }
}

function clickSetProperty() {
  if (formData.value.skus) {
    // 如果是多规格，处理格式问题，合并属性
    let temp = formData.value.skus
      .map((item) => {
        return item.properties.map((sitem) => ({
          id: sitem.propertyId,
          children: [sitem.valueId],
        }))
      })
      .flat(1)

    // 去除重复数据
    let result = temp.reduce((pre, cur) => {
      let index = pre.findIndex((item) => item.id === cur.id)
      if (index !== -1) {
        pre[index].children.push(...new Set(cur.children))
      } else {
        pre.push(cur)
      }

      return pre
    }, [])

    peach.$store('trade').$patch({
      selectedProperty: result,
    })
  }

  peach.$router.go('/pages/product/sku')
}

function getProduct(id) {
  GoodsApi.getProduct({ id }).then((res) => {
    formData.value = res.data

    // 内容为图片时，需要在末尾插入空行
    richValues.value = res.data.description ? res.data.description + '<p><br/></p>' : ''

    // 循环遍历 categoryList，从二级分类找出和 formData.value.categoryId 相等的

    let tempCategory = categoryList.value.find((item) => {
      return item.children?.find((child) => {
        return child.id === formData.value.categoryId
      })
    })

    formData.value.categoryText =
      tempCategory.name +
      '/' +
      tempCategory.children.find((item) => {
        return item.id === formData.value.categoryId
      }).name

    // 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的

    let tempBrand = brandList.value.find((item) => {
      return item.id === formData.value.brandId
    })

    formData.value.brandText = tempBrand.name

    // 从 DELIVERY_TYPES 找出和 formData.value.deliveryTypes 相等的
    formData.value.deliveryText = DELIVERY_TYPES.find((item) => {
      return item.value === formData.value.deliveryTypes[0]
    }).label

    formData.value.skus.forEach((item) => {
      item.price = floatToFixed2(item.price)
      item.marketPrice = floatToFixed2(item.marketPrice)
      item.costPrice = floatToFixed2(item.costPrice)
    })

    peach.$store('trade').$patch({
      goodsInfo: formData.value,
      skus: formData.value.skus,
      specType: formData.value.specType,
    })
  })
}

function saveContens(e) {
  formData.value.description = e.html
}

function onSubmit() {
  formData.value.skus = peach.$store('trade').skus

  formRef.value
    .validate()
    .then(async (res) => {
      // 校验 skus 是否正确填写完成
      validateSku()

      let tempObj = _.cloneDeep(formData.value)

      tempObj.skus.forEach((item) => {
        item.name = formData.value.name
        item.price = convertToInteger(item.price)
        item.marketPrice = convertToInteger(item.marketPrice)
        item.costPrice = convertToInteger(item.costPrice)
      })

      tempObj.specType = peach.$store('trade').specType

      let msg = ''
      if (formData.value.id) {
        tempObj.id = formData.value.id
        await GoodsApi.editProduct(tempObj)
        msg = '修改成功'
      } else {
        await GoodsApi.addProduct(tempObj)
        msg = '添加成功'
      }

      uni.showToast({
        title: msg,
        icon: 'none',
        duration: 4000,
      })

      setTimeout(() => {
        peach.$router.redirect('/pages/index/product')
      }, 1000)
    })
    .catch((err) => {
      console.log('err', err)
      if (err) {
        uni.showToast({
          title: err[0]?.errorMessage,
          icon: 'none',
          duration: 4000,
        })
      }
    })
}

// 获得商品分类
async function getCategoryList() {
  let { data } = await GoodsApi.getGoodsCategory()
  categoryList.value = handleTree(data)
}

// 获得商品品牌
async function getBrandList() {
  let { data } = await GoodsApi.getBrand()
  brandList.value = data
}

onLoad(async (options) => {
  await getCategoryList()
  await getBrandList()

  goodsTitle.value = options.title

  if (options.id) {
    getProduct(options.id)
    peach.$store('trade').detailTag = options.mark
  }
})

onShow(() => {
  let isSave = peach.$store('trade').isSave

  if (isSave) {
    formData.value.skus = peach.$store('trade').skus
    formData.value.specType = peach.$store('trade').specType
    peach.$store('trade').isSave = false
  } else {
    peach.$store('trade').$patch({
      skus: formData.value.skus || [],
      specType: formData.value.specType,
    })
  }
})

onPageScroll((e) => {
  if (canEdit.value && e.scrollTop > 200) {
    richReadOnly.value = false
  }
})
</script>

<style lang="scss" scoped>
@mixin ss-set-property {
  width: 80px;
  height: 60rpx;
  line-height: normal;
  background: var(--ui-BG-Main);
  border-radius: 28rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #fff;
}

.manage-goods {
  .goods-form {
    margin: 40rpx;

    :deep() {
      .uni-easyinput__content-input {
        font-size: 28rpx !important;
        color: #333333 !important;
        line-height: normal !important;
      }

      .uni-easyinput__placeholder-class {
        font-size: 14px;
      }

      .is-direction-left {
        .uni-forms-item__label {
          padding-left: 10px;
          background-color: #f9f9f9;
          border-radius: 10px 0 0 10px;
        }

        uni-icons {
          margin-right: 10px;
        }

        .uni-easyinput__content {
          border-radius: 0 10px 10px 0;
        }
      }

      .is-direction-left {
        .is-disabled {
          color: #333333;
          text-align: right;
        }

        .uni-forms-item__error {
          left: -160rpx !important;
        }
      }
    }

    .btn-group {
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #f9f9f9;
      border-radius: 0 10px 10px 0;

      .ss-set-property {
        @include ss-set-property;
      }
    }

    .submit-button {
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
  }
}
</style>