745 lines
16 KiB
Vue
745 lines
16 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="swiper-box">
|
||
<swiper :indicator-dots="true" :autoplay="false" style="width: 750rpx;height: 750rpx;">
|
||
<swiper-item v-for="(item, index) in goodsDetail.detail_image" :data-src="item" :key="index">
|
||
<view class="swiper-item">
|
||
<image class="goods_img" :src="item"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="goods_v">
|
||
<view class="goods_v_left">
|
||
<view>￥ <text>{{ goodsDetail.seckill_price }}</text> </view>
|
||
<view>已售 {{ goodsDetail.sale_num }}</view>
|
||
</view>
|
||
<view class="hang2"> {{ goodsDetail.title }} </view>
|
||
</view>
|
||
<view class="xuanzhe" @click="$refs.mengban_show.open()">
|
||
<view>选择</view>
|
||
<view class="xuanzhe_con">
|
||
<view>已选：{{ pop_news.name }}</view>
|
||
<image src="/static/mine/yaoqing/point_right.png" mode="widthFix" style="width: 24rpx;"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="shop_detail">
|
||
<image src="/static/shop/detail_head.png" class="xiangqing_head"></image>
|
||
<view class="zhuyi" v-html="goodsDetail.content"></view>
|
||
</view>
|
||
<view class="bar_box">
|
||
<view class="btn_boxs" @click="$refs.mengban_show.open()">立即购买</view>
|
||
</view>
|
||
|
||
|
||
<uni-popup ref="mengban_show" type="bottom">
|
||
<view class="addcar">
|
||
<view class="order_title">
|
||
<view>选择规格</view>
|
||
<view class="ca" @click="$refs.mengban_show.close()">×</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="guige">
|
||
<view class="addcar_head">
|
||
<image :src="pop_news.pic"></image>
|
||
<view class="addcar_head_r">
|
||
<view>单价：￥ <text style="font-size: 40rpx;">{{ pop_news.seckill_price }}</text> </view>
|
||
<view>规格：{{ pop_news.name }}</view>
|
||
<view style="font-size: 24rpx;">库存：{{ pop_news.stock }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="size">
|
||
<view class="size_z" v-for="(a, b) in goodsDetail.spec_data" :key='b'>
|
||
<view class="g_title">{{ a.title }}</view>
|
||
<view>
|
||
<view :class="v.dis ? 'sel_color' : ''" @click.stop="color_sel(b, i)"
|
||
v-for="(v, i) in a.items" :key="i">{{ v.title }} </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="duihuan">
|
||
<view class="g_title">购买数量：</view>
|
||
<uni-number-box :min="1" :max="pop_news.stock" v-model="num" background="#FAF8F5" color="#fff">
|
||
</uni-number-box>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="btn_boxs" @click="getOrder()">确定</view>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
|
||
<!-- 确认订单 -->
|
||
<uni-popup ref="order_show" type="bottom">
|
||
<view class="order animated fadeInUp">
|
||
<view class="order_title">
|
||
<view>确认订单</view>
|
||
<view class="ca" @click="$refs.order_show.close()">×</view>
|
||
</view>
|
||
<view class="addcar_head">
|
||
<image :src="pop_news.pic"></image>
|
||
<view class="addcar_head_r">
|
||
<view>{{ pop_news.goods_name }}</view>
|
||
<view>规格：{{ pop_news.name }}</view>
|
||
<view class="price_order">
|
||
<text>￥ <text style="font-size: 36rpx;">{{ pop_news.price }}</text> </text>
|
||
<text>×{{ num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order_title_con2">
|
||
<view style="font-size: 28rpx">付款方式</view>
|
||
<view class="fangshi" @click="change_yuan_index(1)">
|
||
<view class="flex_center">
|
||
<image src="/static/shop/bi.png" class="fangshi_img"></image>
|
||
<view>
|
||
使用星钻抵扣￥ {{ pay_news.use_integral }}（剩余：{{ pay_news.integral }}）
|
||
</view>
|
||
</view>
|
||
<view class="p_t_r">
|
||
<image src="/static/shop/yuan_sel.png" v-if="bi"></image>
|
||
<image src="/static/shop/yuan.png" v-else></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="fangshi" @click="change_yuan_index(2)">
|
||
<view class="flex_center">
|
||
<image src="/static/shop/yue.png" class="fangshi_img"></image>
|
||
<view>
|
||
使用星钻抵扣￥ {{ pay_news.use_money }}（剩余：{{ pay_news.money }}）
|
||
</view>
|
||
</view>
|
||
<view class="p_t_r">
|
||
<image src="/static/shop/yuan_sel.png" v-if="yue"></image>
|
||
<image src="/static/shop/yuan.png" v-else></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="kuaidi">
|
||
<view @click="showMulLinkageThreePicker">
|
||
<view style="width: 630rpx">
|
||
{{ selectCity }}
|
||
</view>
|
||
<image src="/static/mine/yaoqing/point_right.png"></image>
|
||
</view>
|
||
<view v-if="pop_news.freight > 0">
|
||
提示：需支付{{ pop_news.freight }}元运费
|
||
</view>
|
||
<textarea maxlength="50" placeholder="请输入留言内容" v-model="message" />
|
||
</view>
|
||
<view @click="gotoPage('/pages/guize/guize?type=4')" class="xieyi">下单购买即表示同意 《用户服务协议条款》 </view>
|
||
<view class="btn_boxs" @click="pay()">确认支付</view>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import xwCountDown from '@/components/xw-CountDown'
|
||
export default {
|
||
components: {
|
||
xwCountDown
|
||
},
|
||
data() {
|
||
return {
|
||
num: 1,
|
||
goodsDetail: {},
|
||
// 是否收藏
|
||
is_collect: 2,
|
||
// 商品id
|
||
goods_id: '',
|
||
sku: '',
|
||
// 弹窗信息
|
||
pop_news: {},
|
||
// 支付信息
|
||
pay_news: {},
|
||
// 1:是否币支付,
|
||
bi: true,
|
||
// 2:星钻支付
|
||
yue: false,
|
||
|
||
cityPickerValueDefault: [0, 0, 0],
|
||
selectCity: '选择收货地址',
|
||
name: '',
|
||
mobile: '',
|
||
message: ''
|
||
|
||
}
|
||
},
|
||
onLoad(v) {
|
||
let that = this;
|
||
that.goods_id = v.goods_id;
|
||
that.getData()
|
||
},
|
||
onShareAppMessage() {
|
||
let imageUrl = this.$config.getShareImageUrl();
|
||
return {
|
||
imageUrl: imageUrl,
|
||
title: "友达赏，正版潮玩手办一番赏",
|
||
|
||
path: '/pages/shouye/index?pid=' + uni.getStorageSync('pid')
|
||
}
|
||
},
|
||
methods: {
|
||
pay() {
|
||
let that = this
|
||
that.req({
|
||
url: 'shop_order_buy',
|
||
data: {
|
||
goods_id: that.goods_id,
|
||
ks: that.sku,
|
||
num: that.num,
|
||
is_money: that.yue ? 1 : 2,
|
||
is_integral: that.bi ? 1 : 2,
|
||
name: that.name,
|
||
mobile: that.mobile,
|
||
address: that.address,
|
||
message: that.message
|
||
},
|
||
success(res) {
|
||
console.log(res)
|
||
if (res.status == 1) {
|
||
if (res.data.is_weixin == 1) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.package,
|
||
signType: 'MD5',
|
||
paySign: res.data.paySign,
|
||
success(res) {
|
||
console.log(res)
|
||
},
|
||
complete(res) {
|
||
if (res.errMsg == 'requestPayment:fail cancel') {
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'loading',
|
||
duration: 1000
|
||
})
|
||
}
|
||
if (res.errMsg == 'requestPayment:ok') {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
that.$refs.order_show.close()
|
||
//去订单
|
||
that.$customRouter.navigateTo('/pages/miaosha/shop_order', {}, 'redirectTo');
|
||
}, 1500)
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
setTimeout(() => {
|
||
that.$refs.order_show.close()
|
||
//去订单
|
||
that.$customRouter.navigateTo('/pages/miaosha/shop_order', {}, 'redirectTo');
|
||
}, 1500)
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
/*三级联动选择*/
|
||
showMulLinkageThreePicker() {
|
||
let that = this
|
||
this.canInit = false
|
||
uni.chooseAddress({
|
||
success(res) {
|
||
that.selectCity = res.userName + '-' + res.provinceName + '-' + res.cityName + '-' + res
|
||
.countyName + '-' + res.detailInfo + '-' + res.telNumber
|
||
that.name = res.userName
|
||
that.mobile = res.telNumber
|
||
that.address = res.provinceName + '-' + res.cityName + '-' + res.countyName + '-' + res
|
||
.detailInfo
|
||
},
|
||
complete() {
|
||
// console.log('结束了')
|
||
setTimeout(() => {
|
||
that.canInit = true
|
||
}, 500)
|
||
}
|
||
})
|
||
|
||
// this.$refs.mpvueCityPicker.show();
|
||
},
|
||
|
||
getOrder() {
|
||
this.$refs.mengban_show.close()
|
||
this.$refs.order_show.open()
|
||
this.change_yuan_index()
|
||
},
|
||
change_yuan_index(e) {
|
||
if (e == 1) {
|
||
this.bi = !this.bi
|
||
}
|
||
if (e == 2) {
|
||
this.yue = !this.yue
|
||
}
|
||
let that = this;
|
||
that.req({
|
||
url: 'shop_goods_browse',
|
||
data: {
|
||
goods_id: that.goods_id,
|
||
ks: that.sku,
|
||
num: that.num,
|
||
is_integral: that.bi ? 1 : 2,
|
||
is_money: that.yue ? 1 : 2
|
||
},
|
||
success(res) {
|
||
that.pay_news = res.data
|
||
that.pop_news = that.pay_news.goods
|
||
}
|
||
})
|
||
},
|
||
getData() {
|
||
let that = this;
|
||
that.req({
|
||
url: 'shop_goods_detail',
|
||
data: {
|
||
goods_id: that.goods_id,
|
||
},
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
that.goodsDetail = res.data
|
||
let Things = that.goodsDetail.spec_data;
|
||
for (let i = 0; i < Things.length; i++) {
|
||
for (let j = 0; j < Things[i].length; j++) {
|
||
that.$set(Things[i].items[j], 'dis', false)
|
||
}
|
||
that.$set(Things[i].items[0], 'dis', true)
|
||
}
|
||
that.product_norms()
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
color_sel(a, b) {
|
||
let that = this;
|
||
let Things = that.goodsDetail.spec_data;
|
||
for (let j = 0; j < Things[a].items.length; j++) {
|
||
that.$set(Things[a].items[j], 'dis', false)
|
||
that.$set(Things[a].items[b], 'dis', true)
|
||
}
|
||
that.product_norms()
|
||
},
|
||
product_norms() {
|
||
let that = this;
|
||
that.sku = []
|
||
let Things = that.goodsDetail.spec_data;
|
||
for (let m = 0; m < Things.length; m++) {
|
||
for (let n = 0; n < Things[m].items.length; n++) {
|
||
if (Things[m].items[n].dis) {
|
||
that.sku += Things[m].items[n].k + ','
|
||
}
|
||
}
|
||
}
|
||
this.sku = this.sku.substr(0, this.sku.length - 1)
|
||
that.req({
|
||
url: 'shop_goods_detail_spec',
|
||
data: {
|
||
goods_id: that.goods_id,
|
||
ks: that.sku ? that.sku : '默认'
|
||
},
|
||
Loading: true,
|
||
success(res) {
|
||
if (res.status == 1) {
|
||
if (res.data.type == 1) {
|
||
that.pop_news = res.data.spec_info
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
textarea {
|
||
width: 630rpx;
|
||
height: 120rpx;
|
||
background: #333333;
|
||
border-radius: 10rpx;
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.kuaidi>view:nth-of-type(2) {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.kuaidi>view:nth-of-type(1) {
|
||
border-bottom: 1rpx solid #E5E5E5;
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.kuaidi>view {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.kuaidi image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.kuaidi {
|
||
padding: 0 30rpx 30rpx 30rpx;
|
||
width: 690rpx;
|
||
box-shadow: 0px 0rpx 10rpx 0px #1FF7F0;
|
||
border-radius: 20rpx;
|
||
margin: 24rpx auto 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.p_t_r>image {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.p_t_r {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #FFFFFF;
|
||
border: 4rpx solid #CCCCCC;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fangshi_img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.fangshi {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
line-height: 76rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.xieyi {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin: 20rpx;
|
||
}
|
||
|
||
.price_order {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
width: 386rpx;
|
||
font-weight: bold;
|
||
color: #1FF7F0;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.order_title_con2 {
|
||
box-shadow: 0px 0rpx 10rpx 0px #1FF7F0;
|
||
border-radius: 24rpx;
|
||
width: 690rpx;
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
border-radius: 24rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.ca {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0;
|
||
font-size: 60rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.order_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
position: relative;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.order {
|
||
width: 750rpx;
|
||
background: #0D0D0D;
|
||
box-shadow: 0rpx -2rpx 0rpx 0rpx #FFFFFF, 0rpx -2rpx 7rpx 0rpx #1FF7F0;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 10rpx 30rpx 50rpx;
|
||
box-sizing: border-box;
|
||
color: #ffffff;
|
||
}
|
||
|
||
|
||
.confirm_pop {
|
||
width: 330rpx;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.guige {
|
||
border-radius: 24rpx;
|
||
margin: 20rpx auto;
|
||
max-height: 1000rpx;
|
||
}
|
||
|
||
.size {
|
||
/* background: #FFFFFF; */
|
||
margin-top: 40rpx;
|
||
padding: 1rpx 20rpx 40rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.size_z {
|
||
margin-top: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.g_title {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.size_z>view:nth-of-type(2) {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.size_z>view:nth-of-type(2)>view {
|
||
border: 1px solid #1FF7F0;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
margin-right: 36rpx;
|
||
padding: 0 40rpx;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
color: #1FF7F0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.sel_color {
|
||
color: #0D0D0D !important;
|
||
background: linear-gradient(90deg, #F4F4F4 15%, #62FFFE 100%) !important;
|
||
}
|
||
|
||
.duihuan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
margin-top: 30rpx;
|
||
/* background: #FFFFFF; */
|
||
box-sizing: border-box;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.addcar {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 30rpx 50rpx;
|
||
color: #FFFFFF;
|
||
background: #0D0D0D;
|
||
box-shadow: 0rpx -2rpx 0rpx 0rpx #FFFFFF, 0rpx -2rpx 7rpx 0rpx #1FF7F0;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.addcar_head {
|
||
display: flex;
|
||
}
|
||
|
||
.addcar_head>image {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
|
||
.addcar_head_r {
|
||
margin-left: 29rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
|
||
.xiangqing_head {
|
||
width: 750rpx;
|
||
height: 66rpx;
|
||
display: block;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.shop_detail {
|
||
width: 100%;
|
||
/* background: #FFFFFF; */
|
||
padding: 18rpx;
|
||
box-sizing: border-box;
|
||
color: #120A06;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
|
||
|
||
/deep/.shop_detail image {
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
padding-bottom: 120rpx;
|
||
box-sizing: border-box;
|
||
background: #000000;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.goods_img {
|
||
width: 100%;
|
||
height: 760rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
width: 100%;
|
||
height: 750rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.goods_v_left text {
|
||
font-size: 40rpx;
|
||
}
|
||
|
||
.goods_v_left>view:nth-of-type(1) {
|
||
font-weight: bold;
|
||
color: #1FF7F0;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.goods_v_left {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 14rpx auto;
|
||
}
|
||
|
||
.goods_v {
|
||
width: 690rpx;
|
||
height: 158rpx;
|
||
border-radius: 10rpx;
|
||
margin: 44rpx auto;
|
||
box-sizing: border-box;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
background: #090909;
|
||
border: 1px solid #FFFFFF;
|
||
box-shadow: 0rpx 0 5rpx 3rpx #1FF7F0;
|
||
}
|
||
|
||
|
||
|
||
.xuanzhe {
|
||
width: 690rpx;
|
||
height: 91rpx;
|
||
background: #090909;
|
||
border: 1px solid #FFFFFF;
|
||
box-shadow: 0rpx 0 5rpx 3rpx #1FF7F0;
|
||
border-radius: 10rpx;
|
||
margin: 20rpx auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.xuanzhe_con {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
width: 560rpx;
|
||
}
|
||
|
||
.bar_box {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
background: #000000;
|
||
}
|
||
|
||
.btn_boxs {
|
||
width: 692rpx;
|
||
height: 88rpx;
|
||
color: #FFFFFF;
|
||
font-size: 36rpx;
|
||
font-family: 'YouSheBiaoTiHei';
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: url('/static/shop/btn_bg.png') no-repeat 0 0 / 100% 100%;
|
||
}
|
||
</style>
|