453530270@qq.com
2 years ago
4 changed files with 452 additions and 156 deletions
@ -0,0 +1,194 @@ |
|||
{ |
|||
"title":"隐私政策", |
|||
"content":' <p class="trade_p"> |
|||
感谢您选择全国文化大数据交易中心（以下简称“我们”）的服务。我们深知个人信息对您的重要性，因此我们将按照法律法规及行业标准的规定及要求采取有效的安全保障措施，力求保障您个人信息的安全可控。 |
|||
</p> |
|||
<p class="trade_p"> |
|||
请您在<span class="weight_bold decora_line">注册和</span> 使用我们的服务前<span |
|||
class="weight_bold decora_line">，</span>仔细阅读<span |
|||
class="weight_bold">并</span><span |
|||
class="weight_bold decora_line">在</span><span |
|||
class="weight_bold">充分理解</span>《隐私政策》<span |
|||
class="weight_bold decora_line">的基础上做出相应的选择。有关您个人信息权益的重要条款</span>我们会以加粗、<span |
|||
class="weight_bold">加下划线</span>的形式予以提示<span class="weight_bold decora_line">，请特别关注。</span>若您<span |
|||
class="weight_bold decora_line">注册和</span>使用我们的服务，则表示您<span |
|||
class="weight_bold decora_line">已充分理解本政策，完全同意和</span>认可我们在政策中所表述的内容，同意我们按照本隐私政策处理您的个人信息。 |
|||
</p> |
|||
<p class="trade_p">本隐私政策适用于您通过我们的应用程序和应用程序编程接口（API）方式来访问和使用我们的服务。</p> |
|||
<p class="trade_p_nobold">您将通过本政策了解到以下内容：</p> |
|||
<p class="trade_p_nobold">1、我们如何收集您的个人信息；</p> |
|||
<p class="trade_p_nobold">2、我们如何使用您的个人信息；</p> |
|||
<p class="trade_p_nobold">3、我们如何存储个人信息；</p> |
|||
<p class="trade_p_nobold">4、我们如何使用Cookie和同类技术；</p> |
|||
<p class="trade_p_nobold">5、我们如何共享、转让、公开披露您的个人信息；</p> |
|||
<p class="trade_p_nobold">6、我们如何保护您的个人信息；</p> |
|||
<p class="trade_p_nobold">7、您对个人信息的管理；</p> |
|||
<p class="trade_p_nobold">8、隐私政策的适用及更新；</p> |
|||
<p class="trade_p_nobold">9、如何联系我们。</p> |
|||
<p class="trade_bold">1、我们如何收集您的个人信息</p> |
|||
<p class="trade_p">我们会遵循隐私政策收集、使用您的信息，但不会仅因您同意本隐私政策超范围收集个人信息。</p> |
|||
<p class="trade_p"> |
|||
当您使用或开启相关功能或使用服务时，为实现功能、服务所必需，我们会收集、使用相关信息。除非是为实现基本业务功能或根据法律法规要求所必需的必要信息，您均可以拒绝提供且不影响其他功能或服务。 |
|||
</p> |
|||
<p class="trade_p"> |
|||
出于本政策以下目的，为实现我们服务的功能，我们会遵循合法、正当、必要的原则，收集您的个人信息，帮助您成为我们的用户，以期您能够获得良好的服务体验。 |
|||
</p> |
|||
<p class="trade_p"> |
|||
请注意，无法与任何特定个人直接建立联系数据（如单独的设备信息、日志信息等），不属于个人信息。如果我们将无法与任何特定个人建立联系的数据与其他信息结合用于识别自然人个人身份，或者将其与个人信息结合使用，则在结合使用期间，此类信息将被视为个人信息。 |
|||
</p> |
|||
<p class="trade_p_nobold">1.1基本业务功能</p> |
|||
<p class="trade_p_nobold"> |
|||
1.1.1用户注册和认证 |
|||
</p> |
|||
<p class="trade_p"> |
|||
在您注册并认证成为我们的用户时，需要提供《用户注册协议》要求的资料和授权文件，其中手机号码（账号绑定手机号码）、短信验证码、姓名（个人账号）、公司名称（机构账号）、登录密码以创建账号；身份证明类型、身份证明号码（个人账号提供个人身份证号码，机构账号提供机构组织代码）、身份证明文件复印件（个人账号提供个人身份证复印件，机构账号提供机构组织代码复印件）、法人名称（机构账号认证时提供）、法定代表人身份证号码（机构账号认证时提供）、交易账号银行卡开户行、交易账号银行卡号码（持卡人须与用户名称一致的卡号）等用以认证注册账号类型。 |
|||
</p> |
|||
<p class="trade_p_nobold">1.1.2账户管理。</p> |
|||
<p class="trade_p">我们为您提供账户信息储存、查询、更正、注销、退出功能。</p> |
|||
<p class="trade_bold decora_line"> |
|||
1.1.3日志分析 |
|||
</p> |
|||
<p class="trade_p weight_bold decora_line"> |
|||
我们需要记录您在使用我们服务过程中（或后台运行时）产生的日志信息，日志中将会收集您的使用日期和时间，以及设备信息（您的硬件型号、操作系统版本、使用语言、设备配置、唯一设备标识符、DeviceID、IMEI、MAC地址、IP地址、MEID、UDID）。我们会对日志信息进行分析，用于客户服务、提升用户体验。 |
|||
</p> |
|||
<p class="trade_bold"> |
|||
1.2涉及嵌入第三方代码、插件采集个人信息的目录如下：<span |
|||
class="decora_line">姓名/公司名称、身份证明类型、身份证明号码、身份证明文件复印件、法人名称、法人身份证号码、交易账号银行卡开户行和交易账号银行卡号码等。 |
|||
</span> |
|||
</p> |
|||
<p class="trade_bold">2、我们如何使用您的个人信息</p> |
|||
<p class="trade_p">我们会严格遵守法律法规的规定使用您的个人信息，您的个人信息将被用到以下用途：</p> |
|||
<p class="trade_bold decora_line"> |
|||
2.1.为您提供安全保障，我们会将您的信息用于身份验证、安全防范、反诈骗监测、存档备份、客户的安全服务等用途，以保护您、其他用户、我们或关联方的合法权益，并记录一些我们认为有风险的链接。 |
|||
</p> |
|||
<p class="trade_bold decora_line"> |
|||
2.2改进我们的服务，我们可能会在符合法律规定并根据您具体授权的情况下收集并使用您的个人信息用于统计分析以形成用户画像，以此改进我们的服务。 |
|||
</p> |
|||
<p class="trade_bold decora_line"> |
|||
2.3其他用途，我们将信息用于本政策未载明的其他用途，或者将基于特定目的收集而来的信息用于其他目的时，会事先征求您的同意。 |
|||
</p> |
|||
<p class="trade_p_nobold">2.4例外情形</p> |
|||
<p class="trade_p">出现下列情形我们无须征得您的授权同意，请您悉知。</p> |
|||
<p class="trade_p_nobold">2.4.1与国家安全、国防安全有关的；</p> |
|||
<p class="trade_p_nobold">2.4.2与公共安全、公共卫生、重大公共利益有关的；</p> |
|||
<p class="trade_p_nobold">2.4.3与犯罪侦查、起诉、审判和判决执行等有关的；</p> |
|||
<p class="trade_p_nobold">2.4.4出于维护个人信息主体或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；</p> |
|||
<p class="trade_p_nobold">2.4.5所收集的个人信息是个人信息主体自行向社会公众公开的；</p> |
|||
<p class="trade_p_nobold">2.4.6从合法公开披露的信息中收集的您的个人信息的，如合法的新闻报道、政府信息公开等渠道；</p> |
|||
<p class="trade_p_nobold">2.4.7根据您的要求签订合同所必需的；</p> |
|||
<p class="trade_p_nobold">2.4.8用于维护所提供的服务的安全稳定运行所必需的，例如发现、处置服务的故障；</p> |
|||
<p class="trade_p_nobold">2.4.9为合法的新闻报道所必需的；</p> |
|||
<p class="trade_p_nobold">2.4.10学术研究机构基于公共利益开展统计或学术研究所必要，且对外提供学术研究或描述的结果时，对结果中所包含的个人信息进行去标识化处理的；</p> |
|||
<p class="trade_p_nobold">2.4.11法律法规规定的其他情形。</p> |
|||
<p class="trade_bold">3、我们如何存储个人信息</p> |
|||
<p class="trade_p_nobold">3.1存储地点</p> |
|||
<p class="trade_p"> |
|||
我们依照法律法规的规定，将在境内运营过程中收集和产生的您的个人信息存储于中华人民共和国境内。目前，我们不会将上述信息传输至境外，如果我们向境外传输，我们将会遵循相关国家规定或者征求您的同意。 |
|||
</p> |
|||
<p class="trade_p_nobold">3.2存储期限</p> |
|||
<p class="trade_p"> |
|||
我们仅在为提供服务之目的所必需的期间内保留您的个人信息。在您未注销账户期间，我们会保留相关信息。超出必要期限后，我们将对您的个人信息进行删除或匿名化处理，但法律法规另有规定的除外。 |
|||
</p> |
|||
<p class="trade_p"> |
|||
如我们停止我们的服务时，我们将及时停止继续收集您个人信息的活动，将停止运营的通知以逐一送达或公告的形式通知您，对所持有的个人信息进行删除或匿名化处理。 |
|||
</p> |
|||
<p class="trade_bold">4、我们如何使用Cookie和同类技术</p> |
|||
<p class="trade_p_nobold">4.1Cookie</p> |
|||
<p class="trade_p weight_bold decora_line"> |
|||
为确保网站正常高效运转、为您获得更轻松的访问体验，我们会在您的计算机或移动设备上存储相关信息：这些信息可能是Cookie或您的浏览器或关联应用程序提供的其他本地存储。Cookie会帮助您在后续访问我们网站时调用您的信息，简化您填写个人信息（例如一键登录等）的流程；为您提供安全购物的偏好设置；帮助您优化对广告的选择与互动；保护您的数据安全等。我们不会将Cookie用于本隐私政策所述目的之外的任何用途。您可根据自己的偏好管理或删除Cookie，但拒绝我们的Cookie在某些情况下可能会影响您安全访问网站和使用我们提供的服务。 |
|||
</p> |
|||
<p class="trade_p_nobold">4.2同类技术</p> |
|||
<p class="trade_p weight_bold decora_line"> |
|||
除Cookie外，我们还会在网站上使用网站信标和像素标签等其他同类技术。它们可以帮助网站计算浏览网页的用户或访问某些Cookie。 |
|||
</p> |
|||
<p class="trade_bold">5、我们如何共享、转让、公开披露您的个人信息；</p> |
|||
<p class="trade_p_nobold">5.1共享</p> |
|||
<p class="trade_bold decora_line">5.1.1我们会严格遵照法律法规的规定使用您的个人信息，非因法定或者约定情形，我们不会与第三方共享您的个人信息。</p> |
|||
<p class="trade_bold decora_line"> |
|||
5.1.2我们可能将您的手机号码、地理位置、共享给您同意第三方，以便第三方可以更好地为您提供服务。上述共享的行为我们将在您明示同意且知悉该具体第三方的情况下进行。 |
|||
</p> |
|||
<p class="trade_bold decora_line">但是，若共享的信息无法与任何特定个人建立联系的除外。</p> |
|||
<p class="trade_bold decora_line"> |
|||
5.1.3我们将审慎评估第三方使用共享信息的目的，对这些合作方的安全保障能力进行综合评估，并要求其遵循合作法律协议。我们会对合作方获取信息的软件工具开发包（SDK）、应用程序接口（API）进行严格的安全监测，以保护数据安全。我们接入的相关第三方开发包（SDK）、应用程序接口（API）的目录包括但不限于： |
|||
</p> |
|||
<p class="trade_bold decora_line">订单支付（后台）接口</p> |
|||
<p class="trade_bold decora_line">接收支付报告接口</p> |
|||
<p class="trade_bold decora_line">批量代付接口</p> |
|||
<p class="trade_bold decora_line">接收代付结果报告接口</p> |
|||
<p class="trade_bold decora_line">获取支行信息接口</p> |
|||
<p class="trade_bold decora_line">线上开票接口</p> |
|||
<p class="trade_bold decora_line">文化数据服务中心用户接口</p> |
|||
<p class="trade_bold decora_line">底层关联集成系统标的数据接口</p> |
|||
<p class="trade_p_nobold">5.2转让</p> |
|||
<p class="trade_p"> |
|||
我们会严格遵照法律法规的规定使用您的个人信息，非因法定或者约定情形我们不会向第三方转让您的个人信息，但以下情形除外： |
|||
</p> |
|||
<p class="trade_p_nobold"> |
|||
5.2.1在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息。 |
|||
</p> |
|||
<p class="trade_p_nobold"> |
|||
5.2.2业务转让：在我们及我们的关联方之间发生合并、收购、资产转让等交易导致向第三方分享您的个人信息时，我们将通过推送通知、公告等形式告知您相关情形，我们会要求受让您个人信息的公司、组织继续接受本隐私政策的约束，否则,我们将要求该公司、组织重新征求您的授权同意。 |
|||
</p> |
|||
<p class="trade_p_nobold">5.3信息公开披露</p> |
|||
|
|||
<p class="trade_p"> |
|||
我们仅会在以下情况下，且采取符合业界标准的安全防护措施的前提下，才可能公开披露您的个人信息： |
|||
</p> |
|||
|
|||
<p class="trade_p_nobold">5.3.1根据您的需求，在您明确同意的披露方式下披露您所指定的个人信息。</p> |
|||
<p class="trade_p_nobold"> |
|||
5.3.2根据法律、法规的要求、强制性的行政执法或司法要求所必须提供您个人信息的情况下，我们可能会依据所要求的个人信息类型和披露方式公开披露您的个人信息。在符合法律法规的前提下，当我们收到上述披露信息的请求时，我们会要求必须出具与之相应的法律文件，如传票或调查函。 |
|||
</p> |
|||
<p class="trade_p_nobold"> |
|||
5.4共享、转让、公开披露个人信息时事先征得授权同意的例外 |
|||
</p> |
|||
<p class="trade_p_nobold"> |
|||
请您悉知，以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意: |
|||
</p> |
|||
<p class="trade_p_nobold">5.4.1与国家安全、国防安全有关的；</p> |
|||
<p class="trade_p_nobold">5.4.2与公共安全、公共卫生、重大公共利益有关的；</p> |
|||
<p class="trade_p_nobold">5.4.3与犯罪侦查、起诉、审判和判决执行等有关的；</p> |
|||
<p class="trade_p_nobold">5.4.4出于维护您或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；</p> |
|||
<p class="trade_p_nobold">5.4.5其他维护公共利益的情形，例如您的信用评价信息需要被公开共享；</p> |
|||
<p class="trade_p_nobold">5.4.6您自行向社会公众公开的个人信息；</p> |
|||
<p class="trade_p_nobold">5.4.7从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道。</p> |
|||
<p class="trade_bold">6、我们如何保护您的个人信息</p> |
|||
<p class="trade_p_nobold">6.1安全防护技术，我们已采取符合业界标准、合理可行的安全防护措施保护您提供的个人信息安全，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。</p> |
|||
<p class="trade_p_nobold">6.2完善的信息安全管理制度，我们建立专门的管理制度、流程和组织确保信息安全。例如，我们严格限制访问信息的人员范围，要求他们遵守保密义务，并进行审查。</p> |
|||
<p class="trade_p_nobold"> |
|||
6.3请您知悉并理解，互联网并非绝对安全的环境，我们强烈建议您通过安全方式、使用复杂密码，协助我们保证您的账号安全。如您发现自己的个人信息泄密，尤其是您的账户或密码发生泄露，请您立即根据本隐私政策中提供的联系方式联络们，以便我们采取相应措施。 |
|||
</p> |
|||
<p class="trade_p_nobold">6.4我们将不定期更新并公开安全风险、个人信息安全影响评估报告等有关内容，您可以通过我们公布的官方网站获取相关信息。</p> |
|||
<p class="trade_p_nobold"> |
|||
6.5如不幸发生个人信息安全事件，我们将按照法律法规的要求，及时向您告知安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。同时，我们还将按照监管部门要求，主动上报个人信息安全事件的处置情况。 |
|||
</p> |
|||
<p class="trade_bold">7、您对个人信息的管理</p> |
|||
<p class="trade_p_nobold">7.1个人信息管理编辑。</p> |
|||
<p class="trade_p_nobold">您可以通过以下方式实现：<span class="decora_line">个人中心</span></p> |
|||
<p class="trade_p_nobold">7.2个人信息删除。</p> |
|||
<p class="trade_p_nobold">在以下情形中，您可以向我们提出删除个人信息的请求：</p> |
|||
<p class="trade_p_nobold">7.2.1如果我们处理个人信息的行为违反法律法规；</p> |
|||
<p class="trade_p_nobold">7.2.2如果我们收集、使用您的个人信息，却未征得您的明确同意；</p> |
|||
<p class="trade_p_nobold">7.2.3如果我们处理个人信息的行为严重违反了与您的约定；</p> |
|||
<p class="trade_p_nobold">若我们决定响应您的删除请求，我们还将同时尽可能通知从我们处获得您的个人信息的主体，要求其及时删除，除非法律法规另有规定，或这些主体获得您的独立授权。当您从我们的服务中删除信息后，我们可能不会立即从备份系统中删除相应的信息，但会在备份更新时删除这些信息。 |
|||
</p> |
|||
<p class="trade_p_nobold">7.3注销账号。</p> |
|||
<p class="trade_p"> |
|||
您可以进行账户注销申请，在您注销账户前，我们将验证您的个人身份、安全状态、设备信息等。您知悉并理解，注销账户的行为是不可逆的行为，当您注销账户后，我们将根据适用的法律法规的要求尽快使其匿名或删除您的个人信息，但法律法规作出例外规定，我们会严格按照要求执行。 |
|||
</p> |
|||
<p class="trade_p_bold">8、隐私政策的适用及更新</p> |
|||
<p class="trade_p_nobold">8.1隐私政策的适用</p> |
|||
<p class="trade_p weight_bold"> |
|||
如果我们没有特别说明，本隐私政策适用于我们全部的服务。如我们发布的特定隐私政策与本政策存在不一致时，请以特定隐私政策为准。 |
|||
</p> |
|||
<p class="trade_p_nobold">8.2隐私政策的更新</p> |
|||
<p class="trade_p weight_bold"> |
|||
根据我们提供服务的更新情况，我们可能适时调整隐私政策，但未经您明确同意，我们不会削减您依据本隐私政策所应享的权利。如该等变更会导致您在本政策项下权利的实质减损，我们将在变更生效前，通过在页面显著位置提示或向您发送电子邮件的方式通知您。在该种情况下，若您继续使用我们的服务，我们履行法定的通知义务和程序后，即视为您接受隐私协议。 |
|||
</p> |
|||
<p class="trade_bold">9、如何联系我们</p> |
|||
<p class="trade_p">如果您对本隐私政策有疑问或者建议，请通过以下方式与我们联系：</p> |
|||
<p class="trade_p_nobold">深圳文化产权交易所</p> |
|||
<p class="trade_p_nobold">电话：0755-88266839 </p> |
|||
<p class="trade_p_nobold">邮箱：szwenjiaosuo@126.com</p> |
|||
<p class="trade_p_nobold">地址：深圳市福田区福田街道滨河大道5008号</p>' |
|||
} |
|||
@ -1,174 +1,266 @@ |
|||
<template> |
|||
<wh-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode" |
|||
:maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow" |
|||
buyNowText="立即购买" /> |
|||
<!-- <popup :popurl="popurl"></popup> --> |
|||
<view class="whpopup"catchtouchmove="true" :class="getValue()? 'show' : 'none'" |
|||
@click.stop="stop" @touchmove.stop.prevent="moveHandle"> |
|||
<view class="mask"></view> |
|||
<view class="layer"> |
|||
<view class="specification-wrapper"> |
|||
<scroll-view class="specification-wrapper-content" scroll-y="true"> |
|||
<!-- 隐私政策 --> |
|||
<privacy></privacy> |
|||
</scroll-view> |
|||
<!-- 关闭按钮 --> |
|||
<view class="close" @click="close('close')" v-if="showClose != false"> |
|||
<image class="close-item" :src="closeImage"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { setCartTotalNum } from '@/core/app' |
|||
import * as CartApi from '@/api/cart' |
|||
// import GoodsSkuPopup from '@/components/goods-sku-popup' |
|||
import WhPopup from '@/components/wh-popup' |
|||
import Popup from '@/components/popup/popup' |
|||
import privacy from '@/pages/help/private' |
|||
|
|||
export default { |
|||
components: { |
|||
WhPopup |
|||
}, |
|||
model: { |
|||
prop: 'value', |
|||
event: 'input' |
|||
"popup":Popup, |
|||
privacy |
|||
}, |
|||
|
|||
props: { |
|||
// true 组件显示 false 组件隐藏 |
|||
value: { |
|||
Type: Boolean, |
|||
default: false |
|||
}, |
|||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买 |
|||
skuMode: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
// 商品详情信息 |
|||
goods: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
popurl:{ |
|||
Type:String, |
|||
default:"" |
|||
}, |
|||
// 是否显示右上角关闭按钮 |
|||
showClose: { |
|||
Type: Boolean, |
|||
default: true |
|||
}, |
|||
// 关闭的x 图像 |
|||
closeImage: { |
|||
Type: String, |
|||
default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEyUlEQVR42sSZeWwNURTGp4OqtBo7sSXELragdkpQsRRJ1Zr4hyJiJ9YgxNIg1qANiT+E1i5IY0kVVWtQEbuEKLFGUSH27/ANN5PXmTvzupzkl/tm8t6b7517lnvvC0lKSjJ8WmnQAUSDFqABqALKgl8gD7wE90E2SAeXwFf1SxISErQeVtKHwCgwFsSDSIf3hYFKoCkYDBaDdyAViHdueHmoF6FtwDLQ23b/E7gM7oIcejIERIDaoBFoC8qA8mA8SQNz6W1XC9GY+nCQCCYAk/c+gF0gBZwH312+IxR0BCPBUIaH2A+wHsxHCHxx+gLT5QGN6a2JfG8uvVCDws9oiDQYlxkMGfHyQvARlADTwcXk5OT6foV2kS8ATXidymlcyen1a/Jjl9IJh3hPkjELYqO8Cu0KjjNZvtETw5jFBWXPmGSTGQKSeOn5iQ0kVLL0CINfPNcPbDMKyRCbGzEMBJ+ZD8cChYFdqGTqfsWT8otPGoVsEHsMwxDFs3shNsxJ6BrQ0Po8OGUUkVHsNCVml+cntB1jUWwn2GEUsTEMrASbDK+2CCQ0kYX6nfLLisMmKqUr0S60M+jG10vAm+JSCa8+x7CKlzHwaktV6DiObzUzPJIxFO1BQ12wGtTReO9GetVgY/kjNJzZbcWmTjHfxw51AsRqvL8eOAtmsJuFu3g1l+1ZLB5eDTVZ3K0P7tL0TkWOpSg61kVkBtuuNRthGs+wtJST5aQI7cEbkkRXNYVKgX6kIdYuUhYzMQwxN8tiExCLFqHNeSF9/aem0BzGp5PYQCJ7c/Gsk1RfuSD6U1dNpcDf9ZigTmKbMRZ9iVTsHscGJluW2FMf1SSQWGnBmaB6kCJVTVVNJZE++Cx9drEllS1KMCINpURFmEbBWA63Fz9s95cGIdJgp/zXmT4pZcOvSUzuZttTbblmnc3PIjjmidDXvKgdhMh0JdbzuCjWrbNOVovjS5P7bkPJ/mBESkz2BO0166ybNeJ431S2q+01NntuIq3E0amzjiZtk9tssWyTDzO4525bACK9NAUn68TtkNhpEXpOSagRml+S6iLSSeweHv242Qhl13rRyvoDvDlKyTQny/ZQJ+1iH7vVbEx7OR5UiKVIO7VicgvHCtwrudloMIV7/0uadVYW57O4Wvvi8v4pymlKkrpwvsDeLLZAY2pkwbAB3PSQfC+4cH7l4k1ZH8zkZRq8ecO+Z5rN40JJqnXFuGfaxPCTLjcn0OZOpnArXw8HY4paIbw5CcMgXq6HN2/mt6+XGLrN15tBryIUGavMpCTrfKcDCKkAceA9S8nhAOehhSUyhXpkBxxnP4YM1InugP7cBkjBPcqVUWFYCEROxXiQz5JlXV+IfKh7mpfJac+lZ6V87QXVClBkTc7YWsWTPSDyitfzUTlJlj8TbvE6jluDOdwZ+jX57GLO3ADeuyZrDYi86vV81FD2UVGsmT+5Zl0BnkhoseOEaogL46pqO4v/IqUEyalIR4h85BgjHv6+aUWRMbb7EstX6O0cpT1Gco0ry8fWygLDMjmDnQeBt3Qe7uVfkeugDwVLcsVzGsuwLXbV+I63XNAkG5r/hvgRqgqWs6pJPKrsbvz/Q6yyun0w/h6lP+BnzrCpfPMT2L8FGAA7k1GZ/vnaqAAAAABJRU5ErkJggg==" |
|||
}, |
|||
// 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true |
|||
maskCloseAble: { |
|||
Type: Boolean, |
|||
default: true |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
goodsInfo: {} |
|||
// goodsInfo: {} |
|||
} |
|||
}, |
|||
|
|||
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() |
|||
} |
|||
}, |
|||
|
|||
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 |
|||
}, |
|||
|
|||
// 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) |
|||
} |
|||
|
|||
// 用于阻止冒泡 |
|||
stop() {}, |
|||
moveHandle() { |
|||
//禁止父元素滑动 |
|||
}, |
|||
getValue() { |
|||
// #ifndef VUE3 |
|||
return this.value; |
|||
// #endif |
|||
|
|||
// #ifdef VUE3 |
|||
return this.modelValue; |
|||
// #endif |
|||
}, |
|||
// 监听 - 弹出层收起 |
|||
close(s) { |
|||
let that = this; |
|||
if (new Date().getTime() - that.openTime < 400) { |
|||
return false; |
|||
} |
|||
if (s == "mask") { |
|||
if (that.maskCloseAble !== false) { |
|||
that.$emit("input", false); |
|||
that.$emit("close", "mask"); |
|||
that.$emit("update:modelValue", false); |
|||
} |
|||
} else { |
|||
that.$emit("input", false); |
|||
that.$emit("close", "close"); |
|||
that.$emit("update:modelValue", false); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 弹出层 */ |
|||
.whpopup { |
|||
position: fixed; |
|||
left: var(--window-left); |
|||
right: var(--window-right); |
|||
bottom: var(--window-bottom); |
|||
top: 0; |
|||
// height: 60%; |
|||
z-index: 21; |
|||
overflow: hidden; |
|||
|
|||
&.show { |
|||
display: block; |
|||
|
|||
.mask { |
|||
animation: showPopup 0.2s linear both; |
|||
} |
|||
|
|||
.layer { |
|||
animation: showLayer 0.2s linear both; |
|||
// bottom: var(--window-bottom); |
|||
} |
|||
} |
|||
|
|||
&.hide { |
|||
.mask { |
|||
animation: hidePopup 0.2s linear both; |
|||
} |
|||
|
|||
.layer { |
|||
animation: hideLayer 0.2s linear both; |
|||
} |
|||
} |
|||
|
|||
&.none { |
|||
display: none; |
|||
} |
|||
|
|||
.mask { |
|||
position: fixed; |
|||
left: var(--window-left); |
|||
right: var(--window-right); |
|||
top: 0; |
|||
height: 100%; |
|||
z-index: 1; |
|||
background-color: rgba(0, 0, 0, 0.65); |
|||
} |
|||
|
|||
.layer { |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: absolute; |
|||
left: 5%; |
|||
right: 5%; |
|||
bottom: 20%; |
|||
z-index: 99; |
|||
border-radius: 10rpx 10rpx 0 0; |
|||
background-color: #fff; |
|||
// 设置ios刘海屏底部横线安全区域 |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
|
|||
.specification-wrapper { |
|||
width: 100%; |
|||
padding: 30rpx 25rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.specification-wrapper-content |
|||
{ |
|||
width: 100%; |
|||
max-height: 900rpx; |
|||
min-height: 400rpx; |
|||
|
|||
&::-webkit-scrollbar { |
|||
/*隐藏滚轮*/ |
|||
display: none; |
|||
} |
|||
|
|||
.specification-header { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
position: relative; |
|||
margin-bottom: 40rpx; |
|||
|
|||
} |
|||
|
|||
.specification-content { |
|||
font-weight: 500; |
|||
|
|||
.specification-item { |
|||
margin-bottom: 40rpx; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.close { |
|||
position: absolute; |
|||
top: -30rpx; |
|||
right: 25rpx; |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
text-align: center; |
|||
line-height: 60rpx; |
|||
background-color: #fff; |
|||
border-radius: 50%; |
|||
|
|||
.close-item { |
|||
margin: 10rpx; |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
@keyframes showPopup { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes hidePopup { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes showLayer { |
|||
0% { |
|||
transform: translateY(120%); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateY(0%); |
|||
} |
|||
} |
|||
|
|||
@keyframes hideLayer { |
|||
0% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateY(120%); |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue