26 changed files with 1030 additions and 306 deletions
@ -0,0 +1,107 @@
|
||||
<template> |
||||
<swiper class="swiper-block" vertical="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange"> |
||||
<block v-for="(item, index) in imgs" :key="index"> |
||||
<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg"> |
||||
<view class="item-box" :class="(swiperIndex == index ? 'active' : '')" @click="toDetial(item.id)"> |
||||
<image mode="aspectFill" :src="item.imageInput" class="slide-image"></image> |
||||
<view class="content-box"> |
||||
<view class="title-box">标题标题标题标题标题</view> |
||||
<view class="content acea-row"> |
||||
<view>云快讯</view> |
||||
<view>3小时钱</view> |
||||
<view>300阅读</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</swiper-item> |
||||
</block> |
||||
</swiper> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
props: { |
||||
imgs: { |
||||
type: Array, |
||||
default: [] |
||||
} |
||||
}, |
||||
data(){ |
||||
return { |
||||
swiperIndex: 0 |
||||
} |
||||
}, |
||||
methods: { |
||||
swiperChange(e) { |
||||
const that = this; |
||||
that.setData({ |
||||
swiperIndex: e.detail.current |
||||
}); |
||||
}, |
||||
toDetial(id){ |
||||
uni.navigateTo({ |
||||
url: '/pages/life/articleDetail/index?id='+id |
||||
}) |
||||
}, |
||||
previewImg() { |
||||
uni.previewImage({ |
||||
urls: this.imgs |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.swiper-block { |
||||
width: 670rpx; |
||||
height: 300rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.swiper-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
overflow: unset; |
||||
} |
||||
.item-box{ |
||||
width: 622rpx; |
||||
height: 200rpx; |
||||
position: relative; |
||||
border-radius: 20rpx; |
||||
} |
||||
.slide-image { |
||||
width: 100%; |
||||
height: 100%; |
||||
z-index: 1; |
||||
border-radius: 20rpx; |
||||
} |
||||
.content-box{ |
||||
position: absolute; |
||||
bottom: 20rpx; |
||||
left: 20rpx; |
||||
color: #0081FF; |
||||
z-index: 5; |
||||
} |
||||
.title-box{ |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #fff; |
||||
margin-bottom: 10rpx; |
||||
} |
||||
.content{ |
||||
color: #fff; |
||||
font-size: 26rpx; |
||||
} |
||||
.content view{ |
||||
margin-right: 50rpx; |
||||
} |
||||
.active { |
||||
transform: scale(1.02); |
||||
transition: all 0.2s ease-in 0s; |
||||
border-radius: 20rpx; |
||||
z-index: 20; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,49 @@
|
||||
|
||||
<template> |
||||
<view class="article-box"> |
||||
<view class="headline">楚牛电商一季度卖了300亿，原因竟是这？</view> |
||||
<view class=""> |
||||
<image src="../../../static/images/cart.png" mode=""></image> |
||||
<view class="">云快讯</view> |
||||
<view class="">203 </view> |
||||
<view>3小时前</view> |
||||
</view> |
||||
<view class="statement">转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view> |
||||
<image src="../../../static/images/gd1.png" mode="" class="article-bg1"></image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { getCategory , getProducts, getArticle} from "@/api/store"; |
||||
export default{ |
||||
data() { |
||||
return{ |
||||
id:this.id, |
||||
} |
||||
}, |
||||
methods:{ |
||||
}, |
||||
onLoad: function (option) { |
||||
this.id= this.$yroute.query.id; |
||||
console.log(this.id) |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.article-box{ |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background: #F5F6F7; |
||||
padding: 0 40rpx; |
||||
} |
||||
.headline{ |
||||
font-size: 32rpx; |
||||
color: #333333; |
||||
padding-top: 30rpx; |
||||
margin-bottom: 60rpx; |
||||
} |
||||
</style> |
||||
@ -1,247 +1,274 @@
|
||||
<template> |
||||
<!--pages/user/completeData/index.wxml--> |
||||
<view class="page-box"> |
||||
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage"> |
||||
<!--pages/user/completeData/index.wxml--> |
||||
<view class="page-box"> |
||||
<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage"> |
||||
<image src="/static/images/back.png" mode></image> |
||||
</view> |
||||
<view class="bg-img-box"> |
||||
<image src="https://download.cyjyyjy.com/personalPage-bg.png"></image> |
||||
</view> |
||||
<view class="mail-box"> |
||||
<view :class="showMove ? 'mail-img-box mail-top top-move' : 'mail-img-box mail-top'"> |
||||
<image src="https://download.cyjyyjy.com/mail-t.png"></image> |
||||
</view> |
||||
<view class="mail-img-box mail-center"> |
||||
<image src="https://download.cyjyyjy.com/mail-c.png"></image> |
||||
</view> |
||||
<view :class="showMove ? 'mail-img-box mail-bottom btm-move' : 'mail-img-box mail-top'"> |
||||
<image src="https://download.cyjyyjy.com/mail-b.png"></image> |
||||
</view> |
||||
<view :class="(showMove ? 'word-move' : '') + ' tips'">信息已为您保存</view> |
||||
<view class="pay-btn" @tap="toPay">成为体验官</view> |
||||
<view class="tip">前1000名体验官可享限时专属价 ￥199/年</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="bg-img-box"><image src="https://download.cyjyyjy.com/personalPage-bg.png"></image></view> |
||||
<view class="mail-box"> |
||||
<view :class="showMove ? 'mail-img-box mail-top top-move' : 'mail-img-box mail-top'"> |
||||
<image src="https://download.cyjyyjy.com/mail-t.png"></image> |
||||
</view> |
||||
<view class="mail-img-box mail-center"> |
||||
<image src="https://download.cyjyyjy.com/mail-c.png"></image> |
||||
</view> |
||||
<view :class="showMove ? 'mail-img-box mail-bottom btm-move' : 'mail-img-box mail-top'"> |
||||
<image src="https://download.cyjyyjy.com/mail-b.png"></image> |
||||
</view> |
||||
<view :class="(showMove ? 'word-move' : '') + ' tips'">信息已为您保存</view> |
||||
<view class="pay-btn" @tap="toPay">成为体验官</view> |
||||
<view class="tip">前1000名体验官可享限时专属价 ￥199/年</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
// pages/user/completeData/index.js |
||||
const app = getApp(); |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
showMove: false, |
||||
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10 |
||||
}; |
||||
}, |
||||
|
||||
components: {}, |
||||
props: {}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
onLoad: function (options) { |
||||
this.setData({ |
||||
showMove: true |
||||
}); |
||||
}, |
||||
methods: { |
||||
backPage() { |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}); |
||||
}, |
||||
|
||||
toPay() { |
||||
app.http('post', 'vip/subscribeVip', {num: 1}).then(res => { |
||||
if (res.data.success) { |
||||
let orderInfo = res.data.data; |
||||
this.payment(orderInfo); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.data.msg, |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
payment(orderInfo) { |
||||
// 调用支付接口 |
||||
uni.requestPayment({ |
||||
provider: 'wxpay', |
||||
...orderInfo, |
||||
signType: 'MD5', |
||||
success: success => { |
||||
uni.showToast({ |
||||
title: '支付成功', |
||||
icon: 'success', |
||||
duration: 3000 |
||||
}); |
||||
uni.removeStorageSync('form'); |
||||
let time = setTimeout(() => { |
||||
clearTimeout(time); |
||||
uni.navigateTo({ |
||||
url: '../mine/index' |
||||
}); |
||||
}, 2000); |
||||
}, |
||||
fail: error => { |
||||
console.log(error); |
||||
|
||||
if (error.errMsg == 'requestPayment:fail cancel') { |
||||
uni.showToast({ |
||||
title: '已取消支付', |
||||
icon: 'none', |
||||
duration: 5000 |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
title: error || error.msg, |
||||
icon: 'none', |
||||
duration: 5000 |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
// pages/user/completeData/index.js |
||||
const app = getApp(); |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
showMove: false, |
||||
navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10 |
||||
}; |
||||
}, |
||||
|
||||
components: {}, |
||||
props: {}, |
||||
|
||||
/** |
||||
* 生命周期函数--监听页面加载 |
||||
*/ |
||||
onLoad: function(options) { |
||||
this.setData({ |
||||
showMove: true |
||||
}); |
||||
}, |
||||
methods: { |
||||
backPage() { |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}); |
||||
}, |
||||
|
||||
toPay() { |
||||
app.http('post', 'vip/subscribeVip', { |
||||
num: 1 |
||||
}).then(res => { |
||||
if (res.data.success) { |
||||
let orderInfo = res.data.data; |
||||
this.payment(orderInfo); |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.data.msg, |
||||
icon: 'none' |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
payment(orderInfo) { |
||||
// 调用支付接口 |
||||
uni.requestPayment({ |
||||
provider: 'wxpay', |
||||
...orderInfo, |
||||
signType: 'MD5', |
||||
success: success => { |
||||
uni.showToast({ |
||||
title: '支付成功', |
||||
icon: 'success', |
||||
duration: 3000 |
||||
}); |
||||
uni.removeStorageSync('form'); |
||||
let time = setTimeout(() => { |
||||
clearTimeout(time); |
||||
uni.navigateTo({ |
||||
url: '../mine/index' |
||||
}); |
||||
}, 2000); |
||||
}, |
||||
fail: error => { |
||||
console.log(error); |
||||
|
||||
if (error.errMsg == 'requestPayment:fail cancel') { |
||||
uni.showToast({ |
||||
title: '已取消支付', |
||||
icon: 'none', |
||||
duration: 5000 |
||||
}); |
||||
} else { |
||||
uni.showToast({ |
||||
title: error || error.msg, |
||||
icon: 'none', |
||||
duration: 5000 |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style> |
||||
/* pages/user/completeData/index.wxss */ |
||||
page{ |
||||
width: 100%; |
||||
height: 100vh; |
||||
} |
||||
.page-box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
.bg-img-box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
.bg-img-box image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.mail-box{ |
||||
width: 687rpx; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
.mail-box .mail-img-box{ |
||||
position: absolute; |
||||
} |
||||
|
||||
.mail-top,.mail-bottom{ |
||||
z-index: 3; |
||||
} |
||||
.mail-top{ |
||||
z-index: 4; |
||||
top: 10rpx; |
||||
/* top: 314rpx; */ |
||||
} |
||||
.top-move{ |
||||
animation: topMove 2s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
.mail-top image{ |
||||
width: 687rpx; |
||||
height: 445rpx; |
||||
} |
||||
.mail-center image{ |
||||
width: 684rpx; |
||||
height: 648rpx; |
||||
transform: scale(0.99); |
||||
} |
||||
.mail-center{ |
||||
top: 316rpx; |
||||
} |
||||
.mail-bottom image{ |
||||
width: 687rpx; |
||||
height: 432rpx; |
||||
|
||||
} |
||||
.mail-bottom{ |
||||
top: 616rpx; |
||||
} |
||||
.btm-move{ |
||||
animation: btmMove 1.5s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
@keyframes topMove{ |
||||
0% { |
||||
top: 10rpx; |
||||
opacity: 0.8; |
||||
} |
||||
100% { |
||||
top: 314rpx; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@keyframes btmMove{ |
||||
0% { |
||||
top: 616rpx; |
||||
opacity: 0.2; |
||||
} |
||||
100% { |
||||
top: 532rpx; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.tips{ |
||||
width: 100%; |
||||
color:#EFDACA; |
||||
font-size: 40rpx; |
||||
line-height: 56rpx; |
||||
position: absolute; |
||||
top: 1000rpx; |
||||
text-align: center; |
||||
} |
||||
.word-move{ |
||||
animation: wordMove 1s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
@keyframes wordMove{ |
||||
0%{ |
||||
left: -100%; |
||||
} |
||||
100%{ |
||||
left: 0; |
||||
} |
||||
} |
||||
.pay-btn{ |
||||
width: 686rpx; |
||||
height: 82rpx; |
||||
position: absolute; |
||||
top: 1100rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); |
||||
border-radius: 62rpx; |
||||
text-align: center; |
||||
line-height: 82rpx; |
||||
color: #946F46; |
||||
} |
||||
.tip{ |
||||
width: 100%; |
||||
text-align: center; |
||||
color: #EFDACA; |
||||
font-size: 32rpx; |
||||
line-height: 44rpx; |
||||
position: absolute; |
||||
top: 1200rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
/* pages/user/completeData/index.wxss */ |
||||
page { |
||||
width: 100%; |
||||
height: 100vh; |
||||
} |
||||
|
||||
.page-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
.bg-img-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.bg-img-box image { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.mail-box { |
||||
width: 687rpx; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
|
||||
.mail-box .mail-img-box { |
||||
position: absolute; |
||||
} |
||||
|
||||
.mail-top, |
||||
.mail-bottom { |
||||
z-index: 3; |
||||
} |
||||
|
||||
.mail-top { |
||||
z-index: 4; |
||||
top: 10rpx; |
||||
/* top: 314rpx; */ |
||||
} |
||||
|
||||
.top-move { |
||||
animation: topMove 2s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
|
||||
.mail-top image { |
||||
width: 687rpx; |
||||
height: 445rpx; |
||||
} |
||||
|
||||
.mail-center image { |
||||
width: 684rpx; |
||||
height: 648rpx; |
||||
transform: scale(0.99); |
||||
} |
||||
|
||||
.mail-center { |
||||
top: 316rpx; |
||||
} |
||||
|
||||
.mail-bottom image { |
||||
width: 687rpx; |
||||
height: 432rpx; |
||||
|
||||
} |
||||
|
||||
.mail-bottom { |
||||
top: 616rpx; |
||||
} |
||||
|
||||
.btm-move { |
||||
animation: btmMove 1.5s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
|
||||
@keyframes topMove { |
||||
0% { |
||||
top: 10rpx; |
||||
opacity: 0.8; |
||||
} |
||||
|
||||
100% { |
||||
top: 314rpx; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
@keyframes btmMove { |
||||
0% { |
||||
top: 616rpx; |
||||
opacity: 0.2; |
||||
} |
||||
|
||||
100% { |
||||
top: 532rpx; |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.tips { |
||||
width: 100%; |
||||
color: #EFDACA; |
||||
font-size: 40rpx; |
||||
line-height: 56rpx; |
||||
position: absolute; |
||||
top: 1000rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
.word-move { |
||||
animation: wordMove 1s ease; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
|
||||
@keyframes wordMove { |
||||
0% { |
||||
left: -100%; |
||||
} |
||||
|
||||
100% { |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
.pay-btn { |
||||
width: 686rpx; |
||||
height: 82rpx; |
||||
position: absolute; |
||||
top: 1100rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%); |
||||
border-radius: 62rpx; |
||||
text-align: center; |
||||
line-height: 82rpx; |
||||
color: #946F46; |
||||
} |
||||
|
||||
.tip { |
||||
width: 100%; |
||||
text-align: center; |
||||
color: #EFDACA; |
||||
font-size: 32rpx; |
||||
line-height: 44rpx; |
||||
position: absolute; |
||||
top: 1200rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,68 @@
|
||||
{ |
||||
"description": "项目配置文件", |
||||
"packOptions": { |
||||
"ignore": [] |
||||
}, |
||||
"setting": { |
||||
"bundle": false, |
||||
"userConfirmedBundleSwitch": false, |
||||
"urlCheck": true, |
||||
"scopeDataCheck": false, |
||||
"coverView": true, |
||||
"es6": true, |
||||
"postcss": true, |
||||
"compileHotReLoad": false, |
||||
"lazyloadPlaceholderEnable": false, |
||||
"preloadBackgroundData": false, |
||||
"minified": true, |
||||
"autoAudits": false, |
||||
"newFeature": false, |
||||
"uglifyFileName": false, |
||||
"uploadWithSourceMap": true, |
||||
"useIsolateContext": true, |
||||
"nodeModules": false, |
||||
"enhance": true, |
||||
"useMultiFrameRuntime": true, |
||||
"useApiHook": true, |
||||
"useApiHostProcess": true, |
||||
"showShadowRootInWxmlPanel": true, |
||||
"packNpmManually": false, |
||||
"enableEngineNative": false, |
||||
"packNpmRelationList": [], |
||||
"minifyWXSS": true, |
||||
"showES6CompileOption": false |
||||
}, |
||||
"compileType": "miniprogram", |
||||
"libVersion": "2.21.0", |
||||
"appid": "wx1bdc220038c3cb61", |
||||
"projectname": "miniprogram-1", |
||||
"debugOptions": { |
||||
"hidedInDevtools": [] |
||||
}, |
||||
"scripts": {}, |
||||
"staticServerOptions": { |
||||
"baseURL": "", |
||||
"servePath": "" |
||||
}, |
||||
"isGameTourist": false, |
||||
"condition": { |
||||
"search": { |
||||
"list": [] |
||||
}, |
||||
"conversation": { |
||||
"list": [] |
||||
}, |
||||
"game": { |
||||
"list": [] |
||||
}, |
||||
"plugin": { |
||||
"list": [] |
||||
}, |
||||
"gamePlugin": { |
||||
"list": [] |
||||
}, |
||||
"miniprogram": { |
||||
"list": [] |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 921 B |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 304 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 377 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in new issue