Skip to content

U
user
Commit 55374e15 by 宋冰琦
Options

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

parent 546e7ac8
Showing with 7165 additions and 6294 deletions
components/menuAssembly/index.vue
<template> <template>
<view class="page-body"> <view class="page-body">
<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation> <scroll-view
<view class="nav-left-item" v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id" class="nav-left"
:class="item.id == categoryId ? 'active' : ''" :style="[scrollBottom]"> :style="[heightStyle]"
<view class="imgbox" v-if="item.icon&&sizeList[index].width"> :class="[shopCarFlag ? 'shopCarcss' : '']"
<image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.icon"/> scroll-y
</view> :scroll-top="scrollLeftTop"
<view :style="{'margin-top':'4rpx'}"><span>{{ item.name }}</span></view> scroll-with-animation
<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> --> >
</view> <view
</scroll-view> class="nav-left-item"
<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll" v-for="(item, index) in classifyData"
scroll-with-animation> @click="categoryClickMain(item.id)"
<view v-for="(category,index) in classifyData" :id="category.id" :key="category.id" class="box" :style="[goodBottom,scrollBottom]"> :key="item.id"
<view :style="loads" class="right-title">{{ category.name }}</view> :class="item.id == categoryId ? 'active' : ''"
<view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId"> :style="[scrollBottom]"
<view class="thumbnailBox"> >
<!-- <image src="/static/imgs/aixin.png" v-if="item.isRecommend == 1" class="isRecommend" /> --> <view class="imgbox" v-if="item.icon && sizeList[index].width">
<image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" /> <image
<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" /> :style="{
</view> height: sizeList[index].height + 'rpx',
<view @click="cart(item, category)" class="info"> width: sizeList[index].width + 'rpx',
<view class="goods-name">{{ item.name }}</view> }"
<view class="tags" v-if="item.tags"> :src="item.icon"
<view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view> />
</view> </view>
<view class="desc-box"> <view :style="{ 'margin-top': '4rpx' }"
<view class="desc">{{ item.desc || '' }}</view> ><span>{{ item.name }}</span></view
</view> >
<view class="mon"> <!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
<view class="priceBox"> </view>
<view class="discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(getSku(item).discount) }}</view> </scroll-view>
<view class="price" v-if="getSku(item).price!=getSku(item).discount">￥<text class="num">{{ Utils.isInteger(getSku(item).price) }}</text></view> <scroll-view
</view> class="nav-right"
<view class="addbox" v-if="shopState&&isInRange"> :style="[heightStyle]"
<image v-if="getSku(item).state==1" @click.stop="cart(item, category)" class="add" :src="'../../static/imgs/jiahao.png'" /> :class="[shopCarFlag ? 'shopCarcss' : '']"
<!-- <u-icon class="add" name="plus-circle-fill" color="#0050F6" @click.stop="getallNum(item, category)" size="22"></u-icon> --> scroll-y
<div v-if="getSku(item).state!=1" style="color: #858585;font-size: 20rpx;margin-top:16rpx">已售罄</div> :scroll-top="scrollTop"
</view> @scroll="scroll"
</view> @touchstart="openScroll"
</view> scroll-with-animation
</view> >
</view> <view
</scroll-view> v-for="(category, index) in classifyData"
<show-toast ref="toast"/> :id="category.id"
</view> :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> </template>
<script> <script>
import { $EventBus } from "../../utils/EventBus"; import { $EventBus } from "../../utils/EventBus";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import Order from '@/request/order' import Order from "@/request/order";
export default { export default {
name: 'menuAssembly', name: "menuAssembly",
props:['buied','shopState','isInRange'], props: ["buied", "shopState", "isInRange"],
data() { data() {
return { return {
scrollBottom: { scrollBottom: {
'--scroll-marginbottom': 0 "--scroll-marginbottom": 0,
}, },
heightStyle: { heightStyle: {
'--scroll-height': 0 "--scroll-height": 0,
}, },
goodBottom: { goodBottom: {
'--good-bottom':0 "--good-bottom": 0,
}, },
Utils, Utils,
categoryId: '', categoryId: "",
categoryPostion: [], categoryPostion: [],
scrollLeftTop: 0, scrollLeftTop: 0,
scrollTop: 0, scrollTop: 0,
scrolled: true, scrolled: true,
goods:[], goods: [],
shopCarFlag:false, shopCarFlag: false,
taBarHeight:0, taBarHeight: 0,
lastNumber:0, lastNumber: 0,
width:0, width: 0,
sizeList:[] sizeList: [],
} };
}, },
watch:{ watch: {
isInRange(val) { isInRange(val) {
if(!val) { if (!val) {
this.scrollBottom['--scroll-marginbottom'] = 131+'rpx' this.scrollBottom["--scroll-marginbottom"] = 131 + "rpx";
}else{ } else {
this.scrollBottom['--scroll-marginbottom'] = 0+'rpx' this.scrollBottom["--scroll-marginbottom"] = 0 + "rpx";
} }
}, },
shopState(val) { shopState(val) {
if(!val) { if (!val) {
this.scrollBottom['--scroll-marginbottom'] = 131+'rpx' this.scrollBottom["--scroll-marginbottom"] = 131 + "rpx";
}else{ } else {
this.scrollBottom['--scroll-marginbottom'] = 0+'rpx' this.scrollBottom["--scroll-marginbottom"] = 0 + "rpx";
} }
}, },
goods(val){ goods(val) {
this.shopCarFlag = val.length>0 this.shopCarFlag = val.length > 0;
}, },
buied(val) { buied(val) {
if(val){ if (val) {
this.heightStyle['--scroll-height'] = (this.taBarHeight+122)+'rpx' this.heightStyle["--scroll-height"] = this.taBarHeight + 122 + "rpx";
this.initScroll() 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{ // console.log(val)
this.heightStyle['--scroll-height'] = (this.taBarHeight+22)+'rpx' // if(val.length==2){
} // this.sizeList[index] = {
} // width:val[1].width,
}, // height:val[1].height
computed:{ // }
classifyData(){ // }
this.scrollTop = 0 },
let categorys = this.$store.state.menu.setMenuCategorys.length!=0?JSON.parse(JSON.stringify(this.$store.state.menu.setMenuCategorys)):[] getSku(data) {
// if(categorys.length!=0){ const { skus } = data;
// const lastGood = 1 if (!skus || skus.length == 0) {
// this.lastNumber = lastGood<=2?3-lastGood:0 return { discount: data.discount, price: data.price };
// this.goodBottom['--good-bottom'] = ((this.lastNumber*50))+'px' }
// console.log(this.lastNumber) const sku =
// } data.skus.find((v) => v.isDefault == 1 && v.state == 1) ||
// 删除没有商品的分类 data.skus.find((v) => v.state == 1) ||
if(categorys) { data.skus.find((v) => v.isDefault == 1) ||
for(var i=categorys.length-1; i>=0; i--) { data.skus[0];
var category = categorys[i]; return sku;
if(!category.goods || category.goods.length<=0) { },
categorys.splice(i, 1); createList(data) {
} // this.classifyData = data;
} // console.log(this.classifyData);
if(categorys.length>0){ // // 删除没有商品的分类
this.categoryId = categorys[0].id; // if(this.classifyData) {
} // for(var i=this.classifyData.length-1; i>=0; i--) {
} // var category = this.classifyData[i];
this.initScroll() // if(!category.goods || category.goods.length<=0) {
// console.log(categorys) // this.classifyData.splice(i, 1);
// 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':'' // if(this.classifyData.length>0){
// categorys.map((item,index)=>{ // this.categoryId = this.classifyData[0].id;
// this.imagesHeight(item.src,index) // }
// }) // }
if(categorys.length!=0)this.imagesHeight(categorys) // this.$nextTick(() => {
return categorys // const query = uni.createSelectorQuery().in(this);
} // query.selectAll('.box').boundingClientRect(data => {
}, // this.categoryPostion = data
created() { // }).exec();
$EventBus.$off('updateCar'); // })
}, },
mounted(){ getallNum(item, category) {
this.$nextTick(()=>{ this.$emit("getallNum", item, category);
this.taBarHeight = uni.getStorageSync('taBarHeight') },
this.heightStyle['--scroll-height'] = (this.taBarHeight+44)+'rpx' openScroll() {
}) this.scrolled = true;
this.goods = uni.getStorageSync('shopCarInfo') || []; },
$EventBus.$on('updateCar', () => { scroll(e) {
this.goods = uni.getStorageSync('shopCarInfo') || []; if (!this.scrolled) return;
}); const { categoryPostion } = this;
}, let otherHeight = 0;
methods: { if (this.buied) {
initScroll() { otherHeight = 320;
this.scrollLeftTop = 0 } else {
this.scrollTop = 0 otherHeight = 270;
const timer = setTimeout(() => { }
this.$nextTick(() => { if (this.shopCarFlag) {
const query = uni.createSelectorQuery().in(this); otherHeight += 100;
query.selectAll('.box').boundingClientRect(data => { } else {
console.log(data,'data') otherHeight += 0;
this.categoryPostion = data }
clearTimeout(timer) const el = categoryPostion.filter((item) => {
}).exec(); return item.top <= e.target.scrollTop + otherHeight;
}) });
}, 1000); console.log(
}, el[el.length - 1],
async imagesHeight(list,index) { "-------------------",
// return e.target.scrollTop + otherHeight,
let i = 0 otherHeight
const newList = list.map(item=>{ );
return '' if (el[el.length - 1]) this.categoryId = el[el.length - 1].id;
}) },
const func = async () => { categoryClickMain(id) {
if(list[i].icon){ this.scrolled = false;
const val = await uni.getImageInfo({ this.categoryId = id;
src: list[i].icon this.categoryPostion.forEach((item) => {
}) if (item.id == id) {
let w = val[1].width this.scrollTop = this.buied ? item.top - 320 : item.top - 270;
let h = val[1].height }
if(w>80){ });
w = 80 },
} async cart(item, category) {
if(h>60){ console.log(item, category);
h = 60 const skuStatus = item.skus.filter((item) => {
} return Number(item.state) === 1 && item.isDelete === 0;
newList[i] = { });
width:w,
height:h
}
}
i++
if(i<newList.length){
func()
}else{
this.sizeList = newList
}
}
func()
// console.log(val) if (skuStatus.length === 0) {
// if(val.length==2){ this.showToast({
// this.sizeList[index] = { title: "此商品已售罄",
// width:val[1].width, icon: "none",
// height:val[1].height });
// } } else {
// } if (this.shopState && this.isInRange) {
}, const { data } = await Order.checkSku({ skuId: skuStatus[0].skuId });
getSku(data) { const { goods } = data.data;
const { skus } = data; uni.setStorageSync(
if (!skus || skus.length == 0) { "goodsInfo",
return { discount: data.discount, price: data.price}; JSON.stringify({ ...goods, category })
} );
const sku = data.skus.find(v => v.isDefault == 1 && v.state == 1) } else {
|| data.skus.find(v => v.state == 1) uni.setStorageSync(
|| data.skus.find(v => v.isDefault == 1) "goodsInfo",
|| data.skus[0]; JSON.stringify({ ...item, category })
return sku; );
}, }
createList(data) { uni.navigateTo({
// this.classifyData = data; url: "/menuSubPackage/pages/goodsDetail/goodsDetail",
// 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' })
}
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-body { .page-body {
display: flex; display: flex;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
} }
.nav { .nav {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.nav-left { .nav-left {
box-sizing: border-box; box-sizing: border-box;
width: 164rpx; width: 164rpx;
background: #fff; background: #fff;
border-right: 2rpx solid #F0F0F0; border-right: 2rpx solid #f0f0f0;
height: calc(100vh - var(--scroll-height)); height: calc(100vh - var(--scroll-height));
overflow-y: auto; overflow-y: auto;
// background: var(--header-color); // background: var(--header-color);
} }
.nav-left-item { .nav-left-item {
position: relative; position: relative;
height: 145rpx; height: 145rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
.imgbox { .imgbox {
// margin-top: 21.8rpx; // margin-top: 21.8rpx;
// border: 1px solid red; // border: 1px solid red;
width: 80rpx; width: 80rpx;
height: 60rpx; height: 60rpx;
line-height: 60rpx; line-height: 60rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
} }
.active { .active {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
background: #FFFFFF; background: #ffffff;
font-size: 24rpx; font-size: 24rpx;
background: #fff; background: #fff;
border-right: 4rpx solid #0050F6; border-right: 4rpx solid #0050f6;
} }
.nav-left-item:last-child { .nav-left-item:last-child {
margin-bottom: var(--scroll-marginbottom); margin-bottom: var(--scroll-marginbottom);
border-bottom: none; border-bottom: none;
} }
.nav-right { .nav-right {
box-sizing: border-box; box-sizing: border-box;
height: calc(100vh - var(--scroll-height)); height: calc(100vh - var(--scroll-height));
overflow: auto; overflow: auto;
width: 585.21rpx; width: 585.21rpx;
// padding-top: 42rpx; // padding-top: 42rpx;
} }
.buiedcss{ .buiedcss {
height: calc(100vh - 376rpx - 183rpx); height: calc(100vh - 376rpx - 183rpx);
} }
.shopCarcss{ .shopCarcss {
padding-bottom: 100rpx; padding-bottom: 100rpx;
} }
.box { .box {
display: block; display: block;
overflow: hidden; overflow: hidden;
/* min-height: 100vh; */ /* min-height: 100vh; */
/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */ /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
} }
.box:last-child { .box:last-child {
border: none; border: none;
// min-height: 100vh; // min-height: 100vh;
} }
.right-title { .right-title {
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
padding-left: 32rpx; padding-left: 32rpx;
margin-bottom: 25rpx; margin-bottom: 25rpx;
height: 44rpx; height: 44rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 44rpx; line-height: 44rpx;
} }
.nav-right-item { .nav-right-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0rpx 32rpx 0rpx 32rpx; padding: 0rpx 32rpx 0rpx 32rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
background: #fff; background: #fff;
position: relative; position: relative;
.thumbnailBox{ .thumbnailBox {
position: relative; position: relative;
.isRecommend { .isRecommend {
position: absolute; position: absolute;
width: 22.46rpx; width: 22.46rpx;
height: 22.46rpx; height: 22.46rpx;
top: 28rpx; top: 28rpx;
right: 24rpx right: 24rpx;
} }
.thumbnail { .thumbnail {
//缩略图 //缩略图
// max-width: 160rpx; // max-width: 160rpx;
// max-height: 160rpx; // max-height: 160rpx;
// margin-top: -2rpx; // margin-top: -2rpx;
vertical-align: bottom; 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 { .desc-box {
flex: 1; display: flex;
margin-left: 24rpx; font-size: 20rpx;
font-weight: 400;
color: #666666;
margin-top: 14rpx;
height: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
.goods-name { .desc {
font-family: PingFangSC-Medium, PingFang SC; flex: 1;
font-size: 28rpx; vertical-align: top;
height: 40rpx; line-height: 26rpx;
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;
}
}
}
}
.sellNull{ .mon {
position: absolute; height: 40rpx;
right: 32rpx; display: flex;
top: 0rpx; 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 { .box:first-child {
margin-top: 40rpx; margin-top: 40rpx;
} }
.box:last-child{ .box:last-child {
// padding-bottom: var(--good-bottom); // padding-bottom: var(--good-bottom);
padding-bottom: 200rpx; padding-bottom: 200rpx;
// height: 100%; // height: 100%;
} }
.nav-right-item image { .nav-right-item image {
width: 150rpx; width: 150rpx;
height: 150rpx; height: 150rpx;
} }
.box:last-child { .box:last-child {
margin-bottom: var(--scroll-marginbottom); margin-bottom: var(--scroll-marginbottom);
border-bottom: none; border-bottom: none;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
/*取消小程序的默认导航条样式*/ /*取消小程序的默认导航条样式*/
width: 0; width: 0;
height: 0; height: 0;
color: transparent; color: transparent;
} }
</style> </style>
\ No newline at end of file
components/shopCar/shopCar.vue
<template> <template>
<view catchtouchmove="return"> <view catchtouchmove="return">
<u-popup :show="showShopCar && goods.length" mode="bottom" :round="5" :overlay="true" <u-popup
:closeOnClickOverlay="true" @close="closeT" zIndex="10071"> :show="showShopCar && goods.length"
<view class="shop-car" :style="{'padding-bottom':Utils.getPx(bottomPadding)+'px'}"> mode="bottom"
<view class="header"> :round="5"
<text class="left">购物袋</text> :overlay="true"
<text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text> :closeOnClickOverlay="true"
</view> @close="closeT"
<scroll-view scroll-y="true" class="scroll-Y"> zIndex="10071"
<view class="container"> >
<view> <view
<view class="empty" v-if="show == false"> class="shop-car"
<image :src="imgPath" mode="widthFix" style="width: 400rpx;"></image> :style="{ 'padding-bottom': Utils.getPx(bottomPadding) + 'px' }"
<view class="empty-text">空空如也的购物</view> >
<view class="empty-button" @click="goshopping">去选购</view> <view class="header">
</view> <text class="left">购物袋</text>
<view v-if="show == true"> <text class="right" @click="clearCar"
<view class="goods-detail" v-for="(item, index) in goods" :key="index"> ><text class="delete-icon"></text>清空购物车</text
<view class="detail-left"> >
<view class="goods-left"> </view>
<view class="checkBox"> <scroll-view scroll-y="true" class="scroll-Y">
<view class="check" @click="selected(item)" :class="item.flag?'checked':'nochecked'"></view> <view class="container">
</view> <view>
<!-- <u-checkbox-group @change="selected(item)"> <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> <label>
<u-checkbox shape="circle" class="selected" color="#555555" <u-checkbox shape="circle" class="selected" color="#555555"
:checked="item.flag" /> :checked="item.flag" />
</label> </label>
</u-checkbox-group> --> </u-checkbox-group> -->
<view> <view>
<image :src="item.pics.thumbnailApplet || item.pics.thumbnail" <image
style="width: 120rpx;height: 120rpx;margin-top: 4.24rpx"></image> :src="
</view> item.pics.thumbnailApplet || item.pics.thumbnail
</view> "
<view class="size"> style="
<view class="goods-name">{{ item.name }}</view> width: 120rpx;
<view class="goods-skus"> height: 120rpx;
<text v-for="(rl, index) in item.sku.rules" :key="rl.ruleName"> margin-top: 4.24rpx;
{{ rl.ruleName }} "
<text v-if="index != item.sku.rules.length - 1">/</text> ></image>
</text> </view>
</view> </view>
<view class="goods-price"> <view class="size">
<text class="price-discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(item.sku.discount) }}</text> <view class="goods-name">{{ item.name }}</view>
<text class="price-x" v-show="item.sku.price!=item.sku.discount">￥</text> <view class="goods-skus">
<text class="price-xx" v-show="item.sku.price!=item.sku.discount">{{ Utils.isInteger(item.sku.price) }}</text> <text
</view> v-for="(rl, index) in item.sku.rules"
</view> :key="rl.ruleName"
</view> >
<view class="detail-right"> {{ rl.ruleName }}
<view class="subtract" @click="reduce(item, index)"></view> <text v-if="index != item.sku.rules.length - 1"
<text class="num">{{ item.num }}</text> >/</text
<view class="add" @click="add(item)" ></view> >
<!-- <text class="subtract" @click="reduce(item, index)">-</text> --> </text>
<!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> --> </view>
<!-- <text @click="add(item)" class="add">+</text> --> <view class="goods-price">
<!-- <u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> --> <text class="price-discount"
</view> ><text class="moneyLog">￥</text
</view> >{{ Utils.isInteger(item.sku.discount) }}</text
</view> >
</view> <text
</view> class="price-x"
</scroll-view> v-show="item.sku.price != item.sku.discount"
>￥</text
</view> >
<text
</u-popup> class="price-xx"
<view class="end" v-if="goods.length" :style="{'bottom':shopCar+'rpx'}"> v-show="item.sku.price != item.sku.discount"
<view @click.stop="openShopCar" class="end-left"> >{{ Utils.isInteger(item.sku.price) }}</text
<view style="display:flex"> >
<view class="car-img"> </view>
<text class="badge" :animation="animationData" v-if="totalNum" >{{ totalNum }}</text> </view>
</view> </view>
<text class="shopClassStyle">￥{{ Utils.isInteger(totalPrice.toFixed(2)) }}</text> <view class="detail-right">
</view> <view class="subtract" @click="reduce(item, index)"></view>
</view> <text class="num">{{ item.num }}</text>
<view class="end-right goSubmmit" @click="saveReserve" v-if="userms"> <view class="add" @click="add(item)"></view>
结算 <!-- <text class="subtract" @click="reduce(item, index)">-</text> -->
</view> <!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> -->
<!-- <view v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve"> <!-- <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> --> </view> -->
<button v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" <button
@getphonenumber="saveReserve">结算 v-if="!userms"
</button> class="end-right goSubmmit"
</view> style="border-radius: 0"
<view class="shopClose" v-if="!shopState||!isInRange" :style="{'bottom':shopCar+'rpx'}"> open-type="getPhoneNumber"
<view class="content">{{!shopState?"门店已休息":"距离较远，门店暂停接单"}}</view> @getphonenumber="saveReserve"
</view> >
<show-toast ref="toast"/> 结算
</view> </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> </template>
<script> <script>
import { $EventBus } from "../../utils/EventBus"; import { $EventBus } from "../../utils/EventBus";
import Menu from '@/request/menu'; import Menu from "@/request/menu";
import User from '@/request/user'; import User from "@/request/user";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
export default { export default {
props:['shopState','isInRange'], props: ["shopState", "isInRange"],
data() { data() {
return { return {
showShopCar: false,//是否弹出购物车列表 showShopCar: false, //是否弹出购物车列表
show: true, show: true,
allchecked: true, allchecked: true,
// checked:true, // checked:true,
goods: [],//购物车商品信息 goods: [], //购物车商品信息
loginInfo: "", 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', imgPath:
Utils, "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",
shopCar:0, Utils,
BottomSafeHeight:0, shopCar: 0,
bottomPadding:0, BottomSafeHeight: 0,
animation:'', bottomPadding: 0,
animationData: {}, animation: "",
timer:0 animationData: {},
} timer: 0,
}, };
created() { },
$EventBus.$off('updateCar'); created() {
}, $EventBus.$off("updateCar");
mounted() { },
this.animation = uni.createAnimation() mounted() {
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||50 this.animation = uni.createAnimation();
console.log(this.BottomSafeHeight,'this.BottomSafeHeight') this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight") || 50;
this.bottomPadding = 204 console.log(this.BottomSafeHeight, "this.BottomSafeHeight");
this.bottomPadding = 204;
this.shopCar = uni.getStorageSync('shopCar')+5
if(!this.userms){ this.shopCar = uni.getStorageSync("shopCar") + 5;
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ if (!this.userms) {
this.loginInfo = loginInfo User.wxLoginAndGetOpenid(true).then((loginInfo) => {
}) this.loginInfo = loginInfo;
} });
this.goods = uni.getStorageSync('shopCarInfo') || []; }
$EventBus.$on('updateCar', () => { this.goods = uni.getStorageSync("shopCarInfo") || [];
this.goods = uni.getStorageSync('shopCarInfo') || []; $EventBus.$on("updateCar", () => {
}); this.goods = uni.getStorageSync("shopCarInfo") || [];
}, });
},
methods: {
// 切换购物车列表显示隐藏 methods: {
openShopCar() { // 切换购物车列表显示隐藏
this.$nextTick(() => { openShopCar() {
this.showShopCar = !this.showShopCar; this.$nextTick(() => {
}) this.showShopCar = !this.showShopCar;
}, });
},
// 翻转动画
turnAnimation(val) { // 翻转动画
if(this.goods.length>0){ turnAnimation(val) {
this.$nextTick(()=>{ if (this.goods.length > 0) {
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.$nextTick(() => {
this.animationData = this.animation.export() this.animation
this.timer = setTimeout(() => { .opacity(0.5)
this.animation.rotateY(0).step({duration:100}) .step({ duration: 100 })
this.animationData = this.animation.export() .rotateY(90)
clearTimeout(this.timer) .opacity(1)
}, 550); .step({ duration: 200 })
}) .rotateY(30)
} .step({ duration: 50 })
.rotateY(-60)
}, .step({ duration: 100 })
.rotateY(0)
closeT(e) { .step({ duration: 50 });
this.showShopCar = false; this.animationData = this.animation.export();
}, this.timer = setTimeout(() => {
// 清空购物车 this.animation.rotateY(0).step({ duration: 100 });
clearCar() { this.animationData = this.animation.export();
uni.removeStorageSync('shopCarInfo'); clearTimeout(this.timer);
$EventBus.$emit('updateCar'); }, 550);
}, });
// 购物车为空时点击去购物，收起购物袋 }
goshopping() { },
this.showShopCar = false;
}, closeT(e) {
//跳转到结算 this.showShopCar = false;
saveReserve(e) { },
const settleMentFunc = ()=>{ // 清空购物车
if(this.totalPrice < 0 || this.totalNum <= 0) { clearCar() {
this.showToast({ title: '请选择商品', icon: 'error' }) uni.removeStorageSync("shopCarInfo");
return; $EventBus.$emit("updateCar");
} },
let Authorization = uni.getStorageSync('Authorization'); // 购物车为空时点击去购物，收起购物袋
let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v => v.flag == true); goshopping() {
if (shopCarInfo) { this.showShopCar = false;
if (Authorization) { },
uni.navigateTo({ //跳转到结算
url: `/orderSubPackage/pages/settlement/index?buyType=1` saveReserve(e) {
}) const settleMentFunc = () => {
} else { if (this.totalPrice < 0 || this.totalNum <= 0) {
this.loginByPhoneNumber(e) this.showToast({ title: "请选择商品", icon: "error" });
} return;
} }
return; let Authorization = uni.getStorageSync("Authorization");
} let shopCarInfo = uni
uni.authorize({ .getStorageSync("shopCarInfo")
scope: 'scope.userLocation', .filter((v) => v.flag == true);
success: () => { //1.1 允许授权 if (shopCarInfo) {
console.log("允许授权位置"); if (Authorization) {
settleMentFunc() uni.navigateTo({
}, url: `/orderSubPackage/pages/settlement/index?buyType=1`,
fail: (err) => { //1.2 拒绝授权 });
wx.exitMiniProgram({ success: (res) => { } }) } else {
console.log("获取位置失败") this.loginByPhoneNumber(e);
uni.showModal({ }
content: '检测到您没打开地理位置权限，是否去设置打开？', }
confirmText: "确认", return;
cancelText: '取消', };
success: (res) => { uni.authorize({
if (res.confirm) { scope: "scope.userLocation",
uni.openSetting({//opensetting是调起设置页面的 success: () => {
success: (res) => { //1.1 允许授权
console.log(res) console.log("允许授权位置");
if(res.authSetting['scope.userLocation'] == true){//判断res.authsetting的值是true还是false settleMentFunc();
settleMentFunc() },
}else{ fail: (err) => {
// console.log("什么也不做"); //1.2 拒绝授权
} wx.exitMiniProgram({ success: (res) => {} });
} console.log("获取位置失败");
}) uni.showModal({
} else { content: "检测到您没打开地理位置权限，是否去设置打开？",
console.log('取消'); confirmText: "确认",
return false; cancelText: "取消",
} success: (res) => {
} if (res.confirm) {
}) uni.openSetting({
} //opensetting是调起设置页面的
}) success: (res) => {
return console.log(res);
if (res.authSetting["scope.userLocation"] == true) {
}, //判断res.authsetting的值是true还是false
// 付款前未登录发起授权 settleMentFunc();
loginByPhoneNumber(e) { } else {
if (e.detail.errMsg == 'getPhoneNumber:ok') { // console.log("什么也不做");
e.loginInfo = this.loginInfo }
User.getPhoneNumber(e); },
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { });
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) } else {
} console.log("取消");
}, return false;
change(e) { }, }
selected(item) { },
item.flag = !item.flag });
if (!item.flag) { },
this.allchecked = false });
} else { return;
const a = this.goods.filter((item) => { },
return item.flag == true // 付款前未登录发起授权
}) loginByPhoneNumber(e) {
if (a) { if (e.detail.errMsg == "getPhoneNumber:ok") {
this.allchecked = true e.loginInfo = this.loginInfo;
} else { User.getPhoneNumber(e);
this.allchecked = false } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
} this.showToast({
} title: "已拒绝手机号授权，请同意授权",
uni.setStorageSync('shopCarInfo', this.goods); icon: "error",
}, });
selectgoods() { }
this.allchecked = !this.allchecked },
if (this.allchecked) { change(e) {},
this.goods.map(item => { selected(item) {
item.flag = true item.flag = !item.flag;
}) if (!item.flag) {
} else { this.allchecked = false;
this.goods.map(item => { } else {
item.flag = false const a = this.goods.filter((item) => {
}) return item.flag == true;
} });
uni.setStorageSync('shopCarInfo', this.goods); if (a) {
}, this.allchecked = true;
reduce(item, index) { } else {
item.num -= 1 this.allchecked = false;
if (item.num == 0) { }
this.goods.splice(index, 1); }
} uni.setStorageSync("shopCarInfo", this.goods);
uni.setStorageSync('shopCarInfo', this.goods); },
$EventBus.$emit('updateCar'); selectgoods() {
}, this.allchecked = !this.allchecked;
add(item) { if (this.allchecked) {
let s = 0; this.goods.map((item) => {
this.goods.forEach(function (val) { item.flag = true;
s += Number(val.num); });
}, 0); } else {
let countOfOrder = uni.getStorageSync('countOfOrder'); this.goods.map((item) => {
console.log(s , countOfOrder) item.flag = false;
if (s >= countOfOrder) { });
this.showToast({ }
title: '最多可一次购买'+countOfOrder+'杯', uni.setStorageSync("shopCarInfo", this.goods);
icon: 'none' },
}); reduce(item, index) {
return; item.num -= 1;
} if (item.num == 0) {
let num = Number(item.num) this.goods.splice(index, 1);
item.num = num + 1 }
uni.setStorageSync('shopCarInfo', this.goods); uni.setStorageSync("shopCarInfo", this.goods);
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
} },
}, add(item) {
watch: { let s = 0;
totalNum(val){ this.goods.forEach(function (val) {
this.turnAnimation(val) s += Number(val.num);
} }, 0);
}, let countOfOrder = uni.getStorageSync("countOfOrder");
computed: { console.log(s, countOfOrder);
userms() { if (s >= countOfOrder) {
return this.$store.getters.Authorization; this.showToast({
}, title: "一次最多可购买" + countOfOrder + "杯",
totalNum() { icon: "none",
let totalNum = 0; });
this.goods.map(item => { return;
item.flag ? totalNum += parseInt(item.num) : totalNum += 0 }
}) let num = Number(item.num);
return totalNum item.num = num + 1;
}, uni.setStorageSync("shopCarInfo", this.goods);
$EventBus.$emit("updateCar");
totalPrice() { },
let totalPrice = 0; },
this.goods.forEach(item => { watch: {
const sku = item.sku; totalNum(val) {
item.flag ? totalPrice += item.num * sku.discount : totalPrice += 0 this.turnAnimation(val);
}) },
return totalPrice },
} 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> </script>
<style lang="scss"> <style lang="scss">
.shopClassStyle { .shopClassStyle {
color: #000000; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
display: flex; display: flex;
margin-left: 32rpx; margin-left: 32rpx;
letter-spacing: 1rpx; letter-spacing: 1rpx;
align-items: center; align-items: center;
} }
.shop-car { .shop-car {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.header { .header {
padding:34rpx 31.78rpx 34rpx 31.54rpx; padding: 34rpx 31.78rpx 34rpx 31.54rpx;
display: flex; display: flex;
border-bottom: 0.1px solid #F4F4F4; border-bottom: 0.1px solid #f4f4f4;
.left { .left {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.right { .right {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
.delete-icon { .delete-icon {
width: 18rpx; width: 18rpx;
height: 18rpx; height: 18rpx;
background: url(../../static/imgs/icon-delete.png) center center no-repeat; background: url(../../static/imgs/icon-delete.png) center center
background-size: cover; no-repeat;
display: inline-block; background-size: cover;
margin-right: 6rpx; display: inline-block;
} margin-right: 6rpx;
} }
} }
}
.scroll-Y {
max-height: 750rpx; .scroll-Y {
// margin-bottom: 100rpx; max-height: 750rpx;
.container { // margin-bottom: 100rpx;
flex: 1; .container {
} flex: 1;
} }
}
} }
.goods { .goods {
line-height: 80rpx; line-height: 80rpx;
background-color: #FFFFFF; background-color: #ffffff;
&-detail { &-detail {
display: flex; display: flex;
padding: 30rpx 25.87rpx 30rpx 32rpx; padding: 30rpx 25.87rpx 30rpx 32rpx;
background-color: #fff; background-color: #fff;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.detail-left { .detail-left {
display: flex; display: flex;
height: 128rpx; height: 128rpx;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.goods-left { .goods-left {
display: flex; display: flex;
align-items: center; align-items: center;
.checkBox{ .checkBox {
margin-right: 32rpx; margin-right: 32rpx;
width: 40rpx; width: 40rpx;
display: flex; display: flex;
margin-top: 6rpx; margin-top: 6rpx;
align-items: center; align-items: center;
height: 100%; height: 100%;
.check{ .check {
width: 100%; width: 100%;
height: 40rpx; height: 40rpx;
} }
.checked{ .checked {
background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat; background: url("../../static/imgs/duigouxuanzhong.png") center
background-size:100% 100%; center no-repeat;
} background-size: 100% 100%;
.nochecked{ }
background: url('../../static/imgs/weixuanzhong.png') center center no-repeat; .nochecked {
background-size:100% 100%; background: url("../../static/imgs/weixuanzhong.png") center center
} no-repeat;
} background-size: 100% 100%;
} }
} }
}
.size { }
margin-left: 30rpx;
.goods-name{ .size {
height: 40rpx; margin-left: 30rpx;
font-size: 28rpx; .goods-name {
font-family: PingFangSC-Medium, PingFang SC; height: 40rpx;
padding-top: 5rpx; font-size: 28rpx;
font-weight: 500; font-family: PingFangSC-Medium, PingFang SC;
color: #333333; padding-top: 5rpx;
line-height: 40rpx; font-weight: 500;
} color: #333333;
line-height: 40rpx;
.goods-skus { }
margin-top: 4rpx;
height: 22rpx; .goods-skus {
font-size: 20rpx; margin-top: 4rpx;
font-family: PingFangSC-Regular, PingFang SC; height: 22rpx;
font-weight: 400; font-size: 20rpx;
color: #999999; font-family: PingFangSC-Regular, PingFang SC;
line-height: 26rpx; font-weight: 400;
} color: #999999;
line-height: 26rpx;
.goods-price { }
margin-top: 28rpx;
.goods-price {
.moneyLog { margin-top: 28rpx;
height: 38rpx;
font-size: 24rpx; .moneyLog {
font-family: Futura-Medium, Futura; height: 38rpx;
font-weight: 500; font-size: 24rpx;
color: #333333; font-family: Futura-Medium, Futura;
line-height: 30rpx; font-weight: 500;
} color: #333333;
line-height: 30rpx;
.price-discount{ }
height: 38rpx;
font-size: 28rpx; .price-discount {
font-family: Futura-Medium, Futura; height: 38rpx;
font-weight: 500; font-size: 28rpx;
color: #333333; font-family: Futura-Medium, Futura;
line-height: 30rpx; font-weight: 500;
} color: #333333;
.price-x { line-height: 30rpx;
margin-left: 4.2rpx; }
font-size: 20rpx; .price-x {
font-family: ArialMT; margin-left: 4.2rpx;
line-height: 22rpx; font-size: 20rpx;
color: #999999; font-family: ArialMT;
} line-height: 22rpx;
color: #999999;
.price-xx { }
text-decoration: line-through;
height: 22rpx; .price-xx {
font-size: 20rpx; text-decoration: line-through;
font-family: ArialMT; height: 22rpx;
color: #999999; font-size: 20rpx;
line-height: 22px; font-family: ArialMT;
} color: #999999;
} line-height: 22px;
}
}
} }
.detail-right { .detail-right {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-top: 6rpx; margin-top: 6rpx;
// text { // text {
// width: 40rpx; // width: 40rpx;
// line-height: 40rpx; // line-height: 40rpx;
// text-align: center; // text-align: center;
// display: inline-block; // display: inline-block;
// margin-right: 10rpx; // margin-right: 10rpx;
// color: #000000; // color: #000000;
// } // }
.subtract { .subtract {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
background: url('../../static/imgs/jianhao.png') center center no-repeat; background: url("../../static/imgs/jianhao.png") center center no-repeat;
background-size:100% 100%; background-size: 100% 100%;
}
} .num {
.num { font-size: 32rpx;
font-size: 32rpx; font-family: ArialMT;
font-family: ArialMT; color: #000000;
color: #000000; line-height: 28rpx;
line-height: 28rpx; margin-left: 26rpx;
margin-left: 26rpx; margin-right: 22rpx;
margin-right: 22rpx; }
} .add {
.add { width: 40rpx;
width: 40rpx; height: 40rpx;
height: 40rpx; background: url("../../static/imgs/jiahao.png") center center no-repeat;
background: url('../../static/imgs/jiahao.png') center center no-repeat; background-size: 100% 100%;
background-size:100% 100%; }
} }
} }
}
} }
.empty { .empty {
position: relative;
position: relative; top: 220rpx;
top: 220rpx; text-align: center;
text-align: center; display: flex;
display: flex; align-items: center;
align-items: center; flex-direction: column;
flex-direction: column;
&-text {
&-text { color: #808080;
color: #808080; margin-bottom: 50rpx;
margin-bottom: 50rpx; }
}
&-button {
&-button { width: 300rpx;
width: 300rpx; height: 90rpx;
height: 90rpx; color: orange;
color: orange; border: 1rpx solid orange;
border: 1rpx solid orange; text-align: center;
text-align: center; line-height: 90rpx;
line-height: 90rpx; border-radius: 48rpx;
border-radius: 48rpx; }
}
} }
.end { .end {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background-color: rgb(253, 253, 253); background-color: rgb(253, 253, 253);
position: fixed; position: fixed;
left: 0; left: 0;
box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
display: flex; display: flex;
z-index: 10072; z-index: 10072;
align-items: center; align-items: center;
&-left { &-left {
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 32rpx; padding: 0 32rpx;
.end-flex { .end-flex {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.car-img { .car-img {
width: 45rpx; width: 45rpx;
height: 54rpx; height: 54rpx;
display: inline-block; display: inline-block;
background: url('../../static/imgs/gouwudai.png') center center no-repeat; background: url("../../static/imgs/gouwudai.png") center center no-repeat;
background-size: cover; background-size: cover;
position: relative; position: relative;
.badge { .badge {
position: absolute; position: absolute;
height: 32rpx; height: 32rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
background: #FF63BA; background: #ff63ba;
right: -22rpx; right: -22rpx;
top: -8rpx; top: -8rpx;
min-width: 32rpx; min-width: 32rpx;
font-weight: 500; font-weight: 500;
font-size: 20rpx; font-size: 20rpx;
font-weight: normal; font-weight: normal;
color: #FFFFFF; color: #ffffff;
line-height: 32rpx; line-height: 32rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
}
} }
} }
}
&-right {
&-right { width: 169rpx;
width: 169rpx; font-size: 32rpx;
font-size: 32rpx; line-height: 100rpx;
line-height: 100rpx; background-color: #0050f6;
background-color: #0050F6; text-align: right;
text-align: right; color: #fff;
color: #fff; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; }
} .goSubmmit {
.goSubmmit{ // background: url('../../static/imgs/fukuan.png') center center no-repeat;
// background: url('../../static/imgs/fukuan.png') center center no-repeat; text-align: center;
text-align: center; font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; color: #ffffff;
color: #FFFFFF; line-height: 100rpx;
line-height: 100rpx; width: 200rpx;
width: 200rpx; height: 100%;
height: 100%; margin-top: -1rpx;
margin-top: -1rpx; }
}
} }
.shopClose { .shopClose {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background: rgba(0,83,255,0.7); background: rgba(0, 83, 255, 0.7);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
position: fixed; position: fixed;
left: 0; left: 0;
display: flex; display: flex;
z-index: 10072; z-index: 10072;
align-items: center; align-items: center;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
line-height: 100rpx; line-height: 100rpx;
.content { .content {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
} }
</style> </style>
main.js
import App from './App'; import App from "./App";
//引入vuex //引入vuex
import store from './store'; import store from "./store";
import utils from './utils/utils'; import utils from "./utils/utils";
// console.log(Vue.$u,22) // console.log(Vue.$u,22)
// 需要在Vue.use(uView)之后执行 // 需要在Vue.use(uView)之后执行
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue'; import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
import uView from 'uview-ui'; import uView from "uview-ui";
import User from '@/request/user'; import User from "@/request/user";
// main.js // main.js
import initToast from "@/components/bocft-toast/initToast.js" import initToast from "@/components/bocft-toast/initToast.js";
import showToast from "@/components/bocft-toast/bocft-toast.vue" import showToast from "@/components/bocft-toast/bocft-toast.vue";
import taBar from "@/components/tabBar/tabBar.vue" import taBar from "@/components/tabBar/tabBar.vue";
initToast(Vue); initToast(Vue);
Vue.component('show-toast',showToast); Vue.component("show-toast", showToast);
Vue.component('taBar',taBar); Vue.component("taBar", taBar);
Vue.use(uView); Vue.use(uView);
Vue.prototype.$utils = utils; Vue.prototype.$utils = utils;
Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2); Vue.prototype.setPrice = (price) => price && Number(price).toFixed(2);
Vue.prototype.loginByPhoneNumber = (e) => { Vue.prototype.loginByPhoneNumber = (e) => {
if (e.detail.errMsg == 'getPhoneNumber:ok') { if (e.detail.errMsg == "getPhoneNumber:ok") {
User.getPhoneNumber(e); User.getPhoneNumber(e);
} else if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
uni.showToast({ title: '已拒绝手机号授权', icon: 'error' }); uni.showToast({
title: "已拒绝手机号授权，请同意授权",
icon: "error",
});
} }
}; };
Vue.config.productionTip = false; Vue.config.productionTip = false;
App.mpType = 'app'; App.mpType = "app";
const app = new Vue({ const app = new Vue({
...App, ...App,
store, store,
}); });
export default app export default app;
app.$mount(); app.$mount();
require('./request/index')(app); require("./request/index")(app);
// #endif // #endif
// #ifdef VUE3 // #ifdef VUE3
import { createSSRApp } from 'vue'; import { createSSRApp } from "vue";
export function createApp() { export function createApp() {
const app = createSSRApp(App); const app = createSSRApp(App);
return { return {
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
<template> <template>
<view class="spec-content"> <view class="spec-content">
<view class="topBar" :style="{'top':topBarTop+'px','height':topBarHeight+'px'}"> <view
<u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon> class="topBar"
</view> :style="{ top: topBarTop + 'px', height: topBarHeight + 'px' }"
<view v-if="goodInfo"> >
<view class="uni-margin-wrap"> <u-icon
<swiper v-if="goodInfo.pics.introImagesApplet" class="swiper"> @click="goBack"
<swiper-item v-for="item in goodInfo.pics.introImagesApplet" :key="item"> name="arrow-left"
<image :src="item" class="swiper_img" mode="scaleToFill"></image> color="#000000"
</swiper-item> size="20"
</swiper> ></u-icon>
<swiper v-else class="swiper"> </view>
<swiper-item v-for="item in goodInfo.pics.introImages" :key="item"> <view v-if="goodInfo">
<image :src="item" class="swiper_img" mode="scaleToFill"></image> <view class="uni-margin-wrap">
</swiper-item> <swiper v-if="goodInfo.pics.introImagesApplet" class="swiper">
</swiper> <swiper-item
</view> v-for="item in goodInfo.pics.introImagesApplet"
<view class="good spec-info-left"> :key="item"
<view class="good-name">{{ goodInfo.name }}</view> >
<view class="specs"> <image :src="item" class="swiper_img" mode="scaleToFill"></image>
<!-- 规格 --> </swiper-item>
<view v-for="specItem in goodInfo.specs" :key="specItem.specId"> </swiper>
<div class="good-spec-name">{{ specItem.specName }}</div> <swiper v-else class="swiper">
<view class="good-spec-rule"> <swiper-item v-for="item in goodInfo.pics.introImages" :key="item">
<div v-for="specItemRule in specItem.rules":key="specItemRule.ruleId" @click="selectRoles(specItemRule, specItem)"> <image :src="item" class="swiper_img" mode="scaleToFill"></image>
<div v-if="ShowIt(specItemRule.ruleId)" class="div_item" > </swiper-item>
<div v-if="specItemRule.isRecommend=='1'" :class="[UseIt(specItemRule.ruleId)?'disabledStyle':'']" class="default"></div> </swiper>
<button class="good-spec-rule-item" :disabled="UseIt(specItemRule.ruleId)" </view>
:class="{ active: isActvie(specItemRule) }"> <view class="good spec-info-left">
<view @click.prevent="checkSku(specItemRule)">{{ specItemRule.ruleName }}</view> <view class="good-name">{{ goodInfo.name }}</view>
</button> <view class="specs">
</div> <!-- 规格 -->
</div> <view v-for="specItem in goodInfo.specs" :key="specItem.specId">
</view> <div class="good-spec-name">{{ specItem.specName }}</div>
</view> <view class="good-spec-rule">
</view> <div
</view> v-for="specItemRule in specItem.rules"
<view class="spec-detail"> :key="specItemRule.ruleId"
<view class="spec-detail-title spec-info-left">商品详细</view> @click="selectRoles(specItemRule, specItem)"
<view v-if="goodInfo.pics.detailImagesApplet"> >
<view class="spec-detail-img" v-for="item in goodInfo.pics.detailImagesApplet" :key="item"> <div v-if="ShowIt(specItemRule.ruleId)" class="div_item">
<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image> <div
</view> v-if="specItemRule.isRecommend == '1'"
</view> :class="[UseIt(specItemRule.ruleId) ? 'disabledStyle' : '']"
<view v-else class="spec-detail-img" v-for="item in goodInfo.pics.detailImages" :key="item"> class="default"
<image class="spec-detail-img-item" :src="item" mode="scaleToFill"></image> ></div>
</view> <button
<!-- 底部空白 --> class="good-spec-rule-item"
<view class="good-select-height"></view> :disabled="UseIt(specItemRule.ruleId)"
</view> :class="{ active: isActvie(specItemRule) }"
>
<view class="good-select" :style="{'padding-bottom':BottomSafeHeight+'px; height:'+(getPx(268)-BottomSafeHeight)+'px'}"> <view @click.prevent="checkSku(specItemRule)">{{
<view class="good-select-price"> specItemRule.ruleName
<div class="price"> }}</view>
<view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view> </button>
<view class="good-select-price-small" v-show="priceTotal.price!=priceTotal.discount">￥<text class="num">{{ Utils.isInteger(priceTotal.price) }}</text></view> </div>
</div> </div>
<div v-if="!size > 0" style="color: orangered">已售罄</div> </view>
<div v-else class="set_size"> </view>
<view class="subtract" @click="reduceGood"></view> </view>
<span>{{ size }}</span> </view>
<view class="add" @click="addGood" ></view> <view class="spec-detail">
</div> <view class="spec-detail-title spec-info-left">商品详细</view>
</view> <view v-if="goodInfo.pics.detailImagesApplet">
<view v-if="size > 0" class="good-select-cont"> <view
<view> class="spec-detail-img"
<a :class="!shopState||!isInRange?'good-select-btn1-close':'good-select-btn1'" @click="getallNum()" v-if="userms"> v-for="item in goodInfo.pics.detailImagesApplet"
立即购买 :key="item"
</a> >
<button v-if="!userms" :class="!shopState||!isInRange?'good-select-btn1-close':'good-select-btn1'" style="border-radius: 0;" open-type="getPhoneNumber" <image
@getphonenumber="getallNum"> class="spec-detail-img-item"
立即购买 :src="item"
</button> mode="scaleToFill"
</view> ></image>
</view>
<span :class="!shopState||!isInRange?'good-select-btn2-close':'good-select-btn2'" @click="shoppingCart" type="default">加入购物袋</span> </view>
</view> <view
</view> v-else
</view> class="spec-detail-img"
<show-toast ref="toast"/> v-for="item in goodInfo.pics.detailImages"
</view> :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> </template>
<script> <script>
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import User from '@/request/user'; import User from "@/request/user";
import Order from '@/request/order' import Order from "@/request/order";
import Menu from '@/request/menu' import Menu from "@/request/menu";
export default { export default {
data() { data() {
return { return {
title: 'Hello1', title: "Hello1",
imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }], imglist: [{ img: "/static/logo.png" }, { img: "/static/ggxz01.png" }],
goodInfo: null, goodInfo: null,
selected: [], selected: [],
available: [], available: [],
goods: {}, goods: {},
skusDefault: [], skusDefault: [],
skusSellout: [], skusSellout: [],
loginInfo:"", loginInfo: "",
pirce: 0, pirce: 0,
size: 1, size: 1,
topBarTop:0, topBarTop: 0,
topBarHeight:0, topBarHeight: 0,
BottomSafeHeight:0, BottomSafeHeight: 0,
Utils, Utils,
shopState:true, shopState: true,
showSku:[], showSku: [],
isInRange:true isInRange: true,
} };
}, },
onShow() { onShow() {
uni.setStorageSync("selectFlag",false) uni.setStorageSync("selectFlag", false);
uni.removeStorageSync('goodsList'); uni.removeStorageSync("goodsList");
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight') this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight");
this.shopState = JSON.parse(uni.getStorageSync("shopState")) this.shopState = JSON.parse(uni.getStorageSync("shopState"));
this.isInRange = uni.getStorageSync("isInRange")===''?true:uni.getStorageSync("isInRange") this.isInRange =
}, uni.getStorageSync("isInRange") === ""
mounted(){ ? true
// 获取胶囊坐标位置 : uni.getStorageSync("isInRange");
const res = wx.getMenuButtonBoundingClientRect() },
const menuInfoTop = res.top mounted() {
const menuInfoBottom = res.bottom // 获取胶囊坐标位置
const menuHeight = res.height const res = wx.getMenuButtonBoundingClientRect();
let headHeight = 0 const menuInfoTop = res.top;
wx.getSystemInfo({ const menuInfoBottom = res.bottom;
success: (res) => { const menuHeight = res.height;
headHeight = res.statusBarHeight let headHeight = 0;
} wx.getSystemInfo({
}) success: (res) => {
this.topBarTop = menuInfoTop headHeight = res.statusBarHeight;
this.topBarHeight = menuHeight },
}, });
onLoad() { this.topBarTop = menuInfoTop;
if(!this.userms){ this.topBarHeight = menuHeight;
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ },
this.loginInfo = loginInfo onLoad() {
}) if (!this.userms) {
} User.wxLoginAndGetOpenid(true).then((loginInfo) => {
uni.removeStorageSync('goodsList'); this.loginInfo = loginInfo;
const goodsInfo = JSON.parse(uni.getStorageSync('goodsInfo')); });
this.goodInfo = goodsInfo; }
console.log(JSON.parse(JSON.stringify(this.goodInfo))); uni.removeStorageSync("goodsList");
const goodsInfo = JSON.parse(uni.getStorageSync("goodsInfo"));
this.initInfo(this.goodInfo) this.goodInfo = goodsInfo;
}, console.log(JSON.parse(JSON.stringify(this.goodInfo)));
// watch:{
// selected(val){ this.initInfo(this.goodInfo);
// console.log(val,'val') },
// const {skus,specs} = this.goodInfo // watch:{
// console.log(skus,'--------skus',specs,'--------specs') // selected(val){
// const ruleIdList = val.map(res=>res.ruleId) // console.log(val,'val')
// console.log(ruleIdList) // const {skus,specs} = this.goodInfo
// } // console.log(skus,'--------skus',specs,'--------specs')
// }, // const ruleIdList = val.map(res=>res.ruleId)
methods: { // console.log(ruleIdList)
getPx(rpx) { // }
return rpx * (wx.getSystemInfoSync().windowWidth / 750); // },
}, methods: {
initInfo(goodsInfo){ getPx(rpx) {
this.available = [] return rpx * (wx.getSystemInfoSync().windowWidth / 750);
this.showSku = [] },
this.selected = [] initInfo(goodsInfo) {
const skus = goodsInfo.skus; this.available = [];
if (skus) { this.showSku = [];
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.selected = [];
this.skusDefault = skus.find(v => v.isDefault == 1&&v.isDelete===0); const skus = goodsInfo.skus;
this.skusSellout = skus.find(v => v.isDefault == 1 && (v.state == 1&&v.isDelete===0)) if (skus) {
|| skus.find(v => (v.state == 1&&v.isDelete===0)) const sku =
|| skus.find(v => v.isDefault == 1&&v.isDelete===0) skus.find(
|| skus[0] (v) => v.isDefault == 1 && v.state == 1 && v.isDelete === 0
if (sku){ ) ||
this.selected.push(...sku.rules) skus.find(
}else{ (v) => v.isDefault == 0 && v.state == 1 && v.isDelete === 0
this.selected = [] );
}; this.skusDefault = skus.find(
skus.forEach(item => { (v) => v.isDefault == 1 && v.isDelete === 0
if (item.isDelete === 0) { );
item.rules.forEach(rule => { this.skusSellout =
this.showSku.push(rule.ruleId) skus.find(
}) (v) => v.isDefault == 1 && v.state == 1 && v.isDelete === 0
} ) ||
}) skus.find((v) => v.state == 1 && v.isDelete === 0) ||
skus.forEach(item => { skus.find((v) => v.isDefault == 1 && v.isDelete === 0) ||
if (item.state == 1) { skus[0];
item.rules.forEach(rule => { if (sku) {
this.available.push(rule.ruleId) this.selected.push(...sku.rules);
}) } else {
} this.selected = [];
}) }
console.log(this.selected,this.showSku) skus.forEach((item) => {
} if (item.isDelete === 0) {
this.$nextTick(() => { item.rules.forEach((rule) => {
this.buildGoods(e => { this.showSku.push(rule.ruleId);
if (e) { });
this.size = 1 }
} else { });
this.size = 0 skus.forEach((item) => {
} if (item.state == 1) {
}) item.rules.forEach((rule) => {
this.$forceUpdate() this.available.push(rule.ruleId);
}) });
}, }
goBack(){ });
wx.navigateBack({ console.log(this.selected, this.showSku);
delta: 1 }
}); this.$nextTick(() => {
}, this.buildGoods((e) => {
setDefaultStyle(id) { if (e) {
let selected = false; this.size = 1;
if (this.skusDefault && this.skusDefault.rules) { } else {
this.skusDefault.rules.forEach(item => { this.size = 0;
if (item.ruleId == id) { }
selected = true });
} this.$forceUpdate();
}); });
} },
goBack() {
return selected wx.navigateBack({
}, delta: 1,
checkSku(specItemRule) { });
const value = this.UseIt(specItemRule.ruleId) },
if(value) { setDefaultStyle(id) {
this.showToast({ title: '该选项已售罄', icon: 'none' }); let selected = false;
return if (this.skusDefault && this.skusDefault.rules) {
} this.skusDefault.rules.forEach((item) => {
}, if (item.ruleId == id) {
selectRoles(specItemRule, parent) { selected = true;
const value = this.UseIt(specItemRule.ruleId) }
if(value) { });
this.showToast({ title: '该选项已售罄', icon: 'none' }); }
return
} return selected;
const { selected } = this; },
selected.forEach((item, index) => { checkSku(specItemRule) {
if (item.specId == parent.specId) { const value = this.UseIt(specItemRule.ruleId);
selected.splice(index, 1) if (value) {
} this.showToast({ title: "这款已经卖完啦", icon: "none" });
}); return;
this.selected.push({ ...specItemRule, specId: parent.specId }) }
this.buildGoods() },
}, selectRoles(specItemRule, parent) {
isActvie(data) { const value = this.UseIt(specItemRule.ruleId);
return this.selected.filter(item => item.ruleId == data.ruleId).length > 0 if (value) {
}, this.showToast({ title: "这款已经卖完啦", icon: "none" });
buildGoods(callback) { return;
const skusObj = {}; }
let selectedSku = null const { selected } = this;
const skus = this.goodInfo.skus; selected.forEach((item, index) => {
skus.forEach(item => { if (item.specId == parent.specId) {
const ruleId = item.rules.map(item => item.ruleId); selected.splice(index, 1);
skusObj[item.skuId] = ruleId.sort() }
}); });
const selectedrules = this.selected.map(item => item.ruleId).sort() this.selected.push({ ...specItemRule, specId: parent.specId });
for (let item in skusObj) { this.buildGoods();
const selStr = selectedrules.toString() },
const itemStr = skusObj[item].toString() isActvie(data) {
if (selStr === itemStr) selectedSku = item; return (
} this.selected.filter((item) => item.ruleId == data.ruleId).length > 0
const [sku] = skus.filter(item => item.skuId == selectedSku); );
if (!sku || skus.state == 2) { },
this.showToast({ title: '本商品已经售罄', icon: 'none' }); buildGoods(callback) {
callback && callback() const skusObj = {};
} else { let selectedSku = null;
const { category, ...goods } = this.goodInfo; const skus = this.goodInfo.skus;
goods.skus = [sku]; skus.forEach((item) => {
goods.sku = sku const ruleId = item.rules.map((item) => item.ruleId);
goods.flag = true; skusObj[item.skuId] = ruleId.sort();
goods.skuId = selectedSku });
goods.categoryId = category.id; const selectedrules = this.selected.map((item) => item.ruleId).sort();
goods.goodsName = category.name; for (let item in skusObj) {
this.goods = goods const selStr = selectedrules.toString();
callback && callback(true) const itemStr = skusObj[item].toString();
} if (selStr === itemStr) selectedSku = item;
}, }
checkNum(type){ const [sku] = skus.filter((item) => item.skuId == selectedSku);
const shopCarInfo = uni.getStorageSync('shopCarInfo') || [] if (!sku || skus.state == 2) {
let shopCarNum = (type=='add'?1:0) this.showToast({ title: "这款已经卖完啦", icon: "none" });
shopCarInfo.forEach(item=> shopCarNum+=item.num) callback && callback();
let countOfOrder = uni.getStorageSync('countOfOrder'); } else {
if ((Number(this.size) + Number(shopCarNum)) <= countOfOrder) { const { category, ...goods } = this.goodInfo;
return true goods.skus = [sku];
} else { goods.sku = sku;
this.showToast({ goods.flag = true;
title: '最多可一次购买'+countOfOrder+'杯', goods.skuId = selectedSku;
icon: 'none', goods.categoryId = category.id;
}); goods.goodsName = category.name;
} this.goods = goods;
callback && callback(true);
}, }
addGood() { },
if(this.checkNum('add')){ checkNum(type) {
this.size = this.size + 1; const shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
} let shopCarNum = type == "add" ? 1 : 0;
}, shopCarInfo.forEach((item) => (shopCarNum += item.num));
reduceGood() { let countOfOrder = uni.getStorageSync("countOfOrder");
const { size } = this if (Number(this.size) + Number(shopCarNum) <= countOfOrder) {
if (size > 1) { return true;
this.size = size - 1; } else {
} this.showToast({
}, title: "一次最多可购买" + countOfOrder + "杯",
async shoppingCart() { icon: "none",
if(!this.shopState||!this.isInRange){ });
return }
} },
if(this.checkNum('addShop')){ addGood() {
const { goods } = this; if (this.checkNum("add")) {
const { data } = await Order.checkSku({skuId:goods.skuId}) this.size = this.size + 1;
const {state,goods:newgoods} = data.data }
},
const newInfo = JSON.parse(JSON.stringify(newgoods)) reduceGood() {
newInfo.category = this.goodInfo.category const { size } = this;
this.goodInfo = {...newInfo} if (size > 1) {
this.initInfo(this.goodInfo) this.size = size - 1;
}
if(state == 2){ },
this.showToast({ title: '本商品已经售罄', icon: 'none' }); async shoppingCart() {
// this.getMenuList() if (!this.shopState || !this.isInRange) {
return; return;
}else{ }
goods.num = this.size; if (this.checkNum("addShop")) {
Utils.getallNum(goods) const { goods } = this;
uni.switchTab({ url: '/pages/menu/menu' }) const { data } = await Order.checkSku({ skuId: goods.skuId });
} const { state, goods: newgoods } = data.data;
}
}, const newInfo = JSON.parse(JSON.stringify(newgoods));
async getallNum(e) { newInfo.category = this.goodInfo.category;
if(!this.shopState||!this.isInRange){ this.goodInfo = { ...newInfo };
return this.initInfo(this.goodInfo);
}
const gosettleFun = async ()=> { if (state == 2) {
const { goods } = this; this.showToast({ title: "这款已经卖完啦", icon: "none" });
const { data } = await Order.checkSku({skuId:goods.skuId}) // this.getMenuList()
const {state,goods:newgoods} = data.data return;
} else {
const newInfo = JSON.parse(JSON.stringify(newgoods)) goods.num = this.size;
newInfo.category = this.goodInfo.category Utils.getallNum(goods);
this.goodInfo = {...newInfo} uni.switchTab({ url: "/pages/menu/menu" });
this.initInfo(this.goodInfo) }
}
if(state == 2){ },
this.showToast({ title: '本商品已经售罄', icon: 'none' }); async getallNum(e) {
// this.getMenuList() if (!this.shopState || !this.isInRange) {
return; return;
}else{ }
goods.num = this.size const gosettleFun = async () => {
Utils.addGoods(goods) const { goods } = this;
uni.navigateTo({ url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1` }) const { data } = await Order.checkSku({ skuId: goods.skuId });
} const { state, goods: newgoods } = data.data;
}
const checkLocak = () => { const newInfo = JSON.parse(JSON.stringify(newgoods));
uni.authorize({ newInfo.category = this.goodInfo.category;
scope: 'scope.userLocation', this.goodInfo = { ...newInfo };
success: () => { //1.1 允许授权 this.initInfo(this.goodInfo);
console.log("允许授权位置");
gosettleFun() if (state == 2) {
}, this.showToast({ title: "这款已经卖完啦", icon: "none" });
fail: (err) => { //1.2 拒绝授权 // this.getMenuList()
wx.exitMiniProgram({ success: (res) => { } }) return;
console.log("获取位置失败") } else {
uni.showModal({ goods.num = this.size;
content: '检测到您没打开地理位置权限，是否去设置打开？', Utils.addGoods(goods);
confirmText: "确认", uni.navigateTo({
cancelText: '取消', url: `/orderSubPackage/pages/settlement/index?buyType=1&goodsList=1`,
success: (res) => { });
if (res.confirm) { }
uni.openSetting({//opensetting是调起设置页面的 };
success: (res) => { const checkLocak = () => {
uni.setStorageSync("updataLoadtion",true) uni.authorize({
console.log(res) scope: "scope.userLocation",
if(res.authSetting['scope.userLocation'] == true){//判断res.authsetting的值是true还是false success: () => {
gosettleFun() //1.1 允许授权
}else{ console.log("允许授权位置");
// console.log("什么也不做"); gosettleFun();
} },
} fail: (err) => {
}) //1.2 拒绝授权
} else { wx.exitMiniProgram({ success: (res) => {} });
console.log('取消'); console.log("获取位置失败");
return false; uni.showModal({
} content: "检测到您没打开地理位置权限，是否去设置打开？",
} confirmText: "确认",
}) cancelText: "取消",
} success: (res) => {
}) if (res.confirm) {
} uni.openSetting({
let Authorization = uni.getStorageSync('Authorization'); //opensetting是调起设置页面的
if (!Authorization) { success: (res) => {
this.loginByPhoneNumber(e); uni.setStorageSync("updataLoadtion", true);
checkLocak() console.log(res);
return if (res.authSetting["scope.userLocation"] == true) {
}else{ //判断res.authsetting的值是true还是false
checkLocak() gosettleFun();
} } else {
if(!this.shopState||!this.isInRange){ // console.log("什么也不做");
return }
} },
});
} else {
// return console.log("取消");
return false;
}, }
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; let Authorization = uni.getStorageSync("Authorization");
this.$store.commit('setMenuAllInfo', data.data); if (!Authorization) {
this.$store.commit('setMenuCategorys', data.data.categorys); this.loginByPhoneNumber(e);
uni.setStorageSync('countOfOrder', parseInt(data.data.countOfOrder)); checkLocak();
// this.$refs.MenuAssembly.createList(data.data.categorys) return;
} } else {
}, checkLocak();
// 付款前未登录发起授权 }
loginByPhoneNumber(e) { if (!this.shopState || !this.isInRange) {
if (e.detail.errMsg == 'getPhoneNumber:ok') { return;
e.loginInfo = this.loginInfo }
User.getPhoneNumber(e);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { // return
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) },
} async getMenuList() {
}, const shopId = uni.getStorageSync("shopData").id;
UseIt(ruleId) { let { data } = await Menu.getMenuList(shopId);
return this.available.indexOf(ruleId) == -1&&this.shopState&&this.isInRange // console.log("menus:"+JSON.stringify(data));
}, if (data.code == 200) {
ShowIt(ruleId) { data.data = data.data;
return this.showSku.indexOf(ruleId) !== -1 this.$store.commit("setMenuAllInfo", data.data);
} this.$store.commit("setMenuCategorys", data.data.categorys);
}, uni.setStorageSync("countOfOrder", parseInt(data.data.countOfOrder));
computed: { // this.$refs.MenuAssembly.createList(data.data.categorys)
userms() { }
return this.$store.getters.Authorization; },
}, // 付款前未登录发起授权
priceTotal() { loginByPhoneNumber(e) {
let discount = 0; if (e.detail.errMsg == "getPhoneNumber:ok") {
let price = 0; e.loginInfo = this.loginInfo;
const { goods,skusSellout } = this; User.getPhoneNumber(e);
if (goods.sku) { } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
discount = goods.sku.discount * this.size this.showToast({
price = goods.sku.price * this.size title: "已拒绝手机号授权，请同意授权",
}else if(skusSellout){ icon: "error",
discount = Number(skusSellout.discount) });
price = Number(skusSellout.price) }
} },
return { discount: discount.toFixed(2), price: price.toFixed(2) } 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> </script>
<style lang="scss"> <style lang="scss">
.topBar{ .topBar {
// border: 1px solid red; // border: 1px solid red;
position: fixed; position: fixed;
z-index: 99999999; z-index: 99999999;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 34rpx; padding-left: 34rpx;
} }
.uni-margin-wrap { .uni-margin-wrap {
width: 100%; width: 100%;
} }
.swiper { .swiper {
height: 561rpx; height: 561rpx;
width: 100%; width: 100%;
} }
.swiper_img { .swiper_img {
width: 100%; width: 100%;
height: 100% !important; height: 100% !important;
vertical-align: bottom; vertical-align: bottom;
} }
.spec-content { .spec-content {
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
} }
.spec-info-left { .spec-info-left {
padding: 28rpx 32rpx; padding: 28rpx 32rpx;
} }
.good { .good {
display: block; display: block;
width: 100%; width: 100%;
text-align: left; text-align: left;
// background-color: #000000; // background-color: #000000;
.good-name { .good-name {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
padding-bottom: 22rpx; padding-bottom: 22rpx;
// background-color: #000000; // background-color: #000000;
} }
.specs { .specs {
// margin-top: 30rpx; // margin-top: 30rpx;
} }
.good-spec-name { .good-spec-name {
padding-top: 32rpx; padding-top: 32rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #999999; color: #999999;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
text-align: left; text-align: left;
line-height: 34rpx; line-height: 34rpx;
// background-color: blue; // background-color: blue;
} }
.good-spec-rule { .good-spec-rule {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-top: 26rpx; margin-top: 26rpx;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0rpx; border-radius: 0rpx;
.div_item { .div_item {
position: relative; position: relative;
height: 48rpx; height: 48rpx;
margin-right: 32rpx; margin-right: 32rpx;
line-height: 48rpx; line-height: 48rpx;
min-width: 120rpx; min-width: 120rpx;
z-index: 999999; z-index: 999999;
.default { .default {
width: 45rpx; width: 45rpx;
height: 48rpx; height: 48rpx;
background: url('@/static/imgs/tuijian.png') center center no-repeat; background: url("@/static/imgs/tuijian.png") center center no-repeat;
background-size: 100%; background-size: 100%;
position: absolute; position: absolute;
right: -17rpx; right: -17rpx;
top: -30rpx; top: -30rpx;
z-index: 9; z-index: 9;
} }
} }
} }
} }
.good-spec-rule-item { .good-spec-rule-item {
padding: 7rpx 24rpx; padding: 7rpx 24rpx;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
margin: 0; margin: 0;
line-height: 40rpx; line-height: 40rpx;
border-radius: 0rpx; border-radius: 0rpx;
border: none; border: none;
font-style: normal; font-style: normal;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
background: #EAEAEA; background: #eaeaea;
pointer-events: none; pointer-events: none;
&.active { &.active {
font-weight: 400; font-weight: 400;
padding: 7rpx 24rpx; padding: 7rpx 24rpx;
background: #0050F6; background: #0050f6;
font-style: normal; font-style: normal;
color: #FFFFFF; color: #ffffff;
border-radius: 0rpx; border-radius: 0rpx;
border: 0rpx; border: 0rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
} }
view { view {
pointer-events: none; pointer-events: none;
} }
} }
.good-spec-rule-item::after{ .good-spec-rule-item::after {
z-index: 1; z-index: 1;
border-radius: 0rpx; border-radius: 0rpx;
border: 0rpx; border: 0rpx;
} }
button[disabled]:not([type]) { button[disabled]:not([type]) {
background: url('@/static/imgs/shouqingsku.png') no-repeat; background: url("@/static/imgs/shouqingsku.png") no-repeat;
background-size: 100% 48rpx; background-size: 100% 48rpx;
} }
.spec-detail { .spec-detail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.spec-detail-title { .spec-detail-title {
width: 112rpx; width: 112rpx;
height: 40rpx; height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333333; color: #333333;
padding-top: 32rpx !important; padding-top: 32rpx !important;
padding-bottom:22rpx !important padding-bottom: 22rpx !important;
} }
.spec-detail-img { .spec-detail-img {
margin-left: 30rpx; margin-left: 30rpx;
margin-right: 30rpx; margin-right: 30rpx;
height: 500rpx; height: 500rpx;
} }
.spec-detail-img:last-child{ .spec-detail-img:last-child {
margin-bottom: 115rpx; margin-bottom: 115rpx;
} }
.spec-detail-img-item { .spec-detail-img-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.good-select-height { .good-select-height {
height: 200rpx; height: 200rpx;
} }
.good-select { .good-select {
width: 100%; width: 100%;
position: fixed; position: fixed;
bottom: 0rpx; bottom: 0rpx;
text-align: center; text-align: center;
// height: 268rpx; // height: 268rpx;
background-color: #fff; background-color: #fff;
height: auto; height: auto;
padding-bottom: 20rpx; padding-bottom: 20rpx;
box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5); box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5);
z-index: 9999999 z-index: 9999999;
} }
.good-select-price { .good-select-price {
display: flex; display: flex;
align-items: center; align-items: center;
// height: 68rpx; // height: 68rpx;
background: #FFFFFF; background: #ffffff;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 26rpx 32rpx 26rpx 32rpx; padding: 26rpx 32rpx 26rpx 32rpx;
.price{ .price {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
.good-select-price-normal { .good-select-price-normal {
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-right: 12rpx; margin-right: 12rpx;
font-weight: 500; font-weight: 500;
line-height: 38rpx; line-height: 38rpx;
.moneyLog { .moneyLog {
font-size: 32rpx; font-size: 32rpx;
font-weight: 900; font-weight: 900;
} }
} }
.good-select-price-small { .good-select-price-small {
font-size: 20rpx; font-size: 20rpx;
font-family: ArialMT; font-family: ArialMT;
line-height: 32rpx; line-height: 32rpx;
color: #999999; color: #999999;
.num { .num {
text-decoration: line-through; text-decoration: line-through;
} }
} }
} }
} }
.good-select-cont { .good-select-cont {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
justify-content: space-between; justify-content: space-between;
padding: 0 30rpx; padding: 0 30rpx;
} }
.good-select-btn1 { .good-select-btn1 {
width: 328rpx; width: 328rpx;
height: 104rpx; height: 104rpx;
border: 2rpx solid #0050F6; border: 2rpx solid #0050f6;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #0050F6; color: #0050f6;
border-radius: 2px; border-radius: 2px;
line-height: 104rpx; line-height: 104rpx;
text-align: center; text-align: center;
background: #FFFFFF; background: #ffffff;
} }
.good-select-btn1-close { .good-select-btn1-close {
width: 328rpx; width: 328rpx;
height: 104rpx; height: 104rpx;
border: 2rpx solid #999999; border: 2rpx solid #999999;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
border-radius: 2px; border-radius: 2px;
line-height: 104rpx; line-height: 104rpx;
text-align: center; text-align: center;
background: #FFFFFF; background: #ffffff;
} }
.good-select-btn2 { .good-select-btn2 {
width: 328rpx; width: 328rpx;
height: 104rpx; height: 104rpx;
border-radius: 2px; border-radius: 2px;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6; background: #0050f6;
line-height: 104rpx; line-height: 104rpx;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.good-select-btn2-close { .good-select-btn2-close {
width: 328rpx; width: 328rpx;
height: 104rpx; height: 104rpx;
border-radius: 2px; border-radius: 2px;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
background: #999999; background: #999999;
line-height: 104rpx; line-height: 104rpx;
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.set_size { .set_size {
display: flex; display: flex;
width: 150rpx; width: 150rpx;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.subtract { .subtract {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
background: url('@/static/imgs/jianhao.png') center center no-repeat; background: url("@/static/imgs/jianhao.png") center center no-repeat;
background-size:100% 100%; background-size: 100% 100%;
}
} .add {
.add { width: 40rpx;
width: 40rpx; height: 40rpx;
height: 40rpx; background: url("@/static/imgs/jiahao.png") center center no-repeat;
background: url('@/static/imgs/jiahao.png') center center no-repeat; background-size: 100% 100%;
background-size:100% 100%; }
} span {
span { margin: 0 22rpx 0 26rpx;
margin: 0 22rpx 0 26rpx; font-size: 32rpx;
font-size: 32rpx; font-family: ArialMT;
font-family: ArialMT; color: #000000;
color: #000000; }
}
} }
</style> </style>
mineSubPackage/pages/userInfo/index.vue
<template> <template>
<view class="bigBox"> <view class="bigBox">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}"> <view
<u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> class="topBar"
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">个人信息</view> :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>
<view class="page" :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}"> <view
<view class="avatarBox"> class="page"
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> :style="{
<image class="avatar" :src="userInfo.avatarUrl"/> 'padding-top':
</button> 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>
<view class="infoBox"> <view class="infoItem phone">
<view class="infoItem name"> <view class="label">手机</view>
<view class="label">昵称</view> <view class="input">{{ userInfo.phone }}</view>
<view class="input"><input type="nickname" v-model="userInfo.name"></view> </view>
<view class="tip" v-if="valate">{{valateText}}</view> <view class="infoItem sex">
</view> <view class="label">性别</view>
<view class="infoItem phone"> <view class="input">
<view class="label">手机</view> <view class="sexBox">
<view class="input">{{userInfo.phone}}</view> <view
</view> class="sex"
<view class="infoItem sex"> v-for="(item, index) in sexList"
<view class="label">性别</view> :key="index"
<view class="input"> @click="selectedSex(item)"
<view class="sexBox"> >
<view class="sex" v-for="(item,index) in sexList" :key="index" @click="selectedSex(item)"> <view
<view :class="item.value===userInfo.sex?'checked':'nochecked'"></view> :class="item.value === userInfo.sex ? 'checked' : 'nochecked'"
<view class="checkLabel">{{item.label}}</view> ></view>
</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> </view>
</view>
</view> </view>
<view class="saveBtn"> <view class="infoItem birthday">
<button class="btn" @click="save">保存</button> <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>
<view class="saveBtn">
<button class="btn" @click="save">保存</button>
</view>
</view> </view>
<show-toast ref="toast"/> <show-toast ref="toast" />
<!-- <button @click="exit">退出</button> --> <!-- <button @click="exit">退出</button> -->
<u-datetime-picker <u-datetime-picker
:show="timerShow" :show="timerShow"
:maxDate="(new Date()).valueOf()" :maxDate="new Date().valueOf()"
:minDate="-631094400" :minDate="-631094400"
@close="timerShow = false" @close="timerShow = false"
@confirm="choseTime" @confirm="choseTime"
...@@ -59,447 +99,451 @@ ...@@ -59,447 +99,451 @@
mode="date" mode="date"
></u-datetime-picker> ></u-datetime-picker>
<Modal <Modal
class="modal" class="modal"
title="确认更换生日日期？" title="确认更换生日日期？"
content="生日只可修改一次，是否想要修改？" content="生日只可修改一次，是否想要修改？"
:show="birthdayModalShow" :show="birthdayModalShow"
@close="birthdayModalShow = false" @close="birthdayModalShow = false"
@ok="openTimer" @ok="openTimer"
/> />
</view> </view>
</template> </template>
<script> <script>
import Modal from '@/components/Modal/index.vue' import Modal from "@/components/Modal/index.vue";
import Mine from '@/request/mine' import Mine from "@/request/mine";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import Store from '@/store'; import Store from "@/store";
export default { export default {
components: { Modal }, components: { Modal },
computed:{ computed: {
birthdayComuted(){ birthdayComuted() {
const {birthday} = this.userInfo const { birthday } = this.userInfo;
const date = new Date(birthday) const date = new Date(birthday);
const years = date.getFullYear() const years = date.getFullYear();
const month = date.getMonth()+1 const month = date.getMonth() + 1;
const days = date.getDate() const days = date.getDate();
return years+'.'+month+'.'+days return years + "." + month + "." + days;
},
userInfoStorage() {
return uni.getStorageSync('UserInfo');
},
systemBarHeight(){
return this.$store.state.user.systemBarHeight
}
}, },
watch:{ userInfoStorage() {
'userInfo.name':{ return uni.getStorageSync("UserInfo");
handler(val){ },
console.log(val) systemBarHeight() {
if(!/^[0-9a-zA-z\u4e00-\u9fa5]{0,7}$/.test(val)){ return this.$store.state.user.systemBarHeight;
this.valateText = '最多7个字符，不可输入标点符号及特殊字符'
this.valate = true
}else{
if(!val){
this.valateText = '请输入昵称'
this.valate = true
}else{
this.valateText = ''
this.valate = false
}
}
}
}
}, },
data() { },
return { watch: {
Utils, "userInfo.name": {
valateText:'', handler(val) {
canEditBirthday:true, console.log(val);
valate:false, if (!/^[0-9a-zA-z\u4e00-\u9fa5]{0,7}$/.test(val)) {
rules:{ this.valateText = "最多7个字符，不可输入标点符号及特殊字符";
name:[ this.valate = true;
{ } else {
required: true, if (!val) {
errorMessage: '请输入姓名' this.valateText = "请输入昵称";
} this.valate = true;
] } else {
}, this.valateText = "";
timerShow: false, this.valate = 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 data() {
// if(info){ return {
const {avatarUrl,gender=0,nickName='点点'} = info?JSON.parse(decodeURIComponent(info)):{} Utils,
const {data} = await Mine.getUserInfo() valateText: "",
const { birthday, createTime, id, phone, sex, userName } = data.data canEditBirthday: true,
this.userInfo.id = id valate: false,
this.canEditBirthday = !birthday rules: {
if(!birthday){ name: [
this.userInfo.birthday = new Date(createTime.replace(/-/g,'/')).valueOf() {
}else{ required: true,
this.userInfo.birthday = Date.parse(birthday) errorMessage: "请输入姓名",
} },
],
this.userInfo.avatarUrl = avatarUrl },
this.userInfo.sex = sex?sex?1:0:gender timerShow: false,
this.userInfo.name = nickName birthdayModalShow: false,
this.userInfo.phone = phone.substr(0,3) + "****" + phone.substr(7) 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 this.userInfo.avatarUrl = avatarUrl;
const sendData ={ this.userInfo.sex = sex ? (sex ? 1 : 0) : gender;
...result, this.userInfo.name = nickName;
avatarUrl, this.userInfo.phone = phone.substr(0, 3) + "****" + phone.substr(7);
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
// }
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:{ // editAvatar(e) {
async choseTime(e) { // console.log(123)
const sendDate = { // wx.getUserProfile({
birthday:this.userInfo.birthday, // desc:'用于完善用户资料',
id:this.userInfo.id // success:(res)=>{
} // const {userInfo} = res
const {data} = await Mine.editBirthdat(sendDate) // const Info = {
const {code} = data // avatarUrl:userInfo.avatarUrl,
if(code===200){ // nickName:userInfo.nickName
this.canEditBirthday = false // }
this.showToast({ title: '修改成功'}) // this.userInfo.avatarUrl = Info.avatarUrl
this.userInfo.birthday = e.value // this.userInfo.name = Info.nickName
} // this.save(false)
this.timerShow = false // }
}, // })
// editAvatar(e) { // },
// console.log(123) async onChooseAvatar(e) {
// wx.getUserProfile({ const { detail } = e;
// desc:'用于完善用户资料', const { avatarUrl } = detail;
// success:(res)=>{ this.userInfo.avatarUrl = avatarUrl;
// const {userInfo} = res let Authorization = uni.getStorageSync(`Authorization`);
// const Info = { // await Mine.upLoadImg(formData)
// avatarUrl:userInfo.avatarUrl, // 上传头像接口
// nickName:userInfo.nickName uni.uploadFile({
// } url: `${this.getBaseUrl()}/common/uploadOss`,
// this.userInfo.avatarUrl = Info.avatarUrl filePath: avatarUrl,
// this.userInfo.name = Info.nickName name: "file",
// this.save(false) header: {
// } Authorization: Authorization,
// })
// },
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
}
})
}, },
getBaseUrl() { success: (uploadFileRes) => {
let path = process.env.ENV_PATH == undefined?require('../../../env/dev.js'): require(process.env.ENV_PATH) const { data } = uploadFileRes;
// #ifdef MP-WEIXIN this.userInfo.avatarUrl = data;
// ---------------- 根据微信开发环境配置请求地址 --------------------
// 获取当前帐号信息
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 getBaseUrl() {
}, let path =
changeBirthday(){ process.env.ENV_PATH == undefined
this.birthdayModalShow = true ? require("../../../env/dev.js")
}, : require(process.env.ENV_PATH);
selectedSex(val){ // #ifdef MP-WEIXIN
console.log(val) // ---------------- 根据微信开发环境配置请求地址 --------------------
this.userInfo.sex = val.value // 获取当前帐号信息
}, const accountInfo = wx.getAccountInfoSync();
exit(){ // env类型 develop:开发版、trial:体验版、release:正式版
wx.exitMiniProgram({ const envWx = accountInfo.miniProgram.envVersion;
success:()=>{ if (envWx === "release") {
console.log(123) 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){ async save(isReturn = true) {
const {sex,name,id,avatarUrl} = this.userInfo const { customerName, ...result } = this.userInfoStorage;
const sendData = { if (!this.valate) {
sex: Number(sex)===0?false:true, const { sex, name, id, avatarUrl } = this.userInfo;
userName: name, const sendData = {
id sex: Number(sex) === 0 ? false : true,
} userName: name,
console.log(sendData) id,
await Mine.editUserAvatar({avatarUrl:avatarUrl,id}) };
const { data } = await Mine.editUserInfo(sendData) console.log(sendData);
console.log(data) await Mine.editUserAvatar({ avatarUrl: avatarUrl, id });
const {code = 0} = data const { data } = await Mine.editUserInfo(sendData);
if(code===200){ console.log(data);
this.showToast({ title: '保存成功'}) const { code = 0 } = data;
const data = { if (code === 200) {
...result, this.showToast({ title: "保存成功" });
customerName:name, const data = {
avatarUrl, ...result,
canEditBirthday:this.canEditBirthday, customerName: name,
sex avatarUrl,
} canEditBirthday: this.canEditBirthday,
Store.commit('setUserInfo', data); sex,
uni.setStorage({ key: 'userInfo', data: data }); };
uni.setStorageSync('UserInfo',data) Store.commit("setUserInfo", data);
if(isReturn){ uni.setStorage({ key: "userInfo", data: data });
wx.navigateBack({ uni.setStorageSync("UserInfo", data);
delta: 1 if (isReturn) {
}); wx.navigateBack({
} delta: 1,
} });
} }
} }
} }
} },
},
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.bigBox { .bigBox {
.topBar{ .topBar {
position: fixed; position: fixed;
width: 100%; width: 100%;
background: white; background: white;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-left: 34rpx; padding-left: 34rpx;
.tabTitle{ .tabTitle {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
width: 79%; width: 79%;
color: #333333 color: #333333;
} }
} }
} }
.page {
.page{ background: #f8f8f8;
background: #F8F8F8; height: 100vh;
height: 100vh;
} }
.avatarBox { .avatarBox {
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 320rpx; height: 320rpx;
display: flex; display: flex;
align-items: center; align-items: center;
background: #FFFFFF; background: #ffffff;
.avatarBtn { .avatarBtn {
border: 0px; border: 0px;
background: white; background: white;
height: 200rpx; height: 200rpx;
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
}
}
.avatarBtn::after {
border: none;
}
.avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 0 auto;
} }
}
.avatarBtn::after {
border: none;
}
}
.infoBox { .infoBox {
z-index: 1; z-index: 1;
background: #FFFFFF; background: #ffffff;
overflow: hidden; overflow: hidden;
padding: 0rpx 38rpx 0rpx 40rpx; padding: 0rpx 38rpx 0rpx 40rpx;
margin-top: 24rpx; 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;
.label { .name {
font-size: 28rpx; position: relative;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.input { .tip {
font-size: 28rpx; position: absolute;
font-family: PingFangSC-Regular, PingFang SC; font-size: 18rpx;
font-weight: 400; color: red;
color: #333333; bottom: 9rpx;
margin-left: 136rpx; left: 190rpx;
}
}
.sexBox { .infoItem {
display: flex; height: 99rpx;
align-items: center; border-bottom: 1rpx solid #ececec;
justify-content: flex-start; display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding-top: 7rpx;
.sex { .label {
display: flex; font-size: 28rpx;
align-items: center; font-family: PingFangSC-Regular, PingFang SC;
justify-content: flex-start; font-weight: 400;
margin-right: 64rpx; color: #333333;
}
.checked { .input {
width: 24rpx; font-size: 28rpx;
height: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
background: url('../../../static/imgs/duigouxuanzhong.png') center center no-repeat; font-weight: 400;
background-size:100% 100%; color: #333333;
margin-right: 16rpx; margin-left: 136rpx;
}
.nochecked { .sexBox {
width: 24rpx; display: flex;
height: 24rpx; align-items: center;
background: url('../../../static/imgs/weixuanzhong.png') center center no-repeat; justify-content: flex-start;
background-size:100% 100%;
margin-right: 16rpx;
}
.checkLabel { .sex {
font-size: 28rpx; display: flex;
font-family: PingFangSC-Regular, PingFang SC; align-items: center;
font-weight: 400; justify-content: flex-start;
color: #333333; margin-right: 64rpx;
}
}
}
.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;
} .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 { .birthdayBox {
border: 0rpx; display: flex;
justify-content: flex-start;
align-items: center;
.textDisabled {
color: #999999;
} }
}
.saveBtn {
width: 670rpx;
height: 98rpx;
margin: 0 auto;
margin-top: 32rpx;
.btn { .btn {
background: #0050F6; width: 96rpx;
border-radius: 2px; height: 48rpx;
font-size: 32rpx; border-radius: 2rpx;
height: 98rpx; border: 2rpx solid #0050f6;
line-height: 98rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; text-align: center;
} color: #0050f6;
.btn::before { line-height: 48rpx;
background: #0050F6; margin-left: 192rpx;
border-radius: 2px;
font-size: 32rpx;
height: 98rpx;
line-height: 98rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
} }
}
} }
</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> <template>
<div class="pages"> <div class="pages">
<view class="topBar" :style="{'padding-top':statusBarHeight+'px','height':navigationBarHeight+'px'}"> <view
<u-icon @click="goBackOrder" name="arrow-left" color="#000000" size="20"></u-icon> class="topBar"
<view class="tabTitle" :style="{'line-height':navigationBarHeight+'px'}">订单详情</view> :style="{
</view> 'padding-top': statusBarHeight + 'px',
<div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}"> height: navigationBarHeight + 'px',
<view class="status_text">订单状态：{{ orderStatusText }}</view> }"
<view class="tips"> >
<view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦～</view> <u-icon
<view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐～</view> @click="goBackOrder"
<view v-if="orderInfo.state >= 8 && orderInfo.state <= 15">非常抱歉，我们会继续努力的～</view> name="arrow-left"
<view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候，预计<text class="time">{{waitTime}}</text>分钟后可取</view> color="#000000"
</view> size="20"
<div class="btns"> ></u-icon>
<a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a> <view
<a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a> class="tabTitle"
<a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn_cancel">申请退款</a> :style="{ 'line-height': navigationBarHeight + 'px' }"
<a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a> >订单详情</view
<a type="primary" @click="refundInfo" v-if="checkStatus(orderInfo.state,[12,13,14,15])" class="btn_cancel">退款详情</a> >
</div> </view>
</div> <div
<div class="order_flow" v-if="qrShow"> class="order_status"
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div> :style="{
<div class="realQrcodeBox" v-if="qrShow&&isBuild"> 'margin-top': statusBarHeight + navigationBarHeight + getPx(32) + 'px',
<image mode="aspectFit" :src="ewmImg"/> }"
</div> >
<div v-if="qrShow&&!isBuild" class="qr_code" > <view class="status_text">订单状态：{{ orderStatusText }}</view>
<image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr" /> <view class="tips">
</div> <view v-if="orderInfo.state == 7">为保持口感，请尽快饮用哦～</view>
<!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> --> <view v-if="orderInfo.state == 4">订单已制作完成，请尽快取餐～</view>
<canvas v-if="qrShow" class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" /> <view v-if="orderInfo.state >= 8 && orderInfo.state <= 15"
<div v-if="qrShow" class="flow_describe"> >非常抱歉，我们会继续努力的～</view
<view class="titleBox"> >
<view class="qrcodeTitle"> <view v-if="orderInfo.state == 2 || orderInfo.state == 3"
<view class="title">扫码流程</view> >请您耐心等候，预计<text class="time">{{ waitTime }}</text
<view class="icon"> >分钟后可取</view
<u-icon name="question-circle" color="#999999" :size="getPx(34)"></u-icon> >
</view> </view>
</view> <div class="btns">
<view class="right" @click="goShow()"> <a
<view class="Text"> type="primary"
<view>查看实景演示</view> @click="cancelOrder"
<image class="arrow" :style="{'height':'18rpx','width':'10rpx'}" :src="'../../../static/imgs/jiantouhui.png'" /> v-if="orderInfo.state == 1"
</view> class="btn_cancel"
</view> >取消订单</a
</view> >
<image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png" /> <a
</div> type="primary"
</div> @click="PayNow"
<div class="shop_info"> v-if="orderInfo.state == 1"
<div class="address"> class="btn"
<div class="address_1">{{ orderInfo.shop.name }}</div> >立即支付</a
<div class="address_2">{{ orderInfo.shop.address }}</div> >
</div> <a
<div v-for="item in orderInfo.orderDetails" :key="item.id"> type="primary"
<div class="goods"> @click="toRefund"
<div class="goods_item"> v-if="orderInfo.state == 2"
<image v-if="jsonParse(item.goods.pics).thumbnailApplet" :src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img" /> class="btn_cancel"
<image v-else :src="jsonParse(item.goods.pics).thumbnail" class="goods_img" /> >申请退款</a
<div class="goods_text"> >
<div class="goods_name"> <a
<div class="name">{{ item.goodsName }}</div> type="primary"
<div class="price">¥{{ Utils.isInteger(item.unitPrice) }}</div> @click="oneMoreOrder(orderInfo)"
</div> v-if="orderInfo.state != 1"
<div class="goods_psce"> class="btn"
<div class="psce_name"> >再来一单</a
<span v-for="(rule, index) in jsonParse(item.specRuleDetail)" :key="rule.specId"> >
{{ rule.ruleName }} <a
<text v-if="index != jsonParse(item.specRuleDetail).length - 1">/</text> type="primary"
</span> @click="refundInfo"
</div> v-if="checkStatus(orderInfo.state, [12, 13, 14, 15])"
<div class="size">x{{ item.num }}</div> class="btn_cancel"
</div> >退款详情</a
</div> >
</div> </div>
</div> </div>
</div> <div class="order_flow" v-if="qrShow">
<div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div>
<div class="coupon" v-if="orderInfo.couponAmount"> <div class="realQrcodeBox" v-if="qrShow && isBuild">
<div class="title">HOOLOO券</div> <image mode="aspectFit" :src="ewmImg" />
<div class="num-action"> </div>
<span class="price">-￥{{String(orderInfo.couponAmount).replace("-","")}}</span> <div v-if="qrShow && !isBuild" class="qr_code">
</div> <image
</div> mode="aspectFit"
:src="'/static/imgs/erweimazhedang.png'"
<div class="total"> class="qr"
<div class="size">共{{ totalNum }}件商品</div> />
<div class="price"> </div>
<span class="paid_in">实付</span> <!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> -->
<span class="money"><text class="money_logo">￥</text>{{ Utils.isInteger(orderInfo.paidAmount) }}</span> <canvas
</div> v-if="qrShow"
</div> class="canvas-code"
</div> canvas-id="myQrcode"
style="
<div class="order_describe"> background: #fff;
<view class="title">订单信息</view> width: 200px;
<view class="item_cont"> height: 200px;
<view class="item"> display: block;
<span class="label">下单时间：</span> left: -800rpx;
<span class="value">{{ orderInfo.createdAt }}</span> position: absolute;
</view> "
<view class="item1"> />
<span class="label">取单号码：</span> <div v-if="qrShow" class="flow_describe">
<span class="value">{{ orderInfo.orderNum }}</span> <view class="titleBox">
</view> <view class="qrcodeTitle">
<view class="item1"> <view class="title">扫码流程</view>
<span class="label">订单编号：</span> <view class="icon">
<span class="value">{{ orderInfo.orderNo }}</span> <u-icon
</view> name="question-circle"
</view> color="#999999"
</div> :size="getPx(34)"
<div class="customer_service"> ></u-icon>
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> </view>
<view class="serverBox"> </view>
<u-icon name="server-fill" color="#000000" size="16"></u-icon> <view class="right" @click="goShow()">
<span :style="{'margin-left':'16rpx'}">联系客服</span> <view class="Text">
</view> <view>查看实景演示</view>
<view> <image
<image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" /> class="arrow"
</view> :style="{ height: '18rpx', width: '10rpx' }"
</button> :src="'../../../static/imgs/jiantouhui.png'"
</div> />
<show-toast ref="toast"/> </view>
</div> </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> </template>
<script> <script>
import Order from '@/request/order'; import Order from "@/request/order";
import QRCode from '@/utils/qrCode' import QRCode from "@/utils/qrCode";
import Menu from '@/request/menu'; import Menu from "@/request/menu";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import { systemInfo } from '@/utils/mixin.js' import { systemInfo } from "@/utils/mixin.js";
import { $EventBus } from "@/utils/EventBus"; import { $EventBus } from "@/utils/EventBus";
export default { export default {
mixins: [systemInfo], mixins: [systemInfo],
onLoad(option) { onLoad(option) {
this.Authorization = uni.getStorageSync('Authorization') this.Authorization = uni.getStorageSync("Authorization");
this.initData(option) this.initData(option);
}, },
onShow() { onShow() {
uni.setStorageSync('allow',true) uni.setStorageSync("allow", true);
uni.setStorageSync('goodsList',{}) uni.setStorageSync("goodsList", {});
// this.backToMneu = false // this.backToMneu = false
}, },
// onUnload(){ // onUnload(){
// this.goBack() // this.goBack()
// }, // },
data() { data() {
return { return {
orderInfo: {}, orderInfo: {},
ewmImg: '', ewmImg: "",
Utils, Utils,
isBuild:true, isBuild: true,
waitTime:0, waitTime: 0,
backFlag:false, backFlag: false,
backToMneu:false, backToMneu: false,
Authorization:'' Authorization: "",
} };
}, },
methods: { methods: {
goShow() { goShow() {
uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'}) uni.navigateTo({ url: "/orderSubPackage/pages/showhow/index" });
}, },
refundInfo() { refundInfo() {
const { id } = this.orderInfo const { id } = this.orderInfo;
uni.setStorageSync('orderId', id); uni.setStorageSync("orderId", id);
let url = '/orderSubPackage/pages/refundInfo/index' let url = "/orderSubPackage/pages/refundInfo/index";
uni.navigateTo({ url }) uni.navigateTo({ url });
}, },
checkStatus(status,list){ checkStatus(status, list) {
if(list.includes(Number(status))){ if (list.includes(Number(status))) {
return true return true;
}else{ } else {
return false return false;
} }
}, },
getPx(rpx) { getPx(rpx) {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750))); // console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
// console.log(wx.getSystemInfoSync().windowWidth); // console.log(wx.getSystemInfoSync().windowWidth);
return rpx * (wx.getSystemInfoSync().windowWidth / 750); return rpx * (wx.getSystemInfoSync().windowWidth / 750);
}, },
goBackOrder(){ goBackOrder() {
this.backFlag = true this.backFlag = true;
this.goBack() this.goBack();
}, },
goBack(){ goBack() {
console.log(this.backToMneu,'backToMneu') console.log(this.backToMneu, "backToMneu");
if(this.backFlag){ if (this.backFlag) {
if(this.backToMneu){ if (this.backToMneu) {
uni.switchTab({ url: '/pages/menu/menu' }) uni.switchTab({ url: "/pages/menu/menu" });
}else{ } else {
uni.switchTab({ url: '/pages/order/order' }) uni.switchTab({ url: "/pages/order/order" });
} }
this.backFlag = false this.backFlag = false;
} }
}, },
async oneMoreOrder(item) { async oneMoreOrder(item) {
uni.removeStorageSync('shopCarInfo'); uni.removeStorageSync("shopCarInfo");
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
const numObj = {} const numObj = {};
const { id, shopId, orderDetails } = item; const { id, shopId, orderDetails } = item;
const newOrderDetail = [...orderDetails] const newOrderDetail = [...orderDetails];
newOrderDetail.forEach(item => { newOrderDetail.forEach((item) => {
newOrderDetail[item.skuId] = Number(item.num) newOrderDetail[item.skuId] = Number(item.num);
}) });
const { data } = await Order.moreOrder({ orderId: id, shopId }); const { data } = await Order.moreOrder({ orderId: id, shopId });
if(!data || !data.data){ if (!data || !data.data) {
this.showToast({ title: "该订单中的商品已经售罄了" }); this.showToast({ title: "这款已经卖完啦" });
return; return;
} }
let list = new Array(); let list = new Array();
data.data.forEach(item => { data.data.forEach((item) => {
const skuId = item.skus[0].skuId const skuId = item.skus[0].skuId;
const nextData = { ...item, skuId, num: newOrderDetail[skuId], flag: true, sku: item.skus[0] } const nextData = {
if (nextData.sku.state == 1) { ...item,
list.push(nextData); skuId,
} num: newOrderDetail[skuId],
}); flag: true,
if(!list || list.length<=0) { sku: item.skus[0],
this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' }); };
return; if (nextData.sku.state == 1) {
} list.push(nextData);
list.forEach(nextData => { }
Utils.getallNum(nextData); });
}) if (!list || list.length <= 0) {
this.backFlag = false this.showToast({ title: "这款已经卖完啦", icon: "error" });
uni.switchTab({ url: '/pages/menu/menu' }) return;
}, }
async initData(option){ list.forEach((nextData) => {
this.getSystemInfo() Utils.getallNum(nextData);
this.backToMneu = false });
this.backFlag = true this.backFlag = false;
let oId = uni.getStorageSync('orderId'); uni.switchTab({ url: "/pages/menu/menu" });
console.log(option,'option') },
if(JSON.stringify(option)!=='{}'&&option){ async initData(option) {
this.option = JSON.stringify(option) this.getSystemInfo();
const { orderId = '',from = '' } = option this.backToMneu = false;
// 从结算进入 this.backFlag = true;
console.log(from) let oId = uni.getStorageSync("orderId");
if(from==='settlement'){ console.log(option, "option");
uni.setStorageSync('shopCarInfo',[]) if (JSON.stringify(option) !== "{}" && option) {
this.backToMneu = true this.option = JSON.stringify(option);
} const { orderId = "", from = "" } = option;
// 从订阅消息进入 // 从结算进入
let Authorization = uni.getStorageSync('Authorization') console.log(from);
if(orderId){ if (from === "settlement") {
uni.setStorageSync("updataShopCar",false) uni.setStorageSync("shopCarInfo", []);
if(!Authorization){ this.backToMneu = true;
this.backFlag = true }
uni.switchTab({ url: '/pages/order/order' }) // 从订阅消息进入
return let Authorization = uni.getStorageSync("Authorization");
}else{ if (orderId) {
this.backFlag = false uni.setStorageSync("updataShopCar", false);
oId = orderId if (!Authorization) {
} this.backFlag = true;
} uni.switchTab({ url: "/pages/order/order" });
} return;
// return } else {
const {data = {}} = await Order.getOrderDetail({orderId:oId}) this.backFlag = false;
this.orderInfo = data?.data oId = orderId;
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})||{} // return
this.waitTime = data?.data const { data = {} } = await Order.getOrderDetail({ orderId: oId });
} this.orderInfo = data?.data;
if (isBuild) { const getTime = ["2", "3"].indexOf(this.orderInfo.state) >= 0;
// new QRCode('myQrcode', { const isBuild = ["2", "3", "4", "5"].indexOf(this.orderInfo.state) >= 0;
// text: this.orderInfo.pickCode+'###', if (getTime) {
// width: 141, //canvas 画布的宽 const { data = {} } =
// height: 141, //canvas 画布的高 (await Order.getOrderWaiteTime({ orderId: oId })) || {};
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0 this.waitTime = data?.data;
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 }
// callback: (res) => { if (isBuild) {
this.ewmImg = this.orderInfo.pickCode // new QRCode('myQrcode', {
// } // text: this.orderInfo.pickCode+'###',
// }) // width: 141, //canvas 画布的宽
} // height: 141, //canvas 画布的高
this.isBuild = isBuild // padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
}, // correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
async PayNow() { // callback: (res) => {
const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id }) this.ewmImg = this.orderInfo.pickCode;
const sendData = { // }
orderId: this.orderInfo.id, // })
switchTab:false, }
callBack:this.initData, this.isBuild = isBuild;
...orderInfo.data.data },
} async PayNow() {
if (orderInfo) { const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id });
if (orderInfo && orderInfo.data.code == 200) { const sendData = {
await Menu.requestPayment(sendData); orderId: this.orderInfo.id,
} switchTab: false,
} callBack: this.initData,
}, ...orderInfo.data.data,
toRefund() { };
uni.showModal({ if (orderInfo) {
title: '确认退款', if (orderInfo && orderInfo.data.code == 200) {
success: (res) => { await Menu.requestPayment(sendData);
if (res.confirm) { }
Order.orderRefund({ orderId: this.orderInfo.id, refundAmount: this.orderInfo.paidAmount }).then(res => { }
this.initData() },
}) toRefund() {
} else if (res.cancel) { uni.showModal({
console.log('用户点击取消'); title: "确认退款",
} success: (res) => {
if (res.confirm) {
} Order.orderRefund({
}) orderId: this.orderInfo.id,
}, refundAmount: this.orderInfo.paidAmount,
jsonParse(json) { }).then((res) => {
return JSON.parse(json) this.initData();
}, });
cancelOrder() { } else if (res.cancel) {
Order.cancelOrder({ orderId: this.orderInfo.id }).then(res => { console.log("用户点击取消");
this.backFlag = false }
uni.switchTab({ url: '/pages/menu/menu' }) },
}) });
}, },
}, jsonParse(json) {
computed: { return JSON.parse(json);
totalNum() { },
let totalNum = 0; cancelOrder() {
const {orderDetails=[]} = this.orderInfo Order.cancelOrder({ orderId: this.orderInfo.id }).then((res) => {
orderDetails.forEach(item => { this.backFlag = false;
totalNum += parseInt(item.num); uni.switchTab({ url: "/pages/menu/menu" });
}) });
return totalNum; },
}, },
computed: {
qrShow() { totalNum() {
return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0; let totalNum = 0;
}, const { orderDetails = [] } = this.orderInfo;
qrTextShow() { orderDetails.forEach((item) => {
return ['2','3'].indexOf(this.orderInfo.state) >= 0; totalNum += parseInt(item.num);
}, });
// 1 未支付 return totalNum;
// 2 已支付 },
// 3 支付制作中
// 4 制作完成未取 qrShow() {
// 5 取餐中 return ["2", "3", "4", "5"].indexOf(this.orderInfo.state) >= 0;
// 6 正常完成 },
// 7 待取超时 qrTextShow() {
// 8 未支付取消 return ["2", "3"].indexOf(this.orderInfo.state) >= 0;
// 9 支付后制作前取消 },
// 10 制作中取消 // 1 未支付
// 11 制作完成取消 // 2 已支付
// 12 退款中 // 3 支付制作中
// 13 退款失败 // 4 制作完成未取
// 14 部分退款 // 5 取餐中
// 15 已退款 // 6 正常完成
// 50 其他人工干预状态 // 7 待取超时
orderStatusText() { // 8 未支付取消
switch (this.orderInfo.state) { // 9 支付后制作前取消
case '1': // 10 制作中取消
return '待付款' // 11 制作完成取消
case '2': // 12 退款中
return '待制作' // 13 退款失败
case '3': // 14 部分退款
return '制作中' // 15 已退款
case '4': // 50 其他人工干预状态
return '待取餐' orderStatusText() {
case '5': switch (this.orderInfo.state) {
return '取餐中' case "1":
case '6': return "待付款";
case '7': case "2":
return '已完成' return "待制作";
case '8': case "3":
case '9': return "制作中";
case '10': case "4":
case '11': return "待取餐";
return '已取消' case "5":
case '12': return "取餐中";
return '退款中' case "6":
case '13': case "7":
return '退款失败' return "已完成";
case '14': case "8":
return '部分退款' case "9":
case '15': case "10":
return '已退款' case "11":
default: return "已取消";
return '未知状态' case "12":
} return "退款中";
}, case "13":
qrText() { return "退款失败";
switch (this.orderInfo.state) { case "14":
case '2': return "部分退款";
return '待制作' case "15":
case '3': return "已退款";
return '制作中' default:
default: return "未知状态";
return '' }
} },
}, qrText() {
userms() { switch (this.orderInfo.state) {
return this.$store.getters.Authorization; case "2":
}, return "待制作";
} case "3":
} return "制作中";
default:
return "";
}
},
userms() {
return this.$store.getters.Authorization;
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pages { .pages {
padding-top: 1rpx; padding-top: 1rpx;
padding-bottom: 32rpx; padding-bottom: 32rpx;
.topBar{ .topBar {
position: fixed; position: fixed;
width: 100%; width: 100%;
background: white; background: white;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-left: 34rpx; padding-left: 34rpx;
// .arrow-left { // .arrow-left {
// margin-left: 20rpx; // margin-left: 20rpx;
// } // }
.tabTitle{ .tabTitle {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
width: 79%; width: 79%;
color: #333333 color: #333333;
} }
} }
} }
.order_status { .order_status {
// max-height: 174rpx; // max-height: 174rpx;
background: #FFFFFF; background: #ffffff;
margin: 32rpx 32rpx; margin: 32rpx 32rpx;
padding: 24rpx 0rpx 32rpx 0rpx; padding: 24rpx 0rpx 32rpx 0rpx;
.status_text { .status_text {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
text-align: center; text-align: center;
} }
.tips { .tips {
text-align: center; text-align: center;
margin-top: 15rpx; margin-top: 15rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
.time { .time {
font-size: 32rpx; font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif; font-family: Futura Medium, Arial, sans-serif;
font-weight: normal; font-weight: normal;
color: #0050F6; color: #0050f6;
margin: 0 16rpx; margin: 0 16rpx;
} }
} }
.btns { .btns {
padding-top: 28rpx; padding-top: 28rpx;
text-align: center; text-align: center;
width: 428rpx; width: 428rpx;
display: flex; display: flex;
margin: 0 auto; margin: 0 auto;
justify-content: space-around; justify-content: space-around;
a { a {
line-height: 64rpx; line-height: 64rpx;
} }
} }
.btn { .btn {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
background: #0050F6; background: #0050f6;
border-radius: 2rpx; border-radius: 2rpx;
} }
.btn_cancel { .btn_cancel {
box-sizing: border-box; box-sizing: border-box;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #0050F6; color: #0050f6;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
border-radius: 2rpx; border-radius: 2rpx;
border: 2rpx solid #0050F6; border: 2rpx solid #0050f6;
} }
} }
.order_flow { .order_flow {
background: #FFFFFF; background: #ffffff;
margin: 32rpx; margin: 32rpx;
padding-top: 55.01rpx; padding-top: 55.01rpx;
.code { .code {
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
z-index:99 z-index: 99;
} }
.status_text { .status_text {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
text-align: center; text-align: center;
} }
.qr_code { .qr_code {
height: 474rpx; height: 474rpx;
width: 470rpx; width: 470rpx;
display: block; display: block;
margin-top: 36.99rpx; margin-top: 36.99rpx;
position: relative; position: relative;
padding-bottom: 40rpx; padding-bottom: 40rpx;
margin-bottom: 0rpx; margin-bottom: 0rpx;
margin-left: 108rpx; margin-left: 108rpx;
.qr { .qr {
width: 100%; width: 100%;
height: 100%; height: 100%;
vertical-align: bottom; vertical-align: bottom;
} }
} }
.scan_tips { .scan_tips {
padding-bottom: 32rpx; padding-bottom: 32rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
text-align: center; text-align: center;
} }
.realQrcodeBox{ .realQrcodeBox {
margin: 0 auto; margin: 0 auto;
width: 474.6rpx; width: 474.6rpx;
margin-top: 38rpx; margin-top: 38rpx;
margin-bottom: 37rpx; margin-bottom: 37rpx;
height: 476rpx; height: 476rpx;
overflow: hidden; overflow: hidden;
image{ image {
width: 100%; width: 100%;
height: 100%; height: 100%;
vertical-align: bottom; vertical-align: bottom;
} }
} }
.flow_describe { .flow_describe {
padding-top: 29rpx; padding-top: 29rpx;
padding-left: 32rpx; padding-left: 32rpx;
padding-right: 32rpx; padding-right: 32rpx;
padding-bottom: 60rpx; padding-bottom: 60rpx;
.titleBox { .titleBox {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
.qrcodeTitle { .qrcodeTitle {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.title { .title {
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.icon { .icon {
margin-left: 8rpx; margin-left: 8rpx;
} }
} }
.title { .title {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.right {
display: flex;
margin-left: 8rpx;
.right { margin-bottom: 1rpx;
display: flex;
margin-left: 8rpx; .Text {
margin-bottom: 1rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
.Text { font-weight: 400;
font-size: 20rpx; color: #999999;
font-family: PingFangSC-Regular, PingFang SC; display: flex;
font-weight: 400; align-items: center;
color: #999999; }
display: flex;
align-items: center; .arrow {
} margin-left: 8rpx;
}
.arrow { }
margin-left: 8rpx; }
}
} .flow_img {
} padding: 18rpx 0rpx 0rpx 32rpx;
width: 592rpx;
.flow_img { height: 244rpx;
padding: 18rpx 0rpx 0rpx 32rpx; display: block;
width: 592rpx; vertical-align: bottom;
height: 244rpx; }
display: block; }
vertical-align: bottom;
}
}
} }
.shop_info { .shop_info {
margin: 32rpx; margin: 32rpx;
background: #FFFFFF; background: #ffffff;
padding: 40rpx 32rpx 22rpx 32rpx; padding: 40rpx 32rpx 22rpx 32rpx;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.address { .address {
border-bottom: 0.1px solid #F4F4F4; border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 25rpx; padding-bottom: 25rpx;
.address_1 { .address_1 {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
} }
.address_2 { .address_2 {
margin-top: 18rpx; margin-top: 18rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 34rpx; line-height: 34rpx;
} }
} }
.goods { .goods {
// padding-top: 20rpx; // padding-top: 20rpx;
.goods_item { .goods_item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 32rpx; margin-top: 32rpx;
} }
.goods_img { .goods_img {
height: 112rpx; height: 112rpx;
width: 112rpx; width: 112rpx;
background-color: #eee; background-color: #eee;
margin-right: 24rpx; margin-right: 24rpx;
} }
.goods_text { .goods_text {
flex: 1; flex: 1;
.goods_psce, .goods_psce,
.goods_name { .goods_name {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
// align-items: center; // align-items: center;
.name { .name {
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
margin-top: 10rpx; margin-top: 10rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
} }
.price { .price {
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
margin-top: 12rpx; margin-top: 12rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.psce_name { .psce_name {
height: 34rpx; height: 34rpx;
line-height: 34rpx; line-height: 34rpx;
margin-top: 18rpx; margin-top: 18rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
.size { .size {
height: 40rpx; height: 40rpx;
line-height: 40rpx; line-height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
margin-top: 24rpx; margin-top: 24rpx;
font-family: ArialMT; font-family: ArialMT;
color: #666666; color: #666666;
} }
} }
} }
} }
.goods:last-child { .goods:last-child {
border-bottom: 1rpx solid #EEEEEE; border-bottom: 1rpx solid #eeeeee;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.discount { .discount {
margin-top: 24rpx; margin-top: 24rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-bottom: 0.1px solid #F4F4F4; border-bottom: 0.1px solid #f4f4f4;
.discount_1 { .discount_1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
.price { .price {
font-family: Arial-BoldMT, Arial;
font-family: Arial-BoldMT, Arial; font-weight: normal;
font-weight: normal; color: #eb5f17;
color: #EB5F17; }
} }
}
.concessional_rate {
.concessional_rate { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #666666;
color: #666666; margin-top: 18rpx;
margin-top: 18rpx;
.price {
.price { font-family: Arial-BoldMT, Arial;
font-family: Arial-BoldMT, Arial; font-weight: 700;
font-weight: 700; color: #000;
color: #000; }
} }
} }
}
.coupon {
.coupon { display: flex;
display: flex; align-items: center;
align-items: center; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; margin-top: 24rpx;
margin-top: 24rpx; padding-bottom: 23.57rpx;
padding-bottom: 23.57rpx; border-bottom: 1rpx solid #eeeeee;
border-bottom: 1rpx solid #EEEEEE;
.title {
.title { font-size: 28rpx;
font-size: 28rpx; font-family: ArialMT;
font-family: ArialMT; color: #333333;
color: #333333; height: 40rpx;
height: 40rpx; line-height: 40rpx;
line-height: 40rpx; }
} .num {
.num { font-size: 28rpx;
font-size: 28rpx; height: 40rpx;
height: 40rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 500;
font-weight: 500; display: flex;
display: flex; align-items: center;
align-items: center; color: #999999;
color: #999999; height: 40rpx;
height: 40rpx; line-height: 40rpx;
line-height: 40rpx; .price {
.price { font-family: Futura-Medium, Futura;
font-family: Futura-Medium, Futura; }
} .arrow-right-select {
.arrow-right-select{ width: 15.27rpx;
width: 15.27rpx; height: 19.68rpx;
height: 19.68rpx; margin-left: 8rpx;
margin-left: 8rpx; }
} }
} .num-action {
.num-action { font-size: 28rpx;
font-size: 28rpx; height: 40rpx;
height: 40rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; display: flex;
display: flex; align-items: center;
align-items: center; color: #ff63ba;
color: #FF63BA; height: 40rpx;
height: 40rpx; line-height: 40rpx;
line-height: 40rpx; .price {
.price{ font-family: Futura-Medium, Futura;
font-family: Futura-Medium, Futura; }
} .arrow-right-select {
.arrow-right-select{ width: 15.27rpx;
width: 15.27rpx; height: 19.68rpx;
height: 19.68rpx; margin-left: 8rpx;
margin-left: 8rpx; }
} }
} }
} .total {
display: flex;
.total { align-items: center;
display: flex; display: flex;
align-items: center; justify-content: space-between;
display: flex; // margin-top: 32rpx;
justify-content: space-between; padding-top: 24rpx;
// margin-top: 32rpx;
padding-top: 24rpx; .size {
height: 40rpx;
.size { line-height: 40rpx;
height: 40rpx; font-size: 28rpx;
line-height: 40rpx; font-family: PingFangSC-Regular, PingFang SC;
font-size: 28rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #666666;
font-weight: 400; }
color: #666666; .price {
display: flex;
} align-items: flex-end;
.price { .paid_in {
display: flex; height: 40rpx;
align-items: flex-end; line-height: 40rpx;
.paid_in { font-size: 28rpx;
height: 40rpx; font-family: PingFangSC-Regular, PingFang SC;
line-height: 40rpx; font-weight: 400;
font-size: 28rpx; color: #333333;
font-family: PingFangSC-Regular, PingFang SC; // vertical-align: bottom;
font-weight: 400; }
color: #333333;
// vertical-align: bottom; .money {
} height: 48rpx;
line-height: 50rpx;
.money { font-size: 36rpx;
height: 48rpx; font-family: Futura-Medium, Futura;
line-height: 50rpx; font-weight: 500;
font-size: 36rpx; color: #333333;
font-family: Futura-Medium, Futura; .money_logo {
font-weight: 500; font-weight: 900;
color: #333333; }
.money_logo { }
font-weight: 900; }
} }
}
}
}
} }
.order_describe { .order_describe {
background: #fff; background: #fff;
padding: 24rpx 32rpx 24rpx 32rpx; padding: 24rpx 32rpx 24rpx 32rpx;
margin: 32rpx 32rpx 32rpx 32rpx; margin: 32rpx 32rpx 32rpx 32rpx;
.title { .title {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
height: 40rpx; height: 40rpx;
border-bottom: 0.1px solid #F4F4F4; border-bottom: 0.1px solid #f4f4f4;
padding-bottom: 24rpx; padding-bottom: 24rpx;
} }
.item_cont { .item_cont {
padding-top: 6rpx; padding-top: 6rpx;
} }
.item1, .item1,
.item { .item {
margin-top: 20rpx; margin-top: 20rpx;
line-height: 34rpx; line-height: 34rpx;
.label { .label {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
line-height: 34rpx; line-height: 34rpx;
height: 34rpx; height: 34rpx;
} }
.value { .value {
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
color: #666666; color: #666666;
line-height: 28rpx; line-height: 28rpx;
height: 28rpx; height: 28rpx;
} }
} }
.item1 { .item1 {
margin-top: 18rpx; margin-top: 18rpx;
} }
} }
.customer_service { .customer_service {
height: 90rpx; height: 90rpx;
line-height: 90rpx; line-height: 90rpx;
background: #FFFFFF; background: #ffffff;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
padding: 0rpx 31rpx; padding: 0rpx 31rpx;
margin: 32rpx; margin: 32rpx;
.function_item_text { .function_item_text {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 10rpx 10rpx 10rpx 0rpx; padding: 10rpx 10rpx 10rpx 0rpx;
background-color: #FFFFFF; background-color: #ffffff;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
border-radius: 0px; border-radius: 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: #333333; color: #333333;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
.serverBox{ .serverBox {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
span { span {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
} }
.icno-arrow { .icno-arrow {
margin-top: 2rpx; margin-top: 2rpx;
width: 15.27rpx; width: 15.27rpx;
height: 21.68rpx; height: 21.68rpx;
} }
} }
.function_item_text::after { .function_item_text::after {
border: unset; border: unset;
} }
} }
</style> </style>
\ No newline at end of file
orderSubPackage/pages/settlement/index.vue
<template> <template>
<view class="pages"> <view class="pages">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}"> <view
<u-icon @click="returnHome?goHome():Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> class="topBar"
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">订单结算</view> :style="{
</view> 'padding-top': systemBarHeight.statusBarHeight + 'px',
<div class="shop_info" :style="{'margin-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight+Utils.getPx(32))+'px'}"> height: systemBarHeight.navigationBarHeight + 'px',
<h3>门店确认</h3> }"
<div class="address"> >
<div class="address_1">{{ shopData.name }}</div> <u-icon
<div v-if="shopData.distance && shopData.distance!=-1" class="address_2">距您{{ shopData.distance }}，请确定门店后下单</div> @click="returnHome ? goHome() : Utils.goBack()"
<div v-else class="address_2">请确定门店后下单</div> name="arrow-left"
</div> 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>
<div class="title">取单时间</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> </div>
<div class="goods_info"> <div style="height: 150rpx"></div>
<span class="goodInfoTitle">商品详细</span> <div class="footer" :style="{ 'padding-bottom': BottomSafeHeight + 'px' }">
<div class="goods" v-for="item in goods" :key="item.goodsId"> <div class="total">
<div class="goods_item"> <div class="the_sum">
<image v-if="item.pics.thumbnailApplet" class="goods_img" :src="item.pics.thumbnailApplet"/> <span class="name">实付</span>
<image v-else class="goods_img" :src="item.pics.thumbnail" /> <span class="price">￥{{ Utils.isInteger(totalPrice) }}</span>
</div>
<div class="goods_text"> <!-- <div class="sun">
<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 class="price">总优惠￥{{ reduction }}</div> <div class="price">总优惠￥{{ reduction }}</div>
</div> --> </div> -->
</div> </div>
<view v-if="userms" class="payment" @click="messageAndSave">付款</view> <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> <button
</div> v-if="!userms"
<show-toast ref="toast"/> class="payment"
<u-popup :show="messagePopup" mode="bottom" :round="5" :overlay="true" zIndex="10071" :customStyle="{'background':'#2C2C2C'}"> style="border-radius: 0"
<view class="messageBox"> open-type="getPhoneNumber"
<view class="title"> @getphonenumber="getPhoneNumber"
<image class="image" src="../../../static/imgs/messageLogo.png"></image> >
<view class="text">HOOLOO COFFEE 申请</view> 付款
</view> </button>
<view class="desc"> </div>
<view class="">发送一次以下消息</view> <show-toast ref="toast" />
</view> <u-popup
<view class="content"> :show="messagePopup"
<view class="contentItem"v-for="(item,index) in messageList" :key="index" @click="changeContentFlag(index)"> mode="bottom"
<view :class="item.status?'checked':'nochecked'" :style="{'width':'40rpx','height':'40rpx'}"></view> :round="5"
<view class="text">{{item.title}}</view> :overlay="true"
</view> zIndex="10071"
</view> :customStyle="{ background: '#2C2C2C' }"
<view class="btns"> >
<view class="cancle btn" @click="cancleMessage">取消</view> <view class="messageBox">
<view class="submit btn" @click="submitMessage">确定</view> <view class="title">
</view> <image
<view class="save"> class="image"
<view :class="saveFlag?'checked':'nochecked'" :style="{'width':'26rpx','height':'26rpx'}" @click="changeSaveFlage"></view> src="../../../static/imgs/messageLogo.png"
<view class="text" @click="changeSaveFlage">总是保持以上选择，不在询问</view> ></image>
</view> <view class="text">HOOLOO COFFEE 申请</view>
</view> </view>
</u-popup> <view class="desc">
</view> <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> </template>
<script> <script>
import { $EventBus } from "@/utils/EventBus"; import { $EventBus } from "@/utils/EventBus";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import Menu from '@/request/menu' import Menu from "@/request/menu";
import User from '@/request/user' import User from "@/request/user";
import Order from '@/request/order' import Order from "@/request/order";
export default { export default {
onHide() { onHide() {
console.log('onHide--------',this.cleanFlag,'this.cleanFlag') console.log("onHide--------", this.cleanFlag, "this.cleanFlag");
if(this.cleanFlag) { if (this.cleanFlag) {
this.goods = {} this.goods = {};
} }
}, },
onShow() { onShow() {
const allow = uni.getStorageSync('allow'); const allow = uni.getStorageSync("allow");
console.log('onshow-----------',allow,'allow') console.log("onshow-----------", allow, "allow");
if(allow) { if (allow) {
if ((JSON.stringify(this.goods)!="{}")) { if (JSON.stringify(this.goods) != "{}") {
Order.getWaitTine({ Order.getWaitTine({
shopId: uni.getStorageSync('shopData').id, shopId: uni.getStorageSync("shopData").id,
goods: this.goods goods: this.goods,
}).then(({ data }) => { }).then(({ data }) => {
this.duration = data.data this.duration = data.data;
}) });
}else{ } else {
uni.switchTab({ url: '/pages/menu/menu' }) uni.switchTab({ url: "/pages/menu/menu" });
} }
} }
this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight') this.BottomSafeHeight = uni.getStorageSync("BottomSafeHeight");
this.TermsStatus = uni.getStorageSync('TermsStatus') || false this.TermsStatus = uni.getStorageSync("TermsStatus") || false;
}, },
async onLoad(option) { async onLoad(option) {
this.returnHome = false this.returnHome = false;
uni.setStorageSync('allow',true) uni.setStorageSync("allow", true);
console.log('onload') console.log("onload");
// 清除优惠卷信息 // 清除优惠卷信息
this.$store.commit("cleanInfo",{}) this.$store.commit("cleanInfo", {});
if(!this.userms){ if (!this.userms) {
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo this.loginInfo = loginInfo;
}) });
} }
// 商品详情页点击立即支付进入 // 商品详情页点击立即支付进入
if (option.goodsList) { if (option.goodsList) {
console.log('详情进入') console.log("详情进入");
// this.getMessageFlag() // this.getMessageFlag()
const shopData = uni.getStorageSync('shopData'); const shopData = uni.getStorageSync("shopData");
this.shopData = shopData this.shopData = shopData;
this.buyType = 3; this.buyType = 3;
console.log(uni.getStorageSync('goodsList')); console.log(uni.getStorageSync("goodsList"));
this.goods = uni.getStorageSync('goodsList') || []; this.goods = uni.getStorageSync("goodsList") || [];
this.payType = '2' this.payType = "2";
this.saveGetTicket() this.saveGetTicket();
return return;
} }
// 微信扫码进入 // 微信扫码进入
this.option = JSON.stringify(option) this.option = JSON.stringify(option);
const { q } = option; const { q } = option;
// console.log(q); // console.log(q);
if (q) { if (q) {
console.log('扫码进入',q) console.log("扫码进入", q);
uni.setStorageSync("selectFlag",false) uni.setStorageSync("selectFlag", false);
// this.getMessageFlag() // this.getMessageFlag()
this.saveGetTicket() this.saveGetTicket();
User.getLocation((state, params) => { User.getLocation((state, params) => {
uni.removeStorageSync('shopCarInfo'); uni.removeStorageSync("shopCarInfo");
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
// let id = decodeURIComponent(q).split('?')[1].split('=')[1]; // let id = decodeURIComponent(q).split('?')[1].split('=')[1];
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q)) const optionDecode = Utils.getUrlParams2(decodeURIComponent(q));
console.log(optionDecode,'optionDecode') console.log(optionDecode, "optionDecode");
this.optionDecode = optionDecode this.optionDecode = optionDecode;
const loginInfo = uni.getStorageSync("loginInfo") const loginInfo = uni.getStorageSync("loginInfo");
const { id, recognizePerson } = optionDecode const { id, recognizePerson } = optionDecode;
const openid = loginInfo?JSON.parse(loginInfo).openid:"" const openid = loginInfo ? JSON.parse(loginInfo).openid : "";
const sendData = {} const sendData = {};
this.returnHome = true this.returnHome = true;
if(recognizePerson){ if (recognizePerson) {
sendData.faceInfoId = recognizePerson, (sendData.faceInfoId = recognizePerson), (sendData.openid = openid);
sendData.openid = openid }
} Menu.getScreenShopCar(id, params, sendData).then((res) => {
Menu.getScreenShopCar(id, params,sendData).then(res => { const data = JSON.parse(res.data.data);
const data = JSON.parse(res.data.data); console.log(data);
console.log(data); this.shopData = data.shop;
this.shopData = data.shop; this.buyType = data.screenNo;
this.buyType = data.screenNo; this.goods = data.goods.map((item) => {
this.goods = data.goods.map(item => { const data = { ...item, skuId: item.sku.skuId, flag: true };
const data = { ...item, skuId: item.sku.skuId, flag: true } Utils.getallNum(data, true); // 不校验数量
Utils.getallNum(data, true) // 不校验数量 return data;
return data });
}) });
}) });
}) return;
return }
}
// 购物车点击进入
// 购物车点击进入 if (uni.getStorageSync("shopCarInfo").length != 0) {
if(uni.getStorageSync('shopCarInfo').length!=0) { console.log("购物车进入");
console.log('购物车进入') // this.getMessageFlag()
// this.getMessageFlag() console.log(uni.getStorageSync("shopCarInfo"));
console.log(uni.getStorageSync('shopCarInfo')) const shopData = uni.getStorageSync("shopData");
const shopData = uni.getStorageSync('shopData'); this.shopData = shopData;
this.shopData = shopData this.buyType = 3;
this.buyType = 3; const shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
const shopCarInfo = uni.getStorageSync('shopCarInfo') || [] this.goods = shopCarInfo.filter((item) => item.flag);
this.goods = shopCarInfo.filter(item => item.flag); this.saveGetTicket();
this.saveGetTicket() return;
return }
} },
data() {
return {
}, cleanFlag: false,
data() { returnHome: false,
return { messageList: [
cleanFlag:false, {
returnHome:false, tmp: "1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU",
messageList:[ title: "下单成功通知",
{ status: true,
tmp:'1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU', },
title:'下单成功通知', {
status:true tmp: "Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM",
}, title: "订单状态变更通知",
{ status: true,
tmp:'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM', },
title:'订单状态变更通知', {
status:true tmp: "Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74",
}, title: "取餐提醒",
{ status: true,
tmp:'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74', },
title:'取餐提醒', ],
status:true saveFlag: false,
} messagePopup: false,
], goods: [],
saveFlag:false, buyType: "",
messagePopup: false, shopData: {},
goods: [], option: "",
buyType: '', payType: "1",
shopData: {}, duration: "",
option: '', loginInfo: "",
payType: '1', BottomSafeHeight: 0,
duration: '', Utils,
loginInfo: '', agreeTerms: true,
BottomSafeHeight:0, TermsStatus: true,
Utils, ticketNum: 0,
agreeTerms:true, msgInfo: {},
TermsStatus:true, sendMsgData: {
ticketNum:0, sendMsgFlag1: false,
msgInfo:{ sendMsgFlag2: false,
sendMsgFlag3: false,
}, },
sendMsgData: { optionDecode: {},
sendMsgFlag1:false, };
sendMsgFlag2:false, },
sendMsgFlag3:false computed: {
}, systemBarHeight() {
optionDecode:{} return this.$store.state.user.systemBarHeight;
} },
}, selectCoupon() {
computed: { const data = this.$store.state.order.selectTicket;
systemBarHeight(){ return data;
return this.$store.state.user.systemBarHeight },
}, userms() {
selectCoupon() { return this.$store.getters.Authorization;
const data = this.$store.state.order.selectTicket },
return data totalNum() {
}, if (JSON.stringify(this.goods) == "{}") return 0;
userms() { let totalNum = 0;
return this.$store.getters.Authorization; this.goods.map((item) => {
}, item.flag ? (totalNum += item.num) : (totalNum += 0);
totalNum() { });
if(JSON.stringify(this.goods)=='{}')return 0 return totalNum;
let totalNum = 0; },
this.goods.map(item => { reduction() {
item.flag ? totalNum += item.num : totalNum += 0 if (JSON.stringify(this.goods) == "{}") return 0;
}) let price = 0;
return totalNum let discountNum = 0;
}, this.goods.forEach((item) => {
reduction() { const sku = item.sku;
if(JSON.stringify(this.goods)=='{}')return 0 if (item.flag) {
let price = 0; discountNum += item.num * sku.discount;
let discountNum = 0; price += item.num * sku.price;
this.goods.forEach(item => { } else {
const sku = item.sku; discountNum += 0;
if (item.flag) { price += 0;
discountNum += item.num * sku.discount }
price += item.num * sku.price });
} else { return (price - discountNum).toFixed(2);
discountNum += 0 },
price += 0 amountOld() {
} if (JSON.stringify(this.goods) == "{}") return 0;
}) let totalPrice = 0;
return (price - discountNum).toFixed(2) this.goods.forEach((item) => {
}, const sku = item.sku;
amountOld() { item.flag ? (totalPrice += item.num * sku.discount) : (totalPrice += 0);
if(JSON.stringify(this.goods)=='{}')return 0 });
let totalPrice = 0;
this.goods.forEach(item => { return totalPrice.toFixed(2);
const sku = item.sku; },
item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0) totalPrice() {
}) if (JSON.stringify(this.goods) == "{}") return 0;
let totalPrice = 0;
return totalPrice.toFixed(2) this.goods.forEach((item) => {
}, const sku = item.sku;
totalPrice() { item.flag ? (totalPrice += item.num * sku.discount) : (totalPrice += 0);
if(JSON.stringify(this.goods)=='{}')return 0 });
let totalPrice = 0;
this.goods.forEach(item => { totalPrice -= this.selectCoupon.couponAmount || 0;
const sku = item.sku;
item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0) return totalPrice.toFixed(2);
}) },
},
totalPrice-=this.selectCoupon.couponAmount||0 methods: {
goHome() {
return totalPrice.toFixed(2) uni.switchTab({ url: "/pages/menu/menu" });
} },
}, getPx(rpx) {
methods: { // console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750)));
goHome() { // console.log(wx.getSystemInfoSync().windowWidth);
uni.switchTab({ url: '/pages/menu/menu' }) return rpx * (wx.getSystemInfoSync().windowWidth / 750);
}, },
getPx(rpx) { async getMessageFlag() {
// console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750))); const { data } = await User.getUserMsgInfo();
// console.log(wx.getSystemInfoSync().windowWidth); console.log(data);
return rpx * (wx.getSystemInfoSync().windowWidth / 750); const { data: newdata } = data;
}, const {
async getMessageFlag() { flagExpireDate,
const {data} = await User.getUserMsgInfo() sendMsgFlag1 = "",
console.log(data) sendMsgFlag2 = "",
const {data:newdata} = data sendMsgFlag3 = "",
const {flagExpireDate,sendMsgFlag1 = '',sendMsgFlag2 = '',sendMsgFlag3 = ''} = newdata } = newdata;
this.sendMsgData.sendMsgFlag1 = sendMsgFlag1 this.sendMsgData.sendMsgFlag1 = sendMsgFlag1;
this.sendMsgData.sendMsgFlag2 = sendMsgFlag2 this.sendMsgData.sendMsgFlag2 = sendMsgFlag2;
this.sendMsgData.sendMsgFlag3 = sendMsgFlag3 this.sendMsgData.sendMsgFlag3 = sendMsgFlag3;
this.sendMsgData.flagExpireData = flagExpireDate?Date.parse(flagExpireDate.substring(0,10)):'' this.sendMsgData.flagExpireData = flagExpireDate
}, ? Date.parse(flagExpireDate.substring(0, 10))
cancleMessage() { : "";
this.messagePopup = false },
this.sendMsgData = { cancleMessage() {
sendMsgFlag1:false, this.messagePopup = false;
sendMsgFlag2:false, this.sendMsgData = {
sendMsgFlag3:false sendMsgFlag1: false,
} sendMsgFlag2: false,
this.saveReserve() sendMsgFlag3: false,
}, };
// 保存用户通知授权信息 this.saveReserve();
async submitMessage() { },
this.messageList.forEach((item,index) => { // 保存用户通知授权信息
this.sendMsgData[`sendMsgFlag${index+1}`] = item.status async submitMessage() {
}) this.messageList.forEach((item, index) => {
let { data } = await User.setAllow({...this.sendMsgData,rememberFlag:this.saveFlag}) this.sendMsgData[`sendMsgFlag${index + 1}`] = item.status;
this.messagePopup = false });
if(data.code===200){ let { data } = await User.setAllow({
this.saveReserve() ...this.sendMsgData,
} rememberFlag: this.saveFlag,
}, });
changeContentFlag(index) { this.messagePopup = false;
this.messageList[index].status = !this.messageList[index].status if (data.code === 200) {
}, this.saveReserve();
changeSaveFlage(){ }
console.log(this.saveFlag) },
this.saveFlag = !this.saveFlag changeContentFlag(index) {
}, this.messageList[index].status = !this.messageList[index].status;
closeT(){ },
this.messagePopup = false changeSaveFlage() {
}, console.log(this.saveFlag);
// 勾选隐私协议 this.saveFlag = !this.saveFlag;
clickAgreeTerms(){ },
this.agreeTerms = !this.agreeTerms closeT() {
}, this.messagePopup = false;
// 跳转隐私协议页面 },
goTerms(type) { // 勾选隐私协议
uni.navigateTo({url:'/orderSubPackage/pages/terms/index?type='+type}) clickAgreeTerms() {
}, this.agreeTerms = !this.agreeTerms;
},
itemReduction(discount, price, num) { // 跳转隐私协议页面
return ((price - discount) * num).toFixed(2) goTerms(type) {
}, uni.navigateTo({
// 手机号授权登录 url: "/orderSubPackage/pages/terms/index?type=" + type,
getPhoneNumber(e) { });
if (e.detail.errMsg == 'getPhoneNumber:ok') { },
e.loginInfo = this.loginInfo
const { recognizePerson } = this.optionDecode itemReduction(discount, price, num) {
if(recognizePerson) { return ((price - discount) * num).toFixed(2);
e.faceInfoId = recognizePerson },
} // 手机号授权登录
User.getPhoneNumber(e); getPhoneNumber(e) {
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { if (e.detail.errMsg == "getPhoneNumber:ok") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) e.loginInfo = this.loginInfo;
} const { recognizePerson } = this.optionDecode;
}, if (recognizePerson) {
messageAndSave() { e.faceInfoId = recognizePerson;
if(!this.TermsStatus&&!this.agreeTerms){ }
this.showToast({ title: "请同意下方协议条款" }); User.getPhoneNumber(e);
return } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
}else{ this.showToast({
// if(this.agreeTerms)uni.setStorageSync('TermsStatus',true) title: "已拒绝手机号授权，请同意授权",
} icon: "error",
const tmpid = ['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU', 'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM', 'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74'] });
const val = {} }
wx.requestSubscribeMessage({ },
tmplIds: tmpid, messageAndSave() {
success: (res) => { if (!this.TermsStatus && !this.agreeTerms) {
const finalValue = Object.values(res).indexOf('reject') this.showToast({ title: "请勾选下方协议条款" });
tmpid.forEach(item=>{ return;
val[item] = res[item]==='accept'?true:false } else {
}) // if(this.agreeTerms)uni.setStorageSync('TermsStatus',true)
if(finalValue===-1){ }
uni.setStorageSync('isMessage', 'true') const tmpid = [
// User.setAllow(1) "1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU",
this.saveReserve(val) "Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM",
}else{ "Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74",
// User.setAllow(2) ];
this.saveReserve(val) const val = {};
} wx.requestSubscribeMessage({
}, tmplIds: tmpid,
fail: (err) => { success: (res) => {
tmpid.forEach(item=>{ const finalValue = Object.values(res).indexOf("reject");
val[item] = false tmpid.forEach((item) => {
}) val[item] = res[item] === "accept" ? true : false;
console.log(err); });
// User.setAllow(2) if (finalValue === -1) {
this.saveReserve(val) uni.setStorageSync("isMessage", "true");
} // User.setAllow(1)
}) this.saveReserve(val);
}, } else {
// 组装数据 // User.setAllow(2)
AssemblyOrder(){ this.saveReserve(val);
let list = []; }
if (this.payType == '1') { },
list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true); fail: (err) => {
} else { tmpid.forEach((item) => {
list = uni.getStorageSync('goodsList').filter((v) => v.flag == true); val[item] = false;
} });
return Utils.AssemblyOrder(this.shopData, this.totalPrice, this.totalNum, this.buyType, list); console.log(err);
}, // User.setAllow(2)
// 结算组装数据获取优惠卷列表 this.saveReserve(val);
async saveGetTicket() { },
// 组装购物车数据或者立即支付数据 });
const res = this.AssemblyOrder() },
if(res){ // 组装数据
const {data:list} = await Menu.requestTicketList(res); AssemblyOrder() {
const {data:num} = await Menu.requestTicketNum(res); let list = [];
if(list.code==200){ if (this.payType == "1") {
const {data} = list list = uni.getStorageSync("shopCarInfo").filter((v) => v.flag == true);
this.ticketList = data } else {
this.$store.commit('setTickerList',this.ticketList) list = uni.getStorageSync("goodsList").filter((v) => v.flag == true);
} }
if(num.code==200){ return Utils.AssemblyOrder(
const {data} = num this.shopData,
this.ticketNum = data this.totalPrice,
} this.totalNum,
} this.buyType,
}, list
//结算组装数据发起订单 );
async saveReserve(val = {}) { },
uni.setStorageSync('allow',false) // 结算组装数据获取优惠卷列表
// 组装购物车数据或者立即支付数据 async saveGetTicket() {
let list = []; // 组装购物车数据或者立即支付数据
if (this.payType == '1') { const res = this.AssemblyOrder();
list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true); if (res) {
} else { const { data: list } = await Menu.requestTicketList(res);
list = uni.getStorageSync('goodsList').filter((v) => v.flag == true); const { data: num } = await Menu.requestTicketNum(res);
} if (list.code == 200) {
const location = uni.getStorageSync("location") const { data } = list;
const {lat,lng} = location this.ticketList = data;
// sendMsgFlag1：下单成功通知 this.$store.commit("setTickerList", this.ticketList);
// sendMsgFlag2：订单状态变更通知 }
// sendMsgFlag3：取餐提醒 if (num.code == 200) {
const sendMsgFlag1 = val['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU']?1:0 const { data } = num;
const sendMsgFlag2 = val['Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM']?1:0 this.ticketNum = data;
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 async saveReserve(val = {}) {
const sendData = { uni.setStorageSync("allow", false);
...resule, // 组装购物车数据或者立即支付数据
amount:this.amountOld, let list = [];
paidAmount:amount, if (this.payType == "1") {
lat, list = uni.getStorageSync("shopCarInfo").filter((v) => v.flag == true);
lng, } else {
sendMsgFlag1, list = uni.getStorageSync("goodsList").filter((v) => v.flag == true);
sendMsgFlag2, }
sendMsgFlag3 const location = uni.getStorageSync("location");
} const { lat, lng } = location;
if(JSON.stringify(this.selectCoupon)!="{}"){ // sendMsgFlag1：下单成功通知
sendData.couponId = this.selectCoupon.id||'', // sendMsgFlag2：订单状态变更通知
sendData.couponAmount = this.selectCoupon.couponAmount||0 // sendMsgFlag3：取餐提醒
} const sendMsgFlag1 = val["1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU"]
let orderInfo = await Menu.saveReserve(sendData); ? 1
if (orderInfo && orderInfo.data.code == 200) { : 0;
// const {} const sendMsgFlag2 = val["Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM"]
await Menu.requestPayment(orderInfo.data.data, res, this.buyType, this.agreeTerms); ? 1
this.cleanFlag = true : 0;
}else{ const sendMsgFlag3 = val["Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74"]
? 1
} : 0;
} let res = await Utils.AssemblyOrder(
}, this.shopData,
goCouponSelect() { this.totalPrice,
uni.navigateTo({ url: `/orderSubPackage/pages/coupon/index` }) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pages { .pages {
padding-top: 1rpx; padding-top: 1rpx;
.topBar{ .topBar {
position: fixed; position: fixed;
width: 100%; width: 100%;
background: white; background: white;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
padding-left: 34rpx; padding-left: 34rpx;
// .arrow-left { // .arrow-left {
// margin-left: 20rpx; // margin-left: 20rpx;
// } // }
.tabTitle{ .tabTitle {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
width: 79%; width: 79%;
color: #333333 color: #333333;
} }
} }
} }
.messageBox { .messageBox {
padding: 58rpx 32rpx 60rpx 32rpx; padding: 58rpx 32rpx 60rpx 32rpx;
.title { .title {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.image { .image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
} }
.text { .text {
margin-left: 8rpx; margin-left: 8rpx;
font-size: 24prx; font-size: 24prx;
font-family: ArialMT; font-family: ArialMT;
color: #DDDDDD; color: #dddddd;
} }
} }
.desc { .desc {
padding-top: 36rpx; padding-top: 36rpx;
font-size: 26rpx; font-size: 26rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #DDDDDD; color: #dddddd;
} }
.content { .content {
margin-top: 35rpx; margin-top: 35rpx;
.contentItem{ .contentItem {
padding: 26rpx 0rpx; padding: 26rpx 0rpx;
border-bottom: 1rpx solid #303030; border-bottom: 1rpx solid #303030;
display: flex; display: flex;
align-items: center; align-items: center;
.checked{ .checked {
background: url('../../../static/imgs/messageXuanzhong.png') center center no-repeat; background: url("../../../static/imgs/messageXuanzhong.png") center
background-size:100% 100%; center no-repeat;
border-radius: 50%; background-size: 100% 100%;
} border-radius: 50%;
.nochecked{ }
background: url('../../../static/imgs/messageWeixuanzhong.png') center center no-repeat; .nochecked {
background-size:100% 100%; background: url("../../../static/imgs/messageWeixuanzhong.png") center
border-radius: 50%; center no-repeat;
} background-size: 100% 100%;
border-radius: 50%;
.text { }
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; .text {
font-weight: 400; font-size: 28rpx;
color: #DDDDDD; font-family: PingFangSC-Regular, PingFang SC;
margin-left: 28rpx; font-weight: 400;
} color: #dddddd;
} margin-left: 28rpx;
} }
}
.btns { }
margin-top: 69.26rpx;
display: flex; .btns {
justify-content: center; margin-top: 69.26rpx;
display: flex;
.btn { justify-content: center;
width: 198rpx;
height: 66rpx; .btn {
text-align: center; width: 198rpx;
line-height: 60rpx; height: 66rpx;
border-radius: 8rpx; text-align: center;
} line-height: 60rpx;
border-radius: 8rpx;
.cancle { }
color: #DDDDDD;
background: #3D3D3D; .cancle {
margin-right: 14rpx; color: #dddddd;
} background: #3d3d3d;
margin-right: 14rpx;
.submit { }
margin-left: 14rpx;
color: #DDDDDD; .submit {
background: #58BE6C; margin-left: 14rpx;
} color: #dddddd;
} background: #58be6c;
}
.save { }
margin-top:39.82rpx;
display: flex; .save {
justify-content: center; margin-top: 39.82rpx;
align-items: center; display: flex;
justify-content: center;
.checked{ align-items: center;
background: url('../../../static/imgs/messageXuanzhong.png') center center no-repeat;
background-size:100% 100%; .checked {
border-radius: 50%; background: url("../../../static/imgs/messageXuanzhong.png") center center
} no-repeat;
.nochecked{ background-size: 100% 100%;
background: url('../../../static/imgs/messageWeixuanzhong.png') center center no-repeat; border-radius: 50%;
background-size:100% 100%; }
border-radius: 50%; .nochecked {
} background: url("../../../static/imgs/messageWeixuanzhong.png") center
center no-repeat;
.text { background-size: 100% 100%;
font-size: 23rpx; border-radius: 50%;
font-family: PingFangSC-Regular, PingFang SC; }
font-weight: 400;
color: #DDDDDD; .text {
margin-left: 10rpx; font-size: 23rpx;
} font-family: PingFangSC-Regular, PingFang SC;
} font-weight: 400;
color: #dddddd;
margin-left: 10rpx;
}
}
} }
.shop_info { .shop_info {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #ffffff;
margin: 0 auto; margin: 0 auto;
margin-top: 32rpx; margin-top: 32rpx;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
box-sizing: border-box; box-sizing: border-box;
h3 {
h3 { font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; font-weight: 500;
font-weight: 500; color: #333333;
color: #333333; }
}
.address {
.address { margin-top: 17.81rpx;
margin-top: 17.81rpx; border-bottom: 0.1px solid #f4f4f4;
border-bottom: 0.1px solid #F4F4F4; padding-bottom: 25.02rpx;
padding-bottom: 25.02rpx; margin-bottom: 23.83rpx;
margin-bottom: 23.83rpx;
.address_1 {
.address_1 { font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx; font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC; color: #333333;
font-weight: 500; }
color: #333333;
} .address_2 {
margin-top: 18rpx;
.address_2 { font-size: 24rpx;
margin-top: 18rpx; font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #999999;
font-weight: 400; }
color: #999999; }
}
} .title {
font-size: 28rpx;
.title { font-family: PingFangSC-Medium, PingFang SC;
font-size: 28rpx; font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC; color: #333333;
font-weight: 500; }
color: #333333;
} .time {
font-size: 24rpx;
.time { font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #999999;
font-weight: 400;
color: #999999; .min {
color: #0050f6;
.min { font-size: 32rpx;
color: #0050F6; font-family: Futura-Medium, Futura;
font-size: 32rpx; font-weight: normal;
font-family: Futura-Medium, Futura; margin: 0 8rpx;
font-weight: normal; display: inline-block;
margin: 0 8rpx; }
display: inline-block; }
}
}
} }
.goods_info { .goods_info {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #ffffff;
margin: 0 auto; margin: 0 auto;
margin-top: 32rpx; margin-top: 32rpx;
padding: 26rpx 30rpx 24rpx 30rpx; padding: 26rpx 30rpx 24rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
.goodInfoTitle {
.goodInfoTitle { height: 40rpx;
height: 40rpx; font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; color: #333333;
color: #333333; line-height: 40rpx;
line-height: 40rpx; }
}
.goods {
.goods { margin-top: 24rpx;
margin-top: 24rpx; border-bottom: 0.1px solid #f4f4f4;
border-bottom: 0.1px solid #F4F4F4; padding-bottom: 32rpx;
padding-bottom: 32rpx;
.goods_item {
.goods_item { display: flex;
display: flex; align-items: center;
align-items: center; }
}
.goods_img {
.goods_img { height: 112rpx;
height: 112rpx; width: 112rpx;
width: 112rpx; background-color: #eee;
background-color: #eee; margin-right: 32rpx;
margin-right: 32rpx; }
}
.goods_text {
.goods_text { flex: 1;
flex: 1;
.goods_psce,
.goods_psce, .goods_name {
.goods_name { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center;
.name {
.name { font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #666666;
color: #666666; }
}
.price {
.price { font-size: 28rpx;
font-size: 28rpx; font-family: Futura-Medium, Futura;
font-family: Futura-Medium, Futura; font-weight: 500;
font-weight: 500; color: #333333;
color: #333333; }
}
.psce_name {
.psce_name { font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #999999;
color: #999999; }
}
.size {
.size { font-size: 24rpx;
font-size: 24rpx; font-family: ArialMT;
font-family: ArialMT; color: #666666;
color: #666666; }
} }
}
.goods_psce {
.goods_psce { margin-top: 18.65rpx;
margin-top: 18.65rpx; }
} }
} }
}
.discount {
.discount { margin-top: 25rpx;
margin-top: 25rpx;
.discount_1 {
.discount_1 { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 600;
font-weight: 600; color: #333333;
color: #333333;
.price {
.price { font-family: Arial-BoldMT, Arial;
font-family: Arial-BoldMT, Arial; font-weight: normal;
font-weight: normal; color: #eb5f17;
color: #EB5F17; }
} }
}
.concessional_rate {
.concessional_rate { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #666666;
color: #666666; margin-top: 18rpx;
margin-top: 18rpx;
.price {
.price { font-family: Arial-BoldMT, Arial;
font-weight: 700;
font-family: Arial-BoldMT, Arial; color: #000;
font-weight: 700; }
color: #000; }
} }
}
} .coupon {
display: flex;
.coupon { align-items: center;
display: flex; display: flex;
align-items: center; justify-content: space-between;
display: flex; margin-top: 24.38rpx;
justify-content: space-between; margin-bottom: 23.57rpx;
margin-top: 24.38rpx;
margin-bottom: 23.57rpx; .title {
font-size: 28rpx;
.title { font-family: ArialMT;
font-size: 28rpx; color: #333333;
font-family: ArialMT; height: 40rpx;
color: #333333; line-height: 40rpx;
height: 40rpx; }
line-height: 40rpx; .num {
} font-size: 28rpx;
.num { height: 40rpx;
font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC;
height: 40rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; display: flex;
font-weight: 400; align-items: center;
display: flex; color: #999999;
align-items: center; height: 40rpx;
color: #999999; line-height: 40rpx;
height: 40rpx; .price {
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;
font-family: Futura-Medium, Futura; 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; line-height: 40rpx;
} }
} }
.priceBox{ .priceBox {
display: flex; display: flex;
align-items: center; align-items: center;
.paid_in { .paid_in {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
.money { .money {
font-weight: 500; font-weight: 500;
font-size: 36rpx; font-size: 36rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
color: #333333; color: #333333;
// vertical-align: middle; // vertical-align: middle;
line-height: 40rpx; line-height: 40rpx;
} }
} }
}
}
} }
.Payment_method { .Payment_method {
width: 686rpx; width: 686rpx;
margin: 32rpx auto 0; margin: 32rpx auto 0;
padding: 26rpx 30rpx; padding: 26rpx 30rpx;
background: #FFFFFF; background: #ffffff;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
.type { .type {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
.icon { .icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin-right: 8rpx; margin-right: 8rpx;
} }
} }
} }
.TermsOfAgreement { .TermsOfAgreement {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-top: 31rpx; margin-top: 31rpx;
margin-left: 32rpx; margin-left: 32rpx;
.content { .content {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
line-height: 34rpx; line-height: 34rpx;
span { span {
color: #0050F6; 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;
} }
}
.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 { .footer {
height: 100rpx; height: 100rpx;
background: #fff; background: #fff;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
.total { .total {
flex: 1; flex: 1;
padding-left: 30rpx; padding-left: 30rpx;
.the_sum { .the_sum {
display: flex; display: flex;
align-items: center; align-items: center;
.name { .name {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
.price { .price {
margin-left: 13.36rpx; margin-left: 13.36rpx;
font-size: 36rpx; font-size: 36rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
} }
} }
.sun { .sun {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FF0E00; color: #ff0e00;
margin-top: 10rpx; margin-top: 10rpx;
} }
} }
.payment { .payment {
width: 200rpx; width: 200rpx;
height: 100%; height: 100%;
background: #0050F6; background: #0050f6;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
line-height: 100rpx; line-height: 100rpx;
text-align: center; text-align: center;
} }
} }
</style> </style>
\ No newline at end of file
pages/menu/menu.vue
<template> <template>
<view class="menu-box"> <view class="menu-box">
<view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}"> <view class="menu-banner" :style="{ height: buied ? '360rpx' : '450rpx' }">
<!-- <image :src="img"/> --> <!-- <image :src="img"/> -->
<ImageLoader :defaultSrc="'../../static/imgs/shouyezhanweitu.png'" :realSrc="img" width="100%" height="400rpx"/> <ImageLoader
<!-- <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" /> --> :defaultSrc="'../../static/imgs/shouyezhanweitu.png'"
<!-- <HomeBanner /> --> :realSrc="img"
<view class="shop-info" :style="'top:100rpx'"> width="100%"
<view class="shop-box"> height="400rpx"
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text> />
<image class="arrow-right-select" :src="'../../static/imgs/jiantoubai.png'" /> <!-- <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" /> -->
</view> <!-- <HomeBanner /> -->
<view v-if="shopInfo.distance && shopInfo.distance!=-1" class="distance">距您{{ shopInfo.distance }}</view> <view class="shop-info" :style="'top:100rpx'">
</view> <view class="shop-box">
<view class="login-area"> <text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
<view class="avatar"> <image
<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/touxiang.png'"></image> class="arrow-right-select"
</view> :src="'../../static/imgs/jiantoubai.png'"
<view class="user-info" @click="goToMyPage(userms)"> />
<view class="user-infocontent"> </view>
<view class="user-name" v-if="userms">Hi！{{ userInfo.customerName || '我是谁' }}</view> <view
<view class="user-name" v-else>未登录</view> v-if="shopInfo.distance && shopInfo.distance != -1"
<view class="dialog"> class="distance"
<view class="content" v-if="userms">{{dayTitle}}</view> >距您{{ shopInfo.distance }}</view
<view class="content" v-if="!userms">请您尽快登录～</view> >
</view> </view>
</view> <view class="login-area">
<view> <view class="avatar">
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> <image
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" :src="
@getphonenumber="getPhoneNumber">立即登录 userInfo.avatarUrl
</button> ? userInfo.avatarUrl
</view> : '../../static/touxiang.png'
</view> "
</view> ></image>
</view> </view>
<view class="order-banner" v-if="buied" @click="openQrcode"> <view class="user-info" @click="goToMyPage(userms)">
<view class="info"> <view class="user-infocontent">
<view class="first">取单码：<text class="first-code">{{ orderInfo.orderNum }}</text></view> <view class="user-name" v-if="userms"
<view class="second1" v-if="orderInfo.state =='4'">订单已制作完成，请尽快取餐~</view> >Hi！{{ userInfo.customerName || "我是谁" }}</view
<view class="second" v-else>请您耐心等候，剩余等候时间<text class="time">{{ orderInfo.waitTime }}</text>分钟</view> >
</view> <view class="user-name" v-else>未登录</view>
<view class="line"></view> <view class="dialog">
<view class="barCode-box"> <view class="content" v-if="userms">{{ dayTitle }}</view>
<view class="barCode"> <view class="content" v-if="!userms">请您尽快登录～</view>
<image :src="'/static/imgs/icon-barcode.png'"></image> </view>
</view> </view>
<view class="barCode-dis">点击二维码取单</view> <view>
</view> <image
</view> class="arrow-right-select"
<MenuAssembly ref="MenuAssembly" @getallNum="getallNum" :buied="buied" :shopState="shopState" :isInRange="isInRange"/> v-if="userms"
<!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns" :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> --> @confirm="confirm" keyName="name" @change="changeHandler"></u-picker> -->
<AreaPicker ref="AreaPicker" /> <AreaPicker ref="AreaPicker" />
<OrderQrCode ref="OrderQrCode" /> <OrderQrCode ref="OrderQrCode" />
<canvas class="canvas-code" canvas-id="myQrcode2" <canvas
style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" /> class="canvas-code"
<show-toast ref="toast"/> canvas-id="myQrcode2"
<taBar select="0"></taBar> style="
<ShopCar ref="shopbar" :shopState="shopState" :isInRange="isInRange"/> background: #fff;
</view> 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> </template>
<script> <script>
import MenuAssembly from '@/components/menuAssembly' import MenuAssembly from "@/components/menuAssembly";
import ImageLoader from '@/components/ImageLoader/index.vue' import ImageLoader from "@/components/ImageLoader/index.vue";
import AreaPicker from '@/components/AreaPicker/index.vue' import AreaPicker from "@/components/AreaPicker/index.vue";
import HomeBanner from '@/components/canvas/HomeBanner.vue' import HomeBanner from "@/components/canvas/HomeBanner.vue";
import User from '@/request/user' import User from "@/request/user";
import ShopCar from '../../components/shopCar/shopCar.vue' import ShopCar from "../../components/shopCar/shopCar.vue";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import Menu from '@/request/menu' import Menu from "@/request/menu";
import { $EventBus } from '@/utils/EventBus'; import { $EventBus } from "@/utils/EventBus";
import Store from '@/store'; import Store from "@/store";
import Order from '@/request/order' import Order from "@/request/order";
import OrderQrCode from '@/components/OrderQrCode' import OrderQrCode from "@/components/OrderQrCode";
import QRCode from '@/utils/qrCode' import QRCode from "@/utils/qrCode";
export default { export default {
components: { ShopCar, MenuAssembly, OrderQrCode, AreaPicker, ImageLoader, HomeBanner }, components: {
data() { ShopCar,
return { MenuAssembly,
shopInfo: { name: '请选择' },// 店铺信息 OrderQrCode,
buied: false,//控制首页取单码区域显隐 AreaPicker,
orderInfo: {},//即将取餐的订单信息 ImageLoader,
classifyData: [], HomeBanner,
customerName: '', },
loginInfo:"", data() {
img:'', return {
isInRange:true, shopInfo: { name: "请选择" }, // 店铺信息
dayTitle:'' buied: false, //控制首页取单码区域显隐
}; orderInfo: {}, //即将取餐的订单信息
}, classifyData: [],
computed: { customerName: "",
shopState() { loginInfo: "",
console.log(this.shopInfo) img: "",
const { shopInfo } = this isInRange: true,
const {startTime,endTime,state} = shopInfo dayTitle: "",
if(!startTime||!endTime||!state) return true };
function getNowFormatDate() { },
let date = new Date(), computed: {
seperator1 = '/', //格式分隔符 shopState() {
year = date.getFullYear(), //获取完整的年份(4位) console.log(this.shopInfo);
month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月) const { shopInfo } = this;
strDate = date.getDate() // 获取当前日(1-31) const { startTime, endTime, state } = shopInfo;
if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0 if (!startTime || !endTime || !state) return true;
if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0 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 let currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate return currentdate;
} }
const startTimeNew = Date.parse(getNowFormatDate()+ ' ' +startTime+':00') const startTimeNew = Date.parse(
const endTimeNew = Date.parse(getNowFormatDate()+ ' ' +endTime+':00') getNowFormatDate() + " " + startTime + ":00"
if(startTimeNew<new Date().valueOf()&&new Date().valueOf()<endTimeNew&&state===1) { );
uni.setStorageSync("shopState",true) const endTimeNew = Date.parse(getNowFormatDate() + " " + endTime + ":00");
return true if (
}else{ startTimeNew < new Date().valueOf() &&
uni.setStorageSync("shopState",false) new Date().valueOf() < endTimeNew &&
return false state === 1
} ) {
}, uni.setStorageSync("shopState", true);
userms() { return true;
return this.$store.getters.Authorization; } else {
}, uni.setStorageSync("shopState", false);
userInfo() { return false;
return this.$store.state.user.userInfo; }
}, },
}, userms() {
created() { return this.$store.getters.Authorization;
let platform = uni.getSystemInfoSync().platform; },
uni.downloadFile({ userInfo() {
url: 'https://hooloo-dev-api.gdatac.com/resources/menu.mp4', //仅为示例，并非真实的资源 return this.$store.state.user.userInfo;
success: (res) => { },
if (res.statusCode === 200) { },
console.log(res); created() {
this.img = res.tempFilePath let platform = uni.getSystemInfoSync().platform;
} uni.downloadFile({
} url: "https://hooloo-dev-api.gdatac.com/resources/menu.mp4", //仅为示例，并非真实的资源
}); success: (res) => {
// if(platform == 'android'){ if (res.statusCode === 200) {
// this.img = '../../static/imgs/shouyezhanweitu.png' console.log(res);
// }else{ this.img = res.tempFilePath;
// this.img = 'https://s3.bmp.ovh/imgs/2022/07/02/2cfab823b35322e3.gif' }
// } },
}, });
onLoad: async function (option) { // if(platform == 'android'){
// 通过扫码进入 // this.img = '../../static/imgs/shouyezhanweitu.png'
const{q} = option // }else{
if(q){ // this.img = 'https://s3.bmp.ovh/imgs/2022/07/02/2cfab823b35322e3.gif'
const optionDecode = Utils.getUrlParams2(decodeURIComponent(q)) // }
console.log(Utils.getUrlParams2(decodeURIComponent(q)),this.userInfo) },
const {num,serial_no,source} = optionDecode onLoad: async function (option) {
if(source&&this.userms) { // 通过扫码进入
const sendData = { const { q } = option;
phone:this.userInfo.phoneNumber, if (q) {
user_id:this.userInfo.id, const optionDecode = Utils.getUrlParams2(decodeURIComponent(q));
source:source, console.log(Utils.getUrlParams2(decodeURIComponent(q)), this.userInfo);
param:JSON.stringify({ const { num, serial_no, source } = optionDecode;
serial_no, if (source && this.userms) {
num const sendData = {
}) phone: this.userInfo.phoneNumber,
} user_id: this.userInfo.id,
Menu.sendUserCoupon(sendData) source: source,
}else{ param: JSON.stringify({
Store.commit('setMenuOption', optionDecode); serial_no,
} num,
} }),
uni.getSetting({ };
success: (res) => { Menu.sendUserCoupon(sendData);
// 已经授权位置不获取默认店铺 } else {
if(res.authSetting['scope.userLocation']){ Store.commit("setMenuOption", optionDecode);
User.getLocation((state, params) => { }
if(state != 1) { }
return; uni.getSetting({
} success: (res) => {
this.getShopMenus(params); // 已经授权位置不获取默认店铺
}); if (res.authSetting["scope.userLocation"]) {
} else { User.getLocation((state, params) => {
// this.getShopMenus(); if (state != 1) {
this.authLocation(); return;
} }
} this.getShopMenus(params);
}) });
if(!this.userms){ } else {
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ // this.getShopMenus();
this.loginInfo = loginInfo this.authLocation();
}) }
} },
}, });
onHide() { if (!this.userms) {
this.$refs.shopbar.showShopCar = false; User.wxLoginAndGetOpenid(true).then((loginInfo) => {
}, this.loginInfo = loginInfo;
// 微信小程序右上角分享 });
onShareAppMessage() { }
return this.getShareData(); },
}, onHide() {
async onShow() { this.$refs.shopbar.showShopCar = false;
const dayTitleList = [ },
'呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~', // 微信小程序右上角分享
'随手一杯好咖啡，希望你今天，明天，天天都开心~', 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(); "呼噜咖啡由37%的咖啡加63%的生活构成~",
uni.setStorageSync("updataLoadtion",false) ];
} this.dayTitle = dayTitleList[new Date().getDay()];
this.getHomeOrder() uni.setStorageSync("selectFlag", false);
}, const updataLoactionFlag = uni.getStorageSync("updataLoadtion");
methods: { if (updataLoactionFlag) {
getShareData(type) { this.authLocation();
let title = "随手一杯好咖啡"; uni.setStorageSync("updataLoadtion", false);
let path = `/pages/menu/menu`; }
let imageUrl = "../../static/imgs/shareImg.png"; this.getHomeOrder();
return { },
title, methods: {
imageUrl, getShareData(type) {
path, let title = "随手一杯好咖啡";
} let path = `/pages/menu/menu`;
}, let imageUrl = "../../static/imgs/shareImg.png";
getShopMenus(params) { return {
$EventBus.$off('getMenuList'); title,
$EventBus.$on('getMenuList', (data) => { imageUrl,
if(this.shopInfo && this.shopInfo.id != data.id) { path,
// 切换店铺清空购物车 };
if(this.shopInfo.id){ },
uni.removeStorageSync('shopCarInfo'); getShopMenus(params) {
$EventBus.$emit('updateCar'); $EventBus.$off("getMenuList");
} $EventBus.$on("getMenuList", (data) => {
} if (this.shopInfo && this.shopInfo.id != data.id) {
this.shopInfo = data; // 切换店铺清空购物车
uni.setStorageSync("shopInfo",JSON.stringify(this.shopInfo)) if (this.shopInfo.id) {
this.getMenuList(data.id); uni.removeStorageSync("shopCarInfo");
this.getHomeOrder(data.id) $EventBus.$emit("updateCar");
// 判断店铺是否在范围内 }
const shopInfo = uni.getStorageSync("shopInfo") }
const {distanceLimit,realDistance} = JSON.parse(shopInfo) this.shopInfo = data;
const distance = realDistance/1000 uni.setStorageSync("shopInfo", JSON.stringify(this.shopInfo));
if(!distanceLimit){ this.getMenuList(data.id);
this.isInRange = true this.getHomeOrder(data.id);
}else{ // 判断店铺是否在范围内
console.log(parseInt(distance),parseInt(distanceLimit),JSON.parse(shopInfo)) const shopInfo = uni.getStorageSync("shopInfo");
this.isInRange = parseInt(distance)<parseInt(distanceLimit) const { distanceLimit, realDistance } = JSON.parse(shopInfo);
} const distance = realDistance / 1000;
uni.setStorageSync("isInRange",this.isInRange) if (!distanceLimit) {
}); this.isInRange = true;
User.getShopInfo(params); } else {
}, console.log(
async getHomeOrder(id = this.shopInfo.id){ parseInt(distance),
if (!this.userms) return; parseInt(distanceLimit),
const res = await Order.getHomeOrder({shopId:id}) JSON.parse(shopInfo)
const data = res?.data );
if (data?.data) { this.isInRange = parseInt(distance) < parseInt(distanceLimit);
// this.$set(data.data, 'state', '2'); }
// console.log("getHomeOrder:"+JSON.stringify(data.data)); uni.setStorageSync("isInRange", this.isInRange);
this.buied = true; });
this.orderInfo = data.data User.getShopInfo(params);
} else { },
this.buied = false async getHomeOrder(id = this.shopInfo.id) {
} if (!this.userms) return;
}, const res = await Order.getHomeOrder({ shopId: id });
openQrcode() { const data = res?.data;
// 不生成二维码 if (data?.data) {
// if(['2', '3'].indexOf(this.orderInfo.state) != -1){ // this.$set(data.data, 'state', '2');
// this.$refs.OrderQrCode.open(this.orderInfo, ""); // console.log("getHomeOrder:"+JSON.stringify(data.data));
// return; this.buied = true;
// } else { this.orderInfo = data.data;
this.$refs.OrderQrCode.open(this.orderInfo, this.orderInfo.pickCode) } 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', { // new QRCode('myQrcode2', {
// text: this.orderInfo.pickCode, // text: this.orderInfo.pickCode,
// width: 141, //canvas 画布的宽 // width: 141, //canvas 画布的宽
// height: 141, //canvas 画布的高 // height: 141, //canvas 画布的高
// padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0 // padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
// correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 // correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
// callback: (res) => { // callback: (res) => {
// this.$refs.OrderQrCode.open(this.orderInfo, res.path) // this.$refs.OrderQrCode.open(this.orderInfo, res.path)
// } // }
// }) // })
}, },
showArea() { showArea() {
console.log(this.$refs) console.log(this.$refs);
this.$refs.AreaPicker.showArea() this.$refs.AreaPicker.showArea();
}, },
// 手机号授权登录 // 手机号授权登录
getPhoneNumber(e) { getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') { if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo e.loginInfo = this.loginInfo;
User.getPhoneNumber(e,this.getHomeOrder); User.getPhoneNumber(e, this.getHomeOrder);
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) this.showToast({
} title: "已拒绝手机号授权，请同意授权",
}, icon: "error",
// 获取定位授权 });
authLocation(callback) { }
uni.getSetting({ },
success: (res) => { // 获取定位授权
uni.authorize({ authLocation(callback) {
scope: 'scope.userLocation', uni.getSetting({
success: () => { //1.1 允许授权 success: (res) => {
// console.log("允许授权位置"); uni.authorize({
User.getLocation((state, params) => { scope: "scope.userLocation",
if(state != 1){ success: () => {
return; //1.1 允许授权
} // console.log("允许授权位置");
callback ? callback(params) : this.getShopMenus(params); User.getLocation((state, params) => {
}); if (state != 1) {
}, return;
fail: (err) => { //1.2 拒绝授权 }
this.getShopMenus(); callback ? callback(params) : this.getShopMenus(params);
wx.exitMiniProgram({ success: (res) => { } }) });
// console.log("获取位置失败") },
this.showToast({ "title" : "获取位置失败,请打开位置授权", icon : 'error'}) fail: (err) => {
} //1.2 拒绝授权
}) this.getShopMenus();
} wx.exitMiniProgram({ success: (res) => {} });
}) // console.log("获取位置失败")
}, this.showToast({
async getMenuList(id) { title: "获取位置失败，请同意授权",
let { data } = await Menu.getMenuList(id); icon: "error",
// 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 getMenuList(id) {
} let { data } = await Menu.getMenuList(id);
}, // console.log("menus:"+JSON.stringify(data));
// 加入购物车数据 if (data.code == 200) {
async getallNum(item, category) { data.data = data.data;
let itemCopy = JSON.parse(JSON.stringify(item)); this.$store.commit("setMenuAllInfo", data.data);
const sku = itemCopy.skus.find(v => v.isDefault == 1); this.$store.commit("setMenuCategorys", data.data.categorys);
const {data} = await Order.checkSku({skuId:sku.skuId}) uni.setStorageSync("countOfOrder", parseInt(data.data.countOfOrder));
const {state,goods} = data.data // this.$refs.MenuAssembly.createList(data.data.categorys)
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){ async getallNum(item, category) {
this.showToast({ title: '默认规格已售罄,已添加其他规格', icon: 'none' }); let itemCopy = JSON.parse(JSON.stringify(item));
itemCopy.skus = [newsku]; const sku = itemCopy.skus.find((v) => v.isDefault == 1);
itemCopy.sku = newsku const { data } = await Order.checkSku({ skuId: sku.skuId });
itemCopy.skuId = newsku?.skuId const { state, goods } = data.data;
itemCopy.num = 1; const newsku =
itemCopy.flag = true; goods.skus.find((v) => v.isDefault == 1 && v.state != 2) ||
itemCopy.categoryId = category.id; goods.skus.find((v) => v.isDefault == 0 && v.state != 2);
itemCopy.goodsName = category.name; if (state == 2) {
Utils.getallNum(itemCopy); if (newsku) {
} if (newsku.isDefault != 1) {
}else{ this.showToast({
this.showToast({ title: '本商品已经售罄', icon: 'none' }); title: "默认规格已售罄,已添加其他规格",
return; icon: "none",
} });
}else{ itemCopy.skus = [newsku];
itemCopy.skus = [newsku]; itemCopy.sku = newsku;
itemCopy.sku = newsku itemCopy.skuId = newsku?.skuId;
itemCopy.skuId = newsku?.skuId itemCopy.num = 1;
itemCopy.num = 1; itemCopy.flag = true;
itemCopy.flag = true; itemCopy.categoryId = category.id;
itemCopy.categoryId = category.id; itemCopy.goodsName = category.name;
itemCopy.goodsName = category.name; Utils.getallNum(itemCopy);
Utils.getallNum(itemCopy); }
} } else {
return this.showToast({ title: "这款已经卖完啦", icon: "none" });
}, return;
goToMyPage(logined) { }
logined && uni.switchTab({ url: '/pages/mine/mine' }) } 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-box { .menu-box {
min-height: 100vh; min-height: 100vh;
.shop-info { .shop-info {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
left: 32rpx; left: 32rpx;
color: #FFFFFF; color: #ffffff;
.shop-box { .shop-box {
font-size: 32rpx; font-size: 32rpx;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
display: flex; display: flex;
align-items: center; align-items: center;
height: 62rpx; height: 62rpx;
line-height: 62rpx; line-height: 62rpx;
.shop-name { .shop-name {
margin-right: 12rpx; margin-right: 12rpx;
flex: 1; flex: 1;
font-size: 32rpx; font-size: 32rpx;
} }
.arrow-right-select { .arrow-right-select {
width: 15.27rpx; width: 15.27rpx;
height: 21.68rpx; height: 21.68rpx;
// border: 3rpx solid #FFFFFF // border: 3rpx solid #FFFFFF
} }
} }
.distance { .distance {
height: 46rpx; height: 46rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 42rpx; line-height: 42rpx;
} }
} }
} }
.menu-banner { .menu-banner {
height: 40rpx; height: 40rpx;
position: relative; position: relative;
video { video {
width: 100%; width: 100%;
height: 400rpx; height: 400rpx;
}
} image {
image { width: 100%;
width: 100%; height: 400rpx;
height: 400rpx; }
}
.login-area { .login-area {
display: flex; display: flex;
width: 686rpx; width: 686rpx;
height: 104rpx; height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx; padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: -2rpx; bottom: -2rpx;
left: 33rpx; left: 33rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
z-index: 9; z-index: 9;
.avatar { .avatar {
display: flex; display: flex;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;
margin-right: 16.93rpx; margin-right: 16.93rpx;
border-radius: 72rpx; border-radius: 72rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 72rpx; border-radius: 72rpx;
}; }
} }
.user-info { .user-info {
display: flex; display: flex;
align-items: center; align-items: center;
width: 530.55rpx; width: 530.55rpx;
justify-content:space-between; justify-content: space-between;
flex-wrap:nowrap; flex-wrap: nowrap;
.user-name { .user-name {
margin-top: 2.68rpx; margin-top: 2.68rpx;
font-size: 24rpx; font-size: 24rpx;
font-weight: normal; font-weight: normal;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
color: #333333; color: #333333;
} }
.dialog { .dialog {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-top: 4.64rpx; margin-top: 4.64rpx;
.content { .content {
flex: 1; flex: 1;
} }
} }
.arrow-right-select{ .arrow-right-select {
width: 15.27rpx; width: 15.27rpx;
height: 21.68rpx; height: 21.68rpx;
} }
} }
.login-btn { .login-btn {
// width: 114rpx; // width: 114rpx;
margin-right: -5rpx; margin-right: -5rpx;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
background: #0050F6; background: #0050f6;
border-radius: 2rpx; border-radius: 2rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 64rpx; line-height: 64rpx;
} }
} }
} }
.order-banner { .order-banner {
width: 718rpx; width: 718rpx;
height: 179rpx; height: 179rpx;
background: #FFFFFF; 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-shadow: -2px -2px 8px 0px rgba(102, 102, 102, 0.1),
box-sizing: border-box; 2px 2px 8px 0px rgba(102, 102, 102, 0.1);
position: relative; box-sizing: border-box;
left: 16rpx; position: relative;
top: 0rpx; left: 16rpx;
z-index: 10; top: 0rpx;
display: flex; z-index: 10;
justify-content: flex-start; display: flex;
justify-content: flex-start;
.info { .info {
padding-left: 34.48rpx; padding-left: 34.48rpx;
.first { .first {
height: 44rpx; height: 44rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #666666; color: #666666;
line-height: 44rpx; line-height: 44rpx;
margin-top: 44rpx; margin-top: 44rpx;
.first-code{ .first-code {
font-family: Arial, Helvetica SC; font-family: Arial, Helvetica SC;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
} }
.second1, .second1,
.second { .second {
margin-top: 12rpx; margin-top: 12rpx;
width: 400rpx; width: 400rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
letter-spacing: 0rpx; letter-spacing: 0rpx;
text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1); text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1);
white-space: nowrap; white-space: nowrap;
.time { .time {
font-size: 32rpx; font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif; font-family: Futura Medium, Arial, sans-serif;
font-weight: normal; font-weight: normal;
color: #0050F6; color: #0050f6;
margin: 0 16rpx; margin: 0 16rpx;
} }
} }
.second1 { .second1 {
margin-top: 20rpx; margin-top: 20rpx;
} }
} }
.line { .line {
width: 4rpx; width: 4rpx;
height: 104rpx; height: 104rpx;
border-right: 1rpx solid #E8E8E8; border-right: 1rpx solid #e8e8e8;
position: absolute; position: absolute;
left: 510rpx; left: 510rpx;
box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1);
top: 36rpx; top: 36rpx;
} }
.barCode-box { .barCode-box {
margin-top: 30rpx; margin-top: 30rpx;
margin-left: 115rpx; margin-left: 115rpx;
width: 150rpx; width: 150rpx;
height: 122rpx; height: 122rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
flex-direction: column; flex-direction: column;
.barCode { .barCode {
width: 86rpx; width: 86rpx;
height: 86rpx; height: 86rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.barCode-dis { .barCode-dis {
text-align: center; text-align: center;
margin-top: 12rpx; margin-top: 12rpx;
font-size: 16rpx; font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
line-height: 22rpx; line-height: 22rpx;
} }
} }
} }
</style> </style>
pages/mine/mine.vue
<template> <template>
<view class="pages"> <view class="pages">
<view class="menu-banner"> <view class="menu-banner">
<view class="log"> <view class="log">
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> --> <!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> --> <!-- <view class="logText">未 来 咖 啡</view> -->
</view> </view>
<image :src="img"/> <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> --> <!-- <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="mod11" @click="goToPage('userInfo')">
<view class="avatar"> <view class="avatar">
<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/touxiang.png'"></image> <image
</view> :src="
<view class="user-info"> userInfo.avatarUrl
<view class="user-infocontent"> ? userInfo.avatarUrl
<view class="user-name" v-if="userms">HI！{{ userInfo.customerName || '我是谁' }}</view> : '../../static/touxiang.png'
<view class="user-name" v-else>未登录</view> "
<view class="dialog"> ></image>
<view class="content" v-if="userms">{{dayTitle}}</view> </view>
<view class="content" v-if="!userms">请您尽快登录～</view> <view class="user-info">
</view> <view class="user-infocontent">
</view> <view class="user-name" v-if="userms"
<view> >HI！{{ userInfo.customerName || "我是谁" }}</view
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> >
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" <view class="user-name" v-else>未登录</view>
@getphonenumber="getPhoneNumber">立即登录 <view class="dialog">
</button> <view class="content" v-if="userms">{{ dayTitle }}</view>
</view> <view class="content" v-if="!userms">请您尽快登录～</view>
</view> </view>
</view> </view>
</view> <view>
<image
<!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> --> class="arrow-right-select"
<view class="contents" v-if="userms"> v-if="userms"
<view class="myOrder" @click="goToPage('order')"> :src="'../../static/imgs/jiantouhei.png'"
<view class="text">我的订单</view> />
<view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view> <button
</view> class="login-btn"
<view class="line"></view> v-if="!userms"
<view class="right_box"> open-type="getPhoneNumber"
<view class="box" @click.stop="goToPage('coupon')"> @getphonenumber="getPhoneNumber"
<view class="left"> >
<view class="text">HOOLOO券</view> 立即登录
<view class="tickNum" v-if="tickNum"><span :style="{'color':'#FA5151'}">{{tickNum}}</span>张可用</view> </button>
</view> </view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view> </view>
</view> </view>
<view class="line"></view> </view>
<view class="box_two" @click="goToPage('msg')">
<view class="left"> <!-- <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button> -->
<view class="text">我的消息</view> <view class="contents" v-if="userms">
</view> <view class="myOrder" @click="goToPage('order')">
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view> <view class="text">我的订单</view>
</view> <view class="iconbox"
</view> ><image class="icon" src="/static/imgs/dingdan.png"></image
</view> ></view>
<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}"> </view>
<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="line"></view>
<view class="text">我的订单</view> <view class="right_box">
<view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view> <view class="box" @click.stop="goToPage('coupon')">
</button> <view class="left">
<view class="line"></view> <view class="text">HOOLOO券</view>
<view class="right_box"> <view class="tickNum" v-if="tickNum"
<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;"> ><span :style="{ color: '#FA5151' }">{{ tickNum }}</span
<view class="left"> >张可用</view
<view class="text">HOOLOO券</view> >
</view> </view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view> <view class="right"
</button> ><image class="icon" src="/static/imgs/youhuijuan.png"></image
<view class="line"></view> ></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>
<view class="left"> <view class="line"></view>
<view class="text">我的消息</view> <view class="box_two" @click="goToPage('msg')">
</view> <view class="left">
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view> <view class="text">我的消息</view>
</button> </view>
</view> <view class="right"
</view> ><image class="icon" src="/static/imgs/xiaoxi.png"></image
<view v-if="userms" class="function"> ></view>
<view class="title">常用功能</view> </view>
<view class="function_item"> </view>
<u-icon name="server-fill" color="#000000" size="16"></u-icon> </view>
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系客服</button> <view
<view class="function_item_icon"> class="contents"
<image :style="{'height':'100%','width':'100%'}" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" /> v-if="!userms"
</view> :style="{ 'padding-bottom': '65rpx' }"
</view> >
</view> <button
<taBar select="2"></taBar> class="myOrder"
<show-toast ref="toast"/> open-type="getPhoneNumber"
</view> @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> </template>
<script> <script>
import User from '@/request/user' import User from "@/request/user";
export default { export default {
onLoad() { onLoad() {
if(!this.userms){ if (!this.userms) {
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo this.loginInfo = loginInfo;
}) });
} }
let platform = uni.getSystemInfoSync().platform; let platform = uni.getSystemInfoSync().platform;
if(platform == 'android'){ if (platform == "android") {
this.img = '../../static/imgs/wodezhanweitu.png' this.img = "../../static/imgs/wodezhanweitu.png";
}else{ } else {
this.img = 'https://s3.bmp.ovh/imgs/2022/07/05/1768111c5c7f5300.gif' this.img = "https://s3.bmp.ovh/imgs/2022/07/05/1768111c5c7f5300.gif";
} }
}, },
async onShow() { async onShow() {
const dayTitleList = [ const dayTitleList = [
'呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~', "呼噜咖啡，用对待人生的态度，做一杯专业好咖啡~",
'随手一杯好咖啡，希望你今天，明天，天天都开心~', "随手一杯好咖啡，希望你今天，明天，天天都开心~",
'咖啡哪有打工苦，喝完这杯再上班~', "咖啡哪有打工苦，喝完这杯再上班~",
'今天不听大道理，只喝专业好咖啡~', "今天不听大道理，只喝专业好咖啡~",
'来杯美式，少点破事~', "来杯美式，少点破事~",
'用咖啡拯救疲惫的灵魂~', "用咖啡拯救疲惫的灵魂~",
'呼噜咖啡由37%的咖啡加63%的生活构成~' "呼噜咖啡由37%的咖啡加63%的生活构成~",
] ];
this.dayTitle = dayTitleList[new Date().getDay()] this.dayTitle = dayTitleList[new Date().getDay()];
if(this.userInfo){ if (this.userInfo) {
const {data} = await User.getCouponNum() const { data } = await User.getCouponNum();
this.tickNum = data?.data||0 this.tickNum = data?.data || 0;
} }
}, },
// 微信小程序右上角分享 // 微信小程序右上角分享
onShareAppMessage() { onShareAppMessage() {
return this.getShareData(); return this.getShareData();
}, },
data() { data() {
return { return {
loginInfo:"", loginInfo: "",
img:'', img: "",
tickNum:0, tickNum: 0,
dayTitle:'', dayTitle: "",
} };
}, },
computed: { computed: {
userms() { userms() {
return this.$store.getters.Authorization; return this.$store.getters.Authorization;
}, },
userInfo() { userInfo() {
return this.$store.state.user.userInfo; return this.$store.state.user.userInfo;
}, },
}, },
methods: { methods: {
getShareData(type) { getShareData(type) {
let title = "随手一杯好咖啡"; let title = "随手一杯好咖啡";
let path = `/pages/menu/menu`; let path = `/pages/menu/menu`;
let imageUrl = "../../static/imgs/shareImg.png"; let imageUrl = "../../static/imgs/shareImg.png";
return { return {
title, title,
imageUrl, imageUrl,
path, path,
} };
}, },
// 手机号授权登录 // 手机号授权登录
getPhoneNumber(e) { getPhoneNumber(e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') { if (e.detail.errMsg == "getPhoneNumber:ok") {
e.loginInfo = this.loginInfo e.loginInfo = this.loginInfo;
User.getPhoneNumber(e,async ()=>{ User.getPhoneNumber(e, async () => {
setTimeout(async () => { setTimeout(async () => {
const {data:couponData} = await User.getCouponNum() const { data: couponData } = await User.getCouponNum();
this.tickNum = couponData?.data||0 this.tickNum = couponData?.data || 0;
}, 1000); }, 1000);
});
}); } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { this.showToast({
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) title: "已拒绝手机号授权，请同意授权",
} icon: "error",
}, });
goToPage(page) { }
page == 'coupon' && uni.navigateTo({ url: '/mineSubPackage/pages/coupon/index' }) },
if (!this.userms) { goToPage(page) {
// this.loginByPhoneNumber(page) page == "coupon" &&
return uni.navigateTo({ url: "/mineSubPackage/pages/coupon/index" });
} if (!this.userms) {
page == 'order' && uni.switchTab({ url: '/pages/order/order' }) // this.loginByPhoneNumber(page)
page == 'msg' && uni.navigateTo({ url: '/mineSubPackage/pages/msg/index' }) return;
if(page == 'userInfo'){ }
// console.log(this.userInfo,'this.userInfo') page == "order" && uni.switchTab({ url: "/pages/order/order" });
// if(this.userInfo.avatarUrl){ page == "msg" &&
// uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index'}) uni.navigateTo({ url: "/mineSubPackage/pages/msg/index" });
// }else{ if (page == "userInfo") {
// wx.getUserProfile({ // console.log(this.userInfo,'this.userInfo')
// desc:'用于完善用户资料', // if(this.userInfo.avatarUrl){
// success:(res)=>{ // uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index'})
const {userInfo} = this // }else{
console.log(userInfo,'userInfo') // wx.getUserProfile({
let defaultImg = "https://hooloo-mp.oss-cn-shanghai.aliyuncs.com/resources/touxiang.png"; // desc:'用于完善用户资料',
const Info = JSON.stringify({ // success:(res)=>{
avatarUrl:userInfo.avatarUrl||defaultImg, const { userInfo } = this;
gender:userInfo.gender, console.log(userInfo, "userInfo");
nickName:userInfo.customerName let defaultImg =
}) "https://hooloo-mp.oss-cn-shanghai.aliyuncs.com/resources/touxiang.png";
// console.log(res) const Info = JSON.stringify({
page == 'userInfo' && uni.navigateTo({ url: '/mineSubPackage/pages/userInfo/index?info='+encodeURIComponent(Info) }) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
button::after { button::after {
border: none; border: none;
} }
.payment { .payment {
border-radius: 0; border-radius: 0;
display: block; display: block;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
left: 0; left: 0;
} }
.menu-box {} .menu-box {
}
.menu-banner { .menu-banner {
position: relative; position: relative;
height: 504rpx; height: 504rpx;
image { image {
height: 400rpx; height: 400rpx;
} }
.log { .log {
position: absolute; position: absolute;
z-index: 99; z-index: 99;
top: 100rpx; top: 100rpx;
left: 30rpx; left: 30rpx;
.logImg { .logImg {
width: 312rpx; width: 312rpx;
height: 72rpx; height: 72rpx;
} }
.logText { .logText {
font-size: 42rpx; font-size: 42rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
color: #FFFFFF; color: #ffffff;
} }
} }
video { video {
width: 100%; width: 100%;
height: 376rpx; height: 376rpx;
} }
} }
.mod11 { .mod11 {
display: flex; display: flex;
width: 686rpx; width: 686rpx;
height: 104rpx; height: 104rpx;
padding: 16rpx 32rpx 16rpx 32rpx; padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff; background: #ffffff;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 52rpx; bottom: 52rpx;
left: 33rpx; left: 33rpx;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
z-index: 9; z-index: 9;
.avatar {
display: flex;
.avatar { justify-items: center;
display: flex; align-items: center;
justify-items: center; width: 72rpx;
align-items: center; height: 72rpx;
width: 72rpx; margin-right: 16.93rpx;
height: 72rpx; border-radius: 72rpx;
margin-right: 16.93rpx; image {
border-radius: 72rpx; width: 100%;
image { height: 100%;
width: 100%; border-radius: 72rpx;
height: 100%; }
border-radius: 72rpx; }
};
} .user-info {
display: flex;
.user-info { align-items: center;
display: flex; width: 530.55rpx;
align-items: center; justify-content: space-between;
width: 530.55rpx; flex-wrap: nowrap;
justify-content:space-between; .user-name {
flex-wrap:nowrap; margin-top: 2.68rpx;
.user-name { font-size: 24rpx;
margin-top: 2.68rpx; font-weight: normal;
font-size: 24rpx; font-family: Arial-BoldMT, Arial;
font-weight: normal; color: #333333;
font-family: Arial-BoldMT, Arial; }
color: #333333;
} .dialog {
font-size: 20rpx;
.dialog { font-family: PingFangSC-Regular, PingFang SC;
font-size: 20rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #666666;
font-weight: 400; margin-top: 4.64rpx;
color: #666666;
margin-top: 4.64rpx; .content {
flex: 1;
.content { }
flex: 1; }
} .arrow-right-select {
} width: 15.27rpx;
.arrow-right-select{ height: 21.68rpx;
width: 15.27rpx; }
height: 21.68rpx; }
}
} .login-btn {
// width: 114rpx;
.login-btn { margin-right: -5rpx;
// width: 114rpx; width: 167rpx;
margin-right: -5rpx; height: 64rpx;
width: 167rpx; background: #0050f6;
height: 64rpx; border-radius: 2rpx;
background: #0050F6; text-align: center;
border-radius: 2rpx; font-size: 24rpx;
text-align: center; font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #ffffff;
font-weight: 400; line-height: 64rpx;
color: #FFFFFF; }
line-height: 64rpx;
}
} }
.mod11::after{ .mod11::after {
border-radius: 0rpx; border-radius: 0rpx;
} }
.contents { .contents {
display: flex; display: flex;
padding: 52rpx 64rpx 52rpx 70rpx; padding: 52rpx 64rpx 52rpx 70rpx;
margin: -28rpx 32rpx 24rpx 32rpx; margin: -28rpx 32rpx 24rpx 32rpx;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #FFFFFF; background: #ffffff;
// background: #0000FF; // background: #0000FF;
.myOrder { .myOrder {
height: 216rpx; height: 216rpx;
// background: #FF0000; // background: #FF0000;
background: #FFFFFF; background: #ffffff;
align-items: center; align-items: center;
text-align: left; text-align: left;
.text { .text {
margin-top: 5.02rpx; margin-top: 5.02rpx;
font-size: 28rpx; font-size: 28rpx;
height: 40rpx; height: 40rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
width: 112rpx; width: 112rpx;
line-height: 40rpx; line-height: 40rpx;
margin-right: 70.46rpx; margin-right: 70.46rpx;
color: #333333; color: #333333;
} }
.desc { .desc {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #323232; color: #323232;
margin-top: 10rpx; margin-top: 10rpx;
} }
.iconbox { .iconbox {
width: 99.94rpx; width: 99.94rpx;
height: 110rpx; height: 110rpx;
margin-left: 6rpx; margin-left: 6rpx;
margin-top: 48.98rpx; margin-top: 48.98rpx;
} }
.icon { .icon {
width: 99.94rpx; width: 99.94rpx;
height: 110rpx; height: 110rpx;
margin: 0 auto; margin: 0 auto;
} }
} }
.line{ .line {
height: 216rpx; height: 216rpx;
background: #E4E4E4; background: #e4e4e4;
border: 1rpx solid #E4E4E4; border: 1rpx solid #e4e4e4;
} }
.right_box { .right_box {
flex: 1; flex: 1;
// background: #00FF00; // background: #00FF00;
width: 306rpx; width: 306rpx;
height: 216rpx; height: 216rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-left: 62.54rpx; padding-left: 62.54rpx;
.box_two { .box_two {
width: 100%; width: 100%;
overflow: initial; overflow: initial;
height: 69rpx; height: 69rpx;
// background: #FF0000; // background: #FF0000;
line-height: 30rpx; line-height: 30rpx;
background: #FFFFFF; background: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
.left { .left {
text-align: center; text-align: center;
width: 154rpx; width: 154rpx;
.text { .text {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
} }
.desc { .desc {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #323232; color: #323232;
margin-top: 10rpx margin-top: 10rpx;
} }
} }
.right { .right {
.icon { .icon {
width: 93.89rpx; width: 93.89rpx;
height: 72.21rpx; height: 72.21rpx;
} }
} }
} }
.box_two::after{ .box_two::after {
line-height: 30rpx; line-height: 30rpx;
} }
.line { .line {
width: 306rpx; width: 306rpx;
height: 2rpx; height: 2rpx;
border: 1rpx solid #E4E4E4; border: 1rpx solid #e4e4e4;
margin: 38rpx 0rpx 40rpx 0rpx; margin: 38rpx 0rpx 40rpx 0rpx;
} }
.box { .box {
margin-top: 4.05rpx; margin-top: 4.05rpx;
overflow: initial; overflow: initial;
width: 100%; width: 100%;
height: 129rpx; height: 129rpx;
line-height: 30rpx; line-height: 30rpx;
// background: #FF0000; // background: #FF0000;
background: #FFFFFF; background: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
.left { .left {
text-align: center; text-align: center;
width: 154rpx; width: 154rpx;
.text { .text {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
} }
.tickNum { .tickNum {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
position: absolute; position: absolute;
left: 40rpx; left: 40rpx;
bottom: -18rpx; bottom: -18rpx;
} }
.desc { .desc {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #323232; color: #323232;
margin-top: 10rpx margin-top: 10rpx;
} }
} }
.right { .right {
.icon { .icon {
width: 91.59rpx; width: 91.59rpx;
height: 63.9rpx; height: 63.9rpx;
} }
} }
} }
.box::after{ .box::after {
line-height: 30rpx; line-height: 30rpx;
} }
} }
} }
.function { .function {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #ffffff;
margin: 0 auto; margin: 0 auto;
padding: 21.72rpx 30rpx 29.28rpx 26rpx; padding: 21.72rpx 30rpx 29.28rpx 26rpx;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
} }
.function_item { .function_item {
display: flex; display: flex;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
line-height: 34rpx; line-height: 34rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 22rpx; margin-top: 22rpx;
.function_item_text { .function_item_text {
flex: 1; flex: 1;
margin: 0; margin: 0;
margin-left: 12rpx; margin-left: 12rpx;
padding: 10rpx; padding: 10rpx;
text-align: left; text-align: left;
line-height: 1; line-height: 1;
background-color: #FFFFFF; background-color: #ffffff;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx; font-size: 24rpx;
border-radius: 0px; border-radius: 0px;
} }
.function_item_text::after { .function_item_text::after {
position: unset !important; position: unset !important;
border: unset; border: unset;
} }
.function_item_icon { .function_item_icon {
margin-left: 6rpx; margin-left: 6rpx;
width: 15.27rpx; width: 15.27rpx;
height: 21.68rpx; height: 21.68rpx;
} }
} }
} }
</style> </style>
\ No newline at end of file
pages/order/order.vue
<template> <template>
<view class="pages"> <view class="pages">
<view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}"> <view
<!-- <u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> --> class="topBar"
<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">我的订单</view> :style="{
</view> 'padding-top': systemBarHeight.statusBarHeight + 'px',
<view v-show="false">{{userms}}</view> height: systemBarHeight.navigationBarHeight + 'px',
<view :style="{'padding-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}"> }"
<view class="empty" v-show="userms && empty == true"> >
<view :style="{'text-align':'center'}"> <!-- <u-icon @click="Utils.goBack()" name="arrow-left" color="#000000" size="20"></u-icon> -->
<image class="empty_icon" src="/static/imgs/wudingdanzhanweitu.png"></image> <view
</view> class="tabTitle"
<view class="empty_text">——您还未下单，下单品尝一下吧——</view> :style="{ 'line-height': systemBarHeight.navigationBarHeight + 'px' }"
<button class="empty_button" @click="goHome">去品尝</button> >我的订单</view
</view> >
<view class="empty_notdl" v-show="!userms"> </view>
<view :style="{'text-align':'center'}"> <view v-show="false">{{ userms }}</view>
<image class="empty_icon" src="/static/imgs/weidengluzhanweitu.png"></image> <view
</view> :style="{
<view class="empty_text">——您还未登录，请先登录——</view> 'padding-top':
<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">去登录</button> systemBarHeight.statusBarHeight +
</view> systemBarHeight.navigationBarHeight +
<view class="orders" :style="{'padding-bottom':orderBottom+'rpx'}"> 'px',
<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)"> }"
<view class="order_header"> >
<view> <view class="empty" v-show="userms && empty == true">
<view class="order_adrass">{{ item.shop.name }}</view> <view :style="{ 'text-align': 'center' }">
<view class="order_time">{{ item.createdAt }}</view> <image
</view> class="empty_icon"
<view class="order_status"> src="/static/imgs/wudingdanzhanweitu.png"
<text>{{ getStateText(item.state) }}</text> ></image>
<image class="xiaojiantou" src="@/static/imgs/xiaojiantou.png"/> </view>
</view> <view class="empty_text">——您还未下单，下单品尝一下吧——</view>
</view> <button class="empty_button" @click="goHome">去品尝</button>
<div class="order_content"> </view>
<view class="order_content_box1"> <view class="empty_notdl" v-show="!userms">
<view class="goods_item" v-for="(good,index) in item.orderDetails" :key="good.id"> <view :style="{ 'text-align': 'center' }">
<image class="goods_img" v-if="jsonParse(good.goods.pics).thumbnailApplet" :src="jsonParse(good.goods.pics).thumbnailApplet"></image> <image
<image v-else class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image> class="empty_icon"
src="/static/imgs/weidengluzhanweitu.png"
<view class="goods_text"> ></image>
<view class="goods_title">{{ good.goodsName }}</view> </view>
<view class="goods_spce"> <view class="empty_text">——您还未登录，请先登录——</view>
<view> <button
<span v-for="(rule, index) in jsonParse(good.specRuleDetail)" :key="rule.specId"> class="empty_button"
{{ rule.ruleName }} open-type="getPhoneNumber"
<span v-if="index!=jsonParse(good.specRuleDetail).length-1">/</span> @getphonenumber="getPhoneNumber"
</span> >
</view> 去登录
<view class="numbox"> </button>
×{{ good.num }} </view>
<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 class="orders" :style="{ 'padding-bottom': orderBottom + 'rpx' }">
</view> <view
</view> class="order_item"
</view> v-for="item in list"
<view v-if="index==item.orderDetails.length-1 && (item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5)" class="qr_code"> :key="item.id"
<image class="qr_code_img" src="/static/imgs/icon-barcode.png"></image> @click="openInfo(item)"
<view class="qr_text">点击二维码取单</view> >
</view> <view class="order_header">
</view> <view>
</view> <view class="order_adrass">{{ item.shop.name }}</view>
</div> <view class="order_time">{{ item.createdAt }}</view>
<view class="order_footer" :style="{'margin-top':checkStatus(item.state,[12,13,14,15])?'16rpx':'39rpx'}"> </view>
<view class="total"> <view class="order_status">
共{{ orderDetailsSize(item.orderDetails) }}件商品 实付<text class="price">￥{{ Utils.isInteger(item.paidAmount) }}</text> <text>{{ getStateText(item.state) }}</text>
</view> <image class="xiaojiantou" src="@/static/imgs/xiaojiantou.png" />
<a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立即支付</a> </view>
<a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a> </view>
</view> <div class="order_content">
</view> <view class="order_content_box1">
</view> <view
</view> class="goods_item"
v-for="(good, index) in item.orderDetails"
<show-toast ref="toast"/> :key="good.id"
<taBar select="1"></taBar> >
</view> <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> </template>
<script> <script>
import order from '@/request/order' import order from "@/request/order";
import Menu from '@/request/menu'; import Menu from "@/request/menu";
import Utils from '@/utils/utils' import Utils from "@/utils/utils";
import User from '@/request/user' import User from "@/request/user";
import { $EventBus } from "@/utils/EventBus"; import { $EventBus } from "@/utils/EventBus";
export default { export default {
onLoad() { onLoad() {
if(!this.userms){ if (!this.userms) {
User.wxLoginAndGetOpenid(true).then(loginInfo=>{ User.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.loginInfo = loginInfo this.loginInfo = loginInfo;
}) });
} }
}, },
name: 'order', name: "order",
data() { data() {
return { return {
empty: false, empty: false,
list: [], list: [],
loginInfo:"", loginInfo: "",
Utils, Utils,
orderBottom:0 orderBottom: 0,
} };
}, },
onShow() { onShow() {
this.getList() this.getList();
}, },
mounted() { mounted() {
this.orderBottom = uni.getStorageSync('orderBottom') this.orderBottom = uni.getStorageSync("orderBottom");
// this.getList() // this.getList()
}, },
computed: { computed: {
userms() { userms() {
return this.$store.getters.Authorization; return this.$store.getters.Authorization;
}, },
systemBarHeight(){ systemBarHeight() {
return this.$store.state.user.systemBarHeight return this.$store.state.user.systemBarHeight;
}, },
}, },
methods: { methods: {
refundInfo(item) { refundInfo(item) {
const { id } = item const { id } = item;
uni.setStorageSync('orderId', id); uni.setStorageSync("orderId", id);
let url = '/orderSubPackage/pages/refundInfo/index' let url = "/orderSubPackage/pages/refundInfo/index";
uni.navigateTo({ url }) uni.navigateTo({ url });
}, },
checkStatus(status,list){ checkStatus(status, list) {
if(list.includes(Number(status))){ if (list.includes(Number(status))) {
return true return true;
}else{ } else {
return false return false;
} }
}, },
getStateText(state) { getStateText(state) {
state = '' + state; state = "" + state;
switch (state) { switch (state) {
case '1': case "1":
return '待付款' return "待付款";
case '2': case "2":
return '待制作' return "待制作";
case '3': case "3":
return '制作中' return "制作中";
case '4': case "4":
return '待取餐' return "待取餐";
case '5': case "5":
return '取餐中' return "取餐中";
case '6': case "6":
case '7': case "7":
return '已完成' return "已完成";
case '8': case "8":
case '9': case "9":
case '10': case "10":
case '11': case "11":
return '已取消' return "已取消";
case '12': case "12":
return '退款中' return "退款中";
case '13': case "13":
return '退款失败' return "退款失败";
case '14': case "14":
return '部分退款' return "部分退款";
case '15': case "15":
return '已退款' return "已退款";
default: default:
return '未知状态' return "未知状态";
} }
}, },
async oneMoreOrder(item) { async oneMoreOrder(item) {
// 清空购物车 // 清空购物车
uni.removeStorageSync('shopCarInfo'); uni.removeStorageSync("shopCarInfo");
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
// //
const numObj = {} const numObj = {};
const { id, shopId, orderDetails } = item; const { id, shopId, orderDetails } = item;
orderDetails.forEach(item => { orderDetails.forEach((item) => {
orderDetails[item.skuId] = Number(item.num) orderDetails[item.skuId] = Number(item.num);
}) });
const { data } = await order.moreOrder({ orderId: id, shopId }); const { data } = await order.moreOrder({ orderId: id, shopId });
if(!data || !data.data){ if (!data || !data.data) {
this.showToast({ title: "该订单中的商品已经售罄了" }); this.showToast({ title: "这款已经卖完啦" });
return; return;
} }
let list = new Array(); let list = new Array();
data.data.forEach(item => { data.data.forEach((item) => {
const skuId = item.skus[0].skuId const skuId = item.skus[0].skuId;
const nextData = { ...item, skuId, num: orderDetails[skuId], flag: true, sku: item.skus[0] } const nextData = {
if (nextData.sku.state == 1) { ...item,
list.push(nextData); skuId,
} num: orderDetails[skuId],
}); flag: true,
if(!list || list.length<=0) { sku: item.skus[0],
this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' }); };
return; if (nextData.sku.state == 1) {
} list.push(nextData);
list.forEach(nextData => { }
Utils.getallNum(nextData); });
}) if (!list || list.length <= 0) {
uni.switchTab({ url: '/pages/menu/menu' }); this.showToast({ title: "这款已经卖完啦", icon: "error" });
}, return;
async getList() { }
if (!this.userms) return list.forEach((nextData) => {
const { data } = await order.getMyOrder(); Utils.getallNum(nextData);
if (data) { });
this.list = data.rows; uni.switchTab({ url: "/pages/menu/menu" });
if(this.list && this.list.length>0) { },
this.empty = false; async getList() {
} else { if (!this.userms) return;
this.empty = true; const { data } = await order.getMyOrder();
} if (data) {
} else { this.list = data.rows;
this.showToast({ title: '请登录！', icon: 'error' }) if (this.list && this.list.length > 0) {
} this.empty = false;
}, } else {
async PayNow({ id }) { this.empty = true;
const orderInfo = await order.payOrder({ orderId: id }) }
const sendData = { } else {
orderId:id, this.showToast({ title: "请登录！", icon: "error" });
...orderInfo.data.data }
} },
console.log(orderInfo,'orderInfo') async PayNow({ id }) {
if (orderInfo) { const orderInfo = await order.payOrder({ orderId: id });
if (orderInfo && orderInfo.data.code == 200) { const sendData = {
await Menu.requestPayment(sendData); orderId: id,
this.getList() ...orderInfo.data.data,
} };
} console.log(orderInfo, "orderInfo");
}, if (orderInfo) {
goHome() { if (orderInfo && orderInfo.data.code == 200) {
uni.switchTab({ url: '/pages/menu/menu' }); await Menu.requestPayment(sendData);
}, this.getList();
// 手机号授权登录 }
getPhoneNumber(e) { }
if (e.detail.errMsg == 'getPhoneNumber:ok') { },
e.loginInfo = this.loginInfo goHome() {
User.getPhoneNumber(e, this.getList); uni.switchTab({ url: "/pages/menu/menu" });
} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") { },
this.showToast({ title: '已拒绝手机号授权', icon: 'error' }) // 手机号授权登录
} getPhoneNumber(e) {
}, if (e.detail.errMsg == "getPhoneNumber:ok") {
openInfo(data) { e.loginInfo = this.loginInfo;
const { id } = data User.getPhoneNumber(e, this.getList);
uni.setStorageSync('orderId', id); } else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
let url = '/orderSubPackage/pages/orderInfo/index' this.showToast({
uni.navigateTo({ url }) title: "已拒绝手机号授权，请同意授权",
}, icon: "error",
jsonParse(json) { });
const data = json || {} }
return JSON.parse(data) },
}, openInfo(data) {
orderDetailsSize(orderDetails) { const { id } = data;
let size = 0; uni.setStorageSync("orderId", id);
orderDetails.forEach(item => { let url = "/orderSubPackage/pages/orderInfo/index";
const { num } = item; uni.navigateTo({ url });
size += Number(num) },
}); jsonParse(json) {
return size const data = json || {};
} return JSON.parse(data);
},
orderDetailsSize(orderDetails) {
} let size = 0;
} orderDetails.forEach((item) => {
const { num } = item;
size += Number(num);
});
return size;
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.pages { .pages {
.topBar {
.topBar{ position: fixed;
position: fixed; width: 100%;
width: 100%; background: white;
background: white; display: flex;
display: flex; justify-content: flex-start;
justify-content: flex-start; align-items: center;
align-items: center; z-index: 9999;
z-index: 9999; padding-left: 34rpx;
padding-left: 34rpx; // .arrow-left {
// .arrow-left { // margin-left: 20rpx;
// margin-left: 20rpx; // }
// } .tabTitle {
.tabTitle{ font-size: 32rpx;
font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 600;
font-weight: 600; text-align: center;
text-align: center; width: 92%;
width: 92%; color: #333333;
color: #333333 }
} }
}
} }
.empty { .empty {
position: fixed; position: fixed;
/* 居中对齐begin */ /* 居中对齐begin */
left: 50%; left: 50%;
/* 兼容老版本的方法 */ /* 兼容老版本的方法 */
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translate(-50%); transform: translate(-50%);
margin-top: 311rpx; margin-top: 311rpx;
.empty_icon { .empty_icon {
width: 324rpx; width: 324rpx;
height: 236rpx; height: 236rpx;
}
} .empty_text {
.empty_text { width: 500rpx;
width: 500rpx;
margin-top: 32.73rpx;
margin-top: 32.73rpx; text-align: center;
text-align: center;
font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Medium, PingFang SC;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 500;
font-weight: 500; color: #999999;
color: #999999; }
} .empty_button {
.empty_button { margin-top: 34.29rpx;
margin-top: 34.29rpx; width: 167rpx;
width: 167rpx; height: 64rpx;
height: 64rpx; border-radius: 2rpx;
border-radius: 2rpx; font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; background: #0050f6;
background: #0050F6; font-weight: 400;
font-weight: 400; color: #ffffff;
color: #FFFFFF; line-height: 64rpx;
line-height: 64rpx; }
} .empty_button::after {
.empty_button::after{ border-radius: 2rpx;
border-radius: 2rpx; border: 0rpx;
border: 0rpx; }
}
} }
.empty_notdl{ .empty_notdl {
position: fixed; position: fixed;
/* 居中对齐begin */ /* 居中对齐begin */
left: 50%; left: 50%;
/* 兼容老版本的方法 */ /* 兼容老版本的方法 */
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translate(-50%); transform: translate(-50%);
margin-top: 352rpx; margin-top: 352rpx;
.empty_icon { .empty_icon {
width: 324rpx; width: 324rpx;
height: 236rpx; height: 236rpx;
} }
.empty_text { .empty_text {
margin-top: 32rpx; margin-top: 32rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
} }
.empty_button { .empty_button {
margin-top: 36rpx; margin-top: 36rpx;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
border-radius: 2rpx; border-radius: 2rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
background: #0050F6; background: #0050f6;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 64rpx; line-height: 64rpx;
} }
.empty_button::after{ .empty_button::after {
border-radius: 2rpx; border-radius: 2rpx;
border: 0rpx; border: 0rpx;
} }
} }
.orders { .orders {
padding: 1rpx; padding: 1rpx;
.order_item { .order_item {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #ffffff;
margin: 32rpx auto 0; margin: 32rpx auto 0;
box-sizing: border-box; box-sizing: border-box;
padding: 25rpx 32rpx 32rpx 32rpx; padding: 25rpx 32rpx 32rpx 32rpx;
.order_header { .order_header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.order_adrass { .order_adrass {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
} }
.order_time { .order_time {
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
margin-top: 3rpx; margin-top: 3rpx;
line-height: 28rpx; line-height: 28rpx;
color: #999999; color: #999999;
} }
.order_status { .order_status {
margin-top: 7rpx; margin-top: 7rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: flex-start; justify-content: flex-start;
line-height: 34rpx; line-height: 34rpx;
.xiaojiantou { .xiaojiantou {
width: 12rpx; width: 12rpx;
height: 16rpx; height: 16rpx;
margin-left: 5rpx; margin-left: 5rpx;
} }
} }
}
}
.order_content {
.order_content { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center;
.order_content_box1 {
.order_content_box1{ flex: 1;
flex: 1; }
}
.goods_item {
.goods_item { margin-top: 41rpx;
margin-top: 41rpx; display: flex;
display: flex; // align-items: center;
// align-items: center;
.qr_code {
.qr_code { text-align: center;
text-align: center; margin-right: 10rpx;
margin-right: 10rpx; margin-left: 38rpx;
margin-left: 38rpx;
.qr_code_img {
.qr_code_img { vertical-align: bottom;
vertical-align: bottom; width: 76rpx;
width: 76rpx; height: 76rpx;
height: 76rpx; }
}
.qr_text {
.qr_text { line-height: 28rpx;
line-height: 28rpx; margin-top: 10rpx;
margin-top: 10rpx; font-size: 20rpx;
font-size: 20rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #999999;
color: #999999; }
} }
}
.goods_img {
.goods_img { height: 96rpx;
height: 96rpx; width: 96rpx;
width: 96rpx; background-color: #eee;
background-color: #eee; }
}
.goods_text {
.goods_text { margin-left: 22rpx;
margin-left: 22rpx; flex: 1;
flex: 1;
.goods_title {
.goods_title { font-size: 28rpx;
font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; color: #666666;
color: #666666; margin-top: 10rpx;
margin-top: 10rpx; line-height: 40rpx;
line-height: 40rpx; }
}
.goods_spce {
.goods_spce { margin-top: 2.62rpx;
margin-top: 2.62rpx; font-size: 24rpx;
font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; font-weight: 400;
font-weight: 400; line-height: 34rpx;
line-height: 34rpx; color: #999999;
color: #999999; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: flex-start;
align-items: flex-start; .numbox {
.numbox{ display: flex;
display: flex; .btntk {
.btntk { box-sizing: border-box;
box-sizing: border-box; width: 167rpx;
width: 167rpx; height: 64rpx;
height: 64rpx; line-height: 64rpx;
line-height: 64rpx; border-radius: 2rpx;
border-radius: 2rpx; font-family: PingFangSC-Regular, PingFang SC;
font-family: PingFangSC-Regular, PingFang SC; border: 2rpx solid #0050f6;
border: 2rpx solid #0050F6; font-size: 24rpx;
font-size: 24rpx; margin: 0;
margin: 0; margin-left: 17rpx;
margin-left: 17rpx; color: #0050f6;
color: #0050F6; font-weight: 400;
font-weight: 400; text-align: center;
text-align: center; }
} }
} }
}
} }
} }
}
} .order_footer {
display: flex;
.order_footer { align-items: center;
display: flex; justify-content: space-between;
align-items: center; margin-top: 39rpx;
justify-content: space-between;
margin-top: 39rpx; .total {
font-size: 28rpx;
.total { font-family: PingFangSC-Regular, PingFang SC;
font-size: 28rpx; font-weight: 400;
font-family: PingFangSC-Regular, PingFang SC; color: #666666;
font-weight: 400;
color: #666666; .price {
font-size: 28rpx;
.price { font-family: Futura-Medium, Futura;
font-size: 28rpx; font-weight: 500;
font-family: Futura-Medium, Futura; color: #666666;
font-weight: 500; letter-spacing: 1rpx;
color: #666666; }
letter-spacing: 1rpx; }
}
} .btn {
width: 167rpx;
.btn { height: 64rpx;
width: 167rpx; line-height: 64rpx;
height: 64rpx; font-family: PingFangSC-Regular, PingFang SC;
line-height: 64rpx; background: #0050f6;
font-family: PingFangSC-Regular, PingFang SC; font-size: 24rpx;
background: #0050F6; margin: 0;
font-size: 24rpx; color: #fff;
margin: 0; font-weight: 400;
color: #fff; text-align: center;
font-weight: 400; }
text-align: center; }
} }
}
}
} }
</style> </style>
\ No newline at end of file
request/menu/index.js
import { $EventBus } from '@/utils/EventBus'; import { $EventBus } from "@/utils/EventBus";
import context from '../../main.js' import context from "../../main.js";
import Order from '@/request/order/index.js' import Order from "@/request/order/index.js";
export default { export default {
// 获取菜单列表 // 获取菜单列表
getMenuList(id) { getMenuList(id) {
return uni.$u.http return uni.$u.http
.get('/weixin/infoByShop', { .get("/weixin/infoByShop", {
params: { params: {
shopId: id, shopId: id,
}, },
...@@ -14,24 +14,27 @@ export default { ...@@ -14,24 +14,27 @@ export default {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
}); });
}, },
// 获取点单屏幕的订单信息 // 获取点单屏幕的订单信息
getScreenShopCar(key, location, sendData) { getScreenShopCar(key, location, sendData) {
return uni.$u.http return uni.$u.http
.post('/application/getData', { .post("/application/getData", {
key, key,
location, location,
...sendData ...sendData,
}) })
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ context.showToast({
title: '服务器错误', title: "哎哟！刚刚走神了，请退出后重进",
icon: 'none', icon: "none",
}); });
return err; return err;
}); });
...@@ -39,108 +42,108 @@ export default { ...@@ -39,108 +42,108 @@ export default {
// 下单获取预支付订单 // 下单获取预支付订单
saveReserve(data) { saveReserve(data) {
return uni.$u.http return uni.$u.http
.post('/order', data) .post("/order", data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { }); .catch((err) => {});
}, },
// saveReserve 为业务接口 // saveReserve 为业务接口
requestPayment(data, oldData, buyType, agreeTerms) { requestPayment(data, oldData, buyType, agreeTerms) {
// res为调起微信支付所需参数 // res为调起微信支付所需参数
// 调起微信支付 // 调起微信支付
if(data.appId) { if (data.appId) {
const { switchTab = true, callBack } = data const { switchTab = true, callBack } = data;
uni.requestPayment({ uni.requestPayment({
provider: 'wxpay', // 服务提提供商微信支付 provider: "wxpay", // 服务提提供商微信支付
timeStamp: data.timeStamp, // 时间戳 timeStamp: data.timeStamp, // 时间戳
nonceStr: data.nonceStr, // 随机字符串 nonceStr: data.nonceStr, // 随机字符串
package: data.package, package: data.package,
signType: data.signType || 'MD5', // 签名算法 signType: data.signType || "MD5", // 签名算法
paySign: data.paySign, // 签名 paySign: data.paySign, // 签名
success: async function (res) { success: async function (res) {
if (res.errMsg == 'requestPayment:ok') { if (res.errMsg == "requestPayment:ok") {
// 删除购物车数据后重新放回购物车 // 删除购物车数据后重新放回购物车
uni.setStorageSync('shopCarInfo', []); uni.setStorageSync("shopCarInfo", []);
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
uni.setStorageSync('orderId', data.orderId); uni.setStorageSync("orderId", data.orderId);
if(agreeTerms)uni.setStorageSync('TermsStatus',true) if (agreeTerms) uni.setStorageSync("TermsStatus", true);
if(switchTab){ if (switchTab) {
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement' let url =
uni.navigateTo({ url }) "/orderSubPackage/pages/orderInfo/index?from=settlement";
}else{ uni.navigateTo({ url });
callBack() } else {
callBack();
} }
} }
// 业务逻辑。。。 // 业务逻辑。。。
}, },
fail: async function (err) { fail: async function (err) {
context.showToast({ context.showToast({
title: '支付失败', title: "支付失败，再试一试！",
icon: 'error', icon: "error",
}); });
uni.setStorageSync('shopCarInfo', []); uni.setStorageSync("shopCarInfo", []);
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
uni.setStorageSync('orderId', data.orderId); uni.setStorageSync("orderId", data.orderId);
if(switchTab){ if (switchTab) {
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement' let url = "/orderSubPackage/pages/orderInfo/index?from=settlement";
uni.navigateTo({ url }) uni.navigateTo({ url });
}else{ } else {
callBack() callBack();
} }
}, },
}); });
}else{ } else {
uni.setStorageSync('orderId', data); uni.setStorageSync("orderId", data);
let url = '/orderSubPackage/pages/orderInfo/index?from=settlement' let url = "/orderSubPackage/pages/orderInfo/index?from=settlement";
uni.navigateTo({ url }) uni.navigateTo({ url });
} }
}, },
// 优惠卷信息接口 // 优惠卷信息接口
requestTicketList(data){ requestTicketList(data) {
return uni.$u.http return uni.$u.http
.post('/app/order/coupon/info', data) .post("/app/order/coupon/info", data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ context.showToast({
title: '服务器错误', title: "哎哟！刚刚走神了，请退出后重进",
icon: 'none', icon: "none",
});
return err;
}); });
return err;
});
}, },
// 下单页面优惠卷可用数量 // 下单页面优惠卷可用数量
requestTicketNum(data){ requestTicketNum(data) {
return uni.$u.http return uni.$u.http
.post('/app/order/coupon/fitable-count', data) .post("/app/order/coupon/fitable-count", data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ context.showToast({
title: '服务器错误', title: "哎哟！刚刚走神了，请退出后重进",
icon: 'none', icon: "none",
});
return err;
}); });
return err;
});
}, },
// 首页调用发送优惠券接口 // 首页调用发送优惠券接口
sendUserCoupon(data) { sendUserCoupon(data) {
return uni.$u.http return uni.$u.http
.post('/v1/issue/user/coupon', data) .post("/v1/issue/user/coupon", data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ context.showToast({
title: '服务器错误', title: "哎哟！刚刚走神了，请退出后重进",
icon: 'none', icon: "none",
});
return err;
}); });
return err; },
});
}
}; };
request/mine/index.js
import context from '../../main.js' import context from "../../main.js";
export default { export default {
getList(id) {}, getList(id) {},
getMsg() { getMsg() {
return uni.$u.http return uni.$u.http
.get('/system/message/list', {}) .get("/system/message/list", {})
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
}); });
}, },
read(data) { read(data) {
return uni.$u.http return uni.$u.http
.put('/system/message', data) .put("/system/message", data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
}); });
}, },
getMessageCount() { getMessageCount() {
return uni.$u.http return uni.$u.http
.get('/app/getMessageCount', {}) .get("/app/getMessageCount", {})
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
}); });
}, },
// 获取用户优惠卷列表 // 获取用户优惠卷列表
getUserList(data) { getUserList(data) {
return uni.$u.http return uni.$u.http
.get(`/app/coupon/list/${data}`, {}) .get(`/app/coupon/list/${data}`, {})
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
}); title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
}, },
// 获取用户信息 // 获取用户信息
getUserInfo() { getUserInfo() {
return uni.$u.http return uni.$u.http
.get(`/system/customer/detail`, {}) .get(`/system/customer/detail`, {})
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
}); title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
}, },
// 更改用户生日 // 更改用户生日
editBirthdat(data) { editBirthdat(data) {
return uni.$u.http return uni.$u.http
.post(`/system/customer/update/birth`, data) .post(`/system/customer/update/birth`, data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: err.data.msg, icon: 'none' }); context.showToast({ title: err.data.msg, icon: "none" });
return err return err;
}); });
}, },
// 更改用户昵称、性别 // 更改用户昵称、性别
editUserInfo(data) { editUserInfo(data) {
return uni.$u.http return uni.$u.http
.post(`/system/customer/update/base`, data) .post(`/system/customer/update/base`, data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
}); title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
}, },
// 更改用户头像 // 更改用户头像
editUserAvatar(data) { editUserAvatar(data) {
return uni.$u.http return uni.$u.http
.post(`/system/customer/update/avatar-url`, data) .post(`/system/customer/update/avatar-url`, data)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ title: '服务器错误', icon: 'none' }); context.showToast({
}); title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
}, },
}; };
request/order/index.js
export default { export default {
getMyOrder() { getMyOrder() {
return uni.$u.http return uni.$u.http
.get('/app/getMyOrder', { .get("/app/getMyOrder", {
params: {}, params: {},
custom: {noLoading: true}, custom: { noLoading: true },
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
orderRefund(data) { orderRefund(data) {
return uni.$u.http return uni.$u.http
.post('/system/refund', data) .post("/system/refund", data)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
getShop(params) { getShop(params) {
return uni.$u.http return uni.$u.http
.get('/weixin/getArea', { .get("/weixin/getArea", {
params, params,
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
// 校验sku是否可用 // 校验sku是否可用
chekSku(params) { chekSku(params) {
return uni.$u.http return uni.$u.http
.get('/application/checkSku', { .get("/application/checkSku", {
params, params,
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
cancelOrder(params) { cancelOrder(params) {
return uni.$u.http return uni.$u.http
.get('order/cancel', { .get("order/cancel", {
params, params,
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
// 立即支付 // 立即支付
payOrder(params) { payOrder(params) {
console.log(params,'params') console.log(params, "params");
return uni.$u.http return uni.$u.http
.get('order/payOrder', { .get("order/payOrder", {
params, params,
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
getHomeOrder(params) { getHomeOrder(params) {
return uni.$u.http return uni.$u.http
.get(`/app/getHomeOrder?shopId=${params.shopId}`, { .get(`/app/getHomeOrder?shopId=${params.shopId}`, {
params: {}, params: {},
custom: {noLoading: true}, custom: { noLoading: true },
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
getWaitTine(data) { getWaitTine(data) {
return uni.$u.http return uni.$u.http
.post('app/getWaitTine', data) .post("app/getWaitTine", data)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
moreOrder(params) { moreOrder(params) {
return uni.$u.http return uni.$u.http
.get('/app/getNextOrder', { .get("/app/getNextOrder", {
params, params,
}) })
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
checkSku(params) { checkSku(params) {
const shopInfo = JSON.parse(uni.getStorageSync('shopInfo')) const shopInfo = JSON.parse(uni.getStorageSync("shopInfo"));
return uni.$u.http return uni.$u.http
.get(`/application/checkSku?shopId=${shopInfo.id}&skuId=${params.skuId}`) .get(`/application/checkSku?shopId=${shopInfo.id}&skuId=${params.skuId}`)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
getOrderDetail(params) { getOrderDetail(params) {
...@@ -114,18 +114,18 @@ export default { ...@@ -114,18 +114,18 @@ export default {
.get(`/order/${params.orderId}`) .get(`/order/${params.orderId}`)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
getOrderWaiteTime(params) { getOrderWaiteTime(params) {
return uni.$u.http return uni.$u.http
.get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`) .get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
}, },
// 获取退款详情 // 获取退款详情
getRefundInfo(params) { getRefundInfo(params) {
...@@ -133,8 +133,8 @@ export default { ...@@ -133,8 +133,8 @@ export default {
.get(`/system/refund/list/${params}`) .get(`/system/refund/list/${params}`)
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '服务器错误', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
console.log('服务器错误'); console.log("哎哟！刚刚走神了，请退出后重进");
}); });
} },
}; };
request/user/index.js
import Store from '@/store'; import Store from "@/store";
import { $EventBus } from '@/utils/EventBus'; import { $EventBus } from "@/utils/EventBus";
import loadingIcon from 'uview-ui/libs/config/props/loadingIcon'; import loadingIcon from "uview-ui/libs/config/props/loadingIcon";
import { data } from 'uview-ui/libs/mixin/mixin'; import { data } from "uview-ui/libs/mixin/mixin";
import context from '../../main.js' import context from "../../main.js";
export default { export default {
getLocation(callback) { getLocation(callback) {
let _this = this; let _this = this;
return uni.getLocation({ return uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度 type: "gcj02", //返回可以用于uni.openLocation的经纬度
success: function (res) { success: function (res) {
var params = { var params = {
lat: res.latitude, lat: res.latitude,
lng: res.longitude, lng: res.longitude,
}; };
if(params.lat && params.lng) { if (params.lat && params.lng) {
Store.commit('saveLocation', params); Store.commit("saveLocation", params);
uni.setStorage({ key: 'location', data: params }); uni.setStorage({ key: "location", data: params });
} else { } else {
params = uni.getStorageSync('location'); params = uni.getStorageSync("location");
} }
callback && callback(1, params); callback && callback(1, params);
}, },
fail: function (res) { fail: function (res) {
console.log(res) console.log(res);
const params = uni.getStorageSync('location'); const params = uni.getStorageSync("location");
callback && callback(0, params); callback && callback(0, params);
}, },
}); });
}, },
// 获取店铺信息 // 获取店铺信息
getShopInfo(params) { getShopInfo(params) {
return uni.$u.http.get('/weixin/getShop', { params }) return uni.$u.http
.then((res) => { .get("/weixin/getShop", { params })
// console.log("get shop:"+JSON.stringify(res.data.data)); .then((res) => {
if (res.data.code == 200) { // console.log("get shop:"+JSON.stringify(res.data.data));
Store.commit('saveShopInfo', res.data.data); if (res.data.code == 200) {
uni.setStorage({ key: 'shopData', data: res.data.data }); Store.commit("saveShopInfo", res.data.data);
if (res.data.data) { uni.setStorage({ key: "shopData", data: res.data.data });
$EventBus.$emit('getMenuList', res.data.data); if (res.data.data) {
} $EventBus.$emit("getMenuList", res.data.data);
} }
return res; }
}).catch((err) => { return res;
console.log("get shop error"); })
return err; .catch((err) => {
}); console.log("get shop error");
return err;
});
}, },
uniLogin(res, callback) { uniLogin(res, callback) {
uni.login({ uni.login({
provider: 'weixin', provider: "weixin",
success: function (data) { success: function (data) {
// 传给后台接口所需登录数据 // 传给后台接口所需登录数据
uni.$u.http uni.$u.http
.post('/weixin/login', { .post("/weixin/login", {
code: data.code, code: data.code,
source: 3, source: 3,
iv: res.iv, iv: res.iv,
encryptedData: res.encryptedData, encryptedData: res.encryptedData,
}) })
.then((res) => { .then((res) => {
console.log(res,'resssssssss') console.log(res, "resssssssss");
const { statusCode, data } = res; const { statusCode, data } = res;
const { code, token, phoneNumber } = data; const { code, token, phoneNumber } = data;
if (statusCode == 200 && data && code == 200) { if (statusCode == 200 && data && code == 200) {
uni.setStorage({ key: 'Authorization', data: token }); uni.setStorage({ key: "Authorization", data: token });
uni.setStorage({ key: 'phoneNumber', data: phoneNumber }); uni.setStorage({ key: "phoneNumber", data: phoneNumber });
uni.setStorage({ key: 'userInfo', data: data }); uni.setStorage({ key: "userInfo", data: data });
Store.commit('setUserInfo', data); Store.commit("setUserInfo", data);
Store.commit('setAuthorization', token); Store.commit("setAuthorization", token);
if(callback) if (callback) callback();
callback();
} }
}) })
.catch((err) => { .catch((err) => {
...@@ -81,191 +82,201 @@ export default { ...@@ -81,191 +82,201 @@ export default {
}); });
}, },
getOpenId(res) { getOpenId(res) {
return uni.$u.http.post('/weixin/login', {code:res }) return uni.$u.http.post("/weixin/login", { code: res });
}, },
getAuthorization(phoneNumber) { getAuthorization(phoneNumber) {
uni.$u.http.post('/weixin/refreshToken ', { phoneNumber }).then((res) => { uni.$u.http.post("/weixin/refreshToken ", { phoneNumber }).then((res) => {
const { data } = res; const { data } = res;
uni.setStorage({ key: 'Authorization', data: data.token }); uni.setStorage({ key: "Authorization", data: data.token });
Store.commit('setAuthorization', data.token); Store.commit("setAuthorization", data.token);
context.showToast({ title: '登录成功！' }); context.showToast({ title: "登录成功！" });
}); });
}, },
wxLoginAndGetOpenid(loding, updata) { wxLoginAndGetOpenid(loding, updata) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
uni.login({ uni.login({
provider: 'weixin', provider: "weixin",
success: (res) => { success: (res) => {
const code = res.code const code = res.code;
if(code){ if (code) {
this.getOpenId(code).then((res)=>{ this.getOpenId(code).then((res) => {
const loginInfo = res.data.msg const loginInfo = res.data.msg;
uni.setStorageSync('loginInfo',loginInfo) uni.setStorageSync("loginInfo", loginInfo);
resolve(loginInfo) resolve(loginInfo);
}) });
} }
} },
}) });
}) });
}, },
loginDecrypt(res){ loginDecrypt(res) {
const {faceInfoId} = res const { faceInfoId } = res;
return uni.$u.http.post('/weixin/decrypt ', { return uni.$u.http.post("/weixin/decrypt ", {
session_key:res.loginInfo.session_key, session_key: res.loginInfo.session_key,
openId:res.loginInfo.openid, openId: res.loginInfo.openid,
encryptedData:res.data, encryptedData: res.data,
iv:res.iv, iv: res.iv,
faceInfoId, faceInfoId,
source:3 source: 3,
}) });
}, },
// 手机号授权登录 // 手机号授权登录
getPhoneNumber(res, callback) { getPhoneNumber(res, callback) {
uni.setStorage({ key: 'userPhoneInfo', data: res }); uni.setStorage({ key: "userPhoneInfo", data: res });
Store.commit('setUserPhoneInfo', res); Store.commit("setUserPhoneInfo", res);
uni.setStorage({ key: 'phoneInfo', data: res }); uni.setStorage({ key: "phoneInfo", data: res });
const loginInfo = res.loginInfo const loginInfo = res.loginInfo;
const iv = res.detail.iv const iv = res.detail.iv;
const data = res.detail.encryptedData const data = res.detail.encryptedData;
const faceInfoId = res.faceInfoId const faceInfoId = res.faceInfoId;
// data.faceInfoId = String(res.faceInfoId) // data.faceInfoId = String(res.faceInfoId)
// if(res.faceInfoId){ // if(res.faceInfoId){
// data.faceInfoId = res.faceInfoId // data.faceInfoId = res.faceInfoId
// } // }
wx.checkSession({ wx.checkSession({
success: (res) => { success: (res) => {
console.log('seeion未过期') console.log("seeion未过期");
this.onLogin(loginInfo,iv,data,faceInfoId,callback) this.onLogin(loginInfo, iv, data, faceInfoId, callback);
}, },
fail: (res) => { fail: (res) => {
console.log('seeion已过期') console.log("seeion已过期");
this.wxLoginAndGetOpenid(true).then(loginInfo => { this.wxLoginAndGetOpenid(true).then((loginInfo) => {
this.onLogin(loginInfo,iv,data,faceInfoId,callback) this.onLogin(loginInfo, iv, data, faceInfoId, callback);
}) });
} },
}) });
}, },
// 首页调用发送优惠券接口 // 首页调用发送优惠券接口
sendUserCoupon(data) { sendUserCoupon(data) {
return uni.$u.http return uni.$u.http
.post('/v1/issue/user/coupon', data) .post("/v1/issue/user/coupon", data)
.then((res) => { .then((res) => {
Store.commit('setMenuOption', {}); Store.commit("setMenuOption", {});
return res; return res;
}) })
.catch((err) => { .catch((err) => {
context.showToast({ context.showToast({
title: '服务器错误', title: "哎哟！刚刚走神了，请退出后重进",
icon: 'none', icon: "none",
}); });
Store.commit('setMenuOption', {}); Store.commit("setMenuOption", {});
return err; return err;
}); });
}, },
// 获取用户信息 // 获取用户信息
getUserInfo(data) { getUserInfo(data) {
return uni.$u.http return uni.$u.http
.get(`/system/customer/detail`, {}) .get(`/system/customer/detail`, {})
.then((res) => { .then((res) => {
console.log(res,data) console.log(res, data);
const { birthday, createTime, id, phone, sex, userName, avatarUrl } = res.data.data const { birthday, createTime, id, phone, sex, userName, avatarUrl } =
const {avatarUrl:localAvatarUrl} = uni.getStorageSync('UserInfo') res.data.data;
const sendData = { const { avatarUrl: localAvatarUrl } = uni.getStorageSync("UserInfo");
...data, const sendData = {
avatarUrl: avatarUrl||localAvatarUrl, ...data,
sex: sex?1:0, avatarUrl: avatarUrl || localAvatarUrl,
customerName:userName, sex: sex ? 1 : 0,
phone: phone.substr(0,3) + "****" + phone.substr(7), customerName: userName,
id:id phone: phone.substr(0, 3) + "****" + phone.substr(7),
} id: id,
if(!birthday){ };
sendData.canEditBirthday = true if (!birthday) {
sendData.birthday = new Date(createTime.replace(/-/g,'/')).valueOf() sendData.canEditBirthday = true;
}else{ sendData.birthday = new Date(createTime.replace(/-/g, "/")).valueOf();
sendData.canEditBirthday = false } else {
sendData.birthday = Date.parse(birthday) sendData.canEditBirthday = false;
} sendData.birthday = Date.parse(birthday);
Store.commit('setUserInfo', sendData); }
uni.setStorageSync('UserInfo',sendData) Store.commit("setUserInfo", sendData);
const MenuOption = Store.state.user.menuOption uni.setStorageSync("UserInfo", sendData);
if(JSON.stringify(MenuOption)!=='{}') { const MenuOption = Store.state.user.menuOption;
const {num,serial_no,source} = MenuOption if (JSON.stringify(MenuOption) !== "{}") {
const sendDataOption = { const { num, serial_no, source } = MenuOption;
phone:sendData.phoneNumber, const sendDataOption = {
user_id:sendData.id, phone: sendData.phoneNumber,
source:source, user_id: sendData.id,
param:JSON.stringify({ source: source,
serial_no, param: JSON.stringify({
num serial_no,
}) num,
} }),
this.sendUserCoupon(sendDataOption) };
} this.sendUserCoupon(sendDataOption);
}) }
.catch((err) => { })
context.showToast({ title: '服务器错误', icon: 'none' }); .catch((err) => {
}); context.showToast({
title: "哎哟！刚刚走神了，请退出后重进",
icon: "none",
});
});
}, },
onLogin(loginInfo,iv,data,faceInfoId,callback) { onLogin(loginInfo, iv, data, faceInfoId, callback) {
this.loginDecrypt({loginInfo:JSON.parse(loginInfo),faceInfoId,iv,data}).then(res => { this.loginDecrypt({
const { statusCode, data } = res; loginInfo: JSON.parse(loginInfo),
const { code, token, phoneNumber } = data; faceInfoId,
if (statusCode == 200 && data && code == 200) { iv,
console.log(token,'-------token') data,
uni.setStorage({ key: 'Authorization', data: token }); })
uni.setStorage({ key: 'phoneNumber', data: phoneNumber }); .then((res) => {
uni.setStorage({ key: 'userInfo', data: data }); const { statusCode, data } = res;
Store.commit('setUserInfo', data); const { code, token, phoneNumber } = data;
Store.commit('setAuthorization', token); if (statusCode == 200 && data && code == 200) {
this.getUserInfo(data) console.log(token, "-------token");
if(callback) uni.setStorage({ key: "Authorization", data: token });
return callback(); uni.setStorage({ key: "phoneNumber", data: phoneNumber });
} uni.setStorage({ key: "userInfo", data: data });
}).catch((err) => { Store.commit("setUserInfo", data);
context.showToast({ Store.commit("setAuthorization", token);
title: err.msg, this.getUserInfo(data);
}); if (callback) return callback();
}); }
})
.catch((err) => {
context.showToast({
title: err.msg,
});
});
}, },
setAllow(params) { setAllow(params) {
return uni.$u.http return uni.$u.http
.post('/system/customer/allow', params) .post("/system/customer/allow", params)
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
const {data} = err const { data } = err;
const {msg} = data const { msg } = data;
context.showToast({ title: msg, icon: 'none' }); context.showToast({ title: msg, icon: "none" });
return err return err;
}); });
}, },
// 获取用户订阅消息 // 获取用户订阅消息
getUserMsgInfo(params) { getUserMsgInfo(params) {
return uni.$u.http return uni.$u.http
.get('/system/customer/detail') .get("/system/customer/detail")
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
const {data} = err const { data } = err;
const {msg} = data const { msg } = data;
context.showToast({ title: msg, icon: 'none' }); context.showToast({ title: msg, icon: "none" });
return err return err;
}); });
}, },
// 获取用户优惠券数量 // 获取用户优惠券数量
getCouponNum(params) { getCouponNum(params) {
return uni.$u.http return uni.$u.http
.get('/app/homepage/coupon-count') .get("/app/homepage/coupon-count")
.then((res) => { .then((res) => {
return res; return res;
}) })
.catch((err) => { .catch((err) => {
const {data} = err const { data } = err;
const {msg} = data const { msg } = data;
context.showToast({ title: msg, icon: 'none' }); context.showToast({ title: msg, icon: "none" });
return err return err;
}); });
} },
}; };
utils/utils.js
import Config from '../static/config/index.js'; import Config from "../static/config/index.js";
import WXBizDataCrypt from './WXBizDataCrypt.js'; import WXBizDataCrypt from "./WXBizDataCrypt.js";
import context from '../main.js' import context from "../main.js";
import { $EventBus } from './EventBus'; import { $EventBus } from "./EventBus";
export default { export default {
// 组装提交订单数据 // 组装提交订单数据
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
realAmount: item.sku.discount * item.num, //实付金额 realAmount: item.sku.discount * item.num, //实付金额
amount: item.sku.price * item.num, //总价格 amount: item.sku.price * item.num, //总价格
specRuleDetail: JSON.stringify(item.sku.rules), //规格选项详情 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" skuId: item.skuId, //"sku ID"
goodsCategory: item.categoryId, //商品分类 goodsCategory: item.categoryId, //商品分类
}; };
...@@ -38,30 +38,32 @@ export default { ...@@ -38,30 +38,32 @@ export default {
return DAta; return DAta;
} else { } else {
context.showToast({ context.showToast({
title: '请选择商品', title: "请选择商品",
}); });
} }
}, },
// 加入购物车数据 // 加入购物车数据
async getallNum(Obj, unCheckCount) { async getallNum(Obj, unCheckCount) {
console.log(Obj); console.log(Obj);
let shopCarInfo = uni.getStorageSync('shopCarInfo') || []; let shopCarInfo = uni.getStorageSync("shopCarInfo") || [];
let size = 0; let size = 0;
shopCarInfo.forEach((item) => (size += item.num)); shopCarInfo.forEach((item) => (size += item.num));
if(!unCheckCount) { if (!unCheckCount) {
let countOfOrder = uni.getStorageSync('countOfOrder') || 9; let countOfOrder = uni.getStorageSync("countOfOrder") || 9;
if (size >= countOfOrder) { if (size >= countOfOrder) {
context.showToast({ context.showToast({
title: '最多可一次购买'+countOfOrder+'杯', title: "一次最多可购买" + countOfOrder + "杯",
icon: 'none', icon: "none",
}); });
return false; return false;
} }
} }
if (shopCarInfo) { if (shopCarInfo) {
let currentGoods = shopCarInfo.find((v) => v.goodsId == Obj.goodsId && v.skuId == Obj.skuId); let currentGoods = shopCarInfo.find(
(v) => v.goodsId == Obj.goodsId && v.skuId == Obj.skuId
);
if (currentGoods) { if (currentGoods) {
currentGoods.num += Obj.num; currentGoods.num += Obj.num;
} else { } else {
...@@ -71,8 +73,8 @@ export default { ...@@ -71,8 +73,8 @@ export default {
shopCarInfo = [Obj]; shopCarInfo = [Obj];
} }
console.log(Obj); console.log(Obj);
uni.setStorageSync('shopCarInfo', shopCarInfo); uni.setStorageSync("shopCarInfo", shopCarInfo);
$EventBus.$emit('updateCar'); $EventBus.$emit("updateCar");
// if (callback) { // if (callback) {
// callback(); // callback();
// } // }
...@@ -82,11 +84,11 @@ export default { ...@@ -82,11 +84,11 @@ export default {
let goodsList = []; let goodsList = [];
let size = 0; let size = 0;
goodsList.forEach((item) => (size += item.num)); goodsList.forEach((item) => (size += item.num));
let countOfOrder = uni.getStorageSync('countOfOrder'); let countOfOrder = uni.getStorageSync("countOfOrder");
if (size >= countOfOrder) { if (size >= countOfOrder) {
context.showToast({ context.showToast({
title: '最多可一次购买'+countOfOrder+'杯', title: "一次最多可购买" + countOfOrder + "杯",
icon: 'none', icon: "none",
}); });
return false; return false;
} }
...@@ -102,7 +104,7 @@ export default { ...@@ -102,7 +104,7 @@ export default {
} else { } else {
goodsList = [Obj]; goodsList = [Obj];
} }
uni.setStorageSync('goodsList', goodsList); uni.setStorageSync("goodsList", goodsList);
}, },
// 解密手机 // 解密手机
...@@ -123,16 +125,16 @@ export default { ...@@ -123,16 +125,16 @@ export default {
}); });
} else { } else {
context.showToast({ context.showToast({
title: '二维码错误', title: "二维码错误",
icon: 'none', icon: "none",
}); });
} }
} }
}, },
fail() { fail() {
context.showToast({ context.showToast({
icon: 'none', icon: "none",
title: '扫码失败', title: "扫码失败",
}); });
}, },
}); });
...@@ -141,40 +143,57 @@ export default { ...@@ -141,40 +143,57 @@ export default {
var date = new Date(); var date = new Date();
date.setTime(value); date.setTime(value);
var month = date.getMonth() + 1; var month = date.getMonth() + 1;
if (month < 10) month = '0' + month; if (month < 10) month = "0" + month;
var cdate = date.getDate(); var cdate = date.getDate();
if (cdate < 10) cdate = '0' + cdate; if (cdate < 10) cdate = "0" + cdate;
var hours = date.getHours(); var hours = date.getHours();
if (hours < 10) hours = '0' + hours; if (hours < 10) hours = "0" + hours;
var minutes = date.getMinutes(); var minutes = date.getMinutes();
if (minutes < 10) minutes = '0' + minutes; if (minutes < 10) minutes = "0" + minutes;
var time = date.getFullYear() + '-' + month + '-' + cdate + ' ' + hours + ':' + minutes; var time =
date.getFullYear() +
"-" +
month +
"-" +
cdate +
" " +
hours +
":" +
minutes;
return time; return time;
}, },
numberFixed(data, fixed = 2) { numberFixed(data, fixed = 2) {
if (data == undefined) { if (data == undefined) {
return undefined; return undefined;
} else if (data == 0) { } else if (data == 0) {
return '0'; return "0";
} else { } else {
return (Math.round(Number(data) * Math.pow(10, fixed)) / Math.pow(10, fixed)).toFixed(fixed); return (
Math.round(Number(data) * Math.pow(10, fixed)) / Math.pow(10, fixed)
).toFixed(fixed);
} }
}, },
isInteger(value) { isInteger(value) {
return parseFloat(Number(value).toFixed(2)) return parseFloat(Number(value).toFixed(2));
}, },
// 计算经纬度之间的距离 // 计算经纬度之间的距离
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度 // 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
getDistances(lat1, lng1, lat2, lng2) { getDistances(lat1, lng1, lat2, lng2) {
function rad(d) { function rad(d) {
return d * Math.PI / 180.0; return (d * Math.PI) / 180.0;
} }
var radLat1 = rad(lat1); var radLat1 = rad(lat1);
var radLat2 = rad(lat2); var radLat2 = rad(lat2);
var a = radLat1 - radLat2; var a = radLat1 - radLat2;
var b = rad(lng1) - rad(lng2); var b = rad(lng1) - rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + var s =
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); 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 = s * 6378.137; // EARTH_RADIUS;
// 输出为公里 // 输出为公里
s = Math.round(s * 10000) / 10000; s = Math.round(s * 10000) / 10000;
...@@ -183,11 +202,11 @@ export default { ...@@ -183,11 +202,11 @@ export default {
var distance_str = ""; var distance_str = "";
if (parseInt(distance) >= 1) { if (parseInt(distance) >= 1) {
// distance_str = distance.toFixed(1) + "km"; // distance_str = distance.toFixed(1) + "km";
distance_str = distance.toFixed(2) + "km"; distance_str = distance.toFixed(2) + "km";
} else { } else {
// distance_str = distance * 1000 + "m"; // distance_str = distance * 1000 + "m";
distance_str = (distance * 1000).toFixed(2) + "m"; distance_str = (distance * 1000).toFixed(2) + "m";
} }
//s=s.toFixed(4); //s=s.toFixed(4);
...@@ -195,13 +214,13 @@ export default { ...@@ -195,13 +214,13 @@ export default {
// console.info('距离是', s); // console.info('距离是', s);
// console.info('距离是', distance_str); // console.info('距离是', distance_str);
// return s; // return s;
//小小修改，这里返回对象 //小小修改，这里返回对象
let objData = { let objData = {
distance: distance, distance: distance,
distance_str: distance_str distance_str: distance_str,
} };
return objData return objData;
}, },
// 单位转换 // 单位转换
getPx(rpx) { getPx(rpx) {
...@@ -211,23 +230,23 @@ export default { ...@@ -211,23 +230,23 @@ export default {
}, },
// 返回上一页 // 返回上一页
goBack() { goBack() {
wx.navigateBack({ wx.navigateBack({
delta: 1 delta: 1,
}); });
}, },
// 解析url参数 // 解析url参数
getUrlParams2(url) { getUrlParams2(url) {
// 通过 ? 分割获取后面的参数字符串 // 通过 ? 分割获取后面的参数字符串
let urlStr = url.split('?')[1] let urlStr = url.split("?")[1];
// 创建空对象存储参数 // 创建空对象存储参数
let obj = {}; let obj = {};
// 再通过 & 将每一个参数单独分割出来 // 再通过 & 将每一个参数单独分割出来
let paramsArr = urlStr.split('&') let paramsArr = urlStr.split("&");
for(let i = 0,len = paramsArr.length;i < len;i++){ for (let i = 0, len = paramsArr.length; i < len; i++) {
// 再通过 = 将每一个参数分割为 key:value 的形式 // 再通过 = 将每一个参数分割为 key:value 的形式
let arr = paramsArr[i].split('=') let arr = paramsArr[i].split("=");
obj[arr[0]] = arr[1]; obj[arr[0]] = arr[1];
} }
return obj 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