init
This commit is contained in:
qijq
parent
7e4ae50d1c
commit
03b0aedc46
543
activity/coupon/detail.vue
Normal file
543
activity/coupon/detail.vue
Normal file
@ -0,0 +1,543 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='tails_box' :style='"height:" + CenterCoupon.AllowOfflineWriteOff?"640rpx":"400rpx"'>
|
||||
<view class='tails_couname'>
|
||||
<text>
|
||||
{{CenterCoupon.activity_name}}
|
||||
<span style="font-size: 12rpx;margin-left:6rpx;color:#FF9933" v-if="CenterCoupon.activity_on_is_off === 1">(线下使用)</span>
|
||||
</text>
|
||||
</view>
|
||||
<view class='tails_mon'><label style='font-size:30rpx;margin-right:8rpx;margin-left:25%'>{{__('￥')}}</label><label style='font-size:60rpx;margin-right: 24rpx;ont-weight:bold;'>{{CenterCoupon.voucher_price || CenterCoupon.activity_rule.voucher_price}}</label><label style='font-size:24rpx;color:#9B9B9B'>{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal )}}</label></view>
|
||||
<view class='tails_time' style='width:100%'>{{sprintf(__('有效日期至：%s'), CenterCoupon.voucher_end_date || CenterCoupon.activity_endtime)}}
|
||||
</view>
|
||||
<view class='tails_time' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||||
<image :src='CenterCoupon.WriteOffCodeUrl' style="width: 64%;height: 289rpx;"></image>
|
||||
</view>
|
||||
<view class='tails_time' style='font-size:24rpx;color:#9B9B9B ' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||||
{{CenterCoupon.WriteOffCode}}
|
||||
</view>
|
||||
<view class='btn_box' v-if="!CenterCoupon.AllowOfflineWriteOff" style="height: 100rpx;">
|
||||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
|
||||
</view>
|
||||
<block v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false">
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(isOnLine)" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-else :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" :data-writeoff_code="CenterCoupon.writeoff_code" @tap="Make">{{__('立即使用')}}
|
||||
</view>
|
||||
</block>
|
||||
|
||||
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
|
||||
</view>
|
||||
|
||||
|
||||
<view :data-id="CenterCoupon.activity_id" :data-name="CenterCoupon.Name" @tap="shareBox" class='but-stl02' v-if="false">{{__('分享给好友')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='img_box'>
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/coupon/partingLine.png" style="width:100%;height:100%;vertical-align:top;"></image>
|
||||
</view>
|
||||
<view class='tailfoli' style="overflow: hidden;">
|
||||
<view class='btn_box' style='margin:9px auto 0 auto;overflow: hidden' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
|
||||
</view>
|
||||
<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff " :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
|
||||
</view>
|
||||
<view class='but-stl02' :data-id="CenterCoupon.activity_id" @tap="shareBox" :data-name="CenterCoupon.Name" v-if="false">{{__('分享给好友')}}
|
||||
</view>
|
||||
<view class='btn_mx' v-if="CenterCoupon.AllowOfflineWriteOff">{{__('支持线下使用（在门店购物时，向店员出示此码抵扣）')}}</view>
|
||||
</view>
|
||||
<view class='tails_tox' v-if="!CenterCoupon.AllowOfflineWriteOff">
|
||||
<view class='tail_fo1'>{{__('使用条件')}}</view>
|
||||
<view class='tail_fo2'>
|
||||
<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal)}}</view>
|
||||
<view>
|
||||
<label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label>
|
||||
<label v-if="CenterCoupon.activity_on_is_off === 0" style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" @tap="usenow" :data-store_id="(CenterCoupon.store_id)">{{__('查看')}}</label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='tails_tox' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||||
<view class='tail_fo5'>{{__('使用条件')}}</view>
|
||||
<view class='tail_fo6'>
|
||||
<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule.requirement.buy.subtotal)}}</view>
|
||||
<view><label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label><label style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('查看')}}</label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style='width:100%' v-if="CenterCoupon.Description != ''&& CenterCoupon.Description != null || CenterCoupon.AllowOfflineWriteOff">
|
||||
<view class='tails_tox' style="width: 85%;padding-bottom: 60rpx;">
|
||||
<view class='tail_fo1' style='color:#fff '>{{__('使用说明')}}</view>
|
||||
<view class='tail_fo3' style='color:#fff;height:43rpx' v-if="CenterCoupon.AllowOfflineWriteOff">
|
||||
{{__('支持线下使用，领取后向店员展示优惠券详情')}}
|
||||
</view>
|
||||
<rich-text style='color:#fff;white-space: pre-line;font-size:22rpx;word-break:break-all' v-if='CenterCoupon.Description' nodes='CenterCoupon.Description'></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<template is="shareMskTpl" data="PageQRCodeInfo" />
|
||||
|
||||
<view :class="bannerShow ? 'canvas' : 'hide'" @click="setHide">
|
||||
<canvas class="m-canvas" canvas-id="qrcode" style="width: 200px;height: 200px;" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
import uniQrcode from '@/components/uni-qrcode/uni-qrcode.vue';
|
||||
|
||||
import uQRCode from '@/components/uni-qrcode/uqrcode.js';
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
CenterCoupon: {
|
||||
activity_rule: {
|
||||
requirement: {
|
||||
buy: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
cid: "",
|
||||
couponItemId: "",
|
||||
bannerShow: false,
|
||||
isOnLine: false, //是否线上优惠券
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('优惠券详情')
|
||||
});
|
||||
|
||||
this.setData({
|
||||
cid: options.cid,
|
||||
couponItemId: options.couponItemId
|
||||
});
|
||||
|
||||
var that = this;
|
||||
that.GetCouponInfo()
|
||||
|
||||
/*
|
||||
this.forceUserInfo(function(user) {
|
||||
if (user) {
|
||||
that.GetCouponInfo()
|
||||
}
|
||||
});
|
||||
*/
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
GetCouponInfo: function(e) {
|
||||
var params = {
|
||||
activity_id: this.cid,
|
||||
user_voucher_id: this.couponItemId
|
||||
},
|
||||
that = this;
|
||||
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.user.voucher_get,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
data.AllowOfflineWriteOff = false;
|
||||
that.setData({
|
||||
CenterCoupon: data
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
onGotUserInfo: function(e) {
|
||||
if (null != e.detail.userInfo) {
|
||||
var a = {
|
||||
Photo: e.detail.userInfo.avatarUrl,
|
||||
NickName: e.detail.userInfo.nickName,
|
||||
UserName: app.globalData.UserInfo.UserName
|
||||
};
|
||||
$.xsr($.makeUrl(userapi.UpdateUserPhotoAndNickName, a), function(e) {
|
||||
//console.log("个人信息：", e)
|
||||
}), app.imageUrl = e.detail.userInfo.avatarUrl, app.nickName = e.detail.userInfo.nickName, app.authorize = true, this.shareQRCode()
|
||||
}
|
||||
},
|
||||
shareQRCode: function(e) {
|
||||
//console.log("2：", this.cid);
|
||||
var a = this,
|
||||
o = {
|
||||
vendorId: app.globalData.VendorInfo.Id,
|
||||
userId: app.globalData.UserInfo.Id,
|
||||
couponId: this.cid
|
||||
};
|
||||
$.xsr($.makeUrl(userapi.QRCouponCodePoster, o), function(e) {
|
||||
//console.log("图片", e), a.setData({PageQRCodeInfo: {Path: e.Info, IsShare: true, IsShareBox: false, IsJT: true}})
|
||||
})
|
||||
},
|
||||
showCodeImg: function() {
|
||||
wx.previewImage({
|
||||
current: this.PageQRCodeInfo.Path,
|
||||
urls: [this.PageQRCodeInfo.Path]
|
||||
})
|
||||
},
|
||||
saveImg: function() {
|
||||
var a = this;
|
||||
$.loading(), wx.downloadFile({
|
||||
url: this.PageQRCodeInfo.Path,
|
||||
success: function(e) {
|
||||
$.hideloading(), wx.saveImageToPhotosAlbum({
|
||||
filePath: e.tempFilePath,
|
||||
success: function() {
|
||||
a.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
}), $.alert("保存图片成功！")
|
||||
},
|
||||
fail: function(e) {
|
||||
$.hideloading()
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(e) {
|
||||
$.hideloading()
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelShare: function() {
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
},
|
||||
usenow: function(e) {
|
||||
let that = this;
|
||||
var t = e.currentTarget.dataset.store_id;
|
||||
that.$.redirectTo({
|
||||
url: "/member/product/coupon?store_id=" + t
|
||||
})
|
||||
},
|
||||
|
||||
receivenow: function(e) {
|
||||
let that = this;
|
||||
that.getCoupon(e.currentTarget.dataset.id)
|
||||
},
|
||||
|
||||
setHide: function() {
|
||||
this.setData({
|
||||
bannerShow: false
|
||||
});
|
||||
},
|
||||
|
||||
Make: function(e) {
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
bannerShow: true
|
||||
});
|
||||
let writeoff_code = e.currentTarget.dataset.writeoff_code;
|
||||
if (writeoff_code != null && writeoff_code != '') {
|
||||
that.couponItemId = writeoff_code;
|
||||
}
|
||||
|
||||
uQRCode.make({
|
||||
canvasId: 'qrcode',
|
||||
componentInstance: this,
|
||||
text: that.couponItemId,
|
||||
size: 200,
|
||||
margin: 10,
|
||||
backgroundColor: '#ffffff',
|
||||
foregroundColor: '#000000',
|
||||
fileType: 'jpg',
|
||||
// correctLevel: uQRCode.errorCorrectLevel.H,
|
||||
success: res => {
|
||||
// console.log(res);
|
||||
},
|
||||
fail: error => {
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCoupon: function(t) {
|
||||
let that = this;
|
||||
var params = {
|
||||
activity_id: t,
|
||||
user_is_new: 0
|
||||
};
|
||||
|
||||
this.forceUserInfo((user) => {
|
||||
if (user) {
|
||||
$.request({
|
||||
url: this.Config.URL.user.voucher_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.getCouponlist();
|
||||
|
||||
that.$.confirm(that.__("领取成功!,去消费"), function(a) {
|
||||
if (a.confirm) {
|
||||
that.$.navigateTo({
|
||||
url: "/pagesub/index/store?store_id=" + that.CenterCoupon.store_id
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
} else {
|
||||
$.alert(msg);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
t && $.clearxsr($.makeUrl(userapi.UserReceiveCoupon, params), function (t) {
|
||||
0 == t.Code ? (that.setData({isCancelSuccess: false, mskType: 2, Coupons: t.Info}), wx.showToast({
|
||||
title: "领取成功！",
|
||||
icon: "none"
|
||||
})) : wx.showToast({title: t.Msg, icon: "none"})
|
||||
})
|
||||
|
||||
*/
|
||||
},
|
||||
shareBox: function() {
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: true,
|
||||
IsShareBox: true,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
/* pages/Receivetails/Receivetails.wxss */
|
||||
page {
|
||||
background: #DB384C
|
||||
}
|
||||
|
||||
.tails_box {
|
||||
width: 94%;
|
||||
/*height: 345rpx;*/
|
||||
background: #fff;
|
||||
margin: 70rpx auto 0 auto;
|
||||
position: relative;
|
||||
padding-top: 18rpx;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
|
||||
.tails_logo {
|
||||
width: 112rpx;
|
||||
position: absolute;
|
||||
top: -14%;
|
||||
left: 42%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.tails_shopname {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.tails_couname {
|
||||
width: 100%;
|
||||
color: #DB384C;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tails_mon {
|
||||
width: 100%;
|
||||
color: #DB384C;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.tails_but {
|
||||
width: 54%;
|
||||
margin: 43rpx auto 0 auto;
|
||||
height: 50rpx;
|
||||
background: #fff;
|
||||
border-radius: 54rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
color: #DB384C
|
||||
}
|
||||
|
||||
.tails_time {
|
||||
width: 64%;
|
||||
/*margin: 25rpx auto 0 auto;*/
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #DB384C
|
||||
}
|
||||
|
||||
.tails_tox {
|
||||
width: 89%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tail_fo1 {
|
||||
font-size: 24rpx;
|
||||
color: #000000;
|
||||
line-height: 62rpx
|
||||
}
|
||||
|
||||
.tail_fo5 {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
padding-left: 20rpx;
|
||||
line-height: 62rpx
|
||||
}
|
||||
|
||||
.tail_fo2 {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #9B9B9B;
|
||||
border-radius: 10rpx
|
||||
}
|
||||
|
||||
.tail_fo6 {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
padding-left: 20rpx;
|
||||
border-radius: 10rpx
|
||||
}
|
||||
|
||||
.tail_fo3 {
|
||||
width: 100%;
|
||||
height: 137rpx;
|
||||
font-size: 22rpx;
|
||||
border-radius: 10rpx
|
||||
}
|
||||
|
||||
.but-stl {
|
||||
width: 42%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 61rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 1px solid #fff;
|
||||
background: #DB384C;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
line-height: 61rpx;
|
||||
}
|
||||
|
||||
.but-stl02 {
|
||||
width: 42%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 61rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 1px solid #DB384C;
|
||||
background: #fff;
|
||||
font-size: 26rpx;
|
||||
color: #DB384C;
|
||||
line-height: 61rpx;
|
||||
}
|
||||
|
||||
.tailfoli {
|
||||
width: 94%;
|
||||
height: 88px;
|
||||
background: #fff;
|
||||
border-bottom-left-radius: 11px;
|
||||
border-bottom-right-radius: 11px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
width: 88%;
|
||||
margin: 22px auto 0 auto;
|
||||
wxcs_style_margin: 22px auto 0 auto;
|
||||
/*height: 100rpx;*/
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.img_box {
|
||||
width: 94%;
|
||||
height: 72rpx;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.btn_mx {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #9B9B9B;
|
||||
margin: 88rpx 0 0
|
||||
}
|
||||
|
||||
.m-canvas {
|
||||
position: absolute !important;
|
||||
/*重要的一步是设置绝对定位*/
|
||||
margin: auto;
|
||||
/*将四周边距都设为auto自动*/
|
||||
left: 0;
|
||||
/*离包含元素的距离均设为零*/
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
935
activity/coupon/list.vue
Normal file
935
activity/coupon/list.vue
Normal file
@ -0,0 +1,935 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="'m-navbar-item ' + (tapindex==0?'m-navbar-item-on':'')" @click="freeget">
|
||||
{{__('免费领取')}}
|
||||
</view>
|
||||
<view v-if="false" :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="buyget">
|
||||
{{__('购买获取')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view class="m-scrollBox" scroll-y="true" @scrolltolower="scrollbottom">
|
||||
<block v-if="(VoucherList.length>0)">
|
||||
<view :class="['m-coupon-item', item.if_gain ? '' : 'off']" v-for="(item, index) in VoucherList" :key="index">
|
||||
<view class="m-coupon-info">
|
||||
<view class="m-coupon-text">
|
||||
<label v-if="item.activity_type != 3">
|
||||
{{item.activity_name}}
|
||||
<span style="font-size: 12rpx;margin-left:6rpx;color:#FF9933" v-if="item.activity_on_is_off === 1">(线下)</span>
|
||||
<span style="font-size: 18rpx;margin-left:8rpx;color:#FF9933">{{item.store_name}}</span>
|
||||
</label>
|
||||
<label v-else>
|
||||
{{item.product_name}}
|
||||
<span style="font-size: 12rpx;margin-left:6rpx;color:#FF9933" v-if="item.activity_on_is_off === 1">(线下)</span>
|
||||
<span style="font-size: 18rpx;margin-left:8rpx;color:#FF9933">{{item.store_name}}</span>
|
||||
</label>
|
||||
<text v-if="item.activity_type != 3">{{sprintf(__('满￥%s可用，消耗 %s 积分领取。%s'), item.activity_rule.requirement.buy.subtotal, item.activity_rule.requirement.points.needed, item.activity_remark)}}</text>
|
||||
<text v-else>{{sprintf(__('满￥%s可抵扣￥%s'), item.activity_rule.requirement.buy.subtotal,item.activity_rule.voucher_price)}}</text>
|
||||
<text>{{sprintf(__('有效日期至：%s'), item.activity_rule.voucher_end_date)}}</text>
|
||||
</view>
|
||||
<view class="m-coupon-price">
|
||||
<view class="price-content-box " v-if="item.activity_type == 3">
|
||||
<label>{{__('￥')}}</label>{{item.activity_rule.requirement.points.needed}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-coupon-btn" @click="doReceive" :data-isreceive="(item.if_gain ? '1' : '-1')" :data-id="(item.activity_id)" :data-point="(item.activity_rule.requirement.points.needed)" :data-store_id="(item.store_id)">
|
||||
<block v-if="(item.if_gain && item.activity_type != 4 && item.activity_type != 3)">
|
||||
<label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{ __('立即领取')}}</label>
|
||||
</block>
|
||||
<block v-else-if="(!item.if_gain)">
|
||||
<label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{__('已经领取')}}</label>
|
||||
<label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{__('去消费')}}</label>
|
||||
</block>
|
||||
<!-- <label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{item.if_gain ? __('立即领取'):__('已经领取 去消费') }}</label> -->
|
||||
</view>
|
||||
<view class="m-coupon-btn" @click="doShare" :data-isreceive="(item.if_gain ? '1' : '-1')" :data-voucher_price="(item.activity_rule.voucher_price)" :data-id="(item.activity_id)" :data-point="(item.activity_rule.requirement.points.needed)" :data-activity-name="(item.activity_name)" :data-store_id="(item.store_id)">
|
||||
<block v-if="(item.if_gain && item.activity_type === 4)">
|
||||
<label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{ __('立即分享')}}</label>
|
||||
</block>
|
||||
</view>
|
||||
<view class="m-coupon-btn" @click="doBuy(item.item_id)" :data-isreceive="(item.if_gain ? '1' : '-1')" :data-id="(item.activity_id)" :data-activity-name="(item.activity_name)" :data-store_id="(item.store_id)">
|
||||
<block v-if="(item.if_gain && item.activity_type === 3)">
|
||||
<label :class="['btn-coupon', item.if_gain ? '' : 'btn-coupon-gray']">{{ __('去购买')}}</label>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<view class="m-nullcontent" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲~什么都没有')}}</text>
|
||||
<text>{{__('没有可领的优惠券~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="msk1" v-if="(!flags)" @click="outertouch">
|
||||
<view class="m-coupon-box" @click.stop="innertouch">
|
||||
<view class="m-coupon-box-top">
|
||||
|
||||
</view>
|
||||
<view class="m-coupon-box-content">
|
||||
|
||||
<view class="m-coupon-box-title">
|
||||
{{__('优惠券领取成功')}}
|
||||
<view class="m-coupon-box-tip">{{__('点击右上角分享给好友')}}</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="m-coupon-box-list">
|
||||
<view class="m-coupon-box-item" v-for="(item, index) in Coupons" :key="index">
|
||||
<label>{{item.activity_rule.voucher_price}}</label>
|
||||
<text>{{item.activity_name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="m-coupon-box-bottom">
|
||||
|
||||
</view>
|
||||
<view class="closeRPK" @click.stop="outertouch">
|
||||
<image lazy-load style="width:50rpx;height:50rpx" src="/static/images/delete.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<share-box-mp :shareDataDefault="shareData" @showCodeImg="showCodeImg" @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
|
||||
<!-- #endif -->
|
||||
<payment-box :paymentDataDefault="paymentData" :order_id="order_id" ref="paymentBox" @onCancel="onCancel" @onPaid="onPaid" @onFail="onFail"></payment-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
import shareBoxMp from '../../components/share-box-mp.vue'
|
||||
import shareBoxApp from '../../components/share-box-app.vue'
|
||||
import shareBoxH5 from '../../components/share-box-h5.vue'
|
||||
import paymentBox from '../../components/payment-box.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shareData: {
|
||||
shareText: '东华汽车，支持原生App、微信小程序，邀请你一起体验！',
|
||||
shareTitle: '东华汽车，支持原生App、微信小程序，邀请你一起体验！',
|
||||
href: "https://www.suteshop.com",
|
||||
image: '',
|
||||
price: '',
|
||||
},
|
||||
tapindex: 0,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
options: {},
|
||||
ispage: false,
|
||||
VoucherList: [],
|
||||
Coupons: [],
|
||||
flag: true,
|
||||
flags: true,
|
||||
Id: 0,
|
||||
Code: "",
|
||||
index: 0,
|
||||
needed_point: 0,
|
||||
store_id: 0,
|
||||
order_id: "",
|
||||
paymentData: {},
|
||||
date: "",
|
||||
stdate: "",
|
||||
eddate: "",
|
||||
time: "",
|
||||
st: "",
|
||||
et: "",
|
||||
activity_type: 0
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
shareBoxMp,
|
||||
shareBoxApp,
|
||||
shareBoxH5,
|
||||
paymentBox
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onBackPress: function() {
|
||||
// #ifdef APP-PLUS
|
||||
if (this.$refs.shareBoxApp.showBoxView) {
|
||||
this.$refs.shareBoxApp.cancel();
|
||||
return true;
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef H5
|
||||
if (this.$refs.shareBoxH5.showBoxView) {
|
||||
this.$refs.shareBoxH5.cancel();
|
||||
return true;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.$refs.shareBoxMp.showBoxView) {
|
||||
this.$refs.shareBoxMp.cancel();
|
||||
return true;
|
||||
}
|
||||
// #endif
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function() {
|
||||
// #ifdef APP-PLUS
|
||||
if (this.$refs.shareBoxApp.showBoxView) {
|
||||
this.$refs.shareBoxApp.cancel();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
if (this.$refs.shareBoxH5.showBoxView) {
|
||||
this.$refs.shareBoxH5.cancel();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.$refs.shareBoxMp.showBoxView) {
|
||||
this.$refs.shareBoxMp.cancel();
|
||||
}
|
||||
// #endif
|
||||
// 离开页面，注销事件
|
||||
var that = this
|
||||
this.notice.removeNotification("RefreshProduct", that);
|
||||
this.notice.removeNotification("GotoPayCheckout", that);
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('领取优惠券')
|
||||
});
|
||||
var that = this;
|
||||
|
||||
var n = new Date,
|
||||
s = new Date((new Date).getTime() + 2 * 24 * 60 * 60 * 1000),
|
||||
r = new Date;
|
||||
var stdate = n.getFullYear() + "-" + (n.getMonth() + 1) + "-" + n.getDate(),
|
||||
sdate = s.getFullYear() + "-" + (s.getMonth() + 1) + "-" + (s.getDate()),
|
||||
eddate = (r.getFullYear() + 1) + "-" + (r.getMonth() + 1) + "-" + r.getDate();
|
||||
|
||||
this.setData({
|
||||
options: options,
|
||||
VoucherList: [],
|
||||
stdate: stdate,
|
||||
date: sdate,
|
||||
eddate: eddate
|
||||
})
|
||||
|
||||
var time = n.getHours() + ':' + n.getMinutes();
|
||||
|
||||
this.setData({
|
||||
time: time,
|
||||
st: time,
|
||||
et: time
|
||||
})
|
||||
|
||||
|
||||
$.isNull(this.userInfo) ? this.getUserInfo(function() {
|
||||
that.getCouponlist()
|
||||
},
|
||||
options.uid) : that.getCouponlist()
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.scrollbottom()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'reloadUserResource']),
|
||||
|
||||
doReceive: function(e) {
|
||||
|
||||
var that = this;
|
||||
if (e.currentTarget.dataset.isreceive == -1) {
|
||||
that.$.navigateTo({
|
||||
url: "/pagesub/index/store?store_id=" + e.currentTarget.dataset.store_id
|
||||
})
|
||||
return;
|
||||
}
|
||||
that.setData({
|
||||
Id: e.currentTarget.dataset.id,
|
||||
needed_point: e.currentTarget.dataset.point,
|
||||
store_id: e.currentTarget.dataset.store_id,
|
||||
});
|
||||
|
||||
that.getUserReceiveCoupon();
|
||||
},
|
||||
doShare: function(e) {
|
||||
const user_id = this.userInfo.user_id;
|
||||
let that = this;
|
||||
var $href = that.$.sprintf('%s/h5/pages/index/index?uid=%d&activity_id=%d', this.Config.WapSiteUrl, user_id, e.currentTarget.dataset.id);
|
||||
|
||||
$href = that.$.sprintf('%s/h5/pages/index/index?uid=%d&activity_id=%d', that.Config.SiteUrl, user_id, e.currentTarget.dataset.id);
|
||||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||||
// #ifdef APP-PLUS
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
$href = that.$.sprintf("%s/pages/index/index?uid=%d&activity_id=%d", that.Config.SiteUrl, user_id, e.currentTarget.dataset.id);
|
||||
// $href = that.$.sprintf("%s/community/community/detail?id=%d", this.Config.SiteUrl, this.story_id);
|
||||
// #endif
|
||||
|
||||
this.setData({
|
||||
shareData: {
|
||||
shareTitle: e.currentTarget.dataset.activityName,
|
||||
shareText: e.currentTarget.dataset.activityName,
|
||||
href: $href,
|
||||
image: '',
|
||||
price: e.currentTarget.dataset.voucher_price,
|
||||
}
|
||||
});
|
||||
|
||||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||||
// #ifdef APP-PLUS
|
||||
that.$.request({
|
||||
url: this.Config.URL.fx.poster,
|
||||
data: {
|
||||
poster_type: 1,
|
||||
path: $href,
|
||||
Path: $href,
|
||||
MainTitle: e.currentTarget.dataset.activityName,
|
||||
MainImg: '',
|
||||
MainPrice: e.currentTarget.dataset.voucher_price
|
||||
},
|
||||
method: "POST",
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.setData({
|
||||
shareData: {
|
||||
shareTitle: '优惠券',
|
||||
shareText: '优惠券',
|
||||
href: $href,
|
||||
image: data.poster_url,
|
||||
price: e.currentTarget.dataset.voucherPrice,
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.$refs.shareBoxApp.show();
|
||||
// #endif
|
||||
|
||||
//海报
|
||||
if (e == 3) {
|
||||
// #ifndef APP-PLUS
|
||||
this.$refs.shareBoxMp.show();
|
||||
// #endif
|
||||
} else {
|
||||
// #ifdef H5
|
||||
if (that.$.ifUniApp()) {
|
||||
this.$refs.shareBoxH5.show();
|
||||
} else {
|
||||
this.$refs.shareBoxMp.show();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.$refs.shareBoxMp.show();
|
||||
// #endif
|
||||
}
|
||||
|
||||
},
|
||||
outertouch: function() {
|
||||
this.setData({
|
||||
flag: true
|
||||
})
|
||||
},
|
||||
innertouch: function() {
|
||||
this.setData({
|
||||
flag: false
|
||||
})
|
||||
},
|
||||
freeget: function() {
|
||||
this.setData({
|
||||
tapindex: 0,
|
||||
VoucherList: [],
|
||||
activity_type: 0,
|
||||
page: 1
|
||||
}), this.getCouponlist()
|
||||
},
|
||||
buyget: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
activity_type: 3,
|
||||
VoucherList: [],
|
||||
page: 1
|
||||
}),
|
||||
this.getCouponlist()
|
||||
},
|
||||
doBuy: function(item_id) {
|
||||
// this.$.gotopage('/pages/product/detail?pid=' + item_id)
|
||||
let that = this;
|
||||
if (that.$.isNull(that.order_id)) {
|
||||
var params = {};
|
||||
params.ifcart = 0; // 传入cart_id时直接购买，未传时走购物车
|
||||
params.cart_id = item_id + "|1";
|
||||
params.payment_type_id = that.StateCode.PAYMENT_TYPE_ONLINE;
|
||||
params.delivery_type_id = 5;
|
||||
params.delivery_time_id = 1;
|
||||
params.invoice_type_id = 1;
|
||||
params.order_invoice_title = "";
|
||||
params.virtual_service_date = that.date;
|
||||
params.virtual_service_time = that.date + ' ' + that.time;
|
||||
params.distributor_id = uni.getStorageSync('store_id');
|
||||
let source_item_id = uni.getStorageSync('source_item_id');
|
||||
params.source_item_id = source_item_id;
|
||||
params.is_voucher = 1;
|
||||
params.is_delivery = 0; //是否自提
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.order_add,
|
||||
data: params,
|
||||
method: "POST",
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
//删除旧数据
|
||||
if (source_item_id) {
|
||||
let source_item_id_row = JSON.parse(source_item_id);
|
||||
for (let store_idx = 0; store_idx < data.items.length; store_idx++) {
|
||||
for (let item_idx = 0; item_idx < data.items[store_idx].items.length; item_idx++) {
|
||||
let order_item_id = data.items[store_idx].items[item_idx].item_id;
|
||||
|
||||
//完成后删除数据吧
|
||||
if (source_item_id) {
|
||||
for (var tk in source_item_id_row) {
|
||||
if (source_item_id_row[tk].u) {
|
||||
if (tk == order_item_id) {
|
||||
delete source_item_id_row[tk];
|
||||
} else {
|
||||
let time = parseInt(Date.parse(new Date()) / 100)
|
||||
//判断是否超时
|
||||
if (time - source_item_id_row[tk].t > 86400 * 30) {
|
||||
delete source_item_id_row[tk];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
delete source_item_id_row[tk];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync('source_item_id', JSON.stringify(source_item_id_row));
|
||||
}
|
||||
|
||||
that.setData({
|
||||
order_id: data.order_id.join(','),
|
||||
});
|
||||
|
||||
if (data.gb_id) {
|
||||
that.isFightGroup = data.gb_id;
|
||||
}
|
||||
|
||||
that.setData({
|
||||
'paymentData': {
|
||||
order_id: that.order_id,
|
||||
orderSelMoneyAmount: data.orderSelMoneyAmount.toFixed(2),
|
||||
user_money: data.user_money,
|
||||
user_points: data.user_points,
|
||||
user_recharge_card: that.userInfo.user_recharge_card,
|
||||
user_sp: that.userInfo.user_sp
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
that.reloadUserResource(function(user_info) {
|
||||
|
||||
});
|
||||
that.gotopay();
|
||||
// 判断如果是虚拟商品
|
||||
} else {
|
||||
if (data && data.hasOwnProperty('mobile_is_bind') || code == 77011) {
|
||||
that.$.confirm(msg,
|
||||
function(data) {
|
||||
if (data.confirm) {
|
||||
//绑定手机操作
|
||||
that.$.gopage("/member/member/bindphone");
|
||||
}
|
||||
},
|
||||
true);
|
||||
} else {
|
||||
that.$.confirm(msg);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
fail: function(data, status, msg, code) {
|
||||
that.$.showToast({
|
||||
title: msg
|
||||
})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
that.gotopay()
|
||||
}
|
||||
},
|
||||
gotopay: function(e) {
|
||||
setTimeout(() => {
|
||||
this.$refs.paymentBox.show();
|
||||
}, 400)
|
||||
|
||||
return true;
|
||||
|
||||
var param = {
|
||||
order_id: this.order_id,
|
||||
openid: this.userInfo.openId,
|
||||
typ: 'json',
|
||||
payment_channel_code: 'wx_native',
|
||||
prepay_flag: 1
|
||||
};
|
||||
|
||||
var that = this;
|
||||
this.isSubmit = true;
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.pay.pay,
|
||||
data: param,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.$.requestPayment({
|
||||
timeStamp: data.timeStamp,
|
||||
nonceStr: data.nonceStr,
|
||||
"package": data.package,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: function(n) {
|
||||
that.isTmplMsg && that.sendMessage(param.order_id, 2);
|
||||
that.returnUrl(param.order_id)
|
||||
},
|
||||
fail: function(n) {
|
||||
that.$.gotopage("/member/order/detail?on=" + param.order_id);
|
||||
that.isTmplMsg && that.sendMessage(param.order_id, 1)
|
||||
},
|
||||
complete: function(n) {
|
||||
if (n.errMsg == "requestPayment:cancel") {
|
||||
that.$.gotopage("/member/order/detail?on=" + param.order_id);
|
||||
|
||||
that.isTmplMsg && that.sendMessage(param.order_id, 1);
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$.alert(msg)
|
||||
}
|
||||
},
|
||||
|
||||
fail: function(err) {}
|
||||
});
|
||||
},
|
||||
onCancel: function(e) {},
|
||||
onPaid: function(e) {
|
||||
//重新加载用户资源数据
|
||||
let that = this;
|
||||
that.reloadUserResource(function(user_info) {
|
||||
that.returnUrl(that.order_id);
|
||||
});
|
||||
},
|
||||
onFail: function(e) {
|
||||
let that = this;
|
||||
that.$.gotopage("/member/order/detail?on=" + this.order_id)
|
||||
},
|
||||
returnUrl: function(e) {
|
||||
var that = this;
|
||||
|
||||
if (that.isFightGroup) {
|
||||
that.$.gotopage("/activity/fightgroup/detail?gb_id=" + that.isFightGroup + "&on=" + e);
|
||||
} else {
|
||||
that.$.gotopage("/member/order/detail?on=" + e);
|
||||
}
|
||||
|
||||
return
|
||||
|
||||
if (!that.$.isNull(that.spinfo)) {
|
||||
var n = JSON.parse(that.spinfo);
|
||||
if (n.isFightGroup == 2) {
|
||||
if (n.isOwner) {
|
||||
that.$.gotopage("/activity/fightgroup/detail?on=" + e);
|
||||
return
|
||||
}
|
||||
that.$.navigateBack(1, function() {
|
||||
this.notice.postNotificationName("RefreshFG")
|
||||
});
|
||||
return
|
||||
}
|
||||
that.$.gotopage("/member/order/detail?on=" + e);
|
||||
return
|
||||
}
|
||||
that.$.gotopage("/member/order/detail?on=" + e);
|
||||
return
|
||||
},
|
||||
getCouponlist: function() {
|
||||
var params = {
|
||||
page: this.page,
|
||||
rows: this.rows,
|
||||
activity_type: this.activity_type,
|
||||
store_id: this.options.store_id
|
||||
},
|
||||
that = this;
|
||||
$.request({
|
||||
url: this.Config.URL.point.voucher,
|
||||
data: params,
|
||||
// ajaxCache: {
|
||||
// timeout: this.Config.CACHE_EXPIRE
|
||||
// },
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
if (data.items.length > 0) {
|
||||
for (let i = 0; data.items.length > i; i++) {
|
||||
data.items[i].activity_endtime = new Date(data.items[i].activity_endtime).toLocaleString().replace(/:\d{1,2}$/, ' ');
|
||||
// this.$.dateFormatter(data.items[i].activity_endtime);
|
||||
}
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
VoucherList: that.VoucherList.concat(data.items),
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
VoucherList: that.VoucherList.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: function(data) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
getUserReceiveCoupon: function() {
|
||||
var point = this.needed_point,
|
||||
that = this;
|
||||
if (point > 0) {
|
||||
$.confirm(that.sprintf(that.__('确定消耗 %d 兑换优惠券?'), point), function(e) {
|
||||
if (e.confirm) {
|
||||
that.addVoucher();
|
||||
}
|
||||
}, true);
|
||||
} else {
|
||||
that.addVoucher();
|
||||
}
|
||||
},
|
||||
addVoucher: function() {
|
||||
var that = this;
|
||||
var params = {
|
||||
activity_id: this.Id,
|
||||
Code: this.Code,
|
||||
user_is_new: 0
|
||||
};
|
||||
$.request({
|
||||
url: this.Config.URL.user.voucher_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.$.confirm(that.__("领取成功!去消费"), function(a) {
|
||||
if (a.confirm) {
|
||||
that.$.navigateTo({
|
||||
url: "/pagesub/index/store?store_id=" + that.store_id
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// that.getCouponlist()
|
||||
} else {
|
||||
// $.alert(msg);
|
||||
that.$.confirm(that.__(msg));
|
||||
// that.$.confirm(that.__("已经领取!去消费"),function(a) {
|
||||
// if (a.confirm)
|
||||
// {
|
||||
// that.$.navigateTo({
|
||||
// url: "/pagesub/index/store?store_id=" + that.store_id
|
||||
// })
|
||||
// }
|
||||
|
||||
// });
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
onShareAppMessage: function() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
// #endif
|
||||
|
||||
return {
|
||||
title: this.shopInfo.store_name,
|
||||
desc: this.shopInfo.VendorInfo,
|
||||
path: "/activity/coupon/list?uid=" + this.userInfo.user_id
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享朋友圈
|
||||
*/
|
||||
onShareTimeline: function() {
|
||||
return {
|
||||
title: this.shopInfo.store_name,
|
||||
query: {
|
||||
uid: this.userInfo.user_id
|
||||
}
|
||||
}
|
||||
},
|
||||
receivenowWeixin: function(e) {
|
||||
// //console.log("领取卡券：", e.currentTarget.dataset.cardid);
|
||||
var that = this,
|
||||
params = {
|
||||
activity_id: e.currentTarget.dataset.cardid,
|
||||
openid: this.userInfo.openId
|
||||
};
|
||||
// 微信卡券
|
||||
/*$.xsr($.makeUrl(userapi.receiveWeixinCoupons, n), function (n) {
|
||||
//console.log("领取成功1", n), $.addCard({
|
||||
cardList: [{
|
||||
cardId: n.Info.cardId,
|
||||
cardExt: '{"openId": "' + this.userInfo.openId + '", "timestamp": "' + n.Info.timestamp + '", "signature":"' + n.Info.signature + '","nonce_str":"' + n.Info.nonce_str + '",}'
|
||||
}], success: function (r) {
|
||||
//console.log("领取成功", r);
|
||||
var i = {code: r.cardList[0].code, access_token: n.Info.access_token};
|
||||
$.xsr($.makeUrl(userapi.codeDecode, i), function (n) {
|
||||
//console.log("解码成功：", $.parseJSON(n.Info));
|
||||
var r = $.parseJSON(n.Info);
|
||||
that.setData({Code: r.code, Id: e.currentTarget.dataset.id}), that.getUserReceiveCoupon()
|
||||
})
|
||||
},
|
||||
fail: function (e) {
|
||||
//console.log("领取失败", e)
|
||||
},
|
||||
complete: function (e) {
|
||||
//console.log("领取成功或者失败", e)
|
||||
}
|
||||
})
|
||||
})*/
|
||||
},
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var e = this;
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
e.setData({
|
||||
page: parseInt(e.page) + 1
|
||||
}), e.getCouponlist()
|
||||
},
|
||||
500)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid $default-skin-bg;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-scrollBox {
|
||||
padding: 96rpx 10rpx 0rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 58rpx;
|
||||
}
|
||||
|
||||
.m-coupon-list {
|
||||
margin-top: 36rpx
|
||||
}
|
||||
|
||||
.m-coupon-item {
|
||||
width: 700rpx;
|
||||
height: 192rpx;
|
||||
margin: 10rpx auto;
|
||||
background: url(https://static.lancerdt.com/xcxfile/appicon/Coupon_V2.png) no-repeat;
|
||||
background-size: contain;
|
||||
box-sizing: border-box;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
.m-coupon-item.off {
|
||||
background: url(https://static.lancerdt.com/xcxfile/appicon/Coupon_off.png) no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.m-coupon-info {
|
||||
float: left;
|
||||
width: 485rpx;
|
||||
margin-left: 30rpx;
|
||||
margin-top: 9.5rpx;
|
||||
}
|
||||
|
||||
.m-coupon-btn {
|
||||
float: left;
|
||||
width: 110rpx;
|
||||
margin-left: 30rpx;
|
||||
line-height: 35rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-coupon {
|
||||
display: inline-block;
|
||||
width: 28rpx;
|
||||
}
|
||||
|
||||
.btn-coupon-gray {
|
||||
color: #389b33;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.m-coupon-text {
|
||||
float: left;
|
||||
width: 300rpx;
|
||||
}
|
||||
|
||||
.m-coupon-text label {
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
width: 350rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.m-coupon-text text {
|
||||
display: inline-block;
|
||||
width: 350rpx;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.m-coupon-price {
|
||||
float: left;
|
||||
height: 132rpx;
|
||||
color: $default-skin-bg;
|
||||
font-weight: bold;
|
||||
line-height: 132rpx;
|
||||
width: 180rpx;
|
||||
position: relative;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.price-content-box {
|
||||
position: absolute;
|
||||
left: -35rpx;
|
||||
text-align: center;
|
||||
width: 220rpx;
|
||||
}
|
||||
|
||||
.price-content-box label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.closeRPK {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -30rpx;
|
||||
bottom: -80rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
247
activity/coupon/member.vue
Normal file
247
activity/coupon/member.vue
Normal file
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view class="m-scrollBox" scroll-y="true">
|
||||
<block v-if="(UserCoupon.length>0)">
|
||||
<view class="m-coupon-item" @click="changecoupon" :data-id="(item.user_voucher_id)" :data-item_id="(item.item_id)" v-for="(item, index) in UserCoupon" :key="index">
|
||||
<image lazy-load :src="((item.voucher_state_id==1501 && item.voucher_subtotal<=amount)?'https://static.lancerdt.com/xcxfile/appicon/images/coupon_red.png':'https://static.lancerdt.com/xcxfile/appicon/images/coupon_gray.png')" class="item-bg"></image>
|
||||
|
||||
<view class="coupon-item-left">
|
||||
<view class="item-left-top">{{__('￥')}}<label style="font-size:64rpx">{{item.voucher_price}}</label></view>
|
||||
<view class="item-left-bottom">{{sprintf(__('满(%s)可用'), item.voucher_subtotal)}}</view>
|
||||
</view>
|
||||
<view class="coupon-item-right">
|
||||
<view class="item-title item-title-black">{{item.activity_name}}</view>
|
||||
<view class="item-middle">{{sprintf(__('满 %s 减 %s'), item.voucher_subtotal, item.voucher_price)}}</view>
|
||||
<view class="item-middle">
|
||||
<label class="item-time">{{item.voucher_start_date}}~{{item.voucher_end_date}}</label>
|
||||
</view>
|
||||
|
||||
<view class="item-desc"></view>
|
||||
</view>
|
||||
<image lazy-load src="/static/images/checked.png" class="image-checked" v-if="(item.user_voucher_id == id_checked)" />
|
||||
</view>
|
||||
|
||||
<button class="u-btn u-btn-default" style="margin-top:30rpx;" @click="uesnothing">{{__('不使用优惠券')}}</button>
|
||||
</block>
|
||||
<view class="m-nullcontent" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲~什么都没有')}}</text>
|
||||
<text>{{__('赶快去领券中心吧')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
CartSelect: [],
|
||||
amount: 0,
|
||||
UserCoupon: [],
|
||||
id_checked: 0,
|
||||
IsUseCoupon: 1
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('使用优惠券')
|
||||
});
|
||||
|
||||
var voucher_items = $.parseJSON(options.val);
|
||||
this.setData({
|
||||
UserCoupon: voucher_items,
|
||||
id_checked: options.user_voucher_id,
|
||||
amount: options.amount,
|
||||
options: options,
|
||||
})
|
||||
|
||||
if (options.ifcart) {
|
||||
this.getselect()
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
getselect: function() {
|
||||
var that = this;
|
||||
var params = {};
|
||||
that.$.request({
|
||||
url: this.Config.URL.cart.getselect,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
var isSelect = false;
|
||||
if (status == 200) {
|
||||
if (data['items'].length > 0) {
|
||||
that.setData({
|
||||
CartSelect: data['items']
|
||||
})
|
||||
}
|
||||
} else {
|
||||
//that.$.confirm(msg);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
changecoupon: function(e) {
|
||||
var that = this;
|
||||
var item_id = parseInt(e.currentTarget.dataset.item_id);
|
||||
|
||||
this.setData({
|
||||
IsUseCoupon: 0,
|
||||
id_checked: parseInt(e.currentTarget.dataset.id)
|
||||
});
|
||||
|
||||
that.goback();
|
||||
},
|
||||
uesnothing: function() {
|
||||
var that = this;
|
||||
|
||||
this.setData({
|
||||
IsUseCoupon: 0,
|
||||
id_checked: 0
|
||||
});
|
||||
|
||||
this.goback();
|
||||
},
|
||||
goback: function() {
|
||||
var that = this;
|
||||
$.navigateBack(1, function() {
|
||||
var params = that.options;
|
||||
|
||||
params.user_voucher_id = that.id_checked;
|
||||
that.notice.postNotificationName("RefreshCoupon", params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-scrollBox {
|
||||
padding: 10rpx 10rpx 0rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m-coupon-item {
|
||||
margin: 10rpx 10rpx 20rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
}
|
||||
|
||||
.m-coupon-item .item-bg {
|
||||
width: 710rpx;
|
||||
height: 190rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.coupon-item-left {
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 250rpx;
|
||||
padding: 25rpx 0rpx;
|
||||
}
|
||||
|
||||
.item-left-top {
|
||||
line-height: 100rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-left-top label {
|
||||
font-size: 90rpx;
|
||||
}
|
||||
|
||||
.item-left-bottom {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-item-right {
|
||||
position: absolute;
|
||||
left: 250rpx;
|
||||
top: 0;
|
||||
width: 420rpx;
|
||||
height: 170rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
font-size: 22rpx;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.item-title-black {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-middle {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.item-usenow {
|
||||
font-size: 24rpx;
|
||||
border: 1px solid $default-skin-bg;
|
||||
float: right;
|
||||
color: $default-skin-bg;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 15rpx;
|
||||
position: relative;
|
||||
top: -8rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 5rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.image-checked {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 0;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
1259
activity/cutprice/detail.vue
Normal file
1259
activity/cutprice/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
436
activity/cutprice/list.vue
Normal file
436
activity/cutprice/list.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="m-product-all">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="groupLists">
|
||||
{{__('立即砍价')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==2?'m-navbar-item-on':'')" @click="toBeGroupLists">
|
||||
{{__('即将砍价')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="(tapindex==1?'':'hide')" style="font-size:28rpx;">
|
||||
<scroll-view scroll-y="true" v-if="(pdlist.length>0)" class="m-orderlist" @scrolltolower="scrollbottom" style="width:100%;height:100%;position:absolute;padding-top:80rpx;box-sizing: border-box;">
|
||||
<block v-for="(item, i) in pdlist" :key="i">
|
||||
<navigator :url="'/activity/cutprice/detail?mid=' + item.activity_id + '&pid=' + item.item_id" class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name" style="height: 116rpx;">
|
||||
<label><text class='u-tuan-label'>{{__('砍')}}</text>{{item.activity_rule.product_item_name}}</label>
|
||||
<view class="groupNumber">
|
||||
<day-countdown :timer="(item.activity_endtime)" :Type="1"></day-countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price" style='font-size:38rpx'><label style='color:#888888;margin-right:10rpx;'>{{__('底价')}}</label><label>{{__('￥')}}</label>{{item.activity_rule.cut_down_min_limit_price}}
|
||||
<label class="u-del-price" style='margin-left:8rpx'>{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
||||
<button class="u-btn u-btn-default">{{__('立即砍价')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，砍价商品正在备货中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :class="(tapindex==2?'':'hide')" style="font-size:28rpx">
|
||||
<scroll-view scroll-y="true" v-if="(fglist.length>0)" class="m-orderlist" @scrolltolower="scrollbottomtwo" style="width:100%;height:100%;position:absolute;padding-top:66rpx;box-sizing: border-box;">
|
||||
<block v-for="(item , i) in fglist" :key="i">
|
||||
<view class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name" style="height: 116rpx;">
|
||||
<label><text class='u-tuan-label'>{{__('砍')}}</text>{{item.activity_rule.product_item_name}}</label>
|
||||
<view class="groupNumber">
|
||||
<day-countdown :timer="(item.activity_starttime)" :Type="0"></day-countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price">
|
||||
<label style='color:#888888;margin-right:10rpx;'>{{__('底价')}}</label><label>{{__('￥')}}</label>{{item.activity_rule.cut_down_min_limit_price}}
|
||||
<label class="u-del-price">{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
||||
<button class="u-btn u-btn-default" style='background:#bdbdbd'>{{__('立即砍价')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage1)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，砍价商品正在备货中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
viewtype: 0,
|
||||
pdlist: [],
|
||||
fglist: [],
|
||||
flag: true,
|
||||
ispage: true,
|
||||
scposition: "",
|
||||
page: 1,
|
||||
istop: false,
|
||||
ispage1: false,
|
||||
isdata: false,
|
||||
tapindex: 1,
|
||||
activity_state: 1,
|
||||
|
||||
rows: 0,
|
||||
orderlist: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('砍价活动')
|
||||
});
|
||||
|
||||
this.InitData()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
InitData: function() {
|
||||
var that = this;
|
||||
that.setData({
|
||||
pdlist: []
|
||||
});
|
||||
var params = {
|
||||
//store_id : this.shopInfo.store_id,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_CUTPRICE,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
})
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
groupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_NORMAL
|
||||
}), this.InitData()
|
||||
},
|
||||
toBeGroupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 2,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
fglist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_WAITING
|
||||
}), this.InitPaging()
|
||||
},
|
||||
//saas,调用当前参与的团
|
||||
InitPaging: function() {
|
||||
|
||||
var params = {
|
||||
//store_id : this.shopInfo.store_id,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_CUTPRICE,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
var that = this;
|
||||
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
})
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: true,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
isdata: true,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
viewType: function(e) {
|
||||
this.viewtype == 0 ? this.setData({
|
||||
viewtype: 1
|
||||
}) : this.setData({
|
||||
viewtype: 0
|
||||
})
|
||||
},
|
||||
scrollbottom: function(e) {
|
||||
var that = this;
|
||||
if (this.flag) {
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(n);
|
||||
var n = setTimeout(function() {
|
||||
that.setData({
|
||||
page: parseInt(that.page) + 1
|
||||
});
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_NORMAL) {
|
||||
this.InitData();
|
||||
}
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_WAITING) {
|
||||
this.InitPaging();
|
||||
}
|
||||
},
|
||||
500);
|
||||
}
|
||||
},
|
||||
returnTop: function() {
|
||||
this.setData({
|
||||
scposition: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
/*全部商品 start*/
|
||||
.groupNumber {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 24rpx;
|
||||
color: #db384c;
|
||||
background: #fbebeb;
|
||||
text-align: center;
|
||||
padding: 0 10rpx
|
||||
}
|
||||
|
||||
.groupNumber .icon-icon {
|
||||
font-size: 24rpx;
|
||||
display: inline
|
||||
}
|
||||
|
||||
.groupNumber text {
|
||||
color: #ffc001;
|
||||
margin: 0 2rpx
|
||||
}
|
||||
|
||||
.progressBarBox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.u-progressBar {
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 20rpx;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-progressBar-cont {
|
||||
height: 20rpx;
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
.m-product-price .u-btn {
|
||||
padding: 0;
|
||||
margin: 0 20rpx;
|
||||
width: 160rpx;
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.m-product-GP {
|
||||
height: 232rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-img {
|
||||
height: 223rpx;
|
||||
width: 223rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-price {
|
||||
line-height: 80rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-info {
|
||||
height: 232rpx;
|
||||
width: 518rpx;
|
||||
}
|
||||
|
||||
.u-del-price {
|
||||
color: #888888;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/*全部商品 end*/
|
||||
/*顶部提示*/
|
||||
.u-toptip {
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.u-toptip .u-loadmore {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
/*顶部提示*/
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: #DB384C;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid #DB384C;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
353
activity/cutprice/userlist.vue
Normal file
353
activity/cutprice/userlist.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="m-product-all">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="['m-navbar-item', tapindex==1?'m-navbar-item-on':'']" @click="allOrders">
|
||||
{{__('我发起的')}}
|
||||
</view>
|
||||
<view :class="['m-navbar-item', tapindex==2?'m-navbar-item-on':'']" @click="toBePaid">
|
||||
{{__('我参与的')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loadComplete">
|
||||
<scroll-view v-if="(orderlist.length>0)" scroll-y="true" class="m-orderlist" @scrolltolower="scrollbottom">
|
||||
<view v-for="(items, index) in orderlist" :key="index" v-if="items.activity_rule !== undefined" class="m-panel m-panel-access">
|
||||
<!-- <view class="m-panel-hd">订单编号：(items.order_id)
|
||||
<label v-if="(items.IsCancel)">拼团失败</label>
|
||||
<label v-if="(items.IsSuccess)">拼团成功</label>
|
||||
<label v-if="(!items.IsSuccess && !items.IsCancel)">拼团中</label>
|
||||
</view> -->
|
||||
<view class="m-product-list">
|
||||
<navigator :url="'/activity/cutprice/detail?mid=' + (items.activity_id) + '&pid=' + (items.activity_rule.item_id) + '&sid=' + (items.buyer_user_id) + '&ac_id=' + (items.ac_id)" class="m-product-item">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(items.activity_rule.product_image)" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name" style="height:90rpx">
|
||||
<label>{{items.activity_rule.product_item_name}}</label>
|
||||
</view>
|
||||
|
||||
<view class="progressBarBox">
|
||||
<view class="u-progressBar">
|
||||
<view class="u-progressBar-cont" :style="'width:' + (100*(items.activity_rule.item_unit_price - items.ac_sale_price) / (items.activity_rule.item_unit_price - items.activity_rule.cut_down_min_limit_price)) + '%'"></view>
|
||||
</view>
|
||||
<view class="m-product-name" v-if="items.end==1"><label style="color:#ff0000;font-weight: bold;">该活动已过期</label></view>
|
||||
</view>
|
||||
<!-- <view class="progress-bar">
|
||||
<view class="left" style="width:(100*items.CutPricePercent)%"></view>
|
||||
</view> -->
|
||||
|
||||
<view class="m-product-price" style="display:flex;margin-top:16rpx;font-size:24rpx;justify-content: space-between;padding-right:36rpx">
|
||||
<view><label style="color:#717171">{{__('原价')}}</label> {{__('￥')}}{{items.activity_rule.item_unit_price}}</view>
|
||||
<view><label style="color:#717171">{{__('现价')}}</label> {{__('￥')}}{{items.ac_sale_price}}</view>
|
||||
<view style="color:#717171">{{Number(items.activity_rule.item_unit_price - items.ac_sale_price).toFixed(2) == 0.00 ? '':Number(items.activity_rule.item_unit_price - items.ac_sale_price).toFixed(2) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<navigator url="/activity/cutprice/list" redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<label style="font-size:32rpx;">{{__('亲~您还没有砍价哦，')}}</label><label class="highlight-link">{{__('快去看看吧')}}</label>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
flag: true,
|
||||
ispage: false,
|
||||
userType: 1,
|
||||
orderlist: [],
|
||||
width: 100,
|
||||
sponsorId: 0,
|
||||
participantId: 0,
|
||||
loadComplete: false // 没有加载数据前不显示的对应内容
|
||||
};
|
||||
},
|
||||
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: async function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title:this.__('我的砍价')
|
||||
});
|
||||
|
||||
await this.$onLaunched;
|
||||
|
||||
this.setData({
|
||||
sponsorId: this.userInfo.user_id,
|
||||
participantId: 0
|
||||
}), this.GetUserCutPriceActivityList()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
allOrders: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
sponsorId: this.userInfo.user_id,
|
||||
participantId: 0,
|
||||
loadComplete: false
|
||||
}), this.GetUserCutPriceActivityList()
|
||||
},
|
||||
|
||||
toBePaid: function() {
|
||||
this.setData({
|
||||
tapindex: 2,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
sponsorId: 0,
|
||||
participantId: this.userInfo.user_id,
|
||||
loadComplete: false
|
||||
}), this.GetUserCutPriceActivityList()
|
||||
},
|
||||
|
||||
GetUserCutPriceActivityList: function() {
|
||||
var that = this;
|
||||
|
||||
var params = {
|
||||
store_id: this.shopInfo.store_id,
|
||||
is_sponsor: this.sponsorId ? 1 : 0,
|
||||
page: this.page,
|
||||
rows: this.rows
|
||||
};
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsUserCutPriceHistory,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
orderlist: that.orderlist.concat(data.items)
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
ispage: true,
|
||||
flag: true,
|
||||
orderlist: that.orderlist.concat(data.items)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
}
|
||||
that.setData({
|
||||
loadComplete: true
|
||||
})
|
||||
},
|
||||
fail: function(data) {
|
||||
that.setData({
|
||||
loadComplete: true
|
||||
});
|
||||
that.$.alert("网络异常请重试！");
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var e = this;
|
||||
e.setData({
|
||||
flag: false,
|
||||
ispage: true
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
e.setData({
|
||||
page: e.page + 1
|
||||
}), e.GetUserCutPriceActivityList()
|
||||
},
|
||||
500)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid $default-skin-bg;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-panel-hd label {
|
||||
float: right;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-total-info {
|
||||
text-align: right;
|
||||
padding: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-total-info label {
|
||||
font-size: 32rpx;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-total-btn {
|
||||
text-align: right;
|
||||
padding: 20rpx 20rpx 30rpx 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m-total-btn::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top: 1px solid #ebebe7;
|
||||
color: #ebebe7;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.m-total-btn .u-link-btn {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.m-sort {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.m-sort image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
|
||||
.m-product-price text {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m-orderlist {
|
||||
padding-top: 70rpx;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progressBarBox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 38%;
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.u-progressBar {
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 20rpx;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-progressBar-cont {
|
||||
height: 20rpx;
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 500rpx;
|
||||
height: 26rpx;
|
||||
border: 5rpx solid rgb(89, 10, 35);
|
||||
background: rgb(89, 10, 35);
|
||||
border-radius: 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left {
|
||||
border-radius: 40rpx;
|
||||
background: rgb(255, 231, 0);
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
861
activity/fightgroup/detail.vue
Normal file
861
activity/fightgroup/detail.vue
Normal file
@ -0,0 +1,861 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view scroll-y="true" @scrolltolower="fightPage" style="position: absolute;height:100%;width:100%;">
|
||||
<view class="m-product-list">
|
||||
<navigator :url="'/pages/product/detail?pid=' + (GbInfo.activity_rule.item_id) + '&gb_id=' + (GbInfo.gb_id)" class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(GbInfo.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name">
|
||||
<label>{{GbInfo.activity_rule.item.product_item_name}}</label>
|
||||
<view class='groupNumber' style='margin-top:18rpx'>{{__('拼团省')}} {{__('￥')}}{{number_format(parseFloat((GbInfo.activity_rule.item_unit_price - GbInfo.activity_rule.group_sale_price).toFixed(12)), 2)}}</view>
|
||||
</view>
|
||||
<view style='position:absolute;bottom:20rpx;'>
|
||||
<view class="groupNumber" style='margin-bottom:12rpx'>
|
||||
<!-- <label class="iconfont icon-icon"></label> -->
|
||||
<text style="margin-right: 6rpx;">{{GbInfo.gb_quantity}}</text> {{__('人团')}}
|
||||
</view>
|
||||
<view class="m-product-price">
|
||||
<label>{{__('￥')}}</label>{{number_format(GbInfo.activity_rule.group_sale_price, 2)}}
|
||||
<label class="u-del-price" style="margin-left: 6rpx;">{{__('￥')}}{{number_format(GbInfo.activity_rule.item_unit_price, 2)}}</label>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="isSucces">
|
||||
<image lazy-load class='simg' v-if="(1==GbInfo.gb_enable)" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/success.png'></image>
|
||||
<image lazy-load class='simg' v-if="(0==GbInfo.gb_enable)" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/failure.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
<view class="headPhoto">
|
||||
<view class="personPhoto" v-for="(item, i) in GroupUsers" :key="i">
|
||||
<image lazy-load class="photo" :src="(item.user_avatar)"></image>
|
||||
<image lazy-load class="photo-icon" src="https://static.lancerdt.com/xcxfile/appicon/groupbooking/group_leader.png" v-if="(GbInfo.user_id == item.user_id)"></image>
|
||||
</view>
|
||||
<view class="personPhoto" v-if="(GbInfo.gb_quantity>8?(8-GbInfo.gb_amount_quantity):(GbInfo.gb_quantity-GbInfo.gb_amount_quantity))">
|
||||
<image lazy-load class="photo-bg" src='https://static.lancerdt.com/xcxfile/appicon/groupbooking/waiting.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="surplus" v-if="(GbInfo.gb_enable==2 && show)">
|
||||
<view>{{sprintf(__('仅剩 %s 名额，'), GbInfo.gb_quantity-GbInfo.gb_amount_quantity)}}</view>
|
||||
<label style='min-width:160rpx;'>
|
||||
<day-countdown :timer="(GbInfo.gb_endtime)" :Type="2"></day-countdown>
|
||||
</label>
|
||||
<label>{{__('后结束')}}</label>
|
||||
</view>
|
||||
<block v-if="(show)">
|
||||
<view class="m-btn-box" v-if="(GbInfo.gb_enable==2 && !groupIsEnd)">
|
||||
<view class="u-btn u-btn-default" @click="shareBox">{{__('邀请好友参团')}}</view>
|
||||
</view>
|
||||
<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(GbInfo.gb_enable==0)">
|
||||
<view class="u-btn u-btn-default">{{__('点击再开一团')}}</view>
|
||||
</navigator>
|
||||
<navigator url="/activity/fightgroup/list" class="m-btn-box" v-if="(GbInfo.gb_enable==1)">
|
||||
<view class="u-btn u-btn-default">{{__('点击再开一团')}}</view>
|
||||
</navigator>
|
||||
<view class="m-btn-box" v-if="(GbInfo.gb_enable==2 && !ispaysuccess)">
|
||||
<view class="u-btn u-btn-default" @click="immediatelyOffered">{{__('参与活动')}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='rule'>
|
||||
<view class='rule-header'>
|
||||
{{__('拼团规则')}}
|
||||
</view>
|
||||
<view class='rule-content'>
|
||||
{{GbInfo.activity_rule.activity_intro}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="link">
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="nav">
|
||||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/index.png"></image>
|
||||
<text>{{__('首页逛逛')}}</text>
|
||||
</navigator>
|
||||
<navigator url="/pages/category/category" open-type="switchTab" class="nav">
|
||||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/allproduct.png"></image>
|
||||
<text>{{__('全部商品')}}</text>
|
||||
</navigator>
|
||||
<navigator url="/activity/coupon/list" class="nav">
|
||||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/coupon.png"></image>
|
||||
<text>{{__('领券中心')}}</text>
|
||||
</navigator>
|
||||
<navigator url="/pages/index/member" open-type="switchTab" class="nav">
|
||||
<image lazy-load class="nav-img" src="https://static.lancerdt.com/xcxfile/appicon/images/center.png"></image>
|
||||
<text>{{__('个人中心')}}</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<share-box-h5 :shareDataDefault="shareData" ref="shareBoxH5"></share-box-h5>
|
||||
<!-- #endif -->
|
||||
<share-box-mp :shareDataDefault="shareData" @cancelShare="cancelShare" @showCodeImg="showCodeImg" @shareQRCode="shareQRCode" @saveImg="saveImg" ref="shareBoxMp"></share-box-mp>
|
||||
<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
import shareBoxMp from '../../components/share-box-mp.vue'
|
||||
import shareBoxApp from '../../components/share-box-app.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
options: {},
|
||||
Photo: "",
|
||||
UserName: "",
|
||||
splistStr: [],
|
||||
ispaysuccess: false,
|
||||
IsOwner: false,
|
||||
order_id: "",
|
||||
isfg: false,
|
||||
GbInfo: {
|
||||
activity_rule: {}
|
||||
},
|
||||
GroupUsers: [],
|
||||
isPage: true,
|
||||
page: 1,
|
||||
Coupons: [],
|
||||
isCancelSuccess: true,
|
||||
isCancel: true,
|
||||
CouponAmount: 0,
|
||||
user_is_new: 0,
|
||||
userInfoId: 0,
|
||||
show: true,
|
||||
groupIsEnd: false,
|
||||
|
||||
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
},
|
||||
shareData: {
|
||||
shareText: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||||
shareTitle: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||||
href: "https://www.suteshop.com",
|
||||
image: ''
|
||||
},
|
||||
|
||||
shareText: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||||
shareTitle: '澜驰商城系统，支持原生App、微信小程序，邀请你一起体验！',
|
||||
href: "https://www.suteshop.com",
|
||||
image: ''
|
||||
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
components: {
|
||||
dayCountdown,
|
||||
shareBoxMp,
|
||||
shareBoxApp
|
||||
},
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('拼团详情')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
options: options
|
||||
})
|
||||
|
||||
this.forceUserInfo(function(user) {
|
||||
that.setData({
|
||||
user_is_new: that.userInfo.user_is_new,
|
||||
CouponAmount: that.userInfo.CouponAmount
|
||||
});
|
||||
|
||||
that.InitData(options);
|
||||
});
|
||||
|
||||
this.notice.addNotification("RefreshFG", that.RefreshFG, that)
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
if (this.$refs.shareBoxApp.showBoxView) {
|
||||
this.$refs.shareBoxApp.cancel();
|
||||
return true;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.$refs.shareBoxMp.showBoxView) {
|
||||
this.$refs.shareBoxMp.cancel();
|
||||
return true;
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onUnload() {
|
||||
// 离开页面，注销事件
|
||||
var that = this
|
||||
this.notice.removeNotification("RefreshFG", that);
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
if (this.$refs.shareBoxApp.showBoxView) {
|
||||
this.$refs.shareBoxApp.cancel();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.$refs.shareBoxMp.showBoxView) {
|
||||
this.$refs.shareBoxMp.cancel();
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onShareAppMessage: function() {
|
||||
var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
|
||||
t = e > 0 ? this.$.sprintf(this.__("【还差 %d 人】 %s 邀请您参加拼团！立省 %.2f 元！"), (this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity), this.userInfo.user_nickname, (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2)) : this.$.sprintf(this.__("%s 拼团成功！他已节省 %.2f 元！赶快来拼团吧!"), this.userInfo.user_nickname, (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2));
|
||||
return {
|
||||
title: t,
|
||||
desc: this.GbInfo.activity_rule.product_item_name,
|
||||
path: "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id +
|
||||
"&uid=" + this.userInfo.user_id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
InitData: function(options) {
|
||||
var that = this;
|
||||
that.setData({
|
||||
Photo: that.userInfo.user_avatar,
|
||||
UserName: that.userInfo.user_nickname,
|
||||
isfg: options.isfg || false
|
||||
});
|
||||
|
||||
var params = {
|
||||
gb_id: options.gb_id || "",
|
||||
order_id: options.on || ""
|
||||
};
|
||||
|
||||
//todo 详情
|
||||
$.request({
|
||||
url: this.Config.URL.user.getUserGroupbooking,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
data.gbh_rows.forEach(function(e) {
|
||||
e.user_id == that.userInfo.user_id && (that.setData({
|
||||
userInfoId: e.user_id
|
||||
}));
|
||||
|
||||
//判断是否团长
|
||||
if (e.user_id == that.userInfo.user_id) {
|
||||
e.user_id == that.userInfo.user_id && that.setData({
|
||||
ispaysuccess: e.gbh_flag,
|
||||
IsOwner: e.user_id == data.user_id,
|
||||
order_id: e.order_id
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
var $now = (new Date).getTime();
|
||||
var $end = (new Date(data.gb_endtime.replace(/-/g, "/"))).getTime();
|
||||
var $activityEnd = (new Date(data.activity_rule.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.endTime = $end - $now;
|
||||
if (data.endTime <= 0) {
|
||||
that.setData({
|
||||
groupIsEnd: true,
|
||||
show: false
|
||||
});
|
||||
}
|
||||
if ($activityEnd - $now <= 0) {
|
||||
that.setData({
|
||||
show: false,
|
||||
});
|
||||
}
|
||||
that.setData({
|
||||
GbInfo: data,
|
||||
GroupUsers: data.gbh_rows,
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
RefreshFG: function() {
|
||||
var that = this,
|
||||
t = {
|
||||
gb_id: that.GbInfo.gb_id
|
||||
};
|
||||
that.InitData(t)
|
||||
},
|
||||
|
||||
immediatelyOffered: function() {
|
||||
var that = this;
|
||||
/*
|
||||
var param = {
|
||||
Amount: 1,
|
||||
ProductId: this.proId,
|
||||
orderType: 1,
|
||||
activity_id: this.MEID,
|
||||
isOwner: "true",
|
||||
isFightGroup: "2",
|
||||
item_id: this.skuid,
|
||||
AddTime: getNowFormatDate(),
|
||||
ownGroupId: 0,
|
||||
ProductSaleName: this.pname,
|
||||
|
||||
speStr: JSON.stringify(this.splistStr).replace("[", "").replace("]", "").replace(/\,/g, " ").replace(/\"/g, "")
|
||||
};*/
|
||||
$.navigateTo({
|
||||
url: "/pages/checkout/checkout?ifcart=0&cart_id=" + this.GbInfo.activity_rule.item_id + "|" + 1 + "&activity_id=" +
|
||||
this.GbInfo.activity_id + "&gb_id=" + this.GbInfo.gb_id
|
||||
})
|
||||
},
|
||||
|
||||
doReceive: function() {
|
||||
this.cancel(), this.userReceiveCoupon()
|
||||
},
|
||||
cancel: function() {
|
||||
this.setData({
|
||||
isCancel: false
|
||||
})
|
||||
},
|
||||
cancelsuccess: function() {
|
||||
this.setData({
|
||||
isCancelSuccess: true
|
||||
})
|
||||
},
|
||||
innertouch: function() {},
|
||||
userReceiveCoupon: function() {
|
||||
var e = {
|
||||
|
||||
CouponIds: "",
|
||||
|
||||
user_is_new: this.user_is_new
|
||||
};
|
||||
//console.log(e);
|
||||
var t = this;
|
||||
$.xsr($.makeUrl(userapi.UserReceiveCoupon, e), function(e) {
|
||||
e.Code == 0 ? t.setData({
|
||||
isCancelSuccess: false,
|
||||
Coupons: e.Info
|
||||
}) : $.alert(e.Msg)
|
||||
})
|
||||
},
|
||||
fightPage: function(e) {
|
||||
if (this.isPage) {
|
||||
this.setData({
|
||||
isPage: false
|
||||
});
|
||||
var t = this;
|
||||
clearTimeout(n);
|
||||
var n = setTimeout(function() {
|
||||
var e = {
|
||||
gb_id: t.GbInfo.gb_id,
|
||||
EventId: t.GbInfo.MarketingEventId,
|
||||
page: parseInt(t.page) + 1
|
||||
};
|
||||
/*$.xsr($.makeUrl(fgapi.GetGroupMarketingEventUsersByPage, e), function (n) {
|
||||
if (n.Info.length > 0)
|
||||
{
|
||||
var r = t.GbInfo;
|
||||
r.gbh_rows = r.gbh_rows.concat(n.Info), t.setData({
|
||||
isPage: true,
|
||||
page: e.page,
|
||||
GbInfo: r
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
t.setData({isPage: false})
|
||||
}
|
||||
})*/
|
||||
},
|
||||
500)
|
||||
}
|
||||
},
|
||||
shareQRCode: function(e) {
|
||||
return;
|
||||
var that = this,
|
||||
params = {
|
||||
|
||||
Path: "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id +
|
||||
"&uid=" + this.userInfo.user_id,
|
||||
MainImg: this.GbInfo.ProductPic,
|
||||
MainTitle: this.GbInfo.activity_rule.product_item_name,
|
||||
item_id: this.GbInfo.activity_rule.item_id,
|
||||
MarketingEventId: this.GbInfo.MarketingEventId,
|
||||
ItemSalePrice: this.GbInfo.activity_rule.group_sale_price,
|
||||
OriginalPrice: this.GbInfo.activity_rule.item_unit_price,
|
||||
GroupPersonAmout: this.GbInfo.gb_quantity,
|
||||
CutPrice: "",
|
||||
user_id: this.userInfoId,
|
||||
MarketingEventTime: this.GbInfo.EndTimeStr
|
||||
};
|
||||
|
||||
|
||||
//生成二维码并返回地址。 - 需要修改调整为小程序地址
|
||||
$.request({
|
||||
url: this.Config.URL.wx.getMiniAppQRCodeUnlimit,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: data.url,
|
||||
IsShare: true,
|
||||
IsShareBox: false,
|
||||
IsJT: true
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
shareBox: function() {
|
||||
let that = this;
|
||||
|
||||
let $href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d', that.Config.SiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||||
// #ifdef APP-PLUS
|
||||
$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||||
$href = $.sprintf('%s/tmpl/activity/group_detail.html?gb_id=%d&pid=%d&FX=%d', this.Config.WapSiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||||
|
||||
$href = $.sprintf('%s/h5/activity/fightgroup/detail?gb_id=%d&pid=%d&uid=%d', that.Config.SiteUrl, this.GbInfo.gb_id, this.GbInfo.activity_rule.item_id, this.userInfo.user_id);
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
$href = "/activity/fightgroup/detail?gb_id=" + this.GbInfo.gb_id + "&pid=" + this.GbInfo.activity_rule.item_id + "&uid=" + this.userInfo.user_id;
|
||||
// #endif
|
||||
|
||||
var e = this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity,
|
||||
t = e > 0 ? "【还差" + (this.GbInfo.gb_quantity - this.GbInfo.gb_amount_quantity) + "人】" + this.userInfo.user_nickname +
|
||||
"邀请您参加拼团！立省" + (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule.item_unit_price).toFixed(2) +
|
||||
"元！" : this.userInfo.user_nickname + "拼团成功！他已节省" + (this.GbInfo.activity_rule.group_sale_price - this.GbInfo.activity_rule
|
||||
.item_unit_price).toFixed(2) + "元！赶快来拼团吧!";
|
||||
|
||||
this.setData({
|
||||
shareData: {
|
||||
shareTitle: this.GbInfo.activity_rule.product_item_name,
|
||||
shareText: t,
|
||||
href: $href,
|
||||
image: this.GbInfo.activity_rule.product_image,
|
||||
price: this.GbInfo.activity_rule.group_sale_price
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
this.$refs.shareBoxApp.show();
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.$refs.shareBoxMp.show();
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef H5
|
||||
if (that.$.ifUniApp()) {
|
||||
this.$refs.shareBoxH5.show();
|
||||
} else {
|
||||
this.$refs.shareBoxMp.show();
|
||||
}
|
||||
// #endif
|
||||
|
||||
return;
|
||||
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: true,
|
||||
IsShareBox: true,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelShare: function() {
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImg: function() {
|
||||
var e = this;
|
||||
$.showLoading();
|
||||
$.downloadFile({
|
||||
url: this.PageQRCodeInfo.Path,
|
||||
success: function(t) {
|
||||
$.hideLoading(), $.saveImageToPhotosAlbum({
|
||||
filePath: t.tempFilePath,
|
||||
success: function() {
|
||||
e.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
}), $.alert("保存图片成功！")
|
||||
},
|
||||
fail: function(e) {
|
||||
$.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(e) {
|
||||
$.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
showCodeImg: function() {
|
||||
$.previewImage({
|
||||
current: this.PageQRCodeInfo.Path,
|
||||
urls: [this.PageQRCodeInfo.Path]
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.groupNumber {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.groupNumber .icon-icon {
|
||||
font-size: 24rpx;
|
||||
display: inline
|
||||
}
|
||||
|
||||
/* .groupNumber text{margin: 0 2rpx} */
|
||||
.progressBarBox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0rpx;
|
||||
margin-bottom: -20rpx;
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.u-progressBar {
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 20rpx;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.u-progressBar-cont {
|
||||
height: 20rpx;
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
.u-progressBar-text {
|
||||
line-height: 25rpx;
|
||||
}
|
||||
|
||||
.m-product-price .u-btn {
|
||||
padding: 0 10rpx;
|
||||
margin: 0 20rpx;
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.m-product-GP {
|
||||
height: 270rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-img {
|
||||
height: 270rpx;
|
||||
width: 270rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-price {
|
||||
line-height: 28rpx;
|
||||
font-size: 40rpx
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-info {
|
||||
height: 270rpx;
|
||||
width: 480rpx;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.u-del-price {
|
||||
color: #888888;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.icon-box-title {
|
||||
font-weight: 400;
|
||||
color: #DB384B;
|
||||
}
|
||||
|
||||
.icon-box-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.icon-box icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.m-media-box-bd text {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.m-media-box-info {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.u-time-show {
|
||||
position: absolute;
|
||||
width: 280rpx;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid $default-skin-bg;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin-left: -140rpx;
|
||||
border-radius: 80rpx;
|
||||
margin-bottom: -60rpx;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0rpx 10rpx rgba(0, 0, 0, 0.35);
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.u-time-show label {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.u-time-show text {
|
||||
color: $default-skin-bg !important;
|
||||
}
|
||||
|
||||
/*底部按钮 start*/
|
||||
.m-footer-btn {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
.m-footer-btn-main {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
background-color: $default-skin-bg;
|
||||
color: #fff;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.m-footer-desable {
|
||||
-webkit-filter: grayscale(1);
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.m-now {
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
/*底部按钮 end*/
|
||||
/*团长标签*/
|
||||
.u-fg-label {
|
||||
display: inline-block;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
padding-right: 20rpx;
|
||||
color: $default-skin-bg
|
||||
}
|
||||
|
||||
.u-fg-label label {
|
||||
color: yellow;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.m-media-box-thumb {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/*团长标签*/
|
||||
/* .u-btn {
|
||||
padding:0 10rpx;
|
||||
width:200rpx;
|
||||
font-size:24rpx;
|
||||
line-height:50rpx;
|
||||
background-color:$default-skin-bg;
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top:54rpx;
|
||||
} */
|
||||
.m-product-list {
|
||||
background: #fff;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.m-product-name {
|
||||
height: 116rpx
|
||||
}
|
||||
|
||||
.headPhoto {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
margin: 20rpx auto;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.personPhoto {
|
||||
position: relative;
|
||||
margin: 0.2%
|
||||
}
|
||||
|
||||
.photo-icon {
|
||||
position: absolute;
|
||||
width: 52rpx;
|
||||
height: 36rpx;
|
||||
top: -6rpx;
|
||||
left: -10rpx
|
||||
}
|
||||
|
||||
.photo {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid sandybrown;
|
||||
margin-top: 8rpx;
|
||||
margin-left: 2rpx;
|
||||
margin-right: 2rpx
|
||||
}
|
||||
|
||||
.photo-bg {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 8rpx;
|
||||
|
||||
}
|
||||
|
||||
.m-product-info::before {
|
||||
border: none
|
||||
}
|
||||
|
||||
.time text {
|
||||
color: #DB384c
|
||||
}
|
||||
|
||||
.surplus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
margin: 20rpx 0;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
margin-top: 20rpx
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200rpx
|
||||
}
|
||||
|
||||
.nav-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx
|
||||
}
|
||||
|
||||
.nav text {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #333
|
||||
}
|
||||
|
||||
.isSucces {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
bottom: 10rpx;
|
||||
}
|
||||
|
||||
.isSucces image {
|
||||
width: 150rpx;
|
||||
height: 150rpx
|
||||
}
|
||||
|
||||
.rule {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-top: 20rpx
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx
|
||||
}
|
||||
|
||||
.rule-content {
|
||||
font-size: 24rpx;
|
||||
color: #777777
|
||||
}
|
||||
</style>
|
||||
461
activity/fightgroup/list.vue
Normal file
461
activity/fightgroup/list.vue
Normal file
@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="m-product-all">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="groupLists">
|
||||
{{__('立即开团')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==2?'m-navbar-item-on':'')" @click="toBeGroupLists">
|
||||
{{__('即将开团')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="(tapindex==1?'':'hide')" style="font-size:28rpx;">
|
||||
<scroll-view scroll-y="true" v-if="(pdlist.length>0)" class="m-orderlist" @scrolltolower="scrollbottom" style="width:100%;height:100%;position:absolute;padding-top:80rpx;box-sizing: border-box;">
|
||||
<block v-for="(item, i) in pdlist" :key="i">
|
||||
<navigator :url="'/pages/product/detail?pid=' + (item.activity_rule.item_id) + '&gb_id=0&MEID=' + (item.activity_id)" class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name" style="height: 116rpx;">
|
||||
<label><text class='u-tuan-label'>{{__('拼')}}</text>{{item.activity_rule.product_item_name}}</label>
|
||||
<view class="groupNumber">
|
||||
<day-countdown :timer="(item.activity_endtime)" :Type="1"></day-countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price" style='font-size:38rpx'>
|
||||
<label>{{__('￥')}}</label>{{item.activity_rule.group_sale_price}}
|
||||
<label class="u-del-price" style='margin-left:8rpx'>{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
||||
<button class="u-btn u-btn-default">{{__('立即开团')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，拼团商品正在备货中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :class="(tapindex==2?'':'hide')" style="font-size:28rpx">
|
||||
<scroll-view scroll-y="true" v-if="(fglist.length>0)" class="m-orderlist" @scrolltolower="scrollbottomtwo" style="width:100%;height:100%;position:absolute;padding-top:80rpx;box-sizing: border-box;">
|
||||
<block v-for="(item , i) in fglist" :key="i">
|
||||
<view class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name" style="height: 116rpx;">
|
||||
<label><text class='u-tuan-label'>{{__('拼')}}</text>{{item.activity_rule.product_item_name}}</label>
|
||||
<view class="groupNumber">
|
||||
<day-countdown :timer="(item.activity_starttime)" :Type="0"></day-countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price">
|
||||
<label>{{__('￥')}}</label>{{item.activity_rule.group_sale_price}}
|
||||
<label class="u-del-price" style='margin-left:8rpx'>{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
||||
<button class="u-btn u-btn-default" style='background:#bdbdbd'>{{__('立即开团')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispageTwo)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，拼团商品正在备货中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
viewtype: 0,
|
||||
pdlist: [],
|
||||
fglist: [],
|
||||
flag: true,
|
||||
flagTwo: true,
|
||||
ispage: true,
|
||||
ispageTwo: true,
|
||||
scposition: "",
|
||||
page: 1,
|
||||
istop: false,
|
||||
isdata: false,
|
||||
tapindex: 1,
|
||||
activity_state: 1,
|
||||
|
||||
rows: 0,
|
||||
orderlist: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('拼团')
|
||||
});
|
||||
|
||||
this.InitData()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
InitData: function() {
|
||||
var that = this;
|
||||
that.setData({
|
||||
flag: false
|
||||
});
|
||||
var params = {
|
||||
//store_id : this.shopInfo.store_id,
|
||||
activity_id: -1,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_GROUPBOOKING,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
//data.items[k].activity_endtime = $.formatDateFormatter(v.activity_endtime, "yyyy-MM-dd hh:mm:ss");
|
||||
//data.items[k].activity_starttime = $.formatDateFormatter(v.activity_starttime, "yyyy-MM-dd hh:mm:ss");
|
||||
})
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
groupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
pdlist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_NORMAL
|
||||
}), this.InitData()
|
||||
},
|
||||
toBeGroupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 2,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
fglist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_WAITING
|
||||
}), this.InitPaging()
|
||||
},
|
||||
//saas,调用当前参与的团
|
||||
InitPaging: function() {
|
||||
var that = this;
|
||||
that.setData({
|
||||
flagTwo: false
|
||||
});
|
||||
|
||||
var params = {
|
||||
//store_id : this.shopInfo.store_id,
|
||||
activity_id: -1,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_GROUPBOOKING,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
})
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flagTwo: false,
|
||||
ispageTwo: false,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flagTwo: true,
|
||||
ispageTwo: true,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flagTwo: false,
|
||||
ispageTwo: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
viewType: function(e) {
|
||||
this.viewtype == 0 ? this.setData({
|
||||
viewtype: 1
|
||||
}) : this.setData({
|
||||
viewtype: 0
|
||||
})
|
||||
},
|
||||
scrollbottom: function(e) {
|
||||
var that = this;
|
||||
if (this.flag) {
|
||||
that.setData({
|
||||
flag: false
|
||||
}), clearTimeout(n);
|
||||
var n = setTimeout(function() {
|
||||
that.setData({
|
||||
page: parseInt(that.page) + 1
|
||||
});
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_NORMAL) {
|
||||
that.InitData();
|
||||
}
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_WAITING) {
|
||||
that.InitPaging();
|
||||
}
|
||||
},
|
||||
500);
|
||||
}
|
||||
},
|
||||
scrollbottomtwo: function(e) {
|
||||
var that = this;
|
||||
if (this.flagTwo) {
|
||||
that.setData({
|
||||
flagTwo: false
|
||||
}), clearTimeout(n);
|
||||
var n = setTimeout(function() {
|
||||
that.setData({
|
||||
page: parseInt(that.page) + 1
|
||||
});
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_NORMAL) {
|
||||
that.InitData();
|
||||
}
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_WAITING) {
|
||||
that.InitPaging();
|
||||
}
|
||||
},
|
||||
500);
|
||||
}
|
||||
},
|
||||
returnTop: function() {
|
||||
this.setData({
|
||||
scposition: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
/*全部商品 start*/
|
||||
.groupNumber {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 24upx;
|
||||
color: #db384c;
|
||||
background: #fbebeb;
|
||||
text-align: center;
|
||||
padding: 0 10upx
|
||||
}
|
||||
|
||||
.groupNumber .icon-icon {
|
||||
font-size: 24upx;
|
||||
display: inline
|
||||
}
|
||||
|
||||
.groupNumber text {
|
||||
color: #ffc001;
|
||||
margin: 0 2upx
|
||||
}
|
||||
|
||||
.progressBarBox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.u-progressBar {
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 20rpx;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-progressBar-cont {
|
||||
height: 20rpx;
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
.m-product-price .u-btn {
|
||||
padding: 0;
|
||||
margin: 0 20rpx;
|
||||
width: 160rpx;
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.m-product-GP {
|
||||
height: 232rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-img {
|
||||
height: 223rpx;
|
||||
width: 223rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-price {
|
||||
line-height: 80rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-info {
|
||||
height: 232rpx;
|
||||
width: 518rpx;
|
||||
}
|
||||
|
||||
.u-del-price {
|
||||
color: #888888;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/*全部商品 end*/
|
||||
/*顶部提示*/
|
||||
.u-toptip {
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.u-toptip .u-loadmore {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
/*顶部提示*/
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: #DB384C;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid #DB384C;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
441
activity/fightgroup/order.vue
Normal file
441
activity/fightgroup/order.vue
Normal file
@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="m-product-all">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="allOrders">
|
||||
{{__('全部拼团')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==2?'m-navbar-item-on':'')" @click="toBePaid">
|
||||
{{__('进行中')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==3?'m-navbar-item-on':'')" @click="receiptOfGoods">
|
||||
{{__('拼团成功')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==4?'m-navbar-item-on':'')" @click="toBeEvaluated">
|
||||
{{__('拼团失败')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loadComplete">
|
||||
<block v-if="(orderlist.length>0)">
|
||||
<scroll-view v-if="(orderlist.length>0)" scroll-y="true" class="m-orderlist page-container" @scrolltolower="scrollbottom">
|
||||
<view v-for="(items, index) in orderlist" :key="index" class="m-panel m-panel-access">
|
||||
<view class="m-panel-hd">{{__('订单编号：')}}{{items.order_id}}
|
||||
<label v-if="(items.gb_enable == 0)">{{__('拼团失败')}}</label>
|
||||
<label v-if="(items.gb_enable == 1)">{{__('拼团成功')}}</label>
|
||||
<label v-if="(items.gb_enable == 2)">{{__('拼团中')}}</label>
|
||||
</view>
|
||||
<view class="m-product-list">
|
||||
<navigator :url="'/pages/product/detail?pid=' + (items.activity_rule.item_id)" class="m-product-item">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(items.activity_rule.product_image)" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name">
|
||||
<label><text class='u-tuan-label' v-if="(items.Type=='FIGHTGROUP')">拼</text><text class='u-tuan-label' v-if="(items.Type=='LUCKYFIGHTGROUP')">{{__('抽')}}</text>{{items.activity_rule.product_item_name}}</label>
|
||||
</view>
|
||||
<view class="m-product-price">
|
||||
<label>{{__('￥')}}</label>{{items.activity_rule.group_sale_price}}
|
||||
<text style="text-decoration: line-through;">{{__('￥')}}{{items.activity_rule.item_unit_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="m-total-info">
|
||||
{{__('实付款：')}}
|
||||
<label class="m-total-price">{{__('￥')}}{{items.activity_rule.group_sale_price}}</label>
|
||||
</view>
|
||||
<view class="m-total-btn">
|
||||
<view :data-on="(items.order_id)" :data-gb_id="(items.gb_id)" :data-order_payment_amount="(items.activity_rule.group_sale_price)" v-if="(2==items.gb_enable&&!items.gbh_flag)" class="u-link-btn" @click="gotopay">{{__('去支付')}}</view>
|
||||
<navigator v-if="(items.gb_amount_quantity>0 && 0==items.gb_enable)" :url="'/activity/fightgroup/detail?gb_id=' + (items.gb_id) + '&pid=' + (items.activity_rule.item_id) + '&on=' + (items.order_id) + '&isfg=true&type=' + (items.Type)" class="u-link-btn">{{__('拼团详情')}}</navigator>
|
||||
<navigator v-if="(items.gb_amount_quantity>0 && 1==items.gb_enable)" :url="'/activity/fightgroup/detail?gb_id=' + (items.gb_id) + '&pid=' + (items.activity_rule.item_id) + '&on=' + (items.order_id) + '&isfg=true&type=' + (items.Type)" class="u-link-btn">{{__('拼团详情')}}</navigator>
|
||||
<navigator v-if="(items.gb_amount_quantity>0 && 2==items.gb_enable)" :url="'/activity/fightgroup/detail?gb_id=' + (items.gb_id) + '&pid=' + (items.activity_rule.item_id) + '&on=' + (items.order_id) + '&isfg=true&type=' + (items.Type)" class="u-link-btn">{{__('邀请好友参团')}}</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<navigator url="/activity/fightgroup/list" redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<label style="font-size:32rpx;">{{__('亲~您还没有参与拼团哦，')}}</label><label style="border-bottom:1px solid #db384c;color: #db384c;font-size:32rpx;">{{__('快去看看吧')}}</label>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<payment-box :paymentDataDefault="paymentData" :order_id="order_id" ref="paymentBox" @onCancel="onCancel" @onPaid="onPaid" @onFail="onFail"></payment-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
|
||||
import paymentBox from '../../components/payment-box.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
ispage: true,
|
||||
flag: true,
|
||||
gb_enable: -1,
|
||||
orderlist: [],
|
||||
|
||||
order_id: "",
|
||||
gb_id: "",
|
||||
paymentData: {},
|
||||
loadComplete: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
paymentBox
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('拼团订单')
|
||||
});
|
||||
|
||||
this.setData({
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: []
|
||||
});
|
||||
this.getOrderlist()
|
||||
},
|
||||
onUnload: function() {
|
||||
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
|
||||
allOrders: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
gb_enable: -1,
|
||||
loadComplete: false
|
||||
}), this.getOrderlist()
|
||||
},
|
||||
toBePaid: function() {
|
||||
this.setData({
|
||||
tapindex: 2,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
gb_enable: 2,
|
||||
loadComplete: false
|
||||
}), this.getOrderlist()
|
||||
},
|
||||
receiptOfGoods: function() {
|
||||
this.setData({
|
||||
tapindex: 3,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
gb_enable: 1,
|
||||
loadComplete: false
|
||||
}), this.getOrderlist()
|
||||
},
|
||||
toBeEvaluated: function() {
|
||||
this.setData({
|
||||
tapindex: 4,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
gb_enable: 0,
|
||||
loadComplete: false
|
||||
}), this.getOrderlist()
|
||||
},
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var e = this
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(t)
|
||||
var t = setTimeout(function() {
|
||||
e.setData({
|
||||
type: e.type,
|
||||
page: parseInt(e.page) + 1,
|
||||
rows: 10
|
||||
}), e.getOrderlist()
|
||||
},
|
||||
500)
|
||||
}
|
||||
},
|
||||
getOrderlist: function() {
|
||||
var params = {
|
||||
UserInfoId: this.userInfo.user_id,
|
||||
rows: this.rows,
|
||||
page: this.page,
|
||||
gb_enable: this.gb_enable
|
||||
},
|
||||
that = this
|
||||
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsUserGroupbooking,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (status == 200) {
|
||||
data.page >= data.total ? (that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
}), that.setData({
|
||||
orderlist: that.orderlist.concat(data.items)
|
||||
})) : that.setData({
|
||||
orderlist: that.orderlist.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
}
|
||||
that.setData({
|
||||
loadComplete: true
|
||||
})
|
||||
},
|
||||
fail: function(data) {
|
||||
that.setData({
|
||||
loadComplete: true
|
||||
});
|
||||
that.$.alert("网络异常请重试！");
|
||||
}
|
||||
})
|
||||
},
|
||||
gotopay: function(e) {
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
order_id: e.currentTarget.dataset.on,
|
||||
gb_id: e.currentTarget.dataset.gb_id,
|
||||
'paymentData': {
|
||||
order_id: e.currentTarget.dataset.on,
|
||||
orderSelMoneyAmount: e.currentTarget.dataset.order_payment_amount,
|
||||
|
||||
user_money: this.userInfo.user_money,
|
||||
user_points: this.userInfo.user_points,
|
||||
user_recharge_card: this.userInfo.user_recharge_card,
|
||||
user_sp: this.userInfo.user_sp
|
||||
}
|
||||
});
|
||||
|
||||
this.$refs.paymentBox.show();
|
||||
return true;
|
||||
|
||||
var param = {
|
||||
order_id: e.currentTarget.dataset.on,
|
||||
openid: this.userInfo.openId,
|
||||
store_id: this.shopInfo.store_id,
|
||||
typ: 'json',
|
||||
payment_channel_code: 'wx_native',
|
||||
prepay_flag: 1
|
||||
},
|
||||
that = this
|
||||
|
||||
$.request({
|
||||
url: this.Config.URL.pay.pay,
|
||||
data: param,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
$.requestPayment({
|
||||
timeStamp: data.timeStamp,
|
||||
nonceStr: data.nonceStr,
|
||||
'package': data.package,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: function(e) {
|
||||
$.alert('支付成功！', function() {
|
||||
that.setData({
|
||||
orderlist: [],
|
||||
currentPage: 1
|
||||
}), that.getOrderlist()
|
||||
})
|
||||
},
|
||||
fail: function(e) {
|
||||
//console.log('支付失败：', e)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
$.alert(msg)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
fail: function(err) {}
|
||||
})
|
||||
|
||||
},
|
||||
onCancel: function(e) {
|
||||
return
|
||||
},
|
||||
onPaid: function(e) {
|
||||
let that = this;
|
||||
|
||||
that.$.alert(that.__("支付成功！"), function() {
|
||||
that.$refs.paymentBox.cancel();
|
||||
//that.InitPage(that.options);
|
||||
|
||||
//that.notice.postNotificationName("RefreshMessage", e)
|
||||
setTimeout(function() {
|
||||
that.$.gotopage("/activity/fightgroup/detail?gb_id=" + that.gb_id + "&on=" + that.order_id)
|
||||
}, 1500)
|
||||
})
|
||||
},
|
||||
onFail: function(e) {
|
||||
let that = this;
|
||||
that.$.alert(that.__('支付失败！'))
|
||||
//console.log("支付失败：", e)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid $default-skin-bg;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-panel-hd label {
|
||||
float: right;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-total-info {
|
||||
text-align: right;
|
||||
padding: 20rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-total-info label {
|
||||
font-size: 32rpx;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.m-total-btn {
|
||||
text-align: right;
|
||||
padding: 20rpx 20rpx 30rpx 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m-total-btn::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top: 1px solid #ebebe7;
|
||||
color: #ebebe7;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.m-total-btn .u-link-btn {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.m-sort {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.m-sort image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -12rpx;
|
||||
margin-left: 2rpx;
|
||||
}
|
||||
|
||||
.m-product-price text {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m-orderlist {
|
||||
padding-top: 90rpx;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
198
activity/gift/exchange.vue
Normal file
198
activity/gift/exchange.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="search">
|
||||
<slot></slot>
|
||||
<template>
|
||||
<input maxlength="20" type="text" value="" confirm-type="search" @confirm="searchStart()" :placeholder="__('请输入兑换码')" v-model="code" />
|
||||
</template>
|
||||
<!-- <image src="https://static.lancerdt.com/xcxfile/appicon/zy-search/search.svg" mode="aspectFit" @click="searchStart()" class="search-icon"></image> -->
|
||||
<button mode="aspectFit" @click="searchStart()" style="background-color: crimson;color: aliceblue;margin-top: 40rpx;">立即兑换</button>
|
||||
</view>
|
||||
|
||||
<block v-if="(isData)">
|
||||
<view class="m-cells m-cells-form">
|
||||
<view class="m-cell">
|
||||
<view class="m-cell-hd" style="width: 140rpx;"><label class="u-label">{{activityInfo.activity_title}}</label></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-list">
|
||||
<view v-for="(item, ii) in activityInfo.items" :key="ii" class="m-product-item">
|
||||
<view class="m-product-img">
|
||||
<image :src="item.product_image" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name">
|
||||
<label>{{ item.product_name }}</label>
|
||||
</view>
|
||||
|
||||
<view class="m-product-price">
|
||||
<block v-if="item.item_unit_price">
|
||||
<label>{{ __('￥') }}</label>
|
||||
{{ item.item_unit_price }}
|
||||
</block>
|
||||
<text style="float: right;margin-right: 60rpx;">x{{ item.item_quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="u-btn u-btn-default" @click="submitInfo" style="margin-top:40rpx;">{{ __('领取礼包') }}</button>
|
||||
</block>
|
||||
<view class="u-loadmore u-loadmore-line" v-else>
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
code: '',
|
||||
activityInfo: {},
|
||||
isData: false,
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('礼包兑换')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
this.forceUserInfo(function(user) {
|
||||
console.log(user);
|
||||
that.setData({
|
||||
serial_code: user.serial_code
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
searchStart(e) {
|
||||
var that = this;
|
||||
if (!this.code) {
|
||||
that.$.alert("请输入兑换码！");
|
||||
return;
|
||||
}
|
||||
var params = {
|
||||
code: this.code
|
||||
};
|
||||
that.$.request({
|
||||
url: this.Config.URL.store.getActivityCodeList,
|
||||
method: 'post',
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.setData({
|
||||
activityInfo: data,
|
||||
isData: true,
|
||||
})
|
||||
} else {
|
||||
that.$.alert(msg);
|
||||
that.setData({
|
||||
activityInfo: {},
|
||||
isData: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
submitInfo: function() {
|
||||
var that = this;
|
||||
var pat = []
|
||||
var items = this.activityInfo.activity_rule.quantity
|
||||
for (var i in items) {
|
||||
if (items[i].quantity > 0) {
|
||||
var t = items[i].item_id + '|' + items[i].quantity
|
||||
pat.push(t)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (pat.length <= 0) {
|
||||
that.$.alert("亲~请选择商品！");
|
||||
return
|
||||
}
|
||||
|
||||
var str = pat.join(',');
|
||||
that.$.navigateTo({
|
||||
url: "/pages/checkout/checkout?ifcart=0&cart_id=" + str + "&activity_id=" + that.activityInfo.activity_id + "&code=" + that.code
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
width: 640rpx;
|
||||
margin: 30rpx auto 20rpx;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 74rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.voice-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 16rpx 20rpx 16rpx 0;
|
||||
position: absolute;
|
||||
left: 16rpx;
|
||||
top: 4rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
padding: 16rpx 20rpx 16rpx 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.m-product-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.m-product-info {
|
||||
height: 120rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.m-product-item {
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.m-product-name {
|
||||
height: 120rpx;
|
||||
|
||||
}
|
||||
|
||||
.m-product-name uni-label {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
</style>
|
||||
1067
activity/giftbag/detail.vue
Normal file
1067
activity/giftbag/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
271
activity/giftbag/list.vue
Normal file
271
activity/giftbag/list.vue
Normal file
@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="m-coupon-list">
|
||||
<block v-if="(giftbagList.length>0)">
|
||||
<navigator :url="'/activity/giftbag/detail?aid=' + item.activity_id " class="m-coupon-item" v-for="(item, index) in giftbagList" :key="index">
|
||||
<view class="m-activity-image">
|
||||
<image :src='(item.activity_rule.giftbag_image)' style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
<view class="m-activity-info">
|
||||
<view class="m-activity-title">
|
||||
<label>{{(item.activity_rule.activity_bag_category)}}</label>
|
||||
</view>
|
||||
<view class="m-activity-tips">
|
||||
<label>{{(item.activity_name)}}</label>
|
||||
|
||||
<label class="gift-rule" style="float: right">
|
||||
{{ __(' 套餐价 ') }}<span class="ap">{{ __('￥') }}{{ item.activity_rule.giftbag_amount }}</span>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</navigator>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage1)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<view class="m-nullcontent" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲~什么都没有')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
ispage: false,
|
||||
giftbagList: [],
|
||||
Coupons: [],
|
||||
flag: true,
|
||||
Id: 0,
|
||||
Code: "",
|
||||
index: 0,
|
||||
needed_point: 0,
|
||||
store_id: 0,
|
||||
activity_state: 1,
|
||||
page: 1,
|
||||
|
||||
isdata: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('礼包专区')
|
||||
});
|
||||
|
||||
this.setData({
|
||||
options: options,
|
||||
})
|
||||
var that = this;
|
||||
this.getGiftbaglist()
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.scrollbottom();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
|
||||
|
||||
getGiftbaglist: function() {
|
||||
|
||||
var params = {
|
||||
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_GIFTBAG,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
|
||||
var that = this;
|
||||
that.$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
// ajaxCache: {
|
||||
// timeout: this.Config.CACHE_EXPIRE
|
||||
// },
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (200 == status && data.items.length > 0) {
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
giftbagList: that.giftbagList.concat(data.items),
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
giftbagList: that.giftbagList.concat(data.items),
|
||||
})
|
||||
}
|
||||
|
||||
that.setData({
|
||||
isdata: true
|
||||
})
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: function(data) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
scrollbottom: function(e) {
|
||||
if (this.flag) {
|
||||
var that = this;
|
||||
that.setData({
|
||||
flag: false
|
||||
}), clearTimeout(n);
|
||||
|
||||
var post = this.post;
|
||||
/*
|
||||
post.sidx = 'product_unit_price';
|
||||
post.sord = this.sort == 1 ? 'DESC' : 'ASC';
|
||||
*/
|
||||
post.curpage = parseInt(that.post.curpage) + 1;
|
||||
|
||||
var n = setTimeout(function() {
|
||||
that.setData({
|
||||
post: post
|
||||
}),
|
||||
that.GetPlist();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-coupon-list {
|
||||
// margin-top: 36rpx
|
||||
}
|
||||
|
||||
.m-coupon-item {
|
||||
width: 710rpx;
|
||||
height: 448rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.16);
|
||||
opacity: 1;
|
||||
border-radius: 16rpx;
|
||||
margin: 24rpx 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-activity-image {
|
||||
width: 100%;
|
||||
height: 328rpx;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
opacity: 1;
|
||||
border-radius: 16px 16rpx 0px 0px;
|
||||
|
||||
}
|
||||
|
||||
.m-activity-info {
|
||||
padding: 16rpx 20rpx;
|
||||
}
|
||||
|
||||
.m-activity-title {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
line-height: 42rpx;
|
||||
color: #002951;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.m-activity-tips {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 34rpx;
|
||||
color: #002951;
|
||||
opacity: 1;
|
||||
//margin-top: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.price-content-box {
|
||||
position: absolute;
|
||||
left: -35rpx;
|
||||
text-align: center;
|
||||
width: 220rpx;
|
||||
}
|
||||
|
||||
.price-content-box label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.closeRPK {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -30rpx;
|
||||
bottom: -80rpx;
|
||||
}
|
||||
|
||||
.ap {
|
||||
color: red;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
816
activity/luckydraw/detail.vue
Normal file
816
activity/luckydraw/detail.vue
Normal file
@ -0,0 +1,816 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="(isPage)">
|
||||
<view class="m-draw-box" v-if="outdated">
|
||||
<view class="m-title">
|
||||
<view class="m-title-main">{{DrawInfo.activity_title}}</view>
|
||||
<view class="m-title-sub">{{__('幸运大抽奖')}}</view>
|
||||
<view class="m-title-time">{{DrawInfo.activity_starttime}} ~ {{DrawInfo.activity_endtime}}</view>
|
||||
</view>
|
||||
<view class="m-table">
|
||||
<view v-for="(item, i) in PrizeList" :key="i" :class="['m-table-td', (i+1)==index?'select-table':'']">
|
||||
<image :src="item.awards_image"></image>
|
||||
<view class="price-text">{{item.awards_name}}</view>
|
||||
</view>
|
||||
<view class="m-table-btn" @tap="LuckDraw">
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/activity/click.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-tip">{{__('您还有')}}<label>{{RemainingCount}}{{__('次')}}</label>{{__('抽奖机会，快来试试手气')}}</view>
|
||||
<view class="m-model-outline">
|
||||
<view class="m-model yellow">{{__('中奖名单')}}</view>
|
||||
</view>
|
||||
<block v-if="DrawInfo.winner_rows.items.length >0">
|
||||
<swiper autoplay="true" interval="4000" duration="2000" class="m-luckylist" vertical="false" circular="true">
|
||||
<swiper-item v-for="(t_item, i) in rows" :key="i">
|
||||
<block v-for="(item, j) in DrawInfo.winner_rows.items" :key="j">
|
||||
<view v-if="j>=(i*3) && j<=((i+1)*3)" class="m-luckylist-item">
|
||||
• {{item.user_nickname}}{{__('抽中')}}
|
||||
<label>{{item.awards_name}}</label>
|
||||
</view>
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
<view class="m-winner-nothing" v-else>{{__('暂无中奖名单数据')}}</view>
|
||||
<view class="m-model-outline">
|
||||
<view class="m-model blue">{{__('活动规则')}}</view>
|
||||
</view>
|
||||
<view class="m-rule">
|
||||
<wxParse :content="DrawInfo.activity_rule.activity_intro + ''" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="activity-outdated" v-else>
|
||||
<view class="m-nullcontent">
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲~您来晚了哦')}}</text>
|
||||
<text>{{__('该抽奖活动已经失效啦')}}~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="u-tap-btn">
|
||||
<navigator url="/member/member/prize?category=1" class="u-go-home">
|
||||
<view class="iconfont icon-iconcanjiahuodong01"></view>
|
||||
</navigator>
|
||||
<view class="red-dot"></view>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
|
||||
<view class="iconfont icon-shouyeshouye" style="font-size:50rpx;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="mskprize" v-if="clickmsk" @tap="cancelprize">
|
||||
<view class="m-result-box bounceIn animated" catchtap="nothing" v-if="PrizeResult.index >= 0">
|
||||
<view class="m-result-cancel" @tap="cancelprize">✕</view>
|
||||
|
||||
<block v-if="PrizeResult.awards_enable">
|
||||
<view class="m-success-text">{{__('恭喜你获得了')}}</view>
|
||||
</block>
|
||||
<block v-if="!PrizeResult.awards_enable">
|
||||
<view class="m-success-text">{{__('未中奖')}}</view>
|
||||
</block>
|
||||
<image :src="PrizeList[PrizeResult.index].awards_image" class="m-success-img" />
|
||||
<view class="m-success-name">{{PrizeResult.prize}}</view>
|
||||
<view class="m-success-name" v-if="false">{{PrizeResult.PrizeSendingMessage}}</view>
|
||||
<view class="m-success-bottom">
|
||||
<navigator url="/member/member/prize?category=1" class="succes-checkprice">{{__('查看奖品')}}</navigator>
|
||||
<view class="succes-continue" @tap="cancelprize">{{__('继续抽奖')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-result-box wobble animated" catchtap="nothing" v-else>
|
||||
<view class="m-result-cancel" @tap="cancelprize">✕</view>
|
||||
<view class="m-failimg-bg">
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/nothing.png" class="m-fail-img" />
|
||||
</view>
|
||||
<view class="m-fail-name">{{DrawInfo.LosingDesc}}</view>
|
||||
<view class="m-fail-button" @tap="cancelprize">{{__('继续抽奖')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mskshare" v-if="clickshare" @tap="cancelshare">
|
||||
<!-- <image src="../../assets/share.png" class="share-oncemore" mode="widthFix"></image> -->
|
||||
<view class="share-text">
|
||||
<view>{{__('你今天已经没有抽奖机会了')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
import wxParse from '@/components/u-parse/u-parse.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
options: {},
|
||||
index: -1,
|
||||
count: 13,
|
||||
timer: 0,
|
||||
speed: 20,
|
||||
times: 0,
|
||||
cycle: 50,
|
||||
prize: -1,
|
||||
click: false,
|
||||
clickmsk: false,
|
||||
clickshare: false,
|
||||
drawdesc: [],
|
||||
PrizeList: [],
|
||||
DrawInfo: {},
|
||||
RemainingCount: 0,
|
||||
PrizeResult: {},
|
||||
rows: [],
|
||||
Coupons: [],
|
||||
isCancelSuccess: true,
|
||||
isCancel: true,
|
||||
CouponAmount: 0,
|
||||
IsNewUser: 0,
|
||||
isPage: false,
|
||||
outdated: false,
|
||||
|
||||
activity_id: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown,
|
||||
wxParse
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
let that = this;
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('幸运大抽奖')
|
||||
});
|
||||
|
||||
that.setData({
|
||||
activity_id: options.activity_id || 0,
|
||||
options: options
|
||||
});
|
||||
|
||||
$.isNull(this.userInfo) ? this.getUserInfo(function() {
|
||||
that.setData({
|
||||
user_is_new: this.userInfo.user_is_new,
|
||||
CouponAmount: this.userInfo.CouponAmount
|
||||
}), that.initData()
|
||||
},
|
||||
options.uid) : that.initData()
|
||||
},
|
||||
onShareAppMessage: function() {
|
||||
var e = this;
|
||||
return this.setData({
|
||||
clickshare: false,
|
||||
click: false
|
||||
}), {
|
||||
title: e.__("我已经中奖啦，你也赶紧来抽奖吧~"),
|
||||
desc: e.__("幸运大抽奖，快来参与吧~"),
|
||||
path: "/activity/luckydraw/detail?uid=" + this.userInfo.user_id,
|
||||
success: function(t) {
|
||||
e.sharefriend()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
sharefriend: function() {
|
||||
var e = {
|
||||
Category: 1,
|
||||
activity_id: this.activity_id
|
||||
},
|
||||
t = this;
|
||||
$.request($.makeUrl(activityapi.ShareLuckyDraw, e), function(e) {
|
||||
e.Code == 0 && e.Info != null && (t.setData({
|
||||
RemainingCount: t.RemainingCount
|
||||
}), t.initData())
|
||||
})
|
||||
},
|
||||
initData: function() {
|
||||
// 2砸金蛋，1大转盘
|
||||
var params = {
|
||||
activity_type: 1,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
||||
activity_id: this.activity_id
|
||||
},
|
||||
that = this;
|
||||
// 等级规则
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsLottery,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
isPage: true
|
||||
});
|
||||
if (status == 200) {
|
||||
that.setData({
|
||||
DrawInfo: data,
|
||||
RemainingCount: data.remaining_count,
|
||||
outdated: data.outdated,
|
||||
PrizeList: data.items,
|
||||
activity_id: data.activity_id
|
||||
});
|
||||
if (that.DrawInfo.winner_rows.items.length > 0) {
|
||||
var n = that.DrawInfo.winner_rows.items.length % 5 > 0 ? parseInt(that.DrawInfo.winner_rows.items.length / 5 + 1) : that.DrawInfo.winner_rows.items.length / 5,
|
||||
r = [];
|
||||
for (var i = 0; i < n; i++) {
|
||||
r.push(i);
|
||||
}
|
||||
that.setData({
|
||||
rows: r
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
$.isNull(data.activity_rule.activity_intro);
|
||||
} else {
|
||||
that.setData({
|
||||
outdated: false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getPosition: function() {
|
||||
var params = {
|
||||
activity_id: this.activity_id
|
||||
};
|
||||
var that = this;
|
||||
|
||||
// 等级规则
|
||||
$.request({
|
||||
url: this.Config.URL.user.doLottery,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
|
||||
if (typeof data !== 'string') {
|
||||
(that.setData({
|
||||
prize: data.index,
|
||||
PrizeResult: data
|
||||
}), that.roll());
|
||||
} else {
|
||||
that.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
});
|
||||
|
||||
that.roll()
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
});
|
||||
|
||||
that.roll()
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
LuckDraw: function() {
|
||||
this.click || (this.setData({
|
||||
speed: 100,
|
||||
click: true
|
||||
}), this.RemainingCount > 0 ? this.getPosition() : this.RemainingCount == 0 && this.setData({
|
||||
clickshare: true
|
||||
}))
|
||||
},
|
||||
luckRoll: function() {
|
||||
var e = this.index,
|
||||
t = this.count;
|
||||
e += 1, e > t - 1 && (e = 0), this.setData({
|
||||
index: e
|
||||
})
|
||||
},
|
||||
roll: function() {
|
||||
this.setData({
|
||||
times: this.times + 1
|
||||
}), this.luckRoll();
|
||||
|
||||
if (this.times > this.cycle + 10 && this.prize == this.index) {
|
||||
if (this.prize == this.index) {
|
||||
clearTimeout(this.timer), this.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
}), this.initData();
|
||||
var e = this;
|
||||
setTimeout(function() {
|
||||
e.setData({
|
||||
clickmsk: true
|
||||
})
|
||||
},
|
||||
800)
|
||||
}
|
||||
|
||||
} else {
|
||||
//未中奖的提示【异常】
|
||||
if (this.prize == -1) {
|
||||
clearTimeout(this.timer), this.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
}), this.initData();
|
||||
var e = this;
|
||||
setTimeout(function() {
|
||||
e.setData({
|
||||
clickmsk: true
|
||||
})
|
||||
},
|
||||
800)
|
||||
} else {
|
||||
if (this.times < this.cycle) {
|
||||
this.setData({
|
||||
speed: this.speed - 10
|
||||
});
|
||||
} else if (this.times == this.cycle) {
|
||||
var t = this.prize + 1;
|
||||
this.setData({
|
||||
prize: t
|
||||
})
|
||||
} else {
|
||||
this.times > this.cycle + 10 && (this.prize == 0 && this.index == 7 || this.prize == this.index + 1) ? this.setData({
|
||||
speed: this.speed + 110
|
||||
}) : this.setData({
|
||||
speed: this.speed + 20
|
||||
});
|
||||
}
|
||||
this.speed < 40 && this.setData({
|
||||
speed: this.speed + 40
|
||||
});
|
||||
var e = this;
|
||||
this.timer = setTimeout(function() {
|
||||
e.roll()
|
||||
},
|
||||
e.speed)
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
cancelprize: function() {
|
||||
this.setData({
|
||||
clickmsk: false
|
||||
})
|
||||
},
|
||||
cancelshare: function() {
|
||||
this.setData({
|
||||
clickshare: false
|
||||
}), this.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
})
|
||||
},
|
||||
nothing: function() {},
|
||||
doReceive: function() {
|
||||
this.cancel(), this.userReceiveCoupon()
|
||||
},
|
||||
cancel: function() {
|
||||
this.setData({
|
||||
isCancel: false
|
||||
})
|
||||
},
|
||||
cancelsuccess: function() {
|
||||
this.setData({
|
||||
isCancelSuccess: true
|
||||
})
|
||||
},
|
||||
innertouch: function() {},
|
||||
userReceiveCoupon: function() {
|
||||
var params = {
|
||||
activity_id: this.activity_id,
|
||||
activity_type: 1,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY
|
||||
};
|
||||
|
||||
var that = this;
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsLotteryHistory,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.setData({
|
||||
isCancelSuccess: false,
|
||||
Coupons: data.items
|
||||
});
|
||||
} else {
|
||||
$.alert(msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
page {
|
||||
background-color: #292438;
|
||||
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.activity-outdated {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.m-draw-box {
|
||||
height: 1940rpx;
|
||||
background: url(https://static.lancerdt.com/xcxfile/appicon/luckdraw_bg.png) center no-repeat;
|
||||
background-size: cover;
|
||||
padding: 42rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.m-title {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.m-title-main {
|
||||
font-size: 80rpx;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-title-sub {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.m-title-time {
|
||||
font-size: 22rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
/**抽奖盒子**/
|
||||
.m-table {
|
||||
position: relative;
|
||||
width: 666rpx;
|
||||
height: 666rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.m-table-td {
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
position: absolute;
|
||||
border-radius: 8rpx;
|
||||
background: white;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
color: gray;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.m-table-td image {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
box-sizing: border-box;
|
||||
margin: 10rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(2) {
|
||||
margin-left: 174rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(3) {
|
||||
margin-left: 348rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(4) {
|
||||
margin-left: 522rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(5) {
|
||||
margin-top: 174rpx;
|
||||
left: 522rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(6) {
|
||||
margin-top: 348rpx;
|
||||
left: 522rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(7) {
|
||||
margin-top: 522rpx;
|
||||
left: 522rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(8) {
|
||||
margin-top: 522rpx;
|
||||
left: 348rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(9) {
|
||||
margin-top: 522rpx;
|
||||
left: 174rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(10) {
|
||||
margin-top: 522rpx;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(11) {
|
||||
margin-top: 348rpx;
|
||||
}
|
||||
|
||||
.m-table-td:nth-child(12) {
|
||||
margin-top: 174rpx;
|
||||
}
|
||||
|
||||
.m-table-btn image {
|
||||
width: 318rpx;
|
||||
height: 318rpx;
|
||||
border-radius: 20rpx;
|
||||
position: absolute;
|
||||
left: 174rpx;
|
||||
top: 174rpx;
|
||||
background: #FFDC44;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
border: 10rpx;
|
||||
border-style: solid;
|
||||
border-top-color: #FFF068;
|
||||
border-bottom-color: #FFC61F;
|
||||
border-left-color: #FFC61F;
|
||||
border-right-color: #FFDC44;
|
||||
}
|
||||
|
||||
.select-table {
|
||||
background-color: #FFAC33;
|
||||
}
|
||||
|
||||
/**抽奖盒子**/
|
||||
.m-tip {
|
||||
font-size: 24rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.m-tip label {
|
||||
color: #FFDC44;
|
||||
}
|
||||
|
||||
.m-model-outline {
|
||||
width: 320rpx;
|
||||
height: 65rpx;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px dotted white;
|
||||
margin-top: 70rpx;
|
||||
border-radius: 33rpx;
|
||||
}
|
||||
|
||||
.m-model {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: #FFAC33;
|
||||
}
|
||||
|
||||
.m-luckylist {
|
||||
font-size: 26rpx;
|
||||
text-align: left;
|
||||
margin-top: 40rpx;
|
||||
max-height: 240rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-luckylist-item {
|
||||
line-height: 80rpx;
|
||||
border-top: 1rpx dotted white;
|
||||
box-sizing: border-box;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.m-luckylist-item label {
|
||||
color: #FFDC44;
|
||||
}
|
||||
|
||||
.m-winner-nothing {
|
||||
text-align: left;
|
||||
font-size: 26rpx;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #43C4E9;
|
||||
}
|
||||
|
||||
.m-rule {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.mskprize {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mskshare {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.share-oncemore {
|
||||
width: 700rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.share-text {
|
||||
margin: 0 auto;
|
||||
font-size: 40rpx;
|
||||
line-height: 80rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 45%
|
||||
}
|
||||
|
||||
.m-result-box {
|
||||
width: 500rpx;
|
||||
height: 600rpx;
|
||||
background: #DB384B;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.m-result-cancel {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 15rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.m-success-text {
|
||||
line-height: 80rpx;
|
||||
margin-top: 50rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.m-success-img {
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
background: white;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.m-success-name {
|
||||
color: #FFAC33;
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.m-success-bottom {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
line-height: 65rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.succes-continue {
|
||||
height: 65rpx;
|
||||
width: 200rpx;
|
||||
background: #FFCA3A;
|
||||
display: inline-block;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.succes-checkprice {
|
||||
height: 65rpx;
|
||||
width: 200rpx;
|
||||
background: white;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.m-failimg-bg {
|
||||
width: 350rpx;
|
||||
height: 350rpx;
|
||||
border-radius: 175rpx;
|
||||
background-color: rgba(255, 255, 255, 0.10);
|
||||
margin: 40rpx auto 20rpx;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-fail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 150rpx;
|
||||
background-color: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.m-fail-name {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.m-fail-button {
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
line-height: 65rpx;
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
background: #FFCA3A;
|
||||
border-radius: 5rpx;
|
||||
font-size: 28rpx;
|
||||
left: 100rpx;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: $default-skin-bg;
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 20rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.u-tap-btn {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 40rpx;
|
||||
}
|
||||
|
||||
.u-go-home {
|
||||
border-radius: 100%;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 1px solid #eee;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 2;
|
||||
opacity: 0.8;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-go-home .iconfont {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
190
activity/market/checkin.vue
Normal file
190
activity/market/checkin.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="isPage">
|
||||
<navigator :url="'/activity/market/detail?id=' + Info.Id" class="m-activity-item">
|
||||
<image src="Info.EventMainPic" mode="aspectFill" class="m-activity-img" />
|
||||
<view class="m-activity-info">
|
||||
<view class="m-activity-name">{{Info.Title}}</view>
|
||||
<label class="iconfont icon-shijian gray"></label>
|
||||
<label class="m-activity-time">{{Info.EventTime}}</label>
|
||||
</view>
|
||||
</navigator>
|
||||
|
||||
<view class="icon-box">
|
||||
<icon type="success" size="70" />
|
||||
<view class="icon-box__ctn">
|
||||
<view class="icon-box-title">{{__('签到成功!')}}</view>
|
||||
<view class="icon-box-desc">{{__('签到时间')}}：{{Info.CheckInTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="m-activity-otherinfo" v-if="Info.AgendaPlan!=null">
|
||||
<view class="item-otherinfo">
|
||||
<view class="item-title">{{__('活动规则')}}</view>
|
||||
</view>
|
||||
<!--<view style="padding:10rpx 30rpx;font-size:30rpx;">{{Info.AgendaPlan}}</view>-->
|
||||
<view style="padding:10rpx 30rpx;font-size:30rpx;">
|
||||
<template is="wxParse" data="wxParseData:activityagenda.nodes" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
isPage: false,
|
||||
Info: [],
|
||||
EventId: "",
|
||||
activityagenda: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('活动签到')
|
||||
});
|
||||
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
initData: function() {
|
||||
var e = {
|
||||
EventId: this.EventId
|
||||
},
|
||||
that = this;
|
||||
that.$.request($.makeUrl(activityapi.EventCheckIn, e), function(e) {
|
||||
e.Info != null && e.Code == 0 ? (that.setData({
|
||||
isPage: true,
|
||||
Info: e.Info
|
||||
}), $.isNull(e.Info.AgendaPlan) || WxParse.wxParse("activityagenda", "html", e.Info.AgendaPlan, that)) : ($.alert(that.__("签到失败！")), that.setData({
|
||||
isPage: false
|
||||
}))
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-activity-item {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.m-activity-img {
|
||||
padding: 20rpx;
|
||||
width: 260rpx;
|
||||
height: 200rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.m-activity-info {
|
||||
width: 450rpx;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-activity-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.gray {
|
||||
font-size: 35rpx;
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-activity-time {
|
||||
margin-left: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.m-activity-otherinfo {
|
||||
background: white;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.item-otherinfo {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
border-left: 5px solid $default-skin-bg;
|
||||
font-size: 14px;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.icon-box-title {
|
||||
font-weight: 400;
|
||||
color: #DB384B;
|
||||
}
|
||||
|
||||
.icon-box-desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.icon-box icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
413
activity/market/detail.vue
Normal file
413
activity/market/detail.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="m-activity-container" v-if="isPage">
|
||||
<view class="m-activity-info">
|
||||
<image :src="Info.activity_rule.activity_image" mode="aspectFill" class="m-activity-img" v-if="!isEventMainPic" />
|
||||
<view class="m-activity-name">{{Info.activity_name}}</view>
|
||||
<view class="m-activity-eventdesc">{{Info.activity_remark}}</view>
|
||||
<view class="m-cell m-cell-access">
|
||||
<view class="m-cell-hd highlight">
|
||||
<label class="iconfont icon-shijian "></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('活动时间')}}：{{Info.activity_starttime}} ~ {{Info.activity_endtime}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell m-cell-access">
|
||||
<view class="m-cell-hd" style="color:#EB543D">
|
||||
<label class="iconfont icon-gerenziliao "></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('报名截止时间')}}：{{Info.activity_rule.end_join_time}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell m-cell-access">
|
||||
<view class="m-cell-hd" style="color:#1BC2A6">
|
||||
<label class="iconfont icon-shouhuodizhi "></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('活动地址')}}：{{Info.activity_rule.activity_address}}</p>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="m-activity-otherinfo" v-if="!isEventDetail">
|
||||
<view class="item-otherinfo">
|
||||
<view class="item-title">{{__('活动介绍')}}</view>
|
||||
</view>
|
||||
<u-parse :content="Info.activity_rule.activity_detail_intro + ' '" @navigate="navigate" @preview="preview" :imageProp="{lazyLoad:true}"></u-parse>
|
||||
</view>
|
||||
<view class="m-activity-otherinfo" v-if="!isVip1">
|
||||
<view class="item-otherinfo">
|
||||
<view class="item-title">{{__('嘉宾介绍')}}</view>
|
||||
</view>
|
||||
<image src="Info.VipGuestPic1" mode="widthFix" class="item-otherimg" v-if="!isVip1" />
|
||||
<image src="Info.VipGuestPic2" mode="widthFix" class="item-otherimg" v-if="!isVip2" />
|
||||
<image src="Info.VipGuestPic3" mode="widthFix" class="item-otherimg" v-if="!isVip3" />
|
||||
<image src="Info.VipGuestPic4" mode="widthFix" class="item-otherimg" v-if="!isVip4" />
|
||||
<image src="Info.VipGuestPic5" mode="widthFix" class="item-otherimg" v-if="!isVip5" />
|
||||
</view>
|
||||
<view class="m-activity-otherinfo" v-if="!isAgendaPlan">
|
||||
<view class="item-otherinfo">
|
||||
<view class="item-title">{{__('活动规则')}}</view>
|
||||
</view>
|
||||
<view style="padding:0 20rpx;">
|
||||
<u-parse :content="Info.activity_rule.activity_intro + ' '" @navigate="navigate" @preview="preview" :imageProp="{lazyLoad:true}"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="m-activity-otherinfo">
|
||||
<view class="item-otherinfo" style="margin-bottom:0rpx;">
|
||||
<view class="item-title">{{__('主办单位')}}</view>
|
||||
</view>
|
||||
<view class="m-cell m-cell-access borderNone">
|
||||
<view class="m-cell-hd" style="color:#1BC2A6">
|
||||
<label class="iconfont icon-icon1"></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('主办方')}}：{{Info.activity_rule.activity_sponsor }}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell m-cell-access">
|
||||
<view class="m-cell-hd" style="color:#1BC2A6">
|
||||
<label class="iconfont icon-icon "></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('联系人')}}：{{Info.activity_rule.contact_organizer}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell m-cell-access">
|
||||
<view class="m-cell-hd" style="color:#1BC2A6">
|
||||
<label class="iconfont icon-mobilephone "></label>
|
||||
</view>
|
||||
<view class="m-cell-bd m-cell-primary">
|
||||
<p> {{__('联系电话')}}：{{Info.activity_rule.contact_phone}}</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-cleanbox"></view>
|
||||
</view>
|
||||
<view class="bottombar g-flex">
|
||||
<view class="service" v-if="false">
|
||||
<label class="iconfont icon-more" style="line-height:40rpx"></label>
|
||||
<view class="text-kefu" style="line-height:30rpx">{{__('客服')}}</view>
|
||||
</view>
|
||||
<view :class="['signin', isGray ?'m-footer-desable':'']" @tap="signinnow">{{content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-tap-btn">
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
|
||||
<view class="iconfont icon-shouyeshouye" style="font-size:50rpx;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
import uParse from '@/components/u-parse/u-parse.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
Info: [],
|
||||
Id: 0,
|
||||
isVip1: true,
|
||||
isVip2: true,
|
||||
isVip3: true,
|
||||
isVip4: true,
|
||||
isVip5: true,
|
||||
isEventDetail: true,
|
||||
isEventMainPic: true,
|
||||
isAgendaPlan: true,
|
||||
isPage: false,
|
||||
isGray: true,
|
||||
content: "",
|
||||
activitydetail: [],
|
||||
activityagenda: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown,
|
||||
uParse
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('活动详情')
|
||||
});
|
||||
this.setData({
|
||||
Id: options.id
|
||||
});
|
||||
|
||||
this.forceUserInfo(function(user) {});
|
||||
},
|
||||
onShareAppMessage: function() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
// #endif
|
||||
|
||||
return {
|
||||
title: this.Info.Title,
|
||||
desc: this.Info.EventDesc,
|
||||
path: "/activity/market/detail?id=" + this.Id + "&uid=" + this.userInfo.user_id
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享朋友圈
|
||||
*/
|
||||
onShareTimeline: function() {
|
||||
return {
|
||||
title: this.Info.Title,
|
||||
query: {
|
||||
uid: this.userInfo.user_id
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
var e = this;
|
||||
$.isNull(this.userInfo) ? this.getUserInfo(function(user) {
|
||||
if (user) {
|
||||
e.initData()
|
||||
}
|
||||
}) : e.initData()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
initData: function() {
|
||||
var params = {
|
||||
activity_id: this.Id
|
||||
},
|
||||
that = this;
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.getMarketing,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.setData({
|
||||
Info: data,
|
||||
isVip1: $.isNull(data.VipGuestPic1),
|
||||
isVip2: $.isNull(data.VipGuestPic2),
|
||||
isVip3: $.isNull(data.VipGuestPic3),
|
||||
isVip4: $.isNull(data.VipGuestPic4),
|
||||
isVip5: $.isNull(data.VipGuestPic5),
|
||||
isEventDetail: $.isNull(data.activity_rule.activity_detail_intro),
|
||||
isEventMainPic: $.isNull(data.activity_rule.activity_image),
|
||||
isAgendaPlan: $.isNull(data.activity_rule.activity_process),
|
||||
isPage: true,
|
||||
isSignIn: data.is_join,
|
||||
ifJoin: data.if_join,
|
||||
});
|
||||
|
||||
if (data.if_join && !data.is_join) {
|
||||
// 可以报名且未报名
|
||||
that.setData({
|
||||
isGray: false,
|
||||
content: that.__("立即报名")
|
||||
});
|
||||
} else {
|
||||
// 不可报名
|
||||
if (data.is_join) {
|
||||
// 由于已报名不可报名
|
||||
that.setData({
|
||||
isGray: true,
|
||||
content: that.__("已报名")
|
||||
});
|
||||
} else {
|
||||
// 活动已截止报名，导致的不可报名
|
||||
that.setData({
|
||||
isGray: true,
|
||||
content: that.__("报名已截止")
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
isPage: false
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 参加报名
|
||||
signinnow: function() {
|
||||
if (this.isGray) {
|
||||
return;
|
||||
}
|
||||
var e = {
|
||||
img: this.Info.activity_rule.activity_image,
|
||||
title: this.Info.activity_name,
|
||||
time: this.Info.activity_rule.start_join_time,
|
||||
id: this.Info.activity_id
|
||||
};
|
||||
wx.navigateTo({
|
||||
url: "/activity/market/signin?val=" + JSON.stringify(e) + "&source=" + this.StateCode.MARKRTING_ACTIVITY_JOIN
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-activity-container {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.m-activity-info {
|
||||
margin-bottom: 100rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-activity-img {
|
||||
width: 100%;
|
||||
height: 440rpx;
|
||||
}
|
||||
|
||||
.m-activity-name {
|
||||
padding: 10rpx 28rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
line-height: 60rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-activity-eventdesc {
|
||||
padding: 0 30rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
text-justify: auto;
|
||||
}
|
||||
|
||||
.m-cell-primary {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.m-activity-otherinfo {
|
||||
border-top: 20rpx solid #eee;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-otherinfo {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
border-left: 5px solid $default-skin-bg;
|
||||
font-size: 14px;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.item-otherimg {
|
||||
width: 100%;
|
||||
padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service {
|
||||
flex: 1;
|
||||
background: white;
|
||||
color: gray;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.text-kefu {
|
||||
padding-top: 6rpx;
|
||||
}
|
||||
|
||||
.signin {
|
||||
flex: 4;
|
||||
background: $default-skin-bg;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
line-height: 100rpx;
|
||||
}
|
||||
|
||||
.m-footer-desable {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.kefu {
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
left: 50rpx;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.borderNone::before {
|
||||
content: "";
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.u-tap-btn {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 90rpx;
|
||||
}
|
||||
|
||||
.u-go-home {
|
||||
border-radius: 100%;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 1px solid #eee;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 4rpx 8rpx;
|
||||
z-index: 2;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-go-home .iconfont {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
184
activity/market/list.vue
Normal file
184
activity/market/list.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="ispage">
|
||||
<scroll-view scroll-y="true" v-if="Info.length>0" @scrolltolower="scrollbottom" :style="'width:100%;height:' + windowHeight + 'px'">
|
||||
<navigator :url="'/activity/market/detail?id=' + items.activity_id" class="m-activity-item" v-for="(items, index) in Info" :key="index">
|
||||
<image :src="items.activity_rule.activity_image" mode="aspectFill" class="m-activity-img" />
|
||||
<view class="m-activity-info">
|
||||
<view class="m-activity-name">{{items.activity_name}}</view>
|
||||
<label class="iconfont icon-shijian gray"></label>
|
||||
<label class="m-activity-time">{{__('参加时间')}}:{{items.activity_rule.start_join_time}} ~ {{items.activity_rule.end_join_time}}</label>
|
||||
</view>
|
||||
</navigator>
|
||||
|
||||
<view class="m-loading-box">
|
||||
<block v-if="flag">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="m-nullcontent" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲~什么都没有')}}</text>
|
||||
<text>{{__('商家未发布活动~~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="u-top-default" style="bottom:50rpx">
|
||||
<navigator url="/member/member/activity" class="u-back">
|
||||
<label class="iconfont icon-iconcanjiahuodong01"></label>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
page: 1,
|
||||
ispage: false,
|
||||
flag: true,
|
||||
Info: [],
|
||||
windowHeight: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('活动中心')
|
||||
});
|
||||
try {
|
||||
var t = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
windowHeight: t.windowHeight
|
||||
})
|
||||
} catch (n) {
|
||||
console.log(" Do something when catch error")
|
||||
}
|
||||
this.getActivitylist()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
getActivitylist: function() {
|
||||
var params = {
|
||||
page: this.page
|
||||
};
|
||||
let that = this;
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.listsMarketing,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
that.setData({
|
||||
flag: false
|
||||
});
|
||||
that.setData({
|
||||
ispage: true,
|
||||
Info: that.Info.concat(data.items)
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: true
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var e = this;
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
e.setData({
|
||||
type: e.type,
|
||||
page: parseInt(e.page) + 1,
|
||||
rows: 10
|
||||
}), e.getActivitylist()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.m-activity-item {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
margin-bottom: 10rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.m-activity-img {
|
||||
padding: 20rpx;
|
||||
width: 260rpx;
|
||||
height: 200rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.m-activity-info {
|
||||
width: 450rpx;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-activity-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.gray {
|
||||
font-size: 35rpx;
|
||||
display: inline-block;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.m-activity-time {
|
||||
margin-left: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
321
activity/market/signin.vue
Normal file
321
activity/market/signin.vue
Normal file
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="m-activity-item">
|
||||
<image src="EventMainPic" mode="aspectFill" class="m-activity-img" />
|
||||
<view class="m-activity-info">
|
||||
<view class="m-activity-name">{{Title}}</view>
|
||||
<label class="iconfont icon-shijian gray"></label>
|
||||
<label class="m-activity-time">{{EventTime}}</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cells m-cells-form">
|
||||
<view class="m-cell">
|
||||
<view class="m-cell-hd">
|
||||
<label class="u-label">{{__('姓名')}}：</label>
|
||||
</view>
|
||||
<view class="m-cell-bd">
|
||||
<input class="u-input" type="text" :placeholder="__('请输入姓名')" @input="inputname" />
|
||||
</view>
|
||||
<view v-if="!isName" class="m-cell-ft">
|
||||
<icon class="m-icon-warn" type="warn"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell">
|
||||
<view class="m-cell-hd">
|
||||
<label class="u-label">{{__('电话')}}：</label>
|
||||
</view>
|
||||
<view class="m-cell-bd">
|
||||
<input class="u-input" type="number" :placeholder="__('请输入电话')" @input="inputphone" />
|
||||
</view>
|
||||
<view v-if="!isPhone" class="m-cell-ft">
|
||||
<icon class="m-icon-warn" type="warn"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell">
|
||||
<view class="m-cell-hd">
|
||||
<label class="u-label">{{__('公司')}}：</label>
|
||||
</view>
|
||||
<view class="m-cell-bd">
|
||||
<input class="u-input" type="text" :placeholder="__('请输入公司名称')" @input="inputfirm" />
|
||||
</view>
|
||||
<view v-if="!isFirm " class="m-cell-ft">
|
||||
<icon class="m-icon-warn" type="warn"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-cell">
|
||||
<view class="m-cell-hd">
|
||||
<label class="u-label">{{__('职位')}}：</label>
|
||||
</view>
|
||||
<view class="m-cell-bd">
|
||||
<input class="u-input" type="text" :placeholder="__('请输入职位')" @input="inputjob" />
|
||||
</view>
|
||||
<view v-if="!isJob" class="m-cell-ft">
|
||||
<icon class="m-icon-warn" type="warn"></icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn_box">
|
||||
<!--<button class="u-btn u-btn-default" @tap="signinnow">立即报名</button>-->
|
||||
<form report-submit="true" @submit="signinnow">
|
||||
<button class="u-btn u-btn-default" formType="submit">{{source=="activity"?__('立即报名'):__('立即签到')}}</button>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
EventMainPic: "",
|
||||
Title: "",
|
||||
EventTime: "",
|
||||
EventId: "",
|
||||
UserName: "",
|
||||
UserPhone: "",
|
||||
UserCompany: "",
|
||||
UserPosition: "",
|
||||
formId: "",
|
||||
isPhone: true,
|
||||
isName: true,
|
||||
isFirm: true,
|
||||
isJob: true,
|
||||
source: "",
|
||||
isTmplMsg: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
|
||||
console.info(options)
|
||||
if (options.source == this.StateCode.MARKRTING_ACTIVITY_JOIN) {
|
||||
var t = $.parseJSON(options.val);
|
||||
this.setData({
|
||||
EventMainPic: t.img,
|
||||
Title: t.title,
|
||||
EventTime: t.time,
|
||||
EventId: t.id,
|
||||
source: options.source
|
||||
}), wx.setNavigationBarTitle({
|
||||
title: t.title + $.__("报名页")
|
||||
})
|
||||
} else if (options.source == this.StateCode.MARKRTING_ACTIVITY_JOIN_BY_QRCODE) {
|
||||
var n = this;
|
||||
|
||||
$.isNull(this.userInfo) ? this.getUserInfo(function(user) {
|
||||
if (user) {
|
||||
n.setData({
|
||||
EventId: options.eventId,
|
||||
source: options.source
|
||||
}), n.initData()
|
||||
}
|
||||
},
|
||||
options.uid) : (n.setData({
|
||||
EventId: options.eventId,
|
||||
source: options.source
|
||||
}), n.initData())
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
initData: function() {
|
||||
var params = {
|
||||
activity_id: this.EventId
|
||||
},
|
||||
that = this;
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.getMarketing,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.setData({
|
||||
EventMainPic: data.activity_rule.activity_image,
|
||||
Title: data.activity_name,
|
||||
// EventTime : e.Info.EventTime
|
||||
});
|
||||
wx.setNavigationBarTitle({
|
||||
title: that.Title + $.__("报名页")
|
||||
});
|
||||
// e.Info.IsJoin != 0 && (e.Info.IsJoin == 1 ? wx.navigateTo({url: "../activitycheckin/activitycheckin?eventId=" + that.EventId}) : e.Info.IsJoin == 2 && wx.navigateTo({url: "/activity/market/detail?id=" + that.EventId})))
|
||||
|
||||
} else {
|
||||
$.alert("出错啦")
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
inputname: function(e) {
|
||||
this.setData({
|
||||
UserName: e.detail.value
|
||||
}), $.isNull(e.detail.value) ? this.setData({
|
||||
isName: false
|
||||
}) : this.setData({
|
||||
isName: true
|
||||
})
|
||||
},
|
||||
inputphone: function(e) {
|
||||
this.setData({
|
||||
UserPhone: e.detail.value
|
||||
});
|
||||
$.isNull(e.detail.value) ? this.setData({
|
||||
isPhone: false
|
||||
}) : this.setData({
|
||||
isPhone: true
|
||||
});
|
||||
},
|
||||
inputfirm: function(e) {
|
||||
this.setData({
|
||||
UserCompany: e.detail.value
|
||||
}), $.isNull(e.detail.value) ? this.setData({
|
||||
isFirm: false
|
||||
}) : this.setData({
|
||||
isFirm: true
|
||||
})
|
||||
},
|
||||
inputjob: function(e) {
|
||||
this.setData({
|
||||
UserPosition: e.detail.value
|
||||
}), $.isNull(e.detail.value) ? this.setData({
|
||||
isJob: false
|
||||
}) : this.setData({
|
||||
isJob: true
|
||||
})
|
||||
},
|
||||
signinnow: function(e) {
|
||||
$.isNull(this.UserName) && this.setData({
|
||||
isName: false
|
||||
}), $.isNull(this.UserPhone) && this.setData({
|
||||
isPhone: false
|
||||
}), $.isNull(this.UserCompany) && this.setData({
|
||||
isFirm: false
|
||||
}), $.isNull(this.UserPosition) && this.setData({
|
||||
isJob: false
|
||||
}), this.setData({
|
||||
formId: e.detail.formId
|
||||
});
|
||||
if (this.isName && this.isPhone && this.isJob && this.isFirm) {
|
||||
var params = {
|
||||
activity_id: this.EventId,
|
||||
user_name: this.UserName,
|
||||
user_phone: this.UserPhone,
|
||||
user_company: this.UserCompany,
|
||||
user_position: this.UserPosition
|
||||
},
|
||||
that = this;
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.doMarketing,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
if (data.type == that.StateCode.MARKRTING_ACTIVITY_JOIN) {
|
||||
that.isTmplMsg && that.sendMessage(), $.alert($.__("报名成功！"));
|
||||
setTimeout(function() {
|
||||
$.navigateBack(1, function() {})
|
||||
}, 1e3)
|
||||
} else if (data.type == that.StateCode.MARKRTING_ACTIVITY_JOIN_BY_QRCODE) {
|
||||
$.alert($.__("签到成功！")), setTimeout(function() {
|
||||
wx.navigateTo({
|
||||
url: "../activitycheckin/activitycheckin?eventId=" + n.EventId
|
||||
})
|
||||
},
|
||||
1e3)
|
||||
}
|
||||
|
||||
} else {
|
||||
$.alert(msg)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
sendMessage: function() {
|
||||
/* todo 微信模板消息
|
||||
var e = {
|
||||
api: activityapi.EventJoinWXMessage,
|
||||
pages: "pages/activity/activity?id=" + this.EventId,
|
||||
formId: this.formId,
|
||||
WeiXinOpenId: this.userInfo.openId,
|
||||
value: {
|
||||
EventId: this.EventId,
|
||||
user_id: this.userInfo.user_id
|
||||
}
|
||||
};
|
||||
$.sendTpl(e)*/
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
|
||||
.m-activity-item {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.m-activity-img {
|
||||
padding: 20rpx;
|
||||
width: 260rpx;
|
||||
height: 200rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.m-activity-info {
|
||||
width: 450rpx;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-activity-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.gray {
|
||||
font-size: 35rpx;
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.m-activity-time {
|
||||
margin-left: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.btn_box {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.u-label {
|
||||
width: 100rpx;
|
||||
}
|
||||
</style>
|
||||
507
activity/plantform/secondlist.vue
Normal file
507
activity/plantform/secondlist.vue
Normal file
@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<view v-if="loadPageFlag" :style="{background:(BgConfig.BackgroundObj.type==1?BgConfig.BackgroundObj.bgColor:('url('+BgConfig.BackgroundObj.path+') no-repeat '+ BgConfig.BackgroundObj.pathColor))}">
|
||||
<view>
|
||||
<view v-if="false" :style="'background-color: ' + PageNav.window.navigationBarBackgroundColor + ';padding-bottom: 20rpx;'">
|
||||
<scroll-view id="tab_tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft" :scroll-into-view="viewIndex" :style="'border-bottom:0px;height: 140rpx;'">
|
||||
<view v-for="(tab, index) in tabBars" :key="tab.id" class="swiper-tab-list time-block" :class="tabIndex==index ? 'active' : ''" :id="'tab_' + tab.pa_id" :data-current="index" :data-pa_id="tab.pa_id" :data-pa_state="tab.pa_state" :data-pa_starttime="tab.pa_starttime" :data-pa_endtime="tab.pa_endtime" @tap="tapTab" style="width: 20%;text-align: center;">
|
||||
<view class="box-item" v-if="tab.pa_state == 1">
|
||||
<text class="time time-hl">{{tab.pa_name}}</text>
|
||||
<view class="text text-hl-box">
|
||||
<text class="text text-hl">{{__('抢购中')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-item" v-else-if="tab.pa_state == 3">
|
||||
<text class="time">{{tab.pa_name}}</text>
|
||||
<view class="text">
|
||||
<text class="text">{{__('已结束')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-item" v-else-if="tab.pa_state == 2">
|
||||
<text class="time">{{tab.pa_name}}</text>
|
||||
<view class="text">
|
||||
<text class="text">{{__('即将开始')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box-item" v-else :data-pa_id="tab.pa_id">
|
||||
<text class="time">{{tab.pa_name}}</text>
|
||||
<view class="text">
|
||||
<text class="text">{{__('已开抢')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="time-current-box">
|
||||
<actibity-countdown :timer="(pa_endtime)" :Type="1" v-if="pa_state == 1 || pa_state == 4"></actibity-countdown>
|
||||
<actibity-countdown :timer="(pa_starttime)" :Type="0" v-else-if="pa_state == 2"></actibity-countdown>
|
||||
<text v-else>{{__('已结束')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<diy :BgConfig="BgConfig" :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav" :loadPageFlag="loadPageFlag"></diy>
|
||||
|
||||
<!--
|
||||
<view style="background-color: #F7F7F7;">
|
||||
<view class="for-you-remmcond">
|
||||
<label class="point">·</label><label class="pointd">·</label><label class="point">·</label>
|
||||
<text class="you-remmcond">为你推荐</text>
|
||||
<label class="point">·</label><label class="pointd">·</label><label class="point">·</label>
|
||||
</view>
|
||||
<view v-for="(item, i) in pdlist" :key="i" >
|
||||
<view class="product-item" v-if="i==0" :data-item_id="item.item_id" @click="gotopage">
|
||||
|
||||
<image class="product-item-img" lazy-load :src="(item.ProductPic)" v-if="item.ProductPic" />
|
||||
|
||||
<text class="product-item-name" style="text-align: left;" v-if="item.SalesName">
|
||||
{{item.SalesName}}
|
||||
</text>
|
||||
|
||||
<view class="product-item-market" style="text-align: left;padding-top: 90rpx;padding-left:300rpx;" v-if="item.MarketPrice">
|
||||
市场价：{{item.MarketPrice}}
|
||||
</view>
|
||||
|
||||
<view class="product-item-unit" style="text-align: left;padding-left:300rpx">
|
||||
{{__('￥')}}{{item.ItemSalePrice}}
|
||||
|
||||
<text class="buy" style="float: right;" v-if="item.item_quantity != 0 && pa_state == 1" :data-item_id="item.item_id"
|
||||
:data-item_name="item.SalesName" @click.stop="buynow">立即购买</text>
|
||||
<text class="buy" style="float: right;" v-else-if="item.item_quantity != 0 && pa_state == 2">{{__('即将开始')}}</text>
|
||||
<text class="buy" style="float: right;" v-else>已售完</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="product-item" style="margin-top: 20rpx;" v-else :data-item_id="item.item_id" @click="gotopage">
|
||||
|
||||
<image class="product-item-img" lazy-load :src="(item.ProductPic)" v-if="item.ProductPic" />
|
||||
|
||||
<text class="product-item-name" style="text-align: left;" v-if="item.SalesName">
|
||||
{{item.SalesName}}
|
||||
</text>
|
||||
|
||||
<view class="product-item-market" style="text-align: left;padding-top: 90rpx;padding-left:300rpx;" v-if="item.MarketPrice">
|
||||
市场价：{{item.MarketPrice}}
|
||||
</view>
|
||||
|
||||
<view class="product-item-unit" style="text-align: left;padding-left:300rpx">
|
||||
{{__('￥')}}{{item.ItemSalePrice}}
|
||||
|
||||
<text class="buy" style="float: right;" v-if="item.item_quantity != 0 && pa_state == 1" :data-item_id="item.item_id"
|
||||
:data-item_name="item.SalesName" @click.stop="buynow">立即购买</text>
|
||||
<text class="buy" style="float: right;" v-else-if="pa_state == 2">{{__('即将开始')}}</text>
|
||||
<text class="buy" style="float: right;" v-else-if="item.item_quantity == 0">已售完</text>
|
||||
<text class="buy" style="float: right;" v-else :data-item_id="item.item_id" :data-item_name="item.SalesName"
|
||||
@click.stop="buynow">立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
-->
|
||||
|
||||
<guess-you-like ref="guessYouLike" :options="{pa_id:pa_id, activity_type_ids:[1103]}" :isShowFilter='true' :isFilterTop0="true" v-if="true||pa_id>0"></guess-you-like>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import diy from '../../components/themes/diy.vue';
|
||||
import uniTag from '../../components/uni-tag/uni-tag.vue';
|
||||
import actibityCountdown from '../../components/actibity-countdown.vue';
|
||||
import guessYouLike from '@/components/product-list.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
|
||||
pageId: '',
|
||||
PageNav: {
|
||||
window: {
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "",
|
||||
"backgroundColor": "#f8f8f8",
|
||||
"backgroundTextStyle": "dark"
|
||||
}
|
||||
},
|
||||
loadPageFlag: false,
|
||||
PageContent: [],
|
||||
BgConfig: {
|
||||
BackgroundObj: {
|
||||
type: 1,
|
||||
bgColor: '#ffffff',
|
||||
"pathColor": "#f8f8f8",
|
||||
"path": ""
|
||||
}
|
||||
},
|
||||
shareImg: "",
|
||||
shareTitle: "",
|
||||
|
||||
tabBars: [],
|
||||
scrollLeft: 0,
|
||||
tabIndex: 0,
|
||||
viewIndex: '',
|
||||
pa_id: 0,
|
||||
pa_starttime: 0,
|
||||
pa_endtime: 0,
|
||||
pa_state: 0,
|
||||
};
|
||||
},
|
||||
|
||||
components: {
|
||||
uniTag,
|
||||
diy,
|
||||
actibityCountdown,
|
||||
guessYouLike
|
||||
},
|
||||
|
||||
computed: mapState([
|
||||
'Config',
|
||||
'StateCode',
|
||||
'notice',
|
||||
'plantformInfo',
|
||||
'shopInfo',
|
||||
'userInfo',
|
||||
'hasLogin'
|
||||
]),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
this.setData({
|
||||
options: options
|
||||
});
|
||||
|
||||
that.$.setNavigationBarTitle({
|
||||
title: options.pname || options.cname || that.__('限时秒杀')
|
||||
});
|
||||
|
||||
that.getDivModel(false);
|
||||
|
||||
/*
|
||||
that.$.request({
|
||||
url: this.Config.URL.product.list_times,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
|
||||
that.setData({
|
||||
tabBars: data,
|
||||
})
|
||||
for (var j = 0, lenJ = data.length; j < lenJ; ++j) {
|
||||
|
||||
if (data[j].pa_state == 1) {
|
||||
that.setData({
|
||||
pa_id: data[j].pa_id,
|
||||
pa_starttime: data[j].pa_starttime,
|
||||
pa_endtime: data[j].pa_endtime,
|
||||
pa_state: data[j].pa_state,
|
||||
tabIndex: j
|
||||
});
|
||||
|
||||
that.viewIndex = "";
|
||||
//设置viewIndex值，使聊天滚动到底部
|
||||
that.$nextTick(() => {
|
||||
that.viewIndex = "tab_" + data[j].pa_id;
|
||||
})
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.$refs.guessYouLike.scrollbottom();
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
async tapTab(e) { //点击tab-bar
|
||||
let tabIndex = parseInt(e.currentTarget.dataset.current);
|
||||
this.tabIndex = tabIndex;
|
||||
|
||||
this.setData({
|
||||
pa_id: e.currentTarget.dataset.pa_id,
|
||||
pa_starttime: e.currentTarget.dataset.pa_starttime,
|
||||
pa_endtime: e.currentTarget.dataset.pa_endtime,
|
||||
pa_state: e.currentTarget.dataset.pa_state
|
||||
})
|
||||
},
|
||||
|
||||
//读取diy内容
|
||||
getDivModel: function(force_refresh) {
|
||||
var that = this,
|
||||
params = {
|
||||
page_type: 'page_secondkill'
|
||||
};
|
||||
|
||||
let site_id = that.$.getStorageSync('site_id');
|
||||
|
||||
if (site_id) {
|
||||
params['site_id'] = site_id;
|
||||
}
|
||||
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.index_app,
|
||||
data: params,
|
||||
ajaxCache: {
|
||||
timeout: that.Config.CACHE_EXPIRE,
|
||||
forceRefresh: force_refresh
|
||||
},
|
||||
success: function(data, status, msg, code) {
|
||||
uni.stopPullDownRefresh()
|
||||
that.setData({
|
||||
loadPageFlag: true
|
||||
});
|
||||
|
||||
that.setData({
|
||||
pageId: data.page_id,
|
||||
PageContent: that.$.parseJSON(data.page_code),
|
||||
BgConfig: that.$.parseJSON(data.page_config),
|
||||
PageNav: that.$.parseJSON(data.page_nav),
|
||||
shareImg: data.page_share_image,
|
||||
shareTitle: data.page_share_title
|
||||
});
|
||||
|
||||
if (that.PageNav.window.navigationBarTextStyle == 'black') {
|
||||
that.PageNav.window.navigationBarTextStyle = '#000000'
|
||||
}
|
||||
|
||||
if (that.PageNav.window.navigationBarTextStyle == 'white') {
|
||||
that.PageNav.window.navigationBarTextStyle = '#ffffff'
|
||||
}
|
||||
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: that.PageNav.window.navigationBarTextStyle,
|
||||
backgroundColor: that.PageNav.window.navigationBarBackgroundColor
|
||||
})
|
||||
|
||||
if (data.page_name) {
|
||||
that.$.setNavigationBarTitle({
|
||||
title: data.page_name
|
||||
});
|
||||
}
|
||||
|
||||
if (that.hasLogin && data.im_enable) {
|
||||
|
||||
var perm_id = that.$.getStorageSync('uid');
|
||||
var perm_key = that.$.getStorageSync('ukey');
|
||||
|
||||
let chat_url = that.$.sprintf(
|
||||
"%s/wap/im.html?from=app&item_id=%s&user_other_id=%s&puid=%s&name=%s&avatar=%s&uid=%s&ukey=%s", that.Config.fileBasePath,
|
||||
'', data.im_user_id, data.puid, encodeURIComponent('管理员'), encodeURIComponent(that.Config.SiteLogo), perm_id, encodeURIComponent(perm_key))
|
||||
|
||||
that.setData({
|
||||
chatUrl: chat_url
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../styles/_variables.scss';
|
||||
@import '../../styles/layout.scss';
|
||||
|
||||
.time-block {
|
||||
.time {
|
||||
width: 74rpx;
|
||||
height: 21rpx;
|
||||
line-height: 28rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: Helvetica;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 140, 151, 1);
|
||||
}
|
||||
|
||||
.box-item {
|
||||
height: 140rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.time-hl {
|
||||
font-weight: bold;
|
||||
/*color: rgba(255, 255, 255, 1);*/
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 23rpx;
|
||||
line-height: 23rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 140, 151, 1);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.text-hl-box {
|
||||
width: 102rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 18rpx;
|
||||
margin: 0 auto;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.text-hl {
|
||||
color: rgba(231, 34, 52, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.uni-swiper-tab .swiper-tab-list.active .text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.uni-swiper-tab .swiper-tab-list.active .text-hl {
|
||||
color: rgba(231, 34, 52, 1);
|
||||
}
|
||||
|
||||
.uni-swiper-tab .swiper-tab-list.active .time {
|
||||
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.time-current-box {
|
||||
width: 710rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 8rpx;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.for-you-remmcond {
|
||||
width: 710rpx;
|
||||
height: 100rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx 8rpx 0rpx 0rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding-top: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.you-remmcond {
|
||||
width: 125rpx;
|
||||
height: 31rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.point {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
color: #FF8691;
|
||||
// background: #FF8691;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pointd {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
color: #E72234;
|
||||
// background: #E72234;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
width: 710rpx;
|
||||
height: 300rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 0rpx 8rpx 8rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.product-item-img {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 8px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.product-item-name {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
padding-left: 40rpx;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
.product-item-market {
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
.product-item-unit {
|
||||
font-size: 34rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FF5A00;
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 140rpx;
|
||||
height: 52rpx;
|
||||
background: linear-gradient(90deg, #EF5967, #D80F22);
|
||||
border-radius: 26rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.u-pa .m-tab {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
835
activity/smashgoldeneggs/detail.vue
Normal file
835
activity/smashgoldeneggs/detail.vue
Normal file
@ -0,0 +1,835 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="(isPage)">
|
||||
<view v-if="(outdated)" class="box">
|
||||
<view class="remainingcount">您还有{{RemainingCount}}次机会</view>
|
||||
<view class="egg-box">
|
||||
<view class="hammer" animation="(animationData)"></view>
|
||||
<view class="egg-top">
|
||||
<view class="egg (move?'move1':'')" @click="knock">
|
||||
<image lazy-load :src="(ImgPath) + 'goldenEggs' + (selectImg==1?'-1':'') + '.png'" mode="widthFix" :data-num="1"></image>
|
||||
</view>
|
||||
<view class="egg (move?'move2':'')" @click="knock">
|
||||
<image lazy-load :src="(ImgPath) + 'goldenEggs' + (selectImg==2?'-1':'') + '.png'" mode="widthFix" :data-num="2"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="egg-bottom">
|
||||
<view class="egg (move?'move3':'')" @click="knock">
|
||||
<image lazy-load :src="(ImgPath) + 'goldenEggs' + (selectImg==3?'-1':'') + '.png'" mode="widthFix" :data-num="3"></image>
|
||||
</view>
|
||||
<view class="egg (move?'move4':'')" @click="knock">
|
||||
<image lazy-load :src="(ImgPath) + 'goldenEggs' + (selectImg==4?'-1':'') + '.png'" mode="widthFix" :data-num="4"></image>
|
||||
</view>
|
||||
<view class="egg (move?'move5':'')" @click="knock">
|
||||
<image lazy-load :src="(ImgPath) + 'goldenEggs' + (selectImg==5?'-1':'') + '.png'" mode="widthFix" :data-num="5"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="winner-box">
|
||||
<view class="winner-title">本期中奖名单</view>
|
||||
<image lazy-load :src="(ImgPath) + 'tip-1.png'" class="winner-img" mode="widthFix"></image>
|
||||
<view class="winner-list">
|
||||
<block v-if="(DrawInfo.winner_rows.items.length >0)">
|
||||
<swiper autoplay="true" interval="4000" duration="2000" vertical="false" circular="true" class="m-luckylist">
|
||||
<swiper-item v-for="(items, i) in rows" :key="i">
|
||||
<block v-for="(item, j) in DrawInfo.winner_rows.items" :key="j">
|
||||
<view v-if="(j>=(i*5) && j<=((i+1)*5))" class="m-winner-item ">{{item.user_nickname}}砸中
|
||||
<label class="prize-name">{{item.awards_name}}</label>
|
||||
</view>
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
<view class="m-winner-item" style="background: #FEE39F;" v-else>暂无中奖名单数据</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rule-box">
|
||||
<image lazy-load :src="(ImgPath) + 'tip-2.png'" class="winner-img" mode="widthFix"></image>
|
||||
<wxParse :content="DrawInfo.activity_rule.activity_intro + ''" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="activity-outdated" v-else>
|
||||
<view class="m-nullcontent">
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>亲~您来晚了哦</text>
|
||||
<text>该砸金蛋活动已经失效啦~</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
|
||||
<view class="u-tap-btn">
|
||||
<navigator url="/member/member/prize?category=2" class="u-go-home">
|
||||
<view class="iconfont icon-iconcanjiahuodong01"></view>
|
||||
</navigator>
|
||||
<view class="red-dot"></view>
|
||||
<navigator url="/pages/index/index" open-type="switchTab" class="u-go-home">
|
||||
<view class="iconfont icon-shouyeshouye" style="font-size:50rpx;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="mskprize" v-if="(clickmsk)" @click="cancelprize">
|
||||
<view class="m-result-box bounceIn animated" @click.stop="nothing" v-if="(PrizeResult.index >= 0)">
|
||||
<view class="m-result-cancel" @click="cancelprize">✕</view>
|
||||
|
||||
<block v-if="PrizeResult.awards_enable">
|
||||
<view class="m-success-text">{{__('恭喜你获得了')}}</view>
|
||||
</block>
|
||||
<block v-if="!PrizeResult.awards_enable">
|
||||
<view class="m-success-text">{{__('未中奖')}}</view>
|
||||
</block>
|
||||
|
||||
<image lazy-load :src="(PrizeResult.awards_image)" class="m-success-img" />
|
||||
<view class="m-success-name">{{PrizeResult.prize}}</view>
|
||||
<view class="m-success-name">{{PrizeResult.awards_title}}</view>
|
||||
<view class="m-success-bottom">
|
||||
<navigator url="/member/member/prize?category=2" class="succes-checkprice">查看奖品</navigator>
|
||||
<view class="succes-continue" @click="cancelprize">继续抽奖</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-result-box wobble animated" @click.stop="nothing" v-else>
|
||||
<view class="m-result-cancel" @click="cancelprize">✕</view>
|
||||
<view class="m-failimg-bg">
|
||||
<image lazy-load src="https://static.lancerdt.com/xcxfile/appicon/img/nothing.png" class="m-fail-img" />
|
||||
</view>
|
||||
<view class="m-fail-name">{{DrawInfo.LosingDesc}}</view>
|
||||
<view class="m-fail-button" @click="cancelprize">继续抽奖</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mskshare" v-if="(clickshare)" @click="cancelshare">
|
||||
<!-- <image lazy-load src="https://static.lancerdt.com/xcxfile/appicon/images/share.png" class="share-oncemore" mode="widthFix"></image> -->
|
||||
<view class="share-text">
|
||||
<view>你今天已经没有砸蛋机会了</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import wxParse from '@/components/u-parse/u-parse.vue'
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
options: {},
|
||||
click: false,
|
||||
clickmsk: false,
|
||||
clickshare: false,
|
||||
drawdesc: [],
|
||||
DrawInfo: {},
|
||||
RemainingCount: 0,
|
||||
PrizeResult: {},
|
||||
rows: [],
|
||||
Coupons: [],
|
||||
isCancelSuccess: true,
|
||||
isCancel: true,
|
||||
CouponAmount: 0,
|
||||
user_is_new: 0,
|
||||
isPage: false,
|
||||
outdated: false,
|
||||
ImgPath: "",
|
||||
animationData: {},
|
||||
selectImg: 0,
|
||||
move: false,
|
||||
activity_id: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown,
|
||||
wxParse
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('砸金蛋')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
that.setData({
|
||||
activity_id: options.activity_id || 0,
|
||||
options: options
|
||||
});
|
||||
|
||||
that.getPlantformInfo(function(plantformInfo) {
|
||||
$.isNull(that.userInfo) ? that.getUserInfo(function() {
|
||||
that.setData({
|
||||
user_is_new: that.userInfo.user_is_new,
|
||||
CouponAmount: that.userInfo.CouponAmount
|
||||
}), that.initData()
|
||||
},
|
||||
options.uid) : that.initData()
|
||||
});
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
var e = $.createAnimation({
|
||||
duration: 500,
|
||||
timingFunction: "ease"
|
||||
});
|
||||
this.animation = e, this.animation.top(0).left(0).step(), this.setData({
|
||||
animationData: this.animation.export()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
knock: function(e) {
|
||||
if (!this.click) {
|
||||
this.setData({
|
||||
click: true
|
||||
});
|
||||
if (this.RemainingCount > 0) {
|
||||
this.getPosition();
|
||||
} else if (this.RemainingCount == 0) {
|
||||
this.setData({
|
||||
clickshare: true
|
||||
});
|
||||
return
|
||||
}
|
||||
this.animation.top(e.changedTouches[0].pageY - 375).left(e.changedTouches[0].pageX - 75).step(), this.setData({
|
||||
animationData: this.animation.export()
|
||||
}), setTimeout(function() {
|
||||
this.animation.translateX(-25).rotate(-120).step(), this.setData({
|
||||
animationData: this.animation.export()
|
||||
})
|
||||
}.bind(this), 500), setTimeout(function() {
|
||||
this.animation.translateX(25).rotate(60).step(), this.setData({
|
||||
animationData: this.animation.export()
|
||||
})
|
||||
}.bind(this), 1e3), setTimeout(function() {
|
||||
this.setData({
|
||||
selectImg: e.target.dataset.num
|
||||
})
|
||||
}.bind(this), 1200)
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage: function() {
|
||||
var e = this;
|
||||
return this.setData({
|
||||
clickshare: false,
|
||||
click: false
|
||||
}), {
|
||||
title: "我已经中奖啦，你也赶紧来砸金蛋吧~",
|
||||
desc: "幸运砸金蛋，快来参与吧~",
|
||||
path: "/activity/smashgoldeneggs/smashgoldeneggs?uid=" + this.userInfo.user_id,
|
||||
success: function(t) {
|
||||
e.sharefriend()
|
||||
}
|
||||
}
|
||||
},
|
||||
sharefriend: function() {
|
||||
var e = {
|
||||
Category: 2
|
||||
},
|
||||
t = this;
|
||||
$.xsr1($.makeUrl(activityapi.ShareLuckyDraw, e), function(e) {
|
||||
e.Code == 0 && e.Info != null && (t.setData({
|
||||
RemainingCount: t.RemainingCount
|
||||
}), t.initData())
|
||||
})
|
||||
},
|
||||
|
||||
initData: function() {
|
||||
let that = this;
|
||||
// 2砸金蛋，1大转盘
|
||||
var params = {
|
||||
activity_type: 2,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
||||
activity_id: this.activity_id
|
||||
};
|
||||
|
||||
// 等级规则
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsLottery,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
isPage: true,
|
||||
ImgPath: that.plantformInfo.AppIconPath
|
||||
});
|
||||
//console.log(that.plantformInfo.AppIconPath);
|
||||
if (status == 200) {
|
||||
that.setData({
|
||||
DrawInfo: data,
|
||||
RemainingCount: data.remaining_count,
|
||||
outdated: data.outdated,
|
||||
activity_id: data.activity_id
|
||||
});
|
||||
if (that.DrawInfo.winner_rows.items.length > 0) {
|
||||
var n = that.DrawInfo.winner_rows.items.length % 5 > 0 ? parseInt(that.DrawInfo.winner_rows.items.length /
|
||||
5 + 1) : that.DrawInfo.winner_rows.items.length / 5,
|
||||
r = [];
|
||||
for (var i = 0; i < n; i++) {
|
||||
r.push(i);
|
||||
}
|
||||
that.setData({
|
||||
rows: r
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
if ($.isNull(data.activity_rule.activity_intro)) {
|
||||
|
||||
this.drawdesc = data.activity_rule.activity_intro.replace(/\\/g, "").replace(/<img/g,
|
||||
"<img style=\"display:none;\"");
|
||||
|
||||
this.setData({
|
||||
drawdesc: drawdesc
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
outdated: false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getPosition: function() {
|
||||
var params = {
|
||||
activity_id: this.activity_id
|
||||
},
|
||||
t = this;
|
||||
// 等级规则
|
||||
$.request({
|
||||
url: this.Config.URL.user.doLottery,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
t.setData({
|
||||
PrizeResult: data
|
||||
})
|
||||
setTimeout(function() {
|
||||
t.setData({
|
||||
clickmsk: true
|
||||
});
|
||||
},
|
||||
2e3);
|
||||
} else {
|
||||
($.alert("抽奖失败"), t.setData({
|
||||
click: false
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
cancelprize: function() {
|
||||
this.animation.top(0).left(0).translateX(0).rotate(0).step(), this.setData({
|
||||
clickmsk: false,
|
||||
selectImg: 0,
|
||||
animationData: this.animation.export(),
|
||||
move: true
|
||||
});
|
||||
var e = this;
|
||||
setTimeout(function() {
|
||||
e.setData({
|
||||
move: false
|
||||
})
|
||||
},
|
||||
1e3), setTimeout(function() {
|
||||
e.setData({
|
||||
click: false
|
||||
})
|
||||
},
|
||||
1200), this.initData()
|
||||
},
|
||||
cancelshare: function() {
|
||||
this.setData({
|
||||
clickshare: false
|
||||
}), this.setData({
|
||||
prize: -1,
|
||||
times: 0,
|
||||
click: false
|
||||
})
|
||||
},
|
||||
nothing: function() {},
|
||||
doReceive: function() {
|
||||
this.cancel(), this.userReceiveCoupon()
|
||||
},
|
||||
cancel: function() {
|
||||
this.setData({
|
||||
isCancel: false
|
||||
})
|
||||
},
|
||||
cancelsuccess: function() {
|
||||
this.setData({
|
||||
isCancelSuccess: true
|
||||
})
|
||||
},
|
||||
innertouch: function() {},
|
||||
userReceiveCoupon: function() {
|
||||
var params = {
|
||||
activity_id: this.activity_id,
|
||||
activity_type: 2,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY
|
||||
};
|
||||
var t = this;
|
||||
$.request({
|
||||
url: this.Config.URL.user.listsLotteryHistory,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
t.setData({
|
||||
isCancelSuccess: false,
|
||||
Coupons: data.items
|
||||
});
|
||||
} else {
|
||||
$.alert(msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
page {
|
||||
background: url(https://static.lancerdt.com/xcxfile/appicon/smashingEggs-bg.png) center top no-repeat #cb1944;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-outdated {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.remainingcount {
|
||||
position: relative;
|
||||
margin-top: 435rpx;
|
||||
color: yellow;
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.egg-box {
|
||||
margin-top: 120rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.egg {
|
||||
width: 230rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.egg image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hammer {
|
||||
position: absolute;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
background: url(https://static.lancerdt.com/xcxfile/appicon/Hammer.png) center top no-repeat;
|
||||
background-size: cover;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.egg-top {
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.winner-box {
|
||||
background: #FEE39F;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 130rpx;
|
||||
}
|
||||
|
||||
.winner-title {
|
||||
text-align: center;
|
||||
color: $default-skin-bg;
|
||||
font-size: 28rpx;
|
||||
line-height: 70rpx;
|
||||
height: 70rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.winner-img {
|
||||
width: 150rpx;
|
||||
position: absolute;
|
||||
left: -12rpx;
|
||||
top: 8rpx;
|
||||
}
|
||||
|
||||
.winner-list {
|
||||
max-height: 300rpx;
|
||||
border: 1px solid $default-skin-bg;
|
||||
margin: 0 20rpx;
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m-winner-item {
|
||||
height: 50rpx;
|
||||
color: $default-skin-bg;
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-winner-item:nth-child(odd) {
|
||||
background: #FAD97C;
|
||||
}
|
||||
|
||||
.m-winner-item:nth-child(even) {
|
||||
background: #FEE39F;
|
||||
}
|
||||
|
||||
.prize-name {
|
||||
position: absolute;
|
||||
left: 380rpx;
|
||||
}
|
||||
|
||||
.rule-box {
|
||||
background: #FEE39F;
|
||||
position: relative;
|
||||
margin-top: 20rpx;
|
||||
padding: 70rpx 30rpx 30rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: $default-skin-bg;
|
||||
}
|
||||
|
||||
.mskprize {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mskshare {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.share-oncemore {
|
||||
width: 700rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.share-text {
|
||||
margin: 0 auto;
|
||||
font-size: 40rpx;
|
||||
line-height: 80rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 45%
|
||||
}
|
||||
|
||||
.m-result-box {
|
||||
width: 500rpx;
|
||||
height: 600rpx;
|
||||
background: #DB384B;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.m-result-cancel {
|
||||
position: absolute;
|
||||
right: 25rpx;
|
||||
top: 15rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.m-success-text {
|
||||
line-height: 80rpx;
|
||||
margin-top: 50rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.m-success-img {
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
background: white;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.m-success-name {
|
||||
color: #FFAC33;
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.m-success-bottom {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
line-height: 65rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.succes-continue {
|
||||
height: 65rpx;
|
||||
width: 200rpx;
|
||||
background: #FFCA3A;
|
||||
display: inline-block;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.succes-checkprice {
|
||||
height: 65rpx;
|
||||
width: 200rpx;
|
||||
background: white;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
border-radius: 5rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.m-failimg-bg {
|
||||
width: 350rpx;
|
||||
height: 350rpx;
|
||||
border-radius: 175rpx;
|
||||
background-color: rgba(255, 255, 255, 0.10);
|
||||
margin: 40rpx auto 20rpx;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.m-fail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 150rpx;
|
||||
background-color: rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.m-fail-name {
|
||||
font-size: 26rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.m-fail-button {
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
line-height: 65rpx;
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
background: #FFCA3A;
|
||||
border-radius: 5rpx;
|
||||
font-size: 28rpx;
|
||||
left: 100rpx;
|
||||
}
|
||||
|
||||
.red-dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: $default-skin-bg;
|
||||
position: fixed;
|
||||
bottom: 220rpx;
|
||||
right: 20rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.u-tap-btn {
|
||||
position: fixed;
|
||||
right: 20rpx;
|
||||
bottom: 40rpx;
|
||||
}
|
||||
|
||||
.u-go-home {
|
||||
border-radius: 100%;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 1px solid #eee;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 2;
|
||||
opacity: 0.8;
|
||||
line-height: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.u-go-home .iconfont {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
|
||||
.move1 {
|
||||
position: relative;
|
||||
animation: mymove1 1s;
|
||||
-webkit-animation: mymove1 1s reverse;
|
||||
}
|
||||
|
||||
@keyframes mymove1 {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 230rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove1 {
|
||||
from {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 230rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.move2 {
|
||||
position: relative;
|
||||
animation: mymove2 1s reverse;
|
||||
-webkit-animation: mymove2 1s reverse;
|
||||
}
|
||||
|
||||
@keyframes mymove2 {
|
||||
from {
|
||||
top: 0px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
top: 285rpx;
|
||||
left: 115rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove2 {
|
||||
from {
|
||||
top: 0px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
top: 285rpx;
|
||||
left: 115rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.move3 {
|
||||
position: relative;
|
||||
animation: mymove3 1s reverse;
|
||||
-webkit-animation: mymove3 1s reverse;
|
||||
}
|
||||
|
||||
@keyframes mymove3 {
|
||||
from {
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 285rpx;
|
||||
left: 115rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove3 {
|
||||
from {
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 285rpx;
|
||||
left: 115rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.move4 {
|
||||
position: relative;
|
||||
animation: mymove4 1s reverse;
|
||||
-webkit-animation: mymove4 1s reverse;
|
||||
}
|
||||
|
||||
@keyframes mymove4 {
|
||||
from {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
right: 230rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove4 {
|
||||
from {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
right: 230rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.move5 {
|
||||
position: relative;
|
||||
animation: mymove5 1s reverse;
|
||||
-webkit-animation: mymove5 1s reverse;
|
||||
}
|
||||
|
||||
@keyframes mymove5 {
|
||||
from {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
right: 230rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mymove5 {
|
||||
from {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
to {
|
||||
right: 230rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
430
activity/smashgoldeneggs/list.vue
Normal file
430
activity/smashgoldeneggs/list.vue
Normal file
@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="m-product-all">
|
||||
<view class="m-tab">
|
||||
<view class="m-navbar">
|
||||
<view :class="'m-navbar-item ' + (tapindex==1?'m-navbar-item-on':'')" @click="groupLists">
|
||||
{{__('进行中')}}
|
||||
</view>
|
||||
<view :class="'m-navbar-item ' + (tapindex==2?'m-navbar-item-on':'')" @click="toBeGroupLists">
|
||||
{{__('即将开始')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="(tapindex==1?'':'hide')" style="font-size:28rpx;">
|
||||
<scroll-view scroll-y="true" v-if="(pdlist.length>0)" class="m-orderlist" @scrolltolower="scrollbottom" style="width:100%;height:100%;position:absolute;padding-top:80rpx;box-sizing: border-box;">
|
||||
<block v-for="(item, i) in pdlist" :key="i">
|
||||
|
||||
<navigator :url="(item.activity_type==2 ? '/activity/smashgoldeneggs/detail?activity_id=' : '/activity/luckydraw/detail?activity_id=') + (item.activity_id)" class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.lottery_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name">
|
||||
<label><text class='u-tuan-label'>{{(item.activity_type==2 ? '砸' : '幸')}}</text>{{item.activity_name}}</label>
|
||||
<view class="groupNumber">
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price" style='font-size:38rpx'>
|
||||
<label><day-countdown :timer="(item.activity_endtime)" :Type="1"></day-countdown></label>
|
||||
<button class="u-btn u-btn-default">{{__('立即参与')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，活动正在准备中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :class="(tapindex==2?'':'hide')" style="font-size:28rpx">
|
||||
<scroll-view scroll-y="true" v-if="(fglist.length>0)" class="m-orderlist" @scrolltolower="scrollbottomtwo" style="width:100%;height:100%;position:absolute;padding-top:66rpx;box-sizing: border-box;">
|
||||
<block v-for="(item , i) in fglist" :key="i">
|
||||
<view class="m-product-item m-product-GP">
|
||||
<view class="m-product-img">
|
||||
<image lazy-load :src="(item.activity_rule.product_image)" />
|
||||
</view>
|
||||
<view class="m-product-info">
|
||||
<view class="m-product-name">
|
||||
<label><text class='u-tuan-label'>拼</text>{{item.activity_rule.item_name}}</label>
|
||||
<view class="groupNumber">
|
||||
<day-countdown :timer="(item.activity_endtime)" :Type="0"></day-countdown>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-product-price">
|
||||
<label>{{__('￥')}}</label>{{item.activity_rule.group_sale_price}}
|
||||
<label class="u-del-price">{{__('￥')}}{{item.activity_rule.item_unit_price}}</label>
|
||||
<button class="u-btn u-btn-default" style='background:#bdbdbd'>{{__('立即开团')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="(ispage1)">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view redirect="true" class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<view class="m-null-tip">
|
||||
<text>{{__('亲，活动正在准备中~')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from "../../helpers/util";
|
||||
|
||||
import dayCountdown from "../../components/day-countdown.vue";
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
viewtype: 0,
|
||||
pdlist: [],
|
||||
fglist: [],
|
||||
flag: true,
|
||||
ispage: true,
|
||||
scposition: "",
|
||||
page: 1,
|
||||
istop: false,
|
||||
isdata: false,
|
||||
tapindex: 1,
|
||||
activity_state: 1
|
||||
}
|
||||
},
|
||||
components: {
|
||||
dayCountdown
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('抽奖活动')
|
||||
});
|
||||
|
||||
this.InitData()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
InitData: function() {
|
||||
var that = this;
|
||||
that.setData({
|
||||
pdlist: []
|
||||
});
|
||||
var params = {
|
||||
//store_id : this.shopInfo.store_id,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
})
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
isdata: true,
|
||||
pdlist: that.pdlist.concat(data.items)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
groupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 1,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_NORMAL
|
||||
}), this.InitData()
|
||||
},
|
||||
toBeGroupLists: function() {
|
||||
this.setData({
|
||||
tapindex: 2,
|
||||
page: 1,
|
||||
rows: 10,
|
||||
orderlist: [],
|
||||
activity_state: this.StateCode.ACTIVITY_STATE_WAITING
|
||||
}), this.InitPaging()
|
||||
},
|
||||
//saas,调用当前参与的团
|
||||
InitPaging: function() {
|
||||
|
||||
var params = {
|
||||
store_id: this.shopInfo.store_id,
|
||||
activity_type_id: this.StateCode.ACTIVITY_TYPE_GROUPBOOKING,
|
||||
activity_state: this.activity_state,
|
||||
page: this.page
|
||||
};
|
||||
var that = this;
|
||||
|
||||
$.request({
|
||||
url: this.Config.URL.store.activity,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
var $now = (new Date).getTime();
|
||||
data.items.forEach(function(v, k) {
|
||||
var $end = (new Date(v.activity_endtime.replace(/-/g, "/"))).getTime();
|
||||
data.items[k].Time = $end - $now;
|
||||
})
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: true,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
isdata: true,
|
||||
fglist: that.fglist.concat(data.items)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
isdata: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
viewType: function(e) {
|
||||
this.viewtype == 0 ? this.setData({
|
||||
viewtype: 1
|
||||
}) : this.setData({
|
||||
viewtype: 0
|
||||
})
|
||||
},
|
||||
scrollbottom: function(e) {
|
||||
var that = this;
|
||||
if (this.flag) {
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(n);
|
||||
var n = setTimeout(function() {
|
||||
that.setData({
|
||||
page: parseInt(that.page) + 1
|
||||
});
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_NORMAL) {
|
||||
this.InitData();
|
||||
}
|
||||
if (that.activity_state == that.StateCode.ACTIVITY_STATE_WAITING) {
|
||||
this.InitPaging();
|
||||
}
|
||||
},
|
||||
500);
|
||||
}
|
||||
},
|
||||
returnTop: function() {
|
||||
this.setData({
|
||||
scposition: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
/*全部商品 start*/
|
||||
.groupNumber {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
font-size: 24rpx;
|
||||
color: #db384c;
|
||||
background: #fbebeb;
|
||||
text-align: center;
|
||||
padding: 0 10rpx
|
||||
}
|
||||
|
||||
.groupNumber .icon-icon {
|
||||
font-size: 24rpx;
|
||||
display: inline
|
||||
}
|
||||
|
||||
.groupNumber text {
|
||||
color: #ffc001;
|
||||
margin: 0 2rpx
|
||||
}
|
||||
|
||||
.progressBarBox {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #888;
|
||||
font-size: 24rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.u-progressBar {
|
||||
display: inline-block;
|
||||
width: 140rpx;
|
||||
height: 20rpx;
|
||||
background-color: #d5d5d5;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-progressBar-cont {
|
||||
height: 20rpx;
|
||||
background-color: #ffc001;
|
||||
}
|
||||
|
||||
.m-product-price .u-btn {
|
||||
padding: 0;
|
||||
margin: 0 20rpx;
|
||||
width: 160rpx;
|
||||
float: right;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.m-product-GP {
|
||||
height: 232rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-img {
|
||||
height: 223rpx;
|
||||
width: 223rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-price {
|
||||
line-height: 80rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.m-product-GP .m-product-info {
|
||||
height: 232rpx;
|
||||
width: 518rpx;
|
||||
}
|
||||
|
||||
.u-del-price {
|
||||
color: #888888;
|
||||
font-size: 20rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/*全部商品 end*/
|
||||
/*顶部提示*/
|
||||
.u-toptip {
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.u-toptip .u-loadmore {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
top: 20rpx;
|
||||
}
|
||||
|
||||
/*顶部提示*/
|
||||
.m-navbar-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.m-navbar-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on {
|
||||
background-color: #fff;
|
||||
color: #DB384C;
|
||||
}
|
||||
|
||||
.m-navbar-item.m-navbar-item-on::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
border-bottom: 6rpx solid #DB384C;
|
||||
color: #CCCCCC;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.m-tab {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: var(--window-top);
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
732
chain/chain/favorable.vue
Normal file
732
chain/chain/favorable.vue
Normal file
@ -0,0 +1,732 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class='bj_able'>
|
||||
<view class="totalMoney">
|
||||
<view class='able_text'>{{__('向')}} {{store_name}} {{__('支付金额')}}</view>
|
||||
</view>
|
||||
<view class='able_input'>
|
||||
<view class='able_fuhao'>{{Currency}}</view>
|
||||
<input class='input_lab' type="digit" @input="inputnum" maxlength="8" @blur="blur" v-model='deliveryNum'></input>
|
||||
<view class='pict_fal' @click="clearnum">
|
||||
<image class='fal_pic' src='/static/images/false.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nodiscount" v-if="isshow1">
|
||||
<checkbox-group class="check" @change="checkboxChange"><label class="checkbox">
|
||||
<checkbox style="transform:scale(0.6);-webkit-transform:scale(0.6);-o-transform:scale(0.6);-moz-transform:scale(0.6);-ms-transform:scale(0.6)" />{{__('输入不参与优惠金额')}}
|
||||
</label></checkbox-group>
|
||||
</view>
|
||||
<view class="title" style="background"></view>
|
||||
<view class="totalMoney no_lab" v-if="isshow" style="background:#fff"><label>不参与优惠金额：</label><input placeholder="询问服务员后输入" type="digit" @input="onNodiscount" maxlength="8" @blur="blur1" :value="nodiscountvalue" /></view>
|
||||
<view class="discount" v-if="isshow1 && shop_discount<10">
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/img/discount-icon.png" style="width:50rpx;height:54rpx;float:left;margin-top:16rpx"></image><text style="float:left;margin-left:20rpx">{{shop_discount||10}}折</text><text style="color:#db384c;float:right">-{{Currency}}{{discount}}</text>
|
||||
</view>
|
||||
<view class="pay">
|
||||
<view class="coupon" @click="suitcouponlist" v-if="CouponEnabeld==true&&isCoupon">
|
||||
<view><text style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('优惠券')}}</text></view>
|
||||
<view style="color:#db384c;">-{{Currency}}{{DiscountMoney}}
|
||||
<text class="m-cell-ft"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon" v-if="MaxUsableCash>0&&isECashCard">
|
||||
<view class=""><text style='font-size:26rpx;'>{{__('余额抵扣')}}</text><text style="font-size:24rpx;color: #333333;">({{__('可使用')}}{{Currency}}{{MaxUsableCash}})</text></view>
|
||||
<view class=""><text class="" v-if="isBalance" style="position:absolute;right:19%;color:#db384c">{{Currency}}{{balance}}</text>
|
||||
<switch checked @change="switchChange" style="transform:scale(0.6);position:absolute;right:36rpx" />
|
||||
</view>
|
||||
</view>
|
||||
<view class=" payments"><label style='letter-spacing: 2.4rpx;font-size:26rpx;'>{{__('实付款')}}</label><text style="color:#db384c">{{Currency}}{{realPayMoney}}</text></view>
|
||||
</view>
|
||||
<form report-submit="true" @submit="paysubmit" v-if='isSubmit'><button class="payment" formType="submit">{{__('确认支付')}}</button></form>
|
||||
<form report-submit="true" v-else><button class="payment" formType="submit">{{__('确认支付')}}</button></form>
|
||||
<view class="explain" v-if="Description">
|
||||
<view class="title">{{__('买单说明：')}}</view>
|
||||
<view class="content">{{Description}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-top-default">
|
||||
<navigator url='/pages/index/index' open-type="switchTab" class="u-back2">
|
||||
<image src='https://static.lancerdt.com/xcxfile/appicon/img/gohome.png'></image>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<payment-box :paymentDataDefault="paymentData" :order_id="order_id" kind="favorable" ref="paymentBox" @onCancel="onCancel" @onPaid="onPaid" @onFail="onFail"></payment-box>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
import paymentBox from '../../components/payment-box.vue'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
store_name: "",
|
||||
money: "",
|
||||
nodiscount: "",
|
||||
discount: "",
|
||||
isshow: false,
|
||||
deliveryNum: "",
|
||||
isshow1: false,
|
||||
shop_discount: 10,
|
||||
totalMoney: "",
|
||||
payment: 0,
|
||||
info: [],
|
||||
order_id: "",
|
||||
formId: "",
|
||||
time: "",
|
||||
Description: "",
|
||||
MoneyLimit: "",
|
||||
CouponEnabeld: "",
|
||||
discountvalue: "",
|
||||
nodiscountvalue: "",
|
||||
DiscountMoney: "0.00",
|
||||
couponItemId: 0,
|
||||
IsUseCoupon: 1,
|
||||
MaxUsableCash: 0,
|
||||
MaxUsableECardCash: 0,
|
||||
MaxUsableExtraCash: 0,
|
||||
balance: 0,
|
||||
realMoney: 0,
|
||||
isBalance: true,
|
||||
eCardCash: 0,
|
||||
extraCash: 0,
|
||||
realPayMoney: 0,
|
||||
isECashCard: true,
|
||||
isCoupon: true,
|
||||
isSubmit: true,
|
||||
Currency: '￥',
|
||||
store_id: 0,
|
||||
|
||||
paymentData: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
paymentBox
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('优惠买单')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
Currency: that.__('￥'),
|
||||
store_id: options.store_id || 1001
|
||||
});
|
||||
|
||||
this.forceUserInfo(function(user) {
|
||||
that.load();
|
||||
});
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 离开页面，注销事件
|
||||
var that = this
|
||||
this.notice.removeNotification("RefreshCoupon1", that);
|
||||
|
||||
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'reloadUserResource']),
|
||||
|
||||
load: function() {
|
||||
let that = this;
|
||||
|
||||
// 初始化页面
|
||||
that.$.request({
|
||||
type: 'post',
|
||||
url: this.Config.URL.store.info,
|
||||
data: {
|
||||
store_id: that.store_id,
|
||||
action: 'intro'
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(data, status, msg, code) {
|
||||
//console.log("优惠买单：", data);
|
||||
that.setData({
|
||||
shop_discount: data.info.store_discount,
|
||||
store_name: data.base.store_name,
|
||||
//Description: data.Description,
|
||||
//CouponEnabeld: data.CouponEnabeld
|
||||
});
|
||||
//console.log("CouponEnabeld", that.CouponEnabeld);
|
||||
|
||||
false ? that.setData({
|
||||
isshow1: false
|
||||
}) : that.setData({
|
||||
isshow1: true
|
||||
});
|
||||
|
||||
that.inputVal()
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
this.notice.addNotification("RefreshCoupon1", that.RefreshCoupon1, that);
|
||||
|
||||
var e = 'VendorFeatureSet'; - 1 < e.indexOf("ECashCard") ? (this.setData({
|
||||
isECashCard: true
|
||||
}), this.GetUserUsableECash()) : this.setData({
|
||||
isECashCard: false
|
||||
}), -1 < e.indexOf("Coupon") ? this.setData({
|
||||
isCoupon: true
|
||||
}) : this.setData({
|
||||
isCoupon: false
|
||||
})
|
||||
},
|
||||
clearnum: function(a) {
|
||||
this.setData({
|
||||
deliveryNum: ""
|
||||
})
|
||||
},
|
||||
GetUserUsableECash: function() {
|
||||
var a = {
|
||||
userName: this.userInfo.UserName,
|
||||
orderRealTotal: 0
|
||||
},
|
||||
that = this;
|
||||
that.$.xsr(that.$.makeUrl(orderapi.GetUserUsableECash, a), function(a) {
|
||||
that.setData({
|
||||
MaxUsableCash: a.Info[0].MaxUsableCash,
|
||||
MaxUsableECardCash: a.Info[0].MaxUsableECardCash,
|
||||
MaxUsableExtraCash: a.Info[0].MaxUsableExtraCash
|
||||
})
|
||||
})
|
||||
},
|
||||
RefreshCoupon1: function(a) {
|
||||
this.setData({
|
||||
couponItemId: a.couponItemId,
|
||||
IsUseCoupon: a.IsUseCoupon,
|
||||
DiscountMoney: a.DiscountMoney,
|
||||
MoneyLimit: a.MoneyLimit
|
||||
}), this.inputVal()
|
||||
},
|
||||
inputnum: function(e) {
|
||||
let that = this;
|
||||
this.setData({
|
||||
money: e.detail.value
|
||||
});
|
||||
|
||||
parseFloat(e.detail.value) - (parseFloat(e.detail.value) - parseFloat(this.nodiscount || 0)) * (1 - this.shop_discount / 10) < parseFloat(this.MoneyLimit) && this.setData({
|
||||
couponItemId: 0,
|
||||
IsUseCoupon: 0,
|
||||
DiscountMoney: 0,
|
||||
MoneyLimit: 0
|
||||
});
|
||||
|
||||
that.$.isNull(e.detail.value) && this.setData({
|
||||
couponItemId: 0,
|
||||
IsUseCoupon: 0,
|
||||
DiscountMoney: 0,
|
||||
MoneyLimit: 0
|
||||
});
|
||||
|
||||
parseFloat(this.nodiscount) > parseFloat(e.detail.value) && (that.$.showModal({
|
||||
title: "提示",
|
||||
content: "不参与优惠金额应小于总金额"
|
||||
}), this.setData({
|
||||
nodiscount: 0,
|
||||
discount: 0
|
||||
}));
|
||||
|
||||
this.inputVal()
|
||||
},
|
||||
onNodiscount: function(a) {
|
||||
let that = this;
|
||||
this.setData({
|
||||
nodiscount: a.detail.value
|
||||
});
|
||||
parseFloat(this.money) - (parseFloat(this.money) - parseFloat(a.detail.value || 0)) * (1 - this.shop_discount / 10) < parseFloat(this.MoneyLimit) && this.setData({
|
||||
couponItemId: 0,
|
||||
IsUseCoupon: 0,
|
||||
DiscountMoney: 0,
|
||||
MoneyLimit: 0
|
||||
});
|
||||
|
||||
parseFloat(a.detail.value) > parseFloat(this.money) && (that.$.showModal({
|
||||
title: "提示",
|
||||
content: "不参与优惠金额应小于总金额"
|
||||
}), this.setData({
|
||||
nodiscount: 0,
|
||||
discount: 0,
|
||||
nodiscountvalue: ""
|
||||
}));
|
||||
|
||||
this.inputVal()
|
||||
},
|
||||
blur: function(a) {
|
||||
let that = this;
|
||||
/^\d{1,10}(\.\d{1,2})?$/.test(a.detail.value) || that.$.showModal({
|
||||
title: "提示",
|
||||
content: "请输入正确金额"
|
||||
})
|
||||
},
|
||||
blur1: function(a) {
|
||||
let that = this;
|
||||
/^\d{1,10}(\.\d{1,2})?$/.test(a.detail.value) || that.$.showModal({
|
||||
title: "提示",
|
||||
content: "请输入正确金额"
|
||||
})
|
||||
},
|
||||
inputVal: function() {
|
||||
let that = this;
|
||||
var a = this.money,
|
||||
t = this.nodiscount,
|
||||
e = this.shop_discount,
|
||||
o = this.DiscountMoney;
|
||||
this.setData({
|
||||
discount: ((a - t) * (1 - e / 10)).toFixed(2),
|
||||
payment: (a - (a - t) * (1 - e / 10) - o).toFixed(2)
|
||||
}), this.payment < 0 && this.setData({
|
||||
payment: 0
|
||||
}), isNaN(this.discount) && this.setData({
|
||||
discount: 0
|
||||
}), isNaN(this.payment) && this.setData({
|
||||
payment: 0
|
||||
}), 0 == this.MaxUsableCash && this.setData({
|
||||
realPayMoney: this.payment
|
||||
}), this.MaxUsableCash >= this.payment ? this.setData({
|
||||
balance: this.payment,
|
||||
realMoney: 0
|
||||
}) : this.setData({
|
||||
balance: this.MaxUsableCash,
|
||||
realMoney: (this.payment - this.MaxUsableCash).toFixed(2)
|
||||
}), this.setData({
|
||||
realPayMoney: this.realMoney
|
||||
}), 0 == this.isBalance && this.setData({
|
||||
realPayMoney: this.payment
|
||||
})
|
||||
},
|
||||
suitcouponlist: function() {
|
||||
var a = this.money,
|
||||
t = this.nodiscount,
|
||||
e = this.shop_discount;
|
||||
this.setData({
|
||||
discount: ((a - t) * (1 - e / 10)).toFixed(2)
|
||||
});
|
||||
var o = {
|
||||
userId: this.userInfo.Id,
|
||||
store_id: 1001,
|
||||
realMoney: (a - (a - t) * (1 - e / 10)).toFixed(2)
|
||||
},
|
||||
that = this;
|
||||
that.$.xsr(that.$.makeUrl(cartapi.GetUsableCouponItemListForQuickPay, o), function(a) {
|
||||
that.setData({
|
||||
info: a.Info
|
||||
}), that.$.navigateTo({
|
||||
url: "../favorablesuitcouponlist/favorablesuitcouponlist?val=" + JSON.stringify(a.Info) + "&id=" + that.couponItemId
|
||||
})
|
||||
})
|
||||
},
|
||||
checkboxChange: function(a) {
|
||||
0 < a.detail.value.length ? this.setData({
|
||||
isshow: true
|
||||
}) : this.setData({
|
||||
isshow: false,
|
||||
nodiscount: 0
|
||||
}), this.inputVal()
|
||||
},
|
||||
paysubmit: function(a) {
|
||||
var that = this;
|
||||
if (that.$.isNull(this.money) || 0 == this.money) return that.$.showModal({
|
||||
title: "提示",
|
||||
content: "请输入消费总金额"
|
||||
}), false;
|
||||
if (!/^\d{1,10}(\.\d{1,2})?$/.test(that.money)) return that.$.showModal({
|
||||
title: "提示",
|
||||
content: "请输入正确金额"
|
||||
}), false;
|
||||
if (that.isshow && !/^\d{1,10}(\.\d{1,2})?$/.test(that.nodiscount)) return that.$.showModal({
|
||||
title: "提示",
|
||||
content: "请输入正确金额"
|
||||
}), false;
|
||||
if (parseFloat(that.nodiscount) > parseFloat(that.money)) return that.$.showModal({
|
||||
title: "提示",
|
||||
content: "不参与优惠金额应小于总金额"
|
||||
}), false;
|
||||
this.isBalance ? (0 == this.MaxUsableCash && this.setData({
|
||||
eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
|
||||
extraCash: (1 * this.MaxUsableExtraCash).toFixed(2)
|
||||
}), 0 != this.MaxUsableCash && 0 == this.balance && this.setData({
|
||||
eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
|
||||
extraCash: (1 * this.MaxUsableExtraCash).toFixed(2)
|
||||
}), this.balance >= this.MaxUsableECardCash && this.setData({
|
||||
eCardCash: (1 * this.MaxUsableECardCash).toFixed(2),
|
||||
extraCash: (this.balance - 1 * this.MaxUsableECardCash).toFixed(2)
|
||||
}), this.balance < this.MaxUsableECardCash && this.setData({
|
||||
eCardCash: (1 * this.balance).toFixed(2),
|
||||
extraCash: 0
|
||||
})) : this.setData({
|
||||
eCardCash: 0,
|
||||
extraCash: 0
|
||||
});
|
||||
|
||||
var param = {
|
||||
userName: this.userInfo.UserName,
|
||||
payTypeId: 9,
|
||||
couponItemId: this.couponItemId,
|
||||
totalMoney: this.money,
|
||||
preferential: this.shop_discount,
|
||||
preferentialMoney: this.discount,
|
||||
nonPreferentialMoney: this.nodiscount || 0,
|
||||
realMoney: this.realPayMoney,
|
||||
firstType: 2,
|
||||
eCardCash: this.eCardCash,
|
||||
extraCash: this.extraCash,
|
||||
store_id: this.store_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.pay.favorable,
|
||||
data: param,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.gotopay(data.pay_sn, param.realMoney);
|
||||
} else {
|
||||
that.$.alert(msg)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
fail: function(err) {}
|
||||
});
|
||||
},
|
||||
gotopay_old: function() {
|
||||
|
||||
var that = this,
|
||||
param = {
|
||||
order_id: this.order_id,
|
||||
openid: this.userInfo.openId,
|
||||
store_id: this.shopInfo.store_id,
|
||||
typ: 'json',
|
||||
payment_channel_code: 'wx_native',
|
||||
prepay_flag: 1
|
||||
};
|
||||
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.pay.pay,
|
||||
data: param,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.$.requestPayment({
|
||||
timeStamp: data.timeStamp,
|
||||
nonceStr: data.nonceStr,
|
||||
"package": data.package,
|
||||
signType: data.signType,
|
||||
paySign: data.paySign,
|
||||
success: function(n) {
|
||||
that.returnUrl(param.order_id)
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.redirectTo("/chain/chain/favorabledetail?on=" + param.order_id)
|
||||
},
|
||||
complete: function(n) {
|
||||
n.errMsg == "requestPayment:cancel" && (that.$.redirectTo("/chain/chain/favorabledetail?on=" + param.order_id), that.sendMessage(param.order_id, 1))
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$.alert(msg)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
fail: function(err) {}
|
||||
});
|
||||
},
|
||||
|
||||
gotopay: function(order_id, order_payment_amount) {
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
order_id: order_id,
|
||||
'paymentData': {
|
||||
order_id: order_id,
|
||||
orderSelMoneyAmount: order_payment_amount,
|
||||
|
||||
user_money: this.userInfo.user_money,
|
||||
user_points: this.userInfo.user_points,
|
||||
user_recharge_card: this.userInfo.user_recharge_card,
|
||||
user_sp: this.userInfo.user_sp
|
||||
}
|
||||
});
|
||||
|
||||
this.$refs.paymentBox.show();
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
onCancel: function(e) {
|
||||
return
|
||||
},
|
||||
onPaid: function(e) {
|
||||
let that = this
|
||||
|
||||
if (this.$refs.paymentBox.showBoxView) {
|
||||
this.$refs.paymentBox.cancel();
|
||||
}
|
||||
|
||||
that.reloadUserResource(function(user_info) {
|
||||
that.$.alert(that.__('支付成功'), function() {
|
||||
that.$.gotopage("/chain/chain/favorabledetail?order_id=" + that.order_id)
|
||||
}, 2000)
|
||||
});
|
||||
|
||||
},
|
||||
onFail: function(e) {},
|
||||
|
||||
returnUrl: function(a) {},
|
||||
switchChange: function(a) {
|
||||
a.detail.value ? this.setData({
|
||||
realPayMoney: this.realMoney,
|
||||
isBalance: true
|
||||
}) : this.setData({
|
||||
realPayMoney: this.payment,
|
||||
isBalance: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.store-box {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
line-height: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 8rpx;
|
||||
padding-left: 24rpx;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.totalMoney {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
margin: 24rpx auto 0;
|
||||
justify-content: space-betwee;
|
||||
height: 92rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.totalMoney label {
|
||||
width: 54%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.totalMoney input {
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.nodiscount {
|
||||
width: 90%;
|
||||
margin: 51rpx auto 20rpx auto;
|
||||
}
|
||||
|
||||
.check {
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
font-size: 26rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.discount {
|
||||
height: 85rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0 40rpx;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
margin: 24rpx 0;
|
||||
}
|
||||
|
||||
.pay {
|
||||
padding: 0 40rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.payments {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.payment {
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
line-height: 82rpx;
|
||||
background: #db384c;
|
||||
color: #fff;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.explain {
|
||||
width: 90%;
|
||||
margin: 50rpx auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 24rpx;
|
||||
color: #717171;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.m-cell-ft::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 12rpx;
|
||||
width: 12rpx;
|
||||
border-width: 4rpx 4rpx 0 0;
|
||||
border-color: #999;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
position: relative;
|
||||
margin-top: -8rpx;
|
||||
top: -4rpx;
|
||||
right: -4rpx;
|
||||
}
|
||||
|
||||
.u-back2 image {
|
||||
border-radius: 100%;
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
border: 1px solid #eee;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 999;
|
||||
opacity: 0.8;
|
||||
line-height: 77rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bj_able {
|
||||
background: #fff;
|
||||
width: 92%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.able_text {
|
||||
letter-spacing: 2rpx;
|
||||
width: 54%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.able_input {
|
||||
width: 90%;
|
||||
margin: 20rpx auto 0 auto;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
height: 110rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.able_fuhao {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 60rpx;
|
||||
color: #000;
|
||||
letter-spacing: 0.84rpx;
|
||||
text-align: center;
|
||||
line-height: 94rpx;
|
||||
margin-right: 10rpx;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
/* .input_lab { float: left; width: 75%; height: 100%; } */
|
||||
.checkbox {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26rpx;
|
||||
color: #7b7b7b;
|
||||
letter-spacing: 0.5rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no_lab {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
margin: 24rpx auto 0;
|
||||
justify-content: space-betwee;
|
||||
height: 98rpx;
|
||||
border-radius: 8rpx;
|
||||
line-height: 98rpx;
|
||||
border-bottom: 1rpx solid #f1f1f1;
|
||||
}
|
||||
|
||||
.pict_fal {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
position: absolute;
|
||||
top: 161rpx;
|
||||
right: 9%;
|
||||
}
|
||||
|
||||
.fal_pic {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
}
|
||||
|
||||
.input_lab {
|
||||
width: 87%;
|
||||
font-family: UICTFontTextStyleBody;
|
||||
font-size: 74rpx;
|
||||
height: 74rpx;
|
||||
/* line-height:74rpx; */
|
||||
/* padding:8rpx 0; */
|
||||
min-height: 83rpx;
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
vertical-align: middl;
|
||||
font-weight: bold
|
||||
}
|
||||
</style>
|
||||
367
chain/chain/favorabledetail.vue
Normal file
367
chain/chain/favorabledetail.vue
Normal file
@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<movable-area class="move-area">
|
||||
<movable-view v-if="info.IsRedPacketIcon" inertia class="move-img" direction="all" @tap='IsShowRPK'>
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/rpk_min.png"></image>
|
||||
</movable-view>
|
||||
<view style="background:#f8f8f8">
|
||||
<view class="paysuccess"><label>
|
||||
<image src="https://static.lancerdt.com/xcxfile/appicon/images/true.png" style="width:40rpx;height:40rpx;margin-top:8rpx"></image>
|
||||
</label><text style="margin-left:10rpx">{{info.trade_is_paid==StateCode.ORDER_PAID_STATE_YES ? __('已支付') : __('待付款')}}</text></view>
|
||||
<view class="content">
|
||||
<view class="store">{{info.store_name}}
|
||||
</view>
|
||||
<view class="details">
|
||||
<view class="details-left">
|
||||
<view class="charge"><text>{{__('消费金额')}}：<text style="color:red">{{Currency}}{{info.order_payment_amount}}</text></text></view>
|
||||
<view class="pay"><text>{{__('实际支付')}}：<text style="color:red">{{Currency}}{{info.trade_amount}}</text></text></view>
|
||||
<view class="monetary"><text>{{__('优惠金额')}}：<text style="color:red">{{Currency}}{{info.trade_discount}}</text></text></view>
|
||||
</view>
|
||||
<view class="details-right">
|
||||
<view class="num"><text>{{__('订单编号')}}：{{info.order_id}}</text></view>
|
||||
<view class="time"><text>{{__('消费时间')}}：{{info.trade_create_time}}</text></view>
|
||||
<view class="monetary"><text>{{__('余额抵扣')}}：<text style="color:red">{{Currency}}{{info.trade_payment_money}}</text></text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</movable-area>
|
||||
<view class="shareRPK " v-if="showRPK && info.IsRedPacketIcon && type==1" @tap='IsShowRPK'>
|
||||
<view :class="'shareRPKBox ' + showRPK ? 'animated bounceIn':'animated bounceOut'" catchtap style='background:url(https://static.lancerdt.com/xcxfile/appicon/rpk_box.png) no-repeat;background-size: cover;'>
|
||||
<view class="sendRPK" catchtap='shareBox'></view>
|
||||
<view class="closeRPK" catchtap='IsShowRPK'></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-top-default">
|
||||
<navigator url='/pages/index/index' open-type="switchTab" class="u-back2">
|
||||
<image src='https://static.lancerdt.com/xcxfile/appicon/img/gohome.png'></image>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
info: {},
|
||||
deduction: 0,
|
||||
showRPK: false,
|
||||
ActivityGroupId: 0,
|
||||
maxRPK: 0,
|
||||
order_id: "",
|
||||
isshow1: false,
|
||||
Currency: "￥"
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('优惠买单')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
|
||||
that.setData({
|
||||
order_id: options.order_id || ''
|
||||
});
|
||||
|
||||
that.load();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 离开页面，注销事件
|
||||
var that = this
|
||||
},
|
||||
/*
|
||||
onShareAppMessage: function() {
|
||||
return {
|
||||
title: "拼手气红包，第" + this.data.maxRPK + "个领取的红包最大!",
|
||||
imageUrl: "https://static.lancerdt.com/xcxfile/appicon/shareImg.png",
|
||||
path: "pages/redpacket/redpacket?g=" + this.data.ActivityGroupId + "&n=" + this.data.maxRPK + "&uid=" + app.globalData
|
||||
.UserInfo.Id,
|
||||
success: function() {
|
||||
}
|
||||
}
|
||||
},*/
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
load: function() {
|
||||
let that = this;
|
||||
|
||||
// 初始化页面
|
||||
that.$.request({
|
||||
type: 'post',
|
||||
url: this.Config.URL.pay.consume_trade_detail,
|
||||
data: {
|
||||
order_id: that.order_id
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(data, status, msg, code) {
|
||||
//console.log("优惠买单：", data);
|
||||
that.setData({
|
||||
info: data,
|
||||
Currency: data.currency_symbol_left
|
||||
});
|
||||
|
||||
false ? that.setData({
|
||||
isshow1: false
|
||||
}) : that.setData({
|
||||
isshow1: true
|
||||
});
|
||||
|
||||
that.inputVal()
|
||||
}
|
||||
});
|
||||
},
|
||||
shareQRCode: function(a) {
|
||||
var e = this,
|
||||
t = {
|
||||
store_id: app.globalData.VendorInfo.Id,
|
||||
sponsorId: app.globalData.UserInfo.Id,
|
||||
imageUrl: "https://static.lancerdt.com/xcxfile/appicon/shareImg.png",
|
||||
path: "pages/redpacket/redpacket?g=" + this.data.ActivityGroupId + "&n=" + this.data.maxRPK + "&uid=" + app.globalData
|
||||
.UserInfo.Id,
|
||||
luckyOrder: this.data.maxRPK
|
||||
};
|
||||
$.xsr($.makeUrl(orderapi.ShareLuckyRedPacket, t), function(a) {
|
||||
e.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: a.Info,
|
||||
IsShare: true,
|
||||
IsShareBox: false,
|
||||
IsJT: true
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
shareBox: function() {
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: true,
|
||||
IsShareBox: true,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
},
|
||||
cancelShare: function() {
|
||||
this.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
})
|
||||
},
|
||||
saveImg: function() {
|
||||
var e = this;
|
||||
$.loading(), wx.downloadFile({
|
||||
url: this.data.PageQRCodeInfo.Path,
|
||||
success: function(a) {
|
||||
$.hideloading(), wx.saveImageToPhotosAlbum({
|
||||
filePath: a.tempFilePath,
|
||||
success: function() {
|
||||
e.setData({
|
||||
PageQRCodeInfo: {
|
||||
Path: "",
|
||||
IsShare: false,
|
||||
IsShareBox: false,
|
||||
IsJT: false
|
||||
}
|
||||
}), $.alert("保存图片成功！"), $.xsr1($.makeUrl(orderapi.ShareCount, {
|
||||
sponsorId: app.globalData.UserInfo.Id,
|
||||
audienceType: 3,
|
||||
audienceId: 0,
|
||||
ContentType: 22,
|
||||
contentId: e.data.ActivityGroupId
|
||||
}))
|
||||
},
|
||||
fail: function(a) {
|
||||
$.hideloading(), console.log("保存图片失败：", a)
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(a) {
|
||||
$.hideloading()
|
||||
}
|
||||
})
|
||||
},
|
||||
showCodeImg: function() {
|
||||
wx.previewImage({
|
||||
current: this.data.PageQRCodeInfo.Path,
|
||||
urls: [this.data.PageQRCodeInfo.Path]
|
||||
})
|
||||
},
|
||||
IsShowRPK: function() {
|
||||
var a = this;
|
||||
a.data.showRPK ? setTimeout(function() {
|
||||
a.setData({
|
||||
showRPK: false,
|
||||
type: 1
|
||||
})
|
||||
}, 250) : a.setData({
|
||||
showRPK: true,
|
||||
type: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.paysuccess {
|
||||
height: 160rpx;
|
||||
margin-left: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 36rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 400rpx;
|
||||
background: #fff;
|
||||
padding: 0 30rpx
|
||||
}
|
||||
|
||||
.store {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
height: 80rpx;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.details-left {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.details-left view {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.details-right {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.details-right view {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.m-footer-btn {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
text-align: right;
|
||||
border-top: 1rpx solid #d5d5d5;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.u-link-btn {
|
||||
margin: 0 10rpx;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.move-area {
|
||||
position: absolute;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.move-img {
|
||||
height: 126rpx;
|
||||
width: 100rpx;
|
||||
z-index: 5;
|
||||
margin-top: 70%;
|
||||
margin-left: 650rpx;
|
||||
}
|
||||
|
||||
.move-img image {
|
||||
height: 126rpx;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.shareRPK {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.shareRPKBox {
|
||||
width: 640rpx;
|
||||
height: 698rpx;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
margin-left: -320rpx;
|
||||
margin-top: -349rpx;
|
||||
}
|
||||
|
||||
.sendRPK {
|
||||
width: 222rpx;
|
||||
height: 70rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -100rpx;
|
||||
top: 50%;
|
||||
margin-top: 140rpx;
|
||||
}
|
||||
|
||||
.closeRPK {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -22rpx;
|
||||
bottom: 25rpx;
|
||||
}
|
||||
|
||||
.shareCodeImg {
|
||||
height: 800rpx;
|
||||
}
|
||||
|
||||
.u-back2 image {
|
||||
border-radius: 100%;
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
border: 1px solid #eee;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 999;
|
||||
opacity: 0.8;
|
||||
line-height: 77rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
1507
chain/chain/index.vue
Normal file
1507
chain/chain/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
485
chain/chain/list.vue
Normal file
485
chain/chain/list.vue
Normal file
@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view v-if="loadComplete">
|
||||
<block v-if="isdata && !issshow">
|
||||
<scroll-view class="m-nearbylist" scroll-y="true" @scrolltolower="scrollbottom">
|
||||
<view class='list-box' @click="gopage" v-for="(item, index) in Info" :key="index" :data-chain_id="(item.chain_id)" :data-chain_name="(item.chain_name)">
|
||||
<view class='item-box'>
|
||||
<view class='flex-box'>
|
||||
<image :src='item.chain_img' class='flex-shop'></image><label class='flex-title'>{{item.chain_name}}</label>
|
||||
<view class='flex-postion'>
|
||||
<image src='https://static.lancerdt.com/xcxfile/appicon/img/location.png'></image><label>{{item.distance}}</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class='flex-info'>
|
||||
<view class='flex-info-box' @click.stop="call" :data-phone="item.chain_mobile"><label class='flex-info-title'>{{__('商家电话：')}}</label><label style='color:#0095fd'>{{item.chain_mobile}}</label></view>
|
||||
<view class='flex-info-box' @click.stop="gotomap" :data-chain_id="(item.chain_id)" :data-chain_name="(item.chain_name)" :data-address="(item.chain_district_info)" :data-name="(item.chain_name)" :data-lat="(item.chain_lat)" :data-lng="(item.chain_lng)"><label class='flex-info-title'>{{__('商家地址：')}}</label><label>{{item.chain_district_info}}</label></view>
|
||||
<image src='https://static.lancerdt.com/xcxfile/appicon/img/right.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-loading-box">
|
||||
<block v-if="ispage && !issshow">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label><text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="!ispage && !issshow">
|
||||
<view class="u-loadmore u-loadmore-line"><text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text></view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<view class="m-nullcontent" v-if="!isdata">
|
||||
<view class="m-nullpage-middle"><label class="iconfont icon-meiyougengduo"></label>
|
||||
<view class="m-null-tip"><text>{{__('亲~什么都没有')}}</text><text>{{__('附近没什么门店!')}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isdata && issshow" class='open_ba'>
|
||||
<view style="width: 200rpx;/*height: 100px*/margin: 71px auto 25px auto;wxcs_style_margin: 143rpx auto 50rpx auto;auto: 50rpx auto;">
|
||||
<image src='https://static.lancerdt.com/xcxfile/appicon/img/ditulogo.png' style="width: 200rpx;height: 200rpx;/*margin: 0 auto;*/"></image>
|
||||
</view>
|
||||
<view style="font-size: 28rpx;">{{__('无法获取到您的定位，请开启地理位置权限，将根据你的位置展示附近门店。')}}</view><button style="width: 34%;height: 79rpx;background: #33cc66;margin: 39px auto 0 auto;wxcs_style_margin: 79rpx auto 0 auto;color: #fff;line-height: 80rpx;text-align: center;" open-type="openSetting" @opensetting="handler">{{__('去开启')}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
options: {},
|
||||
page: 1,
|
||||
ispage: true,
|
||||
flag: true,
|
||||
Info: [],
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
isdata: false,
|
||||
issshow: 0,
|
||||
item_id: 0,
|
||||
store_id: null,
|
||||
chain_id: null,
|
||||
rows: 10,
|
||||
loadComplete: false // 没有加载数据前不显示的对应内容
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('附近门店')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
that.setData({
|
||||
options: options,
|
||||
store_id: options.store_id ? options.store_id : '',
|
||||
item_id: options.item_id ? options.item_id : ''
|
||||
});
|
||||
|
||||
that.$.getLocation({
|
||||
type: "wgs84",
|
||||
success: function(response) {
|
||||
that.setData({
|
||||
latitude: response.latitude,
|
||||
longitude: response.longitude
|
||||
});
|
||||
|
||||
that.getNearbylist()
|
||||
},
|
||||
fail: function() {
|
||||
that.setData({
|
||||
isdata: true
|
||||
});
|
||||
|
||||
that.$.confirm(that.__('手机定位失败！'));
|
||||
|
||||
that.getNearbylist()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
getNearbylist: function() {
|
||||
var that = this;
|
||||
var params = {
|
||||
lat: that.latitude,
|
||||
lng: that.longitude,
|
||||
page: that.page,
|
||||
rows: that.rows,
|
||||
store_id: that.options.store_id ? that.options.store_id : '',
|
||||
item_id: that.options.item_id ? that.options.item_id : '',
|
||||
};
|
||||
that.$.request({
|
||||
url: this.Config.URL.store.getNearChain,
|
||||
data: params,
|
||||
dataType: 'json',
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
for (let i = 0; i < data.items.length; i++) {
|
||||
data.items[i]['distance'] = that.$.distanceFormat(data.items[i]['distance']);
|
||||
|
||||
let coord = that.$.bMapTransQQMap(data.items[i]['chain_lng'], data.items[i]['chain_lat']);
|
||||
data.items[i]['chain_lng'] = coord.lng;
|
||||
data.items[i]['chain_lat'] = coord.lat;
|
||||
}
|
||||
|
||||
that.setData({
|
||||
isdata: true,
|
||||
loadComplete: true
|
||||
});
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
Info: that.Info.concat(data.items)
|
||||
})
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
Info: that.Info.concat(data.items)
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
loadComplete: true
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: function(data) {
|
||||
that.setData({
|
||||
loadComplete: true
|
||||
});
|
||||
that.$.alert("网络异常请重试！");
|
||||
}
|
||||
});
|
||||
},
|
||||
gotomap: function(e) {
|
||||
var that = this;
|
||||
if (that.options.issub) {
|
||||
that.backCheckout(e.currentTarget.dataset);
|
||||
} else {
|
||||
that.$.openLocation({
|
||||
latitude: parseFloat(e.currentTarget.dataset.lat),
|
||||
longitude: parseFloat(e.currentTarget.dataset.lng),
|
||||
name: e.currentTarget.dataset.name,
|
||||
address: e.currentTarget.dataset.address,
|
||||
scale: 28
|
||||
})
|
||||
}
|
||||
},
|
||||
gopage: function(e) {
|
||||
var that = this;
|
||||
if (that.options.issub) {
|
||||
that.backCheckout(e.currentTarget.dataset);
|
||||
} else if (that.options.is_flag) {
|
||||
that.setChain(e.currentTarget.dataset);
|
||||
} else {
|
||||
this.$.gotopage('/chain/chain/index?chain_id=' + e.currentTarget.dataset.chain_id)
|
||||
}
|
||||
},
|
||||
backCheckout: function(data) {
|
||||
let that = this;
|
||||
var options = this.options;
|
||||
options.chain_id = data.chain_id;
|
||||
|
||||
var params = {};
|
||||
var info_list = this.Info;
|
||||
for (var r = 0; r < info_list.length; r++) {
|
||||
|
||||
if (info_list[r].chain_id == data.chain_id) {
|
||||
params = info_list[r];
|
||||
}
|
||||
}
|
||||
|
||||
options.ChainInfo = params;
|
||||
|
||||
//uni.setStorageSync('chain_id', data.chain_id);
|
||||
//uni.setStorageSync('chain_name', data.chain_name);
|
||||
|
||||
that.$.navigateBack(1, function() {
|
||||
that.notice.postNotificationName("RefreshOrderChain", options)
|
||||
})
|
||||
},
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var e = this;
|
||||
e.setData({
|
||||
flag: false
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
e.setData({
|
||||
type: e.type,
|
||||
page: parseInt(e.page) + 1,
|
||||
rows: 10
|
||||
}), e.getNearbylist()
|
||||
},
|
||||
500)
|
||||
}
|
||||
},
|
||||
setChain: function(e) {
|
||||
var that = this;
|
||||
//console.log(e);
|
||||
that.$.showModal({
|
||||
title: '提示',
|
||||
content: '确定该门店成为您的默认自提点吗？',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.setStorageSync('chain_id', e.chain_id);
|
||||
uni.setStorageSync('chain_name', e.chain_name);
|
||||
|
||||
var params = {
|
||||
chain_id: e.chain_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.setChain,
|
||||
data: params,
|
||||
dataType: 'json',
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
that.$.gopage('/pages/index/index')
|
||||
} else {
|
||||
that.$.alert('设置失败，请重新选择')
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
selectchain: function(e) {
|
||||
var params = {},
|
||||
info_list = this.Info;
|
||||
for (var r = 0; r < info_list.length; r++) info_list[r].chain_id == e.currentTarget.dataset.chain_id && (params =
|
||||
info_list[r]);
|
||||
var that = this;
|
||||
that.$.navigateBack(1, function() {
|
||||
var e = {
|
||||
chain_id: that.chain_id,
|
||||
spinfo: that.spid,
|
||||
ChainInfo: params
|
||||
};
|
||||
that.notice.postNotificationName("RefreshOrderChain", e)
|
||||
})
|
||||
},
|
||||
selectAddress: function(e) {
|
||||
var params = {},
|
||||
info_list = this.Info;
|
||||
for (var r = 0; r < info_list.length; r++) info_list[r].chain_id == e.currentTarget.dataset.chain_id && (params =
|
||||
info_list[r]);
|
||||
var that = this;
|
||||
that.$.navigateBack(1, function() {
|
||||
var e = {
|
||||
chain_id: that.chain_id,
|
||||
spinfo: that.spid,
|
||||
ChainInfo: params
|
||||
};
|
||||
that.notice.postNotificationName("RefreshOrderChain", e)
|
||||
})
|
||||
},
|
||||
call: function(e) {
|
||||
let that = this;
|
||||
that.$.makePhoneCall({
|
||||
phoneNumber: e.currentTarget.dataset.phone
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
|
||||
.list-box {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flex-shop {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
|
||||
.flex-title {
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
max-width: 75%;
|
||||
overflow: hidden;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flex-postion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.flex-postion image {
|
||||
width: 20rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.flex-postion label {
|
||||
font-size: 24rpx;
|
||||
color: #9b9b9b;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.m-nearbylist {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flex-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-info view {
|
||||
margin: 10rpx 0 0 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.flex-info-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.flex-info label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
word-wrap: break-word;
|
||||
width: 520rpx;
|
||||
}
|
||||
|
||||
.flex-info image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.flex-info-title {
|
||||
flex-basis: 145rpx;
|
||||
}
|
||||
|
||||
.open_ba {
|
||||
width: 80%;
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.open_dl {
|
||||
width: 34%;
|
||||
height: 79rpx;
|
||||
background: #33cc66;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 79rpx auto 0 auto;
|
||||
line-height: 75rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nearbylist-item {
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.nearbylist-item:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: inline-block;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.item-phone {
|
||||
line-height: 45rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-distance {
|
||||
float: right;
|
||||
font-size: 26rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.item-address {
|
||||
position: relative;
|
||||
font-size: 26rpx;
|
||||
color: #bbb;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
margin-right: 40rpx;
|
||||
line-height: 40rpx
|
||||
}
|
||||
|
||||
.item-info::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 12rpx;
|
||||
width: 12rpx;
|
||||
border-width: 4rpx 4rpx 0 0;
|
||||
border-color: #ebebe7;
|
||||
border-style: solid;
|
||||
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
top: -4rpx;
|
||||
position: absolute;
|
||||
top: 72%;
|
||||
right: 4rpx;
|
||||
padding: 3rpx;
|
||||
}
|
||||
|
||||
.m-nearbylist {
|
||||
height: 100%;
|
||||
position: absolute
|
||||
}
|
||||
</style>
|
||||
80
chain/chain/scan.vue
Normal file
80
chain/chain/scan.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
vendor: 0,
|
||||
tableNum: "",
|
||||
path: ""
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('扫码点餐')
|
||||
});
|
||||
|
||||
let that = this;
|
||||
|
||||
//#ifdef H5
|
||||
that.$.gopage('/pagesub/scan/scan');
|
||||
//#endif
|
||||
|
||||
//#ifndef H5
|
||||
that.$.scanCode({
|
||||
success: function(e) {
|
||||
// console.info(e)
|
||||
if (e.result.substr(0, 7) == "http://" || e.result.substr(0, 8) == "https://") {
|
||||
that.$.gopage(
|
||||
'/pagesub/webpage/web?u=' +
|
||||
encodeURIComponent(e.result)
|
||||
);
|
||||
} else {
|
||||
var t = e.result.split("=");
|
||||
|
||||
if (t.length > 2 || t.length < 2) {
|
||||
that.$.alert("无法识别")
|
||||
} else {
|
||||
if (t[0] == "productId") {
|
||||
that.$.navigateTo("/pages/product/detail?pid=" + t[1])
|
||||
} else if (t[0] == "storeId") {
|
||||
that.$.navigateTo("/pagesub/index/store?store_id=" + t[1])
|
||||
} else {
|
||||
that.$.alert("无法识别!")
|
||||
}
|
||||
|
||||
//that.$.navigateTo("../activitycheckin/activitycheckin?eventId=" + t[1])
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.alert("无法识别!")
|
||||
}
|
||||
})
|
||||
//#endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo'])
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
</style>
|
||||
48
common/emoji/biaoqin.js
Normal file
48
common/emoji/biaoqin.js
Normal file
@ -0,0 +1,48 @@
|
||||
const emojiList = [
|
||||
{"url":"0.gif","alt":"[惊讶]"},{"url":"1.gif","alt":"[撇嘴]"},{"url":"2.gif","alt":"[色]"},{"url":"3.gif","alt":"[啊这]"},{"url":"4.gif","alt":"[得意]"},{"url":"5.gif","alt":"[流泪]"},{"url":"6.gif","alt":"[害羞]"},
|
||||
{"url":"7.gif","alt":"[闭嘴]"},{"url":"8.gif","alt":"[睡]"},{"url":"9.gif","alt":"[大哭]"},{"url":"10.gif","alt":"[尴尬]"},{"url":"11.gif","alt":"[发怒]"},{"url":"12.gif","alt":"[调皮]"},{"url":"13.gif","alt":"[呲牙]"},
|
||||
{"url":"14.gif","alt":"[微笑]"},{"url":"15.gif","alt":"[难过]"},{"url":"16.gif","alt":"[酷]"},{"url":"18.gif","alt":"[抓狂]"},{"url":"19.gif","alt":"[吐]"},{"url":"20.gif","alt":"[偷笑]"},{"url":"21.gif","alt":"[可爱]"},
|
||||
{"url":"22.gif","alt":"[白眼]"},{"url":"23.gif","alt":"[傲慢]"},{"url":"24.gif","alt":"[饥饿]"},{"url":"25.gif","alt":"[困]"},{"url":"26.gif","alt":"[惊恐]"},{"url":"27.gif","alt":"[流汗]"},{"url":"28.gif","alt":"[憨笑]"},
|
||||
{"url":"29.gif","alt":"[悠闲]"},{"url":"30.gif","alt":"[奋斗]"},{"url":"31.gif","alt":"[咒骂]"},{"url":"32.gif","alt":"[疑问]"},{"url":"33.gif","alt":"[嘘]"},{"url":"34.gif","alt":"[晕]"},{"url":"35.gif","alt":"[折磨]"},
|
||||
{"url":"36.gif","alt":"[衰]"},{"url":"37.gif","alt":"[骷髅]"},{"url":"38.gif","alt":"[敲打]"},{"url":"39.gif","alt":"[再见]"},{"url":"46.gif","alt":"[猪头]"},{"url":"49.gif","alt":"[抱抱]"},{"url":"53.gif","alt":"[生日]"},
|
||||
{"url":"54.gif","alt":"[闪电]"},{"url":"55.gif","alt":"[炸弹]"},{"url":"56.gif","alt":"[刀]"},{"url":"57.gif","alt":"[足球]"},{"url":"59.gif","alt":"[便便]"},{"url":"60.gif","alt":"[咖啡]"},{"url":"61.gif","alt":"[饭]"},
|
||||
{"url":"62.gif","alt":"[药]"},{"url":"63.gif","alt":"[玫瑰]"},{"url":"64.gif","alt":"[凋谢]"},{"url":"66.gif","alt":"[爱心]"},{"url":"67.gif","alt":"[心碎]"},{"url":"69.gif","alt":"[礼物]"},{"url":"72.gif","alt":"[信封]"},
|
||||
{"url":"74.gif","alt":"[太阳]"},{"url":"75.gif","alt":"[月亮]"},{"url":"76.gif","alt":"[赞]"},{"url":"77.gif","alt":"[踩]"},{"url":"78.gif","alt":"[握手]"},{"url":"79.gif","alt":"[胜利]"},{"url":"89.gif","alt":"[西瓜]"},
|
||||
{"url":"90.gif","alt":"[下雨]"},{"url":"91.gif","alt":"[多云]"},{"url":"96.gif","alt":"[冷汗]"},{"url":"97.gif","alt":"[擦汗]"},{"url":"98.gif","alt":"[抠鼻]"},{"url":"99.gif","alt":"[鼓掌]"},{"url":"100.gif","alt":"[嗅大了]"},
|
||||
{"url":"101.gif","alt":"[坏笑]"},{"url":"102.gif","alt":"[右哼哼]"},{"url":"103.gif","alt":"[左哼哼]"},{"url":"104.gif","alt":"[哈欠]"}
|
||||
|
||||
|
||||
]
|
||||
export default emojiList;
|
||||
// const emojiList = [
|
||||
// {"url":"0.png","alt":"[惊讶]"},{"url":"1.png","alt":"[撇嘴]"},{"url":"2.png","alt":"[色]"},{"url":"3.png","alt":"[啊这]"},{"url":"4.png","alt":"[得意]"},{"url":"5.png","alt":"[流泪]"},{"url":"6.png","alt":"[害羞]"},
|
||||
// {"url":"7.png","alt":"[闭嘴]"},{"url":"8.png","alt":"[睡]"},{"url":"9.png","alt":"[大哭]"},{"url":"10.png","alt":"[尴尬]"},{"url":"11.png","alt":"[发怒]"},{"url":"12.png","alt":"[调皮]"},{"url":"13.png","alt":"[呲牙]"},
|
||||
// {"url":"14.png","alt":"[微笑]"},{"url":"15.png","alt":"[难过]"},{"url":"16.png","alt":"[酷]"},{"url":"18.png","alt":"[抓狂]"},{"url":"19.png","alt":"[吐]"},{"url":"20.png","alt":"[偷笑]"},{"url":"21.png","alt":"[可爱]"},
|
||||
// {"url":"22.png","alt":"[白眼]"},{"url":"23.png","alt":"[傲慢]"},{"url":"24.png","alt":"[饥饿]"},{"url":"25.png","alt":"[困]"},{"url":"26.png","alt":"[惊恐]"},{"url":"27.png","alt":"[流汗]"},{"url":"28.png","alt":"[憨笑]"},
|
||||
// {"url":"29.png","alt":"[悠闲]"},{"url":"30.png","alt":"[奋斗]"},{"url":"31.png","alt":"[咒骂]"},{"url":"32.png","alt":"[疑问]"},{"url":"33.png","alt":"[嘘]"},{"url":"34.png","alt":"[晕]"},{"url":"35.png","alt":"[折磨]"},
|
||||
// {"url":"36.png","alt":"[衰]"},{"url":"37.png","alt":"[骷髅]"},{"url":"38.png","alt":"[敲打]"},{"url":"39.png","alt":"[再见]"},{"url":"46.png","alt":"[猪头]"},{"url":"49.png","alt":"[抱抱]"},{"url":"53.png","alt":"[生日]"},
|
||||
// {"url":"54.png","alt":"[闪电]"},{"url":"55.png","alt":"[炸弹]"},{"url":"56.png","alt":"[刀]"},{"url":"57.png","alt":"[足球]"},{"url":"59.png","alt":"[便便]"},{"url":"60.png","alt":"[咖啡]"},{"url":"61.png","alt":"[饭]"},
|
||||
// {"url":"62.png","alt":"[药]"},{"url":"63.png","alt":"[玫瑰]"},{"url":"64.png","alt":"[凋谢]"},{"url":"66.png","alt":"[爱心]"},{"url":"67.png","alt":"[心碎]"},{"url":"69.png","alt":"[礼物]"},{"url":"72.png","alt":"[信封]"},
|
||||
// {"url":"74.png","alt":"[太阳]"},{"url":"75.png","alt":"[月亮]"},{"url":"76.png","alt":"[赞]"},{"url":"77.png","alt":"[踩]"},{"url":"78.png","alt":"[握手]"},{"url":"79.png","alt":"[胜利]"},{"url":"89.png","alt":"[西瓜]"},
|
||||
// {"url":"90.png","alt":"[下雨]"},{"url":"91.png","alt":"[多云]"},{"url":"96.png","alt":"[冷汗]"},{"url":"97.png","alt":"[擦汗]"},{"url":"98.png","alt":"[抠鼻]"},{"url":"99.png","alt":"[鼓掌]"},{"url":"100.png","alt":"[嗅大了]"},
|
||||
// {"url":"101.png","alt":"[坏笑]"},{"url":"102.png","alt":"[右哼哼]"},{"url":"103.png","alt":"[左哼哼]"},{"url":"104.png","alt":"[哈欠]"},{"url":"105.png","alt":"[鄙视]"},{"url":"106.png","alt":"[委屈]"},{"url":"107.png","alt":"[快哭了]"},
|
||||
// {"url":"108.png","alt":"[阴险]"},{"url":"109.png","alt":"[亲亲]"},{"url":"110.png","alt":"[吓]"},{"url":"111.png","alt":"[可怜]"},{"url":"112.png","alt":"[菜刀]"},{"url":"113.png","alt":"[啤酒]"},{"url":"114.png","alt":"[篮球]"},
|
||||
// {"url":"115.png","alt":"[乒乓]"},{"url":"116.png","alt":"[示爱]"},{"url":"117.png","alt":"[瓢虫]"},{"url":"118.png","alt":"[抱拳]"},{"url":"119.png","alt":"[勾引]"},{"url":"120.png","alt":"[拳头]"},{"url":"121.png","alt":"[差劲]"},
|
||||
// {"url":"122.png","alt":"[爱你]"},{"url":"123.png","alt":"[NO]"},{"url":"124.png","alt":"[OK]"},{"url":"136.png","alt":"[双喜]"},{"url":"137.png","alt":"[鞭炮]"},{"url":"138.png","alt":"[灯笼]"},{"url":"139.png","alt":"[麻将]"},
|
||||
// {"url":"140.png","alt":"[唱歌]"},{"url":"141.png","alt":"[包包]"},{"url":"142.png","alt":"[信]"},{"url":"143.png","alt":"[象棋]"},{"url":"144.png","alt":"[礼物]"},{"url":"145.png","alt":"[祈祷]"},{"url":"146.png","alt":"[爆筋]"},
|
||||
// {"url":"147.png","alt":"[棒棒糖]"},{"url":"148.png","alt":"[喝奶]"},{"url":"149.png","alt":"[吃面]"},{"url":"150.png","alt":"[香蕉]"},{"url":"151.png","alt":"[飞机]"},{"url":"152.png","alt":"[汽车]"},{"url":"153.png","alt":"[高铁]"},
|
||||
// {"url":"154.png","alt":"[动车]"},{"url":"155.png","alt":"[动车头]"},{"url":"156.png","alt":"[多云]"},{"url":"157.png","alt":"[下雨]"},{"url":"158.png","alt":"[钞票]"},{"url":"159.png","alt":"[熊猫]"},{"url":"160.png","alt":"[电灯泡]"},
|
||||
// {"url":"161.png","alt":"[七彩]"},{"url":"162.png","alt":"[闹钟]"},{"url":"163.png","alt":"[雨伞]"},{"url":"164.png","alt":"[气球]"},{"url":"165.png","alt":"[钻戒]"},{"url":"166.png","alt":"[座椅]"},{"url":"167.png","alt":"[纸巾]"},
|
||||
// {"url":"168.png","alt":"[药丸]"},{"url":"169.png","alt":"[手枪]"},{"url":"170.png","alt":"[青蛙]"},{"url":"171.png","alt":"[热汤]"},{"url":"172.png","alt":"[眨眼睛]"},{"url":"173.png","alt":"[泪奔]"},{"url":"174.png","alt":"[无奈]"},
|
||||
// {"url":"175.png","alt":"[卖萌]"},{"url":"176.png","alt":"[小纠结]"},{"url":"177.png","alt":"[喷血]"},{"url":"178.png","alt":"[斜眼笑]"},{"url":"179.png","alt":"[高傲]"},{"url":"180.png","alt":"[惊喜]"},{"url":"181.png","alt":"[骚扰]"},
|
||||
// {"url":"182.png","alt":"[笑哭]"},{"url":"183.png","alt":"[我最美]"},{"url":"184.png","alt":"[河蟹]"},{"url":"185.png","alt":"[羊驼]"},{"url":"186.png","alt":"[板栗]"},{"url":"187.png","alt":"[幽灵]"},{"url":"188.png","alt":"[鸡蛋]"},
|
||||
// {"url":"189.png","alt":"[魔方]"},{"url":"190.png","alt":"[转花圈]"},{"url":"191.png","alt":"[搓澡]"},{"url":"192.png","alt":"[红包]"},{"url":"200.png","alt":"[拜托]"},{"url":"201.png","alt":"[点赞]"},{"url":"202.png","alt":"[无聊]"},
|
||||
// {"url":"203.png","alt":"[托脸]"},{"url":"204.png","alt":"[吃]"},{"url":"205.png","alt":"[送花]"},{"url":"206.png","alt":"[害怕]"},{"url":"207.png","alt":"[花痴]"},{"url":"208.png","alt":"[小样儿]"},{"url":"210.png","alt":"[飙泪]"},
|
||||
// {"url":"211.png","alt":"[我不看]"},{"url":"212.png","alt":"[托腮]"},{"url":"245.png","alt":"[加油必胜]"},{"url":"246.png","alt":"[抱抱]"},{"url":"247.png","alt":"[白条]"},{"url":"260.png","alt":"[白条]"},{"url":"261.png","alt":"[搬砖中]"},
|
||||
// {"url":"262.png","alt":"[脑壳疼]"},{"url":"263.png","alt":"[沧桑]"},{"url":"264.png","alt":"[捂脸]"},{"url":"265.png","alt":"[辣眼睛]"},{"url":"266.png","alt":"[哦呦]"},{"url":"267.png","alt":"[头秃]"},{"url":"268.png","alt":"[问号脸]"},
|
||||
// {"url":"269.png","alt":"[暗中观察]"},{"url":"270.png","alt":"[emm]"},{"url":"271.png","alt":"[吃瓜]"},{"url":"272.png","alt":"[呵呵哒]"},{"url":"273.png","alt":"[白条]"},{"url":"274.png","alt":"[白条]"},{"url":"newemoji_002.png","alt":"[好的]"},
|
||||
// {"url":"newemoji_003.png","alt":"[白眼]"},{"url":"newemoji_004.png","alt":"[鬼脸]"},{"url":"newemoji_005.png","alt":"[马赛克]"},{"url":"newemoji_006.png","alt":"[喝茶]"},{"url":"newemoji_007.png","alt":"[摸鱼]"},{"url":"newemoji_008.png","alt":"[大笑]"},{"url":"newemoji_009.png","alt":"[请滚]"},
|
||||
// {"url":"newemoji_010.png","alt":"[睁眼]"},{"url":"newemoji_011.png","alt":"[儿子乖]"},{"url":"newemoji_012.png","alt":"[脸疼]"},{"url":"newemoji_013.png","alt":"[考虑]"},{"url":"newemoji_014.png","alt":"[惊掉下巴]"},{"url":"newemoji_015.png","alt":"[遮眼]"},{"url":"newemoji_016.png","alt":"[比爱心]"},
|
||||
// {"url":"newemoji_017.png","alt":"[喝彩]"}
|
||||
// ]
|
||||
// export default emojiList;
|
||||
3139
common/emoji/sina.js
Normal file
3139
common/emoji/sina.js
Normal file
File diff suppressed because it is too large
Load Diff
1763
community/community/category.vue
Normal file
1763
community/community/category.vue
Normal file
File diff suppressed because it is too large
Load Diff
2494
community/community/detail.vue
Normal file
2494
community/community/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
406
community/community/friend.vue
Normal file
406
community/community/friend.vue
Normal file
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="zhuige-friends">
|
||||
<view class="zhuige-friends-box">
|
||||
<tab :tabs="tabs" :cur-tab="cur_tab" @clickTab="clickTab"></tab>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-block">
|
||||
<!-- 用户卡 基于发帖用户信息，增加用户列表专用 zhuige-friends-block -->
|
||||
<template v-if="userList.length>0">
|
||||
<view v-for="(user, index) in userList" :key="index" @click="goToPage(user)" class="zhuige-social-poster-blcok zhuige-friends-block">
|
||||
<view class="zhuige-social-poster">
|
||||
<block v-if="(cur_tab == 'follow')">
|
||||
<view class="zhuige-social-poster-avatar">
|
||||
<image mode="aspectFill" :src="user.avatar"></image>
|
||||
</view>
|
||||
<view class="zhuige-social-poster-info">
|
||||
<view>
|
||||
<text>{{user.username}}</text>
|
||||
<!-- 图2 认证-->
|
||||
<image mode="aspectFill" src="https://q.zhuige.com/wp-content/uploads/2022/08/lvv.png"></image>
|
||||
<!-- 图1 vip-->
|
||||
<image class="zhuige-social-vip" mode="aspectFit" src="https://q.zhuige.com/wp-content/uploads/2022/09/vv1-1.png"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{__('作品')}} {{user.post_count}}</text>
|
||||
<text>/</text>
|
||||
<text>{{__('粉丝')}} {{user.fans_count}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="zhuige-social-poster-avatar">
|
||||
<image mode="aspectFill" :src="user.user_avatar"></image>
|
||||
</view>
|
||||
<view class="zhuige-social-poster-info">
|
||||
<view>
|
||||
<text>{{user.user_nickname}}</text>
|
||||
<!-- 图2 认证-->
|
||||
<image mode="aspectFill" src="https://q.zhuige.com/wp-content/uploads/2022/08/lvv.png"></image>
|
||||
<!-- 图1 vip-->
|
||||
<image class="zhuige-social-vip" mode="aspectFit" src="https://q.zhuige.com/wp-content/uploads/2022/09/vv1-1.png"></image>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{__('作品')}} {{user.post_count}}</text>
|
||||
<text>/</text>
|
||||
<text>{{__('粉丝')}} {{user.fans_count}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
<view class="zhuige-social-opt" v-if="(IsLoginUser)" @click.stop="clickFollowUser(user.user_id)">
|
||||
<view v-if="user.is_follow==1 && user.is_fans==1">已互关</view>
|
||||
<view v-else-if="user.is_follow==1 && user.is_fans==0">已关注</view>
|
||||
<view v-else-if="user.is_follow==0 && user.is_fans==1" class="active">回关</view>
|
||||
<view v-else class="active">+关注</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="m-nullpage">
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-sousuo-sousuo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{ __('亲~找不到您想要的信息') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
import Tab from '../components/tab.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tab
|
||||
},
|
||||
|
||||
data() {
|
||||
this.loginReload = false;
|
||||
|
||||
return {
|
||||
userList: [],
|
||||
loadStatus: 'loadmore',
|
||||
page: 1,
|
||||
ispage: false,
|
||||
flag: true,
|
||||
current: 0,
|
||||
tabs: [{
|
||||
id: 'follow',
|
||||
title: '关注'
|
||||
},
|
||||
{
|
||||
id: 'fans',
|
||||
title: '粉丝'
|
||||
},
|
||||
],
|
||||
cur_tab: 'follow',
|
||||
IsLoginUser: false,
|
||||
|
||||
loadMoreFollow: 'more',
|
||||
follows: [],
|
||||
loadedFollow: false,
|
||||
|
||||
loadMoreFan: 'more',
|
||||
fans: [],
|
||||
loadedFan: false,
|
||||
|
||||
noDataTip: '哇哦，什么也没有',
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
if (options.user_id) {
|
||||
this.user_id = options.user_id;
|
||||
}
|
||||
this.uid == that.userInfo.user_id && that.setData({
|
||||
IsLoginUser: true
|
||||
});
|
||||
|
||||
this.getUserList()
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
onShow() {
|
||||
// if (this.loginReload) {
|
||||
// this.loginReload = false;
|
||||
|
||||
// this.refresh();
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
|
||||
onShareAppMessage() {},
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '粉丝/关注-' + getApp().globalData.appName,
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getUserList() {
|
||||
this.loadStatus = 'loading';
|
||||
var that = this;
|
||||
var params = {
|
||||
page: this.page,
|
||||
rows: 100,
|
||||
type: this.cur_tab,
|
||||
user_id: this.user_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.friend_lists,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
userList: that.userList.concat(data.items)
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
flag: true,
|
||||
ispage: true,
|
||||
userList: that.userList.concat(data.items)
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
goToPage: function(item) {
|
||||
var url = '';
|
||||
if (this.cur_tab == 'follow') {
|
||||
url = '/community/community/userspace?uid=' + item.friend_id
|
||||
} else {
|
||||
url = '/community/community/userspace?uid=' + item.user_id
|
||||
}
|
||||
this.$.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
//----- event start -----
|
||||
/**
|
||||
* 关注用户事件
|
||||
*/
|
||||
onFlollowUser(data) {
|
||||
// this.refresh();
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
refresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换TAB
|
||||
*/
|
||||
clickTab(tab) {
|
||||
console.log(tab)
|
||||
this.cur_tab = tab.id;
|
||||
this.page = 1;
|
||||
this.userList = [];
|
||||
this.getUserList()
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击关注用户
|
||||
*/
|
||||
clickFollowUser(user_id) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载关注者
|
||||
*/
|
||||
loadFollows() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载粉丝
|
||||
*/
|
||||
loadFans() {
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.zhuige-friends {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-friends-block {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.zhuige-friends-block:last-of-type {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.zhuige-social-opt {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
width: 22% !important;
|
||||
}
|
||||
|
||||
.zhuige-friends-block .zhuige-social-opt view {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
width: 140rpx;
|
||||
text-align: center;
|
||||
background: #F3f3f3;
|
||||
font-size: 28rpx;
|
||||
font-weight: 300;
|
||||
border-radius: 60rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.zhuige-friends-block .zhuige-social-opt view.active {
|
||||
background: #010101;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.zhuige-friends-box {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-block {
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-blcok {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-social-poster {
|
||||
width: 84%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-avatar {
|
||||
flex: 0 0 96rpx;
|
||||
height: 96rpx;
|
||||
width: 96rpx;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-avatar image {
|
||||
height: 96rpx;
|
||||
width: 96rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info {
|
||||
padding-left: 20rpx;
|
||||
margin-bottom: -4rpx;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view {
|
||||
padding: 12rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50rpx;
|
||||
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(1) text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
color: #010101
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(1) image:nth-child(2) {
|
||||
height: 28rpx;
|
||||
width: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(1) image:nth-child(2).zhuige-social-vip,
|
||||
.zhuige-social-poster-info view:nth-child(1) image:nth-child(3).zhuige-social-vip {
|
||||
height: 28rpx;
|
||||
width: 56rpx;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(2) text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.zhuige-social-poster-info view:nth-child(2) text:nth-child(2) {
|
||||
margin: 0 12rpx;
|
||||
}
|
||||
</style>
|
||||
1494
community/community/lists.vue
Normal file
1494
community/community/lists.vue
Normal file
File diff suppressed because it is too large
Load Diff
131
community/community/plate.vue
Normal file
131
community/community/plate.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='bk_box'>
|
||||
<view class='bkspan'>
|
||||
<block v-for="(item, index) in CategoryList" :key="index">
|
||||
<view @click="ChoosePlate(item)" :id="item.story_category_id" :name="item.story_category_name">
|
||||
<view :class="'bkspan_span ' + (item.story_category_id==storyCategoryId?'borred':'')">
|
||||
{{item.story_category_name}}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="AddPlate" class="zhuige-base-button">
|
||||
<view>{{__('确定')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
CategoryList: [],
|
||||
storyCategoryId: 0,
|
||||
storyCategory: {},
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
var that = this;
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('板块')
|
||||
});
|
||||
if (options.storyCategoryId) {
|
||||
this.setData({
|
||||
storyCategoryId: options.storyCategoryId
|
||||
})
|
||||
}
|
||||
that.GetCategoryList()
|
||||
},
|
||||
methods: {
|
||||
/* 版块 */
|
||||
GetCategoryList: function() {
|
||||
var that = this,
|
||||
params = {};
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.sns.category_lists,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status && data.items.length > 0) {
|
||||
that.CategoryList = data.items
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
ChoosePlate: function(item) {
|
||||
console.log(item)
|
||||
this.setData({
|
||||
storyCategory: item,
|
||||
storyCategoryId: item.story_category_id
|
||||
})
|
||||
console.log(this.storyCategoryId)
|
||||
},
|
||||
AddPlate: function() {
|
||||
var that = this;
|
||||
that.$.backpage(1, function() {
|
||||
var data = {
|
||||
storyCategory: that.storyCategory
|
||||
};
|
||||
that.notice.postNotificationName("RefreshPlate", data)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bk_box {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.bkspan_span {
|
||||
border: 1rpx solid #b6b6b6;
|
||||
color: #878787;
|
||||
font-size: 28rpx;
|
||||
margin: 8rpx 7rpx;
|
||||
border-radius: 35rpx;
|
||||
text-align: center;
|
||||
padding: 5rpx 20rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bkspan {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zhuige-base-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 40rpx 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.zhuige-base-button view {
|
||||
width: 360rpx;
|
||||
text-align: center;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 96rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
background: #db384c;
|
||||
}
|
||||
|
||||
.borred {
|
||||
border: 1rpx solid #db384c;
|
||||
color: #db384c;
|
||||
}
|
||||
</style>
|
||||
975
community/community/post.vue
Normal file
975
community/community/post.vue
Normal file
@ -0,0 +1,975 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 输入框 -->
|
||||
|
||||
<view class="zhuige-post-box">
|
||||
<view class="box_title">
|
||||
<input class='box_text_input' maxlength="18" :placeholder="__('帖子标题3~18个字以内')" placeholder-style="color:#999;font-size: 30rpx;" v-model="story_title"></input>
|
||||
</view>
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-input">
|
||||
<textarea v-model="story_content" :placeholder="__('想说你就多说点...')" maxlength="3000"></textarea>
|
||||
</view>
|
||||
<view class="zhuige-post-plug">
|
||||
<view class="zhuige-post-opt">
|
||||
<view @click="clickType('image')" :class="{active:type=='image'}">
|
||||
<uni-icons type="image-filled" color="#333333" size="20"></uni-icons>
|
||||
<text>{{__('图文')}}</text>
|
||||
</view>
|
||||
<view @click="clickType('video')" :class="{active:type=='video'}">
|
||||
<uni-icons type="videocam-filled" color="#333333" size="20"></uni-icons>
|
||||
<text>{{__('视频')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhuige-post-count">{{story_content.length}}/3000</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片列表 -->
|
||||
<view v-if="type=='image'" class="zhuige-post-box">
|
||||
<view class="zhuige-upload-set">
|
||||
<view v-if="ImgList.length<9" @click="clickAddImage">
|
||||
<uni-icons type="plusempty" color="#777777" size="30"></uni-icons>
|
||||
<view>{{__('图片')}}</view>
|
||||
</view>
|
||||
<!-- 上传后，增加 class="loaded" view替换为image，icon type替换为clear -->
|
||||
<view class="loaded" v-for="(image, index) in ImgList" :key="index">
|
||||
<uni-icons class="img-clear" type="clear" color="#eee" size="24" @click="clickDelImage(index)"></uni-icons>
|
||||
<image mode="aspectFill" :src="image" :data-src="image" @click="previewImage"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 视频 -->
|
||||
<view v-else-if="type=='video'" class="zhuige-post-video-box">
|
||||
<video class="loaded" v-if="story_video" :src="story_video" @click="clickAddVideo"></video>
|
||||
<view v-else @click="clickAddVideo" class="zhuige-upload-set">
|
||||
<view>
|
||||
<uni-icons type="plusempty" color="#777777" size="30"></uni-icons>
|
||||
<view>{{__('视频')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhuige-upload-set">
|
||||
<view class="loaded" v-if="video_cover">
|
||||
<!-- <uni-icons class="img-clear" type="clear" color="#eee" size="24" @click="clickDelVideoPoster"></uni-icons> -->
|
||||
<image mode="aspectFill" :src="video_cover" @click="clickAddVideoPoster"></image>
|
||||
</view>
|
||||
<view v-else @click="clickAddVideoPoster">
|
||||
<uni-icons type="plusempty" color="#777777" size="30"></uni-icons>
|
||||
<view>{{__('封面')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择行 -->
|
||||
<view class="zhuige-post-box">
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-line">
|
||||
<view>{{__('推荐商品：')}}</view>
|
||||
<view @tap='shopsearch'>
|
||||
<view>{{ProductName?ProductName: __('请选择商品')}}</view>
|
||||
<uni-icons type="forward" color="#BBBBBB" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择行 -->
|
||||
<view class="zhuige-post-box" v-if="false">
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-line">
|
||||
<view>你的位置：</view>
|
||||
<view @click="clickAddress">
|
||||
<view>{{marker?marker:'请选择位置'}}</view>
|
||||
<uni-icons type="forward" color="#BBBBBB" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择行 -->
|
||||
<view class="zhuige-post-box">
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-line">
|
||||
<view>{{__('动态板块：')}}</view>
|
||||
<view @click="clickSubject">
|
||||
<view>{{storyCategoryName?storyCategoryName:'请选择板块'}}</view>
|
||||
<uni-icons type="forward" color="#BBBBBB" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择行 @ 好友 -->
|
||||
<view v-if="at_switch==1" class="zhuige-post-box">
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-line">
|
||||
<view>@ 好友：</view>
|
||||
<view @click="clickAtList">
|
||||
<view>已选{{atlist.length}}个好友</view>
|
||||
<uni-icons type="forward" color="#BBBBBB" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择行 积分数 -->
|
||||
<view v-if="score_switch==1" class="zhuige-post-box">
|
||||
<view class="zhuige-block">
|
||||
<view class="zhuige-post-line">
|
||||
<view>积分数：</view>
|
||||
<view>
|
||||
<input type="number" v-model="score" placeholder="如：88，填写即开启积分阅读全文" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部大按钮 -->
|
||||
<view class="zhuige-base-button">
|
||||
<view @click="AddMemberPosts">
|
||||
<view>{{__('发布')}}</view>
|
||||
</view>
|
||||
<view @click="SaveDraft">
|
||||
<view>{{__('保存草稿')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dateUtil from "../../helpers/util_date";
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
var Interval, picPath = [];
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
this.requesting = false;
|
||||
|
||||
return {
|
||||
type: 'image',
|
||||
|
||||
ProductName: '',
|
||||
|
||||
story_title: "",
|
||||
|
||||
story_content: '',
|
||||
|
||||
shopback: [],
|
||||
storyCategoryId: 0,
|
||||
storyCategoryName: '',
|
||||
|
||||
//图片
|
||||
ImgList: [],
|
||||
objlist: [],
|
||||
sortList: [],
|
||||
item_ids: [],
|
||||
|
||||
//视频
|
||||
story_video: undefined,
|
||||
video_cover: undefined,
|
||||
tiaozhuan: true,
|
||||
|
||||
|
||||
|
||||
|
||||
// 是否开启帖子积分功能
|
||||
score_switch: 0,
|
||||
// 积分值
|
||||
score: '',
|
||||
|
||||
|
||||
|
||||
forum: undefined,
|
||||
|
||||
// 选择的话题
|
||||
subjects: [],
|
||||
|
||||
// 是否启用 @ 好友的功能
|
||||
at_switch: 0,
|
||||
// 选择的好友
|
||||
atlist: [],
|
||||
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
marker: '',
|
||||
address: '',
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('发帖')
|
||||
});
|
||||
this.setData({
|
||||
options: options
|
||||
});
|
||||
|
||||
if (options.type) {
|
||||
this.type = options.type;
|
||||
}
|
||||
|
||||
that.$.getStorage({
|
||||
key: "draft_key",
|
||||
success: function(t) {
|
||||
t.data ? that.getStorage(t) : picPath = []
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
that.notice.addNotification("RefreshCoupon", that.RefreshCoupon, that);
|
||||
that.notice.addNotification("RefreshPlate", that.RefreshPlate, that);
|
||||
|
||||
},
|
||||
onShow: function() {
|
||||
var that = this;
|
||||
Interval = setInterval(function() {
|
||||
that.zdSaveDraft()
|
||||
},
|
||||
3e4)
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
let that = this;
|
||||
this.notice.removeNotification("RefreshCoupon", that);
|
||||
this.notice.removeNotification("RefreshPlate", that);
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '发布-' + getApp().globalData.appName,
|
||||
path: Util.addShareSource('pages/bbs/post/post?n=n')
|
||||
};
|
||||
},
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '发布-' + getApp().globalData.appName,
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
getStorage: function(t) {
|
||||
var that = this;
|
||||
//console.log(t.data);
|
||||
t = JSON.parse(t.data);
|
||||
//console.log(t);
|
||||
for (var s = [], o = 0; o < t.story_file.length; o++) {
|
||||
s.push({
|
||||
Url: t.story_file[o],
|
||||
order: o
|
||||
});
|
||||
}
|
||||
picPath = s;
|
||||
that.setData({
|
||||
type: t.type,
|
||||
story_title: t.story_title,
|
||||
ImgList: t.type == 'image' ? t.story_file : [],
|
||||
video_cover: t.type == 'video' ? t.story_file[0] : '',
|
||||
shopback: that.shopback.concat(t.proList),
|
||||
storyCategoryId: t.story_category_id,
|
||||
story_content: t.story_content,
|
||||
story_video: t.story_video,
|
||||
storyCategoryName: t.storyCategoryName,
|
||||
ProductName: t.ProductName,
|
||||
});
|
||||
|
||||
picPath = [];
|
||||
|
||||
},
|
||||
RefreshPlate: function(e) {
|
||||
console.log(e)
|
||||
this.setData({
|
||||
storyCategoryId: e.storyCategory.story_category_id,
|
||||
storyCategoryName: e.storyCategory.story_category_name,
|
||||
})
|
||||
},
|
||||
RefreshCoupon: function(t) {
|
||||
if (true) {
|
||||
this.setData({
|
||||
shopback: t.couponItemId
|
||||
});
|
||||
} else {
|
||||
var a = [];
|
||||
a = this.shopback;
|
||||
for (var s = 0; s < a.length; s++) {
|
||||
for (var o = 0; o < t.couponItemId.length; o++) {
|
||||
a[s].item_id == t.couponItemId[o].item_id && a.splice(s, 1);
|
||||
}
|
||||
}
|
||||
for (o = 0; o < t.couponItemId.length; o++) {
|
||||
a.push(t.couponItemId[o]);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
shopback: a
|
||||
})
|
||||
}
|
||||
var name = '';
|
||||
console.log(this.shopback)
|
||||
for (var i = 0; i < this.shopback.length; i++) {
|
||||
name += this.shopback[i].ProductName + ','
|
||||
}
|
||||
this.ProductName = name;
|
||||
|
||||
},
|
||||
/**
|
||||
* 点击打开链接
|
||||
*/
|
||||
openLink(link) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换类型
|
||||
*/
|
||||
clickType(type) {
|
||||
this.type = type;
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加图片
|
||||
*/
|
||||
clickAddImage() {
|
||||
var that = this,
|
||||
max_num = 9;
|
||||
if (that.$.isNull(that.ImgList) || (max_num = 9 - that.ImgList.length), 0 != max_num) {
|
||||
|
||||
that.$.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: function(n) {
|
||||
that.$.showLoading();
|
||||
var r = n.tempFilePaths;
|
||||
that.$.uploadFile({
|
||||
url: that.Config.URL.upload,
|
||||
method: 'POST',
|
||||
filePath: r[0],
|
||||
name: 'upfile',
|
||||
//header: { 'content-type': 'multipart/form-data' },
|
||||
success: function(n) {
|
||||
that.$.hideLoading();
|
||||
var up_res = that.$.parseJSON(n.data);
|
||||
console.log(up_res)
|
||||
var s = up_res.data.url;
|
||||
that.ImgList.push(s);
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
that.$.alert(that.__("最多上传9张图片！"))
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除图片
|
||||
*/
|
||||
clickDelImage(index) {
|
||||
var that = this;
|
||||
that.$.confirm("是否放弃上传本张图片?", function(t) {
|
||||
if (t.confirm) {
|
||||
if (index >= 0 && index < that.ImgList.length) {
|
||||
that.ImgList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加视频
|
||||
*/
|
||||
clickAddVideo() {
|
||||
let that = this;
|
||||
// 上传视频
|
||||
//console.log('上传视频')
|
||||
uni.chooseVideo({
|
||||
maxDuration: 10,
|
||||
count: 1,
|
||||
camera: 'back',
|
||||
sourceType: ['camera', 'album'],
|
||||
success: function(result) {
|
||||
uni.showToast({
|
||||
title: that.__('上传中'),
|
||||
icon: 'loading',
|
||||
duration: 10000,
|
||||
mask: true,
|
||||
})
|
||||
|
||||
that.$.uploadFile({
|
||||
url: that.Config.URL.upload,
|
||||
method: "POST",
|
||||
filePath: result.tempFilePath,
|
||||
name: "upfile",
|
||||
formData: {
|
||||
video: true
|
||||
},
|
||||
//header: {"content-type": "multipart/form-data"},
|
||||
success: function(t) {
|
||||
//console.log(t), //console.log(t.data);
|
||||
var a = JSON.parse(t.data);
|
||||
//console.log(a);
|
||||
var s = that.$.parseJSON(t.data);
|
||||
|
||||
if (s.status == 200) {
|
||||
that.setData({
|
||||
story_video: s.data.url,
|
||||
video_cover: s.data.thumb,
|
||||
})
|
||||
} else {
|
||||
s.$.confirm(up_res.msg || that.__('发生错误'));
|
||||
}
|
||||
|
||||
},
|
||||
fail: function(t) {},
|
||||
complete: function(t) {
|
||||
uni.hideToast();
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function(t) {},
|
||||
complete: function(t) {}
|
||||
})
|
||||
},
|
||||
previewImage: function(e) {
|
||||
//预览图片
|
||||
var current = e.target.dataset.src
|
||||
|
||||
var that = this;
|
||||
var n = this.ImgList;
|
||||
|
||||
uni.previewImage({
|
||||
current: current,
|
||||
urls: n
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加视频封面
|
||||
*/
|
||||
clickAddVideoPoster() {
|
||||
var that = this;
|
||||
that.$.showLoading();
|
||||
that.$.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: function(n) {
|
||||
that.$.showLoading();
|
||||
var r = n.tempFilePaths;
|
||||
that.$.uploadFile({
|
||||
url: that.Config.URL.upload,
|
||||
method: 'POST',
|
||||
filePath: r[0],
|
||||
name: 'upfile',
|
||||
//header: { 'content-type': 'multipart/form-data' },
|
||||
success: function(n) {
|
||||
that.$.hideLoading();
|
||||
var up_res = that.$.parseJSON(n.data);
|
||||
that.video_cover = up_res.data.url;
|
||||
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除视频封面
|
||||
*/
|
||||
clickDelVideoPoster() {
|
||||
this.video_cover = '';
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择话题结果
|
||||
*/
|
||||
onSubjectChange(data) {
|
||||
this.subjects = data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择 @ 的用户
|
||||
*/
|
||||
onAtlistChange(data) {
|
||||
this.atlist = data;
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 选择商品
|
||||
*/
|
||||
shopsearch: function() {
|
||||
var that = this
|
||||
var ids = [];
|
||||
for (var i = 0; i < this.shopback.length; i++) {
|
||||
ids.push(this.shopback[i].item_id)
|
||||
}
|
||||
that.$.navigateTo({
|
||||
url: "/community/community/searchsq?num=" + (4 - this.shopback.length) + "&item_ids=" +
|
||||
JSON.stringify(ids)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择板块
|
||||
*/
|
||||
clickSubject() {
|
||||
var that = this
|
||||
|
||||
that.$.navigateTo({
|
||||
url: "/community/community/plate?storyCategoryId=" + that.storyCategoryId
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 发帖
|
||||
*/
|
||||
AddMemberPosts: function() {
|
||||
var that = this;
|
||||
if (19 < that.story_title.length || that.story_title.length < 3) {
|
||||
that.$.alert(that.__("标题在3~18字内"));
|
||||
} else if (that.story_content.length > 3000) {
|
||||
that.$.alert(that.__("内容在0~3000字内"));
|
||||
} else if (0 != that.storyCategoryId) {
|
||||
var t = [];
|
||||
that.$.isNull(that.story_content) || t.push(0);
|
||||
var a = [];
|
||||
if (that.type == 'image') {
|
||||
a = that.ImgList;
|
||||
} else if (that.type == 'video') {
|
||||
a.push(that.video_cover)
|
||||
}
|
||||
|
||||
that.setData({
|
||||
sortList: t
|
||||
});
|
||||
var e = [];
|
||||
console.log(this.shopback)
|
||||
for (var o = 0; o < this.shopback.length; o++) {
|
||||
e.push(this.shopback[o].item_id);
|
||||
}
|
||||
if (that.setData({
|
||||
objlist: e
|
||||
}), 1 == that.tiaozhuan) {
|
||||
that.setData({
|
||||
tiaozhuan: false
|
||||
});
|
||||
var params = {
|
||||
story_category_id: that.storyCategoryId,
|
||||
story_title: that.story_title,
|
||||
story_content: that.story_content,
|
||||
story_file: JSON.stringify(a || []),
|
||||
SortList: that.sortList,
|
||||
item_id_row: JSON.stringify(that.objlist || []),
|
||||
story_video: that.type == 'video' ? that.story_video : '',
|
||||
};
|
||||
console.log(params)
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_add,
|
||||
method: "POST",
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.$.showToast({
|
||||
title: that.__("已发布，待审核"),
|
||||
icon: "success",
|
||||
duration: 3e3
|
||||
}), clearTimeout(a);
|
||||
var a = setTimeout(function() {
|
||||
that.setData({
|
||||
story_title: "",
|
||||
story_content: "",
|
||||
storyCategoryId: 0,
|
||||
CategoryList: [],
|
||||
ImgList: [],
|
||||
sortList: [],
|
||||
shopback: [],
|
||||
caogaolist: [],
|
||||
proLista: [],
|
||||
objlist: [],
|
||||
story_video: "",
|
||||
storyCategoryName: '',
|
||||
ProductName: '',
|
||||
});
|
||||
|
||||
picPath = [];
|
||||
//that.$.gopage({url: "/community/community/detail?id=" + data.story_id})
|
||||
that.$.gopage({
|
||||
url: '/community/community/userspace'
|
||||
})
|
||||
},
|
||||
1500);
|
||||
that.$.removeStorage({
|
||||
key: "draft_key",
|
||||
success: function(t) {
|
||||
//console.log(t.data)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.$.alert(msg);
|
||||
that.setData({
|
||||
tiaozhuan: true
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
that.$.showToast({
|
||||
title: "请选择板块",
|
||||
icon: "success",
|
||||
duration: 2e3
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存草稿
|
||||
*/
|
||||
SaveDraft: function() {
|
||||
var that = this,
|
||||
a = [];
|
||||
that.$.isNull(that.story_content) || a.push(0);
|
||||
var s = [];
|
||||
if (that.type == 'image') {
|
||||
s = that.ImgList;
|
||||
} else if (that.type == 'video') {
|
||||
s.push(that.video_cover)
|
||||
}
|
||||
that.setData({
|
||||
sortList: s
|
||||
});
|
||||
var e = [];
|
||||
for (var o = 0; o < this.shopback.length; o++) {
|
||||
e.push(this.shopback[o]);
|
||||
}
|
||||
that.setData({
|
||||
objlist: e
|
||||
});
|
||||
var i = {
|
||||
story_category_id: that.storyCategoryId || 0,
|
||||
story_title: that.story_title,
|
||||
story_content: that.story_content,
|
||||
story_file: s || [],
|
||||
SortList: that.sortList,
|
||||
proList: that.objlist || [],
|
||||
story_video: that.type == 'video' ? that.story_video : '',
|
||||
storyCategoryName: that.storyCategoryName,
|
||||
ProductName: that.ProductName,
|
||||
type: that.type
|
||||
},
|
||||
n = JSON.stringify(i);
|
||||
|
||||
|
||||
that.$.setStorage({
|
||||
key: "draft_key",
|
||||
data: n
|
||||
}), that.$.showToast({
|
||||
title: that.__("保存成功"),
|
||||
icon: "success",
|
||||
duration: 1500
|
||||
})
|
||||
},
|
||||
zdSaveDraft: function() {
|
||||
var that = this,
|
||||
a = [];
|
||||
return;
|
||||
that.$.isNull(that.story_content) || a.push(0);
|
||||
var s = [];
|
||||
if (!that.$.isNull(that.ImgList)) {
|
||||
for (var o = 0; o < that.ImgList.length; o++) {
|
||||
a.push(o + 1), s.push(that.ImgList[o].Url);
|
||||
}
|
||||
}
|
||||
that.setData({
|
||||
sortList: a
|
||||
});
|
||||
var e = [];
|
||||
for (var o = 0; o < this.shopback.length; o++) {
|
||||
e.push(this.shopback[o]);
|
||||
}
|
||||
that.setData({
|
||||
objlist: e
|
||||
});
|
||||
var i = {
|
||||
story_category_id: that.storyCategoryId,
|
||||
story_title: that.story_title,
|
||||
story_content: that.story_content,
|
||||
story_file: s || [],
|
||||
SortList: that.sortList,
|
||||
proList: that.objlist || [],
|
||||
story_video: that.story_video
|
||||
},
|
||||
n = JSON.stringify(i);
|
||||
that.$.setStorage({
|
||||
key: "draft_key",
|
||||
data: n
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.box_title {
|
||||
margin: 20rpx 0;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #010101;
|
||||
}
|
||||
|
||||
.zhuige-block {
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.zhuige-post-box {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zhuige-post-video-box {
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zhuige-post-video-box video {
|
||||
width: 164rpx;
|
||||
height: 164rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.content .zhuige-post-box:nth-last-child(2) {
|
||||
margin-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.zhuige-post-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 2.2em;
|
||||
height: 2.2em;
|
||||
}
|
||||
|
||||
.zhuige-post-line>view:nth-child(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
width: 156rpx;
|
||||
}
|
||||
|
||||
.zhuige-post-line>view:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 510rpx;
|
||||
}
|
||||
|
||||
.zhuige-post-line view:nth-child(2) view {
|
||||
margin-right: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-post-line view:nth-child(2) input {
|
||||
width: 450rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zhuige-upload-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-upload-set>view {
|
||||
height: 154rpx;
|
||||
width: 154rpx;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
text-align: center;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.zhuige-upload-set>view view {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #777777;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
margin-top: -28rpx;
|
||||
}
|
||||
|
||||
.zhuige-upload-set view.loaded image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.zhuige-upload-set>view.loaded uni-icons {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: -20rpx;
|
||||
top: -46rpx;
|
||||
}
|
||||
|
||||
.zhuige-post-input textarea {
|
||||
height: 240rpx;
|
||||
padding: 20rpx 0;
|
||||
font-size: 30rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.zhuige-post-plug {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zhuige-post-opt {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-post-opt view {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
margin-right: 8rpx;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.zhuige-post-plug view.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.zhuige-post-plug view image {
|
||||
height: 28rpx;
|
||||
width: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zhuige-post-plug view text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 300;
|
||||
margin-left: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-post-count {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.zhuige-base-button {
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 40rpx 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.zhuige-base-button view {
|
||||
width: 360rpx;
|
||||
text-align: center;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 96rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
background: #db384c;
|
||||
}
|
||||
|
||||
.loaded {
|
||||
position: relative;
|
||||
|
||||
.img-clear {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -34rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
658
community/community/searchsq.vue
Normal file
658
community/community/searchsq.vue
Normal file
@ -0,0 +1,658 @@
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view @scrolltolower="scrollbottom" class="test" scroll-y="true">
|
||||
<view class="m-search-box">
|
||||
<view class="u-input-search">
|
||||
<label class="iconfont icon-sousuo-sousuo"></label>
|
||||
<input @confirm="SelectProductList" @input="startinput" focus="true" :placeholder="__('请输入搜索关键字')" type="text" v-model="value" />
|
||||
<view @tap="SelectProductList" class="u-btn">{{__('搜索')}}</view>
|
||||
</view>
|
||||
<view class="person_box"></view>
|
||||
</view>
|
||||
<block>
|
||||
<view class="m-product-all" v-if="cartlist.length>0">
|
||||
<view class="m-product-list">
|
||||
<block v-for="(item, index) in cartlist" :key="index">
|
||||
<view class="m-product-item" :data-id="item.item_id">
|
||||
<view :class="['m-item-c', (item.item_id==selItemId)?'del':'']">
|
||||
<view @click.stop="quanbu" class="m-cart-ck" :data-id="item.item_id" :data-isck="item.checked" :data-sid="item.item_id">
|
||||
<uni-icons :color="item.checked?'#DB384C':'#d5d5d5'" :type="item.checked?'circle-filled':'circle' " />
|
||||
</view>
|
||||
<navigator class="m-product-img" :url="'../productdetail/productdetail?pid=' + item.item_id">
|
||||
<image :src="item.product_image" />
|
||||
</navigator>
|
||||
<view class="m-product-info">
|
||||
<navigator :url="'../productdetail/productdetail?pid=' + item.item_id">
|
||||
<view class="m-product-name"><label style="padding-top:15rpx;">{{item.product_name}}</label><label class="m-min-name" style="overflow:hiddentext-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1">{{item.speStr==null?"":item.speStr}}</label>
|
||||
</view>
|
||||
<view class="m-product-price"><label>{{__('￥')}}</label>{{item.product_unit_price}}
|
||||
</view>
|
||||
</navigator>
|
||||
<block></block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='weizhaodao' v-else>{{__('没有找到您想搜索的商品，请重新输入')}}</view>
|
||||
</block>
|
||||
<view class="m-loading-box" v-if="cartlist.length>0">
|
||||
<block v-if="ispage">
|
||||
<view class="u-loadmore"><label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
<view class="u-cleanbox"></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line" style='margin-bottom:100rpx;background-color: #fff'>
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class='fabu_box'>
|
||||
<view class='fabu_box_fb' @tap="AddMemberPosts">{{__('确定')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dateUtil from "../../helpers/util_date";
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
import statusBar from '../../components/status-bar.vue'
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
options: {},
|
||||
isckall: false,
|
||||
isckall1: false,
|
||||
isck: false,
|
||||
cartlist: [],
|
||||
X_Start: 0,
|
||||
X_End: 0,
|
||||
selItemId: 0,
|
||||
Sel_Id: [],
|
||||
ispage: false,
|
||||
flag: true,
|
||||
isdata: false,
|
||||
page: 1,
|
||||
ProductName: "",
|
||||
objlist: [],
|
||||
value: "",
|
||||
num: 0,
|
||||
listlength: 0,
|
||||
item_ids: [],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
statusBar
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('')
|
||||
});
|
||||
|
||||
var that = this;
|
||||
this.setData({
|
||||
options: options
|
||||
});
|
||||
if (options.item_ids) {
|
||||
that.setData({
|
||||
item_ids: JSON.parse(options.item_ids)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
this.setData({
|
||||
num: options.num
|
||||
}), this.SelectProductList()
|
||||
},
|
||||
|
||||
onHide: function() {},
|
||||
|
||||
onShow: function() {
|
||||
var that = this;
|
||||
},
|
||||
|
||||
onUnload: function() {
|
||||
let that = this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面滚动触发事件的处理函数
|
||||
*/
|
||||
onPageScroll: function() {},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
SelectProductList: function() {
|
||||
|
||||
var that = this;
|
||||
that.setData({
|
||||
cartlist: [],
|
||||
page: 1
|
||||
});
|
||||
|
||||
that.carlist();
|
||||
|
||||
},
|
||||
carlist: function() {
|
||||
let that = this;
|
||||
|
||||
this.setData({
|
||||
flag: false
|
||||
});
|
||||
var params = {
|
||||
keywords: that.value || "",
|
||||
page: that.page
|
||||
};
|
||||
that.$.request({
|
||||
url: this.Config.URL.store.product,
|
||||
data: params,
|
||||
ajaxCache: {
|
||||
timeout: this.Config.CACHE_EXPIRE
|
||||
},
|
||||
success: function(data, status, msg, code) {
|
||||
let items = data.items;
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
items[i]['id'] = items[i]['item_id'];
|
||||
items[i]['DefaultProductSkuId'] = items[i]['item_id'];
|
||||
items[i]['ProductName'] = items[i]['product_name'];
|
||||
items[i]['ProductTips'] = items[i]['product_tips'];
|
||||
items[i]['SalesName'] = items[i]['product_name'];
|
||||
items[i]['ProductPic'] = items[i]['product_image'];
|
||||
items[i]['ItemSalePrice'] = items[i]['product_unit_price'];
|
||||
items[i]['SaleNum'] = items[i]['product_sale_num'];
|
||||
items[i]['Stock'] = items[i]['product_quantity'];
|
||||
items[i]['HasManualSku'] = items[i]['item_color'].length > 1;
|
||||
items[i]['DefaultProductSkuId'] = items[i]['item_id'];
|
||||
items[i]['user_cart_quantity'] = 1;
|
||||
if (that.$.includes(that.item_ids, items[i]['item_id'])) {
|
||||
items[i]['checked'] = true;
|
||||
} else {
|
||||
items[i]['checked'] = false;
|
||||
}
|
||||
}
|
||||
/*
|
||||
if (that.assist.length == 0)
|
||||
{
|
||||
that.setData({
|
||||
assist: assist
|
||||
})
|
||||
}*/
|
||||
|
||||
items.length > 0 ?
|
||||
that.page == 1 && items.length < 10 ?
|
||||
that.setData({
|
||||
cartlist: that.cartlist.concat(items),
|
||||
flag: false,
|
||||
ispage: false
|
||||
}) :
|
||||
that.setData({
|
||||
cartlist: that.cartlist.concat(items),
|
||||
flag: true,
|
||||
ispage: true
|
||||
}) :
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
quanbu: function(t) {
|
||||
var that = this,
|
||||
e = [];
|
||||
if (that.setData({
|
||||
listlength: that.objlist.length
|
||||
}), that.listlength < that.num) {
|
||||
for (var s = 0; s < that.cartlist.length; s++) {
|
||||
if (that.cartlist[s].item_id == t.currentTarget.dataset.id) {
|
||||
var i = that.cartlist[s];
|
||||
that.cartlist[s].checked ? i.checked = false : i.checked = true, e.push(i)
|
||||
} else {
|
||||
e.push(that.cartlist[s]);
|
||||
}
|
||||
}
|
||||
that.setData({
|
||||
cartlist: e
|
||||
});
|
||||
var l = [];
|
||||
for (s = 0; s < this.cartlist.length; s++) {
|
||||
this.cartlist[s].checked && l.push(this.cartlist[s]);
|
||||
}
|
||||
console.log(l)
|
||||
that.setData({
|
||||
objlist: l
|
||||
})
|
||||
} else {
|
||||
for (s = 0; s < that.cartlist.length; s++) {
|
||||
if (that.cartlist[s].item_id == t.currentTarget.dataset.id) {
|
||||
i = that.cartlist[s];
|
||||
that.cartlist[s].checked && (i.checked = false, that.setData({
|
||||
listlength: that.listlength - 1
|
||||
})), e.push(i)
|
||||
} else {
|
||||
e.push(that.cartlist[s]);
|
||||
}
|
||||
}
|
||||
that.setData({
|
||||
cartlist: e
|
||||
});
|
||||
for (l = [], s = 0; s < this.cartlist.length; s++) {
|
||||
this.cartlist[s].checked && l.push(this.cartlist[s]);
|
||||
}
|
||||
that.setData({
|
||||
objlist: l
|
||||
}), that.listlength >= that.num && that.$.alert(that.sprintf(that.__("最多可添加%s个"), that.num))
|
||||
}
|
||||
},
|
||||
AddMemberPosts: function() {
|
||||
var that = this;
|
||||
that.$.backpage(1, function() {
|
||||
var data = {
|
||||
couponItemId: that.objlist
|
||||
};
|
||||
that.notice.postNotificationName("RefreshCoupon", data)
|
||||
})
|
||||
},
|
||||
startinput: function(t) {
|
||||
this.setData({
|
||||
value: t.detail.value
|
||||
})
|
||||
},
|
||||
scrollbottom: function(t) {
|
||||
var that = this;
|
||||
if (this.flag) {
|
||||
this.setData({
|
||||
flag: false
|
||||
}), clearTimeout(e);
|
||||
var e = setTimeout(function() {
|
||||
that.setData({
|
||||
page: parseInt(that.page) + 1
|
||||
}), that.carlist()
|
||||
},
|
||||
500)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../styles/_variables";
|
||||
@import '../../styles/layout.scss';
|
||||
|
||||
.m-search-box {
|
||||
padding: 20rpx;
|
||||
background-color: #EFEFF4;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.u-input-search {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background-color: white;
|
||||
float: left;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid #DFDFDF;
|
||||
}
|
||||
|
||||
.u-input-search input {
|
||||
font-size: 28rpx;
|
||||
height: 100%;
|
||||
width: 400rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.u-input-search label {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 60rpx;
|
||||
height: 70rpx;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
line-height: 79rpx;
|
||||
font-size: 80rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.u-input-search .u-btn {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-left: 1rpx solid #DFDFDF;
|
||||
display: block;
|
||||
float: right;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.phone_one {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.phone_personal {
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.phone_select {
|
||||
margin-top: 0;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.select_one {
|
||||
text-align: center;
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 52rpx;
|
||||
left: 3rpx;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.select_two {
|
||||
text-align: center;
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
left: 3rpx;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.personal_image {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
right: 2.5%;
|
||||
width: 34rpx;
|
||||
height: 20rpx;
|
||||
margin: 40rpx 20rpx 40rpx 0;
|
||||
transition: All 0.4s ease;
|
||||
-webkit-transition: All 0.4s ease;
|
||||
}
|
||||
|
||||
.rotateRight {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.m-search-box-img {
|
||||
width: 29rpx;
|
||||
height: 22rpx;
|
||||
float: left;
|
||||
margin-top: 13rpx;
|
||||
}
|
||||
|
||||
.m-search-box-image {
|
||||
width: 29rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.u-cart-num {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.m-cart-ck {
|
||||
float: left;
|
||||
width: 90rpx;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.m-cart-ck .uni-icons,
|
||||
.m-cart-ck icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 51%;
|
||||
margin-top: -23rpx;
|
||||
margin-left: -12rpx;
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
.m-product-info {
|
||||
width: 438rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.m-product-info::before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.m-product-item {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 212rpx
|
||||
}
|
||||
|
||||
.m-shop-item {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 74rpx;
|
||||
background-color: #fff;
|
||||
line-height: 68rpx;
|
||||
margin-top: 20rpx;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.quan {
|
||||
margin-top: 34rpx;
|
||||
margin-left: 33rpx
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.title_logo {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
float: left;
|
||||
padding-bottom: 10rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.title_logo_img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.m-item-c {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 850rpx;
|
||||
}
|
||||
|
||||
.u-del {
|
||||
width: 100rpx;
|
||||
background-color: #DB384C;
|
||||
float: right;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 212rpx;
|
||||
}
|
||||
|
||||
/*底部按钮 start*/
|
||||
.m-footer-btn {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #d5d5d5;
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
.m-footer-btn-list {
|
||||
width: 75%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.m-footer-btn-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
line-height: 40rpx;
|
||||
padding: 15rpx 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.m-footer-btn-main {
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
background-color: #DB384C;
|
||||
color: #fff;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.m-cart-total {
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
.m-cart-total text {
|
||||
font-size: 36rpx;
|
||||
color: #DB384C;
|
||||
}
|
||||
|
||||
.m-cart-total label {
|
||||
color: #DB384C;
|
||||
}
|
||||
|
||||
.m-cart-del {
|
||||
line-height: 70rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/*底部按钮 end*/
|
||||
.del {
|
||||
-webkit-animation: mdel .2s 1;
|
||||
animation: mdel .2s 1;
|
||||
left: -100rpx;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mdel {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mdel {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -100rpx
|
||||
}
|
||||
}
|
||||
|
||||
.m-product-img {
|
||||
/*margin-top: 15rpx;*/
|
||||
}
|
||||
|
||||
.m-product-name {
|
||||
/*height: 100rpx;*/
|
||||
}
|
||||
|
||||
.m-product-price label {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.fabu_box_fb {
|
||||
background: #e73533;
|
||||
color: #fff;
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
float: left;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.fabu_box {
|
||||
height: 79rpx;
|
||||
line-height: 79rpx;
|
||||
font-size: 30rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex
|
||||
}
|
||||
|
||||
.test {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.weizhaodao {
|
||||
height: 800rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
background-color: #fff
|
||||
}
|
||||
</style>
|
||||
515
community/community/setting.vue
Normal file
515
community/community/setting.vue
Normal file
@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="zhuige-info-form-box">
|
||||
<!-- 顶部大图及头像 -->
|
||||
<view class="zhuige-info-header">
|
||||
<!-- 顶部大图 -->
|
||||
<image mode="aspectFill" :src="userSpace.user_poster"></image>
|
||||
<!-- 头像 -->
|
||||
<image @click="upImgs" data-type="2" mode="aspectFill" :src="userSpace.user_avatar"></image>
|
||||
<!-- 控制入口 -->
|
||||
<view @click="upImgs" data-type="1" class="avatar-opt">
|
||||
<view>
|
||||
<uni-icons type="camera" size="18"></uni-icons>
|
||||
</view>
|
||||
<view>{{__('修改背景图')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 认证表单 -->
|
||||
<view class="zhuige-info-form">
|
||||
|
||||
<view class="zhuige-info-line">
|
||||
<view>{{__('签名/介绍')}}</view>
|
||||
<view>
|
||||
<input type="text" v-model="userSpace.user_sign" :placeholder="__('一句话介绍一下自己吧')" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhuige-info-line" v-if="(false)">
|
||||
<view>{{__('帖子是否可见')}}</view>
|
||||
<view @click="clickAgreeLicense">
|
||||
<switch :checked="post" color="#db384c" style="transform:scale(0.7)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="zhuige-info-line" v-if="(false)">
|
||||
<view>{{__('点赞是否可见')}}</view>
|
||||
<view @click="clickAgreeLicense">
|
||||
<switch :checked="like" color="#db384c" style="transform:scale(0.7)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-info-line" v-if="(false)">
|
||||
<view>{{__('收藏是否可见')}}</view>
|
||||
<view @click="clickAgreeLicense">
|
||||
<switch :checked="collect" color="#db384c" style="transform:scale(0.7)" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="zhuige-info-line" v-if="(false)">
|
||||
<view>{{__('评论是否可见')}}</view>
|
||||
<view @click="clickAgreeLicense">
|
||||
<switch :checked="comment" color="#db384c" style="transform:scale(0.7)" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部大按钮 -->
|
||||
<view @click="clickSubmit()" class="zhuige-base-button">
|
||||
<view>{{__('提交')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
userSpace: {},
|
||||
post: 0,
|
||||
like: 0,
|
||||
collect: 0,
|
||||
comment: 0,
|
||||
sign: '',
|
||||
weixin: '',
|
||||
reward: '',
|
||||
certify: undefined,
|
||||
vip: undefined,
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.GetUserSpace();
|
||||
});
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
onShareAppMessage() {},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
// ------ event --------
|
||||
GetUserSpace: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
user_id: this.userInfo.user_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_space,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
|
||||
that.setData({
|
||||
userSpace: data
|
||||
});
|
||||
} else {
|
||||
that.$.alert(msg)
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// ------ event --------
|
||||
|
||||
upImgs: function(e) {
|
||||
var that = this;
|
||||
var type = e.currentTarget.dataset.type;
|
||||
that.$.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: function(n) {
|
||||
that.$.showLoading();
|
||||
var r = n.tempFilePaths;
|
||||
that.$.uploadFile({
|
||||
url: that.Config.URL.upload,
|
||||
method: 'POST',
|
||||
filePath: r[0],
|
||||
name: 'upfile',
|
||||
// header: {
|
||||
// "content-type": "multipart/form-data"
|
||||
// },
|
||||
success: function(n) {
|
||||
that.$.hideLoading();
|
||||
|
||||
var up_res = that.$.parseJSON(n.data);
|
||||
var s = up_res.data.url;
|
||||
if (type == 1) {
|
||||
that.userSpace.user_poster = s;
|
||||
} else {
|
||||
that.userSpace.user_avatar = s;
|
||||
}
|
||||
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: function(e) {
|
||||
that.$.hideLoading();
|
||||
},
|
||||
complete: function(e) {
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击提交
|
||||
*/
|
||||
clickSubmit() {
|
||||
var that = this;
|
||||
let params = {
|
||||
user_poster: this.userSpace.user_poster,
|
||||
user_avatar: this.userSpace.user_avatar,
|
||||
user_sign: this.userSpace.user_sign,
|
||||
}
|
||||
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_editSpace,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (status == 200) {
|
||||
|
||||
that.$.alert(that.__('修改成功'))
|
||||
} else {
|
||||
that.$.alert(msg)
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击设置封面
|
||||
*/
|
||||
clickCover() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let path = res.tempFilePaths[0];
|
||||
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
||||
this.cover = oo.data.src;
|
||||
}, err => {
|
||||
Alert.error(err);
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
||||
Alert.error(res.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击设置头像
|
||||
*/
|
||||
clickAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let path = res.tempFilePaths[0];
|
||||
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
||||
this.avatar = oo.data.src;
|
||||
}, err => {
|
||||
Alert.error(err);
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
||||
Alert.error(res.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击重新绑定手机号
|
||||
*/
|
||||
clickMobile() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '要重新绑定手机号吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
Util.openLink('/pages/user/login/login?type=mobile')
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击设置微信
|
||||
*/
|
||||
clickWeiXin() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let path = res.tempFilePaths[0];
|
||||
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
||||
this.weixin = oo.data.src;
|
||||
}, err => {
|
||||
Alert.error(err);
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
||||
Alert.error(res.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击设置赞赏码
|
||||
*/
|
||||
clickReward() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
let path = res.tempFilePaths[0];
|
||||
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
||||
this.reward = oo.data.src;
|
||||
}, err => {
|
||||
Alert.error(err);
|
||||
});
|
||||
},
|
||||
fail: (res) => {
|
||||
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
||||
Alert.error(res.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载数据
|
||||
*/
|
||||
loadData() {
|
||||
Rest.post(Api.URL('user', 'get_info')).then(res => {
|
||||
this.cover = res.data.cover;
|
||||
this.avatar = res.data.avatar;
|
||||
this.nickname = res.data.nickname;
|
||||
this.mobile = res.data.mobile;
|
||||
this.sign = res.data.sign;
|
||||
this.weixin = res.data.weixin;
|
||||
this.reward = res.data.reward;
|
||||
|
||||
if (res.data.certify) {
|
||||
this.certify = res.data.certify;
|
||||
}
|
||||
|
||||
if (res.data.vip) {
|
||||
this.vip = res.data.vip;
|
||||
}
|
||||
}, err => {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.zhuige-info-form-box {
|
||||
padding: 20rpx;
|
||||
margin-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.zhuige-info-header {
|
||||
height: 480rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zhuige-info-header image:nth-child(1) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
}
|
||||
|
||||
.zhuige-info-header image:nth-child(2) {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 30rpx;
|
||||
bottom: -80rpx;
|
||||
height: 160rpx;
|
||||
width: 160rpx;
|
||||
border-radius: 50%;
|
||||
border: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.zhuige-info-header .avatar-opt {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 30rpx;
|
||||
bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zhuige-info-header .avatar-opt view:nth-child(1) {
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.zhuige-info-header .avatar-opt view:nth-child(2) {
|
||||
padding-left: 16rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
.zhuige-info-form {
|
||||
padding: 0 30rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.zhuige-info-line {
|
||||
padding: 30rpx 0;
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.zhuige-info-line>view {
|
||||
font-size: 28rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.zhuige-info-line>view:nth-child(1) {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-info-line>view:nth-child(2) input {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.form-title>view:nth-child(2),
|
||||
.form-title>view:nth-child(3) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.form-title>view:nth-child(2)>image {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.form-title>view:nth-child(3)>image {
|
||||
width: 64rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.zhugie-info-image-upload {
|
||||
height: 240rpx;
|
||||
width: 240rpx;
|
||||
text-align: center;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #DDDDDD;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zhugie-info-image-upload uni-icons.plus {
|
||||
line-height: 240rpx;
|
||||
}
|
||||
|
||||
.zhugie-info-image-upload uni-icons.clear {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: -20rpx;
|
||||
top: -50rpx;
|
||||
}
|
||||
|
||||
.zhugie-info-image-upload image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.zhugie-vip-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zhugie-vip-style image {
|
||||
height: 12px;
|
||||
width: 26px;
|
||||
margin-rihgt: 12rpx;
|
||||
}
|
||||
|
||||
.zhugie-vip-style text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.zhuige-base-button {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 40rpx 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.zhuige-base-button view {
|
||||
width: 360rpx;
|
||||
text-align: center;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 96rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
background: #db384c;
|
||||
}
|
||||
</style>
|
||||
958
community/community/userspace.vue
Normal file
958
community/community/userspace.vue
Normal file
@ -0,0 +1,958 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<!-- 顶部大图 -->
|
||||
<view v-if="uid" class="zhuige-home-bg">
|
||||
<navigator v-if="IsLoginUser" url="/community/community/setting" style="color:#fff;z-index:8;position: absolute;right:30rpx;top:80rpx;">
|
||||
<view class="iconfont zc zc-shezhi i-type"></view>
|
||||
</navigator>
|
||||
<!-- 用户信息 -->
|
||||
<view v-if="uid" class="zhuige-user-card">
|
||||
<view class="zhuige-user-title">
|
||||
<!-- 头像及认证 -->
|
||||
<view class="zhuige-user-info-block">
|
||||
<view>
|
||||
<image mode="aspectFill" :src="UserInfo.user_avatar"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-user-count">
|
||||
<view @click="goToPage('/community/community/friend?tab=follow&user_id=' + uid)">
|
||||
<view>{{UserInfo.user_friend || 0}}</view>
|
||||
<text>{{__('关注')}}</text>
|
||||
</view>
|
||||
<view @click="goToPage('/community/community/friend?tab=fans&user_id=' + uid)">
|
||||
<view>{{UserInfo.user_fans || 0}}</view>
|
||||
<text>{{__('粉丝')}}</text>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<view>3</view>
|
||||
<text>圈子</text>
|
||||
</view> -->
|
||||
<view>
|
||||
<view>{{UserInfo.user_story_like || 0}}</view>
|
||||
<text>{{__('获赞')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-user-info-block-text">
|
||||
<text>{{UserInfo.user_nickname}}</text>
|
||||
<image mode="aspectFit" :src="UserInfo.user_level_logo"></image>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-user-line">
|
||||
<image mode="aspectFill" src="@/static/images/pen.png"></image>
|
||||
<text>{{__('签名：')}}</text>
|
||||
<text>{{UserInfo.user_sign}}</text>
|
||||
</view>
|
||||
<view class="zhuige-user-line" v-if="(false)">
|
||||
<image mode="aspectFill" src="https://q.zhuige.com/wp-content/uploads/2022/08/lvv.png"></image>
|
||||
<text>{{__('认证：')}}</text>
|
||||
<text>测试</text>
|
||||
</view>
|
||||
|
||||
<!-- 操作相关 -->
|
||||
<view class="zhuige-user-info-btn">
|
||||
<template v-if="!IsLoginUser">
|
||||
<template v-if="UserInfo.IsFollow">
|
||||
<view class="follow active" :data-user_id="UserInfo.user_id + ''" @click="onUnFollow">{{__('已关注')}}</view>
|
||||
</template>
|
||||
<view v-else @click="onFollow" :data-user_id="UserInfo.user_id + ''" class="follow">{{__('+关注')}}</view>
|
||||
</template>
|
||||
|
||||
<!-- 新增私信 -->
|
||||
<view v-if="hasLogin && !IsLoginUser">
|
||||
<navigator :url="'/im/chat/chat?uid='+ UserInfo.user_id">
|
||||
<text>{{__('私信')}}</text>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<!-- 分享先隐藏 -->
|
||||
<!-- <button open-type="share">
|
||||
<uni-icons type="redo-filled" size="24"></uni-icons>
|
||||
</button> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zhuige-home-cover"></view>
|
||||
<image class="zhuige-hover-bgimg" mode="aspectFill" :src="UserInfo.user_poster"></image>
|
||||
</view>
|
||||
|
||||
<!-- 推荐 -->
|
||||
<view v-if="rec_ad" class="zhuige-user-market">
|
||||
<!-- <zhuige-scroll-ad ext-ad-class="zhuige-scroll-goods-mini" :title="rec_ad.title" :items="rec_ad.items">
|
||||
</zhuige-scroll-ad> -->
|
||||
</view>
|
||||
|
||||
<!-- tab -->
|
||||
<view class="zhuige-home-tab">
|
||||
<view class="zhuige-block">
|
||||
<tab :tabs="tabs" :cur-tab="cur_tab" @clickTab="clickTab"></tab>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帖子列表 -->
|
||||
<view class="zhuige-home-list">
|
||||
<q-post-waterfall ref="pWaterfall" :type="cur_tab" @onRenew="onRenew" :list="PostsList" :loadStatus="loadPostStatus" :IsLoginUser="IsLoginUser" v-if="PostsList.length > 0"></q-post-waterfall>
|
||||
<view class="m-nullpage" v-else>
|
||||
<view class="m-nullpage-middle">
|
||||
<label class="iconfont icon-sousuo-sousuo"></label>
|
||||
<view class="m-null-tip">
|
||||
<text>{{ __('亲~找不到您想要的帖子') }}</text>
|
||||
<text>{{ __('再多点提示呗') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <uni-load-more v-if="PostsList && PostsList.length>0" :status="loadMore"></uni-load-more> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* 追格小程序
|
||||
* 作者: 追格
|
||||
* 文档: https://www.zhuige.com/docs/zg.html
|
||||
* gitee: https://gitee.com/zhuige_com/zhuige_xcx
|
||||
* github: https://github.com/zhuige-com/zhuige_xcx
|
||||
* Copyright © 2022-2023 www.zhuige.com All rights reserved.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
import dateUtil from '../../helpers/util_date';
|
||||
import Tab from '../components/tab.vue'
|
||||
import QPostWaterfall from '../components/q-post-waterfall/q-post-waterfall.vue';
|
||||
export default {
|
||||
components: {
|
||||
Tab,
|
||||
QPostWaterfall,
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
this.user_id = undefined;
|
||||
|
||||
this.loginReload = false;
|
||||
|
||||
return {
|
||||
options: {},
|
||||
uid: 0,
|
||||
UserInfo: {},
|
||||
page: 1,
|
||||
ispage: true,
|
||||
flag: true,
|
||||
PostsList: [],
|
||||
loadPostStatus: 'loadmore',
|
||||
IsLoginUser: false,
|
||||
|
||||
user: undefined,
|
||||
stat: undefined,
|
||||
rec_ad: undefined,
|
||||
|
||||
tabs: [{
|
||||
id: 'publish',
|
||||
title: '作品'
|
||||
}, {
|
||||
id: 'like',
|
||||
title: '点赞'
|
||||
},
|
||||
{
|
||||
id: 'fav',
|
||||
title: '收藏'
|
||||
},
|
||||
{
|
||||
id: 'comment',
|
||||
title: '评论'
|
||||
}
|
||||
|
||||
],
|
||||
cur_tab: 'publish',
|
||||
|
||||
posts: [],
|
||||
loadMore: 'more',
|
||||
loaded: false,
|
||||
|
||||
noDataTip: '哇哦，什么也没有',
|
||||
|
||||
// 是否显示私信按钮
|
||||
btn_message: false,
|
||||
|
||||
nav_opacity: 0,
|
||||
statusBarHeight: 0,
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
that.setData({
|
||||
uid: options.uid || that.userInfo.user_id
|
||||
});
|
||||
this.uid == that.userInfo.user_id && that.setData({
|
||||
IsLoginUser: true
|
||||
});
|
||||
|
||||
|
||||
if (options.tab) {
|
||||
this.cur_tab = options.tab;
|
||||
}
|
||||
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
|
||||
//如果没有用户id，且未登录
|
||||
if (!that.$.isUndefined(that.uid)) {
|
||||
that.GetUserSpace();
|
||||
that.GetMemberPostsByUserId()
|
||||
}
|
||||
|
||||
// this.refresh();
|
||||
|
||||
// uni.$on('zhuige_event_follow_user', this.onFlollowUser);
|
||||
// uni.$on('zhuige_event_user_like', this.onUserLike);
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.loginReload) {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.scrollbottom()
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.setData({
|
||||
PostsList: [],
|
||||
page: 1,
|
||||
ispage: true,
|
||||
flag: true,
|
||||
})
|
||||
this.clickTab({
|
||||
id: this.cur_tab
|
||||
});
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
this.nav_opacity = (e.scrollTop > 255 ? 255 : e.scrollTop) / 255;
|
||||
if (e.scrollTop > 20) {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff',
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
|
||||
},
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '个人主页-' + getApp().globalData.appName,
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
onRenew: function() {
|
||||
this.setData({
|
||||
PostsList: [],
|
||||
page: 1,
|
||||
ispage: true,
|
||||
flag: true,
|
||||
})
|
||||
this.GetMemberPostsByUserId();
|
||||
},
|
||||
goToPage: function(url) {
|
||||
this.$.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
GetUserSpace: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
UserId: that.userInfo.user_id,
|
||||
user_id: that.uid,
|
||||
operateId: that.cf.storeId
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_space,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
UserInfo: data,
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
GetLikePost: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
user_id: that.uid,
|
||||
page: that.page,
|
||||
'sidx': 'like_time',
|
||||
'sord': 'DESC'
|
||||
};
|
||||
1 == that.page && that.setData({
|
||||
PostsList: []
|
||||
});
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_lists,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$
|
||||
.datetimeFormatter(data.items[r]['story_time']));
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: false,
|
||||
ispage: false,
|
||||
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
|
||||
})
|
||||
}
|
||||
that.$.stopPullDownRefresh()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
GetMemberPostsByUserId: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
user_id: that.uid,
|
||||
page: that.page,
|
||||
'sidx': 'story_time',
|
||||
'sord': 'DESC'
|
||||
};
|
||||
1 == that.page && that.setData({
|
||||
PostsList: []
|
||||
});
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_story,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$
|
||||
.datetimeFormatter(data.items[r]['story_time']));
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: false,
|
||||
ispage: false,
|
||||
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
|
||||
})
|
||||
}
|
||||
that.$.stopPullDownRefresh()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
GetCommentPostsByUserId: function() {
|
||||
var that = this;
|
||||
let params = {
|
||||
user_id: that.uid,
|
||||
page: that.page
|
||||
};
|
||||
1 == that.page && that.setData({
|
||||
PostsList: []
|
||||
});
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_comment_story,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['story_time']));
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: false,
|
||||
ispage: false,
|
||||
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
})
|
||||
}
|
||||
|
||||
that.$.stopPullDownRefresh()
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
GetCollectionPostsByUserId: function() {
|
||||
var that = this;
|
||||
let params = {
|
||||
user_id: that.uid,
|
||||
page: that.page
|
||||
};
|
||||
1 == that.page && that.setData({
|
||||
PostsList: []
|
||||
});
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.user_collect_story,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['story_time']));
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: false,
|
||||
ispage: false,
|
||||
});
|
||||
} else {
|
||||
that.setData({
|
||||
PostsList: that.PostsList.concat(data.items),
|
||||
flag: true,
|
||||
ispage: true,
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
that.setData({
|
||||
flag: false,
|
||||
ispage: false,
|
||||
})
|
||||
}
|
||||
|
||||
that.$.stopPullDownRefresh()
|
||||
}
|
||||
});
|
||||
},
|
||||
scrollbottom: function() {
|
||||
if (this.flag) {
|
||||
var that = this;
|
||||
that.setData({
|
||||
flag: false
|
||||
});
|
||||
|
||||
clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
that.setData({
|
||||
flag: false,
|
||||
page: parseInt(that.page) + 1,
|
||||
});
|
||||
if (that.cur_tab == 'publish') {
|
||||
//帖子
|
||||
that.GetMemberPostsByUserId()
|
||||
} else if (that.cur_tab == 'comment') {
|
||||
//评论
|
||||
that.GetCommentPostsByUserId()
|
||||
} else if (that.cur_tab == 'fav') {
|
||||
//收藏
|
||||
that.GetCollectionPostsByUserId()
|
||||
} else if (that.cur_tab == 'like') {
|
||||
//喜欢
|
||||
that.GetLikePost()
|
||||
} else {
|
||||
that.GetMemberPostsByUserId()
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
//----- event start -----
|
||||
/**
|
||||
* 关注用户事件
|
||||
*/
|
||||
onFollow: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.AddFollow(a.currentTarget.dataset.user_id)
|
||||
});
|
||||
},
|
||||
AddFollow: function(friend_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
friend_id: friend_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.user.friend_agree,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.$.showToast({
|
||||
title: that.__("关注成功"),
|
||||
icon: "success",
|
||||
duration: 2e3
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
that.GetUserSpace();
|
||||
}, 1500)
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnFollow: function(a) {
|
||||
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.cancelFollow(a.currentTarget.dataset.user_id)
|
||||
});
|
||||
},
|
||||
cancelFollow: function(friend_id) {
|
||||
var that = this;
|
||||
that.$.confirm(that.__("是否取消关注?"), function(a) {
|
||||
if (a.confirm) {
|
||||
var params = {
|
||||
friend_id: friend_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.user.friend_refuse,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.$.showToast({
|
||||
title: that.__("取消关注成功"),
|
||||
icon: "success",
|
||||
duration: 2e3
|
||||
}), clearTimeout(t);
|
||||
var t = setTimeout(function() {
|
||||
that.GetUserSpace();
|
||||
}, 1500)
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 点赞事件
|
||||
*/
|
||||
onUserLike(data) {
|
||||
if (this.posts && this.posts.length > 0) {
|
||||
this.posts.forEach((topic) => {
|
||||
if (topic.id == data.post_id) {
|
||||
topic.like_count = data.like_count;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// ------- event end ---------
|
||||
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
refresh() {
|
||||
this.loadData();
|
||||
this.loadPosts(true);
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 点击切换TAB
|
||||
*/
|
||||
clickTab(tab) {
|
||||
this.setData({
|
||||
cur_tab: tab.id,
|
||||
page: 1,
|
||||
})
|
||||
if (tab.id == 'publish') {
|
||||
//帖子
|
||||
this.GetMemberPostsByUserId()
|
||||
} else if (tab.id == 'comment') {
|
||||
//评论
|
||||
this.GetCommentPostsByUserId()
|
||||
} else if (tab.id == 'fav') {
|
||||
//收藏
|
||||
this.GetCollectionPostsByUserId()
|
||||
} else if (tab.id == 'like') {
|
||||
//喜欢
|
||||
this.GetLikePost()
|
||||
} else {
|
||||
this.GetMemberPostsByUserId()
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击关注作者
|
||||
*/
|
||||
clickFollowUser() {
|
||||
Rest.post(Api.URL('user', 'follow_user'), {
|
||||
user_id: this.user_id
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.$emit('zhuige_event_follow_user', {
|
||||
user_id: this.user_id,
|
||||
is_follow: res.data.is_follow,
|
||||
from: 'user_home'
|
||||
});
|
||||
} else {
|
||||
Alert.toast(res.message);
|
||||
}
|
||||
}, err => {
|
||||
console.log(err)
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 删除帖子
|
||||
*/
|
||||
onDeleteTopic(topic) {
|
||||
Rest.post(Api.URL('bbs', 'topic_delete'), {
|
||||
topic_id: topic.id
|
||||
}).then(res => {
|
||||
if (res.code != 0) {
|
||||
Alert.error(res.message);
|
||||
return;
|
||||
}
|
||||
|
||||
let newPosts = [];
|
||||
this.posts.forEach(ele => {
|
||||
if (topic.id != ele.id) {
|
||||
newPosts.push(ele);
|
||||
}
|
||||
})
|
||||
this.posts = newPosts;
|
||||
}, err => {
|
||||
console.log(err)
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除投票
|
||||
*/
|
||||
clickDeleteVote(vote) {
|
||||
Rest.post(Api.URL('vote', 'delete'), {
|
||||
vote_id: vote.id
|
||||
}).then(res => {
|
||||
if (res.code != 0) {
|
||||
Alert.error(res.message);
|
||||
return;
|
||||
}
|
||||
|
||||
let newPosts = [];
|
||||
this.posts.forEach(ele => {
|
||||
if (vote.id != ele.id) {
|
||||
newPosts.push(ele);
|
||||
}
|
||||
})
|
||||
this.posts = newPosts;
|
||||
}, err => {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.zhuige-nav-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding: 0 20rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.zhuige-home-bg {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.zhuige-home-bg .zhuige-home-cover {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
height: 820rpx;
|
||||
top: 0rpx;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, #4b9ffb, #00438d);
|
||||
}
|
||||
|
||||
.zhuige-home-bg image.zhuige-hover-bgimg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.zhuige-user-card {
|
||||
padding: 30rpx 30rpx 20rpx;
|
||||
position: inherit;
|
||||
z-index: 5;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.zhuige-user-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block {
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block view:nth-child(1) {
|
||||
position: relative;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block view:nth-child(1) image:nth-child(1) {
|
||||
height: 140rpx;
|
||||
width: 140rpx;
|
||||
border-radius: 50%;
|
||||
border: 8rpx solid rgba(255, 255, 255, 0.7)
|
||||
}
|
||||
|
||||
.zhuige-user-info-block view:nth-child(1) image:nth-child(2) {
|
||||
height: 64rpx;
|
||||
width: 64rpx;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
right: 10rpx;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn view,
|
||||
.zhuige-user-info-btn button {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
width: 180rpx;
|
||||
padding: 0;
|
||||
border-radius: 40rpx;
|
||||
background: #F3F2F3;
|
||||
margin-left: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn view text {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn view.follow {
|
||||
background: #363B50;
|
||||
color: #ffffff;
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-info-btn view.active {
|
||||
background: $default-skin-bg;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.zhuige-user-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.zhuige-user-count>view {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.zhuige-user-count>view text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zhuige-user-count>view view {
|
||||
font-size: 46rpx;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.zhuige-user-line {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zhuige-user-line image {
|
||||
height: 28rpx;
|
||||
width: 28rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-line text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
margin-left: 4rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-user-line text:last-of-type {
|
||||
white-space: normal;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.zhuige-home-tab .zhuige-block {
|
||||
margin-bottom: 0;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.zhuige-home-tab .zhuige-tab {
|
||||
border-bottom: 1rpx solid #DDDDDD !important;
|
||||
padding-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
.zhuige-user-market {
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block-text text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
height: 1.4em;
|
||||
line-height: 1.4em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-user-info-block-text image {
|
||||
height: 28rpx;
|
||||
width: 56rpx;
|
||||
min-width: 56rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.zhuige-home-tab {
|
||||
z-index: 19;
|
||||
position: relative;
|
||||
margin-top: -40rpx;
|
||||
}
|
||||
|
||||
.zhuige-home-list .zhuige-block {
|
||||
padding: 20rpx 40rpx !important;
|
||||
}
|
||||
</style>
|
||||
850
community/community/video.nvue
Normal file
850
community/community/video.nvue
Normal file
@ -0,0 +1,850 @@
|
||||
<template>
|
||||
<div class="page" :style="{ height: height }">
|
||||
<view class="tab-tab-bar">
|
||||
<view class="tab-list" @click.stop="clickTab(0)"><text class="tab-name" :class="tabIndex==0 ? 'active' : ''">{{__('推荐')}}</text></view>
|
||||
<view class="tab-border"></view>
|
||||
<view class="tab-list" @click.stop="clickTab(1)"><text class="tab-name" :class="tabIndex==1 ? 'active' : ''">{{__('同城')}}</text></view>
|
||||
|
||||
<view @click.stop="gopost">
|
||||
<image class="video-img" src="../../static/images/video.png" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper" :current="tabIndex" @change="changeTab" :duration="300" :indicator-dots="false" :vertical="false">
|
||||
<swiper-item>
|
||||
<swiper class="swiper" :vertical="true" @change="changeCurrent" :current="index">
|
||||
<swiper-item v-for="(item, idx) in videoList" :key="idx" class="swiper-item">
|
||||
|
||||
<div v-if="Math.abs(index-idx)<=1" class="video-box">
|
||||
<chunlei-video class="video" :src="item.story_video" :height="height" :width="width" :play="item.flag" v-if="Math.abs(index-idx)<=1" :gDuration="item.duration" :initialTime="item.initialTime" @pause="pauseVideo" @click="clickVideo" objectFit="cover">
|
||||
</chunlei-video>
|
||||
|
||||
<cover-view class="cover-view-product" v-if="item.item_id && item.product_item_name" @click.stop="onProduct(item.item_id)">
|
||||
<view class="left-view" style="width: 100rpx;height: 100rpx;">
|
||||
<cover-image :src="item.product_image" class="product_img" style="width: 100rpx;height: 100rpx;"></cover-image>
|
||||
</view>
|
||||
<cover-view class="left-view" style="width: 400rpx;height: 100rpx;">
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;"><text style="color: #FFFFFF;text-overflow: ellipsis;lines: 1;word-wrap: anywhere;">{{item.product_item_name}}</text></cover-view>
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;font-size: 24rpx;padding-top:4rpx;"><text style="color: #FFFFFF">{{sprintf(__('价格:%s'), item.item_unit_price)}}</text></cover-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;">{{item.product_item_name}}</cover-view>
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;font-size: 24rpx;padding-top:4rpx;">{{sprintf(__('价格:%s'), item.item_unit_price)}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="cover-view-left">
|
||||
<cover-view class="left-view">
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="left-text">@{{item.user_nickname}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text">@{{item.user_nickname}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</cover-view>
|
||||
<cover-view class="left-view">
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="left-text">{{item.story_title}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text">{{item.story_title}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="cover-view-right">
|
||||
<cover-image :src="item.user_avatar" class="avater" @click.stop="tapAvater(item.user_id)"></cover-image>
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text-avater">+</text>
|
||||
<text class="right-text"></text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text-avater">+</cover-view>
|
||||
<cover-view class="right-text"></cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<cover-image v-if="item.IsFabulous" src="https://static.lancerdt.com/xcxfile/appicon/video/aixinRed.png" class="img" @click.stop="onUnLike" :data-story_id="item.story_id"></cover-image>
|
||||
|
||||
<cover-image v-if="!(item.IsFabulous)" src="https://static.lancerdt.com/xcxfile/appicon/video/aixin.png" class="img" @click.stop="onLike" :data-story_id="item.story_id"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{item.story_like_count}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{item.story_like_count}}</cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<block v-if="true">
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/xiaoxi.png" class="img" :data-story_id="item.story_id" :data-user_id="item.user_id" @click.stop="tapMsg"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{item.story_comment_count}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{item.story_comment_count}}</cover-view>
|
||||
<!-- #endif -->
|
||||
<block v-if="false">
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/share-fill.png" class="img" @click.stop="tapShare"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{__('分享')}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{__('分享')}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/changpian.png" class="musicIcon img" v-if="false"></cover-image>
|
||||
</cover-view>
|
||||
</div>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<scroll-view scroll-y @scrolltolower="scrolltolower" style="z-index:9999;height:100%;">
|
||||
<video-lists ref="VideoLists" @confirm="confirm($event)"></video-lists>
|
||||
</scroll-view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view :class="'m-panel-sp ' + (selectsp == 0 ?'hide':'') " @click.stop="closesp" v-if="(selectsp)">
|
||||
<view class="m-panel-sp-content" @click.stop>
|
||||
<view class="page-body">
|
||||
<five-mul-commentlist :commentLists="commentList" @clickPraise="clickPraiseComment" @clickDelete="clickDeleteComment" @clickDeleteChild="clickDeleteCommentChild" @clickRecomment="clickRecomment" @clickRecommentChild="clickRecommentChild" @confirm="setNum($event)" @updata="updata" @closesp="closesp" :story_id="story_id" :user_id="user_id"></five-mul-commentlist>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
import dateUtil from "../../helpers/util_date";
|
||||
import chunleiVideo from '@/community/components/chunlei-video/chunlei-video.vue'
|
||||
import VideoLists from '@/community/components/video-lists/video-lists.vue'
|
||||
import FiveComment from '@/community/components/five-comment/five-comment.vue'
|
||||
import FiveMulCommentlist from '@/community/components/five-mul-commentlist/five-mul-commentlist.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
chunleiVideo,
|
||||
VideoLists,
|
||||
FiveMulCommentlist,
|
||||
FiveComment
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sysheight: 0,
|
||||
videoList: [],
|
||||
height: '667px',
|
||||
index: 0,
|
||||
width: '',
|
||||
oldIndex: 0,
|
||||
story_id: 0,
|
||||
tabIndex: 0,
|
||||
|
||||
user_id: 0,
|
||||
ischange: false,
|
||||
|
||||
selectsp: 0,
|
||||
shareContetnFlag: 0,
|
||||
|
||||
detailInfo: {},
|
||||
commentList: [],
|
||||
|
||||
//评论组件相关
|
||||
placeholder: '请输入评论内容…',
|
||||
commentParam: {},
|
||||
|
||||
flag: false,
|
||||
pageIndex: 1,
|
||||
|
||||
flag_index: false,
|
||||
|
||||
winHeight: 0,
|
||||
winWidth: 0,
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', '__', '$',
|
||||
'sprintf'
|
||||
]),
|
||||
|
||||
onLoad: function(options) {
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("portrait-primary")
|
||||
//#endif
|
||||
this.sysheight = uni.getSystemInfoSync().windowHeight
|
||||
this.height = `${this.sysheight}px`
|
||||
let width = uni.getSystemInfoSync().windowWidth
|
||||
this.width = `${width}px`
|
||||
|
||||
|
||||
this.story_id = options.id ? options.id : 0;
|
||||
|
||||
this.winHeight = uni.getSystemInfoSync().windowHeight;
|
||||
this.winWidth = uni.getSystemInfoSync().windowWidth;
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.pushVideoList()
|
||||
setTimeout(() => {
|
||||
this.videoPlay(this.index)
|
||||
}, 200);
|
||||
},
|
||||
onHide() {
|
||||
for (let item of this.videoList) {
|
||||
item.flag = false
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
// #endif
|
||||
|
||||
return {
|
||||
imageUrl: this.videoList[0]['story_file'][0],
|
||||
title: this.pname,
|
||||
path: "/community/community/video?id=" + this.story_id + "&uid=" + this.userInfo.user_id
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享朋友圈
|
||||
*/
|
||||
onShareTimeline: function() {
|
||||
return {
|
||||
title: this.videoList[0].story_title,
|
||||
query: {
|
||||
uid: this.userInfo.user_id,
|
||||
pid: this.story_id
|
||||
},
|
||||
imageUrl: this.videoList[0]['story_file'][0],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
changeCurrent(e) {
|
||||
this.index = e.detail.current;
|
||||
for (let item of this.videoList) {
|
||||
item.flag = false
|
||||
}
|
||||
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
},
|
||||
|
||||
updata(e) {
|
||||
this.height = `${e}px`;
|
||||
console.log(9999)
|
||||
},
|
||||
|
||||
pushVideoList() {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
|
||||
let that = this;
|
||||
var params = {
|
||||
page: this.page
|
||||
};
|
||||
|
||||
params['story_id'] = that.story_id;
|
||||
|
||||
this.$.request({
|
||||
url: this.Config.URL.sns.story_lists,
|
||||
data: params,
|
||||
success: (data, status, msg, code) => {
|
||||
|
||||
let videoGroup = []
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(this.$.datetimeFormatter(data.items[r][
|
||||
'story_time'
|
||||
]));
|
||||
|
||||
data.items[r]['flag'] = false;
|
||||
data.items[r]['objectFit'] = 'contain';
|
||||
/*
|
||||
videoGroup.push({
|
||||
story_video:item.data.playUrl,
|
||||
story_title:item.data.title,
|
||||
flag: false,
|
||||
IsFabulous:false,
|
||||
story_like_count:'7w',
|
||||
story_comment_count:'1045',
|
||||
user_nickname:item.data.author.name,
|
||||
user_avatar:item.data.author.icon,
|
||||
initialTime: 0,
|
||||
duration: item.data.duration
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.videoList = that.videoList.concat(data.items);
|
||||
that.flag = false;
|
||||
that.ispage = false;
|
||||
} else {
|
||||
that.videoList = that.videoList.concat(data.items);
|
||||
that.flag = true;
|
||||
that.ispage = true
|
||||
}
|
||||
|
||||
resolve()
|
||||
|
||||
} else {
|
||||
|
||||
that.flag = false;
|
||||
that.ispage = false;
|
||||
}
|
||||
|
||||
that.ispage = true;
|
||||
|
||||
that.$.stopPullDownRefresh()
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
return promise
|
||||
},
|
||||
|
||||
async confirm(res) {
|
||||
var that = this;
|
||||
|
||||
this.story_id = res;
|
||||
this.videoList = [];
|
||||
this.ischange = true;
|
||||
this.page = 1;
|
||||
this.index = 0;
|
||||
this.oldIndex = 0;
|
||||
this.tabIndex = 0;
|
||||
await this.pushVideoList()
|
||||
setTimeout(() => {
|
||||
this.videoPlay(this.index)
|
||||
}, 200);
|
||||
},
|
||||
|
||||
changeTab(e) {
|
||||
if (this.ischange) {
|
||||
this.ischange = false;
|
||||
} else {
|
||||
this.tabIndex = e.detail.current
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
clickTab(e) {
|
||||
this.tabIndex = e
|
||||
},
|
||||
|
||||
gopost() {
|
||||
this.$.gopage('/community/community/post')
|
||||
},
|
||||
tapLove() {
|
||||
this.videoList[this.index].IsFabulous = !this.videoList[this.index].IsFabulous
|
||||
this.videoList = [...this.videoList]
|
||||
|
||||
},
|
||||
onProduct(item_id) {
|
||||
this.$.gopage('/pages/product/detail?pid=' + item_id)
|
||||
},
|
||||
|
||||
scrolltolower() {
|
||||
this.$refs.VideoLists.scrollbottom();
|
||||
},
|
||||
setNum(res) {
|
||||
this.videoList[this.index].story_comment_count = parseInt(this.videoList[this.index].story_comment_count) + 1
|
||||
},
|
||||
|
||||
tapAvater(uid) {
|
||||
/*
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `点击索引为${this.index}的头像`
|
||||
})
|
||||
*/
|
||||
|
||||
this.$.gopage('/community/community/userspace?uid=' + uid);
|
||||
},
|
||||
tapMsg(a) {
|
||||
this.story_id = parseInt(a.currentTarget.dataset.story_id)
|
||||
|
||||
this.user_id = parseInt(a.currentTarget.dataset.user_id)
|
||||
|
||||
this.GetPostsCommentByPostsId()
|
||||
this.selectsp = 1;
|
||||
|
||||
},
|
||||
|
||||
closesp: function(e) {
|
||||
var that = this;
|
||||
var height = uni.getSystemInfoSync().windowHeight;
|
||||
|
||||
this.height = `${height}px`
|
||||
console.log(this.height)
|
||||
this.selectsp = 0
|
||||
|
||||
setTimeout(function() {
|
||||
this.selectsp = 0
|
||||
},
|
||||
1e2)
|
||||
|
||||
},
|
||||
|
||||
|
||||
tapShare() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `分享索引为${this.index}的视频`
|
||||
})
|
||||
},
|
||||
videoPlay(index) {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
resolve()
|
||||
})
|
||||
promise.then(res => {
|
||||
this.videoList[index].flag = !this.videoList[index].flag
|
||||
})
|
||||
},
|
||||
pauseVideo(val) {
|
||||
if (typeof this.videoList[this.oldIndex].initialTime != 'undefined') this.videoList[this.oldIndex].initialTime =
|
||||
val
|
||||
},
|
||||
clickVideo() {
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
},
|
||||
|
||||
GetMemberPostsServerData: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: that.story_id,
|
||||
user_id: that.userInfo.user_id,
|
||||
to_user_id: that.datauser.user_id,
|
||||
/* operateId: that.shopInfo.store_id*/
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_rel_data,
|
||||
data: params,
|
||||
loading: false,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
dataContent: data,
|
||||
story_hot_rows: data.story_hot_rows
|
||||
});
|
||||
|
||||
0 < that.dataContent.like_user_total ? that.setData({
|
||||
isshowdzphoto: true
|
||||
}) : that.setData({
|
||||
isshowdzphoto: false
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
GetPostsCommentByPostsId: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: that.story_id,
|
||||
sidx: 'comment_time',
|
||||
sord: 'DESC',
|
||||
};
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_comment_lists,
|
||||
data: params,
|
||||
loading: false,
|
||||
success: function(data, status, msg, code) {
|
||||
if (data.items.length > 0) {
|
||||
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
//that.dataComment[r]['comment_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(that.dataComment[r]['comment_time']));
|
||||
|
||||
data.items[r]['comment_time_str'] = data.items[r]['comment_time'];
|
||||
|
||||
data.items[r]['reply_name_str'] = '';
|
||||
|
||||
for (var j = 0; j < data.items[r]['commentList'].length; j++) {
|
||||
data.items[r]['commentList'][j]['comment_reply_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['commentList'][j]['comment_reply_time']));
|
||||
|
||||
//data.items[r]['commentList'][j]['comment_reply_time_str'] = data.items[r]['commentList'][j]['comment_reply_time'];
|
||||
|
||||
data.items[r]['reply_name_str'] = data.items[r]['commentList'][j]['user_nickname'];
|
||||
}
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.commentList = data.items
|
||||
that.flag_index = false
|
||||
that.ispage_index = false
|
||||
} else {
|
||||
that.commentList = data.items
|
||||
that.flag_index = true
|
||||
that.ispage_index = true
|
||||
}
|
||||
console.log(that.commentList)
|
||||
|
||||
} else {
|
||||
that.flag_index = false
|
||||
that.ispage_index = false
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.doLike(a.currentTarget.dataset.story_id)
|
||||
});
|
||||
},
|
||||
doLike: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.videoList[that.index].IsFabulous = true;
|
||||
that.videoList[that.index].story_like_count++
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.canceldianzan(a.currentTarget.dataset.story_id)
|
||||
});
|
||||
},
|
||||
canceldianzan: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_remove,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
//修正当前记录数据
|
||||
that.videoList[that.index].IsFabulous = false;
|
||||
that.videoList[that.index].story_like_count--
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
this.oldIndex = oldVal
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.swiper {
|
||||
flex: 1;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cover-view-center {
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cover-view-product {
|
||||
position: absolute;
|
||||
margin-left: 10rpx;
|
||||
width: 500rpx;
|
||||
bottom: 250rpx;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
justify-content: space-between;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.cover-view-left {
|
||||
position: absolute;
|
||||
margin-left: 10rpx;
|
||||
width: 600rpx;
|
||||
bottom: 60rpx;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
}
|
||||
|
||||
.left-view {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.uni-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
lines: 1;
|
||||
/* line-height: 1; */
|
||||
word-wrap: anywhere;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.avater {
|
||||
border-radius: 50rpx;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
||||
height: 90rpx !important;
|
||||
width: 90rpx !important;
|
||||
opacity: 0.9;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.cover-view-right {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
right: 20rpx;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//#endif
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.right-text-avater {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 80rpx;
|
||||
left: 30rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
background-color: #DD524D;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.avater-icon {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
|
||||
color: #fff;
|
||||
background-color: #DD524D;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: -20rpx;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 10rpx;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.musicIcon {
|
||||
margin-top: 40rpx !important;
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
animation: rotating 3s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 70rpx;
|
||||
width: 70rpx;
|
||||
opacity: 0.9;
|
||||
margin: auto;
|
||||
//#ifdef APP-PLUS-NVUE
|
||||
margin-left: 10rpx;
|
||||
//#endif
|
||||
}
|
||||
|
||||
.page {
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//#endif
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-tab-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
/* flex-wrap:wrap !important; */
|
||||
z-index: 2;
|
||||
padding-top: 80rpx;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-left: 600rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-top: 10rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.tab-border {
|
||||
height: 50rpx;
|
||||
width: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-bottom: 12rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.video-img {
|
||||
width: 80rpx;
|
||||
height: 50rpx;
|
||||
left: 150rpx;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.m-panel-sp {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: 1624rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
|
||||
.m-panel-sp-content {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
box-shadow: 0px -10rpx 15rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.view-conmment-send-bottom {
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: white;
|
||||
border-top: 1px solid #fbfbfb;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.view-comment-textarea {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 40rpx;
|
||||
padding: 15rpx 20rpx;
|
||||
margin: 25rpx 20rpx;
|
||||
width: 700rpx;
|
||||
/* flex: 1;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.textarea-comment {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
font-size: $uni-font-size-base;
|
||||
/* color: $uni-text-color; */
|
||||
color: $uni-text-sub-color;
|
||||
}
|
||||
|
||||
.icon-comment {
|
||||
font-size: 46rpx;
|
||||
color: $uni-text-color;
|
||||
margin: 0 30rpx 0 5rpx;
|
||||
}
|
||||
|
||||
.view-btn-comment {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $uni-font-size-base;
|
||||
color: white;
|
||||
height: 70rpx;
|
||||
width: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: $theme-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.textarea-bottom {
|
||||
background-color: white;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
268
community/community/video_ild.vue
Normal file
268
community/community/video_ild.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view class="page" :style="{ height: height }">
|
||||
<view class="swiper" v-if="loaded">
|
||||
<video-new class="video" :video_id="video_item.story_id" :nickname="video_item.user_nickname" :user_id="video_item.user_id" :video_describe="video_item.story_title" :cover_url="video_item.story_file[0]" :video_url="video_item.story_video" :dianzan="video_item.story_like_count" :is_dianzan="video_item.IsFabulous" :pinglun="video_item.pinglun" :zhuanfa="video_item.zhuanfa" :height="height" :width="width" :sysheight="sysheight" :play="video_item.flag" :index="0" :cur_index="0"
|
||||
:style="{ height: height, width: width }" @clickVideo="clickVideo"></video-new>
|
||||
|
||||
<cover-view class="cover-view-product" v-if="video_item.item_id && video_item.product_item_name" @click.stop="onProduct(video_item.item_id)">
|
||||
<view class="left-view" style="width: 100rpx;height: 100rpx;">
|
||||
<cover-image :src="video_item.product_image" class="product_img"></cover-image>
|
||||
</view>
|
||||
<view class="left-view" style="width: 400rpx;height: 100rpx;padding-left: 10rpx;">
|
||||
<text class="left-text uni-ellipsis" style="">{{video_item.product_item_name}}</text>
|
||||
<text class="left-text uni-ellipsis" style="font-size: 24rpx;">{{sprintf(__('价格:%s'), video_item.item_unit_price)}}</text>
|
||||
</view>
|
||||
</cover-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import videoNew from '@/components/video/video-new.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
videoNew
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
isbenren: false,
|
||||
height: '667px',
|
||||
width: '',
|
||||
sysheight: 0,
|
||||
story_id: 0,
|
||||
videoCtx: null,
|
||||
video_item: {},
|
||||
loaded: false
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
onLoad: function(options) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.__('')
|
||||
});
|
||||
|
||||
|
||||
var that = this;
|
||||
that.setData({
|
||||
story_id: options.id
|
||||
});
|
||||
|
||||
this.setData({
|
||||
options: options
|
||||
});
|
||||
|
||||
let res = uni.getSystemInfoSync();
|
||||
this.height = `${res.windowHeight}px`;
|
||||
this.width = `${res.windowWidth}px`;
|
||||
this.sysheight = res.windowHeight;
|
||||
//console.log(res);
|
||||
|
||||
this.getVideo();
|
||||
},
|
||||
onHide() {
|
||||
//console.log('界面隐藏,暂停播放',`video_${this.story_id}`);
|
||||
this.videoCtx = uni.createVideoContext(`video_${this.story_id}`, this);
|
||||
this.videoCtx.pause();
|
||||
},
|
||||
onShow() {
|
||||
//console.log('界面显示')
|
||||
if (this.story_id !== null && this.video_item.flag) {
|
||||
//console.log('开启播放',`video_${this.story_id}`);
|
||||
this.videoCtx = uni.createVideoContext(`video_${this.story_id}`, this);
|
||||
this.videoCtx.play();
|
||||
}
|
||||
},
|
||||
onReady() {},
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
getVideo() {
|
||||
var that = this,
|
||||
params = {
|
||||
user_id: that.userInfo.user_id,
|
||||
story_id: that.story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_get,
|
||||
data: params,
|
||||
loading: true,
|
||||
success: (data, status, msg, code) => {
|
||||
if (200 == status) {
|
||||
//#ifdef H5 || MP-WEIXIN
|
||||
data.flag = false;
|
||||
//#endif
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
data.flag = true;
|
||||
//#endif
|
||||
|
||||
that.setData({
|
||||
video_item: data,
|
||||
loaded: true
|
||||
});
|
||||
|
||||
that.userInfo.user_id == that.video_item.user_id ? that.setData({
|
||||
isbenren: true
|
||||
}) : that.setData({
|
||||
isbenren: false
|
||||
});
|
||||
|
||||
try {
|
||||
setTimeout(() => {
|
||||
this.videoCtx = uni.createVideoContext(`video_${that.video_item.story_id}`, this);
|
||||
this.videoCtx.play();
|
||||
}, 200);
|
||||
} catch (e) {
|
||||
//console.log(e);
|
||||
}
|
||||
} else {
|
||||
that.setData({
|
||||
loaded: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
clickVideo(e) {
|
||||
if (this.clicktime > 0 && e.timeStamp - this.clicktime < 200) {
|
||||
clearInterval(this.han);
|
||||
if (!this.video_item.is_dianzan) {
|
||||
this.video_item.is_dianzan = true;
|
||||
}
|
||||
} else {
|
||||
let _this = this;
|
||||
this.han = setTimeout(function() {
|
||||
_this.video_item.flag = !_this.video_item.flag;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.clicktime = e.timeStamp;
|
||||
|
||||
return;
|
||||
},
|
||||
onProduct(item_id) {
|
||||
this.$.gotopage('/pages/product/detail?pid=' + item_id)
|
||||
},
|
||||
tapMsg(e) {
|
||||
//console.log(5, e);
|
||||
},
|
||||
tapShare(e) {
|
||||
//console.log(6, e);
|
||||
},
|
||||
tapLove(e) {
|
||||
//console.log(7, e);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-view-marks {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: fixed;
|
||||
top: 80rpx;
|
||||
background-color: transparent;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 80rpx;
|
||||
color: #eee;
|
||||
font-size: 18px;
|
||||
margin: 0 10px;
|
||||
|
||||
position: relative;
|
||||
border-width: 0px;
|
||||
border-style: solid;
|
||||
border-color: #000;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.title-center {
|
||||
flex-direction: row;
|
||||
height: 45px;
|
||||
line-height: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.active-title {
|
||||
border-bottom-width: 2px;
|
||||
font-weight: bold;
|
||||
border-style: solid;
|
||||
border-bottom-color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cover-view-product {
|
||||
position: absolute;
|
||||
margin-left: 10rpx;
|
||||
width: 500rpx;
|
||||
bottom: 200rpx;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.left-view {
|
||||
margin-bottom: 0rpx;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
168
community/components/chunlei-video/chunlei-video.vue
Normal file
168
community/components/chunlei-video/chunlei-video.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<cover-view>
|
||||
<video :src="src" :controls="controls" :show-play-btn="false"
|
||||
:style="{ height: height }" :loop="true" @waiting="waiting"
|
||||
:enable-progress-gesture="false" :objectFit="objectFit" @click="clickVideo"
|
||||
:id="'video_' + src" :ref="'video_' + src" class="video" @timeupdate="timeupdate">
|
||||
<cover-view class="top"></cover-view>
|
||||
<cover-view class="bottom"></cover-view>
|
||||
</video>
|
||||
|
||||
<cover-view class="progressBar" :style="{ width: barWidth }"></cover-view>
|
||||
</cover-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
controls:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
src:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
play:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
height:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
width:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
initialTime:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
gDuration:{
|
||||
type:Number,
|
||||
default:999
|
||||
}, //大概时长使进度条更准确
|
||||
objectFit:{
|
||||
type:String,
|
||||
default:'contain'
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
time:0,
|
||||
duration:0,
|
||||
playFirst:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.videoCtx = uni.createVideoContext(`video_${this.src}`,this)
|
||||
|
||||
},
|
||||
methods:{
|
||||
timeupdate(event){
|
||||
this.duration = event.detail.duration
|
||||
if(!this.play) return
|
||||
if(this.time>=this.duration) this.time=0
|
||||
this.time = event.detail.currentTime
|
||||
},
|
||||
clickVideo(){
|
||||
//console.info('clickVideo');
|
||||
this.$emit('click')
|
||||
},
|
||||
videoPlay(){
|
||||
if(this.play){
|
||||
this.videoCtx.play();
|
||||
if(this.playFirst){
|
||||
this.videoCtx.seek(this.startTime)
|
||||
this.playFirst = false
|
||||
}
|
||||
}else{
|
||||
this.videoCtx.pause();
|
||||
this.$emit('pause',this.time)
|
||||
}
|
||||
|
||||
},
|
||||
waiting(){
|
||||
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
// #ifndef MP-WEIXIN
|
||||
play(newVal,oldVal){
|
||||
this.videoPlay()
|
||||
},
|
||||
// #endif
|
||||
startTime:{
|
||||
immediate: true,
|
||||
handler(newVal,oldVal){
|
||||
|
||||
this.time = newVal
|
||||
}
|
||||
},
|
||||
gDuration:{
|
||||
immediate: true,
|
||||
handler(newVal,oldVal){
|
||||
|
||||
this.duration = newVal
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
barWidth(){
|
||||
|
||||
let width = this.time/this.duration*parseInt(this.width)
|
||||
|
||||
return `${width}px`
|
||||
},
|
||||
startTime(){
|
||||
return this.initialTime
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video{
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.top{
|
||||
position: absolute;
|
||||
top:0;
|
||||
background-image: linear-gradient(to top , rgba(0,0,0,0) , rgba(0,0,0,0.7));
|
||||
width: 750rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
.bottom{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to top , rgba(0,0,0,0.7) , rgba(0,0,0,0));
|
||||
width: 750rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
.progressBar{
|
||||
border-radius: 2rpx;
|
||||
height: 4rpx;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 999999;
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
animation: flicker 4s linear infinite;
|
||||
animation-direction:alternate;
|
||||
//#endif
|
||||
}
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
@keyframes flicker {
|
||||
0% { box-shadow:0 0 0 #FFFFFF; }
|
||||
/** 暂停效果 */
|
||||
10% { box-shadow:0 0 2rpx #FFFFFF; }
|
||||
50% { box-shadow:0 0 10rpx #FFFFFF; }
|
||||
60% { box-shadow:0 0 12rpx #FFFFFF; }
|
||||
90% { box-shadow:0 0 18rpx #FFFFFF; }
|
||||
100% { box-shadow:0 0 20rpx #FFFFFF; }
|
||||
|
||||
}
|
||||
//#endif
|
||||
</style>
|
||||
1497
community/components/douyin-scrollview/douyin-A-scrollview.nvue
Normal file
1497
community/components/douyin-scrollview/douyin-A-scrollview.nvue
Normal file
File diff suppressed because it is too large
Load Diff
1458
community/components/douyin-scrollview/douyin-H-scrollview.vue
Normal file
1458
community/components/douyin-scrollview/douyin-H-scrollview.vue
Normal file
File diff suppressed because it is too large
Load Diff
113
community/components/five-comment/five-comment.vue
Normal file
113
community/components/five-comment/five-comment.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<view v-if="isShow" class="comment ">
|
||||
<view class="mask" @click="clickCancle()"></view>
|
||||
<view class="comment-bottom">
|
||||
<textarea class="bottom-textarea" :cursor-spacing="setHight()" v-model="content" focus placeholder-style="color:#666666" :placeholder="placeholder" />
|
||||
<view class="bottom-view" id="bottomView"><cover-view class="send-btn" @click="clickSend">发送</cover-view></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入评论内容…'
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
content: ''
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
setHight() {
|
||||
return uni.upx2px(80);
|
||||
},
|
||||
clickSend(event) {
|
||||
event.stopPropagation();
|
||||
this.$emit('sendComment', this.content);
|
||||
//发送后清空数据
|
||||
this.content = '';
|
||||
this.isShow = false;
|
||||
},
|
||||
open() {
|
||||
this.isShow = true;
|
||||
},
|
||||
clickCancle() {
|
||||
this.isShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.comment {
|
||||
z-index: 1000;
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mask {
|
||||
width: 750rpx;
|
||||
height: 1624rpx;
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
|
||||
}
|
||||
.mask-hidden {
|
||||
display: none;
|
||||
}
|
||||
.comment-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 750rpx;
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
z-index:1000;
|
||||
bottom: 0;
|
||||
border-bottom-style: solid ;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #f2f2f2;
|
||||
|
||||
}
|
||||
|
||||
.bottom-textarea {
|
||||
margin: 0 auto;
|
||||
width: 690rpx;
|
||||
margin-top: 20rpx;
|
||||
height: 210rpx;
|
||||
border-bottom-style: solid ;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
.bottom-view {
|
||||
margin: 0rpx 30rpx;
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 100rpx;
|
||||
text-align: end;
|
||||
font-size: 30rpx;
|
||||
align-items: center;
|
||||
color: #d81e07;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
52
community/components/five-mul-commentlist/╩╣╙├╦╡├≈.md
Normal file
52
community/components/five-mul-commentlist/╩╣╙├╦╡├≈.md
Normal file
@ -0,0 +1,52 @@
|
||||
#### **1. 使用方法：**
|
||||
|
||||
```javascript
|
||||
<!--
|
||||
@param: commentList展示的评论列表数据
|
||||
@method: clickPraise 点赞评论
|
||||
@method: clickDelete 删除父级评论
|
||||
@method: clickRecommentChild 点赞子评论
|
||||
@method: clickDeleteChild 删除子评论
|
||||
-->
|
||||
<five-mul-commentlist
|
||||
:commentList="commentList"
|
||||
@clickPraise="clickPraiseComment"
|
||||
@clickDelete="clickDeleteComment"
|
||||
@clickDeleteChild="clickDeleteCommentChild"
|
||||
@clickRecomment="clickRecomment"
|
||||
@clickRecommentChild="clickRecommentChild"
|
||||
></five-mul-commentlist>
|
||||
|
||||
```
|
||||
#### **2. commentList数据格式参照如下：**
|
||||
|
||||
```json
|
||||
[{
|
||||
{
|
||||
"COMMENT_TIME": "",
|
||||
"FIRSTNICKNAME": "",
|
||||
"IS_PRAISE": null,
|
||||
"COMMENT": "",
|
||||
"PRAISE_NUM": 0,
|
||||
"CANDELETE": 0,
|
||||
"HEADIMGURL": "",
|
||||
"PARENTID": "",
|
||||
"SECONDNICKNAME": null,
|
||||
"CHILD_ANWSER_LIST": [{
|
||||
"COMMENT_TIME": "",
|
||||
"FIRSTNICKNAME": "",
|
||||
"IS_PRAISE": null,
|
||||
"COMMENT": "",
|
||||
"PRAISE_NUM": 0,
|
||||
"CANDELETE": 1,
|
||||
"HEADIMGURL": ",
|
||||
"SECONDNICKNAME": ""
|
||||
}]
|
||||
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
256
community/components/q-post-waterfall/q-post-waterfall.vue
Normal file
256
community/components/q-post-waterfall/q-post-waterfall.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="waterfall-wrap">
|
||||
<u-waterfall v-model="list" ref="uWaterfall">
|
||||
<template v-slot:left="{ leftList }">
|
||||
<view @click="jump(item)" v-for="(item, index) in leftList" :key="item.id" class="post-item post-left">
|
||||
<u-lazy-load v-if="item.story_type == 2" loading-img="/static/img-load.png" threshold="100" border-radius="10" :image="item.story_file[0]" :index="item.id"></u-lazy-load>
|
||||
<view class="video-wrap" v-if="item.story_type == 4" >
|
||||
|
||||
<image v-if="(item.story_file[0])" :lazy-load="true" :src="item.story_file[0]" mode="widthFix"></image>
|
||||
<image v-else :lazy-load="true" :src="item.story_video + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="widthFix"></image>
|
||||
<image class="pay-icon" :lazy-load="true" src="@/static/images/play.png"></image>
|
||||
</view>
|
||||
<view class="post-title">{{ item.story_title}}</view>
|
||||
<view class="footer">
|
||||
<block v-if="(IsLoginUser && type == 'publish')">
|
||||
<view class="operation" @click.stop="showPopup(item)"><uni-icons type="more-filled" size="19" /></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="avatar" :lazy-load="true" :src="item.user_avatar" mode="aspectFill"></image>
|
||||
<text class="username">{{ item.user_nickname}}</text>
|
||||
<text class="thumb-num">{{ item.story_like_count }}</text>
|
||||
<uni-icons class="thumb-icon" type="heart" :size="19" color="#999"></uni-icons>
|
||||
</block>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:right="{ rightList }">
|
||||
<view @click="jump(item)" v-for="(item, index) in rightList" :key="item.id" class="post-item post-right">
|
||||
<u-lazy-load v-if="item.story_type == 2" threshold="100" loading-img="/static/img-load.png" border-radius="10" :image="item.story_file[0]" :index="item.id"></u-lazy-load>
|
||||
<view class="video-wrap" v-if="item.story_type == 4">
|
||||
<image v-if="(item.story_file[0])" :lazy-load="true" :src="item.story_file[0]" mode="widthFix"></image>
|
||||
<image v-else :lazy-load="true" :src="item.story_video + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="widthFix"></image>
|
||||
<image class="pay-icon" :lazy-load="true" src="@/static/images/play.png"></image>
|
||||
</view>
|
||||
<view class="post-title">{{ item.story_title}}</view>
|
||||
<view class="footer">
|
||||
<block v-if="(IsLoginUser && type == 'publish')">
|
||||
<view class="operation" @click.stop="showPopup(item)"><uni-icons type="more-filled" size="19" /></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="avatar" :lazy-load="true" :src="item.user_avatar" mode="aspectFill"></image>
|
||||
<text class="username">{{ item.user_nickname}}</text>
|
||||
<text class="thumb-num">{{ item.story_like_count }}</text>
|
||||
<uni-icons class="thumb-icon" type="heart" :size="19" color="#999"></uni-icons>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</u-waterfall>
|
||||
<!-- 选择分享弹窗 -->
|
||||
<uni-popup ref="popup" background-color="#fff" type="bottom">
|
||||
<view class="share-wrap">
|
||||
<view class="share-item" @click="del()">
|
||||
<text>{{ __('删除') }}</text>
|
||||
</view>
|
||||
<button class="mini-btn" type="warn" style="margin-top: 20rpx;" @click="cancel">
|
||||
<text>{{__('取消')}}</text>
|
||||
</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 加载状态 -->
|
||||
<!-- <view style="margin: 30rpx 0;"><u-loadmore :status="loadStatus" /></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
import Uwaterfall from '@/components/u-waterfall/u-waterfall.vue';
|
||||
import ULazyLoad from '@/components/u-lazy-load/u-lazy-load.vue';
|
||||
export default {
|
||||
name: 'q-post-waterfall',
|
||||
props: {
|
||||
list: Array,
|
||||
loadStatus: {
|
||||
type: String,
|
||||
default: 'loadmore'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'publish'
|
||||
},
|
||||
IsLoginUser: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
row:{}
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||||
components: {
|
||||
Uwaterfall,
|
||||
ULazyLoad,
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
showPopup: function(item) {
|
||||
this.row = item;
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
cancel: function(item) {
|
||||
this.row = {};
|
||||
this.$refs.popup.close();
|
||||
},
|
||||
del: function(e) {
|
||||
let that = this;
|
||||
this.$.showModal({
|
||||
title: '提示',
|
||||
content: '是否确定此信息?',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
var params = {
|
||||
story_id: that.row.story_id,
|
||||
}
|
||||
that.$.request({
|
||||
url: that.Config.URL.sns.story_remove,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if(status == 200)
|
||||
{
|
||||
that.$emit('onRenew', {});
|
||||
that.$.alert(msg);
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
that.$.alert(msg);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$refs.uWaterfall.remove(id);
|
||||
},
|
||||
clear() {
|
||||
this.$refs.uWaterfall.clear();
|
||||
},
|
||||
|
||||
|
||||
jump(item) {
|
||||
|
||||
let url = '/community/community/detail?id=' + item.story_id;
|
||||
|
||||
if (item.story_type == 4) {
|
||||
// #ifdef APP-PLUS
|
||||
url = '/community/index/index?id=' + item.story_id + '&uid='+item.user_id;
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
url = '/community/nvueSwiper/nvueSwiper?id=' + item.story_id + '&uid='+item.user_id;
|
||||
// #endif
|
||||
}
|
||||
this.$.navigateTo({
|
||||
url: url
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.waterfall-wrap {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.post-left {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.post-right {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
.post-item {
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
max-height: 600rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.video-wrap {
|
||||
position: relative;
|
||||
image {
|
||||
width: 100%;
|
||||
max-height: 600rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.pay-icon {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
.post-title {
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
.avatar {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.thumb-num {
|
||||
margin-left: auto;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分享弹窗
|
||||
.share-wrap {
|
||||
padding: 30rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
|
||||
.share-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0rpx 40rpx;
|
||||
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
community/components/tab.vue
Normal file
156
community/components/tab.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 项目分类tab(居中) -->
|
||||
<view v-if="type=='simple'" class="zhuige-tab zhuige-center-tab">
|
||||
<view class="zhuige-tab-nav">
|
||||
<view class="zhuige-tab-box" v-for="(tab, index) in tabs" :key="index"
|
||||
:class="curTab==tab.id?'active':''" @click="clickTab(tab)">
|
||||
{{tab.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="zhuige-tab">
|
||||
<view class="zhuige-tab-nav">
|
||||
<scroll-view class="zhuige-tab-scroll" scroll-x scroll-with-animation scroll-left="scrollLeft"
|
||||
show-scrollbar="false">
|
||||
<view class="zhuige-tab-box" v-for="(tab, index) in tabs" :key="index"
|
||||
:class="curTab==tab.id?'active':''" @click="clickTab(tab)">
|
||||
{{tab.title}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="opt" class="zhuige-tab-opt" @click="clickTabOpt">
|
||||
<uni-icons type="bars" size="22"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "tab",
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "simple"
|
||||
},
|
||||
tabs: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
curTab: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
opt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
clickTab(tab) {
|
||||
this.$emit("clickTab", tab);
|
||||
},
|
||||
|
||||
clickTabOpt() {
|
||||
this.$emit("clickTabOpt", {});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* =========== tab导航 =========== */
|
||||
.zhuige-tab {
|
||||
padding: 0 30rpx;
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.zhuige-tab-nav {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zhuige-tab-scroll *::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zhuige-tab-box {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zhuige-tab-box:last-of-type {
|
||||
margin-right: 70rpx;
|
||||
}
|
||||
|
||||
.zhuige-tab-box:first-of-type {
|
||||
margin-left: -14rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
transition: all 0.1s ease-in;
|
||||
color: #010101;
|
||||
}
|
||||
|
||||
.active::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 32rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #333333;
|
||||
top: 80rpx;
|
||||
left: 50%;
|
||||
margin-left: -16rpx;
|
||||
}
|
||||
|
||||
.zhuige-tab-opt {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
right: 10rpx;
|
||||
height: 100rpx;
|
||||
padding-left: 60rpx;
|
||||
width: 60rpx;
|
||||
line-height: 100rpx;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)30%, rgba(255, 255, 255, 1)50%, rgba(255, 255, 255, 1)100%);
|
||||
}
|
||||
|
||||
/* --- 居中tab --- */
|
||||
.zhuige-center-tab {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.zhuige-center-tab .zhuige-tab-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zhuige-center-tab .zhuige-tab-nav .zhuige-tab-box:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
263
community/components/video-lists/video-lists.vue
Normal file
263
community/components/video-lists/video-lists.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view style="height:150rpx;width:100%;"></view>
|
||||
<view class="row-space-around" >
|
||||
<view class="bg-gray-help margin-sm padding-lr-lg padding-tb-sm radius-xs" v-for="(item,index) in MemberPostsList" :key="index" @tap="goLive(item.story_id)">
|
||||
<image lazy-load :src="item.story_file[0]" style="width:366rpx;" />
|
||||
<view class="item-info">
|
||||
<image :src="item.user_avatar" mode="aspectFill" class="info-avatar" />
|
||||
<text class="item-name">{{item.user_nickname}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-loading-box" style="margin-top:120rpx;">
|
||||
<block v-if="ispage">
|
||||
<view class="u-loadmore">
|
||||
<label class="u-loading"></label>
|
||||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text></text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="u-loadmore u-loadmore-line">
|
||||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import dateUtil from "@/helpers/util_date";
|
||||
import statusBar from '@/components/status-bar.vue'
|
||||
import { mapState, mapMutations } from 'vuex';
|
||||
export default {
|
||||
props:{
|
||||
// 瀑布流列表
|
||||
videoList:{
|
||||
type:Array,
|
||||
require:true
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
ispage: false,
|
||||
page:1,
|
||||
MemberPostsList: [],
|
||||
is_loaded:false,
|
||||
};
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin','__', '$',]),
|
||||
components: {
|
||||
statusBar,
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getPostsList()
|
||||
},
|
||||
|
||||
watch:{
|
||||
|
||||
},
|
||||
methods:{
|
||||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||||
|
||||
|
||||
getPostsList: function (force_refresh) {
|
||||
let that = this;
|
||||
var params = {page: this.page, 'rand':1};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_lists,
|
||||
data: params,
|
||||
success: function (data, status, msg, code) {
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['story_time']));
|
||||
}
|
||||
|
||||
let tmp = []
|
||||
|
||||
if (force_refresh)
|
||||
{
|
||||
tmp = data.items.concat(that.MemberPostsList);
|
||||
}
|
||||
else
|
||||
{
|
||||
tmp = that.MemberPostsList.concat(data.items);
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.MemberPostsList = tmp
|
||||
that.flag = false
|
||||
that.ispage = false
|
||||
} else {
|
||||
that.MemberPostsList = tmp
|
||||
that.flag = true
|
||||
that.ispage = true
|
||||
}
|
||||
|
||||
} else {
|
||||
that.flag = false
|
||||
that.ispage = false
|
||||
|
||||
}
|
||||
|
||||
that.is_loaded = true
|
||||
|
||||
|
||||
that.$.stopPullDownRefresh()
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
goLive: function(e) {
|
||||
this.$emit('confirm', e);
|
||||
},
|
||||
|
||||
scrollbottom: function(e) {
|
||||
if (this.flag) {
|
||||
var that = this;
|
||||
that.flag = false;
|
||||
clearTimeout(n);
|
||||
|
||||
that.page = parseInt(that.page) + 1;
|
||||
|
||||
var n = setTimeout(function() {
|
||||
that.getPostsList();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.page {
|
||||
background-color: #000000;
|
||||
}
|
||||
/* 横向两端对齐,位于各行之前、之间、之后都留有空白的容器内 */
|
||||
.row-space-around {
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
display: flex;
|
||||
position: relative;
|
||||
/* #endif */
|
||||
flex-direction: row !important;
|
||||
/* justify-content: space-around !important; */
|
||||
flex-wrap:wrap !important;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.radius-xs {
|
||||
/* padding:10rpx; */
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
margin: 4rpx;
|
||||
}
|
||||
|
||||
.lv-status {
|
||||
|
||||
/* height:50rpx;
|
||||
width:120rpx; */
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction:row !important;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-top:14rpx;
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.dot-gray {
|
||||
background-color: #ababab;
|
||||
border-radius: 50%;
|
||||
margin-right: 4rpx;
|
||||
margin-top: 14rpx;
|
||||
height: 12rpx;
|
||||
width: 12rpx;
|
||||
width: 12rpx;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
margin-top: 4rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.dot {
|
||||
background-color: #ababab;
|
||||
border-radius: 50%;
|
||||
margin-right: 4rpx;
|
||||
margin-top: 14rpx;
|
||||
height: 12rpx;
|
||||
width: 12rpx;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
margin-top: 4rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.info-avatar {
|
||||
height: 50rpx;
|
||||
width: 50rpx;
|
||||
border-radius: 50rpx;
|
||||
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #fff;
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
position: absolute;
|
||||
width:300rpx;
|
||||
bottom:30rpx;
|
||||
left:20rpx;
|
||||
display: flex;
|
||||
flex-direction:row !important;
|
||||
flex-wrap: wrap !important;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.live-room-name {
|
||||
width:344rpx;
|
||||
|
||||
padding:10rpx 6rpx;
|
||||
}
|
||||
|
||||
.room-name {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
lines: 2;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.u-loading {
|
||||
width:40rpx;
|
||||
height:40rpx;
|
||||
margin-left:220rpx;
|
||||
}
|
||||
.u-loadmore-tips {
|
||||
background-color: #000000;
|
||||
color:#fff;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
width:400rpx;
|
||||
margin-left:280rpx;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
1121
community/index/index.nvue
Normal file
1121
community/index/index.nvue
Normal file
File diff suppressed because it is too large
Load Diff
797
community/nvueSwiper/nvueSwiper.nvue
Normal file
797
community/nvueSwiper/nvueSwiper.nvue
Normal file
@ -0,0 +1,797 @@
|
||||
<template>
|
||||
<view>
|
||||
<!--
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
|
||||
|
||||
1. new_index.nvue、index.nvue这两个是App页面
|
||||
|
||||
2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
|
||||
|
||||
3. 请各位大神多多留手，我已经把请求内存开到最大了
|
||||
|
||||
4. 视频 id 切记是字符串类型
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-->
|
||||
<image v-if="isShowAixin" src="../static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image>
|
||||
<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false">
|
||||
<swiper-item v-for="(list,index) in dataList" :key="index">
|
||||
<view>
|
||||
<!--
|
||||
1.v-if：用于控制视频在节点的渲染数
|
||||
2.muted的默认值是 false，代表默认是禁音视频的
|
||||
3.http-cache默认开启视频缓存
|
||||
4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
|
||||
5.show-loading：这里默认去掉播放转圈的标志
|
||||
v-if="Math.abs(k-index)<=1"
|
||||
-->
|
||||
<video v-if="Math.abs(k-index)<=1" :id="list.story_id+''+index" :loop="true" :muted="list.isplay" :controls="false" :http-cache="true" object-fit="cover" :page-gesture="false" :show-fullscreen-btn="false" :show-loading="false" :show-center-play-btn="false" :enable-progress-gesture="false" :src="list.story_video" @ended="ended" @click="tapVideoHover(list.state,$event)"
|
||||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"></video>
|
||||
<!--
|
||||
1.这里是封面（方案二）：这里的封面可以自定义。
|
||||
2.也在代码中做了批注，两种方案可以共存，不会相互影响。
|
||||
-->
|
||||
<image v-if="!list.playIng" :src="list.story_file[0]" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'" mode="aspectFit"></image>
|
||||
</view>
|
||||
<!-- 播放状态：pause 的时候就会暂停 -->
|
||||
<view class="videoHover" @click="tapVideoHover(list.state,$event)" @touchstart="touchstartHover" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
|
||||
<image v-if="list.state=='pause'" class="playState" src="../static/img/index/play.png"></image>
|
||||
</view>
|
||||
<view class="userInfo">
|
||||
<!-- 1.头像 -->
|
||||
<image @click="tozuozhe(list.user_id)" class="userAvatar" :src="list.user_avatar" mode="aspectFill"></image>
|
||||
<text class="right-text-avater" @click="onFollow(list.user_id,index)" v-if="(list.user_id != userInfo.user_id && !list.IsFollow)">+</text>
|
||||
<!-- 2.点赞 -->
|
||||
<view @click="cLike(list.IsFabulous);" style="opacity: 0.9; margin-top: 17px;">
|
||||
<image v-if="list.IsFabulous" src="../static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;" @click.stop="onUnLike" :data-story_id="list.story_id" :data-index="index"></image>
|
||||
<image v-if="!list.IsFabulous" src="../static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;" @click.stop="onLike" :data-story_id="list.story_id" :data-index="index"></image>
|
||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':list.IsFabulous}">{{list.story_like_count}}</text>
|
||||
</view>
|
||||
<!-- 3.评论 -->
|
||||
<view class="comment" @click="toComment(index)" style="opacity: 0.9; margin-top: 17px;">
|
||||
<image src="../static/img/index/liaotian-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
|
||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.story_comment_count}}</text>
|
||||
</view>
|
||||
<!-- 4.收藏 -->
|
||||
<view class="fav" style="opacity: 0.9; margin-top: 17px;">
|
||||
<image v-if="(list.IsCollection)" src="../static/img/index/sc-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;" @click.stop="onUnCollection" :data-story_id="list.story_id" :data-index="index"></image>
|
||||
<image v-else src="../static/img/index/sc.png" style="width: 35px; height: 35px; position: absolute; right: 7px;" @click.stop="onCollection" :data-story_id="list.story_id" :data-index="index"></image>
|
||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.story_collection_count}}</text>
|
||||
</view>
|
||||
<!-- 5.举报 -->
|
||||
<view @click="report" style="opacity: 0.9; margin-top: 17px;">
|
||||
<image src="../static/img/index/jubao.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
|
||||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">{{__('举报')}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 最底下的文字部分 -->
|
||||
<view class="view-product" v-if="list.item_id.length > 0 && list.product_item_name" @click.stop="onProduct(list.item_id)">
|
||||
<view class="left-view" style="width: 100rpx;height: 100rpx;">
|
||||
<image :src="list.product_image" class="product_img" style="width: 100rpx;height: 100rpx;"></image>
|
||||
</view>
|
||||
<view class="left-view" style="width: 400rpx;height: 100rpx;">
|
||||
<view class="left-text uni-ellipsis" style="padding-left: 10rpx;">{{list.product_item_name}}</view>
|
||||
<view class="left-text uni-ellipsis" style="padding-left: 10rpx;font-size: 24rpx;padding-top:4rpx;">{{sprintf(__('价格:%s'), list.item_unit_price)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" style="display: flex;">
|
||||
|
||||
<!-- <image :src="list.user_avatar" @click="tozuozhe(list.user_id)" class="userAvatar" style="width: 400rpxpx; height: 100rpx; left: 7px;position: absolute;"></image> -->
|
||||
<text class="userName" style="width: 250rpx;">@{{list.user_nickname}}</text><!-- i={{i}} -->
|
||||
|
||||
<view class="words">
|
||||
{{list.story_content}}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||||
<view v-if="isDouyin" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
||||
|
||||
<douyin-scrollview :Width="windowWidth" :story_id="story_id" :videouserID="user_id" :pinlunNum="pinlunNum" :Height="(boxStyle.height/1.23)" :deleteIOSHeight="36" :deleteAndroidHeight="15" @closeScrollview="closeScrollview"></douyin-scrollview>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
/*
|
||||
引入评论组件
|
||||
*/
|
||||
import douyinScrollview from '@/community/components/douyin-scrollview/douyin-H-scrollview.vue'
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
platform: "",
|
||||
deleteHeight: 0,
|
||||
dataList: [],
|
||||
k: 0,
|
||||
oldVideo: "",
|
||||
voice: "",
|
||||
timeout: "",
|
||||
current: 0,
|
||||
story_id: 0,
|
||||
user_id: 0,
|
||||
boxStyle: { //视频，图片封面样式🌟💗
|
||||
'height': 0,
|
||||
'width': 0,
|
||||
},
|
||||
|
||||
page: 1,
|
||||
index: 0,
|
||||
isDouyin: false,
|
||||
pinlunNum: 0,
|
||||
|
||||
deleteHeight: 0, //测试高度🌟💗
|
||||
|
||||
// 引入评论 - 参数
|
||||
heightNum: 1.18,
|
||||
|
||||
// 双击点赞参数
|
||||
touchNum: 0,
|
||||
aixinLeft: 0,
|
||||
aixinTop: 0,
|
||||
isShowAixin: false,
|
||||
Rotate: 0,
|
||||
uid: 0,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
douyinScrollview,
|
||||
uniPopup
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', '__', '$',
|
||||
'sprintf'
|
||||
]),
|
||||
watch: {
|
||||
k(k, old_k) {
|
||||
console.log(k)
|
||||
this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
|
||||
this.dataList[old_k].isplay = true
|
||||
this.dataList[old_k].state = 'pause'
|
||||
this.user_id = this.dataList[old_k].user_id;
|
||||
this.story_id = this.dataList[k].story_id
|
||||
this.pinlunNum = this.dataList[old_k].story_comment_count;
|
||||
// uni.createVideoContext(this.dataList[old_k]._id+''+old_k,this).seek(0)
|
||||
// uni.createVideoContext(this.dataList[old_k]._id+''+old_k,this).pause()
|
||||
console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].story_id + '' + old_k)
|
||||
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
||||
uni.createVideoContext(this.dataList[old_k].story_id + '' + old_k, this).stop() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
||||
console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
|
||||
//增加视频、图文观看量统计
|
||||
|
||||
|
||||
this.dataList[k].state = 'play'
|
||||
setTimeout(() => {
|
||||
uni.createVideoContext(this.dataList[k].story_id + '' + k, this).play()
|
||||
setTimeout(() => {
|
||||
this.dataList[k].isplay = false
|
||||
this.dataList[k].playIng = true
|
||||
}, 50)
|
||||
}, 250)
|
||||
var p = k + 1;
|
||||
console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].story_id + '' + p)
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.uid) {
|
||||
this.uid = options.uid
|
||||
}
|
||||
this.platform = uni.getSystemInfoSync().platform
|
||||
var model = uni.getSystemInfoSync().model
|
||||
if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')) {
|
||||
this.deleteHeight = 0 //有 tabbar的 修改这里可以改变视频高度
|
||||
|
||||
/*
|
||||
引入评论参数
|
||||
*/
|
||||
|
||||
this.heightNum = 1.27
|
||||
} else {
|
||||
this.deleteHeight = 0
|
||||
/*
|
||||
引入评论参数
|
||||
*/
|
||||
this.heightNum = 1.25
|
||||
}
|
||||
this.story_id = options.id ? options.id : 0;
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
||||
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
||||
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||||
this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
|
||||
this.get() //刚进入页面加载数据
|
||||
},
|
||||
onShow() {
|
||||
console.log('回到前台');
|
||||
if (this.dataList.length !== 0) {
|
||||
this.dataList[this.k].state = 'play';
|
||||
uni.createVideoContext(this.dataList[this.k].story_id + '' + this.k, this).play()
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
|
||||
uni.createVideoContext(this.dataList[this.k].story_id + '' + this.k, this).pause(); //暂停以后继续播放
|
||||
console.log('到后台');
|
||||
},
|
||||
onShareAppMessage() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
});
|
||||
// #endif
|
||||
|
||||
return {
|
||||
imageUrl: this.dataList[0]['story_file'][0],
|
||||
title: this.pname,
|
||||
path: "/community/nvueSwiper/nvueSwiper?id=" + this.story_id + "&uid=" + this.userInfo.user_id
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 用户点击右上角分享朋友圈
|
||||
*/
|
||||
onShareTimeline: function() {
|
||||
return {
|
||||
title: this.dataList[0].story_title,
|
||||
query: {
|
||||
uid: this.userInfo.user_id,
|
||||
pid: this.story_id
|
||||
},
|
||||
imageUrl: this.dataList[0]['story_file'][0],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
ended() {
|
||||
// 1.播放当前视频结束时触发，自动切换下一个视频
|
||||
// this.current = this.k+1
|
||||
},
|
||||
onProduct(item_id) {
|
||||
this.$.gopage('/pages/product/detail?pid=' + item_id)
|
||||
},
|
||||
//取消收藏
|
||||
onUnCollection: function(a) {
|
||||
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: a.currentTarget.dataset.story_id
|
||||
};
|
||||
that.forceUserInfo(function(user) {
|
||||
that.index = a.currentTarget.dataset.index;
|
||||
that.$.request({
|
||||
url: that.Config.URL.sns.story_collection_remove,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.dataList[that.index].IsCollection = false;
|
||||
that.dataList[that.index].story_collection_count--;
|
||||
that.$forceUpdate();
|
||||
} else {
|
||||
that.$.confirm(msg)
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//收藏
|
||||
onCollection: function(a) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: a.currentTarget.dataset.story_id
|
||||
};
|
||||
that.forceUserInfo(function(user) {
|
||||
that.index = a.currentTarget.dataset.index;
|
||||
|
||||
that.$.request({
|
||||
url: that.Config.URL.sns.story_collection_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.dataList[that.index].IsCollection = true;
|
||||
that.dataList[that.index].story_collection_count++;
|
||||
that.$forceUpdate();
|
||||
} else {
|
||||
that.$.confirm(msg)
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//举报
|
||||
report: function() {
|
||||
this.$.gotopage('/member/member/feedback')
|
||||
},
|
||||
|
||||
closeScrollview() {
|
||||
// 点击评论里面的叉叉，就会关闭评论
|
||||
this.$refs.pinglun.close();
|
||||
},
|
||||
|
||||
onUnLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.canceldianzan(a.currentTarget.dataset.story_id)
|
||||
that.index = a.currentTarget.dataset.index;
|
||||
});
|
||||
},
|
||||
canceldianzan: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_remove,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
//修正当前记录数据
|
||||
that.dataList[that.index].IsFabulous = false;
|
||||
that.dataList[that.index].story_like_count--
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
onLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.doLike(a.currentTarget.dataset.story_id);
|
||||
that.index = a.currentTarget.dataset.index;
|
||||
});
|
||||
},
|
||||
doLike: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.dataList[that.index].IsFabulous = true;
|
||||
that.dataList[that.index].story_like_count++
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 双击点赞效果
|
||||
touchstartHover(event) {
|
||||
if (this.touchNum >= 1) {
|
||||
// console.log('双击 -- X坐标：'+ event.touches[0].screenX);
|
||||
// console.log('双击 -- Y坐标：'+ event.touches[0].screenY);
|
||||
this.aixinLeft = event.touches[0].screenX - 50;
|
||||
this.aixinTop = event.touches[0].screenY - 50;
|
||||
this.isShowAixin = true;
|
||||
let max = 40;
|
||||
let min = -40;
|
||||
this.Rotate = Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
setTimeout(() => {
|
||||
this.isShowAixin = false;
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
//点击播放&&暂停
|
||||
tapVideoHover(state, event) {
|
||||
this.dataList[this.k].isShowimage = false
|
||||
this.dataList[this.k].isShowProgressBarTime = false
|
||||
this.ProgressBarOpacity = 0.5
|
||||
this.dotWidth = 0
|
||||
console.log('state--', state);
|
||||
// 1.启用双击点赞 --- start
|
||||
this.touchNum++;
|
||||
setTimeout(() => {
|
||||
if (this.touchNum == 1) {
|
||||
if (state == 'play' || state == 'continue') {
|
||||
|
||||
this.dataList[this.k].state = 'pause';
|
||||
|
||||
} else {
|
||||
this.dataList[this.k].state = 'continue';
|
||||
}
|
||||
if (this.dataList[this.k].state == 'continue') {
|
||||
uni.createVideoContext(this.dataList[this.k].story_id + '' + this.k, this).play(); //暂停以后继续播放
|
||||
}
|
||||
if (this.dataList[this.k].state == 'pause') {
|
||||
uni.createVideoContext(this.dataList[this.k].story_id + '' + this.k, this).pause(); //暂停以后继续播放
|
||||
}
|
||||
}
|
||||
if (this.touchNum >= 2) {
|
||||
this.doubleLike();
|
||||
}
|
||||
this.touchNum = 0;
|
||||
this.$set(this.dataList, this.k, this.dataList[this.k])
|
||||
|
||||
}, 200)
|
||||
// --------------- ending
|
||||
// 2. 不启用双击点赞 start
|
||||
// if(state=='play'||state=='continue'){
|
||||
// this.dataList[this.k].state = 'pause';
|
||||
// }else{
|
||||
// this.dataList[this.k].state = 'continue';
|
||||
// }
|
||||
// if(this.dataList[this.k].state == 'continue'){
|
||||
// uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play();//暂停以后继续播放
|
||||
// }
|
||||
// if(this.dataList[this.k].state == 'pause'){
|
||||
// uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).pause();//暂停以后继续播放
|
||||
// }
|
||||
// --------------- ending
|
||||
},
|
||||
doubleLike() {
|
||||
if (this.dataList[this.k].like == false) {
|
||||
this.dataList[this.k].like_n += 1;
|
||||
this.dataList[this.k].like = true;
|
||||
}
|
||||
/*
|
||||
点赞
|
||||
*/
|
||||
},
|
||||
change(event) {
|
||||
this.k = event.detail.current
|
||||
},
|
||||
tozuozhe(uid) {
|
||||
uni.navigateTo({
|
||||
url: '/community/community/userspace?uid=' + uid
|
||||
});
|
||||
},
|
||||
animationfinish(event) {
|
||||
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
|
||||
if (this.k == this.dataList.length - 1) {
|
||||
this.page = parseInt(this.page) + 1;
|
||||
this.GET()
|
||||
}
|
||||
},
|
||||
//每一组结束时新的请求
|
||||
GET() {
|
||||
let that = this;
|
||||
var params = {
|
||||
page: this.page,
|
||||
story_type: 4,
|
||||
uid: this.uid
|
||||
};
|
||||
console.log(params)
|
||||
this.$.request({
|
||||
url: this.Config.URL.sns.story_lists,
|
||||
data: params,
|
||||
success: (data, status, msg, code) => {
|
||||
var msg = data.items
|
||||
// 2.这里把视频添加到视频列表
|
||||
for (let i = 0; i < msg.length; i++) {
|
||||
msg[i].story_id = msg[i].story_id + 'k';
|
||||
msg[i].state = 'pause';
|
||||
msg[i].playIng = false;
|
||||
msg[i].isplay = true;
|
||||
msg[i].isShowimage = false;
|
||||
msg[i].isShowProgressBarTime = false;
|
||||
that.dataList.push(msg[i])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
get() {
|
||||
// 1.这里引入后端请求数据
|
||||
// this.dataList = userList;
|
||||
let that = this;
|
||||
var params = {
|
||||
page: this.page,
|
||||
story_type: 4,
|
||||
};
|
||||
console.log(params)
|
||||
params['story_id'] = that.story_id;
|
||||
this.$.request({
|
||||
url: this.Config.URL.sns.story_lists,
|
||||
data: params,
|
||||
success: (data, status, msg, code) => {
|
||||
|
||||
var msg = data.items
|
||||
this.user_id = msg[0].user_id;
|
||||
this.story_id = msg[0].story_id;
|
||||
this.pinlunNum = msg[0].story_comment_count;
|
||||
// 2.这里把视频添加到视频列表
|
||||
for (let i = 0; i < msg.length; i++) {
|
||||
msg[i].story_id = msg[i].story_id + 'k';
|
||||
msg[i].state = 'pause';
|
||||
msg[i].playIng = false;
|
||||
msg[i].isplay = true;
|
||||
msg[i].isShowimage = false;
|
||||
msg[i].isShowProgressBarTime = false;
|
||||
this.dataList.push(msg[i])
|
||||
}
|
||||
|
||||
// 3.播放当前视频
|
||||
setTimeout(() => {
|
||||
this.dataList[this.k].isplay = false
|
||||
this.dataList[this.k].state = 'play'
|
||||
uni.createVideoContext(this.dataList[this.k].story_id + '' + this.k, this).play()
|
||||
|
||||
this.dataList[this.k].playIng = true
|
||||
this.$set(this.dataList, this.k, this.dataList[this.k])
|
||||
}, 200)
|
||||
// start - 预加载开始
|
||||
var p = this.k
|
||||
++p
|
||||
|
||||
if (typeof this.dataList[p] != "undefined") {
|
||||
setTimeout(() => {
|
||||
uni.createVideoContext(this.dataList[p].story_id + '' + this.k, this).play()
|
||||
}, 20)
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(() => {
|
||||
uni.createVideoContext(this.dataList[p].story_id + '' + this.k, this).seek(0)
|
||||
uni.createVideoContext(this.dataList[p].story_id + '' + this.k, this).pause()
|
||||
console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].story_id + '' + p)
|
||||
}, 1500)
|
||||
}
|
||||
// end - 预加载结束
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
share() {
|
||||
uni.showToast({
|
||||
title: '分享',
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
onFollow: function(user_id, index) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.AddFollow(user_id, index)
|
||||
});
|
||||
},
|
||||
AddFollow: function(friend_id, index) {
|
||||
var that = this,
|
||||
params = {
|
||||
user_id: friend_id,
|
||||
OperateId: friend_id,
|
||||
friend_id: friend_id
|
||||
};
|
||||
var list = that.dataList;
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.user.friend_agree,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
list[index].IsFollow = 1
|
||||
that.$set(that.dataList, index, list[index]);
|
||||
that.$forceUpdate();
|
||||
that.$.alert('关注成功')
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
toComment(index) {
|
||||
// 注意点击评论之后会执行这里
|
||||
/*
|
||||
（1）先加载缓冲
|
||||
（2）获取当前视频 ID 信息
|
||||
（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
|
||||
- 一定要记得看 index.vue 里面
|
||||
uni.setStorageSync("user",this.peopleList[i]);
|
||||
这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
|
||||
记得写一下。
|
||||
|
||||
（4）打开评论
|
||||
*/
|
||||
uni.showToast({
|
||||
title: '加载中...',
|
||||
icon: 'none',
|
||||
position: 'bottom',
|
||||
duration: 300
|
||||
})
|
||||
uni.setStorageSync("videoID", this.dataList[index].story_id);
|
||||
this.isDouyin = true;
|
||||
console.log(8888)
|
||||
this.$refs.pinglun.open('bottom')
|
||||
uni.hideLoading();
|
||||
},
|
||||
cLike(sss) {
|
||||
this.dataList[this.k].like = !this.dataList[this.k].like
|
||||
const video = this.dataList[this.k];
|
||||
sss ? video.like_n -= 1 : video.like_n += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.item {
|
||||
/* width : 750rpx; */
|
||||
background-color: #000000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.videoHover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/* border-style: dashed;
|
||||
border-color: #DD524D;
|
||||
border-width: 1px; */
|
||||
}
|
||||
|
||||
.playState {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 20rpx;
|
||||
flex-direction: column;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
border-radius: 500%;
|
||||
margin-bottom: 15px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.likeIco,
|
||||
.shareIco,
|
||||
.commentIco {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.likeNum,
|
||||
.commentNum,
|
||||
.shareTex {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.likeNumActive {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 620rpx;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
/* justify-content: center; */
|
||||
padding: 15rpx;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-top: 24rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.words {
|
||||
/* margin-top: 40rpx; */
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
/*文本超出隐藏*/
|
||||
display: -webkit-box;
|
||||
/*盒子模型微弹性伸缩模型*/
|
||||
-webkit-box-orient: vertical;
|
||||
/*伸缩盒子的子元素垂直排列*/
|
||||
-webkit-line-clamp: 3;
|
||||
/*文本显示3行*/
|
||||
}
|
||||
|
||||
.root {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.right-text-avater {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 80rpx;
|
||||
left: 30rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
background-color: #DD524D;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.box_title_guanzhu_text {
|
||||
width: 140rpx;
|
||||
position: absolute;
|
||||
left: 400rpx;
|
||||
top: -8px;
|
||||
padding: 15rpx 0rpx;
|
||||
/* line-height: 56rpx; */
|
||||
border-radius: 35rpx;
|
||||
margin-top: 49rpx;
|
||||
background-color: #DB384C;
|
||||
color: #fff;
|
||||
font-size: 25rpx;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.view-product {
|
||||
position: absolute;
|
||||
margin-left: 16rpx;
|
||||
width: 500rpx;
|
||||
bottom: 250rpx;
|
||||
z-index: 9999;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
justify-content: space-between;
|
||||
flex-direction: row
|
||||
}
|
||||
</style>
|
||||
BIN
community/static/false.png
Normal file
BIN
community/static/false.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 B |
BIN
community/static/img/douyin/atuser-2.png
Normal file
BIN
community/static/img/douyin/atuser-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
community/static/img/douyin/atuser.png
Normal file
BIN
community/static/img/douyin/atuser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
community/static/img/douyin/biaoqing-2.png
Normal file
BIN
community/static/img/douyin/biaoqing-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
community/static/img/douyin/biaoqing.png
Normal file
BIN
community/static/img/douyin/biaoqing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
community/static/img/douyin/chacha-4.png
Normal file
BIN
community/static/img/douyin/chacha-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
community/static/img/douyin/cuowu.png
Normal file
BIN
community/static/img/douyin/cuowu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
community/static/img/douyin/dianzan-6.png
Normal file
BIN
community/static/img/douyin/dianzan-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
community/static/img/douyin/dianzan-7.png
Normal file
BIN
community/static/img/douyin/dianzan-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
community/static/img/douyin/gif-2.png
Normal file
BIN
community/static/img/douyin/gif-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
community/static/img/douyin/jia-9.png
Normal file
BIN
community/static/img/douyin/jia-9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
community/static/img/douyin/jianpan.png
Normal file
BIN
community/static/img/douyin/jianpan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
community/static/img/douyin/shanchu-3.png
Normal file
BIN
community/static/img/douyin/shanchu-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
community/static/img/douyin/shangyi.png
Normal file
BIN
community/static/img/douyin/shangyi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
community/static/img/douyin/sousuo-7.png
Normal file
BIN
community/static/img/douyin/sousuo-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
community/static/img/douyin/time.png
Normal file
BIN
community/static/img/douyin/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
community/static/img/douyin/xianxing.png
Normal file
BIN
community/static/img/douyin/xianxing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
community/static/img/douyin/you-3.png
Normal file
BIN
community/static/img/douyin/you-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
community/static/img/douyin/zfxsc.png
Normal file
BIN
community/static/img/douyin/zfxsc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
community/static/img/false.png
Normal file
BIN
community/static/img/false.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 B |
BIN
community/static/img/index/aixining.png
Normal file
BIN
community/static/img/index/aixining.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
community/static/img/index/jubao.png
Normal file
BIN
community/static/img/index/jubao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
community/static/img/index/liaotian-2.png
Normal file
BIN
community/static/img/index/liaotian-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
community/static/img/index/logins.gif
Normal file
BIN
community/static/img/index/logins.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
community/static/img/index/pause.png
Normal file
BIN
community/static/img/index/pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
community/static/img/index/play.png
Normal file
BIN
community/static/img/index/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
community/static/img/index/sc-2.png
Normal file
BIN
community/static/img/index/sc-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
community/static/img/index/sc.png
Normal file
BIN
community/static/img/index/sc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 876 B |
BIN
community/static/img/index/share-fill.png
Normal file
BIN
community/static/img/index/share-fill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
community/static/img/index/xin-2.png
Normal file
BIN
community/static/img/index/xin-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
community/static/img/index/xin-3.png
Normal file
BIN
community/static/img/index/xin-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
community/static/img/index/xin.png
Normal file
BIN
community/static/img/index/xin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
community/static/jihao.png
Normal file
BIN
community/static/jihao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
community/static/youjiantou.png
Normal file
BIN
community/static/youjiantou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
801
community/video/video.nvue
Normal file
801
community/video/video.nvue
Normal file
@ -0,0 +1,801 @@
|
||||
<template>
|
||||
<div class="page" :style="{ height: height }">
|
||||
<view class="tab-tab-bar">
|
||||
<view class="tab-list" @click.stop="clickTab(0)"><text class="tab-name" :class="tabIndex==0 ? 'active' : ''">{{__('推荐')}}</text></view>
|
||||
<view class="tab-border"></view>
|
||||
<view class="tab-list" @click.stop="clickTab(1)"><text class="tab-name" :class="tabIndex==1 ? 'active' : ''">{{__('同城')}}</text></view>
|
||||
|
||||
<view @click.stop="gopost">
|
||||
<image class="video-img" src="../../static/images/video.png" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper class="swiper" :current="tabIndex" @change="changeTab" :duration="300" :indicator-dots="false" :vertical="false">
|
||||
<swiper-item>
|
||||
<swiper class="swiper" :vertical="true" @change="changeCurrent" :current="index">
|
||||
<swiper-item v-for="(item, idx) in videoList" :key="idx" class="swiper-item">
|
||||
|
||||
<div v-if="Math.abs(index-idx)<=1" class="video-box">
|
||||
<chunlei-video class="video" :src="item.story_video" :height="height" :width="width" :play="item.flag" v-if="Math.abs(index-idx)<=1" :gDuration="item.duration" :initialTime="item.initialTime" @pause="pauseVideo" @click="clickVideo" :objectFit="item.objectFit">
|
||||
</chunlei-video>
|
||||
|
||||
<cover-view class="cover-view-product" v-if="item.item_id && item.product_item_name" @click.stop="onProduct(item.item_id)">
|
||||
<cover-view class="left-view" style="width: 100rpx;height: 100rpx;">
|
||||
<cover-image :src="item.product_image" class="product_img" style="width: 100rpx;height: 100rpx;"></cover-image>
|
||||
</cover-view>
|
||||
<cover-view class="left-view" style="width: 400rpx;height: 100rpx;">
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;">{{item.product_item_name}}</cover-view>
|
||||
<cover-view class="left-text uni-ellipsis" style="padding-left: 10rpx;font-size: 24rpx;padding-top:4rpx;">{{sprintf(__('价格:%s'), item.item_unit_price)}}</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="cover-view-left">
|
||||
<cover-view class="left-view">
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="left-text">@{{item.user_nickname}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text">@{{item.user_nickname}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</cover-view>
|
||||
<cover-view class="left-view">
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="left-text">{{item.story_title}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="left-text">{{item.story_title}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view class="cover-view-right">
|
||||
<cover-image :src="item.story_file[0]" class="avater" @click.stop="tapAvater(item.user_id)"></cover-image>
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text-avater">+</text>
|
||||
<text class="right-text"></text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text-avater">+</cover-view>
|
||||
<cover-view class="right-text"></cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<cover-image v-if="item.IsFabulous" src="https://static.lancerdt.com/xcxfile/appicon/video/aixinRed.png" class="img" @click.stop="onUnLike" :data-story_id="item.story_id"></cover-image>
|
||||
|
||||
<cover-image v-if="!(item.IsFabulous)" src="https://static.lancerdt.com/xcxfile/appicon/video/aixin.png" class="img" @click.stop="onLike" :data-story_id="item.story_id"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{item.story_like_count}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{item.story_like_count}}</cover-view>
|
||||
<!-- #endif -->
|
||||
|
||||
<block v-if="true">
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/xiaoxi.png" class="img" :data-story_id="item.story_id" :data-user_id="item.user_id" @click.stop="tapMsg"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{item.story_comment_count}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{item.story_comment_count}}</cover-view>
|
||||
<!-- #endif -->
|
||||
<block v-if="false">
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/share-fill.png" class="img" @click.stop="tapShare"></cover-image>
|
||||
|
||||
<!-- #ifdef APP-PLUS-NVUE -->
|
||||
<text class="right-text">{{__('分享')}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS-NVUE -->
|
||||
<cover-view class="right-text">{{__('分享')}}</cover-view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<cover-image src="https://static.lancerdt.com/xcxfile/appicon/video/changpian.png" class="musicIcon img" v-if="false"></cover-image>
|
||||
</cover-view>
|
||||
</div>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<scroll-view scroll-y @scrolltolower="scrolltolower" style="z-index:9999;height:100%;">
|
||||
<video-lists ref="VideoLists" @confirm="confirm($event)"></video-lists>
|
||||
</scroll-view>
|
||||
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view :class="'m-panel-sp ' + (selectsp == 0 ?'hide':'') " @click.stop="closesp" v-if="(selectsp)">
|
||||
<view class="m-panel-sp-content" @click.stop>
|
||||
<view class="page-body">
|
||||
<five-mul-commentlist :commentLists="commentList" @clickPraise="clickPraiseComment" @clickDelete="clickDeleteComment" @clickDeleteChild="clickDeleteCommentChild" @clickRecomment="clickRecomment" @clickRecommentChild="clickRecommentChild" @confirm="setNum($event)" :story_id="story_id" :user_id="user_id"></five-mul-commentlist>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
import dateUtil from "../../helpers/util_date";
|
||||
import chunleiVideo from '@/community/components/chunlei-video/chunlei-video.vue'
|
||||
import VideoLists from '@/community/components/video-lists/video-lists.vue'
|
||||
import FiveComment from '@/community/components/five-comment/five-comment.vue'
|
||||
import FiveMulCommentlist from '@/community/components/five-mul-commentlist/five-mul-commentlist.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
chunleiVideo,
|
||||
VideoLists,
|
||||
FiveMulCommentlist,
|
||||
FiveComment
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sysheight: 0,
|
||||
videoList: [],
|
||||
height: '667px',
|
||||
index: 0,
|
||||
width: '',
|
||||
oldIndex: 0,
|
||||
story_id: 0,
|
||||
tabIndex: 0,
|
||||
|
||||
user_id: 0,
|
||||
ischange: false,
|
||||
|
||||
selectsp: 0,
|
||||
shareContetnFlag: 0,
|
||||
|
||||
detailInfo: {},
|
||||
commentList: [],
|
||||
|
||||
//评论组件相关
|
||||
placeholder: '请输入评论内容…',
|
||||
commentParam: {},
|
||||
|
||||
flag: false,
|
||||
pageIndex: 1,
|
||||
|
||||
flag_index: false,
|
||||
}
|
||||
},
|
||||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', '__', '$',
|
||||
'sprintf'
|
||||
]),
|
||||
|
||||
onLoad: function(options) {
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("portrait-primary")
|
||||
//#endif
|
||||
this.sysheight = uni.getSystemInfoSync().windowHeight
|
||||
this.height = `${this.sysheight}px`
|
||||
let width = uni.getSystemInfoSync().windowWidth
|
||||
this.width = `${width}px`
|
||||
|
||||
|
||||
this.story_id = options.id ? options.id : 0;
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
await this.pushVideoList()
|
||||
setTimeout(() => {
|
||||
this.videoPlay(this.index)
|
||||
}, 200);
|
||||
},
|
||||
onHide() {
|
||||
for (let item of this.videoList) {
|
||||
item.flag = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout', 'getPlantformInfo', 'forceUserInfo', 'getStoreInfo']),
|
||||
changeCurrent(e) {
|
||||
this.index = e.detail.current;
|
||||
for (let item of this.videoList) {
|
||||
item.flag = false
|
||||
}
|
||||
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
},
|
||||
pushVideoList() {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
|
||||
let that = this;
|
||||
var params = {
|
||||
page: this.page
|
||||
};
|
||||
|
||||
params['story_id'] = that.story_id;
|
||||
|
||||
this.$.request({
|
||||
url: this.Config.URL.sns.story_lists,
|
||||
data: params,
|
||||
success: (data, status, msg, code) => {
|
||||
|
||||
let videoGroup = []
|
||||
if (data.items.length > 0) {
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
data.items[r]['story_time_str'] = dateUtil.dateUtils.format(this.$.datetimeFormatter(data.items[r][
|
||||
'story_time'
|
||||
]));
|
||||
|
||||
data.items[r]['flag'] = false;
|
||||
data.items[r]['objectFit'] = 'fill';
|
||||
/*
|
||||
videoGroup.push({
|
||||
story_video:item.data.playUrl,
|
||||
story_title:item.data.title,
|
||||
flag: false,
|
||||
IsFabulous:false,
|
||||
story_like_count:'7w',
|
||||
story_comment_count:'1045',
|
||||
user_nickname:item.data.author.name,
|
||||
user_avatar:item.data.author.icon,
|
||||
initialTime: 0,
|
||||
duration: item.data.duration
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.videoList = that.videoList.concat(data.items);
|
||||
that.flag = false;
|
||||
that.ispage = false;
|
||||
} else {
|
||||
that.videoList = that.videoList.concat(data.items);
|
||||
that.flag = true;
|
||||
that.ispage = true
|
||||
}
|
||||
|
||||
resolve()
|
||||
|
||||
} else {
|
||||
|
||||
that.flag = false;
|
||||
that.ispage = false;
|
||||
}
|
||||
|
||||
that.ispage = true;
|
||||
|
||||
that.$.stopPullDownRefresh()
|
||||
that.$.hideLoading();
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
return promise
|
||||
},
|
||||
|
||||
async confirm(res) {
|
||||
var that = this;
|
||||
|
||||
this.story_id = res;
|
||||
this.videoList = [];
|
||||
this.ischange = true;
|
||||
this.page = 1;
|
||||
this.index = 0;
|
||||
this.oldIndex = 0;
|
||||
this.tabIndex = 0;
|
||||
await this.pushVideoList()
|
||||
setTimeout(() => {
|
||||
this.videoPlay(this.index)
|
||||
}, 200);
|
||||
},
|
||||
|
||||
changeTab(e) {
|
||||
if (this.ischange) {
|
||||
this.ischange = false;
|
||||
} else {
|
||||
this.tabIndex = e.detail.current
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
clickTab(e) {
|
||||
this.tabIndex = e
|
||||
},
|
||||
|
||||
gopost() {
|
||||
this.$.gopage('/community/community/post')
|
||||
},
|
||||
tapLove() {
|
||||
this.videoList[this.index].IsFabulous = !this.videoList[this.index].IsFabulous
|
||||
this.videoList = [...this.videoList]
|
||||
|
||||
},
|
||||
onProduct(item_id) {
|
||||
this.$.gopage('/pages/product/detail?pid=' + item_id)
|
||||
},
|
||||
|
||||
scrolltolower() {
|
||||
this.$refs.VideoLists.scrollbottom();
|
||||
},
|
||||
setNum(res) {
|
||||
this.videoList[this.index].story_comment_count = parseInt(this.videoList[this.index].story_comment_count) + 1
|
||||
},
|
||||
|
||||
tapAvater(uid) {
|
||||
/*
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `点击索引为${this.index}的头像`
|
||||
})
|
||||
*/
|
||||
|
||||
this.$.gopage('/community/community/userspace?uid=' + uid);
|
||||
},
|
||||
tapMsg(a) {
|
||||
this.story_id = parseInt(a.currentTarget.dataset.story_id)
|
||||
|
||||
this.user_id = parseInt(a.currentTarget.dataset.user_id)
|
||||
|
||||
this.GetPostsCommentByPostsId()
|
||||
this.selectsp = 1;
|
||||
},
|
||||
|
||||
closesp: function(e) {
|
||||
var that = this;
|
||||
|
||||
this.selectsp = 0
|
||||
|
||||
setTimeout(function() {
|
||||
this.selectsp = 0
|
||||
},
|
||||
1e2)
|
||||
|
||||
},
|
||||
|
||||
|
||||
tapShare() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: `分享索引为${this.index}的视频`
|
||||
})
|
||||
},
|
||||
videoPlay(index) {
|
||||
let promise = new Promise((resolve, reject) => {
|
||||
resolve()
|
||||
})
|
||||
promise.then(res => {
|
||||
this.videoList[index].flag = !this.videoList[index].flag
|
||||
})
|
||||
},
|
||||
pauseVideo(val) {
|
||||
if (typeof this.videoList[this.oldIndex].initialTime != 'undefined') this.videoList[this.oldIndex].initialTime =
|
||||
val
|
||||
},
|
||||
clickVideo() {
|
||||
this.videoList[this.index].flag = !this.videoList[this.index].flag
|
||||
},
|
||||
|
||||
GetMemberPostsServerData: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: that.story_id,
|
||||
user_id: that.userInfo.user_id,
|
||||
to_user_id: that.datauser.user_id,
|
||||
/* operateId: that.shopInfo.store_id*/
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_rel_data,
|
||||
data: params,
|
||||
loading: false,
|
||||
success: function(data, status, msg, code) {
|
||||
that.setData({
|
||||
dataContent: data,
|
||||
story_hot_rows: data.story_hot_rows
|
||||
});
|
||||
|
||||
0 < that.dataContent.like_user_total ? that.setData({
|
||||
isshowdzphoto: true
|
||||
}) : that.setData({
|
||||
isshowdzphoto: false
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
GetPostsCommentByPostsId: function() {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: that.story_id,
|
||||
sidx: 'comment_time',
|
||||
sord: 'DESC',
|
||||
};
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_comment_lists,
|
||||
data: params,
|
||||
loading: false,
|
||||
success: function(data, status, msg, code) {
|
||||
if (data.items.length > 0) {
|
||||
|
||||
for (var r = 0; r < data.items.length; r++) {
|
||||
//that.dataComment[r]['comment_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(that.dataComment[r]['comment_time']));
|
||||
|
||||
data.items[r]['comment_time_str'] = data.items[r]['comment_time'];
|
||||
|
||||
data.items[r]['reply_name_str'] = '';
|
||||
|
||||
for (var j = 0; j < data.items[r]['commentList'].length; j++) {
|
||||
data.items[r]['commentList'][j]['comment_reply_time_str'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.items[r]['commentList'][j]['comment_reply_time']));
|
||||
|
||||
//data.items[r]['commentList'][j]['comment_reply_time_str'] = data.items[r]['commentList'][j]['comment_reply_time'];
|
||||
|
||||
data.items[r]['reply_name_str'] = data.items[r]['commentList'][j]['user_nickname'];
|
||||
}
|
||||
}
|
||||
|
||||
if (data.page >= data.total) {
|
||||
that.commentList = data.items
|
||||
that.flag_index = false
|
||||
that.ispage_index = false
|
||||
} else {
|
||||
that.commentList = data.items
|
||||
that.flag_index = true
|
||||
that.ispage_index = true
|
||||
}
|
||||
console.log(that.commentList)
|
||||
|
||||
} else {
|
||||
that.flag_index = false
|
||||
that.ispage_index = false
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.doLike(a.currentTarget.dataset.story_id)
|
||||
});
|
||||
},
|
||||
doLike: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_add,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
that.videoList[that.index].IsFabulous = true;
|
||||
that.videoList[that.index].story_like_count++
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnLike: function(a) {
|
||||
let that = this;
|
||||
that.forceUserInfo(function(user) {
|
||||
that.canceldianzan(a.currentTarget.dataset.story_id)
|
||||
});
|
||||
},
|
||||
canceldianzan: function(story_id) {
|
||||
var that = this,
|
||||
params = {
|
||||
story_id: story_id
|
||||
};
|
||||
|
||||
that.$.request({
|
||||
url: this.Config.URL.sns.story_like_remove,
|
||||
data: params,
|
||||
success: function(data, status, msg, code) {
|
||||
if (200 == status) {
|
||||
//修正当前记录数据
|
||||
that.videoList[that.index].IsFabulous = false;
|
||||
that.videoList[that.index].story_like_count--
|
||||
} else {}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index(newVal, oldVal) {
|
||||
this.oldIndex = oldVal
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.swiper {
|
||||
flex: 1;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cover-view-center {
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.1;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.cover-view-product {
|
||||
position: absolute;
|
||||
margin-left: 10rpx;
|
||||
width: 500rpx;
|
||||
bottom: 250rpx;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
justify-content: space-between;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.cover-view-left {
|
||||
position: absolute;
|
||||
margin-left: 10rpx;
|
||||
width: 600rpx;
|
||||
bottom: 60rpx;
|
||||
z-index: 9999;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
white-space: pre-wrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
//#endif
|
||||
}
|
||||
|
||||
.left-view {
|
||||
margin-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.uni-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
lines: 1;
|
||||
/* line-height: 1; */
|
||||
word-wrap: anywhere;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.left-text {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.avater {
|
||||
border-radius: 50rpx;
|
||||
border-color: #fff;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
||||
height: 90rpx !important;
|
||||
width: 90rpx !important;
|
||||
opacity: 0.9;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.cover-view-right {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
right: 20rpx;
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//#endif
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.right-text-avater {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 80rpx;
|
||||
left: 30rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
background-color: #DD524D;
|
||||
color: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.avater-icon {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
|
||||
color: #fff;
|
||||
background-color: #DD524D;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: -20rpx;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 10rpx;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.musicIcon {
|
||||
margin-top: 40rpx !important;
|
||||
/* #ifndef APP-PLUS-NVUE */
|
||||
animation: rotating 3s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 70rpx;
|
||||
width: 70rpx;
|
||||
opacity: 0.9;
|
||||
margin: auto;
|
||||
//#ifdef APP-PLUS-NVUE
|
||||
margin-left: 10rpx;
|
||||
//#endif
|
||||
}
|
||||
|
||||
.page {
|
||||
//#ifndef APP-PLUS-NVUE
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//#endif
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tab-tab-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
/* flex-wrap:wrap !important; */
|
||||
z-index: 2;
|
||||
padding-top: 40rpx;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-left: 600rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-top: 10rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.tab-border {
|
||||
height: 50rpx;
|
||||
width: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
/* #ifdef APP-PLUS-NVUE */
|
||||
padding-bottom: 12rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.video-img {
|
||||
width: 80rpx;
|
||||
height: 50rpx;
|
||||
left: 150rpx;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.m-panel-sp {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
height: 1624rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
|
||||
.m-panel-sp-content {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
box-shadow: 0px -10rpx 15rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.view-conmment-send-bottom {
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: white;
|
||||
border-top: 1px solid #fbfbfb;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.view-comment-textarea {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 40rpx;
|
||||
padding: 15rpx 20rpx;
|
||||
margin: 25rpx 20rpx;
|
||||
width: 700rpx;
|
||||
/* flex: 1;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.textarea-comment {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
font-size: $uni-font-size-base;
|
||||
/* color: $uni-text-color; */
|
||||
color: $uni-text-sub-color;
|
||||
}
|
||||
|
||||
.icon-comment {
|
||||
font-size: 46rpx;
|
||||
color: $uni-text-color;
|
||||
margin: 0 30rpx 0 5rpx;
|
||||
}
|
||||
|
||||
.view-btn-comment {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $uni-font-size-base;
|
||||
color: white;
|
||||
height: 70rpx;
|
||||
width: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: $theme-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.textarea-bottom {
|
||||
background-color: white;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
690
components/HM-filterDropdown/HM-filterDropdown.vue
Normal file
690
components/HM-filterDropdown/HM-filterDropdown.vue
Normal file
@ -0,0 +1,690 @@
|
||||
<template>
|
||||
<view class="HMfilterDropdown" @touchmove.stop.prevent="discard" >
|
||||
<view class="nav">
|
||||
<block v-for="(item,index) in menu" :key="index">
|
||||
<view class="first-menu" :class="{'on':showPage==index}" @tap="togglePage(index)">
|
||||
<text class="name">{{item.name}}</text>
|
||||
<text class="iconfont triangle" :style="'transform:rotate('+triangleDeg[index]+'deg);'"></text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view>
|
||||
<block v-for="(page,page_index) in subData" :key="page_index">
|
||||
<view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}">
|
||||
<block v-if="page.type=='hierarchy'&& page.sub.length>0">
|
||||
<scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']"
|
||||
:scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto">
|
||||
<block v-for="(sub,index) in page.sub" :key="index">
|
||||
<view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)">
|
||||
<view class="menu-name">
|
||||
<text>{{sub.name}}</text>
|
||||
<text class="iconfont selected"></text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<block v-for="(sub,index) in page.sub" :key="index">
|
||||
<scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.sub.length>0"
|
||||
:scroll-into-view="'second_id'+secondScrollInto">
|
||||
<block v-for="(sub_second,second_index) in sub.sub" :key="second_index">
|
||||
<view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}">
|
||||
<view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)">
|
||||
<text>{{sub_second.name}}</text>
|
||||
<text class="iconfont selected"></text>
|
||||
</view>
|
||||
<view class="more-sub-menu" v-if="sub_second.sub&&sub.sub.length>0&&sub_second.sub.length>0">
|
||||
<block v-for="(sub2,sub2_index) in sub_second.sub" :key="sub2_index">
|
||||
<text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
|
||||
@tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text>
|
||||
<text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.sub.length>9" @tap="showMoreSub(second_index)">更多<text
|
||||
class="iconfont triangle"></text></text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</block>
|
||||
<block v-if="page.type=='filter'">
|
||||
<view class="filter">
|
||||
<scroll-view class="menu-box" :scroll-y="true">
|
||||
<view class="box" v-for="(box,box_index) in page.sub" :key="box_index">
|
||||
<view class="title">{{box.name}}</view>
|
||||
<view class="labels">
|
||||
<view v-for="(label,label_index) in box.sub" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)"
|
||||
:class="{'on':label.selected}">{{label.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="btn-box">
|
||||
<view class="reset" @tap="resetFilterData(page_index)">{{__('重置')}}</view>
|
||||
<view class="submit" @tap="setFilterData(page_index)">{{__('确定')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
subData: [], //菜单数据
|
||||
menu: [], //顶部横条数据
|
||||
showPage: -1, //菜单页面显示/隐藏动画控制
|
||||
pageState: [], //页面的状态
|
||||
activeMenuArr: [], //UI状态
|
||||
shadowActiveMenuArr: [], //记录选中
|
||||
triangleDeg: [], //小三角形的翻转动画控制
|
||||
isShowMask: false, //遮罩层显示/隐藏动画控制
|
||||
maskVisibility: false, //遮罩层显示/隐藏状态
|
||||
//滚动区域定位
|
||||
firstScrollInto: 0,
|
||||
secondScrollInto: 0,
|
||||
componentTop:0 //组件top
|
||||
}
|
||||
},
|
||||
props: {
|
||||
filterData: {
|
||||
value: Array,
|
||||
default: []
|
||||
},
|
||||
defaultSelected:{
|
||||
value: Array,
|
||||
default: []
|
||||
},
|
||||
updateMenuName:{
|
||||
value: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterData: {
|
||||
handler() {
|
||||
this.initMenu(); //filterData重新赋值初始化菜单
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
defaultSelected(newVal) {
|
||||
this.activeMenuArr = JSON.parse(JSON.stringify(newVal));
|
||||
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMenu() {
|
||||
let tmpMenuActiveArr=[];
|
||||
let tmpMenu=[];
|
||||
for (let i = 0; i < this.filterData.length; i++) {
|
||||
let tmpitem = this.filterData[i];
|
||||
tmpMenu.push({
|
||||
//如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
|
||||
name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.sub[0].name),
|
||||
type: tmpitem.type
|
||||
});
|
||||
//初始化选中项数组-ui状态
|
||||
tmpMenuActiveArr.push(this.processActive(tmpitem));
|
||||
//初始化角度数组
|
||||
this.triangleDeg.push(0);
|
||||
//初始化控制显示状态数组
|
||||
this.pageState.push(false);
|
||||
//递归处理子菜单数据
|
||||
tmpitem = this.processsub(tmpitem);
|
||||
this.filterData[i] = tmpitem;
|
||||
}
|
||||
this.menu = tmpMenu;
|
||||
//初始化选中项数组
|
||||
tmpMenuActiveArr = this.defaultSelected.length>0?this.defaultSelected:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr;
|
||||
this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
|
||||
this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr));
|
||||
//加载菜单数据
|
||||
console.log("this.filterData.length: " + JSON.stringify(this.filterData.length));
|
||||
this.subData = this.filterData;
|
||||
},
|
||||
//展开更多
|
||||
showMoreSub(index) {
|
||||
this.subData[this.showPage].sub[this.activeMenuArr[this.showPage][0]].sub[index].showAllSub = true;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
//选中
|
||||
selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) {
|
||||
//读取记录
|
||||
if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] ==
|
||||
level1_index) {
|
||||
this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])));
|
||||
} else {
|
||||
this.activeMenuArr[page_index].splice(0, 1, level1_index);
|
||||
(level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
|
||||
(level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1);
|
||||
}
|
||||
//写入结果
|
||||
if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].sub[level1_index].sub.length == 0)
|
||||
) {
|
||||
let sub = this.subData[page_index].sub[level1_index].sub[level2_index];
|
||||
if(this.updateMenuName){
|
||||
this.menu[page_index].name = (level3_index != null && sub.sub[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].sub[level1_index].name;
|
||||
}
|
||||
this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
|
||||
this.togglePage(this.showPage);
|
||||
}
|
||||
},
|
||||
//写入结果，筛选
|
||||
setFilterData(page_index) {
|
||||
this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]));
|
||||
this.togglePage(this.showPage);
|
||||
},
|
||||
//重置结果和ui，筛选
|
||||
resetFilterData(page_index) {
|
||||
let tmpArr = [];
|
||||
let level = this.shadowActiveMenuArr[page_index].length;
|
||||
while (level > 0) {
|
||||
tmpArr.push([]);
|
||||
let box = this.subData[page_index].sub[level - 1].sub;
|
||||
for (let i = 0; i < box.length; i++) {
|
||||
this.subData[page_index].sub[level - 1].sub[i].selected = false;
|
||||
}
|
||||
level--;
|
||||
}
|
||||
this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
|
||||
this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr));
|
||||
this.$forceUpdate();
|
||||
},
|
||||
//选中筛选类label-UI状态
|
||||
selectFilterLabel(page_index, box_index, label_index) {
|
||||
let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index);
|
||||
if (find_index > -1) {
|
||||
this.activeMenuArr[page_index][box_index].splice(find_index, 1);
|
||||
this.subData[page_index].sub[box_index].sub[label_index].selected = false;
|
||||
} else {
|
||||
this.activeMenuArr[page_index][box_index].push(label_index);
|
||||
this.subData[page_index].sub[box_index].sub[label_index].selected = true;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
//菜单开关
|
||||
togglePage(index) {
|
||||
if (index == this.showPage) {
|
||||
this.hidePageLayer(true);
|
||||
this.hideMask();
|
||||
this.showPage = -1;
|
||||
} else {
|
||||
if (this.showPage > -1) {
|
||||
this.hidePageLayer(false);
|
||||
}
|
||||
this.showPageLayer(index);
|
||||
this.showMask();
|
||||
}
|
||||
},
|
||||
//hide遮罩层
|
||||
hideMask() {
|
||||
this.isShowMask = false;
|
||||
setTimeout(() => {
|
||||
this.maskVisibility = false;
|
||||
}, 200);
|
||||
},
|
||||
//show遮罩层
|
||||
showMask() {
|
||||
this.maskVisibility = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.isShowMask = true;
|
||||
}, 0);
|
||||
})
|
||||
},
|
||||
//hide菜单页
|
||||
hidePageLayer(isAnimation) {
|
||||
this.triangleDeg[this.showPage] = 0;
|
||||
let tmpIndex = this.showPage;
|
||||
if (isAnimation) {
|
||||
setTimeout(() => {
|
||||
this.pageState.splice(tmpIndex, 1, false);
|
||||
}, 200);
|
||||
this.confirm();
|
||||
} else {
|
||||
this.pageState.splice(tmpIndex, 1, false)
|
||||
}
|
||||
this.firstScrollInto = null;
|
||||
this.secondScrollInto = null;
|
||||
},
|
||||
confirm() {
|
||||
let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
|
||||
let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
|
||||
//对结果做一下处理
|
||||
index.forEach((item, i) => {
|
||||
if (typeof(item[0]) == 'object') {
|
||||
//针对筛选结果过一个排序
|
||||
item.forEach((s, j) => {
|
||||
s.sort((val1, val2) => {
|
||||
return val1 - val2;
|
||||
});
|
||||
item[j] = s;
|
||||
s.forEach((v, k) => {
|
||||
value[i][j][k] = this.subData[i].sub[j].sub[v].value;
|
||||
});
|
||||
});
|
||||
}else{
|
||||
let sub = this.subData[i].sub[item[0]];
|
||||
value[i][0] = sub.value;
|
||||
|
||||
if(value[i].length>=2 && item[1]!=null){
|
||||
if(sub.sub.length>0){
|
||||
sub = sub.sub[item[1]];
|
||||
value[i][1] = sub.hasOwnProperty('value')?sub.value:null;
|
||||
}else{
|
||||
value[i][1] = null
|
||||
}
|
||||
if(value[i].length>=3 && item[2]!=null){
|
||||
if(sub.sub.length>0){
|
||||
sub = sub.sub[item[2]];
|
||||
value[i][2] = sub.hasOwnProperty('value')?sub.value:null;
|
||||
}else{
|
||||
value[i][2] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
index[i] = item;
|
||||
|
||||
});
|
||||
|
||||
this.$emit('confirm', {
|
||||
index: index,
|
||||
value:value
|
||||
});
|
||||
},
|
||||
//show菜单页
|
||||
showPageLayer(index) {
|
||||
this.processPage(index);
|
||||
this.pageState.splice(index, 1, true);
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showPage = index;
|
||||
}, 0);
|
||||
})
|
||||
this.triangleDeg[index] = 180;
|
||||
},
|
||||
reloadActiveMenuArr(){
|
||||
for (let i = 0; i < this.filterData.length; i++) {
|
||||
let tmpitem = this.filterData[i];
|
||||
let tmpArr = this.processActive(tmpitem);
|
||||
tmpitem = this.processsub(tmpitem);
|
||||
if(this.activeMenuArr[i].length!=tmpArr.length){
|
||||
this.filterData[i] = tmpitem;
|
||||
this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
|
||||
this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
|
||||
}
|
||||
}
|
||||
this.subData = this.filterData;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
processPage(index) {
|
||||
//check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
|
||||
this.reloadActiveMenuArr();
|
||||
//重置UI控制数组
|
||||
this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
|
||||
if (this.menu[index].type == 'filter') {
|
||||
//重载筛选页选中状态
|
||||
let level = this.shadowActiveMenuArr[index].length;
|
||||
for (let i = 0; i < level; i++) {
|
||||
let box = this.subData[index].sub[i].sub;
|
||||
for (let j = 0; j < box.length; j++) {
|
||||
if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
|
||||
this.subData[index].sub[i].sub[j].selected = true;
|
||||
} else {
|
||||
this.subData[index].sub[i].sub[j].selected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (this.menu[index].type == 'hierarchy') {
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
//滚动到选中项
|
||||
this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
|
||||
this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
|
||||
}, 0);
|
||||
})
|
||||
}
|
||||
},
|
||||
processActive(tmpitem) {
|
||||
let tmpArr = []
|
||||
if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('sub')&&tmpitem.sub.length>0) {
|
||||
let level = this.getMaxFloor(tmpitem.sub);
|
||||
while (level > 0) {
|
||||
tmpArr.push(0);
|
||||
level--;
|
||||
}
|
||||
} else if (tmpitem.type == 'filter') {
|
||||
let level = tmpitem.sub.length;
|
||||
while (level > 0) {
|
||||
tmpArr.push([]);
|
||||
level--;
|
||||
}
|
||||
}
|
||||
return tmpArr;
|
||||
},
|
||||
processsub(menu) {
|
||||
if (menu.hasOwnProperty('sub') && menu.sub.length > 0) {
|
||||
for (let i = 0; i < menu.sub.length; i++) {
|
||||
menu.sub[i] = this.processsub(menu.sub[i]);
|
||||
}
|
||||
} else {
|
||||
menu.sub = [];
|
||||
}
|
||||
return menu;
|
||||
},
|
||||
//计算菜单层级
|
||||
getMaxFloor(treeData) {
|
||||
let floor = 0
|
||||
let max = 0
|
||||
function each(data, floor) {
|
||||
data.forEach(e => {
|
||||
max = floor > max ? floor : max;
|
||||
if (e.hasOwnProperty('sub') && e.sub.length > 0) {
|
||||
each(e.sub, floor + 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
each(treeData, 1)
|
||||
return max;
|
||||
},
|
||||
discard() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.HMfilterDropdown {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
z-index: 997;
|
||||
flex-wrap: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
top: var(--window-top);
|
||||
left:0;
|
||||
view {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
.region {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: solid 1rpx #eee;
|
||||
z-index: 12;
|
||||
background-color: #ffffff;
|
||||
flex-direction: row;
|
||||
.first-menu {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: #757575;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color .2s linear;
|
||||
|
||||
&.on {
|
||||
color: #ec652b;
|
||||
|
||||
.iconfont {
|
||||
color: #ec652b;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
text-overflow: clip;
|
||||
overflow: hidden;
|
||||
}
|
||||
.iconfont {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
line-height: 26rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform .2s linear;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-menu-class {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translate3d(0, - 100%, 0);
|
||||
max-height: 345px;
|
||||
background-color: #ffffff;
|
||||
z-index: 11;
|
||||
box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
|
||||
overflow: hidden;
|
||||
flex-direction: row;
|
||||
transition: transform .15s linear;
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
transform: translate3d(0, calc(44px + 1rpx), 0);
|
||||
}
|
||||
}
|
||||
.sub-menu-list {
|
||||
width: 100%;
|
||||
height: 345px;
|
||||
flex-direction: column;
|
||||
.sub-menu {
|
||||
min-height: 44px;
|
||||
font-size: 13px;
|
||||
flex-direction: column;
|
||||
padding-right: 15px;
|
||||
>.menu-name {
|
||||
height: 44px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>.iconfont {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
color: #ec652b;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.first {
|
||||
flex-shrink: 0;
|
||||
width: 236rpx;
|
||||
background-color: #f0f0f0;
|
||||
.sub-menu {
|
||||
padding-left: 15px;
|
||||
|
||||
&.on {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.alone {
|
||||
max-height: 345px;
|
||||
min-height: 170px;
|
||||
height: auto;
|
||||
.sub-menu {
|
||||
min-height: calc(44px - 1rpx);
|
||||
margin-left: 15px;
|
||||
border-bottom: solid 1rpx #e5e5e5;
|
||||
|
||||
&.on {
|
||||
color: #ec652b;
|
||||
|
||||
>.menu-name {
|
||||
>.iconfont {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.not-first {
|
||||
.sub-menu {
|
||||
min-height: calc(44px - 1rpx);
|
||||
margin-left: 15px;
|
||||
border-bottom: solid 1rpx #e5e5e5;
|
||||
>.menu-name {
|
||||
height: calc(44px - 1rpx);
|
||||
>.iconfont {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
color: #ec652b;
|
||||
}
|
||||
}
|
||||
&.on {
|
||||
color: #ec652b;
|
||||
>.menu-name {
|
||||
>.iconfont {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more-sub-menu {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 9px;
|
||||
>text {
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: #f5f5f5;
|
||||
color: #9b9b9b;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 6px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border: solid #f5f5f5 1rpx;
|
||||
flex: 0 0 calc(33.33% - 6px);
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.on {
|
||||
border-color: #f6c8ac;
|
||||
color: #ec652b;
|
||||
}
|
||||
.iconfont {
|
||||
color: #9b9b9b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
width: 100%;
|
||||
height: 345px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.menu-box {
|
||||
width: 698rpx;
|
||||
height: calc(345px - 75px);
|
||||
flex-shrink: 1;
|
||||
.box {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
.labels {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.on {
|
||||
border-color: #ec652b;
|
||||
background-color: #ec652b;
|
||||
color: #fff;
|
||||
}
|
||||
>view {
|
||||
width: 148rpx;
|
||||
height: 30px;
|
||||
border: solid 1rpx #adadad;
|
||||
border-radius: 2px;
|
||||
margin-right: 15px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-box {
|
||||
flex-shrink: 0;
|
||||
width: 698rpx;
|
||||
height: 75px;
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>view {
|
||||
width: 320rpx;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
border: solid 1rpx #ec652b;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.reset {
|
||||
color: #ec652b;
|
||||
}
|
||||
.submit {
|
||||
color: #fff;
|
||||
background-color: #ec652b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background-color .15s linear;
|
||||
&.show {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* 字体图标 */
|
||||
@font-face {
|
||||
font-family: "HM-FD-font";
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAABpQAAAJzAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp4gQIBNgIkAwwLCAAEIAWEbQc5G8sFERWMIbIfCbbzqA4hp7InSBibVsYGb4J42o82b3e/nJlHMw/NHbGOlwKJRCRpwzPtpAECCOZubdqxjYpQLMlVg+70/08edrgQOtx2ukpVyApZn+dyehPoQObHo3O85rYx9vOjXoBxQIHugW2yIkqIW2QXcScu4jwE8CSWbKSmrqUHFwOaJoCsLM5P4haSGIxRcRHshrUGucLCVcfqI3AZfV/+USguKCwNmtsxVztDxU/n55C+3W0Z4QQpEOTNFqCBbMCAjDUWB9CIwWk87aa70cYgqLkyd3dEmm+18R8eKATEBrV7A5CulBT8dKiWOYZk412XNcDdKSEKSGODnyKIDl+dmVt9/Dx4pu/xyeutkMlHISGPTsPCnoTNP9nOT6wTtDdlO6dPr47efvj942lkYuQzrhMKEjq9N6y98P3340gmlJ/RStUD6F31CAEEPtUW94/7rf+7XgaAz57X0ZHXAGsFFwVgw38yALuMb0IBbVyNamFYEw4oKMDTj3AHRQP5Pt4dci9VwSVkRNQh5r7CLskZadhsWHhRDBsXczk8ZYk3ewnCxmQeQKa3BOHvA8XXO2j+vqRhf7CE+sPmn4anvoL29JLa4qqaUQkmoK+QG2osCckq7txi2leK86aIPyJ3eQZ8xytXYmyQ51jQndJAxIJlqiGSLsOqImiZCjTiZCJt6Lq26U2OoXqwUo0hRaAE0K5AziANy/uLVeXzWyjVqyjcoeupjxDr5MMDn8MDkLG9Aenu5ZrOSSoghAUsRmogkkahSoWAtnlUARnCkY3It0Iu7mWhdmd9Z/19BwBP6GidEi0G56opckXTGZVSPxgAAAA=');
|
||||
}
|
||||
.iconfont {
|
||||
font-family: "HM-FD-font" !important;
|
||||
font-size: 26rpx;
|
||||
font-style: normal;
|
||||
color: #757575;
|
||||
&.triangle {
|
||||
&:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
&:before {
|
||||
content: "\e607";
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
components/QS-tabs-wxs-list/QS-tabs-wxs-list-refresh.vue
Normal file
130
components/QS-tabs-wxs-list/QS-tabs-wxs-list-refresh.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view
|
||||
class="container"
|
||||
:style="{
|
||||
'background-color': hasRefreshContainerBackgroundColor
|
||||
}">
|
||||
<scroll-view
|
||||
:scroll-y="scrollY"
|
||||
class="QS-tabs-wxs-list-refresh-scroll-view"
|
||||
:style="{
|
||||
'height': hasRefreshContainerheight
|
||||
}">
|
||||
<view
|
||||
class="QS-tabs-wxs-list-refresh-scroll-view-item"
|
||||
@touchstart="setFreeze(true)">
|
||||
<slot name="pre"></slot>
|
||||
</view>
|
||||
<view
|
||||
class="QS-tabs-wxs-list-refresh-scroll-view-item"
|
||||
@touchmove.stop="voidFn"
|
||||
@touchstart="setFreeze(false)">
|
||||
<QSTabsWxsList
|
||||
ref="QSTabsWxsList"
|
||||
hasRefresh
|
||||
:minWidth="minWidth"
|
||||
:space="space"
|
||||
:tabHeight="tabHeight"
|
||||
:height="height"
|
||||
:lineWidth="lineWidth"
|
||||
:lineHieght="lineHieght"
|
||||
:lineColor="lineColor"
|
||||
:lineMarginBottom="lineMarginBottom"
|
||||
:defCurrent="defCurrent"
|
||||
:autoCenter="autoCenter"
|
||||
:tapTabRefresh="tapTabRefresh"
|
||||
:fontSize="fontSize"
|
||||
:activeFontSize="activeFontSize"
|
||||
:swiperBackgroundColor="swiperBackgroundColor"
|
||||
:tabsBackgroundColor="tabsBackgroundColor"
|
||||
:tabsFontColor="tabsFontColor"
|
||||
:activeFontColor="activeFontColor"
|
||||
:activeBold="activeBold"
|
||||
:initFnName="initFnName"
|
||||
:type="type"
|
||||
:zIndex="zIndex"
|
||||
:tabsSticky="tabsSticky"
|
||||
:refreshImage="refreshImage"
|
||||
:refreshDistance="refreshDistance"
|
||||
:beforRefreshText="beforRefreshText"
|
||||
:releaseRefreshText="releaseRefreshText"
|
||||
:isRefreshingText="isRefreshingText"
|
||||
:completeRefreshText="completeRefreshText"
|
||||
:refreshTextColor="refreshTextColor"
|
||||
:refreshTextFontSize="refreshTextFontSize"
|
||||
@disabledTouchmove="_emit('disabledTouchmove')"
|
||||
@disabledTap="_emit('disabledTap')"
|
||||
@setRefreshContainerBgColor="setHasRefreshContainerBackgroundColor">
|
||||
</QSTabsWxsList>
|
||||
</view>
|
||||
<view
|
||||
class="QS-tabs-wxs-list-refresh-scroll-view-item"
|
||||
@touchstart="setFreeze(true)">
|
||||
<slot name="pos"></slot>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QSTabsWxsList from './QS-tabs-wxs-list.vue';
|
||||
import publicProps from './js/publicProps.js';
|
||||
export default {
|
||||
components: {
|
||||
QSTabsWxsList
|
||||
},
|
||||
props: {
|
||||
...publicProps,
|
||||
hasRefreshContainerheight: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollY: true,
|
||||
hasRefreshContainerBackgroundColor: 'white'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setFreeze(bl) {
|
||||
if(this.scrollY!==bl) this.scrollY = bl;
|
||||
},
|
||||
setTabs(arr) {
|
||||
this.$refs.QSTabsWxsList.setTabs(arr);
|
||||
},
|
||||
setDisabled(bl) {
|
||||
this.$refs.QSTabsWxsList.setDisabled(bl);
|
||||
},
|
||||
setHasRefreshContainerBackgroundColor(bgColor) {
|
||||
this.hasRefreshContainerBackgroundColor = bgColor;
|
||||
},
|
||||
_emit(name) {
|
||||
this.$emit(name);
|
||||
},
|
||||
voidFn() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
transition-property: background-color;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
.QS-tabs-wxs-list-refresh-scroll-view{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.QS-tabs-wxs-list-refresh-scroll-view-item{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
512
components/QS-tabs-wxs-list/QS-tabs-wxs-list.vue
Normal file
512
components/QS-tabs-wxs-list/QS-tabs-wxs-list.vue
Normal file
@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<view
|
||||
class="container"
|
||||
:style="{
|
||||
'z-index': zIndex
|
||||
}">
|
||||
<view
|
||||
class="tabs-container"
|
||||
:style="{
|
||||
'position': String(tabsSticky)==='true'?'sticky': 'relative',
|
||||
'z-index': Number(zIndex) + 2,
|
||||
'background-color': tabs[getSwiperCurrent]?(tabs[getSwiperCurrent].tabsBackgroundColor || tabsBackgroundColor):tabsBackgroundColor
|
||||
}">
|
||||
<scroll-view
|
||||
id="tabs-scroll"
|
||||
scroll-x
|
||||
:scroll-left="scrollLeft"
|
||||
class="tabs-scroll"
|
||||
scroll-with-animation>
|
||||
<view
|
||||
class="tabs-scroll-box"
|
||||
:style="{
|
||||
'height': tabHeight,
|
||||
'line-height': tabHeight
|
||||
}">
|
||||
<view
|
||||
class="tabs-scroll-item"
|
||||
:style="{
|
||||
'min-width': minWidth,
|
||||
'padding': '0 ' + space
|
||||
}"
|
||||
v-for="(item, index) in tabs"
|
||||
:id="preId + index"
|
||||
:key="index"
|
||||
@tap="tabTap(index)">
|
||||
<view class="hide_text"
|
||||
:style="{
|
||||
'font-size': fontSize
|
||||
}">
|
||||
{{item.name || item}}
|
||||
</view>
|
||||
<view class="abs_text"
|
||||
:style="{
|
||||
'font-size': getSwiperCurrent===index?activeFontSize:fontSize,
|
||||
'color': getSwiperCurrent===index?(tabs[getSwiperCurrent]?(tabs[getSwiperCurrent].activeFontColor || activeFontColor || tabsFontColor):(activeFontColor || tabsFontColor)):tabsFontColor,
|
||||
'font-weight': String(activeBold)==='true'?(getSwiperCurrent===index?'bold':'0'):'0'
|
||||
}">
|
||||
{{item.name || item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
id="line"
|
||||
class="line"
|
||||
:style="{
|
||||
'height': lineHieght,
|
||||
'width': wxsLineWidth + 'px',
|
||||
'bottom': lineMarginBottom,
|
||||
'background-color': tabs[getSwiperCurrent]?(tabs[getSwiperCurrent].lineColor || lineColor):lineColor
|
||||
}">
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view
|
||||
class="swiper-container"
|
||||
:style="{
|
||||
'z-index': Number(zIndex) + 1,
|
||||
'background-color': tabs[getSwiperCurrent]?(tabs[getSwiperCurrent].swiperBackgroundColor||swiperBackgroundColor):swiperBackgroundColor
|
||||
}">
|
||||
<block v-if="String(hasRefresh) === 'true'">
|
||||
<view
|
||||
class="refresh-container"
|
||||
id="refresh-container"
|
||||
@touchstart="QSREFRESHWXS.touchstart"
|
||||
@touchmove="QSREFRESHWXS.touchmove"
|
||||
@touchend="QSREFRESHWXS.touchend"
|
||||
@touchcancel="QSREFRESHWXS.touchend"
|
||||
:change:refreshstatus="QSREFRESHWXS.refreshStatusChange"
|
||||
:data-refreshdistance="refreshDistance"
|
||||
:data-refreshstatus="refreshStatus"
|
||||
:data-readyrefresh="readyRefresh"
|
||||
:data-refreshshow="refreshShow"
|
||||
:refreshstatus="refreshStatus">
|
||||
<view
|
||||
class="refresh-image-container"
|
||||
:class="{'show': (String(refreshShow) == 'true')}"
|
||||
:style="{
|
||||
'height': refreshDistance + 'px'
|
||||
}">
|
||||
<image
|
||||
id="refreshImage"
|
||||
v-if="refreshImage"
|
||||
:src="refreshImage"
|
||||
mode="scaleToFill"
|
||||
class="refresh-image"
|
||||
:class="{'isRefreshing': (String(readyRefresh) == 'false')}"
|
||||
></image>
|
||||
<view class="refreshText" :style="{
|
||||
'font-size': refreshTextFontSize,
|
||||
'color': refreshTextColor
|
||||
}">{{getRefreshStatusText}}</view>
|
||||
</view>
|
||||
<swiper
|
||||
id="swiper"
|
||||
class="swiper"
|
||||
:style="{
|
||||
'height': getSwiperHieght + 'px'
|
||||
}"
|
||||
:current="getSwiperCurrent"
|
||||
@transition="QSTABSWXS.transition"
|
||||
:change:tabsInfo="QSTABSWXS.tabsInfoChange"
|
||||
:tabsInfo="tabsInfo"
|
||||
:data-tabsinfo="tabsInfo"
|
||||
:data-current="getCurrent"
|
||||
:data-windowwidth="windowWidth"
|
||||
:data-linewidth="lineWidth"
|
||||
:data-scrollleft="scrollLeft"
|
||||
:data-tabsinfochangebl="tabsInfoChangeBl"
|
||||
@change="QSTABSWXS.swiperChange"
|
||||
@animationfinish="QSTABSWXS.animationfinish">
|
||||
<swiper-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="swiper-item"
|
||||
:style="{
|
||||
'background-color': item.swiperItemBackgroundColor || 'rgba(255,255,255,0)'
|
||||
}">
|
||||
<!-- 需自行增加列表模板并根据传入的type判断, 展示不同的列表模板 -->
|
||||
<block v-if="type === 'xxx'">
|
||||
|
||||
</block>
|
||||
<block v-else>
|
||||
<templateDef
|
||||
ref="QSTabsWxsRef"
|
||||
:readyRefresh="getCurrent===index?Boolean(readyRefresh):false"
|
||||
:show="String(readyRefresh) === 'true'?
|
||||
(getCurrent===index):
|
||||
(((index-getCurrent)<=1 && (index-getCurrent)>=-1)?
|
||||
true:false)"
|
||||
:type="type"
|
||||
:current="getCurrent"
|
||||
:tab="item"
|
||||
:index="index"
|
||||
@refreshEnd="setRefreshStatus(4)"></templateDef>
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<swiper
|
||||
id="swiper"
|
||||
class="swiper"
|
||||
:style="{
|
||||
'height': getSwiperHieght + 'px'
|
||||
}"
|
||||
:current="getSwiperCurrent"
|
||||
@transition="QSTABSWXS.transition"
|
||||
:change:tabsInfo="QSTABSWXS.tabsInfoChange"
|
||||
:tabsInfo="tabsInfo"
|
||||
:data-tabsinfo="tabsInfo"
|
||||
:data-current="getCurrent"
|
||||
:data-windowwidth="windowWidth"
|
||||
:data-linewidth="lineWidth"
|
||||
:data-scrollleft="scrollLeft"
|
||||
:data-tabsinfochangebl="tabsInfoChangeBl"
|
||||
@change="QSTABSWXS.swiperChange"
|
||||
@animationfinish="QSTABSWXS.animationfinish">
|
||||
<swiper-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
class="swiper-item"
|
||||
:style="{
|
||||
'background-color': item.swiperItemBackgroundColor || 'rgba(255,255,255,0)'
|
||||
}">
|
||||
<!-- 需自行增加列表模板并根据传入的type判断, 展示不同的列表模板 -->
|
||||
<block v-if="type === 'xxx'">
|
||||
|
||||
</block>
|
||||
<block v-else>
|
||||
<templateDef
|
||||
ref="QSTabsWxsRef"
|
||||
:readyRefresh="getCurrent===index?readyRefresh:false"
|
||||
:show="String(readyRefresh) === 'true'?
|
||||
(getCurrent===index):
|
||||
(((index-getCurrent)<=1 && (index-getCurrent)>=-1)?
|
||||
true:false)"
|
||||
:type="type"
|
||||
:current="getCurrent"
|
||||
:tab="item"
|
||||
:index="index"
|
||||
@refreshEnd="setRefreshStatus(4)"></templateDef>
|
||||
</block>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<view
|
||||
class="disabled"
|
||||
:style="{
|
||||
'z-index': Number(zIndex) + 3
|
||||
}"
|
||||
v-if="disabled"
|
||||
@touchmove.prevent="_emit('disabledTouchmove')"
|
||||
@tap.prevent="_emit('disabledTap')">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<view
|
||||
class="disabled"
|
||||
:style="{
|
||||
'z-index': Number(zIndex) + 3
|
||||
}"
|
||||
v-if="disabled"
|
||||
@touchmove.stop="_emit('disabledTouchmove')"
|
||||
@tap.stop="_emit('disabledTap')">
|
||||
<!-- #endif -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="wxs" module="QSTABSWXS" src="./wxs/QS-tabs-wxs.wxs"></script>
|
||||
<script lang="wxs" module="QSREFRESHWXS" src="./wxs/QS-refresh-wxs.wxs"></script>
|
||||
|
||||
<script>
|
||||
import _app from './js/config.js';
|
||||
import templateDef from './components/QS-tabs-wxs-template-def.vue';
|
||||
import publicProps from './js/publicProps.js';
|
||||
const {windowWidth} = uni.getSystemInfoSync();
|
||||
export default {
|
||||
components: {
|
||||
templateDef
|
||||
},
|
||||
props: publicProps,
|
||||
data() {
|
||||
return {
|
||||
preId: 'QSTabsWxsID_',
|
||||
refPre: 'QSTabsWxsRef',
|
||||
tabs: [],
|
||||
tabsData: [],
|
||||
tabsInfo: [],
|
||||
windowWidth,
|
||||
current: 0,
|
||||
swiperCurrent: 0,
|
||||
scrollLeft: 0,
|
||||
count: 0,
|
||||
initStatus: [],
|
||||
tabsHeight: 44,
|
||||
wxsLineWidth: 0,
|
||||
tabsInfoChangeBl: false,
|
||||
disabled: false,
|
||||
refreshStatus: 1,
|
||||
// #ifndef H5
|
||||
readyRefresh: false,
|
||||
refreshShow: false,
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
readyRefresh: 'false',
|
||||
refreshShow: 'false',
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCurrent() {
|
||||
return this.current>this.tabs.length?this.tabs.length:this.current;
|
||||
},
|
||||
getSwiperCurrent() {
|
||||
return this.swiperCurrent>this.tabs.length?this.tabs.length:this.swiperCurrent;
|
||||
},
|
||||
getSwiperHieght() {
|
||||
return Number(this.height) - Number(this.tabsHeight);
|
||||
},
|
||||
getRefreshStatusText() {
|
||||
switch (this.refreshStatus){
|
||||
case 1:
|
||||
return this.beforRefreshText;
|
||||
break;
|
||||
case 2:
|
||||
return this.releaseRefreshText;
|
||||
break;
|
||||
case 3:
|
||||
return this.isRefreshingText;
|
||||
break;
|
||||
case 4:
|
||||
return this.completeRefreshText;
|
||||
break;
|
||||
case 5:
|
||||
return this.completeRefreshText;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setRefreshStatus(status) {
|
||||
if(status === this.refreshStatus) return;
|
||||
this.refreshStatus = status;
|
||||
// //console.log(status);
|
||||
switch (status){
|
||||
case 2:
|
||||
// #ifndef H5
|
||||
uni.vibrateShort();
|
||||
// #endif
|
||||
break;
|
||||
case 3:
|
||||
this._doInit({refresh: true});
|
||||
break;
|
||||
case 5:
|
||||
setTimeout(()=>{
|
||||
this.setRefreshStatus(1);
|
||||
this.refreshShow = false;
|
||||
}, 1000);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setRefreshShow(obj) {
|
||||
// #ifndef H5
|
||||
this.refreshShow = obj.refreshShow;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.refreshShow = String(obj.refreshShow);
|
||||
// #endif
|
||||
},
|
||||
setReadyRefresh(obj) {
|
||||
// #ifndef H5
|
||||
this.readyRefresh = obj.readyRefresh;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.readyRefresh = String(obj.readyRefresh);
|
||||
// #endif
|
||||
// this.$set(this, 'readyRefresh', obj.readyRefresh);
|
||||
},
|
||||
setDisabled(bl) {
|
||||
this.disabled = bl;
|
||||
},
|
||||
setWxsLineWidth(lineWidth) {
|
||||
_app.log('触发了设置线条宽度:' + lineWidth);
|
||||
this.wxsLineWidth = lineWidth;
|
||||
},
|
||||
getTabsHeight() {
|
||||
let view = uni.createSelectorQuery().in(this);
|
||||
view.select('.tabs-container').boundingClientRect();
|
||||
view.exec(res=>{
|
||||
_app.log('tabs高度:' + JSON.stringify(res));
|
||||
this.tabsHeight = res[0].height;
|
||||
})
|
||||
},
|
||||
getTabsInfo(returnPromise) {
|
||||
let view = uni.createSelectorQuery().in(this);
|
||||
let scroll = uni.createSelectorQuery().in(this);
|
||||
scroll.select('#tabs-scroll').fields({ scrollOffset: true });
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
view.select('#' + this.preId + i).boundingClientRect();
|
||||
}
|
||||
const fn = (cb) => {
|
||||
// _app.log('fn执行');
|
||||
scroll.exec((data)=>{
|
||||
_app.log('scroll布局信息:' + JSON.stringify(data));
|
||||
view.exec((res) => {
|
||||
_app.log('tabs布局信息:' + JSON.stringify(res));
|
||||
const arr = [];
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const item = res[i];
|
||||
if(item) {
|
||||
item.left += data[0].scrollLeft;
|
||||
// #ifdef H5
|
||||
arr.push(JSON.stringify(item));
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
arr.push(item);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
this.tabsInfoChangeBl = true;
|
||||
// #ifdef H5
|
||||
this.tabsInfo = JSON.stringify(arr);
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
this.tabsInfo = arr;
|
||||
// #endif
|
||||
// _app.log('tabsInfo:' + JSON.stringify(arr));
|
||||
if(cb && typeof cb === 'function') cb(arr);
|
||||
})
|
||||
})
|
||||
}
|
||||
if(returnPromise) {
|
||||
return new Promise((resolve, reject)=>{
|
||||
setTimeout(()=>{
|
||||
fn((arr)=>{
|
||||
resolve(arr);
|
||||
});
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
fn();
|
||||
},
|
||||
setTabs(arr) {
|
||||
const fn = ()=>{
|
||||
this.tabs = arr;
|
||||
this.initStatus = new Array(arr.length);
|
||||
this.$nextTick(()=>{ //H5需要nextTick后能拿到布局信息
|
||||
setTimeout(()=>{ //QQ小程序需要setTimeout后能拿到布局信息
|
||||
this.getTabsInfo();
|
||||
_app.log('初始化');
|
||||
const defCurrent = this._getDefCurrent();
|
||||
_app.log('defCurrent:' + defCurrent);
|
||||
this.swiperCurrent = defCurrent;
|
||||
this.setHasRefreshContainerBackgroundColor(defCurrent);
|
||||
this._doInit({index: defCurrent, init: true});
|
||||
this.getTabsHeight();
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
if(this.count++ === 0) {
|
||||
fn();
|
||||
}else{
|
||||
this.tabs = [];
|
||||
this.current = 0;
|
||||
this.swiperCurrent = 0;
|
||||
this.$nextTick(()=>{
|
||||
setTimeout(fn, 0);
|
||||
})
|
||||
}
|
||||
},
|
||||
setHasRefreshContainerBackgroundColor(index) {
|
||||
const tab = this.tabs[index];
|
||||
if(tab && tab.hasRefreshContainerBackgroundColor) {
|
||||
this.$emit('setRefreshContainerBgColor', tab.hasRefreshContainerBackgroundColor);
|
||||
}
|
||||
},
|
||||
_doInit({index, init, tap, slide, refresh} = {}) {
|
||||
try{
|
||||
index = index !== undefined? index: this.current;
|
||||
if(!refresh) {
|
||||
const bl_status = this.initStatus[index] === true;
|
||||
if(this.initStatus[index] === true) {
|
||||
if(slide || init) return;
|
||||
if(tap && !(String(this.tapTabRefresh) === 'true')) {
|
||||
return;
|
||||
}else if (!(this.current === index)) {
|
||||
return;
|
||||
}else{
|
||||
refresh = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const ref = this.$refs[this.refPre][index];
|
||||
if(ref) {
|
||||
const initFn = ref[this.initFnName];
|
||||
if(initFn && typeof initFn === 'function') {
|
||||
_app.log('执行了组件内的init函数');
|
||||
this.initStatus[index] = true;
|
||||
initFn(refresh);
|
||||
}else{
|
||||
//console.log(this.initFnName + 'not a function');
|
||||
}
|
||||
}else{
|
||||
//console.log('not find ref or init function');
|
||||
}
|
||||
}catch(e){
|
||||
//TODO handle the exception
|
||||
//console.log('_doInit方法异常:' + JSON.stringify(e));
|
||||
}
|
||||
},
|
||||
_getDefCurrent() {
|
||||
const defCurrent = Number(this.defCurrent);
|
||||
const endCurrent = this.tabs.length-1;
|
||||
return defCurrent>endCurrent?endCurrent:defCurrent;
|
||||
},
|
||||
setCurrent(obj) { //由wxs内部触发animationinish事件
|
||||
const current = Number(obj.current);
|
||||
if(this.swiperCurrent !== current) {
|
||||
this.swiperCurrent = current;
|
||||
}
|
||||
if(this.current !== current){
|
||||
this.current = current;
|
||||
this._doInit({index: current, slide: true});
|
||||
}
|
||||
},
|
||||
setSwiperCurrent(obj) {
|
||||
const current = Number(obj.current);
|
||||
this.swiperCurrent = current;
|
||||
this.setHasRefreshContainerBackgroundColor(current);
|
||||
},
|
||||
tabTap(index) {
|
||||
this.swiperCurrent = index;
|
||||
this._doInit({index, tap: true});
|
||||
},
|
||||
setScrollLeft(obj) {
|
||||
_app.log('setScrollLeft:' + JSON.stringify(obj));
|
||||
if((!(String(this.autoCenter) === 'true')) && !Boolean(obj.tabsChange)) return;
|
||||
this.scrollLeft = Number(obj.scrollLeft);
|
||||
},
|
||||
setTabsInfoChangeBl() {
|
||||
this.tabsInfoChangeBl = false;
|
||||
},
|
||||
_emit(name) {
|
||||
this.$emit(name);
|
||||
},
|
||||
voidFn() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("css/QS-tabs-wxs-list.css");
|
||||
@import url("css/QS-refresh-image-isrefreshing.css");
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
<!-- 该组件需自行实现, 此处只是示例 -->
|
||||
<template>
|
||||
<view class="container" :class="getFixedClass">
|
||||
<scroll-view scroll-y class="scrollView" lower-threshold="200" :scroll-top="scrollTop" @scroll="scrollFn($event)"
|
||||
@scrolltolower="getList(false, false, false)">
|
||||
<!-- 保证性能勿删 -->
|
||||
<view class="scroll-container">
|
||||
<!-- 保证性能勿删 -->
|
||||
<block v-if="getShow">
|
||||
|
||||
<!-- 自行实现页面样式展示 -->
|
||||
<view class="scroll-item" v-for="(item, ind) in list" :key="ind" @tap="itemClick(ind)">
|
||||
<image lazy-load class="scroll-item-image" src="http://imgsrc.baidu.com/forum/w%3D580/sign=f480662e3cadcbef01347e0e9cae2e0e/8f5b1cd8bc3eb13517d8e851ab1ea8d3fc1f4489.jpg"
|
||||
mode="aspectFill"></image>
|
||||
<view class="scroll-item-text">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表状态展示 -->
|
||||
<view class="statusText" @tap="getList(false, true, false)" :style="{
|
||||
'color': getColor
|
||||
}">
|
||||
{{statusText.text || '数据未加载'}}
|
||||
</view>
|
||||
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件必须
|
||||
import { QSTabsWxsListMixin } from '../mixins/QS-tabs-wxs-list-mixin.js';
|
||||
|
||||
import {
|
||||
getTabList
|
||||
} from '@/util/getTabList.js';
|
||||
import {
|
||||
doPageDemand
|
||||
} from '../js/pageDemand.js';
|
||||
export default {
|
||||
mixins: [QSTabsWxsListMixin()],// 组件必须
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
sendData: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
tabId: this.tab.id
|
||||
},
|
||||
statusText: {},
|
||||
refreshClear: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
let color;
|
||||
switch (this.type) {
|
||||
case 'setColor':
|
||||
color = '#fff';
|
||||
break;
|
||||
case 'index':
|
||||
color = '#fff';
|
||||
break;
|
||||
default:
|
||||
color = '#999';
|
||||
break;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// //console.log('component - created - tab:' + this.tab);
|
||||
// //console.log('component - created - index:' + this.index);
|
||||
},
|
||||
methods: {
|
||||
init(refresh) { //若是用户触发下拉刷新则refresh为true
|
||||
if (this.refreshClear) this.oldScrollTop = 0;
|
||||
this.getList(refresh, false, false);
|
||||
},
|
||||
getList(refresh, doEvent, force) {
|
||||
let _this = this;
|
||||
doPageDemand.call(this, {
|
||||
getDataFn: getTabList, //获取数据的方法
|
||||
success() {
|
||||
if (refresh) _this.$emit('refreshEnd');
|
||||
},
|
||||
fail() {
|
||||
//console.log('访问接口失败');
|
||||
}, //接口访问失败回调
|
||||
|
||||
sendDataName: 'sendData', //携带数据字段名称
|
||||
pageNumName: 'pageNum', //携带数据中的页数字段名称
|
||||
pageSizeName: 'pageSize', //携带数据中的条数字段名称
|
||||
|
||||
checkLastPageMode: false, //判断是否是最后一页的逻辑标识, 用于逻辑判断, 目前默认有两个参数 size: 判断条数, page: 判断页数, 默认为size
|
||||
newDatafields: 'list', //接口访问成功后获取列表数据字段名称, 可用. 链式获取
|
||||
dataLastPageName: false, //接口访问成功后数据中的最大页数字段名称, 可用. 链式获取
|
||||
sizeName: false, //接口访问成功后数据中条数字段名称, 可用. 链式获取
|
||||
|
||||
setName: 'list', //页面中列表数据字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
statusTextName: 'statusText', //页面中列表状态字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
lastPageName: false, //页面中最后一页字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
waitingName: false, //页面中获取数据等待字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
|
||||
refresh, //刷新标识, 若为true则会将携带数据中的页数重置为1
|
||||
force, //强制标识, 若为true则会忽略等待标识为true时的跳过操作
|
||||
doEvent, //进入状态判断标识, 若为true则会进入判断列表status而进行相应操作
|
||||
|
||||
noDataText: false, //访问接口后若数据长度为0则可自定义为空时文字
|
||||
|
||||
refreshClear: this.refreshClear, //刷新时是否清空数据
|
||||
})
|
||||
},
|
||||
itemClick(ind) {
|
||||
uni.showToast({
|
||||
title: `第${this.index}列 第${ind}项`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("../css/QS-tabs-wxs-list-components.css");
|
||||
</style>
|
||||
@ -0,0 +1,12 @@
|
||||
.refresh-image.isRefreshing{
|
||||
animation: isRefreshing 5s ease-in infinite both alternate;
|
||||
}
|
||||
|
||||
@keyframes isRefreshing {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(3600deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
view,
|
||||
scroll-view,
|
||||
swiper,
|
||||
swiper-item,
|
||||
cover-view,
|
||||
cover-image,
|
||||
icon,
|
||||
text,
|
||||
rich-text,
|
||||
progress,
|
||||
button,
|
||||
checkbox,
|
||||
form,
|
||||
input,
|
||||
label,
|
||||
radio,
|
||||
slider,
|
||||
switch,
|
||||
textarea,
|
||||
navigator,
|
||||
audio,
|
||||
camera,
|
||||
image,
|
||||
video,
|
||||
picker-view,
|
||||
picker-view-column {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollView {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.scroll-container.freeze {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
width: 100%;
|
||||
padding: 28rpx;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 35rpx;
|
||||
}
|
||||
|
||||
.scroll-item-image {
|
||||
background-color: #F8F8F8;
|
||||
border-radius: 8px;
|
||||
height: 220rpx;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.scroll-item-text {
|
||||
width: 55%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.statusText {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
142
components/QS-tabs-wxs-list/css/QS-tabs-wxs-list.css
Normal file
142
components/QS-tabs-wxs-list/css/QS-tabs-wxs-list.css
Normal file
@ -0,0 +1,142 @@
|
||||
view,
|
||||
scroll-view,
|
||||
swiper,
|
||||
swiper-item,
|
||||
cover-view,
|
||||
cover-image,
|
||||
icon,
|
||||
text,
|
||||
rich-text,
|
||||
progress,
|
||||
button,
|
||||
checkbox,
|
||||
form,
|
||||
input,
|
||||
label,
|
||||
radio,
|
||||
slider,
|
||||
switch,
|
||||
textarea,
|
||||
navigator,
|
||||
audio,
|
||||
camera,
|
||||
image,
|
||||
video,
|
||||
picker-view,
|
||||
picker-view-column {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition-property: background-color;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.tabs-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tabs-scroll-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
white-space: nowrap !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.tabs-scroll-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: color, font-size .3s;
|
||||
}
|
||||
|
||||
.hide_text {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.abs_text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition-property: color;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
transition-property: background-color;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
transition: background-color .3s;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition-property: width, height, background-color, border;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
|
||||
/* refresh */
|
||||
.refresh-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.refresh-image-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateY(-100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
.refresh-image-container.show{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.refresh-image {
|
||||
height: 80rpx;
|
||||
width: 80rpx;
|
||||
}
|
||||
|
||||
.refreshText {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
7
components/QS-tabs-wxs-list/js/config.js
Normal file
7
components/QS-tabs-wxs-list/js/config.js
Normal file
@ -0,0 +1,7 @@
|
||||
function log(t) {
|
||||
// console.log(t);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
log
|
||||
}
|
||||
238
components/QS-tabs-wxs-list/js/pageDemand.js
Normal file
238
components/QS-tabs-wxs-list/js/pageDemand.js
Normal file
@ -0,0 +1,238 @@
|
||||
"use strict";
|
||||
import _app from './config.js';
|
||||
const statusObj = {
|
||||
getMore: {
|
||||
text: '获取更多',
|
||||
code: 1
|
||||
},
|
||||
noMore: {
|
||||
text: '没有更多了',
|
||||
code: 2
|
||||
},
|
||||
loading: {
|
||||
text: '数据加载中',
|
||||
code: 3
|
||||
},
|
||||
noData: {
|
||||
text: '暂无数据',
|
||||
code: 4
|
||||
},
|
||||
errFail: {
|
||||
text: '数据错误',
|
||||
code: 5
|
||||
},
|
||||
errCatch: {
|
||||
text: '加载数据失败, 点击重试',
|
||||
code: 6
|
||||
}
|
||||
}
|
||||
function doPageDemand(obj) { //分页加载获取数据方法, 页面使用call绑定this使用
|
||||
_app.log('进入getAndSetPageData方法');
|
||||
let _this = this;
|
||||
let {
|
||||
getDataFn, //获取数据的方法
|
||||
success, //接口访问成功回调
|
||||
successEnd, //成功回调结束时
|
||||
fail, //接口访问失败回调
|
||||
|
||||
sendDataName, //携带数据字段名称
|
||||
pageNumName, //携带数据中的页数字段名称
|
||||
pageSizeName, //携带数据中的条数字段名称
|
||||
|
||||
checkLastPageMode, //判断是否是最后一页的逻辑标识, 用于逻辑判断, 目前默认有两个参数 size: 判断条数, page: 判断页数, 默认为size
|
||||
newDatafields, //接口访问成功后获取列表数据字段名称, 可用. 链式获取
|
||||
dataLastPageName, //接口访问成功后数据中的最大页数字段名称, 可用. 链式获取
|
||||
sizeName, //接口访问成功后数据中条数字段名称, 可用. 链式获取
|
||||
|
||||
setName, //页面中列表数据字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
statusTextName, //页面中列表状态字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
lastPageName, //页面中最后一页字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
waitingName, //页面中获取数据等待字段名称, 如果在页面中分别有两个或两个以上列表使用该js, 则页面中需区分传入, 否则可以忽略
|
||||
|
||||
refresh, //刷新标识, 若为true则会将携带数据中的页数重置为1
|
||||
force, //强制标识, 若为true则会忽略等待标识为true时的跳过操作
|
||||
doEvent, //进入状态判断标识, 若为true则会进入判断列表status而进行相应操作
|
||||
|
||||
noDataText, //访问接口后若数据长度为0则可自定义为空时文字
|
||||
refreshClear //刷新时是否清空数据
|
||||
} = obj;
|
||||
waitingName = waitingName || 'getting';
|
||||
if (_this[waitingName] && !force) return; //节流
|
||||
if (doEvent) { //判断列表状态
|
||||
if(_this[statusTextName].code !== undefined) {
|
||||
switch (_this[statusTextName].code) {
|
||||
case 1:
|
||||
break;
|
||||
case 6:
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//初始化默认值
|
||||
sendDataName = sendDataName || 'sendData';
|
||||
setName = setName || 'list';
|
||||
newDatafields = newDatafields || 'list';
|
||||
dataLastPageName = dataLastPageName || 'lastPage';
|
||||
lastPageName = lastPageName || dataLastPageName;
|
||||
statusTextName = statusTextName || 'statusText';
|
||||
pageNumName = pageNumName || 'pageNum';
|
||||
pageSizeName = pageSizeName || 'pageSize';
|
||||
sizeName = sizeName || 'size';
|
||||
checkLastPageMode = checkLastPageMode || 'lastPage';
|
||||
|
||||
if (refresh) { //刷新, 重置为第一页
|
||||
_this[sendDataName][pageNumName] = 1;
|
||||
_this[lastPageName] = undefined; //重置最后一页状态
|
||||
|
||||
if(refreshClear) { //刷新是否清空数据
|
||||
_this[setName] = [];
|
||||
}
|
||||
}
|
||||
|
||||
//浅拷贝携带数据对象
|
||||
const sendData = { ..._this[sendDataName]
|
||||
};
|
||||
_app.log('sendData: ' + JSON.stringify(sendData));
|
||||
_app.log('_this[lastPageName]:' + _this[lastPageName]);
|
||||
// 当前最后一页
|
||||
let lastPage = _this[lastPageName];
|
||||
_app.log('lastPage:' + lastPage);
|
||||
// 获取携带数据中的页数
|
||||
const sendDataPageNum = Number(sendData[pageNumName]);
|
||||
// 判断是否为最后一页
|
||||
if (typeof(lastPage) === 'number' && lastPage >= 0) {
|
||||
_app.log('sendData[pageNumName]:' + sendDataPageNum);
|
||||
if (sendDataPageNum > lastPage) {
|
||||
_this[statusTextName] = getStatus('noMore');
|
||||
return;
|
||||
}
|
||||
}
|
||||
let status; //声明 列表状态变量
|
||||
// 改变状态为 访问接口中
|
||||
_this[statusTextName] = getStatus('loading');
|
||||
// 等待标识
|
||||
_this[waitingName] = true;
|
||||
_app.log('准备访问接口:' + JSON.stringify(sendData));
|
||||
// 访问接口
|
||||
getDataFn({ ...sendData
|
||||
}).then(res => {
|
||||
if(success && typeof success == 'function') success(res);
|
||||
_app.log('page.js获取数据成功:' + JSON.stringify(res));
|
||||
// 获取列表数据
|
||||
const newList = getField(res, newDatafields);
|
||||
// 判断是否存在并判断长度
|
||||
const bl = (newList && newList.length > 0);
|
||||
// 判断是否是第一页
|
||||
if (sendDataPageNum === 1) {
|
||||
// 第一页
|
||||
if (bl) {
|
||||
// 存在数据, 直接赋值
|
||||
_this[setName] = newList;
|
||||
_app.log('pageJS: 赋值了: setName:' + setName + ' ,newDatafields:' + newDatafields + ' ,data:' + JSON.stringify(newList))
|
||||
} else {
|
||||
// 不存在设置为空数组
|
||||
_this[setName] = [];
|
||||
}
|
||||
} else {
|
||||
// 不是第一页
|
||||
if (bl) {
|
||||
// 存在数据, 使用concat新增数据
|
||||
_this[setName] = _this[setName].concat(newList);
|
||||
}
|
||||
}
|
||||
// 获取数据中的最后一页
|
||||
let dataLastPageNum = getField(res, dataLastPageName);
|
||||
if (dataLastPageNum !== undefined) {
|
||||
dataLastPageNum = Number(dataLastPageNum);
|
||||
// 获取数据中的条数
|
||||
const sizeNum = Number(getField(res, sizeName));
|
||||
// 获取最后一页
|
||||
let lastPageNum;
|
||||
switch (checkLastPageMode) {
|
||||
case 'size':
|
||||
lastPageNum = Math.ceil(sizeNum / Number(sendData[pageSizeName]));
|
||||
break;
|
||||
case 'page':
|
||||
lastPageNum = dataLastPageNum;
|
||||
break;
|
||||
default:
|
||||
if (res[sizeName] !== undefined) {
|
||||
lastPageNum = Math.ceil(sizeNum / Number(sendData[pageSizeName]));
|
||||
} else {
|
||||
lastPageNum = dataLastPageNum;
|
||||
}
|
||||
break;
|
||||
}
|
||||
_app.log('lastPageNum:' + lastPageNum);
|
||||
// 赋值最后一页
|
||||
_this[lastPageName] = lastPageNum;
|
||||
_app.log('_this[lastPageName]:' + _this[lastPageName]);
|
||||
|
||||
// 判断最后一页与是否存在数据, 赋值相应状态
|
||||
if (sendDataPageNum <= 1 && lastPageNum <= 1 && !bl) { //第一页并无数据
|
||||
_app.log('noDataText:' + noDataText);
|
||||
status = getStatus('noData', noDataText||'');
|
||||
_app.log('没有数据,status:' + JSON.stringify(status));
|
||||
} else if (sendDataPageNum < lastPageNum) { //可获取更多
|
||||
status = getStatus('getMore');
|
||||
} else { //没有更多了
|
||||
status = getStatus('noMore');
|
||||
}
|
||||
} else {
|
||||
status = getStatus('errFail');
|
||||
}
|
||||
// 页面携带数据页数加1
|
||||
++_this[sendDataName][pageNumName];
|
||||
// 赋值状态
|
||||
_this[statusTextName] = status;
|
||||
// 重置等待标识
|
||||
_this[waitingName] = false;
|
||||
if(successEnd && typeof successEnd == 'function') successEnd(res);
|
||||
}).catch(err => {
|
||||
_app.log('pageJS异常:' + JSON.stringify(err));
|
||||
// 获取数据异常,可点击重新加载
|
||||
_this[statusTextName] = { ...statusObj.errCatch
|
||||
};
|
||||
// 重置等待标识
|
||||
_this[waitingName] = false;
|
||||
if (fail && typeof fail === 'function') fail(err);
|
||||
})
|
||||
}
|
||||
|
||||
function getStatus(type, text) {
|
||||
const obj = {...statusObj[type]};
|
||||
obj.text = text||obj.text||'';
|
||||
return obj;
|
||||
}
|
||||
|
||||
function getField(data, fields, pattern) { //递归获取指定字段数据
|
||||
if (!fields) return data;
|
||||
var arr = fields.split('.');
|
||||
var key = arr.shift();
|
||||
var value = data[key];
|
||||
|
||||
if(value==null){
|
||||
return value;
|
||||
}else if(arr.length==0){
|
||||
if(!pattern)return value;
|
||||
var type = Object.prototype.toString.call(value).replace('[object ','').replace(']','');
|
||||
if(pattern===true){
|
||||
return type;
|
||||
}else if(!pattern){
|
||||
return value;
|
||||
}else{
|
||||
return type==pattern;
|
||||
}
|
||||
}
|
||||
|
||||
var result = getField(value,arr.join('.'),pattern);
|
||||
return result;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
doPageDemand
|
||||
}
|
||||
128
components/QS-tabs-wxs-list/js/publicProps.js
Normal file
128
components/QS-tabs-wxs-list/js/publicProps.js
Normal file
@ -0,0 +1,128 @@
|
||||
var publicProps = {
|
||||
minWidth: { //tab最小宽度
|
||||
type: String,
|
||||
default: '250rpx'
|
||||
},
|
||||
space: { //tab间距, 左右padding值
|
||||
type: String,
|
||||
default: '10px'
|
||||
},
|
||||
tabHeight: { //tabs高度
|
||||
type: String,
|
||||
default: '44px'
|
||||
},
|
||||
height: { //组件总高度, 需外部计算并传入
|
||||
type: [Number, String],
|
||||
default: 500
|
||||
},
|
||||
lineWidth: { //线条宽度，若小于1则当做百分比计算
|
||||
type: [Number, String],
|
||||
default: .7
|
||||
},
|
||||
lineHieght: { //线条高度
|
||||
type: String,
|
||||
default: '2px'
|
||||
},
|
||||
lineColor: { //线条颜色
|
||||
type: String,
|
||||
default: '#f1505c'
|
||||
},
|
||||
lineMarginBottom: { //线条距离底部距离
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
defCurrent: { //默认当前项
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
autoCenter: { //scrollview自动居中
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
tapTabRefresh: { //点击当前项tab触发组件内部init函数
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
fontSize: { //tab默认字体大小
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
activeFontSize: { //当前项字体大小
|
||||
type: String,
|
||||
default: '32rpx'
|
||||
},
|
||||
swiperBackgroundColor: { //swiper背景颜色
|
||||
type: String,
|
||||
default: '#f8f8f8'
|
||||
},
|
||||
tabsBackgroundColor: { //tabs背景颜色
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
tabsFontColor: { //tabs默认字体颜色
|
||||
type: String,
|
||||
default: '#999'
|
||||
},
|
||||
activeFontColor: { //tabs当前项字体颜色
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
activeBold: { //当前项字体加粗
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
initFnName: { //初始调用函数名称(组件内部)
|
||||
type: String,
|
||||
default: 'init'
|
||||
},
|
||||
type: { //用于区分展示不同列表模板的标识
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
zIndex: { //z-index属性值
|
||||
type: [String, Number],
|
||||
default: 99
|
||||
},
|
||||
tabsSticky: { //tabs是否sticky定位(粘贴组件顶部)
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
hasRefresh: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
refreshImage: { //刷新动画图片
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
refreshDistance: { //刷新距离
|
||||
type: [Number, String],
|
||||
default: 90
|
||||
},
|
||||
beforRefreshText: { //刷新前文字
|
||||
type: String,
|
||||
default: '下拉刷新'
|
||||
},
|
||||
releaseRefreshText: { //释放刷新文字
|
||||
type: String,
|
||||
default: '松开刷新'
|
||||
},
|
||||
isRefreshingText: { //刷新中文字
|
||||
type: String,
|
||||
default: '刷新中...'
|
||||
},
|
||||
completeRefreshText: { //刷新完成文字
|
||||
type: String,
|
||||
default: '刷新完毕'
|
||||
},
|
||||
refreshTextColor: { //刷新文字的颜色
|
||||
type: String,
|
||||
default: '#666'
|
||||
},
|
||||
refreshTextFontSize: { //刷新文字的大小
|
||||
type: String,
|
||||
default: '25rpx'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = publicProps;
|
||||
86
components/QS-tabs-wxs-list/mixins/QS-tabs-wxs-list-mixin.js
Normal file
86
components/QS-tabs-wxs-list/mixins/QS-tabs-wxs-list-mixin.js
Normal file
@ -0,0 +1,86 @@
|
||||
function QSTabsWxsListMixin(){
|
||||
return {
|
||||
props: {
|
||||
tab: {
|
||||
type: [Object, String],
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
index: { // 保证性能勿删
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
current: { // 保证性能勿删
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
show: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
readyRefresh: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0, // 保证性能勿删
|
||||
oldScrollTop: 0, // 保证性能勿删
|
||||
setScrollTopcount: 0, // 保证性能勿删
|
||||
scrollTimeout: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 保证性能勿删
|
||||
show(newValue, oldValue) {
|
||||
if (newValue === true) {
|
||||
this.toOldScrollTop();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 保证性能勿删
|
||||
getShow() {
|
||||
return String(this.show)==='true';
|
||||
},
|
||||
getFixedClass() {
|
||||
// #ifndef MP
|
||||
return String(this.readyRefresh)==='true'&&String(this.getShow)==='true'?'freeze':'';
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
return '';
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollFn(e) { // 保证性能勿删
|
||||
if (e.detail.scrollTop !== 0) {
|
||||
if(this.scrollTimeout){
|
||||
clearTimeout(this.scrollTimeout);
|
||||
}
|
||||
this.scrollTimeout = setTimeout(()=>{
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
}, 100);
|
||||
|
||||
}
|
||||
},
|
||||
toOldScrollTop() { // 保证性能勿删
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.scrollTop = (this.setScrollTopcount++ % 2 === 0) ? this.oldScrollTop + 1 : this.oldScrollTop - 1;
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
QSTabsWxsListMixin
|
||||
}
|
||||
100
components/QS-tabs-wxs-list/wxs/QS-refresh-wxs.wxs
Normal file
100
components/QS-tabs-wxs-list/wxs/QS-refresh-wxs.wxs
Normal file
@ -0,0 +1,100 @@
|
||||
var startY = 0;
|
||||
|
||||
var touchstart = function(e, ins) {
|
||||
startY = e.touches[0].pageY;
|
||||
var refreshContianer = ins.selectComponent('#refresh-container');
|
||||
var dataset = refreshContianer.getDataset();
|
||||
var refreshStatus = parseInt(dataset.refreshstatus);
|
||||
if (refreshStatus === 1) {
|
||||
refreshContianer.setStyle({
|
||||
'transition': '0s'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var touchmove = function(e, ins) {
|
||||
var refreshContianer = ins.selectComponent('#refresh-container');
|
||||
var dataset = refreshContianer.getDataset();
|
||||
// console.log('dataset:');
|
||||
// console.log(dataset);
|
||||
var refreshStatus = parseInt(dataset.refreshstatus);
|
||||
if (refreshStatus === 1 || refreshStatus === 2) {
|
||||
var moveY = e.touches[0].pageY;
|
||||
var diffY = (moveY - startY) * 0.5;
|
||||
if (diffY < 0) {
|
||||
diffY = 0;
|
||||
} else {
|
||||
var readyRefresh = dataset.readyrefresh;
|
||||
if (readyRefresh === false || readyRefresh === 'false') {
|
||||
ins.callMethod('setReadyRefresh', {
|
||||
readyRefresh: true
|
||||
});
|
||||
}
|
||||
var refreshShow = dataset.refreshshow;
|
||||
if (refreshShow === false || refreshShow === 'false') {
|
||||
ins.callMethod('setRefreshShow', {
|
||||
refreshShow: true
|
||||
});
|
||||
}
|
||||
}
|
||||
refreshContianer.setStyle({
|
||||
'transform': 'translateY(' + (diffY) + 'px)'
|
||||
})
|
||||
|
||||
var refreshImageComponent = ins.selectComponent('#refreshImage');
|
||||
if (refreshImageComponent) {
|
||||
refreshImageComponent.setStyle({
|
||||
'transform': 'rotate(' + (diffY*10) + 'deg)'
|
||||
})
|
||||
}
|
||||
|
||||
var refreshDistance = parseFloat(dataset.refreshdistance);
|
||||
if (diffY >= refreshDistance) {
|
||||
if (refreshStatus !== 2) ins.callMethod('setRefreshStatus', 2);
|
||||
} else {
|
||||
if (refreshStatus !== 1) {
|
||||
ins.callMethod('setRefreshStatus', 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var touchend = function(e, ins) {
|
||||
var refreshContianer = ins.selectComponent('#refresh-container');
|
||||
var dataset = refreshContianer.getDataset();
|
||||
var refreshStatus = parseInt(dataset.refreshstatus);
|
||||
if (refreshStatus === 1 || refreshStatus === 2) {
|
||||
ins.callMethod('setReadyRefresh', {
|
||||
readyRefresh: false
|
||||
});
|
||||
if (refreshStatus === 2) {
|
||||
ins.callMethod('setRefreshStatus', 3);
|
||||
} else {
|
||||
refreshContianer.setStyle({
|
||||
'transform': 'translateY(0)',
|
||||
'transition': '.3s'
|
||||
})
|
||||
ins.callMethod('setRefreshShow', {
|
||||
refreshShow: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var refreshStatusChange = function(n, o, ins) {
|
||||
if (n === 4) {
|
||||
var refreshContianer = ins.selectComponent('#refresh-container');
|
||||
refreshContianer.setStyle({
|
||||
'transform': 'translateY(0)',
|
||||
'transition': '.3s 1s'
|
||||
})
|
||||
ins.callMethod('setRefreshStatus', 5);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
refreshStatusChange: refreshStatusChange
|
||||
}
|
||||
140
components/QS-tabs-wxs-list/wxs/QS-tabs-wxs.wxs
Normal file
140
components/QS-tabs-wxs-list/wxs/QS-tabs-wxs.wxs
Normal file
@ -0,0 +1,140 @@
|
||||
function log(t) {
|
||||
// log(t);
|
||||
}
|
||||
|
||||
function transition(e, ins) {
|
||||
var line = ins.selectComponent('#line');
|
||||
var swiper = ins.selectComponent('#swiper');
|
||||
var dataset = swiper.getDataset();
|
||||
dataset = str2Obj(dataset);
|
||||
var windowwidth = parseFloat(dataset.windowwidth);
|
||||
log('dataset:' + JSON.stringify(dataset));
|
||||
var tabsinfo = dataset.tabsinfo || [];
|
||||
tabsinfo = str2Obj(tabsinfo);
|
||||
var current = parseInt(dataset.current) || 0;
|
||||
log('current:' + current);
|
||||
var tab = tabsinfo[current];
|
||||
tab = str2Obj(tab);
|
||||
if(tab) {
|
||||
log('tab:' + JSON.stringify(tab));
|
||||
var curTabDx = (parseFloat(tab.left) + (parseFloat(tab.width)/2));
|
||||
log('curTabDx:' + curTabDx);
|
||||
var newDx = e.detail.dx;
|
||||
var nextCurrent = newDx>0?current+1:current-1;
|
||||
log('nextCurrent:' + nextCurrent);
|
||||
|
||||
var nextTab = tabsinfo[nextCurrent];
|
||||
nextTab = str2Obj(nextTab);
|
||||
var nextDx;
|
||||
if(nextTab) {
|
||||
nextDx = nextTab.left + nextTab.width/2;
|
||||
}else{
|
||||
nextDx = newDx>0?(curTabDx + 200): (curTabDx - 200);
|
||||
}
|
||||
log('nextDx:' + nextDx);
|
||||
log('windowwidth:' + windowwidth);
|
||||
log('newDx:' + newDx);
|
||||
var dxScale = Math.abs(newDx)/windowwidth;
|
||||
log('dxScale:' + dxScale);
|
||||
var newScaleDx = (nextDx - curTabDx)*dxScale;
|
||||
log('newScaleDx:' + newScaleDx);
|
||||
var moveDx = (curTabDx + newScaleDx);
|
||||
log('moveDx:' + moveDx);
|
||||
var lineWidth = dataset.linewidth;
|
||||
lineWidth = parseFloat(lineWidth);
|
||||
log('lineWidth:' +lineWidth);
|
||||
lineWidth = lineWidth>1?lineWidth:tab.width*lineWidth;
|
||||
var setDx = (moveDx - lineWidth/2);
|
||||
line.setStyle({
|
||||
'transform': 'translateX(' + setDx + 'px)'
|
||||
})
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function tabsInfoChange(n, o, ins) {
|
||||
var swiper = ins.selectComponent('#swiper');
|
||||
var dataset = swiper.getDataset();
|
||||
var tabsInfoChangeBl = dataset.tabsinfochangebl;
|
||||
if(tabsInfoChangeBl === 'true' || tabsInfoChangeBl === true){
|
||||
ins.callMethod('setTabsInfoChangeBl');
|
||||
setCurDx(ins, false, true, false);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function animationfinish(e, ins) {
|
||||
log('触发了animationfinish方法:' + e.detail.current);
|
||||
setCurDx(ins, e.detail.current, false);
|
||||
ins.callMethod('setCurrent', e.detail);
|
||||
return false;
|
||||
}
|
||||
|
||||
function swiperChange(e, ins) {
|
||||
log('触发了swiperChange方法:' + e.detail.current);
|
||||
setCurDx(ins, e.detail.current, false, false);
|
||||
ins.callMethod('setSwiperCurrent', e.detail);
|
||||
return false;
|
||||
}
|
||||
|
||||
function setCurDx(ins, current, tabsChange, changeLineDx) {
|
||||
var swiper = ins.selectComponent('#swiper');
|
||||
var dataset = swiper.getDataset();
|
||||
dataset = str2Obj(dataset);
|
||||
log('dataset:' + JSON.stringify(dataset));
|
||||
var line = ins.selectComponent('#line');
|
||||
var tabsinfo = dataset.tabsinfo || [];
|
||||
tabsinfo = str2Obj(tabsinfo);
|
||||
var current = parseInt(current!==false?current:(dataset.current || 0));
|
||||
var tab = tabsinfo[current];
|
||||
tab = str2Obj(tab);
|
||||
log('tab:' + JSON.stringify(tab));
|
||||
if(tab) {
|
||||
log('tab.left : ' + tab.left);
|
||||
var lineDx = (parseFloat(tab.left) + parseFloat(tab.width)/2);
|
||||
log('lineDx:' + lineDx);
|
||||
log('changeLineDx:' + changeLineDx);
|
||||
log('current:' + current);
|
||||
if(changeLineDx !== false || current == 0) {
|
||||
var lineWidth = dataset.linewidth;
|
||||
lineWidth = parseFloat(lineWidth);
|
||||
log('tab.width:' + tab.width);
|
||||
log('lineWidth 1:' + lineWidth);
|
||||
lineWidth = lineWidth>1?Math.abs(lineWidth):tab.width*lineWidth;
|
||||
log('lineWidth 2:' + lineWidth);
|
||||
ins.callMethod('setWxsLineWidth', lineWidth);
|
||||
line.setStyle({
|
||||
// 'left': lineDx + 'px'
|
||||
'transform': 'translateX(' + (lineDx - lineWidth/2) + 'px)',
|
||||
// 'width': lineWidth + 'px'
|
||||
})
|
||||
}
|
||||
var windowwidth = parseFloat(dataset.windowwidth);
|
||||
log('tabsChange:' + tabsChange);
|
||||
var left = (lineDx - (windowwidth/2));
|
||||
// ins.callMethod('setScrollLeft', {scrollLeft: left, tabsChange: tabsChange});
|
||||
setScrollLeft(ins, {scrollLeft: left, tabsChange: tabsChange});
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function setScrollLeft(ins, obj) {
|
||||
obj.scrollLeft = obj.scrollLeft < 0? 0: obj.scrollLeft;
|
||||
log('触发了setScrollLeft方法:' + JSON.stringify(obj));
|
||||
ins.callMethod('setScrollLeft', obj);
|
||||
return false;
|
||||
}
|
||||
|
||||
function str2Obj(str) {
|
||||
if(typeof str === 'string') {
|
||||
return JSON.parse(str);
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
transition: transition,
|
||||
tabsInfoChange: tabsInfoChange,
|
||||
animationfinish: animationfinish,
|
||||
swiperChange: swiperChange
|
||||
}
|
||||
124
components/WaterfallsFlow/WaterfallsFlow.vue
Normal file
124
components/WaterfallsFlow/WaterfallsFlow.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<view class="wf-page">
|
||||
<!-- left -->
|
||||
<view>
|
||||
<view id="left" v-if="leftList.length">
|
||||
<view v-for="(item,index) in leftList" :key="index"
|
||||
class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- right -->
|
||||
<view>
|
||||
<view id="right" v-if="rightList.length">
|
||||
<view v-for="(item,index) in rightList" :key="index"
|
||||
class="wf-item" @tap="itemTap(item)">
|
||||
<WaterfallsFlowItem :item="item" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
WaterfallsFlowItem
|
||||
},
|
||||
props:{
|
||||
// 瀑布流列表
|
||||
wfList:{
|
||||
type:Array,
|
||||
require:true
|
||||
},
|
||||
updateNum:{
|
||||
type:Number,
|
||||
default:10
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allList:[], // 全部列表
|
||||
leftList:[], // 左边列表
|
||||
rightList:[], // 右边列表
|
||||
mark:0, // 列表标记
|
||||
boxHeight:[], // 下标0和1分别为左列和右列高度
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
async wfList(){
|
||||
if(this.wfList.length === 0 ||
|
||||
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)){
|
||||
this.allList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.boxHeight = [];
|
||||
this.mark = 0;
|
||||
}
|
||||
|
||||
if(this.wfList.length){
|
||||
this.allList = this.wfList;
|
||||
await this.waterFall()
|
||||
}
|
||||
},
|
||||
async mark(){
|
||||
const len = this.allList.length;
|
||||
if(this.mark < len && this.mark !== 0){
|
||||
await this.waterFall();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async waterFall(){
|
||||
const i = this.mark;
|
||||
if(i === 0){
|
||||
this.leftList.push(this.allList[i]);
|
||||
await this.getViewHeight(0);
|
||||
}else if(i === 1){
|
||||
this.rightList.push(this.allList[i]);
|
||||
await this.getViewHeight(1);
|
||||
}else {
|
||||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||||
if(leftOrRight){this.rightList.push(this.allList[i])}
|
||||
else{this.leftList.push(this.allList[i])}
|
||||
await this.getViewHeight(leftOrRight);
|
||||
}
|
||||
},
|
||||
async getViewHeight(leftOrRight){
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
const id = leftOrRight ? '#right' : '#left';
|
||||
await setTimeout(()=>{
|
||||
query.select(id).boundingClientRect(res=>{
|
||||
this.boxHeight[leftOrRight] = res.height;
|
||||
this.mark = this.mark + 1;
|
||||
}).exec();
|
||||
},50)
|
||||
},
|
||||
itemTap(item){
|
||||
this.$emit('itemTap',item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$page-padding:10px;
|
||||
$grid-gap:10px;
|
||||
|
||||
.wf-page{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: $grid-gap;
|
||||
padding: 10px $page-padding;
|
||||
}
|
||||
|
||||
.wf-item{
|
||||
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||||
padding-bottom: $grid-gap;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user