You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1381 lines
37 KiB
1381 lines
37 KiB
<template>
|
|
<view style="overflow-x: hidden;">
|
|
<lf-nav title="商品详情" titleColor="#fff" :spreadOut="false" :showIcon="true" bgColor="transparent"></lf-nav>
|
|
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
|
|
<block>
|
|
<!-- 商品图片轮播 -->
|
|
<swiper :current="current" :indicator-dots="pictures.length > 1" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
|
|
<swiper-item v-for="(item, index) in pictures" :key="index">
|
|
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
|
|
<view class="seckill-box" v-if="type == 'seckill' && $isRight(seckill.seckill.end_left_time)" style="z-index: 999;">
|
|
<view>距离结束还剩余</view>
|
|
<view v-if="$isRight(seckill.seckill.end_left_time)">
|
|
<countdown-time
|
|
:day="seckill.seckill.end_left_time[0]"
|
|
:hour="seckill.seckill.end_left_time[1]"
|
|
:minute="seckill.seckill.end_left_time[2]"
|
|
:second="seckill.seckill.end_left_time[3]"
|
|
color="white"
|
|
splitorColor="white"
|
|
>
|
|
</countdown-time>
|
|
</view>
|
|
</view>
|
|
<view class="seckill-box" v-if="type == 'seckill' && $isRight(seckill.seckill.start_left_time)" style="z-index: 999;">
|
|
<view>距离开始还剩余</view>
|
|
<view v-if="$isRight(seckill.seckill.start_left_time)">
|
|
<countdown-time
|
|
:day="seckill.seckill.start_left_time[0]"
|
|
:hour="seckill.seckill.start_left_time[1]"
|
|
:minute="seckill.seckill.start_left_time[2]"
|
|
:second="seckill.seckill.start_left_time[3]"
|
|
color="white"
|
|
splitorColor="white"
|
|
>
|
|
</countdown-time>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 商品主要信息 -->
|
|
<view class="head-info">
|
|
<view class="lf-row-between">
|
|
<view v-if="type == 'point'">
|
|
<text class="lf-font-48 lf-color-primary lf-font-bold">{{ goods_detail.redeem_point }}</text>
|
|
<text class="lf-font-28 lf-color-777 lf-m-l-10">个积分兑换</text>
|
|
</view>
|
|
<lf-price :iftext="false" :price="seckill.seckill_price || 0" v-else-if="type == 'seckill'"></lf-price>
|
|
<lf-price :iftext="false" :price="goods_detail.sell_price || 0" v-else></lf-price>
|
|
<button class="share-btn" open-type="share">
|
|
<text class="lf-iconfont icon-fenxiang lf-font-40"></text>
|
|
</button>
|
|
</view>
|
|
<view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20">
|
|
<view class="lf-font-bold lf-font-32 lf-color-222">{{ goods_detail.name }}</view>
|
|
</view>
|
|
<view class="lf-row-between lf-font-24 lf-p-b-30">
|
|
<view class="lf-font-28 lf-color-777 lf-row-between">
|
|
<text v-if="brand_detail.express && !brand_detail.pick_self">可邮寄</text>
|
|
<text v-else-if="!brand_detail.express && brand_detail.pick_self">可自提</text>
|
|
<text v-else-if="brand_detail.express && brand_detail.pick_self">可自提/可邮寄</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 商品优惠 -->
|
|
<block v-if="coupons && coupons.length">
|
|
<self-line></self-line>
|
|
<view class="bg-white" >
|
|
<view class="cu-bar padding-lr">
|
|
<view class="lf-flex">
|
|
<text class="lf-color-777 lf-font-28">优惠</text>
|
|
<view style="width: 580rpx; padding-left: 20rpx;">
|
|
<text class="lf-color-222 lf-font-26"
|
|
v-for="(item, index) in coupons" :key="index">{{ item.title }};
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view>
|
|
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<self-line></self-line>
|
|
<!-- 服务tags -->
|
|
<block v-if="goods_detail.tags.length">
|
|
<view class="bg-white">
|
|
<view class="cu-bar padding-lr">
|
|
<view class="lf-flex">
|
|
<text class="lf-color-777 lf-font-28">服务</text>
|
|
<view style="width: 600rpx;flex-wrap: wrap;display: flex;margin-top: 32rpx;">
|
|
<view class="lf-m-l-30" v-for="(tagItem, tagIndex) in goods_detail.tags" :key="tagIndex">
|
|
<text class="lf-iconfont icon-xuanzhong lf-font-30" style="color: #15716E;"></text>
|
|
<text class="lf-m-l-10 lf-font-26 lf-color-black">{{ tagItem }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 商品选择规格 -->
|
|
<block v-if="$isRight(goods_stock.specs)">
|
|
<view class="bg-white">
|
|
<view class="cu-bar padding-lr" @click="shoot(3)" v-if="type == 'point'">
|
|
<view class="lf-flex">
|
|
<text class="lf-color-777 lf-font-28">选择</text>
|
|
<text class="lf-color-222 lf-font-26 lf-m-l-30">{{ showSpec }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar padding-lr" @click="shoot(2)" v-else>
|
|
<view class="lf-flex">
|
|
<text class="lf-color-777 lf-font-28">选择</text>
|
|
<text class="lf-color-222 lf-font-26 lf-m-l-30">{{ showSpec }}</text>
|
|
</view>
|
|
<view>
|
|
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<self-line></self-line>
|
|
</block>
|
|
|
|
<!-- 店铺信息 -->
|
|
<view v-if="type != 'point'">
|
|
<view class="user-top">
|
|
<view class="lf-row-between lf-w-100">
|
|
<view class="lf-flex" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
|
|
<view class="tag-father">
|
|
<image :src="brand_detail.logo" mode="widthFix" class="head-img"></image>
|
|
</view>
|
|
<view class="lf-flex-column lf-m-l-20">
|
|
<text class="lf-font-28 lf-color-black lf-font-bold">{{ brand_detail.name }}</text>
|
|
<view class="lf-font-24 lf-color-777">
|
|
<text class="lf-iconfont icon-dizhi lf-font-24 lf-color-primary"></text>
|
|
<text class="lf-m-l-10">{{ brand_detail.floor }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<button class="head-btn" @click="makePhoneCall(brand_detail.tel)">
|
|
<text class="lf-iconfont icon-kefuhdpi lf-font-24"></text>
|
|
<text class="lf-m-l-10">客服</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="scroll-view" :scroll-x="true" v-if="brand_detail.goods.length!=0">
|
|
<view class="scroll-content">
|
|
<view class="goods-item"
|
|
v-for="(item, index) in brand_detail.goods"
|
|
:key="index"
|
|
@click="$url('/pages/shop/goodsdetail?id='+ item.id)">
|
|
<image class="goods-img" :src="item.img"></image>
|
|
<view class="goods-info">
|
|
<view class="lf-line-1">{{ item.name }}</view>
|
|
<view>￥{{ item.sell_price }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-item" @click="$url('/pages/shop/shopdetail?id='+ brand_detail.id)">
|
|
<view class="more-box">
|
|
<text>查看更多</text>
|
|
<text class="lf-iconfont icon--2 lf-text-vertical"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 商品详情 -->
|
|
<view class="goods-detail">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
|
|
<rich-text :nodes="goods_content"></rich-text>
|
|
<!-- <image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image> -->
|
|
</view>
|
|
<!-- 修饰专用 -->
|
|
<view class="extra"></view>
|
|
|
|
<!-- 吸底操作按钮 -->
|
|
<view class="lf-row-between fixed-bottom">
|
|
<view class="lf-flex lf-p-t-10 lf-p-b-10">
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="contact">
|
|
<text class="lf-iconfont icon-pinglun- icon-img"></text>
|
|
<view class="lf-m-t-1">客服</view>
|
|
</button>
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
|
|
<text class="lf-iconfont icon-shoucang2 icon-img lf-color-price" v-if="is_collect"></text>
|
|
<text class="lf-iconfont icon-shoucang11 icon-img" v-else></text>
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
|
|
</view>
|
|
<button class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/store/cart/cart')">
|
|
<text class="lf-iconfont icon-gouwulan icon-img"></text>
|
|
<view class="lf-m-t-1">购物车</view>
|
|
<block v-if="$isRight(car_num)">
|
|
<view class="angle-mark" v-if="car_num<99">{{car_num || 0}}</view>
|
|
<view class="angle-mark" v-else>99+</view>
|
|
</block>
|
|
</button>
|
|
</view>
|
|
<view v-if="type == 'seckill'">
|
|
<button class="btn" style="width: 349rpx;" @click="shoot(2)">立即秒杀</button>
|
|
</view>
|
|
<view v-else-if="type == 'point'">
|
|
<button class="btn" style="width: 349rpx;" @click="shoot(3)">立即兑换</button>
|
|
</view>
|
|
<view class="lf-flex" v-else>
|
|
<button class="btn1" @click="shoot(1)">加入购物车</button>
|
|
<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享生成海报时弹出 -->
|
|
<view class="share-img-box" :class="share_img ? 'cur' : ''">
|
|
<view class="imgs-box">
|
|
<view class="img">
|
|
<image mode="widthFix" :src="shareImg"></image>
|
|
</view>
|
|
<view class="text">
|
|
保存图片后，可分享到朋友圈
|
|
</view>
|
|
<view class="save" :style="'background: ' + config.mainColor" @tap="downImg">
|
|
保存图片
|
|
</view>
|
|
<!-- <i class="iconfont icon-delete" @tap="changeImg"></i> -->
|
|
<text class="lf-iconfont icon-status-error" @tap="changeImg" ></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加入购物车、立即购买模态框选规格 -->
|
|
<u-popup v-model="show_popup" mode="bottom" :round="true" borderRadius="20">
|
|
<view class="popup-content">
|
|
<!-- 商品信息及关闭按钮 -->
|
|
<view class="popup-head">
|
|
<view class="lf-flex">
|
|
<!-- <image class="goods-img" :src="goods_detail.img"></image> -->
|
|
<image class="goods-img" :src="getSpecImage"></image>
|
|
<view class="goods-info">
|
|
<view class="price">{{ showGoodsSpecPrice }}</view>
|
|
<view class="goods-name">{{ goods_detail.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view @click="show_popup = false">
|
|
<text class="lf-iconfont icon-cuo lf-font-50"></text>
|
|
</view>
|
|
</view>
|
|
<!-- 规格 -->
|
|
<view v-for="(value, key) in goods_stock.specs" :key="key">
|
|
<view class="spec-title">{{ value.label }}</view>
|
|
<view class="lf-flex-wrap">
|
|
<view :class="{
|
|
'spec-item': true,
|
|
'spec-active': value.spec_current === index}"
|
|
@click="activeSpec(key, index)"
|
|
v-for="(item, index) in value.list"
|
|
:key="index">{{ item.value }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="lf-row-between lf-m-t-40">
|
|
<view class="lf-font-28 lf-color-555">数量</view>
|
|
<view class="lf-flex">
|
|
<view class="num-btn" @click="changeNum('less')">
|
|
<text class="lf-iconfont icon-jian1 lf-font-30"></text>
|
|
</view>
|
|
<view>
|
|
<input class="input" :value="goods_num" :disabled="true" />
|
|
</view>
|
|
<view class="num-btn lf-text-right" @click="changeNum('add')">
|
|
<text class="lf-iconfont icon-jia lf-font-30"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<button class="comfirm-btn" @click="specConfirm">{{ click_type == 1 ? '加入购物车' : '立即购买' }}</button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- 回到顶部 -->
|
|
<u-back-top :scroll-top="pageScrollTop"></u-back-top>
|
|
</block>
|
|
</skeleton>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import countdownTime from '@/components/uni-countdown/uni-countdown.vue';
|
|
import Bigc from '@/common/js/bigc.js';
|
|
export default {
|
|
components: {
|
|
countdownTime
|
|
},
|
|
data(){
|
|
return {
|
|
current: 0, // 轮播下标
|
|
goods_id: 0,
|
|
goods_detail: {},
|
|
is_collect: false, // 1为当前收藏商品了，0为否
|
|
skeletonLoading: false,
|
|
pictures: [],
|
|
show_popup: false, // 是否显示选规格模态框
|
|
click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
|
|
type: 'mail', // 页面显示类型，mail普通可邮寄商品，point积分商品，seckill秒杀商品
|
|
time: 0,
|
|
goods_stock: {
|
|
specs: {},
|
|
stores: {}
|
|
},
|
|
seckill: {}, // 秒杀商品的信息
|
|
brand_detail: {},
|
|
token: '',
|
|
coupons: [], // 优惠
|
|
goods_num: 1,
|
|
is_date_finish: false,
|
|
car_num: 0,
|
|
goods_content: '',
|
|
shareImg: '',
|
|
share_img: false,
|
|
show_share: false,
|
|
config: {mainColor: '#15716e'}
|
|
}
|
|
},
|
|
computed: {
|
|
showGoodsSpecPrice(){
|
|
let goods_detail = this.goods_detail;
|
|
let stores = this.goods_stock.stores;
|
|
let specs = this.goods_stock.specs;
|
|
|
|
if(this.$isRight(specs)){ // 第一种情况，存在规格
|
|
let selectEnd = true; // 是否选择完所有规格
|
|
let specs_list = []; // 将对象转成数组
|
|
for(let i in specs){
|
|
specs_list.push(specs[i]);
|
|
if(specs[i].spec_current == null){
|
|
selectEnd = false;
|
|
}
|
|
}
|
|
|
|
if(!selectEnd){ // 未选完规格
|
|
return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
|
|
}
|
|
|
|
let ids = []; // 取出所有规格id
|
|
specs_list.map((item, index) => {
|
|
console.log("item.list[item.spec_current]", item.list[item.spec_current])
|
|
ids.push(item.list[item.spec_current].id);
|
|
})
|
|
|
|
ids.sort(function(a, b){ // 对所有规格id进行排序，果酱原则，规格从小到大取出商品信息
|
|
return a - b;
|
|
})
|
|
|
|
let idPath = ids.join('-'); // 将ids转成字符串拼接形式
|
|
return stores[idPath].price; // 收工
|
|
|
|
}else{ // 该商品没有规格
|
|
return `￥${goods_detail.min_price} - ￥${goods_detail.max_price}`;
|
|
}
|
|
},
|
|
showSpec(){
|
|
let specs = this.goods_stock.specs;
|
|
let str = '';
|
|
for(let i in specs){
|
|
if(specs[i].spec_current != null){
|
|
str += specs[i].list[specs[i].spec_current].value +';';
|
|
}
|
|
}
|
|
if(str == ''){
|
|
str = '请选择规格'
|
|
}
|
|
return str;
|
|
},
|
|
getSpecImage(){
|
|
let specs = this.goods_stock.specs;
|
|
let img = '';
|
|
for(let i in specs){
|
|
if(specs[i].spec_current != null){
|
|
img = specs[i].list[specs[i].spec_current].spec_img;
|
|
}
|
|
}
|
|
if(!img){
|
|
img = this.goods_detail.img;
|
|
}
|
|
return img;
|
|
}
|
|
},
|
|
onLoad(options){
|
|
console.log("options", options)
|
|
this.token = this.$cookieStorage.get('user_token');
|
|
this.goods_id = options.id;
|
|
this.getNewdetail();
|
|
this.getGoodsStock(); // 获取商品库存、规格信息
|
|
this.getcarNum()
|
|
},
|
|
methods: {
|
|
getcarNum() {
|
|
this.$http
|
|
.get({
|
|
api: 'api/shopping/cart/count',
|
|
header: {
|
|
Authorization: this.$cookieStorage.get('user_token')
|
|
},
|
|
})
|
|
.then(res => {
|
|
if (res.data.code == 200) {
|
|
if(res.data.data == null) {
|
|
this.car_num = 0;
|
|
}else {
|
|
this.car_num = res.data.data;
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
});
|
|
},
|
|
// 切换商品收藏
|
|
switchCollect(){
|
|
if(!this.token){
|
|
this.$url('/pages/login/index');
|
|
return;
|
|
}
|
|
this.addCollcet()
|
|
},
|
|
//收藏
|
|
addCollcet() {
|
|
this.$http.post({
|
|
api: 'api/collect/create',
|
|
data: {
|
|
type:'jc_goods',
|
|
collect_id: this.goods_detail.id,
|
|
},
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
this.$msg(res.data.data);
|
|
this.getNewdetail();
|
|
}).catch(err => {
|
|
console.log("====", err);
|
|
})
|
|
},
|
|
// 加入购物车和立即购买
|
|
shoot(type){
|
|
this.click_type = type;
|
|
if(this.$isRight(this.goods_stock.specs)){
|
|
this.show_popup = true;
|
|
}else{
|
|
this.confirm();
|
|
}
|
|
},
|
|
// 选规格提交
|
|
specConfirm(){
|
|
let specs = this.goods_stock.specs;
|
|
let flag = true;
|
|
for(let i in specs){
|
|
if(specs[i].spec_current == null){
|
|
flag = false;
|
|
}
|
|
}
|
|
if(flag){
|
|
this.confirm();
|
|
}else{
|
|
this.$msg('您未选完整规格')
|
|
}
|
|
},
|
|
// 商品选规格
|
|
activeSpec(key, index){
|
|
let obj = this.goods_stock.specs;
|
|
if(obj[key]['spec_current'] == index){
|
|
obj[key]['spec_current'] = null;
|
|
}else{
|
|
obj[key]['spec_current'] = index;
|
|
}
|
|
this.$set(this.goods_stock, 'specs', obj);
|
|
},
|
|
// 商品加减
|
|
changeNum(type){
|
|
if(type == 'add'){
|
|
if(this.goods_num < 10){
|
|
this.goods_num++;
|
|
}
|
|
}else if(type == 'less'){
|
|
if(this.goods_num > 1){
|
|
this.goods_num--;
|
|
}
|
|
}
|
|
},
|
|
// 跳转至下单页
|
|
confirm(){
|
|
if(this.is_date_finish){
|
|
return this.$msg('活动已结束');
|
|
}
|
|
let goods_detail = this.goods_detail;
|
|
let specs = this.goods_stock.specs;
|
|
let stores = this.goods_stock.stores;
|
|
let par = {};
|
|
let have_specs = ''; // 有规格的商品，规格id拼接
|
|
let no_specs = ''; // 没有规格的商品，直接取商品id
|
|
|
|
if(this.$isRight(specs)){ // 有规格的商品
|
|
let attributes = {
|
|
com_id: goods_detail.id,
|
|
img: goods_detail.img
|
|
}
|
|
let specs_list = []; // 将对象转成数组
|
|
let ids = []; // 取出所有规格id
|
|
for(let i in specs){
|
|
specs_list.push(specs[i]);
|
|
ids.push(specs[i].list[specs[i].spec_current].id);
|
|
attributes[specs[i].label_key] = specs[i].list[specs[i].spec_current].value; // 取出规格label_key和value
|
|
}
|
|
ids.sort(function(a, b){ // 对所有规格id进行排序，果酱原则，规格从小到大取出商品信息
|
|
return a - b;
|
|
})
|
|
|
|
let idPath = ids.join('-'); // 将ids转成字符串拼接形式
|
|
let specsValue = specs_list[0].list[specs_list[0].spec_current].value; // 取出第一个规格的value
|
|
attributes['sku'] = goods_detail.goods_no +'-'+ specsValue;
|
|
|
|
par = {
|
|
attributes: attributes,
|
|
id: stores[idPath].id,
|
|
product_id: stores[idPath].id,
|
|
price: stores[idPath].price,
|
|
store_count: stores[idPath].store,
|
|
market_price: goods_detail.market_price,
|
|
name: goods_detail.name,
|
|
qty: this.goods_num
|
|
}
|
|
have_specs = stores[idPath].id; // 收工
|
|
|
|
}else{ // 没有规格的商品
|
|
par = {
|
|
attributes: {
|
|
com_id: goods_detail.id,
|
|
img: goods_detail.img
|
|
},
|
|
id: goods_detail.id,
|
|
product_id: goods_detail.id,
|
|
price: goods_detail.sell_price,
|
|
store_count: goods_detail.store_nums,
|
|
market_price: goods_detail.market_price,
|
|
name: goods_detail.name,
|
|
qty: this.goods_num
|
|
}
|
|
no_specs = goods_detail.id;
|
|
}
|
|
|
|
if(this.$isRight(this.seckill)){ // 秒杀商品
|
|
delete par.product_id;
|
|
par.seckill_goods_id = this.seckill.item_id;
|
|
par.seckill_item_id = this.seckill.id;
|
|
par.price = this.seckill.seckill_price;
|
|
par.total = new Bigc(this.goods_num).times(this.seckill.seckill_price).round(2, 0);
|
|
}
|
|
|
|
uni.showLoading({
|
|
title: '正在提交'
|
|
})
|
|
this.show_popup = false;
|
|
if(this.click_type == 1){ // 加入购物车
|
|
this.$http.post({
|
|
api: 'api/shopping/cart',
|
|
data: {"0": par},
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
this.$msg('加入购物车成功', {icon: 'success'})
|
|
this.getcarNum()
|
|
}else{
|
|
this.$msg('加入购物车失败', {icon: 'error'})
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(err => uni.hideLoading())
|
|
}else if(this.click_type == 2){ //普通商品结算
|
|
this.$cookieStorage.set('order_confirm', par);
|
|
uni.hideLoading();
|
|
this.$url('/pages/order/confirm/confirm');
|
|
// this.$http.post({
|
|
// api: 'api/shopping/order/checkout',
|
|
// data: par,
|
|
// header: {
|
|
// Authorization: this.token
|
|
// }
|
|
// }).then(res => {
|
|
// if(res.data.code == 200){
|
|
// this.$url('/pages/order/confirm/confirm');
|
|
// }else{
|
|
// this.$msg('提交失败', {icon: 'error'})
|
|
// }
|
|
// uni.hideLoading()
|
|
// }).catch(err => uni.hideLoading())
|
|
}else if(this.click_type == 3) { // 积分商品结算
|
|
if(have_specs) {
|
|
uni.hideLoading()
|
|
this.$url('/pages/order/pointconfirm/confirm?quantity='+this.goods_num+'&product_id='+have_specs+'&goods_type=0')
|
|
}else {
|
|
uni.hideLoading()
|
|
this.$url('/pages/order/pointconfirm/confirm?quantity='+this.goods_num+'&goods_id='+no_specs+'&goods_type=0')
|
|
}
|
|
}
|
|
},
|
|
// 点击页面分享按钮
|
|
shareGraphic(){
|
|
// this.getCreateShareImg();
|
|
this.getShearImg();
|
|
},
|
|
// 获取分享图片
|
|
getShearImg() {
|
|
wx.showLoading({
|
|
title: "生成中",
|
|
mask: true
|
|
});
|
|
this.$http.get({
|
|
api: 'api/distribution/createMiniShareImg',
|
|
header: {
|
|
Authorization: this.token
|
|
},
|
|
data: {
|
|
goods_id: this.goods_id
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
|
|
if (res.status) {
|
|
this.setData({
|
|
shareImg: res.data.image
|
|
});
|
|
|
|
setTimeout(() => {
|
|
this.changeImg();
|
|
}, 100)
|
|
} else {
|
|
wx.showModal({
|
|
content: res.message || '请求失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
} else {
|
|
wx.showModal({
|
|
content: '请求失败',
|
|
showCancel: false
|
|
});
|
|
}
|
|
|
|
wx.hideLoading();
|
|
this.changeShare();
|
|
}).catch(rej => {
|
|
wx.showModal({
|
|
content: '内部错误',
|
|
showCancel: false
|
|
});
|
|
wx.hideLoading();
|
|
this.changeShare();
|
|
});
|
|
},
|
|
// 弹出图片
|
|
changeImg() {
|
|
this.share_img = !this.share_img;
|
|
},
|
|
// 弹出分享
|
|
changeShare() {
|
|
this.setData({
|
|
show_share: !this.show_share
|
|
});
|
|
},
|
|
// 下载图片
|
|
downImg() {
|
|
if (this.shareImg) {
|
|
wx.showLoading({
|
|
title: '正在下载',
|
|
mask: true
|
|
});
|
|
this.$http.dowloadFile({
|
|
api: this.shareImg
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
wx.getSetting({
|
|
success: ret => {
|
|
// 如果之前没有授权
|
|
if (!ret.authSetting['scope.writePhotosAlbum']) {
|
|
wx.authorize({
|
|
scope: 'scope.writePhotosAlbum',
|
|
success: rej => {
|
|
this.saveImg(res.tempFilePath);
|
|
},
|
|
// 用户拒绝授权
|
|
fail: ret => {
|
|
// this.setData({
|
|
// is_refused: true
|
|
// });
|
|
wx.hideLoading();
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '由于您拒绝授权，保存图片失败！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
});
|
|
} else {
|
|
this.saveImg(res.tempFilePath);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '下载图片失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}, err => {});
|
|
}
|
|
},
|
|
// 保存图片
|
|
saveImg(path) {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: path,
|
|
success: res => {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '保存图片成功',
|
|
icon: 'success'
|
|
});
|
|
},
|
|
fail: rej => {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '保存图片失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//请求h5的图片接口
|
|
getCreateShareImg(){
|
|
wx.showLoading({
|
|
title:"生成中",
|
|
mask:true
|
|
})
|
|
let origin = window.location.origin;
|
|
let share_url = origin+'/pages/store/detail/detail';
|
|
this.$http.get({
|
|
api:'api/distribution/createH5ShareImg',
|
|
data:{
|
|
goods_id:this.id,
|
|
share_url:share_url
|
|
}
|
|
}).then(res=>{
|
|
res = res.data;
|
|
if(res.status){
|
|
this.qr_code_image = res.data.image;
|
|
|
|
if(this.qr_code_image){
|
|
this.share_gaphic =!this.share_gaphic;
|
|
this.is_toggle_share = false;
|
|
}
|
|
} else{
|
|
wx.showModal({
|
|
content: res.message || '请求失败，请重试',
|
|
showCancel: false
|
|
});
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(rej=>{
|
|
wx.hideLoading()
|
|
wx.showModal({
|
|
content: rej.message || '内部错误，请重试',
|
|
showCancel: false
|
|
});
|
|
})
|
|
|
|
},
|
|
// 商品详情
|
|
getNewdetail(){
|
|
this.$http.get({
|
|
api: 'api/store/detail/'+ this.goods_id,
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
console.log("===---", res);
|
|
if(res.data.status){
|
|
let meta = res.data.meta;
|
|
let goods_detail = res.data.data;
|
|
this.goods_detail = goods_detail;
|
|
this.pictures = [res.data.data.img];
|
|
this.is_collect = Boolean(res.data.data.is_collect) || false;
|
|
this.goods_content = this.formatRichText(goods_detail.content);
|
|
let type = 'mail';
|
|
if(this.$isRight(goods_detail.is_largess)){
|
|
type = 'point';
|
|
}
|
|
if(this.$isRight(meta.seckill)){
|
|
type = 'seckill';
|
|
this.seckill = meta.seckill;
|
|
let currentDate = this.$shared.recordTime();
|
|
this.time = new Date(meta.seckill.ends_at).getTime() - new Date(currentDate).getTime()
|
|
}
|
|
if(type != 'point'){
|
|
this.getBrandDetail(goods_detail.brand_id);
|
|
}
|
|
if(this.$isRight(meta.discounts)){
|
|
this.coupons = meta.discounts.coupons;
|
|
}
|
|
this.type = type;
|
|
}else{
|
|
this.$msg(res.data.message || '网络繁忙请稍后再试').then(() => {
|
|
this.$toBack();
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
console.log("====", err);
|
|
})
|
|
},
|
|
// 获取商家信息
|
|
getBrandDetail(brand_id){
|
|
this.$http.get({
|
|
api: 'api/brand/detail',
|
|
data: {
|
|
brand_id: brand_id
|
|
},
|
|
header: {
|
|
Authorization: this.token
|
|
}
|
|
}).then(res => {
|
|
this.brand_detail = res.data.data;
|
|
})
|
|
},
|
|
// 获取商品库存信息
|
|
getGoodsStock(){
|
|
this.$http.get({
|
|
api: `api/store/detail/${this.goods_id}/stock`
|
|
}).then(res => {
|
|
let data = res.data.data;
|
|
for(let i in data.specs){
|
|
data.specs[i].spec_current = null;
|
|
}
|
|
this.goods_stock = data;
|
|
})
|
|
},
|
|
// 拨打电话
|
|
makePhoneCall(phoneStr){
|
|
uni.makePhoneCall({
|
|
phoneNumber: String(phoneStr)
|
|
})
|
|
},
|
|
// 打开地图 PS.暂时用不到
|
|
openMap(){
|
|
let { address, lat, lng } = this.goods_detail?.store || {};
|
|
uni.openLocation({
|
|
longitude: Number(lat),
|
|
latitude: Number(lng),
|
|
scale: 20,
|
|
name: address
|
|
});
|
|
},
|
|
// 预览图片
|
|
lookImg(index){
|
|
this.$u.throttle(() => {
|
|
let banners = this.pictures;
|
|
uni.previewImage({
|
|
urls: banners,
|
|
current: index
|
|
})
|
|
}, 200);
|
|
},
|
|
// 倒计时结束
|
|
dateFinish(){
|
|
this.is_date_finish = true;
|
|
},
|
|
// 富文本处理
|
|
formatRichText(richText){
|
|
if(richText != null){
|
|
let newRichText= richText.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;
|
|
});
|
|
newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
|
|
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
|
|
return match;
|
|
});
|
|
newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
|
|
newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
|
|
return newRichText;
|
|
}else{
|
|
return null;
|
|
}
|
|
},
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
},
|
|
onShareAppMessage(){
|
|
let goods = this.goods_detail;
|
|
let title = goods.name;
|
|
let imageUrl = goods.share_cover || goods.cover || goods.img;
|
|
let path = '/pages/route/index?route=detail&id='+ goods.id;
|
|
|
|
return {
|
|
title,
|
|
path,
|
|
imageUrl
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #f5f5f5;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.angle-mark{
|
|
position: absolute;
|
|
right: 4rpx;
|
|
top: 4rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: #15716E;
|
|
border-radius: 50%;
|
|
font-size: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
//商品上去scrollview部分
|
|
.scroll-view{
|
|
height: 310rpx;
|
|
width: 100%;
|
|
// margin-top: 20rpx;
|
|
padding: 0 30rpx 30rpx 30rpx;
|
|
background-color: white;
|
|
.scroll-content{
|
|
display: flex;
|
|
width: 100%;
|
|
.goods-item{
|
|
margin-right: 15rpx;
|
|
width: 180rpx;
|
|
}
|
|
.goods-img{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.goods-info{
|
|
text-align: center;
|
|
color: #222222;
|
|
&>view:nth-child(1n){
|
|
font-size: 24rpx;
|
|
}
|
|
&>view:nth-child(2n){
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #F63434;
|
|
}
|
|
}
|
|
.more-box{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
background-color: #EEEEEE;
|
|
text-align: center;
|
|
line-height: 180rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
//scrollview结束
|
|
.tag-father {
|
|
position: relative;
|
|
}
|
|
.head-tag {
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background-color: #15716E;
|
|
border: 1rpx solid #FFFFFF;
|
|
position: absolute;
|
|
left: 76rpx;
|
|
top: 86rpx;
|
|
z-index: 99;
|
|
}
|
|
.qzone-img {
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
&:nth-child(n + 4) {
|
|
margin-top: 12rpx;
|
|
}
|
|
}
|
|
.user-top {
|
|
background-color: #F3F8F8;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
}
|
|
.head-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.head-btn {
|
|
display: flex;
|
|
width: max-content;
|
|
height: 45rpx;
|
|
background: white;
|
|
border: 2rpx solid #15716E;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
color: #15716E;
|
|
justify-content: space-between;
|
|
border-radius: 35rpx;
|
|
padding: 10rpx!important;
|
|
}
|
|
.swiper-box{
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
background-color: #FFFFFF;
|
|
position: relative;
|
|
.seckill-box{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
width: 100%;
|
|
height: 77rpx;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.head-info{
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
padding-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
// .price>view:nth-of-type(1){
|
|
// color: #FF0000;
|
|
// margin-right: 22rpx;
|
|
// font-weight: bold;
|
|
// }
|
|
.price>view:nth-of-type(1){
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
margin-right: 22rpx;
|
|
}
|
|
.price>view:nth-of-type(2){
|
|
width: max-content;
|
|
padding: 0 18rpx;
|
|
height: 46rpx;
|
|
background-color: #1998FE;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
.label-box{
|
|
min-height: 130rpx;
|
|
width: 100%;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 30rpx 0 10rpx 0;
|
|
.label-item{
|
|
width: max-content;
|
|
padding: 20rpx;
|
|
height: 70rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #1998FE;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #1998FE;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-box{
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
margin-top: 20rpx;
|
|
.shop-img{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.goods-detail{
|
|
width: 750rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
.goods-img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.extra{
|
|
width: 100%;
|
|
height: 110rpx;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.fixed-bottom{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #FFFFFF;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 32rpx;
|
|
border-top: 1rpx solid #e5e5e5;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
.icon-item{
|
|
text-align: center;
|
|
margin-right: 16rpx;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
line-height: initial;
|
|
font-size: 28rpx;
|
|
font-weight: inherit;
|
|
margin-right: 10rpx;
|
|
padding: 0;
|
|
width: 88rpx;
|
|
position: relative;
|
|
color: #555555;
|
|
&:first-child{
|
|
padding-left: 0;
|
|
}
|
|
.icon-img{
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
font-size: 40rpx;
|
|
line-height: 1;
|
|
color: #555555;
|
|
}
|
|
}
|
|
.btn1{
|
|
margin: 0;
|
|
width: max-content;
|
|
height: 80rpx;
|
|
background-color: rgba(21, 113, 110, 0.1);
|
|
color: #15716E;
|
|
line-height: 80rpx;
|
|
font-size: 32rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 42rpx;
|
|
font-size: 26rpx;
|
|
border: 2rpx solid #15716E;
|
|
}
|
|
.btn{
|
|
margin: 0;
|
|
padding: 0 20rpx;
|
|
width: max-content;
|
|
height: 80rpx;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
font-size: 26rpx;
|
|
border-radius: 42rpx;
|
|
}
|
|
}
|
|
|
|
.popup-content{
|
|
height: max-content;
|
|
width: 750rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx !important;
|
|
padding: 40rpx 32rpx;
|
|
max-height: 80vh;
|
|
overflow-y: scroll;
|
|
.popup-head{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.goods-img{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 2rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.goods-info{
|
|
width: 400rpx;
|
|
height: 150rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
.price{
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #F63434;
|
|
line-height: 1;
|
|
}
|
|
.goods-name{
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
.spec-title{
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
margin-top: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.spec-item{
|
|
min-width: 122rpx;
|
|
max-width: max-content;
|
|
height: 64rpx;
|
|
border-radius: 33rpx;
|
|
border: 2rpx solid #555555;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 0 20rpx;
|
|
// &:nth-child(4n){
|
|
// margin-right: 0rpx;
|
|
// }
|
|
// &:nth-child(n+5){
|
|
// margin-top: 20rpx;
|
|
// }
|
|
}
|
|
.spec-active{
|
|
border: none;
|
|
background-color: #15716E;
|
|
color: #FFFFFF;
|
|
}
|
|
.input{
|
|
width: 40rpx;
|
|
height: 45rpx;
|
|
border-radius: 2rpx;
|
|
background-color: #F3F8F7;
|
|
text-align: center;
|
|
}
|
|
.num-btn{
|
|
width: 36rpx;
|
|
}
|
|
.comfirm-btn{
|
|
width: 550rpx;
|
|
height: 100rpx;
|
|
background: #15716E;
|
|
border-radius: 50rpx;
|
|
color: #FFFFFF;
|
|
line-height: 100rpx;
|
|
margin-top: 62rpx;
|
|
}
|
|
}
|
|
|
|
//分享到朋友圈弹出
|
|
.share-img-box {
|
|
background:rgba(0,0,0,.8);
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
z-index: 50;
|
|
transition:all .3s linear;
|
|
|
|
.imgs-box {
|
|
background: #F3F3F3;
|
|
border-radius: 10px;
|
|
margin:20px;
|
|
overflow: hidden;
|
|
.img{
|
|
box-shadow:0px 4px 8px 0px rgba(155,155,155,0.5);
|
|
border-radius: 6px;
|
|
margin: 30px;
|
|
box-sizing: border-box;
|
|
|
|
image{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.text {
|
|
text-align: center;
|
|
margin-top: 22px;
|
|
font-size: 12px;
|
|
color: #9B9B9B;
|
|
}
|
|
.save {
|
|
background: #15716e;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
margin: 10px 20px;
|
|
}
|
|
i{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
color: #CCCCCC;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
&.cur{
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
.share-btn{
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
background-color: transparent;
|
|
}
|
|
</style>
|