uni_mattress/sleep/pages/tabBar/my.vue

<template>
  <view class="my-container">
    <view class="container-bg"></view>

    <cu-custom bgColor="#fff">
      <view slot="content" style="color: #FFFFFF">UU睡眠</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 class="flex-row justify-center items-center home_add_devive space-x-10 margin-top-xs" @click="goBuy">
                <image class="image_4" src="../../static/home/homeIconAdd.png"/>
                <view class="text_5" @click="goBuy">购买设备</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 v-if="myBg" class="flex-row justify-center items-center space-x-10 my_shop" :style="'background-image: url(' + myBg + ')'" @click="goBuy">
<!--                <image class="image_4" src="../../static/home/shop.png"/>-->
<!--                <view class="text_5" @click="goBuy">必有好物<text class="text-xs margin-left">官方旗舰店</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" @click="goBuy">
                    <image class="image_17" src="../../static/mine/shop.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 { getArticleByPosition } from '../articles'

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
      },
      myBg: 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) {
        this.API_getNewReport()
      }
      this.getSmsVoiceQty()
      this.getMyBg()
    }
  },
  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()
      })
    },
    getMyBg() {
      getArticleByPosition('MATTRESS_AD').then(res => {
        this.myBg = res.outside_url
      })
    },

  ...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);
	  .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: 1rem;
      }

      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;
            }
          }
        }
      }
      .image_4 {
        width: 1.5rem;
        height: 1.5rem;
      }
      .my_shop {
        //background-image: url('/static/mine/shop (1).png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 2.3rem 1.05rem;
        background-color: rgba(250, 5, 74, 0.8);
        border-radius: 1rem;
        backdrop-filter: blur(0.63rem);
        .text_5 {
          color: #ffffff;
          font-size: 1.3rem;
          font-family: PingFangSC;
          line-height: 1.38rem;
          margin-left: 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>