TBtools-充值

htmldev/TBTools/README.md

@@ -29,3 +29,13 @@ npm run build --uat
 # 构建生产环境
 npm run build --prod
 ```
+
+### todo list
+* [ ] 用户中心：充值、消费记录
+* [ ] 商品价格走势
+* [ ] 店铺信息查询
+* [ ] 淘宝客订单检测
+* [ ] 淘宝天猫下拉关键词搜索
+* [ ] 淘宝商品评论
+* [ ] 淘宝商品详情
+* [ ] 商品问大家接口

htmldev/TBTools/src/router/index.js

@@ -50,6 +50,19 @@ const mainRoutes = {
       component: _import('modules/tools/tools-online'),
       name: 'toolsOnline',
       meta: { title: '指数转化' }
+    },
+    // 个人中心
+    {
+      path: '/mine-paycheck',
+      component: _import('modules/mine/mine-paycheck'),
+      name: 'minePaycheck',
+      meta: { title: '账户余额充值' }
+    },
+    {
+      path: '/mine-wallet',
+      component: _import('modules/mine/mine-wallet'),
+      name: 'mineWallet',
+      meta: { title: '我的钱包' }
     }
   ],
   beforeEnter (to, from, next) {

htmldev/TBTools/src/views/main-navbar.vue

@@ -22,8 +22,21 @@
           </el-dropdown>
         </li>
       </ul>
-      <a href="javascript:;" @click="logoutHandle" v-if="token">退出</a>
-      <router-link :to="{name: 'login'}" replace v-else>登录</router-link>
+      <el-dropdown class="TT-login" :show-timeout="0" placement="bottom" style="cursor: pointer;">
+        <span class="el-dropdown-link">个人中心</span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-if="token">
+            <router-link :to="{name: 'minePaycheck'}">充值</router-link>
+          </el-dropdown-item>
+          <el-dropdown-item v-if="token">
+            <router-link :to="{name: 'mineWallet'}">我的钱包</router-link>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <a href="javascript:;" @click="logoutHandle" v-if="token">退出</a>
+            <router-link :to="{name: 'login'}" replace v-else>登录</router-link>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
       <router-link class="ml-20" :to="{name: 'register'}" replace>/注册</router-link>
     </div>
   </nav>

htmldev/TBTools/src/views/modules/mine/mine-paycheck.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-row class="pay-check">
+    <el-col :span="6" :offset="9">
+      <el-form :model="formData" :rules="rules" ref="myForm">
+        <el-form-item label="支付方式" prop="payment">
+          <el-radio-group v-model="formData.payment">
+            <el-radio label="1">在线支付</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="支付金额" prop="amount">
+          <el-select v-model="formData.amount" placeholder="请选择支付金额">
+            <el-option label="50.00" value="50"></el-option>
+            <el-option label="100.00" value="100"></el-option>
+            <el-option label="300.00" value="300"></el-option>
+            <el-option label="500.00" value="500"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('myForm')">立即支付</el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'mine-paycheck',
+  data () {
+    return {
+      formData: {
+        payment: '1',
+        amount: '50'
+      },
+      rules: {
+        amount: [
+          { required: true, message: '请选择支付金额', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm (formName) {
+      console.log(this.formData)
+      this.$refs[formName].validate((valid) => {
+        if (!valid) {
+          alert('submit!')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay-check {
+  margin-top: 100px;
+}
+</style>

htmldev/TBTools/src/views/modules/mine/mine-wallet.vue

@@ -0,0 +1,94 @@
+<template>
+  <el-row>
+    <el-col class="TT-header">
+      <h3>我的钱包</h3>
+      <p>
+        <span class="TT-label">您拥有金币：</span>
+        <span class="TT-value">0</span>
+      </p>
+      <p>
+        <span class="TT-label">您当前余额：</span>
+        <span class="TT-value">￥0.000</span>
+      </p>
+    </el-col>
+    <el-col>
+      <el-table :data="tableData" border>
+        <el-table-column prop="date" label="日期" width="180"></el-table-column>
+        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
+        <el-table-column prop="address" label="地址"></el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange"
+                     :current-page="currentPage"
+                     :page-sizes="pageSizes"
+                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
+                     :total="totalCount">
+      </el-pagination>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'mine-wallet',
+  data () {
+    return {
+      // 总数据
+      tableData: [],
+      // 默认显示第几页
+      currentPage: 1,
+      // 总条数，根据接口获取数据长度(注意：这里不能为空)
+      totalCount: 1,
+      // 个数选择器（可修改）
+      pageSizes: [1, 2, 3, 4],
+      // 默认每页显示的条数（可修改）
+      PageSize: 1
+    }
+  },
+  created () {
+    this.getData(this.PageSize, this.currentPage)
+  },
+  methods: {
+    // 将页码，及每页显示的条数以参数传递提交给后台
+    getData (n1, n2) {},
+    // 分页
+    // 每页显示的条数
+    handleSizeChange (val) {
+      // 改变每页显示的条数
+      this.PageSize = val
+      // 点击每页显示的条数时，显示第一页
+      this.getData(val, 1)
+      // 注意：在改变每页显示的条数时，要将页码显示到第一页
+      this.currentPage = 1
+    },
+    // 显示第几页
+    handleCurrentChange (val) {
+      // 改变默认的页数
+      this.currentPage = val
+      // 切换页码时，要获取每页显示的条数
+      this.getData(this.PageSize, (val) * (this.pageSize))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TT-header {
+  font-size: 18px;
+  color: #000;
+
+  .TT-label {
+    line-height: 18px;
+    font-size: 14px;
+    color: #333;
+  }
+
+  .TT-value {
+    line-height: 18px;
+    font-size: 14px;
+    color: #FF7200;
+  }
+}
+</style>