Skip to content

U
user
Commit ae118994 by 张成
Options

up[date

parent 4c9ddc05
Showing with 2152 additions and 919 deletions
App.vue
<style lang="scss"> <style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss"; @import "uview-ui/index.scss";
</style> </style>
<script> <script>
export default { export default {
onLaunch: function() { onLaunch: function () {
// uni.showLoading({ // uni.showLoading({
// title: '加载中...', // title: '加载中...',
// mask:true // mask:true
// }); // });
// uni.clearStorageSync(); // uni.clearStorageSync();
}, },
onShow: function() { onShow: function () {
}, },
onHide: function() { onHide: function () {
}, },
methods:{ methods: {
unilogin(){ unilogin() {
} }
} }
} }
</script> </script>
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
.pages {
background: #F2F2F2;
min-height: calc(100vh - 100rpx);
}
* {
box-sizing: border-box;
}
image {
width: 100%;
height: auto;
}
</style> </style>
components/shopCar/shopCar.vue
<template> <template>
<view> <view>
<u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true" :closeOnClickOverlay="true" @close="closeT"> <u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true"
:closeOnClickOverlay="true" @close="closeT">
<view class="shop-car"> <view class="shop-car">
<view class="header"> <view class="header">
<text class="left">购物袋</text> <text class="left">购物袋</text>
...@@ -8,31 +9,42 @@ ...@@ -8,31 +9,42 @@
</view> </view>
<view class="container"> <view class="container">
<view> <view>
<view class="empty" v-if="show==false"> <view class="empty" v-if="show == false">
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image> <image :src="imgPath" mode="widthFix" style="width: 400rpx;"></image>
<view class="empty-text">空空如也的购物</view> <view class="empty-text">空空如也的购物</view>
<view class="empty-button" @click="goshopping">去选购</view> <view class="empty-button" @click="goshopping">去选购</view>
</view> </view>
<view v-if="show==true"> <view v-if="show == true">
<view class="goods-detail" v-for="(item,index) in goods" :key="index"> <view class="goods-detail" v-for="(item, index) in goods" :key="index">
<view class="detail-left"> <view class="detail-left">
<view class="goods-left"> <view class="goods-left">
<u-checkbox-group @change="selected(item)"> <u-checkbox-group @change="selected(item)">
<label> <label>
<u-checkbox shape="circle" class="selected" color="#555555" :checked="item.flag"/><text></text> <u-checkbox shape="circle" class="selected" color="#555555"
:checked="item.flag" />
</label> </label>
</u-checkbox-group> </u-checkbox-group>
<image :src="item.pics.thumbnailApplet || item.pics.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.skus[0].rules" :key="rl.ruleName">{{rl.ruleName}}<text v-if="index!=item.skus.rules.length-1">/</text></text></text> <text style="font-size:20rpx;color:#666666">
<text><text class="goods-price">￥{{item.discount}}</text><text class="price-x">￥</text><text class="price-xx">{{item.price}}</text></text> <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.sku.discount }}</text>
<text class="price-x">￥</text>
<text class="price-xx">{{ item.sku.price }}</text>
</text>
</view> </view>
</view> </view>
<view class="detail-right"> <view class="detail-right">
<text class="subtract" @click="reduce(item,index)">-</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>
...@@ -45,25 +57,19 @@ ...@@ -45,25 +57,19 @@
</u-popup> </u-popup>
<view class="end" v-if="goods.length"> <view class="end" v-if="goods.length">
<view class="end-left"> <view class="end-left">
<!-- <checkbox-group @change="selectgoods()">
<label>
<checkbox :checked="allchecked" />全选
</label>
</checkbox-group> -->
<view style="display:flex"> <view style="display:flex">
<view class="car-img" @click.stop="openShopCar"> <view class="car-img" @click.stop="openShopCar">
<text class="badge" v-if="totalNum">{{totalNum}}</text> <text class="badge" v-if="totalNum">{{ totalNum }}</text>
</view> </view>
<text style="color:#000000;font-weight: bold;font-size: 28rpx;display: flex; margin-left: 30rpx; align-items: center;">￥{{totalPrice.toFixed(2)}}</text> <text class="shopClassStyle">￥{{ totalPrice.toFixed(2) }}</text>
</view> </view>
</view> </view>
<view class="end-right" @click="saveReserve" v-if="userms"> <view class="end-right" @click="saveReserve" v-if="userms">
付款 付款
<!-- ({{totalNum}}) -->
</view> </view>
<button v-if="!userms" class="end-right" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve"> <button v-if="!userms" class="end-right" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="saveReserve">
付款 付款
<!-- ({{totalNum}}) -->
</button> </button>
...@@ -72,39 +78,38 @@ ...@@ -72,39 +78,38 @@
</template> </template>
<script> <script>
import { $EventBus } from "../../utils/EventBus"; import { $EventBus } from "../../utils/EventBus";
import Menu from '@/request/menu'; import Menu from '@/request/menu';
import User from '@/request/user'; import User from '@/request/user';
export default{ export default {
data(){ data() {
return{ return {
showShopCar:false,//是否弹出购物车列表 showShopCar: false,//是否弹出购物车列表
show:true, show: true,
allchecked:true, allchecked: true,
// checked:true, // checked:true,
goods:[],//购物车商品信息 goods: [],//购物车商品信息
imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309'
} }
}, },
created() { created() {
$EventBus.$off('updateCar'); $EventBus.$off('updateCar');
}, },
mounted() { mounted() {
this.goods = uni.getStorageSync('shopCarInfo')||[]; this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar',()=> { $EventBus.$on('updateCar', () => {
this.goods=uni.getStorageSync('shopCarInfo')||[]; this.goods = uni.getStorageSync('shopCarInfo') || [];
}); });
}, },
methods:{ methods: {
// 切换购物车列表显示隐藏 // 切换购物车列表显示隐藏
openShopCar() { openShopCar() {
this.$nextTick(()=>{ this.$nextTick(() => {
this.showShopCar = !this.showShopCar; this.showShopCar = !this.showShopCar;
}) })
}, },
closeT(e) { closeT(e) {
console.log(e,11111) this.showShopCar = false;
this.showShopCar=false;
}, },
// 清空购物车 // 清空购物车
clearCar() { clearCar() {
...@@ -112,22 +117,19 @@ ...@@ -112,22 +117,19 @@
$EventBus.$emit('updateCar'); $EventBus.$emit('updateCar');
}, },
// 购物车为空时点击去购物，收起购物袋 // 购物车为空时点击去购物，收起购物袋
goshopping(){ goshopping() {
this.showShopCar=false; this.showShopCar = false;
}, },
//跳转到结算 //跳转到结算
saveReserve(e) { saveReserve(e) {
let Authorization = uni.getStorageSync('Authorization'); let Authorization = uni.getStorageSync('Authorization');
let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v=>v.flag==true); let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v => v.flag == true);
if(shopCarInfo && this.totalPrice>0 && this.totalNum>0){ if (shopCarInfo && this.totalPrice > 0 && this.totalNum > 0) {
if(Authorization){ if (Authorization) {
// 从购物车发起：buyType=1；
// 立即购买：buyType=2；
// 扫码进入：buyType=3；
uni.navigateTo({ uni.navigateTo({
url:`/menuSubPackage/pages/settlement/settlement?totalPrice=${this.totalPrice}&totalNum=${this.totalNum}&buyType=1` url: `/orderSubPackage/pages/settlement/index?buyType=1`
}) })
}else{ } else {
this.loginByPhoneNumber(e) this.loginByPhoneNumber(e)
} }
} }
...@@ -135,73 +137,71 @@ ...@@ -135,73 +137,71 @@
}, },
// 付款前未登录发起授权 // 付款前未登录发起授权
loginByPhoneNumber(e) { loginByPhoneNumber(e) {
if(e.detail.errMsg=='getPhoneNumber:ok'){ if (e.detail.errMsg == 'getPhoneNumber:ok') {
User.getPhoneNumber(e); User.getPhoneNumber(e);
}else if( e.detail.errMsg=="getPhoneNumber:fail user deny"){ } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
uni.showToast({title:'已拒绝手机号授权',icon:'error'}) uni.showToast({ title: '已拒绝手机号授权', icon: 'error' })
} }
}, },
change(e){ change(e) { console.log(e) },
console.log(e) selected(item) {
}, item.flag = !item.flag
selected(item){ if (!item.flag) {
item.flag=!item.flag this.allchecked = false
if(!item.flag){ } else {
this.allchecked=false const a = this.goods.filter((item) => {
}else{ return item.flag == true
const a=this.goods.filter((item)=>{
return item.flag==true
}) })
if(a){ if (a) {
this.allchecked=true this.allchecked = true
}else{ } else {
this.allchecked=false this.allchecked = false
} }
} }
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo', this.goods);
}, },
selectgoods(){ selectgoods() {
this.allchecked=!this.allchecked this.allchecked = !this.allchecked
if(this.allchecked){ if (this.allchecked) {
this.goods.map(item=>{ this.goods.map(item => {
item.flag=true item.flag = true
}) })
}else{ } else {
this.goods.map(item=>{ this.goods.map(item => {
item.flag=false item.flag = false
}) })
} }
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo', this.goods);
}, },
reduce(item,index){ reduce(item, index) {
item.num-=1 item.num -= 1
if(item.num==0){ if (item.num == 0) {
this.goods.splice(index,1); this.goods.splice(index, 1);
} }
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo', this.goods);
}, },
add(item){ add(item) {
let s = 0; let s = 0;
this.goods.forEach(function(val) { this.goods.forEach(function (val) {
s += val.num; s += val.num;
}, 0); }, 0);
if(s>=9){ if (s >= 9) {
uni.showToast({ uni.showToast({
title:'最多可一次购买9杯', title: '最多可一次购买9杯',
icon:'none' icon: 'none'
}); });
return; return;
} }
let num =item.num let num = item.num
item.num=num+1 item.num = num + 1
uni.setStorageSync('shopCarInfo',this.goods); uni.setStorageSync('shopCarInfo', this.goods);
} }
}, },
computed:{ computed: {
userms() { userms() {
return this.$store.getters.Authorization; return this.$store.getters.Authorization;
}, },
totalNum(){ totalNum() {
let totalNum = 0; let totalNum = 0;
this.goods.map(item => { this.goods.map(item => {
item.flag ? totalNum += item.num : totalNum += 0 item.flag ? totalNum += item.num : totalNum += 0
...@@ -211,26 +211,38 @@ ...@@ -211,26 +211,38 @@
totalPrice() { totalPrice() {
let totalPrice = 0; let totalPrice = 0;
this.goods.map(item => { this.goods.forEach(item => {
item.flag ? totalPrice += item.num * item.discount : totalPrice += 0 const sku = item.sku;
item.flag ? totalPrice += item.num * sku.discount : totalPrice += 0
}) })
return totalPrice return totalPrice
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.shop-car { .shopClassStyle {
color: #000000;
font-weight: bold;
font-size: 28rpx;
display: flex;
margin-left: 30rpx;
align-items: center;
}
.shop-car {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 860rpx; height: 860rpx;
.header{
.header {
height: 88rpx; height: 88rpx;
display: flex; display: flex;
border-bottom:1rpx solid rgb(235,235,235); border-bottom: 1rpx solid rgb(235, 235, 235);
.left{
.left {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -240,7 +252,8 @@ ...@@ -240,7 +252,8 @@
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.right{
.right {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -250,8 +263,9 @@ ...@@ -250,8 +263,9 @@
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
.delete-icon{
width:18rpx; .delete-icon {
width: 18rpx;
height: 18rpx; height: 18rpx;
background: url(../../static/imgs/icon-delete.png) center center no-repeat; background: url(../../static/imgs/icon-delete.png) center center no-repeat;
background-size: cover; background-size: cover;
...@@ -260,74 +274,87 @@ ...@@ -260,74 +274,87 @@
} }
} }
} }
.container{
.container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
} }
} }
.goods{
.goods {
line-height: 80rpx; line-height: 80rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
&-detail{
&-detail {
display: flex; display: flex;
padding: 30rpx 15rpx 30rpx 30rpx; padding: 30rpx 15rpx 30rpx 30rpx;
background-color: #fff; background-color: #fff;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.detail-left{
.detail-left {
display: flex; display: flex;
.goods-left{
.goods-left {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.size{
.size {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-direction: column; flex-direction: column;
margin-left: 30rpx; margin-left: 30rpx;
.goods-price{
.goods-price {
font-size: 24rpx; font-size: 24rpx;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
color: #FF5200; color: #FF5200;
} }
.price-x{
margin-left:6rpx; .price-x {
font-size:20rpx; margin-left: 6rpx;
font-size: 20rpx;
font-family: ArialMT; font-family: ArialMT;
line-height: 22rpx; line-height: 22rpx;
color: #666666; color: #666666;
} }
.price-xx{
font-size:20rpx; .price-xx {
text-decoration:line-through; font-size: 20rpx;
text-decoration: line-through;
} }
} }
.detail-right{
text{ .detail-right {
text {
width: 40rpx; width: 40rpx;
line-height: 40rpx; line-height: 40rpx;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
margin-right: 10rpx; margin-right: 10rpx;
color:#000000; color: #000000;
} }
.add { .add {
color: #FFFFFF; color: #FFFFFF;
border-radius: 40rpx; border-radius: 40rpx;
margin-right: 20rpx; margin-right: 20rpx;
background:#006ECF; background: #006ECF;
} }
.subtract{
border:1rpx solid #006ECF; .subtract {
border: 1rpx solid #006ECF;
border-radius: 40rpx; border-radius: 40rpx;
color:#006ECF; color: #006ECF;
}
} }
} }
} }
.empty{ }
.empty {
position: relative; position: relative;
top: 220rpx; top: 220rpx;
...@@ -335,51 +362,58 @@ ...@@ -335,51 +362,58 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
&-text{
&-text {
color: #808080; color: #808080;
margin-bottom: 50rpx; margin-bottom: 50rpx;
} }
&-button{
&-button {
width: 300rpx; width: 300rpx;
height: 90rpx; height: 90rpx;
color:orange; color: orange;
border: 1rpx solid orange; border: 1rpx solid orange;
text-align: center; text-align: center;
line-height: 90rpx; line-height: 90rpx;
border-radius: 48rpx; border-radius: 48rpx;
} }
} }
.end{
.end {
width: 100%; width: 100%;
height: 92rpx; height: 92rpx;
background-color:rgb(253, 253, 253); background-color: rgb(253, 253, 253);
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
left: 0; left: 0;
display: flex; display: flex;
z-index: 10075; z-index: 10075;
align-items: center; align-items: center;
&-left{
&-left {
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 30rpx; padding: 0 30rpx;
.end-flex{
.end-flex {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.car-img{
width:40rpx; .car-img {
width: 40rpx;
height: 48rpx; height: 48rpx;
display: inline-block; display: inline-block;
background:url('../../static/imgs/icon-shop-package.png') center center no-repeat; background: url('../../static/imgs/icon-shop-package.png') center center no-repeat;
background-size:cover; background-size: cover;
position: relative; position: relative;
.badge{
.badge {
position: absolute; position: absolute;
height: 24rpx; height: 24rpx;
background: #006ECF; background: #006ECF;
right:-16rpx; right: -16rpx;
top: -4rpx; top: -4rpx;
min-width: 24rpx; min-width: 24rpx;
font-size: 16rpx; font-size: 16rpx;
...@@ -395,7 +429,8 @@ ...@@ -395,7 +429,8 @@
} }
} }
} }
&-right{
&-right {
width: 169rpx; width: 169rpx;
font-size: 32rpx; font-size: 32rpx;
line-height: 92rpx; line-height: 92rpx;
...@@ -405,5 +440,5 @@ ...@@ -405,5 +440,5 @@
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
} }
} }
</style> </style>
menuSubPackage/pages/goodsDetail/goodsDetail.vue
<template> <template>
<view class="spec-content"> <view class="spec-content">
<view v-if="goodInfo">
<view class="uni-margin-wrap"> <view class="uni-margin-wrap">
<swiper class="swiper" circular autoplay> <swiper class="swiper">
<swiper-item v-for="item in goodInfo.pics.introImages"> <swiper-item v-for="item in goodInfo.pics.introImages" :key="item">
<view class="swiper-item"> <image :src="item" class="swiper_img" mode="aspectFit"></image>
<image class="swiper-spec-content-item-img" :src="item" mode="widthFix"></image>
</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<!-- <scroll-view scroll-x="true">
<view class="spec-banner-wrap" scroll-x="true">
<view class="spec-banner-wrap-item" v-for="item in goodInfo.pics.introImages">
<image class="spec-banner-wrap-item-img" :src="item" mode="widthFix"></image>
</view>
</view>
</scroll-view> -->
<view class="good spec-info-left"> <view class="good spec-info-left">
<text class="good-name">{{goodInfo.name}}</text> <text class="good-name">{{ goodInfo.name }}</text>
<view v-for="specItem in goodInfo.specs"> <view class="specs">
<text class="good-spec-name">{{specItem.specName}}</text> <view v-for="specItem in goodInfo.specs" :key="specItem.specId">
<view class="good-spec-name">{{ specItem.specName }}</view>
<view class="good-spec-rule"> <view class="good-spec-rule">
<view v-for="specItemRule in specItem.rules"> <view class="good-spec-rule-item" v-for="specItemRule in specItem.rules"
<text class="good-spec-rule-item">{{specItemRule.ruleName}}</text> @click="selectRoles(specItemRule, specItem)" :class="{ active: isActvie(specItemRule) }"
:key="specItemRule.ruleId">
<view>{{ specItemRule.ruleName }}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="spec-detail">
<text class="spec-detail-title spec-info-left">商品详情</text>
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImages">
<image class=".spec-detail-img-item " :src="item" mode="widthFix"></image>
</view> </view>
<view class="good-select-height"> <view class="spec-detail">
<view class="spec-detail-title spec-info-left">商品详情</view>
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImages" :key="item">
<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image>
</view> </view>
<!-- 底部空白 -->
<view class="good-select-height"></view>
</view> </view>
<view class="good-select good-select-height"> <view class="good-select good-select-height">
...@@ -47,238 +38,146 @@ ...@@ -47,238 +38,146 @@
<text class="good-select-price-small">￥10</text> <text class="good-select-price-small">￥10</text>
</view> </view>
<view class="good-select-cont"> <view class="good-select-cont">
<button class="good-select-btn" type="default" >立即购买</button> <span class="good-select-btn1" @click="getallNum('buyNow')" v-if="userms">
<button class="good-select-btn" type="default" >加入购物袋</button> 立即购买
</span>
<button v-if="!userms" class="good-select-btn1" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="getallNum">
立即购买
</button>
<span class="good-select-btn2" @click="getallNum" type="default">加入购物袋</span>
</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { import Utils from '@/utils/utils'
import User from '@/request/user';
export default {
data() { data() {
return { return {
title: 'Hello1', title: 'Hello1',
imglist:[{img:"/static/logo.png"},{img:"/static/ggxz01.png"}], imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
goodInfo:{ goodInfo: null,
"goodId": 100, selected: []
"name": "冰茶咖啡",
"price": 29.9,
"discount": 19.9,
"pics": {
"thumbnail": "http://baidu.com",
"introImages": [
"https://cdn.uviewui.com/uview/album/1.jpg",
"https://cdn.uviewui.com/uview/album/2.jpg",
"https://cdn.uviewui.com/uview/album/3.jpg"
],
"detailImages": [
"https://cdn.uviewui.com/uview/album/4.jpg",
"https://cdn.uviewui.com/uview/album/5.jpg",
"https://cdn.uviewui.com/uview/album/6.jpg"
]
},
"desc": "",
"remark": "",
"tags": [
"YYDS",
"杨幂同款"
],
"specs": [
{
"rules": [
{
"isDefault": "1",
"isRecommend": "0",
"price": "2",
"ruleId": "51",
"ruleName": "冰"
},
{
"isDefault": "0",
"isRecommend": "0",
"price": "1",
"ruleId": "52",
"ruleName": "热"
} }
],
"specId": "44",
"specName": "温度"
}, },
{ onLoad(option) {
"rules": [ const goodsInfo = uni.getStorageSync('goodsInfo')
{ this.goodInfo = JSON.parse(goodsInfo)
"isDefault": "1",
"isRecommend": "0",
"price": "0",
"ruleId": "53",
"ruleName": "不加奶"
}, },
{ methods: {
"isDefault": "0", selectRoles(specItemRule, parent) {
"isRecommend": "0", const { selected } = this;
"price": "1", selected.forEach((item, index) => {
"ruleId": "54", if (item.specId == parent.specId) {
"ruleName": "正常奶" selected.splice(index, 1)
} }
], });
"specId": "45", this.selected.push({ ...specItemRule, specId: parent.specId })
"specName": "加奶"
},
{
"rules": [
{
"isDefault": "1",
"isRecommend": "0",
"price": "0",
"ruleId": "55",
"ruleName": "不加糖"
}, },
{ isActvie(data) {
"isDefault": "0", return this.selected.filter(item => item.ruleId == data.ruleId).length > 0
"isRecommend": "0",
"price": "1",
"ruleId": "56",
"ruleName": "半塘"
}, },
{
"isDefault": "0", getallNum(type) {
"isRecommend": "0", let Authorization = uni.getStorageSync('Authorization');
"price": "2", if (!Authorization) {
"ruleId": "57", this.loginByPhoneNumber(e);
"ruleName": "标准糖" return
} }
],
"specId": "46",
"specName": "糖度" const skusObj = {};
let selectedSku = null
const skus = this.goodInfo.skus;
skus.forEach(item => {
const ruleId = item.rules.map(item => item.ruleId);
skusObj[item.skuId] = ruleId.sort()
});
const selectedrules = this.selected.map(item => item.ruleId).sort()
for (let item in skusObj) {
const selStr = selectedrules.toString()
const itemStr = skusObj[item].toString()
if (selStr === itemStr) {
selectedSku = item
}
}
const [sku] = skus.filter(item => item.skuId == selectedSku);
if (skus.state == 2) {
uni.showToast({ title: '本商品已经售罄', icon: 'none' });
return;
} else {
const { category, ...goods } = this.goodInfo;
goods.skus = [sku];
goods.sku = sku
goods.num = 1;
goods.flag = true;
goods.skuId = selectedSku
goods.categoryId = category.id;
goods.goodsName = category.name;
Utils.getallNum(goods);
if (type == 'buyNow') {
uni.navigateTo({ url: `/orderSubPackage/pages/settlement/index?buyType=1` })
} else {
uni.switchTab({ url: '/pages/menu/menu' })
} }
],
"skus": [
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "无糖",
"price": 0.00
} }
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 2,
"ruleName": "冰",
"price": 2.00
}, },
{ // 付款前未登录发起授权
"specId": 2, loginByPhoneNumber(e) {
"specName": "糖度", if (e.detail.errMsg == 'getPhoneNumber:ok') {
"ruleId": 3, User.getPhoneNumber(e);
"ruleName": "无糖", } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
"price": 0.00 uni.showToast({ title: '已拒绝手机号授权', icon: 'error' })
} }
]
}, },
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "常温",
"price": 0.00
}, },
{ computed: {
"specId": 2, userms() {
"specName": "糖度", return this.$store.getters.Authorization;
"ruleId": 3,
"ruleName": "加糖",
"price": 2.00
}
]
},
{
"skuId": 1,
"state": 1,
"rules": [
{
"specId": 1,
"specName": "温度",
"ruleId": 1,
"ruleName": "冰",
"price": 2.00
},
{
"specId": 2,
"specName": "糖度",
"ruleId": 3,
"ruleName": "加糖",
"price": 4.00
}
]
}
]
}
}
}, },
onLoad() {
}, },
methods: { }
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.uni-margin-wrap {
.uni-margin-wrap {
height: 444rpx;
width: 100%; width: 100%;
background: #ff00f0; }
}
.swiper-spec-content {
height: 300rpx; .swiper {
height: 597rpx;
width: 100%; width: 100%;
} }
.swiper-spec-content-item {
display: block; .swiper_img {
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-spec-content-item-img {
height: 100%;
width: 100%; width: 100%;
} height: 100% !important;
.spec-content { }
} .spec-content {}
.spec-info-left{
padding:22rpx 34rpx; .spec-info-left {
} padding: 22rpx 34rpx;
.good {
}
.specs {
margin-top: 30rpx;
}
.good {
display: block; display: block;
width: 100%; width: 100%;
text-align: left; text-align: left;
.good-name { .good-name {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
...@@ -286,78 +185,124 @@ ...@@ -286,78 +185,124 @@
color: #000000; color: #000000;
line-height: 44rpx; line-height: 44rpx;
} }
.good-spec-name { .good-spec-name {
margin-top:22rpx; margin-top: 24rpx;
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
font-size: 28rpx; font-size: 28rpx;
text-align: left; text-align: left;
line-height: 40rpx; line-height: 40rpx;
font-weight: bold; font-weight: bold;
} }
.good-spec-rule { .good-spec-rule {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-left: 8rpx; margin-left: 8rpx;
margin-top: 24rpx;
flex-wrap: wrap;
} }
} }
.good-spec-rule-item {
.good-spec-rule-item {
width: 120rpx;
height: 48rpx;
border-radius: 6rpx;
font-size: 24rpx; font-size: 24rpx;
margin-right: 10rpx; margin-right: 10rpx;
margin-top: 10rpx;
color: #000;
line-height: 48rpx;
text-align: center;
display: inline-block;
&.active {
background: #006ECF;
color: #fff;
} }
.spec-detail { }
.spec-detail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.spec-detail-title{
.spec-detail-title {
font-weight: bold; font-weight: bold;
} margin-bottom: 30rpx;
.spec-detail-img { }
display: flex;
flex-direction: column; .spec-detail-img {
margin-top: 0rpx; height: 500rpx;
margin-left: auto; }
margin-right: auto;
margin-bottom: 0rpx; .spec-detail-img-item {
padding: 0rpx;
justify-content: center;
align-items: center;
}
.spec-detail-img-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.good-select-height{
height:200rpx; .good-select-height {
} height: 200rpx;
.good-select{ }
width: 90%;
.good-select {
width: 100%;
position: fixed; position: fixed;
bottom: 0rpx; bottom: 0rpx;
text-align: center; text-align: center;
} background-color: #fff;
.good-select-price{ }
.good-select-price {
display: flex; display: flex;
margin-top: 20rpx; align-items: center;
justify-content: flex-start; height: 58rpx;
align-items: flex-end; background: #FFFFFF;
} }
.good-select-price-normal{
.good-select-price-normal {
font-size: 36rpx; font-size: 36rpx;
color: rgba(235, 95, 23, 1); color: rgba(235, 95, 23, 1);
} margin-right: 10rpx;
.good-select-price-small{ font-weight: 600;
}
.good-select-price-small {
font-size: 20rpx; font-size: 20rpx;
text-decoration:line-through; text-decoration: line-through;
} }
.good-select-cont{
.good-select-cont {
margin-top: 20rpx; margin-top: 20rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} justify-content: space-between;
.good-select-btn { padding: 0 32rpx;
} }
.good-select-btn1 {
width: 328rpx;
height: 76rpx;
border-radius: 10rpx;
border: 2rpx solid #006ECF;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #006ECF;
line-height: 76rpx;
text-align: center;
}
.good-select-btn2 {
width: 328rpx;
height: 76rpx;
background: #006ECF;
border-radius: 10rpx;
line-height: 76rpx;
text-align: center;
color: #fff;
}
</style> </style>
orderSubPackage/pages/demo/demo.vue deleted 100644 → 0
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
orderSubPackage/pages/orderInfo/index.vue 0 → 100644
<template>
<div class="pages">
<div class="order_status">
<view class="status_text" v-if="orderInfo.state == 0">订单状态：创建未校验</view>
<view class="status_text" v-if="orderInfo.state == 1">订单状态：未支付</view>
<view class="status_text" v-if="orderInfo.state == 2">订单状态：排队中</view>
<view class="status_text" v-if="orderInfo.state == 3">订单状态：制作中</view>
<view class="status_text" v-if="orderInfo.state == 4">订单状态：制作完成</view>
<view class="status_text" v-if="orderInfo.state == 5">订单状态：待取超时</view>
<view class="status_text" v-if="orderInfo.state == 6">订单状态：完成</view>
<view class="status_text" v-if="orderInfo.state == 7">订单状态：取消</view>
<view class="status_text" v-if="orderInfo.state == 8">订单状态：取消</view>
<view class="status_text" v-if="orderInfo.state == 9">订单状态：取消</view>
<view class="status_text" v-if="orderInfo.state == 10">订单状态：取消</view>
<view class="status_text" v-if="orderInfo.state == 11">订单状态：已退款</view>
<view class="status_text" v-if="orderInfo.state == 12">订单状态：部分退款</view>
<div>
<a type="primary" @click="toRefund" v-if="orderInfo.state == 1" class="btn">申请退款</a>
<a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn">申请退款</a>
</div>
</div>
<div class="order_flow">
<div class="code">取单码 Mon999</div>
<image mode="aspectFit" :src="orderInfo.pickCode" class="qr_code"></image>
<div class="flow_describe">
<h3>扫码流程 </h3>
<image :mode="'aspectFit'" width="600px" class="flow_img" src="../../../static/imgs/order_flow.png">
</image>
</div>
<div class="shop_info">
<div class="address">
<div class="address_1">北京朝阳建外SOHO东区A座店</div>
<div class="address_2">距您132m，请确定门店后下单</div>
</div>
<div v-for="item in orderInfo.orderDetails" :key="item.id">
<div class="goods">
<div class="goods_item">
<image mode="aspectFit" :src="jsonParse(item.goods.pics).thumbnail" class="goods_img">
</image>
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.goodsName }}</div>
<div class="price">¥{{ item.realAmount }}</div>
</div>
<div class="goods_psce">
<div class="psce_name">
<span v-for="rule in jsonParse(item.specRuleDetail)" :key="rule.specId">
{{ rule.ruleName }}/
</span>
</div>
<div class="size">*{{ item.num }}</div>
</div>
</div>
</div>
</div>
<div class="discount">
<div class="discount_1">
<div class="name">优惠免减</div>
<div class="price">- ¥5</div>
</div>
<div class="concessional_rate">
<div class="name">优惠免减</div>
<div class="price">- ¥5</div>
</div>
</div>
</div>
<div class="total">
<div class="size">共一件商品</div>
<div>
<span class="paid_in">实付</span>
<span class="money">￥10</span>
</div>
</div>
</div>
</div>
<div class="order_describe">
<h3>订单信息</h3>
<div class="item">
<span class="label">下单时间：</span>
<span class="value">2022-11-12 10:20:20</span>
</div>
<div class="item">
<span class="label">取单码号：</span>
<span class="value">2022-11-12 10:20:20</span>
</div>
<div class="item">
<span class="label">订单编号：</span>
<span class="value">2022-11-12 10:20:20</span>
</div>
</div>
<div class="customer_service">
<span>有疑问，联系客服</span>
<u-icon name="arrow-right" color="#000" size="20"></u-icon>
</div>
</div>
</template>
<script>
import Order from '@/request/order'
export default {
onLoad() {
this.orderInfo = uni.getStorageSync('orderInfo');
},
data() {
return {
orderInfo: {}
}
},
methods: {
toRefund() {
Order.orderRefund({ orderId: this.orderInfo.id, refundAmount: this.orderInfo.amount }).then(res => {
console.log(res);
uni.switchTab({ url: '/pages/menu/menu' })
})
},
jsonParse(json) {
return JSON.parse(json)
}
}
}
</script>
<style lang="scss" scoped>
.pages {
padding-top: 1rpx;
padding-bottom: 30rpx;
}
.order_status {
width: 686rpx;
height: 174rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 32rpx auto 0;
padding: 14px;
.status_text {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
text-align: center;
}
.btn {
width: 160rpx;
height: 52rpx;
background: #006ECF;
border-radius: 6rpx;
display: block;
margin: 20rpx auto;
padding: 0;
line-height: 52rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
font-size: 20rpx;
text-align: center;
}
}
.order_flow {
background: #FFFFFF;
border-radius: 10rpx;
margin-top: 32rpx;
padding-top: 65rpx;
.code {
font-size: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
text-align: center;
}
.qr_code {
width: 508rpx;
height: 510rpx;
display: block;
margin: 25rpx auto;
background-color: #ccc;
}
.flow_describe {
width: 686rpx;
height: 340rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
border-radius: 10rpx;
margin: 0 auto;
padding: 30rpx;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
}
.flow_img {
width: 600rpx;
height: 214rpx;
display: block;
margin: 24rpx auto;
}
}
}
.shop_info {
width: 686rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 32rpx;
padding: 24rpx 32rpx;
box-sizing: border-box;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.address {
margin-top: 16rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.address_2 {
margin-top: 5rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
.goods {
margin-top: 35rpx;
padding-top: 35rpx;
.goods_item {
display: flex;
align-items: center;
margin-top: 20rpx;
}
.goods_img {
height: 80rpx;
width: 80rpx;
background-color: #eee;
margin-right: 50rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
}
.price {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #000000;
}
.psce_name {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.size {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
.goods_psce {
margin-top: 10rpx;
}
}
}
.discount {
margin-top: 24rpx;
padding-bottom: 24rpx;
border-bottom: 1rpx solid #666;
.discount_1 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333333;
.price {
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #EB5F17;
}
}
.concessional_rate {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 18rpx;
.price {
font-family: Arial-BoldMT, Arial;
font-weight: 700;
color: #000;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 52rpx;
.size {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.paid_in {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #000000;
}
.money {
font-weight: 600;
font-size: 32rpx;
color: #000000;
vertical-align: middle;
}
}
}
.order_describe {
background: #fff;
border-radius: 10rpx;
padding: 0 62rpx 24rpx;
margin-top: 32rpx;
h3 {
padding: 24rpx 0;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
border-bottom: 1rpx solid #666;
}
.item {
margin-top: 20rpx;
.label {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.value {
font-size: 24rpx;
font-family: ArialMT;
color: #333333;
}
}
}
.customer_service {
height: 90rpx;
line-height: 90rpx;
background: #FFFFFF;
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
padding: 0 64rpx;
margin: 32rpx 0;
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
orderSubPackage/pages/settlement/index.vue 0 → 100644
<template>
<view class="pages">
<div class="shop_info">
<h3>门店确认</h3>
<div class="address">
<div class="address_1">北京朝阳建外SOHO东区A座店</div>
<div class="address_2">距您132m，请确定门店后下单</div>
</div>
<div class="take_order">
<div class="title">取单时间</div>
<div class="time">现在下单，预计 <span class="min">5</span> 分钟后取餐</div>
</div>
</div>
<div class="goods_info">
<h3>商品详情</h3>
<div class="goods" v-for="item in goods" :key="item.goodsId">
<div class="goods_item">
<image mode="aspectFit" class="goods_img" src=""></image>
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.name }}</div>
<div class="price">¥{{ item.sku.price }}</div>
</div>
<div class="goods_psce">
<div class="psce_name">/</div>
<div class="size">x {{ item.num }}</div>
</div>
</div>
</div>
<div class="discount">
<div class="discount_1">
<div class="name">优惠免减</div>
<div class="price">- ¥{{ itemReduction(item.sku.discount, item.sku.price) }}</div>
</div>
<div class="concessional_rate">
<div class="name">特惠价</div>
<div class="price">¥{{ item.sku.discount }}</div>
</div>
</div>
</div>
<div class="total">
<div class="size">共{{ totalNum }}件商品</div>
<div>
<span class="paid_in">实付</span>
<span class="money">￥{{ totalPrice }}</span>
</div>
</div>
</div>
<div class="Payment_method">
<div>支付方式</div>
<div class="type">
<image mode="aspectFit" src="../../../static/imgs/weixin-3.png" class="icon"></image>
<span>微信支付</span>
</div>
</div>
<div class="footer">
<div class="total">
<div class="the_sum">
<span class="name">合计</span>
<span class="price">￥{{ totalPrice }}</span>
</div>
<div class="sun">
<div class="price">总优惠￥{{ reduction }}</div>
</div>
</div>
<view class="payment" @click="saveReserve" v-if="userms">
付款
</view>
<button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="saveReserve">
付款
</button>
</div>
</view>
</template>
<script>
import { $EventBus } from "../../../utils/EventBus";
import Utils from '@/utils/utils'
import Menu from '@/request/menu'
export default {
onLoad(option) {
this.buyType = option.buyType;
console.log(uni.getStorageSync('shopCarInfo'));
this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar', () => {
this.goods = uni.getStorageSync('shopCarInfo') || [];
});
},
data() {
return {
goods: [],
buyType: ''
}
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
totalNum() {
let totalNum = 0;
this.goods.map(item => {
item.flag ? totalNum += item.num : totalNum += 0
})
return totalNum
},
reduction() {
let price = 0;
let discountNum = 0;
this.goods.forEach(item => {
const sku = item.sku;
if (item.flag) {
discountNum += item.num * sku.discount
price += item.num * sku.price
} else {
totalPrice += 0
price += 0
}
})
return (price - discountNum).toFixed(2)
},
totalPrice() {
let totalPrice = 0;
this.goods.forEach(item => {
const sku = item.sku;
item.flag ? totalPrice += item.num * sku.discount : totalPrice += 0
})
return totalPrice
}
},
methods: {
itemReduction(discount, price) {
return (price - discount).toFixed(2)
},
//结算组装数据发起订单
async saveReserve() {
// 组装购物车数据或者立即支付数据
let res = await Utils.AssemblyOrder(this.totalPrice, this.totalNum, this.buyType);
if (res) {
// 发起订单
let orderInfo = await Menu.saveReserve(res);
if (orderInfo && orderInfo.data.code == 200) {
let payMent = await Menu.requestPayment(orderInfo.data.data, res, this.buyType);
}
}
}
}
}
</script>
<style lang="scss" scoped>
.pages {
padding-top: 1rpx;
}
.shop_info {
width: 686rpx;
height: 306rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 32rpx;
padding: 24rpx 32rpx;
box-sizing: border-box;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.address {
margin-top: 16rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.address_2 {
margin-top: 5rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
.take_order {
margin-top: 28rpx;
padding-top: 28rpx;
border-top: 1rpx solid #666;
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.time {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
.min {
color: #006ECF;
font-size: 28rpx;
font-weight: 700;
margin: 0 5rpx;
display: inline-block;
}
}
}
}
.goods_info {
width: 686rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
margin-top: 32rpx;
padding: 24rpx 32rpx;
box-sizing: border-box;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.goods {
margin-top: 42rpx;
border-bottom: 1rpx solid #666;
padding-bottom: 20rpx;
.goods_item {
display: flex;
align-items: center;
}
.goods_img {
height: 80rpx;
width: 80rpx;
background-color: #eee;
margin-right: 50rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 24rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
}
.price {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #000000;
}
.psce_name {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.size {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
.goods_psce {
margin-top: 10rpx;
}
}
}
.discount {
margin-top: 15rpx;
padding-top: 15rpx;
.discount_1 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333333;
.price {
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #EB5F17;
}
}
.concessional_rate {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 18rpx;
.price {
font-family: Arial-BoldMT, Arial;
font-weight: 700;
color: #000;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 52rpx;
.size {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.paid_in {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #000000;
}
.money {
font-weight: 600;
font-size: 32rpx;
color: #000000;
vertical-align: middle;
}
}
}
.Payment_method {
width: 686rpx;
height: 86rpx;
margin: 32rpx auto 0;
padding: 0 32rpx;
background: #FFFFFF;
border-radius: 10rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.type {
display: flex;
align-items: center;
font-weight: 600;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
}
.footer {
height: 92rpx;
background: #fff;
position: fixed;
bottom: 0;
display: flex;
width: 100%;
.total {
flex: 1;
padding-left: 32rpx;
.the_sum {
.name {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.price {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #000000;
}
}
.sun {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF0E00;
margin-top: 10rpx;
}
}
.payment {
width: 170rpx;
height: 100%;
background: #006ECF;
text-align: center;
line-height: 92rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
}
</style>
\ No newline at end of file
pages.json
{ "easycom": { {
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}, },
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages "pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
} },
,{
"path" : "pages/menu/menu",
"style" :
{ {
"path": "pages/menu/menu",
"style": {
"navigationBarTitleText": "菜单", "navigationBarTitleText": "菜单",
"navigationStyle":"custom", "navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
},{
"path" : "pages/order/order",
"style" :
{ {
"path": "pages/order/order",
"style": {
"navigationBarTitleText": "订单", "navigationBarTitleText": "订单",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}
,{
"path" : "pages/mine/mine",
"style" :
{ {
"path": "pages/mine/mine",
"style": {
"navigationBarTitleText": "我的", "navigationBarTitleText": "我的",
"navigationStyle":"custom", "navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
} }
], ],
"subPackages": [ "subPackages": [
...@@ -42,32 +39,19 @@ ...@@ -42,32 +39,19 @@
"root": "menuSubPackage", "root": "menuSubPackage",
"pages": [ "pages": [
{ {
"path" : "pages/goodsDetail/goodsDetail", "path": "pages/goodsDetail/goodsDetail",
"style" : "style": {
{
"navigationBarTitleText": "", "navigationBarTitleText": "",
"navigationStyle":"custom", "navigationStyle": "custom",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
}
,{
"path" : "pages/areaSelect/areaSelect",
"style" :
{ {
"path": "pages/areaSelect/areaSelect",
"style": {
"navigationBarTitleText": "", "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}
,{
"path" : "pages/settlement/settlement",
"style" :
{
"navigationBarTitleText": "订单结算",
"enablePullDownRefresh": false
}
} }
] ]
}, },
...@@ -75,31 +59,24 @@ ...@@ -75,31 +59,24 @@
"root": "orderSubPackage", "root": "orderSubPackage",
"pages": [ "pages": [
{ {
"path": "pages/demo/demo", "path": "pages/settlement/index",
"style": { "style": {
// "navigationBarBackgroundColor": "", "navigationBarTitleText": "订单结算",
// "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
// "navigationStyle":"custom"
} }
}
]
}, },
{ {
"root": "mineSubPackage", "path": "pages/orderInfo/index",
"pages": [
{
"path": "pages/demo/demo",
"style": { "style": {
// "navigationBarBackgroundColor": "", "navigationBarTitleText": "订单详情",
// "navigationBarTitleText": "",
"enablePullDownRefresh": false "enablePullDownRefresh": false
// "navigationStyle":"custom"
} }
} }
] ]
},
{
"root": "mineSubPackage",
"pages": []
} }
], ],
"globalStyle": { "globalStyle": {
...@@ -109,13 +86,15 @@ ...@@ -109,13 +86,15 @@
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}, },
"tabBar": { "tabBar": {
"custom":true, "custom": true,
"list": [ "list": [
{ {
"pagePath": "pages/menu/menu" "pagePath": "pages/menu/menu"
},{ },
{
"pagePath": "pages/order/order" "pagePath": "pages/order/order"
}, { },
{
"pagePath": "pages/mine/mine" "pagePath": "pages/mine/mine"
} }
] ]
......
pages/index/index.vue
...@@ -4,23 +4,23 @@ ...@@ -4,23 +4,23 @@
</template> </template>
<script> <script>
import config from '../../static/config/index.js' import config from '../../static/config/index.js'
import Order from '../../request/order/index' import Order from '../../request/order/index'
import User from '@/request/user' import User from '@/request/user'
import Menu from '@/request/menu' import Menu from '@/request/menu'
export default { export default {
data() { data() {
return { return {
id:'' id: ''
} }
}, },
onLoad(options) { onLoad(options) {
this.id=''; this.id = '';
this.$store.commit('setOrderId',''); this.$store.commit('setOrderId', '');
if(options.q){ if (options.q) {
let url=decodeURIComponent(options.q); let url = decodeURIComponent(options.q);
this.id=url.split('/')[url.split('/').length-1]; this.id = url.split('/')[url.split('/').length - 1];
this.$store.commit('setOrderId',this.id); this.$store.commit('setOrderId', this.id);
} }
// this.id=1; // this.id=1;
}, },
...@@ -29,39 +29,39 @@ ...@@ -29,39 +29,39 @@
// let curRoute = routes[routes.length - 1].route //获取当前页面路由 // let curRoute = routes[routes.length - 1].route //获取当前页面路由
//   let curParam = routes[routes.length - 1].options; //   let curParam = routes[routes.length - 1].options;
//  console.log(curParam) //  console.log(curParam)
let Authorization=uni.getStorageSync(`Authorization`); let Authorization = uni.getStorageSync(`Authorization`);
let userPhoneInfo=uni.getStorageSync(`userPhoneInfo`); let userPhoneInfo = uni.getStorageSync(`userPhoneInfo`);
if(Authorization && userPhoneInfo){ // if (Authorization && userPhoneInfo) {
this.$store.commit('setUserPhoneInfo',userPhoneInfo); this.$store.commit('setUserPhoneInfo', userPhoneInfo);
this.$store.commit('setAuthorization',Authorization); this.$store.commit('setAuthorization', Authorization);
if(this.id!=''){ if (this.id != '') {
uni.navigateTo({ uni.navigateTo({
url:`/menuSubPackage/pages/settlement/settlement?orderId=${this.id}&buyType=3` url: `/menuSubPackage/pages/settlement/settlement?orderId=${this.id}&buyType=3`
}) })
}else{ } else {
uni.reLaunch({ uni.reLaunch({
url:'/pages/menu/menu' url: '/pages/menu/menu'
}) })
} }
}else{ } else {
uni.removeStorageSync('Authorization'); uni.removeStorageSync('Authorization');
uni.removeStorageSync('userPhoneInfo'); uni.removeStorageSync('userPhoneInfo');
if(this.id!=''){ if (this.id != '') {
let _this = this; let _this = this;
uni.showToast({ uni.showToast({
title:'请授权登录', title: '请授权登录',
icon:'error', icon: 'error',
success() { success() {
setTimeout(()=>{ setTimeout(() => {
uni.reLaunch({ uni.reLaunch({
url:'/pages/menu/menu?orderId='+_this.id url: '/pages/menu/menu?orderId=' + _this.id
}) })
},1500) }, 1500)
} }
}) })
}else{ } else {
uni.reLaunch({ uni.reLaunch({
url:'/pages/menu/menu' url: '/pages/menu/menu'
}) })
} }
...@@ -70,33 +70,33 @@ ...@@ -70,33 +70,33 @@
}, },
methods: { methods: {
} }
} }
</script> </script>
<style> <style>
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.logo { .logo {
height: 200rpx; height: 200rpx;
width: 200rpx; width: 200rpx;
margin-top: 200rpx; margin-top: 200rpx;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 50rpx; margin-bottom: 50rpx;
} }
.text-area { .text-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.title { .title {
font-size: 36rpx; font-size: 36rpx;
color: #8f8f94; color: #8f8f94;
} }
</style> </style>
pages/menu/menu.vue
<template> <template>
<view class="menu-box" :style="{height:`${height}px`}"> <view class="menu-box" :style="{ height: `${height}px` }">
<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="changeLocaltion"> <view class="shop-box"
<text class="shop-name">{{shopInfo.name}}</text> :style="{ height: `${menuINfo.height}px`, 'line-height': `${menuINfo.height}px` }"
@click="changeLocaltion">
<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>
</view> </view>
<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！{{'我是谁'}}</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> --> <button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button> @getphonenumber="getPhoneNumber">立刻登录</button>
</view> </view>
</view> </view>
<view class="order-banner" v-if="buied"> <view class="order-banner" v-if="buied">
...@@ -31,43 +35,40 @@ ...@@ -31,43 +35,40 @@
</view> </view>
<view class="line"></view> <view class="line"></view>
<view class="barCode-box"> <view class="barCode-box">
<view class="barCode"><image :src="'../../static/logo.png'"></image></view> <view class="barCode">
<image :src="'../../static/logo.png'"></image>
</view>
<view class="barCode-dis">点击二维码取单</view> <view class="barCode-dis">点击二维码取单</view>
</view> </view>
</view> </view>
<view class="page-body" > <view class="page-body">
<scroll-view class="nav-left" scroll-y :style="{ height: `${height - bannerh}px` }"
<scroll-view class="nav-left" scroll-y :style="{height:`${height-bannerh}px`}" :scroll-top="scrollLeftTop" scroll-with-animation> :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData"> <view class="nav-left-item" @click="categoryClickMain(index)" :key="index"
:class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
{{ item.name }} {{ item.name }}
<view :class="index == categoryActive ? 'active-line' : ''"></view> <view :class="index == categoryActive ? 'active-line' : ''"></view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view <scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll"
class="nav-right" :style="{ height: `${height - bannerh}px` }" scroll-with-animation>
scroll-y <view v-for="category in classifyData" :key="category.id" class="box">
:scroll-top="scrollTop" <view class="right-title">{{ category.name }}</view>
@scroll="scroll" <view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId"
:style="{height:`${height-bannerh}px`}" @click="cart(item, category)">
scroll-with-animation
>
<view v-for="(category, index) in classifyData" :key="index" class="box">
<view class="right-title">{{category.name}}</view>
<view class="nav-right-item" v-for="(item, i) in category.goods" :key="item.goodsId" @click="cart(item)">
<image class="thumbnail" :src="item.pics.thumbnail" /> <image class="thumbnail" :src="item.pics.thumbnail" />
<view class="info"> <view class="info">
<view class="goods-name">{{ item.name }}</view> <view class="goods-name">{{ item.name }}</view>
<view class="tags"> <view class="tags">
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{tag}}</view> <view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
</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.stop="getallNum(item,category)">+</view> <view class="add-btn" @click.stop="getallNum(item, category)">+</view>
</view> </view>
<view class="mon"> <view class="mon">
<view class="discount">￥{{item.discount}}</view> <view class="discount">￥{{ item.discount }}</view>
<view class="price">￥<text class="num">{{item.price}}</text></view> <view class="price">￥<text class="num">{{ item.price }}</text></view>
</view> </view>
</view> </view>
</view> </view>
...@@ -78,19 +79,19 @@ ...@@ -78,19 +79,19 @@
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import User from '@/request/user' 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'; import { $EventBus } from '@/utils/EventBus';
export default { export default {
components: { ShopCar },
data() { data() {
return { return {
orderId:null,// 如果有扫码进来的支付orderId则存入 orderId: null,// 如果有扫码进来的支付orderId则存入
shopInfo:{name:'请选择'},// 店铺信息 shopInfo: { name: '请选择' },// 店铺信息
menuINfo:{}, menuINfo: {},
buied: false,//控制首页取单码区域显隐 buied: false,//控制首页取单码区域显隐
orderBannerh: 0, orderBannerh: 0,
bannerh: 0, bannerh: 0,
...@@ -118,31 +119,25 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -118,31 +119,25 @@ import { $EventBus } from '@/utils/EventBus';
created() { created() {
this.getLocation(); this.getLocation();
this.menuINfo = uni.getMenuButtonBoundingClientRect(); this.menuINfo = uni.getMenuButtonBoundingClientRect();
console.log(this.menuINfo,77766)
//如果你的分类数据为后台异步获取请 将下方代码放置你的数据回调中 //如果你的分类数据为后台异步获取请 将下方代码放置你的数据回调中
// this.$nextTick(()=>{ // this.$nextTick(()=>{
// this.getHeightList(); // this.getHeightList();
// }) // })
}, },
async onShow() { async onShow() {
console.log(1243) let _this = this;
// 获取首页菜单数据 // 获取首页菜单数据
let shopInfo = this.$store.getters.shopInfo; let shopInfo = this.$store.getters.shopInfo;
if(shopInfo && shopInfo[0].id){ if (shopInfo && shopInfo[0]?.id) {
await this.getMenuList(shopInfo[0].id); await this.getMenuList(shopInfo[0].id);
}else{ } else {
await this.getMenuList(6); await this.getMenuList(12);
} }
let _this = this; uni.createSelectorQuery().select(".menu-banner").boundingClientRect(data => {
uni.createSelectorQuery()
.select(".menu-banner")
.boundingClientRect(data => {
_this.bannerh = data.height; _this.bannerh = data.height;
}).exec(); }).exec();
if (this.buied) { if (this.buied) {
uni.createSelectorQuery() uni.createSelectorQuery().select(".order-banner").boundingClientRect(data => {
.select(".order-banner")
.boundingClientRect(data => {
_this.orderBannerh = data.height; _this.orderBannerh = data.height;
_this.height = uni.getSystemInfoSync().windowHeight - _this.tabBarHeight - _this.orderBannerh; _this.height = uni.getSystemInfoSync().windowHeight - _this.tabBarHeight - _this.orderBannerh;
}).exec(); }).exec();
...@@ -153,41 +148,30 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -153,41 +148,30 @@ import { $EventBus } from '@/utils/EventBus';
this.getHeightList(); this.getHeightList();
}, },
onHide() { onHide() {
this.$refs.shopbar.showShopCar=false; this.$refs.shopbar.showShopCar = false;
}, },
onLoad: async function (options) { onLoad: async function (options) {
if(options.orderId){ if (options.orderId) { this.orderId = options.orderId; }
this.orderId=options.orderId;
}
$EventBus.$off('getMenuList') $EventBus.$off('getMenuList')
$EventBus.$on('getMenuList',(data)=>{ $EventBus.$on('getMenuList', (data) => {
this.shopInfo=data; this.shopInfo = data;
console.log(data,554433)
this.getMenuList(data.id) this.getMenuList(data.id)
}) })
},
onReady() {
}, },
onReady() { },
methods: { methods: {
// 获取用户授权登录 // 获取用户授权登录
uniGetUserInfo() { uniGetUserInfo() { User.uniGetUserInfo(); },
User.uniGetUserInfo();
},
// 手机号授权登录 // 手机号授权登录
getPhoneNumber(e) { getPhoneNumber(e) {
if(e.detail.errMsg=='getPhoneNumber:ok'){ if (e.detail.errMsg == 'getPhoneNumber:ok') {
User.getPhoneNumber(e,this.orderId); User.getPhoneNumber(e, this.orderId);
}else if( e.detail.errMsg=="getPhoneNumber:fail user deny"){ } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
uni.showToast({title:'已拒绝手机号授权',icon:'error'}) uni.showToast({ title: '已拒绝手机号授权', icon: 'error' })
} }
}, },
changeLocaltion() { changeLocaltion() {
console.log(22345) uni.navigateTo({ url: '/menuSubPackage/pages/areaSelect/areaSelect' })
uni.navigateTo({
url:'/menuSubPackage/pages/areaSelect/areaSelect'
})
}, },
// 获取定位授权 // 获取定位授权
getLocation() { getLocation() {
...@@ -198,28 +182,21 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -198,28 +182,21 @@ import { $EventBus } from '@/utils/EventBus';
uni.authorize({ uni.authorize({
scope: 'scope.userLocation', scope: 'scope.userLocation',
success: (e) => { //1.1 允许授权 success: (e) => { //1.1 允许授权
console.log(e,11111)
User.getLocation(); User.getLocation();
}, },
fail:(err)=> { //1.2 拒绝授权 fail: (err) => { //1.2 拒绝授权
console.log(err,'拒绝')
uni.showModal({ uni.showModal({
title:'提示', title: '提示',
content:'您已拒绝授权定位,请重新开启', content: '您已拒绝授权定位,请重新开启',
confirmText:'去开启', confirmText: '去开启',
success() { success() {
uni.openSetting({ uni.openSetting({
success(res) { success(res) {
console.log(res,8877) if (res.authSetting['scope.userLocation'] == true) {
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)
}})
} }
}) })
} }
...@@ -231,51 +208,30 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -231,51 +208,30 @@ import { $EventBus } from '@/utils/EventBus';
}) })
}, },
async getMenuList(id) { async getMenuList(id) {
let res = await Menu.getMenuList(id); let { data } = await Menu.getMenuList(id);
if(res.data.code ==200){ if (data.code == 200) {
res.data.data.categorys.forEach(y=>{ data.data = data.data;
y.goods.forEach(v=>{ this.$store.commit('setMenuAllInfo', data.data);
v.specs=JSON.parse(v.specs); this.classifyData = data.data.categorys;
v.skus.forEach(u=>{u.rules=JSON.parse(u.rules)})
})
})
res.data.data = res.data.data;
console.log(res.data.data,87654567)
this.$store.commit('setMenuAllInfo',res.data.data);
this.classifyData = res.data.data.categorys;
} }
}, },
// 加入购物车数据 // 加入购物车数据
getallNum(item,category) { getallNum(item, category) {
let itemCopy = JSON.parse(JSON.stringify(item)); let itemCopy = JSON.parse(JSON.stringify(item));
itemCopy.skus = itemCopy.skus.find(v=>v.isDefault==1&&v.state!=2) || itemCopy.skus.find(v=>v.isDefault==0&&v.state!=2); const sku = itemCopy.skus.find(v => v.isDefault == 1 && v.state != 2) || itemCopy.skus.find(v => v.isDefault == 0 && v.state != 2);
if(!itemCopy.skus){ if (!itemCopy.skus) {
uni.showToast({title:'本商品已经售罄',icon:'none'}); uni.showToast({ title: '本商品已经售罄', icon: 'none' });
return; return;
}else{ } else {
console.log(category,'77777777777777yyyyyyyyyyyyy') itemCopy.skus = [sku];
itemCopy.skus=[itemCopy.skus]; itemCopy.sku = sku
itemCopy.num=1; itemCopy.skuId = sku?.skuId
itemCopy.flag=true; itemCopy.num = 1;
itemCopy.categoryId=category.id; itemCopy.flag = true;
itemCopy.goodsName=category.name; itemCopy.categoryId = category.id;
console.log(itemCopy,'mmmmmmm') itemCopy.goodsName = category.name;
Utils.getallNum(itemCopy); Utils.getallNum(itemCopy);
} }
// let 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;
...@@ -285,35 +241,19 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -285,35 +241,19 @@ import { $EventBus } from '@/utils/EventBus';
_this.navLeftHeight = _this.leftItemHeight * _this.classifyData.length; _this.navLeftHeight = _this.leftItemHeight * _this.classifyData.length;
_this.diff = _this.navLeftHeight; //- _this.height _this.diff = _this.navLeftHeight; //- _this.height
}); });
selectorQuery selectorQuery.selectAll(".box").boundingClientRect(function (rects) {
.selectAll(".box") let arr = [0], top = 0;
.boundingClientRect(function (rects) {
let arr = [0];
let top = 0;
rects.forEach(function (rect) { rects.forEach(function (rect) {
// rect.id // 节点的ID
// rect.dataset // 节点的dataset
// rect.left // 节点的左边界坐标
// rect.right // 节点的右边界坐标
// rect.top // 节点的上边界坐标
// rect.bottom // 节点的下边界坐标
// rect.width // 节点的宽度
// rect.height // 节点的高度
top += rect.height; top += rect.height;
arr.push(top); arr.push(top);
}); });
console.log(arr);
_this.arr = arr; _this.arr = arr;
}) }).exec();
.exec();
}, },
scroll(e) { scroll(e) {
let _this = this; let _this = this;
if (this.timeoutId) { if (this.timeoutId) { clearTimeout(this.timeoutId) }
clearTimeout(this.timeoutId); this.timeoutId = setTimeout(function () {//节流
}
this.timeoutId = setTimeout(function () {
//节流
_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2; _this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个 //+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
//若想使切换参考线为屏幕顶部请删除 _this.height/2 //若想使切换参考线为屏幕顶部请删除 _this.height/2
...@@ -334,38 +274,39 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -334,38 +274,39 @@ import { $EventBus } from '@/utils/EventBus';
this.categoryActive = index; this.categoryActive = index;
this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]); //防止两次相等造成点击不触发滚动时间 this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]); //防止两次相等造成点击不触发滚动时间
}, },
cart: function (text) { cart: (item, category) => {
uni.navigateTo({url:'/menuSubPackage/pages/goodsDetail/goodsDetail'}) uni.setStorageSync('goodsInfo', JSON.stringify({ ...item, category }));
// uni.showToast({ uni.navigateTo({ url: '/menuSubPackage/pages/goodsDetail/goodsDetail' })
// title: text,
// icon: "none"
// });
} }
}, },
components: { ShopCar }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.menu-box{ .menu-box {
.shop-info{ .shop-info {
position: absolute; position: absolute;
left: 32rpx; left: 32rpx;
color: #FFFFFF; color: #FFFFFF;
.shop-box{
min-width:300rpx; .shop-box {
min-width: 300rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
.shop-name{
.shop-name {
flex: 1; flex: 1;
} }
.arrow-right-select{
width:9rpx; .arrow-right-select {
width: 9rpx;
} }
} }
.distance{
.distance {
height: 46rpx; height: 46rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -375,20 +316,23 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -375,20 +316,23 @@ import { $EventBus } from '@/utils/EventBus';
} }
} }
} }
.menu-banner{
.menu-banner {
height: 376rpx; height: 376rpx;
position:relative; position: relative;
image{
image {
width: 100%; width: 100%;
height: 376rpx; height: 376rpx;
} }
.login-area{
.login-area {
display: flex; display: flex;
width:624rpx; width: 624rpx;
height: 88rpx; height: 88rpx;
padding: 20rpx 22rpx; padding: 20rpx 22rpx;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.1); box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 10rpx; border-radius: 10rpx;
backdrop-filter: blur(10rpx); backdrop-filter: blur(10rpx);
position: absolute; position: absolute;
...@@ -396,7 +340,8 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -396,7 +340,8 @@ import { $EventBus } from '@/utils/EventBus';
bottom: 0; bottom: 0;
left: 64rpx; left: 64rpx;
box-sizing: border-box; box-sizing: border-box;
.avatar{
.avatar {
display: flex; display: flex;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
...@@ -404,23 +349,29 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -404,23 +349,29 @@ import { $EventBus } from '@/utils/EventBus';
width: 50rpx; width: 50rpx;
height: 48rpx; height: 48rpx;
margin-right: 22rpx; margin-right: 22rpx;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50,50,50,0.25); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
border-radius: 4rpx; border-radius: 4rpx;
image{
width:100%; image {
width: 100%;
height: 100%; height: 100%;
};
} }
.user-info{
;
}
.user-info {
flex: 1; flex: 1;
.user-name{
.user-name {
height: 28rpx; height: 28rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: ArialMT; font-family: ArialMT;
color: #FFFFFF; color: #FFFFFF;
line-height: 22rpx; line-height: 22rpx;
} }
.dialog{
.dialog {
display: flex; display: flex;
height: 22rpx; height: 22rpx;
font-size: 16rpx; font-size: 16rpx;
...@@ -428,11 +379,13 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -428,11 +379,13 @@ import { $EventBus } from '@/utils/EventBus';
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #FFFFFF;
line-height: 22rpx; line-height: 22rpx;
.content{
.content {
flex: 1; flex: 1;
} }
.arrow{
width:10rpx; .arrow {
width: 10rpx;
height: 12px; height: 12px;
display: flex; display: flex;
font-size: 20rpx; font-size: 20rpx;
...@@ -441,7 +394,8 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -441,7 +394,8 @@ import { $EventBus } from '@/utils/EventBus';
} }
} }
} }
.login-btn{
.login-btn {
// width: 114rpx; // width: 114rpx;
height: 48rpx; height: 48rpx;
background: #006ECF; background: #006ECF;
...@@ -456,39 +410,44 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -456,39 +410,44 @@ import { $EventBus } from '@/utils/EventBus';
} }
} }
.order-banner{
.order-banner {
width: 686rpx; width: 686rpx;
height: 179rpx; height: 179rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166,166,166,0.5); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(166, 166, 166, 0.5);
border-radius: 10rpx; border-radius: 10rpx;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
left:32rpx; left: 32rpx;
top:-8rpx; top: -8rpx;
z-index: 1; z-index: 1;
display: flex; display: flex;
.info{
.info {
padding-left: 32rpx; padding-left: 32rpx;
flex: 1; flex: 1;
.first{
.first {
height: 44rpx; height: 44rpx;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #323232; color: #323232;
line-height: 44rpx; line-height: 44rpx;
margin-top:40rpx; margin-top: 40rpx;
} }
.second{
margin-top:20rpx; .second {
margin-top: 20rpx;
height: 34rpx; height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #323232; color: #323232;
line-height: 34rpx; line-height: 34rpx;
.time{
.time {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
...@@ -497,33 +456,38 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -497,33 +456,38 @@ import { $EventBus } from '@/utils/EventBus';
} }
} }
} }
.line{
width:0; .line {
width: 0;
height: 104rpx; height: 104rpx;
border-right: 4rpx solid #006ECF; border-right: 4rpx solid #006ECF;
position: absolute; position: absolute;
right:188rpx; right: 188rpx;
top: 36rpx; top: 36rpx;
} }
.barCode-box{
.barCode-box {
margin-top: 30rpx; margin-top: 30rpx;
width:150rpx; width: 150rpx;
height: 122rpx; height: 122rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
flex-direction: column; flex-direction: column;
.barCode{
width:86rpx; .barCode {
width: 86rpx;
height: 86rpx; height: 86rpx;
background:#006ECF; background: #006ECF;
image{
width:100%; image {
width: 100%;
height: 100%; height: 100%;
} }
} }
.barCode-dis{
.barCode-dis {
text-align: center; text-align: center;
margin-top: 14rpx; margin-top: 14rpx;
font-size: 16rpx; font-size: 16rpx;
...@@ -534,11 +498,13 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -534,11 +498,13 @@ import { $EventBus } from '@/utils/EventBus';
} }
} }
} }
.page-body { .page-body {
display: flex; display: flex;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
} }
.nav { .nav {
display: flex; display: flex;
width: 100%; width: 100%;
...@@ -547,7 +513,7 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -547,7 +513,7 @@ import { $EventBus } from '@/utils/EventBus';
.nav-left { .nav-left {
width: 152rpx; width: 152rpx;
background: #fff; background: #fff;
border-right:2rpx solid #D5D5D5; border-right: 2rpx solid #D5D5D5;
} }
.nav-left-item { .nav-left-item {
...@@ -562,25 +528,30 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -562,25 +528,30 @@ import { $EventBus } from '@/utils/EventBus';
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.nav-left-item:last-child { .nav-left-item:last-child {
border-bottom: none; border-bottom: none;
} }
.nav-right { .nav-right {
width: 596rpx; width: 596rpx;
} }
.box { .box {
display: block; display: block;
overflow: hidden; overflow: hidden;
/* min-height: 100vh; */ /* min-height: 100vh; */
/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */ /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
} }
.box:last-child { .box:last-child {
border: none; border: none;
// min-height: 100vh; // min-height: 100vh;
} }
.right-title{
.right-title {
padding-left: 28rpx; padding-left: 28rpx;
margin-bottom:40rpx; margin-bottom: 40rpx;
height: 44rpx; height: 44rpx;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
...@@ -588,22 +559,27 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -588,22 +559,27 @@ import { $EventBus } from '@/utils/EventBus';
color: #000000; color: #000000;
line-height: 44rpx; line-height: 44rpx;
} }
.nav-right-item { .nav-right-item {
display: flex; display: flex;
padding: 0rpx 36rpx 0rpx 42rpx; padding: 0rpx 36rpx 0rpx 42rpx;
margin-bottom:50rpx; margin-bottom: 50rpx;
height: 162rpx; height: 162rpx;
background: #fff; background: #fff;
.thumbnail{//缩略图
.thumbnail {
//缩略图
display: flex; display: flex;
align-items: center; align-items: center;
width:140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
margin-right:34rpx; margin-right: 34rpx;
} }
.info{
.info {
flex: 1; flex: 1;
.goods-name{
.goods-name {
height: 40rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
...@@ -611,12 +587,13 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -611,12 +587,13 @@ import { $EventBus } from '@/utils/EventBus';
color: #000000; color: #000000;
line-height: 40rpx; line-height: 40rpx;
} }
.tags{
.tag-item{ .tags {
.tag-item {
height: 24rpx; height: 24rpx;
border-radius: 4rpx; border-radius: 4rpx;
border: 2rpx solid #006ECF; border: 2rpx solid #006ECF;
margin-right:10rpx; margin-right: 10rpx;
padding: 4rpx 6rpx; padding: 4rpx 6rpx;
font-size: 16rpx; font-size: 16rpx;
font-family: ArialMT; font-family: ArialMT;
...@@ -625,18 +602,21 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -625,18 +602,21 @@ import { $EventBus } from '@/utils/EventBus';
display: inline-block; display: inline-block;
} }
} }
.dis-box{
.dis-box {
display: flex; display: flex;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 40rpx; line-height: 40rpx;
.dis{
.dis {
flex: 1; flex: 1;
} }
.add-btn { .add-btn {
width:40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
border-radius: 50%; border-radius: 50%;
background: #006ECF; background: #006ECF;
...@@ -647,8 +627,9 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -647,8 +627,9 @@ import { $EventBus } from '@/utils/EventBus';
font-size: 36rpx; font-size: 36rpx;
} }
} }
.mon{
.discount{ .mon {
.discount {
display: inline-block; display: inline-block;
height: 32rpx; height: 32rpx;
font-size: 24rpx; font-size: 24rpx;
...@@ -658,15 +639,17 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -658,15 +639,17 @@ import { $EventBus } from '@/utils/EventBus';
line-height: 32rpx; line-height: 32rpx;
margin-right: 6rpx; margin-right: 6rpx;
} }
.price{
.price {
display: inline-block; display: inline-block;
height: 22rpx; height: 22rpx;
font-size: 20rpx; font-size: 20rpx;
font-family: ArialMT; font-family: ArialMT;
color: #666666; color: #666666;
line-height: 22rpx; line-height: 22rpx;
.num{
text-decoration:line-through; .num {
text-decoration: line-through;
} }
} }
} }
...@@ -685,15 +668,18 @@ import { $EventBus } from '@/utils/EventBus'; ...@@ -685,15 +668,18 @@ import { $EventBus } from '@/utils/EventBus';
color: #000000; color: #000000;
background: #fff; background: #fff;
} }
.active-line{
.active-line {
height: 170rpx; height: 170rpx;
width:2rpx; width: 2rpx;
position: absolute; position: absolute;
right:-2rpx; right: -2rpx;
top: 0; top: 0;
z-index: 1; z-index: 1;
border-right:4rpx solid #006ECF;; border-right: 4rpx solid #006ECF;
;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
/*取消小程序的默认导航条样式*/ /*取消小程序的默认导航条样式*/
width: 0; width: 0;
......
pages/mine/mine.vue
<template> <template>
<view> <view class="pages">
<view class="menu-banner"> <view class="menu-banner">
<view class="log"> <view class="log">
<image class="logImg" src="/static/imgs/hooloo.png"></image> <image class="logImg" src="/static/imgs/hooloo.png"></image>
<view class="logText">未 来 咖 啡</view> <view class="logText">未 来 咖 啡</view>
</view> </view>
<image src="../../static/imgs/banner.png"></image> <image src="../../static/imgs/banner.png"></image>
</view>
<view class="mod11 flex-col">
<view class="box16 flex-col"></view>
<text class="txt6">小黑山羊</text>
<view class="right_arrow">
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</view>
</view> </view>
<view class="contents">
<view class="myOrder">
<view class="order1">我的订单</view>
<view class="order2">点击查看订单</view>
<view>
<image class="orderImg" src="../../static/imgs/myOrder.png">
</image>
</view>
</view>
<view class="right_box">
<view class="box">
<view class="left">
<h3>HOOLOO券</h3>
<view class="dec">优惠多多不要错过</view>
</view>
<view class="right">
<image class="right_img" src="../../static/imgs/my3.png"></image>
</view>
</view>
<view class="box two">
<view class="left">
<h3>我的消息</h3>
<view class="dec">点击查看我的消息</view>
</view>
<view class="right">
<image class="right_img" src="../../static/imgs/myMail.png"></image>
</view>
</view>
</view>
</view>
<view class="function">
<h3>常用功能</h3>
<view class="function_item">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<text class="function_item_text">联系客服</text>
<u-icon name="arrow-right" class="function_item_icon" color="#000000" size="16"></u-icon>
</view>
</view>
<tabBar :selectedTabbar="selectedTabbar"></tabBar> <tabBar :selectedTabbar="selectedTabbar"></tabBar>
</view> </view>
</template> </template>
...@@ -36,7 +81,7 @@ export default { ...@@ -36,7 +81,7 @@ export default {
.log { .log {
position: absolute; position: absolute;
z-index: 99;
top: 100rpx; top: 100rpx;
left: 30rpx; left: 30rpx;
...@@ -62,4 +107,158 @@ export default { ...@@ -62,4 +107,158 @@ export default {
} }
} }
.mod11 {
margin: 0 auto;
width: 692rpx;
height: 144rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx;
backdrop-filter: blur(10rpx);
display: flex;
align-items: center;
margin-top: -72rpx;
padding: 0 30rpx;
box-sizing: border-box;
color: #fff;
.right_arrow {
margin-left: auto;
}
.txt6 {
margin-left: 20rpx;
}
.box16 {
width: 80rpx;
height: 80rpx;
background: #FF72C1;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
border-radius: 4rpx;
}
}
.contents {
display: flex;
align-items: center;
margin: 34rpx auto;
width: 692rpx;
.myOrder {
width: 270rpx;
height: 272rpx;
background: #FFFFFF;
border-radius: 10rpx;
text-align: center;
.order1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-top: 25rpx;
}
.order2 {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx;
}
.orderImg {
width: 70rpx;
height: 80rpx;
margin: 0 auto;
margin-top: 50rpx;
}
}
.right_box {
margin-left: 20rpx;
}
.box {
width: 396rpx;
height: 128rpx;
background: #FFFFFF;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 36rpx;
&.two {
margin-top: 15rpx;
}
.left {
text-align: center;
}
h3 {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: 700;
color: #000000;
}
.dec {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx
}
.right_img {
width: 80rpx;
height: 55rpx;
}
}
}
.function {
width: 692rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
padding: 25rpx;
box-sizing: border-box;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.function_item {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 34rpx;
display: flex;
align-items: center;
margin-top: 20rpx;
.function_item_text {
margin-left: 10rpx;
}
.function_item_icon {
margin-left: auto;
}
}
}
</style> </style>
\ No newline at end of file
pages/order/order.vue
<template> <template>
<view class="pages">
<view class="orders">
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
<view class="order_header">
<view> <view>
<h3 class="order_adrass">{{ item.shop.name }}</h3>
<text class="order_time">{{ item.shop.payTime }}</text>
</view>
<view class="order_status" v-if="item.state == 0">创建未校验</view>
<view class="order_status" v-if="item.state == 1">未支付</view>
<view class="order_status" v-if="item.state == 2">排队中</view>
<view class="order_status" v-if="item.state == 3">制作中</view>
<view class="order_status" v-if="item.state == 4">制作完成</view>
<view class="order_status" v-if="item.state == 5">待取超时</view>
<view class="order_status" v-if="item.state == 6">完成</view>
<view class="order_status" v-if="item.state == 7">取消</view>
<view class="order_status" v-if="item.state == 8">取消</view>
<view class="order_status" v-if="item.state == 9">取消</view>
<view class="order_status" v-if="item.state == 10">取消</view>
<view class="order_status" v-if="item.state == 11">已退款</view>
<view class="order_status" v-if="item.state == 12">部分退款</view>
</view>
<view class="order_content">
<view class="goods_item" v-for="good in item.orderDetails" :key="good.id">
<image class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image>
<view class="goods_text">
<view class="goods_title">{{ good.goodsName }}×{{ good.num }}</view>
<view class="goods_spce">
<span v-for="rule in jsonParse(good.specRuleDetail)" :key="rule.specId">
{{ rule.ruleName }}/
</span>
</view>
</view>
</view>
</view>
<view class="order_footer">
<view class="total">
共1件商品 合计： <text class="price">￥10.00</text>
</view>
<!-- <a class="btn" type="primary">再来一单</a> -->
</view>
</view>
</view>
<tabBar :selectedTabbar="selectedTabbar"></tabBar> <tabBar :selectedTabbar="selectedTabbar"></tabBar>
</view> </view>
</template> </template>
<script> <script>
export default { import order from '@/request/order'
name:'order', export default {
name: 'order',
data() { data() {
return { return {
selectedTabbar:1,//选中的tab selectedTabbar: 1,//选中的tab
list: []
} }
}, },
computed:{
async onLoad() {
const { data } = await order.getMyOrder();
this.list = data.rows
},
async onShow() {
const { data } = await order.getMyOrder();
this.list = data.rows
}, },
methods: { methods: {
openInfo(data) {
uni.setStorageSync('orderInfo', data);
let url = '/orderSubPackage/pages/orderInfo/index'
// : '/orderSubPackage/pages/settlement/index'
uni.navigateTo({ url })
},
jsonParse(json) {
return JSON.parse(json)
} }
} }
}
</script> </script>
<style> <style lang="scss" scoped>
.orders {
padding: 1rpx;
.order_item {
width: 686rpx;
min-height: 370rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 15rpx auto 0;
box-sizing: border-box;
padding: 28rpx 32rpx;
.order_header {
display: flex;
justify-content: space-between;
.order_adrass {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.order_time {
font-size: 20rpx;
font-family: ArialMT;
color: #666666;
}
.order_status {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #000000;
margin-top: 10rpx;
}
}
.order_content {
margin-top: 38rpx;
.goods_item {
display: flex;
align-items: center;
margin-top: 10rpx;
.goods_img {
height: 80rpx;
width: 80rpx;
background-color: #eee;
}
.goods_text {
margin-left: 38rpx;
.goods_title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.goods_spce {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 6rpx;
}
}
}
}
.order_footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 50rpx;
.total {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
.price {
color: #FF5200;
font-weight: 700
}
}
.btn {
width: 144rpx;
height: 48rpx;
line-height: 48rpx;
background: #006ECF;
border-radius: 6rpx;
font-size: 24rpx;
margin: 0;
color: #fff;
text-align: center;
}
}
}
}
</style> </style>
\ No newline at end of file
request/index.js
import appConfig from '@/static/config/index.js'; import appConfig from '@/static/config/index.js';
export function getBaseUrl() { export function getBaseUrl() {
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
console.log(121)
return appConfig.devApi; return appConfig.devApi;
} else { } else {
return appConfig.prodApi; return appConfig.prodApi;
} }
} }
module.exports = (vm) => { module.exports = (vm) => {
console.log(vm.$store) uni.$u.http.setConfig((config) => {
uni.$u.http.setConfig((config) => { config.baseURL = getBaseUrl();
config.baseURL= getBaseUrl();
// showLoading: process.env.NODE_ENV === 'development', // showLoading: process.env.NODE_ENV === 'development',
config.method= 'POST'; config.method = 'POST';
// 设置为json，返回后会对数据进行一次JSON.parse() // 设置为json，返回后会对数据进行一次JSON.parse()
config.dataType = 'json'; config.dataType = 'json';
config.timeout = 3000; // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms config.timeout = 3000; // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
// 配置请求头信息 // 配置请求头信息
config.header= { config.header = {
'Content-Type': 'application/json' // 'application/x-www-form-urlencoded' 'Content-Type': 'application/json', // 'application/x-www-form-urlencoded'
} };
return config; return config;
}); });
// 请求拦截 // 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作 uni.$u.http.interceptors.request.use(
(config) => {
// 可使用async await 做异步操作
uni.showLoading({ uni.showLoading({
title: '加载中', title: '加载中',
mask: true, mask: true,
}); });
let Authorization = uni.getStorageSync(`Authorization`); let Authorization = uni.getStorageSync(`Authorization`);
if (Authorization && config.url == '/order') { const configUrl = [
'/weixin/login',
'/weixin/getShop',
'/weixin/infoByShop',
'/application/getData',
];
if (Authorization && configUrl.indexOf(config.url) == -1) {
config.header.Authorization = Authorization; config.header.Authorization = Authorization;
} }
console.log(config,4444) console.log(config, 4444);
if (!Authorization) { // 如果token不存在，return Promise.reject(config) 会取消本次请求 if (!Authorization) {
// 如果token不存在，return Promise.reject(config) 会取消本次请求
// return Promise.reject(config); // return Promise.reject(config);
} }
return config return config;
}, config => { // 可使用async await 做异步操作 },
return Promise.reject(config) (config) => {
}); // 可使用async await 做异步操作
// 响应拦截 return Promise.reject(config);
uni.$u.http.interceptors.response.use((response) => { }
);
// 响应拦截
uni.$u.http.interceptors.response.use(
(response) => {
uni.hideLoading(); uni.hideLoading();
/* 对响应成功做点什么 可使用async await 做异步操作*/ /* 对响应成功做点什么 可使用async await 做异步操作*/
if (response.data.code !== 200) { // 服务端返回的状态码不等于200，则reject() if (response.data.code !== 200) {
// 服务端返回的状态码不等于200，则reject()
uni.showToast({ uni.showToast({
title: response.data.msg, title: response.data.msg,
icon: 'none', icon: 'none',
duration: 2000 duration: 2000,
}) });
return Promise.reject(response) return Promise.reject(response);
} // return Promise.reject 可使promise状态进入catch } // return Promise.reject 可使promise状态进入catch
console.log(response) return response;
return response },
}, (response) => { (response) => {
uni.hideLoading(); uni.hideLoading();
/* 对响应错误做点什么 （statusCode !== 200）*/ /* 对响应错误做点什么 （statusCode !== 200）*/
console.log(response) console.log(response);
return Promise.reject(response) return Promise.reject(response);
}); }
} );
\ No newline at end of file };
request/order/index.js
export default{ export default {
valiFrequency(id) { getMyOrder() {
return uni.$u.http
} .get('/app/getMyOrder', {
} params: {},
\ No newline at end of file })
.then((res) => res)
.catch((err) => uni.showToast({ title: '服务器错误', icon: 'none' }));
},
orderRefund(data) {
return uni.$u.http
.post('/system/refund', data)
.then((res) => res)
.catch((err) => uni.showToast({ title: '服务器错误', icon: 'none' }));
},
};
request/user/index.js
import Store from '@/store' import Store from '@/store';
import { $EventBus } from '../../utils/EventBus'; import { $EventBus } from '../../utils/EventBus';
export default{ export default {
getLocation() { getLocation() {
let _this = this; let _this = this;
return uni.getLocation({ 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');
var params = { var params = {
lat: res.latitude, lat: res.latitude,
lng: res.longitude lng: res.longitude,
} };
Store.commit('saveLocation',params); Store.commit('saveLocation', params);
// return params; // return params;
_this.getAddress(params); _this.getAddress(params);
}, },
fail: function (res) { fail: function (res) {
console.log(res,3333) console.log(res, 3333);
uni.showToast({ uni.showToast({
title: '获取地址失败，将导致部分功能不可用', title: '获取地址失败，将导致部分功能不可用',
icon: 'none' icon: 'none',
});
},
}); });
}
})
}, },
// 获取具体位置店铺/weixin/getShop // 获取具体位置店铺/weixin/getShop
getAddress(params) { getAddress(params) {
return uni.$u.http.get('/weixin/getShop',{ return uni.$u.http
params .get('/weixin/getShop', {
}).then((res)=>{ params,
if(res.data.code==200){ })
console.log(res.data.data,12345678) .then((res) => {
if (res.data.code == 200) {
console.log(res.data.data, 12345678);
Store.commit('saveShopInfo', res.data.data); Store.commit('saveShopInfo', res.data.data);
if (res.data.data.length){ if (res.data.data.length) {
$EventBus.$emit('getMenuList', res.data.data[0]) $EventBus.$emit('getMenuList', res.data.data[0]);
} }
} }
return res; return res;
}).catch(err=>{ })
.catch((err) => {
return err; return err;
}); });
}, },
...@@ -57,62 +58,65 @@ export default{ ...@@ -57,62 +58,65 @@ export default{
// return err; // return err;
// }); // });
// }, // },
uniLogin(res,orderId) { uniLogin(res, orderId) {
uni.login({ uni.login({
provider: 'weixin', provider: 'weixin',
success: function (data) { success: function (data) {
// 传给后台接口所需登录数据 // 传给后台接口所需登录数据
uni.$u.http.post('/weixin/login', { uni.$u.http
.post('/weixin/login', {
code: data.code, code: data.code,
source: 3, //默认是3，扫码进来是2 source: 3, //默认是3，扫码进来是2
iv: res.iv, iv: res.iv,
encryptedData: res.encryptedData encryptedData: res.encryptedData,
}).then((response) => { })
if (response.statusCode == 200 && response.data && response.data.code==200) { .then((response) => {
uni.setStorage({key:'Authorization',data:response.data.token}); if (response.statusCode == 200 && response.data && response.data.code == 200) {
uni.setStorage({ key: 'Authorization', data: response.data.token });
Store.commit('setAuthorization', response.data.token); Store.commit('setAuthorization', response.data.token);
uni.showToast({ uni.showToast({
title:'登录成功', title: '登录成功',
success() { success() {
setTimeout(()=>{ setTimeout(() => {
// 如果扫码进来的带有orderId则授权成功之后跳入结算页面 // 如果扫码进来的带有orderId则授权成功之后跳入结算页面
if (orderId) { if (orderId) {
uni.navigateTo({ uni.navigateTo({
url: '/menuSubPackage/pages/settlement/settlement?orderId=' + orderId url: '/menuSubPackage/pages/settlement/settlement?orderId=' + orderId,
})
}
},1500)
}
}); });
} else {
} }
}, 1500);
}).catch((err) => { },
uni.showToast({
title: err.msg
}); });
})
} }
}) })
.catch((err) => {
uni.showToast({
title: err.msg,
});
});
},
});
}, },
// 手机号授权登录 // 手机号授权登录
getPhoneNumber(res,orderId) { getPhoneNumber(res, orderId) {
console.log(res,'还是手机号参数吗')
uni.setStorage({ uni.setStorage({
key: 'userPhoneInfo', key: 'userPhoneInfo',
data: res data: res,
}) });
Store.commit("setUserPhoneInfo", res); Store.commit('setUserPhoneInfo', res);
this.uniLogin(res.detail,orderId); this.uniLogin(res.detail, orderId);
}, },
async uniGetUserInfo(e) { async uniGetUserInfo(e) {
uni.getUserProfile({ //授权后可以通过uni.getUserProfile得到用户信息 uni.getUserProfile({
lang: "zh_CN", //授权后可以通过uni.getUserProfile得到用户信息
lang: 'zh_CN',
desc: '用于完善用户信息', desc: '用于完善用户信息',
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);
} },
}) });
} },
} };
\ No newline at end of file
utils/utils.js
import Config from '../static/config/index.js'; 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';
import Store from '@/store' import Store from '@/store';
export default{ export default {
// 组装提交订单数据 // 组装提交订单数据
AssemblyOrder(totalPrice, totalNum) { AssemblyOrder(totalPrice, totalNum) {
let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v => v.flag == true); let shopCarInfo = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true);
if (shopCarInfo && totalPrice > 0 && totalNum > 0) { if (shopCarInfo && totalPrice > 0 && totalNum > 0) {
let orderDetails = []; let orderDetails = [];
for (let i = 0; i < shopCarInfo.length; i++) { for (let i = 0; i < shopCarInfo.length; i++) {
...@@ -15,121 +15,110 @@ export default{ ...@@ -15,121 +15,110 @@ export default{
goodsName: item.name, //商品名称 goodsName: item.name, //商品名称
machineId: undefined, //点单屏机器ID machineId: undefined, //点单屏机器ID
num: item.num, //当前sku数量 num: item.num, //当前sku数量
realAmount: item.skus[0].price * item.num, //实付金额 realAmount: item.sku.discount * item.num, //实付金额
specRuleDetail: JSON.stringify(item.skus[0].rules), //规格选项详情 specRuleDetail: JSON.stringify(item.sku.rules), //规格选项详情
skuId: item.skus[0].skuId, //"sku ID" specRuleIds: item.sku.rules.map((item) => item.ruleId).join(','), //规格选项详情
goodsCategory: item.categoryId //商品分类 skuId: item.skuId, //"sku ID"
goodsCategory: item.categoryId, //商品分类
}; };
orderDetails.push(res); orderDetails.push(res);
} }
let DAta = { let DAta = {
amount: totalPrice, //商品总金额 amount: totalPrice, //商品总金额
goodsNum: totalNum, //商品总数量 goodsNum: totalNum, //商品总数量
shopId: Store.getters.shopInfo[0].id, //店铺 shopId: '12', //店铺
machineId: undefined, //机器ID machineId: undefined, //机器ID
source: 3, //小程序固定传3 source: 3, //小程序固定传3
orderDetails: orderDetails orderDetails: orderDetails,
} };
return DAta; return DAta;
} else { } else {
uni.showToast({ uni.showToast({
title: '请选择商品' title: '请选择商品',
}) });
} }
}, },
// 加入购物车数据 // 加入购物车数据
getallNum(Obj){ getallNum(Obj) {
let shopCarInfo = uni.getStorageSync('shopCarInfo'); let shopCarInfo = uni.getStorageSync('shopCarInfo') || [];
let s = 0; let size = 0;
shopCarInfo.forEach(function (val) { shopCarInfo.forEach((item) => (size += item.num), 0);
s += val.num; if (size >= 9) {
}, 0);
if (s >= 9) {
uni.showToast({ uni.showToast({
title: '最多可一次购买9杯', title: '最多可一次购买9杯',
icon: 'none' icon: 'none',
}); });
return; return;
} }
console.log(shopCarInfo,'oooooo') if (shopCarInfo) {
if (shopCarInfo){ let currentGoods = shopCarInfo.find((v) => v.goodsId == Obj.goodsId && v.skuId == Obj.skuId);
let currentGoods = shopCarInfo.find(v => v.goodsId == Obj.goodsId && v.skuId == Obj.skuId); if (currentGoods) {
if (currentGoods){ currentGoods.num += 1;
console.log(currentGoods,'pppppp') } else {
currentGoods.num+=1;
}else{
shopCarInfo.push(Obj); shopCarInfo.push(Obj);
} }
console.log(shopCarInfo,7777) } else {
}else{
shopCarInfo = [Obj]; shopCarInfo = [Obj];
} }
uni.setStorageSync('shopCarInfo', shopCarInfo); uni.setStorageSync('shopCarInfo', shopCarInfo);
console.log(shopCarInfo);
$EventBus.$emit('updateCar'); $EventBus.$emit('updateCar');
}, },
// 解密手机 // 解密手机
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);
let data = await pc.decryptData(encryptedData ,iv); let data = await pc.decryptData(encryptedData, iv);
return data; return data;
}, },
// 扫码方法 // 扫码方法
scanCode() { scanCode() {
uni.scanCode({ uni.scanCode({
success:(res)=> { success: (res) => {
this.scaninfo=res; this.scaninfo = res;
if(res.result){//res.result if (res.result) {
if(res.result.includes(Config.AVScanUrl)){ if (res.result.includes(Config.AVScanUrl)) {
uni.reLaunch({ uni.reLaunch({
url:`/pages/index/index?q=${res.result}` url: `/pages/index/index?q=${res.result}`,
}) });
}else{ } else {
uni.showToast({ uni.showToast({
title:'二维码错误', title: '二维码错误',
icon:'none' icon: 'none',
}) });
} }
// '0016429'||
// `../pages/index/index`
// console.log(res.result,'内部扫码')
} }
}, },
fail() { fail() {
uni.showToast({ uni.showToast({
icon:'none', icon: 'none',
title:'扫码失败' title: '扫码失败',
}) });
} },
}); });
}, },
formatDate(value) { formatDate(value) {
var date = new Date(); var date = new Date();
date.setTime(value); date.setTime(value);
var month = date.getMonth() + 1; var month = date.getMonth() + 1;
if (month < 10) if (month < 10) month = '0' + month;
month = "0" + month;
var cdate = date.getDate(); var cdate = date.getDate();
if (cdate < 10) if (cdate < 10) cdate = '0' + cdate;
cdate = "0" + cdate;
var hours = date.getHours(); var hours = date.getHours();
if (hours < 10) if (hours < 10) hours = '0' + hours;
hours = "0" + hours;
var minutes = date.getMinutes(); var minutes = date.getMinutes();
if (minutes < 10) if (minutes < 10) minutes = '0' + minutes;
minutes = "0" + minutes; var time = date.getFullYear() + '-' + month + '-' + cdate + ' ' + hours + ':' + minutes;
var time = date.getFullYear() + "-" + month + "-" + cdate +
" " + hours + ":" + minutes;
return time; return time;
}, },
numberFixed(data,fixed=2){ numberFixed(data, fixed = 2) {
if(data==undefined){ if (data == undefined) {
return undefined return undefined;
}else if(data == 0){ } else if (data == 0) {
return '0' return '0';
}else{ } else {
return (Math.round(Number(data) * Math.pow(10,fixed)) / Math.pow(10,fixed)).toFixed(fixed); return (Math.round(Number(data) * Math.pow(10, fixed)) / Math.pow(10, fixed)).toFixed(fixed);
}
} }
} },
\ No newline at end of file };
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