1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525 |
- <template>
- <view class="my-container">
- <view class="container-bg"></view>
- <cu-custom bgColor="#fff">
- <view slot="content" style="color: #FFFFFF">睡眠监测</view>
- </cu-custom>
- <view class="flex-col justify-start page">
- <view class="flex-col group_2 space-y-10">
- <view v-if="memberId" class="flex-col justify-start items-start my_device_header">
- <view class="flex-col section pos">
- <view class="flex-col my_device_profile">
- <view class="flex-row space-x-19">
- <image v-if="userInfo.face" class="shrink-0 image_5" :src="userInfo.face" @click="handleUpdateFace"/>
- <image v-else class="shrink-0 image_5" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/389DD3BFC0D343EB9465D84BEA657D67.png" @click="handleUpdateFace"/>
- <view class="flex-col flex-auto self-center space-y-14">
- <view class="flex-row space-x-8">
- <text class="text_2">{{ userInfo.nickname }}</text>
- <view class="flex-row shrink-0 section_3 space-x-4">
- <text class="font_2" @click="handleUpdateName"><text class="cuIcon-write"></text>编辑</text>
- </view>
- </view>
- <view class="flex-row items-center space-x-6">
- <text class="font_3 text_3"><text class="cuIcon-phone margin-right-sm"></text>{{ userInfo.mobile }}</text>
- </view>
- </view>
- <image @click="goPage('/pages/log/warn/index')" class="shrink-0 self-start image_6" src="../../static/mine/myIconAlert.png"/>
- </view>
- <view class="flex-row justify-between relative group_4">
- <view class="flex-col justify-start items-center self-center text-wrapper">
- <text class="font_4" @click="loginOut">重新绑定</text>
- </view>
- </view>
- </view>
- <!-- <view class="flex-col items-center text-center power-module">-->
- <!-- <image-->
- <!-- class="image_9"-->
- <!-- src="../../static/mine/myIconPower.png"-->
- <!-- />-->
- <!-- <text class="self-end text_4">1,548</text>-->
- <!-- </view>-->
- </view>
- </view>
- <view v-else class="flex-col justify-start items-start my_device_header">
- <view class="flex-col section pos">
- <view class="flex-col my_device_profile">
- <view @click="handleAuth" class="flex-row space-x-19">
- <image class="shrink-0 image_5" src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/389DD3BFC0D343EB9465D84BEA657D67.png"/>
- <view class="flex-col flex-auto self-center space-y-14">
- <view class="flex-row space-x-8">
- <text class="text_2">未登录用户</text>
- </view>
- </view>
- <image class="shrink-0 self-start image_6" src="../../static/mine/myIconAlert.png"/>
- </view>
- </view>
- </view>
- </view>
- <view class="flex-col group_5 space-y-30">
- <view class="flex-col space-y-10 my_devices">
- <view class="flex-row justify-between">
- <text class="font_1 text_5 pos_2">我的设备</text>
- <view class="flex-row items-center section_4 pos_3">
- <text class="font_5" @click="addBindDevice">添加设备<text class="cuIcon-add"></text></text>
- </view>
- </view>
- <!-- device = 0 -->
- <view v-if="deviceList.length === 0">
- <view class="flex-row justify-center items-center home_add_devive space-x-10" @click="addBindDevice">
- <image class="image_4" src="../../static/home/homeIconAdd.png"/>
- <view class="text_5" @click="addBindDevice">添加设备</view>
- </view>
- </view>
- <view v-if="deviceList.length > 0" v-for="(item, index) in deviceList" :key="index" class="flex-col my_device_default space-y-6">
- <view class="flex-row justify-between items-end">
- <view class="flex-col space-y-16">
- <view class="flex-row space-x-8">
- <text class="font_4 text_6 text_8">设备</text>
- <text class="font_6">睡眠床垫</text>
- <text class="font_4 text_6 text_8">使用人</text>
- <text v-if="!item.user_name" class="font_6" @click="changeUserNameShow(item.user_name, item.device_id)">自己<text class="cuIcon-write"></text></text>
- <text v-else class="font_6" @click="changeUserNameShow(item.user_name, item.device_id)">{{ item.user_name }}<text class="cuIcon-write"></text></text>
- </view>
- <view class="flex-row items-baseline">
- <text class="font_3 text_6 text_9">SN</text>
- <text class="font_3 text_10">{{ item.imei }}</text>
- <text class="font_8 text_11 text_12" @click="deleteDevice(item.id, index, item.imei)">取消绑定</text>
- </view>
- </view>
- <view class="flex-col group_6 space-y-6" @click="goLookSleepReport(item.imei)">
- <text class="self-center font_2 text_6 text_7">香睡指数</text>
- <text class="self-start font_7">{{ item.score_value }}</text>
- </view>
- </view>
- <text class="self-end font_9">{{ item.score_desc }}</text>
- <view class="flex-row items-center space-x-20">
- <view class="flex-row items-center flex-auto">
- <image class="shrink-0 image_10 image_12" src="../../static/mine/myIconLink.png"/>
- <text class="font_5 text_13" @click="handleShareData">远程关爱</text>
- <image class="shrink-0 image_10 image_12" src="../../static/mine/myIconSetting.png"/>
- <text class="font_5 text_13" @click="getPages('/pages/user/alertSetting/index?imei=' + item.imei)">报警设置</text>
- <text class="cuIcon-card text-yellow image_10 image_12" style="font-size: 0.75rem;"></text>
- <text class="font_5 text_13" @click="getPages('/pages/log/iot/index?imei=' + item.imei + '&dtype=' + dtype)" >卡片详情</text>
- </view>
- <text class="font_10 text_16">{{ item.report_time }}</text>
- </view>
- </view>
- </view>
- <view class="flex-col space-y-8">
- <view v-if="memberId" class="flex-row justify-between">
- <text class="font_1">语音短信</text>
- <view class="flex-row items-center section_7" @click="goPage('/pages/log/smsVoice/package')">
- <text class="font_5">购买套餐<text class="cuIcon-goodsnew"></text></text>
- </view>
- </view>
- <view class="flex-col space-y-30">
- <view v-if="memberId" class="flex-row justify-between my_record">
- <view class="flex-col self-center space-y-14">
- <view class="flex-row items-center space-x-6" @click="goPage('/pages/log/packageBuy/index')">
- <text class="font_11"><text class="cuIcon-rechargefill text-orange margin-right-sm"></text>购买记录</text>
- </view>
- <view class="flex-row items-center space-x-6" @click="goPage('/pages/log/smsVoice/index')">
- <text class="font_11"><text class="cuIcon-noticefill text-cyan margin-right-sm"></text>发送记录</text>
- </view>
- </view>
- <view class="self-center section_9"></view>
- <view class="flex-col self-center space-y-6" @click="goPage('/pages/log/packageBuy/index')">
- <view class="flex-row space-x-4">
- <text class="self-center font_12 text_25">{{ smsCount }}</text>
- <text class="self-start font_11 text_26">次</text>
- </view>
- <text class="font_13">剩余短信</text>
- </view>
- <view class="flex-col self-center group_12 space-y-6" @click="goPage('/pages/log/packageBuy/index')">
- <view class="flex-row group_13">
- <text class="self-center font_12">{{ voiceCount }}</text>
- <text class="self-start font_11 text_27">次</text>
- </view>
- <text class="self-start font_13">剩余语音</text>
- </view>
- </view>
- <view class="flex-col justify-start my_settings">
- <view class="grid">
- <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
- <!-- <image-->
- <!-- class="image_17"-->
- <!-- src="../../static/mine/myWifi.png"-->
- <!-- />-->
- <!-- <text class="font_13 text_28">WIFI连接</text>-->
- <!-- </view>-->
- <view v-if="memberId" class="flex-col items-center relative grid-item space-y-8" @click="goDevicePage('/pages/user/broadcastDevice/index')">
- <image class="image_17" src="../../static/mine/myIconPromt.png"/>
- <text class="font_13 text_28">播报设备</text>
- </view>
- <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('免责声明','MATTRESS_DISCLAIMERS')">
- <image class="image_17" src="../../static/mine/myAnnouncement.png"/>
- <text class="font_13 text_28">免责声明</text>
- </view>
- <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('产品介绍', 'MATTRESS_PRODUCT_INTRODUCTION')">
- <image class="image_17" src="../../static/mine/myProduct.png"/>
- <text class="font_13 text_28">产品介绍</text>
- </view>
- <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('使用帮助', 'MATTRESS_HELP')">
- <image class="image_17" src="../../static/mine/myHelp.png"/>
- <text class="font_13 text_28">使用帮助</text>
- </view>
- <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('隐私政策', 'MATTRESS_PRIVACY_POLICY')">
- <image class="image_17" src="../../static/mine/mySecret.png"/>
- <text class="font_13 text_28">隐私政策</text>
- </view>
- <view class="flex-col items-center relative grid-item space-y-8" @click="goLookArticles('用户协议','MATTRESS_USER_AGREEMENT')">
- <image class="image_17" src="../../static/mine/myUserAgree.png"/>
- <text class="font_13 text_28">用户协议</text>
- </view>
- <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
- <!-- <image-->
- <!-- class="image_17"-->
- <!-- src="../../static/mine/myState.png"-->
- <!-- />-->
- <!-- <text class="font_13 text_28">配网说明</text>-->
- <!-- </view>-->
- <!-- <view class="flex-col items-center relative grid-item space-y-8">-->
- <!-- <image-->
- <!-- class="image_17"-->
- <!-- src="../../static/mine/myOrder.png"-->
- <!-- />-->
- <!-- <text class="font_13 text_28">我的订单</text>-->
- <!-- </view>-->
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="cu-modal" :class="bindShow?'show':''">
- <view class="cu-dialog">
- <view class="cu-bar bg-white justify-end">
- <view style="color: black" class="content">设备绑定</view>
- <view class="action" @tap="bindShow=false">
- <text class="cuIcon-close text-red"></text>
- </view>
- </view>
- <view class="">
- <form>
- <view class="cu-form-group solid-bottom">
- <view class="title">扫描二维码</view>
- <input type="text" v-model="bindSn" class="text-left" placeholder="输入或扫描IMEI"/>
- <text class="cuIcon-scan text-xxl text-green" style="font-size: 50rpx;"
- @click="scan"></text>
- </view>
- </form>
- </view>
- <view class="cu-bar bg-white justify-end">
- <view class="action">
- <button class="cu-btn bg-cyan" @tap="goBuy">去购买</button>
- </view>
- <view class="action">
- <button class="cu-btn bg-green margin-left" @tap="bindDevice">确定</button>
- </view>
- </view>
- </view>
- </view>
- <view class="cu-modal" :class="updateShow?'show':''">
- <view class="cu-dialog">
- <view class="cu-bar bg-white justify-end">
- <view style="color: black" class="content">编辑昵称</view>
- <view class="action" @tap="updateShow=false">
- <text class="cuIcon-close text-red"></text>
- </view>
- </view>
- <view class="">
- <form>
- <view class="cu-form-group solid-bottom">
- <view class="title">昵称</view>
- <input type="text" v-model="nickname" class="text-left" placeholder="请输入昵称"/>
- </view>
- <view class="cu-form-group">
- <view class="text-df text-gray">设置昵称,以便播报,6字以内</view>
- </view>
- </form>
- </view>
- <view class="cu-bar bg-white justify-end">
- <view class="action">
- <button class="cu-btn bg-green margin-left" @tap="updateNickName">确定</button>
- </view>
- </view>
- </view>
- </view>
- <view class="cu-modal" :class="updateUserNameShow?'show':''" @tap="updateUserNameShow=false">
- <view class="cu-dialog" @tap.stop="">
- <view class="cu-bar bg-white justify-end">
- <view style="color: black" class="content">编辑使用人昵称</view>
- <view class="action" @tap="updateUserNameShow=false">
- <text class="cuIcon-close text-red"></text>
- </view>
- </view>
- <view class="">
- <form>
- <view class="cu-form-group solid-bottom">
- <view class="title">使用人</view>
- <input type="text" v-model="updateDeviceFrom.userName" class="text-left" placeholder="请输入昵称" :maxlength="6"/>
- </view>
- </form>
- </view>
- <view class="cu-bar bg-white justify-end">
- <view class="action">
- <button class="cu-btn bg-green margin-left" @tap="updateUserName">确定</button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { mapActions } from 'vuex'
- import Storage from '@/utils/storage'
- import * as Foundation from '@/ui-utils/Foundation'
- import * as API_deviceMemberBind from '@/api/device_member_bind'
- import * as API_SLEEP_REPORT from '@/api/sleep_report'
- import * as API_MEMBER_WARN_SWITCH from '@/api/member_warn_switch'
- import * as deviceDtypeEnum from '@/utils/enum/DeviceDTypeEnum'
- import {editDevice} from "../../api/device_member_bind";
- export default {
- data() {
- return {
- deviceList: [],
- unionId: '',
- memberId: '',
- bindSn: '',
- bindShow: false,
- updateShow: false,
- userInfo: null,
- nickname: '',
- smsCount: 0,
- voiceCount: 0,
- showCount: 0,
- dtype: null,
- updateUserNameShow: false,
- updateDeviceFrom: {
- userName: '',
- id: null
- }
- };
- },
- onShow() {
- this.deviceList = Storage.getItem('myBindDevices')
- if (this.memberId) {
- if (this.deviceList) {
- this.showCount ++;
- if (this.showCount === 3) {
- this.API_getNewReport()
- } else {
- const res = Storage.getItem('user-new-report')
- this.handleReport(res)
- }
- }
- this.getSmsVoiceQty()
- } else {
- this.memberId = Storage.getItem('uid')
- }
- this.userInfo = Storage.getItem('userInfo')
- this.dtype = deviceDtypeEnum.DEVICE_TYPE.SMCD
- },
- mounted() {
- this.memberId = Storage.getItem('uid')
- if (this.memberId) {
- this.unionId = this.userInfo.union_id
- if (this.userInfo.nickname.length > 6 || this.userInfo.mobile === this.userInfo.nickname || this.userInfo.nickname === '微信用户') {
- const _this = this
- uni.showModal({
- title: '提示',
- content: "您还未设置昵称,是否设置呢?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- _this.handleUpdateName()
- }
- }
- })
- }
- if (this.deviceList) {
- console.log('this.deviceList===', this.deviceList)
- this.API_getNewReport()
- }
- this.getSmsVoiceQty()
- }
- },
- methods: {
- API_getNewReport() {
- const _this = this
- let imei = ''
- this.deviceList.forEach(item => {
- imei += item.imei + ','
- })
- imei = imei.substring(0, imei.length - 1)
- API_SLEEP_REPORT.getNewReportBySn({sns: imei, unionId: this.unionId}).then(res => {
- Storage.setItem("user-new-report", res)
- _this.handleReport(res)
- })
- },
- handleReport(res) {
- res.forEach(t => {
- this.deviceList.forEach(tt => {
- if (t.sn === tt.imei) {
- this.$set(tt, 'report_time', Foundation.unixToDate(t.report_time, "yyyy/MM/dd"))
- this.$set(tt, 'score_value', t.score_value)
- this.$set(tt, 'score_desc', t.score_desc)
- }
- })
- })
- },
- API_getDeviceList() {
- const _this = this
- API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: this.dtype, memberId: this.memberId}).then(res => {
- if (res.length === 0) {
- Storage.removeItem("nowChangeDevice")
- Storage.removeItem("myBindDevices")
- } else {
- _this.deviceList = res
- let nowDevice = Storage.getItem("nowChangeDevice")
- if (!nowDevice) {
- Storage.setItem("nowChangeDevice", res[0].imei)
- }
- Storage.setItem("myBindDevices", res)
- _this.API_getNewReport()
- }
- })
- },
- getSmsVoiceQty() {
- const _this = this
- API_MEMBER_WARN_SWITCH.getByMemberUnionId(this.userInfo.union_id).then(res => {
- if (res) {
- _this.smsCount = res.sms_qty
- _this.voiceCount = res.voice_qty
- }
- })
- },
- handleAuth() {
- uni.navigateTo({
- url: '/pages/login/auth'
- })
- },
- handleShareData() {
- uni.navigateTo({
- url: '/pages/user/shareUser/index'
- })
- },
- getPages(url) {
- uni.navigateTo({
- url: url
- });
- },
- // 扫描条码
- scan() {
- let _this = this
- uni.scanCode({
- success: function (res) {
- console.log(res, res.result.length)
- if (res.result.length > 20) {
- if (res.scanType === 'QR_CODE') {
- const urlStr = res.result
- const qs = Foundation.getQueryObject(urlStr)
- if (qs.mac && qs.type === 'MATTRESS') {
- _this.bindSn = qs.mac
- } else {
- uni.showToast({
- title: '请扫码正确的睡眠床垫二维码',
- icon: 'none',
- duration: 5000
- })
- }
- } else {
- _this.bindSn = res.result
- }
- } else {
- let str = res.result.split(':')
- if (str.length > 1) {
- _this.bindSn = str[1]
- } else {
- _this.bindSn = res.result
- }
- }
- },
- fail: (err) => {
- console.log(err)
- // #ifdef MP
- uni.getSetting({
- success: (res) => {
- let authStatus = res.authSetting['scope.camera'];
- if (!authStatus) {
- uni.showModal({
- title: '授权失败',
- content: 'app需要使用您的相机,请在设置界面打开相关权限',
- success: (res) => {
- if (res.confirm) {
- uni.openSetting()
- }
- }
- })
- }
- }
- })
- // #endif
- }
- })
- },
- bindDevice() {
- if (!this.bindSn) {
- uni.showToast({
- title: '请输入或绑定正确的二维码',
- icon: 'none',
- duration: 5000
- })
- return
- }
- const params = {
- imei: this.bindSn,
- memberId: this.memberId,
- dtype: this.dtype
- }
- this.bindShow = false
- let _this = this
- API_deviceMemberBind.bindDeviceByDtype(params).then(res => {
- if (res.success) {
- _this.bindSn = ''
- uni.showToast({
- title: '绑定成功',
- })
- _this.API_getDeviceList()
- } else {
- uni.showToast({
- title: res.message,
- icon: 'none',
- duration: 5000
- })
- }
- })
- },
- // 删除绑定的设备
- deleteDevice(id, index, imei){
- const _this = this
- uni.showModal({
- title: '提示',
- content: '确定要解绑吗',
- success: function (r) {
- if (r.confirm) {
- API_deviceMemberBind.delSleepMattress({id: id, imei: imei}).then(res=>{
- uni.showToast({
- title: '解绑成功',
- icon: 'none',
- duration: 3000
- })
- _this.deviceList.splice(index, 1)
- if (_this.deviceList.length > 0) {
- const nowDevice = Storage.getItem('nowChangeDevice')
- if (nowDevice === imei) {
- Storage.setItem("nowChangeDevice", _this.deviceList[0].imei)
- }
- Storage.setItem("myBindDevices", _this.deviceList)
- } else {
- Storage.removeItem('nowChangeDevice')
- Storage.removeItem('myBindDevices')
- }
- })
- }
- }
- })
- },
- loginOut() {
- const _this = this
- uni.showModal({
- title: '提示',
- content: "确定要退出重新绑定账号吗?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- _this.logout().then(() => {
- Storage.removeItem("nowChangeDevice")
- Storage.removeItem("myBindDevices")
- uni.reLaunch({
- url:'/pages/login/index'
- })
- })
- }
- }
- })
- },
- addBindDevice() {
- if (this.memberId) {
- this.bindShow = 'show'
- } else {
- uni.showModal({
- title: '提示',
- content: "您还没有登录,是否前往登录?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- uni.reLaunch({
- url:'/pages/login/auth'
- })
- }
- }
- })
- }
- },
- /** 头像发生改变 */
- handleUpdateFace(event) {
- let that = this
- wx.showActionSheet({
- itemList: ['从相册中选择', '拍照'],
- itemColor: '#CED63A',
- success(res) {
- if (!res.cancel) {
- if (res.tapIndex === 0) {
- that.chooseWxImage('album')
- } else if (res.tapIndex === 1) {
- that.chooseWxImage('camera')
- }
- }
- }
- })
- },
- /** 选择头像 */
- chooseWxImage(type) {
- let that = this
- wx.chooseImage({
- count: 1,
- sizeType: ['original', 'compressed'],
- sourceType: [type],
- success(res) {
- const tempFilePaths = res.tempFilePaths
- wx.uploadFile({
- url: that.MixinUploadApi,
- filePath: tempFilePaths[0],
- name: 'file',
- header: { uuid: Storage.getItem('uuid') },
- success(response) {
- const data = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
- that.userInfo.face = data.url
- const params = {
- face: data.url,
- nickname: that.userInfo.nickname
- }
- that.API_updateUser(params)
- }
- })
- }
- })
- },
- API_updateUser(params) {
- const _this = this
- this.saveUserInfo(params).then(() => {
- uni.showToast({
- title: '修改成功',
- icon: 'none'
- })
- this.$store.dispatch('getUserDataAction').then((res)=>{
- _this.userInfo = res
- })
- })
- },
- handleUpdateName() {
- this.nickname = this.userInfo.nickname
- this.updateShow = true
- },
- updateNickName() {
- if (this.nickname === '') {
- uni.showToast({
- title: '请输入昵称',
- icon: 'none',
- duration: 3000
- })
- return
- }
- if (this.nickname.length > 6) {
- uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
- return
- }
- this.updateShow = false
- const params = {
- face: this.userInfo.face,
- nickname: this.nickname
- }
- this.API_updateUser(params)
- },
- goPage(path) {
- if (this.unionId) {
- uni.navigateTo({
- url: path + '?unionId=' + this.unionId
- })
- }
- },
- goDevicePage(path) {
- if (this.memberId) {
- uni.navigateTo({
- url: path + '?memberId=' + this.memberId
- })
- } else {
- uni.showModal({
- title: '提示',
- content: "您还没有登录,是否前往登录?",
- confirmText: "确定",
- showCancel: true,
- success: function(res) {
- if (res.confirm) {
- uni.reLaunch({
- url:'/pages/login/auth'
- })
- }
- }
- })
- }
- },
- goLookArticles(name, position) {
- uni.navigateTo({
- url: '/pages/articles/index?position=' + position + '&name=' + name
- })
- },
- goLookSleepReport(imei) {
- uni.navigateTo({
- url: '/pages/log/report/friendReport?sn=' + imei
- })
- },
- changeUserNameShow(name, id) {
- this.updateDeviceFrom = {
- userName: name,
- id: id
- }
- this.updateUserNameShow = 'show'
- },
- updateUserName() {
- console.log('this.userName===', this.updateDeviceFrom)
- if (!this.updateDeviceFrom.userName) {
- uni.showToast({title: '请输入使用人昵称', icon: 'none', duration: 3000})
- return
- }
- if (this.updateDeviceFrom.userName.length > 6) {
- uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
- return
- }
- this.updateUserNameShow = false
- API_deviceMemberBind.editDevice({userName: this.updateDeviceFrom.userName}, this.updateDeviceFrom.id).then(res => {
- this.API_getDeviceList()
- })
- },
- ...mapActions({
- logout: 'logoutAction',
- saveUserInfo: 'saveUserInfoAction'
- })
- }
- };
- </script>
- <style lang="scss" scoped>
- .home_add_devive {
- padding: 2.75rem 0;
- background-color: rgba(14, 52, 147, 1);
- border-radius: 1rem;
- backdrop-filter: blur(0.63rem);
- .image_4 {
- width: 1.5rem;
- height: 1.5rem;
- }
- .text_5 {
- color: #ffffff;
- font-size: 1.3rem;
- font-family: PingFangSC;
- line-height: 1.38rem;
- margin-left: 0.5rem
- }
- }
- .power-module {
- position: absolute;
- right: 1.63rem;
- top: 10rem;
- .image_9 {
- width: 22px;
- height: 22px;
- }
- .text_4 {
- font-size: 16px;
- font-weight: 500;
- letter-spacing: 0px;
- line-height: 16px;
- color: rgba(255, 255, 255, 1);
- vertical-align: top;
- text-align: center;
- margin-top: 0.3rem;
- }
- }
- .container-bg {
- position: fixed;
- left: -130px;
- top: -130px;
- width: 480px;
- height: 344px;
- opacity: 1;
- border-radius: 63px;
- -webkit-transform: rotate(-315deg);
- transform: rotate(-315deg);
- background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
- }
- .page {
- padding-bottom: 3.13rem;
- background-color: #000000;
- width: 100%;
- overflow-y: auto;
- overflow-x: hidden;
- height: 100%;
- .group_2 {
- padding-bottom: 1.25rem;
- height: 61.06rem;
- overflow-y: auto;
- .my_device_header {
- padding: 0.25rem 0 2.75rem;
- overflow-x: hidden;
- z-index: 100;
- .image {
- margin-left: -6.38rem;
- border-radius: 3.94rem;
- width: 32.63rem;
- height: 25.44rem;
- }
- .section {
- // background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874493388853192993.png');
- background-size: 100% 100%;
- background-repeat: no-repeat;
- .section_2 {
- padding: 1.13rem 0.88rem 0.75rem;
- background-color: #ffffff4d;
- .space-x-6-reverse {
- & > view:not(:last-child),
- & > text:not(:last-child),
- & > image:not(:last-child) {
- margin-right: 0.38rem;
- }
- .image_2 {
- width: 1.06rem;
- height: 0.69rem;
- }
- .image_3 {
- width: 0.94rem;
- height: 0.69rem;
- }
- .image_4 {
- width: 1.5rem;
- height: 0.72rem;
- }
- }
- .text {
- font-size: 1.16rem;
- }
- }
- .space-y-32 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 2rem;
- }
- }
- .my_device_profile {
- margin-top: 1.5rem;
- padding-left: 2.19rem;
- padding-right: 1.5rem;
- height: 6.09rem;
- .space-x-19 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 1.19rem;
- }
- .image_5 {
- border-radius: 50%;
- width: 4.69rem;
- height: 4.69rem;
- }
- .image_6 {
- margin-top: 0.69rem;
- width: 1.16rem;
- height: 1.25rem;
- }
- }
- .group_4 {
- margin-top: -0.31rem;
- padding: 0 1.13rem;
- .text-wrapper {
- margin-left: 4.63rem;
- padding: 0.38rem 0;
- background-color: #ffffff66;
- border-radius: 6.25rem;
- width: 4.81rem;
- height: 1.5rem;
- }
- .image_9 {
- margin-top: 0.38rem;
- width: 1.31rem;
- height: 1.31rem;
- }
- }
- }
- }
- .text_5 {
- line-height: 1.03rem;
- }
- .pos_2 {
- position: absolute;
- left: 1.28rem;
- bottom: 0;
- }
- .section_4 {
- padding: 0.13rem 0.25rem 0.13rem 0.5rem;
- border-radius: 0.56rem;
- border: solid 0.063rem #4d9efa;
- }
- .pos_3 {
- position: absolute;
- right: 1.25rem;
- top: 26.28rem;
- }
- }
- .group_5 {
- padding: 0 1.25rem;
- .my_devices {
- .section_4 {
- padding: 0.13rem 0.25rem 0.13rem 0.5rem;
- border-radius: 0.56rem;
- border: solid 0.063rem #4d9efa;
- }
- }
- .space-y-8 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.5rem;
- }
- .section_7 {
- padding: 0.19rem 0.25rem 0 0.5rem;
- border-radius: 0.56rem;
- height: 1.13rem;
- border: solid 0.063rem #4d9efa;
- }
- }
- }
- .space-y-30 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 1.88rem;
- }
- z-index: 100;
- .my_record {
- padding: 1rem 1.25rem;
- background-color: #1241b8cc;
- border-radius: 1rem;
- .section_9 {
- background-color: #f2f2f2;
- width: 0.063rem;
- height: 2.5rem;
- }
- .group_12 {
- width: 3.78rem;
- .group_13 {
- padding: 0 0.13rem;
- .text_27 {
- margin-top: 0.5rem;
- }
- }
- }
- }
- .my_settings {
- padding: 0.63rem 0;
- background-color: #1241b8cc;
- border-radius: 1rem;
- .grid {
- padding: 0 1.06rem;
- height: 14.81rem;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- .grid-item {
- padding: 0.63rem 0;
- .image_17 {
- border-radius: 1.25rem;
- width: 2.5rem;
- height: 2.5rem;
- }
- .text_28 {
- opacity: 0.99;
- }
- }
- }
- }
- }
- .space-x-8 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.5rem;
- }
- .text_2 {
- color: #ffffff;
- font-size: 1.25rem;
- font-family: PingFangSC;
- line-height: 1.16rem;
- }
- .section_3 {
- padding: 0.25rem 0.63rem;
- background-color: #ffffff26;
- border-radius: 0.63rem;
- height: 1.25rem;
- }
- .text_8 {
- line-height: 0.78rem;
- }
- .text_20 {
- line-height: 0.63rem;
- }
- }
- .font_4 {
- font-size: 0.88rem;
- font-family: PingFangSC;
- line-height: 0.81rem;
- color: #ffffff;
- }
- .font_3 {
- font-size: 0.88rem;
- font-family: PingFangSC;
- line-height: 0.59rem;
- color: #ffffff;
- }
- .text_6 {
- opacity: 0.5;
- }
- .font_2 {
- font-size: 0.63rem;
- font-family: PingFangSC;
- line-height: 0.59rem;
- color: #ffffff;
- }
- .font_5 {
- font-size: 0.75rem;
- font-family: PingFangSC;
- line-height: 0.69rem;
- color: #4d9efa;
- }
- .font_6 {
- font-size: 0.88rem;
- font-family: PingFangSC;
- line-height: 0.81rem;
- color: #d8d8d8;
- }
- .font_1 {
- font-size: 1.13rem;
- font-family: PingFangSC;
- line-height: 1.06rem;
- color: #ffffff;
- }
- .image_7 {
- width: 0.63rem;
- height: 0.63rem;
- }
- .space-y-14 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.88rem;
- }
- .space-x-6 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.38rem;
- }
- .image_8 {
- width: 0.88rem;
- height: 0.88rem;
- }
- .text_3 {
- line-height: 0.63rem;
- }
- }
- }
- .space-x-4 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 0.25rem;
- }
- .text_25 {
- line-height: 1.09rem;
- }
- .text_26 {
- margin-top: 0.5rem;
- }
- }
- .font_11 {
- font-size: 0.75rem;
- font-family: PingFangSC;
- line-height: 0.69rem;
- color: #ffffff;
- }
- .font_12 {
- font-size: 1.5rem;
- font-family: PingFangSC;
- line-height: 1.06rem;
- color: #ffffff;
- }
- }
- .space-y-10 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.63rem;
- }
- .my_device_default {
- padding: 0.63rem 0.75rem 0.63rem 1.25rem;
- background-color: #1241b8cc;
- border-radius: 1rem;
- .group_6 {
- margin-bottom: 0.25rem;
- width: 3.56rem;
- .text_7 {
- line-height: 0.56rem;
- }
- }
- }
- .my_device {
- padding-bottom: 0.63rem;
- background-color: #1241b8cc;
- border-radius: 1rem;
- .group_7 {
- width: 10.84rem;
- .group_8 {
- width: 3.09rem;
- .group_9 {
- padding-top: 1.63rem;
- .text_18 {
- line-height: 0.78rem;
- }
- .image_13 {
- width: 2.38rem;
- height: 2.38rem;
- }
- .pos_4 {
- position: absolute;
- left: 0;
- bottom: 0;
- }
- }
- .text_19 {
- line-height: 0.63rem;
- }
- }
- }
- .group_10 {
- margin-right: 1.25rem;
- .text_17 {
- line-height: 0.56rem;
- }
- }
- .text_21 {
- margin-right: 0.75rem;
- }
- .group_11 {
- padding-left: 1.25rem;
- padding-right: 1rem;
- .image_14 {
- width: 0.81rem;
- height: 0.81rem;
- }
- .text_22 {
- margin-left: 0.13rem;
- }
- .image_15 {
- margin-left: 0.88rem;
- }
- .text_23 {
- margin-left: 0.13rem;
- }
- .image_16 {
- margin-left: 0.88rem;
- }
- .text_24 {
- margin-left: 0.13rem;
- }
- }
- }
- .space-y-16 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 1rem;
- }
- .text_9 {
- line-height: 0.63rem;
- }
- .text_10 {
- margin-left: 1.25rem;
- line-height: 0.63rem;
- }
- .font_8 {
- font-size: 0.63rem;
- font-family: PingFangSC;
- line-height: 0.59rem;
- color: #a4caf5;
- }
- .text_11 {
- text-decoration: underline;
- }
- .text_12 {
- margin-left: 0.5rem;
- }
- }
- .font_7 {
- font-size: 3rem;
- font-family: PingFangSC;
- line-height: 2.19rem;
- color: #ffffff;
- }
- .font_9 {
- font-size: 0.88rem;
- font-family: PingFangSC;
- line-height: 0.81rem;
- color: #4d9efa;
- }
- .space-x-20 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-left: 1.25rem;
- }
- .text_13 {
- margin-left: 0.13rem;
- }
- .image_12 {
- margin-left: 0.88rem;
- }
- .text_16 {
- margin-right: 0.13rem;
- }
- }
- .font_10 {
- font-size: 0.63rem;
- font-family: PingFangSC;
- line-height: 0.5rem;
- color: #4d9efa;
- }
- }
- .image_10 {
- width: 0.75rem;
- height: 0.75rem;
- }
- .space-y-6 {
- & > view:not(:first-child),
- & > text:not(:first-child),
- & > image:not(:first-child) {
- margin-top: 0.38rem;
- }
- }
- .font_13 {
- font-size: 0.63rem;
- font-family: PingFangSC;
- line-height: 0.59rem;
- color: #4d9efa;
- }
- }
- .my-container {
- width: 100%;
- height: 100%;
- position: relative;
- background-color: #000000;
- .mask-container {
- overflow: hidden;
- position: absolute;
- height: 30%;
- width: 100%;
- background-size: cover;
- background-position: center;
- &:after {
- content: '';
- position: absolute;
- width: 130%;
- height: 130%;
- left: 0;
- top: 0;
- z-index: 1;
- filter: blur(10px);
- transform: translate(-3rem, -3rem);
- background: inherit;
- background-size: 100% 100%;
- }
- .cover-mask {
- position: absolute;
- height: 100%;
- width: 100%;
- z-index: 3;
- background-color: rgba(0, 0, 0, 0.8);
- }
- .head-img {
- width: 108px;
- height: 108px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 99;
- border-radius: 50%;
- overflow: hidden;
- }
- .username {
- position: absolute;
- left: 50%;
- bottom: 20px;
- transform: translateX(-50%);
- z-index: 99;
- color: #fff;
- font-size: 36 rpx;
- }
- }
- .recommend-main {
- width: 100%;
- position: absolute;
- top: 30%;
- bottom: 50px;
- .tabs {
- box-shadow: 0 0 0.8px rgb(0, 0, 0 / 10%);
- width: 100%;
- height: 45px;
- align-items: center;
- .tab-item {
- flex: 1;
- font-size: 32 rpx;
- text-align: center;
- color: rgba(0, 0, 0, 0.5);
- &.active {
- color: rgb(248, 78, 81);
- }
- }
- }
- .music-title {
- padding-left: 20px;
- margin: 15px 0;
- box-sizing: border-box;
- color: #000;
- font-size: 32 rpx;
- font-weight: 600;
- .playIcon {
- margin-right: 8px;
- font-size: 40 rpx;
- }
- .light-text {
- font-size: 24 rpx;
- margin-left: 6px;
- color: rgba(0, 0, 0, 0.5);
- }
- }
- .music-item {
- height: 70px;
- box-sizing: border-box;
- padding: 0 20px;
- align-items: center;
- margin-bottom: 10px;
- position: relative;
- &:last-of-type {
- margin-bottom: 0;
- }
- &.active {
- background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));
- .music-info {
- .music-name,
- .small-icon,
- .music-singer {
- color: #f84e51 !important;
- }
- &::before {
- content: '';
- width: 4px;
- height: 65px;
- background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
- position: absolute;
- left: 0px;
- top: 3px;
- }
- }
- }
- .music-img {
- width: 58px !important;
- height: 58px !important;
- border-radius: 6px;
- }
- .music-info {
- margin-right: 15px;
- margin-left: 15px;
- width: calc(100vw - 135px);
- text-align: left;
- .music-name {
- font-size: 30 rpx;
- margin-bottom: 7px;
- color: #000;
- }
- .music-singer {
- color: rgba(0, 0, 0, 0.5);
- font-size: 24 rpx;
- align-items: center;
- .small-icon {
- margin-right: 6px;
- transform: scale(0.9);
- color: rgba(0, 0, 0, 0.5);
- font-size: 12px;
- padding: 1px 3px;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- }
- }
- }
- }
- }
- }
- </style>
|