|
@@ -1,725 +1,667 @@
|
|
|
-<template>
|
|
|
- <view class="container user clearfix">
|
|
|
- <cm-custom :navbar-data="nvabarData" />
|
|
|
- <view class="user-section">
|
|
|
- <view
|
|
|
- class="header"
|
|
|
- :style="{
|
|
|
- height: CustomBar + 90 - StatusBar + 'px',
|
|
|
- paddingTop: CustomBar + 'px',
|
|
|
- background: 'url(' + bgImgUrl + ')',
|
|
|
- backgroundSize: 'cover'
|
|
|
- }"
|
|
|
- >
|
|
|
- <view class="header-main" v-if="hasLogin">
|
|
|
- <view class="header-text">
|
|
|
- <view class="user-item">
|
|
|
- <text class="u-h1">{{ name }}</text>
|
|
|
- </view>
|
|
|
- <view class="user-item"> <text class="u-tips">协销人员</text> </view>
|
|
|
- </view>
|
|
|
- <view class="header-icon" @click="TestZHIboFn()"
|
|
|
- ><image src="https://static.caimei365.com/app/img/icon/icon-seller@3x.png" mode=""></image
|
|
|
- ></view>
|
|
|
- </view>
|
|
|
- <!-- 订单 -->
|
|
|
- <view class="user-order">
|
|
|
- <view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
|
|
|
- <text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- <view class="order-section">
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- @click="navigator('/pages/seller/order/order-list?listType=1')"
|
|
|
- hover-class="common-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="order-icon">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
|
|
|
- <text
|
|
|
- v-if="beforeConfirmCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[beforeConfirmCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ beforeConfirmCount >= 99 ? '99+' : beforeConfirmCount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="order-t">待确认</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- @click="navigator('/pages/seller/order/order-list?listType=2')"
|
|
|
- hover-class="common-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="order-icon">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
|
|
|
- <text
|
|
|
- v-if="beforePayCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
|
|
|
- :class="[beforePayCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ beforePayCount >= 99 ? '99+' : beforePayCount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="order-t">待付款</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- @click="navigator('/pages/seller/order/order-list?listType=3')"
|
|
|
- hover-class="common-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="order-icon">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
|
|
|
- <text
|
|
|
- v-if="beforeShipCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[beforeShipCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ beforeShipCount >= 99 ? '99+' : beforeShipCount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="order-t">待发货</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- @click="navigator('/pages/seller/order/order-list?listType=4')"
|
|
|
- hover-class="common-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="order-icon">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
|
|
|
- <text
|
|
|
- v-if="shippedCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[shippedCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ shippedCount >= 99 ? '99+' : shippedCount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="order-t">已发货</text>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="order-item"
|
|
|
- @click="navigator('/pages/seller/order/order-list?listType=5')"
|
|
|
- hover-class="common-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="order-icon">
|
|
|
- <image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
|
|
|
- <text
|
|
|
- v-if="refundsCount > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- :class="[refundsCount < 10 ? 'goleft' : '']"
|
|
|
- >
|
|
|
- {{ refundsCount >= 99 ? '99+' : refundsCount }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <text class="order-t">退货/款</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 底部跳转 -->
|
|
|
- <view class="foot-list">
|
|
|
- <view class="list-cell-item">
|
|
|
- <view
|
|
|
- class="list-cell"
|
|
|
- v-for="(item, index) in threeList"
|
|
|
- :key="index"
|
|
|
- @click="navigator(item.path)"
|
|
|
- hover-class="cell-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="cell-icon">
|
|
|
- <image class="cell-icon-image" :src="item.icon" mode=""></image>
|
|
|
- </view>
|
|
|
- <text class="cell-tit">{{ item.name }}</text>
|
|
|
- <text class="cell-more iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-item">
|
|
|
- <view
|
|
|
- class="list-cell"
|
|
|
- v-for="(item, index) in firstList"
|
|
|
- :key="index"
|
|
|
- @click="navigator(item.path)"
|
|
|
- hover-class="cell-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="cell-icon">
|
|
|
- <image class="cell-icon-image" :src="item.icon" mode=""></image>
|
|
|
- </view>
|
|
|
- <text class="cell-tit">{{ item.name }}</text>
|
|
|
- <text
|
|
|
- v-if="index == 1 && orderNum > 0"
|
|
|
- class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
- >
|
|
|
- {{ orderNum == 99 ? '99+' : orderNum }}
|
|
|
- </text>
|
|
|
- <text class="cell-more iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="list-cell-item">
|
|
|
- <view
|
|
|
- class="list-cell"
|
|
|
- v-for="(item, index) in twoList"
|
|
|
- :key="index"
|
|
|
- @click="navigator(item.path)"
|
|
|
- hover-class="cell-hover"
|
|
|
- :hover-stay-time="50"
|
|
|
- >
|
|
|
- <view class="cell-icon">
|
|
|
- <image class="cell-icon-image" :src="item.icon" mode=""></image>
|
|
|
- </view>
|
|
|
- <text class="cell-tit">{{ item.name }}</text>
|
|
|
- <text class="cell-more iconfont icon-xiayibu"></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import authorize from '@/common/config/authorize.js'
|
|
|
-import { mapState, mapMutations } from 'vuex'
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- nvabarData: {
|
|
|
- //顶部自定义导航
|
|
|
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
- showSearch: 0,
|
|
|
- title: '账户中心', // 导航栏 中间的标题
|
|
|
- haveBack: false,
|
|
|
- textLeft: this.$store.state.isIphone,
|
|
|
- textColor: '#FFFFFF',
|
|
|
- bgColor: ''
|
|
|
- },
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- StatusBar: this.StatusBar,
|
|
|
- bgImgUrl: 'https://static.caimei365.com/app/img/bg/home_cumres@2x.png',
|
|
|
- name: '',
|
|
|
- headpic: '',
|
|
|
- userId: '',
|
|
|
- serviceProviderId: '',
|
|
|
- skeletonShow: true,
|
|
|
- orderNum: 0, //未查看订单数量
|
|
|
- beforeConfirmCount: 0, //待确认角标
|
|
|
- beforePayCount: 0, //待付款角标
|
|
|
- beforeShipCount: 0, //待发货角标
|
|
|
- shippedCount: 0, //已发货角标
|
|
|
- refundsCount: '', //退货/款角标
|
|
|
- institutionsCont: 120,
|
|
|
- firstList: [
|
|
|
- {
|
|
|
- name: '待注册机构',
|
|
|
- path: '/pages/seller/club/stayClub-list',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '机构列表',
|
|
|
- path: '/pages/seller/club/list',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '拉机构上线',
|
|
|
- path: '/pages/seller/login/register-select',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '邀请运营人员',
|
|
|
- path: '/pages/seller/club/allClub-list',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png'
|
|
|
- }
|
|
|
- ],
|
|
|
- twoList: [
|
|
|
- {
|
|
|
- name: '帮机构下单',
|
|
|
- path: '/pages/seller/club/club-list',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png'
|
|
|
- },
|
|
|
- // {
|
|
|
- // name: '发布二手商品',
|
|
|
- // path: '/pages/second/form/form-select',
|
|
|
- // icon: 'https://static.caimei365.com/app/img/icon/icon_seller_6@2x.png'
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '客户咨询记录',
|
|
|
- path: '/pages/seller/remarks/list',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png'
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: '我的名片',
|
|
|
- path: '/pages/seller/remarks/business-card',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/my-card.png'
|
|
|
- }
|
|
|
- ],
|
|
|
- threeList: [
|
|
|
- {
|
|
|
- name: '机构看板',
|
|
|
- path: '/pages/seller/club/club-board',
|
|
|
- icon: 'https://static.caimei365.com/app/img/icon/visits.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.initData()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['hasLogin', 'userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations(['login', 'logout']),
|
|
|
- async initData() {
|
|
|
- const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
|
|
|
- const getUserInfo = await authorize.getUserInfo('weixin')
|
|
|
- const params = { code: wechatCode, encryptedData: getUserInfo.encryptedData, iv: getUserInfo.iv }
|
|
|
- this.UserService.UserLoginAuthApplets(params).then(response => {
|
|
|
- if (response.code == 0 || response.code == 4) {
|
|
|
- this.isLogin = true
|
|
|
- this.userID = response.data.userId
|
|
|
- this.userIdentity = response.data.userIdentity
|
|
|
- this.clubStatus = response.data.clubStatus
|
|
|
- this.serviceProviderId = response.data.serviceProviderId
|
|
|
- this.$store.commit('updateStatus', response.data)
|
|
|
- this.login(response.data)
|
|
|
- uni.setStorageSync('token', response.data.token)
|
|
|
- uni.setStorageSync('unionId', response.data.unionId)
|
|
|
- uni.setStorageSync('spUserId', response.data.spUserId)
|
|
|
- this.getUserSellerHome()
|
|
|
- this.getOrderCount()
|
|
|
- } else {
|
|
|
- this.isLogin = false
|
|
|
- this.logout()
|
|
|
- uni.setStorageSync('unionId', response.data.unionId)
|
|
|
- this.$store.commit('updateStatus', response.data)
|
|
|
- this.$api.navigateTo('/pages/seller/login/login')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getUserSellerHome() {
|
|
|
- this.$api.getStorage().then(resolve => {
|
|
|
- this.userId = resolve.userId ? resolve.userId : 0
|
|
|
- this.SellerService.GetSellerHome({ userId: this.userId })
|
|
|
- .then(response => {
|
|
|
- let sellerData = response.data
|
|
|
- this.name = sellerData.linkMan ? sellerData.linkMan : '' //协销名称
|
|
|
- this.headpic = sellerData.logo //会所头像
|
|
|
- this.skeletonShow = false
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getOrderCount() {
|
|
|
- this.SellerService.GetOrderCount({ serviceProviderId: this.serviceProviderId }).then(response => {
|
|
|
- let data = response.data
|
|
|
- this.beforeConfirmCount = this.showBadge(data.confirmedCount) //待确认
|
|
|
- this.beforePayCount = this.showBadge(data.paymentCount) //待付款
|
|
|
- this.beforeShipCount = this.showBadge(data.waitShipmentsCount) //待发货
|
|
|
- this.shippedCount = this.showBadge(data.shipmentsCount) //已发货
|
|
|
- this.refundsCount = this.showBadge(data.salesReturnCount) //退货/款
|
|
|
- this.orderNum = this.showBadge(data.uncheckedOrderCount) //未查看订单数量
|
|
|
- })
|
|
|
- },
|
|
|
- TestZHIboFn() {
|
|
|
- //测试跳转直播小程序
|
|
|
- // uni.navigateToMiniProgram({
|
|
|
- // appId: 'wx92d650b253f8f2e3',
|
|
|
- // path: '/pages/index/index',
|
|
|
- // extraData: {
|
|
|
- // 'data1': 'test'
|
|
|
- // },
|
|
|
- // envVersion: 'develop',
|
|
|
- // success(res) {
|
|
|
- // // 打开成功
|
|
|
- // console.log(res)
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
- navigator(url) {
|
|
|
- this.$api.navigateTo(url)
|
|
|
- },
|
|
|
- showBadge(n) {
|
|
|
- let num = ''
|
|
|
- if (n > 100) {
|
|
|
- num = 99
|
|
|
- } else {
|
|
|
- num = n
|
|
|
- }
|
|
|
- return num
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- //下拉刷新
|
|
|
- this.initData()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-@import '@/uni.scss';
|
|
|
-.user {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- background-color: #f7f7f7;
|
|
|
- padding-bottom: 120rpx;
|
|
|
-}
|
|
|
-.header {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- background-size: cover;
|
|
|
-}
|
|
|
-.header-main {
|
|
|
- width: 702rpx;
|
|
|
- height: 130rpx;
|
|
|
- padding: 12rpx 24rpx;
|
|
|
- display: flex;
|
|
|
- .header-text {
|
|
|
- flex: 8;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .user-item {
|
|
|
- flex: 1;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
- .u-tips {
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- width: 98rpx;
|
|
|
- height: 30rpx;
|
|
|
- border: 1px solid #ffffff;
|
|
|
- background: linear-gradient(128deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
|
|
|
- border-radius: 16rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- .u-viptips {
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- width: 98rpx;
|
|
|
- height: 30rpx;
|
|
|
- border: 1px solid #ffe600;
|
|
|
- background: linear-gradient(128deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
|
|
|
- border-radius: 16rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
- text-align: center;
|
|
|
- color: #ffe600;
|
|
|
- margin-left: 10rpx;
|
|
|
- margin-top: 17rpx;
|
|
|
- }
|
|
|
- .u-h1 {
|
|
|
- float: left;
|
|
|
- font-size: $font-size-36;
|
|
|
- color: #ffffff;
|
|
|
- text-align: left;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .u-p {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 64rpx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .header-icon {
|
|
|
- flex: 2;
|
|
|
- margin-right: 20rpx;
|
|
|
- image {
|
|
|
- float: right;
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- border-radius: 100%;
|
|
|
- border: 2rpx solid #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.header-main-none {
|
|
|
- width: 702rpx;
|
|
|
- height: 152rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- display: flex;
|
|
|
- .header-text {
|
|
|
- flex: 8;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .user-item {
|
|
|
- flex: 1;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- .line {
|
|
|
- margin: 0 10rpx;
|
|
|
- }
|
|
|
- .u-h1 {
|
|
|
- float: left;
|
|
|
- font-size: $font-size-36;
|
|
|
- color: #ffffff;
|
|
|
- text-align: left;
|
|
|
- -o-text-overflow: ellipsis;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .u-p {
|
|
|
- font-size: $font-size-24;
|
|
|
- line-height: 50rpx;
|
|
|
- color: #efefef;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .u-btn {
|
|
|
- width: 160rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- border-radius: 5rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #ffffff;
|
|
|
- display: block;
|
|
|
- margin-top: 5rpx;
|
|
|
- padding-left: 6rpx;
|
|
|
- .icon-xiangyouhuabeifen {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .header-icon {
|
|
|
- flex: 2;
|
|
|
- display: flex;
|
|
|
- margin-right: 20rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- image {
|
|
|
- float: right;
|
|
|
- width: 128rpx;
|
|
|
- height: 128rpx;
|
|
|
- border-radius: 100%;
|
|
|
- border: 2rpx solid #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.user-order {
|
|
|
- width: 654rpx;
|
|
|
- height: auto;
|
|
|
- padding: 0 24rpx;
|
|
|
- background-color: $bg-color;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: -170rpx;
|
|
|
- left: 24rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
-}
|
|
|
-.tab-title {
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 80rpx;
|
|
|
- color: #333333;
|
|
|
- text-align: left;
|
|
|
- border-bottom: 1px solid #f8f8f8;
|
|
|
- position: relative;
|
|
|
- .cell-tit {
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .cell-more {
|
|
|
- float: right;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: #666666;
|
|
|
- padding-right: 30rpx;
|
|
|
- }
|
|
|
- .iconfont {
|
|
|
- width: 30rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- display: block;
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
-}
|
|
|
-.order-section {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- height: 99rpx;
|
|
|
- padding: 24rpx 0;
|
|
|
-}
|
|
|
-.order-item {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .order-icon {
|
|
|
- width: 52rpx;
|
|
|
- height: 52rpx;
|
|
|
- position: relative;
|
|
|
- image {
|
|
|
- width: 52rpx;
|
|
|
- height: 52rpx;
|
|
|
- }
|
|
|
- .icon-num {
|
|
|
- position: absolute;
|
|
|
- right: -24rpx;
|
|
|
- top: -9rpx;
|
|
|
- }
|
|
|
- .icon-num.goleft {
|
|
|
- right: -12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .order-t {
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
-}
|
|
|
-.foot-list {
|
|
|
- width: 702rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- padding-top: 168rpx;
|
|
|
- padding-bottom: 120rpx;
|
|
|
-}
|
|
|
-.list-cell-image {
|
|
|
- width: 100%;
|
|
|
- height: 168rpx;
|
|
|
- background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
|
|
|
- background-size: cover;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- .text {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 38rpx 56rpx;
|
|
|
- .h1 {
|
|
|
- line-height: 50rpx;
|
|
|
- font-size: $font-size-36;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .p {
|
|
|
- line-height: 34rpx;
|
|
|
- font-size: $font-size-30;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.list-cell-item {
|
|
|
- width: 654rpx;
|
|
|
- height: auto;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background: $bg-color;
|
|
|
- border-radius: 20rpx;
|
|
|
-}
|
|
|
-.list-cell {
|
|
|
- width: 100%;
|
|
|
- line-height: 100rpx;
|
|
|
- position: relative;
|
|
|
- background: $bg-color;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
- height: 100rpx;
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- &.cell-hover {
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
- .cell-icon {
|
|
|
- width: 60rpx;
|
|
|
- height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 32rpx 12rpx;
|
|
|
- float: left;
|
|
|
- .cell-icon-image {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .cell-more {
|
|
|
- width: 60rpx;
|
|
|
- height: 100rpx;
|
|
|
- line-height: 100rpx;
|
|
|
- text-align: right;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #666666;
|
|
|
- .txt {
|
|
|
- color: #fb4343;
|
|
|
- padding-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .cell-tit {
|
|
|
- width: 465rpx;
|
|
|
- display: block;
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: #666666;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- .cell-tip {
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
-}
|
|
|
-.list-cell.last {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-.uni-badge--small {
|
|
|
- -webkit-transform: scale(0.8);
|
|
|
- -ms-transform: scale(0.8);
|
|
|
- transform: scale(0.8);
|
|
|
- -webkit-transform-origin: center center;
|
|
|
- -ms-transform-origin: center center;
|
|
|
- transform-origin: center center;
|
|
|
-}
|
|
|
-.uni-badge {
|
|
|
- font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1;
|
|
|
- display: inline-block;
|
|
|
- padding: 3px 6px;
|
|
|
- color: #333;
|
|
|
- border-radius: 100px;
|
|
|
- background-color: #f1f1f1;
|
|
|
-}
|
|
|
-.uni-badge-error {
|
|
|
- color: #fff;
|
|
|
- background-color: #dd524d;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="container user clearfix">
|
|
|
+ <cm-custom :navbar-data="nvabarData" />
|
|
|
+ <view class="user-section">
|
|
|
+ <view class="header" :style="{
|
|
|
+ height: CustomBar + 90 - StatusBar + 'px',
|
|
|
+ paddingTop: CustomBar + 'px',
|
|
|
+ background: 'url(' + bgImgUrl + ')',
|
|
|
+ backgroundSize: 'cover'
|
|
|
+ }">
|
|
|
+ <view class="header-main" v-if="hasLogin">
|
|
|
+ <view class="header-icon" @click="TestZHIboFn()">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/default-head-new.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="header-text">
|
|
|
+ <view class="user-item">
|
|
|
+ <text class="u-h1">{{ name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="user-item"> <text class="u-tips">协销人员</text> </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单 -->
|
|
|
+ <view class="user-order">
|
|
|
+ <view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
|
|
|
+ <text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="order-section">
|
|
|
+ <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=1')"
|
|
|
+ hover-class="common-hover" :hover-stay-time="50">
|
|
|
+ <view class="order-icon">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
|
|
|
+ <text v-if="beforeConfirmCount > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
+ :class="[beforeConfirmCount < 10 ? 'goleft' : '']">
|
|
|
+ {{ beforeConfirmCount >= 99 ? '99+' : beforeConfirmCount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="order-t">待确认</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=2')"
|
|
|
+ hover-class="common-hover" :hover-stay-time="50">
|
|
|
+ <view class="order-icon">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
|
|
|
+ <text v-if="beforePayCount > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
|
|
|
+ :class="[beforePayCount < 10 ? 'goleft' : '']">
|
|
|
+ {{ beforePayCount >= 99 ? '99+' : beforePayCount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="order-t">待付款</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=3')"
|
|
|
+ hover-class="common-hover" :hover-stay-time="50">
|
|
|
+ <view class="order-icon">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
|
|
|
+ <text v-if="beforeShipCount > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
+ :class="[beforeShipCount < 10 ? 'goleft' : '']">
|
|
|
+ {{ beforeShipCount >= 99 ? '99+' : beforeShipCount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="order-t">待发货</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=4')"
|
|
|
+ hover-class="common-hover" :hover-stay-time="50">
|
|
|
+ <view class="order-icon">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
|
|
|
+ <text v-if="shippedCount > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
+ :class="[shippedCount < 10 ? 'goleft' : '']">
|
|
|
+ {{ shippedCount >= 99 ? '99+' : shippedCount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="order-t">已发货</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=5')"
|
|
|
+ hover-class="common-hover" :hover-stay-time="50">
|
|
|
+ <view class="order-icon">
|
|
|
+ <image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
|
|
|
+ <text v-if="refundsCount > 0"
|
|
|
+ class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
|
|
|
+ :class="[refundsCount < 10 ? 'goleft' : '']">
|
|
|
+ {{ refundsCount >= 99 ? '99+' : refundsCount }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="order-t">退货/款</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部跳转 -->
|
|
|
+ <view class="foot-list">
|
|
|
+ <view class="list-cell-main clearfix">
|
|
|
+ <view class="list-cell-navs" v-for="(item,index) in tabsList" :key="index"
|
|
|
+ @click="navigator(item.path)">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="icon-image" :src="item.icon" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-main clearfix">
|
|
|
+ <view class="list-cell-navs" v-for="(item,index) in firstList" :key="index"
|
|
|
+ @click="navigator(item.path)">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="icon-image" :src="item.icon" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import { mapState, mapMutations } from 'vuex'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nvabarData: {
|
|
|
+ //顶部自定义导航
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 0,
|
|
|
+ title: '账户中心', // 导航栏 中间的标题
|
|
|
+ haveBack: false,
|
|
|
+ textLeft: this.$store.state.isIphone,
|
|
|
+ textColor: '#FFFFFF',
|
|
|
+ bgColor: ''
|
|
|
+ },
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ StatusBar: this.StatusBar,
|
|
|
+ bgImgUrl: 'https://static.caimei365.com/app/img/bg/new_home_cumres@2x.png',
|
|
|
+ name: '',
|
|
|
+ headpic: '',
|
|
|
+ userId: '',
|
|
|
+ serviceProviderId: '',
|
|
|
+ skeletonShow: true,
|
|
|
+ orderNum: 0, //未查看订单数量
|
|
|
+ beforeConfirmCount: 0, //待确认角标
|
|
|
+ beforePayCount: 0, //待付款角标
|
|
|
+ beforeShipCount: 0, //待发货角标
|
|
|
+ shippedCount: 0, //已发货角标
|
|
|
+ refundsCount: '', //退货/款角标
|
|
|
+ institutionsCont: 120,
|
|
|
+ tabsList: [{
|
|
|
+ name: '机构列表',
|
|
|
+ path: '/pages/seller/club/list',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '帮机构下单',
|
|
|
+ path: '/pages/seller/club/club-list',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉机构上线',
|
|
|
+ path: '/pages/seller/login/register-select',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待注册机构',
|
|
|
+ path: '/pages/seller/club/stayClub-list',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '我的名片',
|
|
|
+ path: '/pages/seller/remarks/business-card',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/my-card.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '机构看板',
|
|
|
+ path: '/pages/seller/club/club-board',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/visits.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '客户咨询记录',
|
|
|
+ path: '/pages/seller/remarks/list',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '邀请运营人员',
|
|
|
+ path: '/pages/seller/club/allClub-list',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ firstList: [{
|
|
|
+ name: '优惠券',
|
|
|
+ path: '/pages/seller/cart/coupon',
|
|
|
+ icon: 'https://static.caimei365.com/app/img/icon/icon_club_13@2x.png'
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['login', 'logout']),
|
|
|
+ async initData() {
|
|
|
+ const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
|
|
|
+ const getUserInfo = await authorize.getUserInfo('weixin')
|
|
|
+ const params = { code: wechatCode, encryptedData: getUserInfo.encryptedData, iv: getUserInfo.iv }
|
|
|
+ this.UserService.UserLoginAuthApplets(params).then(response => {
|
|
|
+ if (response.code == 0 || response.code == 4) {
|
|
|
+ this.isLogin = true
|
|
|
+ this.userID = response.data.userId
|
|
|
+ this.userIdentity = response.data.userIdentity
|
|
|
+ this.clubStatus = response.data.clubStatus
|
|
|
+ this.serviceProviderId = response.data.serviceProviderId
|
|
|
+ this.$store.commit('updateStatus', response.data)
|
|
|
+ this.login(response.data)
|
|
|
+ uni.setStorageSync('token', response.data.token)
|
|
|
+ uni.setStorageSync('unionId', response.data.unionId)
|
|
|
+ uni.setStorageSync('spUserId', response.data.spUserId)
|
|
|
+ this.getUserSellerHome()
|
|
|
+ this.getOrderCount()
|
|
|
+ } else {
|
|
|
+ this.isLogin = false
|
|
|
+ this.logout()
|
|
|
+ uni.setStorageSync('unionId', response.data.unionId)
|
|
|
+ this.$store.commit('updateStatus', response.data)
|
|
|
+ this.$api.navigateTo('/pages/seller/login/login')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserSellerHome() {
|
|
|
+ this.$api.getStorage().then(resolve => {
|
|
|
+ this.userId = resolve.userId ? resolve.userId : 0
|
|
|
+ this.SellerService.GetSellerHome({ userId: this.userId })
|
|
|
+ .then(response => {
|
|
|
+ let sellerData = response.data
|
|
|
+ this.name = sellerData.linkMan ? sellerData.linkMan : '' //协销名称
|
|
|
+ this.headpic = sellerData.logo //会所头像
|
|
|
+ this.skeletonShow = false
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOrderCount() {
|
|
|
+ this.SellerService.GetOrderCount({ serviceProviderId: this.serviceProviderId }).then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.beforeConfirmCount = this.showBadge(data.confirmedCount) //待确认
|
|
|
+ this.beforePayCount = this.showBadge(data.paymentCount) //待付款
|
|
|
+ this.beforeShipCount = this.showBadge(data.waitShipmentsCount) //待发货
|
|
|
+ this.shippedCount = this.showBadge(data.shipmentsCount) //已发货
|
|
|
+ this.refundsCount = this.showBadge(data.salesReturnCount) //退货/款
|
|
|
+ this.orderNum = this.showBadge(data.uncheckedOrderCount) //未查看订单数量
|
|
|
+ })
|
|
|
+ },
|
|
|
+ TestZHIboFn() {
|
|
|
+ //测试跳转直播小程序
|
|
|
+ // uni.navigateToMiniProgram({
|
|
|
+ // appId: 'wx92d650b253f8f2e3',
|
|
|
+ // path: '/pages/index/index',
|
|
|
+ // extraData: {
|
|
|
+ // 'data1': 'test'
|
|
|
+ // },
|
|
|
+ // envVersion: 'develop',
|
|
|
+ // success(res) {
|
|
|
+ // // 打开成功
|
|
|
+ // console.log(res)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ navigator(url) {
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ },
|
|
|
+ showBadge(n) {
|
|
|
+ let num = ''
|
|
|
+ if (n > 100) {
|
|
|
+ num = 99
|
|
|
+ } else {
|
|
|
+ num = n
|
|
|
+ }
|
|
|
+ return num
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ //下拉刷新
|
|
|
+ this.initData()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ @import '@/uni.scss';
|
|
|
+
|
|
|
+ .user {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-main {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .header-text {
|
|
|
+ flex: 8;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .user-item {
|
|
|
+ flex: 1;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+
|
|
|
+ .u-tips {
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ width: 98rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-viptips {
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ width: 98rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border: 1px solid #ffe600;
|
|
|
+ background: linear-gradient(128deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffe600;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-top: 17rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-h1 {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: left;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-p {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-icon {
|
|
|
+ flex: 2;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ float: right;
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ border: 2rpx solid #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-main-none {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 152rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .header-text {
|
|
|
+ flex: 8;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .user-item {
|
|
|
+ flex: 1;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-h1 {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: left;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-p {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 50rpx;
|
|
|
+ color: #efefef;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 5rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ display: block;
|
|
|
+ margin-top: 5rpx;
|
|
|
+ padding-left: 6rpx;
|
|
|
+
|
|
|
+ .icon-xiangyouhuabeifen {
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-icon {
|
|
|
+ flex: 2;
|
|
|
+ display: flex;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ image {
|
|
|
+ float: right;
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+ border: 2rpx solid #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-order {
|
|
|
+ width: 654rpx;
|
|
|
+ height: auto;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background-color: $bg-color;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -170rpx;
|
|
|
+ left: 24rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-title {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cell-tit {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-more {
|
|
|
+ float: right;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #666666;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ display: block;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 99rpx;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-icon {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-num {
|
|
|
+ position: absolute;
|
|
|
+ right: -24rpx;
|
|
|
+ top: -9rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-num.goleft {
|
|
|
+ right: -12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .order-t {
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .foot-list {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ padding-top: 168rpx;
|
|
|
+ padding-bottom: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-cell-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 168rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 38rpx 56rpx;
|
|
|
+
|
|
|
+ .h1 {
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p {
|
|
|
+ line-height: 34rpx;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-cell-main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 40rpx 10rpx 0 10rpx;
|
|
|
+ background: $bg-color;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .list-cell-navs {
|
|
|
+ width: 25%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .icon-image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-badge--small {
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
+ -ms-transform: scale(0.8);
|
|
|
+ transform: scale(0.8);
|
|
|
+ -webkit-transform-origin: center center;
|
|
|
+ -ms-transform-origin: center center;
|
|
|
+ transform-origin: center center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-badge {
|
|
|
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 6px;
|
|
|
+ color: #333;
|
|
|
+ border-radius: 100px;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-badge-error {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #dd524d;
|
|
|
+ }
|
|
|
+</style>
|