<template>
|
<view>
|
<u-navbar title="群接龙" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
|
<view class="solitaire-details-bg"></view>
|
<view class="solitaire-details-placeholder-body" />
|
|
<!--商家及推荐-->
|
<view class="coreshop-margin-20 coreshop-goods-shop-info-view-box">
|
<view class="coreshop-shop-view">
|
<view class="coreshop-position-absolute">
|
<u-avatar :src="shopLogo" shape="square"></u-avatar>
|
</view>
|
<view class="coreshop-margin-left-10 coreshop-padding-left-40 coreshop-padding-right-40">
|
<view class="coreshop-margin-bottom-5 coreshop-text-white">{{shopName || ' '}}</view>
|
<view class="coreshop-font-sm u-line-1 coreshop-text-white">{{shareTitle || ' '}}</view>
|
</view>
|
<u-button type="default" size="mini" :plain="true" @click="doPhoneCall" icon="phone" text="联系商家" color="#272d47"></u-button>
|
</view>
|
</view>
|
|
<view class="coreshop-bg-white solitaire-details-body">
|
<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between">
|
<view class="coreshop-padding-top-15 coreshop-margin-bottom-10 coreshop-text-black u-line-2 coreshop-font-15">
|
{{model.title || ' '}}
|
</view>
|
<view class="solitaire-details-shareBox" @click="goShare()">
|
<u-icon name="share" color="#fff" size="22"></u-icon>
|
</view>
|
</view>
|
<view class="coreshop-font-11 coreshop-text-gray coreshop-margin-bottom-10 ">
|
{{$u.timeFormat(model.createTime, 'yyyy年mm月dd日')}}发布截至{{$u.timeFormat(model.endTime, 'yyyy年mm月dd日 hh:MM:ss')}}
|
</view>
|
<view class="coreshop-flex coreshop-align-center coreshop-padding-bottom-5">
|
<view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="model.minDeliveryPrice>0">{{model.minDeliveryPrice}}元起送</view>
|
<view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="model.startBuyPrice>0">{{model.startBuyPrice}}元起购</view>
|
</view>
|
<view class="coreshop-padding-10 coreshop-content">
|
<u-parse :content="model.contentBody" :selectable="true" v-if="model.contentBody"></u-parse>
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
|
</view>
|
</view>
|
</view>
|
|
<!-- 购物车主结构 -->
|
<view class="solitaire-details-product-item" v-for="(item, index) in items" :key="index">
|
<view class="coreshop-flex">
|
<u-avatar :src="item.productObj.images ? item.productObj.images+'?x-oss-process=image/resize,m_lfit,h_320,w_240' : item.goodObj.image+'?x-oss-process=image/resize,m_lfit,h_320,w_240'" :size="60" shape="square"></u-avatar>
|
<view class="coreshop-margin-left-10 coreshop-btn-all">
|
<view class="coreshop-font-13 u-line-2">{{item.goodObj.name}} </view>
|
<view class="coreshop-font-12 coreshop-text-yellow coreshop-margin-top-10 u-line-1">{{ item.productObj.spesDesc }}</view>
|
<view class="coreshop-flex coreshop-justify-between coreshop-margin-top-10">
|
<view>
|
<text class="coreshop-font-16 coreshop-text-red coreshop-text-price">
|
{{item.price}}
|
</text>
|
<text class="coreshop-text-through coreshop-font-11 coreshop-margin-left-10 coreshop-text-grey">市场价￥{{ item.productObj.mktprice || '0.00'}}</text>
|
</view>
|
<view class="cart-shoppingcard-goods-number">
|
<u-number-box buttonSize="24" integer :name="index" :value="item.nums" @change="toNumberChange" :step="1" :min="0" :max="item.oneCanBuy"></u-number-box>
|
</view>
|
</view>
|
<view class="cart-space-between">
|
<text class="cart-shoppingcard-remove cart-icons icon-msg" v-if="item.stockNo">库存不足</text>
|
<text class="cart-shoppingcard-remove cart-icons icon-msg" v-else-if="item.stockTension">库存紧张</text>
|
<text class="cart-shoppingcard-remove cart-icons" v-else=""></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!--内容区-->
|
<view class="coreshop-margin-10 coreshop-padding-top-10 coreshop-bg-white">
|
<view class="coreshop-font-md coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-flex-direction-row">
|
<u-icon name="more-circle" color="#e54d42" label="接龙清单" labelSize="15px" label-pos="right"></u-icon>
|
</view>
|
<view class="coreshop-padding-bottom-10">
|
<!--接龙记录-->
|
<view v-if="records.length>0">
|
<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between coreshop-padding-5 coreshop-margin-10 coreshop-bg-main" v-for="(item, index) in records" :key="index">
|
<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between coreshop-align-center">
|
<text class="coreshop-text-black coreshop-font-12">{{ records.length-index}}</text>
|
<view class="coreshop-margin-left-10 coreshop-width-max-content">
|
<view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between ">
|
<view class="coreshop-margin-right-5">
|
<u-avatar :src="item.avatarImage" :size="20"></u-avatar>
|
</view>
|
<text class="coreshop-text-black coreshop-font-12 u-line-1">{{ item.nickName==null ?'佚名': item.nickName}}</text>
|
</view>
|
<text class="coreshop-text-gray coreshop-font-10">{{$u.timeFormat(item.create, 'mm月dd日')}}</text>
|
</view>
|
</view>
|
<view class="coreshop-text-right coreshop-flex-direction-column">
|
<text class="coreshop-text-black coreshop-font-11 u-line-2">{{ item.productSku}}</text>
|
<text class="coreshop-text-gray coreshop-margin-left-10 coreshop-font-10">x{{ item.nums}}</text>
|
</view>
|
</view>
|
</view>
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox coreshop-margin-0" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="就你购买后展示效果了^_^" mode="list"></u-empty>
|
</view>
|
</view>
|
</view>
|
|
<!-- 分享弹窗 -->
|
<view class="coreshop-padding-10">
|
<u-popup mode="bottom" :show="shareBox" ref="share">
|
<!-- #ifdef MP-WEIXIN -->
|
<coreshop-share-wx :objectId="model.id" :shareType="12" @close="closeShare()"></coreshop-share-wx>
|
<!-- #endif -->
|
<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
|
<coreshop-share-app :objectId="model.id" :shareType="12" @close="closeShare()"></coreshop-share-app>
|
<!-- #endif -->
|
</u-popup>
|
<div id="qrCode" ref="qrCodeDiv"></div>
|
</view>
|
|
<view class="coreshop-foot-hight-view" />
|
<!--按钮-->
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<view class="coreshop-flex coreshop-padding-10 coreshop-justify-between coreshop-align-center coreshop-percent-100">
|
<view>
|
<text>合计 :</text>
|
<text class="coreshop-font-26 coreshop-text-red">￥{{totalprice}}</text>
|
</view>
|
<view class="coreshop-width-fit-content">
|
<u-button type="error" size="normal" @click="doSubmit" :disabled='submitStatus' :loading='submitStatus'>立即结算</u-button>
|
</view>
|
</view>
|
</view>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
|
data() {
|
return {
|
id: 0,
|
model: {},
|
items: [],
|
records: [],
|
background: {
|
background: '#272d47'
|
},
|
customButtonStyle: {
|
background: 'none',
|
color: '#fff'
|
},
|
totalprice: 0,
|
cart: [],
|
type: 2,
|
cartType: this.$globalConstVars.paymentType.solitaire,
|
shareBox: false,
|
submitStatus: false,
|
shareUrl: this.$globalConstVars.shareUrl,
|
}
|
},
|
onLoad(e) {
|
this.id = e.id;
|
},
|
onShow() {
|
this.getDetial();
|
this.submitStatus = false;
|
},
|
computed: {
|
shopName() {
|
return this.$store.state.config.shopName;
|
},
|
shareTitle() {
|
return this.$store.state.config.shareTitle;
|
},
|
shopLogo() {
|
return this.$store.state.config.shopLogo;
|
},
|
},
|
methods: {
|
//获取列表
|
getDetial() {
|
let data = {
|
id: this.id
|
}
|
this.$u.api.getSolitaireDetail(data).then(res => {
|
if (res.status) {
|
this.model = res.data.model;
|
this.items = res.data.items;
|
this.records = res.data.record;
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
},
|
//获取商品总额
|
getGoodsTotalMoney() {
|
var goodsTotalMoney = 0
|
this.cart.forEach(function (item, index, input) {
|
goodsTotalMoney += item.price * item.nums
|
})
|
this.totalprice = parseFloat(goodsTotalMoney).toFixed(2);
|
console.log(this.totalprice);
|
},
|
toNumberChange: function (e) {
|
this.$u.throttle(this.numberChange(e), 500)
|
},
|
numberChange: function (e) {
|
var _this = this;
|
var item = this.items[e.name];
|
var nums = e.value;
|
|
uni.showLoading({
|
title: '加载中',
|
mask: true
|
});
|
|
if (nums > 0) {
|
let data = {
|
ProductId: item.productId,
|
Nums: nums,
|
type: this.type,
|
cartType: this.cartType,
|
objectId: this.id
|
};
|
_this.$u.api.addCart(data).then(res => {
|
if (res.status) {
|
if (_this.cart.length < 1) {
|
_this.cart.push({
|
key: e.name,
|
id: res.data,
|
productId: item.productId,
|
goodsId: item.goodId,
|
nums: e.value,
|
price: item.price
|
})
|
} else {
|
var isIn = false
|
for (var i = 0; i < _this.cart.length; i++) {
|
if (_this.cart[i].key == e.name && _this.cart[i].productId == item.productId) {
|
_this.cart[i] = {
|
key: e.name,
|
id: res.data,
|
productId: item.productId,
|
goodsId: item.goodId,
|
nums: e.value,
|
price: item.price
|
}
|
isIn = true
|
}
|
}
|
if (!isIn) {
|
_this.cart.push({
|
key: e.name,
|
id: res.data,
|
productId: item.productId,
|
goodsId: item.goodId,
|
nums: e.value,
|
price: item.price
|
})
|
}
|
}
|
_this.getGoodsTotalMoney();
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 500);
|
} else {
|
_this.$u.toast(res.msg);
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 500);
|
}
|
});
|
} else {
|
var deleteIndex = -1;
|
var deleteId = 0;
|
for (var i = 0; i < _this.cart.length; i++) {
|
if (_this.cart[i].key == e.name && _this.cart[i].productId == item.productId) {
|
deleteIndex = i;
|
deleteId = _this.cart[i].id;
|
}
|
}
|
if (deleteIndex >= 0 && deleteId > 0) {
|
let data = {
|
id: deleteId
|
};
|
_this.$u.api.removeCart(data).then(res => {
|
if (res.status) {
|
_this.cart.splice(deleteIndex, 1);
|
_this.getGoodsTotalMoney();
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 500);
|
} else {
|
setTimeout(function () {
|
uni.hideLoading();
|
}, 500);
|
}
|
});
|
}
|
}
|
},
|
doSubmit() {
|
if (this.cart.length < 1) {
|
this.$u.toast('请先选择商品')
|
return true
|
}
|
//var totalprice = parseFloat(this.totalprice);
|
//var startBuyPrice = parseFloat(this.model.startBuyPrice);
|
//console.log('商品价格：' + this.totalprice);
|
//console.log('起购价格：' + this.model.startBuyPrice);
|
if (this.totalprice < this.model.startBuyPrice) {
|
this.$u.toast('最小购买价格为' + this.model.startBuyPrice + '元,请增加购买产品')
|
return true
|
}
|
this.submitStatus = true;
|
let newData = '';
|
for (var i = 0; i < this.cart.length; i++) {
|
if (this.cart[i].nums > 0) {
|
newData += ',' + this.cart[i].id;
|
}
|
}
|
if (newData.substr(0, 1) == ',') {
|
newData = newData.substr(1);
|
}
|
if (newData.length > 0) {
|
var str = '/pages/placeOrder/index/index?orderType=' + this.cartType + '&objectId=' + this.id + '&cartIds=' + JSON.stringify(newData);
|
console.log(str);
|
this.$u.route(str);
|
return true;
|
} else {
|
//没有选择不跳转
|
}
|
},
|
// 跳转到h5分享页面
|
goShare() {
|
this.shareBox = true;
|
},
|
closeShare() {
|
this.shareBox = false;
|
},
|
//获取分享URL
|
getShareUrl() {
|
let data = {
|
client: this.$globalConstVars.shareClient.wxMiNiProgram,
|
url: this.$globalConstVars.shareUrl,
|
type: this.$globalConstVars.shareModel.url,
|
page: this.$globalConstVars.shareType.solitaire,
|
params: {
|
id: this.model.id,
|
}
|
};
|
let userToken = this.$db.get('userToken');
|
if (userToken && userToken != '') {
|
data.token = userToken
|
}
|
this.$u.api.share(data).then(res => {
|
this.shareUrl = res.data
|
});
|
},
|
},
|
watch: {
|
model: {
|
handler() {
|
this.getShareUrl();
|
},
|
deep: true
|
}
|
},
|
//分享
|
onShareAppMessage(res) {
|
return {
|
title: this.model.title,
|
imageUrl: this.model.thumbnail,
|
path: this.shareUrl
|
}
|
},
|
onShareTimeline(res) {
|
return {
|
title: this.model.title,
|
imageUrl: this.model.thumbnail,
|
path: this.shareUrl
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
image { display: block; }
|
</style>
|
