school_uni/package2/shop/shopInfo.vue

<template>
	<view class="page1">
		<view class="list-box">
			<view class="list-1">
				<view class="list-name">
					门头图
				</view>
				<view class="list-right" @tap="pictureAdd('mentou')">
					<view class="upload-img" v-if="shop.shopIcon ==''" style="background: #eee;text-align: center;line-height: 100rpx;">
						<uni-icons type="camera" size="28" color="#777"></uni-icons>
					</view>
					<image :src="shop.shopIcon" v-if="shop.shopIcon !=''" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					店铺名称
				</view>
				<view class="list-right">
					{{shop.shopName}}
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					副标题
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入副标题" v-model="shop.subtitle" style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
			<view class="list-1" style="height: auto;">
				<view class="list-name">
					店铺地址
				</view>
				<view class="list-right" style="line-height: 20px;margin-top: 15px;">
					{{shop.shopAddress}}
				</view>
			</view>
			<!-- <view class="list-1">
				<view class="list-name">
					店铺环境
				</view>
				<view class="list-right">
					<image :src="huanjing" mode=""></image>
				</view>
			</view> -->
			<view class="list-1">
				<view class="list-name">
					身份证
				</view>
				<view class="list-right">
					<image :src="shopImages[0]" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					营业执照
				</view>
				<view class="list-right">
					<image :src="shopImages[2]" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					补充证照
				</view>
				<view class="list-right">
					<image :src="huanjing" mode="" class="upload-img"></image>
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					支付宝账号
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入支付宝账号" v-model="shop.aliAccount" style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
			<view class="list-1">
				<view class="list-name">
					支付宝实名
				</view>
				<view class="list-right">
					<input type="text" placeholder="请输入支付宝账号" v-model="shop.aliName"  style="height: 100rpx;line-height: 100rpx;" />
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="section-title">商家自配送</view>
			<view class="list-1">
				<view class="list-name">支持自配送</view>
				<view class="list-right">
					<label class="radio" style="padding-right: 20rpx;" @tap="setSelfDelivery(1)">
						<radio :checked="shop.supportShopDelivery == 1" /><text>是</text>
					</label>
					<label class="radio" @tap="setSelfDelivery(0)">
						<radio :checked="shop.supportShopDelivery == 0" /><text>否</text>
					</label>
				</view>
			</view>
			<block v-if="shop.supportShopDelivery == 1">
				<view class="list-1">
					<view class="list-name">配送费</view>
					<view class="list-right">
						<input type="digit" v-model="shop.orderBkge" placeholder="默认0，最多1位小数" @blur="formatOrderBkge" />
					</view>
				</view>
				<view class="list-1">
					<view class="list-name">送达位置</view>
					<view class="list-right">
						<picker :range="deliveryLocationList" range-key="text" @change="deliveryLocationChange">
							<view>{{deliveryLocationText || '请选择'}}</view>
						</picker>
					</view>
				</view>
				<view class="list-1">
					<view class="list-name">配送时长</view>
					<view class="list-right">
						<input type="number" v-model="shop.shopDeliveryDuration" placeholder="分钟" />
					</view>
				</view>
				<view class="list-1">
					<view class="list-name">配送员电话</view>
					<view class="list-right worker-query">
						<input type="number" v-model="workerMobile" placeholder="输入手机号" />
						<view class="query-btn" @tap="findWorker">查询</view>
					</view>
				</view>
				<view class="list-1" v-if="shop.workerId">
					<view class="list-name">已绑定</view>
					<view class="list-right">{{shop.workerName}} {{shop.workerPhone}}</view>
				</view>
			</block>
		</view>
		<view class="list-box">
			<view class="section-title">中转配送</view>
			<view class="list-1">
				<view class="list-name">支持中转配送</view>
				<view class="list-right">
					<label class="radio" style="padding-right: 20rpx;" @tap="setTransferDelivery(1)">
						<radio :checked="shop.supportTransferDelivery == 1" /><text>是</text>
					</label>
					<label class="radio" @tap="setTransferDelivery(0)">
						<radio :checked="shop.supportTransferDelivery == 0" /><text>否</text>
					</label>
				</view>
			</view>
			<block v-if="shop.supportTransferDelivery == 1">
				<view class="list-1">
					<view class="list-name">中转时长</view>
					<view class="list-right">
						<input type="number" v-model="shop.transferDeliveryDuration" placeholder="分钟" />
					</view>
				</view>
				<view class="list-1">
					<view class="list-name">中转地点</view>
					<view class="list-right">
						<picker :range="addressList" range-key="text" @change="transferAddressChange">
							<view>{{shop.transferAddressName || '请选择'}}</view>
						</picker>
					</view>
				</view>
			</block>
		</view>
		<view class="list-box">
			<view class="list-2" @click="submit">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop:{},
				shopImages:[],
				huanjing:'',
				workerMobile:'',
				addressList:[],
				deliveryLocationList:[{
					value: 1,
					text: '送到宿舍'
				},{
					value: 2,
					text: '送到楼下'
				}]
			}
		},
		computed:{
			deliveryLocationText(){
				let item = this.deliveryLocationList.find(item => item.value == this.shop.shopDeliveryLocation)
				return item ? item.text : ''
			}
		},
		onLoad() {
			let shopList = uni.getStorageSync('schoolShop')
			for(let i=0;i<shopList.length;i++){
				if(shopList[i].shopName == uni.getStorageSync('shopName')){
					this.shop = shopList[i]
				}
			}
			this.shopImages = this.shop.shopImages.split('@@')
			this.huanjing = JSON.parse(this.shopImages[3])[0]
			
			for (let key in this.shop) {
			  if (this.shop[key] === null) {
			    delete this.shop[key];
			  }
			}
			if(this.shop.supportShopDelivery == null) this.shop.supportShopDelivery = 0
			if(this.shop.orderBkge == null) this.shop.orderBkge = 0
			if(this.shop.supportTransferDelivery == null) this.shop.supportTransferDelivery = 0
			this.workerMobile = this.shop.workerPhone || ''
			this.getRegionList()
		},
		methods: {
			navigatorTo(e){
				let url = ""
				if(e=='addgoods'){
					url = '/package1/myCenter/addGoods'
				}else if(e=='merchant'){
					url = '/package1/myCenter/myMerchant'
				}else if(e == 'xiugaixinxi'){
					url = '/pages/myCenter/shopDetail'
				}
				uni.navigateTo({
					url: url
				})
			},
			pictureAdd(type) {
				let that = this
				uni.chooseMedia({
					count: type == 'qita'?9:1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {
							that.upLoadFile(res.tempFiles[i].tempFilePath,type)
						}
			
					}
				})
			},
			async upLoadFile(path,type) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						that.shop.shopIcon = pathData.result
						
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
			setSelfDelivery(type){
				this.shop.supportShopDelivery = type
				if(type != 1){
					this.shop.orderBkge = 0
					this.shop.shopDeliveryLocation = ''
					this.shop.shopDeliveryDuration = ''
					this.shop.workerId = ''
					this.shop.workerName = ''
					this.shop.workerPhone = ''
					this.workerMobile = ''
				}
			},
			setTransferDelivery(type){
				this.shop.supportTransferDelivery = type
				if(type != 1){
					this.shop.transferDeliveryDuration = ''
					this.shop.transferAddressId = ''
					this.shop.transferAddressName = ''
				}
			},
			getRegionList(){
				this.tui.request('/app/shopArea/getByParentId/0', 'get', {}, false, false, true).then((res) => {
					if (res.code !== 200) return
					this.addressList = (Array.isArray(res.result) ? res.result : []).map(item => {
						return {
							value: item.id,
							text: item.title || item.name || item.regionName || item.areaName || '未命名区域'
						}
					})
				})
			},
			transferAddressChange(e){
				const item = this.addressList[e.detail.value]
				if(item){
					this.shop.transferAddressId = item.value
					this.shop.transferAddressName = item.text
				}
			},
			formatOrderBkge(){
				let value = parseFloat(this.shop.orderBkge || 0)
				if(isNaN(value) || value < 0) value = 0
				this.shop.orderBkge = Number(value.toFixed(1))
			},
			deliveryLocationChange(e){
				const item = this.deliveryLocationList[e.detail.value]
				if(item){
					this.shop.shopDeliveryLocation = item.value
				}
			},
			findWorker(){
				if(!this.workerMobile){
					this.tui.toast('请输入配送员手机号')
					return
				}
				this.tui.request('/app/shop/findWorkerByMobile', 'GET', {
					mobile: this.workerMobile
				}, false, true).then((res) => {
					if(res.code == 200){
						this.shop.workerId = res.result.workerId
						this.shop.workerName = res.result.workerName
						this.shop.workerPhone = res.result.workerPhone || res.result.mobile
						this.tui.toast('绑定成功')
					}else{
						this.tui.toast(res.message)
					}
				})
			},
			normalizeSelfDelivery(){
				if(this.shop.supportShopDelivery != 1){
					this.setSelfDelivery(0)
					return true
				}
				this.formatOrderBkge()
				if(!this.shop.shopDeliveryLocation){
					this.tui.toast('请选择送达位置')
					return false
				}
				if(!this.shop.shopDeliveryDuration){
					this.tui.toast('请输入配送时长')
					return false
				}
				if(!this.shop.workerId){
					this.tui.toast('请绑定配送员')
					return false
				}
				return true
			},
			normalizeTransferDelivery(){
				if(this.shop.supportTransferDelivery != 1){
					this.setTransferDelivery(0)
					return true
				}
				if(!this.shop.transferDeliveryDuration){
					this.tui.toast('请输入中转配送时长')
					return false
				}
				if(!this.shop.transferAddressId){
					this.tui.toast('请选择中转地点')
					return false
				}
				this.shop.transferDeliveryDuration = parseInt(this.shop.transferDeliveryDuration || 0)
				return true
			},
			updateLocalShopCache(){
				let shopList = uni.getStorageSync('schoolShop') || []
				if(Array.isArray(shopList)){
					shopList = shopList.map(item => item.id == this.shop.id ? Object.assign({}, item, this.shop) : item)
					uni.setStorageSync('schoolShop', shopList)
				}
				uni.setStorageSync('shop', this.shop)
			},
			submit(){
				if(!this.normalizeSelfDelivery()) return
				if(!this.normalizeTransferDelivery()) return
				this.tui.request("/app/shop/updateSelfDelivery", "post", {
					id: this.shop.id,
					supportShopDelivery: this.shop.supportShopDelivery,
					orderBkge: this.shop.orderBkge,
					shopDeliveryLocation: this.shop.shopDeliveryLocation,
					shopDeliveryDuration: this.shop.shopDeliveryDuration,
					workerId: this.shop.workerId,
					workerName: this.shop.workerName,
					workerPhone: this.shop.workerPhone
				}, false, true).then((deliveryRes) => {
					if (deliveryRes.code != 200) {
						this.tui.toast(deliveryRes.message)
						return Promise.reject(deliveryRes)
					}
					return this.tui.request("/app/shop/updateTransferDelivery", "post", {
						id: this.shop.id,
						supportTransferDelivery: this.shop.supportTransferDelivery,
						transferDeliveryDuration: this.shop.transferDeliveryDuration,
						transferAddressId: this.shop.transferAddressId,
						transferAddressName: this.shop.transferAddressName
					}, false, true)
				}).then((transferRes) => {
					if (transferRes.code != 200) {
						this.tui.toast(transferRes.message)
						return Promise.reject(transferRes)
					}
					return this.tui.request("/app/shop/edit", "PUT", this.shop, false, true)
				}).then((res) => {
					if (res.code == 200) {
						this.updateLocalShopCache()
						uni.showModal({
							title: '提示',
							content: '更新信息成功',
							showCancel:false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						});
					} else {
						this.tui.toast(res.message)
					}
					uni.hideLoading()
				}).catch((res) => {})
			}
		}
	}
</script>

<style>
	page,.page1{
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		background: #eee;
	}
	.list-box{
		width: 100%;
		height: auto;
		background: #fff;
		margin-top: 20rpx;
		
	}
	.section-title{
		height: 88rpx;
		line-height: 88rpx;
		padding-left: 20rpx;
		font-weight: 700;
		border-bottom: 1px solid #eee;
	}
	.list-1{
		display: flex;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #eee;
		
	}
	.list-2{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
	.list-icon{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}
	.list-name{
		flex: 1;
		padding-left: 20rpx;
	}
	.list-right{
		flex: 1;
		height: 100rpx;
		text-align: right;
		padding-right: 20rpx;
		overflow: hidden;
	}
	.list-right input{
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}
	.worker-query{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.worker-query input{
		flex: 1;
		min-width: 0;
	}
	.query-btn{
		margin-left: 12rpx;
		padding: 0 18rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		background: #0b9b73;
		color: #fff;
		font-size: 24rpx;
	}
	.upload-img{
		width:60rpx;
		height: 60rpx;
		background-size: 100%;
		margin-top: 20rpx;
	}
	.list-2{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
</style>