耀实惠小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

546 lines
13 KiB

<template>
<view>
<u-sticky>
<u-tabs :list="nav_list" :is-scroll="false" :current="status" @change="getInfo" bar-width="80" active-color="#01AEEA" font-size="34"></u-tabs>
</u-sticky>
<!-- 待收货 -->
<view class="item" v-for="(item,index) in orderList" :key="item.id">
<view class="time">
<text class="time_text">{{item.createTime}}</text>
<text class="phone" @click="call">{{nav_list[status].name}}</text>
</view>
<u-read-more :toggle="true" showHeight="900" color="#6C6C6C" textIndent="0" fontSize="24rpx" closeText="展开(共5件)" openText="收起">
<view class="goods_item" v-for="item2 in item.orderDetailList" @click="toGoodsInfo(item2)">
<image :src="item2.goodPic2" mode="widthFix"></image>
<view class="right_box">
<text class="title">{{item2.goodName}}</text>
<text class="title" v-if="item2.prescriptionId!=null">【处方药】</text>
<view class="center_box">
<view class="money_box">
<!-- <text class="min red"></text> -->
<text class="bigs red" v-if="item.payFlag !== 2">¥{{item2.goodPrice}}</text>
<text class="bigs red" v-else>{{item2.goodPrice}}兑购</text>
</view>
<text class="back_money" v-if="item2.couponPrice!==0 && item2.couponPrice">再返消费金¥{{item2.couponPrice}}</text>
<text class="back_iconx">×{{item2.goodNum}}</text>
</view>
<text>{{item2.goodSku}}</text>
</view>
</view>
</u-read-more>
<!-- 0要显示 订单为消费金支付是不显示 -->
<text class="sum_back_momey m-l-30" v-show="item.name !== '普通订单消费金支付'">总返消费金¥{{item.giveMoneySum}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.giveIntegerSum==0 ? '':'兑购金'+item.giveIntegerSum+"元"}}</text>
<view class="total_box" v-if="item.payFlag == 2 && !!item.giveIntegerSum"> <!--item.payFlag 兑购支付为2 -->
<text class="text_price">合计</text>
<text class="price font-42">{{item.giveIntegerSum}}元</text>
<text class="text_price">兑购金</text>
</view>
<view class="total_box" v-else-if="!!item.giveMoneySum" >
<text class="text_price">合计</text>
<text class="price font-42">¥{{item.payMoney}}</text>
</view>
<!-- 待付款的按钮 -->
<view class="btn_box" v-if="orderList.length>0">
<!-- 普通订单 -->
<text class="order_name" v-if="item.name == '普通订单'">{{item.payFlag == 1? '普通订单消费金支付': '普通订单微信支付'}} </text>
<text class="order_name" v-else>{{item.name}}</text>
<view class="btn_order">
<button v-if="status==0" class="gather cancel" @click="close(item.id,index)">取消订单</button>
<button v-if="status==0" class="gather" @click="payMoney(item.id,index,item)">立即支付</button>
<!-- 待发货的按钮 售后/退换的按钮 -->
<button v-if="status==1 || status==3 || status==4" class="gather" @click="toDetails(item.id)">订单详情</button>
<!-- 已完成的按钮 -->
<button v-if="status==2" class="gather cancel" @click="toAfterSales(item.id,index)">申请售后</button>
<button v-if="status==2" class="gather" @click="toConfirmOrderById(item.id,index)">确认收货</button>
</view>
</view>
</view>
<view class="empty_box" v-if="orderList.length==0">
<image :src="IMG_URL+'empty.png'" alt=""></image>
<text class="text_">暂无订单记录</text>
</view>
</view>
</template>
<script>
import { IMG_URL } from '@/env.js'
export default {
data() {
return {
IMG_URL,
status: null,
pageNo: 1,
pageSize: 10,
total: null,
isLock: true,
nav_list: [
{
name: "待付款"
},
{
name: "待发货"
},
{
name: "待收货"
},
{
name: "已完成"
},
{
name: "售后/退换"
}
],
orderList: []
}
},
onUnload() {
uni.switchTab({
url: '/pages/my/my'
})
},
onLoad(options) {
this.status = options.status
console.log(this.status)
this.getUserOrder(this.status);
},
onPullDownRefresh() {
this.orderList = [];
this.pageNo = 1;
this.total = null;
this.isLock = true;
this.getUserOrder(this.status)
},
onReachBottom() {
if(this.isLock){
this.isLock = false;
if(this.total !== null && this.pageNo * this.pageSize >= this.total){
this.$Toast('没有更多数据了哦!');
setTimeout(()=>{
this.isLock = true;
},3000)
return
}
this.pageNo+=1;
this.getUserOrder(this.status);
}
},
computed: {
gridData () {
return this.$store.state.gridData
}
},
methods: {
// 打电话
call(phone) {
uni.makePhoneCall({
phoneNumber: phone,
success(res) {
},
fail(err) {
}
})
},
toGoodsInfo (item) {
let idx = this.gridData.findIndex(obj => obj.id === item.bottonId)
let key = idx > -1 ? this.gridData[idx].key : 'home'
this.$tools.navigateTo({
url: `/pagesC/goodsInfo/goodsInfo?id=${item.goodId}&type=${key}`
})
},
// 详情
toDetails(id) {
uni.navigateTo({
url: `./details/index?id=${id}&status=${this.status}`
})
},
// 获取订单数据
getUserOrder(type,pageSize) {
uni.showLoading();
const params = {
pageNo: this.pageNo,
pageSize: this.pageSize,
type
}
this.$api('getOrderList',params).then(res => {
let { code, result, message} = res;
if(code == 200) {
if(this.total == null) {
this.total = result.total;
}
// 处理 图片
result.records.forEach(item => {
item.orderDetailList.forEach(item2 =>{
item2.goodPic2 = item2.goodPic ==null ? '': item2.goodPic.split(',')[0]
})
})
this.orderList = [];
this.orderList = this.orderList.concat(result.records)
console.log(result);
}else {
this.$Toast(message);
}
uni.hideLoading()
uni.stopPullDownRefresh()
this.isLock = true;
}).catch(err => {
uni.hideLoading()
this.isLock = true;
uni.stopPullDownRefresh()
this.$Toast(err.message);
})
},
// 取消订单
close(id,index){
const that = this
uni.showModal({
title: "确定取消该订单吗?",
success(res) {
if(res.confirm) {
that.$api('deleteOrderById',{id}).then(res => {
let { code, result, message} = res;
if(code == 200) {
that.$Toast(result);
that.orderList.splice(index,1)
// 删除该条数据
}else {
that.$Toast(message);
}
}).catch(err => {
that.$Toast(err.message);
})
}else if(res.cancel){
// this.$Toast('您取消了')
}
}
})
},
// 立即支付
payMoney(id,index,item){
const that = this
var type = item.payFlag
if(this.orderList[index].name == '兑购订单') {
this.payMoneyTeamCreateOrderPay(id,item.payFlag,item.addressId);
}
if(this.orderList[index].name == '拼团订单') {
this.payMoneyTeamCreateOrderPay(id,item.payFlag,item.addressId);
}else {
const that = this
// 消费金支付
uni.showActionSheet({
itemList: ['微信支付', '消费金支付'],
success: function (res) {
if (res.tapIndex + 1 == 1) {
// 微信支付
that.ImmediatePayment(id,type,index)
}else {
that.ImmediatePayment(id,1,index)
}
},
fail: function (res) {
console.log(res.errMsg);
}
});
}
},
// 立即支付
ImmediatePayment(id,type,index) {
const that = this
that.$api('submitOrderById',{id,type}).then(res => {
let { code, result, message} = res;
if(code == 200) {
// that.$Toast(result); type = 3 为兑购
if(type==3) {
that.$Toast(result);
that.orderList.splice(index,1);
}else if(type == 1) {
this.$Toast(result);
that.orderList.splice(index,1);
} else{
uni.requestPayment({
provider: 'wxpay',
timeStamp: result.timeStamp,
nonceStr: result.nonceStr,
package: result.packageValue,
signType: result.signType,
paySign: result.paySign,
success: res => {
this.$Toast('支付成功');
that.orderList.splice(index,1);
},
fail:error=>{
this.$Toast('取消支付');
this.getUserOrder(this.status);
}
})
}
// 删除该条数据
}else {
that.$Toast(message);
}
}).catch(err => {
that.$Toast(err.message);
})
},
payMoneyTeamCreateOrderPay(id,type,addressId){
const that = this
that.$api('teamCreateOrderPay',{id,type,addressId}).then(res => {
let { code, result, message} = res;
if(code == 200) {
// that.$Toast(result);
if(type==3) {
that.$Toast(result);
that.orderList.splice(index,1);
}else{
uni.requestPayment({
provider: 'wxpay',
timeStamp: result.timeStamp,
nonceStr: result.nonceStr,
package: result.packageValue,
signType: result.signType,
paySign: result.paySign,
success: res => {
this.$Toast('支付成功');
that.orderList.splice(index,1);
},
fail:error=>{
this.$Toast('取消支付')
}
})
}
}
}).catch(err => {
that.$Toast(err.message);
})
},
// 确认收货
toConfirmOrderById(id,index){
const that = this
uni.showModal({
title: "确定该商品收货吗?",
success(res) {
if(res.confirm) {
that.$api('confirmOrderById',{id}).then(res => {
let { code, result, message} = res;
if(code == 200) {
that.$Toast(result);
that.orderList.splice(index,1);
// 删除该条数据
}else {
that.$Toast(message);
}
}).catch(err => {
that.$Toast(err.message);
})
}else if(res.cancel){
// this.$Toast('您取消了')
}
}
})
},
// 申请售后
toAfterSales(id,index){
const that = this
this.$tools.navigateTo({
url: '/pagesA/my_other_list/after_sale_order/after_sale_order?id='+id
});
},
getInfo(e) {
this.status = e;
this.orderList = [];
this.pageNo = 1;
this.total = null;
this.isLock = true;
this.getUserOrder(this.status)
console.log("获取新数据",e)
}
}
}
</script>
<style lang="scss" scoped>
.empty_box{
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 371rpx;
height: 371rpx;
}
.text_{
margin-top: 10rpx;
font-size: 36rpx;
font-weight: bold;
color: #01AEEA;
}
}
.item {
width: 711rpx;
margin: 0 auto;
margin-top: 10rpx;
border-radius: 24rpx;
padding-bottom: 21rpx;
box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.16);
.time{
width: 648rpx;
margin: 0 auto;
margin-top: 30rpx;
padding-top: 34rpx;
padding-bottom: 15rpx;
border-bottom: 1px solid rgba(112,112,112,0.2);
display: flex;
justify-content: space-between;
font-size: 36rpx;
.time_text {
color: #333;
}
.phone{
color: #333333;
}
}
.goods_item{
display: flex;
width: 648rpx;
margin: 0 auto;
margin-top: 22rpx;
padding-bottom: 26rpx;
border-bottom: 1px solid rgba(112,112,112,0.2);
&:last-child{
border-bottom: none;
}
image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.right_box{
display: flex;
flex-direction: column;
font-size: 36rpx;
margin-left: 25rpx;
.title{
color: #000;
width: 440rpx;
font-size: 36rpx;
line-height: 39rpx;
}
.center_box{
display: flex;
justify-content: space-between;
align-items: center;
color: #01AEEA;
font-size: 36rpx;
.money_box{
.red{
color: #DB0618;
}
.min{
font-size: 20rpx;
}
.bigs{
font-size: 36rpx;
}
}
.back_money{
color: #fff;
background-color: #FFA952;
border-radius: 15rpx;
height: 47rpx;
line-height: 47rpx;
box-sizing: border-box;
font-size: 36rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
.back_iconx{
font-size: 38rpx;
}
}
}
}
.sum_back_momey{
height: 47rpx;
line-height: 47rpx;
border-radius: 10rpx;
padding: 6rpx 14rpx;
margin-right: 45rpx;
color: #fff;
background-color: #FFA952;
font-size: 36rpx;
}
.total_box{
display: flex;
width: 648rpx;
margin: 0 auto;
justify-content: flex-end;
font-size: 36rpx;
margin-top: 6rpx;
padding-bottom: 16rpx;
border-bottom: 1px solid rgba(112,112,112,0.2);
.text_price{
font-size: 34rpx;
}
.price{
font-size: 36rpx;
color: #DB0618;
}
text{
&:last-child{
}
}
}
.btn_box{
display: flex;
justify-content: space-between;
align-items: center;
.order_name{
margin-left: 30rpx;
margin-top: 20rpx;
font-size: 36rpx;
width: 30%;
}
.btn_order{
width: 70%;
display: flex;
height: 100%;
}
.gather{
height: 60rpx;
margin-top: 23rpx;
margin-left: 0;
margin-right: 21rpx;
border: 1rpx solid #01AEEA;
color: #01AEEA;
font-size: 32rpx;
border-radius: 30rpx;
line-height: 60rpx;
}
.cancel{
border: 1rpx solid #6C6C6C;
font-size: 36rpx;
color: #6C6C6C;
}
}
}
</style>