320 lines
6.5 KiB
Vue
320 lines
6.5 KiB
Vue
<script setup>
|
||
// 店铺 客服 收藏 支付
|
||
import {
|
||
ref,
|
||
reactive,
|
||
getCurrentInstance,
|
||
computed,
|
||
defineEmits,
|
||
onMounted
|
||
} from 'vue'
|
||
//
|
||
import util from '@/common/js/util.js'
|
||
//
|
||
import api from '@/api/index.js'
|
||
|
||
import JyPopup from '@/components/public/jy-popup'
|
||
// 地址
|
||
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
||
//
|
||
import {
|
||
useStore
|
||
} from 'vuex'
|
||
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance()
|
||
//
|
||
const store = useStore()
|
||
//
|
||
const props = defineProps({
|
||
// 商品信息
|
||
detail: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
})
|
||
// 地址
|
||
const address = reactive({})
|
||
//
|
||
const emit = defineEmits(['update'])
|
||
// 已选择的规格下标
|
||
const spaceIndex = ref(0)
|
||
// 数量
|
||
const payNum = ref(1)
|
||
// 当前选择的规格
|
||
const currentSpec = computed(() => {
|
||
let spec = props.detail.specs || []
|
||
return spec[spaceIndex.value] || {}
|
||
})
|
||
// 用户信息
|
||
const userinfo = computed(() => store.state.userinfo)
|
||
// 应付总价
|
||
const total = computed(() => {
|
||
let price = parseFloat(props.detail.price) * 100
|
||
let result = parseInt(price * payNum.value) / 100
|
||
return result
|
||
})
|
||
//
|
||
const menuFn = {
|
||
// 店铺
|
||
store() {
|
||
link('/pages/shop/store/index')
|
||
},
|
||
// 客服
|
||
customerService() {
|
||
link('/pages/news/question-answer/index')
|
||
},
|
||
// 收藏
|
||
heibianStar() {
|
||
//
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 获取默认收货地址
|
||
getDefaultAddress()
|
||
})
|
||
|
||
// 获取默认收货地址
|
||
function getDefaultAddress() {
|
||
api.shop.getDefaultAddress({}).then(res => {
|
||
if (res.code === 200) {
|
||
if (res.data) Object.assign(address, {}, res.data)
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 跳转
|
||
* @param {Object} url 跳转路径
|
||
*/
|
||
function link(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 选择规格
|
||
* @param {Object} index 选择规格下标
|
||
*/
|
||
function handleSpec(index) {
|
||
if (spaceIndex.value !== index) spaceIndex.value = index
|
||
}
|
||
|
||
// 切换收藏
|
||
function handleCollect() {
|
||
//
|
||
api.shop.addProductCollect({
|
||
query: {
|
||
productId: props.detail.id,
|
||
type: {
|
||
0: 1,
|
||
1: 0,
|
||
} [props.detail.isCollect]
|
||
},
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
emit('update', {
|
||
...props.detail,
|
||
isCollect: {
|
||
0: 1,
|
||
1: 0,
|
||
} [props.detail.isCollect]
|
||
})
|
||
return
|
||
}
|
||
util.alert({
|
||
content: res.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
|
||
// 立即下单
|
||
function handlePay() {
|
||
// 验证必填项
|
||
if (!address.id) {
|
||
util.alert('请选择收货地址')
|
||
return
|
||
}
|
||
|
||
// 产生待付款订单
|
||
api.shop.addOrder({
|
||
data: [{
|
||
// 地址id
|
||
addressId: address.id,
|
||
// 产品id
|
||
productId: props.detail.id,
|
||
// 规格id
|
||
attrValueId: currentSpec.value.id,
|
||
// 数量
|
||
payNum: payNum.value,
|
||
// 0-普通订单，1-视频号订单
|
||
orderType: 0,
|
||
// 分享人id
|
||
// shareId: userinfo.id,
|
||
}],
|
||
}).then(rs => {
|
||
if (rs.code === 200) {
|
||
if (rs.data && rs.data[0])
|
||
// 跳转
|
||
uni.navigateTo({
|
||
url: util.setUrl('/pages/shop/commodity/payment', {
|
||
orderId: rs.data[0].orderId,
|
||
})
|
||
})
|
||
return
|
||
}
|
||
util.alert({
|
||
content: rs.msg,
|
||
showCancel: false,
|
||
})
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 填充 -->
|
||
<view class="fill" style="height: 180rpx;"></view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="footer footerMneu rows plr20 shadow bfff">
|
||
<view class="menu df fdr aic">
|
||
<view class="option ver">
|
||
<image class="wh30" src="/static/store.png" mode="widthFix" />
|
||
<view class="f24 c999 mt10">店铺</view>
|
||
</view>
|
||
|
||
<view class="option ver " @click="handleCollect">
|
||
<view class="wh30 fmid">
|
||
<uni-icons type="star-filled" size="45rpx" color="#FF9B27" v-if="detail.isCollect == 1" />
|
||
<uni-icons type="star" size="45rpx" color="#666" v-else />
|
||
</view>
|
||
<view class="f24 c999 mt10">
|
||
<text v-if="detail.isCollect == 1">已</text>
|
||
<text>收藏</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="option ver ">
|
||
<image class="wh30" src="/static/customer-service.png" mode="widthFix" />
|
||
<view class="f24 c999 mt10">客服</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下单 -->
|
||
<view class="btn lg primary f1 ml30" @click="$refs.popup.open()">
|
||
<text>立即购买</text>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup type="bottom" ref="popup">
|
||
<view class="buy popBot plr20 bfff">
|
||
<view class="address mtb40">
|
||
<template v-if="address.id">
|
||
<JyCommodityAddress :address="address" />
|
||
</template>
|
||
<template v-else>
|
||
<view class="fmid c999 f28" @click="link('/pages/mine/address/index')">
|
||
<view>暂无默认地址</view>
|
||
<uni-icons type="right" color="#999" size="30rpx" />
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 商品图 价格 明细 数量 -->
|
||
<view class="jy-card-commodity-content df mtb40">
|
||
<!-- 商品图 -->
|
||
<image class="wh200 br10" :src="currentSpec.image" mode="aspectFill" />
|
||
<!-- 价格 明细 数量 -->
|
||
<view class="info f1 df fdc jcsb ml30">
|
||
<!-- 价格 -->
|
||
<view class="content-info-price">
|
||
<text class="cFF9B27 f28">单价</text>
|
||
<text class="cFF9B27 f24">￥</text>
|
||
<text class="cFF9B27 f50">{{detail.price}}</text>
|
||
</view>
|
||
<!-- 已选 -->
|
||
<view class="content-info-num">
|
||
<text class="f26 c333">已选： {{currentSpec.sku}}</text>
|
||
</view>
|
||
<!-- 计数器 -->
|
||
<view class="w200">
|
||
<uni-number-box v-model="payNum" :step="1" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 规格 -->
|
||
<view class="spec">
|
||
<view class="selection df">
|
||
<!-- disabled 销量为零不能选 -->
|
||
<view class="option mtb20 mr20" :class="{'active': spaceIndex === index}"
|
||
v-for="(item,index) in detail.specs" :key="index" @click="handleSpec(index)">
|
||
<text class="txt">{{item.sku}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn lg primary mtb30" @click="handlePay">
|
||
<text class="cfff">立即下单 ￥{{total}}</text>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
// 底部菜单
|
||
.menu {
|
||
|
||
// 选项
|
||
.option {
|
||
width: 80rpx;
|
||
}
|
||
}
|
||
|
||
// 规格
|
||
.spec {
|
||
|
||
// 选项
|
||
.option {
|
||
padding: 5rpx 15rpx;
|
||
background-color: #F7F7F7;
|
||
border-radius: 10rpx;
|
||
transition: .3s;
|
||
border: 2rpx solid #F7F7F7;
|
||
|
||
.txt {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
transition: .3s;
|
||
}
|
||
|
||
// 被选中
|
||
&.active {
|
||
background-color: #FFFBF8;
|
||
border-color: #FF9B27;
|
||
|
||
.txt {
|
||
color: #FF9B27;
|
||
}
|
||
}
|
||
|
||
// 不能选
|
||
&.disabled {
|
||
background-color: F7F7F7;
|
||
|
||
.txt {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |