xiaokuaisong-shopapp/uniapp05/pages/my/my.vue

<template>
  <view class="orderSum">
	 
    <!-- 登录 -->
    <view class="orderSumLeft" v-if="user.message==='ok'">
      <view class="userImg">
        <image :src="user.userAvatar" class="user"></image>
        <text class="businessName">{{user.userName}}</text>
      </view>
    </view>
	<!-- 未登录 -->
	<view class="orderSumLeft" v-else>
	  <view class="userImg">
	    <image src="http://39.101.78.35/images/user_avatar/0/MsteAaCP-微信图片_20240905184257.jpg" class="user"></image>
	    <text class="businessName">未登录</text>
	  </view>
	</view>
    
    <view class="orderSumRight" @click="orderSumRight">
      <view class="today">
        <text class="todayTitle">今日收入/元</text>
        <text>1069.8</text>
      </view>
      <view class="today">
        <text class="todayTitle">今日订单/单</text>
        <text>1221</text>
      </view>
    </view>
  </view>
  <view class="feature">
    <view class="square" v-for="(item,index) in featureList" :key="index">
      <navigator class="imageContainer" :url="item.url">
        <image :src="item.imgUrl" class="image"></image>
      </navigator>
      <view class="featureName">{{item.name}}</view>
    </view>
  </view>
  <view class="setting">
    <view class="merchantSetting">
      店铺设置
    </view>
    <view class="settingList">
      <view class="state">
        营业状态
        &nbsp;
        &nbsp;
        &nbsp;
        关
        <switch @change="handleSwitchChange" checked color="#FFCC33" style="transform:scale(0.7)"/>
        开
      </view>
      <view class="state">
        营业时间
        <view class="time">
          <uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
        </view>
      </view>
      <view class="state">
        账号管理
      </view>
      <view class="logout" @click="logout">
        退出登录
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { apiImageUrl } from '../../API/api';
onShow(() => {
  getLoginUser();
});
const user = ref({
  userAvatar: '',
  userName: '',
  message:''
});
const getLoginUser = () => {
  uni.request({
    //url:'http://localhost:9999/api/business/get/current',
    url: apiImageUrl + '/api/business/get/current',
    method: 'POST',
    header: {
      'cookie': uni.getStorageSync("cookie")
    },
    data: {},
  success: (res) => {
  	console.log(res.data.message)//控制台在登录时返回ok未登录时返回”未登录“
  	user.value.message=res.data.message
  	if(user.value.message==='ok')
  	{
  		user.value.userName=res.data.data.businessName
  		user.value.userAvatar = res.data.data.businessAvatar
  	}
  	
  	
  	console.log(res)
  	console.log("我的获取当前登录信息");
  },
    fail() {
      console.log('出错啦');
    }
  });
};
const featureList = ref([
  { url: '/pages/manage/manage', imgUrl: '../../static/Gourmet/meishi.png', name: '店铺管理' },
  { url: '/pages/product/product', imgUrl: '../../static/Gourmet/meishi_caomei.png', name: '商品管理' },
  { url: '/pages/Statistics/Statistics', imgUrl: '../../static/Gourmet/meishi_hanbao.png', name: '数据统计' },
  { url: '/pages/orderManagement/orderManagement', imgUrl: '../../static/Gourmet/meishi_li.png', name: '订单管理' },
  { url: '/pages/blueTooth/blueTooth', imgUrl: '../../static/Gourmet/meishi_mangguo.png', name: '联机服务' },
  { url: '/pages/evaluate/evaluate', imgUrl: '../../static/Gourmet/meishi_manyuemei.png', name: '评价管理' },
  { url: '/pages/distribution/distribution', imgUrl: '../../static/Gourmet/meishi_niunai.png', name: '配送服务' },
  { url: '/pages/more/more', imgUrl: '../../static/Gourmet/meishi_tusi.png', name: '更多功能' },
]);
const orderSumRight = () => {
  uni.navigateTo({
    url: '/pages/money/money'
  });
};
const logout = () => {
  uni.removeStorageSync('identify');
  uni.removeStorageSync('cookie');
  uni.removeStorageSync('userInfo');
  uni.reLaunch({
    url: '/pages/login/login'
  });
  uni.showToast({
    title: '退出成功',
    duration: 2000
  });
};




/* const handleSwitchChange = (value) => {
  const storeStatus = value ? 1 : 0; 
  console.log(storeStatus+"值为"); */
  
   // 初始化状态
    const [storeStatus, setStoreStatus] = useState(0);
  
    // 定义handleSwitchChange函数
    const handleSwitchChange = (value) => {
      const newStoreStatus = value ? 1 : 0;
      setStoreStatus(newStoreStatus);  // 更新状态
      console.log(`storeStatus值为: ${newStoreStatus}`);
    
  
/*  const data = {
    address: '',
    businessAvatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vNYHZ0vsWMLi4nfLG4rWEwHaE7?rs=1&pid=ImgDetMain',
    businessImages: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vNYHZ0vsWMLi4nfLG4rWEwHaE7?rs=1&pid=ImgDetMain',
    businessName: '麻辣烫',
    businessPhone: '',
    businessProfile: '',
    categoryId: 0,
    endBusiness: '',
    id: 1830063677349658625, 
    startBusiness: '',
    state: 0,
    storeStatus: 1,
    userId: 0 
  };
  uni.request({
  	url:apiImageUrl+'/api/business/update/my',
	method:'POST',
	  header: {
	      'content-type': 'application/json' 
	    },
	    data: data, 

	success(res) {
		console.log('Success:', res.data);
	},
	fail() {
		console.error('Error:', error);
	}
  }) */



}; 

</script>

<style>
.orderSum {
	width: 90%;
	height: 150px;
	margin: 0 auto;
	display: flex;
	align-items: center; 
}

.orderSumLeft {
	flex: 1;
	height: 100%;
}

.orderSumRight {
  flex: 1.714;
  display: flex; 
  flex-direction: column;
  justify-content: space-around; 
  align-items: center; 
  text-align: center; 
  border: 4px solid #ebebeb;
  border-radius: 15px;
}

.today {
  width: 100%; 
  font-size: 15px;
  padding: 10px 0; 
  box-sizing: border-box;
  border-bottom: 1px solid #ebebeb;
}
.today:last-child {
  border-bottom: none; 
}
.todayTitle {
  display: block;
  padding-bottom: 5px;
}

.feature {
  width: 100%; 
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 10px; 
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 15px;
  border: 4px solid #ebebeb;
}

@media (max-width: 768px) { 
  .feature {
    flex-wrap: wrap;
  }
}


.square {
	width: calc((100% - 20px*3) / 4); 
	height: 70px; 
	margin-bottom: 10px; 
	margin-top: 10px;
	box-sizing: border-box;
}
.imageContainer {
	width: 70%;
	height: 70%;
	margin: 0 auto;
}
.image {
	width: 100%;
	height: 100%;
}
.featureName {
	font-size: 15px;
	margin-top: 5px;
	text-align: center;
}
.merchantSetting {
	margin-top: 10px;
	font-size: 35rpx;
	font-weight: 700;
	padding: 10px;
	color: #fff;
	background-color: #4095e5;
}
.settingList {
	width: 70%;
	margin: 0 auto;
}
.state {
	font-size:35rpx;
	font-weight: 700;
    margin-top: 20px;
}
.time {
	margin-top: 10px;
}
.logout {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 35rpx;
	text-align: center;
    background-color: #fff;
}
.userImg {
	width: 60%;
	height: 50%;
	margin-top: 30px;
	margin-left: 15px;
}
.user {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}
.businessName {
	margin-left: 15px;
	padding-top: 20px;
	font-size: 30rpx;
	font-weight: 700;
}
</style>