初始化
This commit is contained in:
魏啾
267
pages/index/index.vue
Normal file
267
pages/index/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="banner-wrap">
|
||||
<u-swiper :list="banners" height="440" radius="0" :indicator="banners.length > 1"
|
||||
imgMode="widthFix"></u-swiper>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="user-info">
|
||||
<view class="top">
|
||||
<view class="col">
|
||||
<view style="width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
|
||||
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
||||
</image>
|
||||
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
|
||||
</image>
|
||||
</button>
|
||||
</view>
|
||||
<text class="t">{{userInfo.nickName}}</text>
|
||||
</view>
|
||||
<navigator class="ewm-wrap" url="/pages/pay_code/pay_code" hover-class="none">
|
||||
<image class="ewm" src="../../static/ewm.png" mode="aspectFit"></image>
|
||||
<text class="t">会员码</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="col">
|
||||
<text class="t1 num">{{shopUser.amount || '0'}}</text>
|
||||
<text class="t2">余额</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
<text class="t1 num">{{shopUser.levelConsume || '0'}}</text>
|
||||
<text class="t2">积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-wrap">
|
||||
<view class="top-wrap">
|
||||
<view class="item" @click="scanCodehandle">
|
||||
<image class="bg" src="../../static/index_m2.png" mode="widthFix"></image>
|
||||
<view class="btn">
|
||||
<text class="t">扫码点餐</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="memberindex">
|
||||
<image class="bg" src="../../static/index_m1.png" mode="widthFix"></image>
|
||||
<view class="btn">
|
||||
<text class="t">会员充值</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-banner">
|
||||
<u-swiper :list="footerBanners" radius="20" height="160" :indicator="banners.length > 1"
|
||||
imgMode="widthFix"></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
banners: [require('@/static/banner1.png')],
|
||||
footerBanners: [require('@/static/footer_banner1.png')],
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
shopInfo:{}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!uni.cache.get('token')) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}else{
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
scanCodehandle() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||
if (tableCode) {
|
||||
uni.pro.navigateTo('order_food/order_food', {
|
||||
tableCode: tableCode,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
memberindex() {
|
||||
uni.pro.navigateTo('member/index')
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
||||
var r = url.substr(1).match(reg)
|
||||
if (r != null) {
|
||||
return r[2]
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
console.log(e.detail.avatarUrl)
|
||||
let file = e.detail.avatarUrl;
|
||||
uploadImage(file, 'avatar',
|
||||
result => {
|
||||
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||||
// let objAge = {
|
||||
// 'url': result,
|
||||
// 'extname': 'png',
|
||||
// 'name': 'imgss.png'
|
||||
// };
|
||||
// this.userlist.avatar.push(objAge)
|
||||
this.userInfo.avatar = result
|
||||
console.log(this.userInfo.avatar)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 40upx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
background-color: #fff;
|
||||
padding: 40upx;
|
||||
border-radius: 20upx;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
padding-bottom: 42upx;
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
margin-left: 20upx;
|
||||
}
|
||||
}
|
||||
|
||||
.ewm-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.ewm {
|
||||
$size: 50upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 20upx;
|
||||
padding-top: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-top: 40upx;
|
||||
display: flex;
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.t1 {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-wrap {
|
||||
padding: 40upx 0 0 0;
|
||||
$gap: 20upx;
|
||||
|
||||
.top-wrap {
|
||||
display: flex;
|
||||
gap: $gap;
|
||||
|
||||
.item {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
position: relative;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: $gap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: $gap;
|
||||
padding: $gap $gap * 2;
|
||||
border-radius: 100upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 32upx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 12upx 12upx rgba(0, 0, 0, 0.05);
|
||||
position: absolute;
|
||||
bottom: $gap * 2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-banner {
|
||||
padding-top: 20upx;
|
||||
}
|
||||
</style>
|
||||
305
pages/login/login.vue
Normal file
305
pages/login/login.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="containerbox flex-colum">
|
||||
<view class="containerimage_logo">
|
||||
<image class="input_itemone" src="https://ointmentweapp.oss-cn-beijing.aliyuncs.com/manage/login2.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
<view class="containertext">
|
||||
微信昵称
|
||||
</view>
|
||||
<view class="containerbottom">
|
||||
<view class="containerbottom_text flex-colum-start">
|
||||
<text>该程序获得以下授权：</text>
|
||||
<text>获得您的手机号</text>
|
||||
</view>
|
||||
<view class="containerbottom_item flex-between">
|
||||
<navigator class="containerbottomone" open-type="exit" target="miniProgram"><button
|
||||
class="containerbottomone" open-type="launchApp" app-parameter="wechat"
|
||||
binderror="launchAppError">
|
||||
暂不授权
|
||||
</button></navigator>
|
||||
<button class="containerbottomtow" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
||||
确认授权
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.cache.clear();
|
||||
|
||||
},
|
||||
methods: {
|
||||
async userlogin() {
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||||
uni.login({ //alipay weixin
|
||||
// #ifdef MP-ALIPAY
|
||||
provider: 'alipay',
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
provider: 'weixin',
|
||||
// #endif
|
||||
success: async (data) => {
|
||||
try {
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: async (infoRes) => {
|
||||
console.log(infoRes, 81);
|
||||
uni.cache.set('weixincode', data.code);
|
||||
let res = await this.api.userwxlogin({
|
||||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
encryptedData: infoRes
|
||||
.encryptedData, // 用户非敏感信息
|
||||
rawData: infoRes.rawData,
|
||||
signature: infoRes.signature,
|
||||
iv: infoRes.iv,
|
||||
phone: this.phone
|
||||
})
|
||||
if (res.code == 0) {
|
||||
console.log(res, 88)
|
||||
uni.cache.set('token', res.data.token);
|
||||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||||
.miniAppOpenId)
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.pro.switchTab('index/index')
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
});
|
||||
|
||||
// uni.pro.navigateTo('pay_code/pay_code', {
|
||||
// nickName:userInfo.nickName,
|
||||
// nickName:userInfo.nickName
|
||||
// })
|
||||
// uni.getUserInfo({
|
||||
// provider: 'weixin',
|
||||
// success: async (infoRes) => {
|
||||
// console.log(infoRes, 81);
|
||||
// // let res = await this.api.userwxlogin({
|
||||
// // code: uni.cache.get('weixincode'), //临时登录凭证
|
||||
// // rawData: '', // 用户非敏感信息
|
||||
// // rawData: '' // 签名
|
||||
// // })
|
||||
// // if (res) {
|
||||
// // console.log(res, 88)
|
||||
// // }
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log(err)
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
async getPhoneNumber(res) { // 获取手机号
|
||||
var resdataa = res
|
||||
console.log(res)
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (data) => {
|
||||
let resdata = await this.api.logingetPhoneNumber({
|
||||
code: data.code,
|
||||
iv: resdataa.detail.iv,
|
||||
encryptedData: resdataa.detail.encryptedData
|
||||
})
|
||||
console.log(resdata)
|
||||
if (resdata.data) {
|
||||
this.phone = resdata.data
|
||||
this.userlogin()
|
||||
}
|
||||
// this.userlogin()
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
// #endif
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
button {}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
.containerbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.containerimage_logo {
|
||||
margin-top: 66rpx;
|
||||
border-radius: 50%;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.containertext {
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.containerbottom {
|
||||
margin-top: 40rpx;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 100%;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.containerbottom_text {
|
||||
margin-top: 32rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #847f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.containerbottom_item {
|
||||
margin-top: 60rpx;
|
||||
|
||||
.containerbottomone {
|
||||
padding: 10rpx 80rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.containerbottomone::after {
|
||||
background: none;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.containerbottomtow {
|
||||
font-size: 24rpx;
|
||||
background: #baf505;
|
||||
border: none;
|
||||
padding: 10rpx 80rpx;
|
||||
}
|
||||
|
||||
.containerbottomtow::after {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
top: -118rpx;
|
||||
z-index: 90;
|
||||
padding: 0 28rpx;
|
||||
|
||||
.wrapper_box {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 16rpx 30rpx;
|
||||
|
||||
.input_content {
|
||||
.input_item {
|
||||
margin-top: 32rpx;
|
||||
|
||||
.input_itemone {
|
||||
width: 49.68rpx;
|
||||
height: 49.68rpx;
|
||||
}
|
||||
|
||||
.input_itemtow {
|
||||
position: relative;
|
||||
flex: auto;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.input_itemtowicon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 20rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 2rpx solid rgba(229, 229, 229, 0.7);
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
margin-top: 24rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #7c8e97;
|
||||
|
||||
.agreement-Item {
|
||||
color: #4ca1fc;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-button {
|
||||
margin: 40rpx auto 50rpx auto;
|
||||
width: 90%;
|
||||
background: #2F87FD;
|
||||
padding: 28rpx 0;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
font-size: 36rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
pages/make/list.vue
Normal file
51
pages/make/list.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in 8" :key="item">
|
||||
<view class="top">
|
||||
<text class="n">000{{ item }}</text>
|
||||
<text class="line">|</text>
|
||||
<text>8人</text>
|
||||
</view>
|
||||
<view class="btm">
|
||||
<text>可预约：已满</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onload() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: $paddingSize;
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
padding: $paddingSize;
|
||||
border-radius: 12upx;
|
||||
background: $linear-color-priamry;
|
||||
&:not(:first-child) {
|
||||
margin-top: $paddingSize;
|
||||
}
|
||||
text {
|
||||
color: #66421f;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.n {
|
||||
font-weight: bold;
|
||||
}
|
||||
.line {
|
||||
padding: 0 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
pages/make/make.vue
Normal file
136
pages/make/make.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="shop_name">
|
||||
<text class="t">{{shopUser.name}}</text>
|
||||
</view>
|
||||
<view class="btn-wrap" @click="makePhoneCall(shopInfo.account)">
|
||||
<!-- <navigator class="btn" hover-class="none" url="/pages/make/list">在线预约</navigator> -->
|
||||
<view class="btn">在线预约</view>
|
||||
<view class="btn">电话预约</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="item">
|
||||
<text class="t">营业时间：{{shopInfo.businessTime || '无'}}</text>
|
||||
</view>
|
||||
<view class="item" @click="goMap">
|
||||
<text class="t" style="margin-right: 12upx">门店地址：{{shopInfo.address || '无'}}</text>
|
||||
<u-icon :name="require('@/static/icon_address.png')"></u-icon>
|
||||
</view>
|
||||
<!-- <view class="item">
|
||||
<text class="t undline">点击查看近期预约</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
shopInfo:{}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
goMap() {
|
||||
if (this.shopInfo.lat != null && this.shopInfo.lng != null) {
|
||||
// 打开内置地图
|
||||
uni.openLocation({
|
||||
latitude: Number(this.shopInfo.lat),
|
||||
longitude: Number(this.shopInfo.lng),
|
||||
scale: 18,
|
||||
name: this.shopInfo.shopName,
|
||||
address: this.shopInfo.address
|
||||
})
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: '该单位未维护地址',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
makePhoneCall(e) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: e //仅为示例
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 40upx;
|
||||
}
|
||||
|
||||
.shop_name {
|
||||
padding: 100upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.t {
|
||||
font-size: 48upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 20upx 0;
|
||||
background-color: $color-priamry;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 40upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro-wrap {
|
||||
padding: $paddingSize 0;
|
||||
|
||||
.item {
|
||||
padding-top: $paddingSize;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.t {
|
||||
color: #999;
|
||||
|
||||
&.undline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
pages/member/index.vue
Normal file
329
pages/member/index.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="towcontentitem">
|
||||
<image class="towcontentitemimage" src="@/static/recharges.png" mode="widthFix"></image>
|
||||
<view class="towcontentitemone flex-start">
|
||||
<image class="towcontentitemoneimage" :src="userInfo.avatar" mode="aspectFill"></image>
|
||||
<view class="towcontentitemonetext flex-colum-start">
|
||||
<text class="towcontentitemonetextone">{{userInfo.nickName || '暂无昵称'}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="towcontentitemprogress">
|
||||
<!-- 可用余额:{{memberlist.money || '0.00'}}
|
||||
<text style="font-size: 16rpx; color:#000 ; margin-left: 10rpx;">冻结金额:{{memberlist.freeze_money}}</text>
|
||||
<view class="towcontentitemoneabsolute">
|
||||
加购
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="towcontentitemtow flex-between">
|
||||
<text class="towcontentitemtowetext">{{memberlist.vip_number}}</text>
|
||||
<!-- <text class="towcontentitemtowetext" style="color: #fff;">保洁清洗卡</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="therecontent">
|
||||
<input type="number" v-model="amount" placeholder="自定义金额">
|
||||
</view>
|
||||
<view class="fourcontent flex-start">
|
||||
<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
|
||||
<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
|
||||
@click="clickinput(item,index)">
|
||||
<text>充{{item.amount}}元</text>
|
||||
<!-- <text style="margin-top: 10rpx;">送{{item.deliver}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fivecontent" @click="userbalancerechangesub">
|
||||
立即充值
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inputshow: 0,
|
||||
memberlist: {},
|
||||
listdata: [{
|
||||
amount: 100
|
||||
},{
|
||||
amount: 200
|
||||
},{
|
||||
amount:300
|
||||
},{
|
||||
amount:400
|
||||
},{
|
||||
amount:500
|
||||
},{
|
||||
amount:1000
|
||||
}
|
||||
],
|
||||
amount: '',
|
||||
shopUser: {},
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
},
|
||||
methods: {
|
||||
async userbalancerechangesub() {
|
||||
if (this.amount == null || this.amount == '') {
|
||||
uni.showToast({
|
||||
title: '金额不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.paymemeberIn({
|
||||
shopId: uni.cache.get('shopUser').shopId, // 判断显示哪家的作品,
|
||||
amount: this.amount // 判断显示哪家的作品,
|
||||
})
|
||||
if (res) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
clickinput(a, b) {
|
||||
console.log(a, b)
|
||||
this.inputshow = b
|
||||
this.amount = a.amount
|
||||
},
|
||||
eeInfo(e) {
|
||||
uni.pro.navigateTo('my/member/memberinfo', {
|
||||
id: e,
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.towcontentitem {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.fourcontentitemabsolute {
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 6rpx 28rpx;
|
||||
font-size: 20rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 6rpx 12rpx rgba(255, 255, 255, 0.19);
|
||||
background: linear-gradient(NaNdeg, #4A4A4A 0%, #919191 100%);
|
||||
border-radius: 0px 12rpx 0px 12rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.towcontentitemimage {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.towcontentitemone {
|
||||
margin-top: 42rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
|
||||
.towcontentitemoneimage {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.towcontentitemonetext {
|
||||
height: 76rpx;
|
||||
margin-left: 16rpx;
|
||||
|
||||
.towcontentitemonetextone {
|
||||
font-size: 32rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
.towcontentitemonetexttow {
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemprogressa {
|
||||
padding: 8rpx 44rpx;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 54rpx;
|
||||
}
|
||||
|
||||
.towcontentitemprogress {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
font-size: 32rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
.towcontentitemoneabsolute {
|
||||
position: absolute;
|
||||
padding: 0 44rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(130deg, #F4AE46 0%, #EE9437 100%);
|
||||
box-shadow: 0px 4rpx 8rpx 2rpx rgba(243, 169, 67, 0.37);
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.towcontentitemtow {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
margin-top: 42rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #422A07;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent {
|
||||
margin-top: 32rpx;
|
||||
position: relative;
|
||||
padding: 22rpx 32rpx;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
input {
|
||||
padding-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.therecontent::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 32rpx;
|
||||
transform: translateY(-50%);
|
||||
content: '￥';
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontent {
|
||||
.fourcontentlnage {
|
||||
width: 33.33%;
|
||||
|
||||
.fourcontentitem {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #333333;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fourcontentitems {
|
||||
margin: 24rpx 10rpx;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
background: #F1CB66;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #F1CB66;
|
||||
font-size: 28rpx;
|
||||
font-family: Roboto-Medium, Roboto;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
margin-top: 62rpx;
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
background: #F1CB66;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
342
pages/order/order.vue
Normal file
342
pages/order/order.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-sticky bgColor="#fff">
|
||||
<view class="tab-wrap">
|
||||
<view class="item" v-for="(item, index) in tabs" :key="index" @click="orderswitch(item,index)">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="line-wrap"
|
||||
:style="{ left: `${(100 / tabs.length) * active}%`, width: `${100 / tabs.length}%` }">
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="list-wrap">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" @click="orderinfo(item)">
|
||||
<view class="header-wrap">
|
||||
<text v-if="item.sendType == 'post'">快递</text>
|
||||
<text v-if="item.sendType == 'takeaway'">外卖</text>
|
||||
<text v-if="item.sendType == 'takeself'">自提</text>
|
||||
<text v-if="item.sendType == 'table'">堂食</text>
|
||||
<text class="status" v-if="item.status == 'unpaid' || item.status == 'paying'">
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'send'">
|
||||
<text> 已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="item.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="shop-info">
|
||||
<view class="shop-item">
|
||||
<view class="cover flex-start" v-for="(item1,index1) in item.detailList"
|
||||
:key="index1">
|
||||
<!-- <image :src="item1.productImg" style="width: 200rpx;height: 200rpx; border-radius: 20rpx;" mode="widthFix"></image> -->
|
||||
<c-image width="200" height="200" radius="20" :src="item1.productImg"></c-image>
|
||||
</view>
|
||||
<!-- <view class="info">
|
||||
<text class="name">美味大宅蟹</text>
|
||||
<text class="num">数量：1</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="total">
|
||||
<text class="t">需付款</text>
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{item.orderAmount}}</text>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<text class="time">下单日期：{{$u.timeFormat(item.createdAt, 'yyyy-mm-dd hh:MM')}}</text>
|
||||
<text class="intro num">共{{item.totalNumber}}件商品 合计：￥{{item.orderAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap">
|
||||
<view class="btn">
|
||||
<text>查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from '../../uni_modules/uview-ui/libs/config/props/list';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
tabs: [{
|
||||
name: '全部',
|
||||
type: 1,
|
||||
status: ''
|
||||
},
|
||||
{
|
||||
name: '待支付',
|
||||
type: 2,
|
||||
status: 'unpaid'
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
type: 3,
|
||||
status: 'unsend'
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
type: 4,
|
||||
status: 'closed'
|
||||
},
|
||||
{
|
||||
name: '退款',
|
||||
type: 5,
|
||||
status: 'refund'
|
||||
}
|
||||
],
|
||||
list: [],
|
||||
is_end: false,
|
||||
swiperCurrent: '',
|
||||
form: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'loadmore',
|
||||
},
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}
|
||||
if (this.tabs.findIndex((item) => item.type == this.useStorage.get('orderType')) == -1) {
|
||||
this.active = 0
|
||||
} else {
|
||||
this.active = (this.tabs.findIndex((item) => item.type == this.useStorage.get('orderType')));
|
||||
}
|
||||
this.init_fn()
|
||||
},
|
||||
onReachBottom() {
|
||||
this.orderorderList()
|
||||
},
|
||||
methods: {
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
orderinfo(e) {
|
||||
uni.pro.navigateTo('order/order_detail', {
|
||||
orderId: e.id
|
||||
})
|
||||
},
|
||||
init_fn() {
|
||||
this.list = []
|
||||
this.is_end = false
|
||||
this.form.page = 1
|
||||
this.form.status = 'loadmore'
|
||||
this.orderorderList()
|
||||
},
|
||||
orderswitch(e, a) {
|
||||
this.active = a
|
||||
if (e.type == 1) {
|
||||
this.swiperCurrent = ''
|
||||
} else {
|
||||
this.swiperCurrent = e.status
|
||||
}
|
||||
this.init_fn()
|
||||
},
|
||||
async orderorderList() {
|
||||
let res = await this.api.orderorderList({
|
||||
page: this.form.page,
|
||||
size: this.form.size,
|
||||
userId: uni.cache.get('userInfo').id, //userId
|
||||
status: this.swiperCurrent
|
||||
})
|
||||
if (res.data.length == 0) {
|
||||
this.is_end = true
|
||||
this.form.status = 'nomore'
|
||||
return false;
|
||||
} else {
|
||||
this.form.status = 'loading';
|
||||
this.form.page = ++this.form.page;
|
||||
setTimeout(() => {
|
||||
this.list = [...this.list, ...res.data];
|
||||
if (res.data.length == 10) {
|
||||
this.form.status = 'loading';
|
||||
} else {
|
||||
this.is_end = true;
|
||||
this.form.status = 'nomore';
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$tabH: 80upx;
|
||||
$color: #ff411d;
|
||||
|
||||
.tab-wrap {
|
||||
display: flex;
|
||||
height: $tabH;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.line-wrap {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 8upx;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
.line {
|
||||
$h: 6upx;
|
||||
width: 30%;
|
||||
height: $h;
|
||||
border-radius: $h;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: $paddingSize;
|
||||
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $paddingSize;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
padding: $paddingSize;
|
||||
border-bottom: 1upx solid #ececec;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.status {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $paddingSize;
|
||||
|
||||
.shop-info {
|
||||
.shop-item {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
|
||||
.cover:nth-child(1) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
|
||||
.cover {
|
||||
|
||||
// white-space: nowrap;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-left: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.t {
|
||||
font-weight: bold;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.i {
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
position: relative;
|
||||
top: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: $paddingSize;
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1upx solid #ececec;
|
||||
padding: $paddingSize;
|
||||
|
||||
.btn {
|
||||
padding: 8upx 24upx;
|
||||
border-radius: 100upx;
|
||||
border: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
445
pages/order/order_detail.vue
Normal file
445
pages/order/order_detail.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
<text>{{listinfo.name}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'send'">
|
||||
<text> 已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="tag-wrap">
|
||||
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view class="number-wrap" v-if="listinfo.status != 'unpaid' || listinfo.status != 'paying'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.tableName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border">
|
||||
<text class="title">
|
||||
<text>点单详情</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in listinfo.details" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.productImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{item.priceAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-wrap">
|
||||
<view class="price">
|
||||
<text>合计：</text>
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{listinfo.payAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border">
|
||||
<text class="title">订单信息</text>
|
||||
</view>
|
||||
<view class="order-info">
|
||||
<view class="row" @click="copyHandle(listinfo.orderNo)">
|
||||
<text class="t">订单信息：</text>
|
||||
<text class="info">{{listinfo.orderNo}}（点击复制）</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="t">创建时间：</text>
|
||||
<text class="info">{{$u.timeFormat(listinfo.time, 'yyyy-mm-dd hh:MM:ss')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="card" style="padding-bottom: 20rpx;">
|
||||
<image :src="srcimge" show-menu-by-longpress="true" style="width: 100%;" mode="widthFix"></image>
|
||||
</view> -->
|
||||
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview">
|
||||
<view class="flex-between" v-if="listinfo.status == 'unpaid' || listinfo.status == 'paying'">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{listinfo.payAmount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
orderId: '',
|
||||
listinfo: {},
|
||||
srcimge:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/wx.jpg'
|
||||
};
|
||||
},
|
||||
async onLoad(e) {
|
||||
console.log(e)
|
||||
this.orderId = e.orderId
|
||||
this.orderorderInfo()
|
||||
},
|
||||
onShow() {
|
||||
if (this.orderId) {
|
||||
this.orderorderInfo()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mountedcreateSelectorQuery() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
console.log(ele, 111)
|
||||
that.height = (ele.height) + "px"
|
||||
that = null;
|
||||
// uni.getSystemInfo({
|
||||
// success(res) {
|
||||
|
||||
// }
|
||||
// })
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
async paymodfiyOrderInfo() {
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfo.orderId,
|
||||
})
|
||||
},
|
||||
async showpopupclick() {
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.orderId,
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 2000)
|
||||
this.paymodfiyOrderInfo()
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/mall/order/ordersuccess?id=" + datareslane.data
|
||||
// .order_id,
|
||||
// });
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
|
||||
setTimeout(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
async orderorderInfo() {
|
||||
let res = await this.api.orderorderInfo({
|
||||
orderId: this.orderId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
this.listinfo = res.data
|
||||
this.mountedcreateSelectorQuery()
|
||||
}
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.border {
|
||||
padding-bottom: 28upx;
|
||||
border-bottom: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10upx;
|
||||
color: $color-priamry;
|
||||
border: 1px solid $color-priamry;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fafafa;
|
||||
border-radius: 16upx;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 28upx 0;
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 28upx;
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 28upx;
|
||||
border-top: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 28upx;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
472
pages/order_detail/order_detail.vue
Normal file
472
pages/order_detail/order_detail.vue
Normal file
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="head">
|
||||
<text class="title">
|
||||
<text>{{listinfo.tableName || '空'}}</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unpaid'">
|
||||
<text>待支付</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'unsend'">
|
||||
<text>待发货</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'closed'">
|
||||
<text>订单完成</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'send'">
|
||||
<text> 已发</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refunding'">
|
||||
<text>申请退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'refund'">
|
||||
<text>退单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'cancelled'">
|
||||
<text>取消订单</text>
|
||||
</text>
|
||||
<text class="status" v-if="listinfo.status == 'merge'">
|
||||
<text>合台</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="tag-wrap">
|
||||
<text class="tag" v-if="listinfo.sendType == 'post'">快递</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeaway'">外卖</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'takeself'">自提</text>
|
||||
<text class="tag" v-if="listinfo.sendType == 'table'">堂食</text>
|
||||
</view>
|
||||
<view class="number-wrap" v-if="listinfo.status != 'unpaid'">
|
||||
<text class="t">取餐号</text>
|
||||
<text class="number">{{listinfo.tableName || '空'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="head border">
|
||||
<text class="title">
|
||||
<text>点单详情</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="item" v-for="(item,index) in listinfo.detailList" :key="index">
|
||||
<view class="cover">
|
||||
<c-image width="120" height="120" radius="16" :src='item.productImg'></c-image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text>{{item.productName}}</text>
|
||||
<text class="n">x{{item.num}}</text>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{item.price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-wrap">
|
||||
<view class="price">
|
||||
<text>合计：</text>
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{listinfo.amount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontent" v-if="listinfo.status == 'unpaid'">
|
||||
<view class="sixcontentone flex-between">
|
||||
<view class="sixcontent_one">
|
||||
支付方式
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontenttow">
|
||||
<view class="sixcontenttowitem flex-between" @click="clickselect(1)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<u-icon name="weixin-fill" color="#999999" size="32"></u-icon>
|
||||
<text class="sixcontenttowitemonetext">微信支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 1" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sixcontenttowitem flex-between" @click="clickselect(2)">
|
||||
<view class="sixcontenttowitemone flex-start">
|
||||
<u-icon name="zhifubao" color="#999999" size="26"></u-icon>
|
||||
<text class="sixcontenttowitemonetext">余额支付</text>
|
||||
</view>
|
||||
<view class="flex-start">
|
||||
<u-icon v-if="pay_type == 2" name="checkmark-circle-fill" color="#333333" size="26"></u-icon>
|
||||
<u-icon v-else name="checkmark-circle-fill" color="#999999" size="26"></u-icon>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{height:height}">
|
||||
|
||||
</view>
|
||||
<view class="fixedview">
|
||||
<view class="flex-between">
|
||||
<view class="fixedview_one flex-start">
|
||||
<view class="fixedview_oneone">
|
||||
实付金额：
|
||||
</view>
|
||||
<view class="fixedview_onetow">
|
||||
<text>¥</text>{{listinfo.amount}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixedview_tow" @tap="$u.debounce(showpopupclick,1000)">
|
||||
立即付款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: '',
|
||||
pay_type: 1,
|
||||
info: {},
|
||||
listinfo: {}
|
||||
};
|
||||
},
|
||||
|
||||
// onUnload() {
|
||||
// uni.$off('createOrdermessage')
|
||||
// },
|
||||
onLoad(e) {
|
||||
console.log(e,140)
|
||||
let res = JSON.parse(e.tableId)
|
||||
console.log(res)
|
||||
this.listinfo = res
|
||||
// uni.$on('createOrdermessage', res => {
|
||||
// console.log(1111111)
|
||||
// console.log(res)
|
||||
// this.listinfo = res
|
||||
// })
|
||||
// uni.$on('createOrdermessage', this.getMessagess)
|
||||
},
|
||||
onShow() {
|
||||
// uni.$on('createOrdermessage', res => {
|
||||
// console.log(1111111)
|
||||
// console.log(res)
|
||||
// this.listinfo = res
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
|
||||
async ordercreatOrder() {
|
||||
let res = await this.api.ordercreatOrder({
|
||||
tableId: this.info.tableId,
|
||||
shopId: this.info.shopId,
|
||||
userId: this.info.userId
|
||||
})
|
||||
this.listinfo = res.data
|
||||
},
|
||||
copyHandle(e) {
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async paymodfiyOrderInfo() {
|
||||
let res = await this.api.paymodfiyOrderInfo({
|
||||
orderId: this.listinfo.id
|
||||
})
|
||||
},
|
||||
async showpopupclick() {
|
||||
// const data = { //定义socket数据传参
|
||||
// "skuId": res.data.id,
|
||||
// "num": a == '-' ? Number(b) - 1 : Number(b) + 1, //数量
|
||||
// "type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
// "productId": item.id, //商品id
|
||||
// "shopId": uni.cache.get('shopUser').shopId,
|
||||
// "userId": uni.cache.get('userInfo').id
|
||||
// };
|
||||
let res = await this.api.payorderPay({
|
||||
orderId: this.listinfo.id,
|
||||
}) //判断是否支付成功
|
||||
if (res.code == 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay', //支付类型-固定值
|
||||
partnerid: res.data.payAppId, // 微信支付商户号
|
||||
timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
|
||||
nonceStr: res.data.paynonceStr, // 随机字符串
|
||||
package: res.data.payPackage, // 固定值
|
||||
signType: res.data.paySignType, //固定值
|
||||
paySign: res.data.paySign, //签名
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
})
|
||||
setTimeout(res => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + this
|
||||
.listinfo.id
|
||||
});
|
||||
}, 1000)
|
||||
this.paymodfiyOrderInfo()
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/mall/order/ordersuccess?id=" + datareslane.data
|
||||
// .order_id,
|
||||
// });
|
||||
},
|
||||
fail: (err) => {
|
||||
setTimeout(res => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '支付失败'
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 2000)
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/order_detail?orderId=' + this.listinfo.id
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
clickselect(b) {
|
||||
this.pay_type = b
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//#ifdef MP-WEIXIN || H5
|
||||
var query = uni.createSelectorQuery().in(this).select('.fixedview')
|
||||
query.boundingClientRect(ele => {
|
||||
var that = this;
|
||||
that.height = (ele.height) + "px";
|
||||
that = null;
|
||||
// uni.getSystemInfo({
|
||||
// success(res) {
|
||||
|
||||
// }
|
||||
// })
|
||||
}).exec();
|
||||
//#endif
|
||||
//#ifdef MP-ALIPAY
|
||||
my.createSelectorQuery().selectAll('.fixedview').boundingClientRect().exec(ele => {
|
||||
var nodeData = ele[0]
|
||||
var that = this;
|
||||
that.height = (nodeData.height) + "px";
|
||||
that = null;
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 28upx;
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.border {
|
||||
padding-bottom: 28upx;
|
||||
border-bottom: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10upx;
|
||||
color: $color-priamry;
|
||||
border: 1px solid $color-priamry;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
|
||||
.number-wrap {
|
||||
background-color: #fafafa;
|
||||
border-radius: 16upx;
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.number {
|
||||
font-size: 42upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
.i {
|
||||
font-size: 20upx;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 38upx;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 28upx 0;
|
||||
|
||||
.item:nth-child(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 28upx;
|
||||
|
||||
.n {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 28upx;
|
||||
border-top: 1upx solid #fafafa;
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 28upx;
|
||||
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx;
|
||||
margin-top: 32rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.sixcontentone {
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom: 1px solid #F7F7F7;
|
||||
|
||||
.sixcontent_one {
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontenttow {
|
||||
.sixcontenttowitem {
|
||||
margin-top: 16rpx;
|
||||
|
||||
.sixcontenttowitemone {
|
||||
image {
|
||||
margin-left: 24rpx;
|
||||
width: 31.37rpx;
|
||||
height: 27.34rpx;
|
||||
}
|
||||
|
||||
.sixcontenttowitemonetext {
|
||||
margin-left: 14rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1149
pages/order_food/order_food.vue
Normal file
1149
pages/order_food/order_food.vue
Normal file
File diff suppressed because it is too large
Load Diff
149
pages/pay_code/pay_code.vue
Normal file
149
pages/pay_code/pay_code.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="t">{{shopUser.nickName}}</text>
|
||||
</view>
|
||||
<view class="code-wrap">
|
||||
<view class="num-wrap">
|
||||
<text class="t">账户余额：</text>
|
||||
<text class="num">{{shopUser.amount}}</text>
|
||||
</view>
|
||||
<view class="line-code">
|
||||
<tki-barcode ref="tkiBarcode" show :opations="tkiOptions"></tki-barcode>
|
||||
</view>
|
||||
<view class="ewm-wrap">
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="createcardNo"></uqrcode>
|
||||
</view>
|
||||
<view class="name">
|
||||
<text>使用门店：{{shopUser.name}}</text>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tkiBarcode from '@/components/tki-barcode/tki-barcode.vue';
|
||||
export default {
|
||||
components: {
|
||||
tkiBarcode
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tkiOptions: {
|
||||
height: 210,
|
||||
fontSize: 28,
|
||||
textMargin: 14
|
||||
},
|
||||
shopUser: {},
|
||||
createcardNo: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.logincreateCardNo();
|
||||
},
|
||||
methods: {
|
||||
async logincreateCardNo() {
|
||||
let res = await this.api.logincreateCardNo()
|
||||
if (res.code == 0) {
|
||||
this.createcardNo = res.data
|
||||
this.$refs.tkiBarcode.setval(this.createcardNo)//操作属性
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #eb6c37;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 40upx;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
padding-bottom: 40upx;
|
||||
|
||||
.t {
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
padding-bottom: 20upx;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
border-bottom: 1upx solid #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-wrap {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 40upx;
|
||||
position: relative;
|
||||
$radiusSize: 40upx;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
width: $radiusSize;
|
||||
height: $radiusSize;
|
||||
background-color: #eb6c37;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: $radiusSize / 2 * -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: $radiusSize / 2 * -1;
|
||||
}
|
||||
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.num {
|
||||
font-size: 42upx;
|
||||
position: relative;
|
||||
top: 8upx;
|
||||
}
|
||||
}
|
||||
|
||||
.line-code {
|
||||
padding: 40upx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ewm-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40upx 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #ececec;
|
||||
position: absolute;
|
||||
top: calc(42% + 20upx);
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
pages/user/coupon.vue
Normal file
49
pages/user/coupon.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<navigator class="t" hover-class="none">历史记录</navigator>
|
||||
<navigator class="t" hover-class="none">管理</navigator>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in 5" :key="item"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$height: 40px;
|
||||
.header {
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 $paddingSize;
|
||||
.t {
|
||||
margin-left: $paddingSize;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding: $height $paddingSize $paddingSize;
|
||||
.item {
|
||||
border-radius: 20upx;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
margin-top: $paddingSize;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
247
pages/user/user.vue
Normal file
247
pages/user/user.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-info-wrap">
|
||||
<view style="width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
|
||||
style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
|
||||
<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill">
|
||||
</image>
|
||||
<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
|
||||
</image>
|
||||
</button>
|
||||
</view>
|
||||
<view class="info flex-colum-start">
|
||||
<!-- <view class="name"><input type="nickname" @blur="blurname"
|
||||
v-model="userInfo.nickName" placeholder="请输入昵称"></view> -->
|
||||
<text class="phone">{{userInfo.telephone || '无'}}</text>
|
||||
|
||||
<!-- <text class="phone">1882177889</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="header-wrap">
|
||||
<view class="header">
|
||||
<text class="title">我的订单</text>
|
||||
<view class="more" @click="orderHandle(1)">
|
||||
<text class="t">全部订单</text>
|
||||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-menu">
|
||||
<view class="item" @click="orderHandle(2)">
|
||||
<image class="icon" src="@/static/user_icon1.png" mode="aspectFit"></image>
|
||||
<text class="t">待付款</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(3)">
|
||||
<image class="icon" src="@/static/user_icon2.png" mode="aspectFit"></image>
|
||||
<text class="t">待发货</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(4)">
|
||||
<image class="icon" src="@/static/user_icon3.png" mode="aspectFit"></image>
|
||||
<text class="t">已完成</text>
|
||||
</view>
|
||||
<view class="item" @click="orderHandle(5)">
|
||||
<image class="icon" src="@/static/user_icon4.png" mode="aspectFit"></image>
|
||||
<text class="t">退款</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="card">
|
||||
<view class="header-wrap">
|
||||
<view class="header">
|
||||
<text class="title">更多服务</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-menu">
|
||||
<navigator class="item" hover-class="none" url="/pages/user/coupon">
|
||||
<image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image>
|
||||
<text class="t">优惠券</text>
|
||||
</navigator>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image>
|
||||
<text class="t">寄存记录</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image>
|
||||
<text class="t">储值明细</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image>
|
||||
<text class="t">设置</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="version-wrap">
|
||||
<!-- <text class="t">版本号：2.0.0</text> -->
|
||||
<text class="t">陕西超掌柜科技有限公司</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shopUser: {},
|
||||
userInfo: {},
|
||||
shopInfo:{}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (uni.cache.get('token')) {
|
||||
this.loginwxuserInfo()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
blurname(e) {
|
||||
console.log(e);
|
||||
this.userlist.nickname = e.detail.value
|
||||
},
|
||||
async loginwxuserInfo() {
|
||||
let res = await this.api.loginwxuserInfo({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
shopId: uni.cache.get('shopUser').shopId
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('userInfo', res.data.userInfo);
|
||||
uni.cache.set('shopUser', res.data.shopUser);
|
||||
uni.cache.set('shopInfo', res.data.shopInfo);
|
||||
this.shopUser = uni.cache.get('shopUser')
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.shopInfo = uni.cache.get('shopInfo')
|
||||
}
|
||||
},
|
||||
// / 更换头像
|
||||
onChooseAvatar(e) {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: true
|
||||
})
|
||||
console.log(e.detail.avatarUrl)
|
||||
let file = e.detail.avatarUrl;
|
||||
uploadImage(file, 'avatar',
|
||||
result => {
|
||||
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||||
// let objAge = {
|
||||
// 'url': result,
|
||||
// 'extname': 'png',
|
||||
// 'name': 'imgss.png'
|
||||
// };
|
||||
// this.userlist.avatar.push(objAge)
|
||||
this.userInfo.avatar = result
|
||||
console.log(this.userInfo.avatar)
|
||||
uni.hideLoading()
|
||||
}, result => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
orderHandle(type) {
|
||||
this.useStorage.set('orderType', type);
|
||||
uni.switchTab({
|
||||
url: '/pages/order/order'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 0 $paddingSize;
|
||||
}
|
||||
|
||||
.user-info-wrap {
|
||||
padding: $paddingSize + 20upx $paddingSize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
$size: 120upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: $paddingSize;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
input {
|
||||
text-align: left;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
padding-top: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
margin-bottom: $paddingSize;
|
||||
|
||||
.header-wrap {
|
||||
padding: 0 $paddingSize;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 38upx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1upx solid #f2f2f2;
|
||||
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
color: #999;
|
||||
margin-right: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-menu {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 38upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
$size: 68upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.t {
|
||||
padding-top: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-wrap {
|
||||
padding: 100upx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.t {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user