|
|
@@ -9,38 +9,59 @@
|
|
|
</u-navbar>
|
|
|
<!-- 主图 -->
|
|
|
<view class="mainImame">
|
|
|
-
|
|
|
+ <ImageItem :src="$globalData.publicUrl + params.productMainImage" />
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
<!-- 第一行text -->
|
|
|
<view class="firstRow">
|
|
|
- <text class="priceClass">10元+1000积分</text>
|
|
|
- <text class="deletePriceClass">100元</text>
|
|
|
- <view class="productName"> 广誉源会员定制玻璃杯广誉源会员定制玻璃杯</view>
|
|
|
- <view class="discribeClass">双层曲线杯身在隔热防烫</view>
|
|
|
+ <text v-if="selectedObj" class="priceClass">
|
|
|
+ {{ params.paymentType == 1 ? selectedObj.pricePoint + '积分' :
|
|
|
+ params.paymentType == 2 ? selectedObj.priceMoney + '元' :
|
|
|
+ params.paymentType == 3 ? selectedObj.priceMoney + '元' + '+' +
|
|
|
+ selectedObj.pricePoint + '积分' : null }}
|
|
|
+ </text>
|
|
|
+ <text v-else class="priceClass">
|
|
|
+ {{ params.paymentType == 1 ? params.pricePoint + '积分' :
|
|
|
+ params.paymentType == 2 ? params.priceMoney + '元' :
|
|
|
+ params.paymentType == 3 ? params.priceMoney + '元' + '+' +
|
|
|
+ params.pricePoint + '积分' : null }}
|
|
|
+ </text>
|
|
|
+ <text class="deletePriceClass">{{ selectedObj ? selectedObj.originPrice : params.specComboVOList ?
|
|
|
+ params.specComboVOList[0].originPrice : null }}元</text>
|
|
|
+ <view class="productName"> {{ params.name }}</view>
|
|
|
+ <view class="discribeClass">{{ params.summary }}</view>
|
|
|
<view class="serviceClass">
|
|
|
- <ImageItem style="width: 24rpx;height: 24rpx;margin-right: 4rpx;" src="/static/points/Group4.png" />放心购
|
|
|
- <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
|
|
|
- src="/static/points/Group6.png" />假一赔三
|
|
|
- <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
|
|
|
- src="/static/points/Group2.png" /> 7天无理由退换
|
|
|
- <ImageItem style="width: 24rpx;height: 24rpx;margin-left: 26rpx;margin-right: 4rpx;"
|
|
|
- src="/static/points/return7.png" /> 破损包退换
|
|
|
+ <view v-for="item in servicePromiseArr">
|
|
|
+ <view style="display: flex;align-items: center;" v-if="item.isShow">
|
|
|
+ <ImageItem style="width: 24rpx;height: 24rpx;margin-right: 4rpx;" :src="item.icon" />
|
|
|
+ <view style="margin-right: 24rpx;">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<!-- 第二行text -->
|
|
|
<view class="seconedRow">
|
|
|
<view class="specClass">
|
|
|
- <view style="display: flex;align-items: center;">
|
|
|
- <text style="color: #666666;">规格</text>
|
|
|
- <ImageItem class="imgClass" v-for="item in 3" src="/static/points/Group6.png" />
|
|
|
- </view>
|
|
|
- <view style="display: flex;align-items: center;">
|
|
|
- <text style="color: #666666;margin-right: 8rpx;">已选:白色,大号</text>
|
|
|
+ <view v-if="!selectedObj"
|
|
|
+ style="display: flex;align-items: center;justify-content:space-between;width: 100%;">
|
|
|
+ <view style="color: #666666;">选择</view>
|
|
|
<image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
|
|
|
+ src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view v-if="selectedObj"
|
|
|
+ style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <text style="color: #666666;">规格</text>
|
|
|
+ <ImageItem class="imgClass" :src="$globalData.publicUrl + selectedObj.image" />
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <text style="color: #666666;margin-right: 8rpx;">已选:{{ selectedObj.specValueText }}</text>
|
|
|
+ <image style="width: 28rpx;height: 28rpx;" @click="selectProductShowFun"
|
|
|
src="@/static/points/Keyboard_arrow_rifht.png" mode=""></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
<view class="arriveAddressClass">
|
|
|
<text style="color: #666666;margin-right: 24rpx;">送至</text>
|
|
|
@@ -52,16 +73,20 @@
|
|
|
</view>
|
|
|
<view class="seedAddressClass">
|
|
|
<text style="color: #666666;margin-right: 24rpx;">发货</text>
|
|
|
- <text>山西省太原市小店区 | 免运费</text>
|
|
|
+ <text>山西省太原市小店区 | {{ params.freight == 0 ? '免运费' : '运费' + params.freight + '元' }}</text>
|
|
|
</view>
|
|
|
<view class="promiseSeedTime" style="margin-left: 80rpx;">
|
|
|
- 下单后48小时内发货
|
|
|
+ 下单后{{ params.deliveryTime }}小时内发货
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<!-- 第三行商品详情 -->
|
|
|
<view class="produceDateil">
|
|
|
<view style="font-weight: 800;font-size: 32rpx;color: #333333;">商品详情</view>
|
|
|
+ <view v-for="img in params.productImage" style="margin-top: 20rpx;">
|
|
|
+ <image style="width: 100%;" :src="$globalData.publicUrl + img" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 兑换须知 -->
|
|
|
<view class="niticeClass">
|
|
|
@@ -96,23 +121,22 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="footer-bar">
|
|
|
- <u-button :customStyle="{
|
|
|
+ <u-button v-if="selectedObj ? selectedObj.stock : params.stock" :customStyle="{
|
|
|
color: '#fff',
|
|
|
background: '#03C1B8'
|
|
|
}" @click="redeemNowFun">立即兑换</u-button>
|
|
|
- </view>
|
|
|
- <!-- <view class="footer-bar">
|
|
|
- <u-button :customStyle="{
|
|
|
+ <u-button v-else :customStyle="{
|
|
|
color: '#999999 ',
|
|
|
background: '#eee'
|
|
|
}">库存不足</u-button>
|
|
|
- </view> -->
|
|
|
+ </view>
|
|
|
|
|
|
<u-popup :show="redemptionRulesShowPopup" mode="bottom" @close="redemptionRulesShowPopup = false" round="20">
|
|
|
<RedemptionRules ref="redemptionRulesRef"></RedemptionRules>
|
|
|
</u-popup>
|
|
|
<u-popup :show="selectProductShowPopup" mode="bottom" round="10">
|
|
|
- <SelectProduct ref="selectProductRef" @closeSelectProduct="closeSelectProduct"></SelectProduct>
|
|
|
+ <SelectProduct :params="params" ref="selectProductRef" @redeemNowFun="redeemNowFun"
|
|
|
+ @closeSelectProduct="closeSelectProduct"></SelectProduct>
|
|
|
</u-popup>
|
|
|
|
|
|
</scroll-view>
|
|
|
@@ -127,6 +151,7 @@
|
|
|
import ImageItem from "@/components/swiper/components/image.vue";
|
|
|
import RedemptionRules from "./components/redemptionRules.vue";
|
|
|
import SelectProduct from "./components/selectProduct.vue";
|
|
|
+import { productGetById, productOrderCreate } from '@/api/points'
|
|
|
|
|
|
export default {
|
|
|
components: { ImageItem, RedemptionRules, SelectProduct },
|
|
|
@@ -135,11 +160,22 @@ export default {
|
|
|
isTop: 0,
|
|
|
redemptionRulesShowPopup: false,
|
|
|
selectProductShowPopup: false,
|
|
|
+ params: {},
|
|
|
+ servicePromiseArr: [
|
|
|
+ { name: '放心购', icon: '/static/points/Group4.png', isShow: false },
|
|
|
+ { name: '假一赔三', icon: '/static/points/Group6.png', isShow: false },
|
|
|
+ { name: '7天无理由退换', icon: '/static/points/Group2.png', isShow: false },
|
|
|
+ { name: '破损包退换', icon: '/static/points/return7.png', isShow: false },
|
|
|
+ ],
|
|
|
+ selectedObj: null
|
|
|
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- onLoad(data) {
|
|
|
+ onLoad(id) {
|
|
|
+ if (id) {
|
|
|
+ this.productGetByIdFun(id)
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -154,22 +190,100 @@ export default {
|
|
|
handleContentScroll(e) {
|
|
|
this.isTop = e.detail.scrollTop > 0
|
|
|
},
|
|
|
+ //查询商品详情
|
|
|
+ productGetByIdFun(id) {
|
|
|
+ productGetById({ id: 19 }).then(res => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.params = Object.assign({}, res.data.data)
|
|
|
+ //this.selectedObj = this.params.specComboVOList[0]
|
|
|
+ this.servicePromiseArr.forEach(element => {
|
|
|
+ this.params.servicePromise.map(m => {
|
|
|
+ if (m == element.name) {
|
|
|
+ element.isShow = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
//兑换须知页面
|
|
|
clichFun() {
|
|
|
this.redemptionRulesShowPopup = true
|
|
|
},
|
|
|
//立即兑换
|
|
|
- redeemNowFun() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/points/productDetails/paymentSuccessful'
|
|
|
- });
|
|
|
+ redeemNowFun(selectedObj) {
|
|
|
+ if (selectedObj) this.selectedObj = selectedObj
|
|
|
+ if (this.selectedObj) {
|
|
|
+ let params = {}
|
|
|
+ ////用户openId
|
|
|
+ params.openId = uni.getStorageSync('wx_copenid');
|
|
|
+ //地址ID
|
|
|
+ params.addressId = '11';
|
|
|
+ params.productId = this.params.id;
|
|
|
+ params.name = this.params.name;
|
|
|
+ params.productMainImage = this.params.productMainImage;
|
|
|
+ //选中的SKU ID
|
|
|
+ params.skuId = this.selectedObj.index;
|
|
|
+ // SKU列表(规格组合明细)
|
|
|
+ params.specNameValueLis = this.selectedObj.specNameValueList;
|
|
|
+ ////购买数量
|
|
|
+ params.quantity = 1;
|
|
|
+ ////支付方式:1微信支付 2账户余额
|
|
|
+ params.payType = Number(this.$refs.selectProductRef.selectPayMeth);
|
|
|
+ //运费
|
|
|
+ params.freightAmount = this.params.freight;
|
|
|
+ // 总金额
|
|
|
+ params.totalAmount = this.selectedObj.originPrice;
|
|
|
+ // 支付金额
|
|
|
+ params.payAmount = this.selectedObj.priceMoney;
|
|
|
+ // 使用的积分
|
|
|
+ params.pointsUsed = this.selectedObj.pricePoint;
|
|
|
+ //买家备注信息
|
|
|
+ params.buyerRemark = this.$refs.selectProductRef.orderRemarks;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/points/productDetails/paymentSuccessful'
|
|
|
+ });
|
|
|
+ console.log(params, 'params')
|
|
|
+ return
|
|
|
+
|
|
|
+
|
|
|
+ productOrderCreate(params).then(res => {
|
|
|
+
|
|
|
+ uni.requestPayment({
|
|
|
+ "provider": "wxpay",
|
|
|
+ "orderInfo": {},
|
|
|
+ success(res) { },
|
|
|
+ fail(e) { }
|
|
|
+ })
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/points/productDetails/paymentSuccessful'
|
|
|
+ // });
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.selectProductShowPopup = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.selectProductRef.onShowFun(this.selectedObj)
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
//打开选择商品页
|
|
|
selectProductShowFun() {
|
|
|
this.selectProductShowPopup = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.selectProductRef.onShowFun(this.selectedObj)
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
- closeSelectProduct() {
|
|
|
+ //关闭选择商品页
|
|
|
+ closeSelectProduct(selectedObj) {
|
|
|
+ if (selectedObj) {
|
|
|
+ this.selectedObj = selectedObj
|
|
|
+ }
|
|
|
this.selectProductShowPopup = false
|
|
|
},
|
|
|
//去我的地址页面
|
|
|
@@ -198,7 +312,6 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.mainImame {
|
|
|
height: 456rpx;
|
|
|
- border: 1px solid red
|
|
|
}
|
|
|
|
|
|
.footer-bar {
|
|
|
@@ -223,7 +336,6 @@ export default {
|
|
|
|
|
|
.firstRow {
|
|
|
background-color: #fff;
|
|
|
- height: 288rpx;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
padding: 26rpx 24rpx 24rpx 24rpx;
|
|
|
|
|
|
@@ -254,7 +366,6 @@ export default {
|
|
|
.productName {
|
|
|
margin-top: 22rpx;
|
|
|
width: 638rpx;
|
|
|
- height: 88rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 36rpx;
|
|
|
color: #333333;
|
|
|
@@ -295,7 +406,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
.seconedRow {
|
|
|
- height: 284rpx;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
margin-top: 24rpx;
|
|
|
@@ -313,6 +423,7 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
position: relative;
|
|
|
+
|
|
|
.imgClass {
|
|
|
width: 64rpx;
|
|
|
height: 64rpx;
|