Summary
In recent years, with the continuous improvement of my country's network infrastructure and the continuous development of information technology, third-party payment methods have been widely popularized, and online shopping has become an important part of people's lives. The online shopping mall system based on PC platform can be sufficient You can enjoy shopping at home.
The mobile phone-based online shopping WeChat applet takes advantage of the portability of smart terminals to allow the public to buy their favorite products anytime and anywhere. The community-oriented shopping model originates from the concept of O2O, which combines offline commodity transactions with the Internet and makes the Internet an online shopping experience. trading platform. The system is based on the Internet, takes the surroundings of the living circle as the basic unit, and makes full use of the information infrastructure of the community. The new e-commerce model that combines small physical stores and online stores around the living circle is a new breakthrough in traditional e-commerce. Its online focus is on the convenience needs of consumers, more on satisfying the interactive marketing of members and the influx of physical stores, and its offline focus is more on providing users with better and more convenient modern intelligent shopping experience services. Therefore, developing a store system based on these WeChat widgets has become a necessity, and for computer science graduates, applying computers in practical information management is also a meaningful practical activity.
The core of the development of new retail is to meet the needs of customers in specific shopping scenarios. With the development of mobile Internet and the development trend of customers’ informatization and technology, the shopping method of fast buying and fast delivery is more and more favored by users. He said that providing convenient and fast online shopping channels for physical stores is an important way to enhance customer experience and improve retail efficiency. Foreign retailers generally provide online and offline community shopping services. Judging from the current mainstream online shopping systems, there are mainly PC-based shopping systems, APP shopping systems and shopping portals relying on third-party applications. In early 2017, the official launch of WeChat mini-programs further activated the WeChat ecosystem. Compared with native applications, the biggest feature of WeChat mini-programs is that users do not need to download and install them, and can obtain them by scanning or searching. The lightweight applet platform can better connect offline services.
The functions realized by the whole project
The three roles are administrators, merchants, and buyers, all of which are small programs. Login with WeChat authorization.
Ordinary users: 1. Browse product information, view categories 2. Browse recommended product information (recommended based on sales volume) 3. Add shopping cart and checkout orders 4. View personal order details and evaluate orders 5. Apply to become a merchant 6. Modify receipts Cargo address and other functions;
Merchants: 1. Manage all product information, you can upload products 2. Manage all order information, deliver goods, etc.;
Administrator: Manage product categories, review products, etc.
technology used
Framework used: backend SpringBoot framework, java language. Front-end UniApp framework, Vue.js syntax.
Database used: MySql5.7 or 8
Part of the code display
<template>
<view class="content">
<view class="navbar">
<view
v-for="(item, index) in navList" :key="index"
class="nav-item"
:class="{current: tabCurrentIndex === index}"
@click="tabClick(index)"
>
{
{item.text}}
</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
<scroll-view
class="list-scroll-content"
scroll-y
@scrolltolower="loadData"
>
<!-- 空白页 -->
<empty v-if=" tabItem.orderList.length === 0"></empty>
<!-- 订单列表 -->
<view
v-for="(item,index) in tabItem.orderList" :key="index"
class="order-item"
>
<view class="i-top b-b">
<text class="time">{
{item.createTime}}</text>
<text class="state" :style="{color: item.stateTipColor}">{
{getStat(item.stat)}}</text>
<text
v-if="item.state===9"
class="del-btn yticon icon-iconfontshanchu1"
@click="deleteOrder(index)"
></text>
</view>
<scroll-view v-if="item.goods.length > 1" class="goods-box" scroll-x>
<view
v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex"
class="goods-item"
>
<image class="goods-img" :src="picUrl + goodsItem.pic1" mode="aspectFill"></image>
</view>
</scroll-view>
<view
v-if="item.goods.length === 1"
class="goods-box-single"
v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex"
>
<image class="goods-img" :src="picUrl + goodsItem.pic1" mode="aspectFill"></image>
<view class="right">
<text class="title clamp">{
{goodsItem.title}}</text>
<text class="attr-box">{
{goodsItem.name}} x {
{goodsItem.num}}</text>
<text class="price">{
{goodsItem.price}}</text>
</view>
</view>
<view class="price-box">
共
<text class="num">{
{item.goods.length}}</text>
件商品 实付款
<text class="price">{
{item.priceAll}}</text>
</view>
<view class="action-box b-t" v-if="item.stat == 3">
<!-- <button class="action-btn" @click="cancelOrder(item)">取消订单</button> -->
<button class="action-btn recom" @click="getComment(item)">立即评价</button>
</view>
<view class="action-box b-t" v-if="item.stat == 2&&user.uid == item.userFk">
<button class="action-btn recom" @click="changeOrder(item.id,3)">收货</button>
</view>
<view class="action-box b-t" v-if="item.stat == 1&&user.type == 2">
<button class="action-btn recom" @click="changeOrder(item.id,2)">发货</button>
</view>
<view class="action-box b-t" v-if="item.stat == 4">
<text class="u-tips-color">已完成</text>
</view>
</view>
<uni-load-more :status="tabItem.loadingType"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
<u-modal v-model="show" title="评论" @confirm="commentSub">
<view class="slot-content">
<view class="u-flex u-p-20 u-border-bottom" v-if="selItem.length > 0" v-for="(item ,index) in selItem">
<image style="width: 100rpx;height:100rpx;" :src="picUrl+item.pic1"></image>
<u-input class="u-m-20 u-m-l-30" type="text" placeholder="请输入评论" v-model="item.memo" placeholderStyle="textAlign:center"/>
</view>
</view>
</u-modal>
</view>
</template> WeChat mall applet based on SpringBoot and UniAPP