With the leap of network technology, human social life and modern information technology are showing a trend of continuous integration, such as daily bill payment, online shopping, online learning and entertainment in life. The second-hand trading platform came into being, and its main purpose is to fully exchange people's idle products. You can publish second-hand goods on the trading platform, and then people in need can contact to buy them. It is economical and environmentally friendly, and can develop good qualities that no one will waste.
The second-hand trading system is a kind of e-commerce. Based on the current domestic second-hand trading market, most of its trading objects are relatively expensive commodities such as houses and cars. Most of the participants are people with certain work experience and economic strength. On university campuses, there are also a large number of idle products among the student population. The value of these products is relatively low, but the market potential cannot be ignored. There are also some second-hand trading channels in existing campuses, but most of them release second-hand commodity information through flea markets or social media, which is highly spontaneous; for both parties to the transaction, there is no reliable guarantee and the range of choices is limited.
Implemented functions:
The system is divided into three roles: ordinary users, merchants and administrators;
The functions of this system should include: user login and registration, order management, wallet management, commodity management, transaction management, recharge management, user management and other functions.
Registration and login: Unregistered users can register, including ordinary user registration and merchant registration, and can log in to the website after having an account;
Order management: Ordinary users can view and manage their own purchase orders, and merchants can view buyers' purchase orders;
Wallet management: ordinary users and merchants can check their wallet balance and other information;
Commodity management: Mainly, merchants can upload, edit, put and remove commodities, and administrators can review the merchant’s commodities, which can be displayed on the homepage of the website if they pass the review;
Transaction management: mainly administrators can view the transaction information of ordinary users and merchants;
Recharge management: administrators can recharge wallets for ordinary users and merchants, which is convenient to use;
User management: The administrator can review the user's registration information, and only after the review is passed can he log in to the website.
Technologies used:
Back-end java language, SpringBoot framework, MySql database, Maven dependency management;
Front-end Vue, element-ui, etc.
Part of the code display
<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>
Based on java SpringBoot and vue campus second-hand trading mall