hospital-accompaniment-wechat/pages/tabBar/mine - 副本.vue

<template>
  <view class="container" style="background-image: url('https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img19.png');">
    <u-navbar title="我的" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder>
      <view class="u-nav-slot" slot="left" @click="goPath('/pages/mine/news')">
        <text class="iconfont icon-tongzhi"></text>
        <view v-if="noticeCount>0">{{noticeCount<100?noticeCount:99}}</view>
      </view>
    </u-navbar>
    <view class="userBox">
      <view class="userBox_img">
        <image :src="userInfo.headPhoto" mode="" v-if="userInfo.headPhoto" />
        <image src="@/static/default-head-photo.png" mode="" v-else />
      </view>
      <view class="userBox_info" v-if="userInfo.nickname">
        <view class="userBox_info_t">{{userInfo.nickname}}</view>
        <view class="userBox_info_b" @click="goPath('/pages/mine/personalDetails')">编辑资料
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="userBox_info" v-else @click="goLogin()">
        <view class="userBox_info_t">登录</view>
      </view>
      <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img20.png" mode="" />
    </view>
    <view class="pointsBox">
      <view style="background-image: url('https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img21.png');">
        <view class="pointsBox_l">
          <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img22.png" mode="" />
          礼包兑换豆
          <view>
            可用： <text>{{userInfo.integralAble}}</text>
          </view>
        </view>
        <view class="pointsBox_r" @click="goPath('/pages/giftPackageCenter/pointsDetails')">
          查看明细
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="orderType">
        <view class="orderType_title">礼包兑换订单</view>
        <view class="orderType_list">
          <view class="orderType_item" @click="goPath('/pages/mine/exchangeOrder?orderStatus=10')">
            <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img23.png" mode="" />
            <view>待发货</view>
            <view class="num" v-if="shoporderCountObj.wait_shipped&&shoporderCountObj.wait_shipped>0">{{shoporderCountObj.wait_shipped||0}}</view>
          </view>
          <view class="orderType_item" @click="goPath('/pages/mine/exchangeOrder?orderStatus=20')">
            <image style="width:61rpx;height:51rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img24.png" mode="" />
            <view>已发货</view>
            <view class="num " v-if="shoporderCountObj.wait_received&&shoporderCountObj.wait_received>0">{{shoporderCountObj.wait_received||0}}</view>
          </view>
          <view class="orderType_item" @click="goPath('/pages/mine/exchangeOrder?orderStatus=30')">
            <image style="width:62rpx;height:61rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img25.png" mode="" />
            <view>已完成</view>
          </view>
          <view class="orderType_item" @click="goPath('/pages/mine/exchangeOrder')">
            <image style="width:49rpx;height:49rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img26.png" mode="" />
            <view>全部</view>
          </view>
        </view>
      </view>
      <view class="navList">
        <view class="navList_item" @click="goPath('/pages/mine/myRedEn')">
          <view class="navList_item_l">
            <view>
              <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img27.png" mode="" />
            </view>
            我的红包
          </view>
          <view class="navList_item_r">
            已获得：
            <text class="red">￥{{userRedPacketCount||0}}</text>
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="navList_item" @click="goPath('/pages/mine/myFavorite')">
          <view class="navList_item_l">
            <view>
              <image style="width:39rpx;height:38rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img28.png" mode="" />
            </view>
            我的收藏
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="navList_item" @click="goPath('/pages/home/touristInfo')">
          <view class="navList_item_l">
            <view>
              <image style="width:36rpx;height:39rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img29.png" mode="" />
            </view>
            游客信息
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="navList_item" @click="goPath('/pages/giftPackageCenter/shippingAddress')">
          <view class="navList_item_l">
            <view>
              <image style="width:34rpx;height:36rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img30.png" mode="" />
            </view>
            收货地址
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="navList_item" @click="goPath('/pages/mine/promotionCenter')" v-if="promotioncheck">
          <view class="navList_item_l">
            <view>
              <image style="width:30rpx;height:37rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img31.png" mode="" />
            </view>
            推广中心
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <view class="navList_item" @click="goPath('/pages/mine/set')">
          <view class="navList_item_l">
            <view>
              <image style="width:36rpx;height:36rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img32.png" mode="" />
            </view>
            设置中心
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
        <button id="bindId" type="default" style="display:none" open-type="contact"></button>
        <label class="navList_item" @click="openService()" for="bindId">
          <view class="navList_item_l">
            <view>
              <image style="width:34rpx;height:34rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img33.png" mode="" />
            </view>
            微信客服
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </label>
        <view class="navList_item" @click="goSellerCenter()">
          <view class="navList_item_l">
            <view>
              <image style="width:36rpx;height:39rpx" src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img29.png" mode="" />
            </view>
            商户中心
          </view>
          <view class="navList_item_r">
            <text class="iconfont icon-jiantou"></text>
          </view>
        </view>
      </view>
      <view class="tag">粤ICP备2025370029号-2X</view>
    </view>
    <tabBar currentPage="/pages/tabBar/mine" />
  </view>
</template>

<script>
import tabBar from '@/components/tabBar/index.vue'
import {
  userInfo,
  userNoticeCount,
  promotioncheck,
  totalRedPacket,
  shoporderCount
} from "@/api/user.js"
import {
  UserInfo
} from "@/utils/tools.js"
export default {
  components: {
    tabBar
  },
  data () {
    return {
      userInfo: {},
      noticeCount: 0,
      promotioncheck: false,
      userRedPacketCount: 0,
      shoporderCountObj: {},
    }
  },
  onLoad () {

  },
  onShow () {
    this.init()
  },
  onPullDownRefresh () {
    this.init()
  },
  // 分享
  async onShareAppMessage (res) {
    let data = await this.$utils.getConfigShare()
    return {
      title: data.shareTitle || '同样价格买门票，超额补贴等你拿',
      path: "pages/tabBar/home",
      imageUrl: data.shareImage?(data.shareImage+'?x-oss-process=style/w_300') :
        'https://wx.qlogo.cn/mmhead/zsUXYY6y4cKZWvEkWNfqaciaPd00ia4wztvPMURtP26puM7uM9P9beWSDBIg4zBj0RicSangIZ6DIM/0'
    }
  },
  // 分享朋友圈
  async onShareTimeline () {
    let data = await this.$utils.getConfigShare()
    return {
      title: data.shareTitle || '同样价格买门票，超额补贴等你拿',
      query: 'pages/tabBar/home',
      imageUrl: data.shareImage?(data.shareImage+'?x-oss-process=style/w_300' ):
        'https://wx.qlogo.cn/mmhead/zsUXYY6y4cKZWvEkWNfqaciaPd00ia4wztvPMURtP26puM7uM9P9beWSDBIg4zBj0RicSangIZ6DIM/0'
    };
  },
  methods: {
    init () {
      let token = uni.getStorageSync('apiToken');
      if (token) {
        this.getUserInfo();
        this.getUserNoticeCount();
        this.promotioncheckFun();
        this.getMyRedTotal();
        this.getShoporderCount()
      }
    },
    // 礼包兑换订单统计
    getShoporderCount () {
      shoporderCount().then(res => {
        this.shoporderCountObj = res.data
      })
    },
    goLogin () {
      uni.reLaunch({
        url: '/pages/login/index',
      });
    },
    goSellerCenter () {
      let Authorization = uni.getStorageSync('Authorization');
      if (Authorization) {
        uni.navigateTo({
          url: '/pages/sellerCenter/index',
        })
      } else {
        uni.navigateTo({
          url: '/pages/sellerCenter/login',
        })
      }
    },
    promotioncheckFun () {
      promotioncheck().then(res => {
        this.promotioncheck = res.data
      })
    },
    getMyRedTotal () {
      totalRedPacket().then(res => {
        this.userRedPacketCount = res.data.userRedPacketCount
      })
    },
    getUserInfo () {
      UserInfo().then(res => {
        this.userInfo = res;
      }).finally(()=>{
		  uni.stopPullDownRefresh();
	  })
    },
    getUserNoticeCount () {
      userNoticeCount().then(res => {
        this.noticeCount = res.data
      })
    },
    goPath (path) {
      uni.navigateTo({
        url: path
      })
    },
    openService () {
      wx.openCustomerServiceChat({
        extInfo: {
          url: ''
        },
        corpId: '',
        success (res) { },
        complete (e) {
          console.log(e)
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: transparent !important;
  background-image: url("https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img19.png");
  background-size: 100% 590rpx;
}

.container {
  background-size: 100% 610rpx;
  background-repeat: no-repeat;
  padding-bottom: 80rpx;

  .u-nav-slot {
    position: relative;

    .iconfont {
      font-size: 50rpx;
      color: #fff;
    }

    > view {
      color: #fff;
      background: #fb0b03;
      border-radius: 50%;
      border: 4rpx solid #fff;
      position: absolute;
      top: -6rpx;
      left: 26rpx;
      font-size: 22rpx;
      min-width: 23rpx;
      height: 23rpx;
      text-align: center;
      line-height: 25rpx;
      padding: 2rpx;
    }
  }

  .userBox {
    padding: 43rpx 30rpx 55rpx;
    display: flex;
    align-items: center;
    position: relative;

    .userBox_img {
      margin-right: 33rpx;

      image {
        width: 126rpx;
        height: 126rpx;
        border: 4rpx solid #fff;
        border-radius: 50%;
      }
    }

    .userBox_info {
      .userBox_info_t {
        font-size: 32rpx;
        color: #ffffff;
        font-family: FZCuYuan-M03;
      }

      .userBox_info_b {
        display: inline-block;
        margin-top: 13rpx;
        font-size: 22rpx;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 25rpx;
        padding: 10rpx 25rpx;

        text {
          font-size: 22rpx;
        }
      }
    }

    > image {
      width: 257rpx;
      height: 217rpx;
      position: absolute;
      bottom: -15rpx;
      right: 30rpx;
    }
  }

  .pointsBox {
    padding: 0 30rpx;
    position: relative;
    z-index: 2;

    > view {
      padding: 0 20rpx 20rpx;
      background-size: 100% 146rpx;
      height: 146rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .pointsBox_l {
        font-size: 30rpx;
        color: #6d2a08;
        display: flex;
        align-items: center;

        image {
          width: 47rpx;
          height: 69rpx;
          margin-bottom: 26rpx;
          margin-right: 7rpx;
        }

        > view {
          font-size: 28rpx;
          color: #8d502e;
          padding-left: 30rpx;

          text {
            font-size: 32rpx;
            color: #fb0b03;
            font-family: FZCuYuan-M03;
          }
        }
      }

      .pointsBox_r {
        width: 156rpx;
        height: 54rpx;
        background: linear-gradient(90deg, #77320d, #ab4c1c);
        border-radius: 27rpx;
        text-align: center;
        line-height: 54rpx;
        font-size: 22rpx;
        color: #ffffff;

        text {
          font-size: 24rpx;
          display: inline-block;
        }
      }
    }
  }

  .box {
    background: #f6f6f6;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    position: relative;
    top: -35rpx;
    z-index: 5;
    padding: 30rpx 30rpx 100rpx 30rpx;

    .orderType {
      padding: 40rpx 19rpx 50rpx;
      background: #ffffff;
      border-radius: 20rpx;

      .orderType_title {
        font-size: 31rpx;
        color: #1a1a1a;
        font-family: FZCuYuan-M03;
        margin-bottom: 40rpx;
      }

      .orderType_list {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        .orderType_item {
          text-align: center;
          position: relative;

          image {
            width: 57rpx;
            height: 50rpx;
          }

          > view {
            font-size: 30rpx;
            color: #4d4d4d;
            margin-top: 20rpx;
          }
          > .num {
            color: #fff;
            background: #fb0b03;
            border-radius: 50%;
            border: 4rpx solid #fff;
            position: absolute;
            top: -34rpx;
            right: -2rpx;
            font-size: 22rpx;
            min-width: 38rpx;
            height: 38rpx;
            // text-align: center;
            // line-height: 30rpx;
            padding: 2rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .navList {
      .navList_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 50rpx;

        .navList_item_l {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #1a1a1a;

          > view {
            width: 38rpx;
            margin-right: 16rpx;

            image {
              width: 34rpx;
              height: 40rpx;
            }
          }
        }

        .navList_item_r {
          font-size: 28rpx;
          color: #808080;

          .red {
            font-size: 28rpx;
            color: #fb0b03;
          }

          .icon-jiantou {
            display: inline-block;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
  .tag {
    width: 100%;
    font-size: 24rpx;
    color: #ccc;
    text-align: center;
    position: relative;
    bottom: -60rpx;
  }
}
.font18 {
  font-size: 18rpx !important;
}
</style>