shop-applet/pages/product/basicSet.vue

<template>
	<view class="basic_set">
		<!-- 老板说这里不要 -->
		<view class="basice_item">
			<view class="headline">
				<view class="text flex_a_c">店铺基本配置</view>
			</view>
			<view class="store_bg" v-if="false">
				<view class="text flex_a_c"><i class="iconfont icon-xinghao"></i>店铺背景图</view>
				<block v-if="images[0].img">
					<u--image :showLoading="true" :src="images[0].img" width="680rpx" height="210.53rpx" radius="4px"
						@click="delImg(0)"></u--image>
				</block>
				<view v-else class="upload" @click="seleckImage(0)">
					<view class="iconfont icon-tupian1"></view>
					建议尺寸：710*220px
				</view>
			</view>

			<view class="store_avatar flex_a_c_j_sb">
				<view class="avatar_box">
					<view class="text flex_a_c"><i class="iconfont icon-xinghao"></i>店铺头像</view>
					<block v-if="images[1].img">
						<u--image :showLoading="true" :src="images[1].img" width="210.53rpx" height="210.53rpx"
							radius="4px" @click="delImg(1)" mode="aspectFit"></u--image>
					</block>
					<view v-else class="avatar_img" @click="seleckImage(1)">
						<view class="iconfont icon-tupian1"></view>
						建议尺寸：120*120px
					</view>
				</view>
				<view class="zizhi_box">
					<view class="text">店铺资质</view>
					<block v-if="images[3].img">
						<u--image :showLoading="true" @click="!imgUpload?priviewImg([images[3].img]):seleckImage(3)"
							:src="images[3].img" width="382.46rpx" height="210.53rpx" radius="4px"></u--image>
					</block>
					<view v-else class="zizhi_img" @click="seleckImage(3)">
						<view class="iconfont icon-tupian1"></view>
					</view>
				</view>
			</view>
			<view class="store_avatar flex_a_c_j_sb" style="padding: 20rpx 0;" v-if="imagesArr.length>0">
				<view class="avatar_box">
					<view class="text flex_a_c"></i>店铺其他资质</view>
					<view class="other-img">
						<view class="other-item" v-for="(imgArr,index) in imagesArr" :key="index"
							:style="{marginRight: (index+1)%3==0?'0rpx':'20rpx'}">
							<u--image :showLoading="true" @click="priviewImg(imagesArr, index)" :src="imgArr"
								width="210.53rpx" height="210.53rpx" radius="4px"></u--image>
						</view>
					</view>
				</view>
			</view>
			<view class="ask_title">拍摄要求</view>
			<view class="shoot_ask flex_a_c_j_sb">
				<block v-for="(item,i) in shootAsk" :key="i">
					<view class="shoot_item">
						<image class="shoot_img" :src="item.url" mode=""></image>
						<view class="shoot_msg flex_a_c">
							<u-icon v-if="i > 0" name="close" color="#F20950" size="18"></u-icon>
							<u-icon v-else name="checkmark" color="#20A162" size="18"></u-icon>
							{{ item.text }}
						</view>
					</view>
				</block>
			</view>

			<view class="street_bg" style="margin-bottom:20rpx;" v-if="false">
				<view class="text flex_a_c"> <i class="iconfont icon-xinghao"></i> 店铺街背景图</view>
				<block v-if="images[2].img">
					<u--image :showLoading="true" :src="images[2].img" width="680rpx" height="210.53rpx" radius="4px"
						@click="delImg(2)"></u--image>
				</block>
				<view v-else class="street_img flex_a_c" @click="seleckImage(2)">
					<view class="iconfont icon-tupian1"></view>
					<view>建议尺寸:710*134px或710*460px(请根据平台要求选择尺寸，此图如未上传默认展示店铺背景图)</view>
				</view>
			</view>
		</view>

		<view class="basice_item">
			<view class="headline">
				<view class="text flex_a_c">配送基本配置</view>
			</view>
			<view class="item_cell">
				<view class="flex_a_c">
					<text class="sub_title">配送方式：</text>
					<view class="flex">
						<checkbox-group name="" @change="checkboxChange">
							<checkbox :checked="isZiti" :value="check.ziti" /><text class="text ziti">到店自提</text>
							<checkbox :checked="isKuaidi" :value="check.kuaidi" /><text class="text">商家配送</text>
						</checkbox-group>
					</view>
				</view>
				<view class="remark">
					*只选择一种配送方式时,会自动修改店铺所有商品的配送方式
				</view>
			</view>

			<block>
				<view class="item_cell flex_a_c"
					style="display: flex;justify-content: space-between;align-items: flex-start;">
					<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>详细地址：</view>
					<!-- <input class="com_input" type="text" v-model="mer_address" placeholder="输入商户地址"> -->
					<view class="input" style="flex: 1;margin-right: 15rpx;">{{mer_address}}</view>
					<view class="get_site flex_a_c" @click="navTo('/pages/select_address/select_address_n')">
						<i class="iconfont icon-dizhi"></i>
						获取地址
					</view>
				</view>

				<!-- <view class="long_lat">
					<input class="com_input site_input" type="text" v-model="longLati" placeholder="输入经纬度坐标">
					<view class="get_site flex_a_c" @click="selfLocation">
						<i class="iconfont icon-dizhi"></i>
						获取地址
					</view>
				</view> -->

				<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>提货点营业日期:</view>
				<view class="week_box">
					<view class="week_item" v-for="(item,index) in dateWeek" :key="index" @click="sel(index)">
						<view class="date_week" :class="item.isCheck ? 'date_week_a' : ''">
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>店铺营业时间:</view>
				<view class="bus_time flex_a_c">
					<view class="select" @click="beginTimeShow = true">
						{{ mer_take_time[0] ? mer_take_time[0] : '选择开始时间' }}
					</view>
					至
					<view class="select" @click="overTimeShow = true">
						{{ mer_take_time[1] ? mer_take_time[1] : '选择结束时间' }}
					</view>
				</view>
			</block>
		</view>

		<view class="basice_item">
			<view class="headline">
				<view class="text flex_a_c">商户信息配置</view>
			</view>
			<view class="item_cell flex_a_c">
				<view class="sub_title flex_a_c">商户名称：</view>
				<view class="com_input">{{mer_name}}</view>
			</view>
			<view class="item_cell flex_a_c">
				<view class="sub_title flex_a_c">商户分类：</view>
				<view class="com_input">{{category_name}}</view>
			</view>
			<view class="item_cell flex_a_c">
				<view class="sub_title flex_a_c">客服电话：</view>
				<view class="com_input">{{servicePhone}}</view>
			</view>

			<!-- <view class="item_cell flex_a_c" v-if="type_code!='TypeFamousSpecialties'||type_code!='TypeLocalCuisine'||type_code!='TypeFeaturedCultural'" >
				<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao" v-if="credit_buy"></i>开启先货后款：</view>
				<u-switch v-model="credit_buy" @change="change"></u-switch>
			</view>
			
			<view class="item_cell flex_a_c"  v-if="credit_buy">
				<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>先货后款结算周期：</view>
				<input type="number" v-model="settle_cycle" placeholder="请输入 /周期单位为:天">
			</view>
			<view class="remarks" v-if="credit_buy">*周期结算时间范围为:15~90 周期单位为:天</view>
			<view class="item_cell flex_a_c" v-if="credit_buy">
				<view class="sub_title flex_a_c"><i class="iconfont icon-xinghao"></i>先货后款结算利率：</view>
				<input type="number" maxlength="5" v-model="interest_rate" placeholder="请输入 /利率单位为: %">
			</view>
			<view class="remarks">*利率结算范围为:0.01 ~ 0.1 利率单位为:%</view> -->

			<!-- <view class="item_cell">
        <view class="if_btn flex_a_c_j_sb">
          <text class="sub_title">是否开启商户：</text>
          <u-switch v-model="merState"></u-switch>
        </view>
        <text style="color: #CCCCCC;">开启后，店铺即可展示在移动端</text>
      </view> -->
		</view>

		<button class="submit_btn l_center" @click="postMerchantUpdata">提交</button>

		<u-datetime-picker :show="beginTimeShow" v-model="mer_take_time[0]" mode="time" @close="beginTimeShow = false"
			:closeOnClickOverlay="true" @cancel="beginTimeShow = false"
			@confirm="beginTimeShow = false"></u-datetime-picker>
		<u-datetime-picker :show="overTimeShow" v-model="mer_take_time[1]" mode="time" @close="overTimeShow = false"
			:closeOnClickOverlay="true" @cancel="overTimeShow = false"
			@confirm="overTimeShow = false"></u-datetime-picker>

	</view>
</template>

<script>
	import {

		navigateBack,
		Toast
	} from '@/libs/uniApi.js'
	import {
		merchantUpdateAPI,
		merchantInfoAPI
	} from "@/api/product"
	import {
		uploads
	} from '@/api/upload.js'
	export default {
		data() {
			return {
				shootAsk: [{
						url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/bzps.png',
						text: '标准拍摄'
					},
					{
						url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/bkqs.png',
						text: '边框缺失'
					},
					{
						url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/zpmh.png',
						text: '照片模糊'
					},
					{
						url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/sgql.png',
						text: '闪光强烈'
					}
				],
				images: [{
					img: ''
				}, {
					img: ''
				}, {
					img: ''
				}, {
					img: ''
				}],
				imgUpload: true, // 是否可以上传店铺资质
				imagesArr: [],
				storeBg: '',
				check: {
					ziti: '1',
					kuaidi: '2'
				},
				isZiti: false,
				isKuaidi: false,
				delivery_way: [1, 2],
				takeName: '',
				takePhone: '',
				servicePhone: '',
				cruxText: '',
				intro: '',
				detailSite: '',
				longitude: '', // 经度
				latitude: '', // 纬度
				longLati: '', // 经纬度
				merState: true, // 是否开启商户
				dateWeek: [{
					name: '星期一',
					id: 1,
					isCheck: true
				}, {
					name: '星期二',
					id: 2,
					isCheck: true
				}, {
					name: '星期三',
					id: 3,
					isCheck: true
				}, {
					name: '星期四',
					id: 4,
					isCheck: true
				}, {
					name: '星期五',
					id: 5,
					isCheck: true
				}, {
					name: '星期六',
					id: 6,
					isCheck: true
				}, {
					name: '星期日',
					id: 7,
					isCheck: true
				}],
				mer_take_time: ['08:00', '18:00'],
				beginTimeShow: false,
				overTimeShow: false,
				mer_address: '',
				id: '',
				mer_certificate: '',
				credit_buy: false, //开启信用购
				interest_rate: '', //利率
				settle_cycle: '', //周期
				mer_name: '',
				category_name: '', //分类名称
				type_code: ''
			}
		},
		onLoad(e) {
			this.id = e.mer_id
			this.getMerchantInfo(e.mer_id);
		},
		methods: {
			getMerchantInfo(id) {
				merchantInfoAPI({
					id
				}).then(res => {
					console.log(res)

					this.mer_name = res.data.mer_name
					this.category_name = res.data.merchantCategory.category_name
					// this.images[0].img = res.data.mer_banner
					this.images[1].img = res.data.mer_avatar
					// this.images[2].img = res.data.mini_banner
					if (typeof res.data.mer_certificate != 'string') {
						this.images[3].img = res.data.mer_certificate[0];
						res.data.mer_certificate.shift();
						this.imagesArr = res.data.mer_certificate;
					} else this.images[3].img = res.data.mer_certificate;
					if (this.images[3].img) this.imgUpload = false;

					// 初始化默认
					if (!res.data.delivery_way || res.data.delivery_way.length == 0) {
						this.delivery_way = [1, 2];
						this.isZiti = true;
						this.isKuaidi = true;
					} else {
						if (typeof res.data.delivery_way == 'string') this.delivery_way = res.data.delivery_way
							.split(
								',');
						else this.delivery_way = res.data.delivery_way;
						this.delivery_way.forEach(item => {
							if (item === '1') this.isZiti = true
							if (item === '2') this.isKuaidi = true
						})
					}
					this.takeName = res.data.mer_take_name
					this.takePhone = res.data.mer_take_phone
					this.detailSite = res.data.mer_take_address
					this.servicePhone = res.data.mer_phone;

					res.data.mer_take_location ? this.longLati = res.data.mer_take_location?.join(',') : null;

					// 是否有营业日期
					if (res.data.mer_take_day && res.data.mer_take_day.length > 0) {
						this.dateWeek.forEach(item => {
							let day = res.data.mer_take_day.find(i => i == item.id);
							if (day) item.isCheck = true;
							else item.isCheck = false;
						})
					}

					this.type_code = res.data.type_code
					this.mer_take_time = res.data.mer_take_time
					this.intro = res.data.mer_info
					this.cruxText = res.data.mer_keyword
					this.mer_address = res.data.mer_address;
					this.merState = res.data.mer_state === 1 ? true : false
					this.credit_buy = res.data.credit_buy === 1 ? true : false
					if (res.data.settle_cycle == 0) {
						this.settle_cycle = ''
					} else {
						this.settle_cycle = res.data.settle_cycle
					}
					if (res.data.interest_rate == 0) {
						this.interest_rate = ''
					} else {
						this.interest_rate = res.data.interest_rate
					}
				}).catch(err => {
					// console.log('err', err);
				})
			},
			checkboxChange(val) {
				if (val.detail.value.length == 0) {
					this.isZiti = false;
					this.isKuaidi = false;
					this.$nextTick(() => {
						if (this.delivery_way[0] == 1) this.isZiti = true;
						else this.isKuaidi = true;
					})
					return Toast('请至少选择一种配送方式!');
				}
				this.delivery_way = val.detail.value;
			},
			//开启信用购
			change(e) {
				this.credit_buy = e
			},

			// 选择营业日期
			sel(i) {
				this.dateWeek[i].isCheck = !this.dateWeek[i].isCheck;
			},

			postMerchantUpdata() {
				uni.showModal({
					title: '确定提交吗',
					success: (res) => {
						if (res.confirm) {
							this.submitData()
						}
					}
				})
			},
			submitData() {
				if (this.settle_cycle < 15) {
					this.settle_cycle = 15
				} else if (this.settle_cycle > 90) {
					this.settle_cycle = 90
				}
				if (this.interest_rate < 0.01) {
					this.interest_rate = 0.01
				} else if (this.interest_rate > 0.1) {
					this.interest_rate = 0.1
				}
				let data = {
					mer_banner: this.images[0].img,
					mer_avatar: this.images[1].img,
					mini_banner: this.images[2].img,
					mer_certificate: this.images[3].img,
					delivery_way: this.delivery_way,
					mer_take_name: this.takeName,
					mer_take_phone: this.takePhone,
					mer_take_address: this.detailSite,
					lat: this.latitude,
					long: this.longitude,
					mer_take_location: [this.latitude, this.longitude], // 经纬度
					mer_take_day: [], // 提货点营业日期
					mer_take_time: this.mer_take_time, // 提货时间
					mer_info: this.intro,
					mer_keyword: this.cruxText,
					service_phone: this.servicePhone,
					mer_address: this.mer_address,
					mer_state: this.merState ? '1' : '0',
					type: '2',
					uploadedqualifications: '',
					id: this.id,
					credit_buy: this.credit_buy,
					settle_cycle: this.settle_cycle,
					interest_rate: this.interest_rate
				}
				// 营业时间
				this.dateWeek.map(i => {
					if (i.isCheck) {
						data.mer_take_day.push(i.id)
					}
				})

				merchantUpdateAPI(data).then(res => {
					Toast(res.message)
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				}).catch(err => {
					Toast(err)
				})
			},

			selfLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude.toString();
						this.longitude = res.longitude.toString();
						this.longLati = `${res.latitude},${res.longitude}`
					},
					fail: (err) => {
						Toast(err)
					}
				});
			},

			seleckImage(i) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.images[i].img = res.data.path
				});
			},
			seleckImageArr() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.imagesArr.push(res.data.path)
				});
			},
			delImg(i) {
				let that = this
				uni.showModal({
					title: '删除图片',
					content: '确定删除图片?',
					success: res => {
						if (res.confirm) {
							that.images[i].img = ''
						}
					}
				})
			},
			delImgArr(i) {
				let that = this
				uni.showModal({
					title: '删除图片',
					content: '确定删除图片?',
					success: res => {
						if (res.confirm) {
							that.imagesArr.splice(i, 1);
						}
					}
				})
			},
			priviewImg(url, index = 0) {
				uni.previewImage({
					urls: url,
					current: index
				})
			},
			navTo(url) {
				if (url == '/pages/select_address/select_address_n') {
					uni.$once('changeAddress', (res) => {
						this.mer_address = res.formatted_addresses.recommend;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.longLati = `${res.latitude},${res.longitude}`
					})
				}
				uni.navigateTo({
					url: url
				})
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>


<style lang="scss">
	.icon-xinghao {
		font-size: 28.07rpx;
		color: red;
		margin-right: 6px;
	}

	.basice_item {
		background-color: #fff;
		padding: 38.6rpx 35.09rpx;
		margin-bottom: 35.09rpx;
	}

	.headline {
		margin-bottom: 42.11rpx;

		.text {
			font-size: 35.09rpx;
			font-weight: bold;

			&::before {
				content: '';
				display: inline-block;
				width: 4px;
				height: 20px;
				background: linear-gradient(180deg, #66CE69 0%, #20A162 100%);
				border-radius: 0px 2px 2px 0px;
				margin-right: 8.77rpx;
			}
		}
	}

	.store_bg {
		margin-bottom: 49.12rpx;

		.text {
			font-size: 31.58rpx;
			margin-bottom: 24.56rpx;
		}

		.upload {
			width: 100%;
			height: 210.53rpx;
			border-radius: 7.02rpx;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpbjt.png');
			background-repeat: no-repeat;
			background-size: cover;
			text-align: center;
			font-size: 28.07rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.icon-tupian1 {
				font-size: 77.19rpx;
				color: #666666;
			}
		}
	}

	.store_avatar {
		width: 100%;

		.avatar_box {
			.text {
				font-size: 31.58rpx;
				margin-bottom: 24.56rpx;
			}

			.avatar_img {
				width: 210.53rpx;
				height: 210.53rpx;
				background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dptx.png');
				background-repeat: no-repeat;
				background-size: cover;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.icon-tupian1 {
					font-size: 52.63rpx;
					color: #666666;
				}
			}
		}

		.other-img {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.other-item {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.zizhi_box {
			.text {
				font-size: 31.58rpx;
				margin-bottom: 24.56rpx;
			}

			.zizhi_img {
				width: 382.46rpx;
				height: 210.53rpx;
				background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpzz.png');
				background-repeat: no-repeat;
				background-size: cover;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.icon-tupian1 {
					font-size: 52.63rpx;
					color: #666666;
				}
			}
		}
	}

	.ask_title {
		margin: 36.84rpx 0 24.56rpx 0;
	}

	.shoot_ask {
		margin-bottom: 49.12rpx;

		.shoot_item {
			.shoot_img {
				width: 157.89rpx;
				height: 105.26rpx;
			}

			.shoot_msg {
				justify-content: center;
				text-align: center;
			}
		}
	}

	.street_bg {
		color: #666666;

		.text {
			font-size: 31.58rpx;
			margin-bottom: 24.56rpx;
		}

		.street_img {
			padding: 0 31.58rpx;
			width: 100%;
			height: 184.21rpx;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/wyly/dpbjt.png');
			background-repeat: no-repeat;
			background-size: cover;
			font-size: 28.07rpx;

			.icon-tupian1 {
				font-size: 52.63rpx;
				margin-right: 47.37rpx;
			}
		}
	}

	.sub_title {
		font-size: 31.58rpx;
		flex-shrink: 0;
	}

	.item_cell {
		padding: 31.58rpx 0;
		border-bottom: 1px solid #F7F7F7;

		.com_input {
			flex: 1;
		}

		.ziti {
			margin-right: 21.05rpx;
		}

		.get_site {
			color: #20A162;
		}
	}

	.remark {
		margin-top: 24.56rpx;
		font-size: 24.56rpx;
		color: #CCCCCC;
	}

	.remarks {
		margin-left: 20px;
		font-size: 24.56rpx;
		color: #CCCCCC;
	}

	.long_lat {
		margin: 31.58rpx 0;
		width: 100%;
		height: 92.98rpx;
		border-radius: 14.04rpx;
		padding: 0 21.05rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f7f7f7;

		.get_site {
			color: #20A162;
		}
	}

	.week_box {
		margin-top: 31.58rpx;
		display: flex;
		flex-wrap: wrap;

		.week_item {
			margin-right: 17.54rpx;
			margin-bottom: 17.54rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.date_week {
				text-align: center;
				line-height: 56.14rpx;
				width: 149.12rpx;
				height: 56.14rpx;
				background-color: #F2F2F2;
			}

			.date_week_a {
				color: #20A162;
				background-color: rgba(102, 206, 105, 0.5);
			}
		}
	}

	.bus_time {
		margin-top: 24.56rpx;
		justify-content: space-between;

		.select {
			color: #999999;
			text-align: center;
			line-height: 84.21rpx;
			width: 284.21rpx;
			height: 84.21rpx;
			background: #F6F6F6;
			border-radius: 4px;
		}
	}

	.submit_btn {
		margin-left: 50%;
		transform: translate(-50%);
		line-height: 84.21rpx;
		border-radius: 100px;
		background-color: #20A162;
		color: #fff;
		height: 84.21rpx;
		width: 680.7rpx;
		margin-top: 84.21rpx;
		margin-bottom: 175.44rpx;
	}
</style>