mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-11-01 23:40:38 +00:00
improve: 样式及方法优化
This commit is contained in:
From-wh
parent
26dcff4ae5
commit
9be3c34872
@ -1,165 +1,166 @@
|
||||
<template>
|
||||
<view class='goodList'>
|
||||
<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
|
||||
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='../../static/images/vip.png'></image><text
|
||||
class='num'>{{$t(`已售`)}} {{item.sales}}{{$t(item.unit_name)}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text
|
||||
class='num'>{{$t(`已售`)}} {{item.sales}}{{$t(item.unit_name)}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class='iconfont icon-gouwuche cart-color acea-row row-center-wrapper'></view> -->
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
status: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bastList: {
|
||||
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'>
|
||||
.goodList .item {
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue .numPic {
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 7rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.goodList .item .underline {
|
||||
padding: 30rpx 30rpx 30rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.goodList .item:nth-last-child(1) .underline {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.goodList .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 489rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money image {
|
||||
width: 66rpx;
|
||||
height: 25rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .num {
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
margin-top: -2rpx;
|
||||
|
||||
~.num {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
bottom: 38rpx;
|
||||
}
|
||||
<template>
|
||||
<view class='goodList'>
|
||||
<scroll-view scroll-y="true" scroll-with-animation='true' style="height: 100%;">
|
||||
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">
|
||||
{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='../../static/images/vip.png'></image><text class='num'>{{$t(`已售`)}}
|
||||
{{item.sales}}{{$t(item.unit_name)}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text class='num'>{{$t(`已售`)}}
|
||||
{{item.sales}}{{$t(item.unit_name)}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class='iconfont icon-gouwuche cart-color acea-row row-center-wrapper'></view> -->
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js'
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
props: {
|
||||
status: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bastList: {
|
||||
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'>
|
||||
.goodList .item {
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue .numPic {
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 7rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.goodList .item .underline {
|
||||
padding: 30rpx 30rpx 30rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.goodList .item:nth-last-child(1) .underline {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.goodList .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 489rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money image {
|
||||
width: 64rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .num {
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
margin-top: -2rpx;
|
||||
|
||||
~.num {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
bottom: 38rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,403 +1,406 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="header" v-show="lotteryShow">
|
||||
<view class="pay-status">
|
||||
<text class="iconfont icon-gou"></text>
|
||||
<view class="pay-status-r">
|
||||
<text class="pay-status-text">
|
||||
{{$t(`评价完成`)}}
|
||||
</text>
|
||||
<text class="date">
|
||||
{{new Date().toLocaleString()}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jump">
|
||||
<view class="jump-index" @click="goIndex">
|
||||
{{$t(`返回首页`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grids-top" v-show="lotteryShow">
|
||||
<image src="../static/pay-lottery-l.png" mode=""></image>
|
||||
<view class="grids-title">
|
||||
<view>{{$t(`恭喜您`)}}，{{$t(`获得`)}} {{lottery_num}} {{$t(`机会`)}}</view>
|
||||
</view>
|
||||
<image src="../static/pay-lottery-r.png" mode=""></image>
|
||||
</view>
|
||||
<view class="grids" v-show="lotteryShow">
|
||||
<image class="grids-bag" src="../static/pay-lottery-bag.png" mode=""></image>
|
||||
<view class="grids-box">
|
||||
<gridsLottery class="" :prizeData="prize" @get_winingIndex='getWiningIndex'
|
||||
@luck_draw_finish='luck_draw_finish'>
|
||||
</gridsLottery>
|
||||
</view>
|
||||
</view>
|
||||
<lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
|
||||
</lotteryAleart>
|
||||
<view class="mask" v-if="aleartStatus || addressModel" @click="lotteryAleartClose"></view>
|
||||
<userAddress :aleartStatus="addressModel" @getAddress="getAddress" @close="()=>{addressModel = false}">
|
||||
</userAddress>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridsLottery from '../components/lottery/index.vue'
|
||||
import lotteryAleart from './components/lotteryAleart.vue'
|
||||
import userAddress from './components/userAddress.vue'
|
||||
import {
|
||||
openOrderSubscribe
|
||||
} from '@/utils/SubscribeMessage.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
getLotteryData,
|
||||
startLottery,
|
||||
receiveLottery
|
||||
} from '@/api/lottery.js'
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js';
|
||||
export default {
|
||||
mixins: [colors],
|
||||
components: {
|
||||
// #ifdef MP
|
||||
authorize,
|
||||
// #endif
|
||||
gridsLottery,
|
||||
lotteryAleart,
|
||||
userAddress
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
data() {
|
||||
return {
|
||||
lotteryShow: false,
|
||||
addressModel: false,
|
||||
lottery_num: 0,
|
||||
aleartType: 0,
|
||||
aleartStatus: false,
|
||||
lottery_draw_param: {
|
||||
startIndex: 3, //开始抽奖位置，从0开始
|
||||
totalCount: 3, //一共要转的圈数
|
||||
winingIndex: 1, //中奖的位置，从0开始
|
||||
speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
|
||||
},
|
||||
alData: {},
|
||||
type: '',
|
||||
date: '',
|
||||
prize: [],
|
||||
orderId: '',
|
||||
order_pay_info: {
|
||||
paid: 1,
|
||||
_status: {}
|
||||
},
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
couponsHidden: true,
|
||||
couponList: []
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
// this.getOrderPayInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.order_id;
|
||||
this.type = options.type;
|
||||
// this.date = this.set_time(options.date);
|
||||
if (this.isLogin) {
|
||||
// this.getOrderPayInfo();
|
||||
this.getLotteryData(this.type)
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
// #ifdef H5
|
||||
document.addEventListener('visibilitychange', (e) => {
|
||||
let state = document.visibilityState
|
||||
if (state == 'hidden') {}
|
||||
if (state == 'visible') {
|
||||
// this.getOrderPayInfo();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
set_time(str) {
|
||||
var n = parseInt(str);
|
||||
var D = new Date(n);
|
||||
var year = D.getFullYear(); //四位数年份
|
||||
|
||||
var month = D.getMonth() + 1; //月份(0-11),0为一月份
|
||||
month = month < 10 ? ('0' + month) : month;
|
||||
|
||||
var day = D.getDate(); //月的某一天(1-31)
|
||||
day = day < 10 ? ('0' + day) : day;
|
||||
|
||||
var hours = D.getHours(); //小时(0-23)
|
||||
hours = hours < 10 ? ('0' + hours) : hours;
|
||||
|
||||
var minutes = D.getMinutes(); //分钟(0-59)
|
||||
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
||||
|
||||
// var seconds = D.getSeconds();//秒(0-59)
|
||||
// seconds = seconds<10?('0'+seconds):seconds;
|
||||
// var week = D.getDay();//周几(0-6),0为周日
|
||||
// var weekArr = ['周日','周一','周二','周三','周四','周五','周六'];
|
||||
|
||||
var now_time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
||||
return now_time;
|
||||
},
|
||||
openTap() {
|
||||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||||
},
|
||||
getWiningIndex(callback) {
|
||||
startLottery({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.prize.forEach((item, index) => {
|
||||
if (res.data.id === item.id) {
|
||||
this.alData = res.data
|
||||
this.lottery_draw_param.winingIndex = index;
|
||||
callback(this.lottery_draw_param);
|
||||
}
|
||||
})
|
||||
this.aleartType = 0
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 去首页关闭当前所有页面
|
||||
*/
|
||||
goIndex: function(e) {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
getLotteryData(type) {
|
||||
getLotteryData(type).then(res => {
|
||||
this.lotteryShow = true
|
||||
this.factor_num = res.data.lottery.factor_num
|
||||
this.id = res.data.lottery.id
|
||||
this.prize = res.data.lottery.prize
|
||||
this.lottery_num = res.data.lottery_num
|
||||
this.prize.push({
|
||||
a: 1
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + this.orderId
|
||||
})
|
||||
})
|
||||
},
|
||||
closeLottery(status) {
|
||||
this.aleartStatus = false
|
||||
this.getLotteryData(this.type)
|
||||
if (this.alData.type === 6) {
|
||||
this.addressModel = true
|
||||
}
|
||||
},
|
||||
getAddress(data) {
|
||||
let addData = data
|
||||
addData.id = this.alData.lottery_record_id
|
||||
addData.address = data.address.province + data.address.city + data.address.district + data.detail
|
||||
receiveLottery(addData).then(res => {
|
||||
this.$util.Tips({
|
||||
title: this.$t(`领取成功`)
|
||||
});
|
||||
this.addressModel = false
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
getWiningIndex(callback) {
|
||||
this.aleartType = 0
|
||||
startLottery({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.prize.forEach((item, index) => {
|
||||
if (res.data.id === item.id) {
|
||||
this.alData = res.data
|
||||
this.lottery_draw_param.winingIndex = index;
|
||||
callback(this.lottery_draw_param);
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
// //props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
|
||||
},
|
||||
// 抽奖完成
|
||||
luck_draw_finish(param) {
|
||||
this.aleartType = 2
|
||||
this.aleartStatus = true
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
color: #fff;
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 80rpx 0;
|
||||
|
||||
.pay-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 74rpx;
|
||||
background: rgba(#000, 0.08);
|
||||
border-radius: 50%;
|
||||
margin-right: 30rpx;
|
||||
padding: 9rpx;
|
||||
}
|
||||
|
||||
.pay-status-r {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.pay-status-text {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grids /deep/ .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9) {
|
||||
background: rgba(#fff, 0.2) !important;
|
||||
}
|
||||
|
||||
.jump {
|
||||
display: flex;
|
||||
padding-top: 40rpx;
|
||||
|
||||
.jump-det {
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
border-radius: 22px;
|
||||
color: #E93323;
|
||||
padding: 10rpx 38rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.jump-index {
|
||||
border: 1px solid #FEFFFF;
|
||||
opacity: 1;
|
||||
padding: 10rpx 38rpx;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grids-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.grids-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
font-size: 20px;
|
||||
color: #E93323;
|
||||
z-index: 999;
|
||||
padding: 0 14rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.grids-frequency {}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .lottery_grid {
|
||||
background-color: #E93323;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grids {
|
||||
width: 100%;
|
||||
// height: 800rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
padding: 30rpx;
|
||||
|
||||
.grids-bag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grids-box {
|
||||
width: 700rpx;
|
||||
height: 700rpx;
|
||||
// z-index: 10000;
|
||||
padding: 20rpx;
|
||||
background-color: #E74435;
|
||||
}
|
||||
|
||||
.winning-tips-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
font-size: 20rpx;
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
color: #FFF8F8;
|
||||
margin: 30rpx 0;
|
||||
z-index: 999;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class="header" v-show="lotteryShow">
|
||||
<view class="pay-status">
|
||||
<text class="iconfont icon-gou"></text>
|
||||
<view class="pay-status-r">
|
||||
<text class="pay-status-text">
|
||||
{{$t(`评价完成`)}}
|
||||
</text>
|
||||
<text class="date">
|
||||
{{$util.getNowTime()}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jump">
|
||||
<view class="jump-index" @click="goIndex">
|
||||
{{$t(`返回首页`)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grids-top" v-show="lotteryShow">
|
||||
<image src="../static/pay-lottery-l.png" mode=""></image>
|
||||
<view class="grids-title">
|
||||
<view>{{$t(`恭喜您`)}}，{{$t(`获得`)}} {{lottery_num}} {{$t(`机会`)}}</view>
|
||||
</view>
|
||||
<image src="../static/pay-lottery-r.png" mode=""></image>
|
||||
</view>
|
||||
<view class="grids" v-show="lotteryShow">
|
||||
<image class="grids-bag" src="../static/pay-lottery-bag.png" mode=""></image>
|
||||
<view class="grids-box">
|
||||
<gridsLottery class="" :prizeData="prize" @get_winingIndex='getWiningIndex'
|
||||
@luck_draw_finish='luck_draw_finish'>
|
||||
</gridsLottery>
|
||||
</view>
|
||||
</view>
|
||||
<lotteryAleart :aleartStatus="aleartStatus" @close="closeLottery" :alData="alData" :aleartType="aleartType">
|
||||
</lotteryAleart>
|
||||
<view class="mask" v-if="aleartStatus || addressModel" @click="lotteryAleartClose"></view>
|
||||
<userAddress :aleartStatus="addressModel" @getAddress="getAddress" @close="()=>{addressModel = false}">
|
||||
</userAddress>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gridsLottery from '../components/lottery/index.vue'
|
||||
import lotteryAleart from './components/lotteryAleart.vue'
|
||||
import userAddress from './components/userAddress.vue'
|
||||
import {
|
||||
openOrderSubscribe
|
||||
} from '@/utils/SubscribeMessage.js';
|
||||
import {
|
||||
getNowTime
|
||||
} from '@/utils/util.js'
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
getLotteryData,
|
||||
startLottery,
|
||||
receiveLottery
|
||||
} from '@/api/lottery.js'
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
import colors from '@/mixins/color.js';
|
||||
export default {
|
||||
mixins: [colors],
|
||||
components: {
|
||||
// #ifdef MP
|
||||
authorize,
|
||||
// #endif
|
||||
gridsLottery,
|
||||
lotteryAleart,
|
||||
userAddress
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
data() {
|
||||
return {
|
||||
lotteryShow: false,
|
||||
addressModel: false,
|
||||
lottery_num: 0,
|
||||
aleartType: 0,
|
||||
aleartStatus: false,
|
||||
lottery_draw_param: {
|
||||
startIndex: 3, //开始抽奖位置，从0开始
|
||||
totalCount: 3, //一共要转的圈数
|
||||
winingIndex: 1, //中奖的位置，从0开始
|
||||
speed: 100 //抽奖动画的速度 [数字越大越慢,默认100]
|
||||
},
|
||||
alData: {},
|
||||
type: '',
|
||||
date: '',
|
||||
prize: [],
|
||||
orderId: '',
|
||||
order_pay_info: {
|
||||
paid: 1,
|
||||
_status: {}
|
||||
},
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
couponsHidden: true,
|
||||
couponList: []
|
||||
};
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
// this.getOrderPayInfo();
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.orderId = options.order_id;
|
||||
this.type = options.type;
|
||||
// this.date = this.set_time(options.date);
|
||||
if (this.isLogin) {
|
||||
// this.getOrderPayInfo();
|
||||
this.getLotteryData(this.type)
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
// #ifdef H5
|
||||
document.addEventListener('visibilitychange', (e) => {
|
||||
let state = document.visibilityState
|
||||
if (state == 'hidden') {}
|
||||
if (state == 'visible') {
|
||||
// this.getOrderPayInfo();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
set_time(str) {
|
||||
var n = parseInt(str);
|
||||
var D = new Date(n);
|
||||
var year = D.getFullYear(); //四位数年份
|
||||
|
||||
var month = D.getMonth() + 1; //月份(0-11),0为一月份
|
||||
month = month < 10 ? ('0' + month) : month;
|
||||
|
||||
var day = D.getDate(); //月的某一天(1-31)
|
||||
day = day < 10 ? ('0' + day) : day;
|
||||
|
||||
var hours = D.getHours(); //小时(0-23)
|
||||
hours = hours < 10 ? ('0' + hours) : hours;
|
||||
|
||||
var minutes = D.getMinutes(); //分钟(0-59)
|
||||
minutes = minutes < 10 ? ('0' + minutes) : minutes;
|
||||
|
||||
// var seconds = D.getSeconds();//秒(0-59)
|
||||
// seconds = seconds<10?('0'+seconds):seconds;
|
||||
// var week = D.getDay();//周几(0-6),0为周日
|
||||
// var weekArr = ['周日','周一','周二','周三','周四','周五','周六'];
|
||||
|
||||
var now_time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
|
||||
return now_time;
|
||||
},
|
||||
openTap() {
|
||||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||||
},
|
||||
getWiningIndex(callback) {
|
||||
startLottery({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.prize.forEach((item, index) => {
|
||||
if (res.data.id === item.id) {
|
||||
this.alData = res.data
|
||||
this.lottery_draw_param.winingIndex = index;
|
||||
callback(this.lottery_draw_param);
|
||||
}
|
||||
})
|
||||
this.aleartType = 0
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 去首页关闭当前所有页面
|
||||
*/
|
||||
goIndex: function(e) {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
},
|
||||
getLotteryData(type) {
|
||||
getLotteryData(type).then(res => {
|
||||
this.lotteryShow = true
|
||||
this.factor_num = res.data.lottery.factor_num
|
||||
this.id = res.data.lottery.id
|
||||
this.prize = res.data.lottery.prize
|
||||
this.lottery_num = res.data.lottery_num
|
||||
this.prize.push({
|
||||
a: 1
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/goods/order_details/index?order_id=' + this.orderId
|
||||
})
|
||||
})
|
||||
},
|
||||
closeLottery(status) {
|
||||
this.aleartStatus = false
|
||||
this.getLotteryData(this.type)
|
||||
if (this.alData.type === 6) {
|
||||
this.addressModel = true
|
||||
}
|
||||
},
|
||||
getAddress(data) {
|
||||
let addData = data
|
||||
addData.id = this.alData.lottery_record_id
|
||||
addData.address = data.address.province + data.address.city + data.address.district + data.detail
|
||||
receiveLottery(addData).then(res => {
|
||||
this.$util.Tips({
|
||||
title: this.$t(`领取成功`)
|
||||
});
|
||||
this.addressModel = false
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
getWiningIndex(callback) {
|
||||
this.aleartType = 0
|
||||
startLottery({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.prize.forEach((item, index) => {
|
||||
if (res.data.id === item.id) {
|
||||
this.alData = res.data
|
||||
this.lottery_draw_param.winingIndex = index;
|
||||
callback(this.lottery_draw_param);
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
// //props修改在小程序和APP端不成功，所以在这里使用回调函数传参，
|
||||
},
|
||||
// 抽奖完成
|
||||
luck_draw_finish(param) {
|
||||
this.aleartType = 2
|
||||
this.aleartStatus = true
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
color: #fff;
|
||||
background-color: var(--view-theme);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 80rpx 0;
|
||||
|
||||
.pay-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 74rpx;
|
||||
background: rgba(#000, 0.08);
|
||||
border-radius: 50%;
|
||||
margin-right: 30rpx;
|
||||
padding: 9rpx;
|
||||
}
|
||||
|
||||
.pay-status-r {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.pay-status-text {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grids /deep/ .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9) {
|
||||
background: rgba(#fff, 0.2) !important;
|
||||
}
|
||||
|
||||
.jump {
|
||||
display: flex;
|
||||
padding-top: 40rpx;
|
||||
|
||||
.jump-det {
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
border-radius: 22px;
|
||||
color: #E93323;
|
||||
padding: 10rpx 38rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.jump-index {
|
||||
border: 1px solid #FEFFFF;
|
||||
opacity: 1;
|
||||
padding: 10rpx 38rpx;
|
||||
border-radius: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grids-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0 0 0;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.grids-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
font-size: 20px;
|
||||
color: #E93323;
|
||||
z-index: 999;
|
||||
padding: 0 14rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.grids-frequency {}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .lottery_grid {
|
||||
background-color: #E93323;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grids {
|
||||
width: 100%;
|
||||
// height: 800rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
padding: 30rpx;
|
||||
|
||||
.grids-bag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 750rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grids-box {
|
||||
width: 700rpx;
|
||||
height: 700rpx;
|
||||
// z-index: 10000;
|
||||
padding: 20rpx;
|
||||
background-color: #E74435;
|
||||
}
|
||||
|
||||
.winning-tips-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
font-size: 20rpx;
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
font-weight: 400;
|
||||
color: #FFF8F8;
|
||||
margin: 30rpx 0;
|
||||
z-index: 999;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 51%, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,285 +1,289 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class='goodList' v-if="isShow && bastList.length && !isIframe">
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class="vip-money acea-row row-middle"
|
||||
v-if="item.base && item.vip_price && item.vip_price > 0">{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/vip.png'></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='goodList' v-if="bastList.length && isIframe">
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class="vip-money acea-row row-middle"
|
||||
v-if="item.base && item.vip_price && item.vip_price > 0">{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/vip.png'></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="empty-img" v-if="!bastList.length && isIframe">{{$t(`商品列表，暂无数据`)}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
computed: mapGetters(['uid']),
|
||||
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.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.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bastList: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
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
|
||||
});
|
||||
});
|
||||
},
|
||||
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'>
|
||||
.empty-img {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item {
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.goodList .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue .numPic {
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 7rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.goodList .item .underline {
|
||||
padding: 30rpx 30rpx 30rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.goodList .item:nth-last-child(1) .underline {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.goodList .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 489rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .jvip {
|
||||
width: 46rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money image {
|
||||
width: 66rpx;
|
||||
height: 25rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .num {
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
margin-top: -2rpx;
|
||||
|
||||
~.num {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
bottom: 38rpx;
|
||||
}
|
||||
<template>
|
||||
<view>
|
||||
<view class='goodList' v-if="isShow && bastList.length && !isIframe">
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class="vip-money acea-row row-middle"
|
||||
v-if="item.base && item.vip_price && item.vip_price > 0">
|
||||
{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">
|
||||
{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/vip.png'></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class='goodList' v-if="bastList.length && isIframe">
|
||||
<block v-for="(item,index) in bastList" :key="index">
|
||||
<view @click="goDetail(item)" class='item acea-row row-between-wrapper' hover-class="none">
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
|
||||
<span class="pictrue_log pictrue_log_class"
|
||||
v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
|
||||
</view>
|
||||
<view class='underline'>
|
||||
<view class='text'>
|
||||
<view class='line1'>{{item.store_name}}</view>
|
||||
<view class='money font-color'>{{$t(`￥`)}}<text class='num'>{{item.price}}</text></view>
|
||||
<view class="vip-money acea-row row-middle"
|
||||
v-if="item.base && item.vip_price && item.vip_price > 0">
|
||||
{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/jvip.png' class="jvip"></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle'
|
||||
v-if="item.is_vip && item.vip_price && item.vip_price > 0">
|
||||
{{$t(`￥`)}}{{item.vip_price || 0}}
|
||||
<image src='/static/images/vip.png'></image><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text>
|
||||
</view>
|
||||
<view class='vip-money acea-row row-middle' v-else><text
|
||||
class='num'>{{$t(`已售`)}}{{item.sales}}{{item.unit_name}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="empty-img" v-if="!bastList.length && isIframe">{{$t(`商品列表，暂无数据`)}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let app = getApp()
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail,
|
||||
goPage
|
||||
} from '@/libs/order.js';
|
||||
import {
|
||||
getHomeProducts
|
||||
} from '@/api/store.js';
|
||||
export default {
|
||||
name: 'goodList',
|
||||
computed: mapGetters(['uid']),
|
||||
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.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.productslist();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bastList: [],
|
||||
name: this.$options.name,
|
||||
isIframe: false,
|
||||
isShow: true,
|
||||
selectType: 0,
|
||||
selectId: '',
|
||||
salesOrder: '',
|
||||
newsOrder: '',
|
||||
ids: '',
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
type: '',
|
||||
numConfig: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isIframe = app.globalData.isIframe;
|
||||
},
|
||||
mounted() {},
|
||||
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
|
||||
});
|
||||
});
|
||||
},
|
||||
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'>
|
||||
.empty-img {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
margin: 26rpx auto 0 auto;
|
||||
background-color: #ccc;
|
||||
text-align: center;
|
||||
line-height: 300rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item {
|
||||
position: relative;
|
||||
padding-left: 30rpx;
|
||||
box-shadow: 2px 1px 6px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.goodList .item .pictrue {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.goodList .item .pictrue .numPic {
|
||||
position: absolute;
|
||||
left: 7rpx;
|
||||
top: 7rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.goodList .item .underline {
|
||||
padding: 30rpx 30rpx 30rpx 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.goodList .item:nth-last-child(1) .underline {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.goodList .item .text {
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
width: 489rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .jvip {
|
||||
width: 46rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money image {
|
||||
width: 64rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 8rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.goodList .item .text .vip-money .num {
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
font-weight: normal;
|
||||
margin-top: -2rpx;
|
||||
|
||||
~.num {
|
||||
margin-left: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goodList .item .iconfont {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
bottom: 38rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -359,15 +359,15 @@
|
||||
.productList .item .text .vip .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.productList .item .text .vip .vip-money image {
|
||||
width: 46rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 4rpx;
|
||||
width: 64rpx;
|
||||
height: 26rpx;
|
||||
margin-left: 4rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
|
||||
@ -1,440 +1,446 @@
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='productList'>
|
||||
<view class='search bg-color acea-row row-between-wrapper'>
|
||||
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
|
||||
<input :placeholder='$t(`搜索商品名称`)' placeholder-class='placeholder' confirm-type='search' name="search"
|
||||
:value='where.store_name' @confirm="searchSubmit"></input>
|
||||
</view>
|
||||
<view class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
|
||||
</view>
|
||||
</view>
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item line1' :class='title ? "font-num":""' @click='set_where(1)'>{{$t(`默认`)}}</view>
|
||||
<view class='item' @click='set_where(2)'>
|
||||
{{$t(`积分`)}}
|
||||
<image v-if="price==1" src='../../static/images/up.png'></image>
|
||||
<image v-else-if="price==2" src='../../static/images/down.png'></image>
|
||||
<image v-else src='../../static/images/horn.png'></image>
|
||||
</view>
|
||||
<view class='item' @click='set_where(3)'>
|
||||
{{$t(`销量`)}}
|
||||
<image v-if="stock==1" src='../../static/images/up.png'></image>
|
||||
<image v-else-if="stock==2" src='../../static/images/down.png'></image>
|
||||
<image v-else src='../../static/images/horn.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
|
||||
<view class='item' :class='is_switch==true?"":"on"' hover-class='none'
|
||||
v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
|
||||
<view class='pictrue' :class='is_switch==true?"":"on"'>
|
||||
<image :src='item.image' :class='is_switch==true?"":"on"'></image>
|
||||
</view>
|
||||
<view class='text' :class='is_switch==true?"":"on"'>
|
||||
<view class='name line1'>{{item.title}}</view>
|
||||
<view class='money font-color' :class='is_switch==true?"":"on"'><text
|
||||
class='num'>{{item.price}}{{$t(`积分`)}}</text></view>
|
||||
<view class='vip acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0">{{item.vip_price}} {{$t(`积分`)}}
|
||||
<image src='../../static/images/vip.png'></image>
|
||||
</view>
|
||||
<view class="sales">
|
||||
<view class="">
|
||||
{{item.sales}}{{$t(`人兑换`)}}
|
||||
</view>
|
||||
<view class="exchange">{{$t(`兑换`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
|
||||
<view class='emptyBox'>
|
||||
<image :src="imgHost + '/statics/images/no-thing.png'"></image>
|
||||
</view>
|
||||
<recommend :hostProduct="hostProduct"></recommend>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import home from '@/components/home';
|
||||
import {
|
||||
getProductHot
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getStoreIntegralList
|
||||
} from '@/api/activity.js';
|
||||
import recommend from '@/components/recommend';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
import {HTTP_REQUEST_URL} from '@/config/app';
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
components: {
|
||||
recommend,
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost:HTTP_REQUEST_URL,
|
||||
productList: [],
|
||||
is_switch: true,
|
||||
where: {
|
||||
store_name: '',
|
||||
priceOrder: '',
|
||||
salesOrder: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
},
|
||||
price: 0,
|
||||
stock: 0,
|
||||
nows: false,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: this.$t(`加载更多`),
|
||||
title: '',
|
||||
hostProduct: [],
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
hotScroll: false
|
||||
};
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.where.cid = options.cid || 0;
|
||||
this.$set(this.where, 'sid', options.sid || 0);
|
||||
this.title = options.title || '';
|
||||
this.$set(this.where, 'store_name', options.searchValue || '');
|
||||
this.get_product_list();
|
||||
this.get_host_product();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 去详情页
|
||||
godDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/points_mall/integral_goods_details?id=${item.id}`
|
||||
})
|
||||
})
|
||||
},
|
||||
Changswitch: function() {
|
||||
let that = this;
|
||||
that.is_switch = !that.is_switch
|
||||
},
|
||||
searchSubmit: function(e) {
|
||||
let that = this;
|
||||
that.$set(that.where, 'store_name', e.detail.value);
|
||||
that.loadend = false;
|
||||
that.$set(that.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return
|
||||
getProductHot(
|
||||
that.hotPage,
|
||||
that.hotLimit,
|
||||
).then(res => {
|
||||
that.hotPage++
|
||||
that.hotScroll = res.data.length < that.hotLimit
|
||||
that.hostProduct = that.hostProduct.concat(res.data)
|
||||
// that.$set(that, 'hostProduct', res.data)
|
||||
});
|
||||
},
|
||||
//点击事件处理
|
||||
set_where: function(e) {
|
||||
switch (e) {
|
||||
case 1:
|
||||
this.where = {
|
||||
store_name: '',
|
||||
priceOrder: '',
|
||||
salesOrder: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
}
|
||||
this.price = 0
|
||||
this.stock = 0
|
||||
break;
|
||||
case 2:
|
||||
if (this.price == 0) this.price = 1;
|
||||
else if (this.price == 1) this.price = 2;
|
||||
else if (this.price == 2) this.price = 0;
|
||||
this.stock = 0;
|
||||
break;
|
||||
case 3:
|
||||
if (this.stock == 0) this.stock = 1;
|
||||
else if (this.stock == 1) this.stock = 2;
|
||||
else if (this.stock == 2) this.stock = 0;
|
||||
this.price = 0
|
||||
break;
|
||||
case 4:
|
||||
this.nows = !this.nows;
|
||||
break;
|
||||
}
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1);
|
||||
this.get_product_list(true);
|
||||
},
|
||||
//设置where条件
|
||||
setWhere: function() {
|
||||
if (this.price == 0) this.where.priceOrder = '';
|
||||
else if (this.price == 1) this.where.priceOrder = 'asc';
|
||||
else if (this.price == 2) this.where.priceOrder = 'desc';
|
||||
if (this.stock == 0) this.where.salesOrder = '';
|
||||
else if (this.stock == 1) this.where.salesOrder = 'asc';
|
||||
else if (this.stock == 2) this.where.salesOrder = 'desc';
|
||||
this.where.news = this.nows ? 1 : 0;
|
||||
},
|
||||
//查找产品
|
||||
get_product_list: function(isPage) {
|
||||
let that = this;
|
||||
that.setWhere();
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
if (isPage === true) that.$set(that, 'productList', []);
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getStoreIntegralList(that.where).then(res => {
|
||||
let list = res.data;
|
||||
let productList = that.$util.SplitArray(list, that.productList);
|
||||
let loadend = list.length < that.where.limit;
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
|
||||
that.$set(that, 'productList', productList);
|
||||
that.$set(that.where, 'page', that.where.page + 1);
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = that.$t(`加载更多`);
|
||||
});
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.productList.length > 0) {
|
||||
this.get_product_list();
|
||||
} else {
|
||||
this.get_host_product();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.productList .search {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
padding-left: 23rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.productList .search .input {
|
||||
width: 640rpx;
|
||||
height: 60rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.productList .search .input input {
|
||||
width: 548rpx;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.productList .search .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.productList .search .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.productList .search .icon-pailie,
|
||||
.productList .search .icon-tupianpailie {
|
||||
color: #fff;
|
||||
width: 62rpx;
|
||||
font-size: 40rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
}
|
||||
|
||||
.productList .nav {
|
||||
height: 86rpx;
|
||||
color: #454545;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 86rpx;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.productList .nav .item {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.productList .nav .item.font-color {}
|
||||
|
||||
.productList .nav .item image {
|
||||
width: 15rpx;
|
||||
height: 19rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .list {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 172rpx;
|
||||
}
|
||||
|
||||
.productList .list.on {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.productList .list .item {
|
||||
width: 345rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.productList .list .item.on {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
padding: 30rpx 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 345rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue.on {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue image.on {
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text {
|
||||
padding: 20rpx 17rpx 26rpx 17rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.productList .list .item .text.on {
|
||||
width: 508rpx;
|
||||
padding: 0 0 0 22rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money {
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money.on {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip {
|
||||
font-size: 22rpx;
|
||||
margin-top: 7rpx;
|
||||
|
||||
.sales {
|
||||
color: #aaa;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.exchange {
|
||||
border: 1px solid var(--view-theme);
|
||||
border-radius: 20rpx;
|
||||
padding: 0 12rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip.on {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip .vip-money image {
|
||||
width: 46rpx;
|
||||
height: 21rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
.emptyBox{
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
.tips{
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<view :style="colorStyle">
|
||||
<view class='productList'>
|
||||
<view class='search bg-color acea-row row-between-wrapper'>
|
||||
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
|
||||
<input :placeholder='$t(`搜索商品名称`)' placeholder-class='placeholder' confirm-type='search'
|
||||
name="search" :value='where.store_name' @confirm="searchSubmit"></input>
|
||||
</view>
|
||||
<view class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
|
||||
</view>
|
||||
</view>
|
||||
<view class='nav acea-row row-middle'>
|
||||
<view class='item line1' :class='title ? "font-num":""' @click='set_where(1)'>{{$t(`默认`)}}</view>
|
||||
<view class='item' @click='set_where(2)'>
|
||||
{{$t(`积分`)}}
|
||||
<image v-if="price==1" src='../../static/images/up.png'></image>
|
||||
<image v-else-if="price==2" src='../../static/images/down.png'></image>
|
||||
<image v-else src='../../static/images/horn.png'></image>
|
||||
</view>
|
||||
<view class='item' @click='set_where(3)'>
|
||||
{{$t(`销量`)}}
|
||||
<image v-if="stock==1" src='../../static/images/up.png'></image>
|
||||
<image v-else-if="stock==2" src='../../static/images/down.png'></image>
|
||||
<image v-else src='../../static/images/horn.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
|
||||
<view class='item' :class='is_switch==true?"":"on"' hover-class='none'
|
||||
v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
|
||||
<view class='pictrue' :class='is_switch==true?"":"on"'>
|
||||
<image :src='item.image' :class='is_switch==true?"":"on"'></image>
|
||||
</view>
|
||||
<view class='text' :class='is_switch==true?"":"on"'>
|
||||
<view class='name line1'>{{item.title}}</view>
|
||||
<view class='money font-color' :class='is_switch==true?"":"on"'><text
|
||||
class='num'>{{item.price}}{{$t(`积分`)}}</text></view>
|
||||
<view class='vip acea-row row-between-wrapper' :class='is_switch==true?"":"on"'>
|
||||
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0">{{item.vip_price}}
|
||||
{{$t(`积分`)}}
|
||||
<image src='../../static/images/vip.png'></image>
|
||||
</view>
|
||||
<view class="sales">
|
||||
<view class="">
|
||||
{{item.sales}}{{$t(`人兑换`)}}
|
||||
</view>
|
||||
<view class="exchange">{{$t(`兑换`)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
|
||||
<view class='emptyBox'>
|
||||
<image :src="imgHost + '/statics/images/no-thing.png'"></image>
|
||||
</view>
|
||||
<recommend :hostProduct="hostProduct"></recommend>
|
||||
</view>
|
||||
<!-- #ifndef MP -->
|
||||
<home></home>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import home from '@/components/home';
|
||||
import {
|
||||
getProductHot
|
||||
} from '@/api/store.js';
|
||||
import {
|
||||
getStoreIntegralList
|
||||
} from '@/api/activity.js';
|
||||
import recommend from '@/components/recommend';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
goShopDetail
|
||||
} from '@/libs/order.js'
|
||||
import colors from "@/mixins/color";
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
export default {
|
||||
computed: mapGetters(['uid']),
|
||||
components: {
|
||||
recommend,
|
||||
home
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
productList: [],
|
||||
is_switch: true,
|
||||
where: {
|
||||
store_name: '',
|
||||
priceOrder: '',
|
||||
salesOrder: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
},
|
||||
price: 0,
|
||||
stock: 0,
|
||||
nows: false,
|
||||
loadend: false,
|
||||
loading: false,
|
||||
loadTitle: this.$t(`加载更多`),
|
||||
title: '',
|
||||
hostProduct: [],
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
hotScroll: false
|
||||
};
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
onLoad: function(options) {
|
||||
this.where.cid = options.cid || 0;
|
||||
this.$set(this.where, 'sid', options.sid || 0);
|
||||
this.title = options.title || '';
|
||||
this.$set(this.where, 'store_name', options.searchValue || '');
|
||||
this.get_product_list();
|
||||
this.get_host_product();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 去详情页
|
||||
godDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/points_mall/integral_goods_details?id=${item.id}`
|
||||
})
|
||||
})
|
||||
},
|
||||
Changswitch: function() {
|
||||
let that = this;
|
||||
that.is_switch = !that.is_switch
|
||||
},
|
||||
searchSubmit: function(e) {
|
||||
let that = this;
|
||||
that.$set(that.where, 'store_name', e.detail.value);
|
||||
that.loadend = false;
|
||||
that.$set(that.where, 'page', 1)
|
||||
this.get_product_list(true);
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return
|
||||
getProductHot(
|
||||
that.hotPage,
|
||||
that.hotLimit,
|
||||
).then(res => {
|
||||
that.hotPage++
|
||||
that.hotScroll = res.data.length < that.hotLimit
|
||||
that.hostProduct = that.hostProduct.concat(res.data)
|
||||
// that.$set(that, 'hostProduct', res.data)
|
||||
});
|
||||
},
|
||||
//点击事件处理
|
||||
set_where: function(e) {
|
||||
switch (e) {
|
||||
case 1:
|
||||
this.where = {
|
||||
store_name: '',
|
||||
priceOrder: '',
|
||||
salesOrder: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
}
|
||||
this.price = 0
|
||||
this.stock = 0
|
||||
break;
|
||||
case 2:
|
||||
if (this.price == 0) this.price = 1;
|
||||
else if (this.price == 1) this.price = 2;
|
||||
else if (this.price == 2) this.price = 0;
|
||||
this.stock = 0;
|
||||
break;
|
||||
case 3:
|
||||
if (this.stock == 0) this.stock = 1;
|
||||
else if (this.stock == 1) this.stock = 2;
|
||||
else if (this.stock == 2) this.stock = 0;
|
||||
this.price = 0
|
||||
break;
|
||||
case 4:
|
||||
this.nows = !this.nows;
|
||||
break;
|
||||
}
|
||||
this.loadend = false;
|
||||
this.$set(this.where, 'page', 1);
|
||||
this.get_product_list(true);
|
||||
},
|
||||
//设置where条件
|
||||
setWhere: function() {
|
||||
if (this.price == 0) this.where.priceOrder = '';
|
||||
else if (this.price == 1) this.where.priceOrder = 'asc';
|
||||
else if (this.price == 2) this.where.priceOrder = 'desc';
|
||||
if (this.stock == 0) this.where.salesOrder = '';
|
||||
else if (this.stock == 1) this.where.salesOrder = 'asc';
|
||||
else if (this.stock == 2) this.where.salesOrder = 'desc';
|
||||
this.where.news = this.nows ? 1 : 0;
|
||||
},
|
||||
//查找产品
|
||||
get_product_list: function(isPage) {
|
||||
let that = this;
|
||||
that.setWhere();
|
||||
if (that.loadend) return;
|
||||
if (that.loading) return;
|
||||
if (isPage === true) that.$set(that, 'productList', []);
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
getStoreIntegralList(that.where).then(res => {
|
||||
let list = res.data;
|
||||
let productList = that.$util.SplitArray(list, that.productList);
|
||||
let loadend = list.length < that.where.limit;
|
||||
that.loadend = loadend;
|
||||
that.loading = false;
|
||||
that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
|
||||
that.$set(that, 'productList', productList);
|
||||
that.$set(that.where, 'page', that.where.page + 1);
|
||||
}).catch(err => {
|
||||
that.loading = false;
|
||||
that.loadTitle = that.$t(`加载更多`);
|
||||
});
|
||||
},
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.productList.length > 0) {
|
||||
this.get_product_list();
|
||||
} else {
|
||||
this.get_host_product();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.productList .search {
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
padding-left: 23rpx;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.productList .search .input {
|
||||
width: 640rpx;
|
||||
height: 60rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.productList .search .input input {
|
||||
width: 548rpx;
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.productList .search .input .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.productList .search .input .iconfont {
|
||||
font-size: 35rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.productList .search .icon-pailie,
|
||||
.productList .search .icon-tupianpailie {
|
||||
color: #fff;
|
||||
width: 62rpx;
|
||||
font-size: 40rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
}
|
||||
|
||||
.productList .nav {
|
||||
height: 86rpx;
|
||||
color: #454545;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
margin-top: 86rpx;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.productList .nav .item {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.productList .nav .item.font-color {}
|
||||
|
||||
.productList .nav .item image {
|
||||
width: 15rpx;
|
||||
height: 19rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.productList .list {
|
||||
padding: 0 20rpx;
|
||||
margin-top: 172rpx;
|
||||
}
|
||||
|
||||
.productList .list.on {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.productList .list .item {
|
||||
width: 345rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.productList .list .item.on {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid #f6f6f6;
|
||||
padding: 30rpx 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 345rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue.on {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.productList .list .item .pictrue image.on {
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text {
|
||||
padding: 20rpx 17rpx 26rpx 17rpx;
|
||||
font-size: 30rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.productList .list .item .text.on {
|
||||
width: 508rpx;
|
||||
padding: 0 0 0 22rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money {
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money.on {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .money .num {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip {
|
||||
font-size: 22rpx;
|
||||
margin-top: 7rpx;
|
||||
|
||||
.sales {
|
||||
color: #aaa;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.exchange {
|
||||
border: 1px solid var(--view-theme);
|
||||
border-radius: 20rpx;
|
||||
padding: 0 12rpx;
|
||||
color: var(--view-theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip.on {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip .vip-money {
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.productList .list .item .text .vip .vip-money image {
|
||||
width: 64rpx;
|
||||
height: 26rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.noCommodity {
|
||||
background-color: #fff;
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
.emptyBox {
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.tips {
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -746,6 +746,22 @@ export default {
|
||||
}
|
||||
|
||||
return 0
|
||||
},
|
||||
/*
|
||||
* 获取当前时间
|
||||
*/
|
||||
getNowTime() {
|
||||
let today = new Date();
|
||||
let year = today.getFullYear(); // 获取当前年份
|
||||
let month = today.getMonth() + 1; // 获取当前月份（注意：月份从 0 开始计数，所以需要加 1）
|
||||
let day = today.getDate(); // 获取当前日（几号）
|
||||
let hour = today.getHours(); // 获取当前小时
|
||||
let minute = today.getMinutes(); // 获取当前分钟
|
||||
let second = today.getSeconds(); // 获取当前秒钟
|
||||
|
||||
// 格式化输出当前时间
|
||||
let nowTime = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
|
||||
return nowTime
|
||||
},
|
||||
/**
|
||||
* 处理服务器扫码带进来的参数
|
||||
@ -981,4 +997,4 @@ export default {
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user