Delivery-merchant/pages/Storesettings.vue

<template>
<!-- 	<view>
	<titlenav></titlenav> -->
	<view class="stores">
		<view class="title">店铺设置</view>
		<u-cell-group :border="false" class="from">
			<u-cell-item title="店铺头像" is-link>
				<image class="imgBox" src="https://bpic.588ku.com/illus_water_img/21/07/05/ecab6de5a7b2972500459ba95cf97deb.jpg" mode=""></image>
			</u-cell-item>
			<u-cell-item v-if="form.labels == 1" title="店铺标签" is-link @click="chooseSex">接受预约</u-cell-item>
			<u-cell-item v-if="form.labels == 2" title="店铺标签" is-link @click="chooseSex">不接受预约</u-cell-item>
			<u-cell-item title="营业时间" is-link>07:00-14:00 14:00-14:00</u-cell-item>
			<u-field name="店铺电话" label="店铺电话" placeholder="请输入" v-model="form.phone" />
			<u-field name="起送费(元)" label="起送费(元)" placeholder="请输入" v-model="form.delivery" />
			<u-field name="配送费(元)" label="配送费(元)" placeholder="请输入" v-model="form.distribution" />
		</u-cell-group>
		<view class="characteristic">店家特色</view>
		<u-field type="textarea" placeholder="请输入" v-model="form.characteristic" />
		<view class="characteristic">店家公告</view>
		<u-field type="textarea" placeholder="请输入" v-model="form.notice" />
		<view class="btn"><u-button block type="primary" @click="submit">保存</u-button></view>
	</view>
	<!-- </view> -->
</template>

<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: {
		Titlenav
	},
	data() {
		return {
			form: {
				labels: 1
			}
		};
	},
	// computed: {
	// 	...mapState(['systemInfo'])
	// },
	methods: {
		chooseSex() {
			uni.showActionSheet({
				itemList: ['接受预约', '不接受预约'],
				success: res => {
					this.form.labels = (res.tapIndex + 1).toString();
				},
				fail(res) {
					console.log(res.errMsg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.stores {
	padding-bottom: 120px;
	/deep/ .u-btn {
		font-size: 16px;
	}
	.from {
		/deep/ .u-iconfont {
			font-size: 14px !important;
		}
		/deep/ .u-cell {
			padding: 17px 0;
			color: #000000;
			font-weight: bold;
		}
		/deep/ .u-cell_title {
			font-size: 14px;
		}
		/deep/ .u-cell__value {
			color: #000000;
			font-weight: 400;
			height: 36px;
			font-size: 14px;
			line-height: 36px;
		}
		/deep/ .u-field {
			padding: 23px 0;
			color: #000000;
			font-weight: bold;
			text-align: right;
		}
		/deep/ .uni-input-input {
			text-align: right;
			font-weight: 400;
		}
		/deep/ .uni-input-placeholder {
			text-align: right;
			font-weight: 400;
			font-size: 16px;
		}
		/deep/ .u-label {
			span {
				width: 90px;
				font-size: 14px;
			}
		}
	}
	/deep/ .u-btn {
		height: 48px;
		font-size: 14px;
		margin: 6px 0;
	}
	/deep/ .u-field {
		padding: 0;
	}
	/deep/ .u-label {
		flex: 0 0 0 !important;
	}
	/deep/ .uni-textarea-textarea {
		font-size: 16px;
		font-weight: 400;
		color: #000000;
		line-height: 24px;
	}
	margin: 10px 20px 0;
	.characteristic {
		font-size: 14px;
		font-weight: bold;
		color: #000000;
		line-height: 24px;
		margin: 24px 0 8px 0;
	}
	/deep/ .uni-textarea-placeholder {
		font-weight: 400;
		font-size: 16px;
	}
	.imgBox {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}
	.text1 {
		font-size: 18px;
		font-weight: 400;
		color: #c8c9cc;
		line-height: 25px;
		text-align: right;
	}
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		margin-bottom: 10px;
	}
	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		padding: 6px 43px;
		padding-bottom: 34px;
		padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
		padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
		background-color: #ffffff;
	}
}
</style>