eduepos_ui_store/pages/tools/setting.vue

<template>
    <view class="setting-page">
        
		<scroll-view scroll-y class="scroll-content">
			<view class="cell">
				<view class="label">自动接单</view>
				<view class="value">
					<!-- <u-switch v-model="autoTake" size="22" class="switch"></u-switch> -->
					<switch :checked="autoTaking" @change="handAutoTakingChange" color="#007AFF" class="switch" style="transform:scale(0.7)"></switch>
				</view>
			</view>
			<view class="cell">
				<view class="label">食品安全档案</view>
				<view class="value" @click="goToSafetyArchives">
					<u-icon name="arrow-right" size="22" color="#6c6c6c"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="label">修改密码</view>
				<view class="value" @click="goToUpdatePwd">
					<u-icon name="arrow-right" size="22" color="#6c6c6c"></u-icon>
				</view>
			</view>
		</scroll-view>

        <view class="footer-btn">
            <view class="logout" @click="showModalDialog">
                退出登录
            </view>
        </view>

		<u-modal :show="formVisible" :title="modalTitle" closeOnClickOverlay showCancelButton @confirm="updatePwd"
			@cancel="cancelUpdate" @close="cancelUpdate">
			<view class="container">
				<view class="name">
					<u-input border v-model="formItem.oldPwd" password placeholder="请输入原密码"></u-input>
				</view>
				<view></view>
				<view class="name">
					<u-input border v-model="formItem.newPwd1" password placeholder="请输入新密码"></u-input>
				</view>
				<view></view>
				<view class="name">
					<u-input border v-model="formItem.newPwd2" password placeholder="请确认新密码"></u-input>
				</view>
			</view>
		</u-modal>
		<!-- <u-modal show-cancel-button :show="quitShow" @confirm="confirm" :confirm-color="lightColor" @close="closeMo" @cancel="closeMo"
		  :content="'确定要退出登录么？'"></u-modal> -->
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			updateUrl: '/storeOrderApi/updateStoreAutoGo',
			autoGoUrl: '/storeOrderApi/getStoreAutoGo',
			updatePwdUrl: '/storeUserLoginApi/updatePwd',
            autoTaking: false,
			quitShow: false,
			formItem: {},
			formVisible: false,
			modalTitle: '修改密码'
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		getStoreAutoGo() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.autoGoUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.autoTaking = res.data.obj.autoGo;
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
							return;
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
		},
		// 自动接单切换
		handAutoTakingChange (e) {
			uni.showLoading({
				title: '加载中'
			});
			this.autoTaking = e.detail.value
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.updateUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					autoGo: this.autoTaking ? 1 : 0
				},
				success: res => {
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
		},
		/**
		 * 显示退出登录对话框
		 */
		showModalDialog() {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否确认退出？',
				success: function (r) {
					if (r.confirm) {
						that.confirm()
					} else if (r.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		    // this.quitShow = true;
		},
        goToSafetyArchives () {
            uni.navigateTo({
                url: '/pages/tools/safety-archives'
            })
        },
		goToUpdatePwd () {
           this.formVisible = true
        },
		closeMo () {
			this.quitShow = false
		},
		
		updatePwd() {
			if (!this.formItem.oldPwd) {
				uni.showToast({
					title: '请输入原密码',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.newPwd1) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.newPwd2) {
				uni.showToast({
					title: '请确认新密码',
					icon: 'none'
				})
				return
			}
			if (this.formItem.newPwd1 != this.formItem.newPwd2) {
				uni.showToast({
					title: '两次新密码不一致',
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updatePwdUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					oldPwd: this.formItem.oldPwd,
					newPwd: this.formItem.newPwd1
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.formVisible = false
						this.formItem = {
							storeUserId: '',
							userName: '',
							tel: ''
						}
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
							return;
						}
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				}
			})
		},
		cancelUpdate () {
			this.formVisible = false;
			this.formItem = {}
		},
		
		/**
		 * 确认退出
		 * 清除缓存重新登录
		 */
		confirm() {
			// this.quitShow = false
			// uni.removeStorageSync('riderInfo')
			// console.log('111 :>> ', 111);
			uni.clearStorage()
			uni.reLaunch({ 
				url: '/pages/login/login'
			});
		}
    },
    onLoad () {
		this.getStoreAutoGo();
	}
}
</script>
<style lang="scss" scoped>
.setting-page {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}

.scroll-content {
    height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
}
.cell {
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    @include between;
    border-top: 2rpx solid #ececec;
    .label {
        width: 200rpx;
    }
    .value {
        flex: 1;
        @include flexEnd;
    }
}
.footer-btn {
    width: 100vw;
	margin-top: 40rpx;
    @include flexCenter;
    .logout {
        width: 80%;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: $theme-color;
        color: #fff;
        @include flexCenter;
    }
}
.container {
	.name {
		margin: 40rpx 0;
		border: 2rpx solid #ececec;
		border-radius: 6rpx;
	}
}
</style>