|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <view class="mine">
|
|
|
+ <!-- 状态栏占位 -->
|
|
|
+ <view class="mine__nav" :style="{ height: 77 + 'px' }" />
|
|
|
+ <view class="mine__person">
|
|
|
+ <view class="mine__person--info">
|
|
|
+ <view @click="handlerSkipUserInfo">
|
|
|
+ <image
|
|
|
+ :src="merchantInfo.merchant.logo"
|
|
|
+ style="width: 140rpx; height: 140rpx; border-radius: 50%"
|
|
|
+ v-if="merchantInfo.merchant.logo"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="@/static/QR57a.jpg"
|
|
|
+ style="width: 140rpx; height: 140rpx; border-radius: 50%"
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="userName">
|
|
|
+ <view>
|
|
|
+ <view v-if="merchantInfo.storeName"> {{ merchantInfo.storeName }}</view>
|
|
|
+ <view v-else> 微信用户</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view v-if="merchantInfo.mobileNumber" class="text">
|
|
|
+ +86 {{ merchantInfo.mobileNumber }}
|
|
|
+ </view>
|
|
|
+ <view v-else class="text">
|
|
|
+ <text style="color: #f6bf3f"> 您当前还未认证,</text> <span @click="toApprove">去认证></span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="status"
|
|
|
+ :style="{ 'background-color': getStatusColor(state) }"
|
|
|
+ @click="show = true"
|
|
|
+ >
|
|
|
+ <view style="margin-right: 6rpx">{{ stateName }}</view>
|
|
|
+ <u-icon name="play-right-fill" color="#fff" size="12" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mine__main">
|
|
|
+ <view class="mine__main--purse">
|
|
|
+ <view class="wallet">
|
|
|
+ <view class="wallet--title">我的钱包</view>
|
|
|
+ <view class="wallet--more">
|
|
|
+ <text>查看钱包余额</text>
|
|
|
+ <u-icon name="arrow-right" color="#333" size="14" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="walletInfo">
|
|
|
+ <view v-for="index in 4" :key="index">
|
|
|
+ <view class="text-title">借钱(元)</view>
|
|
|
+ <view class="text-data">
|
|
|
+ 30
|
|
|
+ <text style="font-size: 24rpx; margin-left: 5rpx">万</text>
|
|
|
+ </view>
|
|
|
+ <view class="text-info">最高可用</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shortcut">
|
|
|
+ <view style="display: flex">
|
|
|
+ <view>快捷支付</view>
|
|
|
+ <view style="margin: 0 20rpx">|</view>
|
|
|
+ <view>一银升级银行卡用于麦付</view>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" color="#fff" size="14" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mine__main--setting">
|
|
|
+ <template v-for="item in list1">
|
|
|
+ <u-cell size="large" :border="false" :key="item.name" :title="item.name" isLink :url="item.url">
|
|
|
+ <image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
|
|
|
+ </u-cell>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mine__main--setting">
|
|
|
+ <template v-for="item in list2" @click="tap(item)">
|
|
|
+ <u-cell size="large" :border="false" @tap="" :key="item.name" :title="item.name" isLink :url="item.url">
|
|
|
+ <image slot="icon" src="@/static/tools.jpg" style="width: 60rpx; height: 60rpx" />
|
|
|
+ </u-cell>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 营业状态选择弹框 -->
|
|
|
+ <u-picker
|
|
|
+ :show="show"
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="cancel"
|
|
|
+ @confirm="confirm"
|
|
|
+ keyName="label"
|
|
|
+ ></u-picker>
|
|
|
+
|
|
|
+ <!-- 商家认证的弹框 -->
|
|
|
+ <u-modal
|
|
|
+ :show="showAut"
|
|
|
+ :title="title"
|
|
|
+ :content="content"
|
|
|
+ :confirmText="'开始认证'"
|
|
|
+ :cancelText="'返回用户端'"
|
|
|
+ :showCancelButton="true"
|
|
|
+ @confirm="confirmSwitch"
|
|
|
+ @cancel="showAut = false"
|
|
|
+ ></u-modal>
|
|
|
+
|
|
|
+ <!-- <tabbar currentTab="merchantMine" /> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
|
|
|
+import { updateBusinessStatus } from '@/api/merchant/mine';
|
|
|
+import { phoneEncryption } from '@/utils/tools';
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ state: 0,
|
|
|
+ stateName: '营业中',
|
|
|
+ show: false,
|
|
|
+ showAut: false,
|
|
|
+ title: '商家认证',
|
|
|
+ content: '进入商家端前,我们需要一定的认证',
|
|
|
+ merchantInfo: {},
|
|
|
+ columns: [
|
|
|
+ // 营业状态 0-营业中,1-休息中
|
|
|
+ [
|
|
|
+ {
|
|
|
+ label: '营业中',
|
|
|
+ id: '0',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '休息中',
|
|
|
+ id: '1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ list1: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ name: '门店环境',
|
|
|
+ url: '/pageMerchant/mineModule/storeEnviron',
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // id: '2',
|
|
|
+ // name: '我要开店',
|
|
|
+ // url: '/pages/merchant/mine/openStore/index',
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ name: '资质信息',
|
|
|
+ url: '/pageMerchant/mineModule/openStoreAppealDetail',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ list2: [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ name: '帮助中心',
|
|
|
+ url: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ name: '设置',
|
|
|
+ url: '/pages/merchant/mine/setting/index',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ onShow() {
|
|
|
+ this.getMerchantAuth();
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.merchantInfo) {
|
|
|
+ this.showAut = false;
|
|
|
+ } else {
|
|
|
+ this.showAut = true;
|
|
|
+ }
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ tap(item) {
|
|
|
+ console.log('item', item);
|
|
|
+ },
|
|
|
+
|
|
|
+ // changeStatus() {
|
|
|
+ // this.show = true;
|
|
|
+ // },
|
|
|
+
|
|
|
+ // 开始认证
|
|
|
+ confirmSwitch() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pageMerchant/mineModule/certification/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // handelCancel() {
|
|
|
+ // uni.switchTab({
|
|
|
+ // url: '/pages/client/tabBar/home/index',
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // 修改商家状态
|
|
|
+ confirm(val) {
|
|
|
+ this.state = val.value[0].id;
|
|
|
+ this.stateName = val.value[0].label;
|
|
|
+ this.show = false;
|
|
|
+
|
|
|
+ updateBusinessStatus(this.merchantInfo.merchant.id, { businessStatus: this.state }).then(
|
|
|
+ res => {
|
|
|
+ if (res.code === 'OK') {
|
|
|
+ this.$u.toast('修改成功');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ getStatusColor(state) {
|
|
|
+ if (state === 0) {
|
|
|
+ return '#19be6b';
|
|
|
+ } else if (state === 1) {
|
|
|
+ return '#ff9900';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击跳转到设置
|
|
|
+ handlerSkipSetting() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/merchant/mine/setting/index',
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取商家信息
|
|
|
+ async getMerchantAuth() {
|
|
|
+ let res = await getMerchantAuthData();
|
|
|
+ if (res.code === 'OK') {
|
|
|
+ // 将数据存储到vuex中
|
|
|
+ this.merchantInfo = Object.assign(
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ ...res.data,
|
|
|
+ mobileNumber: phoneEncryption(res.data.mobileNumber),
|
|
|
+ },
|
|
|
+ );
|
|
|
+ this.$store.commit('SET_MERCHANTINFO', res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转到商家认证
|
|
|
+ toApprove(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pageMerchant/mineModule/certification/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击跳转到个人信息
|
|
|
+ handlerSkipUserInfo(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pageMerchant/mineModule/personalInfo'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.mine {
|
|
|
+ min-height: calc(100vh - 80rpx);
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &__nav {
|
|
|
+ background-color: $uni-bg-color-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__person {
|
|
|
+ height: 160rpx;
|
|
|
+ padding: $uni-bg-padding-sm;
|
|
|
+ background-color: $uni-bg-color-primary;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &--info {
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .userName {
|
|
|
+ width: 400rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin: 20rpx 0 0 16rpx;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 80rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ right: 0;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 25rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 30rpx 0 0 30rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__main {
|
|
|
+ padding: $uni-bg-padding-sm;
|
|
|
+
|
|
|
+ &--purse {
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ padding: $uni-bg-padding-sm;
|
|
|
+ border-radius: $uni-border-radius-base;
|
|
|
+
|
|
|
+ .wallet {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ &--title {
|
|
|
+ color: #000;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--more {
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .walletInfo {
|
|
|
+ margin: 40rpx 0;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shortcut {
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: $uni-bg-color-primary;
|
|
|
+ border-radius: $uni-border-radius-sm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &--setting {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+ padding: $uni-bg-padding-sm;
|
|
|
+ border-radius: $uni-border-radius-base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.text-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.text-data {
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin: 15rpx 0;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.text-info {
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+</style>
|