Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式修改优化

master
Enzo 4 years ago
parent
1244dc5a59
commit
36f5dc64be
7 changed files with 100 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 4
      pages/order/index.vue
  7. 48
      pages/order/order-details.vue

13
colorui/main.css
View File

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

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

@ -5,7 +5,7 @@
:scroll-animation-duration="300">
<view class="tabs-item" :class="{'tabs-flex':!isScroll, 'tabs-scroll':isScroll}">
<!-- 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)">
{{getTabName(tab)}}
</view>

40
pages/order/apply-details.vue
View File

@ -8,17 +8,17 @@
<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>
<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}}
</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="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{orderDetails.order.selling_price}}
</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>
@ -30,20 +30,20 @@
<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">
<text class="text-gray lf-font-32">订单金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.order.amount}}
</view>
</view>
<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>
<text>{{orderDetails.refund_rate}}%</text>
<text class="lf-font-32 text-black">{{orderDetails.refund_rate}}%</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">
<text class="text-gray lf-font-32">扣费金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.refund_rate_amount}}
</view>
</view>
@ -54,16 +54,16 @@
<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">
<text class="text-gray lf-font-32">可退金额</text>
<view class="text-price lf-font-32 text-black">
{{orderDetails.refund_amount}}
</view>
</view>
<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>
<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>
@ -73,17 +73,17 @@
<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">
{{checkArea}}
<view class="text-gray lf-font-28">
由于产品的特殊性，在申请的过程中，供应商会向您收取部分费用。如有疑问可参与产品的<text class="text-orange">《{{checkArea}}》</text>或咨询客服
</view>
</view>
</view>
<view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">退款说明</view>
<view class="lf-font-32 text-black1">退款说明</view>
</view>
<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 class="cu-form-group solid-bottom">
@ -128,7 +128,7 @@
this.$http(this.API.API_APPLYPAGE_DETAILS, {order_id: this.orderId}).then(res => {
if(res.code == 0) {
this.orderDetails = res.data.refund
this.checkArea = res.data.agreement.tips
this.checkArea = res.data.agreement.title
this.images = res.data.refund.images
this.skeletonLoading = false
}

53
pages/order/apply-refund.vue
View File

@ -8,13 +8,13 @@
<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>
<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}}
</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="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{applyDetails.order.selling_price}}
</view>
</view>
@ -28,20 +28,20 @@
<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">
<text class="text-gray lf-font-32">订单金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.amount}}
</view>
</view>
<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>
<text>{{applyDetails.order.refund_rate}}%</text>
<text class="lf-font-32 text-black">{{applyDetails.order.refund_rate}}%</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">
<text class="text-gray lf-font-32">扣费金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.refund_rate_amount}}
</view>
</view>
@ -53,38 +53,39 @@
<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">
<text class="text-gray lf-font-32">可退金额</text>
<view class="text-price lf-font-32 text-black">
{{applyDetails.order.refund_amount}}
</view>
</view>
<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>
<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 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 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>
</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">
{{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 class="padding bg-white">
<!-- <view class="padding bg-white">
<view class="cu-self menu">
<view class="text-df text-bold">请上传退款凭证</view>
</view>
<view class="lf-font-32 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" v-for="(item,index) in img_list" :key="index" @tap="showImg(item)" :data-url="img_list[index]">

25
pages/order/confirm-order.vue
View File

@ -9,20 +9,20 @@
<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>
<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}}
</view>
<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">
<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>
</view>
</view>
<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)}}
</view>
<!-- <view>
@ -40,8 +40,8 @@
<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>
<text class="text-gray lf-font-32">优惠</text>
<text class="lf-font-32 text-black1">暂无优惠</text>
</view>
</view>
</skeleton>
@ -49,25 +49,26 @@
<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">
<view class="padding flex justify-around align-center bg-gray1" v-if="orderDetails.agreement.title">
<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 class="lf-font-24 text-gray">
请认真阅读并同意<text>《{{orderDetails.agreement.title}}》</text>，在小程序下单购买即表示您已默认同意<text>《{{orderDetails.agreement.title}}》</text>的所有条款。
</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">
<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)}}
</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>
<text class="lf-font-32 text-white">{{ loading ? '支付中...' : '下单付款' }}</text>
</button>
</view>
</view>

4
pages/order/index.vue
View File

@ -10,7 +10,7 @@
<view class="lf-row-between">
<view class="left" style="position: relative;">
<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 class="right">
<view class="lf-line-2 title">{{item.goods.name}}</view>
@ -30,7 +30,7 @@
</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">
<view class="padding-top text-gray lf-font-28">
{{item.created_at_text}}
</view>
<view class="text-orange padding-top" v-if="item.state==1">

48
pages/order/order-details.vue
View File

@ -9,18 +9,18 @@
<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">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold" 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>
<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="text-red text-price text-lg">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{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?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>
@ -33,31 +33,31 @@
<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>
<text class="text-gray lf-font-32">订单编号</text>
<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 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 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 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>
<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>
<text class="text-gray lf-font-32">优惠</text>
<text class="lf-font-32 text-black1" v-if="orderDetails.coupons == null">暂无优惠</text>
</view>
</view>
@ -65,7 +65,7 @@
<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"
<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000"
pdground="#000" :onval="true" :loadMake="true" />
<!-- :icon="require('@/static/images/system/user-default.jpg')" -->
</view>
@ -73,24 +73,24 @@
<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>
</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 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}}
</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}}
</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">
<text class="text-gray lf-font-28">实付款：</text>
<view class="text-red text-price lf-font-42 lf-font-bold">
{{Number(orderDetails.amount || 0)}}
</view>
</view>
<view>
<view class="lf-font-32 text-black1">
{{orderDetails.state_text.text}}
</view>
</view>

Write Preview
Loading…
Cancel
Save