第一次提交
This commit is contained in:
gxwebsoft
746
sub_pages/app-plus/privacy.html
Executable file
746
sub_pages/app-plus/privacy.html
Executable file
@@ -0,0 +1,746 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>隐私政策</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: monospace;
|
||||
line-height: 1.6;
|
||||
font-size: 10pt;
|
||||
padding: 10pt 10pt;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-bottom: 8pt;
|
||||
}
|
||||
|
||||
.mg-6 {
|
||||
margin-top: 6pt;
|
||||
margin-bottom: 6pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 请查找并替换本文中的关键词字样 -->
|
||||
<!-- 关键词: 萤火商城 -->
|
||||
<!-- 关键词: 烟台晴好网络科技有限公司 -->
|
||||
<!-- 关键词: admin@yiovo.com -->
|
||||
<div class="content">
|
||||
<h2 class="title">隐私政策</h2>
|
||||
<p>
|
||||
|
||||
在使用萤火商城各项产品或服务前，请您务必仔细阅读并透彻理解本政策，特别是以粗体或下划线标识的条款，您应重点阅读，在确认充分理解并同意后再开始使用。如对本政策内容有任何疑问、意见或建议，您可通过萤火商城提供的各种联系方式与我们联系。
|
||||
</p>
|
||||
<p>
|
||||
<br/>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
您的信任对我们非常重要，我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。鉴于此，萤火商城服务提供者（或简称“我们”或“萤火商城”）制定本《隐私政策》（下称“本政策/本隐私政策”）并提醒您：本政策适用于萤火商城提供的所有产品和服务及我们的关联公司的产品或服务（如萤火商城小程序），您可使用萤火商城平台帐号登录上述产品或服务，如上述产品或服务未设独立隐私政策的，则本政策同样适用于该部分产品或服务。
|
||||
</p>
|
||||
|
||||
<p>
|
||||
需要特别说明的是，本政策不适用于其他第三方向您提供的服务，也不适用于萤火商城中已另行独立设置隐私政策的产品或服务。
|
||||
</p>
|
||||
<p class="mg-6">
|
||||
<strong>第一部分 定义</strong>
|
||||
</p>
|
||||
<p>
|
||||
萤火商城服务提供者：烟台晴好网络科技有限公司
|
||||
</p>
|
||||
<p>
|
||||
个人信息：指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。
|
||||
</p>
|
||||
<p>
|
||||
个人敏感信息：指包括身份证件号码、个人生物识别信息、银行账号、财产信息、行踪轨迹、交易信息、14岁以下（含）儿童信息个人信息（我们将在本隐私政策中对具体个人敏感信息以粗体进行显著标识）。
|
||||
</p>
|
||||
<p>
|
||||
个人信息删除：指在实现日常业务功能所涉及的系统中去除个人信息的行为，使其保持不可被检索、访问的状态。
|
||||
</p>
|
||||
<p>
|
||||
儿童：指不满十四周岁的未成年人。
|
||||
</p>
|
||||
<p>
|
||||
除另有约定外，本政策所用定义与萤火商城平台用户协议中的定义具有相同的涵义。
|
||||
</p>
|
||||
<p class="mg-6">
|
||||
<strong>第二部分 隐私政策</strong>
|
||||
</p>
|
||||
<p>
|
||||
本隐私政策部分将帮助您了解以下内容：
|
||||
</p>
|
||||
<p>
|
||||
一、我们如何收集和使用您的信息
|
||||
</p>
|
||||
<p>
|
||||
二、我们如何使用Cookie
|
||||
</p>
|
||||
<p>
|
||||
三、我们如何共享、转让、公开披露您的信息
|
||||
</p>
|
||||
<p>
|
||||
四、我们如何存储您的信息
|
||||
</p>
|
||||
<p>
|
||||
五、我们如何保护您的信息
|
||||
</p>
|
||||
<p>
|
||||
六、您如何管理您的信息
|
||||
</p>
|
||||
<p>
|
||||
七、我们如何处理未成年人的信息
|
||||
</p>
|
||||
<p>
|
||||
八、您的信息如何在全球范围转移
|
||||
</p>
|
||||
<p>
|
||||
九、本隐私政策如何更新
|
||||
</p>
|
||||
<p>
|
||||
十、如何联系我们
|
||||
</p>
|
||||
<p>
|
||||
一、我们如何收集和使用您的信息
|
||||
</p>
|
||||
<p>
|
||||
在您使用我们的产品及/或服务时，我们需要/可能需要收集和使用的您的个人信息包括如下两种：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
1、为实现向您提供我们产品及/或服务的基本功能，我们将按照《网络安全法》的规定收集、使用您的个人信息。如您拒绝提供相应信息，您将无法正常使用我们的产品及/或服务，但不影响您浏览我们的网页及客户端页面；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
2、为实现向您提供我们产品及/或服务的附加功能，您可选择授权我们收集、使用您的个人敏感信息。如您拒绝提供，您将无法正常使用相关附加功能或无法达到我们拟达到的功能效果，但并不会影响您正常使用我们产品及/或服务的基本功能。
|
||||
</p>
|
||||
<p>
|
||||
您理解并同意：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
1、我们致力于打造多样的产品和服务以满足您的需求。因我们向您提供的产品和服务种类众多，且不同用户选择使用的具体产品/服务范围存在差异，因此基本/附加功能及收集使用的个人信息类型、范围会有所区别，请以具体的产品/服务功能为准；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
2、为给您带来更好的产品和服务体验，我们在持续努力改进我们的技术，随之我们可能会不时推出新的或优化后的功能，可能需要重新收集、使用您的个人信息或变更个人信息使用目的或方式。对此，我们将通过更新本政策、弹窗、页面提示方式另行向您说明对应信息的收集目的、范围及使用方式，并征求您的明示同意。在此过程中，如果您有任何疑问、意见或建议的，您可通过萤火商城提供的各种联系方式与我们联系，我们会尽快为您作出解答。
|
||||
</p>
|
||||
<p>
|
||||
我们会为实现本政策下述的各项功能，收集和使用您的个人信息：
|
||||
</p>
|
||||
<p>
|
||||
（一） 帮助您成为我们的会员
|
||||
</p>
|
||||
<p>
|
||||
1、基础会员服务
|
||||
</p>
|
||||
<p>
|
||||
注册成为会员并使用我们的会员服务，您需要提供手机号码、拟使用的会员名和密码用于创建萤火商城平台账户。如果您仅需使用浏览、搜索服务，您不需要注册成为我们的会员及提供上述信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在您登录帐户时，我们可能会根据您提供的上述信息校验您的会员身份，确保我们是在为您本人提供服务。若存在依法需确定您会员身份的场景（包括依法为您扣缴税费、行政执法或司法诉讼中相关主体认定等）时，您授权我们可获取您对应支付账户的相关认证信息用于上述目的。
|
||||
</p>
|
||||
<p>
|
||||
我们会根据您的会员账户使用情况为您提供相应会员所对应的基本权益。
|
||||
</p>
|
||||
<p>
|
||||
2、附加会员服务
|
||||
</p>
|
||||
<p>
|
||||
如果您选择提供真实姓名、性别、出生年月日、居住地个人信息，我们可以为您提供更加个性化的会员服务。为保证交易辨识度，您的帐户昵称、头像将公开显示。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
授权登录：经您同意后我们向第三方共享您的账户信息（如微信，我们可能会共享您的头像、昵称），使您可以便捷地以萤火商城平台帐户实现第三方平台的注册或登录。此外，我们可能会根据您的授权从第三方处获取您的第三方账户信息，并与您的萤火商城平台账户进行绑定，使您可通过第三方账户直接登录、使用我们的产品及/或服务。我们将在您授权同意的范围内使用您的相关信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
3、账户信息展示：如果您已拥有萤火商城平台账户，我们可能会在萤火商城平台服务中显示您的上述个人信息（实人认证仅显示认证是否通过的结果），以及您在萤火商城平台上或与萤火商城平台账户相关联的产品和服务中执行的操作（您可通过萤火商城平台账户在我们提供的手机萤火商城入口或其他产品/服务入口使用我们及/或关联公司提供的产品或服务），包括通过萤火商城平台账户集中展示您的个人资料、优惠权益、交易订单。我们会尊重您对萤火商城平台服务和萤火商城平台账户设置所做的选择。
|
||||
</p>
|
||||
<p>
|
||||
（二） 为您提供商品或服务信息展示
|
||||
</p>
|
||||
<p>
|
||||
在您使用我们服务过程中，为识别账号异常状态、了解产品适配性、向您提供更契合您需求的页面展示和搜索结果，我们可能会自动收集您的使用情况并存储为网络日志信息，包括：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
设备信息：我们会根据您在软件安装及/或使用中的具体操作，接收并记录您所使用的设备相关信息（包括设备型号、操作系统版本、设备设置、唯一设备标识符、设备环境软硬件特征信息）、设备所在位置相关信息（包括您授权的GPS位置以及WLAN接入点）。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
服务日志信息：当您使用我们的网站或客户端提供的产品或服务时，我们会自动收集您对我们服务的详细使用情况，作为服务日志保存，包括浏览、点击查看、搜索查询、收藏、添加至购物车、交易、售后、关注分享信息、发布信息，以及IP地址、浏览器类型、电信运营商、使用语言、访问日期和时间。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
请注意，单独的设备信息、服务日志信息是无法识别特定自然人身份的信息。如果我们将这类非个人信息与其他信息结合用于识别特定自然人身份，或者将其与个人信息结合使用，则在结合使用期间，这类非个人信息将被视为个人信息，除取得您授权或法律法规另有规定外，我们会将这类信息做匿名化、去标识化处理。
|
||||
</p>
|
||||
<p>
|
||||
如果您不想接受我们给您发送的商业广告，您可按照信息中提示的退订步骤进行退订或与我们的客服联系进行退订。在您使用我们提供的站内搜索服务时，我们也同时提供了不针对您个人偏好的商品、服务。
|
||||
</p>
|
||||
<p>
|
||||
此外，我们也会为了不断改进和优化上述的功能来使用您的上述信息。
|
||||
</p>
|
||||
<p>
|
||||
（三） 为您提供收藏、加购、关注与分享功能
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在您浏览我们客户端的过程中，您可以选择对感兴趣的商品及/或服务进行收藏、添加至购物车、与您感兴趣的商家/品牌建立关注关系、通过我们提供的功能组件向其他第三方分享信息。在您使用上述功能的过程中，我们会收集包括您的收藏及添加购物车的记录、关注关系、分享历史在内的服务日志信息用于实现上述功能及其他我们明确告知的目的。
|
||||
</p>
|
||||
<p>
|
||||
（四）帮助您完成下单及订单管理
|
||||
</p>
|
||||
<p>
|
||||
|
||||
当您在我们的产品及/或服务中订购具体商品及/或服务时，我们会通过系统为您生成购买该商品及/或服务的订单。在下单过程中,您需至少提供您的收货人姓名、收货地址、收货人联系电话，同时该订单中会载明您所购买的商品及/或服务信息、具体订单号、订单创建时间、您应支付的金额，我们收集这些信息是为了帮助您顺利完成交易、保障您的交易安全、查询订单信息、提供客服与售后服务及其他我们明确告知的目的。
|
||||
</p>
|
||||
<p>
|
||||
您可以通过萤火商城为其他人订购商品及/或服务，您需要提供该实际订购人的前述个人信息，若其中涉及儿童个人信息的，您需在提供前征得对应儿童监护人的同意。
|
||||
</p>
|
||||
<p>
|
||||
为便于您了解查询订单信息并对订单信息进行管理，我们会收集您在使用我们服务过程中产生的订单信息用于向您展示及便于您对订单进行管理。
|
||||
</p>
|
||||
<p>
|
||||
您可额外填写/选择包括其他联系电话、收货时间在内的更多附加信息以确保商品或服务的准确送达。
|
||||
</p>
|
||||
<p>
|
||||
（五） 帮助您完成支付
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为完成订单支付，您需要提供支付账户并选择付款方式，我们会将您的萤火商城平台账户会员名、对应的支付账户会员名、订单支付相关信息及其他反洗钱法律要求的必要信息与第三方支付公司共享。如您选择由其他金融机构为您提供支付服务的，我们或我们的关联公司、合作伙伴还会将您的包括银行卡号、有效期在内的银行卡支付必要信息与您选择的相应金融机构共享。
|
||||
</p>
|
||||
<p>
|
||||
您可以请求其他人为您付款，那么您需要提供代付人的支付账户及/或手机号码。
|
||||
</p>
|
||||
<p>
|
||||
为使我们及时获悉并确认您的支付进度及状态，为您提供售后与争议解决服务，您同意我们可自您所选择的交易对象、支付公司或您选择的其他金融机构处收集与支付进度相关信息。
|
||||
</p>
|
||||
<p>
|
||||
（六） 帮助向您完成商品或服务的交付
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为保证您购买的商品及/或服务能够顺利、安全、准确送达，我们会向为萤火商城平台提供物流信息系统和技术服务的物流配送公司披露订单相关配送信息，并由其根据商品及/或服务提供主体的指定向相应的物流配送主体同步相关配送信息。您知晓并同意相应物流配送主体不可避免地获知及使用您的配送信息，用于完成交付目的。
|
||||
</p>
|
||||
<p>
|
||||
为使我们及时获悉并确认交付进度及状态，向您提供售后与争议解决服务，您同意我们可自物流相关服务主体处收集与交付进度相关信息。
|
||||
</p>
|
||||
<p>
|
||||
（七） 客服及争议处理
|
||||
</p>
|
||||
<p>
|
||||
当您与我们联系或提出售中售后、争议纠纷处理申请时，为了保障您的账户及系统安全，我们需要您提供必要的个人信息以核验您的会员身份。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为便于与您联系、尽快帮助您解决问题或记录相关问题的处理方案及结果，我们可能会保存您与我们的通信/通话记录及相关内容（包括账号信息、订单信息、您为了证明相关事实提供的其他信息，或您留下的联系方式信息），如果您针对具体订单进行咨询、投诉或提供建议的，我们会使用您的账号信息和订单信息。
|
||||
</p>
|
||||
<p>
|
||||
（八） 为您提供安全保障
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为提高您使用我们及我们关联公司、合作伙伴提供服务的安全性，保护您或其他用户或公众的人身财产安全免遭侵害，更好地预防钓鱼网站、欺诈、网络漏洞、计算机病毒、网络攻击、网络侵入安全风险，更准确地识别违反法律法规或萤火商城相关协议规则的情况，我们可能使用或整合您的会员信息、交易信息、设备信息、服务日志信息以及我们关联公司、合作伙伴取得您授权或依据法律共享的信息，来综合判断您账户及交易风险、进行身份验证、检测及防范安全事件，并依法采取必要的记录、审计、分析、处置措施。
|
||||
</p>
|
||||
<p>
|
||||
（九）为您提供其他附加服务
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为向您提供更便捷、更优质、个性化的产品及/或服务，努力提升您的体验，我们在向您提供的以下附加服务中可能会收集、缓存和使用您的个人信息。如果您不提供这些信息，不会影响您使用萤火商城的浏览、搜索基本服务，但您可能无法获得这些附加服务给您带来的用户体验。这些附加服务包括：
|
||||
</p>
|
||||
<p>
|
||||
1、基于相机/摄像头的附加服务：您可在开启相机（摄像头）权限后使用该功能。即使您已同意开启相机（摄像头）权限，我们也仅会在您主动点击相应图标或录制视频时通过相机获取照片信息。。
|
||||
</p>
|
||||
<p>
|
||||
2、基于读取、写入外置存储卡的附加服务：您可以在开启存储权限后，使用该功能上传您的照片/图片/视频，以实现发表评论/分享或与客服沟通提供证明等功能。
|
||||
</p>
|
||||
<p>
|
||||
3.基于读取手机状态和身份信息的附加服务：我们将在您开启权限后收集您的IMEI、MSI、设备MAC地址、软件列表、设备序列号、android ID，根据您的设备确认您的账户安全，实现安全风控。
|
||||
</p>
|
||||
<p>
|
||||
4、基于查看WLAN连接的附加功能：查看wifi连接状态，确保网络可靠性以及大流量场景下提示用户流量使用。
|
||||
</p>
|
||||
<p>
|
||||
5、基于检索正在运行应用的附加功能：此功能可以使您在浏览萤火商城商品、服务时跳转到第三方APP的指定页面。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
6、基于相册（图片库/视频库）的图片/视频访问及上传、外部存储、缓存、发布音视频功能的附加服务：您可在开启相册权限后使用该功能上传您的照片/图片/视频，发表评论/分享、拍照购物或与客服沟通提供证明等功能。我们可能会通过您所上传的照片/图片来识别您需要购买的商品或服务，或使用包含您所上传照片或图片的评论信息。您如果拒绝授权提供，将无法使用此功能，但不影响您正常使用萤火商城的其他功能。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
7、基于麦克风的语音技术相关附加服务：您可在开启麦克风权限后使用麦克风实现语音购物功能，或与客服联系或与客服机器人实现语音交互，在这些功能中我们会收集您的录音内容以识别您的购物需求，或响应您的客服及争议处理等需求。请您知晓，即使您已同意开启麦克风权限，我们也仅会在您主动点击客户端内麦克风图标或录制视频时通过麦克风获取语音信息。
|
||||
</p>
|
||||
<p>
|
||||
8、基于安装应用的附加服务：平台会定期更新应用的客户端，您可以在更新的时候，打开APP直接进行新版本的更新安装及使用。
|
||||
</p>
|
||||
<p>
|
||||
9、基于应用程序获得当前运行任务的信息的附加服务：平台在统计APP数据的情况下，会对APP的页面进行判断。
|
||||
</p>
|
||||
<p>
|
||||
10、基于保持APP在唤醒状态下的附加服务：您在本应用观看视频的情况下，需要保持应用为唤醒的状态。
|
||||
</p>
|
||||
<p>
|
||||
您理解并同意，上述附加服务可能需要您在您的设备中开启您的位置信息
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（地理位置）、摄像头（相机）、相册（图片库）、麦克风（语音）及/或日历、外部存储的访问权限，以实现这些权限所涉及信息的收集和使用。请您注意，您开启任一权限即代表您授权我们可以收集和使用相关个人信息来为您提供对应服务，您一旦关闭任一权限即代表您取消了授权，我们将不再基于对应权限继续收集和使用相关个人信息，也无法为您提供该权限所对应的服务。但是，您关闭权限的决定不会影响此前基于您的授权所进行的信息收集及使用。
|
||||
</p>
|
||||
<p>
|
||||
（十）其他
|
||||
</p>
|
||||
<p>
|
||||
|
||||
1、若你提供的信息中含有其他用户的个人信息，在向萤火商城提供这些个人信息之前，您需确保您已经取得合法的授权。若其中涉及儿童个人信息的，您需在发布前取得对应儿童监护人的同意，前述情形下监护人有权通过本政策第十条的途径联系我们，要求更正或删除涉及儿童个人信息的内容。
|
||||
</p>
|
||||
<p>
|
||||
2、若我们将信息用于本政策未载明的其他用途，或者将基于特定目的收集而来的信息用于其他目的，或者我们主动从第三方处获取您的个人信息，均会事先获得您的同意。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
若我们从第三方处间接获取您的信息的，我们会在收集前明确以书面形式要求该第三方在已依法取得您同意后收集个人信息，并向您告知共享的信息内容，且涉及敏感信息的在提供给我们使用前需经过您的明确确认，要求第三方对个人信息来源的合法性和合规性作出承诺，如第三方有违反行为的，我们会明确要求对方承担相应法律责任；同时，我们对个人信息会进行安全加固（包括敏感信息报备、敏感信息加密存储、访问权限控制）。我们会使用不低于我们对自身用户个人信息同等的保护手段与措施对间接获取的个人信息进行保护。
|
||||
</p>
|
||||
<p>
|
||||
3、征得授权同意的例外
|
||||
</p>
|
||||
<p>
|
||||
您充分理解并同意，我们在以下情况下收集、使用您的个人信息无需您的授权同意，且我们可能不会响应您提出的更正/修改、删除、注销、撤回同意、索取信息的请求：
|
||||
</p>
|
||||
<p>
|
||||
（1）与国家安全、国防安全有关的；
|
||||
</p>
|
||||
<p>
|
||||
（2）与公共安全、公共卫生、重大公共利益有关的；
|
||||
</p>
|
||||
<p>
|
||||
（3）与犯罪侦查、起诉、审判和判决执行等司法或行政执法有关的；
|
||||
</p>
|
||||
<p>
|
||||
（4）出于维护您或其他个人的生命、财产相关的重大合法权益但又很难得到本人同意的；
|
||||
</p>
|
||||
<p>
|
||||
（5）您自行向社会公众公开的个人信息；
|
||||
</p>
|
||||
<p>
|
||||
（6）从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道。
|
||||
</p>
|
||||
<p>
|
||||
（7）根据与您签订和履行相关协议或其他书面文件所必需的；
|
||||
</p>
|
||||
<p>
|
||||
（8）用于维护所提供的产品及/或服务的安全稳定运行所必需的，例如发现、处置产品及/或服务的故障；
|
||||
</p>
|
||||
<p>
|
||||
（9）为合法的新闻报道所必需的；
|
||||
</p>
|
||||
<p>
|
||||
（10）学术研究机构基于公共利益开展统计或学术研究所必要，且对外提供学术研究或描述的结果时，对结果中所包含的个人信息进行去标识化处理的；
|
||||
</p>
|
||||
<p>
|
||||
（11）法律法规规定的其他情形。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
请知悉，根据适用的法律，若我们对个人信息采取技术措施和其他必要措施进行处理，使得数据接收方无法重新识别特定个人且不能复原，或我们可能会对收集的信息进行去标识化地研究、统计分析和预测，用于改善萤火商城的内容和布局，为商业决策提供产品或服务支撑，以及改进我们的产品和服务（包括使用匿名数据进行机器学习或模型算法训练），则此类处理后数据的使用无需另行向您通知并征得您的同意。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
4、如我们停止运营萤火商城产品或服务，我们将及时停止继续收集您个人信息的活动，将停止运营的通知以逐一送达或公告的形式通知您，并对我们所持有的与已关停业务相关的个人信息进行删除或匿名化处理。涉及儿童个人信息的，我们会并将停止运营的通知及时告知儿童监护人。
|
||||
</p>
|
||||
<p>
|
||||
二、我们如何使用Cookie
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为使您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们会在您的移动设备上存储名为Cookie的小数据文件。Cookie通常包含标识符、站点名称以及一些号码和字符。借助Cookie，我们能够存储您的账户信息、商品记录、订单记录、商品的数据。
|
||||
</p>
|
||||
<p>
|
||||
若您不同意我们在您的移动设备上存储Cookie的小数据文件，您可停止使用萤火商城。
|
||||
</p>
|
||||
<p>
|
||||
三、我们如何共享、转让、公开披露您的信息
|
||||
</p>
|
||||
<p>
|
||||
（一）共享
|
||||
</p>
|
||||
<p>
|
||||
我们不会与萤火商城服务提供者以外的公司、组织和个人共享您的个人信息，但以下情况除外：
|
||||
</p>
|
||||
<p>
|
||||
1、在法定情形下的共享：我们可能会根据法律法规规定、诉讼、争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。
|
||||
</p>
|
||||
<p>
|
||||
2、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
|
||||
</p>
|
||||
<p>
|
||||
3、在您主动选择情况下共享：您通过萤火商城平台购买商品或服务，我们会根据您的选择，将您的订单信息中与交易有关的必要信息共享给相关商品或服务的提供者，以实现您的交易及售后服务需求。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
4、与关联公司间共享：为便于我们基于萤火商城平台账户向您提供产品和服务，推荐您可能感兴趣的信息，识别会员账号异常，保护萤火商城关联公司或其他用户或公众的人身财产安全免遭侵害，您的个人信息可能会与我们的关联公司和/或其指定的服务提供商共享。我们只会共享必要的个人信息，且受本隐私政策中所声明目的的约束，如果我们共享您的个人敏感信息或关联公司改变个人信息的使用及处理目的，将再次征求您的授权同意。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
5、与授权合作伙伴共享：我们可能委托授权合作伙伴为您提供某些服务或代表我们履行职能，我们仅会出于本隐私政策声明的合法、正当、必要、特定、明确的目的共享您的信息，授权合作伙伴只能接触到其履行职责所需信息，且不得将此信息用于其他任何目的。对于涉及儿童个人信息的，我们不允许合作伙伴进行转委托。
|
||||
</p>
|
||||
<p>
|
||||
目前，我们的授权合作伙伴包括以下类型：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（1）广告、分析服务类的授权合作伙伴。我们会委托这些合作伙伴处理与广告覆盖面和有效性相关的信息，但不会提供您的个人身份信息，或者我们将这些信息进行去标识化处理，以便它不会识别您个人。这类合作伙伴可能将上述信息与他们合法获取的其他数据相结合，以执行我们委托的广告服务或决策建议，帮助其在不识别您个人身份的前提下提升广告有效触达率。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（2）供应商、服务提供商和其他合作伙伴。我们将信息发送给支持我们业务的供应商、服务提供商和其他合作伙伴，这些支持包括受我们委托提供的技术基础设施服务、分析我们服务的使用方式、衡量广告和服务的有效性、提供客户服务、支付便利或进行学术研究和调查，这些信息难以与您的身份信息相关联，这些信息将帮助我们分析、衡量广告和相关服务的有效性。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
为保障我们客户端的稳定运行、功能实现，使您能够使用和享受更多的服务及功能，我们的应用中会嵌入授权合作伙伴的SDK。我们会对授权合作伙伴获取有关信息的应用程序接口（API）、软件工具开发包（SDK）进行严格的安全检测，并与授权合作伙伴约定严格的数据保护措施，令其按照本政策以及其他任何相关的保密和安全措施来处理个人信息。
|
||||
</p>
|
||||
<p>
|
||||
（二）转让
|
||||
</p>
|
||||
<p>
|
||||
我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：
|
||||
</p>
|
||||
<p>
|
||||
1、在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
2、在萤火商城服务提供者发生合并、收购或破产清算情形，或其他涉及合并、收购或破产清算情形时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本政策的约束，否则我们将要求该公司、组织和个人重新向您征求授权同意。
|
||||
</p>
|
||||
<p>
|
||||
（三）公开披露
|
||||
</p>
|
||||
<p>
|
||||
我们仅会在以下情况下，公开披露您的个人信息：
|
||||
</p>
|
||||
<p>
|
||||
1、获得您明确同意或基于您的主动选择，我们可能会公开披露您的个人信息；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
2、如果我们确定您出现违反法律法规或严重违反萤火商城平台相关协议及规则的情况，或为保护萤火商城平台用户或公众的人身财产安全免遭侵害，我们可能依据法律法规或征得您同意的情况下披露关于您的个人信息，包括相关违规行为以及萤火商城平台已对您采取的措施。
|
||||
</p>
|
||||
<p>
|
||||
（四）共享、转让、公开披露个人信息时事先征得授权同意的例外
|
||||
</p>
|
||||
<p>
|
||||
以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意：
|
||||
</p>
|
||||
<p>
|
||||
1、与国家安全、国防安全有关的；
|
||||
</p>
|
||||
<p>
|
||||
2、与公共安全、公共卫生、重大公共利益有关的；
|
||||
</p>
|
||||
<p>
|
||||
3、与犯罪侦查、起诉、审判和判决执行等司法或行政执法有关的；
|
||||
</p>
|
||||
<p>
|
||||
4、出于维护您或其他个人的生命、财产相关的重大合法权益但又很难得到本人同意的；
|
||||
</p>
|
||||
<p>
|
||||
5、您自行向社会公众公开的个人信息；
|
||||
</p>
|
||||
<p>
|
||||
6、从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开。
|
||||
</p>
|
||||
<p>
|
||||
请知悉，根据适用的法律，若我们对个人信息采取技术措施和其他必要措施进行处理，使得数据接收方无法重新识别特定个人且不能复原，则此类处理后数据的共享、转让、公开披露无需另行向您通知并征得您的同意。
|
||||
</p>
|
||||
<p>
|
||||
四、我们如何存储您的信息
|
||||
</p>
|
||||
<p>
|
||||
（一）存储地点
|
||||
</p>
|
||||
<p>
|
||||
我们在中华人民共和国境内运营中收集和产生的个人信息，将存储在中国境内。以下情形下，我们会在履行了法律规定的义务后，向境外实体提供您的个人信息：
|
||||
</p>
|
||||
<p>
|
||||
1、适用的法律有明确规定；
|
||||
</p>
|
||||
<p>
|
||||
2、获得您的明确授权；
|
||||
</p>
|
||||
<p>
|
||||
3、您通过互联网进行跨境交易等个人主动行为。
|
||||
</p>
|
||||
<p>
|
||||
针对以上情形，我们会通过合同等形式确保以不低于本政策规定的程度保护您的个人信息。
|
||||
</p>
|
||||
<p>
|
||||
（二）存储期限
|
||||
</p>
|
||||
<p>
|
||||
|
||||
我们会采取合理可行的措施，尽力避免收集和处理无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息，除非法律有强制的留存要求，例如《中华人民共和国电子商务法》要求商品和服务信息、交易信息保存时间自交易完成之日起不少于三年。我们判断个人信息的存储期限主要参考以下标准并以其中较长者为准：
|
||||
</p>
|
||||
<p>
|
||||
1、完成与您相关的交易目的、维护相应交易及业务记录，以应对您可能的查询或投诉；
|
||||
</p>
|
||||
<p>
|
||||
2、保证我们为您提供服务的安全和质量；
|
||||
</p>
|
||||
<p>
|
||||
3、您是否同意更长的留存期间；
|
||||
</p>
|
||||
<p>
|
||||
4、是否存在保留期限的其他特别约定。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在超出保留期间后，我们会在15天内根据适用法律的要求删除您的个人信息，或使其匿名化处理。此外，在注销账户后，我们将在15天内停止为您提供产品和服务，并根据您的要求，删除您的个人信息或匿名化处理，法律法规另有规定的除外。
|
||||
</p>
|
||||
<p>
|
||||
五、我们如何保护您的信息
|
||||
</p>
|
||||
<p>
|
||||
（一）我们已采取符合业界标准、合理可行的安全防护措施保护您的信息，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，在您的浏览器与服务器之间交换数据时受
|
||||
</p>
|
||||
<p>
|
||||
|
||||
SSL协议加密保护；我们同时对萤火商城网站提供HTTPS协议安全浏览方式；我们会使用加密技术提高个人信息的安全性；我们会使用受信赖的保护机制防止个人信息遭到恶意攻击；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息；以及我们会举办安全和隐私保护培训课程，加强员工对于保护个人信息重要性的认识。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（二）我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在达成本政策所述目的所需的期限内保留您的个人信息，除非法律有强制的存留要求，例如《中华人民共和国电子商务法》要求商品和服务信息、交易信息保存时间自交易完成之日起不少于三年。而我们判断前述期限的标准包括：
|
||||
</p>
|
||||
<p>
|
||||
1、完成与您相关的交易目的、维护相应交易及业务记录、应对您可能的查询或投诉；
|
||||
</p>
|
||||
<p>
|
||||
2、保证我们为您提供服务的安全和质量；
|
||||
</p>
|
||||
<p>
|
||||
3、您是否同意更长的留存期间；
|
||||
</p>
|
||||
<p>
|
||||
4、是否存在保留期限的其他特别约定。
|
||||
</p>
|
||||
<p>
|
||||
在您的个人信息超出保留期间后，我们会根据适用法律的要求删除您的个人信息，或使其匿名化处理。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（三）互联网并非绝对安全的环境，使用萤火商城平台服务时，我们强烈建议您不要使用非萤火商城平台推荐的通信方式发送您的信息。您可以通过我们的服务建立联系和相互分享。当您通过我们的服务创建交流、交易或分享时，您可以自主选择沟通、交易或分享的对象，作为能够看到您的交易内容、联络方式、交流信息或分享内容相关信息的第三方。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在使用萤火商城服务进行网上交易时，您不可避免地要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或联系地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息尤其是您的账户或密码发生泄露，请您立即联络萤火商城客服，以便我们根据您的申请采取相应措施。
|
||||
</p>
|
||||
<p>
|
||||
请注意，您在使用我们服务时自愿共享甚至公开分享的信息，可能会涉及您或他人的个人信息甚至个人敏感信息。请您更加谨慎地考虑，是否在使用我们的服务时共享甚至公开分享相关信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
请使用复杂密码，协助我们保证您的账号安全。我们将尽力保障您发送给我们的任何信息的安全性。如果我们的物理、技术或管理防护设施遭到破坏，导致信息被非授权访问、公开披露、篡改或毁坏，导致您的合法权益受损，我们将承担相应的法律责任。
|
||||
</p>
|
||||
<p>
|
||||
（四）我们将不定期更新并公开安全风险、个人信息安全影响有关内容，您可通过萤火商城公告方式获得。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
（五）在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施。事件相关情况我们将以邮件、信函、电话、推送通知的方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在不幸发生儿童个人信息安全事件后，我们将按照法律法规的要求，及时向儿童及其监护人告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、儿童及其监护人可自主防范和降低风险的建议、对儿童及其监护人的补救措施。我们将及时将事件相关情况以APP推送通知、发送邮件/短消息告知儿童及其监护人。难以逐一告知时，我们会采取合理、有效的方式发布相关警示信息。同时，我们还将按照监管部门要求，主动上报儿童个人信息安全事件的处置情况。若儿童及其监护人的合法权益受损，我们将依法承担相应的法律责任。同时，我们还将按照监管部门要求，上报个人信息安全事件的处置情况。
|
||||
</p>
|
||||
<p>
|
||||
六、您如何管理您的信息
|
||||
</p>
|
||||
<p>
|
||||
您可以通过以下方式访问及管理您的信息：
|
||||
</p>
|
||||
<p>
|
||||
（一）查询、更正和补充您的信息
|
||||
</p>
|
||||
<p>
|
||||
您有权查询、更正或补充您的信息。您可以通过以下方式自行进行：
|
||||
</p>
|
||||
<p>
|
||||
1、登录手机萤火商城客户端，进入“我的”页面，点击页面右上方设置的图标查询、更正个人资料及个人账户相关信息；
|
||||
</p>
|
||||
<p>
|
||||
（二）删除您的信息
|
||||
</p>
|
||||
<p>
|
||||
您可以通过“（一）查询、更正和补充您的信息”中列明的方式注销您的部分信息。
|
||||
</p>
|
||||
<p>
|
||||
在以下情形中，您可以向我们提出删除个人信息的请求：
|
||||
</p>
|
||||
<p>
|
||||
1、如果我们处理个人信息的行为违反法律法规；
|
||||
</p>
|
||||
<p>
|
||||
2、如果我们收集、使用您的个人信息，却未征得您的明确同意；
|
||||
</p>
|
||||
<p>
|
||||
3、如果我们处理个人信息的行为严重违反了与您的约定；
|
||||
</p>
|
||||
<p>
|
||||
4、如果您不再使用我们的产品或服务，或您主动注销了账号；
|
||||
</p>
|
||||
<p>
|
||||
5、如果我们永久不再为您提供产品或服务。
|
||||
</p>
|
||||
<p>
|
||||
若我们决定响应您的删除请求，我们还将同时尽可能通知从我们处获得您的个人信息的主体，并要求其及时删除（除非法律法规另有规定，或这些主体已独立获得您的授权）。
|
||||
</p>
|
||||
<p>
|
||||
当您或我们协助您删除相关信息后，因为适用的法律和安全技术，我们可能无法立即从备份系统中删除相应的信息，我们将安全地存储您的个人信息并将其与任何进一步处理隔离，直到备份可以清除或实现匿名。
|
||||
</p>
|
||||
<p>
|
||||
（三）改变您授权同意的范围
|
||||
</p>
|
||||
<p>
|
||||
|
||||
如果您不再选择将您的个人信息提供给我们或拒绝使用我们提供的部分服务，您可以通过设置您的智能移动设备关闭您授权给萤火商城的部分权限。以华为手机为例：通过手机中的“设置--隐私--权限管理”，选择关闭部分或全部您已授权给我们的权限。
|
||||
</p>
|
||||
<p>
|
||||
当您收回同意后，我们将不再处理相应的个人信息。但您收回同意的决定，不会影响此前基于您的授权而开展的个人信息处理。
|
||||
</p>
|
||||
<p>
|
||||
（四）约束信息系统自动决策
|
||||
</p>
|
||||
<p>
|
||||
|
||||
在某些业务功能中，我们可能仅依据信息系统、算法在内的非人工自动决策机制做出决定。如果这些决定显著影响您的合法权益，您有权要求我们做出解释，我们也将在不侵害萤火商城商业秘密或其他用户权益、社会公共利益的前提下提供申诉方法。
|
||||
</p>
|
||||
<p>
|
||||
（五）响应您的上述请求
|
||||
</p>
|
||||
<p>
|
||||
为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求。
|
||||
</p>
|
||||
<p>
|
||||
我们将在15天内做出答复。如您不满意，还可以通过萤火商城客服发起投诉。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将酌情收取一定费用。对于与您的身份不直接关联的信息、无端重复信息，或者需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者不切实际的请求，我们可能会予以拒绝。
|
||||
</p>
|
||||
<p>
|
||||
在以下情形中，按照法律法规要求，我们将无法响应您的请求：
|
||||
</p>
|
||||
<p>
|
||||
1、与国家安全、国防安全有关的；
|
||||
</p>
|
||||
<p>
|
||||
2、与公共安全、公共卫生、重大公共利益有关的；
|
||||
</p>
|
||||
<p>
|
||||
3、与犯罪侦查、起诉、审判和执行判决有关的；
|
||||
</p>
|
||||
<p>
|
||||
4、有充分证据表明个人信息主体存在主观恶意或滥用权利的；
|
||||
</p>
|
||||
<p>
|
||||
5、响应您的请求将导致您或其他个人、组织的合法权益受到严重损害的；
|
||||
</p>
|
||||
<p>
|
||||
6、涉及商业秘密的。
|
||||
</p>
|
||||
<p>
|
||||
七、我们如何处理未成年人的信息
|
||||
</p>
|
||||
<p>
|
||||
在电子商务活动中我们推定您具有相应的民事行为能力。如您为未成年人，我们要求您请您的父母或其他监护人仔细阅读本隐私政策，并在征得您的父母或其他监护人同意的前提下使用我们的服务或向我们提供信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
如果我们识别出您是儿童用户的，请您告知我们您的监护人信息，我们将通知您的监护人并要求您的监护人同意儿童个人信息收集使用规则。对于经父母或其他监护人同意使用我们的产品或服务而收集儿童个人信息的情况，我们只会在法律法规允许、父母或其他监护人明确同意或者保护儿童所必要的情况下使用、共享、转让或披露此信息。
|
||||
</p>
|
||||
<p>
|
||||
若您是儿童的父母或其他监护人，请您关注您监护的儿童是否是在取得您的授权同意之后使用我们的服务的。如您对您所监护的儿童的个人信息有疑问，请通过第九节中的联系方式与我们联系。
|
||||
</p>
|
||||
<p>
|
||||
八、您的信息如何在全球范围转移
|
||||
</p>
|
||||
<p>
|
||||
我们在中华人民共和国境内运营中收集和产生的个人信息，存储在中国境内，以下情形除外：
|
||||
</p>
|
||||
<p>
|
||||
1、适用的法律有明确规定；
|
||||
</p>
|
||||
<p>
|
||||
2、获得您的明确授权；
|
||||
</p>
|
||||
<p>
|
||||
3、您通过互联网进行跨境交易的个人主动行为。
|
||||
</p>
|
||||
<p>
|
||||
针对以上情形，我们会确保依据本隐私政策对您的个人信息提供足够的保护。
|
||||
</p>
|
||||
<p>
|
||||
九、本隐私政策如何更新
|
||||
</p>
|
||||
<p>
|
||||
我们的隐私政策可能变更。
|
||||
</p>
|
||||
<p>
|
||||
未经您明确同意，我们不会限制您按照本隐私政策所应享有的权利。我们会在App上发布对隐私政策的更新。
|
||||
</p>
|
||||
<p>
|
||||
对于重大变更，我们还会提供更为显著的通知（包括我们会通过萤火商城公示的方式进行通知甚至向您提供弹窗提示）。
|
||||
</p>
|
||||
<p>
|
||||
本政策所指的重大变更包括但不限于：
|
||||
</p>
|
||||
<p>
|
||||
1、我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式；
|
||||
</p>
|
||||
<p>
|
||||
2、我们在控制权方面发生重大变化。如并购重组引起的信息控制者变更；
|
||||
</p>
|
||||
<p>
|
||||
3、个人信息共享、转让或公开披露的主要对象发生变化；
|
||||
</p>
|
||||
<p>
|
||||
4、您参与个人信息处理方面的权利及其行使方式发生重大变化；
|
||||
</p>
|
||||
<p>
|
||||
5、我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化；
|
||||
</p>
|
||||
<p>
|
||||
6、个人信息安全影响评估报告表明存在高风险。
|
||||
</p>
|
||||
<p>
|
||||
十、如何联系我们
|
||||
</p>
|
||||
<p>
|
||||
您可以通过以下方式与我们联系，我们将在15天内回复您的请求：
|
||||
</p>
|
||||
<p>
|
||||
1、如对本政策内容、儿童个人信息有任何疑问、意见或建议，您可通过萤火商城客服邮箱：admin@yiovo.com与我们联系。
|
||||
</p>
|
||||
<p>
|
||||
2、如发现个人信息可能被泄露，您可以联系我们的客服人员进行投诉举报；
|
||||
</p>
|
||||
<p>
|
||||
如果您对我们的回复不满意，特别是您认为我们的个人信息处理行为损害了您的合法权
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
604
sub_pages/app-plus/protocol.html
Executable file
604
sub_pages/app-plus/protocol.html
Executable file
@@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>服务协议</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: monospace;
|
||||
line-height: 1.6;
|
||||
font-size: 10pt;
|
||||
padding: 10pt 10pt;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-bottom: 8pt;
|
||||
}
|
||||
|
||||
.mg-6 {
|
||||
margin-top: 6pt;
|
||||
margin-bottom: 6pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 请查找并替换本文中的关键词字样 -->
|
||||
<!-- 关键词: 萤火商城 -->
|
||||
<!-- 关键词: 烟台晴好网络科技有限公司 -->
|
||||
<!-- 关键词: admin@yiovo.com -->
|
||||
<div class="content">
|
||||
<h2 class="title">服务协议</h2>
|
||||
<p>
|
||||
|
||||
本应用在此特别提醒，在您注册使用本应用提供的软件、小程序、网站等（以下统称“本应用产品和服务”或“本应用”）前，仔细阅读本《服务协议》（下称本协议）中的各个条款，尤其是以粗体或下划线标示的条款，包括但不限于免除或者限制本应用责任的条款、对用户权利进行限制的条款以及约定争议解决方式、司法管辖的条款。您有权同意或者不同意本协议。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
如您决定注册使用本应用，完成我们的注册流程并通过点击同意的形式在线签署本协议即表示您已充分理解并同意接受本协议所有及任何条款的约束。本协议包括我们根据法律法规规定、本协议制定的其他政策、规则、公告声明以及本协议包含的超链接协议等（除非特有所指，合称为“本协议”）。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第一条 本应用平台服务</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. 本协议是由烟台晴好网络科技有限公司的萤火商城APP（简称“本应用”或者“我们”）与用户（或称为“您”）就您使用本应用产品和服务所做的权利义务的约定。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 本应用平台为用户提供以下平台服务：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（1）为您展示商品或服务
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
本应用会为您展示商品或服务的相关信息，供您浏览、了解所需的商品或服务。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（2）为您推送商品或服务
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
本应用会为您制定更符合您喜好和需求的个性化推送商品或服务的页面展示和搜索结果，提升您的使用体验。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（3）为您在购物平台上购买商品或服务提供优惠通道
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
当您欲购买在本应用上浏览的商品或服务时，您通过本应用领取优惠券或其他福利后，直接进入销售该商品或服务的淘宝、天猫店铺和其他商家店铺并完成下单流程。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（4）为您提供持续、稳定的技术平台服务
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
无论用户是否登录APP，本应用将持续、稳定的为您提供技术平台服务，直至您以书面告知或注销账户的方式停止使用本应用服务。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
4.
|
||||
使用本应用或通过本应用相关链接产生的购买行为应当基于真实的消费需求，不得存在对商品及/或服务实施恶意购买、恶意维权等扰乱电商平台正常交易秩序的行为。若您严重违背社会公德、提供虚假注册身份信息、经我们判定认为存在恶意退货或不合常理的高退货率以及其他不符合正常消费习惯的情形、或经判定认为属于损害本应用不正当行为时，基于维护交易秩序及交易安全的需要，本应用发现上述情形时有权主动执行对订单不予结算、冻结该用户账号等操作。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
5. 为了更好的服务用户，本应用可能会不定时举办各类活动，如果您选择参加活动，应当认真查阅各类活动另行制定的规则。您同意不会采取作弊、利用系统漏洞等手段扰乱本应用秩序。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第二条 用户账户的注册、使用与注销</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1.
|
||||
本应用重视未成年人的安全与个人信息保护，注册本应用的用户应是具备完全民事行为能力和民事权利能力的自然人。用户一旦注册成功，我们将推定您具有相应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因使用本APP而可能产生的一切法律后果。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2.
|
||||
用户应提供本人正在合法有效使用的手机号码进行“本应用”账号注册，并且您同意本应用将您手机号码及手机设备识别码等作为用户身份识别信息。该号码是我们与您联系的重要渠道，如发生变更，应及时通知我们。否则，可能会因无法有效联系到您，或无法及时处理与您相关的争议等事项而影响您的相关权益。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3.
|
||||
用户注册账号所提供和使用的信息应当真实、有效、合法。注册成功后，本应用将为您配置账户，该账户之所有权本应用所有，您在本协议有效期内仅享有使用权。由于账户关联用户的个人信息及本应用商业信息，该账户仅限您本人使用，未经本应用书面同意，您不得出借、出租或作其它形式的转让。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
4.
|
||||
本应用有权根据法律法规或政策规定，或根据自行制定的规范或规则，对违规、不当使用账户等行为予以限制或予以注销，如本应用判断您的账户可能涉及信息泄漏及/或影响本应用信息安全或者正常运营的及/或侵害或影响其他用户权益的，本应用可拒绝向您提供服务或终止本协议。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
5.
|
||||
用户可以申请注销已注册的账户。如果您需要注销您的帐户，我们将在核实您的身份、要求您完成未完成的交易、完成资金结算等（例如已充值或已获得的虚拟资产等）后，为您提供帐户注销服务。在账户注销完成后，本应用不在为您提供任何服务。账户注销后，您的个人信息我们会使其在前台系统保持不可检索、访问的状态，或对其进行匿名化处理。您知晓，根据法律法规规定，相关交易信息保存时间应自交易完成之日起不少于三年。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
6.
|
||||
为使您更好地使用本应用的各项服务，并保障您的账户安全，我们将按照相关法律法规规定要求您完成实名认证。如涉及第三方支付、资金结算或其他可能需要您提供银行卡信息的业务，您应当保证提供的银行帐户信息或第三方支付帐户信息真实、有效、合法，且属于您本人所有，我们及关联公司或我们合作的第三方支付机构将根据您提供的银行帐户信息或第三方支付帐户信息与您进行资金结算。您提供的银行帐户信息或第三方支付帐户信息错误或您拒绝提供，您应当理解您将无法使用本APP部分功能、第三方支付机构提供的支付功能以及您将无法获得结算资金。您理解并同意如因您未能提供有效的上述信息导致资金无法结算时，该部分资金不会因为未支付给您而产生利息。我们可以向您发送通知以便于您可以及时提供信息，若超出一定时间未得到回复，我们有权收回该部分结算资金自行处理。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
7.
|
||||
如发现任何未经您授权使用您的账户登录本应用的情形，我们建议您第一时间与我们联系，但您应理解本应用对任何请求采取行动均需要合理时间，且本应用所采取的行动可能无法避免或者阻止侵害结果的形成或者扩大，除本应用存在法定过错外，本应用不对该侵害结果及扩大承担任何责任。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第三条 用户个人信息收集、使用与保护</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. 详见《隐私协议》。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 《隐私协议》是本协议正文的主要组成部分，与本协议共同约束用户与本应用。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3.
|
||||
本应用接入第三方SDK初衷是为了向用户提供更成熟、优质的平台技术服务，有关服务可能会涉及到个人信息收集，在收集用户信息之前，本应用会征求您的授权同意。如您对此存在疑问，您可以通过附件链接查阅第三方SDK发布的隐私协议。您的明示授权或继续使用，将视为您同意信息的合理采集以及相关的隐私协议。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第四条 本应用使用规范</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1.
|
||||
用户在注册、使用本应用过程中制作、复制、发布、上传、传播的任何形式的内容，包括但不限于账号头像、昵称、标签、地址等注册信息及认证资料，或以文字、语音、图片、视频、图文等任何形式发送、回复或自动回复的消息、相关链接页面以及其他使用账号或本服务所产生的内容均不得违反现行法律、法规、规章、政策规定。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 如果用户在境外注册、使用本应用，应同时遵守所在地或相关国家（地区）的法律法规。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3. 用户不得利用“本应用”账号或提供的服务以任何形式制作、复制、发布、上传、传播如下法律、法规和政策禁止的内容：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(1) 反对宪法所确定的基本原则的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(2) 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(3) 损害国家荣誉和利益的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(4) 煽动民族仇恨、民族歧视，破坏民族团结的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(5) 破坏国家宗教政策，宣扬邪教和封建迷信的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(6) 散布谣言，扰乱社会秩序，破坏社会稳定的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(7) 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(8) 侮辱或者诽谤他人，侵害他人合法权益的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(9) 含有法律、行政法规禁止的其他内容的信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
4.用户不得利用“本应用”账号或服务以任何形式制作、复制、发布、上传、传播如下干扰“本应用”正常运营，以及侵犯其他用户或第三方合法权益的内容：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(1) 含有任何性或性暗示的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(2) 含有辱骂、恐吓、威胁内容的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(3) 含有骚扰、垃圾广告、恶意信息、诱骗信息的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(4) 涉及他人隐私、个人信息或资料的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(5) 侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(6) 含有其他干扰本服务正常运营和侵犯其他用户或第三方合法权益内容的信息。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
5. 用户不得利用“本应用”账号或服务进行如下行为：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(1) 提交、发布虚假信息，或盗用他人头像或资料，冒充、利用他人名义的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(2) 虚构事实、隐瞒真相以误导、欺骗他人的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(3) 利用技术手段批量建立虚假账号的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(4) 利用“本应用”账号或服务从事任何违法犯罪活动的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(5) 制作、发布与以上行为相关的方法、工具，或对此类方法、工具进行运营或传播，无论这些行为是否为商业目的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
(6) 其他违反法律法规规定、侵犯其他用户合法权益、干扰“本应用”正常运营或本应用未明示授权的行为。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
6.
|
||||
用户不得利用或针对本应用及相关服务进行任何危害计算机网络安全、危害社会经济秩序的相关行为，如果我们有理由认为您的行为违反或可能违反上述约定的，我们可独立进行判断并处理，且在任何时候有权在不事先通知的情况下终止向您提供服务，并依法追究相关责任。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
7.
|
||||
用户不得以本应用的名义传送或发布信息；也不得以易被公众或第三方混淆为本应用官方意见的方式传送或发布信息。用户在本应用传送、发布的任何内容并不反映或代表，也不得被视为反映或代表本应用的观点、立场；用户须保证其通过“本应用”账号或服务所传送的信息真实、合法、无害、准确、有效。如因用户传送的信息违法、给本应用或第三方造成损害的，用户应当依法予以赔偿，本应用有权依据法律法规、政策、本协议条款对相关违法、错误信息作出的处理。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
8. 经许可后，用户、第三方对本APP软件及相关服务的信息内容的分享、转发等行为，应符合以下规范：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（1）对抓取、统计、获得的相关搜索热词、命中率、分类、搜索量、点击率、阅读量等相关数据，未经公司事先书面同意，不得将上述数据以任何方式公示、提供、泄露给任何第三人；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（2）不得对本APP软件及相关服务的源网页进行任何形式的任何改动，包括但不限于本APP软件及相关服务的首页链接、广告系统链接等入口，也不得对本APP软件及相关服务的源页面的展示进行任何形式的遮挡、插入、弹窗等妨碍；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（4）不得把相关数据内容用于公司许可范围之外的目的，进行任何形式的销售和商业使用，或向第三方泄露、提供或允许第三方为任何方式的使用。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（5）用户向任何第三人分享、转发、复制本APP软件及相关服务信息内容的行为，还应遵守公司为此制定的其他规范和标准。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
9.
|
||||
未经本应用许可，任何人不得以包括通过机器人、蜘蛛等程序或设备监视、复制、传播、展示、镜像、上载、下载等方式直接或间接盗取本APP软件及相关服务的视频、图文等信息内容，或以任何方式（包括但不限于隐藏或者修改域名、平台特有标识、用户名等）删除或改变相关信息内容的权利管理电子信息。本应用等文字及/或标识，以及其他标识、徽记、产品和服务名称均为本应用所有，如有宣传、展示等任何使用需要，您必须取得本应用事先书面授权。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第五条 违规用户的处理</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1.
|
||||
如果本应用发现用户有违反法律法规、政策规定、“外部电商平台”管理规定、本协议条款约定，或被其他用户投诉具有违反法律法规、政策规定、本协议条款约定的行为，本应用有权依据法律法规、政策及本协议条款对用户的违法、错误的行为或内容进行处理，并视情节轻重对违规的用户处以包括但不限于警告、账号封禁、功能封禁、账户冻结、不予结算资金等处罚，并将有关违法信息向有关部门报告，用户应承担由此产生的一切法律后果。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 本应用对上述违规内容的违规内容的审查仅为初步表面审查，不对审查结论承担责任；如果用户对处理结果存在异议，则应提供相应的证明文件，并与我们或投诉方沟通或采取法律途径解决争议。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3.
|
||||
因用户违反法律法规、政策规定、本协议约定或发生其它过错，导致任何第三方向本应用或其合作方、关联方主张任何索赔、要求的，用户应承担相关责任。如果因此造成本应用或其合作方、关联方承担相关责任或发生其他任何损失的，包括律师费、调查取证费、电子数据公证费、差旅费等，本应用或其合作方、关联方有权要求该用户承担赔偿责任或者向该用户追偿。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
4.
|
||||
被处理用户如对投诉内容或处理决定有异议，可提交申诉意见，本应用将对申诉进行审查，并自行合理判断决定是否变更处罚措施。对于因投诉所导致的处理，本应用仍有权根据投诉方与用户共同确定的意见或司法机关生效法律文书增加、变更或撤销对用户的处理。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<strong>第六条本协议的生效、变更与终止</strong>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. 本协议自您勾选并点击“我已阅读并同意”本协议时即生效。如未点击确认本协议之前事实上已在使用本平台功能的，则本协议在您的事实行为发生之时生效。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2.
|
||||
由于互联网行业发展迅速、APP及服务频繁迭代更新等特点，我们可能会对相关的产品或服务进行升级优化，您理解并同意我们会根据商业需要，在符合法律规定的情况下对本协议的部分条款进行更新，更新后的协议条款将代替原来的协议并在正式发布之日起生效，您可以在相关服务页面查阅最新版本的协议条款。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3.
|
||||
如本协议后续发生变更，我们在APP公布更新后的协议，该公布行为视为我们已通知您更新内容。我们也可能会采用本协议约定的其他通知方式通知您。如您对更新后的服务协议有任何疑问，您可通过本协议提及的联系邮箱向本应用工作人员反馈，我们会及时为您解答。如您不同意更新后的协议，您可以停止使用本APP,本协议修改后，如果您继续使用本APP的，即视为您已接受修改后的协议。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
4. 存在以下任一情形的，本协议在用户与本应用之间终止。因终止本协议给对方或其他第三方合法权益造成损失的，有权要求对造成的损失承担法律责任：
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（1）用户账号注销的，本协议自注销之日起在用户和本应用之间终止；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（2）因违反法律法规、政策规定或本协议约定导致本协议终止的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（3）因 任一方违反本协议约定、发生其他违法或不当行为导致本协议终止的；
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
（4）发生其他导致本协议终止的情形。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
5. 本协议终止时，本应用有权要求您就您账户下未完成的交易、未支付的订单、未结算的资金等进行处理，若您在合理时间内未处理，本应用有权以合理的方式代为处理，并就处理过程中可能带来损失的向您追偿。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
第七条 争议解决条款
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
本协议的效力、解释及纠纷的解决，适用于中华人民共和国法律。若用户和本应用之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，用户同意将纠纷或争议提交本应用住所地有管辖权的人民法院管辖。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
第八条 不可抗力条款
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. “不可抗力”是指本协议双方不能合理控制、不可预见或即使预见亦无法避免的事件，该事件妨碍、影响或延误任何一方根据本协议履行其全部或部分义务。该事件包括但不限于政府行为、自然灾害、战争或任何其他类似事件。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 遭受不可抗力事件的一方可暂行中止履行本合同项下的义务直至不可抗力事件的影响消除为止并且无需为此而承担违约责任；但应尽最大努力克服该事件，减轻负面影响。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
第九条其他条款
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
1. 除非我们另行声明，本应用的所有产品、技术、软件、程序、数据及其他信息（包括文字、图标、图片、照片、音频、视频、图表、色彩组合、版面设计等）的所有权利（包括版权、商标权、专利权、商业秘密及其他相关权利）均归本应用所有。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
2. 用户理解并接受：本协议的正文还包括《隐私协议》，与本协议具有同等法律效力，共同约束用户与本应用。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
3. 本协议的任何条款不论因何种原因无效或不具可执行性，不影响其余条款在用户与本应用双方之间的法律效力。
|
||||
</p>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
4. 如您对本协议条款有任何疑问或者需要帮助，您可通过客服邮箱：admin@yiovo.com与我们联系。
|
||||
</p>
|
||||
<p>
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
244
sub_pages/certification/car/car.vue
Normal file
244
sub_pages/certification/car/car.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form">
|
||||
<u--form :model="form" ref="uForm" label-width="200rpx">
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="车辆品牌" prop="carBrand" borderBottom>
|
||||
<u-input v-model="form.carBrand" maxlength="20" :disabled="isEdit" placeholder="车辆品牌" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="upload">
|
||||
<u-upload :fileList="fileList1" :maxSize="3145728" width="250" height="150"
|
||||
@afterRead="afterRead" @delete="deletePic" :disabled="isEdit" name="1" multiple :maxCount="1">
|
||||
<view class="id-card-upload">
|
||||
<image class="photograph" src="../../../static/icon/photograph.png" mode="widthFix">
|
||||
</image>
|
||||
<text>上传行驶证照片</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="desc-title">请上传您的行驶证照片</view>
|
||||
<view class="desc"><text>您上传的照片资料仅作为认证使用，并将加密处理</text></view>
|
||||
<view class="photo">
|
||||
<image src="https://file.wsdns.cn/20230619/94d1dba25b104bc89373fc3503049aba.png"
|
||||
style="width: 700rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="submitText" color="linear-gradient(to bottom, #010002, #681752)" :disabled="isEdit"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as CertificateApi from '@/api/love-certificate.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
certificateType: 'car',
|
||||
userId
|
||||
},
|
||||
fileList1: [],
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
isEdit: false,
|
||||
submitText: '提交认证信息'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
CertificateApi.listCertificate({
|
||||
userId,
|
||||
certificateType: 'car',
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
app.form = res.data[0]
|
||||
app.fileList1 = JSON.parse(res.data[0].files)
|
||||
|
||||
if(app.form.status == 10){
|
||||
app.submitText = '认证中'
|
||||
app.isEdit = true
|
||||
}
|
||||
if(app.form.status == 20){
|
||||
app.submitText = '提交认证信息'
|
||||
app.isEdit = false
|
||||
}
|
||||
if(app.form.status == 30){
|
||||
app.submitText = '已通过'
|
||||
app.isEdit = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.form.city = data[1].label
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if(app.fileList1.findIndex(item => item.status != 'success') >= 0){
|
||||
return
|
||||
}
|
||||
if (app.disabled === true) return
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
const saveCertificate = app.isEdit ? CertificateApi.updateCertificate : CertificateApi.addCertificate
|
||||
saveCertificate(app.form).then(result => {
|
||||
app.$success('提交成功')
|
||||
this.getData()
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: auto;
|
||||
width: 700rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.u-input {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 360rpx;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
|
||||
.id-card-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
color: #cccccc;
|
||||
border: 5rpx dashed #d9d9d9;
|
||||
border-radius: 20rpx;
|
||||
width: 360rpx;
|
||||
height: 220rpx;
|
||||
|
||||
.photograph {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #cccccc;
|
||||
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
313
sub_pages/certification/certification.vue
Normal file
313
sub_pages/certification/certification.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-bg">
|
||||
<view class="title">认证越多 曝光率越高</view>
|
||||
<view class="content">
|
||||
<view>进行认证可提升您的综合竞争力</view>
|
||||
<view>可获得优先匹配和更多推荐机会</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-list">
|
||||
<view class="item" v-for="(item, index) in list" :key="index" @click="navTo(item)">
|
||||
<view class="content">
|
||||
<view class="icon">
|
||||
<image :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="title">{{ item.name }}</view>
|
||||
<view class="desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
{{item.submitText}}
|
||||
<u-icon name="arrow-right" color="#681752"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <u-list @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.name}`" :icon="item.icon">
|
||||
<view slot="right-icon" class="follow-btn" @click="navTo(item)">
|
||||
<text>aa{{ item.submitText }}</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty v-if="list.length == 0" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CertificateApi from '@/api/love-certificate.js'
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
userId
|
||||
},
|
||||
list: [{
|
||||
type: 'idCard',
|
||||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/idcard.png',
|
||||
name: '身份认证',
|
||||
desc: '远离骗子与婚托，真诚交友安全有保障',
|
||||
url: 'sub_pages/certification/id-card/id-card',
|
||||
submitText: '去认证',
|
||||
isEdit: false
|
||||
},
|
||||
{
|
||||
type: 'house',
|
||||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/house.png',
|
||||
name: '房屋认证',
|
||||
desc: '有趣的灵魂万里挑一，遇见同频的TA',
|
||||
url: 'sub_pages/certification/house/house',
|
||||
submitText: '去认证',
|
||||
isEdit: false
|
||||
},
|
||||
{
|
||||
type: 'education',
|
||||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/xueli.png',
|
||||
name: '学历认证',
|
||||
desc: '有车一族，来一场说走就走的旅行',
|
||||
url: 'sub_pages/certification/education/education',
|
||||
submitText: '去认证',
|
||||
isEdit: false
|
||||
},
|
||||
{
|
||||
type: 'car',
|
||||
icon: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/card.png',
|
||||
name: '车辆认证',
|
||||
desc: '完成房产认证，证实你的实力',
|
||||
url: 'sub_pages/certification/car/car',
|
||||
submitText: '去认证',
|
||||
isEdit: false
|
||||
}
|
||||
],
|
||||
page: 0,
|
||||
where: {},
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
},
|
||||
onShow() {
|
||||
console.log("onSHow");
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
CertificateApi.listCertificate(form).then(res => {
|
||||
res.data.map(d => {
|
||||
if(d.certificateType == 'idCard' ){
|
||||
if(d.status == 30){
|
||||
app.list[0].submitText = '已认证'
|
||||
app.list[0].isEdit = true
|
||||
}else if(d.status == 20){
|
||||
app.list[0].submitText = '已驳回'
|
||||
app.list[0].isEdit = false
|
||||
}else if(d.status == 10){
|
||||
app.list[0].submitText = '认证中'
|
||||
app.list[0].isEdit = false
|
||||
}
|
||||
}
|
||||
if(d.certificateType == 'house' ){
|
||||
if(d.status == 30){
|
||||
app.list[1].submitText = '已认证'
|
||||
app.list[1].isEdit = true
|
||||
}else if(d.status == 20){
|
||||
app.list[1].submitText = '已驳回'
|
||||
app.list[1].isEdit = false
|
||||
}else if(d.status == 10){
|
||||
app.list[1].submitText = '认证中'
|
||||
app.list[1].isEdit = true
|
||||
}
|
||||
}
|
||||
if(d.certificateType == 'education' ){
|
||||
if(d.status == 30){
|
||||
app.list[2].submitText = '已认证'
|
||||
app.list[2].isEdit = true
|
||||
}else if(d.status == 20){
|
||||
app.list[2].submitText = '已驳回'
|
||||
app.list[2].isEdit = false
|
||||
}else if(d.status == 10){
|
||||
app.list[2].submitText = '认证中'
|
||||
app.list[2].isEdit = true
|
||||
}
|
||||
}
|
||||
if(d.certificateType == 'car'){
|
||||
if(d.status == 30){
|
||||
app.list[3].submitText = '已认证'
|
||||
app.list[3].isEdit = true
|
||||
}else if(d.status == 20){
|
||||
app.list[3].submitText = '已驳回'
|
||||
app.list[3].isEdit = false
|
||||
}else if(d.status == 10){
|
||||
app.list[3].submitText = '认证中'
|
||||
app.list[3].isEdit = true
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
return new Promise((resolve, reject) => {
|
||||
UserProfileApi.pageUserProfile(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if (result.data.count > app.list.length) {
|
||||
app.canReset = true
|
||||
} else {
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
navTo(item) {
|
||||
console.log("item: ",item);
|
||||
|
||||
this.$push(item.url)
|
||||
},
|
||||
onFollow(e) {
|
||||
console.log("e11: ", e);
|
||||
},
|
||||
onSearch() {
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
// background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin: 0 auto;
|
||||
.list{
|
||||
.icon{
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item{
|
||||
width: 660rpx;
|
||||
height: 130rpx;
|
||||
margin: 50rpx auto;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 20rpx;
|
||||
.content{
|
||||
display: flex;
|
||||
.icon{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
margin-left: 16rpx;
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
padding-bottom: 5rpx;
|
||||
}
|
||||
.desc{
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
font-size: 28rpx;
|
||||
color: #681752;
|
||||
width: 120rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
width: 750rpx;
|
||||
height: calc(200rpx + var(--status-bar-height));
|
||||
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.title{
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.content{
|
||||
color: #f3f3f3;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
285
sub_pages/certification/education/education.vue
Normal file
285
sub_pages/certification/education/education.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form">
|
||||
<u--form :model="form" ref="uForm" label-width="200rpx">
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="学历" prop="education" borderBottom @click="showEducation">
|
||||
<u-input v-model="form.education" :disabled="true" :customStyle="{backgroundColor: '#ffffff'}" placeholder="选择学历" class="u-input" maxlength="20" />
|
||||
</u-form-item>
|
||||
<u-form-item label="认证方式" prop="authType" borderBottom @click="showAuthType">
|
||||
<u-input v-model="form.authType" :disabled="true" :customStyle="{backgroundColor: '#ffffff'}" placeholder="选择认证方式" class="u-input" maxlength="20" />
|
||||
</u-form-item>
|
||||
<u-form-item label="毕业院校" prop="college">
|
||||
<u-input v-model="form.college" :disabled="isEdit" placeholder="毕业院校" class="u-input" maxlength="20" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="upload">
|
||||
<u-upload :fileList="fileList1" :maxSize="3145728" width="250" height="150"
|
||||
@afterRead="afterRead" @delete="deletePic" :disabled="isEdit" name="1" multiple :maxCount="1">
|
||||
<view class="id-card-upload">
|
||||
<image class="photograph" src="../../../static/icon/photograph.png" mode="widthFix">
|
||||
</image>
|
||||
<text>上传学历认证照片</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="去学信网截图" prop="authType">
|
||||
<!-- <u-input v-model="form.authType" class="u-input" maxlength="20" /> -->
|
||||
</u-form-item>
|
||||
<view class="desc"><text>登录学信网->在线验证报告，截图后返回上传即可</text></view>
|
||||
<view class="photo">
|
||||
<image src="https://file.wsdns.cn/20230619/e259164339364fb1b2bc43fc50b21c50.png"
|
||||
style="width: 700rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="submitText" color="linear-gradient(to bottom, #010002, #681752)" :disabled="isEdit"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as CertificateApi from '@/api/love-certificate.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
certificateType: 'education',
|
||||
userId,
|
||||
education: '',
|
||||
authType: ''
|
||||
},
|
||||
educationColumns: [''],
|
||||
fileList1: [],
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
isEdit: false,
|
||||
submitText: '提交认证信息'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
CertificateApi.listCertificate({
|
||||
userId,
|
||||
certificateType: 'education',
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
app.form = res.data[0]
|
||||
app.fileList1 = JSON.parse(res.data[0].files)
|
||||
|
||||
if(app.form.status == 10){
|
||||
app.submitText = '认证中'
|
||||
app.isEdit = true
|
||||
}
|
||||
if(app.form.status == 20){
|
||||
app.submitText = '提交认证信息'
|
||||
app.isEdit = false
|
||||
}
|
||||
if(app.form.status == 30){
|
||||
app.submitText = '已通过'
|
||||
app.isEdit = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
showEducation() {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
const itemList = ['专科以下','专科','本科','硕士研究生','博士研究生'];
|
||||
uni.showActionSheet({
|
||||
itemList,
|
||||
success: ({tapIndex}) => {
|
||||
this.form.education = itemList[tapIndex]
|
||||
}
|
||||
})
|
||||
},
|
||||
showAuthType() {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
const itemList = ['学信网截图','毕业证/学位证','在校（学生证/在读证明）'];
|
||||
uni.showActionSheet({
|
||||
itemList,
|
||||
success: ({tapIndex}) => {
|
||||
this.form.authType = itemList[tapIndex]
|
||||
}
|
||||
})
|
||||
},
|
||||
onArea() {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.form.city = data[1].label
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
console.log('result: ',result);
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if(app.fileList1.findIndex(item => item.status != 'success') >= 0){
|
||||
return
|
||||
}
|
||||
if (app.disabled === true) return
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
const saveCertificate = app.isEdit ? CertificateApi.updateCertificate : CertificateApi.addCertificate
|
||||
saveCertificate(app.form).then(result => {
|
||||
app.$success('提交成功')
|
||||
this.getData()
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: auto;
|
||||
width: 700rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.u-input {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 360rpx;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
|
||||
.id-card-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
color: #cccccc;
|
||||
border: 5rpx dashed #d9d9d9;
|
||||
border-radius: 20rpx;
|
||||
width: 360rpx;
|
||||
height: 220rpx;
|
||||
|
||||
.photograph {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #cccccc;
|
||||
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
251
sub_pages/certification/house/house.vue
Normal file
251
sub_pages/certification/house/house.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form">
|
||||
<u--form :model="form" ref="uForm" label-width="200rpx">
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="房产所在城市" prop="cityByHouse" @click="onArea">
|
||||
<u-input v-model="form.cityByHouse" :disabled="true" :customStyle="{backgroundColor: '#ffffff'}" placeholder="选择房产所在城市" class="u-input" maxlength="20" />
|
||||
<!-- <view class="">
|
||||
<view style="border: solid 1px #eeeeee;height: 60rpx;border-radius: 10rpx;line-height: 60rpx;padding-left: 10rpx;margin:0 10rpx;">
|
||||
{{ form.cityByHouse }}
|
||||
</view>
|
||||
</view> -->
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="upload">
|
||||
<u-upload :fileList="fileList1" :maxSize="3145728" width="250" height="150"
|
||||
@afterRead="afterRead" @delete="deletePic" :disabled="isEdit" name="1" multiple :maxCount="1">
|
||||
<view class="id-card-upload">
|
||||
<image class="photograph" src="../../../static/icon/photograph.png" mode="widthFix">
|
||||
</image>
|
||||
<text>上传证件照片</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="desc-title">请上传房产证内页或房购房合同内页，需露出署名：</view>
|
||||
<view class="desc"><text>您上传的照片资料仅作为认证使用，并将加密处理</text></view>
|
||||
<view class="photo">
|
||||
<image src="https://file.wsdns.cn/20230619/432114c901dc499197c63e247fafdae6.png" style="width: 400rpx;" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="submitText" color="linear-gradient(to bottom, #010002, #681752)" :disabled="isEdit"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as CertificateApi from '@/api/love-certificate.js'
|
||||
import Vue from 'vue'
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
userId,
|
||||
certificateType: 'house',
|
||||
cityByHouse: ''
|
||||
},
|
||||
fileList1: [],
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
isEdit: false,
|
||||
submitText: '提交认证信息'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
CertificateApi.listCertificate({
|
||||
userId,
|
||||
certificateType: 'house',
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
app.form = res.data[0]
|
||||
app.fileList1 = JSON.parse(res.data[0].files)
|
||||
|
||||
if(app.form.status == 10){
|
||||
app.submitText = '认证中'
|
||||
app.isEdit = true
|
||||
}
|
||||
if(app.form.status == 20){
|
||||
app.submitText = '提交认证信息'
|
||||
app.isEdit = false
|
||||
}
|
||||
if(app.form.status == 30){
|
||||
app.submitText = '已通过'
|
||||
app.isEdit = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onArea() {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const app = this
|
||||
const data = e.value
|
||||
app.form.cityByHouse = data[1].label
|
||||
// Vue.set(this.form, 'cityByHouse', data[1].label)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if(app.fileList1.findIndex(item => item.status != 'success') >= 0){
|
||||
return
|
||||
}
|
||||
if (app.disabled === true) return
|
||||
console.log("app.tempFile: ", app.tempFile);
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
const saveCertificate = app.isEdit ? CertificateApi.updateCertificate : CertificateApi.addCertificate
|
||||
saveCertificate(app.form).then(result => {
|
||||
app.$success('提交成功')
|
||||
this.getData()
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.form{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: auto;
|
||||
width: 700rpx;
|
||||
font-size: 28rpx;
|
||||
.u-input{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.upload {
|
||||
width: 360rpx;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
|
||||
.id-card-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
color: #cccccc;
|
||||
border: 5rpx dashed #d9d9d9;
|
||||
border-radius: 20rpx;
|
||||
width: 360rpx;
|
||||
height: 220rpx;
|
||||
|
||||
.photograph {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
.desc{
|
||||
color: #cccccc;
|
||||
text{
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
258
sub_pages/certification/id-card/id-card.vue
Normal file
258
sub_pages/certification/id-card/id-card.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form">
|
||||
<u--form :model="form" ref="uForm" label-width="170rpx">
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="真实姓名" prop="realName" borderBottom>
|
||||
<u-input v-model="form.realName" maxlength="20" :disabled="isEdit" placeholder="真实姓名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="身份证号" prop="certificateCode">
|
||||
<u-input v-model="form.certificateCode" maxlength="20" :disabled="isEdit" placeholder="身份证号" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="upload">
|
||||
<u-upload :fileList="fileList1" :maxSize="1048576" width="190" height="120"
|
||||
@afterRead="afterRead" @delete="deletePic" :disabled="isEdit" name="1" multiple :maxCount="2">
|
||||
<view class="id-card-upload">
|
||||
<image class="photograph" src="../../../static/icon/photograph.png" mode="widthFix">
|
||||
</image>
|
||||
<text v-if="fileList1.length == 0">上传正面照片</text>
|
||||
<text v-if="fileList1.length == 1">上传反面照片</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
<!-- <u-upload :fileList="fileList1" :maxSize="3145728" width="250" height="150"
|
||||
@afterRead="afterRead" @delete="deletePic" :disabled="isEdit" name="1" multiple :maxCount="2">
|
||||
<view class="id-card-upload">
|
||||
<image class="photograph" src="../../../static/icon/photograph.png" mode="widthFix">
|
||||
</image>
|
||||
<text>上传反面照片</text>
|
||||
</view>
|
||||
</u-upload> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="desc-title">拍摄身份证要求：</view>
|
||||
<view class="desc">大陆公民持有的本人有效二代身份证：<br>拍摄时确保身份证<text>边框完整，字体清晰，亮度均匀；<br>图片大小在1M以内；</text></view>
|
||||
<view class="photo">
|
||||
<image src="https://file.wsdns.cn/20230619/29a8c790211a46529fbbb66ee8d223d5.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="submitText" color="linear-gradient(to bottom, #010002, #681752)" :disabled="isEdit"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import store from '@/store'
|
||||
import * as CertificateApi from '@/api/love-certificate.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
certificateType: 'idCard',
|
||||
userId
|
||||
},
|
||||
fileList1: [],
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
isEdit: false,
|
||||
submitText: '提交认证信息',
|
||||
eventChannel: null
|
||||
// rules: [
|
||||
|
||||
// ]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.eventChannel = this.getOpenerEventChannel();
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
CertificateApi.listCertificate({
|
||||
certificateType: 'idCard',
|
||||
userId
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
app.form = res.data[0]
|
||||
app.fileList1 = JSON.parse(res.data[0].files)
|
||||
|
||||
if(app.form.status == 10){
|
||||
app.submitText = '认证中'
|
||||
app.isEdit = true
|
||||
}
|
||||
if(app.form.status == 20){
|
||||
app.submitText = '提交认证信息'
|
||||
app.isEdit = false
|
||||
}
|
||||
if(app.form.status == 30){
|
||||
app.submitText = '已通过'
|
||||
app.isEdit = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if(app.fileList1.findIndex(item => item.status != 'success') >= 0){
|
||||
return
|
||||
}
|
||||
if (app.disabled === true) return
|
||||
console.log("app.tempFile: ", app.tempFile);
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
const saveCertificate = app.isEdit ? CertificateApi.updateCertificate : CertificateApi.addCertificate
|
||||
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "正在验证"
|
||||
})
|
||||
saveCertificate(app.form).then(result => {
|
||||
app.$success('认证成功')
|
||||
this.getData()
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
}).finally(()=>{
|
||||
store.dispatch('GetUserInfo')
|
||||
this.eventChannel.emit('reload');
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: auto;
|
||||
width: 700rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.upload {
|
||||
width: 360rpx;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
|
||||
.id-card-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
color: #cccccc;
|
||||
border: 5rpx dashed #d9d9d9;
|
||||
border-radius: 20rpx;
|
||||
width: 360rpx;
|
||||
height: 220rpx;
|
||||
|
||||
.photograph {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #cccccc;
|
||||
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
725
sub_pages/checkout/checkout copy.vue
Normal file
725
sub_pages/checkout/checkout copy.vue
Normal file
@@ -0,0 +1,725 @@
|
||||
<template>
|
||||
<view class="user-index">
|
||||
<view class="page-bg"></view>
|
||||
<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
|
||||
<view class="main-header">
|
||||
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
||||
<!-- 用户信息 -->
|
||||
</view>
|
||||
|
||||
<view class="main">
|
||||
<!-- 表单信息 -->
|
||||
<u--form :model="form" ref="uForm">
|
||||
<view class="buy-user">
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell title="姓名" :isLink="true">
|
||||
<input slot="value" class="w-input" placeholder="请填写姓名" v-model="form.realName" />
|
||||
</u-cell>
|
||||
<u-cell title="手机号" :isLink="true">
|
||||
<input slot="value" class="w-input" placeholder="请填写手机号码" v-model="form.phone" />
|
||||
</u-cell>
|
||||
<u-cell title="所属区域" :isLink="true" @click="onArea">
|
||||
<input slot="value" class="w-input" placeholder="请选择所属区域" :disabled="true"
|
||||
v-model="form.area" />
|
||||
</u-cell>
|
||||
<u-cell title="服务门店" :isLink="true" @click="onMerchant"
|
||||
v-if="form.planId != 19 && form.planId != 22 && form.planId != 23 && form.planId != 24 && form.planId != 25 && form.planId != 26">
|
||||
<input slot="value" class="w-input" :disabled="true" placeholder="请选择服务门店"
|
||||
v-model="form.merchantName" />
|
||||
</u-cell>
|
||||
<u-cell title="门店地址" :isLink="true"
|
||||
v-if="form.planId == 22 || form.planId == 23 || form.planId == 24 || form.planId == 25 || form.planId == 26">
|
||||
<input slot="value" class="w-input" placeholder="请输入门店地址" v-model="form.address" />
|
||||
</u-cell>
|
||||
<u-cell title="门店类型" :border="false" :isLink="true" :value="form.name">
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="3"></u-gap>
|
||||
<!-- 会员套餐 -->
|
||||
<view class="buy-user">
|
||||
<u-cell :title="form.roleName"></u-cell>
|
||||
<view class="price-box">
|
||||
<view class="info">
|
||||
<image :src="form.icon"
|
||||
mode="aspectFill"></image>
|
||||
<view class="content">
|
||||
{{ form.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="price" v-for="(item,index) in form.price" :key="index">
|
||||
<text class="reb">￥{{ item.price }}</text>
|
||||
<text class="num">x1</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="xieyi">
|
||||
<u-icon name="checkbox-mark"></u-icon>
|
||||
购买代表同意爱尚客网
|
||||
<text>《婚介协议》</text>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="cart">
|
||||
<view class="cart-info">
|
||||
<!-- <view style="position: relative;"> -->
|
||||
<!-- <u-badge class="badge" size="mini" type="error" :is-center="true" :count="totalNum"></u-badge> -->
|
||||
<!-- <image class="cart-logo" src="../../static/icon/cart4.png"></image> -->
|
||||
<!-- </view> -->
|
||||
<view class="total-price">￥{{ totalPrice }}</view>
|
||||
<!-- <view class="clear-cart" @click="onClearCart">清空购物车</view> -->
|
||||
<view class="buy">
|
||||
<u-button text="立即下单" shape="circle" type="error" class="custom-style" :disabled="disabled"
|
||||
@click="onBuy">
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
<!-- 选择店铺 -->
|
||||
<u-picker :show="showMerchant" :columns="merchantList" keyName="label" @confirm="confirmMerchant"
|
||||
@cancel="showMerchant = false"></u-picker>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||||
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
username
|
||||
} from '@/config.js';
|
||||
import http from '@/api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
merchantList: [],
|
||||
bgImage: 'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.36308349769888226%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220.24%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23160028%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E',
|
||||
statusBarHeight: 25,
|
||||
// 是否已登录
|
||||
isLogin: false,
|
||||
disabled: false,
|
||||
showMerchant: false,
|
||||
// 系统设置
|
||||
form: {
|
||||
area: '',
|
||||
planId: 0,
|
||||
priceId: 0,
|
||||
province: '',
|
||||
city: '',
|
||||
region: ''
|
||||
},
|
||||
subPayPrice: 0,
|
||||
city: '',
|
||||
rules: [],
|
||||
totalPrice: 0.00
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("options: ", options);
|
||||
this.form.planId = Number(options.planId)
|
||||
this.subPayPrice = options.subPayPrice
|
||||
this.getUserInfo()
|
||||
this.getOrderInfo()
|
||||
// 设置navbar标题、颜色options
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#101010'
|
||||
})
|
||||
},
|
||||
onShow() {},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
// 跳转页面
|
||||
navTo(url) {
|
||||
this.$navTo(url)
|
||||
},
|
||||
getUserInfo() {
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
if (res.data) {
|
||||
console.log("res.data.phone: ", res.data.phone);
|
||||
app.form.realName = res.data.nickname
|
||||
app.form.phone = res.data.phone
|
||||
}
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
app.$push('pages/login/index')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getOrderInfo() {
|
||||
const app = this
|
||||
const {
|
||||
planId
|
||||
} = this.form
|
||||
UserPlanApi.getUserPlan(planId).then(result => {
|
||||
console.log("result: ", result);
|
||||
app.form = result.data
|
||||
result.data.price.map(d => {
|
||||
app.form.priceId = d.id
|
||||
app.totalPrice = (d.price-app.subPayPrice).toFixed(2)
|
||||
})
|
||||
})
|
||||
},
|
||||
getMerchant() {
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
region: app.form.region
|
||||
}).then(result => {
|
||||
let arr = []
|
||||
app.merchantList = []
|
||||
result.data.map(d => {
|
||||
arr.push({
|
||||
id: d.merchantId,
|
||||
label: `${d.merchantName} (${d.gradeName})`,
|
||||
code: d.merchantCode
|
||||
})
|
||||
})
|
||||
console.log("arr: ",arr);
|
||||
app.merchantList.push(arr)
|
||||
})
|
||||
|
||||
},
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
onMerchant() {
|
||||
this.showMerchant = true
|
||||
},
|
||||
confirmMerchant(e) {
|
||||
const data = e.value[0]
|
||||
this.form.merchantId = Number(data.id)
|
||||
this.form.merchantCode = data.code
|
||||
this.form.merchantName = data.label
|
||||
this.showMerchant = false
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const app = this
|
||||
const data = e.value
|
||||
app.city = data[1].label
|
||||
app.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
app.form.province = data[0].label
|
||||
app.form.city = data[1].label
|
||||
app.form.region = data[2].label
|
||||
app.form.merchantName = null
|
||||
app.form.merchantId = null
|
||||
app.getMerchant()
|
||||
},
|
||||
onBuy() {
|
||||
const app = this
|
||||
const {
|
||||
form,
|
||||
totalPrice
|
||||
} = this
|
||||
if (form.realName == '') {
|
||||
this.$error('请填写姓名')
|
||||
return false
|
||||
}
|
||||
if (form.phone == '') {
|
||||
this.$error('请填写手机号码')
|
||||
return false
|
||||
}
|
||||
if (!form.area) {
|
||||
this.$error('请选择所属区域')
|
||||
return false
|
||||
}
|
||||
if (!form.merchantId && form.planId != 19 && form.planId != 22 && form.planId != 23 && form.planId !=
|
||||
24 && form.planId != 25 && form.planId != 26) {
|
||||
this.$error('请选择服务门店')
|
||||
return false
|
||||
}
|
||||
app.disabled = true
|
||||
UserPlanLogApi.addUserPlanLog({
|
||||
planId: form.planId,
|
||||
priceId: form.priceId,
|
||||
province: form.province,
|
||||
city: form.city,
|
||||
region: form.region,
|
||||
area: form.area,
|
||||
realName: form.realName,
|
||||
phone: form.phone,
|
||||
merchantId: form.merchantId,
|
||||
merchantCode: form.merchantCode,
|
||||
merchantName: form.merchantName,
|
||||
address: form.address,
|
||||
totalPrice
|
||||
}).then(res => {
|
||||
const orderInfo = res.data
|
||||
|
||||
if(orderInfo == null){
|
||||
// 业务逻辑。。。
|
||||
uni.showModal({
|
||||
title: '支付成功',
|
||||
content: '如果状态没更新，请尝试下拉更新',
|
||||
showCancel: false,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
app.showEdit = false
|
||||
app.disabled = false
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return false
|
||||
}
|
||||
// 调起微信支付
|
||||
uni.requestPayment({
|
||||
provider: orderInfo.provider, // 服务提供商
|
||||
timeStamp: orderInfo.timeStamp, // 时间戳
|
||||
nonceStr: orderInfo.nonceStr, // 随机字符串
|
||||
package: orderInfo.package,
|
||||
signType: orderInfo.signType, // 签名算法
|
||||
paySign: orderInfo.paySign, // 签名
|
||||
success: function(res) {
|
||||
// 业务逻辑。。。
|
||||
uni.showModal({
|
||||
title: '支付成功',
|
||||
content: '如果状态没更新，请尝试下拉更新',
|
||||
showCancel: false,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
app.showEdit = false
|
||||
app.disabled = false
|
||||
uni.navigateBack({
|
||||
delta: 2
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log('支付失败', err);
|
||||
app.disabled = false
|
||||
}
|
||||
});
|
||||
}).catch(err => {
|
||||
app.disabled = false
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-index {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
width: 750rpx;
|
||||
height: calc(100rpx + var(--status-bar-height));
|
||||
display: block;
|
||||
background-color: #101010;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.main-header {
|
||||
// background-color: #FBF7EF;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.star1 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
right: 80rpx;
|
||||
top: 34rpx;
|
||||
}
|
||||
|
||||
.star2 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
left: 40rpx;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
.star3 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
left: 130rpx;
|
||||
top: 70rpx;
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
height: 120rpx;
|
||||
padding-left: 30rpx;
|
||||
z-index: 1;
|
||||
|
||||
.user-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 30rpx;
|
||||
color: #ffffff;
|
||||
|
||||
.nick-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
max-width: 270rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
image {
|
||||
margin-left: 10rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-weight: 300;
|
||||
color: #efefef;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 15rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.user-grade {
|
||||
align-self: baseline;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #3c3c3c;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
.user-grade_icon .image {
|
||||
display: block;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.user-grade_name {
|
||||
margin-left: 5rpx;
|
||||
font-size: 26rpx;
|
||||
color: #EEE0C3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.roles-box {
|
||||
display: flex;
|
||||
|
||||
.login-tips {
|
||||
margin-top: 12rpx;
|
||||
margin-right: 6rpx;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-right: 50rpx;
|
||||
z-index: 999;
|
||||
|
||||
image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
|
||||
.switch-text {
|
||||
z-index: 9999;
|
||||
color: #681752;
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
color: #cecece;
|
||||
position: absolute;
|
||||
right: 2vh;
|
||||
top: 1vh;
|
||||
|
||||
image {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
position: fixed;
|
||||
top: 80rpx;
|
||||
left: 25rpx;
|
||||
z-index: 999;
|
||||
|
||||
// 开通会员
|
||||
.buy-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 22rpx auto 22rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.desc {
|
||||
padding-top: 5rpx;
|
||||
padding-left: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.asset-right {
|
||||
width: 170rpx;
|
||||
border-left: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.asset-right-item {
|
||||
text-align: center;
|
||||
color: #545454;
|
||||
|
||||
.item-icon {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
margin-top: 14rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-left-item {
|
||||
text-align: center;
|
||||
padding-left: 28rpx;
|
||||
display: flex;
|
||||
|
||||
.item-value {
|
||||
font-size: 34rpx;
|
||||
// color: #febd45;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #545454;
|
||||
margin-top: 14rpx;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 30rpx 25rpx 20rpx 0;
|
||||
}
|
||||
|
||||
.buy-user-icon {
|
||||
width: 40rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.my-logout {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.logout-btn {
|
||||
width: 400rpx;
|
||||
margin: 0 auto;
|
||||
font-size: 28rpx;
|
||||
color: #616161;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #dcdcdc;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 280rpx;
|
||||
padding-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.reb {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
width: 500rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
margin: 50rpx auto;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
text-decoration: underline;
|
||||
color: #681752;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
position: fixed;
|
||||
bottom: 25rpx;
|
||||
z-index: 888;
|
||||
width: 750rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
.cart-info {
|
||||
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
border-radius: 100rpx;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.cart-logo {
|
||||
position: absolute;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-left: 20rpx;
|
||||
bottom: 10rpx;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
padding-left: 30rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.clear-cart {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.buy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.custom-style {
|
||||
padding: 0 50rpx;
|
||||
color: #ffffff;
|
||||
background-color: #ff0000;
|
||||
// background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
// background-color: #681752;
|
||||
border: none;
|
||||
width: 330rpx;
|
||||
height: 66rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.w-input {
|
||||
width: 400rpx;
|
||||
text-align: right;
|
||||
font-size: 25rpx;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
366
sub_pages/checkout/checkout.vue
Normal file
366
sub_pages/checkout/checkout.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view class="search">
|
||||
<view class="house">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<image class="image" :src="form.files[0].url">
|
||||
</image>
|
||||
<view class="info">
|
||||
<view class="title">{{ form.houseTitle }}</view>
|
||||
<view class="desc"><text>{{ form.extent }}m²|{{ form.toward }}</text></view>
|
||||
<view class="price">{{ form.monthlyRent }}元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap></u-gap>
|
||||
<!-- 提交表单 -->
|
||||
<view class="user-card">
|
||||
<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" :labelStyle="{paddingLeft: '10rpx'}"
|
||||
label-width="200rpx">
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-cell-group :border="false">
|
||||
<u-form-item prop="realName">
|
||||
<u-cell title="姓名" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.realName" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请输入姓名" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="phone">
|
||||
<u-cell title="联系电话" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.phone" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请填写联系电话" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="expirationTime">
|
||||
<u-cell title="预约看房时间" :isLink="true" @click="showExpirationTime = true">
|
||||
<u-input slot="value" class="input" v-model="expirationTime" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请选择看房时间" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</block>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="float">
|
||||
<view class="release">
|
||||
<u-button text="提交预约" type="primary" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 组件 -->
|
||||
<u-calendar :show="showExpirationTime" @confirm="confirmexpirationTime"></u-calendar>
|
||||
<!-- <u-datetime-picker ref="datetimePicker" :show="showExpirationTime" v-model="expirationTime" mode="date" @close="closeexpirationTime"
|
||||
@confirm="confirmexpirationTime" @cancel="closeexpirationTime" :closeOnClickOverlay="true">
|
||||
</u-datetime-picker> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import {
|
||||
fileUrl
|
||||
} from '@/config.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import * as HouseInfoApi from '@/api/house-info.js'
|
||||
import * as HouseReservationApi from '@/api/house-reservation.js'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
select: [],
|
||||
bgColor: '#ffffff',
|
||||
showExpirationTime: false,
|
||||
form: {
|
||||
name: '',
|
||||
phone: '',
|
||||
expirationTime: ''
|
||||
},
|
||||
// 生日
|
||||
expirationTime: '',
|
||||
// 验证规则
|
||||
rules: {
|
||||
'name': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写您的姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'phone': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写您的手机号码',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'expirationTime': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择预约看房时间',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.houseId = options.id
|
||||
this.getHouseInfo()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
// this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getHouseInfo() {
|
||||
const app = this
|
||||
const {
|
||||
houseId
|
||||
} = this
|
||||
HouseInfoApi.getHouseInfo(houseId).then(res => {
|
||||
app.form = res.data
|
||||
app.form.files = JSON.parse(res.data.files) || []
|
||||
app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
|
||||
// app.form.supporting = JSON.parse(res.data.supporting) || []
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onSearch() {
|
||||
this.$push('/sub_pages/member/member', this.where)
|
||||
},
|
||||
onBadge(id) {
|
||||
this.bgColor = '#ff0000'
|
||||
},
|
||||
confirmexpirationTime(e) {
|
||||
this.expirationTime = e[0]
|
||||
this.form.expirationTime = e[0] + ' 00:00:00'
|
||||
this.showExpirationTime = false
|
||||
},
|
||||
closeexpirationTime() {
|
||||
this.showExpirationTime = false
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
const { form } = this
|
||||
if (app.disabled === true) return
|
||||
this.$refs.uForm.validate().then(() => {
|
||||
HouseReservationApi.addHouseReservation(app.form).then(result => {
|
||||
app.$toast(result.message)
|
||||
}).catch(err => {
|
||||
uni.$u.toast(err)
|
||||
})
|
||||
}).catch(errors => {
|
||||
console.log("errors: ",errors);
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
// 搜索输入框
|
||||
.search-input {
|
||||
width: 80%;
|
||||
background: #fff;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 10rpx 0 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 60rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
display: block;
|
||||
color: #b4b4b4;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input-placeholder {
|
||||
color: #aba9a9;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
background: $main-bg;
|
||||
color: $main-text;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单合计
|
||||
.order-total {
|
||||
margin: 10rpx auto;
|
||||
font-size: 26rpx;
|
||||
vertical-align: bottom;
|
||||
text-align: right;
|
||||
height: 50rpx;
|
||||
padding-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.pay-btn {
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.total-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 8rpx;
|
||||
margin-right: -2rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.house {
|
||||
margin: 30rpx auto;
|
||||
width: 680rpx;
|
||||
|
||||
.btn {
|
||||
width: 150rpx;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
width: 680rpx;
|
||||
margin: auto;
|
||||
|
||||
.item {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
box-shadow: 0 3rpx 10rpx 0px #999999;
|
||||
background-color: #FFFFFF;
|
||||
margin: 50rpx auto;
|
||||
position: relative;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 680rpx;
|
||||
height: 360rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 660rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.float {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
|
||||
.release {
|
||||
width: 500rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
sub_pages/contact/contact.vue
Normal file
22
sub_pages/contact/contact.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
1008
sub_pages/dealer/dealer.vue
Normal file
1008
sub_pages/dealer/dealer.vue
Normal file
File diff suppressed because it is too large
Load Diff
620
sub_pages/dealer/grade/grade.vue
Normal file
620
sub_pages/dealer/grade/grade.vue
Normal file
@@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<view class="dealer-grade">
|
||||
<view class="page-bg"></view>
|
||||
<view class="header" :style="'margin-top: ' + statusBarHeight + 'px'"></view>
|
||||
<view class="main-header">
|
||||
<image class="bg-image" :src="bgImage" mode="scaleToFill"></image>
|
||||
<!-- 用户信息 -->
|
||||
</view>
|
||||
<view class="main">
|
||||
<!-- 表单信息 -->
|
||||
<u--form :model="form" ref="uForm">
|
||||
<view class="buy-user">
|
||||
<view class="sub-name">{{ plan.subName }}</view>
|
||||
<u-grid :border="false" col="3">
|
||||
<u-grid-item v-for="(item,index) in plan.icons" :key="index">
|
||||
<view class="demo-layout bg-purple-light">
|
||||
<view class="icon">
|
||||
<image :src="item.icon"></image>
|
||||
</view>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<u-gap height="3"></u-gap>
|
||||
<!-- 会员套餐 -->
|
||||
<view class="buy-user" v-if="plan.price">
|
||||
<view class="buy">
|
||||
<view class="title">开通{{ plan.name }}</view>
|
||||
<view class="total-price">{{ plan.price[0].name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="xieyi">
|
||||
<u-icon name="checkbox-mark"></u-icon>
|
||||
购买代表同意爱尚客网
|
||||
<text @click="$push('pages/article/detail/detail?id=117')">《品牌合作协议》</text>
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="cart">
|
||||
<view class="cart-info">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="立即开通" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||||
shape="circle" @click="onBuy()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
<!-- 选择店铺 -->
|
||||
<u-picker :show="showMerchant" :columns="merchantList" @confirm="confirmMerchant"
|
||||
@cancel="showMerchant = false"></u-picker>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||||
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
||||
import * as UserPlanEquityApi from '@/api/love-user-plan-equity.js'
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
import {
|
||||
getUser,
|
||||
updateUser
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
username
|
||||
} from '@/config.js';
|
||||
import {
|
||||
getMobile
|
||||
} from '@/utils/util.js'
|
||||
import http from '@/api'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
storeVn: 0, // 当前待升级等级
|
||||
planId: 0,
|
||||
plan: {},
|
||||
subPayPrice: 0, // 升级只需补差价
|
||||
loading: true,
|
||||
merchantList: [],
|
||||
bgImage: 'data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.36308349769888226%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220.24%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23160028%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E',
|
||||
statusBarHeight: 25,
|
||||
// 是否已登录
|
||||
isLogin: false,
|
||||
disabled: false,
|
||||
showMerchant: false,
|
||||
// 系统设置
|
||||
form: {
|
||||
userId,
|
||||
priceId: 0,
|
||||
planId: 0,
|
||||
area: '',
|
||||
merchantName: ''
|
||||
},
|
||||
totalPrice: 0.00
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.planId = options.id
|
||||
this.getUserInfo()
|
||||
this.getMerchant()
|
||||
this.getStroeVn()
|
||||
// 设置navbar标题、颜色options
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#101010'
|
||||
})
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
// 跳转页面
|
||||
navTo(url) {
|
||||
this.$navTo(url)
|
||||
},
|
||||
getUserInfo() {
|
||||
const {
|
||||
form
|
||||
} = this
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
if (res.data) {
|
||||
console.log("res.data.phone: ", res.data.phone);
|
||||
app.form.realName = res.data.realName
|
||||
app.form.phone = res.data.phone
|
||||
}
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
app.$push('pages/login/index')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getMerchant() {
|
||||
const app = this
|
||||
MerchantApi.listMerchant().then(result => {
|
||||
let arr = []
|
||||
result.data.map(d => {
|
||||
console.log("d.merchantName: ", d.merchantName);
|
||||
arr.push(d.merchantName)
|
||||
})
|
||||
app.merchantList.push(arr)
|
||||
})
|
||||
|
||||
},
|
||||
getStroeVn() {
|
||||
const app = this
|
||||
const {
|
||||
userId
|
||||
} = app.form
|
||||
UserPlanEquityApi.listUserPlanEquity({
|
||||
userId
|
||||
}).then(result => {
|
||||
const list = result.data
|
||||
// 线上门店
|
||||
const storeV1 = list.filter(d => d.planId == 19)
|
||||
if(storeV1.length > 0){
|
||||
// 升级差价
|
||||
app.subPayPrice = 4999
|
||||
}
|
||||
if (storeV1.length == 0) {
|
||||
app.storeVn = 19
|
||||
storage.set('storeVn', 19)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 门店合伙人
|
||||
const storeV2 = list.filter(d => d.planId == 20)
|
||||
if (storeV2.length == 0) {
|
||||
app.storeVn = 20
|
||||
storage.set('storeVn', 20)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 门店运营总监
|
||||
const storeV3 = list.filter(d => d.planId == 21)
|
||||
if (storeV3.length == 0) {
|
||||
app.storeVn = 21
|
||||
storage.set('storeVn', 21)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 实体店
|
||||
const storeV4 = list.filter(d => d.planId == 22)
|
||||
if (storeV4.length == 0) {
|
||||
app.storeVn = 22
|
||||
storage.set('storeVn', 22)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 旗舰店
|
||||
const storeV5 = list.filter(d => d.planId == 23)
|
||||
if (storeV5.length == 0) {
|
||||
app.storeVn = 23
|
||||
storage.set('storeVn', 23)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 区县级运营中心
|
||||
const storeV6 = list.filter(d => d.planId == 24)
|
||||
if (storeV6.length == 0) {
|
||||
app.storeVn = 24
|
||||
storage.set('storeVn', 24)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 市级运营中心
|
||||
const storeV7 = list.filter(d => d.planId == 25)
|
||||
if (storeV7.length == 0) {
|
||||
app.storeVn = 25
|
||||
storage.set('storeVn', 25)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
// 省级运营中心
|
||||
const storeV8 = list.filter(d => d.planId == 26)
|
||||
if (storeV8.length == 0) {
|
||||
app.storeVn = 26
|
||||
storage.set('storeVn', 26)
|
||||
app.getUserPlan()
|
||||
return false
|
||||
}
|
||||
})
|
||||
// app.loading = false
|
||||
},
|
||||
getUserPlan() {
|
||||
const app = this
|
||||
const {
|
||||
storeVn,
|
||||
planId
|
||||
} = this
|
||||
|
||||
UserPlanApi.getUserPlan(planId > 0 ? planId : storeVn).then(res => {
|
||||
app.plan = res.data
|
||||
app.form.priceId = res.data.price[0].id
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.name
|
||||
})
|
||||
})
|
||||
},
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
onMerchant() {
|
||||
this.showMerchant = true
|
||||
},
|
||||
confirmMerchant(e) {
|
||||
this.form.merchantName = e.value[0]
|
||||
this.showMerchant = false
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const app = this
|
||||
const data = e.value
|
||||
if (data) {
|
||||
app.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
app.form.province = data[0].label
|
||||
app.form.city = data[1].label
|
||||
app.form.region = data[2].label
|
||||
}
|
||||
},
|
||||
// 跳转到服务页面
|
||||
handleService({
|
||||
url
|
||||
}) {
|
||||
if (url.slice(0, 4) == 'http') {
|
||||
wx.openCustomerServiceChat({
|
||||
extInfo: {
|
||||
url: 'https://work.weixin.qq.com/kfid/kfc1693a8d29b84bc5e'
|
||||
},
|
||||
corpId: 'ww1c3f872ba0a39228',
|
||||
success(res) {}
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (!this.isLogin) {
|
||||
return false;
|
||||
}
|
||||
console.log("url: ", url);
|
||||
this.$navTo(url)
|
||||
},
|
||||
// 显示toast信息
|
||||
showToast(title, duration = 2000) {
|
||||
this.$refs.uToast.show({
|
||||
title,
|
||||
duration
|
||||
})
|
||||
},
|
||||
|
||||
handleLogout() {
|
||||
// http.setConfig((config) => {
|
||||
// config.header = {};
|
||||
// config.header = {
|
||||
// AppId: appId,
|
||||
// tenantId: tenantId
|
||||
// };
|
||||
// return config
|
||||
// })
|
||||
// uni.clearStorage()
|
||||
// uni.clearStorageSync()
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
},
|
||||
onBuy() {
|
||||
const app = this
|
||||
const {
|
||||
form,
|
||||
subPayPrice
|
||||
} = this
|
||||
console.log("this.plan: ",this.plan);
|
||||
const planId = this.plan.planId
|
||||
const priceId = this.plan.price[0].id
|
||||
// app.disabled = true
|
||||
return this.$push('sub_pages/checkout/checkout',{planId,subPayPrice})
|
||||
|
||||
// UserPlanLogApi.addUserPlanLog(form).then(res => {
|
||||
|
||||
// const orderInfo = res.data
|
||||
// // 调起微信支付
|
||||
// uni.requestPayment({
|
||||
// provider: orderInfo.provider, // 服务提供商
|
||||
// timeStamp: orderInfo.timeStamp, // 时间戳
|
||||
// nonceStr: orderInfo.nonceStr, // 随机字符串
|
||||
// package: orderInfo.package,
|
||||
// signType: orderInfo.signType, // 签名算法
|
||||
// paySign: orderInfo.paySign, // 签名
|
||||
// success: function(res) {
|
||||
// // 业务逻辑。。。
|
||||
// app.$success('支付成功')
|
||||
// setTimeout(function() {
|
||||
// app.showEdit = false
|
||||
// app.disabled = false
|
||||
// uni.navigateBack()
|
||||
// }, 1500);
|
||||
// },
|
||||
// fail: function(err) {
|
||||
// console.log('支付失败', err);
|
||||
// app.disabled = false
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
},
|
||||
|
||||
onApply() {
|
||||
if (!this.isLogin) {
|
||||
return false;
|
||||
}
|
||||
this.$navTo('pages/wallet/balance/log')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dealer-grade {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
width: 750rpx;
|
||||
height: calc(100rpx + var(--status-bar-height));
|
||||
display: block;
|
||||
background-color: #101010;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.main-header {
|
||||
// background-color: #FBF7EF;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.bg-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
position: fixed;
|
||||
top: 80rpx;
|
||||
left: 25rpx;
|
||||
z-index: 999;
|
||||
|
||||
// 开通会员
|
||||
.buy-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 20rpx 0;
|
||||
width: 700rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
|
||||
.sub-name {
|
||||
text-align: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.item-equity {}
|
||||
|
||||
.buy {
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-layout {
|
||||
background-color: #ffffff;
|
||||
margin: auto;
|
||||
width: 200rpx;
|
||||
color: #4c4c4c;
|
||||
padding: 24rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 25rpx;
|
||||
|
||||
.icon {
|
||||
// background-color: gold;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 80rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
.my-logout {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.logout-btn {
|
||||
width: 400rpx;
|
||||
margin: 0 auto;
|
||||
font-size: 28rpx;
|
||||
color: #616161;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #dcdcdc;
|
||||
padding: 16rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 280rpx;
|
||||
padding-left: 30rpx;
|
||||
font-size: 34rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.reb {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
width: 600rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 50rpx auto;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
text-decoration: underline;
|
||||
color: #681752;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
position: fixed;
|
||||
bottom: 25rpx;
|
||||
z-index: 888;
|
||||
width: 750rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
.cart-info {
|
||||
// background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
// width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
border-radius: 100rpx;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.cart-logo {
|
||||
position: absolute;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-left: 20rpx;
|
||||
bottom: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.clear-cart {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.buy {
|
||||
margin-right: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.custom-style {
|
||||
padding: 0 50rpx;
|
||||
color: #ffffff;
|
||||
background-color: #ff0000;
|
||||
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
// background-color: #681752;
|
||||
border: none;
|
||||
width: 330rpx;
|
||||
height: 66rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.w-input {
|
||||
text-align: right;
|
||||
font-size: 25rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
321
sub_pages/dealer/merchant/merchant.vue
Normal file
321
sub_pages/dealer/merchant/merchant.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" @click="onChangeTab" :current="1" lineColor="#7f006f"></u-tabs>
|
||||
</view>
|
||||
<!-- 推广权益 -->
|
||||
<block v-if="currTab == 10">
|
||||
<view class="card">
|
||||
<view class="title">推广权益</view>
|
||||
<view class="content">
|
||||
<u-parse :content="plan.comments"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 推广列表 -->
|
||||
<block v-if="currTab == 20">
|
||||
<view class="search-wrapper">
|
||||
<uni-data-select v-model="where.gradeId" :localdata="grade" @change="onSearch"></uni-data-select>
|
||||
</view>
|
||||
<view class="user-list">
|
||||
<u-list :height="700" @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId} 粉丝：${item.id}`" isLink>
|
||||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text>{{ item.gradeName }}</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty v-if="list.length == 0" mode="search"
|
||||
icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 我的团队 -->
|
||||
<block v-if="currTab == 30">
|
||||
<view class="user-list">
|
||||
<u-list :height="700" @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId} 粉丝：${item.id}`" isLink>
|
||||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text>{{ item.gradeName }}</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty v-if="list.length == 0" mode="search"
|
||||
icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
|
||||
import {
|
||||
username,
|
||||
userIdPrefix
|
||||
} from '@/config.js';
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `推广权益`,
|
||||
value: 10
|
||||
}, {
|
||||
name: `推广列表`,
|
||||
value: 20
|
||||
}, {
|
||||
name: `我的团队`,
|
||||
value: 30
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userIdPrefix,
|
||||
tabs,
|
||||
currTab: 20,
|
||||
planId: 0,
|
||||
plan: null,
|
||||
// 会员类型
|
||||
grade: [{
|
||||
value: 2,
|
||||
text: '注册用户'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
text: '普通会员'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
text: '尊享会员'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
text: '线上门店'
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
text: '门店合伙人'
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
text: '门店运营总监'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
text: '实体门店'
|
||||
},
|
||||
{
|
||||
value: 11,
|
||||
text: '旗舰店'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
text: '区县级运营中心'
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
text: '市级运营中心'
|
||||
},
|
||||
{
|
||||
value: 14,
|
||||
text: '省级运营中心'
|
||||
}
|
||||
],
|
||||
// 会员列表
|
||||
list: [],
|
||||
where: {},
|
||||
page: 0,
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.planId = options.id
|
||||
this.getPlan()
|
||||
this.list = []
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPlan() {
|
||||
const app = this
|
||||
const {
|
||||
planId
|
||||
} = this
|
||||
UserPlanApi.getUserPlan(planId).then(res => {
|
||||
app.plan = res.data
|
||||
})
|
||||
},
|
||||
getMerchant() {
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(result => {
|
||||
let arr = []
|
||||
app.merchantList = []
|
||||
result.data.map(d => {
|
||||
arr.push({
|
||||
label: d.merchantName,
|
||||
id: d.merchantId,
|
||||
code: d.merchantCode
|
||||
})
|
||||
})
|
||||
app.merchantList.push(arr)
|
||||
})
|
||||
},
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
app.where.dealerId = userId
|
||||
return new Promise((resolve, reject) => {
|
||||
UserRefereeApi.pageUserReferee(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if (result.data.count > app.list.length) {
|
||||
app.canReset = true
|
||||
} else {
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
navTo(url, userId) {
|
||||
this.$push(url, userId)
|
||||
},
|
||||
onFollow(e) {
|
||||
console.log("e11: ", e);
|
||||
},
|
||||
onSearch() {
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
},
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
app.currTab = e.value
|
||||
if (e.value == 10) {
|
||||
|
||||
}
|
||||
if (e.value == 20) {
|
||||
app.list = []
|
||||
app.where.gradeStart = undefined
|
||||
app.where.gradeEnd = undefined
|
||||
app.onRefreshList()
|
||||
}
|
||||
if (e.value == 30) {
|
||||
app.list = []
|
||||
app.where.gradeStart = 7
|
||||
app.where.gradeEnd = 14
|
||||
app.onRefreshList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0rpx;
|
||||
background-color: #f3f3f3;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.desc-text {
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper{
|
||||
width: 250rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 700rpx;
|
||||
min-height: 500rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
width: 640rpx;
|
||||
margin: 10rpx auto;
|
||||
line-height: 3rem;
|
||||
border-bottom: 2rpx solid #f3f3f3;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 640rpx;
|
||||
margin: 10rpx auto;
|
||||
line-height: 2rem;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
sub_pages/dealer/offline/offline.vue
Normal file
183
sub_pages/dealer/offline/offline.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrapper">
|
||||
<u-cell :title="userTypeText" isLink :border="false" arrowDirection="down" @click="showUserType = true"></u-cell>
|
||||
<u-cell :title="userSexText" isLink :border="false" arrowDirection="down" @click="showUserSex = true"></u-cell>
|
||||
</view>
|
||||
<view class="user-list">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.nickname}`" :label="`ID：${item.userId} 粉丝：${item.id}`" isLink>
|
||||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text v-if="item.gradeId == 3">线下普通会员</text>
|
||||
<text v-if="item.gradeId == 4">线下尊享会员</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty v-if="list.length == 0" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
<u-action-sheet :actions="userType" @select="onUserType"
|
||||
:show="showUserType"></u-action-sheet>
|
||||
<u-action-sheet :actions="userSex" @select="onUserSex"
|
||||
:show="showUserSex"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 会员类型
|
||||
userType: [{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '线下普通会员'
|
||||
},
|
||||
{
|
||||
name: '线下尊享会员'
|
||||
}
|
||||
],
|
||||
showUserType: false,
|
||||
// 会员性别
|
||||
userSex: [{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '男'
|
||||
},
|
||||
{
|
||||
name: '女'
|
||||
}
|
||||
],
|
||||
showUserSex: false,
|
||||
// 会员列表
|
||||
list: [],
|
||||
where: {},
|
||||
page: 0,
|
||||
userTypeText: '全部单身会员',
|
||||
userSexText: '性别',
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
app.where.dealerId = userId
|
||||
app.where.offline = 1
|
||||
return new Promise((resolve, reject) => {
|
||||
UserRefereeApi.pageUserReferee(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if (result.data.count > app.list.length) {
|
||||
app.canReset = true
|
||||
} else {
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
navTo(url, userId) {
|
||||
this.$push(url, userId)
|
||||
},
|
||||
onFollow(e) {
|
||||
console.log("e11: ", e);
|
||||
},
|
||||
onSearch() {
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
},
|
||||
onUserType(e){
|
||||
console.log("e: ",e);
|
||||
this.userTypeText = e.name
|
||||
this.showUserType = false
|
||||
if(e.name == '线下普通会员'){
|
||||
this.where.gradeId = 3
|
||||
}
|
||||
if(e.name == '线下尊享会员'){
|
||||
this.where.gradeId = 4
|
||||
}
|
||||
this.onSearch()
|
||||
},
|
||||
onUserSex(e){
|
||||
console.log("e: ",e);
|
||||
this.userSexText = e.name
|
||||
this.showUserSex = false
|
||||
if(e.name == '男'){
|
||||
this.where.sex = 1
|
||||
}
|
||||
if(e.name == '女'){
|
||||
this.where.sex = 2
|
||||
}
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin: 20rpx auto;
|
||||
.desc-text{
|
||||
margin-right:50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
366
sub_pages/dealer/poster/poster.vue
Normal file
366
sub_pages/dealer/poster/poster.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop
|
||||
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
|
||||
<view class="poster-main">
|
||||
<image class="poster-main-img" src="https://oss.jimeigroup.cn/static/hunjie-bg.png"
|
||||
mode="widthFix"></image>
|
||||
<view class="user-info">
|
||||
<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
|
||||
<view class="info">
|
||||
<view class="nickname">
|
||||
{{userInfo.nickname}}
|
||||
</view>
|
||||
<view class="phone">
|
||||
{{userInfo.phone}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="qrcode" :src="QrcodeUrl">
|
||||
</view>
|
||||
|
||||
<view class="poster-footer">
|
||||
<!-- <view class="poster-footer-title">
|
||||
— 立即分享 —
|
||||
</view> -->
|
||||
<view class="poster-footer-btns">
|
||||
<button open-type="share" class="poster-footer-btn u-reset-button">
|
||||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-share.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="poster-footer-btn-text">分享微信好友</view>
|
||||
</button>
|
||||
<view @click="drawPoster" class="poster-footer-btn">
|
||||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-save.png" mode="aspectFill"></image>
|
||||
<view class="poster-footer-btn-text">保存相册分享</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 海报绘制 -->
|
||||
<l-painter custom-style="position: fixed;left: 200%;" ref="painter" @success="drawSuccess"
|
||||
css="height: 1067px; width: 750px;" file-type="jpg">
|
||||
<template>
|
||||
<l-painter-view
|
||||
css="background-image: url(https://oss.jimeigroup.cn/static/post-bg3.jpg); width: 750px;height: 1067px;">
|
||||
<l-painter-view
|
||||
css="background-image: url(https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/hunjie-bg.png); width: 750px;height: 1067px;position:relative;">
|
||||
<!-- 用户头像、昵称 -->
|
||||
<l-painter-view style="display: flex;" css="display: flex;align-items: center;position: absolute;left: 150px; bottom: 150px;">
|
||||
<l-painter-image
|
||||
css="width: 75px;height: 75px;border-radius: 50%"
|
||||
:src="userInfo.avatar"></l-painter-image>
|
||||
<l-painter-view css="margin-left: 20px;">
|
||||
<l-painter-view css="height: 40px;line-height: 40px;"><l-painter-text :text="userInfo.nickname" css="font-size: 28px" style=";"></l-painter-text></l-painter-view>
|
||||
<l-painter-view css="height: 40px;line-height: 40px;"> <l-painter-text :text="userInfo.phone" css="font-size: 24px"></l-painter-text></l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
<!-- 二维码 -->
|
||||
<l-painter-image
|
||||
css="position: absolute;right: 150px;bottom: 150px;width: 160px;height: 160px;"
|
||||
:src="QrcodeUrl"></l-painter-image>
|
||||
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</template>
|
||||
</l-painter>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as WxLoginApi from '@/api/wx-login.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId,
|
||||
userInfo,
|
||||
form: {},
|
||||
showQrcode: false,
|
||||
QrcodeUrl: '',
|
||||
ranking: [{
|
||||
avatar: '',
|
||||
nickname: '别来无恙',
|
||||
value: '共奖励5012.00元'
|
||||
}],
|
||||
posterUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQrCode()
|
||||
},
|
||||
onShareTimeline(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '爱尚客',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
|
||||
imageUrl: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/mp-share.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawPoster() {
|
||||
this.$refs.painter.canvasToTempFilePath({
|
||||
// x: 0,
|
||||
// y: 170,
|
||||
// with: 750,
|
||||
// height: 1067,
|
||||
fileType: "jpg",
|
||||
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
||||
pathType: 'url',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
// console.log(res.tempFilePath);
|
||||
// uni.previewImage({
|
||||
// urls: [res.tempFilePath]
|
||||
// })
|
||||
// 非H5 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '已保存相册'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
drawSuccess(e) {
|
||||
this.posterUrl = e
|
||||
// uni.previewImage({
|
||||
// urls: [e]
|
||||
// })
|
||||
},
|
||||
onShowQrcode() {
|
||||
this.showQrcode = true
|
||||
this.getQrCode()
|
||||
},
|
||||
// 获取微信小程序码
|
||||
getQrCode() {
|
||||
const app = this
|
||||
|
||||
WxLoginApi.getWxQrCodeFile().then(res => {
|
||||
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
|
||||
// app.showQrcode = true
|
||||
storage.set('QrcodeUrl', res.message)
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onShareQuan() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneTimeline",
|
||||
type: 2,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareWeixin() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
title: '爱尚客',
|
||||
miniProgram: {
|
||||
id: 'gh_39f1f8019c3f',
|
||||
path: 'pages/index/index',
|
||||
type: 0,
|
||||
webUrl: 'http://uniapp.dcloud.io'
|
||||
},
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareAlbum() {
|
||||
// uni.saveImageToPhotosAlbum({
|
||||
// filePath: res.tempFilePaths[0],
|
||||
// success: function () {
|
||||
// console.log('save success');
|
||||
// }
|
||||
// });
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.saveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.saveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存相册分享",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImageToPhotosAlbum() {
|
||||
|
||||
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功，请从相册选择再分享',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #730070;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.container {
|
||||
background-image: url(https://oss.jimeigroup.cn/static/login-bg01.png);
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
width: 750rpx;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.poster-main {
|
||||
margin: 170rpx auto 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.qrcode {
|
||||
position: absolute;
|
||||
right: 150rpx;
|
||||
bottom: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
}
|
||||
|
||||
.poster-main-img {
|
||||
width: 750rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-footer {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.poster-footer-title {
|
||||
// height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
// font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
// line-height: 80rpx;
|
||||
}
|
||||
|
||||
.poster-footer-btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 600rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.poster-footer-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
position: absolute;
|
||||
left: 150rpx;
|
||||
bottom: 160rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.nickname{
|
||||
font-size: 28rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.phone {
|
||||
font-size: 24rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
sub_pages/dealer/qrcode/qrcode.vue
Normal file
41
sub_pages/dealer/qrcode/qrcode.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
dealerId: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const refereeId = options.user_id
|
||||
uni.setStorageSync('refereeId',refereeId)
|
||||
this.$navTo('pages/login/index')
|
||||
},
|
||||
methods: {
|
||||
// addUserReferee(dealerId){
|
||||
// const app = this
|
||||
// const userId = uni.getStorageSync('userId')
|
||||
// if(dealerId > 0){
|
||||
// UserRefereeApi.addUserReferee({
|
||||
// dealerId,
|
||||
// userId
|
||||
// }).then(() => {
|
||||
// app.$push('pages/index/index')
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
180
sub_pages/dealer/team/team.vue
Normal file
180
sub_pages/dealer/team/team.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-wrapper">
|
||||
<u-cell :title="userTypeText" isLink :border="false" arrowDirection="down" @click="showUserType = true"></u-cell>
|
||||
<u-cell :title="userSexText" isLink :border="false" arrowDirection="down" @click="showUserSex = true"></u-cell>
|
||||
</view>
|
||||
<view class="user-list">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.nickname}`" :label="`ID：${item.userId} 粉丝：${item.id}`" isLink>
|
||||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text>线下普通会员</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty v-if="list.length == 0" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
<u-action-sheet :actions="userType" @select="onUserType"
|
||||
:show="showUserType"></u-action-sheet>
|
||||
<u-action-sheet :actions="userSex" @select="onUserSex"
|
||||
:show="showUserSex"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 会员类型
|
||||
userType: [{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '线下普通会员'
|
||||
},
|
||||
{
|
||||
name: '线下尊享会员'
|
||||
}
|
||||
],
|
||||
showUserType: false,
|
||||
// 会员性别
|
||||
userSex: [{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '男'
|
||||
},
|
||||
{
|
||||
name: '女'
|
||||
}
|
||||
],
|
||||
showUserSex: false,
|
||||
// 会员列表
|
||||
list: [],
|
||||
page: 0,
|
||||
userTypeText: '全部单身会员',
|
||||
userSexText: '性别',
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
app.where.dealerId = userId
|
||||
return new Promise((resolve, reject) => {
|
||||
UserRefereeApi.pageUserReferee(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if (result.data.count > app.list.length) {
|
||||
app.canReset = true
|
||||
} else {
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
navTo(url, userId) {
|
||||
this.$push(url, userId)
|
||||
},
|
||||
onFollow(e) {
|
||||
console.log("e11: ", e);
|
||||
},
|
||||
onSearch() {
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
},
|
||||
onUserType(e){
|
||||
console.log("e: ",e);
|
||||
this.userTypeText = e.name
|
||||
this.showUserType = false
|
||||
if(e.name == '线下普通会员'){
|
||||
this.where.gradeId = 3
|
||||
}
|
||||
if(e.name == '线下尊享会员'){
|
||||
this.where.gradeId = 4
|
||||
}
|
||||
this.onSearch()
|
||||
},
|
||||
onUserSex(e){
|
||||
console.log("e: ",e);
|
||||
this.userSexText = e.name
|
||||
this.showUserSex = false
|
||||
if(e.name == '男'){
|
||||
this.where.sex = 1
|
||||
}
|
||||
if(e.name == '女'){
|
||||
this.where.sex = 2
|
||||
}
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin: 20rpx auto;
|
||||
.desc-text{
|
||||
margin-right:50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
sub_pages/feedback/feedback.vue
Normal file
321
sub_pages/feedback/feedback.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-cell title="反馈类型" :value="form.type" @click="showFeedbackType = true" :isLink="true"></u-cell>
|
||||
<u-cell>
|
||||
<view slot="title" class="textarea">
|
||||
<u--textarea v-model="form.content" placeholder="请补充详细内容和意见,小红娘会在第一时间回复你"
|
||||
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
||||
<view class="images">
|
||||
<u-upload :fileList="fileList1" :maxSize="3145728" :width="72" :height="72" @afterRead="afterRead"
|
||||
@delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell title="联系方式" :value="form.phone" :isLink="true">
|
||||
<u-input slot="value" class="nickname" :border="false" inputAlign="right" v-model="form.phone" maxlength="30" placeholder="请输入联系方式"
|
||||
@input="onInputNickName" @blur="onInputNickName" />
|
||||
</u-cell>
|
||||
<u-picker :show="showFeedbackType" :columns="dict.feedbackType" @confirm="confirmFeedbackType" @cancel="showFeedbackType = false"
|
||||
:closeOnClickOverlay="true" @close="showFeedbackType = false">
|
||||
</u-picker>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="提交" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import {
|
||||
fileUrl
|
||||
} from '@/config.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as UserFeedbackApi from '@/api/user-feedback.js'
|
||||
import dict, * as DictApi from '@/api/dict.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dict: null,
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
// 表单数据
|
||||
form: {
|
||||
type: ''
|
||||
},
|
||||
fileList1: [],
|
||||
interest: [],
|
||||
loading: false,
|
||||
showFeedbackType: false,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.getDict()
|
||||
this.getUserProfile()
|
||||
},
|
||||
methods: {
|
||||
// 用户资料表
|
||||
getUserProfile() {
|
||||
const app = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
UserProfileApi.getUserProfile(userId).then(res => {
|
||||
app.form = res.data
|
||||
const userInfo = res.data.userInfo
|
||||
app.form.phone = userInfo.phone
|
||||
// app.interest = JSON.parse(app.form.interest) || []
|
||||
// app.fileList1 = JSON.parse(app.form.images) || []
|
||||
app.isLogin = false
|
||||
}).catch(err => {
|
||||
app.$success(err)
|
||||
})
|
||||
},
|
||||
|
||||
getDict() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.dict = res.data;
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadFile() {
|
||||
const app = this
|
||||
UploadApi.uploadFile({
|
||||
filePath: app.tempFile,
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
// UserProfileApi.updateUserProfile(app.form)
|
||||
})
|
||||
},
|
||||
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if (app.disabled === true) return
|
||||
if (app.form.type == undefined) {
|
||||
app.$error('请选择反馈类型')
|
||||
return false
|
||||
}
|
||||
if (app.form.content == undefined) {
|
||||
app.$error('请填写内容')
|
||||
return false
|
||||
}
|
||||
app.form.interest = JSON.stringify(app.interest)
|
||||
app.form.images = JSON.stringify(app.fileList1)
|
||||
UserFeedbackApi.addFeedback(app.form).then(result => {
|
||||
app.$toast(result.message)
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 2000)
|
||||
}).catch(err => {
|
||||
uni.$u.toast(err)
|
||||
})
|
||||
},
|
||||
onInterest(text) {
|
||||
const app = this
|
||||
if (app.interest.indexOf(text) > -1) {
|
||||
console.log("1: ");
|
||||
app.interest.splice(app.interest.indexOf(text), 1)
|
||||
} else {
|
||||
console.log("2: ");
|
||||
app.interest.push(text)
|
||||
}
|
||||
},
|
||||
|
||||
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
||||
onInputNickName(val) {
|
||||
console.log("val: ", val);
|
||||
if (val) {
|
||||
this.form.nickname = val
|
||||
}
|
||||
},
|
||||
confirmFeedbackType(e) {
|
||||
console.log("e: ",e.value);
|
||||
this.form.type = e.value[0]
|
||||
this.showFeedbackType = false
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 20rpx;
|
||||
width: 680rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.nickname {
|
||||
text-align: right !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.interest {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 50rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.images {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.his-head {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0 20rpx 0;
|
||||
color: #681752;
|
||||
|
||||
.line {
|
||||
background-color: #681752;
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
159
sub_pages/goods/components/Comment.vue
Executable file
159
sub_pages/goods/components/Comment.vue
Executable file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<!-- 商品评价 -->
|
||||
<view v-if="!isLoading && list.length" class="goods-comment m-top20">
|
||||
<view class="item-title dis-flex">
|
||||
<view class="block-left flex-box">
|
||||
商品评价 (<text class="total">{{ total }}条</text>)
|
||||
</view>
|
||||
<view class="block-right">
|
||||
<text @click="onTargetToComment" class="show-more col-9">查看更多</text>
|
||||
<text class="iconfont icon-arrow-right col-9"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评论列表 -->
|
||||
<view class="comment-list">
|
||||
<view class="comment-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="comment-item_row dis-flex flex-y-center">
|
||||
<view class="user-info dis-flex flex-y-center">
|
||||
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" />
|
||||
<text class="user-name">{{ item.user.nick_name }}</text>
|
||||
</view>
|
||||
<!-- 评星 -->
|
||||
<view class="star-rating">
|
||||
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-content m-top20">
|
||||
<text class="f-26 twoline-hide">{{ item.content }}</text>
|
||||
</view>
|
||||
<view class="comment-time">{{ item.create_time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvatarImage from '@/components/avatar-image'
|
||||
// import * as CommentApi from '@/api/comment'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AvatarImage
|
||||
},
|
||||
props: {
|
||||
// 商品ID
|
||||
goodsId: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
// 加载多少条记录 默认2条
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 评星数据转换
|
||||
rates: { 10: 5, 20: 3, 30: 1 },
|
||||
// 评价列表数据
|
||||
list: [],
|
||||
// 评价总数量
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 加载评价列表数据
|
||||
// this.getCommentList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 加载评价列表数据
|
||||
getCommentList() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
CommentApi.listRows(app.goodsId, app.limit)
|
||||
.then(result => {
|
||||
app.list = result.data.list
|
||||
app.total = result.data.total
|
||||
})
|
||||
.catch(err => err)
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 跳转到评论列表页
|
||||
onTargetToComment() {
|
||||
const app = this
|
||||
app.$navTo('pages/comment/index', { goodsId: app.goodsId })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-comment {
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 25rpx;
|
||||
|
||||
.total {
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
margin-right: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
padding: 15rpx 5rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.comment-item_row {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-right: 15rpx;
|
||||
|
||||
.user-avatar {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #333;
|
||||
margin: 16rpx 0;
|
||||
max-height: 76rpx;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
|
||||
.comment-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
158
sub_pages/goods/components/Service.vue
Executable file
158
sub_pages/goods/components/Service.vue
Executable file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<view v-if="list.length" class="service-wrapper" :style="appThemeStyle">
|
||||
<!-- 服务简述 -->
|
||||
<view class="service-simple" @click="handlePopup">
|
||||
<view class="s-list">
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
||||
<text class="item-icon iconfont icon-fuwu"></text>
|
||||
<text class="item-val">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 扩展箭头 -->
|
||||
<view class="s-arrow f-26 col-9 t-r">
|
||||
<text class="iconfont icon-arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情内容弹窗 -->
|
||||
<u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
|
||||
<view class="service-content">
|
||||
<view class="title">服务</view>
|
||||
<scroll-view class="content-scroll" :scroll-y="true">
|
||||
<view class="s-list clearfix">
|
||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
||||
<text class="item-icon iconfont icon-fuwu"></text>
|
||||
<view class="item-val">{{ item.name }}</view>
|
||||
<view class="item-summary">{{ item.summary }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import * as ServiceApi from '@/api/goods/service'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 商品ID
|
||||
goodsId: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 显示详情内容弹窗
|
||||
showPopup: false,
|
||||
// 服务列表数据
|
||||
list: []
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// 获取商品服务列表
|
||||
// this.getServiceList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取商品服务列表
|
||||
getServiceList() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
ServiceApi.list(app.goodsId)
|
||||
.then(result => app.list = result.data.list)
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 显示弹窗
|
||||
handlePopup() {
|
||||
this.showPopup = !this.showPopup
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service-wrapper {
|
||||
min-height: 24rpx;
|
||||
margin-bottom: -24rpx;
|
||||
}
|
||||
|
||||
// 服务简述
|
||||
.service-simple {
|
||||
padding: 24rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.s-list {
|
||||
flex: 1;
|
||||
margin-left: -15rpx;
|
||||
}
|
||||
|
||||
.s-item {
|
||||
float: left;
|
||||
font-size: 26rpx;
|
||||
margin: 8rpx 15rpx;
|
||||
|
||||
.item-icon {
|
||||
color: $main-bg;
|
||||
}
|
||||
|
||||
.item-val {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 服务详细内容
|
||||
.service-content {
|
||||
padding: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 50rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
min-height: 400rpx;
|
||||
max-height: 760rpx;
|
||||
}
|
||||
|
||||
.s-list {
|
||||
padding: 0 30rpx 0 80rpx;
|
||||
}
|
||||
|
||||
.s-item {
|
||||
position: relative;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.item-icon {
|
||||
position: absolute;
|
||||
top: 6rpx;
|
||||
left: -50rpx;
|
||||
color: $main-bg;
|
||||
}
|
||||
|
||||
.item-val {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-summary {
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
189
sub_pages/goods/components/SkuPopup.vue
Executable file
189
sub_pages/goods/components/SkuPopup.vue
Executable file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode" :maskCloseAble="true"
|
||||
:priceColor="appTheme.mainBg" :buyNowBackgroundColor="appTheme.mainBg" :addCartColor="appTheme.viceText" :addCartBackgroundColor="appTheme.viceBg"
|
||||
:activedStyle="{ color: appTheme.mainBg, borderColor: appTheme.mainBg, backgroundColor: activedBtnBackgroundColor }" @open="openSkuPopup"
|
||||
@close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" buyNowText="立即购买" :maxBuyNum="maxBuyNum" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setCartTotalNum } from '@/core/app'
|
||||
import { hex2rgba } from '@/utils/color'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import GoodsSkuPopup from '@/components/goods-sku-popup'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GoodsSkuPopup
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
props: {
|
||||
// true 组件显示 false 组件隐藏
|
||||
value: {
|
||||
Type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||||
skuMode: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// 商品详情信息
|
||||
goods: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 商品信息
|
||||
goodsInfo: {},
|
||||
// 限购数量
|
||||
maxBuyNum: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 规格按钮选中时的背景色
|
||||
activedBtnBackgroundColor() {
|
||||
return hex2rgba(this.appTheme.mainBg, 0.1)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const app = this
|
||||
const { goods } = app
|
||||
app.goodsInfo = {
|
||||
_id: goods.goods_id,
|
||||
name: goods.goods_name,
|
||||
goods_thumb: goods.goods_image,
|
||||
sku_list: app.getSkuList(),
|
||||
spec_list: app.getSpecList()
|
||||
}
|
||||
app.maxBuyNum = app.getMaxBuyNum()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 监听组件显示隐藏
|
||||
onChangeValue(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
|
||||
// 整理商品SKU列表
|
||||
getSkuList() {
|
||||
const app = this
|
||||
const { goods: { goods_name, goods_image, skuList } } = app
|
||||
const skuData = []
|
||||
skuList.forEach(item => {
|
||||
skuData.push({
|
||||
_id: item.id,
|
||||
goods_sku_id: item.goods_sku_id,
|
||||
goods_id: item.goods_id,
|
||||
goods_name: goods_name,
|
||||
image: item.image_url ? item.image_url : goods_image,
|
||||
price: item.goods_price * 100,
|
||||
stock: item.stock_num,
|
||||
spec_value_ids: item.spec_value_ids,
|
||||
sku_name_arr: app.getSkuNameArr(item.spec_value_ids)
|
||||
})
|
||||
})
|
||||
return skuData
|
||||
},
|
||||
|
||||
// 获取sku记录的规格值列表
|
||||
getSkuNameArr(specValueIds) {
|
||||
const app = this
|
||||
const defaultData = ['默认']
|
||||
const skuNameArr = []
|
||||
if (specValueIds) {
|
||||
specValueIds.forEach((valueId, groupIndex) => {
|
||||
const specValueName = app.getSpecValueName(valueId, groupIndex)
|
||||
skuNameArr.push(specValueName)
|
||||
})
|
||||
}
|
||||
return skuNameArr.length ? skuNameArr : defaultData
|
||||
},
|
||||
|
||||
// 获取指定的规格值名称
|
||||
getSpecValueName(valueId, groupIndex) {
|
||||
const app = this
|
||||
const { goods: { specList } } = app
|
||||
const res = specList[groupIndex].valueList.find(specValue => {
|
||||
return specValue.spec_value_id == valueId
|
||||
})
|
||||
return res.spec_value
|
||||
},
|
||||
|
||||
// 整理规格数据
|
||||
getSpecList() {
|
||||
const { goods: { specList } } = this
|
||||
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
|
||||
const specData = []
|
||||
specList.forEach(group => {
|
||||
const children = []
|
||||
group.valueList.forEach(specValue => {
|
||||
children.push({ name: specValue.spec_value })
|
||||
})
|
||||
specData.push({
|
||||
name: group.spec_name,
|
||||
list: children
|
||||
})
|
||||
})
|
||||
return specData.length ? specData : defaultData
|
||||
},
|
||||
|
||||
// 限购数量
|
||||
getMaxBuyNum() {
|
||||
const { goods } = this
|
||||
return goods.is_restrict ? goods.restrict_single : null
|
||||
},
|
||||
|
||||
// sku组件 开始-----------------------------------------------------------
|
||||
openSkuPopup() {
|
||||
// console.log("监听 - 打开sku组件")
|
||||
},
|
||||
|
||||
closeSkuPopup() {
|
||||
// console.log("监听 - 关闭sku组件")
|
||||
},
|
||||
|
||||
// 加入购物车按钮
|
||||
addCart(selectShop) {
|
||||
const app = this
|
||||
const { goods_id, goods_sku_id, buy_num } = selectShop
|
||||
CartApi.add(goods_id, goods_sku_id, buy_num)
|
||||
.then(result => {
|
||||
// 显示成功
|
||||
app.$toast(result.message)
|
||||
// 隐藏当前弹窗
|
||||
app.onChangeValue(false)
|
||||
// 购物车商品总数量
|
||||
const cartTotal = result.data.cartTotal
|
||||
// 缓存购物车数量
|
||||
setCartTotalNum(cartTotal)
|
||||
// 传递给父级
|
||||
app.$emit('addCart', cartTotal)
|
||||
})
|
||||
},
|
||||
|
||||
// 立即购买
|
||||
buyNow(selectShop) {
|
||||
// 跳转到订单结算页
|
||||
this.$navTo('pages/checkout/index', {
|
||||
mode: 'buyNow',
|
||||
goodsId: selectShop.goods_id,
|
||||
goodsSkuId: selectShop.goods_sku_id,
|
||||
goodsNum: selectShop.buy_num
|
||||
})
|
||||
// 隐藏当前弹窗
|
||||
this.onChangeValue(false)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
146
sub_pages/goods/components/SlideImage.vue
Executable file
146
sub_pages/goods/components/SlideImage.vue
Executable file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<!-- 商品图片 -->
|
||||
<view class="images-swiper">
|
||||
<swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots"
|
||||
:interval="interval" :circular="true" @change="setCurrent">
|
||||
<!-- 主图视频 -->
|
||||
<swiper-item v-if="video">
|
||||
<view class="slide-video">
|
||||
<video id="myVideo" class="video" :poster="videoCover.preview_url" :src="video.external_url" controls
|
||||
x5-playsinline playsinline webkit-playsinline webkit-playsinline x5-video-player-type="h5"
|
||||
x5-video-player-fullscreen x5-video-orientation="portrait" :enable-progress-gesture="false"
|
||||
@play="onVideoPlay"></video>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<!-- 轮播图片 -->
|
||||
<swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
|
||||
<view class="slide-image">
|
||||
<image class="image" :draggable="false" :src="item.preview_url"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-count">
|
||||
<text>{{ currentIndex }}</text>
|
||||
<text>/</text>
|
||||
<text>{{ images.length + (video ? 1 : 0) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 主图视频
|
||||
video: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 主图视频封面
|
||||
videoCover: {
|
||||
type: Object,
|
||||
default () {
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 图片轮播
|
||||
images: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: true, // 是否显示面板指示点
|
||||
autoplay: true, // 是否自动切换
|
||||
interval: 4000, // 自动切换时间间隔
|
||||
duration: 800, // 滑动动画时长
|
||||
currentIndex: 1, // 轮播图指针
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 事件：视频开始播放
|
||||
onVideoPlay(e) {
|
||||
this.autoplay = false
|
||||
},
|
||||
|
||||
// 设置轮播图当前指针 数字
|
||||
setCurrent({ detail }) {
|
||||
const app = this
|
||||
app.currentIndex = detail.current + 1
|
||||
},
|
||||
|
||||
// 浏览商品图片
|
||||
onPreviewImages(index) {
|
||||
const app = this
|
||||
const imageUrls = []
|
||||
app.images.forEach(item => {
|
||||
imageUrls.push(item.preview_url);
|
||||
});
|
||||
uni.previewImage({
|
||||
current: imageUrls[index],
|
||||
urls: imageUrls
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// swiper组件
|
||||
.images-swiper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
|
||||
/* #ifdef H5 */
|
||||
max-width: 480px;
|
||||
max-height: 480px;
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
|
||||
// 主图视频
|
||||
.slide-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片轮播
|
||||
.slide-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// swiper计数
|
||||
.swiper-count {
|
||||
position: absolute;
|
||||
right: 36rpx;
|
||||
bottom: 72rpx;
|
||||
padding: 2rpx 18rpx;
|
||||
background: rgba(0, 0, 0, 0.363);
|
||||
border-radius: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
229
sub_pages/goods/detail.scss
Executable file
229
sub_pages/goods/detail.scss
Executable file
@@ -0,0 +1,229 @@
|
||||
.container {
|
||||
// 设置ios刘海屏底部横线安全区域
|
||||
// 110 - 18 + 4
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
|
||||
}
|
||||
|
||||
// 商品信息
|
||||
.goods-info {
|
||||
background: #fff;
|
||||
padding: 25rpx 30rpx;
|
||||
}
|
||||
|
||||
.info-item__top {
|
||||
min-height: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.floor-price__samll {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-bg;
|
||||
margin-bottom: -10rpx;
|
||||
}
|
||||
|
||||
// 商品价
|
||||
.floor-price {
|
||||
color: $main-bg;
|
||||
margin-right: 15rpx;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 26rpx;
|
||||
text-decoration: line-through;
|
||||
color: #959595;
|
||||
margin-right: 15rpx;
|
||||
margin-bottom: -6rpx;
|
||||
}
|
||||
|
||||
// 会员价标签
|
||||
.user-grade {
|
||||
background: #3c3c3c;
|
||||
border-radius: 6rpx;
|
||||
padding: 8rpx 14rpx;
|
||||
margin-right: 15rpx;
|
||||
font-size: 24rpx;
|
||||
color: #EEE0C3;
|
||||
}
|
||||
|
||||
.goods-sales {
|
||||
font-size: 24rpx;
|
||||
color: #959595;
|
||||
}
|
||||
|
||||
.info-item__name .goods-name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
/* 商品分享 */
|
||||
|
||||
.goods-share__line {
|
||||
border-left: 1rpx solid #f4f4f4;
|
||||
height: 60rpx;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.goods-share .share-btn {
|
||||
line-height: normal;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
font-size: 8pt;
|
||||
border: none;
|
||||
color: #191919;
|
||||
}
|
||||
|
||||
.goods-share .share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.goods-share .share__icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
// 商品卖点
|
||||
.info-item_selling-point {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
// 选择商品规格
|
||||
.goods-choice {
|
||||
padding: 26rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.spec-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.spec-name {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品详情
|
||||
.goods-content .item-title {
|
||||
padding: 26rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
// 底部操作栏
|
||||
.footer-fixed {
|
||||
position: fixed;
|
||||
bottom: var(--window-bottom);
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
z-index: 11;
|
||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
|
||||
background: #fff;
|
||||
|
||||
// 设置ios刘海屏底部横线安全区域
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 106rpx;
|
||||
}
|
||||
|
||||
// 快捷菜单
|
||||
.foo-item-fast {
|
||||
box-sizing: border-box;
|
||||
min-width: 214rpx;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
margin-right: 12rpx;
|
||||
|
||||
.fast-item {
|
||||
position: relative;
|
||||
padding: 4rpx 0;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
width: 84rpx;
|
||||
|
||||
&--cart {
|
||||
margin-left: 6rpx;
|
||||
.fast-icon { margin-left: -12rpx; }
|
||||
}
|
||||
|
||||
// 角标
|
||||
.fast-badge {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
min-width: 16px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
background-color: #ee0a24;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.fast-badge--fixed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: 100%
|
||||
}
|
||||
|
||||
.fast-icon {
|
||||
font-size: 44rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.fast-text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.foo-item-btn {
|
||||
flex: 1;
|
||||
|
||||
.btn-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
margin-right: 16rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 立即购买按钮
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
}
|
||||
|
||||
// 购物车按钮
|
||||
.btn-item-deputy {
|
||||
background: linear-gradient(to right, $vice-bg, $vice-bg2);
|
||||
color: $vice-text;
|
||||
}
|
||||
}
|
||||
328
sub_pages/goods/detail.vue
Executable file
328
sub_pages/goods/detail.vue
Executable file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<view v-show="!isLoading" class="container" :style="appThemeStyle">
|
||||
<!-- 商品图片轮播 -->
|
||||
<SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view v-if="!isLoading" class="goods-info m-top20">
|
||||
<!-- 价格、销量 -->
|
||||
<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
|
||||
<view class="block-left dis-flex flex-y-center">
|
||||
<!-- 商品售价 -->
|
||||
<text class="floor-price__samll">￥</text>
|
||||
<text class="floor-price">{{ goods.goods_price_min }}</text>
|
||||
<!-- 会员价标签 -->
|
||||
<view v-if="goods.is_user_grade" class="user-grade">
|
||||
<text>会员价</text>
|
||||
</view>
|
||||
<!-- 划线价 -->
|
||||
<text v-if="goods.line_price_min > 0" class="original-price">￥{{ goods.line_price_min }}</text>
|
||||
</view>
|
||||
<view class="block-right dis-flex">
|
||||
<!-- 销量 -->
|
||||
<view class="goods-sales">
|
||||
<text>已售{{ goods.goods_sales }}件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 标题、分享 -->
|
||||
<view class="info-item info-item__name dis-flex flex-y-center">
|
||||
<view class="goods-name flex-box">
|
||||
<text class="twoline-hide">{{ goods.goods_name }}</text>
|
||||
</view>
|
||||
<view class="goods-share__line"></view>
|
||||
<view class="goods-share">
|
||||
<button class="share-btn dis-flex flex-dir-column" @click="onShowShareSheet()">
|
||||
<text class="share__icon iconfont icon-fenxiang"></text>
|
||||
<text class="f-24">分享</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品卖点 -->
|
||||
<view v-if="goods.selling_point" class="info-item info-item_selling-point">
|
||||
<text>{{ goods.selling_point }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择商品规格 -->
|
||||
<view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup(1)">
|
||||
<view class="spec-list">
|
||||
<view class="flex-box">
|
||||
<text class="col-8">选择：</text>
|
||||
<text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text>
|
||||
</view>
|
||||
<view class="f-26 col-9 t-r">
|
||||
<text class="iconfont icon-arrow-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品服务 -->
|
||||
<Service v-if="!isLoading" :goods-id="goodsId" />
|
||||
|
||||
<!-- 商品SKU弹窗 -->
|
||||
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
|
||||
|
||||
<!-- 商品评价 -->
|
||||
<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2" />
|
||||
|
||||
<!-- 商品描述 -->
|
||||
<view v-if="!isLoading" class="goods-content m-top20">
|
||||
<view class="item-title b-f">
|
||||
<text>商品描述</text>
|
||||
</view>
|
||||
<block v-if="goods.content != ''">
|
||||
<view class="goods-content__detail b-f">
|
||||
<mp-html :content="goods.content" />
|
||||
</view>
|
||||
</block>
|
||||
<empty v-else tips="亲，暂无商品描述" />
|
||||
</view>
|
||||
|
||||
<!-- 商品推荐 -->
|
||||
<recommended />
|
||||
|
||||
<!-- 底部选项卡 -->
|
||||
<view class="footer-fixed">
|
||||
<view class="footer-container">
|
||||
<!-- 导航图标 -->
|
||||
<view class="foo-item-fast">
|
||||
<!-- 首页 -->
|
||||
<view class="fast-item fast-item--home" @click="onTargetHome">
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-shouye"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>首页</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 客服 -->
|
||||
<customer-btn v-if="isShowCustomerBtn">
|
||||
<view class="fast-item">
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-kefu1"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</customer-btn>
|
||||
<!-- 购物车 -->
|
||||
<view class="fast-item fast-item--cart" @click="onTargetCart">
|
||||
<view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }}
|
||||
</view>
|
||||
<view class="fast-icon">
|
||||
<text class="iconfont icon-gouwuche"></text>
|
||||
</view>
|
||||
<view class="fast-text">
|
||||
<text>购物车</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="foo-item-btn">
|
||||
<view class="btn-wrapper">
|
||||
<view v-if="isEnableCart" class="btn-item btn-item-deputy" @click="onShowSkuPopup(2)">
|
||||
<text>加入购物车</text>
|
||||
</view>
|
||||
<view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
|
||||
<text>立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷导航 -->
|
||||
<!-- <shortcut bottom="120rpx" /> -->
|
||||
|
||||
<!-- 分享菜单 -->
|
||||
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall" :posterApiParam="{ goodsId }" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSceneData } from '@/core/app'
|
||||
import * as GoodsApi from '@/api/goods'
|
||||
import * as CartApi from '@/api/cart'
|
||||
import SettingModel from '@/common/model/Setting'
|
||||
import { GoodsTypeEnum } from '@/common/enum/goods'
|
||||
import Recommended from '@/components/recommended'
|
||||
import ShareSheet from '@/components/share-sheet'
|
||||
import CustomerBtn from '@/components/customer-btn'
|
||||
import SlideImage from './components/SlideImage'
|
||||
import SkuPopup from './components/SkuPopup'
|
||||
import Comment from './components/Comment'
|
||||
import Service from './components/Service'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Recommended,
|
||||
ShareSheet,
|
||||
CustomerBtn,
|
||||
SlideImage,
|
||||
SkuPopup,
|
||||
Comment,
|
||||
Service
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 当前商品ID
|
||||
goodsId: null,
|
||||
// 商品详情
|
||||
goods: {},
|
||||
// 购物车总数量
|
||||
cartTotal: 0,
|
||||
// 显示/隐藏SKU弹窗
|
||||
showSkuPopup: false,
|
||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||||
skuMode: 1,
|
||||
// 显示/隐藏分享菜单
|
||||
showShareSheet: false,
|
||||
// 获取商品海报图api方法
|
||||
posterApiCall: GoodsApi.poster,
|
||||
// 是否支持加入购物车
|
||||
isEnableCart: false,
|
||||
// 是否显示在线客服按钮
|
||||
isShowCustomerBtn: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
async onLoad(options) {
|
||||
// 记录query参数
|
||||
this.onRecordQuery(options)
|
||||
// 加载页面数据
|
||||
this.onRefreshPage()
|
||||
// 是否显示在线客服按钮
|
||||
this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 记录query参数
|
||||
onRecordQuery(query) {
|
||||
const scene = getSceneData(query)
|
||||
this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
|
||||
},
|
||||
|
||||
// 刷新页面数据
|
||||
onRefreshPage() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 获取商品信息
|
||||
getGoodsDetail() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.detail(app.goodsId)
|
||||
.then(result => {
|
||||
app.goods = result.data.detail
|
||||
if (app.goods.goods_type == GoodsTypeEnum.PHYSICAL.value) {
|
||||
app.isEnableCart = true
|
||||
}
|
||||
resolve(result)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 获取购物车总数量
|
||||
getCartTotal() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
CartApi.total()
|
||||
.then(result => {
|
||||
app.cartTotal = result.data.cartTotal
|
||||
resolve(result)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 更新购物车数量
|
||||
onAddCart(total) {
|
||||
this.cartTotal = total
|
||||
},
|
||||
|
||||
/**
|
||||
* 显示/隐藏SKU弹窗
|
||||
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
||||
*/
|
||||
onShowSkuPopup(skuMode = 1) {
|
||||
const app = this
|
||||
if (app.isEnableCart) {
|
||||
app.skuMode = skuMode
|
||||
} else {
|
||||
app.skuMode = 3
|
||||
}
|
||||
app.showSkuPopup = !app.showSkuPopup
|
||||
},
|
||||
|
||||
// 显示隐藏分享菜单
|
||||
onShowShareSheet() {
|
||||
this.showShareSheet = !this.showShareSheet
|
||||
},
|
||||
|
||||
// 跳转到首页
|
||||
onTargetHome(e) {
|
||||
this.$navTo('pages/index/index')
|
||||
},
|
||||
|
||||
// 跳转到购物车页
|
||||
onTargetCart() {
|
||||
this.$navTo('pages/cart/index')
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享当前页面
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({
|
||||
goodsId: app.goodsId,
|
||||
})
|
||||
return {
|
||||
title: app.goods.goods_name,
|
||||
path: `/pages/goods/detail?${params}`
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||||
*/
|
||||
onShareTimeline() {
|
||||
const app = this
|
||||
// 构建页面参数
|
||||
const params = app.$getShareUrlParams({
|
||||
goodsId: app.goodsId,
|
||||
})
|
||||
return {
|
||||
title: app.goods.goods_name,
|
||||
path: `/pages/goods/detail?${params}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #fafafa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@import "./detail.scss";
|
||||
</style>
|
||||
463
sub_pages/goods/list.vue
Executable file
463
sub_pages/goods/list.vue
Executable file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
|
||||
@up="upCallback">
|
||||
<!-- 页面头部 -->
|
||||
<view class="header">
|
||||
<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
|
||||
<!-- 切换列表显示方式 -->
|
||||
<view class="show-view" @click="handleShowView">
|
||||
<text class="iconfont icon-view-tile" v-if="showView"></text>
|
||||
<text class="iconfont icon-view-list" v-else></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排序标签 -->
|
||||
<view class="store-sort">
|
||||
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
|
||||
<text>综合</text>
|
||||
</view>
|
||||
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
|
||||
<text>销量</text>
|
||||
</view>
|
||||
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" @click="handleSortType('price')">
|
||||
<text>价格</text>
|
||||
<view class="price-arrow">
|
||||
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }">
|
||||
<text class="iconfont icon-arrow-up"></text>
|
||||
</view>
|
||||
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }">
|
||||
<text class="iconfont icon-arrow-down"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
|
||||
<view class="goods-item" v-for="(item, index) in list.data" :key="index" @click="onTargetDetail(item.goods_id)">
|
||||
<!-- 单列显示 -->
|
||||
<view v-if="showView" class="dis-flex">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-item_left">
|
||||
<image class="image" :src="item.goods_image"></image>
|
||||
</view>
|
||||
<view class="goods-item_right">
|
||||
<!-- 商品名称 -->
|
||||
<view class="goods-name">
|
||||
<text class="twoline-hide">{{ item.goods_name }}</text>
|
||||
</view>
|
||||
<view class="goods-item_desc">
|
||||
<!-- 商品卖点 -->
|
||||
<view class="desc-selling_point dis-flex">
|
||||
<text class="oneline-hide">{{ item.selling_point }}</text>
|
||||
</view>
|
||||
<!-- 商品销量 -->
|
||||
<view class="desc-goods_sales dis-flex">
|
||||
<text>已售{{ item.goods_sales }}件</text>
|
||||
</view>
|
||||
<!-- 商品价格 -->
|
||||
<view class="desc_footer">
|
||||
<text class="price_x">¥{{ item.goods_price_min }}</text>
|
||||
<text class="price_y col-9" v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 多列显示 -->
|
||||
<view v-else class="">
|
||||
<!-- 商品图片 -->
|
||||
<view class="goods-image">
|
||||
<image class="image" mode="aspectFill" :src="item.goods_image"></image>
|
||||
</view>
|
||||
<view class="detail">
|
||||
<!-- 商品名称 -->
|
||||
<view class="goods-name">
|
||||
<text class="twoline-hide">{{ item.goods_name }}</text>
|
||||
</view>
|
||||
<!-- 商品价格 -->
|
||||
<view class="detail-price oneline-hide">
|
||||
<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
|
||||
<text v-if="item.line_price_min > 0" class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
|
||||
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
|
||||
import * as GoodsApi from '@/api/goods'
|
||||
import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
|
||||
import Search from '@/components/search'
|
||||
|
||||
const pageSize = 15
|
||||
const showViewKey = 'GoodsList-ShowView';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MescrollBody,
|
||||
Search
|
||||
},
|
||||
mixins: [MescrollMixin],
|
||||
data() {
|
||||
return {
|
||||
showView: false, // 列表显示方式 (true列表、false平铺)
|
||||
sortType: 'all', // 排序类型
|
||||
sortPrice: false, // 价格排序 (true高到低 false低到高)
|
||||
options: {}, // 当前页面参数
|
||||
list: getEmptyPaginateObj(), // 商品列表数据
|
||||
|
||||
// 上拉加载配置
|
||||
upOption: {
|
||||
// 首次自动执行
|
||||
auto: true,
|
||||
// 每页数据的数量; 默认10
|
||||
page: { size: pageSize },
|
||||
// 数量要大于4条才显示无更多数据
|
||||
noMoreSize: 4,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
// 记录options
|
||||
this.options = options
|
||||
// 设置默认列表显示方式
|
||||
this.setShowView()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 上拉加载的回调 (页面初始化时也会执行一次)
|
||||
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
|
||||
* @param {Object} page
|
||||
*/
|
||||
upCallback(page) {
|
||||
const app = this
|
||||
// 设置列表数据
|
||||
app.getGoodsList(page.num)
|
||||
.then(list => {
|
||||
const curPageLen = list.data.length
|
||||
const totalSize = list.data.total
|
||||
app.mescroll.endBySize(curPageLen, totalSize)
|
||||
})
|
||||
.catch(() => app.mescroll.endErr())
|
||||
},
|
||||
|
||||
// 设置默认列表显示方式
|
||||
setShowView() {
|
||||
this.showView = uni.getStorageSync(showViewKey) || false
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取商品列表
|
||||
* @param {number} pageNo 页码
|
||||
*/
|
||||
getGoodsList(pageNo = 1) {
|
||||
const app = this
|
||||
console.log(app.options)
|
||||
const param = {
|
||||
sortType: app.sortType,
|
||||
sortPrice: Number(app.sortPrice),
|
||||
categoryId: app.options.categoryId || 0,
|
||||
goodsName: app.options.search || '',
|
||||
page: pageNo
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
GoodsApi.list(param)
|
||||
.then(result => {
|
||||
// 合并新数据
|
||||
const newList = result.data.list
|
||||
app.list.data = getMoreListData(newList, app.list, pageNo)
|
||||
resolve(newList)
|
||||
})
|
||||
.catch(reject)
|
||||
})
|
||||
},
|
||||
|
||||
// 切换排序方式
|
||||
handleSortType(newSortType) {
|
||||
const app = this
|
||||
const newSortPrice = newSortType === 'price' ? !app.sortPrice : true
|
||||
app.sortType = newSortType
|
||||
app.sortPrice = newSortPrice
|
||||
// 刷新列表数据
|
||||
app.list = getEmptyPaginateObj()
|
||||
app.mescroll.resetUpScroll()
|
||||
},
|
||||
|
||||
// 切换列表显示方式
|
||||
handleShowView() {
|
||||
const app = this
|
||||
app.showView = !app.showView
|
||||
uni.setStorageSync(showViewKey, app.showView)
|
||||
},
|
||||
|
||||
// 跳转商品详情页
|
||||
onTargetDetail(goodsId) {
|
||||
this.$navTo('pages/goods/detail', { goodsId })
|
||||
},
|
||||
|
||||
/**
|
||||
* 商品搜索
|
||||
*/
|
||||
handleSearch() {
|
||||
const searchPageUrl = 'pages/search/index'
|
||||
// 判断来源页面
|
||||
let pages = getCurrentPages()
|
||||
if (pages.length > 1 &&
|
||||
pages[pages.length - 2].route === searchPageUrl) {
|
||||
uni.navigateBack()
|
||||
return
|
||||
}
|
||||
// 跳转到商品搜索页
|
||||
this.$navTo(searchPageUrl)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 设置分享内容
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
// 构建分享参数
|
||||
return {
|
||||
title: "全部分类",
|
||||
path: "/pages/category/index?" + this.$getShareUrlParams()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
|
||||
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
|
||||
*/
|
||||
onShareTimeline() {
|
||||
// 构建分享参数
|
||||
return {
|
||||
title: "全部分类",
|
||||
path: "/pages/category/index?" + this.$getShareUrlParams()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 页面头部
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
// 搜索框
|
||||
.search {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 切换显示方式
|
||||
.show-view {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
font-size: 36rpx;
|
||||
color: #505050;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 排序组件
|
||||
.store-sort {
|
||||
position: sticky;
|
||||
top: var(--window-top);
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
z-index: 99;
|
||||
|
||||
.sort-item {
|
||||
flex-basis: 33.3333%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50rpx;
|
||||
|
||||
&.active {
|
||||
color: $main-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-item-price .price-arrow {
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
|
||||
.icon {
|
||||
&.active {
|
||||
color: $main-bg;
|
||||
}
|
||||
|
||||
&.up {
|
||||
margin-bottom: -16rpx;
|
||||
}
|
||||
|
||||
&.down {
|
||||
margin-top: -16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 商品列表
|
||||
.goods-list {
|
||||
padding: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 单列显示
|
||||
.goods-list.column-1 {
|
||||
.goods-item {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
line-height: 1.6;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item_left {
|
||||
display: flex;
|
||||
width: 300rpx;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item_right {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
.goods-name {
|
||||
margin-top: 10rpx;
|
||||
min-height: 68rpx;
|
||||
line-height: 1.3;
|
||||
white-space: normal;
|
||||
color: #484848;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item_desc {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.desc-selling_point {
|
||||
width: 400rpx;
|
||||
font-size: 24rpx;
|
||||
color: #e49a3d;
|
||||
}
|
||||
|
||||
.desc-goods_sales {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.desc_footer {
|
||||
font-size: 24rpx;
|
||||
|
||||
.price_x {
|
||||
margin-right: 16rpx;
|
||||
color: $main-bg;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.price_y {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 平铺显示
|
||||
.goods-list.column-2 {
|
||||
.goods-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-item {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding: 6rpx;
|
||||
|
||||
.goods-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
padding: 8rpx;
|
||||
background: #fff;
|
||||
|
||||
.goods-name {
|
||||
min-height: 68rpx;
|
||||
line-height: 1.3;
|
||||
white-space: normal;
|
||||
color: #484848;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.detail-price {
|
||||
.goods-price {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.line-price {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
797
sub_pages/house/add.vue
Normal file
797
sub_pages/house/add.vue
Normal file
@@ -0,0 +1,797 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" :labelStyle="{paddingLeft: '10rpx'}"
|
||||
label-width="200rpx">
|
||||
<!-- 表单组件 -->
|
||||
|
||||
<view class="his-head">
|
||||
<text class="title">房源信息</text>
|
||||
</view>
|
||||
<view class="form-wrapper">
|
||||
<u-cell-group :border="false">
|
||||
<u-form-item prop="houseTitle">
|
||||
<u-cell title="标题" :isLink="true" customStyle="">
|
||||
<u-input slot="value" class="input" v-model="form.houseTitle" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请输入标题" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="area">
|
||||
<u-cell title="城市" @click="onArea" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.area" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请选择所在城市" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="address">
|
||||
<u-cell title="详细地址" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.address" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请输入详细地址" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="houseType">
|
||||
<u-cell title="户型" :isLink="true" @click="showHouseType = true">
|
||||
<u-input slot="value" class="input" v-model="form.houseType" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请选择房子户型" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="leaseMethod">
|
||||
<u-cell title="租赁方式" :isLink="true" @click="showLeaseMethod = true">
|
||||
<u-input slot="value" class="input" v-model="form.leaseMethod" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请选择租赁方式" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="rent">
|
||||
<u-cell title="租金(元/m²)" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.rent" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请输入租金" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="monthlyRent">
|
||||
<u-cell title="月租金(每月)" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.monthlyRent" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请输入您的月租金" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="extent">
|
||||
<u-cell title="面积(m²)" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.extent" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="该房屋面积" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="floor">
|
||||
<u-cell title="楼层" :isLink="true" @click="showFloor = true">
|
||||
<u-input slot="value" class="input" v-model="form.floor" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请选择楼层" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="roomNumber">
|
||||
<u-cell title="房号" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.roomNumber" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请输入房号" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="phone">
|
||||
<u-cell title="业主电话" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.phone" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请输入业主电话" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="password">
|
||||
<u-cell title="密码" :isLink="true">
|
||||
<u-input slot="value" class="input" v-model="form.password" inputAlign="right"
|
||||
maxlength="30" :border="false" placeholder="请输入房屋密码" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
<u-form-item prop="toward">
|
||||
<u-cell title="朝向" :isLink="true" @click="showToward = true">
|
||||
<u-input slot="value" class="input" v-model="form.toward" inputAlign="right" maxlength="30"
|
||||
:border="false" placeholder="请选择房源朝向" />
|
||||
</u-cell>
|
||||
</u-form-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<u-form-item prop="houseLabel">
|
||||
<view class="his-head">
|
||||
<text class="title">房源标签</text>
|
||||
</view>
|
||||
<view class="form-wrapper">
|
||||
<view class="house-label" v-if="dict">
|
||||
<view class="u-page__tag-item" v-for="(item, index) in dict.houseLabel[0]" :key="index">
|
||||
<u-tag :text="`${item}`" type="info" :plain="inArr(item)" :name="index"
|
||||
:bgColor="inArr(item) ? '' : '#fd8008'" :borderColor="inArr(item) ? '' : '#fd8008'"
|
||||
@click="onHouseLabel(item)">
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item prop="supporting">
|
||||
<view class="his-head">
|
||||
<text class="title">办公室配套</text>
|
||||
</view>
|
||||
<view class="form-wrapper">
|
||||
<view class="house-label" v-if="dict">
|
||||
<view class="u-page__tag-item" v-for="(item, index) in dict.supporting[0]" :key="index">
|
||||
<u-tag :text="`${item}`" type="info" :plain="inArr(item)" :name="index"
|
||||
:bgColor="inArr(item) ? '' : '#fd8008'" :borderColor="inArr(item) ? '' : '#fd8008'"
|
||||
@click="onHouseLabel(item)">
|
||||
</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item prop="images">
|
||||
<view class="his-head">
|
||||
<text class="title">房源照片</text>
|
||||
</view>
|
||||
<view class="form-wrapper">
|
||||
<view class="images">
|
||||
<u-upload :fileList="fileList1" :maxSize="3145728" :width="72" :height="72"
|
||||
@afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item prop="introduction">
|
||||
<view class="his-head">
|
||||
<text class="title">房源介绍</text>
|
||||
</view>
|
||||
<view class="form-wrapper">
|
||||
<view class="textarea">
|
||||
<u--textarea v-model="form.content" placeholder="请输入房源介绍"
|
||||
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
|
||||
<block v-if="dict">
|
||||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="请选择男或女"
|
||||
@close="showSex = false" @select="sexSelect">
|
||||
</u-action-sheet>
|
||||
<u-datetime-picker ref="datetimePicker" :show="showBirthday" v-model="birthday" mode="date"
|
||||
@close="closeBirthday" @confirm="confirmBirthday" :minDate="0" :maxDate="1112102400000"
|
||||
@cancel="closeBirthday" :closeOnClickOverlay="true">
|
||||
</u-datetime-picker>
|
||||
|
||||
<u-picker :show="showHouseType" :columns="dict.houseType" @confirm="confirmHouseType"
|
||||
@cancel="closeHouseType" :closeOnClickOverlay="true" @close="closeHouseType">
|
||||
</u-picker>
|
||||
<u-picker :show="showLeaseMethod" :columns="dict.leaseMethod" @confirm="confirmLeaseMethod"
|
||||
@cancel="closeLeaseMethod" :closeOnClickOverlay="true" @close="closeLeaseMethod">
|
||||
</u-picker>
|
||||
<u-picker :show="showFloor" :columns="dict.floor" @confirm="confirmFloor" @cancel="closeFloor"
|
||||
:closeOnClickOverlay="true" @close="closeFloor">
|
||||
</u-picker>
|
||||
<u-picker :show="showToward" :columns="dict.toward" @confirm="confirmToward" @cancel="closeToward"
|
||||
:closeOnClickOverlay="true" @close="closeToward">
|
||||
</u-picker>
|
||||
|
||||
|
||||
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
</block>
|
||||
</u--form>
|
||||
|
||||
<u-gap height="80"></u-gap>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="发布" color="linear-gradient(to bottom, #27b0fd, #3f72f4)" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import {
|
||||
fileUrl
|
||||
} from '@/config.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as HouseInfoApi from '@/api/house-info.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `基本信息`,
|
||||
value: 10
|
||||
}, {
|
||||
name: `择偶条件`,
|
||||
value: 20
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs,
|
||||
tabIndex: 10,
|
||||
dict: null,
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
// 头像路径 (用于显示)
|
||||
avatarUrl: '',
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
// 表单数据
|
||||
form: {
|
||||
houseTitle: '',
|
||||
area: ''
|
||||
},
|
||||
fileList1: [],
|
||||
loading: false,
|
||||
// regionsData: [
|
||||
// ['广西壮族自治区','广东'],
|
||||
// ['南宁市', '北海市', '贵港市']
|
||||
// ],
|
||||
showHouseType: false,
|
||||
showLeaseMethod: false,
|
||||
showFloor: false,
|
||||
showToward: false,
|
||||
houseLabel: [],
|
||||
|
||||
showRegion: false,
|
||||
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
minDate: '',
|
||||
columnsHeight: [
|
||||
['160cm', '170cm', '180cm']
|
||||
],
|
||||
birthday: Number(new Date()),
|
||||
// 验证规则
|
||||
rules: {
|
||||
'houseTitle': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写标题',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.getDict()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
// this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDict() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.dict = res.data;
|
||||
})
|
||||
},
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
app.tabIndex = e.value
|
||||
},
|
||||
sexSelect(e) {
|
||||
const app = this
|
||||
console.log("e.name: ", e.name);
|
||||
app.form.sexName = e.name
|
||||
if (e.name == '男') {
|
||||
app.form.userInfo.sex = 1
|
||||
}
|
||||
if (e.name == '女') {
|
||||
app.form.userInfo.sex = 2
|
||||
}
|
||||
if (e.name == '保密') {
|
||||
app.form.userInfo.sex = 0
|
||||
}
|
||||
console.log("app.form.userInfo.sex: ", app.form.userInfo.sex);
|
||||
this.$refs.uForm.validateField('sexName')
|
||||
},
|
||||
// 选择微信地址
|
||||
// #ifdef MP-WEIXIN
|
||||
chooseAddress() {
|
||||
const {
|
||||
form,
|
||||
$refs
|
||||
} = this
|
||||
uni.chooseAddress({
|
||||
success(res) {
|
||||
const names = $refs.sRegion.getOptionItemByNames(res)
|
||||
form.name = res.userName
|
||||
form.phone = res.telNumber
|
||||
form.detail = res.detailInfo
|
||||
form.region = names.length > 0 ? names : []
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
// 点击头像按钮事件
|
||||
onClickAvatar() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return
|
||||
// #endif
|
||||
this.chooseImage()
|
||||
},
|
||||
|
||||
// 选择头像事件 - 仅限微信小程序
|
||||
// #ifdef MP-WEIXIN
|
||||
onChooseAvatar({
|
||||
detail
|
||||
}) {
|
||||
const app = this
|
||||
app.form.avatar = detail.avatarUrl
|
||||
app.tempFile = detail.avatarUrl
|
||||
// 上传头像图片
|
||||
app.uploadFile()
|
||||
},
|
||||
// #endif
|
||||
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
const app = this
|
||||
console.log("选择图片: ");
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(chooseImageRes) {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
UploadApi.uploadFile({
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
console.log("res: ", res);
|
||||
app.form.avatar = fileUrl + res.data.path
|
||||
console.log("form: ", app.form);
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadFile() {
|
||||
const app = this
|
||||
UploadApi.uploadFile({
|
||||
filePath: app.tempFile,
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
app.form.avatar = res.data.url
|
||||
HouseInfoApi.updateUserProfile(app.form)
|
||||
})
|
||||
},
|
||||
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if (app.disabled === true) return
|
||||
console.log("app.tempFile: ", app.tempFile);
|
||||
this.$refs.uForm.validate().then(() => {
|
||||
app.form.houseLabel = JSON.stringify(app.houseLabel)
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
HouseInfoApi.addHouseInfo(app.form).then(result => {
|
||||
app.$toast(result.message)
|
||||
}).catch(err => {
|
||||
uni.$u.toast(err)
|
||||
})
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 判断是否重复提交
|
||||
// if (app.disabled === true) return
|
||||
// app.$refs.uForm.validate(async valid => {
|
||||
// if (valid) {
|
||||
// console.log("valid: ", valid);
|
||||
// // 按钮禁用
|
||||
// app.disabled = true
|
||||
// // 先上传头像图片
|
||||
// if (app.tempFile) {
|
||||
// await app.uploadFile()
|
||||
// }
|
||||
// // 提交保存个人信息
|
||||
// UserApi.updateUser(app.form)
|
||||
// .then(result => {
|
||||
// app.$toast(result.message)
|
||||
// setTimeout(() => {
|
||||
// app.disabled = false
|
||||
// uni.navigateBack()
|
||||
// }, 1500)
|
||||
// })
|
||||
// .catch(err => app.disabled = false)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
// 确认修改
|
||||
// async handleSubmit() {
|
||||
// const app = this
|
||||
// if (app.disabled === true) return
|
||||
|
||||
// return new Promise((resolve, reject) => {
|
||||
// app.$refs.uForm.validate().then(() => {
|
||||
// app.form.houseLabel = JSON.stringify(app.houseLabel)
|
||||
// app.form.images = JSON.stringify(app.fileList1)
|
||||
// HouseInfoApi.addHouseInfo(app.form).then(result => {
|
||||
// console.log("result: ",result);
|
||||
// app.$toast(result.message)
|
||||
// }).catch(err => {
|
||||
// uni.$u.toast(err)
|
||||
// })
|
||||
// }).catch(errors => {
|
||||
// // uni.$u.toast('校验失败')
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
onHouseLabel(text) {
|
||||
const app = this
|
||||
if (app.houseLabel.indexOf(text) > -1) {
|
||||
console.log("1: ");
|
||||
app.houseLabel.splice(app.houseLabel.indexOf(text), 1)
|
||||
} else {
|
||||
console.log("2: ");
|
||||
app.houseLabel.push(text)
|
||||
}
|
||||
},
|
||||
inArr(text) {
|
||||
const {
|
||||
houseLabel
|
||||
} = this
|
||||
if (houseLabel.indexOf(text) > -1) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
||||
onInputNickName(val) {
|
||||
console.log("val: ", val);
|
||||
if (val) {
|
||||
this.form.nickname = val
|
||||
}
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
console.log("value: ", value);
|
||||
return value
|
||||
},
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.form.province = data[0].label
|
||||
this.form.city = data[1].label
|
||||
this.form.region = data[2].label
|
||||
this.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
console.log("this.form.area: ",this.form.area);
|
||||
},
|
||||
changeHandler(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
confirmHouseType(e) {
|
||||
this.form.houseType = e.value[0]
|
||||
this.showHouseType = false
|
||||
},
|
||||
closeHouseType() {
|
||||
this.showHouseType = false
|
||||
},
|
||||
confirmLeaseMethod(e) {
|
||||
this.form.leaseMethod = e.value[0]
|
||||
this.showLeaseMethod = false
|
||||
},
|
||||
closeLeaseMethod() {
|
||||
this.showLeaseMethod = false
|
||||
},
|
||||
confirmFloor(e) {
|
||||
this.form.floor = e.value[0]
|
||||
this.showFloor = false
|
||||
},
|
||||
closeFloor() {
|
||||
this.showFloor = false
|
||||
},
|
||||
confirmToward(e) {
|
||||
this.form.toward = e.value[0]
|
||||
this.showToward = false
|
||||
},
|
||||
closeToward() {
|
||||
this.showToward = false
|
||||
},
|
||||
|
||||
|
||||
confirmRegion(e) {
|
||||
this.form.region = e.value[0] + ' ' + e.value[1]
|
||||
this.showRegion = false
|
||||
},
|
||||
pickerRegion(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
chooseBgImage() {
|
||||
const app = this;
|
||||
uni.showActionSheet({
|
||||
itemList: ['更换背景图'],
|
||||
success() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(chooseImageRes) {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
app.uploadFilePromise(tempFilePaths[0]).then(result => {
|
||||
app.form.bgImage = result.url
|
||||
console.log(app.form, result.url);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
// UploadApi.uploadFile()
|
||||
// let a = uni.uploadFile({
|
||||
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
|
||||
// filePath: url,
|
||||
// name: 'file',
|
||||
// header: {
|
||||
// Authorization: uni.getStorageSync('AccessToken')
|
||||
// },
|
||||
// formData: {
|
||||
// user: 'test'
|
||||
// },
|
||||
// success: (res) => {
|
||||
// const result = JSON.parse(res.data)
|
||||
// setTimeout(() => {
|
||||
// resolve(result)
|
||||
// }, 1000)
|
||||
// }
|
||||
// });
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
.bg {
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
background-color: #0d0119;
|
||||
opacity: .3;
|
||||
}
|
||||
.page-title {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
padding-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
height: 220rpx;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #101010;
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
}
|
||||
|
||||
text {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 20rpx;
|
||||
width: 660rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.input {
|
||||
text-align: right !important;
|
||||
width: 500rpx !important;
|
||||
}
|
||||
|
||||
.house-label {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 50rpx;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #f7f8fa;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.images {
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.his-head {
|
||||
width: 660rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
|
||||
.line {
|
||||
background-color: #681752;
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
577
sub_pages/house/detail.vue
Normal file
577
sub_pages/house/detail.vue
Normal file
@@ -0,0 +1,577 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
<!-- 幻灯片 -->
|
||||
<view class="swiper">
|
||||
<u-swiper :list="form.files" :height="250" :radius="0" @change="e => currentNum = e.current"
|
||||
indicatorStyle="right: 20px; bottom: 50px" @click="click">
|
||||
<view slot="indicator" class="indicator-num">
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length + 1 }}</text>
|
||||
</view>
|
||||
</u-swiper>
|
||||
|
||||
<!-- 房源参数 -->
|
||||
<view class="house-info">
|
||||
<view class="title">
|
||||
{{ form.houseTitle }}
|
||||
<!-- 五象航洋城三室一厅采光好新房精装修三房一厅 采光好，乘诚意出售 -->
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="u-page__tag-item" v-for="tag in form.houseLabel">
|
||||
<u-tag :text="tag" type="primary" plain size="mini"></u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dict">
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.monthlyRent }}元/月</text>
|
||||
<text class="desc">月租</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.extent }}m²</text>
|
||||
<text class="desc">建筑面积</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.houseType }}</text>
|
||||
<text class="desc">户型</text>
|
||||
</view>
|
||||
<view class="dict-item">
|
||||
<text class="title">{{ form.floor }}</text>
|
||||
<text class="desc">楼层</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源介绍 -->
|
||||
<u-gap height="124"></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源介绍
|
||||
</view>
|
||||
<view class="field-list">
|
||||
<view class="item col-2">
|
||||
城市：{{ form.city }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
区/县：{{ form.region }}
|
||||
</view>
|
||||
<view class="item col-1">
|
||||
详细地址：{{ form.address }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
租金(元/m²)：{{ form.rent }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
房号：{{ form.roomNumber }}
|
||||
</view>
|
||||
<view class="item col-2">
|
||||
密码：{{ form.password }}
|
||||
</view>
|
||||
<view class="item col-2">业主电话：{{ form.phone }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 办公室配套 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
办公室配套
|
||||
</view>
|
||||
<view class="field-list">
|
||||
<u-grid :border="false" col="5" @click="click">
|
||||
<u-grid-item v-for="(baseListItem,baseListIndex) in form.supporting" :key="baseListIndex">
|
||||
<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
|
||||
<text class="grid-text">{{baseListItem.title}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源介绍 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源介绍
|
||||
</view>
|
||||
<view class="about">
|
||||
<mp-html :content="form.content" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房源位置 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="house-card">
|
||||
<view class="title">
|
||||
房源位置
|
||||
</view>
|
||||
<view class="position">
|
||||
<map style="width: 100%; height: 200px;" :latitude="form.latitude" :longitude="form.longitude"
|
||||
:markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 房产经纪人 -->
|
||||
<u-gap></u-gap>
|
||||
<view class="user-card">
|
||||
<u-cell :title="`${form.nickname}`" :label="`发布房源10套`" :border="false">
|
||||
<u-avatar slot="icon" size="50"
|
||||
:src="form.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<!-- <view solt="label">
|
||||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||||
</view> -->
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<text style="color: #666666;">{{ form.gradeName }}</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<u-gap height="100"></u-gap>
|
||||
<view class="pay-tools">
|
||||
<view class="item" @click="onHeart">
|
||||
<u-icon name="heart-fill" size="28" color="#ff0000" v-if="heart"></u-icon>
|
||||
<u-icon name="heart" size="28" v-else></u-icon>
|
||||
<text v-if="heart">已收藏</text>
|
||||
<text v-else>收藏</text>
|
||||
</view>
|
||||
<view class="item" @click="$push('sub_pages/checkout/checkout?id=' + form.houseId)">
|
||||
<u-button icon="map" type="error" text="预约看房"></u-button>
|
||||
</view>
|
||||
<view class="item" @click="onCall">
|
||||
<u-button icon="phone" type="primary" text="电话咨询"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Util from '@/utils/util.js'
|
||||
import store from '@/store'
|
||||
import storage from '@/utils/storage'
|
||||
import * as HouseInfoApi from '@/api/house-info.js'
|
||||
|
||||
const menu = [{
|
||||
name: '推荐',
|
||||
reset: true
|
||||
},
|
||||
{
|
||||
name: '必看房源',
|
||||
reset: false
|
||||
}
|
||||
];
|
||||
const region = [{
|
||||
value: 0,
|
||||
text: "青秀区"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "兴宁区"
|
||||
}
|
||||
];
|
||||
const price = [{
|
||||
value: 0,
|
||||
text: "3000"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "4000"
|
||||
}
|
||||
];
|
||||
const extent = [{
|
||||
value: 0,
|
||||
text: "200平"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "300平"
|
||||
}
|
||||
];
|
||||
const sort = [{
|
||||
value: 0,
|
||||
text: "升序"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "降序"
|
||||
}
|
||||
];
|
||||
const baseList = [{
|
||||
name: 'star',
|
||||
title: '价格低'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '间隔'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '工区大'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向东'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向西'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向南'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '朝向北'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '中间楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '高楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '低楼层'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '落地窗'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '通上下水'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '可做厨房'
|
||||
},
|
||||
{
|
||||
name: 'star',
|
||||
title: '中央空调'
|
||||
},
|
||||
]
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
houseId: 0,
|
||||
form: {
|
||||
|
||||
},
|
||||
swiperList: [
|
||||
'https://file.wsdns.cn/20230802/f33f5ac239c843438b36f40941d946ef.png',
|
||||
'https://file.wsdns.cn/20230802/1116a02b07904991b2ebdc2c3da4a691.png',
|
||||
],
|
||||
menu,
|
||||
region,
|
||||
price,
|
||||
extent,
|
||||
sort,
|
||||
baseList,
|
||||
currentNum: 0,
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
},
|
||||
actionStyle: {
|
||||
background: '#3f72f4',
|
||||
color: '#ffffff',
|
||||
padding: '12rpx 0',
|
||||
borderRadius: '12rpx'
|
||||
},
|
||||
heart: false,
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
iconPath: 'https://oss.wsdns.cn/20230803/49fe9c001370488caf29c3decb34f6c7.png?x-oss-process=image/resize,w_750/quality,Q_90'
|
||||
}]
|
||||
};
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
this.houseId = options.houseId
|
||||
this.getHouseInfo()
|
||||
},
|
||||
onShow() {},
|
||||
onBackPress() {},
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
getHouseInfo() {
|
||||
const app = this
|
||||
const {
|
||||
houseId
|
||||
} = this
|
||||
HouseInfoApi.getHouseInfo(houseId).then(res => {
|
||||
app.form = res.data
|
||||
app.form.files = JSON.parse(res.data.files) || []
|
||||
app.form.houseLabel = JSON.parse(res.data.houseLabel) || []
|
||||
// app.form.supporting = JSON.parse(res.data.supporting) || []
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onHeart() {
|
||||
this.heart = !this.heart
|
||||
},
|
||||
onCall() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '15878179339'
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.search-fix {
|
||||
width: 750rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
|
||||
.search {
|
||||
width: 690rpx;
|
||||
margin: 15rpx auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search-tools {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.region {
|
||||
width: 170rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 300rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.no-fixed {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 125rpx;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
position: relative;
|
||||
|
||||
.house-info {
|
||||
width: 660rpx;
|
||||
height: 240rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
position: absolute;
|
||||
bottom: -200rpx;
|
||||
left: 25rpx;
|
||||
z-index: 100;
|
||||
|
||||
.label {
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dict {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.dict-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 26rpx;
|
||||
|
||||
.title {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 660rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.house-card {
|
||||
width: 660rpx;
|
||||
min-height: 240rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
margin: auto;
|
||||
padding: 20rpx;
|
||||
z-index: 100;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.field-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 320rpx;
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7rem;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 640rpx !important;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
|
||||
.about {
|
||||
color: #4b4b4b;
|
||||
font-weight: 350;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.house-list {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
// box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||||
background-color: #ffffff;
|
||||
width: 338rpx;
|
||||
|
||||
image {
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 420rpx;
|
||||
width: 338rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-tools {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 120rpx;
|
||||
width: 750rpx;
|
||||
border-top: 1rpx solid #f3f3f3;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-num {
|
||||
padding: 2px 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 100px;
|
||||
width: 35px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-layout {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
295
sub_pages/house/house.vue
Normal file
295
sub_pages/house/house.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="search">
|
||||
<u-sticky>
|
||||
<view class="search-wrapper">
|
||||
<u-search color="#333333" border-color="#E8E8E8" :showAction="true" actionText="搜索" :animation="false"
|
||||
v-model="where.keywords" @search="onSearch" @custom="onSearch"
|
||||
:actionStyle="actionStyle"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="order-total">
|
||||
<view class="pay-btn">
|
||||
<view class="btn">
|
||||
<u-button text="上架" plain size="small" @click="onPay(item.logId)"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button text="下架" plain size="small" @click="onPay(item.logId)"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button text="删除" plain size="small" @click="onPay(item.logId)"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button text="分享" plain size="small" @click="onPay(item.logId)"></u-button>
|
||||
</view>
|
||||
<!-- <view class="btn" v-if="item.payStatus == 10">
|
||||
<u-button text="取消订单" size="small" @click="onRemove(item.logId)"></u-button>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="house">
|
||||
<view class="btn">
|
||||
<u-radio-group v-model="select">
|
||||
<u-radio activeColor="red" label="全选"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" @click="$push('sub_pages/house/detail?id=')">
|
||||
<view class="badge" @click="onBadge(1)"><u-badge :isDot="true" type="info" :bgColor="bgColor"></u-badge></view>
|
||||
<image class="image" src="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwr9ba.jpg"></image>
|
||||
<view class="info">
|
||||
<view class="title">整租·万科云城 2室1厅1卫</view>
|
||||
<view class="desc"><text>50.8m²|南</text></view>
|
||||
<view class="price">6600元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="$push('sub_pages/house/detail?id=')">
|
||||
<image class="image" src="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwr9ba.jpg"></image>
|
||||
<view class="info">
|
||||
<view class="title">整租·万科云城 2室1厅1卫</view>
|
||||
<view class="desc"><text>50.8m²|南</text></view>
|
||||
<view class="price">6600元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="$push('sub_pages/house/detail?id=')">
|
||||
<image class="image" src="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwr9ba.jpg"></image>
|
||||
<view class="info">
|
||||
<view class="title">整租·万科云城 2室1厅1卫</view>
|
||||
<view class="desc"><text>50.8m²|南</text></view>
|
||||
<view class="price">6600元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="$push('sub_pages/house/detail?id=')">
|
||||
<image class="image" src="https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rwr9ba.jpg"></image>
|
||||
<view class="info">
|
||||
<view class="title">整租·万科云城 2室1厅1卫</view>
|
||||
<view class="desc"><text>50.8m²|南</text></view>
|
||||
<view class="price">6600元/月</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap></u-gap>
|
||||
<view class="float">
|
||||
<view class="release">
|
||||
<u-button text="添加房源" type="primary" shape="circle" @click="$push('sub_pages/house/add')"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import {
|
||||
fileUrl
|
||||
} from '@/config.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
select: [],
|
||||
bgColor: '#ffffff'
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
// this.getDict()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
// this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
onSearch() {
|
||||
this.$push('/sub_pages/member/member', this.where)
|
||||
},
|
||||
onBadge(id){
|
||||
this.bgColor = '#ff0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
// 搜索输入框
|
||||
.search-input {
|
||||
width: 80%;
|
||||
background: #fff;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 10rpx 0 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 60rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
display: block;
|
||||
color: #b4b4b4;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input-placeholder {
|
||||
color: #aba9a9;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
background: $main-bg;
|
||||
color: $main-text;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单合计
|
||||
.order-total {
|
||||
margin: 10rpx auto;
|
||||
font-size: 26rpx;
|
||||
vertical-align: bottom;
|
||||
text-align: right;
|
||||
height: 50rpx;
|
||||
padding-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.pay-btn{
|
||||
display: flex;
|
||||
.btn{
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
.total-price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unit {
|
||||
margin-left: 8rpx;
|
||||
margin-right: -2rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
.house{
|
||||
margin: 30rpx auto;
|
||||
width: 680rpx;
|
||||
.btn{
|
||||
width: 150rpx;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
.list{
|
||||
width: 680rpx;
|
||||
margin: auto;
|
||||
.item{
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
box-shadow: 0 3rpx 10rpx 0px #999999;
|
||||
background-color: #FFFFFF;
|
||||
margin: 50rpx auto;
|
||||
position: relative;
|
||||
.badge{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
.image{
|
||||
width: 680rpx;
|
||||
height: 360rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
}
|
||||
.info{
|
||||
padding: 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.price{
|
||||
color: #ff0000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.float{
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
.release{
|
||||
width: 500rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1049
sub_pages/love/comment/comment.vue
Normal file
1049
sub_pages/love/comment/comment.vue
Normal file
File diff suppressed because it is too large
Load Diff
509
sub_pages/love/release/release.vue
Normal file
509
sub_pages/love/release/release.vue
Normal file
@@ -0,0 +1,509 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
<u--form :model="form" ref="uForm" :rules="rules">
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-form-item prop="content">
|
||||
<u--textarea v-model="form.content" placeholder="这一刻的想法" :autoHeight="true" :maxlength="-1"
|
||||
:border="false" :confirmType="null"></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item prop="files">
|
||||
<view class="upload-box">
|
||||
<button @click="previewMdeia(item, index)" v-for="(item, index) in fileList1" :key="index" class="btn-upload u-reset-button">
|
||||
<image class="upload-img" :src="item.thumb" mode="aspectFit"></image>
|
||||
</button>
|
||||
<button v-show="fileList1.length < 9 && (fileList1.length == 0 || fileList1[0].type!= 'video')" class="btn-upload u-reset-button" @click="onChooseMedia">
|
||||
<u-icon name="plus"></u-icon>
|
||||
</button>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<view class="a-space">
|
||||
<!-- <u-icon name="photo" :size="32" style="margin-right: 50rpx;"></u-icon>
|
||||
<u-icon name="play-right" :size="32"></u-icon> -->
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<!-- <u-cell icon="map" :title="form.address" :isLink="true" @click="onArea"></u-cell> -->
|
||||
<u-cell icon="chat" :title="form.topic" :isLink="true" @click="onTopic"></u-cell>
|
||||
<!-- <u-cell icon="bell" :title="form.toUserNames" :isLink="true" @click="onFollowers"></u-cell> -->
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</u--form>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="发布动态" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker :show="showTopic" :columns="dict.topic" @confirm="confirmTopic"
|
||||
@cancel="showTopic = false"></u-picker>
|
||||
<u-picker :show="showFollowers" :columns="followersUsers" keyName="label" @confirm="confirmFollowers"
|
||||
@cancel="showFollowers = false"></u-picker>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"> </liu-customize-sel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import platform from '@/core/platform'
|
||||
import AvatarImage from '@/components/avatar-image'
|
||||
import * as ArticleApi from '@/api/article.js'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
import * as UserFollowApi from '@/api/user-follow.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
export default {
|
||||
components: {
|
||||
AvatarImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dict: null,
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
isRefresh: false,
|
||||
// 最大上传图片数量
|
||||
maxCount: 9,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
// 表单数据
|
||||
form: {
|
||||
userInfo: null,
|
||||
accept: 'image',
|
||||
address: '添加地点',
|
||||
topic: '参与话题',
|
||||
toUsers: [],
|
||||
toUserNames: '提醒谁看'
|
||||
},
|
||||
platform,
|
||||
fileList1: [],
|
||||
fileType: '',
|
||||
// 验证规则
|
||||
rules: {
|
||||
'userInfo.name': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
},
|
||||
showTopic: false,
|
||||
showFollowers: false,
|
||||
followersUsers: []
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.getDict()
|
||||
this.getFollowersUsers()
|
||||
},
|
||||
onUnload(){
|
||||
const { isRefresh } = this
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.emit('reload', {isRefresh});
|
||||
},
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChooseMedia() {
|
||||
const app = this
|
||||
if(this.fileList1.length == 0){
|
||||
uni.showActionSheet({
|
||||
itemList: ["上传视频", "上传照片"],
|
||||
success({tapIndex}) {
|
||||
if(tapIndex == 0){
|
||||
uni.chooseMedia({
|
||||
mediaType: ['video'],
|
||||
maxDuration: 15,
|
||||
count: 1,
|
||||
success(media) {
|
||||
console.log('media: ',media);
|
||||
const {tempFilePath, thumbTempFilePath, size,width,height} = media.tempFiles[0]
|
||||
if(size > 31457280){
|
||||
uni.showToast({
|
||||
title: "上传单个视频最大为30m",
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '正在上传',
|
||||
mask: true
|
||||
})
|
||||
// 上传封面和视频
|
||||
Promise.all([
|
||||
UploadApi.uploadFile({
|
||||
filePath: thumbTempFilePath,
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}),
|
||||
UploadApi.uploadFile({
|
||||
filePath: tempFilePath,
|
||||
fileType: 'video',
|
||||
name: 'file'
|
||||
})
|
||||
]).then(([res1,res2])=>{
|
||||
app.fileList1.push({
|
||||
thumb: res1.data.url,
|
||||
tempFilePath,
|
||||
url: res2.data.url,
|
||||
type: 'video',
|
||||
width,
|
||||
height
|
||||
})
|
||||
}).finally(()=>{
|
||||
uni.hideLoading()
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
}else {
|
||||
app.chooseImage()
|
||||
}
|
||||
}
|
||||
})
|
||||
}else {
|
||||
app.chooseImage()
|
||||
}
|
||||
},
|
||||
async chooseImage() {
|
||||
const app = this
|
||||
uni.chooseImage({
|
||||
count: 9 - this.fileList1.length,
|
||||
success({tempFiles}) {
|
||||
app.uploadImage(tempFiles)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async uploadImage(tempFiles) {
|
||||
uni.showLoading({
|
||||
title: '正在上传',
|
||||
mask: true
|
||||
})
|
||||
for (let i = 0; i < tempFiles.length; i++) {
|
||||
console.log("result: ",result);
|
||||
const result = await this.uploadFilePromise(tempFiles[i].path)
|
||||
this.fileList1.push({
|
||||
thumb: result.url,
|
||||
url: result.url,
|
||||
type: 'image'
|
||||
})
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
previewMdeia(item , index){
|
||||
if(item.type == 'image'){
|
||||
const urls = this.fileList1.map(d => d.url)
|
||||
console.log('urls: ',urls);
|
||||
uni.previewImage({
|
||||
urls,
|
||||
current: index
|
||||
})
|
||||
}else {
|
||||
uni.previewMedia({
|
||||
sources: [{
|
||||
url: item.url,
|
||||
type: "video",
|
||||
poster: item.thumb
|
||||
}]
|
||||
})
|
||||
}
|
||||
},
|
||||
getDict() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.dict = res.data;
|
||||
})
|
||||
},
|
||||
getFollowersUsers(){
|
||||
const app = this
|
||||
UserFollowApi.listFollow().then(res => {
|
||||
const arr = res.data.map(d => {
|
||||
return {
|
||||
value: d.shopId,
|
||||
label: d.shopNickname
|
||||
}
|
||||
})
|
||||
app.followersUsers = [arr]
|
||||
})
|
||||
},
|
||||
// 选择微信地址
|
||||
// #ifdef MP-WEIXIN
|
||||
chooseAddress() {
|
||||
const {
|
||||
form,
|
||||
$refs
|
||||
} = this
|
||||
uni.chooseAddress({
|
||||
success(res) {
|
||||
const names = $refs.sRegion.getOptionItemByNames(res)
|
||||
form.name = res.userName
|
||||
form.phone = res.telNumber
|
||||
form.detail = res.detailInfo
|
||||
form.region = names.length > 0 ? names : []
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if (app.disabled === true) return
|
||||
this.$refs.uForm.validate().then(() => {
|
||||
if(app.fileList1.length == 0){
|
||||
return app.$toast('请上传图片或视频')
|
||||
}
|
||||
app.form.platform = platform
|
||||
app.form.files = JSON.stringify(app.fileList1)
|
||||
app.form.categoryId = 0
|
||||
app.form.toUsers = JSON.stringify(app.form.toUsers)
|
||||
app.disabled = true
|
||||
ArticleApi.addArticle(app.form).then(result => {
|
||||
app.$toast('发布成功')
|
||||
app.isRefresh = true
|
||||
setTimeout(function() {
|
||||
uni.navigateBack({
|
||||
isRefresh: true
|
||||
})
|
||||
}, 2000)
|
||||
})
|
||||
}).catch(errors => {
|
||||
// uni.$u.toast('校验失败')
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 上传的文件类型不是图片则限制只能传一个
|
||||
if(event.name == '2'){
|
||||
this.fileType = 'video'
|
||||
this.maxCount = 1
|
||||
this.form.accept = 'video'
|
||||
}
|
||||
if(event.name == '1'){
|
||||
this.fileType = 'image'
|
||||
}
|
||||
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
console.log("result: ",result);
|
||||
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
resolve(res.data)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
onTopic(){
|
||||
this.showTopic = true
|
||||
},
|
||||
confirmTopic(e){
|
||||
this.form.topic = e.value[0]
|
||||
this.showTopic = false
|
||||
},
|
||||
onArea() {
|
||||
// this.$refs.area.open()
|
||||
uni.chooseLocation({
|
||||
latitude: 22.817072,
|
||||
longitude: 108.369102,
|
||||
success: function (res) {
|
||||
console.log('位置名称：' + res.name);
|
||||
console.log('详细地址：' + res.address);
|
||||
console.log('纬度：' + res.latitude);
|
||||
console.log('经度：' + res.longitude);
|
||||
},
|
||||
complete(res) {
|
||||
console.log(res)
|
||||
}
|
||||
});
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.form.address = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
},
|
||||
onFollowers(){
|
||||
this.showFollowers = true
|
||||
},
|
||||
confirmFollowers(e){
|
||||
this.form.toUserNames = '提醒谁看'
|
||||
this.toUsers = []
|
||||
this.form.toUserNames = e.value[0].label
|
||||
this.form.toUsers.push(e.value[0].value)
|
||||
this.showFollowers = false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
|
||||
.page-title {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
padding-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
}
|
||||
|
||||
.interest {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 0 40rpx;
|
||||
width: 700rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
|
||||
.a-space {
|
||||
min-height: 50rpx;
|
||||
height: auto;
|
||||
display: flex;
|
||||
// padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.video{
|
||||
margin-top: 20rpx;
|
||||
width: 150rpx;
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 50rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
width: 300rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.upload-box{
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 150rpx;
|
||||
display: block;
|
||||
}
|
||||
.btn-upload{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 150rpx;
|
||||
height: 170rpx;
|
||||
// background: rgba(15, 0, 32, 0.5);
|
||||
border: 2rpx solid #e8e8e8;
|
||||
|
||||
border-radius: 10rpx;
|
||||
// overflow: hidden;
|
||||
margin: 0 20rpx 0 0;
|
||||
position: relative;
|
||||
.btn-del{
|
||||
height: 20rpx;
|
||||
}
|
||||
.btn-upload-plus{
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.upload-img{
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
1601
sub_pages/member/detail/detail.vue
Normal file
1601
sub_pages/member/detail/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
168
sub_pages/member/member.vue
Normal file
168
sub_pages/member/member.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-sticky>
|
||||
<view class="search-wrapper">
|
||||
<u-search :showAction="true" border-color="#E8E8E8" actionText="搜索" :animation="false" v-model="where.keywords" @search="onSearch" :actionStyle="actionStyle"></u-search>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<view class="user-list">
|
||||
<u-list :height="680" @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.userInfo.nickname}`" :label="`粉丝：${ item.userInfo.fans }`" isLink
|
||||
@click="navTo('/sub_pages/member/detail/detail',{userId: item.userId})">
|
||||
<u-avatar slot="icon" size="50" :src="item.userInfo.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<view slot="right-icon" @click.stop="onFollow(item.userId,index)">
|
||||
<view v-if="item.follow" class="unfollow-btn">
|
||||
<!-- <u-icon name="heart" color="#ffffff" :size="15"></u-icon> -->
|
||||
<text>已关注</text>
|
||||
</view>
|
||||
<view v-else class="follow-btn">
|
||||
<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty
|
||||
v-if="list.length == 0"
|
||||
mode="search"
|
||||
icon="http://cdn.uviewui.com/uview/empty/search.png"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UserFollowApi from '@/api/user-follow.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 1,
|
||||
where: {
|
||||
showProfile: true
|
||||
},
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false,
|
||||
actionStyle: {
|
||||
background: '#8b004c',
|
||||
color: '#ffffff',
|
||||
padding: '12rpx 16rpx',
|
||||
borderRadius: '50rpx'
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
app.where.showFollow = true
|
||||
app.where.showProfile = true
|
||||
return new Promise((resolve, reject) => {
|
||||
UserProfileApi.pageUserProfile(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if(result.data.count > app.list.length){
|
||||
app.canReset = true
|
||||
}else{
|
||||
app.canReset = false
|
||||
}
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e){
|
||||
console.log("e: ",e);
|
||||
},
|
||||
navTo(url,userId){
|
||||
this.$push(url,userId)
|
||||
},
|
||||
onFollow(shopId,index){
|
||||
if(userId == null || userId == 1101){
|
||||
this.$push('pages/login/index')
|
||||
return false
|
||||
}
|
||||
this.list[index].follow = !this.list[index].follow
|
||||
UserFollowApi.addFollow({shopId}).then(res => {
|
||||
this.$success(res.message)
|
||||
})
|
||||
},
|
||||
onSearch(){
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
padding: 20rpx;
|
||||
}
|
||||
.user-list{
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
display: flex;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.unfollow-btn {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
display: flex;
|
||||
background: linear-gradient(#b3b3b3, #cccccc);
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 66rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
315
sub_pages/notice/comment.vue
Normal file
315
sub_pages/notice/comment.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<view class="notice">
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
|
||||
<u-cell isLink @click="onArticleComment(item.commentId)" v-for="(item, index) in dataList" :key="index">
|
||||
<view slot="title" class="nickname">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
|
||||
<u-avatar size="50" :src="item.avatar" shape="square"
|
||||
customStyle="margin: -3px 5px -3px 0" mode="aspectFill"></u-avatar>
|
||||
<view>
|
||||
<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="label">
|
||||
<view class="fans" v-if="item.replyCommentId == 0">对方评论了你</view>
|
||||
<view class="fans" v-else>对方回复了你的评论</view>
|
||||
</view>
|
||||
<view slot="right-icon" @click.stop="onArticleComment(item.commentId)">
|
||||
<u-button text="查看TA" color="linear-gradient(to bottom, #010002, #681752)" shape="circle" size="small" ></u-button>
|
||||
</view>
|
||||
</u-cell>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as ArticleCommentApi from '@/api/article-comment.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '../../utils/storage'
|
||||
import mixin from '@/core/mixins/tabbar'
|
||||
import {
|
||||
ACCESS_TOKEN,
|
||||
USER_ID
|
||||
} from '@/store/mutation-types'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
const menus = [
|
||||
{
|
||||
index: 0,
|
||||
title: '喜欢我',
|
||||
icon: '../../static/icon/notice-01.png',
|
||||
path: 'sub_pages/notice/fans',
|
||||
value: 41,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
title: '我喜欢',
|
||||
icon: '../../static/icon/notice-02.png',
|
||||
path: 'sub_pages/notice/like',
|
||||
value: 0,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
title: '评论',
|
||||
icon: '../../static/icon/notice-03.png',
|
||||
path: 'sub_pages/notice/comment',
|
||||
value: 12,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
title: '看过我',
|
||||
icon: '../../static/icon/notice-04.png',
|
||||
path: 'sub_pages/notice/look',
|
||||
value: 8,
|
||||
show: false
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
menus,
|
||||
title: '国内馆',
|
||||
// 正在加载中
|
||||
isLoading: false,
|
||||
// 是否授权了定位权限
|
||||
isAuthor: true,
|
||||
// 当前选择的门店ID
|
||||
selectedId: null,
|
||||
// 订单列表数据
|
||||
dataList: [],
|
||||
isLogin: true,
|
||||
// 未读评论
|
||||
count: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.SET_UNREAD_COMMENT_NUMBER(0)
|
||||
},
|
||||
onShow() {
|
||||
const app = this
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
if (!loginUserId || loginUserId == 1101) {
|
||||
app.isLogin = false
|
||||
return false;
|
||||
}
|
||||
app.isLogin = true
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['ADD_FRIEND','SET_UNREAD_COMMENT_NUMBER']),
|
||||
onArticleComment(commentId) {
|
||||
this.$push('/sub_pages/love/comment/comment',{commentId})
|
||||
},
|
||||
|
||||
async queryList(page, limit ) {
|
||||
const res = await ArticleCommentApi.pageArticleComment({sceneType: 'UN_READ_COMMENT', sort: 'createTime', order: 'desc', page, limit})
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
},
|
||||
onFollow(shopId, index) {
|
||||
const app = this
|
||||
app.list[index].eachFollow = !app.list[index].eachFollow
|
||||
UserLikeApi.addFollow({
|
||||
shopId
|
||||
}).then(res => {
|
||||
app.$success(res.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
async onPullDownRefresh() {
|
||||
this.getArticleComment().finally(()=>{
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
filters: {
|
||||
formatTime(val) {
|
||||
const date = new Date(val);
|
||||
let today = new Date().setHours(0, 0, 0, 0);
|
||||
let d = new Date(val).setHours(0, 0, 0, 0);
|
||||
if (d === today) {
|
||||
return uni.$u.timeFormat(date, 'hh:MM')
|
||||
} else {
|
||||
return uni.$u.timeFormat(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 750rpx;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #e9ebf1;
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
display: flex;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unread {
|
||||
position: absolute;
|
||||
min-width: 35rpx;
|
||||
min-height: 35rpx;
|
||||
border-radius: 35rpx;
|
||||
background-color: #f56c6c;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -14rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.fans {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: #2C71C7
|
||||
}
|
||||
}
|
||||
.u-body-item {
|
||||
align-items: stretch !important
|
||||
}
|
||||
.agree {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
// 微信授权登录
|
||||
.wechat-auth {
|
||||
width: 600rpx;
|
||||
height: 86rpx;
|
||||
margin: 100rpx auto 50rpx auto;
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-normal {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
.btn-normal-no {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wechat-auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $main-text;
|
||||
background: none !important;
|
||||
|
||||
.title {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 80rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
318
sub_pages/notice/fans.vue
Normal file
318
sub_pages/notice/fans.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<view class="notice">
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
|
||||
<u-cell isLink @click="onUserDetail(item)" v-for="(item, index) in dataList" :key="index">
|
||||
<view slot="title" class="nickname">
|
||||
{{ item.nickname }}
|
||||
</view>
|
||||
<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
|
||||
<u-avatar size="50" :src="item.avatar" shape="square"
|
||||
customStyle="margin: -3px 5px -3px 0" mode="aspectFill"></u-avatar>
|
||||
<view>
|
||||
<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="label">
|
||||
<view class="fans">对方喜欢了你</view>
|
||||
</view>
|
||||
<view slot="right-icon" @click.stop="onUserDetail(item)">
|
||||
<u-button text="查看TA" color="linear-gradient(to bottom, #010002, #681752)" shape="circle" size="small" ></u-button>
|
||||
</view>
|
||||
</u-cell>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserLikeApi from '@/api/user-like.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '../../utils/storage'
|
||||
import mixin from '@/core/mixins/tabbar'
|
||||
import {
|
||||
ACCESS_TOKEN,
|
||||
USER_ID
|
||||
} from '@/store/mutation-types'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
const menus = [
|
||||
{
|
||||
index: 0,
|
||||
title: '喜欢我',
|
||||
icon: '../../static/icon/notice-01.png',
|
||||
path: 'sub_pages/notice/fans',
|
||||
value: 41,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
title: '我喜欢',
|
||||
icon: '../../static/icon/notice-02.png',
|
||||
path: 'sub_pages/notice/like',
|
||||
value: 0,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
title: '评论',
|
||||
icon: '../../static/icon/notice-03.png',
|
||||
path: 'sub_pages/notice/comment',
|
||||
value: 12,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
title: '看过我',
|
||||
icon: '../../static/icon/notice-04.png',
|
||||
path: 'sub_pages/notice/look',
|
||||
value: 8,
|
||||
show: false
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
menus,
|
||||
title: '国内馆',
|
||||
// 正在加载中
|
||||
isLoading: false,
|
||||
// 是否授权了定位权限
|
||||
isAuthor: true,
|
||||
// 当前选择的门店ID
|
||||
selectedId: null,
|
||||
// 订单列表数据
|
||||
dataList: [],
|
||||
isLogin: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.SET_UNREAD_LIKE_ME_NUMBER(0)
|
||||
},
|
||||
onShow() {
|
||||
const app = this
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
if (!loginUserId || loginUserId == 1101) {
|
||||
app.isLogin = false
|
||||
return false;
|
||||
}
|
||||
app.isLogin = true
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['ADD_FRIEND','SET_UNREAD_LIKE_ME_NUMBER']),
|
||||
onUserDetail(item) {
|
||||
|
||||
// UserLikeApi.updateLike({
|
||||
// logId: item.logId,
|
||||
// status: 1
|
||||
// })
|
||||
this.$push('/sub_pages/member/detail/detail',{userId:item.userId})
|
||||
},
|
||||
|
||||
async queryList(page, limit ) {
|
||||
const toUserId = uni.getStorageSync('userId')
|
||||
const res = await UserLikeApi.pageLike({sort: 'createTime', order: 'desc',toUserId, page, limit})
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
},
|
||||
onFollow(shopId, index) {
|
||||
const app = this
|
||||
app.list[index].eachFollow = !app.list[index].eachFollow
|
||||
UserLikeApi.addFollow({
|
||||
shopId
|
||||
}).then(res => {
|
||||
app.$success(res.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
async onPullDownRefresh() {
|
||||
this.getMyFans().finally(()=>{
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
filters: {
|
||||
formatTime(val) {
|
||||
const date = new Date(val);
|
||||
let today = new Date().setHours(0, 0, 0, 0);
|
||||
let d = new Date(val).setHours(0, 0, 0, 0);
|
||||
if (d === today) {
|
||||
return uni.$u.timeFormat(date, 'hh:MM')
|
||||
} else {
|
||||
return uni.$u.timeFormat(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 750rpx;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #e9ebf1;
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
display: flex;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unread {
|
||||
position: absolute;
|
||||
min-width: 35rpx;
|
||||
min-height: 35rpx;
|
||||
border-radius: 35rpx;
|
||||
background-color: #f56c6c;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -14rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.fans {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: #2C71C7
|
||||
}
|
||||
}
|
||||
.u-body-item {
|
||||
align-items: stretch !important
|
||||
}
|
||||
.agree {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
// 微信授权登录
|
||||
.wechat-auth {
|
||||
width: 600rpx;
|
||||
height: 86rpx;
|
||||
margin: 100rpx auto 50rpx auto;
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-normal {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
.btn-normal-no {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wechat-auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $main-text;
|
||||
background: none !important;
|
||||
|
||||
.title {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 80rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
sub_pages/notice/like.vue
Normal file
307
sub_pages/notice/like.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view class="notice">
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
|
||||
<u-cell v-for="(item, index) in dataList" :key="index" isLink @click="onUserDetail(item)">
|
||||
<view slot="title" class="nickname">
|
||||
{{ item.toUserNickname }}
|
||||
</view>
|
||||
<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
|
||||
<u-avatar size="50" :src="item.toUserAvatar" shape="square"
|
||||
customStyle="margin: -3px 5px -3px 0" mode="aspectFill"></u-avatar>
|
||||
<view>
|
||||
<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view slot="label">
|
||||
<view class="fans">对方喜欢了你</view>
|
||||
</view> -->
|
||||
<view slot="right-icon" @click.stop="onUserDetail(item)">
|
||||
<u-button text="查看TA" color="linear-gradient(to bottom, #010002, #681752)" shape="circle" size="small" ></u-button>
|
||||
</view>
|
||||
</u-cell>
|
||||
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserLikeApi from '@/api/user-like.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '../../utils/storage'
|
||||
import mixin from '@/core/mixins/tabbar'
|
||||
import {
|
||||
ACCESS_TOKEN,
|
||||
USER_ID
|
||||
} from '@/store/mutation-types'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
const menus = [
|
||||
{
|
||||
index: 0,
|
||||
title: '喜欢我',
|
||||
icon: '../../static/icon/notice-01.png',
|
||||
path: 'sub_pages/notice/fans',
|
||||
value: 41,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
title: '我喜欢',
|
||||
icon: '../../static/icon/notice-02.png',
|
||||
path: 'sub_pages/notice/like',
|
||||
value: 0,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
title: '评论',
|
||||
icon: '../../static/icon/notice-03.png',
|
||||
path: 'sub_pages/notice/comment',
|
||||
value: 12,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
title: '看过我',
|
||||
icon: '../../static/icon/notice-04.png',
|
||||
path: 'sub_pages/notice/look',
|
||||
value: 8,
|
||||
show: false
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
menus,
|
||||
title: '国内馆',
|
||||
// 正在加载中
|
||||
isLoading: false,
|
||||
// 是否授权了定位权限
|
||||
isAuthor: true,
|
||||
// 当前选择的门店ID
|
||||
selectedId: null,
|
||||
// 订单列表数据
|
||||
dataList: [],
|
||||
isLogin: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onShow() {
|
||||
const app = this
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
if (!loginUserId || loginUserId == 1101) {
|
||||
app.isLogin = false
|
||||
return false;
|
||||
}
|
||||
app.isLogin = true
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['ADD_FRIEND']),
|
||||
onUserDetail(item) {
|
||||
this.$push('/sub_pages/member/detail/detail',{userId:item.toUserId})
|
||||
},
|
||||
async queryList(page, limit ) {
|
||||
const res = await UserLikeApi.pageLike({sort: 'createTime', order: 'desc',userId: uni.getStorageSync('userId'), page, limit})
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
},
|
||||
|
||||
onFollow(shopId, index) {
|
||||
const app = this
|
||||
app.list[index].eachFollow = !app.list[index].eachFollow
|
||||
UserLikeApi.addFollow({
|
||||
shopId
|
||||
}).then(res => {
|
||||
app.$success(res.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatTime(val) {
|
||||
const date = new Date(val);
|
||||
let today = new Date().setHours(0, 0, 0, 0);
|
||||
let d = new Date(val).setHours(0, 0, 0, 0);
|
||||
if (d === today) {
|
||||
return uni.$u.timeFormat(date, 'hh:MM')
|
||||
} else {
|
||||
return uni.$u.timeFormat(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 750rpx;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #e9ebf1;
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
display: flex;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unread {
|
||||
position: absolute;
|
||||
min-width: 35rpx;
|
||||
min-height: 35rpx;
|
||||
border-radius: 35rpx;
|
||||
background-color: #f56c6c;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -14rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.fans {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: #2C71C7
|
||||
}
|
||||
}
|
||||
.u-body-item {
|
||||
align-items: stretch !important
|
||||
}
|
||||
.agree {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
// 微信授权登录
|
||||
.wechat-auth {
|
||||
width: 600rpx;
|
||||
height: 86rpx;
|
||||
margin: 100rpx auto 50rpx auto;
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-normal {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
.btn-normal-no {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wechat-auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $main-text;
|
||||
background: none !important;
|
||||
|
||||
.title {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 80rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
318
sub_pages/notice/look.vue
Normal file
318
sub_pages/notice/look.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<view class="notice">
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
|
||||
<u-cell isLink @click="onUserDetail(item)" v-for="(item, index) in dataList" :key="index">
|
||||
<view slot="title" class="nickname">
|
||||
{{ item.nickname }}
|
||||
</view>
|
||||
<view slot="icon" :iconStyle="iconStyle" class="head avatar2">
|
||||
<u-avatar size="50" :src="item.avatar" shape="square"
|
||||
customStyle="margin: -3px 5px -3px 0" mode="aspectFill" ></u-avatar>
|
||||
<view>
|
||||
<u-badge type="error" max="99" shape="circle" :absolute="true" :offset="[-8,-2]"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="label">
|
||||
<view class="fans">对方看了你</view>
|
||||
</view>
|
||||
<view slot="right-icon" @click.stop="onUserDetail(item)">
|
||||
<u-button text="查看对方" color="linear-gradient(to bottom, #010002, #681752)" shape="circle" size="small" ></u-button>
|
||||
</view>
|
||||
</u-cell>
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserLookApi from '@/api/user-look.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '../../utils/storage'
|
||||
import mixin from '@/core/mixins/tabbar'
|
||||
import {
|
||||
ACCESS_TOKEN,
|
||||
USER_ID
|
||||
} from '@/store/mutation-types'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
const menus = [
|
||||
{
|
||||
index: 0,
|
||||
title: '喜欢我',
|
||||
icon: '../../static/icon/notice-01.png',
|
||||
path: 'sub_pages/notice/fans',
|
||||
value: 41,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
title: '我喜欢',
|
||||
icon: '../../static/icon/notice-02.png',
|
||||
path: 'sub_pages/notice/like',
|
||||
value: 0,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
title: '评论',
|
||||
icon: '../../static/icon/notice-03.png',
|
||||
path: 'sub_pages/notice/comment',
|
||||
value: 12,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
title: '看过我',
|
||||
icon: '../../static/icon/notice-04.png',
|
||||
path: 'sub_pages/notice/look',
|
||||
value: 8,
|
||||
show: false
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
menus,
|
||||
title: '国内馆',
|
||||
// 正在加载中
|
||||
isLoading: false,
|
||||
// 是否授权了定位权限
|
||||
isAuthor: true,
|
||||
// 当前选择的门店ID
|
||||
selectedId: null,
|
||||
// 订单列表数据
|
||||
dataList: [],
|
||||
isLogin: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.SET_UNREAD_LOOK_NUMBER(0)
|
||||
},
|
||||
onShow() {
|
||||
const app = this
|
||||
const loginUserId = uni.getStorageSync('userId')
|
||||
if (!loginUserId || loginUserId == 1101) {
|
||||
app.isLogin = false
|
||||
return false;
|
||||
}
|
||||
app.isLogin = true
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['ADD_FRIEND','SET_UNREAD_LOOK_NUMBER']),
|
||||
onUserDetail(item) {
|
||||
|
||||
// UserLookApi.updateLook({
|
||||
// logId: item.logId,
|
||||
// status: 1
|
||||
// })
|
||||
this.$push('/sub_pages/member/detail/detail',{userId:item.userId})
|
||||
},
|
||||
|
||||
async queryList(page, limit ) {
|
||||
const res = await UserLookApi.pageLook({sort: 'createTime', order: 'desc',toUserId: uni.getStorageSync('userId'), page, limit})
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
},
|
||||
onFollow(shopId, index) {
|
||||
const app = this
|
||||
app.list[index].eachFollow = !app.list[index].eachFollow
|
||||
UserFollowApi.addFollow({
|
||||
shopId
|
||||
}).then(res => {
|
||||
app.getMyFans()
|
||||
app.$success(res.message)
|
||||
})
|
||||
}
|
||||
},
|
||||
async onPullDownRefresh() {
|
||||
this.getLookList().finally(()=>{
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
},
|
||||
filters: {
|
||||
formatTime(val) {
|
||||
const date = new Date(val);
|
||||
let today = new Date().setHours(0, 0, 0, 0);
|
||||
let d = new Date(val).setHours(0, 0, 0, 0);
|
||||
if (d === today) {
|
||||
return uni.$u.timeFormat(date, 'hh:MM')
|
||||
} else {
|
||||
return uni.$u.timeFormat(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.notice {
|
||||
}
|
||||
.head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 750rpx;
|
||||
padding: 25rpx 0;
|
||||
border-bottom: 1rpx solid #e9ebf1;
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.user-list {
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.avatar2 {
|
||||
display: flex;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.unread {
|
||||
position: absolute;
|
||||
min-width: 35rpx;
|
||||
min-height: 35rpx;
|
||||
border-radius: 35rpx;
|
||||
background-color: #f56c6c;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -14rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.fans {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: #2C71C7
|
||||
}
|
||||
}
|
||||
.u-body-item {
|
||||
align-items: stretch !important
|
||||
}
|
||||
.agree {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
// 微信授权登录
|
||||
.wechat-auth {
|
||||
width: 600rpx;
|
||||
height: 86rpx;
|
||||
margin: 100rpx auto 50rpx auto;
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-normal {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
.btn-normal-no {
|
||||
width: 580rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.wechat-auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $main-text;
|
||||
background: none !important;
|
||||
|
||||
.title {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 80rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
319
sub_pages/order/delivery.vue
Executable file
319
sub_pages/order/delivery.vue
Executable file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="reject" v-if="form.apply_status == 10">
|
||||
<u-alert type="error" title="申请已提交:" description="请耐心等待工作人员的审核"></u-alert>
|
||||
</view>
|
||||
<view class="reject" v-else-if="form.apply_status == 30">
|
||||
<u-alert type="error" title="您的申请已被驳回:" :description="form.reject_reason"></u-alert>
|
||||
</view>
|
||||
<u-form :model="form" ref="uForm" label-width="140rpx">
|
||||
<!-- 标题 -->
|
||||
<view class="page-title">身份证信息</view>
|
||||
<view class="form-wrapper">
|
||||
<u-form-item label="正面" prop="img1">
|
||||
<image :src="orderSourceData[0]" v-if="orderSourceData[0]" mode="aspectFill" style="width: 300rpx;height: 200rpx"></image>
|
||||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(1)"></image>
|
||||
</u-form-item>
|
||||
<u-form-item label="反面" prop="img2">
|
||||
<image :src="orderSourceData[1]" v-if="orderSourceData[1]" mode="aspectFill" style="width: 300rpx;height: 200rpx"></image>
|
||||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(2)"></image>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="page-title">其他</view>
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-form-item label="人车合照" prop="img3">
|
||||
<image :src="orderSourceData[2]" v-if="orderSourceData[2]" mode="aspectFill" style="width: 300rpx;height: 200rpx"></image>
|
||||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(3)"></image>
|
||||
</u-form-item>
|
||||
<u-form-item label="车子照片" prop="img4">
|
||||
<image :src="orderSourceData[3]" v-if="orderSourceData[3]" mode="aspectFill" style="width: 300rpx;height: 200rpx"></image>
|
||||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(4)"></image>
|
||||
</u-form-item>
|
||||
<u-form-item label="安装照片" prop="img5">
|
||||
<image :src="orderSourceData[4]" v-if="orderSourceData[4]" mode="aspectFill" style="width: 300rpx;height: 200rpx"></image>
|
||||
<image src="../../static/not-dealer.png" v-else mode="aspectFill" style="width: 300rpx;height: 200rpx" @click="chooseImage(5)"></image>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u-form>
|
||||
<view class="btn">
|
||||
<u-button type="primary" shape="circle" @click="handleSubmit()">
|
||||
{{ submitText }}
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button shape="circle" @click="resetting">
|
||||
重置
|
||||
</u-button>
|
||||
</view>
|
||||
<view class="btn"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/api/upload.js'
|
||||
import {
|
||||
pageOrder,
|
||||
removeOrder,
|
||||
receiptOrder,
|
||||
getOrder
|
||||
} from '@/api/order.js'
|
||||
import { fileUrl } from '@/config.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order: {},
|
||||
orderSourceData: [],
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
submitText: '证件已上传并确认收货',
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
const app = this
|
||||
app.orderId = options.orderId
|
||||
this.getData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载订单
|
||||
getData(){
|
||||
const app = this
|
||||
const { orderId } = this
|
||||
getOrder(orderId).then(res => {
|
||||
console.log("res: ",res);
|
||||
app.order = res.data
|
||||
if(res.data.orderSourceData.length > 0){
|
||||
app.orderSourceData = JSON.parse(res.data.orderSourceData)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重置
|
||||
resetting(){
|
||||
const { orderId } = this
|
||||
receiptOrder({
|
||||
orderId,
|
||||
orderSourceData: ''
|
||||
}).then(result => {
|
||||
this.$success("重置成功")
|
||||
// 刷新订单列表
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
handleSubmit() {
|
||||
const app = this
|
||||
this.$navTo('pages/order/index')
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
chooseImage(id) {
|
||||
const app = this
|
||||
const { orderId } = this
|
||||
const type = 'photo' + id
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(chooseImageRes) {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
uploadFile({
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
console.log("res: ", res);
|
||||
app.orderSourceData.push(fileUrl + res.data.path)
|
||||
receiptOrder({
|
||||
orderId,
|
||||
orderSourceData: JSON.stringify(app.orderSourceData)
|
||||
}).then(result => {
|
||||
app.$success("上传成功")
|
||||
// 刷新订单列表
|
||||
app.getData()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-title {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
padding-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 0 40rpx;
|
||||
width: 94%;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 80rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 上传凭证
|
||||
.row-voucher {
|
||||
padding: 24rpx 20rpx;
|
||||
|
||||
.image-list {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: -20rpx;
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-picker,
|
||||
.image-preview {
|
||||
width: 184rpx;
|
||||
height: 184rpx;
|
||||
margin-right: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
float: left;
|
||||
|
||||
&:nth-child(3n+0) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1rpx dashed #ccc;
|
||||
color: #ccc;
|
||||
|
||||
.choose-icon {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.choose-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
position: relative;
|
||||
|
||||
.image-delete {
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
right: -15rpx;
|
||||
height: 42rpx;
|
||||
width: 42rpx;
|
||||
background: rgba(0, 0, 0, 0.64);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-weight: bolder;
|
||||
font-size: 22rpx;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-license {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.pops-content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.sfz,
|
||||
.sfz1,
|
||||
.sfz2,
|
||||
.yyzz {
|
||||
width: 140rpx;
|
||||
padding-top: 20rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.reject {
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
</style>
|
||||
103
sub_pages/order/delivery/cancel.vue
Normal file
103
sub_pages/order/delivery/cancel.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="user-list">
|
||||
<u-list @scrolltolower="scrolltolower">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.nickname}`" value="移除" isLink>
|
||||
<u-avatar slot="icon" shape="square" size="45" :src="item.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<view class="bottom"></view>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无数据" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Api from '@/api/user-referee.js'
|
||||
import Empty from '@/components/empty'
|
||||
export default {
|
||||
components: {
|
||||
// Search,
|
||||
Empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getUserReferee()
|
||||
},
|
||||
onShow(){},
|
||||
methods: {
|
||||
getUserReferee(){
|
||||
const userId = uni.getStorageSync('userId')
|
||||
Api.listUserReferee({userId}).then(res => {
|
||||
this.list = res.data
|
||||
})
|
||||
},
|
||||
onRemove(id){
|
||||
Api.removeUserReferee(id).then(()=>{
|
||||
this.$toast('移除成功')
|
||||
this.getUserReferee()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-list{
|
||||
width: 750rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
.item{
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
.info{
|
||||
.food{
|
||||
color: #ff0000;
|
||||
.goods-name{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.is-buy{
|
||||
color: #ff0000;
|
||||
}
|
||||
.no-buy{
|
||||
color: #0000ff;
|
||||
}
|
||||
.order-ok{
|
||||
color: #51b2aa;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #c2c2c2;
|
||||
}
|
||||
.remove{
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
height: 50rpx;
|
||||
}
|
||||
.custom-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
}
|
||||
.custom-active-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
color: #ffffff;
|
||||
background-color: #51b2aa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
sub_pages/order/delivery/delivery.vue
Normal file
81
sub_pages/order/delivery/delivery.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="main" style="padding-top: 150rpx;">
|
||||
<u-grid :border="false" col="2" align="center" @click="onGrid">
|
||||
<u-grid-item v-for="(item,index) in list" :key="index">
|
||||
<view class="demo-layout bg-purple-light" :style="`background-color: ${item.background};`">
|
||||
<image class="icon" :src="item.icon"></image>
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const list = [{
|
||||
name: 'lock',
|
||||
title: '代他人取餐',
|
||||
path: 'pages/order/delivery/others',
|
||||
background: 'abd5f8',
|
||||
icon: '../../../static/icon/05.svg'
|
||||
}, {
|
||||
name: 'lock',
|
||||
title: '取消代餐',
|
||||
path: 'pages/order/delivery/cancel',
|
||||
background: '#bee9d3',
|
||||
icon: '../../../static/icon/04.svg'
|
||||
}];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list,
|
||||
isLogin: false
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
methods: {
|
||||
onGrid(index) {
|
||||
this.$navTo(this.list[index].path)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: calc(100vh - var(--window-top) - 9vh);
|
||||
// background: #fff;
|
||||
background: url('https://file.wsdns.cn/20230417/3d70ff20e2044977a872f867cfe7e570.png');
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
|
||||
.demo-layout {
|
||||
background-color: #ffffff;
|
||||
margin: 15rpx auto;
|
||||
width: 220rpx;
|
||||
color: #4c4c4c;
|
||||
padding: 27rpx;
|
||||
border-radius: 15rpx;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36rpx;
|
||||
|
||||
.icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
sub_pages/order/delivery/me.vue
Normal file
355
sub_pages/order/delivery/me.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- <view class="select-date">
|
||||
<text @click="openCalendar">{{ deliveryTime }}<u-icon class="icon" name="calendar"></u-icon></text>
|
||||
<u-calendar v-model="show" mode="date" :min-date="minDate" :max-date="maxDate" @change="changeDate"></u-calendar>
|
||||
</view> -->
|
||||
<view class="order">
|
||||
<block>
|
||||
<view class="title">
|
||||
<text>我的取餐码</text>
|
||||
<text class="desc">将此取餐码分享给微信好友，即可帮你取餐<br>（仅当日有效）</text>
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<image :src="qrcode"></image>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- <view class="order">
|
||||
<block>
|
||||
<view class="title">
|
||||
<text>物品档口</text>
|
||||
</view>
|
||||
<view class="fenqi">
|
||||
<block v-for="(item,index) in entityGoods" :key="index">
|
||||
<view class="item" v-if="item.totalNum > 0">
|
||||
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name">{{ item.goodsName }}</text>
|
||||
<text class="selling-point">{{ item.comments }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="price">￥{{ item.goodsPrice }}</text>
|
||||
<text class="num"> x {{ item.totalNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view> -->
|
||||
<!-- <view class="submit">
|
||||
<u-button type="warning" @click="generateQrCode">生成核销码</u-button>
|
||||
</view> -->
|
||||
|
||||
<!-- <u-button @click="verificationQrCode">生成核销码</u-button> -->
|
||||
|
||||
<!-- <u-modal v-model="showQrCode" confirmText="取消" title="核销码">
|
||||
<view><image :src="qrcode" class="qrcode"></image></view>
|
||||
</u-modal> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUser } from '@/api/user.js'
|
||||
import { dateFormat } from '@/utils/util.js'
|
||||
import store from '@/store'
|
||||
import * as Config from '@/config.js'
|
||||
import * as UserApi from '@/api/user.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalPrice: 0,
|
||||
list: [],
|
||||
form: {},
|
||||
userId: 0,
|
||||
canteenGoods: [],
|
||||
entityGoods: [],
|
||||
orderId: null,
|
||||
orderNo: null,
|
||||
deliveryTime: null,
|
||||
record: {},
|
||||
minDate: dateFormat('YYYY-mm-dd',new Date()),
|
||||
maxDate: '2030-01-01',
|
||||
deliveryTime: dateFormat('YYYY-mm-dd',new Date()), // var startDate= new Date(new Date().toLocaleDateString());
|
||||
show: false,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
goodsId: null,
|
||||
mode: 'range',
|
||||
month: 6,
|
||||
agree: true,
|
||||
price: {
|
||||
batteryRent: 300,
|
||||
batteryDeposit: 300,
|
||||
batteryInsurance: 0
|
||||
},
|
||||
customStyle: {
|
||||
marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
||||
backgroundColor: '#51b2aa'
|
||||
},
|
||||
showQrCode: false,
|
||||
qrcode: ''
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getUserInfo()
|
||||
},
|
||||
onShow(){
|
||||
this.getMyQrCode()
|
||||
},
|
||||
methods: {
|
||||
getUserInfo() {
|
||||
const { form } = this
|
||||
const app = this
|
||||
getUser().then(res => {
|
||||
if( res.code == 0 && res.data.username != 'www') {
|
||||
console.log("获取用户信息: ",res.data);
|
||||
app.form = res.data
|
||||
app.userInfo = res.data
|
||||
app.userId = res.data.userId
|
||||
store.dispatch('setUserInfo',res.data)
|
||||
app.isLogin = true
|
||||
}else{
|
||||
app.isLogin = false
|
||||
app.handleLogout()
|
||||
}
|
||||
})
|
||||
},
|
||||
getMyQrCode(){
|
||||
const app = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
UserApi.getMyQrCode({
|
||||
codeContent: 'http://apps.gxwebsoft.com/baocan/#/pages/order/delivery/others?userId=' + userId,
|
||||
}).then(res => {
|
||||
app.showQrCode = true
|
||||
app.qrcode = res.data
|
||||
})
|
||||
},
|
||||
onClose(){
|
||||
this.showQrCode = false
|
||||
},
|
||||
onChangeStepper({ value }) {
|
||||
this.month = value
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar(){
|
||||
this.show = true
|
||||
},
|
||||
changeDate(date){
|
||||
this.deliveryTime = date.result
|
||||
this.getMyOrder()
|
||||
},
|
||||
onInput(month) {
|
||||
this.month = month
|
||||
},
|
||||
onAgree(){
|
||||
this.agree = !this.agree
|
||||
},
|
||||
showXieyi(){
|
||||
this.$navTo('pages/help/xieyi')
|
||||
},
|
||||
copyCode(text){
|
||||
// #ifndef H5
|
||||
console.log("text: ",text);
|
||||
uni.setClipboardData({
|
||||
text: text,
|
||||
success: (result) => {
|
||||
this.$success("复制成功")
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let textarea = document.createElement("textarea")
|
||||
textarea.value = text
|
||||
textarea.readOnly = "readOnly"
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select() // 选中文本内容
|
||||
textarea.setSelectionRange(0, info.length)
|
||||
uni.showToast({ //提示
|
||||
title: '复制成功'
|
||||
})
|
||||
result = document.execCommand("copy")
|
||||
textarea.remove()
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .goods-info {
|
||||
// background-color: #ffffff;
|
||||
// border-radius: 12rpx;
|
||||
// width: 700rpx;
|
||||
// margin: 20rpx auto;
|
||||
|
||||
// .goods {
|
||||
// padding: 20rpx;
|
||||
// display: flex;
|
||||
|
||||
// image {
|
||||
// width: 220rpx;
|
||||
// height: 220rpx;
|
||||
// margin: 20rpx;
|
||||
// }
|
||||
|
||||
// .info {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 20rpx;
|
||||
|
||||
// .goods-name {
|
||||
// font-size: 34rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
// }
|
||||
// .goods-desc {
|
||||
// font-size: 28rpx;
|
||||
// color: #999999;
|
||||
// }
|
||||
// .selling-point{
|
||||
// padding: 5px 0;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .between-time {
|
||||
// width: 500rpx;
|
||||
// margin: auto;
|
||||
// padding-bottom: 20rpx;
|
||||
// text-align: center;
|
||||
|
||||
// .select-slider {
|
||||
// line-height: 2em;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 38rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.desc{
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
.xieyi-text{
|
||||
color: #0000ff;
|
||||
}
|
||||
.fenqi{
|
||||
padding: 30rpx;
|
||||
border-top: 1px solid #eee;
|
||||
.item{
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
.image{
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.goods-info{
|
||||
width: 460rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.goods-name{
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.name{
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
.selling-point{
|
||||
max-width: 300rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
.goods-price{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.price{
|
||||
color: #999999;
|
||||
}
|
||||
.num{
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.select-date {
|
||||
text-align: center;
|
||||
line-height: 2.4rem;
|
||||
background-color: #ffffff;
|
||||
|
||||
.icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.on-buy{
|
||||
background-color: #804002;
|
||||
}
|
||||
.qrcode{
|
||||
padding-bottom: 40rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
311
sub_pages/order/delivery/others.vue
Normal file
311
sub_pages/order/delivery/others.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="bg">
|
||||
<view class="qrcode-box">
|
||||
<block>
|
||||
<view class="title line-align">
|
||||
<view :class="qrcodeType == 0 ? 'active' : ''" @click="onChange(0)">取餐码</view>
|
||||
<view :class="qrcodeType == 1 ? 'active' : ''" @click="onChange(1)">邀请码</view>
|
||||
</view>
|
||||
<view class="qrcode">
|
||||
<image :src="qrcode"></image>
|
||||
</view>
|
||||
<text v-if="qrcodeType == 0" class="desc line-align">将此取餐码分享给微信好友，即可帮你取餐<br>（仅当日有效）</text>
|
||||
<text v-if="qrcodeType == 1" class="desc line-align">长按分享此码收集代取餐人员</text>
|
||||
</block>
|
||||
<block>
|
||||
<view class="title">共 {{ userRefereeList.length }} 人</view>
|
||||
<view class="user-list" v-if="qrcodeType == 1">
|
||||
<view class="item" v-for="(item,index) in userRefereeList" :key="index">
|
||||
<view class="info">
|
||||
<view class="nick-name">{{ item.nickname }}</view>
|
||||
<view class="time">{{ item.createTime }}</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<u-button shape="circle" type="error" size="mini" plain @click="onRemove(item.id)">移除</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom"></view>
|
||||
</view>
|
||||
<view class="user-list" v-if="qrcodeType == 0">
|
||||
<view class="title line-align" style="padding-top: 10rpx;">
|
||||
<button :type="tongjiType == 0 ? 'primary' : ''" size="mini" @click="onChange2(0)">按人员统计</button>
|
||||
<button :type="tongjiType == 1? 'primary' : ''" size="mini" @click="onChange2(1)">按菜品统计</button>
|
||||
<!-- <u-button size="medium" plain @click="onChange2(1)" class="custom-style" :class="tongjiType == 1 ? 'custom-active-style' : ''">按菜品统计</u-button> -->
|
||||
</view>
|
||||
<view class="item" v-for="(item,index) in userOrderList" :key="index">
|
||||
<view class="info">
|
||||
<view class="nick-name">{{ item.nickname }}</view>
|
||||
<!-- 按人员统计 -->
|
||||
<block v-if="tongjiType == 0">
|
||||
<span class="no-buy" v-if="item.order.length == 0">未报餐</span>
|
||||
<span class="order-ok" v-else-if="item.order[0].orderStatus == 30">已取餐</span>
|
||||
<span class="is-buy" v-else>已报餐</span>
|
||||
</block>
|
||||
<!-- 按菜品统计 -->
|
||||
<block v-if="tongjiType == 1 && item.order.length > 0">
|
||||
<block v-for="(goods,index) in item.order[0].goodsList">
|
||||
<span class="food">{{ index > 0 ? '、': '' }}</span>
|
||||
<span class="food" v-if="goods.deliveryStatus == 10">{{ goods.goodsName }}x{{ goods.totalNum }}</span>
|
||||
<span class="line-through" v-else>{{ goods.goodsName }}x{{ goods.totalNum }}</span>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom"></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
|
||||
import { pageAgentUser } from '@/api/apps-bc-agent.js'
|
||||
import { getSetting } from '@/api/setting.js'
|
||||
import { checkLogin } from '@/core/app.js'
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
import * as OrderApi from '@/api/order.js'
|
||||
import * as UserApi from '@/api/user.js'
|
||||
import Empty from '@/components/empty'
|
||||
import { userId } from '@/config'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Search,
|
||||
Empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: null,
|
||||
title: '代他人取餐',
|
||||
// 正在加载中
|
||||
isLoading: false,
|
||||
// 是否授权了定位权限
|
||||
isAuthor: true,
|
||||
// 当前选择的门店ID
|
||||
selectedId: null,
|
||||
// 订单列表数据
|
||||
list: [],
|
||||
userRefereeList: [],
|
||||
userOrderList: [],
|
||||
qrcodeType: 0, // 0邀请码 1取餐码
|
||||
tongjiType: 0, // 统计类型 0按人员统计 1按菜品统计
|
||||
qrcode: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.listUserReferee()
|
||||
this.addUserByQrCode()
|
||||
this.getOthersOrder()
|
||||
this.getMyQrCode()
|
||||
},
|
||||
onShow() {
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
navTo(merchantId) {
|
||||
const navTo = uni.$u.route()
|
||||
navTo('pages/merchant/detail', {
|
||||
merchantId
|
||||
})
|
||||
},
|
||||
getUserInfo(){
|
||||
if(!uni.setStorageSync('userId')){
|
||||
this.$error('请先登录',() => {
|
||||
this.$navTo('pages/login/index')
|
||||
})
|
||||
}
|
||||
},
|
||||
getMyQrCode(){
|
||||
const app = this
|
||||
const { qrcodeType } = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
// 取餐码 二维码内容 dqc:代取餐人ID
|
||||
if(qrcodeType == 0){
|
||||
UserApi.getMyQrCode({
|
||||
codeContent: 'dqc:' + userId
|
||||
}).then(res => {
|
||||
app.qrcode = res.data
|
||||
})
|
||||
}
|
||||
// 邀请码 二维码内容 跳转到带有推荐人ID的网址完成绑定关系
|
||||
if(qrcodeType == 1){
|
||||
UserApi.getMyQrCode({
|
||||
codeContent: 'http://apps.gxwebsoft.com/baocan/#/pages/order/delivery/others?userId=' + userId,
|
||||
}).then(res => {
|
||||
app.qrcode = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
// 切换类型
|
||||
onChange(index){
|
||||
this.qrcodeType = index
|
||||
this.getMyQrCode()
|
||||
this.getOthersOrder()
|
||||
},
|
||||
// 切换类型
|
||||
onChange2(index){
|
||||
this.tongjiType = index
|
||||
this.getOthersOrder()
|
||||
},
|
||||
// 查询推荐关系列表
|
||||
listUserReferee(){
|
||||
const app = this
|
||||
const dealerId = uni.getStorageSync('userId')
|
||||
UserRefereeApi.listUserReferee({dealerId}).then(res => {
|
||||
app.userRefereeList = res.data
|
||||
})
|
||||
},
|
||||
// 查询代取餐人员的订单信息
|
||||
getOthersOrder(){
|
||||
OrderApi.getOthersOrder().then(resp => {
|
||||
console.log("resp: ",resp);
|
||||
this.userOrderList = resp.data
|
||||
})
|
||||
},
|
||||
addUserByQrCode(){
|
||||
const app = this
|
||||
const { userId } = app.options
|
||||
const dealerId = uni.getStorageSync('userId')
|
||||
if(userId && userId != Number(dealerId)){
|
||||
app.qrcodeType = 1
|
||||
UserRefereeApi.addUserReferee({
|
||||
dealerId,
|
||||
userId
|
||||
}).then(res => {
|
||||
app.$toast(res.message)
|
||||
app.listUserReferee()
|
||||
})
|
||||
}
|
||||
},
|
||||
onRemove(id){
|
||||
const app = this
|
||||
UserRefereeApi.removeUserReferee(id).then(()=>{
|
||||
app.$toast('移除成功')
|
||||
app.listUserReferee()
|
||||
})
|
||||
}
|
||||
|
||||
// onAgentBaocan(user){
|
||||
// console.log("user收拾收拾: ",user);
|
||||
// uni.setStorageSync('catererUser',user)
|
||||
// this.$navTo('pages/order/get-food/get-food')
|
||||
// },
|
||||
|
||||
// clearAgentBaocan(){
|
||||
// uni.removeStorageSync('catererUser')
|
||||
// this.$navTo('pages/order/get-food/get-food')
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background-color: #67e7dd;
|
||||
}
|
||||
.bg {
|
||||
background-image: linear-gradient(#51b2aa, #67e7dd);
|
||||
height: calc(100vh - var(--window-top));
|
||||
padding: 70rpx 0;
|
||||
}
|
||||
.qrcode-box{
|
||||
width: 660rpx;
|
||||
margin: auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
.title{
|
||||
padding: 12rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: #999999;
|
||||
.active{
|
||||
color: #51b2aa;
|
||||
}
|
||||
}
|
||||
.line-align{
|
||||
width: 580rpx;
|
||||
margin: auto;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
.qrcode{
|
||||
padding-bottom: 0rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
color: blue;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
.user-list{
|
||||
width: 580rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
.info{
|
||||
.food{
|
||||
color: #ff0000;
|
||||
.goods-name{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.line-through{
|
||||
text-decoration: line-through;
|
||||
color: #666666;
|
||||
.goods-name{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.is-buy{
|
||||
color: #ff0000;
|
||||
}
|
||||
.no-buy{
|
||||
color: #0000ff;
|
||||
}
|
||||
.order-ok{
|
||||
color: #51b2aa;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #c2c2c2;
|
||||
}
|
||||
.remove{
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
height: 50rpx;
|
||||
}
|
||||
.custom-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
}
|
||||
.custom-active-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
color: #ffffff;
|
||||
background-color: #51b2aa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
451
sub_pages/order/delivery/receipt.vue
Normal file
451
sub_pages/order/delivery/receipt.vue
Normal file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="select-date">
|
||||
<view class="caterer-user" v-if="order">取餐人：{{ order.nickname }}</view>
|
||||
<text>{{ deliveryTime }}</text>
|
||||
</view>
|
||||
<view class="order" v-if="canteenGoods.length > 0">
|
||||
<block>
|
||||
<view class="title">
|
||||
<text>食堂档口</text>
|
||||
</view>
|
||||
<view class="fenqi">
|
||||
<block v-for="(item,index) in canteenGoods" :key="index">
|
||||
<view class="item" v-if="item.totalNum > 0">
|
||||
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name">{{ item.goodsName }}</text>
|
||||
<text class="selling-point">{{ item.comments }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="price">￥{{ item.goodsPrice }}</text>
|
||||
<text class="num"> x {{ item.totalNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="order" v-if="entityGoods.length > 0">
|
||||
<block>
|
||||
<view class="title">
|
||||
<text>物品档口</text>
|
||||
</view>
|
||||
<view class="fenqi">
|
||||
<block v-for="(item,index) in entityGoods" :key="index">
|
||||
<view class="item" v-if="item.totalNum > 0">
|
||||
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name">{{ item.goodsName }}</text>
|
||||
<text class="selling-point">{{ item.comments }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="price">￥{{ item.goodsPrice }}</text>
|
||||
<text class="num"> x {{ item.totalNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- <empty v-if="canteenGoods.length == 0 && entityGoods.length == 0" tips="暂无信息" /> -->
|
||||
|
||||
<view class="submit" v-if="canteenGoods.length > 0 || entityGoods.length > 0">
|
||||
<u-button type="success" :disabled="showQrCode" @click="verificationQrCode">确认核销</u-button>
|
||||
</view>
|
||||
|
||||
<u-modal v-model="showQrCode" confirmText="取消" title="核销码">
|
||||
<view>
|
||||
<image :src="qrcode" class="qrcode"></image>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<u-calendar v-model="show" mode="date" :min-date="minDate" :max-date="maxDate" @change="changeDate">
|
||||
</u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
// import Empty from '@/components/empty'
|
||||
import * as UserApi from '@/api/user.js'
|
||||
import * as OrderApi from '@/api/order.js'
|
||||
import * as OrderGoodsApi from '@/api/order-goods.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Empty
|
||||
// Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalPrice: 0,
|
||||
list: [],
|
||||
canteenGoods: [],
|
||||
entityGoods: [],
|
||||
order: null,
|
||||
orderId: null,
|
||||
orderNo: null,
|
||||
deliveryTime: null,
|
||||
record: {},
|
||||
minDate: dateFormat('YYYY-mm-dd', new Date()),
|
||||
maxDate: '2030-01-01',
|
||||
deliveryTime: dateFormat('YYYY-mm-dd',new Date()), // var startDate= new Date(new Date().toLocaleDateString());
|
||||
show: false,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
verification: false,
|
||||
// 当前选择的设备ID
|
||||
goodsId: null,
|
||||
agentUserId: null,
|
||||
catererUserId: null,
|
||||
catererUser: null,
|
||||
mode: 'range',
|
||||
month: 6,
|
||||
agree: true,
|
||||
price: {
|
||||
batteryRent: 300,
|
||||
batteryDeposit: 300,
|
||||
batteryInsurance: 0
|
||||
},
|
||||
customStyle: {
|
||||
marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
||||
backgroundColor: '#51b2aa'
|
||||
},
|
||||
showQrCode: false,
|
||||
qrcode: ''
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.userId = options.userId
|
||||
this.dealerId = options.dealerId
|
||||
this.getUserInfo()
|
||||
this.getOrder()
|
||||
},
|
||||
onShow() {
|
||||
// this.getCatererUser()
|
||||
},
|
||||
methods: {
|
||||
// 跳转页面
|
||||
navTo(url) {
|
||||
uni.$u.route(url);
|
||||
},
|
||||
getUserInfo() {
|
||||
const { form } = this
|
||||
const app = this
|
||||
UserApi.getUser().then(res => {
|
||||
if( res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
res.data.roles.map(d => {
|
||||
if(d.roleCode == 'verification'){
|
||||
app.verification = true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getOrder() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
userId
|
||||
} = this
|
||||
|
||||
// 核销订单查询
|
||||
OrderApi.getReceiptOrder({
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
orderStatus: 10,
|
||||
userId
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
if(res.code == 0 && res.data.length > 0){
|
||||
const goodsList = res.data[0].goodsList
|
||||
app.order = res.data[0]
|
||||
app.orderId = res.data[0].orderId
|
||||
app.orderNo = res.data[0].orderNo
|
||||
app.canteenGoods = []
|
||||
app.entityGoods = []
|
||||
app.list = goodsList.map(d => {
|
||||
if (d.gear == 10) {
|
||||
app.canteenGoods.push(d)
|
||||
}
|
||||
if (d.gear == 20) {
|
||||
app.entityGoods.push(d)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
// 核销
|
||||
verificationQrCode() {
|
||||
const app = this
|
||||
const { orderId, verification } = this
|
||||
console.log("verification: ",verification);
|
||||
if(verification == false){
|
||||
app.$error("没有核销权限")
|
||||
return false
|
||||
}
|
||||
OrderApi.verificationQrCode({
|
||||
orderId
|
||||
}).then(result => {
|
||||
app.$success(result.message)
|
||||
app.getOrder()
|
||||
})
|
||||
},
|
||||
// getCatererUser() {
|
||||
// const app = this
|
||||
// const catererUser = uni.getStorageSync('catererUser')
|
||||
// if (catererUser) {
|
||||
// app.catererUser = catererUser
|
||||
// app.catererUserId = catererUser.userId
|
||||
// app.agentUserId = catererUser.userId
|
||||
// app.getMyOrder()
|
||||
// }
|
||||
// },
|
||||
onClose() {
|
||||
this.showQrCode = false
|
||||
},
|
||||
onChangeStepper({
|
||||
value
|
||||
}) {
|
||||
this.month = value
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
changeDate(date) {
|
||||
this.deliveryTime = date.result
|
||||
this.getMyOrder()
|
||||
},
|
||||
onInput(month) {
|
||||
this.month = month
|
||||
},
|
||||
onAgree() {
|
||||
this.agree = !this.agree
|
||||
},
|
||||
showXieyi() {
|
||||
this.$navTo('pages/help/xieyi')
|
||||
},
|
||||
copyCode(text) {
|
||||
// #ifndef H5
|
||||
console.log("text: ", text);
|
||||
uni.setClipboardData({
|
||||
text: text,
|
||||
success: (result) => {
|
||||
this.$success("复制成功")
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let textarea = document.createElement("textarea")
|
||||
textarea.value = text
|
||||
textarea.readOnly = "readOnly"
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select() // 选中文本内容
|
||||
textarea.setSelectionRange(0, info.length)
|
||||
uni.showToast({ //提示
|
||||
title: '复制成功'
|
||||
})
|
||||
result = document.execCommand("copy")
|
||||
textarea.remove()
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .goods-info {
|
||||
// background-color: #ffffff;
|
||||
// border-radius: 12rpx;
|
||||
// width: 700rpx;
|
||||
// margin: 20rpx auto;
|
||||
|
||||
// .goods {
|
||||
// padding: 20rpx;
|
||||
// display: flex;
|
||||
|
||||
// image {
|
||||
// width: 220rpx;
|
||||
// height: 220rpx;
|
||||
// margin: 20rpx;
|
||||
// }
|
||||
|
||||
// .info {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 20rpx;
|
||||
|
||||
// .goods-name {
|
||||
// font-size: 34rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
// }
|
||||
// .goods-desc {
|
||||
// font-size: 28rpx;
|
||||
// color: #999999;
|
||||
// }
|
||||
// .selling-point{
|
||||
// padding: 5px 0;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .between-time {
|
||||
// width: 500rpx;
|
||||
// margin: auto;
|
||||
// padding-bottom: 20rpx;
|
||||
// text-align: center;
|
||||
|
||||
// .select-slider {
|
||||
// line-height: 2em;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.xieyi-text {
|
||||
color: #0000ff;
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 30rpx;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 460rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 300rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
line-height: 2.4rem;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 15rpx solid #f3f3f3;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.caterer-user {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
</style>
|
||||
637
sub_pages/order/detail.vue
Executable file
637
sub_pages/order/detail.vue
Executable file
@@ -0,0 +1,637 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="select-date">
|
||||
<view class="arrow-left" @click="previous">
|
||||
<u-icon class="icon" name="arrow-left"></u-icon>
|
||||
<text>前一天</text>
|
||||
</view>
|
||||
<view class="agent-user" v-if="agentUser" @click="navTo('pages/menu/select-user/select-user')">
|
||||
<span>{{ agentUser.nickname }}</span>
|
||||
<u-icon class="icon" name="arrow-down-fill"></u-icon>
|
||||
</view>
|
||||
<view class="delivery-time" @click="openCalendar">
|
||||
<span>{{ deliveryTime }}</span>
|
||||
<u-icon class="calendar" name="calendar"></u-icon>
|
||||
</view>
|
||||
<view class="arrow-right" @click="next">
|
||||
<text>后一天</text>
|
||||
<u-icon class="icon" name="arrow-right"></u-icon>
|
||||
</view>
|
||||
<u-calendar v-model="show" mode="date" :default-date="minDate" :min-date="minDate" :max-date="maxDate"
|
||||
@change="changeDate"></u-calendar>
|
||||
</view>
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<!-- {{ new Date(deliveryTime).getTime() }} == {{ now }} -->
|
||||
<view class="order">
|
||||
<view class="title" v-if="item.categoryId == 25">
|
||||
<text>早餐</text>
|
||||
<view>
|
||||
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
|
||||
@click="onCancel(item)">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title" v-if="item.categoryId == 26">
|
||||
<text>午餐</text>
|
||||
<view>
|
||||
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
|
||||
@click="onCancel(item)">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title" v-if="item.categoryId == 27">
|
||||
<text>晚餐</text>
|
||||
<view>
|
||||
<u-button type="warning" v-if="new Date(deliveryTime).getTime() > now" size="mini"
|
||||
@click="onCancel(item)">取消</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name">{{ item.goodsName }}</text>
|
||||
<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
|
||||
<text class="selling-point" v-if="item.gear == 20">物品档口</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="price">￥{{ item.goodsPrice }}</text>
|
||||
<text class="num"> x {{ item.totalNum }}</text>
|
||||
<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 临时报餐 -->
|
||||
<block v-if="temporary && !agentUser">
|
||||
<view class="order">
|
||||
<view class="title">
|
||||
<text>临时报餐</text>
|
||||
</view>
|
||||
|
||||
<view class="fenqi">
|
||||
<block v-for="(item,index) in temporary.goodsList" :key="index">
|
||||
<view class="item">
|
||||
<image class="image" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name">{{ item.goodsName }}</text>
|
||||
<text class="selling-point" v-if="item.gear == 10">食堂档口</text>
|
||||
<text class="selling-point" v-if="item.gear == 20">物品档口</text>
|
||||
<text class="selling-point" v-if="item.categoryId == 25">早餐</text>
|
||||
<text class="selling-point" v-if="item.categoryId == 26">午餐</text>
|
||||
<text class="selling-point" v-if="item.categoryId == 27">晚餐</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="price">￥{{ item.goodsPrice }}</text>
|
||||
<text class="num"> x {{ item.totalNum }}</text>
|
||||
<text class="num">{{ item.deliveryStatus == 10 ? '待签到' : '已签到' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<empty v-if="list.length == 0" tips="暂无信息" />
|
||||
<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
|
||||
<!-- <u-tabbar v-model="current" :list="tabbar"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import {
|
||||
createOrderNo
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import Empty from '@/components/empty'
|
||||
import {
|
||||
payQuery
|
||||
} from '@/api/payment.js'
|
||||
import * as OrderApi from '@/api/order.js'
|
||||
import * as OrderGoodsApi from '@/api/order-goods.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Empty
|
||||
// Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabbar: [{
|
||||
iconPath: "static/tabbar/home.png",
|
||||
selectedIconPath: "static/tabbar/home-active.png",
|
||||
text: '首页',
|
||||
isDot: true,
|
||||
customIcon: true,
|
||||
},
|
||||
{
|
||||
iconPath: "play-right",
|
||||
selectedIconPath: "play-right-fill",
|
||||
text: '报餐',
|
||||
customIcon: false,
|
||||
},
|
||||
// {
|
||||
// iconPath: "play-right",
|
||||
// selectedIconPath: "play-right-fill",
|
||||
// text: '消息',
|
||||
// customIcon: false,
|
||||
// },
|
||||
{
|
||||
iconPath: "account",
|
||||
selectedIconPath: "account-fill",
|
||||
text: '我的',
|
||||
isDot: false,
|
||||
customIcon: false,
|
||||
},
|
||||
],
|
||||
current: 0,
|
||||
disabled: false,
|
||||
totalPrice: 0,
|
||||
list: [],
|
||||
temporary: null,
|
||||
agentUserId: null,
|
||||
agentUser: null,
|
||||
canteenGoods: [],
|
||||
entityGoods: [],
|
||||
orderId: null,
|
||||
record: {},
|
||||
minDate: '2023-04-01',
|
||||
maxDate: dateFormat('YYYY-mm-dd', new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
|
||||
60 * 1000 * 7)),
|
||||
deliveryTime: dateFormat('YYYY-mm-dd',
|
||||
new Date()), // var startDate= new Date(new Date().toLocaleDateString());
|
||||
now: new Date().getTime(),
|
||||
daynow: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
|
||||
today: new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime(),
|
||||
show: false,
|
||||
dateFormat,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
goodsId: null,
|
||||
mode: 'range',
|
||||
month: 6,
|
||||
agree: true,
|
||||
price: {
|
||||
batteryRent: 300,
|
||||
batteryDeposit: 300,
|
||||
batteryInsurance: 0
|
||||
},
|
||||
customStyle: {
|
||||
marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
|
||||
backgroundColor: '#51b2aa'
|
||||
},
|
||||
isShowCancel: true
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.orderId = option.orderId
|
||||
if (option.deliveryTime) {
|
||||
app.deliveryTime = option.deliveryTime
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 是否代理报餐
|
||||
this.getAgentUser()
|
||||
// 是否已下过单
|
||||
this.getMyOrder()
|
||||
this.isCancel()
|
||||
// 查询临时报餐明细
|
||||
this.getTemporaryFood()
|
||||
},
|
||||
methods: {
|
||||
isCancel() {
|
||||
const today = new Date().getTime()
|
||||
// console.log("this.isShowCancel: ",this.isShowCancel);
|
||||
// console.log(this.deliveryTime + '=========' + today);
|
||||
// console.log(Date.parse(this.deliveryTime) + '=======' + today);
|
||||
|
||||
if (Date.parse(this.deliveryTime) <= today) {
|
||||
this.isShowCancel = false
|
||||
} else {
|
||||
this.isShowCancel = true
|
||||
}
|
||||
},
|
||||
isDisabled(item) {
|
||||
console.log("isDisabled: ", item);
|
||||
},
|
||||
getTemporaryFood() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime
|
||||
} = this
|
||||
|
||||
console.log("deldeliveryTime: ",deliveryTime);
|
||||
OrderApi.getTemporaryOrder({
|
||||
isTemporary: 1,
|
||||
deliveryTime
|
||||
}).then(res => {
|
||||
app.temporary = res.data
|
||||
console.log("res: ", res.data);
|
||||
}).catch(err => {
|
||||
console.log("err: ",err);
|
||||
})
|
||||
},
|
||||
// getToday(){
|
||||
// this.today = dateFormat('YYYY-mm-dd',new Date())
|
||||
// },
|
||||
// getOrder(){
|
||||
// const app = this
|
||||
// const { orderId } = this
|
||||
// OrderApi.getOrder(orderId).then(res => {
|
||||
// app.record = res.data
|
||||
// app.deliveryTime = dateFormat('YYYY-mm-dd',new Date(res.data.deliveryTime))
|
||||
// OrderGoodsApi.listOrder({orderId}).then(res => {
|
||||
// console.log("res.data: ",res.data);
|
||||
// app.list = [];
|
||||
// app.list = res.data.map(d => {
|
||||
// if(d.gear == 10){
|
||||
// app.canteenGoods.push(d)
|
||||
// }
|
||||
// if(d.gear == 20){
|
||||
// app.entityGoods.push(d)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
getAgentUser() {
|
||||
const app = this
|
||||
const agentUser = uni.getStorageSync('agentUser')
|
||||
if (agentUser) {
|
||||
app.agentUser = agentUser
|
||||
app.agentUserId = agentUser.userId
|
||||
}
|
||||
},
|
||||
getMyOrder() {
|
||||
const app = this
|
||||
const {
|
||||
orderId,
|
||||
deliveryTime,
|
||||
agentUserId
|
||||
} = this
|
||||
app.list = []
|
||||
// app.canteenGoods = [];
|
||||
// app.entityGoods = [];
|
||||
// 加载今天报餐明细
|
||||
OrderApi.getMyOrder({
|
||||
orderId,
|
||||
deliveryTime,
|
||||
agentUserId
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
console.log("res.data: ", res.data.orderId);
|
||||
const goodsList = res.data.goodsList
|
||||
app.list = goodsList.filter(d => d.totalNum > 0)
|
||||
app.orderId = res.data.orderId
|
||||
// app.list = goodsList.map(d => {
|
||||
// if(d.gear == 10){
|
||||
// app.canteenGoods.push(d)
|
||||
// }
|
||||
// if(d.gear == 20){
|
||||
// app.entityGoods.push(d)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消单个菜品
|
||||
onCancel(item) {
|
||||
console.log("item.orderGoodsId: ", item.orderGoodsId);
|
||||
OrderGoodsApi.cancelfood(item).then(res => {
|
||||
this.$toast(res.message)
|
||||
this.getAgentUser()
|
||||
// 是否已下过单
|
||||
this.getMyOrder()
|
||||
})
|
||||
},
|
||||
cancelOrder() {
|
||||
const {
|
||||
orderId
|
||||
} = this
|
||||
console.log("orderId: ", orderId);
|
||||
OrderApi.cancelOrder({
|
||||
orderId
|
||||
}).then(res => {
|
||||
this.$toast(res.message)
|
||||
this.getMyOrder()
|
||||
}).catch(err => {
|
||||
this.$toast(err.message)
|
||||
})
|
||||
},
|
||||
onChangeStepper({
|
||||
value
|
||||
}) {
|
||||
this.month = value
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
changeDate(date) {
|
||||
this.deliveryTime = date.result
|
||||
this.getMyOrder()
|
||||
this.isCancel()
|
||||
},
|
||||
onInput(month) {
|
||||
this.month = month
|
||||
},
|
||||
onAgree() {
|
||||
this.agree = !this.agree
|
||||
},
|
||||
// 跳转页面
|
||||
navTo(url) {
|
||||
uni.$u.route(url);
|
||||
},
|
||||
showXieyi() {
|
||||
this.$navTo('pages/help/xieyi')
|
||||
},
|
||||
previous() {
|
||||
// 前一天
|
||||
this.today = this.today - 24 * 60 * 60 * 1000
|
||||
this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
|
||||
this.getAgentUser()
|
||||
this.getMyOrder()
|
||||
this.getTemporaryFood()
|
||||
},
|
||||
next() {
|
||||
// 后一天
|
||||
// console.log("this.today: ",this.today);
|
||||
this.today = this.today + 24 * 60 * 60 * 1000
|
||||
// console.log("this.today-------: ",this.today);
|
||||
this.deliveryTime = dateFormat('YYYY-mm-dd', new Date(this.today))
|
||||
// console.log("this.deliveryTime: ",this.deliveryTime);
|
||||
this.getAgentUser()
|
||||
this.getMyOrder()
|
||||
this.getTemporaryFood()
|
||||
},
|
||||
// 比较时间大小
|
||||
compare() {
|
||||
// 预定开始时间
|
||||
const deliveryTime = new Date(this.deliveryTime).getTime()
|
||||
// 今天开始时间
|
||||
const todayStartTime = new Date(dateFormat('YYYY-mm-dd', new Date(this.daynow))).getTime()
|
||||
if (todayStartTime > deliveryTime) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
copyCode(text) {
|
||||
// #ifndef H5
|
||||
console.log("text: ", text);
|
||||
uni.setClipboardData({
|
||||
text: text,
|
||||
success: (result) => {
|
||||
this.$success("复制成功")
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let textarea = document.createElement("textarea")
|
||||
textarea.value = text
|
||||
textarea.readOnly = "readOnly"
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select() // 选中文本内容
|
||||
textarea.setSelectionRange(0, info.length)
|
||||
uni.showToast({ //提示
|
||||
title: '复制成功'
|
||||
})
|
||||
result = document.execCommand("copy")
|
||||
textarea.remove()
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .goods-info {
|
||||
// background-color: #ffffff;
|
||||
// border-radius: 12rpx;
|
||||
// width: 700rpx;
|
||||
// margin: 20rpx auto;
|
||||
|
||||
// .goods {
|
||||
// padding: 20rpx;
|
||||
// display: flex;
|
||||
|
||||
// image {
|
||||
// width: 220rpx;
|
||||
// height: 220rpx;
|
||||
// margin: 20rpx;
|
||||
// }
|
||||
|
||||
// .info {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// padding: 20rpx;
|
||||
|
||||
// .goods-name {
|
||||
// font-size: 34rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
// }
|
||||
// .goods-desc {
|
||||
// font-size: 28rpx;
|
||||
// color: #999999;
|
||||
// }
|
||||
// .selling-point{
|
||||
// padding: 5px 0;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .between-time {
|
||||
// width: 500rpx;
|
||||
// margin: auto;
|
||||
// padding-bottom: 20rpx;
|
||||
// text-align: center;
|
||||
|
||||
// .select-slider {
|
||||
// line-height: 2em;
|
||||
// color: #e6760e;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
color: #ff0000;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.xieyi-text {
|
||||
color: #0000ff;
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 30rpx;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 460rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 300rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.price {
|
||||
color: #ff0000;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
line-height: 2.4rem;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 15rpx solid #f3f3f3;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.agent-user {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
|
||||
text {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 12rpx;
|
||||
|
||||
text {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-time {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
margin: 0 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
</style>
|
||||
185
sub_pages/order/get-food/get-food.vue
Normal file
185
sub_pages/order/get-food/get-food.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<view class="bg">
|
||||
<view class="qrcode-box">
|
||||
<block>
|
||||
<view class="title line-align">
|
||||
<view>欢迎使用贵港自然资源云报餐系统</view>
|
||||
</view>
|
||||
<view class="qrcode" v-if="!qrcode">今日无报餐记录</view>
|
||||
<view class="qrcode">
|
||||
<image :src="qrcode"></image>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
贵港自然资源局
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
|
||||
import { pageAgentUser } from '@/api/apps-bc-agent.js'
|
||||
import { getSetting } from '@/api/setting.js'
|
||||
import { checkLogin } from '@/core/app.js'
|
||||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||||
import * as OrderApi from '@/api/order.js'
|
||||
import * as UserApi from '@/api/user.js'
|
||||
import Empty from '@/components/empty'
|
||||
import { userId } from '@/config'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// Search,
|
||||
Empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderId: 0,
|
||||
qrcode: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// if(!checkLogin()){
|
||||
// return this.$navTo('pages/login/index')
|
||||
// }
|
||||
// 扫码取餐
|
||||
this.getFoodQrCode()
|
||||
},
|
||||
methods: {
|
||||
navTo(merchantId) {
|
||||
const navTo = uni.$u.route()
|
||||
navTo('pages/merchant/detail', {
|
||||
merchantId
|
||||
})
|
||||
},
|
||||
getFoodQrCode(){
|
||||
OrderApi.generateQrCode().then(res => {
|
||||
if(res.code == 0){
|
||||
this.qrcode = res.data
|
||||
}else{
|
||||
// this.qrcode = 'https://file.gxwebsoft.com/qrcode/' + uni.getStorageSync('userId') + '/payQrCode.jpg'
|
||||
this.$toast(res.message)
|
||||
}
|
||||
|
||||
}).catch(err => {
|
||||
console.log("err: ",err);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background-color: #67e7dd;
|
||||
}
|
||||
.bg {
|
||||
background-image: linear-gradient(#51b2aa, #67e7dd);
|
||||
height: calc(100vh - var(--window-top));
|
||||
padding: 70rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.bottom{
|
||||
height: 150rpx;
|
||||
font-size: 37rpx;
|
||||
color: #51b2aa;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.qrcode-box{
|
||||
width: 660rpx;
|
||||
margin: auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
.title{
|
||||
padding: 12rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 80rpx;
|
||||
font-size: 34rpx;
|
||||
color: #51b2aa;
|
||||
.active{
|
||||
color: #51b2aa;
|
||||
}
|
||||
}
|
||||
.line-align{
|
||||
width: 580rpx;
|
||||
margin: auto;
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
.qrcode{
|
||||
padding-bottom: 20rpx;
|
||||
color: #666666;
|
||||
margin: 24rpx auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
color: blue;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
.user-list{
|
||||
width: 580rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item{
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
.info{
|
||||
.food{
|
||||
color: #ff0000;
|
||||
.goods-name{
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.is-buy{
|
||||
color: #ff0000;
|
||||
}
|
||||
.no-buy{
|
||||
color: #0000ff;
|
||||
}
|
||||
.order-ok{
|
||||
color: #51b2aa;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #c2c2c2;
|
||||
}
|
||||
.remove{
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
.custom-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
}
|
||||
.custom-active-style {
|
||||
margin: 10rpx 0;
|
||||
width: 220rpx;
|
||||
color: #ffffff;
|
||||
background-color: #51b2aa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
451
sub_pages/order/index.vue
Executable file
451
sub_pages/order/index.vue
Executable file
@@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" @click="onChangeTab" lineColor="#ff0000"></u-tabs>
|
||||
</view>
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list" v-if="list">
|
||||
<view class="order-item" v-for="(item, index) in list" :key="index">
|
||||
<view class="item-top">
|
||||
<view class="item-top-left">
|
||||
<text class="order-time">
|
||||
{{ item.planName }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="item-top-right">
|
||||
<u-tag text="待支付" plain size="mini" type="warning" v-if="item.payStatus == 10"></u-tag>
|
||||
<u-tag text="已支付" plain size="mini" type="success"
|
||||
v-else="item.payStatus == 20 && item.receiptStatus == 10"></u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider></u-divider>
|
||||
<!-- 商品列表 -->
|
||||
<view class="goods-list">
|
||||
<block>
|
||||
<view class="goods-item">
|
||||
<view class="icon">
|
||||
<image :src="item.planIcon" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="goods-content">
|
||||
<text class="goods-title">订单号：{{ item.logId }}</text>
|
||||
<text class="goods-title">描述：{{ item.priceName }}</text>
|
||||
<text class="goods-title">价格：￥{{ item.money }}</text>
|
||||
<text class="goods-title">时间：{{ item.createTime }}</text>
|
||||
<text class="goods-title">状态：{{ item.isSettled == 1 && item.status == 0 ? '已生效' : '处理中' }}</text>
|
||||
<block v-if="item.planId == 17 || item.planId == 18">
|
||||
<text class="goods-title">服务门店：{{ item.merchantName }}</text>
|
||||
<text class="goods-title">有效期至：{{ item.expirationTime }}</text>
|
||||
<text class="goods-title">门店地址：{{ item.address }}</text>
|
||||
</block>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<u-divider></u-divider>
|
||||
<!-- 订单合计 -->
|
||||
<view class="order-total">
|
||||
<text>合计</text>
|
||||
<text class="unit" style="color: #ff0000;">￥</text>
|
||||
<text class="money">{{ item.money }}</text>
|
||||
</view>
|
||||
<!-- 订单操作 -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore v-if="list.length > 0" :status="status" />
|
||||
<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" v-if="list.length == 0">
|
||||
</u-empty>
|
||||
<u-gap height="20"></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
||||
import {
|
||||
dateFormat,
|
||||
getWeek
|
||||
} from '@/utils/util.js'
|
||||
|
||||
// 每页记录数量
|
||||
const pageSize = 10
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `我的订单`,
|
||||
value: 'delivery'
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 当前页面参数
|
||||
options: {
|
||||
dataType: 'all'
|
||||
},
|
||||
// tab栏数据
|
||||
tabs,
|
||||
// 当前标签索引
|
||||
curTab: 0,
|
||||
// 订单列表数据
|
||||
list: [],
|
||||
total: 0,
|
||||
loadMore: true,
|
||||
status: '加载更多',
|
||||
page: 1,
|
||||
where: {
|
||||
userId
|
||||
},
|
||||
// 选择的设备
|
||||
getWeek,
|
||||
dateFormat,
|
||||
userId
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.onRefreshList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this
|
||||
if (app.loadMore) {
|
||||
app.page = ++app.page;
|
||||
app.onRefreshList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
const app = this
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.onRefreshList();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 切换标签项
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
// 设置当前选中的标签
|
||||
app.curTab = e.index
|
||||
app.page = 1
|
||||
app.list = []
|
||||
// 刷新订单列表
|
||||
app.onRefreshList()
|
||||
},
|
||||
|
||||
// 刷新订单列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
const {
|
||||
curTab
|
||||
} = this
|
||||
app.where.showGoodsList = true
|
||||
app.where.page = app.page
|
||||
app.where.payStatus = 20;
|
||||
app.where.receiptStatus = 10;
|
||||
app.where.agent = undefined
|
||||
console.log("curTab: ",curTab);
|
||||
if (curTab == 0) {
|
||||
// app.where.agent = undefined
|
||||
// app.where.payStatus = 20;
|
||||
// app.where.receiptStatus = 10;
|
||||
}
|
||||
if (curTab == 1) {
|
||||
app.where.agent = true
|
||||
// app.where.payStatus = 20;
|
||||
// app.where.receiptStatus = 10;
|
||||
}
|
||||
// if (curTab == 2) {
|
||||
// app.where.agent = undefined
|
||||
// app.where.payStatus = 20;
|
||||
// app.where.receiptStatus = 10;
|
||||
// }
|
||||
// 只查询已支付订单
|
||||
UserPlanLogApi.pageUserPlanLog(app.where).then(res => {
|
||||
const newList = res.data.list
|
||||
if (newList.length > 0) {
|
||||
app.list = app.list.concat(newList)
|
||||
} else {
|
||||
app.status = '没有更多了'
|
||||
app.loadMore = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 取消订单
|
||||
onCancel(orderId) {
|
||||
const app = this
|
||||
uni.showModal({
|
||||
title: '友情提示',
|
||||
content: '确认要取消该订单吗？',
|
||||
success(o) {
|
||||
if (o.confirm) {
|
||||
OrderApi.removeOrder(orderId)
|
||||
.then(result => {
|
||||
// 显示成功信息
|
||||
app.$toast(result.message)
|
||||
// 刷新订单列表
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onCancelOne(item) {
|
||||
const app = this
|
||||
// 报餐截止时间
|
||||
let date = new Date();
|
||||
if (date.getHours() > 20 && date.getMinutes() > 30) {
|
||||
return app.$toast('报餐截止时间')
|
||||
}
|
||||
OrderGoodsApi.cancelfood(item).then(res => {
|
||||
app.$toast(res.message)
|
||||
// 刷新订单列表
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
})
|
||||
},
|
||||
// 点击去支付
|
||||
onPay(orderIds) {
|
||||
this.$navTo('pages/checkout/cashier/index', {
|
||||
orderIds
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到订单详情页
|
||||
handleTargetDetail(orderId) {
|
||||
this.$navTo('pages/order/detail', {
|
||||
orderId
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到订单评价页
|
||||
handleTargetComment(orderId) {
|
||||
this.$navTo('pages/order/comment/index', {
|
||||
orderId
|
||||
})
|
||||
},
|
||||
|
||||
getDeliveryTime(time) {
|
||||
return dateFormat('YYYY-mm-dd', new Date(new Date(time).toLocaleDateString()));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page{
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
.container {
|
||||
width: 750rpx;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.order-list {}
|
||||
|
||||
// 项目内容
|
||||
.order-item {
|
||||
padding: 30rpx;
|
||||
margin: 20rpx auto 10rpx auto;
|
||||
width: 660rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 15rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// 项目顶部
|
||||
.item-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.order-time {
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
color: $main-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表
|
||||
.goods-list {
|
||||
|
||||
// 商品项
|
||||
.goods-item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.cancel {
|
||||
width: 70rpx;
|
||||
position: absolute;
|
||||
top: 4rpx;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
// background: linear-gradient(to bottom, #010002, #681752);
|
||||
image {
|
||||
width: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品图片
|
||||
.goods-image {
|
||||
width: 120rpx;
|
||||
height: 90rpx;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 120rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 商品内容
|
||||
.goods-content {
|
||||
width: 500rpx;
|
||||
padding-left: 16rpx;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
color: #666666;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.goods-title {
|
||||
font-size: 26rpx;
|
||||
max-height: 76rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.goods-props {
|
||||
margin-top: 14rpx;
|
||||
height: 40rpx;
|
||||
color: #ababab;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.goods-props-item {
|
||||
display: inline-block;
|
||||
margin-right: 14rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #F5F5F5;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 交易信息
|
||||
.goods-trade {
|
||||
padding-top: 16rpx;
|
||||
width: 200rpx !important;
|
||||
text-align: right;
|
||||
color: $uni-text-color-grey;
|
||||
font-size: 26rpx;
|
||||
|
||||
.goods-price {
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.unit {
|
||||
margin-right: -2rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 订单合计
|
||||
.order-total {
|
||||
font-size: 26rpx;
|
||||
vertical-align: bottom;
|
||||
text-align: right;
|
||||
height: 50rpx;
|
||||
padding-top: 10rpx;
|
||||
|
||||
.unit {
|
||||
margin-left: 8rpx;
|
||||
margin-right: -2rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
|
||||
// 订单操作
|
||||
.order-handle {
|
||||
.btn-group {
|
||||
|
||||
.btn-item {
|
||||
border-radius: 10rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
margin-left: 15rpx;
|
||||
font-size: 26rpx;
|
||||
float: right;
|
||||
color: #383838;
|
||||
border: 1rpx solid #a8a8a8;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $main-bg;
|
||||
border: 1rpx solid $main-bg;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.yuqi-text {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
565
sub_pages/profit/profit.vue
Normal file
565
sub_pages/profit/profit.vue
Normal file
@@ -0,0 +1,565 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="page-bg">
|
||||
<view class="profit-total">
|
||||
<view class="item">
|
||||
<view class="profit">
|
||||
<u-count-to :startVal="0" decimals="2" color="#ffffff" :endVal="merchant.money"></u-count-to>
|
||||
</view>
|
||||
<view class="desc">可提现收益</view>
|
||||
<view class="total-desc">累计提现：{{ merchant.totalMoney }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<u-button text="去提现" type="warning" :hairline="true" size="small" @click="$push('sub_pages/withdraw/withdraw')"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" @click="onChangeTab" lineColor="#7f006f"></u-tabs>
|
||||
<!-- <uni-data-select v-model="where.gradeId" :localdata="grade" @change="onSearch"></uni-data-select> -->
|
||||
<u-cell :title="gradeText" isLink :border="false" arrowDirection="down" @click="showGrade = true"></u-cell>
|
||||
<u-icon class="icon" size="22" name="calendar" @click="openCalendar()"></u-icon>
|
||||
</view>
|
||||
<view class="order" v-for="(item,index) in list" :key="index">
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<view class="order-id">订单号：{{ item.logId }}</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar">
|
||||
<u-avatar :src="item.playerAvatar"></u-avatar>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="name">{{ item.playerNickname }}</text>
|
||||
<text class="selling-point">{{ item.gradeName }}</text>
|
||||
<text class="selling-point">ID：{{ userIdPrefix }}{{ item.playerId }}</text>
|
||||
<!-- <text class="selling-point" v-if="item.scene == 10">推荐收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 20">解锁收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 30">团队收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 40">区域收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 50">收益提现</text> -->
|
||||
<text class="selling-point">金额：￥{{ item.orderPrice }}</text>
|
||||
<text class="selling-point">备注：{{ item.comments }}</text>
|
||||
<text class="selling-point">状态：{{ item.isSettled == 1 ? '已结算' : '未结算' }}</text>
|
||||
<text class="selling-point">时间：{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-price" v-if="item.isSettled == 1">
|
||||
<text class="add-price"
|
||||
v-if="item.scene == 10 || item.scene == 20">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-if="item.scene == 40">-￥{{ item.money }}</text>
|
||||
<block v-if="item.scene == 30">
|
||||
<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
|
||||
</block>
|
||||
<text class="num">￥{{ item.balance }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore v-if="list.length > 0" :status="status" />
|
||||
<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无收益记录" v-if="list.length == 0">
|
||||
</u-empty>
|
||||
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="closeShow"></u-calendar>
|
||||
|
||||
<u-action-sheet :actions="grade" @select="onGrade"
|
||||
:show="showGrade"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
username,
|
||||
userIdPrefix
|
||||
} from '@/config.js';
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
import * as ProfitApi from '@/api/love-profit.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `推广收益`,
|
||||
value: 10
|
||||
},{
|
||||
name: `团队收益`,
|
||||
value: 20
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userIdPrefix,
|
||||
tabs,
|
||||
list: [],
|
||||
loadMore: true,
|
||||
status: '加载更多',
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false,
|
||||
showGrade: false,
|
||||
grade: [
|
||||
{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '线上会员'
|
||||
},
|
||||
{
|
||||
name: '线下会员'
|
||||
},
|
||||
{
|
||||
name: '线上门店'
|
||||
}
|
||||
],
|
||||
gradeText: '不限',
|
||||
page: 1,
|
||||
where: {
|
||||
scene: 10,
|
||||
userId
|
||||
},
|
||||
merchant: {
|
||||
// 总收益
|
||||
totalMoney: 0.00,
|
||||
// 当前可提现金额
|
||||
money: 0.00,
|
||||
// 今日收益
|
||||
todayMoney: 0.00,
|
||||
// 本月收益
|
||||
monthMoney: 0.00
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.getMerchant()
|
||||
app.onRefreshList()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this
|
||||
if (app.loadMore) {
|
||||
app.page = ++app.page;
|
||||
app.onRefreshList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
const app = this
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.getMerchant()
|
||||
app.onRefreshList();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd,
|
||||
curTab
|
||||
} = this
|
||||
|
||||
app.where.page = app.page
|
||||
app.where.userId = userId
|
||||
app.where.payStatus = 20
|
||||
// 只查询已支付订单
|
||||
ProfitApi.pageProfit(app.where).then(res => {
|
||||
const newList = res.data.list
|
||||
if (newList.length > 0) {
|
||||
app.list = app.list.concat(newList)
|
||||
} else {
|
||||
app.status = '没有更多了'
|
||||
app.loadMore = false
|
||||
}
|
||||
})
|
||||
},
|
||||
getMerchant(){
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(res => {
|
||||
console.log("res: ",res);
|
||||
if(res.data.length > 0){
|
||||
app.merchant = res.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取购物车数据
|
||||
// getLog() {
|
||||
// const app = this
|
||||
// const {
|
||||
// deliveryTime,
|
||||
// createTimeStart,
|
||||
// createTimeEnd
|
||||
// } = this
|
||||
|
||||
// const userId = uni.getStorageSync('userId')
|
||||
// ProfitApi.pageProfit({
|
||||
// userId,
|
||||
// createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
// createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
// limit: 50,
|
||||
// page: 1
|
||||
// }).then(res => {
|
||||
// app.list = res.data.list
|
||||
// })
|
||||
// },
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
if(app.userInfo.gradeId >= 10 && app.tabs.length == 2){
|
||||
app.tabs.push({
|
||||
name: `门店收益`,
|
||||
value: 30
|
||||
})
|
||||
}
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.page = 1
|
||||
this.where.createTimeStart = date[0]
|
||||
this.where.createTimeEnd = date[date.length - 1]
|
||||
this.onRefreshList()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
app.where.scene = e.value
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
closeShow(){
|
||||
this.show = false
|
||||
},
|
||||
onGrade(e){
|
||||
const app = this
|
||||
app.gradeText = e.name
|
||||
if(e.name == '线上会员'){
|
||||
app.where.gradeStart = 2
|
||||
app.where.gradeEnd = 4
|
||||
}
|
||||
if(e.name == '线下会员'){
|
||||
app.where.gradeStart = 5
|
||||
app.where.gradeEnd = 6
|
||||
}
|
||||
if(e.name == '线上门店'){
|
||||
app.where.gradeStart = 7
|
||||
app.where.gradeEnd = 9
|
||||
}
|
||||
if(e.name == '不限'){
|
||||
app.where.gradeStart = undefined
|
||||
app.where.gradeEnd = undefined
|
||||
}
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
app.showGrade = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.page-bg {
|
||||
width: 750rpx;
|
||||
height: calc(150rpx + var(--status-bar-height));
|
||||
display: block;
|
||||
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
color: #ffffff;
|
||||
.profit-total{
|
||||
width: 600rpx;
|
||||
height: 200rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item{
|
||||
text-align: center;
|
||||
.profit{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
color: #d0d1d4;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.total-desc{
|
||||
margin-top: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #d0d1d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.order-id{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.user-box{
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
.avatar{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.user-id{
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
.user-info{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 42rpx auto 42rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
490
sub_pages/search/index.vue
Executable file
490
sub_pages/search/index.vue
Executable file
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<view class="search">
|
||||
<view class="container">
|
||||
<view class="search-wrapper">
|
||||
<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords"
|
||||
@search="onSearch"></u-search>
|
||||
</view>
|
||||
<view class="history">
|
||||
<view class="his-head">
|
||||
<view class="line"></view>
|
||||
<text class="title">基本条件</text>
|
||||
</view>
|
||||
<u-cell-group :border="false">
|
||||
<u-cell title="年龄" isLink :value="where.ageMate" @click="showAgeMate = true"></u-cell>
|
||||
<u-cell title="注册地址" isLink :value="regionMate" @click="onArea"></u-cell>
|
||||
<u-cell title="身高" isLink :value="where.heightMate" @click="showHeightMate = true"></u-cell>
|
||||
<u-cell title="体型" isLink :value="where.shapeMate" @click="showShapeMate = true"></u-cell>
|
||||
<u-cell title="学历" isLink :value="where.educationMate" @click="showEducationMate = true"></u-cell>
|
||||
<u-cell title="月收入" isLink :value="where.monthlyPayMate"
|
||||
@click="showMonthlyPayMate = true"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<view class="history">
|
||||
<view class="his-head">
|
||||
<view class="line"></view>
|
||||
<text class="title">高级搜索</text>
|
||||
</view>
|
||||
<u-cell-group :border="false">
|
||||
<u-cell title="职员" isLink :value="where.vocationMate" @click="showVocationMate = true"></u-cell>
|
||||
<u-cell title="是否有房" isLink :value="where.hasHouseMate" @click="showHasHouseMate = true"></u-cell>
|
||||
<u-cell title="是否有车" isLink :value="where.hasCarMate" @click="showHasCarMate = true"></u-cell>
|
||||
<u-cell title="婚姻状况" isLink :value="where.maritalStatusMate"
|
||||
@click="showMaritalStatusMate = true"></u-cell>
|
||||
<u-cell title="有无小孩" isLink :value="where.hasChildrenMate"
|
||||
@click="showHasChildrenMate = true"></u-cell>
|
||||
<u-cell title="星座" isLink :value="where.constellation" @click="showConstellation = true"></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<u-picker :show="showAgeMate" :columns="dict.ageMate" @confirm="confirmAgeMate"
|
||||
@cancel="showAgeMate = false"></u-picker>
|
||||
<u-picker :show="showRegionMate" :columns="regionsData" keyName="label" @confirm="confirmRegionMate"
|
||||
@cancel="showRegionMate = false"></u-picker>
|
||||
<u-picker :show="showHeightMate" :columns="dict.heightMate" @confirm="confirmHeightMate"
|
||||
@cancel="showHeightMate = false"></u-picker>
|
||||
<u-picker :show="showShapeMate" :columns="dict.shapeMate" @confirm="confirmShapeMate"
|
||||
@cancel="showShapeMate = false"></u-picker>
|
||||
<u-picker :show="showEducationMate" :columns="dict.educationMate" @confirm="confirmEducationMate"
|
||||
@cancel="showEducationMate = false"></u-picker>
|
||||
<u-picker :show="showMonthlyPayMate" :columns="dict.monthlyPayMate" @confirm="confirmMonthlyPayMate"
|
||||
@cancel="showMonthlyPayMate = false"></u-picker>
|
||||
|
||||
<u-picker :show="showVocationMate" :columns="dict.positionMate" @confirm="confirmVocationMate"
|
||||
@cancel="showVocationMate = false"></u-picker>
|
||||
<u-picker :show="showHasHouseMate" :columns="dict.hasHouseMate" @confirm="confirmHasHouseMate"
|
||||
@cancel="showHasHouseMate = false"></u-picker>
|
||||
<u-picker :show="showHasCarMate" :columns="dict.hasCarMate" @confirm="confirmHasCarMate"
|
||||
@cancel="showHasCarMate = false"></u-picker>
|
||||
<u-picker :show="showMaritalStatusMate" :columns="dict.maritalStatusMate"
|
||||
@confirm="confirmMaritalStatusMate" @cancel="showMaritalStatusMate = false"></u-picker>
|
||||
<u-picker :show="showHasChildrenMate" :columns="dict.hasChildrenMate" @confirm="confirmHasChildrenMate"
|
||||
@cancel="showHasChildrenMate = false"></u-picker>
|
||||
<u-picker :show="showConstellation" :columns="dict.constellation" @confirm="confirmConstellation"
|
||||
@cancel="showConstellation = false"></u-picker>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="开始搜索" color="linear-gradient(to bottom, #010002, #681752)" shape="circle"
|
||||
@click="onSearch"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"> </liu-customize-sel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
dict: [],
|
||||
page: 0,
|
||||
regionMate: '不限',
|
||||
where: {
|
||||
ageMate: '不限',
|
||||
regionMate: '不限',
|
||||
heightMate: '不限',
|
||||
shapeMate: '不限',
|
||||
educationMate: '不限',
|
||||
monthlyPayMate: '不限',
|
||||
vocationMate: '不限',
|
||||
hasHouseMate: '不限',
|
||||
hasCarMate: '不限',
|
||||
maritalStatusMate: '不限',
|
||||
hasChildrenMate: '不限',
|
||||
constellation: '不限',
|
||||
},
|
||||
showAgeMate: false,
|
||||
showRegionMate: false,
|
||||
showHeightMate: false,
|
||||
showShapeMate: false,
|
||||
showEducationMate: false,
|
||||
showMonthlyPayMate: false,
|
||||
showVocationMate: false,
|
||||
showHasHouseMate: false,
|
||||
showHasCarMate: false,
|
||||
showMaritalStatusMate: false,
|
||||
showHasChildrenMate: false,
|
||||
showConstellation: false,
|
||||
regionsData: [
|
||||
['广西壮族自治区'],
|
||||
['南宁市', '北海市', '贵港市']
|
||||
],
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false,
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.getDict()
|
||||
// 获取历史搜索
|
||||
// this.historySearch = this.getHistorySearch()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDict() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.dict = res.data;
|
||||
this.dict.ageMate[0].unshift('不限')
|
||||
this.dict.heightMate[0].unshift('不限')
|
||||
this.dict.shapeMate[0].unshift('不限')
|
||||
this.dict.positionMate[0].unshift('不限')
|
||||
this.dict.monthlyPayMate[0].unshift('不限')
|
||||
this.dict.hasCarMate[0].unshift('不限')
|
||||
this.dict.hasChildrenMate[0].unshift('不限')
|
||||
this.dict.hasHouseMate[0].unshift('不限')
|
||||
this.dict.educationMate[0].unshift('不限')
|
||||
this.dict.maritalStatusMate[0].unshift('不限')
|
||||
this.dict.constellation[0].unshift('不限')
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取历史搜索
|
||||
*/
|
||||
getHistorySearch() {
|
||||
return uni.getStorageSync(HISTORY_SEARCH) || []
|
||||
},
|
||||
|
||||
onSearch() {
|
||||
if (this.where.ageMate == '不限') {
|
||||
this.where.ageMate = undefined
|
||||
}
|
||||
if (this.where.regionMate == '不限') {
|
||||
this.where.regionMate = undefined
|
||||
}
|
||||
if (this.where.heightMate == '不限') {
|
||||
this.where.heightMate = undefined
|
||||
}
|
||||
if (this.where.shapeMate == '不限') {
|
||||
this.where.shapeMate = undefined
|
||||
}
|
||||
if (this.where.educationMate == '不限') {
|
||||
this.where.educationMate = undefined
|
||||
}
|
||||
if (this.where.monthlyPayMate == '不限') {
|
||||
this.where.monthlyPayMate = undefined
|
||||
}
|
||||
if (this.where.hasHouseMate == '不限') {
|
||||
this.where.hasHouseMate = undefined
|
||||
}
|
||||
if (this.where.vocationMate == '不限') {
|
||||
this.where.vocationMate = undefined
|
||||
}
|
||||
if (this.where.constellation == '不限') {
|
||||
this.where.constellation = undefined
|
||||
}
|
||||
if (this.where.hasChildrenMate == '不限') {
|
||||
this.where.hasChildrenMate = undefined
|
||||
}
|
||||
if (this.where.maritalStatusMate == '不限') {
|
||||
this.where.maritalStatusMate = undefined
|
||||
}
|
||||
if (this.where.hasCarMate == '不限') {
|
||||
this.where.hasCarMate = undefined
|
||||
}
|
||||
this.$push('/sub_pages/member/member', this.where)
|
||||
},
|
||||
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.regionMate = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
this.where.cityMate = data[1].label
|
||||
},
|
||||
|
||||
/**
|
||||
* 记录历史搜索
|
||||
*/
|
||||
setHistory(searchValue) {
|
||||
const data = this.getHistorySearch()
|
||||
const index = data.indexOf(searchValue)
|
||||
index > -1 && data.splice(index, 1)
|
||||
data.unshift(searchValue)
|
||||
this.historySearch = data
|
||||
this.onUpdateStorage()
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空最近搜索记录
|
||||
*/
|
||||
clearSearch() {
|
||||
this.historySearch = []
|
||||
this.onUpdateStorage()
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新历史搜索缓存
|
||||
* @param {Object} data
|
||||
*/
|
||||
onUpdateStorage(data) {
|
||||
uni.setStorageSync(HISTORY_SEARCH, this.historySearch)
|
||||
},
|
||||
// 选择年龄
|
||||
confirmAgeMate(e) {
|
||||
this.where.ageMate = e.value[0]
|
||||
this.showAgeMate = false
|
||||
},
|
||||
confirmRegionMate(e) {
|
||||
this.where.regionMate = e.value[0] + ' ' + e.value[1]
|
||||
this.showRegionMate = false
|
||||
},
|
||||
confirmHeightMate(e) {
|
||||
this.where.heightMate = e.value[0]
|
||||
this.showHeightMate = false
|
||||
},
|
||||
confirmShapeMate(e) {
|
||||
this.where.shapeMate = e.value[0]
|
||||
this.showShapeMate = false
|
||||
},
|
||||
confirmEducationMate(e) {
|
||||
this.where.educationMate = e.value[0]
|
||||
this.showEducationMate = false
|
||||
},
|
||||
confirmMonthlyPayMate(e) {
|
||||
this.where.monthlyPayMate = e.value[0]
|
||||
this.showMonthlyPayMate = false
|
||||
},
|
||||
confirmVocationMate(e) {
|
||||
this.where.vocationMate = e.value[0]
|
||||
this.showVocationMate = false
|
||||
},
|
||||
confirmHasHouseMate(e) {
|
||||
this.where.hasHouseMate = e.value[0]
|
||||
this.showHasHouseMate = false
|
||||
},
|
||||
confirmMaritalStatusMate(e) {
|
||||
this.where.maritalStatusMate = e.value[0]
|
||||
this.showMaritalStatusMate = false
|
||||
},
|
||||
confirmHasCarMate(e) {
|
||||
this.where.hasCarMate = e.value[0]
|
||||
this.showHasCarMate = false
|
||||
},
|
||||
confirmHasChildrenMate(e) {
|
||||
this.where.hasChildrenMate = e.value[0]
|
||||
this.showHasChildrenMate = false
|
||||
},
|
||||
confirmConstellation(e) {
|
||||
this.where.constellation = e.value[0]
|
||||
this.showConstellation = false
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到最近搜索
|
||||
*/
|
||||
handleQuick(search) {
|
||||
this.$navTo('pages/goods/list', {
|
||||
search
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.container {
|
||||
// padding: 40rpx;
|
||||
width: 700rpx;
|
||||
margin: 40rpx auto;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.base {
|
||||
margin-top: 40rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.senior {
|
||||
margin-top: 40rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
// 搜索输入框
|
||||
.search-input {
|
||||
width: 80%;
|
||||
background: #fff;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
border-radius: 10rpx 0 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 60rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
display: block;
|
||||
color: #b4b4b4;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
font-size: 28rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input-placeholder {
|
||||
color: #aba9a9;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索按钮
|
||||
.search-button {
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.button {
|
||||
height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 10rpx 10rpx 0;
|
||||
background: $main-bg;
|
||||
color: $main-text;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 最近搜索
|
||||
.history {
|
||||
|
||||
.his-head {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding: 50rpx 0 20rpx 0;
|
||||
color: #681752;
|
||||
|
||||
.line {
|
||||
background-color: #681752;
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.his-list {
|
||||
padding: 20rpx 0;
|
||||
overflow: hidden;
|
||||
|
||||
.his-item {
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history-button {
|
||||
text-align: center;
|
||||
padding: 14rpx;
|
||||
line-height: 30rpx;
|
||||
border-radius: 100rpx;
|
||||
background: #fff;
|
||||
font-size: 26rpx;
|
||||
border: 1rpx solid #efefef;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 50rpx;
|
||||
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
187
sub_pages/user/base/address/address.vue
Normal file
187
sub_pages/user/base/address/address.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你所在地区是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
<!-- 给你推荐年龄相近的异性 -->
|
||||
</view>
|
||||
<view class="birthday">
|
||||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
|
||||
:value="currentValue" @change="bindChange" class="picker-view">
|
||||
<picker-view-column id="provinces">
|
||||
<view :class="{current: index == currentValue[0]}" class="item" v-for="(item,index) in provinces" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view :class="{current: index == currentValue[1]}" class="item" v-for="(item,index) in citys" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view :class="{current: index == currentValue[2]}" class="item" v-for="(item,index) in areas" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let cityData = []
|
||||
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk.min.js');
|
||||
var qqmapsdk;
|
||||
export default {
|
||||
data: function() {
|
||||
|
||||
return {
|
||||
title: 'picker-view',
|
||||
provinces: [],
|
||||
province: '',
|
||||
citys: [],
|
||||
city: '',
|
||||
areas: [],
|
||||
area: '',
|
||||
currentValue: [0, 0, 0],
|
||||
indicatorStyle: `height: 50px;color: #FFF;`
|
||||
}
|
||||
},
|
||||
async onLoad() {
|
||||
const app = this
|
||||
qqmapsdk = new QQMapWX({
|
||||
key: 'RDABZ-IF7AB-L4AUO-JHMX3-GBSGE-KIF53'
|
||||
});
|
||||
await this.loadData()
|
||||
// 获取定位信息
|
||||
uni.getLocation({
|
||||
success: (e)=>{
|
||||
|
||||
qqmapsdk.reverseGeocoder({
|
||||
location: {
|
||||
latitude: e.latitude,
|
||||
longitude: e.longitude
|
||||
},
|
||||
success: (res)=>{
|
||||
const {province, city, district} = res.result.address_component
|
||||
console.log(province);
|
||||
const provinceIndex = app.provinces.findIndex(item=> item.label == province)
|
||||
app.citys = app.filterData(cityData[provinceIndex].children)
|
||||
const cityIndex = app.citys.findIndex(item=> item.label == city)
|
||||
app.areas = app.filterData(cityData[provinceIndex].children[cityIndex].children)
|
||||
const areaIndex = app.areas.findIndex(item=> item.label == district)
|
||||
app.$nextTick(()=>{
|
||||
app.currentValue = [provinceIndex,cityIndex, areaIndex]
|
||||
app.province = app.provinces[app.currentValue[0]]
|
||||
app.city = app.citys[app.currentValue[1]]
|
||||
app.area = app.areas[app.currentValue[2]]
|
||||
})
|
||||
},
|
||||
fail: (error)=> {
|
||||
console.log('error: ',error);
|
||||
}
|
||||
})
|
||||
console.log(e);
|
||||
},
|
||||
fail() {
|
||||
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
|
||||
app.isAuthor = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
formatCityData() {
|
||||
const currentValue = this.currentValue
|
||||
const provinceList = this.filterData(cityData)
|
||||
|
||||
const cityList = this.filterData(cityData[currentValue[0]].children)
|
||||
const areaList = this.filterData(cityData[currentValue[0]].children[currentValue[1]].children)
|
||||
|
||||
const provice = provinceList[currentValue[0]]
|
||||
const city = cityList[currentValue[1]]
|
||||
const area = areaList[currentValue[2]]
|
||||
this.provinces = provinceList
|
||||
this.citys = cityList
|
||||
this.areas = areaList
|
||||
this.province = provice
|
||||
this.city = city
|
||||
this.area = area
|
||||
},
|
||||
bindChange: function(e) {
|
||||
|
||||
const val = e.detail.value;
|
||||
let {
|
||||
currentValue
|
||||
} = this
|
||||
console.log('val:', val)
|
||||
console.log('currentValue:', currentValue)
|
||||
if (val[0] !== currentValue[0]) {
|
||||
currentValue = [val[0], 0, 0]
|
||||
this.currentValue = currentValue
|
||||
} else if (val[1] !== currentValue[1]) {
|
||||
currentValue = [val[0], val[1], 0]
|
||||
this.currentValue = currentValue
|
||||
} else if (val[2] !== currentValue[2]) {
|
||||
currentValue = val
|
||||
this.currentValue = currentValue
|
||||
}
|
||||
this.formatCityData()
|
||||
|
||||
this.province = this.provinces[val[0]]
|
||||
this.city = this.citys[val[1]]
|
||||
this.area = this.areas[val[2]]
|
||||
},
|
||||
filterData(arr = []) {
|
||||
return arr.map(item=>{
|
||||
return {
|
||||
label: item.label,
|
||||
value: item.value
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.province = this.province
|
||||
userBase.city = this.city
|
||||
userBase.region = this.area
|
||||
userBase.address = `${this.province} ${this.city} ${this.area}`
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/yearpay/yearpay')
|
||||
},
|
||||
loadData() {
|
||||
return new Promise((reso,rej) => {
|
||||
uni.request({
|
||||
url: 'https://file.wsdns.cn/json/city.js',
|
||||
success: (res) => {
|
||||
cityData = res.data
|
||||
this.formatCityData()
|
||||
return reso()
|
||||
},
|
||||
fail() {
|
||||
return rej()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
|
||||
.birthday {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
</style>
|
||||
218
sub_pages/user/base/avatar/avatar.vue
Normal file
218
sub_pages/user/base/avatar/avatar.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop
|
||||
placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
上传头像/封面
|
||||
</view>
|
||||
<view class="desc">
|
||||
一张亮眼的头像更容易获得青睐
|
||||
</view>
|
||||
<view class="avatar">
|
||||
<button class="btn-avatar u-reset-button" @click="onChooseAvatar">
|
||||
<image class="btn-avatar-plus" v-if="!avatar" src="@/static/icon/path.png" mode="widthFix"></image>
|
||||
<image class="avatar-img" v-else :src="avatar" mode="widthFix"></image>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<ksp-cropper mode="ratio" :url="avatarTemp"
|
||||
@cancel="avatarTemp = ''" @ok="cropperOk"></ksp-cropper>
|
||||
<view class="tips">
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/5.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">999+喜欢</view>
|
||||
<image class="tips-ft" src="@/static/user-base/y.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/4.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">暴露照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/3.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">模糊照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/2.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">非人物照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/1.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">网络图片</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn-wrapper-pla">
|
||||
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button v-if="avatar == null || avatar == ''" text="继续" color="#837C8B" shape="circle" @click="handleSubmit"></u-button>
|
||||
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatarTemp: '',
|
||||
fileList1: [],
|
||||
avatar: '',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
async cropperOk(e) {
|
||||
const res = await this.uploadFilePromise(e.path)
|
||||
this.avatarTemp = ''
|
||||
this.avatar = res.url
|
||||
},
|
||||
async onChooseAvatar({
|
||||
detail
|
||||
}) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.avatarTemp = res.tempFilePaths[0]
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleSubmit() {
|
||||
|
||||
if (!this.avatar) {
|
||||
uni.showToast({
|
||||
title: '请上传头像',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.avatar = this.avatar
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/photo/photo')
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
.avatar{
|
||||
margin: 100rpx 0 100rpx 0;
|
||||
}
|
||||
|
||||
|
||||
.nickname {
|
||||
width: 620rpx;
|
||||
margin: 160rpx auto 120rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-input {
|
||||
background-color: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/deep/.u-upload__button {
|
||||
background-color: rgba(#6A6A6A, .6) !important;
|
||||
border-radius: 10rpx !important;
|
||||
border: 4rpx rgba(#BBBBBB, .5) solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
width: 640rpx;
|
||||
margin: 10rpx auto;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
&-item {
|
||||
width: 104rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&-image {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
.tips-ft{
|
||||
width: 20rpx;
|
||||
position: absolute;
|
||||
right: 6rpx;
|
||||
top: 82rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.btn-avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
background: rgba(15, 0, 32, 0.5);
|
||||
border: 2rpx solid rgb(151, 99, 157);
|
||||
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-avatar-plus{
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.avatar-img{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
120
sub_pages/user/base/base.scss
Normal file
120
sub_pages/user/base/base.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
|
||||
.page-wrap {
|
||||
background-image: url('https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/AgAACjstO6aGYdpKbYVInIACkhYjoWai.png');
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-bg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: $user-base-bg-color;
|
||||
}
|
||||
page {
|
||||
// /* background-color: #1F021E; */
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.notice {
|
||||
font-size: 28rpx;
|
||||
// background-color: #999999;
|
||||
background-color: #330436;
|
||||
color: #c6c6c6;
|
||||
border-radius: 30rpx;
|
||||
width: 600rpx;
|
||||
margin: 20rpx auto;
|
||||
text-align: center;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin: 40rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.desc {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.sex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.sex-item{
|
||||
position: relative;
|
||||
.gou{
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
right: 0;
|
||||
bottom: 38rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper-pla{
|
||||
height: 350rpx;
|
||||
}
|
||||
.btn-wrapper {
|
||||
position: fixed;
|
||||
bottom: 120rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
width: 400rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.indicator-class {
|
||||
|
||||
line-height: 60rpx !important;
|
||||
height: 60rpx !important;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
// color: #fff;
|
||||
background-color: rgba(#000000, .2);
|
||||
|
||||
border-radius: 50rpx;
|
||||
// border: none !important;
|
||||
|
||||
}
|
||||
|
||||
.mask-class {
|
||||
// background: #1F021E;
|
||||
background: transparent;
|
||||
color: #FFF;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
margin: 220rpx auto;
|
||||
// background: $user-base-bg-color;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.item {
|
||||
line-height: 60rpx !important;
|
||||
height: 60rpx !important;
|
||||
text-align: center;
|
||||
/* background: #1F021E; */
|
||||
color: #999;
|
||||
&.current{
|
||||
color: #FFFFFF
|
||||
}
|
||||
}
|
||||
94
sub_pages/user/base/birthday/birthday.vue
Normal file
94
sub_pages/user/base/birthday/birthday.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你的生日是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
给你推荐年龄相近的异性
|
||||
</view>
|
||||
<view class="birthday">
|
||||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" :class="{current: item == year}" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" :class="{current: index == month - 1}" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" :class="{current: index == day - 1}" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled" shape="circle"
|
||||
@click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
for (let i = 1950; i <= date.getFullYear() - 18; i++) {
|
||||
years.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
const year = years[40]
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [40, month - 1, day - 1],
|
||||
indicatorStyle: `height: 50px;color: #FFF;`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange: function(e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
},
|
||||
handleSubmit(){
|
||||
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.birthday = [this.year,this.month,this.day].join("-")
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/height/height')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
.birthday{
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
80
sub_pages/user/base/height/height.vue
Normal file
80
sub_pages/user/base/height/height.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你的身高是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
</view>
|
||||
<view class="height">
|
||||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
|
||||
:value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" :class="{current: index == value[0]}" v-for="(item,index) in heightList" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
export default {
|
||||
data: function() {
|
||||
// const heightList = []
|
||||
// for (let i = 140; i <= 200; i++) {
|
||||
// heightList.push(i)
|
||||
// }
|
||||
return {
|
||||
title: 'picker-view',
|
||||
heightList: [],
|
||||
height: 165,
|
||||
|
||||
value: [0],
|
||||
indicatorStyle: `height: 50px;color: #FFF;`,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
bindChange: function(e) {
|
||||
this.value = e.detail.value
|
||||
},
|
||||
handleSubmit(){
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.height = this.heightList[this.value[0]]
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/address/address')
|
||||
},
|
||||
loadData() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.heightList = res.data.height[0];
|
||||
this.$nextTick(()=>{
|
||||
this.value = [25]
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
.height{
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
129
sub_pages/user/base/nickname/nickname.vue
Normal file
129
sub_pages/user/base/nickname/nickname.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你的昵称是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
</view>
|
||||
<view class="nickname">
|
||||
<u-input color="#FFFFFF" shape="circle" slot="value" class="nickname-input" v-model="nickname" type="nickname" maxlength="8" placeholder="请输入昵称" />
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button v-if="nickname == null || nickname == ''" text="继续" color="#837C8B" shape="circle" ></u-button>
|
||||
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nickname: null,
|
||||
disabled: false,
|
||||
form: {
|
||||
userInfo: null
|
||||
},
|
||||
interest: null,
|
||||
fileList1: null
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
const app = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
UserProfileApi.getUserProfile(userId).then(res => {
|
||||
app.form = res.data
|
||||
const userInfo = res.data.userInfo
|
||||
app.form.avatar = userInfo.avatar
|
||||
app.form.nickname = userInfo.nickname
|
||||
app.form.comments = userInfo.comments
|
||||
app.form.sexName = userInfo.sexName
|
||||
app.form.birthday = userInfo.birthday
|
||||
app.interest = JSON.parse(app.form.interest)
|
||||
app.fileList1 = JSON.parse(app.form.images)
|
||||
app.isLogin = false
|
||||
}).catch(err => {
|
||||
app.$success(err)
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.nickname = this.nickname
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.updateUserInfo()
|
||||
// this.$push('/sub_pages/user/base/sex/sex')
|
||||
},
|
||||
updateUserInfo() {
|
||||
const app = this
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
app.form.interest = JSON.stringify(app.interest)
|
||||
this.form.province = userBase.province.label
|
||||
this.form.city = userBase.city.label
|
||||
this.form.region = userBase.region.label
|
||||
this.form.area = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
|
||||
this.form.sex = userBase.sex
|
||||
this.form.yearlyPay = userBase.yearlyPay
|
||||
this.form.nickname = userBase.nickname
|
||||
this.form.height = userBase.height
|
||||
this.form.birthday = userBase.birthday
|
||||
this.form.images = JSON.stringify(userBase.images)
|
||||
this.form.avatar = userBase.avatar
|
||||
// 同步user表
|
||||
this.form.userInfo.province = userBase.province.label
|
||||
this.form.userInfo.city = userBase.city.label
|
||||
this.form.userInfo.region = userBase.region.label
|
||||
this.form.userInfo.address = `${userBase.province.label} ${userBase.city.label} ${userBase.region.label}`
|
||||
this.form.userInfo.nickname = userBase.nickname
|
||||
this.form.userInfo.height = userBase.height
|
||||
this.form.userInfo.yearlyPay = userBase.yearlyPay
|
||||
this.form.userInfo.sex = userBase.sex
|
||||
this.form.userInfo.birthday = userBase.birthday
|
||||
this.form.userInfo.avatar = userBase.avatar
|
||||
|
||||
// 计算年龄
|
||||
const birthdayYear = dateFormat('YYYY', new Date(userBase.birthday))
|
||||
const age = new Date().getFullYear() - birthdayYear
|
||||
this.form.age = age
|
||||
this.form.userInfo.age = age
|
||||
UserProfileApi.updateUserProfile(app.form).then(result => {
|
||||
uni.reLaunch({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.$u.toast(err)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
|
||||
.nickname{
|
||||
width: 690rpx;
|
||||
margin: 140rpx auto 0;
|
||||
&-input {
|
||||
background-color: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
323
sub_pages/user/base/photo/photo.vue
Normal file
323
sub_pages/user/base/photo/photo.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop
|
||||
placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
上传形象照
|
||||
</view>
|
||||
<view class="desc">
|
||||
可上传工作照、生活照，能获得更多青睐喔~
|
||||
</view>
|
||||
<view class="nickname">
|
||||
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(0)">
|
||||
<image class="btn-avatar-plus" v-if="!fileList1[0].url" src="@/static/icon/path.png" mode="widthFix"></image>
|
||||
<image class="avatar-img" v-else :src="fileList1[0].url" mode="widthFix"></image>
|
||||
</button>
|
||||
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(1)">
|
||||
<image class="btn-avatar-plus" v-if="!fileList1[1].url" src="@/static/icon/path.png" mode="widthFix"></image>
|
||||
<image class="avatar-img" v-else :src="fileList1[1].url" mode="widthFix"></image>
|
||||
</button>
|
||||
<button class="btn-avatar u-reset-button" @click="onChooseAvatar(2)">
|
||||
<image class="btn-avatar-plus" v-if="!fileList1[2].url" src="@/static/icon/path.png" mode="widthFix"></image>
|
||||
<image class="avatar-img" v-else :src="fileList1[2].url" mode="widthFix"></image>
|
||||
</button>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/5.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">999+喜欢</view>
|
||||
<image class="tips-ft" src="@/static/user-base/y.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/4.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">暴露照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/3.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">模糊照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/2.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">非人物照</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="tips-item">
|
||||
<image src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/user-base/1.png" mode="aspectFill" class="tips-item-image"></image>
|
||||
<view class="tips-item-text">网络图片</view>
|
||||
<image class="tips-ft" src="@/static/user-base/n.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="btn-wrapper-pla">
|
||||
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button v-if="fileList1 == null || fileList1.length == 0" text="继续" color="#837C8B" shape="circle" @click="handleSubmit"></u-button>
|
||||
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
<view @click="handleSubmit" class="btn-skip">
|
||||
跳过
|
||||
</view>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
avatarTemp: '',
|
||||
fileList1: [{url: ''},{url: ''},{url: ''}],
|
||||
avatar: '',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
async cropperOk(e) {
|
||||
const res = await this.uploadFilePromise(e.path)
|
||||
this.avatarTemp = ''
|
||||
this.avatar = res.url
|
||||
},
|
||||
async onChooseAvatar({
|
||||
detail
|
||||
}) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.avatarTemp = res.tempFilePaths[0]
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
onChooseAvatar(index) {
|
||||
const app = this
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
app.uploadFilePromise(res.tempFilePaths[0]).then(result => {
|
||||
console.log('index: ',index);
|
||||
console.log('app.fileList1: ',app.fileList1);
|
||||
app.fileList1[index].url = result.url
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleSubmit() {
|
||||
|
||||
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.images = this.fileList1.filter(item => item.url)
|
||||
if(userBase.images.length == 0){
|
||||
userBase.images = [{url: userBase.avatar}]
|
||||
}
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/nickname/nickname')
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
// UploadApi.uploadFile()
|
||||
// let a = uni.uploadFile({
|
||||
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
|
||||
// filePath: url,
|
||||
// name: 'file',
|
||||
// header: {
|
||||
// Authorization: uni.getStorageSync('AccessToken')
|
||||
// },
|
||||
// formData: {
|
||||
// user: 'test'
|
||||
// },
|
||||
// success: (res) => {
|
||||
// const result = JSON.parse(res.data)
|
||||
// setTimeout(() => {
|
||||
// resolve(result)
|
||||
// }, 1000)
|
||||
// }
|
||||
// });
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
.avatar{
|
||||
margin: 100rpx 0 100rpx 0;
|
||||
}
|
||||
|
||||
.btn-avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.nickname {
|
||||
width: 690rpx;
|
||||
margin: 160rpx auto 120rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-input {
|
||||
background-color: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/deep/.u-upload__wrap {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 200rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.u-upload__button {
|
||||
background-color: rgba(#6A6A6A, .6) !important;
|
||||
border-radius: 10rpx !important;
|
||||
border: 4rpx rgba(#BBBBBB, .5) solid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
width: 640rpx;
|
||||
margin: 10rpx auto;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
&-item {
|
||||
width: 104rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&-image {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
.tips-ft{
|
||||
width: 20rpx;
|
||||
position: absolute;
|
||||
right: 6rpx;
|
||||
top: 82rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
background: rgba(15, 0, 32, 0.5);
|
||||
border: 2rpx solid rgb(151, 99, 157);
|
||||
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-avatar-plus{
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.avatar-img{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-skip{
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
margin-top: 64rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btn-avatar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: rgba(15, 0, 32, 0.5);
|
||||
border: 2rpx solid rgb(151, 99, 157);
|
||||
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.btn-avatar-plus{
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.avatar-img{
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
sub_pages/user/base/sex/sex.vue
Normal file
100
sub_pages/user/base/sex/sex.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你的性别是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
注册后将无法更改，请认真填写
|
||||
</view>
|
||||
<view class="sex">
|
||||
<view :class="{current: sex == 1}" @click="sex = 1" class="sex-item">
|
||||
<image class="sex-item-icon" :src="sex == 1 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/boy-01.png'" mode="aspectFill"></image>
|
||||
<view class="sex-item-text">
|
||||
男
|
||||
</view>
|
||||
<image src="../../../../static/icon/gou.png" v-if="sex == 1" class="gou"></image>
|
||||
</view>
|
||||
<view :class="{current: sex == 2}" @click="sex = 2" class="sex-item" style="margin-top: 50rpx;">
|
||||
<image class="sex-item-icon" :src="sex == 2 ? 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-02.png' : 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/girl-01.png'" mode="aspectFill"></image>
|
||||
<view class="sex-item-text">
|
||||
女
|
||||
</view>
|
||||
<image src="../../../../static/icon/gou.png" v-if="sex == 2" class="gou"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button v-if="sex == null" text="继续" color="#837C8B" shape="circle" ></u-button>
|
||||
<u-button v-else text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sex: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
console.log('this.sex: ', this.sex);
|
||||
if (this.sex != null) {
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.sex = this.sex
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/birthday/birthday')
|
||||
}else {
|
||||
if (!this.avatar) {
|
||||
uni.showToast({
|
||||
title: '请选择性别',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
|
||||
.sex {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 200rpx;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
opacity: .4;
|
||||
|
||||
&.current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
// background-color: #FFF;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
sub_pages/user/base/yearpay/yearpay.vue
Normal file
80
sub_pages/user/base/yearpay/yearpay.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<view class="page-bg">
|
||||
<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
|
||||
<view class="notice">
|
||||
请如实填写个人资料，真实的资料会更受欢迎
|
||||
</view>
|
||||
<view class="title">
|
||||
你的年收入是？
|
||||
</view>
|
||||
<view class="desc">
|
||||
</view>
|
||||
<view class="height">
|
||||
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
|
||||
:value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view :class="{current: index == value[0]}" class="item" v-for="(item,index) in heightList" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
<u-safe-bottom></u-safe-bottom>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
export default {
|
||||
data: function() {
|
||||
// const heightList = []
|
||||
// for (let i = 140; i <= 200; i++) {
|
||||
// heightList.push(i)
|
||||
// }
|
||||
return {
|
||||
title: 'picker-view',
|
||||
heightList: [],
|
||||
height: 165,
|
||||
|
||||
value: [0],
|
||||
indicatorStyle: `height: 50px;color: #FFF;`,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
bindChange: function(e) {
|
||||
this.value = e.detail.value
|
||||
},
|
||||
handleSubmit(){
|
||||
const userBase = uni.getStorageSync('UserBase') || {}
|
||||
userBase.yearlyPay = this.heightList[this.value[0]]
|
||||
console.log(userBase);
|
||||
uni.setStorageSync("UserBase", userBase)
|
||||
this.$push('/sub_pages/user/base/avatar/avatar')
|
||||
},
|
||||
loadData() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.heightList = res.data.yearlyPay[0];
|
||||
this.$nextTick(()=>{
|
||||
this.value = [1]
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../base.scss";
|
||||
.height{
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
311
sub_pages/user/bind/index.vue
Normal file
311
sub_pages/user/bind/index.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="container" :style="appThemeStyle">
|
||||
|
||||
<!-- 页面头部 -->
|
||||
<view class="header">
|
||||
<view class="title">
|
||||
<text>绑定您的手机号</text>
|
||||
</view>
|
||||
<view class="sub-title">
|
||||
<text>为了更好的服务您，请绑定手机号</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 表单 -->
|
||||
<view class="submit-form">
|
||||
<!-- 手机号 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
|
||||
</view>
|
||||
<!-- 图形验证码 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
|
||||
<view class="form-item--parts">
|
||||
<view class="captcha" @click="getCaptcha()">
|
||||
<image class="image" :src="captcha.base64"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 短信验证码 -->
|
||||
<view class="form-item">
|
||||
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
|
||||
<view class="form-item--parts">
|
||||
<view class="captcha-sms" @click="handelSmsCaptcha()">
|
||||
<text v-if="!smsState" class="activate">获取验证码</text>
|
||||
<text v-else class="un-activate">重新发送({{ times }})秒</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 确认绑定 -->
|
||||
<view class="submit-button" @click="handleSubmit()">
|
||||
<text>确认绑定</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import * as UserApi from '@/api/user'
|
||||
// import * as CaptchaApi from '@/api/captcha'
|
||||
import * as Verify from '@/utils/verify'
|
||||
|
||||
// 倒计时时长(秒)
|
||||
const times = 60
|
||||
|
||||
// 表单验证场景
|
||||
const GET_CAPTCHA = 10
|
||||
const FORM_SUBMIT = 20
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: false,
|
||||
// 图形验证码信息
|
||||
captcha: {},
|
||||
// 短信验证码发送状态
|
||||
smsState: false,
|
||||
// 倒计时
|
||||
times,
|
||||
// 手机号
|
||||
mobile: '',
|
||||
// 图形验证码
|
||||
captchaCode: '',
|
||||
// 短信验证码
|
||||
smsCode: ''
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
created() {
|
||||
// 获取图形验证码
|
||||
this.getCaptcha()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取图形验证码
|
||||
// getCaptcha() {
|
||||
// const app = this
|
||||
// CaptchaApi.image().then(result => app.captcha = result.data)
|
||||
// },
|
||||
|
||||
// 点击发送短信验证码
|
||||
handelSmsCaptcha() {
|
||||
const app = this
|
||||
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
|
||||
app.sendSmsCaptcha()
|
||||
app.getCaptcha()
|
||||
}
|
||||
},
|
||||
|
||||
// 表单验证
|
||||
formValidation(scene = GET_CAPTCHA) {
|
||||
const app = this
|
||||
// 验证获取短信验证码
|
||||
if (scene === GET_CAPTCHA) {
|
||||
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
// 验证表单提交
|
||||
if (scene === FORM_SUBMIT) {
|
||||
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证手机号
|
||||
validteMobile(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入手机号')
|
||||
return false
|
||||
}
|
||||
if (!Verify.isMobile(str)) {
|
||||
this.$toast('请输入正确格式的手机号')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证图形验证码
|
||||
validteCaptchaCode(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入图形验证码')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 验证短信验证码
|
||||
validteSmsCode(str) {
|
||||
if (Verify.isEmpty(str)) {
|
||||
this.$toast('请先输入短信验证码')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 请求发送短信验证码接口
|
||||
sendSmsCaptcha() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
CaptchaApi.sendSmsCaptcha({
|
||||
form: {
|
||||
captchaKey: app.captcha.key,
|
||||
captchaCode: app.captchaCode,
|
||||
mobile: app.mobile
|
||||
}
|
||||
})
|
||||
.then(result => {
|
||||
// 显示发送成功
|
||||
app.$toast(result.message)
|
||||
// 执行定时器
|
||||
app.timer()
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 执行定时器
|
||||
timer() {
|
||||
const app = this
|
||||
app.smsState = true
|
||||
const inter = setInterval(() => {
|
||||
app.times = app.times - 1
|
||||
if (app.times <= 0) {
|
||||
app.smsState = false
|
||||
app.times = times
|
||||
clearInterval(inter)
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
// 点击提交
|
||||
handleSubmit() {
|
||||
const app = this
|
||||
if (!app.isLoading && app.formValidation(FORM_SUBMIT)) {
|
||||
app.onSubmitEvent()
|
||||
}
|
||||
},
|
||||
|
||||
// 确认提交事件
|
||||
onSubmitEvent() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
UserApi.bindMobile({ form: { smsCode: app.smsCode, mobile: app.mobile } })
|
||||
.then(result => {
|
||||
// 显示操作成功
|
||||
app.$toast(result.message)
|
||||
// 跳转回原页面
|
||||
setTimeout(() => {
|
||||
app.onNavigateBack(1)
|
||||
}, 2000)
|
||||
})
|
||||
.finally(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交成功-跳转回原页面
|
||||
*/
|
||||
onNavigateBack(delta) {
|
||||
uni.navigateBack({
|
||||
delta: Number(delta || 1)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 100rpx 60rpx;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// 页面头部
|
||||
.header {
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.title {
|
||||
color: #191919;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 20rpx;
|
||||
color: #b3b3b3;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框元素
|
||||
.form-item {
|
||||
display: flex;
|
||||
padding: 18rpx;
|
||||
border-bottom: 1rpx solid #f3f1f2;
|
||||
margin-bottom: 25rpx;
|
||||
height: 96rpx;
|
||||
|
||||
&--input {
|
||||
font-size: 26rpx;
|
||||
letter-spacing: 1rpx;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&--parts {
|
||||
min-width: 100rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 图形验证码
|
||||
.captcha {
|
||||
height: 100%;
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
width: 192rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 短信验证码
|
||||
.captcha-sms {
|
||||
font-size: 22rpx;
|
||||
line-height: 50rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.activate {
|
||||
color: #cea26a;
|
||||
}
|
||||
|
||||
.un-activate {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 提交按钮
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
margin-top: 70rpx;
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
border-radius: 80rpx;
|
||||
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
letter-spacing: 5rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
67
sub_pages/user/buy/buy.vue
Normal file
67
sub_pages/user/buy/buy.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view style="background-color: blue;width: 680rpx;height: 200rpx; margin:20rpx auto; border-radius: 30rpx;">huiyuan</view>
|
||||
<u-tabs :list="list1" @click="click"></u-tabs>
|
||||
|
||||
<view v-if="index == 0">
|
||||
<u-popup :show="show" mode="center" @close="close" @open="open">
|
||||
<view>
|
||||
<view style="width: 500rpx;height: 400rpx; padding: 30rpx;">请购买</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-button @click="show = true">000000</u-button>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="index == 1">
|
||||
11111
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
index: 0,
|
||||
list1: [{
|
||||
name: '关注',
|
||||
}, {
|
||||
name: '推荐',
|
||||
}, {
|
||||
name: '电影'
|
||||
}, {
|
||||
name: '科技'
|
||||
}, {
|
||||
name: '音乐'
|
||||
}, {
|
||||
name: '美食'
|
||||
}, {
|
||||
name: '文化'
|
||||
}, {
|
||||
name: '财经'
|
||||
}, {
|
||||
name: '手工'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
// console.log('open');
|
||||
},
|
||||
close() {
|
||||
this.show = false
|
||||
// console.log('close');
|
||||
},
|
||||
click(item) {
|
||||
this.index = item.index
|
||||
console.log('item', item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
623
sub_pages/user/grade/grade.vue
Normal file
623
sub_pages/user/grade/grade.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<view class="grade-index">
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<view class="avatar">
|
||||
<u-avatar size="50" class="avatar-img"
|
||||
:src="userInfo.avatar"></u-avatar>
|
||||
<view class="user">
|
||||
<view class="nickname">{{ userInfo.nickname }}</view>
|
||||
<view class="desc">您当前是{{ userInfo.gradeName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-log">已解锁的功能</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10"></u-gap>
|
||||
<view class="member-service">
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" lineColor="#7f006f" :activeStyle="{ color: '#7f006f' }" @click="onTabs"></u-tabs>
|
||||
</view>
|
||||
<view v-if="index == 0" class="service-card">
|
||||
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 271">
|
||||
<view class="tool-btn" @click="openEdit(item)">
|
||||
<view class="icon">
|
||||
<image :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">{{ item.name }}</text>
|
||||
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7 ">已解锁</text>
|
||||
<text class="btn-desc" v-else>{{ item.subName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="index == 1" class="service-card">
|
||||
<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 272">
|
||||
<view class="tool-btn" @click="openEdit(item)">
|
||||
<view class="icon">
|
||||
<image :src="item.icon" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">{{ item.name }}</text>
|
||||
<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7">已解锁</text>
|
||||
<text class="btn-desc" v-else>{{ item.subName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-02.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">搜索优先</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-03.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">会员标志</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-04.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">查看粉丝</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="tool-btn" @click="showTool = true">
|
||||
<view class="icon">
|
||||
<image src="../../../static/icon/grade-05.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<text class="btn-name">查看证件</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showEdit" mode="center" :round="10" :closeable="true" @close="closeEidt">
|
||||
<view class="show-tool">
|
||||
<view class="head">
|
||||
<view class="info">
|
||||
<text class="title">{{ current.name }}</text>
|
||||
<block v-if="current.equity">
|
||||
<text class="sub-title" v-if="current.equity.length > 0">有效期至：{{ current.equity[0].expirationTime }}</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="desc">{{ current.comments }}</view>
|
||||
<view class="buy" v-if="current.price">
|
||||
<view class="item" v-for="(d,i) in current.price" :key="i"
|
||||
:class="priceId == d.id ? 'active' : ''" @click="onPlan(d)">
|
||||
￥{{ d.price }}
|
||||
<view class="nums">{{ d.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="onBuyText" color="linear-gradient(to bottom, #010002, #681752)"
|
||||
:disabled="priceId == 0 || disabled" shape="circle" @click="onBuy"></u-button>
|
||||
</view>
|
||||
<view class="xieyi">
|
||||
开通会员前请务必仔细阅读<text @click="$push('pages/article/detail/detail?id=114')">《用户协议》</text>规则
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||||
import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
|
||||
const service = [{
|
||||
id: 1,
|
||||
type: 0,
|
||||
name: '无限畅聊',
|
||||
desc: '每日不限次数聊天',
|
||||
comments: '每天无限次聊天，让你遇到更心动的Ta！',
|
||||
icon: '../../../static/icon/comment.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 1,
|
||||
name: '精准搜索',
|
||||
desc: '按条件筛选结果',
|
||||
comments: '按条件筛选结果',
|
||||
icon: '../../../static/icon/grade-02.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 1,
|
||||
name: '会员标志',
|
||||
desc: '显示会员身份',
|
||||
comments: '显示会员身份',
|
||||
icon: '../../../static/icon/grade-03.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 1,
|
||||
name: '查看粉丝',
|
||||
desc: '允许查看粉丝',
|
||||
comments: '允许查看粉丝',
|
||||
icon: '../../../static/icon/grade-04.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 1,
|
||||
name: '查看证件',
|
||||
desc: '允许查看证件特权',
|
||||
comments: '允许查看证件特权',
|
||||
icon: '../../../static/icon/grade-05.png',
|
||||
expirationTime: '2023-07-12',
|
||||
plan: [{
|
||||
id: 1,
|
||||
name: '月卡',
|
||||
price: 99
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '半年卡',
|
||||
price: 299
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '年卡',
|
||||
price: 399
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
tabs: [{
|
||||
name: '普通会员'
|
||||
},
|
||||
{
|
||||
name: '尊享会员'
|
||||
}
|
||||
],
|
||||
userInfo: {},
|
||||
index: 0,
|
||||
service: [],
|
||||
where: {},
|
||||
showEdit: false,
|
||||
current: {},
|
||||
priceId: 0,
|
||||
priceName: '',
|
||||
onBuyText: '立即解锁',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserPlan()
|
||||
},
|
||||
onShow() {
|
||||
this.userInfo = storage.get('userInfo')
|
||||
this.userInfo.roleName = storage.get('roleName')
|
||||
},
|
||||
methods: {
|
||||
// 跳转页面
|
||||
navTo(url, params) {
|
||||
this.$push(url, params)
|
||||
},
|
||||
onTabs(e) {
|
||||
this.index = e.index
|
||||
this.getUserPlan()
|
||||
},
|
||||
onPlan(item) {
|
||||
this.priceId = item.id
|
||||
this.priceName = item.name
|
||||
console.log("this.pri: ",item);
|
||||
},
|
||||
openEdit(item) {
|
||||
if(this.userInfo.gradeId >= 7){
|
||||
uni.showToast({
|
||||
title: '您已解锁此功能',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.showEdit = true
|
||||
this.current = item
|
||||
if(item.equity && item.equity.length > 0){
|
||||
this.onBuyText = '立即续费'
|
||||
}else{
|
||||
this.onBuyText = '立即解锁'
|
||||
}
|
||||
this.priceId = item.price[0].id
|
||||
console.log("item: ", item);
|
||||
console.log("this.current: ", this.current);
|
||||
},
|
||||
closeEidt() {
|
||||
this.showEdit = false
|
||||
this.priceId = 0
|
||||
},
|
||||
getUserPlan() {
|
||||
const {
|
||||
index
|
||||
} = this
|
||||
if (index == 0) {
|
||||
this.where.roleId = 271
|
||||
}
|
||||
if (index == 1) {
|
||||
this.where.roleId = 272
|
||||
}
|
||||
UserPlanApi.listUserPlan(this.where).then(res => {
|
||||
this.service = res.data
|
||||
})
|
||||
},
|
||||
onBuy() {
|
||||
const app = this
|
||||
const {
|
||||
priceId,
|
||||
priceName
|
||||
} = this
|
||||
const {
|
||||
planId,
|
||||
name
|
||||
} = this.current
|
||||
|
||||
app.disabled = true
|
||||
|
||||
UserPlanLogApi.addUserPlanLog({
|
||||
priceId,
|
||||
planId,
|
||||
comments: name,
|
||||
priceName
|
||||
}).then(res => {
|
||||
|
||||
const orderInfo = res.data
|
||||
// 调起微信支付
|
||||
uni.requestPayment({
|
||||
provider: orderInfo.provider, // 服务提供商
|
||||
timeStamp: orderInfo.timeStamp, // 时间戳
|
||||
nonceStr: orderInfo.nonceStr, // 随机字符串
|
||||
package: orderInfo.package,
|
||||
signType: orderInfo.signType, // 签名算法
|
||||
paySign: orderInfo.paySign, // 签名
|
||||
success: function(res) {
|
||||
// 业务逻辑。。。
|
||||
app.$success('支付成功')
|
||||
setTimeout(function() {
|
||||
app.showEdit = false
|
||||
app.disabled = false
|
||||
app.$navTo('pages/order/index')
|
||||
}, 1500);
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log('支付失败', err);
|
||||
app.disabled = false
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3 !important;
|
||||
}
|
||||
|
||||
.grade-index {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 550rpx;
|
||||
width: 750rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member-service {
|
||||
width: 750rpx;
|
||||
|
||||
.tabs {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
width: 700rpx;
|
||||
min-height: 200rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 190rpx;
|
||||
margin: 30rpx 20rpx;
|
||||
|
||||
.tool-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
.icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
// background: linear-gradient(to bottom, #010002, #681752);
|
||||
image {
|
||||
width: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-name {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.btn-equity{
|
||||
color: #7f006f;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.btn-desc {
|
||||
color: #b2b2b2;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-tool {
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 600rpx;
|
||||
height: 600rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.head {
|
||||
padding-top: 10rpx;
|
||||
width: 600rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
padding-top: 8rpx;
|
||||
padding-left: 40rpx;
|
||||
color: #7f006f;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.buy {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.item {
|
||||
width: 160rpx;
|
||||
height: 200rpx;
|
||||
background-color: #ffffff;
|
||||
border: 1rpx solid #dbdbdb;
|
||||
border-radius: 12rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.nums {
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #999999;
|
||||
color: #ffffff;
|
||||
padding: 0 14rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #460c47;
|
||||
color: #ffc7d3;
|
||||
|
||||
.nums {
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-desc {
|
||||
padding: 20rpx;
|
||||
width: 560rpx;
|
||||
height: 100rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
background-color: #dfd3e0;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 20rpx;
|
||||
border-bottom: 20rpx solid #dfd3e0;
|
||||
border-right: 20rpx solid transparent;
|
||||
border-left: 20rpx solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
959
sub_pages/user/personal/index.vue
Executable file
959
sub_pages/user/personal/index.vue
Executable file
@@ -0,0 +1,959 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<button class="btn-normal" open-type="chooseAvatar" @click="onClickAvatar()" @chooseavatar="onChooseAvatar">
|
||||
<u-avatar :src="form.userInfo.avatar" :size="80"></u-avatar>
|
||||
</button>
|
||||
<text>点击修改头像</text>
|
||||
</view>
|
||||
<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" :labelStyle="{paddingLeft: '10rpx'}" label-width="240rpx">
|
||||
<!-- 表单组件 -->
|
||||
<view class="form-wrapper">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell title="昵称" :isLink="true">
|
||||
<u-input slot="value" class="nickname" v-model="form.userInfo.nickname" inputAlign="right" type="nickname" maxlength="8" placeholder="请输入昵称"
|
||||
@input="onInputNickName" @blur="onInputNickName" />
|
||||
</u-cell>
|
||||
<u-cell title="手机号码" :value="form.userInfo.phone" ></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<block v-if="dict">
|
||||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="请选择男或女"
|
||||
@close="showSex = false" @select="sexSelect">
|
||||
</u-action-sheet>
|
||||
<u-datetime-picker ref="datetimePicker" :show="showBirthday" v-model="birthday" mode="date" @close="closeBirthday"
|
||||
@confirm="confirmBirthday" :minDate="0" :maxDate="1112102400000" @cancel="closeBirthday" :closeOnClickOverlay="true">
|
||||
</u-datetime-picker>
|
||||
<!-- <u-picker :show="showRegionMate" :columns="region" keyName="label" @confirm="confirmRegionMate"
|
||||
@cancel="closeRegionMate"></u-picker> -->
|
||||
|
||||
<u-picker :show="showHeight" :columns="dict.height" @confirm="confirmHeight" @cancel="closeHeight" :closeOnClickOverlay="true" @close="closeHeight">
|
||||
</u-picker>
|
||||
<u-picker :show="showMonthlyPay" :columns="dict.monthlyPay" @confirm="confirmMonthlyPay"
|
||||
@cancel="closeMonthlyPay" :closeOnClickOverlay="true" @close="closeMonthlyPay"></u-picker>
|
||||
<u-picker :show="showYearlyPay" :columns="dict.yearlyPay" @confirm="confirmYearlyPay"
|
||||
@cancel="closeYearlyPay" :closeOnClickOverlay="true" @close="closeYearlyPay"></u-picker>
|
||||
<u-picker :show="showEducation" :columns="dict.education" @confirm="confirmEducation"
|
||||
@cancel="closeEducation" :closeOnClickOverlay="true" @close="closeEducation"></u-picker>
|
||||
<u-picker :show="showMaritalStatus" :columns="dict.maritalStatus" @confirm="confirmMaritalStatus"
|
||||
@cancel="closeMaritalStatus" :closeOnClickOverlay="true" @close="closeMaritalStatus"></u-picker>
|
||||
<u-picker :show="showHasChildren" :columns="dict.hasChildren" @confirm="confirmHasChildren"
|
||||
@cancel="closeHasChildren" :closeOnClickOverlay="true" @close="closeHasChildren"></u-picker>
|
||||
<u-picker :show="showHaveChild" :columns="dict.haveChild" @confirm="confirmHaveChild"
|
||||
@cancel="closeHaveChild" :closeOnClickOverlay="true" @close="closeHaveChild"></u-picker>
|
||||
<u-picker :show="showPosition" :columns="dict.vocation" @confirm="confirmPosition"
|
||||
@cancel="closePosition" :closeOnClickOverlay="true" @close="closePosition"></u-picker>
|
||||
<u-picker :show="showWeight" :columns="dict.weight" @confirm="confirmWeight" @cancel="closeWeight" :closeOnClickOverlay="true" @close="closeWeight">
|
||||
</u-picker>
|
||||
<u-picker :show="showShape" :columns="dict.shape" @confirm="confirmShape"
|
||||
@cancel="closeShape" :closeOnClickOverlay="true" @close="closeShape"></u-picker>
|
||||
<u-picker :show="showHasHouse" :columns="dict.hasHouse" @confirm="confirmHasHouse" @cancel="closeHasHouse" :closeOnClickOverlay="true" @close="closeHasHouse">
|
||||
</u-picker>
|
||||
<u-picker :show="showHasCar" :columns="dict.hasCar" @confirm="confirmHasCar" @cancel="closeHasCar" :closeOnClickOverlay="true" @close="closeHasCar">
|
||||
</u-picker>
|
||||
<u-picker :show="showWhenMarried" :columns="dict.whenMarried" @confirm="confirmWhenMarried"
|
||||
@cancel="closeWhenMarried" :closeOnClickOverlay="true" @close="closeWhenMarried"></u-picker>
|
||||
|
||||
<u-picker :show="showAgeMate" :columns="dict.ageMate" @confirm="confirmAgeMate" @cancel="closeAgeMate" :closeOnClickOverlay="true" @close="closeAgeMate">
|
||||
</u-picker>
|
||||
<u-picker :show="showHeightMate" :columns="dict.heightMate" @confirm="confirmHeightMate"
|
||||
@cancel="closeHeightMate" :closeOnClickOverlay="true" @close="closeHeightMate"></u-picker>
|
||||
<u-picker :show="showMonthlyPayMate" :columns="dict.monthlyPayMate" @confirm="confirmMonthlyPayMate"
|
||||
@cancel="closeMonthlyPayMate" :closeOnClickOverlay="true" @close="closeMonthlyPayMate"></u-picker>
|
||||
<u-picker :show="showYearlyPayMate" :columns="dict.yearlyPayMate" @confirm="confirmYearlyPayMate"
|
||||
@cancel="closeYearlyPayMate" :closeOnClickOverlay="true" @close="closeYearlyPayMate"></u-picker>
|
||||
<u-picker :show="showEducationMate" :columns="dict.educationMate" @confirm="confirmEducationMate"
|
||||
@cancel="closeEducationMate" :closeOnClickOverlay="true" @close="closeEducationMate"></u-picker>
|
||||
<u-picker :show="showMaritalStatusMate" :columns="dict.maritalStatusMate"
|
||||
@confirm="confirmMaritalStatusMate" @cancel="closeMaritalStatusMate" :closeOnClickOverlay="true" @close="closeMaritalStatusMate"></u-picker>
|
||||
<u-picker :show="showHasChildrenMate" :columns="dict.hasChildrenMate" @confirm="confirmHasChildrenMate"
|
||||
@cancel="closeHasChildrenMate" :closeOnClickOverlay="true" @close="closeHasChildrenMate"></u-picker>
|
||||
<u-picker :show="showHaveChildMate" :columns="dict.haveChildMate" @confirm="confirmHaveChildMate"
|
||||
@cancel="closeHaveChildMate" :closeOnClickOverlay="true" @close="closeHaveChildMate"></u-picker>
|
||||
<u-picker :show="showPositionMate" :columns="dict.positionMate" @confirm="confirmPositionMate"
|
||||
@cancel="closePositionMate" :closeOnClickOverlay="true" @close="closePositionMate"></u-picker>
|
||||
<u-picker :show="showWeightMate" :columns="dict.weightMate" @confirm="confirmWeightMate"
|
||||
@cancel="closeWeightMate" :closeOnClickOverlay="true" @close="closeWeightMate"></u-picker>
|
||||
<u-picker :show="showShapeMate" :columns="dict.shapeMate" @confirm="confirmShapeMate"
|
||||
@cancel="closeShapeMate" :closeOnClickOverlay="true" @close="closeShapeMate"></u-picker>
|
||||
<u-picker :show="showIsSmokingMate" :columns="dict.isSmokingMate" @confirm="confirmIsSmokingMate"
|
||||
@cancel="closeIsSmokingMate" :closeOnClickOverlay="true" @close="closeIsSmokingMate"></u-picker>
|
||||
<u-picker :show="showIsDrinkMate" :columns="dict.isDrinkMate" @confirm="confirmIsDrinkMate"
|
||||
@cancel="closeIsDrinkMate" :closeOnClickOverlay="true" @close="closeIsDrinkMate"></u-picker>
|
||||
<u-picker :show="showHasCarMate" :columns="dict.hasCarMate" @confirm="confirmHasCarMate"
|
||||
@cancel="closeHasCarMate" :closeOnClickOverlay="true" @close="closeHasCarMate"></u-picker>
|
||||
<u-picker :show="showHasHouseMate" :columns="dict.hasHouseMate" @confirm="confirmHasHouseMate"
|
||||
@cancel="closeHasHouseMate" :closeOnClickOverlay="true" @close="closeHasHouseMate"></u-picker>
|
||||
<u-picker :show="showWhenMarriedMate" :columns="dict.whenMarriedMate" @confirm="confirmWhenMarriedMate"
|
||||
@cancel="closeWhenMarriedMate" :closeOnClickOverlay="true" @close="closeWhenMarriedMate"></u-picker>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="area" @change="chooseSuccess"></liu-customize-sel>
|
||||
<!-- 地址选择器 -->
|
||||
<liu-customize-sel ref="areaMate" @change="chooseSuccessMate"></liu-customize-sel>
|
||||
</block>
|
||||
</u--form>
|
||||
<view class="" style="height: 300rpx;">
|
||||
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="footer">
|
||||
<view class="btn-wrapper">
|
||||
<u-button text="保存" color="linear-gradient(#27b0fd, #3f72f4)" :disabled="disabled"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import {
|
||||
fileUrl
|
||||
} from '@/config.js'
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import * as UserApi from '@/api/user'
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
import * as UploadApi from '@/api/upload'
|
||||
import * as DictApi from '@/api/dict.js'
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `基本信息`,
|
||||
value: 10
|
||||
}, {
|
||||
name: `择偶条件`,
|
||||
value: 20
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs,
|
||||
tabIndex: 10,
|
||||
dict: null,
|
||||
// 按钮禁用
|
||||
disabled: false,
|
||||
// 头像路径 (用于显示)
|
||||
avatarUrl: '',
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
// 表单数据
|
||||
form: {
|
||||
userInfo: null
|
||||
},
|
||||
// 用户资料
|
||||
mate: {
|
||||
|
||||
},
|
||||
fileList1: [],
|
||||
interest: [],
|
||||
loading: false,
|
||||
// regionsData: [
|
||||
// ['广西壮族自治区','广东'],
|
||||
// ['南宁市', '北海市', '贵港市']
|
||||
// ],
|
||||
showRegion: false,
|
||||
showRegionMate: false,
|
||||
showSex: false,
|
||||
showBirthday: false,
|
||||
showMonthlyPay: false,
|
||||
showYearlyPay: false,
|
||||
showEducation: false,
|
||||
showMaritalStatus: false,
|
||||
showHasChildren: false,
|
||||
showHaveChild: false,
|
||||
showPosition: false,
|
||||
showHeight: false,
|
||||
showWeight: false,
|
||||
showShape: false,
|
||||
showHasHouse: false,
|
||||
showHasCar: false,
|
||||
showWhenMarried: false,
|
||||
|
||||
showAgeMate: false,
|
||||
showHeightMate: false,
|
||||
showMonthlyPayMate: false,
|
||||
showYearlyPayMate: false,
|
||||
showEducationMate: false,
|
||||
showMaritalStatusMate: false,
|
||||
showHasChildrenMate: false,
|
||||
showHaveChildMate: false,
|
||||
showPositionMate: false,
|
||||
showWeightMate: false,
|
||||
showShapeMate: false,
|
||||
showIsSmokingMate: false,
|
||||
showIsDrinkMate: false,
|
||||
showHasCarMate: false,
|
||||
showHasHouseMate: false,
|
||||
showWhenMarriedMate: false,
|
||||
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
minDate: '',
|
||||
columnsHeight: [
|
||||
['160cm', '170cm', '180cm']
|
||||
],
|
||||
birthday: Number(new Date()),
|
||||
// 验证规则
|
||||
rules: {
|
||||
'nickname': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'sexName': {
|
||||
type: 'string',
|
||||
max: 2,
|
||||
required: true,
|
||||
message: '请选择男或女',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.getUserProfile()
|
||||
this.getDict()
|
||||
},
|
||||
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
onReady() {
|
||||
// this.$refs.uForm.setRules(this.rules)
|
||||
// 微信小程序需要用此写法
|
||||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 用户资料表
|
||||
getUserProfile() {
|
||||
const app = this
|
||||
const userId = uni.getStorageSync('userId')
|
||||
UserProfileApi.getUserProfile(userId).then(res => {
|
||||
app.form = res.data
|
||||
const userInfo = res.data.userInfo
|
||||
app.form.avatar = userInfo.avatar
|
||||
app.form.nickname = userInfo.nickname
|
||||
app.form.comments = userInfo.comments
|
||||
app.form.sexName = userInfo.sexName
|
||||
app.form.birthday = userInfo.birthday
|
||||
app.interest = JSON.parse(app.form.interest) || []
|
||||
app.fileList1 = JSON.parse(app.form.images) || []
|
||||
app.isLogin = false
|
||||
}).catch(err => {
|
||||
app.$success(err)
|
||||
})
|
||||
},
|
||||
|
||||
getDict() {
|
||||
DictApi.listDictionary().then(res => {
|
||||
this.dict = res.data;
|
||||
})
|
||||
},
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
app.tabIndex = e.value
|
||||
},
|
||||
sexSelect(e) {
|
||||
const app = this
|
||||
console.log("e.name: ", e.name);
|
||||
app.form.sexName = e.name
|
||||
if (e.name == '男') {
|
||||
app.form.userInfo.sex = 1
|
||||
}
|
||||
if (e.name == '女') {
|
||||
app.form.userInfo.sex = 2
|
||||
}
|
||||
if (e.name == '保密') {
|
||||
app.form.userInfo.sex = 0
|
||||
}
|
||||
console.log("app.form.userInfo.sex: ", app.form.userInfo.sex);
|
||||
this.$refs.uForm.validateField('sexName')
|
||||
},
|
||||
// 选择微信地址
|
||||
// #ifdef MP-WEIXIN
|
||||
chooseAddress() {
|
||||
const {
|
||||
form,
|
||||
$refs
|
||||
} = this
|
||||
uni.chooseAddress({
|
||||
success(res) {
|
||||
const names = $refs.sRegion.getOptionItemByNames(res)
|
||||
form.name = res.userName
|
||||
form.phone = res.telNumber
|
||||
form.detail = res.detailInfo
|
||||
form.region = names.length > 0 ? names : []
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
|
||||
// 点击头像按钮事件
|
||||
onClickAvatar() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return
|
||||
// #endif
|
||||
this.chooseImage()
|
||||
},
|
||||
|
||||
// 选择头像事件 - 仅限微信小程序
|
||||
// #ifdef MP-WEIXIN
|
||||
onChooseAvatar({
|
||||
detail
|
||||
}) {
|
||||
const app = this
|
||||
app.form.userInfo.avatar = detail.avatarUrl
|
||||
app.tempFile = detail.avatarUrl
|
||||
// 上传头像图片
|
||||
app.uploadFile()
|
||||
},
|
||||
// #endif
|
||||
|
||||
// 选择图片
|
||||
chooseImage() {
|
||||
const app = this
|
||||
console.log("选择图片: ");
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(chooseImageRes) {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
UploadApi.uploadFile({
|
||||
filePath: tempFilePaths[0],
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
console.log("res: ", res);
|
||||
app.form.avatar = fileUrl + res.data.path
|
||||
console.log("form: ", app.form);
|
||||
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadFile() {
|
||||
const app = this
|
||||
UploadApi.uploadFile({
|
||||
filePath: app.tempFile,
|
||||
fileType: 'image',
|
||||
name: 'file'
|
||||
}).then(res => {
|
||||
app.form.userInfo.avatar = res.data.url
|
||||
UserProfileApi.updateUserProfile(app.form)
|
||||
})
|
||||
},
|
||||
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
if (app.disabled === true) return
|
||||
console.log("app.tempFile: ", app.tempFile);
|
||||
this.$refs.uForm.validate().then(() => {
|
||||
app.form.interest = JSON.stringify(app.interest)
|
||||
app.form.images = JSON.stringify(app.fileList1)
|
||||
UserProfileApi.updateUserProfile(app.form).then(result => {
|
||||
app.$toast(result.message)
|
||||
}).catch(err => {
|
||||
uni.$u.toast(err)
|
||||
})
|
||||
}).catch(errors => {
|
||||
// uni.$u.toast('校验失败')
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 判断是否重复提交
|
||||
// if (app.disabled === true) return
|
||||
// app.$refs.uForm.validate(async valid => {
|
||||
// if (valid) {
|
||||
// console.log("valid: ", valid);
|
||||
// // 按钮禁用
|
||||
// app.disabled = true
|
||||
// // 先上传头像图片
|
||||
// if (app.tempFile) {
|
||||
// await app.uploadFile()
|
||||
// }
|
||||
// // 提交保存个人信息
|
||||
// UserApi.updateUser(app.form)
|
||||
// .then(result => {
|
||||
// app.$toast(result.message)
|
||||
// setTimeout(() => {
|
||||
// app.disabled = false
|
||||
// uni.navigateBack()
|
||||
// }, 1500)
|
||||
// })
|
||||
// .catch(err => app.disabled = false)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
onInterest(text) {
|
||||
const app = this
|
||||
if (app.interest.indexOf(text) > -1) {
|
||||
console.log("1: ");
|
||||
app.interest.splice(app.interest.indexOf(text), 1)
|
||||
} else {
|
||||
console.log("2: ");
|
||||
app.interest.push(text)
|
||||
}
|
||||
},
|
||||
inArr(text) {
|
||||
const {
|
||||
interest
|
||||
} = this
|
||||
if (interest.indexOf(text) > -1) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
|
||||
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
||||
onInputNickName(val) {
|
||||
console.log("val: ", val);
|
||||
if (val) {
|
||||
this.form.nickname = val
|
||||
}
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
console.log("value: ", value);
|
||||
return value
|
||||
},
|
||||
onArea() {
|
||||
this.$refs.area.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccess(e) {
|
||||
const data = e.value
|
||||
this.form.province = data[0].label
|
||||
this.form.city = data[1].label
|
||||
this.form.region = data[2].label
|
||||
this.form.area = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
// 同步user表
|
||||
this.form.userInfo.province = data[0].label
|
||||
this.form.userInfo.city = data[1].label
|
||||
this.form.userInfo.region = data[2].label
|
||||
this.form.userInfo.address = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
},
|
||||
onAreaMate() {
|
||||
this.$refs.areaMate.open()
|
||||
},
|
||||
//地址选择成功
|
||||
chooseSuccessMate(e) {
|
||||
const data = e.value
|
||||
this.form.provinceMate = data[0].label
|
||||
this.form.cityMate = data[1].label
|
||||
this.form.regionMate = data[2].label
|
||||
this.form.areaMate = `${data[0].label} ${data[1].label} ${data[2].label}`
|
||||
},
|
||||
changeHandler(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
confirmRegion(e) {
|
||||
this.form.region = e.value[0] + ' ' + e.value[1]
|
||||
this.showRegion = false
|
||||
},
|
||||
confirmRegionMate(e) {
|
||||
this.form.regionMate = e.value[0] + ' ' + e.value[1]
|
||||
this.showRegionMate = false
|
||||
this.showRegion = false
|
||||
},
|
||||
confirmBirthday(e) {
|
||||
const birthday = dateFormat('YYYY-mm-dd', new Date(e.value))
|
||||
this.form.birthday = birthday
|
||||
this.form.userInfo.birthday = birthday
|
||||
this.showBirthday = false
|
||||
// 计算年龄
|
||||
const birthdayYear = dateFormat('YYYY', new Date(e.value))
|
||||
const age = new Date().getFullYear() - birthdayYear
|
||||
this.form.age = age
|
||||
this.form.userInfo.age = age
|
||||
},
|
||||
confirmHeight(e) {
|
||||
console.log("e: ", e);
|
||||
this.form.height = e.value[0]
|
||||
this.showHeight = false
|
||||
},
|
||||
confirmMonthlyPay(e) {
|
||||
this.form.monthlyPay = e.value[0]
|
||||
this.showMonthlyPay = false
|
||||
},
|
||||
confirmYearlyPay(e){
|
||||
this.form.yearlyPay = e.value[0]
|
||||
this.showYearlyPay = false
|
||||
},
|
||||
confirmEducation(e) {
|
||||
this.form.education = e.value[0]
|
||||
this.showEducation = false
|
||||
},
|
||||
confirmMaritalStatus(e) {
|
||||
this.form.maritalStatus = e.value[0]
|
||||
this.showMaritalStatus = false
|
||||
},
|
||||
confirmHasChildren(e) {
|
||||
this.form.hasChildren = e.value[0]
|
||||
this.showHasChildren = false
|
||||
},
|
||||
confirmHaveChild(e) {
|
||||
this.form.haveChild = e.value[0]
|
||||
this.showHaveChild = false
|
||||
},
|
||||
confirmPosition(e) {
|
||||
this.form.position = e.value[0]
|
||||
this.showPosition = false
|
||||
},
|
||||
confirmWeight(e) {
|
||||
this.form.weight = e.value[0]
|
||||
this.showWeight = false
|
||||
},
|
||||
confirmShape(e) {
|
||||
this.form.shape = e.value[0]
|
||||
this.showShape = false
|
||||
},
|
||||
confirmHasHouse(e) {
|
||||
this.form.hasHouse = e.value[0]
|
||||
this.showHasHouse = false
|
||||
},
|
||||
confirmHasCar(e) {
|
||||
this.form.hasCar = e.value[0]
|
||||
this.showHasCar = false
|
||||
},
|
||||
confirmWhenMarried(e) {
|
||||
this.form.whenMarried = e.value[0]
|
||||
this.showWhenMarried = false
|
||||
},
|
||||
confirmAgeMate(e) {
|
||||
this.form.ageMate = e.value[0]
|
||||
this.showAgeMate = false
|
||||
},
|
||||
confirmHeightMate(e) {
|
||||
this.form.heightMate = e.value[0]
|
||||
this.showHeightMate = false
|
||||
},
|
||||
confirmMonthlyPayMate(e) {
|
||||
this.form.monthlyPayMate = e.value[0]
|
||||
this.showMonthlyPayMate = false
|
||||
},
|
||||
confirmYearlyPayMate(e) {
|
||||
this.form.yearlyPayMate = e.value[0]
|
||||
this.showYearlyPayMate = false
|
||||
},
|
||||
confirmEducationMate(e) {
|
||||
this.form.educationMate = e.value[0]
|
||||
this.showEducationMate = false
|
||||
},
|
||||
confirmMaritalStatusMate(e) {
|
||||
this.form.maritalStatusMate = e.value[0]
|
||||
this.showMaritalStatusMate = false
|
||||
},
|
||||
confirmHasChildrenMate(e) {
|
||||
this.form.hasChildrenMate = e.value[0]
|
||||
this.showHasChildrenMate = false
|
||||
},
|
||||
confirmHaveChildMate(e) {
|
||||
this.form.haveChildMate = e.value[0]
|
||||
this.showHaveChildMate = false
|
||||
},
|
||||
confirmPositionMate(e) {
|
||||
this.form.vocationMate = e.value[0]
|
||||
this.showPositionMate = false
|
||||
},
|
||||
confirmWeightMate(e) {
|
||||
this.form.weightMate = e.value[0]
|
||||
this.showWeightMate = false
|
||||
},
|
||||
confirmShapeMate(e) {
|
||||
this.form.shapeMate = e.value[0]
|
||||
this.showShapeMate = false
|
||||
},
|
||||
confirmIsSmokingMate(e) {
|
||||
this.form.isSmokingMate = e.value[0]
|
||||
this.showIsSmokingMate = false
|
||||
},
|
||||
confirmIsDrinkMate(e) {
|
||||
this.form.isDrinkMate = e.value[0]
|
||||
this.showIsDrinkMate = false
|
||||
},
|
||||
confirmHasCarMate(e) {
|
||||
this.form.hasCarMate = e.value[0]
|
||||
this.showHasCarMate = false
|
||||
},
|
||||
confirmHasHouseMate(e) {
|
||||
this.form.hasHouseMate = e.value[0]
|
||||
this.showHasHouseMate = false
|
||||
},
|
||||
confirmWhenMarriedMate(e) {
|
||||
this.form.whenMarriedMate = e.value[0]
|
||||
this.showWhenMarriedMate = false
|
||||
},
|
||||
closeRegionMate() {
|
||||
this.showRegionMate = false
|
||||
},
|
||||
closeBirthday() {
|
||||
this.showBirthday = false
|
||||
},
|
||||
closeHeight() {
|
||||
this.showHeight = false
|
||||
},
|
||||
closeHeight() {
|
||||
this.showHeight = false
|
||||
},
|
||||
closeMonthlyPay() {
|
||||
this.showMonthlyPay = false
|
||||
},
|
||||
closeEducation() {
|
||||
this.showEducation = false
|
||||
},
|
||||
closeMaritalStatus() {
|
||||
this.showMaritalStatus = false
|
||||
},
|
||||
closeHasChildren() {
|
||||
this.showHasChildren = false
|
||||
},
|
||||
closeHaveChild() {
|
||||
this.showHaveChild = false
|
||||
},
|
||||
closePosition() {
|
||||
this.showPosition = false
|
||||
},
|
||||
closeHeight() {
|
||||
this.showHeight = false
|
||||
},
|
||||
closeWeight() {
|
||||
this.showWeight = false
|
||||
},
|
||||
closeHasCar() {
|
||||
this.showHasCar = false
|
||||
},
|
||||
closeYearlyPayMate(){
|
||||
this.showYearlyPayMate = false
|
||||
},
|
||||
closeYearlyPay(){
|
||||
this.showYearlyPay = false
|
||||
},
|
||||
closeShape(){
|
||||
this.showShape = false
|
||||
},
|
||||
closeHasHouse() {
|
||||
this.showHasHouse = false
|
||||
},
|
||||
closeWhenMarried() {
|
||||
this.showWhenMarried = false
|
||||
},
|
||||
closeAgeMate() {
|
||||
this.showAgeMate = false
|
||||
},
|
||||
closeHeightMate() {
|
||||
this.showHeightMate = false
|
||||
},
|
||||
closeMonthlyPayMate() {
|
||||
this.showMonthlyPayMate = false
|
||||
},
|
||||
closeEducationMate() {
|
||||
this.showEducationMate = false
|
||||
},
|
||||
closeMaritalStatusMate() {
|
||||
this.showMaritalStatusMate = false
|
||||
},
|
||||
closeHasChildrenMate() {
|
||||
this.showHasChildrenMate = false
|
||||
},
|
||||
closeHaveChildMate() {
|
||||
this.showHaveChildMate = false
|
||||
},
|
||||
closePositionMate() {
|
||||
this.showPositionMate = false
|
||||
},
|
||||
closeWeightMate() {
|
||||
this.showWeightMate = false
|
||||
},
|
||||
closeShapeMate() {
|
||||
this.showShapeMate = false
|
||||
},
|
||||
closeIsSmokingMate() {
|
||||
this.showIsSmokingMate = false
|
||||
},
|
||||
closeIsDrinkMate() {
|
||||
this.showIsDrinkMate = false
|
||||
},
|
||||
closeHasCarMate() {
|
||||
this.showHasCarMate = false
|
||||
},
|
||||
closeHasHouseMate() {
|
||||
this.showHasHouseMate = false
|
||||
},
|
||||
closeWhenMarriedMate() {
|
||||
this.showWhenMarriedMate = false
|
||||
},
|
||||
pickerRegion(e) {
|
||||
console.log("e: ", e);
|
||||
},
|
||||
chooseBgImage() {
|
||||
const app = this;
|
||||
uni.showActionSheet({
|
||||
itemList: ['更换背景图'],
|
||||
success() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success(chooseImageRes) {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
app.uploadFilePromise(tempFilePaths[0]).then(result=>{
|
||||
app.form.userInfo.bgImage = result.url
|
||||
console.log(app.form, result.url);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
// UploadApi.uploadFile()
|
||||
// let a = uni.uploadFile({
|
||||
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
|
||||
// filePath: url,
|
||||
// name: 'file',
|
||||
// header: {
|
||||
// Authorization: uni.getStorageSync('AccessToken')
|
||||
// },
|
||||
// formData: {
|
||||
// user: 'test'
|
||||
// },
|
||||
// success: (res) => {
|
||||
// const result = JSON.parse(res.data)
|
||||
// setTimeout(() => {
|
||||
// resolve(result)
|
||||
// }, 1000)
|
||||
// }
|
||||
// });
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
.bg {
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
background-color: #0d0119;
|
||||
opacity: .3;
|
||||
}
|
||||
.page-title {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
padding-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
height: 220rpx;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: url('https://oss-aishangjia.oss-cn-shenzhen.aliyuncs.com/v2_rww72n.jpg') no-repeat;
|
||||
background-size: 100%;
|
||||
color: #cccccc;
|
||||
font-size: 24rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
button{
|
||||
background: none;
|
||||
}
|
||||
|
||||
text {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin: 20rpx auto 20rpx auto;
|
||||
padding: 20rpx;
|
||||
width: 680rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16rpx;
|
||||
background: #fff;
|
||||
.nickname{
|
||||
text-align: right !important;
|
||||
}
|
||||
.interest {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.u-page__tag-item {
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
||||
.footer {
|
||||
margin-top: 50rpx;
|
||||
padding-bottom: 50rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-top: 20rpx;
|
||||
.btn-wrapper {
|
||||
width: 360rpx;
|
||||
margin: auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 86rpx;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-item-wechat {
|
||||
background: #0ba90b;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.btn-item-main {
|
||||
background: linear-gradient(to right, $main-bg, $main-bg2);
|
||||
color: $main-text;
|
||||
|
||||
// 禁用按钮
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.textarea{
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.images{
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.his-head {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0 20rpx 0;
|
||||
color: #681752;
|
||||
|
||||
.line {
|
||||
background-color: #681752;
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
547
sub_pages/user/poster/poster.vue
Normal file
547
sub_pages/user/poster/poster.vue
Normal file
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop placeholder
|
||||
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
|
||||
<view class="bg-image"></view>
|
||||
<view class="content">
|
||||
<view style="display: flex;justify-content: center;position: relative;flex-direction: column;align-items: center;margin-top: 72rpx;height: 800rpx;" class="">
|
||||
<image style="width: 640rpx;position: absolute; top: 0;" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/yaoqinghaoyouzhuanjiangli.png" mode="widthFix"></image>
|
||||
<image class="head-box" src="https://oss.jimeigroup.cn/static/poster-head21.png" mode="widthFix"></image>
|
||||
<view class="poster-btn">
|
||||
<view class="poster-wrapper">
|
||||
<view class="poster-desc">
|
||||
<view class="poster-desc-title">
|
||||
邀请好友奖励如下
|
||||
</view>
|
||||
<view class="poster-list">
|
||||
<view class="item">邀请<text class="b">注册用户</text>：获得好友充值的奖励</view>
|
||||
<view class="item">邀请<text class="b">普通会员</text>：获得好友充值的奖励</view>
|
||||
<view class="item">邀请<text class="b">尊享用户</text>：获得好友充值的奖励</view>
|
||||
</view>
|
||||
</view>
|
||||
<image @click="$push('sub_pages/user/poster/poster2')" class="btn-share" src="https://oss.jimeigroup.cn/static/haibaofenxiang.png" mode="widthFix"></image>
|
||||
<!-- <u-button text="海报分享" color="#ffffff"
|
||||
:customStyle="{color: '#000000',fontWeight: '600', marginBottom: '70rpx'}" :disabled="disabled"
|
||||
shape="circle" @click="$push('sub_pages/user/poster/poster2')"></u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<image class="rank-top" src="https://oss.jimeigroup.cn/static/yaoqinghaoyouzhuanjiangli2.png" mode="widthFix"></image>
|
||||
<view class="ranking">
|
||||
<!-- <view class="title">—— 排行榜 ——</view> -->
|
||||
<view class="list">
|
||||
<u-list height="600rpx" @scrolltolower="scrolltolower">
|
||||
<u-list-item v-for="(item, index) in ranking" :key="index">
|
||||
<view style="display: flex;justify-content: space-between; margin-top: 10rpx; padding: 20rpx; height: 50rpx;align-items: center;" class="cell">
|
||||
<view style="display: flex;align-items: center; line-height: 50rpx;" class="">
|
||||
<view v-if="index >= 3" style="margin-right: 22rpx;width: 64rpx;display: flex;justify-content: center;" class="">{{index + 1}}</view>
|
||||
<image v-if="index < 3" style="width: 64rpx; height: 64rpx;margin-right: 22rpx; padding-top: 20rpx;" :src="item.icon" mode="widthFix"></image>
|
||||
<u-avatar shape="circle" size="30" :src="item.avatar"></u-avatar>
|
||||
<view style="color: rgb(255, 235, 211);font-size: 28rpx; margin-left: 10rpx;" class="">{{item.nickname}}</view>
|
||||
</view>
|
||||
<view style="color: rgb(255, 235, 211);font-size: 28rpx;" class="">
|
||||
共奖励<text style="color: rgb(242, 67, 116);">{{item.value}}</text>元
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- <view class="form" @click="onShowQrcode">
|
||||
<view class="btn">
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<u-popup :show="showQrcode" mode="center" :round="10" @close="showQrcode = false">
|
||||
<view class="qrcode-box">
|
||||
<view class="poster">
|
||||
<image :src="posterUrl" mode="widthFix">
|
||||
|
||||
</view>
|
||||
<view class="gap">立即分享</view>
|
||||
<view class="share">
|
||||
<view class="btn">
|
||||
<!-- <image src="../../../static/icon/share01.png" mode="widthFix"></image> -->
|
||||
<u-button @click="onSahreQuan" text="朋友圈" icon="https://file.wsdns.cn/20230710/447306d3788a4fcdb6c5a9c7b8d9147d.png" :plain="true" size="normal" :customStyle="{border: 'none'}" :hairline="false" open-type="share"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button @click="onShareWeixin" text="微信好友" icon="https://file.wsdns.cn/20230710/ebb9586ef759415585db3bbc55574321.png" :plain="true" size="normal" :customStyle="{border: 'none'}" open-type="share"></u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button @click="onShareAlbum" text="保存相册" icon="https://file.wsdns.cn/20230710/da05c38686b349debde3063f4203e20a.png" :plain="true" size="normal" :customStyle="{border: 'none'}"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 海报绘制 -->
|
||||
<l-painter custom-style="position: fixed; left: 200%" isCanvasToTempFilePath @success="drawSuccess" css="height: 732rpx; width: 580rpx;" file-type="png">
|
||||
<template v-if="userInfo && QrcodeUrl" >
|
||||
<l-painter-view
|
||||
css="height: 732rpx; width: 580rpx;borderRadius: 20rpx; backgroundColor: #fff; position: relative;"
|
||||
>
|
||||
<!-- 小程序码 -->
|
||||
<l-painter-image
|
||||
src="https://oss.jimeigroup.cn/static/invite-head.png?x-oss-process=image/resize,w_1500/format,webp"
|
||||
css="width: 580rpx; height: 632rpx; borderRadius: 20rpx 20rpx 0 0;"
|
||||
/>
|
||||
<l-painter-view
|
||||
css=" position: absolute; bottom: 110rpx;left:20rpx;"
|
||||
>
|
||||
<l-painter-view>
|
||||
<l-painter-image
|
||||
:src="QrcodeUrl"
|
||||
css="width: 140rpx; height: 140rpx;"
|
||||
/>
|
||||
</l-painter-view>
|
||||
|
||||
<l-painter-view
|
||||
css="width: 280rpx; height: 80rpx; display: flex; align-items: center;"
|
||||
>
|
||||
<l-painter-image
|
||||
:src="userInfo.avatar"
|
||||
css="width: 40rpx; height: 40rpx; borderRadius:50%;margin-right: 20rpx;"
|
||||
/>
|
||||
<l-painter-view
|
||||
css="font-size: 26rpx; display: flex; flex-direction: column;"
|
||||
>
|
||||
<l-painter-text :text="userInfo.nickname" css="textAlign: left; color: #FFFFFF;"/>
|
||||
<!-- <l-painter-text :text="userInfo.mobile" css="textAlign: left; color: #999999;"/> -->
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
|
||||
|
||||
</l-painter-view>
|
||||
|
||||
<l-painter-view css="width: 100%;textAlign: center;height: 100rpx;line-height:100rpx;">
|
||||
<l-painter-text
|
||||
text="长按识别二维码"
|
||||
css="textAlign: center; color: #000000;"
|
||||
/>
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
|
||||
</template>
|
||||
</l-painter>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as WxLoginApi from '@/api/wx-login.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId,
|
||||
userInfo,
|
||||
form: {},
|
||||
showQrcode: false,
|
||||
QrcodeUrl: '',
|
||||
ranking: [{
|
||||
icon: 'https://oss.jimeigroup.cn/static/1.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/204f1dd2920648b49703255daf51b494.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '茶色',
|
||||
value: '5142.00'
|
||||
},{
|
||||
icon: 'https://oss.jimeigroup.cn/static/2.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/4fd091aca58f4dcface4e906e0a2d50f.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '李开心',
|
||||
value: '3006.12'
|
||||
},{
|
||||
icon: 'https://oss.jimeigroup.cn/static/3.png',
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/19898741661d443a9afb9fe83ab513cf.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: 'Kris',
|
||||
value: '1982.06'
|
||||
},{
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/302bf7b247344c8dbac162eca421cf20.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '薄荷',
|
||||
value: '1306.60'
|
||||
},{
|
||||
avatar: 'https://oss.jimeigroup.cn/20230724/7fb23c8cabfc4588b91ecbf1087ffe0e.jpeg?x-oss-process=image/resize,w_300/quality,Q_90',
|
||||
nickname: '米兰',
|
||||
value: '1013.96'
|
||||
}],
|
||||
posterUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQrCode()
|
||||
},
|
||||
onShareTimeline(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
|
||||
imageUrl: 'https://oss.jimeigroup.cn/static/mp-share.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawSuccess(e){
|
||||
this.posterUrl = e
|
||||
// uni.previewImage({
|
||||
// urls: [e]
|
||||
// })
|
||||
},
|
||||
onShowQrcode() {
|
||||
this.showQrcode = true
|
||||
this.getQrCode()
|
||||
},
|
||||
// 获取微信小程序码
|
||||
getQrCode() {
|
||||
const app = this
|
||||
|
||||
WxLoginApi.getWxQrCodeFile().then(res => {
|
||||
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
|
||||
// app.showQrcode = true
|
||||
storage.set('QrcodeUrl', res.message)
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onShareQuan(){
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneTimeline",
|
||||
type: 2,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
success: function (res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareWeixin(){
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
title: '爱尚客',
|
||||
miniProgram: {
|
||||
id: 'gh_39f1f8019c3f',
|
||||
path: 'pages/index/index',
|
||||
type: 0,
|
||||
webUrl: 'http://uniapp.dcloud.io'
|
||||
},
|
||||
success: function (res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareAlbum(){
|
||||
// uni.saveImageToPhotosAlbum({
|
||||
// filePath: res.tempFilePaths[0],
|
||||
// success: function () {
|
||||
// console.log('save success');
|
||||
// }
|
||||
// });
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.saveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.saveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存相册分享",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImageToPhotosAlbum() {
|
||||
|
||||
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功，请从相册选择再分享',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-image{
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
background-image: url('https://oss.jimeigroup.cn/static/poster-bg21.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content{
|
||||
z-index: 90;
|
||||
}
|
||||
.head-box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 750rpx;
|
||||
top: -130rpx;
|
||||
}
|
||||
.rank-top{
|
||||
width: 634rpx;
|
||||
margin: 30rpx 58rpx;
|
||||
}
|
||||
.container {
|
||||
|
||||
|
||||
.poster-title {
|
||||
width: 750rpx;
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
font-family: FZZongYi;
|
||||
font-weight: 400;
|
||||
font-size: 70rpx;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-style: normal;
|
||||
letter-spacing: 0px;
|
||||
line-height: 70rpx;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.poster-btn {
|
||||
width: 600rpx;
|
||||
margin: 20rpx auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 150rpx;
|
||||
|
||||
.poster-wrapper {
|
||||
color: #333333;
|
||||
width: 450rpx;
|
||||
height: 520rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.poster-desc {
|
||||
|
||||
|
||||
.poster-desc-title {
|
||||
padding-top: 60rpx;
|
||||
padding-bottom: 30rpx;
|
||||
font-size: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.poster-list {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 64rpx;
|
||||
.b{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-share{
|
||||
width: 200rpx;
|
||||
margin: 95rpx auto 0;
|
||||
}
|
||||
|
||||
// width: 600rpx;
|
||||
// margin: auto;
|
||||
// background: url('https://file.wsdns.cn/20230710/b68c9d11ad744dc880217ee82af24f07.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100%;
|
||||
}
|
||||
|
||||
.ranking {
|
||||
margin: 0 auto;
|
||||
width: 634rpx;
|
||||
height: 500rpx;
|
||||
background: rgba(15, 0, 32, 0.5);
|
||||
border: 1px solid rgb(151, 99, 157);
|
||||
color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 350rpx;
|
||||
width: 750rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.qrcode-box {
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 660rpx;
|
||||
height: 1000rpx;
|
||||
|
||||
.poster {
|
||||
width: 580rpx;
|
||||
height: 733rpx;
|
||||
margin: 40rpx auto;
|
||||
box-shadow: 0px 0px 10px #cccccc;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
image {
|
||||
width: 580rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.user {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 200rpx;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 26rpx;
|
||||
|
||||
.phone {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-img {
|
||||
width: 140rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.long-press {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.gap {
|
||||
font-size: 28rpx;
|
||||
margin: auto;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.share {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
366
sub_pages/user/poster/poster2.vue
Normal file
366
sub_pages/user/poster/poster2.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar autoBack leftIconColor="#FFFFFF" title="分享海报" bg-color="transparent" safeAreaInsetTop
|
||||
:titleStyle="{color: '#FFFFFF'}" :fixed="true"></u-navbar>
|
||||
<view class="poster-main">
|
||||
<image class="poster-main-img" src="https://oss.jimeigroup.cn/static/haoyou-bg.png"
|
||||
mode="widthFix"></image>
|
||||
<!-- <view class="user-info">
|
||||
<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
|
||||
<view class="info">
|
||||
<view class="nickname">
|
||||
{{userInfo.nickname}}
|
||||
</view>
|
||||
<view class="phone">
|
||||
{{userInfo.phone}}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<image class="qrcode" :src="QrcodeUrl">
|
||||
</view>
|
||||
|
||||
<view class="poster-footer">
|
||||
<!-- <view class="poster-footer-title">
|
||||
— 立即分享 —
|
||||
</view> -->
|
||||
<view class="poster-footer-btns">
|
||||
<button open-type="share" class="poster-footer-btn u-reset-button">
|
||||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-share.png" mode="aspectFill">
|
||||
</image>
|
||||
<view class="poster-footer-btn-text">分享微信好友</view>
|
||||
</button>
|
||||
<view @click="drawPoster" class="poster-footer-btn">
|
||||
<image class="poster-footer-btn-icon" src="https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/poster-save.png" mode="aspectFill"></image>
|
||||
<view class="poster-footer-btn-text">保存相册分享</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 海报绘制 -->
|
||||
<l-painter custom-style="position: fixed;left: 200%;" ref="painter" @success="drawSuccess"
|
||||
css="height: 1067px; width: 750px;" file-type="jpg">
|
||||
<template>
|
||||
<l-painter-view
|
||||
css="background-image: url(https://oss.jimeigroup.cn/static/post-bg3.jpg); width: 750px;height: 1067px;">
|
||||
<l-painter-view
|
||||
css="background-image: url(https://oss.jimeigroup.cn/static/haoyou-bg.png); width: 750px;height: 1067px;position:relative;">
|
||||
<!-- 用户头像、昵称 -->
|
||||
<!-- <l-painter-view style="display: flex;" css="display: flex;align-items: center;position: absolute;left: 150px; bottom: 150px;">
|
||||
<l-painter-image
|
||||
css="width: 75px;height: 75px;border-radius: 50%"
|
||||
:src="userInfo.avatar"></l-painter-image>
|
||||
<l-painter-view css="margin-left: 20px;">
|
||||
<l-painter-view css="height: 40px;line-height: 40px;"><l-painter-text :text="userInfo.nickname" css="font-size: 28px" style=";"></l-painter-text></l-painter-view>
|
||||
<l-painter-view css="height: 40px;line-height: 40px;"> <l-painter-text :text="userInfo.phone" css="font-size: 24px"></l-painter-text></l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter-view> -->
|
||||
<!-- 二维码 -->
|
||||
<l-painter-image
|
||||
css="position: absolute;right: 150px;bottom: 150px;width: 160px;height: 160px;"
|
||||
:src="QrcodeUrl"></l-painter-image>
|
||||
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</template>
|
||||
</l-painter>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as WxLoginApi from '@/api/wx-login.js'
|
||||
import store from '@/store/index.js'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId,
|
||||
userInfo,
|
||||
form: {},
|
||||
showQrcode: false,
|
||||
QrcodeUrl: '',
|
||||
ranking: [{
|
||||
avatar: '',
|
||||
nickname: '别来无恙',
|
||||
value: '共奖励5012.00元'
|
||||
}],
|
||||
posterUrl: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getQrCode()
|
||||
},
|
||||
onShareTimeline(res) {
|
||||
if (res.from === 'button') { // 来自页面内分享按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '爱尚客',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId')
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '高端婚恋交友平台',
|
||||
path: 'pages/index/index?user_id=' + uni.getStorageSync('userId'),
|
||||
imageUrl: 'https://file-jimei.oss-cn-shenzhen.aliyuncs.com/static/mp-share.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
drawPoster() {
|
||||
this.$refs.painter.canvasToTempFilePath({
|
||||
// x: 0,
|
||||
// y: 170,
|
||||
// with: 750,
|
||||
// height: 1067,
|
||||
fileType: "jpg",
|
||||
// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
|
||||
pathType: 'url',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
// console.log(res.tempFilePath);
|
||||
// uni.previewImage({
|
||||
// urls: [res.tempFilePath]
|
||||
// })
|
||||
// 非H5 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '已保存相册'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
drawSuccess(e) {
|
||||
this.posterUrl = e
|
||||
// uni.previewImage({
|
||||
// urls: [e]
|
||||
// })
|
||||
},
|
||||
onShowQrcode() {
|
||||
this.showQrcode = true
|
||||
this.getQrCode()
|
||||
},
|
||||
// 获取微信小程序码
|
||||
getQrCode() {
|
||||
const app = this
|
||||
|
||||
WxLoginApi.getWxQrCodeFile().then(res => {
|
||||
app.QrcodeUrl = "https://file.jimeigroup.cn" + res.message
|
||||
// app.showQrcode = true
|
||||
storage.set('QrcodeUrl', res.message)
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
})
|
||||
},
|
||||
onShareQuan() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneTimeline",
|
||||
type: 2,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareWeixin() {
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 5,
|
||||
imageUrl: "https://file.wsdns.cn/qrcode/M4WhwQv2.png",
|
||||
title: '爱尚客',
|
||||
miniProgram: {
|
||||
id: 'gh_39f1f8019c3f',
|
||||
path: 'pages/index/index',
|
||||
type: 0,
|
||||
webUrl: 'http://uniapp.dcloud.io'
|
||||
},
|
||||
success: function(res) {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
}
|
||||
});
|
||||
},
|
||||
onShareAlbum() {
|
||||
// uni.saveImageToPhotosAlbum({
|
||||
// filePath: res.tempFilePaths[0],
|
||||
// success: function () {
|
||||
// console.log('save success');
|
||||
// }
|
||||
// });
|
||||
uni.getSetting({ //获取用户的当前设置
|
||||
success: (res) => {
|
||||
if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
|
||||
this.saveImageToPhotosAlbum();
|
||||
} else {
|
||||
uni.authorize({ //如果没有授权，向用户发起请求
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: () => {
|
||||
this.saveImageToPhotosAlbum();
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "请打开保存相册权限，再点击保存相册分享",
|
||||
icon: "none",
|
||||
duration: 3000
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
|
||||
success: (res2) => {
|
||||
// console.log(res2.authSetting)
|
||||
}
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImageToPhotosAlbum() {
|
||||
|
||||
let base64 = this.posterUrl.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
|
||||
let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png';
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath: filePath, //创建一个临时文件名
|
||||
data: base64, //写入的文本或二进制数据
|
||||
encoding: 'base64', //写入当前文件的字符编码
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: filePath,
|
||||
success: function(res2) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功，请从相册选择再分享',
|
||||
icon: "none",
|
||||
duration: 5000
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
// console.log(err.errMsg);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading();
|
||||
//console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #730070;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.container {
|
||||
background-image: url(https://oss.jimeigroup.cn/static/login-bg01.png);
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
width: 750rpx;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.poster-main {
|
||||
margin: 170rpx auto 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.qrcode {
|
||||
position: absolute;
|
||||
right: 150rpx;
|
||||
bottom: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
}
|
||||
|
||||
.poster-main-img {
|
||||
width: 750rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-footer {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.poster-footer-title {
|
||||
// height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
// font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
// line-height: 80rpx;
|
||||
}
|
||||
|
||||
.poster-footer-btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 600rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.poster-footer-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info{
|
||||
position: absolute;
|
||||
left: 150rpx;
|
||||
bottom: 160rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar{
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.nickname{
|
||||
font-size: 28rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.phone {
|
||||
font-size: 24rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1474
sub_pages/video-swiper/index.vue
Normal file
1474
sub_pages/video-swiper/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
378
sub_pages/wallet/balance/log.vue
Executable file
378
sub_pages/wallet/balance/log.vue
Executable file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="my-profit">
|
||||
<view class="item" @click="$push('sub_pages/wallet/profit/profit')">
|
||||
<view class="profit">
|
||||
<u-count-to :startVal="0" decimals="2" color="#ffffff" :endVal="merchant.money"></u-count-to>
|
||||
</view>
|
||||
<view class="desc">
|
||||
我的余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="$push('pages/wallet/gift/gift')">
|
||||
<view class="profit">{{ userInfo.points }}</view>
|
||||
<view class="desc">礼物收益</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-date" @click="openCalendar">
|
||||
<u-icon class="icon" size="22" name="calendar"></u-icon>
|
||||
<text v-if="createTimeStart && createTimeEnd">{{ createTimeStart }} ~ {{ createTimeEnd }}</text>
|
||||
</view>
|
||||
<view class="order" v-for="(item,index) in list" :key="index">
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name" v-if="item.scene == 10">用户充值</text>
|
||||
<text class="name" v-if="item.scene == 20">用户消费</text>
|
||||
<text class="name" v-if="item.scene == 30">管理员操作</text>
|
||||
<text class="name" v-if="item.scene == 40">订单退款</text>
|
||||
<text class="selling-point">{{ item.createTime }}</text>
|
||||
<text class="selling-point" v-if="item.scene == 30">备注：{{ item.remark }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="add-price"
|
||||
v-if="item.scene == 10 || item.scene == 40">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-if="item.scene == 20">-￥{{ item.money }}</text>
|
||||
<block v-if="item.scene == 30">
|
||||
<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
|
||||
</block>
|
||||
<text class="num">￥{{ item.balance }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无数据" />
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="closeShow"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
import * as LogApi from '@/api/balance-log.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false,
|
||||
merchant: {
|
||||
// 总收益
|
||||
totalMoney: 0.00,
|
||||
// 当前可提现金额
|
||||
money: 0.00,
|
||||
// 今日收益
|
||||
todayMoney: 0.00,
|
||||
// 本月收益
|
||||
monthMoney: 0.00
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.getMerchant()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {
|
||||
// 查询报餐信息
|
||||
this.getLog()
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getLog() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd
|
||||
} = this
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
LogApi.pageBalanceLog({
|
||||
userId,
|
||||
createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
limit: 50,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
getMerchant(){
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(res => {
|
||||
console.log("res: ",res);
|
||||
if(res.data.length > 0){
|
||||
app.merchant = res.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.createTimeStart = date[0]
|
||||
this.createTimeEnd = date[date.length - 1]
|
||||
this.getLog()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
closeShow(){
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
padding-top: 42rpx;
|
||||
}
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 0 auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
345
sub_pages/wallet/gift/gift.vue
Normal file
345
sub_pages/wallet/gift/gift.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="my-profit">
|
||||
<view class="item">
|
||||
<view class="profit">0</view>
|
||||
<view class="desc">礼币数</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="profit">0</view>
|
||||
<view class="desc">礼物数</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" @click="onChangeTab" lineColor="#ff0000"></u-tabs>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无数据" />
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="show = false"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import * as LogApi from '@/api/balance-log.js'
|
||||
|
||||
const tabs = [{
|
||||
name: `收到礼物`,
|
||||
value: 'delivery'
|
||||
}, {
|
||||
name: `赠送礼物`,
|
||||
value: 'delivery'
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs,
|
||||
list: [],
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {
|
||||
// 查询报餐信息
|
||||
this.getLog()
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getLog() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd
|
||||
} = this
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
LogApi.pageBalanceLog({
|
||||
userId,
|
||||
createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
limit: 50,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
// 切换标签项
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
// 设置当前选中的标签
|
||||
app.curTab = e.index
|
||||
app.page = 1
|
||||
app.list = []
|
||||
// 刷新订单列表
|
||||
app.onRefreshList()
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.createTimeStart = date[0]
|
||||
this.createTimeEnd = date[date.length - 1]
|
||||
this.getLog()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
padding-top: 42rpx;
|
||||
}
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabs {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 42rpx auto 42rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
167
sub_pages/wallet/index.vue
Executable file
167
sub_pages/wallet/index.vue
Executable file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="container" v-if="!isLoading">
|
||||
<view class="space-upper">
|
||||
<view class="wallet-image">
|
||||
<image src="https://oss.jimeigroup.cn/static/wallet.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="wallet-account">
|
||||
<view class="wallet-account_balance">
|
||||
<text>{{ userInfo.balance }}</text>
|
||||
</view>
|
||||
<view class="wallet-account_lable">
|
||||
<text>账户余额(元)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-lower">
|
||||
<view v-if="setting.is_entrance" class="space-lower_item btn-recharge">
|
||||
<view class="btn-submit" @click="onTargetRecharge()">充 值</view>
|
||||
</view>
|
||||
<view class="space-lower_item item-lable dis-flex flex-x-around">
|
||||
<view class="lable-text" @click="onTargetRechargeOrder()">
|
||||
<text>充值记录</text>
|
||||
</view>
|
||||
<view class="lable-text" @click="onTargetBalanceLog()">
|
||||
<text>账单详情</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserApi from '@/api/user'
|
||||
import SettingModel from '@/common/model/Setting'
|
||||
import SettingKeyEnum from '@/common/enum/setting/Key'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 正在加载
|
||||
isLoading: true,
|
||||
// 会员信息
|
||||
userInfo: {},
|
||||
// 充值设置
|
||||
setting: {},
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onShow(options) {
|
||||
// 获取页面数据
|
||||
this.getPageData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取页面数据
|
||||
getPageData() {
|
||||
const app = this
|
||||
app.isLoading = true
|
||||
Promise.all([app.getUserInfo(), app.getSetting()])
|
||||
.then(() => app.isLoading = false)
|
||||
},
|
||||
|
||||
// 获取会员信息
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
UserApi.info()
|
||||
.then(result => {
|
||||
app.userInfo = result.data.userInfo
|
||||
resolve(app.userInfo)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取充值设置
|
||||
getSetting() {
|
||||
const app = this
|
||||
return new Promise((resolve, reject) => {
|
||||
SettingModel.item(SettingKeyEnum.RECHARGE.value, false)
|
||||
.then(data => {
|
||||
app.setting = data
|
||||
resolve(data)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转充值页面
|
||||
onTargetRecharge() {
|
||||
this.$navTo('pages/wallet/recharge/index')
|
||||
},
|
||||
|
||||
// 跳转充值记录页面
|
||||
onTargetRechargeOrder() {
|
||||
this.$navTo('pages/wallet/recharge/order')
|
||||
},
|
||||
|
||||
// 跳转账单详情页面
|
||||
onTargetBalanceLog() {
|
||||
this.$navTo('pages/wallet/balance/log')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.space-upper {
|
||||
padding: 150rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wallet-image image {
|
||||
width: 360rpx;
|
||||
height: 261.72rpx;
|
||||
}
|
||||
|
||||
.wallet-account {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-account_balance {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.wallet-account_lable {
|
||||
margin-top: 14rpx;
|
||||
color: #cec1c1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.space-lower {
|
||||
margin-top: 30rpx;
|
||||
padding: 0 110rpx;
|
||||
}
|
||||
|
||||
.btn-recharge .btn-submit {
|
||||
width: 460rpx;
|
||||
height: 84rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 50rpx;
|
||||
background: #786cff;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-lable {
|
||||
margin-top: 80rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgb(94, 94, 94);
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
</style>
|
||||
559
sub_pages/wallet/profit/profit.vue
Normal file
559
sub_pages/wallet/profit/profit.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="page-bg">
|
||||
<view class="profit-total">
|
||||
<view class="item">
|
||||
<view class="profit">
|
||||
<u-count-to :startVal="0" decimals="2" color="#ffffff" :endVal="merchant.money"></u-count-to>
|
||||
</view>
|
||||
<view class="desc">可提现收益</view>
|
||||
<!-- <view class="total-desc">累计提现：{{ merchant.totalMoney }}</view> -->
|
||||
</view>
|
||||
<view class="item">
|
||||
<u-button text="去提现" type="warning" :hairline="true" size="small" @click="$push('sub_pages/withdraw/withdraw')"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order" v-for="(item,index) in list" :key="index">
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<view class="order-id">订单号：{{ item.logId }}</view>
|
||||
<view class="user-box">
|
||||
<view class="avatar">
|
||||
<u-avatar :src="item.playerAvatar"></u-avatar>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<text class="name">{{ item.playerNickname }}</text>
|
||||
<text class="selling-point">{{ item.gradeName }}</text>
|
||||
<text class="selling-point">ID：{{ userIdPrefix }}{{ item.playerId }}</text>
|
||||
<!-- <text class="selling-point" v-if="item.scene == 10">推荐收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 20">解锁收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 30">团队收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 40">区域收益</text>
|
||||
<text class="selling-point" v-if="item.scene == 50">收益提现</text> -->
|
||||
<text class="selling-point">金额：￥{{ item.orderPrice }}</text>
|
||||
<text class="selling-point">备注：{{ item.comments }}</text>
|
||||
<text class="selling-point">状态：{{ item.isSettled == 1 ? '已结算' : '未结算' }}</text>
|
||||
<text class="selling-point">时间：{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-price" v-if="item.isSettled == 1">
|
||||
<text class="add-price"
|
||||
v-if="item.scene == 50 || item.scene == 20">+￥{{ item.money }}</text>
|
||||
<!-- <text class="sub-price" v-if="item.scene == 40">-￥{{ item.money }}</text>
|
||||
<block v-if="item.scene == 30">
|
||||
<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
|
||||
</block> -->
|
||||
<text class="num">￥{{ item.balance }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore v-if="list.length > 0" :status="status" />
|
||||
<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无收益记录" v-if="list.length == 0">
|
||||
</u-empty>
|
||||
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="closeShow"></u-calendar>
|
||||
|
||||
<u-action-sheet :actions="grade" @select="onGrade"
|
||||
:show="showGrade"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
username,
|
||||
userIdPrefix
|
||||
} from '@/config.js';
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
import * as ProfitApi from '@/api/love-profit.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
// tab栏数据
|
||||
const tabs = [{
|
||||
name: `推广收益`,
|
||||
value: 10
|
||||
},{
|
||||
name: `团队收益`,
|
||||
value: 20
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userIdPrefix,
|
||||
tabs,
|
||||
list: [],
|
||||
loadMore: true,
|
||||
status: '加载更多',
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false,
|
||||
showGrade: false,
|
||||
grade: [
|
||||
{
|
||||
name: '不限'
|
||||
},{
|
||||
name: '线上会员'
|
||||
},
|
||||
{
|
||||
name: '线下会员'
|
||||
},
|
||||
{
|
||||
name: '线上门店'
|
||||
}
|
||||
],
|
||||
gradeText: '不限',
|
||||
page: 1,
|
||||
where: {
|
||||
scene: 50,
|
||||
userId
|
||||
},
|
||||
merchant: {
|
||||
// 总收益
|
||||
totalMoney: 0.00,
|
||||
// 当前可提现金额
|
||||
money: 0.00,
|
||||
// 今日收益
|
||||
todayMoney: 0.00,
|
||||
// 本月收益
|
||||
monthMoney: 0.00
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.getMerchant()
|
||||
app.onRefreshList()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {},
|
||||
// 触底函数
|
||||
onReachBottom() {
|
||||
const app = this
|
||||
if (app.loadMore) {
|
||||
app.page = ++app.page;
|
||||
app.onRefreshList()
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
const app = this
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.getMerchant()
|
||||
app.onRefreshList();
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
methods: {
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd,
|
||||
curTab
|
||||
} = this
|
||||
|
||||
app.where.page = app.page
|
||||
app.where.userId = userId
|
||||
app.where.payStatus = 20
|
||||
// 只查询已支付订单
|
||||
ProfitApi.pageProfit(app.where).then(res => {
|
||||
const newList = res.data.list
|
||||
if (newList.length > 0) {
|
||||
app.list = app.list.concat(newList)
|
||||
} else {
|
||||
app.status = '没有更多了'
|
||||
app.loadMore = false
|
||||
}
|
||||
})
|
||||
},
|
||||
getMerchant(){
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(res => {
|
||||
console.log("res: ",res);
|
||||
if(res.data.length > 0){
|
||||
app.merchant = res.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取购物车数据
|
||||
// getLog() {
|
||||
// const app = this
|
||||
// const {
|
||||
// deliveryTime,
|
||||
// createTimeStart,
|
||||
// createTimeEnd
|
||||
// } = this
|
||||
|
||||
// const userId = uni.getStorageSync('userId')
|
||||
// ProfitApi.pageProfit({
|
||||
// userId,
|
||||
// createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
// createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
// limit: 50,
|
||||
// page: 1
|
||||
// }).then(res => {
|
||||
// app.list = res.data.list
|
||||
// })
|
||||
// },
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
if(app.userInfo.gradeId >= 10 && app.tabs.length == 2){
|
||||
app.tabs.push({
|
||||
name: `门店收益`,
|
||||
value: 30
|
||||
})
|
||||
}
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.page = 1
|
||||
this.where.createTimeStart = date[0]
|
||||
this.where.createTimeEnd = date[date.length - 1]
|
||||
this.onRefreshList()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
onChangeTab(e) {
|
||||
const app = this
|
||||
app.where.scene = e.value
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
closeShow(){
|
||||
this.show = false
|
||||
},
|
||||
onGrade(e){
|
||||
const app = this
|
||||
app.gradeText = e.name
|
||||
if(e.name == '线上会员'){
|
||||
app.where.gradeStart = 2
|
||||
app.where.gradeEnd = 4
|
||||
}
|
||||
if(e.name == '线下会员'){
|
||||
app.where.gradeStart = 5
|
||||
app.where.gradeEnd = 6
|
||||
}
|
||||
if(e.name == '线上门店'){
|
||||
app.where.gradeStart = 7
|
||||
app.where.gradeEnd = 9
|
||||
}
|
||||
if(e.name == '不限'){
|
||||
app.where.gradeStart = undefined
|
||||
app.where.gradeEnd = undefined
|
||||
}
|
||||
app.page = 1
|
||||
app.list = []
|
||||
app.onRefreshList()
|
||||
app.showGrade = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.page-bg {
|
||||
width: 750rpx;
|
||||
height: calc(150rpx + var(--status-bar-height));
|
||||
display: block;
|
||||
background: linear-gradient(to bottom, $main-bg, $main-bg2);
|
||||
color: #ffffff;
|
||||
.profit-total{
|
||||
width: 600rpx;
|
||||
height: 200rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item{
|
||||
text-align: center;
|
||||
.profit{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
color: #d0d1d4;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.total-desc{
|
||||
margin-top: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #d0d1d4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
width: 700rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.order-id{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.user-box{
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
.avatar{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.user-id{
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
.user-info{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 42rpx auto 42rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
333
sub_pages/wallet/recharge/index.vue
Executable file
333
sub_pages/wallet/recharge/index.vue
Executable file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="my-profit">
|
||||
<view class="item">
|
||||
<view class="profit">0</view>
|
||||
<view class="desc">礼币数</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="profit">0</view>
|
||||
<view class="desc">礼物数</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<u-tabs :list="tabs" @click="onChangeTab" lineColor="#ff0000"></u-tabs>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无数据" />
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="show = false"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import * as LogApi from '@/api/balance-log.js'
|
||||
|
||||
const tabs = [{
|
||||
name: `收到礼物`,
|
||||
value: 'delivery'
|
||||
},{
|
||||
name: `赠送礼物`,
|
||||
value: 'delivery'
|
||||
}]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs,
|
||||
list: [],
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {
|
||||
// 查询报餐信息
|
||||
this.getLog()
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getLog() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd
|
||||
} = this
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
LogApi.pageBalanceLog({
|
||||
userId,
|
||||
createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
limit: 50,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.createTimeStart = date[0]
|
||||
this.createTimeEnd = date[date.length - 1]
|
||||
this.getLog()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tabs {
|
||||
width: 600rpx;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 42rpx auto 42rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
351
sub_pages/wallet/recharge/order.vue
Executable file
351
sub_pages/wallet/recharge/order.vue
Executable file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<view class="my-profit">
|
||||
<view class="item" @click="$push('pages/wallet/recharge/index')">
|
||||
<view class="profit">{{ userInfo.balance.toFixed(2) }}</view>
|
||||
<view class="desc">
|
||||
我的余额
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="$push('pages/wallet/gift/gift')">
|
||||
<view class="profit">{{ userInfo.points }}</view>
|
||||
<view class="desc">礼物收益</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-date" @click="openCalendar">
|
||||
<u-icon class="icon" size="22" name="calendar"></u-icon>
|
||||
<text v-if="createTimeStart && createTimeEnd">{{ createTimeStart }} ~ {{ createTimeEnd }}</text>
|
||||
</view>
|
||||
<view class="order" v-for="(item,index) in list" :key="index">
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name" v-if="item.scene == 10">用户充值</text>
|
||||
<text class="name" v-if="item.scene == 20">用户消费</text>
|
||||
<text class="name" v-if="item.scene == 30">管理员操作</text>
|
||||
<text class="name" v-if="item.scene == 40">订单退款</text>
|
||||
<text class="selling-point">{{ item.createTime }}</text>
|
||||
<text class="selling-point" v-if="item.scene == 30">备注：{{ item.remark }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<text class="add-price"
|
||||
v-if="item.scene == 10 || item.scene == 40">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-if="item.scene == 20">-￥{{ item.money }}</text>
|
||||
<block v-if="item.scene == 30">
|
||||
<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
|
||||
</block>
|
||||
<text class="num">￥{{ item.balance }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<empty v-if="!list.length" tips="暂无数据" />
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="closeShow"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import {
|
||||
getUser
|
||||
} from '@/api/user.js'
|
||||
import * as LogApi from '@/api/balance-log.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.getUserInfo()
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {
|
||||
// 查询报餐信息
|
||||
this.getLog()
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getLog() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd
|
||||
} = this
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
LogApi.pageBalanceLog({
|
||||
userId,
|
||||
createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
limit: 50,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.createTimeStart = date[0]
|
||||
this.createTimeEnd = date[date.length - 1]
|
||||
this.getLog()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
closeShow(){
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 42rpx auto 42rpx auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
358
sub_pages/withdraw/log/log.vue
Executable file
358
sub_pages/withdraw/log/log.vue
Executable file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<view class="wallet">
|
||||
<!-- <view class="select-date" @click="openCalendar">
|
||||
<u-icon class="icon" size="22" name="calendar"></u-icon>
|
||||
<text v-if="createTimeStart && createTimeEnd">{{ createTimeStart }} ~ {{ createTimeEnd }}</text>
|
||||
</view> -->
|
||||
<view class="order" v-for="(item,index) in list" :key="index">
|
||||
<view class="fenqi">
|
||||
<block>
|
||||
<view class="item">
|
||||
<view class="goods-info">
|
||||
<view class="goods-name">
|
||||
<text class="name" v-if="item.applyStatus == 10">待审核</text>
|
||||
<text class="name" v-if="item.applyStatus == 20">审核通过</text>
|
||||
<text class="name" v-if="item.applyStatus == 30">已驳回</text>
|
||||
<text class="name" v-if="item.applyStatus == 40">已打款</text>
|
||||
<text class="selling-point">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="goods-price">
|
||||
<!-- <text class="add-price"
|
||||
v-if="item.scene == 10 || item.scene == 40">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-if="item.scene == 20">-￥{{ item.money }}</text>
|
||||
<block v-if="item.scene == 30">
|
||||
<text class="add-price" v-if="item.money > 0">+￥{{ item.money }}</text>
|
||||
<text class="sub-price" v-else>-￥{{ Math.abs(item.money) }}</text>
|
||||
</block> -->
|
||||
<text class="num">￥{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" text="暂无提现记录" v-if="list.length == 0">
|
||||
</u-empty>
|
||||
<u-calendar :show="show" mode="range" :minDate="minDate" @confirm="changeDate"
|
||||
@close="closeShow"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
dateFormat
|
||||
} from '@/utils/util.js'
|
||||
import store from '@/store';
|
||||
import * as LogApi from '@/api/merchant-withdraw.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
record: {},
|
||||
userInfo: {},
|
||||
deliveryTime: dateFormat('YYYY-mm-dd', new Date()),
|
||||
createTimeStart: null,
|
||||
createTimeEnd: null,
|
||||
// 正在加载中
|
||||
isLoading: true,
|
||||
// 当前选择的设备ID
|
||||
show: false,
|
||||
minDate: '',
|
||||
isLogin: false,
|
||||
merchant: {
|
||||
// 总收益
|
||||
totalMoney: 0.00,
|
||||
// 当前可提现金额
|
||||
money: 0.00,
|
||||
// 今日收益
|
||||
todayMoney: 0.00,
|
||||
// 本月收益
|
||||
monthMoney: 0.00
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
const app = this
|
||||
app.minDate = uni.$u.timeFormat(new Date().getTime() - 2592000000 * 2, 'yyyy-mm-dd');
|
||||
},
|
||||
onShow() {
|
||||
// 查询报餐信息
|
||||
this.getLog()
|
||||
},
|
||||
methods: {
|
||||
// 获取购物车数据
|
||||
getLog() {
|
||||
const app = this
|
||||
const {
|
||||
deliveryTime,
|
||||
createTimeStart,
|
||||
createTimeEnd
|
||||
} = this
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
LogApi.pageMerchantWithdraw({
|
||||
userId,
|
||||
createTimeStart: createTimeStart ? createTimeStart + ' 00:00:00' : '',
|
||||
createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
|
||||
limit: 50,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
app.list = res.data.list
|
||||
})
|
||||
},
|
||||
|
||||
getUserInfo() {
|
||||
const app = this
|
||||
uni.getSystemInfo({
|
||||
success(data) {
|
||||
if (data) {
|
||||
app.statusBarHeight = data.statusBarHeight + 50
|
||||
}
|
||||
}
|
||||
})
|
||||
getUser().then(res => {
|
||||
if (res.code == 0 && res.data.username != 'www') {
|
||||
app.userInfo = res.data
|
||||
app.isLogin = true
|
||||
} else {
|
||||
app.isLogin = false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
getMerchant(){
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(res => {
|
||||
console.log("res: ",res);
|
||||
if(res.data.length > 0){
|
||||
app.merchant = res.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(date) {
|
||||
console.log("date: ", date[0]);
|
||||
console.log("date.lenght: ", date.length);
|
||||
// this.deliveryTime = date.result
|
||||
this.createTimeStart = date[0]
|
||||
this.createTimeEnd = date[date.length - 1]
|
||||
this.getLog()
|
||||
this.show = false
|
||||
},
|
||||
change(e) {
|
||||
console.log(e);
|
||||
},
|
||||
openCalendar() {
|
||||
this.show = true
|
||||
},
|
||||
closeShow(){
|
||||
this.show = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wallet {
|
||||
background-color: #f3f3f3;
|
||||
padding-top: 42rpx;
|
||||
}
|
||||
|
||||
.order {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
width: 700rpx;
|
||||
margin: 20rpx auto;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fenqi {
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
padding: 10rpx 0;
|
||||
|
||||
.image {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: 700rpx;
|
||||
margin-left: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
max-width: 300rpx;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 2; //行数
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
|
||||
.selling-point {
|
||||
max-width: 400rpx;
|
||||
color: #999999;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden; //溢出内容隐藏
|
||||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||||
display: -webkit-box; //特别显示模式
|
||||
-webkit-line-clamp: 1; //行数
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.add-price {
|
||||
color: #27b900;
|
||||
}
|
||||
|
||||
.sub-price {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-date {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
padding: 12rpx 0;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.on-buy {
|
||||
background-color: #804002;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
width: 700rpx;
|
||||
height: 260rpx;
|
||||
margin: 30rpx auto;
|
||||
border-radius: 24rpx;
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
|
||||
.user-info {
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
|
||||
.avatar-img {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-left: 15rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
border: 4rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-log {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
top: 50rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 20rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 我的收益
|
||||
.my-profit {
|
||||
background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
margin: 0 auto;
|
||||
padding: 22rpx 0;
|
||||
width: 700rpx;
|
||||
height: 140rpx;
|
||||
box-shadow: 0 1rpx 5rpx 0px #eaebec;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.item {
|
||||
text-align: center;
|
||||
|
||||
.profit {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #d8d9dc;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
291
sub_pages/withdraw/withdraw.vue
Normal file
291
sub_pages/withdraw/withdraw.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="form">
|
||||
<u--form :model="form" ref="uForm" :rules="rules" label-width="170rpx">
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="提现金额" prop="amount" borderBottom>
|
||||
<u-input v-model="form.amount" maxlength="20" :disabled="isEdit"
|
||||
:placeholder="`可提现金额￥${form.money ? form.money : 0}`" />
|
||||
</u-form-item>
|
||||
<u-form-item label="服务费" prop="serviceFee" borderBottom v-if="form.amount > 0">
|
||||
<span class="service-fee">本次提现服务费￥{{ form.amount * 0.04 }}, 实际到账￥{{form.amount - (form.amount * 0.04)}}</span>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<u-form-item label="打款方式" prop="payType" borderBottom @click="showPayType">
|
||||
<span class="service-fee">{{ payType }}</span>
|
||||
</u-form-item>
|
||||
<u-form-item label="支付宝姓名" prop="alipayName" borderBottom v-if="payType == '支付宝'">
|
||||
<u-input v-model="form.alipayName" maxlength="20" :disabled="isEdit" placeholder="支付宝姓名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="支付宝账号" prop="alipayAccount" borderBottom v-if="payType == '支付宝'">
|
||||
<u-input v-model="form.alipayAccount" maxlength="20" :disabled="isEdit" placeholder="支付宝账号" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" prop="bankName" borderBottom v-if="payType == '银行卡'">
|
||||
<u-input v-model="form.bankName" maxlength="20" :disabled="isEdit" placeholder="银行开户名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行开户名" prop="bankAccount" borderBottom v-if="payType == '银行卡'">
|
||||
<u-input v-model="form.bankAccount" maxlength="20" :disabled="isEdit" placeholder="银行卡开户名" />
|
||||
</u-form-item>
|
||||
<u-form-item label="银行卡号" prop="bankCard" borderBottom v-if="payType == '银行卡'">
|
||||
<u-input v-model="form.bankCard" maxlength="20" :disabled="isEdit" placeholder="银行卡号" />
|
||||
</u-form-item>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
|
||||
<view class="block">
|
||||
<view class="desc-title">提现说明：</view>
|
||||
<view class="desc">提交成功后可<text @click="$push('sub_pages/withdraw/log/log')">点击这里</text>查看打款进度</view>
|
||||
<!-- <view class="photo">
|
||||
<image src="https://file.wsdns.cn/20230619/29a8c790211a46529fbbb66ee8d223d5.png"
|
||||
mode="widthFix"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</u--form>
|
||||
</view>
|
||||
<view class="btn-wrapper">
|
||||
<u-button :text="submitText" color="linear-gradient(to bottom, #010002, #681752)" :disabled="isEdit"
|
||||
shape="circle" @click="handleSubmit()"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as MerchantApi from '@/api/merchant.js'
|
||||
|
||||
const userId = uni.getStorageSync('userId')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
amount: undefined,
|
||||
alipayName: '',
|
||||
alipayAccount: '',
|
||||
payType: 20, // 打款方式 10微信 20支付宝 30银行卡
|
||||
},
|
||||
payType: '支付宝',
|
||||
fileList1: [],
|
||||
disabled: false,
|
||||
// 临时图片 (用于上传)
|
||||
tempFile: null,
|
||||
isEdit: false,
|
||||
rules: {
|
||||
'alipayName': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写支付宝姓名',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'alipayAccount': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写支付宝账号',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'amount': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写提现金额',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
},
|
||||
submitText: '提交申请'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getData()
|
||||
},
|
||||
onReady() {
|
||||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||||
this.$refs.uForm.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
const app = this
|
||||
MerchantApi.listMerchant({
|
||||
userId
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
app.form = res.data[0]
|
||||
}
|
||||
})
|
||||
},
|
||||
showPayType() {
|
||||
const app = this
|
||||
if(this.isEdit == true){
|
||||
return false;
|
||||
}
|
||||
const itemList = ['支付宝','银行卡'];
|
||||
uni.showActionSheet({
|
||||
itemList,
|
||||
success: ({tapIndex}) => {
|
||||
app.payType = itemList[tapIndex]
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
console.log("event: ", event);
|
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result.url,
|
||||
thumb: result.thumbUrl
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
UploadApi.uploadFile({
|
||||
filePath: url,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
header: {
|
||||
Authorization: uni.getStorageSync('AccessToken')
|
||||
},
|
||||
}).then(result => {
|
||||
setTimeout(() => {
|
||||
resolve(result.data)
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
console.log("err: ", err);
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
if (this.isEdit == true) {
|
||||
return false;
|
||||
}
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 确认修改
|
||||
async handleSubmit() {
|
||||
const app = this
|
||||
const { form,payType } = this
|
||||
if(form.amount > form.money){
|
||||
app.$error('可提现金额不足')
|
||||
return false
|
||||
}
|
||||
if(form.amount == 0){
|
||||
app.$error('提现金额不正确')
|
||||
return false
|
||||
}
|
||||
if(payType == '支付宝'){
|
||||
app.form.payType = 20
|
||||
}
|
||||
if(payType == '银行卡'){
|
||||
app.form.payType = 30
|
||||
}
|
||||
if (app.disabled === true) return
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: "正在验证"
|
||||
})
|
||||
app.$refs.uForm.validate().then(res => {
|
||||
MerchantApi.addWithdraw(app.form).then(result => {
|
||||
app.$success('提交成功')
|
||||
this.getData()
|
||||
|
||||
}).catch(err => {
|
||||
app.$error(err.message)
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
.form {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: auto;
|
||||
width: 700rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.upload {
|
||||
width: 360rpx;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
|
||||
.id-card-upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
color: #cccccc;
|
||||
border: 5rpx dashed #d9d9d9;
|
||||
border-radius: 20rpx;
|
||||
width: 360rpx;
|
||||
height: 220rpx;
|
||||
|
||||
.photograph {
|
||||
width: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desc-title {
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #999999;
|
||||
padding-bottom: 20rpx;
|
||||
text {
|
||||
color: #7f006f;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background: none;
|
||||
width: 360rpx;
|
||||
margin: 50rpx auto;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.service-fee{
|
||||
line-height: 2rem;
|
||||
color: #7f006f;
|
||||
}
|
||||
.pay-type{
|
||||
line-height: 2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user