Skip to content

N
nyx
Commit 28b27f62 by jscat
Options

nyx weapp: 页面优化, 数据优化 

1. 主流程-完成订单页面 order的页面及数据初步开发
parent a9bfb60c
正在显示 包含 840 行增加 和 9 行删除
增值产品-小程序及app/nyx-master/app.json
{ {
{ {
"pages": [ "pages": [
"pages/activity/activity", "pages/activity/activity",
"pages/mall/order/order",
"pages/activity/quiz-result/quiz-result", "pages/activity/quiz-result/quiz-result",
"pages/activity/quiz-info/quiz-info", "pages/activity/quiz-info/quiz-info",
"pages/activity/activity-info/activity-info",
"pages/key/key", "pages/key/key",
"pages/activity/act-address/act-address", "pages/activity/act-address/act-address",
"pages/activity/act-writer/act-writer", "pages/activity/act-writer/act-writer",
"pages/my/my", "pages/my/my",
"pages/key/matchTest/matchTest", "pages/key/matchTest/matchTest",
"pages/my/my-points/my-points", "pages/my/my-points/my-points",
"pages/my/my-orders/my-orders",
"pages/my/user/user", "pages/my/user/user",
"pages/logs/logs", "pages/logs/logs",
"pages/post/post", "pages/post/post",
......
增值产品-小程序及app/nyx-master/pages/activity/activity-info/activity-info.js
// pages/activity/activity-info/activity-info.js // pages/activity/activity-info/activity-info.js
...@@ -187,13 +187,15 @@ Page({ ...@@ -187,13 +187,15 @@ Page({
} }
}, },
//跳转到知识竞答页面 //跳转到结算页 order.wxml
toGame: function (e) { toBuy: function (e) {
var _this = this; var _this = this;
var url = "/pages/key/matchTest/matchTest?" var url = "/pages/mall/order/order?"
+ "&activity_id=" + _this.__data__.activityInfo["activity_id"] + "&activity_id=" + _this.__data__.activityInfo["activity_id"]
+ "&activityInfo=" + _this.__data__.activityInfo["activityInfo"] + "&product_id_string=" + "pid_001::pid_002"
+ "&point=" + _this.__data__.activityInfo["point"] + "&product_desc_string=" + "会员::普通会员"
+ "&_unitprice_string=" + "59.00::99.00"
+ "&quantity_string=" + "1::3"
+ "&member_id=" + _this.__data__.activityInfo["member_id"] + "&member_id=" + _this.__data__.activityInfo["member_id"]
+ "&member_name=" + _this.__data__.activityInfo["member_name"] + "&member_name=" + _this.__data__.activityInfo["member_name"]
+ "&title=" + _this.__data__.activityInfo["title"] + "&title=" + _this.__data__.activityInfo["title"]
......
增值产品-小程序及app/nyx-master/pages/activity/activity-info/activity-info.wxml
<view class="page"> <view class="page">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</view> </view>
</view></view> </view></view>
<view class="weui-flex__item weui-flex justify align"><view class="placeholder"> <view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<button class="button-red" bindtap="toGame">立即购买</button> <button class="button-red" bindtap="toBuy">立即购买</button>
</view></view> </view></view>
</view> </view>
</view> </view>
......
增值产品-小程序及app/nyx-master/pages/mall/order/order.js 0 → 100644
// pages/mall/order/order.js
// pages/mall/order/order.js
var config = wx.getStorageSync("config");
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
//用户信息初始化
nyxCode: "",
authStatus: "",
userInfo: {},
//活动列表
orders : [],
//活动信息
orderInfo_2 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_2",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
order_qrcode : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/qrcode-dir/mid_11235813.png",
item_height : 80 + 20 + 120*2 + 30*3, // basic + margin-bottom(20rpx) + item(n) + margin(n+1)
order_item :[
{
product_desc :"会员",
unit_price : "59.00",
quantity : 1,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
}
]
},
orderInfo_1 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_1",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
order_qrcode : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/qrcode-dir/mid_11235813.png",
item_height : 80 + 20 + 120 + 30*2, // 控制item的高度
order_item :[
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
}
]
},
orderInfo_3 : {
member_name : "Renaissance Bar",
title : "酒市集",
total_price : 149.00,
order_id : "oid_000_3",
order_status : "交易成功",
product_image : "https://930-test-sh.oss-cn-shanghai.aliyuncs.com/user-dir/sakura.jpg",
// 130: title(36.4)+total_price(25.6)
// 20: 增加20冗余
// 120: 每个order_item
// 30: 每个order_item的margin
item_height : 80 + 20 + 120*3 + 30*4, // 控制item的高度
order_item :[
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 1,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 2,
},
{
product_desc :"普通用户",
unit_price : "99.00",
quantity : 3,
},
]
},
// {
// rankId : "rid_001",
// defaultType : "1",
// matchType : "竞答",
// title : "泥煤怪兽",
// rank : "1",
// score : "200",
// ratio : "96%",
// },
isHideLoadMore: false,
/* 模态框 */
showModalPoints: false,
showModalBarcode : false,
/* 订单 可使用/不可用状态 */
selectTab : true,
matchStatus : "",
//order栏的高度
orderHeight : "",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
wx.setNavigationBarTitle({
title: '订单结算',
})
//初始化数据
if (wx.getStorageSync('nyxCode')) {
_this.setData({
nyxCode: wx.getStorageSync('nyxCode'),
userInfo: wx.getStorageSync('userInfo'),
authStatus: wx.getStorageSync('authStatus'),
})
}
//初始载入四个积分
if(_this.__data__.orders.length == 0)
{
//getPoints(scrollType, pageNum, pageCount, matchStatus)
//onLoad的时候展示可使用的积分
var orders = []
orders.push(_this.__data__.orderInfo_2)
orders.push(_this.__data__.orderInfo_3)
orders.push(_this.__data__.orderInfo_1)
//_this.getPoints(0, 1, 4, matchStatus);
_this.setData({
orders : orders,
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 用户自定义函数
/*
*/
/* 点击好友助力 */
onClickPoints: function(e){
var _this = this;
var indexId = e.currentTarget.dataset.id
var match_id = _this.__data__.points[indexId].match_id
_this.getBonus(match_id)
    _this.setData({
      showModalPoints: true
    })
},
/* 点击barcode */
onClickBarcode: function(e){
var _this = this;
//指明具体是list的哪一个item
var indexId = e.currentTarget.dataset.id
var qrcode_url = _this.__data__.points[indexId].qrcode_url
var qrcode = _this.__data__.points[indexId].match_id
    this.setData({
      showModalBarcode : true,
qrcode : qrcode,
qrcode_url : qrcode_url
    })
},
  // 弹出层里面的弹窗
  ok: function () {
    this.setData({
      showModalPoints: false,
showModalBarcode: false
    })
  },
/**
* tab切换
*/
tab: function(e) {
var _this = this;
//js的e.currentTarget.id 对应wxml的 id="tab0"
//js的e.currentTarget.dataSet.id 对应wxml的 data-id="tab0"
var id = e.currentTarget.id;
var dataId = e.currentTarget.dataset.id
_this.setData({
selectTab: dataId,
})
},
/**
* 用户自定义函数
*
*/
// 获取points数据
// scrollType: 是否是翻页, 0-不翻页 | 1-翻页
getPoints: function (scrollType, pageNum, pageCount, memberStatus) {
var _this = this;
var query_url = '&matchStatus='+memberStatus
var strUrl = config.match_query_url + "?pageCount=" + pageCount
+ "&pageNum=" + pageNum + query_url
config.debug == 1 ? console.log("===strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
var bisHideLoadMoreType = false;
if (res.data.data.length < pageCount) {
bisHideLoadMoreType = true;
}
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["total_point"] = res.data.data[i].totalPoint
result["member_name"] = res.data.data[i].memberName
result["bonus_count"] = res.data.data[i].bonusCount
result["bonus_point"] = res.data.data[i].bonusPoint
result["match_id"] = res.data.data[i].matchId
result["qrcode_url"] = res.data.data[i].qrcodeUrl
list.push(result)
}
//进行翻页设置（加载更多）
if (scrollType == 1) {
var pointsList = _this.__data__.points;
list = pointsList.concat(list)
}
_this.setData({
points: list,
pageIndex: pageNum + 1,
isHideLoadMore: bisHideLoadMoreType,
})
}
}
})
},
// 获取bonus points数据
getBonus: function (matchId) {
var _this = this;
var query_url = '?matchId='+matchId
var strUrl = config.bonus_query_url + query_url
config.debug == 1 ? console.log("===strUrl is: \"" + strUrl + "\"") : ""
wx.request({
url: strUrl,
method: 'GET',
header: {
'Cookie': wx.getStorageSync('cookieKey'),
},
success: function (res) {
if (res.data.resultCode == 200) {
//表示HTTP请求成功
console.log(res.data);
var list = []
for (var i = 0; i < res.data.data.length; i++) {
var result = {}
result["match_id"] = res.data.data[i].matchId
result["user_name"] = res.data.data[i].userName
result["bonus_point"] = res.data.data[i].bonusPoint
list.push(result)
}
_this.setData({
bonus_info: list,
})
}
}
})
},
})
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/mall/order/order.wxml 0 → 100644
<view class="page">
<view class="page">
<!-- Tab: refer to 京东|有品 -->
<view class="weui-flex" style="height:120rpx;margin: 20rpx; width:710rpx;background:#fff">
<view class="weui-flex__item weui-flex justify align" data-id="20" id="id-20" bindtap="tab">
<view class="note-info">
<view class="note-title">
<view class="title-left">李小五 137xxxx1111</view>
</view>
</view>
</view>
</view>
<!-- Content: refer to 京东; 因为有品member_name全是'有品精选' -->
<view class="coupon-list" wx:for="{{orders}}" wx:for-item="item" wx:key="{{index}}">
<view class="item stamp stamp01" style="height:{{item.item_height}}rpx;">
<!-- 商家信息 -->
<view class="note-info">
<view class="note-title">
<view class="title-left">{{item.member_name}}</view>
</view>
</view>
<!-- 商品信息 -->
<block wx:for="{{item.order_item}}" wx:for-item="sub_item" wx:key="{{index}}">
<view class="note-row">
<image class="writer-image" src="{{item.product_image}}"/>
<view class="note-column">
<span>{{sub_item.product_desc}}</span>
<span>{{sub_item.unit_price}} x{{sub_item.quantity}}</span>
</view>
</view>
</block>
</view>
</view>
<view class='placeholder-view'></view>
<!-- start bottom-->
<!-- refer to https://www.jb51.net/article/129438.htm -->
<view class="bottom_total">
<view class="bottom_line"></view>
<view class="weui-flex" style="height: 180rpx;">
<view class="weui-flex__item weui-flex align justify-left"><view class="placeholder">
<text class="total-price">￥1231.00</text>
</view></view>
<view class="weui-flex__item weui-flex justify align"><view class="placeholder">
<button class="button-red" bindtap="toBuy">去支付</button>
</view></view>
</view>
</view>
<!-- end bottom-->
<!-- 查看好友助力-->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 -->
<!-- start 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalPoints}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModalPoints}}">
<!-- 二维码或其他图片 -->
<view class="title">
<text style="color:#666666">助力清单</text>
</view>
<view class="title-close" bindtap="ok">
<image src="../../../icon/close.png"></image>
</view>
<view class="list-point">
<view class="text" wx:for="{{bonus_info}}" wx:for-item="item" wx:key="{{index}}" >
{{item.user_name}}助力{{item.bonus_point}}积分
</view>
</view>
</view>
<!-- end 遮罩层 -->
<!-- 查看优惠券码-->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85104827 -->
<!-- 微信小程序自定义弹框 https://blog.csdn.net/qq_39702981/article/details/85320926 -->
<!-- start 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModalBarcode}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModalBarcode}}">
<!-- 二维码或其他图片 -->
<view class="title">
<text style="color:#666666">请扫描以下券码验券 </text>
</view>
<view class="title-right" bindtap="ok">
<image src="../../../icon/close.png"></image>
</view>
<view class="list-barcode">
<view class="text">券码：{{qrcode}}</view>
<image src="{{qrcode_url}}"></image>
</view>
<view class="list-barcode-image">
</view>
</view>
<!-- end 遮罩层 -->
</view>
\ No newline at end of file
增值产品-小程序及app/nyx-master/pages/mall/order/order.wxss 0 → 100644
.page{
.page{
height: 100vh;
background: #F2F2F2;
}
.selected{
color: #ff0000;
}
/* coupon css */
.coupon-list{width: 710rpx; margin: 0rpx auto; }
.coupon-list .item{width: 710rpx; height: 340rpx; margin-bottom: 20rpx;}
.coupon-list .item .float-li{width: 710rpx; height: 100%; border-right: 2rpx dashed rgba(255,255,255,.3)}
.coupon-list .item .float-li-right{width: 220rpx; padding-right: 20rpx; height:100%; color: #fff}
.coupon-left{position: relative}
.coupon-left .t{position: absolute; color: #fff}
.coupon-left .t1{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 20rpx; height: 160rpx; color: #fff}
.coupon-left .t1-left{width: 160rpx; font-size: 70rpx; font-weight: bold}
.coupon-left .t1-right{width: 520rpx; font-size: 50rpx; }
/* .coupon-left .t2{left: 20rpx; top:160rpx} */
.coupon-left .t2{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t2-left{width: 520rpx; }
.coupon-left .t2-right{width: 160rpx;}
.coupon-left .t3{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t3-left{width: 520rpx; }
.coupon-left .t3-right{width: 160rpx;}
.coupon-left .t3-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.coupon-left .t4{width: 710rpx; display: flex; margin-left: 20rpx; margin-top: 0rpx; height: 50rpx; color: #fff}
.coupon-left .t4-left{width: 520rpx; }
.coupon-left .t4-right{width: 160rpx;}
.coupon-left .t4-right image{
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.coupon-right .t{text-align: center}
.coupon-right .t1{font-size: 40rpx; padding: 30rpx 0 10rpx 0;}
.coupon-right .t3{padding-top:20rpx}
.coupon-right .t3 text{background: #fff; color: #333; border-radius: 7rpx; padding: 10rpx 40rpx}
.note{background: #faeab7}
.stamp{width:700rpx; height: 250rpx;margin-bottom:50rpx;position:relative;overflow:hidden}
.stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg);
}
.stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #FFFFFF}
/* 失效样式 */
.stamp06{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #e2e2e2 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #acacac
}
/* start - 小程序自定义弹框css */
/* 遮罩层 */
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.5;
}
/* 弹出层 */
.modalDlg{
width: 80%;
height: 540rpx;
position: fixed;
top: 240rpx;
left: 0;
right: 0;
z-index: 9999;
margin: 0 auto;
background-color: #fff;
border-radius:5px;
display: flex;
flex-direction: column;
align-items: center;
}
/* 弹出层里面的图片 */
/* 弹出层里面的文字 */
.title{
display: flex;
font-size: 38rpx;
color: #cccccc;
width: 80%;
height: 80rpx;
padding: 20rpx;
align-items: center;
justify-content: center;
}
.title-close{
display: flex;
height: 80rpx;
position: absolute;
align-items: center;
text-align: right;
font-size: 38rpx;
color: #cccccc;
padding: 20rpx;
right: 20rpx;
}
.title-right image{
width: 50rpx;
height: 50rpx;
font-size: 0;
}
/* 图片+文字 */
.weui-width{
width: 80%;
}
.placeholder-modal{
margin: 0px;
text-align: center;
vertical-align: middle;
line-height: 2.3em;
background-color: #fff;
}
/* 好友助力积分列表 */
.list-point{
width: 100%;
height: 2rpx;
background: #ccc;
font-size: 32rpx;
display: flex;
flex-direction: column;
/* align-items: center; */
left: 40rpx;
}
.list-point .text{
margin-left: 160rpx;
}
.title-right image{
width: 50rpx;
height: 50rpx;
font-size: 0;
}
/* barcode券码查看 */
.list-barcode{
width: 100%;
height: 2rpx;
background: #ccc;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.list-barcode .text{
align-items: center;
margin-left: 20rpx;
}
.list-barcode image{
overflow: visible;
width: 300rpx;
height: 300rpx;
}
/* 弹出层里面的按钮 */
.ok{
width: 100%;
height: 2rpx;
background: #ccc;
text-align: center;
font-size: 38rpx;
color: #666666;
}
/* end - 小程序自定义弹框css */
.note-info{
width: 100%;
/* position: fixed; */
border-radius: 5rpx;
float: left;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.note-title{
width : 100%;
display: flex;
font-size: 32rpx;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
text-align:justify;
vertical-align: center;
}
.note-title .title-left{width: 60%; font-size: 36rpx;}
.note-title .title-right{width: 40%;}
.note-title .title-right image{
width: 60rpx;
height: 60rpx;
font-size: 0;
}
.note-price{
color: #FF6600;
font-size: 16px;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
text-align:justify;
}
.note-content{
font-size: 16px;
/* 后期用于 '展开' 功能 */
/* overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
margin-left: 5%;
margin-right: 4%;
margin-top: 20rpx;
text-align:justify;
}
.note-row{
width: 100%;
display: flex;
flex-direction: row;
margin-bottom: 30rpx;
margin-top: 30rpx;
}
.note-column{
display: flex;
flex-direction: column;
margin-left: 30rpx;
}
.writer-image{
width: 120rpx;
height: 120rpx;
margin-left: 10%;
}
/* start bottom style */
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
}
.bottom_line {
width: 100%;
height: 2rpx;
background: lightgray;
}
.bottom_total {
position: fixed;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 180rpx;
line-height: 10rpx;
background: white;
}
.button-red {
background-color: #f44336; /* 红色 */
}
.button-brown {
background-color: #D1A96E; /* 红色 */
}
button {
color: white;
text-align: center;
font-size: 40rpx;
height: 2.6em;
line-height: 2.6em;
}
.placeholder{
margin-left: 20rpx;
margin-right: 20rpx;
text-align: center;
/* vertical-align: middle; */
padding: 0 10px;
line-height: 2.3em;
color: rgba(0,0,0);
}
/* justify-content: center;(水平居中) align-items: center;(垂直居中) */
.justify{
justify-content: center;
}
.align{
align-items: center;
}
.justify-left{
justify-content: left;
}
.list .items{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.items image{
width: 80rpx;
height: 80rpx;
margin-top: 20rpx;
font-size: 0;
}
.items text{
/* display: block; */
text-align: center;
margin-top: 0rpx;
margin-bottom: 20rpx;
padding: 0rpx;
font-size: 28rpx;
}
.list{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 30rpx;
margin-right: 30rpx;
margin-top: 20rpx;
}
/* end bottom style */
/* 占位view */
.placeholder-view {
margin: 20rpx;
width:710rpx;
height: 180rpx;
background: #F2F2F2;
}
.total-price{
color: #FF6600;
font-size: 48rpx;
margin-left: 0;
margin-right: 5%;
margin-top: 0;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论