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/seckillDetail.vue

2330 lines
54 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="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" style="width: 100%;height: 100%;object-fit: cover" 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.seckill_price?Number(goods.seckill_price):0}}
</view>
<view class="sellPrice">
<text class="sellLeft"></text>¥{{goods.line_price_min?Number(goods.line_price_min):0}}
</view>
</view>
<view class="right">
<view class="rightPrice" v-if="goods.is_check==1">
<image :src="$picUrl+'/static/detail/shenhe.png'" style="width: 44rpx;height: 42rpx;"></image>
</view>
<view class="rightBox" v-if="!isSeckill">
<image :src="$picUrl+'/static/detail/ben.png'" v-if="userInfo.user_type==40"
style="width: 44rpx;height: 42rpx;"></image>
<image :src="$picUrl+'/static/detail/zhuan.png'" v-if="userInfo.user_type==30"
style="width: 44rpx;height: 38rpx;"></image>
<image :src="$picUrl+'/static/detail/sheng.png'" v-if="userInfo.user_type==20"></image>
<text class="span"
v-if="userInfo.user_type==40">¥{{goods.cost_price_min?Number(goods.cost_price_min):0}}</text>
<text class="span"
v-else>¥{{(goods.line_price_min>0&&goods.goods_price_min>0)?Number((Number(goods.line_price_min)-Number(goods.goods_price_min)).toFixed(2)):0}}</text>
</view>
<view class="rightBox" v-if="isSeckill" style="background:unset;padding:unset;">
<text class="span" style="color: #ffffff;font-size: 45rpx;font-family: STXinwei;">限时抢购</text>
</view>
<view class="rest" v-if="isSeckill"
style="display: inline-flex;color:#ffffff;font-size: 30rpx;margin-top: 5rpx;float: right;font-family: STXinwei;width: 300rpx;">
<text style="margin-right: 20rpx;font-family: STXinwei;">距活动{{seckillText}}</text>
<u-count-down :timestamp="isBuy" format="HH:mm:ss" autoStart
@change="onChangeSeckillCutDownTime">
<view class="date-time" style="font-family: STXinwei;">
<text
class="time">{{timeData.hours>=10?timeData.hours:"0"+Number(timeData.hours)}}</text>
<text class="da">:</text>
<text
class="time">{{timeData.minutes>=10?timeData.minutes:"0"+Number(timeData.minutes)}}</text>
<text class="da">:</text>
<text
class="time">{{timeData.seconds>=10?timeData.seconds:"0"+Number(timeData.seconds)}}</text>
</view>
</u-count-down>
</view>
</view>
</view>
<view class="pro" v-if="userInfo.user_type==10">
<view class="proMem">
<text v-if="userInfo.user_type==10">Plus</text>
<view>会员</view>
</view>
<view class="proInfo">
开通<text v-if="userInfo.user_type==10">Plus</text>
会员预计再省<text style="color: #FF1D1D;">30</text>元
</view>
<view class="proBtn" @click="goMember()">
立即开通
</view>
</view>
<view class="goodsDetail">
<view class="goodsContent">
<view class="goodsName">
{{goods.goods_name}}
</view>
<view class="goodsCircle" @click="shareImg()">
<image :src="$picUrl+'/static/detail/moments.png'" mode="" class="goodsCircleImg"></image>
<view class="goodsCircleText">
分享
</view>
</view>
</view>
<view class="rank" @click="goRanking()" v-if="goods && goods.category">
<text><text style="font-size: 32rpx;font-weight: bold;margin-right: 20rpx;">排行榜</text>
{{goods.category.name}}热搜榜第{{goods.paihang}}名</text>
<image :src="$picUrl+'/static/detail/rightIcon.png'" style="margin-right: 24rpx;"></image>
</view>
<view class="goodsOpera" style="margin-top: 30rpx;">
<!-- @click="toCity" -->
<view class="goodsNum">
<picker mode="multiSelector" @change="multiChange" @columnchange="columnChange"
value="{{multiIndex}}" :range="multiArray" range-key="name">
<image :src="$picUrl+'/static/detail/address.png'"
style="width: 46rpx;height: 46rpx;margin-right: 7rpx;margin-left: 0;">
</image>
<text style="margin-right: 10rpx;">{{addressResult.city}}:{{stockValue}}</text>
<u-icon name="arrow-right" color="#B7B7B7" size="22"></u-icon>
</picker>
</view>
<view v-if="goods.goods_no" class="operaImg" @click="copyNum(goods.goods_no)">
<image :src="$picUrl+'/static/detail/copy.png'"
style="width: 30rpx;height: 30rpx;margin-left: 14rpx;"></image>
</view>
</view>
</view>
</view>
<view v-if="storeVersion == 1 && goods.merchant_id > 0" class="merchant-info" @click="toShop()">
<image :src="goods.merchant.logoImage && goods.merchant.logoImage[0].external_url" mode="aspectFill"></image>
<view class="info-box">
<view class="info-name">
<text>{{ goods.merchant.shop_name }}</text>
<image src="@/static/arrow-right.png" mode="aspectFill"></image>
</view>
<view class="label">
<text v-if="goods.merchant.shop_label">{{ goods.merchant.shop_label }}</text>
</view>
</view>
</view>
<view class="orderInfo">
<view class="chosed" v-if="goods.spec_type == 20" @click="stockValue=='有货'?choseSku(3):''">
<view class="title">已选</view>
<view class="info" style="justify-content: flex-start;" v-if="goods.skuList.length>0">
<text
style="margin-right: 10rpx;">{{goods.cmmdty_model}}&nbsp;&nbsp;{{selectSku.title.name}}-{{selectSku.value.name}}</text>{{selectNum}}件
</view>
<u-icon name="arrow-right" color="#B7B7B7" v-if="stockValue=='有货'"></u-icon>
</view>
<view class="chosed" v-else @click="stockValue=='有货'?choseSku(3):''">
<view class="title">已选</view>
<view class="info">{{goods.cmmdty_model}}&nbsp;&nbsp;{{selectNum}}件</view>
<u-icon name="arrow-right" color="#B7B7B7"></u-icon>
</view>
<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">
{{stockValue}}
<image :src="$picUrl+'/static/detail/rightIcon.png'"></image>
</view>
<view class="box" @click="choseAddress()">
<view class="address">
{{addressResult?addressResult.province +'-'+addressResult.city+'-'+addressResult.district:'全国'}}
</view>
<u-icon name="arrow-right" color="#B7B7B7"></u-icon>
</view>
</view>
</view>
<view class="chosed">
<view class="title">发货</view>
<view class="info" v-html="promise_info">
</view>
</view>
<view class="chosed">
<view class="title">运费</view>
<view class="info">包邮(以提交订单时为准)
</view>
</view>
<view class="chosed" v-if="serveList.length>0">
<view class="title">保障</view>
<view class="info">
<view class="infoBao" v-for="(item,index) in serveList" :key="index">
<image :src="$picUrl+'/static/detail/selectIcon.png'" class="buy"></image>
<text class="info" style="margin-right: 3rpx;">{{item.name}}</text>
</view>
</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="detail-content" @click="onLook(goods.isLink,goods.contentLink)" v-if="goods.isLink"
v-html="goods.content"></view>
<view class="detail-content" v-else 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 firstBtn" @click="toJDdetal()">
<view class="cusIcon">
<image :src="$picUrl+'/static/detail/tongkuan.png'" style="width: 50rpx;height: 34rpx;"></image>
</view>
<view class="customer">
看同款
</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: #FF9E2B;"
@click="choseSku(3)">
修改价格
</view>
<view class="btn-bg" v-else style="background-color: #FF9E2B;" @click="openPirce(1)">
修改价格
</view>
<view class="btn-bg"
style="background:linear-gradient( 102deg, #FE5E06 0%, #F3221A 100%);margin-left:8rpx;"
@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=='距离'||seckillText=='结束'">
<view class="buyNow"
:style="{'background': stockValue=='有货'?'linear-gradient(102deg, #FE5E06 0%, #F3221A 100%)':'#cecece' }"
@click="stockValue=='有货'?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="buyNow"
:style="{'background': stockValue=='有货'?'linear-gradient(102deg, #FE5E06 0%, #F3221A 100%)':'#cecece' }"
@click="stockValue=='有货'?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" 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" :activeTimeId='activeTimeId'
:sharpGoodsId='sharpGoodsId' :goodSource='1' :goods="goods" :addressResult='addressResult'
@getSku='onGetSku' @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'
import * as SharpGoodsApi from '@/api/sharp/goods'
export default {
components: {
SkuPopup,
GoodsPosterPopup,
setPrice
},
data() {
return {
options: {},
timestamp: new Date().getTime(),
goods_sku_no: "",
isTodo: false,
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: '',
activeTimeId: '',
sharpGoodsId: '',
goods: {
skuList: []
},
suggestGoodsList: [],
userInfo: {},
activeInfo: {},
addressList: [],
addressInfo: {},
serveList: [],
isLogin: false,
selectShop: {},
// 获取商品海报图api方法
posterApiCall: GoodsApi.poster,
// 购物车总数量
cartTotal: 0,
guaranteeList: [{
name: '原包正品'
}, {
name: '全国联保'
}, {
name: '运损换新'
}],
selectSku: '',
selectNum: 1,
multiIndex: [0, 0, 0],
multiArray: [],
multiData: [],
stockValue: '有货',
promise_info: '',
timeData: {},
addressResult: {
province: '江苏省',
city: '南京市',
district: '玄武区'
}
}
},
computed: {
storeVersion() {
const version = uni.getStorageSync('storeVersion') == 1 ? 1 : 0;
console.log(version);
return version;
}
},
onLoad(options) {
const that = this;
that.options = options;
let result = uni.getStorageSync("addressResult")
this.addressResult = result ? result.address_component : this.addressResult
this.isPre = options.isPre ? options.isPre : null
const scene = getSceneData(options)
this.sharpGoodsId = options.sharpGoodsId ? parseInt(options.sharpGoodsId) : parseInt(scene.sharpGoodsId)
this.activeTimeId = options.activeTimeId ? options.activeTimeId : null
this.pre_id = options.pre_id ? options.pre_id : null;
this.isSeckill = options.isSeckill ? options.isSeckill : null;
this.isBuy = options.isBuy ? Number(options.isBuy) : null;
this.seckillText = options.seckillText ? decodeURIComponent(options.seckillText) : null;
this.getGoodsDetail()
uni.$on("onenPrice", function(selectShop) {
that.openPirce();
that.isTodo = false;
that.selectShop = selectShop
that.selectShop.price = that.selectShop.price / 100
})
},
onShow() {},
onPageScroll(e) {
if (e.scrollTop <= 200) { // 当滚动到顶部且向下滑动时为true
this.isTop = false
} else {
this.isTop = true
}
},
methods: {
onLook(isLink, url) {
if (isLink) {
uni.navigateTo({
url: '/pages/goods/webView?src=' + encodeURIComponent(url) //url是h5的展示地址pageB
})
}
},
async getGoodsStockInfor() {
console.log(this.goodsId)
let params = {
list: [{
goods_id: this.goodsId,
num: this.selectNum
}],
province: this.addressResult ? this.addressResult.province : '江苏省',
city: this.addressResult ? this.addressResult.city : '南京市',
district: this.addressResult ? this.addressResult.district : '玄武区'
}
let {
status,
message,
data
} = await GoodsApi.getGoodsStock(params);
if (status == 200) {
this.stockValue = data[0].state;
this.promise_info = data[0].promise_info
}
},
async getProvinceAll() {
let {
status,
message,
data
} = await address.province();
if (status == 200) {
this.multiData = data.list;
var multiIndex = this.multiIndex;
this.multiArray = [
this.multiData,
this.multiData[0].children,
this.multiData[0].children[0].children
]
}
},
onChangeSeckillCutDownTime(e) {
this.timeData = e
},
// 获取多列的索引
multiChange: function(e) {
this.multiIndex = e.detail.value;
let province = this.multiArray[0][e.detail.value[0]].name;
let city = this.multiArray[1][e.detail.value[1]].name;
let district = this.multiArray[2][e.detail.value[2]].name;
this.addressResult.province = province;
this.addressResult.city = city
this.addressResult.district = district
this.getGoodsStockInfor()
},
// 选择列
columnChange: function(e) {
var _this = this;
var columnIndex = e.detail.column;
var columnValue = e.detail.value;
_this.multiIndex[columnIndex] = columnValue;
this.multiArray = [
_this.multiData,
_this.multiData[_this.multiIndex[0]].children,
_this.multiData[_this.multiIndex[0]].children[_this.multiIndex[1]].children
]
},
// 记录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_hour: e.sec_hour,
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()
},
findItemById(items, id) {
return items.find(item => item.goods_id == id);
},
setPirce() {
let item = this.findItemById(this.goods.skuList, this.goods.goods_id)
if (item) {
this.$refs.setRange.startTime = item.sec_start_time;
this.$refs.setRange.sec_hour = item.sec_hour
this.$refs.setRange.secondPrice = item.seckill_price
this.$refs.setRange.secondQuota = item.is_limit == 1 ? true : false
this.$refs.setRange.quotaNum = item.limit_times
}
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() {
const that = this
return new Promise((resolve, reject) => {
address.defaultId().then(res => {
if (res.status == 200) {
that.getGoodsStockInfor();
for (var i = 0; i < that.addressList.length; i++) {
if (res.data.defaultId == that.addressList[i].address_id) {
that.addressInfo = that.addressList[i];
}
}
if (that.addressInfo) {
this.addressResult.province = this.addressInfo.region ? this.addressInfo
.region.province : (this.addressResult ? this.addressResult.province :
'江苏省');
this.addressResult.city = this.addressInfo.region ? this.addressInfo.region
.city : (this.addressResult ? this.addressResult.city : '南京市');
this.addressResult.district = this.addressInfo.region ? this.addressInfo
.region.region : (this.addressResult ? this.addressResult.district :
'江苏省');
}
}
})
.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"
})
},
onGetSku(e) {
console.log(e)
this.selectSku = e.selectSku
this.selectNum = e.shopNum
},
// 更新购物车数量
onAddCart(total) {
this.getCartTotal()
},
choseSku(skuMode) {
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
})
}
})
},
getLinksFromRichText(richText) {
// 正则表达式匹配a标签及其href属性
const regex = /<a[^>]*href="?([^">]+)"?[^>]*>(.*?)<\/a>/gim;
let matches, links = '';
// 执行正则表达式匹配
while ((matches = regex.exec(richText)) !== null) {
// matches[1]是href属性值,matches[2]是标签内的文本
links = matches[1];
}
return links;
},
getValueAfterSymbol(str, symbol) {
const parts = str.split(symbol);
if (parts.length > 1) {
return parts[1].trim(); // 使用trim()移除前后空格
}
return str; // 如果没有找到符号,返回空字符串
},
containsLetterMix(str, mix) {
return new RegExp(mix.split('').join('\\w*')).test(str)
},
// 获取商品信息
getGoodsDetail(type) {
const that = this
return new Promise((resolve, reject) => {
SharpGoodsApi.detail(that.activeTimeId, that.sharpGoodsId)
.then(result => {
let info = result.data.goods;
that.activeInfo = result.data.active
that.goodsId = info.goods_id
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:inline-block;height:auto" src=')
info.content = info.content.replace(/\<img/gi,
'<img style="max-width:100%;height:auto" ');
info.contentLink = that.getValueAfterSymbol(that.getLinksFromRichText(info
.content), 'client://')
info.isLink = that.containsLetterMix(info.contentLink, 'http') ? true : false
Object.keys(info).forEach(item => {
this.$set(this.goods, item, info[item])
})
that.isTodo = true;
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();
}
if (this.goods.skuList.length > 0) {
if (this.goods.skuList[0].goods_props) {
this.selectSku = {
title: this.goods.skuList[0].goods_props[0].group,
value: this.goods.skuList[0].goods_props[0].value
}
}
}
// 在商品id回来之后请求
if (uni.getStorageSync('AccessToken')) {
this.getAddressList()
this.isLogin = true;
this.userInfo = uni.getStorageSync('userInfo');
} else {
this.isLogin = false;
this.userInfo = {}
}
this.getSuggestGoods()
this.getServeList()
this.cityInfo = uni.getStorageSync("cityInfo");
this.getGoodsStockInfor()
this.getCartTotal()
this.getProvinceAll()
})
.catch()
})
},
getSuggestGoods() {
// 获取推荐商品列表
const that = this
GoodsApi.recommended()
.then(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;
}
if (this.userInfo.user_type == 30) {
uni.navigateTo({
url: '/pages/member/index?type=fx'
})
} else {
uni.navigateTo({
url: '/pages/member/index1?type=hy'
})
}
},
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;
}
// 立即下单
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;
},
//获取短连接
async toQueryShortUrl() {
// 获取推荐商品列表
const that = this;
// 构建页面参数
const params = that.$getShareUrlParams(this.options)
const res = await GoodsApi.goodsShortUrl({
page_url: `pages/goods/detail?${params}`,
page_title: that.goods.goods_name
})
if (res.data.url) {
let str =
`型号:${that.goods.goods_name}\n前台价:¥${that.goods.goods_price_max}\n推广价:¥${that.goods.goods_price_min}\nSKU:${that.goods.goods_no}\n小程序链接:${res.data.url}`
uni.setClipboardData({
data: str, // 这里是个坑接受字符串类型 value转化为字符串
success: function() {
//调用方法成功
uni.showToast({
title: '复制成功',
icon: 'none',
duration: 2000
})
}
})
} else {
uni.showToast({
title: '复制失败',
icon: 'none',
duration: 2000
})
}
},
toHaibao(index) {
this.shareCancel();
if (index == 2) {
this.toQueryShortUrl();
} else {
this.openDialog = false
this.showGoodsPosterPopup = true;
}
},
toShop() {
uni.navigateTo({
url: `/pages/shopList/shopPage?id=${this.goods.merchant_id}`,
})
},
},
/**
* 分享当前页面
*/
onShareAppMessage() {
const app = this
// 构建页面参数
const params = app.$getShareUrlParams(this.options)
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
const params = app.$getShareUrlParams(this.options)
return {
title: app.goods.goods_name,
imageUrl: app.goods.goods_image,
path: `/pages/goods/detail?${params}`
}
}
}
</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 {
border-radius: 6rpx;
font-size: 26rpx;
line-height: 50rpx;
background-color: #fff;
box-sizing: border-box;
margin: 20rpx 18rpx 0 18rpx;
}
}
.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 {
background: #FFFFFF;
border-radius: 6rpx;
padding-bottom: 32rpx;
overflow: hidden;
margin: 20rpx 18rpx 0 18rpx;
.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;
text-decoration: line-through;
.sellLeft {
width: 72rpx;
margin-right: 8rpx;
}
}
}
.right {
display: flex;
align-items: center;
margin-right: 40rpx;
flex-flow: column;
.rightPrice {
overflow: hidden;
margin-right: 24rpx;
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
}
}
.rightInfo {
width: 125rpx;
height: 26rpx;
image {
width: 100%;
height: 100%;
}
}
.rightBox {
min-width: 120rpx;
padding: 0 20rpx;
height: 64rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
float: right;
image {
width: 38rpx;
height: 38rpx;
margin-right: 5rpx;
}
.span {
height: 42rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 30rpx;
color: #F21A1C;
line-height: 35rpx;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 5rpx;
margin-top: 5rpx;
}
}
}
}
.pro {
background-image: url('https://www.royaum.com.cn/static/detail/pro.png');
background-size: 100% 100%;
height: 82rpx;
display: flex;
align-items: center;
margin: 20rpx 28rpx 0 28rpx;
.proMem {
width: 142rpx;
font-size: 28rpx;
font-weight: 500;
text-align: center;
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 {
margin: 0 26rpx;
.goodsContent {
justify-content: space-between;
display: flex;
margin-top: 32rpx;
align-items: center;
}
.goodsName {
color: #000;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
line-height: 35rpx;
text-align: left;
font-style: normal;
text-transform: none;
max-width: 600rpx;
}
.line2 {
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goodsCircle {
width: 48rpx;
// text-align: right;
}
.goodsCircleImg {
width: 48rpx;
height: 48rpx;
margin-right: 3rpx;
}
.goodsCircleText {
width: 48rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
line-height: 28rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.goodsOpera {
display: flex;
justify-content: space-between;
align-items: center;
.goodsNum {
text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
text-align: left;
font-style: normal;
text-transform: none;
}
image {
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-left: 10rpx;
}
}
.operaImg {
display: flex;
align-items: center;
image {
width: 49rpx;
height: 49rpx;
}
.tips {
margin-left: 10rpx;
}
}
}
.rank {
height: 70rpx;
background: #FFF3EE;
border-radius: 8rpx 8rpx 8rpx 8rpx;
width: 100%;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28rpx;
box-sizing: border-box;
margin: 20rpx auto 0;
text {
font-size: 28rpx;
font-weight: 400;
color: #FF1130;
line-height: 58rpx;
}
image {
width: 11rpx;
height: 19rpx;
}
}
}
}
.merchant-info {
margin: 20rpx 18rpx 0 18rpx;
padding: 30rpx;
background: #fff;
display: flex;
>image {
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
.info-box {
width: calc(100% - 110rpx);
display: flex;
flex-direction: column;
justify-content: space-between;
>.info-name {
font-size: 30rpx;
color: #333;
font-weight: bold;
display: flex;
align-items: center;
>text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 21rpx);
}
>image {
margin-left: 10rpx;
width: 13rpx;
height: 24rpx;
}
}
>.label {
text {
display: inline-block;
height: 40rpx;
line-height: 40rpx;
text-align: center;
padding: 0 12rpx;
background: #F34A40;
border-radius: 20rpx;
color: #FFFFFF;
font-size: 22rpx;
}
}
}
}
.orderInfo {
// width: 720rpx;
background: #FFFFFF;
border-radius: 6rpx;
opacity: 1;
margin: 20rpx 18rpx 0 18rpx;
padding: 30rpx 26rpx 0rpx 26rpx;
box-sizing: border-box;
.chosed {
display: flex;
align-items: flex-start;
padding-bottom: 30rpx;
overflow: hidden;
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #A5A5A5;
margin-right: 38rpx;
}
.info {
flex: 1;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #3D3D3D;
display: flex;
align-items: center;
flex-wrap: wrap;
.infoBao {
overflow: hidden;
display: flex;
align-items: flex-end;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 29rpx;
height: 29rpx;
}
text {
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 {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #FE3636;
line-height: 34rpx;
image {
width: 12rpx;
height: 18rpx;
margin: 0 10rpx 0 8rpx;
}
}
.address {
height: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 30rpx;
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: 30rpx;
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 {
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 20rpx 18rpx 0rpx 18rpx;
padding: 24rpx 0 0 18rpx;
.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;
padding-bottom: 20rpx;
overflow: hidden;
.goodsItem {
width: 216rpx;
margin-right: 18rpx;
.img {
width: 216rpx;
height: 180rpx;
background: #FBFBFB;
border-radius: 6rpx 6rpx 6rpx 6rpx;
.goodsImg {
width: 216rpx;
height: 168rpx;
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 {
margin: 0 24rpx;
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;
}
.footerCus {
width: 95rpx;
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;
width: 100%;
text-align: center;
font-size: 20rpx;
font-weight: 400;
color: #3D3D3D;
line-height: 40rpx;
}
.car {
width: 100%;
}
}
.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 {
overflow: hidden;
margin-left: 28rpx;
width: 604rpx;
height: 382rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.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;
}
.left_1 {
height: 100%;
margin-right: 8rpx;
line-height: 36.5rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 30rpx;
color: #F21A1C;
text-align: center;
margin-right: 12rpx;
}
.detail-content {
overflow: hidden;
}
</style>