|
@@ -0,0 +1,811 @@
|
|
|
+<template>
|
|
|
+ <view class="app-container">
|
|
|
+ <custom :bgColor="'bg-them'" :backColor="'#FFFFFF'" :isBack="false" v-show="isCustom">
|
|
|
+ <text slot="content" style="color: #FFFFFF; font-size: 36rpx;">我的</text>
|
|
|
+ </custom>
|
|
|
+
|
|
|
+ <view class="top-container">
|
|
|
+ <image src="@/static/home/top_bg.png" mode="widthFix" class="bg"></image>
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+ <view class="title" :style="cuStyle">我的</view>
|
|
|
+
|
|
|
+ <view class="user" v-if="isLogin">
|
|
|
+ <view class="left" @tap="isShowInfoDialog = true">
|
|
|
+ <block v-if="detail.avatar">
|
|
|
+ <image :src="detail.avatar" mode="aspectFill" v-if="detail.avatar.indexOf('http') >= 0"></image>
|
|
|
+ <image :src="imageUrl + detail.avatar" mode="aspectFill" v-else></image>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <view class="main" v-if="isServiceUser">
|
|
|
+ <view class="name">{{detail.serviceWorkerBean.workerRealName}}</view>
|
|
|
+ <view class="text" v-if="detail.serviceWorkerBean.websit">{{detail.serviceWorkerBean.websit}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="main" v-else>
|
|
|
+ <view class="name">{{detail.nickName}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="code" v-if="isServiceUser">
|
|
|
+ <image src="@/static/mine/code.png" @tap="navigatePage('/pages/mine/mallCode')"></image>
|
|
|
+ <text>商城二维码</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user" @tap="navigatePage('/pages/login/index')" v-else>
|
|
|
+ <view class="left">
|
|
|
+ <image :src="configInfo.minLogo3" mode="aspectFill"></image>
|
|
|
+ <view class="main">
|
|
|
+ <view class="name">请先登录</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order">
|
|
|
+ <view class="top">
|
|
|
+ <view class="left">我的订单</view>
|
|
|
+ <view class="right" @tap="toMyOrder('')">查看全部订单<image src="../../static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="item" @tap="toMyOrder('NOPAY')">
|
|
|
+ <view class="image"><image src="../../static/mine/order_icon1.png"></image><text v-if="count.noPay > 0">{{count.noPay}}</text></view>
|
|
|
+ <view>待付款</view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="toMyOrder('DFH')">
|
|
|
+ <view class="image"><image src="../../static/mine/order_icon2.png"></image><text v-if="count.dfh > 0">{{count.dfh}}</text></view>
|
|
|
+ <view>待发货</view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="toMyOrder('YFH')">
|
|
|
+ <view class="image"><image src="../../static/mine/order_icon3.png"></image><text v-if="count.yfh > 0">{{count.yfh}}</text></view>
|
|
|
+ <view>待收货</view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="toMyOrder('OVER')">
|
|
|
+ <view class="image"><image src="../../static/mine/order_icon4.png"></image><text v-if="count.ywc > 0">{{count.ywc}}</text></view>
|
|
|
+ <view>已完成</view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="toMyOrder('REFUND')">
|
|
|
+ <view class="image"><image src="../../static/mine/order_icon5.png"></image><text v-if="count.sh > 0">{{count.sh}}</text></view>
|
|
|
+ <view>售后服务</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list-container">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="group" v-if="userInfo && !userInfo.mobile">
|
|
|
+ <view class="item" @tap="isShowPhoneDialog = true">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon1.png"></image>获取手机号码
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="group" v-if="!isServiceUser">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/applySalesman')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon1.png"></image>申请成为业务员
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="group" v-if="isHeadUser">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/groupbuy/list')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon12.png"></image>我的团购
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="group" v-if="isServiceUser || isHeadUser">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/profit/list')" v-if="isServiceUser || isHeadUser">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon7.png"></image>我的收益
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/ranking/list')" v-if="isServiceUser">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon10.png"></image>销售排行榜
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="group" v-if="isServiceUser">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/discode/list')" v-if="hasExchangeCode">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon13.png"></image>我的优惠码
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/discount/list')" v-if="isInnerrUser">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon14.png"></image>用户减免金额{{isExamineUser ? '审核':'申请'}}
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="group" v-if="isServiceUser">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/mallCode')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon9.png"></image>商城二维码
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item" @tap="navigatePage('/pages/mine/wxCode')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon9.png"></image>企微二维码
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="group">
|
|
|
+ <!-- <view class="item" @tap="navigatePage('/pages/mine/exchange/index')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon15.png"></image>兑换中心
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view> -->
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/coupon/list')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon4.png"></image>我的优惠券
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- v-if="keyilingqude" -->
|
|
|
+ <view class="item" @tap="navigatePage('/pages/index/coupon')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon4.png"></image>可领取优惠券
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/address/list')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon5.png"></image>我的收货地址
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="group">
|
|
|
+ <view class="item" @tap="navigatePage('/pages/mine/collection')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon2.png"></image>我的收藏
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item" v-if="!isServiceUser" @tap="toMyManager">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon3.png"></image>我的客户经理
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view> -->
|
|
|
+ <view class="item" v-if="isServiceUser" @tap="navigatePage('/pages/mine/customer/list')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon8.png"></image>我的客户列表
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item" @tap="navigatePage('/pages/mine/workOrder/list')">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon11.png"></image>我的工单信息
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ <view class="group">
|
|
|
+ <button class="item" open-type="contact">
|
|
|
+ <view class="left">
|
|
|
+ <image src="/static/mine/mine_icon6.png"></image>联系客服
|
|
|
+ </view>
|
|
|
+ <view class="right"><image src="/static/icon/right.png"></image></view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <modal-dialog showTitle="我的客户经理" :showText="myManagerDetail.workName + ' ' + myManagerDetail.workPhone" :isShowDialog="isManagerDialog" @cancel="isManagerDialog = false" @confirm="callPhone(myManagerDetail.workPhone)" confirmText="拨打电话"></modal-dialog>
|
|
|
+
|
|
|
+ <!-- <drag-button :isDock="true" :customBar="false" ref="dragButton"></drag-button> -->
|
|
|
+
|
|
|
+ <u-popup :round="10" :show="isShowInfoDialog">
|
|
|
+ <view class="info-dialog">
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">获取您的头像和昵称</view>
|
|
|
+ <view class="text">为了方便识别您的身份,请授权您的头像和昵称</view>
|
|
|
+ </view>
|
|
|
+ <view class="form">
|
|
|
+ <view class="item">
|
|
|
+ <view class="label">头像</view>
|
|
|
+ <view class="value">
|
|
|
+ <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
|
|
|
+ <image :src="imageUrl + infoForm.avatar" v-if="infoForm.avatar"></image>
|
|
|
+ <view class="empty" v-else>请选择</view>
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="label">昵称</view>
|
|
|
+ <view class="value">
|
|
|
+ <input
|
|
|
+ type="nickname"
|
|
|
+ placeholder="请输入昵称"
|
|
|
+ border="none"
|
|
|
+ v-model="infoForm.nickname"
|
|
|
+ @change="getNickname"
|
|
|
+ ></input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <button @tap="isShowInfoDialog = false">取消</button>
|
|
|
+ <button type="primary" @tap="saveUserInfo()">提交</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <u-popup :round="10" :show="isShowPhoneDialog">
|
|
|
+ <view class="phone-dialog">
|
|
|
+ <view class="content">
|
|
|
+ <view>申请获取以下权限</view>
|
|
|
+ <text>获得你的公开信息(手机号码)</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <button @tap="isShowPhoneDialog = false">取消</button>
|
|
|
+ <button
|
|
|
+ type="primary"
|
|
|
+ open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="getPhoneNumber"
|
|
|
+ >
|
|
|
+ 确定授权
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {mapState} from 'vuex';
|
|
|
+ import modalDialog from '@/components/modalDialog.vue';
|
|
|
+ // import dragButton from '@/components/drag-button.vue';
|
|
|
+ import { uploadImg } from '@/api/axios.js';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ modalDialog,
|
|
|
+ // dragButton
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowPhoneDialog: false,
|
|
|
+ imageUrl: this.$imageUrl,
|
|
|
+ configInfo: uni.getStorageSync('configInfo'),
|
|
|
+ detail: {}, // 信息详情
|
|
|
+ myManagerDetail: {}, // 我的客户经理信息
|
|
|
+ count: {}, // 订单数量统计
|
|
|
+ scrollTop: 0, // 滚动高度(用于控制自定义导航)
|
|
|
+ isCustom: false, // 是否显示自定义导航
|
|
|
+ isManagerDialog: false, // 是否显示联系客户经理弹窗
|
|
|
+
|
|
|
+ isShowInfoDialog: false, // 是否显示获取用户信息弹窗
|
|
|
+ infoForm: {
|
|
|
+ avatar: '',
|
|
|
+ nickname: '',
|
|
|
+ },
|
|
|
+ keyilingqude:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapState(['userInfo', 'isLogin', 'userId']),
|
|
|
+ cuStyle(){
|
|
|
+ return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
|
|
|
+ },
|
|
|
+ isServiceUser() { // 是否业务员
|
|
|
+ return this.detail.type === 'SERVICE';
|
|
|
+ },
|
|
|
+ isHeadUser() { // 是否团长
|
|
|
+ return false //this.detail.promotionGroupLeader;
|
|
|
+ },
|
|
|
+ isExamineUser() { // 是否审核人员
|
|
|
+ return this.detail.promotionApplyExamineby;
|
|
|
+ },
|
|
|
+ isInnerrUser() { // 是否内部人员
|
|
|
+ return this.detail.innerr;
|
|
|
+ },
|
|
|
+ hasExchangeCode() { // 是否有优惠码权限
|
|
|
+ return this.detail.isExchangeCode;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ scrollTop() {
|
|
|
+ if(this.scrollTop > 100) {
|
|
|
+ this.isCustom = true;
|
|
|
+ }else {
|
|
|
+ this.isCustom = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ if(!this.isLogin) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.$axios({
|
|
|
+ url: '/couponNew/list/all',
|
|
|
+ method: 'get',
|
|
|
+ params: {
|
|
|
+ userId: this.userId
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ this.keyilingqude = !!res.data.length
|
|
|
+ })
|
|
|
+
|
|
|
+ if(this.userId && this.isLogin) {
|
|
|
+ this.getDetail();
|
|
|
+ this.getCount();
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.$refs.dragButton.init();
|
|
|
+ },
|
|
|
+ onPageScroll(res) {
|
|
|
+ this.scrollTop = res.scrollTop;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ // 获取手机号
|
|
|
+ getPhoneNumber(e) {
|
|
|
+ if(e?.detail?.iv &&e?.detail?.encryptedData){
|
|
|
+ this.$axios({
|
|
|
+ url: '/user/mobile/grant',
|
|
|
+ params: {
|
|
|
+ userId: this.userId,
|
|
|
+ iv: e.detail.iv,
|
|
|
+ encryptedData: e.detail.encryptedData,
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ uni.setStorageSync('token', res.data.token);
|
|
|
+ uni.setStorageSync('isActiveLogout', false);
|
|
|
+ this.isShowPhoneDialog = false;
|
|
|
+ this.$getUserInfo();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 获取个人信息
|
|
|
+ async getDetail() {
|
|
|
+ this.detail = await this.$getUserInfo();
|
|
|
+
|
|
|
+ if(!this.detail.openId) {
|
|
|
+ return uni.navigateTo({
|
|
|
+ url: '/pages/login/index?isNotOpenid=' + true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取订单数量
|
|
|
+ getCount() {
|
|
|
+ this.$axios({
|
|
|
+ url: '/order/count',
|
|
|
+ method: 'get',
|
|
|
+ params: {
|
|
|
+ userId: this.userId
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.count = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转页面
|
|
|
+ navigatePage(url) {
|
|
|
+ if(!this.isLogin) {
|
|
|
+ return uni.navigateTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(!url) {
|
|
|
+ return this.$toast('跳转链接错误');
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 我的客户经理
|
|
|
+ toMyManager() {
|
|
|
+ if(!this.isLogin) {
|
|
|
+ return uni.navigateTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$axios({
|
|
|
+ url: '/user/parent',
|
|
|
+ method: 'get',
|
|
|
+ params: {
|
|
|
+ userId: this.userId
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if(!res.data) {
|
|
|
+ return this.$toast('您暂无客户经理');
|
|
|
+ }else {
|
|
|
+ this.myManagerDetail = res.data;
|
|
|
+ this.isManagerDialog = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 拨打电话
|
|
|
+ callPhone(number) {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: number
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去我的订单列表
|
|
|
+ toMyOrder(tab) {
|
|
|
+ if(!this.isLogin) {
|
|
|
+ return uni.navigateTo({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/mine/order/list?tab=' + tab
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择头像
|
|
|
+ chooseAvatar(e) {
|
|
|
+ uploadImg({
|
|
|
+ path: e.detail.avatarUrl,
|
|
|
+ name: e.detail.avatarUrl,
|
|
|
+ }).then(data => {
|
|
|
+ this.infoForm.avatar = data.url;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 用户昵称审核完毕
|
|
|
+ getNickname(e) {
|
|
|
+ this.infoForm.nickname = e.detail.value;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保存用户信息
|
|
|
+ saveUserInfo() {
|
|
|
+ if(!this.infoForm.avatar) {
|
|
|
+ return this.$toast('请先上传头像');
|
|
|
+ }
|
|
|
+ if(!this.infoForm.nickname) {
|
|
|
+ return this.$toast('请先输入昵称');
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$axios({
|
|
|
+ url: '/user/userinfo/save',
|
|
|
+ params: {
|
|
|
+ userId: this.userId,
|
|
|
+ avatarUrl: this.infoForm.avatar,
|
|
|
+ nickName: this.infoForm.nickname,
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ this.isShowInfoDialog = false;
|
|
|
+ this.getDetail();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .app-container {
|
|
|
+ background: #F4F2F2;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 80rpx;
|
|
|
+ }
|
|
|
+ .top-container {
|
|
|
+ position: relative;
|
|
|
+ .bg {
|
|
|
+ display: block;
|
|
|
+ width: 750rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 710rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .user {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 360rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 30rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ image {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ line-height: 20rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ .top {
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ .left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ image {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #eaeaea;
|
|
|
+ padding: 10rpx 0 24rpx;
|
|
|
+ .item {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .image {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ position: absolute;
|
|
|
+ right: -12rpx;
|
|
|
+ top: -8rpx;
|
|
|
+ z-index: 11;
|
|
|
+ background: #FF3F42;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ view {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-container {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ .group {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ color: #333333;
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ image {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-dialog {
|
|
|
+ padding: 40rpx 40rpx 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .content {
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .label {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ button {
|
|
|
+ padding: 0;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ &::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 500rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ text-align: right !important;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 88rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .empty {
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 88rpx;
|
|
|
+ background: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 88rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ button::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ &:first-child {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ background: $theme-color;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .phone-dialog {
|
|
|
+ padding: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .content {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text {
|
|
|
+ color: #9d9d9d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ button::after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ &:first-child {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #00ba5c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|