Browse Source

充值记录

lilei 4 months ago
parent
commit
e356ef4f12

+ 23 - 0
pages.json

@@ -537,6 +537,29 @@
         	{
         		"navigationBarTitleText" : "商城显示设置"
         	}
+        },
+        {
+        	"path" : "accountBalance/accountBalance",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "账户余额",
+				"navigationBarBackgroundColor": "#00aaff",
+				"navigationBarTextStyle": "white"
+        	}
+        },
+        {
+        	"path" : "transactionRecord/transactionRecord",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "交易记录"
+        	}
+        },
+        {
+        	"path" : "balPaySetting/balPaySetting",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "余额支付授权"
+        	}
         }
 		]
 	}

+ 61 - 25
pages/morePage/morePage.vue

@@ -39,26 +39,37 @@
 					</view>
 				</view>
 			</view>
-			
-			<view class="list-box" v-if="hasRedPacket&&hasShelf">
-				<view class="list-title flex align_center justify_between" @click="toPage('/pagesB/redPacket')">
-					<view><u-icon size="34" color="#f10000" name="red-packet-fill"></u-icon> <text style="color: #ff0000;margin-left: 10rpx;">红包奖励</text></view>
-					<view>
-						<u-badge :absolute="false" :count="redPackCount"></u-badge>
-						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
-					</view>
-				</view>
-			</view>
-			<view class="list-box" v-if="hasLogin&&$hasPermissions('M_couponList_mini')">
-				<view class="list-title flex align_center justify_between" @click="toPage('/pagesB/coupon')">
-					<view><u-icon size="34" color="#ff7d0b" name="gift-fill"></u-icon> <text style="color: #ff7d0b;margin-left: 10rpx;">我的优惠券</text></view>
-					<view>
-						<u-badge :absolute="false" :count="hasShelf?couponCount:0"></u-badge>
-						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
-					</view>
+			<!-- 余额数据 -->
+			<view class="list-box">
+				<view class="list-body" :style="{paddingTop:item.text?0:'10px'}">
+					<uni-grid :column="4" :highlight="true" :show-border="false" :square="false" @change="e=>openDataList(e)">
+						<uni-grid-item>
+							<view class="grid-item-box" :index="0">
+								<text class="value">15000</text>
+								<text class="text">充值余额</text>
+							</view>
+						</uni-grid-item>
+						<uni-grid-item>
+							<view class="grid-item-box" :index="1">
+								<text class="value">1000</text>
+								<text class="text">抵扣余额</text>
+							</view>
+						</uni-grid-item>
+						<uni-grid-item>
+							<view class="grid-item-box" :index="2" v-if="$hasPermissions('M_couponList_mini')">
+								<text class="value">{{hasShelf?couponCount:0}}</text>
+								<text class="text">优惠券</text>
+							</view>
+						</uni-grid-item>
+						<uni-grid-item>
+							<view class="grid-item-box" :index="3" v-if="hasLogin&&hasRedPacket&&hasShelf">
+								<text class="value">{{redPackCount}}</text>
+								<text class="text">红包</text>
+							</view>
+						</uni-grid-item>
+					</uni-grid>
 				</view>
-			</view>
-					
+			</view>		
 			<!-- 网格图标 -->
 			<view class="list-box" v-for="item in itemList" :key="item.id">
 				<view class="list-title" v-if="item.text">
@@ -121,7 +132,8 @@
 				avatarUrl:'', // 用户图像
 				navHeight: 44,
 				couponCount: 0,
-				redPackCount: 0
+				redPackCount: 0,
+				dataList:[]
 			}
 		},
 		computed: {
@@ -236,7 +248,7 @@
 								icon: 'lishijilu',
 								auth: this.hasLogin,
 								path: '/pagesA/vinRecord/vinRecord',
-								color: '#abc4ff',
+								color: '#799ff9',
 								isShelf: true
 							},
 							{
@@ -294,7 +306,7 @@
 								color: '#aaaaff'
 							},
 							{
-								text: '价格显示设置',
+								text: '价格显示授权',
 								icon: 'permission',
 								auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
 								path: '/pages/storeManage/priceSetting/priceSetting',
@@ -302,11 +314,19 @@
 								isShelf: true
 							},
 							{
-								text: '商城显示设置',
+								text: '商城显示授权',
 								icon: 'shangcheng',
 								auth: this.$store.state.vuex_showShopAuth&&this.userInfo&&this.userInfo.superAdmin == 1,
 								path: '/pagesB/shopShow/shopShow',
-								color: '#00aa00',
+								color: '#4caf50',
+								isShelf: true
+							},
+							{
+								text: '余额支付授权',
+								icon: 'payrecord',
+								auth: this.$store.state.vuex_showShopAuth&&this.userInfo&&this.userInfo.superAdmin == 1,
+								path: '/pagesB/balPaySetting/balPaySetting',
+								color: '#009688',
 								isShelf: true
 							},
 						],
@@ -399,6 +419,16 @@
 				const item = child[e.detail.index]
 				this.toPage(item.path,item.isShelf)
 			},
+			// 点击统计数据
+			openDataList(e){
+				const path = [
+					'/pagesB/accountBalance/accountBalance',
+					'/pagesB/accountBalance/accountBalance',
+					'/pagesB/coupon',
+					'/pagesB/redPacket'
+				]
+				this.toPage(path[e.detail.index],true)
+			},
 			// 获取价格配置
 			getPriceCofig(){
 				queryQplsConfig({shelfSn: this.shelfSn}).then(res => {
@@ -669,10 +699,16 @@
 				align-items:center;
 				justify-content: center;
 				margin-bottom: 15px;
+				.value{
+					text-align:center;
+					color: #666;
+					margin-top: 15px;
+					font-size: 16px;
+				}
 				.text{
 					text-align:center;
 					color: #666;
-					margin-top: 3px;
+					margin-top: 5px;
 					font-size: 12px;
 				}
 				.icons{

+ 191 - 0
pagesB/accountBalance/accountBalance.vue

@@ -0,0 +1,191 @@
+<template>
+  <view class="balance-container">
+    <view class="balance-info flex align_center justify_between">
+      <view class="balance-item flex flex_column align_center justify_center" 
+	  v-for="(item,index) in balanceList" 
+	  :key="index"
+	  @tap="viewRecord(item)"
+	  >
+        <text class="balance-amount">{{ item.value }}</text>
+		<text>{{ item.label }}</text>
+      </view>
+    </view>
+    
+    <view class="recharge-options">
+      <view 
+        class="recharge-option flex justify_between" 
+        v-for="(opt,idx) in rechargeOptions" 
+        :key="idx"
+      >
+        <view class="recharge-val flex align_center justify_center">
+			<text>¥{{ opt.amount }}</text>
+		</view>
+        <view class="recharge-option-content flex_1">
+			<view><text class="gift-text">充值{{ opt.amount }}元送{{ opt.gift }}元抵扣</text></view>
+			<view class="gift-remark">{{opt.remark}}</view>
+		</view>
+		<view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
+			<text>去充值</text>
+			<uni-icons type="arrowright" size="16"></uni-icons>
+		</view>
+      </view>
+    </view>
+	
+	<!-- 付款弹框 -->
+	<payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal> 
+  </view>
+</template>
+
+<script>
+import {
+	    mapState,
+	    mapMutations,
+	} from 'vuex'
+import payModal from '../components/czPayModal.vue'
+export default {
+  components:{ payModal },
+  data() {
+    return {
+		  showPopu:false,
+		  info: null,
+		  payData: null,
+		  balanceList: [
+			{ label: '充值余额', value: '10000.00' },
+			{ label: '抵扣余额', value: '1000.00' }
+		  ],
+		  rechargeOptions: [
+			{ amount: 1000, gift: 50, remark:'抵扣仅限机油产品' },
+			{ amount: 1500, gift: 75, remark:'抵扣仅限刹车片产品' },
+			{ amount: 2000, gift: 100, remark:'抵扣仅限轮胎产品' },
+			{ amount: 3000, gift: 150, remark:'抵扣仅限滤清器产品' },
+			{ amount: 5000, gift: 250, remark:'抵扣仅限滤清器产品' },
+			{ amount: 10000, gift: 500, remark:'抵扣仅限滤清器产品' },
+			{ amount: 15000, gift: 750, remark:'抵扣仅限滤清器产品' },
+			{ amount: 30000, gift: 1100, remark:'抵扣仅限滤清器产品' },
+			{ amount: 50000, gift: 2500, remark:'抵扣仅限滤清器产品' },
+			{ amount: 100000, gift: 5000, remark:'抵扣仅限滤清器产品' },
+			{ amount: 150000, gift: 7500, remark:'抵扣仅限滤清器产品' }
+		  ],
+    }
+  },
+  computed: {
+  	...mapState(['hasLogin']),
+  	// 登录用户信息
+  	userInfo(){
+  		return this.$store.state.vuex_userInfo
+  	},
+  	// 货架经销商信息
+  	shelfInfo(){
+  		return this.$store.state.vuex_storeShelf
+  	},
+  	//是否开启线上支付
+  	hasPay(){
+  		const shelfInfo = this.shelfInfo
+  		return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
+  	},
+  	// 经销商电话
+  	dealerPhone(){
+  		const shelfInfo = this.shelfInfo
+  		return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
+  	},
+  	// 付款信息
+  	payInfo(){
+  		return this.$store.state.vuex_tempOrderData
+  	}
+  },
+  methods: {
+	// 消费记录
+	viewRecord(item){
+		uni.navigateTo({
+			url:'/pagesB/transactionRecord/transactionRecord'
+		})
+	},
+	// 充值
+    handleRecharge(info) {
+      this.info = info
+	  this.showPopu = true
+    },
+	payComplete(item,isOk){
+		this.showPopu = false
+		if(isOk){
+			this.message('支付成功')
+		}
+	}
+  }
+}
+</script>
+
+<style lang="less">
+.balance-container {
+  padding: 0;
+  background: #f5f5f5;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  
+  .balance-info {
+	background: linear-gradient(to bottom, #00aaff, #0188c5);  
+	padding: 10rpx 20rpx 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
+    
+    .balance-item {
+      width: 50%;
+	  color: #fff;
+      &:last-child {
+        border: none;
+      }
+      
+      .balance-amount {
+        color: #fff;
+        font-weight: bold;
+        font-size: 20px;
+		margin-bottom: 2px;
+      }
+    }
+  }
+  
+  .recharge-options {
+    padding: 24rpx;
+    flex-grow: 1;
+	overflow-y: auto;
+    .recharge-option {
+      background: #fff;
+      border-radius: 12rpx;
+      overflow: hidden;
+      margin-bottom: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
+      .recharge-option-content{
+		  padding: 20rpx;
+		  line-height: 1.8;
+	  }
+      .gift-text {
+        color: #333;
+        font-size: 28rpx;
+      }
+	  .recharge-val{
+		  font-size: 16px;
+		  color: whitesmoke;
+		  background: #ff9800;
+		  padding: 20rpx;
+		  width: 150rpx;
+	  }
+	  .recharge-btn{
+		  color: #1e90ff;
+		  font-size: 24rpx;
+		  padding: 0 20rpx 0 0;
+	  }
+	  .gift-remark{
+		  color: #999;
+		  font-size: 24rpx;
+	  }
+    }
+    
+    .custom-recharge {
+      padding: 28rpx;
+      background: #fff;
+      border-radius: 12rpx;
+      color: #1e90ff;
+    }
+  }
+}
+</style>

+ 22 - 0
pagesB/balPaySetting/balPaySetting.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

+ 242 - 0
pagesB/components/czPayModal.vue

@@ -0,0 +1,242 @@
+<template>
+	<page-container
+	:show="showModal" 
+	:round="true"
+	:z-index="100"
+	position="bottom" 
+	customStyle="border-radius:15px 15px 0 0;"
+	@beforeleave="beforeClose"
+	@afterleave="closePopu">
+		<view class="popu-content" v-if="payInfo">
+			<view class="popu-close" @click="cancelPay">
+				<uni-icons size="26" type="closeempty"></uni-icons>
+			</view>
+			<view class="pupu-box-pay-item">
+				<view class="popu-content-amount flex align_center justify_center">
+					<view>¥{{payInfo.amount}}</view>
+				</view>
+				<view class="flex align_center justify_center">
+					充值{{ payInfo.amount }}元送{{ payInfo.gift }}元抵扣</text>
+				</view>
+				<view style="height: 10px;"></view>
+				<view class="flex align_center justify_between" v-if="shelfInfo">
+					<text>配送商:{{shelfInfo.dealerName}}</text>
+					<view @click="callPhone()"><uni-icons size="18" type="phone" color="dodgerblue"></uni-icons><text style="font-size:12px;">拨打</text></view>
+				</view>
+				<view class="popu-content-title flex align_center justify_between">
+					<text>付款方式</text>
+					<view></view>
+				</view>
+				<view class="popu-content-pay flex align_center justify_between">
+					<view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
+					<view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
+				</view>
+			</view>
+			<view class="popu-content-btn">
+				<view class="popu-content-btn-item okbtn" @click="confirmPay">立即支付</view>
+			</view>
+		</view>
+	</page-container>
+</template>
+
+<script>
+	export default {
+		props: {
+			showPopu: {
+				type: Boolean,
+				default: false
+			},
+			payInfo: {
+				type: Object,
+				default: ()=>{
+					return null
+				}
+			},
+			shelfInfo:{
+				type: Object,
+				default: ()=>{
+					return null
+				}
+			},
+			payData: {
+				type: Object,
+				default: ()=>{
+					return null
+				}
+			},
+		},
+		data() {
+			return {
+				submitOk: false,
+				showModal: this.showPopu
+			}
+		},
+		watch: {
+			showPopu(val){
+				this.showModal = val
+				if(val){
+					this.submitOk = false
+				}
+			},
+			showModal(val){
+				if(!val){
+					this.$emit('close', val)
+				}
+			}
+		},
+		methods: {
+			// 联系经销商
+			callPhone() {
+				if(this.dealerPhone!=''){
+					uni.makePhoneCall({
+						phoneNumber: this.dealerPhone
+					})
+				}
+			},
+			beforeClose(){
+				if(this.showModal){
+					this.cancelPay()
+				}
+			},
+			// 关闭确定订单弹窗后
+			closePopu(){
+				if(!this.showModal){
+					// 付款成功
+					if(this.submitOk){
+						this.$emit('payComplete',this.payInfo, true)
+					}else{
+						// 付款失败或取消
+						this.$emit('payComplete',this.payInfo, false)
+					}
+				}
+				this.showModal = false
+			},
+			// 确认取消付款弹框
+			cancelPay(){
+				const _this = this
+				uni.showModal({
+					title: '确定取消支付吗?',
+					content: '',
+					confirmText: '继续支付',
+					cancelText: '取消支付',
+					success(ret) {
+						// 确定取消,跳转到订单详情页
+						if(ret.cancel){
+							if(_this.showModal){
+								_this.showModal = false
+								_this.submitOk = false
+							}else{
+								_this.$emit('payComplete',_this.payInfo, false)
+							}
+						}
+						// 继续支付
+						if(ret.confirm){
+							// 继续支付
+							if(!_this.showModal){
+								_this.showModal = true
+								_this.submitOk = false
+							}
+						}
+					}
+				})
+			},
+			// 确认付款
+			confirmPay(){
+				const _this = this
+				// 确认付款
+				const data = _this.payData
+				console.log(data)
+				if(data){
+					uni.requestPayment({
+						provider: 'wxpay',
+						timeStamp: data.timeStamp,
+						nonceStr: data.nonceStr,
+						package: data.package,
+						signType: data.signType,
+						paySign: data.paySign,
+						success: (res) =>{
+							_this.payComplete(1)
+						},
+						fail: (err)=> {
+							_this.payComplete(err.errMsg.indexOf("cancel")>=0 ? 2 : 0)
+						}
+					});
+				}else{
+					_this.payComplete(0,false)
+				}
+			},
+			payComplete(type){
+				uni.showToast({
+					mask: true,
+					title: type==1 ? '支付成功' : (type==2?'支付取消':'支付失败'),
+					icon: 'none'
+				})
+				this.showModal = false
+				this.submitOk = type==1
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.popu-content{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 10px 20px;
+			.popu-close{
+				padding: 10px;
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 1000;
+			}
+			.pupu-box-item,.pupu-box-pay-item{
+				width: 100%;
+				> view{
+					padding: 10px 0;
+				}
+			}
+			.pupu-box-pay-item{
+				> view{
+					padding: 6px 0;
+				}
+				.popu-content-amount{
+					font-size: 28px;
+					color: red;
+					padding-top: 30px;
+				}
+				.popu-content-title{
+					font-weight: bold;
+				}
+			}
+			.popu-content-btn{
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				margin: 30px 0 20px;
+				.popu-content-btn-item{
+					width: 30%;
+					height: 34px;
+					font-size: 14px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 100px;
+				}
+				.cancelBtn{
+					background-color: #f8f8f8;
+					color: #666;
+				}
+				.okbtn{
+					background-color: #f70000;
+					color: #FFFFFF;
+					width: 65%;
+					.payAmount{
+						margin-left: 5px;
+					}
+				}
+			}
+	}
+</style>

+ 173 - 0
pagesB/transactionRecord/transactionRecord.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="container">
+    <!-- 头部 -->
+    <view class="header">
+      <text class="active">消费</text>
+	  <text>充值</text>
+    </view>
+
+    <!-- 主体内容 -->
+    <scroll-view class="scroll-content" scroll-y>
+      <view class="month-list">
+		  <!-- 3月记录 -->
+		  <view class="month-card">
+		    <view class="month-header">
+		      <text class="month-title">2025年3月</text>
+		      <text class="month-total">总计:¥4.00</text>
+		    </view>
+		    
+		    <view class="record-list">
+		      <view 
+		        class="record-item"
+		        v-for="(item, index) in marchRecords"
+		        :key="index"
+		      >
+		        <view class="item-left">
+		          <text class="amount-label">消费</text>
+				  <text class="time">{{item.time}}</text>
+		        </view>
+				<text class="amount">¥{{item.amount}}</text>
+		      </view>
+		    </view>
+		  </view>
+		  
+		  <!-- 2月记录 -->
+		  <view class="month-card">
+		    <view class="month-header">
+		      <text class="month-title">2025年2月</text>
+		      <text class="month-total">总计:¥6.00</text>
+		    </view>
+		    
+		    <view class="record-list">
+		      <view 
+		        class="record-item"
+		        v-for="(item, index) in febRecords"
+		        :key="index"
+		      >
+		        <view class="item-left">
+		          <text class="amount-label">消费</text>
+				  <text class="time">{{item.time}}</text>
+		        </view>
+		         <text class="amount">¥{{item.amount}}</text>
+		      </view>
+		    </view>
+		  </view>
+	  </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      marchRecords: [
+        { amount: 1.00, time: '2025/03/04 08:00:29' },
+        { amount: 1.00, time: '2025/03/03 18:42:57' },
+        { amount: 1.00, time: '2025/03/03 18:16:31' },
+        { amount: 1.00, time: '2025/03/03 08:06:20' }
+      ],
+      febRecords: [
+        { amount: 1.00, time: '2025/02/28 20:36:46' },
+        { amount: 1.00, time: '2025/02/28 07:55:45' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.header {
+  padding: 30px 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  > text {
+    font-size: 16px;
+	font-weight: bold;
+	color: #333;
+	margin: 0 10px;
+  }
+  .active{
+	  color: #ff0000;
+  }
+}
+
+.scroll-content {
+  flex-grow: 1;
+  .month-list{
+	  padding: 0 15px;
+  }
+}
+
+.month-card {
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+
+.month-header {
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  
+  .month-title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+  
+  .month-total {
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.record-list {
+  padding: 0 15px;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.record-item {
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .item-left {
+    display: flex;
+	flex-direction: column;
+  }
+  
+  .amount-label {
+    font-size: 14px;
+    color: #333;
+	font-weight: bold;
+  }
+  
+  .amount {
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+  }
+  
+  .time {
+    font-size: 12px;
+    color: #999;
+	margin-top: 5px;
+  }
+}
+</style>