Browse Source

结算页地址、优惠券弹框和选中显示;砍价转发打开空白处理

home_hotList
whyneedname 2 years ago
parent
commit
62fe7dcc26
  1. 63
      assets/css/style.css
  2. 68
      assets/css/style.less
  3. 64
      components/CouponListWindow.vue
  4. 9
      pages/activity/DargainDetails/index.vue
  5. 5
      pages/activity/DargainGoodsDetails/index.vue
  6. 39
      pages/order/OrderSubmission/index.vue

63
assets/css/style.css

@ -424,8 +424,8 @@ page {
bottom: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
border-radius: 16rpx 16rpx 0 0;
background-color: #FFFFFF;
border-radius: 28rpx 28rpx 0 0;
z-index: 111;
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
@ -445,26 +445,25 @@ page {
-o-transform: translate3d(0, 0, 0);
}
.coupon-list-window .title {
height: 124rpx;
height: 104rpx;
width: 100%;
text-align: center;
line-height: 124rpx;
line-height: 104rpx;
font-size: 32rpx;
font-weight: bold;
position: relative;
color: #333;
color: #3A3A3C;
}
.coupon-list-window .title .iconfont {
position: absolute;
right: 30rpx;
right: 32rpx;
top: 50%;
transform: translateY(-50%);
font-size: 35rpx;
color: #8a8a8a;
color: #999999;
font-weight: normal;
}
.coupon-list-window .coupon-list {
margin: 0 0 50rpx 0;
height: 550rpx;
overflow: auto;
}
@ -558,7 +557,7 @@ page {
height: 54rpx;
background: #E3E3E3;
border-radius: 8rpx;
padding: 0 14rpx;
padding: 0 32rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
@ -782,16 +781,17 @@ page {
font-size: 32rpx;
font-weight: bold;
text-align: center;
height: 123rpx;
line-height: 123rpx;
height: 104rpx;
line-height: 104rpx;
position: relative;
color: #333;
color: #3A3A3C;
}
.address-window .title .iconfont {
position: absolute;
right: 30rpx;
color: #8a8a8a;
font-size: 35rpx;
right: 32rpx;
color: #999999;
font-weight: normal;
font-size: 40rpx;
}
.address-window .list {
max-height: 600rpx;
@ -799,16 +799,16 @@ page {
overflow-x: hidden;
}
.address-window .list .item {
margin-left: 30rpx;
padding-right: 30rpx;
margin-left: 32rpx;
padding-right: 32rpx;
border-bottom: 1px solid #eee;
height: 129rpx;
font-size: 25rpx;
color: #333;
font-size: 26rpx;
color: #3A3A3C;
}
.address-window .list .item .iconfont {
font-size: 37rpx;
color: #2c2c2c;
color: #3A3A3C;
}
.address-window .list .item .iconfont.icon-complete {
font-size: 30rpx;
@ -818,7 +818,7 @@ page {
width: 560rpx;
}
.address-window .list .item .addressTxt .name {
font-size: 28rpx;
font-size: 24rpx;
font-weight: bold;
color: #282828;
margin-bottom: 4rpx;
@ -827,15 +827,15 @@ page {
margin-left: 18rpx;
}
.address-window .addressBnt {
font-size: 30rpx;
font-size: 26rpx;
font-weight: bold;
color: #fff;
width: 690rpx;
height: 86rpx;
border-radius: 43rpx;
width: 686rpx;
height: 70rpx;
border-radius: 16rpx;
text-align: center;
line-height: 86rpx;
margin: 85rpx auto;
line-height: 70rpx;
margin: 60rpx auto 70rpx;
}
.address-window .pictrue {
width: 414rpx;
@ -1639,13 +1639,12 @@ page {
padding: 12rpx 16rpx 12rpx 12rpx;
}
.order-submission .address .addressCon .name {
font-size: 30rpx;
color: #282828;
font-weight: bold;
margin-bottom: 10rpx;
font-size: 24rpx;
color: #3A3A3C;
line-height: 32rpx;
}
.order-submission .address .addressCon .name .phone {
margin-left: 50rpx;
margin-left: 20rpx;
}
.order-submission .address .addressCon .default {
margin-right: 12rpx;

68
assets/css/style.less

@ -662,8 +662,8 @@ page {
bottom: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
border-radius: 0.16 * 100rpx 0.16 * 100rpx 0 0;
background-color: #FFFFFF;
border-radius: 28rpx 28rpx 0 0;
z-index: 111;
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
@ -685,28 +685,31 @@ page {
}
.coupon-list-window .title {
height: 1.24 * 100rpx;
height: 104rpx;
// height: 1.24 * 100rpx;
width: 100%;
text-align: center;
line-height: 1.24 * 100rpx;
line-height: 104rpx;
// line-height: 1.24 * 100rpx;
font-size: 0.32 * 100rpx;
font-weight: bold;
position: relative;
color: #333;
color: #3A3A3C;
}
.coupon-list-window .title .iconfont {
position: absolute;
right: 0.3 * 100rpx;
right: 32rpx;
// right: 0.3 * 100rpx;
top: 50%;
transform: translateY(-50%);
font-size: 0.35 * 100rpx;
color: #8a8a8a;
color: #999999;
font-weight: normal;
}
.coupon-list-window .coupon-list {
margin: 0 0 0.5 * 100rpx 0;
// margin: 0 0 0.5 * 100rpx 0;
height: 5.5 * 100rpx;
overflow: auto;
}
@ -836,7 +839,7 @@ page {
height: 54rpx;
background: #E3E3E3;
border-radius: 8rpx;
padding: 0 14rpx;
padding: 0 32rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
@ -1129,17 +1132,18 @@ page {
font-size: 0.32 * 100rpx;
font-weight: bold;
text-align: center;
height: 1.23 * 100rpx;
line-height: 1.23 * 100rpx;
height: 104rpx;
line-height: 104rpx;
position: relative;
color: #333;
color: #3A3A3C;
}
.address-window .title .iconfont {
position: absolute;
right: 0.3 * 100rpx;
color: #8a8a8a;
font-size: 0.35 * 100rpx;
right: 32rpx;
color: #999999;
font-weight: normal;
font-size: 40rpx;
}
.address-window .list {
@ -1149,17 +1153,17 @@ page {
}
.address-window .list .item {
margin-left: 0.3 * 100rpx;
padding-right: 0.3 * 100rpx;
margin-left: 32rpx;
padding-right: 32rpx;
border-bottom: 1px solid #eee;
height: 1.29 * 100rpx;
font-size: 0.25 * 100rpx;
color: #333;
font-size: 26rpx;
color: #3A3A3C;
}
.address-window .list .item .iconfont {
font-size: 0.37 * 100rpx;
color: #2c2c2c;
color: #3A3A3C;
}
.address-window .list .item .iconfont.icon-complete {
@ -1172,7 +1176,7 @@ page {
}
.address-window .list .item .addressTxt .name {
font-size: 0.28 * 100rpx;
font-size: 24rpx;
font-weight: bold;
color: #282828;
margin-bottom: 0.04 * 100rpx;
@ -1183,15 +1187,15 @@ page {
}
.address-window .addressBnt {
font-size: 0.3 * 100rpx;
font-size: 26rpx;
font-weight: bold;
color: #fff;
width: 6.9 * 100rpx;
height: 0.86 * 100rpx;
border-radius: 0.43 * 100rpx;
width: 686rpx;
height: 70rpx;
border-radius: 16rpx;
text-align: center;
line-height: 0.86 * 100rpx;
margin: 0.85 * 100rpx auto;
line-height: 70rpx;
margin: 60rpx auto 70rpx;
}
.address-window .pictrue {
@ -3249,14 +3253,14 @@ page {
}
.order-submission .address .addressCon .name {
font-size: 0.3 * 100rpx;
color: #282828;
font-weight: bold;
margin-bottom: 0.1 * 100rpx;
font-size: 24rpx;
color: #3A3A3C;
line-height: 32rpx;
// margin-bottom: 0.1 * 100rpx;
}
.order-submission .address .addressCon .name .phone {
margin-left: 0.5 * 100rpx;
margin-left: 20rpx;
}
.order-submission .address .addressCon .default {

64
components/CouponListWindow.vue

@ -13,7 +13,38 @@
:key="coupon.id"
@click="click(coupon)"
>
<div class="money">
<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
<view class="coupon-left">
<view class="left-bg acea-row">
<view class="radiusLT"></view>
<view class="radiusRT"></view>
<view class="radiusLB"></view>
<view class="radiusRB"></view>
</view>
<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
<view class="text-box">
<view class="money">¥{{ coupon.couponPrice }}</view>
<!-- <view class="money">7<text></text></view> -->
<view class="line"></view>
<view class="tip acea-row row-between">
<view class="">{{coupon.ctype?'仅限定品牌可用':'全部商品可用'}}</view>
<view v-if="coupon.endTime === 0">不限时</view>
<view v-else>到期时间{{ coupon.endTime }}</view>
</view>
</view>
</view>
<view class="coupon-right acea-row row-center-column">
<!-- <image v-if="item.isUse === true" class="tag" src="@/static/images/gotCoupon-icon.png" mode=""></image> -->
<view class="type">{{'满减券' || '折扣券'}}</view>
<view class="tip">{{ coupon.useMinPrice }}可用</view>
<view class="iconfont icon-xuanzhong1 font-color-red" v-if="checked === coupon.id"></view>
<view class="iconfont icon-weixuanzhong" v-else></view>
<!-- <view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view> -->
<!-- <view v-if="item.isUse === true" class="btn btn-white">已领取</view>
<view v-else-if="item.isUse === 2" class="btn btn-fail">已领完</view>
<view v-else class="btn" @click="getCoupon(item.id, index)">立刻领取</view> -->
</view>
<!-- <div class="money">
<div>
<span class="num">{{ coupon.couponPrice }}</span>
</div>
@ -30,7 +61,7 @@
></div>
<div class="iconfont icon-weixuanzhong" v-else></div>
</div>
</div>
</div> -->
</div>
</view>
<view class="couponNo bg-color-red" @click="couponNo">不使用优惠券</view>
@ -48,15 +79,34 @@
.coupon-list-window .iconfont {
font-size: 40rpx;
}
.coupon-list-window .coupon-list .item .coupon-left {
height: 208rpx;
.left-bg {
top: -2rpx;
left: 16rpx;
}
.coupon-pattern {
top: 32rpx;
right: 10rpx;
}
.text-box {
padding-top: 28rpx;
padding-left: 32rpx;
padding-right: 30rpx;
}
}
.icon-weixuanzhong {
color: #999999;
}
.couponNo {
font-size: 30rpx;
font-size: 26rpx;
font-weight: bold;
color: #fff;
width: 690rpx;
height: 86rpx;
border-radius: 43rpx;
width: 686rpx;
height: 70rpx;
border-radius: 16rpx;
text-align: center;
line-height: 86rpx;
line-height: 70rpx;
margin: 60rpx auto;
}
</style>

9
pages/activity/DargainDetails/index.vue

@ -102,7 +102,7 @@
<view class="title">助力好友记录</view>
<view class="people">{{bargainHelpList.length || 0}}人已砍价</view>
</view>
<view class="list-box">
<view class="list-box acea-row">
<view class="item acea-row row-column row-middle" v-for="(item, bargainHelpListIndex) in bargainHelpList" :key="bargainHelpListIndex">
<view class="img-box">
<image v-if="item.avatar" class="avatar" :src="item.avatar" mode=""></image>
@ -260,8 +260,9 @@
<view class="cutOff on" v-else>
<view class="help font-color-red" v-text="'成功帮砍' + bargainHelpPrice + '元'"></view>
您也可以砍价低价拿哦快去挑选心仪的商品吧~
</view>
<view class="tipBnt" @click="goPoster" v-if="bargainUid === userInfo.uid">邀请好友帮砍价</view>
</view>
<button class="tipBnt" open-type="share" v-if="bargainUid === userInfo.uid">邀请好友帮砍价</button>
<!-- <view class="tipBnt" @click="goPoster" v-if="bargainUid === userInfo.uid">邀请好友帮砍价</view> -->
<view class="tipBnt" @click="getBargainStart" v-else>我也要参与</view>
</view>
@ -697,7 +698,7 @@ export default {
return {
title: this.goodsDetail.title,
imageUrl: this.goodsDetail.image,
path: `/pages/activity/DargainDetails/index/?id=${this.bargainId}&partake=${this.bargainUid}`,
path: `/pages/activity/DargainDetails/index?id=${this.bargainId}&partake=${this.bargainUid}`,
}
},
}

5
pages/activity/DargainGoodsDetails/index.vue

@ -120,7 +120,10 @@
data() {
return {
addBottom: this.addBottom,
goodsDetail: {},
goodsDetail: {
minPrice: 0,
price: 0,
},
bargainId: 0,
bargainUid: 0,
imgUrls: [],

39
pages/order/OrderSubmission/index.vue

@ -33,7 +33,15 @@
</view> -->
<view class="addressCon acea-row row-between-wrapper">
<!-- <view class="addressCon" v-else> -->
<view class="setaddress">设置地址</view>
<view class="address-info" v-if="addressInfo.realName">
<view class="">{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}</view>
<view class="detail">{{ addressInfo.detail }}</view>
<view class="name">
{{ addressInfo.realName }}
<text class="phone">{{ addressInfo.phone }}</text>
</view>
</view>
<view class="setaddress" v-else>设置地址</view>
<image src="../../../static/images/right.png" mode=""></image>
</view>
<!-- <view class="iconfont icon-jiantou"></view> -->
@ -64,7 +72,10 @@
<view class="coupon-box" v-if="deduction === false && !isIntegral">
<view class="item acea-row row-between-wrapper" @click="couponTap">
<view>{{ usableCoupon.couponTitle || '选择优惠券' }}</view>
<view class="coupon-info acea-row row-between-wrapper">
<view>{{ usableCoupon.couponTitle || '选择优惠券' }}</view>
<view class="coupon-value">-¥{{usableCoupon.couponPrice}}</view>
</view>
<image src="../../../static/images/right.png" mode=""></image>
</view>
</view>
@ -214,6 +225,22 @@
width: 30rpx;
height: 30rpx;
}
.address-info {
width: 578rpx;
padding: 12rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
line-height: 26rpx;
.detail {
font-size: 26rpx;
font-weight: 600;
color: #3A3A3C;
line-height: 38rpx;
padding: 6rpx 0rpx;
}
}
}
.order-submission .coupon-box {
@ -236,6 +263,14 @@
width: 30rpx;
height: 30rpx;
}
.coupon-info {
width: 566rpx;
.coupon-value {
font-size: 24rpx;
font-weight: 500;
line-height: 32rpx;
}
}
}
}

Loading…
Cancel
Save