Feat(订单):增加视频上传
This commit is contained in:
lifizer
+123
-146
@@ -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"
|
||||
:key="scoreListIndexw"
|
||||
v-for="(item, scoreListIndexw) in scoreList"
|
||||
: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"
|
||||
:key="starsIndexn"
|
||||
class="iconfont"
|
||||
:class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'"
|
||||
></text>
|
||||
v-for="(itemn, starsIndexn) in item.stars"
|
||||
:key="starsIndexn"
|
||||
:class="item.index >= starsIndexn ? 'icon-shitixing font-color-red' : 'icon-kongxinxing'"
|
||||
class="iconfont"
|
||||
@click="stars(starsIndexn, scoreListIndexw)"
|
||||
/>
|
||||
</view>
|
||||
<text class="evaluate">{{ item.index === -1 ? "" : item.index + 1 + "分" }}</text>
|
||||
</view>
|
||||
<view class="textarea">
|
||||
<textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
|
||||
|
||||
<u-upload
|
||||
:fileList="uploadPictures"
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
name="uploadPictures"
|
||||
multiple
|
||||
:maxCount="9"
|
||||
></u-upload>
|
||||
<!-- <view class="list acea-row row-middle">-->
|
||||
<!-- <view-->
|
||||
<!-- class="pictrue"-->
|
||||
<!-- v-for="(item, uploadPicturesIndex) in uploadPictures"-->
|
||||
<!-- :key="uploadPicturesIndex"-->
|
||||
<!-- >-->
|
||||
<!-- <image :src="item"/>-->
|
||||
<!-- <text-->
|
||||
<!-- class="iconfont icon-guanbi1 font-color-red"-->
|
||||
<!-- @click="uploadPictures.splice(uploadPicturesIndex, 1)"-->
|
||||
<!-- ></text>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">-->
|
||||
<!-- <text class="iconfont icon-icon25201"></text>-->
|
||||
<!-- <view>上传图片</view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
|
||||
<textarea
|
||||
v-model="expect"
|
||||
placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
|
||||
/>
|
||||
<view class="upload-title">
|
||||
添加视频/图片
|
||||
<text class="txt">
|
||||
({{ videoArr.length + picArr.length }}/9)
|
||||
</text>
|
||||
</view>
|
||||
<view class="upload-wrapper">
|
||||
<tm-upload
|
||||
:dataList="videoArr"
|
||||
:upload_img_wh="uploadImgWH"
|
||||
:upload_max="1"
|
||||
:upload_count="1"
|
||||
:url="uploadUrl"
|
||||
:header="uploadHeader"
|
||||
type='video'
|
||||
@change="uploadedVideoChange"
|
||||
/>
|
||||
<tm-upload
|
||||
:dataList="picArr"
|
||||
:upload_img_wh="uploadImgWH"
|
||||
:upload_max="9 - videoArr.length"
|
||||
:upload_count="9 - videoArr.length"
|
||||
: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 {trim, uploadImage} from "@/utils";
|
||||
import {required} from "@/utils/validate";
|
||||
import {validatorDefaultCatch} from "@/utils/dialog";
|
||||
|
||||
const NAME = "GoodsEvaluate";
|
||||
import { postOrderComment, postOrderProduct } from '@/api/store'
|
||||
import { trim } from '@/utils'
|
||||
import { required } from '@/utils/validate'
|
||||
import { validatorDefaultCatch } from '@/utils/dialog'
|
||||
import tmUpload from '@/components/tm-upload/tm-upload.vue'
|
||||
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: "商品质量",
|
||||
stars: ["", "", "", "", ""],
|
||||
name: '商品质量',
|
||||
stars: ['', '', '', '', ''],
|
||||
index: -1
|
||||
},
|
||||
{
|
||||
name: "服务态度",
|
||||
stars: ["", "", "", "", ""],
|
||||
name: '服务态度',
|
||||
stars: ['', '', '', '', ''],
|
||||
index: -1
|
||||
}
|
||||
],
|
||||
uploadPictures: [],
|
||||
expect: "",
|
||||
unique: ""
|
||||
};
|
||||
},
|
||||
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();
|
||||
}
|
||||
expect: '',
|
||||
unique: '',
|
||||
picArr: [],
|
||||
videoArr: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.unique = this.$yroute.query.id
|
||||
this.getOrderProduct()
|
||||
},
|
||||
methods: {
|
||||
getOrderProduct: function () {
|
||||
let that = this,
|
||||
unique = that.unique;
|
||||
postOrderProduct(unique).then(res => {
|
||||
that.orderCon = res.data;
|
||||
});
|
||||
getOrderProduct() {
|
||||
postOrderProduct(this.unique).then(res => {
|
||||
this.orderCon = res.data
|
||||
})
|
||||
},
|
||||
stars: function (indexn, indexw) {
|
||||
this.scoreList[indexw].index = indexn;
|
||||
this.scoreList[indexw].index = indexn
|
||||
},
|
||||
// chooseImage() {
|
||||
// chooseImage(img => {
|
||||
// this.uploadPictures.push(img);
|
||||
// });
|
||||
// },
|
||||
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`${event.name}`].splice(event.index, 1)
|
||||
uploadedVideoChange(uploadList) {
|
||||
this.videoArr = uploadList
|
||||
},
|
||||
|
||||
afterRead(event) {
|
||||
let that = this;
|
||||
if (event.file.length > 0) {
|
||||
event.file.map(item => {
|
||||
uploadImage(item.url, img => {
|
||||
that.uploadPictures.push({url: img})
|
||||
})
|
||||
})
|
||||
}
|
||||
uploadedPicChange(uploadList) {
|
||||
this.picArr = uploadList
|
||||
},
|
||||
async submit() {
|
||||
const expect = trim(this.expect),
|
||||
product_score =
|
||||
this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
|
||||
service_score =
|
||||
this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
|
||||
const expect = trim(this.expect)
|
||||
const product_score = 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
|
||||
try {
|
||||
await this.$validator({
|
||||
product_score: [
|
||||
required("请选择商品质量分数", {
|
||||
type: "number"
|
||||
required('请选择商品质量分数', {
|
||||
type: 'number'
|
||||
})
|
||||
],
|
||||
service_score: [
|
||||
required("请选择服务态度分数", {
|
||||
type: "number"
|
||||
required('请选择服务态度分数', {
|
||||
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,
|
||||
comment: expect
|
||||
pics: this.picArr.join(','),
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user