web-base-h5/pages/userSecure/index.vue

<template>
  <view class="content">
    <!-- 账号安全 -->
    <view class="contentLink">
      <u-cell-group>
        <u-cell isLink
                url="/pages/password/loginPassword"
                class="border-style">
          <view slot="title"
                class="u-slot-title">
            <text class="u-cell-text">{{'修改登录密码'}}</text>
          </view>
        </u-cell>
        <u-cell isLink
                url="/pages/password/payPassword"
                class="border-style">
          <view slot="title"
                class="u-slot-title">
            <text class="u-cell-text">{{'修改支付密码'}}</text>
          </view>
        </u-cell>
        <u-cell isLink
                @click="goUrl"
                class="border-style">
          <view slot="title"
                class="u-slot-title">
            <text class="u-cell-text">重置支付密码</text>
          </view>
        </u-cell>
        <u-cell v-if="showFix == 1">
          <view slot="title"
                class="u-slot-title">
            <text class="u-cell-text">{{'联系方式'}}</text>
          </view>
          <view slot="value"
                class="u-slot-title">
            <text class="u-cell-text">{{tel}}</text>
          </view>
        </u-cell>
        <u-cell v-if="showFix == 0"
                isLink
                url="/pages/selfService/updateDomicile/addDomicile">
          <view slot="title"
                class="u-slot-title">
            <text class="u-cell-text">{{'联系方式'}}</text>
          </view>
          <view slot="value"
                class="u-slot-title">
            <text class="u-cell-text">{{tel}}</text>
          </view>
        </u-cell>
      </u-cell-group>

    </view>
  </view>
</template>
<script>
import clTabbar from '@/components/cl-tabbar.vue'
import * as min from '@/config/balance.js'
import * as ban from '@/config/balance.js'
import { checkIfShow } from '@/config/selfService.js'
import { getData } from '@/config/login'

export default {
  components: {
    'cl-tabbar': clTabbar,
  },
  data() {
    return {
      userInfo: {},
      pswShow: false,
      password: '',
      showFix: 1,
      tel: '',
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('User')
    this.checkIfShow()
    this.getMemberInfo()
  },
  onShow() {},
  methods: {
    getMemberInfo() {
      getData().then((res) => {
        this.tel = res.data.phone
      })
    },
    checkIfShow() {
      checkIfShow().then((res) => {
        this.showFix = res.data.existDomicile
      })
    },
    goUrl() {
      uni.navigateTo({
        url: '/pages/forgetPayPassword/index',
      })
    },
    surePsw() {
      min
        .checkPwd({
          pwd: this.password,
        })
        .then((res) => {
          if (res.code == 200) {
            this.password = ''
            this.pswShow = false
            uni.navigateTo({
              url: '/pages/mine/balance/index',
            })
          }
        })
    },
    goSpecialArea() {
      uni.switchTab({
        url: '/pages/specialArea/index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.border-style {
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
page {
  background-color: #f2f2f2;
}
.pspopup {
  .t_tit {
    text-align: center;
    margin-top: 40rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .c_tit {
    margin-bottom: 40rpx;
  }

  .box {
    padding: 40rpx 40rpx;
    text-align: center;
  }

  .uBtn {
    margin-top: 40rpx;
  }
}

.content {
  // padding-bottom: 100rpx;
  // background: rgba(242, 70, 65, 0.8);
  font-size: 24rpx;
  width: 690rpx;
  margin: 30rpx auto;
  height: 1334rpx;
  border-radius: 24rpx 24rpx 0 0;
  background-color: #fff;

  .topBox {
    // background-color: rgba(242, 70, 65, 0.8);
    padding: 43rpx 22rpx;
    // position: relative;

    .top_inder {
      display: flex;
      justify-content: space-between;

      .top_left {
        display: flex;

        .left_img {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          border: 5rpx solid #ffffff;
          margin-right: 18rpx;

          .headerimg {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .left_text {
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name_box {
            display: flex;
            align-items: center;

            .tTit1 {
              font-size: 28rpx;
              font-family: Source Han Sans CN;
              font-weight: bold;
              margin-right: 22rpx;
            }

            .kuang {
              background-color: rgba(0, 0, 0, 0.25);
              padding: 14rpx 18rpx;
              border-radius: 40rpx;
              font-size: 20rpx;
            }
          }

          .tTit2 {
            font-size: 22rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
          }
        }
      }

      .top_right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        color: #ffffff;

        .ricon {
        }

        .rtitle {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 400;
        }
      }
    }

    .btom_inder {
      display: flex;
      align-items: center;
      margin-top: 24rpx;

      .jxbox {
        width: 65rpx;
        height: 65rpx;
        margin-right: 26rpx;

        .jximg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .contentLink {
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 275rpx;

    .linktitle {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin-bottom: 25rpx;
    }

    background-color: #ffffff;
    // border-radius: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 35rpx 25rpx;

    .my_icon {
      width: 39rpx;
      height: 37rpx;
    }

    .my_icon2 {
      width: 39rpx;
      height: 43rpx;
    }

    .my_icon3 {
      width: 43rpx;
      height: 37rpx;
    }

    .u-cell-text {
      margin-left: 25rpx;
    }
  }
}

::v-deep .u-line {
  border: none !important;
}

.btnbox {
  background-color: #f2f2f2;
  padding: 20rpx 22rpx;
}
</style>