随着网络技术的飞跃，人类的社会生活和现代信息技术呈现出不断融合的趋势，生活中的日常账单支付、网上购物、网上学习和娱乐等。二手交易平台应运而生，其主要目的是充分交换人们闲置的产品。你可以在交易平台上发布二手商品，然后有需求的人联系购买。它既经济又环保，可以开发出人人都不会浪费的好品质。
二手交易系统是一种电子商务。综合目前国内二手交易市场来看，其交易对象多为住宅、汽车等相对昂贵的商品。参与者大多是有一定工作经验和经济实力的人，而在大学校园，学生群体中也存在着大量的闲置产品，这些产品的价值相对较低，但市场潜力不容忽视，由于学生对二手交易的需求，现有校园也有一些二手交易渠道，但大多通过跳蚤市场或社交媒体发布二手商品信息，自发性强；对于交易双方而言，没有可靠的担保，选择范围有限。
实现的功能：
系统分为普通用户、商家和管理员三种角色；
本系统的功能应该包括：用户登录和注册、订单管理、钱包管理、商品管理、交易管理、充值管理、用户管理等功能。
注册、登录：未注册用户可以注册，包括普通用户注册和商家注册，有了账号后可以登录网站；
订单管理：普通用户可以查看和管理自己的购买订单，商家可以查看买家的购买订单；
钱包管理：普通用户和商家可以查看自己的钱包余额等信息；
商品管理：主要是商家可以上传、编辑、上架、下架商品等操作，管理员可以审核商家的商品，审核通过可以展示在网站首页；
交易管理：主要是管理员可以查看普通用户和商家的交易信息；
充值管理：管理员可以给普通用户和商家进行钱包的充值，方便使用；
用户管理：管理员可以审核用户的注册信息，只有审核通过才可以登录网站。
用到的技术：
后端 java语言，SpringBoot框架，MySql数据库，Maven依赖管理；
前端 Vue，element-ui等。
部分代码展示
<template>
<div class="commodity">
<div class="img-preview">
<img :src="this.HOST+commodity.photoOne" v-if="commodity.photoOne" />
</div>
<div>
<div class="commodityInfo">
<h3>{
{ commodity.name }}</h3>
<p>
<span>商家：{
{ commodity.shopName }}</span>
<span>平均分：{
{commodity.score}}</span>
</p>
<p>库存：{
{ commodity.inventory }}</p>
<p>新旧程度：{
{ commodity.degree | formatEmptyData}}</p>
<div class="bargain">{
{commodity.bargain}}</div>
<p>
<span class="factPrice">
{
{ commodity.price | factPrice(commodity.discount) | currency }}
</span>
<span v-if="commodity.discount!=1" class="discount">
[{
{commodity.discount | formatDiscount}}]
</span>
<span v-if="commodity.discount!=1">[定价 <i class="price">{
{commodity.price | currency}}</i>]</span>
</p>
</div>
<div class="addCart" v-if="user">
<AddSubtractButton :quantity="quantity" @updateQuantity="handleUpdate"/>
<button class="addCartButton" @click="addCart(commodity)">加入购物车</button>
</div>
</div>
<commodityTabComponent :content="commodity.instruction"/>
</div>
</template>
<script>
import AddSubtractButton from '@/components/AddSubtractButton'
import commodityTabComponent from '@/components/CommodityTabComponent'
import { mapActions, mapState } from 'vuex'
export default {
name: 'commodity',
data () {
return {
commodity: {},
quantity: 0
}
},
components: {
AddSubtractButton,
commodityTabComponent
},
computed:{
...mapState('user',['user'])
},
created(){
let url = this.$route.fullPath;
if(url.indexOf("/shop/commodity")!=-1){
url = "/commodity/"+this.$route.params.id;
}
this.axios.get(url)
.then(response => {
if(response.status == 200){
this.commodity = response.data.data;
if(this.commodity.bargain==0){
this.commodity.bargain="不议价";
}else this.commodity.bargain="可以议价";
}
}).catch(error => alert(error));
},
methods: {
// 子组件AddSubtractButton的自定义事件updateQuantity的处理函数
handleUpdate(value){
this.quantity = value;
},
factPrice(price, discount){
return price * discount;
},
//加入购物车
addCart(commodity){
if(!this.user){
this.$router.push("/login");
return;
}
let quantity = this.quantity;
if(quantity === 0){
quantity = 1;
}
if(commodity.inventory < quantity){
this.$message("库存不够");
return;
}
this.axios.post('/shoppingCart',{commodityId:commodity.id,quantity:quantity,userId:this.user.id}).then(response => {
if(response.data.code == 0){
this.$router.push('/cart');
}else{
this.$message("加入购物车失败")
}
}).catch(error => alert(error))
},
...mapActions('cart', [
'addProductToCart'
])
},
filters: {
// 格式化折扣数据
formatDiscount(value){
if(value)
{
let strDigits = value.toString().substring(2);
strDigits += "折";
return strDigits;
}
else
return value;
},
formatEmptyData(value){
if(value==null){
value = "未知";
}
return value;
}
}
}
</script>
<style scoped>
.commodity {
width: 1200px;
height: 500px;
margin: 0 auto;
margin-top: 60px;
font-size: 16px;
text-align: left;
color: #846e6e;
}
.commodity img {
margin-left: 50px;
float: left;
width: 200px;
height: 200px;
}
.commodity .commodityInfo {
margin-left: 20px;
float: left;
width: 800px;
background-color: #eee;
padding-left: 20px;
padding-top: 5px;
}
.commodity .addCart {
margin-left: 300px;
float: left;
margin-top: 10px;
}
.commodity .addCartButton{
padding: 5px 10px 6px;
color: #fff;
border: none;
border-bottom: solid 1px #222;
border-radius: 5px;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 3px #444;
cursor: pointer;
background-color: #e33100;
display: block;
margin-left: 80px;
}
.addCartButton:hover {
text-shadow: 0 1px 1px #444;
}
.commodity span{
padding-right: 15px;
}
.commodity .price {
color: gray;
text-decoration: line-through;
}
.commodity .discount{
color: red;
}
.commodity .factPrice{
color: red;
font-weight: bold;
}
</style>基于java SpringBoot和vue校园二手交易商城