shop4.3.57/pages/share/edit/edit.vue

<template>
	<app-layout>
		<view>
			<!-- 申请页面背景图片以及待审核页面背景图片 -->
			<image :src="custom_setting.apply.apply_head_pic" class="add-bg"></image>
			<!-- 未在申请分销商 -->
			<view class="add-form">
				<view class="add-default">
					<view class="add-info">
						<view class="add-label">
							<text style="color: #ff4544">*</text>姓名
						</view>
						<view class="add-input">
							<input v-model="name" placeholder="请填写真实姓名" placeholder-style="font-size: 20rpx;color: #cdcdcd" />
						</view>
					</view>
					<view class="add-info">
						<view class="add-label">
							<text style="color: #ff4544">*</text>手机号码</view>
						<view class="add-input">
							<input v-model="phone" type="number" placeholder="请填写手机号码" placeholder-style ="font-size: 20rpx;color: #cdcdcd" />
						</view>
					</view>
					<view class="add-info">
						<view class="add-label">
							<text style="color: #ff4544">*</text>微信号
						</view>
						<view class="add-input">
							<input v-model="wechat_num" placeholder="微信号" placeholder-style="font-size: 20rpx;color: #cdcdcd" />
						</view>
					</view>
					<view class="add-info">
						<view class="add-label">
							<text style="color: #ff4544">*</text>微信二维码
						</view>
						<view @click="uploadQRode" class="qr-code">
							<block v-if="!wechat_qrcode"><image :src="root+'/web/statics/img/app/common/upload.png'"></image></block>
							<block v-else><image :src="wechat_qrcode"></image></block>
						</view>
					</view>
				</view>
				<view class="submit">
					<view @click="subscribe">
						<button :style="{'background-color':`${custom_setting.apply.apply_btn_background}`,'border-radius':`${custom_setting.apply.apply_btn_round}`,'color':`${custom_setting.apply.apply_btn_color}`}">保存</button>
					</view>
				</view>
			</view>
			<!-- 特权 -->
			<view class="other">
				<image @load="imageLoad" :style="{'height':`${height}rpx`}" class="end-img" :src="custom_setting.apply.apply_end_pic"></image>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import { mapState } from "vuex";
	import AppDiyForm from "../../../components/page-component/app-diy-form/app-diy-form";
	import uploadFile from "../../../core/upload";

	export default {
		data() {
			return {
				status: null,
				mallName: '',
				name: '',
				phone: '',
				parent_name: '',
				height: 0,
				form: {},
				template_message: [],
				read: false,
				protocol: false,
				wechat_num: '',
				wechat_qrcode: '',
				root:''
			}
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall,
				custom_setting: state => state.mallConfig.share_setting_custom,
				share_setting: state => state.mallConfig.share_setting,
			})
		},
		components: {
			AppDiyForm
		},
		methods: {
			handleFormInput(data) {
				const result = [];
				for (let i in data) {
					result[i] = {
						key: data[i].key,
						label: data[i].name,
						value: data[i].value,
						required: data[i].is_required,
					};
				}
				this.form = result;
			},
			toRead() {
				this.read = !this.read
			},

			imageLoad: function (e) {
				var $width = e.detail.width; //获取图片真实宽度
				var $height = e.detail.height; //获取图片真实高度
				this.height = $height * (702 / $width)
			},
			subscribe() {
				let that = this;
				if (!that.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none',
						duration: 1000
					});
				} else if (!that.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 1000
					});
				} else if (!(/0?(1)[0-9]{10}/.test(that.phone))) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 1000
					});
				}else if (!that.wechat_num) {
					uni.showToast({
						title: '请输入微信号',
						icon: 'none',
						duration: 1000
					});
				} else if (!that.wechat_qrcode) {
					uni.showToast({
						title: '请上传微信二维码',
						icon: 'none',
						duration: 1000
					});
				}  else {
					// let template_message = [this.template_message]
					this.$subscribe(this.template_message).then(res => {
						this.submit();
					}).catch(res => {
						this.submit();
					});
				}
			},
			submit() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				});
				let para = {
					name: that.name,
					mobile: that.phone,
					wechat_num: that.wechat_num,
					wechat_qrcode: that.wechat_qrcode,
				}
				if(that.share_setting.form_status == 1) {
					para.form = JSON.stringify(that.form)
				}
				that.$request({
					url: that.$api.share.edit,
					data: para,
					method: 'post'
				}).then(response => {
					that.$store.dispatch('mallConfig/actionResetConfig');
					that.$hideLoading();
					if (response.code == 0) {
						uni.showToast({
							title: response.msg,
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						if(that.share_setting.form_status == 0 && response.msg == '请填写表单') {
							uni.showToast({
								title: '申请条件有所变化，请重新填写',
								icon: 'none',
								duration: 1000
							});
						}else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000
							});
						}
					}
				}).catch(e => {
					that.$hideLoading();
					uni.showToast({
						title: response,
						icon: 'none',
						duration: 1000
					});
				})
			},
			uploadQRode(){
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						uni.uploadFile({
							url: _this.$api.upload.file,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(response) {
								_this.wechat_qrcode = JSON.parse(response.data).data.url;
							}
						});
					}
				});
			}
		},

		onLoad(options) {
			let that = this;
			that.root = this.$siteInfo.root;
			this.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			if (options.template_message != null) {
				that.template_message = JSON.parse(options.template_message)
			}
			uni.setNavigationBarTitle({
				title: '编辑资料'
			});
			let _this = this;
			this.$request({
				url: this.$api.share.share_info,
			}).then(response => {
				this.$hideLoading();
				if (response.code === 0) {
					_this.name = response.data.name;
					_this.phone = response.data.mobile;
					_this.wechat_num = response.data.wechat_num;
					_this.wechat_qrcode = response.data.wechat_qrcode;
				}
			})
		},
		onShow() {
			this.$store.dispatch('mallConfig/actionResetConfig');
		}
	}
</script>

<style scoped lang="scss">
	.add-bg {
		height: #{300rpx};
		width: 100%;
		display: block;
		margin-bottom: #{20rpx};
		background-color: #f7f7f7;
	}

	.add-form {
		padding: 0 #{24rpx};
		font-size: #{30rpx};
		color: #353535;
		.add-default {
			background-color: #fff;
			border-radius: #{16rpx};
			padding: 0 #{10rpx} #{35rpx};
			margin-bottom: #{20rpx};
			&.add-diy-form {
				padding-bottom: 0;
				padding: #{10rpx} #{24rpx};
				.add-info {
					border-bottom: 0;
					padding: #{24rpx} 0;
				}
			}
			.add-info {
				width: 100%;
				padding: #{10rpx} #{24rpx};
				border-bottom: #{1rpx} solid #e2e2e2;
				.red-background {
					background-color: #ff4544;
				}
				.add-label {
					height: #{45rpx};
					line-height: #{45rpx};
					font-size: #{28rpx};
				}
				.add-input {
					height: #{75rpx};
					input {
						height: #{65rpx};
						padding-top: #{5rpx};
					}
				}
				&.share-name {
					height: #{90rpx};
					line-height: #{90rpx};
					padding: 0 #{10rpx};
					.mall-name {
						max-width: #{300rpx};
						color: #ff4544;
					}
				}
				.share-user {
					color: #666;
					height: #{75rpx};
					line-height: #{75rpx};
					>text {
						color: #ff4544;
					}
				}
				.read {
					width: #{32rpx};
					height: #{32rpx};
					float: left;
					margin-right: #{10rpx};
					image {
						height: 100%;
						width: 100%;
						display: block;
					}
				}
			}
			.qr-code image{
				width: #{200rpx};
				height: #{200rpx};
			}
		}
	}

	.submit {
		background-color: #f7f7f7;
		margin: 0 #{-24rpx};
		padding: #{24rpx};
		button {
			color: #fff;
			font-size: #{30rpx};
			font-weight: bold;
			height: #{80rpx};
			border-radius: #{40rpx};
			line-height: #{80rpx};
		}
	}

	.other {
		background-color: #fff;
		padding: 0 #{24rpx};
		color: #353535;
		font-size: #{30rpx};
		.end-img {
			width: 100%;
		}
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.3);
		.protocol {
			position: relative;
			z-index: 99;
			background-color: #fff;
			width: 80%;
			border-radius: #{20rpx};
			margin: #{100rpx} auto;
			.protocol-name {
				height: #{100rpx};
				text-align: center;
				line-height: #{100rpx};
				color: #666;
			}
			.protocol-content {
				padding: #{10rpx} #{20rpx};
				height: #{720rpx};
				overflow: auto;
				color: #353535;
			}
			.read-over {
				text-align: center;
				height: #{100rpx};
				line-height: #{100rpx};
				background-color: #ff4544;
				color: #fff;
				font-size: #{30rpx};
				border-bottom-right-radius: #{20rpx};
				border-bottom-left-radius: #{20rpx};
			}
		}
	}
</style>