pages-goods-three-index & order

api/three.js

@@ -0,0 +1,16 @@
+import request from "@/utils/request.js";
+
+//获取话费充值记录
+export function getLifeOrder(data) {
+	return request.get('Xinqiu/lst',data,{noAuth: true});
+}
+
+//创建充值订单
+export function createCz(data) {
+	return request.post("Xinqiu/create_order", data);
+}
+
+//获取可充值列表
+export function getCzList(data) {
+	return request.get('Xinqiu/goods',data,{noAuth: true});
+}

pages.json

@@ -1787,6 +1787,18 @@
 						}
 					}
 				},
+				{
+					"path": "three/index",
+					"style": {
+						"navigationBarTitleText": "花费充值"
+					}
+				},
+				{
+					"path": "three/order",
+					"style": {
+						"navigationBarTitleText": "我的充值"
+					}
+				},
 				{
 					"path": "goods_list/list",
 					"style": {

pages/goods/three/index.vue

@@ -0,0 +1,399 @@
+<template>
+	<view class="content">
+		<view class="search-box flex">
+			<input type="text" v-model="phone" placeholder="输入手机号码" />
+			<view class="search-btn" @click="goCz()">
+				充值
+			</view>
+		</view>
+		<view class="item-wrap" v-for="item in info">
+			<view class="tit">
+				{{item.cname}}
+			</view>
+			<view class="item-list flex">
+				<view class="item " v-for="itemt in item.goods" :class="{'action': itemt.goods_id == choose.goods_id}"
+					@click="chooseGood(itemt)">
+					<view class="num">
+						{{itemt.num}}元
+					</view>
+					<view class="base-price">
+						<!-- 赠送：{{(itemt.num*1*pUser.recharge_resumption*0.01).toFixed(0)}}复投积分 -->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item-wrap" v-if="content">
+			<view class="tit">
+				注意事项
+			</view>
+			<view class="tip" v-html="content">
+
+			</view>
+		</view>
+		<uni-popup ref="popup" type="bottom">
+			<view class="cz-model">
+				<view class="price">
+					{{choose.num}}
+				</view>
+				<view class="">
+					{{choose.goods_name}}
+				</view>
+				<view class="">
+					到账时间：1-96小时 （高峰期96小时内）
+				</view>
+				<view class="">
+					充值号码：<text class="tip">{{this.phone}}</text>
+				</view>
+				<view class="tip tips">
+					请仔细核对号码。输错号码后果自负
+				</view>
+				<view class="pay-type-list ">
+				</view>
+				<view class="btn" @click="goNew">
+					立即充值
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+
+</template>
+
+<script>
+	import {
+		getCzList,
+		createCz
+	} from '@/api/three'
+	import {getUserInfo} from '@/api/user.js'
+	// import { passUser } from '@/api/zero.js'
+	export default {
+		data() {
+			return {
+				// pUser: {},
+				phone: '',
+				info: [],
+				content: '',
+				choose: {
+					goods_id: 0
+				},
+				payType: 3,
+				payName: 'weixin',
+				userInfo: {},
+			}
+		},
+		onLoad() {
+			this.getUserInfo()
+		},
+		onShow() {
+		},
+		onReachBottom() {
+
+		},
+		onReady() {
+
+		},
+		methods: {
+			getUserInfo: function() {
+				let that = this;
+				getUserInfo().then(res => {
+					that.userInfo = res.data
+				});
+			},
+			//选择支付方式
+			changePayType(type) {
+				this.payType = type;
+				if (this.payType == 1) {
+					this.payName = 'weixin';
+				}
+				if (this.payType == 2) {
+					this.payName = 'ali';
+				}
+				if (this.payType == 3) {
+					this.payName = 'yue';
+				}
+			},
+			goCz() {
+				if (!this.phone) {
+					return this.$api.msg('请输入手机号')
+				}
+				var pattern = /^1[0-9]{10}$/;
+				if (!pattern.test(this.phone)) {
+					return this.$api.msg('请输入正确的手机号')
+				}
+				if (!this.choose.goods_id) {
+					return this.$api.msg('请选择需要充值的套餐')
+				}
+				// 校验手机
+				let phoneType = this.getMobileOperator(this.phone)
+				if(this.choose.goods_name.indexOf(phoneType) == -1) {
+					this.choose = {}
+					return uni.showModal({
+						title: '温馨提醒',
+						content: `您当前的手机号为${phoneType}号码，与充值套餐的运营商不一致，请重新选择套餐！`,
+						showCancel:false
+					})
+				}
+				this.$refs.popup.open()
+			},
+			getMobileOperator(phoneNumber) {
+			  // 移动号段
+			  var cmccPrefixes = ['134', '135', '136', '137', '138', '139', '150', '151', '152', '157', '158', '159', '182', '183', '184', '187', '188', '178', '147', '172', '198'];
+			  // 联通号段
+			  var cuccPrefixes = ['130', '131', '132', '155', '156', '185', '186', '145', '176', '175', '166'];
+			  // 电信号段
+			  var ctcPrefixes = ['133', '153', '180', '181', '189', '177', '173', '199'];
+			  // 虚拟运营商号段
+			  var virtualPrefixes = ['170', '171'];
+			  var prefix = phoneNumber.substring(0, 3);
+			  
+			  if (cmccPrefixes.includes(prefix)) {
+			    return '移动';
+			  } else if (cuccPrefixes.includes(prefix)) {
+			    return '联通';
+			  } else if (ctcPrefixes.includes(prefix)) {
+			    return '电信';
+			  } else if (virtualPrefixes.includes(prefix)) {
+			    return '虚拟运营商';
+			  } else {
+			    return '未知运营商';
+			  }
+			},
+			goNew() {
+				let that = this
+				createCz({
+					rechargeno: this.phone,
+					pay_type: this.payName,
+					goods_id: this.choose.goods_id,
+					pay_price: this.choose.num,
+					price: this.choose.num
+				}).then(res => {
+					if(res.data.status == 'PAY_DEFICIENCY' ||res.data.status ==  'PAY_ERROR') {
+						this.$api.msg(res.msg)
+					}else {
+						
+					}
+					this.$refs.popup.close()
+					
+				})
+			},
+			chooseGood(item) {
+				this.choose = item
+			},
+			getCzList() {
+				let that = this
+				getCzList().then(res => {
+					this.info = res.data.data
+					this.info.forEach(item => {
+						if (item.goods.length > 0) {
+							item.goods.forEach(itemt => {
+								if (itemt.desc && itemt.desc.split('<p>').length > 1) {
+									that.content = itemt.desc
+								}
+							})
+						}
+					})
+				})
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flex {
+		display: flex;
+		align-items: center;
+		// justify-content: space-between;
+	}
+	.content {
+		padding-top: 20rpx;
+		padding-bottom: 20rpx;
+	}
+
+	.phone {
+		width: 690rpx;
+		height: 80rpx;
+		background-color: #fff;
+		border-radius: 220rpx;
+		margin: 0 auto 20rpx;
+	}
+
+	.item-wrap {
+
+		width: 690rpx;
+		background-color: #fff;
+		margin: 0 auto 20rpx;
+		padding: 20rpx 34rpx;
+		border-radius: 20rpx;
+
+		.tip {
+			width: 620rpx;
+			margin: auto;
+			background-color: #e9f1fe;
+			padding: 20rpx;
+			border-radius: 20rpx;
+			margin-top: 40rpx;
+
+		}
+
+		.tit {
+			font-size: 30rpx;
+			font-weight: bold;
+		}
+
+		.item-list {
+			justify-content: flex-start;
+			padding-top: 40rpx;
+
+			.item {
+				// width: 192rpx;
+				border-radius: 20rpx;
+				margin-right: 20rpx;
+				background-color: #e9f1fe;
+				text-align: center;
+				padding: 40rpx;
+
+				.num {
+					color: #409EFF;
+					font-weight: bold;
+					font-size: 28rpx;
+				}
+
+				.base-price {
+					padding-top: 10rpx;
+					font-size: 22rpx;
+				}
+
+				.price {
+					font-size: 28rpx;
+					color: #f3253a;
+					padding-top: 10rpx;
+				}
+			}
+
+			.action {
+				border: 1px solid #f3253a;
+			}
+		}
+	}
+
+
+
+	.top-search {
+		height: 80rpx;
+		padding: 0 20rpx;
+		width: 100%;
+		height: 116rpx;
+		z-index: 99;
+
+		.search {
+			width: 24rpx;
+			margin-right: 20rpx;
+		}
+
+	}
+
+	.search-box {
+		justify-content: flex-start;
+		width: 690rpx;
+		height: 72rpx;
+		background: rgb(255, 255, 255);
+		border-radius: 30rpx;
+		padding: 0 10rpx 0 20rpx;
+		margin: 0 auto 20rpx;
+
+		input {
+			flex-grow: 1;
+			height: 72rpx;
+			line-height: 72rpx;
+		}
+
+		.search-btn {
+			flex-shrink: 0;
+			width: 110rpx;
+			height: 52rpx;
+			text-align: center;
+			line-height: 50rpx;
+			color: #fff;
+			background-color: #409EFF;
+			border-radius: 26rpx;
+
+		}
+	}
+
+	.cz-model {
+		width: 750rpx;
+		background-color: #fff;
+		padding: 60rpx 0 30rpx;
+		text-align: center;
+		border-radius: 25rpx 25rpx 0 0;
+
+		view {
+			padding: 10rpx 0;
+		}
+
+		.price {
+			color: #409eff;
+			font-size: 48rpx;
+			font-weight: bold;
+		}
+
+		.tip {
+			color: #409eff;
+		}
+
+		.tips {
+			padding-bottom: 20rpx;
+		}
+
+		.btn {
+			width: 690rpx;
+			text-align: center;
+			line-height: 60rpx;
+			color: #fff;
+			background-color: #409eff;
+			border-radius: 40rpx;
+			margin: auto;
+		}
+	}
+	.pay-type-list {
+		margin-top: 20upx;
+		background-color: #fff;
+		padding-left: 60upx;
+		.type-item {
+			height: 120upx;
+			padding: 20upx 0;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			padding-right: 60upx;
+			font-size: 30upx;
+			position: relative;
+		}
+	
+		.icon {
+			width: 100upx;
+			font-size: 52upx;
+		}
+		.iconyue {
+			color: #fe8e2e;
+		}
+		.iconweixin {
+			color: #36cb59;
+		}
+		.iconzhifubao {
+			color: #01aaef;
+		}
+		.tit {
+			font-size: 28rpx;
+			color: #000;
+			margin-bottom: 4upx;
+		}
+		.con {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			font-size: 26rpx;
+			color: #000;
+		}
+	}
+</style>

pages/goods/three/order.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="content">
+		<view class="order-wrap" v-for="item in list">
+			<view class="tit">
+				订单号：{{item.order_id}}
+			</view>
+			<view class="tit">
+				支付方式：{{item.pay_type == 'yue'?'余额': (item.pay_price == 'weixin'?'微信':'支付宝')}}
+			</view>
+			<view class="tit">
+				充值号码：{{item.rechargeno}}
+			</view>
+			<view class="tit">
+				实付： {{item.pay_price}}
+			</view>
+		</view>
+		<!-- <uni-load-more v-if="!(list.length == 0 && loaded)" :status="loadingType" ></uni-load-more> -->
+		<emptyPage title="暂无充值记录～" v-if="list.length == 0 && loaded"></emptyPage>
+	</view>
+</template>
+
+<script>
+	import emptyPage from '@/components/emptyPage.vue'
+	import { getLifeOrder } from '@/api/three.js'
+	export default {
+		components: {
+			emptyPage
+		},
+		data() {
+			return {
+				list: [],
+				page: 1,
+				limit: 10,
+				loaded: false,
+				loadingType: 'more'
+			}
+		},
+		onLoad() {
+			
+		},
+		onShow() {
+			// this.getLifeOrder()
+		},
+		onReachBottom() {
+			// this.getLifeOrder()
+		},
+		onReady() {
+			
+		},
+		methods: {
+			getLifeOrder() {
+				let that = this
+				if(that.loadingType == 'loading' || that.loadingType == 'noMore') {
+					return
+				}
+				that.loadingType = 'loading'
+				getLifeOrder({
+					page: that.page,
+					limit: that.limit
+				}).then(res => {
+					let arr = res.data.data
+					that.list = that.list.concat(arr)
+					if(arr.length == that.limit) {
+						that.loadingType = 'more'
+						that.page++
+					}else {
+						that.loadingType = 'noMore'
+					}
+					that.loaded = true
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		padding-top: 20rpx;
+	}
+	.order-wrap {
+		width: 690rpx;
+		background-color: #fff;
+		margin: 0 auto 20rpx;
+		padding: 20rpx 34rpx;
+		border-radius: 20rpx;
+		.tit {
+			font-size: 30rpx;
+			font-weight: bold;
+		}
+		.price {
+			text-align: right;
+		}
+	}
+</style>