|
@@ -7,15 +7,15 @@
|
|
|
<view class="container-section tui-skeleton clearfix">
|
|
|
<view class="product-list" v-for="(pro,index) in productList" :key="index" @click.stop="Details(pro)">
|
|
|
<view class="product-list-image">
|
|
|
- <image class="product-image" :src="pro.image" mode=""></image>
|
|
|
- <image class="product-icon" :src="StaticUrl+'icon-hot.png'" mode="" v-if="pro.activistatus == 1"></image>
|
|
|
+ <image class="product-image" :src="pro.mainImage" mode=""></image>
|
|
|
+ <image class="product-icon" :src="StaticUrl+'icon-hot.png'" mode="" v-if="pro.activeStatus == 1"></image>
|
|
|
</view>
|
|
|
<view class="product-list-msg">
|
|
|
<view class="product-msg-name">{{ pro.name }}</view>
|
|
|
- <view class="product-list-tag" v-if="pro.activistatus == 1"><text class="tag">活动价</text></view>
|
|
|
+ <view class="product-list-tag" v-if="pro.activeStatus == 1"><text class="tag">活动价</text></view>
|
|
|
<view class="product-list-pri">
|
|
|
<view class="price">¥{{ pro.price | PriceFormat}}</view>
|
|
|
- <view class="carts" @click.stop="handAddCarts">
|
|
|
+ <view class="carts" @click.stop="handAddCarts(pro)">
|
|
|
<view class="carts-add">
|
|
|
<text class="iconfont icon-gouwuche"></text>
|
|
|
</view>
|
|
@@ -32,205 +32,20 @@
|
|
|
data(){
|
|
|
return{
|
|
|
activityBanner:`${this.$Static}banner.png`,
|
|
|
- productList:[
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:2,
|
|
|
- price:888,
|
|
|
- },
|
|
|
- {
|
|
|
- image:'https://img.caimei365.com/group1/M00/03/E7/Cmis21__-MOABqnlAAJUIFDLc8U188.jpg',
|
|
|
- name:'小气泡水氧嫩肤仪小气泡水氧嫩肤仪',
|
|
|
- activistatus:1,
|
|
|
- price:888,
|
|
|
- },
|
|
|
-
|
|
|
- ],//商品列表
|
|
|
+ listQuery:{
|
|
|
+ activityId:0,
|
|
|
+ userId:0,
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10
|
|
|
+ },
|
|
|
+ hasNextPage:false,
|
|
|
+ productList:[],//商品列表
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
-
|
|
|
+ onLoad(option) {
|
|
|
+ this.listQuery.activityId = option.activityId
|
|
|
+ this.listQuery.userId = option.userId
|
|
|
+ this.GetProductActivityDetails();
|
|
|
},
|
|
|
filters: {
|
|
|
//处理金额
|
|
@@ -239,16 +54,48 @@
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ GetProductActivityDetails(){//初始化活动详情
|
|
|
+ this.ProductService.GetProductActivityDetails(this.listQuery).then(response => {
|
|
|
+ const data = response.data
|
|
|
+ this.activityBanner = data.image
|
|
|
+ this.hasNextPage = data.pageInfo.hasNextPage
|
|
|
+ this.productList = data.pageInfo.list
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ GetOnReachBottomData(){//上滑加载更多
|
|
|
+ this.listQuery.pageNum+=1
|
|
|
+ this.ProductService.GetProductActivityDetails(this.listQuery).then(response => {
|
|
|
+ const data = response.data
|
|
|
+ this.hasNextPage = data.pageInfo.hasNextPage
|
|
|
+ this.productList = this.productList.concat(data.pageInfo.list)
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
Details(pro){
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${pro.productId}`)
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
|
|
|
},
|
|
|
handAddCarts(pro){
|
|
|
- this.$util.msg('加入成功',1500,true,'success')
|
|
|
+ this.ProductService.shoppingAddCart({productId:pro.productId,userId:this.listQuery.userId,productCount:1}).then(response => {
|
|
|
+ this.$util.msg('加入购物车成功',1500,true,'success')
|
|
|
+ this.GetCartNumber()
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
onPullDownRefresh() {//下拉刷新
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ THIS.GetProductActivityDetails()
|
|
|
uni.stopPullDownRefresh()
|
|
|
},
|
|
|
+ onReachBottom(){
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.GetOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
onShow() {
|
|
|
|
|
|
}
|