锶源昆仑商城
This commit is contained in:
28
pages/user/about/about.js
Normal file
28
pages/user/about/about.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
})
|
||||
4
pages/user/about/about.json
Normal file
4
pages/user/about/about.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "锶源昆仑"
|
||||
}
|
||||
1
pages/user/about/about.wxml
Normal file
1
pages/user/about/about.wxml
Normal file
@@ -0,0 +1 @@
|
||||
<image class="product" src="http://api.siyuankunlun.com/storage/materials/2022/09/05/productimg.jpg" mode="widthFix"></image>
|
||||
3
pages/user/about/about.wxss
Normal file
3
pages/user/about/about.wxss
Normal file
@@ -0,0 +1,3 @@
|
||||
.product {
|
||||
width: 100%;
|
||||
}
|
||||
250
pages/user/code/code.js
Normal file
250
pages/user/code/code.js
Normal file
@@ -0,0 +1,250 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
shareSee : false, //分享弹出
|
||||
identity : '', //1为普通
|
||||
userInfo : '', //用户信息
|
||||
inviteText : '', //邀请码
|
||||
inviteCode : '', //二维码
|
||||
|
||||
//海报
|
||||
posterDatas: {
|
||||
width : 375, //画布宽度
|
||||
height : 800, //画布高度
|
||||
// 缓冲区，无需手动设定
|
||||
pic : null,
|
||||
buttonType : 1,
|
||||
show : false, // 显示隐藏海报弹窗
|
||||
success : false, // 是否成功生成过海报
|
||||
canvas : null, // 画布的节点
|
||||
ctx : null, // 画布的上下文
|
||||
dpr : 1, // 设备的像素比
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
//生成海报初始化
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#firstCanvas').fields({
|
||||
node: true,
|
||||
size: true
|
||||
},
|
||||
function (res) {
|
||||
const canvas = res.node
|
||||
const ctx = canvas.getContext('2d')
|
||||
const dpr = wx.getSystemInfoSync().pixelRatio
|
||||
canvas.width = posterDatas.width * dpr
|
||||
canvas.height = posterDatas.height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
posterDatas.canvas = canvas
|
||||
posterDatas.ctx = ctx
|
||||
posterDatas.dpr = dpr
|
||||
//存储
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
}).exec()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取推广码
|
||||
this.inviteInfo();
|
||||
|
||||
// 小程序码
|
||||
this.ShareInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 推广码
|
||||
*/
|
||||
inviteInfo() {
|
||||
wx.$api.user.invite().then(res => {
|
||||
this.setData({
|
||||
identity : res.data.code,
|
||||
userInfo : res.data.user_info,
|
||||
inviteText : res.data.invite
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 小程序码
|
||||
*/
|
||||
ShareInfo() {
|
||||
wx.$api.user.miniShare({
|
||||
url: '/pages/login/index'
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
inviteCode: res.data.qrcode
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
//海报生成 //画布 生成 海报[海报]
|
||||
saveImg () {
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas
|
||||
var canvas = posterDatas.canvas
|
||||
var ctx = posterDatas.ctx
|
||||
wx.showLoading({
|
||||
title: '海报生成中',
|
||||
mask: true
|
||||
});
|
||||
|
||||
//二维码
|
||||
var codeImg = new Promise(function (resolve, reject) {
|
||||
const photo = canvas.createImage();
|
||||
photo.src = that.data.inviteCode;
|
||||
photo.onload = (e) => {
|
||||
resolve(photo);
|
||||
}
|
||||
});
|
||||
|
||||
//背景素材
|
||||
var backImg = new Promise(function (resolve, reject) {
|
||||
const photo = canvas.createImage();
|
||||
photo.src = "https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png";
|
||||
photo.onload = (e) => {
|
||||
resolve(photo);
|
||||
}
|
||||
});
|
||||
Promise.all([codeImg, backImg]).then(res => {
|
||||
|
||||
// 绘制背景
|
||||
ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
|
||||
|
||||
// 绘制[二维码-白色背景]
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(200, 540, 120, 120);
|
||||
|
||||
// 绘制[二维码-白色背景黑框]
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.strokeRect(199, 539, 122, 122);
|
||||
|
||||
// 绘制[二维码]
|
||||
ctx.drawImage(res[0], 210, 550, 100, 100);
|
||||
|
||||
// 文字
|
||||
ctx.font = "bold 14px Arial"; //字体大小
|
||||
ctx.fillStyle = "#000"; //字体颜色
|
||||
ctx.textAlign = "center"
|
||||
ctx.fillText('扫描二维码了解更多', 260, 690);
|
||||
|
||||
// 关闭loading
|
||||
wx.hideLoading();
|
||||
//显示海报
|
||||
posterDatas.success = true;
|
||||
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
|
||||
this.onDownloadImges();
|
||||
|
||||
}).catch(err=>{})
|
||||
},
|
||||
|
||||
//下载图片[海报]
|
||||
onDownloadImges () {
|
||||
wx.showLoading({
|
||||
title: '保存中',
|
||||
mask: true
|
||||
});
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas;
|
||||
if (!posterDatas.pic) {
|
||||
that.onCanvasBuildImges();
|
||||
return;
|
||||
}
|
||||
//可写成函数调用 这里不做解释
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: posterDatas.pic,
|
||||
success(res) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '已保存到相册，快去分享吧',
|
||||
})
|
||||
that.setData({
|
||||
posterDatas,
|
||||
shareSee: !that.data.shareSee
|
||||
})
|
||||
},
|
||||
fail() {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '进入设置页，开启“保存到相册”',
|
||||
})
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//画布 转 图片[海报]
|
||||
onCanvasBuildImges () {
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas;
|
||||
wx.canvasToTempFilePath({
|
||||
canvas: posterDatas.canvas,
|
||||
width: posterDatas.width,
|
||||
height: posterDatas.height,
|
||||
destWidth: posterDatas.width * 3,
|
||||
destHeight: posterDatas.height * 3,
|
||||
success: res=> {
|
||||
posterDatas["pic"] = res.tempFilePath;
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
that.onDownloadImges();
|
||||
},
|
||||
fail() {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: 'sorry 保存失败,请稍后再试.',
|
||||
})
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享弹出
|
||||
*/
|
||||
shareTap() {
|
||||
this.setData({
|
||||
shareSee: !this.data.shareSee
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage(){
|
||||
return {
|
||||
title : this.data.userInfo.nickname + '邀请您了解锶源昆仑',
|
||||
path : "/pages/index/index?invite=" + this.data.userInfo.inviteText,
|
||||
imageUrl: "http://cdn.siyuankunlun.com/materials/2022/09/14/code.jpg"
|
||||
}
|
||||
}
|
||||
})
|
||||
4
pages/user/code/code.json
Normal file
4
pages/user/code/code.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "邀请码"
|
||||
}
|
||||
32
pages/user/code/code.wxml
Normal file
32
pages/user/code/code.wxml
Normal file
@@ -0,0 +1,32 @@
|
||||
<view class="code">
|
||||
<image src="https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png" class="code-back"></image>
|
||||
<view class="code-cont">
|
||||
<view class="code-img">
|
||||
<image src="{{inviteCode}}" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="code-text"><text>扫描二维码了解更多</text></view>
|
||||
</view>
|
||||
<view class="code-share" bindtap="shareTap">
|
||||
<image src="/static/icons/share.png"></image>
|
||||
<view class="code-share-name">分享</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报canvas -->
|
||||
<!-- <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas> -->
|
||||
<canvas type="2d" id="firstCanvas" class="canvasImg" style="width:{{posterDatas.width}}px;height:{{posterDatas.height}}px;"></canvas>
|
||||
|
||||
<!-- 分享弹出 -->
|
||||
<view class="sharePop {{shareSee ? 'active' : ''}}">
|
||||
<view class="shareCont">
|
||||
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
|
||||
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_icon_00.png"></image>
|
||||
微信好友
|
||||
</button>
|
||||
<view class="shareCont-label" bindtap="saveImg">
|
||||
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_icon_02.png"></image>
|
||||
保存二维码
|
||||
</view>
|
||||
</view>
|
||||
<view class="shareCancel" bindtap="shareTap">取消</view>
|
||||
</view>
|
||||
164
pages/user/code/code.wxss
Normal file
164
pages/user/code/code.wxss
Normal file
@@ -0,0 +1,164 @@
|
||||
.code {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.code-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.code-cont {
|
||||
width: 450rpx;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
right: 0;
|
||||
bottom: 13%;
|
||||
}
|
||||
|
||||
.code-img{
|
||||
margin: 0 auto 20rpx;
|
||||
overflow: hidden;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
border: 4rpx solid #000;
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.code-img image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
color: #000;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.code-share {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 40%;
|
||||
background: linear-gradient(to right, #3f7fff, #568fff);
|
||||
width: 50rpx;
|
||||
text-align: center;
|
||||
border-radius: 26rpx 0 0 26rpx;
|
||||
padding: 24rpx 4rpx 24rpx 10rpx;
|
||||
box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.code-share-name {
|
||||
writing-mode:vertical-rl;
|
||||
font-size: 28rpx;
|
||||
padding-left: 4rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.code-share image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.sharePop {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #0a1930;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sharePop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shareCont-label image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: block;
|
||||
margin: 0 auto 10rpx;
|
||||
}
|
||||
|
||||
.shareCancel {
|
||||
border-top: 2rpx solid #0e2c58;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.shareCont{
|
||||
display: flex;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.shareCont-label {
|
||||
color: #ffffff;
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.codeShare-button {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.canvasImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
height: 800px;
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
/* 何院士样式 */
|
||||
.newCode-cont {
|
||||
width: 70%;
|
||||
height: 200rpx;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
left: 15%;
|
||||
bottom: 19.5%;
|
||||
background: linear-gradient(to top, #a09084, #a58367);
|
||||
padding: 15rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.newCode-img {
|
||||
height: 170rpx;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(to top, #e9d1bd, #c49b7a);
|
||||
border: 4rpx solid #f3c49d;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
padding: 10rpx 30rpx 10rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.newCode-img-title {
|
||||
width: calc(100% - 140rpx);
|
||||
}
|
||||
|
||||
.newCode-img-title image {
|
||||
width: 80%;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.newCode-img-code {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
88
pages/user/collect/collect.js
Normal file
88
pages/user/collect/collect.js
Normal file
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
categories : '', //分类
|
||||
articlesArr : [] , //列表
|
||||
page : {}, //分页信息
|
||||
listType : 1, //类型
|
||||
name : '', //名称
|
||||
lodingStats : false, //加载状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取列表
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
// 列表
|
||||
articlesInfo(page){
|
||||
wx.$api.user.favorites({
|
||||
category_id : this.data.listType,
|
||||
page : page || 1
|
||||
}).then(res => {
|
||||
let listArr = this.data.articlesArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.data.favorites.data)
|
||||
this.setData({
|
||||
categories : res.data.categories,
|
||||
articlesArr : newData,
|
||||
page : res.data.favorites.page,
|
||||
lodingStats : false
|
||||
})
|
||||
wx.stopPullDownRefresh()
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 状态筛选
|
||||
*/
|
||||
onTabs(val){
|
||||
if(this.data.listType === val) return
|
||||
this.setData({
|
||||
listType: val.currentTarget.dataset.type
|
||||
})
|
||||
|
||||
// 商品详情数据
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
// 获取列表
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 上拉加载
|
||||
*/
|
||||
onReachBottom(){
|
||||
this.setData({
|
||||
lodingStats: true
|
||||
})
|
||||
let pageNumber = this.data.page.current
|
||||
if(this.data.page.has_more){
|
||||
pageNumber++
|
||||
// 获取列表
|
||||
this.articlesInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
})
|
||||
4
pages/user/collect/collect.json
Normal file
4
pages/user/collect/collect.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "我的收藏"
|
||||
}
|
||||
31
pages/user/collect/collect.wxml
Normal file
31
pages/user/collect/collect.wxml
Normal file
@@ -0,0 +1,31 @@
|
||||
<view class="header">
|
||||
<view class="tabs">
|
||||
<view wx:for="{{categories}}" wx:key="categories" class="tabs-item {{listType == item.category_id ? 'show' : ''}}" bindtap="onTabs" data-type="{{item.category_id}}">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list" wx:if="{{articlesArr.length > 0}}">
|
||||
<navigator hover-class="none" url="/pages/article/info/info?id={{item.favoriteable.article_id}}&type={{name}}" class="item" wx:for="{{articlesArr}}" wx:key="articlesArr">
|
||||
<view class="itemCont">
|
||||
<view class="nowrap itemCont-name"><text>{{item.favoriteable.categories[0].slug}}</text> | {{item.favoriteable.title}}</view>
|
||||
<view class="nowrap itemCont-text">{{item.favoriteable.description}}</view>
|
||||
<view class="itemCont-see">
|
||||
<view class="itemCont-icon"><image src="http://cdn.siyuankunlun.com/materials/2022/10/11/articleIcon_00.png"></image> {{item.favoriteable.clicks}}</view>
|
||||
<view class="itemCont-icon"><image src="http://cdn.siyuankunlun.com/materials/2022/10/11/articleIcon_01.png"></image>{{item.favoriteable.subscribes}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="itemImg" mode="aspectFill" src="{{item.favoriteable.cover}}"></image>
|
||||
</navigator>
|
||||
<view class="pagesLoding" wx:if="{{lodingStats}}">
|
||||
<block wx:if="{{page.has_more}}">
|
||||
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||||
</block>
|
||||
<block wx:else>
|
||||
没有更多了~
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pack-center pages-hint" wx:else>
|
||||
<image src="/static/imgs/text_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
99
pages/user/collect/collect.wxss
Normal file
99
pages/user/collect/collect.wxss
Normal file
@@ -0,0 +1,99 @@
|
||||
page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
|
||||
/* tabs */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 15rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
|
||||
.tabs-item {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.tabs-item.show {
|
||||
color: #1d37e2;
|
||||
border-bottom: solid 4rpx #1d37e2;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.itemImg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.itemCont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 25rpx 230rpx 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemCont-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.itemCont-name text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.itemCont-text {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
margin: 15rpx 0 30rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.itemCont-see {
|
||||
color: #999;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.itemCont-icon {
|
||||
display: flex;
|
||||
margin-right: 50rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
.itemCont-icon image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
269
pages/user/index.js
Normal file
269
pages/user/index.js
Normal file
@@ -0,0 +1,269 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
userData : '', //用户信息
|
||||
identity : '', //用户身份
|
||||
identityShow : '',
|
||||
userLogin : '', //登录状态
|
||||
avatar : '', //头像
|
||||
nickName : '', //昵称
|
||||
sign : '', //喝水打卡
|
||||
nowStatus : '', //判断状态
|
||||
identityData : '', //会员身份信息
|
||||
caseOrder : '', //订单
|
||||
account : '', //账户
|
||||
count : '', //数值
|
||||
nameState : false,
|
||||
memberType : false,
|
||||
serviceMobile : '',
|
||||
waterMobile : '',
|
||||
inviteCount : '', //激活码
|
||||
waterState : false, //水滴状态
|
||||
barHeight : getApp().globalData.statusBarHeight, // 状态栏高度
|
||||
jiaonangheight : getApp().globalData.jiaonangheight, //胶囊高度
|
||||
listType : '1', //任务类型
|
||||
rightShow : false, //右侧菜单
|
||||
taskSort : [], //任务分类
|
||||
taskArr : [] //任务列表
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {},
|
||||
|
||||
onKf(){
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: {
|
||||
url: "https://work.weixin.qq.com/kfid/kfc4a885307836763a9"
|
||||
},
|
||||
corpId: "wwf556e3ad41f44c3a",
|
||||
success: res => {},
|
||||
fail: err => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
this.setData({
|
||||
userLogin: true
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
}
|
||||
|
||||
// 获取任务列表
|
||||
this.taskEntry();
|
||||
|
||||
// 获取任务分类
|
||||
this.taskInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
userInfo() {
|
||||
wx.$api.user.home().then(res => {
|
||||
this.setData({
|
||||
userData : res.data,
|
||||
account : res.data.account,
|
||||
avatar : res.data.avatar,
|
||||
nickName : res.data.nickname,
|
||||
identity : res.data.identity,
|
||||
identityShow : res.data.identityShow,
|
||||
caseOrder : res.data.case,
|
||||
inviteCount : res.data.invite_count || ''
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 任务分类
|
||||
*/
|
||||
taskInfo() {
|
||||
wx.$api.user.taskIndex().then(res => {
|
||||
this.setData({
|
||||
taskSort : res.data
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 任务列表
|
||||
*/
|
||||
taskEntry() {
|
||||
wx.$api.user.taskList({
|
||||
category_id: this.data.listType
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
taskArr : res.data
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 头像上传
|
||||
*/
|
||||
updImg(){
|
||||
wx.chooseMedia({
|
||||
count : 1,
|
||||
success : path => {
|
||||
// 上传图片
|
||||
wx.$api.file.uploadImg(path.tempFiles[0].tempFilePath, {}).then(res=>{
|
||||
this.setData({
|
||||
avatar:res.url
|
||||
})
|
||||
this.settingInfo('avatar', res.path)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传用户信息
|
||||
*/
|
||||
settingInfo(key, value) {
|
||||
wx.$api.user.setting(key, {
|
||||
value: value
|
||||
}).then(() => {
|
||||
this.nameState = false
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 流程判断
|
||||
*/
|
||||
judge() {
|
||||
if(wx.getStorageSync("token")){
|
||||
// 开通会员
|
||||
wx.switchTab({
|
||||
url: '/pages/member/index'
|
||||
})
|
||||
}else {
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理未登录时的转跳
|
||||
*/
|
||||
userNav(e){
|
||||
let pageUrl = e.currentTarget.dataset.url
|
||||
if(wx.getStorageSync("token")){
|
||||
wx.navigateTo({
|
||||
url: pageUrl
|
||||
})
|
||||
}else{
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
rightShow: false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*/
|
||||
outLogin() {
|
||||
// 清理客户端登录缓存
|
||||
wx.removeStorageSync("token")
|
||||
this.setData({
|
||||
rightShow: false
|
||||
})
|
||||
this.setData({
|
||||
userLogin: false
|
||||
})
|
||||
|
||||
// 清理客户端登录缓存
|
||||
wx.removeStorageSync("inviteData")
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择任务类型
|
||||
*/
|
||||
onTabs(e) {
|
||||
this.setData({
|
||||
listType: e.currentTarget.dataset.type
|
||||
})
|
||||
|
||||
// 获取任务列表
|
||||
this.taskEntry();
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示右侧导航内容
|
||||
*/
|
||||
rightBind() {
|
||||
this.setData({
|
||||
rightShow: !this.data.rightShow
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 敬请期待
|
||||
*/
|
||||
await() {
|
||||
wx.showToast({
|
||||
title : '开发中，敬请期待',
|
||||
icon : 'none',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
|
||||
// 任务分类跳转
|
||||
JumpUrl(open) {
|
||||
let newState = open.currentTarget.dataset.state,
|
||||
newKey = open.currentTarget.dataset.key
|
||||
if(newState == 1) return
|
||||
if(newKey == 'steps'){
|
||||
// 获取微信运动
|
||||
this.getWeRun()
|
||||
return
|
||||
}
|
||||
if(wx.getStorageSync("token")){
|
||||
let newUrl = open.currentTarget.dataset.url,
|
||||
newType = open.currentTarget.dataset.type
|
||||
switch(newType){
|
||||
case 'switchTab':
|
||||
wx.switchTab({
|
||||
url: newUrl
|
||||
})
|
||||
break;
|
||||
case 'web':
|
||||
// 跳转web
|
||||
break;
|
||||
case 'mini':
|
||||
wx.navigateTo({
|
||||
url: newUrl
|
||||
})
|
||||
break;
|
||||
}
|
||||
} else{
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
5
pages/user/index.json
Normal file
5
pages/user/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
220
pages/user/index.wxml
Normal file
220
pages/user/index.wxml
Normal file
@@ -0,0 +1,220 @@
|
||||
<view class="Usetop">
|
||||
<image class="Usetop-back" mode="aspectFill" src="http://cdn.siyuankunlun.com/materials/2022/10/14/uaer_back.jpg"></image>
|
||||
<view class="Usetop-range" style="padding-top:{{barHeight + jiaonangheight}}px;">
|
||||
<view class="Usetop-cont" wx:if="{{userLogin}}">
|
||||
<view class="Usetop-head {{identity.order == '1' ? 'active' : ''}}">
|
||||
<image class="Usetop-head-avatar" bindtap="updImg" src="{{avatar ? avatar : '../../static/imgs/default_myHead.png'}}" mode="aspectFill"></image>
|
||||
<image wx:if="{{identity.order == '1'}}" class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/19/ancrown_pt.png" mode=""></image>
|
||||
<image wx:else class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/14/ancrown.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Usetop-text">
|
||||
{{nickName}}
|
||||
<image wx:if="{{identity.order == '1'}}" src="/static/icons/member_01.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '2'}}" src="/static/icons/member_02.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '3'}}" src="/static/icons/member_03.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '4'}}" src="/static/icons/member_04.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '5'}}" src="/static/icons/member_05.png" mode="widthFix"></image>
|
||||
<image wx:else src="/static/icons/member_06.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Usetop-cont" wx:else>
|
||||
<view class="Usetop-head active">
|
||||
<image class="Usetop-head-avatar" bindtap="updImg" src="../../static/imgs/default_myHead.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<navigator hover-class="none" url="../login/index" class="Usetop-text">
|
||||
请先登录
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Usetop-see">
|
||||
<view bindtap="userNav" data-url="/pages/water/index" class="Usetop-see-label">
|
||||
<image class="Usetop-see-icon" src="http://cdn.siyuankunlun.com/materials/2022/10/14/userSee_01.png"></image>
|
||||
<view class="nowrap Usetop-see-name">
|
||||
水滴
|
||||
<text>{{account.score.surplus ? account.score.surplus : '0'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view bindtap="userNav" data-url="/pages/coupons/organize/index" class="Usetop-see-label">
|
||||
<image class="Usetop-see-icon" src="http://cdn.siyuankunlun.com/materials/2022/10/14/userSee_02.png"></image>
|
||||
<view class="Usetop-see-name">
|
||||
券
|
||||
<text>{{count.coupon ? count.coupon : '0'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view bindtap="userNav" data-url="/pages/account/index/index" class="Usetop-see-label">
|
||||
<image class="Usetop-see-icon" src="http://cdn.siyuankunlun.com/materials/2022/10/14/userSee_03.png"></image>
|
||||
<view class="Usetop-see-name">
|
||||
余额
|
||||
<text>{{account.balance ? account.balance : '0'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="matter">
|
||||
<view class="matter-text matter-left">
|
||||
<view class="matter-text-label">
|
||||
PH 7.8
|
||||
</view>
|
||||
<view class="matter-text-label">
|
||||
锶≥3<text>(mg/L)</text>
|
||||
</view>
|
||||
<view class="matter-text-label">
|
||||
镁≥100<text>(mg/L)</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="matter-center" mode="widthFix" src="http://cdn.siyuankunlun.com/materials/2022/10/14/userGif.gif"></image>
|
||||
<view class="matter-text matter-right">
|
||||
<view class="matter-text-label">
|
||||
钙≥200<text>(mg/L)</text>
|
||||
</view>
|
||||
<view class="matter-text-label">
|
||||
钾≥18<text>(mg/L)</text>
|
||||
</view>
|
||||
<view class="matter-text-label">
|
||||
钠≥100<text>(mg/L)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员 -->
|
||||
<view class="member" catchtap="judge" style="display: none;">
|
||||
<image class="member-image" src="/static/imgs/member.png" mode="aspectFill"></image>
|
||||
<view class="member-text">
|
||||
<view class="member-text-top">
|
||||
<image class="member-text-top-icon" mode="widthFix" src="/static/ls/memberIcon.png"></image>
|
||||
<image class="member-text-top-title" mode="widthFix" src="/static/ls/memberTitle.png"></image>
|
||||
</view>
|
||||
<view class="member-text-tips">
|
||||
<view class="member-text-name" wx:if="{{userLogin}}">
|
||||
{{identity.id == '1' ? '开通锶享会员' : identity.name}}
|
||||
</view>
|
||||
<view class="member-text-name" wx:else>
|
||||
开通锶享会员
|
||||
</view>
|
||||
<view class="member-text-more">
|
||||
<text wx:if="{{!userLogin}}">立即登录</text>
|
||||
<text wx:elif="{{identity.id == '1'}}">立即开通</text>
|
||||
<text wx:else>查看权益</text>
|
||||
<image src="/static/ls/memberArrow.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="member-text-time" wx:if="{{userLogin}}">
|
||||
<block wx:if="{{identity.id != '1'}}">
|
||||
<text>{{identityShow.times.serial}}</text>
|
||||
有效期： {{identityShow.times.ended_at}}
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 入口 -->
|
||||
<view class="entry">
|
||||
<view bindtap="userNav" data-url="./collect/collect" class="entry-label entry-collect">
|
||||
<image class="entry-label-img" mode="aspectFill" src="http://cdn.siyuankunlun.com/materials/2022/10/14/entryBack_01.jpg"></image>
|
||||
<view class="entry-label-title">
|
||||
<view class="entry-label-english">collect</view>
|
||||
<text>探索 收藏</text>
|
||||
<view class="entry-label-more">
|
||||
查看收藏<image src="http://cdn.siyuankunlun.com/materials/2022/10/14/entryArr.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view bindtap="await" class="entry-label entry-goods"> -->
|
||||
<navigator hover-class="none" url="/pages/mall/goods/index" class="entry-label entry-goods">
|
||||
<image class="entry-label-img" mode="aspectFill" src="http://cdn.siyuankunlun.com/materials/2022/10/14/entryBack_02.jpg"></image>
|
||||
<view class="entry-label-title">
|
||||
<text>产品中心</text>
|
||||
<image class="entry-goods-icon" src="http://cdn.siyuankunlun.com/materials/2022/10/14/entryName.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<image class="entry-goods-img" src="http://cdn.siyuankunlun.com/materials/2022/10/14/entryImg.png" mode="widthFix"></image>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<!-- 每日任务 -->
|
||||
<view class="task">
|
||||
<view class="taskCont">
|
||||
<view class="taskCont-tab">
|
||||
<text>水滴任务</text>
|
||||
</view>
|
||||
<!-- <view class="taskCont-tab">
|
||||
<view class="taskCont-tab-label {{listType == item.category_id ? 'active' : ''}}" bindtap="onTabs" data-type="{{item.category_id}}" wx:for="{{taskSort}}" wx:key="taskSort"><text>{{item.title}}</text></view>
|
||||
</view> -->
|
||||
|
||||
<!-- 健康任务 -->
|
||||
<view class="taskCont-list">
|
||||
<!-- await 敬请期待 -->
|
||||
<block wx:if="{{taskArr.length > 0}}">
|
||||
<view class="taskCont-item" bindtap="JumpUrl" wx:for="{{taskArr}}" wx:key="taskArr" data-url="{{item.linker.path}}" data-type="{{item.linker.openType}}" data-state="{{item.user.finish}}" data-key="{{item.key}}">
|
||||
<view class="taskCont-item-icon">
|
||||
<image src="{{item.ico}}"></image>
|
||||
</view>
|
||||
<view class="taskCont-item-text">
|
||||
<view class="taskCont-item-title">{{item.title}}</view>
|
||||
<view class="taskCont-item-tips"><text>+</text>{{item.tips}}</view>
|
||||
</view>
|
||||
<view class="taskCont-item-go">
|
||||
<view class="taskCont-item-number {{item.user.finish == 1 ? 'active' : ''}}">{{item.user.total}}/{{item.user.all}}</view>
|
||||
<image class="taskCont-item-more" src=" {{item.user.finish == 1 ? '/static/ls/taskIcon_05_active.png' : '/static/ls/taskIcon_05.png'}}"></image>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="taskCont-no" wx:else>
|
||||
<image src="http://cdn.siyuankunlun.com/materials/2022/10/26/noContent.png"></image>
|
||||
<text>~暂无任务~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧导航 -->
|
||||
<view class="rightBack {{rightShow ? 'active' : ''}}" bindtap="rightBind"></view>
|
||||
<view class="rightNav {{rightShow ? 'active' : ''}}">
|
||||
<image class="rightIcon" src="/static/ls/userTap.png" mode="widthFix" bindtap="rightBind"></image>
|
||||
<view class="rightCont" style="padding-top:{{barHeight + jiaonangheight}}px;">
|
||||
<view class="rightCont-text">
|
||||
<view class="rightCont-text-top">
|
||||
<image class="rightCont-top-img" mode="widthFix" src="http://cdn.siyuankunlun.com/materials/2022/10/11/guideLogo.png"></image>
|
||||
<view class="rightCont-top-name"><text>管理模块</text></view>
|
||||
<view class="rightCont-top-text">用户管理模块工具</view>
|
||||
</view>
|
||||
<scroll-view class="rightCont-text-label" style="height: calc(100vh - {{barHeight + jiaonangheight}}px - 240rpx);" scroll-y="true">
|
||||
<block wx:if="{{userLogin}}">
|
||||
<view bindtap="userNav" data-url="/pages/stock/index" class="rightCont-text-item">
|
||||
<image class="rightCont-text-icon" src="/static/ls/userIcon_01.png"></image>
|
||||
<view class="rightCont-text-name">库存量</view>
|
||||
<view class="rightCont-text-tips">库存量信息</view>
|
||||
<view class="rightCont-text-number" wx:if="{{ caseOrder.residue}}">{{ caseOrder.residue}}</view>
|
||||
</view>
|
||||
<view bindtap="userNav" data-url="./code/code" class="rightCont-text-item">
|
||||
<image class="rightCont-text-icon" src="/static/ls/userIcon_03.png"></image>
|
||||
<view class="rightCont-text-name">邀请码</view>
|
||||
<view class="rightCont-text-tips">邀请好友加入</view>
|
||||
</view>
|
||||
</block>
|
||||
<view bindtap="userNav" data-url="/pages/order/list/index?listType=paid" class="rightCont-text-item">
|
||||
<image class="rightCont-text-icon" src="/static/ls/taskIcon_12.png"></image>
|
||||
<view class="rightCont-text-name">我的订单</view>
|
||||
<view class="rightCont-text-tips">锶源昆仑纯净水</view>
|
||||
</view>
|
||||
<navigator hover-class="none" url="./about/about" class="rightCont-text-item">
|
||||
<image class="rightCont-text-icon" src="/static/ls/userIcon_09.png"></image>
|
||||
<view class="rightCont-text-name">锶源昆仑</view>
|
||||
<view class="rightCont-text-tips">锶源昆仑纯净水</view>
|
||||
</navigator>
|
||||
|
||||
<view class="rightCont-text-item">
|
||||
<image class="rightCont-text-icon" src="/static/ls/userIcon_11.png"></image>
|
||||
<button class="rightCont-text-name" bindtap="onKf">锶源客服</button>
|
||||
<view class="rightCont-text-tips">企业微信客服</view>
|
||||
</view>
|
||||
|
||||
<view class="rightCont-text-item" bindtap="outLogin" wx:if="{{userLogin}}">
|
||||
<image class="rightCont-text-icon" src="/static/ls/userIcon_10.png"></image>
|
||||
<view class="rightCont-text-name">退出登录</view>
|
||||
<view class="rightCont-text-tips">清空数据缓存</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
765
pages/user/index.wxss
Normal file
765
pages/user/index.wxss
Normal file
@@ -0,0 +1,765 @@
|
||||
page {
|
||||
background-color: #f8f8fa;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.Usetop {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: 48%;
|
||||
}
|
||||
|
||||
.Usetop-back,
|
||||
.Usetop-range {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Usetop-back {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Usetop-range {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.Usetop-see {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
bottom: -30rpx;
|
||||
display: flex;
|
||||
padding: 0 15rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.Usetop-see-label {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 60rpx;
|
||||
margin: 0 15rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.Usetop-see-icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin: 17rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.Usetop-see-name {
|
||||
color: #404145;
|
||||
}
|
||||
|
||||
.Usetop-see-name text {
|
||||
font-size: 600;
|
||||
color: #6c79fb;
|
||||
}
|
||||
|
||||
.Usetop-cont {
|
||||
padding: 40rpx 0 0 50rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Usetop-head {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #ffe0a8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Usetop-head.active {
|
||||
border-color: rgb(223, 223, 223);
|
||||
}
|
||||
|
||||
.Usetop-head-avatar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.Usetop-head-ancrown {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
right: 0;
|
||||
top: -34rpx;
|
||||
}
|
||||
|
||||
.Usetop-text {
|
||||
width: calc(100% - 110rpx);
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 100rpx;
|
||||
font-size: 34rpx;
|
||||
padding-top: 10rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Usetop-text image {
|
||||
width: 110rpx;
|
||||
margin: 34rpx 0 0 15rpx;
|
||||
}
|
||||
|
||||
/* 物质含量 */
|
||||
.matter {
|
||||
padding: 50rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.matter-center {
|
||||
width: 42%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.matter-text {
|
||||
width: 29%;
|
||||
font-size: 24rpx;
|
||||
padding-top: 60rpx;
|
||||
}
|
||||
|
||||
.matter-text-label {
|
||||
position: relative;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.matter-text-label::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: calc(50% - 7rpx);
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #6970fc;
|
||||
border: 4rpx solid #dde0ff;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.matter-text-label text {
|
||||
font-size: 22rpx;
|
||||
color: #ababab;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.matter-left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.matter-left .matter-text-label {
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
|
||||
.matter-right .matter-text-label {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.matter-left .matter-text-label::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.matter-right .matter-text-label::after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 会员 */
|
||||
.member {
|
||||
margin: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding-top: 28%;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.member-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 50rpx 40rpx 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.member-text-time {
|
||||
display: flex;
|
||||
color: #6059e1;
|
||||
margin-top: 20rpx;
|
||||
font-size: 22rpx;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.member-text-time text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-text-top {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.member-text-top-icon {
|
||||
width: 35rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.member-text-top-title {
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.member-text-tips {
|
||||
color: #c1bbeb;
|
||||
font-size: 24rpx;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
|
||||
.member-text-name {
|
||||
display: inline-block;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.member-text-more {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.member-text-tips text {
|
||||
color: #6059e1;
|
||||
}
|
||||
|
||||
.member-text-tips image {
|
||||
width: 22rpx;
|
||||
vertical-align: -3rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
/* 入口 */
|
||||
.entry {
|
||||
padding: 30rpx 15rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.entry-label {
|
||||
flex: 2;
|
||||
margin: 0 15rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
padding-top: 30%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry-label-img,
|
||||
.entry-label-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.entry-label-title {
|
||||
z-index: 9;
|
||||
padding: 25rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.entry-label-title text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-label-english {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.entry-collect .entry-label-title text {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.entry-label-more {
|
||||
font-size: 25rpx;
|
||||
color: #999999;
|
||||
margin-top: 30rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.entry-label-more image {
|
||||
width: 110rpx;
|
||||
display: block;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.entry-goods .entry-label-title {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 8rpx rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.entry-goods-icon {
|
||||
width: 100rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.entry-goods-img {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
bottom: 15rpx;
|
||||
width: 145rpx;
|
||||
animation: rot 3s steps(28) infinite;
|
||||
}
|
||||
|
||||
@keyframes rot {
|
||||
0%,
|
||||
65% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
85% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
95% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rot {
|
||||
0%,
|
||||
65% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
85% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
95% {
|
||||
-webkit-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 每日任务 */
|
||||
.task {
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.taskCont {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
padding: 0 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.taskCont-tab {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
line-height: 100rpx;
|
||||
height: 100rpx;
|
||||
color: #585858;
|
||||
padding-left: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.taskCont-tab-label {
|
||||
flex: 4;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.taskCont-tab-label text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.taskCont-tab-label::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 15%;
|
||||
bottom: 24rpx;
|
||||
background-image: linear-gradient(to right,#ffffff, #ffffff);
|
||||
width: 70%;
|
||||
height: 16rpx;
|
||||
border-radius: 30rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.taskCont-tab-label.active::after {
|
||||
background-image: linear-gradient(to right,#e2e4fe, #ffffff);
|
||||
}
|
||||
|
||||
.taskCont-tab-label.active {
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.taskCont-list {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.taskCont-item {
|
||||
display: flex;
|
||||
margin-bottom: 50rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.taskCont-item:last-child {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-icon {
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-icon image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-text {
|
||||
width: calc(100% - 200rpx);
|
||||
}
|
||||
|
||||
.taskCont-item-title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-tips {
|
||||
color: #949494;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-tips text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-go {
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.taskCont-item-number {
|
||||
font-size: 22rpx;
|
||||
color: #afafaf;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.taskCont-item-number.active {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
.taskCont-item-more {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.taskCont-no {
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.taskCont-no image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
display: block;
|
||||
margin: 0 auto 10rpx;
|
||||
}
|
||||
|
||||
/* 右侧导航 */
|
||||
.rightBack {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 98;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rightBack.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rightNav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-top: 400rpx;
|
||||
width: 80rpx;
|
||||
display: block;
|
||||
margin-right: -2rpx;
|
||||
}
|
||||
|
||||
.rightCont {
|
||||
background-color: #f9f9f9;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.rightNav.active .rightCont {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rightCont-text {
|
||||
padding: 30rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rightCont-text-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rightCont-text-number {
|
||||
font-size: 20rpx;
|
||||
right: 15rpx;
|
||||
top: 15rpx;
|
||||
background-color: #6c79fb;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 10rpx;
|
||||
transform: scale(.9);
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.rightCont-text-name {
|
||||
font-size: 26rpx;
|
||||
background-color: transparent;
|
||||
width: auto !important;
|
||||
margin-bottom: 5rpx;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rightCont-text-tips {
|
||||
font-size: 22rpx;
|
||||
color: #6f6f6f;
|
||||
}
|
||||
|
||||
.rightCont-text-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.rightCont-text-top {
|
||||
text-align: right;
|
||||
margin-bottom: 30rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.rightCont-top-img {
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.rightCont-top-name {
|
||||
color: #d5a56d;
|
||||
font-size: 28rpx;
|
||||
height: 44rpx;
|
||||
position: relative;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
.rightCont-top-name::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 0;
|
||||
bottom: 6rpx;
|
||||
background-image: linear-gradient(to right,#f5d1a9, #ffffff);
|
||||
width: 120rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 30rpx;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rightNav.active .rightCont-top-name::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rightCont-top-name text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.rightCont-top-text {
|
||||
font-size: 22rpx;
|
||||
color: #9f8b73;
|
||||
}
|
||||
|
||||
/* 弹出层提示 */
|
||||
.publicBack {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.publicPop {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 240px;
|
||||
margin-left: -120px;
|
||||
margin-top: -340rpx;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.publicPop-cont {
|
||||
height: 540rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.publicPop-img {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.publicPop-text {
|
||||
color: #9d9d9d;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.publicPop-text text {
|
||||
color: #000000;
|
||||
font-size: 40rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin: 20rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.publicPop-btn {
|
||||
background-color: #1d37e2;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
line-height: 78rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.publicPop-close {
|
||||
text-align: center;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.publicPop-close image {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user