Files
xk-client-wx/subPackages/shop/orders.vue

564 lines
12 KiB
Vue
Raw Normal View History

2024-09-19 12:51:35 +08:00
<template>
<view class="container safe-area-inset-bottom">
2026-01-07 14:21:29 +08:00
<MessageNotification />
2024-09-19 12:51:35 +08:00
<!-- 搜索 -->
<view class="search">
<u-search placeholder="输入药品名称" bg-color="#F6F6F6" color="#999" border-color="#F6F6F6" :show-action="false"
maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword" @search="toSearch">
</u-search>
</view>
<!-- 头部 tabs -->
<view class="head">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
</view>
<!-- 空页 -->
<view class="empty" v-if="orderList.length==0">
2026-05-15 16:42:32 +08:00
<image src="https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/empty/orders.png" mode="aspectFit"></image>
2024-09-19 12:51:35 +08:00
</view>
<!-- 列表 -->
<view class="lists" @click="toInfo(item.id)" v-for="(item,index) in orderList">
<!-- 门店 -->
<view class="list">
<view class="store"><text class="iconfont icon-mendian"></text>{{item.store.name}} <text class="state">西药(中成)</text>
</view>
<text class="active">{{item.status_string}}</text>
</view>
<!-- 商品 -->
<view class="item" v-for="(item1,index) in item.items">
<image :src="item.items[0].drug_image" mode=""></image>
<view class="it">
<view class="it_name">{{item1.drug_name}}</view>
<view class="it_info">{{item1.small_info}}</view>
<view class="it_price">
<text>{{item1.price}}</text>
<text class="num">x{{item1.number}}</text>
</view>
</view>
</view>
<!-- 付款 -->
<view class="pay">
<view class="pay_num">
<text>共{{item.items[0].number}}件</text>
<text>总价:¥{{item.total_pay_price}} 运费:¥{{item.trans_expenses}}</text>
</view>
<view class="pay_need">
实付款:
<text>¥{{Number(item.total_pay_price)+Number(item.trans_expenses)}}</text>
</view>
<view class="btn_states">
<!-- <view class="btns _btn" v-if="item.status_string!='待发货'">再次购买</view> -->
<view class="btns _pay" v-if="item.status_string!='待付款'&&item.status_string!='待发货'&&item.status_string!='已取消'">立即支付</view>
<view class="btns _paied"v-if="item.status_string=='待收货'||item.status_string=='已取消'">查看物流</view>
<view class="btns _paied" v-if="item.status_string=='待发货'">退款</view>
<view class="btns _paied"v-if="item.status_string=='已取消'||item.status_string=='待收货'">申请售后</view>
</view>
</view>
</view>
<!-- 新增 -->
<!-- <view class="lists" @click="toInfo" v-for="(item,index) in 2"> -->
<!-- 门店 -->
<!-- <view class="list">
<view class="store"><text class="iconfont icon-mendian"></text>萧康诊所门店 <text class="state">草药</text>
</view>
<text class="active">已完成</text>
</view> -->
<!-- 商品 -->
<!-- <view class="items">
<view class="its" v-for="item in 4">
<view class="its_name">三七</view>
<view class="its_num">10.0g</view>
<view class="its_price">2元</view>
</view>
</view> -->
<!-- 付款 -->
<!-- <view class="pay">
<view class="pay_price">
一剂5味,共7剂,一剂¥12元,总价:¥84.00
</view>
<view class="pay_num">
<text></text>
<text>运费:¥10.00</text>
</view>
<view class="pay_need">
实付款:
<text>¥78.00</text>
</view>
<view class="btn_states">
<view class="btns _btn">再次购买</view>
<view class="btns _pay">立即支付</view>
<view class="btns _paied">查看物流</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import { getOrdlist } from '../../request/api/api';
export default {
data() {
return {
keyword: "",
list: [{
name: '全部'
},
{
name: '待付款',
},
{
name: '待发货',
}, {
name: '待收货',
},
{
name: '已完成'
}
],
current: 0, // 状态
orderList: [], // 订单列表
id: "", // 订单id
page: 1, // 当前页数
total: "", // 总条数
totalPage: "", // 总页数
pageSize: 20, // 每页条数
status:''
}
},
onLoad(e) {
// this.current = e.index
},
methods: {
// accept(item) {
// const userInfo = uni.getStorageSync("user");
// getKey({
// method: "post",
// }).then((res) => {
// console.log(res, "getKey");
// res = res.data
// if (res.errcode === 0) {
// uni.navigateTo({
// url: `/pages/unpaid-order/web-view?appid=${res.data.appid}&key=${res.data.key}&myUserId=member_${userInfo.id}&avatarurl=${item.doctor_avator}&name=${item.doctor_name}`
// })
// }
// });
// },
// 点击切换
change(index) {
// console.log(index);
this.current = index;
if(this.current==0){
this.status=''
}
if(this.current==1){
this.status=0
}
if(this.current==2){
this.status=1
}
if(this.current==3){
this.status=2
}
if(this.current==4){
this.status=9
}
this.getOrder()
},
next(id) {
this.id = id
// console.log(id,'id');
uni.navigateTo({
url: '/subPackages/my/unpaid-order?id=' + this.id
})
},
// 搜索
toSearch() {
this.getList()
},
// 详情
toInfo(e) {
uni.navigateTo({
url: '/subPackages/shop/paied-detail?id='+e
})
},
// 订单列表
getOrder() {
getOrdlist({
method: "post",
data: {
store_id: uni.getStorageSync('store_id') || '11001',
status: this.status,
page: this.page
}
}).then((res) => {
// console.log(res, 'order');
this.Num=
// console.log(res);
// console.log(this.orderList,66);
this.orderList = res.data.data.page_data
// this.totalPage = res.data.data.pagination.totalPage
this.total = res.data.data.page_info.total
})
},
// 去支付
// gopay(id) {
// this.id = id
// // 获取支付配置
// getOrdpay({
// method: "post",
// data: {
// order_id: this.id
// }
// }).then((res) => {
// // console.log(res, 'pay');
// uni.requestPayment({
// provider: res.data.data.appId,
// timeStamp: res.data.data.timestamp,
// nonceStr: res.data.data.nonceStr,
// package: res.data.data.package,
// signType: res.data.data.signType,
// paySign: res.data.data.paySign,
// success: function(res) {
// console.log('success:' + JSON.stringify(res));
// },
// fail: function(err) {
// console.log('fail:' + JSON.stringify(err));
// }
// })
// })
// },
// 取消订单
// goCancel(id) {
// this.id = id
// getCancle({
// method: "post",
// data: {
// order_id: this.id
// }
// }).then((res) => {
// // console.log(res, 'cancle');
// if (res.data.errcode == 0) {
// this.isCancle = true
// uni.showToast({
// title: "取消成功",
// duration: 1500,
// mask: false,
// icon: 'success'
// })
// }
// this.getOrder()
// })
// },
},
// 触底触发
onReachBottom() {
if (this.page >= this.totalPage) return
this.page += 1
this.getOrder()
},
onPullDownRefresh() {
// console.log("触发了下拉刷新")
if (this.page <= 1) return
this.page = this.page - 1
this.getOrder()
//重置一下数据
// this.page = 1
// //重新发起请求
// this.getOrder(() => uni.stopPullDownRefresh())
},
mounted() {
this.getOrder()
},
onShow() {
this.getOrder()
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
min-height: 100vh;
max-height: 100%;
background-color: #F8FAFC;
padding-bottom: env(safe-area-inset-bottom);
.head {
width: 750rpx;
height: 80rpx;
position: sticky;
top: var(--window-top);
z-index: 99;
}
.search {
width: 750rpx;
background-color: #fff;
height: 98rpx;
margin: 0 auto;
padding: 16rpx 30rpx;
.u-search {
width: 686rpx;
height: 66rpx;
margin: 0 auto;
}
}
.empty {
width: 440rpx;
height: 393rpx;
margin: 200rpx auto;
image {
width: 100%;
height: 100%;
z-index: 10;
}
}
.lists {
width: 710rpx;
margin: 20rpx auto;
background: #FFFFFF;
border-radius: 8rpx;
padding: 32rpx;
.list {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26rpx;
.store {
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #232323;
.iconfont {
font-size: 40rpx;
color: #666666;
vertical-align: middle;
margin-right: 10rpx;
}
.state {
font-size: 22rpx;
color: #1777FF;
padding: 4rpx 10rpx;
background: #D0E4FF;
margin-left: 22rpx;
border-radius: 2rpx;
}
}
text {
font-size: 28rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #999999;
}
.active {
color: #4175EE;
}
.actived {
color: #FC3636;
}
}
.item {
display: flex;
justify-content: space-around;
margin-bottom: 22rpx;
image {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
}
.it {
width: 450rpx;
font-family: PingFang SC-Regular, PingFang SC;
.it_name {
height: 80rpx;
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.it_info {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
font-size: 24rpx;
font-weight: 400;
color: #999999;
margin: 12rpx 0 34rpx 0;
}
.it_price {
display: flex;
justify-content: space-between;
align-items: center;
text {
font-size: 28rpx;
font-weight: bold;
color: #232323;
}
.num {
font-size: 28rpx;
font-weight: 400;
color: #232323;
}
}
}
}
.items {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 22rpx;
.its {
width: 45%;
display: flex;
justify-content: space-around;
margin-bottom: 23rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
.its_name {
width: 112rpx;
color: #232323;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
}
.its_num {
color: #666666;
}
.it_price {
color: #999999;
}
}
}
.pay {
text-align: right;
font-family: PingFang SC-Regular, PingFang SC;
font-size: 24rpx;
font-weight: 400;
.pay_price {
display: flex;
align-items: center;
justify-content: flex-end;
color: #232323;
margin-bottom: 10rpx;
}
.pay_num {
display: flex;
justify-content: space-between;
align-items: center;
color: #232323;
}
.pay_need {
font-size: 32rpx;
color: #232323;
margin: 16rpx 0;
text {
font-weight: bold;
font-size: 36rpx;
}
}
.btn_states {
display: flex;
justify-content: flex-end;
margin-top: 30rpx;
.btns {
width: 196rpx;
height: 64rpx;
line-height: 58rpx;
text-align: center;
border-radius: 50rpx 50rpx 50rpx 50rpx;
font-size: 28rpx;
font-weight: 400;
margin-left: 20rpx;
}
._btn {
border: 2rpx solid #999999;
color: #999999;
}
._pay {
border: 2rpx solid #4175EE;
background: #4175EE;
color: #FFFFFF;
}
._paied {
color: #4175EE;
background: #E7F1FF;
border: 2rpx solid #E7F1FF;
}
}
}
}
}
</style>