邓平艺 4 years ago
parent
commit
127e582e1f
  1. 2
      colorui/main.css
  2. 4
      common/api.js
  3. 13
      main.js
  4. 15
      pages.json
  5. 22
      pages/agreement/agreement.vue
  6. 194
      pages/order/apply-details.vue
  7. 204
      pages/order/apply-refund.vue
  8. 135
      pages/order/confirm-order.vue
  9. 279
      pages/order/index.vue
  10. 184
      pages/order/order-details.vue
  11. 10
      pages/order/order-item.vue
  12. 126
      pages/order/unpay-details.vue

2
colorui/main.css

@ -3494,7 +3494,7 @@ scroll-view.cu-steps .cu-item {
}
.bg-green {
background-color: #10CB3B;
background-color: #10CB3B!important;
color: #ffffff;
}

4
common/api.js

@ -21,6 +21,9 @@ export const API_COFIRMORDER_DETAILS = '/api/order/confirm';
export const API_GOODS_DETAIL = '/api/goods/detail'; // 商品详情
export const API_COLLECT_DEAL = '/api/collect/deal'; // 商品收藏
//订单预支付
export const API_PRPAID = '/api/order/deal'
/* 个人中心相关 */
export const API_COLLECT_LIST = '/api/collect/list'; // 我的收藏列表
@ -28,4 +31,3 @@ export const API_COLLECT_LIST = '/api/collect/list'; // 我的收藏列表
export const API_WXLOGIN = '/api/wxlogin'; // 用户登录
export const API_WECHAT_SETPHONE = '/api/wechat/setPhone'; // 用户授权手机号提交
export const TEST = '/api/order/deal';

13
main.js

@ -21,15 +21,6 @@ Vue.use(uView);
import { $http } from '@/common/http.js';
Vue.prototype.$http = $http;
//color-ui-标题组件
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom', cuCustom)
// 上拉加载、下拉刷新
import MescrollBody from './components/mescroll-uni/mescroll-body.vue'
Vue.component('mescroll-body', MescrollBody)
//骨架屏
import Skeleton from './components/my-uni-skeleton/index.vue'
Vue.component('skeleton', Skeleton);
@ -38,10 +29,6 @@ Vue.component('skeleton', Skeleton);
import myNocontent from './components/my-nocontent/my-nocontent.vue';
Vue.component('my-nocontent', myNocontent);
//金融数字
import aMount from './components/amount/index.vue'
Vue.component('amount', aMount)
Vue.prototype.$toast=msg=>{
uni.showToast({
icon:'none',

15
pages.json

@ -13,7 +13,8 @@
{
"path": "pages/order/index",
"style": {
"navigationBarTitleText": "我的订单"
"navigationBarTitleText": "我的订单",
"enablePullDownRefresh": true
}
},
{
@ -22,6 +23,12 @@
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/order/unpay-details",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/order/confirm-order",
"style": {
@ -34,6 +41,12 @@
"navigationBarTitleText": "支付结果"
}
},
{
"path": "pages/agreement/agreement",
"style": {
"navigationBarTitleText": "协议"
}
},
{
"path": "pages/order/apply-refund",
"style": {

22
pages/agreement/agreement.vue

@ -0,0 +1,22 @@
<template>
<view class="padding-lr">
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

194
pages/order/apply-details.vue

@ -1,116 +1,111 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<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>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</text></text>
<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>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
19.90
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</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>
</view>
<view>
<button class="cu-btn border-blue bg-white text-blue round margin-left-sm text-sm">等待审核</button>
</view>
<view>
<button class="cu-btn border-blue bg-white text-blue round margin-left-sm text-sm">等待审核</button>
</view>
</view>
</view>
</view>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
19.90
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<view>
<text>30%</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<view>
<text>30%</text>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
<amount :value="Number(3.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
3.90
</view>
</view>
</skeleton>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
<amount :value="Number(16.00 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
</skeleton>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
16.00
</view>
<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" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
<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" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
</skeleton>
<self-line/>
</view>
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="padding-top padding-lr bg-white">
<view class="cu-self menu">
<view class="text-gray">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的售后说明或咨询客服
</view>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="padding-top padding-lr bg-white">
<view class="cu-self menu">
<view class="text-gray">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的售后说明或咨询客服
</view>
</view>
<view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">退款说明</view>
</view>
<view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">退款说明</view>
</view>
<view class="cu-self menu margin-top">
<view class="text-gray">看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了</view>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="cu-self menu margin-top">
<view class="text-gray">看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了看着不是很新鲜了然后还有一些都烂了</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
<view class="bg-img">
<image src="../../static/tu.png" @tap="showImg" mode="aspectFill"></image>
</view>
</view>
</skeleton>
</mescroll-body>
</view>
</skeleton>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使mixin
data() {
return {
skeletonLoading: true,
@ -127,7 +122,6 @@
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
},1000)
},
methods: {
@ -166,30 +160,11 @@
data: text
});
},
//
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // ,
this.mescroll.endErr(); // ,
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
@ -198,15 +173,4 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

204
pages/order/apply-refund.vue

@ -1,119 +1,113 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<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>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</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>
</view>
</view>
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<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>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季
</view>
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x1</text></text>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
<amount :value="Number(19.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<view>
<text>30%</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
<amount :value="Number(3.90 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
19.90
</view>
</view>
</view>
</view>
</skeleton>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
<amount :value="Number(16.00 || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
19.90
</view>
<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" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<view>
<text>30%</text>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">退款说明</text>
<input type="text" class="text-right text-df" placeholder="请输入反馈信息" />
</view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
3.90
</view>
</view>
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="padding-top padding-lr bg-white">
<view class="cu-self menu">
<view class="text-gray">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的售后说明或咨询客服
</view>
</view>
</skeleton>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
16.00
</view>
</view>
<view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">请上传退款凭证</view>
<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" @tap="copy('67432428794847982374')">复制</text>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="solids" @tap="ChooseImage" v-if="hostImg == ''"><text class="cuIcon-cameraadd"></text></view>
<view class="bg-img" v-else>
<image :src="hostImg" @tap="showImg" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg"><text class="cuIcon-close"></text></view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">退款说明</text>
<input type="text" class="text-right text-df" placeholder="请输入反馈信息" />
</view>
</view>
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="padding-top padding-lr bg-white">
<view class="cu-self menu">
<view class="text-gray">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的售后说明或咨询客服
</view>
</view>
</view>
<view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">请上传退款凭证</view>
</view>
</view>
<view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub">
<view class="solids" @tap="ChooseImage" v-if="hostImg == ''"><text class="cuIcon-cameraadd"></text></view>
<view class="padding-top-sm padding-lr-lg">
<button class="cu-btn block bg-orange lg margin-top round" @tap="$routerGo('/pages/order/apply-details')">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">确认申请</text>
</button>
<view class="bg-img" v-else>
<image :src="hostImg" @tap="showImg" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg"><text class="cuIcon-close"></text></view>
</view>
</view>
</skeleton>
</mescroll-body>
</view>
<view class="padding-top-sm padding-lr-lg">
<button class="cu-btn block bg-orange lg margin-top round" @tap="$routerGo('/pages/order/apply-details')">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">确认申请</text>
</button>
</view>
</skeleton>
</view>
</template>
<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使mixin
data() {
return {
skeletonLoading: true,
@ -130,7 +124,6 @@
onLoad(e) {
setTimeout(()=>{
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
},1000)
},
methods: {
@ -182,30 +175,11 @@
data: text
});
},
//
downCallback() {
setTimeout(()=>{
this.mescroll.endSuccess(); // ,
this.mescroll.endErr(); // ,
},1000)
},
}
}
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
@ -215,14 +189,4 @@
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

135
pages/order/confirm-order.vue

@ -1,53 +1,50 @@
<template>
<view>
<!-- <mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt" style="min-height: 645px;"> -->
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :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>
<view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
</view>
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :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>
<view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
</view>
</view>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<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>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view> -->
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.goods.specs[0].selling_price || 0)}}
</view>
<!-- <view>
<button v-if="true" class="cu-btn line-orange round margin-left-sm text-sm">申请退款</button>
<button v-else class="cu-btn line-gray bg-gray round margin-left-sm text-sm">退款中</button>
</view> -->
</view>
</view>
</view>
</skeleton>
</view>
</skeleton>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
<self-line/>
<skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
</view>
</skeleton>
<self-line/>
<!-- </mescroll-body> -->
</view>
</skeleton>
<self-line/>
<skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
<view class="btn-bottom">
@ -64,7 +61,7 @@
<view class="flex align-center">
<text class="">应付款</text>
<view class="text-lg text-price text-red">
<amount :value="Number(orderDetails.goods.specs[0].selling_price*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
{{Number(orderDetails.goods.specs[0].selling_price*num || 0)}}
</view>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
@ -113,8 +110,9 @@
this.orderDetails = res.data
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
}else {
this.$msg(res.msg)
}
}).catch(err => {
// this.mescroll.endErr();
});
@ -141,6 +139,38 @@
},
submit(){
if(this.ifchoose == true) {
this.$http(this.API.API_PRPAID, {
goods_id: this.goods_id,
goods_specs_id: this.goods_specs_id,
number: this.num,
token: 'fdf12000e774e48bc60c6b6d42055602'
}).then(res => {
console.log(res)
// let nonceStr = res.data.nonceStr
// appId: "wxb35ef055a4dd8ad4"
// nonceStr: "60d3125d138af"
// order_num: "2842855348400816128"
// package: "prepay_id=wx23185213000285e14ea77ac97acc670000"
// paySign: "6DC330CBDF6C29BEDD4D254D9DA97364"
// signType: "MD5"
// timeStamp: "1624445533"
uni.requestPayment({
orderInfo: res.data.order_num,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.paySign,
complete: result => {
console.log(result)
}
})
})
return
this.$routerGo('/pages/order/pay-success')
}else {
this.$msg('请认真阅读并同意协议!')
@ -159,18 +189,6 @@
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
@ -179,15 +197,4 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

279
pages/order/index.vue

@ -1,62 +1,173 @@
<template>
<view>
<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
<view class="padding-lr">
<me-tabs style="border-top: 1px solid #f7f7f7;box-sizing:content-box;border-radius: 10px;" v-model="tabIndex" :tabs="tabs" :fixed="true"></me-tabs>
<view class="padding-lr margin-bottom">
<me-tabs v-model="current" :tabs="tab_list" :fixed="true"></me-tabs>
<!-- <u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs> -->
</view>
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">
<view class="flex-direction justify-around list" v-for="(item, index) in 1" :key="item.id" @click="goDetails(item)">
<view class="lf-row-between">
<view class="left">
<image src="../../static/tu.png" mode=""></image>
<!-- <view class="cu-tag badge" style="position: relative;top: -100px;">待付款</view> -->
</view>
<view class="right">
<view class="lf-line-2 title">全局清洁</view>
<view class="lf-flex tips">
<text class="progress margin-right-xs">数量</text>
<text class="bought">x 1</text>
</view>
<view class="lf-row-between price">
<text class="lf-font-bold">
<text class="lf-font-24"></text>
<text class="lf-font-42">19.90</text>
</text>
<!-- <button @tap.stop="$routerGo('/pages/order/confirm-order?goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id)">立即付款</button> -->
<button class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button>
</view>
</view>
</view>
<view class="padding-bottom padding-lr padding-top-sm">
<view class="u-border-top flex justify-between align-center text-center">
<view class="padding-top text-gray">
2021-6-17 12:37:54
</view>
<view class="text-orange padding-top">
请在10分钟内付款
</view>
</view>
</view>
</view>
<!-- 加载 -->
<view class="loading-more">
<text v-if="tab.list.length"
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
<!-- 回到顶部 -->
<u-back-top :scroll-top="pageScrollTop"></u-back-top>
</view>
<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
<swiper-item v-for="(tab,i) in tabs" :key="i">
<mescroll-item :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
</swiper-item>
</swiper>
</view>
</template>
<script>
import MescrollItem from "./order-item.vue";
export default {
components: {
MescrollItem
},
data() {
return {
height: "400px", // swiper
tabs: [{
name: '全部',
type: 'all'
}, {
name: '待付款',
type: 'unpaid'
}, {
name: '待使用',
type: 'paid'
},
{
name: '已完成',
type: 'complete'
},
{
name:'售后',
type: 'after_sales'
}
tab_list: [{
name: '全部',
type: 'all',
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
}, {
name: '待付款',
type: 'unpaid',
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
}, {
name: '待使用',
type: 'paid',
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
name: '已完成',
type: 'complete',
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
},
{
name: '售后',
type: 'after_sales',
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true
}
],
tabIndex: 0, // tab
current: 0, // tab
pageSize: 10,
assetsType: '', //
orderType: []
}
},
onLoad(e) {
this.assetsType = e.type
this.tabIndex = this.assetsType === 'all' ? 0 : this.assetsType === 'unpaid' ? 1 : this.assetsType === 'paid' ? 2 : 0
// swiper
this.height = (uni.getSystemInfoSync().windowHeight-40) + 'px'
this.getUserOrder()
},
methods: {
//
swiperChange(e) {
this.tabIndex = e.detail.current
// tab
change(index) {
this.current = index;
},
goDetails(item) {
if (item.state == 1) {
this.$routerGo('/pages/order/unpay-details?orderid=' + item.id)
} else {
this.$routerGo('/pages/order/order-details?orderid=' + item.id)
}
},
onReachBottom() {
let tab_item = this.tab_list[this.current];
if (tab_item.isPage) {
tab_item.page = tab_item.page + 1;
this.getUserOrder();
}
},
onPullDownRefresh() {
let tab_item = this.tab_list[this.current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
this.getUserOrder();
uni.stopPullDownRefresh()
},
getUserOrder() {
let per_page = this.pageSize;
let tab_item = this.tab_list[this.current];
this.$http(this.API.API_USERORDER, {
state: this.tab_list[this.current].type,
page: tab_item.page,
per_page
}).then(res => {
if (res.code == 0) {
console.log(res)
let isPage = res.data.has_more_page;
tab_item.isPage = isPage;
if (isPage) {
tab_item.loadingClass = true;
tab_item.loadingText = '正在加载中';
} else {
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
if (tab_item.page == 1) {
tab_item.list = res.data.items;
} else {
tab_item.list.push(...res.data.items);
}
}
}).catch(err => {
});
},
//
back() {
@ -83,12 +194,94 @@
}
}
},
created() {
}
}
</script>
<style>
<style lang="scss">
.title {
font-size: 28rpx;
color: $u-content-color;
height: 88rpx;
}
// tab
.ctab {
width: 100%;
margin: 20rpx 0 0rpx 0rpx;
padding: 0 22rpx;
}
//
.com {
width: 100%;
overflow: hidden;
.list {
border-radius: 10rpx;
overflow: hidden;
margin: 20rpx 32rpx;
background-color: #FFFFFF;
box-shadow: 0 0 10px 5px #e5e5e5;
align-items: flex-start;
.left {
overflow: hidden;
image {
width: 204rpx;
height: 204rpx;
margin: 20rpx;
border-radius: 10rpx;
}
}
.right {
overflow: hidden;
width: 64%;
.title {
margin: 18rpx 20rpx 0 0;
color: #222222;
font-size: 32rpx;
}
.tips {
margin: 16rpx 0;
overflow: hidden;
.u-line-progress {
width: 112rpx;
overflow: hidden;
margin-right: 20rpx;
}
.progress {
color: #777777;
font-size: 24rpx;
}
.bought {
color: #777777;
font-size: 24rpx;
margin-right: 20rpx;
}
}
.price {
overflow: hidden;
color: #FF0000;
button {
width: 160rpx;
height: 60rpx;
background: #FE9903;
border-radius: 15px;
font-size: 24rpx;
color: #FFFFFF;
margin: 0rpx 20rpx 0rpx 20rpx;
border: none;
}
}
}
}
}
</style>

184
pages/order/order-details.vue

@ -1,109 +1,105 @@
<template>
<view>
<!-- <mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt"> -->
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :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" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :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" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(orderDetails.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<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 class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
{{Number(orderDetails.selling_price || 0)}}
</view>
<view>
<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>
</view>
</skeleton>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<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">{{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>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<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">{{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>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
<view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="140" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
</view>
<view v-if="orderDetails.state!=1">
<self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="140" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
<view class="flex justify-around align-center text-center margin-top-sm">
<view @tap="refreshCode()">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">{{checkArea}}</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
</view>
<view class="margin-top-sm text-green text-sm">
待使用
<view class="flex justify-around align-center text-center margin-top-sm">
<view @tap="refreshCode()">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view>
<view class="text-lg">{{checkArea}}</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</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(orderDetails.amount || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
</view>
<view>
{{orderDetails.state_text.text}}
<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">
{{Number(orderDetails.amount || 0)}}
</view>
</view>
<view>
{{orderDetails.state_text.text}}
</view>
</view>
</skeleton>
<!-- </mescroll-body> -->
</view>
</skeleton>
</view>
</template>
<script>
import tkiQrcode from "tki-qrcode" //
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使mixin
components: {
tkiQrcode
},
@ -165,35 +161,5 @@
</script>
<style lang="scss" scoped>
.address-box {
// background-image: url(../../static/images/shop/envelope.png);
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 8rpx;
}
.self-img-sm {
width: 40rpx;
height: 40rpx;
}
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.order-bottom {
position: relative;
.cuIcon-fold {
position: absolute;
right: 50rpx;
top: -19rpx;
color: rgba(0, 0, 0, 0.1)
}
}
</style>

10
pages/order/order-item.vue

@ -7,7 +7,7 @@
<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?orderid='+item.id)">
<view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="goDetails(item)">
<!-- <image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> -->
<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>
@ -101,6 +101,14 @@
}
},
methods: {
goDetails(item) {
if(item.state==1) {
this.$routerGo('/pages/order/unpay-details?orderid='+item.id)
}else {
this.$routerGo('/pages/order/order-details?orderid='+item.id)
}
},
getUserOrder(pagenum) {
this.$http(this.API.API_USERORDER, {state: this.tabs[this.index].type,page: pagenum,per_page: 20}).then(res => {
if(res.code == 0) {

126
pages/order/unpay-details.vue

@ -0,0 +1,126 @@
<template>
<view>
<!-- 商品信息 -->
<self-line/>
<view class="bg-white padding-tb-sm">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image v-if="orderDetails.goods.cover" :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" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}}
</view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<amount :value="Number(orderDetails.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
</view>
<view>
<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>
</view>
</skeleton>
</view>
<self-line/>
<!-- 表单 -->
<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true">
<view class="bg-white">
<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">{{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>{{orderDetails.created_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''">
<text class="text-gray">付款时间</text>
<text>{{orderDetails.payment_at_text}}</text>
</view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
</view>
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
</skeleton>
</view>
</template>
<script>
export default {
data() {
return {
base64Img: '', //
skeletonLoading: true,
loading: false,
orderId:1,
orderDetails: {},
}
},
computed: {
total(){
return this.num * this.price
}
},
onLoad(e) {
this.orderId = e.orderid
if(this.orderId) {
this.getOrderDetails()
}
},
methods: {
getOrderDetails() {
this.$http(this.API.API_ORDER_DETAILS, {order_id: this.orderId}).then(res => {
if(res.code == 0) {
this.orderDetails = res.data
this.skeletonLoading = false
}
}).catch(err => {
});
},
//
copy(text) {
uni.setClipboardData({
data: text
});
},
submit(){
this.$routerGo('/pages/order/order?type=all')
},
},
created() {
}
}
</script>
<style lang="scss" scoped>
.bref-box {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
Loading…
Cancel
Save