other_project/mallplus
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

初始项目

Browse Source
This commit is contained in:
liupopo
2023-02-11 12:55:02 +08:00
parent 1748bda84a
commit 0b89e36064
3363 changed files with 506201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
mallplusui-uniapp-app/pagesA/after_sale/detail.vue Normal file
View File

@@ -0,0 +1,388 @@
<template>
<view class="content">
<view class="content-top">
<!-- <view class="back-img">
<view class="back-img-c">
<view class="back-img-t">退款单状态</view>
<view class="back-img-b">{{status_name}} {{refund_name}} {{reship_name}}...</view>
</view>
</view> -->
<view class='cell-group margin-cell-group'>
<view class='cell-item add-title-item'>
<view class='cell-item-bd'>
<view class="cell-bd-view black-text">
<text class="cell-bd-text color-3">退款单状态</text>
</view>
<view class="cell-bd-view">
<text class="cell-bd-text color-9">{{status_name}} {{refund_name}} {{reship_name}}...</text>
</view>
<view class="cell-bd-view">
<!-- <text class="cell-bd-text">下单时间：{{ orderInfo.ctime }}</text> -->
</view>
</view>
</view>
</view>
<view class='cell-group margin-cell-group'>
<view class='cell-item'>
<view class='cell-item-hd'><view class='cell-hd-title'>售后类型</view></view>
<view class='cell-item-ft'><view class="cell-ft-p">{{type_name}}</view></view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'><view class='cell-hd-title'>退款金额</view></view>
<view class='cell-item-ft'><view class="cell-ft-p red-price">{{refund}}元</view></view>
</view>
</view>
<view class='cell-group margin-cell-group' v-if="images.length > 0">
<view class='cell-item right-img'><view class='cell-item-hd'><view class='cell-hd-title'>图片凭证</view></view></view>
<view class="">
<view class="evaluate-c-b">
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
<image :src="item.url" mode="aspectFit" @click="clickImg(item.url)"></image>
</view>
</view>
</view>
</view>
<view class='cell-group margin-cell-group'>
<view class='cell-item right-img'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>问题描述</view>
</view>
</view>
<view class="cell-textarea">
<text v-if="reason">{{reason}}</text>
<text v-else>暂无描述</text>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
<view class='cell-item right-img'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>退货邮寄信息</view>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>收件人</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_name" />
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>联系方式</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_mobile" />
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>邮寄地址</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="reship_info.reship_area + reship_info.reship_address" />
</view>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status == 1">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>快递公司</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" v-model="logi_code" placeholder="请填写快递公司名称"/>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>物流单号</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" v-model="logi_no" placeholder="请填写物流单号" />
</view>
</view>
</view>
<view class='cell-group margin-cell-group' v-show="status == 2 && reship_status > 1">
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>快递公司</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="logi_code"/>
</view>
</view>
<view class='cell-item'>
<view class='cell-item-hd'>
<view class='cell-hd-title'>物流单号</view>
</view>
<view class='cell-item-bd'>
<input class='cell-bd-input' type="text" disabled="false" :value="logi_no"/>
</view>
</view>
</view>
</view>
<view class="button-bottom" v-show="status == 2 && reship_status == 1">
<button class="btn btn-b" @click="submitBtn" :disabled='submitStatus' :loading='submitStatus'>提交</button>
</view>
<view class="button-bottom" v-show="(order_status == 1 && status == 3) || (order_status == 1 && status == 2 && refund_status != 1 && refund_status != 0) || (order_status == 1 && status == 2 && reship_status == 3)">
<button class="btn btn-b" @click="repeat">再次申请售后</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
delivers: ["请选择物流公司","顺丰", "中通", "圆通","韵达"],
deliverIndex: 0,
type_name:'', //售后类型显示
refund:0, //退款金额
images:[], //图片
reason: '暂无', //问题描述
ttype:1, //售后类型
status:1, //售后单状态
status_name: '审核中', //售后单状态文字描述
reship_status:0, //退货单状态
reship_name:'',
refund_status:0, //退款单状态
refund_name:'',
reship_info:[], //退货单明细,如果售后单未审核呢，那么显示的是售后单明细，如果售后单审核通过了，显示退款单明细
items:[], //退货明细
mark:"暂无", //拒绝原因
logi_no:'', //回填物流信息
logi_code:'', //物流公司
reship_id:'',
mode: 'aspectFill',
order_id: '', //订单号
order_status: '', //订单状态
submitStatus: false
}
},
methods: {
//提交按钮
submitBtn() {
this.submitStatus = true;
if (this.logino == '') {
this.$common.errorToShow('请输入退货快递信息');
this.submitStatus = false;
return false;
}
let data = {
logi_no: this.logi_no,
logi_code:this.logi_code,
reship_id: this.reship_id,
};
this.$api.sendShip(data, res => {
if (res.status) {
this.$common.successToShow('提交成功', ress => {
this.submitStatus = false;
uni.navigateBack({
delta: 1
});
});
} else {
this.$common.errorToShow(res.msg);
this.submitStatus = false;
}
});
},
repeat() {
this.$common.navigateTo('../after_sale/index?order_id='+this.order_id);
},
// 图片点击放大
clickImg (img) {
// 预览图片
uni.previewImage({
urls: img.split()
});
}
},
//页面加载
onLoad(options) {
let data = {
aftersales_id: options.aftersales_id
}
this.$api.afterSalesInfo(data, res => {
if(res.status){
let info = res.data.info;
if (info.type == 1){
this.ttype = 1;
this.type_name = '仅退款';
}else{
this.ttype = 2;
this.type_name = '退款退货';
}
this.refund = info.refund;
this.images = info.images;
this.reason = info.reason;
this.reship_info = res.data.reship;
this.order_id = info.order_id;
this.order_status = info.order_status;
if(info.mark){
this.mark = info.mark;
}
if(info.status == 1){
this.status = 1;
this.status_name = '审核中';
}else if(info.status == 2){
this.status = 2;
this.status_name = '申请通过';
//退款单状态
if (info.bill_refund) {
if (info.bill_refund.status == 1) {
this.refund_status = 1;
this.refund_name = '退款中';
} else if (info.bill_refund.status == 2) {
this.refund_status = 2;
this.refund_name = '退款成功';
}
}
//退货单状态
if(info.bill_reship){
this.reship_id = info.bill_reship.reship_id
if(info.bill_reship.status == 1) {
this.reship_status = 1;
this.reship_name = '待发退货';
} else if (info.bill_reship.status == 2) {
this.reship_status = 2;
this.reship_name = '待收退货';
this.logi_no = info.bill_reship.logi_no;
this.logi_code = info.bill_reship.logi_code;
} else {
this.reship_status = 3;
this.reship_name = '已收退货';
this.logi_no = info.bill_reship.logi_no;
this.logi_code = info.bill_reship.logi_code;
}
}
}else{
this.status = 3;
this.status_name = '申请驳回';
}
//售后单明细,如果有退货单明细，就用退货单明细，否则就用售后单明细
// if(info.bill_reship.items){
// page.data.items = info.bill_reship.items;
// }else{
// page.data.items = info.items;
// }
} else {
this.$common.errorToShow(res.msg);
}
});
}
}
</script>
<style>
.back-img{
width: 100%;
height: 200upx;
position: relative;
background-color: #FF7159;
}
.back-img image{
width: 100%;
height: 100%;
position: absolute;
}
.back-img-c{
width: 100%;
height: 100%;
color: #fff;
position: relative;
z-index: 99;
padding: 50upx;
}
.back-img-t{
font-size: 32upx;
}
.back-img-b{
font-size: 24upx;
}
.list-goods-name{
width: 100% !important;
}
.invoice-type .uni-list-cell{
display: inline-block;
font-size: 26upx;
color: #333;
position: relative;
margin-left: 50upx;
}
.invoice-type .uni-list-cell>view{
display: inline-block;
}
.invoice-type-icon{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.invoice-type-c{
margin-left: 50upx;
line-height: 2;
}
.cell-item-ft .cell-bd-input{
text-align: right;
width: 500upx;
font-size: 28upx;
}
.cell-item-bd .cell-bd-input{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right-img{
border-bottom: 0;
}
.cell-textarea{
padding: 0 26upx 20upx;
font-size: 26upx;
color: #333;
word-wrap: break-word;
}
.evaluate-c-b{
overflow: hidden;
padding: 0 20upx;
}
.upload-img{
width: 146upx;
height: 146upx;
margin: 14upx;
text-align: center;
color: #999999;
font-size: 22upx;
border: 2upx solid #E1E1E1;
border-radius: 4upx;
display: inline-block;
float: left;
padding: 24upx 0;
}
.goods-img-item{
width: 174upx;
height: 174upx;
padding: 14upx;
float: left;
position: relative;
}
.goods-img-item:nth-child(4n){
margin-right: 0;
}
.goods-img-item image{
width: 100%;
height: 100%;
}
.del{
width: 30upx !important;
height: 30upx !important;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.black-text .cell-bd-text{
font-size: 28upx;
}
</style>

382
mallplusui-uniapp-app/pagesA/after_sale/index.vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<view class="content">
<form @submit="submit" report-submit="true">
<view class="content-top">
<view class="img-list cart-list">
<checkbox-group class="cart-checkbox" @change="checkboxChange">
<view class="cart-checkbox-item" v-for="(item, key) in orderInfo.orderItemList" :key="key">
<label class="uni-list-cell uni-list-cell-pd">
<view class="cart-checkbox-c"><checkbox v-if="item.status != 30" :value="item.id" :checked="item.checked" color="#FF7159" /></view>
<view class="img-list-item">
<image class="img-list-item-l little-img have-none" :src="item.productPic" mode="aspectFill"></image>
<view class="img-list-item-r little-right">
<view class="little-right-t">
<view class="goods-name list-goods-name">{{ item.productName }}</view>
<view v-if="item.status == 30" class="list-goods-name red-price">已申请</view>
</view>
<view class="goods-item-c">
<view class="goods-buy">
<!-- 商品规格 -->
<view class="goods-salesvolume">{{ item.productPrice }} x{{ item.productQuantity }}</view>
</view>
</view>
</view>
</view>
</label>
</view>
</checkbox-group>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item">
<view class="cell-item-hd"><view class="cell-hd-title">服务类型</view></view>
<view class="cell-item-ft">
<view class="uni-form-item uni-column invoice-type">
<!-- <radio-group class="uni-list" @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in type_list" :key="index">
<view>
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
</view>
<view>
<label class="label-2-text" :for="item.name">
<text>{{item.value}}</text>
</label>
</view>
</label>
</radio-group> -->
<!-- #ifndef MP-ALIPAY -->
<radio-group class="uni-list" @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in type_list" :key="index">
<view class="invoice-type-icon">
<radio class="a-radio" :id="item.name" :value="item.value" :checked="item.checked" :disabled="item.disabled"></radio>
</view>
<view class="invoice-type-c">
<label class="label-2-text" :for="item.name">
<text>{{ item.name }}</text>
</label>
</view>
</label>
</radio-group>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<jhlable></jhlable>
<!-- #endif -->
</view>
</view>
</view>
<view class="cell-item">
<view class="cell-item-hd"><view class="cell-hd-title">退款金额</view></view>
<view class="cell-item-ft"><input class="cell-bd-input red-price" v-model="refund" :disabled="refund_input_noedit" /></view>
</view>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item right-img">
<view class="cell-item-hd"><view class="cell-hd-title">上传凭证</view></view>
</view>
<view class="">
<view class="evaluate-c-b">
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
<image class="del" src="/static/image/del.png" mode="" @click="delImage(item)"></image>
<image class="" :src="item" mode="" @click="clickImg(item)"></image>
</view>
<view class="upload-img" v-show="isImage" @click="upImage">
<image class="icon" src="/static/image/camera.png" mode=""></image>
<view class="">上传照片</view>
</view>
</view>
</view>
</view>
<view class="cell-group margin-cell-group">
<view class="cell-item right-img">
<view class="cell-item-hd"><view class="cell-hd-title">问题描述</view></view>
</view>
<view class="cell-textarea "><textarea v-model="reason" placeholder="请您在此描述问题(最多200字)" maxlength="200" /></view>
</view>
</view>
<view class="button-bottom"><button class="btn btn-b btn-square" formType="submit">提交</button></view>
</form>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import jhlable from '@/components/jihai-lable.vue';
export default {
data() {
return {
type_list: [
{ value: '0', name: '换货', checked: true, disabled: false },
// { value: '1', name: '仅退款', checked: true, disabled: false },
// { value: '2', name: '退货', checked: false, disabled:false },
{ value: '3', name: '退货退款', checked: false, disabled: false }
],
orderInfo: [],
order_id: '',
items: [], //退货明细
item_ids: [], //选择的退货
aftersale_type: 1, //售后类型1退款，2退款退货
refund: 0, //退款金额，等于已支付的金额减去已退款的金额
refund_show: 0,
images: [], //图片
reason: '', //原因
image_max: 5, //用于前台判断上传图片按钮是否显示
refund_input_noedit: false,
mode: 'aspectFill',
submitStatus: false,
receiverId:''
};
},
components: { jhlable },
computed: {
isImage() {
let num = this.image_max - this.images.length;
if (num > 0) {
return true;
} else {
return false;
}
}
},
methods: {
// 单选框点击切换
radioChange: function(evt) {
this.type_list.forEach(item => {
if (item.value === evt.target.value) {
item.checked = true;
this.aftersale_type = evt.target.value;
} else {
item.checked = false;
}
});
if (this.type_list[0].checked) {
this.refund_input_noedit = true;
} else {
this.refund_input_noedit = false;
}
},
//订单商品信息
async getOrderInfo() {
debugger;
let params = { id: this.order_id };
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
this.refund_show = this.orderInfo.payAmount;
this.receiverId = this.orderInfo.receiverId;
console.log(this.receiverId)
},
//退货商品选择
checkboxChange(e) {
let nums = 0;
this.item_ids = [];
for (var i = 0; i < e.detail.value.length; i++) {
let k = e.detail.value[i];
for (var j = 0; j < this.orderInfo.orderItemList.length; j++) {
if (this.orderInfo.orderItemList[j].id == k) {
this.item_ids = this.item_ids.concat(k);
}
}
}
},
//提交
async submit(e) {
this.submitStatus = true;
/* let images = [];
for(var i = 0; i<this.images.length; i++) {
images = images.concat(this.images[i].image_id);
} */
//判断退款金额
let reg = /^[0-9]+(.[0-9]{1,2})?$/;
if (!reg.test(this.refund)) {
this.$common.errorToShow('请输入正确金额');
this.submitStatus = false;
return false;
} else {
if (this.refund < 0) {
this.$common.errorToShow('退款金额不能小于0');
return false;
}
if (this.refund > this.refund_show) {
this.$common.errorToShow('退款金额过大');
this.submitStatus = false;
return false;
}
}
if (!this.item_ids || this.item_ids.length == 0) {
this.$common.errorToShow('请选择需要售后的商品');
return false;
}
//组装数据，提交数据
let data = {
orderId: this.order_id,
type: this.aftersale_type,
items: this.item_ids,
images: this.images,
returnAmount: this.refund,
desc: this.reason,
companyAddressId:this.receiverId
};
// #ifdef MP-WEIXIN
data['formId'] = e.detail.formId;
// #endif
let res = await Api.apiCall('post', Api.order.saveOmsOrderReturnApply, data);
if (res.code == 200) {
// this.$common.successToShow('提交成功', ress => {
// this.submitStatus = false;
// uni.navigateBack({
// delta: 1
// });
// });
uni.showToast({
title: "提交成功",
icon: "none"
});
} else {
this.$common.errorToShow(res.msg);
this.submitStatus = false;
uni.navigateBack({ delta: 1 });
}
},
//上传图片
upImage() {
let num = this.image_max - this.images.length;
if (num > 0) {
this.$otherApi.uploadFiles(res => {
//this.$otherApi.uploadImage(num, res => {
if (res.code == 200) {
this.images = this.images.concat(res.data);
this.$common.successToShow(res.msg);
} else {
this.$common.errorToShow(res.msg);
}
});
}
},
//删除图片
delImage(e) {
let newImages = [];
for (var i = 0; i < this.images.length; i++) {
if (this.images[i].image_id != e.image_id) {
newImages.push(this.images[i]);
}
}
this.images = newImages;
},
// 图片点击放大
clickImg(img) {
// 预览图片
uni.previewImage({
urls: img.split()
});
}
},
onLoad(e) {
this.order_id = e.order_id;
this.getOrderInfo();
}
};
</script>
<style lang="scss">
@import '../../static/css/style.css';
.list-goods-name {
width: 100% !important;
}
.cart-checkbox-item {
position: relative;
}
.invoice-type .uni-list-cell {
display: inline-block;
font-size: 26upx;
color: #333;
position: relative;
margin-left: 50upx;
}
.invoice-type .uni-list-cell > view {
display: inline-block;
}
.invoice-type-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.invoice-type-c {
margin-left: 50upx;
line-height: 2;
}
.cell-item-ft .cell-bd-input {
text-align: right;
width: 500upx;
font-size: 28upx;
}
.right-img {
border-bottom: 0;
}
.cell-textarea {
padding: 0 26upx 20upx;
}
.cell-textarea textarea {
width: 100%;
height: 200upx;
font-size: 26upx;
color: #333;
}
.evaluate-c-b {
overflow: hidden;
padding: 0 20upx;
}
.upload-img {
width: 146upx;
height: 146upx;
margin: 14upx;
text-align: center;
color: #999999;
font-size: 22upx;
border: 2upx solid #e1e1e1;
border-radius: 4upx;
display: inline-block;
float: left;
padding: 24upx 0;
}
.goods-img-item {
width: 174upx;
height: 174upx;
padding: 14upx;
float: left;
position: relative;
}
.goods-img-item:nth-child(4n) {
margin-right: 0;
}
.goods-img-item image {
width: 100%;
height: 100%;
}
.del {
width: 30upx !important;
height: 30upx !important;
position: absolute;
right: 0;
top: 0;
z-index: 999;
}
.cell-group {
background-color: #fff;
}
.margin-cell-group {
margin: 20upx 0;
}
/* #ifdef MP-ALIPAY */
/* #endif */
</style>

642
mallplusui-uniapp-app/pagesA/after_sale/list.vue Normal file
View File

@@ -0,0 +1,642 @@
<template>
<view class="content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<!-- 空白页 -->
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- 订单列表 -->
<view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item" >
<view class="i-top b-b">
<text class="time" @click="navToDetailPage(item)">{{ item.createTime }}</text>
<text class="state" :style="{ color: item.stateTipColor }" @click="navToDetailPage(item)">{{ item.id }}--</text>
<text class='state' v-if="item.status == 0">待审核</text>
<text class='state' v-else-if="item.status == 1">退货中</text>
<text class='state' v-else-if="item.status == 2">已完成</text>
<text class='state' v-else-if="item.status == 3">审核拒绝</text>
</view>
<scroll-view v-if="item.orderItemList.length > 1" class="goods-box" scroll-y >
<view v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex" class="goods-item">
<img class="goods-img" :src="goodsItem.productPic" @click="navToDetailPage(item)" mode="aspectFill"></img>
</view>
</scroll-view>
<view v-if="item.orderItemList.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.orderItemList" :key="goodsIndex">
<img class="goods-img" :src="goodsItem.productPic" mode="aspectFill"></img>
<view class="right" @click="navToDetailPage(item)">
<text class="title clamp">{{ goodsItem.productName }}</text>
<text class="attr-box">{{ goodsItem.productAttr }} x {{ goodsItem.productQuantity }}</text>
<text class="price">{{ goodsItem.productPrice }}</text>
</view>
</view>
<view class="price-box">
共
<text class="num">{{ item.orderItemList.length }}</text>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { mapState } from 'vuex';
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { formatDate } from '@/common/date';
export default {
components: {
mallplusCopyright,
uniLoadMore,
empty
},
data() {
return {
tabCurrentIndex: 0,
pageNum: 1,
orderList:[],
headerPosition: 'fixed',
headerTop: '0px',
loadingType: 'loading', //加载更多状态
navList: [
{
status: 0,
text: '全部',
loadingType: 'loading',
orderList: []
},
]
};
},
onLoad(options) {
/**
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
* 替换onLoad下代码即可
*/
this.tabCurrentIndex = 0;
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = 1;
this.loadData('refresh');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `detail?aftersales_id='+${id}`
});
},
//获取订单列表
async loadData(type = 'add', loading) {
//这里是将订单挂载到tab列表下
let index = this.tabCurrentIndex;
let navItem = this.navList[index];
let status = navItem.status;
let url;
if (!this.hasLogin) {
url = '/pages/public/login';
uni.navigateTo({
url
});
} else {
let params = { pageNum: this.pageNum };
let data = await Api.apiCall('get', Api.order.aftersaleslist, params);
let goodsList = data.records;
let orderList = goodsList.filter(item => {
//添加不同状态下订单的表现形式
item = Object.assign(item, this.orderStateExp(item.status));
item.createTime = this.dateFormat(item.createTime);
//演示数据所以自己进行状态筛选
if (status === 0) {
//0为全部订单
return item;
}
return item.status === status;
});
if (type === 'refresh') {
this.orderList = [];
}
this.orderList = this.orderList.concat(orderList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.orderList.length >= data.total ? 'nomore' : 'loading';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
this.pageNum = this.pageNum + 1;
navItem.orderList=[];
orderList.forEach(item => {
navItem.orderList.push(item);
});
}
},
//swiper 切换
changeTab(e) {
this.tabCurrentIndex = e.target.current;
//this.pageNum = 1;
this.loadData('refresh');
},
//顶部tab点击
tabClick(index) {
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = index;
},
//删除订单
async deleteOrder(index) {
uni.showLoading({
title: '请稍后'
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600);
},
async payOrder(item) {
let url = '/pages/order/payment/index?order_id=' + item.id + '&type=1' ;
this.$common.navigateTo(
url
)
},
//取消订单
async cancelOrder(item) {
let params = { orderId: item.id };
let data = await Api.apiCall('post', Api.order.closeOrder, params);
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
//订单确认收货
async confimDelivery(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.confimDelivery, params);
console.log(data);
if (data) {
this.$api.msg(data);
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 4;
}
},
// 申请售后
applyRefund(orderId) {
this.$common.navigateTo(
'../../pagesA/after_sale/index?order_id=' + orderId
)
},
//订单申请退款
async applyRefund1(item) {
let params = { id: item.id };
let data = await Api.apiCall('post', Api.order.applyRefund, params);
if (data) {
console.log(data);
this.$api.msg(data);
}
this.pageNum = 1;
this.loadData('refresh');
this.tabCurrentIndex = 5;
},
// 去评价
toEvaluate(orderId) {
this.$common.navigateTo(
'/pages/order/evaluate?order_id=' + orderId
)
},
//订单状态文字和颜色
orderStateExp(value) {
let stateTip = '',
stateTipColor = '#fa436a';
if (value === 12) {
stateTipColor = '#909399';
stateTip = '待付款';
}if (value === 1) {
stateTipColor = '#909399';
stateTip = '支付成功，没有回掉';
}if (value === 2) {
stateTip = '待发货';
} else if (value === 3) {
stateTip = '待收货';
} else if (value === 4) {
stateTip = '待评价';
} else if (value === 5) {
stateTip = '已完成';
} else if (value === 6) {
stateTipColor = '#909399';
stateTip = '维权中';
} else if (value === 7) {
stateTip = ' 维权已完成';
} else if (value === 8) {
stateTip = '待分享';
} else if (value === 13) {
stateTip = '申请退款';
} else if (value === 14) {
stateTip = '已退款';
} else if (value === 15) {
stateTip = '已关闭';
} else if (value === 16) {
stateTip = '无效订单';
} else {
stateTip = '待付款';
}
return { stateTip, stateTipColor };
},
dateFormat(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
.uni-swiper-item {
height: auto;
}
.order-item {
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin-top: 16upx;
.i-top {
display: flex;
align-items: center;
height: 80upx;
padding-right: 30upx;
font-size: $font-base;
color: $font-color-dark;
position: relative;
.time {
flex: 1;
}
.state {
color: $base-color;
}
.del-btn {
padding: 10upx 0 10upx 36upx;
font-size: $font-lg;
color: $font-color-light;
position: relative;
&:after {
content: '';
width: 0;
height: 30upx;
border-left: 1px solid $border-color-dark;
position: absolute;
left: 20upx;
top: 50%;
transform: translateY(-50%);
}
}
}
/* 多条商品 */
.goods-box {
height: 160upx;
padding: 20upx 0;
white-space: nowrap;
.goods-item {
width: 120upx;
height: 120upx;
display: inline-block;
margin-right: 24upx;
}
.goods-img {
display: block;
width: 100%;
height: 100%;
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 28upx;
color: #999;
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px;
}
.uni-load-more__img > view {
position: absolute;
}
.uni-load-more__img > view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: 0.2;
transform-origin: 50%;
animation: load 1.56s ease infinite;
}
.uni-load-more__img > view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0;
}
.uni-load-more__img > view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px;
}
.uni-load-more__img > view view:nth-child(4) {
top: 11px;
left: 0;
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px;
}
.load2 {
transform: rotate(30deg);
}
.load3 {
transform: rotate(60deg);
}
.load1 view:nth-child(1) {
animation-delay: 0s;
}
.load2 view:nth-child(1) {
animation-delay: 0.13s;
}
.load3 view:nth-child(1) {
animation-delay: 0.26s;
}
.load1 view:nth-child(2) {
animation-delay: 0.39s;
}
.load2 view:nth-child(2) {
animation-delay: 0.52s;
}
.load3 view:nth-child(2) {
animation-delay: 0.65s;
}
.load1 view:nth-child(3) {
animation-delay: 0.78s;
}
.load2 view:nth-child(3) {
animation-delay: 0.91s;
}
.load3 view:nth-child(3) {
animation-delay: 1.04s;
}
.load1 view:nth-child(4) {
animation-delay: 1.17s;
}
.load2 view:nth-child(4) {
animation-delay: 1.3s;
}
.load3 view:nth-child(4) {
animation-delay: 1.43s;
}
@-webkit-keyframes load {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
</style>

395
mallplusui-uniapp-app/pagesA/build/applyCommunity.vue Normal file
View File

@@ -0,0 +1,395 @@
<template>
<view class="content">
<view class="list-wraper logo-wraper" @click="uplodingImg(1)">
<view class="tit">
<text>点击上传商家logo</text>
</view>
<view class="input-logo" >
<image v-if="!logImg" src="http://mp.emshop.eonfox.com/zrhzstatic/muying/shop.png" mode=""></image>
<image v-else :src="logImg" mode=""></image>
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家名称：</text>
</view>
<view class="input-all">
<input class="inpt" type="text" value="" v-model="infor.name" placeholder="请输入商家名称" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家QQ：</text>
</view>
<view class="input-all">
<input class="inpt" type="text" value="" v-model="infor.contactQq" placeholder="请输入商家QQ" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家手机号：</text>
</view>
<view class="input-all">
<input class="inpt" type="number" maxlength="11" v-model="infor.supportPhone" value="" placeholder="请输入手机号" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家类别：</text>
</view>
<view class="input-all">
<radio-group>
<label class="radio" v-for="(item,index) in shopsType" :key='index'><radio value="r1" class="radio" @click="gain(item.type_id)"/>{{item.name}}</label>
</radio-group>
</view>
</view>
<view class="list-wraper" @click="showMulLinkageThreePicker">
<view class="tips_left">
<text>{{pickerText}}</text>
</view>
<view class="tips_right">
<image src="../../static/right-arrow.png" ></image>
</view>
</view>
<view class="tips" @click="goPage">
<view class="tips_left">
<text>{{addressName}}</text>
</view>
<view class="tips_right">
<image src="../../static/right-arrow.png" ></image>
</view>
</view>
<view class="h-20upx"></view>
<view class="list-wraper ind-wraper">
<view class="tit">
<text>商家介绍：</text>
</view>
<view class="input-lg">
<textarea class="lg-text" value="" v-model="infor.description" placeholder="请输入..." />
</view>
</view>
<view class="list-wraper logo-wraper" @click="uplodingImg(2)">
<view class="tit">
<text>点击上传营业执照：</text>
</view>
<view class="input-Image">
<image v-if="!BusinessImg" src="http://mp.emshop.eonfox.com/zrhzstatic/muying/yingyezhizhao.png" mode=""></image>
<image v-else :src="BusinessImg" mode=""></image>
</view>
</view>
<view class="btn-box">
<button class="btn" @click="commit()">提交申请</button>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
// #ifdef H5
let jweixin = require('jweixin-module');
// #endif
export default {
data() {
return {
cityPickerValueDefault: [0, 0, 1],
themeColor: '#007AFF',
pickerText: '选择省/市/区',
addressName:'请选择商家地址',
logImg:'',
infor:{},
BusinessImg:'' ,// 营业执照
BusinessImgId:'',
logImgID:'',
shopsType:[
{
id: 1,
name: "服装",
},
{
id: 2,
name: "化妆品",
},
{
id: 3,
name: "家装",
},
{
id: 4,
name: "水果",
},
]
}
},
onLoad(){
},
methods: {
goPage(){
var _this = this
uni.chooseLocation({
success: function (res) {
console.log('res',res)
console.log('位置名称：' + res.name);
_this.addressName=res.address +res.name
_this.infor.addressDetail = res.address +res.name
_this.infor.addressLat=res.latitude
_this.infor.addressLng=res.longitude
console.log('经度：' + res.longitude);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
}
});
},
gain(id){
this.infor.type_id=id
console.log('类别id',this.infor.type_id)
},
// 上传图片
uplodingImg (name) {
this.$otherApi.uploadFiles(res => {
if (res.code == 200) {
console.log(res.data)
if(name==1){
this.logImg = res.data
this.infor.logo=res.data
}else{
this.BusinessImg = res.data
this.infor.supportName=res.data
}
} else {
this.$common.errorToShow(res.msg)
}
})
},
uplodingImg1(name){
var _this=this
console.log(name)
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
console.log('chooseImage success, temp path is', res.tempFilePaths[0])
var imageSrc = res.tempFilePaths[0]
ef.left_token(function(left_token){
//encodeURIComponent encodeURI
var uploadUrl=ef.api_server_url+"?"+encodeURI('data=[["APPLICATIONIMAGEUPLOADQINIU"]]')+"&token="+left_token;
uni.uploadFile({
url: uploadUrl,
filePath: imageSrc,
fileType: 'image',
name: 'file',
success: (res) => {
console.log('上传成功:',res.data)
var imageJson=JSON.parse(res.data)
console.log(imageJson)
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 1000,
success() {
if(name==1){
_this.logImg = imageSrc
_this.infor.logo_image_id=imageJson.data[0].data.image_id
}else{
_this.BusinessImg = imageSrc
_this.infor.license_image_id=imageJson.data[0].data.image_id
}
}
})
},
fail: (err) => {
console.log('uploadImage fail', err);
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
});
});
},
fail: (err) => {
console.log('chooseImage fail', err)
}
})
},
async commit(){
var _this=this
let form = Object.assign({},_this.infor)
let data = await Api.apiCall('post', Api.member.applyStore, form);
console.log(data)
if (data) {
this.$api.msg(`商户入驻成功`);
setTimeout(() => {
let url = '../../pagesC/store/storeResult?id='+data.id;
uni.navigateTo({
url
});
}, 800);
} else {
this.$api.msg(`商户入驻失败`);
}
},
onConfirm(e) {
console.log(e);
var label=e.label;
this.pickerText = label;
var labelArr=label.split('-');
this.infor.addressProvince=labelArr[0];
this.infor.addressCity=labelArr[1];
this.infor.addressArea=labelArr[2];
},
openLocation(){
// #ifdef H5
jweixin.getLocation({
type: 'wgs84',
success: res => {
const latitude = res.latitude;
const longitude = res.longitude;
jweixin.openLocation({
latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
name: '位置名', // 位置名
scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl:"http://www.baidu.com"
})
},
fail: () => {},
complete: () => {}
});
// #endif
}
}
}
</script>
<style>
page{
background: #F5F5F5;
width: 100%;
height: 100%;
}
.h-20upx{
height: 20upx;
display: flex;
}
.tips{
display: flex;
/* width: calc(100% - 60upx); */
padding: 20upx;
background-color: #FFFFFF;
}
.tips_left{
width: 94%;
font-size: 28upx;
color: #de7d67;
}
.tips_right{
width: 5%;
}
.tips_right image{
width:40upx;
height: 40upx;
}
.btn{
background-color: rgba( 242 155 135);
color: #FFFFFF;
}
.input-logo{
width: 120upx;
height: 120upx;
line-height: 120upx;
text-align: center;
font-size: 27upx;
color: #444444;
}
.input-logo image{
width: 120upx;
height: 120upx;
}
.input-Image{
width: 420upx;
height: 320upx;
line-height: 320upx;
text-align: center;
font-size: 27upx;
border: 1upx #CCCCCC solid;
color: #444444;
}
.input-Image image{
width: 420upx;
height: 320upx;
}
.radio{
font-size: 28upx;
transform:scale(0.7)
}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
width 100%
display flex
flex-direction column
color #333333
.list-wraper
position relative
display flex
align-items center
// width calc(100% - 60upx)
padding 20upx
background #FFFFFF
.tit
flex 1.5
text
font-size 28upx
.input-all
flex 4
.inpt
// background red
padding-top 6upx
font-size 28upx
.logo-wraper
.input-all
text-align right
image
width 100upx
height 100upx
.list-wraper::after
position absolute
content ""
width calc(100% - 60upx)
height 2upx
left 30upx
bottom 0
background #CCCCCC
.ind-wraper
flex-direction column
justify-content left
.tit
width 100%
.input-lg
width 100%
padding 20upx 10upx
// background red
.lg-text
font-size 24upx
color #777777
.btn-box
width 690upx;
padding 40upx 30upx
</style>

397
mallplusui-uniapp-app/pagesA/build/bindCommunity.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<view class="content">
<view class="list-wraper logo-wraper" @click="uplodingImg(1)">
<view class="tit">
<text>点击上传商家logo</text>
</view>
<view class="input-logo" >
<image v-if="!logImg" src="http://mp.emshop.eonfox.com/zrhzstatic/muying/shop.png" mode=""></image>
<image v-else :src="logImg" mode=""></image>
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家名称：</text>
</view>
<view class="input-all">
<input class="inpt" type="text" value="" v-model="infor.name" placeholder="请输入商家名称" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家QQ：</text>
</view>
<view class="input-all">
<input class="inpt" type="text" value="" v-model="infor.contactQq" placeholder="请输入商家QQ" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家手机号：</text>
</view>
<view class="input-all">
<input class="inpt" type="number" maxlength="11" v-model="infor.supportPhone" value="" placeholder="请输入手机号" />
</view>
</view>
<view class="list-wraper">
<view class="tit">
<text>商家类别：</text>
</view>
<view class="input-all">
<radio-group>
<label class="radio" v-for="(item,index) in shopsType" :key='index'><radio value="r1" class="radio" @click="gain(item.type_id)"/>{{item.name}}</label>
</radio-group>
</view>
</view>
<view class="list-wraper" @click="showMulLinkageThreePicker">
<view class="tips_left">
<text>{{pickerText}}</text>
</view>
<view class="tips_right">
<image src="../../static/right-arrow.png" ></image>
</view>
</view>
<view class="tips" @click="goPage">
<view class="tips_left">
<text>{{addressName}}</text>
</view>
<view class="tips_right">
<image src="../../static/right-arrow.png" ></image>
</view>
</view>
<view class="h-20upx"></view>
<view class="list-wraper ind-wraper">
<view class="tit">
<text>商家介绍：</text>
</view>
<view class="input-lg">
<textarea class="lg-text" value="" v-model="infor.description" placeholder="请输入..." />
</view>
</view>
<view class="list-wraper logo-wraper" @click="uplodingImg(2)">
<view class="tit">
<text>点击上传营业执照：</text>
</view>
<view class="input-Image">
<image v-if="!BusinessImg" src="http://mp.emshop.eonfox.com/zrhzstatic/muying/yingyezhizhao.png" mode=""></image>
<image v-else :src="BusinessImg" mode=""></image>
</view>
</view>
<view class="btn-box">
<button class="btn" @click="commit()">提交申请</button>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
// #ifdef H5
let jweixin = require('jweixin-module');
// #endif
export default {
data() {
return {
cityPickerValueDefault: [0, 0, 1],
themeColor: '#007AFF',
pickerText: '选择省/市/区',
addressName:'请选择商家地址',
logImg:'',
infor:{},
BusinessImg:'' ,// 营业执照
BusinessImgId:'',
logImgID:'',
shopsType:[
{
id: 1,
name: "服装",
},
{
id: 2,
name: "化妆品",
},
{
id: 3,
name: "家装",
},
{
id: 4,
name: "水果",
},
]
}
},
onLoad(){
},
methods: {
goPage(){
var _this = this
uni.chooseLocation({
success: function (res) {
console.log('res',res)
console.log('位置名称：' + res.name);
_this.addressName=res.address +res.name
_this.infor.addressDetail = res.address +res.name
_this.infor.addressLat=res.latitude
_this.infor.addressLng=res.longitude
console.log('经度：' + res.longitude);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
}
});
},
gain(id){
this.infor.type_id=id
console.log('类别id',this.infor.type_id)
},
// 上传图片
uplodingImg (name) {
this.$otherApi.uploadFiles(res => {
if (res.code == 200) {
console.log(res.data)
if(name==1){
this.logImg = res.data
this.infor.logo=res.data
}else{
this.BusinessImg = res.data
this.infor.supportName=res.data
}
} else {
this.$common.errorToShow(res.msg)
}
})
},
uplodingImg1(name){
var _this=this
console.log(name)
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
console.log('chooseImage success, temp path is', res.tempFilePaths[0])
var imageSrc = res.tempFilePaths[0]
ef.left_token(function(left_token){
//encodeURIComponent encodeURI
var uploadUrl=ef.api_server_url+"?"+encodeURI('data=[["APPLICATIONIMAGEUPLOADQINIU"]]')+"&token="+left_token;
uni.uploadFile({
url: uploadUrl,
filePath: imageSrc,
fileType: 'image',
name: 'file',
success: (res) => {
console.log('上传成功:',res.data)
var imageJson=JSON.parse(res.data)
console.log(imageJson)
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 1000,
success() {
if(name==1){
_this.logImg = imageSrc
_this.infor.logo_image_id=imageJson.data[0].data.image_id
}else{
_this.BusinessImg = imageSrc
_this.infor.license_image_id=imageJson.data[0].data.image_id
}
}
})
},
fail: (err) => {
console.log('uploadImage fail', err);
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
});
});
},
fail: (err) => {
console.log('chooseImage fail', err)
}
})
},
async commit(){
var _this=this
let form = Object.assign({},_this.infor)
let data = await Api.apiCall('post', Api.member.applyStore, form);
console.log(data)
if (data) {
this.$api.msg(`商户入驻成功`);
setTimeout(() => {
let url = '../../pagesC/store/storeResult?id='+data.id;
uni.navigateTo({
url
});
}, 800);
} else {
this.$api.msg(`商户入驻失败`);
}
},
onConfirm(e) {
console.log(e);
var label=e.label;
this.pickerText = label;
var labelArr=label.split('-');
this.infor.addressProvince=labelArr[0];
this.infor.addressCity=labelArr[1];
this.infor.addressArea=labelArr[2];
},
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show()
},
openLocation(){
// #ifdef H5
jweixin.getLocation({
type: 'wgs84',
success: res => {
const latitude = res.latitude;
const longitude = res.longitude;
jweixin.openLocation({
latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
name: '位置名', // 位置名
scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl:"http://www.baidu.com"
})
},
fail: () => {},
complete: () => {}
});
// #endif
}
}
}
</script>
<style>
page{
background: #F5F5F5;
width: 100%;
height: 100%;
}
.h-20upx{
height: 20upx;
display: flex;
}
.tips{
display: flex;
/* width: calc(100% - 60upx); */
padding: 20upx;
background-color: #FFFFFF;
}
.tips_left{
width: 94%;
font-size: 28upx;
color: #de7d67;
}
.tips_right{
width: 5%;
}
.tips_right image{
width:40upx;
height: 40upx;
}
.btn{
background-color: rgba( 242 155 135);
color: #FFFFFF;
}
.input-logo{
width: 120upx;
height: 120upx;
line-height: 120upx;
text-align: center;
font-size: 27upx;
color: #444444;
}
.input-logo image{
width: 120upx;
height: 120upx;
}
.input-Image{
width: 420upx;
height: 320upx;
line-height: 320upx;
text-align: center;
font-size: 27upx;
border: 1upx #CCCCCC solid;
color: #444444;
}
.input-Image image{
width: 420upx;
height: 320upx;
}
.radio{
font-size: 28upx;
transform:scale(0.7)
}
</style>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content
width 100%
display flex
flex-direction column
color #333333
.list-wraper
position relative
display flex
align-items center
// width calc(100% - 60upx)
padding 20upx
background #FFFFFF
.tit
flex 1.5
text
font-size 28upx
.input-all
flex 4
.inpt
// background red
padding-top 6upx
font-size 28upx
.logo-wraper
.input-all
text-align right
image
width 100upx
height 100upx
.list-wraper::after
position absolute
content ""
width calc(100% - 60upx)
height 2upx
left 30upx
bottom 0
background #CCCCCC
.ind-wraper
flex-direction column
justify-content left
.tit
width 100%
.input-lg
width 100%
padding 20upx 10upx
// background red
.lg-text
font-size 24upx
color #777777
.btn-box
width 690upx;
padding 40upx 30upx
</style>

966
mallplusui-uniapp-app/pagesA/build/community.vue Normal file
View File

@@ -0,0 +1,966 @@
<template>
<view class="container">
<!-- 小程序头部兼容 -->
<!-- #ifdef MP -->
<view class="MP-search" @click="search()" style=""><input class="MP-search-input" type="text" disabled="true" placeholder="输入关键字搜索" /></view>
<!-- #endif -->
<!-- 头部轮播 -->
<!-- #ifdef MP -->
<view class="carousel-section" style="margin-top: 80upx;">
<!-- #endif -->
<!-- #ifndef MP -->
<view class="carousel-section">
<!-- #endif -->
<!-- 标题栏和状态栏占位符 -->
<view class="titleNview-placing"></view>
<!-- 背景色区域 -->
<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
<swiper class="carousel" circular @change="swiperChange">
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPageL(item.url)">
<image :src="item.pic" />
</swiper-item>
</swiper>
<!-- 自定义swiper指示器 -->
<view class="swiper-dots">
<text class="num">{{ swiperCurrent + 1 }}</text>
<text class="sign">/</text>
<text class="num">{{ swiperLength }}</text>
</view>
</view>
<!-- 分类 -->
<view class="cate-section">
<view class="cate-item" @click="navToTabPage('../../pagesA/build/notice')">
<image src="/static/temp/c3.png"></image>
<text>社区活动</text>
</view>
<view class="cate-item" @click="navToTabPage('../../pagesA/build/repairOrder/repairOrder')">
<image src="/static/temp/c5.png"></image>
<text>费用管理</text>
</view>
<view class="cate-item" @click="navToTabPage('../../pagesA/build/groupList')">
<image src="/static/temp/c6.png"></image>
<text>社区团购</text>
</view>
<view class="cate-item" @click="navToTabPage('/pages/index/secskill')">
<image src="/static/temp/c7.png"></image>
<text>社区服务</text>
</view>
<view class="cate-item" @click="navToTabPage('../../pagesA/product/paiMaiList')">
<image src="/static/temp/c8.png"></image>
<text>社区拍卖</text>
</view>
</view>
<view class="f-header m-t" @click="navToTabPage('../../pagesA/build/communityList?geohash='+geohash)">
<image src="/static/temp/nav1.png"></image>
<view class="tit-box">
<text class="tit">周边社区</text>
<text class="tit2">Guess You Like It</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="cate-section">
<view class="cate-item" @click="navToTabPageStore(item1.id)" v-for="(item1, index) in communityList" :key="index">
<image :src="item1.pic"></image>
<text>{{ item1.name }}</text>
</view>
</view>
<!-- 新品上市 -->
<view class="f-header m-t" @click="navToTabPage('../../pagesA/build/floorList')">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">房屋列表</text>
<text class="tit2">Guess You Like It</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="goods-list-vertical">
<view v-for="(item, index) in newProductList" :key="index" class="goods-item-vertical" @click="navToDetailPage(item)">
<view class="image-wrapper-vertical"><image :src="item.pic" mode="aspectFill"></image></view>
<view class="goods-list-right">
<view class="goods-right-top">
<text class="">{{ item.name }}</text>
</view>
<view class="goods-right-bottom">
<text class="price">楼房:{{ item.floorNum }}</text>
<text class="sale">电梯:{{ item.layerCount }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import coupon from '@/components/coolc-coupon/coolc-coupon';
import { formatDate } from '@/common/date';
import { mapState } from 'vuex';
import navBar from '@/components/zhouWei-navBar';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
coupon,
uniLoadMore,
navBar
},
data() {
return {
keyword: '',
pageNum: 1,
loadingType: 'more', //加载更多状态
titleNViewBackground: '',
swiperCurrent: 0,
communityId: 0,
swiperLength: 0,
carouselList: [],
hotProductList: [],
brandList: [], // 推荐品牌
homeFlashPromotion: [], // 当前秒杀场次
subjectList: [], //推荐专题
floorList: [],
geohash:'',
communityList: [],
communityList1: [],
groupHotGoodsList: [],
couponList: [],
newProductList: []
};
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.getNewProductList();
},
onPullDownRefresh() {
this.pageNum = this.pageNum + 1;
this.getNewProductList('refresh');
this.loadData();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 2000);
},
onShareAppMessage() {},
async onLoad(ops) {
if (ops.communityId && ops.communityId != undefined) {
this.communityId = ops.communityId;
} else {
this.communityId = 0;
}
this.getNewProductList('refresh');
this.loadData();
//this.nearCommunity();
},
methods: {
/**
*
* 加载首页数据
*/
async loadData() {
let params = { communityId: this.communityId };
let data = await Api.apiCall('get', Api.build.home, params);
if (data) {
this.carouselList = data.advertiseList || [];
this.swiperLength = this.carouselList.length;
this.titleNViewBackground = 'rgb(203, 87, 60)';
this.communityList = data.communityList || [];
this.community = data.community || [];
console.log(this.community)
console.log(this.community.latitude)
if(this.community.latitude){
this.geohash=this.community.latitude+','+ this.community.longitude;
}
}
//this.loadData2();
},
/**
* 获取轮播图
*/
async nearCommunity() {
if(this.community.latitude){
let params = params = { geohash: this.community.latitude+','+ this.community.longitude, pageSize: 10,distance:40 };
let data = await Api.apiCall('get', Api.build.nearCommunityList, params);
if (data) {
this.communityList = data || [];
}
}
},
/**
* 获取轮播图
*/
async getBanner() {
let params = {};
let data = await Api.apiCall('get', Api.index.bannerList, params);
if (data) {
this.carouselList = data || [];
}
},
/**
* 获取新品上市信息
*/
async getNewProductList(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params = { pageNum: this.pageNum, communityId: this.communityId };
let list = await Api.apiCall('get', Api.build.floorList, params);
let goodsList = list.records;
if (type === 'refresh') {
this.newProductList = [];
}
this.newProductList = this.newProductList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.newProductList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
/**
* 获取团购信息
*/
async getHotGoodsList() {
let params = {};
let groupHotGoodsList = await Api.apiCall('get', Api.goods.groupHotGoodsList, params);
this.groupHotGoodsList = groupHotGoodsList;
},
/**
* 获取秒杀列表信息
*/
async getFlashPromotion() {
let params = {};
let data = await Api.apiCall('get', Api.index.homeFlashPromotionList, params);
if (data) {
let homeFlashPromotion = data;
if (homeFlashPromotion.length > 0) {
this.homeFlashPromotion = homeFlashPromotion[0];
}
}
},
/**
* 获取分类精选列表信息
*/
async getCatList() {
let params = {};
let data = await Api.apiCall('get', Api.goods.newProductList, params);
if (data) {
let cat_list = data;
this.cat_list = cat_list || [];
}
},
dateFormat(time) {
if (time == null || time === '') {
return 'N/A';
}
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
},
//轮播图切换修改背景色
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
this.titleNViewBackground = this.carouselList[index].background;
},
navToTabPageStore(item) {
let id = item;
uni.navigateTo({
url: `../../pagesA/build/community?communityId=${id}`
});
},
navToTabPage(url) {
uni.navigateTo({
url: url
});
},
search() {
uni.navigateTo({
url: '/pages/search/search'
});
}
},
// 标题栏input搜索框点击
onNavigationBarSearchInputClicked: async function(e) {
uni.navigateTo({
url: '/pages/search/search'
});
},
//点击导航栏 buttons 时触发
onNavigationBarButtonTap(e) {
const index = e.index;
if (index === 0) {
this.$api.msg('点击了扫描');
} else if (index === 1) {
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
currentWebview.hideTitleNViewButtonRedDot({
index
});
// #endif
uni.navigateTo({
url: '../../pagesU/notice/notice'
});
}
}
};
</script>
<style lang="scss">
.MP-search {
background: #ffffff;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
z-index: 999;
}
.MP-search-input {
font-size: 28upx;
background: #f5f5f5;
height: 60upx;
width: 90%;
border-radius: 50upx;
text-align: center;
}
.mp-search-box {
position: absolute;
left: 0;
top: 30upx;
z-index: 9999;
width: 100%;
padding: 0 80upx;
.ser-input {
flex: 1;
height: 60upx;
line-height: 60upx;
text-align: center;
font-size: 28upx;
color: $font-color-base;
border-radius: 20px;
background: rgba(255, 255, 255, 0.6);
}
}
page {
.cate-section {
position: relative;
z-index: 5;
border-radius: 16upx 16upx 0 0;
margin-top: -20upx;
}
.carousel-section {
padding: 0;
.titleNview-placing {
padding-top: 0;
height: 0;
}
.carousel {
.carousel-item {
padding: 0;
}
}
.swiper-dots {
left: 45upx;
bottom: 40upx;
}
}
}
page {
background: #f5f5f5;
}
.m-t {
margin-top: 20upx;
}
/* 头部 轮播图 */
.carousel-section {
position: relative;
padding-top: 10px;
.titleNview-placing {
height: var(--status-bar-height);
padding-top: 44px;
box-sizing: content-box;
}
.titleNview-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 426upx;
transition: 0.4s;
}
}
.carousel {
width: 100%;
height: 350upx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28upx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: 10upx;
}
}
.swiper-dots {
display: flex;
position: absolute;
left: 60upx;
bottom: 15upx;
width: 72upx;
height: 36upx;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
background-size: 100% 100%;
.num {
width: 36upx;
height: 36upx;
border-radius: 50px;
font-size: 24upx;
color: #fff;
text-align: center;
line-height: 36upx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36upx;
font-size: 12upx;
color: #fff;
transform: translateX(-50%);
}
}
/* 分类 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 30upx 22upx;
background: #fff;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: $font-sm + 2upx;
color: $font-color-dark;
}
/* 原图标颜色太深,不想改图了,所以加了透明度 */
image {
width: 88upx;
height: 88upx;
margin-bottom: 14upx;
border-radius: 50%;
opacity: 0.7;
box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
}
}
.ad-1 {
width: 100%;
height: 210upx;
padding: 10upx 0;
background: #fff;
image {
width: 100%;
height: 100%;
}
}
/* 秒杀专区 */
.seckill-section {
padding: 0upx 20upx 20upx;
background: #fff;
.s-header {
display: flex;
align-items: center;
height: 90upx;
line-height: 1;
.s-img {
width: 140upx;
height: 30upx;
}
.tip {
font-size: $font-base;
color: $font-color-light;
// margin: 0 20upx 0 40upx;
}
.timer {
display: inline-block;
width: 40upx;
height: 36upx;
text-align: center;
line-height: 36upx;
margin-right: 14upx;
font-size: $font-sm + 2upx;
color: #fff;
border-radius: 2px;
background: rgba(0, 0, 0, 0.8);
}
.icon-you {
font-size: $font-lg;
color: $font-color-light;
flex: 1;
text-align: right;
}
}
.floor-list {
white-space: nowrap;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 150upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 150upx;
height: 150upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
}
.f-header {
display: flex;
align-items: center;
height: 140upx;
padding: 0upx 20upx;
background: #fff;
image {
flex-shrink: 0;
width: 80upx;
height: 80upx;
margin-right: 20upx;
}
.tit-box {
flex: 1;
display: flex;
flex-direction: column;
}
.tit {
font-size: $font-lg + 2upx;
color: #font-color-dark;
line-height: 1.3;
}
.tit2 {
font-size: $font-sm;
color: $font-color-light;
}
.icon-you {
font-size: $font-lg + 2upx;
color: $font-color-light;
}
}
/* 团购楼层 */
.group-section {
background: #fff;
.g-swiper {
height: 650upx;
padding-bottom: 20upx;
}
.g-swiper-item {
width: 100%;
padding: 0 20upx;
display: flex;
}
image {
width: 100%;
height: 460upx;
border-radius: 4px;
}
.g-item {
display: flex;
flex-direction: column;
overflow: hidden;
}
.left {
flex: 1.2;
// margin-right: 24upx;
.t-box {
padding-top: 20upx;
}
}
.right {
flex: 0.8;
flex-direction: column-reverse;
.t-box {
padding-bottom: 20upx;
}
}
.t-box {
height: 160upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1.6;
}
.price {
color: $uni-color-primary;
}
.m-price {
font-size: $font-sm + 2upx;
text-decoration: line-through;
color: $font-color-light;
margin-left: 8upx;
}
.pro-box {
display: flex;
align-items: center;
margin-top: 10upx;
font-size: $font-sm;
color: $font-base;
padding-right: 10upx;
}
.progress-box {
flex: 1;
border-radius: 10px;
overflow: hidden;
margin-right: 8upx;
}
}
/* 分类推荐楼层 */
.hot-floor {
width: 100%;
overflow: hidden;
margin-bottom: 20upx;
.floor-img-box {
width: 100%;
height: 320upx;
position: relative;
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);
}
}
.floor-img {
width: 100%;
height: 100%;
}
.floor-list {
white-space: nowrap;
padding: 20upx;
padding-right: 50upx;
border-radius: 6upx;
margin-top: -140upx;
margin-left: 30upx;
background: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
.scoll-wrapper {
display: flex;
align-items: flex-start;
}
.floor-item {
width: 180upx;
margin-right: 20upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
line-height: 1.8;
image {
width: 180upx;
height: 180upx;
border-radius: 6upx;
}
.price {
color: $uni-color-primary;
}
}
.more {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0;
width: 180upx;
height: 180upx;
border-radius: 6upx;
background: #f3f3f3;
font-size: $font-base;
color: $font-color-light;
text:first-child {
margin-bottom: 4upx;
}
}
}
/* 单条商品 */
.goods-box-single {
display: flex;
padding: 20upx 0;
.goods-img {
display: block;
width: 120upx;
height: 120upx;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title {
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box {
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price {
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box {
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num {
margin: 0 8upx;
color: $font-color-dark;
}
.price {
font-size: $font-lg;
color: $font-color-dark;
&:before {
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn {
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after {
border-radius: 100px;
}
&.recom {
background: #fff9f9;
color: $base-color;
&:after {
border-color: #f7bcc8;
}
}
}
/* 猜你喜欢 */
.guess-section {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.guess-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
}
.coupon_box {
width: 100%;
height: auto;
display: table;
padding: 6upx 26upx 26upx 26upx;
}
.other_type {
width: 100%;
height: 90upx;
padding-top: 50upx;
.text {
width: 100%;
border-top: 1px solid #eeeeee;
display: block;
text-align: center;
position: relative;
}
.text span {
width: 180upx;
height: 40upx;
line-height: 40upx;
color: #999999;
display: block;
background: #ffffff;
position: absolute;
left: 50%;
top: 50%;
margin-left: -90upx;
margin-top: -20upx;
font-size: $font-base;
}
}
}
.getPosition {
height: 100upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #fff;
}
.goods-list-vertical {
display: flex;
flex-wrap: wrap;
padding: 0upx 20upx;
background: #fff;
.goods-item-vertical {
display: flex;
flex-direction: row;
height: 280upx;
align-items: center;
justify-content: center;
border-bottom: 1upx solid #eeeeee;
.image-wrapper-vertical {
width: 240upx;
height: 240upx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10upx;
image {
width: 240upx;
height: 240upx;
}
}
.goods-list-right {
width: 470upx;
.goods-right-top {
height: 200upx;
text {
font-size: 32upx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.goods-right-bottom {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '';
font-size: 26upx;
}
}
.sale {
color: $font-color-light;
font-size: 28upx;
}
}
}
}
}
</style>

456
mallplusui-uniapp-app/pagesA/build/communityList.vue Normal file
View File

@@ -0,0 +1,456 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>楼房</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<!-- 列表显示 -->
<view class="goods-list-vertical" >
<view v-for="(item, index) in goodsList" :key="index" class="goods-item-vertical" @click="navToDetailPage(item)">
<view class="image-wrapper-vertical"><image :src="item.pic" mode="aspectFill"></image></view>
<view class="goods-list-right">
<view class="goods-right-top">
<text class="">{{ item.name }}</text>
</view>
<view class="goods-right-bottom">
<text class="price">均价:{{ item.price }}</text>
<text class="sale" v-if="geohash">距离: {{item.distance.toFixed(4)}}</text>
</view>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
geohash:'',
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
//this.loadCateList(options.fid, options.sid);
if(options.geohash){
this.geohash=options.geohash;
this.nearCommunity(options.geohash);
}else{
console.log(options.geohash)
this.loadData();
}
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = this.pageNum + 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
async nearCommunity(geohash) {
let params = params = { geohash: geohash, pageSize: 10,distance:240 };
let data = await Api.apiCall('get', Api.build.nearCommunityList, params);
if (data) {
this.goodsList = data || [];
}
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.build.communityList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.counts - b.counts;
}
return b.counts - a.counts;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
console.log(item.id);
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/build/community?communityId=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0 20upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '';
font-size: 26upx;
}
}
}
.goods-list-vertical {
display: flex;
flex-wrap: wrap;
padding: 0upx 20upx;
background: #fff;
.goods-item-vertical {
display: flex;
flex-direction: row;
height: 280upx;
align-items: center;
justify-content: center;
border-bottom: 1upx solid #eeeeee;
.image-wrapper-vertical {
width: 240upx;
height: 240upx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10upx;
image {
width: 240upx;
height: 240upx;
}
}
.goods-list-right {
width: 470upx;
.goods-right-top {
height: 200upx;
text {
font-size: 32upx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.goods-right-bottom {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '';
font-size: 26upx;
}
}
.sale {
color: $font-color-light;
font-size: 28upx;
}
}
}
}
}
</style>

381
mallplusui-uniapp-app/pagesA/build/floorList.vue Normal file
View File

@@ -0,0 +1,381 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box">
<text >楼层{{ item.layerCount }}</text>
<text></text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
communityId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.communityId = options.communityId;
//this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = this.pageNum + 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.communityId) {
params = { pageNum: this.pageNum, communityId: this.communityId };
if (this.keyword) {
params = { pageNum: this.pageNum, communityId: this.communityId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.build.floorList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
console.log(item.id);
this.pageNum = 1;
this.communityId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/groupActivityDetail?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0 20upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

404
mallplusui-uniapp-app/pagesA/build/groupList.vue Normal file
View File

@@ -0,0 +1,404 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text>已售 {{ item.sale }}</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = this.pageNum + 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeList, params);
//let list = await this.$api.json('cateList');
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.build.groupList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
let groupId = item.groupId;
uni.navigateTo({
url: `../../pagesA/product/groupProduct?id=${id}&&groupId=&{groupId}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

997
mallplusui-uniapp-app/pagesA/build/groupProduct.vue Normal file
View File

@@ -0,0 +1,997 @@
<template>
<view class="container">
<view class="carousel">
<swiper indicator-dots circular="true" duration="400">
<swiper-item class="swiper-item" v-for="(item, index) in small" :key="index">
<view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
</swiper-item>
</swiper>
</view>
<view class="introduce-section">
<text class="title">{{ goods.name }}</text>
<view class="price-box">
<text class="price-tip">¥</text>
<text class="price">{{ goods.price }}</text>
<text class="m-price">¥{{ goods.originalPrice }}</text>
</view>
<view class="bot-row">
<text>销量: {{ goods.sale }}</text>
<text>库存: {{ goods.stock }}</text>
<text>浏览量: {{ goods.hit }}</text>
</view>
</view>
<!-- 分享 -->
<view class="share-section" @click="share">
<view class="share-icon">
<text class="yticon icon-xingxing"></text>
返
</view>
<text class="tit">该商品分享可领49减10红包</text>
<text class="yticon icon-bangzhu1"></text>
<view class="share-btn">
立即分享
<text class="yticon icon-you"></text>
</view>
</view>
<view class="c-list">
<view class="c-row b-b" v-if="skuList && skuList.length > 0" @click="toggleSpec">
<text class="tit">购买类型</text>
<view class="con">
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="eva-section">
<view class="e-header" v-for="(item, index) in groupMemberList" :key="index">
<img v-for="(item1, index1) in item.list" :key="index1" :src="item1.pic" class="logo" alt="" />
<div class="time" v-if="item.list.length>0">倒计时：{{ item.djs }}</div>
<button type="primary" v-if="item.list.length>0 && item.status==1" class=" action-btn no-border add-cart-btn" @click="acceptGroup(item)">参与拼团</button>
<div class="time" v-if="item.list.length>0 && item.status==2">已成团</div>
</view>
</view>
<view class="c-row b-b" v-if="serviceList && serviceList.length > 0">
<text class="tit">服务</text>
<view class="bz-list con">
<text v-for="(item1, index1) in serviceList" :key="index1">{{ item1 }}</text>
</view>
</view>
</view>
<!-- 评价 -->
<view class="eva-section">
<view class="e-header">
<text class="tit">评价</text>
<text>({{ consultCount.all }})</text>
<text class="tit">好评</text>
<text>({{ consultCount.goods }})</text>
<text class="tit">一般</text>
<text>({{ consultCount.general }})</text>
<text class="tit">差评</text>
<text>({{ consultCount.bad }})</text>
<text class="tip" v-if="consultCount.persent != 200">好评率 {{ consultCount.persent }}%</text>
<text class="yticon icon-you"></text>
</view>
<view class="eva-box" v-for="(item, index) in consultList" :key="item.id">
<image :src="item.pic" class="portrait" mode="aspectFill"></image>
<view class="right">
<text class="name">{{ item.memberName }}</text>
<text class="con">{{ item.consultContent }}</text>
<view class="bot">
<text class="attr">购买类型：{{ item.attr }}</text>
<text class="time">{{ item.consultAddtime | formatCreateTime}}</text>
</view>
</view>
</view>
</view>
<view class="detail-desc">
<view class="d-header"><text>图文详情</text></view>
<rich-text :nodes="desc"></rich-text>
</view>
<!-- 底部操作菜单 -->
<view class="page-bottom">
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
<text class="yticon icon-xiatubiao--copy"></text>
<text>首页</text>
</navigator>
<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite(goods)">
<text class="yticon icon-shoucang"></text>
<text>收藏</text>
</view>
<view class="action-btn-group"><button type="primary" class=" action-btn no-border add-cart-btn" @click="addGroup(goods)">发起拼单</button></view>
</view>
<!-- 规格-模态层弹窗 -->
<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
<!-- 遮罩层 -->
<view class="mask"></view>
<view class="layer attr-content" @click.stop="stopPrevent">
<view class="a-t">
<image :src="sku.pic"></image>
<view class="right">
<text class="price">¥{{ sku.price }}</text>
<text class="stock">库存：{{ sku.stock }}件</text>
<view class="selected">
已选：
<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text>
</view>
</view>
</view>
<view v-for="(item, index) in specList" :key="index" class="attr-list">
<text>{{ item.name }}</text>
<view class="item-list">
<text
v-for="(childItem, childIndex) in specChildList"
v-if="childItem.pid === item.id"
:key="childIndex"
class="tit"
:class="{ selected: childItem.selected }"
@click="selectSpec(childIndex, childItem.pid)"
>
{{ childItem.name }}
</text>
</view>
</view>
<button class="btn" @click="toggleSpec">完成</button>
</view>
</view>
<!-- 分享 -->
<share ref="share" :contentHeight="580" :shareList="shareList"></share>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import share from '@/components/share';
import { mapState } from 'vuex';
export default {
components: {
share
},
data() {
return {
specClass: 'none',
specSelected: [],
small: null,
sku: [],
detailData: [],
serviceList:[],
goods: [],
group: [],
favorite: true,
shareList: [],
groupMemberList: [],
consultList: [],
consultCount: {
all: 0,
bad: 0,
general: 0,
goods: 0
},
imgList: [
{
src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
},
{
src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
},
{
src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
}
],
ssss: [
{ title: '小心愿，大梦想', pic: '../../static/vip-card-bg.png', count: '34', time: '1625293470350' },
{ title: '杭州国际时', pic: '../../static/vip-card-bg.png', count: '36', time: '1725293470350' },
{ title: '怪兽bobo全', pic: '../../static/vip-card-bg.png', count: '74', time: '154429253270350' },
{ title: '汉风唐韵 、别', pic: '../../static/vip-card-bg.png', count: '266', time: '15255753270350' },
{ title: '听说同台“PK”？', pic: '../../static/vip-card-bg.png', count: '97', time: '15252553270450' }
],
desc: `
`,
skuList: [],
specList: [],
specChildList: [],
active: 'tab-container1',
pinkFont: true,
// 上拉刷新、下拉加载
allLoaded: false, //如果为true,禁止上拉刷新
autoFill: false, //取消自动填充，
list: []
};
},
async onLoad(ops) {
//接收传值,id里面放的是标题，因为测试数据并没写id
let id = ops.id;
if (id) {
this.logining = true;
let params = { id: ops.id, groupId: ops.groupId };
let data = await Api.apiCall('get', Api.goods.groupGoodsDetail, params);
this.logining = false;
if (data) {
let detailData = data.goods;
let goods = detailData.goods;
this.goods = goods;
this.group = data.group;
this.favorite = data.favorite;
/*setInterval(() => {
data.memberGroupList.map((obj, index) => {
this.$set(obj, 'djs', this.InitTime(obj.endTime));
});
}, 500);*/
this.groupMemberList = data.memberGroupList;
this.typeGoodsList = detailData.typeGoodsList;
var subImages = goods.albumPics;
this.desc = goods.detailHtml;
this.small = subImages.split(',');
var sers = goods.serviceIds;
if (sers && sers.indexOf("1") != -1){
this.serviceList.push('无忧退货');
}
if (sers && sers.indexOf("2") != -1){
this.serviceList.push('快速退款');
}
if (sers && sers.indexOf("3") != -1){
this.serviceList.push('正品保证');
}
//await this.$api.json('detailData');
let shareList = await this.$api.json('shareList');
this.loaded = true;
this.detailData = detailData;
this.shareList = shareList;
this.specList = detailData.productAttributeValueList;
this.skuList = detailData.skuStockList;
if (this.specList) {
this.specList.forEach(item => {
let valuesA = item.value.split(',');
if (valuesA) {
for (let cItem of valuesA) {
let att = {};
att.pid = item.id;
att.name = cItem;
this.specChildList.push(att);
}
}
});
}
uni.setNavigationBarTitle({
title: goods.name
});
}
if (this.hasLogin) {
let params = { goodsId: ops.id };
await Api.apiCall('post', Api.goods.addView, params);
}
let params1 = { goodsId: ops.id };
let consoltL = await Api.apiCall('get', Api.goods.consultList, params1);
this.consultList = consoltL.list;
this.consultCount = consoltL.count;
}
if (this.specList) {
//规格 默认选中第一条
var specs = '';
this.specList.forEach(item => {
for (let cItem of this.specChildList) {
if (cItem.pid === item.id) {
this.$set(cItem, 'selected', true);
this.specSelected.push(cItem);
specs = cItem.name + ',' + specs;
break; //forEach不能使用break
}
}
});
let valuesA = specs.substr(0, specs.length - 1).split(',');
this.skuList.forEach(item => {
if (valuesA.length == 1 && item.sp1 == valuesA[0]) {
this.sku = item;
}
if (valuesA.length == 2 && item.sp2 == valuesA[0] && item.sp1 == valuesA[1]) {
this.sku = item;
}
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == valuesA[2]) {
this.sku = item;
}
if (!this.sku.pic) {
this.sku.pic = this.goods.pic;
}
if (!this.sku.stock) {
this.sku.stock = 0;
}
if (!this.sku.price) {
this.sku.price = this.goods.price;
}
});
}
this.shareList = await this.$api.json('shareList');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
methods: {
toTimeStamp(strtime) {
var strtime = index;
var date = new Date(strtime);
var time = Date.parse(date) / 1000;
return time;
},
InitTime(endtime) {
var dd,
hh,
mm,
ss = null;
var time = parseInt(endtime) - new Date().getTime();
if (time <= 0) {
return '结束';
} else {
dd = Math.floor(time / 60 / 60 / 24);
hh = Math.floor((time / 60 / 60) % 24);
mm = Math.floor((time / 60) % 60);
ss = Math.floor(time % 60);
var str = dd + '天' + hh + '小时' + mm + '分' + ss + '秒';
return str;
}
},
//规格弹窗开关
toggleSpec() {
if (this.specClass === 'show') {
this.specClass = 'hide';
setTimeout(() => {
this.specClass = 'none';
}, 250);
} else if (this.specClass === 'none') {
this.specClass = 'show';
}
},
//选择规格
selectSpec(index, pid) {
let list = this.specChildList;
list.forEach(item => {
if (item.pid === pid) {
this.$set(item, 'selected', false);
}
});
this.$set(list[index], 'selected', true);
//存储已选择
/**
* 修复选择规格存储错误
* 将这几行代码替换即可
* 选择的规格存放在specSelected中
*/
var specs = '';
this.specSelected = [];
list.forEach(item => {
if (item.selected === true) {
this.specSelected.push(item);
specs = item.name + ',' + specs;
}
});
let valuesA = specs.substr(0, specs.length - 1).split(',');
this.skuList.forEach(item => {
if (valuesA.length == 1 && item.sp1 == valuesA[0]) {
this.sku = item;
}
if (valuesA.length == 2 && item.sp2 == valuesA[0] && item.sp1 == valuesA[1]) {
this.sku = item;
}
if (valuesA.length == 3 && item.sp3 == valuesA[0] && item.sp2 == valuesA[1] && item.sp1 == valuesA[2]) {
this.sku = item;
}
if (!this.sku.pic) {
this.sku.pic = this.goods.pic;
}
if (!this.sku.stock) {
this.sku.stock = 0;
}
if (!this.sku.price) {
this.sku.price = this.goods.price;
}
});
},
//分享
share() {
this.$refs.share.toggleMask();
},
//收藏
toFavorite(item) {
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
} else {
this.favorite = !this.favorite;
let params = { objId: item.id, type: 1, name: item.name, meno1: item.pic, meno2: item.price, meno3: item.sale };
Api.apiCall('post', Api.goods.favoriteSave, params);
}
},
async addGroup(item) {
// 发起拼团
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
}
let data;
let id = item.id;
if (this.sku && this.sku.id) {
if(this.sku.stock<1){
uni.showToast({title:"库存不够！"});
return;
}
uni.navigateTo({
url: `/pages/order/createOrder?groupId=${this.group.id}&&id=${item.id}&&groupType=1&&type=1&&skuId=${this.sku.id}`
});
} else {
if(this.goods.stock<1){
uni.showToast({title:"库存不够！"});
return;
}
uni.navigateTo({
url: `/pages/order/createOrder?groupId=${this.group.id}&&id=${item.id}&&groupType=1&&type=1`
});
}
},
async acceptGroup(item) {
console.log(item)
console.log(this.goods)
// 参与拼团
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
}
if (this.sku && this.sku.id) {
if(this.sku.stock<1){
uni.showToast({title:"库存不够！"});
return;
}
uni.navigateTo({
url: `/pages/order/createOrder?groupId=${item.groupId}&&mgid=${item.id}&&id=${this.goods.id}&&groupType=2&&type=1&&skuId=${this.sku.id}'
}`
});
} else {
if(this.goods.stock<1){
uni.showToast({title:"库存不够！"});
return;
}
uni.navigateTo({
url: `/pages/order/createOrder?groupId=${item.groupId}&&mgid=${item.id}&&id=${this.goods.id}&&groupType=2&&type=1`
});
}
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 160upx;
}
.icon-you {
font-size: $font-base + 2upx;
color: #888;
}
.carousel {
height: 722upx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20upx 30upx;
.title {
font-size: 32upx;
color: $font-color-dark;
height: 50upx;
line-height: 50upx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64upx;
padding: 10upx 0;
font-size: 26upx;
color: $uni-color-primary;
}
.price {
font-size: $font-lg + 2upx;
}
.m-price {
margin: 0 12upx;
color: $font-color-light;
text-decoration: line-through;
}
.coupon-tip {
align-items: center;
padding: 4upx 10upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6upx;
line-height: 1;
transform: translateY(-4upx);
}
.bot-row {
display: flex;
align-items: center;
height: 50upx;
font-size: $font-sm;
color: $font-color-light;
text {
flex: 1;
}
}
}
/* 分享 */
.share-section {
display: flex;
align-items: center;
color: $font-color-base;
background: linear-gradient(left, #fdf5f6, #fbebf6);
padding: 12upx 30upx;
.share-icon {
display: flex;
align-items: center;
width: 70upx;
height: 30upx;
line-height: 1;
border: 1px solid $uni-color-primary;
border-radius: 4upx;
position: relative;
overflow: hidden;
font-size: 22upx;
color: $uni-color-primary;
&:after {
content: '';
width: 50upx;
height: 50upx;
border-radius: 50%;
left: -20upx;
top: -12upx;
position: absolute;
background: $uni-color-primary;
}
}
.icon-xingxing {
position: relative;
z-index: 1;
font-size: 24upx;
margin-left: 2upx;
margin-right: 10upx;
color: #fff;
line-height: 1;
}
.tit {
font-size: $font-base;
margin-left: 10upx;
}
.icon-bangzhu1 {
padding: 10upx;
font-size: 30upx;
line-height: 1;
}
.share-btn {
flex: 1;
text-align: right;
font-size: $font-sm;
color: $uni-color-primary;
}
.icon-you {
font-size: $font-sm;
margin-left: 4upx;
color: $uni-color-primary;
}
}
.c-list {
font-size: $font-sm + 2upx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20upx 30upx;
position: relative;
}
.tit {
width: 140upx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10upx;
}
}
.bz-list {
height: 40upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
text {
display: inline-block;
margin-right: 30upx;
}
}
.con-list {
flex: 1;
display: flex;
flex-direction: column;
color: $font-color-dark;
line-height: 40upx;
}
.red {
color: $uni-color-primary;
}
}
/* 评价 */
.eva-section {
display: flex;
flex-direction: column;
padding: 20upx 30upx;
background: #fff;
margin-top: 16upx;
.e-header {
display: flex;
align-items: center;
height: 70upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.tit {
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 4upx;
}
.tip {
flex: 1;
text-align: right;
}
.icon-you {
margin-left: 10upx;
}
}
.logo {
display: block;
width: 50upx;
height: 50upx;
border-radius: 100px;
}
}
.eva-box {
display: flex;
padding: 20upx 0;
.portrait {
flex-shrink: 0;
width: 80upx;
height: 80upx;
border-radius: 100px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-base;
color: $font-color-base;
padding-left: 26upx;
.con {
font-size: $font-base;
color: $font-color-dark;
padding: 20upx 0;
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
}
}
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16upx;
.d-header {
display: flex;
justify-content: center;
align-items: center;
height: 80upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
position: relative;
text {
padding: 0 20upx;
background: #fff;
position: relative;
z-index: 1;
}
&:after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 300upx;
height: 0;
content: '';
border-bottom: 1px solid #ccc;
}
}
}
/* 规格选择弹窗 */
.attr-content {
padding: 10upx 30upx;
.a-t {
display: flex;
image {
width: 170upx;
height: 170upx;
flex-shrink: 0;
margin-top: -40upx;
border-radius: 8upx;
}
.right {
display: flex;
flex-direction: column;
padding-left: 24upx;
font-size: $font-sm + 2upx;
color: $font-color-base;
line-height: 42upx;
.price {
font-size: $font-lg;
color: $uni-color-primary;
margin-bottom: 10upx;
}
.selected-text {
margin-right: 10upx;
}
}
}
.attr-list {
display: flex;
flex-direction: column;
font-size: $font-base + 2upx;
color: $font-color-base;
padding-top: 30upx;
padding-left: 10upx;
}
.item-list {
padding: 20upx 0 0;
display: flex;
flex-wrap: wrap;
text {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
margin-right: 20upx;
margin-bottom: 20upx;
border-radius: 100upx;
min-width: 60upx;
height: 60upx;
padding: 0 20upx;
font-size: $font-base;
color: $font-color-dark;
}
.selected {
background: #fbebee;
color: $uni-color-primary;
}
}
}
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
min-height: 40vh;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.btn {
height: 66upx;
line-height: 66upx;
border-radius: 100upx;
background: $uni-color-primary;
font-size: $font-base + 2upx;
color: #fff;
margin: 30upx auto 20upx;
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
/* 底部操作菜单 */
.page-bottom {
position: fixed;
left: 30upx;
bottom: 30upx;
z-index: 95;
display: flex;
justify-content: center;
align-items: center;
width: 690upx;
height: 100upx;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
border-radius: 16upx;
.p-b-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-sm;
color: $font-color-base;
width: 96upx;
height: 80upx;
.yticon {
font-size: 40upx;
line-height: 48upx;
color: $font-color-light;
}
&.active,
&.active .yticon {
color: $uni-color-primary;
}
.icon-fenxiang2 {
font-size: 42upx;
transform: translateY(-2upx);
}
.icon-shoucang {
font-size: 46upx;
}
}
.action-btn-group {
display: flex;
height: 76upx;
border-radius: 100px;
overflow: hidden;
box-shadow: 0 20upx 40upx -16upx #fa436a;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
margin-left: 20upx;
position: relative;
&:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
height: 28upx;
width: 0;
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 180upx;
height: 100%;
font-size: $font-base;
padding: 0;
border-radius: 0;
background: transparent;
}
}
}
</style>

191
mallplusui-uniapp-app/pagesA/build/notice.vue Normal file
View File

@@ -0,0 +1,191 @@
<template>
<view>
<view class="notice-item" v-for="(item, index) in goodsList" :key="index">
<text class="time">{{ item.createTime }}</text>
<view class="content" @click="navToDetailPage(item)">
<text class="title">{{ item.title }}</text>
<view class="img-wrapper"><image :src="item.pic" mode="aspectFill" class="pic"></image></view>
<text class="introduce">{{ item.content }}</text>
<view class="bot b-t" @click="navToDetailPage(item)">
<text>查看详情</text>
<text class="more-icon yticon icon-you"></text>
</view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
export default {
data() {
return {
pageNum: 1,
goodsList: []
};
},
onLoad() {
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = this.pageNum + 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.build.getBuildNoticeByPage, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesU/notice/subjectDetail?id=${id}`
});
}
}
};
</script>
<style lang="scss">
page {
background-color: #f7f7f7;
padding-bottom: 30upx;
}
.notice-item {
display: flex;
flex-direction: column;
align-items: center;
}
.time {
display: flex;
align-items: center;
justify-content: center;
height: 80upx;
padding-top: 10upx;
font-size: 26upx;
color: #7d7d7d;
}
.content {
width: 710upx;
padding: 0 24upx;
background-color: #fff;
border-radius: 4upx;
}
.title {
display: flex;
align-items: center;
height: 90upx;
font-size: 32upx;
color: #303133;
}
.img-wrapper {
width: 100%;
height: 260upx;
position: relative;
}
.pic {
display: block;
width: 100%;
height: 100%;
border-radius: 6upx;
}
.cover {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
font-size: 36upx;
color: #fff;
}
.introduce {
display: inline-block;
padding: 16upx 0;
font-size: 28upx;
color: #606266;
line-height: 38upx;
}
.bot {
display: flex;
align-items: center;
justify-content: space-between;
height: 80upx;
font-size: 24upx;
color: #707070;
position: relative;
}
.more-icon {
font-size: 32upx;
}
</style>

389
mallplusui-uniapp-app/pagesA/build/repairOrder/repairOrder.vue Normal file
View File

@@ -0,0 +1,389 @@
<template>
<view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="state=='10002'?'text-green cur':''" @tap="_tabSelect('10002')">
发起报修
</view>
<view class="cu-item flex-sub" :class="state=='10001'?'text-green cur':''" @tap="_tabSelect('10001')">
报修历史
</view>
</view>
</scroll-view>
<view class="margin-top" v-if="state=='10001'">
<view class="cu-list menu-avatar">
<view class="cu-item arrow" v-for="(item,index) in myOrders" :key="index" @tap="_toAuditComplaintOrder(item)">
<view class="cu-avatar round lg" :style="'background-image:url('+orderImg+');'">
</view>
<view class="content">
<view class="text-grey">{{item.complaintId}}</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
{{item.complaintName}}
</view> </view>
</view>
<view class="action">
<view class="text-grey text-xs">{{item.createTime}}</view>
</view>
</view>
</view>
</view>
<view class="margin-top" v-if="state=='10002'">
<view class="padding ">
<text>房屋信息</text>
</view>
<view class="cu-list menu ">
<view class="cu-item arrow" @tap="_selectFloor()">
<view class="content">
<text class="text-grey">楼栋</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{floorNum != ''?floorNum+'号楼':'请选择'}}</text>
</view>
</view>
<view class="cu-item arrow" @tap="_selectUnit()">
<view class="content">
<text class="text-grey">单元</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{unitNum != ''?unitNum+'单元':'请选择'}}</text>
</view>
</view>
<view class="cu-item arrow" @tap="_selectRoom()">
<view class="content">
<text class="text-grey">房屋</text>
</view>
<view class="action">
<text class="text-grey text-sm">{{roomNum != ''?roomNum+'室':'请选择'}}</text>
</view>
</view>
</view>
<view class="padding margin-top">
<text>报修信息</text>
</view>
<form>
<view class="cu-form-group">
<view class="title">报修类型</view>
<picker @change="_changeResult" :value="typeCdIndex" :range="typeCds">
<view class="picker">
{{typeCdIndex>-1?typeCds[typeCdIndex]:'请选择'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">报修人</view>
<input placeholder="请输入投诉人" v-model="repairName" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="输入手机号码" v-model="tel" name="input"></input>
<view class="cu-capsule radius">
<view class='cu-tag bg-blue '>
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="cu-form-group arrow">
<view class="title">预约日期</view>
<picker mode="date" :value="bindDate" start="2015-09-01" end="2020-09-01" @change="dateChange">
<view class="picker">
{{bindDate}}
</view>
</picker>
</view>
<view class="cu-form-group arrow">
<view class="title">预约时间</view>
<picker mode="time" :value="bindTime" start="09:01" end="21:01" @change="timeChange">
<view class="picker">
{{bindTime}}
</view>
</picker>
</view>
<view class="cu-form-group">
<textarea maxlength="-1" v-model="context" placeholder="请输入投诉内容"></textarea>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="_delImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="_chooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
<view class="padding flex flex-direction">
<button class="cu-btn bg-green margin-tb-sm lg" @tap="_submitRepair()">提交</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
state:'10002',
orderImg:this.java110Constant.url.baseUrl + 'img/order.png',
myOrders:[],
imgList: [],
photos:[],
floorId: '',
floorNum: '',
unitId: '',
unitNum: '',
roomId: '',
roomNum: '',
typeCd: '',
typeCds: ['卧室报修', '管道报修','客厅报修'],
typeCdIndex: -1,
context:'',
repairName:'',
tel:'',
minDate: new Date().getTime(),
bindDate: '请选择',
bindTime: '请选择',
}
},
onShow() {
//this._loadMyOrders();
},
methods: {
_tabSelect: function(_state) {
this.state = _state;
if(_state == '10002'){
//this._loadOrder();
}else{
this._loadMyOrders();
}
},
_loadMyOrders:function(){
let _that = this;
let _userInfo = this.java110Context.getUserInfo();
let storeId = _userInfo.storeId;
let _objData = {
page: 1,
row: 15,
storeId: storeId,
userId: _userInfo.userId,
communityId:_that.java110Context.getCurrentCommunity().communityId
};
this.java110Context.request({
url: _that.java110Constant.url.listComplaints,
header: _that.java110Context.getHeaders(),
method: "GET",
data: _objData, //动态数据
success: function(res) {
console.log("请求返回信息：", res);
if (res.statusCode != 200) {
uni.showToast({
icon:'none',
title:res.data
});
return;
}
let _data = res.data;
_that.myOrders = _data.complaints;
_data.complaints.forEach(function(item){
let dateStr = item.createTime;
console.log(dateStr);
let _date=new Date(dateStr);
item.createTime = (_date.getMonth()+1) +'-'+_date.getDate();
});
},
fail: function(e) {
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
});
}
});
},
ChooseImage: function(e) {
let that = this;
wx.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
console.log(res);
if (that.$data.photoList.length) {
that.$data.photoList.push(res.tempFilePaths[0]);
} else {
that.$data.photoList = res.tempFilePaths;
}
}
});
},
removePhoto: function(e) {
console.log(e);
let imageArr = this.$data.photoList;
imageArr.splice(e, 1);
},
_selectFloor: function() {
uni.navigateTo({
url: '/pages/floorList/floorList?communityId=' + this.java110Context.getCurrentCommunity().communityId
});
},
_selectUnit: function() {
if (this.floorId == '') {
uni.showToast({
icon: 'none',
title: '请先选择楼栋'
});
return;
}
uni.navigateTo({
url: '/pages/unitList/unitList?communityId=' + this.java110Context.getCurrentCommunity().communityId +
"&floorId=" + this.floorId + "&floorNum=" + this.floorNum
});
},
_selectRoom: function() {
if (this.floorId == '') {
uni.showToast({
icon: 'none',
title: '请先选择楼栋'
});
return;
}
if (this.unitId == '') {
uni.showToast({
icon: 'none',
title: '请先选择单元'
});
return;
}
uni.navigateTo({
url: '/pages/roomList/roomList?communityId=' + this.java110Context.getCurrentCommunity().communityId +
"&floorId=" + this.floorId + "&floorNum=" + this.floorNum + "&unitId=" + this.unitId + "&unitNum=" + this.unitNum
});
},
_changeResult: function(e) {
this.typeCdIndex = e.detail.value;
console.log(e, this.typeCdIndex);
},
repairChange: function(e) {
this.typeName = this.columns[e.detail.value];
this.typeId = this.repairIdAttr[e.detail.value];
},
dateChange:function(e){
this.bindDate = e.detail.value;
},
timeChange:function(e){
this.bindTime = e.detail.value;
},
_submitRepair: function(e) {
let _that = this;
let _userInfo = this.java110Context.getUserInfo();
let storeId = _userInfo.storeId;
let obj = {
"repairName": this.repairName,
"repairType": this.typeCd,
"appointmentTime": this.bindDate + " " + this.bindTime + ":00",
"tel": this.tel,
"roomId": this.roomId,
"photos": [],
"context": this.context,
"userId": _userInfo.userId,
"communityId": this.communityId,
"bindDate": this.bindDate,
"bindTime": this.bindTime
}
let _photos = this.photos;
_photos.forEach(function(_item) {
obj.photos.push({
"photo": _item
});
});
let msg = "";
if (obj.roomId == "") {
msg = "请选择房屋";
} else if (obj.repairType == "") {
msg = "请选择报修类型";
} else if (obj.repairName == "") {
msg = "请填写报修人";
} else if (obj.tel == "") {
msg = "请填写手机号";
} else if (obj.bindDate == "") {
msg = "请选择预约日期";
} else if (obj.bindTime == "") {
msg = "请选择预约时间";
} else if (obj.context == "") {
msg = "请填写投诉内容";
}
console.log(obj.roomId);
if (msg != "") {
wx.showToast({
title: msg,
icon: 'none',
duration: 2000
});
} else {
context.request({
url: constant.url.saveOwnerRepair, // http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair
header: context.getHeaders(),
method: "POST",
data: obj, //动态数据
success: function(res) {
if (res.statusCode == 200) {
_that._tabSelect('10001');
return;
}
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
})
},
fail: function(e) {
wx.showToast({
title: "服务器异常了",
icon: 'none',
duration: 2000
})
}
});
}
}
}
}
</script>
<style>
</style>

352
mallplusui-uniapp-app/pagesA/product/categoryAttr.vue Normal file
View File

@@ -0,0 +1,352 @@
<template>
<view class="content" style="display: flex;flex-direction: column;">
<!-- #ifdef MP-WEIXIN -->
<nav-bar>分类</nav-bar>
<view class="search" @click="search()">
<input class="search_input" type="text" disabled="true" placeholder="输入关键字搜索" />
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="category-wrapper" :style="{'height':scroll_height+'px'}">
<!-- #endif -->
<!-- #ifdef APP-PLUS || APP-PLUS-NVUE || H5 -->
<view class="category-wrapper">
<!-- #endif -->
<!-- 左边导航 -->
<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
<view class="left-content column">
<view class="title-content" :class="select_index === index ? 'onSelected' : ''" v-for="(title, index) in catrgoryList" :key="title.id" @tap="choose(index)">
{{ title.name || '分类' + (index + 1) }}
</view>
</view>
</scroll-view>
<!-- 右边内容 -->
<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
<view class="right-content">
<!-- 产品区 -->
<view class="product-wrapper column with-100">
<view class="category-item column" :id="'list' + c_index" v-for="(c_item, c_index) in catrgoryList" :key="c_item.id">
<!-- 广告图 -->
<view class="banner-item"><image class="banner" :src="c_item.pic == '' || c_item.pic == null ? '' : c_item.pic"></image></view>
<view class="category-content">
<view class="product-item" v-for="(p_item, p_index) in c_item.goodsList" :key="p_item.id" @click="toCategory(p_item)">
<image class="product-img" :src="p_item.pic == '' || p_item.pic == null ? '' : p_item.pic"></image>
<text class="product-title">{{ p_item.name |formatLongText }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import Api from '@/common/api';
import navBar from "@/components/zhouWei-navBar";
export default {
components:{
navBar
},
data() {
return {
select_index: 0,
windows_height: 0, //屏幕高度
right_height: [], //右侧每个内容的高度集合
right_scroll: 0, //右侧的滑动值
left_height: 0, //左侧总高度
left_scroll: 0, //左侧滑动值
last: 0,
scroll_height: '',
statusBarHeight: '',
catrgoryList: [
]
};
},
onLoad() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.scroll_height = uni.getSystemInfoSync().windowHeight - (this.statusBarHeight + 44 + 40);
console.log('------',this.scroll_height)
this.windows_height = uni.getSystemInfoSync().windowHeight;
this.getData();
},
filters: {
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatNull(value) {
if(value===undefined||value===null||value===''){
return '暂无';
}else{
return value;
}
},
formatLongText(value) {
if(value===undefined||value===null||value===''){
return '暂无';
}else if(value.length>4){
return value.substr(0, 4) + '...';
}else{
return value;
}
},
formatPayType(value) {
if (value === 2) {
return '支付宝';
} else if (value === 1) {
return '微信小程序';
} else if (value === 3){
return '余额支付';
} else if (value === 5){
return '积分兑换';
}
},
},
methods: {
search() {
uni.navigateTo({
url: '/pages/search/search'
});
},
async getData() {
let params = {};
this.catrgoryList = await Api.apiCall('get', Api.goods.categoryAndGoodsList, params);
this.$nextTick(function() {
this.getHeightList();
});
console.log('-----', this.catrgoryList);
},
toCategory(item) {
uni.navigateTo({
url: `../../pagesA/product/product?id=${item.id}`
});
},
getHeightList() {
let _this = this;
let selectorQuery = uni.createSelectorQuery();
selectorQuery.select('.left-content').boundingClientRect(function(rects) {
_this.left_height = rects.height;
});
selectorQuery
.selectAll('.category-item')
.boundingClientRect(function(rects) {
_this.right_height = rects.map(item => item.top);
console.log(_this.right_height);
})
.exec();
},
choose(index) {
console.log('--choose--', index);
console.log('--choose--', this.select_index);
if (this.select_index === index) {
return;
}
this.select_index = index;
// 加入防抖
if (this.timeout) {
clearTimeout(this.timeout); //清除计时器
}
this.timeout = setTimeout(() => {
this.right_scroll = this.right_height[index] - 180;
}, 300);
console.log('--this.right_scroll--', this.right_scroll);
},
myscroll(e) {
//引入节流
let right_content_height = e.detail.scrollHeight - this.windows_height;
if (right_content_height == e.detail.scrollTop) {
console.log('--this.myscroll--', this.right_scroll);
return;
}
let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
//判断当前的scrollTop在哪个区间内;
let now = +new Date();
if (now - this.last > 140) {
this.last = now;
let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top && scroll_top < arr[index + 1]);
this.select_index = active_index;
if (this.left_height - this.windows_height) {
//如果有超出部分
let diff = this.left_height - this.windows_height;
this.left_scroll = Math.round((active_index * diff) / (this.catrgoryList.length - 1));
}
}
}
}
};
</script>
<style lang="less">
page,
.content {
height: 100%;
background-color: #f8f8f8;
}
.content {
display: flex;
}
.statusBar {
width: 100%;
position: fixed;
top: 0;
z-index: 99;
background: #ffffff;
}
.getPosition {
height: 90upx;
position: fixed;
z-index: 99;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
background-color: #fff;
}
.search {
background: #ffffff;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1upx solid #eeeeee;
}
.search_input {
font-size: 28upx;
background: #f5f5f5;
height: 60upx;
width: 90%;
border-radius: 50upx;
text-align: center;
}
.banner-item {
width: 94%;
height: 180upx;
border-radius: 20upx;
margin-left: 3%;
}
.banner {
width: 100%;
height: 180upx;
border-radius: 20upx;
overflow: hidden;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3);
}
.category-wrapper {
width: 100%;
display: flex;
flex-direction: row;
// position: absolute;
// top: 100upx;
// bottom: 0;
.left-wrapper {
width: 25%;
flex: 0 0 200rpx;
background-color: #ffffff;
.left-content {
.title-content {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30upx;
border-bottom: 1px solid #eeeeee;
cursor: pointer;
&:last-child {
// border-bottom: 0;
}
&.onSelected {
background-color: #fff;
position: relative;
// color: #4aa849;
color: #f44142;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 5upx;
height: 100%;
background: #f44142;
// background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
}
}
}
}
}
.right-wrapper {
flex: 1;
width: 75%;
background-color: #ffffff;
.right-content {
width: 100%;
padding-top: 20rpx;
border-left: 1rpx solid #efefef;
box-sizing: border-box;
.banner-wrapper {
padding: 0 20rpx;
.swiper-content {
width: 100%;
height: 180rpx;
margin-bottom: 30rpx;
.swiper-item {
.swiper-img {
width: 100%;
height: 180rpx;
}
}
}
}
.product-wrapper {
.category-item {
.category-title {
height: 60rpx;
font-size: 26rpx;
line-height: 60rpx;
font-weight: 500;
background-color: #f6f6f6;
padding-left: 20rpx;
color: #000;
}
.category-content {
display: flex;
flex-direction: row;
flex-flow: wrap;
padding: 40rpx 20rpx 0;
margin-bottom: 20rpx;
.product-item {
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
.product-img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.product-title {
font-size: 28rpx;
}
}
}
}
}
}
}
}
</style>

408
mallplusui-uniapp-app/pagesA/product/discountList.vue Normal file
View File

@@ -0,0 +1,408 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPageL(item.url)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text>已售 {{ item.clickCount }}</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeList, params);
//let list = await this.$api.json('cateList');
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum };
if (this.keyword) {
params = { pageNum: this.pageNum ,keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.index.bannerList, params);
let goodsList = list;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.clickCount - a.clickCount);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.clickCount - b.clickCount;
}
return b.clickCount - a.clickCount;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情页
navToDetailPageL(url) {
window.location.href =url;
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
let groupId = item.groupId;
uni.navigateTo({
url: `../../pagesA/product/groupProduct?id=${id}&&groupId=&{groupId}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

406
mallplusui-uniapp-app/pagesA/product/giftList.vue Normal file
View File

@@ -0,0 +1,406 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.icon" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.title }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text>已售 6</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeGiftList, params);
//let list = await this.$api.json('cateList');
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.goods.giftList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
console.log(item.id);
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/giftProduct?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

706
mallplusui-uniapp-app/pagesA/product/giftProduct.vue Normal file
View File

@@ -0,0 +1,706 @@
<template>
<view class="container">
<view class="carousel">
<view class="image-wrapper"><image :src="detailData.icon" class="loaded" mode="aspectFill"></image></view>
</view>
<view class="introduce-section">
<text class="title">{{ detailData.name }}</text>
<view class="price-box">
<text class="price-tip">¥</text>
<text class="price">{{ detailData.price }}</text>
</view>
<view class="bot-row">
<text>销量: 6</text>
<text>库存: {{ detailData.stock }}</text>
<text>浏览量: {{ detailData.hit }}</text>
</view>
</view>
<!-- 分享 -->
<view class="share-section" @click="share">
<view class="share-icon">
<text class="yticon icon-xingxing"></text>
返
</view>
<text class="tit">该商品分享可领49减10红包</text>
<text class="yticon icon-bangzhu1"></text>
<view class="share-btn">
立即分享
<text class="yticon icon-you"></text>
</view>
</view>
<view class="c-list">
<view class="c-row b-b">
<text class="tit">服务</text>
<view class="bz-list con">
<text>7天无理由退换货 ·</text>
<text>假一赔十 ·</text>
</view>
</view>
</view>
<view class="detail-desc">
<view class="d-header"><text>图文详情</text></view>
<rich-text :nodes="desc |formatRichText"></rich-text>
</view>
<!-- 底部操作菜单 -->
<view class="page-bottom">
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
<text class="yticon icon-xiatubiao--copy"></text>
<text>首页</text>
</navigator>
<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite(detailData)">
<text class="yticon icon-shoucang"></text>
<text>收藏</text>
</view>
<view class="action-btn-group"><button type="primary" class=" action-btn no-border add-cart-btn" @click="jifenPay(detailData)">积分兑换</button></view>
</view>
<!-- 分享 -->
<share ref="share" :contentHeight="580" :shareList="shareList"></share>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import share from '@/components/share';
import { mapState } from 'vuex';
export default {
components: {
share
},
data() {
return {
specClass: 'none',
specSelected: [],
small: null,
sku: [],
detailData: [],
favorite: true,
shareList: [],
desc: `
<div style="width:100%">
<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
</div>
`,
skuList: []
};
},
async onLoad(ops) {
//接收传值,id里面放的是标题，因为测试数据并没写id
let id = ops.id;
if (id) {
this.logining = true;
let params = { id: ops.id };
let data = await Api.apiCall('get', Api.goods.giftDetail, params);
this.logining = false;
if (data) {
let detailData = data.goods;
this.favorite = data.favorite;
this.typeGoodsList = detailData.typeGoodsList;
var subImages = detailData.albumPics;
this.desc = detailData.content;
let shareList = await this.$api.json('shareList');
this.loaded = true;
this.detailData = detailData;
this.shareList = shareList;
uni.setNavigationBarTitle({
title: detailData.name
});
}
}
this.shareList = await this.$api.json('shareList');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText (html) { //控制小程序中图片大小
if (html) {
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
} else {
return '暂无商品详情'
}
},
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
//分享
share() {
this.$refs.share.toggleMask();
},
//收藏
toFavorite(item) {
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
} else {
this.favorite = !this.favorite;
let params = { objId: item.id, type: 4, name: item.name, meno1: item.pic, meno2: item.price, meno3: item.sale };
Api.apiCall('post', Api.goods.favoriteSave, params);
}
},
async jifenPay(item) {
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
return false;
}
let id = item.id;
let data;
let params = { goodsId: id };
data = await Api.apiCall('post', Api.order.jifenPay, params);
if (data) {
this.$api.msg(data);
}
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 160upx;
}
.icon-you {
font-size: $font-base + 2upx;
color: #888;
}
.carousel {
height: 722upx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20upx 30upx;
.title {
font-size: 32upx;
color: $font-color-dark;
height: 50upx;
line-height: 50upx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64upx;
padding: 10upx 0;
font-size: 26upx;
color: $uni-color-primary;
}
.price {
font-size: $font-lg + 2upx;
}
.m-price {
margin: 0 12upx;
color: $font-color-light;
text-decoration: line-through;
}
.coupon-tip {
align-items: center;
padding: 4upx 10upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6upx;
line-height: 1;
transform: translateY(-4upx);
}
.bot-row {
display: flex;
align-items: center;
height: 50upx;
font-size: $font-sm;
color: $font-color-light;
text {
flex: 1;
}
}
}
/* 分享 */
.share-section {
display: flex;
align-items: center;
color: $font-color-base;
background: linear-gradient(left, #fdf5f6, #fbebf6);
padding: 12upx 30upx;
.share-icon {
display: flex;
align-items: center;
width: 70upx;
height: 30upx;
line-height: 1;
border: 1px solid $uni-color-primary;
border-radius: 4upx;
position: relative;
overflow: hidden;
font-size: 22upx;
color: $uni-color-primary;
&:after {
content: '';
width: 50upx;
height: 50upx;
border-radius: 50%;
left: -20upx;
top: -12upx;
position: absolute;
background: $uni-color-primary;
}
}
.icon-xingxing {
position: relative;
z-index: 1;
font-size: 24upx;
margin-left: 2upx;
margin-right: 10upx;
color: #fff;
line-height: 1;
}
.tit {
font-size: $font-base;
margin-left: 10upx;
}
.icon-bangzhu1 {
padding: 10upx;
font-size: 30upx;
line-height: 1;
}
.share-btn {
flex: 1;
text-align: right;
font-size: $font-sm;
color: $uni-color-primary;
}
.icon-you {
font-size: $font-sm;
margin-left: 4upx;
color: $uni-color-primary;
}
}
.c-list {
font-size: $font-sm + 2upx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20upx 30upx;
position: relative;
}
.tit {
width: 140upx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10upx;
}
}
.bz-list {
height: 40upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
text {
display: inline-block;
margin-right: 30upx;
}
}
.con-list {
flex: 1;
display: flex;
flex-direction: column;
color: $font-color-dark;
line-height: 40upx;
}
.red {
color: $uni-color-primary;
}
}
/* 评价 */
.eva-section {
display: flex;
flex-direction: column;
padding: 20upx 30upx;
background: #fff;
margin-top: 16upx;
.e-header {
display: flex;
align-items: center;
height: 70upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.tit {
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 4upx;
}
.tip {
flex: 1;
text-align: right;
}
.icon-you {
margin-left: 10upx;
}
}
}
.eva-box {
display: flex;
padding: 20upx 0;
.portrait {
flex-shrink: 0;
width: 80upx;
height: 80upx;
border-radius: 100px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-base;
color: $font-color-base;
padding-left: 26upx;
.con {
font-size: $font-base;
color: $font-color-dark;
padding: 20upx 0;
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
}
}
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16upx;
.d-header {
display: flex;
justify-content: center;
align-items: center;
height: 80upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
position: relative;
text {
padding: 0 20upx;
background: #fff;
position: relative;
z-index: 1;
}
&:after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 300upx;
height: 0;
content: '';
border-bottom: 1px solid #ccc;
}
}
}
/* 规格选择弹窗 */
.attr-content {
padding: 10upx 30upx;
.a-t {
display: flex;
image {
width: 170upx;
height: 170upx;
flex-shrink: 0;
margin-top: -40upx;
border-radius: 8upx;
}
.right {
display: flex;
flex-direction: column;
padding-left: 24upx;
font-size: $font-sm + 2upx;
color: $font-color-base;
line-height: 42upx;
.price {
font-size: $font-lg;
color: $uni-color-primary;
margin-bottom: 10upx;
}
.selected-text {
margin-right: 10upx;
}
}
}
.attr-list {
display: flex;
flex-direction: column;
font-size: $font-base + 2upx;
color: $font-color-base;
padding-top: 30upx;
padding-left: 10upx;
}
.item-list {
padding: 20upx 0 0;
display: flex;
flex-wrap: wrap;
text {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
margin-right: 20upx;
margin-bottom: 20upx;
border-radius: 100upx;
min-width: 60upx;
height: 60upx;
padding: 0 20upx;
font-size: $font-base;
color: $font-color-dark;
}
.selected {
background: #fbebee;
color: $uni-color-primary;
}
}
}
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
min-height: 40vh;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.btn {
height: 66upx;
line-height: 66upx;
border-radius: 100upx;
background: $uni-color-primary;
font-size: $font-base + 2upx;
color: #fff;
margin: 30upx auto 20upx;
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
/* 底部操作菜单 */
.page-bottom {
position: fixed;
left: 30upx;
bottom: 30upx;
z-index: 95;
display: flex;
justify-content: center;
align-items: center;
width: 690upx;
height: 100upx;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
border-radius: 16upx;
.p-b-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-sm;
color: $font-color-base;
width: 96upx;
height: 80upx;
.yticon {
font-size: 40upx;
line-height: 48upx;
color: $font-color-light;
}
&.active,
&.active .yticon {
color: $uni-color-primary;
}
.icon-fenxiang2 {
font-size: 42upx;
transform: translateY(-2upx);
}
.icon-shoucang {
font-size: 46upx;
}
}
.action-btn-group {
display: flex;
height: 76upx;
border-radius: 100px;
overflow: hidden;
box-shadow: 0 20upx 40upx -16upx #fa436a;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
margin-left: 20upx;
position: relative;
&:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
height: 28upx;
width: 0;
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 180upx;
height: 100%;
font-size: $font-base;
padding: 0;
border-radius: 0;
background: transparent;
}
}
}
</style>

1219
mallplusui-uniapp-app/pagesA/product/groupActivityDetail.vue Normal file
View File

File diff suppressed because it is too large Load Diff

381
mallplusui-uniapp-app/pagesA/product/groupActivityList.vue Normal file
View File

@@ -0,0 +1,381 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text>运费 {{item.transfee}}</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
//this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.index.groupActivityList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
console.log(item.id);
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/groupActivityDetail?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0 20upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

407
mallplusui-uniapp-app/pagesA/product/groupList.vue Normal file
View File

@@ -0,0 +1,407 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.goods.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.goods.name }}</text>
<view class="price-box">
<text class="price">{{ item.groupPrice }}</text>
<text>原价 {{ item.goods.price }}</text>
</view>
</view>
</view>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeList, params);
//let list = await this.$api.json('cateList');
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId };
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword };
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword };
} else {
params = { pageNum: this.pageNum };
}
let list = await Api.apiCall('get', Api.goods.groupHotGoodsList, params);
let goodsList = list;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.goodsId;
let groupId = item.id;
uni.navigateTo({
url: `../../pagesA/product/groupProduct?id=${id}&&groupId=&{groupId}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

1097
mallplusui-uniapp-app/pagesA/product/groupProduct.vue Normal file
View File

File diff suppressed because it is too large Load Diff

528
mallplusui-uniapp-app/pagesA/product/list.vue Normal file
View File

@@ -0,0 +1,528 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<!-- <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text> -->
<text class="cate-item yticon icon-fenlei1" v-if="current == 0" @click="toShowMode('false')"></text>
<text class="cate-item cgicon icon-vertical" v-else-if="current == 1" @click="toShowMode('true')"></text>
</view>
<!-- 表格图片显示 -->
<view class="goods-list" v-show="current === 0">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box" v-if="item.isFenxiao == 1">
<text class="price">{{ item.price }}</text>
<text>佣金 ¥{{ item.fenxiaoPrice }}</text>
</view>
<view class="price-box" v-if="item.isVip == 1">
<text class="price">会员价{{ item.vipPrice }}</text>
<text>商品价 ¥{{ item.price }}</text>
</view>
<view class="price-box" v-else-if="item.isFenxiao == 0 && item.isVip == 0">
<text class="price">{{ item.price }}</text>
<text>已售 {{ item.sale }}</text>
</view>
</view>
</view>
<!-- 列表显示 -->
<view class="goods-list-vertical" v-show="current === 1">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item-vertical" @click="navToDetailPage(item)">
<view class="image-wrapper-vertical"><image :src="item.pic" mode="aspectFill"></image></view>
<view class="goods-list-right">
<view class="goods-right-top">
<text class="">{{ item.name }}</text>
</view>
<view class="goods-right-bottom">
<text class="price">{{ item.price }}</text>
<text class="sale">已售 {{ item.sale }}</text>
</view>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
productAttributeCategoryId: 0,
pageNum: 1,
isFenxiao: 0,
isVip: 0,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: [],
current: 0 // 1为列表模式
};
},
onLoad(options) {
console.log(options);
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
this.isVip = options.isVip;
this.isFenxiao = options.isFenxiao;
console.log(options);
this.productAttributeCategoryId = options.productAttributeCategoryId;
this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
toShowMode(mode) {
if (this.current == 0) {
this.current = 1;
} else {
this.current = 0;
}
},
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeList, params);
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params = { pageNum: this.pageNum, productCategoryId: this.cateId, type: 1, productAttributeCategoryId: this.productAttributeCategoryId };;
if (this.cateId) {
params.productCategoryId = this.cateId;
}
if (this.productAttributeCategoryId) {
params.productAttributeCategoryId = this.productAttributeCategoryId;
}
if (this.keyword) {
params.keyword = this.keyword;
}
if (this.isVip) {
params.isVip = 1;
}
if (this.isFenxiao) {
params.isFenxiao = 1;
}
let list = await Api.apiCall('get', Api.goods.goodsList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/product?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
@font-face {
font-family: 'cgicon';
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_1475801_65jj7c5ss9k.ttf') format('truetype');
}
.cgicon {
font-family: 'cgicon' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-vertical:before {
content: '\e61b';
}
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
.goods-list-vertical {
display: flex;
flex-wrap: wrap;
padding: 0upx 20upx;
background: #fff;
.goods-item-vertical {
display: flex;
flex-direction: row;
height: 280upx;
align-items: center;
justify-content: center;
border-bottom: 1upx solid #eeeeee;
.image-wrapper-vertical {
width: 240upx;
height: 240upx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10upx;
image {
width: 240upx;
height: 240upx;
}
}
.goods-list-right {
width: 470upx;
.goods-right-top {
height: 200upx;
text {
font-size: 32upx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.goods-right-bottom {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
.sale {
color: $font-color-light;
font-size: 28upx;
}
}
}
}
}
</style>

726
mallplusui-uniapp-app/pagesA/product/paiMaiDetail.vue Normal file
View File

@@ -0,0 +1,726 @@
<template>
<view class="container">
<view class="carousel">
<swiper indicator-dots circular="true" duration="400">
<swiper-item class="swiper-item" v-for="(item, index) in small" :key="index">
<view class="image-wrapper"><image :src="item" class="loaded" mode="aspectFill"></image></view>
</swiper-item>
</swiper>
</view>
<view class="introduce-section">
<text class="title">{{ detailData.name }}</text>
<view class="price-box">
<text class="price-tip">¥</text>
<text class="price">{{ detailData.price }}</text>
</view>
<view class="bot-row">
<text>出价次数: {{buyCount}}</text>
<text>浏览量: {{ detailData.hit }}</text>
</view>
</view>
<view class="share-section" >
<view class="share-btn" v-if="(detailData.type == 2) && detailData.timeSecound">剩余：
<uni-countdown :day="detailData.timeSecound.days" :hour="detailData.timeSecound.hour" :minute="detailData.timeSecound.mins" :second="detailData.timeSecound.sc">
</uni-countdown></view>
<view class="goods-salesvolume red-price" v-if="detailData.type == 3">已结束</view>
<view class="goods-salesvolume red-price" v-if="detailData.type == 1">即将开团</view>
</view>
<!-- 分享 -->
<view class="share-section" @click="share">
<view class="share-icon">
<text class="yticon icon-xingxing"></text>
返
</view>
<text class="tit">该商品分享可领49减10红包</text>
<text class="yticon icon-bangzhu1"></text>
<view class="share-btn">
立即分享
<text class="yticon icon-you"></text>
</view>
</view>
<view class="c-list">
<view class="c-row b-b">
<text class="tit">服务</text>
<view class="bz-list con">
<text>7天无理由退换货 ·</text>
<text>假一赔十 ·</text>
</view>
</view>
</view>
<view class="detail-desc">
<view class="d-header"><text>图文详情</text></view>
<rich-text :nodes="desc |formatRichText"></rich-text>
</view>
<!-- 底部操作菜单 -->
<view class="page-bottom">
<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
<text class="yticon icon-xiatubiao--copy"></text>
<text>首页</text>
</navigator>
<view class="p-b-btn" :class="{ active: favorite }" @click="toFavorite(detailData)">
<text class="yticon icon-shoucang"></text>
<text>收藏</text>
</view>
<view class="action-btn-group"><button type="primary" class=" action-btn no-border add-cart-btn" @click="jifenPay(detailData)">出价竞拍</button></view>
</view>
<!-- 分享 -->
<share ref="share" :contentHeight="580" :shareList="shareList"></share>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import share from '@/components/share';
import { mapState } from 'vuex';
import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
export default {
components: {
share,uniCountdown
},
data() {
return {
specClass: 'none',
specSelected: [],
small: null,
sku: [],
detailData: [],
paimaiLogList:[],
buyCount : 0,
favorite: true,
shareList: [],
desc: `
<div style="width:100%">
<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
</div>
`,
skuList: []
};
},
async onLoad(ops) {
//接收传值,id里面放的是标题，因为测试数据并没写id
let id = ops.id;
if (id) {
this.logining = true;
let params = { id: ops.id };
let data = await Api.apiCall('get', Api.goods.paiMaiDetail, params);
this.logining = false;
if (data) {
let detailData = data.goods;
this.favorite = data.favorite;
this.paimaiLogList = detailData.paimaiLogList;
if(this.paimaiLogList){
this.buyCount=this.paimaiLogList.length;
}
var subImages = detailData.albumPics;
this.small = subImages.split(',');
this.desc = detailData.content;
let shareList = await this.$api.json('shareList');
this.loaded = true;
this.detailData = detailData;
this.shareList = shareList;
uni.setNavigationBarTitle({
title: detailData.name
});
}
}
this.shareList = await this.$api.json('shareList');
},
computed: {
...mapState(['hasLogin', 'userInfo'])
},
filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText (html) { //控制小程序中图片大小
if (html) {
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
} else {
return '暂无商品详情'
}
},
formatCreateTime(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
},
methods: {
//分享
share() {
this.$refs.share.toggleMask();
},
//收藏
toFavorite(item) {
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
} else {
this.favorite = !this.favorite;
let params = { objId: item.id, type: 4, name: item.name, meno1: item.pic, meno2: item.price, meno3: item.sale };
Api.apiCall('post', Api.goods.favoriteSave, params);
}
},
async jifenPay(item) {
if (!this.hasLogin) {
let url = '/pages/public/login';
uni.navigateTo({
url
});
return false;
}
let id = item.id;
let data;
let params = { goodsId: id, price: 1 };
data = await Api.apiCall('post', Api.goods.updatePaiMai, params);
if (data) {
this.$api.msg(data);
}
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 160upx;
}
.icon-you {
font-size: $font-base + 2upx;
color: #888;
}
.carousel {
height: 722upx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750upx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
}
/* 标题简介 */
.introduce-section {
background: #fff;
padding: 20upx 30upx;
.title {
font-size: 32upx;
color: $font-color-dark;
height: 50upx;
line-height: 50upx;
}
.price-box {
display: flex;
align-items: baseline;
height: 64upx;
padding: 10upx 0;
font-size: 26upx;
color: $uni-color-primary;
}
.price {
font-size: $font-lg + 2upx;
}
.m-price {
margin: 0 12upx;
color: $font-color-light;
text-decoration: line-through;
}
.coupon-tip {
align-items: center;
padding: 4upx 10upx;
background: $uni-color-primary;
font-size: $font-sm;
color: #fff;
border-radius: 6upx;
line-height: 1;
transform: translateY(-4upx);
}
.bot-row {
display: flex;
align-items: center;
height: 50upx;
font-size: $font-sm;
color: $font-color-light;
text {
flex: 1;
}
}
}
/* 分享 */
.share-section {
display: flex;
align-items: center;
color: $font-color-base;
background: linear-gradient(left, #fdf5f6, #fbebf6);
padding: 12upx 30upx;
.share-icon {
display: flex;
align-items: center;
width: 70upx;
height: 30upx;
line-height: 1;
border: 1px solid $uni-color-primary;
border-radius: 4upx;
position: relative;
overflow: hidden;
font-size: 22upx;
color: $uni-color-primary;
&:after {
content: '';
width: 50upx;
height: 50upx;
border-radius: 50%;
left: -20upx;
top: -12upx;
position: absolute;
background: $uni-color-primary;
}
}
.icon-xingxing {
position: relative;
z-index: 1;
font-size: 24upx;
margin-left: 2upx;
margin-right: 10upx;
color: #fff;
line-height: 1;
}
.tit {
font-size: $font-base;
margin-left: 10upx;
}
.icon-bangzhu1 {
padding: 10upx;
font-size: 30upx;
line-height: 1;
}
.share-btn {
flex: 1;
text-align: right;
font-size: $font-sm;
color: $uni-color-primary;
}
.icon-you {
font-size: $font-sm;
margin-left: 4upx;
color: $uni-color-primary;
}
}
.c-list {
font-size: $font-sm + 2upx;
color: $font-color-base;
background: #fff;
.c-row {
display: flex;
align-items: center;
padding: 20upx 30upx;
position: relative;
}
.tit {
width: 140upx;
}
.con {
flex: 1;
color: $font-color-dark;
.selected-text {
margin-right: 10upx;
}
}
.bz-list {
height: 40upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
text {
display: inline-block;
margin-right: 30upx;
}
}
.con-list {
flex: 1;
display: flex;
flex-direction: column;
color: $font-color-dark;
line-height: 40upx;
}
.red {
color: $uni-color-primary;
}
}
/* 评价 */
.eva-section {
display: flex;
flex-direction: column;
padding: 20upx 30upx;
background: #fff;
margin-top: 16upx;
.e-header {
display: flex;
align-items: center;
height: 70upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.tit {
font-size: $font-base + 2upx;
color: $font-color-dark;
margin-right: 4upx;
}
.tip {
flex: 1;
text-align: right;
}
.icon-you {
margin-left: 10upx;
}
}
}
.eva-box {
display: flex;
padding: 20upx 0;
.portrait {
flex-shrink: 0;
width: 80upx;
height: 80upx;
border-radius: 100px;
}
.right {
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-base;
color: $font-color-base;
padding-left: 26upx;
.con {
font-size: $font-base;
color: $font-color-dark;
padding: 20upx 0;
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
}
}
}
/* 详情 */
.detail-desc {
background: #fff;
margin-top: 16upx;
.d-header {
display: flex;
justify-content: center;
align-items: center;
height: 80upx;
font-size: $font-base + 2upx;
color: $font-color-dark;
position: relative;
text {
padding: 0 20upx;
background: #fff;
position: relative;
z-index: 1;
}
&:after {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 300upx;
height: 0;
content: '';
border-bottom: 1px solid #ccc;
}
}
}
/* 规格选择弹窗 */
.attr-content {
padding: 10upx 30upx;
.a-t {
display: flex;
image {
width: 170upx;
height: 170upx;
flex-shrink: 0;
margin-top: -40upx;
border-radius: 8upx;
}
.right {
display: flex;
flex-direction: column;
padding-left: 24upx;
font-size: $font-sm + 2upx;
color: $font-color-base;
line-height: 42upx;
.price {
font-size: $font-lg;
color: $uni-color-primary;
margin-bottom: 10upx;
}
.selected-text {
margin-right: 10upx;
}
}
}
.attr-list {
display: flex;
flex-direction: column;
font-size: $font-base + 2upx;
color: $font-color-base;
padding-top: 30upx;
padding-left: 10upx;
}
.item-list {
padding: 20upx 0 0;
display: flex;
flex-wrap: wrap;
text {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
margin-right: 20upx;
margin-bottom: 20upx;
border-radius: 100upx;
min-width: 60upx;
height: 60upx;
padding: 0 20upx;
font-size: $font-base;
color: $font-color-dark;
}
.selected {
background: #fbebee;
color: $uni-color-primary;
}
}
}
/* 弹出层 */
.popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
}
}
&.hide {
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.layer {
position: fixed;
z-index: 99;
bottom: 0;
width: 100%;
min-height: 40vh;
border-radius: 10upx 10upx 0 0;
background-color: #fff;
.btn {
height: 66upx;
line-height: 66upx;
border-radius: 100upx;
background: $uni-color-primary;
font-size: $font-base + 2upx;
color: #fff;
margin: 30upx auto 20upx;
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
/* 底部操作菜单 */
.page-bottom {
position: fixed;
left: 30upx;
bottom: 30upx;
z-index: 95;
display: flex;
justify-content: center;
align-items: center;
width: 690upx;
height: 100upx;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
border-radius: 16upx;
.p-b-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: $font-sm;
color: $font-color-base;
width: 96upx;
height: 80upx;
.yticon {
font-size: 40upx;
line-height: 48upx;
color: $font-color-light;
}
&.active,
&.active .yticon {
color: $uni-color-primary;
}
.icon-fenxiang2 {
font-size: 42upx;
transform: translateY(-2upx);
}
.icon-shoucang {
font-size: 46upx;
}
}
.action-btn-group {
display: flex;
height: 76upx;
border-radius: 100px;
overflow: hidden;
box-shadow: 0 20upx 40upx -16upx #fa436a;
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
margin-left: 20upx;
position: relative;
&:after {
content: '';
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
height: 28upx;
width: 0;
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 180upx;
height: 100%;
font-size: $font-base;
padding: 0;
border-radius: 0;
background: transparent;
}
}
}
</style>

406
mallplusui-uniapp-app/pagesA/product/paiMaiList.vue Normal file
View File

@@ -0,0 +1,406 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text>
</view>
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box">
<text class="price">{{ item.price }}</text>
<text>已售 {{ item.sale }}</text>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
pageNum: 1,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: []
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.keyword = options.keyword;
this.cateId = options.sid;
// this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
//加载分类
loadCateList(fid, sid) {
let params = {};
let list = Api.apiCall('get', Api.goods.typeList, params);
console.log(list);
//let list = await this.$api.json('cateList');
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
//没有更多直接返回
if (type === 'add') {
if (this.loadingType === 'nomore') {
return;
}
this.loadingType = 'loading';
} else {
this.loadingType = 'more';
}
let params;
if (this.cateId) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId ,type:2};
if (this.keyword) {
params = { pageNum: this.pageNum, productCategoryId: this.cateId, keyword: this.keyword ,type:2};
}
}
if (this.keyword) {
params = { pageNum: this.pageNum, keyword: this.keyword ,type:2};
} else {
params = { pageNum: this.pageNum ,type:2};
}
let list = await Api.apiCall('get', Api.goods.goodsList, params);
let goodsList = list.records;
// let goodsList = await this.$api.json('goodsList');
if (type === 'refresh') {
this.goodsList = [];
}
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = this.goodsList.concat(goodsList);
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more';
if (type === 'refresh') {
if (loading == 1) {
uni.hideLoading();
} else {
uni.stopPullDownRefresh();
}
}
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/paiMaiDetail?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 0 30upx;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
</style>

1282
mallplusui-uniapp-app/pagesA/product/product.vue Normal file
View File

File diff suppressed because it is too large Load Diff

1030
mallplusui-uniapp-app/pagesA/product/secskillDetail.vue Normal file
View File

File diff suppressed because it is too large Load Diff

205
mallplusui-uniapp-app/pagesA/product/tag.vue Normal file
View File

@@ -0,0 +1,205 @@
<template>
<view>
<uni-section title="商品标签" type="line"></uni-section>
<view class="example-body">
<view class="tag-view" v-for="(item, index) in goodsTagList" :key="index" @click="navToList(item.id)">
<uni-tag :text="item.name" type="success" />
</view>
</view>
<uni-section title="会员标签" type="line"></uni-section>
<view class="example-body" >
<view class="tag-view" v-for="(item, index) in memberTagList" :key="index" @click="navToList(item.id)">
<uni-tag :circle="true" :text="item.name" type="warning" />
</view>
</view>
<uni-section title="内容标签" type="line"></uni-section>
<view class="example-body">
<view class="tag-view" v-for="(item, index) in cmsTagList" :key="index" @click="navToList(item.id)">
<uni-tag :circle="true" :inverted="inverted" :text="item.name" type="primary" @click="setInverted" />
</view>
</view>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import uniSection from '@/components/uni-section/uni-section.vue'
export default {
components: {
uniTag,
uniSection
},
data() {
return {
type: 'default',
goodsTagList:[],
memberTagList:[],
cmsTagList:[],
inverted: false
};
},
onLoad(options) {
this.loadGoodsData();
this.loadMemberData();
this.loadCmsData();
},
methods: {
async loadGoodsData() {
let params = {type:2,status:1};
let list = await Api.apiCall('get', Api.member.memberTagList, params);
this.goodsTagList = list.records;
},
async loadMemberData() {
let params = {type:1,status:1};
let list = await Api.apiCall('get', Api.member.memberTagList, params);
this.memberTagList = list.records;
},
async loadCmsData() {
let params = {type:3,status:1};
let list = await Api.apiCall('get', Api.member.memberTagList, params);
this.cmsTagList = list.records;
},
setType() {
let types = ['default', 'primary', 'success', 'warning', 'error'];
let index = types.indexOf(this.type);
types.splice(index, 1);
let randomIndex = Math.floor(Math.random() * 4);
this.type = types[randomIndex];
},
setInverted() {
this.inverted = !this.inverted;
},
navToList(tagId) {
uni.navigateTo({
url: `../../pagesA/product/tagGoodslist?tagId=${tagId}`
});
}
}
};
</script>
<style>
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example {
padding: 0 15px 15px;
}
.example-info {
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 15px;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 15px;
color: #3b4144;
background-color: #ffffff;
font-size: 14px;
line-height: 20px;
}
.example-info-text {
font-size: 14px;
line-height: 20px;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.word-btn-white {
font-size: 18px;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 48px;
margin: 15px;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
.example-body {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
padding: 20rpx;
}
.tag-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: column;
margin: 10rpx 15rpx;
justify-content: center;
}
</style>

483
mallplusui-uniapp-app/pagesA/product/tagGoodslist.vue Normal file
View File

@@ -0,0 +1,483 @@
<template>
<view class="content">
<view class="navbar" :style="{ position: headerPosition, top: headerTop }">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 1 }" @click="tabClick(1)">销量优先</view>
<view class="nav-item" :class="{ current: filterIndex === 2 }" @click="tabClick(2)">
<text>价格</text>
<view class="p-box">
<text :class="{ active: priceOrder === 1 && filterIndex === 2 }" class="yticon icon-shang"></text>
<text :class="{ active: priceOrder === 2 && filterIndex === 2 }" class="yticon icon-shang xia"></text>
</view>
</view>
<!-- <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text> -->
<text class="cate-item yticon icon-fenlei1" v-if="current == 0" @click="toShowMode('false')"></text>
<text class="cate-item cgicon icon-vertical" v-else-if="current == 1" @click="toShowMode('true')"></text>
</view>
<!-- 表格图片显示 -->
<view class="goods-list" v-show="current === 0">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
<view class="image-wrapper"><image :src="item.pic" mode="aspectFill"></image></view>
<text class="title clamp">{{ item.name }}</text>
<view class="price-box" v-if="item.isFenxiao == 1">
<text class="price">{{ item.price }}</text>
<text>佣金 ¥{{ item.fenxiaoPrice }}</text>
</view>
<view class="price-box" v-if="item.isVip == 1">
<text class="price">会员价{{ item.vipPrice }}</text>
<text>商品价 ¥{{ item.price }}</text>
</view>
<view class="price-box" v-else-if="item.isFenxiao == 0 && item.isVip == 0">
<text class="price">{{ item.price }}</text>
<text>已售 {{ item.sale }}</text>
</view>
</view>
</view>
<!-- 列表显示 -->
<view class="goods-list-vertical" v-show="current === 1">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item-vertical" @click="navToDetailPage(item)">
<view class="image-wrapper-vertical"><image :src="item.pic" mode="aspectFill"></image></view>
<view class="goods-list-right">
<view class="goods-right-top">
<text class="">{{ item.name }}</text>
</view>
<view class="goods-right-bottom">
<text class="price">{{ item.price }}</text>
<text class="sale">已售 {{ item.sale }}</text>
</view>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
<scroll-view scroll-y class="cate-list">
<view v-for="item in cateList" :key="item.id">
<view class="cate-item b-b two">{{ item.name }}</view>
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" :class="{ active: tItem.id == cateId }" @click="changeCate(tItem)">
{{ tItem.name }}
</view>
</view>
</scroll-view>
</view>
</view>
<mallplusCopyright></mallplusCopyright>
</view>
</template>
<script>
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
import Api from '@/common/api';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
components: {
mallplusCopyright,
uniLoadMore
},
data() {
return {
cateMaskState: 0, //分类面板展开状态
headerPosition: 'fixed',
headerTop: '0px',
keyword: '',
loadingType: 'more', //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
productAttributeCategoryId: 0,
pageNum: 1,
isFenxiao: 0,
isVip: 0,
cid: null,
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
goodsList: [],
current: 0 // 1为列表模式
};
},
onLoad(options) {
// #ifdef H5
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
// #endif
this.cateId = options.tagId;
// this.loadCateList(options.fid, options.sid);
this.loadData();
},
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if (e.scrollTop >= 0) {
this.headerPosition = 'fixed';
} else {
this.headerPosition = 'absolute';
}
},
//下拉刷新
onPullDownRefresh() {
this.pageNum = 1;
this.loadData('refresh');
},
//加载更多
onReachBottom() {
this.pageNum = this.pageNum + 1;
this.loadData();
},
methods: {
toShowMode(mode) {
if (this.current == 0) {
this.current = 1;
} else {
this.current = 0;
}
},
//加载分类
async loadCateList(fid, sid) {
let params = {};
let list = await Api.apiCall('get', Api.goods.typeList, params);
let cateList = list.filter(item => item.pid == null);
cateList.forEach(item => {
let tempList = list.filter(val => val.pid == item.id);
item.child = tempList;
});
this.cateList = cateList;
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type = 'add', loading) {
let params = { tags: this.cateId };
let list = await Api.apiCall('get', Api.goods.tagGoodsList, params);
let goodsList = list;
//筛选，测试数据直接前端筛选了
if (this.filterIndex === 1) {
goodsList.sort((a, b) => b.sales - a.sales);
}
if (this.filterIndex === 2) {
goodsList.sort((a, b) => {
if (this.priceOrder == 1) {
return a.price - b.price;
}
return b.price - a.price;
});
}
this.goodsList = goodsList;
},
//筛选点击
tabClick(index) {
this.pageNum = 1;
if (this.filterIndex === index && index !== 2) {
return;
}
this.filterIndex = index;
if (index === 2) {
this.priceOrder = this.priceOrder === 1 ? 2 : 1;
} else {
this.priceOrder = 0;
}
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//显示分类面板
toggleCateMask(type) {
let timer = type === 'show' ? 10 : 300;
let state = type === 'show' ? 1 : 0;
this.cateMaskState = 2;
setTimeout(() => {
this.cateMaskState = state;
}, timer);
},
//分类点击
changeCate(item) {
this.pageNum = 1;
this.cateId = item.id;
this.toggleCateMask();
uni.pageScrollTo({
duration: 300,
scrollTop: 0
});
this.loadData('refresh', 1);
},
//详情
navToDetailPage(item) {
//测试数据没有写id，用title代替
let id = item.id;
uni.navigateTo({
url: `../../pagesA/product/product?id=${id}`
});
},
stopPrevent() {}
}
};
</script>
<style lang="scss">
@font-face {
font-family: 'cgicon';
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_1475801_65jj7c5ss9k.ttf') format('truetype');
}
.cgicon {
font-family: 'cgicon' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-vertical:before {
content: '\e61b';
}
page,
.content {
background: $page-color-base;
}
.content {
padding-top: 96upx;
}
.navbar {
position: fixed;
left: 0;
top: var(--window-top);
display: flex;
width: 100%;
height: 80upx;
background: #fff;
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30upx;
color: $font-color-dark;
position: relative;
&.current {
color: $base-color;
&:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 120upx;
height: 0;
border-bottom: 4upx solid $base-color;
}
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30upx;
height: 14upx;
line-height: 1;
margin-left: 4upx;
font-size: 26upx;
color: #888;
&.active {
color: $base-color;
}
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80upx;
position: relative;
font-size: 44upx;
&:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36upx;
}
}
}
/* 分类 */
.cate-mask {
position: fixed;
left: 0;
top: var(--window-top);
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 95;
transition: 0.3s;
.cate-content {
width: 630upx;
height: 100%;
background: #fff;
float: right;
transform: translateX(100%);
transition: 0.3s;
}
&.none {
display: none;
}
&.show {
background: rgba(0, 0, 0, 0.4);
.cate-content {
transform: translateX(0);
}
}
}
.cate-list {
display: flex;
flex-direction: column;
height: 100%;
.cate-item {
display: flex;
align-items: center;
height: 90upx;
padding-left: 30upx;
font-size: 28upx;
color: #555;
position: relative;
}
.two {
height: 64upx;
color: #303133;
font-size: 30upx;
background: #f8f8f8;
}
.active {
color: $base-color;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20upx 20upx 0;
background: #fff;
.goods-item {
display: flex;
flex-direction: column;
width: 48%;
padding-bottom: 40upx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330upx;
border-radius: 3px;
overflow: hidden;
image {
width: 100%;
height: 100%;
opacity: 1;
}
}
.title {
font-size: $font-lg;
color: $font-color-dark;
line-height: 80upx;
}
.price-box {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10upx;
font-size: 24upx;
color: $font-color-light;
}
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
}
.goods-list-vertical {
display: flex;
flex-wrap: wrap;
padding: 0upx 20upx;
background: #fff;
.goods-item-vertical {
display: flex;
flex-direction: row;
height: 280upx;
align-items: center;
justify-content: center;
border-bottom: 1upx solid #eeeeee;
.image-wrapper-vertical {
width: 240upx;
height: 240upx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10upx;
image {
width: 240upx;
height: 240upx;
}
}
.goods-list-right {
width: 470upx;
.goods-right-top {
height: 200upx;
text {
font-size: 32upx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.goods-right-bottom {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: $font-lg;
color: $uni-color-primary;
line-height: 1;
&:before {
content: '￥';
font-size: 26upx;
}
}
.sale {
color: $font-color-light;
font-size: 28upx;
}
}
}
}
}
</style>