liangjin
2021-03-30 6644b5af8235790eb5fd4c4265ce99aa90b134f1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!--
 * @Author: 小明丶
 * @Date: 2020-12-29 09:53:52
 * @LastEditors: 小明丶
 * @LastEditTime: 2021-01-05 17:53:43
 * @Description: App切换商户
-->
<template>
  <div class="change-mer">
    <van-nav-bar
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
    >
      <div slot="title">
        <h4>切换商户</h4>
      </div>
    </van-nav-bar>
    <div class="mer-list">
      <ul class="list">
        <van-radio-group v-model="radio">
          <li class="item" v-for="item in merList" :key="item.id">
            <div class="left">
              <p>{{ item.orgName }}</p>
              <p>创建时间:{{ item.creTime | timeformat('yyyy-MM-dd')}}</p>
            </div>
            <div class="right">
              <van-radio :name="item.id"></van-radio>
            </div>
          </li>
        </van-radio-group>
      </ul>
    </div>
    <div class="btn-box">
        <button class="btn" @click="changeMer">确认切换</button>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      merList: [],
      radio: "",
    };
  },
  created() {
    this.radio = this.$store.state.userinfo.id
    this.$api.getAgencyMerList().then(res=>{
      this.merList = res.body.merchantList
    })
  },
  methods: {
    ...mapMutations(['SET_USER_INFO']),
    onClickLeft() {
      this.$router.go(-1);
    },
    changeMer(){
      this.$api.getPowerInfo(this.radio).then(res=>{
        this.SET_USER_INFO(res.body);
        this.$router.push('/app/home')
      })
    }
  },
};
</script>
<style lang="less" scoped>
.change-mer {
  & {
    min-height: 100vh;
    background: #fafafa;
  }
  .mer-list {
    width: 100%;
    height: 80vh;
    box-sizing: border-box;
    padding: 10px 15px;
    overflow: scroll;
  }
  .mer-list::-webkit-scrollbar {display:none}
  .item {
    height: 60px;
    background: #fff;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .left > p:nth-of-type(1) {
    font-size: 16px;
    font-weight: 550;
    margin-bottom: 8px;
  }
  .left > p:nth-of-type(2) {
   font-size: 12px;
   color: #999;
  }
  .btn-box{
      position: fixed;
      bottom: 20px;
      text-align: center;
      width: 100%;
      .btn{
        width: 320px;
        height: 44px;
        background: #896EDB;
        border-radius: 22px;
        outline: none;
        border: 0;
        color:#fff;
      }
  }
}
</style>