锶源昆仑会员+体验官
This commit is contained in:
107
pages/mall/article/articleAll/index.js
Normal file
107
pages/mall/article/articleAll/index.js
Normal file
@@ -0,0 +1,107 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
categoriesArr: '', //分类
|
||||
articlesArr : [] , //列表
|
||||
page : {}, //分页信息
|
||||
listType : 0, //类型
|
||||
name : '', //名称
|
||||
lodingStats : false, //加载状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取分类
|
||||
this.classifysInfo();
|
||||
|
||||
// 获取列表
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
// 分类
|
||||
classifysInfo(){
|
||||
wx.$api.mall.classifysAll().then(res => {
|
||||
let Arr = res.data
|
||||
let valueFirst = {
|
||||
category_id: 0,
|
||||
slug : "ALL",
|
||||
title : "全部"
|
||||
}
|
||||
Arr.unshift(valueFirst)
|
||||
this.setData({
|
||||
categoriesArr : Arr
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
// 列表
|
||||
articlesInfo(page){
|
||||
wx.$api.mall.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.data)
|
||||
this.setData({
|
||||
articlesArr : newData,
|
||||
page : res.data.page,
|
||||
lodingStats : false
|
||||
})
|
||||
wx.stopPullDownRefresh()
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 状态筛选
|
||||
*/
|
||||
onTabs(val){
|
||||
console.log(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/mall/article/articleAll/index.json
Normal file
4
pages/mall/article/articleAll/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "文章列表"
|
||||
}
|
||||
31
pages/mall/article/articleAll/index.wxml
Normal file
31
pages/mall/article/articleAll/index.wxml
Normal file
@@ -0,0 +1,31 @@
|
||||
<view class="header">
|
||||
<view class="tabs">
|
||||
<view wx:for="{{categoriesArr}}" wx:key="categoriesArr" 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/mall/article/articleInfo/index?id={{item.article_id}}&type={{name}}" class="item" wx:for="{{articlesArr}}" wx:key="articlesArr">
|
||||
<view class="itemCont">
|
||||
<view class="nowrap itemCont-name"><text>{{item.categories[0].slug}}</text> | {{item.title}}</view>
|
||||
<view class="nowrap itemCont-text">{{item.description}}</view>
|
||||
<view class="itemCont-see">
|
||||
<view class="itemCont-icon"><image src="https://api.siyuankunlun.com/storage/materials/2022/10/11/articleIcon_00.png"></image> {{item.clicks}}</view>
|
||||
<view class="itemCont-icon"><image src="https://api.siyuankunlun.com/storage/materials/2022/10/11/articleIcon_01.png"></image>{{item.subscribes}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="itemImg" mode="aspectFill" src="{{item.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/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
99
pages/mall/article/articleAll/index.wxss
Normal file
99
pages/mall/article/articleAll/index.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;
|
||||
}
|
||||
137
pages/mall/article/articleInfo/index.js
Normal file
137
pages/mall/article/articleInfo/index.js
Normal file
@@ -0,0 +1,137 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
id : '', //文章id
|
||||
indexShow : '', //内容
|
||||
mallContent : '', //简介
|
||||
favoritesSee : '', //收藏状态
|
||||
favoritesNumber : '', //收藏数量
|
||||
subscribesSee : '', //点赞状态
|
||||
subscribesNumber: '', //点赞数量
|
||||
inviteText : '', //邀请码
|
||||
isFixedTop : 0,
|
||||
barHeight : getApp().globalData.statusBarHeight // 状态栏高度
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
id: options.id
|
||||
})
|
||||
if (options.type == 'memory') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '锶源昆仑·记忆'
|
||||
})
|
||||
} else if (options.type == 'wiki') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '锶源昆仑·健康百科'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取详情数据
|
||||
this.indexInfo();
|
||||
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
// 获取推广码
|
||||
this.inviteInfo();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 推广码
|
||||
*/
|
||||
inviteInfo() {
|
||||
wx.$api.user.invite().then(res => {
|
||||
this.setData({
|
||||
inviteText : res.data.invite
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 详情数据
|
||||
*/
|
||||
indexInfo () {
|
||||
wx.$api.mall.articlesSee(this.data.id).then(res => {
|
||||
this.setData({
|
||||
indexShow : res.data,
|
||||
favoritesSee : res.data.isFavorite,
|
||||
subscribesSee : res.data.isSubscribed,
|
||||
favoritesNumber : res.data.favorites,
|
||||
subscribesNumber: res.data.subscribes,
|
||||
mallContent : res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
// 操作按钮
|
||||
toolTap(e) {
|
||||
let newName = e.currentTarget.dataset.name
|
||||
// 收藏
|
||||
if(newName == 'favorites') {
|
||||
wx.$api.mall.favorite(this.data.id).then(res => {
|
||||
this.setData({
|
||||
favoritesSee : res.data.favorite,
|
||||
favoritesNumber: res.data.count
|
||||
})
|
||||
}).catch(err => {})
|
||||
return
|
||||
}
|
||||
|
||||
// 点赞
|
||||
wx.$api.mall.subscribe(this.data.id).then(res => {
|
||||
this.setData({
|
||||
subscribesSee : res.data.subscribed,
|
||||
subscribesNumber: res.data.count
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage(){
|
||||
return {
|
||||
title : this.data.indexShow.title,
|
||||
imageUrl: this.data.indexShow.cover
|
||||
}
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
returnGo() {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
|
||||
returnHome() {
|
||||
wx.switchTab({
|
||||
url: '/pages/mall/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听页面滑动事件
|
||||
*/
|
||||
onPageScroll(e) {
|
||||
this.setData({
|
||||
isFixedTop: parseInt(e.scrollTop)
|
||||
});
|
||||
},
|
||||
})
|
||||
5
pages/mall/article/articleInfo/index.json
Normal file
5
pages/mall/article/articleInfo/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
40
pages/mall/article/articleInfo/index.wxml
Normal file
40
pages/mall/article/articleInfo/index.wxml
Normal file
@@ -0,0 +1,40 @@
|
||||
<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
|
||||
<image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/arrowBlack.png' : '/static/icons/arrowWrite.png'}}"></image>
|
||||
<image bindtap="returnHome" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/homeBlack.png' : '/static/icons/homeWrite.png'}}"></image>
|
||||
</view>
|
||||
|
||||
<image class="articleImg" src="{{indexShow.cover}}" mode="widthFix"></image>
|
||||
<view class="articleCont">
|
||||
<view class="articleTop">
|
||||
<view class="articleName">
|
||||
<text>{{indexShow.categories[0].slug}}</text> | {{indexShow.title}}
|
||||
</view>
|
||||
<view class="articleTool">
|
||||
<text>{{indexShow.created_at}}</text>
|
||||
<text>浏览 {{indexShow.clicks}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="articleBanner">
|
||||
<image mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/articleBanner.jpg"></image>
|
||||
</view>
|
||||
<view class="articleText">
|
||||
<rich-text nodes="{{mallContent}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tool">
|
||||
<view class="toolCont">
|
||||
<button class="toolCont-label" open-type="share" hover-class="none">
|
||||
<image class="toolCont-label-icon" src="/static/icons/articleIcon_01.png"></image>
|
||||
<text>转发</text>
|
||||
</button>
|
||||
<view class="toolCont-label" bindtap="toolTap" data-name="favorites">
|
||||
<image class="toolCont-label-icon" src="{{!favoritesSee ? '/static/icons/articleIcon_02.png' : '/static/icons/articleIcon_02_active.png'}}"></image>
|
||||
<text>{{favoritesNumber}}</text>
|
||||
</view>
|
||||
<view class="toolCont-label" bindtap="toolTap" data-name="subscribes">
|
||||
<image class="toolCont-label-icon" src="{{!subscribesSee ? '/static/icons/articleIcon_03.png' : '/static/icons/articleIcon_03_active.png'}}"></image>
|
||||
<text>{{subscribesNumber}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
102
pages/mall/article/articleInfo/index.wxss
Normal file
102
pages/mall/article/articleInfo/index.wxss
Normal file
@@ -0,0 +1,102 @@
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.articleImg {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.articleCont {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 160rpx transparent solid;
|
||||
}
|
||||
|
||||
.articleName {
|
||||
font-size: 36rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.articleName text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.articleTool {
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.articleTool text {
|
||||
padding-right: 30rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.articleBanner {
|
||||
text-align: center;
|
||||
margin: 60rpx 0;
|
||||
}
|
||||
|
||||
.articleBanner image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tool {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
left: 0;
|
||||
bottom: 60rpx;
|
||||
z-index: 99;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolCont {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
|
||||
border-radius: 80rpx;
|
||||
}
|
||||
|
||||
.toolCont-label {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 30rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 100rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.toolCont-label-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: -4rpx;
|
||||
}
|
||||
|
||||
.navigation{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
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;
|
||||
}
|
||||
92
pages/mall/article/articleList/index.js
Normal file
92
pages/mall/article/articleList/index.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
articlesArr : [] , //列表
|
||||
page : {}, //分页信息
|
||||
type : '', //类型
|
||||
name : '', //名称
|
||||
lodingStats : false, //加载状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
this.setData({
|
||||
type: options.type
|
||||
})
|
||||
if (options.type == '1') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '锶源昆仑·记忆'
|
||||
})
|
||||
this.setData({
|
||||
name: 'memory'
|
||||
})
|
||||
} else if (options.type == '2') {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '锶源昆仑·健康百科'
|
||||
})
|
||||
this.setData({
|
||||
name: 'wiki'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取列表
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
// 列表
|
||||
articlesInfo(page){
|
||||
wx.$api.mall.articlesList({
|
||||
category_id : this.data.type,
|
||||
page : page || 1
|
||||
}).then(res => {
|
||||
let listArr = this.data.articlesArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.data.data)
|
||||
this.setData({
|
||||
articlesArr : newData,
|
||||
page : res.data.page,
|
||||
lodingStats : false
|
||||
})
|
||||
wx.stopPullDownRefresh()
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
// 获取列表
|
||||
this.articlesInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 上拉加载
|
||||
*/
|
||||
onReachBottom(){
|
||||
this.setData({
|
||||
lodingStats: true
|
||||
})
|
||||
let pageNumber = this.data.page.current
|
||||
if(this.data.page.has_more){
|
||||
pageNumber++
|
||||
// 获取列表
|
||||
this.articlesInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
})
|
||||
3
pages/mall/article/articleList/index.json
Normal file
3
pages/mall/article/articleList/index.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
25
pages/mall/article/articleList/index.wxml
Normal file
25
pages/mall/article/articleList/index.wxml
Normal file
@@ -0,0 +1,25 @@
|
||||
<view class="list" wx:if="{{articlesArr.length > 0}}">
|
||||
<navigator hover-class="none" url="../articleInfo/index?id={{item.article_id}}&type={{name}}" class="item" wx:for="{{articlesArr}}" wx:key="articlesArr">
|
||||
<view class="itemCont">
|
||||
<view class="nowrap itemCont-name"><text>{{item.categories[0].slug}}</text> | {{item.title}}</view>
|
||||
<view class="nowrap itemCont-text">{{item.description}}</view>
|
||||
<view class="itemCont-see">
|
||||
<view class="itemCont-icon"><image src="https://api.siyuankunlun.com/storage/materials/2022/10/11/articleIcon_00.png"></image> {{item.clicks}}</view>
|
||||
<view class="itemCont-icon"><image src="https://api.siyuankunlun.com/storage/materials/2022/10/11/articleIcon_01.png"></image>{{item.subscribes}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="itemImg" mode="aspectFill" src="{{item.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/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
66
pages/mall/article/articleList/index.wxss
Normal file
66
pages/mall/article/articleList/index.wxss
Normal file
@@ -0,0 +1,66 @@
|
||||
page {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
102
pages/mall/buy/index.js
Normal file
102
pages/mall/buy/index.js
Normal file
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
avatar : '', //用户头像
|
||||
nickName : '', //用户昵称
|
||||
identity : '', //用户身份
|
||||
goodId : '', //商品id
|
||||
surplus : '', //我的水滴
|
||||
mallData : '', //商品详情
|
||||
mallContent : '', //商品介绍
|
||||
userLogin : '', //登录状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
goodId: options.id
|
||||
})
|
||||
|
||||
// 获取商品详情
|
||||
this.goodInfo(options.id);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
if(wx.getStorageSync("token")){
|
||||
this.setData({
|
||||
userLogin: true
|
||||
})
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
userInfo() {
|
||||
wx.$api.user.userIndex().then(res => {
|
||||
this.setData({
|
||||
avatar : res.data.avatar,
|
||||
nickName : res.data.nickname,
|
||||
identity : res.data.identity,
|
||||
surplus : res.data.account.score.surplus
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 商品详情
|
||||
*/
|
||||
goodInfo(id) {
|
||||
wx.$api.mall.goodsShow(id).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 => {})
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 放大轮播相册图片
|
||||
*/
|
||||
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]
|
||||
})
|
||||
},
|
||||
|
||||
// 购买
|
||||
buyTap(e) {
|
||||
if(wx.getStorageSync("token")){
|
||||
wx.navigateTo({
|
||||
url: '../submit/index?skuid=' + this.data.mallData.skus[0].sku_id + '&goodsid=' + this.data.mallData.goods_id + '&qty=' + 1,
|
||||
})
|
||||
}else {
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
4
pages/mall/buy/index.json
Normal file
4
pages/mall/buy/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "水滴商城"
|
||||
}
|
||||
69
pages/mall/buy/index.wxml
Normal file
69
pages/mall/buy/index.wxml
Normal file
@@ -0,0 +1,69 @@
|
||||
<!-- 轮播 -->
|
||||
<view class="banner">
|
||||
<swiper class="swiperCont" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay="true">
|
||||
<swiper-item data-index="{{index}}" data-imgs="{{mallData.pictures}}" bindtap="opneBanner" wx:for="{{mallData.pictures}}" wx:key="arr">
|
||||
<image class="swiperImg" src="{{item}}" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 用户 -->
|
||||
<view class="user-cont" wx:if="{{userLogin}}">
|
||||
<view class="user-head">
|
||||
<image class="user-avatar" src="{{avatar || '/static/imgs/default_myHead.png'}}" mode="aspectFill"></image>
|
||||
<image wx:if="{{identity.order != '1'}}" class="user-ancrown" src="http://api.siyuankunlun.com/storage/materials/2022/09/14/ancrown.png" mode=""></image>
|
||||
</view>
|
||||
<view class="user-text">
|
||||
<view class="user-top">
|
||||
<view class="user-name">
|
||||
{{nickName}}
|
||||
</view>
|
||||
<view class="user-icon">
|
||||
<image wx:if="{{userData.is_partner}}" src="/static/icons/userIcon_01.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<image wx:if="{{identity.order == '1'}}" class="user-identity" src="/static/icons/member_01.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '2'}}" class="user-identity" src="/static/icons/member_02.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '3'}}" class="user-identity" src="/static/icons/member_03.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '4'}}" class="user-identity" src="/static/icons/member_04.png" mode="widthFix"></image>
|
||||
<image wx:elif="{{identity.order == '5'}}" class="user-identity" src="/static/icons/member_05.png" mode="widthFix"></image>
|
||||
<image wx:else src="/static/icons/member_06.png" class="user-identity" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="water">
|
||||
<image src="/static/icons/waterDrop.png"></image>{{surplus}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goodsInfo">
|
||||
<view class="goodsInfo-name">
|
||||
{{mallData.name}}
|
||||
</view>
|
||||
<view class="goodsInfo-info">
|
||||
<!-- <view class="goodsInfo-price">
|
||||
{{mallData.price.show}}<view class="goodsInfo-price-symbol">水滴</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 产品详情 -->
|
||||
<view class="detailsBrief">
|
||||
<view class="detailsBrief-title">
|
||||
产品详情
|
||||
</view>
|
||||
<view class="detailsBrief-img">
|
||||
<!-- <view class="detailsBrief-text">{{mallData.description}}</view> -->
|
||||
<!-- <view class="detailsBrief-back" wx:if="{{mallData.content.length > 0}}">
|
||||
<image src="{{item}}" data-index="{{index}}" data-imgs="{{mallData.content}}" bindtap="opneImg" mode="widthFix" wx:for="{{mallData.content}}" wx:key="content"></image>
|
||||
</view> -->
|
||||
<view class="detailsBrief-back">
|
||||
<rich-text nodes="{{mallContent}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-info-footer {{barHeight > 30 ? 'iphoneX':''}}">已经到底拉，在往上逛一逛吧</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="footer">
|
||||
<view class="number">需<text>{{mallData.price.show}}</text>水滴</view>
|
||||
<view bindtap="buyTap" class="btn">立即兑换</view>
|
||||
</view> -->
|
||||
232
pages/mall/buy/index.wxss
Normal file
232
pages/mall/buy/index.wxss
Normal file
@@ -0,0 +1,232 @@
|
||||
page {
|
||||
background-color: #f3f3f5;
|
||||
}
|
||||
|
||||
/* 产品轮播 */
|
||||
|
||||
.banner {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.swiperCont,
|
||||
.swiperImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 用户 */
|
||||
.user-cont {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-head {
|
||||
position: relative;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #ffe0a8;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-ancrown {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
right: 0;
|
||||
top: -34rpx;
|
||||
}
|
||||
|
||||
.user-text {
|
||||
height: 120rpx;
|
||||
width: calc(100% - 120rpx);
|
||||
padding-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-top {
|
||||
display: flex;
|
||||
line-height: 58rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #ffffff;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.user-icon image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin: 12rpx 0 0 5rpx;
|
||||
}
|
||||
|
||||
.user-identity {
|
||||
margin-top: 5rpx;
|
||||
width: 120rpx;
|
||||
}
|
||||
|
||||
.water {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 30rpx 30rpx 30rpx 0;
|
||||
padding: 0 15rpx 0 10rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.water image {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin: 6rpx 5rpx 0 0;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.goodsInfo {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.goodsInfo-name {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.goodsInfo-info {
|
||||
display: flex;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.goodsInfo-price {
|
||||
font-size: 36rpx;
|
||||
color: #df723a;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.goodsInfo-price-symbol {
|
||||
font-size: 28rpx;
|
||||
display: inline-block;
|
||||
margin-left: 10rpx;}
|
||||
|
||||
.goodsInfo-price-see {
|
||||
font-weight: normal;
|
||||
color: #959595;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 产品详情 */
|
||||
.detailsBrief {
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 60px solid transparent;
|
||||
}
|
||||
|
||||
.detailsBrief-title {
|
||||
position: relative;
|
||||
font-size: 32rpx;
|
||||
height: 70rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.goods-info-footer {
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #747788;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.detailsBrief-text {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.detailsBrief-back {
|
||||
text-align: center;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cardcase-like-online {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
border: solid 2rpx #d8c283;
|
||||
color: #c7a232;
|
||||
border-radius: 4rpx;
|
||||
display: inline-block;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 10rpx;
|
||||
margin: 2rpx 10rpx;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #FFFFFF;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
padding: 8px 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.number {
|
||||
flex: 1;
|
||||
line-height: 44px;
|
||||
color: #6c78f8;
|
||||
}
|
||||
|
||||
.number text {
|
||||
padding: 0 5rpx;
|
||||
font-weight: 600;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #6c78f8;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
border-radius: 60rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.detailsBrief-back{
|
||||
width: 100%;
|
||||
}
|
||||
77
pages/mall/details/index.js
Normal file
77
pages/mall/details/index.js
Normal file
@@ -0,0 +1,77 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
goodsData : '', //详情
|
||||
sign : '', //签收
|
||||
express : '', //物流
|
||||
orderNo : '' //订单号
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
orderNo: options.orderNo
|
||||
})
|
||||
|
||||
// 订单详情
|
||||
this.goodsInfo(options.orderNo);
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
// 获取订单详情
|
||||
goodsInfo(orderNo) {
|
||||
wx.$api.user.goodsDet(orderNo).then(res => {
|
||||
this.setData({
|
||||
goodsData : res.data,
|
||||
sign : res.data.can.sign,
|
||||
express : res.data.express
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
// 复制订单号
|
||||
copyUrl(val) {
|
||||
wx.setClipboardData({
|
||||
data: val.currentTarget.dataset.no,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: "复制成功",
|
||||
icon : "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 订单签收
|
||||
signClick() {
|
||||
wx.showModal({
|
||||
title : '提示',
|
||||
content : '是否签收',
|
||||
success : res=> {
|
||||
if (res.confirm) {
|
||||
wx.$api.user.goodsSign(this.data.orderNo).then(res => {
|
||||
wx.showToast({
|
||||
title:'签收成功',
|
||||
icon:'none'
|
||||
})
|
||||
wx.navigateBack()
|
||||
}).catch(err => {})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
4
pages/mall/details/index.json
Normal file
4
pages/mall/details/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
80
pages/mall/details/index.wxml
Normal file
80
pages/mall/details/index.wxml
Normal file
@@ -0,0 +1,80 @@
|
||||
<view class="orderData">
|
||||
<view class="While">
|
||||
<view class="orderData-cont-label">
|
||||
<image class="orderData-cont-img" src="/static/icons/orderIcon_01.png" mode="aspectFill"></image>
|
||||
<view class="orderData-cont-text">
|
||||
<view class="orderData-cont-name">订单编号</view>
|
||||
<view class="orderData-cont-copy">
|
||||
<text class="nowrap">{{ goodsData.order_no }}</text>
|
||||
<view bindtap="copyUrl" data-no="{{goodsData.order_no}}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderData-cont-label">
|
||||
<image class="orderData-cont-img" src="/static/icons/orderIcon_00.png" mode="aspectFill"></image>
|
||||
<view class="orderData-cont-text">
|
||||
<view class="orderData-cont-name">{{ goodsData.express.name }} <text>{{ goodsData.express.mobile }}</text></view>
|
||||
<view class="orderData-cont-copy">
|
||||
{{ goodsData.express.full_address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="While orderGoods">
|
||||
<view class="orderGoods-wares" wx:for="{{goodsData.items}}" wx:key="items">
|
||||
<!-- 先默认固定图 -->
|
||||
<image class="orderGoods-img" src="http://api.siyuankunlun.com/storage/materials/2022/09/14/photo.png" mode="widthFix"></image>
|
||||
<view class="orderGoods-cont">
|
||||
<view class="nowrap orderGoods-name">{{ item.sku.goods_name }}</view>
|
||||
<view class="orderGoods-price">
|
||||
<view class="orderGoods-number">{{ item.price }}</view><text>x{{ item.qty }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="While reserveCont">
|
||||
<view class="reserveCont-title">订单信息</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">交易时间</view>
|
||||
<view class="reserve-text">{{ goodsData.created_at }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">总水滴数</view>
|
||||
<view class="reserve-text reserve-red">{{ goodsData.amount }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">运费金额</view>
|
||||
<view class="reserve-text">{{ goodsData.freight == 0 ? '免邮' : goodsData.freight }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">交易状态</view>
|
||||
<view class="reserve-text green">{{ goodsData.state }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While reserveCont" wx:if="{{express.express_name}}">
|
||||
<view class="reserveCont-title">物流信息</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">物流公司</view>
|
||||
<view class="reserve-text">{{ express.express_name }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">收货姓名</view>
|
||||
<view class="reserve-text green">{{ express.name }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">收货电话</view>
|
||||
<view class="reserve-text green">{{ express.mobile }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">物流单号</view>
|
||||
<view class="reserve-text">{{ express.express_no }}<view class="reserve-copy" bindtap="copyUrl" data-no="{{express.express_no}}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-data-footer">
|
||||
<navigator hover-class="none" class="order-btn" open-type="navigateBack">返回订单</navigator>
|
||||
<view class="order-btn" bindtap="signClick" wx:if="{{sign}}">签收订单</view>
|
||||
</view>
|
||||
202
pages/mall/details/index.wxss
Normal file
202
pages/mall/details/index.wxss
Normal file
@@ -0,0 +1,202 @@
|
||||
page {
|
||||
background: #f3f4f6;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.orderData {
|
||||
border-bottom: 70rpx transparent solid;
|
||||
|
||||
}
|
||||
|
||||
/* 订单 */
|
||||
.orderData-cont-label {
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border-bottom: #f2f2f2 2rpx solid;
|
||||
}
|
||||
|
||||
.orderData-cont-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.orderData-cont-text {
|
||||
width: calc(100% - 68rpx);
|
||||
margin-left: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.orderData-cont-name {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.orderData-cont-name text {
|
||||
color: #999;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.orderData-cont-copy {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.orderData-cont-copy text {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.orderData-cont-copy view {
|
||||
color: #eb504c;
|
||||
}
|
||||
|
||||
/* 产品 */
|
||||
.orderGoods {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.orderGoods-wares {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.orderGoods-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 2rpx solid #dddddd;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.orderGoods-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding-left: 130rpx;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.orderGoods-text {
|
||||
margin: 20rpx 0 30rpx;
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.orderGoods-price {
|
||||
display: flex;
|
||||
color: #555555;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.orderGoods-number {
|
||||
flex: 1;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.orderGoods-price text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.reserve-red {
|
||||
font-weight: 600;
|
||||
color: #1d37e2;
|
||||
}
|
||||
|
||||
.orderGoods-brief {
|
||||
display: flex;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.orderGoods-brief view {
|
||||
flex: 1;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.orderGoods-brief text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 规格 */
|
||||
.reserveCont-title {
|
||||
font-weight: 600;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.reserve-label {
|
||||
display: flex;
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.reserve-name {
|
||||
flex: 1;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
|
||||
.reserve-text {
|
||||
width: calc(100% - 240rpx);
|
||||
text-align: right;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.reserve-text.reserve-price {
|
||||
font-weight: 600;
|
||||
color: #1d37e2;
|
||||
}
|
||||
|
||||
.reserve-copy {
|
||||
color: #6774ff;
|
||||
border: #6774ff 2rpx solid;
|
||||
display: inline-block;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
font-size: 26rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* 底部菜单 */
|
||||
.order-data-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: solid 1rpx #f2f2f2;
|
||||
padding-top: 17rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
height: 83rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
margin-left: 20rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
box-sizing: border-box;
|
||||
border: solid 1rpx #747788;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
71
pages/mall/exhibition/index.js
Normal file
71
pages/mall/exhibition/index.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// pages/mall/exhibition/index.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
detailsImg: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 商品详情数据
|
||||
wx.$api.index.goods(1).then(res => {
|
||||
this.setData({
|
||||
detailsImg: res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
4
pages/mall/exhibition/index.json
Normal file
4
pages/mall/exhibition/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "体验官活动"
|
||||
}
|
||||
8
pages/mall/exhibition/index.wxml
Normal file
8
pages/mall/exhibition/index.wxml
Normal file
@@ -0,0 +1,8 @@
|
||||
<view class="exhibition">
|
||||
<view class="exhibition-img">
|
||||
<rich-text nodes="{{detailsImg}}"></rich-text>
|
||||
</view>
|
||||
<view class="exhibition-btn">
|
||||
<navigator hover-class="none" url="/pages/index/index" open-type="switchTab" class="exhibition-btn-go">点击参与活动</navigator>
|
||||
</view>
|
||||
</view>
|
||||
23
pages/mall/exhibition/index.wxss
Normal file
23
pages/mall/exhibition/index.wxss
Normal file
@@ -0,0 +1,23 @@
|
||||
/* 申请体验馆 */
|
||||
.exhibition-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.exhibition-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.exhibition-btn-go {
|
||||
background-color: #e8c198;
|
||||
color: #442b11;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
246
pages/mall/index/index.js
Normal file
246
pages/mall/index/index.js
Normal file
@@ -0,0 +1,246 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
BarHeight : '',
|
||||
indicatorDots: false,
|
||||
vertical : false,
|
||||
autoplay : false,
|
||||
interval : 2000,
|
||||
duration : 500,
|
||||
previousmargin: '40rpx',//前边距
|
||||
nextmargin : '40rpx',//后边距
|
||||
otherCurrent : 1,
|
||||
goodsArr : [], //商品
|
||||
bannersArr : [], //轮播商品
|
||||
surplus : '', //水滴量
|
||||
healthsArr : [], //健康文章
|
||||
centerInfo : [], //体验官介绍
|
||||
serviceMobile: '', //客服电话
|
||||
categories : '', //详情分类
|
||||
userLogin : '', //是否登录
|
||||
videos : '',
|
||||
videoFlx : false, //视频定位
|
||||
showGoods : '', //默认商品
|
||||
waterMobile : '', //电话
|
||||
memoryCurrent: 0,
|
||||
videoState : true, //第一个视频是否加载
|
||||
videoFilex : true, //第二个视频是否加载
|
||||
|
||||
// 记忆
|
||||
startX : 0,
|
||||
endX : 0,
|
||||
iCenter : 3,
|
||||
datas: [],
|
||||
order: []
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
BarHeight: getApp().globalData.systInfo.statusBarHeight + wx.getMenuButtonBoundingClientRect().height
|
||||
})
|
||||
this.__set__();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取首页数据
|
||||
this.indexInfo();
|
||||
|
||||
// 获取登录状态
|
||||
if(wx.getStorageSync("token")){
|
||||
this.setData({
|
||||
userLogin: true
|
||||
})
|
||||
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 首页数据
|
||||
*/
|
||||
indexInfo (e) {
|
||||
wx.$api.mall.index().then(res => {
|
||||
this.setData({
|
||||
goodsArr : res.data.goods,
|
||||
showGoods : res.data.show_goods,
|
||||
bannersArr : res.data.banners,
|
||||
videos : res.data.videos[0],
|
||||
healthsArr : res.data.healths,
|
||||
datas : res.data.memories,
|
||||
centerInfo : res.data.center[0],
|
||||
categories : res.data.categories,
|
||||
waterMobile : res.data.water_mobile
|
||||
})
|
||||
this.move();
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
*/
|
||||
userInfo() {
|
||||
wx.$api.user.userIndex().then(res => {
|
||||
this.setData({
|
||||
surplus : res.data.account.score.surplus,
|
||||
serviceMobile : res.data.service.mobile,
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 轮播图的切换事件
|
||||
*/
|
||||
swiperOther (e) {
|
||||
this.setData({
|
||||
otherCurrent: e.detail.current //获取当前轮播图片的下标
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转文章列表
|
||||
*/
|
||||
tapMore(e){
|
||||
console.log(e)
|
||||
wx.navigateTo({
|
||||
url: '../article/articleList/index?type=' + e.currentTarget.dataset.type
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
phoneCall(){
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: this.data.waterMobile
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理未登录时的转跳
|
||||
*/
|
||||
userNav(e){
|
||||
let pageUrl = e.currentTarget.dataset.url
|
||||
if(wx.getStorageSync("token")){
|
||||
wx.navigateTo({
|
||||
url: pageUrl
|
||||
})
|
||||
}else{
|
||||
// 去登录
|
||||
wx.navigateTo({
|
||||
url: "/pages/login/index"
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听页面滚动
|
||||
*/
|
||||
bestScroll(e){
|
||||
if(e.detail.scrollTop >= this.data.systInfo.safeArea.width && !this.data.videoFlx){
|
||||
this.setData({
|
||||
videoFlx: true
|
||||
})
|
||||
}else if(e.detail.scrollTop < this.data.systInfo.safeArea.width && this.data.videoFlx){
|
||||
this.setData({
|
||||
videoFlx: false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
move () {
|
||||
var datas = this.data.datas;
|
||||
/*图片分布*/
|
||||
for (var i = 0; i < datas.length; i++) {
|
||||
var data = datas[i];
|
||||
var animation = wx.createAnimation({
|
||||
duration: 200
|
||||
});
|
||||
animation.translateX(data.left).step();
|
||||
this.setData({
|
||||
["datas[" + i + "].animation"]: animation.export(),
|
||||
["datas[" + i + "].zIndex"]: data.zIndex
|
||||
})
|
||||
}
|
||||
},
|
||||
/**左箭头 */
|
||||
left: function () {
|
||||
var last = this.data.datas.pop(); //获取数组的最后一个
|
||||
this.data.datas.unshift(last);//放到数组的第一个
|
||||
var orderFirst = this.data.order.shift();
|
||||
this.data.order.push(orderFirst);
|
||||
this.move();
|
||||
},
|
||||
/** */
|
||||
right: function () {
|
||||
var first = this.data.datas.shift(); //获取数组的第一个
|
||||
this.data.datas.push(first);//放到数组的最后一个位置
|
||||
var orderLast = this.data.order.pop();
|
||||
this.data.order.unshift(orderLast);
|
||||
this.move();
|
||||
},
|
||||
/**新的排列复制到新的数组中 */
|
||||
__set__: function () {
|
||||
var that = this;
|
||||
var order = that.data.order;
|
||||
var datas = that.data.datas;
|
||||
for (var i = 0; i < datas.length; i++) {
|
||||
that.setData({
|
||||
["order[" + i + "]"]: datas[i].id
|
||||
})
|
||||
}
|
||||
},
|
||||
//手指触发开始移动
|
||||
moveStart (e) {
|
||||
var startX = e.changedTouches[0].pageX;
|
||||
this.setData({
|
||||
startX : startX
|
||||
});
|
||||
|
||||
},
|
||||
//手指触摸后移动完成触发事件
|
||||
moveItem (e) {
|
||||
var that = this;
|
||||
var endX = e.changedTouches[0].pageX;
|
||||
this.setData({
|
||||
endX: endX
|
||||
});
|
||||
//计算手指触摸偏移剧距离
|
||||
var moveX = this.data.startX - this.data.endX;
|
||||
//向左移动
|
||||
if (moveX > 20) {
|
||||
this.left();
|
||||
}
|
||||
if (moveX < -20) {
|
||||
this.right();
|
||||
}
|
||||
},
|
||||
|
||||
// 第一个播放进度变化时触发
|
||||
bindloadedOne() {
|
||||
this.setData({
|
||||
videoState: false
|
||||
})
|
||||
},
|
||||
|
||||
// 第二个播放进度变化时触发
|
||||
bindloadedTwo() {
|
||||
this.setData({
|
||||
videoFilex: false
|
||||
})
|
||||
},
|
||||
})
|
||||
5
pages/mall/index/index.json
Normal file
5
pages/mall/index/index.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
198
pages/mall/index/index.wxml
Normal file
198
pages/mall/index/index.wxml
Normal file
@@ -0,0 +1,198 @@
|
||||
<view class="page-section">
|
||||
<!-- <swiper class="page-swiper" indicator-dots="{{indicatorDots}}" easing-function="easeInOutCubic" circular="100" autoplay vertical duration="2000">
|
||||
<swiper-item wx:for="{{bannersArr}}" wx:key="bannersArr" catchtouchmove='onTouchMove'>
|
||||
<image src="{{item.cover}}"></image>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
<image class="videoCover" wx:if="{{videoState}}" src="https://api.siyuankunlun.com/storage/materials/2022/10/13/cover.png"></image>
|
||||
<video class="page-swiper" show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" custom-cache="{{false}}" controls="{{false}}" bindloadedmetadata="bindloadedOne" object-fit="fill" loop autoplay picture-in-picture-mode="pop" src="https://api.siyuankunlun.com/storage/videos/2022/10/11/5899a6029e623ef523ff67354ee3f698.mp4"></video>
|
||||
<view class="backView"></view>
|
||||
<!-- <view class="tips">
|
||||
<view class="btn number">
|
||||
<image src="/static/icons/waterDrop.png"></image>{{showGoods.price.show}}水滴/箱
|
||||
</view>
|
||||
<view bindtap="userNav" data-url="../buy/index?id={{showGoods.goods_id}}" class="btn">
|
||||
立即兑换
|
||||
</view>
|
||||
</view>
|
||||
<image class="indexTop" src="/static/icons/indextop.png"></image> -->
|
||||
</view>
|
||||
|
||||
<view class="drift" style="top: {{BarHeight}}px" wx:if="{{userLogin}}">
|
||||
<view class="title">
|
||||
<text>水滴</text>
|
||||
</view>
|
||||
<view class="balance">
|
||||
<image src="/static/icons/waterDrop.png"></image>{{surplus}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 水视频 -->
|
||||
<view class="videos" id="video">
|
||||
<view class="videos-filex-view {{videoFlx ? 'filex' : ''}}">
|
||||
<image class="videos-cover" wx:if="{{videoFilex}}" src="https://api.siyuankunlun.com/storage/images/2022/09/29/10defdd282968b28203e2a9c5b6e7806.png"></image>
|
||||
<video class="video" bindloadedmetadata="bindloadedTwo" object-fit="cover" custom-cache="{{false}}" loop autoplay picture-in-picture-mode="pop" src="{{videos.path}}"></video>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他商品 -->
|
||||
<view class="other">
|
||||
<view class="content">
|
||||
<view class="publicTitle">
|
||||
<text>other</text>
|
||||
<view class="lighter">其他商品</view>
|
||||
<image class="goldenLogo" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/goldenLogo.png"></image>
|
||||
</view>
|
||||
<view class="other-swiper">
|
||||
<swiper previous-margin="{{previousmargin}}" circular centeredSlides="true" next-margin="{{nextmargin}}" bindchange="swiperOther" current="{{otherCurrent}}">
|
||||
<navigator hover-class="none" url="../buy/index?id={{item.goods_id}}" wx:for="{{goodsArr}}" wx:key="goodsArr">
|
||||
<swiper-item class="slide-image">
|
||||
<view class="box">
|
||||
<image class="{{index == otherCurrent ? ' active' : ''}}" src="{{item.cover}}" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="otherText">古海冰泉造就不凡</view>
|
||||
<view class="othertitle">{{item.name}}</view>
|
||||
<view class="name">{{item.price.show}}水滴/箱</view>
|
||||
</swiper-item>
|
||||
</navigator>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用水指南 -->
|
||||
<view class="other">
|
||||
<view class="content">
|
||||
<view class="publicTitle">
|
||||
<text>guide</text>
|
||||
<view class="lighter">用水指南</view>
|
||||
<image class="goldenLogo" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/guideLogo.png"></image>
|
||||
</view>
|
||||
<view class="guide">
|
||||
<view class="guide-label">
|
||||
<view class="guide-top">
|
||||
<view class="guide-english">temperature</view>
|
||||
<view class="guide-name">最佳水温饮用</view>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<view class="guide-cell">
|
||||
<text>加热至40-50度</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="guide-icon" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/guide_01.png"></image>
|
||||
</view>
|
||||
<view class="guide-label">
|
||||
<view class="guide-top">
|
||||
<view class="guide-english">quantity</view>
|
||||
<view class="guide-name">最佳饮水量</view>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<text>每日饮用4瓶~6瓶</text>
|
||||
<text>(2000mL-3000ml)</text>
|
||||
</view>
|
||||
<image class="guide-icon" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/guide_02.png"></image>
|
||||
</view>
|
||||
<view class="guide-label">
|
||||
<view class="guide-top">
|
||||
<view class="guide-english">time</view>
|
||||
<view class="guide-name">最佳饮水时间</view>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<text>早：7点-9点</text>
|
||||
<text>午：12点-14点</text>
|
||||
<text>晚：18点-21点</text>
|
||||
</view>
|
||||
<image class="guide-icon" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/guide_03.png"></image>
|
||||
</view>
|
||||
<view class="guide-label">
|
||||
<view class="guide-top">
|
||||
<view class="guide-english">special</view>
|
||||
<view class="guide-name">注意事项</view>
|
||||
</view>
|
||||
<view class="guide-text">
|
||||
<text>不建议冷冻保存</text>
|
||||
<text>开瓶后24小时内饮用最佳</text>
|
||||
</view>
|
||||
<image class="guide-icon" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/guide_04.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 体验官介绍 -->
|
||||
<view class="other">
|
||||
<view class="content">
|
||||
<view class="publicTitle">
|
||||
<text>experience</text>
|
||||
<view class="lighter">体验官介绍</view>
|
||||
<image class="goldenLogo" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/goldenLogo.png"></image>
|
||||
</view>
|
||||
<view class="brief">
|
||||
<navigator hover-class="none" url="../exhibition/index" class="brief-img">
|
||||
<image mode="widthFix" src="{{centerInfo.cover}}"></image>
|
||||
</navigator>
|
||||
<navigator hover-class="none" url="/pages/index/index" open-type="switchTab" class="brief-btn">
|
||||
申请体验官
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订购热线 -->
|
||||
<view class="other hotline">
|
||||
<view class="content">
|
||||
<view class="hotline-cont">
|
||||
<image class="hotline-head" mode="aspectFill" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/hotline_head.png"></image>
|
||||
<view class="hotline-text">
|
||||
<view class="hotline-name">锶源昆仑·订购热线</view>
|
||||
<view class="hotline-tips">Hi！需要订水，请联系我们~</view>
|
||||
</view>
|
||||
<image bindtap="phoneCall" class="hotline-tel" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/hotline_tel.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 锶源昆仑·记忆 -->
|
||||
<view class="article" wx:if="{{datas.length > 0}}">
|
||||
<view class="publicTitle">
|
||||
<text>memory</text>
|
||||
<view class="lighter">锶源昆仑·记忆<image class="article-more" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/hotline_more.png" bindtap="tapMore" data-type="{{categories.memory}}"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="memory">
|
||||
<view class="clearfix teachers_b">
|
||||
<view class="slide" id="slide">
|
||||
<block wx:for="{{datas}}" wx:key="datas">
|
||||
<navigator bindtouchstart='moveStart' bindtouchend='moveItem' hover-class="none" class="memoryLable" url="../article/articleInfo/index?id={{item.id}}&type=memory" animation="{{item.animation}}" style="z-index: {{item.zIndex}};" data-index="{{index}}">
|
||||
<image class="memory-img" src="{{item.image}}"></image>
|
||||
<view class="memory-cont">
|
||||
<view class="memory-title">
|
||||
<view class="nowrap memory-name">{{item.title}}</view>
|
||||
<view class="memory-go">GO ></view>
|
||||
</view>
|
||||
<view class="nowrap memory-text">{{item.description}}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 健康百科 -->
|
||||
<view class="article" wx:if="{{healthsArr.length > 0}}">
|
||||
<view class="publicTitle">
|
||||
<text>Health</text>
|
||||
<view class="lighter">锶源昆仑·健康百科<image class="article-more" mode="widthFix" src="https://api.siyuankunlun.com/storage/materials/2022/10/11/hotline_more.png" bindtap="tapMore" data-type="{{categories.health}}"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wiki">
|
||||
<navigator hover-class="none" url="../article/articleInfo/index?id={{item.article_id}}&type=wiki" class="wiki-label" wx:for="{{healthsArr}}" wx:key="healthsArr" wx:if="{{index < 3}}">
|
||||
<image class="wiki-label-img" mode="aspectFill" src="{{item.cover}}"></image>
|
||||
<view class="wiki-label-cont">
|
||||
<view class="nowrap wiki-label-name"><text>Health</text> | {{item.title}}</view>
|
||||
<view class="nowrap-multi wiki-label-text">{{item.description ? item.description : '源自万山之祖昆仑山脉,绵延华夏龙之 脉中川流的“圣血”'}}</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
559
pages/mall/index/index.wxss
Normal file
559
pages/mall/index/index.wxss
Normal file
@@ -0,0 +1,559 @@
|
||||
page {
|
||||
background-color: #f3f3f5;
|
||||
}
|
||||
|
||||
/* 轮播 */
|
||||
.page-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.videoCover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-swiper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page-swiper image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.drift {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.drift .title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
padding-left: 30rpx;
|
||||
font-size: 40rpx;
|
||||
text-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.drift .title::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 45rpx;
|
||||
bottom: 0;
|
||||
background-color: #df723a;
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.drift .balance {
|
||||
font-size: 34rpx;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
border-radius: 30rpx 0 0 30rpx;
|
||||
padding: 0 20rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
display: flex;
|
||||
box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .3);
|
||||
text-shadow: 0 6rpx 6rpx rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.drift .balance image {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin: 6rpx 5rpx 0 0;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.backView {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 98;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 99;
|
||||
padding: 40rpx 0 90rpx;
|
||||
box-sizing: border-box;
|
||||
background-image: linear-gradient(to bottom, transparent, #26252a);
|
||||
}
|
||||
|
||||
.tips .btn {
|
||||
background-color: #ffffff;
|
||||
display: inline-block;
|
||||
border-radius: 80rpx;
|
||||
padding: 0 50rpx;
|
||||
line-height: 74rpx;
|
||||
margin: 0 15rpx;
|
||||
border: 2rpx solid transparent;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.tips .btn.number {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tips .btn.number image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: -12rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
.indexTop {
|
||||
position: absolute;
|
||||
bottom: 15rpx;
|
||||
left: calc(50% - 27rpx);
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
z-index: 99;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* 内容 */
|
||||
.other {
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx 30rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.publicTitle {
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.publicTitle text {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 42rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.publicTitle .lighter {
|
||||
display: flex;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.publicTitle .lighter .article-more {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.goldenLogo {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10rpx;
|
||||
width: 130rpx;
|
||||
}
|
||||
|
||||
.other-swiper swiper {
|
||||
background: #fff;
|
||||
height: 450rpx;
|
||||
}
|
||||
|
||||
.other-swiper .slide-image image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 40rpx);
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: .2s;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*图片的容器*/
|
||||
.slide-image {
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.other-swiper .box {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.other-swiper .slide-image image.active {
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.other-swiper .othertitle {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.other-swiper .otherText {
|
||||
font-weight: 200;
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
color: #999999;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.other-swiper .otherText::after,
|
||||
.other-swiper .otherText::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 90rpx;
|
||||
top: calc(50% - 1rpx);
|
||||
background-color: #bdbdbd;
|
||||
height: 2rpx;
|
||||
}
|
||||
|
||||
.other-swiper .otherText::after {
|
||||
left: 40rpx;
|
||||
}
|
||||
|
||||
.other-swiper .otherText::before {
|
||||
right: 40rpx;
|
||||
}
|
||||
|
||||
.other-swiper .name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #d5a56d;
|
||||
font-size: 25rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* 视频 */
|
||||
.videos {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.videos-filex-view {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.videos-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.videos video {
|
||||
position: absolute;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.videos-filex-view.filex {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 用水指南 */
|
||||
.guide {
|
||||
overflow: hidden;
|
||||
margin: 0 -10rpx;
|
||||
}
|
||||
|
||||
.guide-label {
|
||||
width: calc(50% - 20rpx);
|
||||
margin: 0 10rpx 20rpx;
|
||||
float: left;
|
||||
background-image: linear-gradient(#f6f6f7, #f5f6fe);
|
||||
border-radius: 15rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guide-top {
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.guide-english {
|
||||
text-transform: uppercase;
|
||||
color: #dfdedf;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.guide-name {
|
||||
font-size: 32rpx;
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.guide-text {
|
||||
vertical-align: middle;
|
||||
height: 90rpx;
|
||||
display: table;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.guide-cell {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.guide-text text {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #333333;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.guide-icon {
|
||||
position: absolute;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
right: 20rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 申请体验官 */
|
||||
.brief-img {
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
.brief-img image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.brief-btn {
|
||||
background-color: #6c78f8;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
text-align: center;
|
||||
line-height: 84rpx;
|
||||
margin: 30rpx 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 订购热线 */
|
||||
.hotline .content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.hotline-cont {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hotline-head {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.hotline-text {
|
||||
width: calc(100% - 184rpx);
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.hotline-name {
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.hotline-tips {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.hotline-tel {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 文章列表 */
|
||||
.article {
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 健康百科 */
|
||||
.wiki {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.wiki-label {
|
||||
background-color: #fff;
|
||||
margin-bottom: 60rpx;
|
||||
position: relative;
|
||||
height: 150rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.wiki-label:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wiki-label-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
position: absolute;
|
||||
top: -30rpx;
|
||||
left: 20rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.wiki-label-cont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 20rpx 25rpx 20rpx 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wiki-label-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.wiki-label-name text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wiki-label-text {
|
||||
color: #999999;
|
||||
font-size: 25rpx;
|
||||
margin-top: 10rpx;
|
||||
line-height: 30rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
/* 记忆 */
|
||||
.memory {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.teachers_b {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#slide {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 530rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.memoryLable {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 580rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.memory-img {
|
||||
width: 580rpx;
|
||||
height: 387rpx;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.memory-cont {
|
||||
padding: 20rpx 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.memory-title {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.memory-name {
|
||||
font-size: 30rpx;
|
||||
flex: 1;
|
||||
line-height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.memory-go {
|
||||
background-color: #f8f8f8;
|
||||
font-size: 26rpx;
|
||||
color: #d5a56d;
|
||||
padding: 0 10rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.memory-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.slide_right {
|
||||
padding: 40px;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.slide_right dl {
|
||||
padding-top: 10px;
|
||||
}
|
||||
92
pages/mall/mallOrder/index.js
Normal file
92
pages/mall/mallOrder/index.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
listType : 'paid', //paid待发货，delivered已发货，signed已签收
|
||||
orderArr : [], //订单列表
|
||||
page : {}, //下一页
|
||||
lodingStats : false,//加载状态
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
listType: options.listType
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取订单列表
|
||||
this.ordersInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 订单列表
|
||||
*/
|
||||
ordersInfo(page) {
|
||||
wx.$api.user.orders({
|
||||
state: this.data.listType,
|
||||
type : 'score',
|
||||
page : page
|
||||
}).then(res => {
|
||||
let listArr = this.data.orderArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.data.data)
|
||||
this.setData({
|
||||
orderArr : newData,
|
||||
page : res.data.page,
|
||||
lodingStats : false
|
||||
})
|
||||
wx.stopPullDownRefresh()
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 状态筛选
|
||||
*/
|
||||
onTabs(val){
|
||||
if(this.data.listType === val) return
|
||||
this.setData({
|
||||
listType: val.currentTarget.dataset.type
|
||||
})
|
||||
|
||||
// 商品详情数据
|
||||
this.ordersInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
// 获取订单列表
|
||||
this.ordersInfo();
|
||||
},
|
||||
|
||||
/**
|
||||
* 上拉加载
|
||||
*/
|
||||
onReachBottom(){
|
||||
this.setData({
|
||||
lodingStats: true
|
||||
})
|
||||
let pageNumber = this.data.page.current
|
||||
if(this.data.page.has_more){
|
||||
pageNumber++
|
||||
// 获取订单列表
|
||||
this.ordersInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
})
|
||||
4
pages/mall/mallOrder/index.json
Normal file
4
pages/mall/mallOrder/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "水滴订单"
|
||||
}
|
||||
54
pages/mall/mallOrder/index.wxml
Normal file
54
pages/mall/mallOrder/index.wxml
Normal file
@@ -0,0 +1,54 @@
|
||||
<view class="header">
|
||||
<view class="tabs">
|
||||
<view class="item {{listType == 'paid' ? 'show' : ''}}" bindtap="onTabs" data-type="paid">待发货</view>
|
||||
<view class="item {{listType == 'delivered' ? 'show' : ''}}" bindtap="onTabs" data-type="delivered">已发货</view>
|
||||
<view class="item {{listType == 'signed' ? 'show' : ''}}" bindtap="onTabs" data-type="signed">已签收</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order" wx:if="{{orderArr.length > 0}}">
|
||||
<view class="While order-list" wx:for="{{orderArr}}" wx:key="orderArr">
|
||||
<view class="order-top">
|
||||
<view class="order-top-number">{{ item.order_no }}</view>
|
||||
<view class="order-top-tips">{{ item.state }}</view>
|
||||
</view>
|
||||
<view class="order-name" wx:for-item="goodItem" wx:for="{{item.items}}" wx:key="items">
|
||||
<!-- 先默认固定图 -->
|
||||
<image class="order-img" src="http://api.siyuankunlun.com/storage/materials/2022/09/14/photo.png" mode="widthFix"></image>
|
||||
<view class="order-goods">
|
||||
<view class="order-label">
|
||||
<view class="nowrap order-label-name">
|
||||
{{ goodItem.sku.goods_name }}
|
||||
</view>
|
||||
<view class="order-label-price">
|
||||
{{ goodItem.sku.price }}<text>水滴</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-specs">
|
||||
x{{ goodItem.qty }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-text">
|
||||
<view class="order-time">下单时间：{{ item.created_at }}</view>
|
||||
</view>
|
||||
<view class="order-text">
|
||||
<view class="order-time">总水滴数：<text>{{ item.amount }}</text></view>
|
||||
</view>
|
||||
<view class="order-btn">
|
||||
<navigator hover-class="none" url="../details/index?orderNo={{item.order_no}}" class="order-btn-atn">订单详情</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<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/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
164
pages/mall/mallOrder/index.wxss
Normal file
164
pages/mall/mallOrder/index.wxss
Normal file
@@ -0,0 +1,164 @@
|
||||
page {
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.order {
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
|
||||
.order-top {
|
||||
line-height: 90rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 2rpx #f2f2f2 solid;
|
||||
}
|
||||
|
||||
.order-top-number {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-top-tips {
|
||||
font-size: 26rpx;
|
||||
color: #eb504c;
|
||||
}
|
||||
|
||||
.order-name {
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.order-goods {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 20rpx 20rpx 20rpx 110rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.order-label {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.order-label-name {
|
||||
flex: 1;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.order-label-price {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-label-price text {
|
||||
font-size: 24rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.order-specs {
|
||||
font-size: 24rpx;
|
||||
color: #919191;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.order-specs text {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
color: #919191;
|
||||
font-size: 26rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-price text,
|
||||
.order-time text {
|
||||
font-weight: 600;
|
||||
color: #1d37e2;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
text-align: right;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-btn-atn {
|
||||
border: 2rpx solid #f2f2f2;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
color: #767676;
|
||||
display: inline-block;
|
||||
margin-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-btn-atn.active {
|
||||
color: #1d37e2;
|
||||
border-color: #bfc5ff;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.item.show {
|
||||
color: #1d37e2;
|
||||
border-bottom: solid 4rpx #1d37e2;
|
||||
}
|
||||
163
pages/mall/submit/index.js
Normal file
163
pages/mall/submit/index.js
Normal file
@@ -0,0 +1,163 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
goodId : '', //店铺id
|
||||
skuId : '', //产品id
|
||||
num : 1, //数量默认1
|
||||
address : '', //地址
|
||||
addressId : '', //地址id
|
||||
stockData : '', //数据
|
||||
amount : '', //总金额
|
||||
freight : '', //运费
|
||||
weight : '', //重量
|
||||
remark : '', //备注
|
||||
exchangeSee : false, //是否兑换
|
||||
disabled : false
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
goodId: options.goodsid,
|
||||
skuId : options.skuid,
|
||||
num : options.qty
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
// 获取订单前置
|
||||
this.orderShow()
|
||||
},
|
||||
|
||||
/**
|
||||
* 订单前置
|
||||
*/
|
||||
orderShow() {
|
||||
wx.$api.mall.foundOrder({
|
||||
goods_sku_id: this.data.skuId,
|
||||
address_id : this.data.addressId,
|
||||
qty : this.data.num
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
address : res.data.address,
|
||||
addressId : res.data.address.address_id,
|
||||
stockData : res.data.detail,
|
||||
amount : res.data.amount,
|
||||
freight : res.data.freight,
|
||||
weight : res.data.weight
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
/**
|
||||
* 商品数量加减
|
||||
*/
|
||||
goodsNumber(e){
|
||||
let num = this.data.num,
|
||||
val = e.currentTarget.dataset.type
|
||||
if (val == 'plus'){
|
||||
num ++;
|
||||
}else{
|
||||
if (num > 1){
|
||||
num --;
|
||||
}else{
|
||||
wx.showToast({
|
||||
title : '商品数量不能小于1',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
num: num
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
num: num
|
||||
})
|
||||
|
||||
// 获取订单前置
|
||||
this.orderShow()
|
||||
},
|
||||
|
||||
/**
|
||||
* 输入商品数量
|
||||
*/
|
||||
goodsNumberInput(e) {
|
||||
let goodsNum = e.detail.value;
|
||||
if (goodsNum > 0) {
|
||||
this.setData({
|
||||
num: goodsNum
|
||||
})
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '商品数量不能小于1',
|
||||
icon: 'none'
|
||||
});
|
||||
this.setData({
|
||||
num: 1
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否确认兑换
|
||||
*/
|
||||
exchangeShow() {
|
||||
this.setData({
|
||||
exchangeSee: !this.data.exchangeSee
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭兑换弹出
|
||||
*/
|
||||
goodsCancel() {
|
||||
this.setData({
|
||||
exchangeSee: false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认订单
|
||||
*/
|
||||
goodsForm(e) {
|
||||
let newQty = this.data.num
|
||||
let data = {
|
||||
goods_sku_id: this.data.skuId,
|
||||
remark : this.data.remark,
|
||||
qty : newQty,
|
||||
address_id : this.data.address.address_id
|
||||
}
|
||||
wx.$api.mall.affirmOrder(data).then(res => {
|
||||
wx.$api.mall.affirmPay(res.data.order_no).then(res => {
|
||||
this.setData({
|
||||
exchangeSee: false,
|
||||
disabled : true
|
||||
})
|
||||
wx.showToast({
|
||||
title: '兑换成功',
|
||||
icon : 'success'
|
||||
})
|
||||
setTimeout(()=>{
|
||||
wx.redirectTo({
|
||||
url: '/pages/order/list/index?listType=paid'
|
||||
})
|
||||
},3000)
|
||||
}).catch(err => {})
|
||||
|
||||
}).catch(err => {})
|
||||
}
|
||||
})
|
||||
4
pages/mall/submit/index.json
Normal file
4
pages/mall/submit/index.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "确认订单"
|
||||
}
|
||||
75
pages/mall/submit/index.wxml
Normal file
75
pages/mall/submit/index.wxml
Normal file
@@ -0,0 +1,75 @@
|
||||
<!-- 地址 -->
|
||||
<view class="address">
|
||||
<navigator hover-class="none" url="/pages/stock/site/index?type=goodsAddress" class="address-cont" wx:if="{{address}}">
|
||||
<view class="address-top">
|
||||
<view class="address-area">{{address.province.name}}{{address.city.name}}</view>
|
||||
<view class="address-text">{{address.full_address}}</view>
|
||||
</view>
|
||||
<view class="address-name">
|
||||
{{address.name}}<text>{{address.mobile}}</text>
|
||||
</view>
|
||||
<image class="address-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||||
</navigator>
|
||||
<view class="address-add" wx:else>
|
||||
<navigator hover-class="none" url="/pages/stock/site/index?type=goodsAddress" class="address-go">新增收货地址 +</navigator>
|
||||
</view>
|
||||
<image class="address-img" src="/static/imgs/address.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品 -->
|
||||
<view class="good" wx:for="{{stockData}}" wx:key="stockData">
|
||||
<block wx:for="{{item.items}}" wx:key="items" wx:for-item="items">
|
||||
<image class="good-img" src="{{items.cover ? items.cover : '/static/imgs/default.png'}}" mode="aspectFill"></image>
|
||||
<view class="good-cont">
|
||||
<view class="good-name nowrap">{{items.title}}</view>
|
||||
<view class="good-tips">24瓶/箱</view>
|
||||
<view class="good-price">{{items.price}}<text>水滴</text></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 规格 -->
|
||||
<view class="label">
|
||||
<view class="label-item">
|
||||
<view class="label-name">购买数量</view>
|
||||
<view class="label-number">
|
||||
<view class="number-btn" bindtap="goodsNumber" data-type="remove">-</view>
|
||||
<input bindinput="goodsNumberInput" class="number-input" type="text" value="{{num}}" disabled />
|
||||
<view class="number-btn" bindtap="goodsNumber" data-type="plus">+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="label-item">
|
||||
<view class="label-name">快递</view>
|
||||
<view class="label-text">免邮</view>
|
||||
</view>
|
||||
<view class="label-item">
|
||||
<view class="label-name">重量</view>
|
||||
<view class="label-text">{{weight}}</view>
|
||||
</view>
|
||||
<view class="label-item">
|
||||
<view class="label-name">水滴兑换</view>
|
||||
<view class="label-integral">{{amount}}水滴</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer">
|
||||
<view class="number">需<text>{{amount}}</text>水滴</view>
|
||||
<button class="btn" bindtap="exchangeShow" disabled="{{disabled}}">立即兑换</button>
|
||||
</view>
|
||||
|
||||
<!-- 是否确认兑换商品弹出 -->
|
||||
<view class="exchangePop {{exchangeSee ? 'active' : ''}}"></view>
|
||||
<view class="exchangeCont {{exchangeSee ? 'active' : ''}}">
|
||||
<view class="exchange-title">
|
||||
确认兑换产品吗？
|
||||
</view>
|
||||
<view class="exchange-number">
|
||||
<image class="exchange-img" src="/static/imgs/waterIcon.png"></image>
|
||||
需要<text>{{amount}}</text>个水滴
|
||||
</view>
|
||||
<view class="exchange-btn">
|
||||
<view class="exchange-item" bindtap="goodsCancel">取消</view>
|
||||
<view class="exchange-item" bindtap="goodsForm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
286
pages/mall/submit/index.wxss
Normal file
286
pages/mall/submit/index.wxss
Normal file
@@ -0,0 +1,286 @@
|
||||
page {
|
||||
background-color: #f5f6f8;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
.address {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.address-arrow {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.address-cont {
|
||||
padding: 30rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.address-area {
|
||||
color: #585866;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-weight: 600;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.address-name text {
|
||||
color: #585866;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.address-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-add {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 30rpx 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.address-go {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
line-height: 68rpx;
|
||||
border-radius: 10rpx;
|
||||
color: #df723a;
|
||||
}
|
||||
|
||||
/* 商品 */
|
||||
.good {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin: 30rpx 0;
|
||||
position: relative;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.good-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.good-cont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 30rpx 30rpx 0 220rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.good-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.good-price {
|
||||
color: #df723a;
|
||||
}
|
||||
|
||||
.good-price text {
|
||||
font-size: 26rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.label-integral {
|
||||
color: #6c78f8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.good-tips {
|
||||
margin: 10rpx 0 25rpx;
|
||||
color: #585866;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 规格 */
|
||||
.label {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label-item {
|
||||
display: flex;
|
||||
line-height: 100rpx;
|
||||
color: #585866;
|
||||
font-size: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid rgb(243, 243, 243);
|
||||
}
|
||||
|
||||
.label-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.label-price {
|
||||
text-align: right;
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
padding: 0 30rpx 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label-price text {
|
||||
font-size: 34rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.label-number {
|
||||
display: flex;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
|
||||
.number-btn {
|
||||
background-color: #f1f1f1;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
line-height: 46rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #FFFFFF;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
padding: 8px 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.number {
|
||||
flex: 1;
|
||||
line-height: 44px;
|
||||
color: #6c78f8;
|
||||
}
|
||||
|
||||
.number text {
|
||||
padding: 0 5rpx;
|
||||
font-weight: 600;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #6c78f8;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
border-radius: 60rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 0 30rpx !important;
|
||||
width: auto !important;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* 兑换弹出 */
|
||||
.exchangePop {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.exchangePop.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exchangeCont {
|
||||
left: 10%;
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
margin-top: -200rpx;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.exchangeCont.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.exchange-title {
|
||||
text-align: center;
|
||||
color: #2b2b2b;
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.exchange-number {
|
||||
font-size: 28rpx;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
.exchange-number text {
|
||||
color: #f31d23;
|
||||
font-weight: 600;
|
||||
padding: 0 5rpx;
|
||||
}
|
||||
|
||||
.exchange-img {
|
||||
display: block;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 10rpx auto;
|
||||
}
|
||||
|
||||
.exchange-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.exchange-item {
|
||||
line-height: 78rpx;
|
||||
flex: 2;
|
||||
text-align: center;
|
||||
margin: 0 15rpx;
|
||||
border: 2rpx solid #000;
|
||||
border-radius: 50rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.exchange-item:last-child {
|
||||
background-color: #f31d23;
|
||||
color: #FFFFFF;
|
||||
border-color: #f31d23;
|
||||
}
|
||||
Reference in New Issue
Block a user