my.vue 43 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525
  1. <template>
  2. <view class="my-container">
  3. <view class="container-bg"></view>
  4. <cu-custom bgColor="#fff">
  5. <view slot="content" style="color: #FFFFFF">睡眠监测</view>
  6. </cu-custom>
  7. <view class="flex-col justify-start page">
  8. <view class="flex-col group_2 space-y-10">
  9. <view v-if="memberId" class="flex-col justify-start items-start my_device_header">
  10. <view class="flex-col section pos">
  11. <view class="flex-col my_device_profile">
  12. <view class="flex-row space-x-19">
  13. <image v-if="userInfo.face" class="shrink-0 image_5" :src="userInfo.face" @click="handleUpdateFace"/>
  14. <image v-else class="shrink-0 image_5" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/389DD3BFC0D343EB9465D84BEA657D67.png" @click="handleUpdateFace"/>
  15. <view class="flex-col flex-auto self-center space-y-14">
  16. <view class="flex-row space-x-8">
  17. <text class="text_2">{{ userInfo.nickname }}</text>
  18. <view class="flex-row shrink-0 section_3 space-x-4">
  19. <text class="font_2" @click="handleUpdateName"><text class="cuIcon-write"></text>编辑</text>
  20. </view>
  21. </view>
  22. <view class="flex-row items-center space-x-6">
  23. <text class="font_3 text_3"><text class="cuIcon-phone margin-right-sm"></text>{{ userInfo.mobile }}</text>
  24. </view>
  25. </view>
  26. <image @click="goPage('/pages/log/warn/index')" class="shrink-0 self-start image_6" src="../../static/mine/myIconAlert.png"/>
  27. </view>
  28. <view class="flex-row justify-between relative group_4">
  29. <view class="flex-col justify-start items-center self-center text-wrapper">
  30. <text class="font_4" @click="loginOut">重新绑定</text>
  31. </view>
  32. </view>
  33. </view>
  34. <!-- <view class="flex-col items-center text-center power-module">-->
  35. <!-- <image-->
  36. <!-- class="image_9"-->
  37. <!-- src="../../static/mine/myIconPower.png"-->
  38. <!-- />-->
  39. <!-- <text class="self-end text_4">1,548</text>-->
  40. <!-- </view>-->
  41. </view>
  42. </view>
  43. <view v-else class="flex-col justify-start items-start my_device_header">
  44. <view class="flex-col section pos">
  45. <view class="flex-col my_device_profile">
  46. <view @click="handleAuth" class="flex-row space-x-19">
  47. <image class="shrink-0 image_5" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/389DD3BFC0D343EB9465D84BEA657D67.png"/>
  48. <view class="flex-col flex-auto self-center space-y-14">
  49. <view class="flex-row space-x-8">
  50. <text class="text_2">未登录用户</text>
  51. </view>
  52. </view>
  53. <image class="shrink-0 self-start image_6" src="../../static/mine/myIconAlert.png"/>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="flex-col group_5 space-y-30">
  59. <view class="flex-col space-y-10 my_devices">
  60. <view class="flex-row justify-between">
  61. <text class="font_1 text_5 pos_2">我的设备</text>
  62. <view class="flex-row items-center section_4 pos_3">
  63. <text class="font_5" @click="addBindDevice">添加设备<text class="cuIcon-add"></text></text>
  64. </view>
  65. </view>
  66. <!-- device = 0 -->
  67. <view v-if="deviceList.length === 0">
  68. <view class="flex-row justify-center items-center home_add_devive space-x-10" @click="addBindDevice">
  69. <image class="image_4" src="../../static/home/homeIconAdd.png"/>
  70. <view class="text_5" @click="addBindDevice">添加设备</view>
  71. </view>
  72. </view>
  73. <view v-if="deviceList.length > 0" v-for="(item, index) in deviceList" :key="index" class="flex-col my_device_default space-y-6">
  74. <view class="flex-row justify-between items-end">
  75. <view class="flex-col space-y-16">
  76. <view class="flex-row space-x-8">
  77. <text class="font_4 text_6 text_8">设备</text>
  78. <text class="font_6">睡眠床垫</text>
  79. <text class="font_4 text_6 text_8">使用人</text>
  80. <text v-if="!item.user_name" class="font_6" @click="changeUserNameShow(item.user_name, item.device_id)">自己<text class="cuIcon-write"></text></text>
  81. <text v-else class="font_6" @click="changeUserNameShow(item.user_name, item.device_id)">{{ item.user_name }}<text class="cuIcon-write"></text></text>
  82. </view>
  83. <view class="flex-row items-baseline">
  84. <text class="font_3 text_6 text_9">SN</text>
  85. <text class="font_3 text_10">{{ item.imei }}</text>
  86. <text class="font_8 text_11 text_12" @click="deleteDevice(item.id, index, item.imei)">取消绑定</text>
  87. </view>
  88. </view>
  89. <view class="flex-col group_6 space-y-6" @click="goLookSleepReport(item.imei)">
  90. <text class="self-center font_2 text_6 text_7">香睡指数</text>
  91. <text class="self-start font_7">{{ item.score_value }}</text>
  92. </view>
  93. </view>
  94. <text class="self-end font_9">{{ item.score_desc }}</text>
  95. <view class="flex-row items-center space-x-20">
  96. <view class="flex-row items-center flex-auto">
  97. <image class="shrink-0 image_10 image_12" src="../../static/mine/myIconLink.png"/>
  98. <text class="font_5 text_13" @click="handleShareData">远程关爱</text>
  99. <image class="shrink-0 image_10 image_12" src="../../static/mine/myIconSetting.png"/>
  100. <text class="font_5 text_13" @click="getPages('/pages/user/alertSetting/index?imei=' + item.imei)">报警设置</text>
  101. <text class="cuIcon-card text-yellow image_10 image_12" style="font-size: 0.75rem;"></text>
  102. <text class="font_5 text_13" @click="getPages('/pages/log/iot/index?imei=' + item.imei + '&dtype=' + dtype)" >卡片详情</text>
  103. </view>
  104. <text class="font_10 text_16">{{ item.report_time }}</text>
  105. </view>
  106. </view>
  107. </view>
  108. <view class="flex-col space-y-8">
  109. <view v-if="memberId" class="flex-row justify-between">
  110. <text class="font_1">语音短信</text>
  111. <view class="flex-row items-center section_7" @click="goPage('/pages/log/smsVoice/package')">
  112. <text class="font_5">购买套餐<text class="cuIcon-goodsnew"></text></text>
  113. </view>
  114. </view>
  115. <view class="flex-col space-y-30">
  116. <view v-if="memberId" class="flex-row justify-between my_record">
  117. <view class="flex-col self-center space-y-14">
  118. <view class="flex-row items-center space-x-6" @click="goPage('/pages/log/packageBuy/index')">
  119. <text class="font_11"><text class="cuIcon-rechargefill text-orange margin-right-sm"></text>购买记录</text>
  120. </view>
  121. <view class="flex-row items-center space-x-6" @click="goPage('/pages/log/smsVoice/index')">
  122. <text class="font_11"><text class="cuIcon-noticefill text-cyan margin-right-sm"></text>发送记录</text>
  123. </view>
  124. </view>
  125. <view class="self-center section_9"></view>
  126. <view class="flex-col self-center space-y-6" @click="goPage('/pages/log/packageBuy/index')">
  127. <view class="flex-row space-x-4">
  128. <text class="self-center font_12 text_25">{{ smsCount }}</text>
  129. <text class="self-start font_11 text_26">次</text>
  130. </view>
  131. <text class="font_13">剩余短信</text>
  132. </view>
  133. <view class="flex-col self-center group_12 space-y-6" @click="goPage('/pages/log/packageBuy/index')">
  134. <view class="flex-row group_13">
  135. <text class="self-center font_12">{{ voiceCount }}</text>
  136. <text class="self-start font_11 text_27">次</text>
  137. </view>
  138. <text class="self-start font_13">剩余语音</text>
  139. </view>
  140. </view>
  141. <view class="flex-col justify-start my_settings">
  142. <view class="grid">
  143. <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
  144. <!-- <image-->
  145. <!-- class="image_17"-->
  146. <!-- src="../../static/mine/myWifi.png"-->
  147. <!-- />-->
  148. <!-- <text class="font_13 text_28">WIFI连接</text>-->
  149. <!-- </view>-->
  150. <view v-if="memberId" class="flex-col items-center relative grid-item space-y-8" @click="goDevicePage('/pages/user/broadcastDevice/index')">
  151. <image class="image_17" src="../../static/mine/myIconPromt.png"/>
  152. <text class="font_13 text_28">播报设备</text>
  153. </view>
  154. <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('免责声明','MATTRESS_DISCLAIMERS')">
  155. <image class="image_17" src="../../static/mine/myAnnouncement.png"/>
  156. <text class="font_13 text_28">免责声明</text>
  157. </view>
  158. <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('产品介绍', 'MATTRESS_PRODUCT_INTRODUCTION')">
  159. <image class="image_17" src="../../static/mine/myProduct.png"/>
  160. <text class="font_13 text_28">产品介绍</text>
  161. </view>
  162. <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('使用帮助', 'MATTRESS_HELP')">
  163. <image class="image_17" src="../../static/mine/myHelp.png"/>
  164. <text class="font_13 text_28">使用帮助</text>
  165. </view>
  166. <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('隐私政策', 'MATTRESS_PRIVACY_POLICY')">
  167. <image class="image_17" src="../../static/mine/mySecret.png"/>
  168. <text class="font_13 text_28">隐私政策</text>
  169. </view>
  170. <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('用户协议','MATTRESS_USER_AGREEMENT')">
  171. <image class="image_17" src="../../static/mine/myUserAgree.png"/>
  172. <text class="font_13 text_28">用户协议</text>
  173. </view>
  174. <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
  175. <!-- <image-->
  176. <!-- class="image_17"-->
  177. <!-- src="../../static/mine/myState.png"-->
  178. <!-- />-->
  179. <!-- <text class="font_13 text_28">配网说明</text>-->
  180. <!-- </view>-->
  181. <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
  182. <!-- <image-->
  183. <!-- class="image_17"-->
  184. <!-- src="../../static/mine/myOrder.png"-->
  185. <!-- />-->
  186. <!-- <text class="font_13 text_28">我的订单</text>-->
  187. <!-- </view>-->
  188. </view>
  189. </view>
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </view>
  195. <view class="cu-modal" :class="bindShow?'show':''">
  196. <view class="cu-dialog">
  197. <view class="cu-bar bg-white justify-end">
  198. <view style="color: black" class="content">设备绑定</view>
  199. <view class="action" @tap="bindShow=false">
  200. <text class="cuIcon-close text-red"></text>
  201. </view>
  202. </view>
  203. <view class="">
  204. <form>
  205. <view class="cu-form-group solid-bottom">
  206. <view class="title">扫描二维码</view>
  207. <input type="text" v-model="bindSn" class="text-left" placeholder="输入或扫描IMEI"/>
  208. <text class="cuIcon-scan text-xxl text-green" style="font-size: 50rpx;"
  209. @click="scan"></text>
  210. </view>
  211. </form>
  212. </view>
  213. <view class="cu-bar bg-white justify-end">
  214. <view class="action">
  215. <button class="cu-btn bg-cyan" @tap="goBuy">去购买</button>
  216. </view>
  217. <view class="action">
  218. <button class="cu-btn bg-green margin-left" @tap="bindDevice">确定</button>
  219. </view>
  220. </view>
  221. </view>
  222. </view>
  223. <view class="cu-modal" :class="updateShow?'show':''">
  224. <view class="cu-dialog">
  225. <view class="cu-bar bg-white justify-end">
  226. <view style="color: black" class="content">编辑昵称</view>
  227. <view class="action" @tap="updateShow=false">
  228. <text class="cuIcon-close text-red"></text>
  229. </view>
  230. </view>
  231. <view class="">
  232. <form>
  233. <view class="cu-form-group solid-bottom">
  234. <view class="title">昵称</view>
  235. <input type="text" v-model="nickname" class="text-left" placeholder="请输入昵称"/>
  236. </view>
  237. <view class="cu-form-group">
  238. <view class="text-df text-gray">设置昵称,以便播报,6字以内</view>
  239. </view>
  240. </form>
  241. </view>
  242. <view class="cu-bar bg-white justify-end">
  243. <view class="action">
  244. <button class="cu-btn bg-green margin-left" @tap="updateNickName">确定</button>
  245. </view>
  246. </view>
  247. </view>
  248. </view>
  249. <view class="cu-modal" :class="updateUserNameShow?'show':''" @tap="updateUserNameShow=false">
  250. <view class="cu-dialog" @tap.stop="">
  251. <view class="cu-bar bg-white justify-end">
  252. <view style="color: black" class="content">编辑使用人昵称</view>
  253. <view class="action" @tap="updateUserNameShow=false">
  254. <text class="cuIcon-close text-red"></text>
  255. </view>
  256. </view>
  257. <view class="">
  258. <form>
  259. <view class="cu-form-group solid-bottom">
  260. <view class="title">使用人</view>
  261. <input type="text" v-model="updateDeviceFrom.userName" class="text-left" placeholder="请输入昵称" :maxlength="6"/>
  262. </view>
  263. </form>
  264. </view>
  265. <view class="cu-bar bg-white justify-end">
  266. <view class="action">
  267. <button class="cu-btn bg-green margin-left" @tap="updateUserName">确定</button>
  268. </view>
  269. </view>
  270. </view>
  271. </view>
  272. </view>
  273. </template>
  274. <script>
  275. import { mapActions } from 'vuex'
  276. import Storage from '@/utils/storage'
  277. import * as Foundation from '@/ui-utils/Foundation'
  278. import * as API_deviceMemberBind from '@/api/device_member_bind'
  279. import * as API_SLEEP_REPORT from '@/api/sleep_report'
  280. import * as API_MEMBER_WARN_SWITCH from '@/api/member_warn_switch'
  281. import * as deviceDtypeEnum from '@/utils/enum/DeviceDTypeEnum'
  282. import {editDevice} from "../../api/device_member_bind";
  283. export default {
  284. data() {
  285. return {
  286. deviceList: [],
  287. unionId: '',
  288. memberId: '',
  289. bindSn: '',
  290. bindShow: false,
  291. updateShow: false,
  292. userInfo: null,
  293. nickname: '',
  294. smsCount: 0,
  295. voiceCount: 0,
  296. showCount: 0,
  297. dtype: null,
  298. updateUserNameShow: false,
  299. updateDeviceFrom: {
  300. userName: '',
  301. id: null
  302. }
  303. };
  304. },
  305. onShow() {
  306. this.deviceList = Storage.getItem('myBindDevices')
  307. if (this.memberId) {
  308. if (this.deviceList) {
  309. this.showCount ++;
  310. if (this.showCount === 3) {
  311. this.API_getNewReport()
  312. } else {
  313. const res = Storage.getItem('user-new-report')
  314. this.handleReport(res)
  315. }
  316. }
  317. this.getSmsVoiceQty()
  318. } else {
  319. this.memberId = Storage.getItem('uid')
  320. }
  321. this.userInfo = Storage.getItem('userInfo')
  322. this.dtype = deviceDtypeEnum.DEVICE_TYPE.SMCD
  323. },
  324. mounted() {
  325. this.memberId = Storage.getItem('uid')
  326. if (this.memberId) {
  327. this.unionId = this.userInfo.union_id
  328. if (this.userInfo.nickname.length > 6 || this.userInfo.mobile === this.userInfo.nickname || this.userInfo.nickname === '微信用户') {
  329. const _this = this
  330. uni.showModal({
  331. title: '提示',
  332. content: "您还未设置昵称,是否设置呢?",
  333. confirmText: "确定",
  334. showCancel: true,
  335. success: function(res) {
  336. if (res.confirm) {
  337. _this.handleUpdateName()
  338. }
  339. }
  340. })
  341. }
  342. if (this.deviceList) {
  343. console.log('this.deviceList===', this.deviceList)
  344. this.API_getNewReport()
  345. }
  346. this.getSmsVoiceQty()
  347. }
  348. },
  349. methods: {
  350. API_getNewReport() {
  351. const _this = this
  352. let imei = ''
  353. this.deviceList.forEach(item => {
  354. imei += item.imei + ','
  355. })
  356. imei = imei.substring(0, imei.length - 1)
  357. API_SLEEP_REPORT.getNewReportBySn({sns: imei, unionId: this.unionId}).then(res => {
  358. Storage.setItem("user-new-report", res)
  359. _this.handleReport(res)
  360. })
  361. },
  362. handleReport(res) {
  363. res.forEach(t => {
  364. this.deviceList.forEach(tt => {
  365. if (t.sn === tt.imei) {
  366. this.$set(tt, 'report_time', Foundation.unixToDate(t.report_time, "yyyy/MM/dd"))
  367. this.$set(tt, 'score_value', t.score_value)
  368. this.$set(tt, 'score_desc', t.score_desc)
  369. }
  370. })
  371. })
  372. },
  373. API_getDeviceList() {
  374. const _this = this
  375. API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: this.dtype, memberId: this.memberId}).then(res => {
  376. if (res.length === 0) {
  377. Storage.removeItem("nowChangeDevice")
  378. Storage.removeItem("myBindDevices")
  379. } else {
  380. _this.deviceList = res
  381. let nowDevice = Storage.getItem("nowChangeDevice")
  382. if (!nowDevice) {
  383. Storage.setItem("nowChangeDevice", res[0].imei)
  384. }
  385. Storage.setItem("myBindDevices", res)
  386. _this.API_getNewReport()
  387. }
  388. })
  389. },
  390. getSmsVoiceQty() {
  391. const _this = this
  392. API_MEMBER_WARN_SWITCH.getByMemberUnionId(this.userInfo.union_id).then(res => {
  393. if (res) {
  394. _this.smsCount = res.sms_qty
  395. _this.voiceCount = res.voice_qty
  396. }
  397. })
  398. },
  399. handleAuth() {
  400. uni.navigateTo({
  401. url: '/pages/login/auth'
  402. })
  403. },
  404. handleShareData() {
  405. uni.navigateTo({
  406. url: '/pages/user/shareUser/index'
  407. })
  408. },
  409. getPages(url) {
  410. uni.navigateTo({
  411. url: url
  412. });
  413. },
  414. // 扫描条码
  415. scan() {
  416. let _this = this
  417. uni.scanCode({
  418. success: function (res) {
  419. console.log(res, res.result.length)
  420. if (res.result.length > 20) {
  421. if (res.scanType === 'QR_CODE') {
  422. const urlStr = res.result
  423. const qs = Foundation.getQueryObject(urlStr)
  424. if (qs.mac && qs.type === 'MATTRESS') {
  425. _this.bindSn = qs.mac
  426. } else {
  427. uni.showToast({
  428. title: '请扫码正确的睡眠床垫二维码',
  429. icon: 'none',
  430. duration: 5000
  431. })
  432. }
  433. } else {
  434. _this.bindSn = res.result
  435. }
  436. } else {
  437. let str = res.result.split(':')
  438. if (str.length > 1) {
  439. _this.bindSn = str[1]
  440. } else {
  441. _this.bindSn = res.result
  442. }
  443. }
  444. },
  445. fail: (err) => {
  446. console.log(err)
  447. // #ifdef MP
  448. uni.getSetting({
  449. success: (res) => {
  450. let authStatus = res.authSetting['scope.camera'];
  451. if (!authStatus) {
  452. uni.showModal({
  453. title: '授权失败',
  454. content: 'app需要使用您的相机,请在设置界面打开相关权限',
  455. success: (res) => {
  456. if (res.confirm) {
  457. uni.openSetting()
  458. }
  459. }
  460. })
  461. }
  462. }
  463. })
  464. // #endif
  465. }
  466. })
  467. },
  468. bindDevice() {
  469. if (!this.bindSn) {
  470. uni.showToast({
  471. title: '请输入或绑定正确的二维码',
  472. icon: 'none',
  473. duration: 5000
  474. })
  475. return
  476. }
  477. const params = {
  478. imei: this.bindSn,
  479. memberId: this.memberId,
  480. dtype: this.dtype
  481. }
  482. this.bindShow = false
  483. let _this = this
  484. API_deviceMemberBind.bindDeviceByDtype(params).then(res => {
  485. if (res.success) {
  486. _this.bindSn = ''
  487. uni.showToast({
  488. title: '绑定成功',
  489. })
  490. _this.API_getDeviceList()
  491. } else {
  492. uni.showToast({
  493. title: res.message,
  494. icon: 'none',
  495. duration: 5000
  496. })
  497. }
  498. })
  499. },
  500. // 删除绑定的设备
  501. deleteDevice(id, index, imei){
  502. const _this = this
  503. uni.showModal({
  504. title: '提示',
  505. content: '确定要解绑吗',
  506. success: function (r) {
  507. if (r.confirm) {
  508. API_deviceMemberBind.delSleepMattress({id: id, imei: imei}).then(res=>{
  509. uni.showToast({
  510. title: '解绑成功',
  511. icon: 'none',
  512. duration: 3000
  513. })
  514. _this.deviceList.splice(index, 1)
  515. if (_this.deviceList.length > 0) {
  516. const nowDevice = Storage.getItem('nowChangeDevice')
  517. if (nowDevice === imei) {
  518. Storage.setItem("nowChangeDevice", _this.deviceList[0].imei)
  519. }
  520. Storage.setItem("myBindDevices", _this.deviceList)
  521. } else {
  522. Storage.removeItem('nowChangeDevice')
  523. Storage.removeItem('myBindDevices')
  524. }
  525. })
  526. }
  527. }
  528. })
  529. },
  530. loginOut() {
  531. const _this = this
  532. uni.showModal({
  533. title: '提示',
  534. content: "确定要退出重新绑定账号吗?",
  535. confirmText: "确定",
  536. showCancel: true,
  537. success: function(res) {
  538. if (res.confirm) {
  539. _this.logout().then(() => {
  540. Storage.removeItem("nowChangeDevice")
  541. Storage.removeItem("myBindDevices")
  542. uni.reLaunch({
  543. url:'/pages/login/index'
  544. })
  545. })
  546. }
  547. }
  548. })
  549. },
  550. addBindDevice() {
  551. if (this.memberId) {
  552. this.bindShow = 'show'
  553. } else {
  554. uni.showModal({
  555. title: '提示',
  556. content: "您还没有登录,是否前往登录?",
  557. confirmText: "确定",
  558. showCancel: true,
  559. success: function(res) {
  560. if (res.confirm) {
  561. uni.reLaunch({
  562. url:'/pages/login/auth'
  563. })
  564. }
  565. }
  566. })
  567. }
  568. },
  569. /** 头像发生改变 */
  570. handleUpdateFace(event) {
  571. let that = this
  572. wx.showActionSheet({
  573. itemList: ['从相册中选择', '拍照'],
  574. itemColor: '#CED63A',
  575. success(res) {
  576. if (!res.cancel) {
  577. if (res.tapIndex === 0) {
  578. that.chooseWxImage('album')
  579. } else if (res.tapIndex === 1) {
  580. that.chooseWxImage('camera')
  581. }
  582. }
  583. }
  584. })
  585. },
  586. /** 选择头像 */
  587. chooseWxImage(type) {
  588. let that = this
  589. wx.chooseImage({
  590. count: 1,
  591. sizeType: ['original', 'compressed'],
  592. sourceType: [type],
  593. success(res) {
  594. const tempFilePaths = res.tempFilePaths
  595. wx.uploadFile({
  596. url: that.MixinUploadApi,
  597. filePath: tempFilePaths[0],
  598. name: 'file',
  599. header: { uuid: Storage.getItem('uuid') },
  600. success(response) {
  601. const data = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
  602. that.userInfo.face = data.url
  603. const params = {
  604. face: data.url,
  605. nickname: that.userInfo.nickname
  606. }
  607. that.API_updateUser(params)
  608. }
  609. })
  610. }
  611. })
  612. },
  613. API_updateUser(params) {
  614. const _this = this
  615. this.saveUserInfo(params).then(() => {
  616. uni.showToast({
  617. title: '修改成功',
  618. icon: 'none'
  619. })
  620. this.$store.dispatch('getUserDataAction').then((res)=>{
  621. _this.userInfo = res
  622. })
  623. })
  624. },
  625. handleUpdateName() {
  626. this.nickname = this.userInfo.nickname
  627. this.updateShow = true
  628. },
  629. updateNickName() {
  630. if (this.nickname === '') {
  631. uni.showToast({
  632. title: '请输入昵称',
  633. icon: 'none',
  634. duration: 3000
  635. })
  636. return
  637. }
  638. if (this.nickname.length > 6) {
  639. uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
  640. return
  641. }
  642. this.updateShow = false
  643. const params = {
  644. face: this.userInfo.face,
  645. nickname: this.nickname
  646. }
  647. this.API_updateUser(params)
  648. },
  649. goPage(path) {
  650. if (this.unionId) {
  651. uni.navigateTo({
  652. url: path + '?unionId=' + this.unionId
  653. })
  654. }
  655. },
  656. goDevicePage(path) {
  657. if (this.memberId) {
  658. uni.navigateTo({
  659. url: path + '?memberId=' + this.memberId
  660. })
  661. } else {
  662. uni.showModal({
  663. title: '提示',
  664. content: "您还没有登录,是否前往登录?",
  665. confirmText: "确定",
  666. showCancel: true,
  667. success: function(res) {
  668. if (res.confirm) {
  669. uni.reLaunch({
  670. url:'/pages/login/auth'
  671. })
  672. }
  673. }
  674. })
  675. }
  676. },
  677. goLookArticles(name, position) {
  678. uni.navigateTo({
  679. url: '/pages/articles/index?position=' + position + '&name=' + name
  680. })
  681. },
  682. goLookSleepReport(imei) {
  683. uni.navigateTo({
  684. url: '/pages/log/report/friendReport?sn=' + imei
  685. })
  686. },
  687. changeUserNameShow(name, id) {
  688. this.updateDeviceFrom = {
  689. userName: name,
  690. id: id
  691. }
  692. this.updateUserNameShow = 'show'
  693. },
  694. updateUserName() {
  695. console.log('this.userName===', this.updateDeviceFrom)
  696. if (!this.updateDeviceFrom.userName) {
  697. uni.showToast({title: '请输入使用人昵称', icon: 'none', duration: 3000})
  698. return
  699. }
  700. if (this.updateDeviceFrom.userName.length > 6) {
  701. uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
  702. return
  703. }
  704. this.updateUserNameShow = false
  705. API_deviceMemberBind.editDevice({userName: this.updateDeviceFrom.userName}, this.updateDeviceFrom.id).then(res => {
  706. this.API_getDeviceList()
  707. })
  708. },
  709. ...mapActions({
  710. logout: 'logoutAction',
  711. saveUserInfo: 'saveUserInfoAction'
  712. })
  713. }
  714. };
  715. </script>
  716. <style lang="scss" scoped>
  717. .home_add_devive {
  718. padding: 2.75rem 0;
  719. background-color: rgba(14, 52, 147, 1);
  720. border-radius: 1rem;
  721. backdrop-filter: blur(0.63rem);
  722. .image_4 {
  723. width: 1.5rem;
  724. height: 1.5rem;
  725. }
  726. .text_5 {
  727. color: #ffffff;
  728. font-size: 1.3rem;
  729. font-family: PingFangSC;
  730. line-height: 1.38rem;
  731. margin-left: 0.5rem
  732. }
  733. }
  734. .power-module {
  735. position: absolute;
  736. right: 1.63rem;
  737. top: 10rem;
  738. .image_9 {
  739. width: 22px;
  740. height: 22px;
  741. }
  742. .text_4 {
  743. font-size: 16px;
  744. font-weight: 500;
  745. letter-spacing: 0px;
  746. line-height: 16px;
  747. color: rgba(255, 255, 255, 1);
  748. vertical-align: top;
  749. text-align: center;
  750. margin-top: 0.3rem;
  751. }
  752. }
  753. .container-bg {
  754. position: fixed;
  755. left: -130px;
  756. top: -130px;
  757. width: 480px;
  758. height: 344px;
  759. opacity: 1;
  760. border-radius: 63px;
  761. -webkit-transform: rotate(-315deg);
  762. transform: rotate(-315deg);
  763. background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
  764. }
  765. .page {
  766. padding-bottom: 3.13rem;
  767. background-color: #000000;
  768. width: 100%;
  769. overflow-y: auto;
  770. overflow-x: hidden;
  771. height: 100%;
  772. .group_2 {
  773. padding-bottom: 1.25rem;
  774. height: 61.06rem;
  775. overflow-y: auto;
  776. .my_device_header {
  777. padding: 0.25rem 0 2.75rem;
  778. overflow-x: hidden;
  779. z-index: 100;
  780. .image {
  781. margin-left: -6.38rem;
  782. border-radius: 3.94rem;
  783. width: 32.63rem;
  784. height: 25.44rem;
  785. }
  786. .section {
  787. // background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874493388853192993.png');
  788. background-size: 100% 100%;
  789. background-repeat: no-repeat;
  790. .section_2 {
  791. padding: 1.13rem 0.88rem 0.75rem;
  792. background-color: #ffffff4d;
  793. .space-x-6-reverse {
  794. & > view:not(:last-child),
  795. & > text:not(:last-child),
  796. & > image:not(:last-child) {
  797. margin-right: 0.38rem;
  798. }
  799. .image_2 {
  800. width: 1.06rem;
  801. height: 0.69rem;
  802. }
  803. .image_3 {
  804. width: 0.94rem;
  805. height: 0.69rem;
  806. }
  807. .image_4 {
  808. width: 1.5rem;
  809. height: 0.72rem;
  810. }
  811. }
  812. .text {
  813. font-size: 1.16rem;
  814. }
  815. }
  816. .space-y-32 {
  817. & > view:not(:first-child),
  818. & > text:not(:first-child),
  819. & > image:not(:first-child) {
  820. margin-top: 2rem;
  821. }
  822. }
  823. .my_device_profile {
  824. margin-top: 1.5rem;
  825. padding-left: 2.19rem;
  826. padding-right: 1.5rem;
  827. height: 6.09rem;
  828. .space-x-19 {
  829. & > view:not(:first-child),
  830. & > text:not(:first-child),
  831. & > image:not(:first-child) {
  832. margin-left: 1.19rem;
  833. }
  834. .image_5 {
  835. border-radius: 50%;
  836. width: 4.69rem;
  837. height: 4.69rem;
  838. }
  839. .image_6 {
  840. margin-top: 0.69rem;
  841. width: 1.16rem;
  842. height: 1.25rem;
  843. }
  844. }
  845. .group_4 {
  846. margin-top: -0.31rem;
  847. padding: 0 1.13rem;
  848. .text-wrapper {
  849. margin-left: 4.63rem;
  850. padding: 0.38rem 0;
  851. background-color: #ffffff66;
  852. border-radius: 6.25rem;
  853. width: 4.81rem;
  854. height: 1.5rem;
  855. }
  856. .image_9 {
  857. margin-top: 0.38rem;
  858. width: 1.31rem;
  859. height: 1.31rem;
  860. }
  861. }
  862. }
  863. }
  864. .text_5 {
  865. line-height: 1.03rem;
  866. }
  867. .pos_2 {
  868. position: absolute;
  869. left: 1.28rem;
  870. bottom: 0;
  871. }
  872. .section_4 {
  873. padding: 0.13rem 0.25rem 0.13rem 0.5rem;
  874. border-radius: 0.56rem;
  875. border: solid 0.063rem #4d9efa;
  876. }
  877. .pos_3 {
  878. position: absolute;
  879. right: 1.25rem;
  880. top: 26.28rem;
  881. }
  882. }
  883. .group_5 {
  884. padding: 0 1.25rem;
  885. .my_devices {
  886. .section_4 {
  887. padding: 0.13rem 0.25rem 0.13rem 0.5rem;
  888. border-radius: 0.56rem;
  889. border: solid 0.063rem #4d9efa;
  890. }
  891. }
  892. .space-y-8 {
  893. & > view:not(:first-child),
  894. & > text:not(:first-child),
  895. & > image:not(:first-child) {
  896. margin-top: 0.5rem;
  897. }
  898. .section_7 {
  899. padding: 0.19rem 0.25rem 0 0.5rem;
  900. border-radius: 0.56rem;
  901. height: 1.13rem;
  902. border: solid 0.063rem #4d9efa;
  903. }
  904. }
  905. }
  906. .space-y-30 {
  907. & > view:not(:first-child),
  908. & > text:not(:first-child),
  909. & > image:not(:first-child) {
  910. margin-top: 1.88rem;
  911. }
  912. z-index: 100;
  913. .my_record {
  914. padding: 1rem 1.25rem;
  915. background-color: #1241b8cc;
  916. border-radius: 1rem;
  917. .section_9 {
  918. background-color: #f2f2f2;
  919. width: 0.063rem;
  920. height: 2.5rem;
  921. }
  922. .group_12 {
  923. width: 3.78rem;
  924. .group_13 {
  925. padding: 0 0.13rem;
  926. .text_27 {
  927. margin-top: 0.5rem;
  928. }
  929. }
  930. }
  931. }
  932. .my_settings {
  933. padding: 0.63rem 0;
  934. background-color: #1241b8cc;
  935. border-radius: 1rem;
  936. .grid {
  937. padding: 0 1.06rem;
  938. height: 14.81rem;
  939. display: grid;
  940. grid-template-columns: repeat(4, 1fr);
  941. .grid-item {
  942. padding: 0.63rem 0;
  943. .image_17 {
  944. border-radius: 1.25rem;
  945. width: 2.5rem;
  946. height: 2.5rem;
  947. }
  948. .text_28 {
  949. opacity: 0.99;
  950. }
  951. }
  952. }
  953. }
  954. }
  955. .space-x-8 {
  956. & > view:not(:first-child),
  957. & > text:not(:first-child),
  958. & > image:not(:first-child) {
  959. margin-left: 0.5rem;
  960. }
  961. .text_2 {
  962. color: #ffffff;
  963. font-size: 1.25rem;
  964. font-family: PingFangSC;
  965. line-height: 1.16rem;
  966. }
  967. .section_3 {
  968. padding: 0.25rem 0.63rem;
  969. background-color: #ffffff26;
  970. border-radius: 0.63rem;
  971. height: 1.25rem;
  972. }
  973. .text_8 {
  974. line-height: 0.78rem;
  975. }
  976. .text_20 {
  977. line-height: 0.63rem;
  978. }
  979. }
  980. .font_4 {
  981. font-size: 0.88rem;
  982. font-family: PingFangSC;
  983. line-height: 0.81rem;
  984. color: #ffffff;
  985. }
  986. .font_3 {
  987. font-size: 0.88rem;
  988. font-family: PingFangSC;
  989. line-height: 0.59rem;
  990. color: #ffffff;
  991. }
  992. .text_6 {
  993. opacity: 0.5;
  994. }
  995. .font_2 {
  996. font-size: 0.63rem;
  997. font-family: PingFangSC;
  998. line-height: 0.59rem;
  999. color: #ffffff;
  1000. }
  1001. .font_5 {
  1002. font-size: 0.75rem;
  1003. font-family: PingFangSC;
  1004. line-height: 0.69rem;
  1005. color: #4d9efa;
  1006. }
  1007. .font_6 {
  1008. font-size: 0.88rem;
  1009. font-family: PingFangSC;
  1010. line-height: 0.81rem;
  1011. color: #d8d8d8;
  1012. }
  1013. .font_1 {
  1014. font-size: 1.13rem;
  1015. font-family: PingFangSC;
  1016. line-height: 1.06rem;
  1017. color: #ffffff;
  1018. }
  1019. .image_7 {
  1020. width: 0.63rem;
  1021. height: 0.63rem;
  1022. }
  1023. .space-y-14 {
  1024. & > view:not(:first-child),
  1025. & > text:not(:first-child),
  1026. & > image:not(:first-child) {
  1027. margin-top: 0.88rem;
  1028. }
  1029. .space-x-6 {
  1030. & > view:not(:first-child),
  1031. & > text:not(:first-child),
  1032. & > image:not(:first-child) {
  1033. margin-left: 0.38rem;
  1034. }
  1035. .image_8 {
  1036. width: 0.88rem;
  1037. height: 0.88rem;
  1038. }
  1039. .text_3 {
  1040. line-height: 0.63rem;
  1041. }
  1042. }
  1043. }
  1044. .space-x-4 {
  1045. & > view:not(:first-child),
  1046. & > text:not(:first-child),
  1047. & > image:not(:first-child) {
  1048. margin-left: 0.25rem;
  1049. }
  1050. .text_25 {
  1051. line-height: 1.09rem;
  1052. }
  1053. .text_26 {
  1054. margin-top: 0.5rem;
  1055. }
  1056. }
  1057. .font_11 {
  1058. font-size: 0.75rem;
  1059. font-family: PingFangSC;
  1060. line-height: 0.69rem;
  1061. color: #ffffff;
  1062. }
  1063. .font_12 {
  1064. font-size: 1.5rem;
  1065. font-family: PingFangSC;
  1066. line-height: 1.06rem;
  1067. color: #ffffff;
  1068. }
  1069. }
  1070. .space-y-10 {
  1071. & > view:not(:first-child),
  1072. & > text:not(:first-child),
  1073. & > image:not(:first-child) {
  1074. margin-top: 0.63rem;
  1075. }
  1076. .my_device_default {
  1077. padding: 0.63rem 0.75rem 0.63rem 1.25rem;
  1078. background-color: #1241b8cc;
  1079. border-radius: 1rem;
  1080. .group_6 {
  1081. margin-bottom: 0.25rem;
  1082. width: 3.56rem;
  1083. .text_7 {
  1084. line-height: 0.56rem;
  1085. }
  1086. }
  1087. }
  1088. .my_device {
  1089. padding-bottom: 0.63rem;
  1090. background-color: #1241b8cc;
  1091. border-radius: 1rem;
  1092. .group_7 {
  1093. width: 10.84rem;
  1094. .group_8 {
  1095. width: 3.09rem;
  1096. .group_9 {
  1097. padding-top: 1.63rem;
  1098. .text_18 {
  1099. line-height: 0.78rem;
  1100. }
  1101. .image_13 {
  1102. width: 2.38rem;
  1103. height: 2.38rem;
  1104. }
  1105. .pos_4 {
  1106. position: absolute;
  1107. left: 0;
  1108. bottom: 0;
  1109. }
  1110. }
  1111. .text_19 {
  1112. line-height: 0.63rem;
  1113. }
  1114. }
  1115. }
  1116. .group_10 {
  1117. margin-right: 1.25rem;
  1118. .text_17 {
  1119. line-height: 0.56rem;
  1120. }
  1121. }
  1122. .text_21 {
  1123. margin-right: 0.75rem;
  1124. }
  1125. .group_11 {
  1126. padding-left: 1.25rem;
  1127. padding-right: 1rem;
  1128. .image_14 {
  1129. width: 0.81rem;
  1130. height: 0.81rem;
  1131. }
  1132. .text_22 {
  1133. margin-left: 0.13rem;
  1134. }
  1135. .image_15 {
  1136. margin-left: 0.88rem;
  1137. }
  1138. .text_23 {
  1139. margin-left: 0.13rem;
  1140. }
  1141. .image_16 {
  1142. margin-left: 0.88rem;
  1143. }
  1144. .text_24 {
  1145. margin-left: 0.13rem;
  1146. }
  1147. }
  1148. }
  1149. .space-y-16 {
  1150. & > view:not(:first-child),
  1151. & > text:not(:first-child),
  1152. & > image:not(:first-child) {
  1153. margin-top: 1rem;
  1154. }
  1155. .text_9 {
  1156. line-height: 0.63rem;
  1157. }
  1158. .text_10 {
  1159. margin-left: 1.25rem;
  1160. line-height: 0.63rem;
  1161. }
  1162. .font_8 {
  1163. font-size: 0.63rem;
  1164. font-family: PingFangSC;
  1165. line-height: 0.59rem;
  1166. color: #a4caf5;
  1167. }
  1168. .text_11 {
  1169. text-decoration: underline;
  1170. }
  1171. .text_12 {
  1172. margin-left: 0.5rem;
  1173. }
  1174. }
  1175. .font_7 {
  1176. font-size: 3rem;
  1177. font-family: PingFangSC;
  1178. line-height: 2.19rem;
  1179. color: #ffffff;
  1180. }
  1181. .font_9 {
  1182. font-size: 0.88rem;
  1183. font-family: PingFangSC;
  1184. line-height: 0.81rem;
  1185. color: #4d9efa;
  1186. }
  1187. .space-x-20 {
  1188. & > view:not(:first-child),
  1189. & > text:not(:first-child),
  1190. & > image:not(:first-child) {
  1191. margin-left: 1.25rem;
  1192. }
  1193. .text_13 {
  1194. margin-left: 0.13rem;
  1195. }
  1196. .image_12 {
  1197. margin-left: 0.88rem;
  1198. }
  1199. .text_16 {
  1200. margin-right: 0.13rem;
  1201. }
  1202. }
  1203. .font_10 {
  1204. font-size: 0.63rem;
  1205. font-family: PingFangSC;
  1206. line-height: 0.5rem;
  1207. color: #4d9efa;
  1208. }
  1209. }
  1210. .image_10 {
  1211. width: 0.75rem;
  1212. height: 0.75rem;
  1213. }
  1214. .space-y-6 {
  1215. & > view:not(:first-child),
  1216. & > text:not(:first-child),
  1217. & > image:not(:first-child) {
  1218. margin-top: 0.38rem;
  1219. }
  1220. }
  1221. .font_13 {
  1222. font-size: 0.63rem;
  1223. font-family: PingFangSC;
  1224. line-height: 0.59rem;
  1225. color: #4d9efa;
  1226. }
  1227. }
  1228. .my-container {
  1229. width: 100%;
  1230. height: 100%;
  1231. position: relative;
  1232. background-color: #000000;
  1233. .mask-container {
  1234. overflow: hidden;
  1235. position: absolute;
  1236. height: 30%;
  1237. width: 100%;
  1238. background-size: cover;
  1239. background-position: center;
  1240. &:after {
  1241. content: '';
  1242. position: absolute;
  1243. width: 130%;
  1244. height: 130%;
  1245. left: 0;
  1246. top: 0;
  1247. z-index: 1;
  1248. filter: blur(10px);
  1249. transform: translate(-3rem, -3rem);
  1250. background: inherit;
  1251. background-size: 100% 100%;
  1252. }
  1253. .cover-mask {
  1254. position: absolute;
  1255. height: 100%;
  1256. width: 100%;
  1257. z-index: 3;
  1258. background-color: rgba(0, 0, 0, 0.8);
  1259. }
  1260. .head-img {
  1261. width: 108px;
  1262. height: 108px;
  1263. position: absolute;
  1264. top: 50%;
  1265. left: 50%;
  1266. transform: translate(-50%, -50%);
  1267. z-index: 99;
  1268. border-radius: 50%;
  1269. overflow: hidden;
  1270. }
  1271. .username {
  1272. position: absolute;
  1273. left: 50%;
  1274. bottom: 20px;
  1275. transform: translateX(-50%);
  1276. z-index: 99;
  1277. color: #fff;
  1278. font-size: 36 rpx;
  1279. }
  1280. }
  1281. .recommend-main {
  1282. width: 100%;
  1283. position: absolute;
  1284. top: 30%;
  1285. bottom: 50px;
  1286. .tabs {
  1287. box-shadow: 0 0 0.8px rgb(0, 0, 0 / 10%);
  1288. width: 100%;
  1289. height: 45px;
  1290. align-items: center;
  1291. .tab-item {
  1292. flex: 1;
  1293. font-size: 32 rpx;
  1294. text-align: center;
  1295. color: rgba(0, 0, 0, 0.5);
  1296. &.active {
  1297. color: rgb(248, 78, 81);
  1298. }
  1299. }
  1300. }
  1301. .music-title {
  1302. padding-left: 20px;
  1303. margin: 15px 0;
  1304. box-sizing: border-box;
  1305. color: #000;
  1306. font-size: 32 rpx;
  1307. font-weight: 600;
  1308. .playIcon {
  1309. margin-right: 8px;
  1310. font-size: 40 rpx;
  1311. }
  1312. .light-text {
  1313. font-size: 24 rpx;
  1314. margin-left: 6px;
  1315. color: rgba(0, 0, 0, 0.5);
  1316. }
  1317. }
  1318. .music-item {
  1319. height: 70px;
  1320. box-sizing: border-box;
  1321. padding: 0 20px;
  1322. align-items: center;
  1323. margin-bottom: 10px;
  1324. position: relative;
  1325. &:last-of-type {
  1326. margin-bottom: 0;
  1327. }
  1328. &.active {
  1329. background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));
  1330. .music-info {
  1331. .music-name,
  1332. .small-icon,
  1333. .music-singer {
  1334. color: #f84e51 !important;
  1335. }
  1336. &::before {
  1337. content: '';
  1338. width: 4px;
  1339. height: 65px;
  1340. background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
  1341. position: absolute;
  1342. left: 0px;
  1343. top: 3px;
  1344. }
  1345. }
  1346. }
  1347. .music-img {
  1348. width: 58px !important;
  1349. height: 58px !important;
  1350. border-radius: 6px;
  1351. }
  1352. .music-info {
  1353. margin-right: 15px;
  1354. margin-left: 15px;
  1355. width: calc(100vw - 135px);
  1356. text-align: left;
  1357. .music-name {
  1358. font-size: 30 rpx;
  1359. margin-bottom: 7px;
  1360. color: #000;
  1361. }
  1362. .music-singer {
  1363. color: rgba(0, 0, 0, 0.5);
  1364. font-size: 24 rpx;
  1365. align-items: center;
  1366. .small-icon {
  1367. margin-right: 6px;
  1368. transform: scale(0.9);
  1369. color: rgba(0, 0, 0, 0.5);
  1370. font-size: 12px;
  1371. padding: 1px 3px;
  1372. border: 1px solid rgba(0, 0, 0, 0.2);
  1373. border-radius: 4px;
  1374. }
  1375. }
  1376. }
  1377. }
  1378. }
  1379. }
  1380. </style>