Feat(订单):增加视频上传

components/UserEvaluation.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="evaluateWtapper">
     <view
-      class="evaluateItem"
       v-for="(item, evaluateWtapperIndex) in reply"
       :key="evaluateWtapperIndex"
+      class="evaluateItem"
     >
       <view class="pic-text acea-row row-middle">
         <view class="pictrue">
@@ -17,8 +17,21 @@
       <view class="time">{{ item.createTime }} {{ item.sku||'' }}</view>
       <view class="evaluate-infor">{{ item.comment }}</view>
       <view class="imgList acea-row">
-        <view class="pictrue" v-for="(itemn, eq) in item.picturesArr" :key="eq">
+        <view v-if="item.video" class="pictrue">
-          <image :src="itemn" class="image" @click="previewImage(item.picturesArr,eq)" />
+          <video
+            :src="item.video"
+            :poster="item.video + '?vframe/jpg/offset/1'"
+            controls
+            play-btn-position="center"
+            class="image"
+          />
+        </view>
+        <view
+          v-for="(itemn, eq) in item.picturesArr"
+          :key="eq"
+          class="pictrue"
+        >
+          <image :src="itemn" class="image" @click="previewImage(item.picturesArr, eq)" />
         </view>
       </view>
       <view class="reply" v-if="item.merchantReplyContent">

components/tm-upload/tm-upload.vue

@@ -10,7 +10,10 @@
 				</view>
 			</block>
 			<view v-show="upload_before_list.length < upload_count" hover-class="sunui-uploader-hover" class="sunui-uploader-inputbox" @tap="choose" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'">
-				<view :style="'line-height:'+ upload_img_wh + 'rpx;'"><text class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text></view>
+				<view :style="'line-height:'+ upload_img_wh + 'rpx;'">
+					<text v-if="type === 'image'" class="iconfont icon-mn_shangchuantupian" style="color: #666;"></text>
+					<u-icon v-if="type === 'video'" size="48px" name="play-circle"  style="color: #666;"></u-icon>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -106,34 +109,6 @@ export default {
 	},
 	mounted() {
 
-	},
-	watch: {
-		// url(val) {
-		// 	this.upload_before_list.map((item) => {
-		// 		this.upload_cache_list.push(item.path);
-		// 	});
-		// 	this.emit();
-		// }
-		dataList:{
-			handler(val){
-				console.log('dataList change'+JSON.stringify(val));
-				this.upload_before_list = val;
-				if(this.upload_before_list.length>0){
-					this.upload_cache_list = [];
-					this.upload_before_list.map((item) => {
-						//过滤掉非网络图片
-						if(item.path.substring(0,4) == 'http' && item.path.substring(0,11) != 'http://tmp/')
-						 {
-							 this.upload_cache_list.push(item.path);
-						 }
-					});
-				}else{
-					this.upload_cache_list = [];
-				}
-				this.emit();
-			},
-			immediate: true
-		}
 	},
 	methods: {
 		videoPlay(e) {
@@ -378,7 +353,7 @@ export default {
 	}
 
 	.icon-mn_shangchuantupian {
-		font-size: 3em;
+		font-size: 48px;
 	}
 
 	.sunui-uploader-img {
@@ -397,7 +372,7 @@ export default {
 
 	.sunui-uploader-inputbox {
 		position: relative;
-		margin-bottom: 16rpx;
+		margin: 0 16rpx 16rpx 0;
 		box-sizing: border-box;
 		background-color: #ededed;
 		display: flex;

pages/shop/GoodsEvaluate/index.vue

@@ -1,6 +1,9 @@
 <template>
   <view class="evaluate-con">
-    <view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
+    <view
+      v-if="orderCon.productInfo"
+      class="goodsStyle acea-row row-between"
+    >
       <view class="pictrue">
         <image :src="orderCon.productInfo.image" class="image"/>
       </view>
@@ -14,77 +17,83 @@
     </view>
     <view class="score">
       <view
-          class="item acea-row row-middle"
+        v-for="(item, scoreListIndexw) in scoreList"
-          v-for="(item, scoreListIndexw) in scoreList"
+        :key="scoreListIndexw"
-          :key="scoreListIndexw"
+        class="item acea-row row-middle"
       >
         <view>{{ item.name }}</view>
         <view class="starsList">
           <text
-              @click="stars(starsIndexn, scoreListIndexw)"
+            v-for="(itemn, starsIndexn) in item.stars"
-              v-for="(itemn, starsIndexn) in item.stars"
+            :key="starsIndexn"
-              :key="starsIndexn"
+            :class="item.index >= starsIndexn ? 'icon-shitixing font-color-red' : 'icon-kongxinxing'"
-              class="iconfont"
+            class="iconfont"
-              :class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'"
+            @click="stars(starsIndexn, scoreListIndexw)"
-          ></text>
+          />
         </view>
         <text class="evaluate">{{ item.index === -1 ? "" : item.index + 1 + "分" }}</text>
       </view>
       <view class="textarea">
-        <textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
+        <textarea
-
+          v-model="expect"
-        <u-upload
+          placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
-            :fileList="uploadPictures"
+        />
-            @afterRead="afterRead"
+        <view class="upload-title">
-            @delete="deletePic"
+          添加视频/图片
-            name="uploadPictures"
+          <text class="txt">
-            multiple
+            ({{ videoArr.length + picArr.length }}/9)
-            :maxCount="9"
+          </text>
-        ></u-upload>
+        </view>
-        <!--        <view class="list acea-row row-middle">-->
+        <view class="upload-wrapper">
-        <!--          <view-->
+          <tm-upload
-        <!--              class="pictrue"-->
+            :dataList="videoArr"
-        <!--              v-for="(item, uploadPicturesIndex) in uploadPictures"-->
+            :upload_img_wh="uploadImgWH"
-        <!--              :key="uploadPicturesIndex"-->
+            :upload_max="1"
-        <!--          >-->
+            :upload_count="1"
-        <!--            <image :src="item"/>-->
+            :url="uploadUrl"
-        <!--            <text-->
+            :header="uploadHeader"
-        <!--                class="iconfont icon-guanbi1 font-color-red"-->
+            type='video'
-        <!--                @click="uploadPictures.splice(uploadPicturesIndex, 1)"-->
+            @change="uploadedVideoChange"
-        <!--            ></text>-->
+          />
-        <!--          </view>-->
+          <tm-upload
-        <!--          <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">-->
+            :dataList="picArr"
-        <!--            <text class="iconfont icon-icon25201"></text>-->
+            :upload_img_wh="uploadImgWH"
-        <!--            <view>上传图片</view>-->
+            :upload_max="9 - videoArr.length"
-        <!--          </view>-->
+            :upload_count="9 - videoArr.length"
-        <!--        </view>-->
+            :url="uploadUrl"
-
+            :header="uploadHeader"
+            type='image'
+            @change="uploadedPicChange"
+          />
+        </view>
       </view>
       <view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
     </view>
   </view>
 </template>
-<style scoped lang="less">
-.evaluate-con .score .textarea .list .pictrue.uploadBnt {
-  border: 1px solid #ddd;
-}
-</style>
 <script>
-import {postOrderComment, postOrderProduct} from "@/api/store";
+import { postOrderComment, postOrderProduct } from '@/api/store'
-import {trim, uploadImage} from "@/utils";
+import { trim } from '@/utils'
-import {required} from "@/utils/validate";
+import { required } from '@/utils/validate'
-import {validatorDefaultCatch} from "@/utils/dialog";
+import { validatorDefaultCatch } from '@/utils/dialog'
-
+import tmUpload from '@/components/tm-upload/tm-upload.vue'
-const NAME = "GoodsEvaluate";
+import {
+  VUE_APP_API_URL
+} from '@/config'
 
 export default {
-  name: NAME,
+  name: 'GoodsEvaluate',
   components: {
-    // VueCoreImageUpload
+    tmUpload
   },
   props: {},
   data: function () {
     return {
+      uploadUrl: VUE_APP_API_URL + '/api/upload',
+      uploadImgWH: (750 - 3 * 16 - 2 * 32 - 16) / 3.0,
+      uploadHeader: {
+        Authorization: "Bearer " + this.$store.getters.token
+      },
       orderCon: {
         cartProduct: {
           productInfo: {}
@@ -92,136 +101,104 @@ export default {
       },
       scoreList: [
         {
-          name: "商品质量",
+          name: '商品质量',
-          stars: ["", "", "", "", ""],
+          stars: ['', '', '', '', ''],
           index: -1
         },
         {
-          name: "服务态度",
+          name: '服务态度',
-          stars: ["", "", "", "", ""],
+          stars: ['', '', '', '', ''],
           index: -1
         }
       ],
       uploadPictures: [],
-      expect: "",
+      expect: '',
-      unique: ""
+      unique: '',
-    };
+      picArr: [],
-  },
+      videoArr: []
-  mounted: function () {
-    this.unique = this.$yroute.query.id;
-    this.getOrderProduct();
-  },
-  watch: {
-    $yroute(n) {
-      if (n.name === NAME && this.unique !== n.params.id) {
-        this.unique = n.params.id;
-        this.$set(this.scoreList[0], "index", -1);
-        this.$set(this.scoreList[1], "index", -1);
-        this.expect = "";
-        this.uploadPictures = [];
-        this.getOrderProduct();
-      }
     }
   },
+  mounted() {
+    this.unique = this.$yroute.query.id
+    this.getOrderProduct()
+  },
   methods: {
-    getOrderProduct: function () {
+    getOrderProduct() {
-      let that = this,
+      postOrderProduct(this.unique).then(res => {
-          unique = that.unique;
+        this.orderCon = res.data
-      postOrderProduct(unique).then(res => {
+      })
-        that.orderCon = res.data;
-      });
     },
     stars: function (indexn, indexw) {
-      this.scoreList[indexw].index = indexn;
+      this.scoreList[indexw].index = indexn
     },
-    // chooseImage() {
+    uploadedVideoChange(uploadList) {
-    //   chooseImage(img => {
+      this.videoArr = uploadList
-    //     this.uploadPictures.push(img);
-    //   });
-    // },
-
-    // 删除图片
-    deletePic(event) {
-      this[`${event.name}`].splice(event.index, 1)
     },
-
+    uploadedPicChange(uploadList) {
-    afterRead(event) {
+      this.picArr = uploadList
-      let that = this;
-      if (event.file.length > 0) {
-        event.file.map(item => {
-          uploadImage(item.url, img => {
-            that.uploadPictures.push({url: img})
-          })
-        })
-      }
     },
     async submit() {
-      const expect = trim(this.expect),
+      const expect = trim(this.expect)
-          product_score =
+      const product_score = this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1
-              this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
+      const service_score = this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1
-          service_score =
-              this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
       try {
         await this.$validator({
           product_score: [
-            required("请选择商品质量分数", {
+            required('请选择商品质量分数', {
-              type: "number"
+              type: 'number'
             })
           ],
           service_score: [
-            required("请选择服务态度分数", {
+            required('请选择服务态度分数', {
-              type: "number"
+              type: 'number'
             })
           ]
         }).validate({
           product_score,
           service_score
-        });
+        })
       } catch (e) {
-        return validatorDefaultCatch(e);
+        return validatorDefaultCatch(e)
       }
-
-      let temp = this.uploadPictures.map(item => item.url)
-      let pics = temp.join(",")
       postOrderComment({
         productScore: product_score,
         serviceScore: service_score,
         unique: this.unique,
-        pics,
+        pics: this.picArr.join(','),
-        comment: expect
+        comment: expect,
+        video: this.videoArr.join(',')
+      }).then(() => {
+        uni.showToast({
+          title: '评价成功',
+          icon: 'success',
+          duration: 2000
+        })
+        this.$yrouter.back()
+      }).catch(err => {
+        uni.showToast({
+          title: err.msg || err.response.data.msg || err.response.data.message,
+          icon: 'none',
+          duration: 2000
+        })
       })
-          .then(() => {
-            uni.showToast({
-              title: "评价成功",
-              icon: "success",
-              duration: 2000
-            });
-
-            // ? 回跳到上一页
-            this.$yrouter.back();
-
-            // ? 默认跳转到详情页
-            // this.$yrouter.push({
-            // 	path: "/pages/order/OrderDetails/index",
-            // 	query: {
-            // 		id: this.orderCon.orderId
-            // 	}
-            // });
-
-            // ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
-            // this.$yrouter.reLaunch({
-            // 	path: "/pages/home/index",
-            // });
-          })
-          .catch(err => {
-            uni.showToast({
-              title:
-                  err.msg || err.response.data.msg || err.response.data.message,
-              icon: "none",
-              duration: 2000
-            });
-          });
     }
   }
 };
 </script>
+<style scoped lang="less">
+.upload-title {
+  padding: 0 0 20rpx 16rpx;
+  .txt {
+    color: #999;
+    font-size: 22rpx;
+  }
+}
+.upload-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0 0 16rpx;
+}
+.evaluate-con .score .textarea .list .pictrue.uploadBnt {
+  border: 1px solid #ddd;
+}
+</style>

pagesInn/inn/innApply.vue

@@ -216,7 +216,7 @@
 
 <script>
 import CitySelect from "@/components/CitySelect";
-import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue';
+import tmUpload from '@/components/tm-upload/tm-upload.vue';
 import {getCity} from "@/api/user";
 import {chooseImage, isWeixin} from "@/utils";
 import {getHomeData} from "@/api/public";

pagesInn/inn/innInfoPublish.vue

@@ -65,7 +65,7 @@
 </template>
 
 <script>
-  import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue'
+  import tmUpload from '@/components/tm-upload/tm-upload.vue'
   import {
     VUE_APP_API_URL
   } from '@/config'

pagesInn/inn/innProfileEdit.vue

@@ -131,7 +131,7 @@
 
 <script>
 import CitySelect from '@/components/CitySelect'
-import tmUpload from '@/pagesInn/components/tm-upload/tm-upload.vue'
+import tmUpload from '@/components/tm-upload/tm-upload.vue'
 import {
   chooseImage,
   chooseVideoToUpload