完成店铺选择功能

src/components/DynamicTime/index.vue

@@ -1,23 +1,33 @@
 <template>
-  <p>时区：[{{ props.timezone }}] {{ curTime }}</p>
+  <p>时区：{{ curTime }}</p>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useShopInfo } from '/@/stores/shopInfo'
 import dayjs, { Dayjs } from 'dayjs'
 
-const props = defineProps({
-  timezone: { type: String, default: 'America/Los_Angeles' }
-})
+const shopInfo = useShopInfo()
 
 let timer: NodeJS.Timeout
 let curTime = ref('')
 
 function getTime():string {
-  const now: Dayjs = dayjs(new Date()).tz(props.timezone)
+  let now: Dayjs = dayjs(new Date())
+  if(shopInfo.profile.time_zone) {
+    now = now.tz(shopInfo.profile.time_zone)
+  }
   return now.format("YYYY-MM-DD HH:mm")
 }
 
+watch(
+  () => shopInfo.profile.time_zone,
+  () => {
+    console.log("当前店铺：", shopInfo.profile)
+    curTime.value = getTime()
+  }
+)
+
 onMounted(() => {
   curTime.value = getTime()
   timer = setInterval(() => {

src/components/iconSelector/index.vue

@@ -194,7 +194,7 @@ const initFontIconData = async (name: string) => {
 		});
 	} else if (name === 'flag') {
 		// flag字体图标使用 `fi fi-xx`
-		if (state.fontIconList.awe.length > 0) return;
+		if (state.fontIconList.flag.length > 0) return;
 		await initIconfont.flag().then((res: any) => {
 			state.fontIconList.flag = res.map((i: string) => `fi ${i}`);
 		});

src/components/shopSelector/api.ts

@@ -1,10 +1,10 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 import XEUtils from 'xe-utils';
 
 export const apiPrefix = '/api/ad_manage/profiles/';
 
-export function GetList(query: PageQuery) {
+export function GetList(query: UserPageQuery) {
     return request({
         url: apiPrefix,
         method: 'get',

src/components/shopSelector/index.vue

@@ -1,32 +1,57 @@
 <template>
   <div>
-    <el-select v-model="selectedId" @change="changedVal">
-      <!-- <template #prefix>美国</template> -->
-      <el-option v-for="info in allShops" :label=info.name :value=info.id :key="info.id"></el-option>
+    <el-select v-model="selectedRow.id" @change="changedVal">
+      <template #prefix><i :class="flagIcon"></i></template>
+      <el-option v-for="info in allShops" :label=info.account_name :value=info.id :key="info.id">
+        <template #default>
+          <i :class="`fi fi-${info.country_code.toLowerCase()}`"></i> {{ info.account_name }}
+        </template>
+      </el-option>
     </el-select>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed, onBeforeMount } from 'vue';
 import type { Ref } from 'vue'
 import { GetList } from './api'
 import { Profile } from './types'
 import { useShopInfo } from '/@/stores/shopInfo'
 
-const selectedId: Ref<number> = ref(null)
+
+defineOptions({
+  name: 'ShopSelector'
+})
+
+const selectedRow: Ref<Profile> = ref({
+  id: 0,
+  profile_id: "",
+	account_name: "",
+	time_zone: "",
+	advertiser_id: "",
+	country_code: "",
+	currency_code: "",
+	marketplace_str_id: ""
+})
 const allShops: Ref<Profile[]> = ref([])
 const shopInfo = useShopInfo()
 
-onMounted(async () => {
-  const resp = await GetList({ page: {pageSize: 1000} })
-  console.log(resp)
+onBeforeMount(async () => {
+  const resp = await GetList({ pageSize: 1000, query: '{-refresh_token}' })
   allShops.value = resp.data
+  selectedRow.value = allShops.value[0]
+  shopInfo.updateShopInfo(selectedRow.value)
 })
 
-async function changedVal() {
-  console.log(selectedId)
-  await shopInfo.updateShopInfo(selectedId)
+const flagIcon = computed(()=> {
+  return "fi fi-" + selectedRow.value.country_code.toLowerCase()
+})
+
+const changedVal = () => {
+  shopInfo.updateShopInfo(selectedRow.value)
 }
 
 </script>
+
+<style scoped>
+</style>

src/components/shopSelector/types.ts

@@ -1,10 +1,10 @@
 export interface Profile {
   id: number,
-  profileId: string,
-	name: string,
-	timezone: string,
-	advertiserId: string,
-	countryCode: string,
-	currencyCode: string,
-	marketplaceId: string
+  profile_id: string,
+	account_name: string,
+	time_zone: string,
+	advertiser_id: string,
+	country_code: string,
+	currency_code: string,
+	marketplace_str_id: string
 }

src/layout/navBars/breadcrumb/user.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
 		<DynamicTime></DynamicTime>
-		<div class="layout-navbars-breadcrumb-user-icon">店铺</div>
+		<ShopSelector class="layout-navbars-breadcrumb-user-icon"></ShopSelector>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
@@ -92,7 +92,7 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
-// import tableSelector  from '/@/components/tableSelector.vue'
+import ShopSelector from '/@/components/shopSelector/index.vue'
 import DynamicTime from '/@/components/DynamicTime/index.vue'
 
 // 引入组件
@@ -113,9 +113,6 @@ const state = reactive({
 	disabledSize: 'large',
 });
 
-const shops = reactive([])
-const selectedShop = ref("")
-
 // 设置分割样式
 const layoutUserFlexNum = computed(() => {
 	let num: string | number = '';

src/stores/shopInfo.ts

@@ -3,48 +3,17 @@ import { Profile } from '/@/components/shopSelector/types'
 import { request } from '../utils/service'
 import { ref, Ref } from 'vue'
 
-// export const useShopInfo = defineStore('shopInfo', {
-//   state: (): Profile => ({
-//     id: 0,
-//     profileId: '',
-//     name: '',
-//     timezone: 'America/Los_Angeles',
-//     advertiserId: '',
-//     countryCode: '',
-//     currencyCode: '',
-//     marketplaceId: ''
-//   }),
-//   actions: {
-//     async updateShopInfo(id: number) {
-//       const resp = await this.getShopInfo(id)
-//       this.id = id
-//       this.profileId = resp.data.profile_id
-//       this.name = resp.data.account_name
-//       this.timezone = resp.data.time_zone
-//       this.advertiserId = resp.data.advertiser_id
-//       this.countryCode = resp.data.country_code
-//       this.currencyCode = resp.data.currency_code
-//       this.marketplaceId = resp.data.marketplace_str_id
-//     },
-//     async getShopInfo(id: number) {
-//       return request({
-//         url: '/api/adManage/profiles/' + id + '/',
-//         method: 'GET'
-//       })
-//     }
-//   }
-// })
 
-export const userShopInfo = defineStore('shopInfo', () => {
+export const useShopInfo = defineStore('shopInfo', () => {
   let profile: Ref<Profile> = ref({
     id: 0,
-    profileId: '',
-    name: '',
-    timezone: 'America/Los_Angeles',
-    advertiserId: '',
-    countryCode: '',
-    currencyCode: '',
-    marketplaceId: ''
+    profile_id: "",
+    account_name: "",
+    time_zone: "",
+    advertiser_id: "",
+    country_code: "",
+    currency_code: "",
+    marketplace_str_id: ""
   })
 
   async function getShopInfo(id: number) {
@@ -54,9 +23,15 @@ export const userShopInfo = defineStore('shopInfo', () => {
     })
   }
 
-  async function updateShopInfo(id: number) {
-    const resp = await getShopInfo(id)
-    profile.value = resp.data
+  function updateShopInfo(obj: Profile) {
+    profile.value.id = obj.id
+    profile.value.profile_id = obj.profile_id
+    profile.value.account_name = obj.account_name
+    profile.value.time_zone = obj.time_zone
+    profile.value.advertiser_id = obj.advertiser_id
+    profile.value.country_code = obj.country_code
+    profile.value.currency_code = obj.currency_code
+    profile.value.marketplace_str_id = obj.marketplace_str_id
   }
 
   return { profile, updateShopInfo }

src/utils/getStyleSheets.ts

@@ -89,7 +89,6 @@ const getFlagIconfont = () => {
 			}
 			for (let i = 0; i < sheetsList.length; i++) {
 				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
-					console.log(sheetsList[i].cssRules[j].selectorText)
 					if (
 						sheetsList[i].cssRules[j].selectorText &&
 						sheetsList[i].cssRules[j].selectorText.indexOf('.fi-') === 0 &&

src/views/demo/index.vue

@@ -8,12 +8,14 @@
      <p>{{ dateRange }}</p>
      <!-- <tableSelector v-model="selectedData" :tableConfig="tableConfig"></tableSelector> -->
      <!-- {{ selectedData }} -->
+     <shopInfo></shopInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
+import shopInfo from '/@/components/shopSelector/index.vue'
 // import tableSelector from '/@/components/tableSelector/index.vue'
 
 const dateRange = ref([])