bawangcan-shop/pages/index/addShop.vue

<template>
	<view class="container" style="padding-bottom: 60rpx;">
		<view class="main">
			<view class="order-des">
				<view class="title">店铺名称</view>
				<view class="textarea-wrap">
					<input type="text" v-model="title" class="input" placeholder="请输入店铺名称" />
				</view>
			</view>
			<view class="order-des">
				<view class="title">手机号</view>
				<view class="textarea-wrap">
					<input type="number" v-model="phone" class="input" maxlength="11" placeholder="请输入联系手机号" />
				</view>
			</view>
			<view class="order-des">
				<view class="title">店铺地址</view>
				<view class="textarea-wrap" @tap="btnaddress">
					<input type="text" disabled="disabled" v-model="address" class="input" readonly="readonly"
						placeholder="请选择店铺地址" />
				</view>
			</view>
			<view class="order-des">
				<view class="title">详细地址</view>
				<view class="textarea-wrap">
					<input type="text" v-model="addressdetail" class="input" placeholder="请输入店铺详细地址(门牌号)" />
				</view>
			</view>
			<view class="order-des">
				<view class="title">店铺类型</view>
				<view class="textarea-wrap" @tap="onclick">
					<input type="text" disabled="disabled" v-model="shopTypeName" class="input" placeholder="请选择店铺类型" />
				</view>
				<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			</view>

			<view class="order-des">
				<view class="title">店铺LOGO(右为示例图)</view>
				<shmily-drag-image :list.sync="imageList" number="1"></shmily-drag-image>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList1" number="1">
				</shmily-drag-image>
			</view>
			<view class="order-des">
				<view class="title">美团地址截图或者店铺小程序二维码(右为示例图)</view>
				<shmily-drag-image :list.sync="imageList0" number="1"></shmily-drag-image>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList2" number="1">
				</shmily-drag-image>
			</view>
			<view class="order-des">
				<view class="title">饿了么地址截图(右为示例图)</view>
				<shmily-drag-image :list.sync="imageList00" number="1"></shmily-drag-image>
				<shmily-drag-image class="dragImg" :select="false" :list.sync="imageList3" number="1">
				</shmily-drag-image>
			</view>
			<!-- <view class="order-des">
				<view class="title">上传订单凭证示例图</view>
				<shmily-drag-image :select="false" :list.sync="imageList1" number="2"></shmily-drag-image>
			</view> -->
		</view>
		<view class="btns">
			<button class="tui-button-primar qr" @tap="addSave">提交</button>
		</view>
	</view>
</template>

<script>
	import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
	import notifyMsg from "@/common/notifyMsg.js"
	var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		components: {
			shmilyDragImage
		},
		data() {
			return {
				checkType: 0,
				title: '',
				phone: '',
				address: "",
				shopType: '',
				addressdetail: '',
				merchantProvince: '',
				merchantCity: '',
				merchantDistrict: '',
				latitude: '',
				shopTypeName: '',
				longitude: '',
				myphone: '',
				imageList: [],
				imageList0: [],
				imageList00: [],
				merchantId: '',
				imageList1: ['https://h5.canmoujiang.com/img/20210722/0ea2e3e9a2214ed98bab6e79d579e09b.png'],
				imageList2: ['https://h5.canmoujiang.com/img/20210722/86a54adfd0434b0a8205ef096125986d.jpg'],
				imageList3: ['https://h5.canmoujiang.com/img/20210722/a1574499f5464b62a349992205cc0f2a.jpg'],
				show: false,
				list: [],
				arr: [],
				showModal: true
			}
		},
		onLoad(e) {
			if (e.name) {
				let shopListItem = this.$queue.getData("shopListItem");
				if (shopListItem) {
					this.merchantId = shopListItem.merchantId;
					this.title = shopListItem.merchantName;
					this.phone = shopListItem.merchantPhone;
					this.address = shopListItem.merchantAddress;
					this.shopType = shopListItem.merchantType;
					this.addressdetail = shopListItem.merchantAddress;
					this.address = shopListItem.merchantProvince + shopListItem.merchantCity + shopListItem
						.merchantDistrict;
					this.merchantProvince = shopListItem.merchantProvince;
					this.merchantCity = shopListItem.merchantCity;
					this.merchantDistrict = shopListItem.merchantDistrict;
					this.latitude = shopListItem.latitude;
					this.shopTypeName = shopListItem.shopTypeName;
					this.longitude = shopListItem.longitude;
					this.imageList.push(shopListItem.merchantLogo);
					if (shopListItem.mtImg) {
						this.imageList0.push(shopListItem.mtImg);
					}
					if (shopListItem.eleImg) {
						this.imageList00.push(shopListItem.eleImg);
					}
					this.checkType = 1;
					this.$queue.remove('shopListItem');
				}
			}

			this.$Request.getT('/common/type/213').then(res => { //订单审核提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						this.arr.push(res.data.value)
					}
				}
			})
			this.$Request.getT('/common/type/211').then(res => { //最新活动通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						this.arr.push(res.data.value)
					}
				}
			})
			this.$Request.getT('/common/type/212').then(res => { //积分变动提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						// that.orderStart = res.data;
						this.arr.push(res.data.value)
					}
				}
			})
			// #ifdef MP-WEIXIN
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'XOWBZ-CN5KJ-YKWF6-K24NB-JFRFF-CQBO4'
			});
			// #endif
			this.getSelectTypeList();
		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getUserInfo(userId);
				//订阅
				if (this.showModal) {
					notifyMsg.openMsg();
				}
			}
		},
		methods: {
			// 开启订阅消息
			getUserInfo(userId) {
				this.$Request.postT("/app/selectUserById?userId=" + userId).then(res => {
					if (res.code === 0) {
						this.myphone = res.data.phone;
						this.$queue.setData("avatar", res.data.imageUrl ? res.data.imageUrl :
							'https://download.cyjyyjy.com/fq-logo.jpg');
						this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
						this.$queue.setData("mobile", res.data.phone);
						this.$queue.setData("invitationCode", res.data.invitationCode);
						this.$queue.setData("relation_id", res.data.relationId);
						this.$queue.setData("relation", res.data.invitationCode);
						this.$queue.setData("grade", res.data.grade);
						this.$queue.setData("wxId", res.data.wxId);
						this.$queue.setData("zhifubao", res.data.zhifubao);
						this.$queue.setData("zhifubaoName", res.data.zhifubaoName);
						this.$queue.setData("isInvitation", res.data.isInvitation);
						this.$queue.setData("gender", parseInt(res.data.gender));
						this.$queue.setData("sex", res.data.sex);
					}
				});
			},
			getSelectTypeList() {
				this.$Request.getT('/banner/selectBannerList?state=1&classify=2').then(res => {
					if (res.code == 0) {
						this.list = res.data;
						res.data.forEach(d => {
							if (this.shopType) {
								if (this.shopType == d.id) {
									this.shopTypeName = d.name;
								}
							}
						});
						// this.shopType = this.list[e].id
						// this.shopTypeName = this.list[e].name
					}
				});
			},
			initLocation(latitude, longitude, name) {
				var that = this;
				qqmapsdk.reverseGeocoder({
					location: latitude + ',' + longitude || '',
					success: function(res) { //成功后的回调
						if (res.status == 0) {
							console.log(res)
							let s = res.result.ad_info.city.substring(0, res.result.ad_info.city.length - 1);
							that.latitude = latitude;
							that.longitude = longitude;
							that.merchantProvince = res.result.address_component.province;
							that.merchantCity = res.result.address_component.city;
							that.merchantDistrict = res.result.address_component.district;
							that.address = that.merchantProvince + that.merchantCity + that.merchantDistrict;
							that.addressdetail = name;
							// that.address = that.province + that.city + that.district;
						}
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				})
			},
			// 发布
			addSave() {
				if (uni.getStorageSync('sendshopMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				let that = this;
				this.$queue.showLoading('提交中...');
				var images = '';
				var images1 = '';
				var images2 = '';
				if (this.myphone === '') {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/public/mobile'
					});
					return;
				}
				if (this.title == '') {
					uni.hideLoading();
					this.$queue.showToast('请输入店铺名称!');
					return;
				}
				if (this.phone.length != 11) {
					uni.hideLoading();
					this.$queue.showToast('请输入正确手机号!');
					return;
				}
				if (this.address === '') {
					uni.hideLoading();
					this.$queue.showToast('请选择店铺地址');
					return;
				}
				if (this.addressdetail === '') {
					uni.hideLoading();
					this.$queue.showToast('请输入店铺详细地址');
					return;
				}
				if (this.shopType === '') {
					uni.hideLoading();
					this.$queue.showToast('请选择店铺类型');
					return;
				}
				if (this.imageList.length == 0) {
					uni.hideLoading();
					this.$queue.showToast('请上传店铺LOGO!');
					return;
				} else {
					for (var i = 0; i < this.imageList.length; i++) {
						if (i === 0) {
							images = this.imageList[i];
						} else {
							images = images + ',' + this.imageList[i];
						}
					}
				}

				if (this.imageList00.length == 0 && this.imageList0.length == 0) {
					uni.hideLoading();
					this.$queue.showToast('请上传地址截图!');
					return;
				} else {
					if (this.imageList0.length != 0) {
						images1 = this.imageList0[0];
					}
					if (this.imageList00.length != 0) {
						images2 = this.imageList00[0];
					}
				}
				let userId = this.$queue.getData('userId');
				let data = {
					'merchantId': this.merchantId,
					'userId': userId,
					'merchantName': this.title,
					'merchantPhone': this.phone,
					'merchantAddress': this.addressdetail,
					'merchantType': this.shopType,
					'merchantLogo': images,
					'mtImg': images1,
					'eleImg': images2,
					'latitude': this.latitude,
					'longitude': this.longitude,
					'merchantProvince': this.merchantProvince,
					'merchantCity': this.merchantCity,
					'merchantDistrict': this.merchantDistrict
				}
				if (this.checkType == 0) {
					this.$Request.postJson('/goodsMerchant/insertGoodsMerchant', data).then(res => {
						if (res.code === 0) {
							this.$queue.showToast("提交成功！");
							setTimeout(d => {
								uni.navigateBack();
								uni.hideLoading();
							}, 1000);
						} else {
							uni.hideLoading();
							this.$queue.showToast(res.msg);
						}
					});
				} else if (this.checkType == 1) {
					this.$Request.postJson('/goodsMerchant/updateGoodsMerchant', data).then(res => {
						if (res.code === 0) {
							this.$queue.showToast("提交成功！");
							setTimeout(d => {
								uni.navigateBack();
								uni.hideLoading();
							}, 1000);
						} else {
							uni.hideLoading();
							this.$queue.showToast(res.msg);
						}
					});
				}

			},
			confirm(e) {
				console.log(this.list[e].name);
				this.shopType = this.list[e].id
				this.shopTypeName = this.list[e].name
			},
			onclick() {
				this.show = true
			},
			btnaddress() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.initLocation(res.latitude, res.longitude, res.name);
						// this.address = res.address + res.name
						// this.address = res.name
						// this.latitude = res.latitude
						// this.longitude = res.longitude
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.container {
		width: 100%;
		padding-bottom: calc(98upx + env(safe-area-inset-bottom));
		padding-bottom: calc(98upx + constant(safe-area-inset-bottom));

		.main {
			padding: 20upx 20upx 20upx;

			.order-des {
				padding: 30upx;
				// border-radius: 20upx;
				background-color: #fff;
				// margin-bottom: 20upx;
				position: relative;

				.title {
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
					line-height: 32upx;
					padding-bottom: 20upx;

				}


				.textarea-wrap {
					padding-top: 20upx;
					width: 100%;
					border-bottom: 1upx solid #E6E6E6;

					.textarea {
						width: 100%;
						font-size: 28upx;
						line-height: 35upx;
						color: #333;
					}
				}

				.textarea-counter {
					text-align: right;
					font-size: 28upx;
					font-weight: 500;
					color: #999999;
					margin-top: 10upx;
				}
			}

			.order-list {
				margin-top: 20upx;
				padding: 0 30upx;
				border-radius: 20upx;
				background-color: #fff;

				.order-list-item {
					width: 100%;
					height: 110upx;
					border-bottom: 1upx solid #E6E6E6;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tit {
						font-size: 34upx;
						font-weight: 500;
						color: #333333;
					}

					.right {
						font-size: 34upx;
						font-weight: 500;
						color: #666;
						display: flex;
						align-items: center;

						.input {
							flex: 1;
							display: flex;
							align-items: center;
							text-align: right;
							padding-right: 10upx;
						}
					}
				}

				.order-list-item:last-child {
					border-bottom: 0;
				}
			}

		}

		.btns {
			button {
				// width: 80%;
				margin: 22upx;
				color: #fff;
				border: none;
				border-radius: 10upx;
			}

			.qr {
				background: #FF2B2B;
			}
		}

		.footer {
			width: 100%;
			height: calc(98upx + env(safe-area-inset-bottom));
			height: calc(98upx + constant(safe-area-inset-bottom));
			padding-bottom: env(safe-area-inset-bottom);
			/*兼容IOS>11.2*/
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容IOS<11.2*/
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 0 30upx;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payinfo {
				font-size: 32upx;
				font-weight: bold;
				color: #333333;

				text {
					color: #FF3737;
				}
			}

			.tui-button-primar {
				width: 300upx;
				height: 78upx;
				line-height: 78upx;
				background: #FF332F;
				border-radius: 10upx;
				margin: 0;
			}
		}

		.dragImg {
			// position: absolute;
			// top: 85rpx;
			// left: 300rpx;
			position: absolute;
			left: 266rpx;
			top: 88rpx;
			height: 90%;
			width: 60%;

			.area-con {
				width: 186rpx !important;
			}

			image {
				width: 186rpx !important;
				height: 186rpx !important;
			}
		}
	}
</style>