修改图片

commpents/upload/index.js

@@ -0,0 +1,57 @@
+// commpents/mobile-frame/mobile-main.js
+const app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: { multipleSlots: true },
+  properties: {
+    list: { type: 'array', value: [] },
+    count: { type: Number, value: 1 },
+    previewSize: { type: String, value: '60' }
+  },
+
+  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
+  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
+  ready: function () { },
+  pageLifetimes: {
+    // 组件所在页面的生命周期函数
+    show: function () { },
+    hide: function () { },
+    resize: function () { },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 图片上传
+    imgUpload(event) {
+      const { file } = event.detail;
+      wx.uploadFile({
+        url: app.globalData.fileUrl + '/files/consumables/market/upload',
+        filePath: file.url,
+        name: 'file',
+        formData: {},
+        success: (res) => {
+          let arr = JSON.parse(res.data);
+          if (res.statusCode == 200) {
+            this.triggerEvent('imgUpload', { name: arr.name, url: `${app.globalData.imageUrl}` + arr.uri, uri: arr.uri })
+          } else {
+            wx.showToast({ title: `${res.errMsg}`, icon: 'fail', duration: 2000 })
+          }
+        }
+      })
+    },
+    // 图片删除
+    imgDel(e) {
+      this.triggerEvent('imgDel', { file: e.detail.file, index: e.detail.index })
+    }
+  }
+})
+

commpents/upload/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

commpents/upload/index.wxml

@@ -0,0 +1 @@
+<van-uploader file-list="{{list}}" max-count="{{count}}" bind:after-read="imgUpload" bind:delete="imgDel" preview-size="{{previewSize}}" />

commpents/upload/index.wxss

@@ -0,0 +1 @@
+/* commpents/upload/index.wxss */

commpents/upload/read.md

@@ -0,0 +1,20 @@
+# 上传图片组件使用说明
+## 参数
+### 图片存储列表：list
+### 图片上传数量限制：count
+### 自定义预览大小：previewSize
+
+## 方法
+### 上传图片---imgUpload
+### 传回父组件参数，图片名称：name，图片完整地址：url，图片地址：uri
+### 父组价接收参数变量：e.detail
+
+### 删除图片---imgDel
+### 传回父组件参数：图片数据：file，图片所在列表下标：index
+### 父组件接收参数变量：e.detail
+
+## 引用组件
+### json："vanupload": "/commpents/upload/index"
+### 组件使用：<vanupload></vanupload>
+### 参数传值方式：list="{{list}}"
+### 方法传值方式：bind:imgUpload="imgUpload"

pages/home/index.js

@@ -79,7 +79,7 @@ Page({
   },
   // 监听用户是否登录
   watchLogin: function () {
-    let data = { type: '0' }
+    let data = { type: '4' }
     this.searchRouter(data);
     // wx.getStorage({
     // key: 'user',

pages/stock/detail.js

@@ -49,12 +49,18 @@ Page({
         this.setData({ 'form.type_name': data.name })
     },
     // 上传图片
-    afterRead: function (event) {
-        console.log(event.detail);
+    imgUpl: function (e) {
+        const that = this;
+        let data = that.data.img_url;
+        data.push(e.detail)
+        that.setData({ img_url: data })
     },
     // 删除图片
-    uploadDelete: function (e) {
-        console.log(e);
+    imgDel: function (e) {
+        const that = this;
+        let list = that.data.img_url;
+        let arr = list.filter((i, index) => index != e.detail.index)
+        that.setData({ img_url: arr })
     },
     // 取消保存
     onReset: function (e) {

pages/stock/detail.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "mobile-main": "/commpents/mobile-frame/mobile-main"
+    "mobile-main": "/commpents/mobile-frame/mobile-main",
+    "vanupload": "/commpents/upload/index"
   }
 }

pages/stock/detail.wxml

@@ -91,7 +91,7 @@
             <text class="icon iconfont icon-tupian"></text>
           </view>
           <view class="right">
-            <van-uploader file-list="{{ img_url }}" bind:after-read="afterRead" bind:delete="uploadDelete" />
+            <vanupload list="{{img_url}}" count="{{4}}" previewSize="{{80}}" bind:imgUpload="imgUpl" bind:imgDel="imgDel"></vanupload>
           </view>
         </view>
         <view class="save">