326 lines
9.8 KiB
Vue
326 lines
9.8 KiB
Vue
<template>
|
||
<view class="app">
|
||
<u-swiper :list="info" height="750"></u-swiper>
|
||
<view class="Commodity common">
|
||
<view class="name">
|
||
{{goodsDetailslist.goodsName}}
|
||
</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/jiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="Discount common">
|
||
<view class="selected">
|
||
优惠
|
||
</view>
|
||
<view class="content">
|
||
购买最多可获得3积分
|
||
</view>
|
||
<image src="../../static/jiantou.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/jiantou.png" mode=""></image>
|
||
</view>
|
||
<view class="picture">
|
||
<view class="selected">
|
||
图文服务
|
||
</view>
|
||
<image :src="goodsDetailslist.goodsPictureUrl" 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">
|
||
<view class="image">
|
||
<image :src="goodsDetailslist.goodsPictureUrl" mode=""></image>
|
||
</view>
|
||
<view class="title">
|
||
<span>{{goodsDetailslist.goodsName}}</span>
|
||
</view>
|
||
<view class="price">
|
||
￥{{updata.goodsPrice}}
|
||
</view>
|
||
<view class="goodsStock" v-show="goodshow">
|
||
库存数量:{{updata.goodsStock}}
|
||
</view>
|
||
</view>
|
||
<view class="centercontent topcontent" v-show="goodshow">
|
||
<view class="header">
|
||
商品规格
|
||
</view>
|
||
<view v-for="(item,index) in goodDetailsLists"
|
||
:class="item.isActive ? 'Productmodel':'productmodel'" @tap='isActivegoods(item)'>
|
||
{{item.attributeDetailsName}}
|
||
</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="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 baseurl from '@/api/baseurl.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
usershow: false, //完善信息开关
|
||
baseurl: '', //url
|
||
goodsPrice: '', //页面价格
|
||
goodsDetailslist: [], //商品list
|
||
goodDetailsLists: [], //提前预备商品规格数组
|
||
goodshow: true, //商品规格开关
|
||
buyshow: false, //立即购买遮罩层开关
|
||
info: [], //轮播list
|
||
updata: { //订单表
|
||
goodsPrice: 0.00,
|
||
goodsName: "",
|
||
goodsAttributeName: '',
|
||
goodsCount: 1,
|
||
nurseStationId: '',
|
||
img: '',
|
||
totalPrice: null,
|
||
patientId: '',
|
||
goodsStock: 0, //库存数量
|
||
goodsAttributeContent: '', //商品属性
|
||
giveIntegral: 0, //赠送积分
|
||
transportPrice: 0.00, //运费
|
||
discountPrice: 0.00, //优惠
|
||
buySource: '', //下单来源 '护理站：NURSE_STATION，商城：SHOPPING_MALL'
|
||
orderChannel: 'MOBILE_APP', //下单方式 手机App：MOBILE_APP，微信小程序：WECHAT_APPLET，支付宝小程序：ALI_PAY_APPLET'
|
||
receiver: "", //收货人
|
||
receiveAddress: "", //收货地址
|
||
phone: '', //联系电话
|
||
attributeDetailsId: '', //商品属性明细表id
|
||
goodsAttributeId: '',
|
||
goodsAttributeDetailsId: '',
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
//跳转完善页面
|
||
goinformation() {
|
||
uni.navigateTo({
|
||
url: '/pages/information/information'
|
||
})
|
||
},
|
||
//立即购买跳转确认订单页面
|
||
tapbuy() {
|
||
AppIdentification(this.updata.patientId).then(res => {
|
||
console.log(res)
|
||
if (res.data.loginFlag) {
|
||
if (this.goodshow == true) {
|
||
if (this.updata.goodsAttributeName == '') {
|
||
this.$refs.uToast.show({
|
||
title: '未选择商品',
|
||
type: 'error'
|
||
})
|
||
} else if (this.updata.goodsStock == 0) {
|
||
this.$refs.uToast.show({
|
||
title: '库存数量不足,无法购买',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
this.updata.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount).toFixed(
|
||
2)
|
||
uni.navigateTo({
|
||
url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(this.updata)}`
|
||
})
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/confirmOrder/confirmOrder?updata=${JSON.stringify(this.updata)}`
|
||
})
|
||
}
|
||
} else {
|
||
this.buyshow = false
|
||
this.usershow = true
|
||
}
|
||
})
|
||
},
|
||
// tapbuy() {
|
||
// this.goodsDetailslist.goodDetailsLists.forEach(e => {
|
||
// e.goodAttributeDetailsLists.forEach(el => {
|
||
// if (el.isActive == true) {
|
||
// this.updata.goodsAttributeName += el.attributeDetailsName + ' '
|
||
// this.updata.totalPrice = (this.updata.goodsPrice * this.updata.goodsCount)
|
||
// .toFixed(2)
|
||
// }
|
||
// })
|
||
// })
|
||
// },
|
||
//选择商品
|
||
isActivegoods(item) {
|
||
this.updata.goodsPrice = 0
|
||
this.updata.goodsAttributeName = ''
|
||
if (item.isActive == true) {
|
||
this.goodDetailsLists.forEach(e => {
|
||
e.isActive = false
|
||
})
|
||
this.updata.goodsAttributeName = ''
|
||
this.updata.goodsPrice = 0
|
||
this.updata.attributeDetailsId = ''
|
||
this.updata.goodsStock = 0
|
||
} else {
|
||
this.goodDetailsLists.forEach(e => {
|
||
e.isActive = false
|
||
})
|
||
item.isActive = true
|
||
this.updata.goodsAttributeName = item.attributeDetailsName
|
||
this.updata.goodsPrice = item.goodsPrice
|
||
this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
|
||
this.updata.attributeDetailsId = item.attributeDetailsId
|
||
this.updata.goodsStock = item.goodsStock
|
||
this.updata.goodsAttributeId = item.goodsAttributeId
|
||
this.updata.goodsAttributeDetailsId = item.attributeDetailsId
|
||
this.updata.img = this.baseurl + item.attributePitureUrl
|
||
}
|
||
},
|
||
|
||
// isActivegoods(item, bitem) {
|
||
// if (item.attributeName.includes('服务')) {} else {
|
||
// if (bitem.isActive == true) {
|
||
// item.goodAttributeDetailsLists.forEach(e => {
|
||
// e.isActive = false
|
||
// })
|
||
// } else {
|
||
// item.goodAttributeDetailsLists.forEach(e => {
|
||
// e.isActive = false
|
||
// })
|
||
// bitem.isActive = true
|
||
// }
|
||
// }
|
||
// this.updata.goodsPrice = 0
|
||
// this.updata.goodsAttributeName = ''
|
||
// this.goodsDetailslist.goodDetailsLists.forEach(e => {
|
||
// e.goodAttributeDetailsLists.forEach(el => {
|
||
// if (el.isActive == true) {
|
||
// this.updata.goodsPrice += el.goodsPrice
|
||
// this.updata.goodsAttributeName += el.attributeDetailsName + ' '
|
||
// }
|
||
// })
|
||
// })
|
||
// this.updata.goodsPrice = this.updata.goodsPrice.toFixed(2)
|
||
// },
|
||
// 查询商品详细信息
|
||
goodsDetailsinfo(goodsInfoId) {
|
||
goodsDetails(goodsInfoId).then(res => {
|
||
res.data[0].goodsPictureUrl = this.baseurl + res.data[0].goodsPictureUrl
|
||
if (res.data[0].goodDetailsLists == null) {
|
||
this.goodshow = false
|
||
} else if (res.data[0].goodDetailsLists.length == 0) {
|
||
this.goodshow = false
|
||
} else {
|
||
res.data[0].goodDetailsLists.forEach(e => {
|
||
e.isActive = false
|
||
})
|
||
this.goodshow = true
|
||
}
|
||
var obj = {
|
||
image: res.data[0].goodsPictureUrl
|
||
}
|
||
this.info.push(obj)
|
||
this.goodsDetailslist = res.data[0]
|
||
this.updata.goodsName = this.goodsDetailslist.goodsName
|
||
this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
|
||
this.goodDetailsLists = res.data[0].goodDetailsLists
|
||
// res.data[0].goodDetailsLists.forEach(e => {
|
||
// e.goodAttributeDetailsLists.forEach(el => {
|
||
// el.isActive = false
|
||
// el.goodsPrice = Number(el.goodsPrice)
|
||
// })
|
||
// })
|
||
// this.goodsDetailslist = res.data[0]
|
||
// this.updata.goodsName = this.goodsDetailslist.goodsName
|
||
// this.updata.nurseStationId = this.goodsDetailslist.nurseStationId
|
||
// this.updata.img = this.goodsDetailslist.goodsPictureUrl
|
||
// this.goodDetailsLists = res.data[0].goodDetailsLists
|
||
})
|
||
},
|
||
},
|
||
onLoad(options) { //获取传值
|
||
this.updata.buySource = options.buySource
|
||
this.usershow = false
|
||
let that = this
|
||
uni.getStorage({
|
||
key: 'patientId',
|
||
success: function(res) {
|
||
that.updata.patientId = res.data
|
||
console.log(that.updata)
|
||
}
|
||
});
|
||
this.goodsPrice = options.goodsPrice //页面价格
|
||
this.baseurl = baseurl;
|
||
this.goodsDetailsinfo(options.goodsInfoId)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "./CommodityDetailsstyle.scss";
|
||
</style>
|