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

ui修改

master
Enzo 4 years ago
parent
9758ab1414
commit
f50d88f999
9 changed files with 62 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

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

@ -37,7 +37,7 @@
tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx) tabWidth: Number, // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
height: { // 高度,单位rpx height: { // 高度,单位rpx
type: Number, type: Number,
default: 62
default: 60
} }
}, },
data() { data() {
@ -137,7 +137,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow-y: hidden; overflow-y: hidden;
background-color: #FE9903; background-color: #FE9903;
border-radius: 10px;
border-radius: 18rpx;
// box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1); // box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, .1);
&.tabs-fixed { &.tabs-fixed {
@ -145,7 +145,7 @@
} }
.tabs-item { .tabs-item {
padding: 0 2px;
margin-left: 4rpx;
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;
position: relative; position: relative;
@ -174,9 +174,9 @@
// font-weight: bold; // font-weight: bold;
color: black; color: black;
background-color: white; 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
View File

@ -1,6 +1,6 @@
<template> <template>
<view class="lf-row-center lf-flex-column"> <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> <u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
</view> </view>
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id"> <view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tab.id">

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

@ -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> <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="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}} {{orderDetails.order.selling_price}}
</view> </view>
<view> <view>
@ -80,7 +80,7 @@
<view class="cu-self menu"> <view class="cu-self menu">
<view class="lf-font-32 text-black1">退款说明</view> <view class="lf-font-32 text-black1">退款说明</view>
</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 class="text-gray lf-font-32">{{orderDetails.comment}}</view>
</view> </view>
</view> </view>

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

@ -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> <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="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}} {{applyDetails.order.selling_price}}
</view> </view>
</view> </view>

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

@ -7,22 +7,22 @@
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
<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: 240rpx; height: 240rpx;border-radius: 10rpx;"></image>
<view class="flex-sub padding-left-sm"> <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}} {{orderDetails.goods.name}}
</view> </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"> <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> </view>
<view class="flex justify-between margin-top-sm"> <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)}} {{Number(orderDetails.goods.specs[0].selling_price || 0)}}
</view> </view>
<!-- <view> <!-- <view>
@ -96,7 +96,8 @@
ifchoose: true, ifchoose: true,
ifCheck: true, ifCheck: true,
type: 0, type: 0,
order_id: 0
order_id: 0,
ifDo: 1
} }
}, },
computed: { computed: {
@ -114,6 +115,9 @@
this.goods_id = e.goods_id; this.goods_id = e.goods_id;
this.order_id = e.order_id; this.order_id = e.order_id;
this.goods_specs_id = e.goods_specs_id this.goods_specs_id = e.goods_specs_id
if(this.goods_id && this.goods_specs_id) {
this.getConfirmOrder()
}
}, },
methods: { methods: {
getConfirmOrder() { getConfirmOrder() {
@ -126,7 +130,8 @@
this.$msg(res.msg) this.$msg(res.msg)
} }
}).catch(err => { }).catch(err => {
if(res.code == 9999) {
console.log('code',res.code)
if(res.code == 9997) {
this.ifCheck = true this.ifCheck = true
}else { }else {
this.ifCheck = false this.ifCheck = false
@ -224,7 +229,10 @@
}, },
}, },
onShow() { onShow() {
this.getConfirmOrder()
if(this.ifDo > 1) {
this.getConfirmOrder()
}
this.ifDo++
} }
} }
</script> </script>

7
pages/order/index.vue
View File

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

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

@ -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> <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="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)}} {{Number(orderDetails.selling_price || 0)}}
</view> </view>
<view> <view>
@ -82,7 +82,7 @@
{{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 btn-bottom">
<view class="flex align-center"> <view class="flex align-center">
<text class="text-gray lf-font-28" style="margin-right: 20rpx;">实付款</text> <text class="text-gray lf-font-28" style="margin-right: 20rpx;">实付款</text>
<view class="text-red text-price lf-font-42 lf-font-bold"> <view class="text-red text-price lf-font-42 lf-font-bold">

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

@ -3,24 +3,24 @@
<!-- 商品信息 --> <!-- 商品信息 -->
<block v-if="isRight(orderDetails)"> <block v-if="isRight(orderDetails)">
<self-line/> <self-line/>
<view class="bg-white padding-tb-sm">
<view class="bg-white">
<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true"> <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="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}} {{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 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)}} {{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')">申请退款</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> </view>
</view> </view>
@ -34,31 +34,31 @@
<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true"> <skeleton :loading="skeletonLoading" :row="10" :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>
</skeleton> </skeleton>

Write Preview
Loading…
Cancel
Save