nurseWeChatAppletUI/pages/CommodityDetails/CommodityDetails.vue
2023-03-03 16:05:41 +08:00

808 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="app">
<u-swiper :list="info" height="750" style='background-size: 100%;'></u-swiper>
<view class="Commodity common">
<view class="name" v-if="goodsDetailslist.goodsName">
{{goodsDetailslist.goodsName}}
</view>
<view class="name" v-else>
暂无
</view>
<view class="price">
¥{{goodsPrice}}
</view>
</view>
<view class="choice common" @tap="buyshowtrue">
<view class="selected">
已选
</view>
<view class="content">
{{updata.goodsAttributeName}}
</view>
<image src="../../static/huijiantou.png" mode=""></image>
</view>
<view class="Discount common" @tap="goodsDetailslist.couponList.length>0?couponshow=true:''">
<view class="selected">
优惠
</view>
<view class="content" v-if="coupon">
已选择 {{coupon.couponTitle}}
</view>
<image src="../../static/huijiantou.png" mode="" v-if="goodsDetailslist.couponList.length>0"></image>
</view>
<view class="service common">
<view class="selected">
服务
</view>
<view class="content">
· 7天无理由退货
</view>
<view class="content" style="display: block;">
· 仅工作日发货
</view>
<!-- <image src="../../static/huijiantou.png" mode=""></image> -->
</view>
<view class="picture">
<view class="selected">
图文服务
</view>
<view class="textInfo" v-html="goodsDetailslist.goodsRemark">
</view>
<!-- <image v-for="(item,index) in info" :src="item.image" mode=""></image> -->
</view>
<view class="Purchasecolumn">
<view class="buy" @tap="buyshowtrue">
立即购买
</view>
</view>
<u-mask :show="buyshow" @click="buyshow = false" class='mask'>
<view class="PurchasePage" @click.stop=''>
<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
</image>
<view class="topcontent" style="width: 96%;">
<view class="image">
<image :src="updata.img" mode=""></image>
</view>
<view class="title" v-if="goodsDetailslist.goodsName">
{{goodsDetailslist.goodsName}}
</view>
<view class="title" v-else>
暂无
</view>
<view class="prices">
<span class="price">
¥{{totalPrice}}
</span>
<span class="Paidinprice" v-if='Paidinprice'>
实付价¥{{Paidinprice}}
</span>
</view>
<view class="goodsStock" v-show="goodshow">
库存数量:{{updata.goodsStock}}
</view>
</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll">
<view class="bodys" @tap='upaddress()'>
<view class="addressinfo">
<image src="../../static/locatinsmall.png" mode=""></image>
<view class="namephone" v-if='userid'>
{{updata.receiver}},{{updata.phone}}
</view>
<view class="address" v-if='userid'>
{{updata.receiveAddress}}
</view>
<view class="namephone" v-else>
前往完善个人信息
</view>
<view class="picture2">
<u-icon name="arrow-right" color="black" size="28"></u-icon>
</view>
</view>
</view>
<view class="centercontent topcontent" v-show="goodshow">
<view class="header">
商品规格
</view>
<view class="" style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
<view v-for="(item,index) in goodDetailsLists"
:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
<image :src="item.attributePitureUrl" mode=""></image>
<view class="">
{{item.attributeDetailsName}}
</view>
</view>
</view>
</view>
<!-- <view class="centercontent topcontent" v-for="(item,index) in goodDetailsLists">
<view class="header">
{{item.attributeName}}
</view>
<view v-for="bitem in item.goodAttributeDetailsLists" :key="bitem.attributeDetailsId"
:class="bitem.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item,bitem)'>
{{bitem.attributeDetailsName}}
</view>
</view> -->
<view class="bottomcontent topcontent">
<view class="header">
数量
</view>
<view class="number">
<u-number-box :min="1" :max="updata.goodsStock" v-model="updata.goodsCount"
@change='numberchange'>
</u-number-box>
</view>
</view>
<view class="bottomcontent topcontent"
@tap="goodsDetailslist.couponList.length>0?couponshow=true:''">
<view class="header">
优惠卷
</view>
<view class="coupon" v-if='coupon' style="color: #D43953;">
已选择 {{coupon.couponTitle}}
</view>
<u-icon class='img' name="arrow-right" color="black" size="28"></u-icon>
</view>
<view class="" style="height: 230rpx;">
<view class="bottomcontent topcontent" style="padding-bottom: 0;">
<view class="header">
支付方式
</view>
<view class="chat">
<image src="/static/chat.png" mode=""></image>
<span>微信支付</span>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="buy" @tap="tapbuy">
立即购买
</view>
</view>
</u-mask>
<u-toast ref="uToast" />
<u-mask :show="usershow" class='mask'>
<view class="information">
<image src="../../static/information.png" mode=""></image>
<view class="title">
请完善个人信息
</view>
<view class="cancel" @tap='usershow=false'>
取消
</view>
<view class="determine" @tap='goinformation'>
去完善
</view>
</view>
</u-mask>
<u-mask :show="couponshow" class='mask' @click="couponshow = false">
<view class="couponmask" @click.stop=''>
<image class="close" src="../../static/gb.png" mode="" @tap='couponshow=false'></image>
</image>
<view class="titles">
选择优惠卷
</view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll" style="background-color: #fff;height: 700rpx;">
<view class="item" v-for="(item,dindex) in couponListtrue" :key="dindex">
<view class="top">
<view class="title">
<span class="text">
</span>
<span class="price">
{{item.couponPrice}}
</span>
</view>
<view class="what">
{{item.couponTitle}}
</view>
<view class="texts">
<span style='padding: 0 5rpx;'>{{item.couponConsumePrice}}</span>
可用
</view>
<view class="time">
有效期至{{item.expirationEndTime}}
</view>
<view class="btn" v-if="item.couponId==couponId" @tap='tapcoupon(item)'
style="border: none;">
取消使用
</view>
<view class="btn" v-else @tap='tapcoupon(item)'>
使用
</view>
</view>
<view class="bottom" v-if="item.useStatus=='NOT_USED'">
领取来源:{{item.receiveSource =='NEW_PEOPLE_WELFARE'?'新人福利':''}}
</view>
</view>
<view class="item" v-for="(item,uindex) in couponListfalse" :key="uindex">
<view class="top" style="background: #EFECEC;color: #4B4B4B;">
<view class="title">
<span class="text">
</span>
<span class="price">
{{item.couponPrice}}
</span>
</view>
<view class="what" style="background: #DADADA;">
{{item.couponTitle}}
</view>
<view class="texts">
<span style='padding: 0 5rpx;'>{{item.couponConsumePrice}}</span>
可用
</view>
<view class="time">
有效期至{{item.expirationEndTime}}
</view>
<view class="btn2">
不满足
</view>
</view>
<view class="bottom" v-if="item.useStatus=='NOT_USED'">
领取来源{{item.receiveSource =='NEW_PEOPLE_WELFARE'?'新人福利':''}}
</view>
</view>
</scroll-view>
</view>
</u-mask>
</view>
</template>
<script>
import {
goodsDetails
} from '@/api/CommodityDetails/CommodityDetails.js'
import {
AppIdentification
} from '@/api/AppIdentification/index.js'
import {
goodPatientInfo
} from '@/api/modifyAddress/modifyAddress.js';
import baseurl from '@/api/baseurl.js'
import {
addStationGoodsOrder,
appletGoodsOrderPay
} from '@/api/confirmOrder/index.js'
export default {
data() {
return {
timer: null,
goodsInfoId: null, //商品id
baseurl: '', //url
image: null, //总图片
usershow: false, //完善信息开关
goodsPrice: '', //页面价格
totalPrice: 0.00, //总价
Paidinprice: null, //实付价格
couponId: null, //使用的优惠卷id
coupon: null,
goodsDetailslist: {
couponList: [],
}, //商品list
goodDetailsLists: [], //提前预备商品规格数组
goodshow: true, //商品规格开关
buyshow: false, //立即购买遮罩层开关
couponshow: false, //优惠卷遮罩层开关
info: [], //轮播list
goodsAttributeId: null, //商品规格id
updata: { //订单表
couponList: [],
goodsPrice: 0.00,
goodsName: "",
goodsAttributeName: '',
goodsCount: 1,
nurseStationId: '',
img: '',
totalPrice: null,
patientId: null,
goodsStock: 0, //库存数量
goodsAttributeContent: '', //商品属性
giveIntegral: 0, //赠送积分
transportPrice: 0.00, //运费
discountPrice: 0.00, //优惠
buySource: '', //下单来源 '护理站NURSE_STATION商城SHOPPING_MALL'
orderChannel: 'WECHAT_APPLET', //下单方式 手机AppMOBILE_APP微信小程序WECHAT_APPLET支付宝小程序ALI_PAY_APPLET'
receiver: null, //收货人
receiveAddress: "", //收货地址
phone: '', //联系电话
attributeDetailsId: '', //商品属性明细表id
goodsAttributeId: '',
goodsAttributeDetailsId: '',
originalTotalPrice: null,
},
couponListtrue: [],
couponListfalse: [],
scrollTop: 0,
old: {
scrollTop: 0
},
userid: null,
};
},
watch: { //监听
totalPrice() {
this.couponListtrue = []
this.couponListfalse = []
this.goodsDetailslist.couponList.forEach(e => {
if (this.totalPrice >= e.couponConsumePrice) {
this.couponListtrue.push(e)
} else {
this.couponListfalse.push(e)
}
})
},
},
methods: {
//使用优惠卷
tapcoupon(item) {
if (this.couponId == item.couponId) {
this.couponId = null
this.Paidinprice = null
this.coupon = null
} else {
this.couponId = item.couponId
this.Paidinprice = (this.totalPrice - item.couponPrice).toFixed(2)
this.coupon = item
}
this.couponshow = false
},
//步进期
numberchange(e) {
this.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(2)
this.Paidinprice = (Number(this.totalPrice) - Number(this.coupon.couponPrice)).toFixed(2)
},
buyshowtrue() {
this.buyshow = true
this.totalPrice = Number((this.updata.goodsPrice * this.updata.goodsCount).toFixed(2))
},
upper: function(e) {},
lower: function(e) {},
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
//跳转完善页面
goinformation() {
this.usershow = false
uni.navigateTo({
url: '/pages/information/information'
})
},
//立即购买跳转确认订单页面
tapbuy() {
var that = this
try {
const value = uni.getStorageSync('openid');
const value2 = uni.getStorageSync('patientId');
if (value && value2) {
that.updata.patientId = value2
AppIdentification(value2).then(res => {
if (res.code == 200) {
if (res.data.loginFlag) {
if (this.goodshow == true) {
if (this.updata.goodsAttributeName == '') {
that.$refs.uToast.show({
title: '未选择商品',
type: 'error'
})
} else if (this.updata.goodsStock == 0) {
that.$refs.uToast.show({
title: '库存数量不足,无法购买',
type: 'error'
})
} else {
this.updata.goodsPrice = Number(this.updata.goodsPrice)
this.buyshow = false
this.updata.totalPrice = Number((this.updata.goodsPrice *
this.updata.goodsCount).toFixed(
2))
this.updata.originalTotalPrice = this.updata.totalPrice
if (this.couponId) {
this.updata.couponId = this.couponId
this.updata.couponTitle = this.coupon.couponTitle
this.updata.discountPrice = Number(this.coupon.couponPrice)
this.updata.couponConsumePrice = Number(this.coupon
.couponConsumePrice)
this.updata.totalPrice = Number((this.updata.originalTotalPrice -
this.updata.discountPrice).toFixed(2))
}
addStationGoodsOrder(this.updata).then(res => {
if (res.code == 500) {
that.$refs.uToast.show({
title: res.msg,
type: 'error'
})
} else {
let id = res.data.id
let paydata = res.data
paydata.openid = value
paydata.payType = "WECHAT_PAY"
paydata.paymentPrice = res.data.totalPrice
appletGoodsOrderPay(paydata).then(response => {
if (response.code == 200) {
uni.requestPayment({
timeStamp: response
.data.timeStamp,
nonceStr: response.data
.nonceStr,
package: response.data
.prepayId,
signType: response.data
.signType,
paySign: response.data
.paySign,
success: function(
res) {
that.goodsDetailsinfo(
that
.goodsInfoId,
that.updata
.patientId
)
that.$refs
.uToast
.show({
title: '支付成功',
type: 'success',
duration: 1000,
url: '/pages/paysuccess/paysuccess'
})
},
fail: function(err) {
that.goodsDetailsinfo(
that
.goodsInfoId,
that.updata
.patientId
)
that.$refs
.uToast
.show({
title: '取消支付',
type: 'error',
duration: 1000,
url: `/pages/payorderDetails/payorderDetails?goodsOrderId=${id}`
})
// uni.navigateTo({
// url: `/pages/payorderDetails/payorderDetails?goodsOrderId=${id}`
// })
}
});
} else {
that.$refs.uToast.show({
title: response.msg,
type: 'error',
duration: 1000
})
}
})
}
})
}
} else {
that.$refs.uToast.show({
title: '未选择商品',
type: 'error'
})
// that.buyshow = false
// uni.navigateTo({
// url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(that.updata)}`
// })
}
} else {
this.usershow = true
}
} else if (res.code == 9999) {} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error'
})
if (that.timer) {
clearTimeout(that.timer)
}
that.timer = setTimeout(e => {
uni.navigateTo({
url: '/pages/login/login'
})
}, 1500)
}
})
} else {
that.$refs.uToast.show({
title: '未登录,请先登录',
type: 'error'
})
if (that.timer) {
clearTimeout(that.timer)
}
that.timer = setTimeout(e => {
uni.navigateTo({
url: '/pages/login/login'
})
}, 1500)
}
} catch (e) {}
},
//选择商品
isActivegoods(item) {
if (item.isActive == true) {
// this.updata.goodsPrice = 0
// this.updata.goodsAttributeName = ''
// this.goodDetailsLists.forEach(e => {
// e.isActive = false
// })
// this.updata.goodsAttributeName = ''
// this.updata.goodsPrice = 0
// this.updata.attributeDetailsId = ''
// this.updata.goodsStock = 0
// this.updata.img = this.image
} else {
this.goodDetailsLists.forEach(e => {
e.isActive = false
})
item.isActive = true
this.goodsAttributeId = item.goodsAttributeId
this.updata.img = item.attributePitureUrl
this.updata.goodsAttributeName = item.attributeDetailsName
this.updata.goodsPrice = item.goodsPrice
this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
this.goodsPrice = this.updata.goodsPrice
this.updata.attributeDetailsId = item.attributeDetailsId
this.updata.goodsStock = item.goodsStock
this.updata.goodsAttributeId = item.goodsAttributeId
this.updata.goodsAttributeDetailsId = item.attributeDetailsId
this.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(2)
this.couponListtrue = []
this.couponListfalse = []
this.goodsDetailslist.couponList.forEach(e => {
if (this.totalPrice >= e.couponConsumePrice) {
this.couponListtrue.push(e)
} else {
this.couponListfalse.push(e)
}
if (this.couponId == e.couponId) {
if (this.totalPrice >= e.couponConsumePrice) {
this.Paidinprice = (this.totalPrice - e.couponPrice).toFixed(2)
this.coupon = e
} else {
this.Paidinprice = null
this.couponId = null
this.coupon = null
}
}
})
}
},
// 查询商品详细信息
goodsDetailsinfo(goodsInfoId, value) {
let that = this
this.info = []
goodsDetails(goodsInfoId, value).then(res => {
uni.removeStorageSync('Refresh');
if (res.data.goodsRemark) {
res.data.goodsRemark = res.data.goodsRemark.replace(/\<img/gi,
"<br/> <img class='richPic'")
}
res.data.goodsPictureUrl = this.baseurl + res.data.goodsPictureUrl
this.image = res.data.goodsPictureUrl
var obj = {
image: res.data.goodsPictureUrl,
}
this.info.push(obj)
if (res.data.goodAttributeDetailsLists == null) {
this.goodshow = false
} else if (res.data.goodAttributeDetailsLists.length == 0) {
this.goodshow = false
} else {
res.data.goodAttributeDetailsLists.forEach(e => {
e.attributePitureUrl = this.baseurl + e.attributePitureUrl
e.isActive = false
var objs = {
image: e.attributePitureUrl,
}
this.info.push(objs)
})
this.goodDetailsLists = res.data.goodAttributeDetailsLists
this.goodshow = true
}
if (!res.data.couponList) {
res.data.couponList = []
}
this.couponListtrue = []
this.couponListfalse = []
this.goodsDetailslist = res.data
this.updata.goodsName = this.goodsDetailslist.goodsName
this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
this.updata.goodsUnit = res.data.goodsUnit
if (this.goodDetailsLists.length == 1) {
this.goodDetailsLists[0].isActive = true
this.updata.img = this.goodDetailsLists[0].attributePitureUrl
this.updata.goodsAttributeName = this.goodDetailsLists[0].attributeDetailsName
this.updata.goodsPrice = this.goodDetailsLists[0].goodsPrice
this.totalPrice = this.goodDetailsLists[0].goodsPrice
this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
this.updata.attributeDetailsId = this.goodDetailsLists[0].attributeDetailsId
this.updata.goodsStock = this.goodDetailsLists[0].goodsStock
this.updata.goodsAttributeId = this.goodDetailsLists[0].goodsAttributeId
this.updata.goodsAttributeDetailsId = this.goodDetailsLists[0].attributeDetailsId
this.goodsDetailslist.couponList.forEach(e => {
if (this.totalPrice >= e.couponConsumePrice) {
this.couponListtrue.push(e)
} else {
this.couponListfalse.push(e)
}
})
} else {
var list = {}
this.goodsDetailslist.goodAttributeDetailsLists.forEach(e => {
if (e.goodsAttributeId == this.goodsAttributeId) {
list = e
e.isActive = true
this.updata.goodsAttributeId = e.goodsAttributeId
this.updata.goodsAttributeDetailsId = e.attributeDetailsId
}
})
this.updata.img = list.attributePitureUrl
this.updata.goodsAttributeName = list.attributeDetailsName
this.updata.goodsPrice = list.goodsPrice
this.totalPrice = list.goodsPrice
this.goodsDetailslist.couponList.forEach(e => {
if (this.totalPrice >= e.couponConsumePrice) {
this.couponListtrue.push(e)
} else {
this.couponListfalse.push(e)
}
})
this.updata.attributeDetailsId = list.attributeDetailsId
this.updata.goodsStock = list.goodsStock
this.updata.img = list.attributePitureUrl
}
// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
// this.updata.img = res.data.goodsPictureUrl
// this.updata.goodsAttributeName = ''
// this.updata.goodsPrice = 0
// this.updata.attributeDetailsId = ''
// this.updata.goodsStock = 0
// this.updata.img = list.image
})
},
//跳转到全部收货地址
upaddress() {
if (this.updata.receiver) {
uni.navigateTo({
url: `/pages/modifyAddress/modifyAddress?updata=${JSON.stringify(this.updata)}`
})
} else {
const value = uni.getStorageSync('openid');
const value2 = uni.getStorageSync('patientId');
if (value && value2) {
uni.navigateTo({
url: '/pages/information/information'
})
} else {
this.$refs.uToast.show({
title: '未登录,请先登录',
type: 'error'
})
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(e => {
uni.navigateTo({
url: '/pages/login/login'
})
}, 1500)
}
}
},
// 收件人
goodsList() {
goodPatientInfo(this.updata.patientId).then(res => {
// res.data.forEach(e => {
// e.address = e.provinceName + e.cityName + e.regionName + e.streetName + e
// .receiveAddress
// })
var list = res.data.filter(e => e.defaultAddressFlag == 1)
if (list.length >= 1) {
this.updata.receiver = list[0].receiveName
this.updata.receiveAddress = list[0].areaName + list[0].receiveAddress
this.updata.phone = list[0].receivePhone
this.userid = list[0].id
} else {
this.updata.receiver = res.data[0].receiveName
this.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
this.updata.phone = res.data[0].receivePhone
this.userid = res.data[0].id
}
})
},
},
onLoad(options) { //获取传值
var that = this
this.goodsPrice = options.goodsPrice //页面价格
this.goodsAttributeId = options.goodsAttributeId
this.updata.buySource = options.buySource
this.goodsInfoId = options.goodsInfoId
// this.goodsInfoId = 49
const value = uni.getStorageSync('patientId');
if (value) {
that.updata.patientId = value
// that.updata.patientId = 92
that.goodsList()
} else {}
},
onShow() {
var that = this
this.baseurl = baseurl
this.usershow = false
const value = uni.getStorageSync('patientId');
if (value) {
that.goodsDetailsinfo(that.goodsInfoId, value)
goodPatientInfo(value).then(res => {
if (res.code == 200) {
var user = res.data.filter(e => e.id == that.userid)
if (user.length >= 1) {
// user[0].address = user[0].provinceName + user[0].cityName + user[0].regionName + user[0]
// .streetName + user[0].receiveAddress
that.updata.receiver = user[0].receiveName
that.updata.receiveAddress = user[0].areaName + user[0].receiveAddress
that.updata.phone = user[0].receivePhone
that.userid = user[0].id
} else {
// res.data.forEach(e => {
// e.address = e.provinceName + e.cityName + e.regionName + e.streetName + e
// .receiveAddress
// })
that.updata.receiver = res.data[0].receiveName
// this.updata.receiveAddress = res.data[0].address
that.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
that.updata.phone = res.data[0].receivePhone
that.userid = res.data[0].id
}
}
})
} else {
that.goodsDetailsinfo(this.goodsInfoId, '')
}
let useritem = null
uni.$on('updata', function(data) {
that.updata = JSON.parse(data.updata)
if (data.useritem) {
useritem = JSON.parse(data.useritem)
that.updata.receiver = useritem.receiveName
that.updata.phone = useritem.receivePhone
// that.updata.receiveAddress = useritem.address
that.updata.receiveAddress = useritem.areaName + useritem.receiveAddress
that.userid = useritem.id
}
})
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
@import "./CommodityDetailsstyle.scss";
</style>