fix：添加产品功能

App.vue

@@ -75,7 +75,8 @@
 			// 	// 	url: "/pages/my/index"
 			// 	// });
 			// });
-			// uni.redirectTo({
+			// uni.redirectTo({
+				
 			// 	url: "/pages/my/index"
 			// });
 

commit/product.js

@@ -227,4 +227,82 @@ export function Addseckill(data) {
          data,
          apiType
      })
-}
+}
+
+
+
+
+/** 
+ * 文件上传
+*/
+
+export function uploadFile(data) {
+    const params = new FormData()
+    params.append('file', data.file)
+     return myRequestPhp({
+         url: `${pre}mer/upload/image/0/file`,
+         method: 'POST',
+         contentType: "application/x-www-form-urlencoded",
+         data: params,
+         apiType
+     })
+}
+
+/**
+ * 获取商品分类
+ */
+export function getGoodsClass(data) {
+    return myRequestPhp({
+        url: `${pre}mer/store/category/select`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
+/**
+ * 品牌选择
+ */
+export function getBrandSelect(data) {
+    return myRequestPhp({
+        url: `${pre}mer/store/category/brandlist`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
+
+
+/**
+ * @description 商品列表 -- 运费模板筛选
+ */
+export function shippingListApi(data) {
+    return myRequestPhp({
+        url: `${pre}mer/store/shipping/list`,
+        method: 'GET',
+        data,
+        apiType
+    })
+}
+
+/**
+ * 添加商品
+ */
+export function addProduct(data) {
+    return myRequestPhp({
+        url: `${pre}mer/store/product/create`,
+        method: 'POST',
+        data,
+        apiType
+    })
+}
+
+// mer/store/shipping/list
+
+
+// /**
+//  * @description 配置状态
+//  */
+// export function productConfigApi() {
+//     return request.get(`store/product/config`)
+// }
+

commit/requestPhp.js

@@ -1,20 +1,22 @@
 
 
 import {getPhpToken} from "../utils/readAppInfo"
-let baseURL = 'http://testshop.hxxfb.com/'
+export let baseURL = 'http://testshop.hxxfb.com/'
 // 请求超出时间
 const timeout = 50000
-
+// const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDM3MTM1NSwibmJmIjoxNzQwMzcxMzU1LCJleHAiOjE3NTExNzEzNTUsImp0aSI6WzI5OCwibWVyIl19.j2f8VwdwWY4zBpcijHntzUZ9YUms2SxChaVsYf7KnPs"
+// const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDM3MTM1NSwibmJmIjoxNzQwMzcxMzU1LCJleHAiOjE3NTExNzEzNTUsImp0aSI6WzI5OCwibWVyIl19.j2f8VwdwWY4zBpcijHntzUZ9YUms2SxChaVsYf7KnPs"
+// const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDU3MTQ0OCwibmJmIjoxNzQwNTcxNDQ4LCJleHAiOjE3NTEzNzE0NDgsImp0aSI6WzM1NCwibWVyIl19.PVwYv71Gq9RxTxQclUoFMgc8cZt0ju3zQkxk6SGCQJw"
+export const phpToken = uni.getStorageSync('phpToken') || ""
 // 需要修改token，和根据实际修改请求头
 export function myRequestPhp(options) {
 	let url = options.url;
 	let method = options.method || "get";
 	let data = options.data || {};
+	let contentType = options.contentType || "application/json;charset=UTF-8";
 	let header = {
-		'Content-Type': 'application/json;charset=UTF-8',
-		// 'X-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDM3MTM1NSwibmJmIjoxNzQwMzcxMzU1LCJleHAiOjE3NTExNzEzNTUsImp0aSI6WzI5OCwibWVyIl19.j2f8VwdwWY4zBpcijHntzUZ9YUms2SxChaVsYf7KnPs',
-		"X-Token": uni.getStorageSync('phpToken'), //token
-		// "X-Token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuaHh4ZmIuY29tIiwiYXVkIjoiYXBpLmh4eGZiLmNvbSIsImlhdCI6MTc0MDU3MTQ0OCwibmJmIjoxNzQwNTcxNDQ4LCJleHAiOjE3NTEzNzE0NDgsImp0aSI6WzM1NCwibWVyIl19.PVwYv71Gq9RxTxQclUoFMgc8cZt0ju3zQkxk6SGCQJw",
+		'Content-Type': contentType,
+		"X-Token": phpToken,
 		...options.header
 	}
 	return new Promise((resolve, reject) => {

components/editor.vue

@@ -0,0 +1,385 @@
+<template>
+  <view class="container">
+    <view class="page-body">
+      <view class="wrapper">
+        <view
+          class="toolbar"
+          @tap="format"
+          style="height: 120px; overflow-y: auto"
+        >
+          <view
+            :class="formats.bold ? 'ql-active' : ''"
+            class="iconfont icon-zitijiacu"
+            data-name="bold"
+          >
+          </view>
+          <view
+            :class="formats.italic ? 'ql-active' : ''"
+            class="iconfont icon-zitixieti"
+            data-name="italic"
+          >
+          </view>
+          <view
+            :class="formats.underline ? 'ql-active' : ''"
+            class="iconfont icon-zitixiahuaxian"
+            data-name="underline"
+          ></view>
+          <view
+            :class="formats.strike ? 'ql-active' : ''"
+            class="iconfont icon-zitishanchuxian"
+            data-name="strike"
+          ></view>
+          <view
+            :class="formats.align === 'left' ? 'ql-active' : ''"
+            class="iconfont icon-zuoduiqi"
+            data-name="align"
+            data-value="left"
+          ></view>
+          <view
+            :class="formats.align === 'center' ? 'ql-active' : ''"
+            class="iconfont icon-juzhongduiqi"
+            data-name="align"
+            data-value="center"
+          ></view>
+          <view
+            :class="formats.align === 'right' ? 'ql-active' : ''"
+            class="iconfont icon-youduiqi"
+            data-name="align"
+            data-value="right"
+          ></view>
+          <view
+            :class="formats.align === 'justify' ? 'ql-active' : ''"
+            class="iconfont icon-zuoyouduiqi"
+            data-name="align"
+            data-value="justify"
+          ></view>
+          <view
+            :class="formats.lineHeight ? 'ql-active' : ''"
+            class="iconfont icon-line-height"
+            data-name="lineHeight"
+            data-value="2"
+          ></view>
+          <view
+            :class="formats.letterSpacing ? 'ql-active' : ''"
+            class="iconfont icon-Character-Spacing"
+            data-name="letterSpacing"
+            data-value="2em"
+          ></view>
+          <view
+            :class="formats.marginTop ? 'ql-active' : ''"
+            class="iconfont icon-722bianjiqi_duanqianju"
+            data-name="marginTop"
+            data-value="20px"
+          ></view>
+          <view
+            :class="formats.previewarginBottom ? 'ql-active' : ''"
+            class="iconfont icon-723bianjiqi_duanhouju"
+            data-name="marginBottom"
+            data-value="20px"
+          ></view>
+          <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
+          <view
+            :class="formats.fontFamily ? 'ql-active' : ''"
+            class="iconfont icon-font"
+            data-name="fontFamily"
+            data-value="Pacifico"
+          ></view>
+          <view
+            :class="formats.fontSize === '24px' ? 'ql-active' : ''"
+            class="iconfont icon-fontsize"
+            data-name="fontSize"
+            data-value="24px"
+          ></view>
+
+          <view
+            :class="formats.color === '#0000ff' ? 'ql-active' : ''"
+            class="iconfont icon-text_color"
+            data-name="color"
+            data-value="#0000ff"
+          ></view>
+          <view
+            :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
+            class="iconfont icon-fontbgcolor"
+            data-name="backgroundColor"
+            data-value="#00ff00"
+          ></view>
+          <view class="iconfont icon-date" @tap="insertDate"></view>
+          <view
+            class="iconfont icon--checklist"
+            data-name="list"
+            data-value="check"
+          ></view>
+          <view
+            :class="formats.list === 'ordered' ? 'ql-active' : ''"
+            class="iconfont icon-youxupailie"
+            data-name="list"
+            data-value="ordered"
+          ></view>
+          <view
+            :class="formats.list === 'bullet' ? 'ql-active' : ''"
+            class="iconfont icon-wuxupailie"
+            data-name="list"
+            data-value="bullet"
+          ></view>
+          <view class="iconfont icon-undo" @tap="undo"></view>
+          <view class="iconfont icon-redo" @tap="redo"></view>
+          <view
+            class="iconfont icon-outdent"
+            data-name="indent"
+            data-value="-1"
+          ></view>
+          <view
+            class="iconfont icon-indent"
+            data-name="indent"
+            data-value="+1"
+          ></view>
+          <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
+          <view class="iconfont icon-charutupian" @tap="insertImage"></view>
+          <view
+            :class="formats.header === 1 ? 'ql-active' : ''"
+            class="iconfont icon-format-header-1"
+            data-name="header"
+            :data-value="1"
+          ></view>
+          <view
+            :class="formats.script === 'sub' ? 'ql-active' : ''"
+            class="iconfont icon-zitixiabiao"
+            data-name="script"
+            data-value="sub"
+          ></view>
+          <view
+            :class="formats.script === 'super' ? 'ql-active' : ''"
+            class="iconfont icon-zitishangbiao"
+            data-name="script"
+            data-value="super"
+          ></view>
+          <view class="iconfont icon-shanchu" @tap="clear"></view>
+          <view
+            :class="formats.direction === 'rtl' ? 'ql-active' : ''"
+            class="iconfont icon-direction-rtl"
+            data-name="direction"
+            data-value="rtl"
+          ></view>
+        </view>
+        <view class="editor-wrapper">
+          <editor
+            id="editor"
+            class="ql-container"
+            :placeholder="placeholder"
+            @statuschange="onStatusChange"
+            :show-img-resize="true"
+            @ready="onEditorReady"
+            @input="getCtx"
+          ></editor>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { baseURL, phpToken } from "@/commit/requestPhp.js";
+export default {
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+	placeholder:{
+		type:String,
+		default:"开始输入..."
+	},
+	readOnly:{
+		type:Boolean,
+		default:false
+	
+	}
+  },
+  data() {
+    return {
+      richText: "",
+      formats: {},
+    };
+  },
+
+  methods: {
+    readOnlyChange() {
+      this.readOnly = !this.readOnly;
+    },
+    onEditorReady() {
+      // 富文本节点渲染完成
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select("#editor")
+        .context((res) => {
+          this.editorCtx = res.context;
+          if (this.value) {
+            this.editorCtx.setContents({
+              html: this.value,
+            });
+          }
+        })
+        .exec(this);
+    },
+    // 失去焦点时，获取富文本的内容
+    getCtx(e) {
+      this.richText = e.detail.html;
+      this.$emit("input", e.detail.html);
+    },
+    undo() {
+      this.editorCtx.undo();
+    },
+    redo() {
+      this.editorCtx.redo();
+    },
+    format(e) {
+      let { name, value } = e.target.dataset;
+      if (!name) return;
+      // console.log('format', name, value)
+      this.editorCtx.format(name, value);
+    },
+    onStatusChange(e) {
+      const formats = e.detail;
+      this.formats = formats;
+    },
+    insertDivider() {
+      this.editorCtx.insertDivider({
+        success: function () {
+          console.log("insert divider success");
+        },
+      });
+    },
+    clear() {
+      this.editorCtx.clear({
+        success: function (res) {
+          console.log("clear success");
+        },
+      });
+    },
+    removeFormat() {
+      this.editorCtx.removeFormat();
+    },
+    insertDate() {
+      const date = new Date();
+      const formatDate = `${date.getFullYear()}/${
+        date.getMonth() + 1
+      }/${date.getDate()}`;
+      this.editorCtx.insertText({
+        text: formatDate,
+      });
+    },
+    insertImage() {
+      var that = this;
+      uni.chooseImage({
+        async success(res) {
+          console.log("选择图片成功");
+          console.log(res);
+          const tempFiles = res.tempFiles;
+          const data = await that.uploadFileData(tempFiles[0]);
+          that.editorCtx.insertImage({
+            width: "50%",
+            height: "20%",
+            src: data,
+          });
+        },
+      });
+    },
+    async uploadFileData(files) {
+      uni.showLoading({
+        title: "上传中",
+        mask: true,
+      });
+      const uploadUrl = `${baseURL}/mer/upload/image/0/file`;
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: uploadUrl,
+          file: files,
+          name: "file",
+          header: {
+            "X-Token": phpToken,
+            // 'Content-Type': "application/json;charset=UTF-8",
+          },
+          success: (res) => {
+            const data = JSON.parse(res.data);
+            if (data.status === 200) {
+              uni.showToast({
+                title: "上传成功",
+                icon: "success",
+              });
+              this.paths = data.data.src || "";
+            } else {
+              uni.showToast({
+                title: "上传失败",
+                icon: "error",
+              });
+              this.paths = "";
+            }
+            resolve(this.paths);
+            console.log("上传成功", JSON.parse(res.data));
+            uni.hideLoading();
+            uni.hideToast();
+          },
+          fail: (err) => {
+            console.error("上传失败", err);
+            this.paths = "";
+            resolve(this.paths);
+            uni.hideLoading();
+            uni.hideToast();
+          },
+          complete: () => {
+            uni.hideLoading();
+            uni.hideToast();
+          },
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style>
+@import "./editor-icon.css";
+
+.page-body {
+  height: calc(100vh - var(--window-top) - var(--status-bar-height));
+}
+
+.wrapper {
+  height: 100%;
+}
+
+.editor-wrapper {
+  height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
+  background: #eee;
+}
+
+.iconfont {
+  display: inline-block;
+  padding: 8px 8px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.toolbar {
+  box-sizing: border-box;
+  border-bottom: 0;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+}
+
+.ql-container {
+  box-sizing: border-box;
+  padding: 12px 15px;
+  width: 100%;
+  min-height: 30vh;
+  height: 100%;
+  margin-top: 20px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.ql-active {
+  color: #06c;
+}
+</style>

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@dcloudio/uni-ui": "^1.5.7",
+    "@wangeditor/editor-for-vue": "^1.0.2",
     "base-64": "^1.0.0",
     "crypto-js": "^4.1.1",
     "easemob-websdk": "^4.6.0",

pages/onlineproductselection/components/listCard/ActionButtons.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="action-buttons">
+    <view class="checkbox-item">
+      <checkbox v-model="isAllChecked" />全选
+    </view>
+    <button type="primary" size="mini" @click="cancelAllChecked">取消全选</button>
+    <button type="default" size="mini" @click="batchAddToManagement">批量加入商品管理</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isAllChecked: false
+    };
+  },
+  methods: {
+    cancelAllChecked() {
+      this.isAllChecked = false;
+      // 这里实现取消全选的逻辑，例如取消所有商品的选中状态
+      console.log('取消全选');
+    },
+    batchAddToManagement() {
+      // 这里实现批量加入商品管理的逻辑，例如提交选中的商品数据
+      console.log('执行批量加入商品管理');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.action-buttons {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-right: 20rpx;
+  font-size: 28rpx;
+}
+</style>

pages/onlineproductselection/components/listCard/ProductCardOnline.vue

@@ -0,0 +1,128 @@
+<template>
+  <view class="product-card">
+    <view class="product-cover">
+      <image
+        :src="product.image"
+        @error="handleError"
+        mode="scaleToFill"
+        class="product-img"
+        v-if="!isError && product.image"
+      />
+      <image
+        src="/static/images/new_ui/kongtu.png"
+        mode="scaleToFill"
+        class="product-img"
+        v-else
+      />
+
+      <!-- <checkbox v-model="product.isChecked" class="product-checkbox" /> -->
+    </view>
+    <view class="product-info">
+      <view class="product-title">{{ product.title }}</view>
+      <view class="product-price">
+        销售价：{{ product.salePrice }} 
+      </view>
+       <view class="product-price">
+        养老金：{{ product.pension }}
+      </view>
+      <view class="product-profit">创客利润：{{ product.creatorProfit }}</view>
+      <view class="product-status">状态：{{ product.status }}</view>
+      <view class="product-desc">{{ product.description }}</view>
+      <view class="product-actions">
+        <button type="primary"  @click="viewDetails">商品详情</button>
+        <button type="primary" class="isjiaru"  @click="addToInventory " >加入商品库</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    product: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isError: false,
+    };
+  },
+  methods: {
+    handleError() {
+      this.isError = true;
+    },
+    viewDetails() {
+      // 这里实现查看商品详情的逻辑，例如跳转页面
+      console.log("查看商品详情", this.product);
+    },
+    addToInventory() {
+      // 这里实现加入商品库的逻辑，例如提交数据
+      console.log("加入商品库", this.product);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.product-card {
+  width: calc(100% - 52rpx);
+  background-color: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+  margin-bottom: 20rpx;
+  overflow: hidden;
+  border: 2rpx solid red;
+}
+.product-cover {
+  position: relative;
+  height: 210rpx;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.product-checkbox {
+  position: absolute;
+  top: 10rpx;
+  right: 10rpx;
+}
+.product-info {
+  padding: 15rpx;
+}
+.product-title {
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+}
+.product-price,
+.product-profit,
+.product-status {
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 5rpx;
+}
+.product-desc {
+  font-size: 22rpx;
+  color: #999;
+  margin-bottom: 10rpx;
+}
+.product-actions  {
+  margin-right: 5rpx;
+  width: 100%;
+  display: flex;
+  gap: 26rpx;
+  button{
+//    width: 45%;
+   width: 100%;
+   background: #007aff;
+  color: white;
+
+  }
+  .isjiaru{
+    background: transparent;
+    color: #ff3c00;
+  }
+}
+</style>

pages/onlineproductselection/components/listCard/Statistics.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="content" @touchmove.prevent>
+    <view class="nav">
+      <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
+      <scroll-view
+        @touchmove.stop
+        class="tab-scroll"
+        scroll-x="true"
+        scroll-with-animation
+        :scroll-left="scrollLeft"
+      >
+        <view class="tab-scroll_box">
+          <!-- 选项卡类别列表 -->
+          <view
+            class="tab-scroll_item"
+            v-for="(item, index) in category"
+            :key="index"
+            :class="{ active: isActive == index }"
+            @click="chenked(index, item)"
+          >
+            <text>{{ item.title }}</text
+            ><text v-if="item.count > 0">({{ item.count || 0 }})</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    category: {
+      type: Array,
+      default: () => [
+        {
+          type: 0,
+          title: "全部",
+          count: 0,
+        },
+        {
+          type: 1,
+          title: "已加入商品管理",
+          count: 0,
+        },
+        {
+          type: 2,
+          title: "未加入商品管理",
+          count: 0,
+        },
+      ],
+    },
+    isShowNumber: {
+      type: Boolean,
+      default: true,
+    },
+    curruntActive: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  watch: {
+    // swiper与上面选项卡联动
+    currentindex(newval) {
+      this.isActive = newval;
+      this.scrollLeft = 0;
+      // 滑动swiper后，每个选项距离其父元素最左侧的距离
+      for (let i = 0; i < newval - 1; i++) {
+        this.scrollLeft += this.category[i].width;
+      }
+    },
+  },
+  data() {
+    return {
+      isActive: 0,
+      index: 0,
+      currentindex: 0,
+      // category:[
+      // 	{
+      // 		id:1,
+      // 		name:'选项',
+      // 	},
+      // 	{
+      // 		id:2,
+      // 		name:'选项卡二',
+      // 	},
+      // 	{
+      // 		id:3,
+      // 		name:'选项卡三',
+      // 	},
+      // 	{
+      // 		id:4,
+      // 		name:'选项卡四',
+      // 	},
+      // 	{
+      // 		id:5,
+      // 		name:'选项卡五',
+      // 	},
+      // 	{
+      // 		id:6,
+      // 		name:'选项卡六',
+      // 	},
+      // ],
+      contentScrollW: 0, // 导航区宽度
+      scrollLeft: 0, // 横向滚动条位置
+      fullHeight: "",
+    };
+  },
+  mounted() {
+    var that = this;
+    this.isActive = this.curruntActive;
+    //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
+    uni.getSystemInfo({
+      success: function (res) {
+        that.fullHeight = "height:" + res.windowHeight + "px";
+      },
+    });
+    // 获取标题区域宽度，和每个子元素节点的宽度
+    this.getScrollW();
+  },
+  methods: {
+    // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
+    getScrollW() {
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select(".tab-scroll")
+        .boundingClientRect((data) => {
+          this.contentScrollW = data.width;
+        })
+        .exec();
+      query
+        .selectAll(".tab-scroll_item")
+        .boundingClientRect((data) => {
+          let dataLen = data.length;
+          for (let i = 0; i < dataLen; i++) {
+            this.category[i].left = data[i].left;
+            this.category[i].width = data[i].width;
+          }
+        })
+        .exec();
+    },
+    // 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
+    chenked(index, item) {
+      this.isActive = index;
+      this.scrollLeft = 0;
+      for (let i = 0; i < index - 1; i++) {
+        this.scrollLeft += this.category[i].width;
+      }
+      this.$emit("tabs", { index, item });
+    },
+    // swiper滑动时，获取其索引，也就是第几个
+    change(e) {
+      const { current } = e.detail;
+      this.currentindex = current;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+  .nav {
+    background-color: #fff;
+    // position: fixed;
+    z-index: 99;
+    width: 100%;
+    align-items: center;
+    // min-height: 40rpx;
+    .tab-scroll {
+      flex: 1;
+      overflow: hidden;
+      box-sizing: border-box;
+      padding-left: 30rpx;
+      padding-right: 30rpx;
+      .tab-scroll_box {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        box-sizing: border-box;
+        // height: 100rpx;
+        .tab-scroll_item {
+          line-height: 80rpx;
+          margin-right: 35rpx;
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          font-size: 30rpx;
+          padding-top: 10rpx;
+          color: #333;
+        }
+      }
+    }
+  }
+  .swiper-content {
+    padding-top: 120rpx;
+    // flex: 1;
+    .swiperitem-content {
+      background-color: #ffffff;
+      .nav_item {
+        background-color: #ffffff;
+        padding: 20rpx 40rpx 0rpx 40rpx;
+      }
+    }
+  }
+}
+.active {
+  position: relative;
+  color: #1f7cff !important;
+  font-weight: 600;
+}
+.active::after {
+  content: "";
+  position: absolute;
+  width: 50rpx;
+  height: 8rpx;
+  background-color: #1f7cff;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  margin: auto;
+  border-radius: 8rpx;
+  margin-top: 10rpx;
+  transition: all 0.3s;
+}
+/* 隐藏滚动条，但依旧具备可以滚动的功能 */
+/deep/.uni-scroll-view::-webkit-scrollbar {
+  display: none;
+}
+</style>

pages/onlineproductselection/onlineproductselection.vue

@@ -5,54 +5,124 @@
         headerTitle="在线选品列表"
         @headerJump="headerJump"
       ></headersVue>
-	      <view class="headers-box">
-      <searchVue
-        placeholder="请输入商品名称"
-        @search="onHandleSearch"
-      ></searchVue>
-      <!-- <tablist
-        class="mt"
-        :category="category"
-        :curruntActive="curruntActive"
-        @tabs="tabsHandleClick"
-      ></tablist> -->
+      <view class="headers-box">
+        <searchVue
+          placeholder="请输入商品名称"
+          @search="onHandleSearch"
+        ></searchVue>
+        <Statistics />
+        <CategoryNav />
+        <!-- <ActionButtons class="mt"/> -->
+        <!-- <view class="sort-buttons">
+      <button type="default" size="mini" @click="sortByPrice">{{ sortBy === 'price'? '销售价 ▲' : '销售价 ▼' }}</button>
+      <button type="default" size="mini" @click="sortByProfit">{{ sortBy === 'profit'? '创客利润 ▲' : '创客利润 ▼' }}</button>
+    </view> -->
+      </view>
     </view>
+    <view class="online-content">
+      <view class="product-list">
+        <ProductCard
+          :product="product"
+          v-for="(product, index) in filteredProducts"
+          :key="index"
+        />
+      </view>
+      <view
+        class=""
+        style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
+      >
+        —— 已经到最底部了哦 ——
+      </view>
     </view>
-	<view class="online-content">
-		<button @click="goJump">详情</button>
-	</view>
   </view>
 </template>
 
 <script>
 import headersVue from "../../shop/components/headers/headers.vue";
 import searchVue from "../../shop/commodity/components/search/search.vue";
+import CategoryNav from "./components/listCard/CategoryNav.vue";
+import Statistics from "./components/listCard/Statistics.vue";
+import ActionButtons from "./components/listCard/ActionButtons.vue";
+import ProductCard from "./components/listCard/ProductCardOnline.vue";
 export default {
   components: {
     headersVue,
-	searchVue
+    searchVue,
+    CategoryNav,
+    Statistics,
+    ActionButtons,
+    ProductCard,
   },
   data() {
     return {
-		   curruntActive: 0,
+      curruntActive: 0,
       category: [],
-	};
+      list: [],
+      page: 1,
+      limit: 10,
+      tihsi: "",
+      is_panudn: true,
+      products: [
+        {
+          imageUrl: "商品图片地址1",
+          title: "DT15100心相印茶语丝享100抽*20包三层塑装纸面巾",
+          salePrice: 43.06,
+          pension: 0.0,
+          creatorProfit: 7.17,
+          status: "正常",
+          description: "心相印经典纸巾产品",
+          isChecked: false,
+        },
+        {
+          imageUrl: "商品图片地址2",
+          title: "测试商品 请勿下单",
+          salePrice: 72.88,
+          pension: 0.0,
+          creatorProfit: 12.14,
+          status: "正常",
+          description: "伊利测试商品 不会发货",
+          isChecked: false,
+        },
+      ],
+      totalCount: 2,
+      joinedCount: 0,
+      notJoinedCount: 2,
+      sortBy: "",
+      searchValue: "",
+    };
+  },
+  methods: {
+    headerJump() {
+      uni.switchTab({ url: "../../shop/productManagementModule/index" });
+    },
+    goJump() {
+      console.log("fff");
+      uni.redirectTo({ url: "./onlineDetail" });
+    },
+    onHandleSearch(val) {
+      console.log(val);
+    },
+    tabsHandleClick() {},
+    sortByPrice() {
+      this.sortBy = this.sortBy === "price" ? "" : "price";
+    },
+    sortByProfit() {
+      this.sortBy = this.sortBy === "profit" ? "" : "profit";
+    },
+  },
+  computed: {
+    filteredProducts() {
+      let filtered = this.products.filter((product) => {
+        return product.title.includes(this.searchValue);
+      });
+      if (this.sortBy === "price") {
+        return filtered.sort((a, b) => a.salePrice - b.salePrice);
+      } else if (this.sortBy === "profit") {
+        return filtered.sort((a, b) => a.creatorProfit - b.creatorProfit);
+      }
+      return filtered;
+    },
   },
-  methods:{
-	headerJump(){
-		uni.switchTab({ url: '../../shop/productManagementModule/index' })
-	},
-	goJump(){
-		console.log("fff")
-		uni.redirectTo({ url: './onlineDetail' })
-	},
-	onHandleSearch(val){
-
-	},
-	tabsHandleClick(){
-
-	}
-  }
 };
 </script>
 <style>
@@ -62,17 +132,44 @@ page {
 }
 </style>
 <style lang="scss" scoped>
-.online-class-wrapper{
-	height: 100%;
-	.headers{
-		border: 2rpx solid red;
-		width: 100%;
-		height: 100rpx;
-		box-sizing: border-box;
-
-	}
-	.online-content{
-
-	}
+.online-class-wrapper {
+  height: 100%;
+  .headers {
+    width: 100%;
+    box-sizing: border-box;
+    .headers-box {
+      margin-top: 95rpx;
+      position: fixed;
+      top: 0rpx;
+      z-index: 666;
+    }
+  }
+  .online-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+    margin-top: 450rpx;
+    box-sizing: border-box;
+    padding-bottom: 60rpx;
+	width: 100%;
+    .product-list {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+    }
+  }
+}
+.mt {
+  margin-top: 30rpx;
+  padding: 0 15rpx;
+}
+.sort-buttons {
+  display: flex;
+  //   align-items: center;
+  margin-bottom: 20rpx;
+}
+.sort-buttons button {
+  margin-right: 10rpx;
 }
 </style>

shop/commodity/components/search/search.vue

@@ -6,7 +6,7 @@
 		          referrerpolicy="no-referrer"
 		          src="/static/images/new_ui/search_icon_blod.png"
 		        />
-				<input class="search__input" v-model="searchValue" @input="haandleSearchInput" type="text" placeholder="请输入订单号/收货人/联系方式/提货码" />
+				<input class="search__input" v-model="searchValue" @input="haandleSearchInput" type="text" :placeholder="placeholder" />
 		        <button class="search__btn" @click="haandleSearch">
 		          搜索
 		        </button>
@@ -16,6 +16,12 @@
 
 <script>
 	export default {
+		props: {
+			placeholder: {
+				type: String,
+				default: "请输入订单号/收货人/联系方式/提货码",
+			},
+		},
 		data() {
 			return {
 				searchValue:""

shop/productManagementModule/addProduct.vue

@@ -7,23 +7,19 @@
       </view>
     </view>
     <view class="content-wrrapper">
-      <uploadVue formItemTitle="商品封面" :maxLimit="1"></uploadVue>
-      <uploadVue formItemTitle="商品轮播图"></uploadVue>
-      <view class="business-box">
-        <view class="business-box-txt">商品详情 </view>
-        <view class="business-box--arae">
-          <textarea
-            @blur="bindTextAreaBlur"
-            :maxlength="-1"
-            auto-height
-            class="araebox"
-          />
-        </view>
-        <uploadVue :maxLimit="200" class="upload-boxx"></uploadVue>
-      </view>
+      <uploadVue
+        formItemTitle="商品封面"
+        :maxLimit="1"
+        @changeFiles="changeFilesfengmian"
+      ></uploadVue>
+      <uploadVue
+        formItemTitle="商品轮播图"
+        @changeFiles="changeFileslunbotu"
+      ></uploadVue>
+
       <view class="form-box">
         <view class="form-item-box">
-          <view class="form-box-txt mustBox">商户商品分类</view>
+          <view class="form-box-txt">商户商品分类</view>
           <view
             class="form-box--arae"
             @click="handleClick"
@@ -33,7 +29,23 @@
           </view>
           <uni-icons
             type="right"
-            size="30"
+            size="26"
+            class="icon-boxx"
+            color="#333"
+          ></uni-icons>
+        </view>
+        <view class="form-item-box">
+          <view class="form-box-txt">平台商品分类</view>
+          <view
+            class="form-box--arae"
+            @click="handleClickpingtai"
+            :class="[pingtaifeilei.name == '' ? 'classification' : '']"
+          >
+            {{ pingtaifeilei.name || "平台商品分类" }}
+          </view>
+          <uni-icons
+            type="right"
+            size="26"
             class="icon-boxx"
             color="#333"
           ></uni-icons>
@@ -43,52 +55,99 @@
           <view class="form-box--arae">
             <input
               type="text"
-              v-model="formData.businessName"
+              v-model="formData.store_name"
               placeholder="请输入商品名称"
+              :adjust-position="false"
               class="placeholder-class"
             />
           </view>
         </view>
-      </view>
-      <view class="form-box mr-t">
         <view class="form-item-box">
-          <view class="form-box-txt mustBox">商品售价</view>
+          <view class="form-box-txt mustBox">商品单位</view>
           <view class="form-box--arae">
             <input
               type="text"
-              v-model="formData.businessPrice"
-              placeholder="请输入商品售价"
+              v-model="formData.unit_name"
+              placeholder="请输入单位"
+              :adjust-position="false"
               class="placeholder-class"
             />
           </view>
         </view>
         <view class="form-item-box">
-          <view class="form-box-txt mustBox">商品原价</view>
+          <view class="form-box-txt">品牌选择</view>
           <view class="form-box--arae">
-            <input
-              type="text"
-              v-model="formData.businessOriginalPrice"
-              placeholder="请输入商品原价"
-              class="placeholder-class"
-            />
+            <uni-data-select
+              v-model="formData.brand_id"
+              placeholder="请选择品牌"
+              :localdata="brandData"
+              :clear="true"
+            ></uni-data-select>
           </view>
         </view>
         <view class="form-item-box">
-          <view class="form-box-txt mustBox">商品库存</view>
+          <view class="form-box-txt mustBox">运费模板</view>
           <view class="form-box--arae">
-            <input
-              type="text"
-              v-model="formData.businessStock"
-              placeholder="请输入商品库存"
-              class="placeholder-class"
-            />
+            <uni-data-select
+              v-model="formData.temp_id"
+              placeholder="请选择运费模板"
+              :localdata="shippingList"
+              :clear="true"
+            ></uni-data-select>
           </view>
         </view>
+        <view v-if="shippingList.length == 0" class="tips-messge">运费模板为空，请在后台添加运费模板</view>
+      </view>
+      <view
+        class="form-box mr-t"
+        v-for="(item, index) in attrValue"
+        :key="index"
+      >
+        <view
+          class="form-item-box"
+          v-for="(its, idx) in item.modules"
+          :key="idx"
+          v-if="its.isshow"
+        >
+          <template v-if="its.isshow">
+            <view class="form-box-txt" :class="[its.ismust ? 'mustBox' : '']">{{
+              its.title
+            }}</view>
+            <view class="form-box--arae">
+              <input
+                v-if="its.form_type == 'input'"
+                :type="its.type"
+                v-model="item.modules[idx].value"
+                :adjust-position="false"
+                :placeholder="`请输入${its.title}`"
+                class="placeholder-class"
+              />
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="business-box pb15">
+        <view class="business-box-txt">商品简介 </view>
+        <view class="business-box--arae">
+          <textarea
+            @blur="bindTextAreaBlur"
+            v-model="formData.store_info"
+            placeholder="输入商品简介"
+            :maxlength="-1"
+            :adjust-position="false"
+            auto-height
+            class="araebox"
+          />
+        </view>
+      </view>
+      <view class="business-box pb15">
+        <view class="business-box-txt">商品详情 </view>
+        <customEditor :value="formData.content" @input="changeTextHandle"/>
       </view>
     </view>
     <view class="btn-list">
-      <view class="btn quxiao"> 保存草稿 </view>
-      <view class="btn primary"> 发布商品 </view>
+      <!-- <view class="btn quxiao"> 保存草稿 </view> -->
+      <view class="btn primary" @click="handleSubmit"> 发布商品 </view>
     </view>
     <cascadePicker
       ref="picker"
@@ -97,6 +156,13 @@
       :data="cascadePicker.data"
       @callback="pickerCallback"
     />
+    <cascadePicker
+      ref="pickerpingtai"
+      :title="cascadepintaiPicker.title"
+      :layer="cascadepintaiPicker.layer"
+      :data="cascadepintaiPicker.data"
+      @callback="pickerCallbackpintai"
+    />
   </view>
 </template>
 
@@ -106,39 +172,225 @@ import headersVue from "../components/headers/headers.vue";
 import uploadVue from "./components/upload.vue";
 import cascadePicker from "../components/cascade-picker.vue";
 import { reNameKeys } from "@/utils/index";
-import { handleData } from "./mockDataPro";
+import customEditor from "@/components/editor.vue";
+import {
+  getGoodsClass,
+  getBrandSelect,
+  shippingListApi,
+  getGoodsClassCategory,
+  uploadFile,
+  addProduct,
+} from "@/commit/product.js";
 export default {
   components: {
     headersVue,
     uploadVue,
     cascadePicker,
+    customEditor,
   },
   data() {
     return {
-      cascadeData: [],
+      cascadeData: [], //商户商品分类
+      pingtaifeiData: [], //平台商品分类：
       cascadePicker: {
-        title: "选择分类",
+        title: "选择商户商品分类",
+        layer: null,
+        data: [],
+      },
+      cascadepintaiPicker: {
+        title: "选择平台商品分类",
         layer: null,
         data: [],
       },
       classification: {
+        //商户商品分类
+        name: "",
+        id: "",
+      },
+      pingtaifeilei: {
+        //平台商品分类：
         name: "",
         id: "",
       },
       formData: {
-        businessName: "", //商品名称
-        businessPrice: "", //商品售价
-        businessOriginalPrice: "", //商品原价
-        businessStock: "", //商品库存
+        store_name: "", //商品名称
+        mer_cate_id: [], //商户商品分类：
+        cate_id: "", //平台商品分类：
+        brand_id: "", //品牌选择：
+        keyword: "", //商品关键字：
+        unit_name: "", //单位：
+        store_info: "", //商品简介：
+        image: "", //商品封面图：
+        temp_id: "", //运费模板：
+        slider_image: [], //商品轮播图：
+        couponData: [], //优惠券：
+        content: "", //商品详情：
+        sort: 0, //排序：
+        extension_type: "0", //是否单独设置：
+        is_good: 0, //商品推荐：0 1
+        is_gift_bag: 0, //是否包邮：0 1
+        give_coupon_ids: [], //优惠券：
+        // checkboxGroup: [], //商品推荐：0单规格 1 多规格
+        stock_num: "", //商品库存
+        unit_name: "", //单位
+        share_num: "",
+        shares_num: "",
+        share_is: "0",
+        spec_type: "0",
+        type: 1,
+        unit_name: "",
+        attr: [],
+        commission: "",
+        pension: "",
+        pension_is: "0",
+        pension_num: "",
       },
-	  selectData:[]
+      selectData: [],
+      brandData: [],
+      shippingList: [], //运费模板
+      attrValue: [
+        {
+          modules: [
+            {
+              title: "商品售价",
+              props: "price",
+              value: "",
+              type: "digit",
+              ismust: true,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品成本价",
+              value: "",
+              props: "cost",
+              type: "digit",
+              ismust: true,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品原价",
+              value: "",
+              props: "ot_price",
+              type: "digit",
+              ismust: true,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品库存",
+              value: "",
+              props: "stock",
+              type: "number",
+              ismust: true,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品编号",
+              value: "",
+              props: "bar_code",
+              type: "text",
+              ismust: false,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "重量（KG）",
+              value: "",
+              props: "weight",
+              type: "digit",
+              ismust: false,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品体积(m³)",
+              value: "",
+              props: "volume",
+              type: "digit",
+              ismust: false,
+              form_type: "input",
+              isshow: true,
+            },
+            {
+              title: "商品图片",
+              value: "",
+              props: "image",
+              type: "",
+              ismust: false,
+              form_type: "file",
+              isshow: false,
+            },
+          ],
+        },
+      ],
     };
   },
-  onLoad() {},
-  onShow() {
-    this.cascadeData = reNameKeys(handleData);
+  async onLoad() {
+    await this.initData();
   },
+  onShow() {},
   methods: {
+    async initData() {
+      await this.getBrandSelectData();
+      await this.getShippingListData();
+      await this.getGoodsClassData();
+      await this.getGoodsClassCategoryData();
+    },
+    async getGoodsClassData() {
+      try {
+        const res = await getGoodsClass();
+        if (res.data.status == 200) {
+          const data = res.data.data || [];
+          this.cascadeData = reNameKeys(data);
+        }
+      } catch (error) {}
+    },
+    async getBrandSelectData() {
+      //  { value: 0, text: "篮球" },
+      try {
+        const res = await getBrandSelect();
+        if (res.data.status == 200) {
+          const data = res.data.data || [];
+          console.log(data, "品牌数据");
+          this.brandData = data.map((item) => {
+            return {
+              value: item.brand_id || "",
+              text: item.brand_name || "",
+              ...item,
+            };
+          });
+        }
+      } catch (error) {}
+    },
+    async getShippingListData() {
+      try {
+        const res = await shippingListApi();
+        if (res.data.status == 200) {
+          const data = res.data.data || [];
+          console.log(data, "运费模板");
+          this.shippingList = data.map((item) => {
+            return {
+              value: item.shipping_template_id || "",
+              text: item.name || "",
+              // ...item,
+            };
+          });
+        }
+      } catch (error) {}
+    },
+    async getGoodsClassCategoryData() {
+      try {
+        const res = await getGoodsClassCategory();
+        if (res.data.status == 200) {
+          const data = res.data.data || [];
+          this.pingtaiData = reNameKeys(data);
+        }
+      } catch (error) {}
+    },
+
     headerJump() {
       uni.redirectTo({
         url: "/shop/productManagementModule/productManagement",
@@ -148,8 +400,9 @@ export default {
     pickerCallback(e) {
       const { data } = e;
       const lastItem = data[data.length - 1];
-	  this.selectData = data || [];
+      this.selectData = data || [];
       console.log(lastItem, "pickerCallback回調");
+      this.formData.mer_cate_id.push(lastItem.id);
       this.classification = lastItem || {};
     },
     handleClick() {
@@ -159,9 +412,150 @@ export default {
         console.log("打开成功");
       });
     },
+    handleClickpingtai() {
+      //pingtai
+      const _this = this;
+      _this.cascadepintaiPicker.data = _this.pingtaiData;
+      _this.$refs.pickerpingtai.open().then(function () {
+        console.log("打开成功");
+      });
+    },
+    pickerCallbackpintai(e) {
+      const { data } = e;
+      const lastItem = data[data.length - 1];
+      this.selectData = data || [];
+      console.log(lastItem, "pickerCallbackpintai");
+      this.pingtaifeilei = lastItem || {};
+    },
     bindTextAreaBlur(e) {
       console.log(e.detail.value);
     },
+ async   handleSubmit() {
+      if (this.formData.image == "") {
+        uni.showToast({
+          title: "请上传商品封面图",
+          icon: "none",
+        });
+        return;
+      }
+      if (this.formData.slider_image.length == 0) {
+        uni.showToast({
+          title: "请上传商品轮播图",
+          icon: "none",
+        });
+        return;
+      }
+      if (this.formData.store_name == "") {
+        uni.showToast({
+          title: "请填写商品名称",
+          icon: "none",
+        });
+        return;
+      }
+      if (this.formData.unit_name == "") {
+        uni.showToast({
+          title: "请填写商品单位",
+          icon: "none",
+        });
+        return;
+      }
+      if(!this.formData.temp_id || this.formData.temp_id == ""){
+        uni.showToast({
+          title: "请选择运费模板",
+          icon: "none",
+        });
+        return
+
+      }
+      const dataList = (this.attrValue[0] && this.attrValue[0].modules) || [];
+      const dataNew = dataList.map((item, index) => {
+        return {
+          tips: dataList[index].title,
+          props: dataList[index].props,
+          isEmpty:
+            dataList[index].ismust &&
+            (dataList[index].value == "" ||
+              dataList[index].value == undefined ||
+              dataList[index].value == null),
+          value: dataList[index].value || "",
+        };
+      });
+      const data = dataNew.some((item) => item.isEmpty);
+      if (data) {
+        uni.showToast({
+          title: "请填写完所有必填项",
+          icon: "none",
+        });
+        return;
+      }
+      if (this.formData.store_info == "") {
+        uni.showToast({
+          title: "请填写商品简介",
+          icon: "none",
+        });
+        return;
+      }
+      let attrValueData = dataNew.map((item, index) => {
+        let parmas = {};
+        if ([item.props] == "image") {
+          Object.assign(parmas, { image: this.formData.image });
+        } else {
+          Object.assign(parmas, { [item.props]: item.value });
+        }
+        return parmas;
+      });
+      // 使用 reduce 方法合并数组中的对象
+      const mergedObject = attrValueData.reduce((acc, current) => {
+        return { ...acc, ...current };
+      }, {});
+
+      // 转换为包含合并后对象的数组
+      const result = [mergedObject];
+      const newParams = { ...this.formData, attrValue: result };
+      uni.showLoading({
+        title: "数据提交中...",
+      })
+      try {
+         const res = await addProduct(newParams);
+         if(res.data.status == 200){
+            uni.showToast({
+              title:  "数据提交成功",
+              icon: "none",
+            });
+            uni.redirectTo({
+              url:'./productManagement'
+            })
+         }else{
+          uni.showToast({
+              title:  res.data.message,
+              icon: "none",
+            });
+
+         }
+         uni.hideLoading();
+         uni.hideToast()
+      } catch (error) {
+        
+      }finally{
+        uni.hideLoading();
+      }
+    },
+    changeFilesfengmian(data) {
+      const pathsArr = data.fileList || [];
+      const paths = pathsArr.map((item) => item.path).join("") || "";
+      this.formData.image = paths;
+    },
+    changeFileslunbotu(data) {
+      const pathsArr = data.fileList || [];
+      this.formData.slider_image = [];
+      pathsArr.forEach((item) => {
+        this.formData.slider_image.push(item.path);
+      });
+    },
+    changeTextHandle(data){
+      // console.log(data)
+      this.formData.content = data;
+    }
   },
 };
 </script>
@@ -207,7 +601,7 @@ page {
     padding: 32rpx 32rpx 0;
     box-sizing: border-box;
     background-color: #ffffff;
-    min-height: 500rpx;
+    min-height: 250rpx;
     .business-box-txt {
       width: 100%;
       font-weight: 600;
@@ -324,6 +718,9 @@ page {
   color: #333333;
   text-align: right;
   padding: 0rpx 0rpx 0rpx 15rpx;
+  outline: none;
+  border: none;
+  background: none;
   /deep/.uni-input-placeholder {
     color: #999;
   }
@@ -331,4 +728,11 @@ page {
 .mr-t {
   margin-top: 26rpx;
 }
+.pb15 {
+  padding-bottom: 25rpx !important;
+}
+.tips-messge{
+  padding-bottom: 15rpx;
+  color: #ff6010;
+}
 </style>

shop/productManagementModule/components/upload.vue

@@ -1,13 +1,15 @@
 <template>
   <view class="upload-wrapper">
-    <view class="upload-wrapper-text ismust" v-if="formItemTitle"> {{ formItemTitle }} </view>
+    <view class="upload-wrapper-text ismust" v-if="formItemTitle">
+      {{ formItemTitle }}
+    </view>
     <view class="upload-wrapper-upload">
       <view class="upload-files-content">
         <template v-if="fileListData.length > 0">
           <view
             class="upload-files"
             v-for="(item, index) in fileListData"
-            :key="index+item.path"
+            :key="index + item.path"
           >
             <view class="image-box">
               <image :src="item.path" class="show-image-box"></image>
@@ -20,7 +22,12 @@
             </view>
           </view>
         </template>
-        <view class="upload-no-files" :style="getUploadClass" v-if="isHidden"  @click="uploadDataFiles">
+        <view
+          class="upload-no-files"
+          :style="getUploadClass"
+          v-if="isHidden"
+          @click="uploadDataFiles"
+        >
           <image src="/static/images/new_ui/xiangji.png"></image>
           <view class="upload-no-files__text"> {{ setImageTitle }} </view>
         </view>
@@ -30,6 +37,8 @@
 </template>
 
 <script>
+import { uploadFile } from "@/commit/product.js";
+import { baseURL, phpToken } from "@/commit/requestPhp.js";
 export default {
   props: {
     maxLimit: {
@@ -52,59 +61,67 @@ export default {
       type: Boolean,
       default: false,
     },
-	imageTitle:{
-		type: String,
-		default: "",
-	},
-	index:{
-		type: Number,
-		default: 0,
-	}
+    imageTitle: {
+      type: String,
+      default: "",
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
       fileListData: [],
+      paths: "",
     };
   },
   methods: {
-	emitChangeFiles(data){
-		this.$emit('changeFiles',{
-			fileList:data || [],
-			index:this.index
-		})
-		// console.log(data,"emitChangeFiles")
-	},
+    emitChangeFiles(data) {
+      this.$emit("changeFiles", {
+        fileList: data || [],
+        index: this.index,
+      });
+      // console.log(data,"emitChangeFiles")
+    },
     uploadDataFiles() {
-		if(this.disabled || this.maxLimit == 0){
-			return ;
-		}
+      if (this.disabled || this.maxLimit == 0) {
+        return;
+      }
       let that = this;
       uni.chooseImage({
-        count:1, // 最多可以选择的图片张数，默认9
+        count: 1, // 最多可以选择的图片张数，默认9
         // sizeType: ["compressed"], // original 原图，compressed 压缩图，默认二者都有
         sourceType: ["album", "camera"], // album 从相册选图，camera 使用相机，默认二者都有
-        success: function (res) {
-          console.log(res, "456456465");
-          if (that.maxLimit.length === 0) {
-          	that.fileListData.push({
-				path:res.tempFilePaths[0],
-				Files:res.tempFiles[0]
-			})
+        success: async function (res) {
+            const tempFiles = res.tempFiles;
+            const tempFilePaths = res.tempFilePaths;
+          if (that.fileListData.length === 0) {
+          
+            const data = await that.uploadFileData(tempFiles[0]);
+            if (!data) {
+              that.fileListData = [];
+            } else {
+              that.fileListData.push({
+                path: data,
+                Files: tempFiles,
+              });
+            }
           } else if (that.fileListData.length < that.maxLimit) {
-          	that.fileListData = that.fileListData.concat({
-				path:res.tempFilePaths[0],
-				Files:res.tempFiles[0]
-			}); //concat追加到数组
+            const dataPath = await that.uploadFileData(tempFiles[0]);
+            that.fileListData = that.fileListData.concat({
+              path: dataPath,
+              Files: tempFiles,
+            }); //concat追加到数组
           }
-		   that.emitChangeFiles(that.fileListData)
-		//   console.log(that.fileListData,"that.fileListData")
+          that.emitChangeFiles(that.fileListData);
+          //   console.log(that.fileListData,"that.fileListData")
+        },
+        fail() {
+          that.emitChangeFiles([]);
         },
-		fail() {
-			  that.emitChangeFiles([])
-		}
-		
       });
-	 
+
       // let that = this;
       // that.$time.uploadPictures((res) => {
       //   console.log(res);
@@ -114,10 +131,59 @@ export default {
     onHandleDelete(item, index) {
       if (!this.disabledDetele) {
         this.fileListData.splice(index, 1);
-		console.log(this.fileListData,"this.fileListData")
-		 this.emitChangeFiles(this.fileListData)
+        console.log(this.fileListData, "this.fileListData");
+        this.emitChangeFiles(this.fileListData);
       }
     },
+    async uploadFileData(files) {
+      uni.showLoading({
+        title: "上传中",
+        mask: true,
+      });
+      const uploadUrl = `${baseURL}/mer/upload/image/0/file`;
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: uploadUrl,
+          file: files,
+          name: "file",
+          header: {
+            "X-Token": phpToken,
+            // 'Content-Type': "application/json;charset=UTF-8",
+          },
+          success: (res) => {
+            const data = JSON.parse(res.data);
+            if (data.status === 200) {
+              uni.showToast({
+                title: "上传成功",
+                icon: "success",
+              });
+              this.paths = data.data.src || "";
+            } else {
+              uni.showToast({
+                title: "上传失败",
+                icon: "error",
+              });
+              this.paths = "";
+            }
+            resolve(this.paths);
+            console.log("上传成功", JSON.parse(res.data));
+             uni.hideLoading();
+            uni.hideToast();
+          },
+          fail: (err) => {
+            console.error("上传失败", err);
+            this.paths = "";
+            resolve(this.paths);
+             uni.hideLoading();
+            uni.hideToast();
+          },
+          complete: () => {
+            uni.hideLoading();
+            uni.hideToast();
+          },
+        });
+      });
+    },
   },
   computed: {
     isHidden() {
@@ -128,7 +194,8 @@ export default {
         return "禁止上传图片";
       } else if (
         this.fileListData.length < this.maxLimit &&
-        this.fileListData.length > 0 && this.imageTitle
+        this.fileListData.length > 0 &&
+        this.imageTitle
       ) {
         return `${this.fileListData.length} / ${this.maxLimit}`;
       } else {