yangjie
/
high-unionPay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修改首页中石化码券跳转

Browse Source
master
杨杰 3 years ago
parent 980f062981
commit 87ea64fcad
2 changed files with 361 additions and 350 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 709
      high-unionPay/pages/goods/goods-list/goods-list.vue
  2. 2
      high-unionPay/subPages/brand-classification/brand-classification.vue

709
high-unionPay/pages/goods/goods-list/goods-list.vue
Unescape View File

@ -1,350 +1,361 @@
<template>
<view>
<view class="input-box">
<view class="icon search"></view>
<input placeholder="搜索卡券" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" />
</view>
<view class="swiper">
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id">
<image :src="imageUrl+swiper.imgData" ></image>
</swiper-item>
</swiper>
<view class="indicator">
<view class="dots" v-for="(swiper, index) in swiperList"
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
</view>
</view>
</view>
<view v-if="goodsList == '' " class="mart60 fotct font14 fcor666">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view>
<view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)">
<image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.couponImg"></image>
<view class="goodsli ">
<view class="text2 fcor333 font14 fontwig6">{{row.couponName}}</view>
<view class="goodsxg font12 fotct">限购{{row.limitNumber}}件</view>
<view class="info mart10">
<view class="price" v-if="row.payType != 1">
<image style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfx.png">
</image> {{ row.discountPrice*100}}
</view>
<view class="price" v-else>
￥ {{ row.discountPrice}}
</view>
<!-- v-if="product.discountPrice !== product.salesPrice" -->
<view class="slogan" v-if="row.discountPrice !== row.salesPrice">
<image v-if="row.payType != 1" style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfh.png">
</image> <text v-else>￥</text>{{ row.salesPrice*100}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getCouponList,
getCmsContent,
getBrandCouponList
} from '../../../Utils/Api.js';
let app = getApp();
export default {
data() {
return {
goodsList: [],
imagewxUrl: app.globalData.imageWxImg,
imgadres:'noorder.png',
imageUrl: app.globalData.imgUrl,
// 轮播图片
swiperList: [{
id: 1,
src: 'url1',
img: 'banner2.png'
},
{
id: 2,
src: 'url2',
img: 'banner3.png'
}
],
currentSwiper: 0,
pageNum: 1,
pageSize: 10,
isNoMoreData: false,
typeId: '',
couponName: '',
brandid : '',
goodtyid: ''
};
},
onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
this.typeId = option.id;
this.brandid = option.brandId;
this.goodtyid = option.goodsId;
if (option.id == 1) {
uni.setNavigationBarTitle({
title: '商品列表'
});
this.getCouponListArea();
this.getCmsContent('CMS_WX_APPLETS_GOODS_LIST');
}
if (option.id == 2) {
uni.setNavigationBarTitle({
title: '积分列表'
});
this.getCouponListArea();
this.getCmsContent('CMS_WX_APPLETS_GOODS_LIST');
}
if (option.id == 3) {
uni.setNavigationBarTitle({
title: '优选商品'
});
this.getCmsContent('CMS_PRE_LIST');
this.getBrandCouponList();
}
},
onPageScroll(e) {
},
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom() {
this.getCouponListArea();
},
methods: {
//获取弹出或者弹窗
getCmsContent() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_WX_APPLETS_GOODS_LIST'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
this.swiperList = res.return_data;
}
});
},
//轮播图指示器
swiperChange(event) {
this.currentSwiper = event.detail.current;
},
//赠券卡券列表
getCouponListArea() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let pagenum = this.pageNum;
let params = {
regionId: app.globalData.cityId,
// regionId: '510000',
pageNum: pagenum,
pageSize: this.pageSize,
displayArea: this.typeId,
couponName: this.couponName
}
getCouponList(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.goodsList = this.goodsList.concat(res.return_data.list);
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.goodsList = [];
}
})
},
//优选商品列表
getBrandCouponList() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let pagenum = this.pageNum;
let params = {
regionId: app.globalData.cityId,
pageNum: pagenum,
pageSize: this.pageSize,
brandId: this.brandid,
goodsTypeId: this.goodtyid,
couponName: this.couponName
}
getBrandCouponList(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.goodsList = this.goodsList.concat(res.return_data.list);
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.goodsList = [];
}
})
},
toSearch() {
this.pageNum = 1;
this.pageSize = 10;
this.isNoMoreData = false;
this.goodsList = [];
if(this.typeId == 3){
this.getBrandCouponList();
}else{
this.getCouponListArea();
}
},
//商品跳转
toGoods(e) {
uni.navigateTo({
url: '../../goods/goods?id=' + e
});
},
}
}
</script>
<style lang="scss">
.input-box {
width: 90%;
margin-left: 5%;
margin-top: 15px;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 2px;
left: 5px;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 50upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
.swiper {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
.swiper-box {
width: 92%;
height: 150px;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//兼容ios，微信小程序
position: relative;
z-index: 1;
swiper {
width: 100%;
height: 150px;
swiper-item {
image {
width: 100%;
height: 150px;
}
}
}
.indicator {
position: absolute;
bottom: 20upx;
left: 20upx;
background-color: rgba(255, 255, 255, 0.4);
width: 150upx;
height: 5upx;
border-radius: 3upx;
overflow: hidden;
display: flex;
.dots {
width: 0upx;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
&.on {
width: (100%/3);
}
}
}
}
}
.goodsimg {
width: 90px;
height: 90px;
}
.goodsli {
margin-left: 100px;
padding-top: 5px;
}
.goodsxg {
margin-top: 5px;
border: 1px solid #eb5823;
border-radius: 5px;
color: #eb5823;
width: 55px;
padding: 3px;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
width: 50%;
}
.slogan {
width: 50%;
color: #807c87;
font-size: 24upx;
text-decoration: line-through;
}
}
<template>
<view>
<view class="input-box">
<view class="icon search"></view>
<input placeholder="搜索卡券" v-model="couponName" placeholder-style="color:#c0c0c0;" @input="toSearch()" />
</view>
<view class="swiper">
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id">
<image :src="imageUrl+swiper.imgData"></image>
</swiper-item>
</swiper>
<view class="indicator">
<view class="dots" v-for="(swiper, index) in swiperList"
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
</view>
</view>
</view>
<view v-if="goodsList == '' " class="mart60 fotct font14 fcor666">
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
</view>
<view class="width90 height110 mart5" v-for="(row, index) in goodsList" :key="index" @click="toGoods(row.id)">
<image class="goodsimg flleft mart5" mode="widthFix" :src="imageUrl+row.couponImg"></image>
<view class="goodsli ">
<view class="text2 fcor333 font14 fontwig6">{{row.couponName}}</view>
<view class="goodsxg font12 fotct">限购{{row.limitNumber}}件</view>
<view class="info mart10">
<view class="price" v-if="row.payType != 1">
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image> {{ row.discountPrice*100}}
</view>
<view class="price" v-else>
￥ {{ row.discountPrice}}
</view>
<!-- v-if="product.discountPrice !== product.salesPrice" -->
<view class="slogan" v-if="row.discountPrice !== row.salesPrice">
<!-- <image v-if="row.payType != 1" style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfh.png">
</image>{{ row.salesPrice*100}} <text v-else>￥</text>{{row.salesPrice}} -->
<view v-if="row.payType != 1">
<image style="width: 15px;height: 15px;vertical-align: sub;"
src="../../../static/img/jfh.png">
</image>{{ row.salesPrice*100}}
</view>
<view v-else>￥{{ row.salesPrice}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getCouponList,
getCmsContent,
getBrandCouponList
} from '../../../Utils/Api.js';
let app = getApp();
export default {
data() {
return {
goodsList: [],
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png',
imageUrl: app.globalData.imgUrl,
// 轮播图片
swiperList: [{
id: 1,
src: 'url1',
img: 'banner2.png'
},
{
id: 2,
src: 'url2',
img: 'banner3.png'
}
],
currentSwiper: 0,
pageNum: 1,
pageSize: 10,
isNoMoreData: false,
typeId: '',
couponName: '',
brandid: '',
goodtyid: ''
};
},
onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
this.typeId = option.id;
this.brandid = option.brandId;
this.goodtyid = option.goodsId;
if (option.id == 1) {
uni.setNavigationBarTitle({
title: '商品列表'
});
this.getCouponListArea();
this.getCmsContent('CMS_WX_APPLETS_GOODS_LIST');
}
if (option.id == 2) {
uni.setNavigationBarTitle({
title: '积分列表'
});
this.getCouponListArea();
this.getCmsContent('CMS_WX_APPLETS_GOODS_LIST');
}
if (option.id == 3) {
uni.setNavigationBarTitle({
title: '中石化码列表'
});
this.getCouponListArea();
this.getCmsContent('CMS_WX_APPLETS_GOODS_LIST');
}
if (option.id == 4) {
uni.setNavigationBarTitle({
title: '优选商品'
});
this.getCmsContent('CMS_PRE_LIST');
this.getBrandCouponList();
}
},
onPageScroll(e) {
},
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom() {
this.getCouponListArea();
},
methods: {
//获取弹出或者弹窗
getCmsContent() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_WX_APPLETS_GOODS_LIST'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
this.swiperList = res.return_data;
}
});
},
//轮播图指示器
swiperChange(event) {
this.currentSwiper = event.detail.current;
},
//赠券卡券列表
getCouponListArea() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let pagenum = this.pageNum;
let params = {
regionId: app.globalData.cityId,
pageNum: pagenum,
pageSize: this.pageSize,
displayArea: this.typeId,
couponName: this.couponName
}
getCouponList(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.goodsList = this.goodsList.concat(res.return_data.list);
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.goodsList = [];
}
})
},
//优选商品列表
getBrandCouponList() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let pagenum = this.pageNum;
let params = {
regionId: app.globalData.cityId,
pageNum: pagenum,
pageSize: this.pageSize,
brandId: this.brandid,
goodsTypeId: this.goodtyid,
couponName: this.couponName
}
getBrandCouponList(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.goodsList = this.goodsList.concat(res.return_data.list);
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.goodsList = [];
}
})
},
toSearch() {
this.pageNum = 1;
this.pageSize = 10;
this.isNoMoreData = false;
this.goodsList = [];
if (this.typeId == 4) {
this.getBrandCouponList();
} else {
this.getCouponListArea();
}
},
//商品跳转
toGoods(e) {
uni.navigateTo({
url: '../../goods/goods?id=' + e
});
},
}
}
</script>
<style lang="scss">
.input-box {
width: 90%;
margin-left: 5%;
margin-top: 15px;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 2px;
left: 5px;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 50upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
.swiper {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
.swiper-box {
width: 92%;
height: 150px;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//兼容ios，微信小程序
position: relative;
z-index: 1;
swiper {
width: 100%;
height: 150px;
swiper-item {
image {
width: 100%;
height: 150px;
}
}
}
.indicator {
position: absolute;
bottom: 20upx;
left: 20upx;
background-color: rgba(255, 255, 255, 0.4);
width: 150upx;
height: 5upx;
border-radius: 3upx;
overflow: hidden;
display: flex;
.dots {
width: 0upx;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
&.on {
width: (100%/3);
}
}
}
}
}
.goodsimg {
width: 90px;
height: 90px;
}
.goodsli {
margin-left: 100px;
padding-top: 5px;
}
.goodsxg {
margin-top: 5px;
border: 1px solid #eb5823;
border-radius: 5px;
color: #eb5823;
width: 55px;
padding: 3px;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
width: 50%;
}
.slogan {
width: 50%;
color: #807c87;
font-size: 24upx;
text-decoration: line-through;
}
}
</style>

2
high-unionPay/subPages/brand-classification/brand-classification.vue
Unescape View File

@ -77,7 +77,7 @@
// 跳转商品
jumpgoods(item){
uni.navigateTo({
url:'../../pages/goods/goods-list/goods-list?id=3'+'&goodsId='+this.desId+'&brandId='+item
url:'../../pages/goods/goods-list/goods-list?id=4'+'&goodsId='+this.desId+'&brandId='+item
})
}
}

Write Preview
Loading…
Cancel
Save