Skip to content

A
accord-with-name
Commit b75be606 authored by malin's avatar malin
Browse files
Options

test

parent c4c1f8be
Hide whitespace changes
Inline Side-by-side
Showing with 735 additions and 24 deletions
src/assets/css/font-color.css
View file @ b75be606
...@@ -6,6 +6,14 @@ ...@@ -6,6 +6,14 @@
color: #333; color: #333;
} }
.fc-21 {
color: #212121;
}
.fc-4c {
color: #4c4c4c;
}
.fc-6 { .fc-6 {
color: #666; color: #666;
} }
......
src/components/StatusBar/index.vue
View file @ b75be606
<template> <template>
<div> <div>
<div style="width: 100%; height: 0.36rem"></div> <div style="width: 100%; height: 0.36rem; background-color: #fff"></div>
<div class="status-bar"> <div class="status-bar">
<slot></slot> <slot></slot>
</div> </div>
...@@ -20,12 +20,20 @@ export default { ...@@ -20,12 +20,20 @@ export default {
mounted() { mounted() {
var top = document.querySelector(".status-bar").offsetTop; var top = document.querySelector(".status-bar").offsetTop;
let h =
window.screen.height - document.querySelector(".status-bar").clientHeight;
window.onscroll = (e) => { window.onscroll = (e) => {
if (window.pageYOffset >= top) { if (window.pageYOffset >= top) {
this.flag = false; this.flag = false;
} else { } else {
this.flag = true; this.flag = true;
} }
if (window.pageYOffset >= h) {
this.$emit("fixed");
} else {
this.$emit("deFixed");
}
}; };
}, },
}; };
......
src/router/index.js
View file @ b75be606
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import routes from './routes' import routes from './routes'
Vue.use(Router) Vue.use(Router)
export default new Router({ const router = new Router({
routes, routes,
mode: 'history' mode: 'history'
}) })
router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
});
export default router
\ No newline at end of file
src/service/api.js
View file @ b75be606
...@@ -6,7 +6,7 @@ axios.defaults.withCredentials = false // 设置axios不让携带cookie ...@@ -6,7 +6,7 @@ axios.defaults.withCredentials = false // 设置axios不让携带cookie
const reportUrl = "https://report.zhangxinhulian.com"; const reportUrl = "https://report.zhangxinhulian.com";
const payUrl = "https://zx-paytest.zhangxinzhixun.com"; const payUrl = "https://zx-paytest.zhangxinzhixun.com";
const request = (url, method, data_or_params = {}, form) => { const request = (url, method, data_or_params = {}, form, data) => {
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
data_or_params.tgyz = 1; //跳过验证 data_or_params.tgyz = 1; //跳过验证
data_or_params.tgtk = 1; //跳过token data_or_params.tgtk = 1; //跳过token
...@@ -18,7 +18,8 @@ const request = (url, method, data_or_params = {}, form) => { ...@@ -18,7 +18,8 @@ const request = (url, method, data_or_params = {}, form) => {
return axios({ return axios({
url: url, url: url,
method: method, method: method,
params: data_or_params params: data_or_params,
data
}); });
} else { } else {
if (method == "get") { if (method == "get") {
...@@ -42,9 +43,9 @@ const API = { ...@@ -42,9 +43,9 @@ const API = {
return request("/test", "get", data); return request("/test", "get", data);
}, },
// 创建订单 // 创建订单 将信息以请求体的形式传递给后端
API_createorder: function (data) { API_createorder: function (params, data) {
return request("/h5game/bbqm/createOrder", "post", data, 'form'); return request("/h5game/peidui/createOrder", "post", params, 'form', data);
}, },
// 获取支付价格 // 获取支付价格
...@@ -52,7 +53,7 @@ const API = { ...@@ -52,7 +53,7 @@ const API = {
return request("/app/v1/location/user/pay-config", "get", data); return request("/app/v1/location/user/pay-config", "get", data);
}, },
// 查询选牌结果 // 查询结果
API_orderdetail: function (data) { API_orderdetail: function (data) {
return request("/h5game/orderdetail", "get", data); return request("/h5game/orderdetail", "get", data);
}, },
...@@ -101,9 +102,9 @@ const API = { ...@@ -101,9 +102,9 @@ const API = {
); );
}, },
// 查询名字列表 // 获取结果信息
API_fetchName: function (data) { API_fetchInfo(params) {
return request('/h5game/bbqm/fetchNames', 'get', data) return request('/h5game/peidui/fetchInfo', 'GET', params, 'form')
} }
}; };
......
src/views/Home/child_cpn/AccordWithName.vue
View file @ b75be606
...@@ -28,7 +28,12 @@ ...@@ -28,7 +28,12 @@
</template> </template>
</div> </div>
<div class="in-name1 row-center-center"> <div class="in-name1 row-center-center">
<input class="input-text" type="text" placeholder="请输入姓名" /> <input
v-model="female"
class="input-text"
type="text"
placeholder="请输入姓名"
/>
</div> </div>
</div> </div>
...@@ -50,15 +55,26 @@ ...@@ -50,15 +55,26 @@
</template> </template>
</div> </div>
<div class="in-name2 row-center-center"> <div class="in-name2 row-center-center">
<input class="input-text" type="text" placeholder="请输入姓名" /> <input
v-model="male"
class="input-text"
type="text"
placeholder="请输入姓名"
/>
</div> </div>
</div> </div>
</div> </div>
<!-- 配对按钮 --> <!-- 配对按钮 -->
<div class="row-center-center" style="margin-top: 0.4rem"> <div class="row-center-center" style="margin-top: 0.4rem">
<div class="btn row-center-center fc-f fs-36 fw-5">开始配对</div> <div class="btn row-center-center fc-f fs-36 fw-5" @click="begin">
开始配对
</div>
</div> </div>
<template v-if="toast">
<div class="toast fc-f fs-28 ff-pp fw-5">请将信息填写完整</div>
</template>
</div> </div>
</template> </template>
...@@ -102,6 +118,9 @@ export default { ...@@ -102,6 +118,9 @@ export default {
id: 2, id: 2,
}, },
], ],
female: "",
male: "",
toast: false,
}; };
}, },
...@@ -125,6 +144,26 @@ export default { ...@@ -125,6 +144,26 @@ export default {
} }
}); });
}, },
// 开始配对
begin() {
if (this.male == "" || this.female == "") {
this.toast = true;
setTimeout(() => {
this.toast = false;
}, 1000);
return;
}
let params = {
info: [
{ gender: 1, name: this.male },
{ gender: 0, name: this.female },
],
};
this.$router.push({ path: "/pay", query: params });
},
}, },
}; };
</script> </script>
...@@ -201,4 +240,16 @@ export default { ...@@ -201,4 +240,16 @@ export default {
width: 80%; width: 80%;
outline: none; outline: none;
} }
.toast {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.1rem;
background-color: #000;
opacity: 0.4;
z-index: 2;
border-radius: 0.2rem;
}
</style> </style>
\ No newline at end of file
src/views/Home/index.vue
View file @ b75be606
<template> <template>
<div class="home"> <div class="home">
<statusBar> <statusBar>
<span>姓名契合</span> <span>趣味配对</span>
</statusBar> </statusBar>
<div class="home-body"> <div class="home-body">
<div class="img1-father"> <div class="img1-father">
<img class="img1" src="@/assets/img/home/img1.png" alt="" /> <img class="img1" src="@/assets/img/home/img1.png" alt="" />
<accrod-with-name class="component-name" /> <accrod-with-name ref="accord" class="component-name" />
</div> </div>
<div class="img2-father row-center-center"> <div class="img2-father row-center-center">
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
</div> </div>
<div class="row-center-center fc-f fs-36 fw-5 btn-father"> <div class="row-center-center fc-f fs-36 fw-5 btn-father">
<div class="btn row-center-center">开始配对</div> <div class="btn row-center-center" @click="begin">开始配对</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -79,6 +79,24 @@ export default { ...@@ -79,6 +79,24 @@ export default {
StatusBar, StatusBar,
AccrodWithName, AccrodWithName,
}, },
methods: {
begin() {
if (this.$refs.accord.male == "" || this.$refs.accord.female == "") {
window.scrollTo(0, window.screen.height / 2);
return;
} else {
let params = {
info: [
{ gender: 1, name: this.$refs.accord.male },
{ gender: 0, name: this.$refs.accord.female },
],
};
this.$router.push({ path: "/pay", query: params });
}
},
},
}; };
</script> </script>
......
src/views/Pay/child_cpn/PayInfo.vue 0 → 100644
View file @ b75be606
<template>
<div class="pay-info">
<div class="img2-father row-center-center">
<img class="img2" src="@/assets/img/pay/img2.png" alt="" />
</div>
<div class="row-around-center ff-pp fw-5 fs-32" style="margin-top: 0.28rem">
<div class="col-center-center">
<img class="img3" src="@/assets/img/pay/img3.png" alt="" />
<span style="margin: 0.2rem 0 0.1rem 0">{{
$route.query.info ? $route.query.info[0].name : "xxx"
}}</span>
<span class="fs-24 fc-21 fw-4">男主角</span>
</div>
<div>
<img class="img-hert" src="@/assets/img/pay/hert.png" alt="" />
</div>
<div class="col-center-center">
<img class="img4" src="@/assets/img/pay/img4.png" alt="" />
<span style="margin: 0.2rem 0 0.1rem 0">{{
$route.query.info ? $route.query.info[1].name : "xxx"
}}</span>
<span class="fs-24 fc-21 fw-4">女主角</span>
</div>
</div>
<div
class="fs-28 fc-sys5 ff-pp fw-4 row-center-center"
style="margin-top: 0.36rem"
>
匹配契合度
</div>
<div class="img5-father row-center-center">
<img class="img5" src="@/assets/img/pay/img5.png" alt="" />
</div>
<div class="img6-father row-center-center">
<img class="img6" src="@/assets/img/pay/img6.png" alt="" />
</div>
<!-- 支付信息 -->
<div class="row-around-center fc-6" style="margin-top: 0.38rem">
<div>
<div class="fs-28" style="margin-bottom: 0.12rem">
特惠价：<span class="fc-sys2">￥{{ cash }}</span>
</div>
<div class="fs-24" style="text-decoration: line-through">
原价：￥{{ originalPrice }}
</div>
</div>
<div>
<span class="fs-24" style="margin-bottom: 0.12rem">优惠倒计时：</span>
<div class="fs-32">
<span class="hour fc-f">{{ hour }}</span>
<span>:</span>
<span class="minute fc-f">{{ minute }}</span>
<span>:</span>
<span class="second fc-f">{{ second }}</span>
</div>
</div>
</div>
<!-- 支付按钮 -->
<div
class="row-center-center fc-f fs-36 ff-pp fw-5"
style="margin-top: 0.66rem"
>
<div ref="payBtn" class="pay-btn row-center-center" @click="_payment">
立即支付
</div>
</div>
<div class="row-center-center">
<div class="test row-center-center fs-28 fc-6 fw-4 ff-pp">
<div>
已有<span class="fc-sys2">1597325</span>
人进行了测算，测算结果帮助他们掌握
了正确的求爱方式，找到了自己的真爱，<span class="fc-sys2">96.7%</span>
的客户对测算结果表示满意。
</div>
</div>
</div>
</div>
</template>
<script>
import API from "@/service/api";
import utils from "@/utils";
export default {
data() {
return {
cash: 48,
originalPrice: 188,
hour: "00",
minute: "00",
second: "00",
};
},
mounted() {
let endTime = new Date().getTime() + 0.5 * 60 * 60 * 1000;
let timer = setInterval(() => {
this.showtime(endTime);
if (new Date().getTime() >= endTime) {
clearInterval(timer);
this.hour = "00";
this.minute = "00";
this.second = "00";
}
}, 1000);
},
methods: {
// 支付
async _payment() {
let params_createorder = {
zygt: "hzwz",
tgtk: 1,
uid: 122193,
pkg: "com.h5game.peidui",
source: "toutiao",
};
// 获取订单号
let res_order = await API.API_createorder(
params_createorder,
this.$route.query.info
);
const orderId = res_order.result.data.orderId;
const baseInfo = res_order.result.data.baseInfo;
utils.setCookie("orderId", orderId, 0); // 将orderId放入cookie中
utils.setCookie("baseInfo", JSON.stringify(baseInfo), 0);
// 支付
API.API_gatewayCreateorder({
payPlatform: 1,
payType: 2,
wxType: "H5Page",
orderType: 5,
pkg: h5LogsObj.pkg,
// pkg: h5LogsObj.pkg ? h5LogsObj.pkg : "com.h5game.bbqm",
outTradeNo: orderId,
totalFee: 1,
}).then((res) => {
let mwebUrl = res.result.data.wakeup.mwebUrl;
let tempUrl = window.location.href;
tempUrl = tempUrl.replace("pay", "result");
window.location.href = `${mwebUrl}&redirect_url=${tempUrl}?pay_cb=1`;
});
},
// 倒计时
showtime(endTime) {
let nowTime = new Date().getTime();
let final = endTime - nowTime;
this.hour = Math.floor((final / (1000 * 60 * 60)) % 24); //计算小时数
this.hour = this.hour < 10 ? "0" + this.hour : this.hour;
this.minute = Math.floor((final / (1000 * 60)) % 60); //计算分钟数
this.minute = this.minute < 10 ? "0" + this.minute : this.minute;
this.second = Math.floor((final / 1000) % 60); //计算秒数
this.second = this.second < 10 ? "0" + this.second : this.second;
},
},
};
</script>
<style scoped>
.pay-info {
width: 7.5rem;
min-height: 10.1rem;
background-color: #fff;
border-radius: 0 0 0.2rem 0.2rem;
position: relative;
/* display: flex; */
}
.img2-father {
width: 100%;
height: 0.36rem;
padding: 0.22rem 0;
border-bottom: 0.02rem solid #dadada;
}
.img2 {
width: 5.04rem;
height: 0.36rem;
}
.img3,
.img4 {
width: 0.4rem;
height: 0.4rem;
}
.img-hert {
width: 1.22rem;
height: 0.88rem;
}
.img5-father {
width: 100%;
height: 0.4rem;
margin-top: 0.2rem;
}
.img5 {
width: 2.9rem;
height: 0.4rem;
}
.img6-father {
width: 100%;
padding: 0.22rem 0;
margin-top: 0.6rem;
border-bottom: 0.02rem solid #dadada;
border-top: 0.02rem solid #dadada;
}
.img6 {
width: 5.04rem;
height: 0.36rem;
}
.hour,
.minute,
.second {
display: inline-block;
width: 0.5rem;
height: 0.52rem;
background-color: #fa004b;
border-radius: 0.04rem;
line-height: 0.52rem;
text-align: center;
}
.pay-btn {
width: 6.7rem;
height: 1rem;
border-radius: 0.5rem;
background-color: #fa004b;
}
.test {
width: 6.78rem;
height: 1.52rem;
margin-top: 0.36rem;
margin-bottom: 0.28rem;
border: 0.02rem solid #ffb3d0;
border-radius: 0.24rem;
padding: 0.16rem;
line-height: 0.4rem;
}
</style>
\ No newline at end of file
src/views/Pay/index.css
View file @ b75be606
.pay {
width: 100%;
background-color: #FFE0EC;
}
.img1-father {
width: 7.5rem;
height: 3rem;
}
.img1 {
width: 7.5rem;
height: 3rem;
}
.content-box {
width: 6.9rem;
max-height: 21.98rem;
background: linear-gradient(180deg, #FEF7FA 0%, #FEECF4 100%);
margin-top: 0.4rem;
box-shadow: 0.02rem 0.02rem 0.12rem 0px rgba(0,0,0,0.15);
padding: 0.2rem;
}
.content-box>div {
width: 100%;
height: 100%;
border: 0.03rem solid #E4BBB0;
}
.content-box>div>div {
width: 6.4rem;
height: 3.14rem;
border: 0.01rem dashed #ff3366;
position: relative;
margin-top: 0.2rem;
}
.content-box>div>img {
margin-top: 0.4rem;
width: 4.08rem;
height: 0.34rem;
}
.img17 {
width: 5.76rem;
height: 2.94rem;
}
.img14,.img15, .img12, .img13, .img16 {
width: 6.2rem;
height: 1.92rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn {
width: 100%;
height: 1rem;
background-color: #FA004B;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
\ No newline at end of file
src/views/Pay/index.vue
View file @ b75be606
<template> <template>
<div>pay</div> <div class="pay">
<status-bar @fixed="is_show_btn = true" @deFixed="is_show_btn = false">
<span>趣味配对</span>
</status-bar>
<div class="img1-father">
<img class="img1" src="@/assets/img/pay/img1.png" alt="" />
</div>
<!-- 支付信息 -->
<pay-info />
<!-- 内容 -->
<div class="row-center-center">
<div class="content-box row-center-center" style="margin-bottom: 1.4rem">
<div class="col-start-center">
<img class="img7" src="@/assets/img/pay/img7.png" alt="" />
<div class="row-center-center">
<img class="img17" src="@/assets/img/pay/img17.png" alt="" />
<img class="img14" src="@/assets/img/pay/img14.png" alt="" />
</div>
<img class="img8" src="@/assets/img/pay/img8.png" alt="" />
<div class="row-center-center">
<img class="img17" src="@/assets/img/pay/img17.png" alt="" />
<img class="img15" src="@/assets/img/pay/img15.png" alt="" />
</div>
<img class="img9" src="@/assets/img/pay/img9.png" alt="" />
<div class="row-center-center">
<img class="img17" src="@/assets/img/pay/img17.png" alt="" />
<img class="img12" src="@/assets/img/pay/img12.png" alt="" />
</div>
<img class="img10" src="@/assets/img/pay/img10.png" alt="" />
<div class="row-center-center">
<img class="img17" src="@/assets/img/pay/img17.png" alt="" />
<img class="img16" src="@/assets/img/pay/img16.png" alt="" />
</div>
<img class="img11" src="@/assets/img/pay/img11.png" alt="" />
<div class="row-center-center" style="margin-bottom: 0.36rem">
<img class="img17" src="@/assets/img/pay/img17.png" alt="" />
<img class="img13" src="@/assets/img/pay/img13.png" alt="" />
</div>
</div>
</div>
</div>
<!-- 支付按钮 -->
<div
v-show="is_show_btn"
class="btn row-center-center fc-f ff-pp fw-5 fs-36"
>
付费查看全部解析
</div>
</div>
</template> </template>
<script> <script>
export default {}; import StatusBar from "@/components/StatusBar";
import PayInfo from "./child_cpn/PayInfo";
export default {
components: {
StatusBar,
PayInfo,
},
data() {
return {
is_show_btn: false,
};
},
};
</script> </script>
<style> <style scoped src='./index.css'>
</style> </style>
\ No newline at end of file
src/views/Result/index.css 0 → 100644
View file @ b75be606
.result {
width: 100%;
position: relative;
background: linear-gradient(180deg, #FFF2F7 0%, #FFB3D0 100%)
}
.banner {
width: 7.5rem;
height: 5.8rem;
position: relative;
}
.img1 {
width: 7.5rem;
height: 5.8rem;
}
.img2 {
width: 3.72rem;
height: 3.22rem;
position: absolute;
top: 0.34rem;
left: 50%;
transform: translateX(-50%);
}
.content {
width: 6.9rem;
/* height: 23.74rem; */
min-height: 100vh;
box-shadow: 0.02rem 0.02rem 0.12rem 0 rgba(0,0,0,0.15);
margin-top: 0.4rem;
padding: 0.2rem;
margin-bottom: 0.38rem;
background: linear-gradient(180deg, #FEF7FA 0%, #FEECF4 100%);
}
.content>div {
width: 100%;
/* height: 100%; */
min-height: 100vh;
border: 0.03rem solid #E4BBB0;
padding: 0.3rem;
box-sizing: border-box;
}
.img-father {
margin-top: 0.5rem;
margin-bottom: 0.15rem;
}
.img- {
width: 4.48rem;
height: 0.34rem;
}
.ln {
line-height: 0.4rem;
}
.rate {
margin-bottom: 0.4rem;
margin-top: 0.24rem;
}
\ No newline at end of file
src/views/Result/index.vue
View file @ b75be606
<template> <template>
<div>result</div> <div class="result">
<status-bar>
<span>趣味配对</span>
</status-bar>
<div class="banner">
<img class="img1" src="@/assets/img/result/img1.png" alt="" />
<img class="img2" src="@/assets/img/result/img2.png" alt="" />
</div>
<div class="row-center-center">
<div class="content">
<div class="fs-28 fc-6 ff-pp fw-4">
<template v-if="is_result">
<div class="desc">
<div class="rate row-center-center fc-sys5 fs-40 fw-5">
{{ result.rate }}契合度
</div>
<div class="fc-4c fs-32 fw-4" style="margin-bottom: 0.12rem">
{{ baseInfo[0].name + "&" + baseInfo[1].name }}
</div>
<div class="ln">{{ result.desc }}</div>
</div>
<div>
<div class="row-center-center img-father">
<img class="img-" src="@/assets/img/result/img3.png" alt="" />
</div>
<div class="ln">
{{ result.man }}
</div>
</div>
<div>
<div class="row-center-center img-father">
<img class="img-" src="@/assets/img/result/img4.png" alt="" />
</div>
<div class="ln">
{{ result.female }}
</div>
</div>
<div>
<div class="row-center-center img-father">
<img class="img-" src="@/assets/img/result/img5.png" alt="" />
</div>
<div class="ln">
{{ result.both }}
</div>
</div>
<div>
<div class="row-center-center img-father">
<img class="img-" src="@/assets/img/result/img6.png" alt="" />
</div>
<div class="ln">
{{ result.marryChange }}
</div>
</div>
<div>
<div class="row-center-center img-father">
<img class="img-" src="@/assets/img/result/img7.png" alt="" />
</div>
<div class="ln">{{ result.sugg }}</div>
</div>
</template>
<template v-else>
<div class="row-center-center">支付完成后延迟2s左右</div>
</template>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default {}; import StatusBar from "@/components/StatusBar";
import API from "@/service/api";
import utils from "@/utils";
export default {
components: {
StatusBar,
},
data() {
return {
is_result: false,
result: {},
baseInfo: [],
counter: 0,
countdown: 0,
};
},
mounted() {
const n = JSON.parse(utils.getCookie("baseInfo"));
this.baseInfo = n ? n : ["name", "name"];
this._queryOrder();
this._fetchInfo();
},
methods: {
// 网络请求，获取支付结果
_fetchInfo() {
const orderId = utils.getCookie("orderId");
let params = {
pkg: "com.h5game.peidui",
orderId: "1380344238578814976",
};
API.API_fetchInfo(params).then((res) => {
if (res.status != 200) {
setTimeout(() => {
this.counter += 1;
if (this.counter >= 80) {
return;
} else {
this.is_result = false;
return this._fetchInfo();
}
}, 2000);
return;
} else {
this.result = res.result.data;
this.is_result = true;
}
});
},
// 网络请求，当支付失败时，跳转到支付页面
_queryOrder() {
let orderId = utils.getCookie("orderId");
let h5LogsObj = JSON.parse(decodeURI(utils.getCookie("h5LogsObj")));
let params = {
outTradeNo: orderId,
payPlatform: 1,
payType: 2,
wxType: "H5Page",
// pkg: h5LogsObj.pkg
pkg: "com.h5game.peidui",
};
API.API_gatewayQueryOrder(params).then((res) => {
let status = res.result.data.status;
if (status == 200) {
return;
} else {
// 支付不成功
setTimeout(() => {
if (this.countdown == 1) {
return this.$router.push({ path: "/pay", query: this.baseInfo });
}
this.countdown += 1;
this._queryOrder();
}, 2000);
}
});
},
},
};
</script> </script>
<style> <style scoped src='./index.css'>
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment