zhangjing/cardtest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[更新]

Browse Source
This commit is contained in:
张慢慢
2021-05-24 13:56:00 +08:00
commit a7995d90bc
208 changed files with 13143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
pages/welfare/welfare.js Normal file
View File

@@ -0,0 +1,127 @@
Page({
/**
* 页面的初始数据
*/
data: {
noticeShow : false, //须知显示状态
pointMoreShow : false, //重要提示显示状态
groupId : '', //权益id
contData : '', //全局内容
rightData : '', //权益详情
content : '', //内容介绍
notification : '', //重要提示
remark : '', //使用须知
},
/**
* 生命周期函数--监听页面加载
*/
onLoad (options) {
this.setData({
groupId : options.id
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取详情
this.rightsInfo();
},
/**
* 详情
*/
rightsInfo() {
wx.$api.index.welfares(this.data.groupId).then(res=>{
this.setData({
contData : res.data,
rightData : res.data.right,
remark : res.data.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"'),
content : res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
})
}).catch(err=>{
if(!err.login){
wx.showModal({
title : '用户登录已过期',
content : '请重新登录',
showCancel : false,
success : res => {
if (res.confirm) {
wx.redirectTo({
url: '/pages/login/login'
})
}
}
})
}
})
},
/**
* 须知展开收起状态
*/
noticeTap() {
this.setData({
noticeShow : !this.data.noticeShow
})
},
/**
* 重要提示展开收起状态
*/
pointMoreTap() {
this.setData({
pointMoreShow : !this.data.pointMoreShow
})
},
/**
* 普通商品支付提交
*/
ordinary() {
this.submitOrder();
this.setData({
disabled : true
})
},
/**
* 支付提交
*/
submitOrder() {
let welfareId = this.data.contData.welfare_id
wx.$api.index.fridayInfo(welfareId).then(res=>{
wx.$api.index.fridayPay(res.data.trade_no).then(res=>{
let payInfo = JSON.parse(res.data)
wx.requestPayment({
timeStamp: payInfo.timeStamp,
nonceStr : payInfo.nonceStr,
package : payInfo.package,
paySign : payInfo.paySign,
signType : payInfo.signType,
success : res=>{
if(res.errMsg == "requestPayment:ok"){
wx.showToast({
title: '支付成功',
icon : 'success'
})
setTimeout(()=>{
wx.reLaunch({
url: '/pages/coupon/coupon?type=couponPublic'
})
},3000)
}
},
fail : res=>{
wx.reLaunch({
url: '/pages/order/order?stateType=unpay'
})
}
})
})
})
}
})

5
pages/welfare/welfare.json Normal file
View File

@@ -0,0 +1,5 @@
{
"usingComponents": {},
"navigationBarTitleText": "支付详情",
"navigationBarBackgroundColor": "#ededed"
}

88
pages/welfare/welfare.wxml Normal file
View File

@@ -0,0 +1,88 @@
<!-- 按钮 -->
<view class="rightsBtn" bindtap="ordinary">
<button disabled="{{disabled}}">立即购买</button>
</view>
<!-- 重要提示 -->
<view class="rightsPoint">
<view class="rightsPoint-cont">
<view class="rightsPoint-top">
<image src="/static/icon/Point_icon.png"></image>
<text>重要提示</text>
</view>
<view class="rightsPoint-text {{pointMoreShow ? 'active' : ''}}">
<rich-text nodes="{{remark}}"></rich-text>
</view>
<view class="pointMore" bindtap="pointMoreTap">
<text>{{pointMoreShow == true ? '收起' : '展开'}}</text>
<image src="{{pointMoreShow == true ? '/static/img/pointMore-up.png' : '/static/img/pointMore.png'}}">
</image>
</view>
</view>
</view>
<view style="padding-bottom: 220px">
<!-- 卡券权益 -->
<view class="welfare">
<view class="welfareCont">
<view class="welfareCont-top">
<image class="welfareCont-list-img" src="{{item}}" mode="aspectFill" wx:for="{{rightData.logos}}"
wx:key="logos"></image>
</view>
<view class="welfareCont-text">
<view class="nowrap welfareCont-title">{{rightData.title}}</view>
<view class="nowrap welfareCont-tips">{{rightData.subtitle}}</view>
</view>
</view>
</view>
<view class="rightsList" style="padding: 0 0 2rpx">
<view class="rightsLabel">
<view class="rightsLabel-left">{{contData.attribute.form_price}}</view>
<view class="rightsLabel-right">￥{{contData.total}}</view>
</view>
<view class="rightsLabel uni-border-top">
<view class="rightsLabel-left">{{contData.attribute.form_qty}}</view>
<view class="rightsLabel-right">1张</view>
</view>
<view class="rightsLabel uni-border-top">
<view class="rightsLabel-left">{{contData.attribute.form_type}}</view>
<view class="rightsLabel-right rightsLabel-red">￥{{contData.score}}</view>
</view>
</view>
<!-- 应付总金额 -->
<view class="rightsList">
<view class="rightsLabel-pay" style="font-weight: 600;">
<view class="rightsLabel-left">{{contData.attribute.form_pay}}</view>
<view class="rightsLabel-right">￥<text style="font-size: 36rpx;">{{contData.price}}</text></view>
</view>
</view>
<!-- 支付方式 -->
<view class="rightsList">
<view class="rightsLabel-pay">
<view class="rightsLabel-left">支付方式</view>
<view class="rightsLabel-right">微信支付</view>
</view>
</view>
<!-- 购买须知 -->
<view class="notice">
<view class="noticeTitle" bindtap="noticeTap">
<view class="noticeTitle-flex">
<image class="noticeTitle-img" src="/static/icon/notice_icon.png"></image>
购买前请仔细阅读内容介绍
</view>
<image class="noticeTitle-row {{noticeShow ? 'active' : ''}}" src="/static/icon/rightsArrow.png"></image>
</view>
<view class="noticeText {{noticeShow ? 'active' : ''}}">
<!-- <view class="noticeText-top">内容介绍</view> -->
<view class="noticeText-cont">
<rich-text nodes="{{content}}"></rich-text>
</view>
</view>
</view>
</view>

567
pages/welfare/welfare.wxss Normal file
View File

@@ -0,0 +1,567 @@
/* 卡券权益 */
.welfare {
text-align: center;
width: 100%;
background-color: #fff;
padding: 30rpx;
box-sizing: border-box;
}
.welfareCont-top{
flex-wrap: wrap;
flex-direction: column;
margin: 10rpx 0;
}
.welfareCont-list-img {
border: 2rpx solid #eccc69;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
display: inline-block;
margin: 0 10rpx;
}
.welfareCont-text {
position: relative;
padding: 20rpx 50rpx;
box-sizing: border-box;
width: 100%;
display: grid;
border-top: 4rpx dashed #ebcc68;
}
.welfareCont-tips {
background-color: #000000;
color: #ffd88d;
border-radius: 10rpx;
margin-top: 20rpx;
height: 54rpx;
line-height: 54rpx;
font-size: 27rpx;
display: inline-block;
font-weight: 600;
padding: 0 20rpx;
}
.welfareCont {
background: #fcf9e8;
border: 2rpx solid #eac85c;
border-radius: 20rpx;
display: inline-block;
text-align: center;
box-sizing: border-box;
}
.rightsNumber {
display: flex;
width: 100%;
margin: 30px 0 20px;
padding: 0 30rpx;
box-sizing: border-box;
}
.rightsNumber text {
display: inline-block;
flex: 1;
}
.rightsAdd {
display: flex;
}
.rightsAdd-btn {
background: #eaeaea;
color: #535353;
border-radius: 50%;
text-align: center;
width: 50rpx;
height: 50rpx;
line-height: 45rpx;
font-size: 40rpx;
font-weight: 600;
}
.rightsAdd-input {
width: 100rpx;
text-align: center;
font-size: 28rpx;
line-height: 50rpx;
}
.rightsTips {
padding: 0 30rpx;
color: #ff5b5d;
font-size: 28rpx;
font-weight: 600;
}
.rightsList,
.notice,
.detailsStore {
background: white;
margin: 30rpx;
border-radius: 10rpx;
padding: 10rpx 0;
box-sizing: border-box;
}
.rightsLabel,
.rightsLabel-pay {
display: flex;
padding: 20rpx;
color: #6f7880;
font-size: 30rpx;
}
.rightsLabel .rightsLabel-left {
flex: 1;
color: #747d86;
}
.rightsLabel-black {
padding-top: 30rpx;
}
.rightsLabel-range {
display: flex;
color: #000;
font-weight: 600;
}
.rightsLabel-row {
width: 38rpx;
height: 38rpx;
margin: 2rpx 0 0 6rpx;
}
.rightsLabel-black .rightsLabel-right,
.rightsLabel-red {
color: #ff5b5d;
font-size: 32rpx;
}
.rightsLabel-black .rightsLabel-left {
color: #000;
}
.rightsLabel-score {
font-weight: 600;
color: #000;
font-size: 38rpx;
}
.rightsLabel-pay {
color: #000;
}
.rightsLabel-pay .rightsLabel-left {
flex: 1;
}
.notice {
padding: 20rpx;
}
.noticeTitle {
display: flex;
margin-bottom: 20rpx;
}
.noticeTitle-flex {
flex: 1;
display: flex;
font-size: 30rpx;
line-height: 46rpx;
}
.noticeTitle-img {
width: 46rpx;
height: 46rpx;
margin-right: 20rpx;
}
.noticeText {
font-size: 26rpx;
height: 0;
overflow: hidden;
}
.noticeText.active {
height: auto;
}
.noticeText-top {
margin: 30rpx 0 10rpx;
font-weight: 600;
}
.noticeText-cont {
line-height: 60rpx;
color: #666;
}
.noticeTitle-row {
width: 46rpx;
height: 46rpx;
}
.noticeTitle-row.active {
transform: rotate(90deg);
}
/* 门店 */
.detailsStore {
padding: 20rpx;
}
.detailsStore-top {
display: flex;
line-height: 30rpx;
margin-bottom: 20rpx;
}
.detailsStore-see {
color: #dfae2e;
border: 2rpx solid #dfae2e;
border-radius: 10rpx;
font-size: 28rpx;
margin-top: 30rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
}
.detailsStore-see text {
display: inline-block;
}
.detailsStore-see image {
width: 50rpx;
height: 50rpx;
margin-left: 10rpx;
}
/* 购买按钮 */
.rightsBtn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
z-index: 9;
background: #fff;
}
.rightsBtn button,
.rightsBtn text {
display: block;
margin: 12rpx 30rpx;
width: calc(100% - 60rpx) !important;
height: 74rpx !important;
line-height: 74rpx !important;
padding: 0;
background: #eacf88;
text-align: center;
border-radius: 60rpx;
font-size: 30rpx;
}
.rightsBtn.active text {
background: #dedede;
color: #888;
}
/* 选择收货地址 */
.addressBack {
position: fixed;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
width: 100%;
height: 100%;
display: none;
}
.addressBack.active {
display: block;
}
.addressCont {
position: fixed;
left: 0;
bottom: -1000%;
transition: .2s;
background: #fff;
z-index: 11;
width: 100%;
}
.addressCont.active {
bottom: 0;
}
.addressCont-title {
height: 90rpx;
line-height: 90rpx;
display: flex;
padding: 0 30rpx;
box-sizing: border-box;
font-size: 28rpx;
font-weight: 600;
}
.addressCont-left {
flex: 1;
}
.addressCont-right {
color: #309ded;
}
.header-classify {
white-space: nowrap;
box-sizing: border-box;
height: 600rpx;
}
.addressCont-list {
padding: 30rpx 20rpx;
box-sizing: border-box;
font-size: 30rpx;
overflow: hidden;
position: relative;
}
.addressCont-top {
display: flex;
margin-bottom: 10rpx;
}
.addressCont-name {
font-weight: 600;
}
.addressCont-text {
color: #666;
width: calc(100% - 160rpx);
}
.addressCont-list:last-child {
border: none;
}
.rightsLabel-address {
display: flex;
}
.rightsLabel-address text {
display: inline-block;
width: calc(100% - 46rpx);
}
.rightsLabel-address .rightsLabel-right {
display: flex;
font-size: 28rpx;
}
.address-tool {
display: flex;
float: right;
}
.address-tool-btn {
font-size: 24rpx;
margin-top: 20rpx;
border: 2rpx solid #666;
color: #666;
border-radius: 6rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
padding: 0 20rpx;
margin-right: 20rpx;
display: flex;
}
.address-tool-btn-del {
color: #dfae2e;
border-color: #dfae2e;
}
.address-tool-icon {
width: 120rpx;
height: 54rpx;
line-height: 54rpx;
border-radius: 4rpx;
text-align: center;
color: #fff;
position: absolute;
top: 45rpx;
right: 10rpx;
background: #dfae2e;
transform: scale(.9, .9);
font-size: 24rpx;
}
.rightsPoint {
position: fixed;
left: 0;
bottom: 100rpx;
background: #fff;
z-index: 9;
width: 100%;
padding: 20rpx 20rpx 10rpx;
box-sizing: border-box;
}
.rightsPoint-cont {
width: 100%;
background: #fcf9e8;
border: 2rpx solid #ecd390;
border-radius: 10rpx;
position: relative;
max-height: 50vh;
overflow-y: scroll;
}
.rightsPoint-top {
font-size: 28rpx;
display: flex;
padding: 20rpx;
box-sizing: border-box;
font-weight: 600;
}
.rightsPoint-top image {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
.rightsPoint-text {
padding: 0 20rpx;
box-sizing: border-box;
font-size: 24rpx;
line-height: 44rpx;
height: 90rpx;
transition: height 25s;
overflow: hidden;
}
.rightsPoint-text.active {
height: auto;
transition: 2s;
}
.rightsPoint-text view {
position: relative;
padding-left: 40rpx;
}
.rightsPoint-text view::after {
position: absolute;
content: '';
left: 10rpx;
top: 20rpx;
background: #000;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.rightsPoint-bolck {
position: absolute;
top: 0;
left: 0;
height: calc(100% - 40rpx);
}
.pointMore {
text-align: center;
width: 100%;
background: #fff8e5;
height: 80rpx;
line-height: 82rpx;
position: relative;
margin-top: 10rpx;
}
.pointMore::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 2rpx;
background: #ecd390;
}
.pointMore text {
font-size: 28rpx;
color: #c38e00;
animation: dong 1.8s infinite;
display: inline-block;
}
.pointMore image {
width: 30rpx;
height: 30rpx;
margin-left: 4rpx;
vertical-align: -4rpx;
animation: dong 1.8s infinite;
}
@keyframes dong {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -6rpx);
}
100% {
transform: translate(0px, 0px);
}
}
.rightsCont-btn {
display:inline-block;
text-align: center;
background-image: linear-gradient(to right, #eaaaa8, #f4e5c2, #eaaaa8);
box-shadow: 0 0 10rpx rgba(233, 166, 166, .9);
border-radius: 30px;
padding: 5rpx;
line-height: 40rpx;
}
.rightsCont-btn text {
border-radius: 30px;
width: 100%;
height: 100%;
display: block;
padding: 10rpx 20rpx;
box-sizing: border-box;
background: linear-gradient(#fefcfa, #f9f0db, #f7ebcf);
font-size: 30rpx;
}
.webBack {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 9999;
background-color: #fff;
text-align: center;
display: none;
}
.webBack.active {
display: block;
}