Pārlūkot izejas kodu

[订单列表兑换码弹出层][增加]:订单详情兑换码弹出层

tags/2.2.4
meo pirms 6 gadiem
vecāks
revīzija
91f86acad2
5 mainītis faili ar 259 papildinājumiem un 45 dzēšanām
  1. +1
    -1
      pages/couponorder/index/index.js
  2. +1
    -0
      pages/couponorder/index/index.wxml
  3. +59
    -20
      pages/order/detail/index.js
  4. +17
    -2
      pages/order/detail/index.wxml
  5. +181
    -22
      pages/order/detail/index.wxss

+ 1
- 1
pages/couponorder/index/index.js Parādīt failu

@@ -22,7 +22,7 @@ Page({
name: "已退款"
}
],
list: [{wm:'000'}],
list: [],
current: "0",
current_scroll: "0",
page: 1,


+ 1
- 0
pages/couponorder/index/index.wxml Parādīt failu

@@ -11,6 +11,7 @@
<button>去领券</button>
</navigator>
</view>
<view class='section' wx:for='{{list}}' wx:key='{{index}}' bindtap="gotouse" data-quancode="{{item.id}}">
<view class='detail_msg'>
<view class='logo'>


+ 59
- 20
pages/order/detail/index.js Parādīt failu

@@ -1,13 +1,70 @@
let config = require("../../../config/config.js");
let util = require("../../../utils/util");
let Http = require("../../../utils/HttpBasics");
let app = getApp();

Page({
/**
* 页面的初始数据
*/
data: {},
data: {
showModalStatus: false,
flag: 0
},

/**
* 点击弹出二维码
* 然后再关闭
*/

powerDrawer: function(e) {
var currentStatu = e.currentTarget.dataset.statu;
console.log(e.currentTarget.dataset.statu);
console.log(e.currentTarget.dataset.quancode);
this.utils(currentStatu, e.currentTarget.dataset.quancode);
},
utils: function(currentStatu, quancode) {
/* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
}); // 第2步:这个动画实例赋给当前的动画实例
this.animation = animation; // 第3步:执行第一组动画
animation.opacity(0).step(); // 第4步:导出动画对象赋给数据对象储存
this.setData({
animationData: animation.export()
}); // 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(
function() {
// 执行第二组动画
animation.opacity(1).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationData: animation
}); //关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
});
}
}.bind(this),
20
);
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
});
this.data.flag++;

console.log(this.data.flag);
util.barcode("barcode" + this.data.flag, quancode, 500, 100);
util.qrcode("qrcode" + this.data.flag, quancode, 350, 400);
this.setData({
flag: this.data.flag
});
}
},
/**
* 生命周期函数--监听页面加载
*/
@@ -27,24 +84,6 @@ Page({
});
});
},
couponorderdetail: function(e) {
console.log(e);
wx.navigateTo({
url: `/pages/couponorder/detail/index?quancode=${
e.currentTarget.dataset.quancode
}`,
success: function(res) {
// success
console.log("点击跳转到券详情页面");
},
fail: function() {
// fail
},
complete: function() {
// complete
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/


+ 17
- 2
pages/order/detail/index.wxml Parādīt failu

@@ -33,7 +33,7 @@
<text>适用门店</text>
<text class='iconfont icon-right'></text>
</view>
<view wx:if="{{data.orderStatus==1}}" data-quancode="{{data.id}}" bindtap="couponorderdetail">
<view wx:if="{{data.orderStatus==1}}" data-quancode="{{data.id}}" bindtap="powerDrawer" data-statu="open">
<view>
<text>兑换码:</text>
<text>{{data.id}}</text>
@@ -55,4 +55,19 @@
<text>¥{{data.salePrice/100}}</text>
</view>
</view>
</view>
</view>


<!--mask-->
<view class="drawer_screen" data-quancode="{{data.id}}" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view>
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="panel">
<view class="barcode">
<canvas canvas-id="barcode{{flag}}" />
</view>
<view class="qrcode">
<canvas canvas-id="qrcode{{flag}}" />
</view>
<view class="barnum"><text>兑换码:</text>{{data.id}}</view>
</view>
</view>

+ 181
- 22
pages/order/detail/index.wxss Parādīt failu

@@ -1,11 +1,11 @@
@import '../../../app.wxss';
@import "../../../app.wxss";
.order {
width: 100%;
}
.tips {
width: 92%;
height: 88rpx;
background: #00C0FF;
background: #00c0ff;
color: #fff;
padding: 0 4%;
line-height: 88rpx;
@@ -19,7 +19,7 @@
height: 32rpx;
background: #fff;
border-radius: 50%;
color: #00C0FF;
color: #00c0ff;
line-height: 32rpx;
text-align: center;
display: inline-block;
@@ -72,13 +72,15 @@
font-size: 24rpx;
}

.info view:nth-child(2), .info view:nth-child(3) {
.info view:nth-child(2),
.info view:nth-child(3) {
color: #ff3434;
font-size: 24rpx;
padding-left: 4%;
}

.info view:nth-child(2) text, .info view:nth-child(3) text {
.info view:nth-child(2) text,
.info view:nth-child(3) text {
font-size: 22rpx;
color: #b8b8b8;
}
@@ -94,7 +96,7 @@
padding: 0 4%;
display: flex;
justify-content: space-between;
border-bottom: 20rpx solid #EDEDED;
border-bottom: 20rpx solid #ededed;
}

.payment view:nth-child(2) text:nth-child(1) {
@@ -112,40 +114,197 @@
.classif {
width: 100%;
}
.classif>view{
.classif > view {
height: 88rpx;
line-height: 88rpx;
display: flex;
justify-content: space-between;
padding-left: 4%;
padding-right: 4%;
border-bottom:1rpx solid #eee;
border-bottom: 1rpx solid #eee;
}
.classif>view text{
.classif > view text {
font-size: 30rpx;
}
.classif>view text:nth-child(2){
color: #B8B8B8;
font-size: 30rpx;
.classif > view text:nth-child(2) {
color: #b8b8b8;
font-size: 30rpx;
}
.classif>view:nth-child(1) {
.classif > view:nth-child(1) {
display: block;
}
.classif>view:nth-child(1) text:nth-child(2) {
.classif > view:nth-child(1) text:nth-child(2) {
padding-left: 15rpx;
}
.classif>view:nth-child(3),.classif>view:nth-child(4) {
border-top: 20rpx solid #EDEDED;
.classif > view:nth-child(3),
.classif > view:nth-child(4) {
border-top: 20rpx solid #ededed;
}
.classif>view:nth-child(3) view text:nth-child(2) {
padding-left: 15rpx;
}
.classif>view:nth-child(6) text:nth-child(2){
color: #FF3434;
.classif > view:nth-child(3) view text:nth-child(2) {
padding-left: 15rpx;
}
.classif > view:nth-child(6) text:nth-child(2) {
color: #ff3434;
font-weight: bold;
}
.spcode{
.spcode {
width: 60rpx;
display: inline-block;
margin-top: 15rpx;
}

/*mask*/
.drawer_screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}

.drawer_box {
width: 650rpx;
position: fixed;
overflow: hidden;
top: 50%;
left: 0;
z-index: 1001;
margin: -150px 50rpx 0 50rpx;
border-radius: 3px;
}
.drawer_title {
padding: 15px;
font: 20px "microsoft yahei";
text-align: center;
}
.drawer_content {
height: 210px;
overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.btn_ok {
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1px solid #e8e8ea;
color: #3cc51f;
}
.top {
padding-top: 8px;
}
.bottom {
padding-bottom: 8px;
}
.title {
height: 30px;
line-height: 30px;
width: 160rpx;
text-align: center;
display: inline-block;
font: 300 28rpx/30px "microsoft yahei";
}
.input_base {
border: 2rpx solid #ccc;
padding-left: 10rpx;
margin-right: 50rpx;
}
.input_h30 {
height: 30px;
line-height: 30px;
}
.input_h60 {
height: 60px;
}
.input_view {
font: 12px "microsoft yahei";
background: #fff;
color: #000;
line-height: 30px;
}
input {
font: 12px "microsoft yahei";
background: #fff;
color: #000;
}
radio {
margin-right: 20px;
}
.grid {
display: -webkit-box;
display: box;
}
.col-0 {
-webkit-box-flex: 0;
box-flex: 0;
}
.col-1 {
-webkit-box-flex: 1;
box-flex: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}


.panel {
width: 600rpx;
border-radius: 10rpx;
background-color: #fff;
margin: 30rpx auto 0;
padding: 30rpx 0;
position: relative;
z-index: 10000000000;
}
.pane2{
background: #fff;
opacity: .6;
}
.pane2 image{
width: 500rpx;
display: block;
margin: 40rpx auto 0;
}

.barcode {
height: 100rpx;
width: 500rpx;
margin: 0 auto;
}

.barnum {
height: 46rpx;
line-height: 46rpx;
font-size: 32rpx;
text-align: center;
letter-spacing: 2rpx;
white-space: nowrap;
color: #999;
}

.barnum text {
color: #333;
}

.barcode > canvas {
width: 500rpx;
height: 100rpx;
}

.qrcode {
height: 370rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}

.qrcode > canvas {
width: 350rpx;
height: 400rpx;
}

Notiek ielāde…
Atcelt
Saglabāt