liyongle
3 years ago
52 changed files with 2883 additions and 125 deletions
@ -0,0 +1,28 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 176, |
|||
"title": "111", |
|||
"content": { |
|||
"name": "1121kldlfja付了款撒接待来访老师的咖啡机烧腊店啊打开分离焦虑肯定萨芬", |
|||
"nameEn": "enend ksdlf saldfsad sdf sasdf ", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/kW6aF3LAzSP4gXRjV2YPu.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 177, |
|||
"title": "222", |
|||
"content": { |
|||
"name": "222", |
|||
"nameEn": "2321321321", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/lJumzle3ceq6X6QbmSTYW.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 175, |
|||
"title": "顾客心声介绍", |
|||
"content": { |
|||
"name": "萨迪克发链接撒离开的 数量肯定放假了肯定萨芬记录开始的", |
|||
"nameEn": "endf ksfd asdfl sdf sfoiwaf sldf sd sdfoisdf ", |
|||
"content": "Lfjsalkdfj斐林试剂地方两件事都发了可接受的佛i聚少离多咖啡机哦i哇激发莱克斯顿发记录开始的就分手了打客服就算了地方拒收到付是的", |
|||
"contentEn": "fkd kfsld slkdf jsfiaojflsakdf lskdjf oisajfsldkfs lkjsdfoiwjflksdfj oijdf sld fjsd f", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/tHv3EixQowwdP_AaqcS3F.jpg", |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/Kf8vNyeU1Q0fkyXbzeP6x.jpg", |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/6EVTskx9iJgvTAtnrZlyi.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 166, |
|||
"title": "会员权益列表", |
|||
"content": { |
|||
"name": "会员权益会员权益会员权益会员权益会员权益会员权益会员权益", |
|||
"nameEn": "enen enen enen enen", |
|||
"content": "介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊\n介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊vv介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊介绍接啊\n介绍接啊介绍接啊", |
|||
"contentEn": "sdfslkd \nsadfklsdf\nsdfkljsdfe sdfklsdf sdkfsdkfewfds sdkfjdsfiewofjdslkfsd kfdssadf \nklsdjflksadfsdfoiwfalkdf sdlkfjsdlf sldkf sldf sld fsldk fsld fds \nsadjfslkdf ", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230712/lI16FO1aVrU-bHiLeu0Nv.jpg", |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230712/vOD2AAX4oqxsQlnLCaHgG.jpg", |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230712/SxJ9UA3ouMC1bHg3gdU6t.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 167, |
|||
"title": "二维码", |
|||
"content": { |
|||
"name": "扫码加入会员", |
|||
"nameEn": "asfdsadf sa sdf sadfsadfsa sdfsad ", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230712/1lnYOxTQf4mNUUCn6_aQJ.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 168, |
|||
"title": "kk", |
|||
"content": { |
|||
"name": "kkjkj撒旦法撒旦法水电费水电费是的就开了记录卡颗粒剂离开", |
|||
"nameEn": "dsf sdfsfds sdfsaf sd sdfsda sd fsd ", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230712/nRvdtzNDmRSZGmsc7KKrT.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 169, |
|||
"title": "服务", |
|||
"content": { |
|||
"name": "标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题", |
|||
"nameEn": "enenenenen afds sdfksadfs sdklf sdaf sld fdsl flkdfjlsda sfd sal kfsda f", |
|||
"content": "j内容啊舒服点撒旦法老师的发多少水电费萨达李开复 离开打扫房间莱克斯顿方式迪卢克发送六点十分拉倒烦死了地方蓝色吉林省东方律师老师的烦死了都 \n撒恐龙当家防守打法塑料袋咖啡机塑料袋就放莱克斯顿结果拉倒发了独守空房离开第三方吉林省快递费记录开始的就放离开时代峰峻\n莱克斯顿减肥路上看来是快递费来上课樊登读书\n流口水就分手了东方闪电方吉林省快递费记录开始的就放离开时代峰峻\n莱克斯顿减肥路上看来是快递费来上课樊登读书\n流口水就分手了东方闪电方吉林省快递费记录开始的就放离开时代峰峻\n莱克斯顿减肥路上看来是快递费来上课樊登读书\n流口水就分手了东方闪电方吉林省快递费记录开始的就放离开时代峰峻\n莱克斯顿减肥路上看来是快递费来上课樊登读书\n流口水就分手了东方闪电方吉林省快递费记录开始的就放离开时代峰峻\n莱克斯顿减肥路上看来是快递费来上课樊登读书\n流口水就分手了东方闪电", |
|||
"contentEn": "enn sdfjslkfjsadlf sdlkf jslkdf jsdlkfdsalk jslkfsadlsdalkfsdjfsafd\nslkadfjlsakdfsaldkfjsaldf \nsdflsakdfsadlkf sdf\n slkdfjslkdfsdaf\n lksdfjlskaf lkjdsa", |
|||
"point": "", |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/Utv2WUsWWn4hYGKLe0sHA.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/TDc5S9Z6KiVElVCqooqMj.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/4uc43wEhBVypicoGmpLlr.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 170, |
|||
"title": "服务快快快", |
|||
"content": { |
|||
"name": "看见了科技离开离开里", |
|||
"nameEn": "kkk", |
|||
"content": "kjlkj", |
|||
"contentEn": "kljlkjlkjlk", |
|||
"point": "0_0_152", |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/Yjr_3RuhALV1g8vU5-Ues.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -1,73 +1,313 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": { |
|||
"serveList": [ |
|||
"data": [ |
|||
{ |
|||
"name": "雨伞租借", |
|||
"nameEn": "978", |
|||
"logoUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230601/XShSbsU3VEEYDkQm9rM2E.jpg", |
|||
"fileUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230601/QpbjfkbCODU5aVNuYAli9.jpg", |
|||
"fileUrls": [ |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230601/QpbjfkbCODU5aVNuYAli9.jpg", |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/A-CmfymHNUGm0mhGFy7CU.png", |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/bWHtYY01TIsGbiS5QVDM8.png", |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/tMBspEmPjh8_GQgNBxHKO.png" |
|||
], |
|||
"qrUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230607/L4GB4WvBcah4iiThrFSgK.png", |
|||
"content": "租借雨伞了啊", |
|||
"contentEn": "租借雨伞了啊", |
|||
"isPoint": 2, |
|||
"building": "", |
|||
"buildingCode": "", |
|||
"buildingOrder": 0, |
|||
"floor": "", |
|||
"floorCode": "", |
|||
"floorOrder": 0, |
|||
"point": -1 |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"name": "充电宝", |
|||
"nameEn": "bao", |
|||
"logoUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230601/TT4qvTjHO_mZ2e3gv8IgS.jpg", |
|||
"fileUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230601/hPk5Z0Q5TRBgTt-IfPOLN.jpg", |
|||
"fileUrls": [ |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230601/hPk5Z0Q5TRBgTt-IfPOLN.jpg" |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"qrUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230601/Euz5BcOe5i4Ua4Tz0Cbo-.jpg", |
|||
"content": "免费充电宝", |
|||
"contentEn": "123", |
|||
"isPoint": 2, |
|||
"building": "", |
|||
"buildingCode": "", |
|||
"buildingOrder": 0, |
|||
"floor": "", |
|||
"floorCode": "", |
|||
"floorOrder": 0, |
|||
"point": -1 |
|||
}, |
|||
{ |
|||
"name": "122312", |
|||
"nameEn": "", |
|||
"logoUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230607/3YwrjhTZPukVbfh9YBQKX.png", |
|||
"fileUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230607/BShONSttRX_UshFJqkrte.png", |
|||
"fileUrls": [ |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/BShONSttRX_UshFJqkrte.png", |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/mbFngD46RgsP5qmc6NH80.png", |
|||
"/iotFile/project-zert3dski8fqmgr4zhusea/20230607/rNjUR4eGWQkwJ8uAKjWGl.png" |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"qrUrl": "/iotFile/project-zert3dski8fqmgr4zhusea/20230607/0Undp5msC2GA1hrxqZ7VH.png", |
|||
"content": "123123", |
|||
"contentEn": "", |
|||
"isPoint": 2, |
|||
"building": "A栋", |
|||
"buildingCode": "DLvmtzN2qodUq_oYr7vyM", |
|||
"buildingOrder": 0, |
|||
"floor": "L2", |
|||
"floorCode": "7Q5J4mfRebZR_t_PKeEDJ", |
|||
"floorOrder": 3, |
|||
"point": 40 |
|||
} |
|||
] |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
},{ |
|||
"id": 108, |
|||
"title": "服务1", |
|||
"content": { |
|||
"name": "服务设施测试名称服务设施测试名称服务设施测试名称", |
|||
"nameEn": "ljgdsfl lsakjfdl\nlksadjflssadf lsadfj", |
|||
"content": "借号阿斯蒂芬拉萨客服经理手打就发了水电费吉林省就发了独守空房蓝思科技烦死了地方\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机\n离开时间弗利萨大姐夫ls索拉卡大飞机雷克萨戴假发\n\n索拉卡范德萨解放东路吉林省\n索拉卡党风建设两地分居\n索拉卡动静分离萨克大飞机", |
|||
"contentEn": "sklf sldfj sdfds sdfjiofldsfdsl oijffsofsfspdsnfvs fsldfjsdfowefjsdlfds sdfsafds fowi jfsldfjldsa jfoisafwofdslf jlsfdjsaofjwlfdsjf lsadfoisafj lds jldsf jsoa ", |
|||
"point": "", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fLh_hxEjrJqd90sE3M0mh.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/ghPJXBUeW9XJBSMijOEYf.jpg", |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 109, |
|||
"title": "服务2", |
|||
"content": { |
|||
"name": "服务设施2", |
|||
"nameEn": "dsafljffa skldjf ", |
|||
"content": "lksadjflaj la分类了解萨克大姐夫雷克萨就发了卡萨丁就发了卡萨丁甲方拉萨到付件拉倒就发了萨达就发了撒旦法记录卡打撒金佛IE忘记发啦扩大升级弗利萨就 ", |
|||
"contentEn": "lkf lsjflksdjlkf lsf lskd flsafjlsadf jwiofjlsadfj oiajfldjsa ldisfjsldakf lkssjdlkf jsadisdf l", |
|||
"point": "0_0_14", |
|||
"logo_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
], |
|||
"file_code": [ |
|||
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/q8hsY2vPMJ1XNG4S1hXJV.jpg" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 402 B |
|
After Width: | Height: | Size: 392 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 272 B |
|
After Width: | Height: | Size: 690 B |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 909 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 763 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 670 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,468 @@ |
|||
<template> |
|||
<div class="keyborad-container"> |
|||
<!-- <TypeBtnList class="btn-group" :list="list" @change-type="change" /> --> |
|||
<!-- <switchTab |
|||
class="btn-group" |
|||
:width="276" |
|||
:height="82" |
|||
:wrapper-width="560" |
|||
:wrapper-height="90" |
|||
:list="list" |
|||
@click="change" |
|||
></switchTab> --> |
|||
<transition |
|||
enter-active-class="animate__animated animate__zoomIn animate__faster" |
|||
leave-active-class="animate__animated animate__zoomOut animate__faster" |
|||
> |
|||
<ul v-if="mode === 'keyboard'" key="keyboard" class="keyboard"> |
|||
<li v-for="(item, index) in letterNum" :key="index" class="item" :data-key="item" @click="handleKeyLetter(item)"> |
|||
{{ item }} |
|||
</li> |
|||
|
|||
<li class="empty item" @click="handleKeyLetter(' ')">空格</li> |
|||
<li class="keyboard-del item" @click="delLetter"> |
|||
<img src="@/assets/images/search/key-del.svg" alt="" /> |
|||
</li> |
|||
<li class="switch-mode item" @click="handleChangeKeyboardMode('hand')"> |
|||
<img src="@/assets/images/search/icon_hand.svg" alt="" /> |
|||
<p class="switchhand-txt">{{ $t('search.switchHand') }}</p> |
|||
</li> |
|||
</ul> |
|||
|
|||
<div v-else class="hand"> |
|||
<div class="change-keyboard" @click="handleChangeKeyboardMode('keyboard')"> |
|||
<img src="@/assets/images/search/icon_keyboard.svg" alt="" /> |
|||
<p class="switchhand-txt">{{ $t('search.switchKeyboard') }}</p> |
|||
</div> |
|||
<li class="keyboard-del" @click="delLetter"> |
|||
<img src="@/assets/images/search/key-del.svg" alt="" /> |
|||
</li> |
|||
<scroll-view |
|||
ref="wordsScrollRef" |
|||
:class="{ active: wordsList && wordsList.length }" |
|||
class="words-scroll" |
|||
:scroll-x="true" |
|||
:refresh-delay="100" |
|||
:list="wordsList" |
|||
> |
|||
<ul class="words-list" :style="{ width: getWidth }"> |
|||
<li |
|||
v-for="(item, index) of wordsList" |
|||
:key="item" |
|||
class="word" |
|||
:class="{ active: isPress === index }" |
|||
@mousedown="() => (isPress = index)" |
|||
@mouseup="() => (isPress = -1)" |
|||
@touchstart="() => (isPress = index)" |
|||
@touchend="() => (isPress = -1)" |
|||
@click="handleWord(item)" |
|||
> |
|||
{{ item }} |
|||
</li> |
|||
</ul> |
|||
</scroll-view> |
|||
<div class="hand-wrapper"> |
|||
<handWriting |
|||
v-if="is4K" |
|||
ref="handWritingRef" |
|||
lang="CN" |
|||
:style="styles" |
|||
fill-text="手写输入区域" |
|||
fill-font-size="48px" |
|||
background-color="rgba(0, 0, 0, 0.03)" |
|||
border-radius="48px" |
|||
stroke-style="#534F46" |
|||
fill-style="rgba(0, 0, 0, 0.03)" |
|||
:width="1088" |
|||
:height="700" |
|||
@result="result" |
|||
/> |
|||
<handWriting |
|||
v-else |
|||
ref="handWritingRef" |
|||
lang="CN" |
|||
:style="styles" |
|||
fill-text="手写输入区域" |
|||
fill-font-size="24px" |
|||
background-color="rgba(0, 0, 0, 0.03)" |
|||
border-radius="24px" |
|||
stroke-style="#534F46" |
|||
fill-style="rgba(0, 0, 0, 0.03)" |
|||
:width="544" |
|||
:height="350" |
|||
@result="result" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import scrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import handWriting from '@/components/Written/Written.vue' |
|||
import { ref, reactive, watch, nextTick, computed } from 'vue' |
|||
import { storeToRefs } from 'pinia' |
|||
import { useRootStore } from '@/store/root' |
|||
// import TypeBtnList from '@/components/TypeBtnList/TypeBtnList.vue' |
|||
// import switchTab from '@/components/SwitchTab/SwitchTab.vue' |
|||
|
|||
const store = useRootStore() |
|||
const { is4K } = storeToRefs(store) |
|||
|
|||
const emit = defineEmits(['letterKey', 'mode']) |
|||
const isPress = ref(-1) |
|||
const handWritingRef = ref() |
|||
const styles = reactive({ |
|||
// background: '#fff', |
|||
borderRadius: '24px' |
|||
// marginTop: '0px' |
|||
}) |
|||
const letterNum = ref('1234567890QWERTYUIOPASDFGHJKLZXCVBNM') |
|||
const letters = ref('') |
|||
const mode = ref('keyboard') |
|||
const INPUT_MAX_LEN = computed(() => (mode.value === 'hand' ? 5 : 7)) |
|||
|
|||
const wordsList = ref([]) |
|||
const wordsScrollRef = ref() |
|||
// const list = [ |
|||
// { |
|||
// title: '键盘输入', |
|||
// titleEn: 'Keyboard' |
|||
// }, |
|||
// { |
|||
// title: '手写输入', |
|||
// titleEn: 'Handwriting' |
|||
// } |
|||
// ] |
|||
// const list = [ |
|||
// { |
|||
// name: '键盘输入', |
|||
// nameEn: 'KEYBOARD INPUT', |
|||
// icon: require('../../assets/images/search/icon_normal.svg'), |
|||
// iconSel: require('../../assets/images/search/icon_sel.svg'), |
|||
// fun: () => { |
|||
// 1 |
|||
// } |
|||
// }, |
|||
// { |
|||
// name: '手写输入', |
|||
// nameEn: 'HANDWRITING INPUT', |
|||
// icon: require('../../assets/images/search/icon_hand.svg'), |
|||
// iconSel: require('../../assets/images/search/icon_handSel.svg') |
|||
// } |
|||
// ] |
|||
|
|||
const getWidth = computed(() => wordsList.value?.length * (66 + 5) + 'px') |
|||
defineExpose({ |
|||
handleChangeKeyboardMode, |
|||
clear |
|||
}) |
|||
|
|||
function clear() { |
|||
letters.value = '' |
|||
wordsList.value = [] |
|||
} |
|||
function delLetter() { |
|||
letters.value = letters.value.substring(0, letters.value.length - 1) |
|||
if (letters.value.length === 0) { |
|||
wordsList.value = [] |
|||
} |
|||
} |
|||
function result(words: []) { |
|||
console.log('words :>> ', words) |
|||
wordsList.value = words |
|||
} |
|||
function handleChangeKeyboardMode(val: 'keyboard' | 'hand') { |
|||
mode.value = val |
|||
} |
|||
function handleKeyLetter(letter: string) { |
|||
if (letters.value.length > INPUT_MAX_LEN.value) { |
|||
return |
|||
} |
|||
letters.value += letter |
|||
} |
|||
function handleWord(word: string) { |
|||
if (letters.value.length > INPUT_MAX_LEN.value) { |
|||
return |
|||
} |
|||
letters.value += word |
|||
} |
|||
|
|||
// function change(params: any) { |
|||
// if (params === 0) { |
|||
// //params.order === 0 |
|||
// handleChangeKeyboardMode('keyboard') |
|||
// } else { |
|||
// handleChangeKeyboardMode('hand') |
|||
// } |
|||
// } |
|||
watch(letters, newVal => { |
|||
emit('letterKey', newVal) |
|||
}) |
|||
watch(mode, newVal => { |
|||
letters.value = '' |
|||
// this.$emit('letterKey', this.letters) |
|||
emit('mode', newVal) |
|||
if (newVal === 'hand') { |
|||
wordsList.value = [] |
|||
setTimeout(() => { |
|||
handWritingRef.value.setCanvasSize() |
|||
handWritingRef.value.updateBound() |
|||
handWritingRef.value.reload() |
|||
}, 200) |
|||
} |
|||
}) |
|||
|
|||
watch(wordsList, () => { |
|||
nextTick(() => { |
|||
if (wordsScrollRef.value) { |
|||
wordsScrollRef.value?.refresh() |
|||
} |
|||
}) |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.keyborad-container { |
|||
position: absolute; |
|||
top: 320px; |
|||
right: 56px; |
|||
z-index: 1; |
|||
display: flex; |
|||
// justify-content: center; |
|||
align-items: center; |
|||
width: 544px; |
|||
// padding: 48px 64px; |
|||
background: rgb(255 255 255 / 0%); |
|||
border-radius: 0; |
|||
.btn-group { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
width: 560px; |
|||
// margin: 0 auto; |
|||
} |
|||
.keyboard { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
width: 544px; |
|||
height: 190px; |
|||
background: rgb(255 255 255 / 0%); |
|||
border-radius: 0; |
|||
animation-duration: 50ms; |
|||
// padding: 33px; |
|||
// justify-content: center; |
|||
flex-wrap: wrap; |
|||
.item { |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-right: 16px; |
|||
margin-bottom: 10px; |
|||
font-size: 16px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: #8e9090; |
|||
background: #f5f5f5; |
|||
border-radius: 22px; |
|||
box-shadow: 0 4px 8px rgb(0 0 0 / 0%), inset 0 -1px 0 rgb(177 189 220 / 0%); |
|||
line-height: 40px; |
|||
&:active { |
|||
color: #fff; |
|||
background: #e00068; |
|||
} |
|||
&[data-key='0'] { |
|||
margin-right: 0; |
|||
} |
|||
&[data-key='P'] { |
|||
margin-right: 0; |
|||
} |
|||
&[data-key='Q'] { |
|||
margin-left: 0; |
|||
} |
|||
&[data-key='A'] { |
|||
margin-left: 25px; |
|||
} |
|||
&[data-key='L'] { |
|||
margin-right: 30px; |
|||
} |
|||
} |
|||
.keyboard-del { |
|||
// position: absolute; |
|||
// right: 16px; |
|||
// top: 33px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 40px; |
|||
margin-right: 0; |
|||
|
|||
img { |
|||
width: 20px; |
|||
object-fit: scale-down; |
|||
} |
|||
} |
|||
.empty { |
|||
width: 96px; |
|||
font-size: 16px; |
|||
font-family: 'font_bold'; |
|||
} |
|||
.switch-mode { |
|||
position: absolute; |
|||
top: 230px; |
|||
left: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: row; |
|||
width: 544px; |
|||
height: 120px; |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: #8e9090; |
|||
background: #f5f5f5; |
|||
border-radius: 24px; |
|||
|
|||
// .switchhand-txt { |
|||
// } |
|||
img { |
|||
width: 40px; |
|||
margin-right: 16px; |
|||
object-fit: scale-down; |
|||
} |
|||
&::before { |
|||
position: absolute; |
|||
left: -50px; |
|||
width: 0; |
|||
height: 164px; |
|||
// background: #f4f4f4; |
|||
background-repeat: 4px; |
|||
content: ''; |
|||
} |
|||
} |
|||
} |
|||
.hand { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 544px; |
|||
height: 350px; |
|||
padding-top: 0; |
|||
padding-left: 0; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 24px; |
|||
opacity: 1; |
|||
animation-duration: 50ms; |
|||
.keyboard-del { |
|||
position: absolute; |
|||
right: 8px; |
|||
bottom: 8px; |
|||
z-index: 10; |
|||
display: none; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 150px; |
|||
height: 50px; |
|||
padding: 8px; |
|||
font-size: 14px; |
|||
font-family: 'font_regular'; |
|||
text-align: center; |
|||
color: #4d4846; |
|||
background: rgb(0 0 0 / 6%); |
|||
border-radius: 8px; |
|||
box-shadow: 0 -1px 0 0 rgb(177 189 220 / 10%) inset; |
|||
line-height: 48px; |
|||
&:active { |
|||
color: #fff; |
|||
background: linear-gradient(180deg, #c7a77b 0%, #d6bb97 100%); |
|||
} |
|||
img { |
|||
flex-shrink: 0; |
|||
width: 25px; |
|||
// object-fit: scale-down; |
|||
} |
|||
} |
|||
.change-keyboard { |
|||
position: absolute; |
|||
right: 8px; |
|||
bottom: 8px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 168px; |
|||
height: 72px; |
|||
padding: 16px; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 24px; |
|||
img { |
|||
width: 40px; |
|||
margin-right: 16px; |
|||
object-fit: scale-down; |
|||
} |
|||
} |
|||
.words-scroll { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
overflow: hidden; |
|||
height: 40px; |
|||
padding-top: 0; |
|||
background: rgb(0 0 0 / 3%); |
|||
box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0%); |
|||
border-top-left-radius: 24px; |
|||
border-top-right-radius: 24px; |
|||
&.active { |
|||
background: rgb(0 0 0 / 3%); |
|||
&::after { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 66px; |
|||
width: 3px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
opacity: 0.37; |
|||
// background: #eb7736; |
|||
box-shadow: 2px 4px 16px rgb(255 171 124 / 40%); |
|||
content: ''; |
|||
// filter: blur(4px); |
|||
border-top-left-radius: 24px; |
|||
} |
|||
} |
|||
.words-list { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 40px; |
|||
.word { |
|||
display: inline-block; |
|||
width: 66px; |
|||
height: 40px; |
|||
margin-right: 5px; |
|||
font-size: 20px; |
|||
font-family: 'font_regular'; |
|||
text-align: center; |
|||
color: #8e9090; |
|||
border-radius: 8px; |
|||
opacity: 1; |
|||
// flex-shrink: 0; |
|||
line-height: 40px; |
|||
// background: #fff; |
|||
&.active { |
|||
color: #fff; |
|||
background: #e0006893; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.hand-wrapper { |
|||
width: 544px; |
|||
height: 350px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,371 @@ |
|||
<template> |
|||
<div class="search-list-wrapper"> |
|||
<!-- 标题 --> |
|||
<div class="title-tip"> |
|||
{{ $t('search.num') }} |
|||
</div> |
|||
<!-- <scroll-view :refresh-delay="200" class="result-scroll" :list="[...list, ...activities]" :scrollbar="true"> --> |
|||
<div class="result-scroll-all"> |
|||
<!-- 店铺 --> |
|||
<div class="scroll-list"> |
|||
<div class="title-content"> |
|||
<p class="title">{{ $t('search.brand') }}</p> |
|||
<p class="title"> |
|||
<i>{{ list.length }}</i> |
|||
<span>{{ language === 'en' ? $t('search.num') : '个' + $t('search.num') }}</span> |
|||
</p> |
|||
</div> |
|||
<scroll-view :refresh-delay="200" class="result-scroll" :list="[...list]" :scrollbar="true" :scroll-x="false"> |
|||
<!-- 店铺 --> |
|||
<ul class="results"> |
|||
<searchResultListItem v-for="item of list" :key="item.shopCode" :shop="item" @click="handleClick" /> |
|||
</ul> |
|||
|
|||
<!-- <img |
|||
v-show="list.length > 15" |
|||
src="../../common/images/Union.png" |
|||
class="union animate__animated animate__fadeInUp animate__infinite" |
|||
alt="" |
|||
/> --> |
|||
</scroll-view> |
|||
<img v-if="list.length === 0" src="@/assets/images/stay_tuned2.svg" class="no-data" alt="" /> |
|||
</div> |
|||
|
|||
<!-- 活动无 --> |
|||
<!-- <scroll-view |
|||
:refresh-delay="200" |
|||
class="resultact-scroll" |
|||
:class="{ first: !activities.length }" |
|||
:list="[...activities]" |
|||
:scrollbar="true" |
|||
> --> |
|||
<div v-if="false" class="scroll-list"> |
|||
<template v-if="activities.length"> |
|||
<div class="title-content"> |
|||
<p class="title">{{ $t('search.act') }}</p> |
|||
<p class="title"> |
|||
<span>{{ $t('search.num') }}</span> |
|||
<i>{{ activities.length }}</i> |
|||
</p> |
|||
</div> |
|||
<!-- 活动 --> |
|||
<scroll-view class="result-scroll" :scrollbar="true" :list="activities" :scroll-x="true"> |
|||
<ul class="results-act"> |
|||
<li v-for="item of activities" :key="item.id" class="result-item" @click="handleActivity(item)"> |
|||
<img v-lazy="item.fileUrl" alt="" /> |
|||
<p class="title">{{ switchLanguage(item, 'activityName') }}</p> |
|||
<div class="act-intro">{{ switchLanguage(item, 'activityContent') }}</div> |
|||
<h5> |
|||
{{ $t('shopDetail.actTip') }} |
|||
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path |
|||
fill-rule="evenodd" |
|||
clip-rule="evenodd" |
|||
d="M4.76978 2.28394C4.46672 2.54912 4.436 3.00978 4.70119 3.31285L8.36438 7.49936L4.70119 11.6859C4.436 11.9889 4.46672 12.4496 4.76978 12.7148C5.07285 12.98 5.53351 12.9493 5.7987 12.6462L9.71397 8.17158C10.0507 7.7867 10.0507 7.21202 9.71397 6.82714L5.7987 2.35253C5.53351 2.04946 5.07285 2.01875 4.76978 2.28394Z" |
|||
fill="#D0B186" |
|||
/> |
|||
</svg> |
|||
</h5> |
|||
</li> |
|||
</ul> |
|||
</scroll-view> |
|||
</template> |
|||
</div> |
|||
<!-- </scroll-view> --> |
|||
</div> |
|||
<!-- </scroll-view> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import scrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import { computed } from 'vue' |
|||
import searchResultListItem from '@/components/SearchResultListItem/SearchResultListItem.vue' |
|||
|
|||
import { storeToRefs } from 'pinia' |
|||
import { useRootStore } from '@/store/root' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
const store = useRootStore() |
|||
const { language } = storeToRefs(store) |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
|
|||
type PropsType = { |
|||
list: Shop[] |
|||
} |
|||
const props = withDefaults(defineProps<PropsType>(), { |
|||
list: () => [] |
|||
}) |
|||
|
|||
const emit = defineEmits(['handle-shop', 'handle-activity']) |
|||
const activities = computed(() => { |
|||
// return props.list.map(item => item.activityList).flat(Infinity) |
|||
let arr: Activity[] = [] |
|||
props.list.forEach(item => { |
|||
arr = arr.concat(item.activityList ?? []) |
|||
}) |
|||
return arr |
|||
}) |
|||
|
|||
// function getShop(act: Shop) { |
|||
// return shopList.value.find(item => item.shopCode === act.shopCode) |
|||
// } |
|||
|
|||
function handleClick(item: Shop) { |
|||
console.log('item :>> ', item) |
|||
emit('handle-shop', item) |
|||
} |
|||
function handleActivity(item: Activity) { |
|||
emit('handle-activity', item) |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 4px; |
|||
// opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 4px !important; |
|||
} |
|||
} |
|||
:deep(.bscroll-horizontal-scrollbar) { |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 4px; |
|||
// opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 4px !important; |
|||
} |
|||
} |
|||
|
|||
.search-list-wrapper { |
|||
position: absolute; |
|||
top: 48px; |
|||
left: 64px; |
|||
height: 770px; |
|||
.title-tip { |
|||
margin-bottom: 40px; |
|||
font-size: 32px; |
|||
font-family: 'font_bold'; |
|||
color: #615c59; |
|||
// line-height: 0px; |
|||
} |
|||
|
|||
//竖着 |
|||
.result-scroll-all { |
|||
.scroll-list { |
|||
padding-right: 0; |
|||
&:nth-child(2) { |
|||
.title-content { |
|||
margin-top: 24px; |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.title-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
width: 792px; |
|||
padding-bottom: 0; |
|||
padding-left: 0; |
|||
margin-top: 0; |
|||
margin-bottom: 24px; |
|||
border-bottom: 0 solid rgb(0 0 0 / 5%); |
|||
.title { |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
color: #615c59; |
|||
|
|||
&:last-child { |
|||
width: 110px; |
|||
height: 30px; |
|||
padding: 0; |
|||
margin-left: 0; |
|||
text-align: right; |
|||
background: rgb(0 0 0 / 0%); |
|||
border-radius: 0; |
|||
} |
|||
i { |
|||
font-size: 36px; |
|||
color: #8e9090; |
|||
} |
|||
span { |
|||
margin-left: 8px; |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
color: #8e9090; |
|||
} |
|||
} |
|||
} |
|||
.result-scroll { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 822px; |
|||
height: 683px; |
|||
padding-right: 24px; |
|||
} |
|||
.results { |
|||
display: grid; |
|||
width: fit-content; |
|||
width: 792px; |
|||
padding-bottom: 0; |
|||
margin-bottom: 0; |
|||
grid-template-columns: repeat(1, 792px); |
|||
// grid-auto-flow: column; |
|||
gap: 8px 0; |
|||
} |
|||
.no-data { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 2; |
|||
height: 200px; |
|||
// filter: grayscale(1) brightness(200%); |
|||
transform: translate(-50%, -50%); |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
.results-act { |
|||
position: relative; |
|||
display: grid; |
|||
width: fit-content; |
|||
grid-template-columns: repeat(auto-fill, 592px); |
|||
grid-auto-flow: column; |
|||
gap: 0 16px; |
|||
height: 110px; |
|||
|
|||
.result-item { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 592px; |
|||
height: 98px; |
|||
padding: 15px 42px 15px 188px; |
|||
margin-right: 0; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
img { |
|||
position: absolute; |
|||
top: 4px; |
|||
left: 4px; |
|||
width: 161px; |
|||
height: 90px; |
|||
object-fit: scale-down; |
|||
} |
|||
.title { |
|||
width: 80%; |
|||
height: 24px; |
|||
margin-bottom: 8px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
color: rgb(0 0 0 / 90%); |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: inherit; |
|||
|
|||
@include no-wrap(); |
|||
} |
|||
.act-intro { |
|||
font-size: 12px; |
|||
font-family: 'font_medium'; |
|||
color: rgb(0 0 0 / 60%); |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 150%; |
|||
|
|||
@include more-wrap(2); |
|||
} |
|||
h5 { |
|||
position: absolute; |
|||
top: 15px; |
|||
right: 33px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 12px; |
|||
font-family: 'font_medium'; |
|||
color: #d0b186; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
svg { |
|||
margin-left: 4px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//竖版 |
|||
// .result-scroll { |
|||
// position: relative; |
|||
// overflow: hidden; |
|||
// width: 972px; |
|||
// height: 780px; |
|||
// padding-right: 20px; |
|||
// margin-bottom: 0; |
|||
// &.first { |
|||
// // height: 793px; |
|||
// } |
|||
// .scroll-list { |
|||
// padding-right: 14px; |
|||
|
|||
// .title-content { |
|||
// display: flex; |
|||
// justify-content: flex-start; |
|||
// align-items: flex-start; |
|||
// padding-bottom: 0; |
|||
// padding-left: 5px; |
|||
// margin-top: 40px; |
|||
// margin-bottom: 24px; |
|||
// border-bottom: 0 solid rgb(0 0 0 / 5%); |
|||
// // &:nth-child(2) { |
|||
// // margin-top: 48px; |
|||
// // } |
|||
|
|||
// .title { |
|||
// font-size: 24px; |
|||
// font-family: 'font_bold'; |
|||
// color: rgb(0 0 0 / 90%); |
|||
|
|||
// &:last-child { |
|||
// width: 132px; |
|||
// height: 30px; |
|||
// padding: 0; |
|||
// margin-left: 20px; |
|||
// text-align: left; |
|||
// background: rgb(255 255 255 / 0%); |
|||
// border-radius: 0; |
|||
// } |
|||
// i { |
|||
// font-size: 16px; |
|||
// color: #d7ba92; |
|||
// } |
|||
// span { |
|||
// margin-right: 8px; |
|||
// font-size: 14px; |
|||
// font-family: 'font_bold'; |
|||
// color: rgb(0 0 0 / 60%); |
|||
// } |
|||
// } |
|||
// } |
|||
// .results { |
|||
// display: grid; |
|||
// padding-bottom: 100px; |
|||
// margin-bottom: 16px; |
|||
// grid-template-columns: repeat(4, 220px); |
|||
// gap: 24px 24px; |
|||
// } |
|||
// } |
|||
// .no-data { |
|||
// position: absolute; |
|||
// top: 200px; |
|||
// left: 50%; |
|||
// height: 160px; |
|||
// transform: translateX(-50%); |
|||
// } |
|||
// } |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,97 @@ |
|||
<template> |
|||
<li class="result-item" @click="emits('click', shop)"> |
|||
<div class="banner-wrapper"> |
|||
<img :src="shop.logoUrl ? shop.logoUrl : require('@/assets/images/empty_small.svg')" class="logo" alt="" /> |
|||
</div> |
|||
<div class="bottom"> |
|||
<span class="name">{{ switchLanguage(shop, 'shopName') }}</span> |
|||
<span class="floor-name"> |
|||
<img v-if="shop.industryUrl" :src="shop.industryUrl" alt="" /> |
|||
<span class="format-name">{{ switchLanguage(shop, 'industryFatherName') }}</span> |
|||
<img src="@/assets/images/search/pos.svg" alt="" /> |
|||
{{ shop.floor }} |
|||
</span> |
|||
</div> |
|||
</li> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
type PropsType = { |
|||
shop: Shop |
|||
} |
|||
defineProps<PropsType>() |
|||
const emits = defineEmits(['click']) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.result-item { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 792px; |
|||
height: 92px; |
|||
padding: 6px; |
|||
background: rgb(255 255 255 / 100%); |
|||
border-radius: 12px; |
|||
.banner-wrapper { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 80px; |
|||
height: 80px; |
|||
background-color: #fff; |
|||
border-radius: 6px; |
|||
|
|||
img { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 64px; |
|||
height: 64px; |
|||
object-fit: scale-down; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
.bottom { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 28px; |
|||
padding-right: 40px; |
|||
padding-left: 32px; |
|||
font-family: 'font_bold'; |
|||
line-height: 28px; |
|||
.name { |
|||
max-width: 460px; |
|||
font-size: 24px; |
|||
color: #8e9090; |
|||
|
|||
@include no-wrap(); |
|||
} |
|||
.floor-name { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 20px; |
|||
font-size: 14px; |
|||
color: #8e9090; |
|||
img { |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 8px; |
|||
} |
|||
.format-name { |
|||
width: 96px; |
|||
|
|||
@include no-wrap(); |
|||
} |
|||
.floor-txt { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
import { request } from '@/http/http' |
|||
import { PREFIX } from '@/enums' |
|||
|
|||
//获取商场活动
|
|||
export const getMemberBenefits = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getMemberBenefits.json` }) |
|||
//获取店铺活动
|
|||
export const getMemberQRCodes = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getMemberQRCodes.json` }) |
|||
//获取会员活动
|
|||
export const getMemberServices = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getMemberServices.json` }) |
|||
@ -0,0 +1,9 @@ |
|||
import { request } from '@/http/http' |
|||
import { PREFIX } from '@/enums' |
|||
|
|||
//获取商场活动
|
|||
export const getServeList = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getServeList.json` }) |
|||
//获取店铺活动
|
|||
export const getCustomerQRCodeList = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getCustomerQRCodeList.json` }) |
|||
//获取会员活动
|
|||
export const getCustomerVoiceList = () => request({ url: `${PREFIX.STATIC_URL}/JSON/getCustomerVoiceList.json` }) |
|||
@ -1,22 +1,22 @@ |
|||
declare interface Activity { |
|||
activityAddress: string //活动地址
|
|||
activityAddressEn: string //活动地址英文
|
|||
activityContent: string //活动内容
|
|||
activityContentEn: string //活动内容英文
|
|||
activityAddress?: string //活动地址
|
|||
activityAddressEn?: string //活动地址英文
|
|||
activityContent?: string //活动内容
|
|||
activityContentEn?: string //活动内容英文
|
|||
id: number | string //活动ID
|
|||
activityName: string |
|||
activityNameEn: string //活动名称英文
|
|||
activityType: 1 | 2 | 3 //活动类型，1商场活动；2品牌活动；3会员活动
|
|||
building: string //楼栋
|
|||
buildingCode: string |
|||
startDate: string //开始日期
|
|||
endDate: string //结束日期
|
|||
limitStartDate: string //上线开始日期
|
|||
limitEndDate: string //下线结束日期
|
|||
activityNameEn?: string //活动名称英文
|
|||
activityType?: 1 | 2 | 3 //活动类型，1商场活动；2品牌活动；3会员活动
|
|||
building?: string //楼栋
|
|||
buildingCode?: string |
|||
startDate?: string //开始日期
|
|||
endDate?: string //结束日期
|
|||
limitStartDate?: string //上线开始日期
|
|||
limitEndDate?: string //下线结束日期
|
|||
fileUrl: string[] //封面
|
|||
fileUrls: string[] //活动详情图片列表
|
|||
floor: string //楼层
|
|||
floorOrder: number |
|||
point: number // 导航点
|
|||
fileUrls?: string[] //活动详情图片列表
|
|||
floor?: string //楼层
|
|||
floorOrder?: number |
|||
point: string // 导航点
|
|||
shopCode: string //关联店铺code
|
|||
} |
|||
|
|||
@ -0,0 +1,31 @@ |
|||
//会员权益
|
|||
declare interface MmeberBenefit { |
|||
id: number |
|||
title: string //额外标题无实际作用
|
|||
name: string //标题
|
|||
nameEn: string //标题英文
|
|||
content: string //介绍
|
|||
contentEn: string //介绍英文
|
|||
file_code: string[] //图片列表
|
|||
} |
|||
|
|||
//会员二维码
|
|||
declare interface MmeberQRCode { |
|||
id: number |
|||
title: string //额外标题无实际作用
|
|||
name: string //标题
|
|||
nameEn: string //标题英文
|
|||
file_code: string[] //图片列表
|
|||
} |
|||
|
|||
//会员服务
|
|||
declare interface MmeberService { |
|||
id: number |
|||
title: string //额外标题无实际作用
|
|||
name: string //标题
|
|||
nameEn: string //标题英文
|
|||
content: string //介绍
|
|||
contentEn: string //介绍英文
|
|||
point: string //'0_0_15'//导航点
|
|||
file_code: string[] //图片列表
|
|||
} |
|||
@ -1,18 +1,20 @@ |
|||
declare interface ServeItem { |
|||
name: string |
|||
nameEn: string |
|||
logoUrl: string |
|||
fileUrl: string |
|||
fileUrls: string[] |
|||
qrUrl: string |
|||
logo_code: string[] |
|||
file_code: string[] |
|||
qrUrl?: string |
|||
content: string |
|||
contentEn: string |
|||
isPoint: 0 | 1 | 2 //是否关联点位 0无关联点位，1服务台设施，2地图选点
|
|||
building: string |
|||
buildingCode: string |
|||
buildingOrder: number |
|||
floor: string |
|||
floorCode: string |
|||
floorOrder: number |
|||
point: number | string |
|||
point: string |
|||
} |
|||
//会员权益
|
|||
declare interface CustomerVoice { |
|||
id: number |
|||
title: string //额外标题无实际作用
|
|||
name: string //标题
|
|||
nameEn: string //标题英文
|
|||
content: string //介绍
|
|||
contentEn: string //介绍英文
|
|||
file_code: string[] //图片列表
|
|||
} |
|||
|
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<div class="member-container"> |
|||
<!-- 切换按钮 --> |
|||
<switchTab |
|||
class="btn-group" |
|||
:width="364" |
|||
:height="68" |
|||
:wrapper-width="728" |
|||
:wrapper-height="68" |
|||
:list="list" |
|||
@click="handleSwitch" |
|||
></switchTab> |
|||
|
|||
<transition |
|||
enter-active-class="animate__faster animate__animated animate__fadeInUp" |
|||
leave-active-class="animate__animated animate__fadeOutDown" |
|||
> |
|||
<!-- 会员权益 --> |
|||
<PictureText v-if="switchIdx === 0" :ac-list="memberBenefitList" :qr-list="memberQRCodeList" /> |
|||
<!-- 会员服务 --> |
|||
<ScrollView |
|||
v-else |
|||
ref="actScroll" |
|||
:list="memberServiceList" |
|||
:refresh-delay="200" |
|||
:scroll-x="true" |
|||
:scrollbar="true" |
|||
class="member-scroll" |
|||
> |
|||
<ul class="act-list"> |
|||
<memberItem v-for="(item, index) in memberServiceList" :key="index" :act-info="item" @click="clickItem"></memberItem> |
|||
</ul> |
|||
</ScrollView> |
|||
</transition> |
|||
<activityDetail v-if="showDetail" :act-info="currentItem" @close="showDetail = false"></activityDetail> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { Autoplay, FreeMode, Pagination } from 'swiper' |
|||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
import 'swiper/css' |
|||
import 'swiper/css/free-mode' |
|||
|
|||
import { useStatisticsModel } from '@/composables/useStatistics' |
|||
import activityDetail from '@/components/ActivityDetail/ActivityDetail.vue' |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import memberItem from './MemberItem.vue' |
|||
import { getMemberBenefits, getMemberQRCodes, getMemberServices } from '@/http/api/member' |
|||
import { nextTick, ref } from 'vue' |
|||
import switchTab from '@/components/SwitchTab/SwitchTab.vue' |
|||
import PictureText from '@/components/PictureText/PictureText.vue' |
|||
|
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
|
|||
const { switchLanguage } = useSwitchLanguage() |
|||
const modules = [Autoplay, FreeMode, Pagination] |
|||
|
|||
const list = [ |
|||
{ |
|||
name: '会员权益', |
|||
en: 'MEMBER BENEFITS', |
|||
icon: require('@/assets/images/member/icon_benefit.svg'), |
|||
iconSel: require('@/assets/images/member/icon_benefitSel.svg') |
|||
}, |
|||
{ |
|||
name: '会员服务', |
|||
en: 'MEMBERSHIP SERVICE', |
|||
icon: require('../../assets/images/member/icon_service.svg'), |
|||
iconSel: require('../../assets/images/member/icon_serviceSel.svg') |
|||
} |
|||
] |
|||
|
|||
const memberServiceList = ref<Activity[]>([]) //服务 |
|||
const memberQRCodeList = ref<MmeberQRCode[]>([]) //会员二维码 |
|||
const memberBenefitList = ref<MmeberBenefit[]>([]) //会员权益 |
|||
const switchIdx = ref(0) |
|||
|
|||
const currentItem = ref<Activity>() |
|||
const showDetail = ref(false) |
|||
const actScroll = ref() |
|||
function clickItem(item: Activity) { |
|||
// useStatisticsModel({ recordType: 2, moduleName: item.activityName, activityCode: item.id }) |
|||
currentItem.value = item |
|||
showDetail.value = true |
|||
} |
|||
/** |
|||
* |
|||
* @param index 点击分类 |
|||
*/ |
|||
function handleSwitch(index: number) { |
|||
if (switchIdx.value === index) { |
|||
return |
|||
} |
|||
switchIdx.value = index |
|||
if (switchIdx.value === 1) { |
|||
nextTick(() => { |
|||
actScroll.value.refresh() |
|||
}) |
|||
} |
|||
} |
|||
|
|||
function getData() { |
|||
getMemberServices().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const { name, nameEn, content, contentEn, file_code, point } = res.data[t].content |
|||
memberServiceList.value.push({ |
|||
id: res.data[t].id, |
|||
activityContent: content, |
|||
activityContentEn: contentEn, |
|||
activityName: name, |
|||
activityNameEn: nameEn, |
|||
point, |
|||
fileUrl: file_code ?? [], |
|||
shopCode: '' |
|||
}) |
|||
} |
|||
}) |
|||
getMemberQRCodes().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const ele = res.data[t] |
|||
memberQRCodeList.value.push({ id: ele.id, ...ele.content }) |
|||
} |
|||
}) |
|||
getMemberBenefits().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const ele = res.data[t] |
|||
memberBenefitList.value.push({ id: ele.id, ...ele.content }) |
|||
} |
|||
}) |
|||
} |
|||
getData() |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-horizontal-scrollbar) { |
|||
z-index: 3 !important; |
|||
width: 500px !important; |
|||
background: rgb(0 0 0 / 10%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: #e00068 !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.member-container { |
|||
overflow: hidden; |
|||
padding-top: 152px; |
|||
padding-left: 56px; |
|||
|
|||
--animate-duration: 0.5s; |
|||
|
|||
.member-scroll { |
|||
position: relative; |
|||
width: 1864px; |
|||
height: 610px; |
|||
margin-top: 40px; |
|||
margin-left: 0; |
|||
:deep(.swiper-slide) { |
|||
width: 880px !important; |
|||
height: 575px; |
|||
} |
|||
.act-list { |
|||
// display: flex; |
|||
width: fit-content; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,199 @@ |
|||
<template> |
|||
<div v-if="showThis" :key="actInfo.id" class="act-item animate__faster animate__animated animate__fadeInUp"> |
|||
<!-- 图片 --> |
|||
<div class="img-container" @click="clickActItem"> |
|||
<img :style="{ backgroundImage: `url(${getBackGround()})` }" alt="" /> |
|||
</div> |
|||
<!-- 标题 --> |
|||
<div class="marquee-wrapper"> |
|||
<Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(actInfo, 'activityName')">{{ |
|||
switchLanguage(actInfo, 'activityName') |
|||
}}</Marquees> |
|||
</div> |
|||
<!-- 介紹无 --> |
|||
<scroll-view |
|||
v-if="false" |
|||
ref="introScrollRef" |
|||
class="intro-scroll" |
|||
:style="{ height: actInfo.point !== -1 || actInfo.shopCode ? '499px' : null }" |
|||
:list="[switchLanguage(actInfo, 'activityContent')]" |
|||
:scrollbar="true" |
|||
:observe-image="true" |
|||
:refresh-delay="500" |
|||
> |
|||
<p class="intro" v-text="switchLanguage(actInfo, 'activityContent')"></p> |
|||
</scroll-view> |
|||
<!-- 导航无 --> |
|||
<div |
|||
v-if="false" |
|||
class="attr-container" |
|||
:style="{ |
|||
justifyContent: actInfo.startDate === '' && actInfo.activityAddress === '' ? 'flex-end' : '' |
|||
}" |
|||
> |
|||
<p class="time-tip"> |
|||
<span v-if="actInfo.startDate" class="act-time">{{ $t('activity.time') + actInfo.startDate + '至' + actInfo.endDate }}</span> |
|||
<span v-if="actInfo.activityAddress" class="act-time">{{ |
|||
$t('activity.address') + switchLanguage(actInfo, 'activityAddress') |
|||
}}</span> |
|||
</p> |
|||
<!-- go --> |
|||
<div v-if="actInfo.point !== -1 || actInfo.shopCode" class="go" @click="handleGo"> |
|||
<span>{{ $t('activity.actGo') }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue' |
|||
import { useStatisticsModel } from '@/composables/useStatistics' |
|||
import Marquees from '@/base/Marquees/Marquees.vue' |
|||
|
|||
import scrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import { useActivityNav } from '@/composables/useActivityNav' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
|
|||
interface AItem { |
|||
actInfo: Activity |
|||
} |
|||
|
|||
const props = defineProps<AItem>() |
|||
const emits = defineEmits(['click', 'clickImg']) |
|||
const { nav } = useActivityNav() |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
const showThis = ref(false) |
|||
function clickActItem() { |
|||
useStatisticsModel({ recordType: 2, moduleName: props.actInfo.activityName, activityCode: props.actInfo.activityId }) |
|||
emits('click', props.actInfo) |
|||
} |
|||
function handleGo() { |
|||
nav(props.actInfo) |
|||
useStatisticsModel({ recordType: 2, moduleName: props.actInfo.activityName, activityCode: props.actInfo.activityId }) |
|||
// emits('clickGo', props.actInfo) |
|||
} |
|||
function getBackGround() { |
|||
if (props.actInfo.fileUrl && props.actInfo.fileUrl.length) { |
|||
return props.actInfo.fileUrl[0] |
|||
} |
|||
return require('@/assets/images/empty_big.svg') |
|||
} |
|||
onMounted(() => { |
|||
showThis.value = true |
|||
}) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
z-index: 3 !important; |
|||
background: rgb(0 0 0 / 3%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: rgb(0 0 0 / 6%) !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.act-item { |
|||
position: relative; |
|||
display: inline-flex; |
|||
overflow: hidden; |
|||
width: 880px; |
|||
height: 575px; |
|||
padding-bottom: 0; |
|||
margin-right: 32px; |
|||
background-color: #fff; |
|||
border-radius: 16px; |
|||
flex-direction: column; |
|||
|
|||
--animate-duration: 0.5s; |
|||
.img-container { |
|||
position: relative; |
|||
width: inherit; |
|||
height: 495px; |
|||
background: #ebebeb; |
|||
|
|||
img { |
|||
width: inherit; |
|||
height: inherit; |
|||
background-size: cover; |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
.marquee-wrapper { |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
width: 800px; |
|||
height: 32px; |
|||
margin-top: 24px; |
|||
margin-left: 40px; |
|||
white-space: nowrap; |
|||
.name { |
|||
display: inline-block; |
|||
font-weight: 700; |
|||
font-size: 24px; |
|||
line-height: inherit; |
|||
font-family: 'font_bold'; |
|||
color: rgb(0 0 0 / 70%); |
|||
} |
|||
} |
|||
.intro-scroll { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 544px; |
|||
height: 100%; |
|||
padding: 0; |
|||
padding-right: 20px; |
|||
margin-top: 5px; |
|||
margin-left: 48px; |
|||
border-radius: 0; |
|||
.intro { |
|||
font-size: 14px; |
|||
font-family: 'font_medium'; |
|||
text-align: justify; |
|||
white-space: pre-wrap; |
|||
color: rgb(0 0 0 / 60%); |
|||
line-height: 200%; |
|||
:deep(img) { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.attr-container { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
height: 44px; |
|||
padding: 0 48px; |
|||
margin-top: 16px; |
|||
.time-tip { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
width: 415px; |
|||
height: 48px; |
|||
margin-bottom: 0; |
|||
font-size: 14px; |
|||
font-family: 'font_regular'; |
|||
color: #d0b186; |
|||
.act-time { |
|||
&:nth-child(2) { |
|||
@include no-wrap(); |
|||
|
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
} |
|||
.go { |
|||
width: 115px; |
|||
height: 38px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: #fff; |
|||
background: linear-gradient(180deg, #c7a77b 0%, #d6bb97 100%); |
|||
border-radius: 90px; |
|||
line-height: 38px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,652 @@ |
|||
<template> |
|||
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__zoomOut"> |
|||
<masker @click="close"> |
|||
<div class="search-container animate__animated animate__fadeInUp"> |
|||
<!-- 背景区域 --> |
|||
<div class="bg"></div> |
|||
<!-- <div class="line"></div> --> |
|||
<!-- bigtitle --> |
|||
<div class="title"> |
|||
<span>{{ switchLanguage({ name: '快捷搜索' }, 'name') }}</span> |
|||
<span>/</span> |
|||
<span class="title-en">{{ 'GLOBAL\nSEARCH' }}</span> |
|||
</div> |
|||
<!-- 关闭 --> |
|||
<div class="close-btn animate__animated animate__fadeInLeft" @click="close"> |
|||
<img :src="require('@/assets/images/shopDetail/close.svg')" alt="" /> |
|||
</div> |
|||
<div class="search-btn"> |
|||
{{ $t('search.btnName') }} |
|||
</div> |
|||
<!-- 公共设施 --> |
|||
<div v-if="input.length === 0" class="fac-container animate__animated animate__fadeInUp"> |
|||
<div class="fac-title"> |
|||
<p v-if="language === 'zh' || language === 'tw'" class="fac-zh">{{ switchLanguage({ name: '快捷入口' }, 'name') }}</p> |
|||
<p v-else class="fac-en">QUICK ENTERANCE</p> |
|||
<!-- {{ $t('search.fac') }} --> |
|||
</div> |
|||
<scroll-view |
|||
ref="facScroll" |
|||
:scroll-x="true" |
|||
:list="facilityList" |
|||
class="fac-scroll" |
|||
:class="{ center: facilityList.length < 14 }" |
|||
> |
|||
<ul class="facilities"> |
|||
<li v-for="(item, index) of facilityList" :key="index" class="facility" @click="clickFacility(item)"> |
|||
<img :src="item.filePath" class="facility-icon" alt="" /> |
|||
<span class="facility-name">{{ getFacName(item) }}</span> |
|||
</li> |
|||
</ul> |
|||
</scroll-view> |
|||
</div> |
|||
|
|||
<!-- 搜索框 --> |
|||
<div class="search-wrapper animate__animated animate__fadeInRight"> |
|||
<div class="search-bg"> |
|||
<img class="bg-search" src="@/assets/images/search/bg_search.svg" alt="" /> |
|||
<img src="@/assets/images/search/searchFirstIcon.svg" class="first-icon" /> |
|||
</div> |
|||
<div v-if="input?.length" class="saw" v-text="input"></div> |
|||
<!-- :placeholder="" --> |
|||
<input v-model="input" readonly type="text" :class="{ istip: input?.length === 0 }" /> |
|||
<h4 v-if="input?.length === 0" class="search-tip">{{ mode === 'hand' ? $t('search.valueTipHand') : $t('search.valueTip') }}</h4> |
|||
<div v-if="input?.length" class="close" @click="del"> |
|||
<svg width="40" height="40" class="icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<rect width="40" height="40" rx="20" fill="white" /> |
|||
<path |
|||
d="M20 18.1146L26.6 11.5146L28.4853 13.4L21.8853 20L28.4853 26.6L26.6 28.4853L20 21.8853L13.4 28.4853L11.5146 26.6L18.1146 20L11.5146 13.4L13.4 11.5146L20 18.1146Z" |
|||
fill="#E00068" |
|||
/> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 热搜无 --> |
|||
<div v-if="hotSearchList?.length" class="hot-container animate__animated animate__fadeInUp"> |
|||
<ul class="hot"> |
|||
<p v-if="language === 'zh'" class="hot-name">热门搜索</p> |
|||
<p v-else-if="language === 'tw'" class="hot-name">熱門搜索</p> |
|||
<p v-else class="hot-nameEn">TOP SEARCHES</p> |
|||
<!-- <img width="42px" height="23px" src="~common/images/search/hot.png" alt="" /> --> |
|||
</ul> |
|||
<scroll-view ref="hotScroll" :scroll-x="true" :list="hotSearchList" :refresh-delay="600" class="hot-scroll"> |
|||
<ul class="hot-brands"> |
|||
<li v-for="item of hotSearchList" :key="item.shopCode" class="brand" @click="handleHotSearch(item)"> |
|||
{{ switchLanguage(item, 'shopName') }} |
|||
</li> |
|||
</ul> |
|||
</scroll-view> |
|||
</div> |
|||
<!-- 结果 这个只有品牌没有活动--> |
|||
<!-- <scroll-view class="search-brand-scroll" v-if="searchShopList.length" :list="searchShopList"> |
|||
<ul class="brands-list" > |
|||
<li |
|||
@click="handleSearchShop(item)" |
|||
:key="item.code" |
|||
v-for="item of searchShopList" |
|||
class="brand" |
|||
> |
|||
<div class="logo-wrapper"> |
|||
<img :src="config.baseUrl + item.logoPath" class="logo" alt="" /> |
|||
</div> |
|||
<p class="right"> |
|||
<span class="name">{{ item | switchLanguage("name") }}</span> |
|||
<span class="floor-house">{{ item.floorName }}</span> |
|||
</p> |
|||
</li> |
|||
</ul> |
|||
</scroll-view> --> |
|||
|
|||
<!-- <switchTab |
|||
class="btn-group" |
|||
:width="276" |
|||
:height="82" |
|||
:wrapper-width="560" |
|||
:wrapper-height="90" |
|||
:list="list" |
|||
@click="handleSwitch" |
|||
></switchTab> --> |
|||
<searchResultList |
|||
v-if="input.length !== 0" |
|||
class="animate__animated animate__fadeInUp" |
|||
:list="searchShopList" |
|||
@handle-activity="handleActivity" |
|||
@handle-shop="handleSearchShop" |
|||
/> |
|||
<!-- 键盘 --> |
|||
<search-keyboard ref="keyboardRef" class="keyboard" @letter-key="getLetterKey" @mode="handleMode" /> |
|||
</div> |
|||
</masker> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import masker from '@/base/Masker/Masker.vue' |
|||
|
|||
// import switchTab from '@/components/SwitchTab/SwitchTab.vue' |
|||
import scrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import searchKeyboard from '@/components/SearchKeyboard/SearchKeyboard.vue' |
|||
import { useStatistics } from '@/composables/useStatistics' |
|||
import searchResultList from '@/components/SearchResultList/SearchResultList.vue' |
|||
import { useSearchShop } from '@/composables/useSearchShop' |
|||
import { ref, computed } from 'vue' |
|||
// import { useRoute } from 'vue-router' |
|||
|
|||
import { useFacilityNav } from '@/composables/useFacilityNav' |
|||
import { storeToRefs } from 'pinia' |
|||
import { useRootStore } from '@/store/root' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
const { handleFacility } = useFacilityNav() |
|||
|
|||
const store = useRootStore() |
|||
const hotSearchList = ref([]) |
|||
const { shopList, facilityList, language } = storeToRefs(store) |
|||
// const route = useRoute() |
|||
const INPUT_MAX_LEN = computed(() => (mode.value === 'hand' ? 5 : 7)) |
|||
const input = ref('') |
|||
const mode = ref('keyboard') |
|||
const keyboardRef = ref() |
|||
const actDetailItem = ref<Activity>() //活动详情 |
|||
const switchIdx = ref<0 | 1>(0) |
|||
|
|||
const info = ref({}) //店铺活动详情 |
|||
const showInfo = ref(false) //是否显示弹框 |
|||
|
|||
const { searchShopList } = useSearchShop(input, switchIdx) |
|||
|
|||
// searchShopList() { |
|||
// if (this.mode === 'keyboard') { |
|||
// if (this.input.length === 0) { |
|||
// return [] |
|||
// } else if (this.input.length === 1) { |
|||
// return this.shopList.filter(shop => shop.initials.startsWith(this.input) || shop.name.startsWith(this.input) || shop.nameEn.startsWith(this.input)) |
|||
// } else if (this.input.length > 1) { |
|||
// const value = this.input.substr(1) |
|||
// return this.shopList.filter(shop => shop.initials.includes(value) || shop.name.includes(this.input) || shop.nameEn.includes(this.input)) |
|||
// } else { |
|||
// return [] |
|||
// } |
|||
// } else { |
|||
// if (this.input.length === 0) { |
|||
// return [] |
|||
// } else { |
|||
// return this.shopList.filter(shop => shop.name.includes(this.input)) |
|||
// } |
|||
// } |
|||
// } |
|||
|
|||
//获取公共实施名称 |
|||
function getFacName(item: Facility) { |
|||
if (language.value === 'zh') { |
|||
return item.customFacilityName ? item.customFacilityName : item.name |
|||
} else if (language.value === 'tw') { |
|||
return switchLanguage(item, 'customFacilityName') ? switchLanguage(item, 'customFacilityName') : switchLanguage(item, 'name') |
|||
} else if (language.value === 'en') { |
|||
if (item.customFacilityNameEn) { |
|||
return item.customFacilityNameEn |
|||
} else if (item.nameEn) { |
|||
return item.nameEn |
|||
} |
|||
return item.name |
|||
} |
|||
} |
|||
function clickFacility(item: Facility) { |
|||
handleFacility(item) |
|||
close() |
|||
} |
|||
//关闭搜索 |
|||
function close() { |
|||
store.SET_SHOW_SEARCH(false) |
|||
} |
|||
|
|||
//点击活动 |
|||
function handleActivity(item: Activity) { |
|||
info.value = item |
|||
actDetailItem.value = item |
|||
showInfo.value = true |
|||
// const timeId = setTimeout(() => { |
|||
// clearTimeout(timeId) |
|||
// showDetail.value = true |
|||
// }, 10) |
|||
// store.SET_SELECTED_MODULE({ |
|||
// iconName: 'icon-act', |
|||
// img: require('@/assets/images/home/icon-act-sel.svg'), |
|||
// name: '活动精选', |
|||
// nameEn: 'SELECTION', |
|||
// url: '/activity' |
|||
// }) |
|||
// router.push('/activity') |
|||
} |
|||
// 服务设施 |
|||
/* function handleFacilities(item) { |
|||
const nearestPoint = window.Map_QM.pathIcon({ type: item.type }) |
|||
// this.name = item.name |
|||
// this.logoPath = item.imgUrl |
|||
// console.log('nearestPoint :>> ', item) |
|||
store.SET_SHOP({ |
|||
yaxis: nearestPoint.node, |
|||
floorOrder: nearestPoint.floor, |
|||
name: item.title, |
|||
nameEn: item.titleEn, |
|||
logoPath: item.imgUrl, |
|||
isFacility: true, |
|||
facType: item.type, |
|||
floorName: currentBuildingFloorsList.value.filter(itd => itd.order === nearestPoint.floor)[0].name |
|||
}) |
|||
useSearchStatistics(item.title, 0) |
|||
router.push('/nav') |
|||
} */ |
|||
|
|||
//点击店铺 |
|||
function handleSearchShop(val: Shop) { |
|||
store.SET_SHOP(val) |
|||
store.SET_SHOW_DETAIL(true) |
|||
useStatistics({ tag: 'brandSearch', shopCode: val.shopCode }) |
|||
|
|||
// router.push('/search/detail') |
|||
} |
|||
//获取点击的值 |
|||
function getLetterKey(letter: string) { |
|||
if (letter.length > INPUT_MAX_LEN.value) { |
|||
return |
|||
} |
|||
input.value = letter |
|||
} |
|||
//切换模式 |
|||
function handleMode(val: string) { |
|||
mode.value = val |
|||
} |
|||
function del() { |
|||
keyboardRef.value.clear() |
|||
} |
|||
//店铺详情 |
|||
function handleHotSearch(item: Shop) { |
|||
const val = shopList.value.find(cc => cc.shopCode === item.shopCode) |
|||
if (!val) { |
|||
return |
|||
} |
|||
store.SET_SHOP(val) |
|||
store.SET_SHOW_DETAIL(true) |
|||
// router.push('/search/detail') |
|||
} |
|||
//切换类型 |
|||
// function handleSwitch(index: 0 | 1) { |
|||
// switchIdx.value = index |
|||
// switch (index) { |
|||
// case 0: |
|||
// keyboardRef.value?.handleChangeKeyboardMode('keyboard') |
|||
|
|||
// break |
|||
// case 1: |
|||
// keyboardRef.value?.handleChangeKeyboardMode('hand') |
|||
|
|||
// break |
|||
// default: |
|||
// break |
|||
// } |
|||
// } |
|||
/* function back() { |
|||
if (selectedModule.value) { |
|||
router.push(selectedModule.value.url) |
|||
} else { |
|||
router.push('/home') |
|||
} |
|||
} */ |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.search-container { |
|||
position: absolute; |
|||
top: 0; |
|||
z-index: 100; |
|||
width: 1600px; |
|||
height: 856px; |
|||
margin-top: 112px; |
|||
margin-left: 160px; |
|||
background: #f5f5f5; |
|||
border-radius: 16px; |
|||
|
|||
--animate-duration: 700ms; |
|||
|
|||
.bg { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 0; |
|||
width: 680px; |
|||
height: 856px; |
|||
background-color: rgb(255 255 255 / 100%); |
|||
border-radius: 0 16px 16px 0; |
|||
} |
|||
.line { |
|||
position: absolute; |
|||
top: 433px; |
|||
left: 64px; |
|||
z-index: 2; |
|||
width: 1008px; |
|||
height: 1px; |
|||
background: rgb(255 255 255 / 20%); |
|||
} |
|||
.title { |
|||
position: absolute; |
|||
top: 48px; |
|||
right: 285px; |
|||
z-index: 1; |
|||
font-size: 48px; |
|||
font-family: 'font_bold'; |
|||
color: #534f46; |
|||
span:nth-child(2) { |
|||
margin-right: 20px; |
|||
margin-left: 20px; |
|||
font-family: 'font_light'; |
|||
opacity: 0.5; |
|||
} |
|||
.title-en { |
|||
display: inline-block; |
|||
width: 70px; |
|||
font-size: 18px; |
|||
font-family: 'font_regular'; |
|||
color: #615c59; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
.close-btn { |
|||
position: absolute; |
|||
top: -40px; |
|||
right: -40px; |
|||
z-index: 1; |
|||
width: 100px; |
|||
height: 100px; |
|||
padding: 26px; |
|||
background: rgb(255 255 255 / 60%); |
|||
border: 2px solid #fff; |
|||
border-radius: 50px; |
|||
backdrop-filter: blur(20px); |
|||
// margin: auto; |
|||
img { |
|||
width: 48px; |
|||
} |
|||
} |
|||
.search-btn { |
|||
position: absolute; |
|||
top: 184px; |
|||
right: 68px; |
|||
width: 156px; |
|||
height: 72px; |
|||
padding: 16px 0; |
|||
font-size: 28px; |
|||
font-family: 'font_regular'; |
|||
text-align: center; |
|||
color: #fff; |
|||
background: #e00068; |
|||
border-radius: 24px; |
|||
line-height: 37px; |
|||
} |
|||
.fac-container { |
|||
position: absolute; |
|||
top: 64px; |
|||
left: 48px; |
|||
// margin: 0px auto 0; |
|||
z-index: 1; |
|||
.fac-title { |
|||
z-index: 1; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-direction: column; |
|||
margin-bottom: 24px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
text-align: left; |
|||
color: #615c59; |
|||
|
|||
.fac-zh { |
|||
font-size: 20px; |
|||
} |
|||
.fac-en { |
|||
font-size: 20px; |
|||
font-family: 'font_rugular'; |
|||
} |
|||
} |
|||
.fac-scroll { |
|||
overflow: hidden; |
|||
width: 856px; |
|||
height: 90px; |
|||
margin-top: 0; |
|||
margin-left: -64px; |
|||
// text-align: center; |
|||
// &.center { |
|||
// display: flex; |
|||
// justify-content: center; |
|||
// } |
|||
|
|||
.facilities { |
|||
display: flex; |
|||
width: fit-content; |
|||
padding-left: 64px; |
|||
// justify-content: center; |
|||
// flex-wrap: nowrap; |
|||
// grid-template-rows: repeat(1, 100%); |
|||
// grid-template-columns: repeat(1, 44px); |
|||
gap: 0 24px; |
|||
.facility { |
|||
display: inline-block; |
|||
// height: 62px; |
|||
// margin-right: 40px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-shrink: 0; |
|||
width: 44px; |
|||
// white-space: nowrap; |
|||
flex-direction: column; |
|||
.facility-icon { |
|||
width: 100%; |
|||
height: 44px; |
|||
object-fit: scale-down; |
|||
margin-bottom: 8px; |
|||
// box-shadow: 2px 4px 16px rgba(142, 142, 142, 0.16); |
|||
border-radius: 0; |
|||
} |
|||
.facility-name { |
|||
height: 32px; |
|||
font-size: 12px; |
|||
font-family: 'font_regular'; |
|||
text-align: center; |
|||
color: #8e9090; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-wrapper { |
|||
position: absolute; |
|||
top: 184px; |
|||
right: 244px; |
|||
z-index: 3; |
|||
// margin: 40px auto; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
width: 368px; |
|||
height: 72px; |
|||
padding-left: 32px; |
|||
background: #0000; |
|||
border-radius: 24px; |
|||
opacity: 1; |
|||
// box-shadow: 0 1px 0 rgb(255 255 255 / 30%), inset 0 4px 30px rgb(0 0 0 / 2%); |
|||
.search-bg { |
|||
.first-icon { |
|||
position: absolute; |
|||
top: 16px; |
|||
left: 32px; |
|||
z-index: 1; |
|||
} |
|||
.bg-search { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 0; |
|||
} |
|||
} |
|||
.saw { |
|||
position: absolute; |
|||
top: 27px; |
|||
left: 95px; |
|||
width: fit-content; |
|||
height: 24px; |
|||
padding-right: 10px; |
|||
font-size: 36px; |
|||
font-family: 'font_regular'; |
|||
color: #534f4600; |
|||
transition: border-right 0.3s linear; |
|||
border-right: 1px solid #e00068; |
|||
animation: shadow 1.5s ease-in-out infinite; |
|||
|
|||
@keyframes shadow { |
|||
0% { |
|||
border-right-color: #e00068; |
|||
} |
|||
100% { |
|||
border-right-color: #f175b300; |
|||
} |
|||
} |
|||
} |
|||
input { |
|||
position: absolute; |
|||
top: 16px; |
|||
left: 95px; |
|||
z-index: 4; |
|||
width: 70%; |
|||
height: 44px; |
|||
margin-top: 0; |
|||
margin-left: 0; |
|||
font-size: 36px; |
|||
font-family: 'font_regular'; |
|||
text-align: left; |
|||
color: #534f46; |
|||
background-color: #fff0; |
|||
border: none; |
|||
outline: none; |
|||
// line-height: px; |
|||
vertical-align: middle; |
|||
&.istip { |
|||
height: 40px; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
&::input-placeholder, |
|||
&::input-placeholder { |
|||
position: absolute; |
|||
top: 45%; |
|||
|
|||
/* placeholder字体大小 */ |
|||
font-size: 18px; |
|||
font-family: 'font_regular'; |
|||
|
|||
/* placeholder颜色 */ |
|||
color: rgb(0 0 0 / 20%); |
|||
transform: translateY(-50%); |
|||
} |
|||
} |
|||
.search-tip { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 96px; |
|||
font-size: 18px; |
|||
font-family: 'font_regular'; |
|||
color: #8e9090; |
|||
transform: translateY(-50%); |
|||
} |
|||
.close { |
|||
position: relative; |
|||
z-index: 5; |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-top: 0; |
|||
margin-left: 280px; |
|||
background: #fff0; |
|||
border: 0 solid #cdaa7f; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
.icon { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 40px; |
|||
height: 40px; |
|||
object-fit: scale-down; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
} |
|||
.hot-container { |
|||
position: absolute; |
|||
top: 262px; |
|||
left: 64px; |
|||
width: 1008px; |
|||
.hot { |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
text-align: left; |
|||
color: rgb(255 255 255 / 100%); |
|||
.hot-name { |
|||
margin-bottom: 0; |
|||
} |
|||
.hot-nameEn { |
|||
font-size: 19px; |
|||
font-family: 'font_medium'; |
|||
color: rgb(255 255 255 / 100%); |
|||
} |
|||
|
|||
img { |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
.hot-scroll { |
|||
overflow: hidden; |
|||
width: 1136px; |
|||
height: 62px; |
|||
margin-top: 24px; |
|||
margin-left: -64px; |
|||
} |
|||
.hot-brands { |
|||
// display: flex; |
|||
width: fit-content; |
|||
padding-left: 64px; |
|||
// flex-wrap: wrap; |
|||
white-space: nowrap; |
|||
.brand { |
|||
display: inline-block; |
|||
flex-shrink: 0; |
|||
width: fit-content; |
|||
padding: 20px 32px; |
|||
margin-right: 16px; |
|||
margin-bottom: 0; |
|||
font-size: 16px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: rgb(255 255 255 / 100%); |
|||
background: rgb(0 0 0 / 10%); |
|||
border: 1px solid rgb(0 0 0 / 10%); |
|||
border-radius: 50px; |
|||
// line-height: 19px; |
|||
opacity: 1; |
|||
// line-height: 56px; |
|||
// @include no-wrap(); |
|||
} |
|||
} |
|||
} |
|||
.btn-group { |
|||
position: absolute; |
|||
top: 430px; |
|||
right: 56px; |
|||
} |
|||
.act-item { |
|||
margin-left: 50%; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<div class="service-container"> |
|||
<!-- 切换按钮 --> |
|||
<switchTab |
|||
class="btn-group" |
|||
:width="364" |
|||
:height="68" |
|||
:wrapper-width="728" |
|||
:wrapper-height="68" |
|||
:list="list" |
|||
@click="handleSwitch" |
|||
></switchTab> |
|||
|
|||
<transition |
|||
enter-active-class="animate__faster animate__animated animate__fadeInUp" |
|||
leave-active-class="animate__animated animate__fadeOutDown" |
|||
> |
|||
<!-- 顧客心聲 --> |
|||
<PictureText v-if="switchIdx === 1" :ac-list="customerVoiceList" :qr-list="qrCodeList" /> |
|||
<!-- 服务 --> |
|||
<ScrollView v-else ref="actScroll" :list="serviceList" :refresh-delay="200" :scrollbar="true" class="service-scroll"> |
|||
<ul class="act-list"> |
|||
<serviceItem v-for="(item, index) in serviceList" :key="index" :service-item="item" @click="clickItem"></serviceItem> |
|||
</ul> |
|||
</ScrollView> |
|||
</transition> |
|||
<activityDetail v-if="showDetail" :act-info="currentItem" @close="showDetail = false"></activityDetail> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
// import { Autoplay, FreeMode, Pagination } from 'swiper' |
|||
// import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
// import 'swiper/css' |
|||
// import 'swiper/css/free-mode' |
|||
// const modules = [Autoplay, FreeMode, Pagination] |
|||
|
|||
import activityDetail from '@/components/ActivityDetail/ActivityDetail.vue' |
|||
import ScrollView from '@/base/ScrollView/ScrollView.vue' |
|||
import serviceItem from './ServiceItem.vue' |
|||
import { getServeList, getCustomerQRCodeList, getCustomerVoiceList } from '@/http/api/service' |
|||
import { nextTick, ref } from 'vue' |
|||
import switchTab from '@/components/SwitchTab/SwitchTab.vue' |
|||
import PictureText from '@/components/PictureText/PictureText.vue' |
|||
|
|||
const list = [ |
|||
{ |
|||
name: '商场服务', |
|||
en: 'INTIMATE SERVICE', |
|||
icon: require('@/assets/images/service/icon_service.svg'), |
|||
iconSel: require('@/assets/images/service/icon_serviceSel.svg') |
|||
}, |
|||
{ |
|||
name: '顾客心声', |
|||
en: 'VOICE OF CUSTOMERS', |
|||
icon: require('../../assets/images/service/icon_Voice.svg'), |
|||
iconSel: require('../../assets/images/service/icon_VoiceSel.svg') |
|||
} |
|||
] |
|||
|
|||
const serviceList = ref<Activity[]>([]) //服务 |
|||
const qrCodeList = ref<MmeberQRCode[]>([]) //二维码 |
|||
const customerVoiceList = ref<CustomerVoice[]>([]) //会员权益 |
|||
const switchIdx = ref(0) |
|||
|
|||
const currentItem = ref<Activity>() |
|||
const showDetail = ref(false) |
|||
const actScroll = ref() |
|||
function clickItem(item: Activity) { |
|||
// useStatisticsModel({ recordType: 2, moduleName: item.activityName, activityCode: item.id }) |
|||
currentItem.value = item |
|||
showDetail.value = true |
|||
} |
|||
/** |
|||
* |
|||
* @param index 点击分类 |
|||
*/ |
|||
function handleSwitch(index: number) { |
|||
if (switchIdx.value === index) { |
|||
return |
|||
} |
|||
switchIdx.value = index |
|||
if (switchIdx.value === 0) { |
|||
nextTick(() => { |
|||
actScroll.value.refresh() |
|||
}) |
|||
} |
|||
} |
|||
|
|||
function getData() { |
|||
getServeList().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const { name, nameEn, content, contentEn, file_code, point, logo_code } = res.data[t].content |
|||
serviceList.value.push({ |
|||
id: res.data[t].id, |
|||
activityContent: content, |
|||
activityContentEn: contentEn, |
|||
activityName: name, |
|||
activityNameEn: nameEn, |
|||
point, |
|||
logo_code, |
|||
fileUrl: file_code ?? [], |
|||
shopCode: '' |
|||
}) |
|||
} |
|||
}) |
|||
getCustomerQRCodeList().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const ele = res.data[t] |
|||
qrCodeList.value.push({ id: ele.id, ...ele.content }) |
|||
} |
|||
}) |
|||
getCustomerVoiceList().then(res => { |
|||
for (let t = 0; t < res.data.length; t++) { |
|||
const ele = res.data[t] |
|||
customerVoiceList.value.push({ id: ele.id, ...ele.content }) |
|||
} |
|||
}) |
|||
} |
|||
getData() |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
:deep(.bscroll-vertical-scrollbar) { |
|||
z-index: 3 !important; |
|||
// width: 500px !important; |
|||
background: rgb(0 0 0 / 10%); |
|||
border-radius: 6px; |
|||
opacity: 1 !important; |
|||
.bscroll-indicator { |
|||
background: #e0006891 !important; |
|||
border: none !important; |
|||
border-radius: 6px !important; |
|||
} |
|||
} |
|||
.service-container { |
|||
overflow: hidden; |
|||
padding-top: 152px; |
|||
padding-left: 56px; |
|||
|
|||
--animate-duration: 0.5s; |
|||
|
|||
.service-scroll { |
|||
position: relative; |
|||
overflow: hidden; |
|||
width: 1828px; |
|||
height: 615px; |
|||
margin-top: 40px; |
|||
margin-left: 0; |
|||
:deep(.swiper-slide) { |
|||
width: 880px !important; |
|||
height: 575px; |
|||
} |
|||
.act-list { |
|||
// display: flex; |
|||
display: grid; |
|||
grid-template-columns: repeat(6, 288px); |
|||
gap: 16px 16px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<li class="service-item" @click="clickItem(serviceItem)"> |
|||
<img :src="serviceItem.logo_code[0]" class="service-icon" alt="" /> |
|||
|
|||
<ul> |
|||
<li class="text">{{ serviceItem.activityName }}</li> |
|||
<li class="text">{{ serviceItem.activityNameEn }}</li> |
|||
</ul> |
|||
</li> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
type SItem = { |
|||
serviceItem: Activity |
|||
} |
|||
const props = withDefaults(defineProps<SItem>(), {}) |
|||
const $emit = defineEmits(['click']) |
|||
function clickItem(item: Activity) { |
|||
$emit('click', item) |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.service-item { |
|||
position: relative; |
|||
width: 288px; |
|||
height: 288px; |
|||
padding-top: 52px; |
|||
padding-left: 48px; |
|||
background-color: rgb(255 255 255 / 40%); |
|||
border: 2px solid white; |
|||
border-radius: 16px; |
|||
.service-icon { |
|||
width: 64px; |
|||
height: 64px; |
|||
object-fit: scale-down; |
|||
margin-bottom: 76px; |
|||
} |
|||
ul { |
|||
font-size: 24px; |
|||
font-family: 'font_regular'; |
|||
color: #534f46; |
|||
.text { |
|||
&:nth-child(1) { |
|||
max-width: 196px; |
|||
|
|||
@include no-wrap(); |
|||
} |
|||
&:nth-child(2) { |
|||
overflow: hidden; |
|||
max-width: 96px; |
|||
height: 28px; |
|||
margin-top: 6px; |
|||
font-size: 12px; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue