TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[更新页面修改部分代码-商城首页企业工具我的资产]

Browse Source
This commit is contained in:
zhangmanman
2021-09-16 08:54:48 +08:00
parent 4c0308edbf
commit b12465f611
45 changed files with 8592 additions and 8635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
pages/equity/index.vue
View File

@@ -16,9 +16,25 @@
class="item-cover"
:src="item.cover"
mode="aspectFill"
/>
<view class="item-title nowrap">{{item.name || '-'}}</view>
<view class="item-btn" @click="onOpenWechat(item)">进店</view>
/>
<view class="item-vip">
<view class="item-vip-text">{{item.level.name}}</view>
<view class="item-vip-tips">企业</view>
</view>
<view class="item-title nowrap">{{item.name || '-'}}</view>
<view class="item-trade nowrap">行业：{{item.industry.title}}</view>
<view class="item-bar">
<view class="item-bar-color">
<view class="item-bar-strip" :style="{width: item.process + '%'}">
<text class="item-bar-per">{{item.process}}%</text>
</view>
</view>
<image class="item-bar-strip-img" src="../../static/icons/equity_arrow_up.png" mode="aspectFill"></image>
</view>
<view class="item-url">
<view class="item-credit"><image class="item-credit-img" src="../../static/icons/equity_arrow_icon.png" mode="aspectFill"></image>信用值 {{item.integrity}}</view>
<view class="item-btn" @click="onOpenWechat(item)">进店<image src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image></view>
</view>
</view>
</block>
</scroll-view>
@@ -30,15 +46,29 @@
</view>
<swiper class="hot-swiper">
<swiper-item v-for="(item, index) in hotBus" :key="index">
<view class="hot-box">
<view class="hot-box" @click="onOpenWechat(item)">
<image
class="cover"
:src="item.cover"
mode="aspectFill"
/>
/>
<view class="hot-vip">{{item.level.name}}</view>
<view class="hot-content">
<view class="hot-title nowrap">{{item.name || '-'}}</view>
<view class="credibility">
<view class="hot-title nowrap">{{item.name || '-'}}</view>
<view class="hot-credit">信誉值 {{item.integrity}}</view>
<view class="hot-trade nowrap">所属行业：{{item.industry.title}}</view>
<view class="hot-warrant">
<view class="hot-warrant-text nowrap">
权证数量：{{item.goodsCount}}
</view>
<view class="hot-bar">
<view class="hot-bar-color">
<view class="hot-bar-strip" :style="{width: item.process + '%'}"></view>
</view>
<view class="hot-bar-per">{{item.process}}</view>
</view>
</view>
<!-- <view class="credibility">
<uni-rate
:readonly="true"
color="#ddd"
@@ -47,9 +77,13 @@
:size="14"
/>
</view>
<view class="trading nowrap">累计交易{{item.orders || 0}}次</view>
</view>
<view class="btn" @click="onOpenWechat(item)">进店</view>
<view class="trading nowrap">累计交易次</view> -->
</view>
<view class="hot-tool">
<view class="hot-deal">
交易量<text class="hot-deal-number">{{item.saleCount || 0}}次</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
@@ -76,7 +110,11 @@
<view class="classify-item" v-for="(item, index) in classify" :key="index" @click="onClassify">
<image class="cover" :src="item.cover" mode="aspectFill"></image>
<view class="title">{{item.name}}</view>
</view>
</view>
<view class="classify-item">
<image class="cover" src="../../static/icons/equity_nav.png" mode="aspectFill"></image>
<view class="title">查看全部</view>
</view>
</view>
</view>
<!-- 每日推荐 -->
@@ -109,11 +147,23 @@
<view class="coupons" v-if="coupons.length > 0">
<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
<view class="content">
<view class="coupons-title">{{item.title}}</view>
<view class="coupons-title">
<view class="coupons-title-tips" v-if="item.type">
<!-- value == 1服务券 value == 2代金券 value == 3提货券 -->
<image v-if="item.type.value == '1'" class="coupons-title-icon" src="../../static/icons/equity_coupons_01.png" mode="aspectFill"></image>
<image v-else-if="item.type.value == '2'" class="coupons-title-icon" src="../../static/icons/equity_coupons_02.png" mode="aspectFill"></image>
<image v-else-if="item.type.value == '3'" class="coupons-title-icon" src="../../static/icons/equity_coupons_03.png" mode="aspectFill"></image>
</view>
<view class="coupons-title-name">
{{item.title}}
</view>
</view>
<view class="sun-text">{{item.title}}</view>
<view class="btn">立即领取</view>
</view>
<image class="logo" :src="item.cover" mode="aspectFill"></image>
</view>
<view class="logo">
<image class="logo-img" :src="item.cover" mode="aspectFill"></image>
</view>
<view class="btn">立即领取</view>
</view>
</view>
<!-- 优选商品 -->
@@ -189,10 +239,10 @@
},
// 企业广场
getCompanies(){
companies().then(res=>{
companies().then(res=>{
this.recommendBus = res.positions
this.hotBus = res.hot
this.industryBus = [{title: '全部', industry_id: ''}, ...res.industries]
this.industryBus = [{title: '全部', industry_id: ''}, ...res.industries]
this.getCompaniesList()
}).catch(err => {
uni.showToast({
@@ -217,8 +267,9 @@
},
// 易货首页
getMall(){
mall().then(res => {
this.classify = res.categories
mall().then(res => {
console.log(res.coupons)
this.classify = res.categories.slice(0, 9)
this.banners = res.banners
this.coupons = res.coupons
this.position = res.positions
@@ -404,19 +455,37 @@
border-radius: $radius/2;
padding: $padding - 10;
box-sizing: border-box;
display: flex;
// display: flex;
align-items: center;
justify-content: space-between;
.content{
width: calc(100% - 118rpx);
width: 100%;
.coupons-title{
font-size: $title-size-lg;
@extend .nowrap;
font-size: $title-size-lg;
font-weight: 600;
margin-bottom: 10rpx;
line-height: 54rpx;
display: flex;
@extend .nowrap;
.coupons-title-tips {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
overflow: hidden;
background-color: #f5f5f5;
text-align: center;
margin-right: 10rpx;
.coupons-title-icon {
width: 28rpx;
height: 28rpx;
margin: 11rpx;
}
}
}
.sun-text{
font-size: $title-size-sm;
color: $text-gray;
margin-bottom: $margin/2;
line-height: 54rpx;
@extend .nowrap;
}
.btn{
@@ -431,11 +500,29 @@
}
}
.logo{
width: 98rpx;
height: 98rpx;
border-radius: 50%;
border:solid 1rpx $border-color;
}
width: 100%;
padding-top: 70%;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.logo-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.btn {
background-color: #faf2dd;
border-radius: 8rpx;
margin-top: 20rpx;
color: #fd5f3c;
text-align: center;
line-height: 64rpx;
font-size: 28rpx;
font-weight: 600;
}
}
}
// 行业分类
@@ -460,7 +547,7 @@
// 热易商家
.hot-swiper{
margin: 0 $margin $margin $margin;
height: 198rpx;
height: 240rpx;
.hot-box{
position: absolute;
height: 100%;
@@ -468,7 +555,41 @@
border-radius: ($radius/2);
background: white;
padding: $padding;
box-sizing: border-box;
box-sizing: border-box;
.hot-vip {
position: absolute;
top: $padding;
left: $padding;
background-color: #191919;
color: #f3c8a8;
font-size: 24rpx;
line-height: 32rpx;
padding: 0 8rpx;
border-radius: 6rpx 6rpx 6rpx 0;
text-transform: uppercase;
}
.hot-tool {
position: absolute;
top: 30rpx;
right: $padding;;
.hot-deal {
width: 120rpx;
height: 120rpx;
text-align: center;
box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
background: linear-gradient(to bottom, #e1293f, #f85d31);
color: #FFFFFF;
font-size: 26rpx;
border-radius: 50%;
padding-top: 25rpx;
box-sizing: border-box;
font-size: 24rpx;
.hot-deal-number {
font-size: 28rpx;
font-weight: 600;
display: block;
}
}
}
.cover{
position: absolute;
@@ -478,14 +599,81 @@
height: calc(198rpx - #{$padding * 2});
}
.hot-content{
padding-right: calc(100rpx + #{$padding});
padding-left: calc(198rpx - #{$padding});
.hot-title{
font-weight: bold;
font-size: $title-size-lg;
height: 40rpx;
padding-bottom: 10rpx;
}
line-height: 40rpx;
height: 40rpx;
width: 60%;
}
.hot-credit {
font-size: 24rpx;
display: inline-block;
font-weight: normal;
color: #ec652f;
border: 2rpx solid #ec652f;
line-height: 36rpx;
border-radius: 6rpx;
padding: 0 6rpx;
margin-top: 10rpx;
}
.hot-trade,
.hot-warrant{
font-size: 24rpx;
color: #999;
padding-top: 10rpx;
}
.hot-trade {
width: 60%;
}
.hot-warrant {
display: flex;
.hot-warrant-text {
width: 50%;
}
.hot-bar {
display: flex;
width: 50%;
margin-top: 4rpx;
.hot-bar-color{
background: #ebebeb;
border-left: 2rpx solid transparent;
border-right: 2rpx solid transparent;
width: calc(100% - 50rpx);
border-radius: 60rpx;
margin: 6rpx 10rpx 0 0;
height: 18rpx;
.hot-bar-strip {
background-color: #ff8562;
border: 1px solid #ff8562;
border-radius: 10px;
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
background-size: 3em 3em;
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
height: 14rpx;
border-radius: 60rpx;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 100%;
background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
border-radius: 20rpx;
}
}
}
.hot-bar-per {
font-size: 20rpx;
color: rgba(0, 0, 0, 0.8);
transform: scale(.8);
}
}
}
.credibility{
height: calc(108rpx - #{$padding * 2});
@@ -514,13 +702,14 @@
}
// 推荐商家
.recommended{
.item-box{
white-space:nowrap;
.item-box{
position: relative;
display: inline-block;
width: 240rpx;
background: white;
width: 370rpx;
margin-left: $margin;
padding: ($padding + $padding/2) $padding;
border-radius: ($radius/2);
padding: ($padding + $padding/2) $padding - 10;
box-sizing: border-box;
text-align: center;
@@ -528,24 +717,137 @@
margin-right: $margin;
}
.item-cover{
width: 88rpx;
height: 88rpx;
background: #eee;
width: 120rpx;
height: 120rpx;
vertical-align: top;
}
border-radius: $radius / 2;
}
.item-vip {
position: absolute;
left: 0;;
top: 20rpx;
background-color: #f3ceb3;
font-size: 24rpx;
line-height: 38rpx;
border-radius: 0 6rpx 6rpx 0;
display: flex;
.item-vip-text {
background-color: #191919;
color: #f3c8a8;
padding: 0 6rpx;
text-transform: uppercase;
}
.item-vip-tips {
padding: 0 6rpx;
}
}
font-weight: bold;
font-size: $title-size-lg;
padding: ($padding/2) 0;
}
.item-btn{
font-size: $title-size-m;
background-color: $text-price;
color: white;
line-height: 50rpx;
display: inline-block;
width: 100rpx;
}
.item-title{
margin: 20rpx 0 10rpx;
}
.item-trade {
font-size: 28rpx;
color: #999999;
}
.item-bar {
display: flex;
margin: 10rpx 0 20rpx;
.item-bar-color {
background: #ebebeb;
border-left: 2rpx solid transparent;
border-right: 2rpx solid transparent;
width: calc(100% - 50rpx);
border-radius: 60rpx;
margin: 4rpx 10rpx 0 0;
.item-bar-strip {
background-color: #f3c8a8;
border: 2rpx solid #f3c8a8;
border-radius: 20rpx;
box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
background-size: 3em 3em;
background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ee883d 0.9em, #ee883d 2.1em, transparent 2.1em, transparent 2.9em, #ee883d 3.1em);
animation: warning-animation 1.4s infinite linear;
height: 14rpx;
border-radius: 60rpx;
position: relative;
.item-bar-per {
position: absolute;
right: 0;
top: -6rpx;
height: 100%;
font-size: 20rpx;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
transform: scale(.8);
}
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
height: 100%;
background-image: linear-gradient(to bottom, #ee883d, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #ee883d);
border-radius: 10px;
}
@keyframes warning-animation {
0% {
background-position: 0 0;
}
100% {
background-position: 3em 0;
}
}
}
}
.item-bar-strip-img {
width: 24rpx;
height: 24rpx;
animation: bounce-up 1.5s linear infinite;
}
@keyframes bounce-up {
25% {transform: translateY(2rpx);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(-2rpx);}
}
}
.item-url {
background: linear-gradient(to right, #e1293f, #f85d31);
color: #FFFFFF;
border-radius: 10rpx;
display: flex;
line-height: 52rpx;
padding: 10rpx;
box-sizing: border-box;
font-size: 28rpx;
.item-credit {
font-size: 24rpx;
border-radius: 6rpx;
background-color: #FFFFFF;
color: #e1293f;
flex: 1;
display: flex;
text-align: left;
padding: 0 10rpx;
box-sizing: border-box;
.item-credit-img {
width: 28rpx;
height: 28rpx;
margin: 12rpx 8rpx 0 0;
}
}
.item-btn{
padding-left: 20rpx;
box-sizing: border-box;
display: flex;
image {
width: 32rpx;
height: 32rpx;
margin-top: 12rpx;
}
}
}
}
}