股票模拟购买界面是对用户模拟购买的股票进行管理，比如把用户所购买的每一支股票都保存下来，并且记录用户购买这支股票时的价格、购买的股数、现在的价格以及用户在这支股票上面获利了多少等数据，并且可以进行股票的出售，将这支要出售的股票所盈利的额度存入用户余额中并展示出来。而用户的模拟购买是在用户进行搜索后，跳转到对应股票的详细内容的页面时，有一栏购买的功能实现，输入购买的股票数量和股票价格即可。这里的股票代码可以通过搜索栏输入的内容获取。我负责的部分只是管理模拟购买界面的设计。
//template部分 <template> <!--<div style="position: absolute;top: 200px;left: 400px;height: 200px;width: 300px"> <h1 >这是股票管理页面</h1> </div>--> <div> <div style="background: #ffffff;position: absolute;top:100px;left: 350px;width: 1000px;height: 60px;border-radius: 10px"> <h2 style="margin-left: 400px;">用户余额：{{accountmoney}}元</h2> <el-button type="primary" style="left: 900px;top:10px;position: absolute">刷新</el-button> </div> <el-table :data="tableData" :row-style="{height:'55px'}" :cell-style="{padding:'0px'}" style="width: 100%; top: 170px; left:280px" height="500"> <el-table-column fixed prop="count" label="编号" width="100" align="center"> </el-table-column> <el-table-column prop="stock_code" label="股票代码" width="120" align="center"> </el-table-column> <el-table-column prop="price" label="买时价格" width="120" align="center"> </el-table-column> <el-table-column prop="number" label="购买数量" width="120" align="center"> </el-table-column> <el-table-column prop="moneyall" label="总花费" width="120" align="center"> </el-table-column> <el-table-column prop="price_now" label="现在价格" width="120" align="center"> </el-table-column> <el-table-column prop="moneyallnow" label="总价值" width="120" align="center"> </el-table-column> <el-table-column prop="sub" label="盈利" width="120" align="center"> </el-table-column> <el-table-column label="操作" align="center" min-width="100" width="200"> <template slot-scope="scope"> <el-button type="primary">查看</el-button> <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">售出</el-button> </template> </el-table-column> </el-table> </div> </template>关于用户余额，在后端数据库里每个新用户的余额都为0。在模拟出售一支股票后，后端会从数据库中将此股票数据删除，并将盈利的额度加进用户的余额中，所以在前端部分想要显示出用户余额，只需要通过axios向后端发送请求即可。 关于每支股票的售出部分，就如上面所说，调用删除按钮向后端请求进行删除。 关于每只股票显示的数据，将股票现价及盈利等内容隐藏，点击查看按钮才可以显示。在点击查看按钮后会向后端请求数据来得到实时价格并进行利润的计算。 另外，在用户余额旁边的刷新按钮可以在删除若干支股票后刷新界面，主要是更新当前用户所持有股票的显示及余额。 在我负责的部分里，我只设计了用户模拟购买股票的界面以及对用户余额显示的前后端测试。 刷新部分、删除部分以及查看按钮的实现由组长负责。
<script> import store from "../store"; import {sub} from "../main"; export default { data() { let money = store.state.usermoney return { tableData: store.state.stockbuydata, accountmoney: money } }, methods:{ deleteRow(index, rows) { console.log(store.state.usermoney) //rows.splice(index, 1); axios({ url:'', params:{ account:this.$store.state.accout, index:index } }).then(res=>{ if(res.data === true) { this.$alert('售出成功', '提示', { confirmButtonText: '确定' }); } }) console.log(this.$store.state.stockbuydata[index].count) let count=parseInt(this.$store.state.stockbuydata[index].count) let account=this.$store.state.accout let money = this.$store.state.stockbuydata[index].sub let benefit = parseFloat(accountmoney).toFixed(2) + parseFloat(money).toFixed(2) this.accountmoney = benefit + '' //转换成字符串 sub(account,count) this.$store.commit("stockbuydatadel",index) console.log(this.$store.state.stockbuydata) } }, } </script>数据库里id为2的用户的余额：
在模拟购买界面里的显示：
