Browse Source

ui修改

master
Enzo 4 years ago
parent
commit
f50d88f999
  1. 8
      colorui/main.css
  2. 12
      components/me-tabs/me-tabs.vue
  3. 2
      pages/index/index.vue
  4. 4
      pages/order/apply-details.vue
  5. 2
      pages/order/apply-refund.vue
  6. 30
      pages/order/confirm-order.vue
  7. 7
      pages/order/index.vue
  8. 4
      pages/order/order-details.vue
  9. 40
      pages/order/unpay-details.vue

8
colorui/main.css

@ -504,6 +504,8 @@ radio.white.checked .uni-radio-input {
}
.solid-top::after {
left: 24upx;
width: calc(200% - 114upx);
border-top: 1upx solid rgba(0, 0, 0, 0.1);
}
@ -512,6 +514,8 @@ radio.white.checked .uni-radio-input {
}
.solid-bottom::after {
left: 30upx;
width: calc(200% - 120upx);
border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}
@ -3871,7 +3875,7 @@ scroll-view.cu-steps .cu-item {
.text-price::before {
content: "¥";
font-size: 80%;
font-size: 24rpx!important;
margin-right: 4upx;
}
@ -3904,7 +3908,7 @@ scroll-view.cu-steps .cu-item {
.text-red,
.line-red,
.lines-red {
color: #e54d42;
color: #FF0000;
}
.text-orange,

12
components/me-tabs/me-tabs.vue

@ -37,7 +37,7 @@
tabWidth: Number, // tab,,flex; ,使flex,tab,(rpx)
height: { // ,rpx
type: Number,
default: 62
default: 60
}
},
data() {
@ -137,7 +137,7 @@
box-sizing: border-box;
overflow-y: hidden;
background-color: #FE9903;
border-radius: 10px;
border-radius: 18rpx;
// box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1);
&.tabs-fixed {
@ -145,7 +145,7 @@
}
.tabs-item {
padding: 0 2px;
margin-left: 4rpx;
border-radius: 16px;
display: flex;
position: relative;
@ -174,9 +174,9 @@
// font-weight: bold;
color: black;
background-color: white;
border-radius: 10px;
height: 27px!important;
line-height: 27px!important;
border-radius: 14rpx;
height: 26px!important;
line-height: 26px!important;
}
}
}

2
pages/index/index.vue

@ -1,6 +1,6 @@
<template>
<view class="lf-row-center lf-flex-column">
<view class="ctab">
<view class="ctab" v-if="tab_list.length">
<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">

4
pages/order/apply-details.vue

@ -13,7 +13,7 @@
<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.order.number}}</text>
<view class="flex justify-between" style="margin-top: 28rpx;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="display: flex;align-items: flex-end;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
{{orderDetails.order.selling_price}}
</view>
<view>
@ -80,7 +80,7 @@
<view class="cu-self menu">
<view class="lf-font-32 text-black1">退款说明</view>
</view>
<view class="cu-self menu" style="margin-top: 20rpx;">
<view class="cu-self menu" style="margin-top: 20rpx;padding-bottom: 20rpx;border-bottom: 1px solid #F5F5F5;">
<view class="text-gray lf-font-32">{{orderDetails.comment}}</view>
</view>
</view>

2
pages/order/apply-refund.vue

@ -13,7 +13,7 @@
<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{applyDetails.order.number}}</text>
<view class="flex justify-between" style="margin-top: 44rpx;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="display: flex;align-items: flex-end;">
<view class="text-red text-price lf-font-42 lf-font-bold">
{{applyDetails.order.selling_price}}
</view>
</view>

30
pages/order/confirm-order.vue

@ -7,22 +7,22 @@
<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 :src="orderDetails.goods.cover" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold">
<view class="bref-box margin-top-xs lf-font-32 lf-font-bold" style="height: 88rpx;line-height: 44rpx;color: #222;">
{{orderDetails.goods.name}}
</view>
<view class="flex justify-between">
<text class="block margin-top-sm text-gray lf-font-28">数量</text>
<view class="flex justify-between align-center text-center">
<text class="block margin-top-sm text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量</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 text-black lf-font-32" style="width: 60rpx; height: 50rpx;background-color: #f7f7fb;" />
<text class="cuIcon-add" @tap="add"></text>
<text class="lf-iconfont lf-icon-jianshao" @tap="reduce"></text>
<input type="number" v-model="num" class="text-center margin-lr-sm radius text-black lf-font-32" style="width: 60rpx; height: 50rpx;" />
<text class="lf-iconfont lf-icon-jia1" @tap="add"></text>
</view>
</view>
<view class="flex justify-between margin-top-sm">
<view class="text-red text-price lf-font-42 lf-font-bold">
<view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 12rpx;">
{{Number(orderDetails.goods.specs[0].selling_price || 0)}}
</view>
<!-- <view>
@ -96,7 +96,8 @@
ifchoose: true,
ifCheck: true,
type: 0,
order_id: 0
order_id: 0,
ifDo: 1
}
},
computed: {
@ -114,6 +115,9 @@
this.goods_id = e.goods_id;
this.order_id = e.order_id;
this.goods_specs_id = e.goods_specs_id
if(this.goods_id && this.goods_specs_id) {
this.getConfirmOrder()
}
},
methods: {
getConfirmOrder() {
@ -126,7 +130,8 @@
this.$msg(res.msg)
}
}).catch(err => {
if(res.code == 9999) {
console.log('code',res.code)
if(res.code == 9997) {
this.ifCheck = true
}else {
this.ifCheck = false
@ -224,7 +229,10 @@
},
},
onShow() {
this.getConfirmOrder()
if(this.ifDo > 1) {
this.getConfirmOrder()
}
this.ifDo++
}
}
</script>

7
pages/order/index.vue

@ -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 lf-font-28" :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 font-400" :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" style="line-height: 40rpx;">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 </view>
@ -29,7 +29,7 @@
</view>
</view>
<view>
<view class="u-border-top flex justify-between align-center text-center">
<view class="solid-top flex justify-between align-center text-center">
<view class="text-gray lf-font-28" style="padding: 20rpx;">
{{item.created_at_text}}
</view>
@ -223,6 +223,9 @@
</script>
<style lang="scss" scoped>
.font-400 {
font-weight: 400;
}
.tag-self {
position: absolute!important;
top: 0!important;

4
pages/order/order-details.vue

@ -14,7 +14,7 @@
<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
<view class="flex justify-between" style="margin-top: 28rpx;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="display: flex;align-items: flex-end;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
{{Number(orderDetails.selling_price || 0)}}
</view>
<view>
@ -82,7 +82,7 @@
{{orderDetails.confirm_code_text}}
</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 btn-bottom">
<view class="flex align-center">
<text class="text-gray lf-font-28" style="margin-right: 20rpx;">实付款</text>
<view class="text-red text-price lf-font-42 lf-font-bold">

40
pages/order/unpay-details.vue

@ -3,24 +3,24 @@
<!-- 商品信息 -->
<block v-if="isRight(orderDetails)">
<self-line/>
<view class="bg-white padding-tb-sm">
<view class="bg-white">
<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 justify-between align-start" style="padding: 32rpx 32rpx 30rpx 32rpx;">
<image v-if="orderDetails.goods.cover" :src="orderDetails.goods.cover" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
<view class="flex-sub padding-left-sm">
<view class="bref-box margin-top-xs" v-if="orderDetails.goods.name">
<view class="bref-box text-black1 lf-font-32 lf-font-bold" style="height: 88rpx;line-height: 44rpx;" 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 text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <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="flex justify-between" style="margin-top: 28rpx;">
<view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
{{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>
<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?order_id='+orderDetails.id)">申请退款</button>
<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
</view>
</view>
</view>
@ -34,31 +34,31 @@
<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>
<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>
</skeleton>

Loading…
Cancel
Save