Skip to content

dev / lilejia-f2mb-pro

Go to a project
Toggle navigation
Toggle navigation pinning
53687232 by joe
Options

12

1 parent d48fd4cd
Inline Side-by-side
Showing 15 changed files with 1111 additions and 71 deletions
......@@ -5,10 +5,69 @@
<router-link to="/about">About</router-link>
</div>-->
<router-view />
<biz-model v-model="shareModel"></biz-model>
</div>
</template>
<script>
let urls = {
share: "/jiajiaCHApi/app/works/share"
};
import BizModel from "@/components/biz-model/biz-model";
import { httpPost } from "@/api/fetch-api";
export default {
data() {
return {
shareModel: {
show: false,
title: "",
content: "",
index: "default",
btnShow: false,
btnText: "",
confirmHandler: null,
labelBtnShow: false,
labelBtnText: "",
labelBtnHandler: null
}
};
},
methods: {
init() {
// alert("init");
// as.appSuccess = this.shareSuccessHandler;
// as.success = this.shareSuccessHandler;
},
shareSuccessHandler() {
httpPost({ url: urls.share, data: { worksCode: "" } }).then(res => {
if (res == 1) {
let that = this;
this.shareModel.show = true;
this.shareModel.title = "分享成功";
this.shareModel.content = "您已获得一次抽奖机会";
this.shareModel.btnShow = true;
this.shareModel.btnText = "前往抽奖";
this.shareModel.confirmHandler = function() {
that.$router.push("/draw");
};
this.shareModel.labelBtnShow = false;
}
});
}
},
created() {
this.init();
},
components: {
BizModel
}
};
</script>
<style lang="scss">
@import "./styles/support.scss";
......@@ -136,7 +195,6 @@ body {
}
}
.home {
position: relative;
text-align: center;
......
......@@ -20,7 +20,8 @@ let wxOauthUrl = global_wx_oauth_url;
let whileList = [
"https://api.k.wxpai.cn/bizproxy/kdapi/file/upload"
"https://api.k.wxpai.cn/bizproxy/kdapi/file/upload",
"https://api.k.wxpai.cn/bizproxy/kdapi/file/uploadBase64"
]
// let base = COM.baseUrl;
......@@ -133,9 +134,12 @@ export const store = {
localStorage.removeItem("_jiajia_childrenhost_sesson");
},
saveRedirectUrl() {
let current = Router.history.current || {};
if (!Router.history.current || !Router.history.current.path) {
return;
}
let current = Router.history.current;
let data = {
route: current.path,
route: current.path == "/" ? "/index" : current.path,
params: current.query
}
localStorage.setItem("_jiajia_childrenhost_redirect", JSON.stringify(data));
......@@ -152,6 +156,9 @@ export const store = {
if (dataStr) {
let data = JSON.parse(dataStr);
let path = data.route;
if (!path) {
return "/index";
}
let sep = "?";
if (data.params) {
for (let key in data.params) {
......@@ -161,7 +168,7 @@ export const store = {
}
return path;
}
return null;
return "/index";
},
delRedirectUrl() {
localStorage.removeItem("_jiajia_childrenhost_redirect");
......
......@@ -81,6 +81,202 @@
</div>
</div>
<!-- 用户协议-->
<div class="model rule-model" v-if="data.index == 'agreement'">
<div class="model-close" @click="modelCloseHandler"></div>
<div class="model-content">
<div class="model-head-line"></div>
<div class="model-title">用户协议</div>
<div class="text-container">
<div>“立乐家会员服务”（以下简称本服务）是由广州立白企业集团有限公司的官方微信公众号“立乐家”向广大用户提供的会员专享服务。本协议由您和广州立白企业集团有限公司（以下简称本公司）共同签订。</div>
<div>一、声明与承诺</div>
<div>（一）您确认，在您注册成为立乐家会员之前，你已充分阅读、理解并接受本协议的全部内容，一旦您使用本服务，即表示您同意遵循本协议之所有约定。</div>
<div>（二）您同意，本公司有权随时对本协议内容进行单方面的变更，并在官方微信公众号“立乐家”上予以公布，无需另行单独通知您；若您在本协议内容公告变更后继续使用本服务的，表示您已充分阅读、理解并接受修改后的协议内容，也将遵循修改后的协议内容使用本服务；若您不同意修改后的协议内容，您应停止使用本服务。</div>
<div>（三）您声明，在您同意接受本协议并成为立乐家会员时，您是具有中华人民共和国法律规定的完全民事行为能力，能够独立承担法律责任的自然人；未满18周岁的，您只能在父母或监护人的监护参与下使用，本协议内容不受您所属国家或地区的排斥。不具备前述条件的，您应立即终止注册或停止使用本服务。</div>
<div>二、立乐家会员概要</div>
<div>（一）“立乐家会员”：凭此会员身份，您拥有唯一编号及可以修改您的个人信息，并用以查询或计量您的积分以及享受相关优惠。</div>
<div>（二）会员服务：本公司向您提供的会员服务包含：</div>
<div>1．积分累积：在官方微信公众号进行登录、签到、抽奖等任务即可获得积分。</div>
<div>2．积分兑换：在微信公众号“立乐家”的积分商城中，可用积分兑换指定产品或服务。</div>
<div>3. 积分换购：在立乐家积分商城中，可用指定积分额度加钱换购指定产品或服务。</div>
<div></div>
<div>4．会员活动和折扣优惠：立白会员可以在会员日享受会员专享福利及折扣优惠；在您注册信息所填写的生日当天可获得额外生日专享积分；在指定日享受积分升值、特殊任务额外送积分等优惠。</div>
<div>5．使用积分兑换、换购的服务和产品作退货或不签收处理时，兑换、换购的积分将不被退回。</div>
<div>6．积分查询：在您成功注册成为立乐家会员后，您可以在微信端进入立白立乐家会员的会员主页（通过关注微信公众号“立乐家”并点击菜单中的会员中心）查询您的会员积分总量和记录，会员积分记录会即时更新。积分信息以系统登记为准，如您对积分记录有疑问，可以关注微信公众号“立乐家”并点击菜单中客服进行反馈，客服人员将会协助您核实您的积分记录。</div>
<div>7．服务异常处理：您使用本服务时，可能由于不可抗力因素造成本服务无法提供；您需确保您所输入的资料无误，如果因资料错误造成本公司无法及时与您联系的，本公司不承担任何损害赔偿责任。</div>
<div>8．您同意，本公司可以基于运营和安全的需要暂时停止提供、限制会员的部分功能或提供新的功能。在任何功能减少、增加或者变化时，只要您仍然使用本服务，表示您同意本协议或者变更后的协议。</div>
<div>三、立乐家会员账户</div>
<div>（一）注册相关</div>
<div>您同意：</div>
<div>1．同一用户只可以注册一次立乐家会员，同一微信用户、同一手机号视为同一用户。</div>
<div>2．您需要在注册时向本公司提供准确真实的资料，本公司在取得该信息后及时更新您的正确、最新及完整的资料。若有合理理由怀疑您提供的资料错误、不实、过时或不完整的，本公司有权暂停或终止向您提供部分或全部的会员服务，本公司对此不承担任何责任。</div>
<div>3．因您未及时更新资料，导致本服务无法提供或提供时发生任何错误，所引起产生的优惠及积分相关损失由用户自行承担，本公司不承担任何责任。</div>
<div>4．您应对您的立乐家会员账户（包括账户号码和代表账户的二维码）负责，您的会员账户仅限您本人使用，该账户不可转让、不可赠与、不可继承。</div>
<div>（二）账户安全</div>
<div>您将对使用该账户进行的一切操作及言论负完全的责任，您同意：</div>
<div>1．不向其他任何人泄露该账户信息（包括账户号码和代表账户的二维码），亦不将该注册账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。</div>
<div>2．如您发现有他人冒用或盗用您的账户信息或任何其他未经合法授权之情形时，应立即以有效方式通知本公司，要求本公司暂停相关服务。同时，您理解本公司对您的请求采取行动需要合理时间，在此之前，本公司对已执行的指令及或所导致的您的损失不承担任何责任。</div>
<div>四、积分使用规则</div>
<div>为有效保障您使用本服务进行交易时的合法权益，您理解并同意接受以下规则：</div>
<div>1、就您使用本服务，本公司将通过多种方式向您授予积分，积分不具有现金价值，无论您通过何种方式获得积分，您都不得使用积分换取任何现金或货币。</div>
<div>2、积分不具备任何财产性质，并非您拥有所有权的财产，本公司有权单方面调整积分数值或调整本公司的积分规则，并在官方微信公众号“立乐家”公告积分规则变更事项。</div>
<div>3、您仅有权按本公司的积分规则，将所获积分兑换或换购本公司提供的指定的服务或产品。</div>
<div>4、如本公司怀疑您的积分的获得/使用存在欺诈、滥用或其它本公司认为不当的行为，本公司有权随时取消、限制或终止您的积分或积分使用。</div>
<div>5．积分累积规则：您仅在完成本公司指定的积分活动或任务时获得积分，超出本公司指定的范围，则不能获得积分。</div>
<div>6．积分使用规则：您仅在本公司的积分商城中使用积分兑换指定产品或服务，超出指定范围的，积分不能使用。</div>
<div>7．积分有效期：根据获得积分的活动或优惠时间制定，以会员中心规则为准。</div>
<div>8．在官方微信公众号出现系统故障等情况下，您将无法使用积分累计或兑换功能，您所获得的积分将在官方微信公众号系统恢复正常运作后的24小时内更新至您的会员账户。</div>
<div>五、“立乐家会员服务”使用限制</div>
<div>（一）您在使用立乐家会员服务时应遵守中华人民共和国相关法律法规、您所在国家或地区之法令及相关国际惯例，不以任何非法方式使用本服务或用于任何非法目的（包括但不限于用于禁止或限制交易物品的交易）。</div>
<div>（二）您不得利用立乐家会员身份从事侵害他人合法权益之行为，否则应承担所有相关法律责任，因此导致本公司或本公司雇员受损的，您应承担赔偿责任。上述行为包括但不限于：</div>
<div>1．侵害他人名誉权、隐私权、商业秘密、商标权、著作权、专利权等合法权益。</div>
<div>2．违反法定或约定之保密义务。</div>
<div>3．冒用他人名义使用本服务。</div>
<div>4．从事任何可能含有电脑病毒或是可能侵害本服务系统、资料之行为。</div>
<div>5．其他本公司有正当理由认为不适当之行为。</div>
<div>（三）您理解并同意，本公司不对因下述任一情况导致的任何损害赔偿承担责任，包括但不限于利润、商誉、使用、数据等方面的损失或其他损害赔偿 (无论本公司是否已被告知该等损害赔偿的可能性)：</div>
<div>1．本公司有权判断，包含但不限于本公司认为您已经违反本章程的明文规定及精神，暂停、中止或终止向您提供本服务部分或全部功能，并移除您的资料及使用记录。</div>
<div>2． 本公司在发现异常交易行为或有疑义或有违法之虞时，有权不经通知先行暂停或终止该会员账户的使用，并拒绝您使用本服务之部分或全部功能。</div>
<div>3．在必要时，本公司无需事先通知即可终止提供本服务，并暂停、关闭或删除该账户及您账号中所有相关资料及档案，并将您在该立白会员账户内的积分和权益冻结或删除。</div>
<div>六、礼品卡</div>
<div>（一）礼品卡是指本公司发行的一种单用途商业预付卡，可用于用户之间赠送、兑换指定商品。</div>
<div>（二） 礼品卡为不记名卡，不挂失、不用于兑换或提取现金、不具有透支功能。</div>
<div>（三）在“立乐家”礼品卡小程序上购买的礼品卡，会员可通过相关页面登录自己的账户后，将该礼品卡绑定至会员账户。</div>
<div>（四）会员可在账户中同时绑定多张礼品卡，但最高不超过十张，同时可将购买的礼品卡转赠给其他用户，每张礼品卡仅可转赠一次。</div>
<div>（五）礼品卡的有效期以活动规则为准，逾期未进行兑换使用的礼品卡，购卡的金额将会在有效期结束后十五个工作日内退回购卡人的账户上。</div>
<div>（六）在礼品卡被绑定至会员帐户后，为了保护礼品卡使用的安全，您应保证不向他人泄露您的账户信息，否则一切后果自行承担。</div>
<div>（七）我司有权对礼品卡的使用范围、方式或条件等作出补充规定并通过活动规则、常见问题回答、信息推送等方式向购卡人/持卡人作出说明，购卡人及持卡人亦应遵守该等规定。</div>
<div>七、商品信息</div>
<div>本公司保留根据市场价格波动随时修改上线商品价格的权利而无须事先通知。在由于排版错误或价格信息错误的情况下以不正确的价格列出来的商品，本公司有拒绝或取消任何对以不正确的价格列出来的商品所下订单的权利。</div>
<div>八、订单</div>
<div>（一）在您下订单时，请您仔细确认所购商品的名称、数量、规格、尺寸、联系电话、地址、收货人等信息。收货人与用户本人不一致的，收货人的行为和意思表示视为用户的行为和意思表示，用户应对收货人的行为和意思表示承担连带责任。</div>
<div>（二）由于市场变化及各种以合理商业努力难以控制的因素的影响，本公司无法保证您提交的订单信息中希望购买的商品都会有货；如您拟购买的商品缺货，您有权取消订单。</div>
<div>（三）由于合理的或不可避免的送货延迟对您或第三方带来的任何损失，本公司不负任何责任。在这种情况下，本公司将尽快地把任何可预知的延迟情况通知您，并在此时请您选择是否取消订单。</div>
<div>九、系统中断或故障</div>
<div>系统因下列状况无法正常运作，导致您无法使用各项服务时，本公司不承担损害赔偿责任，包括但不限于：</div>
<div>（一）本公司在官方微信公众号“立乐家”上公告的系统停机维护期间。</div>
<div>（二）电信或网络设备出现故障不能进行数据传输的期间。</div>
<div>（三）因台风、地震、海啸、洪水、停电、战争、恐怖袭击等不可抗力之因素，造成本公司系统障碍不能执行业务的期间。</div>
<div>（四）由于黑客攻击、电信部门技术调整或故障、网站升级的问题等原因而造成的服务中断或者延迟的期间。</div>
<div>十、责任范围及责任限制</div>
<div>（一）本公司仅对本协议中列明的责任承担范围负责。</div>
<div>（二）立乐家会员用户信息是由用户本人自行提供的，用户本人应保证其信息之真实性、有效性、完整性和及时性，本公司对此不负任何责任。</div>
<div>（三）本服务之合作单位，所提供之服务品质及内容等由该合作单位自行负责。</div>
<div>（四）您经由本服务之使用下载或取得任何资料，应由您自行考量且自负风险，因资料之下载或取得而导致您电脑系统的任何损坏或资料流失，您应负完全责任。</div>
<div>（五）您自本公司及本公司工作人员或经由本服务取得之建议和资讯，无论其为书面或口头形式，均不构成本公司对本服务之保证。</div>
<div>（六）在法律允许的情况下，本公司对于与本协议有关或由本协议引起的任何间接的、惩罚性的、特殊的、派生的损失，不论是如何产生的，也不论是由对本协议的违反（包括违反保证）还是由侵权造成的，均不负有任何责任，无论事先是否已被告知此等损失的可能性。另外即使本协议规定的排他性救济没有达到其基本目的，也应排除本公司对上述损失的责任。</div>
<div>十一、商标、知识产权的保护</div>
<div>（一）本公司官方微信公众号“立乐家”上所有内容，包括但不限于著作、图片、档案、资讯、资料、网站架构、网站画面的安排、网页设计等，均由本公司或本公司关联企业依法拥有其知识产权，包括但不限于商标权、专利权、著作权、商业秘密等。</div>
<div>（二）非经本公司或本公司关联企业书面同意，任何单位或个人不得擅自使用、修改、复制、公开传播、改变、散布、发行或公开发表相关的程序或内容。</div>
<div>（三）尊重知识产权是您应尽的义务，如有违反上述条款， 本公司有权追究您的法律责任</div>
<div>十二、法律适用与管辖</div>
<div>本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律，没有相关法律规定的，参照通用国际商业惯例和（或）行业惯例。因本协议产生之争议，双方应友好协商；协商不成，任何一方均可向协议签订地所在的人民法院提起诉讼。本协议签订地为广州市荔湾区陆居路二号。</div>
</div>
<div class="bottom-line"></div>
</div>
</div>
<!-- 隐私协议-->
<div class="model rule-model" v-if="data.index == 'privacy'">
<div class="model-close" @click="modelCloseHandler"></div>
<div class="model-content">
<div class="model-head-line"></div>
<div class="model-title">隐私政策</div>
<div class="text-container">
<div>立乐家（以下简称“我们”）非常重视用户的隐私和个人信息保护。您在购买我们的产品与/或使用我们的服务时，我们可能会收集和使用您的相关信息。我们希望通过《隐私政策》（“本隐私政策”）向您说明我们在您购买我们的产品与/或使用我们的服务时如何收集、使用、保存、共享和转让这些信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式。</div>
<div>本隐私政策与您所使用的立乐家服务以及该服务所包括的各种业务功能（以下统称“我们的产品与/或服务”）息息相关，希望您在购买我们的产品与/或使用我们的服务前仔细阅读并确认您已经充分理解本政策所写明的内容，并让您可以按照本隐私政策的指引做出您认为适当的选择。如果您购买我们的产品与/或使用我们的服务，即意味着您同意本隐私政策内容，并且同意我们按照本隐私政策收集、使用、保存和共享您的相关信息。</div>
<div>一、 我们如何收集您的信息</div>
<div>我们会出于本政策所述的以下目的，收集和使用您的个人信息：</div>
<div>1.用户注册</div>
<div>您首先需要注册一个立白立乐家账户成为我们的用户。当您注册时，您需要至少向我们提供您准备使用的立白立乐家账户名、密码、您本人的手机号码，我们将通过发送短信验证码的方式来验证您的身份是否有效。您的账户名为您的默认昵称，您可以修改补充您的昵称、性别、生日、以及您的实名验证相关信息，这些信息均属于您的“账户信息”。您补充的账户信息将有助于我们为您提供个性化的商品推荐和更优的购物体验，但如果您不提供这些补充信息，不会影响您网上购物的基本功能。</div>
<div>2.展示和推送商品或服务</div>
<div>为改善我们的产品或服务、向您提供个性化的信息搜索及交易服务，我们会根据您的浏览及搜索记录、设备信息、位置信息、订单信息，提取您的浏览、搜索偏好、行为习惯、位置信息等特征，基于特征标签进行展示、推送信息。</div>
<div>3.提供商品或服务</div>
<div>为便于向您交付商品或服务，您需提供收货人姓名、收货地址、邮政编码、收货人联系电话。如果我们委托第三方向您交付时，我们会在征得您同意后将上述信息共享给第三方。如果您拒绝提供此类信息，我们将无法完成相关交付服务。</div>
<div>4.提供安全保障</div>
<div>为提高您使用我们的产品与/或服务时系统的安全性，更准确地预防钓鱼网站欺诈和保护账户安全，我们可能会通过了解您的浏览信息、订单信息、您常用的软件信息、设备信息等手段来判断您的账号风险，并可能会记录一些我们认为有风险的链接（“URL”）；我们也会收集您的设备信息对于立白立乐家系统问题进行分析、统计流量并排查可能存在的风险、在您选择向我们发送异常信息时予以排查。</div>
<div>二、 我们如何使用Cookie</div>
<div>1.为实现您联机体验的个性化需求，使您获得更轻松的访问体验。我们会在您的移动设备上发送一个或多个名为Cookies的小数据文件，指定给您的Cookies是唯一的，它只能被将Cookies发布给您的域中的Web服务器读取。我们向您发送Cookies是为了简化您重复登录的步骤、存储您的购物偏好或您购物车中的商品等数据进而为您提供购物的偏好设置、帮助您优化对广告的选择与互动、帮助判断您的登录状态以及账户或数据安全；</div>
<div>2.我们不会将Cookies用于本隐私政策所述目的之外的任何用途。您可根据自己的偏好管理或删除Cookies。您可以清除设备上保存的所有Cookies，大部分网络浏览器都设有阻止Cookies的功能。但如果您这么做，您可能需要在每一次访问我们网站时亲自更改用户设置，而且您之前所记录的相应信息也均会被删除，并且可能会对您所使用服务的安全性有一定影响。</div>
<div>三、我们如何共享、转让、公开、披露您的个人信息</div>
<div>（一）共享</div>
<div>我们不会与立乐家以外的任何公司、组织和个人共享您的个人信息，但以下情况除外：</div>
<div>1.事先获得您明确的同意或授权；</div>
<div>2.根据适用的法律法规、法律程序的要求、强制性的行政或司法要求所必须的情况下进行提供；</div>
<div>3.我们可能会将您的个人信息与我们的关联方共享。但我们只会共享必要的个人信息，且受本隐私政策中所声明目的的约束。我们的关联方如要改变个人信息的处理目的，将再次征求您的授权同意；</div>
<div>4.我们可能会向合作伙伴等第三方共享您的订单信息、账户信息、设备信息以及位置信息，以保障为您提供的服务顺利完成。但我们仅会出于合法、正当、必要、特定、明确的目的共享您的个人信息，并且只会共享提供服务所必要的个人信息。我们的合作伙伴无权将共享的个人信息用于任何其他用途；</div>
<div>5.对我们与之共享个人信息的公司、组织和个人，我们会与其签署严格的保密协定，要求他们按照我们的说明、本隐私政策以及其他任何相关的保密和安全措施来处理个人信息。</div>
<div>（二）转让</div>
<div>我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：</div>
<div>1.事先获得您明确的同意或授权；</div>
<div>2.根据适用的法律法规、法律程序的要求、强制性的行政或司法要求所必须的情况进行提供；</div>
<div>3.在涉及合并、收购、资产转让或类似的交易时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本隐私政策的约束，否则,我们将要求该公司、组织重新向您征求授权同意。</div>
<div>（三）公开披露</div>
<div>我们仅会在以下情况下，才会公开披露您的个人信息：</div>
<div>1.根据您的需求，在您明确同意的披露方式下披露您所指定的个人信息；</div>
<div>2.根据法律、法规的要求、强制性的行政执法或司法要求所必须提供您个人信息的情况下，我们可能会依据所要求的个人信息类型和披露方式公开披露您的个人信息。</div>
<div>（四）共享、转让、公开披露个人信息时事先征得授权同意的例外</div>
<div>以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意：</div>
<div>1.与国家安全、国防安全有关的；</div>
<div>2.与公共安全、公共卫生、重大公共利益有关的；</div>
<div>3.与犯罪侦查、起诉、审判和判决执行等有关的；</div>
<div>4.出于维护您或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；</div>
<div>5.您自行向社会公众公开的个人信息；</div>
<div>6.从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道。</div>
<div>根据法律规定，共享、转让经去标识化处理的个人信息，且确保数据接收方无法复原并重新识别个人信息主体的，不属于个人信息的对外共享、转让及公开披露行为，对此类数据的保存及处理将无需另行向您通知并征得您的同意。</div>
<div>四、我们如何保护您的个人信息安全</div>
<div>1.我们已采取符合业界标准、合理可行的安全防护措施保护您提供的个人信息安全，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失；</div>
<div>2.我们会采取合理可行的措施，尽力避免收集无关的个人信息。我们只会在账户有效期内保留您的个人信息，除非法律相关规定或司法行政要求延长保留期；</div>
<div>3.我们仅允许有必要知晓这些信息的立白立乐家及立白立乐家关联方的员工、合作伙伴访问个人信息，并为此设置了严格的访问权限控制和监控机制。我们同时要求可能接触到您个人信息的所有人员履行相应的保密义务；</div>
<div>4.互联网并非绝对安全的环境，而且电子邮件、即时通讯、社交软件等与其他用户的交流方式无法确定是否完全加密，我们建议您使用此类工具时请使用复杂密码，并注意保护您的个人信息安全；</div>
<div>5.在不幸发生个人信息安全事件后，我们将按照法律法规的要求向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。事件相关情况我们将以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。</div>
<div>五、您如何管理您的个人信息</div>
<div>您可以通过以下方式访问及管理您的个人信息：</div>
<div>（一）访问您的个人信息</div>
<div>您有权访问您的个人信息，法律法规规定的例外情况除外。您可以通过以下方式自行访问您的个人信息：</div>
<div>（1）账户信息——如果您希望访问或编辑您的账户中的个人基本资料信息和支付信息、更改您的密码、添加安全信息或关闭您的账户等，您可以通过登录账号通过“账号管理”执行此类操作。</div>
<div>（2）订单信息：您可以在订单中心查阅或清除您的订单记录、交易记录等。</div>
<div>如果您无法通过上述路径访问该等个人信息，您可以随时通过客服与我们取得联系。我们将在15天内回复您的访问请求。</div>
<div>对于您在使用我们的产品或服务过程中产生的其他个人信息，我们将根据本条“（四）响应您的上述请求”中的相关安排向您提供。</div>
<div>（二）更正或补充您的个人信息</div>
<div>当您发现我们处理的关于您的个人信息有错误时，您有权要求我们做出更正或补充。您可以通过“（一）访问您的个人信息”中列明的方式提出更正或补充申请。</div>
<div>（三）删除您的个人信息</div>
<div>您可以通过“（一）访问您的个人信息”中列明的方式删除您的部分个人信息。</div>
<div>在以下情形中，您可以向我们提出删除个人信息的请求：</div>
<div>1.如果我们处理个人信息的行为违反法律法规；</div>
<div>2.如果我们收集、使用您的个人信息，却未征得您的明确同意</div>
<div>3.如果我们处理个人信息的行为严重违反了与您的约定；</div>
<div>4.如果您不再使用我们的产品或服务，或您主动注销了账号；</div>
<div>5.如果我们永久不再为您提供产品或服务。</div>
<div>若我们决定响应您的删除请求，我们还将同时尽可能通知从我们处获得您的个人信息的主体，要求其及时删除，除非法律法规另有规定，或这些主体获得您的独立授权。</div>
<div>当您从我们的服务中删除信息后，我们可能不会立即从备份系统中删除相应的信息，但会在备份更新时删除这些信息。</div>
<div>（四）响应您的上述请求</div>
<div>为保障安全，您可能需要提供书面请求，或以其他方式证明您的身份。我们可能会先要求您验证自己的身份，然后再处理您的请求。</div>
<div>我们将在15天内做出答复。如您不满意，还可以通过客服发起投诉。</div>
<div>对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情收取一定成本费用。对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或者非常不切实际的请求，我们可能会予以拒绝。</div>
<div>在以下情形中，按照法律法规要求，我们将无法响应您的请求：</div>
<div>1.与国家安全、国防安全有关的；</div>
<div>2.与公共安全、公共卫生、重大公共利益有关的；</div>
<div>3.与犯罪侦查、起诉、审判和执行判决等有关的；</div>
<div>4.有充分证据表明个人信息主体存在主观恶意或滥用权利的；</div>
<div>5.响应您的请求将导致您或其他个人、组织的合法权益受到严重损害的；</div>
<div>6.涉及商业秘密的。</div>
<div>六、未成年人的个人信息保护</div>
<div>1.立乐家非常重视对未成年人个人信息的保护。若您是18周岁以下的未成年人，在使用我们的产品与/或服务前，建议您请您的父母或监护人仔细阅读本隐私权政策，并在征得您的父母或监护人同意的前提下使用我们的产品与/或服务及向我们提供信息；</div>
<div>2.对于经父母或法定监护人同意而收集未成年人个人信息的情况，我们只会在受到法律允许、父母或监护人明确同意或者保护未成年人所必要的情况下使用或公开披露此信息；</div>
<div>3.如果我们发现自己在未事先获得可证实的父母或法定监护人同意的情况下收集了未成年人的个人信息，则会设法尽快删除相关数据。</div>
<div>七、通知和修订</div>
<div>为给您提供更好的服务以及随着立白立乐家业务的发展，本隐私政策也会随之更新。但未经您明确同意，我们不会削减您依据本隐私政策所应享有的权利。我们会通过在立白立乐家上发出更新版本并在生效前通过网站公告或以其他适当方式提醒您相关内容的更新，也请您访问立白立乐家以便及时了解最新的隐私政策。</div>
<div>八、如何联系我们</div>
<div>您可以通过以下方式与我们联系，我们将在15天内回复您的请求：</div>
<div>1.如对本政策内容有任何疑问、意见或建议，您可通过客服与我们联系。客服电话：020-81808822</div>
<div>2.如发现个人信息可能被泄露，您可以通过客服提起投诉举报。客服电话：020-81808822</div>
</div>
<div class="bottom-line"></div>
</div>
</div>
<!-- 奖品-->
<div class="model rule-model" v-if="data.index == 'prize'">
<div class="model-close" @click="modelCloseHandler"></div>
......@@ -204,6 +400,7 @@ export default {
}
.model-title {
text-align: center;
font-size: 45px;
font-weight: bold;
}
......@@ -274,10 +471,30 @@ export default {
.sm-width {
width: 480px !important;
margin-bottom: 30px;
div {
font-weight: 600;
}
}
}
.text-container {
overflow: scroll;
max-height: 700px;
div {
font-weight: 600;
width: 90%;
margin: auto;
margin-top: 15px;
text-indent: 52px;
text-align: left;
color: #323232;
font-size: 26px;
}
}
.bottom-line{
height: 30px;
}
</style>
......
......@@ -15,12 +15,17 @@
class="prize-thumb"
v-bind:style="{backgroundImage:'url(' + data.drawResult.thumb + ')'}"
></div>
<div class="prize-name">{{data.drawResult.prizeName}}</div>
<div
v-if="data.drawResult.prizeType == 'coupon'"
class="prize-sn"
>{{data.drawResult.prizeSn}}</div>
<div class="tip-container">
<span class="use-tip">奖品说明</span>
</div>
<div class="tip-container" v-if="data.drawResult.prizeType == 'integral'">
<span class="tip">积分可以在立乐家商城兑换礼品</span>
<span class="tip">积分可以在立乐家积分商场兑换礼品</span>
</div>
<div class="tip-container" v-if="data.drawResult.prizeType == 'coupon'">
<span class="tip">优惠券可以在立乐家商城购物当现金使用</span>
......@@ -113,17 +118,18 @@ export default {
return {
loading: false,
data: this.value,
submitForm: !this.value || !this.value.drawResult
? {
drawCode: "",
contactName: "",
contactMobile: "",
province: "",
city: "",
district: "",
address: ""
}
: this.value.drawResult
submitForm:
!this.value || !this.value.drawResult
? {
drawCode: "",
contactName: "",
contactMobile: "",
province: "",
city: "",
district: "",
address: ""
}
: this.value.drawResult
};
},
methods: {
......@@ -355,4 +361,10 @@ input::-webkit-input-placeholder {
color: #4f9984;
font-size: 26px;
}
.prize-sn {
text-align: center;
font-size: 30px;
font-weight: 600;
}
</style>
......
......@@ -79,7 +79,7 @@ export default {
toWorksViewHandler(code) {
let link = location.origin + location.pathname;
link += "?worksCode=" + code;
as.setShare(link, null, null, null);
as.setShare(link, "", "", "");
this.$emit("worksDetail", { worksCode: code });
},
searchWorksHandler(action) {
......@@ -109,6 +109,7 @@ export default {
tempList = [];
list.push(tempList);
}
this._changeImageList(res.list[index]);
tempList.push(res.list[index]);
}
// console.log(list);
......@@ -124,8 +125,28 @@ export default {
Toast.clear(true);
});
},
_changeImageList(works) {
let worksList = works.worksList;
if (!worksList || worksList.length == 0) {
return;
}
if (worksList[0].worksType == "pic") {
return;
}
let changeIndex = -1;
for (let index = 0; index < worksList.length; index++) {
if (worksList[index].worksType == "pic") {
changeIndex = index;
break;
}
}
if (changeIndex > -1) {
let worksTmp = worksList.splice(changeIndex, 1);
worksList.unshift(worksTmp[0]);
works.worksList = worksList;
}
},
refreshMore() {
// console.log("refresh more");
this.listForm.page++;
this.searchWorksHandler();
}
......
......@@ -8,9 +8,16 @@
<div class="head-line"></div>
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<van-swipe-item v-for="(item, index) in formData.worksList" :key="index">
<!-- <img :src="works.worksUrl" /> -->
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
<div
v-if="item.worksType=='pic'"
class="img"
v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}"
></div>
<video v-if="item.worksType=='video'" controls>
<source :src="item.worksUrl" type="video/mp4" />
</video>
</van-swipe-item>
</van-swipe>
</div>
......@@ -43,7 +50,6 @@
<div class="msg">{{formData.slogan}}</div>
</div>
<div class="text-container space top">
<div class="label">个人简介：</div>
<div class="msg">{{formData.profile}}</div>
......@@ -165,6 +171,11 @@ export default {
width: 630px;
background-size: cover;
}
video {
height: 451px;
width: 630px;
}
}
.space {
......
......@@ -11,8 +11,15 @@
<div class="self-content">
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
<van-swipe-item v-for="(item, index) in formData.worksList" :key="index">
<div
v-if="item.worksType=='pic'"
class="img"
v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}"
></div>
<video v-if="item.worksType=='video'" controls>
<source :src="item.worksUrl" type="video/mp4" />
</video>
</van-swipe-item>
</van-swipe>
</div>
......@@ -213,6 +220,11 @@ export default {
width: 265px;
background-size: cover;
}
video {
height: 190px;
width: 265px;
}
}
.space {
......
......@@ -116,21 +116,20 @@ export default {
}
},
initActivity() {
this.init = true;
// Toast.loading({
// mask: true,
// message: "加载中..."
// });
// httpGet({ url: urls.myWork }).then(res => {
// this.init = true;
// this.formData = res.data || {};
// if (!res.data) {
// this.formEdit = true;
// } else {
// this.formEdit = false;
// }
// Toast.clear();
// });
Toast.loading({
mask: true,
message: "加载中..."
});
httpGet({ url: urls.myWork }).then(res => {
this.init = true;
this.formData = res.data || {};
if (!res.data) {
this.formEdit = true;
} else {
this.formEdit = false;
}
Toast.clear();
});
},
showRuleHandler() {
this.model.show = true;
......@@ -176,7 +175,7 @@ export default {
},
created() {
this.initUrlQuery();
// this.initActivity();
this.initActivity();
},
components: {
BottomTool,
......
......@@ -63,7 +63,7 @@
<div class="sys-btn-02" :class="{disabled : !autoRegister}" @click="submitFormHandler">确认提交</div>
<div
class="center base-margin auto-register-tips"
class="center base-margin-top auto-register-tips"
@click="acceptRegisterHandler"
v-if="formData.worksCode == '' || formData.worksCode == null "
>
......@@ -71,6 +71,15 @@
<div class="tips">自动注册为立白集团会员，立享会员权益，详见“更多福利”</div>
</div>
<div class="center base-margin auto-register-tips">
<div class="icon-register" :class="{activity : privacy}"></div>
<div class="tips">
我已阅读并同意
<u @click="showAgreementHandler">用户协议</u>和
<u @click="showPrivacyHandler">隐私政策</u>
</div>
</div>
<van-popup position="bottom" :style="{ height: '40%' }" v-model="area.show">
<van-area
:area-list="areaList"
......@@ -108,6 +117,7 @@ export default {
data() {
return {
autoRegister: true,
privacy: true,
successModelVisiable: true,
area: {
show: false
......@@ -140,6 +150,12 @@ export default {
if (!this.autoRegister) {
}
},
showAgreementHandler() {
this.$emit("agreement");
},
showPrivacyHandler() {
this.$emit("privacy");
},
submitFormHandler() {
if (!this.autoRegister) {
return;
......@@ -197,9 +213,12 @@ export default {
.then(res => {
this.loading = false;
Toast.clear();
let data = {
isFirst : !this.formData.worksCode ? 1 : 0,
worksCode : res
};
this.formData.worksCode = res;
console.log("submit === =", res);
this.$emit("submit", res);
this.$emit("submit", data);
})
.catch(res => {
this.loading = false;
......@@ -360,8 +379,12 @@ export default {
background-size: 100%;
}
.base-margin {
.base-margin-top{
margin-top: 40px;
}
.base-margin {
margin-top: 20px;
margin-bottom: 80px;
}
......
<template>
<div class="clipper-container" ref="clipper">
<div class="full-mask" @click="_cancel"></div>
<canvas ref="canvas"></canvas>
<!-- 裁剪部分 -->
<div class="clipper-part">
<div class="pCanvas-container">
<canvas ref="pCanvas"></canvas>
</div>
</div>
<!-- 底部操作栏 -->
<div class="action-bar">
<div class="button" @click="_clipper">确认</div>
</div>
<!-- 背景遮罩 -->
<div class="mask" :class="{opacity: maskShow}"></div>
<!-- 手势操作层 -->
<div class="gesture-mask" ref="gesture"></div>
</div>
</template>
<style lang="less">
.position() {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2000;
}
.full-mask {
background-color: #fff;
opacity: 0.8;
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
.clipper-container {
.position();
line-height: 0;
background-color: #000;
.clipper-part {
.position();
bottom: 61px;
z-index: 2102;
.pCanvas-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #fff;
}
}
.action-bar {
box-sizing: content-box;
.position();
top: auto;
z-index: 2103;
height: 80px;
line-height: 80px;
border-top: 1px solid rgba(256, 256, 256, 0.3);
.button {
line-height: 80px;
height: 80px;
font-size: 26px;
color: #fff;
background: none;
border: none;
outline: 0;
text-align: center;
}
}
.mask {
.position();
z-index: 2101;
transition: opacity 500ms;
background-color: #000;
opacity: 0;
&.opacity {
opacity: 0.8;
}
}
.gesture-mask {
.position();
bottom: 61px;
z-index: 2103;
}
}
</style>
<script>
export default {
name: "imageClipper",
props: {
img: String, //url或dataUrl
clipperImgWidth: {
type: Number,
default: 500
},
clipperImgHeight: {
type: Number,
default: 200
}
},
watch: {
img() {
this.loadImgQueue.push(this.img);
this._loadImg();
}
},
data() {
return {
originXDiff: 0, //裁剪canvas与原图canvas坐标原点上的差值
originYDiff: 0,
maskShow: true,
maskShowTimer: null,
ctx: null,
pCtx: null,
actionBarHeight: 61,
loadImgQueue: [], //加载图片队列
$img: null,
imgLoaded: false,
imgLoading: false,
imgStartWidth: null,
imgStartHeight: null,
imgCurrentWidth: null,
imgCurrentHeight: null,
imgX: null, //img对于canvas的坐标
imgY: null,
imgScale: 1, //图片目前的缩放倍数 范围是1-5
imgMinScale: 1,
imgMaxScale: 5,
imgScaleStep: 60, //缩放步长，每60px加减0.1
//图片canvas宽高
cWidth: 0,
cHeight: 0
};
},
mounted() {
setTimeout(() => {
this._initClipper();
}, 10);
},
beforeDestroy() {
let $gesture = this.$refs.gesture;
$gesture.ontouchstart = null;
$gesture.ontouchmove = null;
$gesture.outouchend = null;
},
methods: {
_initClipper() {
this.loadImgQueue.push(this.img);
this._initCanvas();
this._loadImg();
this._initEvent();
},
_initCanvas() {
let $canvas = this.$refs.canvas,
$pCanvas = this.$refs.pCanvas,
clipperClientRect = this.$refs.clipper.getBoundingClientRect(),
clipperWidth = parseInt(this.clipperImgWidth / window.devicePixelRatio),
clipperHeight = parseInt(
this.clipperImgHeight / window.devicePixelRatio
);
this.ctx = $canvas.getContext("2d");
this.pCtx = $pCanvas.getContext("2d");
//判断clipperWidth与clipperHeight有没有超过容器值
// if (clipperWidth < 0 || clipperWidth > clipperClientRect.width) {
// clipperWidth = 250
// }
clipperWidth = clipperClientRect.width;
clipperHeight = clipperWidth / 1.375;
// if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) {
// clipperHeight = 100
// }
//因为canvas在手机上会被放大，因此里面的内容会模糊，这里根据手机的devicePixelRatio来放大canvas，然后再通过设置css来收缩，因此关于canvas的所有值或坐标都要乘以devicePixelRatio
$canvas.style.width = clipperClientRect.width + "px";
$canvas.style.height = clipperClientRect.height + "px";
$canvas.width = this._ratio(clipperClientRect.width);
$canvas.height = this._ratio(clipperClientRect.height);
$pCanvas.style.width = clipperWidth + "px";
$pCanvas.style.height = clipperHeight + "px";
$pCanvas.width = this._ratio(clipperWidth);
$pCanvas.height = this._ratio(clipperHeight);
//计算两个canvas原点的x y差值
let cClientRect = $canvas.getBoundingClientRect(),
pClientRect = $pCanvas.getBoundingClientRect();
this.originXDiff = pClientRect.left - cClientRect.left;
this.originYDiff = pClientRect.top - cClientRect.top;
this.cWidth = cClientRect.width;
this.cHeight = cClientRect.height;
},
_initEvent() {
let $gesture = this.$refs.gesture,
cClientRect = this.$refs.canvas.getBoundingClientRect(),
scx = 0, //对于单手操作是移动的起点坐标，对于缩放是图片距离两手指的中点最近的图标。
scy = 0,
fingers = {}; //记录当前有多少只手指在触控屏幕
//one finger
let iX = this.imgX,
iY = this.imgY;
//two finger
let figureDistance = 0,
pinchScale = this.imgScale;
$gesture.addEventListener(
"touchstart",
e => {
if (!this.imgLoaded) {
return;
}
if (e.touches.length === 1) {
let finger = e.touches[0];
scx = finger.pageX;
scy = finger.pageY;
iX = this.imgX;
iY = this.imgY;
fingers[finger.identifier] = finger;
} else if (e.touches.length === 2) {
let finger1 = e.touches[0],
finger2 = e.touches[1],
f1x = finger1.pageX - cClientRect.left,
f1y = finger1.pageY - cClientRect.top,
f2x = finger2.pageX - cClientRect.left,
f2y = finger2.pageY - cClientRect.top;
scx = parseInt((f1x + f2x) / 2);
scy = parseInt((f1y + f2y) / 2);
figureDistance = this._pointDistance(f1x, f1y, f2x, f2y);
fingers[finger1.identifier] = finger1;
fingers[finger2.identifier] = finger2;
//判断变换中点是否在图片中，如果不是则去离图片最近的点
if (scx < this.imgX) {
scx = this.imgX;
}
if (scx > this.imgX + this.imgCurrentWidth) {
scx = this.imgX + this.imgCurrentHeight;
}
if (scy < this.imgY) {
scy = this.imgY;
}
if (scy > this.imgY + this.imgCurrentHeight) {
scy = this.imgY + this.imgCurrentHeight;
}
}
},
false
);
$gesture.addEventListener(
"touchmove",
e => {
e.preventDefault();
if (!this.imgLoaded) {
return;
}
this.maskShowTimer && clearTimeout(this.maskShowTimer);
this.maskShow = false;
if (e.touches.length === 1) {
let f1x = e.touches[0].pageX,
f1y = e.touches[0].pageY;
this._drawImage(
iX + f1x - scx,
iY + f1y - scy,
this.imgCurrentWidth,
this.imgCurrentHeight
);
} else if (e.touches.length === 2) {
let finger1 = e.touches[0],
finger2 = e.touches[1],
f1x = finger1.pageX - cClientRect.left,
f1y = finger1.pageY - cClientRect.top,
f2x = finger2.pageX - cClientRect.left,
f2y = finger2.pageY - cClientRect.top,
newFigureDistance = this._pointDistance(f1x, f1y, f2x, f2y),
scale =
this.imgScale +
parseFloat(
(
(newFigureDistance - figureDistance) /
this.imgScaleStep
).toFixed(1)
);
fingers[finger1.identifier] = finger1;
fingers[finger2.identifier] = finger2;
if (scale !== pinchScale) {
//目前缩放的最小比例是1，最大是5
if (scale < this.imgMinScale) {
scale = this.imgMinScale;
} else if (scale > this.imgMaxScale) {
scale = this.imgMaxScale;
}
pinchScale = scale;
this._scale(scx, scy, scale);
}
}
},
false
);
$gesture.addEventListener("touchend", e => {
if (!this.imgLoaded) {
return;
}
this.imgScale = pinchScale;
//从finger删除已经离开的手指
let touches = Array.prototype.slice.call(e.changedTouches, 0);
touches.forEach(item => {
delete fingers[item.identifier];
});
//迭代fingers，如果存在finger则更新scx,scy,iX,iY，因为可能缩放后立即单指拖动
let i,
fingerArr = [];
for (i in fingers) {
if (fingers.hasOwnProperty(i)) {
fingerArr.push(fingers[i]);
}
}
if (fingerArr.length > 0) {
scx = fingerArr[0].pageX;
scy = fingerArr[0].pageY;
iX = this.imgX;
iY = this.imgY;
} else {
this.maskShowTimer = setTimeout(() => {
this.maskShow = true;
}, 300);
}
//做边界值检测
let x = this.imgX,
y = this.imgY,
pClientRect = this.$refs.pCanvas.getBoundingClientRect();
if (x > pClientRect.left + pClientRect.width) {
x = pClientRect.left;
} else if (x + this.imgCurrentWidth < pClientRect.left) {
x = pClientRect.left + pClientRect.width - this.imgCurrentWidth;
}
if (y > pClientRect.top + pClientRect.height) {
y = pClientRect.top;
} else if (y + this.imgCurrentHeight < pClientRect.top) {
y = pClientRect.top + pClientRect.height - this.imgCurrentHeight;
}
if (this.imgX !== x || this.imgY !== y) {
this._drawImage(x, y, this.imgCurrentWidth, this.imgCurrentHeight);
}
});
},
_loadImg() {
if (this.imgLoading || this.loadImgQueue.length === 0) {
return;
}
let img = this.loadImgQueue.shift();
if (!img) {
return;
}
let $img = new Image(),
onLoad = e => {
$img.removeEventListener("load", onLoad, false);
this.$img = $img;
this.imgLoaded = true;
this.imgLoading = false;
this._initImg($img.width, $img.height);
this.$emit("loadSuccess", e);
this.$emit("loadComplete", e);
this._loadImg();
},
onError = e => {
$img.removeEventListener("error", onError, false);
this.$img = $img = null;
this.imgLoading = false;
// this.$emit('loadError', e);
// this.$emit('loadComplete', e);
this._loadImg();
};
this.$emit("beforeLoad");
this.imgLoading = true;
this.imgLoaded = false;
$img.src = this.img;
$img.crossOrigin = "Anonymous"; //因为canvas toDataUrl不能操作未经允许的跨域图片，这需要服务器设置Access-Control-Allow-Origin头
$img.addEventListener("load", onLoad, false);
$img.addEventListener("error", onError, false);
},
_initImg(w, h) {
let eW = null,
eH = null,
maxW = this.cWidth,
maxH = this.cHeight - this.actionBarHeight;
// console.log("this.cWidth===", this.cWidth)
// console.log("this.cHeight===", this.cHeight)
// console.log("this.actionBarHeight===", this.actionBarHeight)
if (w < maxW && h < maxH) {
if (w > 1.375 * h) {
eH = maxH;
eW = (w / h) * maxH;
} else {
eW = maxW;
eH = (h / w) * maxW;
}
} else {
//如果图片的宽高都少于容器的宽高，则不做处理
if (w <= maxW && h <= maxH) {
eW = w;
eH = h;
} else if (w > maxW && h <= maxH) {
eW = maxW;
eH = parseInt((h / w) * maxW);
} else if (w <= maxW && h > maxH) {
eW = parseInt((w / h) * maxH);
eH = maxH;
} else {
//判断是横图还是竖图
if (h > w) {
eW = parseInt((w / h) * maxH);
eH = maxH;
} else {
eW = maxW;
eH = parseInt((h / w) * maxW);
}
}
}
// if (eW <= maxW && eH <= maxH) {
//记录其初始化的宽高，日后的缩放功能以此值为基础
this.imgStartWidth = eW;
this.imgStartHeight = eH;
this._drawImage((maxW - eW) / 2, (maxH - eH) / 2, eW, eH);
// } else {
// this._initImg(eW, eH);
// }
},
_drawImage(x, y, w, h) {
this._clearCanvas();
this.imgX = parseInt(x);
this.imgY = parseInt(y);
this.imgCurrentWidth = parseInt(w);
this.imgCurrentHeight = parseInt(h);
//更新canvas
this.ctx.drawImage(
this.$img,
this._ratio(x),
this._ratio(y),
this._ratio(w),
this._ratio(h)
);
//更新pCanvas，只需要减去两个canvas坐标原点对应的差值即可
this.pCtx.drawImage(
this.$img,
this._ratio(x - this.originXDiff),
this._ratio(y - this.originYDiff),
this._ratio(w),
this._ratio(h)
);
},
_clearCanvas() {
let $canvas = this.$refs.canvas,
$pCanvas = this.$refs.pCanvas;
$canvas.width = $canvas.width;
$canvas.height = $canvas.height;
$pCanvas.width = $pCanvas.width;
$pCanvas.height = $pCanvas.height;
},
_ratio(size) {
return parseInt(window.devicePixelRatio * size);
},
_pointDistance(x1, y1, x2, y2) {
return parseInt(Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)));
},
_scale(x, y, scale) {
let newPicWidth = parseInt(this.imgStartWidth * scale),
newPicHeight = parseInt(this.imgStartHeight * scale),
newIX = parseInt(
x - (newPicWidth * (x - this.imgX)) / this.imgCurrentWidth
),
newIY = parseInt(
y - (newPicHeight * (y - this.imgY)) / this.imgCurrentHeight
);
this._drawImage(newIX, newIY, newPicWidth, newPicHeight);
},
_clipper() {
let imgData = null;
try {
imgData = this.$refs.pCanvas.toDataURL();
} catch (e) {
console.error(
"请在response header加上Access-Control-Allow-Origin，否则canvas无法裁剪未经许可的跨域图片"
);
}
this.$emit("ok", imgData);
},
_cancel() {
this.$emit("cancel");
},
//public
getBase64(dataURL) {
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
}
};
</script>
\ No newline at end of file
<template>
<div>
<div class="img-container" v-for="(item,index) in fileList" :key="index">
<img :src="item.worksUrl" />
<img v-if="item.worksType=='pic'" :src="item.worksUrl" />
<video v-if="item.worksType=='video'" controls>
<source :src="item.worksUrl" type="video/mp4" />
</video>
<i class="van-icon van-icon-delete" @click="deleteImageHandler(index)"></i>
</div>
<van-uploader
ref="vanUploader"
class="uploader"
accept="image/*, audio/mp4, video/mp4"
:before-read="beforeUpload"
:after-read="uploadSumit"
v-if="!fileList || fileList.length < 3"
>+</van-uploader>
<image-clipper
ref="clipper"
v-if="imageData.show"
:img="imageData.data"
:clipper-img-width="750"
:clipper-img-height="537"
@ok="imageClipperHandler"
@cancel="imageData.show=false"
></image-clipper>
</div>
</template>
<script>
import { request } from "@/api/fetch-api.js";
import { request, httpPost } from "@/api/fetch-api.js";
import ImageClipper from "./ImageClipper";
import Vue from "vue";
import { Uploader } from "vant";
import { Toast } from "vant";
Vue.use(Uploader);
Vue.use(Toast);
/**
* 外层插件可通过监听：v-on:before-upload；v-on:after-upload两个事件监听上传结果
......@@ -32,27 +50,85 @@ export default {
data() {
return {
fileList: this.value,
uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload",
uploadFile: "https://api.k.wxpai.cn/bizproxy/kdapi/file/upload",
uploadUrl: "https://api.k.wxpai.cn/bizproxy/kdapi/file/uploadBase64",
imageData: {
show: false,
data: ""
}
};
},
methods: {
beforeUpload(params) {
// console.log(params);
// let worksType = params.type.indexOf("image") >= 0 ? "pic" : "video";
// if (
// worksType == "video" &&
// (!this.fileList || this.fileList.length == 0)
// ) {
// Toast("第一个作品必须上传图片！");
// return false;
// }
return true;
},
uploadSumit(params) {
console.log(params);
let worksType = params.file.type.indexOf("image") >= 0 ? "pic" : "video";
if (worksType == "pic") {
this.imageData.data = params.content;
this.imageData.show = true;
} else {
Toast.loading({
mask: true,
forbidClick: true,
message: "视频提交中..."
});
let data = {
path: "/pro/jiajiaChildrenHost/works",
file: params.file
};
request
.form(this.uploadFile, data)
.then(result => {
Toast.clear();
let uploadResult = {
worksUrl: result.data.content,
worksType: "video"
};
if (!this.fileList) {
this.fileList = [];
}
this.fileList.push(uploadResult);
this.$emit("input", this.fileList);
})
.catch(res => {});
}
},
imageClipperHandler(base64) {
let data = {
path: "/pro/jiajiaChildrenHost/works",
file: params.file
data: base64
};
request
.form(this.uploadUrl, data)
Toast.loading({
mask: true,
forbidClick: true,
message: "图片提交中..."
});
httpPost({ url: this.uploadUrl, data: data })
.then(result => {
Toast.clear();
console.log(result);
let uploadResult = {
worksUrl: result.data.content,
worksType: params.file.type.indexOf("image") >= 0 ? "pic" : "video"
worksUrl: result,
worksType: "pic"
};
if (!this.fileList) {
this.fileList = [];
}
this.fileList.push(uploadResult);
console.log("submit image : ", this.fileList);
this.imageData.show = false;
this.$emit("input", this.fileList);
})
.catch(res => {});
......@@ -65,6 +141,9 @@ export default {
currentValue: function() {
return this.value;
}
},
components: {
ImageClipper
}
};
</script>
......@@ -99,6 +178,9 @@ export default {
img {
width: 100%;
}
video {
width: 100%;
}
.van-icon {
background-color: rgba($color: #000000, $alpha: 0.3);
......
......@@ -11,9 +11,16 @@
</div>
<div class="swipe">
<van-swipe :autoplay="5000">
<van-swipe-item v-for="(works, index) in formData.worksList" :key="index">
<van-swipe-item v-for="(item, index) in formData.worksList" :key="index">
<!-- <img :src="works.worksUrl" /> -->
<div class="img" v-bind:style="{backgroundImage:'url(' + works.worksUrl + ')'}"></div>
<div
v-if="item.worksType=='pic'"
class="img"
v-bind:style="{backgroundImage:'url(' + item.worksUrl + ')'}"
></div>
<video v-if="item.worksType=='video'" controls>
<source :src="item.worksUrl" type="video/mp4" />
</video>
</van-swipe-item>
</van-swipe>
</div>
......@@ -171,6 +178,11 @@ export default {
width: 630px;
background-size: cover;
}
video {
height: 451px;
width: 630px;
}
}
.space {
......
......@@ -9,7 +9,13 @@
v-on:praiseSuccess="showPraiseSuccessModel"
v-on:showShare="shareModelVisiable=true"
></ViewModel>
<EditModel v-model="formData" v-if="init && formEdit" v-on:submit="showSuccessModel"></EditModel>
<EditModel
v-model="formData"
v-if="init && formEdit"
v-on:submit="submitSuccessHandler"
v-on:agreement="showAgreementModel"
v-on:privacy="showPrivacyModel"
></EditModel>
<div class="bottom-line"></div>
......@@ -100,23 +106,38 @@ export default {
this.initShare();
});
},
showSuccessModel() {
this.model.title = "温馨提示";
this.model.content = "报名已成功！";
this.model.index = "default";
this.model.btnShow = true;
this.model.btnText = "查看我的主页";
this.model.show = true;
let that = this;
this.model.confirmHandler = function() {
that.initActivity();
};
submitSuccessHandler(data) {
if (data.isFirst) {
this.model.title = "温馨提示";
this.model.content = "报名已成功！获得1次抽奖机会";
this.model.index = "default";
this.model.btnShow = true;
this.model.btnText = "前往抽奖";
this.model.show = true;
let that = this;
this.model.confirmHandler = function() {
that.$router.push("/draw");
};
} else {
this.model.title = "温馨提示";
this.model.content = "作品信息修改成功！";
this.model.index = "default";
this.model.btnShow = true;
this.model.btnText = "查看我的主页";
this.model.show = true;
let that = this;
this.model.confirmHandler = function() {
that.initActivity();
};
}
},
showPraiseSuccessModel() {
this.model.show = true;
this.model.title = "点赞成功";
this.model.content = "您已获得一次抽奖机会";
this.model.index = "default";
this.model.btnShow = true;
this.model.btnText = "前往抽奖";
......@@ -130,6 +151,14 @@ export default {
that.initActivity();
};
},
showAgreementModel() {
this.model.index = "agreement";
this.model.show = true;
},
showPrivacyModel() {
this.model.index = "privacy";
this.model.show = true;
},
initShare() {
let link = location.origin + location.pathname;
if (this.formData.worksCode) {
......
......@@ -73,7 +73,7 @@ const router = new Router({
router.beforeEach((to, from, next) => {
let link = location.origin + location.pathname;
as.setShare(link, null, null, null);
as.setShare(link, "", "", "");
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
......
......@@ -38,8 +38,8 @@ module.exports = {
// 它支持webPack-dev-server的所有选项
devServer: {
host: "192.168.0.101",
// host: "localhost",
// host: "192.168.0.101",
host: "localhost",
port: 9001, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
......