瀏覽代碼

[首页ui][修改]:[首页ui修改砍价拼团为一条数据的ui]

tags/湖南版5.1.4
meo 6 年之前
父節點
當前提交
35506e1d9f
共有 11 個檔案被更改,包括 233 行新增50 行删除
  1. +1
    -1
      ext.json
  2. +6
    -0
      pages/main/bargain/index.js
  3. +33
    -6
      pages/main/bargain/index.wxml
  4. +75
    -20
      pages/main/bargain/index.wxss
  5. +3
    -5
      pages/main/index.js
  6. +1
    -1
      pages/main/index.wxml
  7. +1
    -2
      pages/main/index.wxss
  8. +6
    -0
      pages/main/spellGroup/index.js
  9. +32
    -7
      pages/main/spellGroup/index.wxml
  10. +58
    -8
      pages/main/spellGroup/index.wxss
  11. +17
    -0
      utils/imgurl.js

+ 1
- 1
ext.json 查看文件

@@ -4,7 +4,7 @@
"ext": {
"weappId": "wxea71200db93d756b",
"name": "富茂客官开发",
"appVersion": "C.4.2.105",
"appVersion": "C.4.2.107",
"attr": {
"configUrl": "https://ciformall.youlane.cn/C/api",
"socketUrl": "wss://mp.youlane.cn/W/ws",


+ 6
- 0
pages/main/bargain/index.js 查看文件

@@ -16,6 +16,7 @@ Component({
data: {
jianUrl: imgurl.jian.url,
barginicon: imgurl.barginicon.url,
wangmeimeibargin: imgurl.wangmeimeibargin.url,
list: [],
total:''
},
@@ -24,6 +25,11 @@ Component({
* 组件的方法列表
*/
methods: {
gotoBargainList(){
wx.navigateTo({
url: "/pages/bargain/bargain"
})
},
getList() {
let that = this;
Http.get({


+ 33
- 6
pages/main/bargain/index.wxml 查看文件

@@ -1,5 +1,5 @@
<view class="index-rushToBuy" wx:if="{{list.length>0}}">
<view wx:if="{{list.length!=0}}" class="index-rushToBuy-title">
<view class="index-rushToBuy" wx:if="{{list.length>2}}">
<view class="index-rushToBuy-title">
<image src="{{barginicon}}" class='barginiconimg' mode='widthFix'/><text class='text-red'>砍价</text>专场<text bindtap="gotomore" class='morebargin'>更多砍价></text>
</view>
<!-- 如果有两条数据以上,排版 -->
@@ -15,16 +15,43 @@
</view>
</view>
</scroll-view>
<!-- 如果只有一条数据,排版 -->
<view class="commodity" wx:for="{{list}}" wx:key="unique" wx:if="{{list.length==1}}">
<!-- 如果只有一条数据,排版1 -->
<!-- <view class="commodity" wx:for="{{list}}" wx:key="unique" wx:if="{{list.length==1}}">
<view bindtap="gotodetail" class="clearfix one-commodity" data-couponChannelId="{{item.id}}" data-couponId="{{item.couponId}}" data-targetAd="{{item.targetAd}}">
<image mode='aspectFill' lazy-load='true' class="one-commodity-img" src="{{item.coverImg}}" />
<view class="one-commodity-info fr">
<view class="commodity-info-name">{{item.title}}</view>
<view class="commodity-info-subTitle">{{item.subTitle}}</view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p">可砍至<text class='salePriceStr'>{{item.salePriceStr}}</text>元</text><text class='price'>{{item.priceStr}}元</text></view>
<view class="commodity-info-salePriceStr" style='margin-top:18rpx;'><text class="commodity-info-price-p">可砍至<text class='salePriceStr'>{{item.salePriceStr}}</text>元</text></view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p">原价<text class='price'>{{item.priceStr}}元</text></text></view>
<view class="commodity-info-price">邀请<text class='inviteNum'>{{item.pressLimitNum}}</text>人可砍至底价</view>
</view>
</view>
</view> -->
<!-- 如果只有一条数据,排版 -->
</view>
<!-- 如果只有一条数据,排版2 -->
<view class="index-rushToBuy" wx:if="{{list.length==1||list.length==2}}" style="padding-top:0;box-shadow:0 0 10px 0 rgba(211,211,211,0.50);">
<view class="commodity" wx:key="unique">
<view style='position:relative;background:#fc5b24;padding:2rpx;border-radius:16rpx;' class="clearfix one-commodity">
<view class='titlechannel fl'>
<text>砍价</text>
<image style="width:88rpx;display:block;margin:20rpx auto 0;" src='{{wangmeimeibargin}}' mode='widthFix'></image>
</view>
<view class='rightcontent clearfix fl' bindtap="gotodetail" data-couponChannelId="{{list[0].id}}" data-couponId="{{list[0].couponId}}" data-targetAd="{{list[0].targetAd}}">
<image mode='aspectFill' lazy-load='true' class="one-commodity-img" src="{{list[0].coverImg}}" style="width:264rpx;margin:4rpx 16rpx 0 4rpx;height:192rpx;" />
<view class="one-commodity-info fl" style='width:164rpx;'>
<view class="commodity-info-name">{{list[0].title}}</view>
<view class="commodity-info-salePriceStr" style='margin-top:18rpx;'><text class="commodity-info-price-p"><text class='salePriceStr'>{{list[0].salePriceStr}}</text>元</text></view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p"><text class='price'>{{list[0].priceStr}}元</text></text></view>
<view class="commodity-info-price">邀请<text class='inviteNum'>{{list[0].pressLimitNum}}</text>人可砍至底价</view>
</view>
</view>
<view class='more' bindtap='gotoBargainList'>
<text>更</text>
<text>多</text>
</view>
</view>
</view>
</view>
</view>
<!-- 如果只有一条数据,排版2 -->

+ 75
- 20
pages/main/bargain/index.wxss 查看文件

@@ -1,7 +1,7 @@
@import "../../../app.wxss";
.index-rushToBuy {
width: 690rpx;
margin: 40rpx auto;
width: 688rpx;
margin: 30rpx auto;
padding: 20rpx 0 0;
font-family: PingFangSC-Semibold;
box-shadow:0 0 10px 0 rgba(211,211,211,0.50);
@@ -25,7 +25,7 @@
margin-right: 20rpx;
color: #999999;
font-size: 24rpx;
line-height: 24rpx;
line-height: 34rpx;
font-weight: normal;
}
.listimage{
@@ -60,12 +60,12 @@
border-radius:16rpx;
}

.commodity-info {
.index-scroll-view .commodity-info {
padding:10rpx 0;
overflow: hidden;
}

.commodity-info-name {
.index-scroll-view .commodity-info-name {
width: 285rpx;
overflow: hidden;
white-space: nowrap;
@@ -76,14 +76,14 @@
color: #333333;
}

.commodity-info-time {
.index-scroll-view .commodity-info-time {
font-size: 22rpx;
color: #B4B4B4;
letter-spacing: 0.7rpx;
line-height: 42rpx;
}

.commodity-info-price-p {
.index-scroll-view .commodity-info-price-p {
font-size: 28rpx;
color: #f96563;
line-height: 30rpx;
@@ -92,7 +92,7 @@
margin-top: 10rpx;
line-height: 30rpx;
}
.commodity-info-price-o {
.index-scroll-view .commodity-info-price-o {
display: inline-block;
padding-left: 20rpx;
font-size: 24rpx;
@@ -113,6 +113,11 @@
.text-red{
color:#F12643;
}
.commodity-info-price-p {
font-size: 28rpx;
color: #f96563;
line-height: 30rpx;
}
.price{
font-size: 24rpx;
color: #999;
@@ -122,6 +127,13 @@
.one-commodity{
padding-bottom: 20rpx;
}
.one-commodity-info {
width:322rpx;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

.one-commodity-img{
width: 325rpx;
height: 200rpx;
@@ -129,17 +141,11 @@
border-radius:16rpx;
margin: 20rpx 26rpx 0 13rpx;
}

.one-commodity-info{
width: 322rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.one-commodity-info .commodity-info-name{
font-size: 34rpx;
line-height: 35rpx;
margin-top: 16rpx;
font-size: 24rpx;
line-height: 32rpx;
margin-top: 14rpx;

}
.one-commodity-info .commodity-info-subTitle{
font-size: 28rpx;
@@ -153,11 +159,12 @@
text-overflow: ellipsis;
}
.one-commodity-info .commodity-info-salePriceStr{
margin-top: 20rpx;
line-height: 30rpx;
margin-top: 6rpx;
}
.one-commodity-info .commodity-info-price{
margin-top: 0;
font-size: 24rpx;
font-size: 18rpx;
line-height: 26rpx;
margin-left: 0;
text-decoration: none;
@@ -168,4 +175,52 @@
}
.one-commodity-info .salePriceStr{
font-weight: bold;
font-size:66rpx;
line-height: 66rpx;
color: #fc5b24;
}
.titlechannel{
text-align: center;
width: 171rpx;
height: 201rpx;
background: #fc5b24;
border-radius:16rpx;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.titlechannel text{
color:#fff;
font-size:46rpx;
margin-top:13rpx;
font-weight:bold;
display:inline-block;
}
.rightcontent{
position: relative;
width: 463rpx;
height: 201rpx;
background: #fff;
border-radius: 16rpx;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.more{
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
background: #fc5b24;
width: 55rpx;
border-bottom-right-radius:16rpx;
border-top-right-radius:16rpx;
}
.more text{
color:#fff;
font-size: 26rpx;
display: block;
text-align: center;
}
.more text:nth-of-type(1){
margin-top: 68rpx;
}

+ 3
- 5
pages/main/index.js 查看文件

@@ -127,14 +127,11 @@ Page({
url: '/pages/discountCardList/discountCardList',
})
},
//跳往个人中心
//跳往积分商城
gotouser:function(){
wx.navigateTo({
url: '/pages/integralmall/integraHistory/index',
url: '/pages/integralmall/index',
})
// wx.switchTab({
// url: '/pages/user/index',
// })
},
//跳往砍价专场
gobargain: function () {
@@ -316,6 +313,7 @@ Page({
levelName: res.data.levelName,
upgradePercent: res.data.upgradePercent,
upgradeScore: res.data.upgradeScore,
credit: res.data.credit,
score: res.data.score
})
if (res.data.nickName) {


+ 1
- 1
pages/main/index.wxml 查看文件

@@ -21,7 +21,7 @@
<view class='fl integral' bindtap='gotouser'>
<view class='clearfix'>
<text class='jifen fl'>积分</text>
<text class='jifenNumber fl'>5000</text>
<text class='jifenNumber fl'>{{credit}}</text>
</view>
<image src="{{duihuan}}" class='duihuanimg' mode='widthFix'></image>
</view>


+ 1
- 2
pages/main/index.wxss 查看文件

@@ -53,7 +53,7 @@ page {

.userinfo{
position:relative;
margin: 40rpx auto 35rpx;
margin: 30rpx auto 0;
width: 690rpx;
padding: 20rpx 0;
height: 84rpx;
@@ -264,7 +264,6 @@ height:100%;
.product{
height: 135rpx;
padding: 0 30rpx;
margin-bottom: 30rpx;
}
.product image{
width:690rpx;


+ 6
- 0
pages/main/spellGroup/index.js 查看文件

@@ -16,6 +16,7 @@ Component({
data: {
jianUrl: imgurl.jian.url,
pintuan: imgurl.pintuan.url,
wangmeimeipintuan: imgurl.wangmeimeipintuan.url,
list: [],
total:''
},
@@ -29,6 +30,11 @@ Component({
url: "/pages/spellGroup/spellGroup"
});
},
gotospellGroupList(){
wx.navigateTo({
url: "/pages/spellGroup/spellGroup"
})
},
gotodetail: function(e) {
wx.navigateTo({
url: `/pages/spellGroup/mySpellGroup/index?couponChannelId=${


+ 32
- 7
pages/main/spellGroup/index.wxml 查看文件

@@ -1,8 +1,7 @@
<view class="index-rushToBuy" wx:if="{{list.length>0}}">
<view wx:if="{{list.length!=0}}" class="index-rushToBuy-title">
<view class="index-rushToBuy" wx:if="{{list.length>2}}">
<view class="index-rushToBuy-title">
<image src="{{pintuan}}" class='barginiconimg' mode='widthFix'/><text class='text-red'>拼团</text>专场<text bindtap="gotomore" class='morebargin'>更多拼团></text>
</view>
<!-- 如果有两条数据以上,排版 -->
<scroll-view scroll-x class="index-scroll-view" wx:if="{{list.length>1}}">
<view class="commodity" wx:for="{{list}}" wx:key="unique">
<view bindtap="gotodetail" data-couponChannelId="{{item.id}}" data-couponId="{{item.couponId}}" data-targetAd="{{item.targetAd}}">
@@ -14,16 +13,42 @@
</view>
</view>
</scroll-view>
<!-- 如果只有一条数据,排版 -->
<view class="commodity" wx:for="{{list}}" wx:key="unique" wx:if="{{list.length==1}}">
<!-- 如果只有一条数据,排版1 -->
<!-- <view class="commodity" wx:for="{{list}}" wx:key="unique" wx:if="{{list.length==1}}">
<view bindtap="gotodetail" class="clearfix one-commodity" data-couponChannelId="{{item.id}}" data-couponId="{{item.couponId}}" data-targetAd="{{item.targetAd}}">
<image mode='aspectFill' lazy-load='true' class="one-commodity-img" src="{{item.coverImg}}" />
<view class="one-commodity-info fr">
<view class="commodity-info-name">{{item.title}}</view>
<view class="commodity-info-subTitle">{{item.subTitle}}</view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p">拼团价<text class='salePriceStr'>{{item.salePriceStr}}</text>元</text><text class='price'>{{item.priceStr}}元</text></view>
<view class="commodity-info-salePriceStr" style='margin-top:18rpx;'><text class="commodity-info-price-p">拼团价<text class='salePriceStr'>{{item.salePriceStr}}</text>元</text></view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p">原价<text class='price'>{{item.priceStr}}元</text></text></view>
<view class="commodity-info-price">邀请<text class='inviteNum'>{{item.pressLimitNum}}</text>人可拼团成功</view>
</view>
</view>
</view> -->
</view>
<!-- 如果只有一条数据,排版2 -->
<view class="index-rushToBuy" wx:if="{{list.length==1||list.length==2}}" style="padding-top:0;box-shadow:0 0 10px 0 rgba(211,211,211,0.50);">
<view class="commodity" wx:key="unique">
<view style='position:relative;background:#fc5b24;padding:2rpx;border-radius:16rpx;' class="clearfix one-commodity">
<view class='titlechannel fl'>
<text>拼团</text>
<image style="width:88rpx;display:block;margin:20rpx auto 0;" src='{{wangmeimeipintuan}}' mode='widthFix'></image>
</view>
<view class='rightcontent clearfix fl' bindtap="gotodetail" data-couponChannelId="{{list[0].id}}" data-couponId="{{list[0].couponId}}" data-targetAd="{{list[0].targetAd}}">
<image mode='aspectFill' lazy-load='true' class="one-commodity-img" src="{{list[0].coverImg}}" style="width:264rpx;margin:4rpx 16rpx 0 4rpx;height:192rpx;" />
<view class="one-commodity-info fl" style='width:164rpx;'>
<view class="commodity-info-name">{{list[0].title}}</view>
<view class="commodity-info-salePriceStr" style='margin-top:18rpx;'><text class="commodity-info-price-p"><text class='salePriceStr'>{{list[0].salePriceStr}}</text>元</text></view>
<view class="commodity-info-salePriceStr"><text class="commodity-info-price-p"><text class='price'>{{list[0].priceStr}}元</text></text></view>
<view class="commodity-info-price"><text class='inviteNum'>邀请{{list[0].pressLimitNum}}</text>人可成团</view>
</view>
</view>
<view class='more' bindtap='gotospellGroupList'>
<text>更</text>
<text>多</text>
</view>
</view>
</view>
</view>
</view>
<!-- 如果只有一条数据,排版2 -->

+ 58
- 8
pages/main/spellGroup/index.wxss 查看文件

@@ -1,7 +1,7 @@
@import "../../../app.wxss";
.index-rushToBuy {
width: 690rpx;
margin: 40rpx auto;
width: 688rpx;
margin: 30rpx auto;
padding: 20rpx 0 0;
font-family: PingFangSC-Semibold;
box-shadow:0 0 10px 0 rgba(211,211,211,0.50);
@@ -25,7 +25,7 @@
margin-right: 20rpx;
color: #999999;
font-size: 24rpx;
line-height: 24rpx;
line-height: 34rpx;
font-weight: normal;
}
.listimage{
@@ -142,9 +142,10 @@
margin: 20rpx 26rpx 0 13rpx;
}
.one-commodity-info .commodity-info-name{
font-size: 34rpx;
line-height: 35rpx;
margin-top: 16rpx;
font-size: 24rpx;
line-height: 32rpx;
margin-top: 14rpx;

}
.one-commodity-info .commodity-info-subTitle{
font-size: 28rpx;
@@ -158,11 +159,12 @@
text-overflow: ellipsis;
}
.one-commodity-info .commodity-info-salePriceStr{
margin-top: 20rpx;
line-height: 30rpx;
margin-top: 6rpx;
}
.one-commodity-info .commodity-info-price{
margin-top: 0;
font-size: 24rpx;
font-size: 18rpx;
line-height: 26rpx;
margin-left: 0;
text-decoration: none;
@@ -173,4 +175,52 @@
}
.one-commodity-info .salePriceStr{
font-weight: bold;
font-size:66rpx;
line-height: 66rpx;
color: #fc5b24;
}
.titlechannel{
text-align: center;
width: 171rpx;
height: 201rpx;
background: #fc5b24;
border-radius:16rpx;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.titlechannel text{
color:#fff;
font-size:46rpx;
margin-top:13rpx;
font-weight:bold;
display:inline-block;
}
.rightcontent{
position: relative;
width: 463rpx;
height: 201rpx;
background: #fff;
border-radius: 16rpx;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.more{
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
background: #fc5b24;
width: 55rpx;
border-bottom-right-radius:16rpx;
border-top-right-radius:16rpx;
}
.more text{
color:#fff;
font-size: 26rpx;
display: block;
text-align: center;
}
.more text:nth-of-type(1){
margin-top: 68rpx;
}

+ 17
- 0
utils/imgurl.js 查看文件

@@ -545,4 +545,21 @@ module.exports = {
'url': baseUrl + 'lqcduihuan.png',
'name': '兑换小图标'
},
'wangmeimeibargin':{
'url': baseUrl + 'wangmeimeibargin.jpg',
'name': '砍价专场的图标'
},
'wangmeimeipintuan': {
'url': baseUrl + 'wangmeimeipintuan.png',
'name': '拼团专场的图标'
},
'wangmeimeijiantou': {
'url': baseUrl + 'wangmeimeijiantou.png',
'name': '专场的更多图标'
},
'wangmeimeiarrow01': {
'url': baseUrl + 'wangmeimeiarrow01.png',
'name': '专场的更多图标'
}
}

Loading…
取消
儲存