Browse Source

新增储值功能

master
ywh 1 year ago
parent
commit
b7fb7f719e
19 changed files with 1987 additions and 172 deletions
  1. +11
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +16
    -3
      pages.json
  4. +2
    -2
      src/App.vue
  5. +12
    -0
      src/api/pay.js
  6. +95
    -0
      src/api/storedValue.js
  7. +3
    -2
      src/manifest.json
  8. +47
    -7
      src/pages.json
  9. +2
    -2
      src/pages/applicableStore/applicableStore.vue
  10. +2
    -2
      src/pages/food/food.vue
  11. +112
    -51
      src/pages/my/my.vue
  12. +230
    -97
      src/pages/payment/payment.vue
  13. +416
    -0
      src/pages/storedValueAccount/storedValueAccount.vue
  14. +605
    -0
      src/pages/storedValueActivity/storedValueActivity.vue
  15. +230
    -0
      src/pages/storedValueRecord/storedValueRecord.vue
  16. +191
    -0
      src/pages/storedValueRecordDetail/storedValueRecordDetail.vue
  17. +4
    -4
      src/pages/welcome/welcome.vue
  18. +7
    -1
      src/store/index.js
  19. +1
    -1
      src/utils/request.js

+ 11
- 0
package-lock.json View File

@@ -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",


+ 1
- 0
package.json View File

@@ -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"


+ 16
- 3
pages.json View File

@@ -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",


+ 2
- 2
src/App.vue View File

@@ -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');


+ 12
- 0
src/api/pay.js View File

@@ -43,5 +43,17 @@ export default {
method: 'GET',
interfaceType: 2
});
},
/**
* 微信充值到账号余额
*/
rechargepay(data) {
return request({
url : 'api/wechat/rechargepay',
method: 'POST',
data: data,
interfaceType: 2
});
}
}

+ 95
- 0
src/api/storedValue.js View File

@@ -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
});
}
}

+ 3
- 2
src/manifest.json View File

@@ -54,7 +54,7 @@
"quickapp" : {},
/* 快应用特有相关 */
"mp-weixin" : {
"appid" : "wx67f7399628986bfb",
"appid" : "",
"setting" : {
"urlCheck" : false
},
@@ -76,5 +76,6 @@
},
"mp-qq" : {
"usingComponents" : true
}
},
"fallbackLocale" : "zh-Hans"
}

+ 47
- 7
src/pages.json View File

@@ -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",


+ 2
- 2
src/pages/applicableStore/applicableStore.vue View File

@@ -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 {


+ 2
- 2
src/pages/food/food.vue View File

@@ -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 {


+ 112
- 51
src/pages/my/my.vue View File

@@ -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>

+ 230
- 97
src/pages/payment/payment.vue View File

@@ -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>

+ 416
- 0
src/pages/storedValueAccount/storedValueAccount.vue View File

@@ -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>

+ 605
- 0
src/pages/storedValueActivity/storedValueActivity.vue View File

@@ -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>

+ 230
- 0
src/pages/storedValueRecord/storedValueRecord.vue View File

@@ -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>

+ 191
- 0
src/pages/storedValueRecordDetail/storedValueRecordDetail.vue View File

@@ -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>

+ 4
- 4
src/pages/welcome/welcome.vue View File

@@ -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() {


+ 7
- 1
src/store/index.js View File

@@ -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;
}
}
});


+ 1
- 1
src/utils/request.js View File

@@ -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,


Loading…
Cancel
Save