uniapp青檬数码

（一）项目所需要的技术以及环境的搭建

1. uViewUI

官方网站：https://www.uviewui.com

具体引入项目配置过程：https://ext.dcloud.net.cn/plugin?id=1593

2. colorUI（colorui组件是微信小程序组件库，在本项目使用较少，因为有些样式会和uniapp的样式有冲突）

官方网站：https://www.color-ui.com/

具体引入项目配置过程：https://www.cnblogs.com/cth0/p/11564439.html

（二）项目功能分块讲解

1.登录退出模块

启动项目进入到首页：

使用弹框插件：uni-popup

index.vue

//挂载到实例上去之后调用mounted: function() {console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!")uni.getStorage({key: 'token',success: function (res) {console.log("我的token值为"+res.data);token1=res.dataconsole.log("我最新的token"+token1)},fail: function(){console.log("我进来了！！！！")// 显示模态对话框uni.showModal({title: '友情提示',content: '您尚未登录，请您移步至登录界面......',success: function (res) {if (res.confirm) {/* console.log('用户点击确定'); */uni.navigateTo({url: '/pages/login/login'})}else if (res.cancel) {uni.navigateTo({url: '/pages/login/login'})} }});}})             },

注意：VUE生命周期created和mounted的区别？

在created阶段，对浏览器来说，渲染整个HTML文档时,dom节点、css规则树与js文件被解析后， 但是没有进入被浏览器render过程，上述资源是尚未挂载在页面上，也就是在vue生命周期中对应的created 阶段，实例已经被初始化，但是还没有挂载至$el上，所以我们无法获取到对应的节点，但是此时我们是可以获取到vue中data与methods中的数据的在mounted阶段，对浏览器来说，已经完成了dom与css规则树的render，并完成对render tree进行了布局，而浏览器收到这一指令，调用渲染器的paint（）在屏幕上显示，而对于vue来说，在mounted阶段，vue的template成功挂载在$el中，此时一个完整的页面已经能够显示在浏览器中，所以在这个阶段，即可以调用节点了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORPqUUyn-1611241916383)(C…/…/image/login02.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TR1bcqk9-1611241916385)(c…/…/image/login01.png)]

login.vue点击登录获取到token值保存到localstorage

methods: {/* 获取到用户名 */onKeyUserNameInput: function(event) {  console.log(event.target.value  )this.username =event.target.value  },  /* 获取到密码*/onKeyPWInput: function(event){console.log(event.target.value )this.password= event.target.value  },login() {console.log("我进来了");uni.request({url: 'http://localhost:8080/login', //接口地址。method:'POST',header: {"Content-Type": "application/json"  },/*JSON.stringify对象转换为字符串 */data:JSON.stringify({"u_name":this.username,"u_password":this.password}),dataType:'text',success: (res) => {if(res.header.token_name){console.log("登陆验证成功"+res.header.token_name)uni.setStorage({key:'token',data:res.header.token_name});uni.switchTab({url: "/pages/index/index",});}else{// 显示模态对话框uni.showModal({title: '友情提示',content: '账号或密码错误......',success: function (res) {if(res.confirm){/* console.log('用户点击确定'); */uni.navigateTo({url: '/pages/login/login'})}else if (res.cancel){ //用户点击了取消属性的按钮uni.navigateTo({url: '/pages/login/login'})} }})}},error: () => {uni.showModal({title: '友情提示',content: '账号或密码错误......',success: function (res) {if (res.confirm) {/* console.log('用户点击确定'); */uni.navigateTo({url: '/pages/login/login'})}  else if (res.cancel) {uni.navigateTo({url: '/pages/login/login'})} }});}})}}

my.vue中点击退出登录删除token值

exitLogin(){if (this.hasLogin) {  this.logout()  } else {  uni.removeStorage({key:'token',});uni.switchTab({url: "/pages/index/index",});uni.navigateTo({  url: '/pages/login/login'  })    }          }

2.首页模块

index.vue（仅展示主要代码，以下亦如此）

<!-- 新品一 -->
<view class="cateOne"><MyTitle color="#0bbbef">新品</MyTitle><image class="cate1Ad" src="../../static/image/cate1Ad.jpg" mode=""></image><view class="product"><view class="productItem" v-for="(item,index) in product" v-bind:key="index"><view @click="detail(item)"><image :src="item.img[0].showImg"></image><text class="productName">{{item.c_name}}</text><view class="productDetail"><view class="mark">{{item.display}}</view><view class="detailInfo">{{item.c_type}}</view></view><view class="productPrice"><text>￥</text>{{item.price[0].price}}</view></view></view></view>
</view><!-- 热卖二 -->
<view class="cateTwo"><MyTitle color="#0bbbef">热卖</MyTitle><view class="cateRecommend"><view class="cateRecommendItem"><view style="background: #f55c5c;"><text class="title">私人定制<br>为你而声</text></view><image src="http://qmuptyk3l.hnbkt.clouddn.com/AirPods%20%281%29.png"                        mode=""></image></view></view><view class="product2"><view class="productItem" v-for="(item,index) in product2" v-                               bind:key="index"><view @click="detail(item)"><image :src="item.img[0].showImg"></image><text class="productName">{{item.c_name}}</text><view class="productDetail"><view class="mark">{{item.display}}</view><view class="detailInfo">{{item.c_type}}</view></view><view class="productPrice"><text>￥</text>{{item.price[0].price}}</view></view></view></view></view>
<!-- 推荐三 -->
<view class="cateThree"><MyTitle color="#0bbbef">推荐</MyTitle><view class="cateRecommend"><view class="cateRecommendItem"><image src="../../static/image/cateRecommend3.jpg" mode=""></image><view style="background: #7063c9;"><text class="title">遇见青檬<br>快乐无穷</text>    </view></view></view><view class="product3"><view class="productItem" v-for="(item,index) in product3" v-bind:key="index"><view @click="detail(item)"><image :src="item.img[0].showImg"></image><text class="productName">{{item.c_name}}</text><view class="productDetail"><view class="mark">{{item.display}}</view><view class="detailInfo">{{item.c_type}}</view></view><view class="productPrice"><text>￥</text>{{item.price[0].price}}</view></view></view></view>
</view>

3.详情模块

detail.vue

<view><!-- 详情页面商品轮播 --><swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000"             :duration="500" indicator-active-color="#00c3f5"><swiper-item v-for="(item,index) in ComList.img" v-bind:key="index"><view class="swiper-item"><image :src="item.showImg"></image></view></swiper-item></swiper><!-- 商品显示信息，可酌情修改 --><view class="shop-info" ><view class="shop-title"><label>新品</label>{{ComList.c_name}}{{ComList.specification[0].model}}{{ComList.specification[0].color}}</view><view class="shop-price-sale">       <!-- 不选择规格时的默认价格 --><view class="shop-price"><text>￥</text>{{ComList.specification[0].price}}</view><view class="shop-sale">库存:{{ComList.specification[0].repertory}}</view></view><view class="shop-content"><view class="tab"><view class="tabItem" :class="{activeTabItem:current==0}" @click="tab(0)">图文详情</view><view class="tabItem" :class="{activeTabItem:current==1}" @click="tab(1)">规格参数</view></view><!-- 图文详情 --><view class="tabContent" v-show="current==0" v-for="(item,index) in ComList.img" v-bind:key="index"><image :src="item.detailsimg" mode="widthFix"></image></view><!-- 规格参数 --><view class="tabContent" v-show="current==1"><view class="paramBox"></view><view style="height: 30rpx;"></view></view></view><view style="height: 100rpx;"></view><!-- 底部固定栏 --><view class="detail-bottom"><!--  --><view class="navButton"><navigator url="/pages/index/index" open-type="switchTab"><image src="../../static/image/tabbar1.png" mode=""></image>首页</navigator></view><view class="navButton"><navigator url="/pages/cart/cart2" open-type="switchTab"><image src="../../static/image/tabbar3.png" mode=""></image>购物车</navigator></view><!-- <view class="trolley" @click="showShopDialog">加入购物车</view> --><view class="trolley" @tap="AddCart">加入购物车</view><view class="buy" @click="showShopDialog">立即购买</view></view><!-- 服务组件弹窗 --><serviceDialog @close="closeService" class="hidden" :class="{show:serviceFlag}"></serviceDialog><shopDialog @close="closeShopDialog" class="hidden" :class="{show:shopFlag}" @value="value"></shopDialog></view>

4.分类模块

sort.vue

<view class="cate"><!-- <image src="../../static/image/search2.png" mode=""></image> --><MySearch></MySearch><view class="split"></view><view class="cateBox"><scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop"               scroll-with-animation><view class="cate-left-list" v-for="(item,index) in data" :key="index"                         @click="tapselect(index)"><!-- activeItem为选中状态 --><view class="cate-left-item " :class="{activeItem:currentTab==index}"><label></label>                    <text>{{item.navtitle}}</text></view></view></scroll-view><scroll-view class="cate-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'cate-'+mainCur" scroll-with-animation><view v-for="(item,index) in data" :key="index" :id="'cate-'+index"><view class="cate-right-title"><view class="line"></view><text>{{item.navtitle}}</text></view><view class="cate-right-list"><view class="cate-right-item" v-for="(child,childindex) in item.shop" :key="childindex"><image :src="child.shopimage" mode=""></image><text>{{child.shoptitle}}</text></view></view></view><view style="height: 50rpx;"></view></scroll-view></view></view>

5.购物车模块

cart2.vue

<view class="index container"><!-- 商品内容 --><!-- <detriment :detriment="detriment"></detriment> --><view class="detriment display-flex justify-between flex-wrap width-100 flex-row"  v-for="(item,index) in detriment" v-bind:key="index" ><view class="productItem display-flex width-100"><!-- 单选 --><checkbox-group class="check" @change="changeitem(item)"><checkbox color="#0081FF" value="item" :checked="item.flag">                   </checkbox></checkbox-group><!-- 左侧图片 --><view class="left"><image :src="item.showimg" mode="aspectFit"></image></view><!-- 右侧商品介绍 --><view class="message display-flex flex-column justify-between"><!-- 商品名称 --><view class="bigTitle font-bold font-max">{{item.c_name}}</view><!-- 商品价格 --><view class="price display-flex align-end"><view class="current display-flex text-primary-color font-maxx"                                :class="isCurrentBold?'font-bold':''"><view class="text-primary-color font-mini">￥{{item.price}} </view></view></view><!-- <orginPrice :currentPrice="item.price"></orginPrice> --><!-- 限购10件 --><view class="littleTitle font-middle text-else-color">{{item.model}}{{item.color}}</view><view class="shoppingNumber display-flex justify-between"><label class="minute" @click="btn_minute(item)">-</label><input class="input"  v-model="item.c_number" /><label class="add" @click="btn_add(item)">+</label></view></view><!-- 删除商品按钮 --><view class="deletebtn" @click="del(item,index)"><u-icon name="trash" size="50" top="80rpx"></u-icon></view></view></view><!-- 底部--><view class="btn display-flex justify-between width-100" v-for="(item,index) in detriment" v-bind:key="index"><!-- 全选按钮 --><view><checkbox-group class="allBtn" @change="allchange"><checkbox color="#0081FF" value="cg"  :checked="allchecked" />全选/取消</checkbox-group></view><!-- 总价 --><view class="amount"><text>数量:</text>{{item.c_number}}</view><view class="Settlement-btn display-flex"><span class="display-flex"><button class="jsbtn" @click="jiesuan(item)"><view class="display-flex gross" style="font-size: 12px;">结算:<view class="text-primary-color font-mini">￥</view><view style="color:#e45700; font-size: 16px;">{{allprice}}                            </view></view></button></span></view></view></view>

6.生成订单模块

buy.vue

<view><navigator url="../address/index?type=1"><!-- <myAddress></myAddress> --><view class="buy-address"><view class="buy-address-content"><view class="buy-address-item addressicon"><i class="iconfont"></i></view><view class="buy-address-txt"><view class="user">收货人:{{AddressList.sh_name}}{{AddressList.phone}}</view><view class="address">{{AddressList.city}}{{AddressList.country}}{{AddressList.details}}</view></view><view class="buy-address-item moreicon"><i class="iconfont"></i></view></view></view></navigator><view class="order-list"><view class="itemlist" v-for="(item,index) in itemlist" v-bind:key="index"><view class="buy-shop-info"><image :src="item.showimg" mode="aspectFit"></image><view class="shop-info-text"><view class="shop-title">{{item.c_name}}</view><view class="shop-attr">{{item.model}}{{item.color}}</view><view class="shop-price-num"><text class="price">￥{{item.price}} </text><text class="num">×{{item.c_number}}</text></view></view></view></view><!-- <shopItem></shopItem> --></view><view class="buy-shop-list" style="padding:20rpx 0;"><view class="buy-shop-item"><view class="shop-item-left">配送方式</view><view class="shop-item-right"><picker @change="bindPickerChange" :value="index" :range="array"><view class="uni-input">{{array[index]}}</view></picker><i class="iconfont"></i></view></view><view class="buy-shop-item"><input type="text" value="" placeholder="请留言" /></view><!-- v-for="(item,index) in itemlist" v-bind:key="index" --><view class="buy-shop-item"><view class="shop-item-left">总计</view><view class="shop-item-right">共{{itemlist.c_number}}件商品 合计:￥{{AllPrice}}</view></view></view><view class="buy-shop-type"><view class="buy-shop-item"><view class="shop-item-left"><i class="iconfont" style="color:#10cf1c"></i>微信支付</view><view class="shop-item-right" @click="changeRadio(0)"><radio :checked="pay==0" color="#00C3F5" /></view></view><view class="buy-shop-item"><view class="shop-item-left"><i class="iconfont" style="color:#039fe8"></i>支付宝支付</view><view class="shop-item-right" @click="changeRadio(1)"><radio :checked="pay==1" color="#00C3F5" /></view></view></view><view style="height: 120rpx;"></view><view class="buy-shop-bottom"><view class="buy-shop-box"><view class="buyTxt">总计:{{AllPrice}}元</view><view class="buyBtn" @click="payBtn">立即购买</view></view></view></view>

7.地址模块

address/index.vue

 <view class="address-list whiteBg"><!-- url="../buy/buy?address=5" v-if="type==1" --><navigator><view class="address-item"><view class="address-radio"><radio value="" color="#00C3F5" /></view><!-- v-for="(item2,index) in AddressList" v-bind:key="index" --><view class="address-box"><view class="address-user">{{AddressList.sh_name}}{{AddressList.phone}}</view><view class="address-info">{{AddressList.city}}{{AddressList.country}}{{AddressList.details}}</view></view><view class="address-edit"><i class="iconfont"></i></view></view></navigator><!-- <navigator url="add" v-else><view class="address-item"><view class="address-radio"><radio value="" color="#00C3F5" /></view><view class="address-box"><view class="address-user"></view><view class="address-info"></view></view><view class="address-edit"><i class="iconfont"></i></view></view></navigator> --><view style="height: 90rpx;"></view><view class="add-address"><navigator url="add">添加新地址</navigator></view></view>

8.订单模块

order.vue

<view class="OrderList"><!-- 订单状态分类 --><view class="order-tab"><view class="order-item active-order">全部订单</view><view class="order-item">待付款</view><view class="order-item">待收货</view><view class="order-item">待评价</view></view><!-- 订单列表 --><view class="order-list" v-for="(item,index) in OrderList" v-bind:key="index"><!-- <navigator :url="item.url"> --><view class="order-title"><view class="order-title-time">{{item.by_time}}</view><view class="order-title-status"><!-- {{item.o_status}} -->已付款</view></view><!-- 调用shopItem组件 --><!-- <shopItem class="borderTop"></shopItem> --><view class="itemlist"><view class="buy-shop-info"><image :src="item.commodity.img.detailsimg" mode="widthFix"></image><view class="shop-info-text"><view class="shop-title">{{item.commodity.c_name}}</view><view class="shop-attr">{{item.commodity.specification.model}}{{item.commodity.specification.color}}</view><view class="shop-price-num"><text class="price">￥{{item.commodity.specification.price}}</text><text class="num">×4{{item.num}}</text></view></view></view></view><view class="order-total">共{{item.num}}件商品&nbsp;&nbsp;&nbsp;合计：<text>¥{{item.commodity.specification.price}}</text></view></view></view>

9.个人中心模块

my.vue

<view class="whiteBg"><!-- 头部 --><view class="member-top"><view class="member-tx"><image src="../../static/img/user/default-head.png" mode=""></image><view class="member-tx-txt"><text style="color: #00C3F5;">张三</text></view></view></view><!-- 订单状态(可参考首页或者购物车使用v-for进行遍历) --><view class="member-icon"><view class="icon-item"><navigator url="../order/order"><image src="../../static/img/user/status-01.png" mode=""></image><text>全部订单</text></navigator></view><view class="icon-item"><navigator url="../order/order"><image src="../../static/img/user/status-02.png" mode=""></image><text>待付款</text></navigator></view><view class="icon-item"><navigator url="../order/order"><image src="../../static/img/user/status-03.png" mode=""></image><text>待收货</text></navigator></view><view class="icon-item"><navigator url="../order/order"><image src="../../static/img/user/status-04.png" mode=""></image><text>待评价</text></navigator></view></view><!-- 用户菜单管理 --><view class="member-menu"><!-- navigator实现页面的跳转 --><navigator url="/pages/address/address"><view class="menu-item" style="border:none"><image src="../../static/img/user/icon-address.png" mode=""></image><text>收货地址</text></view></navigator><view class="menu-item"><image src="../../static/img/user/icon-kefu.png" mode=""></image><text>在线客服</text></view><view class="menu-item"><image src="../../static/img/user/class-02.png" mode=""></image><text>邀请有礼</text></view><view class="menu-item"><image src="../../static/img/user/icon-help.png" mode=""></image><text>关于我们</text></view></view><button style="width: 290rpx;height:100rpx;line-height: 100rpx;font-size: 30rpx;"@click="exitLogin">退出登录</button><view style="height: 80px;"></view></view>

基于ssm的青檬数码商城项目uniapp模块（一）相关推荐

基于SSM或SpringBoot的JavaWeb项目——写作分析系统
Tips: 技术栈已经升级为SpringBoot,代码链接为:Gitee或Github 一.系统简介: 围绕一英文写作分析API开发的一个web应用,基于SSM(Spring,SprintMVC,My ...
基于SSM架构的医院管理系统项目简介
想要获取本项目资料的童鞋,请仔细看本文结尾处,加"Java架构栈"--->回复 "医院管理系统" 获取!!! 1. 项目介绍又是一年毕业季, 毕设项目一 ...
java项目管理系统_基于SSM框架的JAVA科研项目管理系统
每天记录学习,每天会有好心情.*^_^* 今天记录的项目是科研项目管理系统论文,这个项目是这么回事:随着计算机应用水平的提高和科研管理的规范化和制度化,建立一套适用于科研院所科研管理工作的科研项目管理 ...
基于ssm的水果商城系统项目总结
SSM水果商城项目介绍因为我先学过了ssm的基础知识,所以找了个ssm项目来练练手,加深对框架的理解. 由于我也是手敲所以暂时没有感觉到与javaweb比优势在哪,但是了解过之后,框架之所以是框架 ...
基于ssm小说阅读安卓APP项目
一.项目简述功能包括(管理员和游客角色): 1:用户及主要操作功能游客可以浏览网站的主页,但是需要注册为会员后部分小说才能对网络小说进免费行阅读或阅读.用户可以收藏书架,留言评论,上次阅读,阅 ...
基于SSM+SpringBoot《校园二手交易平台项目》实战开发教程(附论文及源码)-毕业设计
文章目录 1.项目简介 2.技术选型 3.项目资料 4.项目部分截图 1.项目简介毕业设计基于SSM+SpringBoot校园二手交易平台项目源码在课程附件中进行下载,地址:https://dow ...
计算机毕业设计系列基于SSM的养老保险管理系统
目录一.项目介绍二.开题报告三.项目截图四.源码获取一.项目介绍计算机毕业设计系列基于SSM的养老保险管理系统本项目是一款基于SSM的养老保险管理系统,主要针对计算机相关专业的正在做毕设 ...
网上零食商城基于SSM
基于ssm的网上零食商场项目开发语言:Java语言,jdk8或者以上项目开发工具:eclipse等项目开发技术:前台页面采用bootstrap+jquery等技术,后台采用ssm框架服务器软件 ...
[附源码]计算机毕业设计JAVA基于SSM高考志愿填报系统
[附源码]计算机毕业设计JAVA基于SSM高考志愿填报系统项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe ...

基于ssm的青檬数码商城项目uniapp模块（一）