With the development of the times, the traditional supermarket shopping methods can no longer meet people's needs. For customers, the problems of queuing up for shopping and paying shopping fees need to be solved urgently. For physical supermarkets, they are facing the competitive pressure of online shopping. As supermarket managers, they want to reduce costs, save manpower, and facilitate customers to shop and calculate. Therefore, they propose the design and development of online supermarket systems. This paper analyzes the current charging mode of supermarkets, and proposes the design and development of an unmanned vending system in online supermarkets. Customers use the website system to pay, change the original charging method, and realize self-service purchase, timely payment, and real-time query. It can not only save manpower in supermarkets, but also save customers' time waiting for settlement. With the development and popularization of network technology, people's life has undergone rapid changes. Especially the application of computers in various fields of economy and society, in order to make consumers' online shopping process simple, convenient, safe and fast, online shopping has become a new popular way of shopping
In recent years, with the rapid popularization of technologies such as "Internet +" and "Big Data", online stores have entered a period of rapid development. The emergence of e-commerce has obviously had a major impact on people's shopping methods, from initial store shopping to online shopping. . The B2C online shopping mall system refers to creating a virtual shopping mall on the Internet to meet the online shopping needs of users. With the development of the times, the traditional supermarket shopping methods can no longer meet people's needs. For customers, the problems of queuing up for shopping and paying shopping fees need to be solved urgently.
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
/**
* 订单(Order)表控制层
*
*/
@Slf4j
@RestController
@RequestMapping("order")
public class OrderController extends ApiController {
/**
* 服务对象
*/
@Autowired
private OrderService orderService;
@Autowired
private UserService userService;
@Autowired
private ShopService shopService;
@Autowired
private MiddleCountService middleCountService;
@Autowired
private CommodityService commodityService;
/**
* 通过主键查询单条数据
*
* @param id 主键
* @return 单条数据
*/
@GetMapping("{id}")
public R selectOne(@PathVariable Serializable id) {
return success(this.orderService.getById(id));
}
@GetMapping("user/{userId}")
public R selectByUserID(@RequestParam("page") long page, @PathVariable Serializable userId) {
return success(this.orderService.page(new Page<>(page, 20),
new LambdaQueryWrapper<Orders>().eq(Orders::getUserId, userId)));
}
@GetMapping("shop/{shopId}")
public R selectByShopID(@RequestParam("page") long page, @PathVariable Serializable shopId) {
return success(this.orderService.page(new Page<>(page, 20),
new LambdaQueryWrapper<Orders>().eq(Orders::getShopId, shopId).between(Orders::getStatus,2,8)));
}
@GetMapping
public R selectAll(@RequestParam("page") long page){
return success(this.orderService.pageByStatus(new Page<>(page, 20),8));
}
/**
* 修改数据
*
* @param orders 实体对象
* @return 修改结果
*/
@PostMapping("update")
public R update(@RequestBody Orders orders) {
if (orders.getCanReturn() == 1) {
if (orders.getStatus() == 5 || orders.getStatus() == 6) {
return failed("支付超过24h,无法退货");
}
}
else if (orders.getStatus() == 6) {
MiddleCount middleCount = middleCountService.getMiddleCountByOrderId(orders.getId());
User user = userService.getById(orders.getUserId());
user.setWallet(user.getWallet() + middleCount.getAmount());
middleCountService.removeById(middleCount.getId());
}
if (orders.getStatus() == 1 || orders.getStatus() == 6) {
Commodity commodity = commodityService.getById(orders.getCommodityId());
commodity.setInventory(commodity.getInventory() + orders.getQuantity());
commodityService.updateById(commodity);
}
return success(this.orderService.updateById(orders));
}
@PostMapping("pay")
public R payOrders(@RequestBody List<Orders> orders) {
User user = userService.getById(orders.get(0).getUserId());
double sum = orders.stream().mapToDouble(Orders::getAmount).sum();
if (user.getWallet() < sum) {
return failed("余额不足");
}
for (Orders order : orders) {
MiddleCount middleCount = new MiddleCount();
middleCount.setOrderId(order.getId());
middleCount.setUserId(user.getId());
middleCount.setAmount(order.getAmount());
middleCount.setSellerId(shopService.getById(order.getShopId()).getSellerId());
middleCountService.save(middleCount);
user.setWallet(user.getWallet() - order.getAmount());
order.setStatus(2);
orderService.updateById(order);
}
return success(userService.updateById(user));
}
}<template>
<div class="order">
<el-table :data="orders" stripe style="width: 100%">
<el-table-column width="30"></el-table-column>
<el-table-column prop="commodityId" label="商品ID" width="80"></el-table-column>
<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
<el-table-column prop="amount" label="总价" width="100"></el-table-column>
<el-table-column prop="creatTime" label="订单开始时间" width="200"></el-table-column>
<el-table-column prop="endTime" label="订单结束时间" width="200"></el-table-column>
<el-table-column prop="status" label="标签" width="140"
:filters="[{ text: '待支付', value: 0}, { text: '取消订单', value: 1 },
{ text: '待发货', value: 2}, { text: '已收货', value: 4 },
{ text: '退货审核中', value: 5 },{ text: '已退货', value: 6},
{ text: '拒绝退货', value: 7},{ text: '已完成', value: 8} ]"
:filter-method="filterTag"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.status === 8 ? 'success' : 'primary'"
disable-transitions>{
{scope.row.status | formatStatus }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button v-if="determineType(scope.row.status,'付款')" size="mini" type="danger" @click="handlePay(scope.row)">付款</el-button>
<el-button v-if="determineType(scope.row.status,'取消订单')" size="mini" @click="handleCancelPay(scope.row)">取消订单</el-button>
<el-button v-if="determineType(scope.row.status,'退货')" size="mini" type="danger" @click="handleReturnGoods(scope.row)">退货</el-button>
<el-button v-if="determineType(scope.row.status,'确认订单')" size="mini" @click="handleConfirm(scope.row)">确认订单</el-button>
<el-button v-if="determineType(scope.row.status,'取消退货')" size="mini" @click="handleCancelReturn(scope.row)">取消退货</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:"order",
data(){
return{
orders:[],
}
},
created(){
this.axios.get("/order/user/"+this.user.id,{params:{page:1}}).then(response => {
if(response.status == 200){
this.orders = response.data.data.records;
}
})
},
computed:{
...mapState('user',['user']),
},
methods:{
filterTag(value, row) {
return row.status === value;
},
//付款
handlePay(row){
this.$confirm("确认支付?").then(() =>{
this.axios.post("/order/pay",[row]).then(response => {
if(response.data.code == 0){
this.$message({type:'success',message:"支付成功！"})
row.status = 2
}else{
this.$message(response.data.msg)
}
}).catch(() => {error => alert(error)});
}).catch(()=>{})
},
//取消订单
handleCancelPay(row){
this.$confirm("确认取消清单?").then(() =>{
let old = row.status;
row.status = 1
let ordEndTime = row.endTime
row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
this.axios.post("/order/update",row).then(response => {
if(response.data.code == 0){
this.$message({type:'success',message:"取消订单成功！"})
}else{
this.$message(response.data.msg)
row.status = old
row.endTime = ordEndTime
}
}).catch(() => {error => alert(error)});
}).catch(()=>{})
},
//退货
handleReturnGoods(row){
this.$confirm("确认提交退货申请?").then(() =>{
let old = row.status;
row.status = 5
this.axios.post("/order/update",row).then(response => {
if(response.data.code == 0){
this.$message({type:'success',message:"申请退货成功，请等待商家回应！"})
}else{
this.$message(response.data.msg)
row.status = old
}
}).catch(() => {error => alert(error)});
}).catch(()=>{})
},
//取消退货
handleCancelReturn(row){
this.$confirm("确认取消退货? 确认后订单不能再次退货！").then(() =>{
let oldStatus = row.status;
row.status = 8
let ordEndTime = row.endTime
row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
this.axios.post("/order/update",row).then(response => {
if(response.data.code == 0){
this.$message({type:'success',message:"取消退货成功，该订单已完成！"})
}else{
this.$message(response.data.msg)
row.status = oldStatus
row.endTime = ordEndTime
}
}).catch(() => {error => alert(error)});
}).catch(()=>{})
},
//确认订单
handleConfirm(row){
this.$confirm("确认订单已完成？").then(() =>{
let old = row.status;
row.status = 8
let ordEndTime = row.endTime
row.endTime = this.formatDate(new Date(),'YY-MM-DD hh:mm:ss')
this.axios.post("/order/update",row).then(response => {
if(response.data.code == 0){
this.$message({type:'success',message:"确认成功，该订单已完成！"})
}else{
this.$message(response.data.msg)
row.status = old
row.endTime = ordEndTime
}
}).catch(() => {error => alert(error)});
}).catch(()=>{})
},
//判断订单处于哪一阶段，显示该阶段的操作
determineType(status, operation){
if(operation == "付款"){
if(status == 0) return true
}else if(operation == "取消订单"){
if(status == 0) return true
}else if(operation == "退货"){
if(status == 4 || status == 3) return true
}else if(operation == "取消退货"){
if(status == 5) return true
}else{
if(status == 4 || status == 6 || status == 3) return true
}
return false
},
//格式化时间
// formatDate(new Date().getTime());//2017-05-12 10:05:44
// formatDate(new Date().getTime(),'YY年MM月DD日');//2017年05月12日
// formatDate(new Date().getTime(),'今天是YY/MM/DD hh:mm:ss');//今天是2017/05/12 10:07:45
formatDate(time,format='YY-MM-DD hh:mm:ss'){
var date = new Date(time);
var year = date.getFullYear(),
month = date.getMonth()+1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getMinutes(),
sec = date.getSeconds();
var preArr = Array.apply(null,Array(10)).map(function(elem, index) {
return '0'+index;
});开个长度为10的数组 格式为 00 01 02 03
var newTime = format.replace(/YY/g,year)
.replace(/MM/g,preArr[month]||month)
.replace(/DD/g,preArr[day]||day)
.replace(/hh/g,preArr[hour]||hour)
.replace(/mm/g,preArr[min]||min)
.replace(/ss/g,preArr[sec]||sec);
return newTime;
}
},
filters:{
formatStatus(val){
let value = "";
switch(val) {
case 0:
value = "待支付";
break;
case 1:
value = "已取消";
break;
case 2:
value = "待发货";
break;
case 3:
value = "运输中";
break;
case 4:
value = "已收货";
break;
case 5:
value = "退货审核中";
break;
case 6:
value = "已退货";
break;
case 7:
value = "拒绝退货";
break;
case 8:
value = "已完成";
break;
}
return value;
}
}
}
</script>
<style scoped>
.order{
width: 1030px;
margin: 0 auto;
margin-top: 50px;
}
</style>Based on JAVA SpringBoot and vue snack sales website design