h5
fanfan
6 months ago
parent
34057a8a9a
commit
1474ed7391
@ -0,0 +1,554 @@ |
||||
<template> |
||||
<view class="park"> |
||||
<view class="park-top"> |
||||
<view class="park-navbar"> |
||||
<u-navbar title="开通商场" :border-bottom="false" :background="background"></u-navbar> |
||||
<view class="box_1"> |
||||
<image :src="$picUrl+'/static/default-logo.png'" class="image_2" |
||||
@click="goJump('/pages/news1/setting')"></image> |
||||
<view class="group_1"> |
||||
<view class="image-text_2" @click="goLogin()"> |
||||
156****5748 |
||||
</view> |
||||
<view class="image-text_1" @click="goLogin()"> |
||||
您暂未开通商场哦～ |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="tab_bg"> |
||||
<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar" |
||||
@click="onChage(index)" :key="index"> |
||||
{{item}} |
||||
</view> |
||||
</view> |
||||
<view class="tab-box"> |
||||
<view class="tab-type"> |
||||
<view class="tab-pro" v-for="(item,index) in tabType"> |
||||
<view class="tab-name"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="tab-price"> |
||||
<text style="font-size: 32rpx;">¥</text>{{item.price}} |
||||
</view> |
||||
<view class="tab-line"> |
||||
¥{{item.line_price}} |
||||
</view> |
||||
<view class="tab-quan"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="tabFavour"> |
||||
<view class="favour" v-for="(item,index) in tabFavour"> |
||||
<view class="favour_active"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="favour_infor"> |
||||
<view style="overflow: hidden;"> |
||||
<view class="favour_year"> |
||||
{{item.year}}<text style="font-weight: 500;">年</text> |
||||
</view> |
||||
<view class="favour_tips"> |
||||
限时特惠 |
||||
</view> |
||||
</view> |
||||
<view class="favour_price"> |
||||
<text style="font-size: 32rpx;">¥</text>{{item.price}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="tab-title"> |
||||
<view class="name"> |
||||
开通批发商城的8大优势 |
||||
</view> |
||||
</view> |
||||
<view class="advantage"> |
||||
<view class="advantage-tips"> |
||||
1、持有本卡用户可享受先洗衣，后付费服务<br />2、享受全国服务商家门店9折洗衣服务<br />3、本卡仅限绑定手机号本人使用<br />4、本卡一经出售，恕不退换！。<br />5、本套餐不自动续订，过期用户请再次购买会员 |
||||
</view> |
||||
</view> |
||||
<view class="tab-title"> |
||||
<view class="name"> |
||||
功能对比 |
||||
</view> |
||||
</view> |
||||
<view class="equity"> |
||||
<view class="equityList" v-for="(item,index) in equityList"> |
||||
<view class="equity-active"> |
||||
|
||||
</view> |
||||
<view class="equit-tips"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="equit-tips"> |
||||
{{item.text_1}} |
||||
</view> |
||||
<view class="equit-tips"> |
||||
{{item.text_2}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="bottomBtn"> |
||||
<button class="submitBtn" formType="submit">立即支付 ¥<text |
||||
style="font-size: 48rpx;">4658</text>（开通您的批发商城）</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import * as api from '@/api/tutorial' |
||||
export default { |
||||
data() { |
||||
return { |
||||
background: { |
||||
background: 'none' |
||||
}, |
||||
tabbar: ['零售商城', '批发商城'], |
||||
tabIndex: 0, |
||||
tabType: [{ |
||||
name: '多商户air版', |
||||
price: '5998', |
||||
line_price: '6998' |
||||
}, { |
||||
name: '多商户pro版', |
||||
price: '¥5998', |
||||
line_price: '6998' |
||||
}, { |
||||
name: '多商户pro版', |
||||
price: '5998', |
||||
line_price: '6998' |
||||
}], |
||||
tabFavour: [{ |
||||
name: '限时享受额外权益', |
||||
price: '5998', |
||||
year: '1' |
||||
}, |
||||
{ |
||||
name: '限时享受额外权益', |
||||
price: '5998', |
||||
year: '2' |
||||
} |
||||
], |
||||
equityList: [{ |
||||
name: '可享权益', |
||||
text_1: '批发商城', |
||||
text_2: '零售商城', |
||||
}, |
||||
{ |
||||
name: '订单短信', |
||||
text_1: '√', |
||||
text_2: '次日达', |
||||
}, { |
||||
name: '订单短信', |
||||
text_1: '√', |
||||
text_2: '次日达', |
||||
}, { |
||||
name: '订单短信', |
||||
text_1: '24小时发货', |
||||
text_2: '√', |
||||
}, { |
||||
name: '订单短信', |
||||
text_1: '√', |
||||
text_2: '次日达', |
||||
}, { |
||||
name: '订单短信', |
||||
text_1: '24小时发货', |
||||
text_2: '√', |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
onLoad() { |
||||
// this.getCourseType() |
||||
}, |
||||
onShow() { |
||||
|
||||
}, |
||||
methods: { |
||||
onChage(index) { |
||||
this.tabIndex = index |
||||
}, |
||||
|
||||
// 列表 |
||||
async getCourseList() { |
||||
let that = this; |
||||
let pames = { |
||||
courseCategoryId: that.courseTypeList[that.current].course_category_id, |
||||
page: that.page, |
||||
pageSize: that.pageSize |
||||
} |
||||
let { |
||||
status, |
||||
message, |
||||
data |
||||
} = await api.courseList(pames); |
||||
if (status == 200) { |
||||
const newData = data.list.data || []; |
||||
that.courseList = [...that.courseList, ...newData]; // 将新数据添加到已有数据的尾部 |
||||
that.total = data.list.total; |
||||
if (that.courseList.length >= that.total) { |
||||
that.status = 'nomore' |
||||
} else { |
||||
that.status = 'loadmore' |
||||
} |
||||
} else { |
||||
that.total = 0 |
||||
that.$toast(message) |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
<style> |
||||
page { |
||||
background: #fff; |
||||
} |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
::v-deep .u-empty { |
||||
padding: 100rpx 0; |
||||
} |
||||
|
||||
.warp { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
background: black; |
||||
z-index: 999; |
||||
} |
||||
|
||||
.park { |
||||
height: 100%; |
||||
width: 100%; |
||||
background: rgba(255, 255, 255, 1); |
||||
|
||||
.park-top { |
||||
width: 100%; |
||||
height: 380rpx; |
||||
background: url(https://img.js.design/assets/img/6682517fce25db701bbff353.png#2d7691cbd57f6357444f7de25ca89175); |
||||
background-size: 100%; |
||||
} |
||||
|
||||
.box_1 { |
||||
width: 100%; |
||||
flex-direction: row; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 40rpx auto 0 36rpx; |
||||
} |
||||
|
||||
.image_2 { |
||||
width: 120rpx; |
||||
height: 120rpx; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.group_1 { |
||||
height: 96rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
margin: 2rpx 0 0 30rpx; |
||||
|
||||
button:after { |
||||
border: none !important; |
||||
} |
||||
} |
||||
|
||||
.image-text_1 { |
||||
font-size: 28rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
letter-spacing: 0rpx; |
||||
line-height: 40rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
text-align: left; |
||||
|
||||
} |
||||
|
||||
.image-text_2 { |
||||
font-size: 40rpx; |
||||
font-weight: 500; |
||||
letter-spacing: 0rpx; |
||||
line-height: 56rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
text-align: left; |
||||
vertical-align: top; |
||||
|
||||
} |
||||
|
||||
.tab_bg { |
||||
width: 100%; |
||||
height: 126rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
// border-radius: 28rpx 28rpx, 0rpx, 0rpx; |
||||
background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%); |
||||
|
||||
} |
||||
|
||||
.tab_a { |
||||
width: 50%; |
||||
height: 126rpx; |
||||
font-size: 36rpx; |
||||
font-weight: 500; |
||||
letter-spacing: 0rpx; |
||||
line-height: 126rpx; |
||||
color: rgba(184, 169, 169, 1); |
||||
text-align: left; |
||||
vertical-align: top; |
||||
text-align: center; |
||||
} |
||||
|
||||
.tab_active { |
||||
width: 376rpx; |
||||
height: 126rpx; |
||||
background: linear-gradient(180deg, rgba(255, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100%); |
||||
border: 4rpx solid rgba(255, 255, 255, 1); |
||||
font-size: 36rpx; |
||||
font-weight: 500; |
||||
line-height: 126rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
text-align: center; |
||||
border-radius: 28rpx 28rpx, 28rpx, 28rpx; |
||||
} |
||||
|
||||
.tab-box { |
||||
margin: 24rpx 30rpx; |
||||
overflow: hidden; |
||||
|
||||
.tab-type { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
|
||||
|
||||
.tab-pro { |
||||
width: 214rpx; |
||||
height: 248rpx; |
||||
border-radius: 48rpx; |
||||
background-color: rgba(255, 255, 255, 1); |
||||
// background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 217, 217, 0.01) 100%); |
||||
border: 4rpx solid rgba(251, 197, 198, 1); |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
.tab-name { |
||||
width: 100%; |
||||
font-size: 30rpx; |
||||
font-weight: 500; |
||||
letter-spacing: 0rpx; |
||||
line-height: 42rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
margin-top: 40rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.tab-price { |
||||
text-align: center; |
||||
width: 100%; |
||||
font-size: 48rpx; |
||||
font-weight: 700; |
||||
line-height: 68rpx; |
||||
color: rgba(243, 74, 64, 1); |
||||
margin: 8rpx 0; |
||||
} |
||||
|
||||
.tab-line { |
||||
width: 100%; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
letter-spacing: 0rpx; |
||||
line-height: 40rpx; |
||||
text-decoration-line: line-through; |
||||
color: rgba(166, 166, 166, 1); |
||||
text-align: center; |
||||
} |
||||
|
||||
.tab-quan { |
||||
border-radius: 50%; |
||||
width: 132rpx; |
||||
height: 132rpx; |
||||
transform: rotate(-44.85deg); |
||||
border: 40rpx solid rgba(243, 74, 64, 0.06); |
||||
position: absolute; |
||||
right: -50rpx; |
||||
bottom: -50rpx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.tabFavour { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
margin-top: 62rpx; |
||||
|
||||
.favour { |
||||
width: 336rpx; |
||||
height: 144rpx; |
||||
border-radius: 20rpx; |
||||
background: rgba(243, 74, 64, 0.06); |
||||
border: 2rpx solid rgba(243, 74, 64, 1); |
||||
position: relative; |
||||
|
||||
.favour_active { |
||||
z-index: 99; |
||||
top: -20rpx; |
||||
left: 0; |
||||
line-height: 40rpx; |
||||
position: absolute; |
||||
padding: 0 18rpx; |
||||
height: 40rpx; |
||||
border-radius: 0rpx 24rpx, 24rpx, 24rpx !important; |
||||
background: linear-gradient(90deg, rgba(243, 74, 64, 1) 0%, rgba(255, 142, 89, 1) 100%); |
||||
|
||||
} |
||||
|
||||
.favour_infor { |
||||
margin: 35rpx 20rpx 0 20rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.favour_year { |
||||
font-size: 32rpx; |
||||
font-weight: 700; |
||||
letter-spacing: 0rpx; |
||||
line-height: 45rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
|
||||
} |
||||
|
||||
.favour_tips { |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
letter-spacing: 0rpx; |
||||
line-height: 45rpx; |
||||
color: rgba(153, 153, 153, 1); |
||||
|
||||
} |
||||
} |
||||
|
||||
.favour_price { |
||||
font-size: 48rpx; |
||||
font-weight: 700; |
||||
letter-spacing: 0rpx; |
||||
line-height: 67rpx; |
||||
color: rgba(243, 74, 64, 1); |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
.tab-title { |
||||
overflow: hidden; |
||||
height: 100rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-top: 20rpx; |
||||
|
||||
.name { |
||||
font-size: 32rpx; |
||||
font-weight: 700; |
||||
color: rgba(51, 51, 51, 1); |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
.equity { |
||||
margin-bottom: 182rpx; |
||||
position: relative; |
||||
|
||||
.equityList { |
||||
width: 100%; |
||||
height: 84rpx; |
||||
line-height: 84rpx; |
||||
background-color: #fff; |
||||
display: flex; |
||||
// flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
|
||||
.equit-tips { |
||||
width: 33.33%; |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.equity-active { |
||||
opacity: 0; /* 这里的0.5表示50%透明度 */ |
||||
width: 33.33%; |
||||
position: absolute; |
||||
height: 30rpx; |
||||
top: -30rpx; |
||||
z-index: 99; |
||||
border-radius: 8rpx; |
||||
background: linear-gradient(180deg, rgba(255, 227, 209, 1) 0%, rgba(255, 193, 179, 1) 100%); |
||||
} |
||||
|
||||
.equityList:nth-child(odd) { |
||||
background: rgba(246, 246, 246, 1); |
||||
} |
||||
|
||||
.equityList:first-child { |
||||
border-top: 1rpx solid rgba(229, 229, 229, 1); |
||||
} |
||||
|
||||
.equityList:last-child { |
||||
border-bottom: 1rpx solid rgba(229, 229, 229, 1); |
||||
} |
||||
|
||||
} |
||||
|
||||
.advantage { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
|
||||
.advantage-tips { |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
letter-spacing: 0rpx; |
||||
line-height: 40rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
text-align: left; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bottomBtn { |
||||
width: 100%; |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
height: 160upx; |
||||
z-index: 88; |
||||
background: #fafafa; |
||||
} |
||||
|
||||
.submitBtn { |
||||
height: 100rpx; |
||||
line-height: 88upx; |
||||
background: #FFAAA4; |
||||
background: #FE483B; |
||||
border-radius: 36px; |
||||
font-size: 32rpx; |
||||
font-weight: 700; |
||||
letter-spacing: 0rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
text-align: center; |
||||
margin: 30rpx 58rpx; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue