|
|
@@ -7,11 +7,11 @@
|
|
|
<!-- 订单 -->
|
|
|
<view class="order">
|
|
|
<view class="order-box">
|
|
|
- <view class="order-item" v-for="(item,index) of init_list" :key="index" >
|
|
|
+ <view class="order-item" v-for="(item, index) of init_list" :key="index">
|
|
|
<view class="" @click="handlerSkipDetail(item)">
|
|
|
<view class="item-top">
|
|
|
<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
|
|
|
- <view class="top-right ">待付款</view>
|
|
|
+ <view class="top-right">待付款</view>
|
|
|
</view>
|
|
|
<view class="item-top">
|
|
|
<view class="top-left gray-color">支付时间 : 2024-01-12</view>
|
|
|
@@ -19,9 +19,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <u-line margin='20rpx 0'></u-line>
|
|
|
+ <u-line margin="20rpx 0"></u-line>
|
|
|
|
|
|
- <view class="item-center" v-for="(itm,idx) of item.goodsInfo">
|
|
|
+ <view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
|
|
|
<view class="center-left">
|
|
|
<image :src="itm.goodsPic" class="img"></image>
|
|
|
</view>
|
|
|
@@ -35,7 +35,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="r-r">
|
|
|
- <view class="r-item" @click.stop="handlerSkipComment(item,itm)">
|
|
|
+ <view class="r-item" @click.stop="handlerSkipComment(item, itm)">
|
|
|
<u-icon name="chat" color="#000" size="28"></u-icon>
|
|
|
<span>评价</span>
|
|
|
</view>
|
|
|
@@ -43,20 +43,21 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <u-line margin='20rpx 0' dashed='true'></u-line>
|
|
|
+ <u-line margin="20rpx 0" dashed="true"></u-line>
|
|
|
|
|
|
<view class="item-allnumb-box">
|
|
|
<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
|
|
|
- <view class="allnumb-right"> <span class="r-text">共计</span>¥{{ item.allPrice }}</view>
|
|
|
+ <view class="allnumb-right">
|
|
|
+ <span class="r-text">共计</span>¥{{ item.allPrice }}</view
|
|
|
+ >
|
|
|
</view>
|
|
|
|
|
|
<view class="item-bottom">
|
|
|
- <button class='btn'>取消订单</button>
|
|
|
+ <button class="btn">取消订单</button>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if='init_list.length == 0' style="margin-top: 40rpx">
|
|
|
+ <view v-if="init_list.length == 0" style="margin-top: 40rpx">
|
|
|
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -64,251 +65,250 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- userOrdersApi,
|
|
|
- getUserOrderList,
|
|
|
- cancelOrder
|
|
|
- } from '@/api/client/order';
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- current: 0,
|
|
|
- type: 0,
|
|
|
- type_name: '',
|
|
|
- size: 20,
|
|
|
- // 订单状态:0->待付款;1->待发货;2->已发货;3->已完成;4->已关闭;5->无效订单
|
|
|
- list: [{
|
|
|
- name: '待付款',
|
|
|
- type: 0,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '待发货',
|
|
|
- type: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已发货',
|
|
|
- type: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已完成',
|
|
|
- type: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已关闭',
|
|
|
- type: 4,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '无效订单',
|
|
|
- type: 5,
|
|
|
- },
|
|
|
- ],
|
|
|
- init_list: [],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // this.userOrdersPage();
|
|
|
+import { userOrdersApi, getUserOrderList, cancelOrder } from '@/api/client/order';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current: 0,
|
|
|
+ type: 0,
|
|
|
+ type_name: '',
|
|
|
+ size: 20,
|
|
|
+ // 订单状态:0->待付款;1->待发货;2->已发货;3->已完成;4->已关闭;5->无效订单
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ name: '待付款',
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待发货',
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已发货',
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已完成',
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已关闭',
|
|
|
+ type: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '无效订单',
|
|
|
+ type: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ init_list: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.userOrdersPage();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ let cur = this.$store.state.order.skip_order_type.type;
|
|
|
+ switch (cur) {
|
|
|
+ case 0:
|
|
|
+ this.current = 0;
|
|
|
+ this.userOrdersPage(cur);
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ this.current = 2;
|
|
|
+ this.userOrdersPage(cur);
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.current = 3;
|
|
|
+ this.userOrdersPage(cur);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ allNumber() {
|
|
|
+ this.init_list.map(rs => {
|
|
|
+ let sum = 0;
|
|
|
+ let price = 0;
|
|
|
+ rs.goodsInfo.map(rc => {
|
|
|
+ sum += rc.goodsQuantity;
|
|
|
+ price += rc.goodsPrice;
|
|
|
+ });
|
|
|
+ rs.allNumb = sum;
|
|
|
+ rs.allPrice = price;
|
|
|
+ });
|
|
|
+ return;
|
|
|
},
|
|
|
- onShow(){
|
|
|
- let cur = this.$store.state.order.skip_order_type.type
|
|
|
- switch(cur){
|
|
|
- case 0 :
|
|
|
- this.current = 0
|
|
|
- this.userOrdersPage(cur);
|
|
|
- break;
|
|
|
- case 1 :
|
|
|
- this.current = 2
|
|
|
- this.userOrdersPage(cur);
|
|
|
- break;
|
|
|
- case 2 :
|
|
|
- this.current = 3
|
|
|
- this.userOrdersPage(cur);
|
|
|
- break;
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlerChangeItem(data) {
|
|
|
+ this.current = data.index;
|
|
|
+ this.type = data.type;
|
|
|
+ this.type_name = data.name;
|
|
|
+ this.userOrdersPage(this.type);
|
|
|
},
|
|
|
- computed:{
|
|
|
- allNumber(){
|
|
|
- this.init_list.map(rs=>{
|
|
|
- let sum = 0
|
|
|
- let price = 0
|
|
|
- rs.goodsInfo.map(rc=>{
|
|
|
- sum += rc.goodsQuantity
|
|
|
- price += rc.goodsPrice
|
|
|
- })
|
|
|
- rs.allNumb = sum
|
|
|
- rs.allPrice = price
|
|
|
- })
|
|
|
- return
|
|
|
+
|
|
|
+ async userOrdersPage(type) {
|
|
|
+ let orderStatus = type == undefined ? 0 : `${type}`;
|
|
|
+ let res = await getUserOrderList({
|
|
|
+ status: orderStatus,
|
|
|
+ paging: '1,20',
|
|
|
+ });
|
|
|
+ if ((res.code = 200 && res.data)) {
|
|
|
+ this.init_list = res.data.records;
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- handlerChangeItem(data) {
|
|
|
- this.current = data.index;
|
|
|
- this.type = data.type;
|
|
|
- this.type_name = data.name;
|
|
|
- this.userOrdersPage(this.type);
|
|
|
- },
|
|
|
|
|
|
- async userOrdersPage(type) {
|
|
|
- let orderStatus = type == undefined ? 0 : `${type}`;
|
|
|
- let res = await getUserOrderList({
|
|
|
- status: orderStatus,
|
|
|
- paging: '1,20',
|
|
|
- });
|
|
|
- if ((res.code = 200 && res.data)) {
|
|
|
- this.init_list = res.data.records;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 跳转到订单详情
|
|
|
- handlerSkipDetail(e) {
|
|
|
- console.log('@@@@e', e);
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientPackage/orderDetail?orderList=${JSON.stringify(e)}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 取消订单
|
|
|
- handlerCancelOrder(e) {
|
|
|
- cancelOrder(e.id).then(res => {
|
|
|
+ // 跳转到订单详情
|
|
|
+ handlerSkipDetail(e) {
|
|
|
+ console.log('@@@@e', e);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/orderDetail?orderList=${JSON.stringify(e)}`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消订单
|
|
|
+ handlerCancelOrder(e) {
|
|
|
+ cancelOrder(e.id).then(res => {
|
|
|
+ console.log('###res', res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '取消成功',
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ this.userOrdersPage(this.type);
|
|
|
+ } else {
|
|
|
console.log('###res', res);
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- title: '取消成功',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- this.userOrdersPage(this.type)
|
|
|
- } else {
|
|
|
- console.log('###res', res);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击跳转到商品评价
|
|
|
- handlerSkipComment(item,itm){
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/client/clientPackage/goodsEstimation?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击跳转到商品评价
|
|
|
+ handlerSkipComment(item, itm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/goodsEstimation?orderList=${JSON.stringify(
|
|
|
+ item,
|
|
|
+ )}&goodsList=${JSON.stringify(itm)}`,
|
|
|
+ });
|
|
|
},
|
|
|
- };
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .order {
|
|
|
- margin-top: 10px;
|
|
|
- padding: 10rpx 20rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+.order {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10rpx 20rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .order-box {
|
|
|
- .order-item {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
|
|
|
+ .order-box {
|
|
|
+ .order-item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
- .item-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
|
|
|
- .item-center {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- .center-left {
|
|
|
- height: 160rpx;
|
|
|
+ .item-center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ .center-left {
|
|
|
+ height: 160rpx;
|
|
|
|
|
|
- .img {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- }
|
|
|
+ .img {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .center-right {
|
|
|
- width: 100%;
|
|
|
- height: 160rpx;
|
|
|
+ .center-right {
|
|
|
+ width: 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .r-l {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-left: 20rpx;
|
|
|
- .r-l{
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .right-name {
|
|
|
+ color: #4d5671;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .right-descript {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #858797;
|
|
|
+ }
|
|
|
+ .l-box {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- .right-name {
|
|
|
- color: #4D5671;
|
|
|
- font-size: 32rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ align-items: center;
|
|
|
+ font-style: italic;
|
|
|
+ .right-price {
|
|
|
+ margin-right: 20rpx;
|
|
|
font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #f57f32;
|
|
|
}
|
|
|
- .right-descript{
|
|
|
- font-size:28rpx;
|
|
|
- color: #858797;
|
|
|
- }
|
|
|
- .l-box{
|
|
|
- display: flex;
|
|
|
+ .right-numb {
|
|
|
font-size: 24rpx;
|
|
|
- align-items: center;
|
|
|
- font-style: italic;
|
|
|
- .right-price{
|
|
|
- margin-right: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #F57F32;
|
|
|
- }
|
|
|
- .right-numb{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #858797;
|
|
|
- }
|
|
|
+ color: #858797;
|
|
|
}
|
|
|
}
|
|
|
- .r-r{
|
|
|
- .r-item{
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .r-r {
|
|
|
+ .r-item {
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .item-allnumb-box{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-weight: bold;
|
|
|
- .allnumb-left{
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- .allnumb-right{
|
|
|
- font-size: 26rpx;
|
|
|
- color: #F57F32;
|
|
|
- .r-text{
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+ .item-allnumb-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ .allnumb-left {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .allnumb-right {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #f57f32;
|
|
|
+ .r-text {
|
|
|
+ color: #000;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .item-bottom{
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- margin-top: 20rpx;
|
|
|
- .btn{
|
|
|
- width: 80%;
|
|
|
- height: 70rpx;
|
|
|
- background-color: rgba(248,213,53, 0.8);
|
|
|
- color: #4e5059;
|
|
|
- font-size:28rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 70rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- }
|
|
|
+ .item-bottom {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .btn {
|
|
|
+ width: 80%;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: rgba(248, 213, 53, 0.8);
|
|
|
+ color: #4e5059;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .gray-color{
|
|
|
- color: #858797;
|
|
|
- }
|
|
|
+.gray-color {
|
|
|
+ color: #858797;
|
|
|
+}
|
|
|
|
|
|
- ::deep .u-tabs__wrapper__nav__item__text {
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
+::deep .u-tabs__wrapper__nav__item__text {
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
</style>
|