w-front-end / select_good · Commits

Commit b12f843643aee295f3552f4edb5c00c06726fee9

Authored by zhiyangdu
1 parent 240e60ce

新增健康商城活动

Inline Side-by-side
Showing 5 changed files with 1358 additions and 2 deletions
src/pages/healthGoodDetails/healthGoodDetails.less 0 → 100644
  View file @b12f843
  1 +.good-details-box{
  2 + padding-bottom: 130px;
  3 + .pl {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + &.is-open-app {
  7 + height: 122px;
  8 + }
  9 + &.is-cnlive {
  10 + height: 93px;
  11 + }
  12 + }
  13 + .hide{
  14 + display:none;
  15 + }
  16 + .call-app-box{
  17 + position: fixed;
  18 + z-index:1;
  19 + }
  20 + .back-box{
  21 + background-color: #FFF;
  22 + position:fixed;
  23 + z-index:1;
  24 + }
  25 + .goods-img{
  26 + display: block;
  27 + width: 100%;
  28 + height:750px
  29 + }
  30 + .main-box{
  31 + .title{
  32 + font-size: 34px;
  33 + font-weight: 500;
  34 + color: #333333;
  35 + line-height: 48px;
  36 + text-align: center;
  37 + margin:30px 20px 0 20px;
  38 + display: -webkit-box;
  39 + -webkit-line-clamp: 2;
  40 + /*! autoprefixer: off */
  41 + -webkit-box-orient: vertical;
  42 + /*! autoprefixer: on */
  43 + text-overflow: ellipsis;
  44 + overflow: hidden;
  45 + }
  46 + .title-t{
  47 + margin:20px 60px 10px 60px ;
  48 + display: flex;
  49 + align-items: center;
  50 + justify-content: center;
  51 + .price{
  52 + height: 40px;
  53 + font-size: 28px;
  54 + font-weight: 400;
  55 + color: #999999;
  56 + line-height: 40px;
  57 + margin-right: 24px;
  58 + text-decoration: line-through;
  59 + }
  60 + .integral{
  61 + height: 92px;
  62 + font-size: 66px;
  63 + font-weight: 500;
  64 + color: #FC1541;
  65 + line-height: 92px;
  66 + }
  67 + .integral-in{
  68 + height: 45px;
  69 + font-size: 32px;
  70 + font-weight: 400;
  71 + color: #333333;
  72 + line-height: 45px;
  73 + margin-left: 14px;
  74 + }
  75 + }
  76 + /*商品信息**/
  77 + .goods-info{
  78 + margin: 30px;
  79 + width: 690px;
  80 + background: #FFFFFF;
  81 + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.06);
  82 + border-radius: 24px;
  83 + overflow: hidden;
  84 + .good-title{
  85 + margin-top: 50px;
  86 + height: 42px;
  87 + font-size: 30px;
  88 + font-weight: 500;
  89 + color: #666666;
  90 + line-height: 42px;
  91 + text-align: center;
  92 + display: flex;
  93 + align-items: center;
  94 + justify-content: center;
  95 + .left{
  96 + margin-right: 28px;
  97 + }
  98 + .right{
  99 + margin-left: 28px;
  100 + }
  101 + span{
  102 + width: 46px;
  103 + height: 1.5px;
  104 + background-color: #B4B4B4;
  105 + }
  106 + }
  107 + .good-desc{
  108 + margin:40px 40px 10px 40px;
  109 + font-size: 26px;
  110 + font-weight: 300;
  111 + color: #999999;
  112 + line-height: 37px;
  113 + .text-left{
  114 + text-align: left;
  115 + margin-top: 20px;
  116 + .to-link{
  117 + color: #0091FF;
  118 + }
  119 + span{
  120 + font-size: 26px;
  121 + font-weight: 400;
  122 + color: #666666;
  123 + line-height: 37px;
  124 + }
  125 + }
  126 + }
  127 + /**相似商品*/
  128 + .column-list-box{
  129 + margin-top:40px;
  130 + }
  131 + }
  132 + }
  133 + /**页脚*/
  134 + .footer{
  135 + width: 750px;
  136 + height: 130px;
  137 + background: #FFFFFF;
  138 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  139 + position: fixed;
  140 + bottom:0px;
  141 + left:0px;
  142 + display:flex;
  143 + justify-content: center;
  144 + align-items: center;
  145 + .btn{
  146 + width: 690px;
  147 + height: 90px;
  148 + line-height: 90px;
  149 + background: #F5A623;
  150 + border-radius: 16px;
  151 + text-align: center;
  152 + color: #fff;
  153 + font-size: 34px;
  154 + font-weight: 500;
  155 + color: #FFFFFF;
  156 + }
  157 + }
  158 +}
0 159 \ No newline at end of file
... ...
src/pages/healthGoodDetails/healthGoodDetails.vue 0 → 100644
  View file @b12f843
  1 +<template>
  2 +<div class="good-details-box">
  3 + <!-- H5唤起App组件 -->
  4 + <call-app-box
  5 + class="call-app-box"
  6 + :style="'padding-top: ' + $parent.top.value + 'px'"
  7 + ref="callApp"
  8 + v-if="!isCNLive.value"
  9 + :callApps="$parent.callApps"
  10 + >
  11 + </call-app-box>
  12 + <back-box
  13 + v-if="isCNLive.value"
  14 + :class="{'hide': $route.query.hideBack == true}"
  15 + class="back-box"
  16 + :style="'padding-top: ' + $parent.top.value + 'px'"
  17 + @back="back"
  18 + :backs="backs"
  19 + >
  20 + </back-box>
  21 + <!-- pl -->
  22 + <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
  23 + <!--轮播-->
  24 + <!-- <swiper
  25 + :style="
  26 + 'margin-top:' +
  27 + ($parent.isBack && isCNLive.value ? 62 : 10) +
  28 + 'px'
  29 + "
  30 + v-if="simgList"
  31 + :swipers="goodsInfo.simg"
  32 + :isPointsMall= 'true'
  33 + :options="{
  34 + showIndicators: true
  35 + }"
  36 + >
  37 + </swiper> -->
  38 + <img v-if="goodsInfo && goodsInfo.simg" class="goods-img" :src="goodsInfo.simg" alt=""/>
  39 + <!-- 内容 -->
  40 + <div class="main-box">
  41 + <!-- 标题 -->
  42 + <div v-if="goodsInfo && goodsInfo.title" class="title">
  43 + {{goodsInfo.title}}
  44 + </div>
  45 + <!-- 积分 -->
  46 + <div class="title-t">
  47 + <span v-if="goodsInfo && goodsInfo.prices" class="price">¥{{goodsInfo.prices}}</span>
  48 + <span v-if="goodsInfo && goodsInfo.num" class="integral">{{goodsInfo.num}}</span>
  49 + <span class="integral-in">积分</span>
  50 + </div>
  51 + <!-- 商品信息 -->
  52 + <div class="goods-info">
  53 + <div class="good-title">
  54 + <span class="left"></span>商品详情<span class="right"></span>
  55 + </div>
  56 + <div v-if="goodsInfo && goodsInfo.content" v-html="goodsInfo.content" class="good-desc html_box">
  57 + </div>
  58 + <div class="good-title">
  59 + <span class="left"></span>兑换规则<span class="right"></span>
  60 + </div>
  61 + <div class="good-desc">
  62 + <div v-if="goodsInfo && goodsInfo.shop_type && (goodsInfo.shop_type == 1 || goodsInfo.shop_type == 2)">
  63 + <div class="text-left">
  64 + 兑换此积分即可0元购买该商品；<br>
  65 + 仅限此商品使用，兑换后7天内有效；
  66 + </div>
  67 + <div class="text-left">
  68 + <span>· 正版授权</span>
  69 + 所售商品均已官方授权，请放心购买；
  70 + </div>
  71 + <div class="text-left">
  72 + <span>· 正品保障</span>
  73 + 独家正品保障。
  74 + </div>
  75 + </div>
  76 + <div v-if="goodsInfo && goodsInfo.shop_type && goodsInfo.shop_type == 2" class="text-left">
  77 + 1､ 您兑换的音频内容，音频上线期间可长期收听；<br>
  78 + 2､ 兑换后暂不支持退款，感谢您的支持；<br>
  79 + 3､ 兑换完成后若显示异常，请10分钟之后尝试；<br>
  80 + 4､您兑换的音频内容为网家家版权内容，请勿恶意转载；<br>
  81 + 5､客服电话：010-65832485;<br>
  82 + 6､ 具体注意事项详情可见
  83 + <span @click="toLink" class="to-link">
  84 + 《网家家APP购买音频内容服务协议》
  85 + </span>
  86 + </div>
  87 + </div>
  88 + <div class="good-title">
  89 + <span class="left"></span>相似商品<span class="right"></span>
  90 + </div>
  91 + <!-- 像是商品推荐 -->
  92 + <!-- 商品样式 7 列表 -->
  93 + <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail"
  94 + :lists="goodsInfo"
  95 + com="7">
  96 + </column-list-box>
  97 + </div>
  98 + </div>
  99 + <!-- 页脚 -->
  100 + <div class="footer">
  101 + <div class="btn" @click="exchange">
  102 + 立即兑换
  103 + </div>
  104 + </div>
  105 + <!-- 地址信息组件 -->
  106 + <app-address-toast ref="itemsInfo" @toUpdate="toLinkPointsMall" v-show="pointsToast_control"></app-address-toast>
  107 +</div>
  108 +</template>
  109 +
  110 +<script>
  111 +import { Swipe, SwipeItem } from 'vant';
  112 +import callAppBox from "@/components/callAppBox/callAppBox";
  113 +import swiper from "@/components/swiper/swiper";
  114 +import backBox from "@/components/backBox/backBox";
  115 +import columnListBox from "@/components/columnListBox/columnListBox";
  116 +import appAddressToast from "@/components/appAddressToast/appAddressToast";
  117 +import { Toast, Indicator } from "mint-ui";
  118 +export default {
  119 + name: 'goodDetails',
  120 + data () {
  121 + return {
  122 + banner: null,
  123 + goodsInfo: null,
  124 + backs: null, // 后退按钮组
  125 + pointsToast_control: false,
  126 + isExchange: false // 是否已经兑换
  127 + }
  128 + },
  129 + //部件
  130 + components: {
  131 + callAppBox,
  132 + swiper,
  133 + backBox,
  134 + columnListBox,
  135 + appAddressToast
  136 + },
  137 + //静态
  138 + props: [
  139 + ],
  140 + //对象内部的属性监听，也叫深度监听
  141 + watch: {
  142 + },
  143 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  144 + computed: {
  145 + },
  146 + //方法表示一个具体的操作，主要书写业务逻辑；
  147 + methods: {
  148 + // 跳转网家家购买音频协议
  149 + toLink () {
  150 + if (this.isCNLive.value) {
  151 + // 跳转封装
  152 + if (typeof this.$parent.gotoDetail === 'function') {
  153 + // 设置跳转参数
  154 + let params = {
  155 + type: '34',
  156 + to: "https://wjj.ys1.cnliveimg.com/term/liveFwxy.html?type=web",
  157 + shop_type: ''
  158 + };
  159 + // 页面跳转
  160 + this.$parent.gotoDetail(params);
  161 + }
  162 + } else {
  163 + this.$parent.callApp();
  164 + }
  165 + },
  166 + toLinkPointsMall () {
  167 + // 调用back返回上一页
  168 + // this.back();
  169 + // this.$router.push({
  170 + // path: '/pointsMall',
  171 + // query: {
  172 + // uid: this.getStore("uid")
  173 + // }
  174 + // })
  175 + },
  176 + /**
  177 + * 后退
  178 + */
  179 + back () {
  180 + // 返回先隐藏弹框
  181 +
  182 + // 判断是否有处理函数
  183 + if (typeof this.$parent.back === 'function') {
  184 + // 隐藏通用浮层
  185 + this.$parent.$refs.showModal.hideLayer();
  186 + // 后退
  187 + this.$parent.back();
  188 + } else {
  189 +
  190 + // 后退
  191 + window.history.go(-1);
  192 + }
  193 + },
  194 + /**
  195 + * 跳转商品详情
  196 + * @param {Object} item [数据对象]
  197 + */
  198 + toDetail (item) {
  199 + if (this.isCNLive.value) {
  200 + // 跳转封装
  201 + if (typeof this.$parent.gotoDetail === 'function') {
  202 +
  203 + // 设置跳转参数
  204 + let params = {
  205 + type: '5',
  206 + to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
  207 + shop_type: ''
  208 + };
  209 +
  210 + // 页面跳转
  211 + this.$parent.gotoDetail(params);
  212 + }
  213 + } else {
  214 + this.$parent.callApp();
  215 + }
  216 + },
  217 + // 兑换
  218 + exchange () {
  219 + if (this.isCNLive.value) {
  220 + // 提示用积分兑换兑换
  221 + let options = {
  222 + title: "",
  223 + message: "确定使用" + this.goodsInfo.num + "积分兑换?",
  224 + confirmButtonText: "确定",
  225 + confirmButtonCallback: this.addIntegralOrderconfirm,
  226 + showCancelButton: true,
  227 + cancelButtonText: "取消"
  228 + };
  229 + // 调用showModal层参数
  230 + this.$set(this.$parent, "showOptions", options);
  231 + // 显示通用浮层
  232 + this.$parent.$refs.showModal.showLayer();
  233 + } else {
  234 + this.$parent.callApp();
  235 + }
  236 + },
  237 + // 确定兑换回调
  238 + addIntegralOrderconfirm () {
  239 + // isExchange为false才可兑换防止连续点击
  240 + if (!this.isExchange) {
  241 + // 兑换
  242 + this.addIntegralOrder();
  243 + }
  244 + },
  245 + /**
  246 + * 分享
  247 + */
  248 + toShare () {
  249 + // 判断分享
  250 + if (typeof this.$parent.toShare === 'function') {
  251 + this.$parent.toShare(46, this.$route.query.goodsId, "");
  252 + }
  253 + },
  254 + /**
  255 + * 积分商品详情页页面接口
  256 + */
  257 + addIntegralOrder () {
  258 + // 加载中提示
  259 + Indicator.open("加载中...");
  260 + // 获取证书请求接口
  261 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/addIntegralOrder", {
  262 + uid: this.getStore("uid"),
  263 + id: this.$route.query.goodsId, // 商品ID
  264 + num: 1
  265 + }, this.addIntegralOrderCallback, {
  266 + method: "POST"
  267 + });
  268 + },
  269 +
  270 + /**
  271 + * 积分商品详情页页面接口回调
  272 + * @param {Object} res [服务器返回数据]
  273 + * @param {Object} ext [扩展参数]
  274 + */
  275 + addIntegralOrderCallback (res, ext) {
  276 +
  277 + // 加载完成
  278 + Indicator.close();
  279 +
  280 + // 返回处理
  281 + if (res.code == 200) {
  282 + // 解构数据
  283 + let { data: datas } = res;
  284 + // 方式连续点击兑换
  285 + this.isExchange = true;
  286 + // 两秒后可继续兑换
  287 + let _this = this
  288 + setTimeout(function () {
  289 + _this.isExchange = false;
  290 + }, 1500);
  291 + // 提示语判断
  292 + let tipMessage;
  293 + if (datas.shop_type == 1) {
  294 + tipMessage = "兑换成功"
  295 + } else if (datas.shop_type == 2) {
  296 + tipMessage = "红包已存入您的账户，可前往“我的”—“我的卡券查看”"
  297 + } else if (datas.shop_type == 3) {
  298 + tipMessage = "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”"
  299 + }
  300 + // 显示查看地址弹框
  301 + let options = {
  302 + message: tipMessage,
  303 + messageAlign: "center",
  304 + confirmButtonText: "我知道了",
  305 + confirmButtonCallback: this.addAddressCallback,
  306 + params: { shopType: datas.shop_type, id: datas.id }
  307 + };
  308 + this.$set(this.$parent, "showOptions", options);
  309 + // 显示通用浮层
  310 + this.$parent.$refs.showModal.showLayer();
  311 + } else if (res.code == 401) {
  312 + // 获取积分商品详情页失败
  313 + //
  314 + // 显示查看地址弹框
  315 + let options = {
  316 + title: "",
  317 + message: "你的积分不足" + "<br>" + "赚取更多积分，请至任务列表",
  318 + messageAlign: "center",
  319 + confirmButtonText: "确定",
  320 + confirmButtonCallback: this.jumpClientIntegralList,
  321 + showCancelButton: true,
  322 + cancelButtonText: "取消"
  323 + };
  324 + this.$set(this.$parent, "showOptions", options);
  325 + // 显示通用浮层
  326 + this.$parent.$refs.showModal.showLayer();
  327 + } else {
  328 + Toast(res.message);
  329 + }
  330 + },
  331 + // 填写地址
  332 + addAddressCallback (params) {
  333 + // 如果是实物弹起填写地址弹窗
  334 + if (params.shopType == 1) {
  335 + this.pointsToast_control = true;
  336 + // 礼品兑换弹框派发
  337 + this.$refs.itemsInfo.getItemInfo(this.goodsInfo, params.id)
  338 + }
  339 + },
  340 + /**
  341 + * 跳转赚取积分页面
  342 + * @param {Object} item [数据对象]
  343 + */
  344 + jumpClientIntegralList () {
  345 + // 判断APP内
  346 + if (this.isCNLive.value) {
  347 + // （判断app内是否有该方法）
  348 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
  349 + // 跳转到原生的任务列表
  350 + window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
  351 + } else if (window.obj && window.obj.jumpClientIntegralList) {
  352 + // 跳转到原生的任务列表
  353 + window.obj.jumpClientIntegralList();
  354 + }
  355 + }
  356 + },
  357 + /**
  358 + * 积分商品详情页页面接口
  359 + */
  360 + getGoodsInfo (goodsId) {
  361 + // 加载中提示
  362 + Indicator.open("加载中...");
  363 + // 获取证书请求接口
  364 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/integralGoodsInfo", {
  365 + id: goodsId // 商品ID
  366 + }, this.getGoodsInfoCallback, {
  367 + method: "POST"
  368 + });
  369 + },
  370 +
  371 + /**
  372 + * 积分商品详情页页面接口回调
  373 + * @param {Object} res [服务器返回数据]
  374 + * @param {Object} ext [扩展参数]
  375 + */
  376 + getGoodsInfoCallback (res, ext) {
  377 +
  378 + // 加载完成
  379 + Indicator.close();
  380 +
  381 + // 返回处理
  382 + if (res.code == 200) {
  383 +
  384 + // 解构数据
  385 + let { data: datas } = res;
  386 + /* 获取详细信息 */
  387 + this.goodsInfo = datas
  388 + /* 相似商品 */
  389 + } else if (res.code == 400) {
  390 +
  391 + // 获取积分商品详情页失败
  392 + Toast(res.message);
  393 + } else {
  394 +
  395 + // 获取积分商品详情页失败
  396 + Toast("获取积分商品详情页失败");
  397 + }
  398 + },
  399 + /**
  400 + * app选中地址回选
  401 + * @param {Object} addressInfo [服务器返回数据]
  402 + */
  403 + appSelectAddressCallback (addressInfo) {
  404 + if (this.isAndroid.value) {
  405 + this.$refs.itemsInfo.getAppAddressInfo(addressInfo);
  406 + } else {
  407 + if (addressInfo) {
  408 + this.$refs.itemsInfo.getAppAddressInfo(JSON.parse(addressInfo));
  409 + } else {
  410 + this.$refs.itemsInfo.getAppAddressInfo();
  411 + }
  412 + }
  413 + },
  414 + },
  415 + //请求数据
  416 + created () {
  417 + // 设置标题
  418 + this.$set(this, "title", "积分商品详情页");
  419 + // 获取商品ID
  420 + let goodsId = this.$route.query.goodsId;
  421 + if (goodsId) {
  422 + // 获取商品信息
  423 + this.getGoodsInfo(goodsId);
  424 + }
  425 + // ios从url获取安卓localStorage
  426 + if (this.isiPhone.value) {
  427 + this.pointsToast_control = this.$route.query.pointsToast_control;
  428 + } else {
  429 + let ext = window.localStorage.getItem("ext");
  430 + this.pointsToast_control = this.getParameterByName(
  431 + "pointsToast_control",
  432 + ext
  433 + );
  434 + }
  435 +
  436 + // 判断是否在App内
  437 + if (this.isCNLive.value) {
  438 +
  439 + // 添加后退按钮组“后退”和“分享”按钮
  440 + this.$set(this, 'backs', {
  441 + funcs: {
  442 + back: {
  443 + icon: "static/img/icon_back.png"
  444 + },
  445 + funcArray: [
  446 + {
  447 + icon: "static/img/icon_share.png",
  448 + func: this.toShare
  449 + }
  450 + ]
  451 + }
  452 + });
  453 +
  454 + // 设置标题
  455 + this.$set(this.backs, 'title', '积分商品详情页');
  456 + }
  457 +
  458 + },
  459 + mounted () {
  460 + var that = this;
  461 + window["appSelectAddressCallback"] = function (result) {
  462 + that.appSelectAddressCallback(result);
  463 + };
  464 + // 如果是App外，设置唤起App和微信内分享参数
  465 + // if (!this.isCNLive.value) {
  466 + // // 设置积分首页唤起app参数
  467 + // if (typeof this.$parent.getOpenApp === "function") {
  468 + // this.$parent.getOpenApp({
  469 + // type: 46,
  470 + // id: this.$route.query.goodsId,
  471 + // url: ""
  472 + // });
  473 + // }
  474 + // }
  475 + // // 地址回选原生回调
  476 + // if (this.isiPhone.value) {
  477 + // var that = this;
  478 + // function resolution (data) {
  479 + // that.appSelectAddressCallback();
  480 + // }
  481 + // this.$bridge.registerHandler("appSelectAddressCallback", function (
  482 + // data,
  483 + // responseCallback
  484 + // ) {
  485 + // resolution(data);
  486 +
  487 + // responseCallback(data);
  488 + // });
  489 + // } else if (this.isAndroid.value) {
  490 +
  491 + // }
  492 + },
  493 + destroyed () {
  494 + // 隐藏通用浮层
  495 + this.$parent.$refs.showModal.hideLayer();
  496 + }
  497 +}
  498 +</script>
  499 +
  500 +<style rel="stylesheet/less" lang="less" scoped>
  501 +@import './healthGoodDetails.less';
  502 +</style>
  503 +
  504 +<style>
  505 +.html_box img {
  506 + display: block;
  507 + width: 100%;
  508 +}
  509 +</style>
  510 +
... ...
src/pages/healthMall/healthMall.less 0 → 100644
  View file @b12f843
  1 +@charset "UTF-8";
  2 +// 占位
  3 +.pl {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + &.is-open-app {
  7 + height: 122px;
  8 + }
  9 + &.is-cnlive {
  10 + height: 93px;
  11 + }
  12 +}
  13 +// 列表
  14 +.column-list-box{
  15 + display: flex;
  16 + justify-content: center;
  17 +}
  18 +.hide{
  19 + display:none;
  20 +}
  21 +.call-app-box{
  22 + position: fixed;
  23 + z-index: 2;
  24 +}
  25 +.back-box{
  26 + background-color: transparent;
  27 + position: fixed;
  28 + top: 0;
  29 + left:0;
  30 + z-index: 2;
  31 +}
  32 +.main_box{
  33 + width: 100%;
  34 + min-height: 100vh;
  35 + background:#fff url("../../../static/img/pointsBack.png") no-repeat
  36 + center top;
  37 + background-size: 100%;
  38 + overflow: hidden;
  39 + // 头部
  40 + .top_main{
  41 + margin:40px 30px;
  42 + padding: 30px;
  43 + height: 394px;
  44 + background: #FFFFFF;
  45 + box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06);
  46 + border-radius: 24px;
  47 + .top{
  48 + display: flex;
  49 + justify-content: space-between;
  50 + .left{
  51 + height: 40px;
  52 + font-size: 28px;
  53 + font-weight: 400;
  54 + color: #45270D;
  55 + line-height: 40px;
  56 + span{
  57 + margin-left: 8px;
  58 + height: 40px;
  59 + font-size: 28px;
  60 + font-weight: 500;
  61 + color: #F5A623;
  62 + line-height: 40px;
  63 + }
  64 + }
  65 + .right{
  66 + height: 33px;
  67 + font-size: 24px;
  68 + font-weight: 400;
  69 + color: #999999;
  70 + line-height: 33px;
  71 + display: flex;
  72 + justify-content: center;
  73 + align-items: center;
  74 + .back_right_iocn{
  75 + display: block;
  76 + width: 20px;
  77 + height:20px;
  78 + margin-left: 10px;
  79 + }
  80 + }
  81 + }
  82 + // 商品类型
  83 + .item_box{
  84 + display: flex;
  85 + justify-content: space-between;
  86 + margin: 40px 80px 30px 80px;
  87 + .item{
  88 + img{
  89 + display: block;
  90 + width: 90px;
  91 + height:90px;
  92 + }
  93 + .text{
  94 + height: 33px;
  95 + font-size: 24px;
  96 + font-weight: 400;
  97 + color: #666666;
  98 + line-height: 33px;
  99 + margin-top: 12px;
  100 + }
  101 + }
  102 + }
  103 + //赚取积分
  104 + .earn_points_box{
  105 + height: 90px;
  106 + background: #FFF8E8;
  107 + border-radius: 12px;
  108 + display:flex;
  109 + justify-content: space-between;
  110 + align-items: center;
  111 + padding: 20px 20px;
  112 + .earn_icon{
  113 + display: block;
  114 + width: 36px;
  115 + height:36px;
  116 + }
  117 + .desc{
  118 + height: 90px;
  119 + font-size: 26px;
  120 + font-weight: 400;
  121 + color: #746037;
  122 + line-height: 90px;
  123 + }
  124 + .btn{
  125 + font-size: 24px;
  126 + padding: 0 20px;
  127 + height: 50px;
  128 + background: #DAB277;
  129 + border-radius: 26px;
  130 + color: #fff;
  131 + text-align: center;
  132 + display: flex;
  133 + align-items: center;
  134 + .earn_right_back{
  135 + display: block;
  136 + width: 9px;
  137 + height: 18px;
  138 + margin-left: 8px;
  139 + }
  140 + }
  141 + }
  142 + }
  143 + // 内容区域
  144 + .tab_item_box{
  145 + display: flex;
  146 + align-items: center;
  147 + // justify-content: space-between;
  148 + margin:50px 30px 33px 30px;
  149 + .item{
  150 + height: 33px;
  151 + font-size: 24px;
  152 + font-weight: 400;
  153 + color: #999999;
  154 + line-height: 33px;
  155 + }
  156 + .active{
  157 + height: 48px;
  158 + font-size: 34px;
  159 + font-weight: 600;
  160 + color: #373737;
  161 + line-height: 48px;
  162 + }
  163 + .line{
  164 + width: 1px;
  165 + height: 20px;
  166 + background: #999999;
  167 + margin: 0 16px;
  168 + }
  169 + }
  170 + // 为你推荐
  171 + .list-box {
  172 + display: flex;
  173 + justify-content: space-between;
  174 + align-items: center;
  175 + .discount-flag {
  176 + position: absolute;
  177 + top: 4px;
  178 + left: 22px;
  179 + z-index: 1;
  180 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  181 + padding: 1px 8px;
  182 + color: #945A08;
  183 + font-size: 20px;
  184 + font-weight: 400;
  185 + border-radius: 6px;
  186 + }
  187 + }
  188 +}
0 189 \ No newline at end of file
... ...
src/pages/healthMall/healthMall.vue 0 → 100644
  View file @b12f843
  1 +<template>
  2 +<div>
  3 + <!-- H5唤起App组件 -->
  4 + <call-app-box
  5 + class="call-app-box"
  6 + :style="'padding-top: ' + $parent.top.value + 'px'"
  7 + ref="callApp"
  8 + v-if="!isCNLive.value"
  9 + :callApps="$parent.callApps"
  10 + >
  11 + </call-app-box>
  12 + <div class="main_box">
  13 + <!-- pl -->
  14 + <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'" :class="{'is-open-app': $parent.isOpenApp.value,'is-cnlive': isCNLive.value, 'hide': $route.query.hideBack == true}"></div>
  15 + <back-box
  16 + v-if="isCNLive.value"
  17 + :class="{'hide': $route.query.hideBack == true}"
  18 + class="back-box"
  19 + :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(255, 255, 255, ' + opacity + ')'" ref="navBox"
  20 + @back="back"
  21 + :backs="backs">
  22 + </back-box>
  23 + <div class="top_main">
  24 + <!-- 头部 -->
  25 + <div class="top">
  26 + <div class="left">
  27 + 我的积分: <span>{{myGrade}}</span>
  28 + </div>
  29 + <div @click="toExchangeRecord" class="right">
  30 + 兑换记录
  31 + <!-- 返回图标 -->
  32 + <img class="back_right_iocn" src="static/img/points_icon_grey_right.png" alt=""/>
  33 + </div>
  34 + </div>
  35 + <!-- 商品类型 -->
  36 + <div class="item_box" v-if="navs && navs.length">
  37 + <div class="item" v-for="(item, index) in navs" :key="index" @click="anchor(item)">
  38 + <img :src="item.simg" alt=""/>
  39 + <div class="text">{{item.title}}</div>
  40 + </div>
  41 + </div>
  42 + <!--积分赚取 -->
  43 + <div class="earn_points_box">
  44 + <img class="earn_icon" src="static/img/points_icon_pice.png" alt="">
  45 + <div class="desc">赚取更多积分，兑换精美礼品～</div>
  46 + <div @click="jumpClientIntegralList" class="btn">赚积分 <img class="earn_right_back" src="static/img/points_icon_white_right.png" alt=""/></div>
  47 + </div>
  48 + </div>
  49 + <!-- 为你推荐 -->
  50 + <div class="tab_item_box">
  51 + <div class="item active">为你推荐</div>
  52 + <!-- 分割线 -->
  53 + <div class="line"> </div>
  54 + <div class="item">满减红包 精品推荐</div>
  55 + </div>
  56 + <!-- 为你推荐商品列表 -->
  57 + <div class="list-box">
  58 + <!-- 商品展示样式 2 -->
  59 + <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDetail(item)"
  60 + :item="item"
  61 + pid="5">
  62 + </goods-item-2>
  63 + </div>
  64 +
  65 +
  66 + <!-- 实物商品 -->
  67 + <div ref="physicalGoodsBox">
  68 + <div class="tab_item_box">
  69 + <div class="item active">实物商品</div>
  70 + <!-- 分割线 -->
  71 + <div class="line"> </div>
  72 + <div class="item">热门商品 精品推荐</div>
  73 + </div>
  74 + <!-- 实物商品裂变 -->
  75 + <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
  76 + <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail"
  77 + :lists="phyicalGoods"
  78 + com="7">
  79 + </column-list-box>
  80 + </div>
  81 +
  82 +
  83 + <!-- 虚拟商品 -->
  84 + <div ref="virtualGoodsBox">
  85 + <div class="tab_item_box">
  86 + <div class="item active">虚拟商品</div>
  87 + <!-- 分割线 -->
  88 + <div class="line"> </div>
  89 + <div class="item">虚拟商品 精品推荐</div>
  90 + </div>
  91 + <!-- 商品样式 7 列表 -->
  92 + <column-list-box class="column-list-box" v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" @jump="toDetail"
  93 + :lists="virtualGoods"
  94 + com="7">
  95 + </column-list-box>
  96 + </div>
  97 +
  98 + <!-- 满减红包 -->
  99 + <div ref="fullReductionBox">
  100 + <div class="tab_item_box">
  101 + <div class="item active">满减红包</div>
  102 + <!-- 分割线 -->
  103 + <div class="line"> </div>
  104 + <div class="item">满减红包 精品推荐</div>
  105 + </div>
  106 + <!-- 商品样式 7 列表 -->
  107 + <column-list-box class="column-list-box" v-if="redEnvelopeFull && redEnvelopeFull.list && redEnvelopeFull.list.length" @jump="toDetail"
  108 + :lists="redEnvelopeFull"
  109 + com="7">
  110 + </column-list-box>
  111 + </div>
  112 + </div>
  113 +</div>
  114 +</template>
  115 +
  116 +<script>
  117 +import { Toast, Indicator } from "mint-ui";
  118 +import callAppBox from "@/components/callAppBox/callAppBox";
  119 +import backBox from "@/components/backBox/backBox";
  120 +import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  121 +import columnListBox from "@/components/columnListBox/columnListBox";
  122 +export default {
  123 + name: 'pointsmall',
  124 + data () {
  125 + return {
  126 + opacity: 0, // 透明度
  127 + title: "", // 标题
  128 + backs: null, // 后退按钮组
  129 + navs: null, // 导航
  130 + myGrade: 0, // 我的积分
  131 + goodsLists: null, // 为你推荐商品
  132 + phyicalGoods: { list: null }, // 实物商品
  133 + virtualGoods: { list: null }, // 虚拟商品
  134 + redEnvelopeFull: { list: null } // 满减红包
  135 + }
  136 + },
  137 + //部件
  138 + components: {
  139 + callAppBox,
  140 + backBox,
  141 + goodsItem2,
  142 + columnListBox
  143 + },
  144 + //静态
  145 + props: [
  146 + ],
  147 + //对象内部的属性监听，也叫深度监听
  148 + watch: {
  149 + },
  150 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  151 + computed: {
  152 + },
  153 + //方法表示一个具体的操作，主要书写业务逻辑；
  154 + methods: {
  155 + /**
  156 + * 锚点定位
  157 + * @param {Object} item [数据对象]
  158 + */
  159 + anchor (item) {
  160 + if (this.isCNLive.value) {
  161 + // 判断锚点是否存在
  162 + if (item.ref && typeof this.$refs === 'object' && typeof this.$refs[item.ref] === 'object') {
  163 +
  164 + // 根据头部设置锚点位置
  165 + let safeDistance = 0;
  166 +
  167 + // 判断是否有callApp组件
  168 + if (typeof this.$refs.callApp === 'object') {
  169 + safeDistance += this.$refs.callApp.$el.clientHeight;
  170 + }
  171 +
  172 + // 判断是否有backBox组件
  173 + if (typeof this.$refs.backBox === 'object') {
  174 + safeDistance += this.$refs.backBox.$el.clientHeight;
  175 + }
  176 +
  177 + document.documentElement.scrollTop = document.body.scrollTop = this.$refs[item.ref].offsetTop - safeDistance - (20 * ((document.documentElement.clientWidth || document.body.clientWidth) / 750)) - (this.$parent.top.value + 60);
  178 + }
  179 + } else {
  180 + this.$parent.callApp();
  181 + }
  182 + },
  183 + /**
  184 + * 跳转到兑换记录详情页
  185 + * @param {Object} item [数据对象]
  186 + */
  187 + toExchangeRecord () {
  188 + if (this.isCNLive.value) {
  189 + this.$router.push({
  190 + path: '/pointsExchangeRecords',
  191 + query: {
  192 + uid: this.getStore("uid"),
  193 + }
  194 + })
  195 + } else {
  196 + this.$parent.callApp();
  197 + }
  198 + },
  199 + /**
  200 + * 跳转赚取积分页面
  201 + * @param {Object} item [数据对象]
  202 + */
  203 + jumpClientIntegralList () {
  204 + // 判断APP内
  205 + if (this.isCNLive.value) {
  206 + // （判断app内是否有该方法）
  207 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
  208 + // 跳转到原生的任务列表
  209 + window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
  210 + } else if (window.obj && window.obj.jumpClientIntegralList) {
  211 + // 跳转到原生的任务列表
  212 + window.obj.jumpClientIntegralList();
  213 + }
  214 + } else {
  215 + this.$parent.callApp();
  216 + }
  217 + },
  218 + /**
  219 + * 跳转商品详情
  220 + * @param {Object} item [数据对象]
  221 + */
  222 + toDetail (item) {
  223 + if (this.isCNLive.value) {
  224 + // this.$router.push({
  225 + // path: "/goodDetails",
  226 + // query: {
  227 + // goodsId: item.id,
  228 + // uid: this.getStore("uid")
  229 + // }
  230 + // })
  231 + // 通用跳转跳转到商品详情页新打开webview
  232 + if (typeof this.$parent.gotoDetail === 'function') {
  233 +
  234 + // 设置跳转参数
  235 + let params = {
  236 + type: '5',
  237 + to: window.location.origin + '/html/select_good/1/#/healthGoodDetails?goodsId=' + item.id,
  238 + shop_type: ''
  239 + };
  240 +
  241 + // 页面跳转
  242 + this.$parent.gotoDetail(params);
  243 + }
  244 + } else {
  245 + this.$parent.callApp();
  246 + }
  247 + },
  248 + /**
  249 + * 分享
  250 + */
  251 + toShare () {
  252 +
  253 + // 判断分享
  254 + if (typeof this.$parent.toShare === 'function') {
  255 + this.$parent.toShare(45, "1", "");
  256 + }
  257 + },
  258 +
  259 + /**
  260 + * 后退
  261 + */
  262 + back () {
  263 +
  264 + // 判断是否有处理函数
  265 + if (typeof this.$parent.back === 'function') {
  266 +
  267 + // 后退
  268 + this.$parent.back();
  269 + } else {
  270 +
  271 + // 后退
  272 + window.history.go(-1);
  273 + }
  274 + },
  275 + // 积分商场首页
  276 + /**
  277 + * 获取积分商场首页信息
  278 + * * @param {string} uid [用户id]
  279 + */
  280 + integralMallIndex () {
  281 +
  282 + // 加载中提示
  283 + Indicator.open('加载中...');
  284 +
  285 + // 请求接口
  286 + this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewIndex", {
  287 + uid: this.getStore("uid"),
  288 + }, this.integralMallIndexCallback, {
  289 + method: "POST"
  290 + });
  291 + },
  292 +
  293 + /**
  294 + * 获取积分商场首页信息
  295 + * @param {object} res [服务器返回数据]
  296 + * @param {object} ext [扩展参数]
  297 + */
  298 + integralMallIndexCallback (res, ext) {
  299 +
  300 + // 加载完成
  301 + Indicator.close();
  302 +
  303 + // 返回处理
  304 + if (res.code == 200) {
  305 +
  306 + // 解构数据
  307 + let { data: datas } = res;
  308 + this.info = datas
  309 + /* 积分商场首页信息 开始 */
  310 + /*用户信息 */
  311 + this.$set(this, "myGrade", datas.grade);
  312 + /*为你推荐 */
  313 + this.$set(this, "goodsLists", datas.hot_goods);
  314 + /*实物商品 */
  315 + this.$set(this.phyicalGoods, "list", datas.goods1);
  316 + /*满减红包商品 */
  317 + this.$set(this.redEnvelopeFull, "list", datas.goods2);
  318 + /*虚拟商品 */
  319 + this.$set(this.virtualGoods, "list", datas.goods3);
  320 + } else if (res.code == 400) {
  321 +
  322 + // 获取积分商场首页信息失败
  323 + Toast(res.message || "获取积分商场首页信息失败");
  324 + } else {
  325 + // 获取积分商场首页信息失败
  326 + Toast(res.message);
  327 + }
  328 + },
  329 +
  330 + /**
  331 +* 滚动条滚动/touchmove监听处理
  332 +* @param {object} e [滚动条对象]
  333 +* @param {boolean} isTimeout [是否为setTimeout方法调用]
  334 +*/
  335 + onPageScrollFun (e, isTimeout = false) {
  336 +
  337 + // 获取滚动条位置，浏览器兼容处理
  338 + let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
  339 +
  340 + // 滚动控制高度
  341 + let maxHeight = 200;
  342 +
  343 + // 动态获取百分比分配比例
  344 + if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
  345 + maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
  346 + }
  347 +
  348 + if (scrollTop >= 0 && scrollTop <= maxHeight) {
  349 + this.opacity = scrollTop / maxHeight;
  350 + } else if (scrollTop > maxHeight) {
  351 + this.opacity = 1;
  352 + } else {
  353 + this.opacity = 0;
  354 + }
  355 +
  356 + if (!isTimeout) {
  357 +
  358 + if (this.timer) {
  359 + clearTimeout(this.timer);
  360 + }
  361 +
  362 + // 倒计时校正滚动条位置
  363 + this.timer = setTimeout(function (options) {
  364 +
  365 + // 递归
  366 + options.context.onPageScrollFun(options.e, true);
  367 + }, 1000, { e, context: this });
  368 + }
  369 + }
  370 + },
  371 + head: {
  372 + title () {
  373 + return {
  374 + inner: this.title
  375 + }
  376 + }
  377 + },
  378 + watch: {
  379 +
  380 + // 设置页面标题
  381 + title (newVal) {
  382 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  383 + this.$iFrame.insertIFrame(newVal);
  384 + } else {
  385 + this.$emit("updateHead");
  386 + }
  387 + }
  388 + },
  389 + //请求数据
  390 + created () {
  391 + // 设置标题
  392 + this.$set(this, "title", "积分商城");
  393 +
  394 + // 设置锚点定位数据
  395 + this.$set(this, 'navs', [
  396 + {
  397 + ref: 'physicalGoodsBox',
  398 + simg: 'static/img/points_item01.png',
  399 + title: '实物商品'
  400 + },
  401 + {
  402 + ref: 'virtualGoodsBox',
  403 + simg: 'static/img/points_item02.png',
  404 + title: '虚拟商品'
  405 + },
  406 + {
  407 + ref: 'fullReductionBox',
  408 + simg: 'static/img/points_item03.png',
  409 + title: '满减红包'
  410 + }
  411 + ]);
  412 + // 判断是否在App内
  413 + if (this.isCNLive.value) {
  414 +
  415 + // 添加后退按钮组“后退”和“分享”按钮
  416 + this.$set(this, 'backs', {
  417 + funcs: {
  418 + back: {
  419 + icon: "static/img/icon_back.png"
  420 + },
  421 + funcArray: [
  422 + {
  423 + icon: "static/img/icon_share.png",
  424 + func: this.toShare
  425 + }
  426 + ]
  427 + }
  428 + });
  429 +
  430 + // 设置标题
  431 + this.$set(this.backs, 'title', '积分商城');
  432 + }
  433 + // 获取积分商城商品信息接口
  434 + this.integralMallIndex();
  435 + },
  436 + mounted () {
  437 + // 如果是App外，设置唤起App和微信内分享参数
  438 + if (!this.isCNLive.value) {
  439 + // 设置积分首页唤起app参数
  440 + if (typeof this.$parent.getOpenApp === "function") {
  441 + this.$parent.getOpenApp({
  442 + type: 45,
  443 + id: 1,
  444 + url: ""
  445 + });
  446 + }
  447 + }
  448 +
  449 + // 监听滚动条，设置滚动条推动渐变颜色和图片
  450 + window.addEventListener("scroll", this.onPageScrollFun, true);
  451 +
  452 + // 页面显示监听
  453 + document.addEventListener('visibilitychange', () => {
  454 +
  455 + // 页面显示出来了
  456 + if (document.hidden === false) {
  457 +
  458 + // 获取积分商城商品信息接口
  459 + this.integralMallIndex();
  460 + }
  461 + });
  462 + }
  463 +}
  464 +</script>
  465 +
  466 +<style rel="stylesheet/less" lang='less' scoped>
  467 +@import 'healthMall';
  468 +</style>
  469 +
... ...
src/router/index.js
  View file @b12f843
... ... @@ -206,7 +206,9 @@ const router = new Router({
206 206 path: "/discountList2",
207 207 name: "discountList2",
208 208 component: resolve => {
209   - require(["@/pages/discountList2/discountList2"], resolve);
  209 + require([
  210 + "@/pages/discountList2/discountList2"
  211 + ], resolve);
210 212 },
211 213 meta: {
212 214 requireAuth: false
... ... @@ -236,6 +238,7 @@ const router = new Router({
236 238 requireAuth: false
237 239 }
238 240 },
  241 +
239 242 /* 优选和商城页面改版升级页面 结束 */
240 243 /* 积分商城开始 */
241 244 {
... ... @@ -250,7 +253,7 @@ const router = new Router({
250 253 }
251 254 },
252 255 {
253   - // 积分商城兑换记录
  256 + // 积分商城兑换记录与其他积分商城共用
254 257 path: "/pointsExchangeRecords",
255 258 name: "pointsExchangeRecords",
256 259 component: resolve => {
... ... @@ -272,7 +275,35 @@ const router = new Router({
272 275 meta: {
273 276 requireAuth: false
274 277 }
  278 + },
  279 + /* 积分商城结束 */
  280 +
  281 + /* 健步走健康值商城开始 */
  282 + {
  283 + // 健康商城首页
  284 + path: "/healthMall",
  285 + name: "healthMall",
  286 + component: resolve => {
  287 + require(["@/pages/healthMall/healthMall"], resolve);
  288 + },
  289 + meta: {
  290 + requireAuth: false
  291 + }
  292 + },
  293 + {
  294 + // 商品详情页
  295 + path: "/healthGoodDetails",
  296 + name: "healthGoodDetails",
  297 + component: resolve => {
  298 + require([
  299 + "@/pages/healthGoodDetails/healthGoodDetails"
  300 + ], resolve);
  301 + },
  302 + meta: {
  303 + requireAuth: false
  304 + }
275 305 }
  306 + /* 健步走健康值商城结束 */
276 307 ]
277 308 },
278 309 {
... ...