zhangjing/sgy-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[水感应客户端最新]

Browse Source
This commit is contained in:
张慢慢
2023-06-21 17:14:39 +08:00
commit b3b4d4dae7
187 changed files with 12997 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
pages/index/assess/assess.js Normal file
View File

@@ -0,0 +1,235 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
data: {
barHeight : getApp().globalData.barHeight, // 状态栏高度
openId : '',
nameValue : '', // 姓名
testTitle : '',
nameStatus: false, // 姓名填写弹框
Analyze : '', // 是否交钱
disabled : false, // 支付按钮
payStatus : false, // 支付弹框
payPrice : '', // 支付金额
},
onLoad(options) {
this.setData({
openId: options.code
})
if(options) {
wx.login({
success: res => {
// 获取openid
this.openInfo(res.code)
}
})
}
},
onShow() {
// 判断是否可检测
this.ifAnalyze();
},
/**
* openid
*/
openInfo(code) {
wx.$api.auth.codeOpenid({code: code}).then(res => {
this.setData({
openId: res.data
})
}).catch(err => {})
},
/**
* 是否可检测
*/
ifAnalyze() {
wx.$api.index.analyze().then(res => {
if(res.data.is_first) {
this.setData({
testTitle: '首次免费，开始测肤'
})
} else if (res.data.is_first == false && res.data.analyze == false) {
this.setData({
testTitle: '支付' + res.data.price + '元，进行测肤'
})
} else if (res.data.is_first == false && res.data.analyze == true) {
this.setData({
testTitle: '您已付费，进行检测'
})
}
this.setData({
Analyze : res.data
})
if(!res.data.is_update) {
this.setData({
nameStatus: true
})
}
}).catch(err => {})
},
/*
姓名截取
*/
bindinput(e) {
this.setData({
nameValue: e.detail.value.substr(0,5)
})
},
/*
提交信息
*/
issueForm() {
wx.showLoading({
title: '信息提交中...',
mask : true
})
let data = {
name : this.data.nameValue
}
wx.$api.auth.userAdd(data).then(() => {
wx.hideLoading()
this.setData({
nameStatus: false
})
}).catch(err => {})
},
/**
* 开始皮肤检测
*/
goAnalyze() {
if(this.data.Analyze.is_first == false && this.data.Analyze.analyze == false) {
this.setData({
payStatus: true
})
} else {
this.uploadPhoto()
}
},
/**
* 上传图片信息
*/
uploadPhoto() {
wx.chooseMedia({
count : 1,
sourceType: ['camera'],
camera : 'front',
success : path => {
// 获取皮肤检测接口
wx.cropImage({
src: path.tempFiles[0].tempFilePath, // 图片路径
cropScale: '3:4', // 裁剪比例
success: res=> {
// 获取皮肤检测接口
this.checkEnter(res.tempFilePath);
},
complete: err => {}
})
}
})
},
/**
* 皮肤检测接口
*/
checkEnter(img) {
wx.$api.index.skinEnter({}, img).then(res => {
wx.redirectTo({
url: "/pages/report/detail/detail?image_id=" + res.image_id
})
})
},
/**
* 关闭支付弹窗
*/
cancelAnalyze() {
this.setData({
payStatus: false
})
},
/**
* 创建订单
*/
payFound() {
wx.$api.index.skinOrder().then(res => {
this.setData({
disabled : true
})
this.payBtn(res.data.order_id)
}).catch(err => {})
},
/**
* 确认支付1元
*/
payBtn(orderid) {
wx.showLoading({
title: '支付中...',
mask : true
})
wx.$api.index.skinPay(orderid,{type: 'miniapp', openid: this.data.openId}).then(res=>{
wx.hideLoading()
let payInfo = JSON.parse(res.data.wechat)
wx.requestPayment({
timeStamp: payInfo.timeStamp,
nonceStr : payInfo.nonceStr,
package : payInfo.package,
paySign : payInfo.paySign,
signType : payInfo.signType,
success : res=>{
if(res.errMsg == "requestPayment:ok"){
wx.showToast({
title: '支付成功',
icon : 'success'
})
}
this.setData({
payStatus: false
})
this.setData({
Analyze: false
})
this.uploadPhoto()
},
fail : err=>{
wx.showToast({
title: '支付失败',
icon : 'error'
})
this.setData({
disabled : false,
payStatus: false
})
}
})
}).catch(err => {
this.setData({
disabled : false,
payStatus: false
})
});
},
/**
* 返回上一页
*/
returnGo() {
wx.navigateBack({
delta: 1
})
},
})

4
pages/index/assess/assess.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationStyle": "custom"
}

75
pages/index/assess/assess.wxml Normal file
View File

@@ -0,0 +1,75 @@
<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
<image bindtap="returnGo" class="navigation-arrow" src="/static/icons/returnBlack.png"></image>
</view>
<!-- 顶部背景 -->
<view class="top">
<image class="top-back" src="https://api.shui.shuiganying.com/storage/images/2023/04/04/c90aba5bdbda96866f1b72c9fbee6cf9.jpg" mode="aspectFill"></image>
</view>
<!-- 内容 -->
<view class="seeCont">
<view class="seeCont-title">拍照注意事项</view>
<view class="seeCont-item">
<view class="seeCont-text">
<view class="seeCont-laebl">
<view class="seeCont-laebl-number">1</view>
<view class="seeCont-laebl-name">露出全脸</view>
<image src="https://api.shui.shuiganying.com/storage/images/2023/04/04/4fc50445d8947c58dbf2fc1e32f3f18f.png" class="seeCont-laebl-img"></image>
</view>
<view class="seeCont-laebl">
<view class="seeCont-laebl-number">2</view>
<view class="seeCont-laebl-name">保持素颜</view>
<image src="https://api.shui.shuiganying.com/storage/images/2023/04/04/f24b10c6124fa8e41a7198b15d60df92.png" class="seeCont-laebl-img"></image>
</view>
<view class="seeCont-laebl">
<view class="seeCont-laebl-number">3</view>
<view class="seeCont-laebl-name">光线柔和</view>
<image src="https://api.shui.shuiganying.com/storage/images/2023/04/04/505b9fa0366590839226f895588be596.png" class="seeCont-laebl-img"></image>
</view>
<view class="seeCont-laebl">
<view class="seeCont-laebl-number">4</view>
<view class="seeCont-laebl-name">合适角度距离</view>
<image src="https://api.shui.shuiganying.com/storage/images/2023/04/04/6d8d2a7cb6d10573124f248fb3daf4ba.png" class="seeCont-laebl-img"></image>
</view>
</view>
</view>
<view class="seeBtn">
<view class="seeBtn-btn" bindtap="goAnalyze">{{testTitle}}</view>
</view>
</view>
<!-- 是否有名称 -->
<view class="namePop {{nameStatus ? 'active' : ''}}"></view>
<view class="nameCont {{nameStatus ? 'active' : ''}}">
<view class="nameCont-white">
<view class="nameCont-top">
<view class="nameCont-title">请填写真实姓名</view>
<input class="nameCont-input" type="text" name="name" value="{{nameValue}}" placeholder="限制5个字符" bindinput="bindinput" />
</view>
<view class="nameCont-btn">
<view class="nameCont-btn-go" bindtap="returnGo">取消</view>
<view class="nameCont-btn-go" bindtap="issueForm">确定</view>
</view>
</view>
</view>
<!-- 支付弹出 -->
<view class="payEject {{payStatus ? 'active' : ''}}" catchtouchmove='true'></view>
<view class="payPop {{payStatus ? 'active' : ''}}" catchtouchmove='true'>
<view class="payPop-cont">
<view class="payPop-title">
<view class="payPop-title-name">AI测肤火爆进行中</view>
<view class="payPop-title-text">原价￥10/次，现价￥1/次即可享受并赠送水感应一年VIP权限！</view>
</view>
<image class="payPop-cont-img" src="https://api.shui.shuiganying.com/storage/images/2023/04/04/08be4dfc2d3294a8079d34fecfcc6771.png" mode="widthFix"></image>
<view class="payPop-price">￥1.00</view>
<view class="payPop-btn">
<view class="payPop-btn-go" bindtap="payFound" wx:if="{{!disabled}}">立即支付</view>
<view class="payPop-btn-go active" wx:else>立即支付</view>
<view class="payPop-btn-cancel" bindtap="cancelAnalyze">取消</view>
</view>
</view>
</view>

344
pages/index/assess/assess.wxss Normal file
View File

@@ -0,0 +1,344 @@
page {
background-color: #f7faff;
}
/* 返回 */
.navigation{
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 90rpx;
background-color: transparent;
transition: .2s;
}
.navigation.active {
background-color: #ffffff;
}
.navigation-arrow {
width: 44rpx;
height: 44rpx;
margin: 20rpx 15rpx 0 20rpx;
}
/* 顶部背景 */
.top {
width: 100%;
position: relative;
height: 100vh;
overflow: hidden;
}
.top-back {
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 1;
}
/* 内容 */
.seeCont {
position: absolute;
top: 10%;
z-index: 100;
width: 100%;
padding: 80rpx 30rpx;
box-sizing: border-box;
}
.seeCont-title {
text-align: center;
font-size: 42rpx;
}
.seeCont-item {
margin-top: 60rpx;
position: relative;
width: 100%;
height: 700rpx;
}
.seeCont-item::after {
border-radius: 15rpx;
position: absolute;
content: '';
background-color: #ffffff;
width: 100%;
height: 100%;
opacity: .6;
left: 0;
top: 0;
}
.seeCont-text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
padding: 60rpx;
box-sizing: border-box;
}
.seeCont-laebl {
display: flex;
line-height: 84rpx;
padding: 30rpx 0;
box-sizing: border-box;
position: relative;
}
.seeCont-laebl-number {
color: #3d7eff;
font-weight: 600;
font-size: 60rpx;
position: relative;
padding-right: 20rpx;
font-style:italic;
}
.seeCont-laebl-number::after {
position: absolute;
content: '';
right: 0;
top: 40rpx;
background-color: #3d7eff;
width: 4rpx;
height: 50rpx;
transform:skewX(-30deg);
}
.seeCont-laebl-name {
font-size: 34rpx;
padding-left: 60rpx;
}
.seeCont-laebl-img {
width: 84rpx;
height: 84rpx;
position: absolute;
right: 0;
top: 30rpx;
}
.seeBtn {
text-align: center;
width: 100%;
}
.seeBtn-btn {
background-color: #3d7eff;
display: inline-block;
color: #ffffff;
border-radius: 90rpx;
margin-top: 60rpx;
line-height: 90rpx;
padding: 0 80rpx;
}
/* 名字弹出 */
.namePop {
position: fixed;
background-color: rgba(0, 0, 0, .5);
left: 0;
top: 0;
height: 100vh;
width: 100vw;
z-index: 100000;
display: none;
}
.namePop.active {
display: block;
}
.nameCont {
-webkit-box-orient: vertical;
-webkit-box-pack: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100000;
padding: 0 15%;
box-sizing: border-box;
display: none;
}
.nameCont.active {
display: -webkit-box;
}
.nameCont-white {
background-color: #ffffff;
border-radius: 15rpx;
overflow: hidden;
}
.nameCont-top {
padding: 30rpx;
box-sizing: border-box;
}
.nameCont-title {
font-size: 34rpx;
margin-bottom: 30rpx;
}
.nameCont-input {
background-color: #f3f3f3;
height: 90rpx;
line-height: 90rpx;
border-radius: 10rpx;
padding: 0 25rpx;
box-sizing: border-box;
}
.nameCont-btn {
line-height: 100rpx;
background-color: #f3f3f3;
display: flex;
margin-top: 30rpx;
border-top: 2rpx solid #dfdfdf;
}
.nameCont-btn-go {
text-align: center;
flex: 2;
}
.nameCont-btn-go:last-child {
position: relative;
color: #ff9951;
}
.nameCont-btn-go:last-child::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 2rpx;
height: 100%;
background-color: #dfdfdf;
}
/* 支付弹出 */
.payEject {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .6);
z-index: 1000;
display: none;
}
.payEject.active{
display: block;
}
.payPop {
width: 84%;
position: fixed;
left: 8%;
top: 30%;
z-index: 10001;
height: 600rpx;
display: none;
}
.payPop.active{
display: block;
}
.payPop::after {
border-radius: 15rpx 200rpx 15rpx 15rpx;
position: absolute;
content: '';
background-color: #ffffff;
width: 100%;
height: 100%;
opacity: .6;
left: 0;
top: 0;
}
.payPop-cont {
width: calc(100% - 40rpx);
height: calc(100% - 40rpx);
position: absolute;
left: 20rpx;
top: 20rpx;
background-color: #ffffff;
border-radius: 15rpx 200rpx 15rpx 15rpx;
z-index: 10002;
padding: 30rpx;
box-sizing: border-box;
}
.payPop-title {
width: 100%;
padding-right: 150rpx;
box-sizing: border-box;
}
.payPop-title-name {
font-size: 46rpx;
color: #3d7eff;
margin-bottom: 20rpx;
font-weight: 600;
}
.payPop-title-text {
color: #666666;
line-height: 44rpx;
font-size: 26rpx;
}
.payPop-cont-img {
position: absolute;
top: -30rpx;
right: -20rpx;
width: 42%;
}
.payPop-price {
text-align: center;
font-size: 70rpx;
padding: 40rpx 0;
}
.payPop-btn {
text-align: center;
width: 100%;
}
.payPop-btn-go {
background-image: linear-gradient(to right, #4181fe, #689aff);
display: inline-block;
color: #ffffff;
border-radius: 90rpx;
line-height: 90rpx;
padding: 0 100rpx;
}
.payPop-btn-go.active {
background-image: linear-gradient(to right, #cacaca, #bdbdbd);
}
.payPop-btn-cancel {
color:#3d7eff;
text-align: center;
padding-top: 30rpx;
}

116
pages/index/index.js Normal file
View File

@@ -0,0 +1,116 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
data: {
payCode : '', // code获取openid
openId : '', // openid
userLogin : false, // 是否登录
testTitle : '', // 检测文字
disabled : false, // 支付按钮
payStatus : false, // 支付弹框
catchtouchmove: false
},
onLoad(options) {
if(options.invite != undefined) {
getApp().globalData.inviteText = options.invite
}
},
onShow() {
wx.login({
success: res => {
this.setData({
payCode: res.code
})
// 获取openid
this.openInfo()
}
})
// 获取登录状态
if(wx.getStorageSync("token") != ''){
this.setData({
userLogin: true
})
// 是否可检测
this.ifAnalyze();
return
}
this.setData({
userLogin: false
})
},
/**
* openid
*/
openInfo() {
wx.$api.auth.codeOpenid({code: this.data.payCode}).then(res => {
this.setData({
openId: res.data
})
}).catch(err => {})
},
/**
* 是否可检测
*/
ifAnalyze() {
wx.$api.index.analyze().then(res => {
if(res.data.is_first) {
this.setData({
testTitle: '首次免费，开始测肤'
})
} else if (res.data.is_first == false && res.data.analyze == false) {
this.setData({
testTitle: '支付' + res.data.price + '元，进行测肤'
})
} else if (res.data.is_first == false && res.data.analyze == true) {
this.setData({
testTitle: '您已付费，进行检测'
})
}
this.setData({
Analyze : res.data
})
if(!res.data.is_update) {
this.setData({
nameStatus: true
})
}
}).catch(err => {})
},
/**
* 处理未登录时的转跳
*/
assessGo(){
if(wx.getStorageSync("token") != ''){
wx.navigateTo({
url: '/pages/index/assess/assess?code='
})
return
}
// 去登录
wx.navigateTo({
url: "/pages/login/index?type=indexDemo"
})
},
/**
* 微信分享
*/
onShareAppMessage(){
return {
title : '水感应',
path : "/pages/index/index?invite=" + wx.getStorageSync("invite")
}
},
})

4
pages/index/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationStyle": "custom"
}

30
pages/index/index.wxml Normal file
View File

@@ -0,0 +1,30 @@
<!-- 第一屏幕 -->
<!-- bindtap="assessGo" -->
<view class="indexBack">
<image class="indexBack-img" src="https://cdn.shuiganying.com/images/2023/05/17/d8be509c6ce2bd268967388621bc095a.png"></image>
<view class="indexText">
<view class="indexText-name">下滑了解详情</view>
<image class="indexText-arrow" src="https://cdn.shuiganying.com/images/2023/05/16/d323c1a5d97c0c566126e3a2ff7f1827.png"></image>
</view>
</view>
<!-- 漂浮窗 -->
<view class="wander" bindtap="assessGo">
<view class="wander-cont">
<image class="wander-icon" src="https://cdn.shuiganying.com/images/2023/05/16/e69134d810039f1c9bfe9111036d92fb.png" mode="widthFix"></image>
<view class="wander-name">检测</view>
</view>
</view>
<!-- 单图 -->
<view class="indexSingle">
<image class="indexSingle-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/05/18/ac3182087d2607104409f3fc988514c6.gif"></image>
<image class="indexSingle-img" style="margin-top: -280rpx;" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/05/18/a6dee6dbb61b03ffe0ca55896a77a4d4.png"></image>
<image class="indexSingle-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/05/17/d6068c61ae3d4d3ec4eb6e598a746d3c.png"></image>
<image class="indexSingle-img" mode="widthFix" src="https://cdn.shuiganying.com/images/2023/05/17/88be57f403db19a0413b93045bd406d8.png"></image>
</view>
<view class="testBtn">
<image class="indexText-arrow" src="https://cdn.shuiganying.com/images/2023/05/16/a72e053db51bc68bed00168047d2cb3e.png"></image>
<view class="testBtn-go" bindtap="assessGo">{{userLogin ? testTitle : '立即开启皮肤检测'}}</view>
</view>

125
pages/index/index.wxss Normal file
View File

@@ -0,0 +1,125 @@
/* 漂浮窗 */
.wander {
position: fixed;
right: 0;
top: 26%;
background-color: #ffffff;
border-radius: 60rpx 0 0 60rpx;
height: 150rpx;
width: 120rpx;
}
.wander::after {
position: absolute;
left: -15rpx;
top: -15rpx;
background-color: rgba(255, 255, 255, .3);
content: '';
width: calc(100% + 30rpx);
height: calc(100% + 30rpx);
z-index: 0;
border-radius: 60rpx 0 0 60rpx;
}
.wander-cont {
padding: 25rpx 25rpx 25rpx 35rpx;
box-sizing: border-box;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
}
.wander-icon {
width: 54rpx;
}
.wander-name {
color: #12428f;
padding-top: 5rpx;
font-weight: 300;
font-size: 26rpx;
}
/* 第一屏幕 */
.indexBack {
position: relative;
width: 100%;
height: 100vh;
}
.indexBack-img {
position: absolute;
width: 100%;
height: 100%;
}
.indexText {
position: absolute;
bottom: 30rpx;
left: 0;
text-align: center;
width: 100%;
}
.indexText-name {
color: #fff;
display: inline-block;
border-radius: 50rpx;
text-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, .3);
font-size: 28rpx;
}
.indexText-arrow {
width: 36rpx;
height: 36rpx;
display: block;
margin: 15rpx auto 0;
animation: bounce-down 2s linear infinite;
}
@keyframes bounce-down {
25% {
transform: translateY(-4px);
}
50%,
100% {
transform: translateY(0);
}
75% {
transform: translateY(4px);
}
}
/* 步骤提示 */
.indexSingle {
width: 100%;
}
.indexSingle-img {
width: 100%;
display: block;
}
/* 按钮 */
.testBtn {
text-align: center;
}
.testBtn-go {
margin: 50rpx 0 100rpx;
background-image: linear-gradient(to right, #3d7dfe, #6b9fff);
border: 14rpx solid #bdd3ff;
display: inline-block;
color: #fff;
line-height: 90rpx;
width: 75%;
border-radius: 110rpx;
}