From 096508562efd08cdf97111506638a2a603772a94 Mon Sep 17 00:00:00 2001
From: Wik-T <812952667@qq.com>
Date: Wed, 1 Mar 2023 18:02:34 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E8=AF=9D=E8=B4=B9=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 high-unionPay/App.vue                         |  43 +-
 high-unionPay/Utils/Api.js                    |   4 +
 .../goods/refuel-confirm/refuel-confirm.vue   |  12 +-
 high-unionPay/pages/tabBar/home/home.vue      |   3 +-
 .../recharge-centre/recharge-centre.vue       | 421 +++++++++++++-----
 high-unionPay/static/img/tongz.png            | Bin 0 -> 1576 bytes
 high-unionPay/uni.scss                        |   7 +
 7 files changed, 347 insertions(+), 143 deletions(-)
 create mode 100644 high-unionPay/static/img/tongz.png

diff --git a/high-unionPay/App.vue b/high-unionPay/App.vue
index 65c36aa..119003f 100644
--- a/high-unionPay/App.vue
+++ b/high-unionPay/App.vue
@@ -5,23 +5,23 @@
 			// brestUrl: 'http://192.168.3.4:9302/brest',
 			// imgUrl: 'https://192.168.3.4:9301/filesystem/',
 			//正式
-			url: 'https://hsg.dctpay.com/crest',
-			v1url:'https://hsg.dctpay.com/v1',
-			orderurl:' https://hsg.dctpay.com/order',
-			userurl:'https://hsg.dctpay.com/user',
-			imgUrl: 'https://hsg.dctpay.com/filesystem/',
-			brestUrl: 'https://hsg.dctpay.com/brest',
-			imageWxImg: 'https://hsg.dctpay.com/filesystem/wxApplets/',
-			imageqrImg: 'https://hsg.dctpay.com/filesystem/temporary/',
+			// url: 'https://hsg.dctpay.com/crest',
+			// v1url:'https://hsg.dctpay.com/v1',
+			// orderurl:' https://hsg.dctpay.com/order',
+			// userurl:'https://hsg.dctpay.com/user',
+			// imgUrl: 'https://hsg.dctpay.com/filesystem/',
+			// brestUrl: 'https://hsg.dctpay.com/brest',
+			// imageWxImg: 'https://hsg.dctpay.com/filesystem/wxApplets/',
+			// imageqrImg: 'https://hsg.dctpay.com/filesystem/temporary/',
 			//测试
-			// url: 'https://hsgcs.dctpay.com/crest',
-			// v1url: 'https://hsgcs.dctpay.com/v1',
-			// orderurl:'https://hsgcs.dctpay.com/order',
-			// userurl:'https://hsgcs.dctpay.com/user',
-			// brestUrl: 'https://hsgcs.dctpay.com/brest',
-			// imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
-			// imageWxImg: 'https://hsgcs.dctpay.com/filesystem/wxApplets/',
-			// imageqrImg: 'https://hsgcs.dctpay.com/filesystem/temporary/',
+			url: 'https://hsgcs.dctpay.com/crest',
+			v1url: 'https://hsgcs.dctpay.com/v1',
+			orderurl:'https://hsgcs.dctpay.com/order',
+			userurl:'https://hsgcs.dctpay.com/user',
+			brestUrl: 'https://hsgcs.dctpay.com/brest',
+			imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
+			imageWxImg: 'https://hsgcs.dctpay.com/filesystem/wxApplets/',
+			imageqrImg: 'https://hsgcs.dctpay.com/filesystem/temporary/',
 			userInfo: "",
 			brestUserInfo: '',
 			openId: '',
@@ -60,5 +60,14 @@
 
 <style lang="scss">
 	/*每个页面公共css */
-	@import "/static/iconfont/font.scss";
+	@import "/static/iconfont/font.scss";
+	@keyframes noticeAnimation {
+		from {
+			transform: translateX(100rpx);
+		}
+		to {
+			// transform: translateX(calc(-100% + 150px));
+			transform: translateX(-100%);
+		}
+	}
 </style>
diff --git a/high-unionPay/Utils/Api.js b/high-unionPay/Utils/Api.js
index 4098e6c..e6709c9 100644
--- a/high-unionPay/Utils/Api.js
+++ b/high-unionPay/Utils/Api.js
@@ -495,6 +495,10 @@ export const sendUserPass = params => {
 export const getUserOrderListhuafei = params => {
 	return POST('GET', `${base}/outRechargeOrder/getUserOrderList`, params).then(res => res.data);
 }
+// 话费充值数据字典
+export const findSecConfigByType = params => {
+	return POST('GET', `${base}/common/findSecConfigByType`, params).then(res => res.data);
+}
 
 //肯德基返利
 export const getRebateIntegral = params => {
diff --git a/high-unionPay/pages/goods/refuel-confirm/refuel-confirm.vue b/high-unionPay/pages/goods/refuel-confirm/refuel-confirm.vue
index bb4915b..8ced636 100644
--- a/high-unionPay/pages/goods/refuel-confirm/refuel-confirm.vue
+++ b/high-unionPay/pages/goods/refuel-confirm/refuel-confirm.vue
@@ -202,7 +202,7 @@
 		<wybPopup ref="popup" type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true">
 			<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券选择</view>
 			<view class="width92 height110 tccs mart10 alijus" v-for="(items, index) in OrderPreList" :key="index"
-				@click="radioChanges(items,items)">
+				@click="radioChanges(items)">
 				<image mode="widthFix" :src="imageUrl+items.discountImg"></image>
 				<view class="alijus width60 margle10">
 					<view class="width80p">
@@ -396,9 +396,9 @@
 				this.$refs.popup.show();
 			},
 			//选择优惠券
-			radioChanges(item, items) {
+			radioChanges(item) {
 				this.rechangeload();
-				if (this.memDiscountId == items.id) { // 如果已经选中，则取消选中
+				if (this.memDiscountId == item.id) { // 如果已经选中，则取消选中
 					this.memDiscountId = '';
 					this.deductionPrice = '0.00';
 					this.priceCaluc(this.orderList.payPrice);
@@ -406,7 +406,7 @@
 				} else { // 否则进行选中赋值
 					if (item.discountType == 1) {
 						if (this.orderPrice >= item.discountCondition) {
-							this.memDiscountId = items.id;
+							this.memDiscountId = item.id;
 							//满减价格
 							this.deductionPrice = item.discountPrice;
 							let oldprice = this.orderPrice - this.deductionPrice;
@@ -420,14 +420,14 @@
 						}
 					}
 					if (item.discountType == 2) {
-						this.memDiscountId = items.id;
+						this.memDiscountId = item.id;
 						//抵扣价格
 						this.deductionPrice = item.discountPrice;
 						let oldprice = this.orderPrice - this.deductionPrice;
 						this.priceCaluc(oldprice);
 					}
 					if (item.discountType == 3) {
-						this.memDiscountId = items.id;
+						this.memDiscountId = item.id;
 						// 打折
 						this.deductionPrice = this.orderPrice - (this.orderPrice * item.discountPrice);
 						let oldprice = parseFloat(this.orderPrice * item.discountPrice).toFixed(2);
diff --git a/high-unionPay/pages/tabBar/home/home.vue b/high-unionPay/pages/tabBar/home/home.vue
index 01dbcf2..659f79a 100644
--- a/high-unionPay/pages/tabBar/home/home.vue
+++ b/high-unionPay/pages/tabBar/home/home.vue
@@ -662,8 +662,7 @@
 
 	.spcarea {
 		width: 31%;
-		margin-right: auto;
-		margin-left: auto;
+		margin-left: 2%;
 		border-radius: 10px 10px 0px 0px;
 		padding-bottom: 10px;
 	}
diff --git a/high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue b/high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
index b2af7a7..2792996 100644
--- a/high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
+++ b/high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
@@ -1,154 +1,269 @@
 <template>
 	<view>
-		<view class="width100 height100p backcorf06">
+		<view class="width100 height120" style="background-color: #3267f6;">
+			<view class="alijusstart paddleft10 paddtright10" style="background-color: #2d5de5;height: 30px;">
+				<image src="../../../static/img/tongz.png" style="height: 20px;" class="icon45"></image>
+				<view class="right-left-scroll margle">
+					<view class="content font12 fontspec"
+						:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}">
+						{{notice}}
+					</view>
+				</view>
+			</view>
+
 			<view class="block">
 				<view class="content height60">
-					<input type="number" class="my flleft font18 fcorfff" maxlength="11"
+					<input type="number" class="my flleft font20 fcorfff" maxlength="11"
 						placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
 				</view>
 				<view class="line1 width100 backcorfff"></view>
 			</view>
 		</view>
-		<!-- <view class="mart5">
-			<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change"
-				activeColor="#089bf5" lineColor="#089bf5" minWidth="374">
-			</QSTabs>
-		</view> -->
-		<view class="width90 font16 fcor333 fontwig6 mart20">
-			选择金额
-		</view>
-		<view class="list">
-			<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
-				@click="select(item)">
-				<view class="heTitle">{{item.rechargePrice}}元</view>
-				<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}元</view>
-				<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
+		<view class="backcorlf5 height70"></view>
+		<view class="width90 border-r backcorfff" style="margin-top: -60px;">
+			<view class="swiperHead">
+				<!--组件-->
+				<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='tabs' :swiperTabIdx='swiperTabIdx'
+					:currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight'
+					:swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor'
+					:swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow"
+					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
+					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
+					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
+					:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" tabs.length > 0 "
+					@change="CurrentTab">
+				</swiperNavBar>
+				<!--组件-->
 			</view>
+			<!--内容-->
+			<view class="swiperCont border-r">
+				<swiper class="swiper border-r" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx"
+					@change="SwiperChange">
+					<swiper-item class="swiperItem border-r" v-for="(item,index) in tabs" :key='index'>
+						<view class="width90 font14 fcor333 fontwig6 mart5">
+							话费特惠充值
+						</view>
+						<view v-if="amountList == ''" class="mart10 fotct font14 fcor666">
+							<image mode="widthFix" style="width: 40vw;" :src="imagewxUrl+imgadres"></image>
+						</view>
+						<view class="list" v-else>
+							<view class="box border-r" :class="{'on':item.id == inputAmountId}"
+								v-for="(item,index) in amountList" :key="index" @click="select(item)">
+								<view class="heTitle font16 fontwig6 paddtop5">{{item.rechargePrice}}元</view>
+								<view class="font13 contcil" :class="{'on':item.id == inputAmountId}"
+									v-if="item.status != 2">售{{item.payPrice}}元</view>
+								<view class="font12 contcil" :class="{'on':item.id == inputAmountId}"
+									v-if="item.status == 2">已售空</view>
+								<view class="width100 font12  height25l boxchil"
+									:class="{'on':item.id == inputAmountId}" style="">{{explainReceiptTime}}
+								</view>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
+
+			<view class="width90 height40 backcor008 font16 fcorfff fotct border-r" @click="addOrderPay()">¥
+				{{inputAmount}}
+				立即充值
+			</view>
+			<view class="width100 height40"></view>
 		</view>
-		<view class="mart5 width90 font18 fcor333 fontwig6">
-			充值说明：
-		</view>
-		<!-- <view class="width90 mart20" v-if="current == 0">
-			<image mode="widthFix" :src="imagewxUrl+image2"></image>
-		</view> -->
-		<view class="width90 mart20">
-			<image mode="widthFix" :src="imagewxUrl+image1"></image>
-		</view>
-		<view class="height100p"></view>
-		<view class="bombtn width94 font16">
-			<view class="width50 flleft payem">应付: {{inputAmount}}元</view>
-			<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
+		<view class="width90 mart20">
+			<rich-text :nodes="textcont"></rich-text>
 		</view>
+
+		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
+			<image class="popImg" :src="imageUrl+imgadres1"></image>
+		</wybPopup>
 	</view>
 </template>
 
 <script>
 	let app = getApp();
+	import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
+	import swiperNavBar from '@/components/swiperNavBar.vue';
+	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
 	import {
 		getListOutRechargePrice,
-		addOrderPay
-	} from '../../../Utils/Api.js';
-	import QSTabs from '../../../components/QS-tabs/QS-tabs.vue';
+		addOrderPay,
+		findSecConfigByType,
+		getCmsContent
+	} from '@/Utils/Api.js';
 	export default {
 		components: {
-			QSTabs
+			QSTabs,
+			swiperNavBar,
+			wybPopup
 		},
 		data() {
 			return {
-				typeId: '',
 				inputAmountId: '',
 				inputAmount: '',
-				orderPrice: '',
 				inputPhone: '',
 				amoutType: '',
-				codesVlues: '',
 				amountList: [],
+				price: '',
 				amoutstatus: '',
-				tabs: ["5个工作日", "6小时到账"], //切换操作
+				tabs: [], //切换操作
 				current: 0, //默认
-				swiperCurrent: 2,
-				imagewxUrl: app.globalData.imageWxImg,
-				image1:'telephone1.png',
-				image2:'telephone2.png'
+				swiperCurrent: 2,
+				imageUrl: app.globalData.imgUrl,
+				imagewxUrl: app.globalData.imageWxImg,
+				imgadres: 'noorder.png',
+				imgadres1: '',
+				image1: 'telephone1.png',
+				image2: 'telephone2.png',
+				notice: '', //警告
+				textcont: '', // 富文本
+				explainReceiptTime: '', //时间到账 
+				time: 0,
+
+				//导航
+				scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素
+				swiperTabList: [], //导航列表
+				swiperTabIdx: 0,
+				swiperCurrentSize: '26rpx', //导航的字体大小
+				swiperColor: '#333333', //导航栏字体未选中前颜色
+				swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色
+				currentSwiperWidth: '23%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
+				currentSwiperHeight: 100, //当前导航的高度度 rpx px
+				mainHeight: 240, //全屏或者局部滑动设置的高度
+				currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
+				currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色
+				currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px
+				currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px
+				currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果
+
 			}
 		},
 		onLoad(options) {
-			this.typeId = options.id;
-			if (this.typeId == 1) {
-				uni.setNavigationBarTitle({
-					title: '中国移动'
-				})
-				this.amoutType = 2;
-				this.getListOutRechargePrice(2);
-				return;
-			}
-			if (this.typeId == 2) {
-				uni.setNavigationBarTitle({
-					title: '中国电信'
-				})
-				this.amoutType = 1;
-				this.getListOutRechargePrice(1);
-				return;
-			}
-			if (this.typeId == 3) {
-				uni.setNavigationBarTitle({
-					title: '中国联通'
-				})
-				this.amoutType = 3;
-				this.getListOutRechargePrice(3);
-				return;
-			}
-
+			this.getCmsAactibity();
+			this.getListOutRechargePrice();
+		},
+		onShow() {
+			this.findSecConfigByType();
+			this.findSecConfigByTypewap();
+		},
+		mounted() {
+			let scroll_width = 0;
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.right-left-scroll').boundingClientRect(data => {
+				scroll_width = (data.width).toFixed(2);
+			}).exec();
 
+			query.select('.right-left-scroll .content').boundingClientRect(data => {
+				if (data.width - scroll_width > 0) {
+					this.time = (9 * data.width / scroll_width).toFixed(2);
+				}
+			}).exec();
 		},
 		methods: {
+			//查询弹窗
+			getCmsAactibity() {
+				let code;
+				// #ifdef H5
+				code = '2'
+				// #endif
+				// #ifdef MP
+				code = '1'
+				// #endif
+				let params = {
+					companyId: app.globalData.companyId,
+					platform: code,
+					categoryCode: 'CMS_RECHARGE_POPOVER'
+				}
+				getCmsContent(params).then(res => {
+					if (res.return_code == '000000' && res.return_data.childCategory.length != 0) {
+						//弹窗首页广告
+						this.imgadres1 = res.return_data.childCategory[0].imgData;
+						this.showPopup();
+					}
+				});
+			},
+			//显示弹出
+			showPopup() {
+				this.$refs.popup.show();
+			},
+			// 充值通知
+			findSecConfigByType() {
+				let datas = {
+					codeType: 'EXPLAIN_NOTIFICATIONS'
+				}
+				findSecConfigByType(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.notice = res.return_data.codeValue;
+					}
+				});
+			},
+			//充值警告
+			findSecConfigByTypewap() {
+				let datas = {
+					codeType: 'EXPLAIN_WRAP '
+				}
+				findSecConfigByType(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.textcont = res.return_data.codeValue;
+					}
+				});
+			},
 			select(amoutinfos) {
 				this.inputAmount = amoutinfos.payPrice;
-				this.orderPrice = amoutinfos.rechargePrice;
+				this.price = amoutinfos.rechargePrice;
 				this.inputAmountId = amoutinfos.id;
 				this.amoutstatus = amoutinfos.status;
 			},
-			//筛选
-			change(index) {
-				this.$refs.tabs.setFinishCurrent(index);
-				this.current = index;
-				this.inputAmount = '';
-				this.amoutstatus = '';
-				if (index == 0) {
-					this.swiperCurrent = 2;
-					this.getListOutRechargePrice(this.amoutType);
-				} else {
-					this.swiperCurrent = 1;
-					this.getListOutRechargePrice(this.amoutType);
-				}
-			},
 			/**
 			 * 查询价格
 			 */
-			getListOutRechargePrice(item) {
+			getListOutRechargePrice() {
 				uni.showLoading({
 					title: '加载中...'
 				})
+				let showType;
+				// #ifdef H5
+				showType = 2;
+				// #endif
+				// #ifdef MP
+				showType = 1;
+				// #endif
 				let params = {
-					operatorType: item,
 					"companyId": app.globalData.companyId,
-					platformId: 3
-					// rechargeType: this.swiperCurrent
+					platformId: showType
 				}
 				getListOutRechargePrice(params).then(res => {
 					uni.hideLoading()
 					if (res.return_code == '000000' && res.return_data) {
-						this.amountList = res.return_data;
+						this.tabs = res.return_data;
+						this.amountList = res.return_data[0].priceList;
+						this.explainReceiptTime = res.return_data[0].explain_receipt_time;
+						this.amoutType = res.return_data[0].id;
 					} else {
 						this.amountList = [];
 					}
 				})
 			},
 
+			//tab点击事件 自行完善需要的代码
+			CurrentTab: function(index) {
+				this.swiperTabIdx = index;
+				this.scrollIntoView = Math.max(0, index - 1);
+				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
+				this.amountList = this.tabs[this.swiperTabIdx].priceList;
+				this.amoutType = this.tabs[this.swiperTabIdx].id;
+			},
+			//滑动事件  自行完善需要的代码
+			SwiperChange: function(e) {
+				this.swiperTabIdx = e.detail.current;
+				this.scrollIntoView = Math.max(0, e.detail.current - 1);
+				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
+				this.amountList = this.tabs[this.swiperTabIdx].priceList;
+				this.amoutType = this.tabs[this.swiperTabIdx].id;
+			},
 			/**
 			 * 提交订单
 			 */
-			addOrderPay() {
+			addOrderPay() {
 				let that = this;
 				if (that.amoutstatus == 2) {
 					uni.showToast({
@@ -161,6 +276,7 @@
 				if (that.inputPhone == '') {
 					uni.showToast({
 						title: '请输入充值号码',
+						duration: 2000,
 						icon: "none"
 					});
 					return;
@@ -168,6 +284,7 @@
 				if (that.inputPhone.length != 11) {
 					uni.showToast({
 						title: '请输入正确充值号码',
+						duration: 2000,
 						icon: "none"
 					});
 					return;
@@ -175,9 +292,10 @@
 				if (that.inputAmount == '') {
 					uni.showToast({
 						title: '请选择价格',
+						duration: 2000,
 						icon: "none"
 					});
-					return;
+					return false;
 				}
 				uni.showToast({
 					title: '提交订单...',
@@ -185,7 +303,7 @@
 					duration: 2000,
 					success() {
 						uni.navigateTo({
-							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.orderPrice +
+							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
 								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
 								'&rechargeModel=' + that.amoutType +
 								'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
@@ -199,9 +317,68 @@
 </script>
 
 <style lang="scss">
+	page {
+		background-color: #f5f5f5;
+	}
+
+	.popImg {
+		width: 100%;
+		height: 430px;
+	}
+
+	.swiperHead {
+		width: 100%;
+	}
+
+	.swiperHead scroll-view {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+	}
+
+	.swiperTab {
+		display: inline-flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.swiperCont {
+		width: 100%;
+		padding-top: 5px;
+		padding-bottom: 20px;
+		background-color: #ffffff;
+	}
+
+	/* #ifdef H5 */
+	.swiperHead {
+		top: 44px;
+		z-index: 10;
+		width: 100%;
+		background: #FFFFFF;
+	}
+
+	/* #endif */
+
+	.swiper {
+		width: 100%;
+		height: 500rpx;
+	}
+
+	.swiperItem {
+		overflow: auto;
+		background: #ffffff;
+		color: #333333;
+		font-size: 30upx;
+	}
+
+
+
+
+
 	.block {
 		width: 94%;
-		padding: 60upx 3%;
+		padding: 15px 3%;
 
 		.my {
 			width: 80%;
@@ -224,55 +401,63 @@
 		padding: 20upx 0;
 
 		.box {
-			width: 30%;
+			width: 29%;
 			margin-left: 1%;
 			margin-right: 2%;
 			margin-top: 20upx;
+			margin-bottom: 20upx;
 			float: left;
-			height: 120upx;
+			height: 150upx;
 			// line-height: 120upx;
-			display: inline-grid;
+			// display: inline-grid;
 			justify-content: center;
 			align-items: center;
 			text-align: center;
-			box-shadow: 0upx 0upx 4upx #666666;
+			border: 1px solid #f1f1f1;
 			font-size: 36upx;
-			color: #089bf5;
+			color: #333333;
 
 			&.on {
-				background-color: #089bf5;
-				color: #ffffff;
+				background-color: #ecf5fe;
+				border: 1px solid #089bf5;
+				color: #089bf5;
 			}
 		}
 
 		.heTitle {
 			width: 100%;
-			font-size: 15px;
 		}
 	}
 
-	.bombtn {
-		position: fixed;
-		height: 45px;
-		bottom: 20px;
-		border-radius: 6px;
 
-		.payem {
-			height: 45px;
-			line-height: 45px;
-			text-align: center;
-			background-color: #007AFF;
-			color: #FFFFFF;
-			border-radius: 6px 0 0 6px;
+	.boxchil {
+		border-radius: 0 0 5px 5px;
+		background-color: #f0f0f0;
+		margin-top: 6px;
+		color: #999999;
+
+		&.on {
+			background-color: #089bf5;
+			color: #ffffff;
 		}
+	}
 
-		.paybtn {
-			height: 45px;
-			line-height: 45px;
-			text-align: center;
-			background-color: #F8A628;
-			border-radius: 0 6px 6px 0;
-			color: #FFFFFF;
+	.contcil {
+		color: #999999;
+
+		&.on {
+			// background-color: #089bf5;
+			color: #089bf5;
+		}
+	}
+
+	.right-left-scroll {
+		white-space: nowrap;
+		overflow: hidden;
+
+		.content {
+			display: inline-block;
+			color: #c1b569;
 		}
 	}
 </style>
diff --git a/high-unionPay/static/img/tongz.png b/high-unionPay/static/img/tongz.png
new file mode 100644
index 0000000000000000000000000000000000000000..b712ee99f0d3f17b97a6eee2d4d3d2c38682937b
GIT binary patch
literal 1576
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
a2mBAfYF2J8EleW-0000<MNUMnLSTZvxWJ46

literal 0
HcmV?d00001

diff --git a/high-unionPay/uni.scss b/high-unionPay/uni.scss
index cfcf448..92684b3 100644
--- a/high-unionPay/uni.scss
+++ b/high-unionPay/uni.scss
@@ -296,6 +296,9 @@ $uni-font-size-paragraph:30upx;
 	background: linear-gradient(to bottom, #3da7e7, #6fbdee);
 }
 
+.backcorlf5{
+	background: linear-gradient(to bottom, #3267f6, #f5f5f5);
+}
 
 .backcorf06{
 	background-color: #0083f5;
@@ -552,6 +555,10 @@ $uni-font-size-paragraph:30upx;
 .height25 {
   height: 25px;
 }
+.height25l {
+  height: 25px;
+  line-height: 25px;
+}
 
 
 .height50 {