mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-03-13 23:31:12 +00:00
【模版目录】更新移动端模版
This commit is contained in:
吴昊天
parent
f078b62769
commit
2ef2c3d160
@ -1,286 +1,286 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='coupon-list-window' :class='coupon.coupon==true?"on":""'>
|
||||
<view v-if="coupon.count" class="nav acea-row row-around">
|
||||
<view v-if="coupon.count[2]" :class="['acea-row', 'row-middle', coupon.type === 2 ? 'on' : '']"
|
||||
@click="setType(2)">{{$t(`商品券`)}}</view>
|
||||
<view v-if="coupon.count[1]" :class="['acea-row', 'row-middle', coupon.type === 1 ? 'on' : '']"
|
||||
@click="setType(1)">{{$t(`品类券`)}}</view>
|
||||
<view v-if="coupon.count[0]" :class="['acea-row', 'row-middle', coupon.type === 0 ? 'on' : '']"
|
||||
@click="setType(0)">{{$t(`通用券`)}}</view>
|
||||
</view>
|
||||
<view class='title' v-else>{{$t(`优惠券`)}}<text class='iconfont icon-guanbi' @click='close'></text></view>
|
||||
<view v-if="coupon.count" class="occupy"></view>
|
||||
<view class='coupon-list' v-if="coupon.list.length">
|
||||
<view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list"
|
||||
@click="getCouponUser(index,item.id)" :key='index' :class="{svip: item.receive_type === 4}">
|
||||
<view class="moneyCon acea-row row-center-wrapper">
|
||||
<view class='money acea-row row-column row-center-wrapper'
|
||||
:class='item.is_use >= item.receive_limit && coupon.count?"moneyGray":""'>
|
||||
<view>{{$t(`￥`)}}<text class='num'>{{item.coupon_price}}</text></view>
|
||||
<view class="pic-num" v-if="item.use_min_price > 0">
|
||||
{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="pic-num" v-else>{{$t(`无门槛券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='condition line2' :class="coupon.count?'':'order'">
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-if='item.type===0'>{{$t(`通用券`)}}</span>
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-else-if='item.type===1'>{{$t(`品类券`)}}</span>
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-else>{{$t(`商品券`)}}</span>
|
||||
<image src='../../static/images/fvip.png' class="pic" v-if="item.receive_type===4"></image>
|
||||
<span class='name'>{{$t(item.title)}}</span>
|
||||
</view>
|
||||
<view class='data acea-row row-between-wrapper'>
|
||||
<view v-if="item.coupon_time">{{$t(`领取后`)}}{{item.coupon_time}}{{$t(`天内可用`)}}</view>
|
||||
<view v-else>{{ item.start_use_time ? item.start_use_time + "-" : ""}}{{ item.end_use_time }}</view>
|
||||
<view v-if="coupon.count">
|
||||
<view class='bnt gray' v-if="item.is_use >= item.receive_limit">
|
||||
{{item.use_title || $t(`已领取`)}}</view>
|
||||
<view class='bnt bg-color' v-else>{{coupon.statusTile || $t(`立即领取`)}}</view>
|
||||
</view>
|
||||
<view v-else class="orderCou">
|
||||
<view class="iconfont icon-xuanzhong11"
|
||||
:class="item.receive_type === 4?'svip':'font-num'" v-if="item.is_use"></view>
|
||||
<view class="iconfont icon-weixuan" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无优惠券 -->
|
||||
<view class='pictrue' v-else>
|
||||
<image :src="imgHost + '/statics/images/noCoupon.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='coupon.coupon==false' @click='close'></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
setCouponReceive
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
props: {
|
||||
//打开状态 0=领取优惠券,1=使用优惠券
|
||||
openType: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
coupon: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
type: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close: function() {
|
||||
this.$emit('ChangCouponsClone');
|
||||
this.type = 0;
|
||||
},
|
||||
getCouponUser: function(index, id) {
|
||||
let that = this;
|
||||
let list = that.coupon.list;
|
||||
if (list[index].is_use >= list[index].receive_limit && this.openType == 0) return true;
|
||||
switch (this.openType) {
|
||||
case 0:
|
||||
//领取优惠券
|
||||
setCouponReceive(id).then(res => {
|
||||
that.$emit('ChangCouponsUseState', index);
|
||||
that.$util.Tips({
|
||||
title: "领取成功"
|
||||
});
|
||||
// that.$emit('ChangCoupons', list[index]);
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
that.$emit('ChangCoupons', index);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setType: function(type) {
|
||||
this.type = type;
|
||||
this.$emit('tabCouponType', type);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.orderCou {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
|
||||
.orderCou .iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.orderCou .svip {
|
||||
color: #EDBB75;
|
||||
}
|
||||
|
||||
.coupon-list .item .text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition.order {
|
||||
width: 350rpx;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list .text .condition .pic {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list .text .condition .name {
|
||||
vertical-align: middle;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-list-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 999;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
}
|
||||
|
||||
.coupon-list-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.coupon-list-window .title {
|
||||
height: 124rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 124rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-list-window .title .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 35rpx;
|
||||
color: #8a8a8a;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list {
|
||||
margin: 0 0 50rpx 0;
|
||||
height: 721rpx;
|
||||
padding-top: 28rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.coupon-list-window .pictrue {
|
||||
width: 414rpx;
|
||||
height: 336rpx;
|
||||
margin: 192rpx auto 243rpx auto;
|
||||
}
|
||||
|
||||
.coupon-list-window .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pic-num {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.line-title {
|
||||
width: 70rpx;
|
||||
height: 32rpx !important;
|
||||
padding: 0 10rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
background: var(--view-minorColorT);
|
||||
border: 1px solid var(--view-theme);
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: var(--view-theme);
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line-title.gray {
|
||||
border-color: #C1C1C1 !important;
|
||||
color: #C1C1C1 !important;
|
||||
background-color: #F7F7F7 !important;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 106rpx;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
border-top-left-radius: 16rpx;
|
||||
border-top-right-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.nav .acea-row {
|
||||
border-top: 5rpx solid transparent;
|
||||
border-bottom: 5rpx solid transparent;
|
||||
}
|
||||
|
||||
.nav .acea-row.on {
|
||||
border-bottom-color: var(--view-theme);
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.nav .acea-row:only-child {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.occupy {
|
||||
height: 106rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item {
|
||||
margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.coupon-list .item .money {
|
||||
font-weight: normal;
|
||||
}
|
||||
<template>
|
||||
<view>
|
||||
<view class='coupon-list-window' :class='coupon.coupon==true?"on":""'>
|
||||
<view v-if="coupon.count" class="nav acea-row row-around">
|
||||
<view v-if="coupon.count[2]" :class="['acea-row', 'row-middle', coupon.type === 2 ? 'on' : '']"
|
||||
@click="setType(2)">{{$t(`商品券`)}}</view>
|
||||
<view v-if="coupon.count[1]" :class="['acea-row', 'row-middle', coupon.type === 1 ? 'on' : '']"
|
||||
@click="setType(1)">{{$t(`品类券`)}}</view>
|
||||
<view v-if="coupon.count[0]" :class="['acea-row', 'row-middle', coupon.type === 0 ? 'on' : '']"
|
||||
@click="setType(0)">{{$t(`通用券`)}}</view>
|
||||
</view>
|
||||
<view class='title' v-else>{{$t(`优惠券`)}}<text class='iconfont icon-guanbi' @click='close'></text></view>
|
||||
<view v-if="coupon.count" class="occupy"></view>
|
||||
<view class='coupon-list' v-if="coupon.list.length">
|
||||
<view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list"
|
||||
@click="getCouponUser(index,item.id)" :key='index' :class="{svip: item.receive_type === 4}">
|
||||
<view class="moneyCon acea-row row-center-wrapper">
|
||||
<view class='money acea-row row-column row-center-wrapper'
|
||||
:class='item.is_use >= item.receive_limit && coupon.count?"moneyGray":""'>
|
||||
<view>{{$t(`￥`)}}<text class='num'>{{item.coupon_price}}</text></view>
|
||||
<view class="pic-num" v-if="item.use_min_price > 0">
|
||||
{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="pic-num" v-else>{{$t(`无门槛券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='condition line2' :class="coupon.count?'':'order'">
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-if='item.type===0'>{{$t(`通用券`)}}</span>
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-else-if='item.type===1'>{{$t(`品类券`)}}</span>
|
||||
<span class='line-title' :class='item.is_use >= item.receive_limit && coupon.count?"gray":""'
|
||||
v-else>{{$t(`商品券`)}}</span>
|
||||
<image src='../../static/images/fvip.png' class="pic" v-if="item.receive_type===4"></image>
|
||||
<span class='name'>{{$t(item.title)}}</span>
|
||||
</view>
|
||||
<view class='data acea-row row-between-wrapper'>
|
||||
<view v-if="item.coupon_time">{{$t(`领取后`)}}{{item.coupon_time}}{{$t(`天内可用`)}}</view>
|
||||
<view v-else>{{ item.start_use_time ? item.start_use_time + "-" : ""}}{{ item.end_use_time }}</view>
|
||||
<view v-if="coupon.count">
|
||||
<view class='bnt gray' v-if="item.is_use >= item.receive_limit">
|
||||
{{item.use_title || $t(`已领取`)}}</view>
|
||||
<view class='bnt bg-color' v-else>{{coupon.statusTile || $t(`立即领取`)}}</view>
|
||||
</view>
|
||||
<view v-else class="orderCou">
|
||||
<view class="iconfont icon-xuanzhong11"
|
||||
:class="item.receive_type === 4?'svip':'font-num'" v-if="item.is_use"></view>
|
||||
<view class="iconfont icon-weixuan" v-else></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无优惠券 -->
|
||||
<view class='pictrue' v-else>
|
||||
<image :src="imgHost + '/statics/images/noCoupon.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class='mask' catchtouchmove="true" :hidden='coupon.coupon==false' @click='close'></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
setCouponReceive
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
props: {
|
||||
//打开状态 0=领取优惠券,1=使用优惠券
|
||||
openType: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
coupon: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
type: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close: function() {
|
||||
this.$emit('ChangCouponsClone');
|
||||
this.type = 0;
|
||||
},
|
||||
getCouponUser: function(index, id) {
|
||||
let that = this;
|
||||
let list = that.coupon.list;
|
||||
if (list[index].is_use >= list[index].receive_limit && this.openType == 0) return true;
|
||||
switch (this.openType) {
|
||||
case 0:
|
||||
//领取优惠券
|
||||
setCouponReceive(id).then(res => {
|
||||
that.$emit('ChangCouponsUseState', index);
|
||||
that.$util.Tips({
|
||||
title: "领取成功"
|
||||
});
|
||||
// that.$emit('ChangCoupons', list[index]);
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
that.$emit('ChangCoupons', index);
|
||||
break;
|
||||
}
|
||||
},
|
||||
setType: function(type) {
|
||||
this.type = type;
|
||||
this.$emit('tabCouponType', type);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.orderCou {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
|
||||
.orderCou .iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.orderCou .svip {
|
||||
color: #EDBB75;
|
||||
}
|
||||
|
||||
.coupon-list .item .text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition.order {
|
||||
width: 350rpx;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list .text .condition .pic {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list .text .condition .name {
|
||||
vertical-align: middle;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-list-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
z-index: 999;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
}
|
||||
|
||||
.coupon-list-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.coupon-list-window .title {
|
||||
height: 124rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 124rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.coupon-list-window .title .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 35rpx;
|
||||
color: #8a8a8a;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.coupon-list-window .coupon-list {
|
||||
margin: 0 0 50rpx 0;
|
||||
height: 721rpx;
|
||||
padding-top: 28rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.coupon-list-window .pictrue {
|
||||
width: 414rpx;
|
||||
height: 336rpx;
|
||||
margin: 192rpx auto 243rpx auto;
|
||||
}
|
||||
|
||||
.coupon-list-window .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pic-num {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.line-title {
|
||||
width: 70rpx;
|
||||
height: 32rpx !important;
|
||||
padding: 0 10rpx;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
background: var(--view-minorColorT);
|
||||
border: 1px solid var(--view-theme);
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx;
|
||||
color: var(--view-theme);
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line-title.gray {
|
||||
border-color: #C1C1C1 !important;
|
||||
color: #C1C1C1 !important;
|
||||
background-color: #F7F7F7 !important;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 106rpx;
|
||||
border-bottom: 2rpx solid #F5F5F5;
|
||||
border-top-left-radius: 16rpx;
|
||||
border-top-right-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.nav .acea-row {
|
||||
border-top: 5rpx solid transparent;
|
||||
border-bottom: 5rpx solid transparent;
|
||||
}
|
||||
|
||||
.nav .acea-row.on {
|
||||
border-bottom-color: var(--view-theme);
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.nav .acea-row:only-child {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.occupy {
|
||||
height: 106rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item {
|
||||
margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.coupon-list .item .money {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,227 +1,227 @@
|
||||
<template>
|
||||
<view class="easy-loadimage" :id="uid">
|
||||
<image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg"
|
||||
:class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
|
||||
@load="handleImgLoad" @error="handleImgError">
|
||||
</image>
|
||||
<view class="loadfail-img" v-else-if="isLoadError"></view>
|
||||
<view :class="['loading-img','spin-circle',loadingMode]" v-show="!showImg&&!isLoadError"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
throttle
|
||||
} from '@/libs/uniApi';
|
||||
<template>
|
||||
<view class="easy-loadimage" :id="uid">
|
||||
<image class="origin-img" :src="imageSrc" mode="aspectFill" v-if="loadImg&&!isLoadError" v-show="showImg"
|
||||
:class="{'no-transition':!openTransition,'show-transition':showTransition&&openTransition}"
|
||||
@load="handleImgLoad" @error="handleImgError">
|
||||
</image>
|
||||
<view class="loadfail-img" v-else-if="isLoadError"></view>
|
||||
<view :class="['loading-img','spin-circle',loadingMode]" v-show="!showImg&&!isLoadError"></view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
throttle
|
||||
} from '@/libs/uniApi';
|
||||
|
||||
// 生成全局唯一id
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
let r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
})
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
imageSrc: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
loadingMode: {
|
||||
type: String,
|
||||
default: 'looming-gray'
|
||||
},
|
||||
openTransition: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
viewHeight: {
|
||||
type: Number,
|
||||
default () {
|
||||
return uni.getSystemInfoSync().windowHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const that = this;
|
||||
return {
|
||||
// uid:'',
|
||||
uid: 'uid-' + generateUUID(),
|
||||
loadImg: false,
|
||||
showImg: false,
|
||||
isLoadError: false,
|
||||
showTransition: false,
|
||||
scrollFn: throttle(function() {
|
||||
// 加载img时才执行滚动监听判断是否可加载
|
||||
if (that.loadImg || that.isLoadError) return;
|
||||
const id = that.uid
|
||||
const query = uni.createSelectorQuery().in(that);
|
||||
query.select('#' + id).boundingClientRect(data => {
|
||||
if (!data) return;
|
||||
if (data.top - that.viewHeight < 0) {
|
||||
that.loadImg = !!that.imageSrc;
|
||||
that.isLoadError = !that.loadImg;
|
||||
}
|
||||
}).exec()
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$nextTick(this.onScroll)
|
||||
},
|
||||
handleImgLoad(e) {
|
||||
// console.log('success');
|
||||
this.showImg = true;
|
||||
// this.$nextTick(function(){
|
||||
// this.showTransition = true
|
||||
// })
|
||||
setTimeout(() => {
|
||||
this.showTransition = true
|
||||
}, 50)
|
||||
},
|
||||
handleImgError(e) {
|
||||
// console.log('fail');
|
||||
this.isLoadError = true;
|
||||
},
|
||||
onScroll() {
|
||||
this.scrollFn();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
uni.$on('scroll', this.scrollFn);
|
||||
this.onScroll()
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('scroll', this.scrollFn);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.easy-loadimage {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.border-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 360rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 官方优化图片tips */
|
||||
image {
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
/* 渐变过渡效果处理 */
|
||||
image.origin-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
max-height: 360rpx;
|
||||
}
|
||||
|
||||
image.origin-img.show-transition {
|
||||
transition: opacity .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
image.origin-img.no-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 渐变过渡效果处理 */
|
||||
image.border-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
max-height: 360rpx;
|
||||
}
|
||||
|
||||
image.border-img.show-transition {
|
||||
transition: opacity .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
image.border-img.no-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 加载失败、加载中的占位图样式控制 */
|
||||
.loadfail-img {
|
||||
height: 100%;
|
||||
background: url('~@/static/easy-loadimage/loadfail.png') no-repeat center;
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 转圈 */
|
||||
.spin-circle {
|
||||
background: url('~@/static/easy-loadimage/loading.png') no-repeat center;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
// 生成全局唯一id
|
||||
function generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
let r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
})
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
imageSrc: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
loadingMode: {
|
||||
type: String,
|
||||
default: 'looming-gray'
|
||||
},
|
||||
openTransition: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
viewHeight: {
|
||||
type: Number,
|
||||
default () {
|
||||
return uni.getSystemInfoSync().windowHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const that = this;
|
||||
return {
|
||||
// uid:'',
|
||||
uid: 'uid-' + generateUUID(),
|
||||
loadImg: false,
|
||||
showImg: false,
|
||||
isLoadError: false,
|
||||
showTransition: false,
|
||||
scrollFn: throttle(function() {
|
||||
// 加载img时才执行滚动监听判断是否可加载
|
||||
if (that.loadImg || that.isLoadError) return;
|
||||
const id = that.uid
|
||||
const query = uni.createSelectorQuery().in(that);
|
||||
query.select('#' + id).boundingClientRect(data => {
|
||||
if (!data) return;
|
||||
if (data.top - that.viewHeight < 0) {
|
||||
that.loadImg = !!that.imageSrc;
|
||||
that.isLoadError = !that.loadImg;
|
||||
}
|
||||
}).exec()
|
||||
}, 200)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$nextTick(this.onScroll)
|
||||
},
|
||||
handleImgLoad(e) {
|
||||
// console.log('success');
|
||||
this.showImg = true;
|
||||
// this.$nextTick(function(){
|
||||
// this.showTransition = true
|
||||
// })
|
||||
setTimeout(() => {
|
||||
this.showTransition = true
|
||||
}, 50)
|
||||
},
|
||||
handleImgError(e) {
|
||||
// console.log('fail');
|
||||
this.isLoadError = true;
|
||||
},
|
||||
onScroll() {
|
||||
this.scrollFn();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
uni.$on('scroll', this.scrollFn);
|
||||
this.onScroll()
|
||||
},
|
||||
beforeDestroy() {
|
||||
uni.$off('scroll', this.scrollFn);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.easy-loadimage {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.border-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 360rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 官方优化图片tips */
|
||||
image {
|
||||
will-change: transform
|
||||
}
|
||||
|
||||
/* 渐变过渡效果处理 */
|
||||
image.origin-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
max-height: 360rpx;
|
||||
}
|
||||
|
||||
image.origin-img.show-transition {
|
||||
transition: opacity .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
image.origin-img.no-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 渐变过渡效果处理 */
|
||||
image.border-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
max-height: 360rpx;
|
||||
}
|
||||
|
||||
image.border-img.show-transition {
|
||||
transition: opacity .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
image.border-img.no-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 加载失败、加载中的占位图样式控制 */
|
||||
.loadfail-img {
|
||||
height: 100%;
|
||||
background: url('~@/static/easy-loadimage/loadfail.png') no-repeat center;
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
.loading-img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 转圈 */
|
||||
.spin-circle {
|
||||
background: url('~@/static/easy-loadimage/loading.png') no-repeat center;
|
||||
background-size: 60%;
|
||||
}
|
||||
|
||||
|
||||
/* 动态灰色若隐若现 */
|
||||
.looming-gray {
|
||||
animation: looming-gray 1s infinite linear;
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
@keyframes looming-gray {
|
||||
0% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏1 */
|
||||
.skeleton-1 {
|
||||
background-color: #e3e3e3;
|
||||
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
|
||||
background-size: 100rpx 100%;
|
||||
background-repeat: repeat-y;
|
||||
background-position: 0 0;
|
||||
animation: skeleton-1 .6s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-1 {
|
||||
to {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏2 */
|
||||
.skeleton-2 {
|
||||
background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%, #fefefe 100%);
|
||||
background-size: 400% 400%;
|
||||
background-position: 0 0;
|
||||
animation: skeleton-2 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-2 {
|
||||
to {
|
||||
background-position: -135% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动态灰色若隐若现 */
|
||||
.looming-gray {
|
||||
animation: looming-gray 1s infinite linear;
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
@keyframes looming-gray {
|
||||
0% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: #e3e3e3;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #e3e3e3aa;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏1 */
|
||||
.skeleton-1 {
|
||||
background-color: #e3e3e3;
|
||||
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
|
||||
background-size: 100rpx 100%;
|
||||
background-repeat: repeat-y;
|
||||
background-position: 0 0;
|
||||
animation: skeleton-1 .6s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-1 {
|
||||
to {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏2 */
|
||||
.skeleton-2 {
|
||||
background-image: linear-gradient(-90deg, #fefefe 0%, #e6e6e6 50%, #fefefe 100%);
|
||||
background-size: 400% 400%;
|
||||
background-position: 0 0;
|
||||
animation: skeleton-2 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-2 {
|
||||
to {
|
||||
background-position: -135% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,314 +1,314 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="product-window" :class="{'on':isShow}">
|
||||
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
||||
<view class="mp-data">
|
||||
<image :src="mpData.siteLogo" mode=""></image>
|
||||
<text class="mp-name">{{mpData.siteName}} 申请</text>
|
||||
</view>
|
||||
<view class="trip-msg">
|
||||
<view class="title">
|
||||
{{$t(`获取您的昵称、头像`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`提供具有辨识度的用户中心界面`)}}
|
||||
</view>
|
||||
</view>
|
||||
<form @submit="formSubmit">
|
||||
<view class="edit">
|
||||
<view class="avatar edit-box">
|
||||
<view class="left">
|
||||
<view class="head">{{$t(`头像`)}}</view>
|
||||
<!-- <image :src="userInfo.avatar || defaultAvatar" mode=""></image> -->
|
||||
<view class="avatar-box" v-if="!mp_is_new" @click.stop='uploadpic'>
|
||||
<image :src="userInfo.avatar || defHead"></image>
|
||||
</view>
|
||||
<button v-else class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image :src="userInfo.avatar || defHead"></image>
|
||||
</button>
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou"></view> -->
|
||||
</view>
|
||||
<view class="nickname edit-box">
|
||||
<view class="left">
|
||||
<view class="head">{{$t(`昵称`)}}</view>
|
||||
<view class='input'><input type='nickname' placeholder-class="pl-sty"
|
||||
:placeholder="$t(`请输入昵称`)" name='nickname' :maxlength="16"
|
||||
:value='userInfo.nickname'></input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou"></view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<button class="save" formType="submit" :class="{'open': userInfo.avatar}">
|
||||
{{$t(`保存`)}}
|
||||
</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
<canvas canvas-id="canvas" v-if="canvasStatus"
|
||||
:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
|
||||
<view class="mask" @touchmove.prevent v-if="isShow" @click="closeAttr"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
import Cache from '@/utils/cache';
|
||||
import {
|
||||
userEdit,
|
||||
} from '@/api/user.js';
|
||||
export default {
|
||||
mixins: [colors],
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defHead: require('@/static/images/def_avatar.png'),
|
||||
mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
},
|
||||
mpData: uni.getStorageSync('copyRight'),
|
||||
canvasStatus: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上传文件
|
||||
*
|
||||
*/
|
||||
uploadpic: function() {
|
||||
let that = this;
|
||||
this.canvasStatus = true
|
||||
that.$util.uploadImageChange('upload/image', (res) => {
|
||||
let userInfo = that.userInfo;
|
||||
if (userInfo !== undefined) {
|
||||
that.userInfo.avatar = res.data.url;
|
||||
}
|
||||
this.canvasStatus = false
|
||||
}, (res) => {
|
||||
this.canvasStatus = false
|
||||
}, (res) => {
|
||||
this.canvasWidth = res.w
|
||||
this.canvasHeight = res.h
|
||||
});
|
||||
},
|
||||
// 微信头像获取
|
||||
onChooseAvatar(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
|
||||
this.userInfo.avatar = res.data.url
|
||||
}, (err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
closeAttr: function() {
|
||||
this.$emit('closeEdit');
|
||||
},
|
||||
/**
|
||||
* 提交修改
|
||||
*/
|
||||
formSubmit(e) {
|
||||
console.log(e, 'eeeeee')
|
||||
let that = this
|
||||
if (!this.userInfo.avatar) return that.$util.Tips({
|
||||
title: that.$t(`请上传头像`)
|
||||
});
|
||||
if (!e.detail.value.nickname) return that.$util.Tips({
|
||||
title: that.$t(`请输入昵称`)
|
||||
});
|
||||
this.userInfo.nickname = e.detail.value.nickname
|
||||
userEdit(this.userInfo).then(res => {
|
||||
this.$emit('editSuccess')
|
||||
return that.$util.Tips({
|
||||
title: res.msg,
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 3
|
||||
});
|
||||
}).catch(msg => {
|
||||
return that.$util.Tips({
|
||||
title: msg || that.$t(`保存失败`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.pl-sty {
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.product-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.mask {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.product-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding: 38rpx 40rpx;
|
||||
padding-bottom: 80rpx;
|
||||
padding-bottom: calc(80rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(80rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
|
||||
.icon-guanbi {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mp-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.mp-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.trip-msg {
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.trip {
|
||||
font-size: 26rpx;
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
|
||||
.avatar {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
.input {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding: 22rpx 0;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.head {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
white-space: nowrap;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiangyou {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.save {
|
||||
border: 1px solid #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 368rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 52rpx;
|
||||
background-color: #F5F5F5;
|
||||
color: #ccc;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.save.open {
|
||||
border: 1px solid #fff;
|
||||
background-color: #07C160;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="product-window" :class="{'on':isShow}">
|
||||
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
||||
<view class="mp-data">
|
||||
<image :src="mpData.siteLogo" mode=""></image>
|
||||
<text class="mp-name">{{mpData.siteName}} 申请</text>
|
||||
</view>
|
||||
<view class="trip-msg">
|
||||
<view class="title">
|
||||
{{$t(`获取您的昵称、头像`)}}
|
||||
</view>
|
||||
<view class="trip">
|
||||
{{$t(`提供具有辨识度的用户中心界面`)}}
|
||||
</view>
|
||||
</view>
|
||||
<form @submit="formSubmit">
|
||||
<view class="edit">
|
||||
<view class="avatar edit-box">
|
||||
<view class="left">
|
||||
<view class="head">{{$t(`头像`)}}</view>
|
||||
<!-- <image :src="userInfo.avatar || defaultAvatar" mode=""></image> -->
|
||||
<view class="avatar-box" v-if="!mp_is_new" @click.stop='uploadpic'>
|
||||
<image :src="userInfo.avatar || defHead"></image>
|
||||
</view>
|
||||
<button v-else class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||||
<image :src="userInfo.avatar || defHead"></image>
|
||||
</button>
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou"></view> -->
|
||||
</view>
|
||||
<view class="nickname edit-box">
|
||||
<view class="left">
|
||||
<view class="head">{{$t(`昵称`)}}</view>
|
||||
<view class='input'><input type='nickname' placeholder-class="pl-sty"
|
||||
:placeholder="$t(`请输入昵称`)" name='nickname' :maxlength="16"
|
||||
:value='userInfo.nickname'></input>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="iconfont icon-xiangyou"></view> -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="bottom">
|
||||
<button class="save" formType="submit" :class="{'open': userInfo.avatar}">
|
||||
{{$t(`保存`)}}
|
||||
</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
<canvas canvas-id="canvas" v-if="canvasStatus"
|
||||
:style="{width: canvasWidth + 'px', height: canvasHeight + 'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
|
||||
<view class="mask" @touchmove.prevent v-if="isShow" @click="closeAttr"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
import Cache from '@/utils/cache';
|
||||
import {
|
||||
userEdit,
|
||||
} from '@/api/user.js';
|
||||
export default {
|
||||
mixins: [colors],
|
||||
props: {
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defHead: require('@/static/images/def_avatar.png'),
|
||||
mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
},
|
||||
mpData: uni.getStorageSync('copyRight'),
|
||||
canvasStatus: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上传文件
|
||||
*
|
||||
*/
|
||||
uploadpic: function() {
|
||||
let that = this;
|
||||
this.canvasStatus = true
|
||||
that.$util.uploadImageChange('upload/image', (res) => {
|
||||
let userInfo = that.userInfo;
|
||||
if (userInfo !== undefined) {
|
||||
that.userInfo.avatar = res.data.url;
|
||||
}
|
||||
this.canvasStatus = false
|
||||
}, (res) => {
|
||||
this.canvasStatus = false
|
||||
}, (res) => {
|
||||
this.canvasWidth = res.w
|
||||
this.canvasHeight = res.h
|
||||
});
|
||||
},
|
||||
// 微信头像获取
|
||||
onChooseAvatar(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
|
||||
this.userInfo.avatar = res.data.url
|
||||
}, (err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
closeAttr: function() {
|
||||
this.$emit('closeEdit');
|
||||
},
|
||||
/**
|
||||
* 提交修改
|
||||
*/
|
||||
formSubmit(e) {
|
||||
console.log(e, 'eeeeee')
|
||||
let that = this
|
||||
if (!this.userInfo.avatar) return that.$util.Tips({
|
||||
title: that.$t(`请上传头像`)
|
||||
});
|
||||
if (!e.detail.value.nickname) return that.$util.Tips({
|
||||
title: that.$t(`请输入昵称`)
|
||||
});
|
||||
this.userInfo.nickname = e.detail.value.nickname
|
||||
userEdit(this.userInfo).then(res => {
|
||||
this.$emit('editSuccess')
|
||||
return that.$util.Tips({
|
||||
title: res.msg,
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 3
|
||||
});
|
||||
}).catch(msg => {
|
||||
return that.$util.Tips({
|
||||
title: msg || that.$t(`保存失败`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.pl-sty {
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.product-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.mask {
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.product-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 1000;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding: 38rpx 40rpx;
|
||||
padding-bottom: 80rpx;
|
||||
padding-bottom: calc(80rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(80rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
|
||||
.icon-guanbi {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mp-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.mp-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.trip-msg {
|
||||
padding-bottom: 32rpx;
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.trip {
|
||||
font-size: 26rpx;
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
|
||||
.avatar {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
.input {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
input {
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
padding: 22rpx 0;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.head {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
white-space: nowrap;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiangyou {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.save {
|
||||
border: 1px solid #F5F5F5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 368rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 52rpx;
|
||||
background-color: #F5F5F5;
|
||||
color: #ccc;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.save.open {
|
||||
border: 1px solid #fff;
|
||||
background-color: #07C160;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,156 +1,156 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<swiper class="swiper" :autoplay="autoplay" indicator-dots="true" indicator-color="rgba(255,255,255,0.6)"
|
||||
:duration="duration" v-if="advData.type == 'pic' && advData.value.length">
|
||||
<swiper-item v-for="(item,index) in advData.value" :key="index" @click="jump(item.link)">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper-item-img">
|
||||
<image :src="item.img" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="video-box" v-else-if="advData.type == 'video' && advData.video_link">
|
||||
<video class="vid" :src="advData.video_link" :autoplay="true" :loop="true" :muted="true"
|
||||
:controls="false"></video>
|
||||
</view>
|
||||
<view class="jump-over" @click.stop="launchFlag()">{{$t(`跳过`)}}<text v-if="closeType == 1">{{times}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
duration: 500,
|
||||
jumpover: this.$t(`跳过`),
|
||||
experience: this.$t(`立即体验`),
|
||||
timecount: undefined,
|
||||
times: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
advData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// 1 倒计时 2 手动关闭(预留)
|
||||
closeType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.timer()
|
||||
<template>
|
||||
<view class="content">
|
||||
<swiper class="swiper" :autoplay="autoplay" indicator-dots="true" indicator-color="rgba(255,255,255,0.6)"
|
||||
:duration="duration" v-if="advData.type == 'pic' && advData.value.length">
|
||||
<swiper-item v-for="(item,index) in advData.value" :key="index" @click="jump(item.link)">
|
||||
<view class="swiper-item">
|
||||
<view class="swiper-item-img">
|
||||
<image :src="item.img" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="video-box" v-else-if="advData.type == 'video' && advData.video_link">
|
||||
<video class="vid" :src="advData.video_link" :autoplay="true" :loop="true" :muted="true"
|
||||
:controls="false"></video>
|
||||
</view>
|
||||
<view class="jump-over" @click.stop="launchFlag()">{{$t(`跳过`)}}<text v-if="closeType == 1">{{times}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoplay: false,
|
||||
duration: 500,
|
||||
jumpover: this.$t(`跳过`),
|
||||
experience: this.$t(`立即体验`),
|
||||
timecount: undefined,
|
||||
times: 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
advData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
// 1 倒计时 2 手动关闭(预留)
|
||||
closeType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.timer()
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.timecount)
|
||||
},
|
||||
methods: {
|
||||
timer() {
|
||||
this.times = this.advData.time
|
||||
let t = this.advData.time || 5
|
||||
this.timecount = setInterval(() => {
|
||||
t--
|
||||
this.times = t
|
||||
if (t <= 0) {
|
||||
clearInterval(this.timecount)
|
||||
this.launchFlag()
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
launchFlag() {
|
||||
clearInterval(this.timecount)
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
jump(url) {
|
||||
if (url) {
|
||||
clearInterval(this.timecount)
|
||||
if (url.indexOf("http") != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${url}`
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: url,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-items: flex-end;
|
||||
flex-direction: column-reverse
|
||||
}
|
||||
|
||||
.swiper-item-img {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-item-img image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jump-over {
|
||||
position: absolute;
|
||||
height: 45rpx;
|
||||
line-height: 45rpx;
|
||||
padding: 0 15rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #b09e9a;
|
||||
border: 1px solid #b09e9a;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.jump-over {
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.vid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
timer() {
|
||||
this.times = this.advData.time
|
||||
let t = this.advData.time || 5
|
||||
this.timecount = setInterval(() => {
|
||||
t--
|
||||
this.times = t
|
||||
if (t <= 0) {
|
||||
clearInterval(this.timecount)
|
||||
this.launchFlag()
|
||||
}
|
||||
}, 1000)
|
||||
},
|
||||
launchFlag() {
|
||||
clearInterval(this.timecount)
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
jump(url) {
|
||||
if (url) {
|
||||
clearInterval(this.timecount)
|
||||
if (url.indexOf("http") != -1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/annex/web_view/index?url=${url}`
|
||||
});
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: url,
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-items: flex-end;
|
||||
flex-direction: column-reverse
|
||||
}
|
||||
|
||||
.swiper-item-img {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-item-img image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jump-over {
|
||||
position: absolute;
|
||||
height: 45rpx;
|
||||
line-height: 45rpx;
|
||||
padding: 0 15rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #b09e9a;
|
||||
border: 1px solid #b09e9a;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.jump-over {
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
.vid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,188 +1,188 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="list">
|
||||
<view class="product-box">
|
||||
<view class="product-list" v-for="(item, i1) in tmp_data" :key="i1" @click="goGoodsDetail(item)">
|
||||
<view class="product-item">
|
||||
<!-- <image :src="item.image" mode="scaleToFill" fade-show style="width: 100%;"></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<view class="info">
|
||||
<view class="title line2">
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</text>
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</text>
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</text>
|
||||
<text class="tag" v-if="item.checkCoupon">{{$t(`券`)}}</text>
|
||||
{{ item.store_name }}
|
||||
</view>
|
||||
|
||||
<view class="price-box">
|
||||
<view>
|
||||
<text>{{$t(`￥`)}}</text>
|
||||
{{ item.price }}
|
||||
</view>
|
||||
<view class="sales">
|
||||
{{$t(`已售`)}} {{item.sales}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'goodsWaterfall',
|
||||
props: {
|
||||
dataLists: {
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
showLoad: false,
|
||||
tmp_data: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goGoodsDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
that.tmp_data = that.dataLists
|
||||
// that.showLoadFlag()
|
||||
},
|
||||
watch: {
|
||||
dataLists() {
|
||||
this.loaded = []
|
||||
this.loadErr = []
|
||||
this.tmp_data = this.dataLists
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow_item {
|
||||
margin: 15upx;
|
||||
border-radius: 20upx;
|
||||
background: #f4f4f4;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flow_item_con {
|
||||
padding: 10upx 20upx 20upx;
|
||||
}
|
||||
|
||||
.flow_item_title {
|
||||
position: relative;
|
||||
font-size: 32upx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5upx;
|
||||
}
|
||||
|
||||
.flow_item_des {
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.pl10 {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
width: calc(50% - 16rpx);
|
||||
margin: 2rpx 8rpx;
|
||||
|
||||
.product-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
<template>
|
||||
<view>
|
||||
<view class="list">
|
||||
<view class="product-box">
|
||||
<view class="product-list" v-for="(item, i1) in tmp_data" :key="i1" @click="goGoodsDetail(item)">
|
||||
<view class="product-item">
|
||||
<!-- <image :src="item.image" mode="scaleToFill" fade-show style="width: 100%;"></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<view class="info">
|
||||
<view class="title line2">
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</text>
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</text>
|
||||
<text class="tag" v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</text>
|
||||
<text class="tag" v-if="item.checkCoupon">{{$t(`券`)}}</text>
|
||||
{{ item.store_name }}
|
||||
</view>
|
||||
|
||||
<view class="price-box">
|
||||
<view>
|
||||
<text>{{$t(`￥`)}}</text>
|
||||
{{ item.price }}
|
||||
</view>
|
||||
<view class="sales">
|
||||
{{$t(`已售`)}} {{item.sales}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'goodsWaterfall',
|
||||
props: {
|
||||
dataLists: {
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
showLoad: false,
|
||||
tmp_data: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goGoodsDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
that.tmp_data = that.dataLists
|
||||
// that.showLoadFlag()
|
||||
},
|
||||
watch: {
|
||||
dataLists() {
|
||||
this.loaded = []
|
||||
this.loadErr = []
|
||||
this.tmp_data = this.dataLists
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: flex;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow_item {
|
||||
margin: 15upx;
|
||||
border-radius: 20upx;
|
||||
background: #f4f4f4;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flow_item_con {
|
||||
padding: 10upx 20upx 20upx;
|
||||
}
|
||||
|
||||
.flow_item_title {
|
||||
position: relative;
|
||||
font-size: 32upx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5upx;
|
||||
}
|
||||
|
||||
.flow_item_des {
|
||||
font-size: 24upx;
|
||||
}
|
||||
|
||||
.pl10 {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
width: calc(50% - 16rpx);
|
||||
margin: 2rpx 8rpx;
|
||||
|
||||
.product-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding: 14rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 4rpx;
|
||||
border: 1px solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
font-size: 20rpx;
|
||||
padding: 0rpx 4rpx;
|
||||
margin: 10rpx 0;
|
||||
margin-right: 10rpx;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
color: var(--view-priceColor);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// align-items: flex-end;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.sales {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding: 14rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 4rpx;
|
||||
border: 1px solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
font-size: 20rpx;
|
||||
padding: 0rpx 4rpx;
|
||||
margin: 10rpx 0;
|
||||
margin-right: 10rpx;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
color: var(--view-priceColor);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// align-items: flex-end;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.sales {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,84 +1,84 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<text class="acea-row row-center-wrapper cartf iconfont icon-kefu3" :style="{ top: top + 'px'}" @click="goCustomer"
|
||||
@touchmove.stop.prevent="setTouchMove"></text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="routineContact == 0" class="acea-row row-center-wrapper cartf iconfont icon-kefu3"
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove" @click="goCustomer"></view>
|
||||
<button class="acea-row row-center-wrapper cartf iconfont icon-kefu3" open-type='contact'
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove"
|
||||
v-else-if="routineContact==1 && !goodsCon"></button>
|
||||
<button class="acea-row row-center-wrapper cartf iconfont icon-kefu3" open-type='contact'
|
||||
:send-message-title="storeInfo.store_name" :send-message-img="storeInfo.image"
|
||||
:send-message-path="`/pages/goods_details/index?id=${storeInfo.id}`" show-message-card
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove"
|
||||
v-else-if="routineContact==1 && goodsCon"></button>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCustomer
|
||||
} from '@/utils/index.js'
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: "kefuIcon",
|
||||
props: {
|
||||
ids: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
routineContact: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
storeInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
goodsCon: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
top: "480"
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef H5
|
||||
this.top = parseFloat(window.innerHeight) - 200
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
goCustomer() {
|
||||
getCustomer(`/pages/extension/customer_list/chat?productId=${this.ids}`)
|
||||
},
|
||||
setTouchMove(e) {
|
||||
let that = this;
|
||||
if (e.touches[0].clientY < 480 && e.touches[0].clientY > 66) {
|
||||
that.top = e.touches[0].clientY
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cartf {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 3rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50%;
|
||||
font-size: 47rpx;
|
||||
color: #666;
|
||||
position: fixed;
|
||||
right: 15rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
<template>
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<text class="acea-row row-center-wrapper cartf iconfont icon-kefu3" :style="{ top: top + 'px'}" @click="goCustomer"
|
||||
@touchmove.stop.prevent="setTouchMove"></text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<view v-if="routineContact == 0" class="acea-row row-center-wrapper cartf iconfont icon-kefu3"
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove" @click="goCustomer"></view>
|
||||
<button class="acea-row row-center-wrapper cartf iconfont icon-kefu3" open-type='contact'
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove"
|
||||
v-else-if="routineContact==1 && !goodsCon"></button>
|
||||
<button class="acea-row row-center-wrapper cartf iconfont icon-kefu3" open-type='contact'
|
||||
:send-message-title="storeInfo.store_name" :send-message-img="storeInfo.image"
|
||||
:send-message-path="`/pages/goods_details/index?id=${storeInfo.id}`" show-message-card
|
||||
:style="{ top: top + 'px'}" @touchmove.stop.prevent="setTouchMove"
|
||||
v-else-if="routineContact==1 && goodsCon"></button>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getCustomer
|
||||
} from '@/utils/index.js'
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: "kefuIcon",
|
||||
props: {
|
||||
ids: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
routineContact: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
storeInfo: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
goodsCon: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
top: "480"
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// #ifdef H5
|
||||
this.top = parseFloat(window.innerHeight) - 200
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
goCustomer() {
|
||||
getCustomer(`/pages/extension/customer_list/chat?productId=${this.ids}`)
|
||||
},
|
||||
setTouchMove(e) {
|
||||
let that = this;
|
||||
if (e.touches[0].clientY < 480 && e.touches[0].clientY > 66) {
|
||||
that.top = e.touches[0].clientY
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cartf {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 3rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 50%;
|
||||
font-size: 47rpx;
|
||||
color: #666;
|
||||
position: fixed;
|
||||
right: 15rpx;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,412 +1,412 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="product-window"
|
||||
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')">
|
||||
<view class="textpic acea-row row-between-wrapper">
|
||||
<view class="pictrue" @click="showImg()">
|
||||
<image :src="attr.productSelect.image"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="line1">
|
||||
{{ attr.productSelect.store_name }}
|
||||
</view>
|
||||
<view class="money font-color">
|
||||
<view class="acea-row row-middle">
|
||||
{{$t(`￥`)}}<text class="num">{{ attr.productSelect.price }}</text>
|
||||
<text class='vip-money'
|
||||
v-if="is_vip>0 && attr.productSelect.vip_price">{{$t(`￥`)}}{{attr.productSelect.vip_price}}</text>
|
||||
<view class="vipImg" v-if="is_vip>0 && attr.productSelect.vip_price">
|
||||
<image src="../../static/images/svip.gif"></image>
|
||||
</view>
|
||||
</view>
|
||||
<text class="stock" v-if='isShow && !type'>{{$t(`库存`)}}: {{ attr.productSelect.stock }}</text>
|
||||
<text class='stock'
|
||||
v-if="limitNum">{{type ? $t(`库存`) : $t(`限量`)}}:{{type ? attr.productSelect.quota : limitNum + unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
||||
</view>
|
||||
<view class="rollTop">
|
||||
<view class="productWinList">
|
||||
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
|
||||
<view class="title">{{ $t(item.attr_name) }}</view>
|
||||
<view class="listn acea-row row-middle">
|
||||
<view class="itemn" :class="item.index === itemn.attr ? 'on' : ''"
|
||||
v-for="(itemn, indexn) in item.attr_value" @click="tapAttr(indexw, indexn)"
|
||||
:key="indexn">
|
||||
{{ $t(itemn.attr) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart acea-row row-between-wrapper" v-if="!is_virtual">
|
||||
<view class="title">{{$t(`数量`)}}</view>
|
||||
<view class="carnum acea-row row-left">
|
||||
<view class="item reduce acea-row row-center-wrapper"
|
||||
:class="attr.productSelect.cart_num <= 1 ? 'on' : ''"
|
||||
v-if="attr.productSelect.cart_num <= 1">
|
||||
<text class="iconfont icon-shangpinshuliang-jian"></text>
|
||||
</view>
|
||||
<view class="item reduce acea-row row-center-wrapper"
|
||||
:class="attr.productSelect.cart_num <= 1 ? 'on' : ''" @click="CartNumDes" v-else>
|
||||
<text class="iconfont icon-shangpinshuliang-jian"></text>
|
||||
</view>
|
||||
<view class='item num acea-row row-middle'>
|
||||
<input type="number" v-model="attr.productSelect.cart_num"
|
||||
data-name="productSelect.cart_num"
|
||||
@input="bindCode(attr.productSelect.cart_num)"></input>
|
||||
</view>
|
||||
<view v-if="iSplus" class="item plus acea-row row-center-wrapper" :class="
|
||||
attr.productSelect.cart_num >= attr.productSelect.stock || (limitNum && attr.productSelect.cart_num >= limitNum)
|
||||
? 'on'
|
||||
: ''
|
||||
" @click="CartNumAdd">
|
||||
<text class="iconfont icon-shangpinshuliang-jia"></text>
|
||||
</view>
|
||||
<view v-else class='item plus'
|
||||
:class='(attr.productSelect.cart_num >= attr.productSelect.quota) || (attr.productSelect.cart_num >= attr.productSelect.product_stock) || (attr.productSelect.cart_num >= attr.productSelect.num) || (type=="seckill" && attr.productSelect.cart_num >= attr.productSelect.once_num) ? "on":""'
|
||||
@click='CartNumAdd'>+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="joinBnt bg-color"
|
||||
v-if="iSbnt && attr.productSelect.product_stock>0 &&attr.productSelect.quota>0" @click="goCat">
|
||||
{{$t(`我要参团`)}}
|
||||
</view>
|
||||
<view class="joinBnt on"
|
||||
v-else-if="(iSbnt && attr.productSelect.quota<=0)||(iSbnt &&attr.productSelect.product_stock<=0)">
|
||||
{{$t(`已售罄`)}}
|
||||
</view>
|
||||
<view class="joinBnt bg-color" v-if="iScart && attr.productSelect.stock" @click="goCat">{{$t(`确定`)}}</view>
|
||||
<view class="joinBnt on" v-else-if="iScart && !attr.productSelect.stock">{{$t(`已售罄`)}}</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
mixins: [colors],
|
||||
props: {
|
||||
attr: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
limitNum: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
isShow: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSbnt: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSplus: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iScart: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
is_vip: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
is_virtual: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
unitName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getpreviewImage: function() {
|
||||
uni.previewImage({
|
||||
urls: this.attr.productSelect.image.split(','),
|
||||
current: this.attr.productSelect.image
|
||||
});
|
||||
},
|
||||
goCat: function() {
|
||||
this.$emit('goCat');
|
||||
},
|
||||
/**
|
||||
* 购物车手动输入数量
|
||||
*
|
||||
*/
|
||||
bindCode: function(e) {
|
||||
this.$emit('iptCartNum', this.attr.productSelect.cart_num);
|
||||
},
|
||||
closeAttr: function() {
|
||||
this.$emit('myevent');
|
||||
},
|
||||
CartNumDes: function() {
|
||||
this.$emit('ChangeCartNum', false);
|
||||
},
|
||||
CartNumAdd: function() {
|
||||
this.$emit('ChangeCartNum', true);
|
||||
},
|
||||
tapAttr: function(indexw, indexn) {
|
||||
|
||||
let that = this;
|
||||
that.$emit("attrVal", {
|
||||
indexw: indexw,
|
||||
indexn: indexn
|
||||
});
|
||||
this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attr_values[indexn]);
|
||||
let value = that
|
||||
.getCheckedValue()
|
||||
.join(",");
|
||||
that.$emit("ChangeAttr", value);
|
||||
if (this.limitNum == 1) {
|
||||
if (this.attr.productSelect.quota > 0) {
|
||||
this.attr.productSelect.cart_num = 1
|
||||
} else {
|
||||
this.attr.productSelect.cart_num = 0
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
//获取被选中属性；
|
||||
getCheckedValue: function() {
|
||||
let productAttr = this.attr.productAttr;
|
||||
let value = [];
|
||||
for (let i = 0; i < productAttr.length; i++) {
|
||||
for (let j = 0; j < productAttr[i].attr_values.length; j++) {
|
||||
if (productAttr[i].index === productAttr[i].attr_values[j]) {
|
||||
value.push(productAttr[i].attr_values[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return value;
|
||||
},
|
||||
showImg() {
|
||||
this.$emit('getImg');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vip-money {
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.vipImg {
|
||||
width: 68rpx;
|
||||
height: 27rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding-bottom: 140rpx;
|
||||
padding-bottom: calc(140rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
}
|
||||
|
||||
.product-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.product-window.join {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.product-window.joinCart {
|
||||
padding-bottom: 30rpx;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.product-window .textpic {
|
||||
padding: 0 130rpx 0 30rpx;
|
||||
margin-top: 29rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text {
|
||||
width: 410rpx;
|
||||
font-size: 32rpx;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money {
|
||||
font-size: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .stock {
|
||||
color: #999;
|
||||
margin-left: 6rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: -5rpx;
|
||||
font-size: 35rpx;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.product-window .rollTop {
|
||||
max-height: 500rpx;
|
||||
overflow: auto;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item~.item {
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn {
|
||||
padding: 0 30rpx 0 16rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn {
|
||||
border: 1px solid #F2F2F2;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
padding: 7rpx 33rpx;
|
||||
border-radius: 25rpx;
|
||||
margin: 20rpx 0 0 14rpx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.on {
|
||||
color: var(--view-theme);
|
||||
background: var(--view-minorColorT);
|
||||
border-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.limit {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.product-window .cart {
|
||||
margin-top: 36rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum {
|
||||
height: 54rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .iconfont {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum view {
|
||||
// border: 1px solid #a4a4a4;
|
||||
width: 84rpx;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 54rpx;
|
||||
color: #282828;
|
||||
font-size: 45rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce {
|
||||
border-right: 0;
|
||||
border-radius: 6rpx 0 0 6rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #DEDEDE;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus {
|
||||
border-left: 0;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .num {
|
||||
background: rgba(242, 242, 242, 1);
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.product-window .joinBnt {
|
||||
font-size: 30rpx;
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
color: #fff;
|
||||
margin: 21rpx auto 0 auto;
|
||||
}
|
||||
|
||||
.product-window .joinBnt.on {
|
||||
background-color: #bbb;
|
||||
color: #fff;
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="product-window"
|
||||
:class="(attr.cartAttr === true ? 'on' : '') + ' ' + (iSbnt?'join':'') + ' ' + (iScart?'joinCart':'')">
|
||||
<view class="textpic acea-row row-between-wrapper">
|
||||
<view class="pictrue" @click="showImg()">
|
||||
<image :src="attr.productSelect.image"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="line1">
|
||||
{{ attr.productSelect.store_name }}
|
||||
</view>
|
||||
<view class="money font-color">
|
||||
<view class="acea-row row-middle">
|
||||
{{$t(`￥`)}}<text class="num">{{ attr.productSelect.price }}</text>
|
||||
<text class='vip-money'
|
||||
v-if="is_vip>0 && attr.productSelect.vip_price">{{$t(`￥`)}}{{attr.productSelect.vip_price}}</text>
|
||||
<view class="vipImg" v-if="is_vip>0 && attr.productSelect.vip_price">
|
||||
<image src="../../static/images/svip.gif"></image>
|
||||
</view>
|
||||
</view>
|
||||
<text class="stock" v-if='isShow && !type'>{{$t(`库存`)}}: {{ attr.productSelect.stock }}</text>
|
||||
<text class='stock'
|
||||
v-if="limitNum">{{type ? $t(`库存`) : $t(`限量`)}}:{{type ? attr.productSelect.quota : limitNum + unitName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-guanbi" @click="closeAttr"></view>
|
||||
</view>
|
||||
<view class="rollTop">
|
||||
<view class="productWinList">
|
||||
<view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
|
||||
<view class="title">{{ $t(item.attr_name) }}</view>
|
||||
<view class="listn acea-row row-middle">
|
||||
<view class="itemn" :class="item.index === itemn.attr ? 'on' : ''"
|
||||
v-for="(itemn, indexn) in item.attr_value" @click="tapAttr(indexw, indexn)"
|
||||
:key="indexn">
|
||||
{{ $t(itemn.attr) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart acea-row row-between-wrapper" v-if="!is_virtual">
|
||||
<view class="title">{{$t(`数量`)}}</view>
|
||||
<view class="carnum acea-row row-left">
|
||||
<view class="item reduce acea-row row-center-wrapper"
|
||||
:class="attr.productSelect.cart_num <= 1 ? 'on' : ''"
|
||||
v-if="attr.productSelect.cart_num <= 1">
|
||||
<text class="iconfont icon-shangpinshuliang-jian"></text>
|
||||
</view>
|
||||
<view class="item reduce acea-row row-center-wrapper"
|
||||
:class="attr.productSelect.cart_num <= 1 ? 'on' : ''" @click="CartNumDes" v-else>
|
||||
<text class="iconfont icon-shangpinshuliang-jian"></text>
|
||||
</view>
|
||||
<view class='item num acea-row row-middle'>
|
||||
<input type="number" v-model="attr.productSelect.cart_num"
|
||||
data-name="productSelect.cart_num"
|
||||
@input="bindCode(attr.productSelect.cart_num)"></input>
|
||||
</view>
|
||||
<view v-if="iSplus" class="item plus acea-row row-center-wrapper" :class="
|
||||
attr.productSelect.cart_num >= attr.productSelect.stock || (limitNum && attr.productSelect.cart_num >= limitNum)
|
||||
? 'on'
|
||||
: ''
|
||||
" @click="CartNumAdd">
|
||||
<text class="iconfont icon-shangpinshuliang-jia"></text>
|
||||
</view>
|
||||
<view v-else class='item plus'
|
||||
:class='(attr.productSelect.cart_num >= attr.productSelect.quota) || (attr.productSelect.cart_num >= attr.productSelect.product_stock) || (attr.productSelect.cart_num >= attr.productSelect.num) || (type=="seckill" && attr.productSelect.cart_num >= attr.productSelect.once_num) ? "on":""'
|
||||
@click='CartNumAdd'>+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="joinBnt bg-color"
|
||||
v-if="iSbnt && attr.productSelect.product_stock>0 &&attr.productSelect.quota>0" @click="goCat">
|
||||
{{$t(`我要参团`)}}
|
||||
</view>
|
||||
<view class="joinBnt on"
|
||||
v-else-if="(iSbnt && attr.productSelect.quota<=0)||(iSbnt &&attr.productSelect.product_stock<=0)">
|
||||
{{$t(`已售罄`)}}
|
||||
</view>
|
||||
<view class="joinBnt bg-color" v-if="iScart && attr.productSelect.stock" @click="goCat">{{$t(`确定`)}}</view>
|
||||
<view class="joinBnt on" v-else-if="iScart && !attr.productSelect.stock">{{$t(`已售罄`)}}</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
mixins: [colors],
|
||||
props: {
|
||||
attr: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
limitNum: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
isShow: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSbnt: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iSplus: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
iScart: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
is_vip: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
is_virtual: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
unitName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getpreviewImage: function() {
|
||||
uni.previewImage({
|
||||
urls: this.attr.productSelect.image.split(','),
|
||||
current: this.attr.productSelect.image
|
||||
});
|
||||
},
|
||||
goCat: function() {
|
||||
this.$emit('goCat');
|
||||
},
|
||||
/**
|
||||
* 购物车手动输入数量
|
||||
*
|
||||
*/
|
||||
bindCode: function(e) {
|
||||
this.$emit('iptCartNum', this.attr.productSelect.cart_num);
|
||||
},
|
||||
closeAttr: function() {
|
||||
this.$emit('myevent');
|
||||
},
|
||||
CartNumDes: function() {
|
||||
this.$emit('ChangeCartNum', false);
|
||||
},
|
||||
CartNumAdd: function() {
|
||||
this.$emit('ChangeCartNum', true);
|
||||
},
|
||||
tapAttr: function(indexw, indexn) {
|
||||
|
||||
let that = this;
|
||||
that.$emit("attrVal", {
|
||||
indexw: indexw,
|
||||
indexn: indexn
|
||||
});
|
||||
this.$set(this.attr.productAttr[indexw], 'index', this.attr.productAttr[indexw].attr_values[indexn]);
|
||||
let value = that
|
||||
.getCheckedValue()
|
||||
.join(",");
|
||||
that.$emit("ChangeAttr", value);
|
||||
if (this.limitNum == 1) {
|
||||
if (this.attr.productSelect.quota > 0) {
|
||||
this.attr.productSelect.cart_num = 1
|
||||
} else {
|
||||
this.attr.productSelect.cart_num = 0
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
//获取被选中属性；
|
||||
getCheckedValue: function() {
|
||||
let productAttr = this.attr.productAttr;
|
||||
let value = [];
|
||||
for (let i = 0; i < productAttr.length; i++) {
|
||||
for (let j = 0; j < productAttr[i].attr_values.length; j++) {
|
||||
if (productAttr[i].index === productAttr[i].attr_values[j]) {
|
||||
value.push(productAttr[i].attr_values[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return value;
|
||||
},
|
||||
showImg() {
|
||||
this.$emit('getImg');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vip-money {
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.vipImg {
|
||||
width: 68rpx;
|
||||
height: 27rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-window {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 100;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all .3s cubic-bezier(.25, .5, .5, .9);
|
||||
padding-bottom: 140rpx;
|
||||
padding-bottom: calc(140rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
}
|
||||
|
||||
.product-window.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.product-window.join {
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.product-window.joinCart {
|
||||
padding-bottom: 30rpx;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.product-window .textpic {
|
||||
padding: 0 130rpx 0 30rpx;
|
||||
margin-top: 29rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text {
|
||||
width: 410rpx;
|
||||
font-size: 32rpx;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money {
|
||||
font-size: 24rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .num {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .text .money .stock {
|
||||
color: #999;
|
||||
margin-left: 6rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-window .textpic .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: -5rpx;
|
||||
font-size: 35rpx;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.product-window .rollTop {
|
||||
max-height: 500rpx;
|
||||
overflow: auto;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item~.item {
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn {
|
||||
padding: 0 30rpx 0 16rpx;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn {
|
||||
border: 1px solid #F2F2F2;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
padding: 7rpx 33rpx;
|
||||
border-radius: 25rpx;
|
||||
margin: 20rpx 0 0 14rpx;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.on {
|
||||
color: var(--view-theme);
|
||||
background: var(--view-minorColorT);
|
||||
border-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.product-window .productWinList .item .listn .itemn.limit {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.product-window .cart {
|
||||
margin-top: 36rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .title {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum {
|
||||
height: 54rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .iconfont {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum view {
|
||||
// border: 1px solid #a4a4a4;
|
||||
width: 84rpx;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 54rpx;
|
||||
color: #282828;
|
||||
font-size: 45rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce {
|
||||
border-right: 0;
|
||||
border-radius: 6rpx 0 0 6rpx;
|
||||
line-height: 48rpx;
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .reduce.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #DEDEDE;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus {
|
||||
border-left: 0;
|
||||
border-radius: 0 6rpx 6rpx 0;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .plus.on {
|
||||
// border-color: #e3e3e3;
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.product-window .cart .carnum .num {
|
||||
background: rgba(242, 242, 242, 1);
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.product-window .joinBnt {
|
||||
font-size: 30rpx;
|
||||
width: 620rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
color: #fff;
|
||||
margin: 21rpx auto 0 auto;
|
||||
}
|
||||
|
||||
.product-window .joinBnt.on {
|
||||
background-color: #bbb;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,120 +1,120 @@
|
||||
<template>
|
||||
<view class='promotionGood' :style="colorStyle">
|
||||
<block v-for="(item,index) in benefit" :key="index">
|
||||
<view class='item' @tap="goDetail(item)" hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class='money'>
|
||||
<text class="rmb">{{$t(`￥`)}} </text><text class="price"> {{item.price}}</text>
|
||||
<!-- <text class="ot-price">{{item.ot_price}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goPage,
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
mixins: [colors],
|
||||
props: {
|
||||
benefit: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.promotionGood {
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15rpx 24rpx;
|
||||
|
||||
.item {
|
||||
width: 215rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 9rpx;
|
||||
|
||||
.pictrue {
|
||||
height: 198rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 100%;
|
||||
height: 198rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 30rpx;
|
||||
color: var(--view-priceColor);
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
margin: 0 auto;
|
||||
|
||||
.rmb {
|
||||
font-weight: bold;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 20rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ot-price {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class='promotionGood' :style="colorStyle">
|
||||
<block v-for="(item,index) in benefit" :key="index">
|
||||
<view class='item' @tap="goDetail(item)" hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class='money'>
|
||||
<text class="rmb">{{$t(`￥`)}} </text><text class="price"> {{item.price}}</text>
|
||||
<!-- <text class="ot-price">{{item.ot_price}}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goPage,
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
mixins: [colors],
|
||||
props: {
|
||||
benefit: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.promotionGood {
|
||||
padding: 0 30rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15rpx 24rpx;
|
||||
|
||||
.item {
|
||||
width: 215rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 9rpx;
|
||||
|
||||
.pictrue {
|
||||
height: 198rpx;
|
||||
border-radius: 12rpx;
|
||||
|
||||
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 100%;
|
||||
height: 198rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 30rpx;
|
||||
color: var(--view-priceColor);
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
margin: 0 auto;
|
||||
|
||||
.rmb {
|
||||
font-weight: bold;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 20rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ot-price {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
font-size: 20rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,135 +1,135 @@
|
||||
<template>
|
||||
<view class='recommend' :style="colorStyle">
|
||||
<view class='title acea-row row-center-wrapper'>
|
||||
<text class='iconfont icon-zhuangshixian'></text>
|
||||
<text class='name'>{{$t(`热门推荐`)}}</text>
|
||||
<text class='iconfont icon-zhuangshixian lefticon'></text>
|
||||
</view>
|
||||
<view class='recommendList acea-row row-between-wrapper'>
|
||||
<view class='item' v-for="(item,index) in hostProduct" :key="index" hover-class='none'
|
||||
@tap="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
hostProduct: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.recommend {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.recommend .title {
|
||||
height: 135rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.recommend .title .name {
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
|
||||
.recommend .title .iconfont {
|
||||
font-size: 170rpx;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.recommend .title .iconfont.lefticon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.recommend .recommendList {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item {
|
||||
width: 335rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .pictrue {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 335rpx;
|
||||
}
|
||||
|
||||
|
||||
.recommend .recommendList .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 335rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .name {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .money {
|
||||
font-size: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
padding: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .money .num {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
<template>
|
||||
<view class='recommend' :style="colorStyle">
|
||||
<view class='title acea-row row-center-wrapper'>
|
||||
<text class='iconfont icon-zhuangshixian'></text>
|
||||
<text class='name'>{{$t(`热门推荐`)}}</text>
|
||||
<text class='iconfont icon-zhuangshixian lefticon'></text>
|
||||
</view>
|
||||
<view class='recommendList acea-row row-between-wrapper'>
|
||||
<view class='item' v-for="(item,index) in hostProduct" :key="index" hover-class='none'
|
||||
@tap="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log_big pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
hostProduct: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.recommend {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.recommend .title {
|
||||
height: 135rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.recommend .title .name {
|
||||
margin: 0 28rpx;
|
||||
}
|
||||
|
||||
.recommend .title .iconfont {
|
||||
font-size: 170rpx;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.recommend .title .iconfont.lefticon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.recommend .recommendList {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item {
|
||||
width: 335rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
box-shadow: 0rpx 3rpx 10rpx 2rpx rgba(0, 0, 0, 0.03);
|
||||
;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .pictrue {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 335rpx;
|
||||
}
|
||||
|
||||
|
||||
.recommend .recommendList .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 335rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .name {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
margin-top: 20rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .money {
|
||||
font-size: 20rpx;
|
||||
margin-top: 8rpx;
|
||||
padding: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.recommend .recommendList .item .money .num {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
module.exports = {
|
||||
// 小程序配置
|
||||
// #ifdef MP || APP-PLUS
|
||||
// 请求域名 格式： https://您的域名
|
||||
HTTP_REQUEST_URL: `https://demo.crmeb.com`,
|
||||
// #endif
|
||||
|
||||
// H5配置
|
||||
// #ifdef H5
|
||||
//H5接口是浏览器地址，非单独部署不用修改
|
||||
HTTP_REQUEST_URL: window.location.protocol + "//" + window.location.host,
|
||||
// #endif
|
||||
|
||||
// 以下配置在不做二开的前提下,不需要做任何的修改
|
||||
HEADER: {
|
||||
'content-type': 'application/json',
|
||||
//#ifdef H5
|
||||
'Form-type': navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 ? 'wechat' : 'h5',
|
||||
//#endif
|
||||
//#ifdef MP
|
||||
'Form-type': 'routine',
|
||||
//#endif
|
||||
//#ifdef APP-VUE
|
||||
'Form-type': 'app',
|
||||
//#endif
|
||||
},
|
||||
// 回话密钥名称 请勿修改此配置
|
||||
TOKENNAME: 'Authori-zation',
|
||||
// 缓存时间 0 永久
|
||||
EXPIRE: 0,
|
||||
//分页最多显示条数
|
||||
LIMIT: 10
|
||||
module.exports = {
|
||||
// 小程序配置
|
||||
// #ifdef MP || APP-PLUS
|
||||
// 请求域名 格式： https://您的域名
|
||||
HTTP_REQUEST_URL: `https://demo.crmeb.com`,
|
||||
// #endif
|
||||
|
||||
// H5配置
|
||||
// #ifdef H5
|
||||
//H5接口是浏览器地址，非单独部署不用修改
|
||||
HTTP_REQUEST_URL: window.location.protocol + "//" + window.location.host,
|
||||
// #endif
|
||||
|
||||
// 以下配置在不做二开的前提下,不需要做任何的修改
|
||||
HEADER: {
|
||||
'content-type': 'application/json',
|
||||
//#ifdef H5
|
||||
'Form-type': navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 ? 'wechat' : 'h5',
|
||||
//#endif
|
||||
//#ifdef MP
|
||||
'Form-type': 'routine',
|
||||
//#endif
|
||||
//#ifdef APP-VUE
|
||||
'Form-type': 'app',
|
||||
//#endif
|
||||
},
|
||||
// 回话密钥名称 请勿修改此配置
|
||||
TOKENNAME: 'Authori-zation',
|
||||
// 缓存时间 0 永久
|
||||
EXPIRE: 0,
|
||||
//分页最多显示条数
|
||||
LIMIT: 10
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,430 +1,430 @@
|
||||
<template>
|
||||
<view class="posterCon" :style="colorStyle">
|
||||
<view class='poster-poster'>
|
||||
<view class='tip'><text class='iconfont icon-shuoming'></text>{{$t(`提示：点击图片即可保存至手机相册`)}}</view>
|
||||
<view class='pictrue'>
|
||||
<!-- <image :src='image' mode="widthFix"></image> -->
|
||||
<image class="canvas" :src="posterImage" v-if="posterImage" @click="savePosterPathMp(posterImage)">
|
||||
</image>
|
||||
<canvas class="canvas" canvas-id="myCanvas" v-else></canvas>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
|
||||
:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :onval="onval"
|
||||
:loadMake="loadMake" @result="qrR" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zbCode from '@/components/zb-code/zb-code.vue'
|
||||
import {
|
||||
getBargainPoster,
|
||||
getCombinationPoster,
|
||||
getBargainPosterData,
|
||||
getCombinationPosterData
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
getUserInfo,
|
||||
imgToBase,
|
||||
routineCode
|
||||
} from '@/api/user.js';
|
||||
// #ifdef APP-PLUS
|
||||
import {
|
||||
TOKENNAME,
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app.js';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js'
|
||||
export default {
|
||||
components: {
|
||||
zbCode
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
canvasStatus: true,
|
||||
posterImage: "",
|
||||
parameter: {
|
||||
'navbar': '1',
|
||||
'return': '1',
|
||||
'title': this.$t(`拼团海报`),
|
||||
'color': true,
|
||||
'class': '0'
|
||||
},
|
||||
type: 0,
|
||||
id: 0,
|
||||
bargain: 0,
|
||||
image: '',
|
||||
from: '',
|
||||
uid: "",
|
||||
//二维码参数
|
||||
codeShow: false,
|
||||
cid: '1',
|
||||
ifShow: true,
|
||||
val: "", // 要生成的二维码值
|
||||
size: 200, // 二维码大小
|
||||
unit: 'upx', // 单位
|
||||
background: '#FFF', // 背景色
|
||||
foreground: '#000', // 前景色
|
||||
pdground: '#000', // 角标色
|
||||
icon: '', // 二维码图标
|
||||
iconsize: 40, // 二维码图标大小
|
||||
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
||||
onval: true, // val值变化时自动重新生成二维码
|
||||
loadMake: true, // 组件加载完成后自动生成二维码
|
||||
src: '', // 二维码生成后的图片地址或base64
|
||||
codeSrc: "",
|
||||
wd: 0,
|
||||
hg: 0,
|
||||
posterBag: "../static/posterBag.png",
|
||||
mpUrl: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef MP
|
||||
this.from = 'routine'
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS
|
||||
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) {
|
||||
this.bargain = options.bargain
|
||||
uni.setNavigationBarTitle({
|
||||
title: that.$t(`砍价海报`)
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: that.$t(`拼团海报`)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return app.Tips({
|
||||
title: that.$t(`参数错误`),
|
||||
icon: 'none'
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef H5
|
||||
if (this.type == 1) {
|
||||
this.val = window.location.origin + '/pages/activity/goods_bargain_details/index?id=' + this.id +
|
||||
'&bargain=' +
|
||||
this.$store.state.app.uid +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
} else if (this.type == 2) {
|
||||
this.val = window.location.origin + '/pages/activity/goods_combination_status/index?id=' + this.id +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if (this.type == 1) {
|
||||
this.val = HTTP_REQUEST_URL + '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' +
|
||||
this.$store.state.app.uid +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
} else if (this.type == 2) {
|
||||
this.val = HTTP_REQUEST_URL + '/pages/activity/goods_combination_status/index?id=' + this.id +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
}
|
||||
// #endif
|
||||
setTimeout(e => {
|
||||
this.getPosterInfo();
|
||||
}, 200)
|
||||
this.$nextTick(function() {
|
||||
let selector = uni.createSelectorQuery().select('.pictrue');
|
||||
selector.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
this.wd = data.width
|
||||
this.hg = data.height
|
||||
}).exec();
|
||||
})
|
||||
this.routineCode()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getPosterInfo() {
|
||||
var that = this,
|
||||
url = '';
|
||||
let data = {
|
||||
id: that.id,
|
||||
'from': that.from
|
||||
};
|
||||
let userData = await getUserInfo()
|
||||
this.uid = userData.data.uid
|
||||
let goods_img, mp_code, resData, arr, mpUrl
|
||||
// #ifdef MP
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: that.$t(`海报生成中`),
|
||||
mask: true
|
||||
});
|
||||
if (that.type == 1) {
|
||||
await getBargainPosterData(that.id).then(res => {
|
||||
resData = res.data
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`海报图片获取失败`)
|
||||
});
|
||||
return
|
||||
})
|
||||
} else {
|
||||
await getCombinationPosterData(that.id).then(res => {
|
||||
resData = res.data
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`海报图片获取失败`)
|
||||
});
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
let imgData = await this.imgToBase(resData.image, resData.url)
|
||||
arr = [this.posterBag, imgData.image, imgData.code || this.codeSrc]
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
mpUrl = resData.url ? await this.downloadFilestoreImage(resData.url) : await this
|
||||
.downloadFilestoreImage(this.mpUrl)
|
||||
arr = [this.posterBag, await this.downloadFilestoreImage(resData.image), mpUrl]
|
||||
// #endif
|
||||
this.$nextTick((e) => {
|
||||
that.$util.bargainPosterCanvas(arr, resData.title, resData.label, resData.msg, resData
|
||||
.price,
|
||||
this.wd,
|
||||
this.hg,
|
||||
(tempFilePath) => {
|
||||
this.posterImage = tempFilePath
|
||||
});
|
||||
})
|
||||
},
|
||||
async routineCode() {
|
||||
let res = await routineCode()
|
||||
this.mpUrl = res.data.url
|
||||
},
|
||||
//图片转符合安全域名路径
|
||||
downloadFilestoreImage(url) {
|
||||
url = this.setDomain(url)
|
||||
return new Promise((resolve, reject) => {
|
||||
let that = this;
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: function(res) {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: function() {
|
||||
return that.$util.Tips({
|
||||
title: ''
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(image, url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf('https://') > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
async imgToBase(image, url) {
|
||||
let res = await imgToBase({
|
||||
image: image,
|
||||
code: url
|
||||
})
|
||||
|
||||
return res.data
|
||||
},
|
||||
downloadImg() {
|
||||
|
||||
},
|
||||
savePosterPathMp(url) {
|
||||
let that = this;
|
||||
// #ifdef APP-PLUS
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`enable_file_access`)
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
// 创建隐藏的可下载链接
|
||||
var eleLink = document.createElement('a');
|
||||
eleLink.download = that.$t(`海报`);
|
||||
eleLink.href = url;
|
||||
// 触发点击
|
||||
document.body.appendChild(eleLink);
|
||||
eleLink.click();
|
||||
// #endif
|
||||
},
|
||||
qrR(res) {
|
||||
this.codeSrc = res
|
||||
},
|
||||
// #ifdef MP
|
||||
savePosterPath: function() {
|
||||
let that = this;
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.posterImage,
|
||||
success: function(res) {
|
||||
that.posterImageClose();
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.posterImage,
|
||||
success: function(res) {
|
||||
that.posterImageClose();
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.posterCon {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: var(--view-theme);
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.poster-poster .tip {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
color: #e8c787;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.poster-poster .tip .iconfont {
|
||||
font-size: 36rpx;
|
||||
vertical-align: -4rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 1100rpx;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue {
|
||||
width: 700rpx;
|
||||
/* height: 100%; */
|
||||
margin: 0 auto 50rpx auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue image {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
|
||||
}
|
||||
<template>
|
||||
<view class="posterCon" :style="colorStyle">
|
||||
<view class='poster-poster'>
|
||||
<view class='tip'><text class='iconfont icon-shuoming'></text>{{$t(`提示：点击图片即可保存至手机相册`)}}</view>
|
||||
<view class='pictrue'>
|
||||
<!-- <image :src='image' mode="widthFix"></image> -->
|
||||
<image class="canvas" :src="posterImage" v-if="posterImage" @click="savePosterPathMp(posterImage)">
|
||||
</image>
|
||||
<canvas class="canvas" canvas-id="myCanvas" v-else></canvas>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
|
||||
:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :onval="onval"
|
||||
:loadMake="loadMake" @result="qrR" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zbCode from '@/components/zb-code/zb-code.vue'
|
||||
import {
|
||||
getBargainPoster,
|
||||
getCombinationPoster,
|
||||
getBargainPosterData,
|
||||
getCombinationPosterData
|
||||
} from '@/api/activity.js';
|
||||
import {
|
||||
getUserInfo,
|
||||
imgToBase,
|
||||
routineCode
|
||||
} from '@/api/user.js';
|
||||
// #ifdef APP-PLUS
|
||||
import {
|
||||
TOKENNAME,
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app.js';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js'
|
||||
export default {
|
||||
components: {
|
||||
zbCode
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
canvasStatus: true,
|
||||
posterImage: "",
|
||||
parameter: {
|
||||
'navbar': '1',
|
||||
'return': '1',
|
||||
'title': this.$t(`拼团海报`),
|
||||
'color': true,
|
||||
'class': '0'
|
||||
},
|
||||
type: 0,
|
||||
id: 0,
|
||||
bargain: 0,
|
||||
image: '',
|
||||
from: '',
|
||||
uid: "",
|
||||
//二维码参数
|
||||
codeShow: false,
|
||||
cid: '1',
|
||||
ifShow: true,
|
||||
val: "", // 要生成的二维码值
|
||||
size: 200, // 二维码大小
|
||||
unit: 'upx', // 单位
|
||||
background: '#FFF', // 背景色
|
||||
foreground: '#000', // 前景色
|
||||
pdground: '#000', // 角标色
|
||||
icon: '', // 二维码图标
|
||||
iconsize: 40, // 二维码图标大小
|
||||
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
||||
onval: true, // val值变化时自动重新生成二维码
|
||||
loadMake: true, // 组件加载完成后自动生成二维码
|
||||
src: '', // 二维码生成后的图片地址或base64
|
||||
codeSrc: "",
|
||||
wd: 0,
|
||||
hg: 0,
|
||||
posterBag: "../static/posterBag.png",
|
||||
mpUrl: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef MP
|
||||
this.from = 'routine'
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS
|
||||
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) {
|
||||
this.bargain = options.bargain
|
||||
uni.setNavigationBarTitle({
|
||||
title: that.$t(`砍价海报`)
|
||||
})
|
||||
} else {
|
||||
uni.setNavigationBarTitle({
|
||||
title: that.$t(`拼团海报`)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return app.Tips({
|
||||
title: that.$t(`参数错误`),
|
||||
icon: 'none'
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef H5
|
||||
if (this.type == 1) {
|
||||
this.val = window.location.origin + '/pages/activity/goods_bargain_details/index?id=' + this.id +
|
||||
'&bargain=' +
|
||||
this.$store.state.app.uid +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
} else if (this.type == 2) {
|
||||
this.val = window.location.origin + '/pages/activity/goods_combination_status/index?id=' + this.id +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if (this.type == 1) {
|
||||
this.val = HTTP_REQUEST_URL + '/pages/activity/goods_bargain_details/index?id=' + this.id + '&bargain=' +
|
||||
this.$store.state.app.uid +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
} else if (this.type == 2) {
|
||||
this.val = HTTP_REQUEST_URL + '/pages/activity/goods_combination_status/index?id=' + this.id +
|
||||
'&spread=' +
|
||||
this.$store.state.app.uid
|
||||
}
|
||||
// #endif
|
||||
setTimeout(e => {
|
||||
this.getPosterInfo();
|
||||
}, 200)
|
||||
this.$nextTick(function() {
|
||||
let selector = uni.createSelectorQuery().select('.pictrue');
|
||||
selector.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
this.wd = data.width
|
||||
this.hg = data.height
|
||||
}).exec();
|
||||
})
|
||||
this.routineCode()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
async getPosterInfo() {
|
||||
var that = this,
|
||||
url = '';
|
||||
let data = {
|
||||
id: that.id,
|
||||
'from': that.from
|
||||
};
|
||||
let userData = await getUserInfo()
|
||||
this.uid = userData.data.uid
|
||||
let goods_img, mp_code, resData, arr, mpUrl
|
||||
// #ifdef MP
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: that.$t(`海报生成中`),
|
||||
mask: true
|
||||
});
|
||||
if (that.type == 1) {
|
||||
await getBargainPosterData(that.id).then(res => {
|
||||
resData = res.data
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`海报图片获取失败`)
|
||||
});
|
||||
return
|
||||
})
|
||||
} else {
|
||||
await getCombinationPosterData(that.id).then(res => {
|
||||
resData = res.data
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`海报图片获取失败`)
|
||||
});
|
||||
return
|
||||
})
|
||||
}
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
let imgData = await this.imgToBase(resData.image, resData.url)
|
||||
arr = [this.posterBag, imgData.image, imgData.code || this.codeSrc]
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
mpUrl = resData.url ? await this.downloadFilestoreImage(resData.url) : await this
|
||||
.downloadFilestoreImage(this.mpUrl)
|
||||
arr = [this.posterBag, await this.downloadFilestoreImage(resData.image), mpUrl]
|
||||
// #endif
|
||||
this.$nextTick((e) => {
|
||||
that.$util.bargainPosterCanvas(arr, resData.title, resData.label, resData.msg, resData
|
||||
.price,
|
||||
this.wd,
|
||||
this.hg,
|
||||
(tempFilePath) => {
|
||||
this.posterImage = tempFilePath
|
||||
});
|
||||
})
|
||||
},
|
||||
async routineCode() {
|
||||
let res = await routineCode()
|
||||
this.mpUrl = res.data.url
|
||||
},
|
||||
//图片转符合安全域名路径
|
||||
downloadFilestoreImage(url) {
|
||||
url = this.setDomain(url)
|
||||
return new Promise((resolve, reject) => {
|
||||
let that = this;
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: function(res) {
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
fail: function() {
|
||||
return that.$util.Tips({
|
||||
title: ''
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
//替换安全域名
|
||||
setDomain: function(image, url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf('https://') > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
async imgToBase(image, url) {
|
||||
let res = await imgToBase({
|
||||
image: image,
|
||||
code: url
|
||||
})
|
||||
|
||||
return res.data
|
||||
},
|
||||
downloadImg() {
|
||||
|
||||
},
|
||||
savePosterPathMp(url) {
|
||||
let that = this;
|
||||
// #ifdef APP-PLUS
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`enable_file_access`)
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: url,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
// 创建隐藏的可下载链接
|
||||
var eleLink = document.createElement('a');
|
||||
eleLink.download = that.$t(`海报`);
|
||||
eleLink.href = url;
|
||||
// 触发点击
|
||||
document.body.appendChild(eleLink);
|
||||
eleLink.click();
|
||||
// #endif
|
||||
},
|
||||
qrR(res) {
|
||||
this.codeSrc = res
|
||||
},
|
||||
// #ifdef MP
|
||||
savePosterPath: function() {
|
||||
let that = this;
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
uni.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.posterImage,
|
||||
success: function(res) {
|
||||
that.posterImageClose();
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.posterImage,
|
||||
success: function(res) {
|
||||
that.posterImageClose();
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存成功`),
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: function(res) {
|
||||
that.$util.Tips({
|
||||
title: that.$t(`保存失败`)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.posterCon {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: var(--view-theme);
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.poster-poster .tip {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
color: #e8c787;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.poster-poster .tip .iconfont {
|
||||
font-size: 36rpx;
|
||||
vertical-align: -4rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 1100rpx;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue {
|
||||
width: 700rpx;
|
||||
/* height: 100%; */
|
||||
margin: 0 auto 50rpx auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.poster-poster .pictrue image {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,232 +1,232 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="priceChange" :class="change === true ? 'on' : ''">
|
||||
<view class="priceTitle">
|
||||
{{ status == 0 ? $t(`一键改价`) : status == 1 ? $t(`订单备注`) : $t(`立即退款`) }}
|
||||
<span class="iconfont icon-guanbi" @click="close"></span>
|
||||
</view>
|
||||
<view class="listChange" v-if="status == 0 || status == 2">
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`商品总价`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.total_price }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`原始邮费`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.pay_postage }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`实际支付`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
<input type="text" v-model="price" :class="focus === true ? 'on' : ''" @focus="priceChange" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 1">
|
||||
<view>{{$t(`实际支付`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.pay_price }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 1">
|
||||
<view>{{$t(`退款金额`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
<input type="text" v-model="refund_price" :class="focus === true ? 'on' : ''"
|
||||
@focus="priceChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listChange" v-else>
|
||||
<textarea class="pd10" :placeholder="
|
||||
orderInfo.remark ? orderInfo.remark : $t(`请填写备注信息`)
|
||||
" v-model="remark"></textarea>
|
||||
</view>
|
||||
<view class="modify" @click="save">
|
||||
{{
|
||||
status == 1 || orderInfo.refund_status == 0 ? $t(`立即修改`) : $t(`确认退款`)
|
||||
}}
|
||||
</view>
|
||||
<view class="modify1" @click="refuse" v-if="orderInfo.refund_status == 1 && status == 0">
|
||||
{{$t(`拒绝退款`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent v-show="change === true"></view>
|
||||
</view>
|
||||
</template>
|
||||
<template>
|
||||
<view>
|
||||
<view class="priceChange" :class="change === true ? 'on' : ''">
|
||||
<view class="priceTitle">
|
||||
{{ status == 0 ? $t(`一键改价`) : status == 1 ? $t(`订单备注`) : $t(`立即退款`) }}
|
||||
<span class="iconfont icon-guanbi" @click="close"></span>
|
||||
</view>
|
||||
<view class="listChange" v-if="status == 0 || status == 2">
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`商品总价`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.total_price }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`原始邮费`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.pay_postage }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 0">
|
||||
<view>{{$t(`实际支付`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
<input type="text" v-model="price" :class="focus === true ? 'on' : ''" @focus="priceChange" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 1">
|
||||
<view>{{$t(`实际支付`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
{{ orderInfo.pay_price }}<span class="iconfont icon-suozi"></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper" v-if="orderInfo.refund_status === 1">
|
||||
<view>{{$t(`退款金额`)}}({{$t(`￥`)}})</view>
|
||||
<view class="money">
|
||||
<input type="text" v-model="refund_price" :class="focus === true ? 'on' : ''"
|
||||
@focus="priceChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listChange" v-else>
|
||||
<textarea class="pd10" :placeholder="
|
||||
orderInfo.remark ? orderInfo.remark : $t(`请填写备注信息`)
|
||||
" v-model="remark"></textarea>
|
||||
</view>
|
||||
<view class="modify" @click="save">
|
||||
{{
|
||||
status == 1 || orderInfo.refund_status == 0 ? $t(`立即修改`) : $t(`确认退款`)
|
||||
}}
|
||||
</view>
|
||||
<view class="modify1" @click="refuse" v-if="orderInfo.refund_status == 1 && status == 0">
|
||||
{{$t(`拒绝退款`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="mask" @touchmove.prevent v-show="change === true"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.mask{
|
||||
z-index: 99;
|
||||
}
|
||||
.priceChange {
|
||||
position: fixed;
|
||||
width: 580upx;
|
||||
}
|
||||
.priceChange {
|
||||
position: fixed;
|
||||
width: 580upx;
|
||||
/* height: 670upx; */
|
||||
padding-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -290upx;
|
||||
margin-top: -335upx;
|
||||
z-index: 666;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.priceChange.on {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.priceChange .priceTitle {
|
||||
background: url("../../static/pricetitle.jpg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 160upx;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
text-align: center;
|
||||
font-size: 40upx;
|
||||
color: #fff;
|
||||
line-height: 160upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.priceChange .priceTitle .iconfont {
|
||||
position: absolute;
|
||||
font-size: 40upx;
|
||||
right: 26upx;
|
||||
top: 23upx;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
.priceChange .listChange {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.priceChange .listChange textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item {
|
||||
height: 103upx;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money {
|
||||
color: #666;
|
||||
width: 300upx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money .iconfont {
|
||||
font-size: 32upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money input.on {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.priceChange .modify {
|
||||
font-size: 32upx;
|
||||
color: #fff;
|
||||
width: 490upx;
|
||||
height: 90upx;
|
||||
text-align: center;
|
||||
line-height: 90upx;
|
||||
border-radius: 45upx;
|
||||
background-color: #2291f8;
|
||||
margin: 53upx auto 0 auto;
|
||||
}
|
||||
|
||||
.priceChange .modify1 {
|
||||
font-size: 32upx;
|
||||
color: #312b2b;
|
||||
width: 490upx;
|
||||
height: 90upx;
|
||||
text-align: center;
|
||||
line-height: 90upx;
|
||||
border-radius: 45upx;
|
||||
background-color: #eee;
|
||||
margin: 30upx auto 0 auto;
|
||||
}
|
||||
|
||||
.priceChange .listChange textarea {
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 200upx;
|
||||
margin-top: 50upx;
|
||||
border-radius: 10upx;
|
||||
color: #333;
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "PriceChange",
|
||||
components: {},
|
||||
props: {
|
||||
change: Boolean,
|
||||
orderInfo: Object,
|
||||
status: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
focus: false,
|
||||
price: 0,
|
||||
refund_price: 0,
|
||||
remark: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
orderInfo: function(nVal) {
|
||||
this.price = this.orderInfo.pay_price;
|
||||
this.refund_price = this.orderInfo.pay_price;
|
||||
this.remark = "";
|
||||
}
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
priceChange: function() {
|
||||
this.focus = true;
|
||||
},
|
||||
close: function() {
|
||||
this.price = this.orderInfo.pay_price;
|
||||
this.$emit("closechange", false);
|
||||
},
|
||||
save: function() {
|
||||
let that = this;
|
||||
that.$emit("savePrice", {
|
||||
price: that.price,
|
||||
refund_price: that.refund_price,
|
||||
type: 1,
|
||||
remark: that.remark
|
||||
});
|
||||
},
|
||||
refuse: function() {
|
||||
let that = this;
|
||||
that.$emit("savePrice", {
|
||||
price: that.price,
|
||||
refund_price: that.refund_price,
|
||||
type: 2,
|
||||
remark: that.remark
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
padding-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10upx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -290upx;
|
||||
margin-top: -335upx;
|
||||
z-index: 666;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.priceChange.on {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.priceChange .priceTitle {
|
||||
background: url("../../static/pricetitle.jpg") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 160upx;
|
||||
border-radius: 10upx 10upx 0 0;
|
||||
text-align: center;
|
||||
font-size: 40upx;
|
||||
color: #fff;
|
||||
line-height: 160upx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.priceChange .priceTitle .iconfont {
|
||||
position: absolute;
|
||||
font-size: 40upx;
|
||||
right: 26upx;
|
||||
top: 23upx;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
.priceChange .listChange {
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.priceChange .listChange textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item {
|
||||
height: 103upx;
|
||||
border-bottom: 1px solid #e3e3e3;
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money {
|
||||
color: #666;
|
||||
width: 300upx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money .iconfont {
|
||||
font-size: 32upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.priceChange .listChange .item .money input.on {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.priceChange .modify {
|
||||
font-size: 32upx;
|
||||
color: #fff;
|
||||
width: 490upx;
|
||||
height: 90upx;
|
||||
text-align: center;
|
||||
line-height: 90upx;
|
||||
border-radius: 45upx;
|
||||
background-color: #2291f8;
|
||||
margin: 53upx auto 0 auto;
|
||||
}
|
||||
|
||||
.priceChange .modify1 {
|
||||
font-size: 32upx;
|
||||
color: #312b2b;
|
||||
width: 490upx;
|
||||
height: 90upx;
|
||||
text-align: center;
|
||||
line-height: 90upx;
|
||||
border-radius: 45upx;
|
||||
background-color: #eee;
|
||||
margin: 30upx auto 0 auto;
|
||||
}
|
||||
|
||||
.priceChange .listChange textarea {
|
||||
border: 1px solid #eee;
|
||||
width: 100%;
|
||||
height: 200upx;
|
||||
margin-top: 50upx;
|
||||
border-radius: 10upx;
|
||||
color: #333;
|
||||
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: "PriceChange",
|
||||
components: {},
|
||||
props: {
|
||||
change: Boolean,
|
||||
orderInfo: Object,
|
||||
status: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
focus: false,
|
||||
price: 0,
|
||||
refund_price: 0,
|
||||
remark: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
orderInfo: function(nVal) {
|
||||
this.price = this.orderInfo.pay_price;
|
||||
this.refund_price = this.orderInfo.pay_price;
|
||||
this.remark = "";
|
||||
}
|
||||
},
|
||||
mounted: function() {},
|
||||
methods: {
|
||||
priceChange: function() {
|
||||
this.focus = true;
|
||||
},
|
||||
close: function() {
|
||||
this.price = this.orderInfo.pay_price;
|
||||
this.$emit("closechange", false);
|
||||
},
|
||||
save: function() {
|
||||
let that = this;
|
||||
that.$emit("savePrice", {
|
||||
price: that.price,
|
||||
refund_price: that.refund_price,
|
||||
type: 1,
|
||||
remark: that.remark
|
||||
});
|
||||
},
|
||||
refuse: function() {
|
||||
let that = this;
|
||||
that.$emit("savePrice", {
|
||||
price: that.price,
|
||||
refund_price: that.refund_price,
|
||||
type: 2,
|
||||
remark: that.remark
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,226 +1,226 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='evaluate-list'>
|
||||
<view class='generalComment acea-row row-between-wrapper'>
|
||||
<view class='acea-row row-middle'>
|
||||
<view class='evaluate'>{{$t(`评分`)}}</view>
|
||||
<view class='start' :class="'star'+replyData.reply_star"></view>
|
||||
</view>
|
||||
<view>{{$t(`好评率`)}}<text class='font-num'>{{replyData.reply_chance}}%</text></view>
|
||||
</view>
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item' :class='type==0 ? "bg-color":""' @click='changeType(0)'>
|
||||
{{$t(`全部`)}}({{replyData.sum_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==1 ? "bg-color":""' @click='changeType(1)'>
|
||||
{{$t(`好评`)}}({{replyData.good_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==2 ? "bg-color":""' @click='changeType(2)'>
|
||||
{{$t(`中评`)}}({{replyData.in_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==3 ? "bg-color":""' @click='changeType(3)'>
|
||||
{{$t(`差评`)}}({{replyData.poor_count}})
|
||||
</view>
|
||||
</view>
|
||||
<userEvaluation :reply="reply"></userEvaluation>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if="reply.length>0">
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
<view class='noCommodity' v-if="reply.length==0">
|
||||
<view class='emptyBox'>
|
||||
<image :src="imgHost + '/statics/images/noMessage.png'"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
{{$t(`暂无评论`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getReplyList,
|
||||
getReplyConfig
|
||||
} from '@/api/store.js';
|
||||
import userEvaluation from '@/components/userEvaluation';
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
userEvaluation
|
||||
},
|
||||
mixins: [colors],
|
||||
computed: mapGetters(['isLogin']),
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
replyData: {},
|
||||
product_id: 0,
|
||||
reply: [],
|
||||
type: 0,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: this.$t(`加载更多`),
|
||||
page: 1,
|
||||
limit: 20
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
if (!options.product_id) return that.$util.Tips({
|
||||
title: that.$t(`缺少参数`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
that.product_id = options.product_id;
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getProductReplyCount();
|
||||
this.getProductReplyList();
|
||||
} else {
|
||||
toLogin()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取评论统计数据
|
||||
*
|
||||
*/
|
||||
getProductReplyCount: function() {
|
||||
let that = this;
|
||||
getReplyConfig(that.product_id).then(res => {
|
||||
that.$set(that, 'replyData', res.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 分页获取评论
|
||||
*/
|
||||
getProductReplyList: function() {
|
||||
let that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getReplyList(that.product_id, {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
}).then(res => {
|
||||
let list = res.data,
|
||||
loadend = list.length < that.limit;
|
||||
that.reply = that.$util.SplitArray(list, that.reply);
|
||||
that.$set(that, 'reply', that.reply);
|
||||
that.loading = false;
|
||||
that.loadend = loadend;
|
||||
that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
|
||||
that.page = that.page + 1;
|
||||
}).catch(err => {
|
||||
that.loading = false,
|
||||
that.loadTitle = that.$t(`加载更多`)
|
||||
});
|
||||
},
|
||||
/*
|
||||
* 点击事件切换
|
||||
* */
|
||||
changeType: function(e) {
|
||||
let type = parseInt(e);
|
||||
if (type == this.type) return;
|
||||
this.type = type;
|
||||
this.page = 1;
|
||||
this.loadend = false;
|
||||
this.$set(this, 'reply', []);
|
||||
this.getProductReplyList();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.getProductReplyList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.evaluate-list .generalComment {
|
||||
height: 94rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 1rpx;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.evaluate-list .generalComment .evaluate {
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
|
||||
.evaluate-list .nav {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
padding: 0 30rpx 32rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.evaluate-list .nav .item {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
border-radius: 6rpx;
|
||||
height: 54rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f4f4f4;
|
||||
line-height: 54rpx;
|
||||
margin-right: 17rpx;
|
||||
}
|
||||
|
||||
.evaluate-list .nav .item.bg-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
padding-top: 100rpx;
|
||||
|
||||
.text {
|
||||
padding-top: 40rpx;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.emptyBox {
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.tips {
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='evaluate-list'>
|
||||
<view class='generalComment acea-row row-between-wrapper'>
|
||||
<view class='acea-row row-middle'>
|
||||
<view class='evaluate'>{{$t(`评分`)}}</view>
|
||||
<view class='start' :class="'star'+replyData.reply_star"></view>
|
||||
</view>
|
||||
<view>{{$t(`好评率`)}}<text class='font-num'>{{replyData.reply_chance}}%</text></view>
|
||||
</view>
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item' :class='type==0 ? "bg-color":""' @click='changeType(0)'>
|
||||
{{$t(`全部`)}}({{replyData.sum_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==1 ? "bg-color":""' @click='changeType(1)'>
|
||||
{{$t(`好评`)}}({{replyData.good_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==2 ? "bg-color":""' @click='changeType(2)'>
|
||||
{{$t(`中评`)}}({{replyData.in_count}})
|
||||
</view>
|
||||
<view class='item' :class='type==3 ? "bg-color":""' @click='changeType(3)'>
|
||||
{{$t(`差评`)}}({{replyData.poor_count}})
|
||||
</view>
|
||||
</view>
|
||||
<userEvaluation :reply="reply"></userEvaluation>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if="reply.length>0">
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
<view class='noCommodity' v-if="reply.length==0">
|
||||
<view class='emptyBox'>
|
||||
<image :src="imgHost + '/statics/images/noMessage.png'"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
{{$t(`暂无评论`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getReplyList,
|
||||
getReplyConfig
|
||||
} from '@/api/store.js';
|
||||
import userEvaluation from '@/components/userEvaluation';
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
userEvaluation
|
||||
},
|
||||
mixins: [colors],
|
||||
computed: mapGetters(['isLogin']),
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
replyData: {},
|
||||
product_id: 0,
|
||||
reply: [],
|
||||
type: 0,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: this.$t(`加载更多`),
|
||||
page: 1,
|
||||
limit: 20
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
if (!options.product_id) return that.$util.Tips({
|
||||
title: that.$t(`缺少参数`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
that.product_id = options.product_id;
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getProductReplyCount();
|
||||
this.getProductReplyList();
|
||||
} else {
|
||||
toLogin()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取评论统计数据
|
||||
*
|
||||
*/
|
||||
getProductReplyCount: function() {
|
||||
let that = this;
|
||||
getReplyConfig(that.product_id).then(res => {
|
||||
that.$set(that, 'replyData', res.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 分页获取评论
|
||||
*/
|
||||
getProductReplyList: function() {
|
||||
let that = this;
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getReplyList(that.product_id, {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
}).then(res => {
|
||||
let list = res.data,
|
||||
loadend = list.length < that.limit;
|
||||
that.reply = that.$util.SplitArray(list, that.reply);
|
||||
that.$set(that, 'reply', that.reply);
|
||||
that.loading = false;
|
||||
that.loadend = loadend;
|
||||
that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
|
||||
that.page = that.page + 1;
|
||||
}).catch(err => {
|
||||
that.loading = false,
|
||||
that.loadTitle = that.$t(`加载更多`)
|
||||
});
|
||||
},
|
||||
/*
|
||||
* 点击事件切换
|
||||
* */
|
||||
changeType: function(e) {
|
||||
let type = parseInt(e);
|
||||
if (type == this.type) return;
|
||||
this.type = type;
|
||||
this.page = 1;
|
||||
this.loadend = false;
|
||||
this.$set(this, 'reply', []);
|
||||
this.getProductReplyList();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.getProductReplyList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.evaluate-list .generalComment {
|
||||
height: 94rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 1rpx;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.evaluate-list .generalComment .evaluate {
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
|
||||
.evaluate-list .nav {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
padding: 0 30rpx 32rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.evaluate-list .nav .item {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
border-radius: 6rpx;
|
||||
height: 54rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #f4f4f4;
|
||||
line-height: 54rpx;
|
||||
margin-right: 17rpx;
|
||||
}
|
||||
|
||||
.evaluate-list .nav .item.bg-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
padding-top: 100rpx;
|
||||
|
||||
.text {
|
||||
padding-top: 40rpx;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.emptyBox {
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.tips {
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -338,14 +338,6 @@
|
||||
title: this.$t(`找微信好友支付`),
|
||||
payStatus: 1,
|
||||
},
|
||||
{
|
||||
"name": this.$t(`通联支付`),
|
||||
"icon": "icon-tonglianzhifu1",
|
||||
value: 'allinpay',
|
||||
title: this.$t(`使用通联支付付款`),
|
||||
payStatus: 1,
|
||||
}
|
||||
|
||||
],
|
||||
virtual_type: 0,
|
||||
formContent: '',
|
||||
@ -869,7 +861,6 @@
|
||||
that.cartArr[1].payStatus = res.data.ali_pay_status || 0;
|
||||
//#ifdef MP
|
||||
that.cartArr[1].payStatus = 0;
|
||||
that.cartArr[5].payStatus = res.data.pay_allin_open || 0;
|
||||
//#endif
|
||||
//余额支付是否开启
|
||||
// that.cartArr[2].title = '可用余额:' + res.data.userInfo.now_money;
|
||||
|
||||
@ -540,13 +540,6 @@
|
||||
value: 'friend',
|
||||
title: this.$t(`找微信好友支付`),
|
||||
payStatus: 1,
|
||||
},
|
||||
{
|
||||
"name": this.$t(`通联支付`),
|
||||
"icon": "icon-tonglianzhifu1",
|
||||
value: 'allinpay',
|
||||
title: this.$t(`使用通联支付付款`),
|
||||
payStatus: 1,
|
||||
}
|
||||
],
|
||||
pay_close: false,
|
||||
@ -960,9 +953,6 @@
|
||||
}
|
||||
if (item.value == 'friend') {
|
||||
item.payStatus = res.data.friend_pay_status == 1 ? true : false;
|
||||
}
|
||||
if (item.value == 'allinpay') {
|
||||
item.payStatus = res.data.pay_allin_open == 1 ? true : false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,404 +1,404 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='payment-status' v-if="(!orderLottery || !order_pay_info.paid) && loading && lotteryLoading">
|
||||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
|
||||
<view class='iconfont icons icon-duihao2 bg-color'
|
||||
v-if="order_pay_info.paid || order_pay_info.pay_type == 'offline'"></view>
|
||||
<view class='iconfont icons icon-iconfontguanbi' v-else></view>
|
||||
<!-- 失败时：订单支付失败 -->
|
||||
<view class='status' v-if="order_pay_info.pay_type != 'offline'">
|
||||
{{order_pay_info.paid ? $t(`订单支付成功`):$t(payType ? `订单支付中`:`订单支付失败`)}}
|
||||
</view>
|
||||
<view class='status' v-else>{{$t(`订单创建成功`)}}</view>
|
||||
<view class='wrapper'>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`订单号`)}}</view>
|
||||
<view class='itemCom'>{{orderId}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`下单时间`)}}</view>
|
||||
<view class='itemCom'>{{order_pay_info._add_time}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`支付方式`)}}</view>
|
||||
<view class='itemCom'>{{$t(order_pay_info._status._payType) || $t(`暂未支付`)}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`支付金额`)}}</view>
|
||||
<view class='itemCom'>{{order_pay_info.pay_price}}</view>
|
||||
</view>
|
||||
<!--失败时加上这个 -->
|
||||
<view class='item acea-row row-between-wrapper'
|
||||
v-if="order_pay_info.paid==0 && order_pay_info.pay_type != 'offline'">
|
||||
<view>{{$t(`失败原因`)}}</view>
|
||||
<view class='itemCom'>{{status==2 ? $t(`取消支付`):msg}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--失败时： 重新购买 -->
|
||||
<view @tap="goOrderDetails" v-if="status==0">
|
||||
<button formType="submit" class='returnBnt bg-color' hover-class='none'>{{$t(`查看订单`)}}</button>
|
||||
</view>
|
||||
<view @tap="getOrderPayInfo" v-if="payType == 'ALLINPAY_PAY'">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`刷新支付状态`)}}</button>
|
||||
</view>
|
||||
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==1">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`重新购买`)}}</button>
|
||||
</view>
|
||||
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==2">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`重新支付`)}}</button>
|
||||
</view>
|
||||
<button @click="goPink(order_pay_info.pink_id)" class='returnBnt cart-color' formType="submit"
|
||||
hover-class='none'
|
||||
v-if="order_pay_info.pink_id && order_pay_info.paid!=0 && status!=2 && status!=1">{{$t(`邀请好友参团`)}}</button>
|
||||
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none'
|
||||
v-else>{{$t(`返回首页`)}}</button>
|
||||
<view class="coupons" v-if='couponList.length'>
|
||||
<view class="title acea-row row-center-wrapper">
|
||||
<view class="line"></view>
|
||||
<view class="name">{{$t(`赠送优惠券`)}}</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item,index) in couponList" :key='index'
|
||||
v-if="index<2 || !couponsHidden">
|
||||
<view class="moneyCon acea-row row-between-wrapper">
|
||||
<view class="price acea-row row-center-wrapper">
|
||||
<view>
|
||||
{{$t(`￥`)}}<text>{{item.coupon_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{item.coupon_title}}</view>
|
||||
<view class="priceMin">{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="time">
|
||||
{{$t(`有效期`)}}:{{ item.add_time ? item.add_time + "-" : ""}}{{ item.end_time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="open acea-row row-center-wrapper" @click="openTap" v-if="couponList.length>2">
|
||||
{{couponsHidden?$t(`更多`):$t(`关闭`)}}<text class="iconfont"
|
||||
:class='couponsHidden==true?"icon-xiangxia":"icon-xiangshang"'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<lotteryModel v-show="orderLottery && order_pay_info.paid && loading && lotteryLoading" :options="options"
|
||||
@orderDetails="goOrderDetails" @lotteryShow="getOrderLottery"></lotteryModel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lotteryModel from './payLottery.vue'
|
||||
import {
|
||||
getOrderDetail,
|
||||
orderCoupon
|
||||
} from '@/api/order.js';
|
||||
import {
|
||||
openOrderSubscribe
|
||||
} from '@/utils/SubscribeMessage.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
components: {
|
||||
lotteryModel,
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
lotteryLoading: false,
|
||||
orderLottery: false,
|
||||
orderId: '',
|
||||
order_pay_info: {
|
||||
paid: 1,
|
||||
_status: {}
|
||||
},
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
status: 0,
|
||||
msg: '',
|
||||
couponsHidden: true,
|
||||
couponList: [],
|
||||
options: {},
|
||||
payType: ''
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getOrderPayInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.options = options
|
||||
if (!options.order_id) return this.$util.Tips({
|
||||
title: this.$t(`缺少参数无法查看订单支付状态`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
this.orderId = options.order_id;
|
||||
this.status = options.status || 0;
|
||||
this.msg = options.msg || '';
|
||||
this.payType = options.payType || '';
|
||||
|
||||
// // #ifdef H5
|
||||
// document.addEventListener('visibilitychange', (e) => {
|
||||
// let state = document.visibilityState
|
||||
// if (state == 'hidden') {
|
||||
// console.log('用户离开了');
|
||||
// }
|
||||
// if (state == 'visible') {
|
||||
// this.getOrderPayInfo();
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getOrderPayInfo();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderLottery(status) {
|
||||
this.orderLottery = status
|
||||
this.lotteryLoading = true
|
||||
},
|
||||
openTap() {
|
||||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||||
},
|
||||
onLoadFun: function() {
|
||||
this.getOrderPayInfo();
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 支付完成查询支付状态
|
||||
*
|
||||
*/
|
||||
getOrderPayInfo: function() {
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载中`)
|
||||
});
|
||||
getOrderDetail(that.orderId).then(res => {
|
||||
uni.hideLoading();
|
||||
that.$set(that, 'order_pay_info', res.data);
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.paid ? that.$t(`支付成功`) : that.$t(`未支付`)
|
||||
});
|
||||
this.loading = true
|
||||
this.getOrderCoupon()
|
||||
}).catch(err => {
|
||||
this.loading = true
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getOrderCoupon() {
|
||||
let that = this;
|
||||
orderCoupon(that.orderId).then(res => {
|
||||
that.couponList = res.data;
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 去首页关闭当前所有页面
|
||||
*/
|
||||
goIndex: function(e) {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
// 去参团页面；
|
||||
goPink: function(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_combination_status/index?id=' + id
|
||||
});
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 去订单详情页面
|
||||
*/
|
||||
goOrderDetails: function(e) {
|
||||
let that = this;
|
||||
// #ifdef MP
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载中`),
|
||||
})
|
||||
openOrderSubscribe().then(res => {
|
||||
uni.hideLoading();
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||||
});
|
||||
}).catch(() => {
|
||||
nui.hideLoading();
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupons {
|
||||
.title {
|
||||
margin: 30rpx 0 25rpx 0;
|
||||
|
||||
.line {
|
||||
width: 70rpx;
|
||||
height: 1px;
|
||||
background: #DCDCDC;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 20rpx;
|
||||
|
||||
.item {
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.price {
|
||||
width: 236rpx;
|
||||
height: 160rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
|
||||
text {
|
||||
font-size: 54rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 385rpx;
|
||||
|
||||
.name {
|
||||
font-size: #282828;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.priceMin {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 25rpx;
|
||||
margin: 5rpx 0 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-status {
|
||||
background-color: #fff;
|
||||
margin: 195rpx 30rpx 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 1rpx 0 28rpx 0;
|
||||
}
|
||||
|
||||
.payment-status .icons {
|
||||
font-size: 70rpx;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 140rpx;
|
||||
text-shadow: 0px 4px 0px rgba(255, 255, 255, 0.5);
|
||||
border: 6rpx solid #f5f5f5;
|
||||
margin: -76rpx auto 0 auto;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.payment-status .icons.icon-iconfontguanbi {
|
||||
text-shadow: 0px 4px 0px #6c6d6d;
|
||||
}
|
||||
|
||||
.payment-status .iconfont.fail {
|
||||
text-shadow: 0px 4px 0px #7a7a7a;
|
||||
}
|
||||
|
||||
.payment-status .status {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 25rpx 0 37rpx 0;
|
||||
}
|
||||
|
||||
.payment-status .wrapper {
|
||||
border: 1rpx solid #eee;
|
||||
margin: 0 30rpx 47rpx 30rpx;
|
||||
padding: 35rpx 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item~.item {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item .itemCom {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.payment-status .returnBnt {
|
||||
width: 630rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
margin: 0 auto 20rpx auto;
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='payment-status' v-if="(!orderLottery || !order_pay_info.paid) && loading && lotteryLoading">
|
||||
<!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
|
||||
<view class='iconfont icons icon-duihao2 bg-color'
|
||||
v-if="order_pay_info.paid || order_pay_info.pay_type == 'offline'"></view>
|
||||
<view class='iconfont icons icon-iconfontguanbi' v-else></view>
|
||||
<!-- 失败时：订单支付失败 -->
|
||||
<view class='status' v-if="order_pay_info.pay_type != 'offline'">
|
||||
{{order_pay_info.paid ? $t(`订单支付成功`):$t(payType ? `订单支付中`:`订单支付失败`)}}
|
||||
</view>
|
||||
<view class='status' v-else>{{$t(`订单创建成功`)}}</view>
|
||||
<view class='wrapper'>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`订单号`)}}</view>
|
||||
<view class='itemCom'>{{orderId}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`下单时间`)}}</view>
|
||||
<view class='itemCom'>{{order_pay_info._add_time}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`支付方式`)}}</view>
|
||||
<view class='itemCom'>{{$t(order_pay_info._status._payType) || $t(`暂未支付`)}}</view>
|
||||
</view>
|
||||
<view class='item acea-row row-between-wrapper'>
|
||||
<view>{{$t(`支付金额`)}}</view>
|
||||
<view class='itemCom'>{{order_pay_info.pay_price}}</view>
|
||||
</view>
|
||||
<!--失败时加上这个 -->
|
||||
<view class='item acea-row row-between-wrapper'
|
||||
v-if="order_pay_info.paid==0 && order_pay_info.pay_type != 'offline'">
|
||||
<view>{{$t(`失败原因`)}}</view>
|
||||
<view class='itemCom'>{{status==2 ? $t(`取消支付`):msg}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--失败时： 重新购买 -->
|
||||
<view @tap="goOrderDetails" v-if="status==0">
|
||||
<button formType="submit" class='returnBnt bg-color' hover-class='none'>{{$t(`查看订单`)}}</button>
|
||||
</view>
|
||||
<view @tap="getOrderPayInfo" v-if="payType == 'ALLINPAY_PAY'">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`刷新支付状态`)}}</button>
|
||||
</view>
|
||||
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==1">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`重新购买`)}}</button>
|
||||
</view>
|
||||
<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==2">
|
||||
<button class='returnBnt bg-color' hover-class='none'>{{$t(`重新支付`)}}</button>
|
||||
</view>
|
||||
<button @click="goPink(order_pay_info.pink_id)" class='returnBnt cart-color' formType="submit"
|
||||
hover-class='none'
|
||||
v-if="order_pay_info.pink_id && order_pay_info.paid!=0 && status!=2 && status!=1">{{$t(`邀请好友参团`)}}</button>
|
||||
<button @click="goIndex" class='returnBnt cart-color' formType="submit" hover-class='none'
|
||||
v-else>{{$t(`返回首页`)}}</button>
|
||||
<view class="coupons" v-if='couponList.length'>
|
||||
<view class="title acea-row row-center-wrapper">
|
||||
<view class="line"></view>
|
||||
<view class="name">{{$t(`赠送优惠券`)}}</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between-wrapper" v-for="(item,index) in couponList" :key='index'
|
||||
v-if="index<2 || !couponsHidden">
|
||||
<view class="moneyCon acea-row row-between-wrapper">
|
||||
<view class="price acea-row row-center-wrapper">
|
||||
<view>
|
||||
{{$t(`￥`)}}<text>{{item.coupon_price}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{item.coupon_title}}</view>
|
||||
<view class="priceMin">{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="time">
|
||||
{{$t(`有效期`)}}:{{ item.add_time ? item.add_time + "-" : ""}}{{ item.end_time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="open acea-row row-center-wrapper" @click="openTap" v-if="couponList.length>2">
|
||||
{{couponsHidden?$t(`更多`):$t(`关闭`)}}<text class="iconfont"
|
||||
:class='couponsHidden==true?"icon-xiangxia":"icon-xiangshang"'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<lotteryModel v-show="orderLottery && order_pay_info.paid && loading && lotteryLoading" :options="options"
|
||||
@orderDetails="goOrderDetails" @lotteryShow="getOrderLottery"></lotteryModel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lotteryModel from './payLottery.vue'
|
||||
import {
|
||||
getOrderDetail,
|
||||
orderCoupon
|
||||
} from '@/api/order.js';
|
||||
import {
|
||||
openOrderSubscribe
|
||||
} from '@/utils/SubscribeMessage.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
components: {
|
||||
lotteryModel,
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
lotteryLoading: false,
|
||||
orderLottery: false,
|
||||
orderId: '',
|
||||
order_pay_info: {
|
||||
paid: 1,
|
||||
_status: {}
|
||||
},
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
status: 0,
|
||||
msg: '',
|
||||
couponsHidden: true,
|
||||
couponList: [],
|
||||
options: {},
|
||||
payType: ''
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getOrderPayInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.options = options
|
||||
if (!options.order_id) return this.$util.Tips({
|
||||
title: this.$t(`缺少参数无法查看订单支付状态`)
|
||||
}, {
|
||||
tab: 3,
|
||||
url: 1
|
||||
});
|
||||
this.orderId = options.order_id;
|
||||
this.status = options.status || 0;
|
||||
this.msg = options.msg || '';
|
||||
this.payType = options.payType || '';
|
||||
|
||||
// // #ifdef H5
|
||||
// document.addEventListener('visibilitychange', (e) => {
|
||||
// let state = document.visibilityState
|
||||
// if (state == 'hidden') {
|
||||
// console.log('用户离开了');
|
||||
// }
|
||||
// if (state == 'visible') {
|
||||
// this.getOrderPayInfo();
|
||||
// }
|
||||
// });
|
||||
// // #endif
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getOrderPayInfo();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOrderLottery(status) {
|
||||
this.orderLottery = status
|
||||
this.lotteryLoading = true
|
||||
},
|
||||
openTap() {
|
||||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||||
},
|
||||
onLoadFun: function() {
|
||||
this.getOrderPayInfo();
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 支付完成查询支付状态
|
||||
*
|
||||
*/
|
||||
getOrderPayInfo: function() {
|
||||
let that = this;
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载中`)
|
||||
});
|
||||
getOrderDetail(that.orderId).then(res => {
|
||||
uni.hideLoading();
|
||||
that.$set(that, 'order_pay_info', res.data);
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.paid ? that.$t(`支付成功`) : that.$t(`未支付`)
|
||||
});
|
||||
this.loading = true
|
||||
this.getOrderCoupon()
|
||||
}).catch(err => {
|
||||
this.loading = true
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getOrderCoupon() {
|
||||
let that = this;
|
||||
orderCoupon(that.orderId).then(res => {
|
||||
that.couponList = res.data;
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 去首页关闭当前所有页面
|
||||
*/
|
||||
goIndex: function(e) {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
// 去参团页面；
|
||||
goPink: function(id) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_combination_status/index?id=' + id
|
||||
});
|
||||
},
|
||||
/**
|
||||
*
|
||||
* 去订单详情页面
|
||||
*/
|
||||
goOrderDetails: function(e) {
|
||||
let that = this;
|
||||
// #ifdef MP
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载中`),
|
||||
})
|
||||
openOrderSubscribe().then(res => {
|
||||
uni.hideLoading();
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||||
});
|
||||
}).catch(() => {
|
||||
nui.hideLoading();
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + that.orderId
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.coupons {
|
||||
.title {
|
||||
margin: 30rpx 0 25rpx 0;
|
||||
|
||||
.line {
|
||||
width: 70rpx;
|
||||
height: 1px;
|
||||
background: #DCDCDC;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0 20rpx;
|
||||
|
||||
.item {
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.price {
|
||||
width: 236rpx;
|
||||
height: 160rpx;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
|
||||
text {
|
||||
font-size: 54rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 385rpx;
|
||||
|
||||
.name {
|
||||
font-size: #282828;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.priceMin {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 25rpx;
|
||||
margin: 5rpx 0 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-status {
|
||||
background-color: #fff;
|
||||
margin: 195rpx 30rpx 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 1rpx 0 28rpx 0;
|
||||
}
|
||||
|
||||
.payment-status .icons {
|
||||
font-size: 70rpx;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 140rpx;
|
||||
text-shadow: 0px 4px 0px rgba(255, 255, 255, 0.5);
|
||||
border: 6rpx solid #f5f5f5;
|
||||
margin: -76rpx auto 0 auto;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.payment-status .icons.icon-iconfontguanbi {
|
||||
text-shadow: 0px 4px 0px #6c6d6d;
|
||||
}
|
||||
|
||||
.payment-status .iconfont.fail {
|
||||
text-shadow: 0px 4px 0px #7a7a7a;
|
||||
}
|
||||
|
||||
.payment-status .status {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 25rpx 0 37rpx 0;
|
||||
}
|
||||
|
||||
.payment-status .wrapper {
|
||||
border: 1rpx solid #eee;
|
||||
margin: 0 30rpx 47rpx 30rpx;
|
||||
padding: 35rpx 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item {
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item~.item {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.payment-status .wrapper .item .itemCom {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.payment-status .returnBnt {
|
||||
width: 630rpx;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
margin: 0 auto 20rpx auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,227 +1,227 @@
|
||||
<template>
|
||||
<view class="index-product-wrapper" :class="iSshowH?'on':''" :style="'margin-top:'+mbConfig*2+'rpx;'"
|
||||
v-show="!isSortType">
|
||||
<view class="nav-bd"
|
||||
:style="{justifyContent:titleConfig===0?'flex-start':titleConfig===1?'space-around':'flex-end'}">
|
||||
<view class="item" v-for="(item,index) in explosiveMoney" :index="index"
|
||||
@click="ProductNavTab(item.link.activeVal,index)">
|
||||
<view class="txt" :style="{ 'color': index==ProductNavindex ? themeColor : '' }">
|
||||
{{$t(item.chiild[0].val)}}</view>
|
||||
<view class="label"
|
||||
:style="{ 'background': index==ProductNavindex ? themeColor : '','color': index==ProductNavindex ? '#fff' : '' }">
|
||||
{{$t(item.chiild[1].val)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 首发新品 -->
|
||||
<view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
|
||||
<view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
|
||||
<view class="pictrue">
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
<!-- <image :src="item.image" mode="aspectFit"></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class="text-info">
|
||||
<view class="title line1" v-if="titleShow">{{item.store_name}}</view>
|
||||
<view class="old-price" v-if="opriceShow"><text>{{$t(`￥`)}}</text>{{item.ot_price}}</view>
|
||||
<view class="price" :style="{color:fontColor}">
|
||||
<view v-if="priceShow">
|
||||
<text>{{$t(`￥`)}}</text>{{item.price}}
|
||||
</view>
|
||||
<view class="txt" :style="'border:1px solid '+labelColor+';color:'+labelColor"
|
||||
:class="priceShow?'':'on'" v-if="item.checkCoupon && couponShow">{{$t(`券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'promotionList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tempArr: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
iSshowH: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ProductNavindex: 0,
|
||||
explosiveMoney: this.dataConfig.tabConfig.list,
|
||||
numConfig: this.dataConfig.numConfig.val,
|
||||
// imgStyle: this.dataConfig.imgStyle.type,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
titleShow: this.dataConfig.titleShow.val, //标题是否显示
|
||||
opriceShow: this.dataConfig.opriceShow.val, //原价是否显示
|
||||
priceShow: this.dataConfig.priceShow.val, //价格是否显示
|
||||
couponShow: this.dataConfig.couponShow.val, //优惠券标签是否显示
|
||||
titleConfig: this.dataConfig.titleConfig.type, //标题位置
|
||||
fontColor: this.dataConfig.fontColor.color[0].item,
|
||||
labelColor: this.dataConfig.labelColor.color[0].item
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 首发新品切换
|
||||
ProductNavTab(type, index) {
|
||||
this.ProductNavindex = index;
|
||||
this.$emit('changeTab', type);
|
||||
},
|
||||
goDetail(item) {
|
||||
this.$emit('detail', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-product-wrapper {
|
||||
margin: 30rpx 20rpx 0 20rpx;
|
||||
|
||||
&.on {
|
||||
min-height: 1500rpx;
|
||||
}
|
||||
|
||||
.nav-bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25%;
|
||||
|
||||
&.on {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 124rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
width: 345rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
/deep/.easy-loadimage image {
|
||||
width: 100%;
|
||||
height: 346rpx;
|
||||
}
|
||||
|
||||
.pictrue_log {
|
||||
width: 92rpx;
|
||||
height: 44rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 346rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
padding: 10rpx 20rpx 15rpx;
|
||||
|
||||
.title {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #AAAAAA;
|
||||
text-decoration: line-through;
|
||||
|
||||
text {
|
||||
margin-right: 2px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
|
||||
text {
|
||||
padding-bottom: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
|
||||
&.on {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.on {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="index-product-wrapper" :class="iSshowH?'on':''" :style="'margin-top:'+mbConfig*2+'rpx;'"
|
||||
v-show="!isSortType">
|
||||
<view class="nav-bd"
|
||||
:style="{justifyContent:titleConfig===0?'flex-start':titleConfig===1?'space-around':'flex-end'}">
|
||||
<view class="item" v-for="(item,index) in explosiveMoney" :index="index"
|
||||
@click="ProductNavTab(item.link.activeVal,index)">
|
||||
<view class="txt" :style="{ 'color': index==ProductNavindex ? themeColor : '' }">
|
||||
{{$t(item.chiild[0].val)}}</view>
|
||||
<view class="label"
|
||||
:style="{ 'background': index==ProductNavindex ? themeColor : '','color': index==ProductNavindex ? '#fff' : '' }">
|
||||
{{$t(item.chiild[1].val)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 首发新品 -->
|
||||
<view class="list-box animated" :class='tempArr.length > 0?"fadeIn on":""'>
|
||||
<view class="item" v-for="(item,index) in tempArr" :key="index" @click="goDetail(item)">
|
||||
<view class="pictrue">
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class" :style="'background-color:'+labelColor"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
<!-- <image :src="item.image" mode="aspectFit"></image> -->
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
</view>
|
||||
<view class="text-info">
|
||||
<view class="title line1" v-if="titleShow">{{item.store_name}}</view>
|
||||
<view class="old-price" v-if="opriceShow"><text>{{$t(`￥`)}}</text>{{item.ot_price}}</view>
|
||||
<view class="price" :style="{color:fontColor}">
|
||||
<view v-if="priceShow">
|
||||
<text>{{$t(`￥`)}}</text>{{item.price}}
|
||||
</view>
|
||||
<view class="txt" :style="'border:1px solid '+labelColor+';color:'+labelColor"
|
||||
:class="priceShow?'':'on'" v-if="item.checkCoupon && couponShow">{{$t(`券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'promotionList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
tempArr: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
iSshowH: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSortType: {
|
||||
type: String | Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ProductNavindex: 0,
|
||||
explosiveMoney: this.dataConfig.tabConfig.list,
|
||||
numConfig: this.dataConfig.numConfig.val,
|
||||
// imgStyle: this.dataConfig.imgStyle.type,
|
||||
mbConfig: this.dataConfig.mbConfig.val,
|
||||
themeColor: this.dataConfig.themeColor.color[0].item,
|
||||
titleShow: this.dataConfig.titleShow.val, //标题是否显示
|
||||
opriceShow: this.dataConfig.opriceShow.val, //原价是否显示
|
||||
priceShow: this.dataConfig.priceShow.val, //价格是否显示
|
||||
couponShow: this.dataConfig.couponShow.val, //优惠券标签是否显示
|
||||
titleConfig: this.dataConfig.titleConfig.type, //标题位置
|
||||
fontColor: this.dataConfig.fontColor.color[0].item,
|
||||
labelColor: this.dataConfig.labelColor.color[0].item
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 首发新品切换
|
||||
ProductNavTab(type, index) {
|
||||
this.ProductNavindex = index;
|
||||
this.$emit('changeTab', type);
|
||||
},
|
||||
goDetail(item) {
|
||||
this.$emit('detail', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-product-wrapper {
|
||||
margin: 30rpx 20rpx 0 20rpx;
|
||||
|
||||
&.on {
|
||||
min-height: 1500rpx;
|
||||
}
|
||||
|
||||
.nav-bd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 25%;
|
||||
|
||||
&.on {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 124rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.item {
|
||||
width: 345rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
/deep/.easy-loadimage image {
|
||||
width: 100%;
|
||||
height: 346rpx;
|
||||
}
|
||||
|
||||
.pictrue_log {
|
||||
width: 92rpx;
|
||||
height: 44rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 346rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
padding: 10rpx 20rpx 15rpx;
|
||||
|
||||
.title {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.old-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #AAAAAA;
|
||||
text-decoration: line-through;
|
||||
|
||||
text {
|
||||
margin-right: 2px;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 36rpx;
|
||||
font-weight: 550;
|
||||
|
||||
text {
|
||||
padding-bottom: 4rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: normal;
|
||||
|
||||
&.on {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.on {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,203 +1,203 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="isShow" class="specialArea acea-row row-between-wrapper">
|
||||
<view class="assemble skeleton-rect" hover-class="none" @click="gopage(activityOne.info[2].value)">
|
||||
<!-- <easy-loadimage mode="widthFix" :image-src="activityOne.img"></easy-loadimage> -->
|
||||
<image :src="activityOne.img" alt="" srcset="">
|
||||
<!-- <view class="text" v-if="activityOne.info">
|
||||
<view class="name">{{ activityOne.info[0].value }}</view>
|
||||
<view class="infor">{{ activityOne.info[1].value }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="list acea-row row-column-between">
|
||||
<view class="item skeleton-rect" v-for="(item, index) in activity" :key="index"
|
||||
@click="gopage(item.info[2].value)">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.img"></easy-loadimage>
|
||||
<!-- <view class="text">
|
||||
<view class="name">{{ item.info[0].value }}</view>
|
||||
<view class="infor">{{ item.info[1].value}}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!isShow && isIframe" class="specialArea acea-row row-between-wrapper">
|
||||
<view class="assemble" hover-class="none" @click="gopage(activityOne.info[2].value)">
|
||||
<image :src="activityOne.img" alt="img" />
|
||||
<!-- <view class="text" v-if="activityOne.info">
|
||||
<view class="name">{{ activityOne.info[0].value }}</view>
|
||||
<view class="infor">{{ activityOne.info[1].value }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="list acea-row row-column-between">
|
||||
<view class="item" v-for="(item, index) in activity" :key="index" @click="gopage(item.info[2].value)">
|
||||
<image :src="item.img" alt="img" />
|
||||
<!-- <view class="text">
|
||||
<view class="name">{{ item.info[0].value }}</view>
|
||||
<view class="infor">{{ item.info[1].value}}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'activity',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
let data = JSON.parse(JSON.stringify(nVal.imgList.list))
|
||||
this.activityOne = nVal.imgList.list[0]
|
||||
data.splice(0, 1)
|
||||
this.activity = data
|
||||
this.isShow = nVal.isShow.val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activity: [],
|
||||
activityOne: {},
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.specialArea {
|
||||
background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
|
||||
// background-color: $uni-bg-color;
|
||||
padding: 0 $uni-index-margin-col 0 $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
}
|
||||
|
||||
.specialArea .assemble {
|
||||
width: 336rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.specialArea .assemble image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.specialArea .assemble {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 336rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.specialArea .assemble .text {
|
||||
position: absolute;
|
||||
top: 37rpx;
|
||||
left: 22rpx;
|
||||
}
|
||||
|
||||
.specialArea .name {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.specialArea .infor {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.specialArea .list {
|
||||
width: 344rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.specialArea .item {
|
||||
width: 100%;
|
||||
height: 146rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.specialArea .item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.specialArea .item {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 146rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.specialArea .item .text {
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 28rpx;
|
||||
}
|
||||
|
||||
.specialArea .item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.specialArea .item .text {
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 28rpx;
|
||||
}
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="isShow" class="specialArea acea-row row-between-wrapper">
|
||||
<view class="assemble skeleton-rect" hover-class="none" @click="gopage(activityOne.info[2].value)">
|
||||
<!-- <easy-loadimage mode="widthFix" :image-src="activityOne.img"></easy-loadimage> -->
|
||||
<image :src="activityOne.img" alt="" srcset="">
|
||||
<!-- <view class="text" v-if="activityOne.info">
|
||||
<view class="name">{{ activityOne.info[0].value }}</view>
|
||||
<view class="infor">{{ activityOne.info[1].value }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="list acea-row row-column-between">
|
||||
<view class="item skeleton-rect" v-for="(item, index) in activity" :key="index"
|
||||
@click="gopage(item.info[2].value)">
|
||||
<easy-loadimage mode="widthFix" :image-src="item.img"></easy-loadimage>
|
||||
<!-- <view class="text">
|
||||
<view class="name">{{ item.info[0].value }}</view>
|
||||
<view class="infor">{{ item.info[1].value}}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!isShow && isIframe" class="specialArea acea-row row-between-wrapper">
|
||||
<view class="assemble" hover-class="none" @click="gopage(activityOne.info[2].value)">
|
||||
<image :src="activityOne.img" alt="img" />
|
||||
<!-- <view class="text" v-if="activityOne.info">
|
||||
<view class="name">{{ activityOne.info[0].value }}</view>
|
||||
<view class="infor">{{ activityOne.info[1].value }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="list acea-row row-column-between">
|
||||
<view class="item" v-for="(item, index) in activity" :key="index" @click="gopage(item.info[2].value)">
|
||||
<image :src="item.img" alt="img" />
|
||||
<!-- <view class="text">
|
||||
<view class="name">{{ item.info[0].value }}</view>
|
||||
<view class="infor">{{ item.info[1].value}}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'activity',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
let data = JSON.parse(JSON.stringify(nVal.imgList.list))
|
||||
this.activityOne = nVal.imgList.list[0]
|
||||
data.splice(0, 1)
|
||||
this.activity = data
|
||||
this.isShow = nVal.isShow.val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activity: [],
|
||||
activityOne: {},
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) ==
|
||||
-1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.specialArea {
|
||||
background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
|
||||
// background-color: $uni-bg-color;
|
||||
padding: 0 $uni-index-margin-col 0 $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
}
|
||||
|
||||
.specialArea .assemble {
|
||||
width: 336rpx;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.specialArea .assemble image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.specialArea .assemble {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 336rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.specialArea .assemble .text {
|
||||
position: absolute;
|
||||
top: 37rpx;
|
||||
left: 22rpx;
|
||||
}
|
||||
|
||||
.specialArea .name {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.specialArea .infor {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.specialArea .list {
|
||||
width: 344rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.specialArea .item {
|
||||
width: 100%;
|
||||
height: 146rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.specialArea .item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.specialArea .item {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 146rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.specialArea .item .text {
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 28rpx;
|
||||
}
|
||||
|
||||
.specialArea .item image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.specialArea .item .text {
|
||||
position: absolute;
|
||||
top: 23rpx;
|
||||
left: 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,159 +1,159 @@
|
||||
<template>
|
||||
<view class="menu-main">
|
||||
<view class='nav acea-row acea-row' v-if="isShow && menus.length">
|
||||
<block v-for="(item,index) in menus" :key="index">
|
||||
<view class='item' @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src='item.img'></easy-loadimage>
|
||||
<!-- <image class="skeleton-radius" :src='item.img'></image> -->
|
||||
</view>
|
||||
<view class="menu-txt">{{$t(item.info[0].value)}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='nav acea-row acea-row' v-if="!isShow && isIframe && menus.length">
|
||||
<block v-for="(item,index) in menus" :key="index">
|
||||
<view class='item' @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.img'></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{item.info[0].value}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="nav acea-row acea-row" v-if="isIframe && !menus.length">
|
||||
<view class='item'>
|
||||
<view class='pictrue default'>
|
||||
<text class="iconfont icon-icon25201"></text>
|
||||
</view>
|
||||
<view class="menu-txt">{{$t(`默认`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.menus = nVal.imgList.list;
|
||||
this.isShow = nVal.isShow.val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
menusTap(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
// uni.navigateTo({
|
||||
// url: url
|
||||
// })
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav {
|
||||
margin: 0 30rpx;
|
||||
// margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
.item {
|
||||
margin-top: 26rpx;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
&.default {
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-txt {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
&.four {
|
||||
width: 25%;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="menu-main">
|
||||
<view class='nav acea-row acea-row' v-if="isShow && menus.length">
|
||||
<block v-for="(item,index) in menus" :key="index">
|
||||
<view class='item' @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src='item.img'></easy-loadimage>
|
||||
<!-- <image class="skeleton-radius" :src='item.img'></image> -->
|
||||
</view>
|
||||
<view class="menu-txt">{{$t(item.info[0].value)}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='nav acea-row acea-row' v-if="!isShow && isIframe && menus.length">
|
||||
<block v-for="(item,index) in menus" :key="index">
|
||||
<view class='item' @click="menusTap(item.info[1].value)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.img'></image>
|
||||
</view>
|
||||
<view class="menu-txt">{{item.info[0].value}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="nav acea-row acea-row" v-if="isIframe && !menus.length">
|
||||
<view class='item'>
|
||||
<view class='pictrue default'>
|
||||
<text class="iconfont icon-icon25201"></text>
|
||||
</view>
|
||||
<view class="menu-txt">{{$t(`默认`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
name: 'menus',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.menus = nVal.imgList.list;
|
||||
this.isShow = nVal.isShow.val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menus: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
menusTap(url) {
|
||||
goPage().then(res => {
|
||||
if (url.indexOf("http") != -1) {
|
||||
// #ifdef H5
|
||||
location.href = url
|
||||
// #endif
|
||||
} else {
|
||||
// uni.navigateTo({
|
||||
// url: url
|
||||
// })
|
||||
if (['/pages/goods_cate/goods_cate', '/pages/order_addcart/order_addcart',
|
||||
'/pages/user/index'
|
||||
].indexOf(url) == -1) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav {
|
||||
margin: 0 30rpx;
|
||||
// margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
.item {
|
||||
margin-top: 26rpx;
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
&.default {
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-txt {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
&.four {
|
||||
width: 25%;
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,334 +1,334 @@
|
||||
<template>
|
||||
<view class="">
|
||||
|
||||
<view class="index-wrapper" :style="colorStyle">
|
||||
<view class='wrapper' v-if="isShow && firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in firstList" :key='index'>
|
||||
<view class='item' @click="goDetail(item)">
|
||||
<view class='img-box'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type ==='1'">
|
||||
{{$t(`秒杀`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">
|
||||
{{$t(`砍价`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">
|
||||
{{$t(`拼团`)}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'><text class="rmb">{{$t(`￥`)}}</text>{{item.price}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='wrapper' v-if="!isShow && isIframe && firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in firstList" :key='index'>
|
||||
<view class='item' @click="goDetail(item)">
|
||||
<view class='img-box'>
|
||||
<image :src='item.image'></image>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type ==='1'">
|
||||
{{$t(`秒杀`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">
|
||||
{{$t(`砍价`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">
|
||||
{{$t(`拼团`)}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>
|
||||
<text class="rmb">{{$t(`￥`)}}</text>{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='wrapper' v-if="isIframe && !firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<view class="empty-img">{{$t(`首发新品，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage,
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
mapState,
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'goodList',
|
||||
mixins: [colors],
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['uid']),
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig.activeValue || '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig.activeValue);
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
firstList: [],
|
||||
firstInfo: this.$t(`多个优质商品最新上架`),
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.firstList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-wrapper {
|
||||
background-color: $uni-bg-color;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
}
|
||||
|
||||
.title {
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper .newProducts {
|
||||
white-space: nowrap;
|
||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .pro-info {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 19rpx 10rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .money {
|
||||
padding: 0 10rpx 18rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.rmb {
|
||||
font-weight: bold;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 640rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
<template>
|
||||
<view class="">
|
||||
|
||||
<view class="index-wrapper" :style="colorStyle">
|
||||
<view class='wrapper' v-if="isShow && firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in firstList" :key='index'>
|
||||
<view class='item' @click="goDetail(item)">
|
||||
<view class='img-box'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type ==='1'">
|
||||
{{$t(`秒杀`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">
|
||||
{{$t(`砍价`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">
|
||||
{{$t(`拼团`)}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'><text class="rmb">{{$t(`￥`)}}</text>{{item.price}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='wrapper' v-if="!isShow && isIframe && firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in firstList" :key='index'>
|
||||
<view class='item' @click="goDetail(item)">
|
||||
<view class='img-box'>
|
||||
<image :src='item.image'></image>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type ==='1'">
|
||||
{{$t(`秒杀`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">
|
||||
{{$t(`砍价`)}}
|
||||
</text>
|
||||
<text class="pictrue_log_medium pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">
|
||||
{{$t(`拼团`)}}
|
||||
</text>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>
|
||||
<text class="rmb">{{$t(`￥`)}}</text>{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='wrapper' v-if="isIframe && !firstList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='newProducts'>
|
||||
<view class="empty-img">{{$t(`首发新品，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
goPage,
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
mapState,
|
||||
mapGetters
|
||||
} from 'vuex';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'goodList',
|
||||
mixins: [colors],
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['uid']),
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig.activeValue || '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig.activeValue);
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
firstList: [],
|
||||
firstInfo: this.$t(`多个优质商品最新上架`),
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.firstList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-wrapper {
|
||||
background-color: $uni-bg-color;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
}
|
||||
|
||||
.title {
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wrapper .newProducts {
|
||||
white-space: nowrap;
|
||||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .img-box {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .pro-info {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 19rpx 10rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.wrapper .newProducts .item .money {
|
||||
padding: 0 10rpx 18rpx 10rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.rmb {
|
||||
font-weight: bold;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 640rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,393 +1,393 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='hotList skeleton-rect index-wrapper' v-if="isShow && hotList.length">
|
||||
<!-- <view class='hot-bg'>
|
||||
</view> -->
|
||||
<!-- <view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-middle'>
|
||||
<block v-for="(item,index) in hotList" :key='index'>
|
||||
<view class='item' @click="gopage('/pages/goods_details/index?id='+item.id)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<image v-if="index == 0" src='/static/images/one.png' class='numPic'></image>
|
||||
<image v-else-if="index == 1" src='/static/images/two.png' class='numPic'></image>
|
||||
<image v-else-if="index == 2" src='/static/images/three.png' class='numPic'></image>
|
||||
</view>
|
||||
<view class="rectangle">
|
||||
{{$t(`热度 TOP`)}} {{index+1}}
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<!-- <view class='money font-color'>
|
||||
￥
|
||||
<text class='num'>{{item.price}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='hotList index-wrapper' v-if="!isShow && isIframe && hotList.length">
|
||||
<!-- <view class='hot-bg'>
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-middle'>
|
||||
<block v-for="(item,index) in hotList" :key='index'>
|
||||
<view class='item' @click="gopage('/pages/goods_details/index?id='+item.id)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<image v-if="index == 0" src='/static/images/one.png' class='numPic'></image>
|
||||
<image v-else-if="index == 1" src='/static/images/two.png' class='numPic'></image>
|
||||
<image v-else-if="index == 2" src='/static/images/three.png' class='numPic'></image>
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<!-- <view class='money font-color'>
|
||||
￥
|
||||
<text class='num'>{{item.price}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='hotList index-wrapper' v-if="isIframe && !hotList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class='hot-bg'>
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="empty-img">{{$t(`排行榜、暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import colors from "@/mixins/color";
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
mixins: [colors],
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig && nVal.selectConfig.activeValue ? nVal.selectConfig
|
||||
.activeValue : '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig && nVal.selectSortConfig.activeValue ? nVal
|
||||
.selectSortConfig.activeValue : '');
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
hotList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: 3,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.hotList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hotList {
|
||||
background-color: #fff;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .hot-bg {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
margin-top: 15rpx;
|
||||
|
||||
}
|
||||
|
||||
// .hotList .title {
|
||||
// padding: 20rpx 20rpx 0 20rpx;
|
||||
|
||||
// .iconfont {
|
||||
// color: var(--view-theme);
|
||||
// font-size: 36rpx;
|
||||
// margin-top: 4rpx;
|
||||
// margin-right: 12rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
.hotList .title .text {
|
||||
display: flex;
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// .hotList .title .text .label {
|
||||
// font-size: $uni-index-title-font-size;
|
||||
// font-weight: bold;
|
||||
// color: #282828;
|
||||
// margin-right: 12rpx;
|
||||
// }
|
||||
|
||||
// .hotList .title .more {
|
||||
// font-size: 26rpx;
|
||||
// color: #999999;
|
||||
// ;
|
||||
// }
|
||||
|
||||
// .hotList .title .more .iconfont {
|
||||
// font-size: 25rpx;
|
||||
// margin-left: 10rpx;
|
||||
// }
|
||||
|
||||
.hotList .list {
|
||||
width: 690rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0rpx auto 0 auto;
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hotList .list .item {
|
||||
width: 200rpx;
|
||||
background: var(--view-op-ten);
|
||||
border-radius: 12rpx;
|
||||
|
||||
.rectangle {
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
margin-top: -30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
width: 172rpx;
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.hotList .list .item~.item {
|
||||
// margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
margin: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue .numPic {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 7rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .name {
|
||||
font-size: 26rpx;
|
||||
color: var(--view-theme);
|
||||
margin-top: 12rpx;
|
||||
padding: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .money {
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hotList .list .item .money .num {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
line-height: 340rpx;
|
||||
background: #ccc;
|
||||
font-size: 40rpx;
|
||||
color: #000;
|
||||
border-radius: 14rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='hotList skeleton-rect index-wrapper' v-if="isShow && hotList.length">
|
||||
<!-- <view class='hot-bg'>
|
||||
</view> -->
|
||||
<!-- <view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-middle'>
|
||||
<block v-for="(item,index) in hotList" :key='index'>
|
||||
<view class='item' @click="gopage('/pages/goods_details/index?id='+item.id)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<image v-if="index == 0" src='/static/images/one.png' class='numPic'></image>
|
||||
<image v-else-if="index == 1" src='/static/images/two.png' class='numPic'></image>
|
||||
<image v-else-if="index == 2" src='/static/images/three.png' class='numPic'></image>
|
||||
</view>
|
||||
<view class="rectangle">
|
||||
{{$t(`热度 TOP`)}} {{index+1}}
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<!-- <view class='money font-color'>
|
||||
￥
|
||||
<text class='num'>{{item.price}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='hotList index-wrapper' v-if="!isShow && isIframe && hotList.length">
|
||||
<!-- <view class='hot-bg'>
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-middle'>
|
||||
<block v-for="(item,index) in hotList" :key='index'>
|
||||
<view class='item' @click="gopage('/pages/goods_details/index?id='+item.id)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<image v-if="index == 0" src='/static/images/one.png' class='numPic'></image>
|
||||
<image v-else-if="index == 1" src='/static/images/two.png' class='numPic'></image>
|
||||
<image v-else-if="index == 2" src='/static/images/three.png' class='numPic'></image>
|
||||
</view>
|
||||
<view class='name line1'>{{item.store_name}}</view>
|
||||
<!-- <view class='money font-color'>
|
||||
￥
|
||||
<text class='num'>{{item.price}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='hotList index-wrapper' v-if="isIframe && !hotList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-shoufaxinpin"></text>
|
||||
{{titleInfo[0].val}}
|
||||
<!-- <text class='new font-color'>NEW~</text> -->
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class='hot-bg'>
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text line1'>
|
||||
<text class='label'><text class="iconfont icon-paihangbang"></text>{{titleInfo[0].val}}</text>
|
||||
{{titleInfo[1].val}}
|
||||
</view>
|
||||
<view class='more' hover-class="none" @click="gopage(titleInfo[2].val)">
|
||||
更多
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="empty-img">{{$t(`排行榜、暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import colors from "@/mixins/color";
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
mixins: [colors],
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig && nVal.selectConfig.activeValue ? nVal.selectConfig
|
||||
.activeValue : '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig && nVal.selectSortConfig.activeValue ? nVal
|
||||
.selectSortConfig.activeValue : '');
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
hotList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: 3,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.hotList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hotList {
|
||||
background-color: #fff;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .hot-bg {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
margin-top: 15rpx;
|
||||
|
||||
}
|
||||
|
||||
// .hotList .title {
|
||||
// padding: 20rpx 20rpx 0 20rpx;
|
||||
|
||||
// .iconfont {
|
||||
// color: var(--view-theme);
|
||||
// font-size: 36rpx;
|
||||
// margin-top: 4rpx;
|
||||
// margin-right: 12rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
.hotList .title .text {
|
||||
display: flex;
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// .hotList .title .text .label {
|
||||
// font-size: $uni-index-title-font-size;
|
||||
// font-weight: bold;
|
||||
// color: #282828;
|
||||
// margin-right: 12rpx;
|
||||
// }
|
||||
|
||||
// .hotList .title .more {
|
||||
// font-size: 26rpx;
|
||||
// color: #999999;
|
||||
// ;
|
||||
// }
|
||||
|
||||
// .hotList .title .more .iconfont {
|
||||
// font-size: 25rpx;
|
||||
// margin-left: 10rpx;
|
||||
// }
|
||||
|
||||
.hotList .list {
|
||||
width: 690rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0rpx auto 0 auto;
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hotList .list .item {
|
||||
width: 200rpx;
|
||||
background: var(--view-op-ten);
|
||||
border-radius: 12rpx;
|
||||
|
||||
.rectangle {
|
||||
margin: 0 auto;
|
||||
border-radius: 30rpx;
|
||||
text-align: center;
|
||||
margin-top: -30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
width: 172rpx;
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.hotList .list .item~.item {
|
||||
// margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
margin: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hotList .list .item .pictrue .numPic {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 7rpx;
|
||||
left: 7rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .name {
|
||||
font-size: 26rpx;
|
||||
color: var(--view-theme);
|
||||
margin-top: 12rpx;
|
||||
padding: 0 10rpx 10rpx 10rpx;
|
||||
}
|
||||
|
||||
.hotList .list .item .money {
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hotList .list .item .money .num {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
line-height: 340rpx;
|
||||
background: #ccc;
|
||||
font-size: 40rpx;
|
||||
color: #000;
|
||||
border-radius: 14rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,392 +1,392 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="productList" :style="colorStyle">
|
||||
<view class='index-wrapper acea-row row-between-wrapper' v-if="isShow && bastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class='item' v-for="(item,index) in bastList" :key="index" @click="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<!-- <span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '1'">秒杀</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '2'">砍价</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '3'">拼团</span> -->
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='name line2'>{{item.store_name}}</view>
|
||||
<view class="type">
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '1'">{{$t(`秒杀`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '2'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '3'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class='vip acea-row'>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image>
|
||||
</view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.is_vip">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/vip.png'></image>
|
||||
</view>
|
||||
<!-- <view>已售{{item.sales}}{{item.unit_name}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='index-wrapper list acea-row row-between-wrapper' v-if="!isShow && isIframe && bastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
|
||||
<view class='item' v-for="(item,index) in bastList" :key="index" @click="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<!-- <span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '1'">秒杀</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '2'">砍价</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '3'">拼团</span> -->
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='name line2'>{{item.store_name}}</view>
|
||||
<view class="type">
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '1'">{{$t(`秒杀`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '2'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '3'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.checkCoupon">{{$t(`ticket`)}}</view>
|
||||
</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip acea-row row-between-wrapper'>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image>
|
||||
</view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.is_vip">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/vip.png'></image>
|
||||
</view>
|
||||
<!-- <view>已售{{item.sales}}{{item.unit_name}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="isIframe && !bastList.length">
|
||||
<view class='index-wrapper' v-if="isIframe && !fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<view class="empty-img">{{$t(`精品推荐，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
import goodLists from '@/components/goodList/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'goodList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
mixins: [colors],
|
||||
components: {
|
||||
goodLists
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig.activeValue || '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig.activeValue);
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
bastList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.bastList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.productList {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: $uni-border-radius-index;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item {
|
||||
width: 100%;
|
||||
padding: 25rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
// border:1rpx solid #eee;
|
||||
}
|
||||
|
||||
.productList .item .pictrue {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.productList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.productList .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item:nth-child(even) {
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.productList .item .text {
|
||||
width: 460rpx;
|
||||
padding: 0rpx 17rpx 0rpx 17rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
|
||||
.type-sty {
|
||||
padding: 0 5rpx;
|
||||
border: 1px solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
|
||||
.productList .item .text .vip {
|
||||
font-size: 22rpx;
|
||||
color: var(--view-priceColor);
|
||||
margin-top: 7rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.productList .item .text .vip .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .item .text .vip .vip-money image {
|
||||
width: 46rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
|
||||
.item-box {
|
||||
margin: 0 auto;
|
||||
}
|
||||
<template>
|
||||
<view>
|
||||
<view class="productList" :style="colorStyle">
|
||||
<view class='index-wrapper acea-row row-between-wrapper' v-if="isShow && bastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{$t(titleInfo[0].val)}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
<view class='item' v-for="(item,index) in bastList" :key="index" @click="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
|
||||
<!-- <span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '1'">秒杀</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '2'">砍价</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '3'">拼团</span> -->
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='name line2'>{{item.store_name}}</view>
|
||||
<view class="type">
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '1'">{{$t(`秒杀`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '2'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '3'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class='vip acea-row'>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image>
|
||||
</view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.is_vip">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/vip.png'></image>
|
||||
</view>
|
||||
<!-- <view>已售{{item.sales}}{{item.unit_name}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class='index-wrapper list acea-row row-between-wrapper' v-if="!isShow && isIframe && bastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<view class='more' @click="gopage(titleInfo[2].val)">
|
||||
{{$t(`更多`)}}
|
||||
<text class='iconfont icon-jiantou'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-box">
|
||||
|
||||
<view class='item' v-for="(item,index) in bastList" :key="index" @click="goDetail(item)">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<!-- <span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '1'">秒杀</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '2'">砍价</span>
|
||||
<span class="pictrue_log_class pictrue_log_big" v-if="item.activity && item.activity.type === '3'">拼团</span> -->
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='name line2'>{{item.store_name}}</view>
|
||||
<view class="type">
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '1'">{{$t(`秒杀`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '2'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.activity && item.activity.type == '3'">{{$t(`砍价`)}}
|
||||
</view>
|
||||
<view class="type-sty" v-if="item.checkCoupon">{{$t(`ticket`)}}</view>
|
||||
</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip acea-row row-between-wrapper'>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.base">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image>
|
||||
</view>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0 && item.is_vip">
|
||||
{{$t(`￥`)}}{{item.vip_price}}
|
||||
<image src='/static/images/vip.png'></image>
|
||||
</view>
|
||||
<!-- <view>已售{{item.sales}}{{item.unit_name}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="isIframe && !bastList.length">
|
||||
<view class='index-wrapper' v-if="isIframe && !fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>
|
||||
<text class="iconfont icon-jingpintuijian1"></text>
|
||||
{{titleInfo[0].val}}
|
||||
</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<view class="empty-img">{{$t(`精品推荐，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
import goodLists from '@/components/goodList/index.vue'
|
||||
import colors from "@/mixins/color";
|
||||
export default {
|
||||
name: 'goodList',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
mixins: [colors],
|
||||
components: {
|
||||
goodLists
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.selectType = nVal.tabConfig.tabVal;
|
||||
this.$set(this, 'selectId', nVal.selectConfig.activeValue || '');
|
||||
this.$set(this, 'type', nVal.selectSortConfig.activeValue);
|
||||
this.salesOrder = nVal.goodsSort.type == 1 ? 'desc' : '';
|
||||
this.newsOrder = nVal.goodsSort.type == 2 ? 'news' : '';
|
||||
this.ids = nVal.ids ? nVal.ids.join(',') : '';
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
this.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
circular: true,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
bastList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 产品列表
|
||||
productslist: function() {
|
||||
let that = this;
|
||||
let data = {};
|
||||
if (that.selectType) {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.limit,
|
||||
type: that.type,
|
||||
ids: that.ids,
|
||||
selectType: that.selectType
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
page: that.page,
|
||||
limit: that.numConfig <= that.limit ? that.numConfig : that.limit,
|
||||
type: that.type,
|
||||
newsOrder: that.newsOrder,
|
||||
salesOrder: that.salesOrder,
|
||||
selectId: that.selectId,
|
||||
selectType: that.selectType
|
||||
}
|
||||
}
|
||||
getHomeProducts(data).then(res => {
|
||||
that.bastList = res.data.list;
|
||||
}).catch(err => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
gopage(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
goDetail(item) {
|
||||
goPage().then(res => {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.productList {
|
||||
background-color: #fff;
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: $uni-border-radius-index;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item {
|
||||
width: 100%;
|
||||
padding: 25rpx 0;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
// border:1rpx solid #eee;
|
||||
}
|
||||
|
||||
.productList .item .pictrue {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.productList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.productList .item .pictrue {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item:nth-child(even) {
|
||||
border-top: 1rpx solid #EEEEEE;
|
||||
border-bottom: 1rpx solid #EEEEEE;
|
||||
}
|
||||
|
||||
.productList .item .text {
|
||||
width: 460rpx;
|
||||
padding: 0rpx 17rpx 0rpx 17rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: flex;
|
||||
|
||||
.type-sty {
|
||||
padding: 0 5rpx;
|
||||
border: 1px solid var(--view-theme);
|
||||
color: var(--view-theme);
|
||||
font-size: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
|
||||
.productList .item .text .vip {
|
||||
font-size: 22rpx;
|
||||
color: var(--view-priceColor);
|
||||
margin-top: 7rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.productList .item .text .vip .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .item .text .vip .vip-money image {
|
||||
width: 46rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.font-color {
|
||||
color: var(--view-priceColor);
|
||||
}
|
||||
|
||||
.item-box {
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,249 +1,249 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='index-wrapper skeleton-rect' v-if="isShow && fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{$t(titleInfo[0].val)}}</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in fastList" :key='index'>
|
||||
<view hover-class="none" class='item'
|
||||
@click="gopage('/pages/goods/goods_list/index?sid='+item.id+'&title='+item.cate_name)">
|
||||
<view class='img-box'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.pic"></easy-loadimage>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{$t(item.cate_name)}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='index-wrapper' v-if="!isShow && isIframe && fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{titleInfo[0].val}}</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in fastList" :key='index'>
|
||||
<view hover-class="none" class='item'
|
||||
@click="gopage('/pages/goods/goods_list/index?sid='+item.id+'&title='+item.cate_name)">
|
||||
<view class='img-box'>
|
||||
<image :src='item.pic'></image>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.cate_name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='index-wrapper' v-if="isIframe && !fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{titleInfo[0].val}}</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<view class="empty-img">{{$t(`快速选择，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
// import {
|
||||
// mapState
|
||||
// } from 'vuex'
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
category
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
name: 'scrollBox',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.tabConfig = nVal.tabConfig ? nVal.tabConfig.tabVal : 0;
|
||||
this.selectConfig = nVal.selectConfig.activeValue || '';
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
if (this.tabConfig) {
|
||||
this.fastList = nVal.goodsList.list
|
||||
} else {
|
||||
this.category();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
fastInfo: this.$t(`上百种商品分类任您选择`),
|
||||
fastList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
numConfig: 0,
|
||||
selectConfig: 0,
|
||||
tabConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
category() {
|
||||
category({
|
||||
pid: this.selectConfig,
|
||||
limit: this.numConfig
|
||||
}).then(res => {
|
||||
this.fastList = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-wrapper {
|
||||
background-color: $uni-bg-color;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.scroll-product {
|
||||
white-space: nowrap;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.scroll-product .item {
|
||||
display: inline-block;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
// box-shadow: 0 40rpx 30rpx -10rpx #eee;
|
||||
// background: linear-gradient(180deg, #fff 0%, #fff 30%, rgba(255, 96, 16, 0.2) 100%);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 207, 183, 0.65) 100%);
|
||||
color: #FF7E00;
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-of-type(3n) {
|
||||
color: #1DB0FC;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(187, 221, 255, 0.65) 100%);
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-of-type(3n-1) {
|
||||
color: #FF448F;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(253, 199, 255, 0.65) 100%);
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 10rpx;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class='index-wrapper skeleton-rect' v-if="isShow && fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{$t(titleInfo[0].val)}}</view>
|
||||
<view class='line1 txt-btn'>{{$t(titleInfo[1].val)}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in fastList" :key='index'>
|
||||
<view hover-class="none" class='item'
|
||||
@click="gopage('/pages/goods/goods_list/index?sid='+item.id+'&title='+item.cate_name)">
|
||||
<view class='img-box'>
|
||||
<easy-loadimage mode="widthFix" :image-src="item.pic"></easy-loadimage>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{$t(item.cate_name)}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='index-wrapper' v-if="!isShow && isIframe && fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{titleInfo[0].val}}</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in fastList" :key='index'>
|
||||
<view hover-class="none" class='item'
|
||||
@click="gopage('/pages/goods/goods_list/index?sid='+item.id+'&title='+item.cate_name)">
|
||||
<view class='img-box'>
|
||||
<image :src='item.pic'></image>
|
||||
</view>
|
||||
<view class='pro-info line1'>{{item.cate_name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='index-wrapper' v-if="isIframe && !fastList.length">
|
||||
<view class='title acea-row row-between-wrapper'>
|
||||
<view class='text'>
|
||||
<view class='name line1'>{{titleInfo[0].val}}</view>
|
||||
<view class='line1 txt-btn'>{{titleInfo[1].val}}</view>
|
||||
</view>
|
||||
<navigator class='more' open-type="switchTab" :url="titleInfo[2].val">{{$t(`更多`)}}<text
|
||||
class='iconfont icon-jiantou'></text></navigator>
|
||||
</view>
|
||||
<view class='scroll-product'>
|
||||
<view class="empty-img">{{$t(`快速选择，暂无数据`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
// import {
|
||||
// mapState
|
||||
// } from 'vuex'
|
||||
import {
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
import {
|
||||
category
|
||||
} from '@/api/api.js';
|
||||
export default {
|
||||
name: 'scrollBox',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataConfig: {
|
||||
immediate: true,
|
||||
handler(nVal, oVal) {
|
||||
if (nVal) {
|
||||
this.numConfig = nVal.numConfig.val;
|
||||
this.isShow = nVal.isShow.val;
|
||||
this.tabConfig = nVal.tabConfig ? nVal.tabConfig.tabVal : 0;
|
||||
this.selectConfig = nVal.selectConfig.activeValue || '';
|
||||
this.titleInfo = nVal.titleInfo.list;
|
||||
if (this.tabConfig) {
|
||||
this.fastList = nVal.goodsList.list
|
||||
} else {
|
||||
this.category();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
fastInfo: this.$t(`上百种商品分类任您选择`),
|
||||
fastList: [],
|
||||
name: this.$options.name,
|
||||
isShow: true,
|
||||
isIframe: app.globalData.isIframe,
|
||||
numConfig: 0,
|
||||
selectConfig: 0,
|
||||
tabConfig: 0,
|
||||
titleInfo: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gopage(url) {
|
||||
goPage().then(res => {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
category() {
|
||||
category({
|
||||
pid: this.selectConfig,
|
||||
limit: this.numConfig
|
||||
}).then(res => {
|
||||
this.fastList = res.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.index-wrapper {
|
||||
background-color: $uni-bg-color;
|
||||
margin: $uni-index-margin-row $uni-index-margin-col;
|
||||
border-radius: $uni-border-radius-index;
|
||||
// box-shadow: $uni-index-box-shadow;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
||||
.name {
|
||||
font-size: $uni-index-title-font-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.txt-btn {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.scroll-product {
|
||||
white-space: nowrap;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.scroll-product .item {
|
||||
display: inline-block;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 0 0 10rpx 10rpx;
|
||||
// box-shadow: 0 40rpx 30rpx -10rpx #eee;
|
||||
// background: linear-gradient(180deg, #fff 0%, #fff 30%, rgba(255, 96, 16, 0.2) 100%);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 207, 183, 0.65) 100%);
|
||||
color: #FF7E00;
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-of-type(3n) {
|
||||
color: #1DB0FC;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(187, 221, 255, 0.65) 100%);
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-of-type(3n-1) {
|
||||
color: #FF448F;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(253, 199, 255, 0.65) 100%);
|
||||
}
|
||||
|
||||
.scroll-product .item:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 10rpx;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.scroll-product .item .img-box {
|
||||
|
||||
/deep/,
|
||||
/deep/image,
|
||||
/deep/.easy-loadimage,
|
||||
/deep/uni-image {
|
||||
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-product .item .pro-info {
|
||||
max-width: 180rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
height: 60rpx;
|
||||
max-width: 180rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
padding: 0 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
padding: 0 10rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,299 +1,299 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='logistics'>
|
||||
<view class='header acea-row row-between row-top'>
|
||||
<view class='pictrue'>
|
||||
<image :src='orderInfo.image'></image>
|
||||
</view>
|
||||
<view class='text acea-row row-between'>
|
||||
<view class='name line2'>{{orderInfo.store_name}}</view>
|
||||
<view class='money'>
|
||||
<view>{{orderInfo.total_price}}{{$t(`积分`)}}</view>
|
||||
<view>x{{orderInfo.total_num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='logisticsCon'>
|
||||
<view class='company acea-row row-between-wrapper'>
|
||||
<view class='picTxt acea-row row-between-wrapper'>
|
||||
<view class='iconfont icon-wuliu'></view>
|
||||
<view class='text'>
|
||||
<view><text class='name line1'>{{$t(`物流公司`)}}：</text> {{orderInfo.delivery_name}}</view>
|
||||
<view class='express line1'><text class='name'>{{$t(`快递单号`)}}：</text>
|
||||
{{orderInfo.delivery_id}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class='copy' @tap='copyOrderId'>{{$t(`复制单号`)}}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='copy copy-data' :data-clipboard-text="orderInfo.delivery_id">{{$t(`复制单号`)}}</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class='item' v-for="(item,index) in expressList" :key="index">
|
||||
<view class='circular' :class='index === 0 ? "on":""'></view>
|
||||
<view class='text' :class='index===0 ? "on-font on":""'>
|
||||
<view>{{item.status}}</view>
|
||||
<view class='data' :class='index===0 ? "on-font on":""'>{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<recommend :hostProduct='hostProduct'></recommend>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<!-- <authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProductHot
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getLogisticsDetails
|
||||
} from '@/api/activity.js'
|
||||
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import recommend from '@/components/recommend';
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js';
|
||||
export default {
|
||||
components: {
|
||||
recommend,
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
product: {
|
||||
productInfo: {}
|
||||
},
|
||||
orderInfo: {},
|
||||
expressList: [],
|
||||
hostProduct: []
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
if (!options.order_id) return this.$util.Tips({
|
||||
title: this.$t(`缺少订单号`)
|
||||
});
|
||||
this.orderId = options.order_id;
|
||||
if (this.isLogin) {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
// #ifdef H5
|
||||
this.$nextTick(function() {
|
||||
const clipboard = new ClipboardJS(".copy-data");
|
||||
clipboard.on("success", () => {
|
||||
this.$util.Tips({
|
||||
title: this.$t(`复制成功`)
|
||||
});
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 授权回调
|
||||
*/
|
||||
onLoadFun: function() {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
},
|
||||
copyOrderId: function() {
|
||||
uni.setClipboardData({
|
||||
data: this.orderInfo.delivery_id
|
||||
});
|
||||
},
|
||||
getExpress: function() {
|
||||
let that = this;
|
||||
getLogisticsDetails(that.orderId).then(function(res) {
|
||||
let result = res.data.express.result || {};
|
||||
// that.$set(that, 'product', res.data.order.cartInfo[0] || {});
|
||||
that.$set(that, 'orderInfo', res.data.order);
|
||||
that.$set(that, 'expressList', result.list || []);
|
||||
}).catch((error) => {
|
||||
this.$util.Tips({
|
||||
title: error
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
getProductHot().then(function(res) {
|
||||
that.$set(that, 'hostProduct', res.data);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logistics .header {
|
||||
padding: 23rpx 30rpx;
|
||||
background-color: #fff;
|
||||
height: 166rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logistics .header .pictrue {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.logistics .header .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.logistics .header .text {
|
||||
width: 540rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.logistics .header .text .name {
|
||||
width: 365rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.logistics .header .text .money {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon {
|
||||
background-color: #fff;
|
||||
margin: 12rpx 0;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company {
|
||||
height: 120rpx;
|
||||
margin: 0 0 45rpx 30rpx;
|
||||
padding-right: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt {
|
||||
width: 520rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .iconfont {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: #666;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text {
|
||||
width: 450rpx;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text .name {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text .express {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .copy {
|
||||
font-size: 20rpx;
|
||||
width: 106rpx;
|
||||
text-align: center;
|
||||
border-radius: 3rpx;
|
||||
border: 1px solid #999;
|
||||
padding: 3rpx 0;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item {
|
||||
padding: 0 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .circular {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -1rpx;
|
||||
left: 31.5rpx;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .circular.on {
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text.on-font {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data.on-font {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
width: 615rpx;
|
||||
border-left: 1rpx solid #e6e6e6;
|
||||
padding: 0 0 60rpx 38rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text.on {
|
||||
border-left-color: var(--view-minorColor);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data .time {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='logistics'>
|
||||
<view class='header acea-row row-between row-top'>
|
||||
<view class='pictrue'>
|
||||
<image :src='orderInfo.image'></image>
|
||||
</view>
|
||||
<view class='text acea-row row-between'>
|
||||
<view class='name line2'>{{orderInfo.store_name}}</view>
|
||||
<view class='money'>
|
||||
<view>{{orderInfo.total_price}}{{$t(`积分`)}}</view>
|
||||
<view>x{{orderInfo.total_num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='logisticsCon'>
|
||||
<view class='company acea-row row-between-wrapper'>
|
||||
<view class='picTxt acea-row row-between-wrapper'>
|
||||
<view class='iconfont icon-wuliu'></view>
|
||||
<view class='text'>
|
||||
<view><text class='name line1'>{{$t(`物流公司`)}}：</text> {{orderInfo.delivery_name}}</view>
|
||||
<view class='express line1'><text class='name'>{{$t(`快递单号`)}}：</text>
|
||||
{{orderInfo.delivery_id}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class='copy' @tap='copyOrderId'>{{$t(`复制单号`)}}</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='copy copy-data' :data-clipboard-text="orderInfo.delivery_id">{{$t(`复制单号`)}}</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class='item' v-for="(item,index) in expressList" :key="index">
|
||||
<view class='circular' :class='index === 0 ? "on":""'></view>
|
||||
<view class='text' :class='index===0 ? "on-font on":""'>
|
||||
<view>{{item.status}}</view>
|
||||
<view class='data' :class='index===0 ? "on-font on":""'>{{item.time}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<recommend :hostProduct='hostProduct'></recommend>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<!-- <authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProductHot
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getLogisticsDetails
|
||||
} from '@/api/activity.js'
|
||||
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import recommend from '@/components/recommend';
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js';
|
||||
export default {
|
||||
components: {
|
||||
recommend,
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
product: {
|
||||
productInfo: {}
|
||||
},
|
||||
orderInfo: {},
|
||||
expressList: [],
|
||||
hostProduct: []
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad: function(options) {
|
||||
if (!options.order_id) return this.$util.Tips({
|
||||
title: this.$t(`缺少订单号`)
|
||||
});
|
||||
this.orderId = options.order_id;
|
||||
if (this.isLogin) {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
// #ifdef H5
|
||||
this.$nextTick(function() {
|
||||
const clipboard = new ClipboardJS(".copy-data");
|
||||
clipboard.on("success", () => {
|
||||
this.$util.Tips({
|
||||
title: this.$t(`复制成功`)
|
||||
});
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 授权回调
|
||||
*/
|
||||
onLoadFun: function() {
|
||||
this.getExpress();
|
||||
this.get_host_product();
|
||||
},
|
||||
copyOrderId: function() {
|
||||
uni.setClipboardData({
|
||||
data: this.orderInfo.delivery_id
|
||||
});
|
||||
},
|
||||
getExpress: function() {
|
||||
let that = this;
|
||||
getLogisticsDetails(that.orderId).then(function(res) {
|
||||
let result = res.data.express.result || {};
|
||||
// that.$set(that, 'product', res.data.order.cartInfo[0] || {});
|
||||
that.$set(that, 'orderInfo', res.data.order);
|
||||
that.$set(that, 'expressList', result.list || []);
|
||||
}).catch((error) => {
|
||||
this.$util.Tips({
|
||||
title: error
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
getProductHot().then(function(res) {
|
||||
that.$set(that, 'hostProduct', res.data);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logistics .header {
|
||||
padding: 23rpx 30rpx;
|
||||
background-color: #fff;
|
||||
height: 166rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logistics .header .pictrue {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.logistics .header .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.logistics .header .text {
|
||||
width: 540rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.logistics .header .text .name {
|
||||
width: 365rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.logistics .header .text .money {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon {
|
||||
background-color: #fff;
|
||||
margin: 12rpx 0;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company {
|
||||
height: 120rpx;
|
||||
margin: 0 0 45rpx 30rpx;
|
||||
padding-right: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt {
|
||||
width: 520rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .iconfont {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: #666;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text {
|
||||
width: 450rpx;
|
||||
font-size: 26rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text .name {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .picTxt .text .express {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .company .copy {
|
||||
font-size: 20rpx;
|
||||
width: 106rpx;
|
||||
text-align: center;
|
||||
border-radius: 3rpx;
|
||||
border: 1px solid #999;
|
||||
padding: 3rpx 0;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item {
|
||||
padding: 0 40rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .circular {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -1rpx;
|
||||
left: 31.5rpx;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .circular.on {
|
||||
background-color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text.on-font {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data.on-font {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
width: 615rpx;
|
||||
border-left: 1rpx solid #e6e6e6;
|
||||
padding: 0 0 60rpx 38rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text.on {
|
||||
border-left-color: var(--view-minorColor);
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.logistics .logisticsCon .item .text .data .time {
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,291 +1,291 @@
|
||||
<!-- #ifdef H5 -->
|
||||
<template>
|
||||
<view v-if="bindPhone">
|
||||
<form @submit="editPwd" report-submit='true'>
|
||||
<view class="ChangePassword">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<input type='number' :placeholder='$t(`请输入手机号`)' placeholder-class='placeholder'
|
||||
v-model="phone"></input>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<input type='number' :placeholder='$t(`填写验证码`)' placeholder-class='placeholder' class="codeIput"
|
||||
v-model="captcha"></input>
|
||||
<button class="code font-color" :class="disabled === true ? 'on' : ''" :disabled='disabled'
|
||||
@click="code">
|
||||
{{ text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<button form-type="submit" class="confirmBnt bg-color">{{$t(`确认绑定`)}}</button>
|
||||
</view>
|
||||
</form>
|
||||
<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
|
||||
ref="verify"></Verify>
|
||||
</view>
|
||||
<view class="lottie-bg" v-else>
|
||||
<view id="lottie">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wechat from "@/libs/wechat";
|
||||
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
import {
|
||||
WX_AUTH,
|
||||
STATE_KEY,
|
||||
LOGINTYPE,
|
||||
BACK_URL
|
||||
} from '@/config/cache';
|
||||
import {
|
||||
silenceAuth
|
||||
} from '@/api/public';
|
||||
import {
|
||||
bindingPhone,
|
||||
verifyCode
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
registerVerify
|
||||
} from '@/api/user.js'
|
||||
import Verify from '../components/verify/verify.vue';
|
||||
export default {
|
||||
name: "Auth",
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
mixins: [sendVerifyCode],
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
captcha: '',
|
||||
key: '',
|
||||
authKey: '',
|
||||
scope: '',
|
||||
bindPhone: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
let that = this
|
||||
const {
|
||||
code,
|
||||
state,
|
||||
scope
|
||||
} = options;
|
||||
if (scope === 'snsapi_base') {
|
||||
this.url = options.url || options.back_url || '';
|
||||
let spread = this.$Cache.get("spread");
|
||||
let loginType = this.$Cache.get(LOGINTYPE);
|
||||
// silenceAuth({
|
||||
// code: options.code || '',
|
||||
// spread: spread
|
||||
// }).then(res => {
|
||||
// if (res.data.key !== undefined) {
|
||||
// this.bindPhone = true;
|
||||
// this.authKey = res.data.key;
|
||||
// } else {
|
||||
// this.$store.commit("LOGIN", {
|
||||
// token: res.data.token,
|
||||
// time: parseInt(res.data.expires_time) - this.$Cache.time()
|
||||
// });
|
||||
// this.$Cache.set(WX_AUTH, options.code);
|
||||
// this.$Cache.clear(STATE_KEY);
|
||||
// loginType && this.$Cache.clear(LOGINTYPE);
|
||||
// location.href = decodeURIComponent(
|
||||
// decodeURIComponent(options.back_url)
|
||||
// );
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
wechat.auth(code, state).then(() => {
|
||||
location.href = decodeURIComponent(
|
||||
decodeURIComponent(options.back_url)
|
||||
);
|
||||
getUserInfo().then(res => {
|
||||
that.$store.commit("SETUID", res.data.uid);
|
||||
});
|
||||
}).catch(() => {
|
||||
location.replace("/");
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editPwd: function() {
|
||||
let that = this;
|
||||
if (!that.phone) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`请输入手机号`)
|
||||
});
|
||||
}
|
||||
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`请输入正确的手机号码`)
|
||||
});
|
||||
}
|
||||
if (!that.captcha) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`填写验证码`)
|
||||
});
|
||||
}
|
||||
bindingPhone({
|
||||
phone: that.phone,
|
||||
captcha: that.captcha,
|
||||
key: that.authKey
|
||||
}).then(res => {
|
||||
let time = res.data.expires_time - this.$Cache.time();
|
||||
this.$store.commit('LOGIN', {
|
||||
token: res.data.token,
|
||||
time: time
|
||||
});
|
||||
if (this.url && this.url.indexOf('http') !== -1) {
|
||||
location.href = this.url;
|
||||
} else {
|
||||
return that.$util.Tips({
|
||||
title: this.$t(`绑定成功`),
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 4,
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 发送验证码
|
||||
*
|
||||
*/
|
||||
code() {
|
||||
let that = this;
|
||||
if (!that.phone) return that.$util.Tips({
|
||||
title: that.$t(`请输入手机号`)
|
||||
});
|
||||
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
|
||||
title: that.$t(`请输入正确的手机号码`)
|
||||
});
|
||||
this.$refs.verify.show()
|
||||
},
|
||||
success(data) {
|
||||
this.$refs.verify.hide()
|
||||
verifyCode().then(res => {
|
||||
registerVerify({
|
||||
phone: that.phone,
|
||||
type: 'reset',
|
||||
key: res.data.key,
|
||||
captchaType: 'blockPuzzle',
|
||||
captchaVerification: data.captchaVerification
|
||||
}).then(res => {
|
||||
this.sendCode()
|
||||
that.$util.Tips({
|
||||
title: res.msg
|
||||
});
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.ChangePassword .phone {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 55rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list {
|
||||
width: 580rpx;
|
||||
margin: 53rpx auto 0 auto;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .placeholder {
|
||||
color: #b9b9bc;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item input.codeIput {
|
||||
width: 340rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .code {
|
||||
font-size: 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .code.on {
|
||||
color: #b9b9bc !important;
|
||||
}
|
||||
|
||||
.ChangePassword .confirmBnt {
|
||||
font-size: 32rpx;
|
||||
width: 580rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
margin: 92rpx auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lottie {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<template>
|
||||
<view v-if="bindPhone">
|
||||
<form @submit="editPwd" report-submit='true'>
|
||||
<view class="ChangePassword">
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<input type='number' :placeholder='$t(`请输入手机号`)' placeholder-class='placeholder'
|
||||
v-model="phone"></input>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<input type='number' :placeholder='$t(`填写验证码`)' placeholder-class='placeholder' class="codeIput"
|
||||
v-model="captcha"></input>
|
||||
<button class="code font-color" :class="disabled === true ? 'on' : ''" :disabled='disabled'
|
||||
@click="code">
|
||||
{{ text }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<button form-type="submit" class="confirmBnt bg-color">{{$t(`确认绑定`)}}</button>
|
||||
</view>
|
||||
</form>
|
||||
<Verify @success="success" :captchaType="'blockPuzzle'" :imgSize="{ width: '330px', height: '155px' }"
|
||||
ref="verify"></Verify>
|
||||
</view>
|
||||
<view class="lottie-bg" v-else>
|
||||
<view id="lottie">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import wechat from "@/libs/wechat";
|
||||
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/api/user";
|
||||
import {
|
||||
WX_AUTH,
|
||||
STATE_KEY,
|
||||
LOGINTYPE,
|
||||
BACK_URL
|
||||
} from '@/config/cache';
|
||||
import {
|
||||
silenceAuth
|
||||
} from '@/api/public';
|
||||
import {
|
||||
bindingPhone,
|
||||
verifyCode
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
registerVerify
|
||||
} from '@/api/user.js'
|
||||
import Verify from '../components/verify/verify.vue';
|
||||
export default {
|
||||
name: "Auth",
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
mixins: [sendVerifyCode],
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
captcha: '',
|
||||
key: '',
|
||||
authKey: '',
|
||||
scope: '',
|
||||
bindPhone: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
let that = this
|
||||
const {
|
||||
code,
|
||||
state,
|
||||
scope
|
||||
} = options;
|
||||
if (scope === 'snsapi_base') {
|
||||
this.url = options.url || options.back_url || '';
|
||||
let spread = this.$Cache.get("spread");
|
||||
let loginType = this.$Cache.get(LOGINTYPE);
|
||||
// silenceAuth({
|
||||
// code: options.code || '',
|
||||
// spread: spread
|
||||
// }).then(res => {
|
||||
// if (res.data.key !== undefined) {
|
||||
// this.bindPhone = true;
|
||||
// this.authKey = res.data.key;
|
||||
// } else {
|
||||
// this.$store.commit("LOGIN", {
|
||||
// token: res.data.token,
|
||||
// time: parseInt(res.data.expires_time) - this.$Cache.time()
|
||||
// });
|
||||
// this.$Cache.set(WX_AUTH, options.code);
|
||||
// this.$Cache.clear(STATE_KEY);
|
||||
// loginType && this.$Cache.clear(LOGINTYPE);
|
||||
// location.href = decodeURIComponent(
|
||||
// decodeURIComponent(options.back_url)
|
||||
// );
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
wechat.auth(code, state).then(() => {
|
||||
location.href = decodeURIComponent(
|
||||
decodeURIComponent(options.back_url)
|
||||
);
|
||||
getUserInfo().then(res => {
|
||||
that.$store.commit("SETUID", res.data.uid);
|
||||
});
|
||||
}).catch(() => {
|
||||
location.replace("/");
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editPwd: function() {
|
||||
let that = this;
|
||||
if (!that.phone) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`请输入手机号`)
|
||||
});
|
||||
}
|
||||
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`请输入正确的手机号码`)
|
||||
});
|
||||
}
|
||||
if (!that.captcha) {
|
||||
return that.$util.Tips({
|
||||
title: that.$t(`填写验证码`)
|
||||
});
|
||||
}
|
||||
bindingPhone({
|
||||
phone: that.phone,
|
||||
captcha: that.captcha,
|
||||
key: that.authKey
|
||||
}).then(res => {
|
||||
let time = res.data.expires_time - this.$Cache.time();
|
||||
this.$store.commit('LOGIN', {
|
||||
token: res.data.token,
|
||||
time: time
|
||||
});
|
||||
if (this.url && this.url.indexOf('http') !== -1) {
|
||||
location.href = this.url;
|
||||
} else {
|
||||
return that.$util.Tips({
|
||||
title: this.$t(`绑定成功`),
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 4,
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 发送验证码
|
||||
*
|
||||
*/
|
||||
code() {
|
||||
let that = this;
|
||||
if (!that.phone) return that.$util.Tips({
|
||||
title: that.$t(`请输入手机号`)
|
||||
});
|
||||
if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
|
||||
title: that.$t(`请输入正确的手机号码`)
|
||||
});
|
||||
this.$refs.verify.show()
|
||||
},
|
||||
success(data) {
|
||||
this.$refs.verify.hide()
|
||||
verifyCode().then(res => {
|
||||
registerVerify({
|
||||
phone: that.phone,
|
||||
type: 'reset',
|
||||
key: res.data.key,
|
||||
captchaType: 'blockPuzzle',
|
||||
captchaVerification: data.captchaVerification
|
||||
}).then(res => {
|
||||
this.sendCode()
|
||||
that.$util.Tips({
|
||||
title: res.msg
|
||||
});
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.ChangePassword .phone {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 55rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list {
|
||||
width: 580rpx;
|
||||
margin: 53rpx auto 0 auto;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item {
|
||||
width: 100%;
|
||||
height: 110rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .placeholder {
|
||||
color: #b9b9bc;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item input.codeIput {
|
||||
width: 340rpx;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .code {
|
||||
font-size: 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ChangePassword .list .item .code.on {
|
||||
color: #b9b9bc !important;
|
||||
}
|
||||
|
||||
.ChangePassword .confirmBnt {
|
||||
font-size: 32rpx;
|
||||
width: 580rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
color: #fff;
|
||||
margin: 92rpx auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lottie {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- #endif -->
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -90,7 +90,7 @@
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="ver" v-if="copyRight">{{copyRight}}</view>
|
||||
<view v-else class="ver">© 2014-2022
|
||||
<view v-else class="ver">© 2014-2023
|
||||
<a href="https://www.crmeb.com">www.crmeb.com</a>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,473 +1,473 @@
|
||||
<template>
|
||||
<view class="main" :style="colorStyle">
|
||||
<view class="head" v-if="!resData.type && !resData.paid">
|
||||
<view class="user-img">
|
||||
<image class="" :src="resData.avatar" mode=""></image>
|
||||
</view>
|
||||
<!-- paid: 0 未支付 1 已支付 type:0 本人 1 好友-->
|
||||
<view class="order-status" v-if="!resData.paid && !resData.type">
|
||||
{{$t(`代付订单创建成功，发给好友帮你付款吧~`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-other" v-else>
|
||||
<view class="user-img">
|
||||
<image class=""
|
||||
:src="resData.paid && !resData.type && resData.pay_uid === $store.state.app.uid ? resData.pay_avatar : resData.avatar"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<view class="head-other-nickname">
|
||||
{{resData.paid && !resData.type && resData.pay_uid === $store.state.app.uid ? resData.pay_nickname : resData.nickname}}
|
||||
</view>
|
||||
<view class="head-other-trip" v-if="!resData.paid && resData.type">
|
||||
{{$t(`帮我付一下这件商品了，谢谢~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip"
|
||||
v-if="resData.pay_uid !== $store.state.app.uid && resData.paid && resData.type">
|
||||
{{$t(`已经有人替我代付，谢谢啦~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip"
|
||||
v-if="resData.pay_uid === $store.state.app.uid && resData.paid && resData.type">
|
||||
{{$t(`谢谢你帮我支付，么么哒~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip" v-if="resData.pay_uid !== resData.uid && resData.paid && !resData.type">
|
||||
{{$t(`我已为你代付成功，商家正在努力发货中~`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-msg">
|
||||
<view class="pay-success" v-if="resData.paid && !resData.type">
|
||||
{{$t(`好友代付成功，商家正在努力发货中~`)}}
|
||||
</view>
|
||||
<view v-else class="pay--box">
|
||||
<view class="order-top">
|
||||
{{$t(`代付金额`)}}
|
||||
</view>
|
||||
<view class="order-num">
|
||||
<text class="icon">{{$t(`￥`)}}</text>
|
||||
{{resData.pay_price || 0}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="!resData.paid && !resData.type" class="order-btn" @click="appShare('WXSceneSession')">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-if="!resData.paid && !resData.type" class="order-btn" @click="shareFriend">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<button v-if="!resData.paid && !resData.type" class="order-btn" open-type="share" hover-class="none"
|
||||
@click="shareModal = false">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<button v-if="!resData.paid && !resData.type" class="order-btn detail" @click="goOrderDetail()">
|
||||
{{$t(`查看订单详情`)}}
|
||||
</button>
|
||||
<button class="order-btn" v-if="!resData.paid && resData.type" @tap='payOpen()'>{{$t(`立即付款`)}}</button>
|
||||
<button class="order-btn on-pay" v-if="resData.paid && resData.type">{{$t(`订单已支付`)}}</button>
|
||||
<button class="order-btn" v-if="resData.paid && !resData.type"
|
||||
@tap='goOrderDetail()'>{{$t(`查看订单详情`)}}</button>
|
||||
<view class="order-trip" v-if="resData.pay_uid === $store.state.app.uid && resData.type">
|
||||
{{$t(`如果订单申请退款，已支付金额将原路退还给您`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-list">
|
||||
<orderGoods :cartInfo="resData.cartInfo" :is_confirm='true' :pay_price="resData.pay_price"
|
||||
:is_behalf="resData.paid && !resData.type ? true :false"></orderGoods>
|
||||
</view>
|
||||
<view class="share-box" v-if="shareModal">
|
||||
<image src="../static/share-info2.png" @click="shareModal = false"></image>
|
||||
</view>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" :friendPay="true" @onChangeFun='onChangeFun'
|
||||
:order_id="order_id" :totalPrice='resData.pay_price'></payment>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderGoods from '@/components/orderGoods';
|
||||
import colors from "@/mixins/color";
|
||||
import payment from '@/components/payment';
|
||||
import home from '@/components/home/index.vue'
|
||||
import {
|
||||
friendDetail
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from "@/config/app.js";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
|
||||
export default {
|
||||
mixins: [colors],
|
||||
components: {
|
||||
orderGoods,
|
||||
payment,
|
||||
home
|
||||
},
|
||||
computed: mapGetters(["isLogin"]),
|
||||
data() {
|
||||
return {
|
||||
shareModal: false,
|
||||
cartInfo: [],
|
||||
resData: {},
|
||||
payMode: [{
|
||||
name: this.$t(`微信支付`),
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
title: this.$t(`使用微信快捷支付`),
|
||||
payStatus: true,
|
||||
},
|
||||
// #ifdef H5 || APP-PLUS
|
||||
// {
|
||||
// name: '支付宝支付',
|
||||
// icon: 'icon-zhifubao',
|
||||
// value: 'alipay',
|
||||
// title: '使用线上支付宝支付',
|
||||
// payStatus: true
|
||||
// },
|
||||
// #endif
|
||||
],
|
||||
pay_close: false,
|
||||
order_id: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV == true) {
|
||||
this.getDetail()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '好友代付' || '支付成功'
|
||||
// });
|
||||
},
|
||||
onLoad(option) {
|
||||
this.order_id = option.order_id
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
// #ifdef MP
|
||||
onShareAppMessage() {
|
||||
let that = this;
|
||||
return {
|
||||
title: "",
|
||||
imageUrl: "",
|
||||
path: "/pages/users/payment_on_behalf/index?order_id=" + that.id + "&spread=" + this.$store.state.app
|
||||
.uid,
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
/**
|
||||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
payOpen() {
|
||||
this.pay_close = true;
|
||||
},
|
||||
getDetail() {
|
||||
let that = this;
|
||||
friendDetail(this.order_id).then(res => {
|
||||
this.resData = res.data.info
|
||||
if (this.resData.paid && !this.resData.type) {
|
||||
this.goOrderDetail()
|
||||
}
|
||||
//#ifdef H5
|
||||
this.ShareInfo(this.resData)
|
||||
//#endif
|
||||
}).catch((err) => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
}, {
|
||||
tab: 4,
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
});
|
||||
},
|
||||
//#ifdef H5
|
||||
ShareInfo(data) {
|
||||
let href = location.href;
|
||||
if (this.$wechat.isWeixin()) {
|
||||
let configAppMessage = {
|
||||
desc: this.$t(`帮我付一下这件商品了，谢谢~`),
|
||||
title: this.$t(`好友代付`),
|
||||
link: href,
|
||||
imgUrl: data.avatar,
|
||||
};
|
||||
this.$wechat
|
||||
.wechatEvevt(
|
||||
[
|
||||
"updateAppMessageShareData",
|
||||
"updateTimelineShareData",
|
||||
"onMenuShareAppMessage",
|
||||
"onMenuShareTimeline",
|
||||
],
|
||||
configAppMessage
|
||||
)
|
||||
.then((res) => {})
|
||||
.catch((err) => {});
|
||||
}
|
||||
},
|
||||
//#endif
|
||||
// #ifdef APP-PLUS
|
||||
appShare(scene) {
|
||||
let that = this;
|
||||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由，也就是最后一个打开的页面路由
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: scene,
|
||||
type: 0,
|
||||
href: `${HTTP_REQUEST_URL}${curRoute}`,
|
||||
title: that.$t(`好友代付`),
|
||||
summary: that.$t(`帮我付一下这件商品了，谢谢~`),
|
||||
imageUrl: that.resData.paid && !that.resData.type && that.resData.pay_uid === that.$store.state
|
||||
.app.uid ? that.resData.pay_avatar : that.resData.avatar,
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: that.$t(`分享成功`),
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.showToast({
|
||||
title: that.$t(`分享失败`),
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
shareFriend() {
|
||||
// #ifndef MP
|
||||
this.shareModal = true;
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
onChangeFun(e) {
|
||||
let opt = e;
|
||||
let action = opt.action || null;
|
||||
let value = opt.value != undefined ? opt.value : null;
|
||||
(action && this[action]) && this[action](value);
|
||||
},
|
||||
/**
|
||||
* 关闭支付组件
|
||||
*/
|
||||
payClose() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付失败回调
|
||||
*/
|
||||
pay_fail() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付成功回调
|
||||
*/
|
||||
pay_complete() {
|
||||
this.pay_close = false;
|
||||
this.getDetail();
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/payment_on_behalf/pay_status?order_id=' + this.order_id
|
||||
})
|
||||
},
|
||||
goOrderDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + this.order_id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.head {
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60rpx 0 62rpx 0;
|
||||
|
||||
.user-img {
|
||||
image {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.order-status {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.head-other {
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 60rpx 0 60rpx 30rpx;
|
||||
|
||||
.user-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
margin-left: 20rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
|
||||
.head-other-nickname {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.head-other-trip {
|
||||
padding: 6rpx 13rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.head-other-trip::after {
|
||||
content: "";
|
||||
width: 0rpx;
|
||||
height: 0rpx;
|
||||
border: 10rpx solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-top: 10rpx solid transparent;
|
||||
position: absolute;
|
||||
left: -20rpx;
|
||||
bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-msg {
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
margin: -30rpx 30rpx 0 30rpx;
|
||||
|
||||
.pay--box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-success {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-num {
|
||||
.icon {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
font-size: 66rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
width: 90%;
|
||||
background-color: var(--view-theme);
|
||||
border-radius: 80rpx;
|
||||
padding: 26rpx 0;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.order-btn.detail {
|
||||
margin-top: 20rpx;
|
||||
color: var(--view-theme);
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--view-theme);
|
||||
}
|
||||
|
||||
.order-btn.on-pay {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.order-trip {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
margin: 30rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.orderGoods {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.share-box {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view class="main" :style="colorStyle">
|
||||
<view class="head" v-if="!resData.type && !resData.paid">
|
||||
<view class="user-img">
|
||||
<image class="" :src="resData.avatar" mode=""></image>
|
||||
</view>
|
||||
<!-- paid: 0 未支付 1 已支付 type:0 本人 1 好友-->
|
||||
<view class="order-status" v-if="!resData.paid && !resData.type">
|
||||
{{$t(`代付订单创建成功，发给好友帮你付款吧~`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="head-other" v-else>
|
||||
<view class="user-img">
|
||||
<image class=""
|
||||
:src="resData.paid && !resData.type && resData.pay_uid === $store.state.app.uid ? resData.pay_avatar : resData.avatar"
|
||||
mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<view class="head-other-nickname">
|
||||
{{resData.paid && !resData.type && resData.pay_uid === $store.state.app.uid ? resData.pay_nickname : resData.nickname}}
|
||||
</view>
|
||||
<view class="head-other-trip" v-if="!resData.paid && resData.type">
|
||||
{{$t(`帮我付一下这件商品了，谢谢~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip"
|
||||
v-if="resData.pay_uid !== $store.state.app.uid && resData.paid && resData.type">
|
||||
{{$t(`已经有人替我代付，谢谢啦~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip"
|
||||
v-if="resData.pay_uid === $store.state.app.uid && resData.paid && resData.type">
|
||||
{{$t(`谢谢你帮我支付，么么哒~`)}}
|
||||
</view>
|
||||
<view class="head-other-trip" v-if="resData.pay_uid !== resData.uid && resData.paid && !resData.type">
|
||||
{{$t(`我已为你代付成功，商家正在努力发货中~`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-msg">
|
||||
<view class="pay-success" v-if="resData.paid && !resData.type">
|
||||
{{$t(`好友代付成功，商家正在努力发货中~`)}}
|
||||
</view>
|
||||
<view v-else class="pay--box">
|
||||
<view class="order-top">
|
||||
{{$t(`代付金额`)}}
|
||||
</view>
|
||||
<view class="order-num">
|
||||
<text class="icon">{{$t(`￥`)}}</text>
|
||||
{{resData.pay_price || 0}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="!resData.paid && !resData.type" class="order-btn" @click="appShare('WXSceneSession')">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-if="!resData.paid && !resData.type" class="order-btn" @click="shareFriend">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<button v-if="!resData.paid && !resData.type" class="order-btn" open-type="share" hover-class="none"
|
||||
@click="shareModal = false">
|
||||
{{$t(`发送给微信好友`)}}
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<button v-if="!resData.paid && !resData.type" class="order-btn detail" @click="goOrderDetail()">
|
||||
{{$t(`查看订单详情`)}}
|
||||
</button>
|
||||
<button class="order-btn" v-if="!resData.paid && resData.type" @tap='payOpen()'>{{$t(`立即付款`)}}</button>
|
||||
<button class="order-btn on-pay" v-if="resData.paid && resData.type">{{$t(`订单已支付`)}}</button>
|
||||
<button class="order-btn" v-if="resData.paid && !resData.type"
|
||||
@tap='goOrderDetail()'>{{$t(`查看订单详情`)}}</button>
|
||||
<view class="order-trip" v-if="resData.pay_uid === $store.state.app.uid && resData.type">
|
||||
{{$t(`如果订单申请退款，已支付金额将原路退还给您`)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-list">
|
||||
<orderGoods :cartInfo="resData.cartInfo" :is_confirm='true' :pay_price="resData.pay_price"
|
||||
:is_behalf="resData.paid && !resData.type ? true :false"></orderGoods>
|
||||
</view>
|
||||
<view class="share-box" v-if="shareModal">
|
||||
<image src="../static/share-info2.png" @click="shareModal = false"></image>
|
||||
</view>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" :friendPay="true" @onChangeFun='onChangeFun'
|
||||
:order_id="order_id" :totalPrice='resData.pay_price'></payment>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderGoods from '@/components/orderGoods';
|
||||
import colors from "@/mixins/color";
|
||||
import payment from '@/components/payment';
|
||||
import home from '@/components/home/index.vue'
|
||||
import {
|
||||
friendDetail
|
||||
} from '@/api/user.js'
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from "@/config/app.js";
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
|
||||
export default {
|
||||
mixins: [colors],
|
||||
components: {
|
||||
orderGoods,
|
||||
payment,
|
||||
home
|
||||
},
|
||||
computed: mapGetters(["isLogin"]),
|
||||
data() {
|
||||
return {
|
||||
shareModal: false,
|
||||
cartInfo: [],
|
||||
resData: {},
|
||||
payMode: [{
|
||||
name: this.$t(`微信支付`),
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
title: this.$t(`使用微信快捷支付`),
|
||||
payStatus: true,
|
||||
},
|
||||
// #ifdef H5 || APP-PLUS
|
||||
// {
|
||||
// name: '支付宝支付',
|
||||
// icon: 'icon-zhifubao',
|
||||
// value: 'alipay',
|
||||
// title: '使用线上支付宝支付',
|
||||
// payStatus: true
|
||||
// },
|
||||
// #endif
|
||||
],
|
||||
pay_close: false,
|
||||
order_id: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV == true) {
|
||||
this.getDetail()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
onReady() {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: '好友代付' || '支付成功'
|
||||
// });
|
||||
},
|
||||
onLoad(option) {
|
||||
this.order_id = option.order_id
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getDetail()
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
// #ifdef MP
|
||||
onShareAppMessage() {
|
||||
let that = this;
|
||||
return {
|
||||
title: "",
|
||||
imageUrl: "",
|
||||
path: "/pages/users/payment_on_behalf/index?order_id=" + that.id + "&spread=" + this.$store.state.app
|
||||
.uid,
|
||||
};
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
/**
|
||||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
payOpen() {
|
||||
this.pay_close = true;
|
||||
},
|
||||
getDetail() {
|
||||
let that = this;
|
||||
friendDetail(this.order_id).then(res => {
|
||||
this.resData = res.data.info
|
||||
if (this.resData.paid && !this.resData.type) {
|
||||
this.goOrderDetail()
|
||||
}
|
||||
//#ifdef H5
|
||||
this.ShareInfo(this.resData)
|
||||
//#endif
|
||||
}).catch((err) => {
|
||||
that.$util.Tips({
|
||||
title: err
|
||||
}, {
|
||||
tab: 4,
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
});
|
||||
},
|
||||
//#ifdef H5
|
||||
ShareInfo(data) {
|
||||
let href = location.href;
|
||||
if (this.$wechat.isWeixin()) {
|
||||
let configAppMessage = {
|
||||
desc: this.$t(`帮我付一下这件商品了，谢谢~`),
|
||||
title: this.$t(`好友代付`),
|
||||
link: href,
|
||||
imgUrl: data.avatar,
|
||||
};
|
||||
this.$wechat
|
||||
.wechatEvevt(
|
||||
[
|
||||
"updateAppMessageShareData",
|
||||
"updateTimelineShareData",
|
||||
"onMenuShareAppMessage",
|
||||
"onMenuShareTimeline",
|
||||
],
|
||||
configAppMessage
|
||||
)
|
||||
.then((res) => {})
|
||||
.catch((err) => {});
|
||||
}
|
||||
},
|
||||
//#endif
|
||||
// #ifdef APP-PLUS
|
||||
appShare(scene) {
|
||||
let that = this;
|
||||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由，也就是最后一个打开的页面路由
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: scene,
|
||||
type: 0,
|
||||
href: `${HTTP_REQUEST_URL}${curRoute}`,
|
||||
title: that.$t(`好友代付`),
|
||||
summary: that.$t(`帮我付一下这件商品了，谢谢~`),
|
||||
imageUrl: that.resData.paid && !that.resData.type && that.resData.pay_uid === that.$store.state
|
||||
.app.uid ? that.resData.pay_avatar : that.resData.avatar,
|
||||
success: function(res) {
|
||||
uni.showToast({
|
||||
title: that.$t(`分享成功`),
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.showToast({
|
||||
title: that.$t(`分享失败`),
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
shareFriend() {
|
||||
// #ifndef MP
|
||||
this.shareModal = true;
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
onChangeFun(e) {
|
||||
let opt = e;
|
||||
let action = opt.action || null;
|
||||
let value = opt.value != undefined ? opt.value : null;
|
||||
(action && this[action]) && this[action](value);
|
||||
},
|
||||
/**
|
||||
* 关闭支付组件
|
||||
*/
|
||||
payClose() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付失败回调
|
||||
*/
|
||||
pay_fail() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付成功回调
|
||||
*/
|
||||
pay_complete() {
|
||||
this.pay_close = false;
|
||||
this.getDetail();
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/payment_on_behalf/pay_status?order_id=' + this.order_id
|
||||
})
|
||||
},
|
||||
goOrderDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + this.order_id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.head {
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60rpx 0 62rpx 0;
|
||||
|
||||
.user-img {
|
||||
image {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.order-status {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.head-other {
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 60rpx 0 60rpx 30rpx;
|
||||
|
||||
.user-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
margin-left: 20rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100rpx;
|
||||
position: relative;
|
||||
|
||||
.head-other-nickname {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.head-other-trip {
|
||||
padding: 6rpx 13rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.head-other-trip::after {
|
||||
content: "";
|
||||
width: 0rpx;
|
||||
height: 0rpx;
|
||||
border: 10rpx solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-left: 10rpx solid transparent;
|
||||
border-top: 10rpx solid transparent;
|
||||
position: absolute;
|
||||
left: -20rpx;
|
||||
bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-msg {
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
margin: -30rpx 30rpx 0 30rpx;
|
||||
|
||||
.pay--box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pay-success {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-num {
|
||||
.icon {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
font-size: 66rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
width: 90%;
|
||||
background-color: var(--view-theme);
|
||||
border-radius: 80rpx;
|
||||
padding: 26rpx 0;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
.order-btn.detail {
|
||||
margin-top: 20rpx;
|
||||
color: var(--view-theme);
|
||||
background-color: #fff;
|
||||
border: 1px solid var(--view-theme);
|
||||
}
|
||||
|
||||
.order-btn.on-pay {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.order-trip {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
margin: 30rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.orderGoods {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.share-box {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,277 +1,277 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="navbar acea-row row-around">
|
||||
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 1 }" @click="onNav(1)">{{$t(`未使用`)}}
|
||||
</view>
|
||||
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 2 }" @click="onNav(2)">
|
||||
{{$t(`已使用/过期`)}}</view>
|
||||
</view>
|
||||
<view class='coupon-list' v-if="couponsList.length">
|
||||
<view class='item acea-row row-center-wrapper' v-for='(item,index) in couponsList' :key="index"
|
||||
:class="{svip: item.receive_type === 4}" @click="useCoupon(item)">
|
||||
<view class="moneyCon acea-row row-center-wrapper">
|
||||
<view class='money' :class='item._type == 0 ? "moneyGray" : ""'>
|
||||
<view>{{$t(`￥`)}}<text class='num'>{{item.coupon_price}}</text></view>
|
||||
<view class="pic-num" v-if="item.use_min_price > 0">
|
||||
{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="pic-num" v-else>{{$t(`无门槛券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='condition'>
|
||||
<view class="name line2">
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-if="item.applicable_type === 0">{{$t(`通用劵`)}}</view>
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-else-if="item.applicable_type === 1">{{$t(`品类券`)}}</view>
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-else>{{$t(`商品券`)}}</view>
|
||||
<image src="../../../static/images/fvip.png" class="pic" v-if="item.receive_type===4">
|
||||
</image>
|
||||
{{$t(item.coupon_title)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class='data acea-row row-between-wrapper'>
|
||||
<view>{{item.add_time}}-{{item.end_time}}</view>
|
||||
<view class='bnt gray' v-if="item._type==0">{{$t(item._msg)}}</view>
|
||||
<view class='bnt bg-color' v-else>{{$t(item._msg)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="!couponsList.length && page === 2">
|
||||
<view class='pictrue'>
|
||||
<image :src="imgHost + '/statics/images/noCoupon.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUserCoupons
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import home from '@/components/home';
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
// #ifdef MP
|
||||
authorize,
|
||||
// #endif
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
couponsList: [],
|
||||
loading: false,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
navOn: 1,
|
||||
page: 1,
|
||||
limit: 15,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getUseCoupons();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.isLogin) {
|
||||
this.getUseCoupons();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
methods: {
|
||||
onNav: function(type) {
|
||||
this.navOn = type;
|
||||
this.couponsList = [];
|
||||
this.page = 1;
|
||||
this.finished = false;
|
||||
this.getUseCoupons();
|
||||
},
|
||||
useCoupon(item) {
|
||||
let url = '';
|
||||
if (item.category_id == 0 && item.product_id == '') {
|
||||
url = '/pages/goods/goods_list/index?title=默认'
|
||||
}
|
||||
if (item.category_id != 0) {
|
||||
url = `/pages/goods/goods_list/index?title=${item.coupon_title}&coupon_category_id=${item.category_id}`
|
||||
}
|
||||
if (item.product_id != '') {
|
||||
let arr = item.product_id.split(',');
|
||||
let num = arr.length;
|
||||
if (num == 1) {
|
||||
url = '/pages/goods_details/index?id=' + item.product_id
|
||||
} else {
|
||||
url = '/pages/goods/goods_list/index?productId=' + item.product_id + '&title=默认'
|
||||
}
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 授权回调
|
||||
*/
|
||||
onLoadFun: function() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
/**
|
||||
* 获取领取优惠券列表
|
||||
*/
|
||||
getUseCoupons: function() {
|
||||
let that = this;
|
||||
if (that.loading || that.finished) {
|
||||
return;
|
||||
}
|
||||
that.loading = true;
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载…`)
|
||||
});
|
||||
getUserCoupons(this.navOn, {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
that.loading = false;
|
||||
uni.hideLoading();
|
||||
that.couponsList = that.couponsList.concat(res.data);
|
||||
that.finished = res.data.length < that.limit;
|
||||
that.page += 1;
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.money {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pic-num {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .name {
|
||||
font-size: 24rpx;
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="navbar acea-row row-around">
|
||||
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 1 }" @click="onNav(1)">{{$t(`未使用`)}}
|
||||
</view>
|
||||
<view class="item acea-row row-center-wrapper" :class="{ on: navOn === 2 }" @click="onNav(2)">
|
||||
{{$t(`已使用/过期`)}}</view>
|
||||
</view>
|
||||
<view class='coupon-list' v-if="couponsList.length">
|
||||
<view class='item acea-row row-center-wrapper' v-for='(item,index) in couponsList' :key="index"
|
||||
:class="{svip: item.receive_type === 4}" @click="useCoupon(item)">
|
||||
<view class="moneyCon acea-row row-center-wrapper">
|
||||
<view class='money' :class='item._type == 0 ? "moneyGray" : ""'>
|
||||
<view>{{$t(`￥`)}}<text class='num'>{{item.coupon_price}}</text></view>
|
||||
<view class="pic-num" v-if="item.use_min_price > 0">
|
||||
{{$t(`满`)}}{{item.use_min_price}}{{$t(`元可用`)}}</view>
|
||||
<view class="pic-num" v-else>{{$t(`无门槛券`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text'>
|
||||
<view class='condition'>
|
||||
<view class="name line2">
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-if="item.applicable_type === 0">{{$t(`通用劵`)}}</view>
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-else-if="item.applicable_type === 1">{{$t(`品类券`)}}</view>
|
||||
<view class="line-title" :class="item._type === 0 ? 'bg-color-huic' : 'bg-color-check'"
|
||||
v-else>{{$t(`商品券`)}}</view>
|
||||
<image src="../../../static/images/fvip.png" class="pic" v-if="item.receive_type===4">
|
||||
</image>
|
||||
{{$t(item.coupon_title)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class='data acea-row row-between-wrapper'>
|
||||
<view>{{item.add_time}}-{{item.end_time}}</view>
|
||||
<view class='bnt gray' v-if="item._type==0">{{$t(item._msg)}}</view>
|
||||
<view class='bnt bg-color' v-else>{{$t(item._msg)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="!couponsList.length && page === 2">
|
||||
<view class='pictrue'>
|
||||
<image :src="imgHost + '/statics/images/noCoupon.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP -->
|
||||
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUserCoupons
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import home from '@/components/home';
|
||||
import colors from '@/mixins/color.js';
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
components: {
|
||||
// #ifdef MP
|
||||
authorize,
|
||||
// #endif
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
couponsList: [],
|
||||
loading: false,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
navOn: 1,
|
||||
page: 1,
|
||||
limit: 15,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.getUseCoupons();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.isLogin) {
|
||||
this.getUseCoupons();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
methods: {
|
||||
onNav: function(type) {
|
||||
this.navOn = type;
|
||||
this.couponsList = [];
|
||||
this.page = 1;
|
||||
this.finished = false;
|
||||
this.getUseCoupons();
|
||||
},
|
||||
useCoupon(item) {
|
||||
let url = '';
|
||||
if (item.category_id == 0 && item.product_id == '') {
|
||||
url = '/pages/goods/goods_list/index?title=默认'
|
||||
}
|
||||
if (item.category_id != 0) {
|
||||
url = `/pages/goods/goods_list/index?title=${item.coupon_title}&coupon_category_id=${item.category_id}`
|
||||
}
|
||||
if (item.product_id != '') {
|
||||
let arr = item.product_id.split(',');
|
||||
let num = arr.length;
|
||||
if (num == 1) {
|
||||
url = '/pages/goods_details/index?id=' + item.product_id
|
||||
} else {
|
||||
url = '/pages/goods/goods_list/index?productId=' + item.product_id + '&title=默认'
|
||||
}
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 授权回调
|
||||
*/
|
||||
onLoadFun: function() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
/**
|
||||
* 获取领取优惠券列表
|
||||
*/
|
||||
getUseCoupons: function() {
|
||||
let that = this;
|
||||
if (that.loading || that.finished) {
|
||||
return;
|
||||
}
|
||||
that.loading = true;
|
||||
uni.showLoading({
|
||||
title: that.$t(`正在加载…`)
|
||||
});
|
||||
getUserCoupons(this.navOn, {
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
that.loading = false;
|
||||
uni.hideLoading();
|
||||
that.couponsList = that.couponsList.concat(res.data);
|
||||
that.finished = res.data.length < that.limit;
|
||||
that.page += 1;
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.money {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pic-num {
|
||||
color: #ffffff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: 28rpx;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .pic {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: block;
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.condition .line-title {
|
||||
/* width: 70rpx; */
|
||||
height: 36rpx !important;
|
||||
padding: 0 5px;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 247, 247, 1);
|
||||
border: 1px solid var(--view-theme);
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx !important;
|
||||
color: var(--view-theme);
|
||||
margin-right: 12rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.condition .line-title.bg-color-huic {
|
||||
border-color: #BBB !important;
|
||||
color: #bbb !important;
|
||||
background-color: #F5F5F5 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 9;
|
||||
|
||||
.item {
|
||||
border-top: 5rpx solid transparent;
|
||||
border-bottom: 5rpx solid transparent;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
|
||||
&.on {
|
||||
border-bottom-color: var(--view-theme);
|
||||
color: #282828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
margin-top: 122rpx;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
margin-top: 300rpx;
|
||||
}
|
||||
line-height: 28rpx;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .pic {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: block;
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.condition .line-title {
|
||||
/* width: 70rpx; */
|
||||
height: 36rpx !important;
|
||||
padding: 0 5px;
|
||||
line-height: 32rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 247, 247, 1);
|
||||
border: 1px solid var(--view-theme);
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx !important;
|
||||
color: var(--view-theme);
|
||||
margin-right: 12rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.condition .line-title.bg-color-huic {
|
||||
border-color: #BBB !important;
|
||||
color: #bbb !important;
|
||||
background-color: #F5F5F5 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 9;
|
||||
|
||||
.item {
|
||||
border-top: 5rpx solid transparent;
|
||||
border-bottom: 5rpx solid transparent;
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
|
||||
&.on {
|
||||
border-bottom-color: var(--view-theme);
|
||||
color: #282828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
margin-top: 122rpx;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
margin-top: 300rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user