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

[最新]

Browse Source
This commit is contained in:
张慢慢
2023-09-22 17:28:59 +08:00
parent 677b0d040a
commit ae5992fa79
20 changed files with 572 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/bag/bag.js
View File

@@ -253,9 +253,9 @@ Page({
bagOrderLoading:true
})
if (this.data.bagId != ''){
console.log('提交的数据id:' + this.data.bagId)
wx.navigateTo({
url: './bagConfirm/bagConfirm?skuId=' + this.data.bagId
})
// setTimeout(() => {
// this.setData({
// bagOrderLoading: false

4
pages/bag/bag.wxml
View File

@@ -45,7 +45,7 @@
<!-- 购物袋为空 -->
<view class="pack-center pages-hint" wx:else>
<image src="/static/icons/null_icon.png"></image>
<image src="/static/icons/carnull_icon.png"></image>
<view>购物袋中暂无任何商品</view>
</view>
@@ -57,7 +57,7 @@
<!-- 结算 -->
<view class="bag-footer">
<view class="bag-footer-price">合计<text>￥{{allPrice}}</text></view>
<view class="bag-footer-rests">共计{{bagNumber}}件,不含运费</view>
<view class="bag-footer-rests">共计{{bagNumber}}件</view>
<button class="bag-footer-btn" size="mini" bindtap="bagOrder" disabled="{{bagOrderLoading}}" loading="{{bagOrderLoading}}">结算</button>
</view>
</view>

2
pages/bag/bag.wxss
View File

@@ -1,6 +1,8 @@
.content{ background: #f7f8f9; min-height: 100vh; }
.pack-center {z-index: 9;}
/* 工具栏 */
.bag-header{ border-bottom: solid 1rpx #f1f1f1; padding: 25rpx 30rpx; overflow: hidden; position: fixed; width: 100%; top: 0; left: 0; box-sizing: border-box; line-height: 40rpx; }

100
pages/bag/bagConfirm/bagConfirm.js Normal file
View File

@@ -0,0 +1,100 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
disabled : true, //按钮
skuId : '',
address : '', // 地址
goodskData : '', // 数据
amount : '', // 商品总金额
total : '', // 支付金额
freight : '', // 运费
weight : '', // 重量
distribution : [
{ type: 0, title: "快递" },
{ type: 1, title: "自提" },
],
distributionIndex: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options.skuId)
this.setData({
skuId : options.skuId
})
// 获取商品下单信息
this.placeInfo(options.skuId);
},
/**
* 配送方式选择
*/
distributionChange(e){
if(e.detail.value === this.data.distributionIndex) return
this.setData({
distributionIndex: e.detail.value
})
this.placeInfo(this.data.skuId);
},
/**
* 商品下单信息
*/
placeInfo(skuid, type) {
wx.showLoading({
title: '加载中...',
mask : true
})
wx.$api.bag.buyCarts({
cart_ids : skuid,
address_id : this.data.address.address_id || '',
delivery_type: this.data.distributionIndex
}).then(res => {
if(type != 'chooseAdd'){
this.setData({
address: res.data.address,
})
}
this.setData({
goodskData: res.data.detail,
amount : res.data.amount,
total : res.data.total,
freight : res.data.freight,
weight : res.data.weight
})
wx.hideLoading()
})
},
/**
* 商品确认下单
*/
buyTap() {
wx.showLoading({
title: '下单中...',
mask : true
})
wx.$api.bag.postCarts({
cart_ids : this.data.skuId,
address_id : this.data.address.address_id,
remark : '',
delivery_type : this.data.distributionIndex
}).then(res => {
wx.redirectTo({
url: '/pages/pay/index?params=' + encodeURIComponent(JSON.stringify(res.data))
})
wx.hideLoading()
}).catch(() =>{}).finally(() => {})
},
})

4
pages/bag/bagConfirm/bagConfirm.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "购物车订单确认"
}

77
pages/bag/bagConfirm/bagConfirm.wxml Normal file
View File

@@ -0,0 +1,77 @@
<view class="borderBottom">
<!-- 地址 -->
<view class="address" wx:if="{{distributionIndex == 0}}">
<navigator hover-class="none" url="/pages/site/index?type=goodsAddress&skuid={{skuId}}&qty={{goodsQty}}" class="address-cont" wx:if="{{address}}">
<view class="address-top">
<view class="address-area">
<image class="address-icon" src="/static/icons/address.png" mode="widthFix"></image>{{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&skuid={{skuId}}&qty={{goodsQty}}" class="address-go">新增收货地址 +</navigator>
</view>
<image class="address-img" src="/static/imgs/address.png" mode="widthFix"></image>
</view>
<!-- 商品 -->
<view class="more-goods" wx:for="{{goodskData}}" wx:key="stockData">
<view class="more-name">
<image src="/static/icons/shopIcon.png"></image>{{item.shop.name}}
</view>
<view class="list-goods" wx:for="{{item.items}}" wx:key="items" wx:for-item="items">
<image class="list-goods-img" mode="aspectFill" src="{{items.cover ? items.cover : '/static/ls/1.jpg'}}"></image>
<view class="list-goods-cont">
<view class="nowrap list-goods-name">{{items.title}}</view>
<view class="list-goods-text">
<text>购买数量</text> x{{items.qty}}
</view>
<view class="list-goods-parice">
￥<text>{{items.price}}</text>
</view>
</view>
</view>
</view>
<!-- 配送方式 -->
<view class="label">
<view class="label-item">
<view class="label-name">配送方式</view>
<picker range="{{distribution}}" range-key="title" class="label-picker" value="{{distributionIndex}}" bindchange="distributionChange">
<view class="label-picker-val">{{distribution[distributionIndex].title}}<image class="label-picker-icon" src="/static/icons/arrow_more.png"></image>
</view>
</picker>
</view>
</view>
<!-- 规格 -->
<view class="label">
<view class="label-item" wx:if="{{distributionIndex == 0}}">
<view class="label-name">快递</view>
<view class="label-text">{{freight == 0 ? '免邮' : '￥' + freight + '元'}}</view>
</view>
<view class="label-item">
<view class="label-name">重量</view>
<view class="label-text">{{weight}}g</view>
</view>
<view class="label-item">
<view class="label-name">金额</view>
<view class="label-integral">￥{{amount}}</view>
</view>
</view>
</view>
<!-- 底部 -->
<view class="footer">
<view class="number">
<view class="number-vip">合计：</view>
<text>￥</text>
<view class="number-price">{{total}}</view>
</view>
<view class="btn {{disabled ? '': 'active'}}" bindtap="buyTap">立即支付</view>
</view>

317
pages/bag/bagConfirm/bagConfirm.wxss Normal file
View File

@@ -0,0 +1,317 @@
page {
background-color: #f5f6f8;
padding: 30rpx;
box-sizing: border-box;
}
.borderBottom {
border-bottom: 110rpx solid transparent;
}
/* 地址 */
.address {
background-color: #FFFFFF;
border-radius: 15rpx;
overflow: hidden;
position: relative;
margin-bottom: 30rpx;
}
.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;
display: flex;
line-height: 40rpx;
}
.address-icon {
width: 40rpx;
margin-right: 20rpx;
}
.address-text {
font-weight: 600;
padding: 10px 0;
}
.address-name text {
color: #585866;
padding-left: 30rpx;
}
.address-img {
width: 100%;
height: 10rpx;
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;
}
/* 商品 */
.more-goods {
background-color: #FFFFFF;
border-radius: 15rpx;
}
.more-name {
padding: 30rpx 30rpx 0;
box-sizing: border-box;
font-weight: 600;
display: flex;
line-height: 38rpx;
}
.more-name image {
width: 38rpx;
height: 38rpx;
margin-right: 10rpx;
}
.list-goods {
background-color: #FFFFFF;
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 {
font-size: 26rpx;
}
.list-goods-parice text {
font-size: 34rpx;
}
/* 规格 */
.label {
background-color: #FFFFFF;
border-radius: 15rpx;
overflow: hidden;
box-sizing: border-box;
margin-top: 30rpx;
}
.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: #da2b54;
font-weight: 600;
}
.label-name {
flex: 1;
}
.label-picker{ width: 70%; }
.label-picker-val{ text-align: right; display: flex; align-items: center; justify-content: flex-end;}
.label-picker-icon{ width: 24rpx; height: 24rpx; margin-left: 10rpx; }
/*checkbox选中后样式 */
.label-text-checkbox {
margin-right: -14rpx;
margin-left: 10rpx;
}
.label-text-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #da2b54;
border-color: #da2b54;
}
.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;
height: 48rpx;
border: 2rpx solid #d7d7d7;
border-radius: 10rpx;
}
.number-btn {
background-color: transparent;
width: 48rpx;
height: 48rpx;
line-height: 48rpx;
text-align: center;
}
.number-input {
width: 80rpx;
text-align: center;
height: 48rpx;
border-left: 2rpx solid #d7d7d7;
border-right: 2rpx solid #d7d7d7;
}
/* 底部 */
.footer {
width: 100%;
height: 60px;
background-color: #ffffff;
position: fixed;
left: 0;
bottom: 0;
z-index: 9;
box-sizing: border-box;
display: flex;
}
.number {
flex: 1;
line-height: 60px;
color: #da2b54;
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: #da2b54;
text-align: center;
color: #FFFFFF;
padding: 0 70rpx;
line-height: 60px;
}
.btn-disabled {
line-height: 60px;
text-align: center;
border: none;
border-radius:0;
background-color: #da2b54;
padding: 0;
margin: 0;
}
button[disabled]{
padding: 0;
padding: 0;
height: 60px;
line-height: 60px;
background-color: transparent !important;
}
.btn.active {
background-color: #cacaca;
}
.detailsBrief-back{
width: 100%;
}
.grey {
background-color: #f9f9f9;
z-index: 99999;
}