记录一个小程序汇率查询的页面代码

发表于 更新于 分类于 ， Changyan： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

之前公司制作一个小程序，快做好了被搁置了，后面领导又要，一个误操作数据不见了，只能重写这个小程序，其中的一个页面关于汇率查询的，使用的是第三方的接口，因为跟之前使用的接口不一样，要根据新接口重新写这个写这个汇率查询的功能。

前提

本人为了多端发布方便，直接使用了uni-app，上篇文章中遇到的跨域问题在使用这个汇率接口上也出现了，遇到的可以参考：vue跨域使用jsonp解决方案。

文章代码vue貌似不高亮，所以我这里拆成3个部分放置代码，代码中还有很多优化的地方，大家自行修改吧。

html段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
	<view>
		<view class="padding bg-white">
			<view class="bg-gradual-blue padding radius shadow-blur">
				<view class="gird_text">
					<view class="exchange_icon">
						<image src="/static/exchange_icon.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="">
							汇率换算
						</view>
						<view class="text-xl margin-top-xs">
							1{{currentcies[from_currentcy_index].name}}={{meta_amount}}{{currentcies[to_currentcy_index].name}}
						</view>
						<view class="text-xl margin-top-xs">
							1{{currentcies[to_currentcy_index].name}}={{reversed_meta_amount}}{{currentcies[from_currentcy_index].name}}
						</view>
					</view>
				</view>
				<view class="grid col-2 inputs margin-top">
					<view>
						<input class="uni-input input" type="digit" v-model="from_amount" focus />
					</view>
					<view>
						<picker @change="from_currentcy_change" :value="from_currentcy_index" range-key="name" :range="currentcies">
							<view class="uni-input input">{{currentcies[from_currentcy_index].name}}({{currentcies[from_currentcy_index].currency}})</view>
						</picker>
					</view>
					<view>
						<input class="uni-input input" v-model="to_amount" disabled="disabled" />
					</view>
					<view>
						<picker @change="to_currentcy_change" :value="to_currentcy_index" :range="currentcies" range-key="name">
							<view class="uni-input input">{{currentcies[to_currentcy_index].name}}({{currentcies[to_currentcy_index].currency}})</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="text-center margin-top-xl text-gray">
				<view>数据仅供参考，交易时以银行柜台成交价为准</view>
				<view>更新时间：2020-02-02 02:23</view>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">当日外汇</text>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="exchange_row text-center text-xl margin-bottom-sm">
				<view>币种</view>
				<view>人民币汇率</view>
				<view>发布时间</view>
			</view>
			<view class="exchange_row text-center align-center margin-top-xs padding-bottom-xs solid-bottom" v-for="(item, index) in foreign_exchanges" :key="index">
				<view>
					<view class="flex align-center">
						<view class="flex-sub flag">
							<image :src="'/static/'+item.curreny+'.png'" mode="widthFix"></image>
						</view>
						<view class="flex-sub">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								1 {{item.curreny}}
							</view>
						</view>
					</view>
				</view>
				<view class="text-xl">{{item.rate}} <text class="text-sm text-gray margin-left-xs">CNY</text></view>
				<view>{{item.updatetime}}</view>
			</view>
		</view>
	</view>
</template>

css代码段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style>
	.gird_text {
		/* 声明一个容器 */
		display: grid;
		/*  声明列的宽度  */
		grid-template-columns: 1fr 7fr;
		/*  声明行间距和列间距  */
		grid-gap: 20rpx;
		overflow: hidden;
	}

	.exchange_icon {
		max-width: 100%;
		overflow: hidden;
	}

	.grid.col-2.inputs>uni-view {
		width: calc((100% - 10px)/2);
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 3px;
		position: relative;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.grid.col-2.inputs>uni-view:nth-child(2n),
	.grid.col-3.inputs>uni-view:nth-child(3n),
	.grid.col-4.inputs>uni-view:nth-child(4n),
	.grid.col-5.inputs>uni-view:nth-child(5n) {
		margin-right: 0;
	}

	.input {
		height: 32px;
		line-height: 32px;
		text-indent: 5px;
		color: #666666;
	}
	
	.exchange_row {
		/* 声明一个容器 */
		display: grid;
		/*  声明列的宽度  */
		grid-template-columns: 4fr 4fr 3fr;
		/*  声明行间距和列间距  */
		grid-gap: 15px;
		overflow: hidden;
	}
	.flag image{
		width: 100%;
	}
</style>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<script>
	export default {
		data() {
			return {
				// 换算前的货币单位
				from_currentcy_index: 1,
				// 换算后的货币单位
				to_currentcy_index: 0,
				// 要换算的货币数量
				from_amount: 1,
				// 换算后的货币数量
				to_amount: 0,
				// 1单元货币单位兑换后的目标单位数量
				meta_amount: 0,
				// 人民币跟其他所有货币兑换汇率列表
				cny_exchange_list: {},
				// 所有货币单位
				currentcies: [{
						"currency": "CNY",
						"name": "人民币"
					},
					{
						"currency": "USD",
						"name": "美元"
					},
					{
						"currency": "EUR",
						"name": "欧元"
					},
					{
						"currency": "JPY",
						"name": "日元"
					},
					{
						"currency": "HKD",
						"name": "港币"
					},
					{
						"currency": "KRW",
						"name": "韩元"
					},
					{
						"currency": "RUB",
						"name": "卢布"
					},
					{
						"currency": "GBP",
						"name": "英镑"
					},
					{
						"currency": "SGD",
						"name": "新加坡元"
					},
					{
						"currency": "TWD",
						"name": "新台币"
					},
					{
						"currency": "CAD",
						"name": "加拿大元"
					},
					{
						"currency": "AUD",
						"name": "澳大利亚元"
					},
					{
						"currency": "INR",
						"name": "印度卢比"
					},
					{
						"currency": "THB",
						"name": "泰国铢"
					},
					{
						"currency": "MOP",
						"name": "澳门元"
					},
					{
						"currency": "NZD",
						"name": "新西兰元"
					},
					{
						"currency": "SEK",
						"name": "瑞典克朗"
					},
				],
				// 当日外汇列表
				foreign_exchanges:[]
			}
		},
		onReady() {
			// 获取人民币兑换所有货币的汇率列表
			this.get_cny_exchange()			
		},
		computed: {
			// 反向查询1单元的目标货币兑换恒原始货币的数量
			reversed_meta_amount: function() {

				return (1 / this.meta_amount).toFixed(4)
			}
		},
		watch: {
			// 检测原始货币数量变化,更新兑换后的货币数量
			from_amount: function(val) {
				this.calc_exchange(false)
			}
		},
		methods: {
			// 计算兑换后的货币数量,默认为初始化，原始1数量货币单位的兑换
			calc_exchange: function(init = true) {
				// 获取原始货币对应的汇率
				let from_currentcy_obj = this.cny_exchange_list[this.currentcies[this.from_currentcy_index].currency]
				// 获取目标货币对应的汇率
				let to_currentcy_obj = this.cny_exchange_list[this.currentcies[this.to_currentcy_index].currency]

				// 获取1单元原始货币兑换后的目标货币数量
				this.meta_amount = (1 / from_currentcy_obj.rate * to_currentcy_obj.rate).toFixed(4)
				if (init) {
					this.to_amount = this.meta_amount
				} else {
					this.to_amount = (this.from_amount * this.meta_amount).toFixed(4)
				}

			},
			
			save_storage:function(){
				this.$jsonp('https://api.jisuapi.com/exchange/single?currency=CNY&appkey=你申请的appkey').then((res) => {
						if (res.status == 0) {
							// 存入storage
							this.cny_exchange_list = res.result.list
							// 将人民币添加进去,方便统一转换
							this.cny_exchange_list.CNY = {
								"name": "人民币",
								"rate": 1,
								"updatetime": this.cny_exchange_list.USD.updatetime
							}
							uni.setStorageSync('cny_exchange_storage', this.cny_exchange_list);
							uni.setStorageSync('exchanges_exp', this.get_now_timestamp()+1000*3600*2);
					// 初始化数据显示
					this.calc_exchange()
					// 获取常用外汇列表
					this.get_foreign_exchange()	
							
						} else {
							uni.showModal({
								title: "警告",
								content: "数据请求出错，请联系管理员",
								showCancel: false
							})
						}
					}).catch(err => {
					console.log('有结单独的果吗？', err)
				})
			},
			// 获取当前时间戳
			get_now_timestamp:function(){
				let d = new Date()
				return d.getTime()
			},

			// 获取人民币兑换所有货币的汇率
			get_cny_exchange: function() {
				// 判断是否过期,过期重新获取汇率数据
				if(uni.getStorageSync('exchanges_exp')>this.get_now_timestamp()){
					// 获取缓存汇率数据
					const cny_exchange_storage = uni.getStorageSync('cny_exchange_storage');
					// 有数据直接赋值,没有重新获取
					if (cny_exchange_storage) {
						this.cny_exchange_list = cny_exchange_storage
						
						// 初始化数据显示
						this.calc_exchange()
						// 获取常用外汇列表
						this.get_foreign_exchange()	
					} else {
						this.save_storage()
					}
				}else{
					this.save_storage()
				}
				
			},
			// 更改原始货币单位
			from_currentcy_change: function(e) {
				this.from_currentcy_index = e.target.value
				this.calc_exchange(false)
			},

			to_currentcy_change: function(e) {
				this.to_currentcy_index = e.target.value
				this.calc_exchange(false)
			},
			
			// 封装常用货币汇率
			get_foreign_exchange:function(){
				this.currentcies.forEach((item, index)=>{
					console.log(item, index)
					if(item.currency != "CNY"){
					this.foreign_exchanges.push({
						curreny:item.currency,
						name:item.name,s
						rate:(1/this.cny_exchange_list[item.currency].rate).toFixed(4),
						updatetime:this.cny_exchange_list[item.currency].updatetime,
					})
					}
					
				})
			}
		}
	}
</script>

最终效果

时间关系，代码感觉写的很容易，逻辑上也不是最优的，欢迎大家留言优化它。