433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<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="buyshow=true">
|
||
<view class="selected">
|
||
已选
|
||
</view>
|
||
<view class="content">
|
||
{{updata.goodsAttributeName}}
|
||
</view>
|
||
<image src="../../static/huijiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="Discount common">
|
||
<view class="selected">
|
||
优惠
|
||
</view>
|
||
<!-- <view class="content">
|
||
购买最多可获得3积分
|
||
</view>
|
||
<image src="../../static/huijiantou.png" mode=""></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="buyshow=true">
|
||
立即购买
|
||
</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="price">
|
||
￥{{updata.goodsPrice}}
|
||
</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">
|
||
</u-number-box>
|
||
</view>
|
||
</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>
|
||
</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: '', //页面价格
|
||
goodsDetailslist: [], //商品list
|
||
goodDetailsLists: [], //提前预备商品规格数组
|
||
goodshow: true, //商品规格开关
|
||
buyshow: false, //立即购买遮罩层开关
|
||
info: [], //轮播list
|
||
goodsAttributeId: null, //商品规格id
|
||
updata: { //订单表
|
||
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', //下单方式 手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET'
|
||
receiver: "", //收货人
|
||
receiveAddress: "", //收货地址
|
||
phone: '', //联系电话
|
||
attributeDetailsId: '', //商品属性明细表id
|
||
goodsAttributeId: '',
|
||
goodsAttributeDetailsId: '',
|
||
},
|
||
scrollTop: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
userid: null,
|
||
};
|
||
},
|
||
methods: {
|
||
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() {},
|
||
//选择商品
|
||
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
|
||
}
|
||
},
|
||
// 查询商品详细信息
|
||
goodsDetailsinfo(goodsInfoId) {
|
||
let that = this
|
||
goodsDetails(goodsInfoId).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
|
||
}
|
||
this.goodsDetailslist = res.data
|
||
this.updata.goodsName = this.goodsDetailslist.goodsName
|
||
this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
|
||
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.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
|
||
} 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.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 {
|
||
uni.navigateTo({
|
||
url: '/pages/information/information'
|
||
})
|
||
}
|
||
},
|
||
// 收件人
|
||
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
|
||
const value = uni.getStorageSync('patientId');
|
||
if (value) {
|
||
that.updata.patientId = value
|
||
that.goodsList()
|
||
} else {}
|
||
},
|
||
onShow() {
|
||
var that = this
|
||
this.baseurl = baseurl
|
||
this.usershow = false
|
||
this.goodsDetailsinfo(this.goodsInfoId)
|
||
goodPatientInfo(this.updata.patientId).then(res => {
|
||
var user = res.data.filter(e => e.id == this.userid)
|
||
if (user.length >= 1) {
|
||
// user[0].address = user[0].provinceName + user[0].cityName + user[0].regionName + user[0]
|
||
// .streetName + user[0].receiveAddress
|
||
this.updata.receiver = user[0].receiveName
|
||
this.updata.receiveAddress = user[0].areaName + user[0].receiveAddress
|
||
this.updata.phone = user[0].receivePhone
|
||
this.userid = user[0].id
|
||
} else {
|
||
// res.data.forEach(e => {
|
||
// e.address = e.provinceName + e.cityName + e.regionName + e.streetName + e
|
||
// .receiveAddress
|
||
// })
|
||
this.updata.receiver = res.data[0].receiveName
|
||
// this.updata.receiveAddress = res.data[0].address
|
||
this.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
|
||
this.updata.phone = res.data[0].receivePhone
|
||
this.userid = res.data[0].id
|
||
}
|
||
})
|
||
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
|
||
}
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "./CommodityDetailsstyle.scss";
|
||
</style>
|