front-end/mobile-code/src/admin/goodsManage/freight.vue

<template>
	<div class="app-content">
		<div class="module-com new_wrap">
			<div class="module-det">
				<div>
					<input type="text" v-model="form.first" class="setting-inp" />
					<span>公里内免运费，超过每增加1公里，</span>
				</div>
				<div>
					<span>运费增加</span>
					<input type="text" v-model="form.add" class="setting-inp" />
					<span>元。</span>
				</div>
			</div>
		</div>
		<div class="admin-button-com blue big" @click="confirmFn">确认</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { getUser } from '@/utils/auth'
import { freightSet } from '@/api/goods'
export default {
	name: 'setting-freight',
	data() {
		return {
			form: {
				first: 0,
				add: 0
			}
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad() {},
	mounted() {
		// this.init()
	},
	watch: {
		userInfo() {
			if (!this.$util.isEmpty(this.userInfo)) {
				this.form.first = this.userInfo.extend.freeDistance
				this.form.add = this.userInfo.extend.freight
			}
		}
	},
	methods: {
		init() {
			getUser().then(res => {
				this.form.first = this.userInfo.extend.freeDistance
				this.form.add = this.userInfo.extend.freight
			})
		},
		confirmFn() {
			freightSet(this.form).then(res => {
				this.$msg('修改成功！')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.module-com {
		margin-bottom: 20px;
		padding: 30px;
		background-color: #fff;
		color: $fontColor2;
	}
	.admin-button-com {
		width: calc(100% - 100px);
		margin: 60px 30px 0;
	}
	.new_wrap {
		.module-det {
			color: $fontColor3;
			font-size: 28px;
			& > div {
				@include disFlex(center, flex-start);
				flex-wrap: wrap;
				margin-bottom: 20px;
				&:last-child {
					margin-bottom: 0;
				}
			}
			.setting-inp {
				width: 140px;
				height: 70px;
				border: 2px solid $borderColor;
				border-radius: 10px;
				margin: 0 16px;
				text-align: center;
				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>