LAPTOP-D7TKRI82\邓 5 years ago
parent
commit
ebe4e0e0a5
  1. 7
      common/api.js
  2. 61
      pages/order/confirm-order.vue
  3. 114
      pages/order/order-details.vue
  4. 38
      pages/order/order-item.vue

7
common/api.js

@ -10,3 +10,10 @@ export const API_GOODS_LIST = '/api/goods/list'; // 首页-分类下商品列表
// 用户订单
export const API_USERORDER = '/api/order/list';
//订单详情
export const API_ORDER_DETAILS = '/api/order/detail';
//确认订单详情
export const API_COFIRMORDER_DETAILS = '/api/order/confirm';

61
pages/order/confirm-order.vue

@ -8,10 +8,10 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
{{orderDetails.goods.name}}
</view>
<view class="flex justify-between">
<text class="block margin-top-sm text-gray text-sm">数量</text>
@ -24,7 +24,7 @@
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<amount :value="Number(orderDetails.goods.specs[0].selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<!-- <view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
@ -51,14 +51,14 @@
<view class="margin-right">
<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
<view class="text-sm text-gray">请认真阅读并同意时空网协议在小程序下单购买即表示您已默认同意时空网协议的所有条款</view>
<view class="text-sm text-gray">{{orderDetails.agreement.tips}}</view>
</view>
<self-line/>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
<view class="flex align-center">
<text class="">应付款</text>
<view class="text-lg text-price text-red">
<amount :value="Number(total || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<amount :value="Number(orderDetails.goods.specs[0].selling_price*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
@ -77,44 +77,41 @@
data() {
return {
num: 1,
area: '币种地址',
base64Img: '', //
skeletonLoading: true,
payCur: 0, //
loading: false,
address: {},
shopData: {},
payPwd: '',
price: '', //
checkbox: [{
value: 'A',
checked: true
}, {
value: 'B',
checked: true
}, {
value: 'C',
checked: false
}],
goods_id: 1,
goods_specs_id: 1,
orderDetails: {}
}
},
computed: {
disabled() {
//
// if (this.payPwd) return false
return true
},
total(){
return this.num * this.price
}
},
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
},1000)
this.goods_id = e.goods_id
this.goods_specs_id = e.goods_specs_id
},
methods: {
getConfirmOrder() {
this.$http(this.API.API_COFIRMORDER_DETAILS, {goods_id: this.goods_id,goods_specs_id: this.goods_specs_id}).then(res => {
if(res.code == 0) {
this.orderDetails = res.data
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
console.log(this.orderDetails)
}
}).catch(err => {
});
},
reduce() {
if (this.num === 1) return
this.num--
@ -135,10 +132,6 @@
}
}
},
//
qrR(data) {
this.base64Img = data;
},
//
copy(text) {
uni.setClipboardData({
@ -150,11 +143,11 @@
},
//
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // ,
this.mescroll.endErr(); // ,
},1000)
this.getConfirmOrder()
},
},
created() {
this.getConfirmOrder()
}
}
</script>

114
pages/order/order-details.vue

@ -8,20 +8,20 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</text></text>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x{{orderDetails.amount}}</text></text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<amount :value="Number(orderDetails.goods.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-else class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange round margin-left-sm text-sm" @tap="$routerGo('/pages/order/apply-refund')">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm text-sm">退款中</button>
</view>
</view>
</view>
@ -36,21 +36,21 @@
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<view>
<text class="margin-right">67432428794847982374</text>
<text class="text-orange text-sm" @click="copy('67432428794847982374')">复制</text>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>2021-6-17 15:35:46</text>
<text>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom">
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>微信支付</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom">
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>2021-6-17 15:35:46</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
@ -58,37 +58,40 @@
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<image src="../../static/tu.png" mode="widthFix" style="height: 150px;width: 150px;"></image>
</view>
<view class="flex justify-around align-center text-center margin-top-sm">
<view v-if="orderDetails.state!=1">
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
<image src="../../static/tu.png" mode="widthFix" style="height: 150px;width: 150px;"></image>
</view>
<view class="text-lg">SP738644872</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
</view>
</view>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center">
<text class="text-gray text-sm">已付款</text>
<view class="text-lg text-price text-red">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<view class="flex justify-around align-center text-center margin-top-sm">
<view>
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">SP738644872</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
</view>
</view>
<view>
已付款
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center">
<text class="text-gray text-sm">已付款</text>
<view class="text-lg text-price text-red">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view>
已付款
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
@ -101,32 +104,37 @@
return {
base64Img: '', //
skeletonLoading: true,
payCur: 0, //
loading: false,
address: {},
shopData: {},
num: 0,
payPwd: '',
price: '', //
orderId:1,
orderDetails: {}
}
},
computed: {
disabled() {
//
if (this.payPwd) return false
return true
},
total(){
return this.num * this.price
}
},
onLoad(e) {
this.orderId = e.orderid
if(this.orderId) {
this.getOrderDetails()
}
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
},1000)
},
methods: {
getOrderDetails() {
this.$http(this.API.API_ORDER_DETAILS, {order_id: this.orderId}).then(res => {
if(res.code == 0) {
this.orderDetails = res.data
console.log(this.orderDetails)
}
}).catch(err => {
});
},
//
copy(text) {
uni.setClipboardData({
@ -136,13 +144,9 @@
submit(){
this.$routerGo('/pages/order/order?type=all')
},
//
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // ,
this.mescroll.endErr(); // ,
},1000)
},
},
created() {
}
}
</script>

38
pages/order/order-item.vue

@ -7,26 +7,25 @@
<block v-for="(item, index) in assetsFlow" :key="index">
<view class="margin-top bg-white">
<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="$routerGo('/pages/order/order-details')">
<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">
<!-- <image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> -->
<view class='cu-avatar xxl radius' style="background-image:url(../../static/tu.png)">
<view class='cu-tag badge padding'>待付款</view>
<view class='cu-avatar xxl radius' :style="{'background-image':'url('+item.goods.cover+')'}">
<view class='cu-tag badge padding' :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view>
</view>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
{{item.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</text></text>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x{{item.number}}</text></text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<amount :value="Number(item.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<button v-if="i==1" class="cu-btn line-gray round margin-left-sm" @tap="orderClick(item,'modalShowCancel')">取消订单</button>
<button v-if="i==2" class="cu-btn line-red round margin-left-sm" @tap="$routerGo('/pages/shop/returngoods?id=1')">我要退货</button>
<button v-if="i==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button>
<button v-if="i !=1 && i != 2" class="cu-btn line-orange round margin-left-sm" @tap.stop="$routerGo('/pages/order/confirm-order')">立即付款</button>
<button v-if="item.state==1" class="cu-btn line-orange round margin-left-sm" @tap.stop="$routerGo('/pages/order/confirm-order?goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id)">立即付款</button>
<button v-if="item.state==2" class="cu-btn line-red round margin-left-sm" @tap="$routerGo('/pages/shop/returngoods?id=1')">我要退货</button>
<button v-if="item.state==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button>
</view>
</view>
</view>
@ -34,11 +33,11 @@
<view class="padding-lr padding-tb-sm order-bottom">
<text class="cuIcon-fold bg-white order-ico"></text>
<view class="flex justify-between align-center">
<view style="color: #777777;">2021-6-17 12:37:54</view>
<view style="color: #777777;">{{item.created_at_text}}</view>
<view class="flex align-center justify-end">
实付
<view class="text-price text-red text-xl">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<amount :value="Number(item.amount || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
</view>
@ -82,7 +81,8 @@
upOption: {
auto: false
},
assetsFlow: 10
assetsFlow: [],
page: 1
}
},
props: {
@ -103,11 +103,17 @@
methods: {
getUserOrder(pagenum) {
this.$http(this.API.API_USERORDER, {state: this.tabs[this.index].type,page: pagenum,per_page: 20}).then(res => {
console.log(res)
if(res.code == 0) {
if(pagenum == 1) this.assetsFlow = []
this.mescroll.endSuccess(res.data.items.length, res.data.has_more_page);
this.assetsFlow=this.assetsFlow.concat(res.data.items);
console.log(this.assetsFlow)
}
}).catch(err => {
this.mescroll.endErr();
});
},
orderClick(item, type) {

Loading…
Cancel
Save