[水感应客户端最新]
This commit is contained in:
220
pages/mall/confirm/confirm.js
Normal file
220
pages/mall/confirm/confirm.js
Normal file
@@ -0,0 +1,220 @@
|
||||
/*
|
||||
* 手太欠
|
||||
* 愿这世界都如故事里一样 美好而动人~
|
||||
*/
|
||||
|
||||
Page({
|
||||
data: {
|
||||
goods_id : '', // 店铺id
|
||||
goods_sku : '', // 产品id
|
||||
goods_qty : '', // 产品数量
|
||||
address : '', // 地址
|
||||
addressId : '', // 地址id
|
||||
goodskData : '', // 数据
|
||||
amount : '', // 总金额
|
||||
freight : '', // 运费
|
||||
weight : '', // 重量
|
||||
disabled : true,//按钮
|
||||
paySuccess : false, // 兑换成功显示
|
||||
maxcoupon : '', //拥有兑换券数量
|
||||
coupon_qty : 1, //兑换券数量
|
||||
checked : false//兑换券
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
goods_id : options.goodsid,
|
||||
goods_sku : options.skuid,
|
||||
goods_qty : options.qty
|
||||
})
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 获取下单信息
|
||||
this.confirmInfo()
|
||||
},
|
||||
|
||||
/**
|
||||
* 产品下单信息
|
||||
*/
|
||||
confirmInfo (){
|
||||
wx.$api.mall.mallPlace({
|
||||
goods_sku_id: this.data.goods_sku,
|
||||
address_id: this.data.addressId,
|
||||
qty: this.data.goods_qty
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
address : res.data.address,
|
||||
addressId : res.data.address.address_id,
|
||||
goodskData: res.data.detail,
|
||||
amount : res.data.amount,
|
||||
freight : res.data.freight,
|
||||
weight : res.data.weight,
|
||||
maxcoupon : res.data.couponCount
|
||||
})
|
||||
|
||||
// 计算总价格
|
||||
this.totalPrice()
|
||||
}).catch(err => { })
|
||||
},
|
||||
|
||||
/**
|
||||
* 产品数量加减
|
||||
*/
|
||||
goodsNumber(e){
|
||||
let num = this.data.goods_qty,
|
||||
val = e.currentTarget.dataset.type
|
||||
if (val == 'plus'){
|
||||
num ++;
|
||||
}else{
|
||||
if (num > 1){
|
||||
num --;
|
||||
if(num < this.data.coupon_qty) {
|
||||
this.setData({
|
||||
coupon_qty: num
|
||||
})
|
||||
}
|
||||
}else{
|
||||
wx.showToast({
|
||||
title : '商品数量不能小于1',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
goods_qty: num
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
goods_qty: num
|
||||
})
|
||||
|
||||
// 计算总价格
|
||||
this.totalPrice()
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否使用兑换券
|
||||
*/
|
||||
checkedTap() {
|
||||
this.setData({
|
||||
checked: !this.data.checked
|
||||
})
|
||||
|
||||
// 计算总价格
|
||||
this.totalPrice()
|
||||
},
|
||||
|
||||
/**
|
||||
* 兑换券数量加减
|
||||
*/
|
||||
couponNumber(e){
|
||||
let minVal = Math.min(this.data.goods_qty, this.data.maxcoupon)
|
||||
let num = this.data.coupon_qty,
|
||||
val = e.currentTarget.dataset.type
|
||||
if (val == 'plus'){
|
||||
if(num >= minVal){
|
||||
this.setData({
|
||||
coupon_qty: minVal
|
||||
})
|
||||
wx.showToast({
|
||||
title: '兑换券数量超出产品数量或兑换券不足',
|
||||
icon : 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
num ++;
|
||||
|
||||
}else{
|
||||
if (num > 1){
|
||||
num --;
|
||||
}else{
|
||||
wx.showToast({
|
||||
title : '兑换券数量不能小于1',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
coupon_qty: num
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
coupon_qty: num
|
||||
})
|
||||
|
||||
// 计算总价格
|
||||
this.totalPrice()
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算总价格
|
||||
*/
|
||||
totalPrice() {
|
||||
let couponQty = this.data.coupon_qty
|
||||
let goodNum = this.data.goods_qty
|
||||
let goodPrice = this.data.goodskData[0].items[0].price
|
||||
let freight = this.data.freight
|
||||
let totalPrice = 0
|
||||
|
||||
totalPrice = this.data.checked ?
|
||||
(goodNum - couponQty) * goodPrice :
|
||||
goodNum * goodPrice
|
||||
if(freight > 0) totalPrice += freight
|
||||
|
||||
this.setData({
|
||||
amount: totalPrice
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 产品确认购买
|
||||
*/
|
||||
buyTap() {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
})
|
||||
let that = this
|
||||
let data = {
|
||||
goods_sku_id: this.data.goods_sku,
|
||||
qty : this.data.goods_qty,
|
||||
address_id : this.data.addressId,
|
||||
use_coupon : this.data.checked,
|
||||
coupon_qty : this.data.coupon_qty
|
||||
}
|
||||
wx.$api.mall.mallAffirm(data).then(res => {
|
||||
this.setData({
|
||||
disabled: false
|
||||
})
|
||||
wx.hideLoading()
|
||||
|
||||
if(res.data.can_pay) {
|
||||
wx.redirectTo({
|
||||
url: '/pages/pay/index?order_no=' + res.data.order_no + '&total=' + res.data.total
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
wx.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
//显示透明蒙层,防止触摸穿透
|
||||
mask:true,
|
||||
success: function () {
|
||||
that.setData({
|
||||
paySuccess: true
|
||||
})
|
||||
setTimeout(()=>{
|
||||
wx.redirectTo({
|
||||
url: '/pages/order/index?state=paid'
|
||||
})
|
||||
},3000)
|
||||
}
|
||||
})
|
||||
|
||||
}).catch(err => {
|
||||
this.setData({
|
||||
disabled: true
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
4
pages/mall/confirm/confirm.json
Normal file
4
pages/mall/confirm/confirm.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "订单确认"
|
||||
}
|
||||
81
pages/mall/confirm/confirm.wxml
Normal file
81
pages/mall/confirm/confirm.wxml
Normal file
@@ -0,0 +1,81 @@
|
||||
<!-- 地址 -->
|
||||
<view class="address">
|
||||
<navigator hover-class="none" url="/pages/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/orderArrow.png"></image>
|
||||
</navigator>
|
||||
<view class="address-add" wx:else>
|
||||
<navigator hover-class="none" url="/pages/site/index?type=goodsAddress" class="address-go">新增收货地址 +</navigator>
|
||||
</view>
|
||||
<image class="address-img" src="/static/imgs/address.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 商品 -->
|
||||
<view class="list-goods" wx:for="{{goodskData}}" wx:key="stockData">
|
||||
<block wx:for="{{item.items}}" wx:key="items" wx:for-item="items">
|
||||
<image class="list-goods-img" mode="aspectFill" src="{{items.cover ? items.cover : '/static/imgs/default.png'}}"></image>
|
||||
<view class="list-goods-cont">
|
||||
<view class="nowrap list-goods-name">{{items.title}}</view>
|
||||
<view class="list-goods-text">
|
||||
<text>规格 99ml</text>x1
|
||||
</view>
|
||||
<view class="list-goods-parice">
|
||||
产品金额 ¥<text>{{items.price}}</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="number" value="{{goods_qty}}" 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">{{freight == 0 ? '免邮' : freight + '元'}}</view>
|
||||
</view>
|
||||
<view class="coupons" wx:if="{{maxcoupon != 0}}">
|
||||
<view class="coupons-item">
|
||||
<view class="label-name">兑换券</view>
|
||||
<view class="label-text">勾选使用<checkbox class="label-text-checkbox" checked="{{checked}}" bindtap="checkedTap" color="#3b7cff" style="transform:scale(.7);" /></view>
|
||||
</view>
|
||||
<view class="coupon-checked" wx:if="{{checked}}">
|
||||
<view class="coupon-checked-name">使用数量</view>
|
||||
<view class="coupon-checked-number">
|
||||
<view class="coupon-checked-btn" bindtap="couponNumber" data-type="remove">-</view>
|
||||
<input class="coupon-checked-input" bindblur="couponNumberInput" type="number" value="{{coupon_qty}}" disabled />
|
||||
<view class="coupon-checked-btn" bindtap="couponNumber" data-type="plus">+</view>
|
||||
</view>
|
||||
</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>¥</text>
|
||||
<view class="number-price">{{amount}}</view>
|
||||
<view class="number-vip">实付金额</view>
|
||||
</view>
|
||||
<view class="btn" bindtap="buyTap" wx:if="{{disabled}}">立即支付</view>
|
||||
<view class="btn active" wx:else>立即支付</view>
|
||||
</view>
|
||||
|
||||
<view class="pack-center pages-hint grey" wx:if="{{paySuccess}}">
|
||||
<image src="/static/icons/loadingGif.gif"></image>
|
||||
<view>疯狂加载中...</view>
|
||||
</view>
|
||||
315
pages/mall/confirm/confirm.wxss
Normal file
315
pages/mall/confirm/confirm.wxss
Normal file
@@ -0,0 +1,315 @@
|
||||
page {
|
||||
background-color: #f5f6f8;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
.address {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.address-arrow {
|
||||
position: absolute;
|
||||
right: 15rpx;
|
||||
top: 78rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.address-cont {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.address-top {
|
||||
width: calc(100% - 80rpx);
|
||||
}
|
||||
|
||||
.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%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 商品 */
|
||||
|
||||
.list-goods {
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
padding: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list-goods-img {
|
||||
width: 184rpx;
|
||||
height: 184rpx;
|
||||
margin-right: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.list-goods-cont {
|
||||
width: calc(100% - 214rpx);
|
||||
}
|
||||
|
||||
.list-goods-name {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.list-goods-text {
|
||||
line-height: 90rpx;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.list-goods-text text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-goods-parice {
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.list-goods-parice text {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
/* 规格 */
|
||||
.label {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
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-integral {
|
||||
color: #3b7cff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.coupons {
|
||||
border-bottom: 2rpx solid rgb(243, 243, 243);
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupons-item {
|
||||
display: flex;
|
||||
line-height: 100rpx;
|
||||
color: #585866;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.coupon-checked {
|
||||
background-color: #fff3ea;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-checked-name {
|
||||
color: #ff9951;
|
||||
font-size: 28rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.coupon-checked-number {
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0rpx;
|
||||
display: flex;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
.coupon-checked-btn {
|
||||
color: #db6815;
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 38rpx;
|
||||
line-height: 78rpx;
|
||||
}
|
||||
|
||||
.coupon-checked-input {
|
||||
width: 60rpx;
|
||||
border: 2rpx solid #bd5e1b;
|
||||
border-radius: 4rpx;
|
||||
text-align: center;
|
||||
color: #dd620a;
|
||||
height: 36rpx;
|
||||
min-height: 36rpx;
|
||||
display: inline-block;
|
||||
margin-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/*checkbox选中后样式 */
|
||||
.label-text-checkbox {
|
||||
margin-right: -14rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.label-text-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
background: #ff9951;
|
||||
border-color: #ff9951;
|
||||
}
|
||||
|
||||
.label-text-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
-webkit-transform: translate(-50%, -50%) scale(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: #272e4f;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.number {
|
||||
flex: 1;
|
||||
line-height: 60px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.number text {
|
||||
font-size: 28rpx;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
|
||||
.number-price {
|
||||
padding: 0 5rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.number-vip {
|
||||
margin-left: 20rpx;
|
||||
color: #8d97a1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 100%;
|
||||
background-color: #ff9951;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
padding: 0 70rpx;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: #cacaca;
|
||||
}
|
||||
|
||||
.detailsBrief-back{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grey {
|
||||
background-color: #f9f9f9;
|
||||
z-index: 99999;
|
||||
}
|
||||
Reference in New Issue
Block a user