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.
351 lines
13 KiB
351 lines
13 KiB
<template>
|
|
<view style="height: 100vh;background: #fff;">
|
|
<loading-state ref="pageView" @request="request">
|
|
<view style="height: 100vh;overflow: hidden;overflow-y: auto;">
|
|
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></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: 13vh;">
|
|
|
|
<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: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
|
|
border: 1px #FF5006 solid; border-top-left-radius: 25px; border-bottom-left-radius: 25px;flex-shrink: 0;"
|
|
@click="inCart()">加入购物车</text>
|
|
|
|
<view style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 0px 5px;height: 42px;flex: 1;
|
|
display: flex;flex-direction: row;align-items: center;box-sizing: border-box;" @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;flex: 1;">
|
|
<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>
|
|
|
|
<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 0px 15px;height: 40px;line-height: 40px;
|
|
border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;flex-shrink: 0;"
|
|
@click="settlement()">结算</text>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="inputDialog" type="dialog">
|
|
<uni-popup-dialog ref="inputClose" mode="more" title="订购协议" :showConfirm="true"
|
|
:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="data.dgxy"
|
|
:confirm-text="confirmText"></uni-popup-dialog>
|
|
</uni-popup>
|
|
|
|
<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 {
|
|
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: {
|
|
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
|
|
_this.$api.addShoppingCart(good).then((resp) => {
|
|
_this.shortToast('已加入购物车。')
|
|
_this.getAllPriceOrWeight()
|
|
}).catch(e => {
|
|
|
|
})
|
|
},
|
|
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;
|
|
}
|
|
</style>
|