668 lines
18 KiB
Vue
668 lines
18 KiB
Vue
<template>
|
||
<!-- 商品详情页 -->
|
||
<view class="content">
|
||
<HeaderTop page_title=''></HeaderTop>
|
||
<view class="detail bg_F2F2F2">
|
||
<view class="x-bg-white margin-bottom22">
|
||
<view class="banner" :style="{backgroundImage: 'url(' + img_url + ')', backgroundSize:'contain',backgroundPosition:'center'}">
|
||
|
||
</view>
|
||
<!-- <view class="banner">
|
||
<image :src="img_url" mode="" class="banner_img" @error="imgError"></image>
|
||
</view> -->
|
||
<view class="padding-30">
|
||
<view class="collection d-flex j-sb">
|
||
<view class="font-weight font_28 d-flex a-center">
|
||
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right: 30upx;" v-if='list.is_limit==1'></image>
|
||
<image src="../../static/shoppingCart/re.png" mode="" style="height:30upx; width:30upx;margin-right:30upx;" v-if='list.supplier_id<=10000'></image>
|
||
<view>{{list.goods_name}}</view>
|
||
</view>
|
||
<!-- list.is_collect==1已收藏 list.is_collect==0已收藏 -->
|
||
<image src="../../static/shoppingCart/coll1.png" alt="" class='collection_img' v-if='list.is_collect==1' @click='to_change(2)'></image>
|
||
<image src="../../static/shoppingCart/coll2.png" alt="" class='collection_img' v-if='list.is_collect==0' @click='to_change(1)'></image>
|
||
<!-- <img src="../../static/shoppingCart/coll1.png" alt="" class='collection_img' v-if='list.is_collect==1' @click='to_change(2)'>
|
||
<img src="../../static/shoppingCart/coll2.png" alt="" class='collection_img' v-if='list.is_collect==0' @click='to_change(1)'> -->
|
||
</view>
|
||
<view class="textOVerFlow" style="width:100%;">{{list.manufacturer_name}}</view>
|
||
<view class="d-flex a-center">
|
||
{{list.spec_desc}}
|
||
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 1'></image>
|
||
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 0'></image>
|
||
<view class="d-flex a-center">{{list.retail_flag==0?list.retail_num:list.entirety_num}}{{list.unit}}/件</view>
|
||
</view>
|
||
<view class="goods_info d-flex j-sb">
|
||
|
||
<view class="x-text-159 font-weight font_28">￥{{list.price}}</view>
|
||
<!-- <view class="x_text_hui">库存{{list.stock_num}}盒</view> -->
|
||
</view>
|
||
<view class="goods_txt">
|
||
<!-- <text class="x-text-white bg-EDCA4A time">有效期:{{list.term_validity}}年</text> -->
|
||
<!-- <text class="txt_info">
|
||
{{list.sketch}}<text class="x-text-159">说明书 ></text>
|
||
</text> -->
|
||
</view>
|
||
<view class="d-flex">
|
||
<!-- <view class="w-50">销售类型：{{list.retail_flag==0?'零售':'整售'}}（{{list.retail_flag==0?list.retail_num:list.entirety_num}}）</view> -->
|
||
<!-- <view class="w-50">
|
||
建议零售价：<text class="x-text-159">¥{{list.show_price}}</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white margin-bottom22 padding-30">
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%">商品名称</view>
|
||
<view>{{list.goods_name}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%">生产厂家</view>
|
||
<view>{{list.manufacturer_name}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%">规格</view>
|
||
<view>{{list.spec_desc}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%">有效期</view>
|
||
<view>{{list.term_validity}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%">批准文号</view>
|
||
<view>{{list.country_code}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white margin-bottom22 padding-30">
|
||
<view class="font-weight">注意事项</view>
|
||
<view class="">
|
||
<view class="x_text_hui zhuyi_title">
|
||
1.根据国家规定，药品类商品一般情况下无质量问题不支持退货；
|
||
</view>
|
||
<view class="x_text_hui zhuyi_title">
|
||
2.客户在收取商品时，应当面确认商品有无破损，若发生破损，应及时联系客服；确认收货后，概不支持退换货。
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bottom_menu shadow d-flex a-center">
|
||
<view class="the_car" @click="to_shoppingCar()">
|
||
<image src="../../static/tabbar/car2.png" mode="" class="car_img"></image>
|
||
<view class="car_GoodsNum" v-if='$utils.getLocalStorage("GoodNums")>0'>{{$utils.getLocalStorage("GoodNums")}}</view>
|
||
</view>
|
||
<view class="add_shopping_car sameBtn x-text-white text-center" @click="addCar()">加入购物车</view>
|
||
<view class="buy sameBtn x-text-white text-center" @click="lijiBuy()">立即购买</view>
|
||
</view>
|
||
<!-- 购物车遮挡层 -->
|
||
<view class="car_pop h-100 w-100" v-if="is_pop_show==true" @tap='cancel_popCar()'>
|
||
<view class="pop_box bg-white w-100" @tap.stop='stop_click()'>
|
||
<view class="pop_goods_info d-flex a-center padding-zy64">
|
||
<image src="../../static/shoppingCart/cancel.png" mode="" @click="cancel_popCar()" class="cancel_pop"></image>
|
||
<view class="pop_box_img d-flex a-center j-center w-100">
|
||
<image v-if='list' :src="'https://'+list.pc_thumb" mode="" class="pop_img" style="width:30%"></image>
|
||
<view class="flex-1 h-100" style="width:50%;">
|
||
<view class="d-flex a-center">
|
||
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right: 30upx;" v-if='list.is_limit==1'></image>
|
||
<view class="font_28 some_txt font-weight textOVerFlow" style="width:65%;">{{list.goods_name}}</view>
|
||
</view>
|
||
<view class="x-text-159" v-if='list.is_limit==1'>{{list.limit_info}}</view>
|
||
<view class="textOVerFlow" style="width:100%;">{{list.manufacturer_name}}</view>
|
||
<view class="d-flex a-center">
|
||
{{list.spec_desc}}
|
||
<image src="../../static/shoppingCart/zheng.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 1'></image>
|
||
<image src="../../static/shoppingCart/ling.png" class="margin-zy20" mode="" style="height:30upx; width:30upx;" v-if='list.retail_flag == 0'></image>
|
||
|
||
</view>
|
||
<view class="d-flex a-center j-sb">
|
||
<view>{{list.retail_flag==0?list.retail_num:list.entirety_num}}{{list.unit}}/件</view>
|
||
<view class="x-text-159 font-weight font_28">￥ {{list.price}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="address">
|
||
<view>选择购买数量</view>
|
||
<view class="d-flex j-sb a-center">
|
||
<view class="x-text-159 x-text-font24">小提示：该物品购买数量必须为包装的倍数</view>
|
||
<view class="goods_count d-flex">
|
||
<view class="bianji_cars_num bianji_cars_numJian" @click="reduse_goodsNum()">-</view>
|
||
<input type="number" value="" class="bianji_cars_num bianji_cars_numAdd" v-model="goods_num" @blur="outComputeNum(goods_num)"
|
||
@focus="inComputeNum()" />
|
||
<!-- <view class="bianji_cars_num bianji_cars_numAdd">{{goods_num}}</view> -->
|
||
<view class="bianji_cars_num bianji_cars_numAdd" @click="add_goodsNum()">+</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="x-bg-159 x_public_box pop_sure x-text-white w-90" @click="sure_btn1()">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapMutations, mapGetters } from 'vuex'
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
import X_goods from '../../utils/models/goods.js'
|
||
import auth from '../../utils/models/auth.js'
|
||
import {
|
||
Config
|
||
} from '../../utils/config.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
the_index:'', //从首页带进来的下标
|
||
goods_num: 0, // 商品的当前数量
|
||
goods_num_copy: 0, // 商品的当前数量copy
|
||
Stock: 100, //当前商品的总库存
|
||
sales_type: 10, //销售类型
|
||
is_collection: 2, //判断是否收藏商品 是:1 ; 否:2
|
||
is_pop_show: false, // 判断购物车遮挡层的状态 显示:true ; 隐藏:false
|
||
Which_one: '', //判断用户点击了哪一个按钮 1：加入购物车； 2：立即购买
|
||
car_GoodsNum: 0, //购物车的商品数量
|
||
list: '',
|
||
uc_id: '',
|
||
sku_id: '', // 传过来的参数
|
||
is_buy: '',
|
||
the_Authentication: '', // 判断是否登录
|
||
is_next: true,
|
||
img_url: '',
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
onShow() {
|
||
this.goodsDetail();
|
||
},
|
||
mounted() {
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'GetShopCarNums'
|
||
])
|
||
},
|
||
onLoad(option) {
|
||
this.sku_id = option.sku_id
|
||
if (option.the_index) {
|
||
this.the_index = option.the_index
|
||
}
|
||
},
|
||
created() {
|
||
// 监听data里面 Which_one值的变化
|
||
this.$watch("Which_one", function(newValue, oldValue) {
|
||
if (this.Which_one == 1) {
|
||
this.goods_num = 0
|
||
}
|
||
if (this.Which_one == 2) {
|
||
this.goods_num = this.goods_num_copy
|
||
}
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations([
|
||
'SetShopCarNums',
|
||
]),
|
||
imgError() {
|
||
this.img_url = 'https://ydyd-develop-file.oss-cn-hangzhou.aliyuncs.com/imageerror.jpg';
|
||
},
|
||
inComputeNum() {
|
||
this.is_next = false
|
||
},
|
||
outComputeNum(goods_num) {
|
||
if (this.list.retail_flag == 0) { //零售
|
||
let num = Math.ceil(goods_num / this.list.retail_num)
|
||
if (num > 0) {
|
||
this.goods_num = num * this.list.retail_num
|
||
if (this.list.stock_num < this.goods_num) {
|
||
uni.showToast({
|
||
title: '库存不足',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
this.goods_num = this.list.stock_num;
|
||
}
|
||
}
|
||
} else { // 整售
|
||
let num = Math.ceil(goods_num / this.list.entirety_num)
|
||
if (num > 0) {
|
||
this.goods_num = num * this.list.entirety_num
|
||
if (this.list.stock_num < this.goods_num) {
|
||
uni.showToast({
|
||
title: '库存不足',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
this.goods_num = this.list.stock_num;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.is_next = true
|
||
},
|
||
// 阻止时间冒泡 不要删除
|
||
stop_click() {
|
||
|
||
},
|
||
// 去购物车页面
|
||
to_shoppingCar() {
|
||
uni.switchTab({
|
||
url: 'shoppingCart?goods_num=' + this.goods_num
|
||
})
|
||
},
|
||
// 商品详情
|
||
async goodsDetail() {
|
||
this.list = []
|
||
uni.getStorage({
|
||
key: 'isAuthentication',
|
||
success: function(res) {
|
||
this.the_Authentication = res.data
|
||
|
||
},
|
||
});
|
||
let res = await X_goods.x_goodsDetail(this.sku_id)
|
||
this.handleError(res, res => {
|
||
this.list = res.data.data;
|
||
this.img_url = 'https://' + this.list.pc_thumb
|
||
this.goods_num = this.list.num_in_cart
|
||
this.goods_num_copy = this.list.num_in_cart
|
||
})
|
||
},
|
||
//减 商品的数量
|
||
reduse_goodsNum() {
|
||
if (this.list.retail_flag == 0) { //零售
|
||
this.goods_num = this.goods_num - this.list.retail_num
|
||
} else { // 整售
|
||
this.goods_num = this.goods_num - this.list.entirety_num
|
||
}
|
||
|
||
if (this.goods_num <= 0) {
|
||
this.goods_num = 0
|
||
uni.showToast({
|
||
title: '商品数量不得为负',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
},
|
||
// 增加 商品的数量
|
||
async add_goodsNum() {
|
||
if (this.goods_num == this.list.stock_num) {
|
||
uni.showToast({
|
||
title: '库存不足',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
if (this.list.retail_flag == 0) { //零售
|
||
this.goods_num = Number(this.goods_num) + Number(this.list.retail_num)
|
||
} else { // 整售
|
||
this.goods_num = Number(this.goods_num) + Number(this.list.entirety_num)
|
||
}
|
||
}
|
||
},
|
||
// 关闭按钮
|
||
cancel_popCar() {
|
||
this.is_pop_show = false;
|
||
|
||
},
|
||
//加入购物车
|
||
addCar() {
|
||
this.Which_one = 1;
|
||
this.is_pop_show = !this.is_pop_show
|
||
},
|
||
// 立即购买
|
||
lijiBuy() {
|
||
this.is_buy = 'buy'
|
||
this.Which_one = 2;
|
||
this.is_pop_show = !this.is_pop_show
|
||
},
|
||
//checkAuth 检测用户是否完成认证
|
||
async is_checkAuth() {
|
||
let res = await auth.checkAuth()
|
||
this.the_checkAuth = res.data
|
||
if (res.data != 'finish') {
|
||
if (res.data == 'auditing') {
|
||
uni.showToast({
|
||
title: '您的企业认证正在审核中！',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先完成认证',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '../auth/baisc'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
if (this.Which_one == 2) {
|
||
uni.navigateTo({
|
||
url: './sureOrder?goods_id=' + this.uc_id
|
||
})
|
||
}
|
||
|
||
}
|
||
this.handleError(res, res => {
|
||
|
||
})
|
||
},
|
||
async liji_buy() {
|
||
if (!this.is_next) {
|
||
return
|
||
}
|
||
this.is_buy = 'buy'
|
||
let res = await X_goods.X_addCar(this.list.price_id, this.list.batch_id, this.goods_num, this.is_buy)
|
||
this.handleError(res, res => {
|
||
this.uc_id = res.data.uc_id;
|
||
this.is_checkAuth()
|
||
})
|
||
},
|
||
async addTheCar() {
|
||
if(!this.is_next){
|
||
return
|
||
}
|
||
// this.is_buy = ''
|
||
|
||
let res = await X_goods.X_addCar(this.list.price_id, this.list.batch_id, this.goods_num, this.is_buy)
|
||
if (res.code == 200 && res.data.errcode == 200 && this.is_buy != 'buy') {
|
||
uni.showToast({
|
||
title: '添加成功',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
if (res.data.errcode == -1) {
|
||
uni.showToast({
|
||
title: res.data.errmsg,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
this.is_pop_show = !this.is_pop_show
|
||
return
|
||
}
|
||
|
||
// 添加商品 计数
|
||
this.SetShopCarNums();
|
||
|
||
this.uc_id = res.data.uc_id;
|
||
this.is_pop_show = !this.is_pop_show
|
||
if (this.Which_one == 2) {
|
||
this.$store.commit('goodid',this.uc_id)
|
||
this.is_checkAuth()
|
||
}
|
||
this.handleError(res, res => {
|
||
|
||
|
||
})
|
||
},
|
||
// 弹框点击事件
|
||
sure_btn1() {
|
||
if (this.goods_num <= 0) {
|
||
uni.showToast({
|
||
title: '请添加商品数量',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
if (this.Which_one == 1) {
|
||
this.is_buy = ''
|
||
} else if (this.Which_one == 2) {
|
||
this.is_buy = 'buy'
|
||
}
|
||
if (this.list.retail_flag == 0) { //零售
|
||
|
||
if (this.goods_num % this.list.retail_num !== 0) {
|
||
uni.showToast({
|
||
title: '该物品购买数量必须为包装的倍数',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
this.addTheCar()
|
||
}
|
||
} else {
|
||
if (this.goods_num % this.list.entirety_num !== 0) {
|
||
uni.showToast({
|
||
title: '该物品购买数量必须为包装的倍数',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
this.addTheCar()
|
||
}
|
||
}
|
||
|
||
},
|
||
// 改变收藏状态
|
||
async to_change(num) {
|
||
const value = uni.getStorageSync('isAuthentication');
|
||
if (value) {
|
||
let res = await X_goods.X_addCollect_app(this.list.goods_id, num)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: res.message,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
if (this.list.is_collect == 1) {
|
||
this.list.is_collect = 0
|
||
} else {
|
||
this.list.is_collect = 1
|
||
}
|
||
}
|
||
this.handleError(res, res => {
|
||
if (res.data.errmsg) {
|
||
uni.showToast({
|
||
title: res.data.errmsg,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
} else {
|
||
|
||
}
|
||
|
||
})
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
// 是否收藏
|
||
if_collection() {
|
||
if (this.list.is_collect == 1) {
|
||
this.list.is_collect = 0
|
||
} else {
|
||
this.list.is_collect = 1
|
||
}
|
||
},
|
||
// 改变收藏状态
|
||
async change_collection() {
|
||
this.to_change();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
.detail {
|
||
height: calc(100% - 229.5upx);
|
||
overflow-y: auto;
|
||
|
||
.banner {
|
||
height: 350upx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-repeat: no-repeat;
|
||
// background-position: center;
|
||
// background-size: cover;
|
||
.banner_img {
|
||
height: 100%;
|
||
width: 100%;
|
||
// height: 217upx;
|
||
// max-height: 250upx;
|
||
// width: 305upx;
|
||
// max-width: 315upx;
|
||
}
|
||
}
|
||
|
||
.collection {
|
||
.collection_img {
|
||
height: 36upx;
|
||
width: 36upx;
|
||
margin-right:30upx;
|
||
}
|
||
}
|
||
|
||
.goods_txt {
|
||
.txt_info {
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
padding: 0 15upx;
|
||
border-radius: 10upx;
|
||
margin: 0 15upx;
|
||
}
|
||
|
||
.zhuyi_title {
|
||
margin: 20upx 0 20upx 0;
|
||
}
|
||
}
|
||
|
||
.bottom_menu {
|
||
height: 81.5upx;
|
||
overflow: hidden;
|
||
|
||
.car_img {
|
||
height: 41upx;
|
||
width: 46upx;
|
||
}
|
||
|
||
.car_txt {
|
||
font-size: 20upx;
|
||
color: #989898;
|
||
line-height: 22upx;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.car_GoodsNum {
|
||
background-color: #EB5159;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
top: -16upx;
|
||
left: 108upx;
|
||
height: 40upx;
|
||
width: 40upx;
|
||
line-height: 40upx;
|
||
font-size: 20upx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.sameBtn {
|
||
line-height: 81.5upx;
|
||
width: 38%;
|
||
}
|
||
|
||
.the_car {
|
||
flex: 1;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.add_shopping_car {
|
||
background-color: #EDCA4A;
|
||
}
|
||
|
||
.buy {
|
||
background-color: #EB5159;
|
||
}
|
||
}
|
||
|
||
.car_pop {
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 0%;
|
||
top: 0%;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
|
||
.pop_box {
|
||
position: absolute;
|
||
left: 0%;
|
||
bottom: 0%;
|
||
// height:707upx;
|
||
border-radius: 10upx 10upx 0 0;
|
||
|
||
.cancel_pop {
|
||
height: 38upx;
|
||
width: 38upx;
|
||
position: absolute;
|
||
right: 30upx;
|
||
top: 30upx;
|
||
}
|
||
|
||
.pop_goods_info {
|
||
height: 267upx;
|
||
border-bottom: 5upx dashed #989898;
|
||
|
||
.pop_box_img {
|
||
.pop_img {
|
||
margin-right: 60upx;
|
||
vertical-align: middle;
|
||
height: 142upx;
|
||
width: 200upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.address {
|
||
padding: 20upx 30upx;
|
||
border-bottom: 4upx solid #F2F2F2;
|
||
|
||
.dizhi_img {
|
||
margin-right: 30upx;
|
||
height: 27upx;
|
||
width: 20upx;
|
||
}
|
||
|
||
.pop_right {
|
||
height: 22upx;
|
||
width: 13upx;
|
||
|
||
}
|
||
|
||
.goods_count {
|
||
// position: absolute;
|
||
// bottom: -14upx;
|
||
// right: 8upx;
|
||
}
|
||
}
|
||
|
||
.pop_sure {
|
||
line-height: 82upx;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|