<template> <!-- <scroll class="mine" :pullup="true" :bounce="true"> --> <div class="mine"> <div class="head"> <img class="bg" :src="image.head_bg"> <!-- <div class="ref-block" @click="clearBoth()"> <img :src="image.ref"> </div>--> <div class="contentBox"> <div class="left"> <img class="header-icon" :src="userDetail.avatar"> <p class="name">{{userDetail.nickname}}</p> </div> <div class="right"> <p class="id">学员号:{{userDetail.user_id}}</p> <p class="id" v-if="!userDetail.mobile">手机号:暂未绑定</p> <p class="id" v-if="userDetail.mobile">手机号:{{phoneNumber}}</p> </div> </div> </div> <div class="outBox"> <div class="list"> <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link> <img slot="icon" :src="image.order"> </van-cell> <van-cell title="我的星星" ref="star" to="/starRank" @click="toStar" is-link> <img slot="icon" :src="image.mine_icon_star"> <!-- <div class="starNum" v-if="starNum">{{starNum}}颗</div> --> </van-cell> <van-cell title="宝宝档案" ref="bbda" to="/bbda" @click="toBbda" is-link> <img slot="icon" :src="image.babyicon"> </van-cell> <van-cell title="子账号" v-if="userDetail.family_user==1||userDetail.family_user==0" ref="subAccount" to="/subAccount" @click="toBbda" is-link > <img slot="icon" :src="image.mine_son"> </van-cell> <van-cell title="主账号" v-if="userDetail.family_user==2" ref="subAccount" to="/subAccount" @click="toBbda" is-link > <img slot="icon" :src="image.mine_mom"> </van-cell> </div> </div> <div class="outBox addr" style="margin-top:10px;margin-bottom: 50px;"> <div class="list"> <van-cell title="收货地址" ref="address" to="/address" is-link v-if="addressInfo&&addressInfo.receive_name"> <img slot="icon" :src="image.mine_address"> </van-cell> <van-cell title="清除缓存" is-link @click="clearBoth()"> <img slot="icon" :src="image.ref"> </van-cell> </div> </div> <div class="landscape"></div> <bottom-tab/> </div> <!-- </scroll> --> </template> <script> import bottomTab from "../public/bottomTab"; import { mineImage } from "../../util/imgUrl"; import { Cell, Toast } from "vant"; import { getStarSumberApi, getUserAdressApi, getUserDetailApi } from "../../service/api"; export default { name: "mine", components: { bottomTab, [Cell.name]: Cell }, data() { return { image: mineImage, userDetail: {}, phoneNumber: "", starNum: "", addressInfo: {} }; }, mounted() { this.initPage(); }, methods: { initPage() { this.userDetail = JSON.parse(localStorage.getItem("userDesc")); getStarSumberApi().then(res => { this.starNum = res.last_value; console.log(res); }); getUserAdressApi().then(res => { this.addressInfo = res; }); if (this.userDetail.mobile) { this.phoneNumber = this.userDetail.mobile; } var str = "18912341234"; var pat = /(\d{3})\d*(\d{4})/; this.phoneNumber = this.phoneNumber.replace(pat, "$1****$2"); }, clearBoth() { this.$sa.track("buttonClick", { tabTitle: "我的", moduleTitle: "我的", buttonType: "清楚缓存", buttonName: "清楚缓存" }); localStorage.clear(); Toast("清除成功"); console.log(process.env.API_URL); window.location = process.env.AUTHOR_UEL + "&refresh=1"; }, toStar() { this.$sa.quick("trackHeatMap", this.$refs.star); }, toOrder() { this.$sa.quick("trackHeatMap", this.$refs.order); }, toBbda() { this.$sa.quick("trackHeatMap", this.$refs.bbda); } } }; </script> <style scoped lang="less"> @import "../../util/public"; .mine { height: 100vh; background: white; overflow: auto; .head { position: relative; .contentBox { width: 335 * @toVw; height: 104 * @toVw; background: white; box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3); border-radius: 8 * @toVw; position: absolute; top: 100 * @toVw; left: 20 * @toVw; display: flex; .left { // min-width: 90 * @toVw; width: 160 * @toVw; margin-right: 0; margin-left: 0 * @toVw; padding-left: 16 * @toVw; box-sizing: border-box; // margin-left: 26* @toVw; p { max-width: 120 * @toVw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20 * @toVw; margin-left: 0 * @toVw; line-height: 28 * @toVw; text-align: center; // text-align: left; } } .right { margin-left: 0 * @toVw; } } .bg { width: 100%; } .ref-block { width: 25 * @toVw; height: 25 * @toVw; position: absolute; right: 28 * @toVw; top: 56 * @toVw; img { width: 100%; } } width: 375 * @toVw; height: 160 * @toVw; background-size: 100% 100%; color: white; text-align: center; .header-icon { width: 84 * @toVw; height: 84 * @toVw; border-radius: 10000px; border: 3 * @toVw solid white; position: absolute; top: -40 * @toVw; left: 30 * @toVw; } .name { font-size: 20 * @toVw; font-family: PingFang-SC-Medium; font-weight: normal; line-height: 20 * @toVw; margin-top: 42 * @toVw; color: black; font-weight: 500; } .id { font-size: 14 * @toVw; // font-family: PingFang-SC-Medium; color: #808080; border-radius: 200px; line-height: 17 * @toVw; background-color: white; margin-top: 14 * @toVw; text-align: left; // font-weight: 300; // padding: 10 20*@toVw 0 ; } } .outBox { background: white; box-shadow: 0px 1px 6px 0px rgba(64, 169, 255, 0.3); width: 335 * @toVw; // width: 412px; border-radius: 8 * @toVw; margin-top: 62 * @toVw; overflow: hidden; .list { .van-cell { font-size: 16 * @toVw; padding-top: 12 * @toVw; padding-bottom: 12 * @toVw; img { margin-right: 12 * @toVw; width: 28 * @toVw; // margin:auto 0 ; height: 28 * @toVw; } .starNum { font-size: 13 * @toVw; } } .van-cell:not(:last-child)::after { right: 15px; } } } } @media screen and (orientation: landscape) { .landscape { height: 100 * @toVw; } .mine { min-height: 100vh; } } </style>