add brand change modal

package.json

@@ -64,6 +64,7 @@
     "@vue/shared": "^3.0.0",
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
+    "pinyin-engine": "^1.2.2",
     "regenerator-runtime": "^0.12.1",
     "sass": "^1.63.3",
     "vue": "^2.6.11"

src/subpackage/device/components/brand_change_modal.vue

@@ -0,0 +1,173 @@
+<template>
+    <view class="brand-change-modal">
+        <view class="bcm-mask" v-show="isShow">
+            <view class="bm-content">
+                <view class="bc-title">品牌切换</view>
+                <input type="text" class="bc-ipt" v-model="searchTxt" placeholder="模糊搜索..." />
+                <view class="bc-tip">当前选中：{{ curSelected.name || '-' }}</view>
+                <view class="bc-tip">Tip：控件有bug，当前选中与下方不匹配时，滑动纠正</view>
+                <picker-view  class="bc-picker-view" immediate-change @change="pickerChange">
+                    <picker-view-column>
+                        <view class="bpv-item" v-for="(e, i) in showBrandList" :key="i">{{ e.name || '-' }}</view>
+                    </picker-view-column>
+                </picker-view>
+
+                <view class="bc-btns">
+                    <view class="bb-item" @click="hide">取消</view>
+                    <view class="bb-item" @click="confirm">确认</view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import util from '@/utils/util';
+import deviceServer from '../js/device_server';
+import deviceApi from '../js/device_api';
+import PinyinEngine from "pinyin-engine";
+export default {
+    data(){
+        return {
+            isShow: false,
+            searchTxt: '',
+            brandList: [],
+            initOptions: {},
+            pickerIdx: 0,
+            pyEngine: null,
+        }
+    },
+    computed: {
+        showBrandList(){
+            let { brandList, searchTxt, pyEngine } = this;
+
+            if(searchTxt&&pyEngine?.query){
+                let _ls = pyEngine.query(searchTxt);
+                return _ls || [];
+            }
+            return brandList.filter(item=>{
+                return item.name.includes(searchTxt);
+            });
+        },
+        curSelected(){
+            let { pickerIdx, showBrandList } = this;
+            return showBrandList?.[pickerIdx] || {};
+        }
+    },
+    mounted(){
+        // this.getBrandList();
+    },
+    methods: {
+        confirm(){
+            let { pickerIdx, showBrandList, initOptions } = this;
+            console.log('pickerIdx', pickerIdx);
+            console.log('showBrandList', showBrandList);
+            this.hide();
+            if(showBrandList?.length <= 0) return;
+            let _brand = showBrandList[pickerIdx];
+            initOptions?.success?.(_brand);
+            this.$emit('click:confirm', _brand);
+        },
+        pickerChange(e){
+            this.pickerIdx = e?.detail?.value?.[0];
+        },
+        async init(options){
+            if(this.brandList?.length <= 0) await this.getBrandList();
+            this.initOptions = options;
+            this.show();
+        },
+        show(){
+            this.isShow = true;
+        },
+        hide(){
+            this.isShow = false;
+        },
+        // 获取品牌列表
+		getBrandList(){
+            util.showLoad();
+			return deviceServer.get({
+			    url: deviceApi.brandList,
+			    data: {},
+			    failMsg: '加载品牌列表失败！'
+			})
+			.then(res=>{
+                util.hideLoad();
+                let _ls = res || [];
+				this.brandList = _ls;
+
+                if(_ls?.length > 0&&PinyinEngine){
+                    this.pyEngine = new PinyinEngine(_ls, ['name']);
+                }
+			})
+            .catch(util.hideLoad)
+		},
+    }
+}
+</script>
+
+<style lang="scss">
+    .bcm-mask{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+        .bm-content{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 40upx;
+            width: 620upx;
+            border-radius: 10px;
+            background-color: #fff;
+        }
+        .bc-title{
+            text-align: center;
+            @include flcw(32upx, 44upx, #1a1a1a, 500);
+        }
+        .bc-tip{
+            margin-top: 10upx;
+            @include flcw(20upx, 30upx, #9A9A9D);
+        }
+        .bc-ipt{
+            box-sizing: border-box;
+            margin-top: 38upx;
+            padding: 0 20upx;
+            height: 88upx;
+            border-radius: 10upx;
+            border: 2upx solid #d8d8d8;
+            @include flcw(28upx, 40upx, #1a1a1a, 500);
+        }
+        .bc-picker-view{
+            margin-top: 20upx;
+            width: 100%;
+            height: 300upx;
+            .bpv-item{
+                font-size: 28upx;
+                color: #1a1a1a;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+        .bc-btns{
+            margin-top: 30upx;
+            @include ctf(space-between);    
+            .bb-item{
+                width: 240upx;
+                height: 88upx;
+                border-radius: 10upx;
+                border: 2upx solid $mColor;
+                text-align: center;
+                @include flcw(32upx, 84upx, $mColor, 500);
+                &+.bb-item{
+                    background: $mColor;
+                    color: #fff;
+                }
+            }
+        }
+    }
+</style>

src/subpackage/device/pages/index/index.vue

@@ -37,13 +37,12 @@
 						hover-class="hover-active" 
 						@click="restartBtn"
 					>重启</view>
-					<picker mode="selector" :range="brandList" range-key="name" @change="brandChange">
-						<view 
-							v-if="isBrandSwitch"
-							class="ic-btn select-brand" 
-							hover-class="hover-active" 
-						>切换品牌</view>
-					</picker>
+					<view 
+						v-if="isBrandSwitch"
+						class="ic-btn select-brand" 
+						hover-class="hover-active" 
+						@click="interiorBrandSwitch"
+					>切换品牌</view>
 				</view>
 				
 			</view>
@@ -60,6 +59,8 @@
                 
             </view>
         </view>
+
+		<brand-change-modal ref="brandChangeModal" ></brand-change-modal>
     </view>
 </template>
 
@@ -68,7 +69,7 @@ import util from '../../../../utils/util';
 import store_name from '../../components/store_name/store_name';
 import deviceServer from '../../js/device_server';
 import deviceApi from '../../js/device_api';
-
+import brandChangeModal from "../../components/brand_change_modal.vue";
 const rootPage = '/subpackage/device'
 const tabArr = [
     {id: 1, name: '照明', path: `/pages/switch_manage/switch_manage`},
@@ -94,7 +95,8 @@ const tabArr = [
 import { mapState } from 'vuex'
 export default {
     components: {
-        'store-name': store_name
+        'store-name': store_name,
+		'brand-change-modal': brandChangeModal,
     },
 	computed: {
 	    ...mapState({
@@ -120,16 +122,14 @@ export default {
 	},
 	watch: {
 		async curStoreInfo(nw, od){
+			util.hideLoad();
 			this.getOuxuanacInfo(nw.device_name);
 			this.getHardwareTypeList(nw.id);
 			this.updateAC(nw.device_name);
-			console.log('curStoreInfo', nw, od);
-		},
-		isBrandSwitch(nw, od){
-			if(nw)this.getBrandList();
 		},
 		switchBrandInfo(nw, od){
 			if(nw?.id === od?.id)return;
+			util.showLoad();
 			let { brandInfo } = this;
 			this.$store.commit('setBrandInfo', { ...brandInfo, brand: nw });
 			this.$store.dispatch('getStoreList', { storeChange: true });
@@ -146,7 +146,6 @@ export default {
 			},
 			oxAcInfo: {},
 			isBrandSwitch: false,
-			brandList: [],
 			switchBrandInfo: {},
 		}
     },
@@ -175,25 +174,18 @@ export default {
 		this.initSysBarInfo();
 	},
     methods: {
-		// 品牌切换
-		brandChange(e){
-			let { brandList } = this;
-			let { value } = e.detail;
-			this.switchBrandInfo = brandList?.[value] || {};
-			this.getBrandInfo(brandList?.[value]?.id);
-		},
-		// 获取品牌列表
-		getBrandList(){
-			return deviceServer.get({
-			    url: deviceApi.brandList,
-			    data: {},
-			    failMsg: '加载品牌列表失败！'
-			})
-			.then(res=>{
-				console.log('getBrandList --->', res);
-				this.brandList = res || [];
-			})
+		interiorBrandSwitch(){
+			let { isBrandSwitch } = this;
+			if(!isBrandSwitch)return;
+			this.$refs.brandChangeModal.init({
+				success: e=>{
+					if(!e?.id)return;
+					this.switchBrandInfo = { ...e };
+					this.getBrandInfo(e.id);
+				}
+			});
 		},
+		
 		getBrandInfo(bid){
 			return deviceServer.get({
 			    url: deviceApi.brandInfo + `/${bid}`,