【无忧美名网-一款根据诗经、古诗词等国学给宝宝起名的小程序-uniapp端】

无忧美名网-一款根据诗经、古诗词等国学给宝宝起名的小程序-uniapp端。使用UNIAPP开发，可以直接导出为微信小程序、抖音小程序、快手小程序和百度小程序。

前端集成了日历选择插件，支持对接微信支付、字节跳动支付，可以给宝宝起名、测分、下单、查订单。

起名结果包括：用户的姓氏、生日、八字等基本信息；五行八卦信息；五行强弱信息；喜用神信息；名字列表信息。

名字详细信息包括：古诗词出处、大师点评名字（系统自动计算）、五行分析、名字音律分析、字形字义分析、生肖星座分析等。

CSDN源码下载地址：https://download.csdn.net/download/u010978757/85504534

DATA5U源码网下载地址：https://code.data5u.com/code/detail-622.html

在这里插入图片描述

部分代码如：

<script>
	export default {
		globalData: {
			nameResKey: 'nrk',
			nameResKey2: 'nrk2',
			scoreResKey: 'srk',
			itemKey: 'imk',
			uuidKey: 'uidk',
			priceKey: 'prk',
			viewNumKey: 'vnk',
			uuid: '',
			debug: false,
			domain: 'http://127.0.0.1:8089'
        },  
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() { 
			console.log('App Show')
			// #ifdef MP-WEIXIN
			uni.setTabBarItem(
				{
					index: 0,
					pagePath: "pages/index/index",
					iconPath: "static/tabbar/name.png",
					selectedIconPath: "static/tabbar/name_s.png",
					text: "国学起名"
				}, 
				{
					index: 1,
					pagePath: "pages/score/score",
					iconPath: "static/tabbar/score.png",
					selectedIconPath: "static/tabbar/score_s.png",
					text: "姓名测分"
				}		
			)
			// #endif
			// #ifndef MP-WEIXIN
			uni.setTabBarItem(
				{
					index: 0,
					pagePath: "pages/index/index",
					iconPath: "static/tabbar/name.png",
					selectedIconPath: "static/tabbar/name_s.png",
					text: "国学起名"
				}, 
				{
					index: 1,
					pagePath: "pages/score/score",
					iconPath: "static/tabbar/score.png",
					selectedIconPath: "static/tabbar/score_s.png",
					text: "姓名测分"
				}, 
				{
					index: 2,
					pagePath: "pages/my/my",
					iconPath: "static/tabbar/user.png",
					selectedIconPath: "static/tabbar/user_s.png",
					text: "订单查询"
				}			
			)
			// #endif
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
@font-face {
  font-family: "iconfont"; /* Project id 3258732 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAASQAAsAAAAACXwAAARCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqGMIVBATYCJAMQCwoABCAFhGcHPRs+CBFVnCvJfhS4ewJtmLAItzwayom61GVY8P9HPnyd+T6imYU4mRLpWplZooAmJYNbeUtan7qpTwBO9LUhCHf3v9/MNEKXJTXojuaGaegX0iyuasf6b7vf/N6wCi2REiHSqJTEH/eqZiyNRdezLPCozD3wg8V2hwaoYw/CXokqhF1g5xCoVSdeAgIQ8GAKaGFxpRUBs7oXzUEMOIJRAnU1mTV9ajeMugk1QyaY2iE9kSP2QAd0K70FYHf+8+QLRhIjUHSG4DK1A0V9uPzhxOdipvk0YK+QjoAAd6YAHYAB5AuzkGnzrh6wMiWDYY0lOF6AExMJB10X8LnY52PJTalm+C8PCBINiB6Byo/wow0MD0wcM4HA5wAmUPhcbAJDLN/dCAgGSBhArICPa6aY2IYHB/HwAnEhIbrYWObnv/LJEzXi0lNiy7m3PXoE7bEl7NEGVs0hittd5OjTgLT9sSa5/Wc9UXu23Xhwxnb24c3t1++f1k7duzbVb5uTMJtL9N/uANXsPf7Mb3qf19wLtQvOiBanK9IldjvCHfYwq+LQEop9W4R6qcbt4UqD6iQ2V+QkVRnmEslsYXOC2CKnuoYFi5r67Ko4Ve2zDikMu+IChQuuE6AXtzs0e2uLzSkI2+xognbp7kZRuYmETRUae1cJNJFIabUMNtdmFC405tSGuIKpUwti8WtsZSnInz8/f1PEz/QFluYhvwSxU6eO20hKWCGbHNdFy9PqG2bLy5jP/EoTPXIaKYnNa36X8gkHCg/gU2Gej0tus2lQiKlek1nwtLkTsgGEPephBgUzHZ4ECcCltS2NgCLZR2Y80l21TJTCpHyHSZr4UI5oKSiQi4uUYLW5SQ0eKCqSC9wj15uU8nJv9AhF5KXJP55lZz/7X/mBVZoheIUZpv6cHCs4ffpAcLlpu1SVLVVUSNmnlr6dUkgx2v1V2L2hXtMXDXcFT+jNY/IyC02m42gwXW7hlI8myTS2WoupHjiMh9A5a1qHrs6RPYI7zH1TJYNhgx2KaRdVaLo55gEAfL/Gy1lATvWNHwyZx8zDzP+0nRyTC1M7Ayf/W4gf8tibluRwCvgec8jU+KeIxaL/lbpNiMjdMMD5mCyW/FddH8lC3yPBIoA/Uo7T9xCaiyoJRqE1JINYfYOaFEQXXoJONBIGIwssZtHph1DCGCkT4PYEIIK8gApwDpggbzTHf0Anwg/0gvxBoMb2YqKMyAKFzGAO6R2qjHoeaU2+7A6Lc8vUUPyESlcYBddyutkEe1R7HKIvhWcMB66og1i9HbYtgVBUY2as0hjh2zYf+xYro24QUBBjoBxI3YFKhvR4imzav28HFc5ajBKiTw5Fs5CWBy6LI0Anql409EI21y4KHsPgvBunkA6IXQdqwxQBYny7GsoYlnJDQvDZhMSlKuv0mu7tnYMleFIFJYxwogP/NapJSR1OdUYKBwMAAA==') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
  content: "\e7ae";
}

.icon-home:before {
  content: "\ea0e";
}

.icon-score:before {
  content: "\ea46";
}
</style>

结果页面代码：

<template>
	<view class="content">
		<image class="head_img" src="@/static/index/head.jpg"></image>
		<image class="t_img" src="@/static/second/second_basic_t.png"></image>
		<view class="basic_info">
			<view class="row">
				<view class="row">
					<view class="title">姓氏</view>
					<view class="value">{{nameRes.xingShi}}</view>
				</view>
				<view class="row">
					<view class="title">性别</view>
					<view class="value">{{nameRes.sex}}</view>
				</view>
			</view>
			<view class="row">
				<view class="title">阳历生日</view>
				<view class="value">{{nameRes.birthYang}}</view>
			</view>
			<view class="row">
				<view class="title">农历生日</view>
				<view class="value">{{nameRes.birthYin}}</view>
			</view>
			<view class="row">
				<view class="title">生辰八字</view>
				<view class="value">{{nameRes.bazi}}</view>
			</view>
		</view>
		<image class="t_img" src="@/static/second/second_bazi_t.png"></image>
		<view class="basic_info">
			<text class="self-ming">按八字理论，本命属 {{nameRes.selfWuXing}}（{{nameRes.selfNaYin}}）</text>
			<view class="row mt-10">
				<view class="title w-20"></view>
				<view class="title w-20">年柱</view>
				<view class="title w-20">月柱</view>
				<view class="title w-20">日柱</view>
				<view class="title w-20">时柱</view>
			</view>
			<view class="row">
				<view class="title w-20">八字</view>
				<view class="value w-20">{{nameRes.yearBaZi}}</view>
				<view class="value w-20">{{nameRes.monthBaZi}}</view>
				<view class="value w-20">{{nameRes.dayBaZi}}</view>
				<view class="value w-20">{{nameRes.timeBaZi}}</view>
			</view>
			<view class="row">
				<view class="title w-20">五行</view>
				<view class="value w-20">{{nameRes.yearWuXing}}</view>
				<view class="value w-20">{{nameRes.monthWuXing}}</view>
				<view class="value w-20">{{nameRes.dayWuXing}}</view>
				<view class="value w-20">{{nameRes.timeWuXing}}</view>
			</view>
			<view class="row">
				<view class="title w-20">纳音</view>
				<view class="value w-20">{{nameRes.yearNaYin}}</view>
				<view class="value w-20">{{nameRes.monthNaYin}}</view>
				<view class="value w-20">{{nameRes.dayNaYin}}</view>
				<view class="value w-20">{{nameRes.timeNaYin}}</view>
			</view>
		</view>
		<image class="t_img" src="@/static/second/second_qr_t.png"></image>
		<view class="basic_info">
			<view class="row">
				<view class="title w-20">五行</view>
				<view class="value w-16">木</view>
				<view class="value w-16">火</view>
				<view class="value w-16">土</view>
				<view class="value w-16">金</view>
				<view class="value w-16">水</view>
			</view>
			<view class="row">
				<view class="title w-20">强弱</view>
				<view class="value w-16">{{nameRes.wuXingScoreMap.mu}}</view>
				<view class="value w-16">{{nameRes.wuXingScoreMap.huo}}</view>
				<view class="value w-16">{{nameRes.wuXingScoreMap.tu}}</view>
				<view class="value w-16">{{nameRes.wuXingScoreMap.jin}}</view>
				<view class="value w-16">{{nameRes.wuXingScoreMap.shui}}</view>
			</view>
			<view class="row col">
				<view class="p-8">
					<text class="wx-text">同类五行：{{join( nameRes.sameWuXing, '、' )}}, 得分 <text class="red"> {{nameRes.sameScore}}</text></text>
				</view>
				<view class="p-8">
					<text class="wx-text">异类五行：{{join( nameRes.unsameWuXing, '、' )}}, 得分 <text class="red"> {{nameRes.unsameScore}}</text></text>
				</view>
				<view class="p-8">
					<text class="wx-text">结合五行强弱情况分析，<text class="red"> {{nameRes.xiYongShen}}</text>为本命的【喜神】，<text class="red"> {{nameRes.ciYongShen}}</text>为本命的【用神】</text>
				</view>
				<view class="p-8">
					<text class="wx-text">起名时应该优先考虑五行属性为 <text class="red"> {{nameRes.xiYongShen}}</text> 和 <text class="red"> {{nameRes.ciYongShen}}</text>的字为佳，好的名字陪伴宝宝一生！</text>
				</view>
			</view>
		</view>
		
		<image class="t_img" src="@/static/second/second_name_t.png"></image>
		<view class="name_info">
			<view class="a-name-line" v-for="(item, index) in nameRes.nameList" :key="index">
				<view class="a-name-line-b">
					<view class="fraction">{{item.score.totalScore}}<text class="score-txt">分</text></view>
					<view class="zi-info">
						<view class="zi" v-if="item.xing.length == 1">{{item.xing}}</view>
						<view class="zi">{{item.name.split('')[0]}}</view>
						<view class="zi">{{item.name.split('')[1]}}</view>
					</view> 
					<view class="exp-info clear">
						<view class="wuge">
							<text class="">三才：</text>
							<text class="red">{{item.sanCai}}</text>
							<text class="ml-6">天格</text>
							<text class="red">{{item.score.tianGe}}</text>
							<text class="ml-6">地格</text>
							<text class="red">{{item.score.diGe}}</text>
							<text class="ml-6">人格</text>
							<text class="red">{{item.score.renGe}}</text>
							<text class="ml-6">总格</text>
							<text class="red">{{item.score.zongGe}}</text>
							<text class="ml-6">外格</text>
							<text class="red">{{item.score.waiGe}}</text>
						</view>
						<view class="ziyi">
							<text class="">性格标签：</text>
							<text class="tag" v-for="(itemx, idxx) in item.tags.split(' ')" :key="idxx">{{itemx}}</text>
							<text class="tag" v-if="nameRes.sex === '未出生'">适合{{item.forSex}}孩</text>
						</view>
						<view class="ziyi">
							<text class="">古语出处：</text>
							
							<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
								<rich-text :nodes="replace(item.sentence, item.name)"></rich-text>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || MP-BAIDU || H5 -->	
								<text v-html="replace(item.sentence, item.name)"></text>
							<!-- #endif -->
							
						</view>
					</view>
					<view class="readmore">
						<view class="read_more_mask"></view>
						<button class="rm-btn" hover-class="rm-btn-h" @click="showDetail(item.idx)">查看更多内容</button>
					</view>
				</view>	
			</view>
		
		</view>
		
		<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
		<view class="bottom-area" v-show="shouldShowPayUI">
			<button class="lock-btn" hover-class="lock-btn-h" @click="showPay"> 解锁 300+ 美名 </button>
		</view>
		<!-- #endif -->

		<view class="bottom-area" v-show="!shouldShowPayUI">
			<view class="nomore">—— 已经到底了 ——</view>
		</view>
		
		<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
		<pay v-show="shouldShowPay" @closePay="closePay" :priceItems="priceItemsAr"></pay>
		<!-- #endif -->
		
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import pay from "../../components/pay/mp-wx.vue";
	// #endif
	
	// #ifdef MP-BAIDU
	import pay from "../../components/pay/mp-bd.vue";
	// #endif
	
	// #ifdef MP-TOUTIAO || H5
	import pay from "../../components/pay/mp-tt.vue";
	// #endif
	
	export default {
		onShareAppMessage(res) {
		    return {
				title: '刚在诗经中给我家宝宝起了个好名字',
				path:  '/pages/index/index'
		    }
		},
		components: {
			pay
		},
		data() { 
			return {
				shouldShowPay: false,
				shouldShowPayUI: true,
				
				db:false,
				
				ad: {},
				
				nameRes: {},
				
				priceItemsAr: [],
				priceItemUrl: '/pay/app-items'
			}
		},
		onLoad(option) {
			
			if( option ) {
				if( option.pay ) {
					this.shouldShowPay = false;
					this.shouldShowPayUI = false;
				}
				if( option.db ) {
					this.db = option.db; 
				}
			}
			 
			this.loadPayItems();
			this.loadData();
			
			// 此处加载广告，广告播放完毕，跳转结果页
			// #ifdef MP-TOUTIAO
			this.ad = tt.createRewardedVideoAd({
				adUnitId: "gzsyd8m6440676q2tk",
			});
			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				switch (err.errCode) {
					case 1004:
					  // 无合适的广告, 尝试重新加载
					  this.ad.load();
					  this.ad.show();
					  break;
					default:
					// 更多请参考错 https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/component/open-capacity/ad/#%E5%B9%BF%E5%91%8A%E9%94%99%E8%AF%AF%E7%A0%81%E8%AF%B4%E6%98%8E 
				}
			});
				
			// 监听视屏播放完成
			this.ad.onClose((data) => {
				tt.hideLoading();
				if (data.isEnded) {
					uni.navigateTo({
						url:'result?id=' + this.subjectId + '&as=' + this.answerList.join(',')
					})
				} else {
					console.log("未观看完视频");
				}
			});
			
			// 预加载资源
			this.ad.load();
			// #endif	
		},
		methods: {			
			showAd() {
				// #ifdef MP-TOUTIAO
				this.ad.show();
				// #endif
			},
			loadMore() {
				
			},
			join(ar, sep) {
				var res = '';
				for(var i in ar) {
					res = res + ar[i];
					if( i < ar.length - 1 ) {
						res = res + sep;
					}
				}
				return res;
			},
			loadPayItems() {
				let that = this;
				uni.request({
					url: getApp().globalData.domain + that.priceItemUrl,
					method: 'POST',
					data: {
						uuid: getApp().globalData.uuid,
						ma: new Date().getDate() << 20
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						uni.setStorageSync(getApp().globalData.priceKey, res.data.result);
						that.priceItemsAr = res.data.result;
						console.log("price success");
					},
					fail(err) {
						console.log("price err");
					}
				});	
			},
			showPay() {
				this.shouldShowPay = true;
			},
			closePay() {
				this.shouldShowPay = false;
			},
			replace(txt, words) {
				var parts = txt.split('@');
				
				txt = parts[3];
				
				var ay = words.split('');
				for( var x in ay ) {
					txt = txt.replace(new RegExp(ay[x], 'g'), "<font style='color:#FF0000;'>" + ay[x] + "</font>");
				}
				return parts[0] + parts[1] + '《' + parts[2] + '》：' + txt;
			},
			showDetail(idx) {
				
				this.showAd()
				
				let item = null;
				let nameList = this.nameRes.nameList;
				for( var i in nameList ) {
					var nameItem = nameList[i];
					
					if( nameItem.idx == idx ) {
						item = nameItem;
						break;
					}
				}
				
				console.log('存储数据 ' + item);
				console.log(item);
				
				uni.setStorage({
					key: getApp().globalData.itemKey,
					data: item,
					success() {
						console.log('存储数据到 ' + getApp().globalData.itemKey);
						
						uni.navigateTo({
							url: '/pages/detail/detail?idx=' + idx
						})
					}
				})
			},
			loadData(){
				var that = this;
				
				this.nameRes.wuXingScoreMap = {};
				this.nameRes.sameWuXing = [];
				this.nameRes.unsameWuXing = [];
				
				new Promise(function(resolve, reject){
					uni.getStorage({ 
						key: that.db ? getApp().globalData.nameResKey2 : getApp().globalData.nameResKey,
						success(res) {
							resolve(res.data.data.data);
						}
					}); 
				}).then(function(res){
					that.nameRes = res;
				});
				
			}
			
		}
	}
</script>

<style>
	.name_info{
		padding: 8px;
	}
	.score-txt {
		font-size: 17px;
		margin-left: 6px;
	}
	.a-name-line {
		padding: 4px;
		border: 3px solid #897345;
		position: relative;
		margin-bottom: 22px;
	}
	.a-name-line-b {
	    border: 1px solid #897345;
	    height: 400px;
	    overflow: hidden;
	}
	.a-name-line-b .fraction {
	    width: 80px;
	    height: 50px;
		line-height: 50px;
		font-size: 1.5em;
	    background: #e55352;
	    color: #fff;
	    text-align: center;
	    position: absolute;
	    top: 25px;
	    right: -4px;
	    border-top-left-radius: 50px;
	    border-bottom-left-radius: 50px;
	}
	.zi-info {
		padding: 10px;
	}
	.zi-info .zi {
	    width: 65px;
	    height: 65px;
		float: left;
	    text-align: center;
	    line-height: 65px;
	    font-size: 40px;
	    font-weight: 700;
	    background: url("@/static/tian.png") no-repeat;
	    border: 1px solid #cacaca;
	    margin-right: 10px;
	    color: #333;
	}
	.exp-info {
	    margin: 0 10px;
	    padding: 5px;
	    position: relative;
	    top: 15px;
	    border: 1px solid #d4d4d4;
	    border-radius: 6px;
	}
	.clear {
		clear: both;
	}
	.exp-info .wuge {
		line-height: 30px;
	    padding: 8px 0;
	    border-bottom: 1px solid #D4D4D4;
	}
	.exp-info .ziyi {
		line-height: 30px;
	    padding: 8px 0;
	    border-bottom: 1px solid #D4D4D4;
	}
	.readmore {
	    position: absolute;
	    bottom: -35px;
	    width: 98%;
	    text-align: center;
	}
	.readmore .read_more_mask {
	    height: 220px;
	    background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0.4)),to(#fff));
	    background: -o-linear-gradient(bottom, rgba(255,255,255,.4), rgba(255,255,255,1));
		background:  -webkit-linear-gradient(top, rgba(255,255,255,.4) , rgba(255,255,255,.8) ,rgba(255,255,255,1));
	}
	.rm-btn {
	    border: 1px solid #ca0c16;
	    width: 240px;
	    height: 40px;
	    line-height: 40px;
	    cursor: pointer;
	    display: inline-block;
	    vertical-align: top;
	    border-radius: 5px;
	    color: #999999;
	    position: relative;
	    top: -60px;
		background-color: #FFFFFF;
	}
	.rm-btn-h {
		color: #888888;
	}
	.tag {
		padding: 5px 7px;
		font-size: 12px;
		background: #1575c7;
		margin-right: 4px;
		color: #fff;
		font-style: normal;
		border-radius: 6px;
	}
	.content {
		background-color: #F8F8F8;
	}
	.self-ming {
		color: #C0C0C0;
		padding: 8px;
		font-size: 15px;
	}
	.w-60 {
		width: 60px;
	}
	.row{
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
		
		display: flex;
		flex-direction: row;
	}
	.col {
		height: auto;
		display: flex;
		flex-direction: column;
	}
	.red {
		color: #FF0000;
		padding: 0 4px;
	}
	.wx-text{
		width: 100%;
		color: #999999;
		display: block;
		border-bottom: 1px solid #FFFFFF;
	}
	.nomore {
		color: #D6D6D6;
		font-size: 13px;
	}
	.title {
		font-weight: 600;
		width: 80px;
		text-align: center;
		background: #a08444;
	}
	.value {
		padding-left: 8px;
		width: calc( 100% - 80px );
		background: #c19943;
	}
	.head_img {
		width: 100%;
		height: 160px;
	}
	.t_img {
		width: 100%;
		height: 60px;
		margin-top: 20px;
	}
	.mt-30 {
		margin-top: 30px;
	}
	.mt-10 {
		margin-top: 10px;
	}
	.w-20 {
		width: 20%;
	}
	.w-16 {
		width: 16%;
	}
	.p-8{
		padding: 2px 8px;
	}
	.ml-6 {
		margin-left: 6px;
	}
	.qbutton {
		border: 0;
		width: 70%;
		text-align: content;
		height: 50px;
		line-height: 50px;
		font-size: 1.2rem;
		letter-spacing: .5rem;
		background: #977408;
		color: #fff;
		border-radius: 6px;
		margin-bottom: 15px;
	}
	.qbutton-h{
		background: #906622;
	}
	.bottom-area {
		text-align: center;
		padding: 20px 0 30px 0;
	}
	.lock-btn {
		color: #fff;
		width: auto !important;
		background: #e55352;
		text-align: center;
		padding: 0 45px;
		display: inline-block;
		border-radius: 5px;
	}
	.lock-btn-h {
		background: #e00652;
	}
</style>

【无忧美名网-一款根据诗经、古诗词等国学给宝宝起名的小程序-uniapp端】

悦读