zhangjing/sykl-mall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

锶源昆仑商城

Browse Source
This commit is contained in:
张慢慢
2023-07-22 19:01:37 +08:00
commit 4ba3377084
223 changed files with 10557 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/order/details/index.js Normal file
View File

@@ -0,0 +1,77 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
goodsData : '', //详情
sign : '', //签收
express : '', //物流
orderNo : '' //订单号
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
orderNo: options.orderNo
})
// 订单详情
this.goodsInfo(options.orderNo);
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {},
// 获取订单详情
goodsInfo(orderNo) {
wx.$api.user.goodsDet(orderNo).then(res => {
this.setData({
goodsData : res.data,
sign : res.data.can.sign,
express : res.data.express
})
}).catch(err => {})
},
// 复制订单号
copyUrl(val) {
wx.setClipboardData({
data: val.currentTarget.dataset.no,
success: () => {
wx.showToast({
title: "复制成功",
icon : "none"
})
}
})
},
// 订单签收
signClick() {
wx.showModal({
title : '提示',
content : '是否签收',
success : res=> {
if (res.confirm) {
wx.$api.user.goodsSign(this.data.orderNo).then(res => {
wx.showToast({
title:'签收成功',
icon:'none'
})
wx.navigateBack()
}).catch(err => {})
}
}
})
}
})

4
pages/order/details/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "订单详情"
}

84
pages/order/details/index.wxml Normal file
View File

@@ -0,0 +1,84 @@
<view class="orderData">
<view class="While">
<view class="orderData-cont-label">
<image class="orderData-cont-img" src="/static/icons/orderIcon_01.png" mode="aspectFill"></image>
<view class="orderData-cont-text">
<view class="orderData-cont-name">订单编号</view>
<view class="orderData-cont-copy">
<text class="nowrap">{{ goodsData.order_no }}</text>
<view bindtap="copyUrl" data-no="{{goodsData.order_no}}">复制</view>
</view>
</view>
</view>
<view class="orderData-cont-label">
<image class="orderData-cont-img" src="/static/icons/orderIcon_00.png" mode="aspectFill"></image>
<view class="orderData-cont-text">
<view class="orderData-cont-name">{{ goodsData.express.name }} <text>{{ goodsData.express.mobile }}</text></view>
<view class="orderData-cont-copy">
{{ goodsData.express.full_address }}
</view>
</view>
</view>
</view>
<view class="While orderGoods">
<view class="orderGoods-wares" wx:for="{{goodsData.items}}" wx:key="items">
<!-- 先默认固定图 -->
<image class="orderGoods-img" src="{{ item.sku.cover }}" mode="widthFix"></image>
<view class="orderGoods-cont">
<view class="nowrap orderGoods-name">{{ item.sku.goods_name }}</view>
<view class="orderGoods-price">
<text>￥{{ item.price }}</text>
x{{ item.qty }}
</view>
</view>
</view>
</view>
<view class="While reserveCont">
<view class="reserveCont-title">订单信息</view>
<!-- <view class="reserve-label">
<view class="reserve-name">订单类型</view>
<view class="reserve-text">
<text class="active" wx:if="{{goodsData.type == '积分兑换'}}">兑换订单</text>
<text wx:else>提货订单</text>
</view>
</view> -->
<view class="reserve-label">
<view class="reserve-name">交易时间</view>
<view class="reserve-text">{{ goodsData.created_at }}</view>
</view>
<view class="reserve-label">
<view class="reserve-name">运费</view>
<view class="reserve-text">{{ goodsData.freight == 0 ? '免邮' : goodsData.freight }}</view>
</view>
<view class="reserve-label">
<view class="reserve-name">交易状态</view>
<view class="reserve-text green">{{ goodsData.state }}</view>
</view>
</view>
<view class="While reserveCont" wx:if="{{express.express_name}}">
<view class="reserveCont-title">物流信息</view>
<view class="reserve-label">
<view class="reserve-name">物流公司</view>
<view class="reserve-text">{{ express.express_name }}</view>
</view>
<view class="reserve-label">
<view class="reserve-name">收货姓名</view>
<view class="reserve-text green">{{ express.name }}</view>
</view>
<view class="reserve-label">
<view class="reserve-name">收货电话</view>
<view class="reserve-text green">{{ express.mobile }}</view>
</view>
<view class="reserve-label">
<view class="reserve-name">物流单号</view>
<view class="reserve-text">{{ express.express_no }}<view class="reserve-copy" bindtap="copyUrl" data-no="{{express.express_no}}">复制</view>
</view>
</view>
</view>
</view>
<view class="order-data-footer">
<navigator hover-class="none" class="order-btn" open-type="navigateBack">返回订单</navigator>
<view class="order-btn" bindtap="signClick" wx:if="{{sign}}">签收订单</view>
</view>

209
pages/order/details/index.wxss Normal file
View File

@@ -0,0 +1,209 @@
page {
background: #f3f4f6;
padding: 30rpx;
box-sizing: border-box;
}
.While {
border-radius: 10rpx;
margin-bottom: 30rpx;
background-color: #FFFFFF;
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
}
.orderData {
border-bottom: 70rpx transparent solid;
}
/* 订单 */
.orderData-cont-label {
padding: 40rpx 30rpx;
display: flex;
box-sizing: border-box;
border-bottom: #f2f2f2 2rpx solid;
}
.orderData-cont-img {
width: 48rpx;
height: 48rpx;
vertical-align: middle;
}
.orderData-cont-text {
width: calc(100% - 68rpx);
margin-left: 20rpx;
box-sizing: border-box;
font-size: 30rpx;
}
.orderData-cont-name {
margin-bottom: 10rpx;
}
.orderData-cont-name text {
color: #999;
padding-left: 20rpx;
}
.orderData-cont-copy {
display: flex;
font-size: 26rpx;
color: #999;
}
.orderData-cont-copy text {
flex: 1;
display: inline-block;
margin-right: 20rpx;
}
.orderData-cont-copy view {
color: #eb504c;
}
/* 产品 */
.orderGoods {
padding: 30rpx;
box-sizing: border-box;
}
.orderGoods-wares {
position: relative;
}
.orderGoods-img {
width: 100rpx;
height: 100rpx;
border: 2rpx solid #dddddd;
border-radius: 10rpx;
}
.orderGoods-cont {
position: absolute;
width: calc(100% - 130rpx);
left: 130rpx;
top: 0;
font-size: 30rpx;
}
.orderGoods-text {
margin: 20rpx 0 30rpx;
color: #666666;
font-size: 26rpx;
}
.orderGoods-price {
display: flex;
color: #555555;
margin-top: 15rpx;
}
.orderGoods-price text {
flex: 1;
color: #000;
}
.orderGoods-brief {
display: flex;
padding-top: 30rpx;
}
.orderGoods-brief view {
flex: 1;
color: #333333;
}
.orderGoods-brief text {
font-weight: 600;
}
/* 规格 */
.reserveCont-title {
font-weight: 600;
padding: 30rpx;
font-size: 30rpx;
}
.reserve-label {
display: flex;
padding: 0 30rpx 30rpx;
box-sizing: border-box;
font-size: 26rpx;
}
.reserve-name {
flex: 1;
width: 200rpx;
margin-right: 20rpx;
color: #7e7e7e;
}
.reserve-text {
width: calc(100% - 240rpx);
text-align: right;
line-height: 50rpx;
}
.reserve-text text {
font-size: 24rpx;
display: inline-block;
background-image: linear-gradient(to right, #f16e06, #f34206);
color: #FFFFFF;
border-radius: 6rpx;
padding: 0 10rpx;
height: 44rpx;
line-height: 44rpx;
margin-top: 6rpx;
}
.reserve-text text.active {
background-image: linear-gradient(to right, #027be6, #2855f0);
}
.reserve-text.reserve-price {
font-weight: 600;
color: #1d37e2;
}
.reserve-copy {
color: #6774ff;
border: #6774ff 2rpx solid;
display: inline-block;
height: 34rpx;
line-height: 34rpx;
font-size: 26rpx;
padding: 0 10rpx;
border-radius: 4rpx;
margin-left: 10rpx;
}
/* 底部菜单 */
.order-data-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1rpx #f2f2f2;
padding-top: 17rpx;
padding-right: 30rpx;
padding-left: 30rpx;
height: 83rpx;
background: white;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
z-index: 9;
}
.order-btn {
margin-left: 20rpx;
height: 58rpx;
line-height: 58rpx;
box-sizing: border-box;
border: solid 1rpx #747788;
padding: 0 20rpx;
font-size: 26rpx;
border-radius: 10rpx;
margin-top: 5rpx;
}

246
pages/order/list/index.js Normal file
View File

@@ -0,0 +1,246 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
listType : 'unpay', //unpay待付款, paid待发货，delivered已发货，signed已签收 completed已完成
orderArr : [], //订单列表
disabled : false,
surplus : '', // 水滴数量
orderNo : '', // 订单编号
payEject : false, // 支付弹出
payType : 'wechat' //支付类型 wechat微信 water水滴兑换
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
listType: options.listType
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取订单列表
this.ordersInfo();
// 获取用户信息
this.userInfo();
},
/**
* 用户信息
*/
userInfo() {
wx.$api.user.home().then(res => {
this.setData({
surplus : res.data.account.score.surplus
})
}).catch(err => {})
},
/**
* 订单列表
*/
ordersInfo(page) {
wx.$api.user.orders({
state: this.data.listType,
page : page
}).then(res => {
let listArr = this.data.orderArr,
newData = []
if(page == 1 || page == undefined) listArr = []
newData = listArr.concat(res.data.data)
this.setData({
orderArr : newData,
page : res.data.page,
lodingStats : false
})
wx.stopPullDownRefresh()
}).catch(err => {})
},
/**
* 状态筛选
*/
onTabs(val){
if(this.data.listType === val) return
this.setData({
listType: val.currentTarget.dataset.type
})
// 商品详情数据
this.ordersInfo();
},
/**
* 选择支付方式
*/
radioChange(e) {
this.setData({
payType : e.detail.value
})
},
/**
* 立即付款
*/
payTap(e) {
this.setData({
orderNo: e.currentTarget.dataset.no,
payEject: true
})
},
/**
* 立即付款-弹出关闭
*/
payClose() {
this.setData({
payEject: false
})
},
// 支付提交
paySubmit() {
this.setData({
payEject: false
})
if(this.data.payType == 'wechat') {
this.wxPay()
return
}
// this.data.payType == water 为水滴兑换
this.waterPay()
},
// 微信支付
wxPay() {
wx.showLoading({
title: '支付中...',
mask : true
})
let that = this
wx.login({
success: res => {
wx.$api.member.openid(res).then(openidRes => {
wx.$api.member.wechatPay(this.data.orderNo, {
type : 'miniapp',
openid : openidRes.data
}).then(PayRes => {
wx.hideLoading()
this.setData({
disabled : true
})
let payInfo = JSON.parse(PayRes.data.wechat)
wx.requestPayment({
timeStamp: payInfo.timeStamp,
nonceStr : payInfo.nonceStr,
package : payInfo.package,
paySign : payInfo.paySign,
signType : payInfo.signType,
success : payInfoRes=>{
if(payInfoRes.errMsg == "requestPayment:ok"){
wx.showToast({
title: '支付成功',
icon: 'none',
duration: 2000,
//显示透明蒙层，防止触摸穿透
mask:true,
success: function () {
// 获取订单列表
that.ordersInfo();
}
})
}
},
fail : res=>{
wx.showToast({
title: '支付失败',
icon: 'none',
duration: 500,
//显示透明蒙层，防止触摸穿透
mask:true,
success: function () {
// 获取订单列表
that.ordersInfo();
that.setData({
listType: 'unpay'
})
}
})
}
})
}).catch(err => {})
}).catch(err => {})
}
})
},
// 水滴兑换
waterPay() {
wx.showLoading({
title: '水滴兑换中...',
mask : true
})
let that = this
wx.$api.mall.affirmPay(this.data.orderNo, {gateway: 'miniapp'}).then(res => {
wx.hideLoading()
this.setData({
disabled : true
})
wx.showToast({
title: '兑换成功',
icon: 'none',
duration: 2000,
//显示透明蒙层，防止触摸穿透
mask:true,
success: function () {
// 获取订单列表
that.ordersInfo();
that.setData({
listType: 'unpay'
})
}
})
}).catch(err => {})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 获取订单列表
this.ordersInfo();
},
/**
* 上拉加载
*/
onReachBottom(){
this.setData({
lodingStats: true
})
let pageNumber = this.data.page.current
if(this.data.page.has_more){
pageNumber++
// 获取订单列表
this.ordersInfo(pageNumber);
}
}
})

4
pages/order/list/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "我的订单"
}

84
pages/order/list/index.wxml Normal file
View File

@@ -0,0 +1,84 @@
<view class="header">
<view class="tabs">
<view class="item {{listType == 'paid' ? 'show' : ''}}" bindtap="onTabs" data-type="paid">待发货</view>
<view class="item {{listType == 'unpay' ? 'show' : ''}}" bindtap="onTabs" data-type="unpay">待付款</view>
<view class="item {{listType == 'delivered' ? 'show' : ''}}" bindtap="onTabs" data-type="delivered">已发货</view>
<view class="item {{listType == 'signed' ? 'show' : ''}}" bindtap="onTabs" data-type="signed">已签收</view>
<!-- <view class="item {{listType == 'completed' ? 'show' : ''}}" bindtap="onTabs" data-type="completed">已完成</view> -->
</view>
</view>
<view class="order" wx:if="{{orderArr.length > 0}}">
<view class="While order-list" wx:for="{{orderArr}}" wx:key="orderArr">
<view class="order-top">
<view class="order-top-number">{{ item.order_no }}</view>
<view class="order-top-tips">{{ item.state }}</view>
</view>
<view class="order-name" wx:for-item="goodItem" wx:for="{{item.items}}" wx:key="items">
<!-- 先默认固定图 -->
<image class="order-img" src="{{ goodItem.sku.cover }}" mode="widthFix"></image>
<view class="order-goods">
<view class="order-label">
<view class="nowrap order-label-name">
{{ goodItem.sku.goods_name }}
</view>
<view class="order-label-price">
{{goodItem.sku.price != 0 ? '￥' + goodItem.sku.price : '兑换'}}
</view>
</view>
<view class="order-specs">
x{{ goodItem.qty }}
</view>
</view>
</view>
<view class="order-text">
<view class="order-time">下单时间：{{ item.created_at }}</view>
</view>
<view class="order-btn">
<!-- <view class="order-btn-type">
<text class="active" wx:if="{{item.type == '积分兑换'}}">兑换订单</text>
<text wx:else>提货订单</text>
</view> -->
<view class="order-btn-atn order-btn-go" bindtap="payTap" data-no="{{item.order_no}}" wx:if="{{item.can.pay}}">去付款</view>
<navigator hover-class="none" url="../details/index?orderNo={{item.order_no}}" class="order-btn-atn">订单详情</navigator>
</view>
</view>
<view class="pagesLoding" wx:if="{{lodingStats}}">
<block wx:if="{{page.has_more}}">
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
</block>
<block wx:else>
没有更多了~
</block>
</view>
</view>
<view class="pack-center pages-hint" wx:else>
<image src="/static/imgs/coupon_null.png"></image>
<view>暂无数据</view>
</view>
<!-- 支付弹出 -->
<view class="payPop {{payEject ? 'active' : ''}}"></view>
<view class="payCont {{payEject ? 'active' : ''}}">
<image class="payCont-label-close" src="/static/icons/reportColse_grey.png" bindtap="payClose"></image>
<radio-group bindchange="radioChange" style="width: 100%; display: block;">
<view class="payCont-label {{ payType == 'wechat' ? 'active' : ''}}">
<view class="payContList-label-name">
<image class="payCont-label-img" src="/static/imgs/wx.jpg"></image>
<text>微信支付</text>
</view>
<image class="payContList-label-arrow" src="{{ payType == 'wechat' ? '/static/icons/check_icon.png' : '/static/icons/userLogin_icon.png'}}"></image>
<radio class="radio" value="wechat"></radio>
</view>
<view class="payCont-label {{ payType == 'water' ? 'active' : ''}}" wx:if="{{surplus > 0}}">
<view class="payContList-label-name">
<image class="payCont-label-img" src="/static/imgs/wqb.jpg"></image>
<text>水滴兑换</text>
</view>
<image class="payContList-label-arrow" src="{{ payType == 'water' ? '/static/icons/check_icon.png' : '/static/icons/userLogin_icon.png'}}"></image>
<radio class="radio" value="water"></radio>
</view>
</radio-group>
<view class="payCont-btn" bindtap="paySubmit">{{ payType == 'wechat' ? '立即支付' : '立即兑换'}}</view>
</view>

278
pages/order/list/index.wxss Normal file
View File

@@ -0,0 +1,278 @@
page {
overflow: hidden;
background: #f3f4f6;
padding: 30rpx;
box-sizing: border-box;
}
.While {
border-radius: 10rpx;
margin-bottom: 30rpx;
background-color: #FFFFFF;
padding: 0 30rpx;
box-sizing: border-box;
box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
}
.order {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 120rpx 30rpx 30rpx;
box-sizing: border-box;
height: 100%;
overflow-y: scroll;
}
.order-top {
line-height: 90rpx;
box-sizing: border-box;
display: flex;
font-size: 28rpx;
border-bottom: 2rpx #f2f2f2 solid;
}
.order-top-number {
flex: 1;
}
.order-top-tips {
font-size: 26rpx;
color: #eb504c;
}
.order-name {
padding: 20rpx 0;
box-sizing: border-box;
position: relative;
}
.order-img {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
border-radius: 10rpx;
}
.order-goods {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 20rpx 20rpx 20rpx 110rpx;
box-sizing: border-box;
}
.order-label {
display: flex;
font-size: 30rpx;
margin-bottom: 15rpx;
}
.order-label-name {
flex: 1;
margin-right: 30rpx;
}
.order-label-price {
font-size: 26rpx;
color: #999;
}
.order-specs {
font-size: 24rpx;
color: #919191;
display: flex;
}
.order-specs text {
display: inline-block;
flex: 1;
}
.order-text {
font-size: 28rpx;
line-height: 40rpx;
display: flex;
padding-bottom: 20rpx;
border-top: 2rpx solid #f2f2f2;
border-bottom: 2rpx solid #f2f2f2;
padding-top: 20rpx;
}
.order-time {
color: #919191;
font-size: 24rpx;
flex: 1;
}
.order-price text {
font-weight: 600;
color: #1d37e2;
}
.order-btn {
padding: 30rpx 0;
box-sizing: border-box;
position: relative;
font-size: 24rpx;
text-align: right;
}
.order-btn-type {
flex: 1;
}
.order-btn-type text {
display: inline-block;
background-image: linear-gradient(to right, #f16e06, #f34206);
color: #FFFFFF;
border-radius: 6rpx;
padding: 0 10rpx;
height: 44rpx;
line-height: 44rpx;
margin-top: 6rpx;
}
.order-btn-type text.active {
background-image: linear-gradient(to right, #027be6, #2855f0);
}
.order-btn-atn {
border: 2rpx solid #f2f2f2;
border-radius: 40rpx;
padding: 0 30rpx;
height: 52rpx;
line-height: 52rpx;
color: #767676;
display: inline-block;
margin-left: 15rpx;
}
.order-btn-go {
color: #eb504c;
border-color: #eb504c;
}
.order-btn-atn.active {
color: #1d37e2;
border-color: #bfc5ff;
}
/* tabs */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
.tabs {
display: flex;
justify-content: space-around;
background: white;
padding: 15rpx 0;
font-size: 30rpx;
color: #9d9d9d;
}
.item {
height: 60rpx;
line-height: 60rpx;
}
.item.show {
color: #1d37e2;
border-bottom: solid 4rpx #1d37e2;
}
.payPop {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, .3);
left: 0;
top: 0;
z-index: 998;
display: none;
}
.payPop.active {
display: block;
}
.payCont {
position: fixed;
width: 100vw;
background-color: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
box-sizing: border-box;
left: 0;
bottom: -10000%;
z-index: 999;
padding: 100rpx 40rpx 40rpx;
transition: .2s;
}
.payCont-label-close {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 30rpx;
right: 40rpx;
z-index: 1000;
}
.payCont.active {
bottom: 0;
}
.payCont-label {
display: flex;
height: 80rpx;
line-height: 80rpx;
margin-bottom: 40rpx;
border-top: 2rpx solid #ececec;
padding-top: 40rpx;
position: relative;
}
.payCont-label-img {
width: 64rpx;
height: 64rpx;
margin-top: 8rpx;
margin-right: 20rpx;
}
.payContList-label-name {
line-height: 80rpx;
display: flex;
flex: 1;
font-weight: 600;
}
.payCont-label radio {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.payContList-label-arrow {
width: 38rpx;
height: 38rpx;
margin-top: 18rpx;
}
.payCont-btn {
width: 100%;
text-align: center;
margin: 80rpx 0 40rpx;
background-color: #1d37e2;
line-height: 100rpx;
border-radius: 10rpx;
color: #FFFFFF;
}