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

314
pages/mall/details/details.js Normal file
View File

@@ -0,0 +1,314 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
data: {
isFixedTop : 0,
barHeight : getApp().globalData.barHeight, // 状态栏高度
goodsId : '', // 产品id
mallData : '', // 产品信息
mallContent: '', // 产品简介
shareSee : false, // 分享弹出
inviteText : '', // 自己的邀请码
isParent : false, // 绑定邀请码
nameValue : '', // 上级邀请码
},
onLoad(options) {
if(options.invite != undefined) {
getApp().globalData.inviteText = options.invite
}
this.setData({
goodsId: options.id
})
// 初始化画布
wx.createSelectorQuery().select('#coverCanvas').fields({node: true, size: true}).exec(canvasNode => {
const canvas = canvasNode[0].node
canvas.width = 375
canvas.height = 600
this.setData({
canvas
})
})
},
onShow() {
// 获取产品详情
this.mallInfo();
// 获取登录状态
if(wx.getStorageSync("token") != ''){
// 小程序码
this.ShareInfo();
}
},
/**
* 产品详情
*/
mallInfo (){
wx.$api.mall.mallSee(this.data.goodsId).then(res => {
this.setData({
mallData : res.data,
mallContent : res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
})
}).catch(err => { })
},
/**
* 确认购买
*/
buyTap() {
// 获取登录状态
if(wx.getStorageSync("token") != ''){
if(this.data.mallData.is_parent == true) {
wx.navigateTo({
url: '/pages/mall/confirm/confirm?goodsid=' + this.data.mallData.goods_id + '&skuid=' + this.data.mallData.skus[0].sku_id + '&qty=1',
})
return
}
// 显示绑定邀请码弹窗
this.setData({
isParent: true
})
}else{
// 去登录
wx.navigateTo({
url: "/pages/login/index"
})
}
},
/**
* 小程序码
*/
ShareInfo() {
wx.$api.user.miniShare({
url: '/pages/index/index'
}).then(res => {
this.setData({
inviteCode: res.data.qrcode
})
}).catch(err => {})
},
/**
* 分享弹出
*/
shareTap() {
// 获取登录状态
if(wx.getStorageSync("token") != ''){
this.setData({
shareSee: !this.data.shareSee
})
}else{
// 去登录
wx.navigateTo({
url: "/pages/login/index"
})
}
},
/**
* 生成海报
*/
onCanvas(){
wx.showLoading({
title: '生成图片中...',
mask : true
})
const canvas = this.data.canvas
const ctx = canvas.getContext('2d')
const codeImgEl = canvas.createImage()
const backBackEl = canvas.createImage()
codeImgEl.src = this.data.inviteCode //二维码
backBackEl.src = this.data.mallData.cover //产品分享图片
const codeImgLoding = new Promise((resolve, reason) => {
codeImgEl.onload = () => {
resolve()
}
})
const backBackLoding = new Promise((resolve, reason) => {
backBackEl.onload = () => {
resolve()
}
})
Promise.all([codeImgLoding, backBackLoding]).then(() => {
// 绘制[二维码-白色背景]
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, 375, 540);
ctx.drawImage(backBackEl, 0, 0, 375, 375)
// 绘制[二维码]
ctx.drawImage(codeImgEl, 270, 440, 80, 80)
// 产品名称
ctx.font = "24px Arial"; //字体大小
ctx.fillStyle = "#000000"; //字体颜色
ctx.fillText(this.data.mallData.name, 25, 420);
// 产品价格
ctx.font = "bold 36px Arial"; //字体大小
ctx.fillStyle = "#3b7cff"; //字体颜色
ctx.fillText(this.data.mallData.price.price, 25, 480);
// 海报文字提示
ctx.font = "18px Arial"; //字体大小
ctx.fillStyle = "#b3b3b3"; //字体颜色
ctx.fillText('识别二维码进行查看', 25, 510);
wx.hideLoading()
wx.canvasToTempFilePath({
canvas: this.data.canvas,
success : res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: saveRes => {
wx.showToast({
title: '海报已保存至您的相册',
icon : 'none'
})
this.setData({
shareSee: false
})
},
fail: () => {
this.setData({
shareSee: false
})
wx.hideLoading()
wx.showModal({
title: '提示',
content: '暂未授权小程序写入您的相册，无法存储海报',
confirmColor: '#e50d01',
confirmText: '去设置',
success: res => {
if (res.confirm) {
wx.openSetting()
}
}
})
}
})
},
})
}).catch(err => {
wx.showToast({
title: '图片加载失败',
icon : 'none'
})
})
},
/*
邀请码截取
*/
bindinput(e) {
this.setData({
nameValue: e.detail.value
})
},
/**
* 绑定邀请码
*/
nameTrue() {
wx.$api.mall.levelBind({
invite: this.data.nameValue
}).then(res => {
this.setData({
isParent: false
})
wx.navigateTo({
url: '/pages/mall/confirm/confirm?goodsid=' + this.data.mallData.goods_id + '&skuid=' + this.data.mallData.skus[0].sku_id + '&qty=1',
})
}).catch(err => {})
},
/**
* 关闭绑定邀请码弹窗
*/
nameCancel() {
this.setData({
isParent: !this.data.isParent
})
},
/**
* 删除邀请码
*/
colseTap() {
this.setData({
nameValue: ''
})
},
/**
* 返回上一页
*/
returnGo() {
wx.navigateBack({
delta: 1,
fail: err => {
wx.switchTab({
url: '/pages/index/index?invite=' + getApp().globalData.inviteText
})
}
})
},
/**
* 回到首页
*/
returnHome() {
wx.switchTab({
url: '/pages/index/index?invite=' + getApp().globalData.inviteText
})
},
/**
* 监听页面滑动事件
*/
onPageScroll(e) {
this.setData({
isFixedTop: parseInt(e.scrollTop)
});
},
/**
* 微信分享
*/
onShareAppMessage(){
this.setData({
shareSee: false
})
return {
title : this.data.mallData.name,
path : "/pages/mall/details/details?id=" + this.data.goodsId + '&invite=' + wx.getStorageSync("invite"),
imageUrl: this.data.mallData.cover
}
},
/**
* 放大轮播相册图片
*/
opneBanner(e){
let imgs = [],
index = e.currentTarget.dataset.index
for (let img of e.currentTarget.dataset.imgs){
imgs.push(img)
}
wx.previewImage({
urls : imgs,
current : imgs[index]
})
}
})

4
pages/mall/details/details.json Normal file
View File

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

144
pages/mall/details/details.wxml Normal file
View File

@@ -0,0 +1,144 @@
<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
<image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/returnBlack.png' : '/static/icons/returnWrite.png'}}"></image>
<image bindtap="returnHome" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/homeBlack.png' : '/static/icons/homeWrite.png'}}"></image>
</view>
<!-- 产品图 -->
<view class="banner">
<swiper class="swiperCont" indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay="true" circular>
<swiper-item data-index="{{index}}" data-imgs="{{mallData.pictures}}" bindtap="opneBanner" wx:for="{{mallData.pictures}}" wx:key="index">
<image class="swiperImg" src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
<!-- 商品信息 -->
<view class="goodsCont">
<view class="goodsWhite goodsInfo">
<view class="goodsInfo-top">
<view class="goodsInfo-price">
<view class="goodsInfo-cost"><text>VIP￥</text>{{mallData.price.vip}}</view>
<view class="goodsInfo-vip"><text>市场指导价</text>{{mallData.price.price}}</view>
</view>
</view>
<view class="goodsInfo-name">
{{mallData.name}}
</view>
<view class="goodsInfo-share" bindtap="shareTap">
<image class="goodsInfo-share-image" src="/static/icons/goodsShare.png"></image>分享
</view>
</view>
<view class="vipOpen">
<image class="vipOpen-back" src="https://cdn.shuiganying.com/images/2023/04/01/3b939c9082c917ff01fe4f5ea2ab9dfe.jpg"></image>
<view class="vipOpen-cont">
<image class="vipOpen-cont-icon" src="https://cdn.shuiganying.com/images/2023/04/04/799f5052f307ba25da99917ee084aaa4.png"></image>
<view class="vipOpen-cont-name">
<view class="vipOpen-cont-vip">{{mallData.is_vip ? '已成为' : '开通'}}<text>VIP</text></view>
<view class="vipOpen-cont-tips">{{mallData.is_vip ? 'AI测肤精准分析您皮肤问题' : '完成皮肤评测成为vip/年'}}</view>
</view>
</view>
<navigator hover-class="none" url="/pages/index/index" open-type="switchTab" class="vipOpen-btn">{{mallData.is_vip ? '再次评测' : '立即评测'}}<image class="vipOpen-btn-arrow" src="/static/icons/vipArrow.png"></image>
</navigator>
</view>
<view class="goodsWhite goodsItem">
<view class="goodsItem-label">
<view class="goodsItem-label-name">
参数
</view>
<view class="goodsItem-label-see">
<view class="goodsItem-label-block">
<view class="goodsItem-label-title">{{mallData.param.weight}}ml</view>
<view class="goodsItem-label-tips">净含量</view>
</view>
<view class="goodsItem-label-block">
<view class="goodsItem-label-title">{{mallData.param.product_type}}</view>
<view class="goodsItem-label-tips">产品类型</view>
</view>
<!-- <view class="goodsItem-label-block">
<view class="goodsItem-label-title">{{mallData.param.area}}</view>
<view class="goodsItem-label-tips">产地</view>
</view> -->
</view>
</view>
<view class="goodsItem-label">
<view class="goodsItem-label-name">
快递
</view>
<view class="goodsItem-label-text">
免邮
</view>
</view>
</view>
<!-- 详情 -->
<view class="goodsWhite goodsBrief">
<rich-text nodes="{{mallContent}}"></rich-text>
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="number"><text>￥</text>
<view class="number-price">{{mallData.is_vip ? mallData.price.vip : mallData.price.price}}</view>
<view class="number-vip">{{mallData.is_vip ? 'VIP会员价' : '市场指导价'}}</view>
</view>
<view bindtap="buyTap" class="btn">确认购买</view>
</view>
<!-- 产品图 -->
<view class="goodsShare {{shareSee ? 'active' : ''}}" catchtouchmove='true'>
<view class="goodsShare-back">
<image class="goodsShare-photo" src="{{mallData.cover}}" mode="widthFix"></image>
<view class="goodsShare-cont">
<view class="goodsShare-name">{{mallData.name}}</view>
<view class="goodsShare-see">
<view class="goodsShare-price">
<text>￥</text>{{mallData.price.price}}
</view>
<view class="goodsShare-tips">
识别二维码进行查看
</view>
<image class="goodsShare-code" src="{{inviteCode}}"></image>
</view>
</view>
</view>
</view>
<!-- 分享弹出 -->
<view class="shareBack {{shareSee ? 'active' : ''}}" catchtouchmove='true'></view>
<view class="sharePop {{shareSee ? 'active' : ''}}" catchtouchmove='true'>
<view class="shareCont">
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
<image src="https://cdn.shuiganying.com/images/2023/03/28/f8b773edc2fe6db8e45f96773b9a8dc4.png"></image>
微信好友
</button>
<view class="shareCont-label" bindtap="onCanvas">
<image src="https://cdn.shuiganying.com/images/2023/03/28/cfe0efbb53eaf7911ea5211923859c65.png"></image>
保存二维码
</view>
</view>
<view class="shareCancel" bindtap="shareTap">取消</view>
</view>
<!-- 海报canvas -->
<canvas type="2d" style="width: 375px; height: 540px;" id="coverCanvas" class="canvas-img" />
<!-- 是否有上级-邀请码 -->
<view class="namePop {{isParent ? 'active' : ''}}"></view>
<view class="nameCont {{isParent ? 'active' : ''}}">
<view class="nameCont-white">
<view class="nameCont-top">
<view class="nameCont-title">您的邀请人?</view>
<view class="nameCont-input">
<input type="text" name="name" value="{{nameValue}}" placeholder="请输入邀请码或邀请人手机号" bindinput="bindinput" />
<image wx:if="{{nameValue.length > 1}}" class="nameCont-colse" bindtap="colseTap" src="/static/icons/reportColse_grey.png"></image>
</view>
</view>
<view class="nameCont-btn">
<view class="nameCont-btn-go" bindtap="nameCancel">暂不绑定</view>
<view class="nameCont-btn-go" bindtap="nameTrue">立即绑定</view>
</view>
</view>
</view>

545
pages/mall/details/details.wxss Normal file
View File

@@ -0,0 +1,545 @@
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: transparent;
}
.navigation-arrow {
width: 44rpx;
height: 44rpx;
margin: 20rpx 15rpx 0 20rpx;
}
/* 产品图 */
.banner {
overflow: hidden;
position: relative;
padding-top: 100%;
}
.swiperCont,
.swiperImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 产品详情 */
.goodsCont {
padding: 30rpx;
border-bottom: 60px solid transparent;
box-sizing: border-box;
}
.goodsWhite {
background-color: #ffffff;
box-sizing: border-box;
border-radius: 15rpx;
margin-bottom: 30rpx;
}
.goodsInfo {
padding: 30rpx;
box-sizing: border-box;
position: relative;
}
.goodsInfo-price {
display: flex;
position: relative;
line-height: 52rpx;
color: #ff9951;
}
.goodsInfo-cost {
font-size: 48rpx;
}
.goodsInfo-cost text {
font-size: 28rpx;
}
.goodsInfo-vip {
background-color: #fff5ed;
border-radius: 80rpx;
margin-left: 30rpx;
padding: 0 25rpx;
height: 52rpx;
font-size: 32rpx;
}
.goodsInfo-vip text {
font-size: 24rpx;
padding-right: 5rpx;
}
.goodsInfo-name {
margin-top: 20rpx;
font-size: 32rpx;
}
.goodsInfo-share {
position: absolute;
top: 40rpx;
right: 30rpx;
display: flex;
font-size: 27rpx;
line-height: 34rpx;
color: #9b9b9b;
}
.goodsInfo-share-image {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
/* 开通vip */
.vipOpen {
box-sizing: border-box;
position: relative;
padding-top: 17%;
overflow: hidden;
}
.vipOpen-back {
position: absolute;
width: calc(100% - 60rpx);
height: 100%;
top: 0;
border-radius: 20rpx 20rpx 0 0;
left: 30rpx;
z-index: 1;
}
.vipOpen-cont {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9;
display: flex;
padding: 15rpx 55rpx;
box-sizing: border-box;
}
.vipOpen-cont-icon {
width: 60rpx;
height: 60rpx;
}
.vipOpen-cont-name {
padding: 0 20rpx;
box-sizing: border-box;
}
.vipOpen-cont-vip {
background-image: linear-gradient(to right, #fbf6d9, #d4af72, #c89a59);
-webkit-background-clip: text;
color: transparent;
font-weight: 600;
margin-bottom: 5rpx;
font-size: 34rpx;
}
.vipOpen-cont-vip text {
font-style: oblique;
padding-right: 13rpx;
}
.vipOpen-cont-tips {
color: #f4e1c4;
font-size: 26rpx;
}
.vipOpen-btn {
position: absolute;
top: 45rpx;
right: 50rpx;
display: flex;
z-index: 9;
line-height: 30rpx;
color: #f4e1c4;
font-size: 28rpx;
}
.vipOpen-btn-arrow {
width: 30rpx;
height: 30rpx;
margin: 2rpx 0 0 6rpx;
}
/* 参数 */
.goodsItem {
padding: 30rpx 30rpx 0;
}
.goodsItem-label {
display: flex;
}
.goodsItem-label-name {
color: #999999;
width: 120rpx;
line-height: 110rpx;
}
.goodsItem-label-see {
display: flex;
width: calc(100% - 120rpx);
background-color: #f7faff;
padding: 10rpx 0;
border-radius: 15rpx;
}
.goodsItem-label-block {
flex: 3;
text-align: center;
font-size: 26rpx;
position: relative;
}
.goodsItem-label-block::after {
position: absolute;
content: '';
background-color: #d1d1d1;
width: 1rpx;
height: 60%;
top: 20%;
left: 0;
}
.goodsItem-label-block:first-child::after {
display: none;
}
.goodsItem-label-title {
color: #3b7cff;
line-height: 50rpx;
}
.goodsItem-label-tips {
color: #999999;
}
.goodsItem-label-text {
line-height: 110rpx;
}
/* 详情 */
.goodsBrief {
padding: 30rpx;
box-sizing: border-box;
}
/* 底部 */
.footer {
width: 100%;
height: 60px;
background-color: #ffffff;
position: fixed;
left: 0;
bottom: 0;
z-index: 9;
box-sizing: border-box;
display: flex;
}
.number {
flex: 1;
line-height: 60px;
color: #ff9951;
display: flex;
padding: 0 30rpx;
box-sizing: border-box;
}
.number text {
font-size: 28rpx;
padding-top: 10rpx;
}
.number-price {
padding: 0 5rpx;
font-size: 52rpx;
}
.number-vip {
margin-left: 20rpx;
font-size: 26rpx;
color: #8d97a1;
padding-top: 6rpx;
box-sizing: border-box;
}
.btn {
height: 100%;
background-color: #ff9951;
text-align: center;
color: #FFFFFF;
padding: 0 70rpx;
line-height: 60px;
}
.detailsBrief-back {
width: 100%;
}
/* 产品分享弹窗 */
.goodsShare {
width: 100%;
z-index: 9999;
position: fixed;
bottom: 340rpx;
left: 0;
padding: 40rpx;
box-sizing: border-box;
display: none;
}
.goodsShare.active {
display: block;
}
.goodsShare-back {
width: 80%;
margin: 0 auto;
background-color: #ffffff;
border-radius: 15rpx;
overflow: hidden;
}
.goodsShare-photo {
width: 100%;
}
.goodsShare-cont {
padding: 30rpx;
box-sizing: border-box;
}
.goodsShare-name {
font-size: 36rpx;
}
.goodsShare-price {
font-size: 52rpx;
color: #3b7cff;
}
.goodsShare-price text {
font-size: 30rpx;
}
.goodsShare-see {
position: relative;
padding: 40rpx 0 20rpx;
}
.goodsShare-tips {
font-size: 28rpx;
color: #b3b3b3;
margin-top: 10rpx;
}
.goodsShare-code {
width: 130rpx;
height: 130rpx;
position: absolute;
right: 0;
top: 30rpx;
}
/* 分享弹出 */
.shareBack {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 9900;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .6);
display: none;
}
.shareBack.active {
display: block;
}
.sharePop {
position: fixed;
width: 100%;
z-index: 9999;
left: 0;
bottom: 0;
background-color: #ffffff;
display: none;
height: 280rpx;
}
.sharePop.active {
display: block;
}
.shareCont-label image {
width: 60rpx;
height: 60rpx;
display: block;
margin: 0 auto 10rpx;
}
.shareCancel {
border-top: 2rpx solid #dddddd;
width: 100%;
text-align: center;
line-height: 100rpx;
}
.shareCont {
display: flex;
padding: 30rpx 0;
}
.shareCont-label {
flex: 2;
text-align: center;
font-size: 28rpx;
}
.codeShare-button {
background-color: transparent;
padding: 0;
font-weight: normal;
}
/* canvas */
.canvas-img {
position: fixed;
left: -100000%;
top: 0;
z-index: 99;
}
/* 邀请码弹出 */
.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 {
height: 90rpx;
line-height: 90rpx;
position: relative;
background-color: #f3f3f3;
border-radius: 10rpx;
overflow: hidden;
padding: 0 25rpx;
box-sizing: border-box;
}
.nameCont-input input {
width: calc(100% - 40rpx);
height: 100%;
background-color: transparent;
}
.nameCont-colse {
width: 40rpx;
height: 40rpx;
top: 25rpx;
right: 20rpx;
position: absolute;
z-index: 9;
}
.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;
}