Skip to content

U
user
Commit 465520c3 by zhangcheng
Options

调整购物车

parent 7b2e7c08
Showing with 809 additions and 170 deletions
components/shopCar/shopCar.vue
<template> <template>
<u-popup :show="false" mode="bottom" :round="10" :overlay="true" :safeAreaInsetBottom="true" @close="showShopCar=false"> <view>
<u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true" :closeOnClickOverlay="true">
<view class="shop-car"> <view class="shop-car">
<view class="header"> <view class="header">
<text class="left">购物袋</text> <text class="left">购物袋</text>
<text class="right" @click="clearCar"><u-icon name="trash" color="#2979ff" size="28"></u-icon>清空购物车</text> <text class="right" @click="clearCar">清空购物车</text>
</view> </view>
<view class="container"> <view class="container">
<view> <view>
...@@ -21,22 +22,28 @@ ...@@ -21,22 +22,28 @@
<u-checkbox shape="circle" class="selected" color="#555555" :checked="item.flag"/><text></text> <u-checkbox shape="circle" class="selected" color="#555555" :checked="item.flag"/><text></text>
</label> </label>
</u-checkbox-group> </u-checkbox-group>
<image :src="item.thumbnail" style="width: 150rpx;height: 140rpx;"></image> <image :src="item.pics.thumbnailApplet || item.pics.thumbnail" style="width: 150rpx;height: 140rpx;"></image>
</view> </view>
<view class="size"> <view class="size">
<text style="font-size: 28rpx;color: #000000;">{{item.name}}</text> <text style="font-size: 28rpx;color: #000000;">{{item.name}}</text>
<text style="font-size:20rpx;color:#666666"><text v-for="(rl,index) in item.rules" :key="rl.ruleName">{{rl.ruleName}}<text v-if="index!=item.rules.length-1">/</text></text></text> <text style="font-size:20rpx;color:#666666"><text v-for="(rl,index) in item.skus[0].rules" :key="rl.ruleName">{{rl.ruleName}}<text v-if="index!=item.skus.rules.length-1">/</text></text></text>
<text><text class="goods-price">￥{{item.discount}}</text> ￥<text style="color: #666666; font-size:20rpx;text-decoration:line-through; margin-left:10rpx">{{item.price}}</text></text> <text><text class="goods-price">￥{{item.discount}}</text><text class="price-x">￥</text><text class="price-xx">{{item.price}}</text></text>
</view> </view>
</view> </view>
<view class="detail-right"> <view class="detail-right">
<text class="subtract" @click="reduce(item)">-</text> <text class="subtract" @click="reduce(item,index)">-</text>
<text class="num">{{item.num}}</text> <text class="num">{{item.num}}</text>
<text @click="add(item)" class="add">+</text> <text @click="add(item)" class="add">+</text>
</view> </view>
</view> </view>
</view> </view>
<view class="end"> </view>
</view>
<view style="height:200rpx"></view>
</view>
</u-popup>
<view class="end" v-if="goods.length">
<view class="end-left"> <view class="end-left">
<!-- <checkbox-group @change="selectgoods()"> <!-- <checkbox-group @change="selectgoods()">
<label> <label>
...@@ -44,8 +51,10 @@ ...@@ -44,8 +51,10 @@
</label> </label>
</checkbox-group> --> </checkbox-group> -->
<view style="display:flex"> <view style="display:flex">
<text class="car-img"></text> <view class="car-img" @click.stop="openShopCar">
<text style="color:#000000;font-weight: bold;display: flex; align-items: center;">￥ {{totalPrice.toFixed(2)}}</text> <text class="badge" v-if="totalNum">{{totalNum}}</text>
</view>
<text style="color:#000000;font-weight: bold;font-size: 28rpx;display: flex; margin-left: 30rpx; align-items: center;">￥{{totalPrice.toFixed(2)}}</text>
</view> </view>
</view> </view>
<view class="end-right"> <view class="end-right">
...@@ -56,11 +65,6 @@ ...@@ -56,11 +65,6 @@
</view> </view>
</view> </view>
</view>
<view style="height:200rpx"></view>
</view>
</u-popup>
</template> </template>
<script> <script>
...@@ -76,6 +80,7 @@ ...@@ -76,6 +80,7 @@
} }
}, },
created() { created() {
$EventBus.$off('updateCar');
// this.getallNum(); // this.getallNum();
}, },
mounted() { mounted() {
...@@ -126,6 +131,13 @@ ...@@ -126,6 +131,13 @@
// uni.setStorageSync('shopCarInfo',shopCarInfo) // uni.setStorageSync('shopCarInfo',shopCarInfo)
// this.goods=uni.getStorageSync('shopCarInfo'); // this.goods=uni.getStorageSync('shopCarInfo');
// }, // },
// 切换购物车列表显示隐藏
openShopCar() {
this.$nextTick(()=>{
this.showShopCar = !this.showShopCar;
})
},
clearCar() { clearCar() {
uni.removeStorageSync('shopCarInfo'); uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar'); $EventBus.$emit('updateCar');
...@@ -167,17 +179,11 @@ ...@@ -167,17 +179,11 @@
} }
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo',this.goods);
}, },
reduce(item){ reduce(item,index){
let num=item.num item.num-=1
if(num>1){ if(item.num==0){
num-=1 this.goods.splice(index,1);
}else if(num=1){
uni.showToast({
title:"该宝贝不能减少了哟~"
})
return;
} }
item.num=num
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo',this.goods);
}, },
add(item){ add(item){
...@@ -211,23 +217,31 @@ ...@@ -211,23 +217,31 @@
.shop-car { .shop-car {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 40vh; height: 860rpx;
.header{ .header{
height: 100rpx; height: 88rpx;
display: flex; display: flex;
border-bottom:1rpx solid #ccc; border-bottom:1rpx solid rgb(235,235,235);
.left{ .left{
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 40rpx; padding-left: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
} }
.right{ .right{
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: right; justify-content: flex-end;
padding-right: 40rpx; padding-right: 40rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
} }
} }
.container{ .container{
...@@ -243,7 +257,6 @@ ...@@ -243,7 +257,6 @@
padding: 30rpx 15rpx 30rpx 30rpx; padding: 30rpx 15rpx 30rpx 30rpx;
background-color: #fff; background-color: #fff;
justify-content: space-between; justify-content: space-between;
border-bottom: 5rpx solid #F1F1F1;
align-items: center; align-items: center;
.detail-left{ .detail-left{
display: flex; display: flex;
...@@ -259,8 +272,20 @@ ...@@ -259,8 +272,20 @@
margin-left: 30rpx; margin-left: 30rpx;
.goods-price{ .goods-price{
font-size: 24rpx; font-size: 24rpx;
color: #F44545; font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FF5200;
}
.price-x{
margin-left:6rpx;
font-size:20rpx;
font-family: ArialMT;
line-height: 22rpx;
color: #666666;
}
.price-xx{
font-size:20rpx;
text-decoration:line-through;
} }
} }
.detail-right{ .detail-right{
...@@ -281,7 +306,7 @@ ...@@ -281,7 +306,7 @@
.subtract{ .subtract{
border:1rpx solid #006ECF; border:1rpx solid #006ECF;
border-radius: 40rpx; border-radius: 40rpx;
color:red; color:#006ECF;
} }
} }
} }
...@@ -310,12 +335,13 @@ ...@@ -310,12 +335,13 @@
} }
.end{ .end{
width: 100%; width: 100%;
height: 90rpx; height: 92rpx;
background-color:#fff; background-color:#fff;
position: fixed; position: fixed;
bottom: 100rpx; bottom: 50px;
left: 0; left: 0;
display: flex; display: flex;
z-index: 10075;
align-items: center; align-items: center;
&-left{ &-left{
width: 70%; width: 70%;
...@@ -330,7 +356,26 @@ ...@@ -330,7 +356,26 @@
width:40rpx; width:40rpx;
height: 48rpx; height: 48rpx;
display: inline-block; display: inline-block;
border:1px solid #006ECF;
position: relative;
.badge{
position: absolute;
height: 24rpx;
background: #006ECF; background: #006ECF;
right:-16rpx;
top: -12rpx;
min-width: 24rpx;
font-size: 16rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #FFFFFF;
line-height: 18rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
} }
} }
&-right{ &-right{
......
components/tabBar/tabBar.vue
<template> <template>
<!-- Tab --> <!-- Tab -->
<u-tabbar zIndex="10075" v-model="selectedTabbar" :border="false" inactive-color="#000000" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch"> <u-tabbar zIndex="10075" v-model="selectedTabbar" :border="false" inactive-color="#000000" height="50" active-color="#006ECF" :fixed="true" :safeAreaInsetBottom="true" @change="beforeSwitch">
<u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item> <u-tabbar-item v-for="(item,index) in list" :key="item.text" :text="item.text" :icon="selectedTabbar==index?item.activeIcon:item.icon"></u-tabbar-item>
</u-tabbar> </u-tabbar>
</template> </template>
......
menuSubPackage/pages/areaSelect/areaSelect.vue 0 → 100644
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
pages.json
...@@ -50,6 +50,15 @@ ...@@ -50,6 +50,15 @@
} }
} }
,{
"path" : "areaSelect/areaSelect",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
] ]
}, },
{ {
......
pages/menu/menu.vue
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<view class="menu-banner"> <view class="menu-banner">
<image src="../../static/imgs/banner.png"></image> <image src="../../static/imgs/banner.png"></image>
<view class="shop-info" :style="{top: `${menuINfo.top}px`}"> <view class="shop-info" :style="{top: `${menuINfo.top}px`}">
<view class="shop-box" :style="{height: `${menuINfo.height}px`,'line-height': `${menuINfo.height}px`}" @click="getLocation"> <view class="shop-box" :style="{height: `${menuINfo.height}px`,'line-height': `${menuINfo.height}px`}">
<text class="shop-name">北京国贸银泰中心店</text> <text class="shop-name">{{shopInfo.name}}</text>
<u-icon name="arrow-right" class="arrow-right-select" color="#FFFFFF"></u-icon> <u-icon name="arrow-right" class="arrow-right-select" color="#FFFFFF"></u-icon>
</view> </view>
<view class="distance">距您130m</view> <view class="distance">距您130m</view>
...@@ -13,14 +13,15 @@ ...@@ -13,14 +13,15 @@
<view class="login-area"> <view class="login-area">
<view class="avatar"><image :src="'../../static/logo.png'"></image></view> <view class="avatar"><image :src="'../../static/logo.png'"></image></view>
<view class="user-info"> <view class="user-info">
<view class="user-name" v-if="userms">HI！{{userms.nickName}}</view> <view class="user-name" v-if="userms">HI！{{'我是谁'}}</view>
<view class="user-name" v-else>未登录</view> <view class="user-name" v-else>未登录</view>
<view class="dialog"> <view class="dialog">
<view class="content" v-if="userms">希望你今天，明天，天天都开心~</view> <view class="content" v-if="userms">希望你今天，明天，天天都开心~</view>
<view class="content" v-if="!userms">请您尽快登录</view> <view class="content" v-if="!userms">请您尽快登录</view>
</view> </view>
</view> </view>
<view class="login-btn" v-if="!userms" @click="uniGetUserInfo">立刻登录</view> <!-- <view class="login-btn" v-if="!userms" @click="uniGetUserInfo">立刻登录</view> -->
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button>
</view> </view>
</view> </view>
<view class="order-banner" v-if="buied"> <view class="order-banner" v-if="buied">
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
</view> </view>
<view class="dis-box"> <view class="dis-box">
<view class="dis">{{item.desc}}</view> <view class="dis">{{item.desc}}</view>
<view class="add-btn" @click="getallNum(item)">+</view> <view class="add-btn" @click.stop="getallNum(item)">+</view>
</view> </view>
<view class="mon"> <view class="mon">
<view class="discount">￥{{item.discount}}</view> <view class="discount">￥{{item.discount}}</view>
...@@ -83,9 +84,11 @@ import User from '@/request/user' ...@@ -83,9 +84,11 @@ import User from '@/request/user'
import ShopCar from '../../components/shopCar/shopCar.vue' import ShopCar from '../../components/shopCar/shopCar.vue'
import Utils from '@/utils/utils' import Utils from '@/utils/utils'
import Menu from '@/request/menu' import Menu from '@/request/menu'
import { $EventBus } from '@/utils/EventBus';
export default { export default {
data() { data() {
return { return {
shopInfo:{name:'请选择'},// 店铺信息
menuINfo:{}, menuINfo:{},
buied: true, buied: true,
orderBannerh: 0, orderBannerh: 0,
...@@ -107,11 +110,12 @@ import Menu from '@/request/menu' ...@@ -107,11 +110,12 @@ import Menu from '@/request/menu'
}, },
computed: { computed: {
userms() { userms() {
let res = uni.getStorageSync("userInfo").userInfo; let res = uni.getStorageSync("Authorization");
return res; return res;
} }
}, },
created() { created() {
this.getLocation();
this.menuINfo = uni.getMenuButtonBoundingClientRect(); this.menuINfo = uni.getMenuButtonBoundingClientRect();
console.log(this.menuINfo,77766) console.log(this.menuINfo,77766)
//如果你的分类数据为后台异步获取请 将下方代码放置你的数据回调中 //如果你的分类数据为后台异步获取请 将下方代码放置你的数据回调中
...@@ -122,7 +126,7 @@ import Menu from '@/request/menu' ...@@ -122,7 +126,7 @@ import Menu from '@/request/menu'
async onShow() { async onShow() {
console.log(1243) console.log(1243)
// 获取首页菜单数据 // 获取首页菜单数据
await this.getMenuList(); await this.getMenuList(6);
let _this = this; let _this = this;
uni.createSelectorQuery() uni.createSelectorQuery()
.select(".menu-banner") .select(".menu-banner")
...@@ -142,7 +146,13 @@ import Menu from '@/request/menu' ...@@ -142,7 +146,13 @@ import Menu from '@/request/menu'
} }
this.getHeightList(); this.getHeightList();
}, },
onLoad: function () { onLoad: async function () {
$EventBus.$off('getMenuList')
$EventBus.$on('getMenuList',(data)=>{
this.shopInfo=data;
console.log(data,554433)
this.getMenuList(data.id)
})
}, },
onReady() { onReady() {
...@@ -153,19 +163,69 @@ import Menu from '@/request/menu' ...@@ -153,19 +163,69 @@ import Menu from '@/request/menu'
uniGetUserInfo() { uniGetUserInfo() {
User.uniGetUserInfo(); User.uniGetUserInfo();
}, },
getPhoneNumber(e) {
// uni.exitMiniProgram({success: (res) => {}})
if(e.detail.errMsg=='getPhoneNumber:ok'){
User.getPhoneNumber(e);
}else if( e.detail.errMsg=="getPhoneNumber:fail user deny"){
uni.showToast({title:'已拒绝手机号授权',icon:'error'})
}
// console.log(e,333)
},
getLocation() { getLocation() {
let _this = this;
uni.getSetting({
success: (res) => {
if (!res.authSetting['scope.userLocation']) {
uni.authorize({ uni.authorize({
scope:'scope.userLocation', scope: 'scope.userLocation',
success: (e) => { //1.1 允许授权
console.log(e,11111)
User.getLocation();
},
fail:(err)=> { //1.2 拒绝授权
console.log(err,'拒绝')
uni.showModal({
title:'提示',
content:'您已拒绝授权定位,请重新开启',
confirmText:'去开启',
success() {
uni.openSetting({
success(res) { success(res) {
console.log(res) console.log(res,8877)
if(res.authSetting['scope.userLocation']==true){
User.getLocation(); User.getLocation();
} }
// 如果不设置，res结果：
// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: false}}
// 如果设置, res结果：
// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: true}}
// console.log('小程序设置界面：', res)
}})
}
})
}
})
} else {
User.getLocation();
}
}
}) })
}, },
async getMenuList() { async getMenuList(id) {
let res = await Menu.getMenuList(); let res = await Menu.getMenuList(id);
if(res.data.code ==200){ if(res.data.code ==200){
res.data.data = JSON.parse(JSON.stringify(res.data.data)); res.data.data.categorys.forEach(y=>{
y.goods.forEach(v=>{
v.specs=JSON.parse(v.specs);
v.skus.forEach(u=>{u.rules=JSON.parse(u.rules)})
})
})
res.data.data = res.data.data;
console.log(res.data.data,87654567) console.log(res.data.data,87654567)
this.$store.commit('setMenuAllInfo',res.data.data); this.$store.commit('setMenuAllInfo',res.data.data);
this.classifyData = res.data.data.categorys; this.classifyData = res.data.data.categorys;
...@@ -173,21 +233,32 @@ import Menu from '@/request/menu' ...@@ -173,21 +233,32 @@ import Menu from '@/request/menu'
}, },
// 加入购物车数据 // 加入购物车数据
getallNum(item) { getallNum(item) {
let itemCopy = JSON.parse(JSON.stringify(item));
console.log(this.classifyData,998877) console.log(this.classifyData,998877)
console.log(item,333) itemCopy.skus = [itemCopy.skus.find(v=>v.state!=2)];
let reItem =[ if(!itemCopy.skus){
{ uni.showToast({title:'本商品已经售罄',icon:'none'});
goodsId: item.goodsId, return;
name: item.name, }else{
price: item.price,
discount: item.discount, itemCopy.num=1;
flag:true, itemCopy.flag=true;
thumbnail:'https://img2.baidu.com/it/u=1001625387,3275765924&fm=26&fmt=auto&gp=0.jpg', console.log(itemCopy,'mmmmmmm')
num:1, Utils.getallNum(itemCopy);
rules:item.skus[0].rules }
} // let reItem =[
] // {
Utils.getallNum(reItem); // goodsId: item.goodsId,
// name: item.name,
// price: item.price,
// discount: item.discount,
// flag:true,
// thumbnail:'https://img2.baidu.com/it/u=1001625387,3275765924&fm=26&fmt=auto&gp=0.jpg',
// num:1,
// rules:JSON.parse(item.skus[0].rules)//这里还要查看是否售罄,如果售罄则取下一个临近的sku
// }
// ]
}, },
getHeightList() { getHeightList() {
let _this = this; let _this = this;
...@@ -354,7 +425,7 @@ import Menu from '@/request/menu' ...@@ -354,7 +425,7 @@ import Menu from '@/request/menu'
} }
} }
.login-btn{ .login-btn{
width: 114rpx; // width: 114rpx;
height: 48rpx; height: 48rpx;
background: #006ECF; background: #006ECF;
border-radius: 4rpx; border-radius: 4rpx;
......
pages/menu/menu1.vue 0 → 100644
<template>
<view>
<!-- 单向联动菜单 -->
<view class="scroll-box" :style="{ 'height': scrollHeight +'px' }">
<!-- 左边栏 -->
<view class="left-tab">
<scroll-view class="tab" scroll-y="true" scroll-with-animation >
<block v-for="(item,index) in tabData" :key="index" >
<!-- 标签动态样式 -->
<view class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] " @click="clickTab"
:data-current="index" :data-title="[item.title]" >
{{item.title}}
</view>
</block>
</scroll-view>
</view>
<!-- 右边页面 -->
<scroll-view class="right-box" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" >
<view class="page-view">
<view class="class-item">
<view class="item-title">
<text>{{goodsTitle}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item, index) in menuData" :key="index">
<view class="left-image">
<image class="item-menu-image" :src="item.imgUrl" mode=""></image>
</view>
<view class="right-text">
<view class="item-menu-name">{{item.name}}</view>
<view class="item-menu-explain">{{item.explain}}</view>
<view class="item-menu-ps">
<view class="item-menu-price">¥{{item.price}}</view>
<!-- Animate动画库使用 https://blog.csdn.net/qq_40976321/article/details/107379659 -->
<view class="item-menu-select" hover-class="animated rotateOut" @click="addCar" :data-item="[item]">加购</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 底部购物车 -->
<view class="car" v-if="isShowCar">
<view class="car-left">
<view class="car-pice">¥{{totalPrice}}</view>
</view>
<view class="car-right">
<view class="car-text">选好了</view>
</view>
</view>
<!-- 凸起图标 -->
<view class="car-img-back" v-if="isShowCar" @click="clickCar">
<image class="car-img" src="../../../static/icon/png/bag.png" mode=""></image>
<!-- 角标 -->
<view class="car-num">
<text class="car-num-text">{{totalNum}}</text>
</view>
</view>
<!-- 购物车列表 -->
<view class="car-list" v-if="isShowList">
<scroll-view scroll-y="true" style="height: 500rpx;">
<view class="car-box" v-for="(item, index) in carData" :key="index">
<view class="car-left-image" style="width: 23%;">
<image class="car-menu-image" :src="item.imgUrl" mode=""></image>
</view>
<view class="car-right-text" style="width: 73%;">
<view class="car-menu-name">{{item.name}}</view>
<view class="car-menu-explain">{{item.explain}}</view>
<view class="car-menu-ps">
<view class="car-menu-price" >¥{{item.price}}</view>
<view class="car-num-select" >
<view @click="clickMinus(index)">
<image style="width: 48rpx;height: 48rpx;" src="../../../static/icon/png/jian.png" ></image>
</view>
<view style="margin: 0rpx 15rpx;font-size: 28rpx;"> {{item.num}} </view>
<view @click="clickAdd(index)">
<image style="width: 48rpx;height: 48rpx;" src="../../../static/icon/png/jia.png" ></image>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 遮罩层 -->
<view class="car-mark" v-if="isShowCarMark" @click="clickCarMark"></view>
</view>
</template>
<script>
export default {
data() {
return {
menuData:[]
}
},
methods:{
//点击左边类别栏事件
clickTab(e) {
let clickIndex = e.target.dataset.current //当前标签的索引
this.currentTab = clickIndex
let tapTitle = e.target.dataset.title //获得点击的标题
this.goodsTitle = tapTitle[0]
//对数组进行筛选，让右边的列表只显示对应类别的数据
this.menuData = this.tempData.filter(item => item.title == this.goodsTitle)
//滚动条返回顶部
this.scrollTop = 0
},
//记录滚动条位置
scroll : function(e) {
this.scrollTop = e.detail.scrollTop
},
//显示、隐藏购物车清单
clickCar(){
this.isShowList = !this.isShowList
this.isShowCarMark = !this.isShowCarMark
},
clickCarMark(){
this.isShowList = !this.isShowList
this.isShowCarMark = !this.isShowCarMark
},
//**********商品加入购物车 ***************
addCar(e){
//获得点击加购的商品数据
let item = e.target.dataset.item[0]
//如果购物车里的商品name = 点击数据商品name 则返回此元素下标
let index = this.carData.findIndex(ev => ev.name === item.name)
//如果购物车不存在相同的商品
if(index === -1) {
item.num = 1 //添加数量属性num ，默认为 1【原数据没有数量字段】
this.carData.push(item) //把商品追加进购物车
} else {
this.carData[index].num++ //存在相同的商品则数量叠加
}
//更新总数与总价
this.allNum()
this.allPrice()
//显示购物车
this.isShowCar = true
},
//增加数量
clickAdd(index){
this.carData[index].num = this.carData[index].num + 1
this.allNum()
this.allPrice()
},
//减少数量,小于1时删除元素
clickMinus(index){
if(this.carData[index].num > 1){
this.carData[index].num = this.carData[index].num - 1
} else {
this.carData.splice(index,1) //从数组删除元素
}
this.allNum()
this.allPrice()
},
// 计算商品总数量
allNum() {
let count = 0;
this.carData.forEach(item=>{
count+=item.num
})
this.totalNum = count
//购物车有商品的时候，滚动栏高度减少，让出位置给购物车
if(this.totalNum === 1 && this.isAddHeight){
this.scrollHeight = this.scrollHeight - 50
this.isAddHeight = false
}
//购物车没有商品的时候，隐藏组件，还原滚动栏高度
if (this.totalNum === 0){
this.scrollHeight = this.scrollHeight + 50
this.isAddHeight = true
this.isShowCar = false
this.clickCar()
}
},
// 计算商品总价格
allPrice() {
let Price = 0;
this.carData.forEach(item=>{
//总价格=数量 X 单价 ，由于数组的单价是字符串类型，所以要先转换成浮点数字类型
Price+=item.num * parseFloat(item.price)
})
//Number类型的数据调用toFixed方法，指定保留几位小数，返回的数据是一个string类型
this.totalPrice = Price.toFixed(2)
},
}
}
</script>
<style lang="scss">
.scroll-box{
display: flex;
flex-direction: row;
/* 需要定义高度,否则不能分栏滚动 */
/* height: calc(78.2vh); */
}
.left-tab{
flex: 1; /*均匀分配元素*/
display: flex;
overflow: hidden;
background: #f6f6f6;
}
.tab{
width: 150rpx;
height: 100%;
}
.tab-item{
height: 100rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
line-height: 1;
}
.active{ /* 选项卡活动时的样式 */
color:#A7D500;
font-weight: bolder;
background: #ffffff;
}
/* 右边页面样式 */
.right-box {
left: 15%;
width: 80%;
background: #f6f6f6;
}
.page-view {
padding: 10rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-container {
display: flex;
flex-direction: column;
}
.thumb-box {
width: 98%;
height: 150rpx;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
margin-top: 50rpx;
}
.item-menu-image {
width: 150rpx;
height: 150rpx;
}
.item-menu-name {
font-weight: normal;
font-size: 28rpx;
margin-bottom: 10rpx;
}
.item-menu-explain{
font-size: 20rpx;
margin-bottom: 10rpx;
/* 下方四项配合使用,超出范围的显示... */
width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-menu-ps{
display: flex;
flex-direction: row;
justify-content: space-between; /*两边对齐*/
}
.item-menu-price{
font-size: 26rpx;
font-weight: 600;
}
.item-menu-select{
width: 100rpx;
height: 36rpx;
/* 文字垂直居中 (line-height)和(height)设置一样就可以 */
line-height: 36rpx;
/* 文字水平居中 */
text-align:center;
font-size: 22rpx;
background-color: #A7D500;
border-radius: 50rpx;
}
/* 购物车 */
.car{
display: flex;
flex-direction: row;
align-items: center;
height: 100rpx;
width: 100%;
position: fixed;
bottom: 0rpx;
background-color:#ffffff ;
z-index: 79;
}
.car-img-back{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
position: fixed;
bottom: 35rpx;
left: 30rpx;
background-color: #A7D500;
border-radius: 50%;
z-index: 79;
}
.car-img{
height: 60rpx;
width: 60rpx;
}
.car-left{
/* 平均分布元素,父元素display: flex; 子元素flex:1; */
flex: 1;
}
.car-pice{
padding-left: 160rpx;
font-size: 34rpx;
font-weight: 700;
}
.car-num{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 30rpx;
width: 30rpx;
position: fixed;
bottom: 100rpx;
left: 110rpx;
background-color: #ffea49;
border-radius: 50%;
z-index: 79;
}
.car-num-text{
font-size: 20rpx;
}
.car-right{
/* 平均分布元素,父元素display: flex; 子元素flex:1; */
flex: 1;
}
.car-text{
height: 100rpx;
width: 200rpx;
line-height: 100rpx;
margin-left: 200rpx;
text-align: center;
background-color: #A7D500;
}
.car-list{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 500rpx;
width: 100%;
position: fixed;
bottom: 100rpx;
background-color: #ffffff;
border-radius: 10px 10px 0px 0px;
z-index: 78;
}
.car-container {
display: flex;
flex-direction: column;
width: 100%;
}
.car-box {
width: 100%;
height: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 20rpx 10rpx;
border-bottom: solid #f4f4f4 1px;
}
.car-menu-image {
width: 100rpx;
height: 100rpx;
margin-left: 35rpx;
}
.car-menu-name {
font-weight: normal;
font-size: 28rpx;
margin-bottom: 10rpx;
}
.car-menu-explain{
font-size: 20rpx;
margin-bottom: 10rpx;
/* 下方四项配合使用,超出范围的显示... */
width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.car-menu-ps{
display: flex;
flex-direction: row;
justify-content: space-between; /*两边对齐*/
}
.car-menu-price{
font-size: 26rpx;
font-weight: 600;
}
.car-num-select{
display: flex;
flex-direction: row;
width: 160rpx;
height: 36rpx;
}
/* 遮罩层 */
.car-mark{
position: fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:77;
background-color: rgba(0, 0, 0, 0.4);
transition: all 0.3s ease-in 0s;
}
</style>
\ No newline at end of file
request/menu/index.js
...@@ -3,12 +3,12 @@ export default { ...@@ -3,12 +3,12 @@ export default {
getMenuList(id) { getMenuList(id) {
return uni.$u.http.get('/weixin/infoByShop', { return uni.$u.http.get('/weixin/infoByShop', {
params:{ params:{
shopId:"6" shopId: id
} }
}).then(res => { }).then(res => {
return res; return res;
}).catch(err => { }).catch(err => {
uni.showToast({title:'服务器错误',icon:'none'})
}) })
}, },
// 下单获取预支付订单 // 下单获取预支付订单
......
request/user/index.js
import Store from '@/store' import Store from '@/store'
import { $EventBus } from '../../utils/EventBus';
export default{ export default{
getLocation() { getLocation() {
uni.getLocation({ let _this = this;
return uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度 type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) { success: function (res) {
console.log(res, 'res') console.log(res, 'res')
...@@ -9,12 +11,52 @@ export default{ ...@@ -9,12 +11,52 @@ export default{
lat: res.latitude, lat: res.latitude,
lng: res.longitude lng: res.longitude
} }
// getAddress(params).then(res => { Store.commit('saveLocation',params);
// console.log(res, 'aaa') // return params;
// }) _this.getAddress(params);
},
fail: function (res) {
console.log(res,3333)
uni.showToast({
title: '获取地址失败，将导致部分功能不可用',
icon: 'none'
});
} }
}) })
}, },
// 获取具体位置店铺/weixin/getShop
getAddress(params) {
return uni.$u.http.get('/weixin/getShop',{
params
}).then((res)=>{
if(res.data.code==200){
console.log(res.data.data,12345678)
Store.commit('saveShopInfo', res.data.data);
if (res.data.data.length){
$EventBus.$emit('getMenuList', res.data.data[0])
}
}
return res;
}).catch(err=>{
return err;
});
},
// 通过地址选择店铺xxxx
// getAddress(params) {
// return uni.$u.http.get('/weixin/getShop', {
// params
// }).then((res) => {
// if (res.data.code == 200) {
// console.log(res.data.data, 12345678)
// Store.commit('saveShopInfo', res.data.data);
// }
// return res;
// }).catch(err => {
// return err;
// });
// },
uniLogin(res) { uniLogin(res) {
uni.login({ uni.login({
provider: 'weixin', provider: 'weixin',
...@@ -27,7 +69,6 @@ export default{ ...@@ -27,7 +69,6 @@ export default{
encryptedData: res.encryptedData encryptedData: res.encryptedData
}).then((response) => { }).then((response) => {
if (response.statusCode == 200 && response.data && response.data.code==200) { if (response.statusCode == 200 && response.data && response.data.code==200) {
console.log(response.data.token,54443)
uni.setStorage({key:'Authorization',data:response.data.token}); uni.setStorage({key:'Authorization',data:response.data.token});
Store.commit('setAuthorization', response.data.token); Store.commit('setAuthorization', response.data.token);
uni.showToast({ uni.showToast({
...@@ -43,7 +84,16 @@ export default{ ...@@ -43,7 +84,16 @@ export default{
} }
}) })
}, },
// 手机号授权登录
getPhoneNumber(res) {
console.log(res,12321)
uni.setStorage({
key: 'userPhoneInfo',
data: res
})
Store.commit("setUserPhoneInfo", res);
this.uniLogin(res.detail);
},
async uniGetUserInfo(e) { async uniGetUserInfo(e) {
uni.getUserProfile({ //授权后可以通过uni.getUserProfile得到用户信息 uni.getUserProfile({ //授权后可以通过uni.getUserProfile得到用户信息
lang: "zh_CN", lang: "zh_CN",
...@@ -51,23 +101,8 @@ export default{ ...@@ -51,23 +101,8 @@ export default{
success: res => { success: res => {
uni.setStorage({key:'userInfo', data:res}) uni.setStorage({key:'userInfo', data:res})
Store.commit("setUserInfo",res) Store.commit("setUserInfo",res)
this.uniLogin(res); // this.uniLogin(res);
} }
}) })
},
getLocation() {
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) {
console.log(res, 'res')
var params = {
lat: res.latitude,
lng: res.longitude
}
getAddress(params).then(res => {
console.log(res, 'aaa')
})
} }
})
},
} }
\ No newline at end of file
store/getters.js
...@@ -3,6 +3,9 @@ const getters = { ...@@ -3,6 +3,9 @@ const getters = {
nickName: state => state.user.userInfo.userInfo.nickName, nickName: state => state.user.userInfo.userInfo.nickName,
Authorization: state => state.user.Authorization, Authorization: state => state.user.Authorization,
menuAllInfo: state => state.menu.menuAllInfo, menuAllInfo: state => state.menu.menuAllInfo,
userPhoneInfo: state => state.user.userPhoneInfo,
location: state => state.user.location,
shopInfo: state => state.user.shopInfo,
} }
export default getters export default getters
\ No newline at end of file
store/modules/user.js
...@@ -3,6 +3,9 @@ const user = { ...@@ -3,6 +3,9 @@ const user = {
state: { state: {
userInfo: null, //授权信息 userInfo: null, //授权信息
Authorization: null, //是否授权 Authorization: null, //是否授权
location:null,//用户经纬度
userPhoneInfo:null,
shopInfo:null//店铺信息
}, },
mutations: { mutations: {
// 设置是否授权 // 设置是否授权
...@@ -10,10 +13,22 @@ const user = { ...@@ -10,10 +13,22 @@ const user = {
console.log(data,665) console.log(data,665)
state.Authorization = data; state.Authorization = data;
}, },
// 设置用户信息 // 设置用户允许昵称头像授权时的信息
setUserInfo(state, userInfo) { setUserInfo(state, userInfo) {
state.userInfo = userInfo; state.userInfo = userInfo;
}, },
// 授权手机号时允许后的信息
setUserPhoneInfo(state, userPhoneInfo) {
state.userPhoneInfo = userPhoneInfo;
},
// 保存经纬度
saveLocation(state, location) {
state.location = location;
},
// 当前店铺信息
saveShopInfo(state, shopInfo) {
state.shopInfo = shopInfo;
}
}, },
actions: { actions: {
......
utils/utils.js
...@@ -2,94 +2,68 @@ import Config from '../static/config/index.js'; ...@@ -2,94 +2,68 @@ import Config from '../static/config/index.js';
import WXBizDataCrypt from "./WXBizDataCrypt.js"; import WXBizDataCrypt from "./WXBizDataCrypt.js";
import {$EventBus} from './EventBus' import {$EventBus} from './EventBus'
export default{ export default{
getallNum(arrA) { getallNum(Obj){
let arrA1 = [{
"goodsId": 100,
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
flag: true,
thumbnail: 'https://img2.baidu.com/it/u=1001625387,3275765924&fm=26&fmt=auto&gp=0.jpg',
num: 1,
rules: [{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温"
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖"
}
]
},
{
"goodsId": 101,
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
flag: true,
thumbnail: 'https://img2.baidu.com/it/u=1001625387,3275765924&fm=26&fmt=auto&gp=0.jpg',
num: 3,
rules: [{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温"
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖"
}
]
}
]
// arrA = []
let shopCarInfo = uni.getStorageSync('shopCarInfo'); let shopCarInfo = uni.getStorageSync('shopCarInfo');
let shopCarInfoAdd = [] console.log(shopCarInfo,'oooooo')
console.log(shopCarInfo, 55553333) if (shopCarInfo){
if (shopCarInfo) { let currentGoods = shopCarInfo.find(v => v.goodsId == Obj.goodsId && v.skuId == Obj.skuId);
let ids = shopCarInfo.map(v => v.goodsId); if (currentGoods){
console.log(ids, 444) console.log(currentGoods,'pppppp')
shopCarInfo.forEach((item) => { currentGoods.num+=1;
arrA.forEach((preItem, index) => { }else{
console.log(ids.includes(preItem.goodsId), 1234567) shopCarInfo.push(Obj);
let ind = ids.indexOf(preItem.goodsId);
if (ind > -1) {
let num = 0;
for (let i = 0; i < item.rules.length; i++) {
let it = item.rules[i];
for (let r = 0; r < preItem.rules.length; r++) {
let ry = preItem.rules[r];
if (ry.specId == it.specId && ry.ruleId == it.ruleId) {
num += 1;
}
}
}
if (num == item.rules.length) {
item.num += 1
} else {
shopCarInfoAdd.push(preItem)
} }
console.log(shopCarInfo,7777)
} else { }else{
shopCarInfoAdd.push(preItem); shopCarInfo = [Obj];
arrA.splice(index, 1)
}
});
})
} else {
shopCarInfo = arrA
} }
shopCarInfo = [...shopCarInfo, ...shopCarInfoAdd];
uni.setStorageSync('shopCarInfo', shopCarInfo); uni.setStorageSync('shopCarInfo', shopCarInfo);
$EventBus.$emit('updateCar'); $EventBus.$emit('updateCar');
// this.goods = uni.getStorageSync('shopCarInfo');
}, },
// getallNum(arrA) {
// // arrA = []
// let shopCarInfo = uni.getStorageSync('shopCarInfo');
// let shopCarInfoAdd = []
// console.log(shopCarInfo, 55553333)
// if (shopCarInfo) {
// let ids = shopCarInfo.map(v => v.goodsId);
// console.log(ids, 444)
// shopCarInfo.forEach((item) => {
// arrA.forEach((preItem, index) => {
// console.log(ids.includes(preItem.goodsId), 1234567)
// let ind = ids.indexOf(preItem.goodsId);
// if (ind > -1) {
// let num = 0;
// for (let i = 0; i < item.rules.length; i++) {
// let it = item.rules[i];
// for (let r = 0; r < preItem.rules.length; r++) {
// let ry = preItem.rules[r];
// if (ry.specId == it.specId && ry.ruleId == it.ruleId) {
// num += 1;
// }
// }
// }
// if (num == item.rules.length) {
// item.num += 1
// } else {
// shopCarInfoAdd.push(preItem)
// }
// } else {
// shopCarInfoAdd.push(preItem);
// arrA.splice(index, 1)
// }
// });
// })
// } else {
// shopCarInfo = arrA
// }
// shopCarInfo = [...shopCarInfo, ...shopCarInfoAdd];
// uni.setStorageSync('shopCarInfo', shopCarInfo);
// $EventBus.$emit('updateCar');
// // this.goods = uni.getStorageSync('shopCarInfo');
// },
// 解密手机 // 解密手机
async onGetPhoneNumber(appid,session_key,encryptedData,iv) { async onGetPhoneNumber(appid,session_key,encryptedData,iv) {
let pc = await new WXBizDataCrypt(appid,session_key); let pc = await new WXBizDataCrypt(appid,session_key);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment