7 changed files with 430 additions and 12 deletions
@ -0,0 +1,110 @@ |
|||||
|
// pages/cooperation/index.js
|
||||
|
Page({ |
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
// 页面数据可以在这里定义
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
// 页面加载时的初始化操作
|
||||
|
console.log('招商合作页面加载'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
// 页面初次渲染完成时的操作
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
// 页面显示时的操作
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
// 页面隐藏时的操作
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
// 页面卸载时的操作
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
// 下拉刷新时的操作
|
||||
|
wx.stopPullDownRefresh(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
// 上拉触底时的操作
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
// 分享时的配置
|
||||
|
return { |
||||
|
title: '招商合作 - 又鸟蛋平台', |
||||
|
path: '/pages/cooperation/index', |
||||
|
imageUrl: '' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 拨打电话 |
||||
|
*/ |
||||
|
makePhoneCall: function () { |
||||
|
wx.makePhoneCall({ |
||||
|
phoneNumber: '138XXXXXXXX', |
||||
|
success: function () { |
||||
|
console.log('拨打电话成功'); |
||||
|
}, |
||||
|
fail: function (error) { |
||||
|
console.error('拨打电话失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: '拨打电话失败,请稍后重试', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 跳转到立即合作页面 |
||||
|
*/ |
||||
|
navigateToSettlement: function () { |
||||
|
wx.navigateTo({ |
||||
|
url: '/pages/settlement/index', |
||||
|
success: function () { |
||||
|
console.log('成功跳转到立即合作页面'); |
||||
|
}, |
||||
|
fail: function (error) { |
||||
|
console.error('跳转到立即合作页面失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: '跳转失败,请稍后重试', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "招商合作", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
<view class="cooperation-container"> |
||||
|
<!-- 页面标题 --> |
||||
|
<view class="page-title"> |
||||
|
<text>招商合作</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 招商广告区域 --> |
||||
|
<view class="ad-section"> |
||||
|
<view class="ad-title"> |
||||
|
<text>诚邀合作伙伴</text> |
||||
|
</view> |
||||
|
<view class="ad-content"> |
||||
|
<view class="ad-item"> |
||||
|
<view class="ad-icon">🤝</view> |
||||
|
<view class="ad-text"> |
||||
|
<view class="ad-item-title">成为我们的供应商</view> |
||||
|
<view class="ad-item-desc">加入我们的供应链体系,共享平台资源,实现互利共赢</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ad-item"> |
||||
|
<view class="ad-icon">📈</view> |
||||
|
<view class="ad-text"> |
||||
|
<view class="ad-item-title">海量订单支持</view> |
||||
|
<view class="ad-item-desc">平台拥有稳定的客户群体,为您提供持续的订单保障</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ad-item"> |
||||
|
<view class="ad-icon">🚚</view> |
||||
|
<view class="ad-text"> |
||||
|
<view class="ad-item-title">完善的物流体系</view> |
||||
|
<view class="ad-item-desc">专业的物流配送团队,确保货物安全及时送达</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ad-item"> |
||||
|
<view class="ad-icon">📊</view> |
||||
|
<view class="ad-text"> |
||||
|
<view class="ad-item-title">数据分析支持</view> |
||||
|
<view class="ad-item-desc">提供详细的销售数据和市场分析,助力您的业务决策</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 合作优势区域 --> |
||||
|
<view class="advantage-section"> |
||||
|
<view class="section-title">合作优势</view> |
||||
|
<view class="advantage-grid"> |
||||
|
<view class="advantage-item"> |
||||
|
<view class="advantage-icon">💪</view> |
||||
|
<view class="advantage-text">品牌支持</view> |
||||
|
</view> |
||||
|
<view class="advantage-item"> |
||||
|
<view class="advantage-icon">💰</view> |
||||
|
<view class="advantage-text">灵活结算</view> |
||||
|
</view> |
||||
|
<view class="advantage-item"> |
||||
|
<view class="advantage-icon">📱</view> |
||||
|
<view class="advantage-text">智能管理</view> |
||||
|
</view> |
||||
|
<view class="advantage-item"> |
||||
|
<view class="advantage-icon">👥</view> |
||||
|
<view class="advantage-text">专属客服</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 联系方式区域 --> |
||||
|
<view class="contact-section"> |
||||
|
<view class="section-title">联系方式</view> |
||||
|
<view class="contact-info"> |
||||
|
<view class="contact-item"> |
||||
|
<view class="contact-label">联系电话:</view> |
||||
|
<view class="contact-value" bindtap="makePhoneCall">138-XXXX-XXXX</view> |
||||
|
</view> |
||||
|
<view class="contact-item"> |
||||
|
<view class="contact-label">电子邮箱:</view> |
||||
|
<view class="contact-value">cooperation@example.com</view> |
||||
|
</view> |
||||
|
<view class="contact-item"> |
||||
|
<view class="contact-label">联系地址:</view> |
||||
|
<view class="contact-value">上海市浦东新区XX路XX号</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 立即合作按钮 --> |
||||
|
<button class="cooperate-btn" bindtap="navigateToSettlement">立即合作</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部提示 --> |
||||
|
<view class="bottom-tip"> |
||||
|
<text>如有任何疑问,欢迎随时联系我们</text> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,207 @@ |
|||||
|
/* 页面容器 */ |
||||
|
.cooperation-container { |
||||
|
padding: 20rpx; |
||||
|
background-color: #f5f5f5; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 页面标题 */ |
||||
|
.page-title { |
||||
|
text-align: center; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin: 30rpx 0; |
||||
|
} |
||||
|
|
||||
|
/* 广告区域 */ |
||||
|
.ad-section { |
||||
|
background-color: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.ad-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #ff6b81; |
||||
|
margin-bottom: 20rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.ad-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.ad-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.ad-icon { |
||||
|
font-size: 48rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.ad-text { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.ad-item-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.ad-item-desc { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
/* 合作优势区域 */ |
||||
|
.advantage-section { |
||||
|
background-color: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
margin-bottom: 20rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.advantage-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.advantage-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
gap: 10rpx; |
||||
|
padding: 20rpx; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 12rpx; |
||||
|
transition: transform 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.advantage-item:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.advantage-icon { |
||||
|
font-size: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.advantage-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 联系方式区域 */ |
||||
|
.contact-section { |
||||
|
background-color: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.contact-info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12rpx; |
||||
|
padding: 16rpx; |
||||
|
background-color: #f9f9f9; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-label { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
width: 180rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.contact-value:active { |
||||
|
color: #ff6b81; |
||||
|
} |
||||
|
|
||||
|
/* 立即合作按钮 */ |
||||
|
.cooperate-btn { |
||||
|
background-color: #ff6b81; |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
border-radius: 50rpx; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
margin: 0; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 107, 129, 0.3); |
||||
|
} |
||||
|
|
||||
|
.cooperate-btn:active { |
||||
|
background-color: #ff526c; |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
/* 底部提示 */ |
||||
|
.bottom-tip { |
||||
|
text-align: center; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
margin: 30rpx 0; |
||||
|
} |
||||
|
|
||||
|
/* 响应式设计 */ |
||||
|
@media (max-width: 768rpx) { |
||||
|
.advantage-grid { |
||||
|
grid-template-columns: 1fr; |
||||
|
} |
||||
|
|
||||
|
.ad-item { |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.contact-item { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
gap: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.contact-label { |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue