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.data
console.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}}件商品
合计：
<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>
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
