|
|
@@ -0,0 +1,254 @@
|
|
|
+<template>
|
|
|
+ <view class="container qualifications">
|
|
|
+ <view class="qualifications-content">
|
|
|
+ <view class="list-view-title"><text class="none">*</text>支付凭证图片：</view>
|
|
|
+ <view class="list-view-upload clearfix">
|
|
|
+ <view class="photo-item" v-for="(item, imageIndex) in imageList" :key="imageIndex">
|
|
|
+ <image :src="item" mode="aspectFill" @click.stop="previewImg(item)"></image>
|
|
|
+ <text class="iconfont icon-iconfontguanbi" @click.stop="deletePhotoFn(imageIndex)"></text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="photo-item add"
|
|
|
+ @click.stop="uploadPhotoFn"
|
|
|
+ v-if="imageList.length < 5 || imageList.length == 0"
|
|
|
+ >
|
|
|
+ <text class="iconfont icon-jiahao"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-view-title">备注：</view>
|
|
|
+ <view class="list-view-text">
|
|
|
+ <textarea
|
|
|
+ class="textarea"
|
|
|
+ v-model="params.remarks"
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ maxlength="200"
|
|
|
+ @input="conInput"
|
|
|
+ />
|
|
|
+ <text class="limit-text">{{ min }}/{{ max }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-mains-btn">
|
|
|
+ <button
|
|
|
+ class="add-btn"
|
|
|
+ :disabled="disabled"
|
|
|
+ :class="[disabled ? 'disabled' : '']"
|
|
|
+ @click="orderInsertVoucher"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import { uploadFileImage } from '@/services/public.js'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ isPreviewImg: false,
|
|
|
+ imageList: [],
|
|
|
+ params: {
|
|
|
+ id: 0,
|
|
|
+ orderId: 0,
|
|
|
+ remarks: '',
|
|
|
+ voucherImgs: ''
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 200
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option)
|
|
|
+ this.params.orderId = option.orderId
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ disabled() {
|
|
|
+ return !(this.imageList.length > 0)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async orderInsertVoucher() {
|
|
|
+ try {
|
|
|
+ this.params.voucherImgs = this.imageList.join('##')
|
|
|
+ console.log('params', this.params)
|
|
|
+ const res = await this.OrderService.orderInsertVoucher(this.params)
|
|
|
+ this.$util.msg('保存成功', 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$api.navigateBack(1)
|
|
|
+ }, 2000)
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async uploadPhotoFn() {
|
|
|
+ //添加图片
|
|
|
+ try {
|
|
|
+ const res = await uploadFileImage()
|
|
|
+ const data = JSON.parse(res.data).data
|
|
|
+ this.imageList.push(data)
|
|
|
+ console.log('imageList', this.imageList)
|
|
|
+ } catch (e) {
|
|
|
+ console.log('1111111111')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ conInput(e) {
|
|
|
+ //备注文字字数限制
|
|
|
+ let value = e.detail.value
|
|
|
+ let len = parseInt(value.length)
|
|
|
+ if (len > this.max) return
|
|
|
+ this.min = len
|
|
|
+ if (this.min == 200) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deletePhotoFn(index) {
|
|
|
+ //删除图片
|
|
|
+ this.imageList.splice(index, 1)
|
|
|
+ },
|
|
|
+ previewImg(image) {
|
|
|
+ //顶部商品图片预览
|
|
|
+ this.isPreviewImage = true
|
|
|
+ let urls = []
|
|
|
+ urls.push(image)
|
|
|
+ uni.previewImage({
|
|
|
+ urls: urls,
|
|
|
+ current: 0
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ height: auto;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.qualifications-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .list-view-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 92rpx;
|
|
|
+ line-height: 92rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ .none {
|
|
|
+ color: #f85050;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-view-text {
|
|
|
+ width: 100%;
|
|
|
+ height: 216rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #e1e1e1;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ position: relative;
|
|
|
+ .textarea {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .limit-text {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ bottom: 16rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-view-upload {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ .photo-item {
|
|
|
+ display: inline-block;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1px dashed #b8bfca;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ &.add {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ border-color: #b2b2b2;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 150rpx;
|
|
|
+ margin-right: 0rpx;
|
|
|
+ .icon-jiahao {
|
|
|
+ font-size: $font-size-44;
|
|
|
+ color: #b2b2b2;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-iconfontguanbi {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: -10rpx;
|
|
|
+ top: -10rpx;
|
|
|
+ background: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .photo-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 116rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .scoll-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.card-mains-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 75rpx;
|
|
|
+ margin-top: 180rpx;
|
|
|
+ .add-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ line-height: 90rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ background: $btn-confirm;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ margin-top: 80rpx;
|
|
|
+ &.disabled {
|
|
|
+ background: #e1e1e1;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
