eduepos_ui_store/pages/tools/safety-archives.vue

<template>
    <view class="archives-page">
        <scroll-view scroll-y class="scroll-content">
			<view class="note mt">食品安全监督公示</view>
			<view class="block-item bbline">
				<view class="label">单位名称: </view>
				<input class="value" maxlength="20" style="width: 100%;" v-model="info.storeInfoName"></input>
			</view>
			<view class="block-item bbline">
				<view class="label">许可证号:</view>
				<input class="value" maxlength="20" style="width: 100%;" v-model="info.licenseKey"></input>
			</view>
			<view class="block-item bbline">
				<view class="label">经营地址:</view>
				<input class="value" maxlength="20" style="width: 100%;" v-model="info.address"></input>
			</view>
			<view class="block-item bbline">
				<view class="label">主体业态:</view>
				<input class="value" maxlength="20" style="width: 100%;" v-model="info.businessFormat"></input>
			</view>
			<view class="block-item bbline">
				<view class="label">经营范围:</view>
				<input class="value" maxlength="20" style="width: 100%;" v-model="info.businessScope"></input>
			</view>
			<view class="block-item">
				<view class="label">有效期:</view>
			<view class="value" v-if="info.effectiveEndDate" @click="selectDate">
				{{ info.effectiveEndDate|formatDate('yyyy-M-d') }}
			</view>
			<view class="value" v-else @click="selectDate">
				请选择时间
			</view>
			
			</view>
			<view class="note">商家资质信息公示</view>
			<view class="imgs-scroll">
				<view class="imgs-list" :style="{ width: 3 * 348 + 40 + 'rpx' }">
					<view class="item">
						<!-- <u-image width="348rpx" height="348rpx" :src="info.licenseOneUrl"></u-image> -->
						<view>营业执照</view>
						<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="1"
							:previewFullImage="true" :maxCount="1" :width="150" :height="150"></u-upload>
					</view>
					<view class="item">
						<!-- <u-image width="348rpx" height="348rpx" :src="info.licenseTwoUrl"></u-image> -->
						<view>经营许可证</view>
						<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2"
							:previewFullImage="true" :maxCount="1" :width="150" :height="150"></u-upload>
					</view>
				</view>
			</view>
		</scroll-view>

		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :insert="false" @confirm="confirm" />

		<view class="update-events">
			<view class="btn" @click="save">保存</view>
		</view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			infoUrl: '/storeInfoManageApi/getStoreInfo',
			uploadFileUrl: '/storeInfoManageApi/uploadUrl',
			saveUrl: '/storeInfoManageApi/update',
			storeId: '',
			fileList1: [],
			fileList2: [],
			list: [],
			info: {
				storeInfoId: '',
				licenseOneUrl: '',
				licenseTwoUrl: '',
				licenseKey: '',
				storeInfoName: '',
				address: '',
				businessFormat: '',
				businessScope: '',
				effectiveEndDate: ''
			},
			file1: {},
			file2: {},
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		getStoreInfo() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.infoUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.info = res.data.obj
						let picUrl1 = this.info.licenseOneUrl;
						if (picUrl1 !== null && picUrl1 !== '' && picUrl1 !== undefined){
							this.fileList1.push({
								url: picUrl1
							})
						}
						
						let picUrl2 = this.info.licenseTwoUrl;
						if (picUrl2 !== null && picUrl2 !== '' && picUrl2 !== undefined){
							this.fileList2.push({
								url: picUrl2
							})
						}	
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
		},
		// 删除图片
		deletePic1(event) {
			this.fileList1.splice(event.index, 1)
			this.info.licenseOneUrl = ''
		},
		deletePic2(event) {
			this.fileList2.splice(event.index, 1)
			this.info.licenseTwoUrl = ''
		},
		// 新增图片
		async afterRead1(event) {
			// console.log('event :>> ', event);
			this.file1 = event.file
			let file = event.file
			let fileListLen = this.fileList1.length
			// lists.map((item) => {
			this.fileList1.push({
				...file,
				status: 'loading',
				// message: '上传中'
			})
			this.info.licenseOneUrl = this.file1.url
			this.uploadFile(1,this.file1.url)
			
	
		},
		uploadFile(type,url) {
			uni.showLoading({
				title: '上传中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.storeInfo.code + this.uploadFileUrl,
					filePath: url,
					name: 'file',
					formData: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId,
						type: type
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.rtnBean.rtnCode == 0) {
							uni.hideLoading();
							uni.showToast({
								title: "上传成功",
								duration: 3000,
								icon: 'none',
							});

						} else {
							uni.hideLoading();
							if (data.rtnBean.rtnMsg != '') {
								this.$api.msg(data.rtnBean.rtnMsg);
							}
						}
						
					},
					fail: (res) => {
						uni.hideLoading();
					}
				});
			})
		},
		async afterRead2(event) {
			console.log('event :>> ', event);
			this.file2 = event.file
			let file = event.file
			let fileListLen = this.fileList2.length
			// lists.map((item) => {
			this.fileList2.push({
				...file,
				status: 'loading',
				// message: '上传中'
			})
			this.info.licenseTwoUrl = this.file2.url
			this.uploadFile(2,this.file2.url)
		
		},
		selectDate() {
		    this.$refs.calendar.open();
		},
		confirm(e) {
			console.log('e :>> ', e);
			if (e.fulldate != '' && e.fulldate != undefined && e.fulldate != null ) {
				this.info.effectiveEndDate = e.fulldate
			}
		},
		save () {
			if (this.info.storeInfoName == null || this.info.storeInfoName == '') {
				this.$api.msg("请输入单位名称");
				return;
			} else if (this.info.licenseKey == null || this.info.licenseKey == '') {
				this.$api.msg("请输入许可证号");
				return;
			} else if (this.info.address == null || this.info.address == '') {
				this.$api.msg("请输入经营地址");
				return;
			} else if (this.info.businessFormat == null || this.info.businessFormat == '') {
				this.$api.msg("请输入主体业态");
				return;
			}else if (this.info.businessScope == null  || this.info.businessScope == '') {
				this.$api.msg("请输入经营范围");
				return;
			} else if (this.info.effectiveEndDate == null || this.info.effectiveEndDate == '') {
				this.$api.msg("请选择有效期");
				return;
			} else if (this.info.licenseOneUrl == null || this.info.licenseOneUrl == '') {
				this.$api.msg("请上传营业执照");
				return;
			}else if (this.info.licenseTwoUrl == null || this.info.licenseTwoUrl == '') {
				this.$api.msg("请上传经营许可证");
				return;
			}else{
				uni.showLoading({
					title: '保存中'
				});
				var dateStr = (new Date()).getTime();
				var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
				
				this.requst({
					url: this.saveUrl,
					data: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId,
						storeInfoName: this.info.storeInfoName,
						licenseKey: this.info.licenseKey,
						address: this.info.address,
						businessFormat: this.info.businessFormat,
						businessScope: this.info.businessScope,
						effectiveEndDate: this.info.effectiveEndDate,
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							uni.showToast({
								title: "保存成功",
								duration: 3000,
								icon: 'none',
							});
						} else {
							if (res.data.rtnBean.rtnMsg != '') {
								this.$api.msg(res.data.rtnBean.rtnMsg);
								return;
							}
						}
						uni.hideLoading();
					},
					fail: (e) => {
						this.isDisable = false;
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading();
					},
				});
					
		
				
			}
			// uni.navigateBack();
		}
	},
    onLoad (options) {
        this.getStoreInfo()
    }
}
</script>
<style lang="scss" scoped>
.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}
.note {
    width: 100%;
    height: 80upx;
    @include flexStart;
    background-color: $bg-color;
    color: $other-color;
    padding-left: 20upx;
    box-sizing: border-box;
    font-size: $font-base;

    background-color: rgba(245, 245, 245, 1);
    color: rgba(108, 108, 108, 1);
}
.block-item {
    margin: 0 20upx;
    padding: 24upx 0;
    box-sizing: border-box;
    @include flexStart(flex-start);
    font-size: $font-sm;
    .label {
        width: 140upx;
        min-width: 140upx;
        color: $desc-color;
    }
    .value {
        color: $title-color;
    }
}
.imgs-scroll {
    width: 100vw;
    height: 348rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}
.imgs-list {
    height: 348rpx;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}
.item {
    width: 348rpx;
    height: 348rpx;
    margin-right: 20upx;
}
.update-events {
    width: 100vw;
    @include flexCenter;
	margin-top: 40rpx;
    .btn {
        width: 80vw;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}

</style>