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.
566 lines
21 KiB
566 lines
21 KiB
<template>
|
|
<view style="height: 100vh;background: #fff;">
|
|
<loading-state ref="pageView" @request="request">
|
|
<view style="height: 85vh;overflow: hidden;overflow-y: auto;">
|
|
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="scaleToFill"></image>
|
|
|
|
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px 20px 0px 20px;margin-top: 10px;
|
|
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;">
|
|
|
|
<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
|
|
<text
|
|
style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text>
|
|
<text style="font-size: 13px;color: #FF7A11;">￥{{data.price}}</text>
|
|
</view>
|
|
|
|
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
|
|
<text style="font-size: 13px;color: #666;">规    格</text>
|
|
<text
|
|
style="font-size: 13px;color: #999;">{{data.weight}}{{data.specificationUnit}}/{{data.unitName}}</text>
|
|
</view>
|
|
<!-- <view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;">
|
|
<text style="font-size: 13px;color: #666;">规    格</text>
|
|
<text style="font-size: 13px;color: #999;">{{data.remarks}}</text>
|
|
</view> -->
|
|
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;">
|
|
|
|
<view style="width: 2px;height: 15px;background: #FF7A11;margin-right: 10px;"></view>
|
|
<text style="font-size: 14px;font-weight: 600;font-family: sans-serif;color: #333;">商品详情</text>
|
|
|
|
</view>
|
|
|
|
<view style="margin-top: 10px;" v-show="!data.appContent==''">
|
|
<rich-text :nodes="data.appContent | formatRichText"></rich-text>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</loading-state>
|
|
|
|
<view
|
|
style="position: absolute; bottom: 0px; display: flex;flex-direction: column;width: 100%;
|
|
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 12vh;border-top: 1px solid #EFEFEF;">
|
|
|
|
<!-- <view
|
|
style="display: flex;flex-direction: row;align-items: center; justify-content: center; margin-top:10px;">
|
|
|
|
<view id="bomView" style="display: flex;flex-direction: row;align-items: center;">
|
|
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
|
|
温馨提示：已订</view>
|
|
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
|
|
{{page.weight}}斤
|
|
</view>
|
|
|
|
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
|
|
，{{data.qssl}}斤起订。</view>
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop2()">
|
|
<text
|
|
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;">
|
|
起订说明</text>
|
|
<text
|
|
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;margin-left: 2px;">
|
|
>></text>
|
|
</view>
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
<view
|
|
style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 20px;">
|
|
|
|
<text style="background: #FF9900; color: #fff;font-size: 14px; padding: 0px 15px;height: 50px;line-height:50px;flex: 1;text-align: center;
|
|
border: 1px #FF9900 solid; border-radius: 25px;" @click="showDialog()">加入购物车</text>
|
|
|
|
<!-- <view style="border: 1px #FF9900 solid;border-top-right-radius: 25px; border-bottom-right-radius: 25px;padding: 0px 5px;height: 50px;line-height:50px;flex: 1;
|
|
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;justify-content: center;"
|
|
@click="gotoCart()">
|
|
<image src="../../static/shoppCart_icon.png" mode="aspectFill"
|
|
style="height: 20px;width: 20px;flex-shrink: 0;">
|
|
</image>
|
|
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
|
<text
|
|
style="font-size: 15px;color: #FF5006;margin-left: 5px;height: 20px;line-height: 20px;margin-top: 5px;font-weight: bold;">￥{{page.price}}</text>
|
|
<text v-if="page.remarks!=''"
|
|
style="font-size: 10px;color: #666;margin-left: 5px; height: 10px;line-height: 10px;margin-bottom: 5px;">{{page.remarks}}</text>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 弹窗蒙版 -->
|
|
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal'></view>
|
|
<view class="modalDlg" catchtouchmove='preventTouchMove' v-if='showModal'>
|
|
|
|
<view style="display: flex;flex-direction: row;padding: 16px 20px;margin-top: 10px;">
|
|
|
|
<image :src="data.picUrl" style="width: 90px;height: 90px;border-radius: 10px;" mode="scaleToFill">
|
|
</image>
|
|
|
|
<view style="display: flex;flex-direction: column;flex: 1;margin-left: 15px;">
|
|
|
|
<view style="display: flex;flex-direction: row;">
|
|
<text style="flex: 1;margin-right: 10px;">{{data.name}}</text>
|
|
<image src="../../static/close2.png" style="width: 22px;height: 22px;" @click="colseDialog()">
|
|
</image>
|
|
</view>
|
|
|
|
<view style="display: flex;flex-direction: row;margin-top: 8px;">
|
|
|
|
<text
|
|
style="color: #EE752F;border: 1px #EE752F solid;
|
|
border-radius: 8px;padding: 1px 10px;font-size: 10px;">{{data.weight}}{{data.specificationUnit}}/{{data.unitName}}</text>
|
|
|
|
<text style="margin-left: 10px;color: #EE752F;border: 1px #EE752F solid;
|
|
border-radius: 8px;padding: 1px 10px;font-size: 10px;">{{data.remarks}}</text>
|
|
|
|
</view>
|
|
|
|
<!-- <text style="font-size: 12px;color: #E36443;margin-top: 8px;">提货截止日：{{data.periodValidity}}</text> -->
|
|
|
|
<text style="font-size: 12px;color: #E36443;margin-top: 8px;">￥{{data.price}}元</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view
|
|
style="display: flex;flex-direction: row;margin-top:10px;justify-content: space-between;padding: 16px 20px;">
|
|
|
|
<text style="font-size: 16px;font-weight: 600;font-family: sans-serif;">数量</text>
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;">
|
|
|
|
<image src="../../static/jian_icon.png" mode="aspectFill" style="width: 25px;height: 25px;"
|
|
@click.stop="jian(data)">
|
|
</image>
|
|
|
|
<text style="font-size: 16px;padding:5px; margin-left: 8px;margin-right: 8px;"
|
|
@click.stop="numberClick(data)">{{data.goodsNumber}}</text>
|
|
|
|
<image src="../../static/jia_icon.png" mode="aspectFill" style="width: 25px;height: 25px;"
|
|
@click.stop="jia(data)">
|
|
</image>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view style="position: absolute; bottom: 0px; display: flex;flex-direction: column;width: 100%;
|
|
box-sizing: border-box; padding-left: 16px;padding-right: 16px;background: #fff; height: 12vh;
|
|
border-top: 1px solid #EFEFEF;">
|
|
|
|
<!-- <view
|
|
style="display: flex;flex-direction: row;align-items: center; justify-content: center; margin-top:10px;">
|
|
|
|
<view id="bomView" style="display: flex;flex-direction: row;align-items: center;">
|
|
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
|
|
温馨提示：已订</view>
|
|
<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
|
|
{{page.weight}}斤
|
|
</view>
|
|
|
|
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
|
|
，{{data.qssl}}斤起订。</view>
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop2()">
|
|
<text
|
|
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;">
|
|
起订说明</text>
|
|
<text
|
|
style="color: #6190D8;font-size: 13px;height: 10px;line-height: 10px;margin-top: 5px;margin-left: 2px;">
|
|
>></text>
|
|
</view>
|
|
|
|
</view>
|
|
</view> -->
|
|
|
|
<view
|
|
style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 20px;">
|
|
|
|
<text style="background: #FF9900; color: #fff;font-size: 14px; padding: 0px 15px;height: 50px;line-height:50px;flex: 1;text-align: center;
|
|
border: 1px #FF9900 solid; border-radius: 25px;" @click="upDateShoppCart()">加入购物车</text>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 输入数量 -->
|
|
<view class="model" catchtouchmove='preventTouchMove' v-if='showModal1'></view>
|
|
<view class="modalDlg4" catchtouchmove='preventTouchMove' v-if='showModal1'>
|
|
|
|
<view
|
|
style="display: flex;flex-direction: column;background: #fff; width: 80%; border-radius: 20px;box-sizing: border-box;">
|
|
|
|
<input type="number" placeholder="请输入数量" v-model="data.goodsNumber"
|
|
style="margin: 20px;border: 1px #bbb solid; padding: 5px;line-height: 30px;height: 30px;border-radius: 6px;" />
|
|
<view
|
|
style="flex-shrink: 0;display: flex;flex-direction: row;align-items: center;justify-content: center;">
|
|
<button class="button1" @click="colseDialog1()">取消</button>
|
|
<button class="button2" @click="saveNum()">确定</button>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="inputDialog2" type="dialog">
|
|
<uni-popup-dialog ref="inputClose" mode="more" title="起订说明" :showConfirm="true"
|
|
:beforeClose="dialogBeforeClose2" @confirm="dialogInputConfirm2"
|
|
:content="data.qdxy"></uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
showModal1: false,
|
|
page: {
|
|
sid: '',
|
|
weight: "",
|
|
remarks: "",
|
|
price: ""
|
|
},
|
|
data: {
|
|
picUrl: '',
|
|
name: '',
|
|
price: '',
|
|
remarks: '',
|
|
appContent: ""
|
|
},
|
|
|
|
dialogContent: "这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容,这里是协议内容，这里是协议内容这里是协议内容，这里是协议内容",
|
|
confirmText: "我知道了（5s）",
|
|
dialogBeforeClose: false,
|
|
dialogBeforeClose2: false,
|
|
countdown: 5,
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.page.sid = options.sid
|
|
},
|
|
onShow() {
|
|
this.request()
|
|
},
|
|
filters: {
|
|
/**
|
|
* 处理富文本里的图片宽度自适应
|
|
* 1.去掉img标签里的style、width、height属性
|
|
* 2.img标签添加style属性：max-width:100%;height:auto
|
|
* 3.修改所有style里的width属性为max-width:100%
|
|
* 4.去掉<br/>标签
|
|
* @param html
|
|
* @returns {void|string|*}
|
|
*/
|
|
formatRichText(html) {
|
|
//控制小程序中图片大小
|
|
if (html) {
|
|
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
|
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
|
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
|
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
|
return match;
|
|
});
|
|
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
|
|
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
|
'max-width:100%;');
|
|
return match;
|
|
});
|
|
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
|
newContent = newContent.replace(/\<img/gi,
|
|
'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
|
|
return newContent;
|
|
} else {
|
|
return '暂无商品详情';
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
showDialog() {
|
|
this.showModal = true
|
|
},
|
|
colseDialog() {
|
|
this.showModal = false
|
|
},
|
|
colseDialog1() {
|
|
this.showModal1 = false
|
|
},
|
|
saveNum() {
|
|
this.showModal1 = false
|
|
},
|
|
jian(item) {
|
|
if (Number(item.goodsNumber) > 0) {
|
|
item.goodsNumber = Number(item.goodsNumber) - 1
|
|
}
|
|
},
|
|
jia(item) {
|
|
item.goodsNumber = Number(item.goodsNumber) + 1
|
|
},
|
|
numberClick(item) {
|
|
this.showModal1 = true
|
|
},
|
|
|
|
request() {
|
|
|
|
var params = {
|
|
customerSid: getApp().globalData.sid,
|
|
sid: this.page.sid,
|
|
}
|
|
|
|
console.log("request", params);
|
|
|
|
|
|
let _this = this
|
|
|
|
_this.$api.goodsDetail(params).then((resp) => {
|
|
// console.log(resp);
|
|
_this.data = resp
|
|
|
|
_this.getAllPriceOrWeight()
|
|
|
|
// _this.$nextTick(() => {
|
|
// _this.$refs.pageView.setLoadState(2)
|
|
// })
|
|
}).catch(e => {
|
|
_this.$nextTick(() => {
|
|
_this.$refs.pageView.setLoadState(1)
|
|
})
|
|
})
|
|
},
|
|
|
|
getAllPriceOrWeight() {
|
|
let _this = this
|
|
|
|
var params = {
|
|
customerSid: getApp().globalData.sid,
|
|
brandId: _this.data.brandId,
|
|
}
|
|
|
|
console.log("getGoodsWeight", params);
|
|
|
|
_this.$api.getGoodsWeight(params).then((resp) => {
|
|
|
|
console.log("getGoodsWeight", resp);
|
|
|
|
_this.page.price = resp.totalPrice
|
|
_this.page.weight = resp.totalWeight
|
|
_this.page.remarks = resp.remarks
|
|
|
|
|
|
_this.$nextTick(() => {
|
|
_this.$refs.pageView.setLoadState(2)
|
|
})
|
|
|
|
}).catch(e => {
|
|
_this.$nextTick(() => {
|
|
_this.$refs.pageView.setLoadState(1)
|
|
})
|
|
})
|
|
},
|
|
|
|
inCart() {
|
|
|
|
// this.data.goodsNumber = Number(this.data.goodsNumber) + 1
|
|
|
|
this.upDateShoppCart()
|
|
},
|
|
upDateShoppCart() {
|
|
var good = {
|
|
goodsSid: this.data.sid,
|
|
goodsName: this.data.name,
|
|
goodsNumber: this.data.goodsNumber,
|
|
affiliation: this.data.brandId,
|
|
price: this.data.mefenPrice,
|
|
weight: this.data.weight,
|
|
customerSid: getApp().globalData.sid
|
|
}
|
|
|
|
let _this = this
|
|
|
|
console.log("upDateShoppCart", good);
|
|
|
|
_this.$api.addShoppingCart(good).then((resp) => {
|
|
_this.shortToast('已加入购物车。')
|
|
_this.getAllPriceOrWeight()
|
|
_this.showModal = false
|
|
uni.navigateBack()
|
|
}).catch(e => {
|
|
_this.showModal = false
|
|
})
|
|
},
|
|
settlement() {
|
|
// 支付
|
|
|
|
if (this.page.weight < parseInt(this.data.qssl)) {
|
|
this.shortToast('满' + this.data.qssl + '斤才可定制云菜窖哦，请继续选菜吧。')
|
|
return
|
|
}
|
|
|
|
this.showPop()
|
|
|
|
},
|
|
showPop() {
|
|
|
|
this.$refs.inputDialog.open()
|
|
|
|
let timeOut = setInterval(() => {
|
|
|
|
if (this.countdown == 1) {
|
|
this.confirmText = "确定"
|
|
this.countdown = 5
|
|
this.dialogBeforeClose = false
|
|
clearInterval(timeOut)
|
|
|
|
} else {
|
|
this.dialogBeforeClose = true
|
|
this.countdown = this.countdown - 1;
|
|
this.confirmText = "我知道了" + "（" + this.countdown + "s）"
|
|
}
|
|
}, 1000)
|
|
},
|
|
saveGoods() {
|
|
|
|
|
|
var params = {
|
|
customerSid: getApp().globalData.sid,
|
|
// cardNumber: 1,
|
|
brandId: this.data.brandId,
|
|
totalTee: this.page.price,
|
|
|
|
// ordOrderDetailsVoList: list
|
|
}
|
|
console.log("params", params);
|
|
|
|
let _this = this
|
|
_this.$api.createVegeOrder(params).then((resp) => {
|
|
|
|
// console.log("resp", resp);
|
|
this.$pay(resp)
|
|
}).catch(e => {})
|
|
|
|
|
|
},
|
|
|
|
gotoCart() {
|
|
uni.navigateTo({
|
|
url: 'shoppCart?affiliation=' + this.data.brandId + "&weight=" + this.data.qssl + "&qdxy=" +
|
|
this.data.qdxy
|
|
})
|
|
},
|
|
showPop2() {
|
|
|
|
this.$refs.inputDialog2.open()
|
|
|
|
},
|
|
dialogInputConfirm(val) {
|
|
if (this.confirmText == "确定") {
|
|
this.confirmText = "我知道了（5s）",
|
|
this.dialogBeforeClose = true,
|
|
this.countdown = 5
|
|
this.saveGoods()
|
|
}
|
|
|
|
},
|
|
|
|
dialogInputConfirm2(val) {
|
|
console.log(">>>>>>>>>>>", this.dialogBeforeClose2);
|
|
this.dialogBeforeClose2 = false
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
uni-page-body,
|
|
page {
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
/* 弹窗样式 */
|
|
.model {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
z-index: 1;
|
|
opacity: 0.5;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.modalDlg {
|
|
/* 设置超出滚动 */
|
|
overflow: auto;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 70vw;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
background-color: #fff;
|
|
border-top-right-radius: 20px;
|
|
border-top-left-radius: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modalDlg4 {
|
|
/* 设置超出滚动 */
|
|
overflow: auto;
|
|
position: fixed;
|
|
z-index: 2;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
|
|
.button1 {
|
|
|
|
background: #fff;
|
|
color: #666;
|
|
flex: 1;
|
|
border-radius: 0px;
|
|
border-bottom-left-radius: 20px;
|
|
border: 1px solid #eee;
|
|
}
|
|
|
|
.button2 {
|
|
background: #fff;
|
|
color: #FF9900;
|
|
border-radius: 0px;
|
|
border-bottom-right-radius: 20px;
|
|
flex: 1;
|
|
border: 1px solid #eee;
|
|
}
|
|
</style>
|