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.
 
 
 
 
 
 
yanzong_qianduan/pages/goods/detail.vue

1963 lines
45 KiB

<template>
<view class="detail">
<u-navbar>
<view class="slot-wrap">
<image style="width: 50rpx; height: 50rpx;" @click="goHome()" :src="$picUrl+'/static/detail/home.png'">
</image>
<view class="search">
<input type="text" @click="toSearch()" disabled placeholder="iPhone15" class="searInput" />
</view>
</view>
</u-navbar>
<view class="head">
<view class="share" @click="shareImg()">
<view class="sp"></view>
<image :src="$picUrl+'/static/detail/share.png'" class="shareIcon" @click="shareImg"></image>
<button open-type="share"></button>
</view>
<view class="swiper">
<swiper class="swiper" :circular="true" autoplay @change="changeSwiper">
<swiper-item v-for="(item,index) in goods.goods_images1" :key="index" @click="previewImage(index)">
<image :src="item" class="goodsImg"></image>
</swiper-item>
</swiper>
<view class="dots" v-if="goods.goods_images && goods.goods_images.length> 0">
{{(currenIndex+1)+"/"+goods.goods_images.length}}
</view>
</view>
</view>
<view class="goodsInfo">
<view class="goodsPrice">
<view class="left">
<view class="leftPrice">
<text>¥</text>{{goods.goods_price_min?Number(goods.goods_price_min):0}}
</view>
<view class="sellPrice" v-if="goods.goods_price_min_dealer">
<text
class="sellLeft">分销价</text>¥{{goods.goods_price_min_dealer?Number(goods.goods_price_min_dealer):0}}
</view>
<view class="sellPrice" v-if="goods.goods_price_min_plus">
<text class="sellLeft">会员价</text>¥{{goods.goods_price_min_plus?Number(goods.goods_price_min_plus):0}}
</view>
</view>
<view class="right">
<view class="rightPrice">
¥{{goods.line_price_min?Number(goods.line_price_min):0}}
</view>
<view class="rightInfo">
<image :src="$picUrl+'/static/detail/jiangjia.png'"></image>
</view>
</view>
</view>
<view class="pro" v-if="isLogin || userInfo.user_type==10">
<view class="proMem">
<text v-if="userInfo.user_type==10">Plus</text>
<text v-if="userInfo.user_type==20">分销</text>
PRO会员
</view>
<view class="proInfo">
开通<text v-if="userInfo.user_type==10">Plus</text>
<text v-if="userInfo.user_type==20">分销</text>会员预计再省<text style="color: #FF1D1D;">30</text>元
</view>
<view class="proBtn" @click="goMember()">
立即开通
</view>
</view>
<view class="goodsDetail">
<view class="goodsName">
{{goods.goods_name}}
</view>
<view class="goodsOpera">
<view class="goodsNum" @click="copyNum(goods.skuList[0].goods_sku_id)"
v-if="goods.specList && goods.specList.length>0">
<text>{{goods.skuList[0].goods_sku_id}}</text>
<image :src="$picUrl+'/static/detail/copy.png'"></image>
</view>
<view v-if="goods.goods_no" class="goodsNum" @click="copyNum(goods.goods_no)">
<text>{{goods.goods_no}}</text>
<image :src="$picUrl+'/static/detail/copy.png'"></image>
</view>
<view class="operaImg">
<image :src="$picUrl+'/static/detail/miaosha.png'" v-if="isSeckill" class="tips"></image>
<image :src="$picUrl+'/static/detail/tip.png'" v-if="goods_sku_no" @click="toJDdetal()" class="tips">
</image>
<!-- <image :src="$picUrl+'/static/detail/ys.png'" class="tips"></image> -->
</view>
</view>
<view class="rank" @click="goRanking()" v-if="goods && goods.category">
<text>排行榜 {{goods.category.name}}热搜榜第{{goods.paihang}}名</text>
<image :src="$picUrl+'/static/detail/rightIcon.png'"></image>
</view>
</view>
</view>
<view class="orderInfo">
<!-- <template v-if="userInfo.user_type == 40">
<view class="chosed" v-if="goods.spec_type == 20">
<view class="title">已选</view>
<view class="info" style="justify-content: flex-start;" v-if="goods.skuList.length>0">
<text v-for="(a,idx) in goods.skuList[0].goods_props" :key="idx" style="margin-right: 10rpx;">{{a.group.name}}{{a.value.name}}</text>1件
</view>
<u-icon name="arrow-right" color="#7C7C7C"></u-icon>
</view>
<view class="chosed" v-else>
<view class="title">已选</view>
<view class="info">1件</view>
<u-icon name="arrow-right" color="#7C7C7C"></u-icon>
</view>
</template> -->
<view class="chosed" v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num > 0">
<view class="title">送至</view>
<view class="info">
<view class="infoLeft">
现货
<image :src="$picUrl+'/static/detail/rightIcon.png'"></image>
</view>
<view class="box" @click="choseAddress()">
<view class="address">
{{addressInfo.region?addressInfo.region.province +'-'+addressInfo.region.city+'-'+addressInfo.region.region:'全国'}}
</view>
<u-icon name="arrow-right" color="#7C7C7C"></u-icon>
</view>
</view>
</view>
<view class="chosed">
<view class="serve">
<view class="serveInfo">
商家
</view>
</view>
<view class="box" @click="toFuwu()">
<view class="business">
<view class="busSour">
<text>商家来源:平台认证商户</text>
</view>
<view class="busSour">
<text>商家名称:{{cityInfo.shop_name}}</text>
</view>
</view>
<u-icon name="arrow-right" style="float: right;" color="#7C7C7C"></u-icon>
</view>
</view>
<view class="chosed" v-if="serveList.length>0">
<view class="title">服务</view>
<view class="info">
<image :src="$picUrl+'/static/detail/buy.png'" class="buy"></image>
<text class="li" v-for="(item,index) in serveList" :key="index"
style="margin-right: 5rpx;">{{item.name}}</text>
</view>
</view>
<view class="chosed" v-else>
<view class="title">服务</view>
<view class="info">
<image :src="$picUrl+'/static/detail/buy.png'" class="buy"></image>
<text class="li" style="margin-right: 5rpx;">正品保障</text>
<text class="li" style="margin-right: 5rpx;">全程跟踪</text>
</view>
</view>
</view>
<view class="about">
<view class="aboutHead">
<view class="aboutSuggest">
相关推荐
</view>
<!-- <view class="more">
查看更多
</view> -->
</view>
<view class="goodsList">
<view class="goodsItem" v-for="(item,index) in suggestGoodsList" :key="index"
@click="toDetail(item.goods_id)">
<view class="img">
<image :src="item.goods_image" mode="" class="goodsImg"></image>
</view>
<view class="goodsName ">
{{item.goods_name}}
</view>
<view class="price">
¥<text>{{item.goods_price_min}}</text>
</view>
</view>
</view>
</view>
<view class="detail-content" v-html="goods.content"></view>
<view class="footer">
<view class="fooLeft">
<view class="footerCus firstBtn" v-if="isLogin == false" @click="addCar()">
<view class="cusIcon">
<image src="/static/detail/customer.png"></image>
</view>
<view class="customer">
客服
</view>
</view>
<view class="footerCus firstBtn" v-else>
<view class="cusIcon">
<image src="/static/detail/customer.png"></image>
</view>
<view class="customer">
客服
</view>
<button open-type="contact"></button>
</view>
<view class="footerCus " style="position: relative;" @click="shoppingCart()">
<view v-if="cartTotal > 0" class="uni-tabbar__badge">
{{ cartTotal > 99 ? '99+' : cartTotal }}
</view>
<view class="cusIcon">
<image src="/static/detail/car.png" mode=""></image>
</view>
<view class="customer car">
购物车
</view>
</view>
</view>
<view class="fooRight" v-if="isLogin && userInfo.user_type == 40">
<template v-if="goods.status == 20">
<view class="btn-bg">
已下架
</view>
</template>
<template v-else>
<view class="btn-bg" v-if="goods.spec_type == 20" style="background-color: #FF1D1D;"
@click="choseSku(3)">
修改价格
</view>
<view class="btn-bg" v-else style="background-color: #FF1D1D;" @click="openPirce(1)">
修改价格
</view>
<view class="btn-bg" style="background-color: #FF1D1D;margin-left:40rpx;" @click="setPirce()">
设置秒杀价
</view>
</template>
</view>
<view class="fooRight" v-else>
<template v-if="goods.status == 20">
<view class="btn-bg">
已下架
</view>
</template>
<template v-else>
<template v-if="goods.skuList && goods.skuList.length > 0 && goods.skuList[0].stock_num == 0">
<view class="btn-bg">
暂无库存
</view>
</template>
<template v-else>
<template v-if="!isPre">
<template v-if="isSeckill">
<template v-if="isBuy">
<template v-if="seckillText=='距离'">
<view class="addCar" @click="choseSku(2)">
加入购物车
</view>
<view class="buyNow" @click="choseSku(3)">
立即购买
</view>
</template>
<template v-else>
<view class="btn-bg">
未到时间
</view>
</template>
</template>
<template v-else>
<view class="btn-bg">
已下架
</view>
</template>
</template>
<template v-else>
<view class="addCar" @click="choseSku(2)">
加入购物车
</view>
<view class="buyNow" @click="choseSku(3)">
立即购买
</view>
</template>
</template>
<template v-if="isPre">
<view class="buyNow" @click="onReservation()" v-if="isBuy > 0">
立即预约
</view>
<view class="btn-bg" v-else>
已失效
</view>
</template>
</template>
</template>
</view>
</view>
<view class="dia" v-if="openDialog">
<view class="preSuc" v-if="shareType=='pre'">
<view class="preImg">
<image src="../../static/order/ld.png" mode="" class="ldImg"></image>
</view>
<view class="preTitle">
预约成功
</view>
<view class="iKnow" @click="onKonw">
查看预约记录
</view>
</view>
<view class="setMs" v-if="shareType=='setPrice'">
<view class="msprice">
设置商品价格
</view>
<view class="msLine">
<u-line class="u-line"></u-line>
</view>
<view class="msp">
<text>成本价格:</text>
<input type="text" v-model="cost_price" class="inp" placeholder="成本价格" />
</view>
<view class="msp">
<text>商品价格:</text>
<input type="text" v-model="max_price" placeholder="商品价格" class="inp" />
</view>
<view class="operaBtn">
<view class="cancel btnComm" @click="shareCancel(1)">
取消
</view>
<view class="sureBtn btnComm" @click="toUnpdatePrice()">
确定
</view>
</view>
</view>
<view class="shareWechat" v-if="shareType=='share'">
<view class="shareGoods">
<image :src="goods.goods_image" mode="" class="shareImg"></image>
</view>
<view class="shareInfo">
<view class="shareGoodsInfo">
{{goods.goods_name}}
</view>
<view class="sharePrice">
¥{{goods.goods_price_min?Number(goods.goods_price_min):goods.goods_price_min}}
</view>
</view>
<view class="shareOpera">
<view class="operaItem" @click="toHaibao(2)">
<view class="imgIcon">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText">
复制文案
</view>
</view>
<view class="operaItem">
<view class="imgIcon weChatIcon">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText">微信好友
<button open-type="share" @click="shareWechat"></button>
</view>
</view>
<view class="operaItem" @click="toHaibao(1)">
<view class="imgIcon hb">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText">
生成海报
</view>
</view>
</view>
<view class="shareCancel" @click="shareCancel(1)">
取消
</view>
</view>
</view>
<view class="toTop" v-if="isTop" @click="openScrollTo()">
<image :src="$picUrl+'/static/toTop.png?=1'"></image>
</view>
<view v-if="isTodo">
<SkuPopup v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
</view>
<setPrice ref="setRange" @getprice="getprice" />
<!-- 海报图弹层 -->
<goods-poster-popup v-model="showGoodsPosterPopup" :apiCall="posterApiCall" :apiParam="{goodsId}" />
</view>
</template>
<script>
import { getSceneData } from '@/core/app'
import GoodsPosterPopup from '@/components/goods-poster-popup'
import * as GoodsApi from '@/api/goods'
import * as goodsCar from '@/api/cart.js'
import SkuPopup from './components/SkuPopup'
import setPrice from './components/setPrice'
import * as address from '@/api/address.js'
import * as CartApi from '@/api/cart'
export default {
components: {
SkuPopup,
GoodsPosterPopup,
setPrice
},
data() {
return {
goods_sku_no: "",
isTodo: true,
result: {},
max_price: "",
cost_price:'',
markup_rate: "",
showGoodsPosterPopup: false,
cityInfo: {},
currenIndex: 0,
isTop: false,
goodShow: false,
showSkuPopup: false,
allPicture: '',
keyword: '',
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
skuMode: 1,
diaShow: false,
searchValue: '',
isPre: false, //是否预售
pre_id: '', //预售id
isBuy: "", //是否购买
isSeckill: false, //是否秒杀
seckillText: "", //是否秒杀
setPrice: false,
openDialog: false,
goodsId: '',
goods: {
skuList: []
},
suggestGoodsList: [],
userInfo: {},
addressList: [],
addressInfo: {},
serveList: [],
isLogin: false,
selectShop: {},
// 获取商品海报图api方法
posterApiCall: GoodsApi.poster,
// 购物车总数量
cartTotal: 0,
}
},
onLoad(options) {
const that = this;
console.log(options, "oo")
this.isPre = options.isPre ? options.isPre : null
// 记录query参数
// this.onRecordQuery(options)
const scene = getSceneData(options)
this.goodsId = options.goodsId ? parseInt(options.goodsId) : parseInt(scene.gid)
// this.goodsId = options.goodsId ? options.goodsId : null
this.pre_id = options.pre_id ? options.pre_id : null;
this.isSeckill = options.isSeckill ? options.isSeckill : null;
this.isBuy = options.isBuy ? decodeURIComponent(options.isBuy) : null;
this.seckillText = options.seckillText ? decodeURIComponent(options.seckillText) : null;
console.log(this.isBuy)
this.getSuggestGoods()
this.getServeList()
this.getGoodsDetail()
this.cityInfo = uni.getStorageSync("cityInfo");
this.getCartTotal()
uni.$on("onenPrice", function(selectShop) {
that.openPirce();
that.isTodo = false;
that.selectShop = selectShop
that.selectShop.price = that.selectShop.price / 100
})
// uni.$on("checkSelectShop", function(selectShop) {
// console.log("checkSelectShop1",selectShop)
// if(selectShop && selectShop.goods_sku_id){
// that.goodsId = selectShop.goods_id
// that.getGoodsDetail();
// }
// })
},
onShow() {
if (uni.getStorageSync('AccessToken')) {
this.getAddressList()
this.isLogin = true;
this.userInfo = uni.getStorageSync('userInfo');
} else {
this.isLogin = false;
this.userInfo = {}
}
},
onPageScroll(e) {
if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
this.isTop = false
} else {
this.isTop = true
}
},
methods: {
// 记录query参数
onRecordQuery(query) {
const scene = getSceneData(query)
this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
},
getprice(e) {
let that = this
let params = {
goods_id: that.goods.goods_id,
sku_id: that.goods.skuList[0].id,
seckill_price: e.secondPrice,
sec_start_time: e.startTime,
sec_end_time: e.endTime,
is_limit: e.secondQuota,
limit_times: e.quotaNum
}
GoodsApi.editGoodsSeckillPrice(params).then(res => {
if (res.status == 200) {
that.$toast("设置成功");
this.$refs.setRange.afterSale = false;
setTimeout(() => {
that.getGoodsDetail(1);
}, 500)
}
})
.catch()
},
setPirce() {
console.log(this.$refs.setRange)
this.$refs.setRange.afterSale = true;
},
// 获取购物车总数量
getCartTotal() {
const app = this
return new Promise((resolve, reject) => {
CartApi.total()
.then(result => {
app.cartTotal = result.data.cartTotal
resolve(result)
})
.catch(reject)
})
},
//修改商品价格
async toUnpdatePrice() {
const that = this;
if (!that.cost_price) {
uni.showToast({
icon: "none",
title: "成本价格不能为空!"
})
return;
}
if (!that.max_price) {
uni.showToast({
icon: "none",
title: "商品价格不能为空!"
})
return;
}
let sku_id = ""
if (that.goods.spec_type == 20) {
sku_id = that.goods.skuList[0].id
}
let params = {
id: that.goods.goods_id,
goods_price: that.max_price,
cost_price: that.cost_price,
sku_id: sku_id.toString()
}
GoodsApi.editGoodsPrice(params).then(res => {
if (res.status == 200) {
that.$toast("修改成功");
setTimeout(() => {
that.getGoodsDetail(1);
}, 500)
}
})
.catch()
},
//跳转京东小程序详情
toJDdetal() {
wx.navigateToMiniProgram({
appId: 'wx91d27dbf599dff74',
path: '/pages/item/detail/detail?sku=' + this.goods_sku_no,
envVersion: 'release',
success(res) {
// 打开成功
console.log(res);
}
})
},
//修改价格
openPirce(type) {
this.openDialog = true;
this.shareType = 'setPrice'
if (type == 1) {
this.selectShop = {}
this.selectShop.price = this.goods.goods_price_max;
}
},
//门店图片预览
previewImage(i) {
uni.previewImage({
current: this.goods.goods_images1[i],
urls: this.goods.goods_images1
})
},
//监听滚动
changeSwiper(e) {
this.currenIndex = e.detail.current
},
openScrollTo() {
uni.pageScrollTo({
scrollTop: 0
})
},
shareImg() {
this.openDialog = true
this.shareType = 'share'
},
//立即预约
preNow() {
const that = this
let params = {
goods_id: that.goods.goods_id,
pre_id: 1
}
GoodsApi.presale(params).then(res => {
if (res.status == 200) {
that.$toast(res.message)
}
})
.catch()
},
getServeList() {
const that = this
let params = {
goodsId: that.goodsId
}
return new Promise((resolve, reject) => {
GoodsApi.serveList(params).then(res => {
if (res.status == 200) {
that.serveList = res.data.list
}
})
.catch()
})
},
// 预约成功去列表
onKonw() {
uni.navigateTo({
url: '/pages/news/park/recordHistory'
})
},
async onReservation() {
let {
status,
message,
data
} = await GoodsApi.presale({
goods_id: this.goodsId,
pre_id: this.pre_id
});
if (status == 200) {
this.shareType = 'pre';
this.openDialog = true
this.diaShow = true
}
},
// 选择商品规格
getAddressList() {
const that = this
return new Promise((resolve, reject) => {
address.list().then(res => {
if (res.status == 200) {
that.addressList = res.data.list
if (res.data.list && res.data.list.length > 0) {
that.getDefaultAddress()
} else {
console.log(222)
}
}
})
.catch()
})
},
//获取收货地址
getDefaultAddress() {
console.log('5855555')
const that = this
return new Promise((resolve, reject) => {
address.defaultId().then(res => {
if (res.status == 200) {
for (var i = 0; i < that.addressList.length; i++) {
if (res.data.defaultId == that.addressList[i].address_id) {
that.addressInfo = that.addressList[i];
console.log(that.addressInfo, '获取地址')
}
}
}
})
.catch()
})
},
//选择地址
choseAddress() {
if (!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return;
}
if (this.addressList && this.addressList.length > 0) {
uni.navigateTo({
url: '/pages/address/index'
})
} else {
uni.navigateTo({
url: '/pages/address/create'
})
}
},
toSearch() {
uni.navigateTo({
url: "/pages/search/index"
})
},
// 更新购物车数量
onAddCart(total) {
this.getCartTotal()
},
choseSku(skuMode) {
console.log(this.goods)
if (!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return;
}
this.skuMode = skuMode
this.showSkuPopup = true
},
copyNum(msg) {
uni.setClipboardData({
data: (typeof msg == 'number') ? msg.toString() : msg, // 这里是个坑接受字符串类型 value转化为字符串
success: function() {
//调用方法成功
uni.showToast({
title: '复制成功',
icon: 'none',
duration: 2000
})
}
})
},
// 获取商品信息
getGoodsDetail(type) {
const that = this
return new Promise((resolve, reject) => {
GoodsApi.detail(this.goodsId)
.then(result => {
let info = result.data.detail;
that.goods.skuList = [];
that.godds = {}
info.goods_images1 = []
if (info.goods_images && info.goods_images.length > 0) {
info.goods_images.map(a => {
info.goods_images1.push(a.preview_url)
})
}
info.content = info.content
.replace(/style=""/g, '')
.replace(/<img " src=/g, '<img src=')
.replace(/<img src=/g, '<img style="width: 100%; display:block" src=')
// that.goods = info;
Object.keys(info).forEach(item => {
this.$set(this.goods, item, info[item])
// that.goods[item] = info[item]
})
that.goods_sku_no =""
if(info.skuList && info.skuList.length > 0){
that.goods_sku_no = info.skuList[0].goods_sku_no
}
that.allPicture = info.goods_images.length;
if (type == 1) {
that.selectShop = {}
that.max_price = ""
that.markup_rate = ""
that.shareCancel();
}
})
.catch()
})
},
getSuggestGoods() {
// 获取推荐商品列表
const that = this
GoodsApi.recommended()
.then(result => {
console.log(result, '获取推荐商品列表')
let arr = result.data.goodsList
if (arr && arr.length > 0) {
arr.map(a => {
a.goods_price_min = Number(a.goods_price_min)
a.goods_price_max = Number(a.goods_price_max)
a.line_price_min = Number(a.line_price_min)
a.line_price_max = Number(a.line_price_max)
})
}
that.suggestGoodsList = arr
})
.catch()
},
goHome() {
uni.switchTab({
url: '/pages/index/index'
})
},
toDetail(goods_id) {
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + goods_id
})
},
goRanking() {
// 跳转排行榜
uni.navigateTo({
url: '/pages/activity/ranking'
})
},
goMember() {
if (!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return;
}
uni.navigateTo({
url: '/pages/member/index'
})
},
toFuwu() {
uni.navigateTo({
url: "/pages/news/consult/about"
})
},
shoppingCart() {
// 购物车
uni.switchTab({
url: '/pages/cart/index'
})
},
addCar() {
if (!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return;
}
// 加入购物车
const that = this
goodsCar.add(that.goods.goods_id, (that.goods.skuList && that.goods.skuList.length > 0 ? that.goods
.skuList[0].goods_sku_id : ''), that.goods.spec_type == 20 ? 1 : 1)
.then(res => {
if (res.status == 200) {
that.$toast(res.message)
}
})
.catch()
},
buyNow() {
if (!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return;
}
// 立即下单
console.log(this.token, '登录信息')
if (this.goods.stock_total == 0) {
return this.$toast('库存不足,请选择其他商品购买')
}
const item = JSON.stringify(this.goods)
uni.navigateTo({
url: '/pages/sureOrder/index?goodsID=' + encodeURIComponent(item)
})
},
shareCancel() {
this.shareType = "";
this.isTodo = true;
this.openDialog = false;
},
toHaibao(index) {
this.shareCancel();
if (index == 2) {
uni.setClipboardData({
data: this.goods.goods_name,
success() {
uni.getClipboardData({
success() {
uni.showToast({
icon: "none",
title: "复制成功"
})
}
})
}
})
} else {
this.openDialog = false
this.showGoodsPosterPopup = true;
}
},
},
/**
* 分享当前页面
*/
onShareAppMessage() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams({
goodsId: app.goodsId,
})
return {
title: app.goods.goods_name,
imageUrl: app.goods.goods_image,
path: `/pages/goods/detail?${params}`
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
const app = this
return {
title: app.goods.goods_name,
imageUrl: app.goods.goods_image,
path: `/pages/goods/detail?goodsId=${app.goodsId}`
}
}
}
</script>
<style lang="scss" scoped>
.detail {
width: 100%;
height: 100%;
padding-bottom: 150rpx;
.toTop {
position: fixed;
bottom: 150rpx;
right: 32rpx;
width: 99rpx;
height: 99rpx;
border-radius: 50%;
z-index: 19;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 100%;
}
}
&-content {
padding: 30rpx;
font-size: 26rpx;
line-height: 50rpx;
width: 710rpx;
margin: 0 auto;
margin-top: 30rpx;
background-color: #fff;
box-sizing: border-box;
}
}
.slot-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.search {
width: 400rpx;
height: 58rpx;
border-radius: 60rpx;
background-color: #F3F3F3;
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
margin: 0 20rpx;
}
}
.search {
display: flex;
align-items: center;
.icon {
width: 34rpx;
height: 38rpx;
margin: 0 22rpx 0 76rpx;
}
.searInput {
width: 428rpx;
height: 58rpx;
background: #F3F3F3;
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
display: flex;
align-items: center;
.seaIcon {
width: 28rpx;
height: 28rpx;
margin: 0 0 0 26rpx;
}
.input {
flex: 1;
padding-left: 20rpx;
}
}
}
.head {
width: 100%;
height: 750rpx;
position: relative;
}
.share {
z-index: 10;
top: 28rpx;
width: 74rpx;
height: 74rpx;
position: absolute;
background-color: rgba(255, 255, 255, 1);
border-radius: 50%;
text-align: center;
right: 28rpx;
.sp {
width: 54rpx;
height: 54rpx;
display: none;
}
.shareIcon {
width: 54rpx;
height: 54rpx;
margin-top: 10rpx;
}
}
.swiper {
width: 100%;
height: 750rpx;
opacity: 1;
left: 0;
right: 0;
margin: auto;
.goodsImg {
width: 100%;
height: 100%;
}
.dots {
width: 82rpx;
line-height: 56rpx;
background: rgba(38, 38, 38, 0.85);
position: absolute;
bottom: 20rpx;
right: 0;
z-index: 10;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
text-align: center;
border-radius: 56rpx 0 0 56rpx;
}
}
.goodsInfo {
width: 720rpx;
background: #FFFFFF;
border-radius: 6rpx;
padding-bottom: 30rpx;
overflow: hidden;
margin: 20rpx auto 16rpx;
.goodsPrice {
background-image: url('https://www.royaum.com.cn/static/detail/priceback.png');
width: 720rpx;
height: 136rpx;
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
.left {
margin: 0 0 0 28rpx;
.leftPrice {
height: 64rpx;
font-size: 46rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
text {
height: 64rpx;
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
margin-right: 8rpx;
}
}
.sellPrice {
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 34rpx;
.sellLeft {
width: 72rpx;
margin-right: 8rpx;
}
}
}
.right {
margin-right: 50rpx;
.rightPrice {
text-align: center;
height: 48rpx;
font-size: 34rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 48rpx;
text-decoration: line-through;
}
.rightInfo {
width: 125rpx;
height: 26rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
.pro {
background-image: url('https://www.royaum.com.cn/static/detail/pro.png');
background-size: 100% 100%;
width: 690rpx;
height: 82rpx;
display: flex;
align-items: center;
margin: 20rpx 0 0 10rpx;
.proMem {
width: 142rpx;
font-size: 28rpx;
font-weight: 500;
color: #966542;
margin-left: 18rpx;
padding-right: 24rpx;
border-right: 2rpx solid #EFD4B4;
}
.proInfo {
width: 304rpx;
font-size: 24rpx;
font-weight: 500;
color: #966542;
margin: 0 38rpx 0 26rpx;
}
.proBtn {
width: 126rpx;
height: 50rpx;
background: #9F744D;
border-radius: 82rpx;
opacity: 1;
text-align: center;
line-height: 50rpx;
font-size: 24rpx;
font-weight: 500;
color: #FFFFFF;
}
}
.goodsDetail {
.goodsName {
width: 672rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 50rpx;
margin: 28rpx auto 0;
}
.goodsOpera {
margin-left: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
.goodsNum {
text {
display: inline-block;
font-size: 24rpx;
font-weight: 400;
color: #8A8A8A;
margin-right: 4rpx;
}
image {
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-left: 10rpx;
}
}
.operaImg {
margin-right: 34rpx;
image {
width: 49rpx;
height: 49rpx;
}
.tips {
margin-left: 10rpx;
}
}
}
.rank {
width: 670rpx;
height: 58rpx;
background: #FFF3EE;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28rpx;
box-sizing: border-box;
margin: 16rpx auto 0;
text {
font-size: 24rpx;
font-weight: 400;
color: #FF1130;
line-height: 58rpx;
}
image {
width: 8rpx;
height: 14rpx;
}
}
}
}
.orderInfo {
width: 720rpx;
background: #FFFFFF;
border-radius: 6rpx;
opacity: 1;
margin: 16rpx auto 20rpx;
padding: 25rpx 25rpx 10rpx;
box-sizing: border-box;
.chosed {
display: flex;
align-items: flex-start;
padding-bottom: 18rpx;
overflow: hidden;
.title {
font-size: 24rpx;
font-weight: 400;
color: #C4C4C4;
margin-right: 38rpx;
}
.info {
flex: 1;
font-size: 24rpx;
font-weight: 400;
color: #3D3D3D;
display: flex;
align-items: center;
.buy {
width: 114rpx;
height: 23rpx;
margin-right: 10rpx;
display: block;
}
.infoLeft {
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #FE3636;
line-height: 34rpx;
image {
width: 8rpx;
height: 14rpx;
margin: 0 10rpx 0 8rpx;
}
}
.address {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
.serve {
.serveInfo {
width: 48rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #C4C4C4;
line-height: 34rpx;
margin-right: 38rpx;
}
.span {
width: 48rpx;
height: 34rpx;
}
}
.box {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex: 1;
}
.business {
.busSour {
height: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: #3D3D3D;
}
.busName {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
}
}
.about {
width: 720rpx;
// height: 730rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 14rpx 0 0rpx 20rpx;
padding: 24rpx 0 0 36rpx;
.aboutHead {
display: flex;
justify-content: space-between;
.aboutSuggest {
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 40rpx;
}
.more {
width: 96rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #909090;
line-height: 34rpx;
margin-right: 20rpx;
}
}
.goodsList {
display: flex;
flex-wrap: wrap;
margin-top: 30rpx;
padding-bottom: 20rpx;
overflow: hidden;
.goodsItem {
margin-right: 18rpx;
.img {
width: 204rpx;
height: 168rpx;
background: #FBFBFB;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
.goodsImg {
width: 190rpx;
height: 144rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
}
}
.goodsName {
width: 184rpx;
height: 80rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 40rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
word-wrap: break-word;
}
.price {
width: 66rpx;
height: 44rpx;
font-size: 24rpx;
font-weight: 500;
color: #ED2B00;
line-height: 38rpx;
text {
font-size: 32rpx;
}
}
}
}
}
.vacancy {
width: 100%;
height: 150rpx;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 130rpx;
background: #FFFFFF;
box-shadow: -6rpx 14rpx 48rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
display: flex;
align-items: center;
text-align: center;
justify-content: space-between;
.fooLeft {
display: flex;
align-items: center;
}
.fooRight {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 20rpx;
}
.fooRight2 {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 20rpx;
}
.firstBtn {
margin-left: 60rpx;
}
.footerCus {
margin-right: 44rpx;
text-align: center;
position: relative;
.cusIcon {
width: 38rpx;
height: 38rpx;
margin: 0 auto;
image {
width: 100%;
height: 100%;
}
}
button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
.customer {
width: 40rpx;
height: 28rpx;
font-size: 20rpx;
font-weight: 400;
color: #3D3D3D;
line-height: 40rpx;
}
.car {
width: 60rpx;
}
}
.addCar {
width: 196rpx;
height: 78rpx;
background: #FF9E2B;
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
}
.buyNow {
flex: 1;
height: 78rpx;
background: linear-gradient(102deg, #FE5E06 0%, #F3221A 100%);
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
margin-left: 8rpx;
}
.btn-bg {
flex: 1;
height: 78rpx;
background: #cecece;
border-radius: 42rpx;
opacity: 1;
font-size: 24rpx;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
}
}
.dia {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(69, 69, 69, 0.44);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 22;
.preSuc {
width: 560rpx;
height: 400rpx;
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
.preImg {
width: 100rpx;
height: 100rpx;
position: relative;
top: -50rpx;
.ldImg {
width: 100%;
height: 100%;
}
}
.preTitle {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 38rpx;
margin-top: 32rpx;
}
.iKnow {
width: 312rpx;
height: 72rpx;
background: #F55349;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
text-align: center;
line-height: 72rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-top: 70rpx;
}
}
.setMs {
width: 556rpx;
height: 480rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
.msprice {
width: 100%;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #262626;
line-height: 38rpx;
text-align: center;
margin-top: 24rpx;
margin-bottom: 26rpx;
}
.msLine {
margin-bottom: 30rpx;
}
.msp {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30rpx;
.inp {
width: 300rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
border: 2rpx solid #EBEBEB;
margin-left: 20rpx;
line-height: 72rpx;
}
}
.qj {
font-size: 28rpx;
font-weight: 400;
color: #262626;
line-height: 33rpx;
margin-bottom: 34rpx;
.msQj {
position: relative;
left: -218rpx;
}
.date {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16rpx;
.timeCommn {
width: 260rpx;
height: 68rpx;
background: #F1F1F1;
border-radius: 62rpx 62rpx 62rpx 62rpx;
opacity: 1;
line-height: 68rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #929292;
padding-left: 34rpx;
}
.beginTime {
margin-right: 16rpx;
}
.endTime {
margin-left: 20rpx;
}
}
}
.msLimit {
display: flex;
justify-content: space-between;
padding: 0 38rpx 0 42rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #262626;
line-height: 33rpx;
}
.peoLimit {
display: flex;
margin-left: 42rpx;
align-items: center;
.num {
width: 106rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
border: 2rpx solid #EBEBEB;
text-align: center;
line-height: 60rpx;
margin: 0 18rpx 0 16rpx;
}
}
.operaBtn {
display: flex;
justify-content: center;
margin-top: 52rpx;
.btnComm {
width: 216rpx;
height: 70rpx;
background: #EEEEEE;
border-radius: 44rpx 44rpx 44rpx 44rpx;
opacity: 1;
line-height: 70rpx;
text-align: center;
}
.sureBtn {
width: 214rpx;
height: 74rpx;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
opacity: 1;
text-align: center;
line-height: 74rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
margin-left: 24rpx;
}
}
}
.shareWechat {
width: 656rpx;
height: 884rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
display: flex;
flex-direction: column;
padding-top: 24rpx;
.shareGoods {
margin-left: 28rpx;
width: 604rpx;
height: 382rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image {
width: 100%;
height: 100%;
}
}
.shareInfo {
display: flex;
align-items: center;
margin-top: 12rpx;
padding: 0 30rpx;
justify-content: space-between;
.shareGoodsInfo {
width: 400rpx;
height: 120rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 40rpx;
text-align: left;
overflow: hidden;
}
.sharePrice {
height: 64rpx;
font-size: 46rpx;
font-weight: 500;
color: #FF645A;
line-height: 54rpx;
text-align: right;
}
}
.shareOpera {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 36rpx;
margin-bottom: 46rpx;
.operaItem {
position: relative;
.imgIcon {
width: 88rpx;
height: 88rpx;
background: linear-gradient(180deg, #EC6244 0%, #FA938C 100%);
border-radius: 50%;
opacity: 1;
line-height: 88rpx;
text-align: center;
color: #fff;
.iconIm {
font-size: 32rpx;
}
}
.weChatIcon {
background: #28C445;
}
.hb {
background: linear-gradient(180deg, #53A2EE 0%, #6FB2F4 100%);
}
.shareText {
width: 96rpx;
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #000000;
line-height: 60rpx;
button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
}
}
}
.shareCancel {
width: 556rpx;
height: 82rpx;
background: #EEEEEE;
border-radius: 44rpx 44rpx 44rpx 44rpx;
opacity: 1;
font-size: 28rpx;
font-weight: 500;
color: #585858;
line-height: 82rpx;
text-align: center;
left: 0;
right: 0;
margin: auto;
}
}
}
.uni-tabbar__badge {
width: auto;
height: 16px;
line-height: 16px;
border-radius: 16px;
min-width: 16px;
padding: 0 2px;
font-size: 12px;
text-align: center;
white-space: nowrap;
position: absolute;
top: -5px;
right: 1px;
background-color: #f43530;
color: #ffffff;
transform: translate(40%, -20%);
}
::v-deep .u-btn--primary {
background-color: #FF6257 !important;
border-color: #FF6257 !important;
}
</style>