first commit
This commit is contained in:
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="bargain.length>0">
|
||||
<div class="bargain-record pad30" ref="container">
|
||||
<div class="item borRadius14" v-for="(item, index) in bargain" :key="index">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="pictrue">
|
||||
<image :src="item.image" />
|
||||
</div>
|
||||
<div class="text acea-row row-column-around">
|
||||
<div class="line1" style="width: 100%;">{{ item.title }}</div>
|
||||
<count-down :justify-left="'justify-content:left'" :bgColor="bgColor" :is-day="true" :tip-text="'倒计时 '" :day-text="'天'"
|
||||
:hour-text="' 时 '" :minute-text="' 分 '"
|
||||
:second-text="' 秒 '" :datatime="item.stopTime/1000" v-if="item.status === 1"></count-down>
|
||||
<div class="successTxt font-color-red" v-else-if="item.status === 3">砍价成功</div>
|
||||
<div class="endTxt" v-else>活动已结束</div>
|
||||
<div class="money">
|
||||
已砍至<span class="symbol font-color-red">￥</span><span class="num font-color-red">{{ item.surplusPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom acea-row row-between-wrapper">
|
||||
<div class="purple" v-if="item.status === 1">活动进行中</div>
|
||||
<div class="success" v-else-if="item.status === 3">砍价成功</div>
|
||||
<div class="end" v-else>活动已结束</div>
|
||||
<div class="acea-row row-middle row-right">
|
||||
<div class="bnt bg-color-red" v-if="item.status === 3 && !item.isOrder" @click="goConfirm(item)">
|
||||
去付款
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 3 && !item.isDel && item.isOrder && !item.isPay" @click="goPay(item.surplusPrice,item.orderNo)">
|
||||
立即付款
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 1" @click="goDetail(item.id)">
|
||||
继续砍价
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 2" @click="goList">重开一个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading :loaded="status" :loading="loadingList"></Loading>
|
||||
</div>
|
||||
</block>
|
||||
<block v-if="bargain.length == 0">
|
||||
<emptyPage title="暂无砍价记录～"></emptyPage>
|
||||
</block>
|
||||
<home></home>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import CountDown from "@/components/countDown";
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import {
|
||||
getBargainUserList,
|
||||
getBargainUserCancel
|
||||
} from "@/api/activity";
|
||||
import Loading from "@/components/Loading";
|
||||
import home from '@/components/home';
|
||||
import payment from '@/components/payment';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
name: "BargainRecord",
|
||||
components: {
|
||||
CountDown,
|
||||
Loading,
|
||||
emptyPage,
|
||||
home,
|
||||
payment
|
||||
},
|
||||
props: {},
|
||||
computed: mapGetters(['isLogin', 'userInfo', 'uid']),
|
||||
data: function() {
|
||||
return {
|
||||
bgColor:{
|
||||
'bgColor': '',
|
||||
'Color': '#E93323',
|
||||
'width': '40rpx',
|
||||
'timeTxtwidth': '28rpx',
|
||||
'isDay': false
|
||||
},
|
||||
bargain: [],
|
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成
|
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
|
||||
page: 1, //页码
|
||||
limit: 20, //数量
|
||||
payMode: [{
|
||||
name: "微信支付",
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
title: '微信快捷支付'
|
||||
},
|
||||
{
|
||||
name: "余额支付",
|
||||
icon: "icon-yuezhifu",
|
||||
value: 'yue',
|
||||
title: '可用余额:',
|
||||
number: 0
|
||||
}
|
||||
],
|
||||
pay_close: false,
|
||||
pay_order_id: '',
|
||||
totalPrice: '0'
|
||||
};
|
||||
},
|
||||
onLoad: function() {
|
||||
this.getBargainUserList();
|
||||
// this.$scroll(this.$refs.container, () => {
|
||||
// !this.loadingList && this.getBargainUserList();
|
||||
// });
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.payMode[1].number = this.userInfo.nowMoney;
|
||||
this.$set(this, 'payMode', this.payMode);
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
goPay(pay_price, order_id) {
|
||||
this.$set(this, 'pay_close', true);
|
||||
this.$set(this, 'pay_order_id', order_id);
|
||||
this.$set(this, 'totalPrice', pay_price);
|
||||
},
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
onChangeFun: function(e) {
|
||||
let opt = e;
|
||||
let action = opt.action || null;
|
||||
let value = opt.value != undefined ? opt.value : null;
|
||||
(action && this[action]) && this[action](value);
|
||||
},
|
||||
/**
|
||||
* 关闭支付组件
|
||||
*
|
||||
*/
|
||||
payClose: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付成功回调
|
||||
*
|
||||
*/
|
||||
pay_complete: function() {
|
||||
this.status = false;
|
||||
this.page = 1;
|
||||
this.$set(this, 'bargain', []);
|
||||
this.$set(this, 'pay_close', false);
|
||||
this.getBargainUserList();
|
||||
},
|
||||
/**
|
||||
* 支付失败回调
|
||||
*
|
||||
*/
|
||||
pay_fail: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
goConfirm: function(item) { //立即支付
|
||||
if (this.isLogin === false) {
|
||||
toLogin();
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}&storeBargainId=${item.bargainUserId}`
|
||||
})
|
||||
}
|
||||
},
|
||||
goDetail: function(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${id}&startBargainUid=${this.uid}`
|
||||
})
|
||||
},
|
||||
// 砍价列表
|
||||
goList: function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_bargain/index'
|
||||
})
|
||||
},
|
||||
getBargainUserList: function() {
|
||||
var that = this;
|
||||
if (that.loadingList) return;
|
||||
if (that.status) return;
|
||||
getBargainUserList({
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
})
|
||||
.then(res => {
|
||||
that.status = res.data.list.length < that.limit;
|
||||
that.bargain.push.apply(that.bargain, res.data.list);
|
||||
that.page++;
|
||||
that.loadingList = false;
|
||||
})
|
||||
.catch(res => {
|
||||
that.$dialog.error(res);
|
||||
});
|
||||
},
|
||||
getBargainUserCancel: function(bargainId) {
|
||||
var that = this;
|
||||
getBargainUserCancel({
|
||||
bargainId: bargainId
|
||||
})
|
||||
.then(res => {
|
||||
that.status = false;
|
||||
that.loadingList = false;
|
||||
that.page = 1;
|
||||
that.bargain = [];
|
||||
that.getBargainUserList();
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
})
|
||||
.catch(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getBargainUserList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/*砍价记录*/
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
.styleAll {
|
||||
color: #fc4141;
|
||||
font-size:24rpx;
|
||||
}
|
||||
}
|
||||
.bargain-record .item .picTxt .text .time .red {
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
}
|
||||
.bargain-record .item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding: 30rpx 24rpx 0 24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue {
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text {
|
||||
width: 470rpx;
|
||||
font-size: 30upx;
|
||||
color: #333333;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
font-size: 24upx;
|
||||
color: #868686;
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .successTxt{
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .endTxt{
|
||||
font-size:24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.bargain-record .item .picTxt .text .money {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .num {
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .symbol {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom {
|
||||
height: 100upx;
|
||||
font-size: 27upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .purple {
|
||||
color: #f78513;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .end {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .success {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt {
|
||||
font-size: 27upx;
|
||||
color: #fff;
|
||||
width: 176upx;
|
||||
height: 60upx;
|
||||
border-radius: 32upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt.cancel {
|
||||
color: #aaa;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt~.bnt {
|
||||
margin-left: 18upx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<div>
|
||||
<view class="combinationBj"></view>
|
||||
<div class="combinationList">
|
||||
<view class='group-list'>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
|
||||
<!-- #endif -->
|
||||
<!-- banner -->
|
||||
<view class="swiper" v-if="bannerList.length">
|
||||
<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
|
||||
:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(item,index) in bannerList" :key="index">
|
||||
<swiper-item>
|
||||
<navigator :url='item.value' class='slide-navigator acea-row row-between-wrapper'
|
||||
hover-class='none'>
|
||||
<image :src="item.value" class="slide-image" lazy-load></image>
|
||||
</navigator>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="nav acea-row row-between-wrapper">
|
||||
<image src="../static/zuo.png"></image>
|
||||
<view class="title acea-row row-center">
|
||||
<view class="spike-bd">
|
||||
<view v-if="avatarList.length > 0" class="activity_pic">
|
||||
<view v-for="(item,index) in avatarList" :key="index" class="picture"
|
||||
:style='index===6?"position: relative":"position: static"'>
|
||||
<span class="avatar" :style='"background-image: url("+item+")"'></span>
|
||||
<span v-if="index===6 && Number(avatarList.length) > 3" class="mengceng">
|
||||
<i>···</i>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="pic_count">{{totalPeople}}人参与</text>
|
||||
</view>
|
||||
<image src="../static/you.png"></image>
|
||||
</view>
|
||||
<view class='list'>
|
||||
<block v-for="(item,index) in combinationList" :key='index'>
|
||||
<view class='item acea-row row-between-wrapper' @tap="openSubcribe(item)"
|
||||
data-url=''>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='line2'>{{item.title}}</view>
|
||||
<text class='y-money'>￥{{item.otPrice}}</text>
|
||||
<view class='bottom acea-row row-between-wrapper'>
|
||||
<view class='money'>￥<text class='num'>{{item.price}}</text></view>
|
||||
<view class="btn acea-row">
|
||||
<view class="num">{{item.people}}人团</view>
|
||||
<view class="goBye">去拼团</view>
|
||||
</view>
|
||||
<!-- <view class="nothing">已售罄</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='combinationList.length > 0'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<home></home>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCombinationList,
|
||||
combinationHeaderApi
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
openPinkSubscribe
|
||||
} from '../../../utils/SubscribeMessage.js';
|
||||
import home from '@/components/home/index.vue'
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
navH: '',
|
||||
combinationList: [],
|
||||
limit: 10,
|
||||
page: 1,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
returnShow: true,
|
||||
loadTitle: '',
|
||||
avatarList: [],
|
||||
bannerList: [],
|
||||
totalPeople: 0
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getCombinationList();
|
||||
},
|
||||
onLoad() {
|
||||
var pages = getCurrentPages();
|
||||
this.returnShow = pages.length===1?false:true;
|
||||
uni.setNavigationBarTitle({
|
||||
title:"拼团列表"
|
||||
})
|
||||
// #ifdef MP
|
||||
this.navH = app.globalData.navH;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.navH = app.globalData.navHeight;
|
||||
// #endif
|
||||
this.getCombinationList();
|
||||
this.getCombinationHeader();
|
||||
},
|
||||
methods: {
|
||||
goBack: function() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
openSubcribe: function(item) {
|
||||
let page = item;
|
||||
// #ifndef MP
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.showLoading({
|
||||
title: '正在加载',
|
||||
})
|
||||
openPinkSubscribe().then(res => {
|
||||
uni.hideLoading();
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
|
||||
});
|
||||
}).catch(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
getCombinationHeader: function() {
|
||||
combinationHeaderApi().then(res => {
|
||||
this.avatarList = res.data.avatarList || [];
|
||||
this.bannerList = res.data.bannerList || [];
|
||||
this.totalPeople = res.data.totalPeople;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.loadTitle = '加载更多';
|
||||
})
|
||||
},
|
||||
getCombinationList: function() {
|
||||
var that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
that.loadTitle = '';
|
||||
var data = {
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
};
|
||||
this.loading = true
|
||||
getCombinationList(data).then(function(res) {
|
||||
let list = res.data.list;
|
||||
let combinationList = that.$util.SplitArray(list, that.combinationList);
|
||||
let loadend = list.length < that.limit;
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
||||
that.$set(that, 'combinationList', combinationList);
|
||||
that.$set(that, 'page', that.page + 1);
|
||||
}).catch(() => {
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
})
|
||||
},
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.getCombinationList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #E93323 !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.combinationBj{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 990rpx;
|
||||
background: url(../static/pinbei.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.mengceng {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 36rpx;
|
||||
background: rgba(51, 51, 51, 0.6);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
left: -2rpx;
|
||||
color: #FFF;
|
||||
top: 2rpx;
|
||||
i{
|
||||
font-style: normal;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.activity_pic {
|
||||
|
||||
.picture {
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-radius: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
margin-right: -10rpx;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
}
|
||||
}
|
||||
.combinationList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 25rpx 30rpx;
|
||||
.swiper{
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin-bottom: 34rpx;
|
||||
swiper,
|
||||
.swiper-item,
|
||||
image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.nav{
|
||||
width: 100%;
|
||||
margin-bottom: 34rpx;
|
||||
image{
|
||||
width: 102rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 68%;
|
||||
.pic_count {
|
||||
margin-left: 30rpx;
|
||||
color: $theme-color;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: #C6483C;
|
||||
color: #FFFFFF;
|
||||
border-radius: 19rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-xiangzuo {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
z-index: 99;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
.group-list .list .item {
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
padding: 22rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto 20rpx auto;
|
||||
}
|
||||
|
||||
.group-list .list .item .pictrue {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
}
|
||||
|
||||
.group-list .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.group-list .list .item .text {
|
||||
width: 440rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
margin-left: 20rpx;
|
||||
.line2{
|
||||
height: 86rpx;
|
||||
}
|
||||
.btn{
|
||||
.num{
|
||||
width: auto;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
background-color:#FFEFDB;
|
||||
padding-left: 22rpx;
|
||||
padding-right: 36rpx;
|
||||
color: $theme-color;
|
||||
font-size: 24rpx;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
}
|
||||
.goBye{
|
||||
width: 130rpx;
|
||||
height: 58rpx;
|
||||
z-index: 11;
|
||||
background: url(../static/shandian.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
line-height: 58rpx;
|
||||
font-size: 24rpx;
|
||||
padding-left: 36rpx;
|
||||
padding-right: 10rpx;
|
||||
color: #fff;
|
||||
margin-left: -28rpx;
|
||||
}
|
||||
}
|
||||
.nothing{
|
||||
width: 148rpx;
|
||||
height: 58rpx;
|
||||
text-align: center;
|
||||
line-height: 58rpx;
|
||||
background: #CCCCCC;
|
||||
opacity: 1;
|
||||
color: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.group-list .list .item .text .team {
|
||||
height: 38rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 22rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .team .iconfont {
|
||||
width: 54rpx;
|
||||
background-color: #ffdcd9;
|
||||
text-align: center;
|
||||
color: #dd3823;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .team .num {
|
||||
text-align: center;
|
||||
padding: 0 6rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .bottom .money {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .bottom .money .num {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .y-money {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .bottom .groupBnt {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
width: 146rpx;
|
||||
height: 54rpx;
|
||||
text-align: center;
|
||||
line-height: 54rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.group-list .list .item .text .bottom .groupBnt .iconfont {
|
||||
font-size: 25rpx;
|
||||
vertical-align: 2rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff ditekan karena terlalu besar
Load Diff
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div>
|
||||
<view class='flash-sale'>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
|
||||
<!-- #endif -->
|
||||
<view class="saleBox"></view>
|
||||
<view class="header" v-if="dataList.length">
|
||||
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(items,index) in dataList[active].slide" :key="index">
|
||||
<swiper-item class="borRadius14">
|
||||
<image :src="items.sattDir" class="slide-image borRadius14" lazy-load></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
<view class="seckillList acea-row row-between-wrapper">
|
||||
<view class="priceTag">
|
||||
<image src="/static/images/priceTag.png"></image>
|
||||
</view>
|
||||
<view class='timeLsit'>
|
||||
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
|
||||
style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in dataList" :key='index'>
|
||||
<view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''">
|
||||
<view class='time'>{{item.time.split(',')[0]}}</view>
|
||||
<view class="state">{{item.statusName}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list pad30' v-if='seckillList.length>0'>
|
||||
<block v-for="(item,index) in seckillList" :key='index'>
|
||||
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
<view class='text acea-row row-column-around'>
|
||||
<view class='name line1'>{{item.title}}</view>
|
||||
<view class='money'><text class="font-color">￥</text>
|
||||
<text class='num font-color'>{{item.price}}</text>
|
||||
<text class="y_money">￥{{item.otPrice}}</text>
|
||||
</view>
|
||||
<view class="limit">限量 <text class="limitPrice">{{item.quota}} {{item.unitName}}</text>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class='bg-reds' :style="'width:'+item.percent+'%;'"></view>
|
||||
<view class='piece'>已抢{{item.percent}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='grab bg-color' v-if="status == 2">马上抢</view>
|
||||
<view class='grab bg-color' v-else-if="status == 1">未开始</view>
|
||||
<view class='grab bg-color-hui' v-else>已结束</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active== 0)">
|
||||
<view class='pictrue'>
|
||||
<image src='../../../static/images/noShopper.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<home></home>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSeckillHeaderApi,
|
||||
getSeckillList
|
||||
} from '../../../api/activity.js';
|
||||
import home from '@/components/home/index.vue';
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 500,
|
||||
topImage: '',
|
||||
seckillList: [],
|
||||
timeList: [],
|
||||
active: 0,
|
||||
scrollLeft: 0,
|
||||
interval: 0,
|
||||
status: 1,
|
||||
countDownHour: "00",
|
||||
countDownMinute: "00",
|
||||
countDownSecond: "00",
|
||||
page: 1,
|
||||
limit: 4,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
pageloading: false,
|
||||
dataList: [],
|
||||
returnShow: true,
|
||||
navH: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
var pages = getCurrentPages();
|
||||
this.returnShow = pages.length===1?false:true;
|
||||
// #ifdef H5
|
||||
this.navH = app.globalData.navHeight-18;
|
||||
// #endif
|
||||
this.getSeckillConfig();
|
||||
},
|
||||
methods: {
|
||||
goBack: function() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
getSeckillConfig: function() {
|
||||
let that = this;
|
||||
getSeckillHeaderApi().then(res => {
|
||||
res.data.map(item => {
|
||||
item.slide = JSON.parse(item.slide)
|
||||
})
|
||||
that.dataList = res.data;
|
||||
that.getSeckillList();
|
||||
that.seckillList = [];
|
||||
that.page = 1;
|
||||
that.status = that.dataList[that.active].status;
|
||||
that.getSeckillList();
|
||||
|
||||
});
|
||||
},
|
||||
getSeckillList: function() {
|
||||
var that = this;
|
||||
var data = {
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
};
|
||||
if (that.loadend) return;
|
||||
if (that.pageloading) return;
|
||||
this.pageloading = true
|
||||
getSeckillList(that.dataList[that.active].id, data).then(res => {
|
||||
var seckillList = res.data.list;
|
||||
var loadend = seckillList.length < that.limit;
|
||||
that.page++;
|
||||
that.seckillList = that.seckillList.concat(seckillList),
|
||||
that.page = that.page;
|
||||
that.pageloading = false;
|
||||
that.loadend = loadend;
|
||||
}).catch(err => {
|
||||
that.pageloading = false
|
||||
});
|
||||
},
|
||||
settimeList: function(item, index) {
|
||||
var that = this;
|
||||
this.active = index
|
||||
if (that.interval) {
|
||||
clearInterval(that.interval);
|
||||
that.interval = null
|
||||
}
|
||||
that.interval = 0,
|
||||
that.countDownHour = "00";
|
||||
that.countDownMinute = "00";
|
||||
that.countDownSecond = "00";
|
||||
that.status = that.dataList[that.active].status;
|
||||
that.loadend = false;
|
||||
that.page = 1;
|
||||
that.seckillList = [];
|
||||
// wxh.time(e.currentTarget.dataset.stop, that);
|
||||
that.getSeckillList();
|
||||
},
|
||||
goDetails(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_seckill_details/index?id=' + item.id
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.getSeckillList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #F5F5F5 !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.icon-xiangzuo {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
left: 30rpx;
|
||||
z-index: 99;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
.flash-sale .header {
|
||||
width: 710rpx;
|
||||
height: 330rpx;
|
||||
margin: -276rpx auto 0 auto;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
swiper{
|
||||
height: 330rpx !important;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.flash-sale .header image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
img{
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flash-sale .seckillList {
|
||||
padding: 25rpx;
|
||||
}
|
||||
|
||||
.flash-sale .seckillList .priceTag {
|
||||
width: 75rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.flash-sale .seckillList .priceTag image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit {
|
||||
width: 596rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item {
|
||||
display: inline-block;
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-right: 30rpx;
|
||||
width: 130rpx;
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item .time {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item.on .time {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item.on .state {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
width: 128rpx;
|
||||
/* padding: 0 12rpx; */
|
||||
background: linear-gradient(90deg, rgba(252, 25, 75, 1) 0%, rgba(252, 60, 32, 1) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flash-sale .countDown {
|
||||
height: 92rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
margin-top: -14rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.flash-sale .countDown .num {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
background-color: #ffcfcb;
|
||||
padding: 4rpx 7rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.flash-sale .countDown .text {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
margin-right: 13rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item {
|
||||
height: 230rpx;
|
||||
position: relative;
|
||||
/* width: 710rpx; */
|
||||
margin: 0 auto 20rpx auto;
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
padding: 25rpx 24rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text {
|
||||
width: 440rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
height: 166rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .name {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .money {
|
||||
font-size: 30rpx;
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .money .num {
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
font-family: 'Guildford Pro';
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .money .y_money {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-decoration-line: line-through;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .limit {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .limit .limitPrice {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .progress {
|
||||
overflow: hidden;
|
||||
background-color: #EEEEEE;
|
||||
width: 260rpx;
|
||||
border-radius: 18rpx;
|
||||
height: 18rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .progress .bg-reds {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 0.6s ease;
|
||||
background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .progress .piece {
|
||||
position: absolute;
|
||||
left: 8%;
|
||||
transform: translate(0%, -50%);
|
||||
top: 49%;
|
||||
font-size: 16rpx;
|
||||
color: #FFB9B9;
|
||||
}
|
||||
|
||||
.flash-sale .list .item .grab {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
text-align: center;
|
||||
line-height: 54rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
bottom: 30rpx;
|
||||
background: #bbbbbb;
|
||||
}
|
||||
|
||||
.flash-sale .saleBox {
|
||||
width: 100%;
|
||||
height: 298rpx;
|
||||
/* #ifdef MP */
|
||||
height: 300rpx;
|
||||
/* #endif */
|
||||
background: rgba(233, 51, 35, 1);
|
||||
border-radius: 0 0 50rpx 50rpx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='poster-poster'>
|
||||
<view class='tip'><text class='iconfont icon-shuoming'></text>提示：点击图片即可保存至手机相册 </view>
|
||||
<view class='pictrue' v-if="canvasStatus">
|
||||
<image :src='imagePath'></image>
|
||||
</view>
|
||||
<view class="canvas">
|
||||
<canvas style="width:750px;height:1130px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
||||
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" style="opacity: 0;"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCombinationPink, getCombinationPoster } from '../../../api/activity.js';
|
||||
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
|
||||
import { imageBase64 } from "@/api/public";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
parameter: {
|
||||
'navbar': '1',
|
||||
'return': '1',
|
||||
'title': '拼团海报',
|
||||
'color': true,
|
||||
'class': '0'
|
||||
},
|
||||
type: 0,
|
||||
id: 0,
|
||||
image: '',
|
||||
from:'',
|
||||
storeCombination: {},
|
||||
qrcodeSize: 600,
|
||||
posterbackgd: '/static/images/canbj.png',
|
||||
PromotionCode: '',//二维码
|
||||
canvasStatus: false,
|
||||
imgTop: '' //商品图base64位
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef MP
|
||||
this.from = 'routine'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.from = 'wechat'
|
||||
// #endif
|
||||
var that = this;
|
||||
if (options.hasOwnProperty('type') && options.hasOwnProperty('id')) {
|
||||
this.type = options.type
|
||||
this.id = options.id
|
||||
if (options.type == 1) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '砍价海报'
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '拼团海报'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return app.Tips({
|
||||
title: '参数错误',
|
||||
icon: 'none'
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getPosterInfo();
|
||||
},
|
||||
methods: {
|
||||
getPosterInfo: function() {
|
||||
var that = this,url = '';
|
||||
let data = {
|
||||
pinkId: parseFloat(that.id),
|
||||
from: that.from
|
||||
};
|
||||
if (that.type == 1) {
|
||||
|
||||
} else {
|
||||
this.getCombinationPink();
|
||||
}
|
||||
},
|
||||
//拼团信息
|
||||
getCombinationPink: function() {
|
||||
var that = this;
|
||||
getCombinationPink(this.id)
|
||||
.then(res => {
|
||||
this.storeCombination = res.data;
|
||||
this.getImageBase64(res.data.storeCombination.image);
|
||||
// #ifdef H5
|
||||
that.make(res.data.userInfo.uid);
|
||||
// #endif
|
||||
})
|
||||
.catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
uni.redirectTo({
|
||||
success(){},
|
||||
fail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
getImageBase64:function(images){
|
||||
let that = this;
|
||||
imageBase64({url:images}).then(res=>{
|
||||
that.imgTop = res.data.code
|
||||
})
|
||||
},
|
||||
// 生成二维码；
|
||||
make(uid) {
|
||||
let href = location.protocol + '//' + window.location.host + '/pages/activity/goods_combination_status/index?id=' + this.id + "&spread=" + uid;
|
||||
uQRCode.make({
|
||||
canvasId: 'qrcode',
|
||||
text: href,
|
||||
size: this.qrcodeSize,
|
||||
margin: 10,
|
||||
success: res => {
|
||||
this.PromotionCode = res;
|
||||
let arrImages = [this.posterbackgd, this.imgTop, this.PromotionCode];
|
||||
let storeName = this.storeCombination.storeCombination.title;
|
||||
let price = this.storeCombination.storeCombination.price;
|
||||
let people = this.storeCombination.storeCombination.people;
|
||||
let otPrice = this.storeCombination.storeCombination.otPrice;
|
||||
let count = this.storeCombination.count;
|
||||
setTimeout(() => {
|
||||
this.PosterCanvas(arrImages, storeName, price, people,otPrice,count);
|
||||
}, 300);
|
||||
},
|
||||
complete: () => {
|
||||
},
|
||||
fail:res=>{
|
||||
this.$util.Tips({
|
||||
title: '海报二维码生成失败！'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 生成海报
|
||||
PosterCanvas:function(arrImages, storeName, price, people,otPrice,count){
|
||||
uni.showLoading({
|
||||
title: '海报生成中',
|
||||
mask: true
|
||||
});
|
||||
let context = uni.createCanvasContext('firstCanvas')
|
||||
context.clearRect(0, 0, 0, 0);
|
||||
let that = this;
|
||||
uni.getImageInfo({
|
||||
src: arrImages[0],
|
||||
success: function (image) {
|
||||
context.drawImage(arrImages[0], 0, 0, 750, 1190);
|
||||
context.setFontSize(36);
|
||||
context.setTextAlign('center');
|
||||
context.setFillStyle('#282828');
|
||||
let maxText = 20;
|
||||
let text = storeName;
|
||||
let topText = '';
|
||||
let bottomText = '';
|
||||
let len = text.length;
|
||||
if(len>maxText*2){
|
||||
text = text.slice(0,maxText*2-4)+'......';
|
||||
topText = text.slice(0,maxText-1);
|
||||
bottomText = text.slice(maxText-1,len);
|
||||
}else{
|
||||
if(len>maxText){
|
||||
topText = text.slice(0,maxText-1);
|
||||
bottomText = text.slice(maxText-1,len);
|
||||
}else{
|
||||
topText = text;
|
||||
bottomText = '';
|
||||
}
|
||||
}
|
||||
context.fillText(topText, 750/2, 60);
|
||||
context.fillText(bottomText, 750/2, 100);
|
||||
|
||||
context.drawImage(arrImages[1], 150, 350, 450, 450);
|
||||
context.save();
|
||||
context.drawImage(arrImages[2], 300, 950, 140, 140);
|
||||
context.restore();
|
||||
|
||||
context.setFontSize(72);
|
||||
context.setFillStyle('#fc4141');
|
||||
context.fillText(price, 250, 210);
|
||||
|
||||
context.setFontSize(32);
|
||||
context.setFillStyle('#FFFFFF');
|
||||
context.fillText( people+'人团', 538, 198);
|
||||
|
||||
|
||||
context.setFontSize(26);
|
||||
context.setFillStyle('#3F3F3F');
|
||||
context.setTextAlign('center');
|
||||
context.fillText( '原价：￥'+otPrice +' 还差 ' + count + '人 拼团成功', 750 / 2, 275);
|
||||
|
||||
context.draw(true,function(){
|
||||
uni.canvasToTempFilePath({
|
||||
destWidth: 750,
|
||||
destHeight: 1190,
|
||||
canvasId: 'firstCanvas',
|
||||
fileType: 'jpg',
|
||||
success: function(res) {
|
||||
// 在H5平台下，tempFilePath 为 base64
|
||||
uni.hideLoading();
|
||||
that.imagePath = res.tempFilePath;
|
||||
that.canvasStatus = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
that.$util.Tips({
|
||||
title: '无法获取图片信息'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
showImage: function() {
|
||||
var that = this;
|
||||
let imgArr = this.image.split(',')
|
||||
uni.previewImage({
|
||||
urls: imgArr,
|
||||
longPressActions: {
|
||||
itemList: ['发送给朋友', '保存图片', '收藏'],
|
||||
success: function(data) {
|
||||
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err.errMsg);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #d22516 !important;
|
||||
}
|
||||
.canvas {
|
||||
position:fixed;
|
||||
z-index: -5;
|
||||
opacity: 0;
|
||||
}
|
||||
.poster-poster .tip {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
color: #e8c787;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.poster-poster .tip .iconfont {
|
||||
font-size: 36rpx;
|
||||
vertical-align: -4rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue {
|
||||
width: 690rpx;
|
||||
height: 1130rpx;
|
||||
margin: 0 auto 50rpx auto;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 2.0 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 30 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 2.0 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.6 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.3 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.3 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.4 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.5 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 26 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 1.2 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 4.4 KiB |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 174 B |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 686 B |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 929 B |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 145 B |
TEMPAT SAMPAH
Binary file not shown.
|
After Width: | Height: | Ukuran: 662 B |
Reference in New Issue
Block a user