w-front-end / select_good · Commits

Commit b48247a7032c5202e77dfd68d02267e2102f01b1

Authored by zhiyangdu
1 parent e96627e8

积分商城

Inline Side-by-side
Showing 34 changed files with 1788 additions and 263 deletions
src/components/cardTabs/cardTabs.less 0 → 100644
  View file @b48247a
  1 +.tab_cart_box{
  2 + margin: 20px auto;
  3 +}
  4 +.van-tabs{
  5 + margin:0 10px;
  6 +}
  7 +.van-tabs--card>.van-tabs__wrap{
  8 + height:auto;
  9 +}
  10 +.van-tabs__nav--card{
  11 + height:auto;
  12 + border:none;
  13 +}
  14 +.van-tab{
  15 + flex: none;
  16 + width: 158px;
  17 + height: 52px;
  18 + line-height: 52px;
  19 + background-color: #F8F8F8;
  20 + border-radius: 29px;
  21 + border-right:none !important;
  22 + font-size: 26px;
  23 + font-weight: 400;
  24 + color: #999999 !important;
  25 + margin-right: 20px;
  26 +}
  27 +.van-tabs__nav--card .van-tab.van-tab--active{
  28 + background: linear-gradient(132deg, #FFEDD8 0%, #EBCAB3 100%) !important;
  29 + font-weight: 500;
  30 + color: #70624C !important;
  31 +}
  32 +.gift_main_box{
  33 + margin: 30px auto;
  34 + min-height: 520px;
  35 + // 暂无记录提示
  36 + .no_gift_tip{
  37 + width: 100%;
  38 + img{
  39 + display: block;
  40 + width: 500px;
  41 + height: 285px;
  42 + margin: 160px 125px 0 125px;
  43 + }
  44 + .text{
  45 + font-size: 30px;
  46 + font-weight: 400;
  47 + color: #999999;
  48 + line-height: 60px;
  49 + margin-top: 19px;
  50 + text-align: center;
  51 + margin-bottom: 160px;
  52 + }
  53 + }
  54 + .is_more{
  55 + width:100%;
  56 + height: 37px;
  57 + font-size: 26px;
  58 + font-weight: 400;
  59 + color: #999999;
  60 + line-height: 37px;
  61 + letter-spacing: 1px;
  62 + text-align: center;
  63 + margin-top:10px;
  64 + margin-bottom: 60px;
  65 + }
  66 +}
... ...
src/components/cardTabs/cardTabs.vue 0 → 100644
  View file @b48247a
  1 +<template>
  2 +<div class="tab_cart_box">
  3 +<van-tabs @change="change" type="card" v-model="active" animated swipeable>
  4 + <van-tab v-for="(item, index) in tags.list" :key="'t'+index" :title="item.key">
  5 + <!-- 实物商品裂变 -->
  6 + <div :key="'c' + index" class="gift_main_box">
  7 + <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
  8 + <div infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="phyicalGoods[active].loading" :infinite-scroll-distance="phyicalGoods[active].distance">
  9 + <column-list-box class="column-list-box" @jump="toDetail"
  10 + :lists="phyicalGoods[active]"
  11 + com="7" goodType="1" company="1">
  12 + </column-list-box>
  13 + </div>
  14 + <!-- 没有更多了 -->
  15 + <div v-show="phyicalGoods[active].list && phyicalGoods[active].list.length == 0 && phyicalGoods[active].isCall" class="no_gift_tip">
  16 + <img src="static/img/no_gift_tip.png" alt=""/>
  17 + <div class="text">暂无商品</div>
  18 + </div>
  19 + <div v-show="phyicalGoods[active].list && phyicalGoods[active].list.length>0 && phyicalGoods[active].isMore" class="is_more">
  20 + 没有更多了
  21 + </div>
  22 + </div>
  23 + </van-tab>
  24 +</van-tabs>
  25 +</div>
  26 +</template>
  27 +
  28 +<script>
  29 +import columnListBox from "@/components/columnListBox/columnListBox";
  30 +export default {
  31 +data () {
  32 + return {
  33 + active: 0,
  34 + }
  35 +},
  36 +//部件
  37 + components: {
  38 + columnListBox
  39 + },
  40 +//静态
  41 + props: ["tags","phyicalGoods"],
  42 +//对象内部的属性监听，也叫深度监听
  43 + watch: {
  44 + },
  45 +//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  46 + computed: {
  47 + },
  48 +//方法表示一个具体的操作，主要书写业务逻辑；
  49 + methods: {
  50 + change(index,key){
  51 + this.$set(this.tags, "value", this.tags.list[index].value);
  52 + this.$emit("tabChange",index);
  53 + },
  54 + // 商品详情页
  55 + toDetail(item){
  56 + this.$emit("toDetail",item);
  57 + },
  58 + // 下拉加载
  59 + loadMore(){
  60 + this.$emit("loadMore");
  61 + }
  62 + },
  63 +//请求数据
  64 + created() {
  65 +},
  66 + mounted() {
  67 +}
  68 +}
  69 +</script>
  70 +
  71 +<style rel="stylesheet/less" lang="less">
  72 +@import './cardTabs';
  73 +</style>
  74 +
... ...
src/components/goodsItem_2/goodsItem_2.vue
  View file @b48247a
... ... @@ -9,7 +9,7 @@
9 9 <div class="content-box">
10 10  
11 11 <!-- 因积分商城需要显示白色灰色字体标示 -->
12   - <div class="title" :class="{'grey': item.num, 'align-center': pid == '5' || item.num}" v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div>
  12 + <div class="title" :class="{'grey': item.num, 'align-center': pid == '5' || item.num}" v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || (pid == '5' && item.title)">{{item.title}}</div>
13 13  
14 14 <!-- 因积分商城不价格所有加上 !item.grade判断 -->
15 15 <div class="price-box" v-if="pid != '5'">
... ...
src/components/goodsItem_8/goodsItem_8.vue
  View file @b48247a
... ... @@ -19,8 +19,11 @@
19 19 </div>
20 20 <div class="bottom-box">
21 21 <div class="price-box">
22   - <div class="symbol">¥&nbsp;</div>
  22 + <!-- shop_type==1为积分实物商品展示积分加价格 -->
  23 + <div v-if="isIntegral" class="integer">{{item.num}}积分 + &nbsp;</div>
  24 + <div v-else class="symbol">¥&nbsp;</div>
23 25 <div class="integer">{{item.price}}</div>
  26 + <div class="symbol">元</div>
24 27 <div class="decimal"></div>
25 28 <div class="prices" v-if="sty && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
26 29 </div>
... ... @@ -47,7 +50,7 @@
47 50  
48 51 }
49 52 },
50   - props: ["item", "sty", "discountType"],
  53 + props: ["item", "sty", "discountType", "isIntegral"],
51 54 computed: {
52 55  
53 56 /**
... ...
src/components/shareItem/shareItem.less 0 → 100644
  View file @b48247a
  1 +@charset "UTF-8";
  2 +.share_item_box{
  3 + margin:30px;
  4 + display: flex;
  5 + justify-content: space-between;
  6 + .share_item{
  7 + padding: 18px 26px;
  8 + background: #fff;
  9 + border-radius: 10px;
  10 + display: flex;
  11 + align-items: center;
  12 + .left{
  13 + display: block;
  14 + width:28px;
  15 + height:28px;
  16 + }
  17 + .title{
  18 + font-size: 24px;
  19 + font-weight: 400;
  20 + color: #333333;
  21 + margin:0 10px;
  22 + }
  23 + .right{
  24 + display: block;
  25 + width: 20px;
  26 + height: 20px;
  27 + }
  28 + }
  29 +}
0 30 \ No newline at end of file
... ...
src/components/shareItem/shareItem.vue 0 → 100644
  View file @b48247a
  1 +<template>
  2 +<div>
  3 + <div class="share_item_box">
  4 + <div v-for="(item,index) in shareItems" :key="index" @click="func(item)" class="share_item">
  5 + <img class="left" :src="item.simg" alt=""/>
  6 + <div class="title">{{item.title}}</div>
  7 + <img class="right" :src="item.icon" alt=""/>
  8 + </div>
  9 + </div>
  10 +</div>
  11 +</template>
  12 +
  13 +<script>
  14 +export default {
  15 +data () {
  16 + return {
  17 + }
  18 +},
  19 +//部件
  20 + components: {
  21 + },
  22 +//静态
  23 + props: ["shareItems"],
  24 +//对象内部的属性监听，也叫深度监听
  25 + watch: {
  26 + },
  27 +//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  28 + computed: {
  29 + },
  30 +//方法表示一个具体的操作，主要书写业务逻辑；
  31 + methods: {
  32 + /**
  33 + * 功能按钮
  34 + * @param {object} shareItems [props对象]
  35 + * @param {int} index [索引]
  36 + */
  37 + func(item) {
  38 + if (typeof item.func === "function") {
  39 + item.func(item);
  40 + }
  41 + }
  42 + },
  43 +//请求数据
  44 + created() {
  45 +},
  46 + mounted() {
  47 +}
  48 +}
  49 +</script>
  50 +
  51 +<style rel="stylesheet/less" lang="less" scoped>
  52 +@import "shareItem";
  53 +</style>
  54 +
... ...
src/pages/common/common.vue
  View file @b48247a
... ... @@ -410,13 +410,10 @@
410 410 * @param {object} ext [分享扩展参数，可选参数]
411 411 */
412 412 toShare(type, id, ext = null) {
413   -
414 413 // 判断APP内
415 414 if (this.isCNLive.value) {
416   -
417 415 // 调用分享（新方法）
418 416 if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.toShare) {
419   -
420 417 // 分享
421 418 if (ext) {
422 419 window.webkit.messageHandlers.toShare.postMessage({body: {type: type, id: id, ext: JSON.stringify(ext)}});
... ...
src/pages/exchangeRanking/exchangeRanking.less 0 → 100644
  View file @b48247a
  1 +@charset "UTF-8";
  2 +
  3 +.hot-sale-list-page {
  4 + background-color: #F6F6F6;
  5 + min-height: 100vh;
  6 + .call-app-box {
  7 + position: fixed;
  8 + top: 0;
  9 + z-index: 100;
  10 + }
  11 + .back-box {
  12 + position: fixed;
  13 + top: 0;
  14 + z-index: 100;
  15 + background-color: #ffffff;
  16 + }
  17 + .pl {
  18 + background-color: transparent;
  19 + width: 100%;
  20 + &.is-open-app {
  21 + height: 122px;
  22 + }
  23 + &.is-cnlive {
  24 + height: 93px;
  25 + }
  26 + }
  27 + .main-box {
  28 + min-height: 480px;
  29 + background-repeat: no-repeat;
  30 + background-size: 100%;
  31 + min-height: 64vw;
  32 + background-position-y: top;
  33 + background-color: #F6F6F6;
  34 + .section {
  35 + margin: 0 auto;
  36 + width: 690px;
  37 + height: auto;
  38 + border-radius: 24px;
  39 + overflow: hidden;
  40 + &:last-child {
  41 + margin-bottom: 0;
  42 + }
  43 + &.goods-list {
  44 + padding-top: 220px;
  45 + /deep/ .goods-item-8-box {
  46 + background-color: #ffffff;
  47 + margin-bottom: 30px;
  48 + border-radius: 24px;
  49 + }
  50 + .discount-flag {
  51 + position: absolute;
  52 + top: 10px;
  53 + left: 10px;
  54 + z-index: 1;
  55 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  56 + padding: 1px 8px;
  57 + color: #945A08;
  58 + font-size: 20px;
  59 + font-weight: 400;
  60 + border-radius: 6px;
  61 + }
  62 + }
  63 + }
  64 + }
  65 +}
0 66 \ No newline at end of file
... ...
src/pages/exchangeRanking/exchangeRanking.vue 0 → 100644
  View file @b48247a
  1 +<template>
  2 + <div class="hot-sale-list-page">
  3 +
  4 + <!-- H5唤起App组件 -->
  5 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
  6 + :callApps="$parent.callApps">
  7 + </call-app-box>
  8 +
  9 + <!-- 后退导航 -->
  10 + <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value" @back="back"
  11 + :backs="backs">
  12 + </back-box>
  13 +
  14 + <!-- pl -->
  15 + <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
  16 +
  17 + <!-- 主区域 -->
  18 + <div class="main-box" :style="{backgroundImage: 'url(' + headerImg + ')'}">
  19 +
  20 + <!-- 商品列表 -->
  21 + <div class="section goods-list">
  22 +
  23 + <!-- 商品列表 -->
  24 + <goods-item-8 v-for="(item, index) in goodsLists" :key="index" @jump="toDetail" @primary="primary"
  25 + :item="item"
  26 + sty="2"
  27 + isIntegral="true">
  28 +
  29 + <!-- 添加flag -->
  30 + <flag slot="flag" v-if="flags && flags.icon && flags.icon[index]"
  31 + :flag="flags.icon[index]"
  32 + :position="flags.position"
  33 + :width="flags.width">
  34 + </flag>
  35 + </goods-item-8>
  36 + </div>
  37 + <div style="clear: both;"></div>
  38 + </div>
  39 +
  40 + <!-- 回到顶部按钮 -->
  41 + <goto-top
  42 + :top="parseInt(150)">
  43 + </goto-top>
  44 + </div>
  45 +</template>
  46 +
  47 +<script>
  48 +
  49 + // 引入组件
  50 + import { Toast, Indicator } from "mint-ui";
  51 + import callAppBox from "@/components/callAppBox/callAppBox";
  52 + import backBox from "@/components/backBox/backBox";
  53 + import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
  54 + import flag from "@/components/flag/flag";
  55 + import gotoTop from "@/components/gotoTop/gotoTop";
  56 +
  57 + export default {
  58 + name: 'hotSaleListPage',
  59 + data () {
  60 + return {
  61 + title: "", // 标题
  62 + backs: null, // 后退按钮组
  63 + headerImg: '', // 头部图片
  64 + goodsLists: null, // 商品列表
  65 + flags: null // 产品排名flag
  66 + }
  67 + },
  68 + components: {
  69 + callAppBox,
  70 + backBox,
  71 + goodsItem8,
  72 + flag,
  73 + gotoTop
  74 + },
  75 + created() {
  76 +
  77 + // 设置标题
  78 + this.$set(this, "title", "兑换排行榜");
  79 +
  80 + // 判断是否在App内
  81 + if (this.isCNLive.value) {
  82 +
  83 + // 添加后退按钮组“后退”和“分享”按钮
  84 + this.$set(this, 'backs', {
  85 + funcs: {
  86 + back: {
  87 + icon: "static/img/icon_back.png"
  88 + },
  89 + funcArray: [
  90 + {
  91 + icon: "static/img/icon_share.png",
  92 + func: this.toShare
  93 + }
  94 + ]
  95 + }
  96 + });
  97 +
  98 + // 设置标题
  99 + this.$set(this.backs, 'title', '兑换排行榜');
  100 + }
  101 +
  102 + // 兑换排行榜新接口
  103 + this.getIntegralNewGoodsList();
  104 +
  105 + // 设置头部图片地址
  106 + this.$set(this, 'headerImg', 'static/img/pointsMall/header_hot.png');
  107 +
  108 + // 设置产品排名flag对象
  109 + this.$set(this, 'flags', {
  110 + icon: [
  111 + 'static/img/icon_n1.png',
  112 + 'static/img/icon_n2.png',
  113 + 'static/img/icon_n3.png'
  114 + ],
  115 + position: {
  116 + top: -6,
  117 + left: 20
  118 + }
  119 + });
  120 + },
  121 + methods: {
  122 +
  123 + /**
  124 + * 兑换排行榜新接口
  125 + */
  126 + getIntegralNewGoodsList() {
  127 +
  128 + // 加载中提示
  129 + Indicator.open("加载中...");
  130 +
  131 + // 获取证书请求接口
  132 + this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewGoodsList", {
  133 + type: 4,
  134 + // uid: this.getStore("uid"),
  135 + page: 1,
  136 + }, this.getIntegralNewGoodsListCallback, {
  137 + method: "POST"
  138 + });
  139 + },
  140 +
  141 + /**
  142 + * 兑换排行榜新接口回调
  143 + * @param {Object} res [服务器返回数据]
  144 + * @param {Object} ext [扩展参数]
  145 + */
  146 + getIntegralNewGoodsListCallback(res, ext) {
  147 +
  148 + // 加载完成
  149 + Indicator.close();
  150 +
  151 + // 返回处理
  152 + if (res.code == 200) {
  153 +
  154 + // 解构数据
  155 + let { data: datas } = res;
  156 +
  157 + /* 获取库“”数据 开始 */
  158 +
  159 + this.$set(this, 'goodsLists', datas.goods);
  160 +
  161 + /* 获取库“”数据 结束 */
  162 +
  163 + } else if (res.code == 400) {
  164 +
  165 + // 获取失败
  166 + Toast(res.message);
  167 + } else {
  168 +
  169 + // 获取失败
  170 + Toast("获取数据失败");
  171 + }
  172 + },
  173 +
  174 + /**
  175 + * 跳转商品详情
  176 + * @param {Object} item [数据对象]
  177 + */
  178 + toDetail (item) {
  179 + if (this.isCNLive.value) {
  180 + // 校验登录
  181 + if (this.$parent.checkLogin()) {
  182 + // 通用跳转跳转到商品详情页新打开webview
  183 + if (typeof this.$parent.gotoDetail === 'function') {
  184 +
  185 + // 设置跳转参数
  186 + let params = {
  187 + type: '5',
  188 + to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
  189 + shop_type: ''
  190 + };
  191 +
  192 + // 页面跳转
  193 + this.$parent.gotoDetail(params);
  194 + }
  195 + }
  196 + } else {
  197 + this.$parent.callApp();
  198 + }
  199 + },
  200 +
  201 + /**
  202 + * 唤起App封装
  203 + */
  204 + openApp() {
  205 +
  206 + this.$nextTick(() => {
  207 +
  208 + // 唤起App
  209 + if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {
  210 +
  211 + // 设置唤起参数
  212 + let options = {
  213 + success: this.$refs.callApp.callApp
  214 + }
  215 +
  216 + // 唤起App
  217 + this.$parent.callAppModal(options);
  218 + }
  219 + });
  220 + },
  221 +
  222 + /**
  223 + * 项目按钮事件
  224 + * @param {Object} item [数据对象]
  225 + */
  226 + primary(item) {
  227 +
  228 + // 跳转商品详情
  229 + this.toDetail(item);
  230 + },
  231 +
  232 + /**
  233 + * 分享
  234 + */
  235 + toShare() {
  236 +
  237 + // 判断分享
  238 + if (typeof this.$parent.toShare === 'function') {
  239 + this.$parent.toShare(70, this.$route.query.id || 1);
  240 + }
  241 + },
  242 +
  243 + /**
  244 + * 后退
  245 + */
  246 + back() {
  247 +
  248 + // 判断是否有处理函数
  249 + if (typeof this.$parent.back === 'function') {
  250 +
  251 + // 后退
  252 + this.$parent.back();
  253 + } else {
  254 +
  255 + // 后退
  256 + window.history.go(-1);
  257 + }
  258 + }
  259 + },
  260 + head: {
  261 + title () {
  262 + return {
  263 + inner: this.title
  264 + }
  265 + }
  266 + },
  267 + watch: {
  268 +
  269 + // 设置页面标题
  270 + title(newVal) {
  271 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  272 + this.$iFrame.insertIFrame(newVal);
  273 + } else {
  274 + this.$emit("updateHead");
  275 + }
  276 + }
  277 + },
  278 + mounted() {
  279 +
  280 + // 如果是App外，设置唤起App和微信内分享参数
  281 + if (!this.isCNLive.value) {
  282 +
  283 + // 唤起详情页
  284 + if (typeof this.$parent.getOpenApp === "function") {
  285 + this.$parent.getOpenApp({
  286 + type: 70,
  287 + id: this.$route.query.id || 1,
  288 + url: ""
  289 + });
  290 + }
  291 +
  292 + // 分享详情页
  293 + if (typeof this.$parent.getShareData === "function") {
  294 + this.$parent.getShareData({
  295 + type: 70,
  296 + id: this.$route.query.id || 1,
  297 + url: ""
  298 + });
  299 + }
  300 + }
  301 + }
  302 + }
  303 +</script>
  304 +
  305 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  306 +<style rel="stylesheet/less" lang='less' scoped>
  307 + @import "exchangeRanking";
  308 +</style>
0 309 \ No newline at end of file
... ...
src/pages/goodDetails/goodDetails.less
  View file @b48247a
... ... @@ -28,6 +28,9 @@
28 28 height:750px
29 29 }
30 30 .main-box{
  31 + padding-bottom: 0;
  32 + padding-bottom: constant(safe-area-inset-bottom);
  33 + padding-bottom: env(safe-area-inset-bottom);
31 34 .title{
32 35 // width: 414px;
33 36 font-size: 34px;
... ... @@ -232,6 +235,30 @@
232 235 line-height: 130px;
233 236 margin: 0 30px;
234 237 }
  238 + .line{
  239 + width: 1px;
  240 + height: 40px;
  241 + background-color: #C8C8C8;
  242 + margin: 0 30px 0 10px
  243 + }
  244 + .collection_box{
  245 + &.mar_left20{
  246 + margin-left: 40px;
  247 + }
  248 + img{
  249 + display: block;
  250 + width: 40px;
  251 + height: 40px;
  252 + }
  253 + div{
  254 + font-size: 18px;
  255 + font-weight: 400;
  256 + color: #333333;
  257 + line-height: 25px;
  258 + text-align: center;
  259 + margin-top: 10px;
  260 + }
  261 + }
235 262 .btn{
236 263 flex: 1;
237 264 margin: 20px 30px;
... ... @@ -326,12 +353,17 @@
326 353 padding:70px 0;
327 354 border-bottom: solid 1px #E4E4E4;
328 355 .num_tip{
329   - width: 128px;
  356 + width: 350px;
330 357 height: 40px;
331 358 font-size: 28px;
332 359 font-weight: 500;
333 360 color: #707070;
334 361 line-height: 40px;
  362 + display: flex;
  363 + span{
  364 + color: #FC1541;
  365 + margin-left: 20px;
  366 + }
335 367 }
336 368 .right{
337 369 display: flex;
... ...
src/pages/goodDetails/goodDetails.vue
  View file @b48247a
... ... @@ -49,7 +49,7 @@
49 49 </div>
50 50 <div>
51 51 <!-- <span v-if="goodsInfo && goodsInfo.price" class="price">¥{{goodsInfo.price}}</span> -->
52   - <span v-if="goodsInfo && goodsInfo.num" class="integral">{{parseInt(goodsInfo.num)>9999?this.formatDecimal((parseInt(goodsInfo.num) / 10000), 0) +"万":goodsInfo.num}}积分<span v-show="goodsInfo.price>0"> +{{goodsInfo.price}}元</span></span>
  52 + <span v-if="goodsInfo && goodsInfo.num" class="integral">{{parseInt(goodsInfo.num)>9999?this.formatDecimal((parseInt(goodsInfo.num) / 10000), 0) +"万":goodsInfo.num}}积分<span v-show="goodsInfo.price>0"> + {{goodsInfo.price}}元</span></span>
53 53 <!-- <span class="integral-in">积分</span> -->
54 54 </div>
55 55 </div>
... ... @@ -142,13 +142,24 @@
142 142 <div v-if="goodsInfo && goodsInfo.stock != 0">
143 143 <!-- 积分充足 -->
144 144 <div v-if="parseInt(goodsInfo.grade || 0)>parseInt(goodsInfo.num) || parseInt(goodsInfo.grade || 0) == parseInt(goodsInfo.num)" class="footer">
  145 + <div class="collection_box mar_left20" @click="onCell">
  146 + <img v-if="goodsInfo.is_cell == 1" src="static/img/pointsMall/collection2.png" alt="" />
  147 + <img v-else src="static/img/pointsMall/collection.png" alt="" />
  148 + <div>收藏</div>
  149 + </div>
145 150 <div class="btn" @click="exchange">
146 151 立即兑换
147 152 </div>
148 153 </div>
149 154 <!-- 积分不足页脚显示 -->
150   - <div v-if="parseInt(goodsInfo.grade || 0)<parseInt(goodsInfo.num)" class="footer">
  155 + <div v-if="parseInt(goodsInfo.grade || 0) < parseInt(goodsInfo.num)" class="footer">
151 156 <div class="desc">还差{{parseInt(goodsInfo.num)-parseInt(goodsInfo.grade || 0)}}积分</div>
  157 + <div class="line"></div>
  158 + <div class="collection_box" @click="onCell">
  159 + <img v-if="goodsInfo.is_cell == 1" src="static/img/pointsMall/collection2.png" alt="" />
  160 + <img v-else src="static/img/pointsMall/collection.png" alt="" />
  161 + <div>收藏</div>
  162 + </div>
152 163 <div class="btn" @click="jumpClientIntegralList">
153 164 获取积分
154 165 </div>
... ... @@ -156,6 +167,11 @@
156 167 </div>
157 168 <!-- 有积分商品售罄 -->
158 169 <div v-else-if="goodsInfo && goodsInfo.stock == 0" class="footer">
  170 + <div class="collection_box mar_left20" @click="onCell">
  171 + <img v-if="goodsInfo.is_cell == 1" src="static/img/pointsMall/collection2.png" alt="" />
  172 + <img v-else src="static/img/pointsMall/collection.png" alt="" />
  173 + <div>收藏</div>
  174 + </div>
159 175 <div class="btn grey">
160 176 补货中
161 177 </div>
... ... @@ -185,9 +201,9 @@
185 201 </div>
186 202 <!--购买数量-->
187 203 <div class="num_box">
188   - <div class="num_tip">购买数量</div>
  204 + <div class="num_tip">购买数量<span v-if="goodsInfo && goodsInfo.min_buy_num">(起购数量{{goodsInfo.min_buy_num}}件)</span></div>
189 205 <div class="right">
190   - <van-stepper theme="round" input-width="40px" input-size="32px" button-size="32px" v-model="stepperValue" min="1" :max="(goodsInfo && goodsInfo.stock > -1) ?goodsInfo.stock :'999'" integer async-change @change="onChange"/>
  206 + <van-stepper theme="round" input-width="40px" input-size="32px" button-size="32px" v-model="stepperValue" :min="goodsInfo && goodsInfo.min_buy_num" :max="(goodsInfo && goodsInfo.stock > -1) ?goodsInfo.stock :'999'" integer async-change @change="onChange"/>
191 207 <!-- <img src="static/img/reduce.png" alt="" />
192 208 <div class="num">1</div>
193 209 <img src="static/img/plus.png" alt="" /> -->
... ... @@ -226,7 +242,7 @@ export default {
226 242 show: false, // 是否显示底部支付模块
227 243 stepperValue: 1, // 进步器
228 244 version: this.$route.query.version, //长版本号(ios)
229   - ver: this.$route.query.version //短版本号(Android)
  245 + ver: this.$route.query.version, //短版本号(Android)
230 246 }
231 247 },
232 248 //部件
... ... @@ -460,7 +476,7 @@ export default {
460 476 // 实物商品不提示用积分
461 477 if (this.goodsInfo.shop_type == 1) {
462 478 // 判断安卓版本1.7.3.3展示ios1.9.0显示实物弹出底部数量填写
463   - this.versionJudgment()
  479 + this.versionJudgment();
464 480 // 弹出填写地址
465 481 // this.addAddressCallback()
466 482 } else {
... ... @@ -494,15 +510,15 @@ export default {
494 510 /**
495 511 * 分享
496 512 */
497   - // toShare () {
498   - // // 判断分享
499   - // if (typeof this.$parent.toShare === 'function') {
500   - // this.$parent.toShare(45, "1", "");
501   - // }
502   - // },
  513 + toShare () {
  514 + // 判断分享
  515 + if (typeof this.$parent.toShare === 'function') {
  516 + this.$parent.toShare(71, "1",(this.$route.query.goodsId? {"goodsId":this.$route.query.goodsId} : ""));
  517 + }
  518 + },
503 519 /**
504   - * 积分兑换接口
505   - */
  520 + * 积分兑换接口
  521 + */
506 522 addIntegralOrder () {
507 523 // 加载中提示
508 524 Indicator.open("加载中...");
... ... @@ -540,18 +556,20 @@ export default {
540 556 // 提示语判断
541 557 let tipMessage;
542 558 if (datas.shop_type == 2) {
543   - tipMessage = "红包已存入您的账户，可前往“我的”—“我的卡券查看”"
  559 + tipMessage = "红包已存入您的账户，前往“我的”—“我的卡券查看”"
544 560 } else if (datas.shop_type == 3) {
545   - tipMessage = "付费音频已存入您的账户，可前往“我的”—“我的付费内容”—“已购内容收听”"
  561 + tipMessage = "付费音频已存入您的账户，前往“我的”—“我的付费内容”—“已购内容收听”"
546 562 }
547 563 // 显示查看地址弹框
548 564 let options = {
549 565 message: tipMessage,
550 566 messageAlign: "center",
551   - confirmButtonText: "我知道了",
552   - confirmButtonCallback: (this.$route.query.AppJump?this.$parent.destroy:"")
  567 + confirmButtonText: "确定",
  568 + showCancelButton: true,
  569 + cancelButtonText: "取消",
  570 + confirmButtonCallback: (this.$route.query.AppJump?this.$parent.destroy:this.jumpType),
553 571 // confirmButtonCallback: this.addAddressCallback,
554   - // params: { shopType: datas.shop_type, id: datas.id }
  572 + params: datas.shop_type
555 573 };
556 574 this.$set(this.$parent, "showOptions", options);
557 575 // 显示通用浮层
... ... @@ -576,6 +594,31 @@ export default {
576 594 Toast(res.message);
577 595 }
578 596 },
  597 + // type=2跳转原生优惠券列表3跳转原生购买内容列表
  598 + jumpType(type){
  599 + // 判断APP内
  600 + if (this.isCNLive.value) {
  601 + if(type == 2){
  602 + // （判断app内是否有该方法）
  603 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpCoupon) {
  604 + // 跳转到优惠券列表
  605 + window.webkit.messageHandlers.jumpCoupon.postMessage({ body: {} });
  606 + } else if (window.obj && window.obj.jumpCoupon) {
  607 + // 跳转到优惠券列表
  608 + window.obj.jumpCoupon();
  609 + }
  610 + }else if(type == 3){
  611 + // （判断app内是否有该方法）
  612 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JumpToPaidContent) {
  613 + // 跳转到付费内容
  614 + window.webkit.messageHandlers.JumpToPaidContent.postMessage({ body: {} });
  615 + } else if (window.obj && window.obj.JumpToPaidContent) {
  616 + // 跳转到付费内容
  617 + window.obj.JumpToPaidContent();
  618 + }
  619 + }
  620 + }
  621 + },
579 622 // 填写地址
580 623 // addAddressCallback () {
581 624 // this.pointsToast_control = true;
... ... @@ -597,6 +640,8 @@ export default {
597 640 // 跳转到原生的任务列表
598 641 window.obj.jumpClientIntegralList();
599 642 }
  643 + }else{
  644 + this.$parent.callApp();
600 645 }
601 646 },
602 647 /**
... ... @@ -643,6 +688,49 @@ export default {
643 688 Toast("获取积分商品详情页失败");
644 689 }
645 690 },
  691 + /**
  692 + * 商品收藏
  693 + */
  694 + onCell () {
  695 + if(this.isCNLive.value){
  696 + // 加载中提示
  697 + Indicator.open("加载中...");
  698 + // 获取证书请求接口
  699 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/cell", {
  700 + pid: this.$route.query.goodsId, // 商品ID
  701 + uid: this.getStore("uid") // 用户ID
  702 + }, this.onCellCallback, {
  703 + method: "POST"
  704 + });
  705 + }else{
  706 + this.$parent.callApp();
  707 + }
  708 + },
  709 + /**
  710 + * 商品收藏接口回调
  711 + * @param {Object} res [服务器返回数据]
  712 + * @param {Object} ext [扩展参数]
  713 + */
  714 + onCellCallback (res, ext) {
  715 + // 加载完成
  716 + Indicator.close();
  717 + // 返回处理
  718 + if (res.code == 200) {
  719 + if(this.goodsInfo.is_cell == 0){
  720 + this.$set(this.goodsInfo, "is_cell",1)
  721 + Toast("已收藏");
  722 + }else if(this.goodsInfo.is_cell == 1){
  723 + this.$set(this.goodsInfo, "is_cell",0)
  724 + Toast("已取消");
  725 + };
  726 + } else if (res.code == 400) {
  727 + // 获取积分商品详情页失败
  728 + Toast(res.message);
  729 + } else {
  730 + // 获取积分商品详情页失败
  731 + Toast("获取积分商品详情页失败");
  732 + }
  733 + },
646 734 /**
647 735 * app选中地址回选
648 736 * @param {Object} addressInfo [服务器返回数据]
... ... @@ -672,7 +760,7 @@ export default {
672 760 // 获取商品ID
673 761 let goodsId = this.$route.query.goodsId;
674 762 if (goodsId) {
675   - // 获取商品信息
  763 + // 获取商品信息
676 764 this.getGoodsInfo(goodsId);
677 765 }
678 766 // ios从url获取安卓localStorage
... ... @@ -694,13 +782,13 @@ export default {
694 782 funcs: {
695 783 back: {
696 784 icon: "static/img/icon_back.png"
697   - }
698   - // funcArray: [
699   - // {
700   - // icon: "static/img/icon_share.png",
701   - // func: this.toShare
702   - // }
703   - // ]
  785 + },
  786 + funcArray: [
  787 + {
  788 + icon: "static/img/icon_share.png",
  789 + func: this.toShare
  790 + }
  791 + ]
704 792 }
705 793 });
706 794  
... ... @@ -728,16 +816,25 @@ export default {
728 816 // that.show = false;
729 817 // };
730 818 // 如果是App外，设置唤起App和微信内分享参数
731   - // if (!this.isCNLive.value) {
732   - // // 设置积分首页唤起app参数
733   - // if (typeof this.$parent.getOpenApp === "function") {
734   - // this.$parent.getOpenApp({
735   - // type: 45,
736   - // id: 1,
737   - // url: ""
738   - // });
739   - // }
740   - // }
  819 + if (!this.isCNLive.value) {
  820 + // 设置积分首页唤起app参数
  821 + if (typeof this.$parent.getOpenApp === "function") {
  822 + this.$parent.getOpenApp({
  823 + type: 71,
  824 + id: "1",
  825 + url: "",
  826 + ext: this.$route.query.goodsId ? {"goodsId":this.$route.query.goodsId} : ""
  827 + });
  828 + }
  829 + if (typeof this.$parent.getShareData === "function") {
  830 + this.$parent.getShareData({
  831 + type: 71,
  832 + id: 1,
  833 + url: "",
  834 + ext: this.$route.query.goodsId ? {"goodsId":this.$route.query.goodsId} : ""
  835 + });
  836 + }
  837 + }
741 838 // // 地址回选原生回调
742 839 // if (this.isiPhone.value || this.isiPad.value) {
743 840 // var that = this;
... ...
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.vue
  View file @b48247a
... ... @@ -2,7 +2,7 @@
2 2 <div class="gift_zone_detail">
3 3  
4 4 <!-- 导航栏 -->
5   - <div class="nav">
  5 + <div class="nav" :style="'padding-top: ' + $parent.top.value + 'px'">
6 6  
7 7 <!-- navBar -->
8 8 <nav-bar @back="back"
... ... @@ -10,7 +10,7 @@
10 10 </nav-bar>
11 11 </div>
12 12  
13   - <div class="pl"></div>
  13 + <div class="pl" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
14 14 <!-- 商品样式 7 列表 -->
15 15 <div class="top_main">
16 16 <!-- 头部 -->
... ...
src/pages/pointsExchangeRecords/pointsExchangeRecords.less
  View file @b48247a
1 1 .records_back{
2   - background: #F6F6F6;
  2 + // background: #F6F6F6;
3 3 min-height: 100vh;
4 4 margin-bottom: 10px;
5 5 .com_box{
... ... @@ -7,24 +7,25 @@
7 7 background: #FFFFFF;
8 8 border-radius: 24px;
9 9 .item_box{
10   - margin: 0 30px;
  10 + // margin: 0 30px;
11 11 border-bottom: solid 2px #EAEAEA;
12 12 display: flex;
13 13 padding: 30px 0;
14 14 img{
15 15 display: flex;
16   - width: 190px;
17   - height: 190px;
  16 + width: 180px;
  17 + height: 180px;
18 18 }
19 19 .right{
20 20 flex: 1;
21 21 margin-left: 32px;
22 22 .name{
23 23 height: 40px;
24   - font-size: 28px;
  24 + font-size: 30px;
25 25 font-weight: 400;
26   - color: #333333;
  26 + color: #666666;
27 27 line-height: 40px;
  28 + font-weight: 500;
28 29 display: -webkit-box;
29 30 -webkit-line-clamp: 1;
30 31 /*! autoprefixer: off */
... ... @@ -57,15 +58,15 @@
57 58 color: #FC1541;
58 59 line-height: 40px;
59 60 text-align: left;
60   - margin-top: 24px;
  61 + margin-top: 42px;
61 62 }
62 63 .exchange_time{
63 64 margin-top: 10px;
64 65 height: 33px;
65   - font-size: 24px;
  66 + font-size: 28px;
66 67 font-weight: 400;
67 68 color: #9B9B9B;
68   - line-height: 33px;
  69 + margin-top: 10px;
69 70 }
70 71 .btn-box{
71 72 display: flex;
... ... @@ -148,6 +149,7 @@
148 149 .title{
149 150 display: flex;
150 151 position: relative;
  152 + border-bottom: 1px solid #E6E6E6;
151 153 .goback{
152 154 display: block;
153 155 width: 38px;
... ... @@ -164,7 +166,6 @@
164 166 }
165 167 // 占位
166 168 .title_box_lh{
167   - background-color: transparent;
168 169 height: 93px;
169 170 }
170 171 }
171 172 \ No newline at end of file
... ...
src/pages/pointsExchangeRecords/pointsExchangeRecords.vue
  View file @b48247a
... ... @@ -7,7 +7,7 @@
7 7  
8 8 <!--返回按钮-->
9 9 <img @click="goback" class="goback" src="static/img/icon_back.png" />
10   - <div class="text">兑换记录</div>
  10 + <div class="text">我的订单</div>
11 11 </div>
12 12 </div>
13 13  
... ... @@ -21,12 +21,12 @@
21 21 <div class="right">
22 22 <div class="name">{{item.title}}</div>
23 23 <div v-show="item.address_name && item.address_address && item.address_phone" class="address_name">
24   - 收货人: <span> {{item.address_name}}</span> <span> {{item.address_phone}}</span> <span> {{item.address_address}}</span>
  24 + 收货人: <span> {{item.address_name}}</span> <span> {{resetPhone(item.address_phone)}}</span> <span> {{item.address_address}}</span>
25 25 </div>
26 26 <div v-show="item.price || item.total" class="exchange_type">
27 27 <span v-show="item.total && $route.query.type==3">{{item.total}}积分</span>
28 28 <span class="灰色" v-show="item.total && $route.query.type==7">{{item.total}}健康值</span>
29   - <span v-show="parseInt(item.price)>0">+{{item.price}}元</span>
  29 + <span v-show="item.price>0"> + {{item.price}}元</span>
30 30 </div>
31 31 <div class="exchange_time">
32 32 兑换时间 {{item.create_time*1000 | datetime('yyyy-MM-dd hh:mm:ss')}}
... ... @@ -49,7 +49,7 @@
49 49 <!-- 暂无记录展示 -->
50 50 <div v-show="list.length == 0 && isCall" class="no_gift_tip">
51 51 <img src="static/img/no_gift_tip.png" alt=""/>
52   - <div class="text">暂无兑换记录</div>
  52 + <div class="text">暂无我的订单</div>
53 53 </div>
54 54 <div v-show="list.length>0 && isMore ==0" class="is_more">
55 55 没有更多了
... ... @@ -63,7 +63,7 @@
63 63 <script>
64 64 // 引入组件
65 65 import { Toast, Indicator } from "mint-ui";
66   -// import appAddressToast from "@/components/appAddressToast/appAddressToast";
  66 +// import appAddressToast from "@/components/appAddressToast/appAddressToast";
67 67 export default {
68 68 data () {
69 69 return {
... ... @@ -92,16 +92,16 @@ export default {
92 92 methods: {
93 93 // 跳转原生商品详情页
94 94 jumpOrderDes (item) {
95   - if (item.shop_type == 1 && item.address_name && item.address_phone && item.address_address) { // 1实物 2是虚拟商品 3红包
  95 + if (item.shop_type == 1) { // 1实物 2是虚拟商品 3红包 && item.address_name && item.address_phone && item.address_address
96 96 // 判断APP内
97 97 if (this.isCNLive.value) {
98 98 // （判断app内是否有该方法）
99 99 if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpOrderDes) {
100 100 // 跳转到原生的任务列表
101   - window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: parseInt(item.price)>0?item.order_id:item.id, type: parseInt(item.price)>0? 4 :1 } })
  101 + window.webkit.messageHandlers.jumpOrderDes.postMessage({ body: { orderId: item.price>0?item.order_id:item.id, type: item.price>0? 4 :1 } })
102 102 } else if (window.obj && window.obj.jumpOrderDes) {
103 103 // 跳转到原生的任务列表
104   - window.obj.jumpOrderDes(JSON.stringify({ orderId: parseInt(item.price)>0?item.order_id:item.id, type: parseInt(item.price)>0? 4 :1}));
  104 + window.obj.jumpOrderDes(JSON.stringify({ orderId:item.price>0?item.order_id:item.id, type: item.price>0? 4 :1}));
105 105 }
106 106 }
107 107 } else if (item.shop_type == 3) {
... ... @@ -112,6 +112,8 @@ export default {
112 112 messageAlign: "center",
113 113 confirmButtonText: "我知道了",
114 114 confirmButtonCallback: null,
  115 + confirmButtonCallback: this.jumpType,
  116 + params:item.shop_type
115 117 };
116 118 this.$set(this.$parent, "showOptions", options);
117 119 // 显示通用浮层
... ... @@ -151,6 +153,31 @@ export default {
151 153 // }
152 154 // });
153 155 // },
  156 + // type=2跳转原生优惠券列表3跳转原生购买内容列表
  157 + jumpType(type){
  158 + // 判断APP内
  159 + if (this.isCNLive.value) {
  160 + if(type == 2){
  161 + // （判断app内是否有该方法）
  162 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpCoupon) {
  163 + // 跳转到优惠券列表
  164 + window.webkit.messageHandlers.jumpCoupon.postMessage({ body: {} });
  165 + } else if (window.obj && window.obj.jumpCoupon) {
  166 + // 跳转到优惠券列表
  167 + window.obj.jumpCoupon();
  168 + }
  169 + }else if(type == 3){
  170 + // （判断app内是否有该方法）
  171 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JumpToPaidContent) {
  172 + // 跳转到付费内容
  173 + window.webkit.messageHandlers.JumpToPaidContent.postMessage({ body: {} });
  174 + } else if (window.obj && window.obj.JumpToPaidContent) {
  175 + // 跳转到付费内容
  176 + window.obj.JumpToPaidContent();
  177 + }
  178 + }
  179 + }
  180 + },
154 181 // 下拉刷新
155 182 loadMore () {
156 183 this.loading = true;
... ... @@ -244,6 +271,19 @@ export default {
244 271 }
245 272 }
246 273 },
  274 + // 隐藏号码中间四位
  275 + resetPhone(phone) {
  276 + var str = String(phone)
  277 + var len = str.length;
  278 + if (len >= 7) {
  279 + var reg = str.slice(-7, -3)
  280 + return str.replace(reg, "****")
  281 + } else if (len < 7 && len >= 6) {
  282 + //1234567
  283 + var reg = str.slice(-4, -2)
  284 + return str.replace(reg, "**")
  285 + }
  286 + }
247 287 },
248 288 //请求数据
249 289 created () {
... ... @@ -279,13 +319,14 @@ export default {
279 319 // } else if (this.plat == "a") {
280 320  
281 321 // }
282   - // 页面显示监听
  322 + // 页面显示监听
283 323 document.addEventListener('visibilitychange', () => {
284 324 // 页面显示出来了
285 325 if (document.hidden === false) {
286 326 this.list = []; // 中奖记录列表
287 327 this.page = 0;
288   - this.isMore =1; // 0没有更多1有更多
  328 + this.isMore = 1; // 0没有更多1有更多
  329 + this.isCall = false;
289 330 this.loadMore();
290 331 }
291 332 });
... ...
src/pages/pointsMall/pointsMall.less
  View file @b48247a
... ... @@ -9,6 +9,9 @@
9 9 &.is-cnlive {
10 10 height: 93px;
11 11 }
  12 + &.shareItems-box{
  13 + height: 215px;
  14 + }
12 15 }
13 16 // 列表
14 17 .column-list-box{
... ... @@ -22,12 +25,13 @@
22 25 position: fixed;
23 26 z-index: 2;
24 27 }
25   -.back-box{
  28 +.share_back-box{
  29 + width: 100%;
26 30 background-color: transparent;
27 31 position: fixed;
28 32 top: 0;
29 33 left:0;
30   - z-index: 2;
  34 + z-index: 30;
31 35 }
32 36 .main_box{
33 37 width: 100%;
... ... @@ -38,52 +42,32 @@
38 42 overflow: hidden;
39 43 // 头部
40 44 .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;
  45 + margin:27px 40px 47px 40px;
  46 + background: transparent;
  47 + display: flex;
  48 + justify-content: space-between;
  49 + .left{
  50 + width:335px;
  51 + text-align: left;
  52 + .title_t{
67 53 font-size: 24px;
68 54 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   - }
  55 + color: #57391D;
  56 + }
  57 + .number{
  58 + font-size: 60px;
  59 + font-weight: bold;
  60 + color: #57391D;
  61 + max-width: 360px;
  62 + overflow: hidden;
  63 + text-overflow: ellipsis;
80 64 }
81 65 }
82 66 // 商品类型
83 67 .item_box{
  68 + width:335px;
84 69 display: flex;
85 70 justify-content: space-between;
86   - margin: 40px 80px 30px 80px;
87 71 .item{
88 72 img{
89 73 display: block;
... ... @@ -97,48 +81,10 @@
97 81 color: #666666;
98 82 line-height: 33px;
99 83 margin-top: 12px;
  84 + text-align: center;
100 85 }
101 86 }
102 87 }
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 88 }
143 89 // 内容区域
144 90 .tab_item_box{
... ... @@ -157,7 +103,7 @@
157 103 height: 48px;
158 104 font-size: 34px;
159 105 font-weight: 600;
160   - color: #373737;
  106 + color: #57391D;
161 107 line-height: 48px;
162 108 }
163 109 .line{
... ... @@ -182,9 +128,13 @@
182 128 }
183 129 // 为你推荐
184 130 .list-box {
185   - display: flex;
186   - justify-content: space-between;
187   - align-items: center;
  131 + min-height: 487px;
  132 + background:#fff url("../../../static/img/pointsMall/phb_bacb.png") no-repeat
  133 + center top;
  134 + background-size: 100%;
  135 + overflow: hidden;
  136 + position: relative;
  137 + margin: 0 30px 40px 30px;
188 138 .discount-flag {
189 139 position: absolute;
190 140 top: 4px;
... ... @@ -197,5 +147,47 @@
197 147 font-weight: 400;
198 148 border-radius: 6px;
199 149 }
  150 + .ranking_desc{
  151 + display:flex;
  152 + align-items: center;
  153 + font-size: 24px;
  154 + font-weight: 400;
  155 + color: #FFFFFF;
  156 + position: absolute;
  157 + right: 40px;
  158 + top: 127px;
  159 + img{
  160 + display:block;
  161 + width: 22px;
  162 + height: 22px;
  163 + border-radius: 22px;
  164 + margin-left: 10px;
  165 + }
  166 + }
  167 + .ranking_box{
  168 + display: flex;
  169 + justify-content: space-between;
  170 + align-items: center;
  171 + position: absolute;
  172 + bottom: 0;
  173 + left: 0;
  174 + margin: 0 15px;
  175 + width: calc(100% - 30px);
  176 + .item{
  177 + background-color: transparent;
  178 + .top-box{
  179 + .img-box{
  180 + width: 190px;
  181 + height: 190px;
  182 + }
  183 + }
  184 + }
  185 + }
  186 + }
  187 + // 弹窗
  188 + .popup_box{
  189 + width:100%;
  190 + background:#FFE9EA;
  191 + position: fixed;
200 192 }
201 193 }
202 194 \ No newline at end of file
... ...
src/pages/pointsMall/pointsMall.vue
  View file @b48247a
1 1 <template>
2   -<div>
  2 +<div rel="pointsMall">
3 3 <!-- H5唤起App组件 -->
4 4 <call-app-box
5 5 class="call-app-box"
... ... @@ -12,89 +12,57 @@
12 12 <div class="main_box">
13 13 <!-- pl -->
14 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>
  15 + <div class="share_back-box" :style="'background-color: rgba(255, 233, 234,' + opacity + ')'">
  16 + <back-box
  17 + v-if="isCNLive.value"
  18 + :class="{'hide': $route.query.hideBack == true}"
  19 + :style="'padding-top: ' + $parent.top.value + 'px;'" ref="navBox"
  20 + @back="back"
  21 + :backs="backs">
  22 + </back-box>
  23 + <!-- 分享下拉选择项 -->
  24 + <van-popup class="popup_box" v-model="isCNLive.value && showShareItems" @click-overlay="onShowShareItems" :overlay-style="{ top:(parseInt($parent.top.value) + 109)+ 'px' }" :style="'top: ' + (parseInt($parent.top.value) + 76)+ 'px'">
  25 + <share-item
  26 + :class="{'hide': $route.query.hideBack == true}"
  27 + @back="back"
  28 + :backs="backs"
  29 + :shareItems="shareItems"></share-item>
  30 + </van-popup>
  31 + </div>
23 32 <div class="top_main">
24   - <!-- 头部 -->
25   - <div class="top">
26   - <div class="left">
27   - 我的积分: <span>{{myGrade || 0}}</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>
  33 + <!-- 积分 -->
  34 + <div class="left">
  35 + <div class="title_t">我的积分</div>
  36 + <div class="number">{{myGrade || 0}}</div>
34 37 </div>
35 38 <!-- 商品类型 -->
36 39 <div class="item_box" v-if="navs && navs.length">
37   - <div class="item" v-for="(item, index) in navs" :key="index" @click="anchor(item)">
  40 + <div class="item" v-for="(item, index) in navs" :key="index" @click="jumpApp(index+1)">
38 41 <img :src="item.simg" alt=""/>
39 42 <div class="text">{{item.title}}</div>
40 43 </div>
41 44 </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 45 </div>
56 46 <!-- 为你推荐商品列表 -->
57 47 <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 v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" 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 @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
  48 + <!-- 排行榜描述 -->
  49 + <div class="ranking_desc" @click="jumpApp(4)">
  50 + <div>品质优选 好物随心兑</div>
  51 + <img src="static/img/pointsMall/right_icon2.png" alt=""/>
74 52 </div>
75   - <!-- 实物商品裂变 -->
76   - <!-- 商品样式 7 列表 goodType=1为积分商城实物商品-->
77   - <column-list-box class="column-list-box" @jump="toDetail"
78   - :lists="phyicalGoods"
79   - com="7" goodType="1" company="1">
80   - </column-list-box>
81   - </div>
82   -
83   -
84   - <!-- 虚拟商品 -->
85   - <div v-if="virtualGoods && virtualGoods.list && virtualGoods.list.length" ref="virtualGoodsBox">
86   - <div class="tab_item_box">
87   - <div class="item active">虚拟商品</div>
88   - <!-- 分割线 -->
89   - <div class="line"> </div>
90   - <div class="item">虚拟商品 精品推荐</div>
91   - <div @click="toMore(3)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div>
  53 + <!-- 商品展示样式 2 -->
  54 + <div class="ranking_box">
  55 + <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDetail"
  56 + :item="item"
  57 + pid="5">
  58 + <!-- 添加flag -->
  59 + <flag slot="flag" v-if="flags && flags.icon && flags.icon[index]"
  60 + :flag="flags.icon[index]"
  61 + :position="flags.position"
  62 + :width="flags.width">
  63 + </flag>
  64 + </goods-item-2>
92 65 </div>
93   - <!-- 商品样式 7 列表 -->
94   - <column-list-box class="column-list-box" @jump="toDetail"
95   - :lists="virtualGoods"
96   - com="7" company="1">
97   - </column-list-box>
98 66 </div>
99 67  
100 68 <!-- 满减红包 -->
... ... @@ -107,12 +75,36 @@
107 75 <div @click="toMore(2)" class="more">更多<img src="static/img/icon_more_arrow_right.png" class="" alt=""/></div>
108 76 </div>
109 77 <!-- 商品样式 7 列表 -->
110   - <column-list-box class="column-list-box" @jump="toDetail"
  78 + <goods-item-2 class="item" v-for="(item, index) in redEnvelopeFull.list" :key="index" @jump="toDetail"
  79 + :item="item"
  80 + pid="5">
  81 + </goods-item-2>
  82 + <!-- <column-list-box class="column-list-box" @jump="toDetail"
111 83 :lists="redEnvelopeFull"
112 84 com="7" company="1">
113   - </column-list-box>
  85 + </column-list-box> -->
  86 + </div>
  87 +
  88 +
  89 + <!-- 实物商品 -->
  90 + <div>
  91 + <div class="tab_item_box">
  92 + <div class="item active">好物兑换</div>
  93 + <!-- 分割线 -->
  94 + <div class="line"> </div>
  95 + <div class="item">实物商品 分值浏览</div>
  96 + <!-- <div @click="toMore(1)" class="more">更多<img src="static/img/icon_more_arrow_right.png" alt=""/></div> -->
  97 + </div>
  98 + <!-- 筛选按钮 -->
  99 + <card-tabs :tags="tags" :phyicalGoods="phyicalGoods" @tabChange="tabChange" @loadMore="loadMore" @toDetail="toDetail">
  100 + </card-tabs>
114 101 </div>
115 102 </div>
  103 + <!-- 回到顶部按钮 -->
  104 + <goto-top
  105 + class="goto_top_box"
  106 + :top="parseInt(150)">
  107 + </goto-top>
116 108 </div>
117 109 </template>
118 110  
... ... @@ -122,6 +114,10 @@ import callAppBox from &quot;@/components/callAppBox/callAppBox&quot;;
122 114 import backBox from "@/components/backBox/backBox";
123 115 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
124 116 import columnListBox from "@/components/columnListBox/columnListBox";
  117 +import shareItem from "@/components/shareItem/shareItem";
  118 +import flag from "@/components/flag/flag";
  119 +import cardTabs from "@/components/cardTabs/cardTabs";
  120 +import gotoTop from "@/components/gotoTop/gotoTop";
125 121 export default {
126 122 name: 'pointsmall',
127 123 data () {
... ... @@ -132,9 +128,20 @@ export default {
132 128 navs: null, // 导航
133 129 myGrade: 0, // 我的积分
134 130 goodsLists: null, // 为你推荐商品
135   - phyicalGoods: { list: null }, // 实物商品
  131 + phyicalGoods: [], // 实物商品
  132 + tabIndex: 0, // tab点击的位置
136 133 virtualGoods: { list: null }, // 虚拟商品
137   - redEnvelopeFull: { list: null } // 满减红包
  134 + redEnvelopeFull: { list: null }, // 满减红包
  135 + shareItems: null, // 分享下拉菜单
  136 + showShareItems: false, // 非向下拉菜单显示隐藏
  137 + flags: null, // 产品排名flag
  138 + tags:{
  139 + list:null,
  140 + value:null,
  141 + }, // tabs数据
  142 + refreshGrade:false, // 是否刷新积分
  143 + version: this.$route.query.version, //长版本号(ios)
  144 + ver: this.$route.query.version //短版本号(Android)
138 145 }
139 146 },
140 147 //部件
... ... @@ -142,7 +149,11 @@ export default {
142 149 callAppBox,
143 150 backBox,
144 151 goodsItem2,
145   - columnListBox
  152 + columnListBox,
  153 + shareItem,
  154 + flag,
  155 + cardTabs,
  156 + gotoTop
146 157 },
147 158 //静态
148 159 props: [
... ... @@ -155,6 +166,217 @@ export default {
155 166 },
156 167 //方法表示一个具体的操作，主要书写业务逻辑；
157 168 methods: {
  169 + /**
  170 + * tab切换筛选
  171 + */
  172 + tabChange(index){
  173 + if (this.isCNLive.value) {
  174 + this.tabIndex = index;
  175 + // 获取商品列表数据tab切换只获取一次数据
  176 + if(!this.phyicalGoods[this.tabIndex].isCall){
  177 + this.getIntegralNewGoodsList(this.phyicalGoods[index].page);
  178 + }
  179 + }else{
  180 + this.$parent.callApp();
  181 + }
  182 + },
  183 + /**
  184 + * 上拉加载
  185 + */
  186 + loadMore () {
  187 + if (this.phyicalGoods[this.tabIndex].loading === false && this.phyicalGoods[this.tabIndex].isMore === false){
  188 + this.$set(this.phyicalGoods[this.tabIndex], "page" , ++ this.phyicalGoods[this.tabIndex].page);
  189 + this.getIntegralNewGoodsList(this.phyicalGoods[this.tabIndex].page);
  190 + }
  191 + },
  192 + /**
  193 + * 加载积分商城商品更多
  194 + * @param {int} page [页码]
  195 + * @param {int}type [类型1为实物 2为虚拟物品 3为红包]
  196 + */
  197 + getIntegralNewGoodsList (page) {
  198 + // 加载中
  199 + this.$set(this.phyicalGoods[this.tabIndex], "loading", true);
  200 +
  201 + // 加载中提示
  202 + // Indicator.open("加载中...");
  203 +
  204 + // 请求接口
  205 + this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralNewGoodsList", {
  206 + type: 1,
  207 + // uid: this.getStore("uid"),
  208 + page: page || 1,
  209 + tags_value: this.tags.value // 筛选
  210 + }, this.getIntegralNewGoodsListCallback, {
  211 + method: "POST"
  212 + });
  213 + },
  214 +
  215 + /**
  216 + * 礼品专区详情页回调
  217 + * @param {object} res [服务器返回数据]
  218 + * @param {object} ext [扩展参数]
  219 + */
  220 + getIntegralNewGoodsListCallback (res, ext) {
  221 +
  222 + // 加载完成
  223 + // Indicator.close();
  224 + // 证明调用过接口
  225 + this.phyicalGoods[this.tabIndex].isCall = true;
  226 + // 返回处理
  227 + if (res.code == 200) {
  228 + // 解构数据
  229 + let { data: datas } = res;
  230 + /*设置标题 */
  231 + // this.$set(this, "title", datas.title);
  232 + // this.$set(this.backs, 'title', datas.title);
  233 + /* 获取商品数据 开始 */
  234 + if (datas.goods && datas.goods.length) {
  235 + // 设置列表
  236 + this.$set(this.phyicalGoods[this.tabIndex], "list", [...this.phyicalGoods[this.tabIndex].list, ...datas.goods]);
  237 + // 设置还有需要加载的内容
  238 + this.$set(this.phyicalGoods[this.tabIndex], "loading", false);
  239 + } else {
  240 + this.phyicalGoods[this.tabIndex].isMore = true; // 没有更多了
  241 + // 没有需要加载的内容，停止上拉加载
  242 + this.$set(this.phyicalGoods[this.tabIndex], "loading", true);
  243 + }
  244 + /* 获取抽奖记录数据 结束 */
  245 + // let item = {
  246 + // ref: 'physicalGoodsBox',
  247 + // simg: 'static/img/pointsMall/icon01.png',
  248 + // title: '赚积分'
  249 + // }
  250 + // let _this = this;
  251 + // // 定位到好物兑换标题栏
  252 + // this.$nextTick(() =>{
  253 + // _this.anchor(item);
  254 + // })
  255 + } else if (res.code == 400) {
  256 +
  257 + // 获取抽奖记录失败
  258 + Toast(res.message);
  259 + } else {
  260 +
  261 + // 获取抽奖记录失败
  262 + Toast("获取专区礼包失败");
  263 + }
  264 + },
  265 + /**
  266 + * @param {Object} type [数据类型]
  267 + * 1赚取积分2我的收藏3我的订单4兑换排行榜
  268 + */
  269 + jumpApp(type){
  270 + if (this.isCNLive.value){
  271 + if(type == 1){
  272 + this.jumpClientIntegralList();
  273 + }else if(type == 2){
  274 + this.toExchangeOrder(1)
  275 + }else if(type == 3){
  276 + this.toExchangeOrder(2);
  277 + }else if(type == 4){
  278 + this.toExchangeOrder(3);
  279 + }
  280 + }else{
  281 + this.$parent.callApp();
  282 + }
  283 + },
  284 + /**
  285 + * @param {Object} type [数据类型]
  286 + * 1平台客服2分享好友3积分规则
  287 + */
  288 + jumpType(item){
  289 + this.showShareItems = false;
  290 + if(item.params == 1){
  291 + if (this.isCNLive.value) {
  292 + let options;
  293 + if (this.isAndroid.value) {
  294 + if (this.ver != "") {
  295 + var ver = this.ver ? this.ver.replace(/\.*/g, "") : "";
  296 + }
  297 + var isVer = 1909;
  298 + if (ver > isVer) {
  299 + // （判断app内是否有该方法）
  300 + if (window.obj && window.obj.jumpCustomerService) {
  301 + // 跳转到原生的客服页面
  302 + window.obj.jumpCustomerService();
  303 + }
  304 + } else {
  305 + // 提示用积分兑换兑换
  306 + options = {
  307 + message: "当前版本过旧，请升级最新版本",
  308 + messageAlign: "center",
  309 + confirmButtonText: "去更新",
  310 + confirmButtonCallback: this.appUpdate,
  311 + showCancelButton: true,
  312 + cancelButtonText: "取消"
  313 + };
  314 + }
  315 + } else if (this.isiPhone.value || this.isiPad.value) {
  316 + if (this.version != "") {
  317 + var version = this.version ? this.version.replace(/\.*/g, "") : "";
  318 + }
  319 + if (this.mode == "prod") {
  320 + var isVer = 205;
  321 + } else {
  322 + var isVer = 205;
  323 + }
  324 + if (version > isVer) {
  325 + // （判断app内是否有该方法）
  326 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpCustomerService) {
  327 + // 跳转到原生的客服页面
  328 + window.webkit.messageHandlers.jumpCustomerService.postMessage({ body: {} });
  329 + }
  330 + } else {
  331 + // 提示用积分兑换兑换
  332 + options = {
  333 + message: "当前版本过旧，请升级最新版本",
  334 + messageAlign: "center",
  335 + confirmButtonText: "去更新",
  336 + confirmButtonCallback: this.appUpdate,
  337 + showCancelButton: true,
  338 + cancelButtonText: "取消"
  339 + };
  340 + }
  341 + }
  342 + // 调用showModal层参数
  343 + this.$set(this.$parent, "showOptions", options);
  344 + // 显示通用浮层
  345 + this.$parent.$refs.showModal.showLayer();
  346 + }
  347 + }else if(item.params == 2){
  348 + // 判断分享
  349 + if (typeof this.$parent.toShare === 'function') {
  350 + this.$parent.toShare(45, "1", "");
  351 + }
  352 + }else if(item.params == 3){
  353 + // 通用跳转跳转到商品详情页新打开webview
  354 + if (typeof this.$parent.gotoDetail === 'function') {
  355 + // 设置跳转参数
  356 + let params = {
  357 + type: '34',
  358 + to: 'http://wjjh5'+(this.mode == 'prod'?'':'test') + '.cnlive.com/integralRules.html?type=web',
  359 + shop_type: ''
  360 + };
  361 + // 页面跳转
  362 + this.$parent.gotoDetail(params);
  363 + }
  364 + }
  365 + },
  366 + // App升级跳转
  367 + appUpdate () {
  368 + if (this.isiPhone.value || this.isiPad.value) {
  369 + window.location.href = "http://itunes.apple.com/cn/app/id1337575478?mt=8";
  370 + } else if (this.isAndroid.value) {
  371 + window.location.href = "http://wjj.ys1.cnliveimg.com/download/ac/1910/strike-1.9.1.0-release.apk";
  372 + }
  373 + },
  374 + /**
  375 + * 显示分享弹框
  376 + */
  377 + onShowShareItems(){
  378 + this.showShareItems = !this.showShareItems;
  379 + },
158 380 /**
159 381 * 锚点定位
160 382 * @param {Object} item [数据对象]
... ... @@ -186,18 +408,36 @@ export default {
186 408 /**
187 409 * 跳转到兑换记录详情页
188 410 * @param {Object} item [数据对象]
  411 + * type 1我的收藏 2我的订单3兑换排行榜
189 412 */
190   - toExchangeRecord () {
  413 + toExchangeOrder (type) {
191 414 if (this.isCNLive.value) {
192 415 // 校验登录
193 416 if (this.$parent.checkLogin()) {
  417 + if(type ==1){
194 418 this.$router.push({
195   - path: '/pointsExchangeRecords',
196   - query: {
197   - uid: this.getStore("uid"),
198   - type: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
199   - }
200   - })
  419 + path: '/pointsMyCollection',
  420 + query: {
  421 + uid: this.getStore("uid"),
  422 + type: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
  423 + }
  424 + });
  425 + }else if(type ==2){
  426 + this.$router.push({
  427 + path: '/pointsExchangeRecords',
  428 + query: {
  429 + uid: this.getStore("uid"),
  430 + type: 3 // 1亲子嘉年华 2 康疫健步 3 积分商城 4 脐橙 7 健康商城
  431 + }
  432 + });
  433 + }else if(type == 3){
  434 + this.$router.push({
  435 + path: '/exchangeRanking',
  436 + query: {
  437 + uid: this.getStore("uid")
  438 + }
  439 + });
  440 + }
201 441 }
202 442 } else {
203 443 this.$parent.callApp();
... ... @@ -282,17 +522,6 @@ export default {
282 522 }
283 523 },
284 524 /**
285   - * 分享
286   - */
287   - toShare () {
288   -
289   - // 判断分享
290   - if (typeof this.$parent.toShare === 'function') {
291   - this.$parent.toShare(45, "1", "");
292   - }
293   - },
294   -
295   - /**
296 525 * 后退
297 526 */
298 527 back () {
... ... @@ -339,21 +568,38 @@ export default {
339 568  
340 569 // 返回处理
341 570 if (res.code == 200) {
342   -
343 571 // 解构数据
344 572 let { data: datas } = res;
345 573 this.info = datas
346 574 /* 积分商场首页信息 开始 */
347   - /*用户信息 */
348   - this.$set(this, "myGrade", datas.grade);
349   - /*为你推荐 */
350   - this.$set(this, "goodsLists", datas.hot_goods);
351   - /*实物商品 */
352   - this.$set(this.phyicalGoods, "list", datas.goods1);
353   - /*满减红包商品 */
354   - this.$set(this.redEnvelopeFull, "list", datas.goods2);
355   - /*虚拟商品 */
356   - this.$set(this.virtualGoods, "list", datas.goods3);
  575 + if(this.refreshGrade == true){
  576 + /*用户信息 */
  577 + this.$set(this, "myGrade", datas.grade);
  578 + }else{
  579 + /*用户信息 */
  580 + this.$set(this, "myGrade", datas.grade);
  581 + /*为你推荐 */
  582 + this.$set(this, "goodsLists", datas.hot_goods);
  583 + /*tabs数据 */
  584 + this.$set(this.tags, "list", datas.tags);
  585 + for(var i=0; i<= this.tags.list.length; i++){
  586 + this.$set(this.phyicalGoods, i,
  587 + {
  588 + loading: true,
  589 + distance: 50,
  590 + page: 1,
  591 + isCall: false, // 是否调用接口
  592 + isMore: false,
  593 + list: [],
  594 + });
  595 + }
  596 + // 获取商品列表全部商品数据
  597 + this.getIntegralNewGoodsList(this.phyicalGoods[0].page);
  598 + /*满减红包商品 */
  599 + this.$set(this.redEnvelopeFull, "list", datas.goods2);
  600 + /*虚拟商品 */
  601 + this.$set(this.virtualGoods, "list", datas.goods3);
  602 + }
357 603 } else if (res.code == 400) {
358 604  
359 605 // 获取积分商场首页信息失败
... ... @@ -432,20 +678,33 @@ export default {
432 678 this.$set(this, 'navs', [
433 679 {
434 680 ref: 'physicalGoodsBox',
435   - simg: 'static/img/points_item01.png',
436   - title: '实物商品'
  681 + simg: 'static/img/pointsMall/icon01.png',
  682 + title: '赚积分'
437 683 },
438 684 {
439 685 ref: 'virtualGoodsBox',
440   - simg: 'static/img/points_item02.png',
441   - title: '虚拟商品'
  686 + simg: 'static/img/pointsMall/icon02.png',
  687 + title: '我的收藏'
442 688 },
443 689 {
444 690 ref: 'fullReductionBox',
445   - simg: 'static/img/points_item03.png',
446   - title: '满减红包'
  691 + simg: 'static/img/pointsMall/icon03.png',
  692 + title: '我的订单'
447 693 }
448 694 ]);
  695 +
  696 + // 设置产品排名flag对象
  697 + this.$set(this, 'flags', {
  698 + icon: [
  699 + 'static/img/icon_n1.png',
  700 + 'static/img/icon_n2.png',
  701 + 'static/img/icon_n3.png'
  702 + ],
  703 + position: {
  704 + top: -6,
  705 + left: 20
  706 + }
  707 + });
449 708 // 判断是否在App内
450 709 if (this.isCNLive.value) {
451 710  
... ... @@ -457,8 +716,8 @@ export default {
457 716 },
458 717 funcArray: [
459 718 {
460   - icon: "static/img/icon_share.png",
461   - func: this.toShare
  719 + icon: "static/img/pointsMall/share_icon.png",
  720 + func: this.onShowShareItems
462 721 }
463 722 ]
464 723 }
... ... @@ -466,9 +725,43 @@ export default {
466 725  
467 726 // 设置标题
468 727 this.$set(this.backs, 'title', '积分商城');
  728 + // 右上角三个点下拉菜单
  729 + this.$set(this, 'shareItems', [
  730 + {
  731 + simg: 'static/img/pointsMall/share01.png',
  732 + title: '平台客服',
  733 + icon: 'static/img/pointsMall/right_icon.png',
  734 + func: this.jumpType,
  735 + params: 1,
  736 + },
  737 + {
  738 + simg: 'static/img/pointsMall/share02.png',
  739 + title: '分享好友',
  740 + icon: 'static/img/pointsMall/right_icon.png',
  741 + func: this.jumpType,
  742 + params: 2,
  743 + },
  744 + {
  745 + simg: 'static/img/pointsMall/share03.png',
  746 + title: '积分规则',
  747 + icon: 'static/img/pointsMall/right_icon.png',
  748 + func: this.jumpType,
  749 + params: 3,
  750 + }
  751 + ]);
469 752 }
470 753 // 获取积分商城商品信息接口
471 754 this.integralMallIndex();
  755 + // 获取商品列表数据
  756 + // this.$set(this.phyicalGoods, 0, {
  757 + // loading: true,
  758 + // distance: 50,
  759 + // page: 1,
  760 + // isCall: false, // 是否调用接口
  761 + // isMore: false,
  762 + // list: [],
  763 + // });
  764 + // this.getIntegralNewGoodsList(this.phyicalGoods[0].page);
472 765 },
473 766 mounted () {
474 767 // 如果是App外，设置唤起App和微信内分享参数
... ... @@ -499,7 +792,8 @@ export default {
499 792  
500 793 // 页面显示出来了
501 794 if (document.hidden === false) {
502   -
  795 + // 只刷新积分
  796 + this.refreshGrade = true;
503 797 // 获取积分商城商品信息接口
504 798 this.integralMallIndex();
505 799 }
... ... @@ -511,4 +805,9 @@ export default {
511 805 <style rel="stylesheet/less" lang='less' scoped>
512 806 @import 'pointsMall';
513 807 </style>
  808 +<style>
  809 +.goto_top_box{
  810 + z-index:2 !important;
  811 +}
  812 +</style>
514 813  
... ...
src/pages/pointsMyCollection/pointsMyCollection.less 0 → 100644
  View file @b48247a
  1 +.records_back{
  2 + // background: #F6F6F6;
  3 + min-height: 100vh;
  4 + margin-bottom: 10px;
  5 + .com_box{
  6 + margin: 30px 30px 0 30px;
  7 + background: #FFFFFF;
  8 + border-radius: 24px;
  9 + .item_box{
  10 + // margin: 0 30px;
  11 + border-bottom: solid 2px #EAEAEA;
  12 + display: flex;
  13 + padding: 30px 0;
  14 + img{
  15 + display: flex;
  16 + width: 180px;
  17 + height: 180px;
  18 + }
  19 + .right{
  20 + flex: 1;
  21 + margin-left: 32px;
  22 + .name{
  23 + height: 40px;
  24 + font-size: 30px;
  25 + font-weight: 400;
  26 + color: #666666;
  27 + line-height: 40px;
  28 + font-weight: 500;
  29 + display: -webkit-box;
  30 + -webkit-line-clamp: 1;
  31 + /*! autoprefixer: off */
  32 + -webkit-box-orient: vertical;
  33 + /*! autoprefixer: on */
  34 + text-overflow: ellipsis;
  35 + overflow: hidden;
  36 + }
  37 + .address_name{
  38 + margin-top: 10px;
  39 + font-size: 24px;
  40 + font-weight: 400;
  41 + color: #9B9B9B;
  42 + display: -webkit-box;
  43 + -webkit-line-clamp: 2;
  44 + /*! autoprefixer: off */
  45 + -webkit-box-orient: vertical;
  46 + /*! autoprefixer: on */
  47 + text-overflow: ellipsis;
  48 + overflow: hidden;
  49 + word-break: break-all;
  50 + span{
  51 + margin-left: 10px;
  52 + }
  53 + }
  54 + .exchange_type{
  55 + height: 40px;
  56 + font-size: 28px;
  57 + font-weight: 400;
  58 + color: #FC1541;
  59 + line-height: 40px;
  60 + text-align: left;
  61 + margin-top: 42px;
  62 + }
  63 + .exchange_time{
  64 + margin-top: 10px;
  65 + height: 33px;
  66 + font-size: 28px;
  67 + font-weight: 400;
  68 + color: #9B9B9B;
  69 + margin-top: 10px;
  70 + }
  71 + .btn-box{
  72 + display: flex;
  73 + justify-content: flex-end;
  74 + margin-top: 30px;
  75 + .btn{
  76 + width: 157px;
  77 + height: 50px;
  78 + border-radius: 26px;
  79 + border: 1px solid #FC1541;
  80 + padding:10px 20px;
  81 + font-size: 24px;
  82 + color: #FF415F;
  83 + text-align: center;
  84 + display: flex;
  85 + align-items: center;
  86 + justify-content: center;
  87 + }
  88 + .look_logistics{
  89 + width: 160px;
  90 + height: 60px;
  91 + border: 1px solid #3EB781;
  92 + border-radius: 30px;
  93 + font-size: 30px;
  94 + font-weight: 400;
  95 + color: #3EB781;
  96 + line-height: 60px;
  97 + text-align: center;
  98 + }
  99 + img{
  100 + display: block;
  101 + width: 22px;
  102 + height: 22px;
  103 + margin-left: 4px;
  104 + }
  105 + }
  106 + }
  107 + }
  108 + }
  109 + // 没有更多
  110 + .is_more{
  111 + text-align: center;
  112 + color: #6D7278;
  113 + font-size: 32px;
  114 + font-weight: 500;
  115 + height: 100px;
  116 + line-height: 100px;
  117 + }
  118 + // 暂无记录提示
  119 + .no_gift_tip{
  120 + width: 100%;
  121 + img{
  122 + display: block;
  123 + width: 500px;
  124 + height: 285px;
  125 + margin:366px 125px 0 125px;
  126 + }
  127 + .text{
  128 + font-size: 30px;
  129 + font-weight: 400;
  130 + color: #333333;
  131 + line-height: 60px;
  132 + margin-top: 19px;
  133 + text-align: center;
  134 + }
  135 + }
  136 + // 返回按钮
  137 + .title_box{
  138 + width: 100%;
  139 + position: fixed;
  140 + left: 0;
  141 + font-size: 36px;
  142 + font-weight: 400;
  143 + color: #000000;
  144 + height: 93px;
  145 + line-height: 93px;
  146 + top: 0;
  147 + text-align: center;
  148 + background-color: #fff;
  149 + .title{
  150 + display: flex;
  151 + position: relative;
  152 + border-bottom: 1px solid #E6E6E6;
  153 + .goback{
  154 + display: block;
  155 + width: 38px;
  156 + height: 38px;
  157 + position: absolute;
  158 + left: 20px;
  159 + top: 27px;
  160 + }
  161 + .text{
  162 + flex: 1;
  163 + text-align: center;
  164 + }
  165 + }
  166 + }
  167 + // 占位
  168 + .title_box_lh{
  169 + height: 93px;
  170 + }
  171 +}
0 172 \ No newline at end of file
... ...
src/pages/pointsMyCollection/pointsMyCollection.vue 0 → 100644
  View file @b48247a
  1 +<template>
  2 +<div class="records_back">
  3 + <!-- 占位 -->
  4 + <div class="title_box_lh" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'">
  5 +
  6 + </div>
  7 + <!--返回按钮-->
  8 + <div class="title_box" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'" >
  9 + <div class="title"> <!--返回按钮-->
  10 + <img @click="goback"
  11 + class="goback" src="static/img/icon_back.png" />
  12 + <div class="text">我的收藏</div>
  13 + </div>
  14 + </div>
  15 + <div class="com_box"
  16 + v-infinite-scroll="loadMore"
  17 + infinite-scroll-disabled="loading"
  18 + :infinite-scroll-distance="list.length">
  19 + <div @click="jumpOrderDes(item)" class="item_box" v-for="(item, index) in list" :key="index">
  20 + <img v-lazy="item.simg" src="item" alt=""/>
  21 + <div class="right">
  22 + <div class="name">
  23 + {{item.title}}
  24 + </div>
  25 + <div v-if="item.ads" class="exchange_time">
  26 + {{item.ads}}
  27 + </div>
  28 + <div class="exchange_type">
  29 + <span >{{item.num}}积分</span>
  30 + <span v-show="item.price>0"> + {{item.price}}元</span>
  31 + </div>
  32 + </div>
  33 + </div>
  34 + </div>
  35 + <!-- 暂无记录展示 -->
  36 + <div v-show="list.length == 0 && isCall" class="no_gift_tip">
  37 + <img src="static/img/no_gift_tip.png" alt=""/>
  38 + <div class="text">暂无收藏商品</div>
  39 + </div>
  40 + <div v-show="list.length>0 && isMore ==0" class="is_more">
  41 + 没有更多了
  42 + </div>
  43 + <!-- 地址信息组件 -->
  44 + <!-- <app-address-toast ref="itemsInfo" @toUpdate="updateAddressInfo" v-show="pointsToast_control"></app-address-toast> -->
  45 +</div>
  46 +</template>
  47 +
  48 +<script>
  49 +// 引入组件
  50 +import { Toast, Indicator } from "mint-ui";
  51 +// import appAddressToast from "@/components/appAddressToast/appAddressToast";
  52 +export default {
  53 + data () {
  54 + return {
  55 + list: [], // 中奖记录列表
  56 + page: 0,
  57 + isMore: 1, // 0没有更多1有更多
  58 + addressInfo: null, // 暂存已选商品发货地址信息
  59 + isCall: false, // 是否调用接口
  60 + // pointsToast_control: this.$route.query.pointsToast_control,
  61 + }
  62 + },
  63 + //部件
  64 + components: {
  65 + // appAddressToast
  66 + },
  67 + //静态
  68 + props: [
  69 + ],
  70 + //对象内部的属性监听，也叫深度监听
  71 + watch: {
  72 + },
  73 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  74 + computed: {
  75 + },
  76 + //方法表示一个具体的操作，主要书写业务逻辑；
  77 + methods: {
  78 + // 跳转原生商品详情页
  79 + jumpOrderDes (item) {
  80 + /**
  81 + * 跳转商品详情
  82 + * @param {Object} item [数据对象]
  83 + */
  84 + if (this.isCNLive.value) {
  85 + // 校验登录
  86 + if (this.$parent.checkLogin()) {
  87 + // 通用跳转跳转到商品详情页新打开webview
  88 + if (typeof this.$parent.gotoDetail === 'function') {
  89 +
  90 + // 设置跳转参数
  91 + let params = {
  92 + type: '5',
  93 + to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
  94 + shop_type: ''
  95 + };
  96 +
  97 + // 页面跳转
  98 + this.$parent.gotoDetail(params);
  99 + }
  100 + }
  101 + } else {
  102 + this.$parent.callApp();
  103 + }
  104 + },
  105 + // 填写地址
  106 + // addAddressInfo (item) {
  107 + // // 如果是实物弹起填写地址弹窗
  108 + // this.pointsToast_control = true;
  109 + // // 礼品兑换弹框派发
  110 + // this.$refs.itemsInfo.getItemInfo(item, item.id);
  111 + // },
  112 + // 填写完地址回调
  113 + // updateAddressInfo (orderInfo, addressInfo) {
  114 + // console.log(orderInfo);
  115 + // this.list.forEach(item => {
  116 + // let obj = item;
  117 + // for (let key in obj) {
  118 + // if (item.id == orderInfo.id) {
  119 + // this.$set(item, "address_name", addressInfo.name);
  120 + // this.$set(item, "address_phone", addressInfo.phone);
  121 + // this.$set(item, "address_address", addressInfo.address);
  122 + // }
  123 + // }
  124 + // });
  125 + // },
  126 + // 下拉刷新
  127 + loadMore () {
  128 + this.loading = true;
  129 + this.page++;
  130 + this.getCellGoodsList(this.page);
  131 + },
  132 + // 积分商城收藏列表
  133 + /**
  134 + * 获取活动详情页信息
  135 + * @param {string} id [活动id]
  136 + * * @param {string} uid [用户id]
  137 + */
  138 + getCellGoodsList (page) {
  139 + if (this.isMore == 1) {
  140 + // 加载中提示
  141 + Indicator.open("加载中...");
  142 + // 请求接口
  143 + this.http(
  144 + "/Api/" + this.getApiVersion().LuckDraw + "/cellGoodsList",
  145 + {
  146 + uid: this.getStore("uid"),
  147 + page: page
  148 + },
  149 + this.getCellGoodsListCallback,
  150 + {
  151 + method: "POST"
  152 + }
  153 + );
  154 + }
  155 + },
  156 + /**
  157 + * 获取积分商城收藏列表信息回调
  158 + * @param {object} res [服务器返回数据]
  159 + * @param {object} ext [扩展参数]
  160 + */
  161 + getCellGoodsListCallback (res, ext) {
  162 + this.loading = false;
  163 + // 加载完成
  164 + Indicator.close();
  165 + this.isCall = true;
  166 + // 返回处理
  167 + if (res.code == 200) {
  168 + // 解构数据
  169 + let { data: datas } = res;
  170 + if (datas.length == 0) {
  171 + this.isMore = 0;
  172 + } else {
  173 + /* 获取活动详情页数据 开始 */
  174 + for (let i = 1; i <= datas.length; i++) {
  175 + this.list.push(datas[i - 1]);
  176 + }
  177 + }
  178 + /* 获取积分商城收藏列表 结束 */
  179 + } else if (res.code == 400) {
  180 + // 获取积分商城收藏列表失败
  181 + Toast(res.message);
  182 + } else {
  183 + // 获取积分商城收藏列表失败
  184 + Toast("获取积分商城收藏列表失败");
  185 + }
  186 + },
  187 + /**
  188 + * 后退
  189 + */
  190 + goback () {
  191 +
  192 + // 判断是否有处理函数
  193 + if (typeof this.$parent.back === 'function') {
  194 +
  195 + // 后退
  196 + this.$parent.back();
  197 + } else {
  198 +
  199 + // 后退
  200 + window.history.go(-1);
  201 + }
  202 + },
  203 + /**
  204 + * app选中地址回选
  205 + * @param {Object} addressInfo [服务器返回数据]
  206 + */
  207 + appSelectAddressCallback (addressInfo) {
  208 + if (this.isAndroid.value) {
  209 + this.$refs.itemsInfo.getAppAddressInfo(addressInfo);
  210 + } else {
  211 + if (addressInfo) {
  212 + this.$refs.itemsInfo.getAppAddressInfo(JSON.parse(addressInfo));
  213 + } else {
  214 + this.$refs.itemsInfo.getAppAddressInfo();
  215 + }
  216 + }
  217 + },
  218 + },
  219 + //请求数据
  220 + created () {
  221 + if (this.isiPhone.value || this.isiPad.value) {
  222 + this.pointsToast_control = this.$route.query.pointsToast_control;
  223 + } else {
  224 + let ext = window.localStorage.getItem("ext");
  225 + this.pointsToast_control = this.getParameterByName(
  226 + "pointsToast_control",
  227 + ext
  228 + );
  229 + }
  230 + },
  231 + mounted () {
  232 + // 地址回选原生回调
  233 + var that = this;
  234 + window["appSelectAddressCallback"] = function (result) {
  235 + that.appSelectAddressCallback(result);
  236 + };
  237 + // if (this.plat == "i") {
  238 + // var that = this;
  239 + // function resolution (data) {
  240 + // that.appSelectAddressCallback();
  241 + // }
  242 + // this.$bridge.registerHandler("appSelectAddressCallback", function (
  243 + // data,
  244 + // responseCallback
  245 + // ) {
  246 + // resolution(data);
  247 +
  248 + // responseCallback(data);
  249 + // });
  250 + // } else if (this.plat == "a") {
  251 +
  252 + // }
  253 + // 页面显示监听
  254 + // document.addEventListener('visibilitychange', () => {
  255 + // // 页面显示出来了
  256 + // if (document.hidden === false) {
  257 + // this.list = []; // 中奖记录列表
  258 + // this.page = 0;
  259 + // this.isMore =1; // 0没有更多1有更多
  260 + // this.loadMore();
  261 + // }
  262 + // });
  263 + }
  264 +}
  265 +</script>
  266 +
  267 +<style rel="stylesheet/less" scoped lang="less">
  268 +@import 'pointsMyCollection';
  269 +</style>
  270 +
... ...
src/router/index.js
  View file @b48247a
... ... @@ -354,6 +354,32 @@ const router = new Router({
354 354 requireAuth: false
355 355 }
356 356 },
  357 + {
  358 + // 兑换排行榜
  359 + path: "/exchangeRanking",
  360 + name: "exchangeRanking",
  361 + component: resolve => {
  362 + require([
  363 + "@/pages/exchangeRanking/exchangeRanking"
  364 + ], resolve);
  365 + },
  366 + meta: {
  367 + requireAuth: false
  368 + }
  369 + },
  370 + {
  371 + // 积分商城我的收藏
  372 + path: "/pointsMyCollection",
  373 + name: "pointsMyCollection",
  374 + component: resolve => {
  375 + require([
  376 + "@/pages/pointsMyCollection/pointsMyCollection"
  377 + ], resolve);
  378 + },
  379 + meta: {
  380 + requireAuth: false
  381 + }
  382 + },
357 383 /* 积分商城结束 */
358 384  
359 385 /* 健步走健康值商城开始 */
... ...
static/img/pointsBack.png 100755 → 100644
View file @b48247a

134 KB | W: | H:

42.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
static/img/pointsMall/collection.png 0 → 100644
View file @b48247a

5.59 KB
static/img/pointsMall/collection2.png 0 → 100644
View file @b48247a

2.98 KB
static/img/pointsMall/header_hot.png 0 → 100644
View file @b48247a

124 KB
static/img/pointsMall/icon01.png 0 → 100755
View file @b48247a

6.84 KB
static/img/pointsMall/icon02.png 0 → 100755
View file @b48247a

5.92 KB
static/img/pointsMall/icon03.png 0 → 100755
View file @b48247a

4.33 KB
static/img/pointsMall/phb_bacb.png 0 → 100644
View file @b48247a

87.3 KB
static/img/pointsMall/right_icon.png 0 → 100755
View file @b48247a

423 Bytes
static/img/pointsMall/right_icon2.png 0 → 100644
View file @b48247a

767 Bytes
static/img/pointsMall/share01.png 0 → 100755
View file @b48247a

3.11 KB
static/img/pointsMall/share02.png 0 → 100755
View file @b48247a

2.47 KB
static/img/pointsMall/share03.png 0 → 100755
View file @b48247a

2.28 KB
static/img/pointsMall/share_icon.png 0 → 100755
View file @b48247a

679 Bytes
static/img/pointsMall/top.png 0 → 100755
View file @b48247a

3.55 KB