随着网络技术的飞跃,人类的社会生活和现代信息技术呈现出不断融合的趋势,生活中的日常账单支付、网上购物、网上学习和娱乐等。二手交易平台应运而生,其主要目的是充分交换人们闲置的产品。你可以在交易平台上发布二手商品,然后有需求的人联系购买。它既经济又环保,可以开发出人人都不会浪费的好品质。
二手交易系统是一种电子商务。综合目前国内二手交易市场来看,其交易对象多为住宅、汽车等相对昂贵的商品。参与者大多是有一定工作经验和经济实力的人,而在大学校园,学生群体中也存在着大量的闲置产品,这些产品的价值相对较低,但市场潜力不容忽视,由于学生对二手交易的需求,现有校园也有一些二手交易渠道,但大多通过跳蚤市场或社交媒体发布二手商品信息,自发性强;对于交易双方而言,没有可靠的担保,选择范围有限。
实现的功能:
系统分为普通用户、商家和管理员三种角色;
本系统的功能应该包括:用户登录和注册、订单管理、钱包管理、商品管理、交易管理、充值管理、用户管理等功能。
注册、登录:未注册用户可以注册,包括普通用户注册和商家注册,有了账号后可以登录网站;
订单管理:普通用户可以查看和管理自己的购买订单,商家可以查看买家的购买订单;
钱包管理:普通用户和商家可以查看自己的钱包余额等信息;
商品管理:主要是商家可以上传、编辑、上架、下架商品等操作,管理员可以审核商家的商品,审核通过可以展示在网站首页;
交易管理:主要是管理员可以查看普通用户和商家的交易信息;
充值管理:管理员可以给普通用户和商家进行钱包的充值,方便使用;
用户管理:管理员可以审核用户的注册信息,只有审核通过才可以登录网站。
用到的技术:
后端 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校园二手交易商城