zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
pages/bookShop/bookShopIndex.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<view class="">
<view class="shopHeader">
<!-- 顶部导航栏 -->
<z-nav-bar title="健康超市"></z-nav-bar>
<!-- 搜索 -->
<!-- <view class="search" @click="goSearch()">
<u-search placeholder="请输入需要的商品" v-model="keyword" :show-action="false"></u-search>
</view> -->
</view>
<!-- 主盒子 -->
<view class="indexBox">
<!-- 轮播图 -->
<view class="swiper_box">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(item,index) in swiperlist" :key="index">
<view class="swiper-item">
<image :src="item.image" mode="widthFix " class="swiperImg"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 分类 -->
<view class="head_line">
<b></b>
<text>商品分类</text>
</view>
<view class="classfy">
<view v-for="(item,index) in gridArr" :key="index" @click='toClassify(item.catId,index)'>
<!-- <u-icon v-if="item.icon" :name="item.icon" :size="46"></u-icon> -->
<image :src="item.icon"></image>
<text class="grid-text">{{item.name}}</text>
</view>
<br clear="both">
</view>
<!-- 商品展示 -->
<view class="head_line">
<b></b>
<text>限时秒杀</text>
<i @click="onShopMore('Sale')">查看更多 ></i>
</view>
<!-- 限时秒杀 -->
<view class="limited">
<view class="limitedSymbol">
<image src="../../static/icon/shopping_xsh.png"></image>
</view>
<view class="limitedScrollBox">
<u-scroll-list indicatorActiveColor="#27b386">
<view class="limitedItem" v-for="(item,index) in seckillList" :key="index"
@click="goDetail(item.prodInfo.productId)">
<image :src="item.prodInfo.productImages" mode=""></image>
<text class="biaoti">{{item.prodInfo.productName}}</text>
<text class="xian">￥{{item.seckillPrice}}</text>
<text class="yuan">￥{{item.prodInfo.price}}</text>
</view>
</u-scroll-list>
</view>
</view>
<!-- 商品展示 -->
<view class="head_line">
<b></b>
<text>精选商品</text>
<i @click="onShopMore('Hot')">查看更多 ></i>
</view>
<view class="goods">
<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.productId"
@click="goDetail(item.productId)">
<image :src="item.productImages" mode="" class="goodsImg"></image>
<view class="goodsContent">
<view class="goodsName">
{{item.productName}}
</view>
<view class="goodsPrice">
￥{{item.price}}
</view>
</view>
</view>
<br clear="both">
</view>
<view style="height: 30rpx;"></view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
data() {
return {
keyword: '', // 搜索索引值
// 轮播图数据
swiperlist: [{
image: '../../static/icon/home_ban_1.jpg',
},
{
image: '../../static/icon//home_ban_2.jpg',
},
{
image: '../../static/icon//home_ban_3.jpg',
}
],
totalCount: 4,
pageSize: 1,
totalPage: 4,
currPage: 1,
limit: 4,
page: 1,
istop: 1, // 是否是精选商品
// 秒杀列表
seckillList: [],
// 商品列表
goodsList: [],
// 分类数据
gridArr: [{
icon: "list-dot",
name: '更多'
}],
}
},
computed: {
...mapState(['userInfo']),
},
onLoad() {
// 获取分类
this.$http
.post('book/shopcategory/getOneLevel')
.then(res => {
// 用一个空数组去接分类数据
let arr = []
if (res.list.length >= 5) {
for (let i in res.list) {
if (i < 5) {
arr.push({
icon: "../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
name: res.list[i].name,
catId: res.list[i].catId
})
}
}
arr.push({
icon: "../../static/icon/shop_bar_more.png",
name: '更多'
})
this.gridArr = arr
}
})
// 获取限时秒杀
this.$http
.get(`book/shopseckill/getSeckillProd`)
.then(res => {
this.seckillList = res.list
console.log(this.seckillList)
})
// 获取精选商品
this.$http
.post(`book/shopproduct/appGetList?limit=${this.limit}&page=${this.page}&istop=${this.istop}`)
.then(
res => {
this.goodsList = res.page.list
})
},
methods: {
// 跳转详情页
goDetail(id) {
uni.navigateTo({
url: './commodityDetail?id=' + id
});
},
// 跳转分类页
toClassify(catId, index) {
if (catId) {
uni.navigateTo({
url: `./classify?type=${index}`
})
} else {
uni.navigateTo({
url: './classifyAll'
})
}
},
// 跳转搜索页
goSearch() {
uni.navigateTo({
url: './commoditySearch'
})
},
// 列表跳页
onShopMore(e) {
uni.navigateTo({
url: './bookShopType?type=' + e
});
},
}
}
</script>
<style lang="scss" scoped>
.shopHeader {
position: relative;
top: 0;
left: 0;
}
.search {
padding: 10rpx;
background-color: #fff;
margin: 10rpx 0;
}
.swiper_box {
margin-top: 20rpx;
padding: 0 20rpx;
.swiper-item {
width: 100%;
height: 100%;
border-radius: 20rpx;
.swiperImg {
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
}
.classfy {
margin: 0 10rpx;
border-radius: 30rpx;
view {
float: left;
width: 16.6%;
text-align: center;
image {
width: 100rpx;
height: 100rpx;
margin: 0 auto;
}
.grid-text {
font-size: 25rpx;
margin-top: 4rpx;
}
}
}
.head_line {
margin: 30rpx 0 30rpx 0;
padding: 10rpx;
b {
display: inline-block;
width: 12rpx;
height: 40rpx;
background-color: #54a966;
vertical-align: bottom;
margin: 0 20rpx 0 0;
}
text {
font-size: 32rpx;
font-weight: bold;
}
i {
float: right;
font-style: normal;
color: #8b8a91;
font-size: 24rpx;
margin: 15rpx 35rpx 0 0;
}
}
.limited {
width: 100%;
height: auto;
padding: 20rpx 10rpx 10rpx 10rpx;
display: flex;
align-items: center;
background-color: #fff;
margin-top: 10rpx;
.limitedSymbol {
width: 22%;
height: 300rpx;
border-right: 1px solid #eee;
vertical-align: middle;
image {
width: 120rpx;
height: 120rpx;
margin: 45px auto 0 auto;
}
}
.limitedScrollBox {
width: 76%;
padding: 0 10rpx;
}
.limitedItem {
width: 200rpx;
text-align: center;
image {
width: 150upx;
height: 200upx;
margin: 15rpx auto 20rpx auto;
}
text {
font-size: 20rpx;
display: block;
}
.biaoti {
font-size: 30rpx;
margin: 10rpx 0 10rpx 0;
font-weight: bold;
}
.xian {
font-size: 32rpx;
color: #bf0c0c;
font-weight: bold;
}
.yuan {
text-decoration: line-through;
color: #c1c1c1;
}
}
}
.goods {
width: 100%;
.goodsItem {
display: inline-block;
width: 46%;
border-radius: 20rpx;
padding: 25rpx 25rpx 20rpx 25rpx;
margin: 0 20rpx 20rpx 20rpx;
background-color: #fff;
border: 1px solid #eee;
.goodsImg {
width: 98%;
height: 380rpx;
border-radius: 10rpx;
}
.goodsContent {
.goodsName {
margin-top: 10rpx;
font-size: 30rpx;
font-weight: bold;
}
.goodsPrice {
font-size: 30rpx;
margin: 5rpx 0 0 3rpx;
color: #bf0c0c;
font-weight: bold;
}
}
}
.goodsItem:nth-child(2n) {
margin-left: 0;
}
}
</style>

324
pages/bookShop/bookShopType.vue Normal file
View File

@@ -0,0 +1,324 @@
<template>
<view>
<z-nav-bar :title="title"></z-nav-bar>
<view class="shop_list">
<view class="sl_tioa" v-for="(item,index) in shopList" @click="onShopJump(item)">
<image :src="item.productImages"></image>
<view class="sl_cont">
<view class="sl_tit">
<text class="bok_name">
{{item.productName}}
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
</text>
</view>
<view class="sl_ric">
￥{{item.price}}
</view>
<view class="sl_del" v-if="shopScreen.type == 'Sale'">
￥{{item.oldprice}}
</view>
<view class="sl_gou" v-if="item.productStock>0" @click.stop="addShopCar(item)">
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
</view>
</view>
<br clear="both">
</view>
<view style="height: 1px;"></view>
</view>
<view>
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
<view style="padding-bottom: 20rpx;">
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
scrollTop: 0,
status: 3,
shopScreen: {
type: '',
page: 1, //当前页码数
limit: 5, //单页数据数量
},
productInfo: {},
totalPage: 0,
totalCount: 0,
shopList: [],
bgiStyle: {
background: '#2ab58833'
},
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#54a966',
},
urList: '',
title: '',
}
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.shopScreen.page < this.totalPage) {
this.shopScreen.page = this.shopScreen.page + 1
setTimeout(() => {
if (this.shopScreen.type == 'Hot') {
this.$http
.post(this.urList + '?page=' + this.shopScreen.page + '&limit=' + this.shopScreen
.limit)
.then(res => {
this.totalPage = res.page.totalPage
this.totalCount = res.page.totalCount
for (let i in res.page.list) {
this.shopList.push(res.page.list[i])
}
});
}
}, 1000)
} else {
this.status = 1
}
},
//第一次加载
onLoad(e) {
this.shopScreen.type = e.type
if (this.shopScreen.type == 'Sale') {
this.urList = 'book/shopseckill/getSeckillProd'
this.title = '限时秒杀'
} else if (this.shopScreen.type == 'Hot') {
this.urList = 'book/shopproduct/appGetList'
this.title = '精选商品'
}
this.getData();
},
//页面显示
onShow() {
// this.getData();
},
// 下拉刷新
onPullDownRefresh() {
this.getData()
uni.stopPullDownRefresh()
},
computed: {
...mapState(['userInfo']),
},
//方法
methods: {
// 获取列表数据
getData() {
console.log(this.urList)
this.shopList = []
if (this.shopScreen.type == 'Hot') {
this.$http
.post(this.urList + '?page=' + this.shopScreen.page + '&limit=' + this.shopScreen.limit)
.then(res => {
this.shopList = res.page.list
this.totalPage = res.page.totalPage
this.status = 3
});
} else if (this.shopScreen.type == 'Sale') {
this.$http
.get(this.urList)
.then(res => {
let arr = []
for (let i in res.list) {
arr.push({
productImages: res.list[i].prodInfo.productImages,
productName: res.list[i].prodInfo.productName,
price: res.list[i].seckillPrice,
oldprice: res.list[i].prodInfo.price,
productId: res.list[i].prodInfo.productId,
})
}
this.shopList = arr
this.status = 3
});
}
},
// 加入购物车
addShopCar(e) {
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
this.cartList = res.cartList
// 统计商品信息
let data = {
"userId": this.userInfo.id,
"productId": e.productId,
"productAmount": 1,
"price": e.price
}
console.log(e)
// 判断列表是否为空
if (this.cartList.length > 0) {
let flag = ''
let shagnpin = {}
// 循环购物车列表
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount = item.productAmount + 1
return true
}
})
if (flag) {
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
} else {
// 加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
} else {
// 购物车列表为空时直接加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
})
},
// 商品内容跳转
onShopJump(e) {
uni.navigateTo({
url: './commodityDetail?id=' + e.productId
});
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.shop_list {
margin: 30rpx;
.sl_tioa {
box-shadow: 0 0px 10px 1px #d3d1d133;
background-color: #fff;
padding: 25rpx;
margin: 0 0 20rpx 0;
border-radius: 15rpx;
position: relative;
image {
width: 160upx;
height: 240upx;
float: left;
margin-right: 20rpx;
}
.sl_cont {
float: left;
.sl_tit {
max-width: 420rpx;
font-size: 30rpx;
}
.sl_ric {
color: #bf0c0c;
font-weight: bold;
margin-top: 50rpx;
}
.sl_del {
text-decoration: line-through;
color: #c1c1c1;
font-size: 30rpx;
margin-left: 10rpx;
}
.sl_gou {
background-color: #fbf6ec;
border-radius: 50rpx;
padding: 5rpx;
position: absolute;
right: 50rpx;
bottom: 40rpx;
}
}
}
}
</style>

355
pages/bookShop/classify.vue Normal file
View File

@@ -0,0 +1,355 @@
<template>
<view class="">
<z-nav-bar title="健康超市"></z-nav-bar>
<!-- 一级分类 -->
<view class="oneBox">
<view class="oneLevel" style="width: unset;">
<u-tabs :scrollable="false" :current="current" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :list="oneLevel"
@click="getTowLevel" lineColor="#54a966"
:activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.2)'}"></u-tabs>
</view>
</view>
<view class="search_box" @click="onPageJump('./searchFor')">
<text class="icon_search"></text>
<text class="prompt">搜索...</text>
</view>
<!-- 二级分类、商品 -->
<view class="twoBox" style="">
<u-sticky>
<u-tabs :scrollable="false" :list="towLevel" @click="getCategoryList($event.catId, $event.index)"></u-tabs>
</u-sticky>
</view>
<view class="classfyBody">
<!-- 二级分类、商品 -->
<view class="towLevel" v-if="towLevel.length > 0">
<view class="towLevelContent" v-if="commodityList.length > 0">
<view class="commodityItem" v-for="(item,index) in commodityList" :key="index"
@click.stop="toDetail(item.productId)">
<view class="box">
<image :src="item.productImages" mode=""></image>
<view class="commodityContent">
<view class="commodityTitle">
{{item.productName}}
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（暂无库存）</span>
</view>
<view class="commodityPrice">
<text class="price" v-if="item.price">￥
<b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span>
</text>
<text class="SoldNumber">已售<span>400</span>件</text>
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
</text> -->
<view class="publierInfo">
<span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else style="text-align: center;font-size: 30rpx;color: #888;margin: 20rpx 0 0 0;flex: 1;">
暂无商品
</view>
</view>
<view v-else style="text-align: center;font-size:30rpx;color: #888;margin: 50rpx 0 0 0;">
暂无分类
</view>
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
highlight: '', // 高亮下标
current: 0,
oneLevel: [],
towLevel: [],
commodityList: [] // 商品列表
}
},
contentButtonClick(e){
console.log(e)
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
// onLoad(e) {
// //获取一级分类
// this.$http
// .post('book/shopcategory/getOneLevel')
// .then(res => {
// this.oneLevel = res.list
// this.current = e.type
// this.getTowLevel(this.oneLevel[e.type])
// })
// },
//页面显示
onShow() {
this.getOneLevel()
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 获取一级分类
getOneLevel() {
this.$http
.post('book/shopcategory/getOneLevel')
.then(res => {
this.oneLevel = res.list
// this.current = e.type
this.getTowLevel(this.oneLevel[0])
})
},
// 点击一级分类
getTowLevel(e) {
this.$http
.post(`book/shopcategory/getTwoLevel?catId=${e.catId}`)
.then(res => {
this.towLevel = res.list
if (this.towLevel == '') {
this.commodityList = []
} else {
this.getCategoryList(res.list[0].catId, 0)
}
})
},
// 点击二级分类
getCategoryList(catId, index) {
/// console.log(e)
this.highlight = index
this.$http
.post('book/shopproduct/appGetCategoryList', {
'catId': catId
})
.then(res => {
this.commodityList = res.list
})
},
// 加入购物车
addShopCar(e) {
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
// 获得用户的购物车列表信息
this.cartList = res.cartList
// 统计商品信息
let data = {
"userId": this.userInfo.id,
"productId": e.productId,
"productAmount": 1,
"price": e.price
}
// 判断列表是否为空
if (this.cartList.length > 0) {
let flag = ''
let shagnpin = {}
// 循环购物车列表
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount = item.productAmount + 1
return true
}
})
if (flag) {
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
}
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
} else {
// 加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
} else {
// 购物车列表为空时直接加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
})
},
// 商品内容跳转
toDetail(id) {
uni.navigateTo({
url: `./commodityDetail?id=${id}`
})
}
}
}
</script>
<style lang="scss" scoped>
.publierInfo{display: inline-block;background-color: #f1f1f1; flex-direction: row; border-radius:10px; vertical-align: middle; padding: 0 12rpx; line-height: 32rpx;}
.c999{color: #999;}
.f24{font-size: 24rpx;}
.search_box {
width: 90%;
height: 64upx;
background-color: #fff;
border-radius: 32upx;
display: flex;
align-items: center;
padding: 0upx 40upx;
position: relative;
margin-left: -46%;
left: 50%;
box-shadow: 0 0px 10px 1px #54a96633;
.prompt {
color: #cccccc;
}
.icon_search {
background-image: url('@/static/icon/map_ic_search.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 29upx;
height: 28upx;
margin-right: 20upx;
}
}
.oneBox{
width: 30%; margin: 10rpx auto;
.oneLevel {
}
}
.twoBox{width: 100%;}
.classfyBody {
margin: 5rpx auto;
// width: 100%;
height: 100%;
.towLevel {
width: 100%;
height: 100%;
display: flex;
.towLevelTitle {
width: 28%;
height: auto;
text-align: center;
.titleItem {
font-size: 35rpx;
padding: 20rpx 10rpx;
}
.active {
background-color: #fff;
border-left: solid 10rpx #eba00b;
font-weight: bold;
}
}
.towLevelContent {
display: flex;flex-wrap: wrap;
padding: 10rpx 20rpx;
width: 100%;
.commodityItem {
width: 50%;
// background-color: #fff;
padding: 10rpx;
.box{background-color: #fff; padding: 10rpx; border-radius: 20rpx !important; overflow: hidden; box-shadow: 0 0px 10px 1px #54a96633;}
.commodityTitle{font-size: 28rpx; margin:10rpx 0;}
image {
width: 100%; border-radius: 10rpx;
height: 300rpx;
margin-right: 20rpx;
}
.commodityContent {
flex: 1;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
.commodityPrice {
width: 100%;
position: relative;
margin: 0 0 20rpx 0;
.price {
vertical-align: middle;
color: #ffa200;
.priceTag{flex-direction:row;
color: #f56c6c;
display: inline-block; zoom:.7; margin-left: 6rpx; margin-bottom: 6px;}
}
.SoldNumber{font-size: 24rpx; color: #999; float: right; margin-top: 16rpx;}
.icon {
background-color: #fbf6ec;
border-radius: 50rpx;
padding: 5rpx;
position: absolute;
right: 0;
bottom: -20rpx;
}
}
}
}
}
}
}
</style>

72
pages/bookShop/classifyAll.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<view>
<z-nav-bar title="全部分类"></z-nav-bar>
<view class="oneLevel">
<view class="oneItem" v-for="(item,index) in oneLevel" @click="getTowLevel(index)">
<image :src="item.icon"></image>
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
oneLevel: [],
}
},
onLoad(e) {
this.$http
.post('book/shopcategory/getOneLevel')
.then(res => {
let arr = []
for (let i in res.list) {
arr.push({
icon: "../../static/icon/shop_bar_" + (Number(i) + Number(1)) + ".png",
name: res.list[i].name,
catId: res.list[i].catId
})
}
this.oneLevel = arr
})
},
methods: {
// 点击分类跳转
getTowLevel(e) {
uni.navigateTo({
url: `./classify?type=${e}`
})
},
}
}
</script>
<style lang="scss" scoped>
.oneLevel {
margin: 10rpx 0 0 0;
.oneItem {
display: inline-block;
width: 20%;
text-align: center;
margin: 30rpx 0 0 0;
image {
width: 100rpx;
height: 100rpx;
margin: 0 auto;
}
text {
font-size: 30rpx;
}
}
}
</style>

436
pages/bookShop/commodityDetail.vue Normal file
View File

@@ -0,0 +1,436 @@
<template>
<view class="">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="商品详情" bgColor="red"></z-nav-bar>
</view>
<view class="swiperBox">
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
style="width: 100%;height: 100%;">
<swiper-item v-for="(item,index) in swiperlist" :key="index" style="width: 100%;height: 100%;">
<image :src="item" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
</swiper-item>
</swiper>
</view>
<view class="commodityContent">
<view class="commodityPrice">
<span>￥</span><em>{{productInfo.price}}</em>
<span class="oldPrice ">原价￥45</span>
</view>
<view class="commodityyName">
{{productInfo.productName}}
<span v-if="productInfo.productStock==0" style="color: #aaa;font-size:26rpx;">（无货）</span>
<view><text class="SoldNumber">已售<span>{{productInfo.sumSales}}</span>件</text></view>
</view>
<view class="contentButton">
<u-tabs :scrollable="false" :list="contentButtonList" @click="contentButtonClick"></u-tabs>
</view>
<!-- 详情 + 评价 -->
<view class="bookInfo">
<u-row customStyle="margin-bottom: 10px">
<u-col span="6"><span>书名：{{productInfo.productName}}</span></u-col>
<u-col span="6"><span>作者：{{productInfo.author}}</span></u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="6"><span>出版社：{{productInfo.publisher}}</span></u-col>
<u-col span="6"><span>出版时间：{{ productInfo.pubDate | formatDate }}</span></u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="6"><span>开本：{{productInfo.format}}</span></u-col>
<u-col span="6"><span>页数：{{productInfo.pageNum}}</span></u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="6"><span>内文用纸材质：{{productInfo.quality}}</span></u-col>
</u-row>
</u-row>
</view>
<!-- <view class="commodityIntroduce" v-html="productInfo.productDetails"> -->
<view class="commodityIntroduce">
<view v-if="productInfo.productDetails" >
<rich-text v-if="productInfo.productDetails" class="xiangqing" :nodes="productInfo.productDetails|formatRichText"></rich-text>
</view>
</view>
<view style="height: 120rpx;"></view>
</view>
<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
import loginVue from '../user/login.vue';
export default {
data() {
return {
options: [{
icon: 'cart',
text: '购物车'
}],
buttonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}
],
contentButtonList: [{
name: '商品详情'
}
],
// 轮播图数据
swiperlist: [],
// 商品详情数据
productInfo: {},
productAmount: 1, // 商品数量
cartList: [], // 购物车列表
}
},
onLoad(e) {
// 获取商品详情
uni.showLoading({
title: '加载中'
});
this.$http
.post('/book/shopproduct/info/' + e.id)
.then(res => {
this.productInfo = res.shopProduct
if (this.productInfo.productImageList == null || this.productInfo.productImageList == '') {
this.swiperlist.push('../../static/icon/home_ban_1.jpg')
} else {
let imgList = this.productInfo.productImageList.split(",")
// if(this.productInfo.productDetails != null){
// let info = this.formatRichText(this.productInfo.productDetails)
// }
// this.productInfo.productDetails = info
for (var i = 0; i < imgList.length; i++) {
this.swiperlist.push(imgList[i])
}
}
uni.hideLoading();
})
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 点击购物车
onClick(e) {
console.log(e.content.text)
uni.switchTab({
url: '../peanut/shopping'
});
},
// 点击按钮组间
buttonClick(e) {
console.log(e)
if(e.index == 0){
// 点击的是加入购物车
this.addCart()
}else{
// 点击的是立即购买
this.goPurse()
}
},
// 加入购物车
addCart() {
if (this.productInfo.productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none",
duration: 1000,
});
} else {
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
this.cartList = res.cartList
this.isAdd()
})
}
},
isAdd() {
// 统计商品信息
let data = {
"userId": this.userInfo.id,
"productId": this.productInfo.productId,
"productAmount": this.productAmount,
"price": this.productInfo.price
}
// 判断列表是否为空
if (this.cartList.length > 0) {
let flag = ''
let shagnpin = {}
// 循环购物车列表
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount = item.productAmount + 1
return true
}
})
if (flag) {
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
} else {
// 加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
} else {
// 购物车列表为空时直接加入购物车
$http.request({
url: "book/ordercart/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title: '加入购物车成功',
duration: 1000,
});
}
})
}
},
// 购买下单
goPurse() {
if (this.productInfo.productStock == 0) {
uni.showToast({
title: '商品库存不足',
icon: "none",
duration: 1000,
});
} else {
uni.navigateTo({
url: '../bookShop/settlement?type=2&list=' + this.productInfo.productId
});
}
},
formatRichText (html) { //控制小程序中图片大小
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
// 去购物车
goCard() {
uni.switchTab({
url: '../peanut/shopping'
});
},
},
filters: {/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText (html) { //控制小程序中图片大小
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
// 时间格式化
formatDate(date){
console.log(date)
let newDate = new Date(date);
let year = newDate.getFullYear();
let month = newDate.getMonth().toString().padStart(2,0);
let day = newDate.getDay().toString().padStart(2,0);
return year + '-' + month + '-' + day;
}
}
}
</script>
<style lang="scss" scoped>
.xiangqing {
overflow: hidden;
img{display: block; max-width: 100%;}
}
.goods_nav {
z-index: 1;
position: fixed;
bottom: 0;
width: 100%;
}
.SoldNumber {
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
}
.bookInfo {
padding: 20px 10px;
line-height: 30rpx;
background-color: #fff;
font-size: 26rpx;
color: #555;
border-radius: 20rpx 20rpx 0 0
}
.header {
position: fixed;
top: 0%;
left: 0%;
z-index: 999;
}
.contentButton {
margin: 10px 0;
}
.swiperBox {
width: 100%;
height: 375px;
margin-top: 50px;
}
.commodityContent {
margin: 30rpx 20rpx 10rpx 20rpx;
height: auto;
.commodityPrice {
background-image: linear-gradient(0deg, #f7fffc 0%, #def0ea 100%);
border-top: 1px solid #fff;
// background-color: #f7faf9;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
color: #ffa200;
padding: 20rpx 20rpx 40rpx 20rpx;
em {
font-size: 74rpx;
font-style: normal;
}
.oldPrice {
margin-left: 10rpx;
font-size: 32rpx;
color: #999;
}
}
.commodityyName {
margin-top: -20rpx;
padding: 30rpx 20rpx 40rpx 20rpx;
font-size: 40rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
background-color: #fff;
}
.commodityIntroduce {
font-size: 30rpx;
background-color: #fff;
padding: 0 20rpx 30rpx 20rpx;
}
}
.footer {
width: 100%;
height: 100rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0%;
.shopcard {
margin: 0 0 0 30rpx;
text-align: center;
font-size: 20rpx;
color: #eba00b;
}
.operate {
display: flex;
view {
font-size: 32rpx;
font-weight: 700;
color: #fff;
padding: 32rpx 40rpx;
letter-spacing: 0.8px;
}
.addShopCar {
background-color: #eba00b;
}
.goBuy {
background-color: #cf3906;
}
}
}
</style>

278
pages/bookShop/commoditySearch.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<view>
<z-nav-bar>
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
@custom='souBook' @clear="clear"></u-search>
</z-nav-bar>
<view class="sear_ch" v-if="this.show==0">
<view class="sear_ch_tit">
历史搜索
</view>
<view class="sear_ch_tag">
<text v-for="item in historyList" @click="serkeyWord(item)">{{item}}</text>
</view>
</view>
<view class="sear_class" v-if="this.show==1">
<view class="sc_xuan">
<view class="sc_con" v-for="(item,index) in classFen" @click="FenBook(item)"
:class="bookScreen.type == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
</view>
<view class="sc_xuan">
<view class="sc_con" v-for="(item,index) in classMian" @click="MianBook(item)"
:class="bookScreen.is_charge == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
</view>
</view>
<view class="sear_list" v-if="this.show==1">
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
</view>
<view style="height: 1px;"></view>
<view>
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
<view v-if="this.show==1&&this.bookList==''">
<u-divider text="暂无数据"></u-divider>
</view>
<view style="padding-bottom: 20rpx;">
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
totalPage: 0,
status: 3,
show: 0,
bookList: [],
historyList: [],
bookScreen: {
authorName: '', //作者
publisherName: '', //出版社
type: '', //电子书类型
bookName: '', //关键词
is_charge: 1, //是否收费（0收费1免费）
state: 1,
page: 1, //当前页码数
limit: 10, //单页数据数量
},
classFen: [{
sort: '全部',
id: ''
}, {
sort: '医学',
id: 1
}, {
sort: '国学',
id: 2
}, {
sort: '文学',
id: 3
}, {
sort: '古籍',
id: 4
}],
classMian: [{
sort: '免费',
id: 1
}, {
sort: 'VIP',
id: 0
}],
};
},
// 返回顶部
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
// 下拉刷新
onReachBottom() {
this.status = 0
if (this.bookScreen.page < this.totalPage) {
this.bookScreen.page = this.bookScreen.page + 1
setTimeout(() => {
this.$http
.post('book/book/list', this.bookScreen)
.then(res => {
this.totalPage = res.page.totalPage
for (let i in res.page.list) {
this.bookList.push(res.page.list[i])
}
});
}, 1000)
} else {
this.status = 1
}
},
//第一次加载
onLoad(e) {
},
//页面显示
onShow() {
this.getHistory()
},
//方法
methods: {
// 获取缓存
getHistory() {
this.historyList = uni.getStorageSync('hisRecords')
if (this.historyList.length > 10) {
this.historyList.splice(10, this.historyList.length)
uni.setStorageSync('hisRecords', this.historyList);
}
},
// 获取列表数据
getData() {
this.$http
.post('book/book/list', this.bookScreen)
.then(res => {
this.bookList = res.page.list
this.totalPage = res.page.totalPage
this.status = 3
this.show = 1
});
},
// 清空
clear() {
this.show = 0
this.getHistory()
},
// 搜索
souBook() {
if (this.bookScreen.bookName == '') {
uni.showToast({
icon: 'none',
title: '请输入关键字'
})
return
}
this.getData();
let ArryList = []
if (uni.getStorageSync('hisRecords') == '') {
ArryList.push(this.bookScreen.bookName)
uni.setStorageSync('hisRecords', ArryList);
} else {
let value = uni.getStorageSync('hisRecords')
value.unshift(this.bookScreen.bookName)
uni.setStorageSync('hisRecords', value);
}
},
// 点击历史搜索
serkeyWord(e) {
this.bookScreen.bookName = e
this.getData();
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.sear_ch {
margin: 50rpx 40rpx 0 40rpx;
.sear_ch_tit {
font-weight: bold;
font-size: 30rpx;
margin: 40rpx 0 0 0;
}
.sear_ch_tag {
margin: 20rpx 0 0 0;
text {
background-color: #eee;
font-size: 24rpx;
border-radius: 50rpx;
display: inline-block;
margin: 0 30rpx 20rpx 0;
padding: 10rpx 25rpx;
}
}
}
.sear_class {
margin: 20rpx 30rpx 60rpx 30rpx;
.sc_xuan {
margin-bottom: 10rpx;
.sc_con {
display: inline-block;
font-size: 28rpx;
margin-right: 20rpx;
border-radius: 20rpx;
padding: 6rpx 12rpx;
}
.sc_con_style {
color: #27b386;
background-color: #2ab58833;
}
}
}
.sear_list {
margin: 50rpx 30rpx 0 30rpx;
.bl_tioa {
box-shadow: 0 0px 10px 1px #d3d1d133;
background-color: #fff;
position: relative;
padding: 0 25upx 10upx 220upx;
margin: 0 0 60rpx 0;
border-radius: 15rpx;
min-height: 250rpx;
view {
text {
color: #9b9b9b;
font-size: 24rpx;
line-height: 36rpx;
}
.bok_name {
font-weight: bold;
color: #333;
font-size: 28rpx;
}
}
image {
position: absolute;
left: 30upx;
top: -20upx;
width: 160upx;
height: 240upx;
}
}
}
</style>

173
pages/bookShop/deliverDetail.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<view class="">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="物流详情" bgColor="red"></z-nav-bar>
<u-tabs active-color="#2979ff" inactive-color="#606266" bar-height="6" bar-width="40" v-if="deliverList"
name="name" :list="deliverList" :is-scroll="false" :current="current" @change="tabchange"></u-tabs>
<view class="deliverCntent">
<view class="" v-for="(list, index1) in deliverDetails" :key="index1">
<view v-show="index1 == current">
<view class="kuaidiItem">{{list.ShipperName}}{{list.LogisticCode}}</view>
<view class="item" v-for="(item, index) in list.Traces">
<view class="flexbox">
<view class="img_icon "></view>
<view class="wuliu">
<view class="time">{{item.AcceptTime}}</view>
<view class="content">{{item.AcceptStation}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- <u-loading color="red" :show="loading"></u-loading> -->
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
// import Loading from '../../'
import {
mapState
} from 'vuex';
import loginVue from '../user/login.vue';
export default {
data() {
return {
loading: false,
orderId: null,
deliverDetails: [{
Traces: []
}],
current: 0,
deliverList: [{
name: null
}],
deliverDetailsLength: null
}
},
onLoad(e) {
this.orderId = e.objId
},
onShow() {
this.getdeliverDetails()
},
computed: {
...mapState(['userInfo']),
},
methods: {
tabchange(item) {
console.log(item)
this.current = item.index
},
// 获取物流
getdeliverDetails() {
uni.showLoading()
this.$http
.post(`/book/buyorder/queryFMS?orderId=${this.orderId}`)
.then(res => {
// console.log(res, '物流信息')
if (res && res.code === 0) {
uni.hideLoading()
this.deliverDetails = res.rntStr
//console.log(res.rntStr)
res.rntStr.forEach((item, index) => {
item.Traces = item.Traces.reverse()
// console.log(item)
this.deliverList[index].name = item.ShipperName
})
}
})
},
}
}
</script>
<style>
.item:first-child::before {
background-color: #6fca78 !important
}
</style>
<style lang="scss" scoped>
.u-tabs {
background: #fff
}
.xiangqing {
overflow: hidden;
img {
display: block;
max-width: 100%;
}
}
.kuaidiItem {
padding: 10px;
color: #666
}
.deliverCntent {
.img_icon {
border-left: 2px solid #eee;
}
line-height:20px;
padding: 32rpx;
position: relative;
background-color: #fff;
margin-bottom: 20rpx;
border-top: 1px solid #eee;
font-size: 24rpx;
color:#777;
.item {
padding-left: 10px;
position: relative;
}
.item:before {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #eee;
left: 6px;
top: 0;
content: "";
position: absolute;
}
.time {
color: #888;
font-size: 14px;
margin-bottom: 5px
}
.content {
padding-bottom: 14px;
}
}
.flexbox {
display: flex;
}
.img_icon {
padding-right: 5px;
}
.moreBtnF {
align-items: center;
padding: 30rpx;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
background-color: rgba(255, 255, 255, .9);
}
</style>

459
pages/bookShop/orderLCont.vue Normal file
View File

@@ -0,0 +1,459 @@
<template>
<view class="">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="titleStat"></z-nav-bar>
<view class="deliverCntent" v-if="orderType == 2">
<view v-if="deliverDetails">
<view v-for="(item, index) in deliverDetails[0].Traces">
<view class="flexbox" v-if="index == 0">
<view class="img_icon "><img width="20px" src="../../static/icon/icon-truck.svg" alt=""></view>
<view class="wuliu">
<view class="content">{{item.AcceptStation}}</view>
<view class="time">{{item.AcceptTime}}</view>
</view>
</view>
</view>
</view>
<view class="flexbox moreBtnF" @click="onPageJump(orderID)"><span class="moreBtn"> > </span></view>
</view>
<view class="adDefault" v-if="orderContet.products!=''">
<view class="defalTop">
<text class="userName">
{{orderContet.shippingUser}}
</text>
<text class="userTel">
{{orderContet.userPhone}}
</text>
</view>
<view class="defalBottom">
<text class="userAddress">
{{orderContet.province}} {{orderContet.city}} {{orderContet.district}} {{orderContet.address}}
</text>
</view>
<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
</view>
<view class="orderList">
<view class="orderItem">
<view class="orderContent" v-for="(item,index) in orderContet.products" :key="index"
@click="goDetail(item.productId)" v-if="orderContet.products!=''">
<image :src="item.image" mode=""></image>
<view class="itemJian">
<view class="orderTitle">
<text>{{item.productName}}</text>
</view>
<view class="orderPrice">
￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
<text style="color: #bbbbbb;">{{item.quantity}}</text>
</view>
<br clear="both">
</view>
<br clear="both">
</view>
<view class="orderContent" v-if="orderContet.products==''">
<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
<view class="itemJian">
<view class="orderTitle">
<text>充值</text>
</view>
<view class="orderPrice">
￥<text style="font-weight: bold;">{{orderContet.realMoney}}</text>
</view>
<br clear="both">
</view>
<br clear="both">
</view>
<view class="orderallpri">
<span style="color: #666;margin-right: 10rpx;float: left;">商品总价 : </span>
<span>￥</span>{{orderContet.orderMoney}}
</view>
<view class="orderReal">
<span style="color: #666;margin-right: 10rpx;float: left;">运费 : </span>
<span>￥</span>{{orderContet.shippingMoney}}
</view>
<view class="orderReal">
<span style="color: #666;margin-right: 10rpx;float: left;">优惠券 : </span>
<b style="color: #dd3c0c;"><span>-￥</span>{{orderContet.districtMoney}}</b>
</view>
<view class="orderReal">
<span style="color: #666;margin-right: 10rpx;float: left;">实付款 : </span>
<b style="color: #dd3c0c;"><span>￥</span>{{orderContet.realMoney}}</b>
</view>
<view class="orderYunf">
<span style="color: #666;margin-right: 10rpx;float: left;">订单编号 : </span>
<text style="font-size: 24rpx;color: #666;">{{orderContet.orderSn}}</text>
</view>
<view class="orderReal">
<span style="color: #666;margin-right: 10rpx;float: left;">创建时间 : </span>
<text style="font-size: 24rpx;color: #666;">{{orderContet.createTime}}</text>
</view>
<view class="orderOper">
<view class="opFix opShou" @click="OverOrder" v-if="orderContet.orderStatus==2">确认收货</view>
<view v-if="orderContet.orderStatus==0">
<view class="opFix" @click="canceOrder">取消订单</view>
<view class="opCan" @click="goPay">去支付</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
setPay,
setPayAssign
} from '@/config/utils';
import {
mapState
} from 'vuex';
export default {
data() {
return {
logisticsData: [], // 快递信息列表
titleStat: '',
orderID: 0,
orderType: '',
orderContet: {},
deliverDetails: [{
Traces: []
}], // 物流详情信息全部
deliverDetailsLength: null
}
},
onLoad(e) {
this.orderID = e.orderId
this.orderType = e.orderType
},
onShow() {
this.getOrderList()
},
computed: {
...mapState(['userInfo']),
},
methods: {
onPageJump(item) {
uni.navigateTo({
url: "./deliverDetail?objId=" + item
})
},
OverOrder() { // 确认收货
uni.showModal({
title: '提示',
content: '确认收货？',
success: res => {
let data = {
orderId: this.orderID,
orderStatus: '3'
}
if (res.confirm) {
uni.showLoading()
$http.request({
url: "book/buyorder/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.hideLoading()
uni.showToast({
title: '收货成功',
icon: 'success',
duration: 1000
})
this.getOrderList()
}
})
} else if (res.cancel) {}
}
});
},
// 切换订单状态
orderTabCLi(e) {
this.orderListTab = e
},
// 获取订单列表
getOrderList() {
this.$http
.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
.then(res => {
this.orderContet = res.buyOrder
if (this.orderContet.orderStatus == 0) {
this.titleStat = '待支付'
} else if (this.orderContet.orderStatus == 1) {
this.titleStat = '待发货'
} else if (this.orderContet.orderStatus == 2) {
this.titleStat = '待收货'
} else if (this.orderContet.orderStatus == 3) {
this.titleStat = '已完成'
}
if (this.orderType == 2) {
this.getdeliverDetails()
}
})
},
// 获取物流
getdeliverDetails() {
this.$http
.post(`/book/buyorder/queryFMS?orderId=${this.orderID}`)
.then(res => {
if (res && res.code === 0) {
// console.log(res, '物流信息')
res.rntStr.forEach(item => {
item.Traces = item.Traces.reverse()
})
this.deliverDetails = res.rntStr
this.deliverDetailsLength = this.deliverDetails[0].Traces.length
} else {
}
})
},
// 取消订单
canceOrder() {
uni.showModal({
title: '提示',
content: '确定要取消订单吗？',
confirmText: "取消订单",
cancelText: "考虑一下",
confirmColor: '#c96713',
cancelColor: '#555',
success: res => {
if (res.confirm) {
this.$http
.post('book/buyorder/appDelete?orderId=' + this.orderContet.orderId)
.then(res => {
uni.showToast({
icon: 'none',
title: '取消订单成功'
})
uni.navigateTo({
url: './orderList'
});
})
}
}
});
},
// 支付
goPay() {
setPay({
typePay: 'alipay',
subject: 'order',
totalAmount: this.orderContet.realMoney,
type: 2,
relevanceoid: this.orderContet.orderSn,
customerId: this.userInfo.id,
}, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
this.getOrderList()
})
},
// 商品内容跳转
goDetail(id) {
uni.navigateTo({
url: './commodityDetail?id=' + id
});
},
}
}
</script>
<style lang="scss" scoped>
.opShou {
border-color: $uni-color-success !important;
}
.adDefault {
padding: 30rpx 50rpx 30rpx 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 2px dashed #b2e9d7;
margin: 0 0 5rpx 0;
position: relative;
.defalTop {
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
}
.defalBottom {
.userAddress {
font-size: 32rpx;
line-height: 40rpx;
}
}
.defalLeft {
position: absolute;
left: 30rpx;
top: 55rpx;
}
}
.orderList {
padding: 20rpx;
.orderItem {
padding: 30rpx 10rpx 30rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
margin-bottom: 30rpx;
.orderContent {
margin-bottom: 20rpx;
image {
width: 150rpx;
height: 180rpx;
margin-right: 20rpx;
float: left;
}
.itemJian {
float: left;
width: 470rpx;
.orderTitle {
font-weight: bold;
font-size: 30rpx;
margin: 0 0 20rpx 0;
float: left;
width: 410rpx;
}
.orderPrice {
font-size: 28rpx;
float: right;
width: 60rpx;
text-align: right;
line-height: 40rpx;
}
}
}
.orderallpri {
text-align: right;
border-top: 1px solid #eee;
margin: 40rpx 20rpx 0 0;
padding: 30rpx 0 0 0;
font-size: 28rpx;
}
.orderReal {
text-align: right;
font-size: 28rpx;
margin: 5rpx 20rpx 0 0;
padding: 28rpx 0 0 0;
}
.orderYunf {
text-align: right;
border-top: 1px solid #eee;
margin: 35rpx 20rpx 0 0;
padding: 30rpx 0 0 0;
font-size: 28rpx;
}
.orderOper {
text-align: right;
margin: 40rpx 20rpx 0 0;
view {
margin-left: 20rpx;
padding: 10rpx 0;
display: inline-block;
width: 160rpx;
font-size: 25rpx;
text-align: center;
}
.opFix {
color: #555;
border: 1px solid #ddd;
border-radius: 30rpx;
}
.opCan {
color: #c96713;
border: 1px solid #eba00b;
border-radius: 30rpx;
}
}
}
}
.deliverCntent {
padding: 32rpx;
position: relative;
background-color: #fff;
margin-bottom: 20rpx;
border-top: 1px solid #eee;
font-size: 28rpx;
}
.flexbox {
display: flex;
}
.img_icon {
padding-right: 5px;
}
.moreBtnF {
align-items: center;
padding: 30rpx;
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
background-color: rgba(255, 255, 255, .9);
// background: -webkit-linear-gradient(left, rgba(255,255,255,1)0%,rgba(255,255,255,0.5)66%, rgba(255,255,255,255)99%);/* Safari、Chrome */
// background:linear-gradient(rgba(255,255,255,255),rgba(255,255,255,1));/* 默认渐变位置从上往下 */
}
.wuliu {
.time {
color: #888;
}
.moreBtn {
display: inline-block;
width: 50px;
}
}
</style>

312
pages/bookShop/orderList.vue Normal file
View File

@@ -0,0 +1,312 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="我的订单"></z-nav-bar>
<view class="orderTabs">
<view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)"
:class="orderListTab==item.value?'ordStyle':''">{{item.name}}</view>
</view>
<view class="orderList">
<view class="orderItem" v-for="(ifex,inten) in orderList">
<view class="orderState" v-if="ifex.orderStatus==0">待支付</view>
<view class="orderState" v-if="ifex.orderStatus==1">待发货</view>
<view class="orderState" v-if="ifex.orderStatus==2">待收货</view>
<view class="orderState" v-if="ifex.orderStatus==3">已完成</view>
<view class="orderContent" :key="index" v-if="ifex.orderType=='order'"
v-for="(item,index) in ifex.products" @click="goOrdiCont(ifex)">
<image :src="item.image" mode=""></image>
<view class="itemJian">
<view class="orderTitle">
<text>{{item.productName}}</text>
</view>
<view class="orderPrice">
￥<text style="font-weight: bold;">{{item.productPrice}}</text><br>
<text style="color: #bbbbbb;font-size: 20rpx;margin-right: 10rpx;">X</text>
<text style="color: #bbbbbb;">{{item.quantity}}</text>
</view>
<br clear="both">
</view>
<br clear="both">
</view>
<view class="orderContent" v-if="ifex.orderType=='point'" @click="goOrdiCont(ifex)">
<image src="../../static/icon/oder_chong.png" mode="" style="height: 150rpx;"></image>
<view class="itemJian">
<view class="orderTitle">
<text>花生币充值</text>
</view>
<view class="orderPrice">
￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
</view>
<br clear="both">
</view>
<br clear="both">
</view>
<view class="orderContent" v-if="ifex.orderType=='vip'" @click="goOrdiCont(ifex)">
<image src="../../static/icon/oder_vip.png" mode="" style="height: 150rpx;"></image>
<view class="itemJian">
<view class="orderTitle">
<text>会员充值</text>
</view>
<view class="orderPrice">
￥<text style="font-weight: bold;">{{ifex.realMoney}}</text>
</view>
<br clear="both">
</view>
<br clear="both">
</view>
<view class="orderReal">
<span style="color: #666; float: left; font-size: 12px;">下单时间：{{ifex.createTime}}</span>
<span style="color: #666;margin-right: 10rpx;">实付款 : </span>
<span>￥</span>{{ifex.realMoney}}
</view>
<view class="orderOper" v-if="ifex.orderStatus==0">
<view class="opFix" @click="canceOrder(ifex)">取消订单</view>
<view class="opCan" @click="goPay(ifex)">去支付</view>
</view>
</view>
</view>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
setPay,
setPayAssign
} from '@/config/utils';
import {
mapState
} from 'vuex';
export default {
data() {
return {
orderTabs: [{
name: '全部',
value: 9
}, {
name: '待支付',
value: 0
}, {
name: '待发货',
value: 1
}, {
name: '待收货',
value: 2
}, {
name: '已完成',
value: 3
}],
orderListTab: 9,
orderList: [],
}
},
onShow() {
this.getOrderList()
},
computed: {
...mapState(['userInfo']),
},
// 下拉刷新
onPullDownRefresh() {
this.getOrderList()
uni.stopPullDownRefresh()
},
methods: {
// 切换订单状态
orderTabCLi(e) {
this.orderListTab = e
this.getOrderList()
},
// 获取订单列表
getOrderList() {
this.$http
.post(`book/buyorder/appUserGetlist?userId=${this.userInfo.id}&orderStatus=${this.orderListTab}`)
.then(res => {
this.orderList = res.page.list
})
},
// 订单详情
goOrdiCont(e) {
uni.navigateTo({
url: './orderLCont?orderId=' + e.orderId + '&orderType=' + e.orderStatus
});
},
// 取消订单
canceOrder(e) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗？',
confirmText: "取消订单",
cancelText: "考虑一下",
confirmColor: '#c96713',
cancelColor: '#555',
success: res => {
if (res.confirm) {
this.$http
.post(`book/buyorder/appDelete?orderId=${e.orderId}`)
.then(res => {
uni.showToast({
icon: 'none',
title: '取消订单成功'
})
this.getOrderList()
})
}
}
});
},
// 支付
goPay(payItem) {
setPay({
typePay: 'alipay',
subject: 'order',
totalAmount: payItem.realMoney,
type: 2,
relevanceoid: payItem.orderSn,
customerId: this.userInfo.id,
}, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
this.getOrderList()
})
}
}
}
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.orderTabs {
margin: 70rpx 0 0 0;
width: 100%;
padding: 0 3% 3% 3%;
position: fixed;
top: 80rpx;
background-color: #f7faf9;
z-index: 100;
view {
display: inline-block;
padding: 0 0 20rpx 0;
margin: 40rpx 0 15rpx 0;
width: 20%;
text-align: center;
font-size: 30rpx;
}
.ordStyle {
border-bottom: 5rpx solid #54a966;
color: #54a966;
font-weight: bold;
}
}
.orderList {
padding: 20rpx;
margin-top: 130rpx;
.orderItem {
padding: 30rpx 10rpx 30rpx 30rpx;
background-color: #fff;
border-radius: 30rpx;
margin-bottom: 30rpx;
.orderState {
text-align: right;
font-size: 30rpx;
margin: 0 20rpx 30rpx 0;
font-weight: bold;
color: #d70808;
}
.orderContent {
margin-bottom: 20rpx;
image {
width: 150rpx;
height: 180rpx;
margin-right: 20rpx;
float: left;
}
.itemJian {
float: left;
width: 470rpx;
.orderTitle {
font-weight: bold;
font-size: 30rpx;
margin: 0 0 20rpx 0;
float: left;
width: 410rpx;
}
.orderPrice {
font-size: 28rpx;
float: right;
width: 60rpx;
text-align: right;
line-height: 40rpx;
}
}
}
.orderReal {
border-top: 1px solid #eee;
text-align: right;
font-size: 30rpx;
margin: 30rpx 20rpx 0 0;
padding: 30rpx 0 0 0;
}
.orderOper {
text-align: right;
margin: 30rpx 20rpx 0 0;
view {
margin-left: 20rpx;
padding: 10rpx 0;
display: inline-block;
width: 150rpx;
font-size: 25rpx;
text-align: center;
}
.opFix {
color: #555;
border: 1px solid #ddd;
border-radius: 30rpx;
}
.opCan {
color: #c96713;
border: 1px solid #eba00b;
border-radius: 30rpx;
}
}
}
}
</style>

875
pages/bookShop/settlement.vue Normal file
View File

@@ -0,0 +1,875 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="商品结算"></z-nav-bar>
<view v-if="adressMoRen.username==undefined" class="addShouhuo" @click="toAddress()">
<u-icon name="plus" size="20" style="display: inline-block;margin-right: 10rpx;"></u-icon>
请添加收货地址
</view>
<view class="adDefault" @click="dizhiShow = true" v-if="adressMoRen.username!=undefined">
<view class="defalTop">
<text class="userName">
{{adressMoRen.username}}
</text>
<text class="userTel">
{{adressMoRen.userphone}}
</text>
<text class="userMoren" v-if="adressMoRen.isdefault==1">
默认
</text>
</view>
<view class="defalBottom">
<text class="userAddress">
{{adressMoRen.areaidpathtext}} {{adressMoRen.useraddress}}
</text>
</view>
<u-icon name="map" color="#aaa" size="25" class="defalLeft"></u-icon>
<u-icon name="arrow-right" color="#aaa" size="22" class="defalRight"></u-icon>
</view>
<view class="cartItem" v-for="(item,index) in cartList" :key="index">
<view class="cartContent">
<image :src="item.image" mode=""></image>
<view class="itemCenter">
<view class="cartTitle">
<text>{{item.productName}}</text>
</view>
<view class="itemPrice">
<text>￥{{item.price*item.productAmount}}</text>
<u-number-box v-model="item.productAmount" @change="valChange($event, item)" :input-width="50"
:input-height="20" :min="1" :max="item.productStock" integer @overlimit='overlimit'></u-number-box>
</view>
</view>
</view>
</view>
<view class="youhui_quan">
<view class="yq_alljia">
商品总价
<text>￥{{totalPrice}}</text>
</view>
<view class="yq_youhui" @click="youhuiShow = true">
<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
优惠券
<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
<text class="dagnqian"
v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}张</text>
<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
style="background-color: #999;">暂无优惠券</text>
<text class="dagnqian" v-if="youhuiContent.id!=undefined">
- ￥{{youhuiContent.coupons.couponAmount}}</text>
</view>
<view class="yq_yunfei">
<u-icon name="car-fill" color="#e0880c" size="18" class="yqLeft"></u-icon>
运费
<text>￥{{farePrice}}</text>
</view>
</view>
<view class="zhif_fangsh">
<view class="zhif_radio">
<u-radio-group v-model="payType">
<view style="width: 100%;">
<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="zhif_xuanx">
<image :src="item.img"></image>
{{item.title}}
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
style="float: right;margin-top: 5rpx;"></u-radio>
</view>
</view>
</u-radio-group>
</view>
</view>
<view class="footer">
<view class="commodityPrice">
<span style="color: #666;margin-right: 10rpx; font-size: 15px;">实付款: </span>
<span>￥</span>{{realPrice}}
</view>
<view class="operate" @click="goBuyJie">
<view class="goBuy">
立即支付
</view>
</view>
</view>
<!-- 地址弹出 -->
<u-popup :show="dizhiShow" :round="10" @close="dizhiShow=false">
<view class="tanchu">
<view class="dp_title">请选择地址</view>
<view class="dp_add" @click="toAddress()">
<u-icon name="plus" color="#fff" size="12"></u-icon>
添加地址
</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view :class="adressMoRIndex == index ? 'addressItem addItem_style' : 'addressItem'"
v-for="(item,index) in addressList" :key="index" @click="choseDizhi(index)">
<view class="addrContent">
<view class="addrContentTop">
<view class="userName">
{{item.username}}
</view>
<view class="userTel">
{{item.userphone}}
</view>
<view class="userMoren" v-if="item.isdefault==1">
默认
</view>
<u-icon name="checkmark-circle-fill" class="chooseCheck" size="20" color="#fd6004"
v-if="adressMoRIndex == index"></u-icon>
</view>
<view class="addrContentBottom">
<view class="userAddress">
{{item.areaidpathtext}} {{item.useraddress}}
</view>
</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- 优惠券弹出 -->
<u-popup :show="youhuiShow" :round="10" @close="youhuiShow=false">
<view class="tanchu">
<view class="dp_title">请选择优惠券</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
<view style="width: 25%;color:#fd6004;text-align: center;">
<text>￥</text>
<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
<text
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">满{{item.coupons.useLevel}}元可用</text>
</view>
<view style="width: 68%;padding-left: 5%;">
<text>{{item.coupons.couponName}}</text>
<text
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间：{{item.coupons.expirationDate}}</text>
</view>
<view style="width: 7%;">
<text
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
v-if="youhuiIndex !== index"></text>
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
</u-icon>
</view>
<br clear="both">
</view>
</view>
<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
</view>
</u-popup>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import {
setPay,
setPayAssign
} from '@/config/utils';
import {
mapState
} from 'vuex';
export default {
data() {
return {
typeId: 0,
shangIDNum: 0,
cartIDNum: [],
cartList: [],
amount:null, // 商品总价
addressList: [],
adressMoRen: {},
adressMoRenPath:"",
adressMoRIndex: 0,
youhuiList: [],
addressId:null,
youhuiContent: {},
youhuiIndex: '',
dizhiShow: false,
youhuiShow: false,
totalPrice: 0,
isSend:'0',
farePrice: 0,
realPrice: 0,
payType: 1,
nowClick: true,
paylist: [{
title: '支付宝',
id: 1,
img: '../../static/icon/pay_1.png'
}
// {
// title: '微信',
// id: 2,
// img: '../../static/icon/pay_2.png'
// },
// {
// title: 'ios内购',
// id: 3,
// img: '../../static/icon/pay_2.png'
// }
],
}
},
onLoad(e) {
if (e.type == 1) {
this.typeId = 1
this.cartIDNum = JSON.parse(e.list);
} else if (e.type == 2) {
this.typeId = 0
this.shangIDNum = e.list
}
// this.getYunFei()
},
onShow() {
if (this.typeId == 1) {
this.getCartList()
} else if (this.typeId == 0) {
this.getShangList(this.shangIDNum);
}
// this.getUserAddress()
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 获取地址列表
getUserAddress() {
this.$http
.post(`book/useraddress/getUserAddress?userId=${this.userInfo.id}`)
.then(res => {
if (res.code == 0) {
if (res.list.length != 0) {
this.addressList = res.list
console.log(this.addressList,'地址列表')
this.adressMoRen = this.addressList[this.adressMoRIndex]
console.log(this.adressMoRen, '默认')
if(this.adressMoRen != {}){
this.getYunFei()
}else{
this.getUserAddress()
}
}
}
})
},
// 获取优惠券列表
getCourpe() {
let proId = ''
for (let i = 0; i < this.cartList.length; i++) {
if (i == this.cartList.length - 1) {
proId = proId + this.cartList[i].productId
} else {
proId = proId + this.cartList[i].productId + ','
}
}
let allprice = 0;
this.cartList.forEach((item, index) => {
let price = 0;
price = item.productAmount * item.price;
allprice += price
})
this.amount = allprice // 商品总价
this.allPrice()
// '&products=' + proId + //商品id
this.$http
.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.amount + '&type=0')
.then(res => {
this.youhuiList = res.userCoupons
});
},
// 获取商品详情
getShangList(e) {
this.cartList = []
this.$http
.post('book/shopproduct/info/' + e)
.then(res => {
let prodCont = {}
prodCont.productId = res.shopProduct.productId
prodCont.image = res.shopProduct.productImages
prodCont.productName = res.shopProduct.productName
prodCont.productAmount = 1
prodCont.price = res.shopProduct.price
prodCont.weight = res.shopProduct.weight
this.cartList.push(prodCont)
this.getCourpe()
this.getUserAddress()
//this.getYunFei()
// this.getYunFei()
})
},
// 获取购物车列表
getCartList() {
this.cartList = []
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
for (let i = 0; i < this.cartIDNum.length; i++) {
this.cartList.push(res.cartList[this.cartIDNum[i]])
}
// console.log(this.cartList, '购物车列表')
this.getCourpe()
this.getUserAddress()
})
},
// 获取运费
getYunFei(){
let key = []
let dataToString = ''
// console.log(this.adressMoRen, '默认地址')
this.cartList.forEach((item, index) => {
key.push({productsid: item.productId, productAmount:item.productAmount})
dataToString = dataToString.concat(item.productId+"="+item.productAmount+"&")
})
$http.request({
url: "book/buyorder/getTransPrice/" + this.adressMoRen.areaidpath + "?" + dataToString,
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// data: key,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
this.farePrice = res.price
}else{
this.farePrice = 0
}
this.allPrice()
})
},
// 总价
allPrice() {
let allprice = 0;
this.cartList.forEach((item, index) => {
let price = 0;
price = item.productAmount * item.price;
allprice += price
})
this.totalPrice = allprice
if (this.youhuiContent.id != undefined) {
this.realPrice = this.totalPrice - this.youhuiContent.coupons.couponAmount
} else {
this.realPrice = this.totalPrice
}
this.realPrice = this.realPrice + this.farePrice
},
// 超出阈值时
overlimit(){
uni.showToast({
title:'超出商品数量',
icon: 'error',
duration: 1000
})
},
// 修改数量
valChange(e, item) {
let productItem = {}
productItem = item
productItem.productAmount = e.value
this.updateCart(productItem)
this.$nextTick(()=>{
this.getYunFei()
this.getCourpe()
})
},
// 更新购物车
updateCart(shagnpin){
// 已在购物车中添加
$http.request({
url: "book/ordercart/update",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: shagnpin,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
}
}).then(res => {
if (res.code == 0) {
// uni.showToast({
// title: '加入购物车成功',
// duration: 1000,
// });
}
})
},
// 更改地址
choseDizhi(e) {
this.adressMoRIndex = e
this.adressMoRen = this.addressList[this.adressMoRIndex]
console.log(this.adressMoRen)
this.dizhiShow = false
this.getYunFei()
},
// 添加地址
toAddress() {
uni.navigateTo({
url: '/pages/user/addAddress?type=0&index=0'
})
},
// 选择优惠券
choseYouhui(e) {
this.youhuiIndex = e
this.youhuiContent = this.youhuiList[this.youhuiIndex]
this.allPrice()
this.youhuiShow = false
},
// 提交结算
goBuyJie() {
if (!this.nowClick) {
return
}
this.nowClick = false
setTimeout(() => {
this.nowClick = true
}, 5000)
let youPre = {
id: '',
coupons: {
amount: 0,
name: ''
}
};
if (this.youhuiContent.id != undefined) {
youPre = this.youhuiContent
}
let xiaBiao = [];
for (let i = 0; i < this.cartList.length; i++) {
xiaBiao.push({
productId: this.cartList[i].productId,
quantity: this.cartList[i].productAmount
})
}
let data = {
buyType: this.typeId, //0- 商品页直接下单 1- 购物车结算
userId: this.userInfo.id, //下单人ID
shippingUser: this.adressMoRen.username, //收货人姓名
userPhone: this.adressMoRen.userphone, //收货人手机号
province: this.adressMoRen.areaidpathtext.split(' ')[0], //省
city: this.adressMoRen.areaidpathtext.split(' ')[1], //市
district: this.adressMoRen.areaidpathtext.split(' ')[2], //区
address: this.adressMoRen.useraddress, //地址
paymentMethod: this.payType, //支付方式 1支付宝，2微信，3ios内购
orderMoney: this.totalPrice, //订单金额
realMoney: this.realPrice, //实收金额
shippingMoney: this.farePrice, //运费
couponId: youPre.id, //优惠券Id
isSend: this.isSend,
couponName: youPre.coupons.name, //优惠券名称
districtMoney: youPre.coupons.amount, //优惠金额
orderStatus: 0, //订单状态
products: xiaBiao, //订单列表
orderType: "order", //订单类型
addressId:this.adressMoRen.addressid // 地址ID
}
$http.request({
url: "book/buyorder/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
if (res.orderSn == null) {
uni.showToast({
title: "失败,请重新下单",
icon: "none",
image: '../../static/icon/ic_close.png'
});
} else {
uni.showToast({
title: "正在支付",
icon: "loading"
});
setPay({
typePay: 'alipay',
subject: 'order',
totalAmount: res.money,
type: 2,
relevanceoid: res.orderSn,
customerId: this.userInfo.id,
}, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
setTimeout(() => {
uni.navigateTo({
url: './orderList'
});
}, 1000)
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
setTimeout(() => {
uni.navigateTo({
url: './orderList'
});
}, 1000)
}
})
}
}
})
},
}
}
</script>
<style lang="scss" scoped>
.addShouhuo {
padding: 30rpx 50rpx 30rpx 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 2px dashed #b2e9d7;
margin: 0 0 20rpx 0;
font-size: 35rpx;
}
.adDefault {
padding: 30rpx 50rpx 30rpx 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
border-bottom: 2px dashed #b2e9d7;
margin: 0 0 20rpx 0;
position: relative;
.defalTop {
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
}
.defalBottom {
.userAddress {
font-size: 32rpx;
line-height: 40rpx;
}
}
.defalLeft {
position: absolute;
left: 30rpx;
top: 55rpx;
}
.defalRight {
position: absolute;
right: 10rpx;
top: 60rpx;
}
}
.cartItem {
padding: 10rpx 20rpx 10rpx 30rpx;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
background-color: #fff;
.cartContent {
flex: 1;
display: flex;
image {
width: 150rpx;
height: 180rpx;
border-radius: 10rpx;
padding: 10rpx;
margin-right: 15rpx;
}
.itemCenter {
flex: 1;
flex-direction: column;
justify-content: space-around;
}
.cartTitle {
font-size: 30rpx;
margin: 35rpx 0 20rpx 0;
}
.itemPrice {
font-size: 28rpx;
display: flex;
justify-content: space-between;
}
}
}
.youhui_quan {
margin: 20rpx 0 0 0;
padding: 30rpx 40rpx 0 40rpx;
background-color: #fff;
border-bottom: 1px solid #eee;
.yq_alljia {
text {
float: right;
color: #bf0c0c;
}
}
.yq_youhui {
.yqLeft {
display: inline-block;
margin-right: 10rpx;
}
.yqRight {
float: right;
}
.dagnqian {
float: right;
font-size: 22rpx;
background-color: #dd1919;
color: #fff;
border-radius: 20rpx;
padding: 5rpx 10rpx;
}
}
.yq_yunfei {
.yqLeft {
display: inline-block;
margin-right: 10rpx;
}
text {
float: right;
}
}
}
.youhui_quan>view {
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ededed;
}
.zhif_fangsh {
margin: 20rpx 0 120rpx 0;
padding: 30rpx 40rpx 0 40rpx;
background-color: #fff;
border-bottom: 1px solid #eee;
.zhif_radio {
.zhif_xuanx {
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ededed;
image {
width: 40rpx;
height: 40rpx;
display: inline-block;
margin-right: 20rpx;
vertical-align: bottom;
}
}
}
}
.footer {
width: 100%;
height: 100rpx;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0%;
.commodityPrice {
font-size: 40rpx;
color: #bf0c0c;
font-weight: 700;
margin-left: 40rpx;
span {
font-size: 15px;
}
}
.operate {
display: flex;
.goBuy {
font-size: 32rpx;
color: #fff;
padding: 32rpx 60rpx;
letter-spacing: 0.8px;
background-color: #a53008;
}
}
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}
.addressItem {
border: 2px dashed #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
position: relative;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
.chooseCheck {
position: absolute;
top: 3rpx;
right: 6rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
}
.addressItem.addItem_style {
border-color: #fd6004;
}
.youhuiItem {
border: 1px solid #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
font-size: 30rpx;
}
.youhuiItem>view {
float: left;
}
.youhuiItem.youItem_style {
border-color: #fd6004;
}
}
</style>