eduepos_ui_store/pages/mine/index.vue

<template>
    <view class="mine-page">
        <view class="store-card">
            <view class="cover">
                <image class="avatr" widthFix :src="store.iconUrl" />
            </view>
            <view class="cont">
                <view class="name" @click="handStoreInfo"><view class="text">{{ store.storeName }}</view><u-icon class="more" name="arrow-right" size="18" color="#666"></u-icon></view>
                <view class="desc" @click="goToQrcodes">
                    <text class="desc-text">{{ user.desc }}</text>
                    <image class="qrcode" src="../../static/imgs/mine/qrcode.png" />
                </view>
            </view>
            <view class="business-status" @click="businessToggleVisible = true">
                <text class="status">{{ businessStatus }}</text>
                <u-icon name="arrow-down" size="14" color="#1A78F6"></u-icon>
            </view>
        </view>
        <view class="curr-day-manage-info">
            <view class="title">今日经营信息</view>
            <view class="manage-card">
                <view class="item">
                    <view class="count">¥{{(info.todayOrderFeeCount)}}</view>
                    <view class="label">预计收入</view>
                    <view class="compare" v-if="info.todayOrderFeeCount >= info.yesterdayOrderFeeCount">比昨日同时段 + {{Math.round((info.todayOrderFeeCount-info.yesterdayOrderFeeCount) * 100)/100}}</view>
                    <view class="compare" v-else>比昨日同时段 - {{Math.round((info.yesterdayOrderFeeCount-info.todayOrderFeeCount) * 100)/100}}</view>
                </view>
                <view class="divider"></view>
                <view class="item">
                    <view class="count">{{info.todayOrderNum}}单</view>
                    <view class="label">有效订单</view>
                    <view class="compare" v-if="info.todayOrderNum >= info.yesterdayOrderNum">比昨日同时段 + {{info.todayOrderNum-info.yesterdayOrderNum}}单</view>
                    <view class="compare" v-else>比昨日同时段 - {{info.yesterdayOrderNum-info.todayOrderNum}}单</view>
                </view>
            </view>
        </view>
        <view class="tools">
            <view class="item" v-for="(item, idx) in tools" :key="item.name" @click="handItem(item, idx)">
                <image :src="item.icon" class="cover" />
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <u-modal :show="businessToggleVisible" title="店铺状态" closeOnClickOverlay @close="businessToggleVisible = false" :showConfirmButton="false">
            <view class="container">
                <view class="business-date" v-if="store.businessStartStr == null || store.businessStartStr == ''">营业时间: 00:00 - 23:59</view>
                <view class="business-date" v-if="store.businessStartStr">营业时间: {{store.businessStartStr}} - {{store.businessEndStr}}</view>
                <view class="basiness-list">
                    <view class="item" v-for="item in businessList" :key="item.name" @click="handItemChange(item)">
                        <view class="radio">
                            <u-icon v-if="item.select" name="checkmark-circle-fill" size="28" color="#10B311"></u-icon>
                        </view>
                        <view class="cont">
                            <view class="name">{{ item.name }}</view>
                            <view class="desc">{{ item.desc }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </u-modal>
		<view class="fixed-bottom"></view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			storeUrl: '/storeManageApi/getStoreInfo',
			infoUrl: '/storeManageApi/getBusinessInfo',
			updateBusinessStatusUrl: '/storeManageApi/updateBusinessStatus',
            businessToggleVisible: false,
            user: {
                id: '',
                picture: require('../../static/tab-my.png'),
                name: '',
                desc: '店铺推广码'
            },
			store: {},
			info: {
				todayOrderFeeCount: 0,
				todayOrderNum: 0,
				yesterdayOrderFeeCount: 0,
				yesterdayOrderNum: 0
			},
            businessStatus: '营业中',
            tools: [
     //            {
     //                icon: require('../../static/imgs/mine/1.png'),
     //                name: '结算管理',
					// path: '../tools/settle'
     //            },
				{
				    icon: require('../../static/imgs/mine/1.png'),
				    name: '结算管理',
					path: '../tools/settle-order'
				},
                {
                    icon: require('../../static/imgs/mine/2.png'),
                    name: '评价管理',
					path: '../evaluate/index'
                },
                {
                    icon: require('../../static/imgs/mine/3.png'),
                    name: '店员管理',
					path: '../store/clerk'
                },
                {
                    icon: require('../../static/imgs/mine/4.png'),
                    name: '小票打印机',
					path: '../tools/print'
                },
                {
                    icon: require('../../static/imgs/mine/5.png'),
                    name: '配送管理',
					path: '../store/distribution'
                },
                {
                    icon: require('../../static/imgs/mine/6.png'),
                    name: '商品管理',
					path: '../goods/goods'
                },
                // {
                //     icon: require('../../static/imgs/mine/7.png'),
                //     name: '模板市场'
                // },
                {
                    icon: require('../../static/imgs/mine/8.png'),
                    name: '营销中心',
                    path: '../activity/marketing'
                },
                {
                    icon: require('../../static/imgs/mine/9.png'),
                    name: '设置',
					path: '../tools/setting'
                },
				{
                    icon: require('../../static/imgs/mine/10.png'),
                    name: '核销',
					path: '../tools/hexiao_coupon'
                },
				{
                    icon: require('../../static/imgs/mine/1.png'),
                    name: '巡检结果',
					path: '../inspect/list'
                },
				{
                    icon: require('../../static/imgs/mine/2.png'),
                    name: '整改',
					path: '../rectification/list'
                }
            ],
            businessList: [
                {
                    name: '正常营业',
                    desc: '按营业时间自动开关店',
                    select: false,
					value: 1
                },
                {
                    name: '紧急闭店',
                    desc: '店铺紧急关闭，按开始营业时间自动恢复',
                    select: false,
					value: 0
                },
                {
                    name: '暂停营业',
                    desc: '店铺关闭直到手动恢复营业',
                    select: false,
					value: 2
                }
            ]
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		loadData () {
			uni.showLoading({
				title: '加载中'
			});
			// 获取店铺信息
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.storeUrl,
				data: {
					storeUserId: this.storeInfo.storeUserId,
					sign: sign,
					timestamp: dateStr,
					storeId: this.storeInfo.storeId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.store = res.data.obj;
						
						this.businessStatus = this.store.businessStatusName
						
						this.businessList.forEach(i => {
							if (i.value == this.store.businessStatus){
								i.select = true
							}
						})
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
			
		},
		
		getInfo () {
			uni.showLoading({
				title: '加载中'
			});
			// 今日经营信息
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.infoUrl,
				data: {
					storeUserId: this.storeInfo.storeUserId,
					sign: sign,
					timestamp: dateStr,
					storeId: this.storeInfo.storeId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.info = res.data.obj;
						
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
			
		},
        handStoreInfo () {
            uni.navigateTo({
                url: `/pages/store/index?data=` + encodeURIComponent(JSON.stringify(this.store))
            });
        },
        handItem (item, idx) {
            // const path = [
            //     'settle',
            //     'evaluation',
            //     'clerk',
            //     'print',
            //     'distribution',
            //     'goods',
            //     'temp',
            //     'marketing',
            //     'setting',
            // ]
            // if (path[idx] == 'temp') {
            //     uni.navigateTo({
            //         url: '/pages/store/extensionCode?id=' + this.user.id
            //     })
            //     return
            // }
            uni.navigateTo({
                url: item.path
            });
        },
        handItemChange (item) {
            if (item.select) {
                return;
            }
			uni.showLoading({
				title: '加载中'
			});
            this.businessList.forEach(i => i.select = false)
            item.select = true
            this.businessStatus = item.name
            this.businessToggleVisible = false
			
			
			// 修改店铺营业状态
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
			this.requst({
				url: this.updateBusinessStatusUrl,
				data: {
					sign: sign,
					timestamp: dateStr,
					storeId: this.storeInfo.storeId,
					businessStatus: item.value
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
						});
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
			
        },
        goToQrcodes () {
            uni.navigateTo({
                url: '/pages/store/extensionCode'
            });
        }
    },
	onHide() {
		this.businessList.forEach(i => i.select = false);
	},
    onLoad () {
		// this.loadData();
    },
	onShow() {
		this.loadData();
		this.getInfo();
	}
}
</script>
<style lang="scss" scoped>
.mine-page {
    position: relative;
    padding-bottom: 30rpx;
    box-sizing: border-box;
}
.store-card {
    width: 100vw;
    @include between;
    padding: 20rpx 20rpx 40rpx;
    box-sizing: border-box;
    border-bottom: 10rpx solid #f5f5f5;
    .cover {
        min-width: 120rpx;
        width: 120rpx;
        height: 120rpx;
        margin-right: 10rpx;
        // background-color: #D8E9FF;
        border: 2rpx solid #ececec;
        .avatr {
            width: 120rpx;
            height: 120rpx;
        }
    }
    .business-status {
        min-width: 160rpx;
        width: 160rpx;
        height: 60rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
        color: $theme-color;
        background-color: #D8E9FF;
        @include flexCenter;
        font-size: $font-sm;
        border: 2rpx solid $theme-color;
        padding: 0 10rpx;
        box-sizing: border-box;
    }
    .status {
        margin-right: 10rpx;
        flex: 1;
        text-align: center;
    }
    .cont {
        width: calc(100vw - 40rpx - 130rpx - 180rpx);
        height: 120rpx;
        padding-top: 20rpx;
        box-sizing: border-box;
        .name {
            font-size: 36rpx;
            @include flexStart;
        }
        .text {
            width: calc(100% - 50rpx);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }
        .more {
            min-width: 40rpx;
            margin-left: 10rpx;
        }
        .desc {
            font-size: $font-base;
            color: $icon-color;
            margin-top: 10rpx;
            @include flexStart;
            .qrcode {
                width: 32rpx;
                height: 32rpx;
                margin-left: 40rpx;
            }
        }
    }
}
.curr-day-manage-info {
    padding: 20rpx;
    box-sizing: border-box;
    .title {
        font-size: $font-lg;
        color: $text-color;
        margin-bottom: 20rpx;
    }
    .manage-card {
        background-color: $theme-color;
        border-radius: 20rpx;
        height: 208rpx;
        @include flexCenter;
        padding: 30rpx 40rpx;
        .divider {
            width: 4rpx;
            height: 128rpx;
            background-color: #fff;
            margin: 0 30rpx;
        }
        .item {
            flex: 1;
            height: 100%;
            color: #fff;
            text-align: center;
        }
        .count {
            font-size: 40rpx;
            font-weight: bold;
        }
        .label {
            font-size: $font-sm;
            margin: 14rpx 0 10rpx;
        }
        .compare {
            font-size: $font-base;
        }
    }
}
.tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 20rpx;
    background-color: #fff;
    .item {
        width: 250rpx;
        height: 200rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-top: 2rpx solid #ececec;
        .cover {
            width: 72rpx;
            height: 72rpx;
            margin-bottom: 10rpx;
        }
        .name {
            font-size: $font-lg;
            color: $text-color;
        }
    }
    .item:nth-child(2), .item:nth-child(5), .item:nth-child(8) {
        border-left: 2rpx solid #ececec;
        border-right: 2rpx solid #ececec;
    }
    .item:nth-child(7), .item:nth-child(8), .item:nth-child(9) {
        border-bottom: 2rpx solid #ececec;
    }
    .item:nth-child(3n) {
        margin-right: 0;
    }
}
.container {
    .business-date {
        text-align: center;
        margin-bottom: 20rpx;
    }
    .item {
        @include flexCenter;
        background-color: #FBF6F6;
        margin-bottom: 20rpx;
        padding: 20rpx 40rpx;
        box-sizing: border-box;
    }
    .radio {
        min-width: 60rpx;
        width: 60rpx;
        margin-right: 20rpx;
    }
    .cont {
        width: calc(100% - 80rpx);
    }
    .name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }
    .desc {
        font-size: $font-lg;
        color: #111;
    }
}
.bottom-content {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 300upx;
	color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 2;
}

</style>