Browse Source

真机测试后 细节修改

master
Enzo 4 years ago
parent
commit
7598f5cd95
  1. 2
      components/mescroll-uni/components/mescroll-up.css
  2. 2
      components/mescroll-uni/mescroll-uni-option.js
  3. 2
      components/mescroll-uni/mescroll-uni.js
  4. 84
      pages/order/confirm-order.vue
  5. 2
      pages/order/index.vue
  6. 113
      pages/order/order-details.vue
  7. 6
      pages/order/order-item.vue

2
components/mescroll-uni/components/mescroll-up.css

@ -2,7 +2,7 @@
.mescroll-upwarp {
box-sizing: border-box;
min-height: 110rpx;
padding: 30rpx 0;
padding: 0 0 30rpx 0;
text-align: center;
clear: both;
}

2
components/mescroll-uni/mescroll-uni-option.js

@ -12,7 +12,7 @@ const GlobalOption = {
up: {
// 其他up的配置参数也可以写,这里只展示了常用的配置:
textLoading: '加载中 ...', // 加载中的提示文本
textNoMore: '-- END --', // 没有更多数据的提示文本
textNoMore: '没有更多数据啦~', // 没有更多数据的提示文本
offset: 80, // 距底部多远时,触发upCallback
toTop: {
// 回到顶部按钮,需配置src才显示

2
components/mescroll-uni/mescroll-uni.js

@ -92,7 +92,7 @@ MeScroll.prototype.extendUpScroll = function(optUp) {
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
offset: 80, // 距底部多远时,触发upCallback
textLoading: '加载中 ...', // 加载中的提示文本
textNoMore: '-- END --', // 没有更多数据的提示文本
textNoMore: '没有更多数据啦~', // 没有更多数据的提示文本
bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorBottom)
textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
inited: null, // 初始化完毕的回调

84
pages/order/confirm-order.vue

@ -1,6 +1,6 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt" style="min-height: 645px;">
<!-- <mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt" style="min-height: 645px;"> -->
<!-- 商品信息 -->
<self-line/>
@ -8,7 +8,7 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<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}}
@ -38,35 +38,42 @@
</view>
<self-line/>
<view class="bg-white">
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
<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>
</view>
</view>
</skeleton>
<self-line/>
</mescroll-body>
<view class="btn-bottom">
<view class="padding flex justify-around align-center">
<view class="margin-right">
<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
<!-- </mescroll-body> -->
<skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
<view class="btn-bottom">
<view class="padding flex justify-around align-center" v-if="orderDetails.agreement.tips">
<checkbox-group class="block" @change="CheckboxChange">
<view class="margin-right">
<checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view>
</checkbox-group>
<view class="text-sm text-gray">{{orderDetails.agreement.tips}}</view>
</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(orderDetails.goods.specs[0].selling_price*num || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<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(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">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
<button class="cu-btn block bg-orange round shadow" @tap="submit">
<text class="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
</view>
</skeleton>
</view>
</template>
@ -86,7 +93,8 @@
}],
goods_id: 1,
goods_specs_id: 1,
orderDetails: {}
orderDetails: {},
ifchoose: true
}
},
computed: {
@ -105,11 +113,10 @@
this.orderDetails = res.data
this.skeletonLoading = false
this.mescroll.endSuccess(); // ,
console.log(this.orderDetails)
}
}).catch(err => {
// this.mescroll.endErr();
});
},
reduce() {
@ -120,16 +127,10 @@
this.num++
},
CheckboxChange(e) {
var items = this.checkbox,
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value == values[j]) {
items[i].checked = true;
break
}
}
if(e.detail.value != '') {
this.ifchoose = true
}else {
this.ifchoose = false
}
},
//
@ -139,7 +140,12 @@
});
},
submit(){
this.$routerGo('/pages/order/pay-success')
if(this.ifchoose == true) {
this.$routerGo('/pages/order/pay-success')
}else {
this.$msg('请认真阅读并同意协议!')
return
}
},
//
downCallback() {

2
pages/order/index.vue

@ -50,7 +50,7 @@
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) + 'px'
this.height = (uni.getSystemInfoSync().windowHeight-40) + 'px'
},
methods: {

113
pages/order/order-details.vue

@ -1,6 +1,6 @@
<template>
<view>
<mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt">
<!-- <mescroll-body ref="mescrollRef" @down="downCallback" :down="downOpt"> -->
<!-- 商品信息 -->
<self-line/>
@ -8,16 +8,16 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="flex justify-between align-start padding-top-sm padding-lr">
<image :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<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 text-gray">x{{orderDetails.amount}}</text></text>
<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.goods.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount>
<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>
@ -32,67 +32,68 @@
<self-line/>
<!-- 表单 -->
<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>
<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>
<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>
<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 src="../../static/tu.png" mode="widthFix" style="height: 150px;width: 150px;"></image>
<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 class="flex justify-around align-center text-center margin-top-sm">
</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>
<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>
</view>
</mescroll-body>
</skeleton>
<!-- </mescroll-body> -->
</view>
</template>
@ -119,15 +120,13 @@
if(this.orderId) {
this.getOrderDetails()
}
setTimeout(()=>{
this.skeletonLoading = false
},1000)
},
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
console.log(this.orderDetails)
}

6
pages/order/order-item.vue

@ -3,7 +3,7 @@
<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" top="0" :down="downOption" @down="downCallback"
:up="upOption" @up="upCallback">
<!-- 数据列表 -->
<view class="padding-bottom-xl">
<view>
<block v-for="(item, index) in assetsFlow" :key="index">
<view class="margin-top bg-white">
@ -16,7 +16,7 @@
<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">x{{item.number}}</text></text>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{item.number}}</text>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
@ -147,7 +147,7 @@
}
},
created() {
this.getUserOrder()
}
}
</script>

Loading…
Cancel
Save