@@ -33,6 +33,7 @@ | |||
"flyio": "^0.6.2", | |||
"js-base64": "^3.7.2", | |||
"regenerator-runtime": "^0.12.1", | |||
"uqrcodejs": "^4.0.7", | |||
"uview-ui": "^2.0.31", | |||
"vue": "^2.7.14", | |||
"vuex": "^3.6.2" | |||
@@ -20588,6 +20589,11 @@ | |||
"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", | |||
"dev": true | |||
}, | |||
"node_modules/uqrcodejs": { | |||
"version": "4.0.7", | |||
"resolved": "https://registry.npmmirror.com/uqrcodejs/-/uqrcodejs-4.0.7.tgz", | |||
"integrity": "sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==" | |||
}, | |||
"node_modules/uri-js": { | |||
"version": "4.4.1", | |||
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", | |||
@@ -38373,6 +38379,11 @@ | |||
"integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==", | |||
"dev": true | |||
}, | |||
"uqrcodejs": { | |||
"version": "4.0.7", | |||
"resolved": "https://registry.npmmirror.com/uqrcodejs/-/uqrcodejs-4.0.7.tgz", | |||
"integrity": "sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==" | |||
}, | |||
"uri-js": { | |||
"version": "4.4.1", | |||
"resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz", | |||
@@ -71,6 +71,7 @@ | |||
"flyio": "^0.6.2", | |||
"js-base64": "^3.7.2", | |||
"regenerator-runtime": "^0.12.1", | |||
"uqrcodejs": "^4.0.7", | |||
"uview-ui": "^2.0.31", | |||
"vue": "^2.7.14", | |||
"vuex": "^3.6.2" | |||
@@ -9,6 +9,14 @@ | |||
"navigationStyle": "custom" | |||
} | |||
}, | |||
{ | |||
"path" : "pages/homeBeefWorkShop/homeBeefWorkShop", | |||
"style" : | |||
{ | |||
"enablePullDownRefresh": false, | |||
"navigationBarTitleText": "点餐小程序" | |||
} | |||
}, | |||
{ | |||
"path" : "pages/home/home", | |||
"style" : | |||
@@ -318,8 +326,7 @@ | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
} | |||
], | |||
"tabBar": { | |||
"color": "#999999", | |||
@@ -328,11 +335,17 @@ | |||
"backgroundColor": "#ffffff", | |||
"list": [ | |||
{ | |||
"pagePath": "pages/homeNew/homeNew", | |||
"pagePath": "pages/homeBeefWorkShop/homeBeefWorkShop", | |||
"iconPath": "static/images/home.png", | |||
"selectedIconPath": "static/images/home-active.png", | |||
"text": "首页" | |||
}, | |||
// { | |||
// "pagePath": "pages/homeNew/homeNew", | |||
// "iconPath": "static/images/home.png", | |||
// "selectedIconPath": "static/images/home-active.png", | |||
// "text": "首页" | |||
// }, | |||
{ | |||
"pagePath": "pages/food/food", | |||
"iconPath": "static/images/food.png", | |||
@@ -53,7 +53,7 @@ | |||
} | |||
return time; | |||
}, | |||
//获取用户信息缓存 | |||
//设置用户信息缓存 | |||
onSetUserStorage(strUser) { | |||
let user = this.onGetUserStorage() || {}; | |||
if (strUser != null) { | |||
@@ -61,7 +61,7 @@ | |||
uni.setStorageSync('user', JSON.stringify(user)); | |||
} | |||
}, | |||
//设置用户信息缓存 | |||
//获取用户信息缓存 | |||
onGetUserStorage() { | |||
try { | |||
const userStorage = uni.getStorageSync('user'); | |||
@@ -43,5 +43,17 @@ export default { | |||
method: 'GET', | |||
interfaceType: 2 | |||
}); | |||
}, | |||
/** | |||
* 微信充值到账号余额 | |||
*/ | |||
rechargepay(data) { | |||
return request({ | |||
url : 'api/wechat/rechargepay', | |||
method: 'POST', | |||
data: data, | |||
interfaceType: 2 | |||
}); | |||
} | |||
} |
@@ -0,0 +1,95 @@ | |||
import request from "@/utils/request.js"; | |||
const interfaceType = 0; | |||
export default { | |||
/** | |||
* 开通钱包 | |||
* @param {Object} data | |||
*/ | |||
openuserwallet(data) { | |||
return request({ | |||
url: `/api/user-wallet/openuserwallet`, | |||
data, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 查询钱包余额 | |||
* @param {Object} data | |||
*/ | |||
userwalletcenten(userId) { | |||
return request({ | |||
url: `/api/user-wallet/userwalletcenten/${userId}`, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 获取充值活动 | |||
* @param {Object} data | |||
*/ | |||
getRechargeActivityPgage(data) { | |||
return request({ | |||
url: `/api/rechargeactivity/getRechargeActivityPgage`, | |||
data, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 查询储值记录分页 | |||
* @param {Object} data | |||
*/ | |||
walletrecordpgage(data) { | |||
return request({ | |||
url: `/api/wallet-record/walletrecordpgage`, | |||
data, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 操作储值记录 | |||
* @param {Object} data | |||
*/ | |||
walletrecordhandle(data) { | |||
return request({ | |||
url: `/api/wallet-record/walletrecordhandle`, | |||
data, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 创建储值记录 | |||
* @param {Object} data | |||
*/ | |||
wachatwalletrecordhandle(data) { | |||
return request({ | |||
url: `/api/wallet-record/wachatwalletrecordhandle`, | |||
data, | |||
method: 'POST', | |||
interfaceType | |||
}); | |||
}, | |||
/** | |||
* 根据储值记录ID 查询储值记录详情 | |||
* @param {Object} id | |||
*/ | |||
getwalletrecord(id) { | |||
return request({ | |||
url: `/api/wallet-record/getwalletrecord?Id=${id}`, | |||
method: 'GET', | |||
interfaceType | |||
}); | |||
} | |||
} |
@@ -54,7 +54,7 @@ | |||
"quickapp" : {}, | |||
/* 快应用特有相关 */ | |||
"mp-weixin" : { | |||
"appid" : "wx67f7399628986bfb", | |||
"appid" : "", | |||
"setting" : { | |||
"urlCheck" : false | |||
}, | |||
@@ -76,5 +76,6 @@ | |||
}, | |||
"mp-qq" : { | |||
"usingComponents" : true | |||
} | |||
}, | |||
"fallbackLocale" : "zh-Hans" | |||
} |
@@ -374,6 +374,46 @@ | |||
} | |||
} | |||
,{ | |||
"path" : "pages/storedValueAccount/storedValueAccount", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "储值账户", | |||
"enablePullDownRefresh": false, | |||
"navigationBarBackgroundColor": "#FFF" | |||
} | |||
} | |||
,{ | |||
"path" : "pages/storedValueRecord/storedValueRecord", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "储值记录列表", | |||
"enablePullDownRefresh": false, | |||
"navigationBarBackgroundColor": "#FFF" | |||
} | |||
} | |||
,{ | |||
"path" : "pages/storedValueRecordDetail/storedValueRecordDetail", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "储值记录详情", | |||
"enablePullDownRefresh": false, | |||
"navigationBarBackgroundColor": "#FFF" | |||
} | |||
} | |||
,{ | |||
"path" : "pages/storedValueActivity/storedValueActivity", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "储值活动", | |||
"enablePullDownRefresh": false, | |||
"navigationBarBackgroundColor": "#FFF" | |||
} | |||
} | |||
], | |||
"tabBar": { | |||
"color": "#999999", | |||
@@ -381,18 +421,18 @@ | |||
"borderStyle": "black", | |||
"backgroundColor": "#ffffff", | |||
"list": [ | |||
// { | |||
// "pagePath": "pages/homeBeefWorkShop/homeBeefWorkShop", | |||
// "iconPath": "static/images/home.png", | |||
// "selectedIconPath": "static/images/home-active.png", | |||
// "text": "首页" | |||
// }, | |||
{ | |||
"pagePath": "pages/homeNew/homeNew", | |||
"pagePath": "pages/homeBeefWorkShop/homeBeefWorkShop", | |||
"iconPath": "static/images/home.png", | |||
"selectedIconPath": "static/images/home-active.png", | |||
"text": "首页" | |||
}, | |||
// { | |||
// "pagePath": "pages/homeNew/homeNew", | |||
// "iconPath": "static/images/home.png", | |||
// "selectedIconPath": "static/images/home-active.png", | |||
// "text": "首页" | |||
// }, | |||
{ | |||
"pagePath": "pages/food/food", | |||
"iconPath": "static/images/food.png", | |||
@@ -85,8 +85,8 @@ | |||
}, 1000); | |||
}, | |||
async onSearchUserLocation() { | |||
let response = await getApp().onGetUserLocation(); | |||
if (response) { | |||
// let response = await getApp().onGetUserLocation(); | |||
if (true) { | |||
this.isShowLoactionAuth = false; | |||
this.onFetchStoreList(); | |||
} else { | |||
@@ -157,8 +157,8 @@ | |||
}); | |||
}, | |||
async onGetUserLocation() { | |||
const response = await getApp().onGetUserLocation(); | |||
if (response) { | |||
// const response = await getApp().onGetUserLocation(); | |||
if (true) { | |||
this.isShowLoactionAuth = false; | |||
this.onQueryStoreAndGoods(); | |||
} else { | |||
@@ -3,12 +3,14 @@ | |||
<view class="my-header-cover"> | |||
<image class="image-common-cover" :src="backgroundIMG"></image> | |||
</view> | |||
<view class="my-face" v-if="user != null" > | |||
<view class="my-face" v-if="user != null" @click="onPersonalData"> | |||
<image v-if="user.memberInfo_Id != null" class="image-common-cover" :src="user.headImgUrl"></image> | |||
<image v-else class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | |||
<image v-else class="image-common-cover" | |||
:src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | |||
</view> | |||
<view class="my-face" v-else @click="onLogin"> | |||
<image class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | |||
<image class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"> | |||
</image> | |||
<!-- <text class="my-face-login">请登录</text> --> | |||
</view> | |||
<view class="my-info-box"> | |||
@@ -18,7 +20,8 @@ | |||
<view class="my-member-info"> | |||
<view class="member-info-item" @click="onMemberInfo"> | |||
<view class="image-iconfont"> | |||
<image :src="imageServer.concat('8858b076-43d1-42c3-88ba-932072431702.png')" class="image-common-cover"></image> | |||
<image :src="imageServer.concat('8858b076-43d1-42c3-88ba-932072431702.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="member-info-text"> | |||
会员信息 | |||
@@ -26,13 +29,23 @@ | |||
</view> | |||
<view class="member-info-item" @click="onJumpCoupon"> | |||
<view class="image-iconfont"> | |||
<image :src="imageServer.concat('e888a3dc-67e8-48ed-a228-5d83037326fd.png')" class="image-common-cover"></image> | |||
<image :src="imageServer.concat('e888a3dc-67e8-48ed-a228-5d83037326fd.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="member-info-text"> | |||
卡券 | |||
</view> | |||
</view> | |||
<view class="member-info-item" @click="onPersonalData"> | |||
<view class="member-info-item" @click="onStoredValue"> | |||
<view class="image-iconfont"> | |||
<image :src="imageServer.concat('e888a3dc-67e8-48ed-a228-5d83037326fd.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="member-info-text"> | |||
储值 | |||
</view> | |||
</view> | |||
<view class="member-info-item" @click="onPersonalData" v-if="false"> | |||
<view class="member-info-name gold-color text-overflow-one"> | |||
{{user.nickName ? user.nickName : '微信用户'}} | |||
</view> | |||
@@ -87,7 +100,8 @@ | |||
<view class="service-area-list"> | |||
<view class="service-area-item" @click="onJumpMessage"> | |||
<view class="image-iconfont"> | |||
<image :src="imageServer.concat('841b1755-cf36-4d89-9d24-636524bb99c7.png')" class="image-common-cover"></image> | |||
<image :src="imageServer.concat('841b1755-cf36-4d89-9d24-636524bb99c7.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="service-area-text"> | |||
欢迎留言 | |||
@@ -95,7 +109,8 @@ | |||
</view> | |||
<view class="service-area-item" @click="onJumpPosition"> | |||
<view class="image-iconfont"> | |||
<image :src="imageServer.concat('0b19e277-94fb-44f2-8eeb-0faa75857b20.png')" class="image-common-cover"></image> | |||
<image :src="imageServer.concat('0b19e277-94fb-44f2-8eeb-0faa75857b20.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="service-area-text"> | |||
找到我们 | |||
@@ -107,10 +122,17 @@ | |||
</template> | |||
<script> | |||
import { mapState } from 'vuex'; | |||
import { | |||
mapState | |||
} from 'vuex'; | |||
import memberAPI from "@/api/member.js"; | |||
import { debounce } from "@/utils/DebounceAndThrottle.js"; | |||
import { encode, decode } from 'js-base64'; | |||
import { | |||
debounce | |||
} from "@/utils/DebounceAndThrottle.js"; | |||
import { | |||
encode, | |||
decode | |||
} from 'js-base64'; | |||
export default { | |||
data() { | |||
return { | |||
@@ -139,7 +161,7 @@ | |||
}, | |||
methods: { | |||
onPersonalData: debounce(function() { | |||
getApp().onCheckUserSession('personal').then( async response => { | |||
getApp().onCheckUserSession('personal').then(async response => { | |||
const userStorage = getApp().onGetUserStorage(); | |||
const memberRes = await memberAPI.selectMemberByOpenId(userStorage.openId); | |||
if (memberRes.isSuccess) { | |||
@@ -168,8 +190,8 @@ | |||
} | |||
}); | |||
}, 2000, true), | |||
onMemberInfo: debounce( function() { | |||
getApp().onCheckUserSession('memberCardDetail').then( async response => { | |||
onMemberInfo: debounce(function() { | |||
getApp().onCheckUserSession('memberCardDetail').then(async response => { | |||
const userStorage = getApp().onGetUserStorage(); | |||
const memberRes = await memberAPI.selectMemberByOpenId(userStorage.openId); | |||
if (memberRes.isSuccess) { | |||
@@ -199,14 +221,14 @@ | |||
}); | |||
}, 2000, true), | |||
onJumpCoupon: debounce(function() { | |||
getApp().onCheckUserSession('coupon').then( async response => { | |||
getApp().onCheckUserSession('coupon').then(async response => { | |||
const userStorage = getApp().onGetUserStorage(); | |||
const memberRes = await memberAPI.selectMemberByOpenId(userStorage.openId); | |||
if (memberRes.isSuccess) { | |||
getApp().onSetUserStorage(memberRes.data); | |||
if (memberRes.data.memberInfo_Id && memberRes.data.phone) { | |||
uni.navigateTo({ | |||
url:'/pages/coupon/coupon' | |||
url: '/pages/coupon/coupon' | |||
}); | |||
} else { | |||
uni.navigateTo({ | |||
@@ -228,6 +250,42 @@ | |||
} | |||
}); | |||
}, 2000, true), | |||
onStoredValue: debounce(function() { | |||
getApp().onCheckUserSession('storedValueAccount').then(async response => { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage.memberInfo_Id && userStorage.phone) { | |||
uni.navigateTo({ | |||
url: '/pages/storedValueAccount/storedValueAccount' | |||
}); | |||
} else { | |||
const memberRes = await memberAPI.selectMemberByOpenId(userStorage?.openId); | |||
if (memberRes?.isSuccess) { | |||
getApp().onSetUserStorage(memberRes.data); | |||
if (memberRes.data.memberInfo_Id && memberRes.data.phone) { | |||
uni.navigateTo({ | |||
url: '/pages/storedValueAccount/storedValueAccount' | |||
}); | |||
} else { | |||
uni.navigateTo({ | |||
url: '/pages/memberRegister/memberRegister' | |||
}); | |||
} | |||
} else { | |||
if (memberRes?.msg === '会员不存在') { | |||
uni.navigateTo({ | |||
url: '/pages/memberRegister/memberRegister' | |||
}); | |||
} | |||
uni.showToast({ | |||
title: memberRes.msg || '服务端出错!', | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
}); | |||
} | |||
} | |||
}); | |||
}, 2000, true), | |||
onLogin() { | |||
uni.navigateTo({ | |||
url: '/pages/login/login' | |||
@@ -267,27 +325,28 @@ | |||
width: 100rpx; | |||
height: 100rpx; | |||
} | |||
.my-container { | |||
height: 100vh; | |||
/* padding-bottom: 50rpx; */ | |||
background-color: #F1F1F1; | |||
} | |||
.my-header-cover { | |||
height: 630rpx; | |||
width: 100%; | |||
} | |||
.service-area { | |||
margin-top: 195rpx; | |||
} | |||
.image-common-cover { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.my-face { | |||
position: absolute; | |||
top: 410rpx; | |||
@@ -297,11 +356,11 @@ | |||
height: 180rpx; | |||
z-index: 2; | |||
} | |||
.my-face image { | |||
border-radius: 50%; | |||
} | |||
.my-info-box { | |||
position: absolute; | |||
top: 515rpx; | |||
@@ -314,16 +373,16 @@ | |||
display: flex; | |||
padding-bottom: 50rpx; | |||
} | |||
.gold-color { | |||
color: #F2C75A; | |||
} | |||
.my-grade { | |||
padding: 30rpx 0 50rpx 30rpx; | |||
font-size: 24rpx; | |||
} | |||
.my-member-info { | |||
flex-grow: 1; | |||
display: flex; | |||
@@ -331,37 +390,37 @@ | |||
justify-content: space-around; | |||
padding: 0 30rpx; | |||
} | |||
.member-info-item { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.member-info-item:nth-child(2) { | |||
padding: 0 70rpx; | |||
border-left: 4rpx solid #F1F1F1; | |||
border-right: 4rpx solid #F1F1F1; | |||
} | |||
.member-info-item .iconfont { | |||
font-size: 50rpx; | |||
} | |||
.member-info-text { | |||
font-size: 28rpx; | |||
font-weight: 700; | |||
color: #333; | |||
margin-top: 10rpx; | |||
} | |||
.experience-box { | |||
border-top: 1px dashed #999; | |||
margin: 10rpx 30rpx; | |||
padding: 0 30rpx; | |||
} | |||
.experience-number { | |||
display: flex; | |||
justify-content: space-between; | |||
@@ -369,19 +428,19 @@ | |||
font-size: 24rpx; | |||
color: #999; | |||
} | |||
.experience-slider slider { | |||
margin: 0; | |||
margin-top: 20rpx; | |||
} | |||
.current-season { | |||
margin: 20rpx auto; | |||
width: 720rpx; | |||
padding-top: 200rpx; | |||
box-sizing: border-box; | |||
} | |||
.curret-season-title { | |||
font-size: 24rpx; | |||
padding-left: 30rpx; | |||
@@ -389,18 +448,18 @@ | |||
font-weight: 600; | |||
color: #FFF; | |||
} | |||
.season-item { | |||
position: relative; | |||
border-radius: 30rpx; | |||
overflow: hidden; | |||
margin-bottom: 28rpx; | |||
} | |||
.season-item:last-child { | |||
margin-bottom: 0; | |||
} | |||
.season-item-title { | |||
position: absolute; | |||
top: 30rpx; | |||
@@ -410,18 +469,18 @@ | |||
font-weight: 700; | |||
letter-spacing: 5rpx; | |||
} | |||
.season-item-cover { | |||
width: 720rpx; | |||
height: 180rpx; | |||
} | |||
.season-item-cover image { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.service-area-list { | |||
width: 540rpx; | |||
height: 210rpx; | |||
@@ -432,42 +491,44 @@ | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.service-area-item { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
flex-grow: 1; | |||
} | |||
.service-area-item .iconfont { | |||
font-size: 80rpx; | |||
} | |||
.service-area-text { | |||
font-weight: 600; | |||
margin-top: 10rpx; | |||
font-size: 28rpx; | |||
} | |||
.service-area-item:first-child { | |||
border-right: 4rpx solid #dedede; | |||
} | |||
.member-info-item .icon-ico, .icon-xinjian { | |||
.member-info-item .icon-ico, | |||
.icon-xinjian { | |||
color: #75C9B9; | |||
} | |||
.member-info-item .icon-qian1, .icon-dingwei { | |||
.member-info-item .icon-qian1, | |||
.icon-dingwei { | |||
color: #A0A0A0; | |||
} | |||
.member-info-name { | |||
width: 150rpx; | |||
height: 100rpx; | |||
line-height: 100rpx; | |||
} | |||
.my-face-login { | |||
position: absolute; | |||
font-size: 28rpx; | |||
@@ -480,4 +541,4 @@ | |||
right: -120rpx; | |||
top: 45rpx; | |||
} | |||
</style> | |||
</style> |
@@ -7,7 +7,8 @@ | |||
</view> | |||
<view class="store-info-detail"> | |||
<view class="store-cover"> | |||
<image :src="imageServer.concat('5d404162-0cae-41df-9a91-51eda578d60b.png')" class="image-common-cover"></image> | |||
<image :src="imageServer.concat('5d404162-0cae-41df-9a91-51eda578d60b.png')" | |||
class="image-common-cover"></image> | |||
</view> | |||
<view class="store-info-right"> | |||
<view class="total-price"> | |||
@@ -18,6 +19,23 @@ | |||
</view> | |||
</view> | |||
</view> | |||
<view class="payment-method-card"> | |||
<view class="payment-method-head"> | |||
选择支付方式 | |||
</view> | |||
<view class="payment-method-box"> | |||
<view :class="{'payment-method-item': true, 'payment-method-active': paymentMethod === 1}" | |||
@click="onChangePaymentMethod(1)"> | |||
微信支付 | |||
</view> | |||
<view :class="{'payment-method-item': true, 'payment-method-active': paymentMethod === 2}" | |||
@click="onChangePaymentMethod(2)"> | |||
<text>储值余额支付</text> | |||
<text class="balance">余额:¥{{userWallet.money || 0}}</text> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="payment-member-card common-card" v-if="false"> | |||
<view class="payment-member-head"> | |||
@@ -57,12 +75,17 @@ | |||
</template> | |||
<script> | |||
import storedValueAPI from "@/api/storedValue.js"; | |||
import payAPI from "@/api/pay.js"; | |||
import orderAPI from "@/api/order.js"; | |||
import activityAPI from "@/api/activity.js"; | |||
import couponAPI from "@/api/coupon.js"; | |||
import { debounce } from "@/utils/DebounceAndThrottle.js"; | |||
import { throttle } from "@/utils/DebounceAndThrottle.js"; | |||
import { | |||
debounce | |||
} from "@/utils/DebounceAndThrottle.js"; | |||
import { | |||
throttle | |||
} from "@/utils/DebounceAndThrottle.js"; | |||
import store from "@/store/index.js"; | |||
import Encrypt from "@/utils/crypto.js"; | |||
export default { | |||
@@ -75,6 +98,7 @@ | |||
}, | |||
isFinished: false, | |||
user: {}, | |||
paymentMethod: 1 | |||
} | |||
}, | |||
computed: { | |||
@@ -92,6 +116,9 @@ | |||
}, | |||
currentNewOrder() { | |||
return store.state.currentNewOrder; | |||
}, | |||
userWallet() { | |||
return store.state.userWallet; | |||
} | |||
}, | |||
onHide() { | |||
@@ -100,15 +127,19 @@ | |||
onUnload() { | |||
this.onReturnCoupon(); | |||
}, | |||
onShow() { | |||
this.onUserwalletcenten(); | |||
}, | |||
methods: { | |||
onCountDownFinish() { | |||
this.isFinished = true; | |||
}, | |||
//如果支付失败或者取消支付 自动退还用户的优惠券 | |||
async onReturnCoupon() { | |||
console.log('this.currentNewOrder', this.currentNewOrder); | |||
if (this.currentNewOrder && this.currentNewOrder.couponCustomerId) { | |||
const response = await couponAPI.onRebackcoupon({id: this.currentNewOrder.orderNumber}); | |||
const response = await couponAPI.onRebackcoupon({ | |||
id: this.currentNewOrder.orderNumber | |||
}); | |||
if (response.isSuccess) { | |||
uni.showToast({ | |||
title: '优惠券已自动退还', | |||
@@ -125,7 +156,7 @@ | |||
} | |||
}, | |||
onConfirmPayment: debounce(async function() { | |||
if(this.isFinished == true) { | |||
if (this.isFinished == true) { | |||
uni.showToast({ | |||
title: '支付超时,请返回上一页', | |||
duration: 2000, | |||
@@ -133,92 +164,148 @@ | |||
mask: true | |||
}); | |||
} else { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage != null) { | |||
let response = await payAPI.wechatPay(userStorage.openId ,this.orderNumber); | |||
let result = response.data; | |||
if (response.statusCode == 200) { | |||
uni.requestPayment({ | |||
provider: 'wxpay', | |||
orderInfo: '', | |||
timeStamp: result.timeStamp, | |||
nonceStr: result.nonceStr, | |||
package: result.package, | |||
paySign: result.paySign, | |||
signType: result.signType, | |||
success: async () => { | |||
let orderPayResponse = await orderAPI.orderPay(this.orderNumber); | |||
if (orderPayResponse.isSuccess == true) { | |||
store.commit('onSetCurrentNewOrder', null); | |||
uni.showToast({ | |||
title: orderPayResponse.msg || '支付成功', | |||
icon: 'none', | |||
mask: true, | |||
duration: 2000, | |||
complete: async () => { | |||
store.commit('onClearShopCart'); | |||
let autoActivityJson = store.state.userAutoActivityJson; | |||
if (autoActivityJson.memberInfoId) { | |||
autoActivityJson.isParticipate = true; | |||
await activityAPI.memberJoinActivity(autoActivityJson); | |||
store.commit('onClearUserAutoActivityJson'); | |||
} | |||
let userExchangePriceJson = store.state.userExchangePriceJson; | |||
if (userExchangePriceJson.length > 0) { | |||
userExchangePriceJson.forEach(async changeItem => { | |||
delete changeItem.goodsId; | |||
changeItem.isParticipate = true; | |||
await activityAPI.memberJoinActivity(changeItem); | |||
}); | |||
store.commit('clearUserExchangePriceJson'); | |||
} | |||
uni.redirectTo({ | |||
url: `/pages/orderDetail/orderDetail?orderNumber=${this.orderNumber}` | |||
}); | |||
} | |||
}); | |||
} else { | |||
let errorMsg = orderPayResponse.errors; | |||
uni.showToast({ | |||
title: errorMsg || '支付失败', | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true, | |||
complete() { | |||
uni.redirectTo({ | |||
url: `/pages/paymentStatus/paymentStatus?isSuccess=false` | |||
}); | |||
} | |||
if (this.paymentMethod === 1) { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage != null) { | |||
let response = await payAPI.wechatPay(userStorage.openId, this.orderNumber); | |||
let result = response.data; | |||
if (response.statusCode == 200) { | |||
uni.requestPayment({ | |||
provider: 'wxpay', | |||
orderInfo: '', | |||
timeStamp: result.timeStamp, | |||
nonceStr: result.nonceStr, | |||
package: result.package, | |||
paySign: result.paySign, | |||
signType: result.signType, | |||
success: async () => { | |||
this.handlePaySuccess(); | |||
}, | |||
fail: error => { | |||
uni.redirectTo({ | |||
url: `/pages/paymentStatus/paymentStatus?isSuccess=false` | |||
}); | |||
} | |||
}, | |||
fail: error => { | |||
uni.redirectTo({ | |||
url: `/pages/paymentStatus/paymentStatus?isSuccess=false` | |||
}); | |||
} | |||
}); | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: response.errors, | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
}); | |||
} | |||
} else { | |||
uni.showToast({ | |||
title: response.errors, | |||
title: '用户信息为空,请登录后重试', | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
complete() { | |||
uni.navigateTo({ | |||
url: '/pages/login/login' | |||
}); | |||
} | |||
}); | |||
} | |||
} else { | |||
uni.showToast({ | |||
title: '用户信息为空,请登录后重试', | |||
duration: 2000, | |||
complete() { | |||
uni.navigateTo({ | |||
url: '/pages/login/login' | |||
}); | |||
} | |||
const response = await storedValueAPI.walletrecordhandle({ | |||
"walletId": this.userWallet.id, | |||
"money": this.totalPrice, | |||
"transactionType": 2, | |||
"transactionMoney": 0, | |||
"giveMoney": 0, | |||
"storeId": this.currentStore.id, | |||
"storeName": this.currentStore.store_Name | |||
}); | |||
if (response.statusCode === 200 && response.data) { | |||
this.handlePaySuccess(); | |||
} else { | |||
uni.redirectTo({ | |||
url: `/pages/paymentStatus/paymentStatus?isSuccess=false` | |||
}); | |||
} | |||
} | |||
} | |||
}, 5000, true), | |||
/** | |||
* 支付成功后 调用 | |||
*/ | |||
async handlePaySuccess() { | |||
let orderPayResponse = await orderAPI.orderPay(this.orderNumber); | |||
if (orderPayResponse.isSuccess == true) { | |||
store.commit('onSetCurrentNewOrder', null); | |||
uni.showToast({ | |||
title: orderPayResponse.msg || '支付成功', | |||
icon: 'none', | |||
mask: true, | |||
duration: 2000, | |||
complete: async () => { | |||
store.commit('onClearShopCart'); | |||
let autoActivityJson = store.state.userAutoActivityJson; | |||
if (autoActivityJson.memberInfoId) { | |||
autoActivityJson.isParticipate = true; | |||
await activityAPI.memberJoinActivity(autoActivityJson); | |||
store.commit('onClearUserAutoActivityJson'); | |||
} | |||
let userExchangePriceJson = store.state.userExchangePriceJson; | |||
if (userExchangePriceJson.length > 0) { | |||
userExchangePriceJson.forEach( | |||
async changeItem => { | |||
delete changeItem.goodsId; | |||
changeItem.isParticipate = true; | |||
await activityAPI.memberJoinActivity(changeItem); | |||
}); | |||
store.commit('clearUserExchangePriceJson'); | |||
} | |||
uni.redirectTo({ | |||
url: `/pages/orderDetail/orderDetail?orderNumber=${this.orderNumber}` | |||
}); | |||
} | |||
}); | |||
} else { | |||
let errorMsg = orderPayResponse.errors; | |||
uni.showToast({ | |||
title: errorMsg || '支付失败', | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true, | |||
complete() { | |||
uni.redirectTo({ | |||
url: `/pages/paymentStatus/paymentStatus?isSuccess=false` | |||
}); | |||
} | |||
}); | |||
} | |||
}, | |||
/** | |||
* 获取用户钱包余额 | |||
*/ | |||
async onUserwalletcenten() { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage && userStorage.memberInfo_Id) { | |||
const response = await storedValueAPI.userwalletcenten(userStorage.memberInfo_Id); | |||
if (response.statusCode === 200) { | |||
if (response.data) { | |||
store.commit('onInitUserWallet', response.data); | |||
} else { | |||
const response = await storedValueAPI.openuserwallet({ | |||
"userId": userStorage.memberInfo_Id, | |||
"money": 0, | |||
"userName": userStorage.nickName, | |||
}); | |||
if (response.statusCode === 200) { | |||
this.onUserwalletcenten(); | |||
} | |||
} | |||
} | |||
} | |||
}, | |||
/** | |||
* 切换支付方式 | |||
* @param {Object} 1 | |||
*/ | |||
onChangePaymentMethod(payMethod) { | |||
this.paymentMethod = payMethod; | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -232,84 +319,85 @@ | |||
padding: 30rpx 20rpx; | |||
box-sizing: border-box; | |||
} | |||
.common-card { | |||
background-color: #FFF; | |||
padding: 30rpx 20rpx; | |||
border-radius: 30rpx; | |||
margin-bottom: 30rpx; | |||
} | |||
.remain-time { | |||
display: flex; | |||
justify-content: center; | |||
font-size: 32rpx; | |||
margin-bottom: 70rpx; | |||
} | |||
.remain-time-text { | |||
margin-right: 50rpx; | |||
} | |||
.u-count-down .u-count-down__text.u-count-down__text { | |||
font-family: fangsong; | |||
font-weight: 700; | |||
color: #222; | |||
font-size: 36rpx; | |||
} | |||
.store-info-detail { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.store-cover { | |||
width: 70rpx; | |||
height: 70rpx; | |||
flex-shrink: 0; | |||
margin-right: 20rpx; | |||
} | |||
.store-info-right .total-price { | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
font-family: fangsong; | |||
margin-bottom: 10rpx; | |||
} | |||
.store-info-right .store-name { | |||
font-size: 28rpx; | |||
color: #333; | |||
} | |||
.payment-member-head, .member-card-info { | |||
.payment-member-head, | |||
.member-card-info { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
} | |||
.payment-member-right { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.member-card-info { | |||
margin: 20rpx 0; | |||
} | |||
.member-card-text { | |||
flex-grow: 1; | |||
} | |||
.member-card-text .member-card-title { | |||
margin-bottom: 10rpx; | |||
} | |||
.member-card-text .member-card-desc { | |||
font-size: 28rpx; | |||
color: #999; | |||
} | |||
.confirm-payment { | |||
position: absolute; | |||
bottom: 50rpx; | |||
@@ -322,4 +410,49 @@ | |||
width: 700rpx; | |||
font-size: 36rpx; | |||
} | |||
</style> | |||
.payment-method-card { | |||
margin: 40rpx 0; | |||
} | |||
.payment-method-head { | |||
font-size: 28rpx; | |||
color: #999; | |||
margin-bottom: 30rpx; | |||
} | |||
.payment-method-box { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
font-size: 28rpx; | |||
.payment-method-item { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex-direction: column; | |||
border: 4rpx solid #eee; | |||
width: 300rpx; | |||
height: 120rpx; | |||
border-radius: 10rpx; | |||
.balance { | |||
font-size: 24rpx; | |||
color: #F84352; | |||
margin-top: 10rpx; | |||
} | |||
} | |||
.payment-method-active { | |||
background-color: $theme-color; | |||
border-color: $theme-color; | |||
color: #FFF; | |||
.balance { | |||
color: #FFF; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,416 @@ | |||
<template> | |||
<view class="stored-value-account"> | |||
<view class="stored-value-container"> | |||
<view class="stored-head"> | |||
<view class="stored-head-box" @click="onChangeStore"> | |||
<view class="store-name"> | |||
<icon class="iconfont icon-31dianpu"></icon> | |||
<span>{{currentStore.store_Name}}</span> | |||
</view> | |||
<view class="store-use"> | |||
<text>适用门店</text> | |||
<icon class="iconfont icon-you"></icon> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="account-balance"> | |||
<view class="head-top"> | |||
<view class="head-top-left"> | |||
账户余额(元) | |||
</view> | |||
<view class="head-top-right" @click="onRecord"> | |||
<icon class="iconfont icon-shiyongxuzhi"></icon> | |||
<text>储值记录</text> | |||
</view> | |||
</view> | |||
<view class="account-balance-number"> | |||
{{ wallet.money }} | |||
</view> | |||
<view class="accumulate"> | |||
<view class="accumulate-item"> | |||
<view class="accumulate-text"> | |||
累计充值(元) | |||
</view> | |||
<view class="accumulate-number"> | |||
{{ wallet.rechangeSum }} | |||
</view> | |||
</view> | |||
<view class="accumulate-item"> | |||
<view class="accumulate-text"> | |||
累计消费(元) | |||
</view> | |||
<view class="accumulate-number"> | |||
{{ wallet.comsumeSum }} | |||
</view> | |||
</view> | |||
</view> | |||
<icon class="iconfont icon-ico iconfont-my-scan" @click="onCheck"></icon> | |||
</view> | |||
<view class="recharge-instructions"> | |||
<view class="title"> | |||
储值须知: | |||
</view> | |||
<view class="content"> | |||
充值及相关服务由{{currentStore.store_Name}}提供 | |||
</view> | |||
<view class="content"> | |||
您的 充值金额将直接进入<text>{{currentStore.store_Name}}</text>账户 ,若有疑问请及时联系商家。 | |||
</view> | |||
<view class="contact-merchant" @click="onContactMerchant"> | |||
<icon class="iconfont icon-dianhuatianchong"></icon> | |||
<text>点击联系商家</text> | |||
</view> | |||
</view> | |||
<view class="bottom-btns"> | |||
<view class="bottom-btns-item recharge-btn" @click="onActivity"> | |||
充值 | |||
</view> | |||
<view class="bottom-btns-item check-btn" @click="onCheck"> | |||
买单 | |||
</view> | |||
</view> | |||
</view> | |||
<uni-popup ref="popup" type="bottom" @change="onPopupChange"> | |||
<view class="check-card"> | |||
<view class="check-card-desc"> | |||
付款码每3分钟自动更新 | |||
</view> | |||
<uqrcode v-if="showQRcode" ref="uQRCode" :text="checkNumber" :size="280" backgroundColor="#FFFFFF" | |||
foregroundColor="#000" /> | |||
</view> | |||
</uni-popup> | |||
</view> | |||
</template> | |||
<script> | |||
import storedValueAPI from "@/api/storedValue.js"; | |||
import { | |||
mapState | |||
} from 'vuex'; | |||
import store from '@/store/index.js'; | |||
export default { | |||
data() { | |||
return { | |||
//用户钱包信息 | |||
wallet: { | |||
money: 0, //余额 | |||
rechangeSum: 0, //累计充值金额 | |||
comsumeSum: 0, //累计消费金额 | |||
}, | |||
checkNumber: '', | |||
showQRcode: false | |||
} | |||
}, | |||
onShow() { | |||
this.onUserwalletcenten(); | |||
}, | |||
computed: { | |||
...mapState([ | |||
'currentStore' | |||
]) | |||
}, | |||
methods: { | |||
/** | |||
* 获取用户钱包余额 | |||
*/ | |||
async onUserwalletcenten() { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage && userStorage.memberInfo_Id) { | |||
const response = await storedValueAPI.userwalletcenten(userStorage.memberInfo_Id); | |||
if (response.statusCode === 200) { | |||
if (response.data) { | |||
this.wallet = response.data; | |||
store.commit('onInitUserWallet', response.data); | |||
} else { | |||
const response = await storedValueAPI.openuserwallet({ | |||
"userId": userStorage.memberInfo_Id, | |||
"money": 0, | |||
"userName": userStorage.nickName, | |||
}); | |||
if (response.statusCode === 200) { | |||
this.onUserwalletcenten(); | |||
} | |||
} | |||
} | |||
} | |||
}, | |||
/** | |||
* 跳转储值记录列表 | |||
*/ | |||
onRecord() { | |||
uni.navigateTo({ | |||
url: '/pages/storedValueRecord/storedValueRecord' | |||
}); | |||
}, | |||
/** | |||
* 跳转储值活动 | |||
*/ | |||
onActivity() { | |||
uni.navigateTo({ | |||
url: '/pages/storedValueActivity/storedValueActivity' | |||
}); | |||
}, | |||
/** | |||
* 买单 | |||
*/ | |||
onCheck() { | |||
this.checkNumber = JSON.stringify({ | |||
u: '953d776d-b30e-41da-9a7a-a7b832cd5b93', | |||
t: this.onGetLocalDateTime() | |||
}); | |||
this.$refs.popup.open(); | |||
}, | |||
/** | |||
* 弹窗状态改变 | |||
* @param {Object} type | |||
*/ | |||
onPopupChange(type) { | |||
this.showQRcode = type.show; | |||
}, | |||
/** | |||
* 获取当前时间 | |||
*/ | |||
onGetLocalDateTime() { | |||
const date = new Date(); | |||
const year = date.getFullYear(); | |||
const month = this.chechTime(date.getMonth() + 1); | |||
const day = this.chechTime(date.getDate()); | |||
const hour = this.chechTime(date.getHours()); | |||
const minute = this.chechTime(date.getMinutes()); | |||
const getSeconds = this.chechTime(date.getSeconds()); | |||
const orderNumber = `${year}/${month}/${day} ${hour}:${minute}:${getSeconds}`; | |||
return orderNumber; | |||
}, | |||
chechTime(time) { | |||
if (time < 10) { | |||
time = `0${time}`; | |||
} | |||
return time; | |||
}, | |||
/** | |||
* 切换门店 | |||
*/ | |||
onChangeStore() { | |||
uni.navigateTo({ | |||
url: '/pages/applicableStore/applicableStore' | |||
}); | |||
}, | |||
/** | |||
* 联系商家 | |||
*/ | |||
onContactMerchant() { | |||
if (this.currentStore.tel) { | |||
uni.makePhoneCall({ | |||
phoneNumber: this.currentStore.tel | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: "该商家暂未提供电话号码", | |||
duration: 2000, | |||
icon: 'none', | |||
}); | |||
} | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.stored-value-account { | |||
position: relative; | |||
height: 100vh; | |||
width: 100vw; | |||
overflow: hidden; | |||
background-color: rgb(247, 248, 250); | |||
.stored-value-container { | |||
background-color: #FFF; | |||
padding-bottom: 40rpx; | |||
} | |||
.stored-head { | |||
background-color: rgb(51, 45, 45); | |||
height: 300rpx; | |||
color: #FFF; | |||
.stored-head-box { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 40rpx 20rpx; | |||
.store-name { | |||
display: flex; | |||
align-items: center; | |||
font-size: 36rpx; | |||
font-weight: 600; | |||
.iconfont { | |||
font-size: 40rpx; | |||
margin-right: 10rpx; | |||
} | |||
} | |||
.store-use { | |||
display: flex; | |||
align-items: center; | |||
font-size: 30rpx; | |||
color: #999; | |||
.iconfont { | |||
margin-left: 10rpx; | |||
} | |||
} | |||
} | |||
} | |||
.account-balance { | |||
position: absolute; | |||
top: 120rpx; | |||
left: 20rpx; | |||
right: 20rpx; | |||
height: 300rpx; | |||
border-radius: 40rpx; | |||
box-sizing: border-box; | |||
padding: 40rpx; | |||
background: linear-gradient(to bottom right, rgb(252, 232, 182), rgb(245, 193, 116)); | |||
.head-top { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
.head-top-left { | |||
font-size: 28rpx; | |||
color: #999; | |||
} | |||
.head-top-right { | |||
position: absolute; | |||
background-color: rgba(0, 0, 0, 0.1); | |||
border-top-left-radius: 100rpx; | |||
border-bottom-left-radius: 100rpx; | |||
padding: 10rpx 40rpx; | |||
font-size: 24rpx; | |||
right: 0; | |||
top: 35rpx; | |||
display: flex; | |||
align-items: center; | |||
.iconfont { | |||
font-size: 24rpx; | |||
margin-right: 20rpx; | |||
} | |||
} | |||
} | |||
.account-balance-number { | |||
font-size: 60rpx; | |||
font-weight: 900; | |||
margin: 10rpx 0; | |||
} | |||
.accumulate { | |||
display: flex; | |||
align-items: center; | |||
font-size: 24rpx; | |||
color: #666; | |||
.accumulate-item { | |||
margin-right: 80rpx; | |||
.accumulate-number { | |||
font-size: 40rpx; | |||
color: #222; | |||
font-weight: 700; | |||
} | |||
} | |||
} | |||
.iconfont-my-scan { | |||
position: absolute; | |||
right: 40rpx; | |||
top: 180rpx; | |||
color: #222; | |||
font-size: 80rpx; | |||
} | |||
} | |||
.recharge-instructions { | |||
margin-top: 160rpx; | |||
padding: 20rpx; | |||
font-size: 28rpx; | |||
.title { | |||
font-size: 30rpx; | |||
font-weight: 700; | |||
margin-bottom: 10rpx; | |||
} | |||
.content { | |||
color: #666; | |||
line-height: 50rpx; | |||
text { | |||
color: rgb(245, 193, 116); | |||
} | |||
} | |||
.contact-merchant { | |||
display: flex; | |||
align-items: center; | |||
margin: 30rpx 0; | |||
.iconfont { | |||
margin-right: 10rpx; | |||
color: #222; | |||
border: 1px solid #222; | |||
padding: 5rpx; | |||
border-radius: 50%; | |||
} | |||
text { | |||
border-bottom: 1px solid #222; | |||
} | |||
} | |||
} | |||
.bottom-btns { | |||
margin: 30rpx 0; | |||
display: flex; | |||
justify-content: space-around; | |||
.bottom-btns-item { | |||
font-size: 40rpx; | |||
font-weight: 700; | |||
padding: 20rpx 110rpx; | |||
border: 1px solid #666; | |||
border-radius: 50rpx; | |||
} | |||
.check-btn { | |||
border-color: transparent; | |||
background: linear-gradient(to right, rgb(236, 195, 90), rgb(250, 212, 127)); | |||
} | |||
} | |||
.check-card { | |||
display: flex; | |||
align-items: center; | |||
flex-direction: column; | |||
background-color: #FFF; | |||
height: 70vh; | |||
border-top-left-radius: 40rpx; | |||
border-top-right-radius: 40rpx; | |||
.check-card-desc { | |||
color: #999; | |||
font-size: 28rpx; | |||
margin-top: 100rpx; | |||
margin-bottom: 50rpx; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,605 @@ | |||
<template> | |||
<view class="stored-value-activity"> | |||
<view class="stored-value-padd"> | |||
<view class="activity-bg"></view> | |||
<view class="stored-head-box"> | |||
<icon class="store-logo iconfont icon-31dianpu"></icon> | |||
<view class="stored-head-info"> | |||
<view class="stored-head-name"> | |||
{{currentStore.store_Name}} | |||
</view> | |||
<view class="stored-head-value"> | |||
<text>账户余额: {{ wallet.money }}元</text> | |||
<icon class="iconfont icon-you"></icon> | |||
</view> | |||
</view> | |||
<view class="check-btn" @click="onCheckBack"> | |||
去买单 | |||
</view> | |||
</view> | |||
<view class="prompt"> | |||
您的充值资金已进入{{currentStore.store_Name}}账户,若有疑问请咨询商家 | |||
</view> | |||
<view class="activity-card"> | |||
<view class="activity-card-head"> | |||
<text class="money-logo">¥</text> | |||
<text class="activity-desc">请选择一种充值活动</text> | |||
</view> | |||
<view class="activity-list"> | |||
<view :class="{'activity-item': true, 'activity-item-activity': activityIndex === index}" | |||
v-for="(activityItem, index) in activityList" :key="activityItem.id" | |||
@click="onChooseActivity(index)"> | |||
<view class="activity-item-name"> | |||
充值{{activityItem.rechargeMoney}}元 | |||
</view> | |||
<view class="activity-item-give"> | |||
赠送{{activityItem.giveMoney}}元 | |||
</view> | |||
<view class="activity-recommend" v-if="activityItem.recommend"> | |||
推荐 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 储值须知 --> | |||
<view class="storage-ins"> | |||
<view class="storage-ins-head"> | |||
<icon class="iconfont icon-shiyongxuzhi"></icon> | |||
<view class="storage-ins-title">储值须知</view> | |||
<view class="storage-ins-impt">重要</view> | |||
</view> | |||
<view class="storage-ins-content"> | |||
<view class="storage-ins-item"> | |||
· 充值资金将直接进入{{currentStore.store_Name}}账户 | |||
</view> | |||
<view class="storage-ins-item"> | |||
· 如果有任何资金问题,请联系商家 | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 充值说明 --> | |||
<view class="storage-ins"> | |||
<view class="storage-ins-head n-bg-ins"> | |||
<icon class="iconfont icon-shiyongxuzhi"></icon> | |||
<view class="storage-ins-title">充值说明</view> | |||
</view> | |||
<view class="recharge-ins-box"> | |||
<view class="recharge-ins-item" @click="onChangeStore"> | |||
<view class="recharge-ins-prev"> | |||
使用门店 | |||
</view> | |||
<view class="recharge-ins-suffix"> | |||
{{storeList.length}}家门店 | |||
<icon class="iconfont icon-you"></icon> | |||
</view> | |||
</view> | |||
<view class="recharge-ins-item"> | |||
<view class="recharge-ins-prev"> | |||
充值金额 | |||
</view> | |||
<view class="recharge-ins-suffix"> | |||
{{activityList[activityIndex].rechargeMoney}}元 | |||
</view> | |||
</view> | |||
<view class="recharge-ins-item"> | |||
<view class="recharge-ins-prev"> | |||
赠送金额 | |||
</view> | |||
<view class="recharge-ins-suffix"> | |||
{{activityList[activityIndex].giveMoney}}元 | |||
</view> | |||
</view> | |||
<view class="recharge-ins-item"> | |||
<view class="recharge-ins-prev"> | |||
到账金额 | |||
</view> | |||
<view class="recharge-ins-suffix sure-money"> | |||
{{activityList[activityIndex].rechargeMoney + activityList[activityIndex].giveMoney}}元 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="confirm-recharge-box"> | |||
<view class="header-row"> | |||
<u-checkbox-group @change="onCheckboxChange"> | |||
<u-checkbox shape="circle" active-color="rgb(237, 198, 96)"></u-checkbox> | |||
</u-checkbox-group> | |||
<view class="read-and-agree"> | |||
已阅读并同意 | |||
</view> | |||
<view class="aggreement-text"> | |||
《商家会员储值服务协议》 | |||
</view> | |||
</view> | |||
<view class="confirm-recharge"> | |||
<view class="left-box"> | |||
<view class="money-logo"> | |||
¥ | |||
</view> | |||
<view class="money-number"> | |||
{{activityList[activityIndex].rechargeMoney}} | |||
</view> | |||
<view class="money-account"> | |||
到账金额{{activityList[activityIndex].rechargeMoney + activityList[activityIndex].giveMoney}}元 | |||
</view> | |||
</view> | |||
<view class="confirm-recharge-btn" @click="onConfirmRecharge"> | |||
确认充值 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import { | |||
mapState | |||
} from 'vuex'; | |||
import store from '@/store/index.js'; | |||
import storedValueAPI from "@/api/storedValue.js"; | |||
import goodsApi from "@/api/goods.js"; | |||
import payAPI from "@/api/pay.js"; | |||
import { | |||
debounce | |||
} from "@/utils/DebounceAndThrottle.js"; | |||
export default { | |||
data() { | |||
return { | |||
aggreement: false, //是否同意协议 | |||
activityList: [], //充值活动列表 | |||
activityIndex: 0, //当前选中的充值活动下标 | |||
storeList: [], | |||
//用户钱包信息 | |||
wallet: { | |||
money: 0, //余额 | |||
rechangeSum: 0, //累计充值金额 | |||
comsumeSum: 0, //累计消费金额 | |||
}, | |||
} | |||
}, | |||
computed: { | |||
...mapState([ | |||
'currentStore', 'userWallet' | |||
]) | |||
}, | |||
onShow() { | |||
this.onGetRechargeActivityPgage(); | |||
this.onFetchStoreList(); | |||
this.onUserwalletcenten(); | |||
}, | |||
methods: { | |||
/** | |||
* 获取充值活动列表 | |||
*/ | |||
async onGetRechargeActivityPgage() { | |||
const response = await storedValueAPI.getRechargeActivityPgage({ | |||
"current": 1, | |||
"pageSize": 999, | |||
"storeId": this.currentStore.id | |||
}); | |||
if (response.statusCode === 200) { | |||
this.activityList = response.data.data; | |||
} | |||
}, | |||
/** | |||
* 选择充值活动 | |||
* @param {Object} index | |||
*/ | |||
onChooseActivity(index) { | |||
this.activityIndex = index; | |||
}, | |||
/** | |||
* 获取门店列表 | |||
*/ | |||
async onFetchStoreList() { | |||
const response = await goodsApi.getStoreList(); | |||
if (response.isSuccess) { | |||
this.storeList = response.data; | |||
} | |||
}, | |||
/** | |||
* 切换门店 | |||
*/ | |||
onChangeStore() { | |||
uni.navigateTo({ | |||
url: '/pages/applicableStore/applicableStore' | |||
}); | |||
}, | |||
/** | |||
* 获取用户钱包余额 | |||
*/ | |||
async onUserwalletcenten() { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage && userStorage.memberInfo_Id) { | |||
const response = await storedValueAPI.userwalletcenten(userStorage.memberInfo_Id); | |||
if (response.statusCode === 200) { | |||
this.wallet = response.data; | |||
} | |||
} | |||
}, | |||
/** | |||
* 去买单 | |||
*/ | |||
onCheckBack() { | |||
uni.redirectTo({ | |||
url: '/pages/storedValueAccount/storedValueAccount' | |||
}); | |||
}, | |||
/** | |||
* 确认充值 | |||
*/ | |||
onConfirmRecharge() { | |||
if (this.aggreement) { | |||
this.onConfirmPayment(); | |||
} else { | |||
uni.showToast({ | |||
title: '请勾选同意协议', | |||
icon: 'none', | |||
duration: 1000, | |||
mask: true | |||
}); | |||
} | |||
}, | |||
onCheckboxChange() { | |||
this.aggreement = !this.aggreement; | |||
}, | |||
onConfirmPayment: debounce(async function() { | |||
const userStorage = getApp().onGetUserStorage(); | |||
if (userStorage) { | |||
//充值金额 | |||
const rechargeMoney = this.activityList[this.activityIndex].rechargeMoney; | |||
//赠送金额 | |||
const giveMoney = this.activityList[this.activityIndex].giveMoney; | |||
const recordRes = await storedValueAPI.wachatwalletrecordhandle({ | |||
"walletId": this.userWallet.id, | |||
"money": rechargeMoney + giveMoney, | |||
"transactionType": 1, | |||
"transactionMoney": rechargeMoney, | |||
"giveMoney": giveMoney, | |||
"storeId": this.currentStore.id, | |||
"storeName": this.currentStore.store_Name | |||
}); | |||
if (recordRes.statusCode === 200 && recordRes.data) { | |||
const response = await payAPI.rechargepay({ | |||
"openId": userStorage.openId, | |||
"money": rechargeMoney * 100, | |||
"rechargeId": recordRes.data | |||
}); | |||
const result = response.data; | |||
if (response.statusCode == 200) { | |||
uni.requestPayment({ | |||
provider: 'wxpay', | |||
orderInfo: '', | |||
timeStamp: result.timeStamp, | |||
nonceStr: result.nonceStr, | |||
package: result.package, | |||
paySign: result.paySign, | |||
signType: result.signType, | |||
success: async () => { | |||
uni.navigateBack({ | |||
delta: 1 | |||
}); | |||
}, | |||
fail: error => { | |||
uni.showToast({ | |||
title: JSON.stringify(error), | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
}); | |||
} | |||
}); | |||
} else { | |||
uni.showToast({ | |||
title: response.errors, | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
}); | |||
} | |||
} | |||
} else { | |||
uni.showToast({ | |||
title: '用户信息为空,请登录后重试', | |||
duration: 2000, | |||
complete() { | |||
uni.navigateTo({ | |||
url: '/pages/login/login' | |||
}); | |||
} | |||
}); | |||
} | |||
}, 5000, true), | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.stored-value-activity { | |||
position: relative; | |||
background-color: rgb(247, 248, 250); | |||
min-height: 100vh; | |||
font-size: 28rpx; | |||
.stored-value-padd { | |||
padding: 20rpx; | |||
.activity-bg { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
background-color: rgb(51, 45, 45); | |||
height: 400rpx; | |||
} | |||
.stored-head-box { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
border-radius: 10rpx; | |||
padding: 30rpx 20rpx; | |||
position: relative; | |||
font-size: 28rpx; | |||
color: #222; | |||
background: linear-gradient(to bottom right, rgb(250, 230, 178), rgb(238, 193, 105)); | |||
.store-logo { | |||
flex: 0 0 auto; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
width: 80rpx; | |||
height: 80rpx; | |||
background-color: rgb(51, 45, 45); | |||
color: rgb(250, 230, 178); | |||
border-radius: 50%; | |||
font-size: 50rpx; | |||
margin-right: 20rpx; | |||
} | |||
.stored-head-info { | |||
flex: 1 0 auto; | |||
.stored-head-name { | |||
font-size: 30rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
.stored-head-value { | |||
display: flex; | |||
align-items: center; | |||
color: #666; | |||
text { | |||
margin-right: 10rpx; | |||
} | |||
} | |||
} | |||
.check-btn { | |||
flex: 0 0 auto; | |||
border: 1px solid #222; | |||
padding: 10rpx 40rpx; | |||
border-radius: 50rpx; | |||
} | |||
} | |||
.prompt { | |||
text-align: center; | |||
position: relative; | |||
font-size: 22rpx; | |||
margin: 20rpx 0; | |||
color: rgb(238, 193, 105); | |||
} | |||
.activity-card { | |||
position: relative; | |||
background-color: #FFF; | |||
border-radius: 20rpx; | |||
padding: 30rpx; | |||
.activity-card-head { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 20rpx; | |||
font-size: 30rpx; | |||
font-weight: 700; | |||
.money-logo { | |||
background-color: #332d2d; | |||
width: 60rpx; | |||
height: 60rpx; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
color: #FFF; | |||
border-radius: 50%; | |||
font-size: 30rpx; | |||
margin-right: 20rpx; | |||
} | |||
} | |||
} | |||
.activity-list { | |||
display: flex; | |||
justify-content: space-between; | |||
flex-wrap: wrap; | |||
.activity-item { | |||
position: relative; | |||
padding: 30rpx 65rpx; | |||
border: 4rpx solid #eee; | |||
margin-bottom: 30rpx; | |||
border-radius: 20rpx; | |||
text-align: center; | |||
.activity-item-name { | |||
font-size: 36rpx; | |||
font-weight: 700; | |||
margin-bottom: 10rpx; | |||
} | |||
.activity-item-give { | |||
color: rgb(210, 35, 4); | |||
} | |||
.activity-recommend { | |||
border-top-left-radius: 5rpx; | |||
border-top-right-radius: 20rpx; | |||
border-bottom-left-radius: 20rpx; | |||
border-bottom-right-radius: 5rpx; | |||
padding: 5rpx 30rpx; | |||
position: absolute; | |||
right: 0; | |||
top: -30rpx; | |||
color: #FFF; | |||
background: linear-gradient(to bottom right, rgb(190, 88, 65), rgb(210, 137, 108)); | |||
} | |||
} | |||
.activity-item-activity { | |||
border: 4rpx solid rgb(210, 137, 108); | |||
} | |||
} | |||
.storage-ins { | |||
position: relative; | |||
color: #222; | |||
background-color: #FFF; | |||
margin-top: 20rpx; | |||
padding-bottom: 40rpx; | |||
.storage-ins-head { | |||
padding: 0 40rpx; | |||
height: 100rpx; | |||
display: flex; | |||
align-items: center; | |||
background: linear-gradient(to bottom, rgb(254, 235, 235), #FFF); | |||
border-bottom: 2rpx solid #eee; | |||
margin-bottom: 20rpx; | |||
.iconfont { | |||
font-size: 30rpx; | |||
margin-right: 20rpx; | |||
} | |||
.storage-ins-title { | |||
font-size: 30rpx; | |||
font-weight: 700; | |||
margin-right: 20rpx; | |||
} | |||
.storage-ins-impt { | |||
background: linear-gradient(to bottom right, rgb(190, 88, 65), rgb(210, 137, 108)); | |||
border-top-left-radius: 20rpx; | |||
border-top-right-radius: 20rpx; | |||
border-bottom-left-radius: 0rpx; | |||
border-bottom-right-radius: 20rpx; | |||
padding: 5rpx 30rpx; | |||
color: #FFF; | |||
} | |||
} | |||
.n-bg-ins { | |||
background: #FFF; | |||
} | |||
.storage-ins-content { | |||
padding-left: 20rpx; | |||
color: #999; | |||
} | |||
.recharge-ins-box { | |||
padding: 0 30rpx; | |||
.recharge-ins-item { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
margin-bottom: 20rpx; | |||
.recharge-ins-prev { | |||
color: #222; | |||
} | |||
.recharge-ins-suffix { | |||
display: flex; | |||
align-items: center; | |||
color: #999; | |||
} | |||
.sure-money { | |||
color: rgb(210, 35, 4); | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.confirm-recharge-box { | |||
position: sticky; | |||
bottom: 0; | |||
background-color: #FFF; | |||
z-index: 100; | |||
.header-row { | |||
display: flex; | |||
align-items: center; | |||
border-bottom: 2rpx solid #EEE; | |||
padding: 20rpx; | |||
.read-and-agree { | |||
color: #999; | |||
margin: 0 20rpx; | |||
} | |||
.aggreement-text { | |||
color: #333; | |||
border-bottom: 2rpx solid; | |||
} | |||
} | |||
.confirm-recharge { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
margin: 20rpx 0; | |||
padding: 20rpx; | |||
.left-box { | |||
display: flex; | |||
align-items: flex-end; | |||
.money-logo { | |||
font-size: 50rpx; | |||
font-weight: 700; | |||
} | |||
.money-number { | |||
font-size: 60rpx; | |||
font-weight: 700; | |||
} | |||
.money-account { | |||
margin-left: 20rpx; | |||
color: #999; | |||
} | |||
} | |||
.confirm-recharge-btn { | |||
background: linear-gradient(to right, rgb(242, 216, 119), rgb(236, 197, 100)); | |||
padding: 20rpx 60rpx; | |||
font-size: 30rpx; | |||
border-radius: 50rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,230 @@ | |||
<template> | |||
<view class="stored-value-record"> | |||
<view class="navbar-list"> | |||
<view v-for="(recordItem, recordIndex) in storageType" :class="{'navbar-item': true, 'navbar-item-activity': navbarIndex === recordIndex}" @click="handleNavbar(recordIndex)"> | |||
{{recordItem}} | |||
</view> | |||
</view> | |||
<view class="record-card"> | |||
<scroll-view class="record-list" :scroll-y="true" @scrolltolower="onScrolltolower"> | |||
<view class="record-item" v-for="recordItem in recordList" :key="recordItem.id" @click="onRecordDetail(recordItem.id)"> | |||
<view class="record-item-top"> | |||
<view class="record-item-type"> | |||
{{onShowType(recordItem.transactionType)}} | |||
</view> | |||
<view class="record-item-money"> | |||
{{recordItem.transactionType === 2 ? '-': '+'}}{{recordItem.money}} | |||
</view> | |||
</view> | |||
<view class="record-item-goods"> | |||
{{recordItem.storeName || '暂无门店'}} | |||
</view> | |||
<view class="record-item-date"> | |||
{{recordItem.createAt}} | |||
</view> | |||
</view> | |||
</scroll-view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import storedValueAPI from "@/api/storedValue.js"; | |||
import { mapState } from 'vuex'; | |||
export default { | |||
data() { | |||
return { | |||
pageIndex: 1, | |||
pageSize: 10, | |||
total: 0, | |||
storageType: ['全部', '充值', '消费', '退款'], | |||
navbarIndex: 0, //储值类型下标 | |||
recordList: [], | |||
} | |||
}, | |||
computed: { | |||
...mapState([ | |||
'userWallet' | |||
]) | |||
}, | |||
onShow() { | |||
this.onFetchRecordList(); | |||
}, | |||
watch: { | |||
pageIndex() { | |||
this.onFetchRecordList(); | |||
}, | |||
navbarIndex() { | |||
this.onFetchRecordList(); | |||
} | |||
}, | |||
methods: { | |||
/** | |||
* 获取储值记录 | |||
*/ | |||
async onFetchRecordList() { | |||
const jsonData = { | |||
current: this.pageIndex, | |||
pageSize: this.pageSize, | |||
transactionType: this.navbarIndex, | |||
wallerId: this.userWallet?.id | |||
} | |||
if (this.navbarIndex === 0) { | |||
delete jsonData.transactionType; | |||
} | |||
const response = await storedValueAPI.walletrecordpgage(jsonData); | |||
if (response.statusCode === 200) { | |||
this.total = response.data.total; | |||
response.data.data.forEach(item => { | |||
const findRepet = this.recordList.find(findIndex => findIndex.id === item.id); | |||
if (!findRepet) { | |||
this.recordList.push(item); | |||
} | |||
}); | |||
} | |||
}, | |||
/** | |||
* 储值记录详情 | |||
*/ | |||
onRecordDetail(id) { | |||
uni.navigateTo({ | |||
url: `/pages/storedValueRecordDetail/storedValueRecordDetail?id=${id}` | |||
}); | |||
}, | |||
/** | |||
* 格式化前缀显示 | |||
* @param {Object} transactionType | |||
*/ | |||
onShowType(transactionType) { | |||
switch (transactionType) { | |||
case 1: | |||
return '充值'; | |||
case 2: | |||
return '消费'; | |||
case 3: | |||
return '退款'; | |||
default: | |||
return transactionType | |||
} | |||
}, | |||
/** | |||
* 滚动触底 | |||
*/ | |||
onScrolltolower() { | |||
if (this.total > this.recordList.length) { | |||
this.pageIndex++; | |||
} else { | |||
uni.showToast({ | |||
title: '没有更多了', | |||
duration: 2000, | |||
icon: 'none', | |||
mask: true | |||
}); | |||
} | |||
}, | |||
/** | |||
* 切换导航 | |||
* @param {Object} recordIndex | |||
*/ | |||
handleNavbar(recordIndex) { | |||
this.navbarIndex = recordIndex; | |||
this.pageIndex = 1; | |||
this.pageSize = 0; | |||
this.total = 0; | |||
this.recordList = []; | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.stored-value-record { | |||
display: flex; | |||
flex-direction: column; | |||
overflow: hidden; | |||
width: 100vw; | |||
height: 100vh; | |||
background-color: rgb(247, 248, 250); | |||
box-sizing: border-box; | |||
} | |||
.navbar-list { | |||
flex-shrink: 0; | |||
display: flex; | |||
justify-content: space-around; | |||
height: 80rpx; | |||
align-items: center; | |||
font-size: 30rpx; | |||
color: #999; | |||
background-color: #FFF; | |||
.navbar-item-activity { | |||
position: relative; | |||
color: #222; | |||
transform: scale(1.1); | |||
transition: all 0.5s; | |||
&::after { | |||
position: absolute; | |||
content: ''; | |||
left: 50%; | |||
bottom: -15rpx; | |||
transform: translateX(-50%); | |||
width: 80rpx; | |||
height: 10rpx; | |||
border-radius: 5rpx; | |||
background-color: rgb(244, 203, 99); | |||
} | |||
} | |||
} | |||
.record-card { | |||
flex-grow: 1; | |||
overflow: hidden; | |||
margin: 20rpx; | |||
padding: 20rpx; | |||
background-color: #FFF; | |||
.record-list { | |||
height: 100%; | |||
.record-item { | |||
font-size: 30rpx; | |||
color: #222; | |||
margin-bottom: 20rpx; | |||
padding-bottom: 20rpx; | |||
border-bottom: 1px solid #EEE; | |||
&:last-child { | |||
margin-bottom: 0; | |||
border-bottom: none; | |||
} | |||
.record-item-top { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 10rpx; | |||
.record-item-money { | |||
font-size: 36rpx; | |||
font-weight: 700; | |||
} | |||
} | |||
.record-item-goods { | |||
color: #999; | |||
font-size: 28rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
.record-item-date { | |||
text-align: end; | |||
color: #999; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,191 @@ | |||
<template> | |||
<view class="stored-value-record-detail"> | |||
<view class="record-detail-card"> | |||
<view class="record-detail-title"> | |||
储值余额(元) | |||
</view> | |||
<view class="record-detail-number"> | |||
{{recordInfo.transactionType === 2 ? '-': '+'}}{{recordInfo.money}} | |||
</view> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
{{onShowType(recordInfo.transactionType)}}金额 | |||
</view> | |||
<view class="record-detail-suffix"> | |||
{{recordInfo.transactionMoney}}元 | |||
</view> | |||
</view> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
{{onShowType(recordInfo.transactionType)}}赠送金额 | |||
</view> | |||
<view class="record-detail-suffix"> | |||
{{recordInfo.giveMoney}}元 | |||
</view> | |||
</view> | |||
</view> | |||
<view class="record-detail-card"> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
交易类型 | |||
</view> | |||
<view class="record-detail-suffix"> | |||
{{onShowType(recordInfo.transactionType)}} | |||
</view> | |||
</view> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
交易门店 | |||
</view> | |||
<view class="record-detail-suffix"> | |||
{{recordInfo.storeName || '暂无'}} | |||
</view> | |||
</view> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
交易时间 | |||
</view> | |||
<view class="record-detail-suffix"> | |||
{{recordInfo.createAt}} | |||
</view> | |||
</view> | |||
<view class="record-detail-row"> | |||
<view class="record-detail-prev"> | |||
订单编号 | |||
</view> | |||
<view class="record-detail-suffix" > | |||
<text class="record-number">{{recordInfo.orderId}}</text> | |||
<text class="copy" @click="onCopyOrderNumber">复制</text> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import storedValueAPI from "@/api/storedValue.js"; | |||
export default { | |||
data() { | |||
return { | |||
recordInfo: { | |||
id: "", | |||
wallerId: "", | |||
money: 0, | |||
transactionType: 0, | |||
transactionMoney: 0, | |||
giveMoney: 0, | |||
storeId: "", | |||
storeName: "", | |||
orderId: "", | |||
createAt: "", | |||
groupId: "", | |||
status: 0 | |||
} | |||
} | |||
}, | |||
onLoad(options) { | |||
if (options.id) { | |||
this.onFetchDetail(options.id); | |||
} | |||
}, | |||
methods: { | |||
/** | |||
* 根据储值记录ID 查询储值记录详情 | |||
* @param {Object} id | |||
*/ | |||
async onFetchDetail(id) { | |||
const response = await storedValueAPI.getwalletrecord(id); | |||
if (response.statusCode === 200) { | |||
this.recordInfo = response.data; | |||
} | |||
}, | |||
/** | |||
* 格式化前缀显示 | |||
* @param {Object} transactionType | |||
*/ | |||
onShowType(transactionType) { | |||
switch (transactionType) { | |||
case 1: | |||
return '充值'; | |||
case 2: | |||
return '消费'; | |||
case 3: | |||
return '退款'; | |||
default: | |||
return transactionType | |||
} | |||
}, | |||
/** | |||
* 复制 | |||
*/ | |||
onCopyOrderNumber() { | |||
uni.setClipboardData({ | |||
data: this.recordInfo.orderId, | |||
showToast: true | |||
}); | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.stored-value-record-detail { | |||
width: 100vw; | |||
height: 100vh; | |||
background-color: rgb(247, 248, 250); | |||
padding: 20rpx; | |||
box-sizing: border-box; | |||
.record-detail-card { | |||
padding: 30rpx; | |||
background-color: #FFF; | |||
margin-bottom: 20rpx; | |||
border-radius: 20rpx; | |||
font-size: 30rpx; | |||
.record-detail-title { | |||
text-align: center; | |||
color: #999; | |||
} | |||
.record-detail-number { | |||
text-align: center; | |||
font-size: 80rpx; | |||
font-weight: 700; | |||
margin: 10rpx 0; | |||
} | |||
.record-detail-row { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
color: #999; | |||
margin-bottom: 20rpx; | |||
.record-detail-prev { | |||
flex: 0 0 auto; | |||
} | |||
.record-detail-suffix { | |||
display: flex; | |||
align-items: center; | |||
color: #222; | |||
.record-number { | |||
display: -webkit-box; | |||
-webkit-line-clamp: 1; | |||
-webkit-box-orient: vertical; | |||
text-overflow: ellipsis; | |||
overflow: hidden; | |||
max-width: 400rpx; | |||
} | |||
.copy { | |||
margin-left: 10rpx; | |||
color: rgb(78, 94, 144); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -46,12 +46,12 @@ | |||
}, | |||
methods: { | |||
onToHome() { | |||
// uni.switchTab({ | |||
// url: '/pages/homeBeefWorkShop/homeBeefWorkShop' | |||
// }); | |||
uni.switchTab({ | |||
url: '/pages/homeNew/homeNew' | |||
url: '/pages/homeBeefWorkShop/homeBeefWorkShop' | |||
}); | |||
// uni.switchTab({ | |||
// url: '/pages/homeNew/homeNew' | |||
// }); | |||
}, | |||
//获取页面风格 | |||
onFetchStoreStyles() { | |||
@@ -45,7 +45,9 @@ const store = new Vuex.Store({ | |||
//门店风格 | |||
storeStyles: [], | |||
//当前创建的订单信息 | |||
currentNewOrder: null | |||
currentNewOrder: null, | |||
//钱包信息 | |||
userWallet: null | |||
} | |||
}, | |||
getters: { | |||
@@ -297,6 +299,10 @@ const store = new Vuex.Store({ | |||
//设置当前使用的优惠券 | |||
onSetCurrentNewOrder(state, payload) { | |||
state.currentNewOrder = payload; | |||
}, | |||
//设置钱包信息 | |||
onInitUserWallet(state, payload) { | |||
state.userWallet = payload; | |||
} | |||
} | |||
}); | |||
@@ -51,7 +51,7 @@ const request = (options) => { | |||
TenantId = '01911b43-8844-4d93-b916-34208e31ba66'; | |||
} else { | |||
// 开发版:开发环境:银泰 68d4de9c-a277-4d7a-a192-e9fa91327d41 | |||
TenantId = '68d4de9c-a277-4d7a-a192-e9fa91327d41'; | |||
TenantId = 'a7c18ca4-04eb-4bfe-a272-3104f2d84ff1'; | |||
} | |||
uni.request({ | |||
url: BASE_URL + interfaceType + options.url, | |||