home.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <el-container>
  3. <sidebar></sidebar>
  4. <el-container>
  5. <el-header>
  6. <span @click="showMerchant" v-if="$store.state.userInfo.memberType === 1" class="header-button">成为商户</span>
  7. <div class="account" @click="goAccount">
  8. <img src="../../static/image/head-account.png" alt="">
  9. <div class="num">¥{{$store.state.userInfo.amount}}</div>
  10. </div>
  11. <div class="print" @click="goPrinter">
  12. <img src="../../static/image/head-print.png" alt="">
  13. <div class="num con">打印设置</div>
  14. </div>
  15. <el-dropdown trigger="click">
  16. <span class="el-dropdown-link">
  17. <span style="cursor: pointer;">{{ userInfo.nickname }}</span>
  18. <i class="el-icon-arrow-down el-icon--right"></i>
  19. </span>
  20. <el-dropdown-menu slot="dropdown">
  21. <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
  22. </el-dropdown-menu>
  23. </el-dropdown>
  24. </el-header>
  25. <el-main style="background:#F1F2F5;">
  26. <router-view></router-view>
  27. </el-main>
  28. </el-container>
  29. <merchant-add ref="merchantAdd" :products="productList"></merchant-add>
  30. </el-container>
  31. </template>
  32. <script>
  33. import sidebar from "../common/sider.vue";
  34. import { mapState } from "vuex";
  35. import bus from "../common/bus.js";
  36. import merchantAdd from "../components/merchantAdd.vue";
  37. import { getProductList } from "../api/shop.js";
  38. export default {
  39. data() {
  40. return {
  41. audio: null,
  42. productList: [],
  43. };
  44. },
  45. computed: {
  46. ...mapState(["userInfo"]),
  47. },
  48. components: {
  49. sidebar,
  50. merchantAdd,
  51. },
  52. created() {
  53. bus.$emit("openGetSoundMsg");
  54. this.getProductList();
  55. let memberType = this.$store.state.userInfo.memberType;
  56. if (memberType === 1) {
  57. this.$confirm("您当前还不是商户,请先申请成为商户!", "提示", {
  58. confirmButtonText: "成为商户",
  59. cancelButtonText: "取消",
  60. type: "warning",
  61. center: true,
  62. })
  63. .then(() => {
  64. this.$refs.merchantAdd.init(0);
  65. })
  66. .catch(() => {});
  67. }
  68. },
  69. methods: {
  70. goAccount() {
  71. this.$router.push({
  72. name: "wallet",
  73. });
  74. },
  75. showMerchant() {
  76. this.$refs.merchantAdd.init(0);
  77. },
  78. getProductList() {
  79. getProductList().then((res) => {
  80. if (res.code === 200) {
  81. this.productList = res.data;
  82. } else {
  83. this.$message({
  84. type: "error",
  85. message: res.msg,
  86. });
  87. }
  88. });
  89. },
  90. goPrinter() {
  91. this.$router.push({
  92. name: "waimai",
  93. params: {
  94. tabNum: 2,
  95. },
  96. });
  97. },
  98. loginOut() {
  99. this.$confirm("此操作将退出当前登录用户, 是否继续?", "提示", {
  100. confirmButtonText: "确定",
  101. cancelButtonText: "取消",
  102. type: "warning",
  103. }).then(() => {
  104. localStorage.clear();
  105. this.$store.commit("setFirstLogin", true);
  106. bus.$emit("closeGetSoundMsg");
  107. this.$router.push({
  108. path: "/login",
  109. });
  110. });
  111. },
  112. },
  113. };
  114. </script>
  115. <style lang="scss" scoped="scoped">
  116. /deep/.el-header {
  117. display: flex;
  118. align-items: center;
  119. justify-content: flex-end;
  120. position: relative;
  121. width: 100%;
  122. height: 80px;
  123. }
  124. .el-main {
  125. position: absolute;
  126. left: 254px;
  127. right: 0;
  128. top: 80px;
  129. bottom: 0;
  130. // overflow-y: hidden;
  131. background-color: #f1f2f5;
  132. padding: 10px;
  133. min-width: 550px;
  134. }
  135. .header-button {
  136. font-size: 16px;
  137. font-family: PingFang SC;
  138. font-weight: 400;
  139. color: #777777;
  140. cursor: pointer;
  141. margin-right: 40px;
  142. }
  143. .account,
  144. .print {
  145. display: flex;
  146. align-items: center;
  147. margin-right: 20px;
  148. cursor: pointer;
  149. img {
  150. width: 20px;
  151. height: 20px;
  152. margin-right: 5px;
  153. }
  154. .num {
  155. line-height: 25px;
  156. font-size: 16px;
  157. font-weight: 500;
  158. color: #fc7200;
  159. }
  160. .con {
  161. color: #333333;
  162. }
  163. }
  164. .home-content {
  165. display: flex;
  166. .side-box {
  167. // width: 200px;
  168. position: relative;
  169. }
  170. .content {
  171. flex: 1;
  172. flex-shrink: 1;
  173. }
  174. .title {
  175. color: #0074d9;
  176. }
  177. }
  178. </style>