Skip to content

U
user
Commit 55374e15 by 宋冰琦
Options

修改toast文案 修改头像昵称获取方式

parent 546e7ac8
Showing with 7165 additions and 6294 deletions
components/menuAssembly/index.vue
<template>
<view class="page-body">
<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
<view class="nav-left-item" v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
:class="item.id == categoryId ? 'active' : ''" :style="[scrollBottom]">
<view class="imgbox" v-if="item.icon&&sizeList[index].width">
<image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.icon"/>
</view>
<view :style="{'margin-top':'4rpx'}"><span>{{ item.name }}</span></view>
<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
</view>
</scroll-view>
<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
scroll-with-animation>
<view v-for="(category,index) in classifyData" :id="category.id" :key="category.id" class="box" :style="[goodBottom,scrollBottom]">
<view :style="loads" class="right-title">{{ category.name }}</view>
<view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId">
<view class="thumbnailBox">
<!-- <image src="/static/imgs/aixin.png" v-if="item.isRecommend == 1" class="isRecommend" /> -->
<image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" />
<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" />
</view>
<view @click="cart(item, category)" class="info">
<view class="goods-name">{{ item.name }}</view>
<view class="tags" v-if="item.tags">
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
</view>
<view class="desc-box">
<view class="desc">{{ item.desc || '' }}</view>
</view>
<view class="mon">
<view class="priceBox">
<view class="discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(getSku(item).discount) }}</view>
<view class="price" v-if="getSku(item).price!=getSku(item).discount">￥<text class="num">{{ Utils.isInteger(getSku(item).price) }}</text></view>
</view>
<view class="addbox" v-if="shopState&&isInRange">
<image v-if="getSku(item).state==1" @click.stop="cart(item, category)" class="add" :src="'../../static/imgs/jiahao.png'" />
<!-- <u-icon class="add" name="plus-circle-fill" color="#0050F6" @click.stop="getallNum(item, category)" size="22"></u-icon> -->
<div v-if="getSku(item).state!=1" style="color: #858585;font-size: 20rpx;margin-top:16rpx">已售罄</div>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<show-toast ref="toast"/>
</view>
<view class="page-body">
<scroll-view
class="nav-left"
:style="[heightStyle]"
:class="[shopCarFlag ? 'shopCarcss' : '']"
scroll-y
:scroll-top="scrollLeftTop"
scroll-with-animation
>
<view
class="nav-left-item"
v-for="(item, index) in classifyData"
@click="categoryClickMain(item.id)"
:key="item.id"
:class="item.id == categoryId ? 'active' : ''"
:style="[scrollBottom]"
>
<view class="imgbox" v-if="item.icon && sizeList[index].width">
<image
:style="{
height: sizeList[index].height + 'rpx',
width: sizeList[index].width + 'rpx',
}"
:src="item.icon"
/>
</view>
<view :style="{ 'margin-top': '4rpx' }"
><span>{{ item.name }}</span></view
>
<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
</view>
</scroll-view>
<scroll-view
class="nav-right"
:style="[heightStyle]"
:class="[shopCarFlag ? 'shopCarcss' : '']"
scroll-y
:scroll-top="scrollTop"
@scroll="scroll"
@touchstart="openScroll"
scroll-with-animation
>
<view
v-for="(category, index) in classifyData"
:id="category.id"
:key="category.id"
class="box"
:style="[goodBottom, scrollBottom]"
>
<view :style="loads" class="right-title">{{ category.name }}</view>
<view
class="nav-right-item"
v-for="item in category.goods"
:key="item.goodsId"
>
<view class="thumbnailBox">
<!-- <image src="/static/imgs/aixin.png" v-if="item.isRecommend == 1" class="isRecommend" /> -->
<image
@click="cart(item, category)"
class="thumbnail"
v-if="item.pics.thumbnailApplet"
:src="item.pics.thumbnailApplet"
/>
<image
@click="cart(item, category)"
class="thumbnail"
v-else
:src="item.pics.thumbnail"
/>
</view>
<view @click="cart(item, category)" class="info">
<view class="goods-name">{{ item.name }}</view>
<view class="tags" v-if="item.tags">
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{
tag
}}</view>
</view>
<view class="desc-box">
<view class="desc">{{ item.desc || "" }}</view>
</view>
<view class="mon">
<view class="priceBox">
<view class="discount"
><text class="moneyLog">￥</text
>{{ Utils.isInteger(getSku(item).discount) }}</view
>
<view
class="price"
v-if="getSku(item).price != getSku(item).discount"
>￥<text class="num">{{
Utils.isInteger(getSku(item).price)
}}</text></view
>
</view>
<view class="addbox" v-if="shopState && isInRange">
<image
v-if="getSku(item).state == 1"
@click.stop="cart(item, category)"
class="add"
:src="'../../static/imgs/jiahao.png'"
/>
<!-- <u-icon class="add" name="plus-circle-fill" color="#0050F6" @click.stop="getallNum(item, category)" size="22"></u-icon> -->
<div
v-if="getSku(item).state != 1"
style="color: #858585; font-size: 20rpx; margin-top: 16rpx"
>
已售罄
</div>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<show-toast ref="toast" />
</view>
</template>
<script>
import { $EventBus } from "../../utils/EventBus";
import Utils from '@/utils/utils'
import Order from '@/request/order'
import Utils from "@/utils/utils";
import Order from "@/request/order";
export default {
name: 'menuAssembly',
props:['buied','shopState','isInRange'],
data() {
return {
scrollBottom: {
'--scroll-marginbottom': 0
},
heightStyle: {
'--scroll-height': 0
},
goodBottom: {
'--good-bottom':0
},
Utils,
categoryId: '',
categoryPostion: [],
scrollLeftTop: 0,
scrollTop: 0,
scrolled: true,
goods:[],
shopCarFlag:false,
taBarHeight:0,
lastNumber:0,
width:0,
sizeList:[]
}
},
watch:{
isInRange(val) {
if(!val) {
this.scrollBottom['--scroll-marginbottom'] = 131+'rpx'
}else{
this.scrollBottom['--scroll-marginbottom'] = 0+'rpx'
}
},
shopState(val) {
if(!val) {
this.scrollBottom['--scroll-marginbottom'] = 131+'rpx'
}else{
this.scrollBottom['--scroll-marginbottom'] = 0+'rpx'
}
},
goods(val){
this.shopCarFlag = val.length>0
},
buied(val) {
if(val){
this.heightStyle['--scroll-height'] = (this.taBarHeight+122)+'rpx'
this.initScroll()
name: "menuAssembly",
props: ["buied", "shopState", "isInRange"],
data() {
return {
scrollBottom: {
"--scroll-marginbottom": 0,
},
heightStyle: {
"--scroll-height": 0,
},
goodBottom: {
"--good-bottom": 0,
},
Utils,
categoryId: "",
categoryPostion: [],
scrollLeftTop: 0,
scrollTop: 0,
scrolled: true,
goods: [],
shopCarFlag: false,
taBarHeight: 0,
lastNumber: 0,
width: 0,
sizeList: [],
};
},
watch: {
isInRange(val) {
if (!val) {
this.scrollBottom["--scroll-marginbottom"] = 131 + "rpx";
} else {
this.scrollBottom["--scroll-marginbottom"] = 0 + "rpx";
}
},
shopState(val) {
if (!val) {
this.scrollBottom["--scroll-marginbottom"] = 131 + "rpx";
} else {
this.scrollBottom["--scroll-marginbottom"] = 0 + "rpx";
}
},
goods(val) {
this.shopCarFlag = val.length > 0;
},
buied(val) {
if (val) {
this.heightStyle["--scroll-height"] = this.taBarHeight + 122 + "rpx";
this.initScroll();
} else {
this.heightStyle["--scroll-height"] = this.taBarHeight + 22 + "rpx";
}
},
},
computed: {
classifyData() {
this.scrollTop = 0;
let categorys =
this.$store.state.menu.setMenuCategorys.length != 0
? JSON.parse(JSON.stringify(this.$store.state.menu.setMenuCategorys))
: [];
// if(categorys.length!=0){
// const lastGood = 1
// this.lastNumber = lastGood<=2?3-lastGood:0
// this.goodBottom['--good-bottom'] = ((this.lastNumber*50))+'px'
// console.log(this.lastNumber)
// }
// 删除没有商品的分类
if (categorys) {
for (var i = categorys.length - 1; i >= 0; i--) {
var category = categorys[i];
if (!category.goods || category.goods.length <= 0) {
categorys.splice(i, 1);
}
}
if (categorys.length > 0) {
this.categoryId = categorys[0].id;
}
}
this.initScroll();
// console.log(categorys)
// categorys[0]?categorys[0].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys[1]?categorys[1].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys[2]?categorys[2].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys.map((item,index)=>{
// this.imagesHeight(item.src,index)
// })
if (categorys.length != 0) this.imagesHeight(categorys);
return categorys;
},
},
created() {
$EventBus.$off("updateCar");
},
mounted() {
this.$nextTick(() => {
this.taBarHeight = uni.getStorageSync("taBarHeight");
this.heightStyle["--scroll-height"] = this.taBarHeight + 44 + "rpx";
});
this.goods = uni.getStorageSync("shopCarInfo") || [];
$EventBus.$on("updateCar", () => {
this.goods = uni.getStorageSync("shopCarInfo") || [];
});
},
methods: {
initScroll() {
this.scrollLeftTop = 0;
this.scrollTop = 0;
const timer = setTimeout(() => {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.selectAll(".box")
.boundingClientRect((data) => {
console.log(data, "data");
this.categoryPostion = data;
clearTimeout(timer);
})
.exec();
});
}, 1000);
},
async imagesHeight(list, index) {
// return
let i = 0;
const newList = list.map((item) => {
return "";
});
const func = async () => {
if (list[i].icon) {
const val = await uni.getImageInfo({
src: list[i].icon,
});
let w = val[1].width;
let h = val[1].height;
if (w > 80) {
w = 80;
}
if (h > 60) {
h = 60;
}
newList[i] = {
width: w,
height: h,
};
}
i++;
if (i < newList.length) {
func();
} else {
this.sizeList = newList;
}
};
func();
}else{
this.heightStyle['--scroll-height'] = (this.taBarHeight+22)+'rpx'
}
}
},
computed:{
classifyData(){
this.scrollTop = 0
let categorys = this.$store.state.menu.setMenuCategorys.length!=0?JSON.parse(JSON.stringify(this.$store.state.menu.setMenuCategorys)):[]
// if(categorys.length!=0){
// const lastGood = 1
// this.lastNumber = lastGood<=2?3-lastGood:0
// this.goodBottom['--good-bottom'] = ((this.lastNumber*50))+'px'
// console.log(this.lastNumber)
// }
// 删除没有商品的分类
if(categorys) {
for(var i=categorys.length-1; i>=0; i--) {
var category = categorys[i];
if(!category.goods || category.goods.length<=0) {
categorys.splice(i, 1);
}
}
if(categorys.length>0){
this.categoryId = categorys[0].id;
}
}
this.initScroll()
// console.log(categorys)
// categorys[0]?categorys[0].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys[1]?categorys[1].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys[2]?categorys[2].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
// categorys.map((item,index)=>{
// this.imagesHeight(item.src,index)
// })
if(categorys.length!=0)this.imagesHeight(categorys)
return categorys
}
},
created() {
$EventBus.$off('updateCar');
},
mounted(){
this.$nextTick(()=>{
this.taBarHeight = uni.getStorageSync('taBarHeight')
this.heightStyle['--scroll-height'] = (this.taBarHeight+44)+'rpx'
})
this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar', () => {
this.goods = uni.getStorageSync('shopCarInfo') || [];
});
},
methods: {
initScroll() {
this.scrollLeftTop = 0
this.scrollTop = 0
const timer = setTimeout(() => {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.box').boundingClientRect(data => {
console.log(data,'data')
this.categoryPostion = data
clearTimeout(timer)
}).exec();
})
}, 1000);
},
async imagesHeight(list,index) {
// return
let i = 0
const newList = list.map(item=>{
return ''
})
const func = async () => {
if(list[i].icon){
const val = await uni.getImageInfo({
src: list[i].icon
})
let w = val[1].width
let h = val[1].height
if(w>80){
w = 80
}
if(h>60){
h = 60
}
newList[i] = {
width:w,
height:h
}
}
i++
if(i<newList.length){
func()
}else{
this.sizeList = newList
}
}
func()
// console.log(val)
// if(val.length==2){
// this.sizeList[index] = {
// width:val[1].width,
// height:val[1].height
// }
// }
},
getSku(data) {
const { skus } = data;
if (!skus || skus.length == 0) {
return { discount: data.discount, price: data.price };
}
const sku =
data.skus.find((v) => v.isDefault == 1 && v.state == 1) ||
data.skus.find((v) => v.state == 1) ||
data.skus.find((v) => v.isDefault == 1) ||
data.skus[0];
return sku;
},
createList(data) {
// this.classifyData = data;
// console.log(this.classifyData);
// // 删除没有商品的分类
// if(this.classifyData) {
// for(var i=this.classifyData.length-1; i>=0; i--) {
// var category = this.classifyData[i];
// if(!category.goods || category.goods.length<=0) {
// this.classifyData.splice(i, 1);
// }
// }
// if(this.classifyData.length>0){
// this.categoryId = this.classifyData[0].id;
// }
// }
// this.$nextTick(() => {
// const query = uni.createSelectorQuery().in(this);
// query.selectAll('.box').boundingClientRect(data => {
// this.categoryPostion = data
// }).exec();
// })
},
getallNum(item, category) {
this.$emit("getallNum", item, category);
},
openScroll() {
this.scrolled = true;
},
scroll(e) {
if (!this.scrolled) return;
const { categoryPostion } = this;
let otherHeight = 0;
if (this.buied) {
otherHeight = 320;
} else {
otherHeight = 270;
}
if (this.shopCarFlag) {
otherHeight += 100;
} else {
otherHeight += 0;
}
const el = categoryPostion.filter((item) => {
return item.top <= e.target.scrollTop + otherHeight;
});
console.log(
el[el.length - 1],
"-------------------",
e.target.scrollTop + otherHeight,
otherHeight
);
if (el[el.length - 1]) this.categoryId = el[el.length - 1].id;
},
categoryClickMain(id) {
this.scrolled = false;
this.categoryId = id;
this.categoryPostion.forEach((item) => {
if (item.id == id) {
this.scrollTop = this.buied ? item.top - 320 : item.top - 270;
}
});
},
async cart(item, category) {
console.log(item, category);
const skuStatus = item.skus.filter((item) => {
return Number(item.state) === 1 && item.isDelete === 0;
});
// console.log(val)
// if(val.length==2){
// this.sizeList[index] = {
// width:val[1].width,
// height:val[1].height
// }
// }
},
getSku(data) {
const { skus } = data;
if (!skus || skus.length == 0) {
return { discount: data.discount, price: data.price};
}
const sku = data.skus.find(v => v.isDefault == 1 && v.state == 1)
|| data.skus.find(v => v.state == 1)
|| data.skus.find(v => v.isDefault == 1)
|| data.skus[0];
return sku;
},
createList(data) {
// this.classifyData = data;
// console.log(this.classifyData);
// // 删除没有商品的分类
// if(this.classifyData) {
// for(var i=this.classifyData.length-1; i>=0; i--) {
// var category = this.classifyData[i];
// if(!category.goods || category.goods.length<=0) {
// this.classifyData.splice(i, 1);
// }
// }
// if(this.classifyData.length>0){
// this.categoryId = this.classifyData[0].id;
// }
// }
// this.$nextTick(() => {
// const query = uni.createSelectorQuery().in(this);
// query.selectAll('.box').boundingClientRect(data => {
// this.categoryPostion = data
// }).exec();
// })
},
getallNum(item, category) {
this.$emit('getallNum', item, category)
},
openScroll() {
this.scrolled = true
},
scroll(e) {
if (!this.scrolled) return;
const { categoryPostion } = this;
let otherHeight = 0
if(this.buied){
otherHeight = 320
}else{
otherHeight = 270
}
if(this.shopCarFlag){
otherHeight += 100
}else{
otherHeight+=0
}
const el = categoryPostion.filter(item => {return item.top <= e.target.scrollTop+otherHeight});
console.log(el[el.length-1],'-------------------',e.target.scrollTop+otherHeight,otherHeight)
if (el[el.length-1]) this.categoryId = el[el.length-1].id
},
categoryClickMain(id) {
this.scrolled = false
this.categoryId = id;
this.categoryPostion.forEach(item => {
if (item.id == id) {
this.scrollTop = this.buied ? item.top - 320 : item.top - 270
}
});
},
async cart(item, category){
console.log(item,category)
const skuStatus = item.skus.filter(item=>{return (Number(item.state)===1&&item.isDelete === 0)})
if(skuStatus.length===0){
this.showToast({
title: '该商品已售罄',
icon: 'none',
})
}else{
if(this.shopState&&this.isInRange){
const {data} = await Order.checkSku({skuId:skuStatus[0].skuId})
const {goods} = data.data
uni.setStorageSync('goodsInfo', JSON.stringify({ ...goods, category }));
} else {
uni.setStorageSync('goodsInfo', JSON.stringify({ ...item, category }));
}
uni.navigateTo({ url: '/menuSubPackage/pages/goodsDetail/goodsDetail' })
}
}
}
}
if (skuStatus.length === 0) {
this.showToast({
title: "此商品已售罄",
icon: "none",
});
} else {
if (this.shopState && this.isInRange) {
const { data } = await Order.checkSku({ skuId: skuStatus[0].skuId });
const { goods } = data.data;
uni.setStorageSync(
"goodsInfo",
JSON.stringify({ ...goods, category })
);
} else {
uni.setStorageSync(
"goodsInfo",
JSON.stringify({ ...item, category })
);
}
uni.navigateTo({
url: "/menuSubPackage/pages/goodsDetail/goodsDetail",
});
}
},
},
};
</script>
<style lang="scss" scoped>
.page-body {
display: flex;
background: #fff;
overflow: hidden;
display: flex;
background: #fff;
overflow: hidden;
}
.nav {
display: flex;
width: 100%;
display: flex;
width: 100%;
}
.nav-left {
box-sizing: border-box;
width: 164rpx;
background: #fff;
border-right: 2rpx solid #F0F0F0;
height: calc(100vh - var(--scroll-height));
overflow-y: auto;
// background: var(--header-color);
box-sizing: border-box;
width: 164rpx;
background: #fff;
border-right: 2rpx solid #f0f0f0;
height: calc(100vh - var(--scroll-height));
overflow-y: auto;
// background: var(--header-color);
}
.nav-left-item {
position: relative;
height: 145rpx;
font-size: 24rpx;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-family: PingFangSC-Regular, PingFang SC;
.imgbox {
// margin-top: 21.8rpx;
// border: 1px solid red;
width: 80rpx;
height: 60rpx;
line-height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
position: relative;
height: 145rpx;
font-size: 24rpx;
font-weight: 400;
color: #666666;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
font-family: PingFangSC-Regular, PingFang SC;
.imgbox {
// margin-top: 21.8rpx;
// border: 1px solid red;
width: 80rpx;
height: 60rpx;
line-height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333;
background: #FFFFFF;
font-size: 24rpx;
background: #fff;
border-right: 4rpx solid #0050F6;
font-family: PingFangSC-Medium, PingFang SC;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500;
color: #333333;
background: #ffffff;
font-size: 24rpx;
background: #fff;
border-right: 4rpx solid #0050f6;
}
.nav-left-item:last-child {
margin-bottom: var(--scroll-marginbottom);
border-bottom: none;
margin-bottom: var(--scroll-marginbottom);
border-bottom: none;
}
.nav-right {
box-sizing: border-box;
height: calc(100vh - var(--scroll-height));
overflow: auto;
width: 585.21rpx;
// padding-top: 42rpx;
box-sizing: border-box;
height: calc(100vh - var(--scroll-height));
overflow: auto;
width: 585.21rpx;
// padding-top: 42rpx;
}
.buiedcss{
height: calc(100vh - 376rpx - 183rpx);
.buiedcss {
height: calc(100vh - 376rpx - 183rpx);
}
.shopCarcss{
padding-bottom: 100rpx;
.shopCarcss {
padding-bottom: 100rpx;
}
.box {
display: block;
overflow: hidden;
/* min-height: 100vh; */
/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
display: block;
overflow: hidden;
/* min-height: 100vh; */
/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}
.box:last-child {
border: none;
// min-height: 100vh;
border: none;
// min-height: 100vh;
}
.right-title {
font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 32rpx;
margin-bottom: 25rpx;
height: 44rpx;
font-size: 32rpx;
font-weight: 600;
color: #333333;
line-height: 44rpx;
font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 32rpx;
margin-bottom: 25rpx;
height: 44rpx;
font-size: 32rpx;
font-weight: 600;
color: #333333;
line-height: 44rpx;
}
.nav-right-item {
display: flex;
align-items: center;
padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 60rpx;
background: #fff;
position: relative;
.thumbnailBox{
position: relative;
.isRecommend {
position: absolute;
width: 22.46rpx;
height: 22.46rpx;
top: 28rpx;
right: 24rpx
}
.thumbnail {
//缩略图
// max-width: 160rpx;
// max-height: 160rpx;
// margin-top: -2rpx;
vertical-align: bottom;
}
}
display: flex;
align-items: center;
padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 60rpx;
background: #fff;
position: relative;
.thumbnailBox {
position: relative;
.isRecommend {
position: absolute;
width: 22.46rpx;
height: 22.46rpx;
top: 28rpx;
right: 24rpx;
}
.thumbnail {
//缩略图
// max-width: 160rpx;
// max-height: 160rpx;
// margin-top: -2rpx;
vertical-align: bottom;
}
}
.info {
flex: 1;
margin-left: 24rpx;
.goods-name {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: 500;
color: #333333;
}
.tags {
height: 28rpx;
margin-top: 8rpx;
.tag-item {
font-family: PingFangSC-Regular, PingFang SC;
background-color: #f0f0f0;
padding: 0rpx 8rpx;
font-size: 20rpx;
color: #999999;
vertical-align: top;
display: inline-block;
margin-right: 16rpx;
}
}
.info {
flex: 1;
margin-left: 24rpx;
.desc-box {
display: flex;
font-size: 20rpx;
font-weight: 400;
color: #666666;
margin-top: 14rpx;
height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
.goods-name {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: 500;
color: #333333;
}
.tags {
height: 28rpx;
margin-top: 8rpx;
.tag-item {
font-family: PingFangSC-Regular, PingFang SC;
background-color: #F0F0F0;
padding: 0rpx 8rpx;
font-size: 20rpx;
color: #999999;
vertical-align: top;
display: inline-block;
margin-right: 16rpx;
}
}
.desc-box {
display: flex;
font-size: 20rpx;
font-weight: 400;
color: #666666;
margin-top: 14rpx;
height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
.desc {
flex: 1;
vertical-align: top;
line-height: 26rpx;
}
}
.mon {
height: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28rpx;
.priceBox{
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
.discount {
font-family: Futura-Medium, Futura;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 30rpx;
margin-right: 4.2rpx;
font-weight: 500;
.moneyLog {
font-size: 24rpx;
}
}
.price {
flex: 1;
height: 26rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 15rpx;
.num {
text-decoration: line-through;
}
}
}
.addbox{
// line-height: 26rpx;
padding-top: 12rpx;
.add {
// padding-top: 10rpx;
margin-right: -1rpx;
width: 44rpx;
height: 44rpx;
}
}
}
}
.desc {
flex: 1;
vertical-align: top;
line-height: 26rpx;
}
}
.sellNull{
position: absolute;
right: 32rpx;
top: 0rpx;
}
.mon {
height: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28rpx;
.priceBox {
display: flex;
flex-wrap: nowrap;
align-items: flex-end;
justify-content: flex-start;
.discount {
font-family: Futura-Medium, Futura;
height: 38rpx;
font-size: 28rpx;
color: #333333;
line-height: 30rpx;
margin-right: 4.2rpx;
font-weight: 500;
.moneyLog {
font-size: 24rpx;
}
}
.price {
flex: 1;
height: 26rpx;
font-size: 20rpx;
color: #999999;
font-family: Futura-Medium, Futura;
line-height: 15rpx;
.num {
text-decoration: line-through;
}
}
}
.addbox {
// line-height: 26rpx;
padding-top: 12rpx;
.add {
// padding-top: 10rpx;
margin-right: -1rpx;
width: 44rpx;
height: 44rpx;
}
}
}
}
.sellNull {
position: absolute;
right: 32rpx;
top: 0rpx;
}
}
.box:first-child {
margin-top: 40rpx;
margin-top: 40rpx;
}
.box:last-child{
// padding-bottom: var(--good-bottom);
padding-bottom: 200rpx;
// height: 100%;
.box:last-child {
// padding-bottom: var(--good-bottom);
padding-bottom: 200rpx;
// height: 100%;
}
.nav-right-item image {
width: 150rpx;
height: 150rpx;
width: 150rpx;
height: 150rpx;
}
.box:last-child {
margin-bottom: var(--scroll-marginbottom);
border-bottom: none;
margin-bottom: var(--scroll-marginbottom);
border-bottom: none;
}
::-webkit-scrollbar {
/*取消小程序的默认导航条样式*/
width: 0;
height: 0;
color: transparent;
/*取消小程序的默认导航条样式*/
width: 0;
height: 0;
color: transparent;
}
</style>
\ No newline at end of file
</style>
components/shopCar/shopCar.vue
<template>
<view catchtouchmove="return">
<u-popup :show="showShopCar && goods.length" mode="bottom" :round="5" :overlay="true"
:closeOnClickOverlay="true" @close="closeT" zIndex="10071">
<view class="shop-car" :style="{'padding-bottom':Utils.getPx(bottomPadding)+'px'}">
<view class="header">
<text class="left">购物袋</text>
<text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text>
</view>
<scroll-view scroll-y="true" class="scroll-Y">
<view class="container">
<view>
<view class="empty" v-if="show == false">
<image :src="imgPath" mode="widthFix" style="width: 400rpx;"></image>
<view class="empty-text">空空如也的购物</view>
<view class="empty-button" @click="goshopping">去选购</view>
</view>
<view v-if="show == true">
<view class="goods-detail" v-for="(item, index) in goods" :key="index">
<view class="detail-left">
<view class="goods-left">
<view class="checkBox">
<view class="check" @click="selected(item)" :class="item.flag?'checked':'nochecked'"></view>
</view>
<!-- <u-checkbox-group @change="selected(item)">
<view catchtouchmove="return">
<u-popup
:show="showShopCar && goods.length"
mode="bottom"
:round="5"
:overlay="true"
:closeOnClickOverlay="true"
@close="closeT"
zIndex="10071"
>
<view
class="shop-car"
:style="{ 'padding-bottom': Utils.getPx(bottomPadding) + 'px' }"
>
<view class="header">
<text class="left">购物袋</text>
<text class="right" @click="clearCar"
><text class="delete-icon"></text>清空购物车</text
>
</view>
<scroll-view scroll-y="true" class="scroll-Y">
<view class="container">
<view>
<view class="empty" v-if="show == false">
<image
:src="imgPath"
mode="widthFix"
style="width: 400rpx"
></image>
<view class="empty-text">空空如也的购物</view>
<view class="empty-button" @click="goshopping">去选购</view>
</view>
<view v-if="show == true">
<view
class="goods-detail"
v-for="(item, index) in goods"
:key="index"
>
<view class="detail-left">
<view class="goods-left">
<view class="checkBox">
<view
class="check"
@click="selected(item)"
:class="item.flag ? 'checked' : 'nochecked'"
></view>
</view>
<!-- <u-checkbox-group @change="selected(item)">
<label>
<u-checkbox shape="circle" class="selected" color="#555555"
:checked="item.flag" />
</label>
</u-checkbox-group> -->
<view>
<image :src="item.pics.thumbnailApplet || item.pics.thumbnail"
style="width: 120rpx;height: 120rpx;margin-top: 4.24rpx"></image>
</view>
</view>
<view class="size">
<view class="goods-name">{{ item.name }}</view>
<view class="goods-skus">
<text v-for="(rl, index) in item.sku.rules" :key="rl.ruleName">
{{ rl.ruleName }}
<text v-if="index != item.sku.rules.length - 1">/</text>
</text>
</view>
<view class="goods-price">
<text class="price-discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(item.sku.discount) }}</text>
<text class="price-x" v-show="item.sku.price!=item.sku.discount">￥</text>
<text class="price-xx" v-show="item.sku.price!=item.sku.discount">{{ Utils.isInteger(item.sku.price) }}</text>
</view>
</view>
</view>
<view class="detail-right">
<view class="subtract" @click="reduce(item, index)"></view>
<text class="num">{{ item.num }}</text>
<view class="add" @click="add(item)" ></view>
<!-- <text class="subtract" @click="reduce(item, index)">-</text> -->
<!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> -->
<!-- <text @click="add(item)" class="add">+</text> -->
<!-- <u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> -->
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
<view class="end" v-if="goods.length" :style="{'bottom':shopCar+'rpx'}">
<view @click.stop="openShopCar" class="end-left">
<view style="display:flex">
<view class="car-img">
<text class="badge" :animation="animationData" v-if="totalNum" >{{ totalNum }}</text>
</view>
<text class="shopClassStyle">￥{{ Utils.isInteger(totalPrice.toFixed(2)) }}</text>
</view>
</view>
<view class="end-right goSubmmit" @click="saveReserve" v-if="userms">
结算
</view>
<!-- <view v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve">
<view>
<image
:src="
item.pics.thumbnailApplet || item.pics.thumbnail
"
style="
width: 120rpx;
height: 120rpx;
margin-top: 4.24rpx;
"
></image>
</view>
</view>
<view class="size">
<view class="goods-name">{{ item.name }}</view>
<view class="goods-skus">
<text
v-for="(rl, index) in item.sku.rules"
:key="rl.ruleName"
>
{{ rl.ruleName }}
<text v-if="index != item.sku.rules.length - 1"
>/</text
>
</text>
</view>
<view class="goods-price">
<text class="price-discount"
><text class="moneyLog">￥</text
>{{ Utils.isInteger(item.sku.discount) }}</text
>
<text
class="price-x"
v-show="item.sku.price != item.sku.discount"
>￥</text
>
<text
class="price-xx"
v-show="item.sku.price != item.sku.discount"
>{{ Utils.isInteger(item.sku.price) }}</text
>
</view>
</view>
</view>
<view class="detail-right">
<view class="subtract" @click="reduce(item, index)"></view>
<text class="num">{{ item.num }}</text>
<view class="add" @click="add(item)"></view>
<!-- <text class="subtract" @click="reduce(item, index)">-</text> -->
<!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> -->
<!-- <text @click="add(item)" class="add">+</text> -->
<!-- <u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> -->
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
<view class="end" v-if="goods.length" :style="{ bottom: shopCar + 'rpx' }">
<view @click.stop="openShopCar" class="end-left">
<view style="display: flex">
<view class="car-img">
<text class="badge" :animation="animationData" v-if="totalNum">{{
totalNum
}}</text>
</view>
<text class="shopClassStyle"
>￥{{ Utils.isInteger(totalPrice.toFixed(2)) }}</text
>
</view>
</view>
<view class="end-right goSubmmit" @click="saveReserve" v-if="userms">
结算
</view>
<!-- <view v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve">
</view> -->
<button v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="saveReserve">结算
</button>
</view>
<view class="shopClose" v-if="!shopState||!isInRange" :style="{'bottom':shopCar+'rpx'}">
<view class="content">{{!shopState?"门店已休息":"距离较远，门店暂停接单"}}</view>
</view>
<show-toast ref="toast"/>
</view>
<button
v-if="!userms"
class="end-right goSubmmit"
style="border-radius: 0"
open-type="getPhoneNumber"
@getphonenumber="saveReserve"
>
结算
</button>
</view>
<view
class="shopClose"
v-if="!shopState || !isInRange"
:style="{ bottom: shopCar + 'rpx' }"
>
<view class="content">{{
!shopState ? "门店已休息" : "距离较远，门店暂停接单"
}}</view>
</view>
<show-toast ref="toast" />
</view>
</template>
<script>
import { $EventBus } from "../../utils/EventBus";
import Menu from '@/request/menu';
import User from '@/request/user';
import Utils from '@/utils/utils'
import Menu from "@/request/menu";
import User from "@/request/user";
import Utils from "@/utils/utils";
export default {
props:['shopState','isInRange'],
data() {
return {
showShopCar: false,//是否弹出购物车列表
show: true,
allchecked: true,
// checked:true,
goods: [],//购物车商品信息
loginInfo: "",
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',
Utils,
shopCar:0,
BottomSafeHeight:0,
bottomPadding:0,
animation:'',
animationData: {},
timer:0
}
},
created() {
$EventBus.$off('updateCar');
},
mounted() {
this.animation = uni.createAnimation()
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||50
console.log(this.BottomSafeHeight,'this.BottomSafeHeight')
this.bottomPadding = 204
this.shopCar = uni.getStorageSync('shopCar')+5
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
this.goods = uni.getStorageSync('shopCarInfo') || [];
$EventBus.$on('updateCar', () => {
this.goods = uni.getStorageSync('shopCarInfo') || [];
});
},
methods: {
// 切换购物车列表显示隐藏
openShopCar() {
this.$nextTick(() => {
this.showShopCar = !this.showShopCar;
})
},
// 翻转动画
turnAnimation(val) {
if(this.goods.length>0){
this.$nextTick(()=>{
this.animation.opacity(0.5).step({duration:100}).rotateY(90).opacity(1).step({duration:200}).rotateY(30).step({duration:50}).rotateY(-60).step({duration:100}).rotateY(0).step({duration:50})
this.animationData = this.animation.export()
this.timer = setTimeout(() => {
this.animation.rotateY(0).step({duration:100})
this.animationData = this.animation.export()
clearTimeout(this.timer)
}, 550);
})
}
},
closeT(e) {
this.showShopCar = false;
},
// 清空购物车
clearCar() {
uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar');
},
// 购物车为空时点击去购物，收起购物袋
goshopping() {
this.showShopCar = false;
},
//跳转到结算
saveReserve(e) {
const settleMentFunc = ()=>{
if(this.totalPrice < 0 || this.totalNum <= 0) {
this.showToast({ title: '请选择商品', icon: 'error' })
return;
}
let Authorization = uni.getStorageSync('Authorization');
let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v => v.flag == true);
if (shopCarInfo) {
if (Authorization) {
uni.navigateTo({
url: `/orderSubPackage/pages/settlement/index?buyType=1`
})
} else {
this.loginByPhoneNumber(e)
}
}
return;
}
uni.authorize({
scope: 'scope.userLocation',
success: () => { //1.1 允许授权
console.log("允许授权位置");
settleMentFunc()
},
fail: (err) => { //1.2 拒绝授权
wx.exitMiniProgram({ success: (res) => { } })
console.log("获取位置失败")
uni.showModal({
content: '检测到您没打开地理位置权限，是否去设置打开？',
confirmText: "确认",
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({//opensetting是调起设置页面的
success: (res) => {
console.log(res)
if(res.authSetting['scope.userLocation'] == true){//判断res.authsetting的值是true还是false
settleMentFunc()
}else{
// console.log("什么也不做");
}
}
})
} else {
console.log('取消');
return false;
}
}
})
}
})
return
},
// 付款前未登录发起授权
loginByPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
change(e) { },
selected(item) {
item.flag = !item.flag
if (!item.flag) {
this.allchecked = false
} else {
const a = this.goods.filter((item) => {
return item.flag == true
})
if (a) {
this.allchecked = true
} else {
this.allchecked = false
}
}
uni.setStorageSync('shopCarInfo', this.goods);
},
selectgoods() {
this.allchecked = !this.allchecked
if (this.allchecked) {
this.goods.map(item => {
item.flag = true
})
} else {
this.goods.map(item => {
item.flag = false
})
}
uni.setStorageSync('shopCarInfo', this.goods);
},
reduce(item, index) {
item.num -= 1
if (item.num == 0) {
this.goods.splice(index, 1);
}
uni.setStorageSync('shopCarInfo', this.goods);
$EventBus.$emit('updateCar');
},
add(item) {
let s = 0;
this.goods.forEach(function (val) {
s += Number(val.num);
}, 0);
let countOfOrder = uni.getStorageSync('countOfOrder');
console.log(s , countOfOrder)
if (s >= countOfOrder) {
this.showToast({
title: '最多可一次购买'+countOfOrder+'杯',
icon: 'none'
});
return;
}
let num = Number(item.num)
item.num = num + 1
uni.setStorageSync('shopCarInfo', this.goods);
$EventBus.$emit('updateCar');
}
},
watch: {
totalNum(val){
this.turnAnimation(val)
}
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
totalNum() {
let totalNum = 0;
this.goods.map(item => {
item.flag ? totalNum += parseInt(item.num) : totalNum += 0
})
return totalNum
},
totalPrice() {
let totalPrice = 0;
this.goods.forEach(item => {
const sku = item.sku;
item.flag ? totalPrice += item.num * sku.discount : totalPrice += 0
})
return totalPrice
}
}
}
props: ["shopState", "isInRange"],
data() {
return {
showShopCar: false, //是否弹出购物车列表
show: true,
allchecked: true,
// checked:true,
goods: [], //购物车商品信息
loginInfo: "",
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",
Utils,
shopCar: 0,
BottomSafeHeight: 0,
bottomPadding: 0,
animation: "",
animationData: {},
timer: 0,
};
},
created() {
$EventBus.$off("updateCar");
},
mounted() {
this.animation = uni.createAnimation();
this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight") || 50;
console.log(this.BottomSafeHeight, "this.BottomSafeHeight");
this.bottomPadding = 204;
this.shopCar = uni.getStorageSync("shopCar") + 5;
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
this.goods = uni.getStorageSync("shopCarInfo") || [];
$EventBus.$on("updateCar", () => {
this.goods = uni.getStorageSync("shopCarInfo") || [];
});
},
methods: {
// 切换购物车列表显示隐藏
openShopCar() {
this.$nextTick(() => {
this.showShopCar = !this.showShopCar;
});
},
// 翻转动画
turnAnimation(val) {
if (this.goods.length > 0) {
this.$nextTick(() => {
this.animation
.opacity(0.5)
.step({ duration: 100 })
.rotateY(90)
.opacity(1)
.step({ duration: 200 })
.rotateY(30)
.step({ duration: 50 })
.rotateY(-60)
.step({ duration: 100 })
.rotateY(0)
.step({ duration: 50 });
this.animationData = this.animation.export();
this.timer = setTimeout(() => {
this.animation.rotateY(0).step({ duration: 100 });
this.animationData = this.animation.export();
clearTimeout(this.timer);
}, 550);
});
}
},
closeT(e) {
this.showShopCar = false;
},
// 清空购物车
clearCar() {
uni.removeStorageSync("shopCarInfo");
$EventBus.$emit("updateCar");
},
// 购物车为空时点击去购物，收起购物袋
goshopping() {
this.showShopCar = false;
},
//跳转到结算
saveReserve(e) {
const settleMentFunc = () => {
if (this.totalPrice < 0 || this.totalNum <= 0) {
this.showToast({ title: "请选择商品", icon: "error" });
return;
}
let Authorization = uni.getStorageSync("Authorization");
let shopCarInfo = uni
.getStorageSync("shopCarInfo")
.filter((v) => v.flag == true);
if (shopCarInfo) {
if (Authorization) {
uni.navigateTo({
url: `/orderSubPackage/pages/settlement/index?buyType=1`,
});
} else {
this.loginByPhoneNumber(e);
}
}
return;
};
uni.authorize({
scope: "scope.userLocation",
success: () => {
//1.1 允许授权
console.log("允许授权位置");
settleMentFunc();
},
fail: (err) => {
//1.2 拒绝授权
wx.exitMiniProgram({ success: (res) => {} });
console.log("获取位置失败");
uni.showModal({
content: "检测到您没打开地理位置权限，是否去设置打开？",
confirmText: "确认",
cancelText: "取消",
success: (res) => {
if (res.confirm) {
uni.openSetting({
//opensetting是调起设置页面的
success: (res) => {
console.log(res);
if (res.authSetting["scope.userLocation"] == true) {
//判断res.authsetting的值是true还是false
settleMentFunc();
} else {
// console.log("什么也不做");
}
},
});
} else {
console.log("取消");
return false;
}
},
});
},
});
return;
},
// 付款前未登录发起授权
loginByPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
change(e) {},
selected(item) {
item.flag = !item.flag;
if (!item.flag) {
this.allchecked = false;
} else {
const a = this.goods.filter((item) => {
return item.flag == true;
});
if (a) {
this.allchecked = true;
} else {
this.allchecked = false;
}
}
uni.setStorageSync("shopCarInfo", this.goods);
},
selectgoods() {
this.allchecked = !this.allchecked;
if (this.allchecked) {
this.goods.map((item) => {
item.flag = true;
});
} else {
this.goods.map((item) => {
item.flag = false;
});
}
uni.setStorageSync("shopCarInfo", this.goods);
},
reduce(item, index) {
item.num -= 1;
if (item.num == 0) {
this.goods.splice(index, 1);
}
uni.setStorageSync("shopCarInfo", this.goods);
$EventBus.$emit("updateCar");
},
add(item) {
let s = 0;
this.goods.forEach(function (val) {
s += Number(val.num);
}, 0);
let countOfOrder = uni.getStorageSync("countOfOrder");
console.log(s, countOfOrder);
if (s >= countOfOrder) {
this.showToast({
title: "一次最多可购买" + countOfOrder + "杯",
icon: "none",
});
return;
}
let num = Number(item.num);
item.num = num + 1;
uni.setStorageSync("shopCarInfo", this.goods);
$EventBus.$emit("updateCar");
},
},
watch: {
totalNum(val) {
this.turnAnimation(val);
},
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
totalNum() {
let totalNum = 0;
this.goods.map((item) => {
item.flag ? (totalNum += parseInt(item.num)) : (totalNum += 0);
});
return totalNum;
},
totalPrice() {
let totalPrice = 0;
this.goods.forEach((item) => {
const sku = item.sku;
item.flag ? (totalPrice += item.num * sku.discount) : (totalPrice += 0);
});
return totalPrice;
},
},
};
</script>
<style lang="scss">
.shopClassStyle {
color: #000000;
font-weight: bold;
font-size: 32rpx;
font-weight: 500;
font-family: Futura-Medium, Futura;
display: flex;
margin-left: 32rpx;
letter-spacing: 1rpx;
align-items: center;
color: #000000;
font-weight: bold;
font-size: 32rpx;
font-weight: 500;
font-family: Futura-Medium, Futura;
display: flex;
margin-left: 32rpx;
letter-spacing: 1rpx;
align-items: center;
}
.shop-car {
display: flex;
flex-direction: column;
.header {
padding:34rpx 31.78rpx 34rpx 31.54rpx;
display: flex;
border-bottom: 0.1px solid #F4F4F4;
.left {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.delete-icon {
width: 18rpx;
height: 18rpx;
background: url(../../static/imgs/icon-delete.png) center center no-repeat;
background-size: cover;
display: inline-block;
margin-right: 6rpx;
}
}
}
.scroll-Y {
max-height: 750rpx;
// margin-bottom: 100rpx;
.container {
flex: 1;
}
}
display: flex;
flex-direction: column;
.header {
padding: 34rpx 31.78rpx 34rpx 31.54rpx;
display: flex;
border-bottom: 0.1px solid #f4f4f4;
.left {
flex: 1;
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.delete-icon {
width: 18rpx;
height: 18rpx;
background: url(../../static/imgs/icon-delete.png) center center
no-repeat;
background-size: cover;
display: inline-block;
margin-right: 6rpx;
}
}
}
.scroll-Y {
max-height: 750rpx;
// margin-bottom: 100rpx;
.container {
flex: 1;
}
}
}
.goods {
line-height: 80rpx;
background-color: #FFFFFF;
&-detail {
display: flex;
padding: 30rpx 25.87rpx 30rpx 32rpx;
background-color: #fff;
justify-content: space-between;
align-items: center;
.detail-left {
display: flex;
height: 128rpx;
align-items: center;
justify-content: space-between;
.goods-left {
display: flex;
align-items: center;
.checkBox{
margin-right: 32rpx;
width: 40rpx;
display: flex;
margin-top: 6rpx;
align-items: center;
height: 100%;
.check{
width: 100%;
height: 40rpx;
}
.checked{
background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
.nochecked{
background: url('../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
}
}
}
}
.size {
margin-left: 30rpx;
.goods-name{
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
padding-top: 5rpx;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.goods-skus {
margin-top: 4rpx;
height: 22rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 26rpx;
}
.goods-price {
margin-top: 28rpx;
.moneyLog {
height: 38rpx;
font-size: 24rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}
.price-discount{
height: 38rpx;
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}
.price-x {
margin-left: 4.2rpx;
font-size: 20rpx;
font-family: ArialMT;
line-height: 22rpx;
color: #999999;
}
.price-xx {
text-decoration: line-through;
height: 22rpx;
font-size: 20rpx;
font-family: ArialMT;
color: #999999;
line-height: 22px;
}
}
}
.detail-right {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 6rpx;
// text {
// width: 40rpx;
// line-height: 40rpx;
// text-align: center;
// display: inline-block;
// margin-right: 10rpx;
// color: #000000;
// }
.subtract {
width: 40rpx;
height: 40rpx;
background: url('../../static/imgs/jianhao.png') center center no-repeat;
background-size:100% 100%;
}
.num {
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
line-height: 28rpx;
margin-left: 26rpx;
margin-right: 22rpx;
}
.add {
width: 40rpx;
height: 40rpx;
background: url('../../static/imgs/jiahao.png') center center no-repeat;
background-size:100% 100%;
}
}
}
line-height: 80rpx;
background-color: #ffffff;
&-detail {
display: flex;
padding: 30rpx 25.87rpx 30rpx 32rpx;
background-color: #fff;
justify-content: space-between;
align-items: center;
.detail-left {
display: flex;
height: 128rpx;
align-items: center;
justify-content: space-between;
.goods-left {
display: flex;
align-items: center;
.checkBox {
margin-right: 32rpx;
width: 40rpx;
display: flex;
margin-top: 6rpx;
align-items: center;
height: 100%;
.check {
width: 100%;
height: 40rpx;
}
.checked {
background: url("../../static/imgs/duigouxuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
}
.nochecked {
background: url("../../static/imgs/weixuanzhong.png") center center
no-repeat;
background-size: 100% 100%;
}
}
}
}
.size {
margin-left: 30rpx;
.goods-name {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
padding-top: 5rpx;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.goods-skus {
margin-top: 4rpx;
height: 22rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 26rpx;
}
.goods-price {
margin-top: 28rpx;
.moneyLog {
height: 38rpx;
font-size: 24rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}
.price-discount {
height: 38rpx;
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 30rpx;
}
.price-x {
margin-left: 4.2rpx;
font-size: 20rpx;
font-family: ArialMT;
line-height: 22rpx;
color: #999999;
}
.price-xx {
text-decoration: line-through;
height: 22rpx;
font-size: 20rpx;
font-family: ArialMT;
color: #999999;
line-height: 22px;
}
}
}
.detail-right {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 6rpx;
// text {
// width: 40rpx;
// line-height: 40rpx;
// text-align: center;
// display: inline-block;
// margin-right: 10rpx;
// color: #000000;
// }
.subtract {
width: 40rpx;
height: 40rpx;
background: url("../../static/imgs/jianhao.png") center center no-repeat;
background-size: 100% 100%;
}
.num {
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
line-height: 28rpx;
margin-left: 26rpx;
margin-right: 22rpx;
}
.add {
width: 40rpx;
height: 40rpx;
background: url("../../static/imgs/jiahao.png") center center no-repeat;
background-size: 100% 100%;
}
}
}
}
.empty {
position: relative;
top: 220rpx;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
&-text {
color: #808080;
margin-bottom: 50rpx;
}
&-button {
width: 300rpx;
height: 90rpx;
color: orange;
border: 1rpx solid orange;
text-align: center;
line-height: 90rpx;
border-radius: 48rpx;
}
position: relative;
top: 220rpx;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
&-text {
color: #808080;
margin-bottom: 50rpx;
}
&-button {
width: 300rpx;
height: 90rpx;
color: orange;
border: 1rpx solid orange;
text-align: center;
line-height: 90rpx;
border-radius: 48rpx;
}
}
.end {
width: 100%;
height: 100rpx;
background-color: rgb(253, 253, 253);
position: fixed;
left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex;
z-index: 10072;
align-items: center;
&-left {
width: 70%;
display: flex;
justify-content: space-between;
padding: 0 32rpx;
.end-flex {
display: flex;
align-items: center;
}
.car-img {
width: 45rpx;
height: 54rpx;
display: inline-block;
background: url('../../static/imgs/gouwudai.png') center center no-repeat;
background-size: cover;
position: relative;
.badge {
position: absolute;
height: 32rpx;
font-family: Futura-Medium, Futura;
background: #FF63BA;
right: -22rpx;
top: -8rpx;
min-width: 32rpx;
font-weight: 500;
font-size: 20rpx;
font-weight: normal;
color: #FFFFFF;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
}
}
&-right {
width: 169rpx;
font-size: 32rpx;
line-height: 100rpx;
background-color: #0050F6;
text-align: right;
color: #fff;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.goSubmmit{
// background: url('../../static/imgs/fukuan.png') center center no-repeat;
text-align: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 100rpx;
width: 200rpx;
height: 100%;
margin-top: -1rpx;
}
width: 100%;
height: 100rpx;
background-color: rgb(253, 253, 253);
position: fixed;
left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex;
z-index: 10072;
align-items: center;
&-left {
width: 70%;
display: flex;
justify-content: space-between;
padding: 0 32rpx;
.end-flex {
display: flex;
align-items: center;
}
.car-img {
width: 45rpx;
height: 54rpx;
display: inline-block;
background: url("../../static/imgs/gouwudai.png") center center no-repeat;
background-size: cover;
position: relative;
.badge {
position: absolute;
height: 32rpx;
font-family: Futura-Medium, Futura;
background: #ff63ba;
right: -22rpx;
top: -8rpx;
min-width: 32rpx;
font-weight: 500;
font-size: 20rpx;
font-weight: normal;
color: #ffffff;
line-height: 32rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
}
}
&-right {
width: 169rpx;
font-size: 32rpx;
line-height: 100rpx;
background-color: #0050f6;
text-align: right;
color: #fff;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.goSubmmit {
// background: url('../../static/imgs/fukuan.png') center center no-repeat;
text-align: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 100rpx;
width: 200rpx;
height: 100%;
margin-top: -1rpx;
}
}
.shopClose {
width: 100%;
height: 100rpx;
background: rgba(0,83,255,0.7);
backdrop-filter: blur(10px);
position: fixed;
left: 0;
display: flex;
z-index: 10072;
align-items: center;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 100rpx;
.content {
width: 100%;
text-align: center;
}
width: 100%;
height: 100rpx;
background: rgba(0, 83, 255, 0.7);
backdrop-filter: blur(10px);
position: fixed;
left: 0;
display: flex;
z-index: 10072;
align-items: center;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
color: #ffffff;
text-align: center;
line-height: 100rpx;
.content {
width: 100%;
text-align: center;
}
}
</style>
main.js
import App from './App';
import App from "./App";
//引入vuex
import store from './store';
import utils from './utils/utils';
import store from "./store";
import utils from "./utils/utils";
// console.log(Vue.$u,22)
// 需要在Vue.use(uView)之后执行
// #ifndef VUE3
import Vue from 'vue';
import Vuex from 'vuex'
import uView from 'uview-ui';
import User from '@/request/user';
import Vue from "vue";
import Vuex from "vuex";
import uView from "uview-ui";
import User from "@/request/user";
// main.js
import initToast from "@/components/bocft-toast/initToast.js"
import showToast from "@/components/bocft-toast/bocft-toast.vue"
import taBar from "@/components/tabBar/tabBar.vue"
import initToast from "@/components/bocft-toast/initToast.js";
import showToast from "@/components/bocft-toast/bocft-toast.vue";
import taBar from "@/components/tabBar/tabBar.vue";
initToast(Vue);
Vue.component('show-toast',showToast);
Vue.component('taBar',taBar);
Vue.component("show-toast", showToast);
Vue.component("taBar", taBar);
Vue.use(uView);
Vue.prototype.$utils = utils;
Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2);
Vue.prototype.loginByPhoneNumber = (e) => {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
if (e.detail.errMsg == "getPhoneNumber:ok") {
User.getPhoneNumber(e);
} else if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
uni.showToast({ title: '已拒绝手机号授权', icon: 'error' });
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
uni.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
};
Vue.config.productionTip = false;
App.mpType = 'app';
App.mpType = "app";
const app = new Vue({
...App,
store,
});
export default app
export default app;
app.$mount();
require('./request/index')(app);
require("./request/index")(app);
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue';
import { createSSRApp } from "vue";
export function createApp() {
const app = createSSRApp(App);
return {
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
<template>
<view class="spec-content">
<view class="topBar" :style="{'top':topBarTop+'px','height':topBarHeight+'px'}">
<u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon>
</view>
<view v-if="goodInfo">
<view class="uni-margin-wrap">
<swiper v-if="goodInfo.pics.introImagesApplet" class="swiper">
<swiper-item v-for="item in goodInfo.pics.introImagesApplet" :key="item">
<image :src="item" class="swiper_img" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<swiper v-else class="swiper">
<swiper-item v-for="item in goodInfo.pics.introImages" :key="item">
<image :src="item" class="swiper_img" mode="scaleToFill"></image>
</swiper-item>
</swiper>
</view>
<view class="good spec-info-left">
<view class="good-name">{{ goodInfo.name }}</view>
<view class="specs">
<!-- 规格 -->
<view v-for="specItem in goodInfo.specs" :key="specItem.specId">
<div class="good-spec-name">{{ specItem.specName }}</div>
<view class="good-spec-rule">
<div v-for="specItemRule in specItem.rules":key="specItemRule.ruleId" @click="selectRoles(specItemRule, specItem)">
<div v-if="ShowIt(specItemRule.ruleId)" class="div_item" >
<div v-if="specItemRule.isRecommend=='1'" :class="[UseIt(specItemRule.ruleId)?'disabledStyle':'']" class="default"></div>
<button class="good-spec-rule-item" :disabled="UseIt(specItemRule.ruleId)"
:class="{ active: isActvie(specItemRule) }">
<view @click.prevent="checkSku(specItemRule)">{{ specItemRule.ruleName }}</view>
</button>
</div>
</div>
</view>
</view>
</view>
</view>
<view class="spec-detail">
<view class="spec-detail-title spec-info-left">商品详细</view>
<view v-if="goodInfo.pics.detailImagesApplet">
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImagesApplet" :key="item">
<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image>
</view>
</view>
<view v-else 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 class="good-select-height"></view>
</view>
<view class="good-select" :style="{'padding-bottom':BottomSafeHeight+'px; height:'+(getPx(268)-BottomSafeHeight)+'px'}">
<view class="good-select-price">
<div class="price">
<view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view>
<view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">￥<text class="num">{{ Utils.isInteger(priceTotal.price) }}</text></view>
</div>
<div v-if="!size > 0" style="color: orangered">已售罄</div>
<div v-else class="set_size">
<view class="subtract" @click="reduceGood"></view>
<span>{{ size }}</span>
<view class="add" @click="addGood" ></view>
</div>
</view>
<view v-if="size > 0" class="good-select-cont">
<view>
<a :class="!shopState||!isInRange?'good-select-btn1-close':'good-select-btn1'" @click="getallNum()" v-if="userms">
立即购买
</a>
<button v-if="!userms" :class="!shopState||!isInRange?'good-select-btn1-close':'good-select-btn1'" style="border-radius: 0;" open-type="getPhoneNumber"
@getphonenumber="getallNum">
立即购买
</button>
</view>
<span :class="!shopState||!isInRange?'good-select-btn2-close':'good-select-btn2'" @click="shoppingCart" type="default">加入购物袋</span>
</view>
</view>
</view>
<show-toast ref="toast"/>
</view>
<view class="spec-content">
<view
class="topBar"
:style="{ top: topBarTop + 'px', height: topBarHeight + 'px' }"
>
<u-icon
@click="goBack"
name="arrow-left"
color="#000000"
size="20"
></u-icon>
</view>
<view v-if="goodInfo">
<view class="uni-margin-wrap">
<swiper v-if="goodInfo.pics.introImagesApplet" class="swiper">
<swiper-item
v-for="item in goodInfo.pics.introImagesApplet"
:key="item"
>
<image :src="item" class="swiper_img" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<swiper v-else class="swiper">
<swiper-item v-for="item in goodInfo.pics.introImages" :key="item">
<image :src="item" class="swiper_img" mode="scaleToFill"></image>
</swiper-item>
</swiper>
</view>
<view class="good spec-info-left">
<view class="good-name">{{ goodInfo.name }}</view>
<view class="specs">
<!-- 规格 -->
<view v-for="specItem in goodInfo.specs" :key="specItem.specId">
<div class="good-spec-name">{{ specItem.specName }}</div>
<view class="good-spec-rule">
<div
v-for="specItemRule in specItem.rules"
:key="specItemRule.ruleId"
@click="selectRoles(specItemRule, specItem)"
>
<div v-if="ShowIt(specItemRule.ruleId)" class="div_item">
<div
v-if="specItemRule.isRecommend == '1'"
:class="[UseIt(specItemRule.ruleId) ? 'disabledStyle' : '']"
class="default"
></div>
<button
class="good-spec-rule-item"
:disabled="UseIt(specItemRule.ruleId)"
:class="{ active: isActvie(specItemRule) }"
>
<view @click.prevent="checkSku(specItemRule)">{{
specItemRule.ruleName
}}</view>
</button>
</div>
</div>
</view>
</view>
</view>
</view>
<view class="spec-detail">
<view class="spec-detail-title spec-info-left">商品详细</view>
<view v-if="goodInfo.pics.detailImagesApplet">
<view
class="spec-detail-img"
v-for="item in goodInfo.pics.detailImagesApplet"
:key="item"
>
<image
class="spec-detail-img-item"
:src="item"
mode="scaleToFill"
></image>
</view>
</view>
<view
v-else
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 class="good-select-height"></view>
</view>
<view
class="good-select"
:style="{
'padding-bottom':
BottomSafeHeight +
'px; height:' +
(getPx(268) - BottomSafeHeight) +
'px',
}"
>
<view class="good-select-price">
<div class="price">
<view class="good-select-price-normal"
><text class="moneyLog">￥</text
>{{ Utils.isInteger(priceTotal.discount) }}</view
>
<view
class="good-select-price-small"
v-show="priceTotal.price != priceTotal.discount"
>￥<text class="num">{{
Utils.isInteger(priceTotal.price)
}}</text></view
>
</div>
<div v-if="!size > 0" style="color: orangered">已售罄</div>
<div v-else class="set_size">
<view class="subtract" @click="reduceGood"></view>
<span>{{ size }}</span>
<view class="add" @click="addGood"></view>
</div>
</view>
<view v-if="size > 0" class="good-select-cont">
<view>
<a
:class="
!shopState || !isInRange
? 'good-select-btn1-close'
: 'good-select-btn1'
"
@click="getallNum()"
v-if="userms"
>
立即购买
</a>
<button
v-if="!userms"
:class="
!shopState || !isInRange
? 'good-select-btn1-close'
: 'good-select-btn1'
"
style="border-radius: 0"
open-type="getPhoneNumber"
@getphonenumber="getallNum"
>
立即购买
</button>
</view>
<span
:class="
!shopState || !isInRange
? 'good-select-btn2-close'
: 'good-select-btn2'
"
@click="shoppingCart"
type="default"
>加入购物袋</span
>
</view>
</view>
</view>
<show-toast ref="toast" />
</view>
</template>
<script>
import Utils from '@/utils/utils'
import User from '@/request/user';
import Order from '@/request/order'
import Menu from '@/request/menu'
import Utils from "@/utils/utils";
import User from "@/request/user";
import Order from "@/request/order";
import Menu from "@/request/menu";
export default {
data() {
return {
title: 'Hello1',
imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
goodInfo: null,
selected: [],
available: [],
goods: {},
skusDefault: [],
skusSellout: [],
loginInfo:"",
pirce: 0,
size: 1,
topBarTop:0,
topBarHeight:0,
BottomSafeHeight:0,
Utils,
shopState:true,
showSku:[],
isInRange:true
}
},
onShow() {
uni.setStorageSync("selectFlag",false)
uni.removeStorageSync('goodsList');
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')
this.shopState = JSON.parse(uni.getStorageSync("shopState"))
this.isInRange = uni.getStorageSync("isInRange")===''?true:uni.getStorageSync("isInRange")
},
mounted(){
// 获取胶囊坐标位置
const res = wx.getMenuButtonBoundingClientRect()
const menuInfoTop = res.top
const menuInfoBottom = res.bottom
const menuHeight = res.height
let headHeight = 0
wx.getSystemInfo({
success: (res) => {
headHeight = res.statusBarHeight
}
})
this.topBarTop = menuInfoTop
this.topBarHeight = menuHeight
},
onLoad() {
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
uni.removeStorageSync('goodsList');
const goodsInfo = JSON.parse(uni.getStorageSync('goodsInfo'));
this.goodInfo = goodsInfo;
console.log(JSON.parse(JSON.stringify(this.goodInfo)));
this.initInfo(this.goodInfo)
},
// watch:{
// selected(val){
// console.log(val,'val')
// const {skus,specs} = this.goodInfo
// console.log(skus,'--------skus',specs,'--------specs')
// const ruleIdList = val.map(res=>res.ruleId)
// console.log(ruleIdList)
// }
// },
methods: {
getPx(rpx) {
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
initInfo(goodsInfo){
this.available = []
this.showSku = []
this.selected = []
const skus = goodsInfo.skus;
if (skus) {
const sku = skus.find(v => v.isDefault == 1 && (v.state == 1&&v.isDelete===0)) || skus.find(v => v.isDefault == 0 && (v.state == 1&&v.isDelete===0));
this.skusDefault = skus.find(v => v.isDefault == 1&&v.isDelete===0);
this.skusSellout = skus.find(v => v.isDefault == 1 && (v.state == 1&&v.isDelete===0))
|| skus.find(v => (v.state == 1&&v.isDelete===0))
|| skus.find(v => v.isDefault == 1&&v.isDelete===0)
|| skus[0]
if (sku){
this.selected.push(...sku.rules)
}else{
this.selected = []
};
skus.forEach(item => {
if (item.isDelete === 0) {
item.rules.forEach(rule => {
this.showSku.push(rule.ruleId)
})
}
})
skus.forEach(item => {
if (item.state == 1) {
item.rules.forEach(rule => {
this.available.push(rule.ruleId)
})
}
})
console.log(this.selected,this.showSku)
}
this.$nextTick(() => {
this.buildGoods(e => {
if (e) {
this.size = 1
} else {
this.size = 0
}
})
this.$forceUpdate()
})
},
goBack(){
wx.navigateBack({
delta: 1
});
},
setDefaultStyle(id) {
let selected = false;
if (this.skusDefault && this.skusDefault.rules) {
this.skusDefault.rules.forEach(item => {
if (item.ruleId == id) {
selected = true
}
});
}
return selected
},
checkSku(specItemRule) {
const value = this.UseIt(specItemRule.ruleId)
if(value) {
this.showToast({ title: '该选项已售罄', icon: 'none' });
return
}
},
selectRoles(specItemRule, parent) {
const value = this.UseIt(specItemRule.ruleId)
if(value) {
this.showToast({ title: '该选项已售罄', icon: 'none' });
return
}
const { selected } = this;
selected.forEach((item, index) => {
if (item.specId == parent.specId) {
selected.splice(index, 1)
}
});
this.selected.push({ ...specItemRule, specId: parent.specId })
this.buildGoods()
},
isActvie(data) {
return this.selected.filter(item => item.ruleId == data.ruleId).length > 0
},
buildGoods(callback) {
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 (!sku || skus.state == 2) {
this.showToast({ title: '本商品已经售罄', icon: 'none' });
callback && callback()
} else {
const { category, ...goods } = this.goodInfo;
goods.skus = [sku];
goods.sku = sku
goods.flag = true;
goods.skuId = selectedSku
goods.categoryId = category.id;
goods.goodsName = category.name;
this.goods = goods
callback && callback(true)
}
},
checkNum(type){
const shopCarInfo = uni.getStorageSync('shopCarInfo') || []
let shopCarNum = (type=='add'?1:0)
shopCarInfo.forEach(item=> shopCarNum+=item.num)
let countOfOrder = uni.getStorageSync('countOfOrder');
if ((Number(this.size) + Number(shopCarNum)) <= countOfOrder) {
return true
} else {
this.showToast({
title: '最多可一次购买'+countOfOrder+'杯',
icon: 'none',
});
}
},
addGood() {
if(this.checkNum('add')){
this.size = this.size + 1;
}
},
reduceGood() {
const { size } = this
if (size > 1) {
this.size = size - 1;
}
},
async shoppingCart() {
if(!this.shopState||!this.isInRange){
return
}
if(this.checkNum('addShop')){
const { goods } = this;
const { data } = await Order.checkSku({skuId:goods.skuId})
const {state,goods:newgoods} = data.data
const newInfo = JSON.parse(JSON.stringify(newgoods))
newInfo.category = this.goodInfo.category
this.goodInfo = {...newInfo}
this.initInfo(this.goodInfo)
if(state == 2){
this.showToast({ title: '本商品已经售罄', icon: 'none' });
// this.getMenuList()
return;
}else{
goods.num = this.size;
Utils.getallNum(goods)
uni.switchTab({ url: '/pages/menu/menu' })
}
}
},
async getallNum(e) {
if(!this.shopState||!this.isInRange){
return
}
const gosettleFun = async ()=> {
const { goods } = this;
const { data } = await Order.checkSku({skuId:goods.skuId})
const {state,goods:newgoods} = data.data
const newInfo = JSON.parse(JSON.stringify(newgoods))
newInfo.category = this.goodInfo.category
this.goodInfo = {...newInfo}
this.initInfo(this.goodInfo)
if(state == 2){
this.showToast({ title: '本商品已经售罄', icon: 'none' });
// this.getMenuList()
return;
}else{
goods.num = this.size
Utils.addGoods(goods)
uni.navigateTo({ url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1` })
}
}
const checkLocak = () => {
uni.authorize({
scope: 'scope.userLocation',
success: () => { //1.1 允许授权
console.log("允许授权位置");
gosettleFun()
},
fail: (err) => { //1.2 拒绝授权
wx.exitMiniProgram({ success: (res) => { } })
console.log("获取位置失败")
uni.showModal({
content: '检测到您没打开地理位置权限，是否去设置打开？',
confirmText: "确认",
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({//opensetting是调起设置页面的
success: (res) => {
uni.setStorageSync("updataLoadtion",true)
console.log(res)
if(res.authSetting['scope.userLocation'] == true){//判断res.authsetting的值是true还是false
gosettleFun()
}else{
// console.log("什么也不做");
}
}
})
} else {
console.log('取消');
return false;
}
}
})
}
})
}
let Authorization = uni.getStorageSync('Authorization');
if (!Authorization) {
this.loginByPhoneNumber(e);
checkLocak()
return
}else{
checkLocak()
}
if(!this.shopState||!this.isInRange){
return
}
// return
},
async getMenuList() {
const shopId = uni.getStorageSync('shopData').id
let { data } = await Menu.getMenuList(shopId);
// console.log("menus:"+JSON.stringify(data));
if (data.code == 200) {
data.data = data.data;
this.$store.commit('setMenuAllInfo', data.data);
this.$store.commit('setMenuCategorys', data.data.categorys);
uni.setStorageSync('countOfOrder', parseInt(data.data.countOfOrder));
// this.$refs.MenuAssembly.createList(data.data.categorys)
}
},
// 付款前未登录发起授权
loginByPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
UseIt(ruleId) {
return this.available.indexOf(ruleId) == -1&&this.shopState&&this.isInRange
},
ShowIt(ruleId) {
return this.showSku.indexOf(ruleId) !== -1
}
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
priceTotal() {
let discount = 0;
let price = 0;
const { goods,skusSellout } = this;
if (goods.sku) {
discount = goods.sku.discount * this.size
price = goods.sku.price * this.size
}else if(skusSellout){
discount = Number(skusSellout.discount)
price = Number(skusSellout.price)
}
return { discount: discount.toFixed(2), price: price.toFixed(2) }
}
}
}
data() {
return {
title: "Hello1",
imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
goodInfo: null,
selected: [],
available: [],
goods: {},
skusDefault: [],
skusSellout: [],
loginInfo: "",
pirce: 0,
size: 1,
topBarTop: 0,
topBarHeight: 0,
BottomSafeHeight: 0,
Utils,
shopState: true,
showSku: [],
isInRange: true,
};
},
onShow() {
uni.setStorageSync("selectFlag", false);
uni.removeStorageSync("goodsList");
this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight");
this.shopState = JSON.parse(uni.getStorageSync("shopState"));
this.isInRange =
uni.getStorageSync("isInRange") === ""
? true
: uni.getStorageSync("isInRange");
},
mounted() {
// 获取胶囊坐标位置
const res = wx.getMenuButtonBoundingClientRect();
const menuInfoTop = res.top;
const menuInfoBottom = res.bottom;
const menuHeight = res.height;
let headHeight = 0;
wx.getSystemInfo({
success: (res) => {
headHeight = res.statusBarHeight;
},
});
this.topBarTop = menuInfoTop;
this.topBarHeight = menuHeight;
},
onLoad() {
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
uni.removeStorageSync("goodsList");
const goodsInfo = JSON.parse(uni.getStorageSync("goodsInfo"));
this.goodInfo = goodsInfo;
console.log(JSON.parse(JSON.stringify(this.goodInfo)));
this.initInfo(this.goodInfo);
},
// watch:{
// selected(val){
// console.log(val,'val')
// const {skus,specs} = this.goodInfo
// console.log(skus,'--------skus',specs,'--------specs')
// const ruleIdList = val.map(res=>res.ruleId)
// console.log(ruleIdList)
// }
// },
methods: {
getPx(rpx) {
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
initInfo(goodsInfo) {
this.available = [];
this.showSku = [];
this.selected = [];
const skus = goodsInfo.skus;
if (skus) {
const sku =
skus.find(
(v) => v.isDefault == 1 && v.state == 1 && v.isDelete === 0
) ||
skus.find(
(v) => v.isDefault == 0 && v.state == 1 && v.isDelete === 0
);
this.skusDefault = skus.find(
(v) => v.isDefault == 1 && v.isDelete === 0
);
this.skusSellout =
skus.find(
(v) => v.isDefault == 1 && v.state == 1 && v.isDelete === 0
) ||
skus.find((v) => v.state == 1 && v.isDelete === 0) ||
skus.find((v) => v.isDefault == 1 && v.isDelete === 0) ||
skus[0];
if (sku) {
this.selected.push(...sku.rules);
} else {
this.selected = [];
}
skus.forEach((item) => {
if (item.isDelete === 0) {
item.rules.forEach((rule) => {
this.showSku.push(rule.ruleId);
});
}
});
skus.forEach((item) => {
if (item.state == 1) {
item.rules.forEach((rule) => {
this.available.push(rule.ruleId);
});
}
});
console.log(this.selected, this.showSku);
}
this.$nextTick(() => {
this.buildGoods((e) => {
if (e) {
this.size = 1;
} else {
this.size = 0;
}
});
this.$forceUpdate();
});
},
goBack() {
wx.navigateBack({
delta: 1,
});
},
setDefaultStyle(id) {
let selected = false;
if (this.skusDefault && this.skusDefault.rules) {
this.skusDefault.rules.forEach((item) => {
if (item.ruleId == id) {
selected = true;
}
});
}
return selected;
},
checkSku(specItemRule) {
const value = this.UseIt(specItemRule.ruleId);
if (value) {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
return;
}
},
selectRoles(specItemRule, parent) {
const value = this.UseIt(specItemRule.ruleId);
if (value) {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
return;
}
const { selected } = this;
selected.forEach((item, index) => {
if (item.specId == parent.specId) {
selected.splice(index, 1);
}
});
this.selected.push({ ...specItemRule, specId: parent.specId });
this.buildGoods();
},
isActvie(data) {
return (
this.selected.filter((item) => item.ruleId == data.ruleId).length > 0
);
},
buildGoods(callback) {
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 (!sku || skus.state == 2) {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
callback && callback();
} else {
const { category, ...goods } = this.goodInfo;
goods.skus = [sku];
goods.sku = sku;
goods.flag = true;
goods.skuId = selectedSku;
goods.categoryId = category.id;
goods.goodsName = category.name;
this.goods = goods;
callback && callback(true);
}
},
checkNum(type) {
const shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
let shopCarNum = type == "add" ? 1 : 0;
shopCarInfo.forEach((item) => (shopCarNum += item.num));
let countOfOrder = uni.getStorageSync("countOfOrder");
if (Number(this.size) + Number(shopCarNum) <= countOfOrder) {
return true;
} else {
this.showToast({
title: "一次最多可购买" + countOfOrder + "杯",
icon: "none",
});
}
},
addGood() {
if (this.checkNum("add")) {
this.size = this.size + 1;
}
},
reduceGood() {
const { size } = this;
if (size > 1) {
this.size = size - 1;
}
},
async shoppingCart() {
if (!this.shopState || !this.isInRange) {
return;
}
if (this.checkNum("addShop")) {
const { goods } = this;
const { data } = await Order.checkSku({ skuId: goods.skuId });
const { state, goods: newgoods } = data.data;
const newInfo = JSON.parse(JSON.stringify(newgoods));
newInfo.category = this.goodInfo.category;
this.goodInfo = { ...newInfo };
this.initInfo(this.goodInfo);
if (state == 2) {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
// this.getMenuList()
return;
} else {
goods.num = this.size;
Utils.getallNum(goods);
uni.switchTab({ url: "/pages/menu/menu" });
}
}
},
async getallNum(e) {
if (!this.shopState || !this.isInRange) {
return;
}
const gosettleFun = async () => {
const { goods } = this;
const { data } = await Order.checkSku({ skuId: goods.skuId });
const { state, goods: newgoods } = data.data;
const newInfo = JSON.parse(JSON.stringify(newgoods));
newInfo.category = this.goodInfo.category;
this.goodInfo = { ...newInfo };
this.initInfo(this.goodInfo);
if (state == 2) {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
// this.getMenuList()
return;
} else {
goods.num = this.size;
Utils.addGoods(goods);
uni.navigateTo({
url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1`,
});
}
};
const checkLocak = () => {
uni.authorize({
scope: "scope.userLocation",
success: () => {
//1.1 允许授权
console.log("允许授权位置");
gosettleFun();
},
fail: (err) => {
//1.2 拒绝授权
wx.exitMiniProgram({ success: (res) => {} });
console.log("获取位置失败");
uni.showModal({
content: "检测到您没打开地理位置权限，是否去设置打开？",
confirmText: "确认",
cancelText: "取消",
success: (res) => {
if (res.confirm) {
uni.openSetting({
//opensetting是调起设置页面的
success: (res) => {
uni.setStorageSync("updataLoadtion", true);
console.log(res);
if (res.authSetting["scope.userLocation"] == true) {
//判断res.authsetting的值是true还是false
gosettleFun();
} else {
// console.log("什么也不做");
}
},
});
} else {
console.log("取消");
return false;
}
},
});
},
});
};
let Authorization = uni.getStorageSync("Authorization");
if (!Authorization) {
this.loginByPhoneNumber(e);
checkLocak();
return;
} else {
checkLocak();
}
if (!this.shopState || !this.isInRange) {
return;
}
// return
},
async getMenuList() {
const shopId = uni.getStorageSync("shopData").id;
let { data } = await Menu.getMenuList(shopId);
// console.log("menus:"+JSON.stringify(data));
if (data.code == 200) {
data.data = data.data;
this.$store.commit("setMenuAllInfo", data.data);
this.$store.commit("setMenuCategorys", data.data.categorys);
uni.setStorageSync("countOfOrder", parseInt(data.data.countOfOrder));
// this.$refs.MenuAssembly.createList(data.data.categorys)
}
},
// 付款前未登录发起授权
loginByPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
UseIt(ruleId) {
return (
this.available.indexOf(ruleId) == -1 && this.shopState && this.isInRange
);
},
ShowIt(ruleId) {
return this.showSku.indexOf(ruleId) !== -1;
},
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
priceTotal() {
let discount = 0;
let price = 0;
const { goods, skusSellout } = this;
if (goods.sku) {
discount = goods.sku.discount * this.size;
price = goods.sku.price * this.size;
} else if (skusSellout) {
discount = Number(skusSellout.discount);
price = Number(skusSellout.price);
}
return { discount: discount.toFixed(2), price: price.toFixed(2) };
},
},
};
</script>
<style lang="scss">
.topBar{
// border: 1px solid red;
position: fixed;
z-index: 99999999;
width: 100%;
display: flex;
align-items: center;
padding-left: 34rpx;
.topBar {
// border: 1px solid red;
position: fixed;
z-index: 99999999;
width: 100%;
display: flex;
align-items: center;
padding-left: 34rpx;
}
.uni-margin-wrap {
width: 100%;
width: 100%;
}
.swiper {
height: 561rpx;
width: 100%;
height: 561rpx;
width: 100%;
}
.swiper_img {
width: 100%;
height: 100% !important;
vertical-align: bottom;
width: 100%;
height: 100% !important;
vertical-align: bottom;
}
.spec-content {
width: 100%;
overflow-x: hidden;
width: 100%;
overflow-x: hidden;
}
.spec-info-left {
padding: 28rpx 32rpx;
padding: 28rpx 32rpx;
}
.good {
display: block;
width: 100%;
text-align: left;
// background-color: #000000;
.good-name {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
padding-bottom: 22rpx;
// background-color: #000000;
}
.specs {
// margin-top: 30rpx;
}
.good-spec-name {
padding-top: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
color: #999999;
font-weight: 400;
font-size: 24rpx;
text-align: left;
line-height: 34rpx;
// background-color: blue;
}
.good-spec-rule {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 26rpx;
flex-wrap: wrap;
border-radius: 0rpx;
.div_item {
position: relative;
height: 48rpx;
margin-right: 32rpx;
line-height: 48rpx;
min-width: 120rpx;
z-index: 999999;
.default {
width: 45rpx;
height: 48rpx;
background: url('@/static/imgs/tuijian.png') center center no-repeat;
background-size: 100%;
position: absolute;
right: -17rpx;
top: -30rpx;
z-index: 9;
}
}
}
display: block;
width: 100%;
text-align: left;
// background-color: #000000;
.good-name {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
padding-bottom: 22rpx;
// background-color: #000000;
}
.specs {
// margin-top: 30rpx;
}
.good-spec-name {
padding-top: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
color: #999999;
font-weight: 400;
font-size: 24rpx;
text-align: left;
line-height: 34rpx;
// background-color: blue;
}
.good-spec-rule {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 26rpx;
flex-wrap: wrap;
border-radius: 0rpx;
.div_item {
position: relative;
height: 48rpx;
margin-right: 32rpx;
line-height: 48rpx;
min-width: 120rpx;
z-index: 999999;
.default {
width: 45rpx;
height: 48rpx;
background: url("@/static/imgs/tuijian.png") center center no-repeat;
background-size: 100%;
position: absolute;
right: -17rpx;
top: -30rpx;
z-index: 9;
}
}
}
}
.good-spec-rule-item {
padding: 7rpx 24rpx;
width: 100%;
height: 100%;
font-size: 24rpx;
color: #333333;
text-align: center;
font-weight: 400;
display: inline-block;
margin: 0;
margin: 0;
line-height: 40rpx;
border-radius: 0rpx;
border: none;
font-style: normal;
font-family: PingFangSC-Regular, PingFang SC;
background: #EAEAEA;
pointer-events: none;
&.active {
font-weight: 400;
padding: 7rpx 24rpx;
background: #0050F6;
font-style: normal;
color: #FFFFFF;
border-radius: 0rpx;
border: 0rpx;
font-family: PingFangSC-Regular, PingFang SC;
}
view {
pointer-events: none;
}
padding: 7rpx 24rpx;
width: 100%;
height: 100%;
font-size: 24rpx;
color: #333333;
text-align: center;
font-weight: 400;
display: inline-block;
margin: 0;
margin: 0;
line-height: 40rpx;
border-radius: 0rpx;
border: none;
font-style: normal;
font-family: PingFangSC-Regular, PingFang SC;
background: #eaeaea;
pointer-events: none;
&.active {
font-weight: 400;
padding: 7rpx 24rpx;
background: #0050f6;
font-style: normal;
color: #ffffff;
border-radius: 0rpx;
border: 0rpx;
font-family: PingFangSC-Regular, PingFang SC;
}
view {
pointer-events: none;
}
}
.good-spec-rule-item::after{
z-index: 1;
border-radius: 0rpx;
border: 0rpx;
.good-spec-rule-item::after {
z-index: 1;
border-radius: 0rpx;
border: 0rpx;
}
button[disabled]:not([type]) {
background: url('@/static/imgs/shouqingsku.png') no-repeat;
background-size: 100% 48rpx;
background: url("@/static/imgs/shouqingsku.png") no-repeat;
background-size: 100% 48rpx;
}
.spec-detail {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.spec-detail-title {
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
padding-top: 32rpx !important;
padding-bottom:22rpx !important
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
padding-top: 32rpx !important;
padding-bottom: 22rpx !important;
}
.spec-detail-img {
margin-left: 30rpx;
margin-right: 30rpx;
height: 500rpx;
margin-left: 30rpx;
margin-right: 30rpx;
height: 500rpx;
}
.spec-detail-img:last-child{
margin-bottom: 115rpx;
.spec-detail-img:last-child {
margin-bottom: 115rpx;
}
.spec-detail-img-item {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.good-select-height {
height: 200rpx;
height: 200rpx;
}
.good-select {
width: 100%;
position: fixed;
bottom: 0rpx;
text-align: center;
// height: 268rpx;
background-color: #fff;
height: auto;
padding-bottom: 20rpx;
box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5);
z-index: 9999999
width: 100%;
position: fixed;
bottom: 0rpx;
text-align: center;
// height: 268rpx;
background-color: #fff;
height: auto;
padding-bottom: 20rpx;
box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5);
z-index: 9999999;
}
.good-select-price {
display: flex;
align-items: center;
// height: 68rpx;
background: #FFFFFF;
justify-content: space-between;
align-items: center;
padding: 26rpx 32rpx 26rpx 32rpx;
.price{
display: flex;
align-items: flex-end;
justify-content: flex-start;
.good-select-price-normal {
font-family: Futura-Medium, Futura;
letter-spacing: 1px;
font-size: 32rpx;
color: #333333;
margin-right: 12rpx;
font-weight: 500;
line-height: 38rpx;
.moneyLog {
font-size: 32rpx;
font-weight: 900;
}
}
.good-select-price-small {
font-size: 20rpx;
font-family: ArialMT;
line-height: 32rpx;
color: #999999;
.num {
text-decoration: line-through;
}
}
}
display: flex;
align-items: center;
// height: 68rpx;
background: #ffffff;
justify-content: space-between;
align-items: center;
padding: 26rpx 32rpx 26rpx 32rpx;
.price {
display: flex;
align-items: flex-end;
justify-content: flex-start;
.good-select-price-normal {
font-family: Futura-Medium, Futura;
letter-spacing: 1px;
font-size: 32rpx;
color: #333333;
margin-right: 12rpx;
font-weight: 500;
line-height: 38rpx;
.moneyLog {
font-size: 32rpx;
font-weight: 900;
}
}
.good-select-price-small {
font-size: 20rpx;
font-family: ArialMT;
line-height: 32rpx;
color: #999999;
.num {
text-decoration: line-through;
}
}
}
}
.good-select-cont {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-between;
padding: 0 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-between;
padding: 0 30rpx;
}
.good-select-btn1 {
width: 328rpx;
height: 104rpx;
border: 2rpx solid #0050F6;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050F6;
border-radius: 2px;
line-height: 104rpx;
text-align: center;
background: #FFFFFF;
width: 328rpx;
height: 104rpx;
border: 2rpx solid #0050f6;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050f6;
border-radius: 2px;
line-height: 104rpx;
text-align: center;
background: #ffffff;
}
.good-select-btn1-close {
width: 328rpx;
height: 104rpx;
border: 2rpx solid #999999;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
border-radius: 2px;
line-height: 104rpx;
text-align: center;
background: #FFFFFF;
width: 328rpx;
height: 104rpx;
border: 2rpx solid #999999;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
border-radius: 2px;
line-height: 104rpx;
text-align: center;
background: #ffffff;
}
.good-select-btn2 {
width: 328rpx;
height: 104rpx;
border-radius: 2px;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6;
line-height: 104rpx;
text-align: center;
color: #fff;
width: 328rpx;
height: 104rpx;
border-radius: 2px;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050f6;
line-height: 104rpx;
text-align: center;
color: #fff;
}
.good-select-btn2-close {
width: 328rpx;
height: 104rpx;
border-radius: 2px;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #999999;
line-height: 104rpx;
text-align: center;
color: #fff;
width: 328rpx;
height: 104rpx;
border-radius: 2px;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #999999;
line-height: 104rpx;
text-align: center;
color: #fff;
}
.set_size {
display: flex;
width: 150rpx;
justify-content: space-between;
align-items: center;
.subtract {
width: 40rpx;
height: 40rpx;
background: url('@/static/imgs/jianhao.png') center center no-repeat;
background-size:100% 100%;
}
.add {
width: 40rpx;
height: 40rpx;
background: url('@/static/imgs/jiahao.png') center center no-repeat;
background-size:100% 100%;
}
span {
margin: 0 22rpx 0 26rpx;
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
}
display: flex;
width: 150rpx;
justify-content: space-between;
align-items: center;
.subtract {
width: 40rpx;
height: 40rpx;
background: url("@/static/imgs/jianhao.png") center center no-repeat;
background-size: 100% 100%;
}
.add {
width: 40rpx;
height: 40rpx;
background: url("@/static/imgs/jiahao.png") center center no-repeat;
background-size: 100% 100%;
}
span {
margin: 0 22rpx 0 26rpx;
font-size: 32rpx;
font-family: ArialMT;
color: #000000;
}
}
</style>
mineSubPackage/pages/userInfo/index.vue
<template>
<view class="bigBox">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
<u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon>
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">个人信息</view>
<view
class="topBar"
:style="{
'padding-top': systemBarHeight.statusBarHeight + 'px',
height: systemBarHeight.navigationBarHeight + 'px',
}"
>
<u-icon
@click="Utils.goBack()"
name="arrow-left"
color="#000000"
size="20"
></u-icon>
<view
class="tabTitle"
:style="{ 'line-height': systemBarHeight.navigationBarHeight + 'px' }"
>个人信息</view
>
</view>
<view class="page" :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}">
<view class="avatarBox">
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="userInfo.avatarUrl"/>
</button>
<view
class="page"
:style="{
'padding-top':
systemBarHeight.statusBarHeight +
systemBarHeight.navigationBarHeight +
'px',
}"
>
<view class="avatarBox">
<button
class="avatarBtn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image class="avatar" :src="userInfo.avatarUrl" />
</button>
</view>
<view class="infoBox">
<view class="infoItem name">
<view class="label">昵称</view>
<view class="input"
><input type="nickname" v-model="userInfo.name"
/></view>
<view class="tip" v-if="valate">{{ valateText }}</view>
</view>
<view class="infoBox">
<view class="infoItem name">
<view class="label">昵称</view>
<view class="input"><input type="nickname" v-model="userInfo.name"></view>
<view class="tip" v-if="valate">{{valateText}}</view>
</view>
<view class="infoItem phone">
<view class="label">手机</view>
<view class="input">{{userInfo.phone}}</view>
</view>
<view class="infoItem sex">
<view class="label">性别</view>
<view class="input">
<view class="sexBox">
<view class="sex" v-for="(item,index) in sexList" :key="index" @click="selectedSex(item)">
<view :class="item.value===userInfo.sex?'checked':'nochecked'"></view>
<view class="checkLabel">{{item.label}}</view>
</view>
</view>
</view>
</view>
<view class="infoItem birthday">
<view class="label">生日</view>
<view class="input">
<view class="birthdayBox">
<view :class="canEditBirthday?'text':'textDisabled'">{{birthdayComuted}}</view>
<view class="btn" v-if="canEditBirthday" @click="changeBirthday">修改</view>
</view>
</view>
<view class="infoItem phone">
<view class="label">手机</view>
<view class="input">{{ userInfo.phone }}</view>
</view>
<view class="infoItem sex">
<view class="label">性别</view>
<view class="input">
<view class="sexBox">
<view
class="sex"
v-for="(item, index) in sexList"
:key="index"
@click="selectedSex(item)"
>
<view
:class="item.value === userInfo.sex ? 'checked' : 'nochecked'"
></view>
<view class="checkLabel">{{ item.label }}</view>
</view>
</view>
</view>
</view>
<view class="saveBtn">
<button class="btn" @click="save">保存</button>
<view class="infoItem birthday">
<view class="label">生日</view>
<view class="input">
<view class="birthdayBox">
<view :class="canEditBirthday ? 'text' : 'textDisabled'">{{
birthdayComuted
}}</view>
<view class="btn" v-if="canEditBirthday" @click="changeBirthday"
>修改</view
>
</view>
</view>
</view>
</view>
<view class="saveBtn">
<button class="btn" @click="save">保存</button>
</view>
</view>
<show-toast ref="toast"/>
<show-toast ref="toast" />
<!-- <button @click="exit">退出</button> -->
<u-datetime-picker
:show="timerShow"
:maxDate="(new Date()).valueOf()"
:maxDate="new Date().valueOf()"
:minDate="-631094400"
@close="timerShow = false"
@confirm="choseTime"
......@@ -59,447 +99,451 @@
mode="date"
></u-datetime-picker>
<Modal
class="modal"
title="确认更换生日日期？"
content="生日只可修改一次，是否想要修改？"
:show="birthdayModalShow"
@close="birthdayModalShow = false"
@ok="openTimer"
<Modal
class="modal"
title="确认更换生日日期？"
content="生日只可修改一次，是否想要修改？"
:show="birthdayModalShow"
@close="birthdayModalShow = false"
@ok="openTimer"
/>
</view>
</template>
<script>
import Modal from '@/components/Modal/index.vue'
import Mine from '@/request/mine'
import Utils from '@/utils/utils'
import Store from '@/store';
import Modal from "@/components/Modal/index.vue";
import Mine from "@/request/mine";
import Utils from "@/utils/utils";
import Store from "@/store";
export default {
components: { Modal },
computed:{
birthdayComuted(){
const {birthday} = this.userInfo
const date = new Date(birthday)
const years = date.getFullYear()
const month = date.getMonth()+1
const days = date.getDate()
components: { Modal },
computed: {
birthdayComuted() {
const { birthday } = this.userInfo;
const date = new Date(birthday);
const years = date.getFullYear();
const month = date.getMonth() + 1;
const days = date.getDate();
return years+'.'+month+'.'+days
},
userInfoStorage() {
return uni.getStorageSync('UserInfo');
},
systemBarHeight(){
return this.$store.state.user.systemBarHeight
}
return years + "." + month + "." + days;
},
watch:{
'userInfo.name':{
handler(val){
console.log(val)
if(!/^[0-9a-zA-z\u4e00-\u9fa5]{0,7}$/.test(val)){
this.valateText = '最多7个字符，不可输入标点符号及特殊字符'
this.valate = true
}else{
if(!val){
this.valateText = '请输入昵称'
this.valate = true
}else{
this.valateText = ''
this.valate = false
}
}
}
}
userInfoStorage() {
return uni.getStorageSync("UserInfo");
},
systemBarHeight() {
return this.$store.state.user.systemBarHeight;
},
data() {
return {
Utils,
valateText:'',
canEditBirthday:true,
valate:false,
rules:{
name:[
{
required: true,
errorMessage: '请输入姓名'
}
]
},
timerShow: false,
birthdayModalShow:false,
value1: Number(new Date()),
userInfo: {
avatarUrl:'../../../static/touxiang.png',
name:'脸脸',
phone:'152****8932',
sex:0,
birthday:1658679810130,
id:''
},
sexList:[
{
'label':'男',
'value':0
},
{
'label':'女',
'value':1
},
]
},
watch: {
"userInfo.name": {
handler(val) {
console.log(val);
if (!/^[0-9a-zA-z\u4e00-\u9fa5]{0,7}$/.test(val)) {
this.valateText = "最多7个字符，不可输入标点符号及特殊字符";
this.valate = true;
} else {
if (!val) {
this.valateText = "请输入昵称";
this.valate = true;
} else {
this.valateText = "";
this.valate = false;
}
}
},
},
async onLoad(option) {
const {info} = option
// if(info){
const {avatarUrl,gender=0,nickName='点点'} = info?JSON.parse(decodeURIComponent(info)):{}
const {data} = await Mine.getUserInfo()
const { birthday, createTime, id, phone, sex, userName } = data.data
this.userInfo.id = id
this.canEditBirthday = !birthday
if(!birthday){
this.userInfo.birthday = new Date(createTime.replace(/-/g,'/')).valueOf()
}else{
this.userInfo.birthday = Date.parse(birthday)
}
this.userInfo.avatarUrl = avatarUrl
this.userInfo.sex = sex?sex?1:0:gender
this.userInfo.name = nickName
this.userInfo.phone = phone.substr(0,3) + "****" + phone.substr(7)
},
data() {
return {
Utils,
valateText: "",
canEditBirthday: true,
valate: false,
rules: {
name: [
{
required: true,
errorMessage: "请输入姓名",
},
],
},
timerShow: false,
birthdayModalShow: false,
value1: Number(new Date()),
userInfo: {
avatarUrl: "../../../static/touxiang.png",
name: "脸脸",
phone: "152****8932",
sex: 0,
birthday: 1658679810130,
id: "",
},
sexList: [
{
label: "男",
value: 0,
},
{
label: "女",
value: 1,
},
],
};
},
async onLoad(option) {
const { info } = option;
// if(info){
const {
avatarUrl,
gender = 0,
nickName = "点点",
} = info ? JSON.parse(decodeURIComponent(info)) : {};
const { data } = await Mine.getUserInfo();
const { birthday, createTime, id, phone, sex, userName } = data.data;
this.userInfo.id = id;
this.canEditBirthday = !birthday;
if (!birthday) {
this.userInfo.birthday = new Date(
createTime.replace(/-/g, "/")
).valueOf();
} else {
this.userInfo.birthday = Date.parse(birthday);
}
const {...result} = this.userInfoStorage
const sendData ={
...result,
avatarUrl,
canEditBirthday:this.canEditBirthday
}
Store.commit('setUserInfo', sendData);
// this.save(false)
// }else{
// const { avatarUrl,birthday, id, phone, sex, customerName, canEditBirthday } = this.userInfoStorage
// this.canEditBirthday = canEditBirthday
// this.userInfo.avatarUrl = avatarUrl
// this.userInfo.sex = sex?1:0
// this.userInfo.name = customerName
// this.userInfo.birthday = birthday
// this.userInfo.id = id
// this.userInfo.phone = phone
// }
this.userInfo.avatarUrl = avatarUrl;
this.userInfo.sex = sex ? (sex ? 1 : 0) : gender;
this.userInfo.name = nickName;
this.userInfo.phone = phone.substr(0, 3) + "****" + phone.substr(7);
const { ...result } = this.userInfoStorage;
const sendData = {
...result,
avatarUrl,
canEditBirthday: this.canEditBirthday,
};
Store.commit("setUserInfo", sendData);
// this.save(false)
// }else{
// const { avatarUrl,birthday, id, phone, sex, customerName, canEditBirthday } = this.userInfoStorage
// this.canEditBirthday = canEditBirthday
// this.userInfo.avatarUrl = avatarUrl
// this.userInfo.sex = sex?1:0
// this.userInfo.name = customerName
// this.userInfo.birthday = birthday
// this.userInfo.id = id
// this.userInfo.phone = phone
// }
},
methods: {
async choseTime(e) {
const sendDate = {
birthday: this.userInfo.birthday,
id: this.userInfo.id,
};
const { data } = await Mine.editBirthdat(sendDate);
const { code } = data;
if (code === 200) {
this.canEditBirthday = false;
this.showToast({ title: "信息修改成功" });
this.userInfo.birthday = e.value;
}
this.timerShow = false;
},
methods:{
async choseTime(e) {
const sendDate = {
birthday:this.userInfo.birthday,
id:this.userInfo.id
}
const {data} = await Mine.editBirthdat(sendDate)
const {code} = data
if(code===200){
this.canEditBirthday = false
this.showToast({ title: '修改成功'})
this.userInfo.birthday = e.value
}
this.timerShow = false
},
// editAvatar(e) {
// console.log(123)
// wx.getUserProfile({
// desc:'用于完善用户资料',
// success:(res)=>{
// const {userInfo} = res
// const Info = {
// avatarUrl:userInfo.avatarUrl,
// nickName:userInfo.nickName
// }
// this.userInfo.avatarUrl = Info.avatarUrl
// this.userInfo.name = Info.nickName
// this.save(false)
// }
// })
// },
async onChooseAvatar(e) {
const { detail } = e
const { avatarUrl } = detail
this.userInfo.avatarUrl = avatarUrl
let Authorization = uni.getStorageSync(`Authorization`);
// await Mine.upLoadImg(formData)
// 上传头像接口
uni.uploadFile({
url:`${this.getBaseUrl()}/common/uploadOss`,
filePath:avatarUrl,
name:'file',
header: {
'Authorization':Authorization
},
success: (uploadFileRes)=>{
const { data } =uploadFileRes
this.userInfo.avatarUrl = data
}
})
// editAvatar(e) {
// console.log(123)
// wx.getUserProfile({
// desc:'用于完善用户资料',
// success:(res)=>{
// const {userInfo} = res
// const Info = {
// avatarUrl:userInfo.avatarUrl,
// nickName:userInfo.nickName
// }
// this.userInfo.avatarUrl = Info.avatarUrl
// this.userInfo.name = Info.nickName
// this.save(false)
// }
// })
// },
async onChooseAvatar(e) {
const { detail } = e;
const { avatarUrl } = detail;
this.userInfo.avatarUrl = avatarUrl;
let Authorization = uni.getStorageSync(`Authorization`);
// await Mine.upLoadImg(formData)
// 上传头像接口
uni.uploadFile({
url: `${this.getBaseUrl()}/common/uploadOss`,
filePath: avatarUrl,
name: "file",
header: {
Authorization: Authorization,
},
getBaseUrl() {
let path = process.env.ENV_PATH == undefined?require('../../../env/dev.js'): require(process.env.ENV_PATH)
// #ifdef MP-WEIXIN
// ---------------- 根据微信开发环境配置请求地址 --------------------
// 获取当前帐号信息
const accountInfo = wx.getAccountInfoSync();
// env类型 develop:开发版、trial:体验版、release:正式版
const envWx = accountInfo.miniProgram.envVersion;
if(envWx === 'release'){
path = 'https://api.ihaoin.com'
}else{
path = 'https://hooloo-dev-api.gdatac.com'
}
// #endif
return path
success: (uploadFileRes) => {
const { data } = uploadFileRes;
this.userInfo.avatarUrl = data;
},
openTimer() {
this.birthdayModalShow = false
this.timerShow = true
},
changeBirthday(){
this.birthdayModalShow = true
},
selectedSex(val){
console.log(val)
this.userInfo.sex = val.value
},
exit(){
wx.exitMiniProgram({
success:()=>{
console.log(123)
}
})
});
},
getBaseUrl() {
let path =
process.env.ENV_PATH == undefined
? require("../../../env/dev.js")
: require(process.env.ENV_PATH);
// #ifdef MP-WEIXIN
// ---------------- 根据微信开发环境配置请求地址 --------------------
// 获取当前帐号信息
const accountInfo = wx.getAccountInfoSync();
// env类型 develop:开发版、trial:体验版、release:正式版
const envWx = accountInfo.miniProgram.envVersion;
if (envWx === "release") {
path = "https://api.ihaoin.com";
} else {
path = "https://hooloo-dev-api.gdatac.com";
}
// #endif
return path;
},
openTimer() {
this.birthdayModalShow = false;
this.timerShow = true;
},
changeBirthday() {
this.birthdayModalShow = true;
},
selectedSex(val) {
console.log(val);
this.userInfo.sex = val.value;
},
exit() {
wx.exitMiniProgram({
success: () => {
console.log(123);
},
async save(isReturn = true) {
const {customerName,...result} = this.userInfoStorage
if(!this.valate){
const {sex,name,id,avatarUrl} = this.userInfo
const sendData = {
sex: Number(sex)===0?false:true,
userName: name,
id
}
console.log(sendData)
await Mine.editUserAvatar({avatarUrl:avatarUrl,id})
const { data } = await Mine.editUserInfo(sendData)
console.log(data)
const {code = 0} = data
if(code===200){
this.showToast({ title: '保存成功'})
const data = {
...result,
customerName:name,
avatarUrl,
canEditBirthday:this.canEditBirthday,
sex
}
Store.commit('setUserInfo', data);
uni.setStorage({ key: 'userInfo', data: data });
uni.setStorageSync('UserInfo',data)
if(isReturn){
wx.navigateBack({
delta: 1
});
}
}
}
});
},
async save(isReturn = true) {
const { customerName, ...result } = this.userInfoStorage;
if (!this.valate) {
const { sex, name, id, avatarUrl } = this.userInfo;
const sendData = {
sex: Number(sex) === 0 ? false : true,
userName: name,
id,
};
console.log(sendData);
await Mine.editUserAvatar({ avatarUrl: avatarUrl, id });
const { data } = await Mine.editUserInfo(sendData);
console.log(data);
const { code = 0 } = data;
if (code === 200) {
this.showToast({ title: "保存成功" });
const data = {
...result,
customerName: name,
avatarUrl,
canEditBirthday: this.canEditBirthday,
sex,
};
Store.commit("setUserInfo", data);
uni.setStorage({ key: "userInfo", data: data });
uni.setStorageSync("UserInfo", data);
if (isReturn) {
wx.navigateBack({
delta: 1,
});
}
}
}
}
}
},
},
};
</script>
<style scoped lang="less">
.bigBox {
.topBar{
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
.tabTitle{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333
}
}
.topBar {
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
.tabTitle {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333;
}
}
}
.page{
background: #F8F8F8;
height: 100vh;
.page {
background: #f8f8f8;
height: 100vh;
}
.avatarBox {
z-index: 1;
width: 100%;
height: 320rpx;
display: flex;
align-items: center;
background: #FFFFFF;
.avatarBtn {
border: 0px;
background: white;
height: 200rpx;
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
}
}
.avatarBtn::after {
border: none;
}
.avatarBox {
z-index: 1;
width: 100%;
height: 320rpx;
display: flex;
align-items: center;
background: #ffffff;
.avatarBtn {
border: 0px;
background: white;
height: 200rpx;
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
}
}
.avatarBtn::after {
border: none;
}
}
.infoBox {
z-index: 1;
background: #FFFFFF;
overflow: hidden;
padding: 0rpx 38rpx 0rpx 40rpx;
margin-top: 24rpx;
.name {
position: relative;
.tip {
position: absolute;
font-size: 18rpx;
color: red;
bottom: 9rpx;
left: 190rpx;
}
}
.infoItem {
height: 99rpx;
border-bottom: 1rpx solid #ECECEC;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding-top: 7rpx;
.infoBox {
z-index: 1;
background: #ffffff;
overflow: hidden;
padding: 0rpx 38rpx 0rpx 40rpx;
margin-top: 24rpx;
.label {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.name {
position: relative;
.input {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-left: 136rpx;
.tip {
position: absolute;
font-size: 18rpx;
color: red;
bottom: 9rpx;
left: 190rpx;
}
}
.sexBox {
display: flex;
align-items: center;
justify-content: flex-start;
.infoItem {
height: 99rpx;
border-bottom: 1rpx solid #ececec;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding-top: 7rpx;
.sex {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 64rpx;
.label {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.checked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 16rpx;
}
.input {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-left: 136rpx;
.nochecked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 16rpx;
}
.sexBox {
display: flex;
align-items: center;
justify-content: flex-start;
.checkLabel {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
.birthdayBox {
display: flex;
justify-content: flex-start;
align-items: center;
.textDisabled {
color: #999999;
}
.btn {
width: 96rpx;
height: 48rpx;
border-radius: 2rpx;
border: 2rpx solid #0050F6;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
color: #0050F6;
line-height: 48rpx;
margin-left: 192rpx;
.sex {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 64rpx;
}
}
.checked {
width: 24rpx;
height: 24rpx;
background: url("../../../static/imgs/duigouxuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
margin-right: 16rpx;
}
.nochecked {
width: 24rpx;
height: 24rpx;
background: url("../../../static/imgs/weixuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
margin-right: 16rpx;
}
}
.checkLabel {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
.infoItem:last-child {
border: 0rpx;
.birthdayBox {
display: flex;
justify-content: flex-start;
align-items: center;
.textDisabled {
color: #999999;
}
}
.saveBtn {
width: 670rpx;
height: 98rpx;
margin: 0 auto;
margin-top: 32rpx;
.btn {
background: #0050F6;
border-radius: 2px;
font-size: 32rpx;
height: 98rpx;
line-height: 98rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
.btn::before {
background: #0050F6;
border-radius: 2px;
font-size: 32rpx;
height: 98rpx;
line-height: 98rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
width: 96rpx;
height: 48rpx;
border-radius: 2rpx;
border: 2rpx solid #0050f6;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
text-align: center;
color: #0050f6;
line-height: 48rpx;
margin-left: 192rpx;
}
}
}
</style>
\ No newline at end of file
}
.infoItem:last-child {
border: 0rpx;
}
}
.saveBtn {
width: 670rpx;
height: 98rpx;
margin: 0 auto;
margin-top: 32rpx;
.btn {
background: #0050f6;
border-radius: 2px;
font-size: 32rpx;
height: 98rpx;
line-height: 98rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
.btn::before {
background: #0050f6;
border-radius: 2px;
font-size: 32rpx;
height: 98rpx;
line-height: 98rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
}
</style>
orderSubPackage/pages/orderInfo/index.vue
<template>
<div class="pages">
<view class="topBar" :style="{'padding-top':statusBarHeight+'px','height':navigationBarHeight+'px'}">
<u-icon @click="goBackOrder" name="arrow-left" color="#000000" size="20"></u-icon>
<view class="tabTitle" :style="{'line-height':navigationBarHeight+'px'}">订单详情</view>
</view>
<div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}">
<view class="status_text">订单状态：{{ orderStatusText }}</view>
<view class="tips">
<view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦～</view>
<view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐～</view>
<view v-if="orderInfo.state >= 8 && orderInfo.state <= 15">非常抱歉，我们会继续努力的～</view>
<view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候，预计<text class="time">{{waitTime}}</text>分钟后可取</view>
</view>
<div class="btns">
<a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a>
<a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a>
<a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn_cancel">申请退款</a>
<a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a>
<a type="primary" @click="refundInfo" v-if="checkStatus(orderInfo.state,[12,13,14,15])" class="btn_cancel">退款详情</a>
</div>
</div>
<div class="order_flow" v-if="qrShow">
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
<div class="realQrcodeBox" v-if="qrShow&&isBuild">
<image mode="aspectFit" :src="ewmImg"/>
</div>
<div v-if="qrShow&&!isBuild" class="qr_code" >
<image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr" />
</div>
<!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> -->
<canvas v-if="qrShow" class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
<div v-if="qrShow" class="flow_describe">
<view class="titleBox">
<view class="qrcodeTitle">
<view class="title">扫码流程</view>
<view class="icon">
<u-icon name="question-circle" color="#999999" :size="getPx(34)"></u-icon>
</view>
</view>
<view class="right" @click="goShow()">
<view class="Text">
<view>查看实景演示</view>
<image class="arrow" :style="{'height':'18rpx','width':'10rpx'}" :src="'../../../static/imgs/jiantouhui.png'" />
</view>
</view>
</view>
<image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png" />
</div>
</div>
<div class="shop_info">
<div class="address">
<div class="address_1">{{ orderInfo.shop.name }}</div>
<div class="address_2">{{ orderInfo.shop.address }}</div>
</div>
<div v-for="item in orderInfo.orderDetails" :key="item.id">
<div class="goods">
<div class="goods_item">
<image v-if="jsonParse(item.goods.pics).thumbnailApplet" :src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img" />
<image v-else :src="jsonParse(item.goods.pics).thumbnail" class="goods_img" />
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.goodsName }}</div>
<div class="price">¥{{ Utils.isInteger(item.unitPrice) }}</div>
</div>
<div class="goods_psce">
<div class="psce_name">
<span v-for="(rule, index) in jsonParse(item.specRuleDetail)" :key="rule.specId">
{{ rule.ruleName }}
<text v-if="index != jsonParse(item.specRuleDetail).length - 1">/</text>
</span>
</div>
<div class="size">x{{ item.num }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="coupon" v-if="orderInfo.couponAmount">
<div class="title">HOOLOO券</div>
<div class="num-action">
<span class="price">-￥{{String(orderInfo.couponAmount).replace("-","")}}</span>
</div>
</div>
<div class="total">
<div class="size">共{{ totalNum }}件商品</div>
<div class="price">
<span class="paid_in">实付</span>
<span class="money"><text class="money_logo">￥</text>{{ Utils.isInteger(orderInfo.paidAmount) }}</span>
</div>
</div>
</div>
<div class="order_describe">
<view class="title">订单信息</view>
<view class="item_cont">
<view class="item">
<span class="label">下单时间：</span>
<span class="value">{{ orderInfo.createdAt }}</span>
</view>
<view class="item1">
<span class="label">取单号码：</span>
<span class="value">{{ orderInfo.orderNum }}</span>
</view>
<view class="item1">
<span class="label">订单编号：</span>
<span class="value">{{ orderInfo.orderNo }}</span>
</view>
</view>
</div>
<div class="customer_service">
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
<view class="serverBox">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<span :style="{'margin-left':'16rpx'}">联系客服</span>
</view>
<view>
<image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" />
</view>
</button>
</div>
<show-toast ref="toast"/>
</div>
<div class="pages">
<view
class="topBar"
:style="{
'padding-top': statusBarHeight + 'px',
height: navigationBarHeight + 'px',
}"
>
<u-icon
@click="goBackOrder"
name="arrow-left"
color="#000000"
size="20"
></u-icon>
<view
class="tabTitle"
:style="{ 'line-height': navigationBarHeight + 'px' }"
>订单详情</view
>
</view>
<div
class="order_status"
:style="{
'margin-top': statusBarHeight + navigationBarHeight + getPx(32) + 'px',
}"
>
<view class="status_text">订单状态：{{ orderStatusText }}</view>
<view class="tips">
<view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦～</view>
<view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐～</view>
<view v-if="orderInfo.state >= 8 && orderInfo.state <= 15"
>非常抱歉，我们会继续努力的～</view
>
<view v-if="orderInfo.state == 2 || orderInfo.state == 3"
>请您耐心等候，预计<text class="time">{{ waitTime }}</text
>分钟后可取</view
>
</view>
<div class="btns">
<a
type="primary"
@click="cancelOrder"
v-if="orderInfo.state == 1"
class="btn_cancel"
>取消订单</a
>
<a
type="primary"
@click="PayNow"
v-if="orderInfo.state == 1"
class="btn"
>立即支付</a
>
<a
type="primary"
@click="toRefund"
v-if="orderInfo.state == 2"
class="btn_cancel"
>申请退款</a
>
<a
type="primary"
@click="oneMoreOrder(orderInfo)"
v-if="orderInfo.state != 1"
class="btn"
>再来一单</a
>
<a
type="primary"
@click="refundInfo"
v-if="checkStatus(orderInfo.state, [12, 13, 14, 15])"
class="btn_cancel"
>退款详情</a
>
</div>
</div>
<div class="order_flow" v-if="qrShow">
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
<div class="realQrcodeBox" v-if="qrShow && isBuild">
<image mode="aspectFit" :src="ewmImg" />
</div>
<div v-if="qrShow && !isBuild" class="qr_code">
<image
mode="aspectFit"
:src="'/static/imgs/erweimazhedang.png'"
class="qr"
/>
</div>
<!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> -->
<canvas
v-if="qrShow"
class="canvas-code"
canvas-id="myQrcode"
style="
background: #fff;
width: 200px;
height: 200px;
display: block;
left: -800rpx;
position: absolute;
"
/>
<div v-if="qrShow" class="flow_describe">
<view class="titleBox">
<view class="qrcodeTitle">
<view class="title">扫码流程</view>
<view class="icon">
<u-icon
name="question-circle"
color="#999999"
:size="getPx(34)"
></u-icon>
</view>
</view>
<view class="right" @click="goShow()">
<view class="Text">
<view>查看实景演示</view>
<image
class="arrow"
:style="{ height: '18rpx', width: '10rpx' }"
:src="'../../../static/imgs/jiantouhui.png'"
/>
</view>
</view>
</view>
<image
:mode="'aspectFit'"
class="flow_img"
src="/static/imgs/saomaliucheng.png"
/>
</div>
</div>
<div class="shop_info">
<div class="address">
<div class="address_1">{{ orderInfo.shop.name }}</div>
<div class="address_2">{{ orderInfo.shop.address }}</div>
</div>
<div v-for="item in orderInfo.orderDetails" :key="item.id">
<div class="goods">
<div class="goods_item">
<image
v-if="jsonParse(item.goods.pics).thumbnailApplet"
:src="jsonParse(item.goods.pics).thumbnailApplet"
class="goods_img"
/>
<image
v-else
:src="jsonParse(item.goods.pics).thumbnail"
class="goods_img"
/>
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.goodsName }}</div>
<div class="price">¥{{ Utils.isInteger(item.unitPrice) }}</div>
</div>
<div class="goods_psce">
<div class="psce_name">
<span
v-for="(rule, index) in jsonParse(item.specRuleDetail)"
:key="rule.specId"
>
{{ rule.ruleName }}
<text
v-if="index != jsonParse(item.specRuleDetail).length - 1"
>/</text
>
</span>
</div>
<div class="size">x{{ item.num }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="coupon" v-if="orderInfo.couponAmount">
<div class="title">HOOLOO券</div>
<div class="num-action">
<span class="price"
>-￥{{ String(orderInfo.couponAmount).replace("-", "") }}</span
>
</div>
</div>
<div class="total">
<div class="size">共{{ totalNum }}件商品</div>
<div class="price">
<span class="paid_in">实付</span>
<span class="money"
><text class="money_logo">￥</text
>{{ Utils.isInteger(orderInfo.paidAmount) }}</span
>
</div>
</div>
</div>
<div class="order_describe">
<view class="title">订单信息</view>
<view class="item_cont">
<view class="item">
<span class="label">下单时间：</span>
<span class="value">{{ orderInfo.createdAt }}</span>
</view>
<view class="item1">
<span class="label">取单号码：</span>
<span class="value">{{ orderInfo.orderNum }}</span>
</view>
<view class="item1">
<span class="label">订单编号：</span>
<span class="value">{{ orderInfo.orderNo }}</span>
</view>
</view>
</div>
<div class="customer_service">
<button
class="function_item_text"
open-type="contact"
bindcontact="handleContact"
session-from="sessionFrom"
>
<view class="serverBox">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<span :style="{ 'margin-left': '16rpx' }">联系客服</span>
</view>
<view>
<image
class="icno-arrow"
:src="'../../../static/imgs/jiantouhei.png'"
/>
</view>
</button>
</div>
<show-toast ref="toast" />
</div>
</template>
<script>
import Order from '@/request/order';
import QRCode from '@/utils/qrCode'
import Menu from '@/request/menu';
import Utils from '@/utils/utils'
import { systemInfo } from '@/utils/mixin.js'
import Order from "@/request/order";
import QRCode from "@/utils/qrCode";
import Menu from "@/request/menu";
import Utils from "@/utils/utils";
import { systemInfo } from "@/utils/mixin.js";
import { $EventBus } from "@/utils/EventBus";
export default {
mixins: [systemInfo],
onLoad(option) {
this.Authorization = uni.getStorageSync('Authorization')
this.initData(option)
},
onShow() {
uni.setStorageSync('allow',true)
uni.setStorageSync('goodsList',{})
// this.backToMneu = false
},
// onUnload(){
// this.goBack()
// },
data() {
return {
orderInfo: {},
ewmImg: '',
Utils,
isBuild:true,
waitTime:0,
backFlag:false,
backToMneu:false,
Authorization:''
}
},
methods: {
goShow() {
uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'})
},
refundInfo() {
const { id } = this.orderInfo
uni.setStorageSync('orderId', id);
let url = '/orderSubPackage/pages/refundInfo/index'
uni.navigateTo({ url })
},
checkStatus(status,list){
if(list.includes(Number(status))){
return true
}else{
return false
}
},
getPx(rpx) {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
// console.log(wx.getSystemInfoSync().windowWidth);
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
goBackOrder(){
this.backFlag = true
this.goBack()
},
goBack(){
console.log(this.backToMneu,'backToMneu')
if(this.backFlag){
if(this.backToMneu){
uni.switchTab({ url: '/pages/menu/menu' })
}else{
uni.switchTab({ url: '/pages/order/order' })
}
this.backFlag = false
}
},
async oneMoreOrder(item) {
uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar');
const numObj = {}
const { id, shopId, orderDetails } = item;
const newOrderDetail = [...orderDetails]
newOrderDetail.forEach(item => {
newOrderDetail[item.skuId] = Number(item.num)
})
const { data } = await Order.moreOrder({ orderId: id, shopId });
if(!data || !data.data){
this.showToast({ title: "该订单中的商品已经售罄了" });
return;
}
let list = new Array();
data.data.forEach(item => {
const skuId = item.skus[0].skuId
const nextData = { ...item, skuId, num: newOrderDetail[skuId], flag: true, sku: item.skus[0] }
if (nextData.sku.state == 1) {
list.push(nextData);
}
});
if(!list || list.length<=0) {
this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' });
return;
}
list.forEach(nextData => {
Utils.getallNum(nextData);
})
this.backFlag = false
uni.switchTab({ url: '/pages/menu/menu' })
},
async initData(option){
this.getSystemInfo()
this.backToMneu = false
this.backFlag = true
let oId = uni.getStorageSync('orderId');
console.log(option,'option')
if(JSON.stringify(option)!=='{}'&&option){
this.option = JSON.stringify(option)
const { orderId = '',from = '' } = option
// 从结算进入
console.log(from)
if(from==='settlement'){
uni.setStorageSync('shopCarInfo',[])
this.backToMneu = true
}
// 从订阅消息进入
let Authorization = uni.getStorageSync('Authorization')
if(orderId){
uni.setStorageSync("updataShopCar",false)
if(!Authorization){
this.backFlag = true
uni.switchTab({ url: '/pages/order/order' })
return
}else{
this.backFlag = false
oId = orderId
}
}
}
// return
const {data = {}} = await Order.getOrderDetail({orderId:oId})
this.orderInfo = data?.data
const getTime = ['2', '3'].indexOf(this.orderInfo.state) >= 0
const isBuild = ['2','3','4', '5'].indexOf(this.orderInfo.state) >= 0;
if(getTime){
const {data = {}} = await Order.getOrderWaiteTime({orderId:oId})||{}
this.waitTime = data?.data
}
if (isBuild) {
// new QRCode('myQrcode', {
// text: this.orderInfo.pickCode+'###',
// width: 141, //canvas 画布的宽
// height: 141, //canvas 画布的高
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
// callback: (res) => {
this.ewmImg = this.orderInfo.pickCode
// }
// })
}
this.isBuild = isBuild
},
async PayNow() {
const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id })
const sendData = {
orderId: this.orderInfo.id,
switchTab:false,
callBack:this.initData,
...orderInfo.data.data
}
if (orderInfo) {
if (orderInfo && orderInfo.data.code == 200) {
await Menu.requestPayment(sendData);
}
}
},
toRefund() {
uni.showModal({
title: '确认退款',
success: (res) => {
if (res.confirm) {
Order.orderRefund({ orderId: this.orderInfo.id, refundAmount: this.orderInfo.paidAmount }).then(res => {
this.initData()
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
jsonParse(json) {
return JSON.parse(json)
},
cancelOrder() {
Order.cancelOrder({ orderId: this.orderInfo.id }).then(res => {
this.backFlag = false
uni.switchTab({ url: '/pages/menu/menu' })
})
},
},
computed: {
totalNum() {
let totalNum = 0;
const {orderDetails=[]} = this.orderInfo
orderDetails.forEach(item => {
totalNum += parseInt(item.num);
})
return totalNum;
},
qrShow() {
return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0;
},
qrTextShow() {
return ['2','3'].indexOf(this.orderInfo.state) >= 0;
},
// 1 未支付
// 2 已支付
// 3 支付制作中
// 4 制作完成未取
// 5 取餐中
// 6 正常完成
// 7 待取超时
// 8 未支付取消
// 9 支付后制作前取消
// 10 制作中取消
// 11 制作完成取消
// 12 退款中
// 13 退款失败
// 14 部分退款
// 15 已退款
// 50 其他人工干预状态
orderStatusText() {
switch (this.orderInfo.state) {
case '1':
return '待付款'
case '2':
return '待制作'
case '3':
return '制作中'
case '4':
return '待取餐'
case '5':
return '取餐中'
case '6':
case '7':
return '已完成'
case '8':
case '9':
case '10':
case '11':
return '已取消'
case '12':
return '退款中'
case '13':
return '退款失败'
case '14':
return '部分退款'
case '15':
return '已退款'
default:
return '未知状态'
}
},
qrText() {
switch (this.orderInfo.state) {
case '2':
return '待制作'
case '3':
return '制作中'
default:
return ''
}
},
userms() {
return this.$store.getters.Authorization;
},
}
}
mixins: [systemInfo],
onLoad(option) {
this.Authorization = uni.getStorageSync("Authorization");
this.initData(option);
},
onShow() {
uni.setStorageSync("allow", true);
uni.setStorageSync("goodsList", {});
// this.backToMneu = false
},
// onUnload(){
// this.goBack()
// },
data() {
return {
orderInfo: {},
ewmImg: "",
Utils,
isBuild: true,
waitTime: 0,
backFlag: false,
backToMneu: false,
Authorization: "",
};
},
methods: {
goShow() {
uni.navigateTo({ url: "/orderSubPackage/pages/showhow/index" });
},
refundInfo() {
const { id } = this.orderInfo;
uni.setStorageSync("orderId", id);
let url = "/orderSubPackage/pages/refundInfo/index";
uni.navigateTo({ url });
},
checkStatus(status, list) {
if (list.includes(Number(status))) {
return true;
} else {
return false;
}
},
getPx(rpx) {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
// console.log(wx.getSystemInfoSync().windowWidth);
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
goBackOrder() {
this.backFlag = true;
this.goBack();
},
goBack() {
console.log(this.backToMneu, "backToMneu");
if (this.backFlag) {
if (this.backToMneu) {
uni.switchTab({ url: "/pages/menu/menu" });
} else {
uni.switchTab({ url: "/pages/order/order" });
}
this.backFlag = false;
}
},
async oneMoreOrder(item) {
uni.removeStorageSync("shopCarInfo");
$EventBus.$emit("updateCar");
const numObj = {};
const { id, shopId, orderDetails } = item;
const newOrderDetail = [...orderDetails];
newOrderDetail.forEach((item) => {
newOrderDetail[item.skuId] = Number(item.num);
});
const { data } = await Order.moreOrder({ orderId: id, shopId });
if (!data || !data.data) {
this.showToast({ title: "这款已经卖完啦" });
return;
}
let list = new Array();
data.data.forEach((item) => {
const skuId = item.skus[0].skuId;
const nextData = {
...item,
skuId,
num: newOrderDetail[skuId],
flag: true,
sku: item.skus[0],
};
if (nextData.sku.state == 1) {
list.push(nextData);
}
});
if (!list || list.length <= 0) {
this.showToast({ title: "这款已经卖完啦", icon: "error" });
return;
}
list.forEach((nextData) => {
Utils.getallNum(nextData);
});
this.backFlag = false;
uni.switchTab({ url: "/pages/menu/menu" });
},
async initData(option) {
this.getSystemInfo();
this.backToMneu = false;
this.backFlag = true;
let oId = uni.getStorageSync("orderId");
console.log(option, "option");
if (JSON.stringify(option) !== "{}" && option) {
this.option = JSON.stringify(option);
const { orderId = "", from = "" } = option;
// 从结算进入
console.log(from);
if (from === "settlement") {
uni.setStorageSync("shopCarInfo", []);
this.backToMneu = true;
}
// 从订阅消息进入
let Authorization = uni.getStorageSync("Authorization");
if (orderId) {
uni.setStorageSync("updataShopCar", false);
if (!Authorization) {
this.backFlag = true;
uni.switchTab({ url: "/pages/order/order" });
return;
} else {
this.backFlag = false;
oId = orderId;
}
}
}
// return
const { data = {} } = await Order.getOrderDetail({ orderId: oId });
this.orderInfo = data?.data;
const getTime = ["2", "3"].indexOf(this.orderInfo.state) >= 0;
const isBuild = ["2", "3", "4", "5"].indexOf(this.orderInfo.state) >= 0;
if (getTime) {
const { data = {} } =
(await Order.getOrderWaiteTime({ orderId: oId })) || {};
this.waitTime = data?.data;
}
if (isBuild) {
// new QRCode('myQrcode', {
// text: this.orderInfo.pickCode+'###',
// width: 141, //canvas 画布的宽
// height: 141, //canvas 画布的高
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
// callback: (res) => {
this.ewmImg = this.orderInfo.pickCode;
// }
// })
}
this.isBuild = isBuild;
},
async PayNow() {
const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id });
const sendData = {
orderId: this.orderInfo.id,
switchTab: false,
callBack: this.initData,
...orderInfo.data.data,
};
if (orderInfo) {
if (orderInfo && orderInfo.data.code == 200) {
await Menu.requestPayment(sendData);
}
}
},
toRefund() {
uni.showModal({
title: "确认退款",
success: (res) => {
if (res.confirm) {
Order.orderRefund({
orderId: this.orderInfo.id,
refundAmount: this.orderInfo.paidAmount,
}).then((res) => {
this.initData();
});
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
},
jsonParse(json) {
return JSON.parse(json);
},
cancelOrder() {
Order.cancelOrder({ orderId: this.orderInfo.id }).then((res) => {
this.backFlag = false;
uni.switchTab({ url: "/pages/menu/menu" });
});
},
},
computed: {
totalNum() {
let totalNum = 0;
const { orderDetails = [] } = this.orderInfo;
orderDetails.forEach((item) => {
totalNum += parseInt(item.num);
});
return totalNum;
},
qrShow() {
return ["2", "3", "4", "5"].indexOf(this.orderInfo.state) >= 0;
},
qrTextShow() {
return ["2", "3"].indexOf(this.orderInfo.state) >= 0;
},
// 1 未支付
// 2 已支付
// 3 支付制作中
// 4 制作完成未取
// 5 取餐中
// 6 正常完成
// 7 待取超时
// 8 未支付取消
// 9 支付后制作前取消
// 10 制作中取消
// 11 制作完成取消
// 12 退款中
// 13 退款失败
// 14 部分退款
// 15 已退款
// 50 其他人工干预状态
orderStatusText() {
switch (this.orderInfo.state) {
case "1":
return "待付款";
case "2":
return "待制作";
case "3":
return "制作中";
case "4":
return "待取餐";
case "5":
return "取餐中";
case "6":
case "7":
return "已完成";
case "8":
case "9":
case "10":
case "11":
return "已取消";
case "12":
return "退款中";
case "13":
return "退款失败";
case "14":
return "部分退款";
case "15":
return "已退款";
default:
return "未知状态";
}
},
qrText() {
switch (this.orderInfo.state) {
case "2":
return "待制作";
case "3":
return "制作中";
default:
return "";
}
},
userms() {
return this.$store.getters.Authorization;
},
},
};
</script>
<style lang="scss" scoped>
.pages {
padding-top: 1rpx;
padding-bottom: 32rpx;
.topBar{
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333
}
}
padding-top: 1rpx;
padding-bottom: 32rpx;
.topBar {
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333;
}
}
}
.order_status {
// max-height: 174rpx;
background: #FFFFFF;
margin: 32rpx 32rpx;
padding: 24rpx 0rpx 32rpx 0rpx;
.status_text {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
}
.tips {
text-align: center;
margin-top: 15rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.time {
font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif;
font-weight: normal;
color: #0050F6;
margin: 0 16rpx;
}
}
.btns {
padding-top: 28rpx;
text-align: center;
width: 428rpx;
display: flex;
margin: 0 auto;
justify-content: space-around;
a {
line-height: 64rpx;
}
}
.btn {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
width: 167rpx;
height: 64rpx;
background: #0050F6;
border-radius: 2rpx;
}
.btn_cancel {
box-sizing: border-box;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050F6;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
border: 2rpx solid #0050F6;
}
// max-height: 174rpx;
background: #ffffff;
margin: 32rpx 32rpx;
padding: 24rpx 0rpx 32rpx 0rpx;
.status_text {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
}
.tips {
text-align: center;
margin-top: 15rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.time {
font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif;
font-weight: normal;
color: #0050f6;
margin: 0 16rpx;
}
}
.btns {
padding-top: 28rpx;
text-align: center;
width: 428rpx;
display: flex;
margin: 0 auto;
justify-content: space-around;
a {
line-height: 64rpx;
}
}
.btn {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
width: 167rpx;
height: 64rpx;
background: #0050f6;
border-radius: 2rpx;
}
.btn_cancel {
box-sizing: border-box;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0050f6;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
border: 2rpx solid #0050f6;
}
}
.order_flow {
background: #FFFFFF;
margin: 32rpx;
padding-top: 55.01rpx;
.code {
text-align: center;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
z-index:99
}
.status_text {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
}
.qr_code {
height: 474rpx;
width: 470rpx;
display: block;
margin-top: 36.99rpx;
position: relative;
padding-bottom: 40rpx;
margin-bottom: 0rpx;
margin-left: 108rpx;
.qr {
width: 100%;
height: 100%;
vertical-align: bottom;
}
}
.scan_tips {
padding-bottom: 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
text-align: center;
}
.realQrcodeBox{
margin: 0 auto;
width: 474.6rpx;
margin-top: 38rpx;
margin-bottom: 37rpx;
height: 476rpx;
overflow: hidden;
image{
width: 100%;
height: 100%;
vertical-align: bottom;
}
}
.flow_describe {
padding-top: 29rpx;
padding-left: 32rpx;
padding-right: 32rpx;
padding-bottom: 60rpx;
.titleBox {
display: flex;
align-items: flex-end;
.qrcodeTitle {
display: flex;
justify-content: flex-start;
align-items: center;
.title {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
}
.icon {
margin-left: 8rpx;
}
}
.title {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
}
.right {
display: flex;
margin-left: 8rpx;
margin-bottom: 1rpx;
.Text {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
}
.arrow {
margin-left: 8rpx;
}
}
}
.flow_img {
padding: 18rpx 0rpx 0rpx 32rpx;
width: 592rpx;
height: 244rpx;
display: block;
vertical-align: bottom;
}
}
background: #ffffff;
margin: 32rpx;
padding-top: 55.01rpx;
.code {
text-align: center;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
z-index: 99;
}
.status_text {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
text-align: center;
}
.qr_code {
height: 474rpx;
width: 470rpx;
display: block;
margin-top: 36.99rpx;
position: relative;
padding-bottom: 40rpx;
margin-bottom: 0rpx;
margin-left: 108rpx;
.qr {
width: 100%;
height: 100%;
vertical-align: bottom;
}
}
.scan_tips {
padding-bottom: 32rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #666666;
text-align: center;
}
.realQrcodeBox {
margin: 0 auto;
width: 474.6rpx;
margin-top: 38rpx;
margin-bottom: 37rpx;
height: 476rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
vertical-align: bottom;
}
}
.flow_describe {
padding-top: 29rpx;
padding-left: 32rpx;
padding-right: 32rpx;
padding-bottom: 60rpx;
.titleBox {
display: flex;
align-items: flex-end;
.qrcodeTitle {
display: flex;
justify-content: flex-start;
align-items: center;
.title {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
}
.icon {
margin-left: 8rpx;
}
}
.title {
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #000000;
}
.right {
display: flex;
margin-left: 8rpx;
margin-bottom: 1rpx;
.Text {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
}
.arrow {
margin-left: 8rpx;
}
}
}
.flow_img {
padding: 18rpx 0rpx 0rpx 32rpx;
width: 592rpx;
height: 244rpx;
display: block;
vertical-align: bottom;
}
}
}
.shop_info {
margin: 32rpx;
background: #FFFFFF;
padding: 40rpx 32rpx 22rpx 32rpx;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.address {
border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 25rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.address_2 {
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
}
}
.goods {
// padding-top: 20rpx;
.goods_item {
display: flex;
align-items: center;
margin-top: 32rpx;
}
.goods_img {
height: 112rpx;
width: 112rpx;
background-color: #eee;
margin-right: 24rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
// align-items: center;
.name {
height: 40rpx;
line-height: 40rpx;
margin-top: 10rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
height: 40rpx;
line-height: 40rpx;
margin-top: 12rpx;
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
}
.psce_name {
height: 34rpx;
line-height: 34rpx;
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.size {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
margin-top: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
}
}
.goods:last-child {
border-bottom: 1rpx solid #EEEEEE;
padding-bottom: 30rpx;
}
.discount {
margin-top: 24rpx;
padding-bottom: 24rpx;
border-bottom: 0.1px solid #F4F4F4;
.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;
}
}
}
.coupon {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 24rpx;
padding-bottom: 23.57rpx;
border-bottom: 1rpx solid #EEEEEE;
.title {
font-size: 28rpx;
font-family: ArialMT;
color: #333333;
height: 40rpx;
line-height: 40rpx;
}
.num {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
display: flex;
align-items: center;
color: #999999;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
.num-action {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #FF63BA;
height: 40rpx;
line-height: 40rpx;
.price{
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
// margin-top: 32rpx;
padding-top: 24rpx;
.size {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
display: flex;
align-items: flex-end;
.paid_in {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
// vertical-align: bottom;
}
.money {
height: 48rpx;
line-height: 50rpx;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
.money_logo {
font-weight: 900;
}
}
}
}
margin: 32rpx;
background: #ffffff;
padding: 40rpx 32rpx 22rpx 32rpx;
h3 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
}
.address {
border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 25rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.address_2 {
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
}
}
.goods {
// padding-top: 20rpx;
.goods_item {
display: flex;
align-items: center;
margin-top: 32rpx;
}
.goods_img {
height: 112rpx;
width: 112rpx;
background-color: #eee;
margin-right: 24rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
// align-items: center;
.name {
height: 40rpx;
line-height: 40rpx;
margin-top: 10rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
height: 40rpx;
line-height: 40rpx;
margin-top: 12rpx;
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
}
.psce_name {
height: 34rpx;
line-height: 34rpx;
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.size {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
margin-top: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
}
}
.goods:last-child {
border-bottom: 1rpx solid #eeeeee;
padding-bottom: 30rpx;
}
.discount {
margin-top: 24rpx;
padding-bottom: 24rpx;
border-bottom: 0.1px solid #f4f4f4;
.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;
}
}
}
.coupon {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 24rpx;
padding-bottom: 23.57rpx;
border-bottom: 1rpx solid #eeeeee;
.title {
font-size: 28rpx;
font-family: ArialMT;
color: #333333;
height: 40rpx;
line-height: 40rpx;
}
.num {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500;
display: flex;
align-items: center;
color: #999999;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select {
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
.num-action {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #ff63ba;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select {
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
// margin-top: 32rpx;
padding-top: 24rpx;
.size {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
display: flex;
align-items: flex-end;
.paid_in {
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
// vertical-align: bottom;
}
.money {
height: 48rpx;
line-height: 50rpx;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
.money_logo {
font-weight: 900;
}
}
}
}
}
.order_describe {
background: #fff;
padding: 24rpx 32rpx 24rpx 32rpx;
margin: 32rpx 32rpx 32rpx 32rpx;
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
height: 40rpx;
border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 24rpx;
}
.item_cont {
padding-top: 6rpx;
}
.item1,
.item {
margin-top: 20rpx;
line-height: 34rpx;
.label {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
height: 34rpx;
}
.value {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
line-height: 28rpx;
height: 28rpx;
}
}
.item1 {
margin-top: 18rpx;
}
background: #fff;
padding: 24rpx 32rpx 24rpx 32rpx;
margin: 32rpx 32rpx 32rpx 32rpx;
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
height: 40rpx;
border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 24rpx;
}
.item_cont {
padding-top: 6rpx;
}
.item1,
.item {
margin-top: 20rpx;
line-height: 34rpx;
.label {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 34rpx;
height: 34rpx;
}
.value {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
line-height: 28rpx;
height: 28rpx;
}
}
.item1 {
margin-top: 18rpx;
}
}
.customer_service {
height: 90rpx;
line-height: 90rpx;
background: #FFFFFF;
font-weight: 400;
color: #000000;
padding: 0rpx 31rpx;
margin: 32rpx;
.function_item_text {
width: 100%;
margin: 0;
padding: 10rpx 10rpx 10rpx 0rpx;
background-color: #FFFFFF;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
border-radius: 0px;
display: flex;
justify-content: space-between;
color: #333333;
font-weight: 400;
font-style: normal;
.serverBox{
display: flex;
justify-content: flex-start;
align-items: center;
span {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
.icno-arrow {
margin-top: 2rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
.function_item_text::after {
border: unset;
}
height: 90rpx;
line-height: 90rpx;
background: #ffffff;
font-weight: 400;
color: #000000;
padding: 0rpx 31rpx;
margin: 32rpx;
.function_item_text {
width: 100%;
margin: 0;
padding: 10rpx 10rpx 10rpx 0rpx;
background-color: #ffffff;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
border-radius: 0px;
display: flex;
justify-content: space-between;
color: #333333;
font-weight: 400;
font-style: normal;
.serverBox {
display: flex;
justify-content: flex-start;
align-items: center;
span {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
.icno-arrow {
margin-top: 2rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
.function_item_text::after {
border: unset;
}
}
</style>
\ No newline at end of file
</style>
orderSubPackage/pages/settlement/index.vue
<template>
<view class="pages">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
<u-icon @click="returnHome?goHome():Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon>
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">订单结算</view>
</view>
<div class="shop_info" :style="{'margin-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight+Utils.getPx(32))+'px'}">
<h3>门店确认</h3>
<div class="address">
<div class="address_1">{{ shopData.name }}</div>
<div v-if="shopData.distance && shopData.distance!=-1" class="address_2">距您{{ shopData.distance }}，请确定门店后下单</div>
<div v-else class="address_2">请确定门店后下单</div>
</div>
<view class="pages">
<view
class="topBar"
:style="{
'padding-top': systemBarHeight.statusBarHeight + 'px',
height: systemBarHeight.navigationBarHeight + 'px',
}"
>
<u-icon
@click="returnHome ? goHome() : Utils.goBack()"
name="arrow-left"
color="#000000"
size="20"
></u-icon>
<view
class="tabTitle"
:style="{ 'line-height': systemBarHeight.navigationBarHeight + 'px' }"
>订单结算</view
>
</view>
<div
class="shop_info"
:style="{
'margin-top':
systemBarHeight.statusBarHeight +
systemBarHeight.navigationBarHeight +
Utils.getPx(32) +
'px',
}"
>
<h3>门店确认</h3>
<div class="address">
<div class="address_1">{{ shopData.name }}</div>
<div
v-if="shopData.distance && shopData.distance != -1"
class="address_2"
>
距您{{ shopData.distance }}，请确定门店后下单
</div>
<div v-else class="address_2">请确定门店后下单</div>
</div>
<div>
<div class="title">取单时间</div>
<div class="time">现在下单，预计 <span class="min">{{ duration }}</span> 分钟后取餐</div>
<div class="time">
现在下单，预计 <span class="min">{{ duration }}</span> 分钟后取餐
</div>
</div>
</div>
<div class="goods_info">
<span class="goodInfoTitle">商品详细</span>
<div class="goods" v-for="item in goods" :key="item.goodsId">
<div class="goods_item">
<image
v-if="item.pics.thumbnailApplet"
class="goods_img"
:src="item.pics.thumbnailApplet"
/>
<image v-else class="goods_img" :src="item.pics.thumbnail" />
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.name }}</div>
<div class="price">
¥{{ Utils.isInteger(setPrice(item.sku.discount)) }}
</div>
</div>
<div class="goods_psce">
<div class="psce_name">
<span
v-for="(rule, index) in item.sku.rules"
:key="rule.ruleId"
>
{{ rule.ruleName }}
<span v-if="index != item.sku.rules.length - 1">/</span>
</span>
</div>
<div class="size">x {{ item.num }}</div>
</div>
</div>
</div>
</div>
<div class="coupon" @click="goCouponSelect">
<div class="title">HOOLOO券</div>
<div :class="[ticketNum > 0 ? 'num-action' : 'num']">
<span v-if="selectCoupon.couponAmount" class="price"
>-￥{{ selectCoupon.couponAmount }}</span
>
<span v-else>{{
ticketNum > 0 ? ticketNum + "张可用" : "暂无可用优惠"
}}</span>
<image
v-if="!ticketNum > 0"
class="arrow-right-select"
:src="'../../../static/imgs/jiantouhei.png'"
/>
<image
v-else
class="arrow-right-select"
:src="'../../../static/imgs/jiantoufen.png'"
/>
</div>
</div>
<div class="total">
<div class="size">共{{ totalNum }}件商品</div>
<div class="priceBox">
<span class="paid_in">实付</span>
<span class="money">￥{{ Utils.isInteger(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="TermsOfAgreement" v-if="!TermsStatus">
<div
@click="clickAgreeTerms"
:class="agreeTerms ? 'checked' : 'nochecked'"
></div>
<div class="content">
已阅读并同意<span @click="goTerms(1)">《用户协议》</span>、<span
@click="goTerms(2)"
>《隐私权政策》</span
>、<span @click="goTerms(3)">《支付协议》</span>
</div>
</div>
<div class="goods_info">
<span class="goodInfoTitle">商品详细</span>
<div class="goods" v-for="item in goods" :key="item.goodsId">
<div class="goods_item">
<image v-if="item.pics.thumbnailApplet" class="goods_img" :src="item.pics.thumbnailApplet"/>
<image v-else class="goods_img" :src="item.pics.thumbnail" />
<div class="goods_text">
<div class="goods_name">
<div class="name">{{ item.name }}</div>
<div class="price">¥{{ Utils.isInteger(setPrice(item.sku.discount)) }}</div>
</div>
<div class="goods_psce">
<div class="psce_name">
<span v-for="(rule,index) in item.sku.rules" :key="rule.ruleId">
{{ rule.ruleName }}
<span v-if="index!=item.sku.rules.length-1">/</span>
</span>
</div>
<div class="size">x {{ item.num }}</div>
</div>
</div>
</div>
</div>
<div class="coupon" @click="goCouponSelect">
<div class="title">HOOLOO券</div>
<div :class="[ticketNum>0?'num-action':'num']">
<span v-if="selectCoupon.couponAmount" class="price">-￥{{selectCoupon.couponAmount}}</span>
<span v-else>{{ticketNum>0?ticketNum+'张可用':'暂无可用优惠'}}</span>
<image v-if="!ticketNum>0" class="arrow-right-select" :src="'../../../static/imgs/jiantouhei.png'" />
<image v-else class="arrow-right-select" :src="'../../../static/imgs/jiantoufen.png'" />
</div>
</div>
<div class="total">
<div class="size">共{{ totalNum }}件商品</div>
<div class="priceBox">
<span class="paid_in">实付</span>
<span class="money">￥{{ Utils.isInteger(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="TermsOfAgreement" v-if="!TermsStatus">
<div @click="clickAgreeTerms" :class="agreeTerms?'checked':'nochecked'"></div>
<div class="content">
已阅读并同意<span @click="goTerms(1)">《用户协议》</span>、<span @click="goTerms(2)">《隐私权政策》</span>、<span @click="goTerms(3)">《支付协议》</span>
</div>
</div>
<div style="height:150rpx"></div>
<div class="footer" :style="{'padding-bottom':BottomSafeHeight+'px'}">
<div class="total">
<div class="the_sum">
<span class="name">实付</span>
<span class="price">￥{{ Utils.isInteger(totalPrice) }}</span>
</div>
<!-- <div class="sun">
</div>
<div style="height: 150rpx"></div>
<div class="footer" :style="{ 'padding-bottom': BottomSafeHeight + 'px' }">
<div class="total">
<div class="the_sum">
<span class="name">实付</span>
<span class="price">￥{{ Utils.isInteger(totalPrice) }}</span>
</div>
<!-- <div class="sun">
<div class="price">总优惠￥{{ reduction }}</div>
</div> -->
</div>
<view v-if="userms" class="payment" @click="messageAndSave">付款</view>
<button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">付款</button>
</div>
<show-toast ref="toast"/>
<u-popup :show="messagePopup" mode="bottom" :round="5" :overlay="true" zIndex="10071" :customStyle="{'background':'#2C2C2C'}">
<view class="messageBox">
<view class="title">
<image class="image" src="../../../static/imgs/messageLogo.png"></image>
<view class="text">HOOLOO COFFEE 申请</view>
</view>
<view class="desc">
<view class="">发送一次以下消息</view>
</view>
<view class="content">
<view class="contentItem"v-for="(item,index) in messageList" :key="index" @click="changeContentFlag(index)">
<view :class="item.status?'checked':'nochecked'" :style="{'width':'40rpx','height':'40rpx'}"></view>
<view class="text">{{item.title}}</view>
</view>
</view>
<view class="btns">
<view class="cancle btn" @click="cancleMessage">取消</view>
<view class="submit btn" @click="submitMessage">确定</view>
</view>
<view class="save">
<view :class="saveFlag?'checked':'nochecked'" :style="{'width':'26rpx','height':'26rpx'}" @click="changeSaveFlage"></view>
<view class="text" @click="changeSaveFlage">总是保持以上选择，不在询问</view>
</view>
</view>
</u-popup>
</view>
</div>
<view v-if="userms" class="payment" @click="messageAndSave">付款</view>
<button
v-if="!userms"
class="payment"
style="border-radius: 0"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
付款
</button>
</div>
<show-toast ref="toast" />
<u-popup
:show="messagePopup"
mode="bottom"
:round="5"
:overlay="true"
zIndex="10071"
:customStyle="{ background: '#2C2C2C' }"
>
<view class="messageBox">
<view class="title">
<image
class="image"
src="../../../static/imgs/messageLogo.png"
></image>
<view class="text">HOOLOO COFFEE 申请</view>
</view>
<view class="desc">
<view class="">发送一次以下消息</view>
</view>
<view class="content">
<view
class="contentItem"
v-for="(item, index) in messageList"
:key="index"
@click="changeContentFlag(index)"
>
<view
:class="item.status ? 'checked' : 'nochecked'"
:style="{ width: '40rpx', height: '40rpx' }"
></view>
<view class="text">{{ item.title }}</view>
</view>
</view>
<view class="btns">
<view class="cancle btn" @click="cancleMessage">取消</view>
<view class="submit btn" @click="submitMessage">确定</view>
</view>
<view class="save">
<view
:class="saveFlag ? 'checked' : 'nochecked'"
:style="{ width: '26rpx', height: '26rpx' }"
@click="changeSaveFlage"
></view>
<view class="text" @click="changeSaveFlage"
>总是保持以上选择，不在询问</view
>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { $EventBus } from "@/utils/EventBus";
import Utils from '@/utils/utils'
import Menu from '@/request/menu'
import User from '@/request/user'
import Order from '@/request/order'
import Utils from "@/utils/utils";
import Menu from "@/request/menu";
import User from "@/request/user";
import Order from "@/request/order";
export default {
onHide() {
console.log('onHide--------',this.cleanFlag,'this.cleanFlag')
if(this.cleanFlag) {
this.goods = {}
}
},
onShow() {
const allow = uni.getStorageSync('allow');
console.log('onshow-----------',allow,'allow')
if(allow) {
if ((JSON.stringify(this.goods)!="{}")) {
Order.getWaitTine({
shopId: uni.getStorageSync('shopData').id,
goods: this.goods
}).then(({ data }) => {
this.duration = data.data
})
}else{
uni.switchTab({ url: '/pages/menu/menu' })
}
}
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')
this.TermsStatus = uni.getStorageSync('TermsStatus') || false
},
async onLoad(option) {
this.returnHome = false
uni.setStorageSync('allow',true)
console.log('onload')
// 清除优惠卷信息
this.$store.commit("cleanInfo",{})
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
// 商品详情页点击立即支付进入
if (option.goodsList) {
console.log('详情进入')
// this.getMessageFlag()
const shopData = uni.getStorageSync('shopData');
this.shopData = shopData
this.buyType = 3;
console.log(uni.getStorageSync('goodsList'));
this.goods = uni.getStorageSync('goodsList') || [];
this.payType = '2'
this.saveGetTicket()
return
}
// 微信扫码进入
this.option = JSON.stringify(option)
const { q } = option;
// console.log(q);
if (q) {
console.log('扫码进入',q)
uni.setStorageSync("selectFlag",false)
// this.getMessageFlag()
this.saveGetTicket()
User.getLocation((state, params) => {
uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar');
// let id = decodeURIComponent(q).split('?')[1].split('=')[1];
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q))
console.log(optionDecode,'optionDecode')
this.optionDecode = optionDecode
const loginInfo = uni.getStorageSync("loginInfo")
const { id, recognizePerson } = optionDecode
const openid = loginInfo?JSON.parse(loginInfo).openid:""
const sendData = {}
this.returnHome = true
if(recognizePerson){
sendData.faceInfoId = recognizePerson,
sendData.openid = openid
}
Menu.getScreenShopCar(id, params,sendData).then(res => {
const data = JSON.parse(res.data.data);
console.log(data);
this.shopData = data.shop;
this.buyType = data.screenNo;
this.goods = data.goods.map(item => {
const data = { ...item, skuId: item.sku.skuId, flag: true }
Utils.getallNum(data, true) // 不校验数量
return data
})
})
})
return
}
// 购物车点击进入
if(uni.getStorageSync('shopCarInfo').length!=0) {
console.log('购物车进入')
// this.getMessageFlag()
console.log(uni.getStorageSync('shopCarInfo'))
const shopData = uni.getStorageSync('shopData');
this.shopData = shopData
this.buyType = 3;
const shopCarInfo = uni.getStorageSync('shopCarInfo') || []
this.goods = shopCarInfo.filter(item => item.flag);
this.saveGetTicket()
return
}
},
data() {
return {
cleanFlag:false,
returnHome:false,
messageList:[
{
tmp:'1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU',
title:'下单成功通知',
status:true
},
{
tmp:'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM',
title:'订单状态变更通知',
status:true
},
{
tmp:'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74',
title:'取餐提醒',
status:true
}
],
saveFlag:false,
messagePopup: false,
goods: [],
buyType: '',
shopData: {},
option: '',
payType: '1',
duration: '',
loginInfo: '',
BottomSafeHeight:0,
Utils,
agreeTerms:true,
TermsStatus:true,
ticketNum:0,
msgInfo:{
},
sendMsgData: {
sendMsgFlag1:false,
sendMsgFlag2:false,
sendMsgFlag3:false
},
optionDecode:{}
}
},
computed: {
systemBarHeight(){
return this.$store.state.user.systemBarHeight
},
selectCoupon() {
const data = this.$store.state.order.selectTicket
return data
},
userms() {
return this.$store.getters.Authorization;
},
totalNum() {
if(JSON.stringify(this.goods)=='{}')return 0
let totalNum = 0;
this.goods.map(item => {
item.flag ? totalNum += item.num : totalNum += 0
})
return totalNum
},
reduction() {
if(JSON.stringify(this.goods)=='{}')return 0
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 {
discountNum += 0
price += 0
}
})
return (price - discountNum).toFixed(2)
},
amountOld() {
if(JSON.stringify(this.goods)=='{}')return 0
let totalPrice = 0;
this.goods.forEach(item => {
const sku = item.sku;
item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0)
})
return totalPrice.toFixed(2)
},
totalPrice() {
if(JSON.stringify(this.goods)=='{}')return 0
let totalPrice = 0;
this.goods.forEach(item => {
const sku = item.sku;
item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0)
})
totalPrice-=this.selectCoupon.couponAmount||0
return totalPrice.toFixed(2)
}
},
methods: {
goHome() {
uni.switchTab({ url: '/pages/menu/menu' })
},
getPx(rpx) {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
// console.log(wx.getSystemInfoSync().windowWidth);
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
async getMessageFlag() {
const {data} = await User.getUserMsgInfo()
console.log(data)
const {data:newdata} = data
const {flagExpireDate,sendMsgFlag1 = '',sendMsgFlag2 = '',sendMsgFlag3 = ''} = newdata
this.sendMsgData.sendMsgFlag1 = sendMsgFlag1
this.sendMsgData.sendMsgFlag2 = sendMsgFlag2
this.sendMsgData.sendMsgFlag3 = sendMsgFlag3
this.sendMsgData.flagExpireData = flagExpireDate?Date.parse(flagExpireDate.substring(0,10)):''
},
cancleMessage() {
this.messagePopup = false
this.sendMsgData = {
sendMsgFlag1:false,
sendMsgFlag2:false,
sendMsgFlag3:false
}
this.saveReserve()
},
// 保存用户通知授权信息
async submitMessage() {
this.messageList.forEach((item,index) => {
this.sendMsgData[`sendMsgFlag${index+1}`] = item.status
})
let { data } = await User.setAllow({...this.sendMsgData,rememberFlag:this.saveFlag})
this.messagePopup = false
if(data.code===200){
this.saveReserve()
}
},
changeContentFlag(index) {
this.messageList[index].status = !this.messageList[index].status
},
changeSaveFlage(){
console.log(this.saveFlag)
this.saveFlag = !this.saveFlag
},
closeT(){
this.messagePopup = false
},
// 勾选隐私协议
clickAgreeTerms(){
this.agreeTerms = !this.agreeTerms
},
// 跳转隐私协议页面
goTerms(type) {
uni.navigateTo({url:'/orderSubPackage/pages/terms/index?type='+type})
},
itemReduction(discount, price, num) {
return ((price - discount) * num).toFixed(2)
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
const { recognizePerson } = this.optionDecode
if(recognizePerson) {
e.faceInfoId = recognizePerson
}
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
messageAndSave() {
if(!this.TermsStatus&&!this.agreeTerms){
this.showToast({ title: "请同意下方协议条款" });
return
}else{
// if(this.agreeTerms)uni.setStorageSync('TermsStatus',true)
}
const tmpid = ['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU', 'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM', 'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74']
const val = {}
wx.requestSubscribeMessage({
tmplIds: tmpid,
success: (res) => {
const finalValue = Object.values(res).indexOf('reject')
tmpid.forEach(item=>{
val[item] = res[item]==='accept'?true:false
})
if(finalValue===-1){
uni.setStorageSync('isMessage', 'true')
// User.setAllow(1)
this.saveReserve(val)
}else{
// User.setAllow(2)
this.saveReserve(val)
}
},
fail: (err) => {
tmpid.forEach(item=>{
val[item] = false
})
console.log(err);
// User.setAllow(2)
this.saveReserve(val)
}
})
},
// 组装数据
AssemblyOrder(){
let list = [];
if (this.payType == '1') {
list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true);
} else {
list = uni.getStorageSync('goodsList').filter((v) => v.flag == true);
}
return Utils.AssemblyOrder(this.shopData, this.totalPrice, this.totalNum, this.buyType, list);
},
// 结算组装数据获取优惠卷列表
async saveGetTicket() {
// 组装购物车数据或者立即支付数据
const res = this.AssemblyOrder()
if(res){
const {data:list} = await Menu.requestTicketList(res);
const {data:num} = await Menu.requestTicketNum(res);
if(list.code==200){
const {data} = list
this.ticketList = data
this.$store.commit('setTickerList',this.ticketList)
}
if(num.code==200){
const {data} = num
this.ticketNum = data
}
}
},
//结算组装数据发起订单
async saveReserve(val = {}) {
uni.setStorageSync('allow',false)
// 组装购物车数据或者立即支付数据
let list = [];
if (this.payType == '1') {
list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true);
} else {
list = uni.getStorageSync('goodsList').filter((v) => v.flag == true);
}
const location = uni.getStorageSync("location")
const {lat,lng} = location
// sendMsgFlag1：下单成功通知
// sendMsgFlag2：订单状态变更通知
// sendMsgFlag3：取餐提醒
const sendMsgFlag1 = val['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU']?1:0
const sendMsgFlag2 = val['Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM']?1:0
const sendMsgFlag3 = val['Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74']?1:0
let res = await Utils.AssemblyOrder(this.shopData, this.totalPrice, this.totalNum, this.buyType, list);
if (res) {
const {amount,...resule} = res
const sendData = {
...resule,
amount:this.amountOld,
paidAmount:amount,
lat,
lng,
sendMsgFlag1,
sendMsgFlag2,
sendMsgFlag3
}
if(JSON.stringify(this.selectCoupon)!="{}"){
sendData.couponId = this.selectCoupon.id||'',
sendData.couponAmount = this.selectCoupon.couponAmount||0
}
let orderInfo = await Menu.saveReserve(sendData);
if (orderInfo && orderInfo.data.code == 200) {
// const {}
await Menu.requestPayment(orderInfo.data.data, res, this.buyType, this.agreeTerms);
this.cleanFlag = true
}else{
}
}
},
goCouponSelect() {
uni.navigateTo({ url: `/orderSubPackage/pages/coupon/index` })
}
}
}
onHide() {
console.log("onHide--------", this.cleanFlag, "this.cleanFlag");
if (this.cleanFlag) {
this.goods = {};
}
},
onShow() {
const allow = uni.getStorageSync("allow");
console.log("onshow-----------", allow, "allow");
if (allow) {
if (JSON.stringify(this.goods) != "{}") {
Order.getWaitTine({
shopId: uni.getStorageSync("shopData").id,
goods: this.goods,
}).then(({ data }) => {
this.duration = data.data;
});
} else {
uni.switchTab({ url: "/pages/menu/menu" });
}
}
this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight");
this.TermsStatus = uni.getStorageSync("TermsStatus") || false;
},
async onLoad(option) {
this.returnHome = false;
uni.setStorageSync("allow", true);
console.log("onload");
// 清除优惠卷信息
this.$store.commit("cleanInfo", {});
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
// 商品详情页点击立即支付进入
if (option.goodsList) {
console.log("详情进入");
// this.getMessageFlag()
const shopData = uni.getStorageSync("shopData");
this.shopData = shopData;
this.buyType = 3;
console.log(uni.getStorageSync("goodsList"));
this.goods = uni.getStorageSync("goodsList") || [];
this.payType = "2";
this.saveGetTicket();
return;
}
// 微信扫码进入
this.option = JSON.stringify(option);
const { q } = option;
// console.log(q);
if (q) {
console.log("扫码进入", q);
uni.setStorageSync("selectFlag", false);
// this.getMessageFlag()
this.saveGetTicket();
User.getLocation((state, params) => {
uni.removeStorageSync("shopCarInfo");
$EventBus.$emit("updateCar");
// let id = decodeURIComponent(q).split('?')[1].split('=')[1];
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q));
console.log(optionDecode, "optionDecode");
this.optionDecode = optionDecode;
const loginInfo = uni.getStorageSync("loginInfo");
const { id, recognizePerson } = optionDecode;
const openid = loginInfo ? JSON.parse(loginInfo).openid : "";
const sendData = {};
this.returnHome = true;
if (recognizePerson) {
(sendData.faceInfoId = recognizePerson), (sendData.openid = openid);
}
Menu.getScreenShopCar(id, params, sendData).then((res) => {
const data = JSON.parse(res.data.data);
console.log(data);
this.shopData = data.shop;
this.buyType = data.screenNo;
this.goods = data.goods.map((item) => {
const data = { ...item, skuId: item.sku.skuId, flag: true };
Utils.getallNum(data, true); // 不校验数量
return data;
});
});
});
return;
}
// 购物车点击进入
if (uni.getStorageSync("shopCarInfo").length != 0) {
console.log("购物车进入");
// this.getMessageFlag()
console.log(uni.getStorageSync("shopCarInfo"));
const shopData = uni.getStorageSync("shopData");
this.shopData = shopData;
this.buyType = 3;
const shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
this.goods = shopCarInfo.filter((item) => item.flag);
this.saveGetTicket();
return;
}
},
data() {
return {
cleanFlag: false,
returnHome: false,
messageList: [
{
tmp: "1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU",
title: "下单成功通知",
status: true,
},
{
tmp: "Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM",
title: "订单状态变更通知",
status: true,
},
{
tmp: "Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74",
title: "取餐提醒",
status: true,
},
],
saveFlag: false,
messagePopup: false,
goods: [],
buyType: "",
shopData: {},
option: "",
payType: "1",
duration: "",
loginInfo: "",
BottomSafeHeight: 0,
Utils,
agreeTerms: true,
TermsStatus: true,
ticketNum: 0,
msgInfo: {},
sendMsgData: {
sendMsgFlag1: false,
sendMsgFlag2: false,
sendMsgFlag3: false,
},
optionDecode: {},
};
},
computed: {
systemBarHeight() {
return this.$store.state.user.systemBarHeight;
},
selectCoupon() {
const data = this.$store.state.order.selectTicket;
return data;
},
userms() {
return this.$store.getters.Authorization;
},
totalNum() {
if (JSON.stringify(this.goods) == "{}") return 0;
let totalNum = 0;
this.goods.map((item) => {
item.flag ? (totalNum += item.num) : (totalNum += 0);
});
return totalNum;
},
reduction() {
if (JSON.stringify(this.goods) == "{}") return 0;
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 {
discountNum += 0;
price += 0;
}
});
return (price - discountNum).toFixed(2);
},
amountOld() {
if (JSON.stringify(this.goods) == "{}") return 0;
let totalPrice = 0;
this.goods.forEach((item) => {
const sku = item.sku;
item.flag ? (totalPrice += item.num * sku.discount) : (totalPrice += 0);
});
return totalPrice.toFixed(2);
},
totalPrice() {
if (JSON.stringify(this.goods) == "{}") return 0;
let totalPrice = 0;
this.goods.forEach((item) => {
const sku = item.sku;
item.flag ? (totalPrice += item.num * sku.discount) : (totalPrice += 0);
});
totalPrice -= this.selectCoupon.couponAmount || 0;
return totalPrice.toFixed(2);
},
},
methods: {
goHome() {
uni.switchTab({ url: "/pages/menu/menu" });
},
getPx(rpx) {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
// console.log(wx.getSystemInfoSync().windowWidth);
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
async getMessageFlag() {
const { data } = await User.getUserMsgInfo();
console.log(data);
const { data: newdata } = data;
const {
flagExpireDate,
sendMsgFlag1 = "",
sendMsgFlag2 = "",
sendMsgFlag3 = "",
} = newdata;
this.sendMsgData.sendMsgFlag1 = sendMsgFlag1;
this.sendMsgData.sendMsgFlag2 = sendMsgFlag2;
this.sendMsgData.sendMsgFlag3 = sendMsgFlag3;
this.sendMsgData.flagExpireData = flagExpireDate
? Date.parse(flagExpireDate.substring(0, 10))
: "";
},
cancleMessage() {
this.messagePopup = false;
this.sendMsgData = {
sendMsgFlag1: false,
sendMsgFlag2: false,
sendMsgFlag3: false,
};
this.saveReserve();
},
// 保存用户通知授权信息
async submitMessage() {
this.messageList.forEach((item, index) => {
this.sendMsgData[`sendMsgFlag${index + 1}`] = item.status;
});
let { data } = await User.setAllow({
...this.sendMsgData,
rememberFlag: this.saveFlag,
});
this.messagePopup = false;
if (data.code === 200) {
this.saveReserve();
}
},
changeContentFlag(index) {
this.messageList[index].status = !this.messageList[index].status;
},
changeSaveFlage() {
console.log(this.saveFlag);
this.saveFlag = !this.saveFlag;
},
closeT() {
this.messagePopup = false;
},
// 勾选隐私协议
clickAgreeTerms() {
this.agreeTerms = !this.agreeTerms;
},
// 跳转隐私协议页面
goTerms(type) {
uni.navigateTo({
url: "/orderSubPackage/pages/terms/index?type=" + type,
});
},
itemReduction(discount, price, num) {
return ((price - discount) * num).toFixed(2);
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
const { recognizePerson } = this.optionDecode;
if (recognizePerson) {
e.faceInfoId = recognizePerson;
}
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
messageAndSave() {
if (!this.TermsStatus && !this.agreeTerms) {
this.showToast({ title: "请勾选下方协议条款" });
return;
} else {
// if(this.agreeTerms)uni.setStorageSync('TermsStatus',true)
}
const tmpid = [
"1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU",
"Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM",
"Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74",
];
const val = {};
wx.requestSubscribeMessage({
tmplIds: tmpid,
success: (res) => {
const finalValue = Object.values(res).indexOf("reject");
tmpid.forEach((item) => {
val[item] = res[item] === "accept" ? true : false;
});
if (finalValue === -1) {
uni.setStorageSync("isMessage", "true");
// User.setAllow(1)
this.saveReserve(val);
} else {
// User.setAllow(2)
this.saveReserve(val);
}
},
fail: (err) => {
tmpid.forEach((item) => {
val[item] = false;
});
console.log(err);
// User.setAllow(2)
this.saveReserve(val);
},
});
},
// 组装数据
AssemblyOrder() {
let list = [];
if (this.payType == "1") {
list = uni.getStorageSync("shopCarInfo").filter((v) => v.flag == true);
} else {
list = uni.getStorageSync("goodsList").filter((v) => v.flag == true);
}
return Utils.AssemblyOrder(
this.shopData,
this.totalPrice,
this.totalNum,
this.buyType,
list
);
},
// 结算组装数据获取优惠卷列表
async saveGetTicket() {
// 组装购物车数据或者立即支付数据
const res = this.AssemblyOrder();
if (res) {
const { data: list } = await Menu.requestTicketList(res);
const { data: num } = await Menu.requestTicketNum(res);
if (list.code == 200) {
const { data } = list;
this.ticketList = data;
this.$store.commit("setTickerList", this.ticketList);
}
if (num.code == 200) {
const { data } = num;
this.ticketNum = data;
}
}
},
//结算组装数据发起订单
async saveReserve(val = {}) {
uni.setStorageSync("allow", false);
// 组装购物车数据或者立即支付数据
let list = [];
if (this.payType == "1") {
list = uni.getStorageSync("shopCarInfo").filter((v) => v.flag == true);
} else {
list = uni.getStorageSync("goodsList").filter((v) => v.flag == true);
}
const location = uni.getStorageSync("location");
const { lat, lng } = location;
// sendMsgFlag1：下单成功通知
// sendMsgFlag2：订单状态变更通知
// sendMsgFlag3：取餐提醒
const sendMsgFlag1 = val["1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU"]
? 1
: 0;
const sendMsgFlag2 = val["Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM"]
? 1
: 0;
const sendMsgFlag3 = val["Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74"]
? 1
: 0;
let res = await Utils.AssemblyOrder(
this.shopData,
this.totalPrice,
this.totalNum,
this.buyType,
list
);
if (res) {
const { amount, ...resule } = res;
const sendData = {
...resule,
amount: this.amountOld,
paidAmount: amount,
lat,
lng,
sendMsgFlag1,
sendMsgFlag2,
sendMsgFlag3,
};
if (JSON.stringify(this.selectCoupon) != "{}") {
(sendData.couponId = this.selectCoupon.id || ""),
(sendData.couponAmount = this.selectCoupon.couponAmount || 0);
}
let orderInfo = await Menu.saveReserve(sendData);
if (orderInfo && orderInfo.data.code == 200) {
// const {}
await Menu.requestPayment(
orderInfo.data.data,
res,
this.buyType,
this.agreeTerms
);
this.cleanFlag = true;
} else {
}
}
},
goCouponSelect() {
uni.navigateTo({ url: `/orderSubPackage/pages/coupon/index` });
},
},
};
</script>
<style lang="scss" scoped>
.pages {
padding-top: 1rpx;
.topBar{
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333
}
}
padding-top: 1rpx;
.topBar {
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 79%;
color: #333333;
}
}
}
.messageBox {
padding: 58rpx 32rpx 60rpx 32rpx;
.title {
display: flex;
justify-content: flex-start;
align-items: center;
.image {
width: 40rpx;
height: 40rpx;
}
.text {
margin-left: 8rpx;
font-size: 24prx;
font-family: ArialMT;
color: #DDDDDD;
}
}
.desc {
padding-top: 36rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #DDDDDD;
}
.content {
margin-top: 35rpx;
.contentItem{
padding: 26rpx 0rpx;
border-bottom: 1rpx solid #303030;
display: flex;
align-items: center;
.checked{
background: url('../../../static/imgs/messageXuanzhong.png') center center no-repeat;
background-size:100% 100%;
border-radius: 50%;
}
.nochecked{
background: url('../../../static/imgs/messageWeixuanzhong.png') center center no-repeat;
background-size:100% 100%;
border-radius: 50%;
}
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #DDDDDD;
margin-left: 28rpx;
}
}
}
.btns {
margin-top: 69.26rpx;
display: flex;
justify-content: center;
.btn {
width: 198rpx;
height: 66rpx;
text-align: center;
line-height: 60rpx;
border-radius: 8rpx;
}
.cancle {
color: #DDDDDD;
background: #3D3D3D;
margin-right: 14rpx;
}
.submit {
margin-left: 14rpx;
color: #DDDDDD;
background: #58BE6C;
}
}
.save {
margin-top:39.82rpx;
display: flex;
justify-content: center;
align-items: center;
.checked{
background: url('../../../static/imgs/messageXuanzhong.png') center center no-repeat;
background-size:100% 100%;
border-radius: 50%;
}
.nochecked{
background: url('../../../static/imgs/messageWeixuanzhong.png') center center no-repeat;
background-size:100% 100%;
border-radius: 50%;
}
.text {
font-size: 23rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #DDDDDD;
margin-left: 10rpx;
}
}
padding: 58rpx 32rpx 60rpx 32rpx;
.title {
display: flex;
justify-content: flex-start;
align-items: center;
.image {
width: 40rpx;
height: 40rpx;
}
.text {
margin-left: 8rpx;
font-size: 24prx;
font-family: ArialMT;
color: #dddddd;
}
}
.desc {
padding-top: 36rpx;
font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #dddddd;
}
.content {
margin-top: 35rpx;
.contentItem {
padding: 26rpx 0rpx;
border-bottom: 1rpx solid #303030;
display: flex;
align-items: center;
.checked {
background: url("../../../static/imgs/messageXuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
border-radius: 50%;
}
.nochecked {
background: url("../../../static/imgs/messageWeixuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
border-radius: 50%;
}
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #dddddd;
margin-left: 28rpx;
}
}
}
.btns {
margin-top: 69.26rpx;
display: flex;
justify-content: center;
.btn {
width: 198rpx;
height: 66rpx;
text-align: center;
line-height: 60rpx;
border-radius: 8rpx;
}
.cancle {
color: #dddddd;
background: #3d3d3d;
margin-right: 14rpx;
}
.submit {
margin-left: 14rpx;
color: #dddddd;
background: #58be6c;
}
}
.save {
margin-top: 39.82rpx;
display: flex;
justify-content: center;
align-items: center;
.checked {
background: url("../../../static/imgs/messageXuanzhong.png") center center
no-repeat;
background-size: 100% 100%;
border-radius: 50%;
}
.nochecked {
background: url("../../../static/imgs/messageWeixuanzhong.png") center
center no-repeat;
background-size: 100% 100%;
border-radius: 50%;
}
.text {
font-size: 23rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #dddddd;
margin-left: 10rpx;
}
}
}
.shop_info {
width: 686rpx;
background: #FFFFFF;
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: 500;
font-weight: 500;
color: #333333;
}
.address {
margin-top: 17.81rpx;
border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 25.02rpx;
margin-bottom: 23.83rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.address_2 {
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.time {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.min {
color: #0050F6;
font-size: 32rpx;
font-family: Futura-Medium, Futura;
font-weight: normal;
margin: 0 8rpx;
display: inline-block;
}
}
width: 686rpx;
background: #ffffff;
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: 500;
font-weight: 500;
color: #333333;
}
.address {
margin-top: 17.81rpx;
border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 25.02rpx;
margin-bottom: 23.83rpx;
.address_1 {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.address_2 {
margin-top: 18rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.time {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
.min {
color: #0050f6;
font-size: 32rpx;
font-family: Futura-Medium, Futura;
font-weight: normal;
margin: 0 8rpx;
display: inline-block;
}
}
}
.goods_info {
width: 686rpx;
background: #FFFFFF;
margin: 0 auto;
margin-top: 32rpx;
padding: 26rpx 30rpx 24rpx 30rpx;
box-sizing: border-box;
.goodInfoTitle {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.goods {
margin-top: 24rpx;
border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 32rpx;
.goods_item {
display: flex;
align-items: center;
}
.goods_img {
height: 112rpx;
width: 112rpx;
background-color: #eee;
margin-right: 32rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
}
.psce_name {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.size {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
.goods_psce {
margin-top: 18.65rpx;
}
}
}
.discount {
margin-top: 25rpx;
.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;
}
}
}
.coupon {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 24.38rpx;
margin-bottom: 23.57rpx;
.title {
font-size: 28rpx;
font-family: ArialMT;
color: #333333;
height: 40rpx;
line-height: 40rpx;
}
.num {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #999999;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 20.68rpx;
margin-left: 8rpx;
}
}
.num-action {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #FF63BA;
height: 40rpx;
line-height: 40rpx;
.price{
font-family: Futura-Medium, Futura;
}
.arrow-right-select{
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
padding-top: 24.16rpx;
border-top: 0.1px solid #F4F4F4;
.size {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.the_sum{
display: flex;
align-items: flex-end;
.paid_in {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.money {
font-weight: 500;
font-size: 36rpx;
width: 686rpx;
background: #ffffff;
margin: 0 auto;
margin-top: 32rpx;
padding: 26rpx 30rpx 24rpx 30rpx;
box-sizing: border-box;
.goodInfoTitle {
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.goods {
margin-top: 24rpx;
border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 32rpx;
.goods_item {
display: flex;
align-items: center;
}
.goods_img {
height: 112rpx;
width: 112rpx;
background-color: #eee;
margin-right: 32rpx;
}
.goods_text {
flex: 1;
.goods_psce,
.goods_name {
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.price {
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
}
.psce_name {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.size {
font-size: 24rpx;
font-family: ArialMT;
color: #666666;
}
}
.goods_psce {
margin-top: 18.65rpx;
}
}
}
.discount {
margin-top: 25rpx;
.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;
}
}
}
.coupon {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
margin-top: 24.38rpx;
margin-bottom: 23.57rpx;
.title {
font-size: 28rpx;
font-family: ArialMT;
color: #333333;
height: 40rpx;
line-height: 40rpx;
}
.num {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #999999;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
color: #333333;
// vertical-align: middle;
}
.arrow-right-select {
width: 15.27rpx;
height: 20.68rpx;
margin-left: 8rpx;
}
}
.num-action {
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
display: flex;
align-items: center;
color: #ff63ba;
height: 40rpx;
line-height: 40rpx;
.price {
font-family: Futura-Medium, Futura;
}
.arrow-right-select {
width: 15.27rpx;
height: 19.68rpx;
margin-left: 8rpx;
}
}
}
.total {
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
padding-top: 24.16rpx;
border-top: 0.1px solid #f4f4f4;
.size {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
.the_sum {
display: flex;
align-items: flex-end;
.paid_in {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.money {
font-weight: 500;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
color: #333333;
// vertical-align: middle;
line-height: 40rpx;
}
}
}
.priceBox{
display: flex;
align-items: center;
.paid_in {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.money {
font-weight: 500;
font-size: 36rpx;
.priceBox {
display: flex;
align-items: center;
.paid_in {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.money {
font-weight: 500;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
color: #333333;
// vertical-align: middle;
color: #333333;
// vertical-align: middle;
line-height: 40rpx;
}
}
}
}
}
}
}
.Payment_method {
width: 686rpx;
margin: 32rpx auto 0;
padding: 26rpx 30rpx;
background: #FFFFFF;
font-size: 28rpx;
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-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-size: 24rpx;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
}
width: 686rpx;
margin: 32rpx auto 0;
padding: 26rpx 30rpx;
background: #ffffff;
font-size: 28rpx;
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-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-size: 24rpx;
.icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
}
}
.TermsOfAgreement {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 31rpx;
margin-left: 32rpx;
.content {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
span {
color: #0050F6;
}
}
.checked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/duigouxuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 8rpx;
}
.nochecked {
width: 24rpx;
height: 24rpx;
background: url('../../../static/imgs/weixuanzhong.png') center center no-repeat;
background-size:100% 100%;
margin-right: 8rpx;
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 31rpx;
margin-left: 32rpx;
.content {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 34rpx;
span {
color: #0050f6;
}
}
.checked {
width: 24rpx;
height: 24rpx;
background: url("../../../static/imgs/duigouxuanzhong.png") center center
no-repeat;
background-size: 100% 100%;
margin-right: 8rpx;
}
.nochecked {
width: 24rpx;
height: 24rpx;
background: url("../../../static/imgs/weixuanzhong.png") center center
no-repeat;
background-size: 100% 100%;
margin-right: 8rpx;
}
}
.footer {
height: 100rpx;
background: #fff;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
.total {
flex: 1;
padding-left: 30rpx;
.the_sum {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.price {
margin-left: 13.36rpx;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
}
.sun {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF0E00;
margin-top: 10rpx;
}
}
.payment {
width: 200rpx;
height: 100%;
background: #0050F6;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 100rpx;
text-align: center;
}
height: 100rpx;
background: #fff;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
.total {
flex: 1;
padding-left: 30rpx;
.the_sum {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.price {
margin-left: 13.36rpx;
font-size: 36rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
}
.sun {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff0e00;
margin-top: 10rpx;
}
}
.payment {
width: 200rpx;
height: 100%;
background: #0050f6;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 100rpx;
text-align: center;
}
}
</style>
\ No newline at end of file
</style>
pages/menu/menu.vue
<template>
<view class="menu-box">
<view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}">
<!-- <image :src="img"/> -->
<ImageLoader :defaultSrc="'../../static/imgs/shouyezhanweitu.png'" :realSrc="img" width="100%" height="400rpx"/>
<!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> -->
<!-- <HomeBanner /> -->
<view class="shop-info" :style="'top:100rpx'">
<view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" />
</view>
<view v-if="shopInfo.distance && shopInfo.distance!=-1" class="distance">距您{{ shopInfo.distance }}</view>
</view>
<view class="login-area">
<view class="avatar">
<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/touxiang.png'"></image>
</view>
<view class="user-info" @click="goToMyPage(userms)">
<view class="user-infocontent">
<view class="user-name" v-if="userms">Hi！{{ userInfo.customerName || '我是谁' }}</view>
<view class="user-name" v-else>未登录</view>
<view class="dialog">
<view class="content" v-if="userms">{{dayTitle}}</view>
<view class="content" v-if="!userms">请您尽快登录～</view>
</view>
</view>
<view>
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立即登录
</button>
</view>
</view>
</view>
</view>
<view class="order-banner" v-if="buied" @click="openQrcode">
<view class="info">
<view class="first">取单码：<text class="first-code">{{ orderInfo.orderNum }}</text></view>
<view class="second1" v-if="orderInfo.state =='4'">订单已制作完成，请尽快取餐~</view>
<view class="second" v-else>请您耐心等候，剩余等候时间<text class="time">{{ orderInfo.waitTime }}</text>分钟</view>
</view>
<view class="line"></view>
<view class="barCode-box">
<view class="barCode">
<image :src="'/static/imgs/icon-barcode.png'"></image>
</view>
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
<MenuAssembly ref="MenuAssembly" @getallNum="getallNum" :buied="buied" :shopState="shopState" :isInRange="isInRange"/>
<!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
<view class="menu-box">
<view class="menu-banner" :style="{ height: buied ? '360rpx' : '450rpx' }">
<!-- <image :src="img"/> -->
<ImageLoader
:defaultSrc="'../../static/imgs/shouyezhanweitu.png'"
:realSrc="img"
width="100%"
height="400rpx"
/>
<!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> -->
<!-- <HomeBanner /> -->
<view class="shop-info" :style="'top:100rpx'">
<view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
<image
class="arrow-right-select"
:src="'../../static/imgs/jiantoubai.png'"
/>
</view>
<view
v-if="shopInfo.distance && shopInfo.distance != -1"
class="distance"
>距您{{ shopInfo.distance }}</view
>
</view>
<view class="login-area">
<view class="avatar">
<image
:src="
userInfo.avatarUrl
? userInfo.avatarUrl
: '../../static/touxiang.png'
"
></image>
</view>
<view class="user-info" @click="goToMyPage(userms)">
<view class="user-infocontent">
<view class="user-name" v-if="userms"
>Hi！{{ userInfo.customerName || "我是谁" }}</view
>
<view class="user-name" v-else>未登录</view>
<view class="dialog">
<view class="content" v-if="userms">{{ dayTitle }}</view>
<view class="content" v-if="!userms">请您尽快登录～</view>
</view>
</view>
<view>
<image
class="arrow-right-select"
v-if="userms"
:src="'../../static/imgs/jiantouhei.png'"
/>
<button
class="login-btn"
v-if="!userms"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
立即登录
</button>
</view>
</view>
</view>
</view>
<view class="order-banner" v-if="buied" @click="openQrcode">
<view class="info">
<view class="first"
>取单码：<text class="first-code">{{
orderInfo.orderNum
}}</text></view
>
<view class="second1" v-if="orderInfo.state == '4'"
>订单已制作完成，请尽快取餐~</view
>
<view class="second" v-else
>请您耐心等候，剩余等候时间<text class="time">{{
orderInfo.waitTime
}}</text
>分钟</view
>
</view>
<view class="line"></view>
<view class="barCode-box">
<view class="barCode">
<image :src="'/static/imgs/icon-barcode.png'"></image>
</view>
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
<MenuAssembly
ref="MenuAssembly"
@getallNum="getallNum"
:buied="buied"
:shopState="shopState"
:isInRange="isInRange"
/>
<!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
@confirm="confirm" keyName="name" @change="changeHandler"></u-picker> -->
<AreaPicker ref="AreaPicker" />
<OrderQrCode ref="OrderQrCode" />
<canvas class="canvas-code" canvas-id="myQrcode2"
style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" />
<show-toast ref="toast"/>
<taBar select="0"></taBar>
<ShopCar ref="shopbar" :shopState="shopState" :isInRange="isInRange"/>
</view>
<AreaPicker ref="AreaPicker" />
<OrderQrCode ref="OrderQrCode" />
<canvas
class="canvas-code"
canvas-id="myQrcode2"
style="
background: #fff;
width: 200px;
height: 200px;
display: block;
left: -800rpx;
position: absolute;
"
/>
<show-toast ref="toast" />
<taBar select="0"></taBar>
<ShopCar ref="shopbar" :shopState="shopState" :isInRange="isInRange" />
</view>
</template>
<script>
import MenuAssembly from '@/components/menuAssembly'
import ImageLoader from '@/components/ImageLoader/index.vue'
import AreaPicker from '@/components/AreaPicker/index.vue'
import HomeBanner from '@/components/canvas/HomeBanner.vue'
import User from '@/request/user'
import ShopCar from '../../components/shopCar/shopCar.vue'
import Utils from '@/utils/utils'
import Menu from '@/request/menu'
import { $EventBus } from '@/utils/EventBus';
import Store from '@/store';
import Order from '@/request/order'
import MenuAssembly from "@/components/menuAssembly";
import ImageLoader from "@/components/ImageLoader/index.vue";
import AreaPicker from "@/components/AreaPicker/index.vue";
import HomeBanner from "@/components/canvas/HomeBanner.vue";
import User from "@/request/user";
import ShopCar from "../../components/shopCar/shopCar.vue";
import Utils from "@/utils/utils";
import Menu from "@/request/menu";
import { $EventBus } from "@/utils/EventBus";
import Store from "@/store";
import Order from "@/request/order";
import OrderQrCode from '@/components/OrderQrCode'
import QRCode from '@/utils/qrCode'
import OrderQrCode from "@/components/OrderQrCode";
import QRCode from "@/utils/qrCode";
export default {
components: { ShopCar, MenuAssembly, OrderQrCode, AreaPicker, ImageLoader, HomeBanner },
data() {
return {
shopInfo: { name: '请选择' },// 店铺信息
buied: false,//控制首页取单码区域显隐
orderInfo: {},//即将取餐的订单信息
classifyData: [],
customerName: '',
loginInfo:"",
img:'',
isInRange:true,
dayTitle:''
};
},
computed: {
shopState() {
console.log(this.shopInfo)
const { shopInfo } = this
const {startTime,endTime,state} = shopInfo
if(!startTime||!endTime||!state) return true
function getNowFormatDate() {
let date = new Date(),
seperator1 = '/', //格式分隔符
year = date.getFullYear(), //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate() // 获取当前日(1-31)
if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
components: {
ShopCar,
MenuAssembly,
OrderQrCode,
AreaPicker,
ImageLoader,
HomeBanner,
},
data() {
return {
shopInfo: { name: "请选择" }, // 店铺信息
buied: false, //控制首页取单码区域显隐
orderInfo: {}, //即将取餐的订单信息
classifyData: [],
customerName: "",
loginInfo: "",
img: "",
isInRange: true,
dayTitle: "",
};
},
computed: {
shopState() {
console.log(this.shopInfo);
const { shopInfo } = this;
const { startTime, endTime, state } = shopInfo;
if (!startTime || !endTime || !state) return true;
function getNowFormatDate() {
let date = new Date(),
seperator1 = "/", //格式分隔符
year = date.getFullYear(), //获取完整的年份(4位)
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
strDate = date.getDate(); // 获取当前日(1-31)
if (month >= 1 && month <= 9) month = "0" + month; // 如果月份是个位数，在前面补0
if (strDate >= 0 && strDate <= 9) strDate = "0" + strDate; // 如果日是个位数，在前面补0
let currentdate = year + seperator1 + month + seperator1 + strDate
return currentdate
}
const startTimeNew = Date.parse(getNowFormatDate()+ ' ' +startTime+':00')
const endTimeNew = Date.parse(getNowFormatDate()+ ' ' +endTime+':00')
if(startTimeNew<new Date().valueOf()&&new Date().valueOf()<endTimeNew&&state===1) {
uni.setStorageSync("shopState",true)
return true
}else{
uni.setStorageSync("shopState",false)
return false
}
},
userms() {
return this.$store.getters.Authorization;
},
userInfo() {
return this.$store.state.user.userInfo;
},
},
created() {
let platform = uni.getSystemInfoSync().platform;
uni.downloadFile({
url: 'https://hooloo-dev-api.gdatac.com/resources/menu.mp4', //仅为示例，并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
console.log(res);
this.img = res.tempFilePath
}
}
});
// if(platform == 'android'){
// this.img = '../../static/imgs/shouyezhanweitu.png'
// }else{
// this.img = 'https://s3.bmp.ovh/imgs/2022/07/02/2cfab823b35322e3.gif'
// }
},
onLoad: async function (option) {
// 通过扫码进入
const{q} = option
if(q){
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q))
console.log(Utils.getUrlParams2(decodeURIComponent(q)),this.userInfo)
const {num,serial_no,source} = optionDecode
if(source&&this.userms) {
const sendData = {
phone:this.userInfo.phoneNumber,
user_id:this.userInfo.id,
source:source,
param:JSON.stringify({
serial_no,
num
})
}
Menu.sendUserCoupon(sendData)
}else{
Store.commit('setMenuOption', optionDecode);
}
}
uni.getSetting({
success: (res) => {
// 已经授权位置不获取默认店铺
if(res.authSetting['scope.userLocation']){
User.getLocation((state, params) => {
if(state != 1) {
return;
}
this.getShopMenus(params);
});
} else {
// this.getShopMenus();
this.authLocation();
}
}
})
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
},
onHide() {
this.$refs.shopbar.showShopCar = false;
},
// 微信小程序右上角分享
onShareAppMessage() {
return this.getShareData();
},
async onShow() {
const dayTitleList = [
'呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~',
'随手一杯好咖啡，希望你今天，明天，天天都开心~',
'咖啡哪有打工苦，喝完这杯再上班~',
'今天不听大道理，只喝专业好咖啡~',
'来杯美式，少点破事~',
'用咖啡拯救疲惫的灵魂~',
'呼噜咖啡由37%的咖啡加63%的生活构成~'
]
this.dayTitle = dayTitleList[new Date().getDay()]
uni.setStorageSync("selectFlag",false)
const updataLoactionFlag = uni.getStorageSync("updataLoadtion")
if(updataLoactionFlag) {
this.authLocation();
uni.setStorageSync("updataLoadtion",false)
}
this.getHomeOrder()
},
methods: {
getShareData(type) {
let title = "随手一杯好咖啡";
let path = `/pages/menu/menu`;
let imageUrl = "../../static/imgs/shareImg.png";
return {
title,
imageUrl,
path,
}
},
getShopMenus(params) {
$EventBus.$off('getMenuList');
$EventBus.$on('getMenuList', (data) => {
if(this.shopInfo && this.shopInfo.id != data.id) {
// 切换店铺清空购物车
if(this.shopInfo.id){
uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar');
}
}
this.shopInfo = data;
uni.setStorageSync("shopInfo",JSON.stringify(this.shopInfo))
this.getMenuList(data.id);
this.getHomeOrder(data.id)
// 判断店铺是否在范围内
const shopInfo = uni.getStorageSync("shopInfo")
const {distanceLimit,realDistance} = JSON.parse(shopInfo)
const distance = realDistance/1000
if(!distanceLimit){
this.isInRange = true
}else{
console.log(parseInt(distance),parseInt(distanceLimit),JSON.parse(shopInfo))
this.isInRange = parseInt(distance)<parseInt(distanceLimit)
}
uni.setStorageSync("isInRange",this.isInRange)
});
User.getShopInfo(params);
},
async getHomeOrder(id = this.shopInfo.id){
if (!this.userms) return;
const res = await Order.getHomeOrder({shopId:id})
const data = res?.data
if (data?.data) {
// this.$set(data.data, 'state', '2');
// console.log("getHomeOrder:"+JSON.stringify(data.data));
this.buied = true;
this.orderInfo = data.data
} else {
this.buied = false
}
},
openQrcode() {
// 不生成二维码
// if(['2', '3'].indexOf(this.orderInfo.state) != -1){
// this.$refs.OrderQrCode.open(this.orderInfo, "");
// return;
// } else {
this.$refs.OrderQrCode.open(this.orderInfo, this.orderInfo.pickCode)
// }
let currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
const startTimeNew = Date.parse(
getNowFormatDate() + " " + startTime + ":00"
);
const endTimeNew = Date.parse(getNowFormatDate() + " " + endTime + ":00");
if (
startTimeNew < new Date().valueOf() &&
new Date().valueOf() < endTimeNew &&
state === 1
) {
uni.setStorageSync("shopState", true);
return true;
} else {
uni.setStorageSync("shopState", false);
return false;
}
},
userms() {
return this.$store.getters.Authorization;
},
userInfo() {
return this.$store.state.user.userInfo;
},
},
created() {
let platform = uni.getSystemInfoSync().platform;
uni.downloadFile({
url: "https://hooloo-dev-api.gdatac.com/resources/menu.mp4", //仅为示例，并非真实的资源
success: (res) => {
if (res.statusCode === 200) {
console.log(res);
this.img = res.tempFilePath;
}
},
});
// if(platform == 'android'){
// this.img = '../../static/imgs/shouyezhanweitu.png'
// }else{
// this.img = 'https://s3.bmp.ovh/imgs/2022/07/02/2cfab823b35322e3.gif'
// }
},
onLoad: async function (option) {
// 通过扫码进入
const { q } = option;
if (q) {
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q));
console.log(Utils.getUrlParams2(decodeURIComponent(q)), this.userInfo);
const { num, serial_no, source } = optionDecode;
if (source && this.userms) {
const sendData = {
phone: this.userInfo.phoneNumber,
user_id: this.userInfo.id,
source: source,
param: JSON.stringify({
serial_no,
num,
}),
};
Menu.sendUserCoupon(sendData);
} else {
Store.commit("setMenuOption", optionDecode);
}
}
uni.getSetting({
success: (res) => {
// 已经授权位置不获取默认店铺
if (res.authSetting["scope.userLocation"]) {
User.getLocation((state, params) => {
if (state != 1) {
return;
}
this.getShopMenus(params);
});
} else {
// this.getShopMenus();
this.authLocation();
}
},
});
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
},
onHide() {
this.$refs.shopbar.showShopCar = false;
},
// 微信小程序右上角分享
onShareAppMessage() {
return this.getShareData();
},
async onShow() {
const dayTitleList = [
"呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~",
"随手一杯好咖啡，希望你今天，明天，天天都开心~",
"咖啡哪有打工苦，喝完这杯再上班~",
"今天不听大道理，只喝专业好咖啡~",
"来杯美式，少点破事~",
"用咖啡拯救疲惫的灵魂~",
"呼噜咖啡由37%的咖啡加63%的生活构成~",
];
this.dayTitle = dayTitleList[new Date().getDay()];
uni.setStorageSync("selectFlag", false);
const updataLoactionFlag = uni.getStorageSync("updataLoadtion");
if (updataLoactionFlag) {
this.authLocation();
uni.setStorageSync("updataLoadtion", false);
}
this.getHomeOrder();
},
methods: {
getShareData(type) {
let title = "随手一杯好咖啡";
let path = `/pages/menu/menu`;
let imageUrl = "../../static/imgs/shareImg.png";
return {
title,
imageUrl,
path,
};
},
getShopMenus(params) {
$EventBus.$off("getMenuList");
$EventBus.$on("getMenuList", (data) => {
if (this.shopInfo && this.shopInfo.id != data.id) {
// 切换店铺清空购物车
if (this.shopInfo.id) {
uni.removeStorageSync("shopCarInfo");
$EventBus.$emit("updateCar");
}
}
this.shopInfo = data;
uni.setStorageSync("shopInfo", JSON.stringify(this.shopInfo));
this.getMenuList(data.id);
this.getHomeOrder(data.id);
// 判断店铺是否在范围内
const shopInfo = uni.getStorageSync("shopInfo");
const { distanceLimit, realDistance } = JSON.parse(shopInfo);
const distance = realDistance / 1000;
if (!distanceLimit) {
this.isInRange = true;
} else {
console.log(
parseInt(distance),
parseInt(distanceLimit),
JSON.parse(shopInfo)
);
this.isInRange = parseInt(distance) < parseInt(distanceLimit);
}
uni.setStorageSync("isInRange", this.isInRange);
});
User.getShopInfo(params);
},
async getHomeOrder(id = this.shopInfo.id) {
if (!this.userms) return;
const res = await Order.getHomeOrder({ shopId: id });
const data = res?.data;
if (data?.data) {
// this.$set(data.data, 'state', '2');
// console.log("getHomeOrder:"+JSON.stringify(data.data));
this.buied = true;
this.orderInfo = data.data;
} else {
this.buied = false;
}
},
openQrcode() {
// 不生成二维码
// if(['2', '3'].indexOf(this.orderInfo.state) != -1){
// this.$refs.OrderQrCode.open(this.orderInfo, "");
// return;
// } else {
this.$refs.OrderQrCode.open(this.orderInfo, this.orderInfo.pickCode);
// }
// new QRCode('myQrcode2', {
// text: this.orderInfo.pickCode,
// width: 141, //canvas 画布的宽
// height: 141, //canvas 画布的高
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
// callback: (res) => {
// this.$refs.OrderQrCode.open(this.orderInfo, res.path)
// }
// })
},
showArea() {
console.log(this.$refs)
this.$refs.AreaPicker.showArea()
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
User.getPhoneNumber(e,this.getHomeOrder);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
// 获取定位授权
authLocation(callback) {
uni.getSetting({
success: (res) => {
uni.authorize({
scope: 'scope.userLocation',
success: () => { //1.1 允许授权
// console.log("允许授权位置");
User.getLocation((state, params) => {
if(state != 1){
return;
}
callback ? callback(params) : this.getShopMenus(params);
});
},
fail: (err) => { //1.2 拒绝授权
this.getShopMenus();
wx.exitMiniProgram({ success: (res) => { } })
// console.log("获取位置失败")
this.showToast({ "title" : "获取位置失败,请打开位置授权", icon : 'error'})
}
})
}
})
},
async getMenuList(id) {
let { data } = await Menu.getMenuList(id);
// console.log("menus:"+JSON.stringify(data));
if (data.code == 200) {
data.data = data.data;
this.$store.commit('setMenuAllInfo', data.data);
this.$store.commit('setMenuCategorys', data.data.categorys);
uni.setStorageSync('countOfOrder', parseInt(data.data.countOfOrder));
// this.$refs.MenuAssembly.createList(data.data.categorys)
}
},
// 加入购物车数据
async getallNum(item, category) {
let itemCopy = JSON.parse(JSON.stringify(item));
const sku = itemCopy.skus.find(v => v.isDefault == 1);
const {data} = await Order.checkSku({skuId:sku.skuId})
const {state,goods} = data.data
const newsku = goods.skus.find(v => v.isDefault == 1 && v.state != 2) || goods.skus.find(v => v.isDefault == 0 && v.state != 2);
if(state == 2){
if(newsku){
if(newsku.isDefault != 1){
this.showToast({ title: '默认规格已售罄,已添加其他规格', icon: 'none' });
itemCopy.skus = [newsku];
itemCopy.sku = newsku
itemCopy.skuId = newsku?.skuId
itemCopy.num = 1;
itemCopy.flag = true;
itemCopy.categoryId = category.id;
itemCopy.goodsName = category.name;
Utils.getallNum(itemCopy);
}
}else{
this.showToast({ title: '本商品已经售罄', icon: 'none' });
return;
}
}else{
itemCopy.skus = [newsku];
itemCopy.sku = newsku
itemCopy.skuId = newsku?.skuId
itemCopy.num = 1;
itemCopy.flag = true;
itemCopy.categoryId = category.id;
itemCopy.goodsName = category.name;
Utils.getallNum(itemCopy);
}
return
},
goToMyPage(logined) {
logined && uni.switchTab({ url: '/pages/mine/mine' })
}
},
}
// new QRCode('myQrcode2', {
// text: this.orderInfo.pickCode,
// width: 141, //canvas 画布的宽
// height: 141, //canvas 画布的高
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
// callback: (res) => {
// this.$refs.OrderQrCode.open(this.orderInfo, res.path)
// }
// })
},
showArea() {
console.log(this.$refs);
this.$refs.AreaPicker.showArea();
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
User.getPhoneNumber(e, this.getHomeOrder);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
// 获取定位授权
authLocation(callback) {
uni.getSetting({
success: (res) => {
uni.authorize({
scope: "scope.userLocation",
success: () => {
//1.1 允许授权
// console.log("允许授权位置");
User.getLocation((state, params) => {
if (state != 1) {
return;
}
callback ? callback(params) : this.getShopMenus(params);
});
},
fail: (err) => {
//1.2 拒绝授权
this.getShopMenus();
wx.exitMiniProgram({ success: (res) => {} });
// console.log("获取位置失败")
this.showToast({
title: "获取位置失败，请同意授权",
icon: "error",
});
},
});
},
});
},
async getMenuList(id) {
let { data } = await Menu.getMenuList(id);
// console.log("menus:"+JSON.stringify(data));
if (data.code == 200) {
data.data = data.data;
this.$store.commit("setMenuAllInfo", data.data);
this.$store.commit("setMenuCategorys", data.data.categorys);
uni.setStorageSync("countOfOrder", parseInt(data.data.countOfOrder));
// this.$refs.MenuAssembly.createList(data.data.categorys)
}
},
// 加入购物车数据
async getallNum(item, category) {
let itemCopy = JSON.parse(JSON.stringify(item));
const sku = itemCopy.skus.find((v) => v.isDefault == 1);
const { data } = await Order.checkSku({ skuId: sku.skuId });
const { state, goods } = data.data;
const newsku =
goods.skus.find((v) => v.isDefault == 1 && v.state != 2) ||
goods.skus.find((v) => v.isDefault == 0 && v.state != 2);
if (state == 2) {
if (newsku) {
if (newsku.isDefault != 1) {
this.showToast({
title: "默认规格已售罄,已添加其他规格",
icon: "none",
});
itemCopy.skus = [newsku];
itemCopy.sku = newsku;
itemCopy.skuId = newsku?.skuId;
itemCopy.num = 1;
itemCopy.flag = true;
itemCopy.categoryId = category.id;
itemCopy.goodsName = category.name;
Utils.getallNum(itemCopy);
}
} else {
this.showToast({ title: "这款已经卖完啦", icon: "none" });
return;
}
} else {
itemCopy.skus = [newsku];
itemCopy.sku = newsku;
itemCopy.skuId = newsku?.skuId;
itemCopy.num = 1;
itemCopy.flag = true;
itemCopy.categoryId = category.id;
itemCopy.goodsName = category.name;
Utils.getallNum(itemCopy);
}
return;
},
goToMyPage(logined) {
logined && uni.switchTab({ url: "/pages/mine/mine" });
},
},
};
</script>
<style lang="scss" scoped>
.menu-box {
min-height: 100vh;
min-height: 100vh;
.shop-info {
z-index: 100;
position: absolute;
left: 32rpx;
color: #FFFFFF;
.shop-info {
z-index: 100;
position: absolute;
left: 32rpx;
color: #ffffff;
.shop-box {
font-size: 32rpx;
font-weight: 500;
color: #FFFFFF;
font-family: PingFangSC-Medium, PingFang SC;
display: flex;
align-items: center;
height: 62rpx;
line-height: 62rpx;
.shop-box {
font-size: 32rpx;
font-weight: 500;
color: #ffffff;
font-family: PingFangSC-Medium, PingFang SC;
display: flex;
align-items: center;
height: 62rpx;
line-height: 62rpx;
.shop-name {
margin-right: 12rpx;
flex: 1;
font-size: 32rpx;
}
.shop-name {
margin-right: 12rpx;
flex: 1;
font-size: 32rpx;
}
.arrow-right-select {
width: 15.27rpx;
height: 21.68rpx;
// border: 3rpx solid #FFFFFF
}
}
.arrow-right-select {
width: 15.27rpx;
height: 21.68rpx;
// border: 3rpx solid #FFFFFF
}
}
.distance {
height: 46rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 42rpx;
}
}
.distance {
height: 46rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 42rpx;
}
}
}
.menu-banner {
height: 40rpx;
position: relative;
height: 40rpx;
position: relative;
video {
width: 100%;
height: 400rpx;
}
image {
width: 100%;
height: 400rpx;
}
video {
width: 100%;
height: 400rpx;
}
image {
width: 100%;
height: 400rpx;
}
.login-area {
display: flex;
width: 686rpx;
height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: -2rpx;
left: 33rpx;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px);
z-index: 9;
.login-area {
display: flex;
width: 686rpx;
height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: -2rpx;
left: 33rpx;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px);
z-index: 9;
.avatar {
display: flex;
justify-items: center;
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 16.93rpx;
border-radius: 72rpx;
image {
width: 100%;
height: 100%;
border-radius: 72rpx;
};
}
.avatar {
display: flex;
justify-items: center;
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 16.93rpx;
border-radius: 72rpx;
image {
width: 100%;
height: 100%;
border-radius: 72rpx;
}
}
.user-info {
display: flex;
align-items: center;
width: 530.55rpx;
justify-content:space-between;
flex-wrap:nowrap;
.user-name {
margin-top: 2.68rpx;
font-size: 24rpx;
font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333;
}
.user-info {
display: flex;
align-items: center;
width: 530.55rpx;
justify-content: space-between;
flex-wrap: nowrap;
.user-name {
margin-top: 2.68rpx;
font-size: 24rpx;
font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333;
}
.dialog {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 4.64rpx;
.dialog {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 4.64rpx;
.content {
flex: 1;
}
}
.arrow-right-select{
width: 15.27rpx;
height: 21.68rpx;
}
}
.content {
flex: 1;
}
}
.arrow-right-select {
width: 15.27rpx;
height: 21.68rpx;
}
}
.login-btn {
// width: 114rpx;
margin-right: -5rpx;
width: 167rpx;
height: 64rpx;
background: #0050F6;
border-radius: 2rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
}
}
.login-btn {
// width: 114rpx;
margin-right: -5rpx;
width: 167rpx;
height: 64rpx;
background: #0050f6;
border-radius: 2rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 64rpx;
}
}
}
.order-banner {
width: 718rpx;
height: 179rpx;
background: #FFFFFF;
box-shadow: -2px -2px 8px 0px rgba(102, 102, 102, 0.1), 2px 2px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box;
position: relative;
left: 16rpx;
top: 0rpx;
z-index: 10;
display: flex;
justify-content: flex-start;
width: 718rpx;
height: 179rpx;
background: #ffffff;
box-shadow: -2px -2px 8px 0px rgba(102, 102, 102, 0.1),
2px 2px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box;
position: relative;
left: 16rpx;
top: 0rpx;
z-index: 10;
display: flex;
justify-content: flex-start;
.info {
padding-left: 34.48rpx;
.info {
padding-left: 34.48rpx;
.first {
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 44rpx;
margin-top: 44rpx;
.first-code{
font-family: Arial, Helvetica SC;
font-size: 28rpx;
color: #333333;
}
}
.first {
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 44rpx;
margin-top: 44rpx;
.first-code {
font-family: Arial, Helvetica SC;
font-size: 28rpx;
color: #333333;
}
}
.second1,
.second {
margin-top: 12rpx;
width: 400rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
letter-spacing: 0rpx;
text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1);
white-space: nowrap;
.second1,
.second {
margin-top: 12rpx;
width: 400rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
letter-spacing: 0rpx;
text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1);
white-space: nowrap;
.time {
font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif;
font-weight: normal;
color: #0050F6;
margin: 0 16rpx;
}
}
.second1 {
margin-top: 20rpx;
}
}
.time {
font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif;
font-weight: normal;
color: #0050f6;
margin: 0 16rpx;
}
}
.second1 {
margin-top: 20rpx;
}
}
.line {
width: 4rpx;
height: 104rpx;
border-right: 1rpx solid #E8E8E8;
position: absolute;
left: 510rpx;
box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1);
top: 36rpx;
}
.line {
width: 4rpx;
height: 104rpx;
border-right: 1rpx solid #e8e8e8;
position: absolute;
left: 510rpx;
box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1);
top: 36rpx;
}
.barCode-box {
margin-top: 30rpx;
margin-left: 115rpx;
width: 150rpx;
height: 122rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
.barCode-box {
margin-top: 30rpx;
margin-left: 115rpx;
width: 150rpx;
height: 122rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
.barCode {
width: 86rpx;
height: 86rpx;
.barCode {
width: 86rpx;
height: 86rpx;
image {
width: 100%;
height: 100%;
}
}
image {
width: 100%;
height: 100%;
}
}
.barCode-dis {
text-align: center;
margin-top: 12rpx;
font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 22rpx;
}
}
.barCode-dis {
text-align: center;
margin-top: 12rpx;
font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 22rpx;
}
}
}
</style>
pages/mine/mine.vue
<template>
<view class="pages">
<view class="menu-banner">
<view class="log">
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> -->
</view>
<image :src="img"/>
<!-- <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.mp4"></video> -->
<view class="mod11" @click="goToPage('userInfo')">
<view class="avatar">
<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/touxiang.png'"></image>
</view>
<view class="user-info">
<view class="user-infocontent">
<view class="user-name" v-if="userms">HI！{{ userInfo.customerName || '我是谁' }}</view>
<view class="user-name" v-else>未登录</view>
<view class="dialog">
<view class="content" v-if="userms">{{dayTitle}}</view>
<view class="content" v-if="!userms">请您尽快登录～</view>
</view>
</view>
<view>
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立即登录
</button>
</view>
</view>
</view>
</view>
<!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> -->
<view class="contents" v-if="userms">
<view class="myOrder" @click="goToPage('order')">
<view class="text">我的订单</view>
<view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</view>
<view class="line"></view>
<view class="right_box">
<view class="box" @click.stop="goToPage('coupon')">
<view class="left">
<view class="text">HOOLOO券</view>
<view class="tickNum" v-if="tickNum"><span :style="{'color':'#FA5151'}">{{tickNum}}</span>张可用</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</view>
<view class="line"></view>
<view class="box_two" @click="goToPage('msg')">
<view class="left">
<view class="text">我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</view>
</view>
</view>
<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}">
<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="text">我的订单</view>
<view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</button>
<view class="line"></view>
<view class="right_box">
<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<view class="text">HOOLOO券</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</button>
<view class="line"></view>
<button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<view class="text">我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</button>
</view>
</view>
<view v-if="userms" class="function">
<view class="title">常用功能</view>
<view class="function_item">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系客服</button>
<view class="function_item_icon">
<image :style="{'height':'100%','width':'100%'}" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
</view>
</view>
</view>
<taBar select="2"></taBar>
<show-toast ref="toast"/>
</view>
<view class="pages">
<view class="menu-banner">
<view class="log">
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> -->
</view>
<image :src="img" />
<!-- <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.mp4"></video> -->
<view class="mod11" @click="goToPage('userInfo')">
<view class="avatar">
<image
:src="
userInfo.avatarUrl
? userInfo.avatarUrl
: '../../static/touxiang.png'
"
></image>
</view>
<view class="user-info">
<view class="user-infocontent">
<view class="user-name" v-if="userms"
>HI！{{ userInfo.customerName || "我是谁" }}</view
>
<view class="user-name" v-else>未登录</view>
<view class="dialog">
<view class="content" v-if="userms">{{ dayTitle }}</view>
<view class="content" v-if="!userms">请您尽快登录～</view>
</view>
</view>
<view>
<image
class="arrow-right-select"
v-if="userms"
:src="'../../static/imgs/jiantouhei.png'"
/>
<button
class="login-btn"
v-if="!userms"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
立即登录
</button>
</view>
</view>
</view>
</view>
<!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> -->
<view class="contents" v-if="userms">
<view class="myOrder" @click="goToPage('order')">
<view class="text">我的订单</view>
<view class="iconbox"
><image class="icon" src="/static/imgs/dingdan.png"></image
></view>
</view>
<view class="line"></view>
<view class="right_box">
<view class="box" @click.stop="goToPage('coupon')">
<view class="left">
<view class="text">HOOLOO券</view>
<view class="tickNum" v-if="tickNum"
><span :style="{ color: '#FA5151' }">{{ tickNum }}</span
>张可用</view
>
</view>
<view class="right"
><image class="icon" src="/static/imgs/youhuijuan.png"></image
></view>
</view>
<view class="line"></view>
<view class="box_two" @click="goToPage('msg')">
<view class="left">
<view class="text">我的消息</view>
</view>
<view class="right"
><image class="icon" src="/static/imgs/xiaoxi.png"></image
></view>
</view>
</view>
</view>
<view
class="contents"
v-if="!userms"
:style="{ 'padding-bottom': '65rpx' }"
>
<button
class="myOrder"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
style="
line-height: 30rpx;
margin-left: 0rpx;
margin-right: 0rpx;
padding-left: 0rpx;
padding-right: 0rpx;
"
>
<view class="text">我的订单</view>
<view class="iconbox"
><image class="icon" src="/static/imgs/dingdan.png"></image
></view>
</button>
<view class="line"></view>
<view class="right_box">
<button
class="box"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
style="
line-height: 30rpx;
margin-left: 0rpx;
margin-right: 0rpx;
padding-left: 0rpx;
padding-right: 0rpx;
"
>
<view class="left">
<view class="text">HOOLOO券</view>
</view>
<view class="right"
><image class="icon" src="/static/imgs/youhuijuan.png"></image
></view>
</button>
<view class="line"></view>
<button
class="box_two"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
style="
line-height: 30rpx;
margin-left: 0rpx;
margin-right: 0rpx;
padding-left: 0rpx;
padding-right: 0rpx;
"
>
<view class="left">
<view class="text">我的消息</view>
</view>
<view class="right"
><image class="icon" src="/static/imgs/xiaoxi.png"></image
></view>
</button>
</view>
</view>
<view v-if="userms" class="function">
<view class="title">常用功能</view>
<view class="function_item">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<button
class="function_item_text"
open-type="contact"
bindcontact="handleContact"
session-from="sessionFrom"
>
联系客服
</button>
<view class="function_item_icon">
<image
:style="{ height: '100%', width: '100%' }"
v-if="userms"
:src="'../../static/imgs/jiantouhei.png'"
/>
</view>
</view>
</view>
<taBar select="2"></taBar>
<show-toast ref="toast" />
</view>
</template>
<script>
import User from '@/request/user'
import User from "@/request/user";
export default {
onLoad() {
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
let platform = uni.getSystemInfoSync().platform;
if(platform == 'android'){
this.img = '../../static/imgs/wodezhanweitu.png'
}else{
this.img = 'https://s3.bmp.ovh/imgs/2022/07/05/1768111c5c7f5300.gif'
}
},
async onShow() {
const dayTitleList = [
'呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~',
'随手一杯好咖啡，希望你今天，明天，天天都开心~',
'咖啡哪有打工苦，喝完这杯再上班~',
'今天不听大道理，只喝专业好咖啡~',
'来杯美式，少点破事~',
'用咖啡拯救疲惫的灵魂~',
'呼噜咖啡由37%的咖啡加63%的生活构成~'
]
this.dayTitle = dayTitleList[new Date().getDay()]
if(this.userInfo){
const {data} = await User.getCouponNum()
this.tickNum = data?.data||0
}
},
// 微信小程序右上角分享
onShareAppMessage() {
return this.getShareData();
},
data() {
return {
loginInfo:"",
img:'',
tickNum:0,
dayTitle:'',
}
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
userInfo() {
return this.$store.state.user.userInfo;
},
},
methods: {
getShareData(type) {
let title = "随手一杯好咖啡";
let path = `/pages/menu/menu`;
let imageUrl = "../../static/imgs/shareImg.png";
return {
title,
imageUrl,
path,
}
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
User.getPhoneNumber(e,async ()=>{
setTimeout(async () => {
const {data:couponData} = await User.getCouponNum()
this.tickNum = couponData?.data||0
}, 1000);
});
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
goToPage(page) {
page == 'coupon' && uni.navigateTo({ url: '/mineSubPackage/pages/coupon/index' })
if (!this.userms) {
// this.loginByPhoneNumber(page)
return
}
page == 'order' && uni.switchTab({ url: '/pages/order/order' })
page == 'msg' && uni.navigateTo({ url: '/mineSubPackage/pages/msg/index' })
if(page == 'userInfo'){
// console.log(this.userInfo,'this.userInfo')
// if(this.userInfo.avatarUrl){
// uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index'})
// }else{
// wx.getUserProfile({
// desc:'用于完善用户资料',
// success:(res)=>{
const {userInfo} = this
console.log(userInfo,'userInfo')
let defaultImg = "https://hooloo-mp.oss-cn-shanghai.aliyuncs.com/resources/touxiang.png";
const Info = JSON.stringify({
avatarUrl:userInfo.avatarUrl||defaultImg,
gender:userInfo.gender,
nickName:userInfo.customerName
})
// console.log(res)
page == 'userInfo' && uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index?info='+encodeURIComponent(Info) })
// }
// })
// }
}
}
}
}
onLoad() {
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
let platform = uni.getSystemInfoSync().platform;
if (platform == "android") {
this.img = "../../static/imgs/wodezhanweitu.png";
} else {
this.img = "https://s3.bmp.ovh/imgs/2022/07/05/1768111c5c7f5300.gif";
}
},
async onShow() {
const dayTitleList = [
"呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~",
"随手一杯好咖啡，希望你今天，明天，天天都开心~",
"咖啡哪有打工苦，喝完这杯再上班~",
"今天不听大道理，只喝专业好咖啡~",
"来杯美式，少点破事~",
"用咖啡拯救疲惫的灵魂~",
"呼噜咖啡由37%的咖啡加63%的生活构成~",
];
this.dayTitle = dayTitleList[new Date().getDay()];
if (this.userInfo) {
const { data } = await User.getCouponNum();
this.tickNum = data?.data || 0;
}
},
// 微信小程序右上角分享
onShareAppMessage() {
return this.getShareData();
},
data() {
return {
loginInfo: "",
img: "",
tickNum: 0,
dayTitle: "",
};
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
userInfo() {
return this.$store.state.user.userInfo;
},
},
methods: {
getShareData(type) {
let title = "随手一杯好咖啡";
let path = `/pages/menu/menu`;
let imageUrl = "../../static/imgs/shareImg.png";
return {
title,
imageUrl,
path,
};
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
User.getPhoneNumber(e, async () => {
setTimeout(async () => {
const { data: couponData } = await User.getCouponNum();
this.tickNum = couponData?.data || 0;
}, 1000);
});
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
goToPage(page) {
page == "coupon" &&
uni.navigateTo({ url: "/mineSubPackage/pages/coupon/index" });
if (!this.userms) {
// this.loginByPhoneNumber(page)
return;
}
page == "order" && uni.switchTab({ url: "/pages/order/order" });
page == "msg" &&
uni.navigateTo({ url: "/mineSubPackage/pages/msg/index" });
if (page == "userInfo") {
// console.log(this.userInfo,'this.userInfo')
// if(this.userInfo.avatarUrl){
// uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index'})
// }else{
// wx.getUserProfile({
// desc:'用于完善用户资料',
// success:(res)=>{
const { userInfo } = this;
console.log(userInfo, "userInfo");
let defaultImg =
"https://hooloo-mp.oss-cn-shanghai.aliyuncs.com/resources/touxiang.png";
const Info = JSON.stringify({
avatarUrl: userInfo.avatarUrl || defaultImg,
gender: userInfo.gender,
nickName: userInfo.customerName,
});
// console.log(res)
page == "userInfo" &&
uni.navigateTo({
url:
"/mineSubPackage/pages/userInfo/index?info=" +
encodeURIComponent(Info),
});
// }
// })
// }
}
},
},
};
</script>
<style lang="scss" scoped>
button::after {
border: none;
border: none;
}
.payment {
border-radius: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
left: 0;
border-radius: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
left: 0;
}
.menu-box {}
.menu-box {
}
.menu-banner {
position: relative;
height: 504rpx;
image {
height: 400rpx;
}
.log {
position: absolute;
z-index: 99;
top: 100rpx;
left: 30rpx;
.logImg {
width: 312rpx;
height: 72rpx;
}
.logText {
font-size: 42rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #FFFFFF;
}
}
video {
width: 100%;
height: 376rpx;
}
position: relative;
height: 504rpx;
image {
height: 400rpx;
}
.log {
position: absolute;
z-index: 99;
top: 100rpx;
left: 30rpx;
.logImg {
width: 312rpx;
height: 72rpx;
}
.logText {
font-size: 42rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #ffffff;
}
}
video {
width: 100%;
height: 376rpx;
}
}
.mod11 {
display: flex;
width: 686rpx;
height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: 52rpx;
left: 33rpx;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px);
z-index: 9;
.avatar {
display: flex;
justify-items: center;
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 16.93rpx;
border-radius: 72rpx;
image {
width: 100%;
height: 100%;
border-radius: 72rpx;
};
}
.user-info {
display: flex;
align-items: center;
width: 530.55rpx;
justify-content:space-between;
flex-wrap:nowrap;
.user-name {
margin-top: 2.68rpx;
font-size: 24rpx;
font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333;
}
.dialog {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 4.64rpx;
.content {
flex: 1;
}
}
.arrow-right-select{
width: 15.27rpx;
height: 21.68rpx;
}
}
.login-btn {
// width: 114rpx;
margin-right: -5rpx;
width: 167rpx;
height: 64rpx;
background: #0050F6;
border-radius: 2rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
}
display: flex;
width: 686rpx;
height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: 52rpx;
left: 33rpx;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px);
z-index: 9;
.avatar {
display: flex;
justify-items: center;
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 16.93rpx;
border-radius: 72rpx;
image {
width: 100%;
height: 100%;
border-radius: 72rpx;
}
}
.user-info {
display: flex;
align-items: center;
width: 530.55rpx;
justify-content: space-between;
flex-wrap: nowrap;
.user-name {
margin-top: 2.68rpx;
font-size: 24rpx;
font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333;
}
.dialog {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 4.64rpx;
.content {
flex: 1;
}
}
.arrow-right-select {
width: 15.27rpx;
height: 21.68rpx;
}
}
.login-btn {
// width: 114rpx;
margin-right: -5rpx;
width: 167rpx;
height: 64rpx;
background: #0050f6;
border-radius: 2rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 64rpx;
}
}
.mod11::after{
border-radius: 0rpx;
.mod11::after {
border-radius: 0rpx;
}
.contents {
display: flex;
padding: 52rpx 64rpx 52rpx 70rpx;
margin: -28rpx 32rpx 24rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
// background: #0000FF;
.myOrder {
height: 216rpx;
// background: #FF0000;
background: #FFFFFF;
align-items: center;
text-align: left;
.text {
margin-top: 5.02rpx;
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
width: 112rpx;
line-height: 40rpx;
margin-right: 70.46rpx;
color: #333333;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx;
}
.iconbox {
width: 99.94rpx;
height: 110rpx;
margin-left: 6rpx;
margin-top: 48.98rpx;
}
.icon {
width: 99.94rpx;
height: 110rpx;
margin: 0 auto;
}
}
.line{
height: 216rpx;
background: #E4E4E4;
border: 1rpx solid #E4E4E4;
}
.right_box {
flex: 1;
// background: #00FF00;
width: 306rpx;
height: 216rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-left: 62.54rpx;
.box_two {
width: 100%;
overflow: initial;
height: 69rpx;
// background: #FF0000;
line-height: 30rpx;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.left {
text-align: center;
width: 154rpx;
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #333333;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx
}
}
.right {
.icon {
width: 93.89rpx;
height: 72.21rpx;
}
}
}
.box_two::after{
line-height: 30rpx;
}
.line {
width: 306rpx;
height: 2rpx;
border: 1rpx solid #E4E4E4;
margin: 38rpx 0rpx 40rpx 0rpx;
}
.box {
margin-top: 4.05rpx;
overflow: initial;
width: 100%;
height: 129rpx;
line-height: 30rpx;
// background: #FF0000;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.left {
text-align: center;
width: 154rpx;
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #333333;
}
.tickNum {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
position: absolute;
left: 40rpx;
bottom: -18rpx;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx
}
}
.right {
.icon {
width: 91.59rpx;
height: 63.9rpx;
}
}
}
.box::after{
line-height: 30rpx;
}
}
display: flex;
padding: 52rpx 64rpx 52rpx 70rpx;
margin: -28rpx 32rpx 24rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #ffffff;
// background: #0000FF;
.myOrder {
height: 216rpx;
// background: #FF0000;
background: #ffffff;
align-items: center;
text-align: left;
.text {
margin-top: 5.02rpx;
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
width: 112rpx;
line-height: 40rpx;
margin-right: 70.46rpx;
color: #333333;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx;
}
.iconbox {
width: 99.94rpx;
height: 110rpx;
margin-left: 6rpx;
margin-top: 48.98rpx;
}
.icon {
width: 99.94rpx;
height: 110rpx;
margin: 0 auto;
}
}
.line {
height: 216rpx;
background: #e4e4e4;
border: 1rpx solid #e4e4e4;
}
.right_box {
flex: 1;
// background: #00FF00;
width: 306rpx;
height: 216rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-left: 62.54rpx;
.box_two {
width: 100%;
overflow: initial;
height: 69rpx;
// background: #FF0000;
line-height: 30rpx;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.left {
text-align: center;
width: 154rpx;
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #333333;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx;
}
}
.right {
.icon {
width: 93.89rpx;
height: 72.21rpx;
}
}
}
.box_two::after {
line-height: 30rpx;
}
.line {
width: 306rpx;
height: 2rpx;
border: 1rpx solid #e4e4e4;
margin: 38rpx 0rpx 40rpx 0rpx;
}
.box {
margin-top: 4.05rpx;
overflow: initial;
width: 100%;
height: 129rpx;
line-height: 30rpx;
// background: #FF0000;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.left {
text-align: center;
width: 154rpx;
.text {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #333333;
}
.tickNum {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
position: absolute;
left: 40rpx;
bottom: -18rpx;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx;
}
}
.right {
.icon {
width: 91.59rpx;
height: 63.9rpx;
}
}
}
.box::after {
line-height: 30rpx;
}
}
}
.function {
width: 686rpx;
background: #FFFFFF;
margin: 0 auto;
padding: 21.72rpx 30rpx 29.28rpx 26rpx;
box-sizing: border-box;
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.function_item {
display: flex;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 34rpx;
display: flex;
align-items: center;
margin-top: 22rpx;
.function_item_text {
flex: 1;
margin: 0;
margin-left: 12rpx;
padding: 10rpx;
text-align: left;
line-height: 1;
background-color: #FFFFFF;
font-weight: 400;
color: #333333;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx;
border-radius: 0px;
}
.function_item_text::after {
position: unset !important;
border: unset;
}
.function_item_icon {
margin-left: 6rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
width: 686rpx;
background: #ffffff;
margin: 0 auto;
padding: 21.72rpx 30rpx 29.28rpx 26rpx;
box-sizing: border-box;
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.function_item {
display: flex;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 34rpx;
display: flex;
align-items: center;
margin-top: 22rpx;
.function_item_text {
flex: 1;
margin: 0;
margin-left: 12rpx;
padding: 10rpx;
text-align: left;
line-height: 1;
background-color: #ffffff;
font-weight: 400;
color: #333333;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx;
border-radius: 0px;
}
.function_item_text::after {
position: unset !important;
border: unset;
}
.function_item_icon {
margin-left: 6rpx;
width: 15.27rpx;
height: 21.68rpx;
}
}
}
</style>
\ No newline at end of file
</style>
pages/order/order.vue
<template>
<view class="pages">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
<!-- <u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> -->
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">我的订单</view>
</view>
<view v-show="false">{{userms}}</view>
<view :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}">
<view class="empty" v-show="userms && empty == true">
<view :style="{'text-align':'center'}">
<image class="empty_icon" src="/static/imgs/wudingdanzhanweitu.png"></image>
</view>
<view class="empty_text">——您还未下单，下单品尝一下吧——</view>
<button class="empty_button" @click="goHome">去品尝</button>
</view>
<view class="empty_notdl" v-show="!userms">
<view :style="{'text-align':'center'}">
<image class="empty_icon" src="/static/imgs/weidengluzhanweitu.png"></image>
</view>
<view class="empty_text">——您还未登录，请先登录——</view>
<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去登录</button>
</view>
<view class="orders" :style="{'padding-bottom':orderBottom+'rpx'}">
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
<view class="order_header">
<view>
<view class="order_adrass">{{ item.shop.name }}</view>
<view class="order_time">{{ item.createdAt }}</view>
</view>
<view class="order_status">
<text>{{ getStateText(item.state) }}</text>
<image class="xiaojiantou" src="@/static/imgs/xiaojiantou.png"/>
</view>
</view>
<div class="order_content">
<view class="order_content_box1">
<view class="goods_item" v-for="(good,index) in item.orderDetails" :key="good.id">
<image class="goods_img" v-if="jsonParse(good.goods.pics).thumbnailApplet" :src="jsonParse(good.goods.pics).thumbnailApplet"></image>
<image v-else class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image>
<view class="goods_text">
<view class="goods_title">{{ good.goodsName }}</view>
<view class="goods_spce">
<view>
<span v-for="(rule, index) in jsonParse(good.specRuleDetail)" :key="rule.specId">
{{ rule.ruleName }}
<span v-if="index!=jsonParse(good.specRuleDetail).length-1">/</span>
</span>
</view>
<view class="numbox">
×{{ good.num }}
<a class="btntk" v-if="checkStatus(item.state,[12,13,14,15])&&(index+1)===item.orderDetails.length" @click.stop="refundInfo(item)" type="primary">退款详情</a>
</view>
</view>
</view>
<view v-if="index==item.orderDetails.length-1 && (item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5)" class="qr_code">
<image class="qr_code_img" src="/static/imgs/icon-barcode.png"></image>
<view class="qr_text">点击二维码取单</view>
</view>
</view>
</view>
</div>
<view class="order_footer" :style="{'margin-top':checkStatus(item.state,[12,13,14,15])?'16rpx':'39rpx'}">
<view class="total">
共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.paidAmount) }}</text>
</view>
<a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立即支付</a>
<a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a>
</view>
</view>
</view>
</view>
<show-toast ref="toast"/>
<taBar select="1"></taBar>
</view>
<view class="pages">
<view
class="topBar"
:style="{
'padding-top': systemBarHeight.statusBarHeight + 'px',
height: systemBarHeight.navigationBarHeight + 'px',
}"
>
<!-- <u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> -->
<view
class="tabTitle"
:style="{ 'line-height': systemBarHeight.navigationBarHeight + 'px' }"
>我的订单</view
>
</view>
<view v-show="false">{{ userms }}</view>
<view
:style="{
'padding-top':
systemBarHeight.statusBarHeight +
systemBarHeight.navigationBarHeight +
'px',
}"
>
<view class="empty" v-show="userms && empty == true">
<view :style="{ 'text-align': 'center' }">
<image
class="empty_icon"
src="/static/imgs/wudingdanzhanweitu.png"
></image>
</view>
<view class="empty_text">——您还未下单，下单品尝一下吧——</view>
<button class="empty_button" @click="goHome">去品尝</button>
</view>
<view class="empty_notdl" v-show="!userms">
<view :style="{ 'text-align': 'center' }">
<image
class="empty_icon"
src="/static/imgs/weidengluzhanweitu.png"
></image>
</view>
<view class="empty_text">——您还未登录，请先登录——</view>
<button
class="empty_button"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
去登录
</button>
</view>
<view class="orders" :style="{ 'padding-bottom': orderBottom + 'rpx' }">
<view
class="order_item"
v-for="item in list"
:key="item.id"
@click="openInfo(item)"
>
<view class="order_header">
<view>
<view class="order_adrass">{{ item.shop.name }}</view>
<view class="order_time">{{ item.createdAt }}</view>
</view>
<view class="order_status">
<text>{{ getStateText(item.state) }}</text>
<image class="xiaojiantou" src="@/static/imgs/xiaojiantou.png" />
</view>
</view>
<div class="order_content">
<view class="order_content_box1">
<view
class="goods_item"
v-for="(good, index) in item.orderDetails"
:key="good.id"
>
<image
class="goods_img"
v-if="jsonParse(good.goods.pics).thumbnailApplet"
:src="jsonParse(good.goods.pics).thumbnailApplet"
></image>
<image
v-else
class="goods_img"
:src="jsonParse(good.goods.pics).thumbnail"
></image>
<view class="goods_text">
<view class="goods_title">{{ good.goodsName }}</view>
<view class="goods_spce">
<view>
<span
v-for="(rule, index) in jsonParse(good.specRuleDetail)"
:key="rule.specId"
>
{{ rule.ruleName }}
<span
v-if="
index != jsonParse(good.specRuleDetail).length - 1
"
>/</span
>
</span>
</view>
<view class="numbox">
×{{ good.num }}
<a
class="btntk"
v-if="
checkStatus(item.state, [12, 13, 14, 15]) &&
index + 1 === item.orderDetails.length
"
@click.stop="refundInfo(item)"
type="primary"
>退款详情</a
>
</view>
</view>
</view>
<view
v-if="
index == item.orderDetails.length - 1 &&
(item.state == 2 ||
item.state == 3 ||
item.state == 4 ||
item.state == 5)
"
class="qr_code"
>
<image
class="qr_code_img"
src="/static/imgs/icon-barcode.png"
></image>
<view class="qr_text">点击二维码取单</view>
</view>
</view>
</view>
</div>
<view
class="order_footer"
:style="{
'margin-top': checkStatus(item.state, [12, 13, 14, 15])
? '16rpx'
: '39rpx',
}"
>
<view class="total">
共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text
class="price"
>￥{{ Utils.isInteger(item.paidAmount) }}</text
>
</view>
<a
class="btn"
@click.stop="PayNow(item)"
v-if="item.state == 1"
type="primary"
>立即支付</a
>
<a
class="btn"
v-else
@click.stop="oneMoreOrder(item)"
type="primary"
>再来一单</a
>
</view>
</view>
</view>
</view>
<show-toast ref="toast" />
<taBar select="1"></taBar>
</view>
</template>
<script>
import order from '@/request/order'
import Menu from '@/request/menu';
import Utils from '@/utils/utils'
import User from '@/request/user'
import order from "@/request/order";
import Menu from "@/request/menu";
import Utils from "@/utils/utils";
import User from "@/request/user";
import { $EventBus } from "@/utils/EventBus";
export default {
onLoad() {
if(!this.userms){
User.wxLoginAndGetOpenid(true).then(loginInfo=>{
this.loginInfo = loginInfo
})
}
},
name: 'order',
data() {
return {
empty: false,
list: [],
loginInfo:"",
Utils,
orderBottom:0
}
},
onShow() {
this.getList()
},
mounted() {
this.orderBottom = uni.getStorageSync('orderBottom')
// this.getList()
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
systemBarHeight(){
return this.$store.state.user.systemBarHeight
},
},
methods: {
refundInfo(item) {
const { id } = item
uni.setStorageSync('orderId', id);
let url = '/orderSubPackage/pages/refundInfo/index'
uni.navigateTo({ url })
},
checkStatus(status,list){
if(list.includes(Number(status))){
return true
}else{
return false
}
},
getStateText(state) {
state = '' + state;
switch (state) {
case '1':
return '待付款'
case '2':
return '待制作'
case '3':
return '制作中'
case '4':
return '待取餐'
case '5':
return '取餐中'
case '6':
case '7':
return '已完成'
case '8':
case '9':
case '10':
case '11':
return '已取消'
case '12':
return '退款中'
case '13':
return '退款失败'
case '14':
return '部分退款'
case '15':
return '已退款'
default:
return '未知状态'
}
},
async oneMoreOrder(item) {
// 清空购物车
uni.removeStorageSync('shopCarInfo');
$EventBus.$emit('updateCar');
//
const numObj = {}
const { id, shopId, orderDetails } = item;
orderDetails.forEach(item => {
orderDetails[item.skuId] = Number(item.num)
})
const { data } = await order.moreOrder({ orderId: id, shopId });
if(!data || !data.data){
this.showToast({ title: "该订单中的商品已经售罄了" });
return;
}
let list = new Array();
data.data.forEach(item => {
const skuId = item.skus[0].skuId
const nextData = { ...item, skuId, num: orderDetails[skuId], flag: true, sku: item.skus[0] }
if (nextData.sku.state == 1) {
list.push(nextData);
}
});
if(!list || list.length<=0) {
this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' });
return;
}
list.forEach(nextData => {
Utils.getallNum(nextData);
})
uni.switchTab({ url: '/pages/menu/menu' });
},
async getList() {
if (!this.userms) return
const { data } = await order.getMyOrder();
if (data) {
this.list = data.rows;
if(this.list && this.list.length>0) {
this.empty = false;
} else {
this.empty = true;
}
} else {
this.showToast({ title: '请登录！', icon: 'error' })
}
},
async PayNow({ id }) {
const orderInfo = await order.payOrder({ orderId: id })
const sendData = {
orderId:id,
...orderInfo.data.data
}
console.log(orderInfo,'orderInfo')
if (orderInfo) {
if (orderInfo && orderInfo.data.code == 200) {
await Menu.requestPayment(sendData);
this.getList()
}
}
},
goHome() {
uni.switchTab({ url: '/pages/menu/menu' });
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
e.loginInfo = this.loginInfo
User.getPhoneNumber(e, this.getList);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
}
},
openInfo(data) {
const { id } = data
uni.setStorageSync('orderId', id);
let url = '/orderSubPackage/pages/orderInfo/index'
uni.navigateTo({ url })
},
jsonParse(json) {
const data = json || {}
return JSON.parse(data)
},
orderDetailsSize(orderDetails) {
let size = 0;
orderDetails.forEach(item => {
const { num } = item;
size += Number(num)
});
return size
}
}
}
onLoad() {
if (!this.userms) {
User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo;
});
}
},
name: "order",
data() {
return {
empty: false,
list: [],
loginInfo: "",
Utils,
orderBottom: 0,
};
},
onShow() {
this.getList();
},
mounted() {
this.orderBottom = uni.getStorageSync("orderBottom");
// this.getList()
},
computed: {
userms() {
return this.$store.getters.Authorization;
},
systemBarHeight() {
return this.$store.state.user.systemBarHeight;
},
},
methods: {
refundInfo(item) {
const { id } = item;
uni.setStorageSync("orderId", id);
let url = "/orderSubPackage/pages/refundInfo/index";
uni.navigateTo({ url });
},
checkStatus(status, list) {
if (list.includes(Number(status))) {
return true;
} else {
return false;
}
},
getStateText(state) {
state = "" + state;
switch (state) {
case "1":
return "待付款";
case "2":
return "待制作";
case "3":
return "制作中";
case "4":
return "待取餐";
case "5":
return "取餐中";
case "6":
case "7":
return "已完成";
case "8":
case "9":
case "10":
case "11":
return "已取消";
case "12":
return "退款中";
case "13":
return "退款失败";
case "14":
return "部分退款";
case "15":
return "已退款";
default:
return "未知状态";
}
},
async oneMoreOrder(item) {
// 清空购物车
uni.removeStorageSync("shopCarInfo");
$EventBus.$emit("updateCar");
//
const numObj = {};
const { id, shopId, orderDetails } = item;
orderDetails.forEach((item) => {
orderDetails[item.skuId] = Number(item.num);
});
const { data } = await order.moreOrder({ orderId: id, shopId });
if (!data || !data.data) {
this.showToast({ title: "这款已经卖完啦" });
return;
}
let list = new Array();
data.data.forEach((item) => {
const skuId = item.skus[0].skuId;
const nextData = {
...item,
skuId,
num: orderDetails[skuId],
flag: true,
sku: item.skus[0],
};
if (nextData.sku.state == 1) {
list.push(nextData);
}
});
if (!list || list.length <= 0) {
this.showToast({ title: "这款已经卖完啦", icon: "error" });
return;
}
list.forEach((nextData) => {
Utils.getallNum(nextData);
});
uni.switchTab({ url: "/pages/menu/menu" });
},
async getList() {
if (!this.userms) return;
const { data } = await order.getMyOrder();
if (data) {
this.list = data.rows;
if (this.list && this.list.length > 0) {
this.empty = false;
} else {
this.empty = true;
}
} else {
this.showToast({ title: "请登录！", icon: "error" });
}
},
async PayNow({ id }) {
const orderInfo = await order.payOrder({ orderId: id });
const sendData = {
orderId: id,
...orderInfo.data.data,
};
console.log(orderInfo, "orderInfo");
if (orderInfo) {
if (orderInfo && orderInfo.data.code == 200) {
await Menu.requestPayment(sendData);
this.getList();
}
}
},
goHome() {
uni.switchTab({ url: "/pages/menu/menu" });
},
// 手机号授权登录
getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo;
User.getPhoneNumber(e, this.getList);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
}
},
openInfo(data) {
const { id } = data;
uni.setStorageSync("orderId", id);
let url = "/orderSubPackage/pages/orderInfo/index";
uni.navigateTo({ url });
},
jsonParse(json) {
const data = json || {};
return JSON.parse(data);
},
orderDetailsSize(orderDetails) {
let size = 0;
orderDetails.forEach((item) => {
const { num } = item;
size += Number(num);
});
return size;
},
},
};
</script>
<style lang="scss" scoped>
.pages {
.topBar{
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 92%;
color: #333333
}
}
.topBar {
position: fixed;
width: 100%;
background: white;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 9999;
padding-left: 34rpx;
// .arrow-left {
// margin-left: 20rpx;
// }
.tabTitle {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
text-align: center;
width: 92%;
color: #333333;
}
}
}
.empty {
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translate(-50%);
margin-top: 311rpx;
.empty_icon {
width: 324rpx;
height: 236rpx;
}
.empty_text {
width: 500rpx;
margin-top: 32.73rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
}
.empty_button {
margin-top: 34.29rpx;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
}
.empty_button::after{
border-radius: 2rpx;
border: 0rpx;
}
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translate(-50%);
margin-top: 311rpx;
.empty_icon {
width: 324rpx;
height: 236rpx;
}
.empty_text {
width: 500rpx;
margin-top: 32.73rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
}
.empty_button {
margin-top: 34.29rpx;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050f6;
font-weight: 400;
color: #ffffff;
line-height: 64rpx;
}
.empty_button::after {
border-radius: 2rpx;
border: 0rpx;
}
}
.empty_notdl{
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translate(-50%);
margin-top: 352rpx;
.empty_icon {
width: 324rpx;
height: 236rpx;
}
.empty_text {
margin-top: 32rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
}
.empty_button {
margin-top: 36rpx;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
}
.empty_button::after{
border-radius: 2rpx;
border: 0rpx;
}
.empty_notdl {
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translate(-50%);
margin-top: 352rpx;
.empty_icon {
width: 324rpx;
height: 236rpx;
}
.empty_text {
margin-top: 32rpx;
text-align: center;
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
}
.empty_button {
margin-top: 36rpx;
width: 167rpx;
height: 64rpx;
border-radius: 2rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050f6;
font-weight: 400;
color: #ffffff;
line-height: 64rpx;
}
.empty_button::after {
border-radius: 2rpx;
border: 0rpx;
}
}
.orders {
padding: 1rpx;
.order_item {
width: 686rpx;
background: #FFFFFF;
margin: 32rpx auto 0;
box-sizing: border-box;
padding: 25rpx 32rpx 32rpx 32rpx;
.order_header {
display: flex;
justify-content: space-between;
.order_adrass {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.order_time {
font-size: 24rpx;
font-family: ArialMT;
margin-top: 3rpx;
line-height: 28rpx;
color: #999999;
}
.order_status {
margin-top: 7rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: baseline;
justify-content: flex-start;
line-height: 34rpx;
.xiaojiantou {
width: 12rpx;
height: 16rpx;
margin-left: 5rpx;
}
}
}
.order_content {
display: flex;
justify-content: space-between;
align-items: center;
.order_content_box1{
flex: 1;
}
.goods_item {
margin-top: 41rpx;
display: flex;
// align-items: center;
.qr_code {
text-align: center;
margin-right: 10rpx;
margin-left: 38rpx;
.qr_code_img {
vertical-align: bottom;
width: 76rpx;
height: 76rpx;
}
.qr_text {
line-height: 28rpx;
margin-top: 10rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.goods_img {
height: 96rpx;
width: 96rpx;
background-color: #eee;
}
.goods_text {
margin-left: 22rpx;
flex: 1;
.goods_title {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 10rpx;
line-height: 40rpx;
}
.goods_spce {
margin-top: 2.62rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 34rpx;
color: #999999;
display: flex;
justify-content: space-between;
align-items: flex-start;
.numbox{
display: flex;
.btntk {
box-sizing: border-box;
width: 167rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 2rpx;
font-family: PingFangSC-Regular, PingFang SC;
border: 2rpx solid #0050F6;
font-size: 24rpx;
margin: 0;
margin-left: 17rpx;
color: #0050F6;
font-weight: 400;
text-align: center;
}
}
}
}
}
}
.order_footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 39rpx;
.total {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
.price {
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #666666;
letter-spacing: 1rpx;
}
}
.btn {
width: 167rpx;
height: 64rpx;
line-height: 64rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6;
font-size: 24rpx;
margin: 0;
color: #fff;
font-weight: 400;
text-align: center;
}
}
}
padding: 1rpx;
.order_item {
width: 686rpx;
background: #ffffff;
margin: 32rpx auto 0;
box-sizing: border-box;
padding: 25rpx 32rpx 32rpx 32rpx;
.order_header {
display: flex;
justify-content: space-between;
.order_adrass {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 40rpx;
}
.order_time {
font-size: 24rpx;
font-family: ArialMT;
margin-top: 3rpx;
line-height: 28rpx;
color: #999999;
}
.order_status {
margin-top: 7rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: baseline;
justify-content: flex-start;
line-height: 34rpx;
.xiaojiantou {
width: 12rpx;
height: 16rpx;
margin-left: 5rpx;
}
}
}
.order_content {
display: flex;
justify-content: space-between;
align-items: center;
.order_content_box1 {
flex: 1;
}
.goods_item {
margin-top: 41rpx;
display: flex;
// align-items: center;
.qr_code {
text-align: center;
margin-right: 10rpx;
margin-left: 38rpx;
.qr_code_img {
vertical-align: bottom;
width: 76rpx;
height: 76rpx;
}
.qr_text {
line-height: 28rpx;
margin-top: 10rpx;
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.goods_img {
height: 96rpx;
width: 96rpx;
background-color: #eee;
}
.goods_text {
margin-left: 22rpx;
flex: 1;
.goods_title {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 10rpx;
line-height: 40rpx;
}
.goods_spce {
margin-top: 2.62rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 34rpx;
color: #999999;
display: flex;
justify-content: space-between;
align-items: flex-start;
.numbox {
display: flex;
.btntk {
box-sizing: border-box;
width: 167rpx;
height: 64rpx;
line-height: 64rpx;
border-radius: 2rpx;
font-family: PingFangSC-Regular, PingFang SC;
border: 2rpx solid #0050f6;
font-size: 24rpx;
margin: 0;
margin-left: 17rpx;
color: #0050f6;
font-weight: 400;
text-align: center;
}
}
}
}
}
}
.order_footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 39rpx;
.total {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
.price {
font-size: 28rpx;
font-family: Futura-Medium, Futura;
font-weight: 500;
color: #666666;
letter-spacing: 1rpx;
}
}
.btn {
width: 167rpx;
height: 64rpx;
line-height: 64rpx;
font-family: PingFangSC-Regular, PingFang SC;
background: #0050f6;
font-size: 24rpx;
margin: 0;
color: #fff;
font-weight: 400;
text-align: center;
}
}
}
}
</style>
\ No newline at end of file
</style>
request/menu/index.js
import { $EventBus } from '@/utils/EventBus';
import context from '../../main.js'
import Order from '@/request/order/index.js'
import { $EventBus } from "@/utils/EventBus";
import context from "../../main.js";
import Order from "@/request/order/index.js";
export default {
// 获取菜单列表
getMenuList(id) {
return uni.$u.http
.get('/weixin/infoByShop', {
.get("/weixin/infoByShop", {
params: {
shopId: id,
},
......@@ -14,24 +14,27 @@ export default {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
// 获取点单屏幕的订单信息
getScreenShopCar(key, location, sendData) {
return uni.$u.http
.post('/application/getData', {
.post("/application/getData", {
key,
location,
...sendData
...sendData,
})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
return err;
});
......@@ -39,108 +42,108 @@ export default {
// 下单获取预支付订单
saveReserve(data) {
return uni.$u.http
.post('/order', data)
.post("/order", data)
.then((res) => {
return res;
})
.catch((err) => { });
.catch((err) => {});
},
// saveReserve 为业务接口
requestPayment(data, oldData, buyType, agreeTerms) {
// res为调起微信支付所需参数
// 调起微信支付
if(data.appId) {
const { switchTab = true, callBack } = data
if (data.appId) {
const { switchTab = true, callBack } = data;
uni.requestPayment({
provider: 'wxpay', // 服务提提供商微信支付
provider: "wxpay", // 服务提提供商微信支付
timeStamp: data.timeStamp, // 时间戳
nonceStr: data.nonceStr, // 随机字符串
package: data.package,
signType: data.signType || 'MD5', // 签名算法
signType: data.signType || "MD5", // 签名算法
paySign: data.paySign, // 签名
success: async function (res) {
if (res.errMsg == 'requestPayment:ok') {
if (res.errMsg == "requestPayment:ok") {
// 删除购物车数据后重新放回购物车
uni.setStorageSync('shopCarInfo', []);
$EventBus.$emit('updateCar');
uni.setStorageSync('orderId', data.orderId);
if(agreeTerms)uni.setStorageSync('TermsStatus',true)
if(switchTab){
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement'
uni.navigateTo({ url })
}else{
callBack()
uni.setStorageSync("shopCarInfo", []);
$EventBus.$emit("updateCar");
uni.setStorageSync("orderId", data.orderId);
if (agreeTerms) uni.setStorageSync("TermsStatus", true);
if (switchTab) {
let url =
"/orderSubPackage/pages/orderInfo/index?from=settlement";
uni.navigateTo({ url });
} else {
callBack();
}
}
// 业务逻辑。。。
},
fail: async function (err) {
context.showToast({
title: '支付失败',
icon: 'error',
title: "支付失败，再试一试！",
icon: "error",
});
uni.setStorageSync('shopCarInfo', []);
$EventBus.$emit('updateCar');
uni.setStorageSync('orderId', data.orderId);
if(switchTab){
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement'
uni.navigateTo({ url })
}else{
callBack()
uni.setStorageSync("shopCarInfo", []);
$EventBus.$emit("updateCar");
uni.setStorageSync("orderId", data.orderId);
if (switchTab) {
let url = "/orderSubPackage/pages/orderInfo/index?from=settlement";
uni.navigateTo({ url });
} else {
callBack();
}
},
});
}else{
uni.setStorageSync('orderId', data);
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement'
uni.navigateTo({ url })
} else {
uni.setStorageSync("orderId", data);
let url = "/orderSubPackage/pages/orderInfo/index?from=settlement";
uni.navigateTo({ url });
}
},
// 优惠卷信息接口
requestTicketList(data){
// 优惠卷信息接口
requestTicketList(data) {
return uni.$u.http
.post('/app/order/coupon/info', data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
.post("/app/order/coupon/info", data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
return err;
});
return err;
});
},
// 下单页面优惠卷可用数量
requestTicketNum(data){
requestTicketNum(data) {
return uni.$u.http
.post('/app/order/coupon/fitable-count', data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
.post("/app/order/coupon/fitable-count", data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
return err;
});
return err;
});
},
// 首页调用发送优惠券接口
sendUserCoupon(data) {
return uni.$u.http
.post('/v1/issue/user/coupon', data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
.post("/v1/issue/user/coupon", data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
return err;
});
return err;
});
}
},
};
request/mine/index.js
import context from '../../main.js'
import context from "../../main.js";
export default {
getList(id) {},
getMsg() {
return uni.$u.http
.get('/system/message/list', {})
.get("/system/message/list", {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
read(data) {
return uni.$u.http
.put('/system/message', data)
.put("/system/message", data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
getMessageCount() {
return uni.$u.http
.get('/app/getMessageCount', {})
.get("/app/getMessageCount", {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
// 获取用户优惠卷列表
getUserList(data) {
return uni.$u.http
.get(`/app/coupon/list/${data}`, {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
.get(`/app/coupon/list/${data}`, {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
// 获取用户信息
getUserInfo() {
return uni.$u.http
.get(`/system/customer/detail`, {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
.get(`/system/customer/detail`, {})
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
// 更改用户生日
editBirthdat(data) {
return uni.$u.http
.post(`/system/customer/update/birth`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: err.data.msg, icon: 'none' });
return err
});
.post(`/system/customer/update/birth`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: err.data.msg, icon: "none" });
return err;
});
},
// 更改用户昵称、性别
editUserInfo(data) {
return uni.$u.http
.post(`/system/customer/update/base`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
.post(`/system/customer/update/base`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
// 更改用户头像
editUserAvatar(data) {
return uni.$u.http
.post(`/system/customer/update/avatar-url`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
.post(`/system/customer/update/avatar-url`, data)
.then((res) => {
return res;
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
};
request/order/index.js
export default {
getMyOrder() {
return uni.$u.http
.get('/app/getMyOrder', {
.get("/app/getMyOrder", {
params: {},
custom: {noLoading: true},
custom: { noLoading: true },
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
orderRefund(data) {
return uni.$u.http
.post('/system/refund', data)
.post("/system/refund", data)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
getShop(params) {
return uni.$u.http
.get('/weixin/getArea', {
.get("/weixin/getArea", {
params,
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
// 校验sku是否可用
chekSku(params) {
return uni.$u.http
.get('/application/checkSku', {
.get("/application/checkSku", {
params,
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
cancelOrder(params) {
return uni.$u.http
.get('order/cancel', {
.get("order/cancel", {
params,
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
// 立即支付
payOrder(params) {
console.log(params,'params')
console.log(params, "params");
return uni.$u.http
.get('order/payOrder', {
.get("order/payOrder", {
params,
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
getHomeOrder(params) {
return uni.$u.http
.get(`/app/getHomeOrder?shopId=${params.shopId}`, {
params: {},
custom: {noLoading: true},
custom: { noLoading: true },
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
getWaitTine(data) {
return uni.$u.http
.post('app/getWaitTine', data)
.post("app/getWaitTine", data)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
moreOrder(params) {
return uni.$u.http
.get('/app/getNextOrder', {
.get("/app/getNextOrder", {
params,
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
checkSku(params) {
const shopInfo = JSON.parse(uni.getStorageSync('shopInfo'))
const shopInfo = JSON.parse(uni.getStorageSync("shopInfo"));
return uni.$u.http
.get(`/application/checkSku?shopId=${shopInfo.id}&skuId=${params.skuId}`)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
getOrderDetail(params) {
......@@ -114,18 +114,18 @@ export default {
.get(`/order/${params.orderId}`)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
});
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
getOrderWaiteTime(params) {
return uni.$u.http
.get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
});
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
// 获取退款详情
getRefundInfo(params) {
......@@ -133,8 +133,8 @@ export default {
.get(`/system/refund/list/${params}`)
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' })
console.log('服务器错误');
});
}
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log("哎哟！刚刚走神了，请退出后重进");
});
},
};
request/user/index.js
import Store from '@/store';
import { $EventBus } from '@/utils/EventBus';
import loadingIcon from 'uview-ui/libs/config/props/loadingIcon';
import { data } from 'uview-ui/libs/mixin/mixin';
import context from '../../main.js'
import Store from "@/store";
import { $EventBus } from "@/utils/EventBus";
import loadingIcon from "uview-ui/libs/config/props/loadingIcon";
import { data } from "uview-ui/libs/mixin/mixin";
import context from "../../main.js";
export default {
getLocation(callback) {
let _this = this;
return uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
type: "gcj02", //返回可以用于uni.openLocation的经纬度
success: function (res) {
var params = {
lat: res.latitude,
lng: res.longitude,
lat: res.latitude,
lng: res.longitude,
};
if(params.lat && params.lng) {
Store.commit('saveLocation', params);
uni.setStorage({ key: 'location', data: params });
} else {
params = uni.getStorageSync('location');
}
if (params.lat && params.lng) {
Store.commit("saveLocation", params);
uni.setStorage({ key: "location", data: params });
} else {
params = uni.getStorageSync("location");
}
callback && callback(1, params);
},
fail: function (res) {
console.log(res)
const params = uni.getStorageSync('location');
console.log(res);
const params = uni.getStorageSync("location");
callback && callback(0, params);
},
});
},
// 获取店铺信息
getShopInfo(params) {
return uni.$u.http.get('/weixin/getShop', { params })
.then((res) => {
// console.log("get shop:"+JSON.stringify(res.data.data));
if (res.data.code == 200) {
Store.commit('saveShopInfo', res.data.data);
uni.setStorage({ key: 'shopData', data: res.data.data });
if (res.data.data) {
$EventBus.$emit('getMenuList', res.data.data);
}
}
return res;
}).catch((err) => {
console.log("get shop error");
return err;
});
return uni.$u.http
.get("/weixin/getShop", { params })
.then((res) => {
// console.log("get shop:"+JSON.stringify(res.data.data));
if (res.data.code == 200) {
Store.commit("saveShopInfo", res.data.data);
uni.setStorage({ key: "shopData", data: res.data.data });
if (res.data.data) {
$EventBus.$emit("getMenuList", res.data.data);
}
}
return res;
})
.catch((err) => {
console.log("get shop error");
return err;
});
},
uniLogin(res, callback) {
uni.login({
provider: 'weixin',
provider: "weixin",
success: function (data) {
// 传给后台接口所需登录数据
uni.$u.http
.post('/weixin/login', {
.post("/weixin/login", {
code: data.code,
source: 3,
iv: res.iv,
encryptedData: res.encryptedData,
})
.then((res) => {
console.log(res,'resssssssss')
console.log(res, "resssssssss");
const { statusCode, data } = res;
const { code, token, phoneNumber } = data;
if (statusCode == 200 && data && code == 200) {
uni.setStorage({ key: 'Authorization', data: token });
uni.setStorage({ key: 'phoneNumber', data: phoneNumber });
uni.setStorage({ key: 'userInfo', data: data });
Store.commit('setUserInfo', data);
Store.commit('setAuthorization', token);
if(callback)
callback();
uni.setStorage({ key: "Authorization", data: token });
uni.setStorage({ key: "phoneNumber", data: phoneNumber });
uni.setStorage({ key: "userInfo", data: data });
Store.commit("setUserInfo", data);
Store.commit("setAuthorization", token);
if (callback) callback();
}
})
.catch((err) => {
......@@ -81,191 +82,201 @@ export default {
});
},
getOpenId(res) {
return uni.$u.http.post('/weixin/login', {code:res })
return uni.$u.http.post("/weixin/login", { code: res });
},
getAuthorization(phoneNumber) {
uni.$u.http.post('/weixin/refreshToken ', { phoneNumber }).then((res) => {
uni.$u.http.post("/weixin/refreshToken ", { phoneNumber }).then((res) => {
const { data } = res;
uni.setStorage({ key: 'Authorization', data: data.token });
Store.commit('setAuthorization', data.token);
context.showToast({ title: '登录成功！' });
uni.setStorage({ key: "Authorization", data: data.token });
Store.commit("setAuthorization", data.token);
context.showToast({ title: "登录成功！" });
});
},
wxLoginAndGetOpenid(loding, updata) {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: (res) => {
const code = res.code
if(code){
this.getOpenId(code).then((res)=>{
const loginInfo = res.data.msg
uni.setStorageSync('loginInfo',loginInfo)
resolve(loginInfo)
})
}
}
})
})
return new Promise((resolve, reject) => {
uni.login({
provider: "weixin",
success: (res) => {
const code = res.code;
if (code) {
this.getOpenId(code).then((res) => {
const loginInfo = res.data.msg;
uni.setStorageSync("loginInfo", loginInfo);
resolve(loginInfo);
});
}
},
});
});
},
loginDecrypt(res){
const {faceInfoId} = res
return uni.$u.http.post('/weixin/decrypt ', {
session_key:res.loginInfo.session_key,
openId:res.loginInfo.openid,
encryptedData:res.data,
iv:res.iv,
loginDecrypt(res) {
const { faceInfoId } = res;
return uni.$u.http.post("/weixin/decrypt ", {
session_key: res.loginInfo.session_key,
openId: res.loginInfo.openid,
encryptedData: res.data,
iv: res.iv,
faceInfoId,
source:3
})
source: 3,
});
},
// 手机号授权登录
getPhoneNumber(res, callback) {
uni.setStorage({ key: 'userPhoneInfo', data: res });
Store.commit('setUserPhoneInfo', res);
uni.setStorage({ key: 'phoneInfo', data: res });
const loginInfo = res.loginInfo
const iv = res.detail.iv
const data = res.detail.encryptedData
const faceInfoId = res.faceInfoId
uni.setStorage({ key: "userPhoneInfo", data: res });
Store.commit("setUserPhoneInfo", res);
uni.setStorage({ key: "phoneInfo", data: res });
const loginInfo = res.loginInfo;
const iv = res.detail.iv;
const data = res.detail.encryptedData;
const faceInfoId = res.faceInfoId;
// data.faceInfoId = String(res.faceInfoId)
// if(res.faceInfoId){
// data.faceInfoId = res.faceInfoId
// }
wx.checkSession({
success: (res) => {
console.log('seeion未过期')
this.onLogin(loginInfo,iv,data,faceInfoId,callback)
},
fail: (res) => {
console.log('seeion已过期')
this.wxLoginAndGetOpenid(true).then(loginInfo => {
this.onLogin(loginInfo,iv,data,faceInfoId,callback)
})
}
})
wx.checkSession({
success: (res) => {
console.log("seeion未过期");
this.onLogin(loginInfo, iv, data, faceInfoId, callback);
},
fail: (res) => {
console.log("seeion已过期");
this.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.onLogin(loginInfo, iv, data, faceInfoId, callback);
});
},
});
},
// 首页调用发送优惠券接口
sendUserCoupon(data) {
return uni.$u.http
.post('/v1/issue/user/coupon', data)
return uni.$u.http
.post("/v1/issue/user/coupon", data)
.then((res) => {
Store.commit('setMenuOption', {});
Store.commit("setMenuOption", {});
return res;
})
.catch((err) => {
context.showToast({
title: '服务器错误',
icon: 'none',
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
Store.commit('setMenuOption', {});
Store.commit("setMenuOption", {});
return err;
});
},
// 获取用户信息
getUserInfo(data) {
return uni.$u.http
.get(`/system/customer/detail`, {})
.then((res) => {
console.log(res,data)
const { birthday, createTime, id, phone, sex, userName, avatarUrl } = res.data.data
const {avatarUrl:localAvatarUrl} = uni.getStorageSync('UserInfo')
const sendData = {
...data,
avatarUrl: avatarUrl||localAvatarUrl,
sex: sex?1:0,
customerName:userName,
phone: phone.substr(0,3) + "****" + phone.substr(7),
id:id
}
if(!birthday){
sendData.canEditBirthday = true
sendData.birthday = new Date(createTime.replace(/-/g,'/')).valueOf()
}else{
sendData.canEditBirthday = false
sendData.birthday = Date.parse(birthday)
}
Store.commit('setUserInfo', sendData);
uni.setStorageSync('UserInfo',sendData)
const MenuOption = Store.state.user.menuOption
if(JSON.stringify(MenuOption)!=='{}') {
const {num,serial_no,source} = MenuOption
const sendDataOption = {
phone:sendData.phoneNumber,
user_id:sendData.id,
source:source,
param:JSON.stringify({
serial_no,
num
})
}
this.sendUserCoupon(sendDataOption)
}
})
.catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' });
});
.get(`/system/customer/detail`, {})
.then((res) => {
console.log(res, data);
const { birthday, createTime, id, phone, sex, userName, avatarUrl } =
res.data.data;
const { avatarUrl: localAvatarUrl } = uni.getStorageSync("UserInfo");
const sendData = {
...data,
avatarUrl: avatarUrl || localAvatarUrl,
sex: sex ? 1 : 0,
customerName: userName,
phone: phone.substr(0, 3) + "****" + phone.substr(7),
id: id,
};
if (!birthday) {
sendData.canEditBirthday = true;
sendData.birthday = new Date(createTime.replace(/-/g, "/")).valueOf();
} else {
sendData.canEditBirthday = false;
sendData.birthday = Date.parse(birthday);
}
Store.commit("setUserInfo", sendData);
uni.setStorageSync("UserInfo", sendData);
const MenuOption = Store.state.user.menuOption;
if (JSON.stringify(MenuOption) !== "{}") {
const { num, serial_no, source } = MenuOption;
const sendDataOption = {
phone: sendData.phoneNumber,
user_id: sendData.id,
source: source,
param: JSON.stringify({
serial_no,
num,
}),
};
this.sendUserCoupon(sendDataOption);
}
})
.catch((err) => {
context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
},
onLogin(loginInfo,iv,data,faceInfoId,callback) {
this.loginDecrypt({loginInfo:JSON.parse(loginInfo),faceInfoId,iv,data}).then(res => {
const { statusCode, data } = res;
const { code, token, phoneNumber } = data;
if (statusCode == 200 && data && code == 200) {
console.log(token,'-------token')
uni.setStorage({ key: 'Authorization', data: token });
uni.setStorage({ key: 'phoneNumber', data: phoneNumber });
uni.setStorage({ key: 'userInfo', data: data });
Store.commit('setUserInfo', data);
Store.commit('setAuthorization', token);
this.getUserInfo(data)
if(callback)
return callback();
}
}).catch((err) => {
context.showToast({
title: err.msg,
});
});
onLogin(loginInfo, iv, data, faceInfoId, callback) {
this.loginDecrypt({
loginInfo: JSON.parse(loginInfo),
faceInfoId,
iv,
data,
})
.then((res) => {
const { statusCode, data } = res;
const { code, token, phoneNumber } = data;
if (statusCode == 200 && data && code == 200) {
console.log(token, "-------token");
uni.setStorage({ key: "Authorization", data: token });
uni.setStorage({ key: "phoneNumber", data: phoneNumber });
uni.setStorage({ key: "userInfo", data: data });
Store.commit("setUserInfo", data);
Store.commit("setAuthorization", token);
this.getUserInfo(data);
if (callback) return callback();
}
})
.catch((err) => {
context.showToast({
title: err.msg,
});
});
},
setAllow(params) {
return uni.$u.http
.post('/system/customer/allow', params)
.post("/system/customer/allow", params)
.then((res) => {
return res;
})
.catch((err) => {
const {data} = err
const {msg} = data
context.showToast({ title: msg, icon: 'none' });
return err
const { data } = err;
const { msg } = data;
context.showToast({ title: msg, icon: "none" });
return err;
});
},
// 获取用户订阅消息
getUserMsgInfo(params) {
return uni.$u.http
.get('/system/customer/detail')
.then((res) => {
return res;
})
.catch((err) => {
const {data} = err
const {msg} = data
context.showToast({ title: msg, icon: 'none' });
return err
});
return uni.$u.http
.get("/system/customer/detail")
.then((res) => {
return res;
})
.catch((err) => {
const { data } = err;
const { msg } = data;
context.showToast({ title: msg, icon: "none" });
return err;
});
},
// 获取用户优惠券数量
getCouponNum(params) {
return uni.$u.http
.get('/app/homepage/coupon-count')
.then((res) => {
return res;
})
.catch((err) => {
const {data} = err
const {msg} = data
context.showToast({ title: msg, icon: 'none' });
return err
});
}
return uni.$u.http
.get("/app/homepage/coupon-count")
.then((res) => {
return res;
})
.catch((err) => {
const { data } = err;
const { msg } = data;
context.showToast({ title: msg, icon: "none" });
return err;
});
},
};
utils/utils.js
import Config from '../static/config/index.js';
import WXBizDataCrypt from './WXBizDataCrypt.js';
import context from '../main.js'
import { $EventBus } from './EventBus';
import Config from "../static/config/index.js";
import WXBizDataCrypt from "./WXBizDataCrypt.js";
import context from "../main.js";
import { $EventBus } from "./EventBus";
export default {
// 组装提交订单数据
......@@ -19,7 +19,7 @@ export default {
realAmount: item.sku.discount * item.num, //实付金额
amount: item.sku.price * item.num, //总价格
specRuleDetail: JSON.stringify(item.sku.rules), //规格选项详情
specRuleIds: item.sku.rules.map((item) => item.ruleId).join(','), //规格选项详情
specRuleIds: item.sku.rules.map((item) => item.ruleId).join(","), //规格选项详情
skuId: item.skuId, //"sku ID"
goodsCategory: item.categoryId, //商品分类
};
......@@ -38,30 +38,32 @@ export default {
return DAta;
} else {
context.showToast({
title: '请选择商品',
title: "请选择商品",
});
}
},
// 加入购物车数据
async getallNum(Obj, unCheckCount) {
console.log(Obj);
let shopCarInfo = uni.getStorageSync('shopCarInfo') || [];
let shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
let size = 0;
shopCarInfo.forEach((item) => (size += item.num));
if(!unCheckCount) {
let countOfOrder = uni.getStorageSync('countOfOrder') || 9;
if (size >= countOfOrder) {
context.showToast({
title: '最多可一次购买'+countOfOrder+'杯',
icon: 'none',
});
return false;
}
}
if (!unCheckCount) {
let countOfOrder = uni.getStorageSync("countOfOrder") || 9;
if (size >= countOfOrder) {
context.showToast({
title: "一次最多可购买" + countOfOrder + "杯",
icon: "none",
});
return false;
}
}
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) {
currentGoods.num += Obj.num;
} else {
......@@ -71,8 +73,8 @@ export default {
shopCarInfo = [Obj];
}
console.log(Obj);
uni.setStorageSync('shopCarInfo', shopCarInfo);
$EventBus.$emit('updateCar');
uni.setStorageSync("shopCarInfo", shopCarInfo);
$EventBus.$emit("updateCar");
// if (callback) {
// callback();
// }
......@@ -82,11 +84,11 @@ export default {
let goodsList = [];
let size = 0;
goodsList.forEach((item) => (size += item.num));
let countOfOrder = uni.getStorageSync('countOfOrder');
let countOfOrder = uni.getStorageSync("countOfOrder");
if (size >= countOfOrder) {
context.showToast({
title: '最多可一次购买'+countOfOrder+'杯',
icon: 'none',
title: "一次最多可购买" + countOfOrder + "杯",
icon: "none",
});
return false;
}
......@@ -102,7 +104,7 @@ export default {
} else {
goodsList = [Obj];
}
uni.setStorageSync('goodsList', goodsList);
uni.setStorageSync("goodsList", goodsList);
},
// 解密手机
......@@ -123,16 +125,16 @@ export default {
});
} else {
context.showToast({
title: '二维码错误',
icon: 'none',
title: "二维码错误",
icon: "none",
});
}
}
},
fail() {
context.showToast({
icon: 'none',
title: '扫码失败',
icon: "none",
title: "扫码失败",
});
},
});
......@@ -141,40 +143,57 @@ export default {
var date = new Date();
date.setTime(value);
var month = date.getMonth() + 1;
if (month < 10) month = '0' + month;
if (month < 10) month = "0" + month;
var cdate = date.getDate();
if (cdate < 10) cdate = '0' + cdate;
if (cdate < 10) cdate = "0" + cdate;
var hours = date.getHours();
if (hours < 10) hours = '0' + hours;
if (hours < 10) hours = "0" + hours;
var minutes = date.getMinutes();
if (minutes < 10) minutes = '0' + minutes;
var time = date.getFullYear() + '-' + month + '-' + cdate + ' ' + hours + ':' + minutes;
if (minutes < 10) minutes = "0" + minutes;
var time =
date.getFullYear() +
"-" +
month +
"-" +
cdate +
" " +
hours +
":" +
minutes;
return time;
},
numberFixed(data, fixed = 2) {
if (data == undefined) {
return undefined;
} else if (data == 0) {
return '0';
return "0";
} 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);
}
},
isInteger(value) {
return parseFloat(Number(value).toFixed(2))
return parseFloat(Number(value).toFixed(2));
},
// 计算经纬度之间的距离
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
getDistances(lat1, lng1, lat2, lng2) {
function rad(d) {
return d * Math.PI / 180.0;
return (d * Math.PI) / 180.0;
}
var radLat1 = rad(lat1);
var radLat2 = rad(lat2);
var a = radLat1 - radLat2;
var b = rad(lng1) - rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
var s =
2 *
Math.asin(
Math.sqrt(
Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
)
);
s = s * 6378.137; // EARTH_RADIUS;
// 输出为公里
s = Math.round(s * 10000) / 10000;
......@@ -183,11 +202,11 @@ export default {
var distance_str = "";
if (parseInt(distance) >= 1) {
// distance_str = distance.toFixed(1) + "km";
distance_str = distance.toFixed(2) + "km";
// distance_str = distance.toFixed(1) + "km";
distance_str = distance.toFixed(2) + "km";
} else {
// distance_str = distance * 1000 + "m";
distance_str = (distance * 1000).toFixed(2) + "m";
// distance_str = distance * 1000 + "m";
distance_str = (distance * 1000).toFixed(2) + "m";
}
//s=s.toFixed(4);
......@@ -195,13 +214,13 @@ export default {
// console.info('距离是', s);
// console.info('距离是', distance_str);
// return s;
//小小修改，这里返回对象
let objData = {
distance: distance,
distance_str: distance_str
}
return objData
distance: distance,
distance_str: distance_str,
};
return objData;
},
// 单位转换
getPx(rpx) {
......@@ -211,23 +230,23 @@ export default {
},
// 返回上一页
goBack() {
wx.navigateBack({
delta: 1
});
},
wx.navigateBack({
delta: 1,
});
},
// 解析url参数
getUrlParams2(url) {
// 通过 ? 分割获取后面的参数字符串
let urlStr = url.split('?')[1]
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split('&')
for(let i = 0,len = paramsArr.length;i < len;i++){
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split('=')
obj[arr[0]] = arr[1];
}
return obj
}
let urlStr = url.split("?")[1];
// 创建空对象存储参数
let obj = {};
// 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split("&");
for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split("=");
obj[arr[0]] = arr[1];
}
return obj;
},
};
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