123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372 |
- <!-- 我的收藏页面 -->
- <template>
- <view class="container" :class="{container_FF: recommendLen == 0 && collectList.length == 0}">
- <!-- 空白页 start-->
- <view v-if="!collectList.length&&loadingState != 'first_loading'" class="flex_column_start_center empty_part" :class="{empty_part_FF:recommendLen == 0 && collectList.length == 0}">
- <image class="img" :src="imgUrl+'empty_collect.png'" />
- <text class="tip_con">{{$L('暂无收藏的商品哦')}}~</text>
- <view class="ope_btn flex_row_center_center" @click="goGoodsList()">
- {{$L('马上去逛逛')}}
- </view>
- </view>
- <!-- 空白页 end-->
- <!-- 收藏的商品 start-->
- <view v-if='collectList.length' class="goods_list flex_column_start_start">
- <goodsCollectItemH v-for="(item,index) in collectList" :goods_info="item" :key='index' :isWeiXinBrower="isWeiXinBrower" @delGoods='delCollectGoods' @goShare="shareGoods1" @touchstart.native="handleTouchStart($event,item.followId)" @touchmove.native="handleTouchMove($event,item.followId)" :style="{left:is_show_btn && followId == item.followId?'-160rpx':'0'}" :left="is_show_btn && followId == item.followId"/>
- </view>
- <loadingState v-if="loadingState == 'first_loading'||collectList.length > 0" :state='loadingState'/>
- <!-- 收藏的商品 end-->
- <!-- 推荐商品 start-->
- <view v-if='!hasMore'>
- <recommendGoods ref='recomment_goods' />
- </view>
- <!-- 推荐商品 end-->
- <!-- 微信浏览器分享提示 start-->
- <view class="wx_brower_share_mask" v-if="showWeiXinBrowerTip">
- <view class="wx_brower_share_top_wrap">
- <image :src="imgUrl+'wx_share_tip.png'" mode="widthFix" @tap="closeShareModel" class="wx_brower_share_img"></image>
- </view>
- </view>
- <!-- 微信浏览器分享提示 end-->
- <!-- 分享弹框 start -->
- <view class="share_model" v-if="share_model" @touchmove.stop.prevent="moveHandle">
- <view class="share_model_list">
- <!-- #ifdef H5 -->
- <view class="share_model_pre" @tap.stop="sldShareBrower" v-if="isWeiXinBrower">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </view>
- <!-- #endif -->
- <!-- #ifdef MP-WEIXIN -->
- <button open-type="share" class="share_model_pre">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </button>
- <!-- #endif -->
- <!-- #ifdef APP-PLUS -->
- <view class="share_model_pre" @tap.stop="sldShare(0,'WXSceneSession')">
- <image :src="imgUrl+'goods_detail/wx_share.png'" mode=""></image>
- <text>{{$L('微信好友')}}</text>
- </view>
- <view class="share_model_pre" @tap.stop="sldShare(0,'WXSenceTimeline')">
- <image :src="imgUrl+'goods_detail/wechat_moments.png'" mode=""></image>
- <text>{{$L('微信朋友圈')}}</text>
- </view>
- <!-- #endif -->
- </view>
- <view class="share_model_close" @click="closeShareModel">
- <image :src="imgUrl+'goods_detail/share_close.png'" mode=""></image>
- </view>
- </view>
- <!-- 分享弹框 end -->
- </view>
- </template>
- <script>
- import recommendGoods from "@/components/recommend-goods.vue"
- import goodsCollectItemH from "@/components/goods_collect_item_h.vue";
- import loadingState from "@/components/loading-state.vue";
- import {
- mapState
- } from 'vuex';
- export default {
- components: {
- recommendGoods,
- goodsCollectItemH,
- loadingState
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- collectList: [], //收藏列表
- hasMore: true, //是否还有数据
- pageSize: 10,
- current: 1,
- loadingState: 'first_loading',
- share_model:false, //分享弹框
- isWeiXinBrower:false,//是否微信浏览器
- showWeiXinBrowerTip:false,//微信浏览器分享的提示操作
- recommendLen:0, //推荐商品的length长度
- followId:'',
- startX:'',
- startY:'',
- is_show_btn:false, //是否展示
- };
- },
- onLoad(option) {
- // #ifdef H5
- this.isWeiXinBrower = this.$isWeiXinBrower();
- // #endif
- // 父页面接收子组件recommend——goods.vue传过来的值
- uni.$on("recommendGoods",(options)=>{
- this.recommendLen = JSON.parse(options.recommendLen)
- })
- },
- onShow() {
- this.getList();
- },
- computed: {
- ...mapState(['userInfo'])
- },
- onShareAppMessage: function() {
- return {
- title: this.shareGoods.goodsName,
- path: '/pages/product/detail?productId='+this.shareGoods.productId+'&goodsId='+this.shareGoods.goodsId,
- imageUrl: this.shareGoods.goodsImage
- };
- },
- methods: {
- //浏览器分享
- sldShareBrower() {
- this.showWeiXinBrowerTip = true;
- this.share_model = false;
- this.$weiXinBrowerShare(1,{
- title:this.shareGoods.goodsName,
- desc:this.shareGoods.goodsBrief,
- link:this.shareGoods.shareLink,
- imgUrl:this.shareGoods.productImage,
- });
- },
- //分享 type:分享类型 0 图文 2图片,scene 场景 WXSceneSession:分享朋友 WXSenceTimeline:分享朋友圈
- sldShare: function(type,scene) {
- let shareData = {};
- shareData.href = this.shareGoods.shareLink;
- shareData.title = this.shareGoods.goodsName;
- shareData.summary = this.shareGoods.goodsBrief;
- shareData.imageUrl = this.shareGoods.productImage;
- this.$weiXinAppShare(type,scene,shareData);
- this.closeShareModel();//关闭分享
- },
- //分享当前商品
- shareGoods1(shareGoods){
- this.shareGoods = shareGoods;
- this.share_model = true;
- },
- //关闭分享弹框
- closeShareModel(){
- this.share_model = false;
- this.showWeiXinBrowerTip = false;
- },
- //获取收藏的商品
- getList() {
- let params = {};
- params.url = 'v3/member/front/followProduct/list';
- params.method = 'GET';
- params.data = {};
- params.data.pageSize = this.pageSize;
- params.data.current = this.current;
- this.loadingState = this.loadingState == 'first_loading' ? this.loadingState : 'loading';
- this.$request(params).then(res => {
- if (res.state == 200) {
- if (this.current == 1) {
- this.collectList = res.data.list;
- } else {
- this.collectList = this.collectList.concat(res.data.list);
- }
- this.collectList.map(item=>{
- item.is_show_btn = false
- })
- this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
- if (this.hasMore) {
- this.current++;
- this.loadingState = 'allow_loading_more';
- } else {
- this.loadingState = 'no_more_data';
- }
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- //马上去逛逛事件
- goGoodsList() {
- uni.navigateTo({
- url: `/pages/product/list`
- })
- },
- //页面触底事件
- onReachBottom() {
- if (this.hasMore == false) {
- this.$refs.recomment_goods.getMoreData();
- } else {
- this.getList();
- }
- },
- //取消收藏
- delCollectGoods(id) {
- this.$request({
- url: 'v3/member/front/followProduct/edit',
- data: {
- key: this.userInfo.access_token,
- productIds: id,
- isCollect:false,
- },
- method: 'POST'
- }).then(res => {
- this.$api.msg(res.msg);
- if (res.state == 200) {
- //更新页面数据
- this.getList();
- }
- }).catch((e) => {
- //异常处理
- })
- },
- handleTouchStart(e,followId){
- this.startX = e.touches[0].clientX;
- this.startY = e.touches[0].clientY;
- },
- handleTouchMove(e,followId){
- // 获得当前坐标
- this.followId = followId
- this.currentX = e.touches[0].clientX;
- this.currentY = e.touches[0].clientY;
- const x = this.startX - this.currentX; //横向移动距离
- const y = Math.abs(this.startY - this.currentY); //纵向移动距离,若向左移动有点倾斜也可以接受
- if (x > 5) {
- //向左滑显示
- this.is_show_btn = true
- } else if (x < 5) {
- //向右滑隐藏
- this.is_show_btn = false
- }
- if(y>50 || y<-50){
- this.is_show_btn = false
- }
- },
- onPageScroll(e){
- this.followId = ''
- },
- }
- }
- </script>
- <style lang='scss'>
- page {
- width: 750rpx;
- margin: 0 auto;
- background-color: #f5f5f5;;
- }
- .container{
- background: $bg-color-split;
- }
- .container_FF{
- background: #FFFFFF;
- }
- .empty_part {
- display: flex;
- flex: 1;
- width: 100%;
- height: 516rpx;
- background: #fff;
- border-top: 20rpx solid $bg-color-split;
- .img {
- width: 210rpx;
- height: 210rpx;
- margin-bottom: 37rpx;
- margin-top: 88rpx;
- }
- .tip_con {
- color: $main-third-color;
- font-size: 26rpx;
- }
- .ope_btn {
- color: $main-color;
- font-size: 28rpx;
- padding: 0 25rpx;
- height: 54rpx;
- background: rgba(252, 28, 28, .1);
- border-radius: 27rpx;
- margin-top: 20rpx;
- }
- }
- .empty_part_FF{
- height: auto;
- padding-top: 200rpx;
- }
- .goods_list {
- border-top: 20rpx solid $bg-color-split;
- width: 750rpx;
- overflow-x: hidden;
- }
- /* 分享弹框 start */
- .share_model{
- width:750rpx;
- height:100%;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- margin: 0 auto;
- background: rgba(0,0,0,0.6);
- z-index: 100;
- }
- .share_model_list{
- display: flex;
- justify-content: space-around;
- padding: 0 50rpx;
- box-sizing: border-box;
- position: fixed;
- bottom: 150rpx;
- z-index: 110;
- width: 750rpx;
- .share_model_pre{
- display: flex;
- flex-direction: column;
- align-items: center;
- background: transparent;
- border-radius: 0;
- height: auto;
- line-height: auto;
- &::after{
- border-width: 0;
- }
- image{
- width: 105rpx;
- height: 105rpx;
- }
- text{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 36rpx;
- margin-top: 30rpx;
- }
- }
- }
- .share_model_close{
- width: 46rpx;
- height: 46rpx;
- bottom: 60rpx;
- position: fixed;
- z-index: 110;
- left: 0;
- right: 0;
- margin: 0 auto;
- image{
- width: 46rpx;
- height: 46rpx;
- }
- }
- button{
- padding: 0;
- margin: 0;
- }
- /* 分享弹框 end */
- </style>
|