confirm.vue

<template>
    <view class="scan-confirm">
        <view class="form-box">
            <view class="wrap column">
                <view class="tit row verCenter">
                    <text class="arrow"></text>
                    <text class="tt">收货信息</text>
                </view>
                <view class="box row bothSide verCenter">
                    <text class="left-text">发货单号</text>
                    <text class="right-text">{{ number }}</text>
                </view>
                <view class="box row bothSide verCenter">
                    <text class="left-text">签单图片上传</text>
                    <text class="right-text">{{ attachAddress.length }}/4</text>
                </view>
                <view class="pic-list row">
                    <template v-if="attachAddress.length > 0">
                        <view class="pp" v-for="(v, index) in attachAddress" :key="index">
                            <image :src="v" mode="aspectFill" lazy-load="true" @click="previewChange(attachAddress, index)"></image>
                            <view class="delete row rowCenter verCenter" @click="deletePic(index)"><text class="iconfont icon-shanchu"></text></view>
                        </view>
                    </template>
                    <view class="default" @click="chooseImageChange()" v-if="attachAddress.length < 4"></view>
                </view>
                <textarea class="remark row" placeholder="请输入签单备注" v-model="remark"></textarea>
            </view>
        </view>
        <view class="btn row rowCenter verCenter" @click="submit()">提交确认</view>
    </view>
</template>

<script>
import { API } from '@/util/api.js';
import w_md5 from '../../js_sdk/zww-md5/w_md5.js';

export default {
    data() {
        return {
            number: '',
            attachAddress: [],
            remark: ''
        };
    },
    onLoad(options) {
        this.number = options.number;
    },
    methods: {
        previewChange(img, index) {
            uni.previewImage({
                current: index,
                urls: img
            });
        },
        deletePic(index) {
            this.attachAddress.splice(index, 1);
        },
        chooseImageChange() {
            var self = this;
            var time = parseInt(new Date().getTime() / 1000);
            uni.chooseImage({
                count: 4,
                sourceType: ['album', 'camera'],
                success: chooseImageRes => {
                    uni.showLoading({
                        title: '上传中...'
                    });
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    let maxNum = tempFilePaths.length * 1 + self.attachAddress.length * 1;
                    if (maxNum > 4) {
                        uni.hideLoading();
                        uni.showToast({
                            title: '图片不超过4张'
                        });
                        return false;
                    }
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        console.log(tempFilePaths[i]);
                        uni.uploadFile({
                            url: API.upload,
                            filePath: tempFilePaths[i],
                            name: 'upload',
                            formData: {
                                source: '1',
                                k1: time,
                                k2: w_md5.hex_md5_32(w_md5.hex_md5_32(String(time)) + 'fh6y5t4rr351d2c3bryi')
                            },
                            success: uploadFileRes => {
                                uni.hideLoading();
                                var data = JSON.parse(uploadFileRes.data);
                                console.log(data);
                                if (data.code === 200) {
                                    self.attachAddress.push(data.data[0]);
                                } else {
                                    uni.showToast({
                                        title: data.message
                                    });
                                }
                            },
                            fail: error => {
                                uni.hideLoading();
                                console.log(error);
                            }
                        });
                    }
                }
            });
        },
        submit() {
            this.request(API.uploadSignForInfo, 'POST', { number: this.number, attachAddress: this.attachAddress.join(','), remark: this.remark }, true).then(res => {
                if (res.err_code === 0) {
                    uni.showToast({
                        title: '提交成功'
                    });
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/home/index'
                        });
                    }, 2000);
                } else {
                    uni.showToast({
                        title: res.err_msg,
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/scan/confirm.scss';
</style>