shenze-sysMan/src/views/device/modifyPrice/index.vue

<template>
  <div class="price-editor">
    <s-header :name="$t('device.modifyPricePage.title')" :noback="false" />
    <div class="content-container">
      <!-- 设备信息卡片 -->
      <div class="device-card">
        <div class="device-header">
          <div class="header-indicator"></div>
          <h3 class="device-name">
            {{ $t("device.modifyPricePage.equipmentName") }}：{{
              equipmentName
            }}
          </h3>
        </div>
      </div>

      <!-- 商品列表卡片 -->
      <div class="goods-card">
        <!-- 操作头部 -->
        <div class="card-header">
          <div class="goods-count">
            {{ $t("device.modifyPricePage.total") }}
            <span class="highlight">{{ tableData.length }}</span>
            {{ $t("device.modifyPricePage.goods") }}
          </div>
          <van-button
            icon="edit"
            plain
            hairline
            @click="noticeClk"
            class="batch-btn"
          >
            {{ $t("device.modifyPricePage.batchModify") }}
          </van-button>
        </div>

        <!-- 商品列表 -->
        <div class="goods-list">
          <div
            v-for="(item, index) in tableData"
            :key="index"
            class="goods-item"
          >
            <div class="goods-info">
              <van-image
                class="goods-image"
                :src="showSugerPhoto(item)"
                fit="cover"
              />
              <span class="goods-name">{{ item.productName }}</span>
            </div>

            <div class="price-action">
              <template v-if="item.isEdit">
                <van-field
                  type="number"
                  v-model="item.rmbPrice"
                  class="price-input"
                  :border="false"
                  clearable
                >
                  <template #extra>
                    <span class="currency-symbol">{{ currencySymbol }}</span>
                  </template>
                </van-field>
                <van-icon
                  name="success"
                  class="action-icon"
                  @click="editClk(item, 2)"
                />
              </template>
              <template v-else>
                <div class="price-display">
                  <span class="currency">{{ currencySymbol }}</span>
                  <span class="price">{{ item.rmbPrice }}</span>
                </div>
                <van-icon
                  name="edit"
                  class="action-icon"
                  @click="editClk(item, 1)"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量修改弹窗 -->
    <kDialog
      :isCloseForConfirm="false"
      :dialogTitle="$t('device.modifyPricePage.batchPrice')"
      :confirmBtnTxt="$t('device.modifyPricePage.modifySubmit')"
      ref="kDialogRef"
      @confirmclk="confirmClk"
    >
      <template #content>
        <van-field
          type="number"
          v-model="cofficentForm.price"
          :placeholder="$t('device.modifyPricePage.batchPricePlace')"
          :label="$t('device.modifyPricePage.batchPrice')"
          class="batch-field"
        >
          <template #extra>
            <span class="currency-symbol">{{ currencySymbol }}</span>
          </template>
        </van-field>
      </template>
    </kDialog>
  </div>
</template>

<script>
import kDialog from "@/components/commom/kDialog/index.vue";
// 导入接口
import { selectProducts, Api_getUpdaProdPrice } from "@/service/device/index";
import sHeader from "@/components/SimpleHeader";
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRoute } from "vue-router";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
// import { styleUrl } from "../../../common/js/utils";
export default {
  components: { sHeader, kDialog },
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 批量修改弹窗
    const kDialogRef = ref(null);
    // 点击批量修改
    const noticeClk = () => {
      cofficentForm.price = "";
      kDialogRef.value.openDialog();
    };
    // 点击确定按钮
    const confirmClk = () => {
      if (!cofficentForm.price) {
        showToast(t("device.modifyPricePage.batchPricePlace"));
        return;
      }
      cofficentForm.no = "";
      cofficentForm.type = 1;
      updatePrice();
      kDialogRef.value.closeDialog();
    };
    // 商品图片路径处理
    const showSugerPhoto = (row) => {
      let imgId = row.no;
      if (imgId) {
        return require(`../../../assets/order/spunSugar/goods/${imgId}.png`);
      }
      return imgId;
    };
    // 路由
    const route = useRoute();
    // 商品数据
    const tableData = ref([]);
    // 设备名称
    const equipmentName = ref("");
    // 刚进页面
    onMounted(() => {
      // 加载样式
      // styleUrl("modifyPrice");
      const id = route.query.deviceId || "";
      const name = route.query.name || "";
      if (id) {
        cofficentForm.equipmentId = id;
        equipmentName.value = name;
        getList();
      }
    });
    // 获取商品列表
    const getList = () => {
      selectProducts({ equipmentId: cofficentForm.equipmentId }).then((res) => {
        console.log("res", res);
        const { data } = res.data;
        if (data) {
          if (data.length > 0) {
            // 是否修改状态
            data.forEach((item) => {
              item.isEdit = false;
            });
          }
          tableData.value = data;
        }
      });
    };
    // 修改的价格
    const cofficentForm = reactive({
      equipmentId: "",
      no: "",
      price: "",
      type: "",
    });
    // 自定义货币符号
    const currencySymbol = ref("￥");
    const loginUserStr = localStorage.getItem("loginUser");
    const loginUser = JSON.parse(loginUserStr);
    if (loginUser.currencySymbol) {
      currencySymbol.value = loginUser.currencySymbol;
    } else {
      currencySymbol.value = "￥";
    }

    // 点击修改
    const editClk = (row, idx) => {
      // 如果点击的是修改
      if (idx === 1) {
        tableData.value.forEach((item) => {
          if (row.id !== item.id) {
            item.isEdit = false;
          }
        });
        row.isEdit = !row.isEdit;
      } else {
        cofficentForm.no = row.no;
        cofficentForm.price = row.rmbPrice;
        cofficentForm.type = 0;
        updatePrice(row);
      }
    };
    // 修改价格
    const updatePrice = (row) => {
      console.log("cofficentForm", cofficentForm);
      // 如果点击的是提交
      Api_getUpdaProdPrice(cofficentForm).then((res) => {
        showToast(res.data.message);
        if (row) {
          row.isEdit = false;
        }
        setTimeout(() => {
          getList();
        }, 500);
      });
    };
    return {
      cofficentForm,
      editClk,
      tableData,
      showSugerPhoto,
      kDialogRef,
      noticeClk,
      confirmClk,
      equipmentName,
      currencySymbol,
    };
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@card-bg: #ffffff;
@text-primary: #2d3436;
@border-color: #e4e7ec;

.price-editor {
  background: #f8fafb;
  min-height: 100vh;

  .content-container {
    background: #f7f8fa;
    height: calc(100% - 50px);
    overflow: auto;
    overflow-x: hidden;
  }
}

.device-card {
  background: @card-bg;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin: 10px;
  padding: 16px;

  .device-header {
    display: flex;
    align-items: center;

    .header-indicator {
      width: 3px;
      height: 20px;
      background: @primary-color;
      margin-right: 12px;
      border-radius: 2px;
    }

    .device-name {
      margin: 0;
      font-size: 15px;
      color: #404d74;
      font-weight: 550;

      // 长名称处理
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 70vw;
    }
  }
}

.goods-card {
  background: @card-bg;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 16px;
  margin: 10px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .goods-count {
      color: #666;

      .highlight {
        color: @primary-color;
        font-weight: 500;
        margin: 0 4px;
      }
    }

    .batch-btn {
      height: 32px;
      padding: 0 16px;
      font-size: 13px;
    }
  }
}

.goods-list {
  .goods-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid @border-color;

    &:last-child {
      border-bottom: none;
    }

    .goods-info {
      display: flex;
      align-items: center;
      flex: 1;

      .goods-image {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        margin-right: 12px;
      }

      .goods-name {
        font-size: 14px;
        color: @text-primary;
        max-width: 200px;
        .ellipsis();
      }
    }

    .price-action {
      display: flex;
      align-items: center;
      gap: 12px;

      .price-input {
        width: 120px;
        background: #f8fafb;
        border-radius: 6px;
        padding: 4px 12px;

        :deep(.van-field__control) {
          text-align: right;
        }
      }

      .currency-symbol {
        color: @primary-color;
        margin-left: 4px;
      }

      .price-display {
        color: #df5e4c;
        font-size: 15px;
      }

      .action-icon {
        color: @primary-color;
        font-size: 20px;
        padding: 8px;
      }
    }
  }
}

.batch-field {
  :deep(.van-field__label) {
    width: 100px;
  }
}

.ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .goods-card {
    padding: 12px;

    .goods-item {
      .goods-name {
        max-width: 160px;
      }
    }
  }
}

:deep(.van-image__img) {
  object-fit: contain !important;
}
</style>