code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-18 08:25:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 11:03:32 +08:00
commit 23804939eb
2158 changed files with 149684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
pages/cart/coupon/couponCenter.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<view class="coupon-center">
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange">
<swiper-item @touchmove.stop class="swiper-item" v-for="tab in categoryIndexData" :key="tab.category_id">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
<u-empty mode="coupon" text="没有优惠券了" v-if="nomsg"></u-empty>
<view v-else class="coupon-item" v-for="(item, index) in list" :key="index">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view>
<span v-if="item.couponType == 'DISCOUNT'">{{ item.couponDiscount }}折</span>
<span v-else>{{ item.price }}元</span>
</view>
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right">
<view>
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
</view>
<view>有效期至：{{ item.endTime.split(" ")[0] }}</view>
</view>
<view class="receive" @click="receive(item)">
<text>点击</text><br />
<text>领取</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
<uni-load-more :status="loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { receiveCoupons } from "@/api/members.js";
import { getAllCoupons } from "@/api/promotions.js";
import { getCategoryIndexData } from "@/api/home.js";
export default {
data() {
return {
loadStatus: "more",
nomsg: false,
list: [],
params: {
pageNumber: 1,
pageSize: 10,
status: 1,
},
storeId: "",
categoryIndexData: [],
currentLeft: 0,
tabIndex: 0,
};
},
onLoad(option) {
this.storeId = option.storeId;
this.getCoupon();
this.getTabbar();
},
onPullDownRefresh() {
//下拉刷新
console.log("refresh");
this.params.pageNumber = 1;
this.list = [];
this.getCoupon();
},
methods: {
getCoupon() {
//全部优惠券
uni.showLoading({
title: "加载中",
});
if (this.storeId) {
getAllCoupons({ storeId: this.storeId ,...this.params })
.then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
let data = res.data.result;
if (data.total == 0) {
this.nomsg = true;
} else {
this.list.push(...data.records);
this.loadStatus = "noMore";
}
}
})
.catch((err) => {
uni.hideLoading();
});
} else {
getAllCoupons(this.params)
.then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
console.log(res);
let data = res.data.result;
if (data.total == 0) {
this.nomsg = true;
console.log("这里");
} else if (data.total < 10) {
this.list.push(...data.records);
this.loadStatus = "noMore";
} else {
this.list.push(...data.records);
if (data.data.length < 10) this.loadStatus = "noMore";
}
}
})
.catch((err) => {
uni.hideLoading();
});
}
},
receive(item) {
//领取优惠券
receiveCoupons(item.id).then((res) => {
if (res.data.code == 200) {
uni.showToast({
title: "领取成功",
icon: "none",
});
} else {
uni.showToast({
title: res.data.message,
icon: "none",
});
}
});
// this.$set(this.list,0,this.list[0])
// console.log(this.list)
},
getTabbar() {
//获取顶级分类
// uni.showLoading({
// title: "加载中"
// })
let tabbar = {
category_id: 0,
name: "全部",
parent_id: 0,
category_path: "|0|",
goods_count: 0,
category_order: 0,
list_show: 1,
image:
"https://wwwyinbeicn.oss-cn-beijing.aliyuncs.com/yinbeistore/normal/FF468285411041E1AE5C36DAD1161AE4.png",
};
getCategoryIndexData().then((res) => {
console.log(res);
this.categoryIndexData.push(tabbar, ...res.data.result);
});
},
loadMore() {
if (this.loadStatus != "noMore") {
this.params.pageNumber++;
this.getAllCoupons();
}
},
setCat(type) {
this.tabIndex = type;
// this.searchStore();
},
ontabchange(e) {
this.tabIndex = e.detail.current;
if (e.detail.current > 3) {
this.currentLeft = (e.detail.current - 3) * 90;
} else {
this.currentLeft = 0;
}
// this.searchStore();
},
},
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: "/pages/cart/coupon/couponIntro",
});
},
};
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss" scoped>
.coupon-center {
height: 100%;
.list-scroll-content {
position: relative;
width: 100%;
display: flex;
white-space: nowrap;
align-items: center;
justify-content: space-between;
align-items: center;
background-color: $main-color;
color: #ffffff;
.tab-item {
width: 160rpx;
height: 80rpx;
line-height: 60rpx;
text-align: center;
display: inline-block;
}
.active {
border-bottom: 2px solid #ffffff;
broder-width: 60rpx;
font-size: 30rpx;
font-weight: 700;
padding-bottom: 4rpx;
}
}
.swiper-box {
height: 100%;
.scroll-v {
height: 100%;
}
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
height: 40rpx;
background-color: $bg-color;
position: absolute;
border-radius: 50%;
z-index: 111;
}
.circle-top {
top: -20rpx;
right: -20rpx;
}
.circle-bottom {
bottom: -20rpx;
right: -20rpx;
}
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
background-color: #ffffff;
overflow: hidden;
position: relative;
> view:nth-child(1) {
color: #666666;
margin-left: 20rpx;
line-height: 3em;
> view:nth-child(1) {
color: #ff6262;
font-size: 30rpx;
}
}
.receive {
color: #ffffff;
background-color: $main-color;
border-radius: 50%;
width: 86rpx;
height: 86rpx;
text-align: center;
margin-right: 30rpx;
vertical-align: middle;
padding-top: 8rpx;
position: relative;
z-index: 2;
}
.bg-quan {
width: 244rpx;
height: 244rpx;
border: 6rpx solid $main-color;
border-radius: 50%;
opacity: 0.1;
color: $main-color;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -60rpx;
}
}
}
}
}
</style>

148
pages/cart/coupon/couponDetail.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<view class="content">
<view class="body">
<view class="top-view">
<view class="title">{{coupon.title}}</view>
<view class="price"><text>￥</text>{{coupon.price | unitPrice}}</view>
<view class="text">满{{coupon.consumeThreshold}}元可用</view>
<view class="bg-quan">
券
</view>
<view class="jiao-1" :class="{'used-color':coupon.used_status!=0}">
<text class="text-1">{{coupon.used_status == 0?'新到':coupon.used_status_text}}</text>
</view>
</view>
<view class="bottom-view">
<view class="text">• 使用平台：{{
coupon.scopeType == 'ALL' && coupon.id == 'platform'
? "全平台"
: coupon.scopeType == "PORTION_CATEGORY"
? "仅限品类"
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
}}使用</view>
<view class="text">• 有效期至：{{coupon.endTime}}</view>
</view>
<button class="btn" @click="gostorePage" v-if="coupon.used_status==0">立即使用</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
customStyle: {
backgroundColor: this.lightColor,
},
coupon: {},
};
},
onLoad(option) {
this.coupon = JSON.parse(decodeURIComponent(option.item));
console.log(this.coupon);
},
methods: {
gostorePage() {
let id = this.coupon.storeId;
if (id) {
uni.navigateTo({
url: `/pages/product/shopPage?id=${id}`,
});
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
},
},
};
</script>
<style lang="scss">
page,
.content {
// background: $main-color;
height: 100%;
}
.body {
.top-view {
margin: 20rpx 20rpx 0;
height: 290rpx;
background: linear-gradient(
316deg,
$light-color 2%,
$aider-light-color 98%
);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 20rpx;
padding: 60rpx 0;
.title {
font-size: 30rpx;
color: #ffee80;
}
.price {
font-size: 60rpx;
font-weight: 600;
color: #ffffff;
text {
font-size: 30rpx;
}
}
.text {
font-size: 24rpx;
color: #ffffff;
}
.bg-quan {
width: 244rpx;
height: 244rpx;
border: 6rpx solid #ffffff;
border-radius: 50%;
opacity: 0.3;
color: #ffffff;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -54rpx;
}
.jiao-1 {
background-color: #ffc71c;
width: 400rpx;
transform: rotate(45deg);
text-align: center;
position: absolute;
right: -130rpx;
color: #ffffff;
top: 0;
.text-1 {
margin-left: 68rpx;
font-size: 28rpx;
}
}
.used-color {
background-color: #ffc71c;
}
}
.bottom-view {
border-radius: 0 0 20rpx 20rpx;
background-color: #ffffff;
height: 580rpx;
padding: 50rpx 50rpx;
margin: 0 30rpx;
line-height: 2em;
color: #999;
}
.btn {
margin: 140rpx 20rpx;
}
}
</style>

59
pages/cart/coupon/couponIntro.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<view class="coupin-intro">
<view class="title">
1.优惠券的获取
</view>
<view class="mb-60">
通过活动赠送、客服补偿等获得(系统自动添加, 无需兑换);
</view>
<view class="title">
2.优惠券使用
</view>
<view>1）每张抵用券仅能使用一次，不找零，不退换，不兑换现金</view>
<view>2）单笔订单只能使用1张优惠券, 不支持同时使用多张, 用券后差额不找零, 不退回；</view>
<view>3）优惠券 (包括新用户券) 不能抵扣运费, 只能抵扣商品金额。特价商品不可使用优惠券, 与其他优惠不同享；</view>
<view>4）每张优惠券的使用条件请查看对应优惠券的使用说明；</view>
<view>5）请在有效期内使用优惠券, 未使用的优惠券过期后, 将自动作废；</view>
<view>6）每个用户仅限使用1张新用户专享优惠券, 同一帐号和手机号均视为同一用户；</view>
<view>7）用券前订单满88元即可包邮（港澳台地区需满500元包邮）；</view>
<view class="mb-60">8）使用抵用券抵扣部分的货款不开具发票</view>
<view class="title">3.优惠券失效</view>
<view>1）新用户券使用一张后其他新用户券失效, 取消订单后不返还；</view>
<view>2）使用优惠券的订单, 若产生退货, 优惠券均不退回, 退款金额按优惠后的小计金额退款；</view>
<view>3）参加满赠券活动获得的赠券,发生退货时,若订单中剩余商品不满足赠券条件,实物赠品需勾选退货并寄回,否则将从退款中扣减对应金额,客服审核通过退货申请后,所获赠券将会自动失效；</view>
<view>4）优惠券严禁出售或转让, 如经发现并证实的, 该券将予以失效处理；</view>
<view>5）如需了解更多, 请联系在线客服或拨打客服电话400-0000-000。</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.coupin-intro{
background-color: #fff;
color: #999999;
font-size: $font-sm;
padding: 30rpx;
border-top: 1px solid $border-color-light;
line-height: 2.5em;
.title{
font-size: $font-base;
font-weight: bold;
}
.mb-60{
margin-bottom: 60rpx;
}
}
</style>

378
pages/cart/coupon/index.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<div class="wrapper">
<div class="nomore" v-if="current === 0 && couponsList.length <= 0">
暂无优惠券
</div>
<div class="nomore" v-if="current === 1 && disabledCouponsList.length <= 0">
暂无优惠券
</div>
<view class="coupon-item" v-for="(item, index) in couponsList" :key="index" v-if="item.memberCouponStatus == 'NEW'">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view>
<span v-if="item.couponType == 'DISCOUNT'">{{ item.discount }}折</span>
<span v-else>{{ item.price }}元</span>
</view>
<view>满{{ item.consumeThreshold | unitPrice }}元可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right">
<view>
<view v-if="item.scopeType">
<span v-if="item.scopeType == 'ALL' && item.id == 'platform'">全平台</span>
<span v-if="item.scopeType == 'PORTION_CATEGORY'">仅限品类</span>
<view v-else>{{ item.storeName == 'platform' ? '全平台' :item.storeName+'店铺' }}使用</view>
</view>
<view>有效期至：{{item.endTime}}</view>
</view>
<view class="receive" @click="clickWay(item)">
<text>立即</text><br />
<text>使用</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
</div>
</template>
<script>
import {
useCoupon,
getMemberCouponList,
getMemberCanUse,
} from "@/api/trade.js";
export default {
data() {
return {
current: 0,
list: [
{
name: "可用优惠券",
},
{
name: "不可用优惠券",
},
],
curNow: "",
couponsList: [],
disabledCouponsList: [],
params: {
memberCouponStatus: "NEW",
pageNumber: 1,
pageSize: 10,
scopeId: "",
storeId: "",
totalPrice: "",
// endTime: this.$u.timeFormat(new Date().getTime(),'yyyy-mm-dd hh:MM:ss')
},
way: [],
routerVal: "",
};
},
onReachBottom() {
this.pageNumber++;
this.getAllCouponsFun();
},
onLoad(val) {
this.routerVal = val;
this.params.scopeId = val.skuId;
this.params.storeId = val.storeId;
if (val.type) {
this.params.endTime = new Date().getTime();
}
},
mounted() {
uni.getStorage({
key: "totalPrice",
success: (res) => {
this.params.totalPrice = res.data;
this.getCoupons();
},
});
},
methods: {
// 获取优惠券数量
getCoupons() {
getMemberCanUse(this.params).then((res) => {
if (res.data.success) {
this.couponsList = res.data.result.records;
}
});
},
// 领取优惠券
async clickWay(coupon) {
useCoupon({
memberCouponId: coupon.id,
used: true,
way: this.routerVal.way,
}).then((res) => {
if (res.data.success) {
uni.navigateBack();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
},
submitback() {
uni.navigateBack();
},
// 获取商品优惠券
getAllCouponsFun() {},
sectionChange(index) {
this.curNow = index;
},
change(index) {
this.current = index;
},
},
};
</script>
<style scoped lang="scss">
.nomore {
margin-top: 20px;
text-align: center;
}
.selectBtn {
position: fixed;
bottom: 0;
background: #fff;
text-align: center;
width: 100%;
padding: 20rpx 0;
}
.wrapper {
background: #f9f9f9;
overflow: hidden;
}
.coupon-jd {
margin: 40rpx auto 0 auto;
width: 700rpx;
height: auto;
background-color: #ffffff;
display: flex;
.left {
padding: 0 30rpx;
width: 200rpx;
background-color: $aider-light-color;
text-align: center;
font-size: 28rpx;
color: #ffffff;
.sum {
margin-top: 50rpx;
font-weight: bold;
font-size: 32rpx;
.num {
font-size: 60rpx;
}
}
.type {
margin-bottom: 50rpx;
font-size: 24rpx;
}
}
.right {
padding: 20rpx 20rpx 0;
font-size: 28rpx;
.top {
border-bottom: 2rpx dashed $u-border-color;
.title {
margin-right: 60rpx;
line-height: 40rpx;
.tag {
padding: 4rpx 20rpx;
background-color: $aider-light-color;
border-radius: 20rpx;
color: #ffffff;
font-weight: bold;
font-size: 24rpx;
margin-right: 10rpx;
}
}
.bottom {
display: flex;
margin-top: 20rpx;
align-items: center;
justify-content: space-between;
margin-bottom: 10rpx;
.date {
font-size: 20rpx;
flex: 1;
}
}
}
.tips {
width: 100%;
line-height: 50rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
.transpond {
margin-right: 10rpx;
}
.explain {
display: flex;
align-items: center;
}
.particulars {
width: 30rpx;
height: 30rpx;
box-sizing: border-box;
padding-top: 8rpx;
border-radius: 50%;
background-color: $u-type-info-disabled;
text-align: center;
}
}
}
}
.immediate-use {
height: auto;
padding: 0 20rpx;
font-size: 24rpx;
text-align: center;
width: 160rpx;
margin: 20rpx 0;
border-radius: 40rpx;
line-height: 40rpx;
color: $aider-light-color;
border: 2rpx solid $aider-light-color;
}
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
height: 40rpx;
background-color: $bg-color;
position: absolute;
border-radius: 50%;
z-index: 111;
}
.circle-top {
top: -20rpx;
right: -20rpx;
}
.circle-bottom {
bottom: -20rpx;
right: -20rpx;
}
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
background-color: #ffffff;
overflow: hidden;
position: relative;
> view:nth-child(1) {
color: #666666;
margin-left: 20rpx;
line-height: 3em;
> view:nth-child(1) {
color: #ff6262;
font-size: 30rpx;
}
}
.receive {
color: #ffffff;
background-color: $main-color;
border-radius: 50%;
width: 86rpx;
height: 86rpx;
text-align: center;
margin-right: 30rpx;
vertical-align: middle;
padding-top: 8rpx;
position: relative;
z-index: 2;
}
.bg-quan {
width: 244rpx;
height: 244rpx;
border: 6rpx solid $main-color;
border-radius: 50%;
opacity: 0.1;
color: $main-color;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -60rpx;
}
}
}
</style>

430
pages/cart/coupon/myCoupon.vue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<view class="b-content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="tabClick(index)"><text :class="{ current: tabCurrentIndex === index }">{{
item.text
}}</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.nomsg"></empty>
<!-- 数据 -->
<view v-if="tabItem.dataList && coupon" class="coupon-item" :class="{ 'coupon-used': tabIndex != 0 }" v-for="(coupon, index) in tabItem.dataList" :key="index">
<view class="left">
<view class="wave-line">
<view class="wave" v-for="(item, index) in 12" :key="index"></view>
</view>
<view class="msg">
<view class="price" v-if="coupon.couponType == 'DISCOUNT'">{{ coupon.discount }}折</view>
<view class="price" v-else>{{ coupon.price }}元</view>
<!-- <view class="price" v-if="coupon.couponType == 'PRICE'">￥{{ coupon.price | unitPrice }}</view> -->
<!-- <view class="price" v-if="coupon.couponType == 'DISCOUNT'">￥{{ coupon.couponDiscount }}</view> -->
<view class="sub-price">满{{ coupon.consumeThreshold | unitPrice }}可用</view>
</view>
<view class="circle circle-top"></view>
<view class="circle circle-bottom"></view>
</view>
<view class="right" v-if="coupon">
<view class="content">
<view class="title-1">{{ coupon.title }}</view>
<view class="title-2">使用平台：{{
coupon.scopeType == 'ALL' && coupon.id == 'platform'
? "全平台"
: coupon.scopeType == "PORTION_CATEGORY"
? "仅限品类"
: coupon.storeName == 'platform' ? '全平台' :coupon.storeName+''
}}使用</view>
<view v-if="coupon.endTime">{{
coupon.endTime
}}</view>
<view @click="couponDetail(coupon)">详细说明
<u-icon style="float: right; margin-top: 10rpx" name="arrow-right"></u-icon>
</view>
</view>
<view class="jiao-1" v-if="tabIndex == 0">
<text class="text-1">新到</text>
<text class="text-2" v-if="coupon.used_status == 1">将过期</text>
</view>
<image class="no-icon" v-if="tabIndex == 1" src="@/static/img/used.png"></image>
<image class="no-icon" v-if="tabIndex == 2" src="@/pages/floor/imgs/overdue.png"></image>
<view class="receive" v-if="tabIndex == 0" @click="nowUse(coupon)">
<text>立即</text><br />
<text>使用</text>
</view>
<view class="bg-quan"> 券 </view>
</view>
</view>
<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { getMemberCoupons } from "@/api/members.js";
export default {
data() {
return {
tabCurrentIndex: 0,
navList: [
{
text: "未使用",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "NEW",
pageNumber: 1,
pageSize: 10,
status: 1,
},
nomsg: false,
},
{
text: "已使用",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "USED",
pageNumber: 1,
pageSize: 10,
status: 2,
},
nomsg: false,
},
{
text: "已过期",
loadStatus: "more",
dataList: [],
params: {
memberCouponStatus: "EXPIRE",
pageNumber: 1,
pageSize: 10,
status: 3,
},
nomsg: false,
},
],
couponList: [],
};
},
onNavigationBarButtonTap() {
uni.navigateTo({
url: "/pages/cart/coupon/couponIntro",
});
},
onLoad() {
// this.tabCurrentIndex = 0;
this.getData();
},
onPullDownRefresh() {
let index = this.tabCurrentIndex;
this.navList[index].params.pageNumber = 1;
this.navList[index].dataList = [];
this.getData();
},
watch: {
tabCurrentIndex(val) {
if (this.navList[val].dataList.length == 0) this.getData();
},
},
methods: {
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
// this.loadData();
},
getData() {
//读取优惠券
uni.showLoading({
title: "加载中",
});
let index = this.tabCurrentIndex;
getMemberCoupons(this.navList[index].params).then((res) => {
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
let data = res.data.result.records;
if (data.length == 0) {
if (res.data.pageNumber == 1) {
this.navList[index].nomsg = true;
} else {
this.navList[index].loadStatus = "noMore";
}
} else if (data.length < 10) {
this.navList[index].loadStatus = "noMore";
this.navList[index].dataList.push(...data);
} else {
this.navList[index].dataList.push(...data);
}
}
uni.hideLoading();
});
},
changeTab(e) {
this.tabCurrentIndex = e.target.current;
},
loadData() {
let index = this.tabCurrentIndex;
if (this.navList[index].loadStatus != "noMore") {
this.navList[index].params.pageNumber++;
this.getData();
}
},
nowUse(item) {
console.log(item)
return
//立即使用
if (item.storeId) {
uni.navigateTo({
url: `/pages/product/shopPage?id=${item.storeId}`,
});
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
},
couponDetail(item) {
uni.navigateTo({
url:
"/pages/cart/coupon/couponDetail?item=" +
encodeURIComponent(JSON.stringify(item)),
});
},
},
};
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss">
$item-color: #fff;
.b-content {
background: $page-color-base;
height: 100%;
}
.swiper-box {
height: calc(100% - 40px);
}
.list-scroll-content {
height: 100%;
width: 100%;
.coupon-item {
display: flex;
align-items: center;
height: 220rpx;
margin: 20rpx;
.left {
height: 100%;
width: 260rpx;
background-color: $light-color;
position: relative;
.msg {
color: $font-color-white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 40rpx;
view:nth-child(1) {
font-weight: bold;
font-size: 60rpx;
}
view:nth-child(2) {
font-size: $font-sm;
}
}
.wave-line {
height: 220rpx;
width: 8rpx;
position: absolute;
top: 0;
left: 0;
background-color: $light-color;
overflow: hidden;
.wave {
width: 8rpx;
height: 16rpx;
background-color: #ffffff;
border-radius: 0 16rpx 16rpx 0;
margin-top: 4rpx;
}
}
.circle {
width: 40rpx;
height: 40rpx;
background-color: $bg-color;
position: absolute;
border-radius: 50%;
z-index: 111;
}
.circle-top {
top: -20rpx;
right: -20rpx;
}
.circle-bottom {
bottom: -20rpx;
right: -20rpx;
}
}
.right {
display: flex;
justify-content: space-between;
align-items: center;
width: 450rpx;
font-size: $font-sm;
height: 100%;
background-color: #ffffff;
overflow: hidden;
position: relative;
.content {
color: #666666;
margin-left: 20rpx;
line-height: 2em;
> view:nth-child(1) {
color: #ff6262;
font-size: 30rpx;
}
.title-1,
.title-2,
.title-3 {
font-size: 25rpx;
}
}
.receive {
color: #ffffff;
background-color: $main-color;
border-radius: 50%;
width: 86rpx;
height: 86rpx;
text-align: center;
margin-right: 48rpx;
vertical-align: middle;
padding-top: 8rpx;
position: relative;
z-index: 2;
}
.jiao-1 {
background-color: #ffc71c;
width: 400rpx;
transform: rotate(45deg);
text-align: center;
position: absolute;
color: #ffffff;
right: -130rpx;
top: 0;
.text-1 {
margin-left: 68rpx;
font-size: 28rpx;
}
.text-2 {
margin-left: 68rpx;
font-size: 28rpx;
}
}
.no-icon {
border-radius: 50%;
width: 86rpx;
height: 86rpx;
margin-right: 48rpx;
position: relative;
z-index: 2;
}
.bg-quan {
width: 244rpx;
height: 244rpx;
border: 6rpx solid $main-color;
border-radius: 50%;
opacity: 0.1;
color: $main-color;
text-align: center;
padding-top: 30rpx;
font-size: 130rpx;
position: absolute;
right: -54rpx;
bottom: -60rpx;
}
}
}
.coupon-used {
.left {
background-color: #dddddd;
.wave-line {
background-color: #dddddd;
}
}
.right {
color: #cccccc;
.content {
color: #cccccc;
> view:nth-child(1) {
color: #cccccc;
}
}
.bg-quan {
border: 6rpx solid #cccccc;
color: #cccccc;
}
}
}
}
.navbar {
display: flex;
height: 80rpx;
padding: 0 5px;
background: #fff;
color: $light-color;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
height: 100%;
font-size: 26rpx;
color: $light-color;
position: relative;
text-align: center;
text {
line-height: 80rpx;
}
.current {
font-weight: bold;
font-size: 28rpx;
&:after {
content: "";
position: absolute;
bottom: 10rpx;
left: 108rpx;
width: 30rpx;
border-bottom: 2px solid $light-color;
}
}
}
}
</style>

0
pages/cart/payment/error.vue Normal file
View File

466
pages/cart/payment/payOrder.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<div class="wrapper">
<div class="box">
<div class="block block-1">
<image class="img" src="@/pages/cart/static/pay.png" />
<p class="ptips">收银台</p>
<p class="ptips">剩余支付时间：
<u-count-down :show-days="false" :show-border="true" font-size="28" color="#008ffa"
border-color="#008ffa" ref="uCountDown" :timestamp="autoCancel"></u-count-down>
</p>
<p class="ptips">
支付金额
<span>¥{{ cashierParams.price | unitPrice }}</span>
</p>
</div>
</div>
<div class="__pay_form__">
</div>
<div class="block-4" v-if="cashierParams.price > 0">
<div class="payItem">支付方式</div>
<div class="payItem" v-for="(item, index) in payList" :key="index">
<u-row class="row">
<div class="col1" @click="awaitPay(item, index)" size="100" style="text-align:left;">
<div v-if="item == 'ALIPAY'">
<u-icon class="method_icon" name="zhifubao-circle-fill" color="#008ffa" size="80"></u-icon>
<span class="method_name">支付宝</span>
</div>
<div v-if="item == 'WECHAT'">
<u-icon class="method_icon" name="weixin-circle-fill" color="#00c98b" size="80"></u-icon>
<span class="method_name">微信</span>
</div>
<div v-if="item == 'WALLET'">
<u-icon class="method_icon" name="red-packet-fill" color="#dd6161" size="80"></u-icon>
<span class="method_name">余额支付(当前余额：¥{{ walletValue | unitPrice }})</span>
</div>
</div>
<div class="col3" @click="awaitPay(item)" textAlign="right">
<u-icon size="26" color="#b1b1b1" name="arrow-right"></u-icon>
</div>
</u-row>
</div>
</div>
</div>
</template>
<script>
import * as API_Trade from "@/api/trade";
export default {
data() {
return {
//路径传参
routerVal: "",
//收银台参数
cashierParams: "",
//支付方式集合
payList: "",
//支付sn
sn: "",
//订单类型
orderType: "",
//支付异常
exception: {},
//支付表单
payForm: {},
//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
paymentType: "",
// 支付客户端 APP/NATIVE/JSAPI/H5
paymentClient: "",
//余额
walletValue: 0.0,
// 支付倒计时
autoCancel: 0,
};
},
onLoad(val) {
this.routerVal = val;
//初始化参数
// #ifdef APP-PLUS
this.paymentType = "APP";
this.paymentClient = "APP";
//#endif
// #ifdef MP-WEIXIN
this.paymentType = "WECHAT_MP";
this.paymentClient = "MP";
//#endif
// #ifdef H5
this.paymentType = "H5";
//如果是微信浏览器，则使用公众号支付，否则使用h5，
// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
//#endif
},
onBackPress(e) {
if (e.from == "backbutton") {
uni.redirectTo({
url: "/pages/order/myOrder?status=0",
});
return true; //阻止默认返回行为
}
},
mounted() {
this.cashierData();
},
methods: {
navigateTo(url) {
uni.navigateTo({
url,
});
},
// 获取收银详情
cashierData() {
let parms = {};
if (this.routerVal.recharge_sn) {
this.sn = this.routerVal.recharge_sn;
this.orderType = "RECHARGE";
} else if (this.routerVal.trade_sn) {
this.sn = this.routerVal.trade_sn;
this.orderType = "TRADE";
} else {
this.sn = this.routerVal.order_sn;
this.orderType = "ORDER";
}
parms.sn = this.sn;
parms.orderType = this.orderType;
parms.clientType = this.paymentType;
API_Trade.getCashierData(parms).then((res) => {
this.cashierParams = res.data.result;
// #ifdef MP-WEIXIN
this.payList = res.data.result.support.filter((item) => {
return item != "ALIPAY";
});
// #endif
// #ifndef MP-WEIXIN
this.payList = res.data.result.support;
// #endif
this.walletValue = res.data.result.walletValue;
this.autoCancel =
(res.data.result.autoCancel - new Date().getTime()) / 1000;
});
},
awaitPay(payment){
this.$u.debounce(this.pay(payment), 3000)
},
//订单支付
async pay(payment) {
// 支付编号
const sn = this.sn;
// 交易类型【交易号|订单号】
const orderType = this.orderType;
const clientType = this.paymentType;
let params = {
sn,
orderType,
clientType,
};
//支付方式 WECHAT/ALIPAY
const paymentMethod = payment;
// 客户端类型 APP/NATIVE/JSAPI/H5
const paymentClient = this.paymentClient;
// #ifdef APP-PLUS
//APP pay
// 初始化支付签名
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
(signXml) => {
//如果支付异常
if (!signXml.data.success) {
uni.showModal({
content: signXml.data.message,
showCancel: false,
})
return;
}
let payForm = signXml.data.result;
console.log(payForm)
let paymentType = paymentMethod === "WECHAT" ? "wxpay" : "alipay";
uni.requestPayment({
provider: paymentType,
orderInfo: payForm,
success: (e) => {
console.log(e);
uni.showToast({
icon: "none",
title: "支付成功!",
});
uni.navigateTo({
url: "/pages/payment/success?paymentType=" +
paymentType +
"&payPrice=" +
this.cashierParams.price,
});
},
fail: (e) => {
console.log(e);
this.exception = e;
uni.showModal({
content: "支付失败,如果您已支付，请勿反复支付",
showCancel: false,
});
},
});
}
);
//APP pay
// #endif
//#ifdef H5
//H5 pay
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
(res) => {
let response = res.data;
//如果支付异常
if (!response.success) {
uni.showModal({
content: response.message,
showCancel: false,
})
return;
}
if (paymentMethod === "ALIPAY") {
document.write(response);
} else if (paymentMethod === "WECHAT") {
if (this.isWeiXin()) {
//微信公众号支付
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
response.result,
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
uni.showToast({
icon: "none",
title: "支付成功!",
});
uni.navigateTo({
url: "/pages/cart/payment/success?paymentMethod=" +
paymentMethod +
"&payPrice=" +
this.cashierParams.price,
});
} else {
uni.showModal({
content: "支付失败,如果您已支付，请勿反复支付",
showCancel: false,
});
}
}
);
} else {
window.location.href = JSON.parse(response.result).h5_url;
}
} else if (paymentMethod === "WALLET") {
uni.showToast({
title: response.message,
icon: "none",
});
if (response.success) {
uni.navigateTo({
url: "/pages/cart/payment/success?paymentMethod=" +
paymentMethod +
"&payPrice=" +
this.cashierParams.price,
});
}
}
}
);
//H5pay
// #endif
//#ifdef MP-WEIXIN
//微信小程序
await API_Trade.initiatePay(paymentMethod, paymentClient, params).then(
(res) => {
let response = res.data.result;
//如果支付异常
if (!res.data.success) {
uni.showModal({
content: res.data.message,
showCancel: false,
})
return;
}
if (paymentMethod === "WECHAT") {
uni.requestPayment({
provider: "wxpay",
appid: response.appid,
timeStamp: response.timeStamp,
nonceStr: response.nonceStr,
package: response.package,
signType: response.signType,
paySign: response.paySign,
success: (e) => {
console.log(e);
uni.showToast({
icon: "none",
title: "支付成功!",
});
uni.navigateTo({
url: "/pages/cart/payment/success?paymentMethod=" +
paymentType +
"&payPrice=" +
this.cashierParams.price,
});
},
fail: (e) => {
console.log(e);
this.exception = e;
uni.showModal({
content: "支付失败,如果您已支付，请勿反复支付",
showCancel: false,
});
},
});
} else {
uni.showToast({
icon: "none",
title: "支付成功!",
});
uni.navigateTo({
url: "/pages/cart/payment/success?paymentMethod=" +
paymentMethod +
"&payPrice=" +
this.cashierParams.price,
});
}
}
);
// #endif
},
isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
},
},
};
</script>
<style scoped lang="scss">
.method_icon {
vertical-align: middle;
}
.method_name {
font-size: 28rpx;
color: #999;
padding-left: 24rpx;
}
.row {
display: flex;
width: 100%;
}
/deep/ .u-row {
width: 100% !important;
display: flex;
justify-content: space-between !important;
}
.method_name,
.col1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col1 {
text-align: center;
flex: 99;
}
.col3 {
text-align: right;
flex: 1;
}
.payItem {
padding: 13px 25rpx;
border-top: 1px solid #f9f9f9;
line-height: 100rpx;
font-size: 36rpx;
color: #333;
}
.ptips {
font-size: 32rpx;
margin: 20rpx 0;
color: #333;
>span {
font-size: 40rpx;
color: #df5a52;
margin-left: 10rpx;
}
}
.img {
width: 392rpx !important;
height: 296rpx !important;
}
.wrapper {
min-height: 100vh;
height: auto;
background: #f9f9f9;
}
.block-4 {
background: #fff;
color: $u-tips-color;
>p {
padding: 8rpx;
}
}
.box {
background: #fff;
padding: 40rpx 0;
// justify-content: center; //这个是X轴居中
// align-items: center; //这个是 Y轴居中
}
.block {
text-align: center;
display: block;
width: 100%;
image {
width: 200rpx;
height: 200rpx;
}
}
.block-1 {
margin-top: 80rpx;
}
.btns {
margin: 0 20rpx;
}
</style>

411
pages/cart/payment/popup/goods.vue Normal file
View File

@@ -0,0 +1,411 @@
<template>
<div class="wrapper">
<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode" :mask-close-able="isClose" :mask="isMask" :border-radius="setup.radius" @close="closeMask()">
<!-- 商品 -->
<view class="goods-box bottom">
<view class="goods-header">
<view class="goods-img">
<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx" :src="selectedSpecImg ? selectedSpecImg : goodsDetail.thumbnail"></u-image>
</view>
<view class="goods-skus">
<!-- 有活动商品价格 -->
<view class="goods-price " v-if="goodsDetail.promotionPrice">
<span>
￥
<span class="goods-price-promotionShow goods-price-bigshow" v-if="goodsDetail.promotionPrice">{{ Fixed(goodsDetail.promotionPrice)[0] }}</span>
.{{ Fixed(goodsDetail.promotionPrice)[1] }}
<span></span>
</span>
<div class="promotion-box">
￥
<span class="goods-price-bigshow">{{
Fixed(goodsDetail.price)[0]
}}</span>
.{{ Fixed(goodsDetail.price)[1] }}
<span></span>
</div>
</view>
<!-- 正常商品的价格 -->
<view class="goods-price" v-else>
￥
<span class="goods-price-bigshow">{{
Fixed(goodsDetail.price)[0]
}}</span>
.{{ Fixed(goodsDetail.price)[1] }}
<span></span>
</view>
<view class="goods-check-skus">
已选
<span class="goods-check-skus-name">
{{ selectName }}
<span>，{{ num }}个</span>
</span>
</view>
</view>
</view>
<!-- 商品信息 -->
<view class="goods-skus-box">
<!-- 规格 -->
<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
<view class="skus-view-list">
<view class="view-class-title">{{ spec.name }}</view>
<view :class="{ active: spec_val.id == currentSelceted[specIndex] }" class="skus-view-item" v-for="(spec_val, spec_index) in spec.values" :key="spec_index"
@click="handleClickSpec(spec, specIndex, spec_val)">{{ spec_val.value }}</view>
</view>
</view>
<!-- 数量 -->
<view class="goods-skus-number">
<view class="view-class-title">数量</view>
<u-number-box :bg-color="numberBox.bgColor" :color="numberBox.color" :input-width="numberBox.width" :input-height="numberBox.height" :size="numberBox.size" :min="1" v-model="num">
</u-number-box>
</view>
</view>
<!-- 按钮 -->
<view class="btns">
<view class="box-btn card" v-if="buyType !='PINTUAN'" @click="addToCartOrBuy('cart')">加入购物车</view>
<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即购买</view>
</view>
</view>
</u-popup>
</div>
</template>
<script>
import * as API_trade from "@/api/trade.js";
import setup from "./popup";
export default {
data() {
return {
setup,
num: 1,
// 步进器的大小尺寸单位是 rpx
numberBox: {
width: "50",
height: "50",
size: "22",
color: "#333",
bgColor: "#fff",
},
selectName: "", //选中商品的昵称
selectSkuList: "", //选中商铺sku,
selectedSpecImg: "", //选中的图片路径
buyType: "", //用于存储促销，拼团等活动类型
parentOrder: "", //父级拼团活动的数据 - 如果是团员则有数据
formatList: [],
currentSelceted: [],
skuList: "",
isMask:false, //是否显示遮罩层
isClose:false, //是否可以点击遮罩关闭
};
},
props: [
"goodsDetail",
"buyMask",
"selectedSku",
"goodsSpec",
"addr",
],
watch: {
buyType: {
handler(val) {
this.buyType = val;
},
immediate: true,
},
selectSkuList: {
handler(val, oldval) {
this.$emit("changed", val);
},
deep: true,
},
},
methods: {
// 格式化金钱 1999 --> [1999,00]
Fixed(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
closeMask() {
this.$emit("closeBuy", false);
},
/**点击规格 */
handleClickSpec(val, index, specValue) {
this.$set(this.currentSelceted, index, specValue.id);
let selectedSkuId = this.goodsSpec.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== "images");
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValueId !== this.currentSelceted[n]) {
matched = false;
return;
}
}
if (matched) {
return i;
}
});
this.selectSkuList = {
spec: {
specName: val.name,
specValue: specValue.value,
},
data: this.goodsDetail,
};
this.selectName = specValue.value;
this.$emit("handleClickSku", selectedSkuId.skuId,this.goodsDetail.id);
},
/**
* 添加到购物车或购买
*/
addToCartOrBuy(val) {
if (!this.selectSkuList) {
uni.showToast({
title: "请选择规格商品",
icon: "none",
});
return;
}
let data = {
skuId: this.goodsDetail.id,
num: this.num,
};
if (val == "cart") {
API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) {
uni.showToast({
title: "商品已添加到购物车",
icon: "none",
});
this.$emit("queryCart");
this.closeMask();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
return false;
}
});
} else {
// 判断是否拼团商品
if (this.buyType) {
data.cartType = "PINTUAN";
} else {
data.cartType = "BUY_NOW";
}
API_trade.addToCart(data).then((res) => {
if (res.data.code == 200) {
uni.navigateTo({
url: `/pages/order/fillorder?way=${data.cartType}&addr=${
this.addr.id || ''
}&parentOrder=${encodeURIComponent(
JSON.stringify(this.parentOrder)
)}`,
});
}
});
}
},
formatSku(list) {
// 格式化数据
let arr = [{}];
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
let id = spec.specNameId;
let name = spec.specName;
let values = {
id: spec.specValueId,
value: spec.specValue,
quantity: item.quantity,
};
if (name === "images") {
return;
}
arr.forEach((arrItem, arrIndex) => {
if (
arrItem.name == name &&
arrItem.values &&
!arrItem.values.find((i) => i.id === values.id)
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
id: id,
name: name,
values: [values],
});
}
});
});
});
arr.shift();
this.formatList = arr;
list.forEach((item) => {
if (item.skuId === this.goodsDetail.id) {
item.specValues
.filter((i) => i.specName !== "images")
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValueId;
this.selectName = value.specValue;
this.selectSkuList = {
spec: value,
data: this.goodsDetail,
};
});
}
});
this.skuList = list;
},
},
mounted() {
this.formatSku(this.goodsSpec);
},
};
</script>
<style lang="scss" scoped>
@import "./popup.scss";
.buy {
background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
.card {
background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
/deep/.u-icon-plus,
.u-icon-minus,
.u-icon-disabled {
height: 30rpx !important;
background: #fff !important;
}
.goods-skus-number {
justify-content: space-between;
display: flex;
}
/deep/ .uni-scroll-view {
overflow: hidden !important;
}
.active {
background: $jd-light-color !important;
border: 2rpx solid $jd-color;
font-weight: bold;
color: $jd-color !important;
box-sizing: border-box;
}
.goods-skus-box {
overflow-y: auto;
height: 610rpx;
// #ifdef MP-WEIXIN
height: 570rpx;
// #endif
margin-bottom: 10rpx;
}
.goods-skus-view {
overflow: hidden;
.skus-view-list {
> .skus-view-item {
flex: 1;
padding: 0 36rpx;
overflow: hidden;
height: 60rpx;
line-height: 60rpx;
float: left;
text-align: center;
margin-left: 24rpx;
margin-bottom: 20rpx;
font-size: 22rpx;
color: #262626;
background: #f2f2f2;
border-radius: 30rpx;
}
}
}
.goods-header {
height: 200rpx;
display: flex;
align-items: center;
margin-bottom: 36rpx;
}
.goods-box {
padding: 50rpx 36rpx 0 36rpx;
}
.goods-skus {
padding: 0 20rpx;
}
.goods-price {
color: $jd-color;
line-height: 80rpx;
display: flex;
}
.promotion-box {
line-height: 1;
display: flex;
align-items: center;
text-decoration: line-through;
color: #999;
margin-left: 10rpx;
/deep/ span {
font-size: 30rpx;
}
}
.promotion {
font-size: 30rpx;
}
.goods-price-promotionShow {
font-size: 48rpx;
}
.goods-check-skus {
font-size: 24rpx;
color: #999;
> .goods-check-skus-name {
margin-left: 4rpx;
}
> span {
color: #333;
}
}
</style>

8
pages/cart/payment/popup/popup.js Normal file
View File

@@ -0,0 +1,8 @@
export default {
height:"1000rpx", //弹出层高度
mode:"bottom", //弹出层位置
radius:"32", //圆角 rpx,
close:false //能否点击遮罩退出
}

37
pages/cart/payment/popup/popup.scss Normal file
View File

@@ -0,0 +1,37 @@
.view-class-title {
font-size: 26rpx;
color: #262626;
font-weight: 700;
height: 80rpx;
line-height: 80rpx;
}
.confirmBtn {
width: 90%;
}
.confirmBtn,
.box-btn {
line-height: 80rpx;
height: 80rpx;
background: $jd-color;
color: #fff;
border-radius: 200px;
text-align: center;
margin: 5rpx auto;
}
.btns {
display: flex;
width: 100%;
margin: 0 auto;
}
.goods-price-bigshow {
font-size: 48rpx;
font-weight: bold;
}
.box-btn {
flex: 1;
margin: 0 10rpx;
}

319
pages/cart/payment/shareOrderGoods.vue Normal file
View File

@@ -0,0 +1,319 @@
<template>
<view class="wrapper">
<div class='goods' v-if="selectedGoods">
<image class="goods-image" :src="selectedGoods.thumbnail" alt="">
<p class="goodsName">{{selectedGoods.goodsName}}</p>
<div class="goodsPrice">{{(selectedGoods.promotionPrice || selectedGoods.price ) | unitPrice('￥')}}</div>
</div>
<div>
<div class="tips">
<span v-if="master.toBeGroupedNum">
还差<span class="num">{{master.toBeGroupedNum || 0}}</span>人，赶快邀请好友拼单吧
</span>
<span v-if="isBuy &&!master.toBeGroupedNum >0">
已成功拼团
</span>
</div>
<div v-if="isMaster && !isOver">
<div class="share-user" v-if="master.toBeGroupedNum" @click="share()">
邀请好友拼团
</div>
<div class="home" @click="handleClickHome()">
去首页逛逛
</div>
</div>
<div v-if="!isMaster && !isOver && !isBuy">
<div class="share-user" @click="toBuy">
参与拼团
</div>
</div>
<div v-if="!isMaster && !isOver && isBuy">
<div class="share-user disabled">
已购买该商品
</div>
</div>
<div v-if="isOver">
<!-- <div class="share-user disabled">
拼团已结束
</div> -->
<div class="home" @click="handleClickHome()">
去首页逛逛
</div>
</div>
</div>
<!-- 倒计时 -->
<div class="count-down" v-if="!isOver">
<u-count-down bg-color="#ededed" :hide-zero-day="true" @end="isOver" :timestamp="timeStamp"></u-count-down>
</div>
<div class="user-list" v-if="data.pintuanMemberVOS">
<div class="user-item" v-for="(item,index) in data.pintuanMemberVOS" :key="index">
<span class="master" v-if="item.orderSn == ''">团长</span>
<image class="img" :src="item.face" alt="">
</div>
</div>
<popupGoods :addr="addr" ref="popupGoods" :buyMask="maskFlag" @closeBuy="closePopupBuy" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" v-if="goodsDetail.id " @handleClickSku="getGoodsDetail" />
<shares @close="closeShare" :link="'/pages/cart/payment/shareOrderGoods?sn='+this.routers.sn+'&sku='+this.routers.sku+'&goodsId='+this.routers.goodsId" type="pintuan"
:thumbnail="data.promotionGoods.thumbnail" :goodsName="data.promotionGoods.goodsName" v-if="shareFlage " />
</view>
</template>
<script>
import { getGoods } from "@/api/goods.js";
import { getPinTuanShare } from "@/api/order";
import shares from "@/components/m-share/index";
import storage from "@/utils/storage.js";
import popupGoods from "./popup/goods"; //购物车商品的模块
export default {
data() {
return {
addr: {
id: "",
},
maskFlag: false, //商品弹框
timeStamp: 0,
shareFlage: false,
data: "",
isMaster: true,
selectedGoods: "", //选择的商品规格昵称
routers: "", //传参数据
goodsDetail: "", //商品详情
goodsSpec: "",
master: "", // 团长
PromotionList: "", //优惠集合
isGroup: false, //是否拼团
isOver: false, //是否结束活动
isBuy: false, //当前用户是是否购买
};
},
components: {
shares,
popupGoods,
},
watch: {
isGroup(val) {
if (val) {
let timer = setInterval(() => {
this.$refs.popupGoods.buyType = "PINTUAN";
clearInterval(timer);
}, 100);
} else {
this.$refs.popupGoods.buyType = "";
}
},
},
onLoad(options) {
this.routers = options;
},
mounted() {
this.init(this.routers.sn, this.routers.sku);
},
methods: {
closeShare() {
this.shareFlage = false;
},
// 这里的话得先跳到商品详情才能购买商品
toBuy() {
this.maskFlag = true;
this.$refs.popupGoods.parentOrder = {
...this.master,
orderSn: this.routers.sn,
};
console.log(this.$refs.popupGoods.parentOrder);
this.$refs.popupGoods.isMask = true;
this.$refs.popupGoods.isClose = true;
this.$refs.popupGoods.buyType = "PINTUAN";
},
// 分享
share() {
this.shareFlage = true;
},
closePopupBuy(val) {
this.maskFlag = false;
},
// 实例化本页面
async init(sn, sku) {
let res = await getPinTuanShare(sn, sku);
if (res.data.success) {
this.data = res.data.result;
this.selectedGoods = res.data.result.promotionGoods;
let endTime = Date.parse(
res.data.result.promotionGoods.endTime.replace(/-/g, "/")
);
// 获取当前剩余的拼团商品时间
let timeStamp = Date.parse(new Date(endTime)) / 1000;
// 获取当前时间时间戳
let dateTime = Date.parse(new Date()) / 1000;
this.timeStamp = parseInt(timeStamp - dateTime);
this.timeStamp <= 0 ? (this.isOver = true) : (this.isOver = false);
// 获取剩余拼团人数
this.master =
res.data.result.pintuanMemberVOS.length != 0 &&
res.data.result.pintuanMemberVOS.filter((item) => {
return item.orderSn == "";
})[0];
// 获取当前是否是拼团本人
if (
storage.getUserInfo(this.routers.sku, this.routers.goodsId).id ==
this.master.memberId
) {
this.isMaster = true;
} else {
this.isMaster = false;
// 获取商品详情
this.getGoodsDetail(this.routers.sku, this.routers.goodsId);
}
// 获取当前商品是否已经购买
if (storage.getUserInfo().id) {
console.log(storage.getUserInfo().id);
let isBuy = res.data.result.pintuanMemberVOS.filter((item) => {
return item.memberId == storage.getUserInfo().id;
});
isBuy.length != 0 ? (this.isBuy = true) : (this.isBuy = false);
}
}
},
// 获取商品详情
getGoodsDetail(id, goodsId) {
uni.showLoading({
title: "加载中",
mask: true,
});
getGoods(id, goodsId).then((response) => {
this.goodsDetail = response.data.result.data;
this.selectedGoods = response.data.result.data;
this.goodsSpec = response.data.result.specs;
uni.hideLoading();
this.PromotionList = response.data.result.promotionMap;
// 判断是否拼团活动 如果有则显示拼团活动信息
this.PromotionList &&
Object.keys(this.PromotionList).forEach((item) => {
if (item.indexOf("PINTUAN") == 0) {
this.isGroup = true;
}
});
});
},
handleClickHome() {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
},
},
};
</script>
<style lang="scss" scoped>
page {
background: #fff;
}
.over {
margin: 10% 0;
}
.goods {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
text-align: center;
width: 80%;
margin: 0 auto;
}
.goods-image {
margin: 40rpx auto;
width: 400rpx;
height: 400rpx;
}
.goodsName {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 30rpx;
font-weight: bold;
}
.goodsPrice {
margin-top: 10rpx;
font-weight: bold;
font-size: 40rpx;
color: $main-color;
}
.master {
z-index: 99;
position: absolute;
top: 0;
left: 0;
background: $light-color;
padding: 0 8rpx;
border-radius: 10rpx;
color: #fff;
}
.user-item {
position: relative;
margin: 20rpx;
}
.count-down {
margin: 40rpx 0;
text-align: center;
}
.img {
border-radius: 50%;
border: 2rpx solid $light-color;
width: 100rpx;
height: 100rpx;
}
.user-list {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.tips {
margin-top: 10%;
text-align: center;
font-size: 40rpx;
font-weight: bold;
margin-bottom: 100rpx;
}
.num {
color: $main-color;
font-size: 60rpx;
margin: 0 10rpx;
}
.home,
.share-user {
height: 80rpx;
line-height: 80rpx;
text-align: center;
width: 80%;
margin: 30rpx auto 0 auto;
color: #fff;
border-radius: 0.4em;
}
.share-user {
background: $main-color;
}
.disabled {
background: rgba($main-color, $alpha: 0.2);
}
.home {
color: $main-color;
border: 2rpx solid $main-color;
}
</style>

304
pages/cart/payment/success.vue Normal file
View File

@@ -0,0 +1,304 @@
<template>
<div class="wrapper">
<div class="pay-wrapper">
<div class="pay-money">
￥{{ payPrice | unitPrice }}
</div>
<div class="pay-btns">
<div v-show="!from" @click="navigateTo('/pages/order/myOrder?status=0')">查看订单</div>
<div @click="navigateTo('/pages/tabbar/home/index', 'switch')">回到首页</div>
</div>
</div>
<div class="pay-box">
<div class="pay-tag-box">
<h2>订单支付成功!</h2>
<div class="pay-item">
<div>
支付方式：
</div>
<div>{{paymentMethod | paymentTypeFilter}}</div>
</div>
</div>
<!-- #ifdef MP-WEIXIN -->
<div class="subscribe flex">
<div>订阅订单状态</div>
<div>
<u-switch size="50" :disabled="checked" :active-color="activeColor" @change="changeStatus" v-model="checked"></u-switch>
</div>
</div>
<!-- #endif -->
</div>
<div class="goods-recommend">--商品推荐--</div>
<div class="goods-list">
<div @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsList" :key="item_index">
<div class="goods-img">
<u-image :src="item.thumbnail" mode="aspectFill" height="350rpx" width="100%">
<u-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="goods-desc">
<div class="goods-title">
{{ item.goodsName }}
</div>
<div class="goods-bottom">
<div class="goods-price">￥{{ item.price | unitPrice }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getGoodsList } from "@/api/goods.js";
import { getWeChatMpMessage } from "@/api/message.js";
export default {
data() {
return {
checked: false,
paymentMethod: "",
from: "",
payPrice: 0,
goodsList: [],
activeColor:this.$mainColor,
params: {
pageSize: 12,
pageNumber: 0,
},
};
},
filters: {
paymentTypeFilter(val) {
switch (val) {
case "WECHAT":
return "微信";
case "ALIPAY":
return "支付宝";
case "WALLET":
return "余额支付";
default:
return "";
}
},
},
onLoad(options) {
this.paymentMethod = options.paymentMethod || "";
this.from = options.from || "";
this.payPrice = parseInt(options.payPrice) || 0;
//搜索商品
this.initGoods();
},
methods: {
changeStatus(val) {
if (val) {
this.sendMessage();
}
},
async initGoods() {
let goodsList = await getGoodsList(this.params);
this.goodsList.push(...goodsList.data.result.content);
},
sendMessage() {
//订阅消息
//#ifdef MP-WEIXIN
getWeChatMpMessage().then((res) => {
var message = res.data.result;
var templateid = message.map((item) => item.code);
uni.requestSubscribeMessage({
tmplIds: templateid,
success: (res) => {
for(let key in res){
if(res[key] == "reject"){
this.checked = false;
}
}
},
fail: (res) => {
uni.removeStorageSync("acceptSubscribeMessage");
this.checked = false;
},
});
});
//#endif
},
handleClick(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
navigateTo(url, type) {
if (type === "switch") {
uni.switchTab({
url,
});
} else {
uni.redirectTo({
url,
});
}
},
},
};
</script>
<style scoped lang="scss">
.subscribe {
justify-content: space-between;
align-items: center;
margin: 0 auto 40rpx auto;
padding: 0 20rpx 20rpx;
width: 80%;
}
.pay-btns {
display: flex;
width: 50%;
justify-content: space-between;
margin: 0 auto;
color: #fff;
> div {
padding: 6px 12px;
border: 1px solid #fff;
border-radius: 100px;
}
}
.pay-money {
line-height: 1;
font-size: 50rpx;
color: #fff;
margin-bottom: 100rpx;
}
.pay-item {
font-weight: bold;
margin: 32rpx 0;
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: rgba($color: $main-color, $alpha: 0.8);
}
.pay-box {
overflow: hidden;
}
.pay-tag-box {
width: 80%;
margin: 80rpx auto 40rpx auto;
padding: 20rpx;
border-radius: 20rpx;
background: rgba($color: $main-color, $alpha: 0.2);
> h2 {
margin-top: 20rpx;
font-size: 40rpx;
color: $main-color;
}
}
.pay-wrapper {
background-image: linear-gradient(90deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
height: 480rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.pay-box {
transform: translateY(-100rpx);
width: 100%;
background: #fff;
border-top-right-radius: 100rpx;
}
/**商品代码 */
$w_94: 94%;
.goods-recommend {
background: #f7f7f7;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
font-weight: bold;
}
.goods-list {
display: flex;
flex-wrap: wrap;
background: #f7f7f7;
}
.goods-item {
width: 50%;
margin-bottom: 10px;
border-radius: 0.4em;
overflow: hidden;
}
.goods-img {
position: relative;
margin: 0 auto;
// width: 158px;
width: $w_94;
height: 350rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
> img {
width: 100%;
height: 100%;
}
}
.goods-desc {
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
width: $w_94;
background: #fff;
padding: 8rpx 0 8rpx 8rpx;
margin: 0 auto;
> .goods-title {
font-size: 12px;
height: 70rpx;
display: -webkit-box;
font-weight: 500;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
> .goods-bottom {
display: flex;
font-weight: bold;
> .goods-price {
line-height: 2;
color: $main-color;
}
}
}
.goods-icon {
right: 10rpx;
top: 10rpx;
position: absolute;
}
</style>

BIN
pages/cart/static/pay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

28
pages/floor/empty.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<default-page v-if="type" :type="type" title="您的设备已断网" :isBtn="false" />
</template>
<script>
import defaultPage from '@/components/default-page/default-page.vue';
export default {
components: {
defaultPage
},
data() {
return {
type: undefined
}
},
onLoad(options) {
let pages = getCurrentPages();
if (pages.length) {
let route = pages[0].route;
}
this.type = options.type;
}
}
</script>
<style>
</style>

BIN
pages/floor/imgs/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 B

BIN
pages/floor/imgs/overdue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

141
pages/mine/aboutUs.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<view class="about-us">
<view class="box flex-center">
<image src="/static/logo.png" mode="scaleToFill"></image>
<view>lili商城</view>
</view>
<u-cell-group :border="false">
<!-- #ifdef APP-PLUS -->
<u-cell-item title="检查更新" @click="checkUpdate"></u-cell-item>
<!-- #endif -->
<u-cell-item title="证照信息" @click="
navigateTo('/pages/mine/help/tips?type=message')
"></u-cell-item>
<u-cell-item title="服务协议" @click="
navigateTo('/pages/mine/help/tips?type=user')
"></u-cell-item>
<u-cell-item title="隐私协议" :border-bottom="false" @click="
navigateTo('/pages/mine/help/tips?type=privacy')
"></u-cell-item>
<u-cell-item title="关于我们" :border-bottom="false" @click="
navigateTo('/pages/mine/help/tips?type=about')
"></u-cell-item>
</u-cell-group>
<view class="intro flex-center c-content">
<view>客服热线：15810610731</view>
<view>客服邮箱：lili@lili.com</view>
</view>
<view class="bottom flex-center">
<view @click="navigateTo('/pages/help/tips?type=user')">《lili商城用户协议》</view>
<view>CopyRight @ lili商城 </view>
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS
import APPUpdate, { getCurrentNo, getServerNo } from "@/plugins/APPUpdate";
import { getAppVersionList } from "@/api/message.js";
// #endif
export default {
data() {
return {
showUpdate: false,
version: "",
currentNo: 0,
params: {
pageNumber: 1,
pageSize: 5,
},
};
},
onLoad(options) {
// #ifdef APP-PLUS
let _this = this;
plus.runtime.getProperty(plus.runtime.appid, function (inf) {
var wgtVer = inf.version;
_this.currentVersion = wgtVer;
});
if (uni.getSystemInfoSync().platform === "android") {
this.params.type = 0;
} else {
this.params.type = 1;
}
// #endif
},
methods: {
async checkUpdate() {
// #ifdef APP-PLUS
let needUpdate = false;
getCurrentNo((res) => {
this.currentNo = res.versionCode;
});
let res = await getAppVersionList(this.params);
res.data.data.forEach((ele) => {
let versionDetail = ele.version.replace(/\./g, "");
if (versionDetail.length < this.currentNo.length) {
versionDetail = versionDetail.padEnd(this.currentNo.length, "0");
}
if (versionDetail > this.currentNo) {
needUpdate = true;
}
});
if (needUpdate) {
APPUpdate(true);
} else {
uni.showToast({
title: "已是最新版本！",
});
}
// #endif
},
navigateTo(url) {
uni.navigateTo({
url,
});
},
},
};
</script>
<style lang="scss" scoped>
.box {
width: 100%;
height: 242rpx;
image {
transform: scale(2.5);
width: 94rpx;
height: 94rpx;
}
view {
font-size: 30rpx;
margin-top: 25rpx;
}
}
.u-cell {
padding: 35rpx 20rpx;
height: 110rpx;
}
.intro {
color: #999999;
font-size: $font-sm;
margin-top: 20rpx;
border: none;
padding: 45rpx 0;
line-height: 2em;
}
.bottom {
:nth-child(1) {
color: $main-color;
font-size: 22rpx;
margin-bottom: 20rpx;
}
:last-child {
font-size: 20rpx;
color: $font-color-light;
}
margin-top: 110rpx;
}
</style>

358
pages/mine/address/add.vue Normal file
View File

@@ -0,0 +1,358 @@
<template>
<view class="add-address">
<div class="uForm">
<u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">
<view class="selectAddress" @click="clickUniMap">
选择收货地址
</view>
<u-form-item class="border" label="收货人" label-width="130" prop="name">
<u-input v-model="form.name" placeholder="请输入收货人姓名" />
</u-form-item>
<u-form-item label="手机号码" label-width="130" prop="mobile">
<u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入收货人手机号码" />
</u-form-item>
<u-form-item label="所在区域" label-width="130" prop="___path">
<u-input v-model="form.___path" type="select" @click="showPicker" placeholder="请选择所在地区" />
</u-form-item>
<u-form-item class="detailAddress" label="详细地址" label-width="130" prop="detail">
<u-input type="textarea" v-model="form.detail" maxlength="100" height="150" placeholder="街道楼牌号等" />
</u-form-item>
<u-form-item label="地址别名" label-width="130">
<u-input v-model="form.alias" placeholder="请输入地址别名" />
</u-form-item>
<u-checkbox-group shape="circle" size="30">
<u-checkbox :active-color="lightColor" v-model="form.isDefault">设为默认地址</u-checkbox>
</u-checkbox-group>
<div class="saveBtn" @click="save">保存</div>
</u-form>
<m-city :provinceData="list" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4"></m-city>
<uniMap v-if="mapFlage" @close="closeMap" @callback="callBackAddress" />
</div>
</view>
</template>
<script>
import { addAddress, editAddress, getAddressDetail } from "@/api/address.js";
import gkcity from "@/components/m-city/m-city.vue";
import uniMap from "./uniMap";
import permision from "@/js_sdk/wa-permission/permission.js";
export default {
components: {
"m-city": gkcity,
uniMap,
},
onShow() {
// 判断当前系统权限定位是否开启
},
methods: {
// 关闭地图
closeMap() {
this.mapFlage = false;
},
// 打开地图并访问权限
clickUniMap() {
// #ifdef APP-PLUS
if (plus.os.name == "iOS") {
// ios系统
permision.judgeIosPermission("location")
? (this.mapFlage = true)
: this.refuseMapOuther() ;
} else {
// 安卓
this.requestAndroidPermission(
"android.permission.ACCESS_FINE_LOCATION"
);
}
// #endif
// #ifndef APP-PLUS
this.mapFlage = true;
// #endif
},
// 如果拒绝权限 提示区设置
refuseMapOuther() {
uni.showModal({
title: "温馨提示",
content: "您已拒绝定位,请开启",
confirmText: "去设置",
success(res) {
if (res.confirm) {
//打开授权设置
// #ifndef MP-WEIXIN
uni.getSystemInfo({
success(res) {
if (res.platform == "ios") {
//IOS
plus.runtime.openURL("app-settings://");
} else if (res.platform == "android") {
//安卓
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass(
"android.content.Intent"
);
let mIntent = new Intent("android.settings.ACTION_SETTINGS");
main.startActivity(mIntent);
}
},
});
// #endif
}
},
});
},
// 获取安卓是否拥有地址权限
async requestAndroidPermission(permisionID) {
var result = await permision.requestAndroidPermission(permisionID);
if (result == 1) {
this.mapFlage = true;
} else {
this.refuseMapOuther();
}
},
callBackAddress(val) {
uni.showLoading({
title: "加载中",
});
if (val.regeocode && val) {
let address = val.regeocode;
this.form.detail = address.formatted_address; //地址详情
this.form.___path = val.data.result.name;
this.form.consigneeAddressIdPath = val.data.result.id; // 地址id分割
this.form.consigneeAddressPath = val.data.result.name; //地址名称， '，'分割
this.form.lat = val.latitude; //纬度
this.form.lon = val.longitude; //经度
uni.hideLoading();
}
this.mapFlage = !this.mapFlage;
},
save() {
this.$refs.uForm.validate((valid) => {
if (valid) {
let pages = getCurrentPages(); //获取页面栈
let beforePage = pages[pages.length - 2]; //上个页面
console.log(beforePage);
if (!this.form.id) {
delete this.form.___path;
addAddress(this.form).then((res) => {
if (res.data.success) {
if (this.routerVal.type == "order") {
uni.redirectTo({
url: `/pages/mine/address/address?way=${this.routerVal.way}`,
});
} else {
uni.redirectTo({
url: `/pages/mine/address/addressManage`,
});
}
}
});
} else {
delete this.form.___path;
delete this.form.updateBy;
delete this.form.updateTime;
editAddress(this.form).then((res) => {
if (res.data.success) {
uni.navigateTo({
url: `/${beforePage.route}`,
});
}
});
}
} else {
console.log("验证失败");
}
});
},
getpickerParentValue(e) {
this.form.consigneeAddressIdPath = [];
this.form.consigneeAddressPath = [];
let name = "";
e.forEach((item, index) => {
console.log(item);
if (item.id) {
this.form.consigneeAddressIdPath.push(item.id);
this.form.consigneeAddressPath.push(item.localName);
name += item.localName;
this.form.___path = name;
}
if (index == e.length - 1) {
//如果是最后一个
let _town = item.children.filter((_child) => {
return _child.id == item.id;
});
this.form.lat = _town[0].center.split(",")[0];
this.form.lon = _town[0].center.split(",")[1];
}
});
},
showPicker() {
this.$refs.cityPicker.show();
},
},
mounted() {},
data() {
return {
lightColor: this.$lightColor,
addSyncData: "",
mapFlage: false,
longitude: "",
markers: [],
latitude: "",
routerVal: "",
show: false,
form: {
detail: "",
name: "",
mobile: "",
consigneeAddressIdPath: [],
consigneeAddressPath: [],
___path: "",
isDefault: false,
},
rules: {
name: [
{
required: true,
message: "收货人姓名不能为空",
trigger: ["blur", "change"],
},
],
mobile: [
{
required: true,
message: "手机号码不能为空",
trigger: ["blur", "change"],
},
{
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: "手机号码不正确",
trigger: ["change", "blur"],
},
],
___path: [
{
required: true,
message: "请选择所在区域",
trigger: ["change"],
},
],
detail: [
{
required: true,
message: "请填写详细地址",
trigger: ["blur", "change"],
},
],
},
list: [
{
id: "",
localName: "请选择",
children: [],
},
],
};
},
onLoad(option) {
uni.showLoading({
title: "加载中",
});
this.routerVal = option;
if (option.id) {
getAddressDetail(option.id).then((res) => {
const params = res.data.result;
params.___path = params.consigneeAddressPath;
this.$set(this, "form", params);
uni.hideLoading();
});
}
uni.hideLoading();
},
onShow() {
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
},
};
</script>
<style scoped lang="scss">
.detailAddress {
/deep/ .u-form-item--left {
display: flex;
align-items: flex-start;
}
}
.saveBtn,
.selectAddress {
height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 30rpx;
background: $aider-light-color;
color: #fff;
width: 70%;
margin: 40rpx auto 0 auto;
border-radius: 20rpx;
}
.selectAddress {
margin-top: 40rpx;
background: #fff;
color: $aider-light-color;
border: 2rpx solid $aider-light-color;
}
.uForm {
width: 94%;
overflow: hidden;
left: 3%;
position: relative;
top: 2%;
background: #fff;
border-radius: 20rpx;
padding: 0 0 40rpx 0;
}
.add-address {
width: 100%;
padding-top: 3%;
/deep/ .u-form-item {
background-color: #fff;
padding: 24rpx 30rpx;
}
.u-btn {
margin: 30rpx 30rpx 0 30rpx;
background-color: $main-color;
}
/deep/.u-checkbox {
margin: 30rpx 30rpx 0 30rpx;
.u-label-class.u-checkbox__label {
color: $font-color-light;
font-size: $font-sm;
}
}
}
/deep/ .u-checkbox__label {
font-size: 28rpx;
}
</style>

343
pages/mine/address/address.vue Normal file
View File

@@ -0,0 +1,343 @@
<template>
<view class="address">
<view class="bar"></view>
<empty v-if="empty"></empty>
<view class="list" v-else>
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
<view class="basic" @click="selectAddressData(item)">
<text>{{ item.name }}</text>
<text>{{ item.mobile }}</text>
<text class="default" v-show="item.isDefault">默认</text>
<view>
<div class="region">
<span v-if="item.consigneeAddressPath[0]">{{
item.consigneeAddressPath[0]
}}</span>
<span v-if="item.consigneeAddressPath[1]">{{
item.consigneeAddressPath[1]
}}</span>
<span v-if="item.consigneeAddressPath[2]">{{
item.consigneeAddressPath[2]
}}</span>
<span v-if="item.consigneeAddressPath[3]">{{
item.consigneeAddressPath[3]
}}</span>
<span>
{{ item.detail }}
</span>
</div>
</view>
</view>
<view class="edit">
<view class="relative" @click="setDefault(item)">
<view v-if="item.isDefault" class="alifont icon-xuanzhong"></view>
<text v-else class="unchecked"></text>
<text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text>
</view>
<view class="relative">
<view class="alifont icon-bianji-copy"></view>
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
<view class="alifont icon-lajitong"></view>
<text @click="delAddress(item.id)">删除</text>
</view>
</view>
</view>
<view style="height: 100px"></view>
</view>
<button type="default" class="btn" @click="addAddress('')">
<u-icon name="plus-circle"></u-icon>
添加新收货人
</button>
<u-action-sheet :list="delList" :tips="tips" v-model="showAction" @click="deleteAddressMessage"></u-action-sheet>
</view>
</template>
<script>
import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address.js";
export default {
data() {
return {
ifOnShow: false, //组件加载为true 离开为false
activeClass: "activeClass",
addressList: [],
showAction: false,
empty: false,
delList: [
{
text: "确定",
},
],
tips: {
text: "确定要删除该收货人信息吗？",
},
delId: "",
addid: "",
routerVal: "",
params: {
pageNumber: 1,
pageSize: 50,
},
};
},
onLoad: function (val) {
this.routerVal = val;
},
onShow() {
this.addressList = [];
this.getAddressList();
},
onHide() {},
onBackPress(e) {
uni.redirectTo({
url: "/pages/order/fillorder?way=" + this.routerVal.way,
});
return true;
},
methods: {
async selectAddressData(val) {
await API_Trade.setAddressId(val.id, this.routerVal.way);
uni.redirectTo({
url: `/pages/order/fillorder?way=${this.routerVal.way}`,
});
},
//获取地址列表
getAddressList() {
uni.showLoading();
API_Address.getAddressList(
this.params.pageNumber,
this.params.pageSize
).then((res) => {
console.log("加载");
if (res.data.result.records.length == 0) {
this.empty = true;
} else {
res.data.result.records.forEach((item) => {
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
});
this.$set(this, "addressList", res.data.result.records);
console.log(this.addressList);
}
uni.hideLoading();
});
},
//删除地址
delAddress(id) {
this.delId = id;
this.showAction = true;
},
deleteAddressMessage() {
API_Address.deleteAddress(this.delId).then((res) => {
if (res.statusCode == 200) {
uni.showToast({
icon: "none",
title: "删除成功",
});
this.getAddressList();
} else {
uni.showToast({
icon: "none",
title: res.data.message,
duration: 2000,
});
}
});
},
//新建。编辑地址
addAddress(id) {
console.log("点击");
if (id) {
uni.navigateTo({
url:
"/pages/mine/address/add?id=" +
id +
"&way=" +
this.routerVal.way +
"&type=order",
});
} else {
uni.navigateTo({
url:
"/pages/mine/address/add?way=" + this.routerVal.way + "&type=order",
});
}
},
//设为默认地址
setDefault(item) {
delete item.updateBy;
delete item.updateTime;
delete item.deleteFlag;
item.isDefault ? "" : (item.isDefault = !item.isDefault);
API_Address.editAddress(item).then((res) => {
uni.showToast({
title: "设置默认地址成功",
icon: "none",
});
this.getAddressList();
});
},
// 地址id
addId(params) {
API_Trade.setAddressId(params.address_id).then((res) => {});
},
},
};
</script>
<style lang="scss" scoped>
.active {
background: #f19736;
}
.alifont {
display: inline-block;
}
.region {
span {
margin: 0 4rpx !important;
}
}
.address {
.bar {
height: 20rpx;
overflow: hidden;
width: 100%;
background: url("/pages/floor/imgs/line.png") no-repeat;
background-size: 100%;
position: relative;
top: 0;
left: 0;
transform: scale(1, 0.8);
}
.default {
border: 1px solid #ff6262;
color: #ff6262;
font-size: 22rpx;
border-radius: 6rpx;
align-self: center;
padding: 2rpx 20rpx;
}
.list {
.item:hover {
background: #ededed;
}
.item {
margin-top: 20rpx;
font-size: $font-base;
color: #666;
.basic {
padding: 30rpx;
line-height: 1.5em;
border-bottom: 1px solid $border-color-light;
:nth-child(2) {
margin: 0 20rpx;
}
:nth-child(4) {
color: $font-color-light;
font-size: $font-sm;
margin-top: 10rpx;
text:nth-child(2) {
margin: 0;
}
view {
font-size: 28rpx;
}
}
}
.edit {
display: flex;
justify-content: space-between;
align-items: center;
vertical-align: middle;
height: 80rpx;
font-size: $font-sm;
color: $font-color-light;
padding: 0 30rpx;
.unchecked {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
margin-right: 8rpx;
position: relative;
top: -2rpx;
left: 0;
}
view:nth-child(1) {
view:nth-child(1) {
font-size: $font-base;
color: $main-color;
margin-right: 8rpx;
vertical-align: middle;
}
}
view:nth-child(2) {
text {
margin-left: 5rpx;
}
.alifont {
font-size: 32rpx;
}
.icon-bianji-copy {
font-size: 28rpx;
position: relative;
top: 2rpx;
left: 0;
}
.icon-lajitong {
position: relative;
top: 4rpx;
}
}
.mr-40 {
margin-right: 40rpx;
}
}
}
}
.btn {
background: $light-color;
position: fixed;
width: 690rpx;
bottom: 60rpx;
height: 80rpx;
left: 30rpx;
font-size: 30rpx;
line-height: 80rpx;
.u-icon {
margin-right: 10rpx;
}
}
}
</style>

329
pages/mine/address/addressManage.vue Normal file
View File

@@ -0,0 +1,329 @@
<template>
<view class="address">
<view class="bar"></view>
<empty v-if="empty"></empty>
<view class="list" v-else>
<view class="item c-content" v-for="(item, index) in addressList" :key="index">
<view class="basic">
<text>{{ item.name }}</text>
<text>{{ item.mobile }}</text>
<text class="default" v-show="item.isDefault">默认</text>
<view>
<div class="region">
<span v-if="item.consigneeAddressPath[0]">{{
item.consigneeAddressPath[0]
}}</span>
<span v-if="item.consigneeAddressPath[1]">{{
item.consigneeAddressPath[1]
}}</span>
<span v-if="item.consigneeAddressPath[2]">{{
item.consigneeAddressPath[2]
}}</span>
<span v-if="item.consigneeAddressPath[3]">{{
item.consigneeAddressPath[3]
}}</span>
<span>
{{ item.detail }}
</span>
</div>
</view>
</view>
<view class="edit">
<view class="relative" @click="setDefault(item)">
<view v-if="item.isDefault" class="alifont icon-xuanzhong"></view>
<text v-else class="unchecked"></text>
<text>{{ item.isDefault ? "默认地址" : "设为默认" }}</text>
</view>
<view class="relative">
<view class="alifont icon-bianji-copy"></view>
<text class="mr-40" @click="addAddress(item.id)">编辑</text>
<view class="alifont icon-lajitong"></view>
<text @click="delAddress(item.id)">删除</text>
</view>
</view>
</view>
<view style="height: 100px"></view>
</view>
<button type="default" class="btn" @click="addAddress('')">
<u-icon name="plus-circle"></u-icon>
添加新收货人
</button>
<u-action-sheet :list="delList" :tips="tips" v-model="showAction" @click="deleteAddressMessage"></u-action-sheet>
</view>
</template>
<script>
import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address.js";
import storage from "@/utils/storage.js";
export default {
data() {
return {
activeClass: "activeClass",
addressList: [],
showAction: false,
empty: false,
delList: [
{
text: "确定",
},
],
tips: {
text: "确定要删除该收货人信息吗？",
},
delId: "",
addid: "",
routerVal: "",
params: {
pageNumber: 1,
pageSize: 1000,
},
};
},
// 返回上一级
onBackPress(e) {
uni.switchTab({
url: "/pages/tabbar/user/my",
});
return true;
},
onLoad: function (val) {
this.routerVal = val;
},
onShow() {
let userInfo = storage.getUserInfo();
if (userInfo && userInfo.id) {
this.getAddressList();
}
},
onPullDownRefresh() {
this.getAddressList();
uni.stopPullDownRefresh();
},
methods: {
//获取地址列表
getAddressList() {
uni.showLoading();
API_Address.getAddressList(
this.params.pageNumber,
this.params.pageSize
).then((res) => {
if (res.data.result.records.length == 0) {
this.empty = true;
} else {
res.data.result.records.forEach((item) => {
item.consigneeAddressPath = item.consigneeAddressPath.split(",");
});
this.addressList = res.data.result.records;
}
uni.hideLoading();
});
},
//删除地址
delAddress(id) {
this.delId = id;
this.showAction = true;
},
deleteAddressMessage() {
API_Address.deleteAddress(this.delId).then((res) => {
if (res.statusCode == 200) {
uni.showToast({
icon: "none",
title: "删除成功",
});
this.getAddressList();
} else {
uni.showToast({
icon: "none",
title: res.data.message,
duration: 2000,
});
}
});
},
//新建。编辑地址
addAddress(id) {
if (id) {
uni.navigateTo({
url: "/pages/mine/address/add?id=" + id,
});
} else {
uni.navigateTo({
url: "/pages/mine/address/add",
});
}
},
//设为默认地址
setDefault(item) {
delete item.updateBy;
delete item.updateTime;
delete item.deleteFlag;
item.isDefault ? "" : (item.isDefault = !item.isDefault);
API_Address.editAddress(item).then((res) => {
uni.showToast({
title: "设置默认地址成功",
icon: "none",
});
this.getAddressList();
});
},
// 地址id
addId(params) {
API_Trade.setAddressId(params.address_id).then((res) => {});
},
},
};
</script>
<style lang="scss" scoped>
.active {
background: #f19736;
}
.alifont {
display: inline-block;
}
.region {
span {
margin: 0 4rpx !important;
}
}
.address {
.bar {
height: 20rpx;
overflow: hidden;
width: 100%;
background: url("/pages/floor/imgs/line.png") no-repeat;
background-size: 100%;
position: relative;
top: 0;
left: 0;
transform: scale(1, 0.8);
}
.default {
border: 1px solid #ff6262;
color: #ff6262;
font-size: 22rpx;
border-radius: 6rpx;
align-self: center;
padding: 2rpx 20rpx;
}
.list {
.item {
margin-top: 20rpx;
font-size: $font-base;
color: #666;
.basic {
padding: 30rpx;
line-height: 1.5em;
border-bottom: 1px solid $border-color-light;
:nth-child(2) {
margin: 0 20rpx;
}
:nth-child(4) {
color: $font-color-light;
font-size: $font-sm;
margin-top: 10rpx;
text:nth-child(2) {
margin: 0;
}
view {
font-size: 28rpx;
}
}
}
.edit {
display: flex;
justify-content: space-between;
align-items: center;
vertical-align: middle;
height: 80rpx;
font-size: $font-sm;
color: $font-color-light;
padding: 0 30rpx;
.unchecked {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
border: 1px solid #e0e0e0;
display: inline-block;
vertical-align: middle;
margin-right: 8rpx;
position: relative;
top: -2rpx;
left: 0;
}
view:nth-child(1) {
view:nth-child(1) {
font-size: $font-base;
color: $main-color;
margin-right: 8rpx;
vertical-align: middle;
}
}
view:nth-child(2) {
text {
margin-left: 5rpx;
}
.alifont {
font-size: 32rpx;
}
.icon-bianji-copy {
font-size: 28rpx;
position: relative;
top: 2rpx;
left: 0;
}
.icon-lajitong {
position: relative;
top: 4rpx;
}
}
.mr-40 {
margin-right: 40rpx;
}
}
}
}
.btn {
background: $light-color;
position: fixed;
width: 690rpx;
bottom: 60rpx;
height: 80rpx;
left: 30rpx;
font-size: 30rpx;
line-height: 80rpx;
.u-icon {
margin-right: 10rpx;
}
}
}
</style>

66
pages/mine/address/map.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<!-- 自定义地图组件 -->
<map
class="map"
:latitude="latitude"
:longitude="longitude"
scale="18"
:markers="markers"
:show-location="true"
@markertap="markertap"
@updated="mapUpdated"
@tap="closeMapMarker"
></map>
</template>
<script>
import amap from "@/js_sdk/amap-wx.130.js";
export default {
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
markertap() {},
mapUpdated() {},
closeMapMarker() {},
// 初始化地图
initMap() {
this.amapPlugin = new amap.AMapWX({
key: "c03fe63e4ed7cfc6612304b3f46c19b5", //该key 是在高德中申请的微信小程序key
});
this.amapPlugin.getRegeo({
type: "gcj02", //map 组件使用的经纬度是国测局坐标， type 为 gcj02
success: function (res) {
const latitude = res[0].latitude;
const longitude = res[0].longitude;
that.longitude = longitude;
that.latitude = latitude;
that.mapInfo = res[0];
},
fail: (res) => {
console.log(JSON.stringify(res));
},
});
},
},
};
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
}
</style>

106
pages/mine/address/uniMap.vue Normal file
View File

@@ -0,0 +1,106 @@
<template></template>
<script>
import { getAddressCode } from "@/api/address";
export default {
data() {
return {};
},
mounted() {
this.init();
},
methods: {
// 初始化地图并且调用
initMap() {
let that = this;
uni.chooseLocation({
success: function (res) {
/**获取地址详情地址 */
that.posToCity(res.latitude, res.longitude).then((val) => {
/**获取地址code */
getAddressCode(
val.regeocode.addressComponent.citycode,
val.regeocode.addressComponent.township
).then((code) => {
that.$emit("callback", { ...val, ...res, ...code });
that.$emit("close");
});
});
},
fail() {
that.$emit("close");
},
});
},
// 根据当前客户端判断
init() {
// #ifdef MP-WEIXIN
this.wechatMap();
// #endif
// #ifndef MP-WEIXIN
this.initMap();
// #endif
},
// 如果是微信小程序单独走微信小程序授权模式
wechatMap() {
let that = this;
uni.authorize({
scope: "scope.userLocation",
success() {
// 允许授权
that.initMap();
},
fail() {
//拒绝授权
uni.showModal({
content: "检测到您没打开获取地址功能权限，是否去设置打开？",
confirmText: "确认",
cancelText: "取消",
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
that.initMap();
},
});
} else {
that.$emit("close");
return false;
}
},
});
return false;
},
});
},
posToCity(latitude, longitude) {
return new Promise((resolve, reject) => {
uni.request({
url: `https://restapi.amap.com/v3/geocode/regeo`,
method: "GET",
data: {
key: "d649892b3937a5ad20b76dacb2bcb5bd", //web服务的key
location: `${longitude},${latitude}`,
},
success: ({ data }) => {
const { status, info, regeocode } = data;
if (status === "1") {
resolve(data);
} else {
reject(info);
}
},
fail: (err) => {
reject(err);
},
});
});
},
},
};
</script>
<style lang="scss" scoped>
</style>

236
pages/mine/deposit/index.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<view class="wap">
<view class="wrapper-show-money">
<view class="money-view">
<h3>预存款金额 </h3>
<view class="money">￥{{walletNum | unitPrice }}</view>
</view>
</view>
<view class="wrapper-tabs">
<swiper class="swiper-box" @change="changeSwiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item" v-for="index in list.length" :key="index">
<scroll-view class="scroll-v view-wrapper" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
<view v-if="datas.length!=0" class="view-item" v-for="(logItem, logIndex) in datas" :key="logIndex">
<view class="view-item-detail">
<view class="-title">{{logItem.detail}}</view>
<!-- <view class="-number">{{logItem.detail}}</view> -->
</view>
<view class="view-item-change">
<view class="-money green" v-if="logItem.serviceType == 'WALLET_PAY' || logItem.serviceType == 'WALLET_WITHDRAWAL'"> {{logItem.money | unitPrice}} </view>
<view class="-money" v-if="logItem.serviceType == 'WALLET_REFUND' || logItem.serviceType == 'WALLET_RECHARGE' || logItem.serviceType == 'WALLET_COMMISSION' ">
+{{logItem.money | unitPrice}} </view>
<view class="-time">{{logItem.createTime}}</view>
</view>
</view>
<u-empty v-if="datas.length==0" mode="history" text="暂无记录" />
<u-loadmore v-else bg-color='#f8f8f8' :status="status" />
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import { getUserRecharge, getWalletLog } from "@/api/members";
import storage from "@/utils/storage.js";
import { getUserWallet } from "@/api/members";
export default {
data() {
return {
walletNum:0,
status: "loadmore",
current: 0,
swiperCurrent: 0,
userInfo: "", //用户详情信息
params: {
pageNumber: 1,
pageSize: 10,
order: "desc",
},
datas: [], //遍历的数据集合
rechargeList: "", //充值明细列表
walletLogList: "", //钱包变动列表
list: [
// {
// name: "充值明细",
// },
{
name: "预存款变动明细",
},
],
};
},
watch: {
swiperCurrent(index) {
this.swiperCurrent = index;
},
},
async mounted() {
this.getWallet();
let result = await getUserWallet(); //预存款
console.log(result)
this.walletNum = result.data.result.memberWallet;
},
methods: {
/**分页获取预存款充值记录 */
getRecharge() {
this.status = "loading";
getUserRecharge(this.params).then((res) => {
if (res.data.success) {
if (res.data.result.records.length != 0) {
this.status = "loadmore";
this.datas.push(...res.data.result.records);
} else {
this.status = "nomore";
}
}
});
},
getWallet() {
this.status = "loading";
getWalletLog(this.params).then((res) => {
if (res.data.success) {
if (res.data.result.records.length != 0) {
this.datas.push(...res.data.result.records);
} else {
this.status = "nomore";
}
}
});
},
// 点击swiper的时候清空数据
changeSwiper() {
this.groupBuy = [];
},
changed(index) {
this.datas = [];
this.swiperCurrent = index;
this.params.pageNumber = 1;
if (index == 0) {
// this.getRecharge();
this.getWallet();
} else {
this.getWallet();
}
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition({ detail: { dx } }) {
this.$refs.tabs.setDx(dx);
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
// this.groupBuy = []
let current = e.detail.current;
this.$refs.tabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
loadMore() {
this.params.pageNumber++;
this.getWallet();
},
},
};
</script>
<style lang="scss" scoped>
.green {
color: $aider-color-green !important;
}
.view-item {
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.view-item-change {
text-align: right;
> .-money {
font-size: 36rpx;
color: $main-color;
font-weight: bold;
}
> .-time {
font-size: 22rpx;
color: #999;
}
}
.view-item-detail {
line-height: 1.75;
> .-title {
font-size: 28rpx;
}
> .-number {
font-size: 22rpx;
color: #999;
}
}
.submit-btn {
line-height: 90rpx;
text-align: center;
color: #fff;
background: $main-color;
margin: 0 auto;
height: 90rpx;
}
.wap {
}
.money {
font-size: 40rpx;
font-weight: bold;
}
.money-view {
height: 100%;
width: 100%;
padding: 0 32rpx;
display: flex;
align-items: flex-end;
justify-content: center;
flex-direction: column;
color: #fff;
background-image: linear-gradient(
25deg,
$main-color,
$light-color,
$aider-light-color
);
}
.swiper-item,
.scroll-v {
height: 100%;
}
.swiper-box {
/* #ifndef H5 */
height: calc(100vh - 200rpx);
/* #endif */
/* #ifdef H5 */
height: calc(100vh - 288rpx);
/* #endif */
}
.wap {
width: 100%;
height: calc(100vh - 44px);
}
.wrapper-show-money {
height: 200rpx;
// background-image: url('/static/img/main-bg.jpg');
}
</style>

22
pages/mine/deposit/info.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view class="wrapper">
<u-cell-group>
<u-cell-item title="申请单号"></u-cell-item>
<u-cell-item title="提现金额" value="新版本"></u-cell-item>
<u-cell-item title="收款银行"></u-cell-item>
<u-cell-item title="收款账号" value="新版本"></u-cell-item>
<u-cell-item title="开户人姓名"></u-cell-item>
<u-cell-item title="创建时间" value="新版本"></u-cell-item>
<u-cell-item title="提现状态" value="新版本"></u-cell-item>
</u-cell-group>
</view>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>

11
pages/mine/distribution/achievement.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

136
pages/mine/distribution/auth.vue Normal file
View File

@@ -0,0 +1,136 @@
<template>
<view class="wrapper">
<view>
<h4>实名认证（请上传真实的个人信息，认证通过后将无法修改）</h4>
<view>
<u-form :model="ruleForm" label-width="200rpx" ref="uForm">
<u-form-item label="姓名" prop="name">
<u-input v-model="ruleForm.name" placeholder="请输入您的真实姓名" />
</u-form-item>
<u-form-item label="身份证" prop="idNumber">
<u-input
v-model="ruleForm.idNumber"
placeholder="请输入身份证号码"
/>
</u-form-item>
<!-- <u-form-item label="身份证正面照" prop="name">
<u-upload></u-upload>
</u-form-item>
<u-form-item label="身份证反面照" prop="name">
<u-upload></u-upload>
</u-form-item>
<u-form-item label="手持身份证照" prop="name">
<u-upload></u-upload>
</u-form-item> -->
</u-form>
<u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
</view>
</view>
<view class="tips">
<view>您提交的信息正在审核</view>
<view>提交认证申请后，工作人员将在三个工作日进行核对完成审核</view>
</view>
</view>
</template>
<script>
import { applyDistribution } from "@/api/goods";
export default {
data() {
return {
ruleForm: {
name: "",
idNumber: "",
},
rules: {
name: [
{
required: true,
message: "请输入姓名",
// 可以单个或者同时写两个触发验证方式
trigger: "blur",
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的
return this.$u.test.chinese(value);
},
message: "姓名输入不正确",
// 触发器可以同时用blur和change
trigger: ["change", "blur"],
},
],
idNumber: [
{
required: true,
message: "请输入身份证",
// 可以单个或者同时写两个触发验证方式
trigger: "blur",
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的
return this.$u.test.idCard(value);
},
message: "身份证号码不正确",
// 触发器可以同时用blur和change
trigger: ["change", "blur"],
},
],
},
};
},
methods: {
submit() {
this.$refs.uForm.validate((valid) => {
if (valid) {
applyDistribution(this.ruleForm).then((res) => {
if (res.data.success) {
uni.showToast({
title: "认证提交成功!",
duration: 2000,
icon: "none",
});
setTimeout(()=>{
uni.navigateBack();
},500)
}
else{
uni.showToast({
title: res.data.message,
duration: 2000,
icon:"none"
});
}
});
} else {
uni.showToast({
title: "请填写有效信息",
duration: 2000,
icon: "none",
});
}
});
},
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
};
</script>
<style lang="scss" scoped>
.wrapper {
padding: 32rpx;
}
.tips {
margin-top: 20rpx;
font-size: 24rpx;
color: #999;
}
</style>

123
pages/mine/distribution/history.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<view class="log-list">
<view class="log-way" v-for="(item, index) in datas" :key="index">
<view class="log-item">
<view class="log-item-view">
<view class="title">{{
item.distributionCashStatus == "APPLY"
? "待处理"
: item.distributionCashStatus == "PASS"
? "通过"
: "拒绝"
}}</view>
<view class="price">+{{ item.price | unitPrice }}</view>
</view>
<view class="log-item-view">
<view>{{ item.createTime }}</view>
<view></view>
</view>
</view>
</view>
<view class="empty" v-if="empty">
<u-loadmore :status="status" :icon-type="iconType" bg-color="#f7f7f7" />
<!-- <u-empty text="暂无更多提现历史" mode="order"></u-empty> -->
</view>
</view>
</template>
<script>
import { cashLog, distributionOrderList } from "@/api/goods";
export default {
data() {
return {
datas: "", //数据集合
status: "loadmore",
iconType: "flower",
empty: false,
params: {
pageNumber: 1,
pageSize: 10,
},
type: 0,
routers: "",
achParams: {
distributionId: (this.routers && this.routers.id) || "", //分销商id
distributionName: (this.routers && this.routers.name) || "", //分销商名称
distributionOrderStatus: "", //分销商订单状态
pageNumber: 1,
pageSize: 10,
},
};
},
onLoad(option) {
let title;
option.type == 0 ? (title = "分销业绩") : (title = "提现记录");
uni.setNavigationBarTitle({
title: title, //这是修改后的导航栏文字
});
this.routers = option;
console.log(this.routers);
option.type == 0 ? this.achievement() : this.history();
},
mounted() {},
onReachBottom() {
this.status = "loading";
this.params.pageNumber++;
this.type == 1 ? this.history() : this.achievement();
},
methods: {
// 业绩
achievement() {
distributionOrderList(this.achParams).then((res) => {});
},
// 初始化提现历史
history() {
uni.showLoading({
title: "加载中",
});
cashLog(this.params).then((res) => {
if (res.data.success && res.data.result.records.length >= 1) {
this.datas = res.data.result.records;
} else {
this.status = "nomore";
this.empty = true;
}
uni.hideLoading();
});
},
},
};
</script>
<style lang="scss" scoped>
.empty {
margin: 40rpx 0;
}
.price {
color: $main-color;
font-weight: bold;
}
.log-list {
padding: 0 8rpx;
overflow: hidden;
margin: 20rpx 0;
}
.log-way {
margin: 10rpx 0;
overflow: hidden;
background: #fff;
border-radius: 10rpx;
padding: 20rpx 0;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.log-item-view {
padding: 8rpx 32rpx;
display: flex;
justify-content: space-between;
}
</style>

140
pages/mine/distribution/home.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<view>
<view class="nav-list">
<view class="total">可提现金额</view>
<view class="price">{{ distributionData.canRebate | unitPrice }}</view>
<view class="frozen"
>冻结金额{{ distributionData.commissionFrozen | unitPrice }}</view
>
</view>
<view class="nav">
<view class="nav-item">
<u-icon
size="50"
@click="handleClick('/pages/mine/distribution/list?id='+distributionData.id+'&name='+distributionData.memberName)"
color="#ff6b35"
name="bag-fill"
></u-icon>
<view>分销商品</view>
</view>
<view
class="nav-item"
@click="handleClick(`/pages/mine/distribution/history?type=0&id=${distributionData.id}&name=${distributionData.memberName}`)"
>
<u-icon size="50" color="#ff6b35" name="order"></u-icon>
<view>分销业绩</view>
</view>
<view
class="nav-item"
@click="handleClick('/pages/mine/distribution/history?type=1')"
>
<u-icon size="50" color="#ff6b35" name="red-packet-fill"></u-icon>
<view>提现记录</view>
</view>
<view
class="nav-item"
@click="handleClick('/pages/mine/distribution/withdrawal')"
>
<u-icon size="50" color="#ffc71c" name="rmb-circle-fill"></u-icon>
<view>提现</view>
</view>
<view class="nav-item" @click="handleClick('/pages/mine/distribution/list')">
<u-icon size="50" color="#1e9ff2" name="home-fill"></u-icon>
<view>选品库</view>
</view>
</view>
</view>
</template>
<script>
import { distribution } from "@/api/goods";
export default {
data() {
return {
distributionData: "",
};
},
methods: {
handleClick(url) {
uni.navigateTo({
url,
});
},
queryGoods(src) {
uni.navigateTo({
url: `/pages/mine/distribution/${src}`,
});
},
/**
* 初始化推广商品
*/
init() {
uni.showLoading({
title: "加载中",
});
distribution().then((res) => {
if (res.data.result) {
this.distributionData = res.data.result;
}
uni.hideLoading();
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.nav {
// height: 176rpx;
background: #fff;
align-items: center;
display: flex;
// border-radius: 20rpx;
// transform: translateY(-20rpx);
// box-shadow: 4rpx 10rpx 22rpx rgba(0, 0, 0, 0.1);
flex-wrap: wrap;
}
.nav-list {
color: #fff;
padding: 40rpx 0;
background: $aider-light-color;
// border-bottom-left-radius: 100rpx;
// border-bottom-right-radius: 100rpx;
}
.total {
padding: 10rpx 0;
text-align: center;
font-size: 28rpx;
opacity: 0.8;
}
.frozen {
text-align: center;
font-size: 24rpx;
opacity: 0.8;
}
.price {
text-align: center;
color: #fff;
font-size: 50rpx;
}
.nav-item {
height: 240rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> * {
margin: 10rpx 0;
}
width: 33%;
// color: #fff;
}
</style>

103
pages/mine/distribution/join.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<view class="wrapper">
<u-tabs
:list="list"
:is-scroll="false"
:current="current"
@change="change"
:active-color="$lightColor"
></u-tabs>
<!-- 推广人资料 -->
<view class="message">
<u-form :model="ruleForm" label-width="250rpx" ref="uForm">
<u-form-item label="会员昵称" prop="name">
<u-input v-model="ruleForm.name" />
</u-form-item>
<u-form-item label="账户类型" prop="name"> </u-form-item>
<u-form-item
label="收款人姓名"
placeholder="请输入收款人姓名"
prop="name"
>
<u-input v-model="ruleForm.name" />
</u-form-item>
<u-form-item
label="收款账号"
placeholder="请输入收款人账号"
prop="name"
>
<u-input v-model="ruleForm.name" />
</u-form-item>
<u-form-item
label="银行名称"
placeholder="请输入开户银行支行名称"
prop="name"
>
<u-input v-model="ruleForm.name" />
</u-form-item>
</u-form>
<u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
</view>
</view>
</template>
<script>
export default {
components: {},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
},
data() {
return {
current:0,
list: [
{
name: "推广人资料",
},
{
name: "平台审核",
},
{
name: "完成",
},
],
ruleForm: {
name: "",
radio: "",
},
rules: {
name: [
{
required: true,
message: "请输入姓名",
// 可以单个或者同时写两个触发验证方式
trigger: "blur",
},
],
},
};
},
};
</script>
<style lang="scss" scoped>
.menu {
height: 88rpx;
line-height: 88rpx;
background: $main-color;
display: flex;
> .menu-item {
flex: 1;
text-align: center;
color: $light-color;
}
}
.active {
color: #fff !important;
}
.message {
padding: 0 32rpx;
}
</style>

412
pages/mine/distribution/list.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<view class="wrapper">
<!-- 筛选弹出层 -->
<u-popup width="90%" v-model="popup" mode="right">
<view class="screen-title">商品筛选</view>
<view class="screen-view">
<view class="screen-item">
<h4>价格区间</h4>
<view class="flex">
<u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最低价"></u-input>
<view class="line"></view>
<u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最高价"></u-input>
</view>
</view>
<view class="screen-item">
<h4>销量</h4>
<view class="flex">
<u-input class="u-bg w200 flex1" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="销量"></u-input>
<view class="flex1">笔以上</view>
</view>
</view>
<view class="screen-item">
<h4>收入比率</h4>
<view class="flex">
<u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最低%"></u-input>
<view class="line"></view>
<u-input class="u-bg" placeholder-style="font-size:22rpx;" type="number" input-align="center" placeholder="最高%"></u-input>
</view>
</view>
<view class="screen-item">
<h4>包邮</h4>
<view class="flex">
<u-tag class="u-tag" shape="circle" text="包邮" mode="plain" type="info" />
</view>
</view>
<view class="screen-item">
<h4>促销活动</h4>
<view class="flex">
<u-tag class="u-tag" shape="circle" text="限时抢购" mode="plain" type="info" />
<u-tag class="u-tag" shape="circle" text="拼团秒杀" mode="plain" type="info" />
</view>
</view>
<view class="screen-item">
<h4>经营类型</h4>
<view class="flex">
<u-tag class="u-tag" shape="circle" text="平台自营" mode="plain" type="info" />
<u-tag class="u-tag" shape="circle" text="三方店铺" mode="plain" type="info" />
</view>
</view>
</view>
<view class="screen-btn">
<view class="screen-clear"> 重置 </view>
<view class="screen-submit"> 确定 </view>
</view>
</u-popup>
<!-- 导航栏 -->
<view class="nav">
<view class="nav-item" @click="handleMyGoods(true)" :class="{ checked: params.checked }">已选择</view>
<view class="nav-item" @click="handleMyGoods(false)" :class="{ checked: !params.checked }">未选择</view>
<!-- <view class="nav-item" @click="popup = !popup">筛选</view> -->
</view>
<!-- 商品列表 -->
<view class="goods-list">
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
<view class="goods-item-img" @click="handleNavgationGoods(item)">
<u-image width="176rpx" height="176rpx" :src="item.thumbnail"></u-image>
</view>
<view class="goods-item-desc">
<!-- 商品描述 -->
<view class="-item-title" @click="handleNavgationGoods(item)">
{{ item.goodsName }}
</view>
<!-- 商品金额 -->
<view class="-item-price" @click="handleNavgationGoods(item)">
佣金:
<span> ￥{{ item.commission | unitPrice }}</span>
</view>
<!-- 比率佣金 -->
<view class="-item-bottom">
<view class="-item-bootom-money" @click="handleNavgationGoods(item)">
<!-- <view class="-item-bl">
比率:
<span>{{ "5.00%" }}</span>
</view> -->
<view class="-item-yj">
<span>￥{{ item.price | unitPrice }}</span>
</view>
</view>
<view>
<view class="click" v-if="!params.checked" @click="handleClickGoods(item)">立即选取</view>
<view class="click" v-if="params.checked" @click="handleLink(item)">分销商品</view>
</view>
</view>
</view>
</view>
<view class="empty">
<!-- <u-empty v-if="empty" text="没有分销商品了" mode="list"></u-empty> -->
</view>
</view>
<canvas class="canvas-hide" canvas-id="qrcode" />
<drawCanvas ref="drawCanvas" v-if="showFlag" :res="res" />
</view>
</template>
<script>
import {
distributionGoods,
checkedDistributionGoods,
getMpCode,
} from "@/api/goods";
import drawCanvas from "@/components/m-canvas";
export default {
data() {
return {
showFlag: false, //分销分享开关
empty: false,
popup: false, //弹出层开关
active_color: this.$mainColor,
current: 0,
params: {
pageNumber: 1,
pageSize: 10,
checked: true,
},
goodsList: [],
// 分销分享 实例
res: {
container: {
width: 600,
height: 960,
background: "#fff",
title: "分享背景",
},
// 分销分享
bottom: {
img: "",
code: "",
price: 0,
},
},
routers: "",
};
},
components: {
drawCanvas,
},
onLoad(options) {
this.routers = options;
},
watch: {
showFlag(val) {
console.log(val);
},
},
onShow() {
this.goodsList = [];
this.init();
},
methods: {
handleNavgationGoods(val) {
uni.navigateTo({
url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.id}`,
});
},
async handleLink(goods) {
let page = `pages/product/goods`;
let scene = `${goods.skuId},${goods.id},${this.routers.id}`;
let result = await getMpCode({ page, scene });
if(result.data.success){
let callback = result.data.result;
this.res.container.title = `${goods.goodsName}`;
this.res.bottom.code = `data:image/png;base64,${callback}`;
this.res.bottom.price = this.$options.filters.unitPrice(goods.price, "￥");
this.res.bottom.desc = `${goods.goodsName}`;
this.res.bottom.img = `${goods.thumbnail}`;
if (this.showFlag) {
this.$refs.drawCanvas.init();
}
this.showFlag = true;
}
else{
uni.showToast({
title: `制作二维码失败！请稍后重试`,
duration: 2000,
icon:"none"
});
}
},
change(index) {
this.current = index;
},
// 点击我的选品库
handleMyGoods(flag) {
this.goodsList = [];
this.params.checked = flag;
this.init();
},
// 选择商品
handleClickGoods(val) {
uni.showLoading({
title: "加载中",
mask: true,
});
checkedDistributionGoods(val.id).then((res) => {
uni.hideLoading();
if (res.data.success) {
uni.showToast({
title: "已添加到我的选品库",
duration: 2000,
icon: "none",
});
setTimeout(() => {
this.goodsList = [];
this.init();
}, 500);
}
});
},
init() {
uni.showLoading({
title: "加载中",
});
distributionGoods(this.params).then((res) => {
uni.hideLoading();
if (res.data.success && res.data.result.records.length >= 1) {
this.goodsList.push(...res.data.result.records);
}
if (this.goodsList.length == 0) {
this.empty = true;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.canvas-hide {
/* 1 */
position: fixed;
right: 100vw;
bottom: 100vh;
/* 2 */
z-index: -9999;
/* 3 */
opacity: 0;
}
.empty {
margin: 40rpx 0;
}
.checked {
color: $main-color;
font-weight: bold;
}
.screen-btn {
display: flex;
width: 100%;
height: 88rpx;
line-height: 88rpx;
position: fixed;
bottom: 0;
> .screen-clear,
.screen-submit {
width: 50%;
text-align: center;
}
.screen-submit {
background: $main-color;
color: #fff;
}
}
.screen-item {
margin-bottom: 40rpx;
}
.flex1 {
padding-left: 10rpx;
}
.u-tag {
margin-right: 20rpx;
}
.line {
width: 40rpx;
height: 2rpx;
background: #999;
margin: 0 10rpx;
}
.u-bg {
background: #eff1f4;
border-radius: 0.4em;
font-size: 22rpx;
}
.screen-title {
height: 88rpx;
text-align: center;
font-size: 28upz;
line-height: 88rpx;
border-bottom: 1px solid #ededed;
}
.flex {
display: flex;
margin: 20rpx 0;
align-items: center;
}
.screen-view {
padding: 32rpx;
}
.bar {
padding: 0 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
width: 100%;
background: #fff;
z-index: 8;
> .bar-btn {
display: flex;
}
}
.nav {
background: #fff;
width: 100%;
display: flex;
height: 88rpx;
box-sizing: border-box;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
> .nav-item {
line-height: 88rpx;
height: 88rpx;
flex: 1;
text-align: center;
}
}
.click {
background: $main-color;
color: #fff;
margin: 0 4rpx;
font-size: 22rpx;
padding: 10rpx 20rpx;
border-radius: 100px;
}
.goods-list {
// #ifdef H5
height: calc(100vh - 176rpx);
// #endif
// #ifndef H5
height: calc(100vh - 88rpx);
// #endif
overflow: auto;
}
.goods-item {
border-radius: 20rpx;
background: #fff;
display: flex;
padding: 22rpx;
margin: 20rpx;
justify-content: space-between;
> .goods-item-desc {
flex: 2;
padding: 0 16rpx;
line-height: 1.7;
> .-item-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
> .-item-bootom-money {
> .-item-bl,
.-item-yj {
margin-right: 10rpx;
font-size: 24rpx;
color: $font-color-base;
}
}
}
> .-item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
> .-item-price {
color: $jd-color;
> span {
font-size: 36rpx;
}
}
}
}
.wrapper {
width: 100%;
}
</style>

129
pages/mine/distribution/withdrawal.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<view>
<view class="withdrawal-list">
<view class="title">提现金额</view>
<view class="content">
<view class="price">
<span> ￥</span>
<u-input v-model="price" placeholder="" type="number" />
</view>
<view class="all">
<view @click="handleAll" :style="{ color: $mainColor }">全部</view>
<view style="font-size: 24rpx; color: #999"
>可提现金额<span>{{ distributionData.canRebate | unitPrice }}</span
>元</view
>
</view>
</view>
</view>
<view class="submit" @click="cashd">提现</view>
</view>
</template>
<script>
import { distribution, cash } from "@/api/goods";
export default {
data() {
return {
price: 0,
distributionData: "",
};
},
mounted() {
this.init();
},
methods: {
cashd() {
this.price = this.price + "";
console.log(typeof this.price);
if (this.$u.test.amount(parseInt(this.price))) {
cash({ price: this.price }).then((res) => {
if(res.data.success){
uni.showToast({
title: '提现成功!',
duration: 2000,
icon:"none"
});
setTimeout(()=>{
uni.navigateBack({
delta: 1
});
},1000)
}
});
} else {
uni.showToast({
title: "请输入正确金额",
duration: 2000,
icon: "none",
});
}
},
handleAll() {
this.price = this.distributionData.canRebate;
},
/**
* 初始化推广商品
*/
init() {
uni.showLoading({
title: "加载中",
});
distribution().then((res) => {
if (res.data.result) {
this.distributionData = res.data.result;
}
uni.hideLoading();
});
},
},
};
</script>
<style lang="scss" scoped>
/deep/ .u-input__input,
.u-input {
font-size: 80rpx !important;
height: 102rpx !important;
}
/deep/ .u-input__input{
height: 100%;
font-size: 80rpx;
}
.content {
display: flex;
> .price {
width: 60%;
margin: 20rpx 0;
font-size: 80rpx;
display: flex;
}
> .all {
justify-content: center;
width: 40%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
}
.withdrawal-list {
margin: 20rpx 0;
background: #fff;
padding: 16rpx 32rpx;
}
.title {
font-size: 35rpx;
}
.submit {
margin: 80rpx auto;
width: 94%;
background: $light-color;
height: 90rpx;
color: #fff;
border-radius: 10rpx;
text-align: center;
line-height: 90rpx;
}
</style>

56
pages/mine/help/tips.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div class="wrapper">
<div v-html="res.content"></div>
</div>
</template>
<script>
import { getArticleDetail } from "@/api/article";
export default {
data() {
return {
res: "",
way: {
user: {
title: "用户协议",
type: "USER_AGREEMENT",
},
privacy: {
title: "隐私政策",
type: "PRIVACY_POLICY",
},
message: {
title: "证照信息",
type: "LICENSE_INFORMATION",
},
about: {
title: "关于我们",
type: "ABOUT",
},
},
};
},
mounted() {},
onLoad(option) {
uni.setNavigationBarTitle({
title: this.way[option.type].title,
});
this.init(option);
},
methods: {
init(option) {
getArticleDetail(this.way[option.type].type).then((res) => {
if (res.data.success) {
this.res = res.data.result;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
padding: 16rpx;
}
</style>

183
pages/mine/msgTips/main.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<view class="container">
<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/sysMsg/index')">
<u-col span="2" class="uCol" style="text-align:center;">
<image class="img" src="/static/mine/setting.png"></image>
</u-col>
<u-col span="7">
<p class="tit_title">系统消息</p>
<p class="tit_tips">查看系统消息</p>
</u-col>
<u-col span="3">
<view class="cell-more">
<u-tag size="mini" v-if="no_read.system_num>0" shape="circle" mode="dark" type="error" :text="no_read.system_num"></u-tag>
<span class="yticon icon-you"></span>
</view>
</u-col>
</u-row>
</view>
<!-- <view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
<u-row gutter="12" justify="start" @click="navigateTo('/pages/msgTips/packagemsg/index')">
<u-col span="2" class="uCol" style="text-align:center;">
<image class="img" src="/static/mine/logistics.png"></image>
</u-col>
<u-col span="7">
<p class="tit_title">物流消息</p>
<p class="tit_tips">查看物流消息</p>
</u-col>
<u-col span="3">
<view class="cell-more">
<u-tag v-if="no_read.logistics_num>0" shape="circle" mode="dark" type="warning" :text="no_read.logistics_num"></u-tag>
<span class="yticon icon-you"></span>
</view>
</u-col>
</u-row>
</view> -->
</view>
</template>
<script>
import {
mapMutations
} from "vuex";
import * as API_Message from "@/api/members.js";
export default {
data() {
return {
no_read: ''
};
},
onLoad() {
this.GET_NoReadMessageNum();
},
methods: {
...mapMutations(["logout"]),
navigateTo(url) {
uni.navigateTo({
url
});
},
/** 获取未读消息数量信息 */
GET_NoReadMessageNum() {
API_Message.getNoReadMessageNum().then(response => {
this.no_read = response.data
})
}
}
};
</script>
<style scoped lang='scss'>
.uCol {
display: flex;
justify-content: center !important;
}
.img {
width: 60rpx;
height: 60rpx;
}
.container {
background: #f9f9f9;
}
/deep/ .u-col-2 {
height: 60px;
line-height: 60px;
text-align: center !important;
}
.qicon {
text-align: center;
display: block;
font-size: 20px;
}
.redBox {
display: inline-block;
text-align: center;
line-height: 1.5em;
font-size: 12px;
min-width: 1.5em;
min-height: 1.5em;
background: #ed6533;
border-radius: 50%;
color: #fff;
}
.tit_title {
color: $u-main-color;
}
.tit_tips {
color: $u-tips-color;
}
.u-col-3 {
text-align: right !important;
padding-right: 20rpx !important;
}
.list-cell {
background: #fff;
align-items: baseline;
padding: 20rpx 0;
line-height: 60rpx;
background: #fff;
justify-content: center;
&.log-out-btn {
margin-top: 40rpx;
.cell-tit {
color: $uni-color-primary;
text-align: center;
margin-right: 0;
}
}
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30rpx;
}
&.m-t {
margin-top: 16rpx;
}
.cell-more {
/* margin-top: 10rpx; */
height: 60rpx;
text-align: right;
/* display: flex;
justify-content: center; //这个是X轴居中
align-items: center; //这个是 Y轴居中 */
font-size: $font-lg;
color: $font-color-light;
/* width: 100rpx; */
}
.cell-tit {
flex: 1;
font-size: $font-base + 2rpx;
color: $font-color-dark;
margin-right: 10rpx;
}
.cell-tip {
font-size: $font-base;
color: $font-color-light;
}
}
</style>

128
pages/mine/msgTips/packageMsg/index.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<view class="container " style="font-size: 13px;">
<block v-for="(row, index) in messageList" :key="index">
<view class="msgItem">
<div class="msgMsg">
<div class="bagbar">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
</div>
<u-card @click="goDetail(row.sn,row.logi_id,row.ship_no)" :title="title" title-color="#666666" title-size="24" sub-title-color="#666666" sub-title-size="24" :border="false" :sub-title=row.status>
<view class="msg-body" slot="body">
<image class="msgImg" :src="row.goods_img" mode=""></image>
<view class="msgView">
<view>{{row.goodsName}}</view>
<view class="msgNum">订单号:{{row.sn}}</view>
</view>
</view>
</u-card>
</view>
</block>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</template>
<script>
import * as API_Message from "@/api/message.js";
export default {
data() {
return {
messageList: [],
title: "物流更新通知",
subTitle: "运输中",
loadStatus:'more',
params: {
pageNumber: 1,
pageSize: 10,
},
loadStatus:'more'
};
},
onLoad(){
this.GET_LogisticsList(true);
},
onReachBottom() {
this.params.pageNumber++
this.GET_LogisticsList(false)
},
methods: {
goDetail(sn,logi_id,ship_no){
uni.navigateTo({
url:'/pages/msgTips/packagemsg/logisticsDetail?order_sn=' + sn +'&logi_id='+logi_id+'&ship_no='+ship_no,
})
},
//获取物流消息
GET_LogisticsList(reset){
if (reset) {
this.params.pageNumber = 1
}
uni.showLoading({
title:"加载中"
})
API_Message.getLogisticsMessages(this.params).then(async response => {
uni.hideLoading()
const { data } = response
if (!data || !data.length) {
this.messageList.push(...data.data)
}
})
}
}
};
</script>
<style scoped lang='scss'>
.ddnumber {
color: $u-tips-color;
font-size: 24rpx;
}
.msg-body{
display: flex;
background-color: rgba(102, 110, 232, 0.0470588235294118);
.msgImg{
width: 160rpx;
height: 160rpx;
}
.msgView{
margin-left: 20rpx;
.msgNum:last-child{
margin-top: 60rpx;
}
}
}
.bagbar {
display: inline;
border-radius: 500px;
color: #fff;
font-size: 24rpx;
padding: 10rpx 20rpx;
background: $u-type-info-disabled;
}
.storeImg {
width: 100%;
height: 100rpx;
margin-right: 20rpx;
}
.container {
background: #F9F9F9;
min-height: 100vh;
}
.msgMsg {
text-align: center;
color: $u-tips-color;
}
.msgItem {
padding: 1em 0;
}
view{
font-size: 13px;
color: #666666;
}
u-card{
font-size: 13px;
color: #666666;
}
</style>

100
pages/mine/msgTips/packageMsg/logisticsDetail.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view class="logistics-detail">
<view class="card">
<view class="card-title">
<span>{{ logiList.shipper }}</span>快递 <span>{{ logiList.logisticCode }}</span>
</view>
<view class="time-line">
<u-time-line v-if="logiList.traces && logiList.traces.length != 0">
<u-time-line-item nodeTop="2" v-for="(item, index) in logiList.traces" :key="index">
<!-- 此处自定义了左边内容，用一个图标替代 -->
<template v-slot:node >
<view v-if="index == logiList.traces.length - 1" class="u-node" :style="{ background: $lightColor }" style="padding: 0 4px">
<!-- 此处为uView的icon组件 -->
<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
</view>
</template>
<template v-slot:content>
<view>
<!-- <view class="u-order-title">待取件</view> -->
<view class="u-order-desc">{{ item.AcceptStation }}</view>
<view class="u-order-time">{{ item.AcceptTime }}</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
<u-empty class="empty" v-else text="目前没有物流订单" mode="list"></u-empty>
</view>
</view>
</view>
</template>
<script>
import uniSteps from "@/components/uni-steps/uni-steps.vue";
import { getExpress } from "@/api/trade.js";
export default {
components: { uniSteps },
data() {
return {
express: "",
resData: {
title: "物流详情",
},
logiList: "",
activeStep: 0,
};
},
methods: {
init(sn) {
getExpress(sn).then((res) => {
this.logiList = res.data.result;
});
},
},
onLoad(option) {
let sn = option.order_sn;
this.init(sn);
},
};
</script>
<style lang="scss">
.card-title {
background: #f2f2f2;
}
.logistics-detail {
margin-top: 20rpx;
padding: 0 16rpx;
}
.card {
background: #fff;
border-radius: 20rpx;
width: 100%;
> .card-title {
font-size: 24rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 16rpx;
}
> .time-line {
padding: 16rpx 32rpx;
}
}
.u-order-title {
font-weight: bold;
}
.u-order-desc {
font-size: 26rpx;
color: #666;
margin: 10rpx 0;
}
.u-order-time {
font-size: 24rpx;
color: #999;
}
.empty {
padding: 40rpx 0;
}
</style>

140
pages/mine/msgTips/serviceMsg/index.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<view class="container">
<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
<u-row gutter="12" justify="start">
<u-col span="2">
<img
class="list_img"
src="https://web-assets.fancynode.com.cn/web_v1/images/pxcook/features/icon-cloud.png"
alt
/>
</u-col>
<u-col span="7">
<p class="tit_title">
<img
src="https://web-assets.fancynode.com.cn/web_v1/images/pxcook/features/icon-cloud.png"
alt
/>
在线客服
</p>
<p class="tit_tips">查看回复客服的消息</p>
</u-col>
<u-col span="3">
<text class="cell-more">
<p class="msgTime">2020-12-12</p>
<span class="redBox">55</span>
</text>
</u-col>
</u-row>
</view>
</view>
</template>
<script>
import { mapMutations } from "vuex";
export default {
data() {
return {};
},
methods: {
...mapMutations(["logout"]),
}
};
</script>
<style scoped lang='scss'>
.msgTime {
font-size: 13px;
}
page {
background: $page-color-base;
}
.list_img {
width: 100%;
height: 100%;
vertical-align: middle;
border-radius: 0.4em;
}
.qicon {
text-align: center;
display: block;
font-size: 20px;
}
.redBox {
padding: 10rpx 12rpx;
display: inline-block;
text-align: center;
font-size: 12px;
line-height: 1em;
width: 1em;
height: 1em;
background: #ed6533;
border-radius: 50%;
color: #fff;
}
.tit_title,
.tit_tips {
margin-left: 8rpx;
}
.tit_title {
color: $u-main-color;
> img {
vertical-align: middle;
margin-right: 10rpx;
width: 40rpx;
height: 40rpx;
}
}
.tit_tips {
color: $u-tips-color;
}
.list-cell {
align-items: baseline;
padding: 20rpx 30rpx;
line-height: 60rpx;
position: relative;
background: #fff;
justify-content: center;
&.log-out-btn {
margin-top: 40rpx;
.cell-tit {
color: $uni-color-primary;
text-align: center;
margin-right: 0;
}
}
&.cell-hover {
background: #fafafa;
}
&.b-b:after {
left: 30rpx;
}
&.m-t {
margin-top: 16rpx;
}
.cell-more {
text-align: right;
margin-top: 10rpx;
height: 60rpx;
display: flex;
justify-content: center; //这个是X轴居中
align-items: center; //这个是 Y轴居中
align-self: baseline;
font-size: $font-lg;
color: $font-color-light;
margin-left: 10rpx;
}
.cell-tit {
flex: 1;
font-size: $font-base + 2rpx;
color: $font-color-dark;
margin-right: 10rpx;
}
.cell-tip {
font-size: $font-base;
color: $font-color-light;
}
}
</style>

102
pages/mine/msgTips/sysMsg/index.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<view class="container">
<block v-for="(row, index) in messageList" :key="index">
<view class="msgItem">
<div class="is_read">
<!-- {{row.is_read}} -->
<span v-if="row.is_read"></span>
<span v-else class="red">·</span>
</div>
<div class="msgMsg">{{$u.timeFormat(row.send_time, 'yyyy-mm-dd')}}</div>
<u-card :title="title" :title-size="35" :border="false">
<view class slot="body">
<view class="u-body-item u-flex u-row-between u-p-b-0">
<view class="u-body-item-title u-line-2">{{row.content}}</view>
</view>
</view>
</u-card>
</view>
</block>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</template>
<script>
import { mapMutations } from "vuex";
import * as API_Message from "@/api/message.js";
export default {
data() {
return {
title: "系统消息",
subTitle: "未读",
finished: false,
loadStatus: "more",
params: {
pageNumber: 0,
pageSize: 5
},
messageList: []
};
},
onLoad() {
this.GET_MessageList(true);
},
onReachBottom() {
this.params.pageNumber++;
this.GET_MessageList(false);
},
methods: {
...mapMutations(["logout"]),
/** 获取站内消息 */
GET_MessageList(reset) {
if (reset) {
this.params.pageNumber = 1;
this.messageList = [];
}
uni.showLoading({
title: "加载中"
});
API_Message.getMessages(this.params).then(async response => {
uni.hideLoading();
const { data } = response;
if (!data || !data.length) {
this.messageList.push(...data.data);
this.handleReadPageMessages();
}
});
},
/** 设置消息已读 **/
handleReadPageMessages() {
const ids = this.messageList.map(item => item.id).join(",");
API_Message.messageMarkAsRead(ids).then(async () => {});
}
}
};
</script>
<style scoped lang='scss'>
.is_read{
position: absolute;
right: 25px;
top: 80rpx;
z-index: 999;
}
.container {
background: #f9f9f9;
min-height: 100vh;
}
.red{
color: coral;
font-size: 100rpx;
}
.msgMsg {
text-align: center;
color: $u-tips-color;
}
.msgItem {
padding: 1em 0;
position: relative;
}
</style>

460
pages/mine/myCollect.vue Normal file
View File

@@ -0,0 +1,460 @@
<template>
<view class="content">
<view class="navbar">
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="tabClick(index)">
<text :class="{current: tabCurrentIndex === index}">{{item.text}}</text>
</view>
</view>
<view class="swiper-box" duration="300" @change="changeTab">
<view v-if="tabCurrentIndex == 0" class="tab-content">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
<!-- 空白页 -->
<empty v-if="goodsEmpty"></empty>
<!-- 数据 -->
<u-swipe-action @open="openChange(item,index,'goods')" :show="item.selected" btn-width="180" :options="options" v-else v-for="(item,index) in goodList"
@click="clickGoodsSwiperAction(item,index)" :index="index" :key="index">
<view class="goods" @click="goGoodsDetail(item)">
<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
<u-loading slot="loading"></u-loading>
</u-image>
<view class="goods-intro">
<view>{{item.goodsName}}</view>
<view class="goods-sn">{{item.goods_sn}}</view>
<view>￥{{item.price | unitPrice}}</view>
</view>
<!-- <button @click.stop="goSimilar(item)">找相似</button> -->
</view>
</u-swipe-action>
<uni-load-more :status="goodLoad"></uni-load-more>
</scroll-view>
</view>
<view v-else class="tab-content">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
<!-- 空白页 -->
<empty v-if="storeEmpty"></empty>
<!-- 数据 -->
<u-swipe-action @open="openChange(item,index,'store')" :show="item.selected" btn-width="180" :options="options" v-else v-for="(item,index) in storeList" :key="index"
@click="clickstoreSwiperAction(item)">
<view class="store" @click="gostoreMainPage(item.storeId)">
<view class="intro">
<view class="store-logo">
<u-image width="102rpx" height="102rpx" :src="item.logo" :alt="item.storeName" mode="aspectFit">
<u-loading slot="loading"></u-loading>
</u-image>
</view>
<view class="store-name">
<view>{{item.storeName}}</view>
<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated" text="自营" mode="plain" shape="circle" />
</view>
<view class="store-collect">
<view>进店逛逛</view>
</view>
</view>
</view>
</u-swipe-action>
<uni-load-more :status="storeLoad"></uni-load-more>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import {
getGoodsCollection,
deleteGoodsCollection,
deleteStoreCollection,
} from "@/api/members.js";
export default {
data() {
return {
options: [
{
text: "取消",
style: {
backgroundColor: this.$lightColor,
},
},
],
tabCurrentIndex: 0,
navList: [
{
text: "商品(0)",
loadingType: "more",
params: {
pageNumber: 1,
pageSize: 10,
},
},
{
text: "店铺(0)",
loadingType: "more",
params: {
pageNumber: 1,
pageSize: 10,
},
},
],
goodLoad: "more",
storeLoad: "more",
goodsEmpty: false,
storeEmpty: false,
goodList: [],
storeList: [],
};
},
onLoad() {
// this.loadData();
this.getGoodList();
this.getstoreList();
},
methods: {
openChange(val, index, type) {
const { goodList, storeList } = this;
let way;
type == "goods" ? (way = goodList) : (way = storeList);
way.forEach((item, ids) => {
this.$set(item, "selected", false);
});
this.$set(val, "selected", false);
val.selected = true;
console.log(val.selected);
},
/* openstore(val, index) {
this.storeList.forEach((item, ids) => {
this.$set(item, "selected", false);
});
this.$set(val, "selected", false);
val.selected = true;
}, */
/** 点击取消按钮 */
clickGoodsSwiperAction(val, index) {
deleteGoodsCollection(val.skuId).then((res) => {
console.log(res);
if (res.statusCode == 200) {
this.storeList = [];
this.goodList = []
this.getGoodList();
}
});
},
clickstoreSwiperAction(val) {
deleteStoreCollection(val.storeId).then((res) => {
if (res.statusCode == 200) {
this.storeList = [];
this.getstoreList();
}
});
},
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
console.log(this.tabCurrentIndex);
},
changeTab(e) {
this.tabCurrentIndex = e.target.current;
},
goSimilar(goods) {
//找相似
uni.navigateTo({
url:
"/pages/user/similarGoods?goods=" +
encodeURIComponent(JSON.stringify(goods)),
});
},
goGoodsDetail(val) {
//商品详情
uni.navigateTo({
url: "/pages/product/goods?id=" + val.skuId +"&goodsId="+val.goodsId,
});
},
gostoreMainPage(id) {
//店铺主页
uni.navigateTo({
url: "/pages/product/shopPage?id=" + id,
});
},
getGoodList() {
uni.showLoading({
title: "加载中",
});
getGoodsCollection(this.navList[0].params, "GOODS").then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
if (res.statusCode == 200) {
let data = res.data.result;
data.selected = false;
this.navList[0].text = `商品(${data.total})`;
if (data.total == 0) {
this.goodsEmpty = true;
} else if (data.total < 10) {
this.goodLoad = "noMore";
this.goodList.push(...data.records);
} else {
this.goodList.push(...data.records);
if (data.total.length < 10) this.goodLoad = "noMore";
}
}
}
});
},
getstoreList() {
uni.showLoading({
title: "加载中",
});
getGoodsCollection(this.navList[1].params, "store").then((res) => {
uni.hideLoading();
uni.stopPullDownRefresh();
if (res.statusCode == 200) {
if (res.statusCode == 200) {
let data = res.data.result;
data.selected = false;
this.navList[1].text = `店铺(${data.total})`;
if (data.total == 0) {
this.storeEmpty = true;
} else if (data.total < 10) {
this.storeLoad = "noMore";
this.storeList.push(...data.records);
} else {
this.storeList.push(...data.records);
if (data.total.length < 10) this.storeLoad = "noMore";
}
}
}
});
},
loadMore() {
if (this.tabCurrentIndex == 0) {
this.navList[0].params.pageNumber++;
this.getGoodList();
} else {
this.navList[1].params.pageNumber++;
this.getstoreList();
}
},
},
onPullDownRefresh() {
if (this.tabCurrentIndex == 0) {
this.navList[0].params.pageNumber = 1;
this.goodList = [];
this.getGoodList();
} else {
this.navList[1].params.pageNumber = 1;
this.storeList = [];
this.getstoreList();
}
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.content {
width: 100%;
overflow: hidden;
}
.swiper-box {
overflow-y: auto;
}
.goods-price {
text-align: left;
}
.list-scroll-content {
height: 100%;
width: 100%;
}
.goods-name {
color: #333 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 22rpx;
}
/deep/ .u-swipe-content{
overflow: hidden;
}
.goods {
background-color: #fff;
border-bottom: 1px solid $border-color-light;
height: 190rpx;
display: flex;
align-items: center;
padding: 30rpx 20rpx;
margin-top: 20rpx;
image {
width: 131rpx;
height: 131rpx;
border-radius: 10rpx;
}
.goods-intro {
flex: 1;
font-size: $font-base;
line-height: 48rpx;
margin-left: 30rpx;
view:nth-child(1) {
line-height: 1.4em;
font-size: 24rpx;
max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
overflow: hidden;
color: #666;
}
view:nth-child(2) {
color: #cccccc;
font-size: 24rpx;
}
view:nth-child(3) {
color: $light-color;
}
}
button {
color: $main-color;
height: 50rpx;
width: 120rpx;
font-size: $font-sm;
padding: 0;
line-height: 50rpx;
background-color: #ffffff;
margin-top: 80rpx;
&::after {
border-color: $main-color;
}
}
}
.store {
background-color: #fff;
border: 1px solid $border-color-light;
border-radius: 16rpx;
margin: 20rpx 10rpx;
.intro {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx 0 40rpx;
height: 170rpx;
.store-logo {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.store-name {
flex: 1;
margin-left: 30rpx;
line-height: 2em;
:first-child {
font-size: $font-base;
}
:last-child {
font-size: $font-sm;
color: #999;
}
}
.store-collect {
border-left: 1px solid $border-color-light;
padding-left: 20rpx;
text-align: center;
:last-child {
color: #999;
font-size: $font-sm;
}
}
}
.store-goods {
// height: 300rpx;
// width: 750rpx;
white-space: nowrap;
position: relative;
padding: 30rpx 20rpx;
&::before {
content: "";
width: calc(100% - 40rpx);
position: absolute;
top: 0;
left: 20rpx;
z-index: 2;
border-top: 2rpx solid #eeeeee;
}
.store-item {
display: inline-block;
margin-left: 10rpx;
width: 250rpx;
overflow: hidden;
image {
width: 228rpx;
height: 180rpx;
}
> .goods-price {
color: $main-color;
text:first-child {
font-size: $font-sm;
}
text:last-child {
font-size: $font-base;
font-weight: bold;
}
}
}
}
}
.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: 26rpx;
text {
position: relative;
}
text.current {
color: $light-color;
font-weight: bold;
font-size: 28rpx;
&::after {
content: "";
position: absolute;
left: 20rpx;
bottom: -10rpx;
width: 30rpx;
height: 0;
border-bottom: 2px solid $light-color;
}
}
}
}
</style>

343
pages/mine/myTracks.vue Normal file
View File

@@ -0,0 +1,343 @@
<template>
<view class="myTracks" v-if="refresh">
<empty v-if="nomsg"></empty>
<view v-else v-for="(item, index) in list" :key="index">
<view class="myTracks-title" @click="gostore(item)">{{item.storeName}}</view>
<view class="myTracks-items">
<view class="myTracks-item">
<u-checkbox-group>
<u-checkbox v-model="item.___isDel" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx" @change="changeChecked(item)"></u-checkbox>
</u-checkbox-group>
<view class="myTracks-item-img" @click.stop="goDetail(item)">
<image :src="item.thumbnail"></image>
</view>
<view class="myTracks-item-content" @click.stop="goDetail(item)">
<view class="myTracks-item-title">
{{ item.goodsName }}
<view class="myTracks-item-title-desc"> </view>
</view>
<view class="myTracks-item-price">
￥{{ item.price | unitPrice }}
</view>
<!-- <view class="myTracks-item-btn" @click.stop="goSimilar(item)">
找相似
</view> -->
</view>
</view>
</view>
<view class="myTracks-divider"></view>
</view>
<uni-load-more :status="loadStatus"></uni-load-more>
<view v-if="editFlag">
<view class="myTracks-action-placeholder"></view>
<view class="myTracks-action">
<view class="myTracks-action-check">
<u-checkbox-group>
<u-checkbox v-model="allChecked" v-if="editFlag" active-color="#ff6b35" style="margin-right: 10rpx" @change="checkedAllitem"></u-checkbox>
全选
</u-checkbox-group>
</view>
<view>
<u-button type="warning" plain="true" @click="delAllTracks" class="myTracks-action-btn">
删除
</u-button>
</view>
</view>
</view>
</view>
</template>
<script>
import { myTrackList, deleteHistoryListId } from "@/api/members.js";
export default {
data() {
return {
editFlag: false,
allChecked: false,
loadStatus: "more",
nomsg: false,
params: {
pageNumber: 1,
pageSize: 10,
},
refresh: true,
list: [],
};
},
onPullDownRefresh() {
this.params.pageNumber = 1;
this.list = [];
this.getList();
},
onReachBottom() {
if (this.loadStatus != "noMore") {
this.params.pageNumber++;
this.getList();
}
},
onLoad() {
this.getList();
},
methods: {
gostore(val) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + val.storeId,
});
},
setStyle(text) {
//导航按钮文本设置
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
let titleNView = currentWebview.getStyle().titleNView;
titleNView.buttons[0].text = text;
if (text == "完成") {
this.list.forEach((key) => {
key.history.forEach((item) => {
this.$set(item, "___isDel", false);
});
});
}
currentWebview.setStyle({
titleNView: titleNView,
});
// #endif
// #ifdef H5
// h5 临时方案
document.getElementsByClassName("uni-btn-icon")[1].innerText = text;
// #endif
},
goDetail(item) {
//跳转详情
uni.navigateTo({
url: "/pages/product/goods?id=" + item.id + "&goodsId=" + item.goodsId,
});
},
goSimilar(item) {
//找相似
uni.navigateTo({
url:
"/pages/user/similaritem?item=" +
encodeURIComponent(JSON.stringify(item)),
});
},
getList() {
uni.showLoading({
title: "加载中",
});
myTrackList(this.params).then((res) => {
uni.stopPullDownRefresh();
uni.hideLoading();
if (res.statusCode == 200) {
res.data.result &&
res.data.result.forEach((item) => {
item.___isDel = false;
});
let data = res.data.result;
if (data.total == 0) {
this.nomsg = true;
} else if (data.total < 10) {
this.loadStatus = "noMore";
this.list.push(...data);
} else {
this.list.push(...data);
if (data.length < 10) this.loadStatus = "noMore";
}
}
});
},
changeChecked(val) {
//点击后判断是不是全选
console.log(val);
const isCheckedAll = this.list.every((key) => {
console.log(key);
return key.___isDel == val.___isDel;
});
this.allChecked = isCheckedAll;
},
checkedAllitem() {
//全选按钮
this.list.forEach((key) => {
this.$set(key, "___isDel", this.allChecked);
});
},
delAllTracks() {
let way = [];
this.list.forEach((key) => {
if (key.___isDel) {
way.push(key.goodsId);
}
});
if (way.length == 0) return false;
deleteHistoryListId(way).then((res) => {
if (res.data.code == 200) {
this.list = [];
this.allChecked = false;
this.getList();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
},
},
onNavigationBarButtonTap(e) {
if (!this.editFlag) {
this.setStyle("完成");
} else {
this.setStyle("编辑");
}
this.editFlag = !this.editFlag;
},
};
</script>
<style lang="scss" scoped>
.myTracks {
width: 100%;
padding-top: 2rpx;
}
.myTracks-title {
width: 100%;
height: 110rpx;
padding-left: 20rpx;
font-size: 28rpx;
color: #666;
font-weight: bold;
background-color: #fff;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.myTracks-items {
padding-top: 2rpx;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.myTracks-item {
width: 100%;
height: 226rpx;
padding-left: 20rpx;
padding-right: 20rpx;
margin-bottom: 2rpx;
// border-radius: 6/@px;
background-color: #fff;
position: relative;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.myTracks-item-img {
margin-right: 20rpx;
border-radius: 8rpx;
image {
width: 130rpx;
height: 130rpx;
border-radius: 8rpx;
}
}
.myTracks-item-content {
}
.myTracks-item-title {
font-size: 28rpx;
color: #333;
}
.myTracks-item-title-desc {
font-size: 28rpx;
color: #999;
}
.myTracks-item-price {
font-size: 28rpx;
color: $light-color;
padding: 10rpx 0 0 0;
}
.myTracks-item-price-now {
font-size: 28rpx;
color: $light-color;
margin: 0 10rpx;
}
.myTracks-item-price-origin {
font-size: 28rpx;
color: #999;
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
text-decoration: line-through;
}
.myTracks-item-btn {
position: absolute;
right: 20rpx;
bottom: 20rpx;
width: 120rpx;
height: 42rpx;
background-color: #fff;
border: 1px solid $aider-light-color;
border-radius: 10rpx;
font-size: 24rpx;
color: $aider-light-color;
display: flex;
justify-content: center;
align-items: center;
}
.myTracks-action-btn {
width: 130rpx;
height: 60rpx;
line-height: 60rpx;
}
.myTracks-divider {
width: 100%;
height: 20rpx;
}
.myTracks-action-placeholder {
height: 110rpx;
}
.myTracks-action {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
padding: 0 20rpx;
box-sizing: border-box;
background-color: #fff;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.myTracks-action-check {
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
</style>

340
pages/mine/point/myPoint.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<view class="content">
<view class="portrait-box">
<image src="/static/pointTrade/point_bg_1.png" mode=""></image>
<image class="point-img" src="/static/pointTrade/tradehall.png" />
<view class="position-point">
<view class="apply-point" @click="goIntro"><text>积分介绍</text></view>
</view>
</view>
<u-row class="portrait-box2">
<u-col span="6" class="portrait-box2-col" :gutter="16">
<text>累计获得：</text>
<text class="pcolor">{{ pointData.point || 0 }}</text>
</u-col>
<u-col span="6" class="portrait-box2-col">
<text>未使用：</text>
<text class="pcolor">{{ pointData.variablePoint || 0 }}</text>
</u-col>
</u-row>
<u-row class="portrait-box3">
<!-- #ifndef MP-WEIXIN -->
<u-col span="8">近30天记录</u-col>
<u-col textAlign="right" span="4" @click="goDetail" class="more">更多</u-col>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="mp-weixin-more">
<view>近30天记录</view>
<view @click="goDetail">更多</view>
</view>
<!-- #endif -->
</u-row>
<view class="dataList" v-for="(item, index) in list" :key="index">
<view>
<view>{{ item.content }}</view>
<view>{{ item.createTime}}</view>
</view>
<view><span>{{item.pointType == "1" ? '+' : '-'}}</span>{{ item.variablePoint }}</view>
</view>
<uni-load-more :status="count.loadStatus"></uni-load-more>
<u-popup v-model="show" mode="bottom" :closeable="true">
<view class="title">申请积分</view>
<u-form :model="form" ref="uForm">
<u-form-item label="选择店铺" label-width="140">
<u-input v-model="storeParams.storeName" type="select" @click="showstore" placeholder="请选择店铺" />
</u-form-item>
<u-form-item label="申请积分" label-width="140">
<u-input v-model="storeParams.point" type="number" placeholder="请输入积分数量" />
</u-form-item>
</u-form>
<button class="btn-mini" @click="submit" :disabled="avoidClick">提交申请</button>
</u-popup>
</view>
</template>
<script>
import { getPoints, getPointsData } from "@/api/members.js";
import { getMemberPointSum } from "@/api/members.js";
import { contractStep } from "@/api/safe.js";
import storage from "@/utils/storage.js";
export default {
onShow() {
this.userInfo = storage.getUserInfo();
},
data() {
return {
count: {
loadStatus: "more",
},
list: [],
userInfo: [],
params: {
pageNumber: 1,
pageSize: 10,
start_time: 0,
end_time: 0,
},
pointData: {},
show: false,
form: {},
showAction: false,
actionList: [],
storeParams: {
point: 0,
storeId: 0,
storeName: "请选择店铺",
},
avoidClick: false,
isCertificate: true,
};
},
onLoad() {
contractStep().then((res) => {
//是否实名认证
console.log(res);
this.isCertificate = res.data == 1 ? true : false;
});
getPoints().then((res) => {
this.count = res.data;
});
this.initpointDataData();
this.getList();
},
onReachBottom() {
this.params.pageNumber++;
this.getList();
},
methods: {
getList() {
let date = Date.parse(new Date()) / 1000;
let params = this.params;
params.start_time = date - 60 * 60 * 24 * 30; //30天前时间
params.end_time = date;
// console.log(params)
// return;
uni.showLoading({
title: "加载中",
});
getPointsData(params).then((res) => {
uni.hideLoading();
if (res.data.success) {
let data = res.data.result.records;
if (data.length < 10) {
this.$set(this.count, "loadStatus", "noMore");
this.list.push(...data);
} else {
this.list.push(...data);
if (data.length < 10) this.$set(this.count, "loadStatus", "noMore");
}
}
});
},
initpointDataData() {
//累计获得累计使用
getMemberPointSum().then((res) => {
this.pointData = res.data.result;
});
},
goDetail() {
//积分明细
uni.navigateTo({
url: "/pages/point/pointDetail",
});
},
goIntro() {
//跳转详情
uni.navigateTo({
url: "/pages/pointTrade/pointIntro",
});
},
},
};
</script>
<style lang="scss" scoped>
.mp-weixin-more {
width: 96vw;
padding: 0 2vw;
display: flex;
align-items: center;
height: 100%;
justify-content: space-between;
}
.u-close--top-right {
top: 22rpx;
}
.i_time {
color: $u-tips-color;
}
.title {
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
font-weight: bold;
}
.btn-mini {
margin: 20rpx auto;
font-size: 24rpx;
border-radius: 6rpx;
}
.u-form-item {
padding: 10rpx 30rpx 10rpx 20rpx;
}
.dataList {
width: 100%;
height: 130rpx;
padding: 0 20rpx;
background: #ffffff;
font-size: $font-sm;
// line-height: 2em;
border-bottom: 1px solid $border-color-light;
display: flex;
justify-content: end;
align-items: center;
.colorRed {
color: #f04844;
}
> view:nth-child(1) {
flex: 1;
line-height: 40rpx;
view {
color: #666666;
}
:last-child {
color: #999;
}
}
> view:nth-child(2) {
width: 100rpx;
text-align: center;
}
}
.portrait-box2 {
height: 100rpx;
background: #ffffff;
border-radius: 0 0 20rpx 20rpx;
margin: 0 20rpx;
font-size: 26rpx;
/deep/ .u-col {
text-align: center !important;
}
/deep/ .u-col:first-child {
border-right: 1px solid $border-color-light;
}
.pcolor {
color: #4ebb9d;
}
}
.portrait-box3 {
// #ifdef MP-WEIXIN
display: flex;
// #endif
height: 110rpx;
background-color: #f1f1f1;
margin-top: 20rpx;
font-size: 28rpx;
.u-col {
padding: 0 20rpx;
}
}
.content {
background: #f9f9f9;
}
.more {
text-align: right;
color: $u-tips-color;
font-size: 24rpx;
padding-right: 40rpx !important;
}
.portrait-box {
background-color: $main-color;
height: 250rpx;
background: linear-gradient(134deg, #28d094 2%, #1abc9c 98%);
border-radius: 20rpx 20rpx 0 0;
margin: 20rpx 20rpx 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
> image:first-child {
width: 263rpx;
height: 250rpx;
position: absolute;
left: 0;
bottom: 0;
transform: rotateY(180deg);
}
.position-point {
position: absolute;
right: -2rpx;
top: 0;
.apply-point {
margin-top: 30rpx;
text-align: center;
line-height: 40rpx;
font-size: $font-sm;
color: #ffffff;
width: 142rpx;
height: 40rpx;
background: rgba(#ffffff, 0.2);
border-radius: 20rpx 0px 0px 20rpx;
}
}
.point-img {
height: 108rpx;
width: 108rpx;
margin-bottom: 30rpx;
}
.current {
font-size: 26rpx;
text {
vertical-align: middle;
}
> text:nth-child(2) {
color: #ffee80;
font-size: 40rpx;
margin-left: 20rpx;
}
}
.point {
font-size: 56rpx;
}
}
</style>

135
pages/mine/point/pointDetail.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<view class="point-detail">
<empty v-if="nomsg"></empty>
<view v-else class="box" v-for="(con,conIndex) in content" :key="con.conIndex">
<view class="time">
<view> <u-icon name="calendar"></u-icon>&nbsp; {{getMonth(con.months)}}</view>
<view>获得：{{con.point}} 使用：{{con.consumer_point}}</view>
</view>
<view class="dataList" v-for="(item,index) in con.history" :key="index">
<view>
<view>{{item.reason}}</view>
<view>{{item.time | unixToDate}}</view>
</view>
<view :class="{colorRed:item.consum_point_type==0}">{{item.consum_point_type==0?'-':'+'}}{{item.consum_point}}</view>
<view>{{item.point}}</view>
</view>
</view>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</template>
<script>
import {getPointsDataDetail} from '@/api/members.js';
export default {
data() {
return {
params:{
pageNumber:1,
pageSize:10,
start_time:0,
end_time:0
},
content:[],
loadStatus:'more',
nomsg:false,
};
},
onLoad() {
this.getDetailList()
},
methods:{
getDetailList(){
uni.showLoading({
title:'加载中'
})
getPointsDataDetail(this.params).then(res=>{
uni.stopPullDownRefresh();
uni.hideLoading()
if (res.statusCode == 200) {
console.log(res)
let data = res.data;
if (data.length==0) {
if(this.content.length==0){
this.nomsg = true;
}else{
this.loadStatus = 'noMore';
}
}else if(data[data.length-1].history.length<10){
this.content.push(...res.data);
this.loadStatus = 'noMore';
}else{
this.content.push(...res.data);
}
}
})
},
getMonth(time){
console.log(time)
let str = time+'';
let arr = str.split('');
arr.splice(4,0,'-');
return arr.join('')
}
},
onReachBottom(){
if(this.loadStatus == 'more'){
this.params.pageNumber++;
this.getDetailList()
}
}
}
</script>
<style lang="scss" scoped>
.point-detail{
.box{
.time{
display: flex;
justify-content: space-between;
padding: 0 20rpx;
align-items: center;
height: 112rpx;
color: #999999;
font-size: $font-sm;
}
.dataList {
width: 100%;
height: 120rpx;
border-top: 1px solid #f2f2f2;
padding: 30rpx;
background: #ffffff;
font-size: $font-sm;
// line-height: 1.5em;
margin-bottom: 10rpx;
display: flex;
justify-content: end;
align-items: center;
.colorRed{
color: #f04844;
}
>view:nth-child(1){
flex: 1;
line-height: 1.5em;
:nth-child(1){
color: #666666;
}
:nth-child(2){
color: #999;
}
}
>view:nth-child(2){
width: 80rpx;
text-align: center;
}
>view:nth-child(3){
width: 100rpx;
text-align: center;
}
}
}
}
</style>

125
pages/mine/set/editionIntro.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<view class="edition-intro">
<view class="logo c-content">
<view>
<image src="/static/img/edition.png" mode=""></image>
</view>
<view>版本不息&nbsp;优化不止</view>
</view>
<view class="edition c-content" v-for="(item,index) in editionHistory" :key="index">
<view class="level">
<text style="color: #1ABC9C;">{{item.version}}</text>
<text>{{$u.timeFormat(item.update_time, 'yyyy-mm-dd')}}</text>
</view>
<view class="detail" v-html="item.content"></view>
</view>
</view>
</template>
<script>
import * as API_Message from "@/api/message.js";
export default {
data() {
return {
editionHistory:[],
params: {
pageNumber: 1,
pageSize: 5
},
loadStatus:'more'
};
},
onLoad(){
if (uni.getSystemInfoSync().platform === 'android') {
this.params.type = 0;
} else {
this.params.type = 1;
}
this.GET_AppVersionList(true);
},
onReachBottom() {
if(this.loadStatus!='noMore'){
this.params.pageNumber++
this.GET_AppVersionList(false)
}
},
methods: {
GET_AppVersionList(reset){
if (reset) {
this.params.pageNumber = 1
}
uni.showLoading({
title:"加载中"
})
API_Message.getAppVersionList(this.params).then(response => {
uni.hideLoading()
if(response.statusCode==200){
const { data } = response
if(data.data.length<10){
this.loadStatus = 'noMore';
}
this.editionHistory.push(...data.data)
}
})
}
}
}
</script>
<style lang="scss">
.edition-intro{
.logo{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: $font-lg;
color: $font-color-light;
height: 330rpx;
margin-bottom: 20rpx;
>view:nth-child(1){
width: 144rpx;
height: 144rpx;
border: 1px solid #FFC71C;
border-radius: 50%;
position: relative;
margin-bottom: 30rpx;
image{
width: 80rpx;
height: 113rpx;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
}
}
}
.edition{
margin-bottom: 20rpx;
color: $font-color-light;
font-size: $font-sm;
.level{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx ;
border-bottom: 1px solid $border-color-light;
text:nth-child(1){
font-size: $font-base;
font-weight: 700;
}
}
.detail{
margin-left: 20rpx;
line-height: 2em;
padding: 20rpx 0;
}
}
}
</style>

162
pages/mine/set/feedBack.vue Normal file
View File

@@ -0,0 +1,162 @@
<template>
<div class="feedBack">
<div class="feedBack-box">
<h4>猜你想问</h4>
<div class="feedBack-item" @click="handleClick(index)" v-for="(item,index) in list" :key="index">
{{item.text}}
</div>
</div>
<div class="feedBack-box">
<h4>问题反馈 <span style="margin-left:10rpx;" v-if="feedBack.type">@{{ list.find(item=>{return item.value == feedBack.type }).text }}</span></h4>
<u-input class="field-input" height="500" :border-bottom="false" v-model="feedBack.context" type="textarea" placeholder="请输入反馈信息">
</u-input>
</div>
<!-- 上传凭证 -->
<div class="feedBack-box">
<view class="opt-view">
<view class="img-title">上传凭证（最多5张）</view>
<view class="images-view">
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
</view>
</view>
</div>
<div class="feedBack-box">
<h4>手机号</h4>
<u-input :border-bottom="false" v-model="feedBack.mobile" placeholder="请输入您的手机号">
</u-input>
</div>
<div class="submit" @click="submit()">提交</div>
</div>
</template>
<script>
import storage from "@/utils/storage.js";
import config from "@/config/config";
import { feedBack } from "@/api/members.js";
import { upload } from "@/api/common.js";
export default {
data() {
return {
storage,
config,
feedBack: {
type:"FUNCTION"
},
action: upload,
list: [
{ text: "功能相关", value: "FUNCTION" },
{ text: "优化反馈", value: "OPTIMIZE" },
{ text: "其他", value: "OTHER" },
],
};
},
onReady() {},
methods: {
handleClick(index) {
this.$set(this.feedBack, "type", this.list[index].value);
},
//图片上传
onUploaded(lists) {
let images = [];
lists.forEach((item) => {
images.push(item.response.result);
});
console.log(images);
this.feedBack.images = images.join(",");
},
submit() {
if (!this.feedBack.type) {
uni.showToast({
title: "请填写反馈类型",
duration: 2000,
icon: "none",
});
return false;
}
if (!this.feedBack.context) {
uni.showToast({
title: "请填写反馈类型",
duration: 2000,
icon: "none",
});
return false;
}
if (this.feedBack.mobile && !this.$u.test.mobile(this.feedBack.mobile)) {
uni.showToast({
title: "请填写您的正确手机号",
duration: 2000,
icon: "none",
});
return false;
}
feedBack(this.feedBack).then((res) => {
if (res.data.success) {
uni.showToast({
title: "提交成功!",
duration: 2000,
icon: "none",
});
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 500);
}
});
},
},
};
</script>
<style lang="scss" scoped>
.submit {
text-align: center;
background: $light-color;
height: 70rpx;
line-height: 70rpx;
color: #fff;
width: 92%;
margin-bottom: 100rpx;
margin: 0 auto;
border-radius: 100px;
}
.feedBack {
padding-bottom: 100rpx;
}
.feedBack-box {
background: #fff;
border-radius: 20rpx;
padding: 32rpx;
margin-bottom: 40rpx;
}
/deep/ .u-input__textarea {
padding: 12px;
}
.feedBack-box:nth-of-type(1) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.feedBack-item {
margin: 20rpx 0;
font-size: 24rpx;
color: #666;
}
h4 {
font-size: 30rpx;
}
.field-input {
margin: 20rpx 0;
padding: 20rpx 0;
background: #fafafa;
border-radius: 0.6em;
}
</style>

39
pages/mine/set/notify.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<view class="notify">
<u-cell-group>
<u-cell-item title="账户通知" :arrow="false">
<u-switch slot="right-icon" active-color="#1abc9c" size="40" v-model="setting.account"></u-switch>
</u-cell-item>
<u-cell-item title="物流通知" :arrow="false">
<u-switch slot="right-icon" active-color="#1abc9c" size="40" v-model="setting.logistics"></u-switch>
</u-cell-item>
<u-cell-item title="优惠促销" :arrow="false">
<u-switch slot="right-icon" active-color="#1abc9c" size="40" v-model="setting.cheap"></u-switch>
</u-cell-item>
<u-cell-item title="服务通知" :arrow="false">
<u-switch slot="right-icon" active-color="#1abc9c" size="40" v-model="setting.service"></u-switch>
</u-cell-item>
</u-cell-group>
</view>
</template>
<script>
export default {
data() {
return {
setting:{
account:false,
logistics:false,
cheap:false,
service:false
}
};
}
}
</script>
<style lang="scss" scoped>
uni-view{
font-size: 20rpx;
}
</style>

220
pages/mine/set/personMsg.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<view class="person-msg">
<view class="head c-content" @click="changeFace">
<image :src="form.face || '/static/missing-face.png'" mode=""></image>
<view>点击修改头像</view>
</view>
<u-form :model="form" ref="uForm" class="form">
<!-- <u-form-item label="用户名" label-width="150"
><u-input v-model="form.username" disabled
/></u-form-item> -->
<u-form-item label="昵称" label-width="150">
<u-input v-model="form.nickName" placeholder="请输入昵称" />
</u-form-item>
<u-form-item label="性别" label-width="150">
<!-- {{typeof list[0].value}} {{form.sex + typeof form.sex}} -->
<u-radio-group v-model="form.sex" :active-color="lightColor">
<u-radio name="1">男</u-radio>
<u-radio name="0">女</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="生日" label-width="150" right-icon="arrow-right">
<u-input v-model="birthday" disabled placeholder="请选择出生日期" @click="showBirth = true" />
<u-picker v-model="showBirth" mode="time" :confirm-color="lightColor" @confirm="selectTime"></u-picker>
</u-form-item>
<u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
<u-input v-model="form.___path" disabled @click="clickRegion" />
</u-form-item>
<view class="submit" @click="submit">保存</view>
</u-form>
<m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue" pickerSize="4"></m-city>
</view>
</template>
<script>
import { saveUserInfo } from "@/api/members.js";
import { upload } from "@/api/common.js";
import storage from "@/utils/storage.js";
import uFormItem from "@/uview-ui/components/u-form-item/u-form-item.vue";
import gkcity from "@/components/m-city/m-city.vue";
export default {
components: { uFormItem, "m-city": gkcity },
data() {
return {
lightColor: this.$lightColor,
form: {
face: "/static/missing-face.png",
regionId: [],
region: [],
sex: "1",
___path: "",
},
birthday: "",
photo: [
{ text: "立即拍照", color: this.$mainColor },
{ text: "从相册选择", color: this.$mainColor },
],
value: "",
region: [
{
id: "",
localName: "请选择",
children: [],
},
],
list: [
{
sex: "男",
value: "1",
disabled: false,
},
{
sex: "女",
value: "0",
disabled: false,
},
],
showBirth: false,
showRegion: false,
showAction: false,
};
},
created() {},
methods: {
getpickerParentValue(e) {
this.form.region = [];
this.form.regionId = [];
let name = "";
e.forEach((item, index) => {
if (item.id) {
this.form.region.push(item.localName);
this.form.regionId.push(item.id);
if (index == e.length - 1) {
name += item.localName;
} else {
name += item.localName + ",";
}
this.form.___path = name;
}
});
console.log(this.form);
},
clickRegion() {
this.$refs.cityPicker.show();
},
submit() {
if (this.form.regionId.length != 0 && this.birthday) {
delete this.form.___path;
let params = JSON.parse(JSON.stringify(this.form));
saveUserInfo(params).then((res) => {
console.log(res);
if (res.statusCode == 200) {
storage.setUserInfo(res.data.result);
uni.navigateBack();
}
});
} else {
uni.showToast({
title: "请填写生日和城市!",
duration: 2000,
icon: "none",
});
}
},
changeFace(index) {
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: upload,
filePath: tempFilePaths[0],
name: "file",
header: {
accessToken: storage.getAccessToken(),
},
success: (uploadFileRes) => {
let data = JSON.parse(uploadFileRes.data);
this.form.face = data.result;
},
});
},
});
},
selectRegion(region) {
//选择地址
this.$set(
this.form,
"address",
`${region.province.label} ${region.city.label} ${region.area.label}`
);
},
selectTime(time) {
// 生日
console.log(time);
this.form.birthday = `${time.year}-${time.month}-${time.day}`;
this.birthday = `${time.year} - ${time.month} - ${time.day}`;
// this.form.timestamp = `${time.year} - ${time.month} - ${time.day}`;
},
},
onLoad() {
// this.form.userName = storage.getUserInfo().username
this.form.nickName = storage.getUserInfo().nickName;
this.form.sex = storage.getUserInfo().sex || 1;
this.form.birthday = storage.getUserInfo().birthday;
this.birthday = storage.getUserInfo().birthday || "";
this.form.___path = storage.getUserInfo().region;
this.form.face = storage.getUserInfo().face || "";
this.form.regionId = storage.getUserInfo().regionId || [];
this.form.region = storage.getUserInfo().region || [];
console.log(this.form);
},
};
</script>
<style lang="scss" scoped>
.submit {
height: 90rpx;
line-height: 90rpx;
text-align: center;
margin-top: 90rpx;
width: 100%;
margin: 0 auto;
color: $main-color;
border-radius: 100px;
}
.head {
height: 260rpx;
color: $font-color-light;
font-size: $font-sm;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 2em;
image {
width: 144rpx;
height: 144rpx;
border-radius: 50%;
}
}
/deep/ .u-form {
background-color: #ffffff;
padding: 0;
margin-top: 30rpx;
.u-form-item {
padding: 0 20rpx;
height: 110rpx;
line-height: 110rpx;
}
}
.form {
background-color: #ffffff;
}
</style>

40
pages/mine/set/securityCenter/deviceManage.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<view class="device-manage">
<u-cell-group>
<u-cell-item class="border-top" :arrow="false" title="常用设备保护">
<u-switch slot="right-icon" active-color="#1abc9c" size="40" v-model="checked"></u-switch>
</u-cell-item>
</u-cell-group>
<view class="describe">开启常用设备保护后，在不常用的手机上登录时，需要进行账号及密码验证，通过后继续登录。</view>
<view class="title">常用设备</view>
<u-cell-group class="">
<u-cell-item
title="HUAWEI Mate30"
:center="true"
label="最近使用：2020-06-28北京市"
value="正在使用"
:value-style="{color:'#1abc9c','font-size':'14px'}"
:title-style="{'color':'#333'}"
>
</u-cell-item>
</u-cell-group>
</view>
</template>
<script>
export default {
data() {
return {
checked:true
};
}
}
</script>
<style lang="scss">
.device-manage{
.title{
padding:0 30rpx 20rpx;
}
}
</style>

250
pages/mine/set/securityCenter/editPassword.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<view class="box">
<view class="box-tips">
<h2>
{{verificationTitle[validateFlage==false ? 0 : 1].title}}
</h2>
<view class="verification">{{verificationTitle[step].desc}}</view>
</view>
<u-form :model="codeForm" class="form" ref="validateCodeForm">
<view v-if="!validateFlage">
<u-form-item label-width="120" label="手机号" prop="mobile">
<u-input v-model="codeForm.mobile" placeholder="请输入您的手机号" />
</u-form-item>
<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
<u-input v-model="codeForm.code" placeholder="请输入验证码" />
<u-verification-code unique-key="page-edit" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
<view @tap="getCode" class="text-tips">{{ tips }}</view>
</u-form-item>
<view class="submit" @click="validatePhone">验证</view>
<myVerification keep-running @send="verification" class="verification" ref="verification" business="LOGIN" />
</view>
<view v-if="validateFlage">
<u-form-item label-width="120" label="旧密码">
<u-input type="password" v-model="password" placeholder="请输入您的旧密码" />
</u-form-item>
<u-form-item label-width="120" label="新密码">
<u-input type="password" v-model="newPassword" placeholder="请输入您的新密码" />
</u-form-item>
<view class="submit" @click="updatePassword">修改密码</view>
</view>
</u-form>
</view>
</template>
<script>
import { sendMobile, resetByMobile, modifyPass } from "@/api/login";
import storage from "@/utils/storage.js";
import { md5 } from "@/utils/md5.js";
import myVerification from "@/components/verification/verification.vue";
import uuid from "@/utils/uuid.modified.js";
export default {
components: {
myVerification,
},
data() {
return {
uuid,
validateFlage: false, //是否进行了手机号验证
verificationTitle: [
{
title: "安全验证",
desc: "请输入当前手机号进行安全验证",
},
{
title: "修改密码",
desc: "请输入新密码",
},
],
step: 0, //当前验证步骤
flage: false, //是否验证码验证
// 验证码登录form
codeForm: {
mobile: "", //手机号
code: "", //验证码
},
newPassword: "",//新密码
password: "", //密码
tips: "", //提示
seconds: 60,
// 验证码登录校验
codeRules: {
mobile: [
{
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: "手机号码不正确",
trigger: ["blur"],
},
],
code: [
{
min: 4,
max: 6,
required: true,
message: "请输入验证码",
trigger: ["blur"],
},
],
},
};
},
onReady() {
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
this.$refs.validateCodeForm.setRules(this.codeRules);
},
watch: {
flage(val) {
if (val) {
if (this.$refs.uCode.canGetCode) {
uni.showLoading({
title: "正在获取验证码",
});
sendMobile(this.codeForm.mobile).then((res) => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
if (res.data.code == 200) {
this.$refs.uCode.start();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
} else {
this.$u.toast("请倒计时结束后再发送");
}
}
},
},
methods: {
// 修改密码
updatePassword() {
modifyPass({
newPassword: md5(this.newPassword),
password: md5(this.password),
}).then((res) => {
if (res.data.success) {
uni.showToast({
title: "修改成功!",
duration: 2000,
icon: "none",
});
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 1000);
}
});
},
// 验证码验证
verification(val) {
this.flage = val == this.$store.state.verificationKey ? true : false;
},
// 验证手机号
validatePhone() {
this.$refs.validateCodeForm.validate((valid) => {
if (valid) {
resetByMobile(this.codeForm).then((res) => {
if (res.data.success) {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "验证成功!",
icon: "none",
});
}
});
}
});
},
codeChange(text) {
this.tips = text;
},
end() {},
/**判断是否是当前用户的手机号 */
isUserPhone() {
let flage = false;
let user = this.$options.filters.isLogin();
if (user.mobile != this.codeForm.mobile) {
uni.showToast({
title: "请输入当前绑定手机号",
icon: "none",
});
flage = false;
} else {
flage = true;
}
return flage;
},
/**获取验证码 */
getCode() {
if (this.isUserPhone()) {
if (this.tips == "重新获取") {
this.flage = true;
}
if (!this.$u.test.mobile(this.codeForm.mobile)) {
uni.showToast({
title: "请输入正确手机号",
icon: "none",
});
return false;
}
if (!this.flage) {
this.$refs.verification.hide();
return false;
}
}
},
start() {
this.$u.toast("验证码已发送");
this.flage = false;
},
},
};
</script>
<style lang="scss" scoped>
@import url("../../../passport/login.scss");
.u-form-item {
margin: 40rpx 0;
}
.sendCode {
/deep/ .u-form-item--right__content__slot {
display: flex;
}
}
page {
background: #fff;
}
.box {
padding: 80rpx 0;
border-radius: 20rpx;
}
.box-tips {
margin: 0 72rpx;
}
.verification {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
</style>

84
pages/mine/set/securityCenter/faceLogin.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view class="face-login">
<u-cell-group>
<u-cell-item class="border-top" :arrow="false" title="面容登录">
<u-switch slot="right-icon" @change="faceSwitchChange" active-color="#1abc9c" size="40" v-model="checked"></u-switch>
</u-cell-item>
</u-cell-group>
<view class="describe">开启后可使用面容认证完成快捷登录，设置仅对本机生效。</view>
</view>
</template>
<script>
import storage from '@/utils/storage.js';
import { setBiolofy } from '@/api/passport.js';
export default {
data() {
return {
checked: true
};
},
methods: {
faceSwitchChange(value) {
if (value === true) {
const res = uni.getSystemInfoSync();
plus.device.getInfo({
success: function(e) {
let params = {
mobile_type: res.model,
secret_key: e.uuid
};
setBiolofy(params).then(res => {
if (res.statusCode === 200) {
storage.setFaceLogin(true);
}
});
},
fail: function(e) {
//plus.nativeUI.toast('获取设备信息错误：' + JSON.stringify(e));
console.error('getDeviceInfo failed: ' + JSON.stringify(e));
}
});
} else {
storage.setFaceLogin(false);
}
}
},
onLoad() {
// #ifdef APP-PLUS
uni.checkIsSupportSoterAuthentication({
success(res) {
if (!res.supportMode.find(e => e === 'facial')) {
plus.nativeUI.toast('此设备不支持面部识别');
uni.navigateBack();
}
uni.checkIsSoterEnrolledInDevice({
checkAuthMode: 'facial',
success(_res) {
if (!_res.isEnrolled) {
plus.nativeUI.toast('此设备未录入面部信息');
uni.navigateBack();
}
},
fail(_err) {
// plus.nativeUI.toast(JSON.stringify(_err));
uni.navigateBack();
}
});
},
fail(err) {
// plus.nativeUI.toast(JSON.stringify(err));
uni.navigateBack();
}
});
this.checked = storage.getFaceLogin() || false;
// #endif
}
};
</script>
<style lang="scss" scoped>
.face-login {
}
</style>

70
pages/mine/set/securityCenter/fingerLogin.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<view class="finger">
<u-cell-group>
<u-cell-item class="border-top" :arrow="false" title="指纹登录">
<u-switch slot="right-icon" @change="fingerSwitchChange" active-color="#1abc9c" size="40" v-model="checked"></u-switch>
</u-cell-item>
</u-cell-group>
<view class="describe">开启后可使用指纹认证完成快捷登录，设置仅对本机生效。如需修改指纹，请在系统设置中操作。</view>
</view>
</template>
<script>
import storage from '@/utils/storage.js';
import { setBiolofy } from '@/api/passport.js';
export default {
data() {
return {
checked: false
};
},
methods: {
fingerSwitchChange(value) {
if (value === true) {
const res = uni.getSystemInfoSync();
plus.device.getInfo({
success: function(e) {
let params = {
mobile_type: res.model,
secret_key: e.uuid
};
setBiolofy(params).then(res => {
if (res.statusCode === 200) {
storage.setFingerLogin(true);
}
});
},
fail: function(e) {
console.error('getDeviceInfo failed: ' + JSON.stringify(e));
}
});
} else {
storage.setFingerLogin(false);
}
}
},
onLoad() {
// #ifdef APP-PLUS
if (!plus.fingerprint.isSupport()) {
plus.nativeUI.toast('此设备不支持指纹识别');
uni.navigateBack();
}
if (!plus.fingerprint.isKeyguardSecure()) {
plus.nativeUI.toast('此设备未设置密码锁屏');
uni.navigateBack();
}
if (!plus.fingerprint.isEnrolledFingerprints()) {
plus.nativeUI.toast('此设备未录入指纹');
uni.navigateBack();
}
this.checked = storage.getFingerLogin() || false;
// #endif
}
};
</script>
<style lang="scss">
.finger {
}
</style>

36
pages/mine/set/securityCenter/securityCenter.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<view class="securityCenter">
<u-cell-group>
<u-cell-item title="修改密码" @click="navigateTo('/pages/mine/set/securityCenter/editPassword')"></u-cell-item>
</u-cell-group>
</view>
</template>
<script>
export default {
data() {
return {
mobile: "", //存储手机号
};
},
methods: {
navigateTo(url) {
uni.navigateTo({
url: url + `?mobile=${this.mobile}`,
});
},
},
onLoad(option) {
this.mobile = option.mobile;
},
};
</script>
<style lang="scss" scoped>
.securityCenter {
.u-cell {
line-height: normal;
}
}
</style>

219
pages/mine/set/setUp.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<view class="container">
<view class="person" @click="checkUserInfo()">
<u-image width=140 height="140" shape="circle" :src="userInfo.face || '/static/missing-face.png'" mode=""></u-image>
<view class="user-name">
<view>{{ userInfo.id ? userInfo.username || '' : '暂未登录' }}</view>
</view>
<u-icon color="#ccc" name="arrow-right"></u-icon>
</view>
<!-- #ifdef MP-WEIXIN -->
<view style="height: 20rpx; width: 100%"></view>
<!-- #endif -->
<u-cell-group :border="false">
<!-- #ifdef APP-PLUS -->
<u-cell-item title="清除缓存" :value="fileSizeString" @click="clearCache"></u-cell-item>
<!-- #endif -->
<u-cell-item title="安全中心" @click="navigateTo('/pages/mine/set/securityCenter/securityCenter')"></u-cell-item>
<u-cell-item title="意见反馈" @click="navigateTo('/pages/mine/set/feedBack')"></u-cell-item>
<!-- #ifndef H5 -->
<u-cell-item title="版本说明" @click="navigateTo('/pages/mine/set/editionIntro')"></u-cell-item>
<!-- #endif -->
<!-- <u-cell-item title="好评鼓励"></u-cell-item> -->
<u-cell-item title="关于我们" @click="navigateTo('/pages/mine/aboutUs')"></u-cell-item>
</u-cell-group>
<view class="submit" @click="showModalDialog">{{userInfo.id ?'退出登录':'返回登录'}}</view>
<u-modal show-cancel-button v-model="quitShow" @confirm="confirm" :confirm-color="lightColor" :async-close="true" :content="userInfo.id ? '确定要退出登录么？' : '确定要返回登录么？'"></u-modal>
</view>
</template>
<script>
import storage from "@/utils/storage.js";
export default {
data() {
return {
lightColor: this.$lightColor,
quitShow: false,
isCertificate: false,
userInfo: {},
fileSizeString: "0B",
};
},
methods: {
navigateTo(url) {
if (url == "/pages/set/securityCenter/securityCenter") {
url += `?mobile=${this.userInfo.mobile}`;
}
uni.navigateTo({
url: url,
});
},
/**
* 确认退出
* 清除缓存重新登录
*/
confirm() {
storage.setAccessToken("");
storage.setRefreshToken("");
storage.setUserInfo({});
uni.redirectTo({
url: "/pages/passport/login",
});
},
/**
* 显示退出登录对话框
*/
showModalDialog() {
this.quitShow = true;
},
/**
* 读取当前缓存
*/
getCacheSize() {
//获取缓存数据
let that = this;
plus.cache.calculate(function (size) {
let sizeCache = parseInt(size);
if (sizeCache == 0) {
that.fileSizeString = "0B";
} else if (sizeCache < 1024) {
that.fileSizeString = sizeCache + "B";
} else if (sizeCache < 1048576) {
that.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
} else if (sizeCache < 1073741824) {
that.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
} else {
that.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
}
});
},
/**
* 点击用户详情
* 判断当前是否进入用户中心
*/
checkUserInfo() {
if (this.$options.filters.isLogin("auth")) {
this.navigateTo("/pages/mine/set/personMsg");
} else {
uni.showToast({
title: "当前暂无用户请登录后重试",
duration: 2000,
icon: "none",
});
}
},
/**
* 清除当前设备缓存
*/
clearCache() {
//清理缓存
let that = this;
let os = plus.os.name;
if (os == "Android") {
let main = plus.android.runtimeMainActivity();
let sdRoot = main.getCacheDir();
let files = plus.android.invoke(sdRoot, "listFiles");
let len = files.length;
for (let i = 0; i < len; i++) {
let filePath = "" + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
plus.io.resolveLocalFileSystemURL(
filePath,
function (entry) {
if (entry.isDirectory) {
entry.removeRecursively(
function (entry) {
//递归删除其下的所有文件及子目录
uni.showToast({
title: "缓存清理完成",
duration: 2000,
icon: "none",
});
that.getCacheSize(); // 重新计算缓存
},
function (e) {
console.log(e.message);
}
);
} else {
entry.remove();
}
},
function (e) {
uni.showToast({
title: "文件路径读取失败",
duration: 2000,
icon: "none",
});
}
);
}
} else {
// ios
plus.cache.clear(function () {
uni.showToast({
title: "缓存清理完成",
duration: 2000,
icon: "none",
});
that.getCacheSize();
});
}
},
},
onShow() {
this.userInfo = this.$options.filters.isLogin();
// #ifdef APP-PLUS
this.getCacheSize();
// #endif
},
};
</script>
<style lang='scss' scoped>
.submit {
height: 90rpx;
line-height: 90rpx;
text-align: center;
margin-top: 90rpx;
background: #fff;
width: 100%;
margin: 0 auto;
color: $main-color;
}
.person {
height: 208rpx;
display: flex;
padding: 0 20rpx;
font-size: $font-base;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.user-name {
flex: 1;
margin-left: 30rpx;
line-height: 2em;
font-size: 34rpx;
}
}
.u-cell {
height: 110rpx;
/* line-height: 110rpx; */
padding: 0 20rpx;
align-items: center;
color: #333333;
}
/deep/ .u-cell__value {
color: #cccccc !important;
}
/deep/ .u-cell__right-icon-wrap {
color: #cccccc !important;
}
</style>

538
pages/mine/signIn.vue Normal file
View File

@@ -0,0 +1,538 @@
<template>
<view class="sign-in">
<view class="signin-btn-con">
<div class="circle-box">
<div class="cricle" @click="signIn()">
<span v-if="!ifSign" :class="{ active: signFlag || ifSign }">签到</span>
<span v-else :class="{ active: signFlag || ifSign }" :style="ifSign ? 'transform: rotateY(0deg);' : ''">已签</span>
</div>
</div>
<text class="tips">坚持每天连续签到可以获多重奖励哦</text>
</view>
<div class="date-card">
<view class="date-con">
<view class="date-tit">
<u-row style="width: 100%; justify-content: center;">
<div style="text-align: center; " class="text">{{ currentMonth }} {{ currentYear }}</div>
</u-row>
</view>
<view class="week">
<text v-for="item in weekArr" :key="item.id">{{ item }}</text>
</view>
<view class="date" v-for="obj in dataObj" :key="obj.id">
<view class="item" v-for="item in obj" :key="item.id" :class="item == '' ? 'hide' : ''" :animation="item == currentDay ? animationData : ''">
<view class="just" :class="signArr.indexOf(item) != -1 ? 'active' : ''">
<view class="top">{{ item }} </view>
<view class="bottom">
<u-icon name="error" v-if="item <= currentDay" color="#999"></u-icon>
</view>
</view>
<view class="back" :class="signArr.indexOf(item) != -1 ? 'active' : ''" :style="
signArr.indexOf(item) != -1 && ifSign
? 'transform: rotateY(0deg);'
: signArr.indexOf(item) != -1 && item != currentDay
? 'transform: rotateY(0deg);'
: ''
">
<view class="top">{{ item }}</view>
<view class="bottom">
<u-icon name="checkmark" color="#ff9f28"></u-icon>
</view>
</view>
</view>
</view>
</view>
</div>
<view class="mask" :class="{ show: maskFlag, trans: transFlag }" ref="mask">
<view class="mask-header">
<text class="close"></text>
<text>签到成功</text>
<text class="close" @click="close">×</text>
</view>
<view class="mask-con">
<view class="keep-sign">
本月已连续签到
<text>{{ continuity }}</text>
天
</view>
<u-icon size="120" style="margin: 50rpx 0" color="#ff9f28" name="checkmark"></u-icon>
<view class="mark">
<view>获得积分</view>
<text>{{ continuity_point }}</text>
</view>
<text class="text">连续签到可获得额外奖励哦！</text>
</view>
</view>
</view>
</template>
<script>
import { sign, signTime } from "@/api/point.js";
export default {
data() {
return {
continuity: 1,
continuity_point: 2,
header: {
top: 0,
height: 50,
},
signFlag: false,
animationData: {},
maskFlag: false,
transFlag: false,
weekArr: ["日", "一", "二", "三", "四", "五", "六"],
dateArr: [], //每个月的天数
monthArr: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
], //今天一个月英文
currentMonth: "", //当月
currentMonthIndex: "", //当月
currentYear: "", //今年
currentDay: "", //今天
currentWeek: "", //获取当月一号是周几
dataObj: [], //一个月有多少天这个获取
signArr: [], //本月签到过的天数 该参数用于请求接口后获取当月都哪天签到了
signAll: [], //所有签到数据
ifSign: false, //今天是否签到
};
},
async onLoad() {
//获取签到数据
var response = await signTime(
new Date().getFullYear() + "" + this.makeUp(new Date().getMonth() + 1)
);
this.signAll = response.data.result;
//获取展示数据
this.getDate();
},
methods: {
makeUp(val) {
if (val >= 10) {
return val;
} else {
return "0" + val;
}
},
// 返回
back() {
uni.navigateBack();
},
// 签到
async signIn() {
await sign().then((response) => {
if (this.ifSign) return;
if (this.signFlag) return;
if (response.data.code != 200) {
uni.$showToast({
title: response.message,
icon: "none",
});
return false;
}
var that = this;
var animation = uni.createAnimation({
duration: 200,
timingFunction: "linear",
});
this.signArr.push(this.currentDay);
this.animation = animation;
animation.rotateY(0).step();
this.animationData = animation.export();
setTimeout(
function () {
that.signFlag = true;
this.maskFlag = true;
this.ifSign = !this.ifSign;
animation.rotateY(0).step();
this.animationData = animation.export();
}.bind(this),
200
);
});
},
// 关闭弹窗
close() {
var that = this;
this.maskFlag = false;
this.transFlag = true;
setTimeout(function () {
that.transFlag = false;
}, 500);
},
change(id) {
var i = this.monthArr.indexOf(this.currentMonth),
curDay = null;
if (id === "1") {
i++;
if (i > 11) {
this.currentYear++;
i = 0;
}
this.currentMonth = this.monthArr[i];
this.currentMonthIndex = i + 1;
} else {
i--;
if (i < 0) {
this.currentYear--;
i = 11;
}
this.currentMonth = this.monthArr[i];
this.currentMonthIndex = i + 1;
}
curDay = this.getWeekByDay(this.currentYear + "-" + (i + 1) + "-1");
this.getMonthDays(i, curDay);
this.curentSignData();
},
getDate() {
//获取日子
var date = new Date(),
index = date.getMonth(),
curDay = null;
this.currentYear = date.getFullYear();
this.currentMonth = this.monthArr[index];
this.currentMonthIndex = index + 1;
this.currentDay = date.getDate();
console.log(this.currentDay);
console.log(this.signArr[this.signArr.length - 1]);
if (this.currentDay == this.signArr[this.signArr.length - 1]) {
console.log("12");
this.ifSign = true;
}
curDay = this.getWeekByDay(this.currentYear + "-" + (index + 1) + "-1");
this.getMonthDays(index, curDay);
this.curentSignData();
},
curentSignData() {
var date = new Date(),
index = date.getMonth(),
curDay = null;
this.signArr = [];
for (var i = 0; i < this.signAll.length; i++) {
var item = this.signAll[i];
item.createTime = item.createTime.split(" ")[0];
var itemVal = item.createTime.split("-");
console.log(itemVal);
if (
Number(itemVal[0]) === Number(this.currentYear) &&
Number(itemVal[1]) === Number(this.currentMonthIndex)
) {
this.signArr.push(Number(itemVal[2]));
console.log(JSON.stringify(this.signArr));
}
if (
Number(itemVal[0]) === Number(date.getFullYear()) &&
Number(itemVal[1]) === Number(index + 1) &&
Number(itemVal[2]) === Number(date.getDate())
) {
this.ifSign = true;
}
}
},
getMonthDays(index, day) {
//day 当月1号是周几
this.dateArr = [];
this.dataObj = [];
for (var i = 0; i < day; i++) {
this.dateArr.push("");
}
if (
index == 0 ||
index == 2 ||
index == 4 ||
index == 6 ||
index == 7 ||
index == 9 ||
index == 11
) {
for (let i = 1; i < 32; i++) {
this.dateArr.push(i);
}
}
if (index == 3 || index == 5 || index == 8 || index == 10) {
for (let i = 1; i < 31; i++) {
this.dateArr.push(i);
}
}
if (index == 1) {
if (
(this.currentYear % 4 == 0 && this.currentYear % 100 != 0) ||
this.currentYear % 400 == 0
) {
for (let i = 1; i < 30; i++) {
this.dateArr.push(i);
}
} else {
for (let i = 1; i < 29; i++) {
this.dateArr.push(i);
}
}
}
for (var y = 0; y < 10; y++) {
if (this.dateArr.length > 7) {
this.dataObj.push(this.dateArr.splice(0, 7));
} else {
for (let i = 0; i < 7 - this.dateArr.length; i++) {
this.dateArr.push("");
}
}
}
this.dataObj.push(this.dateArr);
},
getWeekByDay(dayValue) {
//dayValue=“2014-01-01”
var day = new Date(Date.parse(dayValue.replace(/-/g, "/"))).getDay(); //将日期值格式化
return day;
},
},
};
</script>
<style lang="scss" scoped>
.date-card {
padding: 0 40rpx;
}
.tips {
margin-top: 34rpx;
}
.circle-box {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-top: 60rpx;
background: #ff9f28;
display: flex;
justify-content: center; //这个是X轴居中
align-items: center; //这个是 Y轴居中
}
.cricle {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: #ff9f28;
text-align: center;
line-height: 160rpx;
color: #fff;
font-size: 40rpx;
}
page {
background: #fff;
}
.sign-in {
color: #333;
.signin-btn-con {
width: 100%;
height: 670rpx;
background-image: linear-gradient(180deg, #ff6b35, #ff9f28, #ffcc03);
display: flex;
flex-direction: column;
align-items: center;
text {
color: #fff;
font-size: 28rpx;
font-weight: 400;
}
}
.date-con {
background: #fff;
min-height: 730rpx;
border-radius: 0.8em;
border: 1px solid #ededed;
padding: 0 28rpx;
transform: translateY(-320rpx);
box-shadow: (1px 3px 5px rgba(0, 0, 0, 0.2));
}
.date-tit {
display: flex;
justify-content: space-between;
margin: 30rpx 0;
}
.week {
display: flex;
justify-content: space-between;
color: #a6a6a6;
font-size: 26rpx;
text {
width: 66rpx;
text-align: center;
}
}
.date {
margin: 10rpx 0 36rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 66rpx;
height: 80rpx;
border-radius: 5px;
overflow: hidden;
position: relative;
&.hide {
opacity: 0;
}
.just,
.back {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
.top {
position: relative;
flex: 1;
text-align: center;
line-height: 40rpx;
&:before {
content: "";
width: 40rpx;
height: 40rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 15rpx;
}
}
}
.just {
&.active {
display: none;
}
}
.back {
display: none;
&.active {
display: flex;
}
.top {
color: #ff9f28;
}
}
.bottom {
color: #999;
font-size: 20rpx;
height: 20rpx;
line-height: 20rpx;
text-align: center;
}
}
}
.mask {
position: fixed;
top: 0;
bottom: 0;
left: -100%;
right: 100%;
background: rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s;
&.show {
opacity: 1;
left: 0;
right: 0;
}
&.trans {
left: 0;
right: 0;
}
.mask-header {
width: 540rpx;
height: 130rpx;
line-height: 130rpx;
background: #ff9f28;
color: #fff;
font-size: 40rpx;
font-weight: 500;
display: flex;
justify-content: space-between;
.close {
width: 60rpx;
font-size: 66rpx;
font-weight: 400;
line-height: 60rpx;
}
}
.mask-con {
width: 540rpx;
height: 460rpx;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 24rpx;
border-radius: 0 0 9px 9px;
.keep-sign {
font-size: 30rpx;
margin-top: 30rpx;
text {
font-size: 46rpx;
font-weight: 500;
color: #999;
padding: 0 6rpx 0 8rpx;
}
}
.mark {
// flex: 1;
display: flex;
align-items: flex-end;
position: relative;
margin-bottom: 16rpx;
text {
margin-left: 4rpx;
color: #999;
}
}
.text {
color: #6f6f6f;
height: 90rpx;
}
}
}
}
</style>

342
pages/navigation/point/point-mall.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<view class="index">
<user-point />
<view class="index-head">
<scroll-view scroll-x class="list-scroll-content" :scroll-left="currentLeft" scroll-with-animation>
<view class="index-head-navs">
<view class="index-head-nav" v-for="(ele, index) in categoryIndexData" :key="index" :class="{ 'index-head-nav-active': tabIndex == index }" @click="setCat(index)">
{{ ele.name }}
</view>
</view>
</scroll-view>
</view>
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange" duration="300">
<swiper-item v-for="(nav, index) in categoryIndexData" :key="index" class="swiper-item">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
<view class="index-items">
<view class="index-item" v-for="(item, key) in nav.goods" :key="key" @click="toGoods(item)">
<view class="index-item-img">
<u-image :src="item.goodsSku.thumbnail" mode="aspectFill">
<u-loading slot="loading"></u-loading>
</u-image>
<view class="index-item-title">{{ item.goodsSku.goodsName }}</view>
<view class="index-item-price">
{{ item.points | unitPrice }}积分
<span class="tipsMkt">¥{{ item.goodsSku.price | unitPrice }}</span>
</view>
</view>
</view>
</view>
<uni-load-more :status="nav.loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import { getPointsCategory, getPointsGoods } from "@/api/promotions.js";
import userPoint from "./user";
export default {
components: {
"user-point": userPoint,
},
data() {
return {
headOffSetTop: "0",
tabIndex: 0,
categoryIndexData: [
{
categoryId: 0,
name: "全部",
loadStatus: "more",
goods: [],
params: {
pageNumber: 1,
pageSize: 10,
pointsGoodsCategoryId: "",
},
},
],
currentLeft: 0,
pageParams: {
pageNumber: 1,
pageSize: 10,
pointsGoodsCategoryId: 0,
},
flag: true,
};
},
onLoad() {},
async onPullDownRefresh() {
this.categoryIndexData[this.tabIndex].goods = [];
this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
this.categoryIndexData[this.tabIndex].loadStatus = "more";
this.loadGoods();
},
onPageScroll(e) {
if (e.scrollTop < -40 && this.flag) {
this.flag = false;
this.categoryIndexData[this.tabIndex].goods = [];
this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
this.categoryIndexData[this.tabIndex].loadStatus = "more";
uni.startPullDownRefresh();
this.loadGoods();
}
},
watch: {
tabIndex(val) {
if (
this.categoryIndexData[this.tabIndex].goods.length == 0 &&
this.categoryIndexData[this.tabIndex].params.pageNumber == 1
) {
this.loadGoods();
}
},
},
async mounted() {
//获取顶级分类
let response = await getPointsCategory();
if (response.data.success) {
let navData = response.data.result.records;
navData.forEach((item) => {
this.categoryIndexData.push({
categoryId: item.id,
goods: [],
loadStatus: "more",
name: item.name,
params: {
pageNumber: 1,
pageSize: 10,
pointsGoodsCategoryId: item.id,
},
});
});
}
this.loadGoods();
},
methods: {
// 跳转
navigateTo(url) {
uni.navigateTo({
url,
});
},
toGoods(item) {
//跳转详情
uni.navigateTo({
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.id}&whetherPoint=1`,
});
},
async loadGoods() {
let index = this.tabIndex;
//获取商品数据
let response = await getPointsGoods(this.categoryIndexData[index].params);
if (response.data.success) {
this.categoryIndexData[index].goods.push(
...response.data.result.records
);
if (response.data.result.records.length < 10) {
this.categoryIndexData[index].loadStatus = "noMore";
}
let _this = this;
setTimeout(function () {
_this.flag = true;
}, 3000);
}
uni.stopPullDownRefresh();
},
setCat(type) {
this.tabIndex = type;
},
ontabchange(e) {
this.tabIndex = e.detail.current;
if (e.detail.current > 3) {
this.currentLeft = (e.detail.current - 3) * 70;
} else {
this.currentLeft = 0;
}
},
loadMore() {
if (this.categoryIndexData[this.tabIndex].loadStatus == "more") {
this.categoryIndexData[this.tabIndex].params.pageNumber++;
this.loadGoods();
}
},
},
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
}
.tipsMkt {
float: right;
color: #c0c4cc;
font-size: 24rpx;
text-decoration: line-through;
margin-right: 20rpx;
}
.header {
background: $light-color;
position: relative;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
justify-content: center;
font-size: 26rpx;
font-size: 34rpx;
.left,
.right {
position: absolute;
width: max-content;
height: max-content;
top: 0;
bottom: 0;
margin: auto;
}
.left {
float: left;
top: 0;
bottom: 0;
left: 20rpx;
}
.right {
float: right;
right: 20rpx;
}
}
.index {
height: 100vh;
// #ifdef H5
height: calc(100vh - 44px);
// #endif
width: 100%;
overflow: hidden;
}
.index-head {
background: #fff;
}
.list-scroll-content {
white-space: nowrap;
width: 100%;
height: 100rpx;
color: #333;
}
.index-head-navs {
width: 100%;
height: 92rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
}
.index-head-nav {
width: 100rpx;
padding-bottom: 8rpx;
margin: 20rpx;
text-align: center;
box-sizing: border-box;
white-space: nowrap;
font-size: 30rpx;
color: #333;
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
&-active {
border-bottom: 4rpx solid $light-color;
}
}
.swiper-box {
// #ifdef H5
height: calc(100vh - 294px);
// #endif
// #ifndef H5
height: calc(100vh - 200px);
// #endif
.scroll-v {
height: 100%;
}
}
.index-items {
padding-top: 10rpx;
margin-top: 20rpx;
padding-left: 20rpx;
background-color: #f7f7f7;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.index-item {
width: 346rpx;
// height: 2100rpx;
background-color: #fff;
margin: 0 18rpx 20rpx 0;
border-radius: 16rpx;
box-sizing: border-box;
overflow: hidden;
height: auto;
padding-bottom: 20rpx;
}
.index-item-img {
/deep/ .u-image {
width: 346rpx !important;
height: 320rpx !important;
border-radius: 10rpx !important;
}
}
.index-item-title {
font-size: 26rpx;
color: #333333;
padding: 0 20rpx;
height: 80rpx;
box-sizing: border-box;
max-height: 3em;
overflow: hidden;
}
.index-item-title-desc {
font-size: 25rpx;
color: #999999;
margin-top: 10rpx;
}
.index-item-price {
font-size: 28rpx;
color: #ff5a10;
padding: 20rpx 0 0 20rpx;
}
</style>

54
pages/navigation/point/user.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div class="user-point">
<div class="point-rule">积分规则</div>
<div class="point-wrapper">
<u-image shape="circle" :lazy-load="true" width="100" height="100" :src="userInfo.face || '/static/missing-face.png'"></u-image>
<div class="whether-point">
<div>你的可用积分：<span class="point">{{userInfo.point || 0}}</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: this.$options.filters.isLogin() || {},
};
},
mounted (){
this.init()
},
methods: {
init() {
console.log(this.$options.filters.isLogin());
},
},
};
</script>
<style lang="scss" scoped>
.user-point {
padding: 0 20rpx;
height: 300rpx;
background: url("/static/point-bg.png") no-repeat;
background-size: 100%;
}
.point{
font-size: 40rpx;
}
.point-rule {
color: #fff;
display: flex;
justify-content: flex-end;
padding: 20rpx 0;
}
.point-wrapper {
display: flex;
}
.whether-point {
color: #fff;
margin-left: 30rpx;
font-size: 36rpx;
font-weight: bold;
}
</style>

666
pages/navigation/search/search.scss Normal file
View File

@@ -0,0 +1,666 @@
.sort-active {
border: 1px solid $light-color;
color: $light-color;
background: $jd-light-color !important;
}
.oldKeyList {
display: flex;
flex-wrap: wrap;
padding: 20rpx 3%;
> .oldKeyItem {
padding: 4rpx 24rpx;
background: #f0f2f5;
margin-right: 20rpx;
max-width: 200rpx;
border-radius: 100px;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 20rpx;
}
}
.promotion {
margin-top: 4rpx;
display: flex;
div {
span {
font-size: 24rpx;
color: $light-color;
margin-right: 10rpx;
padding: 0 4rpx;
border-radius: 2rpx;
}
}
}
/deep/ .u-row {
// #ifdef MP-WEIXIN
padding: 0 5%;
// #endif
}
.status_bar {
height: var(--status-bar-height);
background: #fff !important;
width: 100%;
}
page {
background-color: #fff !important;
}
.sort-box {
width: 100%;
height: 100%;
position: relative;
background: #f7f7f7;
.sort-list {
margin: 20rpx 0;
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
> .sort-item {
> .sort-title {
font-size: 26rpx;
font-weight: bold;
}
}
}
}
.null-view {
height: 140rpx;
}
.sort-btn {
display: flex;
position: fixed;
bottom: 0;
border-top: 1px solid #f7f7f7;
height: 100rpx;
left: 0;
width: 100%;
background: #fff;
align-items: center;
> view {
width: 50%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
margin: 0 20rpx;
border-radius: 1000px;
}
> .sort-btn-repick {
border: 1px solid #ededed;
}
> .sort-btn-confim {
color: #fff;
background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
}
}
.uinput {
width: 50% !important;
> .sort-radius {
height: 70rpx;
line-height: 70rpx;
font-size: 24rpx;
}
/deep/ .uni-input-input {
font-size: 24rpx;
}
}
.sort-radius {
margin: 0 12rpx;
background: #f7f7f7;
height: 65rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 1000px;
font-size: 24rpx;
}
.flex {
margin: 30rpx 0;
flex-wrap: wrap;
align-items: center;
> .sort-brand-item {
width: 33%;
text-align: center;
margin-bottom: 20rpx;
}
}
.scoll-page {
overflow: auto;
}
.content {
background-color: $bg-color;
height: 100vh;
overflow: hidden;
}
.storeSellerBox {
// #ifndef MP-WEIXIN
padding: 16rpx !important;
// #endif
}
.goodsClass {
padding: 0 20rpx;
/deep/ .u-row {
}
}
.index-nav-arrow:last-child {
margin-top: -22rpx;
}
.img {
width: 26rpx;
height: 26rpx;
}
.goodsRow {
/deep/ .u-row {
// #ifdef MP-WEIXIN
padding: 0%;
background: #fff;
// padding: 16rpx;
border-radius: 0.4em;
margin: 0 !important;
// #endif
}
background: #fff;
border-radius: 0.4em;
margin: 20rpx 0;
// #ifdef MP-WEIXIN
margin: 10rpx 0;
// #endif
padding: 0 16rpx;
width: 100%;
}
.add1 {
background: #fff;
padding: 30rpx 0;
}
.oldKeyRow {
background: #fff;
padding: 34rpx 3%;
border-bottom: 1px solid #eeeeee;
}
.logimg {
width: 40rpx;
height: 40rpx;
vertical-align: middle;
}
.clamp3 {
padding-top: 30rpx;
margin-bottom: 10rpx;
font-size: 28rpx;
color: #333333;
font-weight: 400;
display: -webkit-box;
line-height: 40rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2 !important;
overflow: hidden;
> span {
line-height: 1.5;
}
}
.switchType1 {
width: 50%;
overflow: hidden;
text-align: center;
> .img {
width: 182rpx;
height: 200rpx;
}
}
.imgGoods {
width: 182rpx;
height: 200rpx;
}
view {
display: block;
}
.storeSellerName {
color: #666;
overflow: hidden;
> div {
float: left;
}
> span {
float: right;
}
}
.countConfig {
padding: 10rpx 0;
color: #666;
display: flex;
font-size: 24rpx;
justify-content: space-between;
}
.search-box {
z-index: 99;
width: 100%;
background: $light-color;
padding: 20rpx 2.5%;
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
}
.search-box .mSearch-input-box {
width: 100%;
}
.search-box .input-box {
width: 85%;
flex-shrink: 1;
display: flex;
justify-content: center;
align-items: center;
}
.search-box .search-btn {
width: 15%;
margin: 0 0 0 2%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 28rpx;
color: #fff;
background: linear-gradient(to right, #ff9801, #ff570a);
border-radius: 60rpx;
}
.search-box .input-box > input {
width: 100%;
height: 60rpx;
font-size: 32rpx;
border: 0;
border-radius: 60rpx;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0 3%;
margin: 0;
background-color: #ffffff;
}
.uni-scroll-view-content {
background: #ededed !important;
}
.placeholder-class {
color: #9e9e9e;
}
.search-keyword {
width: 100%;
background-color: #ededed;
}
.keyword-list-box {
height: calc(100vh - 110rpx);
padding-top: 10rpx;
border-radius: 20rpx 20rpx 0 0;
background-color: #fff;
}
.keyword-entry-tap {
background-color: #eee;
}
.keyword-entry {
width: 94%;
height: 80rpx;
margin: 0 3%;
font-size: 30rpx;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid 1rpx #e7e7e7;
}
.keyword-entry image {
width: 60rpx;
height: 60rpx;
}
.keyword-entry .keyword-text,
.keyword-entry .keyword-img {
height: 80rpx;
display: flex;
align-items: center;
}
.keyword-entry .keyword-text {
width: 90%;
}
.keyword-entry .keyword-img {
width: 10%;
justify-content: center;
}
.keyword-box {
background-color: #fff;
}
.keyword-box .keyword-block {
padding: 10rpx 0;
}
.keyword-box .keyword-block .keyword-list-header {
width: 100%;
padding: 20rpx 3%;
font-size: 27rpx;
color: #333;
display: flex;
justify-content: space-between;
}
.keyword-box .keyword-block .keyword-list-header image {
width: 40rpx;
height: 40rpx;
}
.keyword-box .keyword-block .keyword > view {
width: 50%;
line-height: 1.75;
overflow: hidden;
padding: 0 3% 0 3% !important;
}
.u-tips {
font-size: 30rpx;
font-weight: 700;
color: #333;
}
.keyword {
display: flex;
flex-wrap: wrap;
}
.keyword-box {
position: relative;
}
.clear {
color: #666666;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
background: #f7f7f7;
}
.keyword-box .keyword-block .hide-hot-tis {
display: flex;
justify-content: center;
font-size: 28rpx;
color: #6b6b6b;
}
.navbar {
display: flex;
width: 100%;
height: 80rpx;
background: #fff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
z-index: 10;
// position: fixed;
// left: 0;
// top: var(--status-bar-height);
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 30rpx;
color: $font-color-dark;
position: relative;
}
.current {
color: $light-color;
position: relative;
&:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 40rpx;
height: 0;
border-bottom: 4rpx solid $light-color;
}
}
.p-box {
display: flex;
flex-direction: column;
.yticon {
display: flex;
align-items: center;
justify-content: center;
width: 30rpx;
height: 14rpx;
line-height: 1;
margin-left: 4rpx;
font-size: 26rpx;
color: #888;
}
.xia {
transform: scaleY(-1);
}
}
.cate-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 80rpx;
position: relative;
font-size: 44rpx;
&:after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-left: 1px solid #ddd;
width: 0;
height: 36rpx;
}
}
}
/* 分类 */
.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: 630rpx;
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: 90rpx;
padding-left: 30rpx;
font-size: 28rpx;
color: #555;
position: relative;
}
.two {
height: 64rpx;
color: #303133;
font-size: 30rpx;
background: #f8f8f8;
}
}
.price-box {
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
font-size: 24rpx;
color: $font-color-light;
}
.price {
font-size: 26rpx;
line-height: 1;
color: $main-color;
font-weight: bold;
/deep/ span:nth-of-type(1) {
font-size: 38rpx;
}
}
/* 商品列表 */
.goods-list {
display: flex;
flex-wrap: wrap;
margin: 10rpx 20rpx 284rpx;
// background: #fff;
width: 100%;
.goods-item {
background-color: #ffffff;
display: flex;
border-radius: 16rpx;
flex-direction: column;
width: calc(50% - 30rpx);
margin-bottom: 20rpx;
padding-bottom: 20rpx;
&:nth-child(2n + 1) {
margin-right: 20rpx;
}
.goods-detail {
margin: 0 20rpx;
}
}
.image-wrapper {
width: 100%;
height: 330rpx;
border-radius: 16rpx 16rpx 0 0;
overflow: hidden;
padding: 0;
image {
width: 100%;
height: 100%;
opacity: 1;
border-radius: 16rpx 16rpx 0 0;
}
}
.title {
font-size: $font-base;
color: $font-color-dark;
line-height: 1.5;
height: 84rpx;
padding: 10rpx 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.countConfig,
.storeSellerName {
font-size: $font-sm;
}
.textHidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
background: $light-color;
}
.empty {
padding-top: 300rpx;
color: #999999;
text-align: center;
/deep/ .u-image {
width: 346rpx;
height: 304rpx;
}
}

740
pages/navigation/search/searchPage.vue Normal file
View File

@@ -0,0 +1,740 @@
<template>
<view class="content">
<u-navbar :background="navObj" :is-back="false">
<!-- mSearch组件 如果使用原样式，删除组件元素-->
<mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword" @search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)"
@SwitchType="doSearchSwitch()" v-model="keyword" :isFocusVal="!isShowSeachGoods"></mSearch>
</u-navbar>
<view class="search-keyword" v-if="!isShowSeachGoods">
<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
<block v-for="(row, index) in keywordList" :key="index">
<view class="keyword-entry" hover-class="keyword-entry-tap">
<view class="keyword-text" @tap.stop="doSearch(keywordList[index].words)">
<rich-text :nodes="row.words"></rich-text>
</view>
</view>
</block>
</scroll-view>
<div class="keyword-box" v-show="!isShowKeywordList">
<view class="keyword-block add1">
<view class="keyword-list-header">
<view class="u-tips">热门搜索</view>
</view>
<view class="keyword keywordBox">
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
</view>
</view>
<view class="keyword-block" v-if="oldKeywordList.length > 0">
<view class="keyword-list-header">
<view class="u-tips">搜索历史</view>
</view>
<div class="oldKeyList">
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index" @click="doSearch(keyword)">
<span>{{ keyword }} </span>
</div>
<div @click="showMore" v-if=" oldKeywordIndex > loadIndex" class="oldKeyItem">展示更多</div>
</div>
</view>
<div class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</div>
</div>
</view>
<!-- 搜索 -->
<view class="goods-content" v-if="isShowSeachGoods">
<view class="navbar">
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
<view class="nav-item" :class="{ current: filterIndex === 3 }" @click="tabClick(3, 'buyCount')">
<text>销量</text>
<view class="p-box">
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view>
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view>
</view>
</view>
<view class="nav-item" :class="{ current: filterIndex === 4 }" @click="tabClick(4, 'price')">
<text>价格</text>
<view class="p-box">
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
</view>
<view class="index-nav-arrow">
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
</view>
</view>
</view>
<view class="nav-item" @click="sortGoods">筛选</view>
</view>
<!-- 一行一个商品展示 -->
<div v-if="isSWitch">
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250" @scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
<div class="goodsClass">
<u-row v-for="(item, index) in goodsList" :key="index" class="goodsRow">
<u-col :span="4" @click.native="navigateToDetailPage(item)" class="switchType1">
<u-image width="182rpx" height="200rpx" class="imgGoods" :src="item.thumbnail">
<u-loading slot="loading"></u-loading>
</u-image>
</u-col>
<u-col :span="8" @click.native="navigateToDetailPage(item)" class="switchType2">
<div class="title clamp3" style="">{{ item.goodsName }}</div>
<view class="price-box">
<div class="price" v-if="item.price!=undefined">
¥<span>{{ Fixed(item.price )[0] }} </span>.{{
Fixed(item.price )[1]
}}
</div>
</view>
<div class="promotion">
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div>
</div>
<div style="overflow: hidden" class="countConfig">
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
</div>
</u-col>
<u-col :span="12" class="storeSellerBox">
<div class="storeSellerName" @click="clickTostore()">
<div class="textHidden">
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营" type="error" />
<span style="
color: #333333;
font-size: 28rpx;
padding-left: 17rpx;
">{{ item.storeName }}</span>
</div>
<span>
<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
</span>
</div>
</u-col>
</u-row>
</div>
<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
</scroll-view>
</div>
<div class="empty" v-if="goodsList == [] || goodsList == '' || goodsList == null">
<view>
<image style="width: 320rpx; height: 240rpx" src="/static/nodata.png">
</image>
</view>
<view>
<p>没有找到相关的商品信息</p>
<p>请换一个关键词试试吧</p>
</view>
</div>
<!-- 一行两个商品展示 -->
<div v-if="
!isSWitch &&
!(goodsList == [] || goodsList == '' || goodsList == null)
">
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
<view class="goods-list">
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navigateToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.thumbnail" mode="aspectFill"></image>
</view>
<view class="goods-detail">
<div class="title clamp">{{ item.goodsName }}</div>
<view class="price-box">
<div class="price" v-if="item.price!=undefined">
¥<span>{{ Fixed(item.price )[0] }} </span>.{{
Fixed(item.price )[1]
}}
</div>
</view>
<div class="promotion">
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div>
</div>
<div class="countConfig">
<span>已售 {{ item.buyCount || "0" }}</span>
<span>{{ item.commentNum || "0" }}条评论</span>
</div>
<div class="storeSellerName">
<div class="textHidden">
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated == 1" text="自营" type="error" />
<span>{{ item.storeName || "暂无" }}</span>
</div>
<span>
<u-icon name="arrow-right"></u-icon>
</span>
</div>
</view>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
</scroll-view>
</div>
</view>
<u-popup border-radius="20" mode="right" width="90%" v-model="sortPopup">
<view class="status_bar"></view>
<view class="sort-box ">
<view class="sort-list">
<view class="sort-item">
<view class="sort-title"> 品牌 </view>
<view class="flex" v-if="sortData.brands">
<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')">
<view class="sort-radius" :class="{
'sort-active': brand.__selected,
}">
{{ brand.name }}
</view>
</view>
</view>
<!-- <u-empty v-else text="暂无品牌" mode="list"></u-empty> -->
</view>
<view class="sort-item">
<view class="sort-title"> 全部分类 </view>
<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
<view class="sort-brand-item" :key="categoriesIndex" v-for="(categoryId, categoriesIndex) in sortData.categories" @click="handleSort(categoryId, categoriesIndex, 'categoryId')">
<view class="sort-radius" :class="{
'sort-active': categoryId.__selected,
}">
{{ categoryId.name }}
</view>
</view>
</view>
<!-- <u-empty v-else text="暂无分类" mode="list"></u-empty> -->
</view>
</view>
<view class="sort-list">
<view class="sort-item">
<view class="sort-title"> 价格区间 </view>
<view style="display:flex; margin-top:20rpx; align-items: center;">
<view class="sort-brand-item uinput">
<view class="sort-radius">
<u-input v-model="minPrice" type="number" placeholder="最低价" input-align="center" />
</view>
</view>
<view>-</view>
<view class="sort-brand-item uinput">
<view class="sort-radius">
<u-input v-model="maxPrice" type="number" placeholder="最高价" input-align="center" />
</view>
</view>
</view>
</view>
</view>
<view class="sort-list" v-if="sortData.paramOptions">
<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
<view class="sort-title"> {{ param.key }} </view>
<view class="flex" style="flex-warp:warp" v-if="param.values">
<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)">
<view class="sort-radius" :class="{
'sort-active': value.__selected,
}">
{{ value.title }}
</view>
</view>
</view>
</view>
</view>
<div class="null-view"></div>
<view class="sort-btn mp-iphonex-bottom">
<view class="sort-btn-repick" @click="repick">重置</view>
<view class="sort-btn-confim" @click="sortConfim">确定</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
import { getHotKeywords } from "@/api/home.js";
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
export default {
data() {
return {
loadIndex: 10,
oldKeywordIndex: "",
selectedWay: {
brand: [],
categoryId: [],
prop: [],
},
sortPopup: false, //筛选的开关
navObj: {
background: "#fff",
},
typeSortData: {
type: "",
index: "",
},
goodsHeight: "",
defaultKeyword: "",
keyword: "",
oldKeywordList: [],
hotKeywordList: [],
keywordList: [],
goodsList: [],
cateMaskState: 0, //分类面板展开状态
loadingType: "more", //加载更多状态
filterIndex: 0,
cateId: 0, //已选三级分类id
priceOrder: 0, //1 价格从低到高 2价格从高到低
cateList: [],
isShowSeachGoods: false,
isShowKeywordList: false,
sortData: "",
isSWitch: false,
params: {
pageNumber: 0,
pageSize: 10,
// sort: 'grade_asc',
sort: "releaseTime",
order: "desc",
keyword: "",
},
minPrice: "",
maxPrice: "",
sortParams: {
pageNumber: 0,
pageSize: 10,
// price: "", //价格,示例值(10_30)
// prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
// brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
categoryId: "",
},
routerVal: "",
};
},
onLoad(val) {
// return false
this.init();
this.initSortGoods();
// 接收分类的数据
this.routerVal = val;
// 有值
if (this.routerVal.category) {
this.params.categoryId = this.routerVal.category;
this.isShowSeachGoods = true;
}
if (this.routerVal.keyword) {
this.params.keyword = this.routerVal.keyword;
this.isShowSeachGoods = true;
}
if (this.routerVal.storeId) {
this.params.storeId = this.routerVal.storeId;
this.isShowSeachGoods = true;
}
this.loadData();
},
components: {
//引用mSearch组件，如不需要删除即可
mSearch,
},
onReachBottom() {
this.params.pageNumber++;
this.loadData();
},
mounted() {
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
let topHeight = 0;
let navHeight = 0;
uni.getSystemInfo({
success: function (res) {
// res - 各种参数
let top = uni.createSelectorQuery().select(".u-navbar");
top
.boundingClientRect(function (data) {
if (data && data.height) {
//data - 各种参数
topHeight = data.height; // 获取元素宽度
}
})
.exec();
let nav = uni.createSelectorQuery().select(".navbar");
nav
.boundingClientRect(function (data) {
if (data && data.height) {
//data - 各种参数
navHeight = data.height; // 获取元素宽度
}
})
.exec();
},
});
this.goodsHeight = windowHeight - navHeight - topHeight;
// #ifdef APP-PLUS
this.goodsHeight = this.goodsHeight - 100;
// #endif
this.goodsHeight += "px";
},
methods: {
// 数据去重一下 只显示一次 减免 劵 什么的
getPromotion(item) {
if (item.promotionMap) {
let array = [];
Object.keys(item.promotionMap).forEach((child) => {
if (!array.includes(child.split("-")[0])) {
array.push(child.split("-")[0]);
}
});
return array;
}
},
// 格式化金钱 1999 --> [1999,00]
Fixed(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
// 展示更多数据
showMore() {
this.loadOldKeyword(this.oldKeywordIndex);
},
// 点击确定进行筛选
sortConfim() {
// 处理品牌（多选
this.params.brandId = [];
this.selectedWay["brand"].forEach((item) => {
if (item.__selected) {
this.params.brandId.push(item.value);
}
});
this.params.brandId = this.params.brandId.join("@");
// 处理分类 (单选)
if (this.selectedWay["categoryId"][0]) {
this.params.categoryId = this.selectedWay["categoryId"][0].value;
}
// 处理属性
this.params.prop = [];
this.selectedWay["prop"].forEach((item) => {
if (item.__selected) {
this.params.prop.push(`${item.parent}_${item.title}`);
}
});
this.params.prop = this.params.prop.join("@");
// 处理价格
if (this.minPrice || this.maxPrice) {
this.params.price = `${this.minPrice}_${this.maxPrice}`;
} else {
this.params.price = 0;
}
this.goodsList = [];
this.loadData();
this.sortPopup = false;
},
// 重置
repick() {
this.initSortGoods();
this.minPrice = "";
this.maxPrice = "";
this.params = {
pageNumber: 0,
pageSize: 10,
};
this.loadData();
},
// 点击筛选的内容
handleSort(val, index, type, parent) {
if (type == "prop") {
val.parent = parent.key;
}
this.selectedWay[type].push(val);
if (type == "categoryId") {
this.sortData.categories.forEach((item) => {
item.__selected = false;
});
val.__selected = true;
} else {
val.__selected ? (val.__selected = false) : (val.__selected = true);
}
},
init() {
this.loadDefaultKeyword();
this.loadOldKeyword(this.loadIndex);
this.loadHotKeyword();
},
blur() {
uni.hideKeyboard();
},
back() {
uni.navigateBack({
delta: 1,
});
},
navigateToDetailPage(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
loadmore() {
this.params.pageNumber++;
this.loadData();
},
initSortGoods() {
getGoodsRelated(this.sortParams).then((res) => {
if (res.data.success) {
for (let item of Object.keys(res.data.result)) {
res.data.result[item].forEach((child) => {
child.__selected = false;
// 循环出和品牌分类一样的数据格式
if (child.values) {
child.values = child.values.map((item) => ({
title: item,
__selected: false,
}));
}
});
}
this.sortData = res.data.result;
}
});
},
// 筛选商品
sortGoods() {
this.sortPopup = true;
},
tabClick(index, type) {
this.params.pageNumber = 0;
this.params.pageSize = 10;
// this.params.order = "desc";
if (this.params.sort == type) {
this.params.order == "asc"
? (this.params.order = "desc")
: (this.params.order = "asc");
this.$set(this.params, "sort", type);
} else {
this.params.order = "desc";
this.$set(this.params, "sort", type);
}
if (index == 0) {
this.params.sort = "releaseTime";
this.params.order = "desc";
}
this.filterIndex = index;
uni.pageScrollTo({
duration: 300,
scrollTop: 0,
});
this.loadData("refresh", 1);
uni.showLoading({
title: "正在加载",
});
},
//加载默认搜索关键字
loadDefaultKeyword() {
//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
this.defaultKeyword = "请输入搜索商品";
},
//加载历史搜索,自动读取本地Storage
loadOldKeyword(index) {
this.oldKeywordList = [];
uni.getStorage({
key: "OldKeys",
success: (res) => {
var OldKeys = JSON.parse(res.data);
this.oldKeywordIndex = res.data.length;
for (let i = 0; i < index; i++) {
this.oldKeywordList.push(OldKeys[i]);
}
},
});
},
//加载热门搜索
async loadHotKeyword() {
this.hotKeywordList = [];
let res = await getHotKeywords();
let keywords = res.data.result;
keywords.forEach((item) => {
this.hotKeywordList.push(item);
});
},
//加载商品 ，带下拉刷新和上滑加载
async loadData(type, loading) {
this.loadingType = "loading";
if (type == "refresh") {
this.goodsList = [];
}
//没有更多直接返回
let goodsList = await getGoodsList(this.params);
console.log(goodsList);
if (goodsList.data.result.content.length < 10) {
this.loadingType = "noMore";
}
this.goodsList.push(...goodsList.data.result.content);
this.initSortGoods();
uni.hideLoading();
},
//监听输入
inputChange(event) {
//兼容引入组件时传入参数情况
var keyword = event.detail ? event.detail.value : event;
if (!keyword) {
this.keywordList = [];
this.isShowKeywordList = false;
return;
}
this.isShowKeywordList = true;
this.getKeywordNumFun(keyword);
},
//高亮关键字
drawCorrelativeKeyword(keywords, keyword) {
var len = keywords.length,
keywordArr = [];
for (var i = 0; i < len; i++) {
var row = keywords[i];
//定义高亮#9f9f9f
var html = row[0].replace(
keyword,
"<span style='color: #9f9f9f;'>" + keyword + "</span>"
);
html = "<div>" + html + "</div>";
var tmpObj = {
keyword: row[0],
htmlStr: html,
};
keywordArr.push(tmpObj);
}
return keywordArr;
},
//顶置关键字
setKeyword(index) {
this.keyword = this.keywordList[index].keyword;
},
//清除历史搜索
oldDelete() {
uni.showModal({
content: "确定清除历史搜索记录？",
success: (res) => {
if (res.confirm) {
console.log("用户点击确定");
this.oldKeywordList = [];
uni.removeStorage({
key: "OldKeys",
});
}
},
});
},
// 样式修改布局
doSearchSwitch(val) {
this.isSWitch = !this.isSWitch;
this.isShowSeachGoods = true;
},
//执行搜索
doSearch(keyword) {
keyword = keyword === false ? this.keyword : keyword;
this.keyword = keyword;
this.saveKeyword(keyword); //保存为历史
this.isShowSeachGoods = true;
this.$refs.mSearch.isShowSeachGoods = true;
this.params.keyword = keyword;
this.params.pageNumber = 0;
this.$set(this.sortParams, "keyword", keyword);
this.loadData("refresh", 1);
},
//保存关键字到历史记录
saveKeyword(keyword) {
console.log(keyword);
if (!keyword) return false;
uni.getStorage({
key: "OldKeys",
success: (res) => {
var OldKeys = JSON.parse(res.data);
var findIndex = OldKeys.indexOf(keyword);
if (findIndex == -1) {
OldKeys.unshift(keyword);
} else {
OldKeys.splice(findIndex, 1);
OldKeys.unshift(keyword);
}
//最多10个纪录
OldKeys.length > 10 && OldKeys.pop();
uni.setStorage({
key: "OldKeys",
data: JSON.stringify(OldKeys),
});
this.oldKeywordList = OldKeys; //更新历史搜索
console.log(this.oldKeywordList);
},
fail: (e) => {
var OldKeys = [keyword];
uni.setStorage({
key: "OldKeys",
data: JSON.stringify(OldKeys),
});
this.oldKeywordList = OldKeys; //更新历史搜索
},
});
},
// 搜索关键字
getKeywordNumFun(keywords) {
this.params.keyword = keywords;
this.$set(this.sortParams, "keyword", keywords);
},
},
};
</script>
<style lang="scss" scoped>
@import "./search.scss";
</style>

325
pages/navigation/selectShops.vue Normal file
View File

@@ -0,0 +1,325 @@
<template>
<view class="selected-store">
<!-- 点击搜索出现搜索框 -->
<!-- <div v-show="searchHandle" class="searchBox">
<u-search placeholder="请输入关键字" :clearabled="true" :show-action="false" v-model="pageParams.name" @blur="searchStore()" @clear="clearSearch()" @confirm="searchStore()" ></u-search>
</div> -->
<div>
<empty v-if="nomsg"></empty>
<div class="swiper-item">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y>
<view class="index-item" v-for="(store,storeIndex) in stores" :key="storeIndex" @click.prevent="storeDetail(store.id)">
<div class="item-goods">
<u-image width="51px" height="51px" class="item-title-img" :src="store.storeLogo || noLogo">
<u-loading slot="loading"></u-loading>
</u-image>
<view class="item-content">
<view>
<span>{{ store.storeName }}</span><span class="self-store" v-if="store.selfOperated">自营</span>
</view>
<view>
<u-rate size="24" :count="5" :disabled="true" v-model="store.descriptionScore"></u-rate>
</view>
<view>{{ store.store_collect }} 关注</view>
<button v-if="store.is_connect==0" @click.stop="collectstore(store.id)" class="collect btn-mini">
<u-icon name="plus"></u-icon>关注
</button>
<button v-if="store.is_connect==1" @click.stop="collectstore(store.id)" class="collect btn-mini"></u-icon>已关注</button>
</view>
<view class="store-num">
<!-- <view> {{store.goods_num}}</view> -->
<view>进店逛逛</view>
</view>
</div>
</view>
<uni-load-more :status="loadStatus"></uni-load-more>
</scroll-view>
</div>
</div>
</view>
</template>
<script>
import { collectionStore } from "@/api/members.js";
import { getstoreList } from "@/api/store.js";
export default {
data() {
return {
tabIndex: 0,
currentLeft: 0,
stores: [],
pageParams: {
pageNumber: 1, //页码
pageSize: 10, //分页大小
category_id: 0, //分类
key_words: "", //搜索关键字
name: "", //店铺名字
},
loadStatus: "more",
nomsg: false,
noLogo: require("@/static/logo.png"),
};
},
onLoad() {
this.searchStore();
},
watch: {
tabIndex(val) {
this.pageParams.pageNumber = 1;
this.stores = [];
this.loadStatus = "more";
this.searchStore();
},
},
onReachBottom() {
this.pageParams.pageNumber++;
this.searchStore();
},
methods: {
// 清空店铺
clearSearch() {
(this.pageParams = {
pageNumber: 1, //页码
pageSize: 10, //分页大小
category_id: 0, //分类
key_words: "", //搜索关键字
name: "", //店铺名字
}),
this.searchStore();
},
async searchStore() {
uni.showLoading({
title: "加载中",
});
//获取商品数据
let response = await getstoreList(this.pageParams);
uni.hideLoading();
if (this.pageParams.name) {
this.stores = [];
}
this.stores = this.stores.concat(response.data.result.records);
uni.hideLoading();
if (
response.data.result.total <=
response.data.result.current * response.data.result.size
) {
this.loadStatus = "noMore";
} else {
this.loadStatus = "loadmore";
}
if (this.stores.length == 0) {
this.nomsg = true;
return;
}
},
collectstore(id) {
//收藏店铺
collectionStore(id).then((res) => {
if (res.statusCode == 200) {
this.$api.msg("收藏成功");
this.pageParams.pageNumber = 1;
this.stores = [];
this.searchStore();
}
});
},
storeDetail(id) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + id,
});
},
},
};
</script>
<style>
page {
height: 100%;
}
</style>
<style lang="scss" scoped>
.searchBox {
margin: 20rpx 0;
}
.selected-store {
height: 100%;
.list-scroll-content {
position: relative;
width: 100%;
display: flex;
white-space: nowrap;
align-items: center;
justify-content: space-between;
align-items: center;
background-color: #fff;
color: #333;
.tab-item {
width: 160rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
display: inline-block;
}
.active {
border-bottom: 2px solid #ffffff;
broder-width: 60rpx;
font-size: 30rpx;
padding-bottom: 4rpx;
}
}
.swiper-box {
height: calc(100% - 80rpx);
.scroll-v {
height: 100%;
}
}
.index-item {
// height: 535rpx;
margin: 20rpx;
background-color: #ffffff;
border-radius: 14rpx;
.item-goods {
height: 170rpx;
margin: 0 20rpx;
padding: 30rpx 0;
// border-bottom: 1px solid #eeeeee;
display: flex;
align-items: center;
image {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
}
.item-title-img {
width: 102rpx !important;
height: 102rpx !important;
border-radius: 50% !important;
}
.item-content {
flex: 1;
line-height: 2em;
font-size: $font-sm;
position: relative;
.collect {
position: absolute;
width: 100rpx;
height: 40rpx;
font-size: 26rpx;
bottom: 20rpx;
right: 30rpx;
padding: 0;
line-height: 40rpx;
text-align: right;
padding-right: 14rpx;
.u-icon {
font-size: 26rpx;
position: absolute;
top: 7rpx;
left: 10rpx;
margin-right: 5rpx;
}
}
> view:first-child {
font-size: $font-base;
color: #333333;
font-weight: 700;
position: relative;
span:nth-child(2) {
position: absolute;
font-weight: 400;
top: 12rpx;
font-size: 18rpx;
margin-left: 20rpx;
height: 26rpx;
width: 50rpx;
line-height: 26rpx;
text-align: center;
color: #ffffff;
background-color: #ff6262;
border-radius: 4rpx;
}
}
color: #999;
margin-left: 30rpx;
}
.store-num {
width: 150rpx;
text-align: center;
border-left: 1px solid #eeeeee;
:nth-child(1) {
font-size: 26rpx;
}
:nth-child(2) {
font-size: 18rpx;
color: #999;
}
}
}
}
.goods-in-store {
height: 364rpx;
white-space: nowrap;
padding: 20rpx 0 20rpx 20rpx;
.goods-item {
width: 195rpx;
display: inline-block;
white-space: normal;
margin-right: 20rpx;
font-size: $font-sm;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
image {
width: 195rpx;
height: 195rpx;
border-radius: 8rpx;
}
> view {
margin-top: 10rpx;
}
.goods-item-img {
width: 195rpx !important;
height: 195rpx !important;
border-radius: 8rpx !important;
}
> view:nth-child(2) {
color: #ff5a10;
}
.goods-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
}
}
}
</style>

412
pages/order/afterSales/afterSales.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<view class="content">
<view class="u-tabs-box">
<u-tabs bg-color="#fff" :list="list" :is-scroll="false" :current="current" @change="change" :active-color="$lightColor"></u-tabs>
</view>
<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
<view class="seller-view" v-for="(order, orderIndex) in orderList" :key="orderIndex">
<!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between" v-if="current == 0">
<view class="seller-name">
<view class="name">{{ order.storeName }}</view>
</view>
<view class="order-sn">订单编号：{{ order.sn }}</view>
</view>
<!-- 申请记录 选项卡 -->
<view class="seller-info u-flex u-row-between" v-if="current != 0">
<view class="order-sn">售后单号：{{ order.service_sn || order.sn }}</view>
<view class="order-sn">{{ order.serviceType_text }}</view>
</view>
<view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
<view class="goods-item-view" @click="onDetail(sku)">
<view class="goods-img">
<u-image border-radius="6" width="100%" height="100%" :src="sku.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<!-- 如果商品多个则不显示每个商品价格-->
<view class="goods-price" v-if="order.orderItems.length <= 1">
￥{{ order.flowPrice | unitPrice }}
</view>
</view>
<view class="goods-num">
<view>x{{ sku.num }}</view>
</view>
</view>
<view class="btn-view u-flex u-row-between">
<view class="description">
<!-- 售后申请 -->
<view v-if="
current === 0 && order.groupAfterSaleStatus &&
order.groupAfterSaleStatus === 'ALREADY_APPLIED'
" class="cannot_apply">
<u-icon class="icon" name="info-circle-fill"></u-icon>
该商品已申请售后服务
</view>
<view class="cannot_apply" v-if="current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus === 'EXPIRED'" @click="tipsShow = true">
<u-icon class="icon" name="info-circle-fill"></u-icon>
该商品无法申请售后
</view>
<div v-if="current === 1 || current === 2">
<!-- 申请中 -->
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_GOODS'">退货处理-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'SUPPLY_AGAIN_GOODS'">补发商品-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_MONEY'">退款-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'EXCHANGE_GOODS'">换货-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'CANCEL'">取消订单-{{ serviceStatusList[order.serviceStatus] }}</view>
</div>
<!-- 申请记录 -->
</view>
<view class="after-line">
<!-- 售后申请 -->
<view v-if="
current === 0 && order.groupAfterSaleStatus=='NOT_APPLIED'
" @click="applyService(sku.sn, order, sku)" class="rebuy-btn">
申请售后
</view>
<!-- 申请中 -->
<view class="rebuy-btn" v-if="
current === 2 &&
order.serviceStatus &&
order.serviceStatus == 'PASS' &&
order.serviceType != 'RETURN_MONEY'
" @click="onExpress(order, sku)">
提交物流
</view>
<view @click="afterDetails(order, sku)" v-if="current === 1 || current === 2" class="rebuy-btn">
售后详情
</view>
<!-- 申请记录 -->
<!-- <u-button type="info" size="mini" shape="circle" v-if="current === 2">删除记录</u-button> -->
</view>
</view>
</view>
<view v-if="
current === 0 && order.groupAfterSaleStatus &&
order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
order.orderItems.length >= 1
" class="btn-view u-flex u-row-between">
<!-- 多个商品显示订单总价格 -->
<view class="cannot_apply">
订单总金额:<span class="countMoney">￥{{ order.flowPrice | unitPrice }}</span>
</view>
</view>
</view>
<u-loadmore bg-color="#f8f8f8" :status="status" />
</scroll-view>
<u-modal v-model="tipsShow" content="当订单未确认收货|已过售后服务有效期|已申请售后服务时，不能申请售后"></u-modal>
</view>
</template>
<script>
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import empty from "@/components/empty";
import { getAfterSale, getAfterSaleList } from "@/api/after-sale.js";
import { getOrderList } from "@/api/order.js";
export default {
components: {
uniLoadMore,
},
data() {
return {
serviceStatusList: {
APPLY: "申请售后",
PASS: "通过售后",
REFUSE: "拒绝售后",
BUYER_RETURN: "买家退货，待卖家收货",
SELLER_RE_DELIVERY: "商家换货/补发",
SELLER_CONFIRM: "卖家确认收货",
SELLER_TERMINATION: "卖家终止售后",
BUYER_CONFIRM: "买家确认收货",
BUYER_CANCEL: "买家取消售后",
WAIT_REFUND: "等待平台退款",
COMPLETE: "完成售后",
},
list: [
{
name: "售后申请",
},
{
name: "申请中",
},
{
name: "申请记录",
},
],
current: 0,
tipsShow: false,
orderList: [],
params: {
pageNumber: 1,
pageSize: 10,
},
logParams: {
pageNumber: 1,
pageSize: 10,
},
status: "loadmore",
};
},
onLoad() {
this.orderList = [];
this.params.pageNumber = 1;
this.getOrderList(this.current);
},
onPullDownRefresh() {
this.change(this.current);
},
watch: {
current(val) {},
},
methods: {
//切换tab页时，初始化数据
change(index) {
this.current = index;
this.params = {
pageNumber: 1,
pageSize: 10,
};
this.orderList = [];
//如果是2 则读取售后申请记录列表
if (index == 0) {
this.getOrderList(index);
} else {
this.logParams = {
pageNumber: 1,
pageSize: 10,
};
if (index === 1) {
this.logParams.serviceStatus = "APPLY";
}
this.orderList = [];
this.getAfterSaleLogList();
}
uni.stopPullDownRefresh();
},
getOrderList(index) {
uni.showLoading({
title: "加载中",
mask: true,
});
getOrderList(this.params).then((res) => {
uni.hideLoading();
const orderlist = res.data.result.records;
if (orderlist.length > 0) {
this.orderList = this.orderList.concat(orderlist);
this.params.pageNumber += 1;
}
if (orderlist.length < 10) {
this.status = "nomore";
} else {
this.status = "loading";
}
});
},
// 详情
afterDetails(order) {
uni.navigateTo({
url: "./applyDetail?sn=" + order.sn,
});
},
//申请记录列表
getAfterSaleLogList() {
getAfterSaleList(this.logParams).then((res) => {
let afterSaleLogList = res.data.result.records;
afterSaleLogList.forEach((item) => {
item.orderItems = [
{
image: item.goodsImage,
skuId: item.skuId,
name: item.goodsName,
num: item.num,
price: item.flowPrice,
},
];
console.log(item.orderItems);
});
this.orderList = this.orderList.concat(afterSaleLogList);
if (afterSaleLogList.length < 10) {
this.status = "nomore";
} else {
this.status = "loading";
}
});
},
//申请售后
applyService(sn, order, sku) {
let data = {
...order,
...sku,
};
uni.navigateTo({
url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
JSON.stringify(data)
)}`,
});
},
//提交物流信息
onExpress(order, sku) {
sku.storeName = order.storeName;
uni.navigateTo({
url: `./afterSalesDetailExpress?serviceSn=${
order.sn
}&sku=${encodeURIComponent(JSON.stringify(sku))}`,
});
},
onDetail(sku) {
console.log(sku);
if (!this.$u.test.isEmpty(sku.skuId)) {
uni.navigateTo({
url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
});
}
},
renderDate() {
if (this.current === 0) {
this.params.pageNumber += 1;
this.getOrderList();
} else {
this.logParams.pageNumber += 1;
this.getAfterSaleLogList();
}
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.body-view {
// height: calc(100vh - 44px -40px);
// overflow-y: auto;
height: 100%;
}
.countMoney {
margin-left: 7rpx;
color: $main-color;
font-size: 28rpx;
}
.seller-view {
background-color: #fff;
margin: 20rpx 0rpx;
padding: 0rpx 20rpx;
border-radius: 20rpx;
.seller-info {
height: 70rpx;
.seller-name {
font-size: 28rpx;
display: flex;
flex-direction: row;
.name {
margin-left: 15rpx;
margin-top: -2rpx;
}
}
.order-sn {
font-size: 22rpx;
color: #909399;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 10rpx;
.goods-img {
width: 131rpx;
height: 131rpx;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: #333333;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #ff5a10;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.btn-view {
padding: 16rpx 0;
.after-line {
display: flex;
line-height: 90rpx;
}
}
}
.description {
color: #909399;
size: 25rpx;
}
.cannot_apply {
text-align: center;
font-size: 22rpx;
color: #999999;
height: 70rpx;
line-height: 70rpx;
}
.icon {
margin-right: 10rpx;
}
.cancel-btn {
color: #999999;
border-color: #999999;
margin-left: 15rpx;
height: 60rpx;
}
.pay-btn {
background-color: #1abc9c;
color: #ffffff;
margin-left: 15rpx;
height: 60rpx;
}
.rebuy-btn {
background-color: #ffffff;
margin-left: 15rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 24rpx;
border: 2rpx solid $light-color;
color: $light-color;
padding: 0 24rpx;
border-radius: 200px;
}
</style>

566
pages/order/afterSales/afterSalesDetail.vue Normal file
View File

@@ -0,0 +1,566 @@
<template>
<view class="content">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.goods_id)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-price">
<span>￥{{ applyInfo.applyRefundPrice }}</span>
<span class="num">购买数量:{{ item.num }}</span>
</view>
</view>
</view>
</view>
<view class="after-num">
<view>申请数量</view>
<view>
<u-number-box :value="parseInt(form.num)" disabled-input :min="1" :max="parseInt(sku.num)" bg-color="#fff" @change="valChange"></u-number-box>
</view>
</view>
</view>
<view class="body-view">
<!-- 退款原因 -->
<view class="opt-view">
<u-form-item label="申请原因" :label-width="150">
<u-input v-model="form.reason" type="select" input-align="right" :select-open="reasonSelectShow" @click="reasonSelectShow = true" placeholder="请选择申请原因" />
</u-form-item>
<u-form-item label="申请说明" :label-width="150">
<u-input input-align="right" type="textarea" v-model="form.problemDesc" placeholder="请描述申请售后的说明" />
</u-form-item>
</view>
<!-- 上传凭证 -->
<view class="opt-view">
<view class="img-title">上传凭证（最多5张）</view>
<view class="images-view">
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
</view>
</view>
<view class="opt-view">
<u-form-item label="退款方式" :label-width="150">
<u-input :value="
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
" type="text" input-align="right" :disabled="true" />
</u-form-item>
<view v-if="
applyInfo.accountType === 'BANK_TRANSFER' &&
applyInfo.applyRefundPrice != 0
">
<u-form-item label="银行开户行" :label-width="150">
<u-input v-model="form.bankDepositName" type="text" input-align="right" placeholder="请输入银行开户行" />
</u-form-item>
<u-form-item label="银行开户名" :label-width="150">
<u-input v-model="form.bankAccountName" type="text" input-align="right" placeholder="请输入银行开户名" />
</u-form-item>
<u-form-item label="银行账号" :label-width="150">
<u-input v-model="form.bankAccountNumber" type="text" input-align="right" placeholder="请输入银行账号" />
</u-form-item>
</view>
<u-form-item label="返回方式" :label-width="150">
<u-input type="text" input-align="right" value="快递至第三方卖家" :disabled="true" />
</u-form-item>
</view>
<view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
</view>
</u-form>
<view class="submit-view">
<u-button type="primary" ripple shape="circle" v-if="applyInfo.refundWay" :custom-style="customStyle" @click="onSubmit">提交申请</u-button>
</view>
<u-select mode="single-column" :list="reasonList" v-model="reasonSelectShow" @confirm="reasonSelectConfirm"></u-select>
<u-select mode="single-column" :list="typeList" v-model="typeSelectShow" @confirm="typeSelectConfirm"></u-select>
<u-select mode="single-column" :list="returnList" v-model="returnSelectShow" @confirm="returnSelectConfirm"></u-select>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getAfterSaleReason,
applyReturn,
getAfterSaleInfo,
} from "@/api/after-sale";
import city from "@/components/m-city/m-city";
import { upload } from "@/api/common.js";
import storage from "@/utils/storage.js";
export default {
component: {
city,
},
data() {
return {
storage,
list: [{ id: "", localName: "请选择", children: [] }],
action: upload,
fileList: [],
sn: "",
sku: {},
typeValue: 0,
value: "",
type: "textarea",
border: true,
//退款原因 弹出框
reasonSelectShow: false,
reasonList: [],
//退款方式为账号退款 账号类型弹出框
typeSelectShow: false,
typeList: [
{
value: "ALIPAY",
label: "支付宝",
},
{
value: "WEIXINPAY",
label: "微信",
},
{
value: "BANK_TRANSFER",
label: "银行卡",
},
],
//返回方式
returnSelectShow: false,
returnList: [
{
value: 1,
label: "快递至第三方卖家",
},
],
customStyle: {
backgroundColor: this.$lightColor,
},
applyInfo: {},
form: {
orderItemSn: "", // 订单sn
skuId: "",
reason: "", //退款原因
problemDesc: "", //退款说明
images: [], //图片凭证
num: 1, //退货数量
goodsId: "", //商品id
accountType: "",
applyRefundPrice: "",
refundWay: "",
serviceType: "", //申请类型
},
};
},
onLoad(options) {
let navTitle = "申请售后";
this.form.serviceType = "RETURN_GOODS";
if (options.value == 1) {
navTitle = "申请退货";
this.form.serviceType = "RETURN_GOODS";
}
if (options.value == 2) {
navTitle = "申请换货";
this.form.serviceType = "EXCHANGE_GOODS";
}
if (options.value == 3) {
navTitle = "申请退款";
this.form.serviceType = "RETURN_MONEY";
}
this.typeValue = options.value;
uni.setNavigationBarTitle({
title: navTitle, //此处写页面的title
});
this.sn = options.sn;
let dsku = decodeURIComponent(options.sku);
let newSku = JSON.parse(dsku);
this.sku = newSku
this.form.orderItemSn = options.sn;
this.form.skuId = this.sku.skuId;
this.form.num = this.sku.num;
this.form.goodsId = this.sku.goodsId;
this.getReasonActions(this.form.serviceType);
this.init(options.sn);
},
methods: {
/** 获取申请原因下拉框数据 */
async getReasonActions(serviceType) {
uni.showLoading({
title: "加载中",
});
await getAfterSaleReason(serviceType).then((res) => {
if (res.data.success) {
let action = [];
res.data.result.forEach((item) => {
action.push({
value: item.id,
label: item.reason,
});
});
this.reasonList = action;
}
});
uni.hideLoading();
},
//打开地区选择器
showCitySelect() {
this.$refs.cityPicker.show();
},
init(sn) {
getAfterSaleInfo(sn).then((response) => {
if (response.data.code == 400) {
uni.showToast({
title: response.data.message,
duration: 2000,
icon: "none",
});
} else {
this.applyInfo = response.data.result;
this.form.accountType = response.data.result.accountType;
}
});
},
//退款原因
reasonSelectConfirm(e) {
this.form.reason = e[0].label;
},
//退款方式
typeSelectConfirm(e) {
this.form.accountType = e[0].value;
this.form.accountType_label = e[0].label;
},
//返回方式
returnSelectConfirm(e) {
console.log(e);
},
//修改申请数量
valChange(e) {
this.form.num = e.value;
},
//图片上传
onUploaded(lists) {
console.log(lists);
let images = [];
lists.forEach((item) => {
images.push(item.response.result);
});
this.form.images = images;
},
//提交申请
onSubmit() {
//提交申请前检测参数
if (!this.handleCheckParams()) {
return;
}
uni.showLoading({
title: "加载中",
});
this.form.accountType = this.applyInfo.accountType;
this.form.refundWay = this.applyInfo.refundWay;
this.form.applyRefundPrice = this.applyInfo.applyRefundPrice;
applyReturn(this.sn, this.form).then((resp) => {
uni.hideLoading();
if (resp.data.success) {
this.$refs.uToast.show({ title: "提交成功", type: "success" });
uni.redirectTo({
url: "/pages/order/afterSales/applySuccess",
});
} else {
this.$refs.uToast.show({ title: resp.data.message, type: "error" });
}
});
},
// 验证银行卡号
checkBankno(bankno) {
var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhm进行比较）
var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
var newArr = [];
for (var i = first15Num.length - 1; i > -1; i--) {
//前15或18位倒序存进数组
newArr.push(first15Num.substr(i, 1));
}
var arrJiShu = []; //奇数位*2的积 <9
var arrJiShu2 = []; //奇数位*2的积 >9
var arrOuShu = []; //偶数位数组
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) {
//奇数位
if (parseInt(newArr[j]) * 2 < 9)
arrJiShu.push(parseInt(newArr[j]) * 2);
else arrJiShu2.push(parseInt(newArr[j]) * 2);
} //偶数位
else arrOuShu.push(newArr[j]);
}
var jishu_child1 = []; //奇数位*2 >9 的分割之后的数组个位数
var jishu_child2 = []; //奇数位*2 >9 的分割之后的数组十位数
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
}
var sumJiShu = 0; //奇数位*2 < 9 的数组之和
var sumOuShu = 0; //偶数位数组之和
var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
}
for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
}
for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
//计算总和
sumTotal =
parseInt(sumJiShu) +
parseInt(sumOuShu) +
parseInt(sumJiShuChild1) +
parseInt(sumJiShuChild2);
//计算Luhm值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhm = 10 - k;
if (lastNum == luhm) {
return true;
} else {
return false;
}
},
//检测提交参数
handleCheckParams() {
console.log(this.form.accountType);
if (this.$u.test.isEmpty(this.form.reason)) {
this.$refs.uToast.show({ title: "请选择 退款原因", type: "error" });
return false;
}
if (this.$u.test.isEmpty(this.form.problemDesc)) {
this.$refs.uToast.show({ title: "请输入 退款说明", type: "error" });
return false;
}
if (this.form.accountType == "BANK_TRANSFER") {
// 银行开户行校验
if (this.$u.test.isEmpty(this.form.bankDepositName)) {
this.$refs.uToast.show({
title: "请输入 银行开户行",
type: "error",
});
return false;
}
// 银行开户名校验
if (this.$u.test.isEmpty(this.form.bankAccountName)) {
this.$refs.uToast.show({
title: "请输入 银行开户名",
type: "error",
});
return false;
}
// 银行账号校验
if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
this.$refs.uToast.show({
title: "请输入 银行账号",
type: "error",
});
return false;
} else if (this.checkBankno(this.form.bankAccountNumber) === false) {
this.$refs.uToast.show({
title: "银行卡卡号不正确",
type: "error",
});
return false;
} else if (this.$u.test.chinese(this.form.bankAccountName) === false) {
this.$refs.uToast.show({
title: "银行开户名输入错误",
type: "error",
});
return false;
} else if (this.$u.test.chinese(this.form.bankDepositName) === false) {
this.$refs.uToast.show({
title: "银行开户行输入错误",
type: "error",
});
return false;
}
}
return true;
},
showOrHide() {
let flag = true;
switch (this.form.serviceType) {
case "CHANGE_GOODS":
flag = false;
break;
case "SUPPLY_AGAIN_GOODS":
flag = false;
break;
default:
flag = true;
break;
}
return flag;
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.body-view {
margin-bottom: 150rpx;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
.opt-tip {
margin-top: 20rpx;
padding: 10rpx 30rpx;
font-size: 22rpx;
}
.opt-view {
background-color: #fff;
margin-top: 20rpx;
padding: 10rpx 30rpx;
.how-view {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
border-bottom: 1px solid $page-color-base;
}
.explain-view {
display: flex;
flex-direction: row;
align-items: center;
height: 150rpx;
}
.img-title {
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.images-view {
padding: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.item-apply-voucher {
width: 100%;
display: flex;
justify-content: flex-end;
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 0rpx 20rpx;
}
</style>

255
pages/order/afterSales/afterSalesDetailExpress.vue Normal file
View File

@@ -0,0 +1,255 @@
<template>
<view class="mp-iphonex-bottom content">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" @click="gotoGoodsDetail(sku.skuId)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<view class="goods-price">
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
<span>￥{{ sku.price | unitPrice }}</span>
<span class="num">购买数量: {{ sku.num }} </span>
</view>
</view>
</view>
</view>
</view>
<scroll-view scroll-y>
<!-- 上传凭证 -->
<view class="opt-view">
<view class="img-title" style="font-size: 30rpx">填写物流信息</view>
<u-form-item label="返回方式" :label-width="150">
<u-input type="text" input-align="right" value="快递至第三方卖家" />
</u-form-item>
<u-form-item label="快递公司" :label-width="150">
<u-input v-model="form.courier_company" type="select" input-align="right" :select-open="companySelectShow" @click="companySelectShow = true" placeholder="请选择快递公司" />
</u-form-item>
<u-form-item label="快递单号" :label-width="150">
<u-input input-align="right" v-model="form.logisticsNo" placeholder="请输入快递单号" />
</u-form-item>
<u-form-item label="发货时间" :label-width="150">
<u-input input-align="right" type="selects" disabled v-model="form.mDeliverTime" @click="timeshow = true" placeholder="请选择发货时间" />
</u-form-item>
</view>
</scroll-view>
<view class="submit-view">
<u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" @click="onSubmit">提交申请</u-button>
</view>
</u-form>
<u-select mode="single-column" :list="companyList" v-model="companySelectShow" @confirm="companySelectConfirm"></u-select>
<u-calendar v-model="timeshow" :mode="'date'" @change="onTimeChange"></u-calendar>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { getLogistics } from "@/api/address.js";
import { fillShipInfo } from "@/api/after-sale.js";
export default {
data() {
return {
typeValue: 0,
value: "",
type: "textarea",
border: true,
//快递公司 弹出框
companySelectShow: false,
companyList: [],
timeshow: false,
form: {
courier_company: "",
logisticsId: "", //快递公司ID
logisticsNo: "", //快递单号
mDeliverTime: "", //发货时间
},
serviceDetail: {},
sku: {},
};
},
onShow(options) {},
onLoad(options) {
this.sku = JSON.parse(decodeURIComponent(options.sku));
let navTitle = "服务单详情";
uni.setNavigationBarTitle({
title: navTitle, //此处写页面的title
});
this.serviceDetail.sn = options.serviceSn;
this.Logistics();
},
methods: {
//快递公司
companySelectConfirm(e) {
this.form.logisticsId = e[0].value;
this.form.courier_company = e[0].label;
},
// 获取快递公司
Logistics() {
getLogistics().then((res) => {
if (res.data.success) {
res.data.result.forEach((item, index) => {
this.companyList[index] = {
value: item.id,
label: item.name,
};
});
// this.companyList= res
}
});
},
onTimeChange(e) {
this.form.mDeliverTime = e.result;
},
onSubmit() {
uni.showLoading({
title: "加载中",
mask: true,
});
delete this.form.courier_company;
fillShipInfo(this.serviceDetail.sn, this.form).then((res) => {
uni.hideLoading();
if (res.statusCode === 200) {
this.$refs.uToast.show({
title: "提交成功",
type: "success",
back: true,
url: "/pages/order/afterSales/afterSales",
});
}
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.mp-iphonex-bottom{
overflow: hidden;
}
.after-sales-goods-detail-view {
background-color: #fff;
padding: 10rpx 0rpx;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 20rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.opt-view {
background-color: #fff;
padding: 40rpx 30rpx 0rpx 30rpx;
font-size: 26rpx;
.how-view {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
border-bottom: 1px solid $page-color-base;
}
.explain-view {
display: flex;
flex-direction: row;
align-items: center;
height: 150rpx;
}
.img-title {
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.images-view {
padding: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 10px;
left: 0px;
margin-top: 100rpx;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 0rpx 20rpx;
color: #fff;
}
</style>

193
pages/order/afterSales/afterSalesSelect.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<view>
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.skuId)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-price">
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
<span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
<span class="num" v-else>购买数量{{item.num}}</span>
<span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
</view>
</view>
</view>
</view>
</view>
<view class="select-view">
<view class="select-cell" @click="onSelect(1)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
</view>
<view class="right">
<view class="select-title">退货</view>
<view class="select-sub-title">
退回收到的商品
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
</view>
</view>
</view>
<view class="select-cell" @click="onSelect(3)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
</view>
<view class="right">
<view class="select-title">退款</view>
<view class="select-sub-title">
退款商品返还金额
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import UniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
components: {
UniIcons,
},
data() {
return {
sn: "",
applyInfo: {},
sku: {},
};
},
onLoad(options) {
this.sn = options.sn;
let dData = decodeURIComponent(options.sku);
let newData = JSON.parse(dData);
this.sku = newData;
},
methods: {
onSelect(value) {
uni.redirectTo({
url: `./afterSalesDetail?sn=${this.sn}&sku=${encodeURIComponent(
JSON.stringify(this.sku)
)}&value=${value}`,
});
},
gotoGoodsDetail(id) {
uni.navigateTo({
url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
background-color: #eef1f2;
.goods-img {
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.select-view {
background-color: #fff;
margin-top: 20rpx;
.select-cell {
display: flex;
align-items: center;
margin: 0rpx 20rpx;
line-height: 110rpx;
border-bottom: 1px solid $page-color-base;
.select-image {
width: 51rpx;
height: 110rpx;
line-height: 110rpx;
display: flex;
align-items: center;
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.select-title {
margin-left: 18rpx;
color: #666666;
width: 200rpx;
}
.select-sub-title {
color: #cccccc;
}
}
}
}
</style>

298
pages/order/afterSales/applyCancel.vue Normal file
View File

@@ -0,0 +1,298 @@
<template>
<view>
<view class="cancel-head">
<u-cell-group>
<u-cell-item title="未收货" :arrow="false">
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="NO" @click="radioChange('NO')"></u-radio></u-radio-group>
</u-cell-item>
<u-cell-item title="已收货" v-if="applyService" :arrow="false">
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="YES" @click="radioChange('YES')"></u-radio></u-radio-group>
</u-cell-item>
</u-cell-group>
</view>
<view class="cancle-body" v-if="rog === 'NO'">
<view class="cancel-tips">
<view class="tips-header">温馨提示：</view>
<view>1. 订单取消后无法恢复;</view>
<view>2. 订单取消后，使用的优惠券将不再返还，积分可以退回;</view>
<view>3. 订单取消后，订单中的赠品要随商品一起返还给商家;</view>
</view>
<u-cell-group>
<u-cell-item title="退款方式" value="原路退回" :arrow="false" v-if="isRetrace"></u-cell-item>
<u-cell-item title="退款方式" value="账号退款" :arrow="false" v-else></u-cell-item>
<u-cell-item title="退款金额" :value="refund_info.refund_price" :arrow="false"></u-cell-item>
<u-cell-item title="取消原因" :value="refund_info.reason" @click="handleShowReason" :arrow="true" arrow-direction="down" required></u-cell-item>
<u-action-sheet :list="reasonSelectActions" v-model="reasonSelectShow" @click="onSelectReason"></u-action-sheet>
<view v-if="!isRetrace">
<u-cell-item title="账户类型" :value="accountTypeText" @click="handleShowAccountType" :arrow="true" arrow-direction="down" required></u-cell-item>
<u-action-sheet :list="accountTypeSelectActions" v-model="accountTypeSelectShow" @click="onSelectAccountType"></u-action-sheet>
<view v-if="refund_info.account_type === 'BANK_TRANSFER'">
<u-field v-model="refund_info.bank_name" required clearable label="银行名称" input-align="right" placeholder="请输入银行名称"></u-field>
<u-field v-model="refund_info.bank_deposit_name" label-width="150" required clearable label="银行开户行" input-align="right" placeholder="请输入银行开户行"></u-field>
<u-field v-model="refund_info.bank_account_name" label-width="150" required clearable label="银行开户名" input-align="right" placeholder="请输入银行开户名"></u-field>
<u-field v-model="refund_info.bank_account_number" required clearable label="银行账号" input-align="right" placeholder="请输入银行账号"></u-field>
</view>
<u-field v-model="refund_info.return_account" required clearable label="退款账号" input-align="right" placeholder="请输入退款账号"></u-field>
</view>
<u-field v-model="refund_info.mobile" required clearable label="联系方式" input-align="right" placeholder="请输入手机号码"></u-field>
</u-cell-group>
<view class="submit-btn">
<u-button shape="circle" class="cancel-btn" @click="handleCancelSubmit">取消</u-button>
<u-button shape="circle" class="main-btn" @click="handleSubmitApply">提交</u-button>
</view>
</view>
<view class="service-body" v-else>
<view class="cancel-tips">
<view class="tips-header">温馨提示：</view>
<view>1. 当前订单还未确认收货，如果申请售后，则订单自动确认收货;</view>
<view>2. 如申请售后，使用的优惠券和积分等将不再返还;</view>
<view>3. 订单中的赠品要随申请售后的商品一起返还给商家;</view>
</view>
<view class="submit-btn"><u-button shape="circle" class="main-btn" @click="handleApplyService">申请售后</u-button></view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import Foundation from '@/utils/Foundation.js';
import RegExp from '@/utils/RegExp.js';
import { applyCancelOrder } from '@/api/after-sale.js';
import { confirmReceipt, getOrderDetail } from '@/api/order.js';
export default {
data() {
return {
/** 订单编号 */
order_sn: 0,
/** 订单详细 */
order: '',
/** 是否允许申请售后 */
applyService: false,
/** 是否已收货 */
rog: 'NO',
/** 是否支持原路退款 */
isRetrace: false,
/** 申请取消订单参数 */
refund_info: {
reason: '请选择取消原因',
mobile: '',
account_type: '',
return_account: '',
refund_price: 0.0
},
/** 是否展示取消原因下拉框 */
reasonSelectShow: false,
/** 取消原因下拉框数据 */
reasonSelectActions: [
{ text: '商品无货' },
{ text: '配送时间问题' },
{ text: '不想要了' },
{ text: '商品信息填写错误' },
{ text: '地址信息填写错误' },
{ text: '商品降价' },
{ text: '货物破损已拒签' },
{ text: '订单无物流跟踪记录' },
{ text: '非本人签收' },
{ text: '其他' }
],
/** 账户类型下拉框选中的值 */
accountTypeText: '请选择账户类型',
/** 是否展示账户类型下拉框 */
accountTypeSelectShow: false,
/** 账户类型下拉框数据 */
accountTypeSelectActions: [{ text: '支付宝', value: 'ALIPAY' }, { text: '微信', value: 'WEIXINPAY' }, { text: '银行卡', value: 'BANK_TRANSFER' }]
};
},
onLoad(options) {
this.order_sn = options.sn;
this.GET_OrderCancelDetail();
},
methods: {
// 选中任一radio时，由radio-group触发
radioChange(e) {
this.rog = e;
},
/** 展示申请原因上拉框事件绑定 */
handleShowReason() {
this.reasonSelectShow = true;
},
/** 申请原因选中事件绑定 */
onSelectReason(index) {
this.reasonSelectShow = false;
this.refund_info.reason = this.reasonSelectActions[index].text;
},
/** 展示账户类型上拉框事件绑定 */
handleShowAccountType() {
this.accountTypeSelectShow = true;
},
/** 账户类型选中事件绑定 */
onSelectAccountType(index) {
this.accountTypeSelectShow = false;
this.accountTypeText = this.accountTypeSelectActions[index].text;
this.refund_info.account_type = this.accountTypeSelectActions[index].value;
},
/** 跳转至订单列表页面 */
handleCancelSubmit() {
uni.redirectTo({
url: '/pages/order/myOrder?status=0'
});
},
/** 申请售后 */
handleApplyService() {
confirmReceipt(this.order_sn).then(() => {
uni.redirectTo({
url: '/pages/order/afterSales/afterSales'
});
});
},
/** 校验参数 */
handleCheckParams() {
// 取消原因校验
if (!this.refund_info.reason || this.refund_info.reason === '请选择取消原因') {
this.$refs.uToast.show({ title: '请选择取消原因!', type: 'error' });
return false;
}
// 联系方式校验
if (!this.refund_info.mobile || !this.$u.test.mobile(this.refund_info.mobile)) {
this.$refs.uToast.show({ title: '请输入正确格式的手机号码!', type: 'error' });
return false;
}
// 如果不支持原路退款
if (!this.isRetrace) {
// 账户类型校验
if (!this.refund_info.account_type) {
this.$refs.uToast.show({ title: '请选择账户类型!', type: 'error' });
return false;
}
// 如果账户类型不为银行卡
if (this.refund_info.account_type != 'BANK_TRANSFER') {
// 退款账号校验
if (!this.refund_info.return_account) {
this.$refs.uToast.show({ title: '请输入退款账号!', type: 'error' });
return false;
}
} else {
// 银行名称校验
if (!this.refund_info.bank_name) {
this.$refs.uToast.show({ title: '请输入银行名称!', type: 'error' });
return false;
}
// 银行开户行校验
if (!this.refund_info.bank_deposit_name) {
this.$refs.uToast.show({ title: '请输入银行开户行!', type: 'error' });
return false;
}
// 银行开户名校验
if (!this.refund_info.bank_account_name) {
this.$refs.uToast.show({ title: '请输入银行开户名!', type: 'error' });
return false;
}
// 银行账号校验
if (!this.refund_info.bank_account_number) {
this.$refs.uToast.show({ title: '请输入银行账号!', type: 'error' });
return false;
}
}
}
return true;
},
/** 提交取消订单申请 */
handleSubmitApply() {
// 校验参数
if (!this.handleCheckParams()) {
return false;
}
this.refund_info.order_sn = this.order_sn;
applyCancelOrder(this.refund_info).then(() => {
this.$refs.uToast.show({ title: '提交成功!', type: 'success' });
this.handleCancelSubmit();
});
},
/** 获取订单详情信息 */
GET_OrderCancelDetail() {
getOrderDetail(this.order_sn).then(response => {
this.order = response.data;
this.isRetrace = this.order.is_retrace;
this.refund_info.refund_price = Foundation.formatPrice(this.order.order_price);
this.applyService = this.order.order_status === 'SHIPPED' && this.order.ship_status === 'SHIP_YES';
});
}
}
};
</script>
<style lang="scss">
/deep/ .u-cell {
// #ifdef MP-WEIXIN
width: 100vw !important;
overflow: hidden !important;
display: block !important;
// #endif
}
/deep/ .u-cell_title{
// #ifdef MP-WEIXIN
float: left;
// #endif
}
/deep/ .u-cell__value{
// #ifdef MP-WEIXIN
float: right;
// #endif
}
.cancel-head {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.submit-btn {
display: flex;
margin-top: 40rpx;
margin-bottom: 40rpx;
text-align: center;
justify-content: center;
align-items: center;
}
.cancel-tips {
display: flex;
flex-direction: column;
padding: 20rpx;
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
color: #999999;
view {
margin-top: 6rpx;
}
.tips-header {
color: #ff6262;
font-size: 26rpx;
margin-bottom: 6rpx;
}
}
.main-btn {
width: 40%;
background-color: $light-color;
color: #ffffff;
}
.cancel-btn {
margin-right: 30px;
width: 40%;
border-color: $light-color;
color: $light-color;
}
</style>

592
pages/order/afterSales/applyDetail.vue Normal file
View File

@@ -0,0 +1,592 @@
<template>
<view v-if="serviceDetail">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ serviceDetail.storeName }}</text>
为您提供
</view>
</view>
<view class="apply-info-view">
<view class="status-info">
<view class="status-info-box">
<view class="status-val">{{
serviceStatusList[serviceDetail.serviceStatus]
}}</view>
<!-- <view class="status-tip" v-if="allowable.allow_ship"
>请您尽快将申请售后的商品退还给卖家</view
> -->
<view class="status-tip">{{
serviceDetail.serviceStatus | statusFilter
}}</view>
</view>
</view>
<view class="log-box-bottom"></view>
<view class="log-box-top" @click="onProgress()">
<view class="top01">
<view>审核日志</view>
<view class="log-first-show" v-if="logs[0]">{{
logs[0].message
}}</view>
</view>
<uni-icons type="arrowright" style="margin-right: 5px"></uni-icons>
</view>
</view>
<view class="goods-info">
<view class="info-box">
<view class="goods-item-view" @click="gotoGoodsDetail(serviceDetail)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="serviceDetail.goodsImage"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{
serviceDetail.goodsName
}}</view>
<view class="goods-price">
<view class="price"> ￥{{ serviceDetail.flowPrice | unitPrice }}</view>
<view>
<view>申请售后数量：{{ serviceDetail.num }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="apply-detail-view">
<view class="detail-item">
<view class="title">服务单号:</view>
<view class="value">{{ serviceDetail.sn }}</view>
</view>
<view class="detail-item">
<view class="title">订单编号:</view>
<view class="value">{{ serviceDetail.orderSn }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.new_order_sn">
<view class="title">新订单编号:</view>
<view class="value">{{ serviceDetail.new_order_sn }}</view>
</view>
<view class="detail-item">
<view class="title">服务类型:</view>
<view class="value">{{
serviceTypeList[serviceDetail.serviceType]
}}</view>
</view>
<view class="detail-item">
<view class="title">申请原因:</view>
<view class="value">{{ serviceDetail.reason }}</view>
</view>
<!-- <view class="detail-item" v-if="serviceDetail.apply_vouchers">
<view class="title">申请凭证:</view>
<view class="value">{{ serviceDetail.apply_vouchers }}</view>
</view> -->
<view class="detail-item" v-if="serviceDetail.problemDesc">
<view class="title">问题描述:</view>
<view class="value">{{ serviceDetail.problemDesc }}</view>
</view>
<view class="detail-item" v-if="
serviceDetail.afterSaleImage &&
serviceDetail.afterSaleImage.split(',').length != 0
">
<image :src="img" @click="preview(serviceDetail.afterSaleImage.split(','), index)" v-for="(img, index) in serviceDetail.afterSaleImage.split(',')" :key="index"
style="width: 50px; height: 50px; margin: 0px 5px"></image>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">收货地址:</view>
<view class="value">
<span v-if="change_info.salesConsigneeAddressPath">{{
change_info.salesConsigneeAddressPath
}}</span>
</view>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">联系人:</view>
<view class="value">{{ change_info.salesConsigneeName }}</view>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">联系方式:</view>
<view class="value">{{
change_info.salesConsigneeMobile || "" | secrecyMobile
}}</view>
</view>
<view v-if="refundShow">
<view class="detail-item">
<view class="title">退款金额:</view>
<view class="value">{{
serviceDetail.flowPrice | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.agree_price">
<view class="title">同意退款:</view>
<view class="value">{{
serviceDetail.agree_price | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.actual_price">
<view class="title">实际退款:</view>
<view class="value">{{
serviceDetail.actual_price | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.actual_price">
<view class="title">退款时间:</view>
<view class="value">{{
serviceDetail.refund_time | unixToDate
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.refund_price !== 0">
<view class="title">退款方式:</view>
<view class="value">{{
serviceDetail.refundWay | refundWayFilter
}}</view>
</view>
<view class="detail-item" v-if="accountShow && serviceDetail.refund_price != 0">
<view class="title">账户类型:</view>
<view class="value">{{
serviceDetail.accountType | accountTypeFilter
}}</view>
</view>
<view class="detail-item" v-if="
accountShow && !bankShow && serviceDetail.actualRefundPrice != 0
">
<view class="title">退款账号:</view>
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行名称:</view>
<view class="value">{{ serviceDetail.bankAccountName }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行账号:</view>
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行开户名:</view>
<view class="value">{{ serviceDetail.bankAccountName }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行开户行:</view>
<view class="value">{{ serviceDetail.bankDepositName }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mlogisticsName">
<view class="title">回寄快递:</view>
<view class="value">{{ serviceDetail.mlogisticsName }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mlogisticsNo">
<view class="title">回寄运单号:</view>
<view class="value">{{ serviceDetail.mlogisticsNo }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mDeliverTime">
<view class="title">回寄时间:</view>
<view class="value">{{ serviceDetail.mDeliverTime }}</view>
</view>
</view>
</view>
<!-- <view class="submit-view">
<view>在线客服</view>
<view><u-button type="info" shape="circle" size="mini">撤销申请</u-button></view>
</view> -->
</view>
</template>
<script>
import {
getServiceDetail,
getstoreAfterSaleAddress,
getAfterSaleLog,
} from "@/api/after-sale.js";
import UniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
components: {
UniIcons,
},
data() {
return {
// 售后单状态
serviceStatusList: {
APPLY: "申请售后",
PASS: "通过售后",
REFUSE: "拒绝售后",
BUYER_RETURN: "买家退货，待卖家收货",
SELLER_RE_DELIVERY: "商家换货/补发",
SELLER_CONFIRM: "卖家确认收货",
SELLER_TERMINATION: "卖家终止售后",
BUYER_CONFIRM: "买家确认收货",
BUYER_CANCEL: "买家取消售后",
WAIT_REFUND: "等待平台退款",
COMPLETE: "完成售后",
},
// 售后类型
serviceTypeList: {
CANCEL: "取消",
RETURN_GOODS: "退货",
EXCHANGE_GOODS: "换货",
RETURN_MONEY: "退款",
},
orderStatusList: {
UNDELIVERED: "待发货",
UNPAID: "未付款",
PAID: "已付款",
DELIVERED: "已发货",
CANCELLED: "已取消",
COMPLETE: "已完成",
TAKE: "已完成",
},
serviceDetail: {},
logs: [],
allowable: {},
goodsList: [],
change_info: {},
serviceDetail: {},
express_info: {},
imagesList: [],
refundShow: false,
accountShow: false,
bankShow: false,
returnAdressShow: true,
shipInfoShow: false,
sn: "",
};
},
onLoad(options) {
uni.setNavigationBarTitle({
title: "服务单详情",
});
this.sn = options.sn;
this.loadDetail();
this.getAddress();
this.getLog(options.sn);
},
filters: {
statusFilter(val) {
switch (val) {
case "APPLY":
return "售后服务申请成功，等待商家审核";
case "PASS":
return "售后服务申请审核通过";
case "REFUSE":
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
case "FULL_COURIER":
return "申请售后的商品已经寄出，等待商家收货";
case "STOCK_IN":
return "商家已将售后商品入库";
case "WAIT_FOR_MANUAL":
return "等待平台进行人工退款";
case "REFUNDING":
return "商家退款中，请您耐心等待";
case "COMPLETED":
return "售后服务已完成，感谢您的支持";
case "ERROR_EXCEPTION":
return "系统生成新订单异常，等待商家手动创建新订单";
case "CLOSED":
return "售后服务已关闭";
case "WAIT_REFUND":
return "等待平台进行退款";
default:
return "";
}
},
refundWayFilter(val) {
switch (val) {
case "OFFLINE":
return "账户退款";
case "OFFLINE":
return "线下退款";
case "ORIGINAL":
return "原路退回";
default:
return "";
}
},
accountTypeFilter(val) {
switch (val) {
case "WEIXINPAY":
return "微信";
case "ALIPAY":
return "支付宝";
case "BANK_TRANSFER":
return "银行卡";
default:
return "";
}
},
},
methods: {
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {},
fail: function (err) {},
},
});
},
getAddress() {
getstoreAfterSaleAddress(this.sn).then((res) => {
if (res.data.success) {
this.change_info = res.data.result;
}
});
},
getLog(sn) {
getAfterSaleLog(sn).then((res) => {
this.logs = res.data.result;
});
},
loadDetail() {
uni.showLoading({
title: "加载中",
});
getServiceDetail(this.sn).then((res) => {
uni.hideLoading();
this.serviceDetail = res.data.result;
this.allowable = this.serviceDetail.allowable;
this.express_info = this.serviceDetail.express_info;
if (this.serviceDetail.serviceType == "RETURN_GOODS") {
this.refundShow = true;
}
this.accountShow =
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
this.serviceDetail.refundWay === "OFFLINE";
this.bankShow =
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
this.serviceDetail.refundWay === "OFFLINE" &&
this.serviceDetail.accountType === "BANK_TRANSFER";
});
},
gotoGoodsDetail(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
onProgress() {
uni.navigateTo({
url: `./applyProgress?sn=${
this.serviceDetail.sn
}&createTime=${encodeURIComponent(this.serviceDetail.createTime)}
&logs=${encodeURIComponent(JSON.stringify(this.logs))}&serviceStatus=${
this.serviceDetail.serviceStatus
}`,
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.apply-info-view {
background: $page-color-base;
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 20rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
font-size: 28rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
}
.price {
color: $light-color;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
}
.apply-detail-view {
background-color: #f7f7f7;
margin-top: 10rpx;
padding: 20rpx;
color: #666666;
.detail-item {
padding: 12rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 24rpx;
.title {
padding-left: 10rpx;
width: 140rpx;
}
.value {
padding-left: 40rpx;
}
}
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
padding: 0rpx 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.addr-title {
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
border-bottom: 2rpx solid #d6d6d6;
}
.addr-info {
padding: 50rpx;
font-size: 26rpx;
font-weight: bold;
}
.log-box-bottom {
height: 120rpx;
flex-direction: column;
background-color: rgb(247, 247, 247);
}
.log-box-top {
height: 153rpx;
display: flex;
flex-direction: row;
background-color: rgb(255, 255, 255);
position: absolute;
top: 200rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
margin-left: 22rpx;
margin-right: 22rpx;
margin-top: 22rpx;
border-radius: 22rpx;
justify-content: space-between;
align-items: center;
padding-bottom: 52rpx;
padding-top: 52rpx;
padding-left: 32rpx;
.top01 {
width: 90%;
font-family: PingFangSC-Regular;
font-size: 28rpx;
line-height: 30rpx;
color: rgb(46, 45, 45);
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
.log-first-show {
flex-direction: row;
margin-top: 16rpx;
margin-right: 44rpx;
font-family: PingFangSC-Regular;
font-size: 22rpx;
color: rgb(140, 140, 140);
line-height: 30rpx;
}
}
}
.status-info {
flex-direction: row;
background-color: $light-color;
.status-info-box {
height: 180rpx;
flex-direction: row;
padding-left: 54rpx;
padding-right: 54rpx;
padding-top: 20rpx;
font-family: PingFangSC-Regular;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
line-height: 50rpx;
.status-val {
font-size: 32rpx;
}
.status-tip {
font-size: 24rpx;
}
}
}
.info-box {
padding-right: 40rpx 0rpx;
background-color: #eef1f2;
}
</style>

141
pages/order/afterSales/applyProgress.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<view>
<view class="info-view">
<view class="header-title-view">
<view class="title">售后单号:</view>
<view>{{ sn }}</view>
</view>
<view class="header-title-view">
<view class="title">申请时间:</view>
<view>{{ createTime }}</view>
</view>
</view>
<view class="info-view">
<view class="header-title-view">
<view>{{ serviceStatus }}</view>
</view>
</view>
<view class="info-view">
<view>
<u-time-line v-if="list.length != 0">
<u-time-line-item>
<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
<template v-slot:content>
<view v-for="(time,index) in list" :key="index">
<view class="u-order-desc">{{time.message}}</view>
<view class="u-order-time">{{time.createTime}}</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
<view v-else>
<u-empty text="暂无审核日志"></u-empty>
</view>
</view>
</view>
</view>
</template>
<script>
import UEmpty from "@/uview-ui/components/u-empty/u-empty.vue";
export default {
components: {
UEmpty
},
data() {
return {
sn: "",
createTime: "",
list: [],
serviceStatus: "",
};
},
onLoad(options) {
this.sn = options.sn;
this.createTime = decodeURIComponent(options.createTime);
this.serviceStatus = this.statusFilter(options.serviceStatus);
this.list = JSON.parse(decodeURIComponent(options.logs));
console.log(options.logs);
// list.forEach(res => {
// res.log_time_str = this.$u.timeFormat(res.log_time, 'yyyy-mm-dd hh:MM:ss');
// })
// this.list = list;
},
methods: {
statusFilter(val) {
switch (val) {
case "APPLY":
return "售后服务申请成功，等待商家审核";
case "PASS":
return "售后服务申请审核通过";
case "REFUSE":
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
case "FULL_COURIER":
return "申请售后的商品已经寄出，等待商家收货";
case "STOCK_IN":
return "商家已将售后商品入库";
case "WAIT_FOR_MANUAL":
return "等待平台进行人工退款";
case "REFUNDING":
return "商家退款中，请您耐心等待";
case "COMPLETED":
return "售后服务已完成，感谢您的支持";
case "ERROR_EXCEPTION":
return "系统生成新订单异常，等待商家手动创建新订单";
case "CLOSED":
return "售后服务已关闭";
case "WAIT_REFUND":
return "等待平台进行退款";
default:
return "";
}
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.u-order-time {
font-size: 24rpx;
color: #999;
margin: 20rpx 0;
}
.info-view {
margin: 20rpx 0;
border-radius: 20rpx;
background-color: #fff;
padding: 30rpx;
.header-title-view {
display: flex;
flex-direction: row;
align-items: center;
color: #909399;
.title {
width: 160rpx;
}
}
.steps-view {
display: flex;
flex-direction: row;
align-items: center;
color: #909399;
border-bottom: 1px solid $page-color-base;
margin-bottom: 10rpx;
.title {
width: 160rpx;
}
}
}
</style>

81
pages/order/afterSales/applySuccess.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<view>
<view class="header">
<u-icon name='checkmark' size="150" color="#ff6b35"></u-icon>
<view class="success-text">售后申请提交成功</view>
<view class="btn-view">
<view class="btn-item">
<u-button ripple class="btn1" shape="circle" @click="toMenu()">查看记录</u-button>
</view>
<view class="btn-item">
<u-button ripple class="btn2" shape="circle" @click="toHome()">回到主页</u-button>
</view>
</view>
</view>
<view class="text-view">
<view style="display: flex; margin-bottom: 20rpx; align-items: center">温馨提示：</view>
<view>• 商品寄回地址将在审核通过后在申请记录中查询。</view>
<view>• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</view>
<view>• 退货处理成功后退款金额将原路返回到您的支持账户中；</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
toMenu() {
uni.redirectTo({
url: "/pages/order/afterSales/afterSales",
});
},
toHome() {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
},
},
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100rpx;
}
.btn1 {
background: $light-color;
color: #fff;
}
.btn2 {
color: $light-color;
}
.header {
background-color: #fff;
height: 500rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.success-text {
font-size: 40rpx;
font-weight: 400;
margin: 20rpx 0;
}
.btn-view {
display: flex;
flex-direction: row;
margin: 40rpx 0rpx;
.btn-item {
margin: 0rpx 20rpx;
}
}
}
.text-view {
margin: 40rpx;
color: #909399;
}
</style>

223
pages/order/complain/complain.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<view>
<!-- 商品模块 -->
<view class="seller-view">
<view class="seller-info u-flex u-row-between">
<view class="seller-name">
<view class="name">{{ order.storeName || "" }}</view>
<view class="status">{{ orderStatusList[order.orderStatus] }}</view>
</view>
<view class="order-sn"></view>
</view>
<u-line color="#DCDFE6"></u-line>
<view class="goods-item-view" v-for="(sku, index) in orderGoodsList" :key="index" v-if="sku.skuId == skuId">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.goodsName }}</view>
<view class="goods-price">
￥{{ sku.flowPrice | unitPrice }}
<!-- <span>+{{ '1' }}积分</span> -->
</view>
</view>
<view class="goods-num">
<view>x{{ sku.num }}</view>
</view>
</view>
</view>
<!-- 投诉主题 -->
<u-select @confirm="confirmComplain" v-model="complainShow" :list="complainList"></u-select>
<!-- 投诉模块 -->
<view class="cell">
<view class="cell-item between" @click="complainShow = true">
<view class="cell-title"> 投诉主题 </view>
<view class="cell-view"> {{ complainTopic }} </view>
<u-icon style="margin-left: 20rpx" name="arrow-down"></u-icon>
</view>
<view class="cell-item complain-content">
<view class="cell-title title"> 投诉内容 </view>
<view class="cell-view content">
<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
</view>
</view>
<view class="cell-item">
<view class="cell-title"> 投诉凭证 </view>
<view class="cell-view">
<u-upload ref="uUpload" :header=" { accessToken: storage.getAccessToken() }" upload-text="" :show-progress="false" :action="action" width="100" @on-uploaded="onUploaded" :max-count="5"></u-upload>
</view>
</view>
</view>
<view class="submit-btn" @click="handleSumit">提交</view>
</view>
</template>
<script>
import storage from "@/utils/storage.js";
import { getOrderDetail } from "@/api/order.js";
import { getComplainReason, addComplain } from "@/api/after-sale.js";
import { upload } from "@/api/common.js";
export default {
data() {
return {
storage,
action: upload,
orderStatusList: {
UNDELIVERED: "待发货",
UNPAID: "未付款",
PAID: "已付款",
DELIVERED: "已发货",
CANCELLED: "已取消",
COMPLETE: "已完成",
TAKE: "已完成",
},
complainValue: "", //投诉内容
complainShow: false, //投诉主题开关
complainTopic: "",
// 投诉列表
complainList: [],
images: [],
order: "",
orderGoodsList: "",
orderDetail: "",
sn: "",
skuId: "",
};
},
onLoad(option) {
console.log(option);
this.loadData(option.sn);
this.sn = option.sn;
this.skuId = option.skuId;
},
mounted() {
this.getReasion();
},
methods: {
onUploaded(lists) {
console.log(lists);
let images = [];
lists.forEach((item) => {
images.push(item.response.result);
});
this.images = images;
console.log(this.images);
},
// 提交
handleSumit() {
let goods = this.orderGoodsList.filter((item) => {
return item.skuId == this.skuId;
});
let data = {
complainTopic: this.complainTopic, //投诉主题,
content: this.complainValue, //投诉内容
goodsId: goods[0].goodsId, //商品id
images: this.images, //图片
orderSn: this.sn, //订单号
skuId: this.skuId, //skuid
};
addComplain(data).then((res) => {
if (res.data.success) {
uni.showToast({
title: "提交成功!",
duration: 2000,
icon: "none",
});
setTimeout(() => {
uni.redirectTo({
url: "/pages/order/complain/complainList",
});
}, 1000);
}
});
},
getReasion() {
getComplainReason().then((res) => {
if (res.data.result.length >= 1) {
res.data.result.forEach((item) => {
let way = {
value: item.reason,
label: item.reason,
};
this.complainList.push(way);
});
this.complainTopic = res.data.result[0].reason;
console.log(this.complainTopic);
}
});
},
loadData(sn) {
uni.showLoading({
title: "加载中",
});
getOrderDetail(sn).then((res) => {
const order = res.data.result;
this.order = order.order;
this.orderGoodsList = order.orderItems;
this.orderDetail = res.data.result;
uni.hideLoading();
});
},
confirmComplain(e) {
console.log(e);
this.complainTopic = e[0].label;
},
},
};
</script>
<style lang="scss" scoped>
@import "../goods.scss";
.cell {
width: 100%;
background: #fff;
padding: 26rpx;
}
.cell-item {
padding: 30rpx 0;
border-bottom: 2rpx solid #f5f7fa;
display: flex;
align-items: center;
}
.complain-content {
display: flex;
align-items: center;
.content {
width: 100%;
}
.title {
width: 140rpx;
}
}
/deep/ .u-input__textarea {
padding: 0;
}
.cell-title {
font-weight: bold;
margin-right: 20rpx;
}
.submit-btn {
width: 70%;
margin: 0 auto;
height: 80rpx;
line-height: 80rpx;
color: #fff;
text-align: center;
background: $light-color;
margin-top: 20px;
border-radius: 200px;
}
</style>

169
pages/order/complain/complainInfo.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view class="wrapper">
<view class="tips">我的投诉信息</view>
<u-cell-group>
<u-cell-item
:arrow="false"
:value="detail.goodsName"
title="投诉商品"
></u-cell-item>
<u-cell-item
:arrow="false"
:value="statusData[detail.complainStatus]"
title="投诉状态"
></u-cell-item>
<u-cell-item
:arrow="false"
:value="detail.createTime"
title="投诉时间"
></u-cell-item>
<u-cell-item
:arrow="false"
:value="detail.complainTopic"
title="投诉主题"
></u-cell-item>
<u-cell-item
:arrow="false"
:value="detail.content"
title="投诉内容"
></u-cell-item>
<view class="row" v-if="detail.orderComplaintImages">
<u-image
width="100rpx"
height="100rpx"
border-radius="10"
style="margin: 0 10rpx"
v-for="(item, index) in detail.orderComplaintImages"
:key="index"
:src="item"
@click="preview(detail.orderComplaintImages, index)"
/>
</view>
</u-cell-group>
<view class="tips">商家申诉信息</view>
<u-cell-group>
<u-cell-item
:arrow="false"
:value="detail.appealTime || '暂无'"
title="申诉时间"
></u-cell-item>
<u-cell-item
:arrow="false"
:value="detail.appealContent || '暂无'"
title="申诉内容"
></u-cell-item>
<view class="row" v-if="detail.appealImagesList">
<u-image
width="100rpx"
height="100rpx"
border-radius="10"
style="margin: 0 10rpx"
v-for="(item, index) in detail.appealImagesList"
@click="preview(detail.appealImagesList, index)"
:key="index"
:src="item"
/>
</view>
</u-cell-group>
<view class="tips">对话详情</view>
<view class="speak-way" v-if="detail.orderComplaintCommunications">
<view
class="speak-msg seller"
:key="i"
v-for="(complaint, i) in detail.orderComplaintCommunications"
>
{{
complaint.owner == "PLATFORM"
? "平台"
: complaint.owner == "BUYER"
? "买家"
: "卖家"
}}：
<span>{{ complaint.content }}</span>
</view>
</view>
<view class="speak-way" v-else>暂无对话</view>
<view class="tips">平台仲裁</view>
<u-cell-group>
<u-cell-item
:arrow="false"
title="仲裁意见"
:value="detail.arbitrationResult || '暂无'"
></u-cell-item>
</u-cell-group>
</view>
</template>
<script>
import { getComplainDetail } from "@/api/after-sale";
export default {
data() {
return {
detail: "",
statusData: {
NO_APPLY: "未申请",
APPLYING: "申请中",
COMPLETE: "已完成，此时可申请",
EXPIRED: "已失效，不可申请",
CANCEL: "已取消",
},
};
},
onLoad(option) {
this.init(option.id);
},
methods: {
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {},
fail: function (err) {},
},
});
},
init(id) {
uni.showLoading({
title: "加载中",
});
getComplainDetail(id).then((res) => {
if (res.data.success) {
this.detail = res.data.result;
}
uni.hideLoading();
});
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.row {
display: flex;
flex-wrap: wrap;
}
.speak-msg {
padding: 26rpx 32rpx;
> span {
color: #999 !important;
}
}
.admin {
color: $main-color;
}
.speak-way {
background: #fff;
}
.wrapper {
padding: 16rpx;
}
.tips {
margin: 40rpx 0;
}
</style>

188
pages/order/complain/complainList.vue Normal file
View File

@@ -0,0 +1,188 @@
<template>
<view>
<view
class="seller-view"
v-for="(item, index) in complaionData"
:key="index"
>
<view class="seller-info u-flex u-row-between">
<view class="seller-name">
<view class="name">{{ item.storeName }}</view>
</view>
<view class="order-sn">{{ statusData[item.complainStatus] }}</view>
</view>
<u-line color="#DCDFE6"></u-line>
<view class="goods-item-view">
<view class="goods-img" @click="handleToGoods(item)">
<u-image
border-radius="6"
width="131rpx"
height="131rpx"
:src="item.goodsImage"
></u-image>
</view>
<view class="goods-info" @click="handleToGoods(item)">
<view class="goods-title u-line-2">{{ item.goodsName }}</view>
<view class="goods-price">
￥{{ item.goodsPrice | unitPrice }}
<!-- <span>+{{ '1' }}积分</span> -->
</view>
</view>
<view class="goods-num">
<view>x{{ item.num }}</view>
</view>
</view>
<view class="complain-item-view">
<view class="complain-time"> {{ item.createTime }} </view>
<view class="complain-speak"> {{ item.complainTopic }} </view>
</view>
<view class="complain-btn">
<u-tag
mode="plain"
@click="handleClear(item)"
class="complain-tag"
text="撤销投诉"
type="info"
v-if="
item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'
"
/>
<u-tag
mode="plain"
@click="handleInfo(item)"
class="complain-tag"
text="投诉详情"
type="info"
/>
</view>
</view>
<view v-if="empty" style="margin-top: 40rpx">
<u-empty text="暂无投诉列表" mode="list"></u-empty>
</view>
<u-modal
show-cancel-button
@confirm="handleClearConfirm"
v-model="show"
:content="content"
></u-modal>
</view>
</template>
<script>
import { getComplain, clearComplain } from "@/api/after-sale";
export default {
data() {
return {
statusData: {
NEW: "新订单",
NO_APPLY: "未申请",
APPLYING: "申请中",
COMPLETE: "已完成",
EXPIRED: "已失效",
CANCEL: "已取消",
},
show: false,
content: "是否撤销投诉？",
params: {
pageNumber: 1,
pageSize: 20,
// memberId: "",
// memberName: "",
},
complaionData: [],
empty: false,
rows: "",
};
},
mounted() {
this.init();
},
onReachBottom() {
this.params.pageNumber++;
this.init();
},
methods: {
// 点击跳转到商品
handleToGoods(val) {
uni.navigateTo({
url: "/pages/product/goods?id=" + val.skuId+"&goodsId="+val.goodsId,
});
},
// 撤销投诉
handleClear(val) {
console.log(val);
this.show = true;
this.rows = val;
},
handleClearConfirm() {
clearComplain(this.rows.id).then((res) => {
if (res.data.success) {
uni.showToast({
title: "撤销成功",
duration: 2000,
icon: "none",
});
this.complaionData = [];
this.params.pageNumber = 1;
this.init();
}
});
},
handleInfo(val) {
uni.navigateTo({
url: "./complainInfo?id=" + val.id,
});
},
init() {
uni.showLoading({
title: "加载中",
});
getComplain(this.params).then((res) => {
console.log(res);
if (res.data.result.records.length >= 1) {
this.complaionData.push(...res.data.result.records);
} else {
this.empty = true;
}
uni.hideLoading();
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../goods.scss";
.complain-item-view {
border-bottom: 2rpx solid #f5f7fa;
border-top: 2rpx solid #f5f7fa;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.complain-time {
font-size: 24rpx;
color: #999;
}
/deep/ .seller-name {
width: auto !important;
}
.complain-btn {
padding: 20rpx 0;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 30rpx;
}
.complain-tag {
margin-left: 10rpx;
}
</style>

241
pages/order/evaluate/againEvaluate.vue Normal file
View File

@@ -0,0 +1,241 @@
<template>
<view class="page-main">
<view class="after-sales-goods-detail-view">
<view>
<view class="goods-item-view">
<view class="goods-img"><u-image width="131rpx" height="131rpx" :src="order.goods_img"></u-image></view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ order.goodsName }}</view>
<view class="goods-specs">/</view>
<view class="goods-price"></view>
</view>
<view class="goods-num"><view></view></view>
</view>
</view>
</view>
<view class="info-evaluate-view">
<view class="info-cell">
<view class="info-cell-title">初评日期：{{ $u.timeFormat(order.create_time, 'yyyy-mm-dd') }}</view>
</view>
<view class="info-cell">
<view class="info-cell-title">初评评价：{{ order.grade_str }}</view>
</view>
<view class="info-cell">
<view class="info-cell-title">初评内容：{{ order.content }}</view>
</view>
<view class="info-cell"><view class="info-cell-title">初评审核状态：您的初评审核通过</view></view>
</view>
<view class="info-evaluate-view">
<view class="input-view">
<u-input
height="200"
placeholder-style="font-size:12px;color:#CCCCCC"
v-model="form[0].content"
:type="type"
maxlength="500"
:border="border"
:maxlength="maxlength"
:placeholder="placeholder"
/>
</view>
<view class="input-num">
<text>{{ form[0].content.length }}/{{ maxlength }}</text>
</view>
</view>
<view class="info-evaluate-view">
<view class="images-view"><u-upload :action="action" width="150" @on-uploaded="onUploaded" :max-count="5"></u-upload></view>
</view>
<view class="submit-view"><u-button shape="circle" style="background-color: #1abc9c;color: #ffffff;" @click="onSubmit">提交</u-button></view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { commentsOrder, AppendCommentsOrder } from '@/api/members.js';
import { upload } from '@/api/common.js';
export default {
data() {
return {
value: '',
type: 'textarea',
border: false,
maxlength: 500,
placeholder: '对评价进行补充，更客观，更全面',
order: {},
form: [],
action: upload
};
},
onLoad(options) {
this.order = JSON.parse(options.order);
console.log(this.order);
let sku = {
comment_id: this.order.comment_id,
content: '',
grade: this.order.grade,
images: [],
sku_id: this.order.sku_id
};
this.form.push(sku);
},
methods: {
onSubmit() {
AppendCommentsOrder(this.form).then(res => {
if(res.statusCode == 200){
this.$refs.uToast.show({
title: '发布追评成功',
type: 'success',
url: '/pages/order/evaluate/myEvaluate'
});
}
});
},
onUploaded(lists) {
let images = [];
lists.forEach(item => {
images.push(item.response.url);
});
this.form[0].images = images;
}
}
};
</script>
<style lang="scss">
page,
.content {
background: #f1f1f1;
height: 100%;
margin-bottom: 100rpx;
}
.after-sales-goods-detail-view {
background-color: #f4f4f5;
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-bottom: 20rpx;
.header-text {
background-color: #f4f4f5;
padding: 10rpx 30rpx;
border-radius: 50rpx;
.seller-name {
color: #fa3534;
font-weight: 600;
}
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 30rpx 30rpx;
background-color: #eef1f2;
.goods-img {
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #ff5a10;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
}
.goods-evaluate-view {
margin-top: 8rpx;
padding: 30rpx;
margin-bottom: 5rpx;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
.goods-view {
width: 250rpx;
}
.rate-view {
display: flex;
flex-direction: row;
align-items: center;
.rate-btn {
margin: 0rpx 35rpx;
}
}
}
.info-evaluate-view {
margin: 20rpx 0;
padding: 30rpx;
background-color: #fff;
color: #666666;
align-items: center;
.input-view {
width: 100%;
}
.input-num {
color: #cccccc;
text-align: right;
}
.images-view {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.info-header {
font-size: 33rpx;
margin-bottom: 10rpx;
}
.seller-rate-view {
display: flex;
flex-direction: row;
align-items: center;
.rate-title {
width: 150rpx;
font-size: 33rpx;
}
}
.info-cell {
display: flex;
flex-direction: row;
align-items: center;
margin: 8rpx 0rpx;
}
}
.submit-view {
margin-top: 100rpx;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 10rpx 20rpx;
}
.uni-textarea-wrapper {
font-size: 24rpx;
}
.u-hairline-border:after{
border: none;
}
</style>

272
pages/order/evaluate/evaluateDetail.vue Normal file
View File

@@ -0,0 +1,272 @@
<template>
<view>
<view class="exaluate-member-view">
<view class="member-view">
<view class="member-img">
<u-image
width="82rpx"
style="border: 1px solid #ededed"
height="82rpx"
shape="circle"
:src="comment.memberProfile || '/static/missing-face.png'"
></u-image>
</view>
<view class="member-info">
<view class="memName">{{ comment.memberName }}</view>
<view class="creName">{{ comment.createTime }}</view>
</view>
</view>
<view class="goods-view">
<view class="goods-title"
>商品评价: {{ gradeList[comment.grade] }}</view
>
<view class="goods-subtitle">
{{ comment.content }}
</view>
<view class="goods-imgs-view" v-if="comment.image != null && comment.image.length != 0">
<view
class="img-view"
v-for="(img, imgIndex) in comment.image.split(',')"
:key="imgIndex"
>
<u-image @click.native="preview(comment.image.split(','),imgIndex)" width="160rpx" height="160rpx" :src="img"></u-image>
</view>
</view>
<view class="goods-name">
{{ comment.goodsName }}
</view>
<view class="goods-subtitle"></view>
<view v-if="comment.additional_comment != null">
<view class="goods-comm">
<span style="margin-left: 10rpx">
购买{{ calcDay(comment) }}天后追加评论
</span>
<text>{{
comment.additional_comment.create_time | unixToDate
}}</text>
</view>
<view class="goods-subtitle additional">{{
comment.additional_comment.content
}}</view>
<view class="goods-imgs-view">
<view
class="img-view"
v-for="(img, imgIndex) in comment.additional_comment.images"
:key="imgIndex"
>
<!-- <image :src="img"></image> -->
<u-image width="160rpx" height="160rpx" :src="img"></u-image>
</view>
</view>
<view v-if="comment.additional_comment.reply_status == 1">
<view style="border-bottom: 1px solid #ededed; width: 100%"></view>
<view class="goods-comm store-reply">
<span style="margin-left: 10rpx">掌柜回复：</span>
</view>
<view class="goods-subtitle additional">{{
comment.additional_comment.reply.content
}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: "",
comment: {},
gradeList: {
GOOD: "好评",
MODERATE: "中评",
WORSE: "差评",
haveImage: "有图",
},
};
},
onLoad(options) {
this.comment = JSON.parse(decodeURIComponent(options.comment));
},
methods: {
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {},
fail: function (err) {},
},
});
},
calcDay(order) {
let date = "";
console.log();
if (order.additional_comment) {
date =
(order.additional_comment.create_time - order.create_time) /
60 /
60 /
24;
}
return Math.ceil(date);
},
},
};
</script>
<style lang="scss">
.goods-comm {
color: #ff6262;
border-left: 3px solid #1abc9c;
text {
float: right;
font-size: 24rpx;
color: #999999;
}
&::after {
content: "";
display: block;
clear: both;
}
}
.store-reply {
color: #333;
margin-top: 20rpx;
}
.memName {
font-size: 28rpx;
}
.additional {
margin: 20rpx 0;
}
.goods-name {
border-bottom: 1px solid #ededed;
padding-bottom: 30rpx;
}
.creName,
.goods-name {
font-size: 24rpx;
color: $u-tips-color;
}
page,
.content {
background: $page-color-base;
height: 100%;
}
.seller-view {
background-color: #fff;
margin: 5rpx 0rpx;
padding: 0rpx 30rpx;
.seller-info {
height: 70rpx;
.seller-name {
font-size: 33rpx;
font-weight: 600;
}
.order-sn {
color: #909399;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 0rpx;
.goods-img {
}
.goods-info {
padding-left: 30rpx;
width: 380rpx;
.goods-title {
margin-bottom: 10rpx;
}
.goods-specs {
margin-bottom: 10rpx;
color: #909399;
}
.goods-price {
margin-bottom: 10rpx;
color: #909399;
}
}
.goods-num {
margin: 0rpx 10rpx;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-bottom: 10rpx;
}
}
.btn-view {
min-height: 70rpx;
margin: 5rpx 0rpx;
display: flex;
flex-direction: row;
.description {
color: #909399;
size: 25rpx;
.text {
margin: 10rpx 0rpx;
}
.title {
color: #000000;
}
}
.again-btn {
margin: 0rpx 10rpx;
display: flex;
flex-direction: row;
align-items: flex-end;
margin-bottom: 10rpx;
}
}
}
.exaluate-member-view {
background-color: #fff;
margin-top: 12rpx;
padding: 20rpx;
.member-view {
display: flex;
flex-direction: row;
align-items: center;
.member-img {
width: 100rpx;
margin: 20rpx;
}
.member-info {
margin-left: 15rpx;
}
}
.goods-view {
margin-left: 15rpx;
.border-bottom {
padding-bottom: 20rpx;
border-bottom: 1px solid #ededed;
}
.goods-title {
margin-bottom: 10rpx;
}
.goods-subtitle {
margin-bottom: 20rpx;
color: #909399;
}
.goods-imgs-view {
margin: 20rpx 0;
display: flex;
flex-direction: row;
align-items: center;
.img-view {
margin-right: 15rpx;
}
}
}
}
</style>

81
pages/order/evaluate/evaluateInfo.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<view>
<view class="info-view">
<view class="info-text">
1.对商品金额大于20元商品(虚拟商品除外)进行评价并通过审核后，根据商品价格和您的评价内容为您发放积分。
</view>
<view class="info-text">
2.只能对90天内购买的订单进行商品评价。
</view>
<view class="info-text">
3.同一订单和相隔15日内不同订单中的相同商品，只能评价一次。
</view>
<view class="info-text">
4.退换货订单产生的商品评价将会被删除，且会扣除相应的优币。
</view>
<view class="info-text">
5.鼓励发表原创、有价值的评价;杜绝剽窃、发表无意义、违反法律法规的评价内容，如果您发布的无效评价超过(包含)5条，则一年内您发表的商品评价都不会获得积分奖励。
</view>
<view class="info-text">
6.晒单发表成功后会对晒图进行审核，审核过程中，心得文字会先展示出来，审核通过后，晒图会一起进行展示。
</view>
<view class="info-text">
7.对于审核不通过的评价晒单，不能获得优币奖励，且文字、晒图均不能被展示出来，有下列情形之一的，审核不予通过：
</view>
<view class="info-text">
• 评价心得文字与商品无关，且出现言辞露骨的情况;
</view>
<view class="info-text">
• 图片与所购商品不一致;
</view>
<view class="info-text">
• 晒单为截屏图片;
</view>
<view class="info-text">
• 图片不清晰，不能达到晒单目的;
</view>
<view class="info-text">
• 图片中涉及淫秽、色情等违法不良信息;
</view>
<view class="info-text">
• 未经过他人同意，涉及使用他人图片或将他人图片进行编辑后发布;
</view>
<view class="info-text">
• 盗用他人图片经举报、诉讼情况属实;
</view>
<view class="info-text">
• 图片中涉及敏感词汇(如：曝光，315，假二水，翻新等);
</view>
<view class="info-text">
• 图片涉及与客服聊天记录;
</view>
<view class="info-text">
• 对于成人用品晒单，未对特殊部位进行遮掩或打马赛克。
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
page, .content{
background: $page-color-base;
height: 100%;
}
.info-view {
padding: 50rpx;
.info-text {
color: #909399;
margin-bottom: 8rpx;
}
}
</style>

365
pages/order/evaluate/myEvaluate.vue Normal file
View File

@@ -0,0 +1,365 @@
<template>
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs :list="list" :is-scroll="false" inactive-color="#333" :current="current" class="utabs" :active-color="$lightColor" @change="change"></u-tabs>
</view>
<swiper class="swiper-box" :current="current" @change="changeTab" duration="500">
<swiper-item v-for="(item, listIndex) in list" :key="listIndex">
<scroll-view scroll-y style="height: 100%" @scrolltolower="renderData(listIndex)">
<u-empty text="尚无需要评价的商品" mode="list" v-if="orderList.length == 0"></u-empty>
<view class="seller-view" v-for="(order, index) in orderList" :key="index">
<!-- 店铺名称 -->
<view class="box-title">
<view class="title_seller_name">
{{ order.storeName }}
</view>
</view>
<view v-for="(sku, _index) in order.orderItems" :key="_index">
<view class="goods-item-view">
<view>
<u-image border-radius="6rpx" width="132rpx" height="132rpx" class="goods_img" :src="sku.image" alt />
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<view class="text title">{{ gradeList[order.grade] || '' }}</view>
</view>
</view>
<view class="btn-view u-row-between" v-if="current != 0">
<view class="description">
<view class="text title">
<u-read-more ref="uReadMore" :color="$lightColor" text-indent="0">
<rich-text :nodes="'评论内容：' + order.content || ''"></rich-text>
</u-read-more>
</view>
<view class="goods-imgs-view" v-if="order.image">
<view class="img-view" v-if="order.image" v-for="(img, imgIndex) in order.image.split(',')" :key="imgIndex">
<u-image v-if="order.image" @click.native="
preview(order.image.split(','), imgIndex)
" width="160rpx" height="160rpx" :src="img"></u-image>
</view>
</view>
</view>
</view>
<view class="again-btn" @click="onDetail(order)" v-if="current == 1">
<u-tag text="评价详情" shape="circle" mode="plain" type="error" />
</view>
<view v-if="current == 0 && sku.commentStatus == 'UNFINISHED'">
<view class="evaluate">
<view @click="onCommont(order)">
<u-tag text="发表评价" shape="circle" mode="plain" type="error" />
</view>
</view>
</view>
</view>
</view>
<uni-load-more :status="params.loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import { getOrderList } from "@/api/order.js";
import { getComments } from "@/api/members.js";
export default {
data() {
return {
customStyle: {
backgroundColor: this.$lightColor,
color: "#FFF",
height: "60rpx",
width: "150rpx",
margin: "20rpx 0",
},
list: [
{
name: "待评价",
},
{
name: "已评价",
},
],
gradeList: {
GOOD: "好评",
MODERATE: "中评",
WORSE: "差评",
haveImage: "有图",
},
current: 0,
orderList: [],
params: {
pageNumber: 1,
pageSize: 10,
orderStatus: "",
loadStatus: "more",
},
};
},
onShow() {
this.orderList = [];
this.params.pageNumber = 1;
this.current == 0 ? this.loadData() : this.loadComments();
},
watch: {
current(val) {
this.params.pageNumber = 1;
this.params.loadStatus = "more";
this.orderList = [];
//重新读取数据
if (val == 0) {
this.loadData();
}
if (val == 1) {
this.orderList = [];
this.loadComments();
}
},
},
mounted() {
},
methods: {
// 判断当前店铺是否有可评价的商品
commentStatus(val) {
if (this.current == 1) {
return true;
} else {
let show;
val.orderItems &&
val.orderItems.forEach((item) => {
if (item.commentStatus == "UNFINISHED") {
show = true;
} else {
show = false;
}
});
return show;
}
},
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {},
fail: function (err) {},
},
});
},
change(index) {
this.current = index;
},
changeTab(e) {
this.current = e.target.current;
},
loadData() {
uni.showLoading({});
getOrderList(this.params).then((res) => {
uni.hideLoading();
const orderList = res.data.result.records;
if (orderList.length < 10) {
this.params.loadStatus = "noMore";
}
if (orderList.length > 0) {
this.orderList = this.orderList.concat(orderList);
this.params.pageNumber += 1;
}
});
},
onCommont(order) {
uni.navigateTo({
url: `./releaseEvaluate?sn=${order.sn}&order=${encodeURIComponent(
JSON.stringify(order)
)}`,
});
},
loadComments() {
uni.showLoading({});
getComments(this.params).then((res) => {
uni.hideLoading();
let orderList = res.data.result.records;
if (orderList.length < 10) {
this.params.loadStatus = "noMore";
}
orderList.forEach((item) => {
item.orderItems = [
{
image: item.goodsImage,
name: item.goodsName,
goodsId: item.goodsId,
skuId: item.skuId,
},
];
});
this.orderList = this.orderList.concat(orderList);
this.params.pageNumber += 1;
});
},
onAgain(order) {
uni.navigateTo({
url: `./againEvaluate?order=${encodeURIComponent(
JSON.stringify(order)
)}`,
});
},
renderData(index) {
if (this.params.loadStatus == "noMore") return;
if (index == 0) {
this.loadData();
}
if (index == 1) {
this.params.audit_status = "PASS_AUDIT";
this.params.comments_type = "INITIAL";
this.params.comment_status = "WAIT_CHASE";
this.loadComments();
}
if (index == 2) {
this.params.audit_status = "";
this.params.comments_type = "";
this.params.comment_status = "FINISHED";
this.loadComments();
}
},
onDetail(comment) {
uni.navigateTo({
url:
"./evaluateDetail?comment=" +
encodeURIComponent(JSON.stringify(comment)),
});
},
},
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
}
.wrap {
background: #f6f6f6;
height: calc(100vh - var(--window-top));
width: 100%;
}
.goods-imgs-view {
margin: 20rpx 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
.img-view {
margin-right: 15rpx;
}
}
.u-tabs-box {
position: relative;
z-index: 10;
}
.box-content {
margin: 20rpx 0;
}
.title_seller_name {
font-weight: 700;
font-size: 28rpx;
color: #333;
padding-left: 0 !important;
}
.box-title {
height: 90rpx;
line-height: 90rpx;
}
.swiper-box {
height: calc(100% - 88rpx);
}
.goods-specs {
margin-bottom: 10rpx;
color: #cccccc;
font-size: 24rpx;
}
.goods-price {
margin-bottom: 10rpx;
color: #999999;
font-size: 24rpx;
}
.goods-item-view {
display: flex;
margin-bottom: 20rpx;
.goods-info {
padding-left: 30rpx;
.goods-title {
color: $u-main-color;
margin-bottom: 10rpx;
}
}
.goods-num {
margin: 0rpx 10rpx;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 10rpx;
.u-num {
color: $aider-light-color;
font-size: 33rpx;
}
}
}
.again-btn {
margin: 0rpx 10rpx;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 10rpx;
}
.seller-view {
background-color: #fff;
margin: 20rpx 0px;
padding: 0px 20rpx 20rpx 20rpx;
border-radius: 20rpx;
.seller-info {
height: 70rpx;
.seller-name {
font-size: 33rpx;
font-weight: 600;
}
.order-sn {
color: #909399;
}
}
.btn-view {
min-height: 70rpx;
margin: 5rpx 5rpx;
display: flex;
flex-direction: row;
.description {
size: 25rpx;
color: #999999;
.text {
margin: 20rpx 0rpx;
}
.title {
color: #5f5d5f;
}
}
}
.evaluate {
padding: 20rpx 0;
display: flex;
justify-content: flex-end;
}
}
</style>

321
pages/order/evaluate/releaseEvaluate.vue Normal file
View File

@@ -0,0 +1,321 @@
<template>
<view>
<view v-for="(sku, index) in order.orderItems" :key="index">
<view class="after-sales-goods-detail-view">
<view>
<view class="goods-item-view">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image" />
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<view class="goods-price">
<view>x{{ sku.num }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="goods-evaluate-view">
<view class="goods-view">
<view>商品评价</view>
<view class="sub-title">满意请打好评哦</view>
</view>
<view class="rate-view">
<view class="rate-btn" @click="onGrade('GOOD', index)">
<view style="font-size: 42rpx" :style="{ color: form.grade === 'GOOD' ? 'red' : '#CCCCCC' }" class="alifont icon-haoping1"></view>
<text>好评</text>
</view>
<view class="rate-btn" @click="onGrade('MODERATE', index)">
<view style="font-size: 42rpx" :style="{ color: form.grade === 'MODERATE' ? 'red' : '#CCCCCC' }" class="alifont icon-zhongping1"></view>
<text>中评</text>
</view>
<view class="rate-btn" @click="onGrade('WORSE', index)">
<view style="font-size: 42rpx" :style="{ color: form.grade === 'WORSE' ? 'red' : '#CCCCCC' }" class="alifont icon-chaping"></view>
<text>差评</text>
</view>
</view>
</view>
<view class="info-evaluate-view">
<view class="input-view">
<u-input v-model="form.content" height="200" placeholder-style="font-size:12px;color:#CCCCCC" :type="type" :border="border" :maxlength="maxlength" :placeholder="placeholder" />
</view>
<view class="input-num">
<text>{{ form.content.length }}/{{ maxlength }}</text>
</view>
</view>
<view class="info-evaluate-view">
<view class="images-view" @click="beforeUpload(index)">
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
</view>
</view>
</view>
<view class="info-evaluate-view" style="margin-bottom: 150rpx">
<view class="info-header">店铺评分</view>
<view>
<view class="seller-rate-view">
<view class="rate-title">描述相符</view>
<view>
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.descriptionScore" :size="40"></u-rate>
</view>
</view>
<view class="seller-rate-view">
<view class="rate-title">服务态度</view>
<view>
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.serviceScore" :size="40"></u-rate>
</view>
</view>
<view class="seller-rate-view">
<view class="rate-title">物流服务</view>
<view>
<u-rate count="count" gutter="20" active-color="#FFC71C" v-model="form.deliveryScore" :size="40"></u-rate>
</view>
</view>
</view>
</view>
<view class="onSubmit" @click="onSubmit"> 提交申请</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import storage from "@/utils/storage.js";
import { commentsMemberOrder } from "@/api/members.js";
import { upload } from "@/api/common.js";
export default {
data() {
return {
storage,
value: "",
type: "textarea",
border: false,
maxlength: 500,
placeholder:
"宝贝满足您的期待吗？说说它的优点和美中不足的地方吧。您的评价会帮助更多的人",
order: {},
form: {
content: "",
goodsId: "",
grade: "GOOD",
orderItemSn: "",
skuId: "",
descriptionScore: 5,
serviceScore: 5,
deliveryScore: 5,
// // 是否为初评价 true 默认为初评
// first_comment: true,
//content,grade: 'GOOD',skuId,images:[]
},
currentIndex: 0,
action: upload,
};
},
onLoad(options) {
this.form.orderItemSn = options.sn;
this.order = JSON.parse(decodeURIComponent(options.order));
//现在只能一个商品一个评价
},
mounted() {
this.form.goodsId = this.order.orderItems[0].goodsId;
this.form.orderItemSn = this.order.orderItems[0].sn;
this.form.skuId = this.order.orderItems[0].skuId;
},
methods: {
beforeUpload(index) {
this.currentIndex = index;
},
onGrade(grade, index) {
this.form.grade = grade;
},
onSubmit() {
uni.showLoading({
title: "加载中",
});
commentsMemberOrder(this.form).then((res) => {
uni.hideLoading();
uni.showToast({
title: "发布评价成功",
duration: 2000,
icon: "none",
success: () => {
setTimeout(() => {
uni.navigateBack();
}, 1000);
},
});
});
},
onUploaded(lists) {
let images = [];
console.log(lists);
lists.forEach((item) => {
images.push(item.response.result);
});
this.form.images = images;
},
},
};
</script>
<style lang="scss" scoped>
page,
.content {
background: $page-color-base;
height: 100%;
margin-bottom: 100rpx;
}
.onSubmit {
width: 80%;
margin: 0 auto;
text-align: center;
color: #fff;
background: $aider-light-color;
height: 80rpx;
line-height: 80rpx;
border-radius: 100px;
}
.after-sales-goods-detail-view {
background-color: #f4f4f5;
padding: 10rpx 0rpx;
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-bottom: 20rpx;
.header-text {
background-color: #f4f4f5;
padding: 10rpx 30rpx;
border-radius: 50rpx;
.seller-name {
color: $main-color;
font-weight: 600;
}
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
background-color: #eef1f2;
.goods-img {
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
}
.goods-evaluate-view {
margin-top: 8rpx;
padding: 20rpx;
margin-bottom: 5rpx;
background-color: #fff;
display: flex;
flex-direction: row;
align-items: center;
.goods-view {
width: 250rpx;
font-size: 28rpx;
color: #333333;
.sub-title {
font-size: 22rpx;
color: #cccccc;
}
}
.rate-view {
color: #333333;
display: flex;
flex-direction: row;
align-items: center;
.rate-btn {
margin: 0rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
text {
margin-left: 10rpx;
}
}
}
}
.info-evaluate-view {
margin-top: 8rpx;
padding: 20rpx;
background-color: #fff;
align-items: center;
font-size: 24rpx;
.input-view {
width: 100%;
}
.input-num {
color: #cccccc;
text-align: right;
}
.images-view {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.info-header {
font-size: 28rpx;
color: #333333;
margin-bottom: 30rpx;
}
.seller-rate-view {
display: flex;
flex-direction: row;
align-items: center;
.rate-title {
line-height: 70rpx;
width: 150rpx;
font-size: 26rpx;
color: #333333;
}
}
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 0rpx 20rpx;
}
</style>

850
pages/order/fillorder.vue Normal file
View File

@@ -0,0 +1,850 @@
<template>
<div class="wrapper">
<!-- 选择地址 -->
<div class="box1 box">
<u-row style="margin-top: 32rpx">
<u-col style="padding: 0 !important" :offset="0" :span="11" @click.native="clickToAddress()">
<div v-if="!address.id">请选择地址</div>
<div v-else>
<div class="userClass">
{{ address.name }}
<span>
{{ address.mobile | secrecyMobile }}
<u-tag v-if="address.isDefault" text="默认" style="margin-left: 24rpx" mode="plain" type="error" size="mini" />
</span>
</div>
<div class="userAdress">
<span v-if="address.consigneeAddressPath[0]">{{
address.consigneeAddressPath[0]
}}</span>
<span v-if="address.consigneeAddressPath[1]">{{
address.consigneeAddressPath[1]
}}</span>
<span v-if="address.consigneeAddressPath[2]">{{
address.consigneeAddressPath[2]
}}</span>
<span v-if="address.consigneeAddressPath[3]">{{
address.consigneeAddressPath[3]
}}</span>
<span>
{{ address.detail }}
</span>
</div>
</div>
</u-col>
<u-col :span="1" @click.native="
navigateTo('/pages/mine/address/address?way=' + routerVal.way)
" style="text-align: right">
<u-icon name="arrow-right" style="color: #bababa"></u-icon>
</u-col>
</u-row>
</div>
<!-- 背景 -->
<div class="bar"></div>
<!-- 开团信息 -->
<view class="group-box" v-if="isAssemble">
<view class="group-title">
<span v-if="pintuanFlage">你正在开团购买</span>
<span v-else>为你加入仅差<span>{{routerVal.parentOrder.toBeGroupedNum }}</span>人的团购买</span>
</view>
<view class="group">
<view>
<u-image borderRadius="50%" shape="square" class="head-img" width="81rpx" height="81rpx" :src="masterWay.face || '/static/missing-face.png'"></u-image>
<view class="btn-one">团长</view>
</view>
<view class="line"> </view>
<view>
<!-- 如果有最后一名，显示最后一名，没有最后一名，显示等待参团 -->
<u-image class="head-img" v-if="endWay.face" :src="endWay.face" borderRadius="50%" shape="square" width="81rpx" height="81rpx">
<view slot="loading"></view>
</u-image>
<u-image class="head-img" borderRadius="50%" shape="square" v-else width="81rpx" height="81rpx" :src="endWay.face || '/static/missing-face.png'"></u-image>
<view class="wait">{{ endWay.nickname || "等待参团" }}</view>
</view>
</view>
</view>
<!-- 店铺商品信息 -->
<div class="box box2" v-for="(item, index) in orderMessage.cartList" :key="index">
<u-row class="tab1" @click="tostore(item)">
<u-col :offset="0">
<span class="ybname">{{ item.storeName }}</span>
</u-col>
</u-row>
<div class="promotionNotice">{{ item.promotionNotice }}</div>
<u-row class="goodsBorder" v-for="(val, i) in item.skuList" :key="i">
<u-col class="tabL" :offset="0" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" :span="3">
<u-image borderRadius="10rpx" :src="val.goodsSku.thumbnail" alt />
</u-col>
<u-col :span="9" @click="navigateTo('/pages/product/goods?id=' + val.goodsSku.id+'&goodsId='+val.goodsSku.goodsId)" class="tabC">
<div style="overflow: hidden">
<p class="sp_name">{{ val.goodsSku.goodsName }}</p>
<p class="sp_promotion" v-if="val.promotion_tags">
<view class="sp_tag sp_tag_plain" v-for="(promotion_item, promotion_index) in val.promotion_tags" :key="promotion_index">{{ promotion_item }}</view>
</p>
<span class="nums">x{{ val.num }}</span>
</div>
<p class="sp_number">￥{{ val.goodsSku.price | unitPrice }}</p>
</u-col>
</u-row>
<u-row>
<u-col :offset="0" :span="4" class="tl" style="text-align: left">备注信息</u-col>
<u-col :span="8" textAlign="right">
<u-input style="text-align:right;" class="uinput" v-model="remarkVal[index].remark" />
</u-col>
</u-row>
</div>
<!-- 订单信息 -->
<div class="box box3">
<u-row>
<u-col :offset="0" :span="4">发票信息</u-col>
<u-col :span="8" class="tipsColor" textAlign="right" @click.native="invoice()">
<span v-if="receiptList">{{receiptList.receiptTitle}} - {{receiptList.receiptContent}}</span>
<span v-else>不开发票</span>
</u-col>
</u-row>
</div>
<!-- 发票信息 -->
<invoices :res="receiptList" @callbackInvoice="callbackInvoice" v-if="invoiceFlag" />
<u-select v-model="shippingFlag" :list="shippingMethod" @confirm="checkedshipMethod"></u-select>
<!-- 优惠券 -->
<div class="box box4">
<u-row>
<u-col :offset="0" :span="9" @click="shippingFlag = true">配送方式</u-col>
<u-col :span="3" textAlign="right" @click="shippingFlag = true">
{{ shippingMethod.find(e=>{ return e.value == shippingText; }).label }}
</u-col>
</u-row>
<u-row>
<u-col :offset="0" :span="9" @click="GET_Discount()">优惠券</u-col>
<u-col :span="3" v-if="orderMessage.priceDetailDTO && orderMessage.priceDetailDTO.couponPrice" textAlign="right" @click="GET_Discount()">
<span class="main-color">-{{orderMessage.priceDetailDTO.couponPrice | unitPrice}}</span>
</u-col>
<!-- orderMessage.priceDetailDTO.couponPrice | unitPrice -->
<u-col :span="3" v-else textAlign="right" @click="GET_Discount()">
{{ couponNums || "0" }}张可用
<u-icon name="arrow-right"></u-icon>
</u-col>
</u-row>
</div>
<div class="box box5" v-if="orderMessage.priceDetailDTO">
<div>
<u-row>
<u-col :span="9">商品合计</u-col>
<u-col :span="3" textAlign="right">
<span>￥{{ orderMessage.priceDetailDTO.goodsPrice | unitPrice }}</span>
</u-col>
</u-row>
</div>
<div>
<u-row>
<u-col :span="7">运费</u-col>
<u-col :span="5" class="tr tipsColor" textAlign="right">
<u-tag v-if="orderMessage.priceDetailDTO.freightPrice == 0" style="margin-right: 20rpx" color="#FF6262" text="包邮" type="warning" size="mini" mode="plain" shape="circle" />
<span>￥{{
orderMessage.priceDetailDTO.freightPrice | unitPrice
}}</span>
</u-col>
</u-row>
</div>
<div>
<u-row>
<u-col :span="9">优惠金额</u-col>
<u-col :span="3" textAlign="right">-￥{{ orderMessage.priceDetailDTO.couponPrice | unitPrice }}</u-col>
</u-row>
</div>
<div>
<u-row>
<u-col :span="6">活动优惠</u-col>
<u-col :span="6" class="tr tipsColor" textAlign="right">
<u-tag style="margin-right: 20rpx" v-if="orderMessage.priceDetailDTO.discountPrice != 0" color="#FF6262" :text="`优惠 ${orderMessage.priceDetailDTO.discountPrice} 元`" type="warning"
size="mini" mode="plain" shape="circle" />
<span>{{
orderMessage.priceDetailDTO.discountPrice | unitPrice
}}</span>
</u-col>
</u-row>
</div>
</div>
<!-- 结账 -->
<div class="box box6 mp-iphonex-bottom" v-if="orderMessage.priceDetailDTO">
<div class="navL">
合计：
<span class="number">
¥
<span>{{ orderMessage.priceDetailDTO.billPrice | unitPrice }}</span>
</span>
</div>
<div class="navRiv" @click="createTradeFun()">
<!-- #ifndef MP-WEIXIN -->
<div class="navR">提交订单</div>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<div class="navR">微信支付</div>
<!-- #endif -->
</div>
</div>
</div>
</template>
<script>
import * as API_Trade from "@/api/trade";
import * as API_Address from "@/api/address";
import * as API_Order from "@/api/order";
import invoices from "@/pages/order/invoice/setInvoice";
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
export default {
onLoad: function (val) {
this.routerVal = val;
},
components: {
invoices,
},
watch: {},
data() {
return {
invoiceFlag: false, //开票开关
shippingText: "LOGISTICS",
shippingFlag: false,
shippingMethod: [
// {
// value: "SELF_PICK_UP",
// label: "自提",
// },
// {
// value: "LOCAL_TOWN_DELIVERY",
// label: "同城配送",
// },
{
value: "LOGISTICS",
label: "物流",
},
],
isAssemble: false, //是否拼团
couponNums: "", //结算页面优惠券数量
selectAddressId: "",
routerVal: "",
params: {},
// 优惠劵
couponList: "",
// 已选地址
address: "",
// 发票信息
receiptList: "",
// 店铺信息
orderMessage: "",
data: "",
// 存储备注
remarkVal: [],
detail: "", //返回的所有数据
endWay: "", //最后一个参团人
masterWay: "", //团长信息
pintuanFlage: true, //是开团还是拼团
};
},
filters: {
receiptType(type) {
switch (type) {
case "VATORDINARY":
return "增值税普通发票";
case "ELECTRO":
return "电子普通发票";
case "VATOSPECIAL":
return "增值税专用发票";
default:
return "不开发票";
}
},
},
/**
* 监听返回
*/
onBackPress(e) {
if (e.from == "backbutton") {
let routes = getCurrentPages();
let curRoute = routes[routes.length - 1].options;
console.log(routes);
routes.forEach((item) => {
if (
item.route == "pages/tabbar/cart/cartList" ||
item.route.indexOf("pages/product/goods") != -1
) {
uni.redirectTo({
url: item.route,
});
}
});
if (curRoute.addId) {
uni.reLaunch({
url: "/pages/tabbar/cart/cartList",
});
} else {
uni.navigateBack();
}
return true; //阻止默认返回行为
}
},
onShow() {
uni.showLoading({
mask: true,
});
// this.checkedshipMethod([this.shippingMethod[2]]);
this.getOrderList();
uni.hideLoading();
if (this.routerVal.way == "PINTUAN") {
this.isAssemble = true;
this.routerVal.parentOrder = JSON.parse(
decodeURIComponent(this.routerVal.parentOrder)
);
this.pintuanWay();
}
},
mounted() {},
methods: {
//发票回调 选择发票之后刷新购物车
async callbackInvoice(val) {
this.invoiceFlag = false;
this.receiptList = val;
if (val) {
let submit = {
way: this.routerVal.way,
...this.receiptList,
};
let receipt = await API_Order.getReceipt(submit);
if (receipt.data.success) {
this.shippingFlag = false;
this.getOrderList();
}
}
},
// 跳转到店铺
tostore(val) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + val.storeId,
});
},
// 点击配送方式选择
// checkedshipMethod(val) {
// API_Order.selectedShipMethod({
// shippingMethod: val[0].value,
// way: this.routerVal.way,
// }).then((res) => {
// if (res.data.code == 200) {
// this.shippingText = val[0].value;
// } else {
// uni.showToast({
// title: res.data.message,
// duration: 2000,
// icon: "none",
// });
// }
// });
// },
// 点击跳转地址
clickToAddress() {
this.navigateTo(
`/pages/mine/address/address?from=cart&way=${
this.routerVal.way
}&parentOrder=${encodeURIComponent(
JSON.stringify(this.routerVal.parentOrder)
)}`
);
},
// 判断团长以及团员信息
pintuanWay() {
const { memberId } = this.routerVal.parentOrder;
const userInfo = this.$options.filters.isLogin();
if (memberId) {
this.endWay = userInfo;
this.masterWay = this.routerVal.parentOrder;
this.pintuanFlage = false;
} else {
this.pintuanFlage = true;
this.masterWay = userInfo;
}
},
// 判断发票
invoice() {
this.invoiceFlag = true;
},
// 领取优惠券
GET_Discount() {
// 循环店铺id,商品id获取优惠券
let store = [];
let skus = [];
this.orderMessage.cartList.forEach((item) => {
item.skuList.forEach((sku) => {
store.push(sku.storeId);
skus.push(sku.goodsSku.id);
});
});
store = Array.from(new Set(store));
skus = Array.from(new Set(skus));
uni.setStorage({
key: "totalPrice",
data: this.orderMessage.priceDetailDTO.goodsPrice,
});
this.navigateTo(
`/pages/cart/coupon/index?way=${this.routerVal.way}&storeId=${store}&skuId=${skus}`
);
},
navigateTo(url) {
uni.navigateTo({
url,
});
},
submit() {
if (!this.address.id) {
uni.showToast({
title: "请选择地址",
duration: 2000,
icon: "none",
});
return false;
}
// 创建订单
let client;
// #ifdef H5
client = "H5";
// #endif
// #ifdef MP-WEIXIN
client = "WECHAT_MP";
// #endif
// #ifdef APP-PLUS
client = "APP";
// #endif
let submit = {
client,
way: this.routerVal.way,
remark: this.remarkVal,
parentOrderSn: "",
};
// 如果是拼团并且当前用户不是团长
this.routerVal.parentOrder && this.routerVal.parentOrder.orderSn
? (submit.parentOrderSn = this.routerVal.parentOrder.orderSn)
: delete submit.parentOrderSn;
API_Trade.createTrade(submit).then((res) => {
if (res.data.success) {
uni.showToast({
title: "创建订单成功!",
duration: 2000,
icon: "none",
});
// #ifdef MP-WEIXIN
// 微信小程序中点击创建订单直接开始支付
this.pay(res.data.result.sn);
// #endif
// #ifndef MP-WEIXIN
this.navigateTo(
`/pages/cart/payment/payOrder?trade_sn=${res.data.result.sn}`
);
// #endif
} else {
uni.showToast({
title: "创建订单有误!请稍后重试",
duration: 2000,
icon: "none",
});
}
});
},
// 创建订单
createTradeFun() {
// 防抖
this.$u.debounce(this.submit(), 3000);
},
async pay(sn) {
new LiLiWXPay({
sn: sn,
price: this.orderMessage.priceDetailDTO.billPrice,
}).pay();
},
/**
* @param id
*/
getUserAddress() {
// 如果没有商品选择地址的话 则选择 默认地址
API_Address.getAddressDefault().then((res) => {
if (res.data.result) {
res.data.result.consigneeAddressPath = res.data.result.consigneeAddressPath.split(
","
);
this.address = res.data.result;
console.log(this.address);
}
});
},
// 获取结算参数
getOrderList() {
// 获取购物车可用优惠券
this.getCartsCouponNums();
// 获取结算参数
API_Trade.getCheckoutParams(this.routerVal.way).then((res) => {
res.data.result.cartList.forEach((item, index) => {
this.remarkVal[index] = {
remark: item.remark,
storeId: item.storeId,
};
});
this.orderMessage = res.data.result;
if (!res.data.result.memberAddress.id) {
// 获取会员默认地址
this.getUserAddress();
} else {
this.address = res.data.result.memberAddress;
res.data.result.memberAddress.consigneeAddressPath = res.data.result.memberAddress.consigneeAddressPath.split(
","
);
}
});
},
/**购物车可用优惠券 */
getCartsCouponNums() {
API_Trade.getCartCouponNum(this.routerVal.way).then((res) => {
if (res.data.success) {
this.couponNums = res.data.result;
}
});
},
//
},
};
</script>
<style scoped lang="scss">
.main-color {
font-weight: bold;
}
.uinput {
/deep/ input {
text-align: right;
}
}
.promotionNotice {
font-size: 24rpx;
color: $aider-light-color;
}
.nums {
color: $light-color;
float: right;
width: 15%;
text-align: center;
}
.wait {
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
color: #cccccc;
text-align: center;
}
.line {
margin-left: 14rpx;
margin-right: 14rpx;
margin-bottom: 50rpx;
width: 143rpx;
border-bottom: 2px dotted #999;
}
.btn-one,
.wait {
margin-top: 14rpx;
}
.btn-one {
width: 100rpx;
height: 40rpx;
background: $light-color;
border-radius: 20rpx;
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #ffffff;
text-align: center;
line-height: 40rpx;
}
.head-img {
width: 81rpx;
height: 81rpx;
margin: 0 auto;
}
.group-title {
text-align: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
color: $light-color;
}
.group-box {
height: 242rpx;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fff;
}
.group {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.tr {
text-align: right;
}
.tl {
text-align: left;
}
/deep/ .u-col-3 {
text-align: right;
}
.bar {
height: 4rpx;
overflow: hidden;
width: 100%;
background: url("/pages/floor/imgs/line.png") no-repeat;
}
.tabC {
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.box2 {
margin-top: 20rpx;
}
.userClass {
font-weight: bold;
font-size: 32rpx;
color: $u-content-color;
> span {
margin-left: 20rpx;
}
}
.userAdress {
margin: 20rpx 0;
color: $u-tips-color;
font-size: 26rpx;
}
.box6 {
position: fixed;
bottom: 0;
left: 0;
margin: 0;
height: 100rpx;
overflow: hidden;
line-height: 100rpx;
margin-bottom: 0px !important;
background: #fff;
color: #333;
width: 100%;
> .navL {
width: 65%;
}
> .navRiv {
float: left;
}
}
.navR {
margin-top: 10rpx;
height: 80rpx;
color: #fff;
line-height: 80rpx;
background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
padding: 0 44rpx;
text-align: center;
border-radius: 400px;
}
.sp_tag {
display: inline;
background: #f2f2f2;
padding: 0 20rpx 0 10rpx;
height: 20rpx;
line-height: 20rpx;
font-size: 24rpx;
color: #262626;
border-radius: 0.4em;
}
.sp_promotion {
float: left;
width: 75%;
margin: 4rpx 0;
}
.sp_tag_plain {
margin-left: 8rpx;
padding: 0 6rpx 0 6rpx;
background: #fff;
border: 1px solid $main-color;
font-size: 24rpx;
color: $main-color;
border-radius: 50px;
}
.sp_tag_plain:nth-of-type(1) {
margin-left: 0;
}
.sp_name {
float: left;
width: 75%;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sp_type {
color: $u-tips-color;
padding: 8rpx 0;
font-size: 24rpx;
}
.number {
color: $main-color;
font-size: 26rpx;
margin-left: 10rpx;
> span {
font-size: 36rpx;
}
}
.sp_number {
color: $light-color;
font-size: 28rpx;
}
.box1 {
background: #f6f6f6 !important;
min-height: 166rpx;
// height: 200rpx;
/deep/ .u-row {
border: none;
}
margin-bottom: 0 !important;
}
.box {
border-radius: 40rpx;
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
padding: 0 32rpx;
}
.navL,
.navR {
float: left;
}
.wrapper {
background: #f9f9f9;
height: auto;
padding-bottom: 200rpx;
overflow: auto !important;
}
.tab1 {
}
.ybname {
margin-left: 20rpx;
font-weight: 400;
color: #333333;
}
/deep/ .u-col {
padding: 36rpx 0 !important;
}
/deep/ .u-col-3,
.tipsColor {
color: $u-tips-color;
}
.tabL {
text-align: left;
overflow: hidden;
/deep/ .u-image,
.u-image__image {
width: 132rpx !important;
height: 132rpx !important;
border-radius: 0.4em !important;
}
}
</style>

107
pages/order/goods.scss Normal file
View File

@@ -0,0 +1,107 @@
.goods-item-view {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10rpx 30rpx;
.goods-img {flex: 1;}
.goods-info {
padding-left: 30rpx;
flex: 3;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #ff5a10;
}
}
.goods-num {
>.good-complaint{
margin-top:10rpx;
}
text-align: center;
flex: 1;
width: 60rpx;
color: $main-color;
}
}
.seller-view {
background-color: #fff;
margin: 20rpx 0rpx;
.seller-info {
height: 70rpx;
padding: 0 20rpx;
.seller-name {
font-size: 33rpx;
font-weight: 600;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
height: 90rpx;
// justify-content: space-between;
image {
width: 32rpx;
height: 30rpx;
}
.name {
margin-left: 15rpx;
margin-top: -2rpx;
font-size: 28rpx;
flex: 1;
}
.status {
font-size: 26rpx;
color: #ff6262;
}
}
.order-sn {
color: #ff0000;
}
}
.btn-view {
// padding: 25rpx 30rpx;
margin-bottom: 60rpx;
margin-right: 30rpx;
.description {
color: #909399;
size: 25rpx;
.price {
color: #ff0000;
}
}
.right-btn {
float: right;
}
}
}

205
pages/order/invoice/invoiceDetail.vue Normal file
View File

@@ -0,0 +1,205 @@
<template>
<view class="invoice-detail">
<view class="block-item flex-center">
<view>
<view>
{{'增值税普通发票'}}
<view class="circle">
<view></view>
</view>
</view>
<view>{{order.receiptPrice | unitPrice('￥')}}</view>
</view>
</view>
<view class="common-msg flex-center">
<view>
<view>抬头类型</view>
<view>{{order.receiptTitle}}</view>
</view>
<view>
<view>发票状态</view>
<view class="invoice_status">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</view>
</view>
</view>
<u-cell-group :border="false">
<u-cell-item title="发票类型" :border-top="false" :value="'增值税普通发票'" :arrow="false"></u-cell-item>
<u-cell-item title="发票内容" :value="order.receiptContent" :arrow="false"></u-cell-item>
<u-cell-item title="发票抬头" :value="order.receiptTitle" :arrow="false"></u-cell-item>
<u-cell-item title="纳税人识别号" v-if="order.taxpayerId" :value="order.taxpayerId" :arrow="false"></u-cell-item>
</u-cell-group>
<!-- <u-cell-group :border="false" style="margin-top: 20rpx;">
<u-cell-item title="订单状态" :border-top="false" :value="order.order_status_text" :arrow="false"></u-cell-item>
<u-cell-item title="订单编号" :value="order.sn" :arrow="false"></u-cell-item>
</u-cell-group> -->
<!-- <view class="show-pic" @click="preview">
<text>点击预览发票</text>
</view>
<button class="btn" @click="download">下载电子发票</button>
<view class="block-2-view" v-for="(item,index) in order.elec_file_list" :key="index">
<u-image width="300" height="150" :src="item"></u-image>
</view> -->
</view>
</template>
<script>
import { getReceiptDetail } from "@/api/order.js";
export default {
data() {
return {
order: {},
order: {},
title_type: "",
};
},
onLoad(options) {
this.loadData(options.id);
},
methods: {
loadData(id) {
getReceiptDetail(id).then((res) => {
let order = res.data.result;
this.order = order;
});
},
preview() {
//预览发票
if (this.order.elec_file_list.length) {
uni.previewImage({
current: 0,
urls: this.order.elec_file_list,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {},
fail: function (err) {},
},
});
} else {
this.$api.msg("暂无发票可预览");
}
},
download() {
//下载发票
let _this = this;
if (this.order.elec_file_list.length) {
this.order.elec_file_list.forEach((item) => {
uni.downloadFile({
url: item,
success: (res) => {
if (res.statusCode === 200) {
let tempFilePath = res.tempFilePath;
uni.saveFile({
tempFilePath: tempFilePath,
success: function (res) {
_this.$api.msg("发票已下载到" + res.savedFilePath);
},
});
}
},
});
});
} else {
this.$api.msg("暂无发票可下载");
}
},
},
};
</script>
<style lang="scss" scoped>
.block-item {
height: 217rpx;
width: 100%;
position: relative;
> view {
color: #ff6262;
}
> view:first-child {
text-align: center;
line-height: 3em;
> view:first-child {
position: relative;
.circle {
width: 166rpx;
height: 65rpx;
border: 1px solid #ff6262;
border-radius: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
view {
width: 130rpx;
height: 40rpx;
border: 1px solid #ff6262;
border-radius: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
position: absolute;
}
}
}
> view:last-child {
font-size: 40rpx;
}
}
}
.common-msg {
flex-direction: row;
padding: 20rpx;
height: 118rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
> view {
width: 50%;
text-align: center;
color: #666666;
line-height: 1.5em;
view {
font-size: 24rpx;
}
.invoice_status {
color: #ff6262;
}
}
> view:first-child {
border-right: 1px solid #eee;
}
}
.show-pic {
text-align: center;
margin-top: 40rpx;
image {
width: 27rpx;
height: 27rpx;
margin-right: 10rpx;
vertical-align: middle;
}
text {
color: $main-color;
font-size: $font-sm;
}
}
.btn {
font-size: 34rpx;
margin: 60rpx 20rpx;
&::after {
border: none;
}
}
.u-cell {
padding: 35rpx 20rpx;
height: 110rpx;
color: #333333;
}
</style>

255
pages/order/invoice/setInvoice.vue Normal file
View File

@@ -0,0 +1,255 @@
<template>
<u-popup closeable border-radius="28" @close="close" mode="bottom" height="80%" v-model="show">
<div class="wrapper">
<!-- 发票类型 -->
<div class="invoice-title">发票类型</div>
<div class="flex">
<div class="invoice-item" :class="{'active':typeItem.active,disabled:typeItem.disabled}" v-for="(typeItem,index) in invoiceType" :key="index">
{{typeItem.title}}
</div>
</div>
<div class="tips">
{{tips}}
</div>
<div class="divider">
</div>
<!-- 发票抬头 -->
<div class="invoice-title">发票抬头</div>
<div class="flex">
<div class="invoice-item" @click="handleClickHeader(headerItem,index,invoiceHeader)" :class="{'active':headerItem.active,disabled:headerItem.disabled}"
v-for="(headerItem,index) in invoiceHeader" :key="index">
{{headerItem.title}}
</div>
</div>
<div>
<div class="form-item">
<span> {{title}}名称</span>
<u-input :placeholder="'请输入'+title+'名称'" v-model="submitData.receiptTitle" />
</div>
<div class="form-item" v-if="taxpayerFlag">
<span>纳税人识别号</span>
<u-input placeholder="请输入纳税人识别号" v-model="submitData.taxpayerId" />
</div>
</div>
<div class="divider">
</div>
<div class="invoice-title">
发票信息
</div>
<div class="flex">
<div class="invoice-item" @click="handleClickHeader(goodsItem,index,goodsType)" :class="{'active':goodsItem.active,disabled:goodsItem.disabled}" v-for="(goodsItem,index) in goodsType"
:key="index">
{{goodsItem.title}}
</div>
</div>
<div class="submit" @click="submitInvoice()">确定</div>
</div>
</u-popup>
</template>
<script>
import { addReceipt } from "@/api/members";
export default {
props: ["res"],
watch: {
invoiceHeader: {
handler(val) {
this.title = val.filter((item) => {
return item.active == true;
})[0].title;
this.taxpayerFlag = false;
this.submitData.taxpayerId = "";
if (this.title == "单位") {
this.taxpayerFlag = true;
}
},
deep: true,
},
goodsType: {
handler(val) {
this.submitData.receiptContent = val.filter((item) => {
return item.active == true;
})[0].title;
},
deep: true,
},
},
data() {
return {
taxpayerFlag: false,
submitData: {
receiptTitle: "", //发票抬头
taxpayerId: "", //纳税人
receiptContent: "",
},
show: true,
title: "",
tips:
"电子发票即电子增值税发票，是税局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。",
// 发票类型
invoiceType: [
{
title: "电子普通发票",
active: true,
},
{
title: "增值税专用发票",
active: false,
disabled: true,
},
],
// 发票抬头
invoiceHeader: [
{
title: "个人",
active: false,
},
{
title: "单位",
active: false,
},
],
// 商品类型
goodsType: [
{
title: "商品明细",
active: false,
},
{
title: "商品类别",
active: false,
},
],
};
},
mounted() {
if (this.res) {
this.submitData.receiptTitle = this.res.receiptTitle;
this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
this.submitData.receiptContent = this.res.receiptContent;
this.res.receiptContent == "商品明细"
? (this.goodsType[0].active = true)
: (this.goodsType[1].active = true);
this.res.taxpayerId
? (this.invoiceHeader[1].active = true)
: (this.invoiceHeader[0].active = true);
} else {
this.invoiceHeader[0].active = true;
this.goodsType[0].active = true;
}
console.log(this.res);
},
methods: {
handleClickHeader(val, index, arr) {
arr = arr.map((item) => {
return (item.active = false);
});
val.active = true;
},
/**
* 监听关闭
*/
close(val) {
this.$emit("callbackInvoice", val);
},
submitInvoice() {
/**
* 验证
*/
const { receiptTitle, taxpayerId, receiptContent } = this.submitData;
if (this.$u.test.isEmpty(receiptTitle)) {
uni.showToast({
title: "请您填写发票抬头!",
duration: 2000,
icon: "none",
});
return false;
}
if (
!this.$u.test.isEmpty(receiptTitle) &&
this.$u.test.isEmpty(taxpayerId) &&
this.invoiceHeader[1].active == true
) {
uni.showToast({
title: "请您填写纳税人识别号!",
duration: 2000,
icon: "none",
});
return false;
}
this.show = false;
this.close(this.submitData);
},
},
};
</script>
<style scoped lang="scss">
.form-item {
display: flex;
margin: 30rpx 0;
align-items: center;
> span {
margin-right: 50rpx;
}
}
.submit {
width: 100%;
margin-top: 100rpx;
background: $main-color;
text-align: center;
line-height: 80rpx;
height: 80rpx;
margin: 100rpx auto 0 auto;
color: #f2f2f2;
border-radius: 100px;
}
.invoice-item {
margin-right: 30rpx;
color: #333;
font-weight: 24rpx;
padding: 12rpx 46rpx;
border-radius: 100px;
background: #eee;
min-width: 100rpx;
text-align: center;
}
.active {
font-weight: bold;
color: $main-color;
border: 2rpx solid $main-color;
background: rgba($color: $main-color, $alpha: 0.1);
}
.disabled {
color: #b5b5b6;
}
.wrapper {
padding: 30rpx;
}
.invoice-title {
margin-bottom: 30rpx;
font-weight: bold;
font-size: 30rpx;
}
.tips {
margin-top: 30rpx;
color: #999;
font-size: 24rpx;
}
.divider {
margin: 30rpx 0;
height: 1rpx;
border-bottom: 1px solid #f2f3f5;
}
.flex {
display: flex;
}
</style>

803
pages/order/myOrder.vue Normal file
View File

@@ -0,0 +1,803 @@
<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(tabIndex)">
<!-- 空白页 -->
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<!-- 订单列表 -->
<view class="seller-view" :key="oderIndex" v-for="(order, oderIndex) in tabItem.orderList">
<!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between">
<view class="seller-name" @click="tostore(order)">
<view class="name">{{ order.storeName }}</view>
</view>
<view class="order-sn">{{
orderStatusList[order.orderStatus]
}}</view>
</view>
<view>
<view>
<view class="goods-item-view" @click="onDetail(order.sn)">
<view class="goods-img" v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
<u-image border-radius="6" width="100%" height="100%" :src="goods.image"></u-image>
</view>
<view class="goods-info">
<view v-if="order.orderItems.length <= 1" class="goods-title u-line-2">{{ order.groupName }}</view>
<view v-if="order.orderItems.length <= 1" class="goods-price">
￥{{ order.flowPrice | unitPrice }}
<!-- <span v-if="order.point">+{{ order.point }}积分</span> -->
</view>
</view>
<view v-if="order.orderItems.length <= 1" class="goods-num">
<view>x{{ order.groupNum }}</view>
</view>
</view>
</view>
<view class="btn-view u-flex u-row-between">
<view class="description">
<!-- 全部 -->
<!-- 等待付款 -->
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
<text v-else>应付金额：</text>
<text class="price">￥{{ order.flowPrice | unitPrice }}</text>
<!-- 等待发货 || 等待收货 || 交易完成 || 交易关闭 -->
<!-- <text>已付金额：</text>
<text class="price">￥12.00</text> -->
</view>
<view>
<!-- 全部 -->
<u-button ripple class="pay-btn" shape="circle" size="mini" v-if="order.allowOperationVO.pay" @click="waitPay(order)">立即付款</u-button>
<!-- 取消订单 -->
<u-button ripple class="cancel-btn" shape="circle" size="mini" v-if="order.allowOperationVO.cancel" @click="onCancel(order.sn)">
取消订单
</u-button>
<!-- 等待收货 -->
<u-button ripple shape="circle" class="rebuy-btn" size="mini" v-if="order.allowOperationVO.showLogistics" @click="onLogistics(order)">
查看物流
</u-button>
<u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" class="pay-btn" size="mini" v-if="order.allowOperationVO.rog" @click="onRog(order.sn)">
确认收货
</u-button>
<!-- 交易完成 未评价 -->
<!-- <u-button
shape="circle"
class="rebuy-btn"
size="mini"
v-if="order.orderStatus == 'COMPLETE'"
@click="onComment(order.sn)"
>
评价商品
</u-button> -->
<u-button ripple shape="circle" class="rebuy-btn" size="mini" v-if="
order.orderStatus === 'CANCELLED' ||
order.orderStatus === 'COMPLETE'
" @click="reBuy(order)">
再次购买
</u-button>
<!-- 交易完成 未追评 -->
<!-- <u-button class="u-margin-left-15" size="mini"> 追加评价</u-button>
<u-button class="u-margin-left-15" size="mini"> 再次购买</u-button> -->
<!-- 交易关闭 -->
<!-- <u-button class="u-margin-left-15" size="mini"> 取消订单</u-button>
<u-button class="u-margin-left-15" size="mini"> 重新购买</u-button> -->
</view>
</view>
</view>
</view>
<view class="nodata" v-if="tabItem.loadStatus === 'noMore'">
</view>
<uni-load-more :status="tabItem.loadStatus"></uni-load-more>
</scroll-view>
</swiper-item>
</swiper>
<u-popup class="cancel-popup" v-model="cancelShow" mode="bottom" length="60%">
<view class="header">取消订单</view>
<view class="body">
<view class="title">取消订单后，本单享有的优惠可能会一并取消，是否继续？</view>
<view>
<u-radio-group v-model="reason">
<view class="value">
<view class="radio-view" :key="index" v-for="(item, index) in cancelList">
<u-radio :active-color="$lightColor" label-size="25" shape="circle" :name="item.reason" @change="reasonChange">{{ item.reason }}</u-radio>
</view>
</view>
</u-radio-group>
</view>
</view>
<view class="footer">
<u-button size="medium" ripple v-if="reason" shape="circle" @click="submitCancel">提交</u-button>
</view>
</u-popup>
<u-toast ref="uToast" />
<u-modal v-model="rogShow" :show-cancel-button="true" :content="'是否确认收货?'" @confirm="confirmRog"></u-modal>
</view>
</template>
<script>
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import empty from "@/components/empty";
import { getOrderList, cancelOrder, confirmReceipt } from "@/api/order.js";
import { getClearReason } from "@/api/after-sale.js";
import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js";
export default {
components: {
uniLoadMore,
empty,
},
data() {
return {
tabCurrentIndex: 0,
orderStatusList: {
UNDELIVERED: "待发货",
UNPAID: "未付款",
PAID: "已付款",
DELIVERED: "已发货",
CANCELLED: "已取消",
COMPLETED: "已完成",
TAKE: "已完成",
},
navList: [
{
state: 0,
text: "全部",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
{
state: 1,
text: "待付款",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
{
state: 2,
text: "待发货",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
{
state: 3,
text: "待收货",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
{
state: 4,
text: "已完成",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
{
state: 5,
text: "已取消",
loadStatus: "more",
orderList: [],
pageNumber: 1,
},
],
status: "",
params: {
pageNumber: 1,
pageSize: 10,
tag: "ALL",
},
orderStatus: [
{
orderStatus: "ALL", //全部
},
{
orderStatus: "WAIT_PAY", //代付款
},
{
orderStatus: "WAIT_SHIP",
},
{
orderStatus: "WAIT_ROG", //待收货
},
{
orderStatus: "COMPLETE", //已完成
},
{
orderStatus: "CANCELLED", //已取消
},
],
cancelShow: false,
orderSn: "",
reason: "", //取消原因
cancelList: "",
rogShow: false,
};
},
onBackPress(e) {
if (e.from == "backbutton") {
uni.reLaunch({
url: "/pages/tabbar/user/my",
});
return true; //阻止默认返回行为
}
},
onPullDownRefresh(){
this.loadData(this.status)
// uni.stopPullDownRefresh();
},
onLoad(options) {
/**
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
* 替换onLoad下代码即可
*/
let status = Number(options.status);
this.status = status;
this.tabCurrentIndex = status;
if (status == 0) {
this.loadData(status);
}
},
watch: {
tabCurrentIndex(val) {
this.params.tag = this.orderStatus[val].orderStatus;
//切换标签页将所有的页数都重置为1
this.navList.forEach((res) => {
res.pageNumber = 1;
res.loadStatus = "more";
res.orderList = [];
});
this.loadData(val);
},
},
methods: {
// 店铺详情
tostore(val) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + val.storeId,
});
},
//取消订单
onCancel(sn) {
this.orderSn = sn;
this.cancelShow = true;
uni.showLoading({
title: "加载中",
});
getClearReason().then((res) => {
if (res.data.result.length >= 1) {
this.cancelList = res.data.result;
}
uni.hideLoading();
});
},
initData(index) {
this.navList[index].pageNumber = 1;
this.navList[index].loadStatus = "more";
this.navList[index].orderList = [];
this.loadData(index);
},
waitPay(val) {
this.$u.debounce(this.pay(val), 3000)
},
pay(val){
if(val.sn){
// #ifdef MP-WEIXIN
new LiLiWXPay({sn:val.sn,price:val.flowPrice,orderType:'ORDER'}).pay()
// #endif
// #ifndef MP-WEIXIN
uni.navigateTo({
url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
})
// #endif
}
},
//获取订单列表
loadData(index) {
this.params.pageNumber = this.navList[index].pageNumber;
getOrderList(this.params).then((res) => {
uni.stopPullDownRefresh()
if (!res.data.success) {
this.navList[index].loadStatus = "noMore";
return false;
}
let orderList = res.data.result.records;
if (orderList.length == 0) {
this.navList[index].loadStatus = "noMore";
} else if (orderList.length < 10) {
this.navList[index].loadStatus = "noMore";
}
if (orderList.length > 0) {
this.navList[index].orderList = this.navList[index].orderList.concat(
orderList
);
this.navList[index].pageNumber += 1;
}
});
},
//swiper 切换监听
changeTab(e) {
this.tabCurrentIndex = e.target.current;
},
//顶部tab点击
tabClick(index) {
this.tabCurrentIndex = index;
},
//删除订单
deleteOrder(index) {
uni.showLoading({
title: "请稍后",
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600);
},
//取消订单
cancelOrder(item) {
uni.showLoading({
title: "请稍后",
});
setTimeout(() => {
let { stateTip, stateTipColor } = this.orderStateExp(9);
item = Object.assign(item, {
state: 9,
stateTip,
stateTipColor,
});
//取消订单后删除待付款中该项
let list = this.navList[1].orderList;
let index = list.findIndex((val) => val.id === item.id);
index !== -1 && list.splice(index, 1);
uni.hideLoading();
}, 600);
},
//订单状态文字和颜色
orderStateExp(state) {
let stateTip = "",
stateTipColor = this.$lightColor;
switch (+state) {
case 1:
stateTip = "待付款";
break;
case 2:
stateTip = "待发货";
break;
case 9:
stateTip = "订单已关闭";
stateTipColor = "#909399";
break;
//更多自定义
}
return {
stateTip,
stateTipColor,
};
},
onDetail(sn) {
uni.navigateTo({
url: "./orderDetail?sn=" + sn,
});
},
//选择取消原因
reasonChange(reason) {
this.reason = reason;
},
//提交取消订单（未付款）
submitCancel() {
cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
if (res.statusCode == 200) {
uni.showToast({
title: "订单已取消",
duration: 2000,
icon: "none",
});
this.initData(0);
this.cancelShow = false;
}
else{
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
this.cancelShow = false
}
});
},
//确认收货
onRog(sn) {
this.orderSn = sn;
this.rogShow = true;
//
},
confirmRog() {
confirmReceipt(this.orderSn).then((res) => {
if (res.data.code == 200) {
uni.showToast({
title: "已确认收货",
duration: 2000,
icon: "none",
});
this.initData(this.tabCurrentIndex);
this.rogShow = false;
}
});
},
//评价商品
onComment(sn) {
uni.navigateTo({
url: "./evaluate/myEvaluate",
});
},
reBuy(order) {
uni.navigateTo({
url: "/pages/product/goods?id=" + order.groupSkuId + "&goodsId="+ order.goodsId,
});
},
//查看物流
onLogistics(order) {
uni.navigateTo({
url: "/pages/mine/msgTips/packageMsg/logisticsDetail?order_sn=" + order.sn,
});
},
},
};
</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: 26rpx;
color: $font-color-light;
position: relative;
&.current {
color: $main-color;
&:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $main-color;
}
}
}
}
.uni-swiper-item {
height: auto;
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80rpx;
align-items: center;
justify-content: center;
}
.uni-load-more__text {
font-size: 28rpx;
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;
}
}
.seller-view {
border-radius: 20rpx;
background-color: #fff;
margin: 20rpx 0rpx;
.seller-info {
height: 70rpx;
padding: 0 20rpx;
.seller-name {
font-size: 28rpx;
font-weight: 600;
display: flex;
flex-direction: row;
.name {
margin-left: 15rpx;
margin-top: -2rpx;
}
}
.order-sn {
color: $aider-light-color;
font-size: 26rpx;
}
}
.goods-item-view {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 10rpx 20rpx;
.goods-img {
width: 131rpx;
height: 131rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: #333333;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: $aider-light-color;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.btn-view {
padding: 25rpx 30rpx;
font-size: 26rpx;
.description {
color: #909399;
size: 25rpx;
.price {
color: $main-color;
}
}
}
}
.cancel-popup {
.header {
display: flex;
flex-direction: row;
justify-content: center;
margin: 15rpx 0rpx;
}
.body {
padding: 30rpx;
.title {
font-weight: 600;
}
.value {
display: flex;
flex-direction: column;
margin: 20rpx 0;
.radio-view {
margin: 20rpx 0rpx;
}
}
}
.footer {
text-align: center;
}
}
.cancel-btn {
color: #999999 !important;
border-color: #999999 !important;
margin-left: 15rpx;
height: 60rpx;
}
.pay-btn {
// #ifndef MP-WEIXIN
background-color: $light-color !important;
// #endif
color: #ffffff !important;
margin-left: 15rpx;
height: 60rpx;
}
.rebuy-btn {
color: $light-color !important;
border-color: $light-color !important;
background-color: #ffffff !important;
margin-left: 15rpx;
height: 60rpx;
}
.nodata {
// padding-top: 300rpx;
color: #999999;
text-align: center;
img {
width: 346rpx;
height: 304rpx;
}
}
</style>

720
pages/order/orderDetail.vue Normal file
View File

@@ -0,0 +1,720 @@
<template>
<view>
<!-- 订单状态 -->
<div class="info-view order-view">
<div class="order-status" v-if="orderStatusList[order.orderStatus]">
{{ orderStatusList[order.orderStatus].title }}
<div>{{ orderStatusList[order.orderStatus].value }}</div>
</div>
</div>
<!-- 物流信息 -->
<view class="info-view logi-view">
<view class="logi-List" v-if="logiList && logiList.traces.length != 0">
<view class="logi-List-title">
{{logiList.traces[logiList.traces.length-1].AcceptStation}}
</view>
<view class="logi-List-time">
{{logiList.traces[logiList.traces.length-1].AcceptTime}}
</view>
</view>
<view class="logi-List" v-else>
<view class="logi-List-title">
暂无物流信息
</view>
</view>
</view>
<!-- 地址 -->
<view class="info-view">
<view class="address-view">
<view>
<view class="address-title">
<span>{{ order.consigneeName || "未填写昵称" }}</span>
<span>{{ order.consigneeMobile || "未填写手机号" | secrecyMobile }}</span>
</view>
<view class="address">地址：{{ order.consigneeAddressPath }}
{{ order.consigneeDetail }}</view>
</view>
</view>
</view>
<!-- 商品信息 -->
<view>
<view class="seller-view">
<!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between">
<view class="seller-name" @click="tostore(order)">
<view class="name">{{ order.storeName }}</view>
<view class="status" v-if="orderStatusList[order.orderStatus]"> {{ orderStatusList[order.orderStatus].title }}</view>
</view>
<view class="order-sn"></view>
</view>
<view>
<view v-for="(sku, skuIndex) in orderGoodsList" :key="skuIndex">
<view class="goods-item-view">
<view class="goods-img" @click="gotoGoodsDetail(sku)">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
</view>
<view class="goods-info" @click="gotoGoodsDetail(sku)">
<view class="goods-title u-line-2">{{ sku.goodsName }}</view>
<view class="goods-price">
￥{{ sku.goodsPrice | unitPrice }}
<!-- <span v-if="sku.point">+{{ sku.point }}积分</span> -->
</view>
</view>
<view class="goods-num">
<view>x{{ sku.num }}</view>
<view class="good-complaint">
<u-tag size="mini" mode="plain" @click="complaint(sku)" v-if="sku.complainStatus == 'NO_APPLY'" text="投诉" type="info" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="info-view">
<view>
<view class="order-info-view">
<view class="title">商品总价：</view>
<view class="value">￥{{ order.goodsPrice | unitPrice }}</view>
</view>
<view class="order-info-view">
<view class="title">运费：</view>
<view class="value">￥{{ order.freightPrice | unitPrice }}</view>
</view>
<view class="order-info-view">
<view class="title">优惠券：</view>
<view class="value">￥{{ order.couponPrice | unitPrice }}</view>
</view>
<view class="order-info-view">
<view class="title">活动优惠：</view>
<view class="value">￥{{ order.discountPrice | unitPrice }}</view>
</view>
<!-- <view class="order-info-view" v-if="order.use_point">
<view class="title">使用积分：</view>
<view class="value">{{ order.use_point }}</view>
</view> -->
</view>
</view>
<!-- 客户服务， 售后，取消订单，查看物流，投诉等 -->
<view class="info-view" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.cancel == true || order.orderStatus == 'DELIVERED' || order.orderStatus != 'UNPAID' && order.orderType =='PINTUAN'">
<view style="width: 100%">
<view class="order-info-view">
<view class="title">服务</view>
</view>
<view class="customer-list">
<view class="customer-service" v-if="orderDetail.allowOperationVO && orderDetail.allowOperationVO.cancel == true" @click="onCancel(order.sn)">取消订单</view>
<view class="customer-service" v-if="order.orderStatus == 'DELIVERED'" @click="onLogistics(order)">查看物流</view>
<view class="customer-service" v-if="order.orderStatus != 'UNPAID' && order.orderType =='PINTUAN' " @click="ByUserMessage(order)">查看拼团信息</view>
</view>
</view>
</view>
<view class="info-view">
<view style="width: 100%">
<view class="order-info-view">
<view class="title">订单编号：</view>
<view class="value">
{{ order.sn }}
<u-tag class="copy" text="复制" type="info" size="mini" @click="onCopy(order.sn)" />
</view>
</view>
<view class="order-info-view">
<view class="title">下单时间：</view>
<view class="value">{{
order.createTime
}}</view>
</view>
<view class="order-info-view">
<view class="title">支付状态：</view>
<view class="value">
{{
order.payStatus == "UNPAID"
? "未付款"
: order.payStatus == "PAID"
? "已付款"
: ""
}}</view>
</view>
<view class="order-info-view">
<view class="title">支付方式：</view>
<view class="value">{{ orderDetail.paymentMethodValue }}</view>
</view>
</view>
</view>
<view class="info-view" v-if="order.payStatus == 'PAID'">
<view>
<view class="invoice-info-view">
<view class="ltitle">发票信息：</view>
<view v-if="!order.needReceipt" class="value">无需发票</view>
<view v-else class="value" @click="onReceipt(order.receiptVO)">查看发票</view>
</view>
</view>
</view>
<view style="padding-bottom: 150rpx"></view>
<view class="bottom_view">
<view class="btn-view u-flex u-row-between">
<view class="description">
<!-- 全部 -->
<!-- 等待付款 -->
<text v-if="order.payStatus === 'PAID'">已付金额：</text>
<text v-else>应付金额：</text>
<text class="price" v-if="order.priceDetailDTO">￥{{ order.priceDetailDTO.flowPrice | unitPrice }}</text>
</view>
<view>
<!-- 全部 -->
<!-- 等待付款 -->
<u-button type="error" ripple size="mini" v-if=" order.allowOperationVO && order.allowOperationVO.pay" @click="toPay(order)">立即付款</u-button>
<!-- <u-button class="rebuy-btn" size="mini" v-if="order.order_operate_allowable_vo.allow_service_cancel"> 提醒发货</u-button> -->
<!-- <div class="pay-btn">确认收货</div> -->
<u-button shape="circle" ripple type="warning" size="mini" v-if="order.orderStatus == 'DELIVERED'" @click="onRog(order.sn)">确认收货</u-button>
<!-- 交易完成 未评价 -->
<u-button shape="circle" ripple size="mini" v-if="order.orderStatus == 'COMPLETE'" @click="onComment(order.sn)">评价商品</u-button>
</view>
</view>
</view>
<u-popup class="cancel-popup" v-model="cancelShow" mode="bottom" length="60%">
<view class="header">取消订单</view>
<view class="body">
<view class="title">取消订单后，本单享有的优惠可能会一并取消，是否继续？</view>
<view>
<u-radio-group v-model="reason">
<view class="value">
<view class="radio-view" v-for="(item, index) in cancelList" :key="index">
<u-radio :active-color="lightColor" label-size="25" shape="circle" :name="item.reason" @change="reasonChange">{{ item.reason }}</u-radio>
</view>
</view>
</u-radio-group>
</view>
</view>
<view class="footer">
<u-button size="medium" v-if="reason" shape="circle" @click="submitCancel">提交</u-button>
</view>
</u-popup>
<u-toast ref="uToast" />
<u-modal v-model="rogShow" :show-cancel-button="true" :content="'是否确认收货?'" @confirm="confirmRog"></u-modal>
<!-- 分享 -->
<shares v-if="shareFlage " :thumbnail="orderDetail.orderItems[0].image" :goodsName="orderDetail.orderItems[0].goodsName" @close="shareFlage = false" />
</view>
</template>
<script>
import { getExpress } from "@/api/trade.js";
import { cancelOrder, confirmReceipt, getOrderDetail } from "@/api/order.js";
import h5Copy from "@/js_sdk/h5-copy/h5-copy.js";
import shares from "@/components/m-share/index"; //分享
import { getClearReason } from "@/api/after-sale.js";
export default {
components: {
shares,
},
data() {
return {
lightColor: this.$lightColor,
logiList: "", //物流信息
shareFlage: false, //拼团分享开关
orderStatusList: {
UNPAID: {
title: "未付款",
value: "商品暂未付款",
},
PAID: {
title: "已付款",
value: "买家已付款",
},
UNDELIVERED: {
title: "待发货",
value: "商品等待发货中",
},
DELIVERED: {
title: "已发货",
value: "商品已发货,请您耐心等待",
},
CANCELLED: {
title: "已取消",
value: "订单已取消",
},
COMPLETED: {
title: "已完成",
value: "订单已完成,祝您生活愉快",
},
TAKE: {
title: "带核验",
},
},
order: {},
cancelShow: false, //取消订单
orderSn: "",
orderGoodsList: "", //订单中商品集合
orderDetail: "", //订单详情信息
sn: "",
cancelList: "",
rogShow: false,
reason: "",
};
},
onLoad(options) {
this.loadData(options.sn);
this.loadLogistics(options.sn);
this.sn = options.sn;
},
methods: {
tostore(val) {
uni.navigateTo({
url: "/pages/product/shopPage?id=" + val.storeId,
});
},
// 获取物流信息
loadLogistics(sn) {
getExpress(sn).then((res) => {
this.logiList = res.data.result;
});
},
// 分享当前拼团信息
inviteGroup() {
this.shareFlage = true;
},
// #TODO 这块需要写一下 目前没有拼团的详细信息
ByUserMessage(order) {
uni.navigateTo({
url:
"/pages/cart/payment/shareOrderGoods?sn=" +
order.sn +
"&sku=" +
this.orderGoodsList[0].skuId +
"&goodsId=" +
this.orderGoodsList[0].goodsId,
});
},
loadData(sn) {
uni.showLoading({
title: "加载中",
});
getOrderDetail(sn).then((res) => {
const order = res.data.result;
this.order = order.order;
this.orderGoodsList = order.orderItems;
this.orderDetail = res.data.result;
uni.hideLoading();
});
},
onReceipt(val) {
uni.navigateTo({
url: "/pages/order/invoice/invoiceDetail?id=" + val.id,
});
},
gotoGoodsDetail(sku) {
uni.navigateTo({
url: `/pages/product/goods?id=${sku.id}&goodsId=${sku.goodsId}`,
});
},
onCopy(sn) {
// #ifdef H5
if (sn === null || sn === undefined) {
sn = "";
} else sn = sn + "";
const result = h5Copy(sn);
if (result === false) {
uni.showToast({
title: "不支持",
});
} else {
uni.showToast({
title: "复制成功",
icon: "none",
});
}
// #endif
// #ifndef H5
uni.setClipboardData({
data: sn,
success: function () {
uni.showToast({
title: "复制成功!",
duration: 2000,
icon: "none",
});
},
});
// #endif
},
/**
* 投诉
*/
complaint(sku) {
console.log(sku);
uni.navigateTo({
url:
"/pages/order/complain/complain?sn=" +
this.sn +
"&skuId=" +
sku.skuId,
});
},
//售后按钮
onAfterSales(sn, sku) {
uni.navigateTo({
url: `./afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
JSON.stringify(sku)
)}`,
});
},
// 去支付
toPay(val) {
console.log(val);
val.sn
? uni.navigateTo({
url: "/pages/cart/payment/payOrder?order_sn=" + val.sn,
})
: false;
}, //删除订单
deleteOrder(index) {
uni.showLoading({
title: "请稍后",
});
setTimeout(() => {
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600);
},
//取消订单
onCancel(sn) {
this.orderSn = sn;
uni.showLoading({
title: "加载中",
});
getClearReason().then((res) => {
if (res.data.result.length >= 1) {
this.cancelList = res.data.result;
}
uni.hideLoading();
});
this.cancelShow = true;
},
//取消订单
toCancel(sn) {
uni.navigateTo({
url: "/pages/order/afterSales/applyCancel?sn=" + sn,
});
}, //提交取消订单（未付款）
submitCancel() {
cancelOrder(this.orderSn, { reason: this.reason }).then((res) => {
if (res.data.success) {
uni.showToast({
title: "已取消",
duration: 2000,
icon: "none",
});
this.cancelShow = false;
setTimeout(() => {
uni.reLaunch({
url: "/pages/order/myOrder?status=0",
});
}, 500);
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
this.cancelShow = false;
}
});
},
//确认收货
onRog(sn) {
this.orderSn = sn;
this.rogShow = true;
},
confirmRog() {
confirmReceipt(this.orderSn).then((res) => {
if (res.data.success) {
this.$refs.uToast.show({
title: "已确认收货",
type: "success",
});
this.rogShow = false;
this.loadData(options.sn);
}
});
},
//评价商品
onComment(sn) {
uni.navigateTo({
url: "./evaluate/myEvaluate",
});
}, //查看物流
onLogistics(order) {
uni.navigateTo({
url:
"/pages/mine/msgTips/packageMsg/logisticsDetail?logi_id=" +
order.logi_id +
"&ship_no=" +
order.ship_no +
"&order_sn=" +
order.sn,
});
},
//选择取消原因
reasonChange(reason) {
this.reason = reason;
},
reBuy(order) {
uni.navigateTo({
url:
"/pages/product/goods?id=" + order.id + "&goodsId=" + order.goodsId,
});
},
},
};
</script>
<style lang="scss">
@import "./goods.scss";
.empty {
width: 100%;
}
.customer-service {
background: #ededed;
// padding: 12rpx 40rpx;
width: 48%;
margin: 0 1%;
height: 55rpx;
line-height: 55rpx;
margin-bottom: 10rpx;
text-align: center;
font-size: 24rpx;
border-radius: 10rpx;
}
.customer-list {
display: flex;
flex-wrap: wrap;
}
.logi-view {
justify-content: space-between;
padding: 30rpx !important;
margin: 0 !important;
transform: translateY(-10px);
}
.order-status {
color: #fff;
width: 100%;
text-align: center;
font-size: 36rpx;
margin-top: 40rpx;
> div {
font-size: 24rpx;
margin-top: 10rpx;
}
}
.logi-List-title {
margin-bottom: 10rpx;
font-size: 26rpx;
}
.logi-List-time {
font-size: 24rpx;
color: #999;
}
.info-detail {
margin-right: 30rpx;
color: #333;
}
.order-view {
margin: 0 !important;
border-radius: 0 !important;
width: 100%;
height: 200rpx;
padding: 0 !important;
background-image: linear-gradient(
to right,
$light-color 0%,
$aider-light-color 100%
) !important;
}
page,
.content {
background: #f1f1f1;
height: 100%;
}
.info-line {
align-items: center;
display: flex;
border-radius: 30rpx;
flex-direction: row;
justify-content: space-between;
background-color: #fff;
width: 100%;
height: 110rpx;
color: #333333;
font-size: 28rpx;
border-bottom: 1rpx solid #eeeeee;
.info-title {
margin: 0 30rpx;
padding: 16rpx 0rpx;
}
}
.seller-view {
margin: 20rpx 0;
padding: 15rpx 0;
border-radius: 30rpx;
}
.address-title {
font-size: 26rpx;
font-weight: bold;
> span {
margin-right: 20rpx;
}
}
.info-view {
display: flex;
margin: 0 0 20rpx 0;
border-radius: 30rpx;
flex-direction: row;
padding: 15rpx 30rpx;
margin-bottom: 20rpx;
background-color: #fff;
.address-view {
display: flex;
flex-direction: row;
padding: 16rpx 0;
.address {
color: $font-color-light;
overflow: hidden;
line-height: 1.75;
font-size: 22rpx;
}
}
.order-info-view {
line-height: 60rpx;
display: flex;
flex-direction: row;
width: 100%;
margin: 10rpx 0rpx;
.title {
color: #666;
width: 140rpx;
font-size: 24rpx;
font-weight: 600;
}
.value {
color: #666;
font-size: 24rpx;
}
.copy {
font-size: 20rpx;
color: #333;
border: 1px solid #dddddd;
margin-left: 30rpx;
}
}
.invoice-info-view {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin: 10rpx 0rpx;
.ltitle {
width: 550rpx;
font-size: 28rpx;
color: #333333;
}
.value {
color: $font-color-light;
}
}
}
.bottom_view {
width: 100%;
height: 100rpx;
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
.btn-view {
padding: 0 30rpx;
line-height: 100rpx;
font-size: 26rpx;
.description {
color: #909399;
size: 25rpx;
.price {
color: $main-color;
}
}
}
.cancel-btn {
color: #999999;
border-color: #999999;
margin-left: 15rpx;
height: 60rpx;
}
}
.cancel-popup {
.header {
display: flex;
flex-direction: row;
justify-content: center;
margin: 15rpx 0rpx;
}
.body {
padding: 30rpx;
.title {
font-weight: 600;
}
.value {
display: flex;
flex-direction: column;
.radio-view {
margin: 10rpx 0rpx;
}
}
}
.footer {
text-align: center;
}
}
</style>

48
pages/passport/article.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<!-- 此文件路径禁止移动 -->
<view>
<view class="container ">
<view class="u-skeleton" v-if="!articleData">
<u-empty text="文章暂无内容" mode="list"></u-empty>
</view>
<!-- <h3>{{routers.title}}</h3> -->
<u-parse v-else :html="articleData"></u-parse>
</view>
</view>
</template>
<script>
import { getArticleDetail } from "@/api/article.js";
export default {
data() {
return {
loading: true,
routers: "",
articleData: "",
};
},
onLoad(val) {
this.routers = val;
console.log(val);
getArticleDetail(val.id).then((res) => {
if (res.data.result) {
this.articleData = res.data.result.content;
}
uni.setNavigationBarTitle({
title: val.title,
});
});
},
};
</script>
<style lang="scss" scoped>
page {
background: #fff;
}
.container {
padding: 32rpx;
> p {
margin: 20rpx;
}
}
</style>

239
pages/passport/codeLogin.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<div class="form">
<u-form :model="codeForm" ref="validateCodeForm">
<u-form-item class="cell" label-width="120" label="手机号" prop="mobile">
<u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
</u-form-item>
<u-form-item class="cell code" label-width="120" prop="code" label="验证码">
<div style="display:flex; with:100%;">
<u-input v-model="codeForm.code" placeholder="请输入验证码" />
<u-verification-code keep-running unique-key="page-login" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
<view @tap="getCode" class="text-tips">{{ tips }}</view>
</div>
</u-form-item>
<view class="submit" @click="submit">登录</view>
<view class="text-tips cell" @click="clickLogin">一键登录</view>
<myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
</u-form>
</div>
</template>
<script>
import { sendMobile, smsLogin } from "@/api/login";
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
import myVerification from "@/components/verification/verification.vue";
import uuid from "@/utils/uuid.modified.js";
export default {
components: {
myVerification,
},
props: ["status"],
data() {
return {
uuid,
flage: false, //是否验证码验证
codeFlag: true,
// 验证码登录form
codeForm: {
mobile: "",
code: "",
},
tips: "",
clientType: "",
seconds: 60,
// 验证码登录校验
codeRules: {
mobile: [
{
validator: (rule, value, callback) => {
return this.$u.test.mobile(value);
},
message: "手机号码不正确",
trigger: ["blur"],
},
],
code: [
{
min: 4,
max: 6,
required: true,
message: "请输入验证码",
trigger: ["blur"],
},
],
},
};
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
mounted() {
this.$refs.validateCodeForm.setRules(this.codeRules);
//#ifdef H5
this.clientType = "H5";
//#endif
//#ifdef APP-PLUS
this.clientType = "APP";
//#endif
},
watch: {
flage(val) {
if (val) {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: "正在获取验证码",
});
sendMobile(this.codeForm.mobile).then((res) => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
if (res.data.success) {
this.$refs.uCode.start();
} else {
uni.showToast({
title: res.data.message,
duration: 2000,
icon: "none",
});
}
});
} else {
this.$u.toast("请倒计时结束后再发送");
}
}
},
},
methods: {
// 验证码验证
verification(val) {
this.flage = val == this.$store.state.verificationKey ? true : false;
},
// 登录
submit() {
if (!this.status) {
uni.showToast({
title: "请您阅读并同意用户协议以及隐私政策",
duration: 2000,
icon: "none",
});
return false;
}
let _this = this;
this.$refs.validateCodeForm.validate((valid) => {
if (valid) {
storage.setHasLogin(false);
storage.setAccessToken("");
storage.setRefreshToken("");
storage.setUuid(this.uuid.v1());
storage.setUserInfo({});
smsLogin(this.codeForm, _this.clientType).then((res) => {
if (res.data.success) {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
getUserInfo().then((user) => {
if (user.data.success) {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
if (getCurrentPages().length > 1) {
if (
(getCurrentPages().length - 2).route ==
"pages/passport/login"
) {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
} else {
if (
!(getCurrentPages().length - 2).route ||
(getCurrentPages().length - 2).route == "undefined"
) {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
} else {
uni.navigateBack({
delta: getCurrentPages().length - 2,
});
}
}
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
});
}
});
}
});
},
clickLogin() {
this.$emit("open", "click");
},
codeChange(text) {
console.log(text);
this.tips = text;
},
end() {},
/**获取验证码 */
getCode() {
if (this.tips == "重新获取") {
this.codeFlag = true;
uni.showLoading({
title: "加载中",
});
setTimeout(() => {
this.$refs.verification.hide();
uni.hideLoading();
}, 2000);
}
if (!this.$u.test.mobile(this.codeForm.mobile)) {
uni.showToast({
title: "请输入正确手机号",
icon: "none",
});
return false;
}
if (!this.flage) {
this.$refs.verification.hide();
return false;
}
},
start() {
this.$u.toast("验证码已发送");
this.flage = false;
this.codeFlag = false;
this.$refs.verification.hide();
},
},
};
</script>
<style lang="scss" scoped>
@import url("./login.scss");
// #ifdef MP-WEIXIN
@import url("./mp-codeLogin.scss");
// #endif
</style>

73
pages/passport/login.scss Normal file
View File

@@ -0,0 +1,73 @@
.sub-title {
font-size: 24rpx;
color: #999;
}
.cell {
margin: 40rpx 0;
}
.login-ball {
background-image: linear-gradient(25deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
border-bottom-left-radius: 300rpx;
height: 400rpx;
position: relative;
}
/deep/ .u-form-item--right__content__slot {
width: 100%;
display: block;
}
.title {
font-size: 48rpx;
color: #000;
text-align: center;
}
.privacy {
font-size: 24upx;
color: #999;
text-align: center;
position: absolute;
width: 100%;
display: flex;
justify-content: center;
bottom: 50rpx;
}
span {
color: $aider-light-color;
}
.form {
padding: 0 72rpx;
}
.divider {
margin: 30rpx 0 !important;
}
.submit {
height: 80rpx;
line-height: 80rpx;
background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
color: #fff;
text-align: center;
font-size: 30rpx;
border-radius: 100px;
}
.logo {
width: 200rpx;
height: 200rpx;
text-align: center;
transform: scale(2.5);
}
.logo-cell {
text-align: center;
}
.text-tips {
text-align: center;
color: #ff9f28;
}
.tips {
position: absolute;
bottom: 10rpx;
width: 100%;
text-align: center;
}

132
pages/passport/login.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<view v-if="mpWechatLogin">
<!-- 背景 -->
<view class="login-ball small"></view>
<view class="logo-cell">
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
</view>
<view class="title">LiLi商城</view>
<!-- 验证码登录 -->
<codeLogin @open="open" :status="value" v-if="login && loginData.code" />
<!-- 账号密码登录 -->
<onClickLogin @open="open" :status="value" v-if="login && loginData.click" />
<view class="form"> </view>
<!-- 隐私政策 -->
<div class="privacy">
<u-checkbox-group :icon-size="24" width="45rpx">
<u-checkbox v-model="value" active-color="rgb(255, 107, 53)"></u-checkbox>
</u-checkbox-group>
同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
</div>
</view>
</template>
<script>
import codeLogin from "./codeLogin";
import onClickLogin from "./onClickLogin";
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
import { loginCallback } from "@/api/connect.js";
import { webConnect } from "@/api/connect.js";
export default {
onShow() {
// #ifdef MP-WEIXIN
this.mpWechatLogin = false;
if (this.$options.filters.isLogin("auth")) {
getCurrentPages().length > 1
? uni.navigateBack({
delta: getCurrentPages().length - 2,
})
: uni.switchTab({
url: "/pages/tabbar/home/index",
});
} else {
uni.navigateTo({
url: "/pages/passport/wechatMPLogin",
});
}
// #endif
//#ifdef H5
let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
if (isWXBrowser) {
webConnect("WECHAT").then((res) => {
let data = res.data;
if (data.success) {
window.location = data.result;
}
});
}
//#endif
},
data() {
return {
mpWechatLogin: true, //是否加载微信登录
value: true, //隐私政策
loginData: {
code: true, //验证码登录
click: false,
},
login: true, //登录
};
},
watch: {},
components: {
codeLogin,
onClickLogin,
},
onLoad(options) {
if (options && options.state) {
this.stateLogin(options.state);
}
},
methods: {
handleClick(val) {
uni.navigateTo({
url: "/pages/mine/help/tips?type=" + val,
});
},
// open 开启另一个模板
open(val) {
Object.keys(this.loginData).forEach((item) => {
this.$set(this.loginData, item, false);
});
this.$set(this.loginData, val, true);
},
//联合信息返回登录
stateLogin(state) {
loginCallback(state).then((res) => {
console.log(data);
let data = res.data;
if (data.success) {
storage.setAccessToken(data.result.accessToken);
storage.setRefreshToken(data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
});
getCurrentPages().length > 1
? uni.navigateBack({
delta: getCurrentPages().length - 2,
})
: uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import url("./login.scss");
</style>

9
pages/passport/mp-codeLogin.scss Normal file
View File

@@ -0,0 +1,9 @@
.verification {
}
/deep/ .u-form-item {
margin: 40rpx 0 !important;
padding: 40rpx 0 !important;
}
.submit {
margin-top: 40rpx;
}

278
pages/passport/onClickLogin.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<div class="form">
<u-form ref="validateCodeForm">
<div class="login-list">
<div class="login-item" v-for="(item,index) in loginList" :key="index">
<u-icon :color="item.color" size="80" :name="item.icon" @click="toLogin(item)"></u-icon>
<div>{{item.title}}</div>
</div>
</div>
<view class="text-tips cell" @click="clickCodeLogin">账号密码登录</view>
</u-form>
</div>
</template>
<script>
import { webConnect, openIdLogin } from "@/api/connect.js";
import { getUserInfo } from "@/api/members";
import storage from "@/utils/storage.js";
export default {
data() {
return {
loginList: [
{
icon: "weixin-circle-fill",
color: "#00a327",
title: "微信",
code: "WECHAT",
},
{
icon: "qq-circle-fill",
color: "#38ace9",
title: "QQ",
code: "QQ",
},
{
icon: "apple-fill",
color: "#000000",
title: "Apple",
code: "APPLE",
},
],
tips: "",
};
},
props: ["status"],
mounted() {
//#ifdef APP-PLUS
//如果是app 加载支持的登录方式
let _this = this;
uni.getProvider({
service: "oauth",
success: (result) => {
_this.loginList = result.provider.map((value) => {
//展示title
let title = "";
//系统code
let code = "";
//颜色
let color = "#8b8b8b";
//图标
let icon = "";
//uni 联合登录 code
let appcode = "";
switch (value) {
case "weixin":
icon = "weixin-circle-fill";
color = "#00a327";
title = "微信";
code = "WECHAT";
break;
case "qq":
icon = "qq-circle-fill";
color = "#38ace9";
title = "QQ";
code = "QQ";
break;
case "apple":
icon = "apple-fill";
color = "#000000";
title = "Apple";
code = "APPLE";
break;
}
return {
title: title,
code: code,
color: color,
icon: icon,
appcode: value,
};
});
},
fail: (error) => {
console.log("获取登录通道失败", error);
},
});
//#endif
//特殊平台，登录方式需要过滤
// #ifdef H5
this.methodFilter(["QQ"]);
// #endif
//微信小程序，只支持微信登录
// #ifdef MP-WEIXIN
this.methodFilter(["WECHAT"]);
// #endif
},
methods: {
methodFilter(code) {
let way = [];
this.loginList.forEach((item) => {
code.length != 0
? code.forEach((val) => {
if (item.code == val) {
way.push(item);
}
})
: console.error("error");
});
this.loginList = way;
},
toLogin(connectLogin) {
if (!this.status) {
uni.showToast({
title: "请您阅读并同意用户协议以及隐私政策",
duration: 2000,
icon: "none",
});
return false;
}
// #ifdef H5
let code = connectLogin.code;
webConnect(code).then((res) => {
let data = res.data;
if (data.success) {
window.location = data.result;
}
});
// #endif
// #ifdef APP-PLUS
this.nonH5OpenId(connectLogin);
// #endif
},
clickCodeLogin() {
this.$emit("open", "code");
},
//非h5 获取openid
async nonH5OpenId(item) {
let _this = this;
//获取各个openid
await uni.login({
provider: item.appcode,
// #ifdef MP-ALIPAY
scopes: "auth_user", //支付宝小程序需设置授权类型
// #endif
success: function (res) {
uni.setStorageSync("type", item.code);
//微信小程序意外的其它方式直接在storage中写入openid
// #ifndef MP-WEIXIN
uni.setStorageSync("openid", res.authResult.openid);
// #endif
},
fail(e) {
console.log(e);
uni.showToast({
title: "第三方登录暂不可用！",
icon: "none",
duration: 3000,
});
},
complete(e) {
//获取用户信息
uni.getUserInfo({
provider: item.appcode,
success: function (infoRes) {
//写入用户信息
uni.setStorageSync("nickname", infoRes.userInfo.nickName);
uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
// #ifdef MP-WEIXIN
//微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
_this.weixinMPOpenID(res).then((res) => {
//这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
_this.goOpenidLogin("WECHAT_MP");
});
// #endif
// #ifndef MP-WEIXIN
_this.goOpenidLogin("APP");
//#endif
},
});
},
});
},
//openid 登录
goOpenidLogin(clientType) {
let _this = this;
// 获取准备好的参数，进行登录系统
let params = {
uuid: uni.getStorageSync("openid"), //联合登陆id
source: uni.getStorageSync("type"), //联合登陆类型
nickname: uni.getStorageSync("nickname"), // 昵称
avatar: uni.getStorageSync("avatar"), // 头像
uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
};
openIdLogin(params, clientType).then((res) => {
if (!res.data.success) {
let errormessage = "第三方登录暂不可用";
uni.showToast({
// title: '未绑定第三方账号',
title: errormessage,
icon: "none",
duration: 3000,
});
return;
} else {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "第三方登录成功!",
icon: "none",
});
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
});
getCurrentPages().length > 1
? uni.navigateBack({
delta: getCurrentPages().length - 2,
})
: uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
});
},
//微信小程序获取openid
async weixinMPOpenID(res) {
let openId = "";
await miniProgramLogin(res.code).then((res) => {
uni.setStorageSync("openid", res.data);
});
},
},
};
</script>
<style lang="scss" scoped>
@import url("./login.scss");
.submit {
margin: 80rpx 0 40rpx 0;
}
.login-list {
display: flex;
padding: 40rpx 0;
justify-content: space-between;
.login-item {
font-size: 24rpx;
text-align: center;
> * {
margin: 4rpx 0;
}
}
}
</style>

0
pages/passport/register.vue Normal file
View File

185
pages/passport/restPassword.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<view class="container">
<view class="wrapper">
<view class="input-content">
<view class="input-item" v-if="step === 0">
<view class="input-item-title">
<image src="/static/login/user.png"></image>
</view>
<input type="text" v-model="form.account" placeholder="请输入账户名" placeholder-class="input-empty" maxlength="11"
/>
</view>
<view class="input-item" v-if="step === 0">
<view class="input-item-title">
<image class="img-code-icon" src="/static/login/code.png"></image>
</view>
<input v-model="form.img_code" placeholder="请输入图片验证码" placeholder-class="input-empty" maxlength="4"
@confirm="toLogin" />
<image :src="validate_url" class="img_code" mode="" @click="getValidImgUrl"></image>
</view>
<view class="input-item" v-if="step === 1">
<view class="input-item-title">
<image src="/static/login/user.png"></image>
<view class="phone-number">+86</view>
<image class="vertical" src="/static/vertical-line.svg"></image>
</view>
<input type="mobile" v-model="form.mobile" disabled="true" placeholder="请输入手机号码" placeholder-class="input-empty" maxlength="11"
/>
</view>
<view class="input-item" v-if="step === 1">
<view class="input-item-title">
<image class="img-code-icon" src="/static/login/code.png"></image>
</view>
<input v-model="form.img_code_phone" placeholder="请输入图片验证码" placeholder-class="input-empty"
maxlength="4" @confirm="toLogin" />
<image :src="validate_url" class="img_code" mode="" @click="getValidImgUrl"></image>
</view>
<view class="input-item" v-if="step === 1">
<view class="input-item-title">
<image src="/static/login/pwd2.png"></image>
</view>
<input v-model="form.sms_code" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="4"
@confirm="toLogin" />
<view class="get-captcha" @click="handleGetCapcha">{{ sendTime === 0 ? '获取验证码' : sendTime + 's后重新获取' }}</view>
</view>
<view class="input-item" v-if="step === 2">
<view class="input-item-title">
<image src="/static/login/pwd2.png"></image>
</view>
<input type="password" v-model="form.password" placeholder="请输入新密码" placeholder-class="input-empty" maxlength="20"
@confirm="toLogin" />
</view>
<view class="input-item" v-if="step === 2">
<view class="input-item-title">
<image src="/static/login/pwd2.png"></image>
</view>
<input type="password" v-model="form.rep_password" placeholder="请再次输入密码" placeholder-class="input-empty" maxlength="20"
@confirm="toLogin" />
</view>
<button class="confirm-btn" @click="toNext">{{ step === 0 ? '验证账号' : (step==1?'下一步':'确定') }}</button>
</view>
</view>
</view>
</template>
<script>
import {
validAccount,
sendFindPasswordSms,
validFindPasswordSms,
changePassword
} from '@/api/passport.js';
import {
getValidateCodeUrl
} from '@/api/common.js';
import * as RegExp from '@/utils/RegExp.js';
export default {
data() {
return {
validate_url: '',
sendTime: 0,
form: {},
step: 0,
}
},
onLoad() {
this.$nextTick(this.getValidImgUrl)
},
methods: {
handleGetCapcha() {
if (this.sendTime == 0) {
sendFindPasswordSms(this.form.uuid,this.form.img_code_phone).then(res => { //发送验证码
if (res.statusCode == 200) {
this.sendTime = 60;
let timer = setInterval(() => {
this.sendTime--;
if (this.sendTime === 0) {
clearInterval(timer);
}
}, 1000);
}
})
}
},
getValidImgUrl() { //获取图片验证码
const uuid = this.step === 0 ? '' : this.form.uuid
this.validate_url = getValidateCodeUrl('FIND_PASSWORD',uuid)
},
toNext() {
// TODO 验证
if (this.step === 0) {
const { account,img_code } = this.form
validAccount(img_code, account).then(res=>{
if(res.statusCode==200){
this.step = 1
this.form.mobile = res.data.mobile
this.form.uname = res.data.uname
this.form.uuid = res.data.uuid
console.log(this.form)
this.getValidImgUrl()
}
});
} else if (this.step == 1) {
const { uuid, sms_code } = this.form
validFindPasswordSms(uuid,sms_code).then((res) => {
if(res.statusCode==200){
this.step = 2;
this.sendTime = 0;
this.getValidImgUrl()
}
})
}else{
const { password,uuid,rep_password } = this.form
if(!password){
this.$api.msg('请输入密码')
return;
}
if(!RegExp.password.test(password)){
this.$api.msg('密码应为6-20位英文或数字！')
return ;
}
if(password!=rep_password){
this.$api.msg('两次输入密码不一致')
return;
}
changePassword(password,uuid).then(res=>{
if(res.statusCode==200){
this.$api.msg('修改密码成功！')
setTimeout(function() {
uni.reLaunch({
url:"/pages/passport/login"
})
}, 500);
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
@import './login.scss';
.container {
padding-top: 0;
.img_code {
width: 140rpx;
height: 48rpx;
margin-right: 20rpx;
}
.img-code-icon {
width: 44rpx;
height: 35rpx;
}
.input-content {
margin-top: 300rpx;
}
}
</style>

BIN
pages/passport/static/logo-title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

224
pages/passport/wechatMPLogin.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<view class="container">
<u-modal v-model="showWxAuth" :title="projectName+'商城'" :show-confirm-button="false">
<div class="tips">
为了更好地用户体验，需要您授权手机号
</div>
<button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
去授权
</button>
</u-modal>
<view class="wx-auth-container">
<div class="box">
<view class="logo-info">
<text class="title">欢迎进入{{ projectName }}商城</text>
</view>
<view class="small-tips">
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
<view>您的公开信息（昵称、头像等）</view>
</view>
<view class="btns">
<button type="primary" open-type="getUserInfo" class="btn-auth"
@getuserinfo="hidenWxAuth()">确认微信授权</button>
</view>
</div>
</view>
</view>
</template>
<script>
import {
mpAutoLogin
} from "@/api/connect.js";
import {
getUserInfo
} from "@/api/members";
import storage from "@/utils/storage.js";
export default {
data() {
return {
show: true,
// 默认不显示
showWxAuth: false,
// 授权信息展示，商城名称
projectName: "LiLi",
//微信返回信息，用于揭秘信息，获取sessionkey
code: '',
//微信昵称
nickName: '',
//微信头像
image: '',
};
},
components: {},
props: {},
methods: {
hidenWxAuth() {
this.showWxAuth = true;
let that = this;
//------执行Login---------
uni.login({
success: (res) => {
that.code = res.code;
uni.getUserInfo({
provider: "weixin",
success: function(infoRes) {
that.nickName = infoRes.userInfo.nickName;
that.image = infoRes.userInfo.avatarUrl;
},
});
},
});
},
getPhoneNumber(e) {
let iv = e.detail.iv;
let encryptedData = e.detail.encryptedData;
if (!e.detail.encryptedData) {
uni.showToast({
title: "请授予手机号码获取权限！",
icon: "none",
});
return;
}
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
iv,
code,
image,
nickName,
}).then((res) => {
storage.setAccessToken(res.data.result.accessToken);
storage.setRefreshToken(res.data.result.refreshToken);
// 登录成功
uni.showToast({
title: "登录成功!",
icon: "none",
});
//获取用户信息
getUserInfo().then((user) => {
storage.setUserInfo(user.data.result);
storage.setHasLogin(true);
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 500);
});
});
},
},
};
</script>
<style>
/*微信授权*/
page {
background-color: #ffffff;
}
.wx-auth-container {
width: 100%;
margin-top: 20%;
}
.logo-info {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
padding: 20rpx;
flex-direction: column;
font-weight: bold;
}
image {
width: 100px;
height: 100px;
text-align: center;
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
.logo-info-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: none;
}
text.title,
text.shop {
display: inline-block;
font-size: 60rpx;
color: #333;
}
text.shop {
display: inline-block;
font-size: 55rpx;
color: #333;
}
.box {
margin: 0 32rpx;
}
/* 文字提示*/
.small-tips {
width: 94%;
padding: 20rpx;
font-size: 24rpx;
margin: 0 0 20rpx;
color: #999;
}
.auth-button {
padding: 10px 20px;
width: calc(100% - 20 * 4rpx);
}
.tips {
width: 80%;
text-align: left;
margin: 6% 10%;
margin-top: 48rpx;
line-height: 1.75;
}
.register {
color: #00a327 !important;
border: none !important;
background: #fff !important;
}
.btn {
width: 100%;
text-align: center;
}
.btn-auth {
width: 92%;
margin: 0 auto 100rpx;
border-radius: 100px;
}
.btns {
margin-top: 100rpx;
display: flex;
width: 100%;
justify-content: center;
}
</style>

135
pages/product/askList.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<div class="wrapper">
<div v-if="!askGoods.goods_id" class="noMore">
暂无信息
</div>
<div class="askBox" v-else>
<u-row :gutter="24">
<u-col span="2" @click="goodsDetail()">
<image class="img" :src="queryGoodsDetail.thumbnail"></image>
</u-col>
<u-col span="8" @click="goodsDetail()">
<h5 style="padding-left:10rpx;">{{queryGoodsDetail.goodsName}}</h5>
</u-col>
</u-row>
<u-row>
<u-col span="12">
<u-input v-model="params.askValue" height="200" type="textarea" :border="border" />
</u-col>
<u-radio-group v-model="params.anonymous" @change="radioGroupChange">
<u-radio @change="radioChange">
匿名提交
</u-radio>
</u-radio-group>
<u-col span="12">
<u-row :gutter="12">
<u-col :offset="1" span="4">
<u-button class="btns" @click="askValue=''">清空</u-button>
</u-col>
<u-col :offset="2" span="4">
<u-button class="btns" @click="getAskMessage()" type="success">提交</u-button>
</u-col>
</u-row>
</u-col>
</u-row>
</div>
</div>
</template>
<script>
import * as API_GOODS from "../../api/goods";
import * as API_MEM from "../../api/members";
export default {
data() {
return {
askGoods: "",
queryGoodsDetail: "",
border: true,
params: {
askValue: "",
anonymous: "YES",
},
};
},
onLoad(options) {
this.askGoods = options;
this.getGoodsData();
},
methods: {
getGoodsData() {
if (this.askGoods.goods_id) {
API_GOODS.getGoods(this.askGoods.goods_id).then((result) => {
this.queryGoodsDetail = result.data;
});
}
},
getAskMessage() {
uni.showLoading();
if (this.params.askValue == "") {
uni.showToast({
title: "请填写内容!",
icon: "none",
});
uni.hideLoading();
return false;
}
API_MEM.consultating(
this.askGoods.goods_id,
this.params.askValue,
this.params.anonymous
)
.then((res) => {
if (res.statusCode == 200) {
uni.showToast({
title: "提交成功!",
icon: "none",
});
this.askValue = "";
}
uni.hideLoading();
})
.catch((err) => {
console.log(err);
uni.hideLoading();
});
},
radioGroupChange(e) {
console.log(e);
},
radioChange(e) {
if (this.anonymous == "YES") {
this.anonymous = "NO";
} else {
this.anonymous = "YES";
}
console.log(e);
},
},
};
</script>
<style scoped lang="scss">
.img {
max-width: 100%;
height: 100rpx;
}
.noMore {
text-align: center;
margin: 40rpx 0;
}
.askBox {
padding: 32rpx;
}
/deep/ .u-col {
text-align: center;
padding: 16rpx 0 !important;
}
.wrapper {
background: #fff;
padding: 32rpx 0;
}
</style>

571
pages/product/comment.vue Normal file
View File

@@ -0,0 +1,571 @@
<template>
<view class="comment">
<!-- <view class="status_bar" -->
<!--</view> -->
<view class="top-tab">
<!-- <view class="good-comment">商品好评率{{ grade || "100" }}%</view> -->
<view class="tab-btn" :v-if="commentDetail">
<!-- <view v-for="item in selectObj" :key="item.id" @click="select(item.id)" :class="{cur:selectIndex===item.id}">{{item.text}}</view> -->
<view @click="select(0)" :class="{ cur: selectIndex == 0 }">全部</view>
<view @click="select(1)" :class="{ cur: selectIndex == 1 }">好评{{ commentDetail.good }}</view>
<view @click="select(2)" :class="{ cur: selectIndex == 2 }">中评{{ commentDetail.moderate }}</view>
<view @click="select(3)" :class="{ cur: selectIndex == 3 }">差评{{ commentDetail.worse }}</view>
<view @click="select(4)" :class="{ cur: selectIndex == 4 }">有图{{ commentDetail.haveImage }}</view>
</view>
</view>
<!-- 评价 -->
<div class="goodsBoxOver">
<scroll-view :style="{ height: DivHeight }" lower-threshold="150" @scrolltolower="loadmore()" scroll-anchoring enableBackToTop="true" scroll-y class="scoll-page">
<view class="eva-section">
<div class="nodata" v-if="commDetail.length < 1">
<view>
<image style="height: 240rpx; width: 320rpx" src="/static/nodata.png" alt="" />
</view>
<view>
<p>暂无评价</p>
</view>
</div>
<view class="eva-box" v-for="(item, index) in commDetail" :key="index">
<view class="section-info">
<image class="portrait" :src="item.memberProfile || '/static/missing-face.png'" mode="aspectFill"></image>
<view class="star-con">
<text class="name">{{ item.memberName | noPassByName }}</text>
<text class="time">{{ item.createTime }}</text>
</view>
<view class="stars">
<text :class="{ star: item.deliveryScore > 0 }"></text>
<text :class="{ star: item.deliveryScore > 1 }"></text>
<text :class="{ star: item.deliveryScore > 2 }"></text>
<text :class="{ star: item.deliveryScore > 3 }"></text>
<text :class="{ star: item.deliveryScore > 4 }"></text>
</view>
</view>
<view class="section-contant">
<div class="con">{{ item.content }}</div>
<view class="img">
<u-image width="140rpx" height="140rpx" v-if="item.image" v-for="(img, i) in splitImg(item.image)" :src="img" :key="i" @click="preview(splitImg(item.image), i)">
</u-image>
</view>
<view class="bot">
<text class="attr">{{ item.goodsName }} - {{ gradeList[item.grade] }}</text>
<!-- <text class="zan" :class="{cur:item.isZan}" @click="dianzan(index)">{{item.zan}}</text> -->
</view>
</view>
<view class="addComment commentStyle" v-if="item.additional_comment">
<div>
<b>追加评价:</b>
<span class="addCommentSpan">{{
item.additional_comment.content
}}</span>
<view class="img">
<image v-for="(item, addIndex) in item.additional_comment.images" :src="item" :key="addIndex" @click="preview(item)"></image>
</view>
</div>
</view>
<view class="commentStyle" v-if="item.reply">
商家回复：
<span class="addCommentSpan">{{ item.reply }}</span>
<view class="img">
<u-image width="140rpx" height="140rpx" v-if="item.replyImage" v-for="(replyImg, replyIndex) in splitImg(replyImg.image)" :src="replyImg" :key="replyIndex"
@click="preview(splitImg( item.replyImage), index)">
</u-image>
</view>
</view>
<view class="commentStyle" v-if="item.additional_comment && item.additional_comment.reply">
商家回复:
<span class="addCommentSpan">{{
item.additional_comment.reply.content
}}</span>
</view>
</view>
</view>
<!-- <u-loadmore :status="status" @loadmore="loadmore()" icon-type="iconType" /> -->
</scroll-view>
</div>
</view>
</template>
<script>
// import { getGoodsDetail } from '@/api/goods.js';
import * as membersApi from "@/api/members.js";
export default {
data() {
return {
header: {
top: 0,
height: 50,
},
DivHeight: "",
status: "loadmore",
commentObj: {},
selectObj: [],
commentDetail: "",
selectIndex: "0", //检索条件
imgUrl: "",
previewImgFlag: false,
// 评论分页提交数据
params: {
pageNumber: 1,
pageSize: 10,
grade: "",
},
gradeList: {
GOOD: "好评",
MODERATE: "中评",
WORSE: "差评",
HAVEIMAGE: "有图",
},
// 评论详情
commDetail: [],
dataTotal: 0,
opid: "",
grade: "100%",
};
},
async onLoad(options) {
this.grade = options.grade;
this.getGoodsCommentsFun(options.id);
this.getGoodsCommentsNum(options.id);
this.opid = options.id;
},
mounted() {},
methods: {
splitImg(val) {
if (val && val.split(",")) {
return val.split(",");
} else if (val) {
return val;
} else {
return false;
}
},
loadmore() {
this.params.pageNumber++;
this.getGoodsCommentsFun(this.opid);
},
// 获取商品评论
getGoodsCommentsFun(id) {
this.status = "loading";
// getGoodsComments
membersApi.getGoodsComments(id, this.params).then((res) => {
if (
res.data.result.records == [] ||
res.data.result.records == "" ||
res.data.result.records == null
) {
this.status = "noMore";
return false;
}
this.commDetail = this.commDetail.concat(res.data.result.records);
console.log(this.commDetail);
this.dataTotal = res.data.result.total;
this.status = "loadmore";
});
},
getGoodsCommentsNum(id) {
membersApi.getGoodsCommentsCount(id).then((res) => {
if (res.statusCode === 200) {
this.commentDetail = res.data.result;
}
});
},
select(index) {
//顶部筛选条件
this.selectIndex = index;
console.log(this.selectIndex);
this.params.grade = ["", "GOOD", "MODERATE", "WORSE", ""][
this.selectIndex
];
this.selectIndex == 4 ? (this.params.haveImage = 1) : true;
this.params.pageNumber = 1;
this.params.pageSize = 10;
this.commDetail = [];
if (this.selectIndex == 0) {
this.params = {
pageNumber: 1,
pageSize: 10,
grade: "",
};
}
this.getGoodsCommentsFun(this.opid);
},
// 返回
back() {
uni.navigateTo({
url: "./product?id=" + this.opid,
});
},
// 点赞
dianzan(index) {
if (this.commentObj.item[index].isZan) {
this.commentObj.item[index].zan--;
} else {
this.commentObj.item[index].zan++;
}
this.commentObj.item[index].isZan = !this.commentObj.item[index].isZan;
},
// 预览
preview(urls, index) {
console.log(urls);
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {
uni.showToast({
title: "保存成功",
duration: 2000,
icon: "none",
});
},
fail: function (err) {
uni.showToast({
title: "保存失败",
duration: 2000,
icon: "none",
});
},
},
});
},
close() {
this.previewImgFlag = false;
this.imgUrl = "";
},
},
};
</script>
<style lang="scss" scoped>
.commentStyle {
margin-top: 16rpx;
padding: 14rpx 26rpx;
background: #f5f5f5;
border-radius: 6px;
font-size: 22rpx;
font-weight: 700;
text-align: left;
line-height: 40rpx;
}
.addCommentSpan {
color: $u-tips-color !important;
padding-left: 20rpx;
}
.img {
display: flex;
flex-wrap: wrap;
/* height: 140rpx; */
overflow: hidden;
image {
width: 166rpx;
height: 166rpx;
margin: 0 15rpx 15rpx 0;
&:nth-of-type(3n + 0) {
margin: 0 0 15rpx 0;
}
}
}
.goodsBoxOver {
overflow-y: scroll;
}
.headerBox {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
font-size: 34rpx;
.left,
.right {
position: absolute;
width: max-content;
height: max-content;
top: 0;
bottom: 0;
margin: auto;
}
.left {
float: left;
top: 0;
bottom: 0;
left: 20rpx;
}
.right {
float: right;
right: 20rpx;
}
}
page {
background: #f7f7f7;
}
.preview-img {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* background: rgba(0,0,0,0.5); */
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.5);
background-position: center;
background-size: 90% auto;
z-index: 1000;
.close {
position: absolute;
width: 100rpx;
height: 100rpx;
text-align: center;
line-break: 50rpx;
/* background: rgba(0,0,0,0.5); */
font-size: 80rpx;
color: #fff;
top: 100rpx;
}
image {
/* width: 100%; */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
// .goodsBoxOver{
// height: calc(100vh - 200rpx) ;
// }
.comment {
color: #333;
background: #f7f7f7;
overflow: hidden;
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 999;
display: flex;
justify-content: space-between;
height: 90rpx;
line-height: 90rpx;
font-size: 30rpx;
transition: all 0.5s;
.back {
width: 90rpx;
background: url(/static/search/back.png);
background-size: 100%;
}
.share {
width: 90rpx;
background: url(/static/search/back.png);
background-size: 100%;
}
}
.header-line {
height: 2px;
background: #f2f2f2;
position: fixed;
top: 90rpx;
left: 0;
right: 0;
z-index: 999;
}
.header-line1 {
height: 20rpx;
position: static;
}
.top-tab {
background: #fff;
margin-bottom: 10rpx;
border-radius: 20rpx;
display: flex;
flex-direction: column;
padding: 0 30rpx 0 30rpx;
font-size: 24rpx;
.good-comment {
text-align: right;
color: #a5a5a5;
}
.tab-btn {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
view {
min-width: 118rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
padding: 0 10rpx;
background: #f8f8fe;
border-radius: 25rpx;
margin: 0 20rpx 30rpx 0;
&.cur {
background: $aider-light-color;
color: #fff;
}
}
}
}
.eva-section {
padding: 20rpx 0;
.eva-box {
padding: 40rpx;
margin-bottom: 10rpx;
background: #fff;
border-radius: 20rpx;
/* star */
.star-con {
display: flex;
flex-direction: column;
view {
flex: 1;
display: flex;
align-items: center;
}
.time {
font-size: 24rpx;
color: #999;
}
}
.section-info {
display: flex;
.stars {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.star {
width: 30rpx;
height: 30rpx;
background: url("/static/star.png");
background-size: 100%;
}
}
.portrait {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
border-radius: 100px;
margin-right: 20rpx;
}
}
.section-contant {
display: flex;
flex-direction: column;
.con {
font-size: 24rpx;
line-height: 46rpx;
font-weight: 400;
color: $font-color-dark;
color: #333;
padding: 26rpx 0;
}
.img {
display: flex;
flex-wrap: wrap;
/* height: 140rpx; */
overflow: hidden;
> * {
margin-right: 16rpx;
}
}
.bot {
display: flex;
justify-content: space-between;
font-size: $font-sm;
color: $font-color-light;
margin-top: 20rpx;
.zan {
color: #333;
position: relative;
&:before {
content: "";
width: 40rpx;
height: 40rpx;
background: url(/static/search/delete.png);
background-size: 100%;
position: absolute;
left: -50rpx;
top: -6rpx;
}
&.cur:before {
background: url(/static/global/selected.png);
background-size: 100%;
}
}
}
}
.reply {
padding: 16rpx 30rpx;
background: #f8f8fe;
font-size: 24rpx;
border-radius: 5px;
margin-top: 20rpx;
text {
color: #999;
line-height: 48rpx;
}
}
}
}
}
.nodata {
padding-top: 300rpx;
color: #999999;
text-align: center;
img {
width: 346rpx;
height: 304rpx;
}
}
</style>

774
pages/product/goods.vue Normal file
View File

@@ -0,0 +1,774 @@
<template>
<div class="main-page">
<!-- #ifdef APP-PLUS -->
<view class="status_bar"></view>
<!-- #endif -->
<!-- 仅h5有效 打开App -->
<!-- 分享 -->
<shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId" :link="'/pages/product/goods?id='+this.routerVal.id+'&goodsId='+this.routerVal.goodsId"
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" />
<view class="index">
<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scoll-hide'">
<div class="headerRow">
<div class="backs" @click="back()">
<u-icon name="arrow-left" color="#8e8e8e"></u-icon>
</div>
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'">
<div class="headerRow">
<div style="text-align: center" :span="3" v-for="header in headerList" :key="header.id" :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
{{ header.text }}
</div>
</div>
</div>
<div class="share" @click="shareChange()">
<image class="shareImg" src="/static/share.png" alt=""></image>
</div>
</div>
</u-navbar>
<view class="showBack" v-show="!headerFlag">
<u-row>
<u-col :span="2" @click="back()">
<div class="iconBag" style="text-align: center">
<image class="headerImg" src="/static/bagBack.png" alt=""></image>
</div>
</u-col>
<u-col :span="8"></u-col>
<u-col :span="2" class="share" style="text-align: center" @click="shareChange()">
<image class="headerImg" src="/static/bagShare.png" alt=""></image>
</u-col>
</u-row>
</view>
</view>
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scoll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
<view>
<!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" />
<!-- 促销活动条 -->
<PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />
<view class="card-box top-radius-0" id="main2">
<!-- 活动不显示价钱 -->
<view v-if="!is_promotion" class="desc-blod -goods-msg">
<view class="-goods-flex">
<view class="desc-blod">
{{ goodsDetail.goodsName || "" }}
</view>
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
</view>
</view>
<!-- 商品描述 -->
<view class="-goods-desc">
{{ goodsDetail.sellingPoint || '' }}
</view>
</view>
<view v-else class="-goods-msg">
<!-- 没有拼团，秒杀等活动的情况下 -->
<view>
<view class="-goods-flex">
<!-- 如果有积分显示积分 -->
<view class="-goods-price" v-if="goodsDetail.price != undefined">
<span v-if="pointDetail.points" > <span class="price">{{pointDetail.points}}</span>
<span>积分</span>
</span>
<span v-else> <span>¥</span><span class="price">{{ Fixed(goodsDetail.price)[0] }}</span>.{{
Fixed(goodsDetail.price)[1]
}} </span>
</view>
<view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </view>
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'"></u-icon>
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{ favorite ? "已收藏" : "收藏" }}</view>
</view>
</view>
<view class="-goods-name desc-blod">
{{ goodsDetail.goodsName || "" }}
</view>
<view class="-goods-desc">
{{ goodsDetail.sellingPoint || '' }}
</view>
</view>
</view>
</view>
<view class="card-box">
<view class="card-flex" @click="shutMask(1)">
<view class="card-title"> 促销 </view>
<view class="card-content">
<span v-if="PromotionList && emptyPromotion()">暂无促销信息</span>
<PromotionLayout v-else @shutMasks="shutMask" :res="PromotionList" />
</view>
<view class="card-bottom">
<u-icon name="more-dot-fill"></u-icon>
</view>
</view>
</view>
<!-- 拼团用户列表 -->
<PromotionAssembleListLayout v-if="isGroup" @to-assemble-buy-now="toAssembleBuyNow" :res="PromotionList" />
<view class="card-box">
<view class="card-flex" @click="shutMask(4)">
<view class="card-title"> 已选 </view>
<view class="card-content">
<span v-if="selectedGoods.spec">{{ selectedGoods.spec.specName }}-{{
selectedGoods.spec.specValue
}}</span>
<span v-else>默认</span>
</view>
<view class="card-bottom">
<u-icon name="more-dot-fill"></u-icon>
</view>
</view>
<view class="card-flex" @click="shutMask(3)">
<view class="card-title"> 送至 </view>
<view class="card-content">
<span v-if="delivery">{{
delivery.consigneeAddressPath | clearStrComma
}}</span>
<span v-else>暂无地址信息</span>
</view>
<view class="card-bottom">
<u-icon name="more-dot-fill"></u-icon>
</view>
</view>
</view>
<!-- 评价 -->
<Evaluation id="main5" :goodsDetail="goodsDetail" v-if="goodsDetail.id" />
<!-- 店铺推荐 -->
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
<!-- 宝贝详情 -->
<GoodsIntro id="main9" :res="goodsDetail" :goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
<!-- 宝贝推荐 -->
<GoodsRecommend id="main11" :res="likeGoodsList" />
</view>
</scroll-view>
<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
<view class="icon-btn">
<view class="icon-btn-item" @click="linkstorePage(goodsDetail.storeId)">
<u-icon size="34" class="red" name="home-fill"></u-icon>
<view class="red icon-btn-name">店铺</view>
</view>
<!-- <view class="icon-btn-item" @click="linkMsgDetail()">
<u-icon size="34" name="kefu-ermai"></u-icon>
<view class="icon-btn-name">客服</view>
</view> -->
<view class="icon-btn-item" @click="reluchToCart()">
<u-icon size="34" name="storeping-cart"></u-icon>
<view class="icon-btn-name">购物车</view>
<view v-if="nums && nums > 0" class="num-icon">{{ nums }}</view>
</view>
</view>
<!-- 正常结算页面 -->
<view class="detail-btn" v-if="!isGroup">
<view class="to-store-car to-store-btn" @click="shutMask(4)">加入购物车</view>
<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
<view class="to-store-car to-store-btn" v-if="startTimer">暂未开始</view>
</view>
<!-- 拼团结算 -->
<view class="detail-btn" v-else>
<view class="to-store-car pt-buy to-store-btn" @click="shutMask(4, 'buy')">
<view>￥{{ goodsDetail.price | unitPrice }}</view>
<view>单独购买</view>
</view>
<view class="to-buy pt-buy to-store-btn" @click="toAssembleBuyNow">
<view>￥{{ goodsDetail.promotionPrice | unitPrice }}</view>
<view>拼团价格</view>
</view>
</view>
</view>
<!-- 规格-模态层弹窗 -->
<view class="popup spec" @click="shutMask(false)" v-show="maskFlag">
<!-- 促销弹窗 -->
<view class="cuxiao mask" v-show="cuxiao">
<view ref="mask_title" class="title mask_title">
优惠
<span @click="shutMask(false)">×</span>
</view>
<scroll-view class="scroll_mask" :scroll-y="true">
<view class="con-cuxiao">
<text>促销活动</text>
<PromotionDetailsLayout :res="PromotionList" />
</view>
<view class="con-cuxiao coupons">
<text>可领优惠券</text>
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
</view>
</scroll-view>
</view>
<!-- 配送地址弹窗 -->
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id" :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
<!-- 商品规格 商品详情，以及默认参与活动的id-->
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy" @queryCart="cartNum()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="init" :buyMask="buyMask" />
</view>
</view>
</div>
</template>
<script>
/************接口API***************/
import { getGoods, getGoodsList, getMpScene } from "@/api/goods.js";
import * as API_trade from "@/api/trade.js";
import * as API_Members from "@/api/members.js";
import * as API_store from "@/api/store.js";
/************请求存储***************/
import storage from "@/utils/storage.js";
/************组件***************/
import PromotionLayout from "./product/promotion/-promotion"; //促销组件
import PromotionDetailsLayout from "./product/promotion/-promotion-details"; //促销活动详情
import PromotionAssembleLayout from "./product/promotion/-promotion-assemble-promotions"; //促销活动条
import PromotionAssembleListLayout from "./product/promotion/-promotion-assemble-list"; //拼团用户列表
import PromotionCoupon from "./product/promotion/-promotion-coupon"; //优惠券组件
import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
import storeLayout from "./product/shop/-shop"; //店铺组件
import Evaluation from "./product/evaluation/-evaluation"; //评价组件
import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
import popupGoods from "./product/popup/goods"; //购物车商品的模块
import popupAddress from "./product/popup/address"; //地址选择模块
import shares from "@/components/m-share/index"; //分享
export default {
components: {
shares,
PromotionLayout,
PromotionDetailsLayout,
PromotionAssembleLayout,
PromotionAssembleListLayout,
PromotionCoupon,
GoodsIntro,
GoodsRecommend,
storeLayout,
Evaluation,
GoodsSwiper,
popupGoods,
popupAddress,
},
data() {
return {
shareFlage: false,
selectedGoods: "", //选择的商品规格昵称
is_promotion: true, //判断显示拼团活动文字
isGroup: false, // 是否是拼团活动
pointDetail: "", // 是否是积分商品
assemble: "", //拼团的sku
scroll_mask_height: 0, //促销活动的高度
navbar: {
background: "#fff",
},
productRefHeight: "",
header: {
top: 0,
height: 50,
},
headerFlag: false, //顶部导航显示与否
headerList: [
//顶部导航文字
{
text: "商品",
id: "1",
},
{
text: "评价",
id: "2",
},
{
text: "详情",
id: "3",
},
{
text: "推荐",
id: "4",
},
],
oldtabScrollTop: 0,
tabScrollTop: null,
scrollArr: [],
scrollId: "1",
scrollFlag: true,
current: "1", //当前显示的轮播图页
goodsDetail: {}, //商品数据
goodsSpec: "", //规格数据
imgList: [], //轮播图数据
favorite: false, //收藏与否flag
recommendList: [], //推荐列表
maskFlag: false, //模态显示与否
cuxiao: false, //促销弹窗
goodsInfo: false, //商品介绍弹窗
addressFlag: false, //配送地址弹窗
buyMask: false, //添加购物车直接购买，查看已选 弹窗
num: 1, //添加到购物车的数量
skuId: "", //
storeDetail: "", //店铺基本信息,
// 店铺信息
storeParams: {
pageNumber: 1,
pageSize: 10,
},
likeGoodsList: "", //相似商品列表
PromotionList: "", //活动,促销，列表
specList: [],
skusCombination: [],
selectedSpec: [],
nums: 0,
delivery: "",
exchange: {},
productId: 0,
startTimer: false, //未开启 是false
routerVal: "",
};
},
watch: {
isGroup(val) {
if (val) {
let timer = setInterval(() => {
this.$refs.popupGoods.buyType = "PINTUAN";
console.log(this.$refs.popupGoods.buyType);
clearInterval(timer);
}, 100);
this.is_promotion = false;
} else {
this.is_promotion = true;
this.$refs.popupGoods.buyType = "";
}
},
},
mounted() {
const { windowHeight } = uni.getSystemInfoSync();
let bottomHeight = 0;
let topHeight = 0;
uni.getSystemInfo({
success: function (res) {
// res - 各种参数
let bottom = uni.createSelectorQuery().select(".page-bottom");
bottom
.boundingClientRect(function (data) {
if (data && data.height) {
//data - 各种参数
bottomHeight = data.height; // 获取元素宽度
}
})
.exec();
let top = uni.createSelectorQuery().select(".header");
top
.boundingClientRect(function (data) {
if (data && data.height) {
//data - 各种参数
topHeight = data.height; // 获取元素宽度
}
})
.exec();
},
});
this.productRefHeight = windowHeight - bottomHeight + "px";
},
async onLoad(options) {
this.routerVal = options;
},
onShow() {
this.goodsDetail = {};
//如果有参数ids说明事分销短连接，需要获取参数
if (this.routerVal.scene) {
getMpScene(this.routerVal.scene).then((res) => {
if (res.data.success) {
let data = res.data.result.split(","); // skuId,goodsId,distributionId
this.init(data[0], data[1], data[2]);
}
});
} else {
this.init(
this.routerVal.id,
this.routerVal.goodsId,
this.routerVal.distributionId,
this.routerVal.whetherPoint
);
}
},
onReachBottom() {
this.storeParams.pageNumber++;
this.getOtherLikeGoods();
},
methods: {
// 循环出当前促销是否为空
emptyPromotion() {
if (
this.PromotionList == "" ||
this.PromotionList == null ||
this.PromotionList == []
) {
return true;
}
},
/**初始化信息 */
async init(id, goodsId, distributionId, whetherPoint) {
this.isGroup = false; //初始化拼团
this.productId = id; // skuId
// 这里请求获取到页面数据 解析数据
uni.showLoading({
title: "加载中",
mask: true,
});
let response = await getGoods(id, goodsId, distributionId);
uni.hideLoading();
/**商品信息以及规格信息存储 */
this.goodsDetail = response.data.result.data;
this.goodsSpec = response.data.result.specs;
this.PromotionList = response.data.result.promotionMap;
// 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
this.PromotionList &&
Object.keys(this.PromotionList).forEach((item) => {
// 拼团商品
if (item.indexOf("PINTUAN") == 0) {
this.isGroup = true;
}
// 积分
if (item.indexOf("POINTS_GOODS") == 0) {
this.pointDetail = this.PromotionList[item];
console.log(this.pointDetail);
}
});
// 轮播图
this.imgList = this.goodsDetail.goodsGalleryList;
// 获取店铺基本信息
this.getstoreBaseInfoFun(this.goodsDetail.storeId);
// 获取购物车
this.cartNum();
// 获取店铺推荐商品
this.getstoreRecommend();
// 获取商品列表
this.getOtherLikeGoods();
// 获取商品是否已被收藏 如果未登录不获取
if (this.$options.filters.isLogin("auth")) {
this.getGoodsCollectionFun(this.goodsDetail.id);
}
},
// 格式化金钱 1999 --> [1999,00]
Fixed(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
changedGoods(val) {
this.selectedGoods = val;
},
/** 点击子级地址回调参数*/
deliveryFun(val) {
this.delivery = val;
},
/**
* 地址子级关闭回调
*/
closePopupAddress(val) {
this.addressFlag = val;
this.maskFlag = false;
},
/**
* 商品规格子级关闭回调
*/
closePopupBuy(val) {
this.buyMask = val;
this.maskFlag = false;
},
/** 参与拼团 创建拼团 */
toAssembleBuyNow(order) {
this.shutMask(4, "PINTUAN", order);
},
// 查看购物车
reluchToCart() {
let obj = {
from: "product",
id: this.productId,
};
storage.setCartBackbtn(obj);
uni.switchTab({
url: "/pages/tabbar/cart/cartList",
});
},
// 查询购物车总数量
cartNum() {
if (storage.getHasLogin()) {
API_trade.getCartNum().then((res) => {
this.nums = res.data.result;
});
}
},
back() {
uni.navigateBack();
},
// 获取店铺信息
getstoreBaseInfoFun(id) {
API_store.getstoreBaseInfo(id).then((res) => {
if (res.data.success) {
this.storeDetail = res.data.result;
}
});
},
// 删除收藏店铺
deleteGoodsCollectionFun(id) {
// deleteStoreCollection
API_Members.deleteGoodsCollection(id).then((res) => {
if (res.statusCode == 200) {
uni.showToast({
title: "商品已取消收藏!",
icon: "none",
});
this.favorite = !this.favorite;
}
});
},
// 获取商品是否已被收藏
getGoodsCollectionFun(goodsId) {
if (storage.getHasLogin()) {
API_Members.getGoodsIsCollect(goodsId, "GOODS").then((res) => {
this.favorite = res.data.result;
});
}
},
// 获取店铺推荐商品列表
getstoreRecommend() {
getGoodsList({
pageNumber: 1,
pageSize: 6,
storeId: this.goodsDetail.storeId,
recommend: true,
}).then((res) => {
this.recommendList = res.data.result.content;
});
},
// 获取相似商品列表
getOtherLikeGoods() {
getGoodsList({
pageNumber: 1,
pageSize: 10,
category: this.goodsDetail.categoryId,
keyword: this.goodsDetail.name,
}).then((res) => {
this.likeGoodsList = res.data.result.content;
});
},
// 领取优惠券
receiveCouponsFun(id) {
API_Members.receiveCoupons(id).then((res) => {
uni.showToast({
title: res.data.message,
icon: "none",
});
});
},
linkstorePage(store_id) {
uni.navigateTo({
url: `/pages/product/shopPage?id=` + store_id,
});
},
//获取优惠券按钮
getCoupon(item) {
this.receiveCouponsFun(item.id);
},
//规格弹窗开关
shutMask(flag, buyFlag, type) {
// type是指是否点击底部按钮
if (flag) {
switch (flag) {
case 1: //优惠券弹窗
this.maskFlag = true;
this.cuxiao = true;
break;
case 3:
this.maskFlag = true;
this.addressFlag = true;
break;
case 4: //添加购物车直接购买，查看已选 弹窗
// 判断是否是一个规格
this.maskFlag = true;
this.buyMask = true;
if (buyFlag == "PINTUAN") {
if (type.orderSn) {
this.$refs.popupGoods.parentOrder = type;
}
this.$refs.popupGoods.buyType = "PINTUAN";
}
if (buyFlag == "buy") {
this.$refs.popupGoods.buyType = "";
}
break;
}
} else {
this.maskFlag = false;
this.cuxiao = false;
this.buyMask = false;
}
},
//收藏
clickFavorite(id) {
if (this.favorite) {
// 取消收藏
this.deleteGoodsCollectionFun(id);
return false;
}
API_Members.collectionGoods(id, "GOODS").then((res) => {
if (res.data.success) {
uni.showToast({
title: "收藏成功!",
icon: "none",
});
}
});
this.favorite = !this.favorite;
},
// 顶部header显示或隐藏
pageScroll(e) {
if (this.scrollFlag) {
this.calcSize();
}
if (e.detail.scrollTop > 200) {
//当距离大于200时显示回到顶部按钮
this.headerFlag = true;
} else {
//当距离小于200时隐藏回到顶部按钮
this.headerFlag = false;
}
if (e.detail.scrollTop < this.scrollArr[0] - 10) {
this.scrollId = "1";
}
if (e.detail.scrollTop > this.scrollArr[1] - 10) {
this.scrollId = "2";
}
if (e.detail.scrollTop > this.scrollArr[2] - 10) {
this.scrollId = "3";
}
if (e.detail.scrollTop > this.scrollArr[3] - 10) {
this.scrollId = "4";
}
},
//计算每个要跳转到的模块高度信息
calcSize() {
let h = 0;
let that = this;
let arr = [
"main1",
"main2",
"main3",
"main4",
"main5",
"main6",
"main7",
"main8",
"main9",
"main10",
"main11",
];
arr.forEach((item) => {
let view = uni.createSelectorQuery().select("#" + item);
view
.fields(
{
size: true,
},
(data) => {
if (
item === "main1" ||
item === "main5" ||
item === "main9" ||
item === "main11"
) {
that.scrollArr.push(h);
}
if (data && data.height) {
h += data.height;
}
}
)
.exec();
});
this.scrollFlag = false;
},
// 点击顶部跳转到对应位置
headerTab(id) {
if (this.scrollFlag) {
this.calcSize();
}
this.scrollId = id;
this.$nextTick(() => {
this.tabScrollTop = this.scrollArr[id - 1];
});
},
// 点击分享
async shareChange() {
this.shareFlage = true;
},
},
};
</script>
<style lang="scss" scoped>
// #ifdef MP-WEIXIN
@import "./product/mp-goods.scss";
// #endif
@import "./product/style.scss";
@import "./product/product.scss";
</style>

6
pages/product/mp-shopPage.scss Normal file
View File

@@ -0,0 +1,6 @@
.search{
margin-top: 28rpx !important;
}
.status_bar{
height: calc(var(--status-bar-height) + 188rpx ) !important;
}

220
pages/product/product/evaluation/-evaluation.vue Normal file
View File

@@ -0,0 +1,220 @@
<template>
<view class="evaluate-box">
<view class="eva-section" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)">
<view class="e-header">
<view class="evaluate-title">评价</view>
<text class="evaluate-num">{{ commDetail.total || '0' }}+</text>
<text class="tip">好评率 {{ goodsDetail.grade || '100' }}%</text>
</view>
<div v-if="commDetail && commDetail.records && commDetail.records.length > 0">
<view class="eva-box" v-for="(commItem,commIndex) in commDetail.records.slice(0,2)" :key="commIndex">
<view class="section-info">
<u-avatar mode="circle" size="60" class="portrait" :src="commItem.memberProfile"></u-avatar>
<view class="star-con">
<text class="name">{{ commItem.memberName | noPassByName }}</text>
</view>
</view>
<view class="section-contant">
<u-read-more ref="uReadMore" :color="lightColor">
<rich-text @load="parseLoaded" :nodes="commItem.content " class="con"></rich-text>
</u-read-more>
<scroll-view scroll-x class="scroll-x" v-if="commItem.image">
<view class="img">
<u-image border-radius="12" class="commImg" width="160rpx" height="160rpx" v-for="(item, index) in commItem.image.split(',')" :src="item" :key="index"
@click.stop="previewImg(commItem.image, index)"></u-image>
</view>
</scroll-view>
<view class="bot">
<text class="attr">{{ commItem.goodsName }}</text>
</view>
</view>
</view>
</div>
<div v-else class="goodsNoMore">
<u-empty text="该商品暂无评论" mode="message"></u-empty>
</div>
</view>
<!-- 查看全部评价按钮 -->
<view v-if="commDetail && commDetail.records && commDetail.records.length > 0" class="eva-section-btn" @click="toComment(goodsDetail.goodsId, goodsDetail.grade)" >
<text>查看全部评价</text>
</view>
</view>
</template>
<script>
import * as API_Members from "@/api/members.js";
export default {
data() {
return {
lightColor:this.$lightColor,
// 评论集合
commDetail: [],
// 评论分页提交数据
params: {
pageNumber: 1,
pageSize: 10,
grade: "",
},
};
},
props: ["goodsDetail"],
mounted() {
this.getGoodsComments();
},
methods: {
parseLoaded() {
this.$refs.uReadMore.init();
},
// 获取商品评论
getGoodsComments() {
API_Members.getGoodsComments(this.goodsDetail.goodsId, this.params).then(
(res) => {
this.commDetail = res.data.result;
}
);
},
toComment(id, grade) {
uni.navigateTo({
url: `/pages/product/comment?id=${id}&grade=${grade}`,
});
},
// 预览
previewImg(url, index) {
uni.previewImage({
urls: url,
indicator: "number",
current: index,
});
},
},
};
</script>
<style lang="scss" scoped>
@import "../product.scss";
.commImg {
margin-right: 12rpx;
margin-bottom: 10rpx;
display: inline-block;
}
.name {
color: #262626;
font-size: 22rpx;
}
.eva-section-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 40rpx 40rpx 50rpx;
margin: 2px 0 20rpx 0;
background: #fff;
text {
width: 200rpx;
height: 50rpx;
font-size: 22rpx;
line-height: 46rpx;
text-align: center;
color: #262626;
border: 2rpx solid #ededed;
box-sizing: border-box;
border-radius: 30px;
}
}
.goodsNoMore {
padding: 20rpx 0;
text-align: center;
color: $u-tips-color;
}
/* 评价 */
.eva-section {
display: flex;
flex-direction: column;
background: #fff;
.e-header {
display: flex;
align-items: baseline;
font-size: $font-sm + 2rpx;
color: $font-color-light;
> .evaluate-num {
margin-left: 10rpx;
font-size: 24rpx;
color: #333;
}
.tit {
font-size: 32rpx;
color: $font-color-dark;
font-weight: 500;
margin: 0 4rpx;
}
.tip {
flex: 1;
text-align: right;
color: #8c8c8c;
font-size: 24rpx;
}
.icon-you {
margin-left: 10rpx;
}
}
}
.scroll-x {
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
.eva-box {
padding: 36rpx 0 30rpx 0;
border-bottom: 2rpx solid #f2f2f2;
.section-info {
display: flex;
align-items: center;
.portrait {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
border-radius: 100px;
margin-right: 20rpx;
}
> view > text {
margin-left: 6rpx;
}
}
.section-contant {
display: flex;
flex-direction: column;
.con {
font-size: 26rpx;
line-height: 46rpx;
color: $font-color-dark;
color: #333;
padding: 20rpx 0;
}
.img {
}
.bot {
display: flex;
justify-content: space-between;
font-size: 22rpx;
color: #999;
margin-top: 20rpx;
}
}
}
</style>

13
pages/product/product/goods/-goods-desc.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

138
pages/product/product/goods/-goods-intro.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div>
<view class="detail-box">
<view class="goods-detail">
<view class="detail_padding">
<div class="goods-detail-box">
<div class="goods-detail-item goods-active">商品介绍</div>
</div>
<u-empty class="empty" text="暂无商品介绍" mode="data" v-if="!res.intro"></u-empty>
<u-parse class="vhtml" :lazy-load="true" :use-cache="true" :show-with-animation="true" :html="res.mobileIntro"></u-parse>
</view>
</view>
</view>
<view class="detail-box">
<view class="goods-detail">
<view class="detail_padding">
<div class="goods-detail-box">
<div class="goods-detail-item goods-active">商品参数</div>
</div>
<u-divider>商品参数</u-divider>
<div class="param-list" v-if="!goodsDetail.goodsParamsList || goodsDetail.goodsParamsList.length == 0">
<u-empty text="暂无商品参数" mode="list"></u-empty>
</div>
<div class="param-list" v-if="goodsDetail.goodsParamsList && goodsDetail.goodsParamsList.length != 0">
<div class="param-item" v-for="(param,index) in goodsDetail.goodsParamsList" :key="index">
<div class="param-left">
{{param.paramName}}
</div>
<div class="param-right">
{{param.paramValue}}</div>
</div>
</div>
</view>
</view>
</view>
</div>
</template>
<script>
import { getGoodsMessage } from "@/api/goods";
export default {
data() {
return {
goodsDetail: "",
};
},
props: ["res", "goodsId"],
async mounted() {
let res = await getGoodsMessage(this.goodsId);
if (res.data.success) {
this.goodsDetail = res.data.result;
console.log(this.goodsDetail);
}
},
};
</script>
<style lang="scss" scoped>
@import "../product.scss";
.param-list {
padding: 40rpx 0 80rpx 0;
}
.param-item {
display: flex;
justify-content: center;
border-bottom: none;
> .param-left,
> .param-right {
padding: 16rpx 0;
font-size: 24rpx;
color: #666;
border: 1px solid rgb(220, 223, 230);
border-bottom: none;
}
> .param-left {
text-align: center;
border-right: none;
flex: 3;
}
> .param-right {
padding: 0 10rpx;
align-items: center;
display: flex;
flex: 7;
}
}
.param-item:nth-last-of-type(1) {
> .param-left,
> .param-right {
border-bottom: 1px solid rgb(220, 223, 230);
}
}
.empty {
margin: 40rpx 0;
}
.goods-detail /deep/ .vhtml {
overflow: hidden;
width: 100%;
}
/deep/ img {
width: 100%;
}
.goods-detail-box {
display: flex;
justify-content: space-between;
// padding: 0 80rpx;
height: 120rpx;
line-height: 120rpx;
> .goods-active {
font-weight: 700;
&::before {
position: absolute;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
content: "";
display: block;
width: 52rpx;
height: 6rpx;
background-image: linear-gradient(90deg, $jd-color, $jd-light-color);
}
}
> .goods-detail-item {
color: #262626;
position: relative;
}
}
.detail_padding {
}
</style>

169
pages/product/product/goods/-goods-recommend.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<view class="recommend-box" >
<h4 class="goods-recommend-title">宝贝推荐</h4>
<view class="like-goods-list">
<view class="like-goods-list">
<view
class="like-goods-item"
@click="clickGoods(item)"
v-for="(item, index) in res"
:key="index"
>
<u-image
:fade="true"
duration="450"
:lazy-load="true"
:src="item.thumbnail"
width="330rpx"
height="330rpx"
class="like-goods-uimage"
>
<u-loading slot="loading"></u-loading>
</u-image>
<view style="background-color: #ffffff; width: 100%">
<view class="name">{{ item.goodsName }}</view>
<view class="price-sales">
<div class="item-price" v-if="item.price != undefined">
￥
<span>{{ Fixed(item.price)[0] }}</span>
.{{Fixed(item.price)[1]}}
<!-- <text v-if="item.point != undefined">+{{ item.point }}积分</text> -->
</div>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: ["res"],
methods: {
// 点击店铺推荐
clickGoods(val) {
uni.navigateTo({
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`
});
},
// 格式化金钱 1999 --> [1999,00]
Fixed(val) {
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
}
}
};
</script>
<style lang="scss" scoped>
@import "../mp-goods.scss";
@import "../product.scss";
.goods_recomm {
padding: 12px 0 20rpx 20rpx;
color: #000;
font-size: 30rpx;
font-weight: 400;
margin-bottom: 28rpx;
}
.like-goods-uimage {
/deep/ .u-image {
height: 350rpx !important;
}
width: 100%;
}
.recommend-box {
background-color: #ffffff;
width: 100%;
padding-bottom: 120rpx;
.title {
width: 120rpx;
height: 42rpx;
font-size: 30rpx;
font-weight: 700;
text-align: left;
color: #333333;
margin-left: 20rpx;
}
}
.like-goods-list {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.like-goods-item {
padding: 0 !important;
width: 48%;
margin: 0 1% 10rpx 1%;
background: #f7f7f7;
border-radius: 12rpx;
overflow: hidden;
/deep/ .u-image {
width: 100%;
}
}
.like-goods-list {
// background-color: #f8f8f8;
width: 100%;
margin-bottom: 100rpx;
.name {
padding: 14rpx 8rpx 0 8rpx;
color: #333;
font-size: 24rpx;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
background: #f7f7f7;
height: 80rpx;
}
.price-sales {
padding: 8rpx;
background: #f7f7f7;
display: flex;
justify-content: space-between;
align-items: center;
.item-price {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
text-align: left;
color: $jd-color;
line-height: 23px;
font-weight: bold;
> span {
font-size: 32rpx;
}
}
.sales {
line-height: 23px;
font-size: 22rpx;
text-align: left;
letter-spacing: 0;
color: #cccccc;
// padding-right: 10rpx;
}
}
}
</style>

85
pages/product/product/goods/-goods-swiper.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<!-- 轮播图 -->
<view class="carousel">
<swiper circular="true" duration="400" @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in res" :key="index">
<view class="image-wrapper">
<u-image :src="item" mode="aspectFit" class="loaded" width="100%" height="100%">
<u-loading slot="loading"></u-loading>
</u-image>
</view>
</swiper-item>
</swiper>
<view class="swiper-dots">{{ current }}/{{ res.length }}</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 1,
};
},
props: ["res"],
methods: {
// 轮播图对应的dot
swiperChange(e) {
this.current = e.detail.current + 1;
},
},
};
</script>
<style lang="scss" scoped>
.carousel {
// #ifdef MP-WEIXIN
margin-top: var(--status-bar-height);
// #endif
width: 750rpx;
height: 750rpx;
position: relative;
swiper {
height: 100%;
}
.image-wrapper {
width: 100%;
height: 100%;
}
.swiper-item {
display: flex;
justify-content: center;
align-content: center;
height: 750rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
position: relative;
.swiper-dots {
position: absolute;
right: 0rpx;
bottom: 40rpx;
font-size: 32rpx;
width: 107rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
border-radius: 30rpx 0rpx 0rpx 30rpx;
background: #333333;
opacity: 0.4;
font-weight: 400;
color: #fff;
}
}
/deep/ .image-wrapper image {
opacity: 1 !important;
}
</style>

6
pages/product/product/mp-goods.scss Normal file
View File

@@ -0,0 +1,6 @@
.showBack {
margin-top: calc( var(--status-bar-height) + 20px ) !important;
}

177
pages/product/product/popup/address.vue Normal file
View File

@@ -0,0 +1,177 @@
<template>
<u-popup class="popup" v-model="addressFlag" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius" @close="closeAddress()" :mask-close-able="setup.close" :mask="false" closeable>
<view class="header-title">选择地址</view>
<view class="view-box" v-if="addressDetail">
<view class="view-item" v-for="(item, index) in addressDetail" :key="index" @click="clickAddress(item)">
<view class="view-box-checkbox">
<view class="checkbox" :class="{ checked: item.isDefault }">
<u-icon v-if="item.isDefault" :class="{ active: item.isDefault }" name="checkmark" size="12"></u-icon>
</view>
</view>
<view class="view-box-dress" :class="{ 'box-dress-blod': item.isDefault }">{{ item.consigneeAddressPath | clearStrComma }}</view>
</view>
</view>
<view class="view-box" v-else>
<view class="noMore">
<u-empty text="暂无收货地址" mode="address"></u-empty>
</view>
</view>
<!-- 按钮 -->
<view class="btns">
<view class="box-btn light" @click="getpicker">选择其他地址</view>
<view class="box-btn" @click="closeAddress()">确定</view>
</view>
<m-city :provinceData="cityList" headTitle="区域选择" ref="cityPicker" pickerSize="4"></m-city>
</u-popup>
</template>
<script>
import setup from "./popup";
/************请求存储***************/
import * as API_Address from "@/api/address.js";
export default {
data() {
return {
checked: "",
setup,
addressDetail: "",
cityList: [
{
id: "",
localName: "请选择",
children: [],
},
],
};
},
filters: {},
watch: {},
mounted() {
this.addressFlag = false;
if( this.$options.filters.isLogin("auth") ){
this.getShippingAddress()
}
else{
uni.navigateTo({
url: 'pages/passport/login'
});
}
},
props: ["goodsId", "addressFlag"],
methods: {
/**关闭地址 */
closeAddress() {
this.$emit("closeAddress", false);
this.$emit("deliveryData", this.checked);
},
getpicker() {
// this.$refs.cityPicker.show();
uni.navigateTo({
url: "/pages/mine/address/add",
});
this.closeAddress();
},
/**获取地址 */
getShippingAddress() {
if (this.$options.filters.isLogin("auth")) {
API_Address.getAddressList(1, 50).then((res) => {
if (res.data.success) {
this.addressDetail = res.data.result.records;
let addr = res.data.result.records.filter((item) => {
return item.isDefault == 1;
});
if (addr[0]) {
this.checked = addr[0];
this.$emit("deliveryData", this.checked);
}
// addr[0] ? "" : (addr = res.data);
// /**获取默认地址是否有货 */
// this.clickAddress(addr[0]);
}
});
}
},
/**点击地址返回父级商品状态 */
clickAddress(val) {
this.checked = val;
this.addressDetail.forEach((item) => {
item.isDefault = false;
});
val.isDefault = !val.isDefault;
this.$emit("deliveryData", this.checked);
},
},
};
</script>
<style lang="scss" scoped>
.light {
background-image: linear-gradient(
135deg,
#ffba0d,
#ffc30d 69%,
#ffcf0d
) !important;
box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
}
.noMore {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.view-item {
display: flex;
align-items: center;
padding: 22rpx 0;
}
.view-box-dress {
letter-spacing: 1rpx;
margin-left: 20rpx;
line-height: 42rpx;
color: #333;
font-size: 28rpx;
}
.checked {
background: $jd-color;
}
.active {
color: #fff;
}
.checkbox {
text-align: center;
line-height: 40rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid #ededed;
}
@import "./popup.scss";
.view-box {
height: 810rpx;
// #ifdef MP-WEIXIN
height: 770rpx;
// #endif
padding: 0 20rpx;
overflow-y: auto;
}
.header-title {
font-weight: bold;
color: #333;
text-align: center;
height: 90rpx;
line-height: 90rpx;
font-size: 34rpx;
}
</style>

Some files were not shown because too many files have changed in this diff Show More