Browse Source

样式修改优化

master
Enzo 4 years ago
parent
commit
36f5dc64be
  1. 13
      colorui/main.css
  2. 2
      components/me-tabs/me-tabs.vue
  3. 40
      pages/order/apply-details.vue
  4. 53
      pages/order/apply-refund.vue
  5. 25
      pages/order/confirm-order.vue
  6. 6
      pages/order/index.vue
  7. 48
      pages/order/order-details.vue

13
colorui/main.css

@ -3406,7 +3406,7 @@ scroll-view.cu-steps .cu-item {
.line-orange::after, .line-orange::after,
.lines-orange::after { .lines-orange::after {
border-color: #f37b1d;
border-color: #FE9903;
} }
.line-yellow::after, .line-yellow::after,
@ -3543,6 +3543,11 @@ scroll-view.cu-steps .cu-item {
color: white!important; color: white!important;
} }
.bg-gray1 {
background-color: #f7f7fb;
color: #333333;
}
.bg-black { .bg-black {
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
@ -3980,6 +3985,12 @@ scroll-view.cu-steps .cu-item {
color: #333333; color: #333333;
} }
.text-black1,
.line-black1,
.lines-black1 {
color: #222222;
}
.text-white, .text-white,
.line-white, .line-white,
.lines-white { .lines-white {

2
components/me-tabs/me-tabs.vue

@ -5,7 +5,7 @@
:scroll-animation-duration="300"> :scroll-animation-duration="300">
<view class="tabs-item" :class="{'tabs-flex':!isScroll, 'tabs-scroll':isScroll}"> <view class="tabs-item" :class="{'tabs-flex':!isScroll, 'tabs-scroll':isScroll}">
<!-- tab --> <!-- tab -->
<view class="tab-item" :style="{width: tabWidthVal, height: tabHeightVal1, 'line-height':tabHeightVal1}" v-for="(tab, i) in tabs"
<view class="tab-item lf-font-28" :style="{width: tabWidthVal, height: tabHeightVal1, 'line-height':tabHeightVal1}" v-for="(tab, i) in tabs"
:class="{'active': value===i}" :key="i" @click="tabClick(i)"> :class="{'active': value===i}" :key="i" @click="tabClick(i)">
{{getTabName(tab)}} {{getTabName(tab)}}
</view> </view>

40
pages/order/apply-details.vue

@ -8,17 +8,17 @@
<view class="flex justify-between align-start padding-top-sm padding-lr"> <view class="flex justify-between align-start padding-top-sm padding-lr">
<image :src="orderDetails.order.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> <image :src="orderDetails.order.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm"> <view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold">
{{orderDetails.order.goods.name}} {{orderDetails.order.goods.name}}
</view> </view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x {{orderDetails.order.number}}</text></text>
<text class="block margin-top-sm text-gray lf-font-28">数量 <text class="margin-left text-gray">x {{orderDetails.order.number}}</text></text>
<view class="flex justify-between margin-top-sm"> <view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{orderDetails.order.selling_price}} {{orderDetails.order.selling_price}}
</view> </view>
<view> <view>
<button class="cu-btn line-gray bg-white border round margin-left-sm text-sm">等待审核</button>
<button class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">等待审核</button>
</view> </view>
</view> </view>
</view> </view>
@ -30,20 +30,20 @@
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">订单金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.order.amount}} {{orderDetails.order.amount}}
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<text class="text-gray lf-font-32">扣费率</text>
<view> <view>
<text>{{orderDetails.refund_rate}}%</text>
<text class="lf-font-32 text-black">{{orderDetails.refund_rate}}%</text>
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">扣费金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.refund_rate_amount}} {{orderDetails.refund_rate_amount}}
</view> </view>
</view> </view>
@ -54,16 +54,16 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">可退金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.refund_amount}} {{orderDetails.refund_amount}}
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<text class="text-gray lf-font-32">订单编号</text>
<view> <view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @tap="copy(orderDetails.order_sn)">复制</text>
<text class="margin-right lf-font-32">{{orderDetails.order_sn}}</text>
<text class="text-orange lf-font-28" @tap="copy(orderDetails.order_sn)">复制</text>
</view> </view>
</view> </view>
</view> </view>
@ -73,17 +73,17 @@
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="padding-top padding-lr bg-white"> <view class="padding-top padding-lr bg-white">
<view class="cu-self menu"> <view class="cu-self menu">
<view class="text-gray">
{{checkArea}}
<view class="text-gray lf-font-28">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的<text class="text-orange">{{checkArea}}</text>或咨询客服
</view> </view>
</view> </view>
</view> </view>
<view class="padding bg-white"> <view class="padding bg-white">
<view class="cu-self menu"> <view class="cu-self menu">
<view class="text-df text-bold">退款说明</view>
<view class="lf-font-32 text-black1">退款说明</view>
</view> </view>
<view class="cu-self menu margin-top"> <view class="cu-self menu margin-top">
<view class="text-gray">{{orderDetails.comment}}</view>
<view class="text-gray lf-font-32">{{orderDetails.comment}}</view>
</view> </view>
</view> </view>
<view class="cu-form-group solid-bottom"> <view class="cu-form-group solid-bottom">
@ -128,7 +128,7 @@
this.$http(this.API.API_APPLYPAGE_DETAILS, {order_id: this.orderId}).then(res => { this.$http(this.API.API_APPLYPAGE_DETAILS, {order_id: this.orderId}).then(res => {
if(res.code == 0) { if(res.code == 0) {
this.orderDetails = res.data.refund this.orderDetails = res.data.refund
this.checkArea = res.data.agreement.tips
this.checkArea = res.data.agreement.title
this.images = res.data.refund.images this.images = res.data.refund.images
this.skeletonLoading = false this.skeletonLoading = false
} }

53
pages/order/apply-refund.vue

@ -8,13 +8,13 @@
<view class="flex justify-between align-start padding-top-sm padding-lr"> <view class="flex justify-between align-start padding-top-sm padding-lr">
<image :src="applyDetails.order.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> <image :src="applyDetails.order.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm"> <view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold">
{{applyDetails.order.goods.name}} {{applyDetails.order.goods.name}}
</view> </view>
<text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left text-gray">x{{applyDetails.order.number}}</text></text>
<text class="block margin-top-sm text-gray lf-font-28">数量 <text class="margin-left text-gray">x{{applyDetails.order.number}}</text></text>
<view class="flex justify-between margin-top-sm"> <view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{applyDetails.order.selling_price}} {{applyDetails.order.selling_price}}
</view> </view>
</view> </view>
@ -28,20 +28,20 @@
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">订单金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.amount}} {{applyDetails.order.amount}}
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费率</text>
<text class="text-gray lf-font-32">扣费率</text>
<view> <view>
<text>{{applyDetails.order.refund_rate}}%</text>
<text class="lf-font-32 text-black">{{applyDetails.order.refund_rate}}%</text>
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">扣费金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">扣费金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.refund_rate_amount}} {{applyDetails.order.refund_rate_amount}}
</view> </view>
</view> </view>
@ -53,38 +53,39 @@
<skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="3" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">可退金额</text>
<view class="text-price">
<text class="text-gray lf-font-32">可退金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.refund_amount}} {{applyDetails.order.refund_amount}}
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<text class="text-gray lf-font-32">订单编号</text>
<view> <view>
<text class="margin-right">{{applyDetails.order.order_sn}}</text>
<text class="text-orange text-sm" @tap="copy(applyDetails.order.order_sn)">复制</text>
<text class="margin-right lf-font-32 text-black">{{applyDetails.order.order_sn}}</text>
<text class="text-orange lf-font-32" @tap="copy(applyDetails.order.order_sn)">复制</text>
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">退款说明</text>
<input type="text" v-model="applyInfo" class="text-right text-df" placeholder="请输入反馈信息" />
<view class="padding-top padding-lr bg-white">
<view class="cu-self menu">
<view class="text-gray lf-font-28">
由于产品的特殊性在申请的过程中供应商会向您收取部分费用如有疑问可参与产品的<text class="text-orange">{{applyDetails.agreement.title}}</text>或咨询客服
</view>
</view>
</view> </view>
</view> </view>
</skeleton> </skeleton>
<self-line/> <self-line/>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true"> <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">
{{applyDetails.agreement.tips}}
</view>
</view>
<view class="cu-bar padding-lr solid-bottom">
<text class="lf-font-32 text-gray">退款说明</text>
<input type="text" v-model="applyInfo" class="text-right lf-font-32" style="color: #999999;" placeholder="请输入反馈信息" />
</view> </view>
<view class="padding bg-white">
<!-- <view class="padding bg-white">
<view class="cu-self menu"> <view class="cu-self menu">
<view class="text-df text-bold">请上传退款凭证</view>
<view class="lf-font-32 text-gray">请上传退款凭证</view>
</view> </view>
</view>
</view> -->
<view class="cu-form-group solid-bottom"> <view class="cu-form-group solid-bottom">
<view class="grid col-4 grid-square flex-sub"> <view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in img_list" :key="index" @tap="showImg(item)" :data-url="img_list[index]"> <view class="bg-img" v-for="(item,index) in img_list" :key="index" @tap="showImg(item)" :data-url="img_list[index]">

25
pages/order/confirm-order.vue

@ -9,20 +9,20 @@
<view class="flex justify-between align-start padding-top-sm padding-lr"> <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 :src="orderDetails.goods.cover" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image>
<view class="flex-sub padding-left-sm"> <view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold">
{{orderDetails.goods.name}} {{orderDetails.goods.name}}
</view> </view>
<view class="flex justify-between"> <view class="flex justify-between">
<text class="block margin-top-sm text-gray text-sm">数量</text>
<text class="block margin-top-sm text-gray lf-font-28">数量</text>
<view class="flex align-center margin-top-sm"> <view class="flex align-center margin-top-sm">
<text class="cuIcon-move" @tap="reduce"></text> <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;" />
<input type="number" v-model="num" class="text-center margin-lr-sm radius text-black lf-font-32" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text> <text class="cuIcon-add" @tap="add"></text>
</view> </view>
</view> </view>
<view class="flex justify-between margin-top-sm"> <view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.goods.specs[0].selling_price || 0)}} {{Number(orderDetails.goods.specs[0].selling_price || 0)}}
</view> </view>
<!-- <view> <!-- <view>
@ -40,8 +40,8 @@
<skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="1" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom"> <view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text>暂无优惠</text>
<text class="text-gray lf-font-32">优惠</text>
<text class="lf-font-32 text-black1">暂无优惠</text>
</view> </view>
</view> </view>
</skeleton> </skeleton>
@ -49,25 +49,26 @@
<skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="13" :showAvatar="false" :showTitle="true">
<view class="btn-bottom"> <view class="btn-bottom">
<view class="padding flex justify-around align-center" v-if="orderDetails.agreement.tips">
<view class="padding flex justify-around align-center bg-gray1" v-if="orderDetails.agreement.title">
<checkbox-group class="block" @change="CheckboxChange"> <checkbox-group class="block" @change="CheckboxChange">
<view class="margin-right"> <view class="margin-right">
<checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox> <checkbox @change="CheckboxChange" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
</view> </view>
</checkbox-group> </checkbox-group>
<view class="text-sm text-gray">{{orderDetails.agreement.tips}}</view>
<view class="lf-font-24 text-gray">
请认真阅读并同意<text>{{orderDetails.agreement.title}}</text>在小程序下单购买即表示您已默认同意<text>{{orderDetails.agreement.title}}</text>的所有条款
</view>
</view> </view>
<self-line/>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow"> <view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top shadow">
<view class="flex align-center"> <view class="flex align-center">
<text class="">应付款</text>
<view class="text-lg text-price text-red">
<text class="lf-font-28 text-gray">应付款</text>
<view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.goods.specs[0].selling_price*num || 0)}} {{Number(orderDetails.goods.specs[0].selling_price*num || 0)}}
</view> </view>
</view> </view>
<button class="cu-btn block bg-orange round shadow" @tap="submit"> <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="cuIcon-loading2 cuIconfont-spin margin-right-xs text-white" v-if="loading"></text>
<text class="text-df text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
<text class="lf-font-32 text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button> </button>
</view> </view>
</view> </view>

6
pages/order/index.vue

@ -10,7 +10,7 @@
<view class="lf-row-between"> <view class="lf-row-between">
<view class="left" style="position: relative;"> <view class="left" style="position: relative;">
<image :src="item.goods.cover" mode=""></image> <image :src="item.goods.cover" mode=""></image>
<view class="cu-tag badge tag-self text-lg" :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view>
<view class="cu-tag badge tag-self lf-font-28" :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view>
</view> </view>
<view class="right"> <view class="right">
<view class="lf-line-2 title">{{item.goods.name}}</view> <view class="lf-line-2 title">{{item.goods.name}}</view>
@ -24,13 +24,13 @@
<text class="lf-font-42">{{item.selling_price}}</text> <text class="lf-font-42">{{item.selling_price}}</text>
</text> </text>
<button v-if="item.state==1" @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==1" @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 bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button>
<button v-if="item.state==2" class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button>
</view> </view>
</view> </view>
</view> </view>
<view class="padding-bottom padding-lr padding-top-sm"> <view class="padding-bottom padding-lr padding-top-sm">
<view class="u-border-top flex justify-between align-center text-center"> <view class="u-border-top flex justify-between align-center text-center">
<view class="padding-top text-gray">
<view class="padding-top text-gray lf-font-28">
{{item.created_at_text}} {{item.created_at_text}}
</view> </view>
<view class="text-orange padding-top" v-if="item.state==1"> <view class="text-orange padding-top" v-if="item.state==1">

48
pages/order/order-details.vue

@ -9,18 +9,18 @@
<view class="flex justify-between align-start padding-top-sm padding-lr"> <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> <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="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold" v-if="orderDetails.goods.name">
{{orderDetails.goods.name}} {{orderDetails.goods.name}}
</view> </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>
<text class="block margin-top-sm text-gray lf-font-28">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between margin-top-sm"> <view class="flex justify-between margin-top-sm">
<view class="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.selling_price || 0)}} {{Number(orderDetails.selling_price || 0)}}
</view> </view>
<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?orderId='+orderDetails.id)">申请退款</button>
<button v-else class="cu-btn line-gray bg-white border round margin-left-sm text-sm">{{orderDetails.state_text.text}}</button>
<button v-if="orderDetails.state == 2" class="cu-btn line-orange text-orange round margin-left-sm lf-font-28" @tap="$routerGo('/pages/order/apply-refund?orderId='+orderDetails.id)">申请退款</button>
<button v-else class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
</view> </view>
</view> </view>
</view> </view>
@ -33,31 +33,31 @@
<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center"> <view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
<text class="text-gray">订单编号</text>
<text class="text-gray lf-font-32">订单编号</text>
<view> <view>
<text class="margin-right">{{orderDetails.order_sn}}</text>
<text class="text-orange text-sm" @click="copy(orderDetails.order_sn)">复制</text>
<text class="margin-right lf-font-32 text-black1">{{orderDetails.order_sn}}</text>
<text class="text-orange lf-font-32" @click="copy(orderDetails.order_sn)">复制</text>
</view> </view>
</view> </view>
<view class="cu-bar padding-lr solid-bottom"> <view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">下单时间</text>
<text>{{orderDetails.created_at_text}}</text>
<text class="text-gray lf-font-32">下单时间</text>
<text class="lf-font-32 text-black1">{{orderDetails.created_at_text}}</text>
</view> </view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_at_text != ''"> <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>
<text class="text-gray lf-font-32">付款时间</text>
<text class="lf-font-32 text-black1">{{orderDetails.payment_at_text}}</text>
</view> </view>
<view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''"> <view class="cu-bar padding-lr solid-bottom" v-if="orderDetails.payment_type != ''">
<text class="text-gray">支付方式</text>
<text>{{orderDetails.payment_type}}</text>
<text class="text-gray lf-font-32">支付方式</text>
<text class="lf-font-32 text-black1">{{orderDetails.payment_type}}</text>
</view> </view>
</view> </view>
<self-line/> <self-line/>
<view class="bg-white"> <view class="bg-white">
<view class="cu-bar padding-lr solid-bottom"> <view class="cu-bar padding-lr solid-bottom">
<text class="text-gray">优惠</text>
<text v-if="orderDetails.coupons == null">暂无优惠</text>
<text class="text-gray lf-font-32">优惠</text>
<text class="lf-font-32 text-black1" v-if="orderDetails.coupons == null">暂无优惠</text>
</view> </view>
</view> </view>
@ -65,7 +65,7 @@
<self-line/> <self-line/>
<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb"> <view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
<view> <view>
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="140" unit="px" background="#fff" foreground="#000"
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" /> pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" --> <!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view> </view>
@ -73,24 +73,24 @@
<view @tap="refreshCode()" v-if="orderDetails.state==2"> <view @tap="refreshCode()" v-if="orderDetails.state==2">
<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image> <image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
</view> </view>
<view class="text-lg">{{checkArea}}</view>
<view class="text-orange text-sm margin-left" @tap="copy('SP738644872')">复制</view>
<view class="lf-font-32 text-black1">{{checkArea}}</view>
<view class="text-orange lf-font-28 margin-left" @tap="copy(checkArea)">复制</view>
</view> </view>
<view class="margin-top-sm text-gray text-sm" v-if="orderDetails.refund_text">
<view class="margin-top-sm text-gray lf-font-28" v-if="orderDetails.refund_text">
{{orderDetails.refund_text}} {{orderDetails.refund_text}}
</view> </view>
<view class="margin-top-sm text-green text-sm" v-if="orderDetails.state == 2">
<view class="margin-top-sm text-green lf-font-32" v-if="orderDetails.state == 2">
{{orderDetails.confirm_code_text}} {{orderDetails.confirm_code_text}}
</view> </view>
</view> </view>
<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top"> <view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top">
<view class="flex align-center"> <view class="flex align-center">
<text class="text-gray text-sm">实付款</text>
<view class="text-lg text-price text-red">
<text class="text-gray lf-font-28">实付款</text>
<view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.amount || 0)}} {{Number(orderDetails.amount || 0)}}
</view> </view>
</view> </view>
<view>
<view class="lf-font-32 text-black1">
{{orderDetails.state_text.text}} {{orderDetails.state_text.text}}
</view> </view>
</view> </view>

Loading…
Cancel
Save