demingshangjia/pages/index/mention.vue

<template>
	<view class="container">
		<view class="upload">
            <view class="title">
                <text>上传凭证</text>
                <text class="tips">（仅可上传1张凭证）</text>
            </view>
            <u-upload class="upload-box" :form-data="coverformdata" upload-text="" :action="action" :header="header" name="common" :max-count="1" @on-success="uploadSuc"></u-upload>
        </view>
        <view class="remarks">
            <view>备注:</view>
            <textarea class="textarea-box" v-model="textareaVal" placeholder="请输入内容..." placeholder-class="placeholder-style" />
        </view>
        <u-button class="btn-submit" @click="submitInfo">提交</u-button>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
                header: {
                	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                },
				action: "https://mall.dmygkeji.com/api/Upload/uploadfile",
                coverformdata: {
                	name: 'common'
                },
                img_url: "", // 图片路径
                textareaVal: "", // 备注
			};
		},
        onLoad(option) {
            // console.log(option);
            this.order_id = option.id;
        },
        methods: {
            // 上传成功
            uploadSuc(e) {
                if (e.errCode == 0) {
                    this.$refs.uToast.show({
                        title: e.message,
                        type: "success"
                    })
                    // console.log(e.data);
                    this.img_url = e.data.file_path;
                } else {
                    this.$refs.uToast.show({
                        title: e.message,
                    })
                }
            },
            // 自提提交
            submitInfo() {
                if (!this.img_url) {
                    this.$refs.uToast.show({
                        title: "请上传凭证!",
                        type: "warning"
                    })
                    return;
                }
                if (!this.$u.trim(this.textareaVal)) {
                    this.$refs.uToast.show({
                        title: "请填写备注!",
                        type: "warning"
                    })
                    return;
                }
                // 提交
                this.$u.api.bindmention({
                    store_deliver_type: 3,
                    shipping_express_id: "e1000",
                    deliver_explain: this.textareaVal,
                    order_id: this.order_id,
                    sendimg: this.img_url,
                }).then(res => {
                    console.log(res);
                    if (res.errCode == 0) {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: "success",
                            isTab: "true",
                            url: "/pages/index/index"
                        })
                    } else {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: "warning"
                        })
                    }
                })
            }
        }
	}
</script>

<style lang="scss">
.container {
    padding: 30rpx;
}
::v-deep.uicon-plus {
    font-size: 50rpx !important;
}
.upload {
    .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 400;
        color: #333;
        .tips {
            font-size: 20rpx;
            color: #999;
        }
    }
    .upload-box {
        margin: 20rpx 0;
    }
}
.remarks {
    .textarea-box {
        width: calc(100% - 42rpx);
        padding: 20rpx;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #333;
        border-radius: 10rpx;
        border: 1px solid #BABABA;
    }
    .placeholder-style {
        color: #999;
        font-size: 26rpx;
    }
}
.btn-submit {
    width: 690rpx;
    height: 98rpx !important;
    margin-top: 70rpx;
    font-size: 36rpx !important;
    text-align: center;
    line-height: 98rpx !important;
    color: #fff !important;
    border-radius: 50rpx;
    background-color: #FF780F !important;
}
</style>